/* Variante C -- Kapitel-Scroll.
 *
 * Struktur neu, Zutaten wie gehabt: Schriften, Farben und Klecks kommen
 * unveraendert aus ../stil.css bzw. bilder/.
 *
 * Jeder Abschnitt fuellt mindestens einen Bildschirm und fuehrt eine der
 * vier Hochzeitsfarben als --ton. Bewusst min-height statt height: die
 * Galerie, das Kuchenformular und die Zusage sind laenger als ein Bildschirm
 * und muessen wachsen duerfen.
 *
 * Kein Scroll-Snapping. Auf Abschnitten, die hoeher als das Sichtfenster
 * sind, kaempft es gegen den Nutzer -- man scrollt ein Stueck und wird
 * zurueckgezogen.
 *
 * Pflichtteil: die Klassen, die seite.js selbst schreibt (.klein, .flies,
 * .zentriert, .kl-zeile, .thumb, .cta), muessen hier gestaltet sein.
 */

@font-face{font-family:'Hero';src:url('fonts/hero-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Der fette Schnitt traegt allein den Kopf. Auf der Einladung stehen Namen
   und Datum fett und schwarz -- duenn gesetzt verschwinden sie auf dem
   Klecks, der hinter ihnen liegt. Er wird genau zweimal gebraucht und laedt
   daher nicht vorab. */
@font-face{font-family:'Hero';src:url('fonts/hero-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --rand:clamp(1.25rem,6vw,5rem);
  --inhalt:940px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
h1,h2,h3,p,ul{margin:0}
img,iframe,svg{max-width:100%}
body{overflow-x:hidden}

/* --- Fortschrittsbalken ------------------------------------------------- */
/* Reine CSS-Loesung ueber eine Scroll-Timeline. Browser ohne Unterstuetzung
   zeigen den Balken gar nicht -- deshalb steckt er komplett in @supports und
   nicht etwa als leerer Streifen im Layout. */

.fortschritt{display:none}
@supports (animation-timeline: scroll()){
  .fortschritt{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:80;
    transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,var(--gelb),var(--orange),var(--rosa),var(--lila));
    animation:balken linear;animation-timeline:scroll(root block)}
  @keyframes balken{ to{ transform:scaleX(1) } }
}
@media(prefers-reduced-motion:reduce){ .fortschritt{display:none} }

/* --- Sprachumschalter und Ruecksprung ----------------------------------- */

/* Ueber der Menue-Ueberlagerung (z-index 70), nicht darunter: wer die
   deutsche Seite nicht lesen kann, sucht die Sprachwahl genau dann,
   wenn das Menue offen ist. */
.sprachen{position:fixed;top:14px;left:var(--rand);z-index:85;display:flex;gap:6px}
.sprachb{border:1px solid var(--linie);background:rgba(255,255,255,.85);color:var(--lila);
  border-radius:999px;padding:5px 12px;font-size:12px;letter-spacing:.1em;cursor:pointer;
  font-family:inherit;min-height:32px}
.sprachb:hover{background:#fff}
.sprachb.aktiv{background:var(--lila);color:#fff;border-color:var(--lila)}

/* --- Hero --------------------------------------------------------------- */
/* Nachbau der gedruckten Einladung: weisser Grund, schwarze Schrift, der
   Klecks gross dahinter. Er traegt mix-blend-mode:multiply und ist deshalb
   nicht freigestellt -- sein Weiss verschwindet im weissen Grund, so wie
   Farbe auf Papier. */

.hero{min-height:100vh;min-height:100svh;background:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(4rem,10vh,7rem) var(--rand) clamp(3rem,8vh,5rem);
  position:relative;overflow:hidden}
.hero-klecks{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:min(92%,720px);pointer-events:none;z-index:0;line-height:0}
.hero-klecks img{width:100%;height:auto;mix-blend-mode:multiply}
.hero-inner{max-width:var(--inhalt);position:relative;z-index:1}

.kap{font-size:clamp(12px,1.2vw,15px);letter-spacing:.22em;text-transform:uppercase;color:var(--lila)}
.skript{font-family:'Brightwall',cursive;color:var(--lila);line-height:1.15}

/* Auf der Karte steht der ganze Kopf in Schwarz, nicht in Lila. */
.hero-kap{font-size:clamp(15px,1.9vw,21px);letter-spacing:.28em;color:var(--tinte);font-weight:400}
.hero-namen{font-size:clamp(32px,5.6vw,62px);font-weight:700;letter-spacing:.1em;
  color:var(--tinte);margin-top:.55rem}

/* Die beiden Baender sprengen die Inhaltsbreite bewusst bis an den Rand des
   Fensters -- auf der Karte laufen sie ebenfalls durch. */
.hero-band{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(.5rem,1.6vw,1.1rem);
  border-top:clamp(5px,.15vw,11px) solid #fff;border-bottom:clamp(5px,.15vw,11px) solid #fff}
/* Brightwall ragt bei line-height 1.15 oben aus dem Zeilenkasten; der Abstand
   steht in em, damit er der per clamp() variablen Groesse folgt. */
.hero-skript{font-size:clamp(52px,9.5vw,118px);margin-top:.2em;color:var(--tinte)}
.hero-datum{font-size:clamp(22px,3.2vw,38px);letter-spacing:.1em;color:var(--tinte);
  font-weight:700;margin-top:.9rem}
.hero-motto{font-size:clamp(15px,1.9vw,21px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--tinte);font-weight:400;margin-top:.7rem}

#cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:480px;margin:2rem auto 0}
#cd > div{border:1px solid var(--linie);border-radius:0 !important}
@media(max-width:430px){ #cd{grid-template-columns:repeat(2,1fr)} }

.weiter{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);
  color:var(--lila);font-size:22px;opacity:.5;animation:winken 2.4s ease-in-out infinite}
@keyframes winken{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }
@media(prefers-reduced-motion:reduce){ .weiter{animation:none} }

/* --- Kapitel ------------------------------------------------------------ */

.bahn{counter-reset:kap}
.sek{min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(4rem,10vh,7rem) var(--rand);border-top:1px solid var(--linie)}
.sek:nth-of-type(even){background:var(--creme)}
.kapitel{max-width:var(--inhalt);margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:clamp(1.25rem,3vw,2rem)}
.kapitel-mitte{align-items:center;text-align:center}

.kapitel-kopf{display:flex;flex-direction:column;gap:.7rem;
  padding-bottom:clamp(1rem,2.5vw,1.75rem);border-bottom:1px solid var(--linie)}
/* Die Kapitelnummer traegt die Farbe des Abschnitts -- sie ist der einzige
   Ort, an dem der Wechsel wirklich auffaellt. */
.kapitel-kopf::before{counter-increment:kap;content:counter(kap,decimal-leading-zero);
  font-size:clamp(48px,9vw,110px);line-height:.85;color:var(--ton,var(--lila));
  opacity:.28;font-weight:300;letter-spacing:-.02em}
.kapitel-mitte .kapitel-kopf{align-items:center;border-bottom:0;padding-bottom:0}
/* Alle Kapitelueberschriften in der Schreibschrift -- so, wie zuvor nur die
   Zusage ("09 Wir kommen!"). Brightwall ragt bei line-height 1.15 oben aus dem
   Zeilenkasten, darum steht der Ausgleich in em und folgt der clamp-Groesse. */
.sek-titel{font-family:'Brightwall',cursive;font-size:clamp(44px,7vw,84px);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--lila);line-height:1.15;
  /* Ober- und Unterlaengen der Schreibschrift verlassen den Zeilenkasten; ohne
     diesen Ausgleich stossen sie an die Kapitelnummer und an die Zeile darunter. */
  margin:.22em 0 .26em}
.kapitel-kopf .kap{color:var(--grau);letter-spacing:.16em}

.klein{font-size:clamp(15px,1.25vw,17px);color:var(--grau);line-height:1.65}
.flies{max-width:62ch;color:var(--grau);font-size:clamp(17px,1.45vw,20px)}
.zentriert{text-align:center;margin-left:auto;margin-right:auto}
/* Mittig gesetzter Fliesstext braucht einen ausgeglichenen Umbruch. Sonst
   stehen drei volle Zeilen und darunter haengt ein kurzer Rest -- bei
   linksbuendigem Satz kaum zu sehen, mittig aber sofort. balance verteilt
   die Woerter gleichmaessig auf alle Zeilen. Zusaetzlich stehen im Text
   geschuetzte Leerzeichen, wo der Umbruch Zusammengehoeriges trennen
   wuerde ("rund um", "wir uns"). */
.flies.zentriert{text-wrap:balance}
.gruss{font-size:clamp(38px,6vw,64px)}

/* --- Ablauf ------------------------------------------------------------- */

/* Die Zeitleiste laeuft durchgehend in der Textfarbe. Vorher trug jede
   Station eine eigene Farbe -- das las sich wie eine Gliederung, wo in
   Wahrheit nur die Uhrzeit weiterlaeuft. Einfarbig bleibt der Strich ein
   Strich, und die Abschnittsfarbe steht allein bei der Kapitelnummer. */
.tl{display:grid;grid-template-columns:clamp(62px,8vw,96px) 1fr;max-width:660px}
.tl-zeit{text-align:right;padding:0 clamp(12px,1.8vw,22px) 26px 0;color:var(--tinte);
  font-size:clamp(18px,1.8vw,23px);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.tl-txt{padding:0 0 26px clamp(16px,2vw,24px);position:relative;border-left:2px solid var(--tinte)}
.tl-letzt{border-color:transparent;padding-bottom:0}
.tl-txt .pkt{position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--tinte)}
.tl-was{font-size:clamp(19px,1.8vw,22px);color:var(--tinte)}

/* --- Orte, Wege, Personen, Fragen --------------------------------------- */

.paar{display:grid;gap:clamp(16px,2.5vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.drei{display:grid;gap:clamp(16px,2.5vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

.ort{display:flex;flex-direction:column;gap:.55rem;
  border-top:2px solid var(--ton,var(--lila));padding-top:1rem}
.ort-art{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ton,var(--lila))}
.ort-name{font-size:clamp(20px,2vw,24px);color:var(--tinte);line-height:1.3}

.weg{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--linie);padding-top:1rem}
.weg-titel{font-size:17px;color:var(--lila);letter-spacing:.04em}
.weg-titel .ti{margin-right:4px}

.person{display:flex;flex-direction:column;gap:.3rem;border-top:1px solid var(--linie);padding-top:1rem}
/* Quadratisch beschnitten, damit hoch- und quergeformte Bilder derselben
   Reihe nicht unterschiedlich hoch stehen. height:auto ist Pflicht: das
   height-Attribut im Markup gilt als Praesentationsangabe und schlaegt
   sonst das aspect-ratio -- die Bilder wurden dadurch zu Ellipsen. */
.person-bild{width:clamp(96px,12vw,140px);height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;background:var(--creme);margin-bottom:.5rem}
.person-name{font-size:clamp(20px,2vw,24px);color:var(--lila)}

.fragen{display:flex;flex-direction:column}
.frage{border-top:1px solid var(--linie);padding:1.15rem 0;display:flex;flex-direction:column;gap:.4rem}
.frage:last-child{border-bottom:1px solid var(--linie)}
.frage-titel{font-size:clamp(18px,1.7vw,20px);color:var(--tinte)}
@media(min-width:760px){
  .frage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 2.5rem;align-items:baseline}
}

.hinweis{border-left:3px solid var(--gelb);padding:8px 0 8px 12px;max-width:62ch}
.hinweis .ti{color:var(--orange);margin-right:2px}

/* --- Karte, Routen, Dresscode ------------------------------------------- */

.karten-rahmen{border:1px solid var(--linie);background:#fff;overflow:hidden}
.karten-rahmen iframe{width:100%;aspect-ratio:16/9;min-height:260px;border:0;display:block}
.routen{display:flex;flex-wrap:wrap;gap:10px}

.palette{display:flex;gap:clamp(16px,4vw,44px);justify-content:center;flex-wrap:wrap;margin-top:.75rem}
.farbe{display:flex;flex-direction:column;gap:.6rem;align-items:center}
.farbkreis{width:clamp(58px,9vw,104px);height:clamp(58px,9vw,104px);border-radius:50%;display:block}

/* --- Formulare ---------------------------------------------------------- */
/* Sichtbar umrandete Felder wie auf der Startseite -- ein Formular soll als
   Formular zu erkennen sein; unterstrichene Felder uebersieht man leicht.
   16px Schriftgroesse, sonst zoomt Safari auf dem iPhone ins Feld hinein. */

.formular{max-width:640px;width:100%;display:flex;flex-direction:column;gap:16px}
.feld{display:flex;flex-direction:column;gap:5px;min-width:0}
.feld label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.feld-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.feld-drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr));gap:16px}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:var(--tinte);
  background:#fff;border:1px solid var(--linie);border-radius:8px;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ton,var(--lila))}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--lila) 50%),
    linear-gradient(135deg,var(--lila) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
textarea{resize:vertical}
/* Ankreuzfelder. fieldset traegt von Haus aus Rahmen und Innenabstand --
   beides weg, sonst steht die Gruppe als Kasten zwischen schlichten Feldern.
   Die Haken liegen in einer eigenen Reihe: display:flex direkt auf einem
   fieldset ist in den Browsern unterschiedlich umgesetzt und stellte die
   Kaestchen treppenfoermig untereinander. */
.haken-gruppe{border:0;padding:0;margin:0;min-width:0}
.haken-gruppe legend{padding:0;margin-bottom:.5rem;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau)}
.haken-reihe{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center}
.haken{display:inline-flex;align-items:center;gap:.45rem;font-size:clamp(15px,1.25vw,17px);
  color:var(--tinte);cursor:pointer;min-height:32px}
.haken input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--lila);margin:0;padding:0;
  border-radius:4px}

.feld-knopf{justify-content:flex-end}
.feld-knopf .navb{width:100%;text-align:center;cursor:pointer;padding:11px 16px}

.cta{background:var(--lila);color:#fff;border:0;border-radius:999px;padding:15px 38px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  font-family:inherit;min-height:48px}
.cta:hover{background:var(--lila-hell)}
.cta[disabled]{opacity:.6;cursor:default}
.knopfzeile{margin-top:.35rem}
.fehler{font-size:13px;color:var(--lila);min-height:18px}
.datenschutz-satz{margin-top:6px}

.liste{margin-top:1.5rem}
.liste-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--lila);padding-bottom:6px;flex-wrap:wrap}
.kl-zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--linie);flex-wrap:wrap}

/* --- Galerie ------------------------------------------------------------ */
.upload{display:flex;
  flex-direction:column;gap:12px}
.upload-titel{color:var(--lila);font-size:20px}
.upload-titel .ti{margin-right:4px}
.grid{display:grid;gap:12px}
.g-foto{grid-template-columns:repeat(auto-fit,minmax(min(50% - 8px,200px),1fr))}
/* Vorschaubilder beim Hochladen bleiben quadratisch -- dort geht es um
   Fortschritt, nicht um Bildwirkung. */
.thumb{aspect-ratio:1;object-fit:cover;width:100%;display:block;background:var(--creme)}
.thumb.laedt{opacity:.45}
.thumb.misslungen{opacity:.5;outline:2px dashed var(--orange);outline-offset:-2px}

/* --- Fuss --------------------------------------------------------------- */

footer{background:var(--lila);color:#fff;text-align:center;
  padding:clamp(3rem,7vw,5rem) var(--rand)}
footer .skript{color:#fff;font-size:clamp(34px,5vw,58px)}
.footer-zeile{font-size:14px;opacity:.9;margin-top:.8rem;letter-spacing:.06em}
.footer-recht{font-size:13px;margin-top:1.4rem}
footer a{color:#fff;opacity:.85}

/* --- Navigation als Vollbild-Uebersicht --------------------------------- */
/* Zu den Kapiteln passt keine Leiste. Der runde Knopf oben rechts oeffnet
   eine Uebersicht ueber den ganzen Bildschirm; der Zusage-Knopf schwebt
   darunter und bleibt immer erreichbar. seite.js setzt "offen" auf #navi. */

.navi{position:fixed;inset:0;z-index:70;pointer-events:none}
.navi-knopf{pointer-events:auto;position:fixed;top:12px;right:var(--rand);z-index:2;
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linie);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--lila);
  border-radius:999px;padding:10px 18px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;font-family:inherit;min-height:44px}
.navi-knopf:hover{background:#fff}

.navi-liste{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(.5rem,1.5vh,1rem);
  background:rgba(253,249,245,.97);backdrop-filter:blur(10px);padding:5rem var(--rand)}
.navi.offen .navi-liste{display:flex;pointer-events:auto}

/* In der Uebersicht sind die Punkte grosse Zeilen, kein Pillenband.
   Ausdruecklich auf .navi-liste eingeschraenkt: die Klasse .navb tragen auch
   der Zusage-Knopf, die drei Routenverweise und der Foto-Auswahlknopf. Ohne
   die Einschraenkung erbten die alle die 38px-Menuezeile -- der Zusage-Knopf
   verlor dadurch Flaeche und Farbe und landete als riesiger Schriftzug oben
   links im Bild. */
.navi-liste .navb{font-family:inherit;text-decoration:none;color:var(--tinte);
  cursor:pointer;font-size:clamp(22px,4.5vw,38px);font-weight:300;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.25;background:none;border:0;padding:.15em 0;
  position:relative;transition:color .18s}
.navi-liste .navb:hover{color:var(--lila)}
.navi-liste .navb.aktiv{color:var(--lila)}
.navi-liste .navb.aktiv::after{content:"";position:absolute;left:50%;
  transform:translateX(-50%);bottom:.02em;width:38px;height:2px;background:var(--lila)}

/* Der Zusage-Knopf schwebt unten rechts und bleibt immer erreichbar. */
a.navb-cta{pointer-events:auto;position:fixed;bottom:16px;right:var(--rand);z-index:2;
  background:var(--lila);color:#fff;border:1px solid var(--lila);border-radius:999px;
  padding:12px 26px;font-family:inherit;font-size:12px;font-weight:300;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;line-height:1.2;
  min-height:46px;display:inline-flex;align-items:center;
  box-shadow:0 10px 26px -12px rgba(58,42,46,.55)}
a.navb-cta:hover,a.navb-cta.aktiv{background:var(--lila-hell);border-color:var(--lila-hell);color:#fff}

/* Routenverweise und der Foto-Auswahlknopf tragen ebenfalls .navb, sind aber
   Knoepfe im Inhalt und keine Menuepunkte. */
.upload .navb,.routen .navb{font-family:inherit;font-size:13px;font-weight:300;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--lila);
  border:1px solid var(--linie);border-radius:999px;background:#fff;padding:10px 16px;
  display:inline-block;cursor:pointer;line-height:1.3}
.upload .navb:hover,.routen .navb:hover{background:var(--creme)}

section{scroll-margin-top:0}