/* =========================================================
   VORLAGE — der gemeinsame Bau aller neun Karten

   Anders als bei den Stilen unter stile/ ist hier alles
   gemeinsam: Aufbau, Masse, Bewegung. Was sich je Karte
   aendert, sind ausschliesslich die Farbtoken oben in
   :root, die Szene im Auftakt und die Inhalte.

   Genau so sind die Vorbilder gebaut, und deshalb wirken
   sie wie eine Familie statt wie neun Einzelstuecke.

   Die Masse sind nicht geschaetzt, sondern an den Vorbildern
   gemessen: 12px Montserrat mit 0.3em Laufweite ueber den
   Namen, Great Vibes 48px fuer die Namen selbst, Cormorant
   Garamond kursiv 18px/1.625 im Fliesstext.
   ========================================================= */

@font-face{font-family:'Great Vibes';src:url('../../assets/fonts/GreatVibes-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../../assets/fonts/CormorantGaramond-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../../assets/fonts/CormorantGaramond-italic-latin.woff2') format('woff2');
  font-weight:300 600;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../../assets/fonts/Montserrat-latin.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap}

:root{
  /* Wird je Karte ueberschrieben. Die Namen sind bewusst die
     der Vorbilder, damit die Zuordnung eindeutig bleibt. */
  --cream:#faf6ec;
  --paper:#f7f2ec;
  --blush:#f8e6e9;
  --sage:#bfd0bf;
  --accent:#d3905a;
  --text:#2c2421;
  --olive:#3d4c2f;
  --gold:#e6c4a2;
  --muted:#746158;

  --schrift-script:'Great Vibes',cursive;
  --schrift-serif:'Cormorant Garamond',Georgia,serif;
  --schrift-sans:'Montserrat',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:var(--schrift-sans);font-size:16px;line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none !important}
.nur-schirmleser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* =========================================================
   AUFTRITT
   Der eine Auftritt, den alle Vorbilder benutzen: zwanzig
   Punkt von unten, achthundert Millisekunden, ease-out.
   Mehr Bewegung gibt es dort nicht - und genau deshalb wirkt
   sie ruhig statt betriebsam.
   ========================================================= */
@keyframes auftritt{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.auftritt{animation:auftritt .8s ease-out both}

/* Der laengere Auftritt: nicht nur Deckung und Weg, sondern auch
   Schaerfe. Etwas, das aus der Unschaerfe kommt, wirkt, als haette
   es sich gesammelt - deshalb tragen ihn die Ueberschriften und
   die Namen, waehrend Kleinkram beim einfachen Auftritt bleibt. */
@keyframes sammeln{
  from{opacity:0;transform:translateY(30px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
/* Eine Linie waechst aus ihrer Mitte, sie blendet nicht ein. */
@keyframes strecken{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
/* Der Stern dreht sich herein und schiesst dabei kurz ueber sein
   Ziel hinaus - das ist der Unterschied zwischen erscheinen und
   gesetzt werden. */
@keyframes sternchen{from{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:none}}
/* Der Schimmer laeuft ueber die Schrift, nicht darunter: das
   Verlaufsbild wird auf die Buchstaben beschnitten. */
@keyframes schimmern{0%,100%{background-position:200% 50%}50%{background-position:0% 50%}}
/* Blueten fallen nie senkrecht. --wehen gibt jedem Blatt eine
   eigene Abdrift, sonst regnet es im Gleichschritt. */
@keyframes fallen{
  0%{transform:translateY(-8vh) translateX(0) rotate(0);opacity:0}
  8%{opacity:var(--klar,.8)}
  92%{opacity:var(--klar,.8)}
  100%{transform:translateY(108vh) translateX(var(--wehen,30px)) rotate(540deg);opacity:0}
}
/* Ziehen statt fallen: fuer Wolken, Funken und Staub. */
@keyframes treiben{
  0%{transform:translate3d(0,0,0) scale(1);opacity:0}
  12%{opacity:var(--klar,.5)}
  88%{opacity:var(--klar,.5)}
  100%{transform:translate3d(var(--wehen,40px),-60vh,0) scale(1.3);opacity:0}
}
/* Die Szene selbst atmet ganz langsam. Das ist der Trick gegen
   die Naht: eine Schleife von fuenf Sekunden faellt auf, wenn
   sonst nichts passiert - unter einer zwanzig Sekunden langen
   Bewegung verschwindet sie. */
@keyframes atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* =========================================================
   UMSCHLAG — der Vorspann

   Ein geschlossenes Kuvert mit einem Wachssiegel. Gedrueckt
   wird das Siegel, nicht ein Knopf: deshalb gibt es drei
   Zustaende statt eines Klicks. Das Kuvert gibt beim Druck
   nach, und erst beim Loslassen bricht es auf.

   Der Ring um das Siegel ist die einzige Einladung dazu. Er
   sitzt auf --siegel-oben, weil das Siegel nicht auf jedem
   Kuvert exakt gleich hoch sitzt.
   ========================================================= */
.umschlag{
  position:fixed;inset:0;z-index:50;cursor:pointer;overflow:hidden;
  background:var(--umschlag-grund,#1a1a18);
  --siegel-oben:49%;
  transition:opacity 1s ease .12s,visibility 1s .12s;
}
.umschlag img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--kuvert,1));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
/* Der Ring atmet, solange nichts passiert. Sobald gedrueckt
   wird, faellt er in sich zusammen - das ist die Rueckmeldung,
   die ein Wachssiegel selbst nicht geben kann. */
.umschlag-ring{
  position:absolute;left:50%;top:var(--siegel-oben);
  width:min(46vw,190px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1.5px solid var(--umschlag-ring,rgba(255,255,255,.55));
  border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 6px var(--umschlag-hof,rgba(255,255,255,.07));
  animation:siegelatem 2.8s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .35s;
}
@keyframes siegelatem{
  0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.35}
  50%{transform:translate(-50%,-50%) scale(1.06);opacity:.85}
}
/* Das Licht, das beim Aufbrechen aus dem Siegel kommt. Es
   startet in der Groesse des Siegels und geht ueber den
   ganzen Schirm - deshalb sieht es aus, als kaeme es von dort
   und nicht als waere der Bildschirm hell geworden. */
.umschlag-blitz{
  position:absolute;left:50%;top:var(--siegel-oben);
  width:min(46vw,190px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,var(--umschlag-blitz,rgba(255,246,230,.95)),transparent 70%);
}

.umschlag-satz{
  position:absolute;left:0;right:0;bottom:12vh;z-index:2;text-align:center;padding:0 24px;
}
.umschlag-tippen{
  font-family:var(--schrift-sans);font-size:11px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--umschlag-schrift,#fff);
  text-shadow:var(--umschlag-schatten,0 2px 14px rgba(0,0,0,.55));
  transition:opacity .3s;
}

/* Gedrueckt: das Kuvert gibt nach, der Ring zieht sich zusammen. */
.umschlag[data-druck]{--kuvert:.985}
.umschlag[data-druck] .umschlag-ring{transform:translate(-50%,-50%) scale(.82);opacity:.9;animation:none}

/* Aufgebrochen: das Licht geht auf, das Kuvert weicht zurueck. */
.umschlag[data-weg]{opacity:0;visibility:hidden;pointer-events:none;--kuvert:1.1}
.umschlag[data-weg] .umschlag-ring{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
.umschlag[data-weg] .umschlag-tippen{opacity:0}
.umschlag[data-weg] .umschlag-blitz{animation:aufbrechen .85s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes aufbrechen{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  22%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(9)}
}
html[data-zu],html[data-zu] body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .umschlag-ring{animation:none}
}

/* =========================================================
   SCHALTER OBEN UND UNTEN
   Sprache oben rechts, Ton unten rechts - beide als Pille
   mit weichem Schatten, genau wie in den Vorbildern.
   ========================================================= */
.pille{
  position:fixed;z-index:60;display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  font-family:var(--schrift-sans);font-size:12px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  transition:transform .3s ease;
}
.pille:hover{transform:scale(1.04)}
.pille svg{width:17px;height:17px;flex:none}
.pille--sprache{top:24px;right:24px}
.pille--ton{bottom:24px;right:24px;width:48px;height:48px;padding:0;justify-content:center}
.pille--ton svg{width:20px;height:20px}

/* =========================================================
   AUFTAKT — die Szene
   Vollbild, bewegt, Schrift mittendrin. Das ist der Kern:
   kein Bild mit Text darauf, sondern ein Ort, in dem der
   Text steht.
   ========================================================= */
.auftakt{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.auftakt-szene{position:absolute;inset:0;width:100%;height:100%}
.auftakt-szene video,.auftakt-szene img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Der Schleier der Vorbilder ist sehr zurueckhaltend - er
   soll die Szene nicht daempfen, sondern der Schrift nur so
   viel Grund geben, dass sie steht. */
.auftakt-schleier{position:absolute;inset:0;background:var(--auftakt-schleier,rgba(250,246,236,.2))}

.auftakt-satz{position:relative;z-index:10;text-align:center;padding:0 24px;margin-bottom:12vh}

/* Der Auftakt kommt in fuenf Schritten, nicht in einem. Die
   Reihenfolge ist die Aussage: erst die Ankuendigung, dann die
   Namen, dann der Schmuck, zuletzt der Termin. Wer alles
   gleichzeitig einblendet, sagt nichts zuerst. */
.auftakt .auftakt-ueber{animation:auftritt .9s ease-out .15s both}
.auftakt .auftakt-namen{animation:sammeln 1.2s cubic-bezier(.25,.46,.45,.94) .35s both}
.auftakt .auftakt-teiler i{
  transform-origin:center;
  animation:strecken .8s cubic-bezier(.25,.46,.45,.94) .95s both;
}
.auftakt .auftakt-teiler b{animation:sternchen .6s cubic-bezier(.34,1.56,.64,1) 1.05s both}
.auftakt .auftakt-datum{animation:auftritt .9s ease-out 1.25s both}
.auftakt-unten{animation:auftritt 1s ease-out 1.7s both}

/* Der Schimmer laeuft nur dort, wo die Namen aus Gold sind.
   Auf dunkler Schrift waere er ein Fehler im Bild. */
.auftakt-namen--schimmer{
  background:linear-gradient(100deg,
    var(--auftakt-namen,#fff) 20%,
    var(--auftakt-glanz,rgba(255,255,255,.95)) 42%,
    var(--auftakt-namen,#fff) 62%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sammeln 1.2s cubic-bezier(.25,.46,.45,.94) .35s both,
            schimmern 5s ease-in-out 1.8s infinite;
}

/* Die Szene atmet und zieht beim Scrollen nach. --weg kommt aus
   dem Skript und ist der Anteil, um den der Auftakt schon
   hinausgescrollt ist. */
.auftakt-szene video,.auftakt-szene img{
  animation:atmen 22s ease-in-out infinite;
}
.auftakt-szene{
  transform:translateY(calc(var(--weg,0) * 14vh)) scale(calc(1 + var(--weg,0) * .06));
  will-change:transform;
}
.auftakt-satz,.auftakt-unten{
  opacity:calc(1 - var(--weg,0) * 1.5);
}

/* Was ueber der Szene treibt: Blueten, Funken, Wolken. Erzeugt
   vom Skript, weil Zahl und Streuung vom Schirm abhaengen. */
.flug{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.flug i{position:absolute;display:block;will-change:transform}
/* Ausserhalb des Bildes wird nicht gerechnet. Zwei Dutzend
   laufende Ablaeufe kosten auf einem Telefon spuerbar Strom,
   und zu sehen sind sie dann ohnehin nicht. */
.flug[data-ruht] i,.auftakt[data-ruht] .auftakt-szene video{animation-play-state:paused}
.flug i.blatt{
  width:var(--gross,11px);height:calc(var(--gross,11px) * .74);
  background:var(--ton,#f6cad6);
  border-radius:60% 20% 60% 20%/70% 30% 70% 30%;
  animation:fallen var(--dauer,11s) linear var(--start,0s) infinite;
}
.flug i.korn{
  width:var(--gross,4px);height:var(--gross,4px);border-radius:50%;
  background:var(--ton,#ffe9b8);
  box-shadow:0 0 calc(var(--gross,4px) * 2) calc(var(--gross,4px) * .5) var(--ton,#ffe9b8);
  animation:treiben var(--dauer,14s) linear var(--start,0s) infinite;
}
.flug i.dunst{
  width:var(--gross,120px);height:calc(var(--gross,120px) * .5);border-radius:50%;
  background:radial-gradient(closest-side,var(--ton,rgba(255,255,255,.5)),transparent 75%);
  animation:treiben var(--dauer,26s) linear var(--start,0s) infinite;
}
.auftakt-ueber{
  font-family:var(--schrift-sans);font-size:12px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--auftakt-schrift,var(--olive));margin-bottom:12px;
  text-shadow:var(--auftakt-schatten,none);
}
.auftakt-namen{
  font-family:var(--schrift-script);font-weight:400;
  font-size:48px;line-height:1;
  color:var(--auftakt-namen,var(--olive));margin-bottom:8px;
  text-shadow:var(--auftakt-schatten,none);
}
.auftakt-namen .und{margin:0 .22em;color:var(--auftakt-und,inherit)}
/* Lange Namenspaare passen nicht in eine Zeile. Das Vorbild
   stapelt sie dann uebereinander, mit dem Und dazwischen -
   kleiner setzen waere die schlechtere Loesung, weil die Namen
   das Groesste auf der Seite bleiben muessen. */
.auftakt-namen--gestapelt{line-height:1.04}
.auftakt-namen--gestapelt .und{display:block;margin:.02em 0;font-size:.78em}
.auftakt-teiler{display:flex;align-items:center;justify-content:center;gap:16px;margin:5px 0}
.auftakt-teiler i{display:block;height:1px;width:48px;background:var(--auftakt-linie,var(--olive))}
.auftakt-teiler b{
  font-family:var(--schrift-sans);font-weight:400;font-size:18px;line-height:1;
  color:var(--auftakt-stern,#f59e0b);filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.auftakt-datum{
  font-family:var(--schrift-sans);font-size:12px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--auftakt-schrift,var(--olive));
  text-shadow:var(--auftakt-schatten,none);
}
/* Der Ruf steht am unteren Rand, nicht am Ende des Flusses -
   sonst schiebt er den Satz nach oben aus der Bildmitte. */
.auftakt-unten{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);
  z-index:10;text-align:center;
}
.auftakt-ruf{
  font-family:var(--schrift-sans);font-size:12px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--auftakt-ruf,var(--muted));transition:color .3s;
  text-shadow:var(--auftakt-schatten,none);
}
.auftakt-ruf:hover{color:var(--auftakt-namen,var(--olive))}
.auftakt-pfeil{margin-top:16px;display:flex;justify-content:center;color:var(--auftakt-ruf,var(--muted))}
.auftakt-pfeil svg{width:22px;height:22px;animation:sinken 2.4s ease-in-out infinite}
@keyframes sinken{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}

@media (min-width:768px){
  .auftakt-namen{font-size:60px}
  .auftakt-ueber,.auftakt-datum{font-size:14px}
  .auftakt-teiler{margin:32px 0}
  .auftakt-teiler i{width:80px}
}
@media (min-width:1024px){.auftakt-namen{font-size:72px}}

/* =========================================================
   ABSCHNITT — der gemeinsame Rahmen
   ========================================================= */
.abschnitt{padding:64px 0}
@media (min-width:768px){.abschnitt{padding:128px 0}}
.abschnitt--creme{background:var(--cream)}
.abschnitt--papier{background:var(--paper)}
.abschnitt--weiss{background:#fff}
.abschnitt--oliv{background:var(--olive);color:#fff}

.huelle{width:100%;max-width:896px;margin:0 auto;padding:0 16px}
.huelle--eng{max-width:640px}
.huelle--weit{max-width:1024px}

.kopf{text-align:center;margin-bottom:64px}
.kopf.auftritt h2{animation:sammeln 1.2s cubic-bezier(.25,.46,.45,.94) .1s both}
.kopf.auftritt .kopf-ueber{animation:auftritt .9s ease-out both}
.kopf.auftritt .zierlinie i{transform-origin:center;
  animation:strecken .8s cubic-bezier(.25,.46,.45,.94) .55s both}
.kopf.auftritt .zierlinie svg{animation:sternchen .6s cubic-bezier(.34,1.56,.64,1) .65s both}
.kopf.auftritt .kopf-unter{animation:auftritt .9s ease-out .8s both}
/* Die Zeile ueber der Ueberschrift steht in den Vorbildern in
   der Schreibschrift, nicht in Versalien - das ist der Grund,
   warum die Seiten weich wirken und nicht wie ein Prospekt. */
.kopf-ueber{
  font-family:var(--schrift-script);font-size:24px;line-height:1.3;
  color:var(--accent);margin-bottom:16px;
}
.kopf h2{
  font-family:var(--schrift-script);font-weight:400;
  font-size:48px;line-height:1;color:var(--olive);margin-bottom:24px;
}
.abschnitt--oliv .kopf h2{color:var(--gold)}
.abschnitt--oliv .kopf-unter{color:rgba(255,255,255,.7)}
.kopf-unter{font-family:var(--schrift-sans);font-size:16px;letter-spacing:.025em;color:var(--muted)}
@media (min-width:768px){.kopf h2{font-size:60px}}

.zierlinie{display:flex;align-items:center;justify-content:center;gap:16px}
.zierlinie i{display:block;height:1px;width:64px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.zierlinie svg{width:20px;height:20px;color:var(--accent)}

/* =========================================================
   GESCHICHTE — die Zeitleiste
   Auf dem Telefon eine Achse links, auf dem Schreibtisch
   eine in der Mitte mit abwechselnden Seiten. Genau so
   loesen es die Vorbilder.
   ========================================================= */
.geschichte{position:relative;padding-bottom:48px}
.geschichte-achse{
  position:absolute;left:16px;top:0;bottom:10px;width:1px;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent) 35%,transparent),transparent);
}
.stationen{display:flex;flex-direction:column;gap:48px}
.station{position:relative;display:flex;align-items:flex-start;gap:32px}
.station-punkt{
  position:absolute;left:16px;top:8px;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--accent);
}
.station-feld{flex:1;margin-left:48px}
.station-jahr{font-family:var(--schrift-script);font-size:30px;line-height:1.2;color:var(--accent)}
.station h3{font-family:var(--schrift-script);font-weight:400;font-size:30px;line-height:1.2;
  color:var(--text);margin:8px 0 12px}
.station p{
  font-family:var(--schrift-serif);font-style:italic;font-size:18px;line-height:1.625;
  color:color-mix(in srgb,var(--text) 70%,transparent);
}
@media (min-width:768px){
  .geschichte-achse{left:50%}
  .station-punkt{left:50%}
  .station-feld{margin-left:0}
  .station:nth-child(odd) .station-feld{text-align:right;padding-right:48px}
  .station:nth-child(even){flex-direction:row-reverse}
  .station:nth-child(even) .station-feld{padding-left:48px}
}

/* =========================================================
   COUNTDOWN
   ========================================================= */
.uhr{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:520px;margin:0 auto}
.uhr-teil{text-align:center}
.uhr-teil b{
  display:block;font-family:var(--schrift-script);font-weight:400;
  font-size:44px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
}
/* Eine Ziffer, die sich lautlos austauscht, sieht man nicht
   wechseln. Ein kurzer Sprung macht aus der Zahl eine Uhr. */
.uhr-teil b.rollt{animation:ziffer .5s cubic-bezier(.34,1.4,.64,1)}
@keyframes ziffer{from{opacity:.15;transform:translateY(-.14em) scale(.9)}to{opacity:1;transform:none}}
.abschnitt--oliv .uhr-teil b{color:var(--gold)}
.uhr-teil i{
  display:block;margin-top:10px;font-style:normal;font-family:var(--schrift-sans);
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.abschnitt--oliv .uhr-teil i{color:rgba(255,255,255,.6)}
@media (min-width:768px){.uhr-teil b{font-size:60px}.uhr{gap:24px}}

/* =========================================================
   TAGESPROGRAMM
   ========================================================= */
.programm{position:relative}
.programm-achse{position:absolute;left:24px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.2)}
.programm-liste{display:flex;flex-direction:column;gap:24px}
.programm-punkt{display:flex;align-items:flex-start;gap:16px;padding-left:4px}
.programm-kreis{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--olive);border:2px solid rgba(255,255,255,.3);
  display:grid;place-items:center;color:var(--gold);
}
.programm-kreis svg{width:19px;height:19px}
.programm-text{flex:1;padding-top:4px}
.programm-zeile{display:flex;align-items:baseline;gap:12px;margin-bottom:2px}
.programm-zeit{font-family:var(--schrift-sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--gold)}
.programm-text h3{font-family:var(--schrift-script);font-weight:400;font-size:26px;line-height:1.2;color:#fff}
.programm-text p{font-family:var(--schrift-sans);font-size:14px;color:rgba(255,255,255,.6)}

/* =========================================================
   GALERIE — das laufende Band
   Zwei gleiche Haelften nebeneinander, die um genau die
   halbe Breite wandern: dann springt der Uebergang nicht.
   ========================================================= */
.band{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band-lauf{display:flex;gap:16px;width:max-content;animation:wandern 34s linear infinite}
.band:hover .band-lauf{animation-play-state:paused}
@keyframes wandern{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band-bild{width:240px;aspect-ratio:3/4;overflow:hidden;flex:none;background:var(--paper)}
.band-bild img{width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.band-bild{width:300px}}

/* =========================================================
   ANGABEN, KLEIDERORDNUNG, GESCHENKE
   ========================================================= */
.karte{
  background:#fff;padding:32px 24px;text-align:center;
  box-shadow:0 1px 3px rgba(44,36,33,.06),0 12px 34px -22px rgba(44,36,33,.4);
}
.abschnitt--oliv .karte{background:rgba(255,255,255,.06);box-shadow:none;
  border:1px solid rgba(255,255,255,.14)}
.karte + .karte{margin-top:16px}
.karte h3{font-family:var(--schrift-script);font-weight:400;font-size:32px;line-height:1.15;
  color:var(--olive);margin-bottom:8px}
.abschnitt--oliv .karte h3{color:var(--gold)}
.karte .zeit{font-family:var(--schrift-sans);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.karte p{font-family:var(--schrift-serif);font-size:18px;line-height:1.7;
  color:color-mix(in srgb,var(--text) 75%,transparent)}
.abschnitt--oliv .karte p{color:rgba(255,255,255,.75)}
.karte .adresse{font-family:var(--schrift-sans);font-size:13px;line-height:1.9;letter-spacing:.03em;
  color:var(--muted);margin-top:12px}

.tasten{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.taste{
  display:inline-block;font-family:var(--schrift-sans);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--accent);color:var(--accent);
  transition:background .3s,color .3s;
}
.taste:hover{background:var(--accent);color:#fff}
.taste--voll{background:var(--accent);color:#fff}
.taste--voll:hover{background:var(--olive);border-color:var(--olive)}

.farbfelder{display:flex;gap:12px;justify-content:center;margin-top:24px}
.farbfelder i{display:block;width:44px;height:44px;border-radius:50%;background:var(--f);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

.iban{margin-top:20px;padding:18px 20px;background:var(--paper);text-align:center}
.iban b{font-family:var(--schrift-serif);font-size:19px}
.iban .nr{display:block;margin-top:8px;font-family:var(--schrift-sans);font-size:13px;
  letter-spacing:.12em;color:var(--accent)}

/* =========================================================
   RUECKMELDUNG
   ========================================================= */
.formular{display:flex;flex-direction:column;gap:20px;max-width:520px;margin:0 auto;text-align:left}
.feld{display:block}
.feld span{
  display:block;font-family:var(--schrift-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.feld input,.feld select,.feld textarea{
  width:100%;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  padding:13px 14px;font-family:var(--schrift-serif);font-size:17px;line-height:1.5;
  border-radius:0;appearance:none;transition:border-color .3s,box-shadow .3s;
}
.feld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:right 16px center,right 11px center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.wahl{border:0;padding:0;margin:0;display:flex;gap:12px;flex-wrap:wrap}
.wahl label{
  flex:1;min-width:150px;display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:13px 15px;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  font-family:var(--schrift-serif);font-size:17px;transition:border-color .3s,background .3s;
}
.wahl input{appearance:none;width:16px;height:16px;flex:none;border-radius:50%;
  border:1px solid var(--accent);transition:background .25s,box-shadow .25s}
.wahl input:checked{background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.wahl label:has(input:checked){border-color:var(--accent);background:var(--paper)}
.begleiter{display:grid;gap:12px}
.begleiter-zeile{display:grid;gap:12px;padding:16px;background:var(--paper)}
@media (min-width:600px){.begleiter-zeile{grid-template-columns:1fr 1fr auto;align-items:end}}
.weg{font-family:var(--schrift-sans);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#a8503f;padding:12px 0;justify-self:start}
.weg:hover{text-decoration:underline}
.klein{font-family:var(--schrift-sans);font-size:12px;line-height:1.6;color:var(--muted);opacity:.85}

/* =========================================================
   FRAGEN
   ========================================================= */
.fragen{max-width:640px;margin:0 auto;text-align:left}
.fragen details{border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.fragen details:first-child{border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.fragen summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;list-style:none;cursor:pointer;
  font-family:var(--schrift-serif);font-size:19px;transition:color .3s;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--accent)}
.fragen summary::after{content:'';flex:none;width:9px;height:9px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.fragen details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.fragen-antwort{display:grid;grid-template-rows:1fr;overflow:hidden;
  transition:grid-template-rows .4s cubic-bezier(.2,.7,.3,1)}
.fragen details:not([open]) .fragen-antwort{grid-template-rows:0fr}
.fragen-antwort > *{min-height:0}
.fragen p{padding-bottom:18px;font-family:var(--schrift-serif);font-size:17px;line-height:1.7;
  color:color-mix(in srgb,var(--text) 72%,transparent)}

/* =========================================================
   HAEUSER UND HINWEISE
   ========================================================= */
.raster{display:grid;gap:16px}
@media (min-width:768px){.raster--drei{grid-template-columns:repeat(3,1fr)}
  .raster--zwei{grid-template-columns:repeat(2,1fr)}}
.haus{background:#fff;padding:24px;text-align:center;
  box-shadow:0 1px 3px rgba(44,36,33,.06)}
.haus h4{font-family:var(--schrift-script);font-weight:400;font-size:26px;color:var(--olive);margin-bottom:6px}
.haus .stern{font-family:var(--schrift-sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.haus p{font-family:var(--schrift-serif);font-size:17px;line-height:1.6;color:var(--muted);margin-top:8px}
.merkliste{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.merkliste li{font-family:var(--schrift-sans);font-size:12px;letter-spacing:.08em;
  padding:9px 16px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--muted)}

/* =========================================================
   FUSS
   ========================================================= */
.fuss{background:var(--olive);color:#fff;text-align:center;padding:64px 24px 48px}
.fuss-namen{font-family:var(--schrift-script);font-size:44px;line-height:1.1;color:var(--gold)}
.fuss-datum{font-family:var(--schrift-sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-top:12px}
.fuss-klein{font-family:var(--schrift-sans);font-size:11px;line-height:1.9;
  color:rgba(255,255,255,.4);margin:32px auto 0;max-width:44ch}
.fuss-marke{font-family:var(--schrift-script);font-size:22px;color:rgba(255,255,255,.5);margin-top:20px}

/* =========================================================
   EINLADUNG — der Zuruf unter dem Auftakt
   Ein Satz in der Kursiven, mehr nicht. Die Vorbilder
   setzen ihn als Ueberschrift; als Fliesstext gelesen
   traegt er besser und schreit den Auftakt nicht nieder.
   ========================================================= */
.einladung{text-align:center}
.einladung-satz{
  font-family:var(--schrift-serif);font-style:italic;
  font-size:23px;line-height:1.55;color:var(--olive);
  max-width:32ch;margin:0 auto 28px;
}
@media (min-width:768px){.einladung-satz{font-size:29px}}
.abschnitt--oliv .einladung-satz{color:var(--gold)}
.einladung .zierlinie{margin-bottom:8px}
.einladung-zweit{
  font-family:var(--schrift-script);font-size:22px;
  color:var(--accent);margin:40px 0 20px;
}

/* =========================================================
   MENUE — die Speisenfolge
   ========================================================= */
.menue{display:grid;gap:44px}
@media (min-width:768px){.menue{grid-template-columns:1fr 1fr;gap:56px 48px}}
.gang{text-align:center}
.gang h3{
  font-family:var(--schrift-sans);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.abschnitt--oliv .gang h3{color:var(--gold)}
.gang ul{display:flex;flex-direction:column;gap:14px}
.gang li{
  font-family:var(--schrift-serif);font-style:italic;
  font-size:18px;line-height:1.5;color:var(--olive);
}
.abschnitt--oliv .gang li{color:rgba(255,255,255,.78)}

/* =========================================================
   VORAB — was schon vor dem Tag stattfindet
   ========================================================= */
.vorabliste{display:flex;flex-direction:column;gap:20px}
.vorab-punkt{
  padding:24px 26px;background:#fff;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
}
.abschnitt--oliv .vorab-punkt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.vorab-punkt h3{
  font-family:var(--schrift-script);font-weight:400;font-size:26px;
  line-height:1.2;color:var(--olive);margin-bottom:8px;
}
.abschnitt--oliv .vorab-punkt h3{color:var(--gold)}
.vorab-punkt p{font-family:var(--schrift-serif);font-size:17px;line-height:1.65;color:var(--muted)}
.abschnitt--oliv .vorab-punkt p{color:rgba(255,255,255,.75)}

/* =========================================================
   ZIERBAND — das schmale Bild zwischen zwei Abschnitten.
   Die Vorbilder setzen dort einen Kerzenleuchter, eine
   Muschel, eine Torte. Es traegt keinen Text und keine
   Aufgabe, es laesst die Seite nur atmen.
   ========================================================= */
.abschnitt--zierband{padding:40px 0;display:flex;justify-content:center}
@media (min-width:768px){.abschnitt--zierband{padding:56px 0}}
.zierbild{width:150px;height:auto;max-width:58vw}
@media (min-width:768px){.zierbild{width:200px}}

/* =========================================================
   PAARBILD — das grosse Bild zum Schluss
   ========================================================= */
.abschnitt--paarbild{padding:0}
.paarbild{position:relative;margin:0}
.paarbild img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover}
.paarbild figcaption{
  position:absolute;left:0;right:0;bottom:36px;text-align:center;
  font-family:var(--schrift-script);font-size:32px;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
@media (min-width:768px){.paarbild figcaption{font-size:44px}}