/* ==========================================================================
   MPU-ATLAS – Design System

   FESTE PALETTE MIT KLAREN ROLLEN. Jede Farbe hat genau eine Aufgabe:

     #14213D  Navy      – Überschriften und ein einzelner hervorgehobener
                          Abschnitt. NICHT für große Karten, ganze Leisten und
                          viele kleine Elemente gleichzeitig.
     #2563EB  Primär    – Buttons, Links, Symbole. Die einzige kräftige Farbe.
     #EFF6FF  Hellblau  – ausgewählte Flächen, sparsam.
     #F8FAFC  Grund     – Seitenhintergrund.
     #566173  Text      – Fließtext.
     #DDE3EA  Linie     – Rahmen und Trennlinien.
     #FFFFFF  Weiß      – Karten und Flächen.

   Mehr Blautöne als diese gibt es nicht. Die Skala --blue-* ist nur eine
   Abstufung derselben Primärfarbe für Tönungen und Hover-Zustände.
   ========================================================================== */

:root {
  /* ---- Markenfarben: eine zusammenhängende Welt aus Navy und Blau ------- */
  --navy:        #10234A;   /* dunkelster Grund, Fußbereich, Hero-Anfang */
  --navy-tief:   #173C78;   /* tiefes Blau, Hero-Ende, Abschluss */
  --primaer:     #2864E8;   /* Buttons, Links, aktive Zustände */
  --primaer-800: #1B4CC0;   /* Hover der Primärfarbe */
  --akzent-hell: #68A7FF;   /* helles Akzentblau – Symbole und Linien */
  /* Für kleine Schrift auf dunklem Grund eine Stufe heller: #68A7FF erreicht
     dort nur 4,4:1, diese Stufe 5,6:1. */
  --akzent-text: #8DBEFF;
  --flaeche-hell:#F5F7FB;   /* warmer heller Flächenton */
  --weiss:       #FFFFFF;
  /* Sehr zurückhaltender warmer Akzent – ausschließlich für kleine
     Vertrauenselemente, nie für Flächen oder Buttons. */
  --warm:        #F2B84B;

  /* ---- Schrift --------------------------------------------------------- */
  --ink:        #10234A;   /* Überschriften – dasselbe Navy */
  --text:       #4C5A70;   /* Fließtext auf hellem Grund */
  /* Eine Spur dunkler als zuvor: Auf der hellblauen Fläche lag der frühere
     Wert bei 4,33:1 und damit unter der Schwelle. Jetzt 5,0:1. */
  --text-muted: #5C6879;
  --auf-dunkel:       #FFFFFF;
  --auf-dunkel-leise: #C5D3EA;

  /* ---- Flächen und Linien ---------------------------------------------- */
  --bg:            #FFFFFF;
  --bg-soft:       #F5F7FB;
  --bg-blau:       #EAF1FE;   /* helle blaue Fläche für Akzentkarten */
  --border:        #DFE6F0;
  --border-stark:  #C3D0E2;
  --border-dunkel: rgba(255, 255, 255, .16);

  /* ---- Raster und Abstände --------------------------------------------- */
  --container: 1280px;
  --container-pad: clamp(20px, 4vw, 48px);
  --header-h: 74px;

  --luft-xs: 8px;
  --luft-s:  16px;
  --luft-m:  24px;
  --luft-l:  40px;
  --luft-xl: clamp(56px, 6vw, 88px);
  --abschnitt: clamp(64px, 7.5vw, 112px);

  /* ---- Radien: genau drei ---------------------------------------------- */
  --radius-s: 10px;   /* Chips, kleine Symbolflächen */
  --radius-m: 14px;   /* Buttons, Eingabefelder */
  --radius-l: 20px;   /* Karten und Flächen */

  /* ---- Schatten: dezent ------------------------------------------------- */
  --schatten-s: 0 1px 2px rgba(16, 35, 74, .05);
  --schatten-m: 0 2px 4px rgba(16, 35, 74, .04), 0 10px 24px rgba(16, 35, 74, .06);
  --schatten-l: 0 4px 10px rgba(16, 35, 74, .06), 0 24px 48px rgba(16, 35, 74, .10);

  /* ---- Atmosphäre des dunklen Grundes ---------------------------------- */
  --flaeche-tief:
    radial-gradient(900px 520px at 78% 8%, rgba(104, 167, 255, .20) 0%, rgba(104, 167, 255, 0) 62%),
    radial-gradient(760px 460px at 8% 92%, rgba(40, 100, 232, .22) 0%, rgba(40, 100, 232, 0) 60%),
    linear-gradient(158deg, var(--navy) 0%, #14305F 46%, var(--navy-tief) 100%);
  --flaeche-blau: var(--primaer);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Altnamen, damit bestehende Regeln weiterlaufen */
  --blue-50:  #EAF1FE;
  --blue-100: #D5E3FD;
  --blue-200: #ADC9FA;
  --blue-300: #68A7FF;
  --blue-400: #4B85F2;
  --blue-500: #2864E8;
  --blue-600: #2864E8;
  --blue-700: #1B4CC0;
  --blue-800: #173C78;
  --blue-900: #10234A;
  --blue-950: #0B1A38;
  --bg-grey: #EAF1FE;
  --border-strong: #C3D0E2;
  --on-dark: #FFFFFF;
  --on-dark-muted: #C5D3EA;
  --on-dark-faint: rgba(255,255,255,.16);
  --radius-sm: var(--radius-s);
  --radius: var(--radius-m);
  --radius-lg: var(--radius-l);
  --radius-xl: var(--radius-l);
  --radius-btn: var(--radius-m);
  --shadow-sm: var(--schatten-s);
  --shadow: var(--schatten-m);
  --shadow-lg: var(--schatten-l);
  --shadow-blue: none;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* Nicht --blue-500: das Logo-Hellblau erreicht auf Weiß nur 3,8:1. */
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-800); }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -0.035em; }
h3 { font-size: 1.24rem; letter-spacing: -0.02em; line-height: 1.32; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Sichtbarer Fokus auf hellem wie dunklem Grund. */
:focus-visible { outline: 3px solid var(--primaer); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .band :focus-visible, .cta :focus-visible, .footer :focus-visible {
  outline-color: var(--akzent-hell);
}

/* EIN Container für alles. Kopfzeile, Kopfbereich und jeder Abschnitt teilen
   sich dieselben Ausrichtungslinien – nichts klebt am Fensterrand. */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--container-pad);
}

/* Abschnittsrhythmus: hell – weiß – dunkel – hell. Der Wechsel erzeugt Tiefe,
   ohne dass Farbe beliebig wird. */
.section { padding: var(--abschnitt) 0; }
.section--soft, .section--hell { background: var(--bg-soft); }
.section--weiss { background: var(--weiss); }

/* ==========================================================================
   Hintergrundmotive der Abschnitte

   Die Startseite trägt oben die Berliner Silhouette. Alle übrigen Bereiche
   bekommen ruhigere Motive aus derselben Familie: feine Linien, kein Bild,
   keine Fotos, keine Lizenzfragen. Jedes Motiv liegt hinter dem Inhalt
   (z-index: -1) und ist reine Textur – es darf nie mit dem Text konkurrieren.
   ========================================================================== */


/* Ablauf: die vier Schritte hängen an einer gestrichelten Weglinie.
   Sie liegt hinter den Karten und ist deshalb nur in den Zwischenräumen zu
   sehen – genau das erzeugt den Eindruck einer durchgehenden Route. */
.section--weg { position: relative; isolation: isolate; overflow: hidden; }
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; z-index: 0;
  left: 8%; right: 8%;
  /* 32 px Innenabstand der Karte plus halbe Höhe der Nummer (24 px). */
  top: 56px;
  border-top: 2px dashed var(--blue-300);
}
.steps .step { z-index: 1; }



/* Eingefasste blaue Fläche statt randlosem Band.

   Vorher lief der Vorteile-Bereich über die volle Bildschirmbreite. Zusammen
   mit Kopfbereich, Abschluss und Fußbereich bestand die Seite dadurch
   überwiegend aus Blau. Als eingefasste Fläche bleibt der ruhige Ankerpunkt
   in der Seitenmitte erhalten, die blaue Fläche schrumpft aber auf etwa ein
   Drittel. */
.section--band { background: var(--bg-soft); }
.band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--flaeche-tief);
  color: var(--on-dark-muted);
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 64px);
}
.band h1, .band h2, .band h3, .band strong { color: var(--on-dark); }
.band a { color: #fff; }

.section-head { max-width: 760px; margin: 0 0 clamp(36px, 4.5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 0; }
.band .section-head p { color: var(--on-dark-muted); }

.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 16px;
}
/* Nicht --blue-200: das wäre auf der Fläche ein dritter sichtbarer Blauton.
   Dieselbe Tönung wie der übrige Nebentext auf Dunkelblau. */
.band .eyebrow { color: var(--akzent-text); }
.hero .eyebrow { color: var(--blue-600); }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--blue-800); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-sm); transition: top .2s;
}
.skip-link:focus { top: 16px; color: #fff; }

/* ==========================================================================
   Buttons – eine Behandlung, überall gleich
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600;
  text-align: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease, filter .18s ease;
}
.btn svg { flex: none; }

/* Buttons heben beim Überfahren deutlich ab: Sie steigen zwei Pixel an, der
   Schatten wächst spürbar und die Farbe wechselt sichtbar – nicht nur eine
   Spur heller. Beim Drücken sinken sie wieder ein, damit der Klick sich
   bestätigt anfühlt. */
.btn--primary { background: var(--flaeche-blau); color: #fff; }
/* Beim Überfahren wird der Button tiefer und hebt sich leicht an. Ohne großen
   Schatten – die Seite soll ruhig bleiben. */
.btn--primary:hover {
  color: #fff; background: var(--blue-700);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}

.btn--secondary { background: #fff; color: var(--ink); border-color: var(--border); }
.btn--secondary:hover { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700); }

/* Auf dunklem Grund */
.btn--light { background: #fff; color: var(--blue-700); }
.btn--light:hover { background: var(--blue-50); color: var(--blue-700); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

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

/* Ruhiger Textlink statt zweitem Button. */
.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue-600); font-weight: 600; font-size: 1rem;
  padding: 8px 2px;
}
.textlink:hover { color: var(--blue-700); }
/* Auf dunklem Grund. */
.textlink--hell { color: var(--akzent-hell); }
.textlink--hell:hover { color: #ffffff; }
.textlink svg { transition: transform .18s ease; }
.textlink:hover svg { transform: translateX(4px); }

/* 44 px ist die Mindestgröße für ein Bedienelement – auch im Kopfbereich. */
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .93rem; }

/* Die Telefonnummer ist ein ruhiger Textlink, kein zweiter Button – sonst
   konkurrieren zwei gleich starke Handlungen miteinander. */
/* Nur das Symbol, ohne Nummer: Der Kopf wirkt dadurch ruhiger, und das Logo
   bekommt Platz. Die Nummer steht weiterhin im Fußbereich, auf der
   Kontaktseite und im aufgeklappten Mobilmenü. Der Name für Screenreader
   steckt in `.screen-reader-text`. */
.header__tel {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  color: var(--primaer);
  border: 1px solid var(--border);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.header__tel .btn__label { display: none; }
.header__tel:hover { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-700); }
.header__tel svg { width: 19px; height: 19px; }
.btn__short { display: none; }
.header .btn { white-space: nowrap; }
.btn-row .btn { padding-block: 13px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */
/* Sticky, weil die Seite lang ist und der Weg zum Erstgespräch jederzeit
   erreichbar bleiben soll. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
/* Kein eigenes max-width: Die Kopfzeile nutzt denselben Container wie alle
   Abschnitte, damit Logo und Hero auf derselben Linie beginnen. */
.header__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: var(--header-h); }
/* Das Logo selbst bleibt unverändert – nur Größe und Abstand sind gesetzt.
   Auf dem Smartphone bleibt es kleiner, damit der Kopf nicht gequetscht wirkt;
   die größeren Werte gelten erst ab 768 px. */
.brand { min-height: 48px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; flex: none; }
.brand img { width: 42px; height: 42px; }
.brand__name {
  position: relative;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em;
  color: var(--ink); line-height: 1.15; white-space: nowrap;
}

@media (min-width: 768px) {
  .brand { gap: 14px; min-height: 54px; }
  .brand img { width: 54px; height: 54px; }
  .brand__name { font-size: 1.3rem; }
  .brand__name span { font-size: .58rem; letter-spacing: .06em; top: calc(100% + 3px); }
  /* Auf :root, nicht auf .header – sonst rechnen Sprungmarken und der
     Kopfbereich weiter mit der alten Höhe. */
  :root { --header-h: 84px; }
}
/* Die Unterzeile hängt absolut unter dem Schriftzug. Dadurch bestimmt allein
   „MPU-ATLAS“ die Höhe des Flex-Elements – der Schriftzug steht damit genau
   auf der Mittelachse des Logosymbols und wird nicht nach oben gedrückt. */
.brand__name span {
  position: absolute; top: calc(100% + 2px); left: 0;
  font-size: .5rem; font-weight: 600; letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text-muted);          /* ruhiges Graublau */
  white-space: nowrap;     /* immer einzeilig */
  line-height: 1.2;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  padding: 8px 10px; border-radius: 999px;
  color: var(--ink); font-weight: 500; font-size: .9rem; white-space: nowrap;
}
.nav a:hover { background: var(--blue-50); color: var(--blue-600); }
.nav a[aria-current="page"],
.nav a.ist-sichtbar { color: var(--blue-600); font-weight: 600; background: var(--blue-50); }

.header__actions { display: flex; align-items: center; gap: 10px; }

/* Das Menüsymbol.

   Auf der Live-Seite waren die drei Striche unsichtbar: Astra färbt
   `button`-Elemente selbst ein, und `stroke="currentColor"` übernahm die
   fremde Farbe. Deshalb steht die Strichfarbe hier ausdrücklich am SVG und
   die Regeln greifen über `.header` genauer als die des Eltern-Themes. */
.burger {
  display: none; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--border-stark);
  border-radius: 999px; cursor: pointer; color: var(--ink);
  padding: 0;
}
.header .burger { background: #fff; color: var(--ink); }
.header .burger svg { stroke: var(--ink); fill: none; display: block; }
.header .burger:hover { background: var(--blue-50); border-color: var(--blue-200); }
.header .burger:hover svg { stroke: var(--primaer); }

/* Aus demselben Grund auch beim Telefonsymbol. */
.header .header__tel svg { stroke: currentColor; fill: none; }

.mobile-nav { display: none; border-top: 1px solid var(--border); background: #fff; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 12px 0; }
.mobile-nav a {
  display: block; padding: 14px 4px; font-size: 1.05rem; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--border);
}
.mobile-nav li:last-child a { border-bottom: 0; }
.mobile-nav__actions { display: grid; gap: 10px; padding: 8px 0 20px; }

/* ==========================================================================
   Hero – vollständig um eine Mittelachse aufgebaut

   Drei Zonen: oben Text und Handlung, in der Mitte die Route, unten die
   Skyline. Alles teilt dieselbe Mittelachse; es gibt keine linke und rechte
   Spalte mehr, die miteinander konkurrieren könnten.
   ========================================================================== */
/* ==========================================================================
   Kopfbereich

   Atmosphärischer dunkler Grund: Navy nach tiefem Blau, dazu zwei weiche
   Lichtflächen. Links die Aussage, rechts die Prozesskarte als leicht
   durchscheinende Ebene darauf. Unten schließt die Vertrauensleiste an.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--flaeche-tief);
  color: var(--auf-dunkel-leise);
  padding-top: clamp(48px, 5.5vw, 84px);
  padding-bottom: 0;
}

/* Eine ruhige geometrische Form im Hintergrund – kein Muster, nur Tiefe. */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -12%; top: -22%; width: min(760px, 62vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 167, 255, .16) 0%, rgba(104, 167, 255, 0) 68%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 76px);
  padding-bottom: clamp(44px, 5vw, 72px);
}

.hero .eyebrow { color: var(--akzent-text); margin-bottom: 16px; }

.hero h1 {
  color: var(--auf-dunkel);
  font-size: clamp(2rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.13;
  letter-spacing: -0.028em;
  margin-bottom: 20px;
}

.hero__lead {
  font-size: clamp(1.03rem, .97rem + .32vw, 1.19rem);
  line-height: 1.62;
  color: var(--auf-dunkel-leise);
  max-width: 46ch;
  margin: 0 0 clamp(26px, 2.6vw, 34px);
}

.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero__hinweis {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--auf-dunkel-leise); margin: 14px 0 0;
}
.hero__hinweis svg { color: var(--akzent-hell); flex: none; }

/* Prozesskarte: durchscheinende Ebene auf dem dunklen Grund, mit feiner
   Trennlinie und einer senkrechten Zeitleiste. */
.hero-karte {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-l);
  padding: clamp(24px, 2.4vw, 34px);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--schatten-l);
}
.hero-karte__titel {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.08rem; font-weight: 700; color: var(--auf-dunkel);
  margin: 0 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  letter-spacing: -0.01em; line-height: 1.3;
}
.hero-karte__titel svg { color: var(--akzent-hell); flex: none; }

.route-liste {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px);
}
.route-liste li {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 14px;
}
/* Zeitleiste: verbindet die Schritte, läuft aber nicht über Anfang und Ende
   hinaus. */
.route-liste li + li::before {
  content: ""; position: absolute; left: 16.5px; bottom: 100%;
  height: clamp(16px, 1.6vw, 22px);
  border-left: 1px dashed rgba(255, 255, 255, .34);
}
.route-liste__punkt {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(104, 167, 255, .18);
  border: 1px solid rgba(104, 167, 255, .5);
  color: var(--akzent-text);
  font-size: .86rem; font-weight: 700;
  display: grid; place-items: center;
}
.route-liste__name { font-size: 1rem; line-height: 1.35; color: var(--auf-dunkel); font-weight: 500; }

/* Vertrauensleiste – im unteren Teil des Kopfbereichs, nicht als eigene
   Farbfläche, sondern durch eine feine Linie abgesetzt. */
.hero__vertrauen {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: clamp(20px, 2.2vw, 28px) 0 clamp(24px, 2.6vw, 34px);
}
.hero__vertrauen ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px clamp(18px, 2.4vw, 36px);
}
.hero__vertrauen li {
  display: flex; align-items: center; gap: 10px;
  font-size: .93rem; font-weight: 500; color: var(--auf-dunkel);
}
.hero__vertrauen svg { color: var(--akzent-hell); flex: none; }

/* ==========================================================================
   Karten
   ========================================================================== */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--blue-200); box-shadow: var(--shadow); transform: translateY(-4px); }
.card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--blue-50); color: var(--blue-600);
  border: 1px solid var(--blue-100);
  display: grid; place-items: center; margin-bottom: 22px;
}

/* Je Schwerpunkt eine eigene Symbolfarbe. Eingefärbt sind ausschließlich das
   Symbol und seine Fläche – Überschriften, Rahmen und Buttons bleiben blau. */
.card__icon--gold    { color: #B67A18; background: #FDF4E4; border-color: #F2DFBC; }
.card__icon--violett { color: #6247BE; background: #F2EFFC; border-color: #DCD4F6; }
.card__icon--blau    { color: #1F63D6; background: #EAF3FD; border-color: #CBE1F8; }
.card__icon--korall  { color: #BF4F4F; background: #FCEFEF; border-color: #F5D8D8; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .97rem; color: var(--text-muted); }
.card__link {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .96rem;
}
.card__link svg { transition: transform .18s ease; }
.card__link:hover svg { transform: translateX(4px); }

/* Ablauf */
.step {
  position: relative; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.step__num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--flaeche-blau); color: #fff;
  font-weight: 700; font-size: 1.08rem;
  box-shadow: var(--shadow-blue);
  margin-bottom: 20px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: .95rem; color: var(--text-muted); }

/* ==========================================================================
   Vorteile – auf blauem Band
   ========================================================================== */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.benefits li {
  display: flex; gap: 15px; align-items: flex-start;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.benefits svg { flex: none; margin-top: 4px; color: var(--blue-200); }
.benefits strong { display: block; color: #fff; margin-bottom: 4px; }
.benefits span { font-size: .95rem; color: var(--on-dark-muted); }

.disclaimer {
  margin-top: 32px; padding: 18px 20px;
  background: rgba(255,255,255,.07); border-left: 3px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--on-dark-muted);
}
.section:not(.section--band) .disclaimer {
  background: var(--bg-grey); border-left-color: var(--border-strong); color: var(--text-muted);
}

/* ==========================================================================
   Vertrauen / Bewertungen

   ZURZEIT NICHT IM EINSATZ. Der zugehörige Abschnitt wurde aus der Startseite
   entfernt, weil noch keine echten Bewertungen vorliegen. Das Stylesheet
   bleibt stehen: Sobald Google-Bewertungen da sind, genügt es, den Abschnitt
   in front-page.php wieder einzusetzen.
   ========================================================================== */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proof__item {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-sm); text-align: center;
}
.proof__zahl {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 800;
  color: var(--blue-600); letter-spacing: -0.04em; line-height: 1; margin-bottom: 10px;
}
.proof__item p { font-size: .96rem; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 840px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq details[open] { border-color: var(--blue-200); box-shadow: var(--shadow); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 26px; cursor: pointer;
  font-weight: 600; color: var(--ink); font-size: 1.04rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bg-soft); }
.faq summary::after {
  content: ""; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230170b9' stroke-width='2' stroke-linecap='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") center no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__body { padding: 0 26px 24px; font-size: .99rem; color: var(--text-muted); }

/* ==========================================================================
   Abschluss – gleiche Fläche wie Hero und Fußbereich
   ========================================================================== */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  /* Eigener Verlauf statt --flaeche-tief: Der Abschluss liegt direkt über dem
     dunklen Fußbereich. Liefe er wie die übrigen Flächen nach unten hell aus,
     entstünde dort eine harte Kante. Er wird deshalb zur Unterkante hin wieder
     dunkler und geht ohne Bruch in den Fußbereich über. */
  background: var(--flaeche-tief);
  text-align: center;
  padding: var(--abschnitt) 0;
}

.cta h2 { color: var(--auf-dunkel); max-width: 20ch; margin-inline: auto; }
.cta p { color: var(--auf-dunkel-leise); max-width: 54ch; margin: 0 auto 32px; font-size: 1.08rem; }
.cta .btn-row { justify-content: center; }

/* ==========================================================================
   Fußbereich – dieselbe Familie, nur tiefer
   ========================================================================== */
/* Der Fußbereich ist der tiefste Punkt der Seite – ein Ton unter dem
   Abschluss, getrennt durch eine Haarlinie. */
.footer {
  background: var(--navy); color: rgba(255, 255, 255, .78);
  font-size: .95rem; border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px); padding: clamp(48px, 5.5vw, 72px) 0 40px;
}
/* h2, nicht h3: Der Fußbereich ist ein eigener Bereich der Seite. Nach einer
   H1 direkt eine H3 zu setzen wäre ein Sprung in der Gliederung. */
.footer h2 { color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 18px; }
.footer a { color: rgba(255,255,255,.78); }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer__brand img { width: 42px; height: 42px; }
.footer__brand strong { color: #fff; font-size: 1.08rem; letter-spacing: -0.02em; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.footer__link-button {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: none;
}
.footer__link-button:hover { color: #fff; text-decoration: underline; }
.legal .footer__link-button { color: var(--blue-600); text-decoration: underline; }
.legal .footer__link-button:hover { color: var(--blue-800); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; }

/* ==========================================================================
   Astra-Reset – das Parent-Theme darf unser Layout nicht überschreiben
   ========================================================================== */
.ast-container, .site-content .ast-container { max-width: none; padding: 0; display: block; }
#primary, .site-main, .content-area { margin: 0; padding: 0; width: 100%; float: none; }
.ast-separate-container #primary { padding: 0; }
.entry-content > :first-child { margin-top: 0; }
.ast-page-builder-template .site-content > .ast-container { max-width: none; }
body.mpu-page .ast-above-header, body.mpu-page .ast-below-header { display: none; }

/* ==========================================================================
   Unterseiten-Kopf
   ========================================================================== */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: clamp(44px, 5vw, 72px) 0 clamp(48px, 5.5vw, 80px);
}
/* Auf den Unterseiten deutlich ruhiger als auf der Startseite: „Impressum"
   und „Datenschutzerklärung" sind Wegweiser, keine Werbeaussagen. */
.page-hero h1 {
  color: var(--ink); margin-bottom: 14px;
  font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem);
  letter-spacing: -0.028em; line-height: 1.12;
}
.page-hero__inner { max-width: 820px; }
.page-hero p { font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem); color: var(--text); margin-bottom: 0; }
.page-hero .btn-row { margin-top: 32px; }

.breadcrumb { font-size: .88rem; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blue-600); }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Fließtext
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; font-size: 1.14rem; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--blue-600); }

.with-toc { display: grid; grid-template-columns: 260px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.toc {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-sm); font-size: .93rem;
}
.toc h2 { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.toc a { color: var(--text); }
.toc a:hover { color: var(--blue-600); }

.info-card {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius); padding: 24px 26px; margin: 28px 0;
}
.info-card h3 { margin-top: 0; font-size: 1.08rem; }
.info-card p:last-child { margin-bottom: 0; }

.note {
  background: var(--bg-grey); border-radius: var(--radius-sm);
  padding: 15px 17px; font-size: .92rem; color: var(--text-muted); margin: 22px 0;
}

/* ==========================================================================
   Kontaktseite
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 52px); align-items: start; }

.form-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow-lg);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .94rem; color: var(--ink); }
.field .req { color: #C0392B; }
.field .hint { font-size: .85rem; color: var(--text-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: #fff; border: 1.5px solid var(--border-strong); border-radius: 12px;
  padding: 13px 15px; min-height: 52px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%230170b9' stroke-width='2' stroke-linecap='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100);
}
.field .error { color: #C0392B; font-size: .87rem; display: none; }
.field.has-error .error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C0392B; }

.consent { display: flex; gap: 13px; align-items: flex-start; font-size: .93rem; }
.consent input { width: 21px; height: 21px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--blue-600); }

.form-foot { margin-top: 24px; }
.form-foot .hint { display: block; margin-top: 13px; font-size: .9rem; color: var(--text-muted); text-align: center; }

.form-success {
  display: none; background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; font-weight: 500;
}
.form-success.is-visible { display: block; }

.contact-facts { display: grid; gap: 14px; }
.fact {
  display: flex; gap: 15px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.fact svg { flex: none; margin-top: 4px; color: var(--blue-600); }
.fact strong { display: block; color: var(--ink); font-size: .94rem; margin-bottom: 3px; }
.fact span, .fact a { font-size: .97rem; }

.map-consent {
  position: relative; margin-top: 24px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-grey);
  min-height: 260px; display: grid; place-items: center; text-align: center; padding: 34px 26px;
}
.map-consent__inner { max-width: 40ch; }
.map-consent p { font-size: .93rem; color: var(--text-muted); }
.map-consent iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.legal { max-width: 70ch; }
.legal h2 { font-size: 1.5rem; margin-top: 2em; padding-top: 1.4em; border-top: 1px solid var(--border); }
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.08rem; margin-top: 1.6em; }
.legal p, .legal li { font-size: .99rem; }
.legal ul { padding-left: 1.3em; }
.legal address { font-style: normal; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 9px 22px; margin: 0 0 1.2em; }
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0; }

/* ==========================================================================
   Cookie-Banner
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  max-width: 520px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 26px; display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner h2 { font-size: 1.15rem; margin-bottom: 10px; }
.cookie-banner p { font-size: .93rem; color: var(--text-muted); margin-bottom: 20px; }
.cookie-banner .btn-row { gap: 10px; }
.cookie-banner .btn { flex: 1 1 auto; }
.cookie-options { display: grid; gap: 13px; margin-bottom: 20px; }
.cookie-options label { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
.cookie-options input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--blue-600); }
.cookie-options input:disabled { opacity: .55; }
.cookie-details { display: none; }
.cookie-details.is-visible { display: grid; }

body { padding-bottom: env(safe-area-inset-bottom); }
.ht-ctc-chat { z-index: 90 !important; }
.gtranslate_wrapper { z-index: 90 !important; }

/* ==========================================================================
   404
   ========================================================================== */
.error-404 { text-align: center; padding: clamp(72px, 9vw, 128px) 0; }
.error-404 .code {
  /* Nicht --blue-100: Die Zahl trägt Bedeutung und lag dort bei 1,3:1.
     Diese Stufe erreicht 3,4:1, die Schwelle für große Schrift. */
  font-size: clamp(4rem, 9vw, 7rem); font-weight: 800; color: #7FA8EE;
  line-height: 1; margin-bottom: 10px; letter-spacing: -0.05em;
}
.error-404 .btn-row { justify-content: center; margin-top: 30px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Zwischen 1024 und 1199 px trägt der Kopfbereich-Button die Kurzfassung.
   Gemessen: Mit der langen Beschriftung braucht die Kopfzeile bei 1024 px
   1057 px und läuft über; mit der kurzen sind es 963 px. */
@media (max-width: 1199px) {
  .btn--cta .btn__label { display: none; }
  .btn--cta .btn__short { display: inline; }
}

/* Unterhalb dieser Breite wird die Navigation durch das Hamburger-Menü
   ersetzt. Der Wert konnte von 1200 auf 1024 sinken, weil die Telefonnummer
   jetzt ein Textlink ist und nur noch ein Button in der Kopfzeile steht. */
@media (max-width: 1023px) {
  /* Kopfbereich einspaltig: zuerst Text und Handlung, danach die Karte. */
  .hero__grid { grid-template-columns: 1fr; gap: clamp(28px, 3.6vw, 40px); }
  .hero__lead { max-width: 58ch; }
  .hero-karte { max-width: 34rem; }
  .hero__vertrauen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { display: none; }
  .burger { display: inline-flex; }
}

/* Zwischen 1200 und 1399 px wird es im Header knapp. Dort trägt der
   Erstgespräch-Button das kurze Label, damit die Navigation Platz behält. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .btn--cta .btn__label { display: none; }
  .btn--cta .btn__short { display: inline; }
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* Zweizeilig oder gestapelt ergibt eine waagerechte Weglinie keinen Sinn –
     sie liefe quer durch die zweite Reihe. */
  .steps::before { display: none; }
  .with-toc { grid-template-columns: 1fr; }
  .toc { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .hero__vertrauen ul { grid-template-columns: 1fr; gap: 12px; }
  .hero__aktionen { width: 100%; }
  .hero__aktionen .btn { width: 100%; }
  body { font-size: 16px; }

  /* Auf dem Smartphone waren die Buttons zu wuchtig: 54 px hoch, 16 px
     Schrift und 28 px seitlicher Innenabstand ließen die lange Beschriftung
     zweizeilig umbrechen – der Button wurde dadurch über 100 px hoch und
     wirkte wie ein weißer Block. Kleiner gesetzt, aber weiterhin über der
     Mindestgröße von 44 px für Bedienelemente. */
  .btn { min-height: 50px; font-size: .95rem; padding-inline: 20px; }
  .btn-row { gap: 10px; }
  /* Nebeneinander, solange sie nebeneinander passen – gemessen brauchen die
     beiden Kopfbereich-Buttons zusammen 529 px. Erst darunter volle Breite. */
  .btn-row .btn { width: auto; }
  /* Die Chips stehen untereinander, sonst brechen sie unruhig um. */
  .hero__chips { flex-direction: column; align-items: flex-start; }
  .hero__chips li { width: 100%; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .legal dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal dd { margin-bottom: 11px; }
  .header__actions .btn--ghost .btn__label { display: none; }
  .header__actions .btn--ghost { padding-inline: 14px; }
  .header__actions { gap: 8px; }
  .brand__name { font-size: .95rem; }
  /* Die Unterzeile bleibt auch auf dem Smartphone stehen – sie ist Teil der
     Marke. Gemessen passt sie selbst bei 320 px noch in den Header. */
  .btn--cta .btn__label { display: none; }
  .btn--cta .btn__short { display: inline; }
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 22px; }
  .cookie-banner .btn-row .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

/* Sehr kleine Displays (iPhone SE und ähnlich): der Kopfbereich wird knapp
   verdichtet, damit die Stadt auch dort ohne Scrollen im Bild liegt. */
@media (max-width: 400px) {
  .hero { padding-top: 18px; }
  .hero h1 { font-size: 1.62rem; margin-bottom: 12px; }
  .hero__lead { font-size: .96rem; margin-bottom: 18px; }
  .hero .btn { min-height: 48px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero__aktionen { margin-bottom: 20px; }
  .hero-karte { padding: 20px; }
  .route-liste__name { font-size: .94rem; }
}

/* Auf sehr schmalen Displays bleibt im Header nur Telefon und Menü.
   Das Erstgespräch steht im mobilen Menü und direkt darunter im Hero. */
@media (max-width: 560px) {
  /* Hier passen die beiden Buttons nicht mehr nebeneinander (sie brauchen
     zusammen 526 px). Untereinander und über die volle Breite ist dann
     ruhiger als ein ausgefranster Umbruch. */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

@media (max-width: 480px) {
  /* Unter 480 px passt „Kostenloses Erstgespräch vereinbaren" auch verkleinert
     nicht mehr in eine Zeile. Alle Buttons mit hinterlegter Kurzfassung
     schalten deshalb hier um – gemessen, nicht geschätzt. */
  .btn__label { display: none; }
  .btn__short { display: inline; }
  .btn { min-height: 48px; font-size: .92rem; padding-inline: 16px; }

  .header__actions .btn--cta { display: none; }
  .header__inner { gap: 10px; }
  .hero h1 { font-size: 1.9rem; }
}

/* Ab hier wird es wirklich eng (kleine Android-Geräte, 320 px) */
@media (max-width: 360px) {
  /* Gemessen: die einzeilige Unterzeile würde hier den Telefon-Button
     überlappen. Sie entfällt deshalb nur auf diesen sehr schmalen Geräten;
     der Schriftzug „MPU-ATLAS“ bleibt selbstverständlich stehen. */
  .brand__name span { display: none; }
}

@media (max-width: 340px) {
  .container { padding-inline: 16px; }
  .brand img { width: 38px; height: 38px; }
  .brand__name { font-size: .88rem; }
  .hero h1 { font-size: 1.6rem; }
  .card, .step, .form-card { padding-inline: 20px; }
  .faq summary { padding-inline: 18px; }
  .faq__body { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .header, .footer, .cookie-banner, .skip-link, .btn { display: none !important; }
  body { font-size: 12pt; }
}