/* =====================================================================
   Startseite "Cover bei Nacht" (docs/design.md 6.1)
   Nur Tokens aus site.css, keine eigenen Hexwerte. Mobil zuerst, Brechpunkte 640, 960, 1280.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Cover: geschertes Tafelraster (W1) mit HUD-Ecke (W2)
   --------------------------------------------------------------------- */
.cover-hero { position: relative; padding: 14px var(--gutter) 28px; }
.cover-hero::before { /* Lichtinsel hinter dem Raster */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 30% 40%, rgb(var(--vio-rgb) / .22), transparent 70%), radial-gradient(ellipse 40% 50% at 85% 20%, rgb(var(--mag-rgb) / .12), transparent 70%);
}
.cover {
  --skew: 0deg; --unskew: 0deg;
  position: relative; max-width: var(--wrap-wide); margin-inline: auto;
  display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cover > * { min-width: 0; }
.cover__a, .cover__cars, .cover__b { grid-column: 1 / -1; }
.cover__a, .cover__cars { grid-row: 1; }
.cover__clip {
  position: relative; height: 100%; overflow: hidden; margin: 0; background: var(--nacht);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cover__body { position: relative; z-index: var(--z-inhalt); height: 100%; transform: skewX(var(--unskew)); }
.cover__clip > img, .cover__clip > .cover__img {
  position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; transform: skewX(var(--unskew));
}

/* Tafel A: Nachtszene, Claim, Knöpfe */
.cover__night { inset: 0 -9%; transform: skewX(var(--unskew)); }
.cover__night .night__palm--l { --palm-l: 62%; }
.cover__night .night__palm--r { --palm-r: 54%; }
.cover__shade {
  position: absolute; inset: 0 -9%; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--grund-rgb) / .72) 0%, rgb(var(--grund-rgb) / .35) 38%, rgb(var(--grund-rgb) / .15) 60%, rgb(var(--grund-rgb) / .78) 100%);
}
.cover__body--a { display: flex; flex-direction: column; padding: 22px 20px 34px; }
.cover__hud { order: -1; justify-content: flex-start; gap: 18px; margin-bottom: 18px; text-align: left; }
.cover__hud .hud__item { align-items: flex-start; }
.cover__hud .hud__time { font-size: 22px; }
.cover__hud .hud__cash { font-size: 26px; }
.cover__hud .wanted { display: none; }
.cover__text { position: relative; max-width: 620px; }
.cover__claim { margin-top: 16px; }
.cover__claim .claim__chrome { font-size: clamp(64px, 17vw, 144px); }
.cover__claim .claim__script { font-size: clamp(30px, 8.2vw, 64px); }
.cover__lead { margin-top: 18px; max-width: 34em; font-size: var(--fs-lead); line-height: 1.55; color: var(--text); text-shadow: 0 1px 12px rgb(var(--grund-rgb) / .9); }
.cover__btns { margin-top: 24px; align-items: center; }
.cover__route { align-self: center; margin-top: 4px; }
.cover__chips { margin-top: 20px; }

/* Nasse Straße unter Text und Wagen (liegt in Tafel A, also unter dem Claim): Glanzlinien, Lichtspuren des Verkehrs */
.cover__nass {
  position: absolute; left: -9%; right: -9%; bottom: 0; height: 34%; z-index: 1; pointer-events: none; transform: skewX(var(--unskew));
  background:
    linear-gradient(180deg, transparent 0%, rgb(var(--grund-rgb) / .5) 55%, rgb(var(--grund-rgb) / .78) 100%),
    repeating-linear-gradient(180deg, rgb(var(--rosa-rgb) / .045) 0 1px, transparent 1px 9px);
}
.cover__nass::before { /* Farbpfützen der Stadtlichter */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 26% 30% at 70% 40%, rgb(var(--mag-rgb) / .2), transparent 70%), radial-gradient(ellipse 18% 24% at 88% 70%, rgb(var(--vio-rgb) / .22), transparent 70%);
}
.cover__verkehr { position: absolute; inset: 0; overflow: hidden; }
.cover__verkehr i {
  position: absolute; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--papier-rgb) / .8) 70%, rgb(var(--papier-rgb) / .25));
  box-shadow: 0 0 10px rgb(var(--rosa-rgb) / .7); transform-origin: 100% 50%; rotate: -8deg; opacity: .55;
}
.cover__verkehr i:nth-child(1) { top: 10%; width: 58%; }
.cover__verkehr i:nth-child(2) { top: 22%; width: 44%; background: linear-gradient(90deg, transparent, rgb(var(--mag-rgb) / .95) 70%, rgb(var(--mag-rgb) / .3)); box-shadow: 0 0 12px rgb(var(--mag-rgb) / .8); }
.cover__verkehr i:nth-child(3) { top: 34%; width: 66%; height: 1px; opacity: .35; }
.cover__verkehr i:nth-child(4) { top: 46%; width: 38%; background: linear-gradient(90deg, transparent, rgb(var(--mag-rgb) / .9) 70%, rgb(var(--mag-rgb) / .3)); box-shadow: 0 0 12px rgb(var(--mag-rgb) / .7); opacity: .4; }

/* Autoebene: liegt in derselben Rasterzelle wie Tafel A und trägt deren Umriss (gleiche Schräge, gleicher Anschnitt).
   So bleiben Held und Streife immer innerhalb der Tafel, auch beim Einfahren und bei der Parallaxe. Maße in
   Containereinheiten der Ebene (cqw Breite, cqh Höhe der Tafel). Freisteller ohne Rand: Held 713 x 376 (Höhe =
   Breite mal .527), Streife 785 x 330 (mal .42). Mobil steht der Held zentriert unten, die Streife schräg dahinter;
   der Platz ist als Innenabstand von Tafel A reserviert (Prozent dort = Tafelbreite = 100cqw). */
.cover__cars {
  position: relative; z-index: 4; pointer-events: none; overflow: hidden; container-type: size;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --held-w: min(90cqw, 600px); --held-b: 30px; --held-l: calc((100cqw - var(--held-w)) / 2);
  --streife-w: calc(var(--held-w) * .46); --streife-r: 4cqw; --streife-b: calc(var(--held-b) + var(--held-w) * .527 * .8);
  --mx: 0; --my: 0; --sy: 0;
}
.cover__fahrt { position: absolute; inset: 0; }
.cover__wagen {
  position: absolute; display: block; transform: skewX(var(--unskew));
  /* Parallaxe: Maus höchstens 6px zur Seite, Scrollen schiebt den Wagen nach vorn links (weg von der rechten Tafelkante) */
  translate: calc(var(--mx) * var(--tiefe, 1) * -6px - var(--sy) * var(--tiefe, 1) * 10px) calc(var(--my) * var(--tiefe, 1) * -4px + var(--sy) * var(--tiefe, 1) * 5px);
  transition: translate .5s var(--ease);
}
.cover__wagen--held { --tiefe: 1; z-index: 2; left: var(--held-l); bottom: var(--held-b); width: var(--held-w); }
/* Lichtspuren liegen auf eigener Ebene mit der Lage des Helden, aber hinter der Streife */
.cover__wagen--spur { --tiefe: 1; z-index: 0; left: var(--held-l); bottom: var(--held-b); width: var(--held-w); aspect-ratio: 713 / 376; }
.cover__wagen--streife { --tiefe: .45; z-index: 1; right: var(--streife-r); bottom: var(--streife-b); width: var(--streife-w); }
.cover__car { position: relative; z-index: 2; display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.cover__car--held { filter: drop-shadow(0 0 1px rgb(var(--grund-rgb) / .8)) drop-shadow(8px 10px 0 rgb(var(--grund-rgb) / .5)) drop-shadow(0 0 26px rgb(var(--mag-rgb) / .3)); }
.cover__car--streife { filter: brightness(.82) saturate(.9) drop-shadow(8px 9px 0 rgb(var(--grund-rgb) / .5)); }

/* Spiegelung auf nasser Straße: dasselbe Bild (gleiche Adresse, keine zweite Anfrage), gespiegelt und ausgeblendet */
.cover__spiegel {
  position: absolute; left: 0; top: 97%; z-index: 1; width: 100%; height: auto; max-width: none; margin: 0;
  transform: scaleY(-1) skewX(-6deg); opacity: .34; filter: blur(1.5px) saturate(1.3);
  -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / .95), transparent 42%); mask-image: linear-gradient(0deg, rgb(0 0 0 / .95), transparent 42%);
}
/* weicher Bodenschatten entlang der Fahrzeuglängsachse (Front unten links, Heck oben rechts) */
.cover__schatten {
  position: absolute; left: -3%; right: 2%; bottom: -3%; height: 44%; z-index: 1;
  background: radial-gradient(closest-side, rgb(var(--grund-rgb) / .92), rgb(var(--grund-rgb) / .5) 55%, transparent);
  rotate: -17deg; transform-origin: 40% 70%; filter: blur(4px);
}
/* Lichtspuren hinter dem Wagen: parallel zur Fahrtrichtung (Heck oben rechts, Front unten links), hell am Wagen und
   nach hinten auslaufend. Sie liegen hinter dem Wagen und sind über dem Dach und unter dem Heck sichtbar. */
.cover__schweif { position: absolute; left: 34%; top: -46%; z-index: 0; width: 96%; height: 150%; rotate: -17deg; transform-origin: 0 60%; pointer-events: none; }
.cover__schweif i {
  --farbe: var(--mag-rgb);
  position: absolute; left: var(--x, 0%); top: var(--y); width: var(--l, 90%); height: var(--h, 3px); border-radius: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(var(--farbe) / 0), rgb(var(--farbe)) 7%, rgb(var(--farbe) / .5) 40%, transparent);
  box-shadow: 0 0 16px 1px rgb(var(--farbe) / .6);
}
.cover__schweif i:nth-child(1) { --y: 20%; --x: 18%; --l: 90%; --h: 3px; }
.cover__schweif i:nth-child(2) { --y: 28%; --x: 6%; --l: 80%; --h: 2px; --farbe: var(--papier-rgb); }
.cover__schweif i:nth-child(3) { --y: 36%; --x: 30%; --l: 76%; --h: 4px; }
.cover__schweif i:nth-child(4) { --y: 74%; --x: 40%; --l: 70%; --h: 2px; --farbe: var(--papier-rgb); }
.cover__schweif i:nth-child(5) { --y: 82%; --x: 46%; --l: 64%; --h: 3px; --farbe: var(--rosa-rgb); }
/* Scheinwerfer: heller Kern, Glühen, waagerechter Lichtstreif; Kegel auf der Fahrbahn nach vorn links */
.cover__licht { position: absolute; z-index: 3; width: 16%; aspect-ratio: 1; margin: -8% 0 0 -8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(var(--papier-rgb)) 0 7%, rgb(var(--papier-rgb) / .8) 12%, rgb(var(--rosa-rgb) / .5) 26%, rgb(var(--mag-rgb) / .16) 46%, transparent 68%); mix-blend-mode: screen; }
.cover__licht::after { content: ""; position: absolute; left: 50%; top: 50%; width: 520%; height: 4px; translate: -50% -50%; border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgb(var(--rosa-rgb) / .5) 30%, rgb(var(--papier-rgb)) 50%, rgb(var(--rosa-rgb) / .5) 70%, transparent);
  box-shadow: 0 0 10px rgb(var(--rosa-rgb) / .6); }
.cover__licht--a { left: 4.5%; top: 44%; width: 13%; margin: -6.5% 0 0 -6.5%; }
.cover__licht--b { left: 39%; top: 64%; }
.cover__licht--heck { left: 98.6%; top: 22%; width: 7%; margin: -3.5% 0 0 -3.5%; background: radial-gradient(circle, rgb(var(--rosa-rgb)) 0 10%, rgb(var(--gefahr-rgb) / .8) 30%, rgb(var(--gefahr-rgb) / .2) 55%, transparent 70%); }
.cover__licht--heck::after { width: 500%; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--gefahr-rgb) / .6) 50%, transparent); }
.cover__kegel { position: absolute; left: -44%; top: 34%; z-index: 1; width: 90%; height: 70%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 60% 40% at 92% 38%, rgb(var(--papier-rgb) / .22), rgb(var(--rosa-rgb) / .1) 45%, transparent 75%); rotate: 12deg; }

/* Unterbodenlicht in Magenta: Lichtteppich unter dem Wagen entlang der Längsachse, über dem Bodenschatten */
.cover__wagen--held::after {
  content: ""; position: absolute; left: -8%; right: -2%; bottom: -20%; height: 52%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--mag-rgb)), rgb(var(--mag-rgb) / .55) 45%, rgb(var(--vio-rgb) / .25) 70%, transparent);
  rotate: -15deg; transform-origin: 45% 60%; filter: blur(12px); mix-blend-mode: screen;
}

/* Blaulicht der Streife: nur kurzes Aufblitzen in Rot und Blau, gedämpft */
.cover__blau { position: absolute; z-index: 3; border-radius: 50%; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.cover__blau--dach { left: 30%; top: -41%; width: 64%; aspect-ratio: 1.7;
  background: radial-gradient(ellipse 34% 40% at 38% 50%, rgb(var(--papier-rgb)) 0 3%, var(--blaulicht-rot) 7%, rgb(var(--gefahr-rgb) / .35) 30%, transparent 70%),
    radial-gradient(ellipse 34% 40% at 64% 50%, rgb(var(--papier-rgb)) 0 3%, var(--blaulicht-blau) 7%, transparent 70%); }
.cover__blau--grill { left: -4%; top: 30%; width: 40%; aspect-ratio: 2.2; background: radial-gradient(ellipse 30% 40% at 30% 50%, rgb(var(--papier-rgb)) 0 4%, var(--blaulicht-blau) 10%, transparent 70%), radial-gradient(ellipse 30% 40% at 72% 50%, rgb(var(--papier-rgb)) 0 4%, var(--blaulicht-rot) 10%, transparent 70%); }

/* Schild am Held: Name, Klasse und Preis aus der Händlerliste */
.cover__schild {
  position: absolute; z-index: 5; left: 5cqw; bottom: calc(var(--held-b) + var(--held-w) * .527 + 8px); display: grid; justify-items: start; gap: 2px;
  padding: 8px 14px 9px 12px; background: var(--papier); color: var(--text-ink); box-shadow: var(--versatz-tinte), 0 0 0 2px var(--grund);
  transform: skewX(var(--unskew)) rotate(-4deg); transform-origin: 0 100%;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
.cover__schild-kick { font: 700 12px/1.1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-papier-2); }
.cover__schild-name { font: 400 clamp(30px, 2.8vw, 42px)/.9 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--text-ink); }
.cover__schild-klasse { font: 700 12px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-papier); }
.cover__schild-preis { margin-top: 3px; padding: 3px 7px 2px; font: 400 20px/1 var(--f-display); letter-spacing: .04em; color: var(--ok); background: var(--grund); font-variant-numeric: tabular-nums; }

/* reservierter Platz unter dem Text in Tafel A: Held plus Schild darüber */
.cover__body--a { padding-bottom: calc(min(90%, 600px) * .527 + 30px + 150px); }

/* Tafel B: Live kompakt */
.cover__clip--b { background: var(--flaeche); }
.cover .live { height: 100%; box-shadow: none; }
.cover .live__num { font-size: clamp(76px, 18vw, 104px); }

/* Tafeln C und D: Figuren mit Papierkästchen */
.cover__clip--bild { aspect-ratio: 1; height: auto; background: var(--grad-platzhalter); }
.cover__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 10px 4px;
  font: 400 18px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
  background: var(--papier); color: var(--text-ink); box-shadow: var(--versatz-tinte); transform: skewX(var(--unskew));
}
.cover__c .cover__cap { left: 26px; }

/* Tafel E: Neonschild */
.cover__e { display: none; }
.cover__clip--schild { background: var(--grund-2); }
.cover__body--schild { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; }
.cover__ht { opacity: .5; }
.cover__sign { position: relative; --sign-h: clamp(48px, 5vw, 72px); }
.cover__wort { position: relative; font: 400 clamp(22px, 2vw, 30px)/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-shadow: var(--versatz-text); }

@media (min-width: 640px) {
  .cover__body--a { padding: 28px 32px calc(min(80%, 600px) * .527 + 36px + 150px); }
  .cover__cars { --held-w: min(80cqw, 600px); --held-b: 36px; --held-l: 6cqw; --streife-r: 5cqw; --streife-w: calc(var(--held-w) * .46); }
}

/* 960 bis 1279: Scherung 2,5 Grad, A volle Breite, darunter B links, C und D rechts */
@media (min-width: 960px) {
  .cover { --skew: -2.5deg; --unskew: 2.5deg; transform: skewX(var(--skew)); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cover__a { grid-column: 1 / -1; grid-row: 1; min-height: 640px; }
  .cover__cars { grid-column: 1 / -1; grid-row: 1; }
  .cover__b { grid-column: 1 / 7; grid-row: 2; }
  .cover__c { grid-column: 7 / 10; grid-row: 2; }
  .cover__d { grid-column: 10 / 13; grid-row: 2; }
  .cover__clip--bild { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .cover__body--a { padding: 34px 56px 180px; }
  .cover__hud { position: absolute; right: 56px; top: 28px; z-index: 2; margin: 0; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
  .cover__hud .hud__item { align-items: flex-end; }
  .cover__hud .hud__time { font-size: 28px; }
  .cover__hud .hud__cash { font-size: 34px; }
  .cover__hud .wanted { display: flex; }
  .cover__text { max-width: min(600px, 58%); }
  .cover__claim .claim__chrome { font-size: clamp(88px, 9vw, 136px); }
  .cover__claim .claim__script { font-size: clamp(36px, 4vw, 60px); }
  .cover__btns { flex-direction: row; flex-wrap: wrap; }
  .cover__btns .btn { width: auto; }
  /* Wagen rechts neben dem Text, ganz in Tafel A: rechts mindestens 4 Prozent Luft zur schrägen Kante */
  .cover__cars { --held-w: 44cqw; --held-l: 52cqw; --held-b: 5cqh; --streife-w: 21cqw; --streife-r: 4.5cqw; --streife-b: calc(var(--held-b) + var(--held-w) * .527 * .88); }
  .cover__schild { left: auto; right: calc(100cqw - var(--held-l) + 1cqw); bottom: var(--held-b); transform-origin: 100% 100%; }
  .cover .live { padding: 22px 40px 20px 44px; }
}

/* ab 1280: alle fünf Tafeln, 4 Grad Scherung, feste Höhe */
@media (min-width: 1280px) {
  .cover {
    --skew: -4deg; --unskew: 4deg;
    height: clamp(700px, calc(100svh - var(--hdr-h) - 58px - 42px), 860px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* obere Reihen etwas höher, damit die Live-Tafel ohne Gedränge passt */
    grid-template-rows: repeat(4, minmax(0, 1.2fr)) repeat(4, minmax(0, .8fr));
  }
  .cover__a { grid-column: 1 / 9; grid-row: 1 / 9; min-height: 0; }
  .cover__cars { grid-column: 1 / 9; grid-row: 1 / 9; }
  .cover__b { grid-column: 9 / 13; grid-row: 1 / 5; }
  .cover__c { grid-column: 9 / 11; grid-row: 5 / 9; }
  .cover__d { grid-column: 11 / 13; grid-row: 5 / 7; }
  .cover__e { display: block; grid-column: 11 / 13; grid-row: 7 / 9; }
  .cover__clip--bild { min-height: 0; }
  .cover__body--a { padding: 36px 64px 40px 72px; }
  .cover__hud { right: 72px; top: 30px; }
  .cover__text { max-width: min(560px, 62%); }
  .cover__schild { bottom: calc(var(--held-b) - 1cqh); }
  /* Chips höchstens zweireihig schmal, damit der Held auch bei breiter Textspalte (1920) Platz hat */
  .cover__chips { max-width: 420px; }
  .cover__claim .claim__chrome { font-size: clamp(96px, 8.6vw, 136px); }
  .cover__lead { font-size: 17px; }
  /* Der Held beginnt rechts neben den Chips (sie enden rund 400 px nach der Tafelkante), bei schmaler Tafel wird er kleiner */
  .cover__cars { --held-l: max(44cqw, 405px); --held-w: min(53cqw, 97cqw - var(--held-l)); --held-b: 4.5cqh; --streife-w: 24cqw; --streife-r: 5cqw; --streife-b: calc(var(--held-b) + var(--held-w) * .527 * .86); }
  /* Live kompakt, damit sie in die halbe Höhe passt */
  .cover .live { padding: 18px 40px 16px 46px; }
  .cover .live__num { font-size: clamp(76px, 6.2vw, 100px); }
  .cover .live__big { margin-top: 4px; }
  .cover .live__sub { margin-top: 4px; font-size: 13.5px; }
  .cover .live--quiet .live__sub { display: none; }
  .cover .live__quiet { margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
  .cover .spark { margin-top: 8px; }
  .cover .spark__svg { height: 40px; }
  .cover .live__facts { margin: 10px 0 12px; }
  .cover .live__facts > div { padding: 8px 10px 7px; }
  .cover .live__facts dd { font-size: 26px; }
  .cover .live__hint { display: none; }
  .cover .copy { min-height: 44px; }
}
@media (min-width: 1280px) and (max-height: 820px) {
  .cover .spark { display: none; }
}

/* Laden: Tafeln wischen auf, der Held schießt von hinten rechts herein und federt nach, die Lichtspuren ziehen nach,
   Scheinwerfer blenden auf, die Streife folgt mit Blaulicht. Endzustand ist ohne Animation sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .cover > .tafel { animation: tafel-wisch .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * .1s); }
  .cover__wagen--held, .cover__wagen--spur { animation: held-rein 1.25s var(--ease) .55s backwards; }
  .cover__wagen--held .cover__car--held { animation: held-federn 1.25s var(--ease) .55s backwards; transform-origin: 30% 100%; }
  .cover__wagen--streife { animation: streife-rein 1.4s var(--ease) 1s backwards; }
  .cover__schweif i { animation: schweif-ziehen 1.1s var(--ease) .95s backwards, schweif-fliessen 1.6s linear 2.05s infinite; }
  .cover__schweif i:nth-child(2n) { animation-delay: 1.05s, 2.5s; animation-duration: 1.1s, 2.1s; }
  .cover__licht { animation: licht-an .5s steps(2) 1.6s backwards, licht-atmen 3.2s ease-in-out 2.6s infinite; }
  .cover__kegel { animation: licht-an .5s steps(2) 1.6s backwards; }
  .cover__blau--dach { animation: blau-dach 2.4s linear 2s infinite; }
  .cover__blau--grill { animation: blau-grill 2.4s linear 2s infinite; }
  .cover__verkehr i { animation: verkehr 5.5s linear infinite; }
  .cover__verkehr i:nth-child(2) { animation-duration: 4.2s; animation-delay: -1.8s; }
  .cover__verkehr i:nth-child(3) { animation-duration: 7s; animation-delay: -3s; }
  .cover__verkehr i:nth-child(4) { animation-duration: 4.8s; animation-delay: -.9s; }
  .cover__schild { animation: schild-stempel .55s var(--ease-punch) 1.75s backwards; }
  .cover .neon-sign.is-an { animation-delay: .6s; }
}
@media (prefers-reduced-motion: reduce) {
  .cover__blau--dach { opacity: .35; }
}
@keyframes tafel-wisch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-30px -30px -30px -30px); } }
@keyframes held-rein { from { transform: skewX(var(--unskew)) translate(46%, -14%) scale(.82); opacity: 0; } 25% { opacity: 1; } 72% { transform: skewX(var(--unskew)) translate(-1.5%, .4%) scale(1.005); } to { transform: skewX(var(--unskew)); } }
@keyframes held-federn { 0%, 62% { transform: none; } 74% { transform: rotate(-1.4deg) scaleY(.985); } 88% { transform: rotate(.5deg); } to { transform: none; } }
@keyframes streife-rein { from { transform: skewX(var(--unskew)) translate(40%, -18%) scale(.8); opacity: 0; } 30% { opacity: 1; } to { transform: skewX(var(--unskew)); } }
@keyframes schweif-ziehen { from { scale: 0 1; opacity: 0; } 40% { opacity: 1; } }
@keyframes schweif-fliessen { 0% { translate: 0 0; opacity: 1; } 70% { opacity: .55; } 100% { translate: 22% 0; opacity: 1; } }
@keyframes licht-an { from { opacity: 0; } }
@keyframes licht-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes blau-dach { 0% { opacity: .75; } 4% { opacity: 0; } 8% { opacity: .6; } 12%, 100% { opacity: 0; } }
@keyframes blau-grill { 0%, 48% { opacity: 0; } 50% { opacity: .7; } 54% { opacity: 0; } 58% { opacity: .55; } 62%, 100% { opacity: 0; } }
@keyframes verkehr { from { translate: 30% 0; opacity: 0; } 15% { opacity: .6; } 70% { opacity: .5; } to { translate: -120% 0; opacity: 0; } }
@keyframes schild-stempel { from { scale: 1.6; opacity: 0; } 60% { opacity: 1; } }

/* ---------------------------------------------------------------------
   Zahlenband
   --------------------------------------------------------------------- */
.home-tapes { position: relative; }

/* ---------------------------------------------------------------------
   Kapitel 01 Willkommen: Initiale, Zitat, Postkarte, Filmklappe
   --------------------------------------------------------------------- */
.home-welcome__lead { margin-bottom: 20px; font-size: var(--fs-lead); line-height: 1.6; color: var(--text); }
.home-welcome__prose { display: grid; gap: 1em; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.initiale::first-letter { float: left; margin: 8px 12px 0 0; font: 400 104px/.78 var(--f-display); color: var(--mag); text-shadow: 4px 4px 0 var(--tief); }
.pull {
  margin: 28px 0 0; padding: 20px 22px 18px 26px; background: rgb(var(--vio-rgb) / .16); box-shadow: inset 5px 0 0 var(--mag);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, 0 100%);
}
.pull p { font: 400 clamp(24px, 2.2vw, 30px)/1.05 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.home-welcome__side { display: grid; justify-items: center; gap: 0; }
.home-welcome__side .postcard { width: min(100%, 520px); }
.home-film { width: min(94%, 440px); margin-top: 28px; transform: rotate(-2.5deg); z-index: 1; }
.home-film__card { --c: var(--cut-s); padding: 0 22px 20px; overflow: hidden; }
.home-film__klappe { display: block; height: 30px; margin: 0 -22px 16px; background: repeating-linear-gradient(120deg, var(--text-ink) 0 20px, var(--papier) 20px 40px); box-shadow: inset 0 -3px 0 var(--text-ink); }
.home-film__kick { font: 700 12px/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-papier-2) !important; }
.home-film__title { margin: 6px 0 10px; font: 400 clamp(34px, 3vw, 42px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text-ink); }
.home-film__card p + p { margin-top: 8px; }
.home-film__card p { font-size: 14.5px; line-height: 1.55; }
.home-film__stark { font-weight: 600; color: var(--text-ink) !important; }
@media (min-width: 960px) {
  .home-welcome__grid { align-items: start; }
  .home-welcome__side { padding-top: 40px; }
  .home-film { justify-self: start; margin-left: -4%; margin-top: 30px; }
}

/* ---------------------------------------------------------------------
   Kapitel 02 Themenkacheln
   --------------------------------------------------------------------- */
.tiles { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); margin: 0; list-style: none; padding: 0; }
.tile { position: relative; display: flex; flex-direction: row; min-width: 0; filter: drop-shadow(var(--versatz-s)); transition: translate .35s var(--ease), filter .35s var(--ease); }
.tile__art {
  position: relative; flex: 0 0 96px; overflow: hidden; background: var(--grad-platzhalter);
}
.tile__body {
  flex: 1; min-width: 0; position: relative; padding: 14px 16px 14px 16px; background: var(--flaeche);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.tile__no {
  position: absolute; right: 16px; top: 14px; font: 400 54px/1 var(--f-display); color: transparent;
  -webkit-text-stroke: 1.5px rgb(var(--rosa-rgb) / .55); display: none;
}
.tile__title { display: flex; align-items: baseline; gap: 8px; font: 400 22px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.tile__icon { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--rosa); transform: translateY(2px); }
.tile__icon .icon { width: 18px; height: 18px; }
.tile__text { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tile__chips { display: none; margin-top: 16px; }

/* Bildkopf-Motive */
.tile__frei { position: absolute; inset: 10px 4px; width: calc(100% - 8px); height: calc(100% - 20px); max-width: none; object-fit: contain; filter: drop-shadow(5px 6px 0 rgb(var(--grund-rgb) / .5)); }
.tile__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__foto--handy { object-position: 50% 55%; }
.tile__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 70%, rgb(var(--gold-rgb) / .25), transparent 70%); }
.tile__ht { opacity: .5; }
.tile--kuh .tile__art { background: linear-gradient(160deg, var(--mag), var(--vio)); }
.tile--lotto .tile__art { background: linear-gradient(160deg, var(--rosa), var(--mag)); }
.tile--polizei .tile__art, .tile--ambulanz .tile__art { background: linear-gradient(170deg, var(--tief), var(--nacht) 80%); }
.tile--zentorno .tile__art { background: radial-gradient(ellipse 80% 70% at 50% 60%, rgb(var(--mag-rgb) / .55), transparent 70%), linear-gradient(160deg, var(--vio), var(--tief)); }
.tile__wanted { position: absolute; left: 10px; bottom: 10px; gap: 2px; }
.tile__wanted svg { width: 12px; height: 12px; }
.tile__blaulicht { position: absolute; inset: 0; pointer-events: none; }
.tile__blaulicht::before, .tile__blaulicht::after { content: ""; position: absolute; top: -20%; width: 70%; height: 90%; border-radius: 50%; opacity: .2; }
.tile__blaulicht::before { left: -10%; background: radial-gradient(circle, var(--blaulicht-rot), transparent 65%); }
.tile__blaulicht::after { right: -10%; background: radial-gradient(circle, var(--blaulicht-blau), transparent 65%); }
.tile__kreuz { position: absolute; left: 8%; top: 12%; width: 34%; aspect-ratio: 1; opacity: .9;
  background: linear-gradient(var(--rosa), var(--rosa)) center / 34% 100% no-repeat, linear-gradient(var(--rosa), var(--rosa)) center / 100% 34% no-repeat; }
.tile__streifen { position: absolute; left: -10%; right: -10%; top: 40%; height: 40px; transform: skewX(-24deg);
  background: linear-gradient(var(--rosa), var(--rosa)) 0 0 / 70% 3px no-repeat, linear-gradient(var(--rosa), var(--rosa)) 20% 50% / 85% 3px no-repeat, linear-gradient(var(--rosa), var(--rosa)) 50% 100% / 60% 3px no-repeat; opacity: .6; }
.tile__night { position: absolute; inset: 0; }
.tile__night .night__palm--r { --palm-r: 70%; }
.tile__zahl { position: absolute; left: 8px; bottom: 6px; z-index: 2; font: 400 40px/.8 var(--f-display); color: var(--text); text-shadow: var(--versatz-text); font-variant-numeric: tabular-nums; }
.tile__faecher { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 100%, rgb(var(--mag-rgb) / .35), transparent 70%); }
.tile__faecher i {
  position: absolute; left: 50%; bottom: -34%; width: 44%; height: 90%; margin-left: -22%; border-radius: 8px; transform-origin: 50% 100%;
  box-shadow: 4px 4px 0 rgb(var(--grund-rgb) / .45);
  background-image: repeating-linear-gradient(45deg, rgb(var(--papier-rgb) / .18) 0 2px, transparent 2px 7px);
}
.tile__faecher i:nth-child(1) { background-color: var(--vio); transform: rotate(-24deg); }
.tile__faecher i:nth-child(2) { background-color: var(--mag); transform: rotate(0deg); }
.tile__faecher i:nth-child(3) { background-color: var(--rosa); transform: rotate(24deg); }

/* ab 640: Bildkopf oben mit schrägem Unterschnitt, volle Texte, Chips, Umriss-Nummer */
@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 26px; }
  .tile { flex-direction: column; filter: drop-shadow(var(--versatz)); }
  .tile__art { flex: none; height: 220px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 84%, 0 100%); }
  .tile__body { flex: 1; margin-top: -30px; padding: 44px 24px 24px; clip-path: polygon(0 34px, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
  .tile__no { display: block; right: 20px; top: 36px; }
  .tile__title { padding-right: 64px; font-size: var(--fs-h3); line-height: .95; }
  .tile__text { margin-top: 12px; font-size: 14.5px; line-height: 1.6; }
  .tile__text.fade-3 { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .tile__chips { display: flex; }
  .tile__frei { inset: auto; height: auto; object-fit: initial; filter: drop-shadow(8px 10px 0 rgb(var(--grund-rgb) / .5)); }
  .tile__frei--zug { left: -3%; bottom: 14%; width: 104%; }
  .tile__frei--auto { left: 50%; bottom: 14%; width: min(92%, 380px); translate: -50% 0; }
  .tile__frei--kuh { left: 50%; bottom: 13%; height: 92%; width: auto; translate: -50% 0; }
  .tile__frei--lotto { left: 50%; top: 10%; width: min(84%, 360px); translate: -50% 0; }
  .tile__wanted { left: auto; right: 20px; bottom: 44px; gap: 4px; }
  .tile__wanted svg { width: 20px; height: 20px; }
  .tile__zahl { left: 22px; bottom: 44px; font-size: 104px; }
  .tile__faecher i { width: 30%; margin-left: -15%; height: 110%; bottom: -44%; }
  .tile:hover { translate: -4px -6px; filter: drop-shadow(var(--versatz-hover)); }
}
@media (min-width: 640px) and (max-width: 1279px) {
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px 26px; }
  /* Breite je Kachel setzt home.js (kachelSpalten): Rhythmus 5/3/4, 3/4/5, 4/4/4, breiteste Spalte für das längste Wort */
  .tile { grid-column: span 4; }
  .tile--s3 { grid-column: span 3; } .tile--s5 { grid-column: span 5; } .tile--s6 { grid-column: span 6; } .tile--s12 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .tile--polizei .tile__blaulicht::before { animation: blaulicht 1.1s steps(1) infinite; }
  .tile--polizei .tile__blaulicht::after { animation: blaulicht 1.1s steps(1) infinite .55s; }
}
@keyframes blaulicht { 0% { opacity: .75; } 50% { opacity: .15; } }
.home-regel { margin-top: 56px; }
.home-regel p { color: var(--text-ink); }
.home-regel a { font-weight: 700; }

/* ---------------------------------------------------------------------
   Kapitel 03 Stadtkarte
   --------------------------------------------------------------------- */
.home-city__map { display: grid; justify-items: center; }
.home-city__map .map { max-width: min(100%, 460px); }
.home-city__map .map__legend, .home-city__map .map__coords { width: min(100%, 460px); }
.map__legend-raster { border-radius: 0 !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--text-3) !important;
  background-image: linear-gradient(var(--text-3), var(--text-3)), linear-gradient(var(--text-3), var(--text-3)) !important;
  background-size: 1px 100%, 100% 1px !important; background-position: center !important; background-repeat: no-repeat !important; }
.map__coords b { color: var(--rosa); font-weight: 700; }
@media (max-width: 639px) {
  .home-city__map .map { max-width: 320px; }
}
@media (min-width: 960px) {
  .home-city__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .home-city__list .sec-head { margin-bottom: 28px; }
}

/* ---------------------------------------------------------------------
   Kapitel 04 Showroom (W7): Radiogruppen steuern Wagen und Licht per :has(), JS nur fürs Vorladen
   --------------------------------------------------------------------- */
.showroom { --glow: var(--mag); position: relative; }
.showroom:has(#sr-g-violett:checked) { --glow: var(--vio); }
.showroom:has(#sr-g-rosa:checked) { --glow: var(--rosa); }
.showroom:has(#sr-g-gold:checked) { --glow: var(--gold); }
.showroom__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.showroom__grid { display: grid; gap: 20px; align-items: center; }
.showroom__stage { position: relative; display: grid; place-items: end center; aspect-ratio: 16 / 9; }
.showroom__stage > * { grid-area: 1 / 1; }
.showroom__stage::before { /* Bühnenboden */
  content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--rosa-rgb) / .5) 30%, rgb(var(--rosa-rgb) / .5) 70%, transparent);
}
.showroom__boden {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 40%; pointer-events: none; opacity: 1;
  background: radial-gradient(ellipse 50% 45% at 50% 55%, var(--glow), transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, var(--grund) 20%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, var(--grund) 20%, transparent 100%);
  transition: background var(--t-slow);
}
.showroom__car { display: none; position: relative; width: min(100%, 760px); margin-bottom: 2%; }
.showroom__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 18px rgb(var(--grund-rgb) / .7)); }
.showroom__wert, .showroom__licht-name { display: none; }
.showroom:has(#sr-m-0:checked) [data-modell="0"], .showroom:has(#sr-m-1:checked) [data-modell="1"],
.showroom:has(#sr-m-2:checked) [data-modell="2"], .showroom:has(#sr-m-3:checked) [data-modell="3"],
.showroom:has(#sr-m-4:checked) [data-modell="4"], .showroom:has(#sr-m-5:checked) [data-modell="5"],
.showroom:has(#sr-m-6:checked) [data-modell="6"], .showroom:has(#sr-m-7:checked) [data-modell="7"] { display: block; }
.showroom:has(#sr-m-0:checked) b[data-modell="0"], .showroom:has(#sr-m-1:checked) b[data-modell="1"],
.showroom:has(#sr-m-2:checked) b[data-modell="2"], .showroom:has(#sr-m-3:checked) b[data-modell="3"],
.showroom:has(#sr-m-4:checked) b[data-modell="4"], .showroom:has(#sr-m-5:checked) b[data-modell="5"],
.showroom:has(#sr-m-6:checked) b[data-modell="6"], .showroom:has(#sr-m-7:checked) b[data-modell="7"],
.showroom:has(#sr-g-magenta:checked) [data-licht="magenta"], .showroom:has(#sr-g-violett:checked) [data-licht="violett"],
.showroom:has(#sr-g-rosa:checked) [data-licht="rosa"], .showroom:has(#sr-g-gold:checked) [data-licht="gold"] { display: inline; }
/* Ohne :has() (sehr alte Browser): erster Wagen bleibt sichtbar */
@supports not selector(:has(*)) {
  .showroom__car[data-modell="0"], .showroom__wert[data-modell="0"], [data-licht="magenta"] { display: block; }
}
.showroom__daten b { font-size: 24px; text-align: right; overflow-wrap: anywhere; white-space: normal; }
.showroom__glow { margin: 18px 0 0; padding: 0; border: 0; }
.showroom__legend { margin-bottom: 8px; font: 700 var(--fs-label)/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.showroom__dots { display: flex; gap: 6px; }
.showroom__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.showroom__dot::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px var(--grund), 0 0 0 3px rgb(var(--text-rgb) / .25); transition: box-shadow var(--t), transform var(--t) var(--ease-punch); }
.showroom__dot:hover::before { transform: scale(1.08); }
.showroom__dot:has(input:checked)::before { box-shadow: 0 0 0 3px var(--grund), 0 0 0 5px var(--fokus), 0 0 18px var(--dot); }
.showroom__dot:has(input:focus-visible) { outline: 3px solid var(--rosa); outline-offset: 0; border-radius: 50%; }
.showroom__hint { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.showroom__thumbs-box { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.showroom__thumbs {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 10px; margin: -4px;
  scrollbar-width: thin; scrollbar-color: var(--vio) transparent;
}
.showroom__thumb {
  --c: var(--cut-s); flex: 0 0 132px; scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; padding: 8px 8px 10px; cursor: pointer;
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); transition: background var(--t), box-shadow var(--t);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.showroom__thumb:hover { background: var(--flaeche-2); }
.showroom__thumb-img { width: 100%; height: auto; }
.showroom__thumb span { font: 700 12px/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); text-align: center; }
.showroom__thumb:has(input:checked) { background: rgb(var(--mag-rgb) / .12); box-shadow: inset 0 0 0 2px var(--mag), inset 0 0 18px rgb(var(--mag-rgb) / .35); }
.showroom__thumb:has(input:checked) span { color: var(--text); }
.showroom__thumb:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .showroom__car { animation: einfahren .6s var(--ease); }
}
@keyframes einfahren { from { translate: -48px 0; opacity: 0; } }
@media (min-width: 960px) {
  .showroom__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; }
  .showroom__thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; }
  .showroom__thumb { flex: none; }
}

/* ---------------------------------------------------------------------
   Kapitel 05 Handy: Liste mit Symbolkästchen, Collage
   --------------------------------------------------------------------- */
.home-points { display: grid; gap: 12px; margin: 0 0 26px; }
.home-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15px; line-height: 1.45; color: var(--text); }
.home-points__icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text-ink); background: var(--mag); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.home-points__icon .icon { width: 20px; height: 20px; }
.home-phone__mikro { margin-top: 12px; font: 500 13px/1.4 var(--f-ui); color: var(--text-3); }
.home-phone__collage { position: relative; display: grid; justify-items: center; gap: 36px; padding-top: 8px; }
.home-phone__dossier { width: min(100%, 380px); transform: rotate(-2deg); }
.home-phone__msgs { display: none; }
.home-phone__geraet { display: grid; justify-items: center; }
.home-phone__zahl { font: inherit; color: var(--ok); }
.home-phone__cd { display: block; margin-top: 4px; }
.home-phone__news { display: block; }
.home-phone__beispiel { margin-top: 10px; font: 700 12px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); text-align: right; }
@media (min-width: 1280px) {
  .home-phone__collage { display: block; min-height: 640px; }
  .home-phone__dossier { position: absolute; left: 0; top: 30px; width: min(50%, 340px); transform: rotate(-4deg); }
  .home-phone__msgs { display: block; position: absolute; left: 2%; bottom: 40px; width: min(46%, 300px); }
  .home-phone__geraet { position: absolute; right: 0; top: 0; z-index: 2; }
  .home-phone__geraet .phone { width: 280px; }
}

/* ---------------------------------------------------------------------
   Kapitel 06 Velmora Post
   --------------------------------------------------------------------- */
.home-news__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.home-news__head .sec-head { margin-bottom: 0; }
.home-news__grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.home-news__post { max-width: 760px; }
.home-news__cards { display: none; }
.home-news__side { min-width: 0; display: grid; gap: 24px; align-content: start; }
.home-news__discord .card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 16px; align-items: center; text-decoration: none; }
.home-news__discord-icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; color: var(--text); background: var(--discord); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.home-news__discord-icon .icon { width: 24px; height: 24px; }
.home-news__discord-text b { display: block; font: 400 26px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.home-news__discord-text span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.home-news__discord .link { justify-self: start; }
@media (min-width: 960px) {
  .home-news__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .home-news__grid--solo { grid-template-columns: minmax(0, 1fr); }
  .home-news__cards { display: grid; gap: 24px; }
  .home-news__rows { display: none; }
  .home-news__cards .news-card { --c: var(--cut); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
}

/* ---------------------------------------------------------------------
   Kapitel 07 VIP und Coins
   --------------------------------------------------------------------- */
.home-vip__cards {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 22px var(--gutter) 30px;
  scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--vio) transparent;
}
.home-vip__item { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; display: flex; }
.home-vip__item .vip { width: 100%; }
.home-vip__cards:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; }
.home-coins { margin-top: 24px; }
.home-coins__card { display: grid; gap: 20px; align-items: center; }
.home-coins__art { position: relative; width: 160px; height: 130px; }
.home-coins__schein { position: absolute; left: 0; bottom: 0; width: 120px; height: auto; transform: rotate(-12deg); filter: drop-shadow(6px 8px 0 rgb(var(--grund-rgb) / .5)); }
.home-coins__muenze { position: absolute; right: 0; top: 0; width: 110px; height: auto; filter: drop-shadow(0 0 22px rgb(var(--gold-rgb) / .4)); }
.home-coins__text .card__title { color: var(--gold); }
.home-coins__cta { display: grid; gap: 10px; justify-items: start; }
.home-coins__sicher { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--f-ui); color: var(--text-3); }
.home-coins__sicher .icon { color: var(--ok); }
@media (min-width: 640px) {
  .home-vip__item { flex-basis: 380px; }
}
@media (min-width: 960px) {
  .home-vip__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; overflow: visible; margin: 0; padding: 18px 0 8px; }
  .home-vip__item { flex: none; }
  .home-coins { margin-top: 48px; }
  .home-coins__card { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 32px; padding: 26px 34px; }
  .home-coins__art { width: 180px; height: 140px; }
  .home-coins__muenze { width: 128px; }
}

/* ---------------------------------------------------------------------
   Kapitel 08 Route (W10) mit beliebiger Schrittzahl
   --------------------------------------------------------------------- */
.home-route .route__step .copy { margin-top: 14px; }
.home-route__hilfe { margin-top: 48px; max-width: 760px; }
@media (min-width: 960px) {
  .home-route .route__steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
  .home-route .route__title { font-size: clamp(24px, 2vw, 30px); }
  .home-route .route__text { font-size: 14px; }
  .home-route__copy { align-self: flex-end; width: min(360px, 170%); max-width: none; }
  .home-route__hilfe { margin: 56px auto 0; }
}

/* ---------------------------------------------------------------------
   Finale als Ladebildschirm (W11) mit drei gescherten Bildtafeln
   --------------------------------------------------------------------- */
.home-finale .loadscreen { min-height: clamp(620px, 88vh, 820px); }
.home-finale__text { margin-top: 10px; max-width: 34em; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.finale__tafeln { display: none; }
@media (min-width: 960px) {
  .finale__tafeln { display: block; position: absolute; top: 8%; bottom: 20%; right: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2)); width: 46%; }
  .finale__tafel { position: absolute; translate: 0 var(--py, 0px); will-change: translate; }
  .finale__clip {
    position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--grad-platzhalter); transform: skewX(-6deg);
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  }
  .finale__clip > img { position: absolute; inset: 0 -8%; width: 116%; height: 100%; max-width: none; object-fit: cover; transform: skewX(6deg); }
  .finale__tafel--1 { left: 6%; top: 0; width: 40%; height: 52%; }
  .finale__tafel--2 { right: 0; top: 10%; width: 36%; height: 50%; }
  .finale__tafel--3 { left: 22%; bottom: 0; width: 60%; height: 40%; }
  .finale__clip--auto { background: linear-gradient(160deg, var(--vio), var(--tief)); }
  .finale__strahl { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 70% 110%, rgb(var(--mag-rgb) / .55) 0 6deg, transparent 6deg 14deg); }
  .finale__clip > img.finale__auto { inset: auto; left: 50%; bottom: 4%; width: 86%; height: auto; object-fit: contain; transform: translateX(-50%) skewX(6deg); filter: drop-shadow(8px 10px 0 rgb(var(--grund-rgb) / .55)); }
  .home-finale .loadscreen__body { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }
  .home-finale .loadscreen__body > * { max-width: 52%; }
}

/* Kopierknopf in der Live-Tafel des Covers nur als Symbol, damit der Befehl ganz lesbar bleibt */
@media (min-width: 960px) {
  .cover .copy__btn { min-width: 48px; padding: 0 14px; }
  .cover .copy__btn span { display: none; }
}

/* ---------------------------------------------------------------------
   Willkommen: weitere Absätze klappen mobil ein (nur mit JS, ohne JS steht alles offen)
   --------------------------------------------------------------------- */
.home-welcome__mehr > p + p, .home-welcome__mehr > summary + p { margin-top: 1em; }
.home-welcome__mehr > summary {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font: 700 13px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa);
  text-decoration: underline; text-decoration-color: var(--mag); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.home-welcome__mehr > summary::-webkit-details-marker { display: none; }
.home-welcome__mehr[open] > summary { display: none; }

/* ---------------------------------------------------------------------
   Handy unter 640: Längenbudget 15.000 px (design.md 4.5)
   --------------------------------------------------------------------- */
@media (max-width: 639px) {
  .page-home .sec { padding-block: 40px; }
  .places__text { font-size: 14px; line-height: 1.5; }
  .tile__body { padding-block: 12px; }
  .page-home .sec-head { margin-bottom: 26px; }
  .page-home .tapes { padding: 28px 0 44px; }
  .cover .spark, .cover .live__hint { display: none; }
  .cover .live__facts { margin: 12px 0 14px; }
  .home-welcome__prose { font-size: 15.5px; line-height: 1.65; }
  .tiles { gap: 12px; } /* zehnte Kachel aus dem Panel passt so ins Budget */
  .tile__text.fade-3 { max-height: calc(2 * 1lh); }
  .home-regel { margin-top: 32px; }
  .home-city__map .map { max-width: 270px; }
  .places__item { padding: 12px 14px; gap: 12px; grid-template-columns: 44px minmax(0, 1fr); }
  .places__no { width: 44px; height: 44px; font-size: 28px; }
  .places__name { font-size: 24px; }
  .showroom__hint { display: none; }
  .home-points { gap: 8px; }
  .home-points li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; font-size: 14.5px; }
  .home-points__icon { width: 34px; height: 34px; }
  .home-phone__collage { gap: 24px; }
  .home-phone__geraet .phone { width: 226px; }
  .vip__perks li:nth-child(n + 5) { display: none; }
  .home-vip__cards { padding-bottom: 18px; }
  .home-route .route__steps { gap: 22px; }
  .home-route__hilfe { margin-top: 32px; }
  .home-route .route__text { font-size: 14px; line-height: 1.55; }
  .home-finale .loadscreen { min-height: 0; padding: 64px 0 176px; }
  .home-city__map .map__coords { display: none; }
  .cover .live--quiet .live__sub { display: none; }
  .home-coins__card { gap: 14px; }
  .post__title { margin-top: 12px; }
}