/* ==========================================================================
   HANSE GUTACHTEN - Design System
   Stil: "Trust & Authority" · Farben aus Logo abgeleitet
   ----------------------------------------------------------------------------
   (Live-Status-Pille "Jetzt erreichbar" ist am Ende dieser Datei definiert)
   ========================================================================== */

/* ---- Schriften (lokal gehostet, keine Verbindung zu Google) --------------
   Lexend und Source Sans 3 sind Variable Fonts: eine Datei je Zeichensatz
   deckt den gesamten Gewichtsbereich ab. Lizenz: SIL Open Font License 1.1,
   Lizenztexte in assets/fonts/.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lexend-latin.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: "Lexend";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lexend-latin-ext.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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-latin.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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-latin-ext.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;
}

/* ---- Design Tokens ------------------------------------------------------- */
:root {
  /* Farben (aus Logo) */
  --color-navy:        #1B2A44;   /* Primaer - Logo-Blau */
  --color-navy-800:    #223354;
  --color-navy-700:    #2C4066;
  --color-silver:      #9AA3AD;   /* Sekundaer - Logo-Grau */
  --color-silver-300:  #C3CAD2;
  --color-accent:      #0369A1;   /* CTA-Blau */
  --color-accent-600:  #0284C7;
  --color-accent-050:  #E7F1F8;

  --color-bg:          #F8FAFC;   /* Seiten-Hintergrund */
  --color-surface:     #FFFFFF;   /* Karten */
  --color-muted:       #EEF2F6;   /* dezente Flaechen */
  --color-border:      #E2E8F0;

  --color-fg:          #0F1B2D;   /* Haupttext */
  --color-fg-muted:    #4A5A6E;   /* Fliesstext gedaempft */
  --color-fg-subtle:   #5F6E82;

  --color-success:     #157347;
  --color-danger:      #DC2626;
  --color-whatsapp:    #25D366;
  --color-whatsapp-dk: #1EBE5A;

  /* Typografie */
  --font-head: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale (marketing / grosszuegig) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius / Shadow */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .08);
  --shadow:    0 4px 12px rgba(15, 27, 45, .08), 0 2px 4px rgba(15, 27, 45, .05);
  --shadow-lg: 0 18px 40px rgba(15, 27, 45, .14);

  --container: 1160px;
  --header-h: 106px;

  /* Z-Index-Skala */
  --z-base: 0;
  --z-reveal: 10;
  --z-header: 100;
  --z-menu: 200;
  --z-float: 300;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--color-fg);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
/* Untergrenze 1.8rem statt 2.1rem: greift nur unterhalb von 576px Fensterbreite.
   Die Startueberschrift lief auf dem Handy sonst ueber fuenf Zeilen. */
h1 { font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
p  { color: var(--color-fg-muted); overflow-wrap: break-word; }

/* ---- Layout Helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.section { padding-block: clamp(56px, 9vw, 112px); }
section[id], main[id] { scroll-margin-top: 92px; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--navy {
  background: var(--color-navy);
  color: #E7ECF3;
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #B7C2D0; }
.section--muted { background: var(--color-muted); }


.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.14rem; color: var(--color-fg-muted); }
/* Zwischen Ueberschrift und Text gehoert Luft. Vorher hing das an einer
   Einzelregel fuer genau eine Ueberschrift, an elf weiteren Stellen standen
   die beiden mit 0 bis 4px direkt aufeinander. Deshalb hier elementbezogen
   statt an Abschnittsklassen: greift auch in Karten, auf Unterseiten und in
   allem, was spaeter dazukommt. Spezifischere Regeln stechen es weiterhin. */
h1 + .lead, h2 + .lead, h3 + .lead { margin-top: var(--space-4); }
h2 + p, h3 + p { margin-top: 8px; }
.section-head h1 + .lead, .section-head h2 + .lead,
.section-head h1 + p,    .section-head h2 + p { margin-top: var(--space-4); }
.section--navy .lead { color: #C4CFDC; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .97rem;
  line-height: 1;
  padding: 16px 26px;
  min-height: 50px;
  border-radius: 0;
  border: 2px solid transparent;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn:active { transform: translateY(1px); }

/* Lichteinfall: ein schraeger Glanzstreifen wandert beim Zeigen ueber den
   Knopf. position:relative und overflow:hidden stehen in der Grundregel oben,
   damit der Streifen am Knopfrand abgeschnitten wird.
   z-index:-1 ist hier entscheidend: positionierte Elemente werden NACH dem
   Fliesstext gezeichnet, bei 0 laege der Streifen also ueber der Schrift.
   Bei -1 liegt er ueber dem Knopfhintergrund, aber unter dem Text - auch bei
   Knoepfen, deren Beschriftung ohne span direkt im a-Element steht.
   isolation:isolate haelt ihn im Knopf, sonst rutscht er hinter die Seite.
   pointer-events:none, damit er keine Klicks abfaengt. */
.btn::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -140%;
  width: 55%;
  height: 140%;
  z-index: -1;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,0) 100%);
  transition: left .62s cubic-bezier(.22,.61,.36,1);
}
.btn:hover::after, .btn:focus-visible::after { left: 145%; }
/* Auf hellen Knoepfen traegt weisses Licht nicht, dort ein dunkler Schimmer. */
.btn-ghost::after {
  background: linear-gradient(90deg,
    rgba(27,42,68,0) 0%,
    rgba(27,42,68,.13) 50%,
    rgba(27,42,68,0) 100%);
}
.section--navy .btn-ghost::after, .hero .btn-linie-hell::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,0) 100%);
}
.btn svg { width: 20px; height: 20px; }

.btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; box-shadow: var(--shadow); transform: translateY(-2px); }

.btn-dark { background: var(--color-navy); color: #fff; }
.btn-dark:hover { background: var(--color-navy-700); color: #fff; transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--color-navy); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-navy); color: var(--color-navy); background: #fff; }
.section--navy .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.section--navy .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }

.btn-whatsapp { background: var(--color-whatsapp); color: #08331a; }
.btn-whatsapp:hover { background: var(--color-whatsapp-dk); color: #08331a; transform: translateY(-2px); }

.btn-block { width: 100%; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
/* Die Kopfleiste laeuft ueber die volle Fensterbreite statt im zentrierten
   Raster zu sitzen. Vorher begann das Logo auf einem 1903px-Schirm erst bei
   404px, waehrend die Ueberschrift im Hero bei 72px anfing - und rechts
   blieben 482px leer. Derselbe Randabstand wie .hero-innen bringt beide auf
   eine Linie: Logo ganz links, Knopf ganz rechts. */
.site-header .container {
  max-width: none;
  padding-inline: clamp(20px, 4.5vw, 72px);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
/* flex-shrink:0 - ohne das wurde das Logo zwischen 861 und 1035px zusammen-
   gequetscht und verschwand streckenweise ganz. */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Das Kopflogo ist auf den Tintenbereich beschnitten und ohne die Zeile
   "KFZ SACHVERSTAENDIGER / GUTACHTER": die war bei dieser Hoehe nur rund
   5px hoch und damit unleserlich. Dadurch fuellen Wagen und Schriftzug
   die volle Hoehe statt eines Drittels. */
.brand img { height: clamp(54px, 5.6vw, 76px); width: auto; max-width: none; }
.brand .brand-fallback {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--color-navy);
  font-size: 1.1rem;
}

.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .97rem;
  color: var(--color-fg);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: background-color .18s ease, color .18s ease;
}
/* Zwischen 861 und 1044px passte die Navigation nicht in eine Zeile und brach
   mitten im Wort um ("Ablauf & / FAQ"). Enger setzen statt umbrechen lassen. */
@media (min-width: 921px) and (max-width: 1044px) {
  .nav { gap: 0; }
  .nav a { font-size: .9rem; padding: 10px 9px; }
  .nav a.btn { padding: 13px 16px; }
  .header-inner { gap: var(--space-3); }
}
.nav a, .nav a.btn { white-space: nowrap; }
.nav a:hover { background: var(--color-muted); color: var(--color-navy); }
.nav a[aria-current="page"] { color: var(--color-accent); }

.nav a.btn {
  padding: 14px 22px;
  border-radius: 0;
  font-weight: 700;
}
.nav a.btn-primary { color: #fff; }
.nav a.btn-primary:hover { background: var(--color-accent-600); color: #fff; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
/* Ueber der Menuebreite ist dieses Feld leer - der Menueknopf steckt darin
   und ist dort ausgeblendet. Als leeres Flex-Element hielt es den Knopf
   trotzdem vom rechten Rand weg. Muss NACH der Zeile darueber stehen:
   gleiche Spezifitaet, also entscheidet die Reihenfolge. */
@media (min-width: 921px) {
  .header-actions { display: none; }
}

/* Sprachumschalter */

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { width: 24px; height: 24px; color: var(--color-navy); }

/* ---- Hero ----------------------------------------------------------------
   Aufbau wie bei den anderen Projekten: Foto ueber die volle Breite, Text
   unten links nah am Fensterrand. Der Textblock haengt bewusst NICHT am
   zentrierten Inhaltsraster, sonst stuende er auf breiten Bildschirmen
   mehrere hundert Pixel vom Rand entfernt.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Bewusst unter der vollen Fensterhoehe: zusammen mit der Kopfzeile
     bleibt unten ein Streifen des hellen Abschnitts sichtbar, damit man
     sieht, dass es weitergeht. */
  min-height: min(82vh, 760px);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + 4rem) clamp(2.2rem, 4vw, 3.4rem);
  background: var(--color-navy);
  color: #E7ECF3;
  overflow: hidden;
}
/* Auf dem Handy bestimmte bisher der Inhalt die Hoehe: wurde der Inhalt
   kuerzer, schrumpfte der Hero mit und der Text blieb oben kleben. Mit einer
   festen Mindesthoehe geht der gewonnene Platz nach oben - der Text rueckt
   nach unten und das Logo bekommt Luft. */
@media (max-width: 760px) {
  .hero { min-height: min(88vh, 780px); }
}
/* Ab rund 1910px waechst das Video mit der Fensterbreite und damit auch das
   Logo. Auf einem niedrigen, sehr breiten Schirm (2560x900) reichte die Hoehe
   dann nicht mehr - etwas mehr Mindesthoehe schafft den Abstand zum Text. */
@media (min-width: 1911px) {
  .hero { min-height: min(84vh, 800px); }
}
/* ==========================================================================
   MARKE IM HERO
   Hier lief bis zuletzt ein Video. Das brachte lauter Randprobleme mit sich:
   zwei Dateien fuer Quer- und Hochformat, ein Rechteck, dessen Kanten man
   wegblenden musste, und auf dem Handy die Frage, ob es von allein startet.
   Jetzt steht dort das freigestellte Logo als Bild mit Transparenz - es hat
   gar keinen Rand, den man verstecken muesste. Schein und Bewegung kommen
   aus CSS und sind damit in jeder Aufloesung scharf.
   ========================================================================== */
.hero-marke {
  position: absolute;
  left: 50%;
  top: 26%;
  width: min(clamp(380px, 45vw, 690px), 86%);
  transform: translateX(-50%);
  pointer-events: none;
}
.hero-marke-bild {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
/* Weicher Schein hinter dem Logo - das, was frueher der Videohintergrund
   geleistet hat, nur ohne Kanten und in jeder Groesse gleich weich. */
.hero-marke::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 200%; aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(102, 148, 210, .38) 0%,
    rgba(74, 112, 170, .21) 40%,
    rgba(42, 66, 106, .08) 68%,
    rgba(27, 42, 68, 0) 100%);
  animation: marke-atem 11s ease-in-out infinite;
}
/* Lichtreflex, der langsam ueber die Linien wandert - wie der Glanz im
   frueheren Video. Bewusst andersherum gebaut, als man zuerst denkt: die
   Fuellung ist das Logo selbst (aufgehellt), die Maske ist der wandernde
   Verlauf. Griffe die Maske irgendwo nicht, saehe man dadurch ein etwas
   helleres Logo - und nicht, wie bei der umgekehrten Bauweise, ein weisses
   Rechteck ueber dem Hero. */
.hero-marke::after {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/hero-logo.webp") center / 100% 100% no-repeat;
  filter: brightness(1.9);
  opacity: .5;
  -webkit-mask-image: linear-gradient(100deg,
    transparent 42%, #000 50%, transparent 58%);
          mask-image: linear-gradient(100deg,
    transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: marke-glanz 9s ease-in-out infinite;
}
@keyframes marke-atem {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
/* Funken auf der Dachlinie - dort, wo Licht auf einer Karosseriekante
   sitzen wuerde. Die Positionen sind Prozentwerte des Logofelds und damit an
   die Zeichnung gebunden, nicht an die Bildschirmgroesse: sie sitzen auf
   jedem Geraet auf derselben Linie. Gemessen an der Bilddatei -
   Oberkante des Wagens bei 30%/7%, Dachscheitel 46%/2%, Heckbogen 70%/21%. */
.funke {
  position: absolute;
  width: 5.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0) 72%);
  animation: funkeln 7.5s ease-in-out infinite;
}
.funke::before,
.funke::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
}
.funke::before {
  width: 100%; height: 8%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
}
.funke::after {
  width: 8%; height: 100%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, #fff 50%, transparent);
}
/* Verteilt ueber die ganze Marke, nicht nur auf der Dachlinie: Bugspitze,
   Heckbogen, die Aussenkanten von HANSE und ein Punkt unter dem Schriftzug.
   Unterschiedliche Groessen und Verzoegerungen, sonst blitzt es im Takt.
   Alle Werte sind an der Bilddatei abgelesen. */
.funke-1 { left: 30%; top:  7%; animation-delay: 0s; }
.funke-2 { left: 46%; top:  2%; animation-delay: 2.4s; }
.funke-3 { left: 70%; top: 21%; animation-delay: 4.9s; }
.funke-4 { left:  5%; top: 30%; width: 3.8%; animation-delay: 1.2s; }
.funke-5 { left: 95%; top: 37%; width: 4.2%; animation-delay: 3.6s; }
.funke-6 { left: 14%; top: 53%; width: 3.4%; animation-delay: 6.1s; }
.funke-7 { left: 87%; top: 53%; width: 3.4%; animation-delay: 7.3s; }
.funke-8 { left: 50%; top: 92%; width: 3.0%; animation-delay: 5.5s; }
@keyframes funkeln {
  0%, 66%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  73%           { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(25deg); }
  82%           { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(45deg); }
}
@keyframes marke-glanz {
  0%, 10%   { -webkit-mask-position: 190% 0; mask-position: 190% 0; }
  60%, 100% { -webkit-mask-position: -90% 0; mask-position: -90% 0; }
}

/* ==========================================================================
   HANDY: MARKE MITTIG ZWISCHEN KOPFZEILE UND VORSPANN
   Feste Pixelwerte fuer top haben hier nie fuer alle Formate gepasst - was
   auf einem 812er Bildschirm sass, klebte auf einem 667er unter der
   Kopfzeile. Statt weiter Werte zu staffeln uebernimmt das jetzt der
   Textfluss: der Hero ist eine Spalte, das Markenfeld nimmt den ganzen Rest
   zwischen Kopfzeile und Textblock ein und stellt die Marke darin mittig.
   Damit sitzt sie auf jedem Geraet und bei jeder Hoehe im Zentrum dieser
   Flaeche - auch wenn Safari die sichtbare Hoehe zusammenzieht. Die Groesse
   bleibt bei 72% der Breite, also unveraendert.
   ========================================================================== */
/* Dieselbe Mechanik gilt fuer Tablets im Hochformat: auch dort ist der Hero
   schmal, der Text beginnt frueh und eine feste Hoehe wuerde wieder nur fuer
   ein Format passen. Komma heisst ODER - Handy oder Hochformat-Tablet. Die
   Groesse der Marke steht getrennt darunter, sie ist das Einzige, was sich
   zwischen den beiden unterscheidet. */
@media (max-width: 760px),
       (min-width: 761px) and (max-width: 1849px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block-start: 0;
  }
  .hero-marke-feld {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mindestabstand nach oben und unten: ohne ihn fuellte die Marke auf
       flachen Fenstern die freie Bahn exakt aus und stiess an Kopfzeile und
       Vorspann. Das Polster verkleinert die verfuegbare Hoehe, dadurch wird
       die Marke kleiner statt gedraengt. */
    padding-block: clamp(14px, 2.4vh, 32px);
  }
  .hero-marke {
    position: relative;
    top: auto; left: auto;
    transform: none;
    /* Seitenverhaeltnis der Bilddatei. Zusammen mit max-height sorgt es
       dafuer, dass die Marke auf flachen Fenstern nicht nur beschnitten,
       sondern insgesamt kleiner wird - die Funken sitzen auf Prozentwerten
       dieses Kastens und wandern dadurch korrekt mit. */
    aspect-ratio: 2214 / 855;
    height: auto;
    max-height: 100%;
  }
  .hero-marke-bild { height: 100%; }
  .hero-innen { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .hero-marke { width: 72%; }
}
/* Auf Rechnern darf sie groesser werden als auf dem Tablet - begrenzt wird
   sie ohnehin durch die Hoehe der freien Bahn. */
@media (min-width: 761px) and (max-width: 1849px) {
  .hero-marke { width: min(46vw, 690px); }
}
/* Wer Bewegung reduziert haben will, bekommt dasselbe Bild - nur still. */
@media (prefers-reduced-motion: reduce) {
  .hero-marke::before,
  .hero-marke::after { animation: none; }
  .funke { animation: none; opacity: 0; }
  .hero-marke::before { opacity: .92; }
}
/* Zwei Verlaeufe: einer von unten fuer die Lesbarkeit des Textes, einer von
   links fuer Ruhe hinter der Ueberschrift. */
.hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* Deutlich zurueckgenommen gegenueber vorher (.97/.72/.10 und .85/.30):
       der Verlauf lag genau dort am dichtesten, wo das Logo steht, und hat es
       verschluckt. Unten bleibt er kraeftig genug fuer die Knoepfe, oben gibt
       er das Bild frei. Der Textkontrast ist danach nachgemessen. */
    linear-gradient(to top, rgba(15,23,38,.93) 0%, rgba(15,23,38,.52) 44%, rgba(15,23,38,.06) 70%, rgba(15,23,38,0) 82%),
    linear-gradient(to right, rgba(15,23,38,.72) 0%, rgba(15,23,38,.20) 30%, rgba(15,23,38,0) 50%);
}
.hero-innen {
  position: relative; z-index: 2;
  width: 100%;
  padding-inline: clamp(20px, 4.5vw, 72px);
}
.hero h1 { color: #fff; max-width: 17ch; margin-block: var(--space-5) 0; }
/* Eine Spur kleiner als die uebrigen Seitentitel - im Hero steht sie
   ohnehin am groessten und bekam sonst zu viel Gewicht. */
.hero h1 { font-size: clamp(1.7rem, 4.2vw, 2.85rem); }
.hero-unter {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: #C4CFDC;
  max-width: 44ch;
  margin-top: var(--space-4);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Heller Umriss-Knopf fuer die Telefonnummer auf dunklem Grund */
.btn-linie-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-linie-hell:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* ---- Stats bar ----------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.stat { text-align: center; padding: var(--space-4); }
.stat .num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.section--navy .stat .num { color: #fff; }
.stat .label { font-size: .95rem; color: var(--color-fg-subtle); }
.section--navy .stat .label { color: #B7C2D0; }

/* ---- Cards / Grids ------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-silver-300); }
.card .icon-badge { margin-bottom: var(--space-4); }

.icon-badge {
  width: 54px; height: 54px;
  border-radius: var(--radius);
  background: var(--color-accent-050);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.icon-badge svg { width: 28px; height: 28px; }
/* Die Zeichen in den Feldern sind jetzt gerenderte Bilder mit Transparenz.
   Sie tragen ihre Farbe selbst, deshalb greift color hier nicht mehr - dafuer
   bekommt das Feld auf dunklem Grund einen helleren Untergrund, damit die
   blauen Objekte nicht im Navy verschwinden. */
.icon-badge img { width: 40px; height: 40px; display: block; }
.section--navy .icon-badge img,
.dlg-text .icon-badge img,
.schritt .icon-badge img { filter: brightness(1.35) saturate(.85); }
.section--navy .icon-badge,
.dlg-text .icon-badge,
.schritt .icon-badge { background: rgba(255,255,255,.13); }
.section--navy .icon-badge { background: rgba(255,255,255,.08); color: var(--color-silver-300); }

.card h3 { margin-bottom: var(--space-2); }
.card p { font-size: 1rem; }
.card ul.check { margin-top: var(--space-4); display: grid; gap: 8px; }
ul.check li { position: relative; padding-left: 30px; color: var(--color-fg-muted); font-size: 1rem; }
ul.check li svg { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; color: var(--color-success); }

/* Feature (icon left) */
.feature { display: flex; gap: var(--space-4); }
.feature .icon-badge { flex-shrink: 0; }
/* min-width:0 hebt die Voreinstellung min-width:auto auf: sonst schrumpft die
   Textspalte nicht unter die Breite ihres laengsten Wortes und ragt heraus. */
.feature > * { min-width: 0; }
.feature h3 { font-size: 1.15rem; margin-bottom: 4px; }
.feature p { font-size: 1rem; }

/* ---- Steps (Ablauf) ------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) 84px;
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 24px; top: clamp(24px, 3vw, 32px);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step h2, .step h3 { font-size: 1.15rem; margin-bottom: 4px; color: var(--color-navy); }
.step p { font-size: 1rem; color: var(--color-fg-muted); }
/* Schritt-Karten (weiss) bleiben auch im dunklen Abschnitt gut lesbar */
.section--navy .step h2, .section--navy .step h3 { color: var(--color-navy); }
.section--navy .step p { color: var(--color-fg-muted); }

/* ---- Vertrauensangaben im Hero ------------------------------------------ */
/* Unten rechts, nebeneinander statt untereinander. Der Text der Ueberschrift
   reicht nie weiter als 694px, deshalb beginnt die Reihe erst bei 720px - so
   kann sie nicht in den Text laufen. Wird es eng, bricht sie von selbst um.
   Unter 1400px ist daneben zu wenig Platz, dort laeuft sie im Fluss mit. */
/* ==========================================================================
   VERTRAUENSPUNKTE
   Ein helles Band direkt unter dem Hero, ueber die volle Breite. Vorher
   sassen die vier Angaben im dunklen Hero: rechts unten auf breiten
   Schirmen, als eigener dunkler Streifen auf dem Handy. Das brachte staendig
   Randfaelle mit sich - Farbabgleich mit der Hero-Unterkante, reservierter
   Platz, damit sie nicht auf den Knoepfen liegen, Trennstriche, die auf dem
   Text landeten.
   Auf Weiss faellt das alles weg: das Band traegt sich selbst, der Hero
   bleibt unangetastet. Nur Schrift, dazu Haarlinien als Trennung -
   senkrecht, wenn die vier nebeneinander stehen, waagerecht, wenn sie
   untereinander stehen.
   ========================================================================== */
.hero-bereich { position: relative; }

.vertrauen-band {
  background: #fff;
  border-block: 1px solid var(--color-border);
}
.vertrauen-innen {
  padding-inline: clamp(20px, 4.5vw, 72px);
}
.hero-vertrauen {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-vertrauen li {
  position: relative;
  /* Spalte statt Block: bricht eine Angabe auf zwei Zeilen um, stehen die
     uebrigen sonst oben statt mittig. Bewusst column und nicht row - in
     Zeilenrichtung hat der Text eine automatische Mindestbreite und liefe
     aus seiner Zelle heraus. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-block: clamp(15px, 1.7vw, 22px);
  padding-inline: var(--space-4);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(.82rem, 1.02vw, .95rem);
  letter-spacing: .03em;
  line-height: 1.35;
  color: var(--color-navy);
  /* Damit lange Angaben umbrechen statt ihre Spalte zu sprengen. */
  min-width: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
/* Zwei getrennte Linien statt einer: ::before trennt Spalten (senkrecht),
   ::after trennt Zeilen (waagerecht). Mit nur einem Pseudoelement liesse
   sich die zweite Zeile im Zweispalter nicht durchgehend unterstreichen -
   die Linie deckte immer nur eine Zelle. */
.hero-vertrauen li::before,
.hero-vertrauen li::after { content: none; }
.hero-vertrauen li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 2.1em;
  background: var(--color-border);
}

/* Schmale Geraete: untereinander statt nebeneinander. Vier Spalten waeren
   hier je rund 80px breit - da bleibt von den Angaben nichts Lesbares. */
@media (max-width: 760px) {
  .hero-vertrauen { grid-template-columns: minmax(0, 1fr); }
  .hero-vertrauen li {
    padding-block: 13px;
    padding-inline: 0;
    font-size: .92rem;
    letter-spacing: .02em;
  }
  .hero-vertrauen li + li::before { content: none; }
  .hero-vertrauen li + li::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--color-border);
  }
}
/* Mittlere Breiten: zwei Spalten, damit das Band nicht zu hoch wird. */
@media (min-width: 761px) and (max-width: 1023px) {
  .hero-vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Die dritte Zelle beginnt eine neue Zeile - dort keine senkrechte Linie. */
  .hero-vertrauen li:nth-child(3)::before { content: none; }
  /* Dafuer eine durchgehende Linie ueber der zweiten Zeile: beide Zellen
     bekommen sie, zusammen ergibt das eine Linie ueber die volle Breite. */
  .hero-vertrauen li:nth-child(n+3)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--color-border);
  }
}

/* ---- Testimonials -------------------------------------------------------- */
.quote {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex; flex-direction: column;
}
.quote .stars { display: flex; gap: 2px; color: #F5A524; margin-bottom: var(--space-3); }
.quote .stars svg { width: 20px; height: 20px; }
.quote blockquote { font-size: 1.08rem; color: var(--color-fg); flex: 1; }
.quote .who { margin-top: var(--space-4); display: flex; align-items: center; gap: 12px; }
.quote .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700;
}
.quote .who b { font-family: var(--font-head); color: var(--color-navy); }
.quote .who span { display: block; font-size: .9rem; color: var(--color-fg-subtle); }
.placeholder-note {
  display: inline-block;
  font-size: .78rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: #92400E;
  background: #FEF3C7;
  border: 1px dashed #D9A441;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* ---- Instagram section --------------------------------------------------- */

@media (max-width: 960px) {
    }

/* ---- Einsatzgebiet (Orts-Chips) ------------------------------------------ */
/* ==========================================================================
   SERVICEGEBIET-FINDER MIT KARTE
   Ersetzt die Wolke aus 18 gleich grossen Ortsschildern. Die Orte stehen
   weiterhin vollstaendig im HTML, damit Suchmaschinen die Ortsnennungen
   finden - nur die Darstellung ist ruhiger. Rechts daneben der Standort,
   damit man den Weg findet, ohne die Seite zu verlassen.
   ========================================================================== */
.gebiet-label {
  display: block; font-family: var(--font-head); font-weight: 600;
  color: var(--color-navy); margin-bottom: 10px;
}
.gebiet-eingabe { position: relative; display: block; }
.gebiet-eingabe svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--color-fg-muted); pointer-events: none;
}
.gebiet-eingabe input {
  width: 100%; font-family: var(--font-body); font-size: 1.02rem;
  padding: 14px 16px 14px 45px; color: var(--color-fg); background: #fff;
  border: 2px solid var(--color-border); border-radius: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gebiet-eingabe input:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(3,105,161,.16);
}
.gebiet-ergebnis { min-height: 1.4em; margin-top: 10px; font-size: .95rem; color: var(--color-fg-muted); }
.gebiet-ergebnis.ja { color: #0F7A44; font-weight: 600; }
.gebiet-ergebnis.vielleicht { color: var(--color-navy); }
.gebiet-ueberschrift {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-fg-muted);
  margin: var(--space-5) 0 var(--space-3);
}
/* column-count statt grid, damit die Namen in Lesereihenfolge untereinander
   stehen und beim Filtern nicht springen. */
.gebiet-liste { list-style: none; columns: 2; column-gap: var(--space-5); }
.gebiet-liste li {
  position: relative; padding: 6px 0 6px 17px;
  font-size: .95rem; color: var(--color-fg);
  border-bottom: 1px solid var(--color-border); break-inside: avoid;
}
.gebiet-liste li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--color-accent); opacity: .5;
}
.gebiet-liste li.verborgen { display: none; }
.gebiet-liste li.treffer { color: #0F7A44; font-weight: 600; }
.gebiet-liste li.treffer::before { background: #0F7A44; opacity: 1; }
.region-note { margin-top: var(--space-4); color: var(--color-fg-muted); font-size: .92rem; }


@media (max-width: 900px) {
    }
@media (max-width: 420px) { .gebiet-liste { columns: 1; } }

/* ---- Photo placeholders (Auto-Stock-Optik) ------------------------------- */
.photo-ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, #253652 0%, #1B2A44 55%, #0F1B2D 100%);
  min-height: 260px;
  display: flex; align-items: flex-end;
  border: 1px solid var(--color-border);
}
.photo-ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 40%),
    linear-gradient(115deg, transparent 40%, rgba(154,163,173,.18) 60%, transparent 62%);
}
.photo-ph .ph-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  color: rgba(255,255,255,.25);
}
.photo-ph .ph-icon svg { width: 60px; height: 60px; }
.photo-ph .ph-label {
  position: relative;
  margin: 16px;
  font-size: .8rem; font-family: var(--font-head); font-weight: 600;
  color: #fff;
  background: rgba(15,27,45,.6);
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  backdrop-filter: blur(2px);
}
.photo-ph.tall { min-height: 420px; }

/* ---- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow);
}
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--color-navy);
  margin-bottom: 7px;
}
.field label .req { color: var(--color-danger); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-fg);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  min-height: 50px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(3,105,161,.15);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.field .help { font-size: .85rem; color: var(--color-fg-subtle); margin-top: 6px; }
.field-error { color: var(--color-danger); font-size: .85rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--color-danger); }
.field.invalid .field-error { display: block; }


/* Hinweistext unter dem Formular */
.form-privacy { font-size: .9rem; color: var(--color-fg-muted); margin-bottom: var(--space-5); line-height: 1.6; }
.form-privacy a { color: var(--color-accent); text-decoration: underline; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status { border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: var(--space-4); font-size: .95rem; display: none; }
.form-status.show { display: block; }
.form-status.info { background: #FEF3C7; color: #92400E; border: 1px solid #F1D18A; }
.form-status.ok   { background: #DCFCE7; color: #14532D; border: 1px solid #A7E3BE; }
.form-status.err  { background: #FEE2E2; color: #991B1B; border: 1px solid #F3B4B4; }

.contact-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.contact-line {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease;
}
a.contact-line:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.contact-line > * { min-width: 0; }
.contact-line .icon-badge { width: 46px; height: 46px; flex-shrink: 0; }
.contact-line .icon-badge svg { width: 24px; height: 24px; }
.contact-line .ct-label { font-size: .82rem; color: var(--color-fg-subtle); }
.contact-line .ct-value { font-family: var(--font-head); font-weight: 600; color: var(--color-navy); font-size: 1.05rem; overflow-wrap: break-word; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); max-width: 820px; margin-inline: auto; }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  background: none; border: none; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: 1.08rem;
  color: var(--color-navy);
}
.faq-q .chev { transition: transform .25s ease; color: var(--color-accent); flex-shrink: 0; }
.faq-q .chev svg { width: 22px; height: 22px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .3s ease, visibility 0s linear .3s;
}
.faq-item.open .faq-a {
  visibility: visible;
  transition: max-height .3s ease, visibility 0s linear 0s;
}
.faq-a-inner { padding: 0 22px 22px; color: var(--color-fg-muted); }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { text-align: center; }
.cta-band .btn-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* ---- Legal pages --------------------------------------------------------- */
.legal { max-width: 820px; }
.legal h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); font-size: 1.4rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: 1.12rem; }
.legal p, .legal-stand { margin-top: var(--space-6); font-size: .92rem; color: var(--color-fg-subtle); }
.legal li { color: var(--color-fg-muted); }
.legal ul { padding-left: 20px; list-style: disc; display: grid; gap: 6px; margin-block: var(--space-3); }
.legal .ph {
  background: #FEF3C7; color: #92400E;
  border-radius: var(--radius-sm); padding: 1px 7px; font-weight: 600;
  font-family: var(--font-head); font-size: .92em;
}
.legal .updated { color: var(--color-fg-subtle); font-size: .9rem; }

/* ---- Page hero (inner pages) --------------------------------------------- */
.page-hero {
  background: linear-gradient(180deg, var(--color-navy) 0%, #16233D 100%);
  color: #fff;
  padding-block: clamp(48px, 7vw, 84px);
}
.page-hero h1 { color: #fff; margin-bottom: var(--space-5); }
.page-hero p { color: #C4CFDC; max-width: 60ch; font-size: 1.14rem; }
.breadcrumb { font-size: .9rem; color: #93A2B6; margin-bottom: var(--space-4); }
.breadcrumb a { color: #C4CFDC; }
.breadcrumb a:hover { color: #fff; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: #0F1B2D; color: #AEB9C7; padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-6); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: var(--space-4); letter-spacing: .02em; }
.site-footer a { color: #AEB9C7; }
.site-footer a:hover { color: #fff; }
.footer-links { display: grid; gap: 10px; font-size: .96rem; }
.footer-brand img { height: 56px; width: auto; margin-bottom: var(--space-4); }
.footer-brand p { color: #8E9BAD; font-size: .95rem; max-width: 34ch; }
.footer-contact { display: grid; gap: 10px; font-size: .96rem; }
.footer-contact div { display: flex; gap: 10px; align-items: center; }
.footer-contact svg { width: 18px; height: 18px; color: var(--color-silver); flex-shrink: 0; }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
  font-size: .88rem; color: #7E8B9D;
}
.footer-bottom .fb-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---- Floating WhatsApp --------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-float);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #08331a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: scale(1.07); color: #08331a; box-shadow: 0 14px 32px rgba(37,211,102,.55); }
.wa-float svg { width: 32px; height: 32px; }
.wa-float .wa-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--color-whatsapp);
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Instagram badge link ------------------------------------------------ */
.site-footer 
/* ---- Scroll reveal ------------------------------------------------------- */
/* Nur wenn das Skript laeuft (Klasse .js-anim am html-Element) wird ueberhaupt
   ausgeblendet. Sonst waere ohne JavaScript ein Grossteil der Seite leer. */
.js-anim .reveal { opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }

/* ---- Focus visibility ---------------------------------------------------- */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.hero :focus-visible,
.page-hero :focus-visible,
.section--navy :focus-visible,
.site-footer :focus-visible {
  outline-color: #fff;
}
/* Der WhatsApp-Knopf schwebt ueber dem hellen Seitenhintergrund - ein weisser
   Rahmen waere dort unsichtbar (1,05:1). Dunkel statt weiss. */
.wa-float:focus-visible { outline-color: var(--color-navy); }

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--color-navy); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-sm); z-index: var(--z-float);
}
.skip-link:focus { left: 8px; color: #fff; }

/* ---- i18n visibility (hide inactive language attributes handled in JS) ---- */

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
}
/* Bis hier das Menue statt der Navigation. Frueher lag die Grenze bei
   860px - dort stand die Navigation aber schon 12px neben dem Logo und
   drueckte sich in den Rand. */
@media (max-width: 920px) {
  .nav, .header-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header.menu-open .nav {
    display: flex;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) clamp(20px, 5vw, 40px) var(--space-5);
    box-shadow: var(--shadow-lg);
    gap: 2px;
    z-index: var(--z-menu);
  }
  .site-header.menu-open .nav a { padding: 14px; }
  .site-header.menu-open .nav .btn { display: inline-flex; margin-top: var(--space-3); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Auf sehr schmalen Geraeten duerfen Buttons umbrechen. .btn haelt sonst per
   white-space: nowrap alles in einer Zeile und ragt ueber den Rand hinaus. */
@media (max-width: 360px) {
  .btn { white-space: normal; text-align: center; padding-inline: 18px; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-anim .reveal { opacity: 1; transform: none; }
  .wa-float .wa-pulse { display: none; }
  .btn::after { display: none; }
  .status-pill .dot::after { display: none; }
}

/* ---- Live-Status-Pille "Jetzt erreichbar" -------------------------------- */
/* Vorspann ueber der Ueberschrift. Bewusst nur Schrift, keine Pille mit
   Leuchtpunkt: das wirkt wie ein Systemhinweis und nicht wie eine Aussage
   des Betriebs. Der Text wechselt weiterhin, wenn Geschaeftszeiten
   hinterlegt werden. */
.hero-eyebrow {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(.86rem, 1.3vw, .97rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: #9DB4D0; margin-bottom: var(--space-4);
}
.hero-eyebrow.closed { color: #E2A9A9; }
.page-hero .hero-eyebrow { color: #9DB4D0; }
/* Auf dem Handy dichter an der Ueberschrift. Muss NACH der Grundregel oben
   stehen: gleiche Spezifitaet, deshalb entscheidet die Reihenfolge. */
@media (max-width: 760px) {
  .hero-eyebrow { margin-bottom: 0; }
  /* Der sichtbare Abstand kam nicht vom Vorspann, sondern vom oberen Rand
     der Ueberschrift - beim Zusammenfallen der Raender gewinnt der groessere.
     Deshalb muss dieser Wert herunter. */
  .hero h1 { margin-block-start: 10px; }
}

/* ==========================================================================
   ABLAUF: VIER KACHELN NEBENEINANDER
   Zuvor als Bento mit unterschiedlich breiten Feldern - dabei stand die
   dritte Kachel allein in einer Reihe und riss ein Loch ins Raster. Jetzt
   vier gleich breite Kacheln in einer Linie, die den Weg von links nach
   rechts lesen lassen. Ein feiner Verbindungsstrich zwischen den Kacheln
   macht die Abfolge sichtbar, ohne Pfeile zu brauchen.
   ========================================================================== */
.schritt-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.schritt {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(22px, 2vw, 28px);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 100%);
  border: 1px solid rgba(255,255,255,.12);
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.schritt:hover {
  border-color: rgba(255,255,255,.24);
  transform: translateY(-4px);
}
/* Verbindungsstrich zur naechsten Kachel. Er sitzt in der Luecke zwischen
   den Kacheln, deshalb ragt er ueber den rechten Rand hinaus. */
.schritt::after {
  content: "";
  position: absolute;
  right: calc(var(--space-4) * -1);
  top: 46px;
  width: var(--space-4);
  height: 1px;
  background: rgba(255,255,255,.18);
}
.schritt:last-child::after { display: none; }
.schritt .icon-badge { width: 48px; height: 48px; }
.schritt .icon-badge img { width: 34px; height: 34px; }
.schritt h3 {
  color: #fff;
  font-size: 1.08rem;
  margin-top: var(--space-4);
}
.schritt p {
  color: #B6C2D2;
  font-size: .93rem;
  line-height: 1.55;
  margin-top: 9px;
}

@media (max-width: 1100px) {
  .schritt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bei zwei Spalten steht der Strich nur zwischen den Paaren. */
  .schritt:nth-child(2n)::after { display: none; }
}
@media (max-width: 620px) {
  .schritt-bento { grid-template-columns: 1fr; gap: var(--space-3); }
  .schritt::after { display: none; }
  .schritt { padding: 20px; }
  }

/* ==========================================================================
   REFERENZEN
   Laufband weit oben (direkt nach den Leistungen), damit echte Fahrzeuge
   frueh sichtbar sind, und dieselben Bilder noch einmal als ruhige Galerie
   im Praxis-Abschnitt. Die Kennzeichen sind in der Bilddatei selbst
   geschwaerzt, nicht per CSS - eine CSS-Abdeckung liesse sich umgehen.
   ========================================================================== */
.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.referenz-band {
  padding-block: var(--space-7) var(--space-6);
  background: var(--color-navy);
  overflow: hidden;
}
.band-titel {
  color: #fff;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.band-unter {
  text-align: center;
  color: #A9B6C6;
  margin-top: 8px;
  margin-bottom: var(--space-6);
  font-size: 1rem;
}
/* Mehr Luft zwischen Ueberschrift und erklaerender Zeile. */
.band-spur {
  display: flex;
  width: max-content;
  animation: bandlauf 58s linear infinite;
}
.band-reihe {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding-inline: var(--space-2);
}
.band-reihe img {
  height: 190px;
  width: auto;
  border-radius: var(--radius);
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .12);
}
/* Die Spur enthaelt zwei identische Reihen; eine Verschiebung um genau die
   halbe Spurbreite laesst den Umlauf nahtlos wirken. */
@keyframes bandlauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.band-notiz {
  text-align: center;
  margin-top: var(--space-4);
  font-size: .82rem;
  color: #7E8B9D;
}
.band-notiz--links { text-align: left; color: var(--color-fg-muted); margin-top: var(--space-3); }

.referenz-galerie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.referenz-galerie figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-silver-100, #EEF1F5);
}
.referenz-galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.referenz-galerie figure:hover img { transform: scale(1.04); }
/* Das erste Bild bekommt doppelte Flaeche, damit die Reihe nicht wie ein
   Kontaktbogen wirkt. */
.referenz-galerie figure:first-child { grid-column: span 2; grid-row: span 2; }
.referenz-galerie figure:first-child img { aspect-ratio: 1 / 1; }

@media (max-width: 900px) {
  .referenz-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band-reihe img { height: 150px; }
}
@media (max-width: 560px) {
  .referenz-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referenz-galerie figure:first-child { grid-column: span 2; grid-row: auto; }
  .band-reihe img { height: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Kein Dauerlauf: das Band steht still und laesst sich mit dem Finger
     oder Trackpad seitlich schieben. */
  .band-spur { animation: none; width: auto; overflow-x: auto; }
  .band-spur > .band-reihe[aria-hidden="true"] { display: none; }
  .referenz-galerie figure:hover img { transform: none; }
}

/* ==========================================================================
   ANFRAGEBLOCK AM SEITENENDE
   Wer bis hierher gelesen hat, soll nicht erst auf die Kontaktseite wechseln
   muessen. Links die Argumente, rechts das Formular - auf schmalen Geraeten
   untereinander, Formular zuerst sichtbar nach dem Text.
   ========================================================================== */
.anfrage-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.anfrage-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.anfrage-text .lead { margin-top: var(--space-3); max-width: 42ch; }
.anfrage-punkte { margin-top: var(--space-5); display: grid; gap: 12px; }
.anfrage-punkte li { font-size: 1rem; }
.anfrage-direkt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.form-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-karte .field { margin: 0; }
.form-karte label { font-size: .88rem; }
.form-karte input,
.form-karte select,
.form-karte textarea { padding: 12px 14px; font-size: .97rem; }

@media (max-width: 900px) {
  .anfrage-raster { grid-template-columns: 1fr; }
  .anfrage-punkte { margin-top: var(--space-4); }
  .anfrage-direkt { margin-top: var(--space-5); }
}

/* Der Finder steht jetzt allein, ohne Karte daneben. Eine mittige Spalte
   liest sich ruhiger als eine halbe Seite mit leerer zweiter Haelfte. */
.gebiet-finder-block {
  max-width: 760px;
  margin-inline: auto;
}
.gebiet-finder-block .gebiet-label,
.gebiet-finder-block .gebiet-ergebnis { text-align: center; }
.gebiet-finder-block .gebiet-ueberschrift { text-align: center; }
.gebiet-finder-block .region-note { text-align: center; }

/* ==========================================================================
   ANFRAGE UND HAEUFIGE FRAGEN AUF DER STARTSEITE
   Der frueher eigene Aufruf "Unfall gehabt?" und das Formular sind zu einem
   Abschnitt verschmolzen und im Aufbau der Kontaktseite gehalten: links das
   Formular, rechts die direkten Wege. Wer ueber die Navigation auf Kontakt
   geht, findet dieselbe Anordnung wieder.
   ========================================================================== */
.anfrage-titel {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin-bottom: var(--space-2);
}
.anfrage-unter {
  color: var(--color-fg-muted);
  margin-bottom: var(--space-5);
  max-width: 46ch;
}
#anfrage .contact-cards { margin-top: var(--space-5); }

/* Aufruf unter den Ablaufkacheln. Auf dunklem Grund, deshalb heller Text. */
.ablauf-cta {
  margin-top: var(--space-6);
  text-align: center;
}
.ablauf-cta p {
  color: #B6C2D2;
  margin-bottom: var(--space-4);
}
.ablauf-cta .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.faq-wrap {
  max-width: 820px;
  margin-inline: auto;
}

/* Direkter Draht im Leistungsdialog: nutzt die freie Flaeche unten links.
   Wer nicht tippen mag, ruft an. */
.dlg-direkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem;
}
.dlg-direkt > span {
  color: #94A5BC;
  font-family: var(--font-head);
  font-weight: 600;
}
.dlg-direkt a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #E7ECF3;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 1px;
}
.dlg-direkt a:hover { color: #fff; border-bottom-color: #fff; }
.dlg-direkt svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 720px) {
  /* Im Dialog auf dem Handy zaehlt jede Zeile - der direkte Draht bleibt,
     die Ueberschrift davor faellt weg. */
  .dlg-direkt { margin-top: var(--space-4); padding-top: 12px; gap: 6px 14px; font-size: .84rem; }
  .dlg-direkt > span { display: none; }
}

/* ==========================================================================
   AUFRUF NACH DER ORTSPRUEFUNG
   Erscheint erst, wenn jemand tatsaechlich gesucht hat - vorher waere es
   nur ein Knopf ohne Anlass. Kein display-Wechsel, sondern Hoehe und
   Deckkraft, damit nichts springt.
   ========================================================================== */
.gebiet-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
  margin-top: 0;
}
.gebiet-cta.sichtbar {
  max-height: 140px;
  opacity: 1;
  margin-top: var(--space-4);
}

/* Kostenhinweis mit Aufruf. Vorher steckten Ausrichtung und Breite als
   Inline-Angaben im Markup - die konnten auf schmalen Geraeten nicht
   umbrechen und haben die Seite um bis zu 119px gesprengt. */
.kosten-karte {
  display: flex;
  gap: var(--space-4);
  /* Oben ausrichten, nicht mittig: mit dem Knopf darunter sass das Symbol
     sonst auf halber Hoehe des ganzen Blocks und schwebte neben dem Text.
     So steht es auf einer Linie mit der Ueberschrift. */
  align-items: flex-start;
  max-width: 900px;
  margin-inline: auto;
}
.kosten-karte .icon-badge { flex-shrink: 0; }
.kosten-karte > div { min-width: 0; }
.kosten-cta { margin-top: var(--space-4); white-space: normal; }
@media (max-width: 620px) {
  .kosten-karte { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .kosten-cta { width: 100%; }
}

/* ==========================================================================
   BLAUER AKZENT AM SEITENFUSS
   Der Fuss war durchgehend fast schwarz und wirkte dadurch abgeschnitten.
   Eine feine Akzentkante oben und ein blauer Schimmer aus der Ecke binden
   ihn an die uebrige Seite an.
   ========================================================================== */
.site-footer {
  position: relative;
  border-top: 3px solid var(--color-accent);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(3, 105, 161, .28) 0%, rgba(3, 105, 161, 0) 62%),
    #0F1B2D;
}
.footer-bottom { border-top-color: rgba(255, 255, 255, .14); }
.footer-bottom .fb-links a:hover { color: #7FC4F0; }
.site-footer a:hover { color: #7FC4F0; }

/* ==========================================================================
   EINBLICKE AUS DER PRAXIS
   Bilder links, Text rechts. Der farbige Instagram-Knopf ist bewusst der
   einzige bunte Punkt der Seite - er soll auffallen.
   ========================================================================== */
.ig-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.ig-tile {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-silver-100, #EEF1F5);
  box-shadow: var(--shadow-sm);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ig-tile:hover img { transform: scale(1.06); }
/* Das erste Bild traegt zwei mal zwei Felder und gibt der Wand einen Anker. */
.ig-tile:first-child { grid-column: span 2; grid-row: span 2; }

.ig-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.ig-copy .lead { margin-top: var(--space-3); }

.ig-profile { display: flex; align-items: center; gap: 14px; margin-top: var(--space-5); }
.ig-avatar {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
  padding: 2px;
  display: block;
}
.ig-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  display: block;
}
.ig-profile-meta b { display: block; font-family: var(--font-head); color: var(--color-navy); }
.ig-profile-meta span { font-size: .93rem; color: var(--color-fg-muted); }

/* Farbiger Instagram-Knopf im Verlauf der Marke. */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .97rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
  box-shadow: 0 8px 22px rgba(188, 24, 136, .28);
  transition: transform .18s ease, box-shadow .2s ease;
}
.ig-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(188, 24, 136, .36); }
.ig-link svg { width: 20px; height: 20px; flex-shrink: 0; }

/* In der Fusszeile derselbe Knopf, nur kleiner - vorher fehlte hier jede
   Regel und das Zeichen wurde riesig dargestellt. */
.site-footer .ig-link {
  padding: 9px 15px;
  font-size: .88rem;
  gap: 8px;
  box-shadow: none;
}
.site-footer .ig-link svg { width: 17px; height: 17px; }
.site-footer .ig-link:hover { transform: none; color: #fff; }

@media (max-width: 900px) {
  .ig-wrap { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-tile:first-child { grid-column: span 2; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-tile:hover img { transform: none; }
  .ig-link:hover { transform: none; }
}

/* ==========================================================================
   LEISTUNGS-DIALOGE
   Ersetzen die frueher eigenstaendige Leistungsseite. Bewusst mit Formular
   im selben Schritt statt erst lesen und dann nochmal klicken: jeder
   zusaetzliche Klick kostet Anfragen. Damit vom Titel bis zum Absendeknopf
   alles ohne Scrollen sichtbar bleibt, steht der Text links und das
   Formular rechts; auf schmalen Geraeten untereinander und knapper.
   ========================================================================== */
.leistung-karte { display: flex; flex-direction: column; }
.leistung-karte h3 { margin-top: var(--space-4); font-size: 1.13rem; }
.leistung-karte p { margin-top: 8px; }
/* margin-top:auto haelt die Knoepfe aller Kacheln auf einer Linie. */
/* margin-top:auto schiebt den Knopf an den unteren Rand, damit die Knoepfe
   aller Kacheln auf einer Linie stehen. margin-block-start ist dieselbe
   Eigenschaft und hatte das vorher wieder aufgehoben - der Abstand nach oben
   kommt jetzt ueber padding-top des Knopfumfelds. */
.leistung-knopf {
  margin-top: auto;
  align-self: flex-start;
  white-space: normal;
}
.leistung-karte p { margin-bottom: var(--space-5); }

.leistung-dialog {
  border: 0; padding: 0;
  width: min(940px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(15,23,38,.34);
  color: var(--color-fg);
  overflow: hidden;
  margin: auto;            /* zentriert waagerecht wie senkrecht */
}
.leistung-dialog::backdrop { background: rgba(15,23,38,.66); }
.dialog-innen { position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; }
.dlg-raster { display: grid; grid-template-columns: 1fr 1fr; }
.dlg-text {
  padding: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(160deg, var(--color-navy) 0%, #16233A 100%);
  color: #E7ECF3;
}
.dlg-text .icon-badge { background: rgba(255,255,255,.10); color: var(--color-silver-300); width: 46px; height: 46px; }
.dlg-text .icon-badge svg { width: 24px; height: 24px; }
.dlg-text h2 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.62rem); margin-top: 15px; line-height: 1.25; }
/* Auf dem dunkelblauen Grund war der Text zu klein und zu leise. Groesser
   und deutlich heller: Kontrast steigt damit von rund 6:1 auf ueber 9:1. */
.dlg-verkauf { margin-top: 12px; font-size: 1.04rem; line-height: 1.6; color: #DCE5F0; }
.dlg-punkte { margin-top: var(--space-5); display: grid; gap: 11px; }
/* ul.check li setzt die gedaempfte Textfarbe und ist spezifischer als
   .dlg-punkte li - auf dem dunklen Grund ergab das nur 2:1 Kontrast.
   Deshalb hier ueber .dlg-text ul.check li gestochen: jetzt ueber 13:1. */
.dlg-text ul.check li { color: #EAF0F7; font-size: 1rem; line-height: 1.5; padding-left: 30px; }
.dlg-text ul.check li svg { color: #7FE0AB; width: 20px; height: 20px; top: 4px; }
.dlg-hinweis {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: var(--space-4); padding: 11px 13px;
  background: rgba(111,211,155,.12);
  border: 1px solid rgba(111,211,155,.26);
  border-radius: var(--radius-sm);
  font-size: .92rem; line-height: 1.45; color: #DCF3E7;
}
.dlg-hinweis svg { width: 18px; height: 18px; flex-shrink: 0; color: #6FD39B; margin-top: 1px; }

.dlg-form { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 13px; }
.dlg-form-titel { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--color-navy); }
.dlg-form .field { margin: 0; }
.dlg-form label { font-size: .85rem; }
.dlg-form input, .dlg-form textarea { padding: 11px 13px; font-size: .95rem; }
.dlg-form textarea { min-height: 0; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.dlg-klein { font-size: .77rem; color: var(--color-fg-muted); line-height: 1.45; }
.dialog-zu {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 36px; height: 36px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; cursor: pointer;
  background: rgba(255,255,255,.12); border: 0; border-radius: 8px; color: #fff;
}
.dialog-zu:hover { background: rgba(255,255,255,.22); }
.dialog-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Auf dem Handy muss vom Titel bis zum Absendeknopf alles in eine
   Bildschirmhoehe passen, ohne zu scrollen. Dafuer faellt alles weg, was
   nicht zur Entscheidung oder zur Anfrage beitraegt: das Icon, die
   Stichpunkte (der Fließtext sagt dasselbe) und die Zwischenueberschrift
   ueber dem Formular. Telefon und E-Mail bleiben nebeneinander - das spart
   allein rund 70 Pixel Hoehe. */
@media (max-width: 720px) {
  .dlg-raster { grid-template-columns: 1fr; }
  .dlg-text { padding: 18px 18px 16px; }
  .dlg-text .icon-badge { display: none; }
  .dlg-text h2 { margin-top: 0; font-size: 1.18rem; padding-right: 42px; }
  .dlg-verkauf { font-size: .97rem; line-height: 1.52; margin-top: 9px; }
  .dlg-punkte { display: none; }
  .dlg-hinweis { margin-top: 12px; padding: 9px 11px; font-size: .8rem; }
  .dlg-form { padding: 16px 18px 18px; gap: 9px; }
  .dlg-form-titel { display: none; }
  .dlg-form label { font-size: .8rem; margin-bottom: 3px; }
  .dlg-form input, .dlg-form textarea { padding: 9px 11px; font-size: .93rem; }
  .dlg-form textarea { rows: 2; }
  .dlg-klein { font-size: .72rem; line-height: 1.35; }
  .feld-paar { gap: 9px; }
}
/* Sehr niedrige Geraete: dort faellt zusaetzlich das Nachrichtenfeld weg.
   Die Anfrage bleibt vollstaendig, wir rufen ohnehin zurueck. */
@media (max-width: 720px) and (max-height: 760px) {
  .dlg-form .field:has(textarea) { display: none; }
  .dlg-verkauf { font-size: .86rem; }
}

/* ==========================================================================
   BLAUER AKZENT AM ANFRAGEBLOCK
   Der Abschnitt war durchgehend hellgrau und fiel als Abschluss nicht auf.
   Ein Navy-Band traegt jetzt Ueberschrift und Zeile. Umgesetzt als Verlauf
   mit hartem Stopp statt als eigenes Element: dadurch reicht es von selbst
   ueber die volle Breite und der Inhalt darunter bleibt im Raster.
   ========================================================================== */
/* Der dunkle Bereich war frueher ein Farbverlauf fester Hoehe ueber den
   ganzen Abschnitt. Das ging schief, sobald der Kopftext anders umbrach als
   gedacht: bei 390px Breite endete das Band bei 260px, die Ueberschrift
   "Ihre Anfrage" begann aber schon bei 246px - ihre obere Haelfte lag damit
   dunkel auf dunkel und war weg, nur der Rest ragte unter der Kante heraus.
   Jetzt traegt der Kopfteil seinen Grund selbst. Damit endet die Farbe immer
   genau dort, wo der Kopf endet - unabhaengig von Breite, Umbruch und
   Schriftgroesse. */
#anfrage {
  padding-block-start: 0;
  border-top: 3px solid var(--color-accent);
  background: var(--color-bg);
}
.anfrage-kopf {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(3, 105, 161, .40) 0%, rgba(3, 105, 161, 0) 60%),
    var(--color-navy);
  padding-block: clamp(56px, 9vw, 112px) clamp(36px, 5.5vw, 64px);
  margin-bottom: var(--space-6);
}
.anfrage-kopf .section-head { margin-bottom: 0; }
#anfrage .section-head h2 { color: #fff; }
#anfrage .section-head .lead { color: #C4CFDC; }
#anfrage .anfrage-titel { color: var(--color-navy); }