/* QUBE 2.0: drei Design-Systeme zur Auswahl. Umschalten per ?design=a|b|c (Auswahlseite: designs.html).
   Jedes System setzt Farben, Schrift, Formen und eigene Signaturen. Laufweite ist ueberall 0. */

@font-face { font-family: "Caslon QA"; src: url("../fonts/libre-caslon-display-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon QA"; src: url("../fonts/libre-caslon-text-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-normal-300-600.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-normal-400-900.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-italic-400-900.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("../fonts/gloock-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-normal-300-700.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* Gemeinsame Standardwerte */
:root {
  --font-label: var(--font-text);
  --font-num: var(--font-display);
  --label-transform: none;
  --r-btn: 0; --r-chip: 0; --r-media: 0; --r-ui: 0; --r-hero: 0;
  --field-bg: #FBF9F5;
}

/* =====================================================================
   A · STEIN. Stille Luxus-Architektur (Aman, Kinfolk). Kalkstein, Lavastein, Moos.
   Libre Caslon Display + Jost. Kino-Hero mit Vollbild.
   ===================================================================== */
:root, :root[data-design="a"] {
  --t-dawn: #ECE7DF; --t-day: #F3EFE9; --t-golden: #E6DCCD; --t-dusk: #2E2B27; --t-night: #1D1B19;
  --ink: #24211D; --ink-2: #4B463E; --ink-3: #6A6359;
  --on-dark: #EFE9E0; --on-dark-2: #B5ADA1;
  --camel: #A8875E; --teak: #75593A; --rice: #55613F; --clay: #A9684B;
  --kalk: #E2DBD0; --stone: #A39C92; --line: #D2CABD; --line-dark: #43403B;
  --font-display: "Caslon QA", "Libre Caslon Display", Georgia, serif;
  --font-text: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Jost", Arial, sans-serif;
  --display-weight: 400; --label-stretch: 100%;
  --fs-hero: clamp(2.5rem, 1.3rem + 4.8vw, 6.6rem);
  --lh-tight: 1.0;
  --glass: rgba(236, 231, 223, .76); --glass-dark: rgba(29, 27, 25, .66);
  --sunset: linear-gradient(180deg, rgba(230,220,205,0) 0%, #D9C2A6 30%, #A88E7C 55%, #5E544D 80%, var(--t-dusk) 100%);
  --r-btn: 0; --r-chip: 999px; --r-media: 0; --r-ui: 0;
}
[data-design="a"] .label, [data-design="a"] .chapter__label { font-weight: 500; }
[data-design="a"] .btn { font-weight: 500; letter-spacing: 0; }
/* Signatur A: Kino-Hero, Video als Vollbild, Text weiss darauf */
@media (min-width: 0px) {
  :root:not([data-design]) .hero, [data-design="a"] .hero { position: relative; min-height: 94svh; padding: 0; display: flex; align-items: flex-end; color: #F6F1E9; }
  :root:not([data-design]) .hero__grid, [data-design="a"] .hero__grid { position: static; padding-top: 120px; padding-bottom: var(--s-7); }
  :root:not([data-design]) .hero__copy, [data-design="a"] .hero__copy { position: relative; z-index: 2; }
  :root:not([data-design]) .hero__media, [data-design="a"] .hero__media { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; z-index: 0; border-radius: 0; }
  :root:not([data-design]) .hero__media::after, [data-design="a"] .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.38) 0%, rgba(20,18,16,0) 26%, rgba(20,18,16,.1) 45%, rgba(20,18,16,.78) 100%); }
  :root:not([data-design]) .hero__media .tag, [data-design="a"] .hero__media .tag { left: auto; right: 12px; top: 72px; bottom: auto; z-index: 3; }
  :root:not([data-design]) .hero .hero__eyebrow, [data-design="a"] .hero .hero__eyebrow,
  :root:not([data-design]) .hero .hero__sub, [data-design="a"] .hero .hero__sub,
  :root:not([data-design]) .hero .contact-line, [data-design="a"] .hero .contact-line { color: rgba(246,241,233,.86); }
  :root:not([data-design]) .hero .btn, [data-design="a"] .hero .btn { --btn-bg: #F6F1E9; --btn-fg: #24211D; }
  :root:not([data-design]) .hero .btn:hover, [data-design="a"] .hero .btn:hover { --btn-bg: #FFFFFF; }
  :root:not([data-design]) .hero .avatar, [data-design="a"] .hero .avatar { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #F6F1E9; }
  :root:not([data-design]) .hero .checks li::before, [data-design="a"] .hero .checks li::before { background: #F6F1E9; border-color: #F6F1E9; }
  :root:not([data-design]) .hero .chip, [data-design="a"] .hero .chip { border-color: rgba(246,241,233,.45); background: rgba(20,18,16,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  :root:not([data-design]) body:not([data-mode="dark"]) .header:not(.is-scrolled), [data-design="a"] body:not([data-mode="dark"]) .header:not(.is-scrolled) { color: #F6F1E9; }
  :root:not([data-design]) .header:not(.is-scrolled) .btn, [data-design="a"] .header:not(.is-scrolled) .btn { --btn-bg: #F6F1E9; --btn-fg: #24211D; }
}
@media (min-width: 960px) {
  :root:not([data-design]) .hero__grid, [data-design="a"] .hero__grid { grid-template-columns: 8fr 4fr; align-items: end; }
  :root:not([data-design]) .hero__title, [data-design="a"] .hero__title { font-size: clamp(3.5rem, 1rem + 5vw, 7rem); }
  :root:not([data-design]) .hero__sub, [data-design="a"] .hero__sub { max-width: 34em; }
}

/* =====================================================================
   B · RASTER. Schweizer Informationsdesign (Pentagram, Vignelli). Weiss, Schwarz, Ozean, ein Signal.
   Schibsted Grotesk + IBM Plex Mono. Sichtbares Raster, grosse Zahlen.
   ===================================================================== */
:root[data-design="b"] {
  --t-dawn: #F4F4F1; --t-day: #FAFAF8; --t-golden: #ECEBE6; --t-dusk: #0F3036; --t-night: #0A2126;
  --ink: #111111; --ink-2: #3A3A38; --ink-3: #62625E;
  --on-dark: #F4F4F1; --on-dark-2: #A9BABC;
  --camel: #E4572E; --teak: #B83E1A; --rice: #2E6B4F; --clay: #7B8C8F;
  --kalk: #E6E6E1; --stone: #9C9C96; --line: #D6D6D0; --line-dark: #2A4A50;
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-num: "Schibsted Grotesk", Arial, sans-serif;
  --display-weight: 750; --label-stretch: 100%; --label-transform: uppercase;
  --fs-hero: clamp(2.6rem, 1.2rem + 5.4vw, 7.4rem);
  --fs-d1: clamp(2.2rem, 1.2rem + 3.6vw, 5rem);
  --fs-num: clamp(2.6rem, 1.6rem + 3.6vw, 5.4rem);
  --lh-tight: .94; --lh-head: 1.0;
  --glass: rgba(250, 250, 248, .82); --glass-dark: rgba(10, 33, 38, .72);
  --sunset: linear-gradient(180deg, rgba(236,235,230,0) 0%, #F2B79B 28%, #E4572E 46%, #6A3B45 70%, var(--t-dusk) 100%);
  --r-btn: 0; --r-chip: 0; --r-media: 0; --r-ui: 0; --field-bg: #FFFFFF;
}
[data-design="b"] .h-hero em, [data-design="b"] .h1 em, [data-design="b"] .h2 em { font-style: normal; color: var(--ink-3); }
[data-design="b"] [data-time="dusk"] em, [data-design="b"] [data-time="night"] em { color: var(--camel); }
[data-design="b"] .h-hero, [data-design="b"] .h1, [data-design="b"] .h2 { font-weight: 750; }
[data-design="b"] .h3, [data-design="b"] .quiz__q { font-weight: 650; }
[data-design="b"] .brand__mark { font-weight: 800; }
[data-design="b"] .label, [data-design="b"] .chip, [data-design="b"] .chapter__label, [data-design="b"] .proof__k, [data-design="b"] .cube__s, [data-design="b"] .seg button { font-size: 11.5px; font-weight: 500; }
[data-design="b"] .btn { font-size: .875rem; font-weight: 500; }
[data-design="b"] .spec__n, [data-design="b"] .result__big, [data-design="b"] .step__amt, [data-design="b"] .dist__km, [data-design="b"] .cube__id, [data-design="b"] .chain__n, [data-design="b"] .flow__n, [data-design="b"] .field__val, [data-design="b"] .chapter__time { font-weight: 700; }
[data-design="b"] .chain__n, [data-design="b"] .flow__n { color: var(--camel); }
/* Signatur B: sichtbares 12er-Raster auf hellen Kapiteln, Kapitel mit Index-Linie */
[data-design="b"] main > [data-time="dawn"], [data-design="b"] main > [data-time="day"], [data-design="b"] main > [data-time="golden"] {
  background-image: repeating-linear-gradient(90deg, rgba(17,17,17,.045) 0 1px, transparent 1px calc((100% - 2 * var(--gutter)) / 12));
  background-position: var(--gutter) 0; background-size: calc(100% - 2 * var(--gutter)) 100%; background-repeat: no-repeat;
}
[data-design="b"] .chapter { border-top: 2px solid currentColor; padding-top: 10px; }
[data-design="b"] .chapter__rule { display: none; }
[data-design="b"] .chapter__time { font-size: 1rem; }
[data-design="b"] .hero { border-bottom: 2px solid var(--ink); }
[data-design="b"] .hero__title { margin-bottom: var(--s-5); }
@media (min-width: 960px) {
  [data-design="b"] .hero__grid { grid-template-columns: 7fr 5fr; align-items: end; }
  [data-design="b"] .hero__media { aspect-ratio: 4 / 5; }
}

/* =====================================================================
   C · TROPENWARM. Tropische Moderne (Geoffrey Bawa, Hotelbranding). Frangipani, Terrakotta, Palmgruen.
   Gloock + Onest. Bogenfenster, Pillen-Buttons, Papierkorn.
   ===================================================================== */
:root[data-design="c"] {
  --t-dawn: #F6EBDD; --t-day: #FAF2E7; --t-golden: #F2DCC4; --t-dusk: #1F3B2D; --t-night: #142A20;
  --ink: #2A1D14; --ink-2: #54443A; --ink-3: #6E5A4A;
  --on-dark: #F6EBDD; --on-dark-2: #BFCBB8;
  --camel: #C0602F; --teak: #9A4320; --rice: #3F6B4A; --clay: #C0602F;
  --kalk: #EEDDC8; --stone: #B79F86; --line: #E1CDB5; --line-dark: #355443;
  --font-display: "Gloock", Georgia, serif;
  --font-text: "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Onest", Arial, sans-serif;
  --display-weight: 400; --label-stretch: 100%;
  --fs-hero: clamp(2.5rem, 1.2rem + 5vw, 6.8rem);
  --lh-tight: 1.0;
  --glass: rgba(246, 235, 221, .8); --glass-dark: rgba(20, 42, 32, .7);
  --sunset: linear-gradient(180deg, rgba(242,220,196,0) 0%, #F0B98A 28%, #D9774A 50%, #6E4A39 74%, var(--t-dusk) 100%);
  --r-btn: 999px; --r-chip: 999px; --r-media: 22px; --r-ui: 14px; --r-hero: 999px 999px 22px 22px; --field-bg: #FFF9F1;
}
[data-design="c"] .h-hero em, [data-design="c"] .h1 em, [data-design="c"] .h2 em, [data-design="c"] .h3 em { font-style: normal; color: var(--camel); }
[data-design="c"] [data-time="dusk"] em, [data-design="c"] [data-time="night"] em { color: #F0B98A; }
[data-design="c"] .btn { font-weight: 600; padding-inline: 28px; }
[data-design="c"] .label, [data-design="c"] .chapter__label { font-weight: 500; }
[data-design="c"] .chip { background: rgba(255,255,255,.45); }
[data-design="c"] .chapter__time { color: var(--camel); }
[data-design="c"] [data-time="dusk"] .chapter__time, [data-design="c"] [data-time="night"] .chapter__time { color: #F0B98A; }
[data-design="c"] .chain__n, [data-design="c"] .flow__n { color: #F0B98A; }
/* Signatur C: Bogenfenster im Hero, Papierkorn ueber allem */
[data-design="c"] .hero__media { aspect-ratio: 4 / 4.4; margin-inline: 0; border-radius: 999px 999px 22px 22px; }
[data-design="c"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (max-width: 959px) { [data-design="c"] .hero__media { aspect-ratio: 1 / 1; width: 78%; margin: 8px auto 0; } }
@media (min-width: 960px) { [data-design="c"] .hero__media { aspect-ratio: 4 / 5; } }

/* ---------- Sprachschalter (alle Designs) ---------- */
.langswitch { display: inline-flex; border: 1px solid currentColor; border-radius: var(--r-btn); overflow: hidden; }
.langswitch a { font-family: var(--font-label); font-weight: 500; font-size: 12px; line-height: 1; padding: 8px 10px; text-decoration: none; text-transform: none; min-width: 38px; text-align: center; }
.langswitch a[aria-current="page"] { background: currentColor; }
.langswitch a[aria-current="page"] span { color: var(--t-dawn); }
body[data-mode="dark"] .langswitch a[aria-current="page"] span { color: var(--t-night); }
:root:not([data-design]) .header:not(.is-scrolled) .langswitch a[aria-current="page"] span, [data-design="a"] .header:not(.is-scrolled) .langswitch a[aria-current="page"] span { color: #24211D; }
[data-design="c"] .sticky .btn { padding-inline: 16px; }
.sticky .btn.btn--ghost { padding: 0; }