/* ==========================================================================
   Kernholz – Design-Tokens
   Alle Farben, Schriften, Größen, Abstände und Zeiten zentral an einer Stelle.
   Für einen echten Kunden: hier Farben/Schriften tauschen, der Rest folgt.
   ========================================================================== */

/* --- Schriften (lokal, SIL Open Font License, Lizenzen in ../fonts/) ------ */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metrisch angeglichene Ersatzschriften: verhindern Layout-Sprünge beim Schriftwechsel */
@font-face {
  font-family: "Barlow Ersatz";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 96%;
  ascent-override: 104%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow SC Ersatz";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 87%;
  ascent-override: 115%;
  descent-override: 23%;
  line-gap-override: 0%;
}

:root {
  /* --- Farbpalette ------------------------------------------------------- */
  --c-nacht-950: #0c1626;
  --c-nacht-900: #132238; /* Hauptfarbe Nachtblau */
  --c-nacht-800: #1b2f4d;
  --c-nacht-700: #25406a;
  --c-nacht-600: #3a5578;
  --c-nacht-300: #a9b6ca;
  --c-ocker-700: #8a5a17; /* Ocker als Text auf Hell (5,9 : 1) */
  --c-ocker-600: #a87128;
  --c-ocker-500: #c28a3a; /* Eichen-Ocker, Akzent */
  --c-ocker-400: #d9a55a; /* Ocker auf Nachtblau (7,2 : 1) */
  --c-ocker-100: #f6ebd9;
  --c-papier: #ffffff;
  --c-grau-50: #f4f2ee; /* helles Warmgrau */
  --c-grau-100: #edeae4;
  --c-grau-200: #ddd8cf;
  --c-grau-400: #9c9588;
  --c-grau-500: #736e64; /* Platzhaltertext, 5,1 : 1 auf Weiß */
  --c-grau-600: #5c5850;
  --c-fehler: #b3261e;
  --c-fehler-hell: #fbeae8;
  --c-erfolg: #2e6b45;
  --c-erfolg-hell: #e6f1ea;

  /* --- Holzfarben für Materialmuster -------------------------------------- */
  --holz-eiche: #c9a46f;
  --holz-eiche-geraeuchert: #7a5a3c;
  --holz-nussbaum: #6b4a33;
  --holz-esche: #ddc8a4;
  --holz-ahorn: #ead9bb;
  --holz-kirsche: #b0714a;
  --holz-buche: #d8a980;
  --holz-birke-multiplex: #e6d3ad;
  --holz-lack: #eeece6;
  --holz-filz: #58606b;

  /* --- Farbrollen -------------------------------------------------------- */
  --farbe-grund: var(--c-papier);
  --farbe-grund-alt: var(--c-grau-50);
  --farbe-feld: var(--c-papier);
  --farbe-text: #1d2635;
  --farbe-text-leise: var(--c-grau-600);
  --farbe-ueberschrift: var(--c-nacht-900);
  --farbe-linie: var(--c-grau-200);
  --farbe-linie-kraeftig: var(--c-nacht-900);
  --farbe-raster: rgb(19 34 56 / 0.055);
  --farbe-akzent: var(--c-ocker-500);
  --farbe-akzent-text: var(--c-ocker-700);
  --farbe-fokus: var(--c-nacht-900);
  --farbe-dunkel: var(--c-nacht-900);
  --farbe-dunkel-leise: var(--c-nacht-300);

  /* --- Schrift ----------------------------------------------------------- */
  --schrift-text: "Barlow", "Barlow Ersatz", Arial, sans-serif;
  --schrift-label: "Barlow Semi Condensed", "Barlow SC Ersatz", "Arial Narrow", Arial, sans-serif;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-m: 1.0625rem;
  --fs-l: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2.1vw, 3.125rem);
  --fs-3xl: clamp(2.25rem, 1.45rem + 3.6vw, 4.375rem);
  --fs-zahl: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
  --zh-eng: 1.06;
  --zh-mittel: 1.28;
  --zh-text: 1.6;
  --gewicht-normal: 400;
  --gewicht-mittel: 500;
  --gewicht-kraeftig: 600;
  --sperrung-label: 0.12em;
  --sperrung-titel: -0.012em;

  /* --- Abstände ---------------------------------------------------------- */
  --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;
  --abschnitt: clamp(4rem, 2.6rem + 5.5vw, 7.5rem);

  /* --- 12-Spalten-Raster ------------------------------------------------- */
  --inhalt-max: 90rem;
  --rand: clamp(1rem, 0.35rem + 3vw, 3rem);
  --rinne: clamp(0.75rem, 0.35rem + 1.5vw, 1.5rem);
  --zeile-max: 66ch;

  /* --- Linien & Form ----------------------------------------------------- */
  --linie: 1px;
  --linie-dick: 2px;
  --radius: 0; /* bewusst rechtwinklig */
  --schatten: 0 1px 0 rgb(19 34 56 / 0.08), 0 12px 32px -12px rgb(19 34 56 / 0.28);

  /* --- Bewegung ---------------------------------------------------------- */
  --dauer-kurz: 120ms;
  --dauer: 180ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* --- Kopfbereich & Ebenen ---------------------------------------------- */
  --infoleiste-h: 2.25rem;
  --hauptleiste-h: 4rem;
  --aktionsleiste-h: 3.5rem;
  --z-leiste: 40;
  --z-kopf: 50;
  --z-dropdown: 60;
}

@media (min-width: 64rem) {
  :root {
    --hauptleiste-h: 4.75rem;
  }
}