/* ═══════════════════════════════════════════════════════════════════════
   VERA PIZZA APE — Klickdummy im Apple-Mechanismus
   Geometrie 1:1 von apple.com gemessen. Marke 1:1 von verapizzaape.de.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Schrift, selbst gehostet ═══════════════════════════════════════
   Bebas Neue liegt in site/assets/fonts/ und wird NICHT mehr von
   fonts.googleapis.com geladen. Grund: Beim Laden von Google wird die
   IP-Adresse jedes Besuchers dorthin übertragen — das LG München hat
   das 2022 als DSGVO-Verstoß gewertet (Az. 3 O 17493/20).

   Nebeneffekte: ein Netzwerkziel weniger, keine Cookie-Einwilligung
   nötig, und der Text erscheint früher.

   Die beiden Teilmengen sind die von Google selbst geschnittenen.
   "latin" deckt Deutsch samt Umlauten, ß und Eurozeichen ab;
   "latin-ext" ist Reserve. Über unicode-range lädt der Browser nur,
   was die Seite tatsächlich braucht — bei dieser Seite also nur latin.

   Lizenz: SIL Open Font License 1.1. Selbst hosten ist ausdrücklich
   erlaubt. Aktualisieren: siehe docs/08-entscheidungen.md, E-24.
   ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ─── Marke (aus verapizzaape.de ausgelesen) ─────────────────────── */
  --c-black:     #000000;
  --c-black-2:   #0d0d0d;   /* zweite Schwarzstufe für Kachelrhythmus */
  --c-cream:     #f5f2d0;   /* Haupttext */
  --c-cream-2:   #ededcb;
  --c-yellow:    #fcc328;   /* DIE Aktionsfarbe. Nur für Handlungen. */
  --c-yellow-2:  #ebc627;
  --c-muted:     rgba(245, 242, 208, .58);
  --c-line:      rgba(245, 242, 208, .16);

  /* ─── Typo: Bebas Neue durchgängig (Markenentscheidung) ──────────── */
  --font: "Bebas Neue", "Oswald", "Haettenschweiler",
          "Arial Narrow", Impact, sans-serif;

  /* Faktor zwischen den Ebenen — Apples Kernregel, angepasst.
     Apple nutzt exakt 2 (56/28). Hier ist es 2.36 (66/28), weil
     Bebas nur Versalien kennt: Bei Apple ist die Subline gemischt
     gesetzt und ihre x-Höhe schrumpft zusätzlich. In Versalien
     entspricht die Punktgröße direkt der Versalhöhe — die Subline
     wirkt dadurch größer. Um denselben WAHRGENOMMENEN Faktor 2 zu
     erreichen, muss der gemessene Faktor also höher liegen.
     Gleiche Logik wie Apples Vorzeichenwechsel beim Letter-spacing:
     optisch korrekt schlägt mathematisch korrekt. */
  --fs-headline: 66px;  --lh-headline: 1.0;   --ls-headline: 0.02em;
  --fs-subhead:  28px;  --lh-subhead:  1.16;  --ls-subhead:  0.03em;
  --fs-body:     21px;  --lh-body:     1.42;  --ls-body:     0.04em;
  --fs-label:    14px;  --ls-label:    0.16em;

  /* ─── Raum: Apples drei Abstandsklassen, exakt ───────────────────── */
  --gap-inner:    6px;   /* Headline → Subline    */
  --gap-group:   17px;   /* Textgruppe → Buttons  */
  --gap-tile:    12px;   /* Kachel → Kachel       */

  --tile-height: 580px;
  --tile-pt:      56px;
  --tile-pb:      63px;
  --nav-height:   44px;

  /* ─── Bewegung: Apples Kurve, Apples Dauern ──────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --dur:  .24s;
  --dur-slow: .32s;
}

/* Tablet ≤1068px */
@media (max-width: 1068px) {
  :root {
    --fs-headline: 52px;  --fs-subhead: 24px;  --fs-body: 20px;
    --tile-pt: 54px;  --tile-pb: 61px;  --gap-group: 16px;
    --tile-height: 520px;
  }
}
/* Mobil ≤734px */
@media (max-width: 734px) {
  :root {
    --fs-headline: 38px;  --fs-subhead: 18px;  --fs-body: 18px;
    --tile-pt: 39px;  --tile-pb: 43px;  --gap-group: 11px;
    --tile-height: 460px;
  }
}

/* ═══ Basis ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-cream);
  background: var(--c-black);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

::selection { background: var(--c-yellow); color: #000; }

/* ═══ Navigation ═════════════════════════════════════════════════════
   44px — Apples Mindestmaß für Touch-Ziele.
   Frosted Glass, nur invertiert: Schwarz statt Weiß.             */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 9999;
  height: var(--nav-height);
  display: flex; align-items: center; gap: 26px;
  padding: 0 22px;
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line);
}
.nav__logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.nav__logo img { width: 28px; height: 28px; border-radius: 50%; }
.nav__logo span {
  font-size: 17px; letter-spacing: .09em; color: var(--c-cream);
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav__links a {
  font-size: 15px; letter-spacing: .11em;
  color: var(--c-muted); text-decoration: none;
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--c-cream); }
.nav a:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 4px; border-radius: 3px; }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav { gap: 14px; padding: 0 16px; }
  .nav__links { gap: 15px; }
  .nav__links a { font-size: 13px; letter-spacing: .07em; }
  .nav__links a.is-secondary { display: none; }
}
@media (max-width: 560px) {
  .nav__links { gap: 12px; }
  .nav__links a { font-size: 12px; }
}

main { padding-top: var(--nav-height); }

/* ═══ Sektionen = Grids. Immer 12px. Ohne Ausnahme. ═════════════════ */
.section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-tile);
}
.section + .section { margin-top: var(--gap-tile); }

.section--split {
  grid-template-columns: 1fr 1fr;
  padding-inline: var(--gap-tile);
}
@media (max-width: 734px) {
  .section--split { grid-template-columns: 1fr; padding-inline: 0; }
}

/* ═══ DIE KACHEL — das einzige Bauteil der ganzen Seite ═════════════ */
.tile {
  position: relative;
  display: flex; justify-content: center;
  width: 100%;
  min-height: var(--tile-height);
  padding: var(--tile-pt) 24px var(--tile-pb);
  background: var(--c-black-2);
  overflow: clip;
  text-align: center;
  isolation: isolate;
}

/* Kachelvarianten — Rhythmus ohne die Marke zu verlassen */
.tile--flat   { background: var(--c-black); }
.tile--yellow { background: var(--c-yellow); color: #000; }
.tile--short  { min-height: 380px; }
.tile--tall   { min-height: 660px; }

/* Halbbreite Kacheln: eine Typo-Stufe kleiner (wie bei Apple) */
.section--split .tile {
  --fs-headline: 48px;
  --fs-subhead:  21px;
  --gap-inner: 3px;
}
@media (max-width: 1068px) {
  .section--split .tile { --fs-headline: 38px; --fs-subhead: 18px; }
}

/* ─── Vollflächen-Link: die GANZE Kachel ist klickbar (Fitts) ─────── */
.tile__link { position: absolute; inset: 0; z-index: 3; text-decoration: none; }
.tile__link:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: -8px; }

/* ─── Bild liegt hinten, füllt die Kachel ─────────────────────────── */
.tile__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Video über dem Foto ─────────────────────────────────────────
   Genau Apples Muster: Das Foto IST das Poster und steht sofort.
   Das Video legt sich später darüber und blendet auf — nur wenn es
   wirklich abspielbereit ist. Fällt es aus, bleibt das Foto stehen
   und niemand merkt, dass etwas gefehlt hat.
   Wichtig: kein poster-Attribut am <video>, sonst lädt der Browser
   das Bild ein zweites Mal. Das <img> darunter erledigt das. */
.tile__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.tile__media video.is-ready { opacity: 1; }

/* Scrim: Apple braucht ihn nicht — dort steht ein freigestelltes
   Produkt auf einer ruhigen Fläche. Echte Eventfotos sind unruhig
   und hell; ohne Scrim stirbt die Lesbarkeit.
   Zwei Verläufe übereinander: einer dunkelt die Textzone oben ab,
   einer legt einen gleichmäßigen Schleier über das ganze Bild. */
.tile__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 26%,
      rgba(0,0,0,.46) 52%, rgba(0,0,0,.30) 72%,
      rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.22));
}
.tile--scrim-soft .tile__media::after {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 30%,
      rgba(0,0,0,.32) 58%, rgba(0,0,0,.20) 76%,
      rgba(0,0,0,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.14));
}

/* Bildvarianten — dieselben drei Fotos, verschieden gestimmt.
   Kein transform:scale mehr: Hochformat-Fotos in Querformat-Kacheln
   sind ohnehin stark beschnitten, zusätzliches Zoomen macht sie
   unlesbar. Der Ausschnitt wird ausschließlich über
   object-position gesteuert. */
.img--warm { filter: saturate(1.14) contrast(1.06); }
.img--cool { filter: saturate(.74) contrast(1.1) brightness(.9) hue-rotate(-8deg); }
.img--mono { filter: grayscale(1) contrast(1.18) brightness(.9); }

/* Ausschnitte, am echten Bildmaterial ausgemessen.
   A = Ape · B = Pizzaiolo · C = Gäste am Abend

   WICHTIG: Die Werte hängen vom Kachelformat ab, nicht nur vom Foto.
   Eine Kachel über die volle Breite ist 1470 × 580 = 2.53:1,
   eine halbe Kachel 717 × 580 = 1.24:1. Aus einer 1365 × 2048 Vorlage
   im Hochformat schneidet die breite Kachel doppelt so hart. Derselbe
   object-position-Wert zeigt also je nach Spalte etwas völlig anderes.
   Deshalb: Grundwert für Vollbreite, Override für geteilte Kacheln. */

.crop-ape         { object-position: 50% 55% !important; }  /* Karosserie, Logo, Blinker */
.crop-ape-front   { object-position: 50% 45% !important; }  /* Front vor Backstein       */
.crop-baker       { object-position: 50% 25% !important; }  /* Pizzaiolo, Kopf sichtbar  */
.crop-hands       { object-position: 50% 72% !important; }  /* Hände über den Pizzen     */
.crop-pizza       { object-position: 50% 85% !important; }  /* Pizzen auf den Brettern   */
.crop-pizza-hand  { object-position: 50% 62% !important; }  /* Pizza auf Brett, getragen */
.crop-guests      { object-position: 50% 48% !important; }  /* Übergabe an den Gast      */
.crop-guests-wide { object-position: 50% 70% !important; }  /* Sitzrunde, Getränke       */

/* Halbe Kacheln zeigen mehr Höhe — Ausschnitt darf offener sein */
.section--split .crop-ape         { object-position: 50% 42% !important; }
.section--split .crop-ape-front   { object-position: 50% 38% !important; }
.section--split .crop-baker       { object-position: 50% 28% !important; }
.section--split .crop-hands       { object-position: 50% 70% !important; }
.section--split .crop-pizza       { object-position: 50% 78% !important; }
.section--split .crop-guests      { object-position: 50% 45% !important; }
.section--split .crop-guests-wide { object-position: 50% 58% !important; }

/* Mobil ist die Kachel selbst hochformatig — das Foto passt fast
   verlustfrei hinein, der harte Ausschnitt entfällt. Zurück zur Mitte.

   Achtung Spezifität: Die Regeln oben sind teils zweistufig
   (.section--split .crop-ape = 0,2,0). Ein einfaches
   ".tile__media img" (0,1,1) würde davon geschlagen, obwohl es
   später steht — !important auf beiden Seiten entscheidet nicht,
   die Spezifität entscheidet. Deshalb hier bewusst dreistufig. */
@media (max-width: 734px) {
  .tile .tile__media img { object-position: 50% 45% !important; }
  .tile .tile__media img.crop-pizza,
  .tile .tile__media img.crop-hands { object-position: 50% 72% !important; }
  .tile .tile__media img.crop-baker { object-position: 50% 30% !important; }
}

/* ─── Inhalt ──────────────────────────────────────────────────────── */
.tile__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}

/* Bei Apple steht der Text oben, weil darunter das Produktfoto sitzt
   und die Fläche füllt. Kacheln OHNE Bild hätten sonst 400px Leere
   unter der Headline — das wirkt nicht großzügig, sondern unfertig.
   Deshalb: kein Bild → Inhalt vertikal zentriert. */
.tile:not(:has(.tile__media)) { align-items: center; }
.tile:not(:has(.tile__media)) .tile__content { justify-content: center; }

/* Text schwebt oben, fängt aber keine Klicks ab —
   sonst zerlöchert er den Vollflächen-Link.
   Breite in px statt ch: Bei Versalsatz zählt die Zeilenanzahl.
   Die Subline soll ein- bis zweizeilig bleiben, wie bei Apple. */
.tile__copy { pointer-events: none; max-width: 780px; }
.section--split .tile__copy { max-width: 480px; }
@media (max-width: 734px) { .tile__copy { max-width: 100%; } }

.tile__eyebrow {
  margin: 0 0 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-yellow);
}
.tile--yellow .tile__eyebrow { color: rgba(0,0,0,.62); }

.tile__headline {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  font-weight: 400;          /* Bebas hat nur einen Schnitt — perfekt */
}
.tile__subhead {
  margin: var(--gap-inner) 0 0;
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
  color: var(--c-cream-2);
}
.tile--yellow .tile__subhead { color: rgba(0,0,0,.78); }

.tile__price {
  margin: 14px 0 0;
  font-size: var(--fs-subhead);
  letter-spacing: .04em;
  color: var(--c-yellow);
}
.tile--yellow .tile__price { color: #000; }

/* ─── Buttons: z-index 3, also ÜBER dem Vollflächen-Link ──────────── */
.tile__ctas {
  display: grid; grid-auto-flow: column;
  justify-content: center;
  column-gap: var(--gap-group);
  margin-top: var(--gap-group);
  z-index: 3;
}
@media (max-width: 400px) {
  .tile__ctas { grid-auto-flow: row; row-gap: 10px; }
}

/* ═══ Buttons ════════════════════════════════════════════════════════
   Apple-Geometrie. Gelb ist die EINZIGE Farbe, und sie erscheint
   ausschließlich dort, wo etwas passiert.                          */
.button {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 980px;
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: .07em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--c-yellow);
  color: #000;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.button:hover  { background: #ffd04f; }
.button:active { background: var(--c-yellow-2); }
.button:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }

.button--secondary {
  background: transparent;
  color: var(--c-cream);
  border-color: rgba(245, 242, 208, .45);
}
.button--secondary:hover { background: var(--c-cream); color: #000; border-color: transparent; }

.tile--yellow .button { background: #000; color: var(--c-yellow); }
.tile--yellow .button:hover { background: #1a1a1a; }
.tile--yellow .button--secondary { background: transparent; color: #000; border-color: rgba(0,0,0,.5); }
.tile--yellow .button--secondary:hover { background: #000; color: var(--c-yellow); border-color: transparent; }

/* ═══ Listen in Kacheln (Pizzakarte, Referenzen) ═════════════════════ */
.tile__list {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 10px;
  max-width: 46ch;
  pointer-events: none;
}
.tile__list li {
  font-size: 19px; letter-spacing: .05em;
  color: var(--c-cream-2);
  border: 1px solid var(--c-line);
  border-radius: 980px;
  padding: 6px 15px;
}
.tile--yellow .tile__list li { color: #000; border-color: rgba(0,0,0,.28); }

.tile__list--plain { max-width: 52ch; }
.tile__list--plain li { border: 0; padding: 0 8px; color: var(--c-muted); }

/* ═══ VERGLEICHSREIHE ════════════════════════════════════════════════
   Apples Muster von der iPhone-Übersicht: eine waagerechte Reihe
   gleich gebauter Karten. Jede Karte zeigt DIESELBEN vier Dinge in
   DERSELBEN Reihenfolge — Name, ein Satz, Preis, zwei Aktionen.

   Der eigentliche Trick steckt im Preisblock. Apple nennt nie nur
   eine Zahl, sondern immer zwei Lesarten desselben Preises:
   "Ab 1.299 € oder 54,12 €/Rate". Die große Zahl ist ehrlich, die
   kleine macht sie verdaulich. Hier ist die kleine Zahl der Preis
   pro Person — die einzige Größe, mit der man ein Catering
   tatsächlich gegen eine Alternative abwägt.                        */

.compare {
  background: var(--c-black-2);
  padding: 64px 0 72px;
}
.compare__head {
  text-align: center;
  padding: 0 24px 40px;
}
.compare__eyebrow {
  margin: 0 0 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-yellow);
}
.compare__headline {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
}
/* Die eine prominente Ab-Zahl. Größer als jede Subline,
   kleiner als die Headline — sie ist das Argument, nicht das Thema. */
.compare__from {
  margin: 14px 0 0;
  font-size: var(--fs-subhead);
  letter-spacing: .03em;
  color: var(--c-cream-2);
}
.compare__from b {
  font-weight: 400;               /* Bebas hat nur einen Schnitt */
  color: var(--c-yellow);
  font-size: 1.32em;
}

/* ─── Die Bahn ────────────────────────────────────────────────────
   Waagerecht scrollbar mit Snap. Auf breiten Schirmen passen alle
   vier hin, darunter wird gewischt — ohne dass sich am Markup
   irgendetwas ändert.                                            */
.compare__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--gap-tile);
  padding: 4px var(--gap-tile) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.compare__track::-webkit-scrollbar { display: none; }

@media (max-width: 1200px) {
  .compare__track { grid-auto-columns: minmax(300px, 46%); }
}
@media (max-width: 734px) {
  .compare__track { grid-auto-columns: minmax(260px, 84%); }
  .compare { padding: 44px 0 52px; }
}

/* ─── Die Karte: dasselbe Bauteil wie die Kachel, nur kleiner ───── */
.card {
  position: relative;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  background: var(--c-black);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 30px;
}
.card__link { position: absolute; inset: 0; z-index: 3; text-decoration: none; }
.card__link:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: -6px; }

.card__media { position: relative; height: 230px; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1) 45%, var(--c-black));
}
/* Karte ohne Foto: gelbe Fläche statt Bild, damit die Reihe
   trotzdem einen Rhythmus hat */

.card__body { position: relative; z-index: 2; padding: 4px 22px 0; pointer-events: none; }

.card__eyebrow {
  margin: 0 0 8px;
  font-size: 13px; letter-spacing: var(--ls-label);
  color: var(--c-yellow);
}
.card__name {
  margin: 0;
  font-size: 34px; line-height: 1.04; letter-spacing: .02em;
}
.card__claim {
  margin: 8px 0 0;
  font-size: 19px; line-height: 1.2; letter-spacing: .03em;
  color: var(--c-muted);
  min-height: 2.4em;            /* hält die Preiszeilen auf einer Linie */
}

/* ─── Der Preisblock — das Herz der Vergleichsreihe ─────────────── */
.card__price {
  margin: 20px 0 0;
  font-size: 21px; line-height: 1.32; letter-spacing: .03em;
  color: var(--c-cream);
  min-height: 3.9em;            /* alle Karten gleich hoch, wie bei Apple */
}
.card__price .pp {              /* der Preis pro Person */
  color: var(--c-yellow);
  font-size: 1.14em;
}
.card__price .note {            /* "bei 70 Gästen" */
  display: block;
  font-size: 15px;
  color: var(--c-muted);
  letter-spacing: .06em;
  margin-top: 3px;
}

.card__ctas {
  position: relative; z-index: 3;
  display: flex; justify-content: center; align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 0 18px;
}
/* Textlink im Apple-Stil: Wort plus Winkel, kein Rahmen */
.link-arrow {
  color: var(--c-yellow);
  text-decoration: none;
  font-size: 19px; letter-spacing: .06em;
  white-space: nowrap;
}
.link-arrow::after { content: " \203A"; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; border-radius: 3px; }

/* ─── Pfeile, wie bei Apple unten rechts ────────────────────────── */
.compare__nav {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 20px 24px 0;
}
.compare__nav button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line);
  background: rgba(245, 242, 208, .08);
  color: var(--c-cream);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.compare__nav button:hover { background: rgba(245, 242, 208, .18); }
.compare__nav button:disabled { opacity: .3; cursor: default; }
.compare__nav button:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }
@media (hover: none) { .compare__nav { display: none; } }

/* ═══ ZUBEHÖR-REIHE ══════════════════════════════════════════════════
   Apples Store-Muster („Klingt großartig.“). Baut auf denselben
   .card-Bausteinen auf wie die Vergleichsreihe — nur linksbündig und
   mit größerem Bildfeld. Ein Bauteil, zwei Anwendungen: genau das
   ist der Punkt des ganzen Systems.

   Zweigeteilte Überschrift wie bei Apple: erster Satz voll, zweiter
   gedimmt, gleiche Größe, eine Zeile.                              */

.compare--shop { background: var(--c-black); }
.compare--shop .compare__head { text-align: left; max-width: 1180px; margin: 0 auto; }
.compare--shop .compare__track,
.compare--shop .compare__nav { max-width: 1180px; margin-inline: auto; }
.compare__headline .dim { color: var(--c-muted); }

.card--shop { text-align: left; padding-bottom: 26px; }
.card--shop .card__media { height: 320px; }
/* Kein Verlauf nach unten — das Foto ist hier das Produkt,
   nicht die Kulisse. Es darf als Fläche stehen bleiben. */
.card--shop .card__media::after {
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 40%);
}
.card--shop .card__body { padding: 22px 24px 0; }
.card--shop .card__name { font-size: 30px; line-height: 1.08; }
.card--shop .card__claim { min-height: 3.6em; margin-top: 10px; }
.card--shop .card__price { min-height: 0; margin-top: 16px; font-size: 20px; }
.card--shop .card__ctas { justify-content: flex-start; padding: 0 24px; margin-top: 18px; }

@media (max-width: 734px) {
  .card--shop .card__media { height: 260px; }
  .card--shop .card__claim { min-height: 0; }
}

/* ─── Fußnote ───────────────────────────────────────────────────── */
.compare__note {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 0 24px;
  font-size: 15px; line-height: 1.5; letter-spacing: .04em;
  color: rgba(245, 242, 208, .42);
  text-align: center;
}
/* Die Fußnote ist gedimmt, ein Verweis darin darf es nicht sein —
   sonst liest ihn niemand als anklickbar. */
.compare__note a { color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.compare__note a:hover { color: var(--c-yellow); }

/* ═══ BERATUNGSREIHE („Wir helfen gerne“) ════════════════════════════
   Apples zweite Kartenreihe, mit zwei Eigenheiten, die den ganzen
   Ton machen:

   1) Die zweigeteilte Überschrift. Erster Satz in voller Farbe,
      zweiter Satz gedimmt — beides in EINER Zeile, gleiche Größe.
      Das liest sich wie jemand, der spricht und dann leiser wird.
      Zwei Aussagen im Platz von einer, ohne dass eine Hierarchie
      entsteht, die es gar nicht gibt.

   2) Das Foto sitzt UNTEN in der Karte und wird angeschnitten.
      Genau wie in der großen Kachel: erst das Wort, dann das Bild.  */

.help {
  background: var(--c-black);
  padding: 72px 0 78px;
}
.help__head { padding: 0 24px 36px; max-width: 1180px; margin: 0 auto; }
.help__headline {
  margin: 0;
  font-size: var(--fs-headline);
  line-height: 1.06;
  letter-spacing: var(--ls-headline);
  color: var(--c-cream);
}
.help__headline span { color: var(--c-muted); }   /* der gedimmte zweite Satz */

.help__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: var(--gap-tile);
  padding: 4px var(--gap-tile) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  max-width: 1180px;
  margin: 0 auto;
}
.help__track::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .help__track { grid-auto-columns: minmax(300px, 62%); } }
@media (max-width: 734px)  { .help__track { grid-auto-columns: minmax(260px, 86%); } .help { padding: 48px 0 54px; } }

.help-card {
  position: relative;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  min-height: 520px;
  background: var(--c-black-2);
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
}
.help-card--accent { background: var(--c-yellow); color: #000; }

.help-card__link { position: absolute; inset: 0; z-index: 3; text-decoration: none; }
.help-card__link:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: -6px; }
.help-card--accent .help-card__link:focus-visible { outline-color: #000; }

.help-card__body { position: relative; z-index: 2; padding: 30px 28px 0; pointer-events: none; }
.help-card__eyebrow {
  margin: 0 0 12px;
  font-size: 13px; letter-spacing: var(--ls-label);
  color: var(--c-yellow);
}
.help-card--accent .help-card__eyebrow { color: rgba(0,0,0,.6); }
.help-card__title {
  margin: 0;
  font-size: 32px; line-height: 1.08; letter-spacing: .02em;
}

/* Foto unten, angeschnitten — wie in der großen Kachel */
.help-card__media {
  position: relative;
  margin-top: auto;
  height: 300px;
  overflow: hidden;
}
.help-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
/* Weiche Kante nach oben, damit das Foto in der Karte „aufgeht“
   statt als Kasten zu kleben */
.help-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--c-black-2) 0%, rgba(13,13,13,.55) 14%, rgba(13,13,13,0) 34%);
}
.help-card--accent .help-card__media::before {
  background: linear-gradient(180deg, var(--c-yellow) 0%, rgba(252,195,40,.55) 14%, rgba(252,195,40,0) 34%);
}

.help-card__ctas {
  position: relative; z-index: 3;
  display: flex; gap: 16px; align-items: center;
  padding: 20px 28px 0;
}

.help__nav {
  display: flex; justify-content: flex-end; gap: 10px;
  max-width: 1180px; margin: 0 auto;
  padding: 20px 24px 0;
}
.help__nav button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line);
  background: rgba(245, 242, 208, .08);
  color: var(--c-cream);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.help__nav button:hover { background: rgba(245, 242, 208, .18); }
.help__nav button:disabled { opacity: .3; cursor: default; }
.help__nav button:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }
@media (hover: none) { .help__nav { display: none; } }

/* ═══ Formular (Anfrage-Dummy) ═══════════════════════════════════════ */
.form {
  position: relative; z-index: 4;
  width: 100%; max-width: 560px;
  margin-top: 30px;
  display: grid; gap: 12px;
  text-align: left;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-size: 14px; letter-spacing: .14em;
  color: var(--c-muted); margin-bottom: 6px;
}
.form input, .form select, .form textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 20px; letter-spacing: .04em;
  color: var(--c-cream);
  background: rgba(245, 242, 208, .06);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.form textarea { min-height: 118px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--c-yellow);
  background: rgba(245, 242, 208, .1);
}
.form select option { background: #111; color: var(--c-cream); }
.form .button { margin-top: 6px; justify-self: start; }

/* Mehrfachauswahl Zubehör */
.form__checks { display: grid; gap: 8px; }
.form .check {
  display: flex; align-items: center; gap: 11px;
  margin: 0; padding: 12px 15px;
  font-size: 19px; letter-spacing: .04em;
  color: var(--c-cream);
  background: rgba(245, 242, 208, .06);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.form .check:hover { border-color: rgba(245, 242, 208, .34); }
.form .check input { width: 19px; height: 19px; accent-color: var(--c-yellow); margin: 0; flex: 0 0 auto; }
.form .check:has(input:checked) { border-color: var(--c-yellow); background: rgba(252, 195, 40, .1); }
.form .check:focus-within { border-color: var(--c-yellow); }

/* Einwilligung: zwei Zeilen, deshalb oben ausgerichtet statt mittig */
.form .check:has(input[name="einwilligung"]) { align-items: flex-start; }
.form .check:has(input[name="einwilligung"]) input { margin-top: 3px; }
.form .check a { color: var(--c-cream); text-decoration: underline; text-underline-offset: 3px; }
.form .check a:hover { color: var(--c-yellow); }

/* Honigtopf gegen Bots. Nicht display:none — manche Bots erkennen das
   und lassen das Feld dann bewusst leer. So ist es außerhalb des
   Sichtfelds, aber für sie ganz normal befüllbar. */
.form__honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Verweis auf die Fragenseite, direkt unter dem Absendeknopf. Wer hier
   zögert, hat meistens eine konkrete Frage — und bricht sonst ab. */
.form__hinweis {
  margin: 17px 0 0;
  font-size: 15px; line-height: 1.5; letter-spacing: .04em;
  color: var(--c-muted);
}
.form__hinweis a { color: var(--c-cream); text-decoration: underline; text-underline-offset: 3px; }
.form__hinweis a:hover { color: var(--c-yellow); }

.form__done {
  display: none;
  margin-top: 26px; padding: 26px;
  border: 1px solid var(--c-yellow);
  border-radius: 18px;
  font-size: 24px; letter-spacing: .04em;
  color: var(--c-yellow);
}
.form__done.is-visible { display: block; }

/* ═══ Footer ═════════════════════════════════════════════════════════ */
.footer {
  margin-top: var(--gap-tile);
  padding: 62px 24px 40px;
  background: var(--c-black);
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.footer img { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; }
.footer__name { font-size: 30px; letter-spacing: .1em; margin: 0 0 16px; }
/* <address>, nicht <p>: die vollständige Anschrift ist die Angabe, an
   der Verzeichnisse, Karten und Sprachmodelle das Unternehmen
   wiedererkennen. Sie muss überall zeichengleich stehen. */
.footer__meta { margin: 0 0 22px; color: var(--c-muted); font-size: 19px; letter-spacing: .05em; font-style: normal; }
.footer__meta a { color: var(--c-muted); text-decoration: none; }
.footer__meta a:hover { color: var(--c-cream); }
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-bottom: 24px;
}
.footer__links a {
  color: var(--c-muted); text-decoration: none;
  font-size: 16px; letter-spacing: .1em;
  transition: color var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--c-cream); }
.footer__copy { color: rgba(245,242,208,.34); font-size: 14px; letter-spacing: .1em; }

.footer a:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 4px; }

/* ═══ Rechtstexte ════════════════════════════════════════════════════
   Impressum, Datenschutz, AGB. Bewusst KEINE Kacheln.

   Bebas Neue kennt nur Versalien. Über zwei Bildschirmseiten Fließtext
   ist das nicht mehr lesbar — und ein Impressum muss nach § 5 DDG
   "leicht erkennbar" sein. Deshalb hier eine echte Leseschrift aus dem
   System: kein Download, keine Übertragung an Dritte, kein neues
   Schriftgewicht in der Marke. Überschriften bleiben Bebas.

   Apple macht es genauso — apple.com/legal ist auch keine Kachelseite.
   Festgehalten in docs/08-entscheidungen.md.
   ────────────────────────────────────────────────────────────────── */
.rechtstext {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 56px) 24px 96px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--c-cream);
}
/* Inhaltsseiten: eine Kachel als Einstieg, darunter die Textspalte.
   Die Kachel hält die Navigation schon frei — der Nav-Aufschlag oben
   entfällt hier, sonst klafft die doppelte Höhe. Kein neuer Zahlenwert:
   56 px ist derselbe Abstand, den die Textspalte ohnehin nutzt. */
.section + .rechtstext { padding-top: 56px; }

.rechtstext__eyebrow {
  font-family: var(--font);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-yellow);
  margin: 0 0 var(--gap-inner);
}
.rechtstext h1 {
  font-family: var(--font);
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  margin: 0 0 var(--gap-group);
}
.rechtstext h2 {
  font-family: var(--font);
  font-size: 34px;
  letter-spacing: var(--ls-subhead);
  margin: 56px 0 var(--gap-inner);
  padding-top: 17px;
  border-top: 1px solid var(--c-line);
}
/* Beginnt die Textspalte direkt mit einer Zwischenüberschrift, hängt
   deren Trennlinie frei unter der Kachel und die Abstände stapeln sich.
   Die erste Überschrift braucht beides nicht — darüber steht schon die
   Kachel. */
.rechtstext > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.rechtstext h3 {
  font-family: var(--font);
  font-size: 24px;
  letter-spacing: var(--ls-subhead);
  margin: 34px 0 var(--gap-inner);
}
.rechtstext p,
.rechtstext li { margin: 0 0 17px; }
.rechtstext ul { margin: 0 0 17px; padding-left: 22px; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext a { color: var(--c-cream); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext a:hover { color: var(--c-yellow); }
.rechtstext strong { font-weight: 600; }

/* Anschrift und andere Blöcke, die ihre Zeilenumbrüche behalten müssen */
.rechtstext address {
  font-style: normal;
  margin: 0 0 17px;
}

/* Stand-Angabe und Quellenhinweise */
.rechtstext__stand {
  margin-top: 56px;
  padding-top: 17px;
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: 15px;
}

/* Offener Punkt, der noch geklärt werden muss — im Text sichtbar,
   damit er nicht vergessen wird. Vor dem Livegang müssen alle weg. */
.rechtstext__pruefen {
  margin: 0 0 17px;
  padding: 14px 18px;
  border-left: 3px solid var(--c-yellow);
  background: var(--c-black-2);
  color: var(--c-muted);
  font-size: 15px;
}
/* Der Kasten trägt inzwischen auch Listen und mehrere Absätze.
   Der letzte Abstand nach unten gehört dem Kasten, nicht dem Inhalt. */
.rechtstext__pruefen > :last-child { margin-bottom: 0; }

@media (max-width: 734px) {
  .rechtstext { padding-top: calc(var(--nav-height) + 34px); font-size: 16px; }
  .rechtstext h1 { font-size: 44px; }
  .rechtstext h2 { font-size: 28px; }
}

/* ═══ Klickdummy-Hinweis — entfernt am 31.07.2026 ════════════════════
   Die Seite ist live und öffentlich; der Hinweis stand auf einer
   Seite, die Gäste tatsächlich zu sehen bekamen. Er ist aus allen
   Dokumenten entfernt, und der Prüf-Job lässt ihn nicht zurück.
   Das zugehörige CSS ist damit tot und steht hier nicht mehr.
   Begründung: docs/08-entscheidungen.md, E-30.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Reduzierte Bewegung respektieren ══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}