/* ==========================================================================
   HRM Systems AG — Startseite V6
   Gestaltung nach V1 (Livesite-Palette, Datenbild, viel Weissraum),
   Farben und Typografie nachgeschärft auf die Handbuchpalette, Arial.

   Handwerk nach den Design-System-Referenzen:
   - 8-px-Rastersystem und Mikro-Laufweiten bei kleinen Graden (Carbon/IBM)
   - geschichtete, markengetönte Schatten statt eines einzelnen Weichzeichners,
     mit der Grösse zunehmende negative Laufweite (Stripe)
   - Berührungsziele 44–48 px, sichtbarer Fokus, keine Bewegung gegen den
     Nutzerwunsch

   Grundlage: Referenzen/2026-10-06-cicd-webregeln.md
   ========================================================================== */

:root{
  /* Basisfarben (Handbuch) */
  --hrm-blau:#00A1E4;      /* primärer Markenakzent */
  --blau:#0095D0;          /* zugelassene Blaustufe, dunkelste Basisfarbe */
  --blau-hell:#5EC0EB;
  --blau-heller:#84CFF0;
  --blau-tint:#D4EFFA;
  --blau-flaeche:#F2FBFF;
  --grau:#78838A;          /* Linien, sekundäre Elemente */
  --grau-2:#898989;
  --dunkel:#484F54;        /* Text, dunkle Flächen */
  --grau-hell:#C4C4C4;
  --grau-flaeche:#E3E3E3;
  --orange:#F49700;        /* Ergänzungsfarbe: nur funktional und sparsam */
  --tinte:#111111;         /* Schwarz als Füll-/Linienfarbe laut Handbuch */
  --weiss:#fff;

  /* Raster: 8-px-Grundmass, 4 px für Mikroabstände */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px;

  --radius:14px;
  --radius-klein:10px;

  /* Schatten: zwei Lagen, in Marken-Dunkelgrau getönt */
  --schatten:0 24px 48px -32px rgba(72,79,84,.28), 0 8px 20px -12px rgba(72,79,84,.16);
  --schatten-hover:0 32px 60px -32px rgba(72,79,84,.34), 0 12px 26px -14px rgba(72,79,84,.2);
  --schatten-float:0 20px 40px -24px rgba(72,79,84,.3), 0 4px 12px -6px rgba(72,79,84,.14);

  --huelle:1200px;
  --luft:var(--s-8);
  --kopf-hoehe:80px;
  --font:Arial,Helvetica,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--dunkel);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Die Verweise dieses Entwurfs sind deaktiviert (kein href, damit nichts auf die
   Originalwebsite führt). Der Zeiger bleibt wie auf der fertigen Seite, damit die
   Vorschau unverändert wirkt. */
.nav a,.sprachen a,.textlink,.news__link,.fuss__spalte a{cursor:pointer}
ul{list-style:none}
::selection{background:var(--blau-tint);color:var(--dunkel)}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px;border-radius:4px}

.huelle{max-width:var(--huelle);margin:0 auto;padding:0 var(--s-4)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--weiss);color:var(--dunkel);padding:12px 20px;font-weight:700;
}
.skip:focus{left:var(--s-3);top:12px}

/* ---------- Entwurfshinweis ---------- */
.draft{
  background:var(--blau-tint);color:var(--dunkel);
  max-width:none;
  font-size:.8125rem;letter-spacing:.01em;text-align:center;
  padding:var(--s-2) var(--s-4);line-height:1.5;
}
.draft strong{color:var(--dunkel)}

/* ---------- Typografie ---------- */
h1,h2,h3{color:var(--dunkel);font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.024em}
h1 em{font-style:normal;color:var(--blau)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
h3{font-size:1.125rem;line-height:1.35;letter-spacing:-.006em}
p{max-width:72ch;text-wrap:pretty}

.vorlauf{font-size:1.125rem;line-height:1.55;max-width:62ch}
.augenbraue{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:.78125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dunkel);margin-bottom:var(--s-3);
}
.augenbraue::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:2px}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 30px;border-radius:999px;
  font-size:1rem;font-weight:700;line-height:1;
  border:2px solid transparent;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease;
}
.knopf--voll{background:var(--hrm-blau);color:var(--tinte)}
.knopf--voll:hover{background:var(--blau-heller);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(0,161,228,.55)}
.knopf--rand{border-color:var(--hrm-blau);color:var(--dunkel);background:var(--weiss)}
.knopf--rand:hover{background:var(--blau-flaeche);transform:translateY(-2px)}

.pfeil{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.knopf:hover .pfeil,.textlink:hover .pfeil,.news__link:hover .pfeil{transform:translateX(4px)}

.textlink{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:32px;font-weight:700;color:var(--dunkel);
  border-bottom:2px solid var(--hrm-blau);padding-bottom:3px;
  transition:border-color .2s ease;
}
.textlink:hover{border-bottom-color:var(--blau)}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--grau-flaeche);
  transition:box-shadow .25s ease;
}
.kopf.ist-gerollt{box-shadow:0 6px 24px -12px rgba(72,79,84,.28)}
.kopf__zeile{display:flex;align-items:center;gap:var(--s-4);height:var(--kopf-hoehe)}
.marke{flex:none;display:flex;align-items:center;min-height:44px}
.marke img{width:186px;height:auto}
.hauptnav{margin-left:auto}
.nav{display:flex;align-items:center;gap:var(--s-1)}
.nav>li{position:relative}
.nav>li>a{
  display:flex;align-items:center;gap:var(--s-1);
  min-height:48px;padding:0 var(--s-3);border-radius:var(--radius-klein);
  font-weight:600;color:var(--dunkel);
  transition:background-color .18s ease;
}
.nav>li>a:hover,.nav>li>a[aria-current]{background:var(--blau-tint);color:var(--dunkel)}
.nav>li>a[aria-current]{font-weight:700}
.nav__gruppe>a .pfeil{width:11px;height:11px}
.nav__gruppe:hover>a .pfeil{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + var(--s-1));left:0;min-width:248px;
  background:var(--weiss);border:1px solid var(--grau-flaeche);border-radius:var(--radius);
  box-shadow:var(--schatten-float);padding:var(--s-2);
  opacity:0;visibility:hidden;transform:translateY(var(--s-2));
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav__gruppe:hover .dropdown,.nav__gruppe:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:flex;align-items:center;min-height:44px;padding:0 var(--s-3);
  border-radius:var(--radius-klein);font-weight:400;transition:background-color .18s ease;
}
.dropdown a:hover{background:var(--blau-tint);color:var(--dunkel)}

.kopf__rechts{display:flex;align-items:center;gap:var(--s-3);flex:none}
.sprachen{display:flex;gap:2px;border:1px solid var(--grau-hell);border-radius:999px;padding:3px}
.sprachen a{
  display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:999px;
  font-size:.8125rem;font-weight:700;letter-spacing:.02em;color:var(--grau);
  transition:color .18s ease,background-color .18s ease;
}
.sprachen a[aria-current]{background:var(--dunkel);color:var(--weiss)}
.sprachen a:not([aria-current]):hover{color:var(--dunkel)}
.kopf__kontakt{padding:12px var(--s-4)}
.burger{display:none;width:48px;height:48px;border:1px solid var(--grau-hell);border-radius:var(--radius-klein);background:var(--weiss);cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--dunkel);margin:3px auto;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- Hero ---------- */
/* Das Original-Netz aus dem Foliensatz liegt im Hero-Hintergrund (wie in der
   V4-Fassung als `background-size:cover`, hier als eingebettetes SVG mit
   `preserveAspectRatio="xMidYMid slice"`). Es ist Zierde und nimmt keine Zeiger-
   ereignisse. Der ruhige Zustand ist das Original selbst — er gilt auch ohne
   JavaScript und bei „Bewegung reduzieren". Erlaubt der Browser Bewegung, legt
   startseite.js eine Canvas-Fläche darüber, die dieselbe Geometrie bewegt zeichnet
   (Klasse --netz-laeuft am Hero). Das Netz bleibt in beiden Fällen dasselbe. */
.hero{position:relative;padding:var(--s-8) 0;background:var(--weiss)}
.hero__raster{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5.5vw,80px);align-items:center}
.hero__netz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__netz--ruhig{display:block}
.hero__netz--lauf{display:none}
.hero--netz-laeuft .hero__netz--ruhig{display:none}
.hero--netz-laeuft .hero__netz--lauf{display:block}
.hero h1{margin-bottom:var(--s-4)}
.hero .vorlauf{margin-bottom:var(--s-3)}
.hero__zusatz{margin-bottom:var(--s-6);max-width:58ch}
.aktionen{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__bild{margin:0}
/* Die Originalgrafik «Wo HR Zeit spart» steht im Hero und wird in Bewegung
   aufgebaut (siehe startseite.js). Sie bleibt unverändert, nur die Pfade sind
   für die Animation benannt. */
.hero__grafik{width:100%;height:auto;display:block;overflow:visible}
/* «ZEIT» ist das Schlüsselwort: Es trägt die Ergänzungsfarbe und ist über seine
   eigene Matrix das grösste Wort der Grafik. Die CSS-Regel sticht die Füllung am
   Pfad (Präsentationsattribut) aus. */
.hrm-schrift-betonung{fill:var(--orange)}

/* ---------- Kennzahlen ---------- */
.zahlen{background:var(--blau-flaeche);border-top:1px solid var(--grau-flaeche);border-bottom:1px solid var(--grau-flaeche)}
.zahlen__raster{display:grid;grid-template-columns:repeat(4,1fr)}
.zahl{padding:var(--s-6) var(--s-5);text-align:center;transition:background-color .24s ease}
.zahl:hover{background:rgba(0,161,228,.07)}
.zahl + .zahl{border-left:1px solid var(--grau-flaeche)}
.zahl__wert{
  font-size:clamp(1.9rem,3.2vw,2.75rem);font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--blau);font-variant-numeric:tabular-nums;
  margin-bottom:var(--s-2);
  transition:color .24s ease,transform .24s ease;
}
.zahl:hover .zahl__wert{color:var(--dunkel);transform:translateY(-3px)}
.zahl__label{font-size:.9375rem;line-height:1.5;letter-spacing:.005em;max-width:24ch;margin-inline:auto}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:var(--luft) 0}
.abschnitt--flaeche{background:var(--blau-flaeche)}
.abschnitt__kopf{margin-bottom:var(--s-7)}
.abschnitt__kopf h2{margin-bottom:var(--s-3)}
.abschnitt__kopf--zeile{display:grid;grid-template-columns:1.6fr auto;gap:var(--s-6);align-items:end}
.abschnitt__kopf--zeile .textlink{margin-bottom:var(--s-1)}
section[id]{scroll-margin-top:calc(var(--kopf-hoehe) + var(--s-3))}

/* ---------- Vorteile ---------- */
.vorteile{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.vorteil{
  background:var(--weiss);border:1px solid var(--grau-flaeche);border-radius:var(--radius);
  padding:var(--s-5);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.vorteil:hover{transform:translateY(-2px);box-shadow:var(--schatten-hover);border-color:var(--blau-hell)}
.vorteil h3{margin-bottom:var(--s-2)}
.vorteil p{font-size:1rem;line-height:1.55}
.quadrat{display:block;width:16px;height:16px;background:var(--hrm-blau);border-radius:3px;margin-bottom:var(--s-4)}

/* ---------- Lösungen ---------- */
.loesungen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.loesung{
  display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--weiss);border:1px solid var(--grau-flaeche);border-radius:var(--radius);
  padding:var(--s-5);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.loesung:hover{transform:translateY(-2px);box-shadow:var(--schatten-hover);border-color:var(--blau-hell)}
/* Produktlogos: gleiche **sichtbare** Grösse. Gemessen wird die Tinte, nicht der
   Bildkasten — jede Datei hat unterschiedlich viel Luft um die Schrift. Zielhöhe
   der Tinte: 30 px; die Höhe je Datei ergibt sich daraus (Tinte/Kasten gemessen
   mit .qa/logomass.js):
     uka-logo.svg 82 % → 36,6 px · carema-logo.svg 68 % → 43,9 px
     uka-connect-logo.png 60 % → 49,6 px · suva-logo.svg 98 % → 30,7 px
   Der Kasten --marke-kasten ist für alle gleich hoch; der untere Abstand gleicht
   die unterschiedlichen Bildhöhen aus, damit Überschrift und Text in allen vier
   Karten auf derselben Linie liegen. Neue Logos: Datei hinzufügen, Tinte messen,
   Höhe ausrechnen — nicht einfach dieselbe Zahl setzen. */
.loesung{--marke-kasten:50px}
.loesung__marke{
  height:var(--marke-h,38px);width:auto;max-width:100%;
  object-fit:contain;object-position:left center;
  margin-bottom:calc(var(--s-2) + (var(--marke-kasten) - var(--marke-h,38px)));
}
.loesung__marke[src$="uka-logo.svg"]{--marke-h:36.6px}
.loesung__marke[src$="carema-logo.svg"]{--marke-h:43.9px}
.loesung__marke[src$="uka-connect-logo.png"]{--marke-h:49.6px}
.loesung__marke[src$="suva-logo.svg"]{--marke-h:30.7px}
.loesung h3{font-size:1.3125rem;line-height:1.25}
.loesung p{font-size:1rem;line-height:1.55}
.merkmale{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.merkmale li{
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dunkel);background:var(--blau-tint);border-radius:999px;padding:7px 13px;
}
.loesung .textlink{align-self:flex-start;margin-top:auto}

/* ---------- Unternehmen ---------- */
.unternehmen__raster{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,72px);align-items:center}
.unternehmen__bild{margin:0}
.unternehmen__bild img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--schatten)}
.unternehmen__text h2{margin-bottom:var(--s-4)}
.unternehmen__text .vorlauf{margin-bottom:var(--s-3)}
.unternehmen__text p{margin-bottom:var(--s-4)}

/* ---------- News ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.news__eintrag{display:flex}
.news__link{
  display:flex;flex-direction:column;width:100%;
  background:var(--weiss);border:1px solid var(--grau-flaeche);border-radius:var(--radius);
  overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.news__link:hover{transform:translateY(-2px);box-shadow:var(--schatten-hover);border-color:var(--blau-hell)}
/* Die Originalbilder sind quadratische Grafiken mit Text: nicht zuschneiden. */
.news__bild{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--blau-flaeche);padding:var(--s-3);border-bottom:1px solid var(--grau-flaeche)}
.news__marke{
  align-self:flex-start;margin:var(--s-4) var(--s-4) 0;
  font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dunkel);
}
.news__marke::before{content:"";display:inline-block;width:10px;height:10px;background:var(--orange);border-radius:2px;margin-right:var(--s-2)}
.news__link h3{padding:var(--s-2) var(--s-4) 0;font-size:1.125rem;line-height:1.35}
.news__weiter{
  display:inline-flex;align-items:center;gap:var(--s-2);margin:var(--s-4);
  font-size:.9375rem;font-weight:700;color:var(--dunkel);
  border-bottom:2px solid var(--hrm-blau);padding-bottom:2px;align-self:flex-start;
}

/* ---------- Stimmen ---------- */
.stimmen{position:relative}
.stimme{
  display:grid;grid-template-columns:minmax(0,220px) 1fr;
  column-gap:clamp(24px,4vw,56px);row-gap:var(--s-2);
  align-items:start;
  background:var(--blau-flaeche);border:1px solid var(--grau-flaeche);border-radius:var(--radius);
  padding:clamp(28px,3.4vw,44px);
}
.stimme[hidden]{display:none}
.stimme__bild{
  grid-column:1;grid-row:1;
  width:100%;height:auto;aspect-ratio:1/1;
  border-radius:var(--radius);object-fit:cover;background:var(--grau-flaeche);
}
/* Der Text steht neben dem Bild mittig zu dessen Höhe. */
.stimme blockquote{grid-column:2;grid-row:1;align-self:center}
.stimme blockquote p{
  font-size:clamp(1.125rem,2.1vw,1.5rem);line-height:1.45;letter-spacing:-.012em;
  max-width:48ch;margin-bottom:var(--s-4);
}
/* Name, Funktion und Arbeitgeber stehen dicht unter dem Bild, je auf eigener Zeile. */
.stimme figcaption{
  grid-column:1;grid-row:2;
  margin-top:0;display:flex;flex-direction:column;gap:2px;
}
.stimme figcaption strong{font-size:1rem;letter-spacing:-.004em}
.stimme figcaption span{font-size:.9375rem;line-height:1.45;letter-spacing:.005em}
.stimmen__nav{display:flex;gap:var(--s-1);margin-top:var(--s-5)}
.stimmen__nav button{
  width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;
  display:grid;place-items:center;border-radius:50%;
}
.stimmen__nav button::before{
  content:"";width:12px;height:12px;border-radius:50%;
  border:2px solid var(--grau-hell);background:var(--weiss);
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.stimmen__nav button[aria-selected="true"]::before{background:var(--blau);border-color:var(--blau);transform:scale(1.15)}

/* ---------- Fuss ---------- */
/* Fusszeile: helles Palettengrau statt Dunkelgrau (Dominiks Entscheid — die dunkle
   Fläche war zu schwer). Zwischen #484F54 und dem nächsten Handbuchgrau #78838A
   gibt es keine Zwischenstufe, und #78838A kann helle Schrift nicht mehr tragen
   (höchstens 4,2:1). Also heller Grund mit dunkler Schrift: #484F54 auf #C4C4C4
   ergibt 4,8:1 (AA). Nebeneffekt: die bisherigen bewussten Abweichungen im Fuss
   (schwarze Wortmarke 2,07:1, rotes Siegel 1,81:1) sind damit erledigt. */
/* Die Fusszeile soll flach bleiben (Dominik: «ca. halb so hoch»). Kurz gehalten
   wird sie über die Abstände: Aussenabstand, Reihenabstand und Zeilenabstände
   der Spalten. Der Satz über dem Adressblock ist auf Dominiks Wunsch entfallen. */
.fuss{background:var(--grau-hell);color:var(--dunkel);padding:var(--s-6) 0 var(--s-4)}
.fuss__oben{display:grid;grid-template-columns:1.5fr 1fr 1.1fr auto;gap:var(--s-6) 24px;padding-bottom:var(--s-5)}
.fuss__marke img{width:170px;height:auto;margin-bottom:var(--s-3)}
.fuss__marke p{font-size:.9375rem;line-height:1.6;margin-bottom:var(--s-3);max-width:38ch}
.fuss__spalte{display:flex;flex-direction:column;gap:6px}
.fuss__spalte h2{
  font-size:.78125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte);margin-bottom:2px;
}
.fuss__spalte a{font-size:.9375rem;color:var(--dunkel)}
.fuss__spalte a:hover{color:var(--tinte);text-decoration:underline}
/* Support-Hotline: auf hellem Grund trägt das Orange die Schrift nicht mehr
   (1,9:1). Der Akzent bleibt als Quadrat — dem Markenzeichen aus dem Handbuch —
   die Schrift selbst steht in Dunkelgrau und ist damit lesbar. */
.fuss__spalte a.fuss__hotline{color:var(--dunkel);font-weight:700}
.fuss__spalte a.fuss__hotline::before{
  content:"";display:inline-block;width:.5em;height:.5em;margin-right:.5em;
  vertical-align:.05em;background:var(--orange);
}
.fuss__zeiten{font-size:.9375rem;line-height:1.45;margin-top:2px;color:var(--dunkel)}
.fuss__spalte--siegel{align-items:flex-start}
/* Das offizielle rote Siegel steht direkt auf dem Grund — auf dem hellen Grau
   ohne Platte gut lesbar (vorher auf Dunkelgrau nur 1,81:1). */
.fuss__spalte--siegel img{width:220px;height:auto}
.fuss__unten{
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  border-top:1px solid rgba(31,26,23,.14);padding-top:var(--s-3);
  font-size:.875rem;letter-spacing:.005em;
}
.fuss__unten div{display:flex;gap:var(--s-4);flex-wrap:wrap}
.fuss__unten a:hover{color:var(--tinte);text-decoration:underline}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  :root{--luft:var(--s-7);--kopf-hoehe:76px}
  .hero__raster{grid-template-columns:1fr;gap:var(--s-6)}
  .hero__grafik{max-width:520px;margin-inline:auto}
  .vorteile{grid-template-columns:repeat(2,1fr)}
  .zahlen__raster{grid-template-columns:repeat(2,1fr)}
  .zahl:nth-child(odd){border-left:0}
  .zahl:nth-child(n+3){border-top:1px solid var(--grau-flaeche)}
  .abschnitt__kopf--zeile{grid-template-columns:1fr;gap:var(--s-4);align-items:start}
  .unternehmen__raster{grid-template-columns:1fr;gap:var(--s-6)}
  .news{grid-template-columns:repeat(2,1fr)}
  /* Bis hierher standen die vier Blöcke in zwei Reihen — das war der Hauptgrund
     für die Höhe. Sie stehen jetzt in einer Reihe; die Spalten dürfen dafür
     schmaler werden, das Siegel verkleinert sich mit. */
  .fuss__oben{grid-template-columns:minmax(170px,1.45fr) minmax(96px,1fr) minmax(124px,1.15fr) auto;gap:var(--s-5) var(--s-4)}
  .fuss__spalte--siegel img{width:150px}
}

/* ---------- Kopfzeile klappt ab Tabletbreite um (sonst Überlauf) ---------- */
@media (max-width:1023px){
  .burger{display:grid}
  .kopf__kontakt{display:none}
  .hauptnav{
    position:fixed;inset:var(--kopf-hoehe) 0 auto;max-height:calc(100vh - var(--kopf-hoehe));overflow-y:auto;
    background:var(--weiss);border-bottom:1px solid var(--grau-flaeche);
    padding:var(--s-3) var(--s-4) var(--s-5);display:none;box-shadow:var(--schatten);
  }
  .hauptnav.ist-offen{display:block}
  .nav{flex-direction:column;align-items:stretch;gap:var(--s-1)}
  .nav>li>a{padding:0 var(--s-3)}
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;margin:var(--s-1) 0 var(--s-2) var(--s-3);padding:0 0 0 var(--s-3);min-width:0;
  }
}

/* ---------- Mobil ---------- */
@media (max-width:767px){
  :root{--luft:var(--s-6);--kopf-hoehe:68px}
  body{font-size:1.03125rem}
  .huelle{padding:0 var(--s-3)}
  .marke img{width:136px}
  .sprachen{padding:2px}
  .sprachen a{min-height:30px;padding:0 var(--s-2);font-size:.78125rem}

  .hero{padding:var(--s-7) 0 var(--s-6)}
  .aktionen .knopf{width:100%}
  .zahlen__raster{grid-template-columns:1fr}
  .zahl{padding:var(--s-4) 0}
  .zahl + .zahl{border-left:0;border-top:1px solid var(--grau-flaeche)}
  .vorteile,.loesungen,.news{grid-template-columns:1fr;gap:var(--s-4)}
  .vorteil,.loesung{padding:var(--s-4)}
  .stimme{grid-template-columns:1fr;column-gap:0;row-gap:var(--s-2);padding:var(--s-4)}
  .stimme__bild{grid-column:1;grid-row:1;max-width:180px}
  .stimme figcaption{grid-column:1;grid-row:2;margin-top:0}
  .stimme blockquote{grid-column:1;grid-row:3;align-self:auto;margin-top:var(--s-3)}
  .fuss{padding-top:var(--s-5)}
}

/* ---------- Fusszeile auf Telefonbreite: zwei Spalten, kurze Reihen ---------- */
@media (max-width:640px){
  .fuss__oben{grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4);padding-bottom:var(--s-3)}
  .fuss__marke{grid-column:1/-1}
  .fuss__spalte--siegel{grid-column:1/-1}
  .fuss__spalte--siegel img{width:180px}
  .fuss__unten{gap:var(--s-2) var(--s-3)}
}