/*
 * SUBWAY Design-Tokens · Quelle: 07 Final (Designsystem.html, SUBWAY_Designsystem_PageBuilder.md)
 * ------------------------------------------------------------------------------------------------
 * Einziger Austauschpunkt für Werte. Templates, Module und PageBuilder-Elemente verwenden
 * ausschließlich var(--sw-*). Keine Werte in Widgets fest eintragen.
 *
 * Aufbau:
 *   1  Neutralfarben (global, nie themenabhängig)
 *   2  Semantische Farbrollen + sechs Farbwelten ([data-theme] am <html>)
 *   3  Raster (12 / 8 / 4 Spalten) und Bühnen
 *   4  Abstände
 *   5  Schriften und Typorollen
 *   6  Linien, Bildformate, Bewegung
 *   7  Breakpoints: Tablet ≤ 1199 px · Mobil ≤ 767 px
 *   8  Altbestand (Kompatibilität für Module, die in den folgenden Paketen neu gebaut werden)
 */

:root {
	/* ---------- 1 · Neutralfarben ---------- */
	--sw-ink: #14110F;
	--sw-ink-2: #221D1A;
	--sw-ink-3: #2C2622;
	--sw-paper: #F3EFE8;
	--sw-paper-2: #E9E3D8;
	--sw-sand: #E8E4D8;
	--sw-surface: #FBF9F5;
	--sw-text: #14110F;
	--sw-text-2: #5E554C;
	--sw-text-inv: #F3EFE8;
	--sw-text-inv-2: #B3A99D;
	--sw-line-color: #D8D0C4;
	--sw-line-color-dark: #3A332E;
	--sw-film: #0D0B0A;
	--sw-wand-grund: #161616;       /* Grund unter der Kachelwand (Hero, Vorschaltseite) */
	--sw-danger: #B3261E;

	/* ---------- 3 · Raster · Desktop 12 Spalten ---------- */
	--sw-max: 1600px;                                                  /* Rahmen inkl. Außenrand */
	--sw-cols: 12;
	--sw-gap: 32px;                                                    /* Gutter */
	--sw-m: 48px;                                                      /* Außenrand */
	--sw-pad: max(var(--sw-m), calc((100vw - var(--sw-max)) / 2 + var(--sw-m))); /* ab 1600 px zentriert */
	--sw-content-max: calc(var(--sw-max) - 2 * var(--sw-m));         /* 1504 px */
	--sw-header: 86px;
	--sw-sticky: 60px;
	--sw-stage-in: max(0px, calc((100vw - var(--sw-max)) / 2));        /* Einzug der breiten Bühne */
	--sw-stage-w: min(100vw, var(--sw-max));                           /* Breite der breiten Bühne */
	--sw-touch: 44px;                                                  /* Mindest-Touchziel */

	/* ---------- 4 · Abstände ---------- */
	--sw-s-2xs: 4px;
	--sw-s-xs: 8px;
	--sw-s-s: 16px;
	--sw-s-m: 24px;
	--sw-s-l: 32px;
	--sw-s-xl: 48px;
	--sw-s-2xl: 64px;
	--sw-s-3xl: 96px;
	--sw-sec: var(--sw-s-3xl);                                         /* Abschnitt Standard */
	--sw-sec-c: var(--sw-s-2xl);                                       /* Abschnitt kompakt */

	/* ---------- 5 · Schriften (lokal, assets/fonts.css) ---------- */
	--sw-font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
	--sw-font-ui: 'Archivo', 'Arial Narrow', sans-serif;
	--sw-font-accent: 'Newsreader', Georgia, serif;

	/* Typorollen · Desktop */
	--sw-fs-hero: clamp(64px, 7.06vw, 108px);
	--sw-fs-d-l: clamp(64px, 8vw, 128px);       /* Section Display L: Was geht?, Klangfarben */
	--sw-fs-d-m: clamp(56px, 6.5vw, 96px);      /* Section Display M: Filmwelt */
	--sw-fs-d-s: clamp(40px, 4.4vw, 64px);      /* Section Display S: Das Heft, Lesestück-Titel */
	--sw-fs-sec: 40px;                          /* Ressortkopf */
	--sw-fs-c-xl: clamp(32px, 3vw, 48px);       /* Card Headline XL (Anton) */
	--sw-fs-c-l: 28px;                          /* Card Headline L (Anton / Akzent) */
	--sw-fs-c-m: 22px;                          /* Card Headline M (Archivo 600) */
	--sw-fs-c-s: 18px;                          /* Card Headline S (Archivo 600) */
	--sw-fs-intro: 20px;
	--sw-fs-body: 17px;
	--sw-fs-small: 15px;
	--sw-fs-label: 13px;
	--sw-fs-meta: 12px;
	--sw-fs-caption: 12px;
	--sw-fs-nav: 16px;
	--sw-fs-btn: 18px;
	--sw-fs-time: clamp(30px, 3.19vw, 46px);    /* Programmtafel (nur Was geht?) */
	--sw-fs-event: clamp(20px, 1.9vw, 27px);

	/* ---------- 6 · Linien ---------- */
	--sw-line-sec: 1.5px solid var(--sw-ink);         /* Section Divider (vollflächig) */
	--sw-line-content: 1.5px solid var(--sw-ink);     /* Content Divider (Spaltenbreite) */
	--sw-line-micro: 1px solid var(--sw-line-color);  /* Micro Divider (Listenzeilen) */

	/* Bildformate */
	--sw-r-wide: 16 / 9;
	--sw-r-land: 4 / 3;
	--sw-r-sq: 1 / 1;
	--sw-r-port: 4 / 5;
	--sw-r-cover: 600 / 814;

	/* Bewegung */
	--sw-ease: cubic-bezier(.3, .7, .2, 1);
	--sw-t-fast: .18s;
	--sw-t: .28s;
}

/* ---------- 2 · Semantische Farbrollen + sechs Farbwelten ----------
   Komponenten verwenden NUR die Rollen, nie eine konkrete Farbwelt:
   --sw-accent (Fläche/Button) · --sw-accent-hover · --sw-accent-active · --sw-on-accent (Text auf Akzent)
   --sw-logo (deckender 80-%-Ton, Logo) · --sw-word (Headline auf Sand/Papier = exakt Button-Farbe)
   --sw-signal (Kontrastfarbe: Marker, Hover auf Akzentflächen) · --sw-hl (Hover-Balken)
   Start = Gelb (data-theme="gold" am <html>, Farbregel 10.10.2026); eine aktive Auswahl wird nur lokal im Browser gespeichert
   (Schlüssel „subway-farbe“). :root ohne Attribut bleibt technischer Rückfall. */
:root,
[data-theme="pink"] {
	--sw-accent: #B70074; --sw-accent-hover: #A10066; --sw-accent-active: #8B0058; --sw-on-accent: #FFFFFF;
	--sw-logo: #CC2886; --sw-signal: #F5C83C; --sw-word: var(--sw-accent);
}
[data-theme="gold"] {
	--sw-accent: #F5C83C; --sw-accent-hover: #DAB237; --sw-accent-active: #BF9C31; --sw-on-accent: #14110F;
	--sw-logo: #F5C83C; --sw-signal: #D4322B; --sw-word: var(--sw-accent);
}
[data-theme="orange"] {
	--sw-accent: #E2733A; --sw-accent-hover: #C96735; --sw-accent-active: #B15B30; --sw-on-accent: #14110F;
	--sw-logo: #E2733A; --sw-signal: #6BA6C9; --sw-word: var(--sw-accent);
}
[data-theme="rot"] {
	--sw-accent: #D4322B; --sw-accent-hover: #BD2E28; --sw-accent-active: #A62A24; --sw-on-accent: #FFFFFF;
	--sw-logo: #EB4A3F; --sw-signal: #F5C83C; --sw-word: var(--sw-accent);
}
[data-theme="cyan"] {
	--sw-accent: #6BA6C9; --sw-accent-hover: #6194B3; --sw-accent-active: #56829C; --sw-on-accent: #14110F;
	--sw-logo: #6BA6C9; --sw-signal: #E2733A; --sw-word: var(--sw-accent);
}
[data-theme="papier"] {
	--sw-accent: #F3EFE8; --sw-accent-hover: #E6E0D5; --sw-accent-active: #D6CFC2; --sw-on-accent: #14110F;
	--sw-logo: #F3EFE8; --sw-signal: #E2733A; --sw-word: #44413E;
}
/* abgeleitete Rollen (gelten für jede Farbwelt) */
:root {
	--sw-hl: color-mix(in srgb, var(--sw-accent) 55%, transparent);   /* LINK 01 Hover-Balken */
	--sw-focus: var(--sw-accent);
	--sw-accent-soft: color-mix(in srgb, var(--sw-accent) 80%, #fff); /* Fläche „Was geht?“ */
}
[data-theme="papier"] {
	--sw-hl: color-mix(in srgb, var(--sw-signal) 55%, transparent);
	--sw-focus: var(--sw-signal);
}

/* ---------- 7 · Breakpoints ---------- */
@media (max-width: 1199px) {
	:root {
		--sw-cols: 8; --sw-gap: 24px; --sw-m: 32px; --sw-header: 72px;
		--sw-sec: var(--sw-s-2xl); --sw-sec-c: var(--sw-s-xl);
		--sw-fs-hero: clamp(56px, 8.6vw, 88px); --sw-fs-d-l: clamp(64px, 10vw, 104px);
		--sw-fs-d-m: clamp(52px, 8vw, 80px); --sw-fs-d-s: clamp(40px, 6vw, 56px);
		--sw-fs-sec: 36px; --sw-fs-c-xl: 36px; --sw-fs-c-l: 26px; --sw-fs-c-m: 21px;
		--sw-fs-time: clamp(34px, 4.6vw, 44px); --sw-fs-event: clamp(21px, 2.6vw, 25px);
	}
}
@media (max-width: 767px) {
	:root {
		--sw-cols: 4; --sw-gap: 16px; --sw-m: 20px; --sw-header: 64px;
		--sw-sec: var(--sw-s-xl); --sw-sec-c: var(--sw-s-xl);
		--sw-fs-hero: clamp(48px, 14.5vw, 72px); --sw-fs-d-l: clamp(56px, 18vw, 88px);
		--sw-fs-d-m: clamp(48px, 15vw, 64px); --sw-fs-d-s: clamp(36px, 11vw, 48px);
		--sw-fs-sec: 32px; --sw-fs-c-xl: 30px; --sw-fs-c-l: 24px; --sw-fs-c-m: 20px; --sw-fs-c-s: 17px;
		--sw-fs-intro: 18px; --sw-fs-body: 16px; --sw-fs-time: 34px; --sw-fs-event: 22px;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root { --sw-t-fast: 0s; --sw-t: 0s; }
}

/* ---------- 8 · Altbestand ----------
   Nur für Module aus dem Rebuild, die in den Komponentenpaketen 2 ff. neu gebaut werden.
   Neue Arbeit verwendet diese Namen NICHT. Wird mit dem letzten Komponentenpaket entfernt. */
:root {
	--sw-ink-soft: var(--sw-text-2);
	--sw-line: var(--sw-line-color);
	--sw-muted: var(--sw-text-2);
	--sw-accent-ink: var(--sw-on-accent);
	--sw-ad-label: var(--sw-text-2);
	--sw-top-event: var(--sw-ink-3);
	--sw-rubrik-veranstaltungen: var(--sw-accent);
	--sw-rubrik-musik: var(--sw-accent);
	--sw-rubrik-film: var(--sw-accent);
	--sw-rubrik-kultur: var(--sw-accent);
	--sw-rubrik-stadtleben: var(--sw-accent);
	--sw-rubrik-freizeit: var(--sw-accent);
	--sw-font-text: var(--sw-font-ui);
	--sw-font-meta: var(--sw-font-ui);
	--sw-fs-display-xl: var(--sw-fs-hero);
	--sw-fs-display: var(--sw-fs-d-s);
	--sw-fs-h1: var(--sw-fs-sec);
	--sw-fs-h2: var(--sw-fs-c-l);
	--sw-fs-h3: var(--sw-fs-c-m);
	--sw-fs-teaser: var(--sw-fs-c-s);
	--sw-lh-tight: 1.05;
	--sw-lh-heading: 1.15;
	--sw-lh-body: 1.55;
	--sw-tracking-label: .12em;
	--sw-tracking-dachzeile: .2em;  /* redaktionelle Dachzeilen (Rubrik/Print-Marke, Format, Anzeige in der Labelzeile; Rubrik-Opener) – optisch an die Sperrung der Wortmarke angelehnt */
	--sw-weight-regular: 500;
	--sw-weight-bold: 700;
	--sw-weight-black: 800;
	--sw-space-1: var(--sw-s-2xs);
	--sw-space-2: var(--sw-s-xs);
	--sw-space-3: 12px;
	--sw-space-4: var(--sw-s-s);
	--sw-space-5: var(--sw-s-m);
	--sw-space-6: var(--sw-s-l);
	--sw-space-7: var(--sw-s-xl);
	--sw-space-8: var(--sw-s-2xl);
	--sw-space-9: var(--sw-s-3xl);
	--sw-space-10: 128px;
	--sw-section-gap: var(--sw-sec);
	--sw-container: var(--sw-content-max);
	--sw-container-wide: var(--sw-max);
	--sw-container-text: 42rem;
	--sw-lesebreite: 42rem;
	--sw-gutter: var(--sw-m);
	--sw-columns: var(--sw-cols);
	--sw-radius: 0;
	--sw-border: var(--sw-line-micro);
	--sw-motion-fast: var(--sw-t-fast);
	--sw-motion-base: var(--sw-t);
	--sw-ratio-hero: 3 / 2;
	--sw-ratio-teaser: var(--sw-r-land);
	--sw-ratio-portrait: var(--sw-r-port);
	--sw-ratio-cover: var(--sw-r-cover);
	--sw-ratio-wide: var(--sw-r-wide);
	--sw-ad-billboard: 970 / 250;
	--sw-ad-billboard-mobile: 320 / 100;
	--sw-ad-rectangle: 300 / 250;
}