/* Schrift: Inter, selbst gehostet (Lizenz: fonts/OFL.txt). Es wird nichts von fremden Servern geladen. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Farben, Breite und Rundungen an einer Stelle. Sobald Logo und Farben feststehen, nur hier tauschen. */
:root {
  --tinte: #0c0f14;
  --tinte-2: #171c25;
  --tinte-3: #262d39;
  --bg: #ffffff;
  --flaeche: #f4f4ef;
  --linie: #e4e4dd;
  --grau: #5d6470;
  --grau-hell: #a3aab5;
  --akzent: #c5f04a;
  --akzent-dunkel: #a6d42a;
  --gruen: #13814f;
  --rot: #c4352b;
  --platzhalter: #fff4cc;
  --platzhalter-rand: #c9a227;
  --platzhalter-text: #6b4f00;
  --max: 1200px;
  --radius: 24px;
  --schrift: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--schrift);
  background: var(--bg);
  color: var(--tinte);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
}

/* Sichtbare Platzhalter für Angaben, die noch fehlen. Vor dem Livegang müssen alle verschwunden sein. */
.platzhalter {
  display: inline-block;
  background: var(--platzhalter);
  border: 1px dashed var(--platzhalter-rand);
  color: var(--platzhalter-text);
  border-radius: 6px;
  padding: 0 6px;
  font-size: .85em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

/* ---------- Kopfzeile ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 15, 20, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
  font-size: 19px;
}

.navlinks {
  display: none;
  gap: 28px;
  align-items: center;
  font-size: 15px;
  color: var(--grau-hell);
}

.navlinks a {
  text-decoration: none;
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  color: #fff;
}

.menu-knopf {
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: #fff;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
}

.navlinks.offen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  background: var(--tinte);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 16px 20px;
  gap: 0;
  color: #fff;
}

.navlinks.offen a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.navlinks.offen a.btn {
  margin-top: 16px;
  border-bottom: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, background .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primaer {
  background: var(--akzent);
  color: var(--tinte);
}

.btn-primaer:hover {
  background: var(--akzent-dunkel);
}

.btn-dunkel {
  background: var(--tinte);
  color: #fff;
}

.btn-dunkel:hover {
  background: var(--tinte-3);
}

.btn-rand {
  background: transparent;
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

.btn-rand:hover {
  border-color: #fff;
}

.navlinks .btn {
  min-height: 42px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--tinte);
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* ---------- Abschnitte und Schrift ---------- */
section {
  padding: 72px 0;
}

.dunkel {
  background: var(--tinte);
  color: #fff;
}

.grau {
  background: var(--flaeche);
}

.etikett {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--tinte);
  color: #fff;
  margin-bottom: 18px;
}

.dunkel .etikett {
  background: rgba(255, 255, 255, .1);
}

.etikett::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent);
}

h1 {
  font-size: clamp(42px, 9.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
}

h2 {
  font-size: clamp(32px, 6.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 800;
  margin-bottom: 16px;
}

h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.kopf {
  max-width: 760px;
  margin-bottom: 40px;
}

.kopf p,
.leise {
  color: var(--grau);
  font-size: 18px;
}

.dunkel .kopf p,
.dunkel .leise {
  color: var(--grau-hell);
}

.raster {
  display: grid;
  gap: 16px;
}

.karte {
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 26px;
}

.karte p {
  color: var(--grau);
}

.dunkel .karte {
  background: var(--tinte-2);
  border-color: var(--tinte-3);
}

.karte.dunkel {
  background: var(--tinte);
  border-color: var(--tinte);
}

.dunkel .karte p {
  color: var(--grau-hell);
}

.hinweis {
  font-size: 14px;
  color: var(--grau);
  margin-top: 16px;
}

.dunkel .hinweis {
  color: var(--grau-hell);
}

.mehr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.dunkel .mehr {
  color: var(--akzent);
}

/* ---------- Startbereich ---------- */
.start {
  position: relative;
  overflow: hidden;
  padding: 56px 0 72px;
}

.start::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% 30%;
  height: 520px;
  background: radial-gradient(closest-side, rgba(197, 240, 74, .22), transparent);
  pointer-events: none;
}

.start-raster {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
}

.unterzeile {
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--grau-hell);
  margin: 22px 0 30px;
  max-width: 580px;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.aktionen .btn {
  flex: 1 1 220px;
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.kennzahlen b {
  display: block;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -.03em;
  line-height: 1.1;
}

.kennzahlen span {
  font-size: 13px;
  color: var(--grau-hell);
}

/* Benachrichtigungen im Startbereich */
.meldungen {
  display: grid;
  gap: 12px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.meldung-karte {
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 16px 18px;
  backdrop-filter: blur(8px);
  animation: hereinschweben .7s ease both;
}

.meldung-karte:nth-child(2) {
  animation-delay: .5s;
  margin-left: 24px;
}

.meldung-karte:nth-child(3) {
  animation-delay: 1s;
}

.meldung-karte:nth-child(4) {
  animation-delay: 1.5s;
  margin-left: 24px;
}

.meldung-symbol {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: var(--tinte);
}

.meldung-symbol svg {
  width: 20px;
  height: 20px;
}

.meldung-symbol.leise-symbol {
  background: var(--tinte-3);
  color: #fff;
}

.meldung-karte b {
  display: block;
  font-size: 15px;
}

.meldung-karte span {
  font-size: 13px;
  color: var(--grau-hell);
}

.meldung-zeit {
  margin-left: auto;
  font-size: 12px;
  color: var(--grau-hell);
  align-self: flex-start;
}

@keyframes hereinschweben {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Vorher / Nachher ---------- */
.vergleich {
  display: grid;
  gap: 16px;
}

.vergleich-spalte {
  border-radius: var(--radius);
  padding: 28px 24px;
}

.vergleich-spalte.vorher {
  background: var(--bg);
  border: 1px solid var(--linie);
}

.vergleich-spalte.nachher {
  background: var(--tinte);
  color: #fff;
}

.vergleich-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.vergleich-spalte ul {
  list-style: none;
  display: grid;
}

.vergleich-spalte li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--linie);
}

.nachher li {
  border-top-color: var(--tinte-3);
}

.vergleich-spalte li b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grau);
  margin-bottom: 2px;
}

.nachher li b {
  color: var(--grau-hell);
}

.vergleich-spalte li svg {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.vorher li svg {
  color: var(--rot);
}

.nachher li svg {
  color: var(--akzent);
}

/* ---------- Demo ---------- */
.demo {
  display: grid;
  gap: 32px;
  align-items: start;
}

/* Sonst macht die lange Schrittleiste die Spalte breiter als den Bildschirm. */
.demo > * {
  min-width: 0;
}

.demo-schritte {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.demo-schritte::-webkit-scrollbar {
  display: none;
}

.demo-schritt {
  flex: none;
  border: 1px solid var(--tinte-3);
  background: transparent;
  color: var(--grau-hell);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.demo-schritt[aria-current="step"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--tinte);
}

.demo-schritt.erledigt {
  color: #fff;
}

.demo-erklaerung h3 {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.demo-erklaerung > p {
  color: var(--grau-hell);
  font-size: 18px;
}

.hintergrund {
  margin-top: 24px;
  background: var(--tinte-2);
  border: 1px solid var(--tinte-3);
  border-radius: 20px;
  padding: 20px 22px;
}

.hintergrund-titel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 10px;
}

.hintergrund ol {
  list-style: none;
  display: grid;
  gap: 10px;
}

.hintergrund li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  color: #dfe3e8;
}

.dienst {
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--tinte-3);
  color: #fff;
  white-space: nowrap;
}

.demo-steuerung {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.demo-steuerung .btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 15px;
}

/* Gezeichnetes Handy der Demo */
.telefon {
  width: min(100%, 340px);
  margin: 0 auto;
  aspect-ratio: 340 / 690;
  background: #000;
  border-radius: 48px;
  padding: 12px;
  box-shadow: 0 0 0 1px var(--tinte-3), 0 40px 80px rgba(0, 0, 0, .45);
  position: relative;
}

.telefon::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  translate: -50% 0;
  width: 96px;
  height: 26px;
  border-radius: 999px;
  background: #000;
  z-index: 3;
}

.bildschirm {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  color: var(--tinte);
  position: relative;
  font-size: 14px;
  line-height: 1.45;
}

.ansicht {
  position: absolute;
  inset: 0;
  padding: 56px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  animation: ansicht-rein .35s ease both;
}

@keyframes ansicht-rein {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ansicht-kopf {
  font-size: 12px;
  color: var(--grau);
  display: flex;
  justify-content: space-between;
}

.ansicht h4 {
  font-size: 20px;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.ansicht p {
  color: var(--grau);
}

.abo-wahl {
  border: 2px solid var(--linie);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.abo-wahl.gewaehlt {
  border-color: var(--tinte);
}

.abo-wahl b {
  display: block;
}

.abo-wahl small {
  color: var(--grau);
}

.abo-preis {
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
}

.ansicht .tipp {
  margin-top: auto;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: var(--tinte);
  color: #fff;
  font-weight: 700;
  padding: 14px;
  cursor: pointer;
  position: relative;
}

.ansicht .tipp.tg {
  background: #2a9de0;
}

.ansicht .tipp.warn {
  background: var(--rot);
}

.tipp::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  border: 2px solid var(--akzent);
  animation: puls 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes puls {
  0% {
    opacity: .9;
    transform: scale(.97);
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

.feld {
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--tinte);
  background: #fafaf8;
}

.feld small {
  display: block;
  font-size: 11px;
  color: var(--grau);
}

.stripe-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.stripe-kopf i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--tinte);
  display: inline-block;
}

.preis-gross {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.wallet {
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-weight: 700;
}

.mail-ansicht {
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 14px;
}

.mail-ansicht .absender {
  font-size: 12px;
  color: var(--grau);
}

.mail-ansicht b {
  display: block;
  margin: 4px 0 6px;
}

.erfolg {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #eaf7ef;
  color: #0d5c37;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
}

.erfolg.rot {
  background: #fbeceb;
  color: #8c2119;
}

/* Telegram-artige Ansicht (eigene, vereinfachte Zeichnung, kein Original-Design) */
.ansicht.tg-ansicht {
  background: #e6ebee;
  padding: 0 0 16px;
  gap: 0;
}

.tg-kopf {
  background: #fff;
  padding: 50px 16px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #dde3e7;
}

.tg-bild {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--akzent), #4cc38a);
  flex: none;
}

.tg-kopf b {
  display: block;
  font-size: 15px;
}

.tg-kopf small {
  color: var(--grau);
}

.tg-verlauf {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-end;
}

.blase {
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  max-width: 85%;
  font-size: 13px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}

.blase b {
  display: block;
  font-size: 12px;
  color: #2a7ab0;
}

.system {
  align-self: center;
  background: rgba(0, 0, 0, .18);
  color: #fff;
  font-size: 12px;
  border-radius: 999px;
  padding: 4px 12px;
  text-align: center;
}

.tg-ansicht .tipp {
  margin: 0 14px;
  width: auto;
}

.zeitsprung {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--grau);
  border: 1px dashed var(--grau-hell);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- Funktionen als Kacheln ---------- */
.kacheln {
  display: grid;
  gap: 16px;
}

.kachel {
  border-radius: var(--radius);
  padding: 28px 26px;
  background: var(--bg);
  border: 1px solid var(--linie);
}

.kachel.dunkel-kachel {
  background: var(--tinte);
  color: #fff;
  border-color: var(--tinte);
}

.kachel.akzent-kachel {
  background: var(--akzent);
  border-color: var(--akzent);
}

.kachel-symbol {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--flaeche);
  margin-bottom: 18px;
}

.dunkel-kachel .kachel-symbol {
  background: var(--tinte-3);
  color: var(--akzent);
}

.akzent-kachel .kachel-symbol {
  background: rgba(12, 15, 20, .1);
}

.kachel-symbol svg {
  width: 22px;
  height: 22px;
}

.kachel p {
  color: var(--grau);
}

.dunkel-kachel p {
  color: var(--grau-hell);
}

.akzent-kachel p {
  color: #2d3a10;
}

/* ---------- Schieberegler (Rechner auf der Startseite) ---------- */

input[type="range"] {
  width: 100%;
  accent-color: var(--tinte);
  height: 28px;
}

/* ---------- Referenz ---------- */
.bilder {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 40px;
}

.bilder figure {
  flex: 1 1 0;
  max-width: 260px;
}

.geraet {
  border-radius: 28px;
  border: 6px solid var(--tinte);
  overflow: hidden;
  background: #f5f9fc;
  aspect-ratio: 9 / 16.2;
  box-shadow: 0 24px 50px rgba(12, 15, 20, .18);
}

.geraet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Bilder, die breiter als ein Handy sind (z. B. die Mail), ganz zeigen statt seitlich abschneiden. */
.geraet img.ganz {
  object-fit: contain;
  background: #f5f9fc;
}

.bilder figure:nth-child(1) .geraet {
  rotate: -4deg;
  translate: 0 18px;
}

.bilder figure:nth-child(3) .geraet {
  rotate: 4deg;
  translate: 0 18px;
}

.bilder figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--grau);
  margin-top: 28px;
}

.bilder.vier figure:nth-child(4) .geraet {
  rotate: 3deg;
}

.bilder.vier figure:nth-child(3) .geraet {
  rotate: -2deg;
  translate: 0 0;
}

.zitat {
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 700;
  max-width: 860px;
}

.zitat-quelle {
  margin-top: 14px;
  color: var(--grau);
  font-size: 15px;
}

.zahlen {
  display: grid;
  gap: 12px;
  margin: 32px 0;
}

.zahl b {
  display: block;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.zahl span {
  font-size: 14px;
  color: var(--grau);
}

/* ---------- Paket ---------- */
.paket {
  border-radius: var(--radius);
  background: var(--tinte);
  color: #fff;
  padding: 32px 24px;
  display: grid;
  gap: 32px;
}

.preis {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: 10px 0 4px;
}

.preis-zusatz {
  color: var(--grau-hell);
}

/* ---------- Unterseiten ---------- */
.seitenkopf {
  padding: 64px 0 56px;
}

.seitenkopf p {
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--grau-hell);
  max-width: 680px;
  margin-top: 18px;
}

.seitenkopf h1 {
  font-size: clamp(38px, 8vw, 72px);
  max-width: 980px;
}

.ablauf-block + .ablauf-block {
  margin-top: 64px;
}

.ablauf-block {
  display: grid;
  gap: 8px 48px;
}

.ablauf-block h2 {
  font-size: clamp(28px, 4.5vw, 40px);
}

.ablauf-nr {
  font-size: 14px;
  font-weight: 700;
  color: var(--grau);
}

.ablauf-liste {
  list-style: none;
  counter-reset: teil;
  display: grid;
  gap: 0;
}

.ablauf-liste li {
  counter-increment: teil;
  position: relative;
  padding: 16px 0 16px 48px;
  border-top: 1px solid var(--linie);
  color: var(--grau);
}

.ablauf-liste li b {
  color: var(--tinte);
}

.ablauf-liste li::before {
  content: counter(teil);
  position: absolute;
  left: 0;
  top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--akzent);
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
}

.kasten {
  margin-top: 12px;
  background: var(--flaeche);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 15px;
  color: var(--grau);
}

.kasten b {
  color: var(--tinte);
}

.dunkel .kasten {
  background: var(--tinte-2);
  color: var(--grau-hell);
}

.dunkel .kasten b {
  color: #fff;
}

.liste-haken {
  list-style: none;
  display: grid;
  gap: 12px;
}

.liste-haken li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}

.liste-haken li::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0f14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.liste-haken small {
  display: block;
  color: var(--grau);
  font-size: 15px;
}

.dunkel .liste-haken small {
  color: var(--grau-hell);
}

.fall-marke {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 12px;
}

.dunkel .fall-marke {
  color: var(--akzent);
}

.fall-text {
  max-width: 760px;
}

.fall-text p {
  color: var(--grau);
  font-size: 19px;
}

.dunkel .fall-text p {
  color: var(--grau-hell);
}

.fall-text p + p {
  margin-top: 14px;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 860px;
}

.faq details {
  border-bottom: 1px solid var(--linie);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-weight: 700;
  font-size: 18px;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tinte);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 500;
}

.faq details[open] summary::after {
  content: "–";
  background: var(--akzent);
  color: var(--tinte);
}

.faq details p {
  color: var(--grau);
  padding-bottom: 22px;
}

/* ---------- Kontakt ---------- */
.kontakt-raster {
  display: grid;
  gap: 16px;
}

.formular {
  display: grid;
  gap: 14px;
}

.formular label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
}

.formular input,
.formular select,
.formular textarea {
  width: 100%;
  border: 1px solid #cfd2cc;
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--bg);
  color: var(--tinte);
  font-size: 16px;
}

.formular select {
  appearance: none;
  padding-right: 44px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6470' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
}

.formular label[hidden] {
  display: none;
}

.formular textarea {
  min-height: 140px;
  resize: vertical;
}

.formular .optional {
  font-weight: 400;
  color: var(--grau);
}

/* Spam-Falle: Das Feld sehen Menschen nicht, Bots füllen es aus. */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  font-weight: 600;
}

.meldung.ok {
  color: var(--gruen);
}

.meldung.fehler {
  color: var(--rot);
}

/* ---------- Abschluss und Fuß ---------- */
.abschluss {
  text-align: center;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.abschluss::before {
  content: "";
  position: absolute;
  inset: 40% -10% -60%;
  background: radial-gradient(closest-side, rgba(197, 240, 74, .25), transparent);
  pointer-events: none;
}

.abschluss .container {
  position: relative;
}

.abschluss h2 {
  max-width: 820px;
  margin: 0 auto 16px;
}

.abschluss p {
  color: var(--grau-hell);
  max-width: 560px;
  margin: 0 auto 30px;
  font-size: 18px;
}

footer.seitenfuss {
  background: var(--tinte);
  color: var(--grau-hell);
  border-top: 1px solid var(--tinte-3);
  padding: 36px 0 112px;
  font-size: 15px;
}

.fuss-raster {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: space-between;
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.fuss-links a {
  text-decoration: none;
}

.fuss-links a:hover {
  color: #fff;
}

/* Fester Button unten auf dem Handy */
.handy-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12, 15, 20, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.handy-leiste .btn {
  width: 100%;
}

/* Impressum, Datenschutz */
.rechtstext {
  max-width: 760px;
  padding: 48px 0 88px;
}

.rechtstext h1 {
  font-size: clamp(34px, 6vw, 52px);
  margin-bottom: 24px;
}

.rechtstext h2 {
  font-size: 21px;
  letter-spacing: -.01em;
  margin: 30px 0 8px;
}

.rechtstext p {
  margin-bottom: 12px;
}

.zurueck {
  display: inline-block;
  margin-top: 24px;
  font-weight: 600;
}

/* Weniger Bewegung, wenn im Gerät so eingestellt */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Größere Bildschirme ---------- */
@media (min-width: 720px) {
  .raster-2,
  .vergleich,
  .kontakt-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .raster-3,
  .zahlen {
    grid-template-columns: repeat(3, 1fr);
  }

  .kacheln {
    grid-template-columns: repeat(2, 1fr);
  }

  .aktionen .btn {
    flex: 0 0 auto;
  }

  .bilder {
    gap: 24px;
  }

  .vergleich-spalte {
    padding: 36px 32px;
  }
}

@media (min-width: 960px) {
  section {
    padding: 112px 0;
  }

  .navlinks {
    display: flex;
  }

  .menu-knopf,
  .handy-leiste {
    display: none;
  }

  footer.seitenfuss {
    padding-bottom: 36px;
  }

  .start {
    padding: 96px 0 112px;
  }

  .start-raster {
    grid-template-columns: 1.25fr .75fr;
  }

  .seitenkopf {
    padding: 96px 0 80px;
  }

  .demo {
    grid-template-columns: 1fr 380px;
    gap: 64px;
  }

  .demo-telefon {
    order: 2;
    position: sticky;
    top: 100px;
  }

  .kacheln {
    grid-template-columns: repeat(6, 1fr);
  }

  .kachel {
    grid-column: span 2;
  }

  .kachel.breit {
    grid-column: span 3;
  }

  .paket {
    grid-template-columns: .8fr 1.2fr;
    padding: 56px;
    gap: 56px;
  }

  .ablauf-block {
    grid-template-columns: 340px 1fr;
  }

  .kontakt-raster {
    grid-template-columns: .85fr 1.15fr;
    align-items: start;
  }
}

/* ---------- Preiskarte (Seite "Preis & Ablauf") ---------- */
.preiskarte {
  display: grid;
  gap: 32px;
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: 0 30px 60px rgba(12, 15, 20, .08);
}

.preiskarte .preis {
  font-size: clamp(44px, 7vw, 64px);
}

.zahlweise {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  background: var(--flaeche);
  border-radius: 16px;
  padding: 12px 16px 12px 12px;
}

.zahlweise b {
  display: block;
}

.zahlweise span {
  font-size: 14px;
  color: var(--grau);
}

.preiskarte .liste-haken {
  margin-top: 18px;
}

/* ---------- Roadmap (Seite "Preis & Ablauf") ---------- */
.roadmap-kopf {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.roadmap-kopf p {
  color: var(--grau-hell);
  font-size: 18px;
}

/* Linie: gestrichelt; der gefüllte Teil (von blassem zu kräftigem Grün) wächst beim Scrollen mit (--fortschritt aus script.js). */
.roadmap {
  position: relative;
  list-style: none;
  max-width: 1040px;
  margin: 0 auto;
  --fortschritt: 100%;
}

.js .roadmap {
  --fortschritt: 0%;
}

.roadmap::before,
.roadmap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 30.5px;
  width: 3px;
  border-radius: 3px;
}

.roadmap::before {
  bottom: 0;
  background: repeating-linear-gradient(to bottom, var(--tinte-3) 0 10px, transparent 10px 18px);
}

.roadmap::after {
  height: var(--fortschritt);
  background: linear-gradient(to bottom, rgb(150, 178, 122), var(--akzent) 85%);
  transition: height .2s linear;
}

.station {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  padding-bottom: 32px;
}

.station:last-child {
  padding-bottom: 0;
}

/* Punkt pro Phase: wird zum Go-Live hin größer und grüner (Größe und Farbe stehen im HTML). */
.punkt-feld {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 24px;
}

.punkt {
  width: var(--groesse);
  height: var(--groesse);
  border-radius: 50%;
  background: var(--farbe);
  box-shadow: 0 0 0 6px var(--tinte), 0 0 calc(var(--groesse) * .9) var(--schein);
  transition: transform .5s cubic-bezier(.2, 1.5, .4, 1);
}

.station.ziel .punkt {
  position: relative;
}

.station.ziel .punkt::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  animation: ring 2s ease-out infinite;
}

@keyframes ring {
  from {
    opacity: .9;
    transform: scale(.8);
  }

  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

.station.danach .punkt {
  background: var(--tinte);
  border: 3px solid var(--akzent);
}

.etappe {
  position: relative;
  background: var(--tinte-2);
  border: 1px solid var(--tinte-3);
  border-radius: 24px;
  padding: 20px 18px 18px;
  transition: opacity .5s ease .1s, transform .5s ease .1s;
}

/* Mit JavaScript erscheinen Punkt und Karte erst beim Scrollen. */
.js .station:not(.sichtbar) .punkt {
  transform: scale(0);
}

.js .station:not(.sichtbar) .etappe {
  opacity: 0;
  transform: translateY(18px);
}

.zeitraum {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte);
  background: var(--akzent);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}

.zeit-handy {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

.etappe h3 {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.etappe > p {
  color: var(--grau-hell);
}

.bausteine {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.baustein {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
}

.baustein svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.baustein b {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau-hell);
  margin-bottom: 2px;
}

.baustein.bekommst svg {
  color: var(--akzent);
}

.baustein.beitrag svg {
  color: #9db7ff;
}

.station.ziel .etappe {
  background: linear-gradient(135deg, rgba(197, 240, 74, .16), rgba(197, 240, 74, .03));
  border-color: rgba(197, 240, 74, .35);
}

/* Großer, blasser Zeitraum und Zahlung neben der Karte (nur am Computer) */
.geist-feld {
  display: none;
}

/* Zahlungs-Meilenstein */
.zahlung {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(197, 240, 74, .55);
  background: rgba(197, 240, 74, .07);
  border-radius: 16px;
  padding: 10px 16px 10px 10px;
  text-align: left;
}

.zahlung-symbol {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: var(--tinte);
}

.zahlung-symbol svg {
  width: 20px;
  height: 20px;
}

.zahlung b {
  display: block;
  font-size: 16px;
  letter-spacing: -.01em;
}

.zahlung > div span {
  font-size: 13px;
  color: var(--grau-hell);
}

.zahlung-handy {
  margin-top: 12px;
}

/* Korrekturschleife: auf dem Handy ein Hinweis in der Karte, am Computer ein Pfeil zurück in die Karte */
.schleife-bogen,
.schleife-spitze,
.schleife-text b,
.schleife-kurz {
  display: none;
}

.schleife-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  border: 1px dashed var(--akzent);
  color: var(--akzent);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
}

.schleife-text svg {
  width: 16px;
  height: 16px;
}

.inklusive {
  max-width: 1040px;
  margin: 56px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.inklusive span {
  border: 1px solid var(--tinte-3);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 15px;
}

.inklusive span::before {
  content: "✓ ";
  color: var(--akzent);
  font-weight: 800;
}

.aufwand {
  text-align: center;
  margin-top: 28px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.kleingedruckt {
  text-align: center;
  color: var(--grau-hell);
  font-size: 13px;
  max-width: 620px;
  margin: 14px auto 0;
}

@media (min-width: 860px) {
  .preiskarte {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding: 48px;
  }

  .roadmap::before,
  .roadmap::after {
    left: 50%;
    translate: -50% 0;
  }

  .station {
    grid-template-columns: 1fr 120px 1fr;
    gap: 28px;
    padding-bottom: 24px;
    align-items: center;
  }

  .punkt-feld {
    grid-column: 2;
    grid-row: 1;
    align-content: center;
    padding-top: 0;
  }

  .station:nth-child(odd) .etappe {
    grid-column: 3;
    grid-row: 1;
  }

  .station:nth-child(even) .etappe {
    grid-column: 1;
    grid-row: 1;
  }

  .geist-feld {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-row: 1;
  }

  .station:nth-child(odd) .geist-feld {
    grid-column: 1;
    align-items: flex-end;
  }

  .station:nth-child(even) .geist-feld {
    grid-column: 3;
    align-items: flex-start;
  }

  .geist {
    font-size: clamp(44px, 5.5vw, 76px);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: .95;
    color: transparent;
    -webkit-text-stroke: 1.5px #3a4350;
    white-space: nowrap;
  }

  .etappe {
    padding: 26px 28px 24px;
  }

  .zeit-handy,
  .zahlung-handy,
  .schleife-lang {
    display: none;
  }

  .schleife-text b,
  .schleife-kurz {
    display: inline;
  }

  .schleife {
    position: absolute;
    top: 16%;
    bottom: 16%;
    right: -70px;
    width: 64px;
    color: var(--akzent);
  }

  .schleife-bogen {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .schleife-spitze {
    display: block;
    position: absolute;
    top: 8%;
    left: -2px;
    translate: 0 -50%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid var(--akzent);
  }

  .schleife-text {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -38% -50%;
    margin: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--tinte);
    border-radius: 12px;
    padding: 6px;
    font-size: 11px;
    text-align: center;
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .station:not(.sichtbar) .punkt,
  .js .station:not(.sichtbar) .etappe {
    transform: none;
    opacity: 1;
  }
}

/* Atmende Buttons: ruhiges Leuchten nach außen für die Hauptaktion (Klasse "atmen") */
.btn.atmen {
  animation: atmen 3s ease-in-out infinite;
}

.btn.atmen:hover,
.btn.atmen:focus-visible {
  animation: none;
}

@keyframes atmen {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(197, 240, 74, 0);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(197, 240, 74, .18), 0 0 28px rgba(197, 240, 74, .35);
    transform: scale(1.03);
  }
}

/* ---------- Kurzfassung der Roadmap (Startseite) ---------- */
.mini-roadmap {
  position: relative;
  list-style: none;
  display: grid;
  gap: 6px;
}

/* Linie: auf dem Handy senkrecht links, ab Tablet waagerecht durch die Punkte */
.mini-roadmap::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 34.5px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, rgb(150, 178, 122), var(--akzent));
}

.mini-roadmap li {
  position: relative;
  display: grid;
  grid-template-columns: 72px auto 1fr;
  align-items: center;
  gap: 4px 12px;
}

.mini-punkt-feld {
  display: grid;
  place-items: center;
  height: 60px;
}

.mini-punkt {
  position: relative;
  width: var(--groesse);
  height: var(--groesse);
  border-radius: 50%;
  background: var(--farbe);
  box-shadow: 0 0 0 5px var(--flaeche);
}

.mini-roadmap li.ziel .mini-punkt::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  animation: ring 2s ease-out infinite;
}

.mini-roadmap li.danach .mini-punkt {
  background: var(--flaeche);
  border: 3px solid var(--akzent);
}

.mini-roadmap b {
  font-size: 17px;
}

.mini-roadmap li.ziel b {
  font-size: 20px;
  font-weight: 900;
}

.mini-roadmap small {
  font-size: 13px;
  color: var(--grau);
}

.preis-band {
  margin-top: 40px;
  display: grid;
  gap: 20px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 26px 22px;
}

.preis-band .preis {
  font-size: clamp(34px, 5vw, 48px);
}

@media (min-width: 860px) {
  .mini-roadmap {
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }

  .mini-roadmap::before {
    top: 30px;
    bottom: auto;
    left: calc(100% / 14);
    right: calc(100% / 14);
    width: auto;
    height: 3px;
    background: linear-gradient(to right, rgb(150, 178, 122), var(--akzent));
  }

  .mini-roadmap li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
  }

  .preis-band {
    grid-template-columns: 1fr auto;
    padding: 32px 40px;
  }
}

/* ---------- Beispielrechnung: Amortisation (Startseite) ---------- */
/* Farben der beiden Linien: geprüft auf Unterscheidbarkeit, auch bei Farbschwächen */
:root {
  --linie-eigen: #13814f;
  --linie-plattform: #7c5cc4;
}

.linie {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}

.linie.eigen {
  background: var(--linie-eigen);
}

.linie.plattform {
  background: var(--linie-plattform);
}

/* ---------- Plattform oder eigene Konten (Startseite) ---------- */
.vorteile {
  grid-template-columns: 1fr;
}

/* ---------- Rechner mit Diagramm (Startseite) ---------- */

.umschalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--flaeche);
  border-radius: 999px;
  padding: 4px;
}

.umschalter label {
  display: block;
}

.umschalter input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.umschalter span {
  display: block;
  text-align: center;
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--grau);
  cursor: pointer;
}

.umschalter input:checked + span {
  background: var(--tinte);
  color: #fff;
}

.umschalter input:focus-visible + span {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

[data-modell][hidden] {
  display: none;
}

@media (min-width: 720px) {
  .vorteile {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .vorteile {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Vorher/Nachher: Zeilen links und rechts gleich hoch (Unterraster), damit sich die Punkte gegenüberstehen */
@media (min-width: 720px) {
  .vergleich {
    grid-template-rows: auto repeat(6, auto);
    row-gap: 0;
  }

  .vergleich-spalte {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
  }

  .vergleich-spalte ul {
    grid-row: span 6;
    display: grid;
    grid-template-rows: subgrid;
  }
}

/* Vorteils-Kacheln: oben dein Vorteil, unten im grauen Streifen der Vergleich mit Plattformen */

/* Band unter den Kacheln: Frage und Sprung zum Rechner */
.rechner-teaser {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  background: var(--tinte);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px;
}

.rechner-teaser p {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
}

@media (min-width: 720px) {
  .rechner-teaser {
    padding: 28px 36px;
  }
}

/* Graue Streifen der Vorteils-Kacheln auf gleicher Höhe (Unterraster), sobald die Kacheln nebeneinander stehen */
@media (min-width: 720px) {
  .vorteile {
    grid-template-rows: auto auto;
  }
}

/* Vorteils-Kacheln: Plattform-Streifen hellrot; Überschriften reservieren zwei Zeilen, damit die Texte bündig beginnen */

/* Symbol im Plattform-Streifen: kleines rotes Kästchen mit weißem Kreuz, Gegenstück zum grünen Symbol oben */

/* Plattform-Streifen ohne Symbol: nur Text */

/* Kurzfassung der Roadmap auf hellem Hintergrund: Abstandsring und Nachbetreuungs-Ring in Weiß */
#ablauf:not(.grau) .mini-punkt {
  box-shadow: 0 0 0 5px var(--bg);
}

#ablauf:not(.grau) li.danach .mini-punkt {
  background: var(--bg);
}

#ablauf:not(.grau) .preis-band {
  background: var(--flaeche);
  border-color: var(--flaeche);
}

/* ---------- Funktionsvergleich (Startseite) ---------- */
:root {
  --balken-zahlung: #4a78c2;
  --balken-plattform: #d0632a;
}

.vergleichstabelle-rahmen {
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.vergleichstabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.vergleichstabelle th,
.vergleichstabelle td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linie);
}

.vergleichstabelle tbody tr:last-child th,
.vergleichstabelle tbody tr:last-child td {
  border-bottom: 0;
}

.vergleichstabelle thead th {
  font-size: 15px;
  font-weight: 800;
}

.vergleichstabelle tbody th {
  font-weight: 600;
  color: var(--grau);
  width: 22%;
}

.vergleichstabelle td {
  color: var(--grau);
}

.vergleichstabelle .mein {
  background: var(--tinte);
  color: #fff;
  font-weight: 600;
}

.vergleichstabelle thead .mein {
  color: var(--akzent);
}

/* Auf dem Handy: jede Zeile als Karte, die Anbieter untereinander mit Namen */
@media (max-width: 719px) {
  .vergleichstabelle-rahmen {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .vergleichstabelle thead {
    display: none;
  }

  .vergleichstabelle,
  .vergleichstabelle tbody,
  .vergleichstabelle tr,
  .vergleichstabelle th,
  .vergleichstabelle td {
    display: block;
    width: 100%;
  }

  .vergleichstabelle tr {
    background: var(--bg);
    border: 1px solid var(--linie);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .vergleichstabelle tbody th {
    width: 100%;
    color: var(--tinte);
    padding: 12px 16px 8px;
    border-bottom: 0;
  }

  .vergleichstabelle td {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 0;
    border-top: 1px solid var(--linie);
  }

  .vergleichstabelle td::before {
    content: attr(data-anbieter);
    font-weight: 700;
    color: var(--tinte);
  }

  .vergleichstabelle td.mein::before {
    color: var(--akzent);
  }
}

/* ---------- Kostenvergleich (Startseite) ---------- */

.linie.im {
  background: #7c5cc4;
}

.linie.wh {
  background: #13814f;
}

/* Rechenweg */
.rechenweg {
  margin-top: 20px;
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.rechenweg summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 24px;
  list-style: none;
  position: relative;
}

.rechenweg summary::-webkit-details-marker {
  display: none;
}

.rechenweg summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tinte);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 500;
}

.rechenweg[open] summary::after {
  content: "–";
  background: var(--akzent);
  color: var(--tinte);
}

.rechenweg-inhalt {
  padding: 0 24px 24px;
}

.rechenweg-inhalt h4 {
  font-size: 17px;
  margin: 22px 0 8px;
}

.rechenweg-inhalt h4 small {
  font-weight: 400;
  color: var(--grau);
  font-size: 14px;
  margin-left: 6px;
}

.tabelle-scroll {
  overflow-x: auto;
}

.rechenweg-tabelle {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.rechenweg-tabelle th,
.rechenweg-tabelle td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.rechenweg-tabelle th {
  font-weight: 600;
  color: var(--grau);
}

.rechenweg-tabelle .zahl {
  text-align: right;
  white-space: nowrap;
}

.rechenweg-tabelle tfoot td {
  font-weight: 800;
  border-bottom: 0;
}

.rechenweg-tabelle a {
  color: var(--grau);
}

.rechenweg-hinweise {
  padding-left: 18px;
  color: var(--grau);
  font-size: 14px;
  display: grid;
  gap: 6px;
}

/* Posten-Tabellen im Rechenweg: gleiche Spaltenbreiten, Zahlen ohne Umbruch */
.rechenweg-tabelle.posten {
  table-layout: fixed;
}

.rechenweg-tabelle.posten th:nth-child(1) { width: 29%; }
.rechenweg-tabelle.posten th:nth-child(2) { width: 9%; }
.rechenweg-tabelle.posten th:nth-child(3) { width: 15%; }
.rechenweg-tabelle.posten th:nth-child(4) { width: 11%; }

.rechenweg-tabelle.posten td:nth-child(2),
.rechenweg-tabelle.posten td:nth-child(3) {
  white-space: nowrap;
}

/* ---------- Kostenvergleich, Variante mit Balken und Monatspunkten (Startseite) ---------- */
.vergleich-wahl-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 20px;
  color: var(--grau-hell);
  font-weight: 600;
}

.vergleich-wahl {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: var(--tinte-2);
  border: 1px solid var(--tinte-3);
  border-radius: 999px;
  padding: 4px;
}

.vergleich-wahl button {
  border: 0;
  background: transparent;
  color: var(--grau-hell);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.vergleich-wahl button[aria-selected="true"] {
  background: var(--akzent);
  color: var(--tinte);
}

.kosten-karten {
  display: grid;
  gap: 16px;
}

.kosten-karten .karte {
  padding: 28px 26px;
}

.kosten-karten h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau-hell);
  margin-bottom: 22px;
}

.kbalken + .kbalken {
  margin-top: 22px;
}

.kbalken-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.kbalken-kopf span {
  font-weight: 600;
}

.kbalken-kopf b {
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.kbalken-spur {
  height: 18px;
  border-radius: 999px;
  background: var(--tinte-3);
  overflow: hidden;
}

.kbalken-fuell {
  height: 100%;
  width: var(--anteil);
  border-radius: 999px;
  background: #8a919c;
  transition: width 1s cubic-bezier(.2, .8, .2, 1);
}

.kbalken.mein .kbalken-fuell {
  background: var(--akzent);
  transition-delay: .25s;
}

.kbalken.mein .kbalken-kopf b {
  color: var(--akzent);
}

.kbalken small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--grau-hell);
}

.kosten-differenz {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--tinte-3);
  font-size: 18px;
  color: var(--grau-hell);
}

.kosten-differenz b {
  color: #fff;
  font-size: clamp(26px, 3.6vw, 34px);
  letter-spacing: -.03em;
}

.plus-zahl {
  font-size: clamp(52px, 8vw, 84px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.plus-text {
  color: var(--grau-hell);
  margin-top: 8px;
}

/* 24 Punkte = 24 Monate: grau, solange sich die Einrichtung abbezahlt; Lime (Klasse "plus" aus script.js) ab dem Monat mit reiner Ersparnis */
.monats-punkte {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-top: 26px;
}

.monats-punkte span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tinte-3);
  transition: background .3s ease, transform .3s ease;
  transition-delay: calc(var(--i) * 45ms);
}

.kosten-karten.los .monats-punkte span {
  background: #4a5260;
}

.kosten-karten.los .monats-punkte span.plus {
  background: var(--akzent);
  transform: scale(1.08);
}

.punkte-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--grau-hell);
}

.punkte-legende span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.punkte-legende i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.punkte-legende i.farbe-zurueck {
  background: #4a5260;
}

.punkte-legende i.farbe-plus {
  background: var(--akzent);
}

.plus-ab {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tinte-3);
  font-size: 18px;
  color: var(--grau-hell);
}

.plus-ab b {
  color: #fff;
}

#kosten .rechenweg {
  color: var(--tinte);
}

/* Bevor der Bereich ins Bild kommt: Balken leer, Punkte grau */
.kosten-karten.wartet .kbalken-fuell {
  width: 0;
}

@media (min-width: 960px) {
  .kosten-karten {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kbalken-fuell,
  .monats-punkte span {
    transition: none;
  }
}

/* Ohne JavaScript (oder vor dem ersten Aufbau) zeigen die Punkte den Endstand */
.kosten-karten:not(.wartet) .monats-punkte span.plus {
  background: var(--akzent);
}

/* Bedingungen unter dem Preis (Kurzfassung auf der Startseite): gut lesbar, nicht nur Kleingedrucktes */
.preis-bedingungen {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinte);
}

/* Vergleich mit zwei Spalten (Dein System / Plattformen); Breiten nur als Tabelle, auf dem Handy sind es Karten */
@media (min-width: 720px) {
  .vergleichstabelle.zwei tbody th {
    width: 24%;
  }

  .vergleichstabelle.zwei td,
  .vergleichstabelle.zwei thead th {
    width: 38%;
  }

  .vergleichstabelle.zwei {
    table-layout: fixed;
  }

  .vergleichstabelle.zwei thead td {
    width: 24%;
  }
}

/* Logo: drei wachsende Punkte (wie die Roadmap) und Wortmarke */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo-punkte {
  width: auto;
  height: 14px;
}

.logo-leicht {
  font-weight: 400;
}

/* Große Zeitangabe neben der Roadmap: gefüllt statt Umrissschrift. Der Umriss zeigt bei der variablen Schrift Inter
   innere Überlappungen der Buchstaben (Stern in der "2", Strich im "e"). */
@media (min-width: 860px) {
  .geist {
    color: #1f2530;
    -webkit-text-stroke: 0;
  }
}

/* ---------- Demo: individuelle Verkaufswebseite des Beispiel-Creators ---------- */
.marken-logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--marke), var(--marke2));
  color: #fff;
  font-weight: 900;
  letter-spacing: -.02em;
}

.ansicht .adresszeile {
  align-self: center;
  font-size: 11px;
  color: var(--grau);
  background: #f1f2f4;
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: -6px;
}

.seite-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.seite-kopf span:last-child:not(.marken-logo) {
  margin-left: auto;
  color: var(--grau);
}

.seite-held {
  position: relative;
  border-radius: 16px;
  padding: 16px 14px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--marke), var(--marke2));
  overflow: hidden;
}

.seite-held .held-bild {
  position: absolute;
  right: -10px;
  bottom: -14px;
  opacity: .22;
}

.seite-held .held-bild .marken-logo {
  background: #fff;
  color: var(--marke);
}

.seite-held h4 {
  font-size: 19px;
  position: relative;
}

.ansicht .seite-held p {
  color: rgba(255, 255, 255, .9);
  font-size: 12.5px;
  margin-top: 4px;
  position: relative;
}

.seite-vorteile {
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 12.5px;
}

.seite-vorteile li::before {
  content: "✓ ";
  color: var(--marke);
  font-weight: 800;
}

.bildschirm .abo-wahl {
  padding: 9px 12px;
}

.bildschirm .abo-wahl.gewaehlt {
  border-color: var(--marke);
}

.ansicht .tipp.marke {
  background: var(--marke);
}

.stripe-kopf .marken-logo {
  font-size: 11px;
}

.marken-mail {
  padding: 0;
  overflow: hidden;
}

.marken-mail .mail-band {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(135deg, var(--marke), var(--marke2));
}

.marken-mail b,
.marken-mail p {
  padding: 0 12px;
}

.marken-mail b {
  margin-top: 10px;
}

.marken-mail p {
  padding-bottom: 12px;
}

.tg-kopf .marken-logo {
  font-size: 14px;
}

/* Umschalter für die Beispiele unter dem Handy */
.demo-marken {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--grau-hell);
}

.demo-marken span {
  margin-right: 4px;
}

.demo-marken button {
  border: 1px solid var(--tinte-3);
  background: transparent;
  color: var(--grau-hell);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.demo-marken button[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--tinte);
}

/* Demo, Gruppe 2: dunkle Verkaufswebseite mit anderem Aufbau (Profil, Zitat, Monat/Jahr-Umschalter, Kästchen) */
.ansicht.profil-ansicht {
  background: #0b1716;
  color: #fff;
  gap: 10px;
}

.ansicht .adresszeile.dunkel {
  background: rgba(255, 255, 255, .08);
  color: #9fb3b1;
}

.profil-kopf {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.profil-kopf b {
  font-size: 15px;
  margin-top: 4px;
}

.profil-kopf small {
  font-size: 11px;
  color: #9fb3b1;
}

.profil-ansicht .marken-logo {
  background: linear-gradient(135deg, var(--marke2), #134e4a);
  color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke);
}

.ansicht h4.profil-titel {
  text-align: center;
  font-size: 18px;
  color: var(--marke);
}

.ansicht p.profil-text {
  text-align: center;
  color: #c9d6d4;
  font-size: 12.5px;
  margin-top: -6px;
}

.profil-zitat {
  border-left: 3px solid var(--marke);
  background: rgba(255, 255, 255, .06);
  border-radius: 0 10px 10px 0;
  padding: 8px 10px;
  font-size: 12.5px;
  font-style: italic;
}

.profil-zitat small {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #9fb3b1;
  margin-top: 2px;
}

.profil-umschalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #9fb3b1;
}

.profil-umschalter span {
  padding: 5px;
  border-radius: 999px;
}

.profil-umschalter .an {
  background: var(--marke);
  color: var(--marke-text);
}

.profil-preis {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.profil-preis small {
  font-size: 11px;
  font-weight: 500;
  color: #9fb3b1;
  letter-spacing: 0;
}

.profil-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.profil-chips span {
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid rgba(224, 179, 65, .5);
  color: var(--marke);
  border-radius: 999px;
  padding: 3px 8px;
}

.ansicht .tipp.marke {
  color: var(--marke-text);
}

/* Gruppe 2: Logo und Mail-Band dunkelgrün mit Gold, wie die Verkaufswebseite */
.marke-profil .marken-logo {
  background: linear-gradient(135deg, var(--marke2), #134e4a);
  color: var(--marke);
}

.marke-profil .marken-mail .mail-band {
  background: #0f3b37;
  color: var(--marke);
}

/* Demo, Bezahlseite: PayPal-Button unter Apple Pay (klickbar, führt zum nächsten Schritt) */
.paypal-knopf {
  border: 0;
  border-radius: 10px;
  background: #ffc439;
  padding: 9px;
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
  cursor: pointer;
}

.paypal-knopf b {
  color: #003087;
}

.paypal-knopf i {
  color: #009cde;
}

.paypal-knopf:hover {
  filter: brightness(.96);
}

.ansicht .oder {
  text-align: center;
  font-size: 11px;
  color: var(--grau);
  margin: -2px 0 -4px;
}

/* Funktionen: oben die eigene Verkaufswebseite quer über die ganze Breite, darunter zwei, dann drei kompakte Kacheln */
.kachel.voll {
  display: grid;
  gap: 22px;
  align-items: center;
}

.voll-text h3 {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.02em;
}

.voll-text p {
  font-size: 17px;
  max-width: 520px;
}

.voll-merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voll-merkmale span {
  border: 1px solid var(--tinte-3);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.voll-merkmale .voll-adresse {
  background: #fff;
  border-color: #fff;
  color: var(--tinte);
}

.kachel.kompakt {
  padding: 22px 24px;
}

.kachel.kompakt .kachel-symbol {
  margin-bottom: 12px;
}

@media (min-width: 960px) {
  .kachel.voll {
    grid-column: span 6;
    grid-template-columns: 1fr auto;
    gap: 40px;
    padding: 32px 36px;
  }

  .voll-merkmale {
    max-width: 380px;
    justify-content: flex-end;
  }

  .kacheln .kachel:not(.voll):not(.kompakt) {
    grid-column: span 3;
  }
}


/* Womit das läuft: Netlify als Fundament, darunter die drei Dienste */
.schicht-fundament,
.schicht-dienst {
  background: var(--tinte-2);
  border: 1px solid var(--tinte-3);
  border-radius: var(--radius);
  padding: 24px;
}

.schicht-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.schicht-kopf h3 {
  margin: 0;
}

.schicht-rolle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--akzent);
  border: 1px solid rgba(197, 240, 74, .35);
  border-radius: 999px;
  padding: 3px 10px;
}

.schicht-teile {
  display: grid;
  gap: 12px;
}

.schicht-teile > div {
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  padding: 18px;
}

.schicht-teile h4 {
  font-size: 16px;
  color: #fff;
  margin: 0 0 8px;
}

.schicht-teile p,
.schicht-dienst p {
  color: var(--grau-hell);
  font-size: 15px;
  margin: 0;
}


.schicht-verbindung {
  display: grid;
  grid-template-columns: 1fr;
  height: 28px;
}

.schicht-verbindung span {
  justify-self: center;
  width: 2px;
  background: linear-gradient(rgba(197, 240, 74, .6), rgba(197, 240, 74, .15));
}

.schicht-verbindung span + span {
  display: none;
}

.schicht-reihe {
  display: grid;
  gap: 16px;
}









@media (min-width: 860px) {
  .schicht-teile {
    grid-template-columns: 1fr 1fr;
  }

  .schicht-reihe,
  .schicht-verbindung {
    grid-template-columns: repeat(3, 1fr);
  }

  .schicht-verbindung span + span {
    display: block;
  }
}

/* Rahmen um alle Dienste: alles läuft über die Konten des Creators */
.konten-rahmen {
  border: 1.5px dashed rgba(197, 240, 74, .5);
  border-radius: 30px;
  padding: 14px;
}

.konten-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 4px 4px 16px;
  color: #fff;
}

.konten-etikett {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--tinte);
  background: var(--akzent);
  border-radius: 999px;
  padding: 4px 12px;
}

.konten-fuss {
  margin: 16px 4px 4px;
  font-size: 15px;
  color: var(--grau-hell);
}

@media (min-width: 860px) {
  .konten-rahmen {
    padding: 22px;
  }
}

/* Kapazitäten: Grenzen von Netlify und Resend mit Mail-Rechner */
.kap-bloecke {
  display: grid;
  gap: 16px;
}



.kap-tarif {
  font-size: 13px;
  font-weight: 600;
  color: var(--grau);
  background: var(--flaeche);
  border-radius: 999px;
  padding: 4px 12px;
}

.kap-resend {
  display: grid;
  gap: 28px;
  margin-top: 8px;
}

.kap-resend h4 {
  font-size: 16px;
  margin: 0 0 12px;
}





.kap-rechner {
  background: var(--flaeche);
  border-radius: 18px;
  padding: 20px;
}

.kap-regler {
  display: block;
  margin-top: 14px;
  font-size: 15px;
}

.kap-regler > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.kap-regler output {
  font-weight: 700;
}

.kap-messung {
  margin-top: 6px;
}

.kap-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--grau);
  margin-bottom: 6px;
}

.kap-zeile b {
  color: var(--tinte);
}

.kap-balken {
  height: 10px;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}

.kap-balken span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gruen);
  transition: width .2s;
}

.kap-balken span.ueber {
  background: var(--rot);
}

.kap-ergebnis {
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinte);
}

.kap-quelle {
  margin-top: 16px;
}

.kap-quelle a {
  color: inherit;
}

@media (min-width: 860px) {
  .kap-resend {
    grid-template-columns: 1fr 1fr;
  }
}


/* Kapazitäten im dunklen Abschnitt: gleiche Kacheln wie bei „Womit das läuft“ */
#kapazitaeten {
  border-top: 1px solid var(--tinte-3);
}

.kap-zahl {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 12px 0 14px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.kap-zahl.akzent {
  color: var(--akzent);
}

.schicht-teile .kap-danach {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tinte-3);
}

.kap-danach b,
.kap-fundament p b {
  color: #fff;
}

.kap-fundament .schicht-teile > .kap-pfeil {
  justify-self: center;
  align-self: center;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--tinte);
  font-size: 20px;
  font-weight: 700;
  transform: rotate(90deg);
}

.schicht-teile .kap-gut {
  margin-top: 12px;
  font-size: 13px;
}

.kap-bloecke {
  gap: 0;
}

.schicht-verbindung.kap-verbindung {
  grid-template-columns: 1fr;
}

.dunkel .kap-tarif {
  background: var(--tinte-3);
  color: var(--grau-hell);
}



.dunkel .kap-rechner {
  background: rgba(255, 255, 255, .04);
}

.dunkel .kap-resend h4,
.dunkel .kap-regler {
  color: #fff;
}

.dunkel .kap-regler input[type="range"] {
  accent-color: var(--akzent);
}

.dunkel .kap-zeile {
  color: var(--grau-hell);
}

.dunkel .kap-zeile b,
.dunkel .kap-rechner .kap-ergebnis {
  color: #fff;
}

.dunkel .kap-balken {
  background: var(--tinte-3);
}

.dunkel .kap-balken span {
  background: var(--akzent);
}

.dunkel .kap-balken span.ueber {
  background: #ff6b5e;
}

@media (min-width: 860px) {
  /* Beide Felder teilen sich die Zeilen, damit die großen Zahlen auf einer Höhe stehen */
  .kap-fundament .schicht-teile {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: repeat(6, auto);
    row-gap: 0;
  }

  .kap-fundament .schicht-teile > div:not(.kap-pfeil) {
    display: grid;
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .kap-fundament .schicht-teile > .kap-pfeil {
    grid-row: 1 / span 6;
  }

  .kap-fundament .schicht-teile > .kap-pfeil {
    transform: none;
  }
}

.schicht-dienst .kap-ergebnis {
  margin: 18px 0 8px;
  font-size: 16px;
}

.schicht-dienst .hinweis {
  margin-top: 14px;
  font-size: 14px;
}

/* Kapazitäten: Überschriften größer als bei „Womit das läuft“, weil hier große Zahlen daneben stehen */
#kapazitaeten .schicht-kopf h3 {
  font-size: 26px;
  letter-spacing: -.02em;
}

#kapazitaeten .schicht-rolle {
  font-size: 13px;
  padding: 4px 12px;
}

#kapazitaeten .schicht-teile h4,
#kapazitaeten .kap-resend h4 {
  font-size: 20px;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

/* Pflichtbausteine: gestrichelter Rahmen mit Hinweis um alle Bausteine */
.rechts-rahmen {
  border: 1.5px dashed #c9c9bf;
  border-radius: 30px;
  padding: 14px;
}

.rechts-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 4px 16px;
}

.rechts-zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--akzent);
  font-size: 14px;
  font-weight: 800;
}

.rechts-fuss {
  margin: 16px 4px 4px;
  font-size: 15px;
  color: var(--grau);
}

@media (min-width: 860px) {
  .rechts-rahmen {
    padding: 22px;
  }
}

/* Mail-Weg (Laufender Betrieb): Zeitstrahl eines Mitglieds mit Briefen statt Tabelle */
.mail-weg {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mail-weg li {
  position: relative;
  padding: 0 0 22px 30px;
}

.mail-weg li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--akzent);
}

.mail-weg li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 21px;
  bottom: 2px;
  width: 2px;
  background: var(--tinte-3);
}

.mail-weg li:last-child {
  padding-bottom: 0;
}

.mail-weg li:last-child::after {
  display: none;
}

/* Die lange Phase ohne Mails: hohler Punkt, gestrichelte Linie, mehr Platz */
.mail-weg li.ruhe {
  padding-top: 10px;
  padding-bottom: 34px;
}

.mail-weg li.ruhe::before {
  top: 15px;
  box-sizing: border-box;
  background: var(--tinte-2);
  border: 2px solid var(--grau-hell);
}

.mail-weg li.ruhe::after {
  top: 31px;
}

.mail-weg li:has(+ .ruhe)::after,
.mail-weg li.ruhe::after {
  background: repeating-linear-gradient(var(--grau-hell) 0 4px, transparent 4px 9px);
  opacity: .6;
}

.mail-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mail-kopf b {
  flex: 1;
  font-weight: 600;
  color: #fff;
}

.mail-weg small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--grau-hell);
}

.mail-briefe {
  display: inline-flex;
  gap: 4px;
}

.mail-zahl {
  min-width: 62px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}


.brief {
  width: 20px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
}

.mail-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--tinte-3);
  font-size: 13px;
  color: var(--grau-hell);
}

.mail-legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kap-rechner > p:first-child {
  color: var(--grau-hell);
  font-size: 15px;
  margin: 0;
}

.kap-rechner > p:first-child b {
  color: #fff;
}

.kap-zahl-klein {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: -6px;
}

#kapazitaeten .kap-rechner-titel {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tinte-3);
}

.dunkel .kap-rechner .kap-ergebnis.frei {
  color: var(--akzent);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.1;
}

/* Resend: Rechner beginnt oben auf Höhe von „Resend“; Platz für den längsten Ergebnistext ist reserviert,
   damit die Box beim Schieben nicht wächst */
#kapazitaeten .kap-resend {
  margin-top: 0;
  align-items: start;
}

@media (min-width: 860px) {
  #kapazitaeten .kap-ergebnis {
    min-height: 76px;
    margin-bottom: 0;
  }
}

/* Handy: verschachtelte Kästen bei „Womit das läuft“ und „Laufender Betrieb“ mit weniger Innenabstand,
   damit für den Text mehr Breite bleibt (am Computer unverändert) */
@media (max-width: 859px) {
  .konten-rahmen,
  .rechts-rahmen {
    padding: 10px;
  }

  .schicht-fundament,
  .schicht-dienst {
    padding: 18px 16px;
  }

  .schicht-teile > div {
    padding: 16px 14px;
  }

  .kap-rechner {
    padding: 18px 16px;
  }

  .dunkel .kap-rechner .kap-ergebnis.frei {
    font-size: 24px;
  }
}

/* Handy: vier Bildschirme der Referenz als 2×2-Raster statt einer zu breiten Reihe */
@media (max-width: 719px) {
  .bilder.vier {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    justify-items: center;
  }

  .bilder.vier figure {
    min-width: 0;
    width: 100%;
    max-width: 170px;
  }
}

/* Kennzahlen im Kopf von „Preis & Ablauf“ (gleicher Stil wie auf der Startseite) */
.kopf-kennzahlen {
  max-width: 720px;
  margin-top: 28px;
  padding-top: 22px;
}

/* Referenzen: Übersicht mit einer Karte je Referenz und einer gestrichelten Einladung als letzte Karte */
.ref-karten {
  display: grid;
  gap: 20px;
}

.ref-karte {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

a.ref-karte:hover,
a.ref-karte:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(12, 15, 20, .08);
}

.ref-bild {
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 32px;
  background: linear-gradient(160deg, #eef3fb, #dfe8f5);
  overflow: hidden;
}

.ref-bild img {
  width: 58%;
  max-width: 240px;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border: 6px solid var(--tinte);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 18px 40px rgba(12, 15, 20, .16);
}

.ref-inhalt {
  display: grid;
  gap: 10px;
  padding: 24px 26px 28px;
}

.ref-inhalt h2,
.ref-leer h2 {
  font-size: 26px;
  margin: 0;
}

.ref-merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ref-merkmale span {
  font-size: 12px;
  font-weight: 700;
  color: var(--grau);
  background: var(--flaeche);
  border-radius: 999px;
  padding: 4px 10px;
}

.ref-zitat {
  font-size: 17px;
  color: var(--tinte);
}

.ref-mehr {
  font-weight: 700;
  margin-top: 4px;
}

.ref-leer {
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px 28px;
  background: transparent;
  border: 1.5px dashed #c9c9bf;
}

.ref-leer p {
  color: var(--grau);
  max-width: 360px;
}

.ref-plus {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--akzent);
  font-size: 30px;
  font-weight: 700;
}

.zurueck-link {
  display: block;
  width: fit-content;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--grau-hell);
  text-decoration: none;
}

.zurueck-link:hover {
  color: #fff;
}

@media (min-width: 720px) {
  .ref-karten {
    grid-template-columns: repeat(2, 1fr);
  }

  .zahlen.zwei {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fallbeispiel: Merkmale neben dem Etikett (dunkler Kopf) */
.fall-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
}

.fall-kopfzeile .etikett {
  margin-bottom: 0;
}

.dunkel .ref-merkmale span {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--grau-hell);
}

/* Fallbeispiel, Ergebnis: Vorher und jetzt nebeneinander statt Zahlen */
.wandel {
  display: grid;
  gap: 8px;
  margin: 32px 0;
}

.wandel-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wandel-zeile > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  font-size: 16px;
}

.wandel-kopf > div {
  padding: 0 18px 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

.wandel-vorher {
  background: rgba(255, 255, 255, .03);
  color: var(--grau-hell);
}

.wandel-jetzt {
  background: var(--tinte-2);
  border: 1px solid var(--tinte-3);
  color: #fff;
  font-weight: 600;
}

.wandel svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.wandel-vorher svg {
  color: #ff6b5e;
}

.wandel-jetzt svg {
  color: var(--akzent);
}

@media (max-width: 599px) {
  .wandel-zeile > div {
    padding: 12px;
    gap: 8px;
    font-size: 14px;
  }

  .wandel-kopf > div {
    padding: 0 12px 2px;
  }
}

/* Fußzeile: kleiner Hinweis, dass die Seite selbst auf Netlify läuft */
.fuss-netlify {
  color: #8a919c;
}

.fuss-netlify a {
  color: inherit;
}