/* CIVITAS – Produktseite. Keine Bibliotheken; Animationen nur über
   transform und opacity (flüssig auch auf älteren Handys). Scroll-Werte
   setzt assets/js/seite.js als --p (0 … 1) an die Abschnitte. */

@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
/* Lese-Schrift der Bibel wie in der App (SIL OFL) – lädt erst, wenn der Abschnitt sie braucht. */
@font-face { font-family: "Literata"; font-weight: 400; font-display: swap; src: url("../fonts/literata-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 600; font-display: swap; src: url("../fonts/literata-latin-600-normal.woff2") format("woff2"); }

:root {
  --petrol: #2A6F8F;
  --petrol-dunkel: #1F5570;
  --petrol-tief: #10303f;
  --petrol-hell: #EAF3F7;
  --gold: #E0A32E;
  --gold-dunkel: #8A5A00;
  --text: #20242a;
  --text-leise: #525966;
  --flaeche: #ffffff;
  --grund: #F4F6F8;
  --rand: #E2E5EA;
  --rot: #F7563C; --gelb: #EFCC00; --gruen: #42BC59; --blau: #0D98FF;
  --breite: 1180px;
  --rund: 22px;
  --weich: cubic-bezier(.22, .8, .24, 1);
  --kopf-hoehe: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }
body {
  margin: 0;
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  color: var(--text);
  background: var(--grund);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--petrol); }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
h2 { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { margin: 0; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 10px; }
.springen:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.augenbraue {
  font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--petrol); margin-bottom: 14px;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--gold); color: #1d1300; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(224, 163, 46, .7);
  transition: transform .25s var(--weich), box-shadow .25s var(--weich);
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(224, 163, 46, .8); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf--leise { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); }
.knopf--leise:hover { box-shadow: none; background: rgba(255, 255, 255, .22); }
.knopf--klein { min-height: 40px; padding: 0 18px; font-size: .95rem; box-shadow: none; }
.knopf--breit { width: 100%; border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf-hoehe);
  transition: background .3s, box-shadow .3s;
}
html:not(.js) .kopf { background: rgba(16, 48, 63, .94); }
.kopf--fest { background: rgba(16, 48, 63, .78); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.kopf__innen { max-width: var(--breite); height: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .06em; }
.marke__logo { width: 28px; height: 28px; }
.menue { display: flex; align-items: center; gap: 26px; }
.menue a { color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; font-size: .95rem; }
.menue a:hover { color: #fff; }
.menue a.knopf { color: #1d1300; }
.menue-knopf { display: none; }

/* ---------- Start ---------- */
.held {
  --p: 0;
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px;
  padding: calc(var(--kopf-hoehe) + 40px) max(20px, calc((100vw - var(--breite)) / 2)) 60px;
  background: radial-gradient(1200px 700px at 12% 8%, #3b89ad 0%, transparent 60%), linear-gradient(180deg, var(--petrol) 0%, var(--petrol-dunkel) 55%, var(--petrol-tief) 100%);
  color: #fff;
}
.held__schein {
  position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(247, 86, 60, .22), rgba(239, 204, 0, .18), rgba(66, 188, 89, .18), rgba(13, 152, 255, .22), rgba(247, 86, 60, .22));
  filter: blur(80px); opacity: calc(1 - var(--p));
  transform: translate3d(0, calc(var(--p) * 20vh), 0) rotate(calc(var(--p) * 40deg));
  pointer-events: none;
}
.held__text { position: relative; z-index: 2; transform: translate3d(0, calc(var(--p) * -12vh), 0); opacity: calc(1 - var(--p) * 1.3); }
.held__logo { width: 64px; height: 64px; margin-bottom: 26px; }
.held__logo .bogen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 1.1s var(--weich) forwards; }
.held__logo .bogen:nth-child(2) { animation-delay: .12s; }
.held__logo .bogen:nth-child(3) { animation-delay: .24s; }
.held__logo .bogen:nth-child(4) { animation-delay: .36s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.held h1 { display: grid; gap: 14px; }
.held__augenbraue { font-size: clamp(.9rem, 1.4vw, 1.05rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffd98f; }
.held__titel { font-weight: 800; font-size: clamp(2.7rem, 6vw, 5.2rem); letter-spacing: -0.035em; line-height: .98; }
.held__unterzeile { margin-top: 22px; max-width: 34em; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .9); }
.held__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.laeden { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
/* Offizielle Badges von Apple und Google – unverändert, nur gleich hoch. */
.laden { display: block; border-radius: 9px; transition: transform .25s var(--weich), opacity .25s; }
.laden:hover { transform: translateY(-2px); }
.laden img { height: 54px; width: auto; }
@media (max-width: 480px) { .laeden { gap: 10px; } .laden img { height: 46px; } }

.held__geraet { position: relative; justify-self: center; perspective: 1400px; }
.held__geraet .geraet {
  width: min(380px, 70vw);
  transform: translate3d(0, calc(var(--p) * 10vh), 0) rotateX(calc(var(--p) * 18deg)) rotateZ(calc(-4deg + var(--p) * 4deg)) scale(calc(1 - var(--p) * .12));
  animation: auftauchen 1.2s var(--weich) both .15s;
}
@keyframes auftauchen { from { opacity: 0; transform: translate3d(0, 60px, 0) rotateZ(-8deg) scale(.94); } }
.schwebend {
  position: absolute; z-index: 3; display: grid; padding: 12px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .95); color: var(--text); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45);
  font-size: .85rem; line-height: 1.25; animation: schweben 6s ease-in-out infinite;
}
.schwebend b { font-size: 1.05rem; }
.schwebend span { color: var(--text-leise); }
.schwebend--1 { left: -12%; top: 18%; transform: translate3d(calc(var(--p) * -60px), calc(var(--p) * -80px), 0); }
.schwebend--2 { right: -10%; bottom: 20%; animation-delay: -3s; transform: translate3d(calc(var(--p) * 60px), calc(var(--p) * 40px), 0); }
.schwebend--2 b { color: var(--gold-dunkel); }
@keyframes schweben { 50% { translate: 0 -10px; } }

/* ---------- Gerät (eigener, neutraler Rahmen) ---------- */
.geraet {
  position: relative; aspect-ratio: 800 / 1738; padding: 3.2%;
  background: linear-gradient(145deg, #1c3542, #0b1d26 60%);
  border-radius: 13% / 6%;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.geraet { display: grid; overflow: hidden; }
/* Alle Bildschirme liegen im selben Grid-Feld – genau innerhalb des Rahmens. */
.geraet img, .geraet .bild { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10.5% / 4.9%; background: #f4f6f8; }

/* ---------- Vertrauen ---------- */
.vertrauen { background: var(--petrol-tief); color: rgba(255, 255, 255, .8); }
/* Fünf gleich breite Spalten mit Trennlinien; auf dem Handy zwei. */
.vertrauen ul {
  max-width: var(--breite); margin: 0 auto; padding: 30px 20px; list-style: none;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.vertrauen li { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 4px 14px; font-size: .88rem; line-height: 1.3; }
.vertrauen li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
.vertrauen__symbol { font-size: 1.35rem; margin-bottom: 6px; }
.vertrauen strong { color: #fff; font-size: .98rem; }

/* ---------- Geschichte (angeheftetes Gerät) ---------- */
.geschichte {
  --p: 0;
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  max-width: var(--breite); margin: 0 auto; padding: 0 20px;
}
.geschichte__buehne { grid-column: 2; grid-row: 1; }
.geschichte__geraet {
  position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; gap: 28px;
}
.geschichte__geraet .geraet {
  width: min(360px, 34vw);
  transform: rotate(calc((var(--p) - .5) * 5deg)) translate3d(0, calc((var(--p) - .5) * -30px), 0);
}
.geschichte__geraet .bild {
  opacity: 0; transform: translate3d(0, 4%, 0) scale(.97);
  transition: opacity .6s var(--weich), transform .7s var(--weich);
}
.geschichte__geraet .bild.vorher { transform: translate3d(0, -4%, 0) scale(.97); }
.geschichte__geraet .bild.aktiv { opacity: 1; transform: none; }
.schiene { width: 4px; height: 44%; border-radius: 4px; background: rgba(31, 85, 112, .14); overflow: hidden; }
.schiene i { display: block; width: 100%; height: 100%; transform-origin: top; transform: scaleY(var(--p));
  background: linear-gradient(180deg, var(--rot), var(--gelb), var(--gruen), var(--blau)); }
.geschichte__kapitel { grid-column: 1; grid-row: 1; }
.kapitel {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: 30em;
  opacity: .28; transform: translate3d(0, 20px, 0); transition: opacity .5s var(--weich), transform .6s var(--weich);
}
.kapitel.aktiv { opacity: 1; transform: none; }
.kapitel__nummer { font-weight: 700; color: var(--petrol); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; margin-bottom: 14px; }
.kapitel h3 { font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 18px; }
.kapitel p:not(.kapitel__nummer) { font-size: 1.15rem; color: var(--text-leise); }
.kapitel__bild { display: none; }

/* Ohne JavaScript: Bilder direkt im Text statt angeheftetem Gerät. */
html:not(.js) .geschichte__buehne { display: none; }
html:not(.js) .geschichte { grid-template-columns: 1fr; }
html:not(.js) .kapitel { opacity: 1; transform: none; min-height: auto; padding: 60px 0; }
html:not(.js) .kapitel__bild { display: block; width: 240px; margin-top: 24px; border-radius: 24px; }

/* ---------- Team ---------- */
.team {
  --p: 0;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center;
  padding: 120px max(20px, calc((100vw - var(--breite)) / 2));
  background: linear-gradient(180deg, var(--grund), #e7f0f4);
}
.team h2 { margin-bottom: 20px; }
.team__text > p:not(.augenbraue) { font-size: 1.1rem; color: var(--text-leise); }
.haken { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 32px; font-weight: 600; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.team__bild { position: relative; }
.tablet {
  padding: 2.6%; border-radius: 5.5%; background: linear-gradient(145deg, #1c3542, #0b1d26 60%);
  box-shadow: 0 50px 90px -30px rgba(16, 48, 63, .55);
  transform: perspective(1600px) rotateY(calc(-14deg + var(--p) * 14deg)) rotateX(calc(6deg - var(--p) * 6deg)) scale(calc(.92 + var(--p) * .08));
}
.tablet img { border-radius: 3.4%; width: 100%; height: auto; }
.zaehler {
  position: absolute; left: -6%; bottom: 10%; display: grid; gap: 6px; padding: 16px 20px; border-radius: 18px;
  background: #fff; box-shadow: 0 30px 60px -24px rgba(16, 48, 63, .5); min-width: 210px;
  transform: translate3d(0, calc((1 - var(--p)) * 40px), 0);
}
.zaehler strong { font-size: 1.6rem; font-weight: 800; }
.zaehler__status { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--gold-dunkel); }
.zaehler__status i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transition: background .4s; }
.zaehler__status em { font-style: normal; }
.zaehler__online { display: none; }
.zaehler--online .zaehler__status { color: #1E7443; }
.zaehler--online .zaehler__status i { background: var(--gruen); }
.zaehler--online .zaehler__offline { display: none; }
.zaehler--online .zaehler__online { display: inline; }

/* ---------- Abschnitte ---------- */
.gottesdienst, .anpassen, .praxis, .sicherheit, .schritte, .preis, .fragen, .demo {
  padding: 120px max(20px, calc((100vw - var(--breite)) / 2));
  content-visibility: auto; contain-intrinsic-size: auto 900px;
}
.abschnitt__kopf { text-align: center; max-width: 44em; margin: 0 auto 56px; }
.abschnitt__kopf > p:not(.augenbraue) { margin-top: 18px; font-size: 1.12rem; color: var(--text-leise); }

/* ---------- Gottesdienst-Nachweis ---------- */
.gottesdienst { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; background: #fff; }
.gottesdienst h2 { margin-bottom: 20px; }
.gd__text > p:not(.augenbraue) { font-size: 1.1rem; color: var(--text-leise); }
.gd__bild { position: relative; justify-self: center; padding: 10px 0 40px; }
.gd-blatt {
  width: min(340px, 78vw); padding: 30px 28px 26px; border-radius: 18px; background: #fff; text-align: center;
  border: 1px solid var(--rand); box-shadow: 0 40px 80px -36px rgba(16, 48, 63, .45); rotate: -2.5deg;
}
.gd-blatt__kopf { font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); }
.gd-blatt__zeit { margin-top: 4px; font-weight: 800; font-size: 1.35rem; }
.qr { display: block; width: 74%; margin: 18px auto 14px; fill: var(--petrol-tief); }
.gd-blatt__code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; }
.gd-blatt__hinweis { margin-top: 8px; font-size: .82rem; color: var(--text-leise); }
.gd-bestaetigt {
  position: absolute; right: -14%; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px;
  background: #fff; box-shadow: 0 30px 60px -24px rgba(16, 48, 63, .5); line-height: 1.3;
}
.gd-bestaetigt b { display: block; }
.gd-bestaetigt span:not(.gd-bestaetigt__haken) { font-size: .88rem; color: var(--text-leise); }
.gd-bestaetigt__haken {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Bibel ---------- */
/* Papier statt Petrol: der Abschnitt nimmt die Sepia-Leseseite der App auf.
   Akzent „Tinte“ = Farbe der Versnummern im Sepia-Modus. */
.bibel {
  --papier: #F8F3EA;
  --tinte: #7F521A;
  --tinte-hell: #B0782A;
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  position: relative; padding: 120px 0 130px; overflow-x: clip;
  background:
    radial-gradient(900px 520px at 86% 90px, rgba(224, 163, 46, .17), transparent 70%),
    radial-gradient(760px 480px at 6% 420px, rgba(42, 111, 143, .07), transparent 70%),
    linear-gradient(180deg, #fff 0, var(--papier) 180px, var(--papier) calc(100% - 220px), var(--grund) 100%);
}
.bibel > .abschnitt__kopf { padding: 0 20px; }
.bibel .augenbraue { color: var(--tinte); }
.bibel__stelle {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em;
  background: linear-gradient(100deg, var(--tinte) 12%, var(--tinte-hell) 55%, #8A5A00 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Szene 1: die zwölf Einstiege der App (230 × 168 wie dort), zwei Reihen
   laufen beim Scrollen gegeneinander (--p von seite.js). */
.einstiege {
  --p: .5;
  position: relative; overflow: hidden; padding: 30px 0 10px; margin-top: -6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.einstiege__reihe {
  display: flex; gap: 14px; width: max-content; margin: 0 0 0 50%; padding: 0; list-style: none;
  transform: translate3d(calc(-50% + (var(--p) - .5) * -340px), 0, 0); will-change: transform;
}
.einstiege__reihe--zwei { margin-top: 14px; transform: translate3d(calc(-50% + 122px + (var(--p) - .5) * 340px), 0, 0); }
.einstieg {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 6px;
  width: 230px; height: 168px; padding: 16px; border-radius: 18px; overflow: hidden;
  background: var(--farbe); color: #fff; box-shadow: 0 22px 40px -26px rgba(70, 45, 10, .6);
}
.einstieg::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.einstieg b { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.22; }
.einstieg span {
  font-size: 15px; line-height: 1.3; opacity: .92;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.einstieg i {
  position: relative; z-index: 1; margin-top: auto; align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .18); font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.einstiege__text { max-width: 34em; margin: 30px auto 0; padding: 0 20px; text-align: center; font-weight: 600; color: var(--text-leise); }

/* Szene 2: angeheftetes Handy mit echten Aufnahmen aus der iOS-App.
   Ein Film je Schritt; seite.js lädt nur den aktiven und den nächsten. */
.lesepult {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  max-width: var(--breite); margin: 10px auto 0; padding: 0 20px;
}
.lesepult__buehne { grid-column: 2; grid-row: 1; }
.lesepult__platz {
  position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding-top: var(--kopf-hoehe);
}
.lesepult__geraet { position: relative; }
.geraet--film { width: min(360px, 29vw, calc((100svh - var(--kopf-hoehe) - 150px) * .46)); }
.bildschirm {
  grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 10.5% / 4.9%; background: #F4F6F8; isolation: isolate;
}
.bildschirm > video, .bildschirm img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: transparent;
}
/* Standbild nur ohne JavaScript – sonst ausgeblendet und dank loading="lazy" nicht geladen.
   Ohne JavaScript entfallen die (leeren) Videos, sonst lägen sie darüber. */
.js .bildschirm > img, html:not(.js) .bildschirm > video { display: none; }
.bildschirm > video { opacity: 0; transition: opacity .6s var(--weich); }
.bildschirm > video.aktiv { opacity: 1; }
/* iOS im Stromsparmodus: kein Wiedergabe-Symbol über dem Standbild. */
.bildschirm > video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.bildschirm > video::-webkit-media-controls { display: none !important; }

/* Notizen am Handy: deckend und nur knapp über dem Rand, damit sie den Film nicht verdecken. */
.notiz {
  position: absolute; z-index: 3; display: grid; gap: 1px; width: max-content; max-width: 220px; padding: 12px 16px; border-radius: 16px;
  background: #fff; color: var(--text); font-size: .85rem; line-height: 1.3;
  box-shadow: 0 22px 44px -20px rgba(70, 45, 10, .45), 0 0 0 1px rgba(127, 82, 26, .08);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); transition: opacity .45s var(--weich), transform .6s var(--weich);
  pointer-events: none;
}
.notiz.aktiv { opacity: 1; transform: none; transition-delay: .25s; }
.notiz b { font-size: 1rem; color: var(--tinte); }
.notiz span { color: var(--text-leise); }
.notiz--links { right: calc(100% - 12px); top: 30%; }
.notiz--rechts { left: calc(100% - 12px); top: 55%; }
@media (max-width: 1179px) { .notiz { display: none; } }

.lesepult__leiste { display: flex; align-items: center; gap: 16px; min-height: 38px; }
.punkte--papier li { background: rgba(127, 82, 26, .2); }
.punkte--papier li.aktiv { background: linear-gradient(90deg, var(--tinte-hell), var(--tinte)); }
.film-knopf {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--tinte);
  box-shadow: 0 8px 20px -10px rgba(70, 45, 10, .55), 0 0 0 1px rgba(127, 82, 26, .14);
  transition: transform .25s var(--weich);
}
.film-knopf[hidden] { display: none; }
.film-knopf:hover { transform: scale(1.07); }
.film-knopf svg { width: 18px; height: 18px; fill: currentColor; }
.film-knopf svg > * { display: none; }
.film-knopf[data-zustand="spielt"] .film-knopf__pause,
.film-knopf[data-zustand="pausiert"] .film-knopf__spielen,
.film-knopf[data-zustand="ende"] .film-knopf__nochmal { display: inline; }

.lesepult__schritte { grid-column: 1; grid-row: 1; }
.lese-schritt {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 27em;
  opacity: .3; transform: translate3d(0, 20px, 0); transition: opacity .5s var(--weich), transform .6s var(--weich);
}
.lese-schritt.aktiv { opacity: 1; transform: none; }
.lese-schritt__nummer { font-weight: 700; color: var(--tinte); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; margin-bottom: 14px; }
.lese-schritt h3 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 18px; }
.lese-schritt p:not(.lese-schritt__nummer) { font-size: 1.15rem; color: var(--text-leise); }
.lese-schritt__mehr { margin-top: 18px; font-weight: 700; text-decoration: none; }
.lese-schritt__mehr::after { content: " →"; }
html:not(.js) .lese-schritt { opacity: 1; transform: none; min-height: auto; padding: 50px 0; }
html:not(.js) .lesepult__platz { position: static; height: auto; padding-top: 40px; }
html:not(.js) .notiz, html:not(.js) .lesepult__leiste { display: none; }

/* Szene 3: selbst ausprobieren – Farben und Schrift wie auf der Leseseite der App. */
.vergleich { max-width: 860px; margin: 100px auto 0; padding: 0 20px; }
.vergleich .abschnitt__kopf { margin-bottom: 34px; }
.vergleich__titel { font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.lesekarte {
  --l-hg: #FFFFFF; --l-text: #1F2328; --l-text-2: #5B6472; --l-nr: var(--petrol); --l-rand: #E6E8EC; --l-buch: #6A3FA0;
  --l-schrift: var(--serif);
  border-radius: 26px; overflow: hidden; background: var(--l-hg); color: var(--l-text); border: 1px solid var(--l-rand);
  box-shadow: 0 40px 80px -46px rgba(70, 45, 10, .55);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.lesekarte[data-thema="sepia"] { --l-hg: #F6EFE0; --l-text: #3F3122; --l-text-2: #6B5A44; --l-nr: #7F521A; --l-rand: #E6DAC3; }
.lesekarte[data-thema="dunkel"] { --l-hg: #15181D; --l-text: #E7E2D8; --l-text-2: #A3ACB8; --l-nr: #8CC4DC; --l-rand: #2A2F37; --l-buch: #C3A6EC; }
.lesekarte[data-schrift="sans"] { --l-schrift: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.lesekarte__wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.lesekarte__wahl button {
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--l-text-2); background: transparent; border: 1px solid var(--l-rand);
  transition: background-color .25s, color .25s, border-color .25s;
}
.lesekarte__wahl button:hover { color: var(--l-text); }
.lesekarte__wahl button[aria-pressed="true"] { background: var(--l-text); border-color: var(--l-text); color: var(--l-hg); }
.lesekarte__wahl--uebersetzung { justify-content: center; padding: 18px 18px 0; }
.lesekarte__seite { padding: 28px clamp(22px, 7vw, 70px) 32px; }
.lesekarte__buch { text-align: center; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--l-buch); }
.lesekarte__kapitel { margin-top: 4px; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 2rem; line-height: 1.15; }
/* seite.js setzt die Höhe auf die der gewählten Fassung und lässt sie weich wechseln. */
.lesekarte__texte { display: grid; align-items: start; max-width: 36em; margin: 20px auto 0; overflow: hidden; transition: height .45s var(--weich); }
/* Alle vier Fassungen liegen übereinander: Die Karte ist so hoch wie die
   längste und springt beim Wechseln nicht. */
.lesekarte__text {
  grid-area: 1 / 1; font-family: var(--l-schrift); font-size: 1.16rem; line-height: 1.75;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.lesekarte[data-uebersetzung="l12"] [data-text="l12"],
.lesekarte[data-uebersetzung="sch"] [data-text="sch"],
.lesekarte[data-uebersetzung="elbbk"] [data-text="elbbk"],
.lesekarte[data-uebersetzung="tkw"] [data-text="tkw"] { opacity: 1; visibility: visible; transition: opacity .45s ease .05s, visibility 0s; }
.lesekarte__text p + p { margin-top: .45em; }
.lesekarte__text sup {
  margin-right: .25em; font-family: "Jakarta", system-ui, sans-serif; font-size: .58em; font-weight: 800; line-height: 0;
  vertical-align: .5em; color: var(--l-nr);
}
.lesekarte__zwischentitel { margin-bottom: .2em; font-family: "Jakarta", system-ui, sans-serif; font-size: .95rem; font-weight: 700; color: var(--l-text-2); }
.lesekarte__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--l-rand); }
.lesekarte__beschreibung { max-width: 40em; margin: 20px auto 0; text-align: center; color: var(--text-leise); }
.lesekarte__beschreibung b { color: var(--text); }
.lesekarte__hinweis { margin-top: 8px; text-align: center; font-size: .9rem; color: var(--text-leise); }
html:not(.js) .lesekarte__wahl, html:not(.js) .lesekarte__fuss, html:not(.js) .lesekarte__hinweis { display: none; }

.fakten--bibel { margin-top: 70px; }
.bibel .fakten li { background: rgba(255, 255, 255, .62); border-color: rgba(127, 82, 26, .14); }
.bibel .fakten b { background-image: linear-gradient(100deg, var(--tinte-hell), var(--tinte)); }
.bibel .fakten span { color: var(--text-leise); }
.bibel__versprechen {
  position: relative; max-width: min(760px, calc(100% - 40px)); margin: 26px auto 0; padding: 22px 26px 22px 66px; border-radius: 18px;
  background: #fff; color: var(--text-leise); border: 1px solid rgba(127, 82, 26, .12); box-shadow: 0 20px 50px -36px rgba(70, 45, 10, .45);
}
.bibel__versprechen strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--text); }
.bibel__versprechen::before {
  content: ""; position: absolute; left: 22px; top: 24px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='11' width='12' height='9' rx='2' fill='white'/%3E%3Cpath d='M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- Anpassen ---------- */
.anpassen { background: var(--grund); }
.modelle { list-style: none; padding: 0; margin: 0 auto 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.modelle li { padding: 10px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--rand); font-weight: 700; color: var(--petrol-dunkel); }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.karte { padding: 30px 26px; border-radius: var(--rund); background: #fff; box-shadow: 0 20px 50px -30px rgba(16, 48, 63, .35); }
.karte__symbol { font-size: 2rem; margin-bottom: 16px; }
.karte h3 { margin-bottom: 10px; }
.karte p { color: var(--text-leise); }
.anpassen__grenze { max-width: 760px; margin: 40px auto 0; padding: 18px 24px; border-radius: 18px; background: var(--petrol-hell); color: var(--petrol-tief); text-align: center; }

/* ---------- Urkunden-Editor ---------- */
.urkunden {
  --urkunden-grund: #0d2734;
  --werkstatt-grund: var(--urkunden-grund);
  position: relative; color: #fff; padding: 120px 0 130px; overflow-x: clip;
  background:
    radial-gradient(ellipse 70% 45% at 72% 12%, rgba(224, 163, 46, .16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 15% 70%, rgba(42, 111, 143, .35), transparent 70%),
    linear-gradient(180deg, var(--petrol-tief), var(--urkunden-grund));
}
.urkunden > .abschnitt__kopf, .stapel > .abschnitt__kopf { padding: 0 20px; }
.urkunden .augenbraue { color: #ffd98f; }
.urkunden .abschnitt__kopf > p:not(.augenbraue) { color: rgba(255, 255, 255, .78); }
.urkunden__gold {
  background: linear-gradient(100deg, #f6d58e 10%, #e0a32e 45%, #fbe7b5 60%, #d4952a 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.karte__mehr { display: inline-block; margin-top: 12px; font-weight: 700; text-decoration: none; }
.karte__mehr::after { content: " →"; }

/* Szene 1: angeheftetes Fenster mit dem echten Editor, Kamerafahrt je Schritt */
.werkstatt {
  position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: 48px;
  max-width: var(--breite); margin: 0 auto; padding: 0 20px;
}
.werkstatt__buehne { grid-column: 2; grid-row: 1; }
.werkstatt__platz {
  position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding-top: var(--kopf-hoehe);
}
/* Das Bild liegt in der größten Zoomstufe (--gross = 2,3-fache Fensterbreite)
   und wird für die Übersicht verkleinert – so bleibt jede Nahaufnahme scharf,
   und der Browser lädt über srcset/sizes gleich die passende große Datei.
   Ziel je Schritt: Punkt (cx|cy, Anteil am Bild) bei Zoom z in der Mitte:
   --k = z / 2,3; --tx = (0,5 − cx·z) / 2,3; --ty = (0,5 − cy·z) / 2,3. */
.fenster {
  --k: .4348; --tx: 0%; --ty: 0%;
  width: min(100%, calc((100svh - var(--kopf-hoehe) - 120px) * 1.1428 )); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.fenster__leiste { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #eef1f4; border-bottom: 1px solid #dfe3e8; }
.fenster__leiste i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.fenster__leiste i:nth-child(2) { background: #febc2e; }
.fenster__leiste i:nth-child(3) { background: #28c840; }
.fenster__leiste span { margin: 0 auto; padding: 3px 14px; border-radius: 7px; background: #fff; font-size: .74rem; font-weight: 600; color: var(--text-leise); transform: translateX(-24px); }
.fenster__bild { position: relative; overflow: hidden; aspect-ratio: 2560 / 2240; background: #fff; }
.fenster__bild img {
  position: absolute; left: 0; top: 0; width: 230%; max-width: none; height: auto; transform-origin: 0 0;
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--k));
  transition: transform 1.15s cubic-bezier(.65, 0, .25, 1);
}
.fenster[data-schritt="1"] { --k: .913; --tx: 0%; --ty: -10.22%; }       /* z 2,1 · cx .238 · cy .35 */
.fenster[data-schritt="2"] { --k: 1; --tx: -25.86%; --ty: -25.56%; }      /* z 2,3 · cx .476 · cy .473 */
.fenster[data-schritt="3"] { --k: .8696; --tx: -43.48%; --ty: -9.57%; }   /* z 2   · cx .75  · cy .36 */
.punkte { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.punkte li { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .25); transition: width .5s var(--weich), background .5s; }
.punkte li.aktiv { width: 26px; background: linear-gradient(90deg, #f6d58e, var(--gold)); }
.werkstatt__schritte { grid-column: 1; grid-row: 1; }
.schritt {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: 26em;
  opacity: .3; transform: translate3d(0, 20px, 0); transition: opacity .5s var(--weich), transform .6s var(--weich);
}
.schritt.aktiv { opacity: 1; transform: none; }
.schritt__nummer { font-weight: 700; color: #ffd98f; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; margin-bottom: 14px; }
.schritt h3 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 18px; }
.schritt p:not(.schritt__nummer) { font-size: 1.15rem; color: rgba(255, 255, 255, .78); }
html:not(.js) .schritt { opacity: 1; transform: none; min-height: auto; padding: 50px 0; }
html:not(.js) .werkstatt__platz { position: static; height: auto; padding-top: 40px; }

/* Szene 2: echte Urkunden fächern sich auf */
.stapel { margin-top: 40px; }
.stapel__titel { font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.faecher {
  --p: 0; --abstand: 74%;
  position: relative; width: min(1000px, 100%); margin: 0 auto; aspect-ratio: 1000 / 560; padding: 0 20px;
}
.faecher__blatt {
  position: absolute; left: 50%; top: 4%; width: 32%; height: auto; border-radius: 4px;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .25);
  transform:
    translate3d(calc(-50% + var(--k) * var(--abstand) * var(--p)), calc(var(--k) * var(--k) * 2.6% * var(--p)), 0)
    rotate(calc(var(--k) * 5.5deg * var(--p) + (1 - var(--p)) * var(--k) * 1.2deg));
  will-change: transform;
}
.fakten {
  list-style: none; margin: 30px auto 0; padding: 0 20px; max-width: 860px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.fakten li {
  display: grid; gap: 2px; justify-items: center; text-align: center; padding: 18px 10px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.fakten b {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  background: linear-gradient(100deg, #f6d58e, #e0a32e); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fakten span { font-size: .9rem; color: rgba(255, 255, 255, .75); }

/* ---------- Briefe & Formulare ---------- */
/* Dunkel wie die Urkunden, Akzent Himmelblau statt Gold. Szene 1 ist eine
   Werkstatt (angeheftetes Fenster, Schritte daneben): Statt einer
   Kamerafahrt wechseln echte Aufnahmen aus der Web-Version, auf dem Handy
   wird das Fenster zum Handy. Szene 2: der echte Brief im Fensterkuvert. */
.briefe {
  --werkstatt-grund: #0f2f3e;
  --himmel: #9fd6ef;
  position: relative; color: #fff; padding: 120px 0 130px; overflow-x: clip;
  /* Lichtschein und Verlauf enden nach 380 px, noch über der Bühne: Auf Handy
     und Tablet hat die angeheftete Bühne einen einfarbigen Grund, sonst
     zeichnete sich ihr Kasten ab. */
  background:
    radial-gradient(800px 480px at 84% 40px, rgba(13, 152, 255, .17), transparent 70%),
    linear-gradient(180deg, #123b4e 0, var(--werkstatt-grund) 360px);
}
.briefe > .abschnitt__kopf { padding: 0 20px; }
.briefe .augenbraue, .briefe .schritt__nummer { color: var(--himmel); }
.briefe .abschnitt__kopf > p:not(.augenbraue) { color: rgba(255, 255, 255, .78); }
.briefe__akzent {
  background: linear-gradient(100deg, #d9f1fb 8%, #8fcbe8 46%, #eaf8fd 62%, #79b8d8 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.briefe .punkte li.aktiv { background: linear-gradient(90deg, #d9f1fb, #6fb4d6); }

/* Szene 1: Fenster (16:10) mit einer Aufnahme je Schritt */
.pult { position: relative; display: flex; justify-content: center; width: 100%; }
.fenster--briefe { width: min(100%, calc((100svh - var(--kopf-hoehe) - 150px) * 1.6)); }
.fenster--briefe .fenster__bild { display: grid; aspect-ratio: 1280 / 800; }
.pult__bild { display: block; grid-area: 1 / 1; min-height: 0; opacity: 0; transform: scale(1.015); transition: opacity .6s var(--weich), transform .8s var(--weich); }
.fenster--briefe .fenster__bild img {
  position: static; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top;
  transform: none; transition: none;
}
.fenster--briefe[data-schritt="0"] .pult__bild[data-bild="0"],
.fenster--briefe[data-schritt="1"] .pult__bild[data-bild="1"],
.fenster--briefe[data-schritt="2"] .pult__bild[data-bild="2"],
.fenster--briefe[data-schritt="3"] .pult__bild[data-bild="3"] { opacity: 1; transform: none; }
/* Schritt 4 (Rücklauf): das Handy schiebt sich vor das Fenster. */
.pult__handy {
  position: absolute; right: -3%; bottom: -10%; z-index: 2; width: 26%;
  opacity: 0; transform: translate3d(16%, 14%, 0) rotate(6deg);
  transition: opacity .6s var(--weich), transform .9s var(--weich);
}
.werkstatt--briefe[data-schritt="3"] .pult__handy { opacity: 1; transform: rotate(2.5deg); }
@media (max-width: 1240px) { .pult__handy { right: 1%; width: 25%; } }
html:not(.js) .pult__handy { display: none; }

/* Szene 2: Fensterkuvert DIN lang (220 × 110 mm), Fenster 90 × 45 mm, 20 mm
   von links, 15 mm von unten. Der Brief (oberes Drittel der echten ersten
   Seite, 210 × 104 mm) gleitet mit --p hinein, bis die Anschrift im Fenster
   steht; die Anschriften liegen als Ausschnitte genau über dem Fenster. */
.post {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: end;
  max-width: var(--breite); margin: 40px auto 0; padding: 0 20px;
}
.post__titel { font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom: 16px; }
.post__text > p { font-size: 1.1rem; color: rgba(255, 255, 255, .78); }
.post__text { padding-bottom: 46px; }
/* Platz für den Brief, der anfangs herausragt: 64 % seiner Höhe ≈ 30,3 % der Kuvertbreite. */
.post__bild { position: relative; padding-top: min(176px, 30.3%); }
.kuvert {
  --p: 0; --weg: 64%;
  position: relative; width: min(580px, 100%); aspect-ratio: 220 / 110; margin: 0 auto;
}
.kuvert__brief {
  position: absolute; left: calc(5 / 220 * 100%); top: calc(2 / 110 * 100%); width: calc(210 / 220 * 100%); aspect-ratio: 210 / 104;
  background: #fff; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  transform: translate3d(0, calc((1 - var(--p)) * var(--weg) * -1), 0) rotate(calc((1 - var(--p)) * -2.5deg));
  will-change: transform;
}
.kuvert__seite { display: block; width: 100%; height: 100%; }
/* Innenseite des Kuverts: Durchs Fenster sieht man Papier, solange der Brief noch nicht dahinter steckt. */
.kuvert__innen { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(180deg, #d9d3c6, #e7e2d7 60%, #ece8df); }
.kuvert__anschrift {
  position: absolute; left: calc(15 / 210 * 100%); top: calc(48 / 104 * 100%); width: calc(90 / 210 * 100%); height: auto;
  opacity: 0; transition: opacity .2s ease;
}
.kuvert__anschrift.aktiv { opacity: 1; }
.kuvert__vorne {
  position: absolute; inset: 0; overflow: hidden; border-radius: 5px;
  box-shadow: 0 44px 80px -34px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .2);
}
/* Die riesige Schattenkante färbt alles außer dem Fenster in Kuvertfarbe. */
.kuvert__fenster {
  position: absolute; left: calc(20 / 220 * 100%); top: calc(50 / 110 * 100%); width: calc(90 / 220 * 100%); height: calc(45 / 110 * 100%);
  border-radius: 5px; box-shadow: 0 0 0 200vmax #F4F1EA, inset 0 0 0 1px rgba(60, 50, 30, .16);
  background: linear-gradient(118deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .14) 58%, rgba(255, 255, 255, 0) 70%);
}
/* Briefmarke mit dem CIVITAS-Regenbogen – damit man das Kuvert sofort erkennt. */
.kuvert__marke {
  position: absolute; z-index: 2; right: 4.5%; top: 10%; width: 11%; aspect-ratio: 5 / 6;
  display: grid; place-items: center; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 3px rgba(60, 50, 30, .28);
  outline: 1.5px dashed rgba(60, 50, 30, .22); outline-offset: -4px;
  rotate: 2.5deg;
}
.kuvert__marke svg { width: 60%; height: auto; }
/* Die Öffnung oben: ein Hauch Schatten zeigt, wo der Brief hineingleitet. */
.kuvert__vorne::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 7%;
  background: linear-gradient(180deg, rgba(60, 50, 30, .16), rgba(60, 50, 30, 0));
}
.kuvert__zaehler { margin-top: 20px; text-align: center; font-weight: 600; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.kuvert__zaehler b, .kuvert__zaehler span { color: #fff; font-weight: 700; }
html:not(.js) .kuvert { --p: 1; }
html:not(.js) .kuvert__zaehler { display: none; }

.fakten--briefe { margin-top: 90px; }
.briefe .fakten b { background-image: linear-gradient(100deg, #d9f1fb, #79b8d8); }
.briefe__versprechen {
  position: relative; max-width: min(760px, calc(100% - 40px)); margin: 26px auto 0; padding: 22px 26px 22px 66px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78);
}
.briefe__versprechen strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: #fff; }
.briefe__versprechen::before {
  content: ""; position: absolute; left: 22px; top: 24px; width: 28px; height: 28px; border-radius: 50%;
  background: #2f86ad url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='11' width='12' height='9' rx='2' fill='white'/%3E%3Cpath d='M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- civi – der KI-Assistent fürs Team ---------- */
/* Hell wie die Verwaltung, in der civi lebt; Petrol und der Mini-Regenbogen
   der Figur. Fenster, Figur und Bausteine sind der Web-App nachgebaut
   (civitas/assets/css/civi.css) – Maße und Farben wie dort. Was seite.js
   nacheinander zeigt, trägt bis dahin .ist-wartet. */
.civi {
  --werkstatt-grund: #F2F7FA;
  --cv-akzent: #2A6F8F; --cv-dunkel: #1F5570; --cv-weich: #EAF3F7; --cv-rand: #BCD6E2; --cv-hauch: #F6FAFC;
  --cv-text: #1D2733; --cv-text-2: #4A5667; --cv-text-3: #667085; --cv-linie: #E3E8EE; --cv-linie-leicht: #EDF0F4; --cv-flaeche: #F8FAFC;
  position: relative; padding: 100px 0 130px; overflow-x: clip;
  /* Der Schein endet weit über der Bühne: Auf Handy und Tablet hat die
     angeheftete Bühne einen einfarbigen Grund (wie bei den Briefen). */
  background:
    radial-gradient(640px 420px at 50% 150px, rgba(13, 152, 255, .09), transparent 70%),
    linear-gradient(180deg, #fff 0, var(--werkstatt-grund) 320px, var(--werkstatt-grund) calc(100% - 260px), #fff 100%);
}
.civi > .abschnitt__kopf { padding: 0 20px; }
.civi__akzent {
  background: linear-gradient(100deg, #2F7A9C 6%, #1A4B63 46%, #2A6F8F 72%, #12405A 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Die Figur (wie in der App): Sprechblase mit Augen und Mini-Regenbogen. */
.cv-figur { display: block; flex: none; width: 24px; height: 24px; overflow: visible; }
.cv-figur__koerper { fill: url(#cv-verlauf) #2A6F8F; }
.cv-figur__auge { fill: #fff; transform-box: fill-box; transform-origin: center; animation: cv-blinzeln 7.5s infinite; }
.cv-figur__auge + .cv-figur__auge { animation-delay: .04s; }
.cv-figur__freude, .cv-figur__zu { display: none; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.cv-figur__augen { transition: transform .3s ease; }
.cv-figur--denkt .cv-figur__augen { transform: translate(1.6px, -1.8px); }
.cv-figur--denkt .cv-figur__bogen path { animation: cv-bogen 1.2s ease-in-out infinite; }
.cv-figur--denkt .cv-figur__bogen path:nth-child(2) { animation-delay: .15s; }
.cv-figur--denkt .cv-figur__bogen path:nth-child(3) { animation-delay: .3s; }
.cv-figur--denkt .cv-figur__bogen path:nth-child(4) { animation-delay: .45s; }
.cv-figur--schreibt { animation: cv-wippen .9s ease-in-out infinite; }
.cv-figur--freut .cv-figur__auge, .cv-figur--pause .cv-figur__auge { display: none; }
.cv-figur--freut .cv-figur__freude, .cv-figur--pause .cv-figur__zu { display: inline; }
.cv-figur__bogen { transition: opacity .4s ease; }
.cv-figur--pause .cv-figur__bogen { opacity: .35; }
@keyframes cv-blinzeln { 0%, 95% { transform: scaleY(1); } 96.5% { transform: scaleY(.12); } 98%, 100% { transform: scaleY(1); } }
@keyframes cv-bogen { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes cv-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes cv-drehen { to { transform: rotate(1turn); } }

/* Kopf: civi wacht auf – die Bögen zeichnen sich, dann gehen die Augen auf
   und folgen dem Mauszeiger (seite.js setzt --ax/--ay). */
.civi-held { position: relative; width: 128px; height: 128px; margin: 0 auto 30px; }
.civi-held__schein {
  position: absolute; inset: -62%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(247, 86, 60, .34), rgba(239, 204, 0, .3), rgba(66, 188, 89, .3), rgba(13, 152, 255, .34), rgba(247, 86, 60, .34));
  filter: blur(44px); opacity: .6;
  animation: cv-drehen 18s linear infinite; animation-play-state: paused;
}
.civi-held.laeuft .civi-held__schein { animation-play-state: running; }
.civi-held .cv-figur { position: relative; width: 100%; height: 100%; cursor: default; }
.civi-held .cv-figur__augen { transform: translate(var(--ax, 0px), var(--ay, 0px)); transition: transform .25s ease-out; }
.js .civi-held .cv-figur { opacity: 0; transform: translate3d(0, 18px, 0) scale(.9); transition: opacity .7s var(--weich), transform .9s var(--weich); }
.js .civi-held.wach .cv-figur { opacity: 1; transform: none; }
.js .civi-held .cv-figur__bogen path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--weich) .25s; }
.js .civi-held.wach .cv-figur__bogen path { stroke-dashoffset: 0; }
.js .civi-held .cv-figur__bogen path:nth-child(2) { transition-delay: .37s; }
.js .civi-held .cv-figur__bogen path:nth-child(3) { transition-delay: .49s; }
.js .civi-held .cv-figur__bogen path:nth-child(4) { transition-delay: .61s; }

/* Szene 1: Fragen-Band (wie die Einstiege der Bibel) */
.fragenband {
  --p: .5;
  position: relative; overflow: hidden; padding: 30px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fragenband__reihe {
  display: flex; gap: 14px; width: max-content; margin: 0 0 0 50%; padding: 0; list-style: none;
  transform: translate3d(calc(-50% + (var(--p) - .5) * -320px), 0, 0); will-change: transform;
}
.fragenband__reihe--zwei { margin-top: 14px; transform: translate3d(calc(-50% + 150px + (var(--p) - .5) * 320px), 0, 0); }
.fragenband li {
  flex: none; padding: 12px 17px; border-radius: 18px 18px 5px 18px; white-space: nowrap;
  background: #fff; border: 1px solid #DCE9EF; color: var(--cv-text); font-weight: 600; line-height: 1.35;
  box-shadow: 0 16px 34px -26px rgba(16, 48, 63, .5);
}
.fragenband li:nth-child(3n+2) { background: var(--cv-weich); border-color: #D2E5EE; }
.fragenband__text { max-width: 34em; margin: 30px auto 0; padding: 0 20px; text-align: center; font-weight: 600; color: var(--text-leise); }

/* Szene 2: das Gespräch (Werkstatt wie Urkunden und Briefe, hell) */
.werkstatt--civi { grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); margin-top: 60px; }
.werkstatt--civi .schritt__nummer { color: var(--petrol); }
.werkstatt--civi .schritt p:not(.schritt__nummer) { color: var(--text-leise); }
.werkstatt--civi .punkte li { background: rgba(31, 85, 112, .18); }
.werkstatt--civi .punkte li.aktiv { background: linear-gradient(90deg, var(--rot), var(--gelb), var(--gruen), var(--blau)); }
.cv-buehne { position: relative; width: min(100%, 780px); }
/* Denkt civi nach, leuchtet das Fenster in den Farben der Bögen. */
.cv-glanz { position: absolute; inset: -14px; border-radius: 28px; overflow: hidden; filter: blur(18px); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cv-glanz i {
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(var(--rot), var(--gelb), var(--gruen), var(--blau), var(--rot));
  animation: cv-drehen 3.2s linear infinite; animation-play-state: paused;
}
.cv-buehne.ist-denkend .cv-glanz { opacity: .55; }
.cv-buehne.ist-denkend .cv-glanz i { animation-play-state: running; }
.fenster--civi {
  position: relative; display: flex; flex-direction: column; width: 100%;
  height: min(700px, calc(100svh - var(--kopf-hoehe) - 140px));
  background: #F5F7FA; box-shadow: 0 50px 100px -46px rgba(16, 48, 63, .5), 0 0 0 1px rgba(16, 48, 63, .08);
}
.cv-bild { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 58%); overflow: hidden; }

/* Die Seite „Unterricht › Termine“ links neben civi */
.cv-seite { min-width: 0; padding: 22px 20px; background: #F5F7FA; color: var(--cv-text); font-size: 13px; line-height: 1.45; overflow: hidden; }
.cv-seite p { margin: 0; }
.cv-seite__leiste { display: none; }
.cv-seite__bereich { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #7C3AED; }
.cv-seite__bereich .cv-i { width: 15px; height: 15px; }
.cv-seite__titel { margin-top: 4px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.cv-seite__text { margin-top: 4px; color: var(--cv-text-2); }
.cv-seite__knoepfe { margin: 16px 0 18px; }
.cv-ziel {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 15px;
  border-radius: 8px; background: var(--cv-akzent); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.cv-ziel > .cv-i { width: 16px; height: 16px; }
/* „Zeig es mir“: Ring wie in der App, dreimal pulsierend, dann ruhig. */
.cv-ziel.ist-ziel { outline: 3px solid var(--cv-akzent); outline-offset: 4px; box-shadow: 0 0 0 7px rgba(42, 111, 143, .16); animation: cv-ring 1.1s ease-out 3; }
@keyframes cv-ring {
  0% { outline-offset: 1px; outline-color: rgba(42, 111, 143, .2); box-shadow: 0 0 0 0 rgba(42, 111, 143, .4); }
  45% { outline-color: rgba(42, 111, 143, 1); }
  100% { outline-offset: 4px; outline-color: rgba(42, 111, 143, .9); box-shadow: 0 0 0 14px rgba(42, 111, 143, 0); }
}
.cv-hier {
  position: absolute; left: calc(100% + 14px); top: 50%; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px;
  background: var(--cv-dunkel); color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
  opacity: 0; transform: translate3d(-8px, -50%, 0) scale(.9); transform-origin: 0 50%; transition: opacity .25s ease, transform .4s var(--weich);
}
.cv-hier .cv-figur { width: 24px; height: 24px; padding: 2px; background: #fff; border-radius: 50%; }
.cv-ziel.ist-ziel .cv-hier { opacity: 1; transform: translate3d(0, -50%, 0); transition-delay: .15s; }
/* Ist neben dem Knopf kein Platz (schmale Seite), steht „Hier!“ darüber – wie in der App. */
.cv-seite { container-type: inline-size; }
@container (max-width: 270px) {
  .cv-hier { left: -8px; top: auto; bottom: calc(100% + 12px); transform: translate3d(0, 8px, 0) scale(.9); transform-origin: 20px 100%; }
  .cv-ziel.ist-ziel .cv-hier { transform: none; }
}
.cv-monat { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 800; }
.cv-monat span { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--cv-text-2); background: #E9EEF3; }
.cv-termine { list-style: none; margin: 0; padding: 0; border-radius: 12px; background: #fff; border: 1px solid #E6EAF0; overflow: hidden; }
.cv-termine li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.cv-termine li + li { border-top: 1px solid #EEF1F5; }
.cv-termine li > span:last-child { display: grid; min-width: 0; }
.cv-termine li > span:last-child > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-termine b { font-weight: 700; }
.cv-termine small { font-size: 11.5px; color: var(--cv-text-3); }
.cv-datum {
  flex: none; display: grid; place-content: center; justify-items: center; width: 42px; height: 46px; border-radius: 10px;
  background: #F1F4F8; color: var(--cv-text-2); font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1.15;
}
.cv-datum b { font-size: 17px; font-weight: 800; color: var(--cv-text); }
.cv-datum--heute { background: var(--cv-akzent); color: rgba(255, 255, 255, .85); }
.cv-datum--heute b { color: #fff; }

/* civi – Fenster und Bausteine (wie .civi in der Web-App) */
.cv-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: #fff; border-left: 1px solid var(--cv-linie); color: var(--cv-text); font-size: 14px; line-height: 1.5; text-align: left;
}
.cv-panel p { margin: 0; }
.cv-i { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-kopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; color: var(--cv-text-2); }
.cv-kopf > .cv-figur { width: 40px; height: 40px; }
.cv-kopf__titel { display: grid; min-width: 0; margin-right: auto; line-height: 1.25; }
.cv-kopf__titel b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--cv-text); }
.cv-kopf__titel span { font-size: 12px; font-weight: 600; color: var(--cv-text-3); }
.cv-kopf > .cv-i { margin: 0 6px; }
.cv-ort {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 0 14px 6px; padding: 6px 10px 6px 6px;
  font-size: 12.5px; font-weight: 600; color: var(--cv-text-2); background: var(--cv-flaeche); border: 1px solid var(--cv-linie-leicht); border-radius: 10px;
}
.cv-ort__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-ort em { margin-left: auto; padding-left: 6px; font-style: normal; font-size: 12px; color: var(--cv-akzent); white-space: nowrap; }
.cv-kachel { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--b, #475569); color: #fff; }
.cv-kachel .cv-i { width: 14px; height: 14px; }
.cv-verlauf {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 8px 14px 14px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; scroll-behavior: smooth;
}
/* Ist der Verlauf gerollt, läuft oben ein weicher Rand aus (statt harter Kante). */
.cv-verlauf.ist-gerollt { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
.cv-gespraech { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.cv-gespraech[hidden] { display: none; }
.cv-leer { display: grid; gap: 8px; padding: 6px 2px; }
.cv-leer b { font-size: 17px; font-weight: 800; }
.cv-leer span { font-size: 13.5px; color: var(--cv-text-2); }
.cv-frage { justify-self: end; display: grid; justify-items: end; gap: 5px; max-width: 86%; }
.cv-frage__blase {
  position: relative; overflow: hidden; padding: 9px 13px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere;
  background: var(--cv-weich); border-radius: 16px 16px 4px 16px;
}
/* Schützen: Ein Lichtstreif prüft die Frage, Name und E-Mail-Adresse leuchten auf. */
.cv-frage__blase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 25%, rgba(42, 111, 143, .28) 50%, transparent 75%);
}
.cv-frage.ist-scan .cv-frage__blase::after { animation: cv-scan .85s ease-in-out both; }
@keyframes cv-scan { to { transform: translateX(110%); } }
.cv-frage mark { color: inherit; background: transparent; border-radius: 4px; transition: background-color .35s ease, box-shadow .35s ease; }
.cv-frage.ist-geprueft mark { background: #FDE1D8; box-shadow: 0 0 0 2px #FDE1D8; }
.cv-geschwaerzt { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--cv-text-3); text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; }
.cv-geschwaerzt .cv-i { width: 13px; height: 13px; margin-top: 1px; }
.cv-gesehen { padding: 6px 10px; font-size: 12px; line-height: 1.5; color: var(--cv-text-2); text-align: left; background: var(--cv-flaeche); border: 1px dashed #CBD2DB; border-radius: 10px; }
.cv-gesehen b { color: var(--cv-text); }
.cv-platz { display: inline-block; padding: 0 5px; border-radius: 5px; background: var(--cv-dunkel); color: #fff; font-weight: 700; line-height: 1.45; }
.cv-antwort { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.cv-antwort__kopf { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cv-text-3); }
.cv-antwort__kopf .cv-figur { width: 26px; height: 26px; }
.cv-antwort__kopf b { font-weight: 800; color: var(--cv-text); }
.cv-denkt { display: none; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--cv-text-3); }
.cv-antwort.ist-denkend .cv-denkt { display: flex; }
.cv-denkt i { width: 5px; height: 5px; border-radius: 50%; background: var(--cv-akzent); animation: cv-punkt 1s ease-in-out infinite; }
.cv-denkt i:first-of-type { margin-left: 7px; }
.cv-denkt i:nth-of-type(2) { animation-delay: .15s; }
.cv-denkt i:nth-of-type(3) { animation-delay: .3s; }
@keyframes cv-punkt { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
/* „civi schreibt …“ (seite.js hängt die Zeile an, solange Bausteine kommen) */
.cv-schreibt { display: none; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--cv-text-3); }
.cv-antwort.ist-schreibend .cv-schreibt { display: flex; }
.cv-schreibt::before {
  content: ""; width: 62%; max-width: 220px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #F1F4F8 0%, #E3EEF3 50%, #F1F4F8 100%); background-size: 200% 100%; animation: cv-schimmer 1.1s linear infinite;
}
@keyframes cv-schimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
.cv-b { font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.cv-b b { font-weight: 700; }
.cv-schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: cv-schritt; }
/* Die Nummer steht links neben dem Text (Text und Fettes bleiben ein Fluss). */
.cv-schritte li { position: relative; min-height: 26px; padding-left: 34px; counter-increment: cv-schritt; }
.cv-schritte li::before {
  content: counter(cv-schritt); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12.5px; font-weight: 800; line-height: 1; color: var(--cv-dunkel); background: var(--cv-weich);
}
.cv-hinweis { padding: 10px 12px; font-size: 13.5px; background: #FEF5E1; border: 1px solid #F3D597; border-radius: 10px; }
.cv-hinweis > b:first-child { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A5A00; }
.cv-weg {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 34px; padding: 4px 12px 4px 4px;
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--cv-dunkel); background: #fff; border: 1px solid var(--cv-linie); border-radius: 999px;
}
.cv-weg .cv-kachel { border-radius: 999px; }
.cv-weg > .cv-i { width: 15px; height: 15px; color: var(--cv-text-3); }
.cv-aktion {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px;
  font-size: 13px; font-weight: 700; color: var(--cv-dunkel); background: #fff; border: 1px solid var(--cv-rand); border-radius: 10px;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.cv-aktion .cv-i { width: 16px; height: 16px; }
.cv-aktion.ist-gedrueckt { background: var(--cv-weich); border-color: var(--cv-akzent); transform: scale(.95); }
.cv-quelle { justify-self: start; font-size: 12px; font-weight: 600; color: var(--cv-text-3); text-decoration: underline dotted; text-underline-offset: 3px; }
.cv-wertung { display: flex; margin: -6px 0 0 -9px; color: var(--cv-text-3); }
.cv-wertung .cv-i { width: 17px; height: 17px; margin: 9px; }
.cv-vorschlag { display: grid; gap: 8px; padding: 10px 12px; background: var(--cv-flaeche); border: 1.5px dashed var(--cv-rand); border-radius: 12px; }
.cv-vorschlag__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cv-dunkel); }
.cv-klein-knopf {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--cv-dunkel); background: #fff; border: 1px solid var(--cv-rand); border-radius: 8px;
}
.cv-klein-knopf .cv-i { width: 14px; height: 14px; }
.cv-kontakt { overflow: hidden; border: 1px solid var(--cv-linie); border-radius: 12px; }
.cv-kontakt__titel { padding: 8px 12px; font-size: 12px; font-weight: 800; color: var(--cv-text-2); background: var(--cv-flaeche); border-bottom: 1px solid var(--cv-linie-leicht); }
.cv-kontakt__person { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13.5px; }
.cv-kontakt__person + .cv-kontakt__person { border-top: 1px solid var(--cv-linie-leicht); }
.cv-kontakt__person small { display: block; font-size: 12px; color: var(--cv-text-3); }
.cv-kontakt__bild { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--cv-dunkel); background: var(--cv-weich); }
.cv-kontakt__fuss { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 11.5px; color: var(--cv-text-3); background: var(--cv-flaeche); border-top: 1px solid var(--cv-linie-leicht); }
.cv-kontakt__fuss .cv-i { width: 13px; height: 13px; }
.cv-vorschlaege { flex: none; display: flex; gap: 6px; padding: 0 14px 8px; overflow: hidden; }
.cv-chip {
  flex: none; max-width: 300px; min-height: 34px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--cv-dunkel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; border: 1px solid var(--cv-rand); border-radius: 999px;
}
.cv-eingabe { flex: none; position: relative; margin: 0 14px; }
.cv-eingabe__feld {
  display: block; min-height: 48px; padding: 13px 52px 12px 14px; font-size: 15px; line-height: 1.45; color: var(--cv-text); overflow-wrap: anywhere;
  background: #fff; border: 1px solid #CBD2DB; border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.cv-eingabe__platz { color: var(--cv-text-3); }
.cv-eingabe__text:not(:empty) + .cv-eingabe__platz { display: none; }
.cv-eingabe.ist-tippt .cv-eingabe__feld { border-color: var(--cv-akzent); box-shadow: 0 0 0 3px rgba(42, 111, 143, .18); }
.cv-eingabe.ist-tippt .cv-eingabe__text::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--cv-akzent); animation: cv-strich 1s steps(1) infinite; }
@keyframes cv-strich { 50% { opacity: 0; } }
.cv-senden { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: #CBD2DB; transition: background-color .25s ease, transform .2s ease; }
.cv-senden .cv-i { width: 18px; height: 18px; stroke-width: 2.3; }
.cv-eingabe.ist-voll .cv-senden { background: var(--cv-akzent); }
.cv-eingabe.ist-gesendet .cv-senden { transform: scale(.88); }
.cv-fuss { flex: none; margin: 6px 14px 12px; font-size: 11.5px; color: var(--cv-text-3); text-align: center; }
/* Begleiter-Leiste: nur auf dem Handy, nach „Zeig es mir“ */
.cv-leiste { display: none; }
.cv-steuerung { display: flex; align-items: center; gap: 16px; min-height: 38px; }
.cv-nochmal { color: var(--cv-dunkel); box-shadow: 0 8px 20px -10px rgba(16, 48, 63, .5), 0 0 0 1px rgba(16, 48, 63, .12); }
/* Erscheinen wie in der App: kurz von unten einblenden (180 ms). */
.js .ist-wartet { display: none !important; }
.cv-neu { animation: cv-block .22s ease both; }
@keyframes cv-block { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Szene 3: Probiert es aus */
.probe { max-width: var(--breite); margin: 110px auto 0; padding: 0 20px; }
.probe .abschnitt__kopf { margin-bottom: 38px; }
.probe__titel { font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.probe__flaeche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: start; max-width: 1000px; margin: 0 auto; }
.probe__fragen { display: grid; gap: 10px; }
.probe__frage {
  display: grid; gap: 3px; width: 100%; padding: 14px 18px; border-radius: 18px 18px 6px 18px; cursor: pointer;
  font: inherit; text-align: left; color: var(--text); background: #fff; border: 1.5px solid #DCE9EF;
  box-shadow: 0 14px 30px -26px rgba(16, 48, 63, .45);
  transition: border-color .25s ease, background-color .25s ease, transform .3s var(--weich), box-shadow .3s ease;
}
.probe__frage small { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--petrol); }
.probe__frage span { font-weight: 600; line-height: 1.4; }
.probe__frage:hover { transform: translateY(-2px); border-color: var(--cv-rand); }
.probe__frage[aria-pressed="true"] { background: var(--cv-weich); border-color: var(--cv-akzent); box-shadow: 0 20px 44px -28px rgba(16, 48, 63, .55); }
.probe__frage:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cv-panel--probe { height: clamp(560px, calc(100svh - 150px), 700px); border: 1px solid var(--cv-linie); border-radius: 22px; overflow: hidden; box-shadow: 0 44px 90px -50px rgba(16, 48, 63, .55); }
.cv-panel--probe .cv-verlauf { overflow-y: auto; }
.cv-panel--probe .cv-verlauf:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.probe__hinweis { max-width: 40em; margin: 24px auto 0; text-align: center; font-size: .92rem; color: var(--text-leise); }

/* Szene 4: was civi tut – und was nie */
.regeln {
  width: min(1000px, calc(100% - 40px)); margin: 110px auto 0; padding: 44px 48px 46px; border-radius: 30px;
  background: #fff; box-shadow: 0 40px 90px -50px rgba(16, 48, 63, .45);
}
.regeln__titel { text-align: center; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.15; }
.regeln__titel span { background: linear-gradient(100deg, #2F7A9C 10%, #1A4B63 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.regeln__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 48px; margin-top: 34px; }
.regeln__kopf { font-weight: 800; font-size: 1.08rem; }
.regeln .haken, .regeln .nie { margin-top: 14px; }
.nie { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.nie li { position: relative; padding-left: 32px; font-weight: 600; }
.nie li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
  background: #DD5A43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.fakten--civi { margin-top: 70px; }
.civi .fakten li { background: #fff; border-color: rgba(31, 85, 112, .1); box-shadow: 0 18px 40px -34px rgba(16, 48, 63, .5); }
.civi .fakten b { background-image: linear-gradient(100deg, #2F7A9C, #1A4B63); }
.civi .fakten span { color: var(--text-leise); }
.civi__versprechen {
  position: relative; max-width: min(760px, calc(100% - 40px)); margin: 26px auto 0; padding: 22px 26px 22px 66px; border-radius: 18px;
  background: #fff; color: var(--text-leise); border: 1px solid rgba(31, 85, 112, .12); box-shadow: 0 20px 50px -36px rgba(16, 48, 63, .45);
}
.civi__versprechen strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--text); }
.civi__versprechen a { display: inline-block; margin-top: 8px; font-weight: 700; text-decoration: none; }
.civi__versprechen a::after { content: " →"; }
.civi__versprechen::before {
  content: ""; position: absolute; left: 22px; top: 24px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='11' width='12' height='9' rx='2' fill='white'/%3E%3Cpath d='M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat;
}
/* Ohne JavaScript: das ganze Gespräch, ohne Begrüßung und Auswahl. */
html:not(.js) .cv-panel [data-bis], html:not(.js) .probe__fragen { display: none; }
html:not(.js) .cv-verlauf { overflow: auto; }
html:not(.js) .probe__flaeche { grid-template-columns: minmax(0, 440px); justify-content: center; }

.praxis { background: #fff; }
.zitat { max-width: 820px; margin: 0 auto; text-align: center; }
.zitat blockquote { margin: 0; }
.zitat blockquote p { font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--petrol-dunkel), var(--petrol)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zitat figcaption { margin-top: 18px; color: var(--text-leise); }
.presse { list-style: none; padding: 0; margin: 44px auto 0; max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.presse a { display: grid; gap: 6px; height: 100%; padding: 20px 22px; border-radius: 18px; background: var(--grund); color: var(--text); text-decoration: none; font-weight: 700; transition: transform .25s var(--weich), background .25s; }
.presse a:hover { transform: translateY(-3px); background: var(--petrol-hell); }
.presse span { font-weight: 500; font-size: .9rem; color: var(--text-leise); }

.sicherheit { background: var(--petrol-tief); color: #fff; }
.sicherheit .augenbraue { color: #ffd98f; }
.sicherheit .abschnitt__kopf > p:not(.augenbraue) { color: rgba(255, 255, 255, .78); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.kachel { padding: 30px 26px; border-radius: var(--rund); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: transform .3s var(--weich), background .3s; }
.kachel:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.kachel__symbol { font-size: 2rem; margin-bottom: 16px; }
.kachel h3 { margin-bottom: 10px; }
.kachel p { color: rgba(255, 255, 255, .78); }

.schritte__liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: schritt; }
.schritte__liste li { padding: 32px 28px; border-radius: var(--rund); background: #fff; box-shadow: 0 20px 50px -30px rgba(16, 48, 63, .35); }
.schritte__liste span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--petrol); color: #fff; font-weight: 800; margin-bottom: 18px; }
.schritte__liste h3 { margin-bottom: 10px; }
.schritte__liste p { color: var(--text-leise); }

.preis { background: linear-gradient(180deg, var(--grund), #fff); }

/* Preisrechner: Regler wählt das passende Paket, die Karte leuchtet auf.
   Ohne JavaScript bleiben die drei Pakete sichtbar, der Regler entfällt. */
.rechner {
  max-width: 820px; margin: 0 auto 28px; padding: 30px 34px 26px; border-radius: 26px; background: #fff;
  box-shadow: 0 30px 70px -40px rgba(16, 48, 63, .4);
}
html:not(.js) .rechner, html:not(.js) .paket__passt { display: none; }
.rechner__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rechner__frage { font-weight: 700; font-size: 1.12rem; }
.rechner__anzahl { font-weight: 700; color: var(--text-leise); white-space: nowrap; }
.rechner__anzahl b { font-size: 2.2rem; font-weight: 800; color: var(--petrol); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.regler { --wert: 45; position: relative; margin: 18px 0 6px; }
.regler input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.regler input::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--petrol) calc(var(--wert) * 1%), var(--petrol-hell) 0);
}
.regler input::-moz-range-track { height: 10px; border-radius: 999px; background: var(--petrol-hell); }
.regler input::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--petrol); }
.regler input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: #fff;
  border: 0; box-shadow: 0 0 0 1px rgba(16, 48, 63, .08), 0 6px 18px -4px rgba(16, 48, 63, .45);
  transition: transform .2s var(--weich);
}
.regler input::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 1px rgba(16, 48, 63, .08), 0 6px 18px -4px rgba(16, 48, 63, .45);
}
.regler input:active::-webkit-slider-thumb { transform: scale(1.12); }
.regler input:focus-visible { outline: none; }
.regler input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--gold), 0 6px 18px -4px rgba(16, 48, 63, .45); }
.regler input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--gold), 0 6px 18px -4px rgba(16, 48, 63, .45); }
.regler__zonen { position: relative; height: 22px; }
.regler__zonen span {
  position: absolute; left: calc(var(--von) * 1%); width: calc((var(--bis) - var(--von)) * 1%);
  padding-top: 6px; border-top: 2px solid var(--rand); text-align: center; font-size: .8rem; font-weight: 700;
  color: var(--text-leise); transition: color .3s, border-color .3s;
}
.regler__zonen span + span { border-left: 2px solid #fff; }
.regler__zonen span.aktiv { color: var(--petrol); border-top-color: var(--petrol); }

.schalter { display: flex; align-items: center; gap: 14px; margin-top: 22px; cursor: pointer; color: var(--text-leise); font-size: .95rem; }
.schalter b { color: var(--text); }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter__bahn {
  flex: none; position: relative; width: 51px; height: 31px; border-radius: 999px; background: #d9dde3; transition: background .25s var(--weich);
}
.schalter__bahn::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transition: transform .3s var(--weich);
}
.schalter input:checked + .schalter__bahn { background: var(--gruen); }
.schalter input:checked + .schalter__bahn::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalter__bahn { outline: 3px solid var(--gold); outline-offset: 3px; }
.rechner__ergebnis { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rand); font-weight: 700; color: var(--petrol-dunkel); text-align: center; }
.rechner__ergebnis:empty { display: none; }

.pakete { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pakete__individuell { max-width: 1000px; margin: 18px auto 0; text-align: center; color: var(--text-leise); font-weight: 600; }
.pakete__individuell a { color: var(--petrol); font-weight: 700; }
.paket {
  position: relative; padding: 38px 24px 30px; border-radius: 26px; background: #fff; text-align: center;
  box-shadow: 0 24px 60px -40px rgba(16, 48, 63, .4);
  transition: transform .45s var(--weich), box-shadow .45s var(--weich), opacity .45s;
}
.paket::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, var(--rot), var(--gelb), var(--gruen), var(--blau));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .45s var(--weich);
}
.js .pakete--gewaehlt .paket:not(.paket--aktiv) { opacity: .62; }
.js .pakete--gewaehlt .paket.sichtbar.paket--aktiv { transform: translateY(-8px); box-shadow: 0 40px 90px -40px rgba(16, 48, 63, .5); }
.js .paket--aktiv::before { opacity: 1; }
.paket__passt {
  position: absolute; top: -14px; left: 50%; translate: -50% 0; padding: 5px 14px; border-radius: 999px;
  background: var(--petrol); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .35s var(--weich), transform .35s var(--weich);
}
.paket--aktiv .paket__passt { opacity: 1; transform: none; }
.paket__name { font-size: 1.25rem; }
.paket__umfang { margin-top: 4px; color: var(--text-leise); font-weight: 600; }
.paket__speicher { margin-top: 2px; color: var(--text-leise); font-size: .95rem; }
.paket__betrag { display: flex; flex-direction: column; align-items: center; margin-top: 18px; min-height: 5.2rem; justify-content: flex-end; }
.paket__zahl { font-size: clamp(2.4rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paket__alt { font-size: 1rem; font-weight: 700; color: var(--text-leise); opacity: 0; height: 0; transition: opacity .3s; }
.pakete--verbund .paket__alt { opacity: 1; height: auto; margin-bottom: 4px; }
.paket__zeit { margin-top: 6px; font-weight: 700; color: var(--text-leise); }

.inklusive {
  max-width: 1000px; margin: 22px auto 0; padding: 40px 44px; border-radius: 30px; background: #fff; text-align: center;
  box-shadow: 0 40px 90px -50px rgba(16, 48, 63, .45);
}
.inklusive__kopf { display: grid; justify-items: center; gap: 12px; }
.inklusive__geschenk { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e9f7ee; color: #1E7443; font-weight: 700; }
.inklusive .haken { grid-template-columns: 1fr 1fr; column-gap: 32px; text-align: left; margin: 28px 0 24px; }
.inklusive__klein { font-size: .88rem; color: var(--text-leise); max-width: 42em; margin: 0 auto 24px; }
.inklusive__hinweis { margin-top: 12px; font-size: .9rem; color: var(--text-leise); }
.pakete .einblenden:nth-child(2) { transition-delay: .08s; }
.pakete .einblenden:nth-child(3) { transition-delay: .16s; }
.pakete .einblenden:nth-child(4) { transition-delay: .24s; }

.fragen__liste { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.fragen details { border-radius: 18px; background: #fff; border: 1px solid var(--rand); }
.fragen summary { cursor: pointer; list-style: none; padding: 22px 60px 22px 24px; font-weight: 700; font-size: 1.08rem; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 24px; top: 50%; translate: 0 -50%; font-size: 1.5rem; color: var(--petrol); transition: rotate .3s var(--weich); }
.fragen details[open] summary::after { rotate: 45deg; }
.fragen details p { padding: 0 24px 22px; color: var(--text-leise); }

.demo {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start;
  background: linear-gradient(160deg, var(--petrol), var(--petrol-tief)); color: #fff;
}
.demo .augenbraue { color: #ffd98f; }
.demo h2 { margin-bottom: 18px; }
.demo__text p:not(.augenbraue) { color: rgba(255, 255, 255, .85); font-size: 1.12rem; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 32px; border-radius: 26px; background: #fff; color: var(--text); }
.feld { display: grid; gap: 6px; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-weight: 700; font-size: .92rem; }
.feld label span { font-weight: 500; color: var(--text-leise); }
.feld input, .feld textarea {
  font: inherit; font-weight: 500; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--rand); background: var(--grund); color: var(--text);
  transition: border-color .2s, background .2s;
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--petrol); background: #fff; }
.feld--falle { position: absolute; left: -9999px; }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--text-leise); }
.zustimmung input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--petrol); }
.formular__meldung { min-height: 1.4em; font-weight: 700; }
.formular__meldung.ok { color: #1E7443; }
.formular__meldung.fehler { color: #B03A32; }

.fuss { background: #0b1d26; color: rgba(255, 255, 255, .7); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 50px 20px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.fuss nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.fuss a { color: #fff; }
.fuss__klein { font-size: .8rem; opacity: .7; }
.marke--fuss { color: #fff; }

/* ---------- Einblenden beim Scrollen ---------- */
.js .einblenden { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .8s var(--weich), transform .9s var(--weich); }
.js .einblenden.sichtbar { opacity: 1; transform: none; }
.kacheln .einblenden:nth-child(2), .schritte__liste .einblenden:nth-child(2) { transition-delay: .08s; }
.kacheln .einblenden:nth-child(3), .schritte__liste .einblenden:nth-child(3) { transition-delay: .16s; }
.kacheln .einblenden:nth-child(5) { transition-delay: .08s; }
.kacheln .einblenden:nth-child(6) { transition-delay: .16s; }
.kacheln .einblenden:nth-child(7) { transition-delay: .24s; }
.kacheln .einblenden:nth-child(8) { transition-delay: .32s; }
.karten .einblenden:nth-child(3n+2) { transition-delay: .08s; }
.karten .einblenden:nth-child(3n) { transition-delay: .16s; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1200px) and (min-width: 1001px) { .menue { gap: 18px; } .menue a { font-size: .9rem; } }
@media (max-width: 1100px) and (min-width: 1001px) { .menue { gap: 14px; } }
/* Menü: ab hier als ausklappbare Liste (zehn Einträge passen nicht mehr in eine Zeile) */
@media (max-width: 1000px) {
  .menue {
    position: fixed; inset: var(--kopf-hoehe) 0 auto; flex-direction: column; gap: 0; padding: 10px 20px 24px;
    background: rgba(16, 48, 63, .97); backdrop-filter: blur(18px);
    transform: translateY(-120%); transition: transform .35s var(--weich);
  }
  .menue { max-height: calc(100vh - var(--kopf-hoehe)); max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto; overscroll-behavior: contain; }
  .menue a { padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 1.05rem; }
  .menue a.knopf { margin-top: 14px; border: 0; }
  .menue--offen { transform: none; }
  @media (max-height: 720px) { .menue a { padding: 10px 0; } .menue a.knopf { margin-top: 10px; } }
  .menue-knopf { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; border: 0; background: none; cursor: pointer; }
  .menue-knopf span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--weich); }
  .menue-knopf[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 960px) {
  .held { grid-template-columns: 1fr; text-align: center; padding-top: calc(var(--kopf-hoehe) + 30px); }
  .held h1, .held__unterzeile { margin-inline: auto; }
  .held__logo { margin-inline: auto; }
  .held__aktionen, .laeden { justify-content: center; }
  .held__geraet .geraet { width: min(300px, 66vw); }
  .schwebend--1 { left: -18%; }
  .schwebend--2 { right: -16%; }

  /* Handy/Tablet: Gerät oben angeheftet (eigene, deckende Fläche),
     die Texte laufen darunter durch. Beide liegen in derselben Grid-Zelle,
     damit das Angeheftete bis zum Ende des Abschnitts mitläuft. */
  .geschichte { grid-template-columns: 1fr; gap: 0; }
  .geschichte__buehne {
    grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: var(--kopf-hoehe); z-index: 2;
    height: 56svh; background: linear-gradient(180deg, var(--grund) 88%, rgba(244, 246, 248, 0));
  }
  .geschichte__geraet { position: relative; top: auto; height: 100%; padding-top: 14px; align-items: flex-start; }
  .geschichte__geraet .geraet { width: auto; height: calc(100% - 40px); max-width: 60vw; }
  .schiene { height: 70%; }
  .geschichte__kapitel { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding-top: 56svh; }
  .kapitel { min-height: 58svh; justify-content: center; padding: 3svh 4px 6svh; opacity: .45; }
  .kapitel h3 { font-size: clamp(1.7rem, 7vw, 2.3rem); }

  .team, .demo, .gottesdienst { grid-template-columns: 1fr; gap: 40px; }
  .gd__text { order: -1; }
  .gd-bestaetigt { right: -4%; }
  .vertrauen ul { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .vertrauen li + li { border-left: 0; }
  .vertrauen li:last-child { grid-column: 1 / -1; }
  .zaehler { left: 4%; bottom: -24px; }
  .schritte__liste, .presse { grid-template-columns: 1fr; }

  /* Urkunden: Fenster oben angeheftet, Texte laufen darunter durch (wie bei den Konfi-Funktionen). */
  .werkstatt { grid-template-columns: 1fr; gap: 0; }
  .werkstatt__buehne {
    grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: var(--kopf-hoehe); z-index: 2;
    background: linear-gradient(180deg, var(--werkstatt-grund) 86%, rgba(13, 39, 52, 0));
  }
  .werkstatt__platz { position: relative; height: auto; padding: 14px 0 26px; gap: 14px; }
  .fenster { width: min(100%, calc((52svh - 60px) * 1.1428)); border-radius: 10px; }
  .fenster__leiste { height: 24px; gap: 5px; padding: 0 10px; }
  .fenster__leiste i { width: 8px; height: 8px; }
  .fenster__leiste span { font-size: .62rem; padding: 1px 10px; transform: translateX(-16px); }
  .werkstatt__schritte { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding-top: 44svh; }
  .schritt { min-height: 46svh; justify-content: flex-start; padding: 4svh 4px 6svh; opacity: .4; margin-inline: auto; text-align: center; }
  .schritt h3 { font-size: clamp(1.6rem, 6.6vw, 2.2rem); margin-bottom: 12px; }
  .schritt p:not(.schritt__nummer) { font-size: 1.05rem; }
  .faecher { --abstand: 58%; aspect-ratio: 1000 / 720; }
  .faecher__blatt { width: 40%; }
  .fakten { grid-template-columns: repeat(2, 1fr); }

  /* Bibel: Handy oben angeheftet, Texte laufen darunter durch (wie bei den Urkunden). */
  .lesepult { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .lesepult__buehne {
    grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: var(--kopf-hoehe); z-index: 2;
    background: linear-gradient(180deg, var(--papier) calc(100% - 14px), rgba(248, 243, 234, 0));
  }
  /* Höhe der Bühne = 56svh: Handy + 86 px für Abstände und Leiste. */
  .lesepult__platz { position: relative; height: auto; padding: 12px 0 24px; gap: 12px; }
  .geraet--film { width: auto; height: calc(56svh - 86px); max-width: 64vw; }
  .notiz { display: none; }
  .lesepult__schritte { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding-top: 57svh; }
  .lese-schritt { min-height: 50svh; justify-content: flex-start; align-items: center; padding: 4svh 4px 6svh; opacity: .4; margin-inline: auto; text-align: center; }
  .lese-schritt h3 { font-size: clamp(1.6rem, 6.6vw, 2.2rem); margin-bottom: 12px; }
  .lese-schritt p:not(.lese-schritt__nummer) { font-size: 1.05rem; }
  .vergleich { margin-top: 70px; }

  /* Briefe auf dem Tablet: Browserfenster 16:10, so hoch wie das Fenster der Urkunden. */
  .fenster--briefe { width: min(100%, calc((52svh - 84px) * 1.6)); }
  .pult__handy { display: none; }
  .post { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
  .post__text { padding-bottom: 0; }
  /* Einspaltig: Die Schritte beginnen erst unter der Bühne (sie ist höchstens
     52svh + 2 px hoch), der Brief gleitet einen kürzeren Weg (weniger Leerraum). */
  .werkstatt--briefe .werkstatt__schritte { padding-top: calc(52svh + 8px); }
  .kuvert { --weg: 46%; }
  .post__bild { padding-top: min(126px, 21.8%); }

  /* civi: Fenster oben angeheftet (Seite und civi nebeneinander), die
     Schritte laufen darunter durch. Höhe der Bühne: Fenster + 92 px. */
  .civi { padding-top: 84px; }
  .werkstatt--civi { margin-top: 40px; }
  .werkstatt--civi .werkstatt__platz { padding: 14px 0 20px; }
  /* Deckend bis auf einen schmalen Rand: Die Schritte laufen unsichtbar unter Fenster und Punkten durch. */
  .werkstatt--civi .werkstatt__buehne { background: linear-gradient(180deg, var(--werkstatt-grund) calc(100% - 14px), rgba(242, 247, 250, 0)); }
  .fenster--civi { width: 100%; height: max(300px, calc(54svh - 80px)); border-radius: 14px; }
  .werkstatt--civi .werkstatt__schritte { padding-top: calc(max(300px, calc(54svh - 80px)) + 96px); }
  .probe { margin-top: 90px; }
  .probe__flaeche { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 640px; }
  /* Die Fragen als Reihe zum Wischen über dem Fenster – so bleiben Frage und Antwort zusammen im Blick. */
  .probe__fragen {
    display: flex; gap: 10px; margin: 0 -20px; padding: 4px 20px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .probe__fragen::-webkit-scrollbar { display: none; }
  .probe__frage { flex: none; width: min(280px, 76vw); scroll-snap-align: start; scroll-margin-left: 20px; }
  .probe__frage:hover { transform: none; }
  /* Kein Scrollen im Scrollen auf Touch-Geräten: Das Fenster wächst mit dem
     Gespräch, gewischt wird nur die Seite (sonst bliebe sie im Verlauf hängen). */
  .cv-panel--probe { height: auto; }
  .cv-panel--probe .cv-verlauf { overflow: visible; min-height: 360px; }
  .regeln { margin-top: 90px; }
}
/* Auch große Tablets (Finger statt Maus): kein Scrollen im Scrollen bei „Probiert es aus“. */
@media (pointer: coarse) {
  .cv-panel--probe { height: auto; }
  .cv-panel--probe .cv-verlauf { overflow: visible; min-height: 360px; }
}
@media (max-width: 1060px) and (min-width: 761px) {
  .pakete { grid-template-columns: repeat(2, 1fr); max-width: 720px; gap: 26px 18px; }
}
@media (max-width: 760px) {
  .formular { grid-template-columns: 1fr; padding: 24px 20px; }
  .gottesdienst, .anpassen, .praxis, .sicherheit, .schritte, .preis, .fragen, .demo, .team { padding-block: 84px; }
  .urkunden { padding: 84px 0 90px; }
  .faecher { --abstand: 40%; aspect-ratio: 1000 / 700; }
  .faecher__blatt { width: 37%; }
  .fakten b { font-size: 1.7rem; }
  .karten { grid-template-columns: 1fr; }
  .gd-bestaetigt { right: 0; left: 8%; }
  .rechner { padding: 24px 20px 22px; }
  .rechner__kopf { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pakete { grid-template-columns: 1fr; gap: 26px; }
  .paket { padding: 30px 22px 24px; }
  .js .pakete--gewaehlt .paket.sichtbar.paket--aktiv { transform: none; }
  .inklusive { padding: 32px 22px; }
  .inklusive .haken { grid-template-columns: 1fr; }
  .bibel { padding: 84px 0 90px; }
  .lesekarte__wahl button { min-height: 38px; padding: 0 13px; font-size: .85rem; }
  .lesekarte__wahl--uebersetzung { padding: 14px 12px 0; }
  .lesekarte__seite { padding: 22px 20px 26px; }
  .lesekarte__kapitel { font-size: 1.7rem; }
  .lesekarte__text { font-size: 1.06rem; line-height: 1.7; }
  .lesekarte__fuss { justify-content: center; padding: 12px 12px 14px; }
  .bibel__versprechen { padding: 20px 20px 20px 60px; }
  .bibel__versprechen::before { left: 18px; }
  .briefe { padding: 84px 0 90px; }
  /* Briefe auf dem Handy: Das Fenster wird zum Handy mit Aufnahmen vom Handy.
     Rand und Seitenverhältnis so, dass die Aufnahme (390 × 844) genau hineinpasst.
     Der Rand hängt an der Höhe – Prozent beim padding bezögen sich auf die
     Breite der ganzen Bühne. */
  .fenster--briefe {
    --h: calc(52svh - 60px);
    width: auto; height: var(--h); aspect-ratio: 479 / 1000; padding: calc(var(--h) * .0153);
    border-radius: 13% / 6%; background: linear-gradient(145deg, #1c3542, #0b1d26 60%);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
  }
  .fenster--briefe .fenster__leiste { display: none; }
  .fenster--briefe .fenster__bild { aspect-ratio: auto; height: 100%; border-radius: 10.5% / 4.9%; background: #f4f6f8; }
  /* Nahaufnahme: Das Kuvert ragt rechts aus dem Bild, das Fenster bleibt groß genug zum Lesen. */
  .post__bild { padding-top: 33vw; }
  .kuvert { width: 150vw; margin: 0; }
  .fakten--briefe { margin-top: 70px; }
  .briefe__versprechen { padding: 20px 20px 20px 60px; }
  .briefe__versprechen::before { left: 18px; }

  /* civi auf dem Handy wie in der Web-App: civi ist ein Blatt über die ganze
     Höhe; nach „Zeig es mir“ klappt es zur Begleiter-Leiste zusammen, und die
     Seite mit dem Ring kommt zum Vorschein. Rahmen wie ein Handy. */
  .civi { padding: 76px 0 90px; }
  .civi-held { width: 104px; height: 104px; margin-bottom: 24px; }
  .fragenband li { padding: 10px 14px; font-size: .92rem; }
  .fenster--civi { width: min(100%, 440px); margin: 0 auto; border: 7px solid #13303d; border-radius: 30px; background: #F5F7FA; }
  .fenster--civi .fenster__leiste { display: none; }
  .cv-bild { display: block; border-radius: 23px; }
  .cv-seite { height: 100%; padding: 0; }
  .cv-seite > :not(.cv-seite__leiste) { margin-left: 14px; margin-right: 14px; }
  .cv-seite__leiste {
    display: flex; align-items: center; gap: 9px; height: 50px; margin-bottom: 14px; padding: 0 12px; color: var(--cv-text-2);
    background: #fff; border-bottom: 1px solid #E6EAF0; font-size: 15px;
  }
  .cv-seite__menue { display: grid; justify-items: center; font-size: 9px; font-weight: 700; line-height: 1; color: var(--cv-text); }
  .cv-seite__menue .cv-i { width: 20px; height: 20px; }
  .cv-seite__leiste b { margin-right: auto; font-weight: 800; color: var(--cv-text); }
  .cv-kachel--weich { width: 28px; height: 28px; border-radius: 8px; background: var(--b-hell); color: var(--b); }
  .cv-seite__leiste .cv-figur { width: 26px; height: 26px; }
  .cv-seite__leiste > .cv-i { width: 20px; height: 20px; }
  .cv-seite__titel { font-size: 22px; }
  .cv-seite__knoepfe { margin: 30px 14px 16px; }
  .cv-ziel { display: flex; width: 100%; }
  .cv-hier { left: -4px; top: auto; bottom: calc(100% + 10px); transform: translate3d(0, 8px, 0) scale(.9); transform-origin: 20px 100%; }
  .cv-ziel.ist-ziel .cv-hier { transform: none; }
  .werkstatt--civi .cv-panel { position: absolute; inset: 0; border-left: 0; font-size: 13.5px; transition: transform .55s var(--weich); }
  .werkstatt--civi .cv-ort, .werkstatt--civi .cv-vorschlaege { display: none; }
  .werkstatt--civi .cv-kopf { padding: 10px 10px 6px 12px; }
  .werkstatt--civi .cv-kopf > .cv-figur { width: 34px; height: 34px; }
  .werkstatt--civi .cv-kopf__titel b { font-size: 16px; }
  .werkstatt--civi .cv-verlauf { padding: 6px 12px 12px; gap: 14px; }
  .werkstatt--civi .cv-b, .werkstatt--civi .cv-frage__blase { font-size: 13.5px; }
  .werkstatt--civi .cv-eingabe { margin: 0 10px; }
  .werkstatt--civi .cv-eingabe__feld { min-height: 44px; padding: 11px 48px 10px 12px; font-size: 14px; }
  .werkstatt--civi .cv-senden { width: 32px; height: 32px; right: 6px; bottom: 6px; }
  .werkstatt--civi .cv-fuss { margin: 5px 10px 9px; font-size: 10.5px; }
  .cv-bild.ist-gezeigt .cv-panel { transform: translate3d(0, 104%, 0); }
  .cv-leiste {
    position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 5px;
    padding: 5px 5px 5px 6px; border-radius: 16px; color: #fff; background: var(--cv-dunkel); box-shadow: 0 12px 32px rgba(16, 24, 40, .25);
    transform: translate3d(0, 150%, 0); transition: transform .5s var(--weich);
  }
  .cv-bild.ist-gezeigt .cv-leiste { transform: none; transition-delay: .25s; }
  .cv-leiste > .cv-figur { width: 34px; height: 34px; padding: 3px; background: #fff; border-radius: 50%; }
  .cv-leiste__text { display: grid; flex: 1 1 auto; min-width: 0; padding: 2px 4px; }
  .cv-leiste__text small { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #BFE0EC; }
  .cv-leiste__text span { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cv-leiste__rund { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
  .cv-leiste__rund--aus { opacity: .35; }
  .cv-leiste .cv-i { width: 17px; height: 17px; stroke-width: 2.2; }
  .probe { padding: 0 20px; }
  .cv-panel--probe { border-radius: 20px; }
  .regeln { padding: 32px 22px 34px; border-radius: 24px; }
  .regeln__spalten { grid-template-columns: 1fr; gap: 26px; margin-top: 26px; }
  .civi__versprechen { padding: 20px 20px 20px 60px; }
  .civi__versprechen::before { left: 18px; }
}
@media (max-width: 380px) {
  .vertrauen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; }
  /* Lange Wörter trennen an den weichen Trennstellen im HTML („Datenschutz-konform“). */
  .vertrauen li { padding: 4px 6px; overflow-wrap: break-word; }
}
@media (max-width: 480px) {
  .einstieg { width: 206px; height: 152px; padding: 14px; }
  .einstieg b { font-size: 17.5px; }
  .einstieg span { font-size: 13.5px; }
  .einstiege__reihe--zwei { transform: translate3d(calc(-50% + 110px + (var(--p) - .5) * 340px), 0, 0); }
  .fragenband__reihe--zwei { transform: translate3d(calc(-50% + 120px + (var(--p) - .5) * 320px), 0, 0); }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .held, .geschichte, .team { --p: 0 !important; }
  .faecher, .kuvert { --p: 1 !important; }
  .held__text { transform: none; opacity: 1; }
  .held__schein { transform: none; }
  .geschichte__geraet .geraet, .tablet, .zaehler, .schwebend { transform: none !important; }
  .js .einblenden { opacity: 1; transform: none; }
  .einstiege, .fragenband { --p: .5 !important; }
  /* civi: Figur steht still und ist gleich wach, kein Glanz, kein Puls – nur der ruhige Ring. */
  .civi-held__schein, .cv-glanz i { animation: none !important; }
  .js .civi-held .cv-figur { opacity: 1; transform: none; }
  .js .civi-held .cv-figur__bogen path { stroke-dashoffset: 0; }
  .cv-verlauf { scroll-behavior: auto; }
}
html:not(.js) .faecher { --p: 1; }