/* ==========================================================================
   Wohnhilfe Hannover – Design System
   Farben aus dem Marken-Farbblatt, Logo-Farben aus Logo/Logo.png gesampelt.
   Schrift: Outfit, statische Schnitte als woff2 unter /brand/fonts/.
   Wird NACH /hi/css/main.css geladen und ueberschreibt dessen Defaults.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift – Outfit, selbst gehostet, ein Schnitt je Gewicht

   Bewusst KEINE variable Datei mehr. Deren Standard-Instanz ist wght=100
   (Thin), und jeder Browser, der die Gewichtsachse nicht anwendet, rendert
   damit die komplette Seite hauchduenn. Genau das ist am 15.09.2026 bei einem
   Kunden passiert: iPhone mit aktiviertem Blockierungsmodus (Lockdown Mode),
   der in Safari die Schrifttechnik abschaltet. Statische Schnitte tragen ihr
   Gewicht in der Datei (OS/2.usWeightClass) und brauchen keine Achse.

   Erzeugt mit web/scripts/schrift-schnitte.py aus der variablen Originaldatei
   (Outfit von Google Fonts, SIL OFL). Neue Gewichte: dort eintragen, Skript
   laufen lassen, hier einen @font-face-Block ergaenzen.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-300.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-ext-300.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-400.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-ext-400.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-500.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-ext-500.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-600.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-ext-600.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-700.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/brand/fonts/outfit-latin-ext-700.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ---- Marken-Grundfarben (Farbblatt) ---- */
  --wh-white: #ffffff;          /* Pure White   – Pantone White */
  --wh-off-white: #fefbf7;      /* Off-White    – Pantone 7499 C */
  --wh-black: #000000;          /* Black        – Pantone Black C */
  --wh-charcoal: #1f1f1f;       /* Charcoal     – Pantone 419 C */
  --wh-navy: #0f2c63;           /* Deep Navy    – Pantone 295 C */
  --wh-orange: #ef8a34;         /* Vivid Orange – Pantone 1585 C */

  /* ---- Logo-Originalfarben (aus Logo.png gesampelt) ----
     Weichen bewusst vom Farbblatt ab: das Logo ist dunkler bzw. goldener.
     Nur fuer Logo-Rekonstruktion / Logo-naher Flaechen verwenden. */
  --wh-logo-navy: #02173a;
  --wh-logo-gold: #c89331;

  /* ---- Navy-Skala ---- */
  --wh-navy-50: #e7eaef;
  --wh-navy-100: #c3cad8;
  --wh-navy-300: #8796b1;
  --wh-navy-500: #4b618a;
  --wh-navy-600: #0f2c63;
  --wh-navy-700: #0b214a;
  --wh-navy-900: #081632;

  /* ---- Orange-Skala ---- */
  --wh-orange-50: #fdf3eb;
  --wh-orange-100: #fbe2cc;
  --wh-orange-300: #f7c49a;
  --wh-orange-500: #ef8a34;
  --wh-orange-600: #cb752c;
  --wh-orange-700: #a76124;
  --wh-orange-ink: #8b501e;     /* textsicheres Orange: 6.4:1 auf Weiss */

  /* ---- Gold-Skala (Logo) ---- */
  --wh-gold-500: #c89331;
  --wh-gold-600: #aa7d2a;

  /* ---- Semantische Rollen ---- */
  --wh-color-bg: var(--wh-off-white);
  --wh-color-surface: var(--wh-white);
  --wh-color-surface-alt: var(--wh-navy-50);
  --wh-color-surface-invert: var(--wh-navy);

  --wh-color-text: var(--wh-charcoal);
  --wh-color-text-muted: #55606f;
  --wh-color-text-invert: var(--wh-white);
  --wh-color-heading: var(--wh-navy);

  --wh-color-primary: var(--wh-navy);
  --wh-color-primary-hover: var(--wh-navy-700);
  --wh-color-accent: var(--wh-orange);
  --wh-color-accent-hover: var(--wh-orange-600);

  --wh-color-link: var(--wh-navy);
  --wh-color-link-hover: var(--wh-orange-ink);
  --wh-color-border: #e3ddd4;
  --wh-color-border-strong: var(--wh-navy-100);
  --wh-color-focus: var(--wh-orange);

  /* ---- Typografie ---- */
  --wh-font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;

  --wh-fw-light: 300;
  --wh-fw-regular: 400;
  --wh-fw-medium: 500;
  --wh-fw-semibold: 600;
  --wh-fw-bold: 700;

  /* Groessen: bewusst grosszuegig – Zielgruppe liest oft mit Sehschwaeche */
  --wh-fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --wh-fs-h1: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --wh-fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --wh-fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --wh-fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --wh-fs-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.3125rem);
  --wh-fs-base: 1.0625rem;
  --wh-fs-sm: 0.9375rem;
  --wh-fs-xs: 0.8125rem;

  --wh-lh-tight: 1.1;
  --wh-lh-snug: 1.25;
  --wh-lh-normal: 1.45;
  --wh-lh-relaxed: 1.65;

  --wh-ls-tight: -0.02em;
  --wh-ls-normal: 0;
  --wh-ls-wide: 0.08em;

  /* ---- Abstaende (4px-Raster) ---- */
  --wh-space-1: 0.25rem;
  --wh-space-2: 0.5rem;
  --wh-space-3: 0.75rem;
  --wh-space-4: 1rem;
  --wh-space-5: 1.5rem;
  --wh-space-6: 2rem;
  --wh-space-7: 2.5rem;
  --wh-space-8: 3rem;
  --wh-space-9: 4rem;
  --wh-space-10: 5rem;
  --wh-space-11: 6rem;
  --wh-space-12: 8rem;

  --wh-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Header-Masse – Hero und Header teilen sich diese Werte, damit der Hero
     exakt unter die Leiste gezogen werden kann. */
  --wh-header-bar-h: 74px;
  --wh-header-pad: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --wh-header-h: calc(var(--wh-header-bar-h) + 2 * var(--wh-header-pad));

  /* ---- Layout ---- */
  --wh-container: 1200px;
  --wh-container-narrow: 820px;
  --wh-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  /* ---- Radien ---- */
  --wh-radius-sm: 6px;
  --wh-radius-md: 10px;
  --wh-radius-lg: 18px;
  --wh-radius-xl: 28px;
  --wh-radius-pill: 999px;

  /* ---- Schatten (navy getoent, nicht neutral grau) ---- */
  --wh-shadow-sm: 0 1px 2px rgba(8, 22, 50, 0.06),
    0 2px 6px rgba(8, 22, 50, 0.05);
  --wh-shadow-md: 0 4px 10px rgba(8, 22, 50, 0.07),
    0 12px 28px rgba(8, 22, 50, 0.08);
  --wh-shadow-lg: 0 10px 24px rgba(8, 22, 50, 0.1),
    0 30px 60px rgba(8, 22, 50, 0.12);

  /* ---- Bewegung ---- */
  --wh-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wh-duration-fast: 120ms;
  --wh-duration: 220ms;
  --wh-duration-slow: 420ms;
}

/* --------------------------------------------------------------------------
   3. Basis – setzt Outfit gegen die Theme-Defaults durch
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--wh-font-sans);
}

body {
  font-size: var(--wh-fs-base);
  font-weight: var(--wh-fw-regular);
  line-height: var(--wh-lh-relaxed);
  color: var(--wh-color-text);
  background-color: var(--wh-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--wh-font-sans);
  color: var(--wh-color-heading);
  font-weight: var(--wh-fw-bold);
  letter-spacing: var(--wh-ls-tight);
  line-height: var(--wh-lh-tight);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--wh-fs-h1); }
h2, .h2 { font-size: var(--wh-fs-h2); }
h3, .h3 { font-size: var(--wh-fs-h3); line-height: var(--wh-lh-snug); }
h4, .h4 { font-size: var(--wh-fs-h4); line-height: var(--wh-lh-snug); font-weight: var(--wh-fw-semibold); }
h5, .h5 { font-size: var(--wh-fs-base); font-weight: var(--wh-fw-semibold); }
h6, .h6 {
  font-size: var(--wh-fs-sm);
  font-weight: var(--wh-fw-semibold);
  letter-spacing: var(--wh-ls-wide);
  text-transform: uppercase;
}

p { text-wrap: pretty; }

a {
  color: var(--wh-color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--wh-duration-fast) var(--wh-ease);
}

a:hover { color: var(--wh-color-link-hover); }

strong, b { font-weight: var(--wh-fw-semibold); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wh-color-focus);
  outline-offset: 2px;
  border-radius: var(--wh-radius-sm);
}

::selection {
  background: var(--wh-navy);
  color: var(--wh-white);
}

/* --------------------------------------------------------------------------
   4. Bausteine
   -------------------------------------------------------------------------- */

.wh-container {
  width: 100%;
  max-width: var(--wh-container);
  margin-inline: auto;
  padding-inline: var(--wh-gutter);
}

.wh-container--narrow { max-width: var(--wh-container-narrow); }

.wh-section { padding-block: var(--wh-section-y); }
.wh-section--tinted { background: var(--wh-color-surface-alt); }
.wh-section--invert {
  background: var(--wh-color-surface-invert);
  color: var(--wh-color-text-invert);
}
.wh-section--invert :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4) {
  color: var(--wh-color-text-invert);
}
.wh-section--invert a { color: var(--wh-orange-300); }

.wh-lead {
  font-size: var(--wh-fs-lead);
  line-height: var(--wh-lh-normal);
  color: var(--wh-color-text-muted);
}

.wh-eyebrow {
  display: inline-block;
  font-size: var(--wh-fs-sm);
  font-weight: var(--wh-fw-semibold);
  letter-spacing: var(--wh-ls-wide);
  text-transform: uppercase;
  color: var(--wh-orange-ink);
}

/* ---- Buttons ----
   Hinweis: Orange traegt KEINEN weissen Text (2.5:1). Auf Orange steht
   Charcoal (6.6:1). Navy traegt Weiss (13.5:1). */
.wh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wh-space-2);
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  /* 1px statt 2 (Kundenwunsch 14.09.2026). Betrifft alle Varianten mit
     sichtbarem Rand: ghost, on-dark und die weissen Ringe auf dunklem Grund.
     Die Groesse aendert sich nicht, Preflight setzt border-box, der Rand liegt
     also innerhalb der Box. */
  border: 1px solid transparent;
  border-radius: var(--wh-radius-pill);
  font-family: var(--wh-font-sans);
  font-size: var(--wh-fs-base);
  font-weight: var(--wh-fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wh-duration) var(--wh-ease),
    border-color var(--wh-duration) var(--wh-ease),
    color var(--wh-duration) var(--wh-ease),
    transform var(--wh-duration-fast) var(--wh-ease);
}

.wh-btn:active { transform: translateY(1px); }

.wh-btn--primary {
  background: var(--wh-color-primary);
  border-color: var(--wh-color-primary);
  color: var(--wh-white);
}
.wh-btn--primary:hover {
  background: var(--wh-color-primary-hover);
  border-color: var(--wh-color-primary-hover);
  color: var(--wh-white);
}

.wh-btn--accent {
  background: var(--wh-color-accent);
  border-color: var(--wh-color-accent);
  color: var(--wh-charcoal);
}
.wh-btn--accent:hover {
  background: var(--wh-color-accent-hover);
  border-color: var(--wh-color-accent-hover);
  color: var(--wh-charcoal);
}

.wh-btn--ghost {
  background: transparent;
  border-color: var(--wh-color-primary);
  color: var(--wh-color-primary);
}
.wh-btn--ghost:hover {
  background: var(--wh-color-primary);
  color: var(--wh-white);
}

.wh-btn--on-dark {
  background: var(--wh-white);
  border-color: var(--wh-white);
  color: var(--wh-navy);
}
.wh-btn--on-dark:hover {
  background: var(--wh-orange);
  border-color: var(--wh-orange);
  color: var(--wh-charcoal);
}

.wh-btn--sm { min-height: 2.5rem; padding: 0.5rem 1.25rem; font-size: var(--wh-fs-sm); }
/* Grosser Button: hohe Trefferflaeche, aber Schrift nur eine Stufe ueber der
   Basis – mit --wh-fs-lead (bis 21px) wurden die Beschriftungen so breit, dass
   zwei Buttons nebeneinander nicht mehr in die Hero-Textspalte passten. */
.wh-btn--lg {
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
}

/* ---- Card ---- */
.wh-card {
  background: var(--wh-color-surface);
  border: 1px solid var(--wh-color-border);
  border-radius: var(--wh-radius-lg);
  padding: var(--wh-space-6);
  box-shadow: var(--wh-shadow-sm);
  transition: box-shadow var(--wh-duration) var(--wh-ease),
    transform var(--wh-duration) var(--wh-ease);
}

.wh-card--interactive:hover {
  box-shadow: var(--wh-shadow-md);
  transform: translateY(-3px);
}

/* ---- Formularfeld ---- */
.wh-field {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wh-color-border-strong);
  border-radius: var(--wh-radius-md);
  background: var(--wh-white);
  font-size: var(--wh-fs-base);
  color: var(--wh-color-text);
}

/* Ein Label je Feld, auch wenn optisch nur der Platzhalter zu sehen ist.
   Ein Platzhalter allein ist kein Label: er verschwindet beim Tippen, und
   Screenreader lesen ihn nicht zuverlaessig vor. */
.wh-field-label { display: block; }

.wh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.wh-field::placeholder { color: var(--wh-color-text-muted); opacity: 1; }
.wh-field:focus { border-color: var(--wh-navy); }

/* ---- Logo ---- */
.wh-logo { display: inline-block; line-height: 0; }
.wh-logo img { display: block; width: auto; height: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem); }

/* --------------------------------------------------------------------------
   5. Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}