/* haushoch digital – Design-Tokens · Stand 14.09.2026
   Regeln und Herleitung: brand-assets.md (gleicher Ordner).
   In jedes HTML-Asset übernehmen. Schriftpfade anpassen, wenn die Datei woanders liegt. */

/* ---------- Schrift: selbst gehostet, nicht über das Google-CDN ---------- */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("schrift/Mulish[wght]-latin.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url("schrift/Mulish-Italic[wght]-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("schrift/JetBrainsMono[wght]-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("schrift/JetBrainsMono-Italic[wght]-latin.woff2") format("woff2"); }

/* ---------- Farben ---------- */
:root {
  --hh-blau: #1484C6;            /* Absender – die einzige Fläche: Scheibe, Button, Markierung */
  --hh-blau-hover: #1170AB;
  --hh-blau-hell: #8AC2E5;       /* Abstufung – nur zweite Datenreihe in Diagrammen */
  --hh-dunkel: #0D1C2A;          /* Seitengrund */
  --hh-flaeche: #14293A;         /* abgesetzte Karten und Blöcke */
  --hh-bernstein: #FFB13D;       /* Befund – nur Linie, Kontur, Ziffer; nie Fläche; nur auf Dunkel */
  --hh-weiss: #FFFFFF;
  --hh-weiss-90: rgba(255,255,255,0.90);     /* Fließtext, Lead, Kartentext – wie auf Folien */
  --hh-weiss-72: rgba(255,255,255,0.72);     /* Rubriken, Navigation, Kleinlabels – nie ganze Absätze */
  --hh-weiss-55: rgba(255,255,255,0.55);     /* Bildunterschriften, Rollen */
  --hh-weiss-45: rgba(255,255,255,0.45);     /* Footer, Kleinstschrift */
  --hh-weiss-35: rgba(255,255,255,0.35);     /* Kennungskreis ohne Fokus */
  --hh-linie: rgba(255,255,255,0.18);        /* Karten-Konturen */
  --hh-linie-schwach: rgba(255,255,255,0.10);/* Trennlinien zwischen Sektionen */
  --hh-linie-stark: rgba(255,255,255,0.24);  /* Bildrahmen, Konturbutton */
  /* Helle Flächen: kein Bernstein – Linien und Schrift in Dunkel, Konturen und Markierung in Blau */
  --hh-hell-text: #0D1C2A;
  --hh-hell-linie: rgba(13,28,42,0.24);      /* Bereich .16–.35 */

  --hh-schrift: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hh-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ---------- Grundzustand (dunkler Grund) ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--hh-dunkel); color: var(--hh-weiss);
  font-family: var(--hh-schrift); font-weight: 400; /* bei Variable Fonts explizit, sonst hauchdünn */
  font-size: 17px; line-height: 1.65; text-wrap: pretty; }
h1, h2, h3 { font-weight: 800; margin: 0; }
h1, h2 { text-wrap: balance; }
h1 { font-size: 68px; letter-spacing: -0.03em; line-height: 1.16; }
h2 { font-size: 46px; letter-spacing: -0.025em; line-height: 1.2; }
h3 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
a { color: var(--hh-weiss); }
a:hover { color: var(--hh-weiss-72); }
:focus-visible { outline: 2px solid var(--hh-bernstein); outline-offset: 2px; }
/* Kein border-radius (außer Kreisen), keine Schatten, keine Einblendeffekte. */
@media (max-width: 900px) { h1 { font-size: 40px; } h2 { font-size: 32px; } }

/* ---------- Bausteine ---------- */
.hh-rubrik { font-family: var(--hh-mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hh-weiss-72); }

.hh-button { display: inline-block; background: var(--hh-blau); color: var(--hh-weiss);
  font-weight: 700; font-size: 17px; padding: 18px 28px; text-decoration: none;
  transition: background-color 150ms ease; }
.hh-button:hover { background: var(--hh-blau-hover); color: var(--hh-weiss); }
.hh-button--klein { font-size: 15px; padding: 13px 22px; }          /* Navigation */
.hh-button--kontur { background: transparent; border: 1px solid var(--hh-linie-stark); }
.hh-button--kontur:hover { background: transparent; border-color: var(--hh-weiss); }

/* Textmarkierung: ein Wort blau hinterlegt – eine je Bildschirm, höchstens zwei je Seite */
.hh-mark { background: var(--hh-blau); display: inline-block; line-height: 0.9;
  padding: 0.1em 0.02em; box-shadow: 0.08em 0 0 var(--hh-blau), -0.08em 0 0 var(--hh-blau); }

/* Modul A: Kennzahl mit Haarlinie */
.hh-kennzahl { border-top: 1px solid var(--hh-bernstein); padding-top: 18px; }
.hh-kennzahl__wert { font-size: 40px; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--hh-bernstein); }
.hh-kennzahl__label { font-size: 13px; font-weight: 300; color: var(--hh-weiss-72); }

/* Modul B: Kennungskreis – sitzt auf einer Kante, um den halben Durchmesser darüber gezogen */
.hh-kennung { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hh-bernstein);
  background: var(--hh-dunkel); box-sizing: border-box; color: var(--hh-bernstein);
  font-family: var(--hh-mono); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; }
.hh-kennung--nebensache { border-color: var(--hh-weiss-35); color: var(--hh-weiss-72); }

/* Konturkarte: 1 px Haarlinie, Kennungskreis auf der Oberkante */
.hh-karte { position: relative; border: 1px solid var(--hh-linie); padding: 44px 40px 40px; }
.hh-karte > .hh-kennung { position: absolute; left: 36px; top: -22px; }