/* =========================================================
   STIL "SIEGEL" — Wachssiegel, Glitzerherz zum Freirubbeln
   Eigenstaendige Demo. Teilt sich mit der Hauptkarte nur
   die lokalen Schriften.
   ========================================================= */

@font-face{font-family:'Great Vibes';src:url('../../../assets/fonts/GreatVibes-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Great Vibes';src:url('../../../assets/fonts/GreatVibes-latinext.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant';src:url('../../../assets/fonts/Cormorant-latin.woff2') format('woff2');
  font-style:normal;font-weight:300 500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';src:url('../../../assets/fonts/Cormorant-latinext.woff2') format('woff2');
  font-style:normal;font-weight:300 500;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Echte Kursive, nicht die vom Browser geschraegte Fassung - im Titel
   steht das "the" kursiv, und dort faellt jede Faelschung auf. */
@font-face{font-family:'Cormorant';src:url('../../../assets/fonts/Cormorant-italic-latin.woff2') format('woff2');
  font-style:italic;font-weight:300 500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';src:url('../../../assets/fonts/Cormorant-italic-latinext.woff2') format('woff2');
  font-style:italic;font-weight:300 500;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';src:url('../../../assets/fonts/Manrope-latin.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';src:url('../../../assets/fonts/Manrope-latinext.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --rose:#f0d7d3;
  --rose-tief:#e3bdb9;
  --rose-licht:#f9e7e4;
  --blau:#2033c4;
  --blau-tief:#16249a;
  --tinte:#4a4048;
  --gold:#c9a68c;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--rose);color:var(--tinte);
  font-family:'Cormorant',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* Solange der Umschlag liegt, gibt es nichts zu scrollen. */
body.zu{overflow:hidden}

.depot{position:absolute;width:0;height:0;overflow:hidden}

/* =========================================================
   1. UMSCHLAG
   ========================================================= */
.umschlag{
  position:fixed;inset:0;z-index:30;overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 80% at 50% 24%, var(--rose-licht) 0%, var(--rose) 52%, var(--rose-tief) 100%);
  transition:opacity .7s ease .45s,visibility .7s .45s;
}
.umschlag.weg{opacity:0;visibility:hidden;pointer-events:none}

.brief{
  position:relative;z-index:2;perspective:1200px;
  width:min(86vw,380px);aspect-ratio:1/1.32;
  filter:drop-shadow(0 24px 40px rgba(120,72,68,.28));
}
/* Der Umschlag ist aus demselben Papier wie die Karte darin. */
.putzlage{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:#fff;filter:url(#putz);opacity:.46;mix-blend-mode:overlay;
}
.brief-flaeche{
  position:absolute;inset:0;overflow:hidden;border-radius:5px;
  background:linear-gradient(163deg,#fae4e2 0%,#f2d5d3 46%,#e8c3c1 100%);
}
.brief-flaeche::before,.brief-flaeche::after{
  content:'';position:absolute;bottom:0;width:50%;top:26%;
  background:linear-gradient(180deg,rgba(198,142,140,.32),rgba(198,142,140,0) 66%);
}
.brief-flaeche::before{left:0;clip-path:polygon(0 100%,100% 0,100% 4%,0 100%)}
.brief-flaeche::after{right:0;clip-path:polygon(100% 100%,0 0,0 4%,100% 100%)}

.klappe{
  position:absolute;left:0;right:0;top:0;height:46%;
  background:linear-gradient(178deg,#fce9e7 0%,#f3d8d6 60%,#e9c6c4 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-radius:5px 5px 0 0;transform-origin:top center;overflow:hidden;
  transition:transform .9s cubic-bezier(.5,0,.15,1);z-index:2;
}
.umschlag.offen .klappe{transform:rotateX(-172deg)}

.siegel{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:34%;background:none;border:0;padding:0;cursor:pointer;z-index:3;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.4,-.4,.4,1.4),opacity .45s ease;
}
.siegel-svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 9px rgba(60,30,60,.4))}
.siegel:active{transform:translate(-50%,-50%) scale(.95)}
.siegel:focus-visible{outline:2px solid var(--blau);outline-offset:14px;border-radius:50%}
.umschlag.offen .siegel{transform:translate(-50%,-140%) scale(.6) rotate(-14deg);opacity:0}
.siegel-schrift{font-family:'Cormorant',serif;font-size:46px;fill:#0d1240;opacity:.66}


.umschlag-hinweis{
  position:absolute;z-index:2;left:0;right:0;bottom:9%;margin:0;text-align:center;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#a97f7a;
  animation:atmen 2.6s ease-in-out infinite;transition:opacity .3s ease;
}
.umschlag.offen .umschlag-hinweis{opacity:0;animation:none}
@keyframes atmen{0%,100%{opacity:1}50%{opacity:.35}}

/* =========================================================
   2. DIE SEITE
   Der Putz liegt randlos, es gibt kein Kaertchen darauf.
   ========================================================= */
.seite{
  position:relative;z-index:1;
  min-height:100svh;overflow:hidden;
}
/* Zwei Ebenen Struktur: die grobe Kelle, darueber feines Korn.
   Beide stehen fest im Bild - eine Wand laeuft nicht mit. */
.wand{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 60% at 50% 8%, var(--rose-licht) 0%, var(--rose) 52%, var(--rose-tief) 100%);
}
.putz{
  position:absolute;inset:-4%;pointer-events:none;
  background:#fff;                       /* ohne Anstrich malt der Browser nichts */
  filter:url(#putz);opacity:.72;mix-blend-mode:overlay;
}
.feinkorn{
  position:absolute;inset:0;pointer-events:none;
  filter:url(#korn);opacity:.3;mix-blend-mode:multiply;
}
.feinkorn::after{content:'';position:absolute;inset:0;background:#fff}

.satz{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 22px calc(13svh + env(safe-area-inset-bottom, 0px));
  text-align:center;
  opacity:0;transform:translateY(22px);
  transition:opacity .8s ease .3s,transform .9s cubic-bezier(.2,.8,.25,1) .3s;
}
body.offen .satz{opacity:1;transform:none}

/* ---------- Titel ---------- */
.titel{
  font-weight:400;font-size:clamp(34px,10.5vw,50px);line-height:1.05;
  letter-spacing:.005em;margin:0 0 clamp(14px,3.5vh,28px);color:#453b44;
  /* In den Putz gedrueckt: heller Grat oben, weicher Schatten darunter. */
  text-shadow:0 1px 0 rgba(255,246,244,.85), 0 2px 5px rgba(150,104,102,.28);
}
.titel em{font-style:italic}

/* ---------- Herz ---------- */
.herzfeld{
  position:relative;
  width:min(70vw,300px);
  aspect-ratio:260/244;
  margin-bottom:clamp(18px,4.5vh,36px);
}
.umriss{position:absolute;inset:0;width:100%;height:100%}
/* Umriss und Text liegen fertig unter dem Glitzer - wie aufgedruckt.
   Sie tauchen genau dort auf, wo die Schicht weg ist, nicht danach. */
#umrisslinie{
  fill:none;stroke:#584c55;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 0 rgba(255,246,244,.7));
}
.umriss-text{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.4vh,12px);padding-top:8%;
}
.hand{
  font-family:'Great Vibes',cursive;
  font-size:clamp(15px,4.6vw,20px);line-height:1.32;margin:0;color:#5a4e57;
}
.datum{
  font-weight:400;font-size:clamp(20px,6vw,26px);
  letter-spacing:.13em;margin:0;color:#3d343c;
}

/* Das Glitzerherz liegt als Leinwand darueber. Der Schatten haengt am
   Element, nicht an der Farbe - so wandert er beim Rubbeln mit. */
.glitzer{
  position:absolute;inset:0;width:100%;height:100%;
  cursor:grab;touch-action:none;
  filter:drop-shadow(0 7px 11px rgba(96,60,92,.34));
  transition:opacity .7s ease;
}
.glitzer.weg{opacity:0;pointer-events:none}

/* ---------- Namen und Fuss ---------- */
.namen{
  font-weight:400;font-size:clamp(26px,7.6vw,34px);
  letter-spacing:.005em;margin:0 0 clamp(16px,4vh,30px);color:#403742;
  text-shadow:0 1px 0 rgba(255,246,244,.8);
}
.fussfeld{min-height:52px;display:grid;place-items:center}
.wink{
  margin:0;font-size:clamp(14px,4vw,17px);
  letter-spacing:.22em;color:var(--gold);
  transition:opacity .4s ease;
}
.wink span{font-size:.8em;opacity:.75;padding:0 .3em}
.wink.weg{opacity:0}

.kalender{
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#2f43e0 0%,var(--blau) 52%,#1a29a8 100%);
  color:#eef0ff;border:0;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;font-weight:600;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 24px;border-radius:999px;
  box-shadow:0 8px 18px rgba(32,51,196,.36), 0 1px 0 rgba(255,255,255,.35) inset;
  animation:auftauchen .5s cubic-bezier(.2,.9,.3,1.2) both;
  transition:transform .15s ease;
}
.kalender[hidden]{display:none}
.kalender:active{transform:translateY(1px)}
.kalender svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@keyframes auftauchen{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* Die Glitzerspaene, die beim Rubbeln wegspringen und liegen bleiben. */
.span{position:absolute;pointer-events:none;border-radius:.5px;z-index:3;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .umschlag-hinweis{animation:none}
  .satz{transition:opacity .3s ease}
  .kalender{animation:none}
}

/* =========================================================
   BEWEGUNG
   ========================================================= */

/* ---------- Umschlag ---------- */
.brief{animation:briefSchweben 7s ease-in-out infinite}
@keyframes briefSchweben{
  0%,100%{transform:translateY(0) rotate(-.25deg)}
  50%    {transform:translateY(-9px) rotate(.25deg)}
}
.umschlag.offen .brief{animation:none}

/* Das Wachs atmet und bekommt ab und zu einen Lichtstreif. */
.siegel-svg{animation:siegelAtmen 3.4s ease-in-out infinite}
@keyframes siegelAtmen{
  0%,100%{transform:scale(1);filter:drop-shadow(0 6px 9px rgba(60,30,60,.4))}
  50%    {transform:scale(1.045);filter:drop-shadow(0 9px 14px rgba(60,30,60,.46))}
}
.umschlag.offen .siegel-svg{animation:none}
/* Der Streif laeuft in der Wachsform, nicht in einem Rechteck darum. */
.wachsglanz{animation:siegelGlanz 5.2s ease-in-out infinite}
@keyframes siegelGlanz{
  0%,64%,100%{transform:rotate(12deg) translateX(0)}
  32%        {transform:rotate(12deg) translateX(330px)}
}
.umschlag.offen .wachsglanz{opacity:0}

/* ---------- Rosenblaetter ---------- */
/* Die Blaetter liegen ueber Umschlag und Karte, aber unter nichts,
   das man antippen koennte. */
.blattfall{
  position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden;
}
.blatt{position:absolute;top:0;left:0;will-change:transform;animation:treibenAb linear infinite}
.blatt i{display:block;animation:trudeln ease-in-out infinite;transform-origin:50% 45%}
.blatt svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 2px 3px rgba(150,95,95,.16))}
@keyframes treibenAb{
  0%  {transform:translate3d(0,-14vh,0)}
  25% {transform:translate3d(calc(var(--weg) * .45),16vh,0)}
  50% {transform:translate3d(calc(var(--weg) * -.25),44vh,0)}
  75% {transform:translate3d(calc(var(--weg) * .8),74vh,0)}
  100%{transform:translate3d(var(--weg),116vh,0)}
}
@keyframes trudeln{
  0%  {transform:rotate(0deg) rotate3d(1,.6,0,0deg)}
  50% {transform:rotate(190deg) rotate3d(1,.6,0,180deg)}
  100%{transform:rotate(360deg) rotate3d(1,.6,0,360deg)}
}

/* ---------- Funken auf dem Glitzerherz ---------- */
.funkeln{position:absolute;inset:0;pointer-events:none;transition:opacity .5s ease}
.funkeln.weg{opacity:0}
.funke{position:absolute;transform:translate(-50%,-50%);animation:blitzen ease-in-out infinite}
.funke svg{display:block;width:100%;height:auto;fill:#fff}
@keyframes blitzen{
  0%,72%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
  84%        {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(35deg)}
}

/* ---------- Titel und Namen kommen herein ---------- */
.titel{animation:satzAuf 1s cubic-bezier(.2,.8,.25,1) .35s backwards}
.herzfeld{animation:herzAuf 1.1s cubic-bezier(.25,1.2,.4,1) .5s backwards}
.namen{animation:satzAuf 1s cubic-bezier(.2,.8,.25,1) .68s backwards}
.fussfeld{animation:satzAuf 1s cubic-bezier(.2,.8,.25,1) .82s backwards}
@keyframes satzAuf{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes herzAuf{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

/* Das Herz schlaegt, solange es noch verdeckt ist. */
.herzfeld .glitzer{animation:herzschlag 2.4s ease-in-out infinite}
@keyframes herzschlag{
  0%,100%{transform:scale(1)}
  14%    {transform:scale(1.045)}
  28%    {transform:scale(1)}
  42%    {transform:scale(1.028)}
  56%    {transform:scale(1)}
}
.glitzer.weg,.herzfeld.ruhig .glitzer{animation:none}

/* ---------- Kalenderknopf ---------- */
.kalender{position:relative;overflow:hidden}
.kalender::after{
  content:'';position:absolute;top:0;bottom:0;width:42%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));
  animation:knopfglanz 4.4s ease-in-out infinite;
}
@keyframes knopfglanz{
  0%,62%,100%{transform:translateX(-190%)}
  31%        {transform:translateX(380%)}
}

@media (prefers-reduced-motion:reduce){
  .brief,.siegel-svg,.wachsglanz,.blatt,.blatt i,.funke,
  .titel,.herzfeld,.namen,.fussfeld,.herzfeld .glitzer,.kalender::after{animation:none !important}
  .blattfall,.funkeln{display:none}
}

/* =========================================================
   DIE AUSGEBAUTE SEITE
   Unter der Save-the-Date folgen die Angaben, die man jetzt
   schon braucht. Der ganze Ablauf gehoert nicht hierher -
   der kommt mit der Einladung.
   ========================================================= */
.scrollwink{
  position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  text-decoration:none;color:#a9807b;
  animation:winkAuf .9s ease both,winkTupfen 2.6s ease-in-out .9s infinite;
}
.scrollwink[hidden]{display:none}
.scrollwink span{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
}
.scrollwink svg{width:13px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes winkAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes winkTupfen{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.bogen{position:relative;z-index:1;padding:62px 0}
.bogen-satz{padding:0 30px;max-width:32rem;margin:0 auto}
.mitte{text-align:center}
.mitte-t{text-align:center}
.mitte .fliess{margin-inline:auto}

.kicker{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  font-weight:500;color:var(--gold);margin:0 0 14px;
}
.script{
  font-family:'Great Vibes',cursive;font-weight:400;
  font-size:clamp(31px,8.6vw,42px);line-height:1.22;
  margin:0 0 22px;color:#3f3644;
}
.script.klein{font-size:clamp(25px,6.8vw,31px);margin:12px 0 4px}
.fliess{font-size:17.5px;line-height:1.74;color:#6f6270;margin:0 0 8px;max-width:31em}
.anschlag{
  font-weight:400;font-size:clamp(29px,8vw,38px);line-height:1.18;
  margin:0 0 8px;color:#3a3140;letter-spacing:.005em;
}
.anschlag.klein{font-size:clamp(24px,6.4vw,30px)}
.unterzeile{font-size:16px;letter-spacing:.06em;color:#8a7b8a;margin:0 0 6px}

/* Kleine blaue Raute als Trenner - dieselbe Farbe wie Siegel und Knopf.
   Die Drehung sitzt auf dem inneren Element: der Auftritt des Abschnitts
   animiert `transform` und wuerde sie sonst platt buegeln. */
.raute{display:block;position:relative;width:7px;height:7px;margin:30px auto}
.raute::before{
  content:'';position:absolute;inset:0;
  border:1px solid var(--blau);opacity:.5;transform:rotate(45deg);
}

/* ---------- Countdown ---------- */
.zaehler{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:390px;margin:0 auto}
.einheit{display:flex;flex-direction:column;align-items:center;gap:11px}
.kachel{
  width:100%;background:rgba(255,252,251,.72);
  border:1px solid rgba(200,150,148,.3);border-radius:3px;
  padding:19px 2px 17px;
  box-shadow:0 3px 14px rgba(150,95,95,.08);
  backdrop-filter:blur(3px);
}
.kachel b{
  display:block;font-weight:400;font-variant-numeric:oldstyle-nums;
  font-size:clamp(25px,7.2vw,32px);line-height:1;color:#3a3140;
  transform-origin:50% 50%;
}
.kachel b.rollt{animation:ziffernrolle .5s cubic-bezier(.3,.8,.3,1)}
@keyframes ziffernrolle{
  0%  {transform:translateY(-58%) rotateX(72deg);opacity:0}
  55% {opacity:1}
  100%{transform:none;opacity:1}
}
.einheit span{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#9c8b9a;
}
.zaehler-fuss{margin:26px 0 0;font-style:italic;font-size:16px;color:#8a7b8a}

/* ---------- Posten ---------- */
.posten{padding:24px 0;border-bottom:1px solid rgba(200,150,148,.28)}
.posten:last-child{border-bottom:0}
.postenname{font-weight:400;font-size:clamp(22px,5.8vw,26px);line-height:1.25;margin:0 0 8px;color:#3a3140}
.postenzeile{font-size:16.5px;line-height:1.66;color:#6f6270;margin:0}

.linkpfeil{
  display:inline-block;margin-top:6px;text-decoration:none;color:var(--blau);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid rgba(32,51,196,.3);padding-bottom:4px;
  transition:letter-spacing .3s ease;
}
.linkpfeil:hover{letter-spacing:.3em}

.kalender.gross{padding:17px 30px;font-size:11px}

/* ---------- Abschied ---------- */
.fuss{position:relative;z-index:1;padding:70px 0 calc(80px + env(safe-area-inset-bottom, 0px))}
.fuss-monogramm{font-size:25px;letter-spacing:.14em;color:#3a3140;margin:0 0 4px}
.fuss-namen{font-weight:400;font-size:clamp(27px,7.4vw,33px);margin:0 0 12px;color:#3a3140}
.fuss-datum{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#9c8b9a;margin:0;
}
.fuss-mail{margin:0;font-size:17px}
.fuss-mail a{color:var(--blau);text-decoration:none;
  border-bottom:1px solid rgba(32,51,196,.3);padding-bottom:2px}

/* ---------- Einblenden beim Erreichen ---------- */
/* Der Anschnitt steht im Ablauf, nicht in der Grundregel: laeuft
   nichts, steht der Text trotzdem da. */
.bogen.da .bogen-satz > *,.fuss.da .bogen-satz > *{
  animation:satzAuf .8s cubic-bezier(.2,.8,.25,1) both;
}
.bogen.da .bogen-satz > :nth-child(2){animation-delay:.08s}
.bogen.da .bogen-satz > :nth-child(3){animation-delay:.16s}
.bogen.da .bogen-satz > :nth-child(4){animation-delay:.24s}
.bogen.da .bogen-satz > :nth-child(n+5){animation-delay:.3s}

/* Die Schreibschrift wird gezogen, nicht eingeblendet. */
.schreiben{display:inline-block;position:relative}
@keyframes federzug{
  from{clip-path:inset(-8% 100% -18% -6%)}
  to  {clip-path:inset(-8% -6% -18% -6%)}
}
.schreiben::after{
  content:'';position:absolute;top:6%;bottom:16%;left:0;width:3px;
  background:linear-gradient(180deg,transparent,rgba(70,58,72,.45),transparent);
  filter:blur(1.6px);opacity:0;pointer-events:none;
}
@keyframes federpunkt{
  0%  {left:-2%;opacity:0}
  10% {opacity:.85}
  88% {opacity:.85}
  100%{left:102%;opacity:0}
}
.bogen.da .schreiben,.fuss.da .schreiben{
  animation:federzug 1.5s cubic-bezier(.32,.12,.28,1) .3s both;
}
.bogen.da .schreiben::after,.fuss.da .schreiben::after{
  animation:federpunkt 1.5s cubic-bezier(.32,.12,.28,1) .3s;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scrollwink{animation:none}
  .bogen.da .bogen-satz > *,.fuss.da .bogen-satz > *{animation:none}
  .schreiben{animation:none !important;clip-path:none !important}
  .schreiben::after{display:none}
  .kachel b.rollt{animation:none}
}

/* ---------- Breite Schirme ---------- */
@media (min-width:760px){
  .bogen-satz{padding-inline:44px}
}

/* =========================================================
   DER WEG DORTHIN
   ========================================================= */
.haus{
  display:block;width:min(62vw,240px);height:auto;margin:6px auto 22px;opacity:.85;
}
/* Das Schloss zeichnet sich, wenn der Abschnitt ins Bild kommt. */
.haus path,.haus circle{stroke-dasharray:1;stroke-dashoffset:1}
.bogen.da .haus path,.bogen.da .haus circle{
  animation:strichZiehen 1.6s cubic-bezier(.4,0,.2,1) both;
}
.bogen.da .haus g > :nth-child(n+8){animation-delay:.35s}
.bogen.da .haus g > :nth-child(n+14){animation-delay:.7s}
@keyframes strichZiehen{to{stroke-dashoffset:0}}

.wegweiser{
  display:flex;flex-direction:column;gap:10px;
  max-width:340px;margin:26px auto 0;
}
.wegknopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#2f43e0 0%,var(--blau) 52%,#1a29a8 100%);
  color:#eef0ff;border:0;cursor:pointer;text-decoration:none;
  font-family:'Manrope',system-ui,sans-serif;font-weight:600;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 20px;border-radius:999px;
  box-shadow:0 7px 16px rgba(32,51,196,.3), 0 1px 0 rgba(255,255,255,.32) inset;
  transition:transform .18s ease,box-shadow .25s ease;
}
.wegknopf:hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(32,51,196,.36)}
.wegknopf:active{transform:translateY(1px)}
.wegknopf svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Der dritte Knopf ist eine Nebenhandlung und sieht auch so aus. */
.wegknopf.leise{
  background:none;color:var(--blau);
  border:1px solid rgba(32,51,196,.35);box-shadow:none;
}
.wegknopf.leise:hover{background:rgba(32,51,196,.06);transform:none;box-shadow:none}

/* =========================================================
   SEITLICH HEREIN
   Die Posten kommen abwechselnd von links und rechts. Ein
   Wechsel im Takt haelt die Aufmerksamkeit besser als
   fuenfmal dieselbe Bewegung.
   ========================================================= */
.bogen.da .posten.seitlich{animation:seitlichAuf .9s cubic-bezier(.2,.8,.25,1) both}
.bogen.da .posten.seitlich:nth-of-type(2){animation-delay:.12s}
.bogen.da .posten.seitlich:nth-of-type(3){animation-delay:.24s}
.bogen.da .posten.seitlich:nth-of-type(4){animation-delay:.36s}
@keyframes seitlichAuf{
  from{opacity:0;transform:translateX(var(--her,-34px))}
  to  {opacity:1;transform:none}
}
.posten.links {--her:-34px}
.posten.rechts{--her: 34px}

/* Der Wegweiser kommt von unten nach, Knopf fuer Knopf. */
.bogen.da .wegknopf{animation:satzAuf .7s cubic-bezier(.2,.8,.25,1) both}
.bogen.da .wegknopf:nth-child(2){animation-delay:.1s}
.bogen.da .wegknopf:nth-child(3){animation-delay:.2s}

/* =========================================================
   AM BILDLAUF STATT AN DER UHR
   Wo der Browser es kann, haengen Fortschrittslinie und
   Federzug direkt am Scrollen: die Schrift entsteht genau so
   schnell, wie der Gast weiterliest. Kann er es nicht, bleibt
   der Auftritt beim Erreichen - beides sieht richtig aus.
   ========================================================= */
.fortschritt{display:none}

@supports (animation-timeline: scroll()){
  .fortschritt{
    display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:50;
    transform-origin:left center;transform:scaleX(0);
    background:linear-gradient(90deg,rgba(32,51,196,.35),var(--blau));
    animation:fortschrittZug linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes fortschrittZug{to{transform:scaleX(1)}}

  .bogen.da .schreiben,.fuss.da .schreiben{
    animation:federzug linear both;
    animation-timeline:view();
    animation-range:entry 24% cover 42%;
  }
  .bogen.da .schreiben::after,.fuss.da .schreiben::after{
    animation:federpunkt linear;
    animation-timeline:view();
    animation-range:entry 24% cover 42%;
  }
}

@media (prefers-reduced-motion:reduce){
  .haus path,.haus circle{stroke-dashoffset:0;animation:none !important}
  .bogen.da .posten.seitlich,.bogen.da .wegknopf{animation:none}
  .fortschritt{display:none}
}

/* =========================================================
   SPRACHWAHL UND UNTERSCHRIFT
   ========================================================= */
.sprachwahl{
  position:fixed;z-index:45;
  top:calc(14px + env(safe-area-inset-top, 0px));right:14px;
  display:flex;align-items:center;gap:5px;
  background:rgba(255,253,252,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(200,150,148,.32);border-radius:999px;
  padding:5px 8px;cursor:pointer;
  box-shadow:0 3px 12px rgba(150,95,95,.12);
  transition:background .25s ease,transform .2s ease;
}
.sprachwahl:hover{background:rgba(255,253,252,.92);transform:translateY(-1px)}
.sprachwahl:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.flagge{
  width:19px;height:19px;display:block;
  opacity:.4;filter:grayscale(1);
  transition:opacity .3s ease,filter .3s ease,transform .3s cubic-bezier(.3,1.4,.5,1);
}
.flagge svg{width:100%;height:100%;display:block}
.flagge.aktiv{opacity:1;filter:none;transform:scale(1.1)}

.unterschrift{
  font-family:'Great Vibes',cursive;
  font-size:clamp(23px,6.2vw,29px);line-height:1.2;
  margin:14px 0 0;color:var(--gold);
}

@media (prefers-reduced-motion:reduce){
  .flagge,.sprachwahl{transition:none}
}