/* =====================================================================
   Maserati MY27 – Infoscreen (Grecale · GranTurismo · GranCabrio)
   Alle Größen in vw/vh, damit die Darstellung auf 1080p und 4K identisch
   skaliert (Querformat 16:9). Schmale, hochformatige oder sehr flache
   Screens (Smartphone, Tablet hochkant) bekommen am Dateiende ein gestapeltes
   Layout; das dunkle Farbschema (Nachtmodus) steht ebenfalls am Dateiende.
   ===================================================================== */

@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jost-latin-600-normal.woff2') format('woff2'); }

:root {
  /* Basiseinheit: 1 % der Breite eines 16:9-Felds, das in den Bildschirm passt
     (auf 16:9-Screens = 1vw; auf breiteren Screens richtet sich alles nach der Höhe) */
  --u: min(1vw, 1.7778vh);

  /* Farben – helles Schema; das dunkle Schema steht weiter unten unter [data-theme="dark"] (Standard: Automatisch = Gerät) */
  color-scheme: light;
  --bg: #ffffff;
  --frame-bg: #f1f2f1;          /* Hintergrund der Bildrahmen = Bildhintergrund im Product Guide */
  --frame-shadow: 0 calc(0.6 * var(--u)) calc(1.8 * var(--u)) rgba(0,0,0,0.12), 0 calc(0.1 * var(--u)) calc(0.3 * var(--u)) rgba(0,0,0,0.06);
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-muted: #8a8a8a;
  --line: #d9d9d9;
  --accent: #ffc845;            /* Gelb von maserati.com (dort CSS-Variable --c-accent, z. B. Buttons „Konfigurieren“) */
  --accent-ink: #000;           /* Schrift auf Gelb – wie auf maserati.com schwarz */
  --placeholder: #9e2f46;       /* Markierung fehlender Bilder/Texte (bisheriger Bordeaux-Akzent, bleibt rot = „fehlt“) */
  --placeholder-bg: #faf3f5;
  --hdr-bg: #0a0a0a;
  --hdr-line: transparent;      /* Trennlinie unter dem Header (nur im dunklen Schema sichtbar) */

  /* Maße */
  --hdr-h: calc(3.42 * var(--u));              /* ≈ 66 px bei 1920 px: 2,9 u + je 0,26 u (5 px) oben und unten, damit der Header etwas
                                                  kräftiger wirkt und Logo, Namen und Zähler mehr Luft haben (Entscheid Tim, 18.09.2026) */
  --ftr-h: calc(8 * var(--u));                 /* Höhe des festen Footers – wird per JS auf den höchsten Footer der drei Modelle gesetzt */
  --ftr-s: calc(0.75 * var(--u) + 0.5px);     /* Abstandseinheit S im Footer = bisheriger sichtbarer Abstand des © (Grundlinie) zur
                                                 Unterkante: 5 px + halber Rest des 1,5-u-Felds um die 10-pt-Zeile + Unterlänge 5 px */
  --pad-x: calc(2.6 * var(--u));
  --pad-y: calc(1.6 * var(--u));
  --frame-gap: calc(1.2 * var(--u));
  --frame-w: calc(40 * var(--u));              /* wird per JS gesetzt (alle Bilder gleich groß) */
  --frame-h: calc(20 * var(--u));
  --frame-radius: calc(0.15 * var(--u));
  --dot-size: calc(1.28 * var(--u));    /* Durchmesser der Markierungspunkte (≈ 25 px bei 1920 px) */

  /* Animation (werden per JS aus den Einstellungen gesetzt) */
  --offset: 50px;
  --dur: 900ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iOS Safari: keine automatische Textvergrößerung – die blies sonst die Listenpunkte auf dem iPhone auf */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}
img { display: block; }
button { font: inherit; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--hdr-h);
  background: var(--hdr-bg);
  color: #fff;
  border-bottom: 1px solid var(--hdr-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x);
}
.hdr-brand { display: flex; align-items: center; }
.hdr-brand-link { display: flex; align-items: center; cursor: pointer; }   /* Logo verlinkt auf maserati.com/de/de */
.hdr-brand-link:not([href]) { cursor: default; }                          /* externe Links im Panel ausgeschaltet (app.js nimmt das href) */
.hdr-logo {
  height: calc(1.75 * var(--u)); width: auto;     /* gleiche Höhe wie der bisherige Dreizack */
  filter: brightness(0) invert(1);                /* Logo-Datei ist dunkel -> im Header weiß */
}
.hdr-nav {                               /* Modellnamen, mittig im Header */
  position: absolute; left: 50%; top: 0; height: 100%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(2.4 * var(--u));
}
.hdr-model {
  position: relative;
  background: none; border: 0; cursor: default;
  color: rgba(255,255,255,0.55);
  font-weight: 400; font-size: calc(0.85 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase;
  padding: calc(0.45 * var(--u)) 0 calc(0.35 * var(--u));
  border-bottom: 1px solid transparent;       /* hält die bisherige Höhe; die gelbe Linie zeichnet ::after */
  transition: color .3s;
}
.hdr-model:last-child { margin-right: -0.22em; }   /* Laufweite hinter dem letzten Buchstaben herausrechnen: Browser setzen sie auch dort,
                                                      sonst steht die Namensgruppe um die halbe Laufweite links der Mitte */
.hdr-model::after {                           /* Markierung des aktiven Modells: 1 px Linie, halb so weit unter der Schrift wie zuvor
                                                 (früher Unterlänge 0,31 u + Innenabstand 0,35 u = 0,66 u -> jetzt 0,33 u unter der Grundlinie) */
  content: ''; position: absolute; left: 0; right: 0.22em; height: 1px;   /* endet unter dem letzten Buchstaben, nicht unter dessen Laufweite */
  bottom: calc(0.33 * var(--u) - 1px);       /* Oberkante der Linie 0,33 u unter der Grundlinie (-1px = eigene Höhe) */
  background: transparent; transition: background-color .3s;
}
.hdr-model.is-active { color: #fff; }
.hdr-model.is-active::after { background: var(--accent); }
.hdr-right { display: flex; align-items: center; gap: calc(1.2 * var(--u)); }
.hdr-counter {
  background: none; border: 0; color: rgba(255,255,255,0.75); cursor: default;
  font-weight: 400; font-size: calc(0.85 * var(--u)); letter-spacing: 0.22em; padding: calc(0.4 * var(--u)) 0;
  margin-right: -0.22em;                 /* Laufweite hinter der letzten Ziffer herausrechnen: Ziffern enden am Innenabstand des Headers */
  font-variant-numeric: tabular-nums;
}
.hdr-paused {                            /* Anzeige „paused“ – Antippen setzt die Wiedergabe fort */
  background: none; cursor: pointer;
  font-size: calc(0.7 * var(--u)); letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  padding: calc(0.25 * var(--u)) calc(0.6 * var(--u) - 0.21em) calc(0.25 * var(--u)) calc(0.6 * var(--u));
                                        /* rechts schmaler, damit die Schrift optisch mittig steht: Browser setzen die Laufweite
                                           (0,25 em) auch hinter den letzten Buchstaben, und in Jost 300 hat das P links 0,04 em
                                           mehr Vorbreite als das D rechts Nachbreite -> 0,25 - 0,04 = 0,21 em (gemessen ±0,5 px) */
  border: 1px solid rgba(255,255,255,0.3); border-radius: calc(0.15 * var(--u));
}

/* ---------- Footer: Verbrauchsangaben der Modellpalette · 1-px-Linie · Copyright · Vorbehalt ----------
   Sichtbare Abstände (Entscheid Tim, 18.09.2026): Text –1,5 S– Linie –0,75 S– © –0,75 S– „Irrtümer und
   Änderungen vorbehalten“ (Zeile unter dem ©, 22.09.2026) –0,75 S– Unterkante
   (S = --ftr-s; 1,5 S ≈ 22 px, 0,75 S ≈ 11 px bei 1920 px).
   Die Ränder rechnen die Schriftmetrik von Jost heraus, damit die Abstände zwischen Grundlinie bzw.
   Versaloberkante und Linie/Kante liegen (nicht zwischen den Zeilenboxen). Derselbe Aufbau steht im
   gestapelten Layout in jeder Folie (.slide-ftr). */
.ftr {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  height: var(--ftr-h);                 /* = höchster Footer der drei Modelle (JS), damit die Bühne beim Modellwechsel nicht springt */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad-x);
  background: var(--bg);
}
.ftr-legal {                            /* Verbrauchsangaben als Fließtext – Schrift und Größe wie das © (Jost Light, 10 pt), Farbe wie die Fußnoten (--ink-muted) */
  margin: 0 0 calc(1.5 * var(--ftr-s) - 5.31px);   /* Grundlinie der letzten Zeile -> Linie = 1,5 S (5,31 px = Unterlänge + halber Durchschuss bei 10 pt / 1,45) */
  text-align: center;
  font-weight: 300; font-size: 10pt; line-height: 1.45; color: var(--ink-muted);
}
.ftr-legal .nowrap { white-space: nowrap; }               /* Wertebereiche (9,3–8,8) nicht am Strich umbrechen */
.ftr-rule { height: 1px; background: var(--ink-muted); }  /* 1 px Linie in der Farbe der Fußnoten (wie Verbrauchsangaben und ©) */
.ftr-copy, .ftr-note {                  /* © und Vorbehalt in Jost Light 10 pt ohne Laufweite, Farbe der Fußnoten (--ink-muted; Entscheid Tim, 18.09.2026) */
  text-align: center;
  font-weight: 300; font-size: 10pt; line-height: 1; color: var(--ink-muted);
}
.ftr-copy { margin-top: calc(0.75 * var(--ftr-s) - 1px); }          /* Linie -> Versaloberkante = 0,75 S (bei line-height 1 beginnt die Versalhöhe 1 px unter der Zeilenbox) */
.ftr-note {
  margin-top: calc(0.75 * var(--ftr-s) - 2.33px - 1px);             /* Grundlinie © -> Versaloberkante Vorbehalt = 0,75 S (Zeilenbox ragt 2,33 px unter die Grundlinie, Versalhöhe beginnt 1 px unter der Box) */
  padding-bottom: calc(0.75 * var(--ftr-s) - 2.33px);               /* Grundlinie -> Unterkante = 0,75 S */
}
.slide-ftr { display: none; }           /* Footer je Folie – nur im gestapelten Layout (s. unten), am Desktop gilt der feste Footer */

/* ---------- Bühne ---------- */
.stage {
  position: fixed; left: 0; right: 0;
  top: var(--hdr-h); bottom: var(--ftr-h);
  overflow: hidden;
}
.slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: var(--pad-y) var(--pad-x);
  column-gap: var(--pad-x);
  visibility: hidden;
}
.slide.is-active, .slide.is-animating { visibility: visible; }

/* linke Hälfte: Bilder */
.col-media {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--frame-gap);
  min-height: 0; min-width: 0;
  will-change: transform, opacity;
}
.slot {                                  /* Platzhalter: alle Bildplätze gleich groß */
  position: relative;
  width: var(--frame-w); height: var(--frame-h);
  flex: 0 0 auto;
}
.frame {
  position: relative;
  width: 100%; height: 100%;
  background: var(--frame-bg);
  border-radius: var(--frame-radius);
  overflow: hidden;
  box-shadow: var(--frame-shadow);      /* leichter Schlagschatten */
}
.slot.slot-my26 { height: calc(var(--frame-h) / 2); }   /* halber Platzhalter -> Bildgruppe bleibt vertikal zentriert */
.frame.is-my26 {                         /* MY26-Bild im Vergleichspaar: halbe Größe, linksbündig unten im Platzhalter */
  position: absolute; left: 0; bottom: 0;
  width: 50%; height: 100%;
}
.frame.is-placeholder {                  /* markierter Platzhalter: fehlendes Bild */
  background: var(--placeholder-bg);
  box-shadow: none;
  outline: 2px dashed var(--placeholder); outline-offset: -2px;
  display: flex; align-items: center; justify-content: center;
}
.frame.is-placeholder .ph {
  color: var(--placeholder); text-align: center;
  font-weight: 400; font-size: calc(1.02 * var(--u)); line-height: 1.5; letter-spacing: 0.04em;
  padding: calc(1 * var(--u));
}
.legal p.is-placeholder { color: var(--placeholder); }   /* markierter Platzhalter-Text */
.frame-blur {                            /* weich gezeichnete Bildkopie als Füllung hinter "contain"-Bildern */
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; filter: blur(calc(1.1 * var(--u))) brightness(0.78) saturate(1.05); opacity: 1;
}
.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; }   /* Bild oder Video */
.frame-img.fit-cover { object-fit: cover; }
.frame-img.fit-contain { object-fit: contain; }

/* Modelljahr-Kürzel */
.tag {
  position: absolute; top: calc(0.9 * var(--u)); left: calc(0.9 * var(--u)); z-index: 3;
  font-weight: 500; font-size: calc(0.72 * var(--u)); letter-spacing: 0.24em; line-height: 1;
  padding: calc(0.45 * var(--u)) calc(0.75 * var(--u) - 0.11em) calc(0.4 * var(--u)) calc(0.75 * var(--u) + 0.11em);
                                        /* seitlich zusammen 1,5 u; links 0,22 em mehr als rechts, damit die Schrift optisch mittig
                                           steht: Browser setzen die Laufweite (0,24 em) auch hinter den letzten Buchstaben, abzüglich
                                           der mittleren Vor-/Nachbreiten-Differenz der Texte MY26, MY27, Probefahrt, Konfigurieren
                                           in Jost 500 (0,02 em); Rest je Text unter 0,3 px */
  color: var(--accent); background: #000;                          /* MY26: gelbe Schrift auf deckend Schwarz, keine Kontur */
  border-radius: calc(0.12 * var(--u));
}
.tag.tag-my27 { background: var(--accent); color: var(--accent-ink); }   /* MY27: gelb gefüllt, schwarze Schrift */

.caption {
  position: absolute; left: calc(0.9 * var(--u)); bottom: calc(0.9 * var(--u)); z-index: 3;
  font-weight: 400; font-size: calc(0.72 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  padding: calc(0.4 * var(--u)) calc(0.7 * var(--u) - 0.09em) calc(0.4 * var(--u)) calc(0.7 * var(--u) + 0.09em);
                                        /* seitlich zusammen 1,4 u; links um die Laufweite (0,18 em) mehr als rechts, weil sie der
                                           Browser auch hinter den letzten Buchstaben setzt -> Schrift optisch mittig */
  color: #fff; background: rgba(20,20,20,0.6);
  border-radius: calc(0.12 * var(--u));
}
.caption .unit { text-transform: none; }  /* Einheit „kW“ bleibt in der Versalzeile klein geschrieben (app.js unitText) */

/* Absätze unter dem Bild (z. B. Verbrauchsangaben) – wie die Fußnote (.note), Bild bleibt zentriert */
.legal {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--frame-gap));
}
.legal p {
  font-weight: 300; font-size: calc(0.78 * var(--u)); line-height: 1.45; color: var(--ink-muted);
  margin: 0 0 calc(0.6 * var(--u));
}

/* QR-Codes unter dem Bild (Abstand wie die Fußnote; Codes 1/3 so hoch wie das kleine MY26-Bild) */
.qr-row {
  width: var(--frame-w); flex: 0 0 auto;
  display: flex; align-items: center; gap: calc(3 * var(--u));
}
.qr-item { display: flex; align-items: center; gap: calc(0.9 * var(--u)); }
.qr-code { height: calc(var(--frame-h) / 6); width: auto; display: block; }
:root[data-theme="dark"] .qr-code { filter: brightness(0) invert(1); }   /* Nachtmodus: QR-Module weiß (SVG ohne Hintergrund) */
.qr-text {                               /* wie der Lauftext (.lead) – nur ohne url */
  font-weight: 300; font-size: calc(1.02 * var(--u)); line-height: 1.55; color: var(--ink-soft);
}
.qr-btn {                                /* Beschriftung als Button: exakt der Stil des MY27-Kürzels (.tag) – Schnitt, Laufweite, Schriftgröße,
                                            Innenabstände (samt Laufweiten-Ausgleich, siehe .tag) und Rundung (Entscheid Tim 18.09.2026); verlinkt auf url */
  display: inline-block; text-decoration: none; cursor: pointer; white-space: nowrap;
  font-weight: 500; font-size: calc(0.72 * var(--u)); letter-spacing: 0.24em; line-height: 1; text-transform: uppercase;
  padding: calc(0.45 * var(--u)) calc(0.75 * var(--u) - 0.11em) calc(0.4 * var(--u)) calc(0.75 * var(--u) + 0.11em);
  color: var(--accent-ink); background: var(--accent);
  border-radius: calc(0.12 * var(--u));
}
.qr-btn:not([href]) { cursor: default; }  /* externe Links im Panel ausgeschaltet: Button bleibt als Beschriftung, ist aber kein Link (app.js) */

/* Beschriftungen im Bild (z. B. Zifferblätter) */
.imglabel {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  font-weight: 400; font-size: calc(0.72 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; line-height: 1;
  padding-left: 0.26em;                  /* gleicht die Laufweite hinter dem letzten Buchstaben aus -> Schrift mittig über dem Ankerpunkt */
  color: #fff; text-shadow: 0 0 calc(0.5 * var(--u)) rgba(0,0,0,0.7);
  white-space: nowrap;
}

/* Markierungen: weißer Punkt (feste Größe) mit schwarzer Nummer darin, nur der Ring pulsiert nach außen */
.dot {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}
.dot-core {
  position: absolute; left: 0; top: 0;
  width: var(--dot-size); height: var(--dot-size);
  margin: calc(var(--dot-size) / -2) 0 0 calc(var(--dot-size) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(0.6 * var(--u)) calc(0.1 * var(--u)) rgba(0,0,0,0.2);   /* 20 % Schwarz, rundum */
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: calc(var(--dot-size) * 0.55); line-height: 1;
  color: #000;
  font-variant-numeric: tabular-nums;
}
.dot.is-hidden .dot-core {              /* verdecktes Element: schwarzer Punkt, weiß gestrichelter Ring, weiße Nummer */
  box-sizing: border-box;
  background: #000;
  color: #fff;
  border: calc(0.07 * var(--u)) dashed #fff;
  box-shadow: none;
}
.dot.is-hidden .dot-halo {              /* pulsierender Ring ebenfalls gestrichelt – gleiche Größe und Strichbreite wie der
                                           feste Ring, damit die Striche beim Auslaufen auf derselben Drehung liegen */
  box-sizing: border-box;
  border: calc(0.07 * var(--u)) dashed #fff;
}
.dot-halo {                              /* sanft auslaufender weißer Ring – liegt über dem Punkt und dessen Schatten */
  position: absolute; left: 0; top: 0;
  width: var(--dot-size); height: var(--dot-size);
  margin: calc(var(--dot-size) / -2) 0 0 calc(var(--dot-size) / -2);
  border-radius: 50%;
  border: calc(0.08 * var(--u)) solid #fff;
  animation: dotHalo 2.4s ease-out infinite;
}
@keyframes dotHalo {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* rechte Hälfte: Text */
.col-text {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; min-height: 0;
  padding-left: calc(1 * var(--u));
  will-change: transform, opacity;
}
.textblock { max-width: calc(42 * var(--u)); }
.kicker {
  font-weight: 500; font-size: calc(0.78 * var(--u)); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 calc(1 * var(--u));
  display: flex; align-items: center; gap: calc(0.8 * var(--u));
}
.kicker::before { content: ''; display: block; width: calc(1.8 * var(--u)); height: 1px; background: var(--accent); }
.title {
  font-weight: 300; font-size: calc(2.3 * var(--u)); line-height: 1.12; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 calc(1.1 * var(--u));
}
.title .big-number { font-weight: 500; color: var(--accent); }
.lead {
  font-weight: 300; font-size: calc(1.02 * var(--u)); line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 calc(1.4 * var(--u));
}
.items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.items.cols-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(1.6 * var(--u)); }
.item {
  display: grid; grid-template-columns: auto 1fr; column-gap: calc(0.9 * var(--u)); align-items: start;
  padding: calc(0.75 * var(--u)) 0; border-bottom: 1px solid var(--line);
}
.items.cols-2 .item { padding: calc(0.55 * var(--u)) 0; }
.item-num {
  width: calc(1.55 * var(--u)); height: calc(1.55 * var(--u)); border-radius: 50%;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);   /* gefüllter Kreis, schwarze Ziffer (Gelb auf Weiß wäre unleserlich) */
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: calc(0.85 * var(--u)); line-height: 1; margin-top: calc(0.05 * var(--u));
  font-variant-numeric: tabular-nums;
}
.item-num.is-hidden { border-style: dashed; background: none; color: var(--ink); }   /* verdecktes Element: gestrichelt, ungefüllt – passend zur Markierung im Bild */
.item-mark { width: calc(0.45 * var(--u)); height: calc(0.45 * var(--u)); border-radius: 50%; background: var(--accent); margin: calc(0.55 * var(--u)) calc(0.55 * var(--u)) 0; }
.item-title { font-weight: 500; font-size: calc(1.02 * var(--u)); line-height: 1.35; }
.item-text { font-weight: 300; font-size: calc(0.92 * var(--u)); line-height: 1.45; color: var(--ink-soft); margin-top: calc(0.1 * var(--u)); }
.items.cols-2 .item-title { font-size: calc(0.95 * var(--u)); }
.items.cols-2 .item-text { font-size: calc(0.85 * var(--u)); }
.note { font-size: calc(0.78 * var(--u)); line-height: 1.45; color: var(--ink-muted); margin: calc(1 * var(--u)) 0 0; }

/* Navigation an den Rändern (erscheint bei Mauszeiger / Berührung) */
.edge {
  position: absolute; top: 0; bottom: 0; width: calc(8 * var(--u)); z-index: 10;
  background: none; border: 0; cursor: pointer; opacity: 0;
  transition: opacity .3s;
}
.edge::before {
  content: ''; position: absolute; top: 50%; width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u));
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
  transform: translateY(-50%) rotate(-45deg);
}
.edge-prev { left: 0; }
.edge-prev::before { left: calc(1.4 * var(--u)); }
.edge-next { right: 0; }
.edge-next::before { right: calc(1.4 * var(--u)); transform: translateY(-50%) rotate(135deg); }
.edge.is-visible { opacity: 0.45; }     /* per JS: 5 s nach dem Laden, 2 s nach jeder Berührung (Touch-Geräte; Entscheid Tim, 22.09.2026) */
@media (hover: hover) {                 /* nur mit echtem Mauszeiger – auf Touch-Geräten (iOS) bliebe :hover nach dem Tippen hängen, und
                                           die Pfeile blieben stehen */
  .stage:hover .edge { opacity: 0.45; }
  .edge:hover { opacity: 0.9; }
}

/* ---------- Verstecktes Einstellungs-Panel ---------- */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: calc(24 * var(--u)); min-width: 320px; overflow-y: auto;
  background: #141414; color: #eee;
  box-shadow: -calc(0.5 * var(--u)) 0 calc(2 * var(--u)) rgba(0,0,0,0.4);
  padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)) calc(2 * var(--u));
  font-size: calc(0.8 * var(--u)); font-weight: 400;
  user-select: text;
}
.panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(0.8 * var(--u)); }
.panel h2 { margin: 0; font-weight: 400; font-size: calc(1.05 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; }
.panel h3 { margin: calc(1.1 * var(--u)) 0 calc(0.5 * var(--u)); font-weight: 500; font-size: calc(0.72 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase; color: #9a9a9a; }
.panel-close { background: none; border: 0; color: #fff; font-size: calc(1.6 * var(--u)); line-height: 1; cursor: pointer; padding: 0 calc(0.3 * var(--u)); }
.panel-row { display: flex; align-items: center; justify-content: space-between; gap: calc(0.8 * var(--u)); padding: calc(0.3 * var(--u)) 0; }
.panel-row span { flex: 1; }
.panel input[type=number] {
  width: calc(5.6 * var(--u)); min-width: 84px; background: #222; color: #fff; border: 1px solid #444; border-radius: calc(0.15 * var(--u));
  padding: calc(0.3 * var(--u)) calc(0.4 * var(--u)) calc(0.3 * var(--u)) calc(0.55 * var(--u)); font: inherit; text-align: left;
}
.panel input[type=number]::-webkit-inner-spin-button { margin-left: calc(0.6 * var(--u)); }   /* Abstand Wert ↔ Pfeile */
.panel input[type=number]:disabled { color: #888; border-style: dashed; }   /* Video-Folie: Standzeit = Videolänge */
.panel select {
  background: #222; color: #fff; border: 1px solid #444; border-radius: calc(0.15 * var(--u));
  padding: calc(0.3 * var(--u)) calc(0.5 * var(--u)); font: inherit;
}
#modelBtns button.is-active { background: #fff; color: #111; border-color: #fff; }
.hold-list .hold-model {
  margin: calc(0.9 * var(--u)) 0 calc(0.2 * var(--u)); font-weight: 500; font-size: calc(0.78 * var(--u));
  letter-spacing: 0.16em; text-transform: uppercase; color: #ddd;
}
.panel button {
  background: #2a2a2a; color: #fff; border: 1px solid #555; border-radius: calc(0.15 * var(--u));
  padding: calc(0.45 * var(--u)) calc(0.8 * var(--u)); cursor: pointer; letter-spacing: 0.06em;
}
.panel button:hover { background: #3a3a3a; }
.panel-btns { justify-content: stretch; }
.panel-btns button { flex: 1; }
.hold-list .panel-row { border-bottom: 1px solid #262626; }
.hold-list .panel-row.is-current span { color: #fff; font-weight: 500; }
.hold-list .panel-row span { color: #bbb; }
.hold-list .goto { padding: calc(0.25 * var(--u)) calc(0.5 * var(--u)); font-size: calc(0.72 * var(--u)); }
.panel-foot { margin-top: calc(1.4 * var(--u)); }
.panel-hint { color: #8a8a8a; font-size: calc(0.72 * var(--u)); line-height: 1.5; margin: calc(0.8 * var(--u)) 0 0; }

/* =====================================================================
   Dunkles Schema (Nachtmodus) – gewählt im Panel (Hell / Dunkel / Automatisch)
   oder per Startparameter index.html?theme=dark; „Automatisch“ (Standard) folgt
   der Dunkelmodus-Einstellung des Geräts. app.js setzt data-theme auf <html>.
   ===================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1a1a;                /* 90 % Schwarz (Entscheid Tim, 18.09.2026) */
  --frame-bg: #1a1a1a;
  --frame-shadow: 0 calc(0.6 * var(--u)) calc(1.8 * var(--u)) rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  --ink: #f4f4f4;
  --ink-soft: #c8c8c8;
  --ink-muted: #8c8c8c;
  --line: #2a2a2a;
  --placeholder: #d9647c;       /* helleres Bordeaux, damit die Markierung auf Dunkel lesbar bleibt */
  --placeholder-bg: #221317;
  --hdr-bg: #000000;
  --hdr-line: #262626;
}

/* =====================================================================
   Responsives Layout – schmale, hochformatige oder sehr flache Screens
   (Smartphone, Tablet hochkant, Hochformat-Infoscreen). Statt der zwei
   Spalten steht das MY27-Bild oben in voller Breite, der Text darunter;
   ist der Text länger als der Bildschirm, scrollt die Folie und der Footer
   steht am Ende des Scrollinhalts. Die kleinen MY26-Vergleichsbilder
   entfallen. Die Abfrage muss mit STACK_QUERY in app.js übereinstimmen.
   ===================================================================== */
@media (max-width: 900px), (orientation: portrait), (max-height: 560px) {
  :root {
    --u: clamp(12px, min(2vw + 6px, 4.6vh), 30px);   /* Schriftgröße nach Breite, auf flachen Screens nach Höhe begrenzt */
    --hdr-h: calc(5.1 * var(--u));                    /* Header in zwei Zeilen: Logo + Zähler, darunter die Modellnamen (4,6 u) + 0,5 u Abstand unter der gelben Linie */
    --pad-x: calc(1.3 * var(--u));
    --pad-y: calc(1.2 * var(--u));
    --frame-gap: calc(1 * var(--u));
    --dot-size: calc(1.2 * var(--u));                 /* Markierungen 20 % kleiner als zuerst gesetzt (1.5) */
  }
  .hdr { flex-wrap: wrap; align-content: center; row-gap: 0; padding-bottom: calc(0.5 * var(--u)); }   /* Abstand gelbe Linie -> Header-Unterkante verdoppelt (0,5 u -> 1 u; Entscheid Tim) */
  .hdr-brand { order: 1; height: calc(2.6 * var(--u)); }
  .hdr-right { order: 2; height: calc(2.6 * var(--u)); }
  .hdr-nav {
    order: 3; position: static; transform: none; width: 100%; height: calc(1.9 * var(--u));
    justify-content: center; gap: calc(1.6 * var(--u));
  }
  .hdr-model { font-size: calc(0.74 * var(--u)); letter-spacing: 0.16em; padding: calc(0.2 * var(--u)) 0; }
  .hdr-model:last-child { margin-right: -0.16em; }                 /* Laufweiten-Ausgleich wie am Desktop, hier 0,16 em */
  .hdr-model::after { bottom: calc(0.245 * var(--u) - 1px); right: 0.16em; }   /* halber bisheriger Abstand (Unterlänge 0,29 u + Innenabstand 0,2 u = 0,49 u) */
  .stage { bottom: 0; touch-action: pan-y; }         /* Bühne bis zur Unterkante (Footer steht in der Folie); senkrecht scrollen lassen, waagrecht wischen bleibt der App */
  .slide {
    display: flex; flex-direction: column; row-gap: calc(1.4 * var(--u));
    padding: var(--pad-y) var(--pad-x) 0;              /* unten kein Abstand: den bringt der Footer der Folie mit */
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* Footer: Passt die Folie samt Footer auf den Bildschirm, steht er wie am Desktop fest am unteren Rand.
     Muss die Folie gescrollt werden, steht er am Ende des Scrollinhalts – mit denselben Abständen wie der
     feste Footer (Verbrauchsangaben, Linie, ©). Dafür entfällt hier der feste Footer, und jede Folie trägt
     ihren eigenen (.slide-ftr, margin-top: auto = rutscht bei kurzem Inhalt nach unten). */
  .ftr { display: none; }
  .slide-ftr {
    display: block; flex: 0 0 auto; margin-top: auto;
    padding-top: calc(1.1 * var(--u));                 /* + Zeilenabstand 1,4 u = 2,5 u zum Inhalt; unten: Abstände von .ftr-copy (2 S) */
  }
  .slide.is-leaving .slide-ftr { visibility: hidden; }   /* ausfahrende Folie: ihr Footer verschwindet sofort, damit nie zwei zu sehen sind */
  .col-media { flex: 0 0 auto; width: 100%; justify-content: flex-start; align-items: center; }
  .slot { width: min(100%, 110vh); height: auto; }   /* auf sehr flachen Screens (Handy quer) bleibt unter dem Bild Platz für Text */
  .slot.slot-my26 { display: none; }                 /* MY26-Vergleichsbilder entfallen auf kleinen Screens */
  .frame { height: auto; aspect-ratio: 2 / 1; container-type: inline-size; }
  .frame.is-my26 { position: relative; width: 100%; }
  /* Modelljahr-Kürzel und Bildunterschrift: proportional zur Bildbreite wie am Desktop (Schrift = 1,56 % der
     Bildbreite, Abstand 2 %), aber nie kleiner als 8 px Schrift, damit sie auf dem Handy lesbar bleiben */
  .tag, .caption { font-size: max(8px, 1.56cqw); }
  .qr-btn { font-size: max(8px, 1.56cqw); padding: 0.62em 0.925em 0.56em 1.145em; border-radius: 0.17em; }   /* wie .tag; Bezugsbreite = .qr-row (unten) */
  .tag { top: 2cqw; left: 2cqw; padding: 0.62em 0.925em 0.56em 1.145em; border-radius: 0.17em; }   /* seitlich zusammen 2,07 em, links 0,22 em mehr (Laufweiten-Ausgleich wie am Desktop) */
  .caption { left: 2cqw; bottom: 2cqw; padding: 0.56em 0.88em 0.56em 1.06em; border-radius: 0.17em; }   /* seitlich zusammen 1,94 em, links 0,18 em mehr */
  .legal { position: static; margin-top: calc(0.8 * var(--u)); }
  .qr-row {                                          /* so breit wie das Bild (.slot) und Container-Bezug für die Buttons -> exakt wie das Kürzel */
    width: min(100%, 110vh); container-type: inline-size;
    flex-wrap: wrap; gap: calc(1.2 * var(--u)) calc(2 * var(--u));
  }
  .qr-code { height: calc(4.2 * var(--u)); }
  .col-text { flex: 0 0 auto; justify-content: flex-start; padding-left: 0; }
  .textblock { max-width: none; }
  .items.cols-2 { grid-template-columns: 1fr; }      /* zweispaltige Listen einspaltig */
  .items.cols-2 .item { padding: calc(0.75 * var(--u)) 0; }
  .edge { width: calc(3.2 * var(--u)); }
  .edge::before { width: calc(1 * var(--u)); height: calc(1 * var(--u)); }
  .edge-prev::before { left: calc(0.9 * var(--u)); }
  .edge-next::before { right: calc(0.9 * var(--u)); }
  .panel { width: 100%; min-width: 0; }
}

/* Große Landscape-Screens: Mindest-Schriftgröße, damit z. B. ein Tablet quer (1024 × 768) lesbar bleibt */
@media (min-width: 901px) and (orientation: landscape) and (min-height: 561px) {
  :root { --u: max(min(1vw, 1.7778vh), 12px); }
}