/* ═══════════════════════════════════════════════════════════════════
   Alena & Samuel — Fassung 3 (09.09.2026)
   ⭐ FARBWELT BEIGE/GRUEN — Samuel am 09.09., 07:54: „dann geb ich dir noch
   das Farbkonzept durch mit ein paar gruentoenen die wir gerne dabei haetten
   weil es auch das farbkonzept unserer hochzeit ist, beige gruen".
   Die fuenf Werte sind aus seinem Bildschirmfoto ausgelesen, nicht geraten:
   #67763F Oliv · #98A65B Salbei · #C8C6B7 Beige · #EAEAE2 Creme · #FAFAFA.
   ⚠️ Der Satz „Kein Gruen" aus Fassung 2 ist damit ueberholt.
   ⚠️ --champagner und --gold-tief bleiben als NAMEN bestehen, zeigen aber
   auf die neuen Gruentoene — so treffen alle 40 bestehenden Fundstellen
   die neue Palette, ohne dass eine uebersehen werden kann.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --oliv:#67763F; --salbei:#98A65B; --beige:#C8C6B7;
  --oliv-tief:#4C5730;                /* dunkler fuer Text auf Creme */
  --creme:#FAFAFA; --creme-warm:#EAEAE2;
  --champagner:var(--salbei); --gold-tief:var(--oliv-tief);
  --tinte:#2F332B; --tinte-weich:#5E6356;
  --meer:var(--oliv);
  --linie:rgba(47,51,43,.14);
  --rand:clamp(20px,5vw,88px);
  --gross:clamp(52px,12.5vw,190px);
  --mittel:clamp(30px,5.6vw,74px);
  --klein:clamp(24px,3.4vw,44px);
  --weich:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}

/* ⭐ MAUSZEIGER ALS CALLA (Samuel: „Der mauszeiger soll ein kleiner blumenstrauß
   sein auf edel gemacht").
   ⚠️ Ein STRAUSS wurde bei 34 px zum gruenen Fleck — drei Kelche nebeneinander
   verschmelzen auf dem Pixelraster zu einer Form. Gemessen an drei Entwuerfen,
   jeweils hell und dunkel hinterlegt. Was bei Zeigergroesse traegt, ist EINE
   klar geschnittene Calla mit Blatt. Sie ist auf Hell wie auf Dunkel lesbar,
   weil der Kelch weiss gefuellt UND gruen umrandet ist.
   ⚠️ `auto` als Ausweichwert ist Pflicht: Browser, die das Bild ablehnen
   (zu gross, Datei-URL, Richtlinie), stuenden sonst ohne Zeiger da.
   ⚠️ In Eingabefeldern bleibt der Textzeiger — dort will man sehen, wo die
   Schreibmarke landet. */
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 44' width='26' height='34'%3E%3Cpath d='M17 43 C17 33 15.5 26 13 21' fill='none' stroke='%234C5730' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 34 C11.5 31.5 9 27 9.5 23 C13.5 24.5 15.6 28.6 16 34 Z' fill='%2398A65B'/%3E%3Cpath d='M13 22 C5 18.5 2.5 9.5 7.5 4.5 C11.5 0.6 18 0 22 2.6 C24.4 4.1 25.8 5.6 27.2 4.4 C28 8 25 11.5 21.5 14.6 C18 17.7 15 19.6 13 22 Z' fill='%2367763F' stroke='%234C5730' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M14.6 19 C12.6 14 13.6 8.6 17 5.6' fill='none' stroke='%23C8C6B7' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 6 2,auto}
a,button,summary,[role=button],.knopf,label{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 44' width='26' height='34'%3E%3Cpath d='M17 43 C17 33 15.5 26 13 21' fill='none' stroke='%234C5730' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 34 C11.5 31.5 9 27 9.5 23 C13.5 24.5 15.6 28.6 16 34 Z' fill='%2398A65B'/%3E%3Cpath d='M13 22 C5 18.5 2.5 9.5 7.5 4.5 C11.5 0.6 18 0 22 2.6 C24.4 4.1 25.8 5.6 27.2 4.4 C28 8 25 11.5 21.5 14.6 C18 17.7 15 19.6 13 22 Z' fill='%2367763F' stroke='%234C5730' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M14.6 19 C12.6 14 13.6 8.6 17 5.6' fill='none' stroke='%23C8C6B7' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 6 2,pointer}
input,textarea,select{cursor:auto}
@media(hover:none){
  body,a,button,summary,[role=button],.knopf,label{cursor:auto}
}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:'Karla',system-ui,sans-serif;color:var(--tinte);background:var(--creme);
  font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.laedt{overflow:hidden;height:100svh}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}

/* ⛔ Hier stand der Ladescreen aus Fassung 1 (Balken, Prozentzahl, atmender
   Hinweis). Er ist seit dem Umbau auf Kuvert und Karte tot und war nur noch
   eine zweite, widersprechende Definition von `.lade` und `.lade__balken`. */
/* ══ DIE EINLADUNG — Kuvert und Karte als FOTOGRAFIE ═════════
   ⛔ FASSUNG 4, 09.09.2026. Samuel per Sprachnachricht: „Ich finde das Design
   der Einladung noch kacke … das wirkt einfach nicht so edel, nicht so
   filigran. Es wirkt eher einfach KI generiert, aber nicht nach einem echten
   coolen Foto … Ich würde das viel edler gern haben und realistischer nach
   einem echten Brief."
   ⭐ Er hat den Kern getroffen: Fassung 3 war eine mit CSS GEZEICHNETE Flaeche.
   Verlaeufe koennen Papier annaehern, aber nie die Faser, die Buettenkante und
   den echten Schattenwurf. Kuvert und Karte sind jetzt echte Aufnahmen
   (`gen_papier.py`), freigestellt mit Alphakanal; die Schrift liegt als HTML
   darueber und bleibt dadurch gestochen scharf und aenderbar.
   ⚠️ Beim Freistellen war das Wachssiegel zuerst mit weggeschnitten — es ist
   dunkler als die Helligkeitsschwelle. Geloest, indem die Maske vom Bildrand
   her geflutet wird: was danach noch dunkel ist, lag INNEN und bleibt.
   ⚠️ Und das Kuvert musste im zweiten Anlauf HOCHKANT erzeugt werden. Ein quer
   liegendes Kuvert kann eine hochkante Karte nicht verbergen — sie schaute oben
   heraus, bevor man geklickt hatte. */
/* ⭐ Samuel, 09.09., 14:00: „diesen Rundherum in Schwarz, dass man da vielleicht
   irgendwie eine andere Farbe hat als Schwarz, weil das Schwarz ist einfach
   gerade noch ein bisschen zu hart."
   ⚠️ Nicht heller, sondern WAERMER und gruener: ein tiefes Oliv aus dem Kit
   (#2B3124 statt #171B15). Es traegt das Elfenbein des Papiers, ohne dass die
   Kante hart wird — hell genug waere hier falsch, die Karte soll leuchten. */
.lade{position:fixed;inset:0;z-index:100;overflow:hidden;
  background:#2B3124;color:var(--creme);
  display:grid;place-items:center;transition:opacity .7s ease}
.lade::before{content:'';position:absolute;inset:-4%;
  background:url("film/meer_drohne.jpg") center/cover no-repeat;
  filter:blur(34px) saturate(.55) brightness(.24);transform:scale(1.08)}
.lade::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 44%,rgba(58,66,48,.04) 0%,rgba(31,37,26,.90) 78%)}
.lade__mitte{position:relative;z-index:2;text-align:center;
  width:min(88vw,82vh,960px)}

/* Das Kuvert. Seitenverhaeltnis = das der freigestellten Aufnahme. */
/* ⛔ HIN UND HER, beide Male mit Grund. Quer → die hochkante Karte schaute
   oben heraus. Hochkant → Samuel am 09.09., 10:01: „Warum kommt der brief aus
   der schmalen seite statt aus der breiten? Der brief gehört gedreht."
   ⭐ Er hat recht: ein Hochformat-Kuvert oeffnet an der KURZEN Kante, und da
   zieht niemand eine Karte heraus. Die Loesung war nicht, das Kuvert zu drehen,
   sondern BEIDE quer zu machen — Kuvert und Karte. Jetzt kommt die Karte aus
   der langen Oberkante, wie bei einer echten Einladung. */
.ein{position:relative;width:100%;aspect-ratio:962/757;
  transform:translateY(8px) scale(.985);
  transition:transform .65s cubic-bezier(.22,1,.28,1);
  filter:drop-shadow(0 32px 46px rgba(0,0,0,.62))}
.lade.bereit .ein{transform:translateY(0) scale(1);cursor:pointer}
.lade.auf .ein{transform:translateY(34%) scale(.86)}

/* Die Karte steckt darin und faehrt nach oben heraus. */
/* ⛔ GEMESSEN 09.09., 10:14: Die Karte war GENAU SO BREIT wie das Kuvert und
   kam vollstaendig heraus — sie konnte da sichtbar nie drin gewesen sein. Eine
   Karte muss schmaler und kuerzer sein als ihre Tasche, sonst glaubt man das
   Bild nicht. Die Aufnahme ist deshalb auf 494x633 beschnitten (vorher 494x701),
   und die Karte sitzt jetzt mit 76 % Breite mittig im Kuvert. */
.ein__blatt{container-type:inline-size;
  /* ⚠️ Etwas schmaler als zuerst: die Kartenkante lag sonst links
     einige Pixel AUSSERHALB der Kuvertkante — dann sieht es nicht mehr
     danach aus, als haette sie darin gesteckt. */
  position:absolute;left:10%;width:80%;bottom:6%;
  aspect-ratio:820/592;z-index:2;overflow:hidden;
  background:url("bilder/karte_frei.png") center/100% 100% no-repeat;
  color:var(--tinte);
  display:grid;place-items:center;padding:6% 6.5%;
  transform:translateY(0);
  /* ⭐ 09.09., 14:00: Verzoegerung, damit die Lasche ZUERST aufgeht. Vorher
     fuhr die Karte durch ein geschlossenes Kuvert. */
  transition:transform .65s cubic-bezier(.28,.9,.24,1) .35s,filter .65s ease .35s;
  filter:drop-shadow(0 6px 10px rgba(20,24,16,.3))}
/* ⛔ ZWEIMAL GEMESSEN, ZWEIMAL ZU WENIG (09.09., 10:05 und 10:09): bei −46 %
   kam nur das Filmfenster heraus, bei −62 % standen die Namen immer noch
   hinter dem Kuvert. Der Grund ist Arithmetik: die Karte ist fast so hoch wie
   das Kuvert, ihr Inhalt braucht aber rund 340 px — bei −62 % sind nur 226 px
   ueber der Kuvertkante. Man kann das nicht mit einem schoeneren Wert loesen,
   sondern nur, indem die Karte WEIT heraus kommt. −86 % heisst: sie steckt nur
   noch mit dem letzten Siebtel im Papier — genau so, wie man eine Karte
   herauszieht. Das Kuvert bleibt als Tasche darunter sichtbar. */
/* ⚠️ Der Wert ist groesser als 100 %, und das ist richtig so: die Karte
   steckt am unteren Ende des Kuverts, ihr Weg nach oben ist deshalb laenger
   als sie selbst. Bei −106 % steht ihr gesamter Inhalt ueber der Kuvertkante,
   und sie steckt trotzdem noch mit rund 40 px im Papier. Gemessen, nicht
   geschaetzt: Kuvertkante 378, Inhaltsende 469, Differenz 91 px = 32 % der
   Kartenhoehe. */
.lade.auf .ein__blatt{transform:translateY(-114%);
  filter:drop-shadow(0 34px 48px rgba(20,24,16,.55))}

/* ⭐⭐⭐ 09.09.2026, 14:00 — DAS KUVERT KLAPPT JETZT WIRKLICH AUF.
   Samuel: „das stelle ich mir so vor, dass die Einladung aufgeht, also wirklich
   das Kuvert nach oben klappt, dann da wirklich der Brief rausfährt, in den
   Brief hineingezoomt wird, dass der Inhalt des Briefes dann wirklich den
   Größteil des Bildschirms einnimmt und dann auf das Video hineingezoomt wird."

   ⛔ Bisher fuhr die Karte hinter einem GESCHLOSSENEN Kuvert hervor. Die Lasche
   bewegte sich nie — man sah eine Karte, die durch Papier hindurchgeht.

   ⭐ OHNE NEUE AUFNAHME, und das ist der Kniff: Koerper und Lasche sind
   ZWEIMAL DIESELBE Datei, nur verschieden zugeschnitten (`clip-path`). Ein
   echtes Kuvert hat genau diese Geometrie — zwei Diagonalen von den Seitenkanten
   herunter zur Spitze in der Mitte —, und die Zuschnitte folgen den Faltlinien,
   die auf dem Foto ohnehin zu sehen sind. Ein zweites Bild zu erzeugen haette
   geheissen, dass Papierfaser und Licht der beiden Haelften nicht mehr
   zusammenpassen.

   ⚠️ `perspective` gehoert an den ELTERN, nicht an die Lasche: nur so kippt sie
   raeumlich nach hinten statt flach zu schrumpfen. */
.ein{perspective:none}

/* Der Kuvert-KOERPER: alles unterhalb der Faltlinien. Er bleibt liegen. */
.ein__vorne{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:url("bilder/kuvert_frei.png") center/100% 100% no-repeat;
  container-type:inline-size;
  clip-path:polygon(.6% 9.6%,3% 20%,38% 72%,38% 85%,62% 85%,62% 72%,97% 20%,99.4% 9.6%,100% 100%,0 100%)}

/* ⛔⛔ 11.09.2026 — DAS KUVERT HATTE KEINE RUECKWAND.
   Samuel: „in dem Moment, wo der Brief aufklappt und der Brief rausfaehrt,
   verschwindet quasi der Hintergrund, dann sieht man quasi das Gruen hinten
   durch."

   Nachgemessen in Zeitlupe am laufenden Bild, Bildpunkt (370|500) auf der
   linken Kuvertschulter: bei 0 ms Buettenpapier rgb(211,205,193), bei 280 ms
   Hintergrund rgb(16,18,13). Das Papier ist dort also wirklich weg.

   Die Ursache ist Geometrie, kein Zeitproblem: Das Kuvert bestand aus genau
   ZWEI Papierflaechen, `.ein__lasche` (9,6 % bis 46 %) und `.ein__vorne`
   (46 % bis 100 %). Zusammen sind sie nur im GESCHLOSSENEN Zustand
   lueckenlos. Sobald die Lasche nach hinten kippt, schrumpft ihre projizierte
   Hoehe, und was sie verdeckt hat, liegt frei — dahinter war nichts.

   Diese Flaeche hier war als Inneres gedacht und konnte es aus drei Gruenden
   nicht leisten:
     1. Sie begann bei 44 %, die Lasche haengt aber bei 9,6 %. Das ganze Band
        dazwischen hatte gar keine Deckung.
     2. `left/right: 2.5%` liess an beiden Schultern Keile offen; die
        Faltlinien treffen die Kante bei 0 % und 100 %.
     3. `.3s` Verzoegerung plus `.35s` Uebergang: bei 400 ms stand sie erst
        auf halber Deckkraft, genau im Fenster von 200 bis 500 ms, in dem die
        Luecke offen ist.

   ⭐ Jetzt deckt sie das ganze Papierfeld ab 9,6 % und ist von Anfang an da.
   Sichtbar wird sie dadurch nicht: sie liegt auf `z-index:1`, also hinter
   Lasche (4) und Koerper (3) — solange das Kuvert zu ist, sieht man nichts
   von ihr. Sie ist keine Einblendung, sondern schlicht die Rueckseite, die
   ein echtes Kuvert auch hat.

   ⚠️ ZWEI ZONEN, und die Grenze sitzt auf der Faltlinie bei 46 %: oben die
   Papier-INNENSEITE im Halbschatten (dorthin schaut man, wenn die Lasche
   weggeklappt ist), darunter die dunkle Tasche, in der die Karte steckt. Eine
   durchgehend dunkle Flaeche war die erste Fassung vom 09.09., und die las
   sich als gruene Karte im Kuvert statt als Schatten dahinter. */
.ein__innen{position:absolute;left:0;right:0;top:9.6%;bottom:0;z-index:1;
  pointer-events:none;
  /* ⛔⛔ 11.09.2026, ZWEITE RUNDE. Samuel nach der ersten Korrektur: „die
     Rueckseite ist zwar jetzt in richtiger Farbe, aber darunter ist immer
     noch gruen, sticht immer noch durch."

     Er hat recht, und es war kein Loch mehr, sondern meine eigene Farbe: Die
     Tasche unten stand auf #22261B bis #3E4335 — das sind OLIVTOENE. Ich
     hatte die Rueckwand oben auf Papier gesetzt und unten das Gruen der
     ersten Fassung stehen lassen. Durch die Zungenaussparung im Kuvertkoerper
     schaut man genau dort hinein.

     ⚠️ Eine Papiertasche ist nicht gruen, sie ist der Schatten desselben
     Papiers. Jetzt warme Graubraun-Toene aus der Papierfarbe abgeleitet,
     keine eigene Farbfamilie. */
  background:linear-gradient(180deg,
    #CFC9BC 0%, #C4BDAE 30%, #A79F90 44%,
    #2A2620 47%, #37322A 62%, #443E34 100%)}

/* ⭐ DIE LASCHE: dieselbe Aufnahme, nur das Dreieck oben — samt Siegel. */
.ein__lasche{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:url("bilder/kuvert_frei.png") center/100% 100% no-repeat;
  /* ⛔ DREI ZAHLEN, ALLE AUS DER ERSTEN BILDFOLGE KORRIGIERT:
     · 9,6 % ist die OBERKANTE DES PAPIERS, nicht die des Kastens. Die
       freigestellte Aufnahme hat darueber durchsichtigen Rand (gemessen beim
       Freistellen: Kante bei y=73 von 757). Mit `top center` sass das
       Scharnier ueber dem Papier — die Lasche loeste sich sichtbar ab.
     · 46 % ist die Hoehe, auf der die Faltlinien die Seitenkanten treffen.
     · Die SPITZE ist kein Punkt, sondern eine kleine Zunge — und das ist der
       Punkt, an dem ich zweimal danebenlag.
       ⛔ Im Bild gemessen (dunkelster zusammenhaengender Fleck): Das Siegel
       steht auf y 57,6 % bis 82,4 % und x 39,7 % bis 59,4 %. Ein reines V kann
       das nicht fassen — an seiner Spitze ist es beliebig schmal, ein Siegel
       ist dort aber am breitesten. Bei Spitze 70 % blieb die untere Haelfte auf
       dem Kuvert liegen, bei 79 % ein Rest. Das ist keine Frage des besseren
       Wertes, sondern der Form.
       ⭐ Deshalb laufen die Faltlinien bis (62 % | 72 %) und (38 % | 72 %) und
       gehen dort in eine Zunge bis 85 % ueber, die das Siegel vollstaendig
       traegt. Physikalisch stimmt das sogar besser als ein spitzes V: ein
       Siegel verbindet Lasche UND Koerper, es sitzt nie auf einer Spitze. */
  clip-path:polygon(.6% 9.6%,99.4% 9.6%,97% 20%,62% 72%,62% 85%,38% 85%,38% 72%,3% 20%);
  transform-origin:center 9.6%;
  transform:rotateX(0deg);
  transition:transform .65s cubic-bezier(.5,0,.2,1),z-index 0s linear .325s;
  filter:drop-shadow(0 6px 10px rgba(20,24,16,0))}
/* ⚠️ 168 statt 180 Grad: eine exakt umgeklappte Lasche steht als
   Nulllinie im Bild und sieht aus wie ein Strich. Zwoelf Grad Rest zeigen,
   dass da Papier liegt.
   ⛔ `z-index` faellt in der Mitte der Bewegung auf 1 — ab dann liegt die
   Lasche HINTER der Karte, die gleich darueber hinausfaehrt. Ohne das
   schoebe sich die herausfahrende Karte unter das umgeklappte Papier. */
.lade.auf .ein__lasche{transform:rotateX(-180deg);z-index:1;
  filter:drop-shadow(0 -8px 14px rgba(20,24,16,.35))}
/* Die Initialen auf dem Kuvert. Geprägt, nicht gedruckt: ein heller Grat nach
   oben und ein dunkler Schatten nach unten lassen die Buchstaben im Papier
   liegen statt darauf.
   ⛔ GEMESSEN: bei 72 % lagen sie HINTER dem Wachssiegel — beim Querformat
   sitzt das Siegel tiefer als beim Hochformat, seine Unterkante liegt bei
   rund 78 %. Jetzt 84 %, mit Abstand darunter. */
.ein__initialen{position:absolute;left:0;right:0;top:84%;
  font-family:'Fraunces',serif;font-weight:300;font-size:5.6cqw;
  letter-spacing:.3em;text-indent:.3em;color:#6E7748;
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 -1px 1px rgba(60,66,44,.28);
  transition:opacity .4s ease}
.ein__initialen i{font-style:normal;opacity:.5;padding:0 .06em}
.lade.auf .ein__initialen{opacity:0}

/* ⭐ Querformat heisst zweispaltig: das Filmfenster links, die Schrift rechts.
   Uebereinander waere auf einer breiten Karte eine Briefmarke ueber einer
   Zeile — nebeneinander ist die klassische Aufteilung einer Einladungskarte.
   ⚠️ Alle Masse weiter in `cqw` (Prozent der KARTENBREITE): sonst skaliert die
   Schrift mit dem Bildschirm statt mit der Karte, und der Inhalt passt auf dem
   einen Geraet und auf dem anderen nicht. Genau daran ist die Hochformat-
   Fassung dreimal gescheitert. */
/* ⚠️ Flex statt Raster: mit `40% 1fr` blieb rechts neben der kurzen Textspalte
   ein grosses totes Feld, die Karte wirkte unausgewogen. Im Flex hugen beide
   Teile ihren Inhalt und stehen zusammen mittig. */
.ein__blattinhalt{display:flex;align-items:center;justify-content:center;
  gap:5cqw;width:100%;height:100%;text-align:left}
.ein__fenster{width:39%;flex:0 0 auto;aspect-ratio:4/5;
  background:url("film/meer_drohne.jpg") center/cover no-repeat,rgba(120,118,100,.16);
  box-shadow:inset 0 1px 3px rgba(40,44,30,.2),0 1px 0 rgba(255,255,255,.5);
  margin:0}
.ein__rechts{display:flex;flex-direction:column;align-items:flex-start;flex:0 1 auto}
.ein__calla{display:block;margin:0 0 1.4cqw;height:7.5cqw;width:auto}
.ein__calla svg{height:100%;width:auto}
.calla .stiel,.ein__calla .stiel{fill:none;stroke:#8A9A5B;stroke-width:1.7;stroke-linecap:round}
.calla .blattgruen,.ein__calla .blattgruen{fill:#B7C48E;opacity:.55}
.calla .kelch,.ein__calla .kelch{fill:#FDFCF7;stroke:#A9B481;stroke-width:1.5;stroke-linejoin:round}
.calla .kelchfalte,.ein__calla .kelchfalte{fill:none;stroke:#C3CBA4;stroke-width:1}
.calla .kolben,.ein__calla .kolben{fill:none;stroke:#D9B85C;stroke-width:2.6;stroke-linecap:round}
.ein__ober{font-family:'Karla',sans-serif;font-size:2.2cqw;font-weight:600;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--oliv)}
.ein__namen{font-family:'Fraunces',serif;font-weight:300;line-height:1.04;
  font-size:6.8cqw;letter-spacing:-.015em;margin-top:2cqw}
.ein__namen em{font-style:italic;display:block;font-size:.4em;opacity:.5;
  margin:.06em 0;font-weight:300;letter-spacing:0}
.ein__linie{display:flex;align-items:center;gap:2cqw;margin-top:2.6cqw;width:52%}
.ein__linie i{flex:1;height:1px;background:linear-gradient(90deg,#BFBDA8,transparent)}
.ein__linie i:first-child{flex:0 0 0}
.ein__linie s{width:1.1cqw;height:1.1cqw;min-width:3px;min-height:3px;border-radius:50%;
  background:var(--salbei);text-decoration:none;flex:0 0 auto;order:-1}
.ein__datum{margin-top:2.2cqw;font-size:2.5cqw;letter-spacing:.2em;
  color:var(--tinte-weich)}
.ein__ort{margin-top:1.1cqw;font-size:2cqw;letter-spacing:.22em;
  text-transform:uppercase;color:#6F7263}

.lade__ruf{margin-top:28px;font-size:9.5px;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:rgba(250,250,250,.38);
  opacity:0;transition:opacity .9s ease .3s}
.lade.bereit .lade__ruf{opacity:1}
.lade.auf .lade__ruf{opacity:0;transition:opacity .3s ease}
.lade__balken{margin-top:24px;height:1px;width:60px;margin-left:auto;margin-right:auto;
  background:rgba(250,250,250,.12);overflow:hidden;transition:opacity .5s ease}
.lade__balken i{display:block;height:100%;width:0;background:var(--salbei);
  transition:width .35s var(--weich)}
.lade.bereit .lade__balken{opacity:0}
.lade__zahl{display:none}

/* ⭐⭐ ZWISCHENSCHRITT AM HANDY. Samuel am 09.09., 10:26: „am handy ist die
   einladung etwas klein, kann dann da reingezoomt werden am handy bevor ins
   video gezoomt wird?"
   Er hat den wunden Punkt getroffen: auf 360 px Breite ist die Karte samt
   Schrift klein, und im naechsten Moment wird sie schon weggezogen — man hat
   sie nie richtig gesehen. Deshalb faehrt die Karte jetzt in DREI Stufen:
     1,7 s  Karte kommt aus dem Kuvert
     2,2 s  ⭐ die ganze Einladung faehrt heran (`.lade.nah`) — jetzt liest man sie
     4,0 s  der Film waechst aus der Karte ueber den Schirm
   ⚠️ Nur am Handy. Am Desktop ist die Karte gross genug; ein Heranfahren waere
   dort eine Bewegung ohne Zweck. */
.lade.nah .ein{transition:transform .45s cubic-bezier(.24,1,.3,1)}

/* ⭐⭐ 09.09.2026, 12:00 — DAS HERANFAHREN GILT JETZT AUCH AM DESKTOP.
   Samuel: „die karte etwas größer und dann reinzoomen auf die einladung bevor
   sie groß aufgeht in den hero bereich."
   ⚠️ Bis heute stand hier ausdruecklich „Nur am Handy. Am Desktop ist die Karte
   gross genug; ein Heranfahren waere dort eine Bewegung ohne Zweck." Der erste
   Halbsatz stimmte, der zweite nicht: Der Zweck ist nicht die Lesbarkeit,
   sondern die Bewegung selbst — die Kamera faehrt auf die Karte zu, und aus
   ihrem Fenster waechst dann der Film. Ohne diesen Schritt springt der Film aus
   einer stehenden Karte, und der Sog beginnt aus dem Nichts.
   ⛔⛔ DER WERT IST GEMESSEN, UND MEIN ERSTER WAR FALSCH. Ich hatte ihn aus der
   Kuverthoehe hergeleitet (38 %) — dabei uebersehen, dass die Karte durch
   `translateY(-114%)` bereits weit ueber dem Kuvert steht UND die Skalierung
   diesen Abstand mitvergroessert. Ergebnis der Messung: Kartenoberkante bei
   −116 px, also oben aus dem Bild heraus. Im Browser durchgemessen, fuenf
   Wertepaare, an zwei Bildschirmgroessen:
       T=60 % → Karte −101..433 · T=84 % → 44..578 · T=96 % → 172..670
   Bei 96 %/1,12 liegt die Kartenmitte auf 421 (Bildschirmmitte 470) und die
   Karte ist 691 px breit statt 504 — sichtbar naeher, ohne oben oder unten
   anzustossen. Das Kuvert faehrt dabei unten aus dem Bild: genau das ist die
   Kamerafahrt, die Samuel meint. */
.lade.auf.nah .ein{transform:translateY(96%) scale(1.12)}

@media(max-width:640px){
  .lade__mitte{width:min(88vw,360px)}
  /* ⛔⛔ 09.09.2026, 13:37 — SAMUELS BILDSCHIRMFOTO VOM IPHONE: „dann ist auf
     einmal die Einladungskarte oben abgeschnitten und das Kuvert ist immer noch
     mittig, nachdem es reingezoomt hat."
     Er hat recht, und der alte Wert war nie gemessen: Bei `translateY(16%)`
     steht die Kartenoberkante auf 393x852 bei y=16 — auf dem Papier knapp
     drin, auf einem echten iPhone mit Safari-Leiste abgeschnitten. Und das
     Kuvert blieb mittig stehen, statt aus dem Bild zu fahren.
     ⭐ IM BROWSER DURCHGEMESSEN, zwoelf Wertepaare auf 393x852:
         T= 16 % → Karte  16..280 (abgeschnitten)
         T= 96 % → Karte 297..521, Mitte 409
         T=120 % → Karte 337..577, Mitte 457
     Gesucht war die Bildschirmmitte 426; zwischen 96 und 120 liegt sie bei
     108 %. Bei `scale(1.2)` ist die Karte dann 332 px breit — mehr als ohne
     Zoom (237) und vollstaendig sichtbar, mit rund 300 px Luft nach unten fuer
     Safaris Leiste. */
  .lade.auf.nah .ein{transform:translateY(108%) scale(1.2)}
  /* ⚠️ Auf dem Handy fehlten der Ortszeile noch 5 px ueber der Kuvertkante —
     der Text skaliert nicht ganz mit der Karte. Gemessen, nicht geschaetzt. */
  .lade.auf .ein__blatt{transform:translateY(-119%)}
}
@media(prefers-reduced-motion:reduce){.ein,.ein__blatt{transition-duration:.3s}}

/* ⭐ Der Sog: dieselbe Aufnahme, die aus der Karte heraus auf Vollbild waechst.
   ⚠️ Warum eine eigene Ebene und nicht das Kartenbild selbst: das Kartenbild
   haengt in einer 3D-gedrehten Flaeche. Etwas darin auf Bildschirmgroesse zu
   bringen hiesse, gegen die Drehung des Elternteils zu rechnen — fehleranfaellig
   und auf jedem Geraet anders. Stattdessen wird diese Ebene per JavaScript
   genau auf den GEMESSENEN Platz der Kartenhaelfte gesetzt und waechst von dort.
   Der Uebergang ist dadurch bildgleich, die Rechnung aber flach. */
.sog{position:fixed;z-index:101;overflow:hidden;pointer-events:none;
  opacity:0;visibility:hidden;border-radius:1px;
  box-shadow:0 2px 14px rgba(30,34,27,.34)}
.sog.an{opacity:1;visibility:visible}
.sog.zieht{transition:top .7s cubic-bezier(.66,0,.2,1),
                      left .7s cubic-bezier(.66,0,.2,1),
                      width .7s cubic-bezier(.66,0,.2,1),
                      height .7s cubic-bezier(.66,0,.2,1),
                      border-radius .5s ease,box-shadow .7s ease}
.sog.voll{border-radius:0;box-shadow:none}
.sog video{width:100%;height:100%;object-fit:cover;display:block}
/* ⛔⛔ HIER LAGEN 129 ZEILEN TOTE CSS — die ganze gezeichnete Einladung aus
   Fassung 2 und 3: Monogramm auf der Kuvertvorderseite, das mit `clip-path`
   geschnittene Wachssiegel, die Klappe, dazu eine zweite Kopie des Sog-Blocks
   und die Handy-Regeln fuer eine Karte, die es nicht mehr gibt.
   ⚠️ Sie haben nichts kaputt gemacht (spaetere Regeln gewinnen), aber genau so
   entstehen Widersprueche: `.lade` war zweimal definiert, `.lade__balken`
   viermal. Beim naechsten Umbau haette jemand die falsche Stelle geaendert und
   sich gewundert, warum nichts passiert.
   ⭐ Gefunden, indem alle Selektoren gezaehlt wurden — 19 waren mehrfach da. */
/* Filmkorn */
.korn{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;animation:korn 1.1s steps(3) infinite}
@keyframes korn{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-variation-settings:'SOFT' 40,'WONK' 1;line-height:.96;letter-spacing:-.02em}
.mini{font-family:'Karla',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.30em;text-transform:uppercase;color:var(--gold-tief)}
.dunkel .mini{color:var(--champagner)}

/* ── Kopfzeile ───────────────────────────────────────────── */
/* ⛔ Samuel am 09.09.: „hero passt nur in der navbar bitte lesbare weisse
   farbe der menuepunkte damit sie lesbar sind ueber dem video".
   URSACHE war `mix-blend-mode:difference` — der Modus rechnet die Schrift
   gegen das Bild dahinter, und ueber einem hellen Videobild (Himmel, Wasser,
   Kalkstein) wird aus Weiss genau das Dunkel des Untergrunds: unlesbar.
   Jetzt: volles Weiss mit Schatten ueber dem Titelbild, und sobald man daran
   vorbeigescrollt ist, eine helle Leiste mit dunkler Schrift. */
.kopf{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;
  justify-content:space-between;align-items:center;padding:16px var(--rand);
  color:#fff;text-shadow:0 1px 3px rgba(20,24,18,.6),0 2px 20px rgba(20,24,18,.45);
  transition:background .45s ease,color .45s ease,box-shadow .45s ease,
             text-shadow .45s ease,backdrop-filter .45s ease}
.kopf::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,28,20,.42),rgba(24,28,20,0));
  transition:opacity .45s ease}
.kopf .mono{font-family:'Fraunces',serif;font-size:19px;letter-spacing:.16em;text-decoration:none;
  color:inherit;display:inline-flex;align-items:center;gap:7px}
/* ⚠️ Die Calla sitzt auf der Grundlinie der Buchstaben, nicht mittig zum
   Kaestchen — sonst schwebt sie ueber dem Monogramm. */
.kopf__calla{flex:0 0 auto;transform:translateY(1px)}
.kopf nav{display:flex;gap:22px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
/* ⭐ 09.09.2026, 14:00 — Samuel: die Menuepunkte im Gruen aus dem Design-Kit.
   ⚠️ Ueber dem hellen Titelvideo ist reines Salbei zu schwach; deshalb der
   HELLE Ton des Kits (`--beige`) mit dem bestehenden Schatten, und erst auf
   der hellen Leiste das satte `--oliv`. Beides sind Kit-Farben; die Regel
   lautet nicht eine Farbe ueberall, sondern lesbar auf beidem. */
.kopf a{text-decoration:none;color:var(--beige);opacity:1;transition:color .3s,opacity .3s}
.kopf a:hover{color:#fff}
/* Vorbeigescrollt: helle Leiste, dunkle Schrift, kein Schatten mehr noetig. */
body.gescrollt .kopf{background:rgba(250,250,250,.9);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);color:var(--tinte);text-shadow:none;
  box-shadow:0 1px 0 var(--linie)}
body.gescrollt .kopf::before{opacity:0}
body.gescrollt .kopf a{color:var(--oliv)}
body.gescrollt .kopf a:hover{color:var(--oliv-tief)}
.sprachen{display:flex;gap:9px;font-size:11px;letter-spacing:.16em}
.sprachen button{background:none;border:0;color:inherit;opacity:.55;cursor:pointer;
  text-transform:uppercase;letter-spacing:.16em;padding:2px}
.sprachen button.an{opacity:1;text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){.kopf nav{display:none}}

/* ── Titelbild mit Film ──────────────────────────────────── */
.held{position:relative;height:100svh;height:100lvh;min-height:560px;overflow:hidden;
  display:grid;place-items:center;background:var(--tinte)}
.held__bild{position:absolute;inset:0;overflow:hidden}
.held__bild img,.held__bild video{width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);will-change:transform}
.held__bild video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.held__bild video.da{opacity:1}
/* ⚠️ Der mittlere Stopp lag bei .05 — auf einem hellen Bild (Kalkfelsen,
   Mittagshimmel) verschwand der Name darin fast. Gemessen im Bildschirmfoto
   vom 09.09. Jetzt .20, dazu ein weicher Schatten hinter der Schrift: der
   traegt auch dann, wenn das Video zufaellig gerade auf Weiss steht. */
.held__bild::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(40,34,26,.46) 0%,rgba(40,34,26,.20) 42%,rgba(40,34,26,.58) 100%)}
.held__text{position:relative;z-index:3;text-align:center;color:#fff;padding:0 var(--rand);
  text-shadow:0 2px 40px rgba(28,22,16,.55),0 1px 6px rgba(28,22,16,.35)}
.held__text .mini{color:rgba(255,255,255,.8)}
.held h1{font-size:var(--gross);margin:.12em 0 .18em;font-weight:300}
.held h1 em{font-style:italic;font-weight:300;display:block;font-size:.42em;margin:.1em 0;
  letter-spacing:.04em;opacity:.9}
.held__datum{font-size:13px;letter-spacing:.42em;text-transform:uppercase}
.wink{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.wink i{width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.75),transparent);
  animation:wink 2.2s ease-in-out infinite}
@keyframes wink{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ── Abschnitte ──────────────────────────────────────────── */
section{padding:clamp(80px,12vh,160px) var(--rand);position:relative}
.eng{max-width:780px;margin:0 auto}
.breit{max-width:1400px;margin:0 auto}
.warm{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-warm) 100%)}
.dunkel{background:var(--tinte);color:var(--creme)}
.dunkel p{color:rgba(251,249,244,.72)}
.tief{background:var(--meer);color:#F2FBFB}
.tief p{color:rgba(242,251,251,.78)}
.tief .mini{color:#BFE6E4}
h2.gross{font-size:var(--mittel);margin:.2em 0 .4em}

/* ── Auftakt mit Bild-im-Bild ────────────────────────────── */
.auftakt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(30px,6vw,80px);align-items:center;max-width:1400px;margin:0 auto}
.auftakt p.rede{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(23px,3vw,40px);line-height:1.34;letter-spacing:-.015em}
.zeile{display:block;overflow:hidden}
.zeile span{display:block}
.pip{position:relative}
.pip__gross{overflow:hidden;border-radius:2px;
  box-shadow:0 30px 70px rgba(38,42,32,.22)}
/* ⛔ GEMESSEN 09.09., 09:35: Das Pool-Video ist hochkant (464x832). In einem
   3/4-Rahmen schneidet `cover` oben und unten je 13 % weg — und genau oben
   sind die Koepfe. Auf dem Bildschirmfoto waren beide ab Schulterhoehe
   abgeschnitten. `object-position` verschiebt den Ausschnitt nach oben, statt
   ihn zu zentrieren. */
.pip__gross img,.pip__gross video{width:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:center 18%;
  transform:scale(1.15);will-change:transform}
/* ⭐ Der Schnappschuss aus Singapur. Als Abzug behandelt — weisser Rand,
   leichte Schraeglage, Bildunterschrift. Das ist der Grund, warum ein
   neonblaues, unscharfes Handybild neben einer beige-gruenen Seite nicht
   stoert: es GIBT SICH als Erinnerungsstueck aus, statt Teil der Bildsprache
   sein zu wollen. */
.pip__klein{position:absolute;right:-7%;bottom:-11%;width:47%;margin:0;
  background:#fff;padding:9px 9px 0;border-radius:1px;
  box-shadow:0 26px 60px rgba(38,42,32,.34),0 0 0 1px rgba(38,42,32,.07);
  transform:rotate(-2.4deg);transform-origin:center}
.pip__klein img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:1px}
.pip__klein figcaption{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  text-indent:.24em;color:var(--tinte-weich);text-align:center;padding:11px 4px 12px}
@media(max-width:860px){
  .auftakt{grid-template-columns:1fr}
  .pip__klein{width:42%;right:-3%;bottom:-7%}
}

/* ── Ablauf ──────────────────────────────────────────────── */
.ablauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,6vw,90px)}
.ablauf__links{position:sticky;top:14vh;align-self:start}
.ablauf__spur{margin-top:32px;display:flex;flex-direction:column;gap:15px}
.ablauf__spur b{font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinte-weich);display:flex;align-items:center;gap:14px;transition:color .4s}
.ablauf__spur b::before{content:'';width:24px;height:1px;background:var(--linie);transition:.4s}
.ablauf__spur b.an{color:var(--gold-tief)}
.ablauf__spur b.an::before{width:50px;background:var(--champagner)}
.halt{padding:clamp(38px,7vh,86px) 0;border-top:1px solid var(--linie)}
.halt:first-child{border-top:0;padding-top:0}
.halt h3{font-size:var(--klein);margin:.24em 0 .3em}
.halt time{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-tief);
  font-weight:600}
.halt p{color:var(--tinte-weich);margin-top:12px;max-width:48ch}
/* Harte Angaben, die man sich merken oder abschreiben muss — bewusst als
   Liste und nicht im Fliesstext: wer am Handy nach der Adresse sucht, soll
   sie finden, ohne einen Absatz zu lesen. */
.fakten{list-style:none;margin:22px 0 0;max-width:52ch;
  border-top:1px solid var(--linie)}
.fakten li{display:grid;grid-template-columns:22px minmax(84px,.30fr) 1fr;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--linie);align-items:baseline}
/* ⭐ Die Calla als Aufzaehlungszeichen (Samuel: „kannst du als symbole zb
   aufzählungen oder irgendwo als dekoration die blumen reinnehmen: calla
   lilien"). Als Hintergrundbild und nicht als `list-style-image`, weil man
   Groesse und Lage nur so genau setzen kann. */
.fakten li::before{content:'';width:22px;height:22px;align-self:start;
  margin-top:-2px;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22"%3E%3Cpath d='M11 21 C11 16 10.2 13 8.8 10.6' fill='none' stroke='%238A9A5B' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M8.8 11 C3.6 8.6 2 3.6 5.6 1.2 C8.4 -0.6 12.6 -0.2 14.6 1.8 C15.8 3 16.6 4 17.4 3.2 C17.8 5.6 15.8 7.8 13.4 9.6 C11.2 11.2 9.8 12 8.8 11 Z' fill='%23FDFCF7' stroke='%23A9B481' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M9.8 9.4 C8.8 6.6 9.4 3.6 11.4 2' fill='none' stroke='%23D9B85C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.fakten b{font-family:'Karla',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--oliv-tief);
  text-indent:.22em}
.fakten span{color:var(--tinte);font-size:15px;line-height:1.5}
.halt p.bitte{margin-top:20px;color:var(--tinte);font-style:italic;
  border-left:2px solid var(--salbei);padding-left:16px;max-width:46ch}
@media(max-width:560px){
  .fakten li{grid-template-columns:22px 1fr;gap:4px 12px}
  .fakten li::before{grid-row:span 2}
}
.halt figure{margin-top:24px;overflow:hidden;border-radius:2px;position:relative}
.halt figure img,.halt figure video{width:100%;aspect-ratio:16/10;object-fit:cover;
  transform:scale(1.16);will-change:transform}
@media(max-width:900px){
  .ablauf{grid-template-columns:1fr}
  .ablauf__links{position:static}
  .ablauf__spur{display:none}
}

/* ⛔ Hier stand die CSS der waagrechten Meer-Strecke. Der Abschnitt ist am
   09.09.2026 entfernt worden, die Regeln waren tot — und eine davon war
   gefaehrlich: `.ein__karte{width:min(76vw,520px)}` traf denselben Namen wie die
   Karte in der Einladung und stand weiter unten in der Datei. Die
   Einladungskarte ragte dadurch rechts aus dem Kuvert. Gemessen im
   Bildschirmfoto vom 09.09., 08:20. Die Einladung heisst deshalb jetzt
   durchgehend `.ein__…`, damit derselbe Zusammenstoss nicht wiederkommt. */

/* ── Zaehler ─────────────────────────────────────────────── */
.zaehler{text-align:center}
.zaehler .zahl{font-family:'Fraunces',serif;font-weight:300;font-size:var(--gross);
  line-height:.86;letter-spacing:-.04em;color:var(--champagner)}
.zaehler .wort{font-size:13px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--tinte-weich);margin-top:16px}

/* ── Galerie ─────────────────────────────────────────────── */
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,22px)}
.galerie figure{overflow:hidden;clip-path:inset(0 0 100% 0);cursor:zoom-in;margin:0}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--weich)}
.galerie figure:hover img{transform:scale(1.05)}
.g7{grid-column:span 7;aspect-ratio:4/3}
.g5{grid-column:span 5;aspect-ratio:3/4;align-self:end}
.g4{grid-column:span 4;aspect-ratio:3/4}
.g8{grid-column:span 8;aspect-ratio:16/10}
.g6{grid-column:span 6;aspect-ratio:4/3}
@media(max-width:760px){.g7,.g5,.g4,.g8,.g6{grid-column:span 12;aspect-ratio:4/3}}
/* Leuchtkasten */
.kasten{position:fixed;inset:0;z-index:80;background:rgba(28,24,20,.94);display:none;
  place-items:center;padding:4vmin;cursor:zoom-out}
.kasten.auf{display:grid}
.kasten img{max-width:94vw;max-height:92svh;object-fit:contain}
.kasten .zu{position:absolute;top:20px;right:24px;color:#fff;font-size:26px;
  background:none;border:0;cursor:pointer;line-height:1}

/* ── Formulare, Karten, Listen ───────────────────────────── */
.gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,36px);margin-top:40px}
.gitter article{border-top:1px solid var(--linie);padding-top:20px;position:relative}
.gitter article::before{content:'';position:absolute;top:-11px;left:0;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22"%3E%3Cpath d='M11 21 C11 16 10.2 13 8.8 10.6' fill='none' stroke='%238A9A5B' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M8.8 11 C3.6 8.6 2 3.6 5.6 1.2 C8.4 -0.6 12.6 -0.2 14.6 1.8 C15.8 3 16.6 4 17.4 3.2 C17.8 5.6 15.8 7.8 13.4 9.6 C11.2 11.2 9.8 12 8.8 11 Z' fill='%23FDFCF7' stroke='%23A9B481' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M9.8 9.4 C8.8 6.6 9.4 3.6 11.4 2' fill='none' stroke='%23D9B85C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat var(--creme);
  padding-right:6px;opacity:.9}
.dunkel .gitter article,.tief .gitter article{border-color:rgba(255,255,255,.18)}
.gitter h3{font-size:22px;margin-bottom:9px}
.gitter p{font-size:15px}

form{margin-top:32px;display:grid;gap:16px;max-width:620px}
.feld{display:grid;gap:6px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.zwei{grid-template-columns:1fr}}
label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-weich)}
input,select,textarea{font:inherit;padding:12px 14px;border:1px solid var(--linie);
  background:rgba(255,255,255,.62);color:var(--tinte);border-radius:2px;width:100%}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--champagner)}
.knopf{justify-self:start;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:12.5px;padding:14px 32px;border:1px solid var(--tinte);background:transparent;
  color:var(--tinte);cursor:pointer;border-radius:2px;transition:.35s}
.knopf:hover{background:var(--tinte);color:var(--creme)}
.knopf.hell{border-color:rgba(255,255,255,.6);color:#fff}
.knopf.hell:hover{background:#fff;color:var(--tinte)}
.knopf.voll{background:var(--tinte);color:var(--creme)}
.knopf.voll:hover{background:var(--gold-tief);border-color:var(--gold-tief)}
.hinweis{font-size:13.5px;color:var(--tinte-weich)}
.dank{color:var(--gold-tief);font-weight:600;min-height:1.4em}

.liste{list-style:none;display:grid;gap:12px;margin-top:26px;padding:0}
.liste li{border:1px solid var(--linie);border-radius:2px;padding:14px 16px;
  background:rgba(255,255,255,.5)}
.liste li b{display:block;font-weight:600;margin-bottom:3px}
.liste li small{color:var(--tinte-weich);font-size:13px}
.leer{color:var(--tinte-weich);font-size:14px;font-style:italic}

/* Reiter */
.reiter{display:flex;gap:6px;flex-wrap:wrap;margin-top:34px;border-bottom:1px solid var(--linie)}
.reiter button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 16px;
  cursor:pointer;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-weich)}
.reiter button.an{color:var(--tinte);border-bottom-color:var(--champagner)}
.blatt{display:none;padding-top:30px}
.blatt.an{display:block}

/* Tagesmodus */
.tag{display:grid;gap:0;margin-top:34px;max-width:760px}
.tag > div{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:16px 0;
  border-top:1px solid var(--linie);opacity:1;transition:opacity .4s}
.tag > div.jetzt{opacity:1}
.tag > div.jetzt b::after{content:'jetzt';margin-left:10px;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champagner)}
.tag time{font-weight:600;letter-spacing:.1em}

/* QR */
.qr{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:30px}
.qr img{width:150px;height:150px;background:#fff;padding:10px;border-radius:2px}

/* Anhang */
.richtungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:48px}
.richtung{border:1px solid rgba(251,249,244,.16);padding:26px 24px;border-radius:2px}
.richtung.gewaehlt{border-color:var(--champagner);background:rgba(192,161,107,.07)}
.richtung h3{font-size:25px;margin:9px 0 13px}
.richtung p{font-size:15px}
.tupfer{display:flex;gap:8px;margin:16px 0 4px}
.tupfer i{width:26px;height:26px;border-radius:50%;display:block;border:1px solid rgba(251,249,244,.2)}
.marke{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champagner)}
.spalten{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(22px,3vw,48px)}
.spalten h3{font-size:19px;margin-bottom:14px;color:var(--champagner)}
.spalten ul{list-style:none;display:grid;gap:10px;padding:0}
.spalten li{font-size:14.5px;color:rgba(251,249,244,.74);padding-left:19px;position:relative;
  line-height:1.5}
.spalten li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:var(--champagner)}
.spalten li b{color:var(--creme);font-weight:600}

.fuss{padding:66px var(--rand) 44px;text-align:center;background:var(--tinte);
  color:rgba(251,249,244,.5)}
.fuss .adr{font-family:'Fraunces',serif;font-size:clamp(22px,3vw,34px);color:var(--creme);
  margin-bottom:12px}
.fuss small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:block}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .korn{display:none}
}

/* ⭐ Ein Film, den das Geraet nicht von selbst abspielen darf (iOS im
   Stromsparmodus), sagt das — statt als totes Standbild dazustehen.
   ⚠️ Der Zeiger wird zum Finger und das Bild bekommt einen leichten Puls: zwei
   stille Hinweise, kein Kasten mit Text. Wer nichts merkt, sieht ein Standbild
   wie vorher; wer hinsieht, tippt. */
video.stumm{cursor:pointer;animation:stummpuls 2.6s ease-in-out infinite}
@keyframes stummpuls{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}
@media(prefers-reduced-motion:reduce){video.stumm{animation:none}}

/* Wünsche vom 14. September: Salbeileiste, Olivschrift, freie Bildergalerie. */
.kopf,body.gescrollt .kopf{background:#D7DEC4;color:var(--oliv-tief);text-shadow:none;box-shadow:0 1px 0 rgba(76,87,48,.15)}
.kopf::before{display:none}
.kopf a,body.gescrollt .kopf a{color:var(--oliv-tief)}
.kopf a:hover,body.gescrollt .kopf a:hover{color:#30391D}
.gross,.halt h3,.tag-titel{color:var(--oliv)}
.dunkel .gross{color:var(--salbei)}
.galerie-kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.galerie-kopf .gross{margin-bottom:0}
.galerie-kopf a{text-decoration:none}
.eindruecke .galerie figure{clip-path:none}
.tag-titel{font-size:clamp(24px,3vw,36px);margin-top:40px;line-height:1.2}
.tag > div{grid-template-columns:120px 1fr}
.tag > div > div{display:block;padding:0;border:0}
.tag > div.jetzt{background:var(--creme-warm)}
.tag .tag-abholung time{font-size:12px;letter-spacing:0}
.film-start{position:absolute;z-index:5;bottom:75px;left:50%;transform:translateX(-50%);border:1px solid #fff;background:rgba(47,51,43,.8);color:#fff;padding:12px 22px;font:inherit;border-radius:2px}
.film-start[hidden]{display:none}
.ein:focus-visible{outline:2px solid var(--salbei);outline-offset:8px}
.held__bild video{opacity:1}
@media(max-width:860px){
  .kopf{padding:12px 16px;gap:12px;flex-wrap:wrap}
  .kopf nav{display:flex;gap:14px;font-size:9px;letter-spacing:.1em}
  .kopf .mono{font-size:16px}
}
@media(max-width:380px){.kopf nav{width:100%;justify-content:space-between}}
@media(max-width:560px){.tag > div{grid-template-columns:86px 1fr;gap:14px}}