/* ============================================================
   HARRY'S APPARTEMENT – DESIGN TOKENS
   ------------------------------------------------------------
   Gleiche Familie wie Harry's Burger (Schriften, Anthrazit/Creme,
   Nachthimmel, Stern), aber ruhiger: gerade statt schräg, weniger
   harte Schatten, mehr Weißraum. Farben 1:1 aus dem Logo
   (assets/img/logo.svg): Stern-Rot, Berg-Gold, Creme.
   Komponenten (main.css) verwenden NUR diese Variablen.
   ============================================================ */

/* ── Schriften (selbst gehostet, DSGVO-freundlich, OFL-Lizenz) ── */
/* ── Schriften (selbst gehostet, DSGVO-freundlich, OFL-Lizenz) ── */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin-400-normal.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 1000; 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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ── Markenfarben (aus dem Logo) ── */
  --c-red:        #C50000;   /* Stern & Schriftbox */
  --c-red-deep:   #9A0000;   /* Hover */
  --c-red-text:   #C50000;   /* Rot auf Papier: 5,9 : 1 → auch für kleine Schrift ok */
  --c-gold:       #FFCC00;   /* Berge – Akzent auf Dunkel, Fokus-Ring */
  --c-gold-soft:  #F4DE8A;
  --c-cream:      #FFFDEB;   /* Logo-Schrift */

  /* ── Familie (identisch mit Harry's Burger) ── */
  --c-ink:        #353D3E;
  --c-ink-deep:   #242A2B;
  --c-night:      #161B1D;
  --c-paper:      #FBF8EE;
  --c-sand:       #F4F0E2;   /* ruhige Wechsel-Fläche */
  --c-white:      #FFFFFF;
  --c-ok:         #2E8B57;

  /* ── Semantische Rollen (Komponenten nutzen diese) ── */
  --bg:            var(--c-paper);
  --bg-alt:        var(--c-sand);
  --bg-inverse:    var(--c-night);
  --fg:            var(--c-ink);
  --fg-muted:      color-mix(in oklab, var(--c-ink) 74%, transparent);
  --fg-inverse:    var(--c-cream);
  --accent:        var(--c-red);
  --accent-hover:  var(--c-red-deep);
  --accent-text:   var(--c-red-text);
  --accent-dark:   var(--c-gold);    /* Akzent auf dunklen Flächen */
  --on-accent:     var(--c-white);
  --line:          color-mix(in oklab, var(--c-ink) 13%, transparent);
  --line-strong:   color-mix(in oklab, var(--c-ink) 28%, transparent);
  --surface:       var(--c-white);

  /* ── Typografie ── */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero:  clamp(3.2rem, 6.4vw, 6.4rem);   /* ruhiger als beim Burger */
  --fs-h1:    clamp(2.7rem, 5.6vw, 4.8rem);
  --fs-h2:    clamp(2.3rem, 4.6vw, 3.8rem);
  --fs-h3:    clamp(1.5rem, 2.2vw, 1.9rem);
  --fs-lead:  clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body:  1.0625rem;  /* 17px */
  --fs-small: .875rem;
  --fs-label: .72rem;
  --lh-tight: .95;
  --lh-body:  1.65;
  --tracking-label: .18em;

  /* ── Abstände & Layout ── */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;   --space-8: 4.5rem;
  --max:         1240px;
  --narrow:      920px;
  --gutter:      clamp(16px, 4vw, 56px);
  --section-pad: clamp(64px, 8.5vw, 128px);
  --header-h:    76px;

  /* ── Formen ── */
  --radius-s:    4px;
  --radius-m:    10px;
  --radius-l:    18px;
  --radius-pill: 999px;
  --border:      1.5px solid var(--line-strong);
  --border-bold: 2px solid var(--c-ink);
  --tilt:        0deg;                     /* gerade wie das Logo – keine Schrägen */

  /* ── Schatten ── */
  --shadow-1: 0 1px 0 rgba(0,0,0,.04), 0 12px 30px -18px rgba(20,20,20,.25);
  --shadow-2: 0 30px 60px -30px rgba(20,20,20,.35);
  --shadow-3: 0 40px 90px -30px rgba(10,10,10,.55);
  --shadow-hard: 3px 3px 0 var(--c-ink);   /* Familien-Signatur, nur für Buttons */

  /* ── Bewegung ── */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --dur-1: .15s;
  --dur-2: .35s;
  --dur-3: .8s;
}