/* ==========================================================================
   Servus Gelting — Tokens

   Portiert aus dem Design System des Canvas:
   design-export/canvas/_ds/…/tokens/{fonts,colors,typography,spacing}.css

   Werte unverändert übernommen. Einzige bewusste Abweichung: die
   Schriften liegen lokal statt per Google-CDN — optisch identisch,
   aber ohne externe Abhängigkeit (siehe CLAUDE.md).

   Enthält keine Komponenten und kein Seitenlayout.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Schriften — alle lokal
   -------------------------------------------------------------------------- */

/* Cabinet Grotesk — Display, variabel, überwiegend in 800.
   DATEI FOLGT: Sobald die statische WOFF2 unter
   assets/fonts/cabinet-grotesk-800.woff2 liegt, nimmt der Browser sie.
   Bis dahin greift die Variable-TTF aus der Design-Vorlage. */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2"),
       url("../fonts/CabinetGrotesk-Variable.ttf") format("truetype-variations"),
       url("../fonts/CabinetGrotesk-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk — Fließtext und UI.
   Die Vorlage nutzt 400 bis 800 sowie Kursive. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* IBM Plex Mono — Labels, Zahlen, Auszeichnungen */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Instrument Sans — ausschließlich die Beschriftung der
   Bildplatzhalter. Stand bisher in basis.css im Schriftstapel, ohne
   dass die Datei je ausgeliefert wurde: Die Beschriftungen liefen
   still auf Hanken Grotesk und waren dadurch auf jeder Seite rund 5 %
   zu schmal. Vom Abgleich gefunden. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Newsreader — nur kursiv, für den Beschreibungssatz der Sorten.
   Im Design System als „to confirm" markiert, im Canvas aber im
   Einsatz. Wird mitgeführt, solange die Vorlage sie zeigt. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Farben — aus tokens/colors.css
   -------------------------------------------------------------------------- */

:root {
  /* Grundpalette */
  --espresso:     #1E1610;  /* Text, Dunkelflächen, Fußzeile */
  --cream:        #F6EEDF;  /* Papier, helle Fläche, Text auf Dunkel */
  --cream-2:      #F2E9DC;  /* zweite Fläche, Abschnittswechsel */
  --off-white:    #FFFDF8;  /* Kartenfüllung, Buttonfüllung */
  --muted-brown:  #6E6151;  /* Sekundärtext */
  --amber:        #A06A2F;  /* Mikro-Labels, kleine Akzente */
  --tan:          #D9A678;  /* weicher Akzent */

  /* Überlagerungen */
  --overlay-warm: rgba(255, 250, 240, .60);
  --overlay-dark: rgba(60, 50, 42, .72);
  --shadow-color: rgba(0, 0, 0, .18);

  /* Rollen */
  --bg-page:      var(--cream);
  --bg-alt:       var(--cream-2);
  --bg-ink:       var(--espresso);
  --surface-card: var(--off-white);

  --text-strong:  var(--espresso);
  --text-body:    var(--espresso);
  --text-muted:   var(--muted-brown);
  --text-on-ink:  var(--cream);
  --text-label:   var(--amber);

  --border-ink:      var(--espresso);
  --border-hairline: rgba(30, 22, 16, .14);

  --error:   #A63B2A;
  --success: #2F5233;

  --btn-fill: var(--off-white);
  --btn-ink:  var(--espresso);

  /* Sorten-Farbwelten.
     Jede Sorte trägt eine kräftige Weltfarbe für das Wasserzeichen,
     dazu einen dunkleren Zweitwert für Text — die Welten sind sehr
     unterschiedlich hell. */
  --luigi:  #EE7623;  --luigi-mark:  #EE7623;  --luigi-text:  #C2540F;
  --andrea: #FDE910;  --andrea-mark: #FDE910;  --andrea-text: #8A7A00;
  --renato: #1A660A;  --renato-mark: #1A660A;  --renato-text: #114806;
  --maxim:  #5CE1E6;  --maxim-mark:  #5CE1E6;  --maxim-text:  #0E7E83;
  --resi:   #003F75;  --resi-mark:   #003F75;  --resi-text:   #002B50;
  /* Bruno steht noch aus. Der Wert hier ist der provisorische
     Bordeaux des Design Systems — im Canvas läuft Bruno neutral auf
     Espresso mit „Kommt bald". Nicht als gesetzte Sortenfarbe lesen. */
  --bruno:  #7A1F2B;  --bruno-mark:  #7A1F2B;  --bruno-text:  #5C141E;

  /* Helle und dunkle Ausprägung je Welt.
     Aus K_WORLDS in unterseiten-shared.jsx — nicht Teil der DS-Tokens,
     aber nötig für Wasserzeichen auf Cream- UND Espresso-Flächen.
     Regel der Vorlage: dunkle Welten nehmen den hellen Wert, helle
     Welten den dunklen. */
  --luigi-hell:  #F5A263;  --luigi-dunkel:  #C2540F;
  --renato-hell: #5FAF4B;  --renato-dunkel: #114806;
  --maxim-hell:  #8FEBEF;  --maxim-dunkel:  #0E7E83;
  --andrea-hell: #FEF181;  --andrea-dunkel: #A89700;
  --resi-hell:   #3E7FBC;  --resi-dunkel:   #002B50;

  /* Aktive Sortenwelt — per Klasse gesetzt */
  --world:        var(--luigi);
  --world-mark:   var(--luigi-mark);
  --world-text:   var(--luigi-text);
  --world-hell:   var(--luigi-hell);
  --world-dunkel: var(--luigi-dunkel);
}

.welt-luigi { --world: var(--luigi); --world-mark: var(--luigi-mark); --world-text: var(--luigi-text); --world-hell: var(--luigi-hell); --world-dunkel: var(--luigi-dunkel); }
.welt-andrea { --world: var(--andrea); --world-mark: var(--andrea-mark); --world-text: var(--andrea-text); --world-hell: var(--andrea-hell); --world-dunkel: var(--andrea-dunkel); }
.welt-renato { --world: var(--renato); --world-mark: var(--renato-mark); --world-text: var(--renato-text); --world-hell: var(--renato-hell); --world-dunkel: var(--renato-dunkel); }
.welt-maxim { --world: var(--maxim); --world-mark: var(--maxim-mark); --world-text: var(--maxim-text); --world-hell: var(--maxim-hell); --world-dunkel: var(--maxim-dunkel); }
.welt-resi { --world: var(--resi); --world-mark: var(--resi-mark); --world-text: var(--resi-text); --world-hell: var(--resi-hell); --world-dunkel: var(--resi-dunkel); }
.welt-bruno  { --world: var(--bruno); --world-mark: var(--bruno-mark); --world-text: var(--bruno-text); }


/* --------------------------------------------------------------------------
   3. Typografie — aus tokens/typography.css
   -------------------------------------------------------------------------- */

:root {
  --font-display: "Cabinet Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;

  --fw-display: 800;
  --fw-body:    400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Skala, abgelesen am finalen Entwurf der Startseite */
  --fs-watermark: 380px;
  --fs-h1:        82px;
  --fs-h2:        43px;
  --fs-h3:        30px;
  --fs-h4:        24px;
  --fs-h5:        19px;
  --fs-h6:        15px;
  --fs-lead:      17px;
  --fs-body:      16px;
  --fs-cta:       16px;
  --fs-caption:   13px;
  --fs-label:     10px;

  --lh-display: 1.0;
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-body:    1.55;

  --tr-watermark: -0.02em;
  --tr-display:   0.005em;
  --tr-label:     0.28em;
  --tr-mono:      0.04em;
}


/* --------------------------------------------------------------------------
   4. Raster, Formen, Bewegung — aus tokens/spacing.css
   -------------------------------------------------------------------------- */

:root {
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;
  --space-4: 16px;   --space-5: 24px;   --space-6: 32px;
  --space-7: 48px;   --space-8: 64px;   --space-9: 96px;
  --space-10: 128px; --space-11: 160px;

  --maxw-page:    1440px;   /* Desktop-Grundbreite des Entwurfs */
  --maxw-content: 1200px;
  --maxw-text:    680px;
  --gutter:    clamp(20px, 5vw, 72px);
  --section-y: clamp(64px, 9vw, 160px);

  --grid-gap: var(--space-5);
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;

  /* Ecken: leicht gerundet.
     Das ursprüngliche Briefing sagte 0, der Kunde hat später 4px
     gewünscht. Das Design System führt das als einzelnes Token, und
     genau so rendert der Canvas auch. */
  --radius:        4px;
  --border-width:  1px;
  --border-strong: 1.5px;
  --focus-ring:    0 0 0 3px rgba(160, 106, 47, .35);

  --shadow-none: none;
  --shadow-card: 0 18px 34px -28px var(--shadow-color);
  --shadow-pop:  0 24px 48px -24px var(--shadow-color);

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   560ms;
  --dur-reveal: 900ms;

  /* Ergänzung, nicht im Design System: der Weg der Kopfzeile vom
     durchsichtigen in den kompakten Zustand. Länger als --dur-base,
     weil hier Fläche, Höhe und Logo gleichzeitig wandern — mit 280ms
     wirkt das gehetzt. */
  --dur-wandel: 460ms;
}