/* =========================================================
   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}

/* Was noch auftreten wird, steht schon in seinem Anfangszustand.
   Ohne das ist der Abschnitt zuerst zu sehen, springt beim
   Ausloesen zurueck und kommt dann erst herein.

   Die Marke am html-Element setzt das Skript selbst, unmittelbar
   bevor es die Beobachtung uebernimmt. Laeuft kein Skript, greift
   hier nichts, und alles steht offen da. */
[data-auftritt-aktiv] [data-auftritt]:not(.auftritt){opacity:0}

/* 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(4px)}
  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. */
/* Vorher: aus dem Nichts auf volle Groesse, dabei eine halbe
   Umdrehung, und mit einer Kurve, deren zweiter Wert ueber 1 lag
   -- sie schoss ueber das Ziel hinaus und federte zurueck. An
   einem daumennagelgrossen Zeichen liest sich das nicht als
   Schwung, sondern als Ruck. Jetzt: aus fast voller Groesse, ein
   Achtel Drehung, kein Ueberschwingen. */
@keyframes sternchen{from{opacity:0;transform:scale(.86) rotate(-22deg)}
                       to{opacity:1;transform:scale(1) rotate(0)}}
/* 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:#dfe8f0;
  --siegel-oben:66.7%;
  /* Die Tiefe der Buehne. Ein kleinerer Wert uebertreibt die
     Flucht, ein groesserer macht das Aufklappen flach -- bei
     dieser Kuvertgroesse liegt der Punkt, an dem es koerperlich
     wirkt ohne zu kippen, um 1500. */
  perspective:1500px;
  perspective-origin:50% 40%;
  transition:opacity .5s ease .62s,visibility .5s .62s;
}

/* Das Kuvertbild ist raus. Es hat die Form getragen, und ein
   Foto kann sich nur aufloesen -- genau so sah es auch aus. Weich
   gezeichnet als Stimmung dahinterzulegen war der zweite Fehler:
   ein dunkles Kuvert auf hellem Grund wird unscharf zu einem
   Fleck, und der lag dann unter dem echten Kuvert wie ein
   Schatten, den niemand wirft. */
.umschlag img{display:none}

/* Ein leichtes Abdunkeln zu den Raendern -- das Objektiv, nicht
   die Farbe der Karte. Das Kuvert fuellt das Bild selbst. */
.umschlag::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(128% 78% at 50% 42%,
    rgba(0,0,0,0) 44%,rgba(28,42,64,.16) 100%);
}

/* Die Aufnahmen des Kuverts. Absolute Pfade, nicht relative:
   ein url() in einer CSS-Variablen wird gegen die *Seite*
   aufgeloest, nicht gegen das Stylesheet, in dem es steht -- der
   Browser suchte die Bilder deshalb in /demo/azur/ statt in
   /demo/gemeinsam/. Und die englischen Fassungen liegen eine
   Ebene tiefer, ein relativer Pfad haette dort ohnehin nicht
   gestimmt. */
:root{
  --kuv-bild:url(/demo/gemeinsam/kuvert-blau.webp);
  --kuv-blatt-bild:url(/demo/gemeinsam/kuvert-blatt.webp);
  --kuv-siegel-bild:url(/demo/gemeinsam/kuvert-siegel.webp);
}

/* ---------- Das Kuvert ----------------------------------
   Eine Makroaufnahme, bildfuellend -- kein Kuvert, das klein in
   der Mitte liegt. Genau eine Aufnahme traegt Klappe *und*
   Tasche: beide zeigen dasselbe Bild an derselben Stelle und
   sind nur verschieden beschnitten. Deshalb laeuft die Praegung
   ueber die Kante hinweg durch, und die Spitzenborte sitzt, wo
   sie hingehoert. Zwei getrennte Aufnahmen haetten an der Naht
   immer auseinandergepasst.

   Die Kante wurde am Bild vermessen, nicht geschaetzt: die
   Spitze des V liegt bei 50 % / 66,7 %, die Schenkel laufen zu
   14,5 % links und 13,2 % rechts. Der Schnitt liegt ein paar
   Prozent darunter, damit die Borte an der Klappe bleibt.
   ------------------------------------------------------- */
/* Auch das Kuvert als Ganzes braucht seinen Uebergang: es gibt
   beim Druck ein wenig nach und geht am Schluss auf den
   Betrachter zu. Ohne diese Regel springt schon der Druck --
   ein Zielwert ohne den Weg dorthin ist immer ein Sprung. */
.kuv{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:scale(1);
  transition:transform .45s cubic-bezier(.33,0,.2,1);
}
.kuv-blatt,.kuv-tasche{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}

/* Das Blatt liegt im Kuvert und kommt beim Oeffnen herauf. */
.kuv-blatt{
  background-image:var(--kuv-blatt-bild);
  transform:translateZ(0) translateY(14%);
  transition:transform 1.05s cubic-bezier(.32,0,.16,1) .52s;
}

/* Die Tasche sinkt am Schluss nach unten weg, waehrend die
   Kamera in das Blatt hineingeht. Ohne den Uebergang hier
   *springt* sie in dem Moment, in dem der letzte Schritt
   einsetzt -- der Zielwert steht in der Regel fuer data-weg,
   aber nichts sagte, wie sie dorthin kommt. Das war der Ruck. */
.kuv-tasche{
  background-image:var(--kuv-bild);
  transform:translateZ(1px);
  clip-path:polygon(0 18.5%,50% 71%,100% 17%,100% 100%,0 100%);
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);
}

/* Die Klappe kippt um ihre Oberkante von der Kamera weg.

   Der erste Anlauf liess dafuer das bildschirmhohe Element
   drehen und schnitt die Klappe erst per clip-path daraus aus.
   Geometrisch war der Hebel damit die ganze Bildhoehe statt der
   Klappenhoehe: schon bei neun Grad war der sichtbare Teil aus
   dem Blickfeld gerutscht. Die Klappe kippte nicht, sie war beim
   ersten Bild weg -- und genau das sah aus wie ein Ruck.

   Jetzt ist die Klappe so hoch wie die Klappe. Das Bild darin
   bleibt bildschirmhoch, damit Ausschnitt und Praegung weiter
   genau auf der Tasche liegen. */
.kuv-klappe{
  position:absolute;left:0;right:0;top:0;
  height:71%;
  transform-origin:50% 0;
  transform:translateZ(2px) rotateX(0deg);
  transition:transform 1.5s cubic-bezier(.5,0,.24,1);
  transform-style:preserve-3d;
}
.kuv-klappe i{
  position:absolute;left:0;top:0;width:100%;
  /* 100 / 71 -- so ist das Bild wieder genau bildschirmhoch, und
     die Prozente im Ausschnitt stimmen mit der Tasche ueberein. */
  height:140.845%;
  background-image:var(--kuv-bild);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 0,100% 17%,50% 71%,0 18.5%);
  filter:drop-shadow(0 6px 14px rgba(70,90,120,.28));
  backface-visibility:hidden;
}

.umschlag[data-druck] .kuv{transform:scale(.994)}
/* Beim Loslassen federt das Kuvert zurueck. Ohne diese Regel
   dauert das 0,45 s -- und faellt damit genau in die Zeit, in
   der die Klappe schon kippt: das ganze Bild waechst waehrend
   des Aufgehens leicht mit. Zwei Bewegungen an einer Stelle,
   von denen nur eine gemeint war. Hier ist der Druck vorbei,
   bevor das Aufgehen beginnt. */
.umschlag[data-auf] .kuv{transform:scale(1);transition:transform .16s ease-out}
/* Kippen allein reicht nicht: durch die Perspektive wird die
   Klappe dabei sofort zu einem schmalen Band und ist praktisch
   weg, bevor man sie sich bewegen sieht. Im Vorbild kippt sie
   nur leicht an und wandert dabei als ganze Flaeche nach oben
   aus dem Bild. Beides zusammen ergibt die Bewegung. */
.umschlag[data-auf] .kuv-klappe{
  transform:translateZ(2px) translateY(-96%) rotateX(-42deg);
}
.umschlag[data-auf] .kuv-blatt{transform:translateZ(0) translateY(0)}
/* Zuletzt geht die Kamera in das Blatt hinein -- die Karte
   verschwindet nicht, man kommt in ihr an.

   Hier lag der Bruch: das Kuvert blendete zusaetzlich selbst aus,
   frueher als der Umschlag darum. Der traegt aber eine eigene
   Hintergrundfarbe -- fuer zwei Zehntelsekunden stand deshalb
   eine nackte blaue Flaeche im Bild, zwischen der Karte und der
   Seite. Jetzt blendet nur noch eine Ebene, und das Kuvert
   bleibt sichtbar, bis es dahinter liegt. */
.umschlag[data-weg] .kuv{transform:scale(2.5);
  transition:transform 1.3s cubic-bezier(.38,0,.18,1)}
.umschlag[data-weg] .kuv-tasche{transform:translateZ(1px) translateY(26%)}

@media (prefers-reduced-motion:reduce){
  .kuv,.kuv-klappe,.kuv-blatt,.kuv-tasche{transition-duration:.01ms}
}

/* ---------- Das Wachssiegel ----------------------------------
   Sitzt auf der Spitze des V, dort wo ein Siegel ein Kuvert
   verschliesst -- also ueber der Kante zwischen Klappe und
   Tasche. Es haelt beide, und deshalb liegt es auch nicht in
   der Klappe: es bricht, wenn sie sich hebt. */
.kuv-siegel{
  position:absolute;left:50%;top:66.7%;
  width:34%;aspect-ratio:1;
  transform:translate(-50%,-50%) translateZ(3px);
  background:var(--kuv-siegel-bild) center/contain no-repeat;
  /* Die Aufnahme ist waermer als das Vorbild -- dort ist das
     Wachs perlweiss, fast ohne Gelb. Entsaettigt und aufgehellt
     statt neu erzeugt: die Praegung im Wachs bleibt dabei
     erhalten, und sie ist das Teure an der Aufnahme. */
  filter:saturate(.5) brightness(1.13) contrast(.96)
         drop-shadow(0 4px 9px rgba(60,80,110,.42));
  display:grid;place-items:center;
  transition:transform .55s cubic-bezier(.33,0,.2,1),opacity .5s;
}
.kuv-siegel b{
  font-family:var(--schrift-script);
  font-weight:400;font-size:clamp(19px,5.6vw,30px);
  line-height:1;color:rgba(120,104,84,.62);
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 -1px 1px rgba(92,68,40,.32);
  transform:translateY(-3%);user-select:none;
}
.umschlag[data-druck] .kuv-siegel{transform:translate(-50%,-50%) translateZ(3px) scale(.95)}
.umschlag[data-auf] .kuv-siegel{
  transform:translate(-50%,-50%) translateZ(3px) scale(1.1) rotate(-8deg);
  opacity:0;transition-duration:.45s;
}

.umschlag-ring{display:none}
.kuv .umschlag-blitz{top:66.7%;left:50%;transform:translate(-50%,-50%) translateZ(4px)}

/* 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);z-index:3;
  /* Auf der Spitze der Klappe, dort wo ein Siegel sitzt --
     nicht mehr in der Mitte des Bildes. */
  width:min(21vw,104px);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%) translateZ(3px) scale(.94);opacity:.35}
  50%{transform:translate(-50%,-50%) translateZ(3px) 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);z-index:4;
  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%) translateZ(3px) 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-auf] .umschlag-ring{opacity:0;transform:translate(-50%,-50%) translateZ(3px) scale(1.5);animation:none}
.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)}
}
/* Die Sperre haelt die Seite still, solange das Kuvert liegt.
   scrollbar-gutter haelt den Platz der Leiste frei -- ohne das
   wird die Seite in dem Moment breiter, in dem die Sperre faellt,
   und alles darauf rueckt seitlich. */
html{scrollbar-gutter:stable}
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 .55s cubic-bezier(.33,0,.2,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 .55s cubic-bezier(.33,0,.2,1) .6s 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}}