/*
 * YOURLEAF – Schaufenster: Geräte-Rahmen, Produktbühnen und dezente Bewegung
 *
 * Ergänzt public/css/marke.css (Farben/Schriften nur über deren Variablen).
 * Wird nur von den Seiten geladen, die es brauchen (@push('styles')):
 * Startseite und Produkte. Bewegung schaltet public/js/schaufenster.js ein,
 * und nur, wenn der Besucher keine reduzierte Bewegung eingestellt hat.
 */

:root {
  --yl-geraet-rahmen: #0B1D26;
  --yl-geraet-schatten: 0 18px 30px -18px rgba(3, 50, 70, 0.45);
  --yl-bewegung-dauer: 0.7s;
  --yl-bewegung-kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------
   Geräte-Rahmen (Bildschirmfotos echter Produkte)
   ------------------------------------------------------------------ */
.yl-geraet {
  margin: 0;
  position: relative;
  background: var(--yl-grund);
}
.yl-geraet img {
  display: block;
  width: 100%;
  height: auto;
}

/* Browserfenster: schmale Leiste mit drei Punkten und Adresse */
.yl-geraet--browser {
  border: 1px solid var(--yl-linie);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--yl-geraet-schatten);
}
.yl-geraet__leiste {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.7rem;
  padding: 0 0.7rem;
  background: var(--yl-nebel);
  border-bottom: 1px solid var(--yl-linie);
}
.yl-geraet__leiste i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--yl-linie);
}
.yl-geraet__leiste i:first-child { background: var(--yl-mint); }
.yl-geraet__adresse {
  margin-left: 0.6rem;
  padding: 0.05rem 0.6rem;
  border-radius: 2px;
  background: var(--yl-grund);
  font-family: var(--yl-schrift);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--yl-grau);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.yl-abschnitt--dunkel .yl-geraet--browser,
.yl-held .yl-geraet--browser { border-color: rgba(171, 218, 198, 0.35); }

/* Telefon: dunkler Rahmen, runde Ecken */
.yl-geraet--telefon {
  padding: 0.45rem;
  background: var(--yl-geraet-rahmen);
  border-radius: 1.9rem;
  box-shadow: var(--yl-geraet-schatten);
}
.yl-geraet--telefon img { border-radius: 1.5rem; }

/* Ohne Rahmen (Bild bringt sein Gehäuse mit, z. B. die 8BOY-Konsole) */
.yl-geraet--frei { background: transparent; }
.yl-geraet--frei img { border-radius: 10px; filter: drop-shadow(0 14px 18px rgba(3, 50, 70, 0.25)); }

/* Bildunterschrift unter einem Gerät */
.yl-geraet-unterschrift {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--yl-text-leise);
}
.yl-abschnitt--dunkel .yl-geraet-unterschrift,
.yl-held .yl-geraet-unterschrift { color: var(--yl-text-auf-dunkel-leise); }

/* leicht schräg, richtet sich beim Überfahren auf */
.yl-schraeg {
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg) rotate(-0.6deg);
  transition: transform 0.6s var(--yl-bewegung-kurve);
}
.yl-schraeg--links { transform: perspective(1600px) rotateY(7deg) rotateX(2deg) rotate(0.6deg); }
.yl-schraeg:hover { transform: perspective(1600px) rotateY(0) rotateX(0) rotate(0); }

/* ------------------------------------------------------------------
   Startseite: Held mit Schaufenster
   ------------------------------------------------------------------ */
.yl-held--start {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
}
/* langsam wandernder Mint-Schimmer im Hintergrund */
.yl-held--start::before {
  content: '';
  position: absolute;
  inset: -30% -20% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(171, 218, 198, 0.16), rgba(171, 218, 198, 0));
  pointer-events: none;
}
.yl-held--start > .container { position: relative; }
.yl-start-held {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 3rem;
  align-items: center;
}
.yl-held--start h1 {
  font-size: clamp(2.6rem, 4.1vw, 3.75rem);
  line-height: 1.04;
  margin-bottom: 1.5rem;
  max-width: none;
}
.yl-held__zeile { display: block; }
@media (min-width: 1001px) {
  .yl-held__zeile { white-space: nowrap; }
}
/* Überschriften hier nicht automatisch trennen (main.css setzt hyphens: auto) */
.yl-held--start h1,
.yl-held--start h1 span,
.yl-cardit h2,
.yl-cardit h3,
.yl-produktbild h3,
.yl-produktbild__text .yl-produktkarte__was { hyphens: manual !important; }
.yl-held__wahr {
  display: inline-block;
  position: relative;
  color: var(--yl-mint);
}
/* Unterstreichung, die sich beim Laden aufzieht */
.yl-held__wahr::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.09em;
  background: var(--yl-mint);
  transform-origin: left center;
}
.yl-held__fuer {
  margin-top: 1.75rem !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  color: var(--yl-text-auf-dunkel-leise);
}
.yl-held__fuer strong { color: var(--yl-mint); font-weight: 600; }

/* Cinemagramme: Foto randabfallend über die ganze Fläche, Gerät rechts vom
   Text; links ein Petrol-Verlauf, damit der Text auf ruhigem Grund steht
   (WCAG AA). Maße per Container-Einheiten: das Bild deckt die Fläche immer ab
   (wie object-fit: cover), die Lage des Geräts im Foto (--anker-x/-y, Anteil
   der Bildbreite/-höhe, je Szene) wird an eine feste Stelle der Fläche
   gerechnet. Drei Szenen liegen übereinander und blenden ineinander. */
.yl-held--foto { background: var(--yl-petrol); }
.yl-held--foto::before { content: none; }
.yl-held__szene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;          /* eigene Ebene: Szenen und Verlauf bleiben unter dem Text */
  container-type: size;
  pointer-events: none;
  /* 118 % der Breite, aber höchstens 2,9 × die Höhe (Telefon ≤ 2/3 der
     Fläche, sonst schneidet ein breiter, flacher Held es oben und unten ab)
     und mindestens 2 × die Höhe (deckt die Fläche senkrecht ab) */
  --bild-b: max(min(118cqw, 290cqh), 200cqh);
  --telefon-x: 76cqw;
}
.yl-held__bild {
  position: absolute;
  top: 50%;
  /* --skala verkleinert eine Szene mit großem Gerät (Laptop), deckt aber
     senkrecht immer ab (200cqh, Seitenverhältnis 1,75) */
  --b: max(calc(var(--bild-b) * var(--skala, 1)), 200cqh);
  left: calc(var(--telefon-x) + var(--versatz, 0cqw) - var(--anker-x, 0.5923) * var(--b));
  width: var(--b);
  aspect-ratio: 1344 / 768;
  translate: 0 calc(-100% * var(--anker-y, 0.44));
  /* auf sehr breiten Bildschirmen beginnt das Foto im Petrol – Kante weich */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%);
  mask-image: linear-gradient(90deg, transparent, #000 12%);
}
/* Laptop breiter als Telefon und Tablet: etwas weiter nach rechts, aus dem
   Textverlauf heraus (nur breit; schmal steht das Gerät mittig) */
.yl-szene[data-szene="you"] { --versatz: 1cqw; }
.yl-held__bild > picture img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Szenenwechsel: die neue Szene blendet ÜBER der alten ein, die alte bleibt
   bis zum Ende deckend stehen (sonst scheint in der Mitte der Überblendung
   das Petrol durch und das Bild wird kurz dunkler). Szenen, die weder aktiv
   sind noch auslaufen (ist-laeuft), werden nicht gemalt. */
.yl-szene { opacity: 0; transition: opacity 1.4s ease-in-out; }
.yl-szene.ist-aktiv { opacity: 1; z-index: 1; }
.yl-szene.ist-laeuft:not(.ist-aktiv) { opacity: 1; transition: none; }
.yl-szene:not(.ist-aktiv):not(.ist-laeuft) { visibility: hidden; transition: none; }

/* Raum: Dampf und flackernde Lichter, Lage in Prozent des Fotos */
.yl-umgebung { position: absolute; inset: 0; overflow: hidden; }
.yl-dampf,
.yl-licht {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--b) * 100%);
  height: calc(var(--h) * 100%);
}
.yl-held .yl-dampf {
  max-width: none !important;   /* responsive.css begrenzt svg schmal auf 1,5 rem */
  max-height: none !important;
}
.yl-dampf {
  overflow: visible;
  opacity: 0;
  /* setzt weich über dem Tassenrand an und verliert sich nach oben */
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 16%, #000 50%, transparent 100%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 16%, #000 50%, transparent 100%);
}
.yl-dampf path {
  fill: none;
  stroke: rgb(255, 248, 238);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.yl-licht {
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 206, 140, 0.55), rgba(255, 178, 96, 0.22) 55%, rgba(255, 170, 90, 0));
  mix-blend-mode: screen;
  opacity: 0;
}
.yl-held__szene.ist-pausiert *,
.yl-held__szene.ist-pausiert *::after,
.yl-held__szene.ist-pausiert *::before { animation-play-state: paused !important; }
/* 8BOY: die Bernsteinkugel auf dem Kasten leuchtet auf, wenn im Spiel A
   gedrückt wird (Skript, Zeiten aus dem Mitschnitt) */
.yl-licht--kugel { transition: opacity 0.18s ease-out; }
.yl-bewegt .ist-laeuft .yl-licht--kugel { animation: none; opacity: 0.1; }
.yl-bewegt .ist-laeuft .yl-licht--kugel.ist-an { opacity: 0.85; transition-duration: 0.08s; }
/* Verlauf für die Lesbarkeit: deckt bis hinter das Textende fast voll,
   klingt vor dem Telefon aus; oben und unten ein Hauch Abdunklung */
.yl-held__szene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;                  /* über der gerade einblendenden Szene */
  background:
    linear-gradient(90deg,
      rgba(3, 50, 70, 0.97) 0%,
      rgba(3, 50, 70, 0.93) 42%,
      rgba(3, 50, 70, 0.86) 53%,
      rgba(3, 50, 70, 0.4) 61%,
      rgba(3, 50, 70, 0) 68%),
    linear-gradient(180deg,
      rgba(3, 50, 70, 0.35) 0%,
      rgba(3, 50, 70, 0) 18%,
      rgba(3, 50, 70, 0) 78%,
      rgba(3, 50, 70, 0.55) 100%);
}
.yl-held--foto > .container { position: relative; z-index: 1; }
.yl-held--foto .yl-start-held { min-height: 27rem; }

/* Displayinhalt über der eingesetzten Wallet. Koordinaten in Pixeln des
   Wallet-Ausschnitts (506 × 937, werkzeug/hero-bild/baue.py); das Skript legt
   die Fläche per matrix3d auf die gemessenen Displayecken. Farben mit dem
   Farbstich der Szene (baue.py gibt sie aus). Ohne Skript unsichtbar – dann
   zeigt das Foto die einmontierte Wallet als Standbild. */
.yl-display {
  position: absolute;
  left: 0;
  top: 0;
  width: 506px;                 /* Cardit: Wallet-Ausschnitt 506 × 937 */
  height: 937px;
  transform-origin: 0 0;
  overflow: hidden;
  visibility: hidden;
  font-family: var(--yl-schrift);
  color: rgb(26, 25, 26);
}
.yl-display.ist-montiert { visibility: visible; }
.yl-display__zahl {
  position: absolute;
  background: rgb(233, 229, 226);
  box-shadow: 0 0 3px 3px rgb(233, 229, 226);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.yl-display__zahl--guthaben {
  left: 46px;
  top: 258px;
  width: 96px;
  height: 58px;
  padding: 1px 0 0 3px;
  font-size: 61px;
  color: rgba(214, 186, 110, var(--deckkraft, 1));
}
.yl-display__zahl--gesamt {
  right: 48px;
  top: 279px;
  width: 60px;
  height: 32px;
  padding-top: 1px;
  font-size: 35px;
  text-align: right;
  color: rgba(26, 25, 26, var(--deckkraft, 1));
}
.yl-display__push {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  margin: 0;
  padding: 16px 20px 18px 84px;
  border-radius: 26px;
  background: rgba(244, 241, 237, 0.97);
  box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.4);
}
.yl-display__symbol {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgb(51, 130, 230);
  color: rgb(244, 241, 237);
  font: 700 32px/50px var(--yl-schrift-titel);
  text-align: center;
}
.yl-display__kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(82, 95, 98);
}
.yl-display__push b {
  display: block;
  font-size: 24px;
  line-height: 1.2;
}
.yl-display__text {
  display: block;
  font-size: 20px;
  line-height: 1.35;
  color: rgb(66, 76, 80);
}

/* 8BOY-Display: echte Runde „Ideenwerk“ als Video (960 × 640, Tablet quer),
   darunter das erste Bild als Standbild, bis das Video läuft. Das Skript
   führt das Video im Takt der Szene (Uhr: .yl-takt). Der Verlauf ::after
   entspricht dem im Foto eingebackenen (VERLAUF 0,94). */
.yl-display--8boy { width: 960px; height: 640px; }   /* Aufnahme 960 × 640 */
.yl-display--you  { width: 960px; height: 545px; }   /* Monitordisplay, 1280 × 726 zu 3/4 */
.yl-display--8boy::after,
.yl-display--you::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
}
.yl-display__feld { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.yl-display--8boy video.yl-display__feld { height: 100%; object-fit: cover; }
/* Uhr einer Szene ohne eigenes bewegtes Element (8BOY): unsichtbar, 18 s */
.yl-takt { position: absolute; width: 1px; height: 1px; opacity: 0; }
.yl-bewegt .ist-laeuft .yl-takt { animation: yl-takt 18s linear infinite; }
@keyframes yl-takt { from { translate: 0 0; } to { translate: 1px 0; } }

/* YOU-Display: der echte YOU-Weg an einer erfundenen Werkstatt. Kasten
   960 × 545 = gemessenes Monitordisplay (motiv.json, you_monitor), per
   matrix3d auf data-ecken gelegt wie bei Cardit. Oben eine Browserleiste,
   darunter die Fläche 960 × 505: alte Seite, Anfrage, PIN-Seite, neue Seite.
   Welche Seite steht, setzt das Skript (data-phase); Zeiger, Regler und
   Scrollen laufen als CSS-Animation im 18-s-Takt. */
.yl-display--you {
  background: #e8e5e1;
  font-family: var(--yl-schrift);
}
.yl-browser { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: #e8e5e1; }
.yl-browser > i { position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #ec6a5e; }
.yl-browser > i:nth-child(1) { left: 28px; }
.yl-browser > i:nth-child(2) { left: 47px; background: #f1be50; }
.yl-browser > i:nth-child(3) { left: 66px; background: #62c462; }
.yl-browser__adresse {
  position: absolute;
  left: 96px;
  top: 6px;
  height: 28px;
  width: 470px;
  border-radius: 14px;
  background: #fff;
  color: #3c4248;
  font: 500 19px/28px var(--yl-schrift);
  padding-left: 34px;
  white-space: nowrap;
}
.yl-browser__adresse svg { position: absolute; left: 13px; top: 7px; width: 12px; height: 14px; color: #6b737a; }
.yl-held .yl-browser__adresse svg { max-width: none !important; max-height: none !important; }
.yl-you__flaeche { position: absolute; left: 0; top: 40px; width: 960px; height: 505px; overflow: hidden; background: #fff; }
.yl-you__vorher,
.yl-you__nachher,
.yl-you__vergleich img { position: absolute; left: 0; top: 0; width: 960px; height: auto; display: block; }
.yl-you__seite,
.yl-you__neu,
.yl-you__vergleich { position: absolute; inset: 0; overflow: hidden; }
.yl-you__seite { opacity: 0; translate: 0 18px; transition: opacity 0.35s, translate 0.45s cubic-bezier(0.2, 0.8, 0.25, 1); }
.yl-you__neu { opacity: 0; transition: opacity 0.45s; }
.yl-you__vergleich { clip-path: inset(0 960px 0 0); }
[data-phase="anfrage"] .yl-you__seite--anfrage,
[data-phase="post"] .yl-you__seite--anfrage,
[data-phase="pin"] .yl-you__seite--pin { opacity: 1; translate: 0 0; }
[data-phase="neu"] .yl-you__neu { opacity: 1; }
/* Ohne Bewegung (Szene läuft nicht): Endzustand wie im Foto */
.yl-display--you:not([data-phase]) .yl-you__neu { opacity: 1; }

/* YOU-Seiten (Anfrage, PIN) nach you.yourleafx.de, groß gesetzt */
.yl-you__seite--anfrage { background: #e2eee8; }
.yl-you__seite--pin { background: #033246; }
.yl-you__kopf { height: 52px; background: #033246; padding: 0 36px; display: flex; align-items: center; gap: 16px;
  font: 700 26px/1 var(--yl-schrift-titel); color: #abdac6; letter-spacing: 0.02em; }
.yl-you__kopf span { color: #fff; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.25); }
.yl-you__links { position: absolute; left: 36px; top: 96px; width: 390px; }
.yl-you__titel,
.yl-you__text { -webkit-hyphens: manual !important; hyphens: manual !important; }
.yl-you__titel { display: block; margin-bottom: 14px; font: 700 42px/1.02 var(--yl-schrift-titel); text-transform: uppercase; color: #0c2a33; }
.yl-you__text { display: block; font: 400 23px/1.35 var(--yl-schrift); color: #33474d; }
.yl-you__seite--pin .yl-you__titel { color: #fff; }
.yl-you__seite--pin .yl-you__text { color: #c7dcd5; }
.yl-you__karte { position: absolute; left: 470px; top: 70px; width: 440px; height: 300px; background: #fff;
  border: 1px solid #d3e2dc; border-top: 5px solid #abdac6; }
.yl-you__karte .yl-you__label { position: absolute; left: 30px; font: 700 21px/1 var(--yl-schrift); color: #0c2a33; }
.yl-you__feld { position: absolute; left: 30px; right: 30px; height: 54px; border: 2px solid #9fb3ae; background: #f4f7f6;
  font: 500 25px/50px var(--yl-schrift); color: #0c2a33; padding-left: 14px; white-space: nowrap; overflow: hidden; }
.yl-you__feld.ist-aktiv { border-color: #033246; background: #fff; }
.yl-you__feld.ist-aktiv::after { content: ''; display: inline-block; width: 2px; height: 28px; margin-left: 2px; vertical-align: -5px;
  background: #033246; animation: yl-schreibmarke 0.9s steps(1) infinite; }
@keyframes yl-schreibmarke { 50% { opacity: 0; } }
.yl-you__haken { position: absolute; left: 30px; top: 142px; font: 400 21px/30px var(--yl-schrift); color: #33474d; padding-left: 42px; }
.yl-you__haken i { position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border: 2px solid #6b7f7a; background: #fff; }
.yl-you__haken.ist-an i { background: #033246; border-color: #033246; }
.yl-you__haken.ist-an i::after { content: ''; position: absolute; left: 8px; top: 2px; width: 8px; height: 15px;
  border: solid #fff; border-width: 0 3px 3px 0; rotate: 45deg; }
.yl-you__knopf { position: absolute; left: 30px; right: 30px; height: 60px; background: #033246; color: #fff;
  font: 700 23px/60px var(--yl-schrift); text-align: center; transition: filter 0.12s, scale 0.12s; }
.yl-you__knopf--mint { background: #abdac6; color: #0c2a33; }
.yl-you__knopf.ist-gedrueckt { filter: brightness(0.82); scale: 0.98; }
.yl-you__seite--anfrage .yl-you__label { top: 26px; }
.yl-you__seite--anfrage .yl-you__feld { top: 60px; }
.yl-you__seite--anfrage .yl-you__knopf { top: 200px; }
.yl-you__seite--pin .yl-you__label:nth-child(1) { top: 20px; }
.yl-you__seite--pin .yl-you__feld:nth-child(2) { top: 48px; }
.yl-you__seite--pin .yl-you__label:nth-child(3) { top: 116px; }
.yl-you__seite--pin .yl-you__feld:nth-child(4) { top: 144px; letter-spacing: 0.18em; }
.yl-you__seite--pin .yl-you__knopf { top: 216px; }

/* Mail mit Code und PIN gleitet von oben herein */
.yl-you__post {
  position: absolute; top: 52px; right: 16px; width: 420px; height: 176px; padding: 16px 18px 0 82px;
  background: rgba(250, 249, 247, 0.98); border-radius: 18px; box-shadow: 0 16px 34px -8px rgba(0, 0, 0, 0.45);
  opacity: 0; translate: 0 -130%; transition: opacity 0.35s, translate 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
}
[data-phase="post"] .yl-you__post { opacity: 1; translate: 0 0; }
.yl-you__post-symbol { position: absolute; left: 18px; top: 18px; width: 48px; height: 48px; border-radius: 12px; background: #033246; }
.yl-you__post-symbol svg { width: 30px; height: 30px; margin: 9px; display: block; }
.yl-held .yl-you__post-symbol svg { max-width: none !important; max-height: none !important; }
.yl-you__post-kopf { display: flex; justify-content: space-between; font: 600 15px/1.2 var(--yl-schrift); letter-spacing: 0.04em;
  text-transform: uppercase; color: #5b6b70; margin-bottom: 4px; }
.yl-you__post b { display: block; font: 700 22px/1.2 var(--yl-schrift); color: #0c2a33; }
.yl-you__post-text { display: block; font: 400 21px/1.4 var(--yl-schrift); color: #33474d; }
.yl-you__post-text strong { color: #0c2a33; }
.yl-you__knopf--klein { left: 82px; right: auto; top: 118px; width: 180px; height: 42px; font-size: 19px; line-height: 42px; border-radius: 6px; }

/* Schritte unten mittig, aktiver Schritt hervorgehoben (Skript) */
.yl-you__schritte {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 6px; padding: 5px;
  border-radius: 999px; background: rgba(22, 26, 30, 0.82); font: 600 20px/1 var(--yl-schrift); color: rgba(255, 255, 255, 0.55);
  white-space: nowrap; opacity: 0; transition: opacity 0.4s;
}
.yl-you__schritte span { padding: 7px 14px; border-radius: 999px; transition: background 0.3s, color 0.3s; }
.yl-you__schritte span.ist-aktiv { background: #abdac6; color: #0c2a33; }
.yl-display--you[data-phase]:not([data-phase="vorher"]) .yl-you__schritte { opacity: 1; }

.yl-you__regler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.yl-you__griff {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.yl-you__griff::before,
.yl-you__griff::after {                       /* ‹ › */
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: solid #2a3137;
  border-width: 0 0 3px 3px;
}
.yl-you__griff::before { left: 13px; translate: 0 -50%; rotate: 45deg; }
.yl-you__griff::after  { right: 13px; translate: 0 -50%; rotate: -135deg; }
.yl-you__marke {
  position: absolute;
  bottom: 16px;
  padding: 5px 16px 6px;
  border-radius: 999px;
  background: rgba(22, 26, 30, 0.82);
  color: #fff;
  font: 600 22px/1.2 var(--yl-schrift);
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.35s;
}
.yl-you__marke--vorher  { left: 26px; }
.yl-you__marke--nachher { right: 44px; }
[data-phase="vorher"] .yl-you__marke--vorher,
.yl-display--you.ist-vergleich .yl-you__marke--vorher,
[data-phase="neu"] .yl-you__marke--nachher { opacity: 1; }
.yl-display--you[data-phase="neu"] .yl-you__schritte { opacity: 0; }
/* beim Vorher-nachher-Vergleich stehen unten die Etiketten – Schrittleiste weg */
.yl-held .yl-display--you.ist-vergleich[data-phase] .yl-you__schritte { opacity: 0; }
.yl-zeiger { position: absolute; left: 0; top: 0; width: 16px; height: 24px; opacity: 0; }
.yl-held .yl-zeiger { max-width: none !important; max-height: none !important; }

/* ------------------------------------------------------------------
   Cardit-Bühne: Hauptprodukt groß
   ------------------------------------------------------------------ */
.yl-cardit {
  --produktfarbe: var(--yl-cardit);
  position: relative;
  overflow: hidden;
}
.yl-cardit__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3.5rem;
  align-items: center;
}
.yl-cardit__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.yl-cardit__marke .yl-dachzeile { margin-bottom: 0; }
.yl-cardit__punkt {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--yl-cardit);
}
.yl-cardit h2.yl-titel { font-size: 3rem; }
.yl-cardit__lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--yl-text-leise);
  margin-bottom: 0;
}
.yl-cardit__lead strong { color: var(--yl-text); }

/* Bühne: Konto im Browser hinten, Wallet-Telefon vorn, Nachricht darüber */
.yl-cardit-buehne {
  position: relative;
  aspect-ratio: 7 / 6;
  width: 100%;
}
.yl-cardit-buehne > * { position: absolute; }
.yl-cardit-buehne__konto  { top: 6%; left: 0; width: 82%; }
.yl-cardit-buehne__wallet { top: 0; right: 2%; width: 34%; }
.yl-cardit-buehne__push {
  left: 8%;
  bottom: 3%;
  width: min(62%, 21rem);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--yl-linie);
  box-shadow: var(--yl-geraet-schatten);
  font-family: var(--yl-schrift);
  color: var(--yl-tinte);
}
.yl-cardit-buehne__push-kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yl-grau);
  margin-bottom: 0.25rem;
}
.yl-cardit-buehne__push b {
  display: block;
  font-size: 0.98rem;
  line-height: 1.3;
}
.yl-cardit-buehne__push-text {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--yl-grau);
}

/* Kreislauf: Sammeln, Belohnen, Zurückholen */
.yl-kreislauf {
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  counter-reset: kreis;
  position: relative;
}
.yl-kreislauf::before {
  content: '';
  position: absolute;
  top: 1.35rem;
  left: 1.35rem;
  right: 1.35rem;
  height: 2px;
  background: var(--yl-linie);
}
.yl-kreislauf li {
  counter-increment: kreis;
  position: relative;
  padding: 3.6rem 0 0;
  margin: 0;
  border: 0;
}
.yl-kreislauf li::before {
  content: counter(kreis);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yl-petrol);
  color: var(--yl-mint);
  font-family: var(--yl-schrift-titel);
  font-weight: 700;
  font-size: 1.15rem;
}
.yl-kreislauf h3 {
  font-family: var(--yl-schrift-titel);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  color: var(--yl-text);
}
.yl-kreislauf p { color: var(--yl-text-leise); line-height: 1.65; margin: 0; }

/* Gründe, warum Cardit trägt */
.yl-gruende {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--yl-linie);
}
.yl-grund {
  padding: 1.75rem 2rem 1.75rem 0;
  border-bottom: 1px solid var(--yl-linie);
}
.yl-grund:nth-child(2n) { padding: 1.75rem 0 1.75rem 2rem; border-left: 1px solid var(--yl-linie); }
.yl-grund h3 {
  font-family: var(--yl-schrift-titel);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.45rem;
  color: var(--yl-text);
}
.yl-grund h3::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1.1rem;
  height: 3px;
  margin: -0.15rem 0.6rem 0 0;
  background: var(--yl-cardit);
}
.yl-grund p { color: var(--yl-text-leise); line-height: 1.7; margin: 0; }

/* ------------------------------------------------------------------
   Weitere Produkte mit Bild (YOU, 8BOY)
   ------------------------------------------------------------------ */
.yl-produktbild-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.yl-produktbild {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--yl-linie);
  border-top: 4px solid var(--produktfarbe, var(--yl-petrol));
  border-radius: var(--yl-radius);
  background: var(--yl-grund);
  overflow: hidden;
}
.yl-produktbild--you  { --produktfarbe: var(--yl-you); }
.yl-produktbild--8boy { --produktfarbe: var(--yl-8boy); }
.yl-produktbild__buehne {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--yl-nebel);
  overflow: hidden;
}
.yl-produktbild__buehne > * { position: absolute; }
.yl-produktbild--you .yl-produktbild__buehne .yl-geraet--browser { top: 10%; left: 7%; width: 72%; }
.yl-produktbild--you .yl-produktbild__buehne .yl-geraet--telefon { top: 18%; right: 7%; width: 24%; padding: 0.3rem; border-radius: 1.2rem; }
.yl-produktbild--you .yl-produktbild__buehne .yl-geraet--telefon img { border-radius: 0.95rem; }
.yl-produktbild--8boy .yl-produktbild__buehne { background: #FBF3DD; }
.yl-produktbild--8boy .yl-produktbild__buehne .yl-geraet--frei { top: 9%; left: 8%; width: 84%; }
.yl-produktbild__text { padding: 1.9rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.yl-produktbild__text .yl-etikett { margin-bottom: 0.5rem; }

/* Bild bewegt sich beim Überfahren der Karte ein Stück */
.yl-produktbild__buehne .yl-geraet { transition: transform 0.6s var(--yl-bewegung-kurve); }
.yl-produktbild:hover .yl-geraet--browser,
.yl-produktbild:hover .yl-geraet--frei { transform: translateY(-6px); }
.yl-produktbild:hover .yl-geraet--telefon { transform: translateY(-10px); }

/* Beispiele nebeneinander (Produktseite YOU) */
.yl-beispiele {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.yl-beispiele--ohne-abstand { margin-top: 0; }
a.yl-beispiel { display: block; text-decoration: none; color: inherit; }
.yl-beispiel__name {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--yl-schrift-titel);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--yl-text);
}
.yl-beispiel__was { display: block; font-size: 0.92rem; color: var(--yl-text-leise); }
a.yl-beispiel:hover .yl-beispiel__name,
a.yl-beispiel:focus-visible .yl-beispiel__name { color: var(--yl-tanne); text-decoration: underline; }
a.yl-beispiel:focus-visible { outline: 3px solid var(--yl-akzent-hell); outline-offset: 4px; }

/* Produktseite */
.yl-produkt-bild--8boy { max-width: 760px; }
.yl-cardit__mehr { margin-top: 3.5rem; }
.yl-gruende--spalte { margin-top: 0; grid-template-columns: 1fr; }
.yl-gruende--spalte .yl-grund,
.yl-gruende--spalte .yl-grund:nth-child(2n) { padding: 1.5rem 0; border-left: 0; }
.yl-produkt.yl-cardit .yl-kreislauf h3 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.yl-produkt.yl-cardit .yl-grund h3 { font-size: 1.35rem; margin: 0 0 0.45rem; }

/* ------------------------------------------------------------------
   Bewegung – nur mit html.yl-bewegt (gesetzt per Skript, wenn keine
   reduzierte Bewegung gewünscht ist). Ohne Skript bleibt alles sichtbar.
   ------------------------------------------------------------------ */

/* Einblenden beim Scrollen */
.yl-bewegt [data-einblenden] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--yl-bewegung-dauer) var(--yl-bewegung-kurve),
    transform var(--yl-bewegung-dauer) var(--yl-bewegung-kurve);
  transition-delay: var(--verzug, 0ms);
}
.yl-bewegt [data-einblenden="links"]  { transform: translateX(-34px); }
.yl-bewegt [data-einblenden="rechts"] { transform: translateX(34px); }
.yl-bewegt [data-einblenden="klein"]  { transform: scale(0.94); }
.yl-bewegt [data-einblenden].ist-sichtbar { opacity: 1; transform: none; }

/* schräge Geräte behalten ihre Neigung nach dem Einblenden */
.yl-bewegt .yl-schraeg[data-einblenden].ist-sichtbar { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg) rotate(-0.6deg); }
.yl-bewegt .yl-schraeg--links[data-einblenden].ist-sichtbar { transform: perspective(1600px) rotateY(7deg) rotateX(2deg) rotate(0.6deg); }
.yl-bewegt .yl-schraeg[data-einblenden].ist-sichtbar:hover { transform: perspective(1600px) rotateY(0) rotateX(0) rotate(0); }

/* Held: Zeilen steigen nacheinander auf, Unterstreichung zieht sich auf */
@keyframes yl-aufsteigen {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
@keyframes yl-aufziehen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes yl-schweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}
@keyframes yl-schimmer {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-18%, 22%) scale(1.15); }
}
@keyframes yl-meldung {
  0%, 8%    { opacity: 0; transform: translateY(14px) scale(0.97); }
  14%, 86%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-6px); }
}

.yl-bewegt .yl-held--start::before { animation: yl-schimmer 16s ease-in-out infinite alternate; }
.yl-bewegt .yl-held__auftritt {
  opacity: 0;
  animation: yl-aufsteigen 0.8s var(--yl-bewegung-kurve) forwards;
  animation-delay: var(--verzug, 0ms);
}
.yl-bewegt .yl-held__wahr::after {
  transform: scaleX(0);
  animation: yl-aufziehen 0.9s var(--yl-bewegung-kurve) 0.75s forwards;
}

/* Geräte schweben leicht, jedes in eigenem Takt.
   „translate“ statt „transform“, damit die Neigung erhalten bleibt. */
.yl-bewegt .yl-schweben       { animation: yl-schweben 7s ease-in-out infinite; }
.yl-bewegt .yl-schweben--2    { animation-duration: 8.5s; animation-delay: -2s; }
.yl-bewegt .yl-schweben--3    { animation-duration: 6.2s; animation-delay: -4s; }

/* Push-Nachricht erscheint, steht, verschwindet wieder */
.yl-bewegt .yl-cardit-buehne__push { opacity: 0; }
.yl-bewegt .yl-cardit-buehne__push.ist-sichtbar { animation: yl-meldung 9s var(--yl-bewegung-kurve) 0.6s infinite; opacity: 0; }

/* Cinemagramm Cardit: Push-Nachricht gleitet von oben ins Display, steht,
   geht wieder. Sie ist die Uhr der Szene (data-uhr): Hochzählen des
   Guthabens und Szenenwechsel hängen im Skript an genau dieser Animation.
   Sie startet mit jeder Runde neu (ist-laeuft) und steht außerhalb des
   Bildschirms (ist-pausiert). */
/* 18 s: erste Nachricht 1,0–6,8 s (danach zählt das Guthaben hoch), zweite
   „Belohnung eingelöst“ 10,4–16 s (das Guthaben sinkt um 10 Punkte) */
@keyframes yl-push {
  0%, 5.33%     { transform: translateY(-135%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1); }
  8.67%, 34.67% { transform: none; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3); }
  38%, 100%     { transform: translateY(-135%); }
}
@keyframes yl-push-zwei {
  0%, 57.78%     { transform: translateY(-135%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1); }
  61.11%, 85.56% { transform: none; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3); }
  88.89%, 100%   { transform: translateY(-135%); }
}
.yl-bewegt .yl-display__push { transform: translateY(-135%); }
.yl-bewegt .ist-laeuft .yl-display__push { animation: yl-push 18s infinite; }
.yl-bewegt .ist-laeuft .yl-display__push--zwei { animation-name: yl-push-zwei; }
.yl-display__push--zwei { display: none; }
.yl-bewegt .yl-display__push--zwei { display: block; }
.yl-display__push--zwei .yl-display__symbol { background: rgb(214, 186, 110); }

/* Cinemagramm YOU, 18 s (1 s = 5,556 %): 0–2,6 alte Seite · 2,6 Anfrage,
   Adresse tippen, Haken, „Prüfung kostenlos anfragen“ · 6,6 Mail mit Code
   und PIN, „Entwurf öffnen“ · 8,8 PIN-Seite, PIN tippen, „Entwurf ansehen“ ·
   11,5 neue Seite · 12,8–15,6 Regler: links die alte Seite zum Vergleich ·
   16 kurz scrollen. Der Mauszeiger ist die Uhr der Szene; das Skript setzt
   Phase, getippten Text, Haken und gedrückte Knöpfe nach derselben Zeit. */
@keyframes yl-you-zeiger {
  0%, 15%        { translate: 620px 380px; opacity: 0; animation-timing-function: ease-in-out; }
  15.56%         { translate: 620px 380px; opacity: 1; animation-timing-function: ease-in-out; }
  17.78%, 26.11% { translate: 560px 198px; animation-timing-function: ease-in-out; }
  27.78%, 29.44% { translate: 507px 266px; animation-timing-function: ease-in-out; }
  31.11%, 35.56% { translate: 690px 340px; animation-timing-function: ease-in-out; }
  45.56%, 47.78% { translate: 683px 190px; animation-timing-function: ease-in-out; }
  51.67%, 58.89% { translate: 560px 277px; animation-timing-function: ease-in-out; }
  61.11%, 64.44% { translate: 690px 352px; animation-timing-function: ease-in-out; }
  70%, 71.11%    { translate: 4px 296px; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  76.67%, 82.22% { translate: 484px 296px; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  86.67%, 88.89% { translate: 4px 296px; animation-timing-function: ease-in-out; }
  94.44%, 100%   { translate: 420px 330px; opacity: 1; }
}
@keyframes yl-you-vergleich {
  0%, 71.11%     { clip-path: inset(0 960px 0 0); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  76.67%, 82.22% { clip-path: inset(0 480px 0 0); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  86.67%, 100%   { clip-path: inset(0 960px 0 0); }
}
@keyframes yl-you-regler {
  0%, 68%        { translate: 0 0; opacity: 0; }
  70%            { opacity: 1; }
  71.11%         { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  76.67%, 82.22% { translate: 480px 0; animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  86.67%         { translate: 0 0; opacity: 1; }
  89%, 100%      { translate: 0 0; opacity: 0; }
}
@keyframes yl-you-scroll {
  0%, 89%   { translate: 0 0; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  97%, 100% { translate: 0 -220px; }
}
.yl-bewegt .ist-laeuft .yl-zeiger          { animation: yl-you-zeiger 18s infinite; }
.yl-bewegt .ist-laeuft .yl-you__vergleich  { animation: yl-you-vergleich 18s infinite; }
.yl-bewegt .ist-laeuft .yl-you__regler     { animation: yl-you-regler 18s infinite; }
.yl-bewegt .ist-laeuft .yl-you__nachher    { animation: yl-you-scroll 18s infinite; }

/* Raum: Dampf steigt in drei Fahnen versetzt auf; warme Lichter atmen und
   zucken unregelmäßig (je Licht eigener Takt und Versatz im Markup) */
@keyframes yl-dampf {
  0%   { opacity: 0; transform: translateY(8%) scale(0.8, 0.85); }
  30%  { opacity: 0.75; }
  65%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-16%) scale(1.3, 1.05) skewX(-7deg); }
}
.yl-bewegt .yl-dampf { opacity: 0.85; }
.yl-bewegt .ist-laeuft .yl-dampf path { animation: yl-dampf 6.2s ease-out infinite; }
.yl-bewegt .ist-laeuft .yl-dampf path:nth-child(2) { animation-duration: 7.4s; animation-delay: -2.6s; }
.yl-bewegt .ist-laeuft .yl-dampf path:nth-child(3) { animation-duration: 6.8s; animation-delay: -4.9s; }
/* Kai 12.11.: „gerade im Bereich der Lichter könnte es noch etwas mehr
   flackern“. Zwei Ebenen: das Licht atmet langsam (yl-flackern, je Licht
   eigener Takt), sein Kern zuckt schnell und unregelmäßig wie eine Kerze
   oder alte Glühbirne (yl-zucken, ::after). Weiche Übergänge, kein Blinken. */
@keyframes yl-flackern {
  0%, 100% { opacity: 0.22; }
  9%   { opacity: 0.6; }
  11%  { opacity: 0.3; }
  13%  { opacity: 0.68; }
  31%  { opacity: 0.36; }
  48%  { opacity: 0.78; }
  50%  { opacity: 0.32; }
  53%  { opacity: 0.66; }
  72%  { opacity: 0.3; }
  86%  { opacity: 0.72; }
}
@keyframes yl-zucken {
  0%, 100% { opacity: 0.2; }
  7%   { opacity: 0.62; }
  10%  { opacity: 0.18; }
  18%  { opacity: 0.45; }
  31%  { opacity: 0.7; }
  34%  { opacity: 0.28; }
  46%  { opacity: 0.55; }
  58%  { opacity: 0.32; }
  61%  { opacity: 0.74; }
  74%  { opacity: 0.22; }
  86%  { opacity: 0.58; }
}
.yl-licht::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 176, 0.8), rgba(255, 200, 130, 0.25) 60%, rgba(255, 190, 120, 0));
  opacity: 0;
}
.yl-bewegt .ist-laeuft .yl-licht {
  animation: yl-flackern var(--takt, 7s) ease-in-out var(--verzug, 0s) infinite;
}
.yl-bewegt .ist-laeuft .yl-licht::after {
  animation: yl-zucken 2.3s linear var(--verzug, 0s) infinite;
}
.yl-bewegt .ist-laeuft .yl-licht:nth-child(2n)::after { animation-duration: 2.9s; }
.yl-bewegt .ist-laeuft .yl-licht:nth-child(3n)::after { animation-duration: 1.9s; }
.yl-licht--kugel::after { content: none; }

/* Kai 12.11.: „Hintergrundbewegung wie vorbeifahrende Autos“. Je Szene ein
   weich ausgeblendeter Bereich im Bokeh (.yl-strasse, Lage in Prozent des
   Fotos, abseits von Text und Display): ein warmer Scheinwerferschein zieht
   durch, später rote Rücklichter in Gegenrichtung, dazu drei Bokeh-Punkte,
   die langsam wandern. Je Szene gleich viel. Nur transform/opacity. */
.yl-strasse {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--b) * 100%);
  height: calc(var(--h) * 100%);
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
.yl-vorbei {
  position: absolute;
  left: 0;
  top: 8%;
  width: 70%;
  height: 84%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 214, 0.95), rgba(255, 224, 180, 0.4) 50%, rgba(255, 215, 160, 0));
  opacity: 0;
  translate: -100% 0;
}
.yl-vorbei--rueck {
  top: 38%;
  width: 46%;
  height: 50%;
  background: radial-gradient(closest-side, rgba(255, 80, 52, 0.9), rgba(255, 60, 40, 0.32) 55%, rgba(255, 60, 40, 0));
  translate: 220% 0;
}
.yl-bokeh {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: var(--d, 8%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 216, 156, 0.8), rgba(255, 200, 130, 0.22) 70%, rgba(255, 200, 130, 0));
  opacity: 0;
}
@keyframes yl-vorbei {
  0%   { translate: -100% 0; opacity: 0; }
  3%   { opacity: 1; }
  13%  { opacity: 0.9; }
  17%, 100% { translate: 150% 0; opacity: 0; }
}
@keyframes yl-vorbei-rueck {
  0%   { translate: 220% 0; opacity: 0; }
  4%   { opacity: 1; }
  15%  { opacity: 0.8; }
  19%, 100% { translate: -110% 0; opacity: 0; }
}
@keyframes yl-wandern {
  0%   { translate: 0 0; opacity: 0.25; }
  50%  { opacity: 0.75; }
  100% { translate: var(--dx, 60%) var(--dy, 0%); opacity: 0.3; }
}
.yl-bewegt .ist-laeuft .yl-vorbei { animation: yl-vorbei 18s linear var(--verzug, 0s) infinite; }
.yl-bewegt .ist-laeuft .yl-vorbei--rueck { animation-name: yl-vorbei-rueck; }
.yl-bewegt .ist-laeuft .yl-bokeh { animation: yl-wandern 18s ease-in-out infinite; }

/* Kreislauf: Verbindungslinie zieht sich auf */
.yl-kreislauf::after {
  content: '';
  position: absolute;
  top: 1.35rem;
  left: 1.35rem;
  right: 1.35rem;
  height: 2px;
  background: var(--yl-cardit);
  transform-origin: left center;
}
.yl-bewegt .yl-kreislauf::after { transform: scaleX(0); transition: transform 1.6s var(--yl-bewegung-kurve) 0.3s; }
.yl-bewegt .yl-kreislauf.ist-sichtbar::after { transform: scaleX(1); }
.yl-kreislauf li { z-index: 1; }

/* Sicherheitsnetz: wer reduzierte Bewegung wünscht, bekommt keine –
   auch falls die Klasse doch gesetzt sein sollte. */
@media (prefers-reduced-motion: reduce) {
  .yl-bewegt [data-einblenden],
  .yl-bewegt .yl-held__auftritt {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .yl-held--start::before,
  .yl-held__wahr::after,
  .yl-schweben,
  .yl-cardit-buehne__push,
  .yl-kreislauf::after {
    animation: none !important;
    transition: none !important;
  }
  .yl-held__wahr::after,
  .yl-kreislauf::after { transform: none !important; }
  .yl-cardit-buehne__push { opacity: 1 !important; }
  .yl-display__push { animation: none !important; transform: none !important; }
  .yl-dampf, .yl-licht, .yl-strasse { display: none; }
  .yl-szene { transition: none !important; }
  .yl-schraeg,
  .yl-produktbild__buehne .yl-geraet { transition: none !important; }
  .yl-produktbild:hover .yl-geraet { transform: none !important; }
}

/* ------------------------------------------------------------------
   Schmale Bildschirme
   main.css/responsive.css setzen Überschriften, Absätze und Listen
   dort mit !important – daher hier gezielt spezifischer.
   ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .yl-start-held,
  .yl-cardit__kopf { grid-template-columns: 1fr; gap: 2.75rem; }
  .yl-cardit-buehne { max-width: 640px; }
  /* Cinemagramm unter dem Text, Telefon mittig; Text bleibt auf Petrol */
  .yl-held--foto { display: flex; flex-direction: column; padding-bottom: 0 !important; }
  .yl-held--foto > .container { order: 1; }
  .yl-held--foto .yl-start-held { min-height: 0; }
  .yl-held__szene {
    position: relative;
    order: 2;
    inset: auto;
    height: clamp(300px, 80vw, 560px);
    margin-top: 2.5rem;
    --bild-b: max(min(240cqw, 330cqh), 200cqh);
    --telefon-x: 50cqw;
  }
  .yl-szene[data-szene="you"] { --versatz: 0cqw; }
  .yl-held__szene::after {
    background: linear-gradient(180deg,
      rgba(3, 50, 70, 1) 0%,
      rgba(3, 50, 70, 0) 26%,
      rgba(3, 50, 70, 0) 80%,
      rgba(3, 50, 70, 0.6) 100%);
  }
}

@media (max-width: 900px) {
  .yl-produktbild-raster,
  .yl-beispiele { grid-template-columns: 1fr; }
  .yl-gruende { grid-template-columns: 1fr; }
  .yl-grund,
  .yl-grund:nth-child(2n) { padding: 1.5rem 0; border-left: 0; }
}

@media (max-width: 768px) {
  .yl-held--start { padding: 3.25rem 0 3.5rem; }
  .yl-held.yl-held--start h1 { font-size: 2.3rem !important; line-height: 1.06 !important; }
  .yl-held p.yl-held__fuer { font-size: 0.92rem !important; }
  .yl-abschnitt.yl-cardit h2.yl-titel { font-size: 2rem !important; line-height: 1.1 !important; }
  .yl-cardit p.yl-cardit__lead { font-size: 1.08rem !important; line-height: 1.6 !important; }
  .yl-kreislauf { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.75rem; }
  .yl-kreislauf::before,
  .yl-kreislauf::after { top: 1.35rem; bottom: 1.35rem; left: 1.3rem; right: auto; width: 2px; height: auto; }
  .yl-kreislauf::after { transform-origin: center top; }
  .yl-bewegt .yl-kreislauf::after { transform: scaleY(0); }
  .yl-bewegt .yl-kreislauf.ist-sichtbar::after { transform: scaleY(1); }
  ul.yl-kreislauf li,
  ol.yl-kreislauf li { padding: 0.2rem 0 0 3.75rem !important; margin: 0 !important; font-size: inherit !important; }
  .yl-kreislauf h3 { font-size: 1.3rem !important; }
  .yl-gruende { margin-top: 2.5rem; }
  .yl-grund h3 { font-size: 1.2rem !important; }
  .yl-produktbild__text { padding: 1.4rem 1.4rem 1.6rem; }
  .yl-cardit-buehne__push { width: 72%; padding: 0.6rem 0.75rem; left: 2%; }
  .yl-cardit-buehne__push b { font-size: 0.85rem; }
  .yl-cardit-buehne__push-text { font-size: 0.78rem; }
  .yl-cardit-buehne__push-kopf { font-size: 0.6rem; }
  .yl-geraet__leiste { height: 1.2rem; padding: 0 0.45rem; gap: 0.25rem; }
  .yl-geraet__leiste i { width: 0.38rem; height: 0.38rem; }
  .yl-geraet__adresse { font-size: 0.6rem; margin-left: 0.3rem; }
  .yl-geraet--telefon { padding: 0.28rem; border-radius: 1.1rem; }
  .yl-geraet--telefon img { border-radius: 0.9rem; }
  /* auf dem Telefon nicht neigen – spart Platz und bleibt ruhig */
  .yl-schraeg,
  .yl-schraeg--links,
  .yl-bewegt .yl-schraeg[data-einblenden].ist-sichtbar,
  .yl-bewegt .yl-schraeg--links[data-einblenden].ist-sichtbar { transform: none; }
}

/* /produkte: jedes Produkt beginnt mit seinem Cinemagramm (Kai 12.11.:
   „Produktseiten mit starken Cinemagrammen“). Aufbau wie der Startseiten-
   Held, eine Szene pro Bühne in Schleife; Text links auf dem Verlauf. */
.yl-held--produkt { position: relative; overflow: hidden; padding: 5rem 0 5.5rem; }
.yl-held--produkt .yl-held__inhalt { max-width: 34rem; }
.yl-held--produkt .yl-held__titel {
  font-family: var(--yl-schrift-titel);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 1.25rem;
}
.yl-held--produkt p strong { color: #fff; font-weight: 600; }
.yl-produkt__einstieg { max-width: 46rem; }
.yl-produkt__einstieg p { font-size: 1.15rem; line-height: 1.7; }
.yl-held--produkt + .yl-abschnitt { padding-top: 4rem; }
@media (max-width: 768px) {
  .yl-held.yl-held--produkt { padding: 3.25rem 0 0; }
  .yl-held.yl-held--produkt h2.yl-held__titel { font-size: 2.6rem !important; line-height: 1.04 !important; }
  .yl-held--produkt + .yl-abschnitt { padding-top: 3rem; }
}

/* Held 1001–1199 px (Kai 12.11.: Monitor bei 1024 angeschnitten): Text etwas
   schmaler, Verlauf endet davor, YOU-Monitor ganz im Bild (Rahmen im Foto
   0,315–0,760 der Bildbreite → bei 112cqw von 48,5 bis 98,4cqw). */
@media (min-width: 1001px) and (max-width: 1199px) {
  .yl-held--foto .yl-held__inhalt { max-width: calc(46vw - 2rem); }
  .yl-held__szene::after {
    background:
      linear-gradient(90deg,
        rgba(3, 50, 70, 0.97) 0%,
        rgba(3, 50, 70, 0.93) 36%,
        rgba(3, 50, 70, 0.86) 45%,
        rgba(3, 50, 70, 0.4) 48.5%,
        rgba(3, 50, 70, 0) 52%),
      linear-gradient(180deg,
        rgba(3, 50, 70, 0.35) 0%,
        rgba(3, 50, 70, 0) 18%,
        rgba(3, 50, 70, 0) 78%,
        rgba(3, 50, 70, 0.55) 100%);
  }
  .yl-szene[data-szene="you"] { --b: max(112cqw, 180cqh); --telefon-x: 73.4cqw; --versatz: 0cqw; }
}

/* Held auf dem Telefon (Kai 12.11.): Szene höher, je Szene auf das Gerät
   gezoomt (füllt fast die Breite), Verlauf oben schmal. Die Schrift im
   Display wächst mit; wo kein Zeiger hinzeigt, zusätzlich etwas größer. */
@media (max-width: 600px) {
  .yl-held__szene { height: clamp(380px, 112vw, 560px); margin-top: 1.75rem; }
  .yl-held__szene::after {
    background: linear-gradient(180deg,
      rgba(3, 50, 70, 1) 0%,
      rgba(3, 50, 70, 0) 7%,
      rgba(3, 50, 70, 0) 90%,
      rgba(3, 50, 70, 0.5) 100%);
  }
  .yl-szene[data-szene="cardit"] { --b: max(360cqw, 200cqh); }
  .yl-szene[data-szene="8boy"]   { --b: max(300cqw, 200cqh); }
  .yl-szene[data-szene="you"]    { --b: max(208cqw, 176cqh); }
  .yl-display__push { padding: 18px 20px 22px 84px; }
  .yl-display__kopf { font-size: 21px; }
  .yl-display__push b { font-size: 33px; }
  .yl-display__text { font-size: 28px; line-height: 1.3; }
  .yl-you__text { font-size: 29px; }
  .yl-you__schritte { font-size: 25px; }
  .yl-you__marke { font-size: 28px; }
}

/* Preiszeile (Kai 11.11.: Preise transparent je Produkt) */
.yl-preiszeile { margin-top: 1rem; font-size: 1rem; }
.yl-preiszeile strong { color: inherit; }