/* =====================================================================
   EXORENT „Klassisch hell“ (Vorschau, 10.10.2026)
   Philipps Wunsch: Farben wie exclusive-rental.de, „dass es klassischer wirkt,
   sonst ist die Seite genial“. Deshalb nur eine Farbschicht ueber styles.css:
   Inhaltsbereiche werden elfenbeinfarben mit dunkler Schrift und Champagner-Akzent,
   Ueberschriften in einer klassischen Serife. Alles, was auf Fotos/Videos liegt
   (Hero, Showroom-Buehne, Auftritt, Halle-Videos, Lightbox), bleibt dunkel.
   Rueckgaengig: diese eine <link>-Zeile in index.html entfernen.
   ===================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-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;
}

:root {
  --paper: #f8f5ef;        /* Grundton Elfenbein */
  --paper-2: #efe9de;      /* Wechselsektion Sand */
  --card: #ffffff;
  --line: #e2d9c8;
  --champagne: #856c3e;    /* Akzent-Schrift auf hell (Kontrast >= 4:1 auch auf Sand) */
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;

  /* Variablen von styles.css auf „hell“ umgedreht */
  --obsidian: var(--paper);
  --ink-hi: #1f1b16;
  --ink-muted: #6d6556;
  --border-d: rgba(60,45,20,.12);
}

/* Dunkle Inseln: hier gelten wieder die Original-Farben */
.hero-stage, .showroom-section, .story-full, .craft-panel, .pm-lightbox,
#header:not(.scrolled), .hero-gate, .spot-frame, .ct-section .ct-bg,
.stats-section, .about-section, .req-section, .rev-section, .ct-section, footer {
  --obsidian: #161310;
  --ink-hi: #fbf7ef;
  --ink-muted: rgba(251,247,239,0.55);
  --border-d: rgba(255,255,255,0.08);
}

body { background: var(--paper); color: var(--ink-hi); }
.stats-section, .about-section, .req-section, .rev-section, .ct-section, footer { color: var(--ink-hi); }

/* ---------- Kopfzeile beim Scrollen: helles Band wie im Beispiel ---------- */
#header.scrolled {
  background: rgba(248,245,239,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px -18px rgba(60,45,20,.35);
}
#header.scrolled .header-nav a { color: #4a4337; }
#header.scrolled .header-nav a:hover { color: #000; }

/* ---------- Ueberschriften: klassische Serife ---------- */
.showroom-title, .spot-title, .about-heading, .rev-title, .ct-title, .story-full-title,
.craft-headline, .car-name, .spot-name, .price-modal-title, .pm-block-title {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .005em;
}
.about-heading, .rev-title, .ct-title, .spot-title { font-size: clamp(2.1rem, 3.6vw, 3.25rem); line-height: 1.08; }
.car-name { font-size: 1.2rem; line-height: 1.15; }

/* ---------- Wechselnde Sektionsflaechen ---------- */
/* Muhammed 10.10.: Kennzahlen, Service, Voraussetzungen, Bewertungen, Kontakt, Footer bleiben schwarz (Wechsel hell/dunkel) */
.spot-section, .steps-section { background: var(--paper); }
.vehicles-section, .craft-section { background: var(--paper-2); }
.vehicles-section, .steps-section, .craft-section { border-top-color: var(--line); }
.rev-section { background: var(--obsidian); color: var(--ink-hi); }
.rev-section .rev-title { color: var(--ink-hi); }
.rev-section .rev-title .gold { color: var(--gold); }
.rev-section .rev-sub, .rev-section .rev-lead { color: var(--ink-muted); }

/* Fahrzeugkarten: echtes Weiss mit Kontur auf Sand, statt halbtransparent auf Creme */
.vehicles-section .car-card { background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(60,45,20,.04), 0 18px 40px -26px rgba(60,45,20,.45); }
.vehicles-section .car-card:hover { border-color: rgba(133,108,62,.45); box-shadow: 0 26px 50px -26px rgba(60,45,20,.55); }
.vehicles-section .car-specs, .vehicles-section .car-btns { border-color: var(--line); }

.req-head h2, .stat-num { font-family: var(--serif); font-weight: 600; letter-spacing: .005em; }
.req-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; }
.stat-num { font-size: clamp(2.2rem, 3.8vw, 3.2rem); text-shadow: none; }

/* Gold als Schrift auf Hell: dunkler Champagner, sonst zu blass */
.spot-section .gold, .vehicles-section .gold, .steps-section .gold, .craft-section .gold { color: var(--champagne); }

/* ---------- Halle-Videos: hintere Karten abdunkeln statt durchscheinen ---------- */
.craft-panel { opacity: 1; filter: brightness(.55) saturate(.85); transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
  box-shadow: 0 26px 60px -30px rgba(60,45,20,.55); }
.craft-panel.is-vorn { filter: none; box-shadow: 0 30px 70px -28px rgba(60,45,20,.6), 0 0 0 1px rgba(156,131,80,.35); }

.fleet-eyebrow, .spot-badge, .spot-section .ki-note, .vehicles-section .ki-note, .steps-section .ki-note, .craft-section .ki-note, .filter-btn.active { color: var(--champagne); }
#header.scrolled .header-phone { color: #4a4337; }
.brand-ticker .brand-ticker-text { color: var(--ink-dark-muted); }
@media (max-width: 768px) {
  .brand-ticker { background: var(--paper-2); border-color: var(--line); }
  .brand-ticker .brand-ticker-text { color: #6d6556; }
}

/* Serife mit Versalziffern, sonst wirken 12 / 100 % / M2 zu klein */
.showroom-title, .spot-title, .about-heading, .rev-title, .ct-title, .story-full-title, .craft-headline,
.car-name, .spot-name, .price-modal-title, .pm-block-title, .req-head h2, .stat-num { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }


/* ---------- Fahrzeug-Fenster: hell, Gold-Kleinschrift als Champagner ---------- */
.pm-bar, .pm-count {
  --obsidian: #161310; --ink-hi: #fbf7ef; --ink-muted: rgba(251,247,239,0.55); --border-d: rgba(255,255,255,0.08);
}
.pm-count { color: #fbf7ef; }
.pm-bar-wa { color: #fbf7ef; }
#price-modal .pm-all, #price-modal .price-modal-eyebrow, #price-modal .price-modal-chip b,
#price-modal .price-modal-table td small, #price-modal .price-modal-table td:nth-child(2),
#price-modal .pm-longterm-eye, #price-modal .pm-longterm-link, #price-modal .pm-block-title,
#price-modal .pm-final-car, #price-modal .pm-km-list li b { color: var(--champagne); }
#price-modal .pm-google-stars { color: #c08a1e; }

/* ---------- Zeilenumbrueche: ausgeglichen, Handy skaliert mit der Breite (17 Pro Max = Vorlage) ---------- */
.showroom-title, .spot-title, .about-heading, .rev-title, .ct-title, .story-full-title, .craft-headline,
.car-name, .spot-name, .req-head h2 { text-wrap: balance; }
@media (max-width: 768px) {
  .about-heading, .rev-title, .ct-title, .spot-title, .req-head h2, .story-full-title { font-size: min(2.1rem, 7.6vw); }
  .spot-name { font-size: min(2.1rem, 7.6vw); }
  .showroom-title { font-size: min(1.85rem, 6.7vw); }
  .craft-headline { font-size: min(1.75rem, 6.36vw); }
  .car-name { font-size: min(1.2rem, 4.36vw); }
}
/* 7 Vertrauenspunkte im Fenster: letzter Punkt mittig statt Loch rechts */
.pm-checks li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
@media (max-width: 768px) { .pm-checks li:last-child:nth-child(odd) { width: auto; justify-self: stretch; } }

/* Kontrast auf Weiss/Creme: Preis und Kleinüberschrift im dunkleren Gold, Footer-Marken hell */
.vehicles-section .car-price { color: #9c7c3c; }
.spot-section .about-label, .vehicles-section .about-label, .steps-section .about-label, .craft-section .about-label { color: var(--champagne); }
footer .brand-ticker-text { color: rgba(251,247,239,.8); }