/* Design-Tokens — Umzug Meister, Stand 27.09.2026
   Alle Farben stammen aus dem Kundenemblem: Navy und Orange (gemessen am
   gelieferten Logo), Himmel aus dem Himmel hinter dem Maskottchen. Das warme
   Papier des alten Entwurfs ist durch ein kuehles, zum Emblem passendes Hell
   ersetzt. */

:root {
  /* Farbe */
  --navy: #10355f;
  --navy-tief: #0a2544;
  --navy-nebel: #e4ebf3;
  --orange: #f8981d;
  --orange-hell: #ffab3d;
  --orange-marke: #d27606;  /* MEISTER auf Weiss: Markenfarbton, 3,2:1 als fette Grossschrift */
  --orange-ikon: #a55700;   /* Ikonen und feine Grafik, 5,3:1 auf Weiss */
  --orange-nebel: #fdefda;
  --papier: #f3f6f9;        /* ruhiges Kuehlweiss fuer wechselnde Baender */
  --himmel: #eaf6fd;        /* Bewertungen; Navy darauf ca. 11:1 */
  --himmel-linie: #cde5f4;
  --weiss: #ffffff;
  --text: #151a20;
  --text-leise: #48525f;    /* 7,4:1 auf Weiss, 6,9:1 auf Papier */
  --linie: #dde4ec;
  --linie-stark: #c3cdd8;
  --linie-feld: #7a8594;    /* Formularraender, 3,7:1 auf Weiss */
  --fehler: #b3261e;
  --fehler-nebel: #fdeceb;
  --erfolg: #12603f;
  --fokus: var(--navy);

  /* Typografie */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 4vw, 5rem);
  --fs-h1: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0938rem);
  --fs-gross: clamp(1.1rem, 1rem + 0.45vw, 1.3125rem);
  --fs-ui: 0.9688rem;
  --fs-caption: 0.8438rem;

  --lh-display: 0.95;
  --lh-titel: 1.06;
  --lh-body: 1.6;

  /* Raster und Abstand */
  --spur: min(100% - 2rem, 1200px);
  --spur-schmal: min(100% - 2rem, 760px);
  --raum-sektion: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --raum-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --kopf-hoehe: 80px;
  --handleiste-hoehe: 4.75rem;

  /* Form */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --strich: 2px;
  --schatten-karte: 0 1px 2px rgba(16, 53, 95, 0.06), 0 12px 28px -20px rgba(16, 53, 95, 0.45);
  --schatten-hoch: 0 2px 6px rgba(16, 53, 95, 0.1), 0 26px 52px -28px rgba(16, 53, 95, 0.6);

  /* Motion */
  --dauer-schnell: 140ms;
  --dauer-normal: 240ms;
  --dauer-fahrt: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (max-width: 1023px) {
  :root { --kopf-hoehe: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer-schnell: 1ms;
    --dauer-normal: 1ms;
    --dauer-fahrt: 1ms;
  }
}