/* ============================================================
   LEBEN-PASS · Werkstatt-Fassung · Stand 18.10.2026
   Glanz, Verläufe, Schattierung und Bewegung für Funnel- und Landingpages.
   Standard und Einbau: LEBEN-PASS-STANDARD.md im selben Ordner. Prüfung: pruefe_leben.py.

   Diese Schicht trägt keine Marke. Jede Farbe kommt aus einem --leben-*-Token. Die
   Rückfallwerte sind absichtlich grau: fehlt ein Token, sieht man es sofort. Feste Werte
   stehen nur in Masken, dort heißt Schwarz "sichtbar".

   Einbau:
   1. leben.css nach dem eigenen Grund-CSS laden und die Tokens auf die Marke abbilden,
      Werte aus der DESIGN.md des Projekts, z. B.
      :root{--leben-akzent:var(--marke);--leben-grund:var(--seite);--leben-dunkel:var(--tinte)}
      Die Rückfälle hier stehen in :where(:root) und haben damit kein Gewicht. Die Abbildung
      gewinnt immer, egal ob sie vor oder nach leben.css steht.
   2. Hook-Klassen an die Bausteine setzen (Tabelle im Standard). Ohne Klasse wirkt nichts.
   3. leben.js am Ende von <body> laden. Im <head> zusätzlich:
      <script>document.documentElement.classList.add('leben-js')</script>

   Belegte Pseudo-Elemente: ::before an .leben-block, .leben-karte, .leben-kasten und am
   Bildpaar im dunklen Block. ::after an .leben-karte, .leben-paar, .leben-knopf,
   .leben-option, .leben-foto, .leben-punkte, .leben-kenburns und .leben-titellinie.
   Ein Element trägt deshalb nie zwei dieser Rollen zugleich (Block und Karte, Foto und Punkte).

   Die vier Regeln stehen im Standard. Kurz: eine Kurve (--leben-ease) und nur transform und
   opacity. Benannte Ausnahmen sind der Lichtring (dreht über @property) sowie Glut und
   Nachglanz (je ein kurzer Schatten-Puls). Unter prefers-reduced-motion steht alles im
   Endzustand (Abschnitt R). Kontrast wird am Pixel gemessen. Das Handy bekommt über
   .leben-fokus, was am Rechner beim Zeigen passiert.
   ============================================================ */

:where(:root){
  --leben-ease:cubic-bezier(.16,1,.3,1);

  /* Farben: auf die Marke abbilden. Grau heißt: Token fehlt. */
  --leben-akzent:#6b6b73;
  --leben-akzent-2:var(--leben-akzent);
  --leben-licht:color-mix(in srgb,var(--leben-akzent) 45%,var(--leben-weiss));
  --leben-grund:#f3f3f1;
  --leben-grund-2:var(--leben-grund);
  --leben-karte-grund:var(--leben-weiss);
  --leben-dunkel:#27272c;
  --leben-dunkel-2:color-mix(in srgb,var(--leben-dunkel) 72%,var(--leben-akzent));
  --leben-dunkel-3:color-mix(in srgb,var(--leben-dunkel) 52%,var(--leben-akzent));
  --leben-auf-dunkel:var(--leben-weiss);
  --leben-auf-akzent:var(--leben-weiss);
  --leben-weiss:#fff;
  --leben-schatten-farbe:var(--leben-dunkel);
  --leben-fleck-farbe:var(--leben-akzent);

  /* Form */
  --leben-radius:12px;
  --leben-schatten:0 10px 28px color-mix(in srgb,var(--leben-schatten-farbe) 12%,transparent);
  --leben-schatten-gross:0 18px 40px color-mix(in srgb,var(--leben-schatten-farbe) 16%,transparent);
  --leben-knopf-schatten:var(--leben-schatten);
  --leben-knopf-flaeche:linear-gradient(135deg,var(--leben-akzent) 0%,color-mix(in srgb,var(--leben-akzent) 85%,var(--leben-dunkel)) 50%,color-mix(in srgb,var(--leben-akzent) 65%,var(--leben-dunkel)) 100%);

  /* Lichtflecken: Deckkraft je Fleck. Leise halten, sonst kippt der Kontrast (Regel 3). */
  --leben-fleck-1:.34;--leben-fleck-2:.14;--leben-fleck-3:.26;
  --leben-kopf-fleck-1:.16;--leben-kopf-fleck-2:.07;--leben-kopf-fleck-3:.12;
  --leben-versatz:0s;   /* Atmung je Block versetzen: -7s, -13s. Nie über :nth-child, das zählt fremde Sektionen mit. */

  /* Schattiertes Foto hinter einer Sektion. Pfad ab Seitenwurzel: url("/bilder/x.jpg") */
  --leben-foto:none;--leben-foto-deckkraft:.22;--leben-foto-lage:100% 20%;
  --leben-foto-groesse:cover;   /* füllt die Sektion, keine harte Bildkante. Hochformat rechts: auto 115% */

  /* Laufband und Ken Burns */
  --leben-laufband-dauer:38s;
  --leben-laufband-ausbruch:0px;   /* am Handy bis an den Rand: Seitenrand der Seite eintragen, z. B. 20px */
  --leben-bildpunkt:50% 30%;       /* Ken Burns: Bildausschnitt UND Zoom-Mitte, sonst wandert das Gesicht */

  --leben-winkel:0deg;   /* Rückfall für Browser ohne @property, sonst verliert das Video Rand und Fläche */
}
@property --leben-winkel{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- Keyframes ---------- */
@keyframes leben-atmen{from{transform:translate3d(0,-6%,0);opacity:.85}to{transform:translate3d(0,6%,0);opacity:1}}
@keyframes leben-glanz{from{transform:translateX(-160%) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
@keyframes leben-ring{to{--leben-winkel:360deg}}
@keyframes leben-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}70%{transform:translate(-50%,-50%) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes leben-nachglanz{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--leben-akzent) 0%,transparent),var(--leben-schatten)}
  50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--leben-akzent) 45%,transparent),var(--leben-schatten)}
  100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--leben-akzent) 60%,transparent),var(--leben-schatten)}}
@keyframes leben-glut{
  0%,100%{box-shadow:var(--leben-knopf-schatten)}
  50%{box-shadow:0 2px 4px color-mix(in srgb,var(--leben-schatten-farbe) 18%,transparent),0 16px 40px color-mix(in srgb,var(--leben-akzent) 45%,transparent)}}
@keyframes leben-parallax{from{transform:translate3d(0,-6%,0) scale(1.14)}to{transform:translate3d(0,6%,0) scale(1.14)}}
@keyframes leben-laufband{to{transform:translateX(-50%)}}
@keyframes leben-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes leben-notnetz{to{opacity:1;transform:none}}

/* ---------- Auftritt: Blöcke blenden beim Hinscrollen ein (leben.js setzt .leben-in) ----------
   Nur Blöcke wie Karten, Bildpaare und Kästen, nie Fließtext. Versteckt wird nur unter
   html.leben-js. Kommt leben.js nicht an (404, Fehler), blendet das Notnetz nach 4 s alles ein. */
.leben-auftritt{transition:opacity .7s var(--leben-ease),transform .7s var(--leben-ease)}
html.leben-js .leben-auftritt:not(.leben-in){opacity:0;transform:translateY(24px) scale(.98)}
html.leben-js:not(.leben-lebt) .leben-auftritt:not(.leben-in){animation:leben-notnetz 0s 4s forwards}

/* ---------- 1. Atmende Lichtflecken (jede Sektion, im Kopf leiser) ----------
   overflow:clip schneidet, ohne Scroll-Container zu werden (hidden killt position:sticky).
   Links und rechts inset 0: die Flecken sind nie breiter als die Sektion, kein Querscroll. */
.leben-block{position:relative;isolation:isolate;overflow:clip}
.leben-block::before{content:"";position:absolute;inset:-12% 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 18% 28%,color-mix(in srgb,var(--leben-fleck-farbe) calc(var(--leben-fleck-1) * 100%),transparent),transparent 70%),
    radial-gradient(34% 30% at 84% 22%,color-mix(in srgb,var(--leben-fleck-farbe) calc(var(--leben-fleck-2) * 100%),transparent),transparent 70%),
    radial-gradient(42% 38% at 62% 88%,color-mix(in srgb,var(--leben-fleck-farbe) calc(var(--leben-fleck-3) * 100%),transparent),transparent 70%);
  animation:leben-atmen 18s var(--leben-ease) infinite alternate;animation-delay:var(--leben-versatz)}
.leben-kopf{--leben-fleck-1:var(--leben-kopf-fleck-1);--leben-fleck-2:var(--leben-kopf-fleck-2);--leben-fleck-3:var(--leben-kopf-fleck-3)}
/* Abschalten je Block: --leben-fleck-1:0;--leben-fleck-2:0;--leben-fleck-3:0 */

/* ---------- 2. Schattiertes Foto hinter der Sektion, Parallax am Rechner ---------- */
.leben-foto{position:relative;isolation:isolate;overflow:clip}
.leben-foto::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--leben-foto) var(--leben-foto-lage)/var(--leben-foto-groesse) no-repeat;
  opacity:var(--leben-foto-deckkraft);filter:saturate(.8);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,transparent 35%,#000 75%)}
.leben-foto--links::after{-webkit-mask-image:linear-gradient(90deg,#000 15%,transparent 60%);mask-image:linear-gradient(90deg,#000 15%,transparent 60%)}
.leben-parallax{overflow:hidden}
@supports (animation-timeline: view()){
  @media(min-width:900px){
    .leben-parallax img{animation:leben-parallax linear both;animation-timeline:view();transform:scale(1.14)}
  }
}

/* ---------- 3. Dunkler Kontrastblock (eine Sektion in der Mitte) ----------
   Text hell, Flecken in Lichtfarbe. Die hellste Verlaufsstelle muss 4,5:1 halten, bei hellen
   Marken --leben-dunkel-2 und -3 selbst setzen. Karten im Block behalten ihre eigene Schrift. */
.leben-dunkel{background:linear-gradient(160deg,var(--leben-dunkel) 0%,var(--leben-dunkel-2) 48%,var(--leben-dunkel-3) 100%);color:var(--leben-auf-dunkel);
  --leben-fleck-farbe:var(--leben-licht);--leben-fleck-1:.30;--leben-fleck-2:.22;--leben-fleck-3:0}
.leben-dunkel :is(h1,h2,h3,h4,p,li,figcaption,blockquote):not(.leben-karte *,.leben-kasten *){color:var(--leben-auf-dunkel)}
.leben-dunkel :is(p,li):not(.leben-karte *,.leben-kasten *){color:color-mix(in srgb,var(--leben-auf-dunkel) 90%,transparent)}

/* ---------- 4. Karten: Ring, Glanzlauf beim Erscheinen und beim Zeigen, Hub 6 px ----------
   Glanz beim Erscheinen auf ::before, Glanz beim Zeigen auf ::after. Getrennt, weil eine
   Animation mit gleichem Namen nicht neu startet: am selben Pseudo-Element liefe der
   Zeige-Glanz nach dem ersten Erscheinen nie wieder. */
.leben-karte,.leben-kasten{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--leben-radius)}
.leben-karte{border-color:transparent;
  outline:1px solid color-mix(in srgb,var(--leben-akzent) 28%,transparent);outline-offset:-1px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--leben-weiss) 50%,transparent) inset,var(--leben-schatten);
  transition:opacity .7s var(--leben-ease),transform .5s var(--leben-ease),box-shadow .5s var(--leben-ease)}
/* Echter Verlaufsrand (Referenz-Optik): setzt den Kartengrund, deshalb nur auf Wunsch und mit --leben-karte-grund */
.leben-karte.leben-verlaufsrand{outline:0;border:1px solid transparent;
  background:linear-gradient(var(--leben-karte-grund),var(--leben-karte-grund)) padding-box,
             linear-gradient(150deg,color-mix(in srgb,var(--leben-licht) 95%,transparent) 0%,color-mix(in srgb,var(--leben-weiss) 70%,transparent) 45%,color-mix(in srgb,var(--leben-akzent) 60%,transparent) 100%) border-box}
.leben-karte::before,.leben-karte::after,.leben-kasten::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:42%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--leben-weiss) 60%,transparent) 50%,transparent 80%);transform:translateX(-160%) skewX(-18deg)}
.leben-karte.leben-in::before,.leben-kasten.leben-in::before{opacity:1;animation:leben-glanz 1.5s var(--leben-ease) .4s 1 both}
@media(hover:hover){
  .leben-karte:hover{transform:var(--leben-neigung,) translateY(-6px);outline-color:color-mix(in srgb,var(--leben-akzent) 45%,transparent);
    box-shadow:0 1px 0 color-mix(in srgb,var(--leben-weiss) 50%,transparent) inset,var(--leben-schatten-gross),0 0 0 4px color-mix(in srgb,var(--leben-akzent) 16%,transparent)}
  .leben-karte:hover::after{opacity:1;animation:leben-glanz 1.1s var(--leben-ease) 1 both}
}
/* Kasten (Fragebogen, Bewerbung): Ring und Glanz beim Erscheinen, kein Hub. Braucht der Kasten
   overflow:visible (Aufklapp-Liste), dort .leben-kasten weglassen und nur den Ring übernehmen. */
.leben-kasten{box-shadow:0 1px 0 color-mix(in srgb,var(--leben-weiss) 90%,transparent) inset,0 0 0 6px color-mix(in srgb,var(--leben-akzent) 14%,transparent),var(--leben-schatten-gross);
  transition:opacity .7s var(--leben-ease),box-shadow .6s var(--leben-ease)}

/* ---------- 5. Pfeil und Leuchtring am Nachher-Bild ----------
   Markup: .leben-paar mit zwei figure, das letzte ist "nachher" (oder Klasse .leben-nachher). */
.leben-paar{position:relative}
.leben-paar::after{content:"\2192";position:absolute;left:50%;top:40%;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:linear-gradient(135deg,var(--leben-akzent),var(--leben-akzent-2));color:var(--leben-auf-akzent);font-weight:700;font-size:20px;line-height:1;
  box-shadow:0 6px 18px color-mix(in srgb,var(--leben-akzent) 45%,transparent),0 0 0 3px color-mix(in srgb,var(--leben-weiss) 90%,transparent);
  opacity:0;transform:translate(-50%,-50%) scale(.3)}
.leben-paar.leben-in::after{animation:leben-pop .6s var(--leben-ease) .55s 1 both}
.leben-paar figure:last-of-type img,.leben-paar .leben-nachher img{box-shadow:0 0 0 3px color-mix(in srgb,var(--leben-akzent) 60%,transparent),var(--leben-schatten)}
.leben-paar.leben-in figure:last-of-type img,.leben-paar.leben-in .leben-nachher img{animation:leben-nachglanz 1.6s var(--leben-ease) .7s 1 both}
.leben-paar figure:last-of-type figcaption,.leben-paar .leben-nachher figcaption{color:var(--leben-akzent)}
.leben-paar img{transition:transform .6s var(--leben-ease)}
@media(hover:hover){.leben-paar:hover img{transform:scale(1.02)}}
@media(min-width:680px){.leben-paar::after{width:44px;height:44px;font-size:22px}}
/* Im dunklen Block: Pfeil umgedreht, Leuchtkreis hinter dem Paar */
.leben-dunkel .leben-paar::before{content:"";position:absolute;inset:-10% -8%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--leben-licht) 28%,transparent),transparent 70%)}
.leben-dunkel .leben-paar::after{background:var(--leben-auf-dunkel);color:var(--leben-akzent);
  box-shadow:0 6px 18px color-mix(in srgb,var(--leben-schatten-farbe) 35%,transparent),0 0 0 3px color-mix(in srgb,var(--leben-licht) 60%,transparent)}
/* Beschriftung im Dunkeln hell, nie in der Lichtfarbe: auf dem Leuchtkreis fällt sie sonst unter 4,5:1 (Probe 18.10.: 3,2:1) */
.leben-dunkel .leben-paar figure:last-of-type figcaption,.leben-dunkel .leben-paar .leben-nachher figcaption{color:var(--leben-auf-dunkel)}

/* ---------- 6. Ergebnis als Pille, Name oder Schluss-Titel als Verlaufstext ----------
   Verlaufstext nur aus dunklen Akzenttönen, sonst fällt der Kontrast. Ohne background-clip:text
   bleibt die Schrift einfarbig im Akzent. */
.leben-pille{display:inline-block;padding:7px 12px;border-radius:999px;color:var(--leben-auf-akzent);
  background:linear-gradient(135deg,var(--leben-akzent),color-mix(in srgb,var(--leben-akzent) 70%,var(--leben-dunkel)));
  box-shadow:0 4px 12px color-mix(in srgb,var(--leben-akzent) 30%,transparent)}
.leben-verlaufstext{color:var(--leben-akzent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .leben-verlaufstext{background:linear-gradient(90deg,var(--leben-akzent) 0%,color-mix(in srgb,var(--leben-akzent) 55%,var(--leben-dunkel)) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ---------- 7. Symbole in Verlaufs-Kacheln (Nutzen dreht sich, Ablauf-Kreis steht) ---------- */
.leben-symbol{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--leben-akzent) 45%,transparent),color-mix(in srgb,var(--leben-akzent) 12%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--leben-weiss) 85%,transparent),0 6px 16px color-mix(in srgb,var(--leben-akzent) 16%,transparent);
  transition:transform .5s var(--leben-ease)}
.leben-symbol svg{stroke:var(--leben-akzent)}
@media(hover:hover){.leben-karte:hover .leben-symbol:not(.leben-symbol--rund){transform:rotate(-6deg) scale(1.08)}}
.leben-symbol--rund{width:44px;height:44px;flex-basis:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--leben-akzent),color-mix(in srgb,var(--leben-akzent) 70%,var(--leben-dunkel)));
  box-shadow:0 6px 16px color-mix(in srgb,var(--leben-akzent) 32%,transparent),inset 0 1px 0 color-mix(in srgb,var(--leben-weiss) 25%,transparent)}
.leben-symbol--rund svg{stroke:var(--leben-auf-akzent)}

/* ---------- 8. Verlaufsknopf mit Glanz, Kopf-Knopf glüht zweimal ----------
   Fläche und Schrift aus Tokens. Weiße Schrift muss auf jeder Verlaufsstufe 4,5:1 halten. */
.leben-knopf{position:relative;isolation:isolate;overflow:hidden;background:var(--leben-knopf-flaeche);color:var(--leben-auf-akzent);box-shadow:var(--leben-knopf-schatten);
  transition:transform .35s var(--leben-ease),box-shadow .35s var(--leben-ease)}
.leben-knopf::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--leben-weiss) 35%,transparent) 50%,transparent 80%);transform:translateX(-160%) skewX(-18deg)}
@media(hover:hover){.leben-knopf:hover::after{animation:leben-glanz .9s var(--leben-ease) 1 both}}
.leben-knopf:focus-visible::after{animation:leben-glanz .9s var(--leben-ease) 1 both}
.leben-glut{animation:leben-glut 2s var(--leben-ease) 1s 2}

/* ---------- 9. Lichtring ums Video (Kopf) ---------- */
.leben-video{border:3px solid transparent;
  background:linear-gradient(var(--leben-grund-2),var(--leben-grund-2)) padding-box,
             conic-gradient(from var(--leben-winkel),var(--leben-licht) 0%,var(--leben-weiss) 20%,var(--leben-akzent) 45%,var(--leben-weiss) 70%,var(--leben-licht) 100%) border-box;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--leben-akzent) 18%,transparent),var(--leben-schatten-gross);animation:leben-ring 10s linear infinite}

/* ---------- 10. Foto-Laufband: Kacheln gekippt, Ränder weich, Zeigen, Tipp und Tastatur halten an ----------
   Markup: .leben-laufband > .leben-spur > .leben-kachel > img. Den Kachelsatz ZWEIMAL
   hintereinander in die Spur, den zweiten mit aria-hidden="true", sonst springt die Schleife. */
.leben-laufband{overflow:hidden;padding:26px 0 30px;margin-inline:calc(-1 * var(--leben-laufband-ausbruch));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.leben-spur{display:flex;width:max-content;animation:leben-laufband var(--leben-laufband-dauer) linear infinite}
.leben-kachel{position:relative;flex:0 0 auto;width:190px;aspect-ratio:3/4;margin-right:12px;overflow:hidden;border-radius:var(--leben-radius);
  border:3px solid var(--leben-weiss);background:var(--leben-grund-2);box-shadow:var(--leben-schatten);
  transition:transform .5s var(--leben-ease),box-shadow .5s var(--leben-ease)}
.leben-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--leben-kachel-lage,50% 22%);display:block}
.leben-kachel:nth-child(odd){transform:rotate(-2deg)}
.leben-kachel:nth-child(even){transform:rotate(2deg) translateY(8px)}
@media(min-width:680px){
  .leben-laufband{margin-inline:0}
  .leben-kachel{width:230px;margin-right:16px}
  .leben-kachel:nth-child(odd){transform:rotate(-2.5deg)}
  .leben-kachel:nth-child(even){transform:rotate(2.5deg) translateY(10px)}
}
@media(hover:hover){   /* nach der Breiten-Regel, sonst schluckt die Kippung den Hub */
  .leben-kachel:hover{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:var(--leben-schatten-gross),0 0 0 4px color-mix(in srgb,var(--leben-licht) 35%,transparent)}
  .leben-laufband:hover .leben-spur{animation-play-state:paused}
}
.leben-laufband:focus-within .leben-spur,.leben-laufband.leben-halt .leben-spur{animation-play-state:paused}

/* ---------- 11. Ken Burns (Foto im Fragebogen-Kasten), unten weich in den Kartengrund ---------- */
.leben-kenburns{position:relative;overflow:hidden}
.leben-kenburns img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--leben-bildpunkt);transform-origin:var(--leben-bildpunkt);
  animation:leben-kenburns 14s var(--leben-ease) infinite alternate}
.leben-kenburns::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--leben-karte-grund) 60%,transparent) 80%,var(--leben-karte-grund) 100%)}

/* ---------- 12. Etikett als Pille, Titel-Linie als Verlauf (Schluss-Titel: .leben-verlaufstext) ---------- */
.leben-etikett{display:inline-block;padding:6px 13px;border-radius:999px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--leben-akzent) 16%,transparent),color-mix(in srgb,var(--leben-akzent) 4%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--leben-weiss) 80%,transparent)}
.leben-dunkel .leben-etikett{color:var(--leben-auf-dunkel);background:color-mix(in srgb,var(--leben-auf-dunkel) 12%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--leben-auf-dunkel) 12%,transparent)}
.leben-titellinie::after{content:"";display:block;width:56px;height:3px;margin:14px 0 0;border-radius:3px;
  background:linear-gradient(90deg,var(--leben-licht),var(--leben-akzent));transform-origin:left center;transition:transform .9s var(--leben-ease) .2s}
.leben-titellinie--mitte::after{margin-inline:auto;transform-origin:center}
.leben-dunkel .leben-titellinie::after{background:var(--leben-licht)}
/* Die Linie zieht sich nur auf, wenn ihr Block einblendet. Außerhalb eines Auftritts steht sie. */
html.leben-js .leben-auftritt:not(.leben-in) .leben-titellinie::after,
html.leben-js .leben-titellinie.leben-auftritt:not(.leben-in)::after{transform:scaleX(0)}

/* ---------- 13. FAQ hebt sich (Zeile beim Zeigen und offen, Frage färbt sich) ---------- */
.leben-faq{border-radius:var(--leben-radius) var(--leben-radius) 0 0}
.leben-faq[open],.leben-faq.leben-offen{background:linear-gradient(90deg,color-mix(in srgb,var(--leben-akzent) 12%,transparent),transparent 70%)}
@media(hover:hover){
  .leben-faq:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--leben-akzent) 12%,transparent),transparent 70%)}
  .leben-faq:hover summary{color:var(--leben-akzent)}
}

/* ---------- 16. Fragebogen innen: Antwort mit Glanz und Ring, Fortschritt als Verlauf, Punktraster ---------- */
.leben-option{position:relative;isolation:isolate;overflow:hidden}
.leben-option::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--leben-weiss) 50%,transparent) 50%,transparent 80%);transform:translateX(-160%) skewX(-18deg)}
@media(hover:hover){.leben-option:hover::after{animation:leben-glanz .9s var(--leben-ease) 1 both}}
.leben-option.leben-gewaehlt,.leben-option[aria-pressed="true"],.leben-option[aria-checked="true"]{
  box-shadow:0 0 0 2px var(--leben-akzent),0 0 0 6px color-mix(in srgb,var(--leben-akzent) 16%,transparent),var(--leben-schatten)}
/* Eigene Regel: kennt ein Browser :has() nicht, verwirft er nur diese Zeile, nicht die darüber */
.leben-option:has(input:checked){box-shadow:0 0 0 2px var(--leben-akzent),0 0 0 6px color-mix(in srgb,var(--leben-akzent) 16%,transparent),var(--leben-schatten)}
.leben-fortschritt{background:linear-gradient(90deg,var(--leben-licht),var(--leben-akzent))}
.leben-punkte{position:relative;isolation:isolate}
.leben-punkte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(color-mix(in srgb,var(--leben-akzent) 13%,transparent) 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 100%)}

/* ---------- 15. Scroll-Fokus auf dem Handy (leben.js setzt .leben-fokus nur ohne Maus) ---------- */
.leben-karte.leben-fokus{transform:translateY(-6px);outline-color:color-mix(in srgb,var(--leben-akzent) 45%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--leben-weiss) 50%,transparent) inset,var(--leben-schatten-gross),0 0 0 4px color-mix(in srgb,var(--leben-akzent) 20%,transparent)}
.leben-karte.leben-fokus::after{opacity:1;animation:leben-glanz 1.1s var(--leben-ease) .1s 1 both}
.leben-karte.leben-fokus .leben-symbol:not(.leben-symbol--rund){transform:rotate(-6deg) scale(1.08)}
.leben-paar.leben-fokus img,.leben-karte.leben-fokus .leben-paar img{transform:scale(1.03)}
.leben-kasten.leben-fokus{box-shadow:0 1px 0 color-mix(in srgb,var(--leben-weiss) 90%,transparent) inset,0 0 0 8px color-mix(in srgb,var(--leben-akzent) 22%,transparent),var(--leben-schatten-gross)}
.leben-kasten.leben-fokus .leben-knopf::after{animation:leben-glanz 1s var(--leben-ease) .3s 1 both}

/* ---------- R. REDUCED MOTION: jede Animation aus, Endzustand bleibt sichtbar (Regel 2) ---------- */
@media(prefers-reduced-motion:reduce){
  .leben-auftritt,html.leben-js .leben-auftritt:not(.leben-in){opacity:1 !important;transform:none !important;animation:none !important}
  .leben-block::before,.leben-karte::before,.leben-karte::after,.leben-kasten::before,.leben-paar::after,.leben-paar img,
  .leben-knopf,.leben-knopf::after,.leben-glut,.leben-video,.leben-parallax img,.leben-spur,.leben-kenburns img,.leben-option::after{animation:none !important}
  /* Glanzstreifen bleiben unsichtbar, sonst liegt ein stehender Weißverlauf auf jeder Karte */
  .leben-karte::before,.leben-karte::after,.leben-kasten::before,.leben-knopf::after,.leben-option::after{opacity:0 !important}
  /* Der Pfeil steht im Endzustand */
  .leben-paar::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
  /* Kein Hub, kein Zoom, keine Übergänge */
  .leben-karte:hover,.leben-karte.leben-fokus,.leben-paar img,.leben-symbol,.leben-titellinie::after{transform:none !important}
  .leben-auftritt,.leben-karte,.leben-kasten,.leben-knopf,.leben-kachel,.leben-paar img,.leben-symbol,.leben-titellinie::after{transition:none !important}
}