/* ==========================================================================
   Tubonika Designsystem · Tokens
   „Holz & Messing“: Papier und Tinte als ruhige Basis, Kirschholz (Harmonika)
   und Messing (Tuba) als Akzente, bunte Socken als verspielte Ausnahme.
   Alle Farben stammen aus dem Logo bzw. den Pressefotos.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-italic-var.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}

:root {
  /* --- Grundfarben -------------------------------------------------------- */
  --papier: #EFECE6;        /* Logo „hell“ – Seitenhintergrund */
  --leinen: #E6E1D7;        /* Flächen, Passepartout */
  --stein: #CFC9BE;         /* Haarlinien */
  --tinte: #1F1E1C;         /* Logo „tinte“ – Überschriften */
  --text: #3A3834;          /* Fließtext */
  --graphit: #645E55;       /* Nebentext, Labels (≥ 4,5:1 auf Papier und Leinen) */
  --kirsch: #8C5B45;        /* Logo „kirsch“ – Flächen, Punkte, Stern */
  --kirsch-text: #84533E;   /* Kirschholz für Schrift (≥ 4,5:1 auf Papier und Leinen) */
  --kirsch-tief: #6F4434;   /* Hover auf Kirsch */
  --messing: #B48A3C;       /* Tuba – nur Deko, nie Text auf Papier */
  --messing-hell: #D8B66A;  /* Messing auf dunklem Grund */
  --nacht: #191816;         /* Bühne: dunkle Abschnitte */
  --nacht-2: #23211E;

  /* --- Socken (verspielte Akzente, nur für Streifen und Mini-Details) ------ */
  --socke-moos: #5E7A3D;    /* Glasfassade, Foto 2 */
  --socke-himmel: #7F9CB9;  /* Hemd, Foto 1 */
  --socke-rose: #D29A8C;    /* Hemd, Foto 1 */
  --socke-senf: #D6A63A;    /* Messing, hell */
  --socke-kirsch: #8C5B45;
  --socken-streifen: linear-gradient(90deg,
      var(--socke-kirsch) 0 20%, var(--socke-senf) 0 40%, var(--socke-moos) 0 60%,
      var(--socke-himmel) 0 80%, var(--socke-rose) 0 100%);

  /* --- Rollen (Komponenten nutzen nur diese) ------------------------------ */
  --bg: var(--papier);
  --surface: var(--leinen);
  --fg: var(--tinte);
  --fg-2: var(--text);
  --muted: var(--graphit);
  --line: var(--stein);
  --accent: var(--kirsch-text);
  --accent-hover: var(--kirsch-tief);
  --deko: var(--messing);
  --on-accent: var(--papier);
  --focus: var(--kirsch);

  /* --- Schrift ------------------------------------------------------------ */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-riesig: clamp(4.6rem, 17.5vw, 15rem);   /* Wortmarke im Hero */
  --fs-1: clamp(2.9rem, 6.4vw, 5.6rem);        /* Abschnittstitel */
  --fs-2: clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-3: clamp(1.55rem, 2.4vw, 2.1rem);
  --fs-lead: clamp(1.3rem, 1.9vw, 1.7rem);     /* Serifen-Lead */
  --fs-body: 1.0625rem;                         /* 17 px */
  --fs-klein: 0.9375rem;
  --fs-label: 0.75rem;                          /* Versalien-Label */

  --lh-eng: 0.92;
  --lh-titel: 1.04;
  --lh-text: 1.65;
  --sperrung-label: 0.16em;

  /* --- Abstände (4er-Raster) ---------------------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --abschnitt: clamp(5rem, 11vw, 9.5rem);       /* vertikaler Abschnittsabstand */
  --gutter: clamp(1rem, 4.2vw, 3.25rem);        /* seitlicher Rand */
  --max: 84rem;
  --measure: 62ch;

  /* --- Formen ------------------------------------------------------------- */
  --r-0: 0;
  --r-1: 3px;
  --r-pill: 999px;
  --haarlinie: 1px solid var(--line);
  --passepartout: clamp(0.5rem, 1.2vw, 0.9rem);

  /* --- Bewegung ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-balg: cubic-bezier(0.65, 0, 0.35, 1);     /* ein- und ausatmen */
  --ease-feder: cubic-bezier(0.34, 1.4, 0.64, 1);  /* kleiner Überschwinger */
  --t-1: 160ms;
  --t-2: 320ms;
  --t-3: 640ms;
  --t-4: 1100ms;
}

/* Bühne: dunkler Kontext für Video und Fußzeile. Gleiche Rollen, andere Werte. */
.buehne {
  --bg: var(--nacht);
  --surface: var(--nacht-2);
  --fg: #F3F0EA;
  --fg-2: #D9D3C9;
  --muted: #A69F93;
  --line: #3A3732;
  --accent: #CF9174;
  --accent-hover: #E2A88C;
  --deko: var(--messing-hell);
  --on-accent: var(--nacht);
  --focus: var(--messing-hell);
  background: var(--bg);
  color: var(--fg-2);
}