/* Gemeinsam für alle drei Entwürfe. Schriften kommen per --lb-schrift aus dem Entwurf. */
.lb{
  --lb-grund:#241C17; --lb-creme:#F0E8DB; --lb-creme-2:#C9BCA9; --lb-gold:#B9A37C;
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:var(--lb-grund); color:var(--lb-creme);
  font-family:var(--lb-schrift, system-ui, sans-serif);
  display:grid; grid-template-rows:auto 1fr;
  opacity:0; transition:opacity .28s ease, overlay .28s allow-discrete, display .28s allow-discrete;
}
.lb:not([open]){display:none}
.lb[open]{opacity:1}
@starting-style{.lb[open]{opacity:0}}
.lb::backdrop{background:#241C17}

.lb-kopf{display:flex; align-items:center; gap:16px 24px; padding:14px clamp(16px,3vw,32px); border-bottom:1px solid #463B32}
.lb-titel{margin:0; font-size:17px; font-weight:600; flex:1; min-width:0}
.lb-zahl{margin:0; font-size:15px; color:var(--lb-creme-2); font-variant-numeric:tabular-nums}
.lb-zu{
  min-height:44px; padding:0 16px; display:inline-flex; align-items:center; gap:10px;
  background:#352B24; color:var(--lb-creme); border:1px solid #463B32; font:inherit; font-size:16px; cursor:pointer;
  transition:border-color .16s ease;
}
.lb-zu span{font-size:22px; line-height:1}
.lb-zu:hover{border-color:var(--lb-gold)}

.lb-bild{margin:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:clamp(12px,2.5vw,28px) clamp(16px,7vw,96px) 20px}
.lb-bild img{
  width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 190px); display:block;
  user-select:none; touch-action:pan-y; opacity:0; transition:opacity .32s ease;
}
.lb-bild img.an{opacity:1}
.lb-bild figcaption{max-width:70ch; margin-inline:auto; text-align:center; font-size:17px; line-height:1.55; color:var(--lb-creme-2)}

.lb-pfeil{
  position:absolute; top:50%; translate:0 -50%; width:52px; height:52px;
  display:grid; place-items:center; background:#352B24; color:var(--lb-creme);
  border:1px solid #463B32; font-size:30px; line-height:1; cursor:pointer; transition:border-color .16s ease;
}
.lb-pfeil:hover{border-color:var(--lb-gold)}
.lb-zurueck{left:clamp(8px,2vw,24px)} .lb-weiter{right:clamp(8px,2vw,24px)}
.lb :focus-visible{outline:2px solid var(--lb-gold); outline-offset:3px}
@media (max-width:719px){
  .lb-pfeil{top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); translate:none}
  .lb-bild{padding-bottom:84px}
  .lb-bild img{max-height:calc(100dvh - 250px)}
  .lb-zu{padding:0 12px}
  .lb-titel{font-size:15px; line-height:1.3}
  .lb-kopf{gap:10px 14px; padding-inline:16px}
}

/* Einblenden beim Scrollen: nur mit JS, nur ohne reduzierte Bewegung. */
@media (prefers-reduced-motion:no-preference){
  .js .zeigen{opacity:0; translate:0 18px; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1)}
  .js .zeigen.da{opacity:1; translate:none}

  /* Seitenkopf: Bild setzt sich, Tafel und ihre Zeilen steigen nacheinander auf. Läuft auch ohne JS. */
  .hero__bild{display:block; overflow:hidden}
  .hero__bild img{animation:pw-wash 1.8s cubic-bezier(.2,.7,.2,1) backwards}
  .hero__tafel{animation:pw-hoch .9s cubic-bezier(.2,.7,.2,1) .15s backwards}
  .hero__tafel > *{animation:pw-hoch .8s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--n,0)*.09s) backwards}
  .hero__tafel > :nth-child(2){--n:1} .hero__tafel > :nth-child(3){--n:2}
  .hero__tafel > :nth-child(4){--n:3} .hero__tafel > :nth-child(5){--n:4}
  .schwebe a{animation:pw-pop .5s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--n,0)*.07s) backwards}
  .schwebe a:nth-child(2){--n:1} .schwebe a:nth-child(3){--n:2} .schwebe a:nth-child(4){--n:3}
  /* Das Bild bleibt beim Wegscrollen leicht zurück; die Lücke oben liegt dabei immer schon ausserhalb des Schirms. */
  @supports (animation-timeline:view()){
    .hero__bild img{animation:pw-wash 1.8s cubic-bezier(.2,.7,.2,1) backwards, pw-drift linear both; animation-timeline:auto,view(); animation-range:normal, exit 0% exit 100%}
  }

  /* Überschriften Wort für Wort (galerie.js teilt sie in .w); der Rest des Kopfs folgt. */
  .js .kopf.zeigen, .js h2.worte.zeigen{opacity:1; translate:none}
  .js .zeigen .w{display:inline-block; opacity:0; translate:0 .35em; transition:opacity .6s ease calc(var(--i)*45ms), translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*45ms)}
  .js .kopf.zeigen > :not(.worte){opacity:0; translate:0 18px; transition:opacity .7s ease .25s, translate .7s cubic-bezier(.2,.7,.2,1) .25s}
  .js .zeigen.da .w, .js .kopf.zeigen.da > *{opacity:1; translate:none}

  /* Vorher/nachher: erst wischt das Vorher auf, dann das Nachher. */
  .js .paar.zeigen{opacity:1; translate:none}
  .js .paar.zeigen .paar__bild > span:first-child{clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.77,0,.175,1)}
  .js .paar.zeigen .lbl{opacity:0; transition:opacity .6s ease .7s}
  .js .paar.zeigen .paar__bild:nth-child(2) > span:first-child{transition-delay:.25s}
  .js .paar.zeigen .paar__bild:nth-child(2) .lbl{transition-delay:.95s}
  .js .paar.zeigen.da .paar__bild > span:first-child{clip-path:inset(0)}
  .js .paar.zeigen.da .lbl{opacity:1}

  .js .mandat.zeigen + .mandat.zeigen{transition-delay:.14s}

  /* Ablauf: Trennlinien ziehen sich von links, die Schritte folgen gestaffelt. */
  .js .liste.zeigen{opacity:1; translate:none}
  .js .liste.zeigen li{position:relative; border-top-color:transparent; --d:calc(var(--n,0)*.14s)}
  .js .liste.zeigen li:nth-child(2){--n:1} .js .liste.zeigen li:nth-child(3){--n:2} .js .liste.zeigen li:nth-child(4){--n:3}
  .js .liste.zeigen li:last-child{border-bottom-color:transparent}
  .js .liste.zeigen li::before, .js .liste.zeigen li:last-child::after{content:""; position:absolute; inset:-1px 0 auto; height:1px; background:var(--grund-3); transform:scaleX(0); transform-origin:0 50%; transition:transform .9s cubic-bezier(.77,0,.175,1) var(--d)}
  .js .liste.zeigen li:last-child::after{inset:auto 0 -1px; transition-delay:calc(var(--d) + .14s)}
  .js .liste.zeigen li > *{opacity:0; translate:0 14px; transition:opacity .6s ease calc(var(--d) + .15s), translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--d) + .15s)}
  .js .liste.zeigen.da li::before, .js .liste.zeigen.da li:last-child::after{transform:none}
  .js .liste.zeigen.da li > *{opacity:1; translate:none}

  /* FAQ klappt weich auf, wo der Browser es kann. */
  @supports (interpolate-size:allow-keywords){
    .fragen details{interpolate-size:allow-keywords}
    .fragen details::details-content{height:0; overflow:clip; opacity:0; transition:height .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease, content-visibility .3s allow-discrete}
    .fragen details[open]::details-content{height:auto; opacity:1}
  }
}
@keyframes pw-hoch{from{opacity:0; translate:0 16px}}
@keyframes pw-wash{from{scale:1.06}}
@keyframes pw-pop{from{opacity:0; transform:translateY(10px) scale(.92)}}
@keyframes pw-drift{to{translate:0 12%}}
@media (prefers-reduced-motion:reduce){
  .lb, .lb-bild img{transition:none}
}