/* ============================================================
   Garage Gerstl AG — Design tokens

   Farben und Schrift folgen den „Renault Digital Standard Guidelines 2026,
   DE V2" (gültig ab Mai 2026) — Farbpalette S. 18/19, Typografie S. 14–16,
   Schaltflächen S. 24. Quelle: feedback/Renault_Digital_Standard_Guidelines_2026_DE_V2.pdf

   Grundregel der Guidelines: Weiss ist die Hauptfarbe, das Gelb wird
   sparsam als Akzent eingesetzt, Schwarz trägt Titel und Textblöcke.
   Keine markenfremden Farben (das alte Blaugrau #374e55 ist entfallen).
   ============================================================ */
:root {
	/* ---- Brand (Guidelines S. 18/19 — Hauptfarben) ---- */
	--yellow: #efdf00;          /* primary yellow — Akzent, CTA, Linien */
	--yellow-600: #f8eb4c;      /* primary hover */
	--yellow-soft: #fdf9cc;     /* zarte Fläche, aus primary yellow abgeleitet */

	/* ---- Neutrals (Guidelines S. 18 — Grauabstufungen) ---- */
	--black: #000000;
	--ink: #000000;             /* text primary */
	--ink-700: #3e3f40;         /* text secondary */
	--ink-500: #656666;         /* text tertiary */
	--ink-300: #888b8d;         /* dark grey */
	--line: #d9d9d6;            /* light grey — Trennlinien */
	--surface: #ffffff;         /* white — Hauptfläche */
	--surface-2: #d9d9d6;       /* light grey — alternierendes Band */
	--surface-3: #bbbcbc;       /* mid grey */
	--white: #ffffff;
	--content-bg: #d9d9d6;      /* light grey — Textkasten der Unterseiten */
	--sidebar-line: #bbbcbc;    /* mid grey — #sidebar li border-bottom */

	/* ---- Dark chrome (Footer / Mobile-Leiste) ----
	   Guidelines S. 44: Navigation auf schwarzem oder weissem Hintergrund. */
	--footer-bg: #000000;
	--footer-fg: #ffffff;       /* text light background */
	--footer-muted: #bbbcbc;    /* mid grey — sekundäre Links im Footer */
	--chrome-hover: #3e3f40;    /* text secondary — Hover-Flächen auf Schwarz */

	/* ---- Dunkles Band („Kurz & knapp") ---- */
	--band-bg: #000000;
	--band-fg: #d9d9d6;         /* light grey — Fliesstext auf Schwarz */

	/* ---- EV-Thema (Guidelines S. 19) ---- */
	--ev-lighter: #2597be;
	--ev-light: #1fa2c8;
	--ev-base: #1885d1;

	/* ---- Benachrichtigungsfarben (Guidelines S. 18) ---- */
	--alert-base: #e91630;
	--alert-neutral: #ee5352;
	--warning-base: #f7a84b;
	--success-light: #50dd6d;
	--success-base: #40d37c;
	--information-base: #1e8fce;

	/* ---- Semantic ---- */
	--text-primary: var(--ink);
	--text-secondary: var(--ink-500);
	--accent: var(--yellow);

	/* ---- Typography ----
	   Guidelines S. 14: „Benutzen Sie diese Schriftart auf Ihrer Website im
	   Bereich der Marke Renault" — nouvel'R, Schnitte Light/Book/Regular/
	   Semi Bold/Bold/Extrabold. S. 16 untersagt ausdrücklich das Mischen
	   anderer Schriften mit nouvel'R im Renault-Bereich.

	   Die Schriftdateien liegen im Renault Brand Hub / Figma Design System
	   (Zugang siehe Guidelines S. 3). Solange sie fehlen, greift Roboto als
	   Fallback — sobald `assets/fonts/nouvelr-*.woff2` vorhanden sind, lädt
	   `inc/enqueue.php` sie automatisch und die Seite ist konform. */
	--font-body: "Nouvel R", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-serif: var(--font-body);  /* Guidelines S. 16: keine Fremdschrift neben nouvel'R */
	--fw-light: 300;
	--fw-book: 350;
	--fw-regular: 400;
	--fw-medium: 600;           /* nouvel'R Semi Bold */
	--fw-bold: 700;
	--fw-extrabold: 800;

	--fs-eyebrow: 0.8125rem;    /* 13px */
	--fs-body: 1.0625rem;       /* 17px — wie Original (body 17px/300) */
	--fs-lead: 1.5rem;          /* 24px — Lead / Willkommenstext */
	--fs-h3: 1.375rem;          /* 22px */
	--fs-h2: 2rem;              /* 32px */
	--fs-h1: 2.5rem;            /* 40px */
	--fs-display: 3rem;         /* 48px hero */

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-body: 1.65;

	/* ---- Schaltflächen & Links (Guidelines S. 24) ----
	   CTA-Schaltfläche: Höhe 46px, Padding 16/11, Schrift 16px fett auf 20px,
	   max. 280px breit, Symbol 24px mit 8px Abstand zum Text.
	   Text-Link-CTA: Höhe 32px, sonst gleiche Werte. */
	--btn-h: 46px;
	--btn-px: 16px;
	--btn-py: 11px;
	--btn-fs: 1rem;             /* 16px */
	--btn-lh: 20px;
	--btn-max: 280px;
	--btn-gap: 8px;             /* Text ↔ Symbol */
	--btn-icon: 24px;
	--btn-disabled-bg: #f2f2f2;
	--link-cta-h: 32px;

	/* ---- Layout ---- */
	--container: 1200px;
	--container-narrow: 820px;
	--gutter: 20px;
	--section-py: 72px;
	--section-py-sm: 44px;

	/* ---- Radius / borders ---- */
	--radius: 4px;
	--radius-lg: 8px;
	--border: 1px solid var(--line);

	/* ---- Elevation ---- */
	--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
	--shadow-raised: 0 14px 40px -18px rgba(0, 0, 0, 0.35);

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 220ms;
}

/* ---- Base helpers ---- */
.eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0 0 10px;
}
.eyebrow::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--yellow);
	margin-top: 8px;
}
/* Zentrierte Blöcke: Strich mittig unter dem Text */
.section-intro--center .eyebrow::after,
.welcome--center .eyebrow::after {
	margin-inline: auto;
}