/* ==========================================================================
   GEKAR Umzüge – Website im neuen Design
   Rebranding 2026-11 (Designsprache an muellermoving-umzuege.de orientiert, eigenständig für GEKAR entwickelt):
   EIN Designsystem für alle Seiten – eine Schriftfamilie (Archivo, variabel), feste Größenskala, feste Abstände,
   ein Knopfsystem, Linien statt Kästen. Farben: Petrol (Einstieg, Akzentabschnitte, Abschluss, Fuß), Weiß und ein
   sehr helles Petrol-Grau als Flächen, Türkis gezielt für Aktionen. Keine Verläufe, kein Leuchten, kein Glas.
   Mobil zuerst; Stufen ab 30rem, 40rem, 48rem, 64rem und 68.75rem (Desktop-Navigation).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Dunkelgrün / Petrol */
  --gruen: #173C43;
  --gruen-tief: #0F2A30;
  --logo-gruen: #196E70;
  /* Einheitliche Flächen und Aktionen: alle dunklen Hintergründe in genau einem Petrol (wie der Hero), alle türkisen
     Aktionsknöpfe deckend in einer Farbe – ohne Verläufe, Leuchten oder Wasserzeichen */
  --petrol: var(--gruen);
  --cta: var(--tuerkis);
  --cta-hover: var(--tuerkis-hell);
  --cta-text: var(--gruen-tief);
  /* Türkis: Aktionen und Akzente */
  --tuerkis: #19A99B;
  --tuerkis-hell: #4CC0B3;
  --tuerkis-licht: #7FDCD1;
  --tuerkis-text: #0D756B;
  --tuerkis-tief: #0A5D55;
  --mint: #E5F5F2;            /* nur für kleine Symbolflächen und Auswahl-/Hover-Zustände */
  /* Warmer Zusatzakzent (seit 08.11.2026): ein sanftes Apricot als Gegenton zu Petrol und Türkis. Nur für kleine,
     NICHT anklickbare Details – Akzentstrich der Dachzeilen, Akzentsegment der Linienkarten, Nummernplaketten, Punkte,
     Zitatbalken, Symbole auf Petrol, Spaltentitel im Fuß. Alles Anklickbare bleibt Türkis. Keine Flächen, keine
     Verläufe, keine Schrift in Apricot auf Weiß (Kontrast nur 2 : 1); auf Petrol gut lesbar (ca. 6 : 1). */
  --apricot: #F2A772;
  --apricot-zart: rgba(242, 167, 114, 0.16);
  /* Zwei Flächenfarben: Weiß und Petrol. Akzente in Türkis – auf Weiß kräftig, auf Petrol hell */
  --flaeche: #FFFFFF;
  --flaeche-hell: #F2F6F6;    /* sehr helles Petrol-Grau: ruhiger Wechsel zwischen weißen Abschnitten */
  --akzent: var(--tuerkis);
  --akzent-hell: var(--tuerkis-hell);
  --akzent-tief: var(--tuerkis-text);
  --akzent-auf-dunkel: var(--tuerkis-licht);
  --linie: #DCE4E5;           /* kühles, helles Petrol-Grau für Trennlinien und Kartenränder */
  --linie-stark: #7A8A8C;
  /* Text */
  --tinte: #293133;
  --tinte-2: #4F5456;
  --auf-dunkel: #F5FAF9;
  --auf-dunkel-2: #C2D2D3;
  --fehler: #B42318;

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --breite: 76rem;
  --rand: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  /* Abstände: ein Raster für alle Abschnitte (56 px Smartphone → 88 px Desktop) */
  --abschnitt: clamp(3.5rem, 2.4rem + 4.5vw, 5.5rem);
  --kopf-h: 4.5rem;
  --r-s: 6px;     /* Knöpfe, Felder */
  --r-m: 8px;     /* Karten, kleine Bilder */
  --r-l: 12px;    /* große Bilder, Bänder */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --schatten: 0 1px 2px rgba(15, 42, 48, 0.06);
  --schatten-hoch: 0 18px 40px -28px rgba(15, 42, 48, 0.45);
  --fokus: var(--tuerkis-text);
}
@media (min-width: 68.75rem) {
  :root { --kopf-h: 5.5rem; }
}

/* ---------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; }
@media (prefers-reduced-motion: no-preference) {
  html.ist-geladen { scroll-behavior: smooth; }
}
body {
  margin: 0;
  overflow-x: clip;
  background: #FFFFFF;
  color: var(--tinte);
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 64rem) { body { font-size: 1rem; } }
body.ist-gesperrt { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
a { color: var(--tuerkis-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tuerkis-tief); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
:is(main, section)[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.container { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.symbol { width: 1.25em; height: 1.25em; flex: none; }
.springlink {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1.25rem; border-radius: var(--r-s);
  background: var(--akzent); color: var(--gruen-tief); font-weight: 600; text-decoration: none; transition: top .2s;
}
.springlink:focus { top: 1rem; }
.ab-mittel { display: none; }
@media (min-width: 30rem) { .nur-klein { display: none; } .ab-mittel { display: inline; } }

/* Dunkle Flächen: helle Schrift, Fokus in Kraftbeige */
.kopf, .mobilmenue, .hero, .seitenkopf, .abschnitt--dunkel, .abschluss__panel, .band, .fuss, .anfrage__kopf, .stempel {
  --fokus: var(--akzent);
}

/* ---------------------------------------------------------------- Typografie */
/* Größenskala (Smartphone → Desktop): Einstieg 34 → 60 px, h2 30 → 46 px, h3 19 → 24 px, Einleitung 16 → 18 px,
   Text 15 → 16 px, Dachzeile 11 → 12 px. Überschriften 750, eng gesetzt; Text 400. */
.hero__titel, .seitenkopf__titel, h2, .schnell__titel, .anfrage__titel, .rechtstext h1 {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 100%;
  letter-spacing: -0.032em;
}
h2 {
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem);
  line-height: 1.1;
  color: var(--gruen);
}
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  color: var(--gruen);
}
.zeile { display: block; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #FFFFFF; }
/* Der GEKAR-Leitsatz bleibt als Markenzeile in Versalien – alle übrigen Überschriften in Satzschreibung */
.leitsatz { text-transform: uppercase; letter-spacing: -0.005em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem;
  font-size: clamp(.6875rem, .66rem + .1vw, .75rem); font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tuerkis-text);
}
/* kurzer Strich mit schräg angeschnittenem Ende – wie der Pfeil im Logo */
.eyebrow::before {
  content: ""; width: 1rem; height: 4px; flex: none;
  background: var(--apricot);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.eyebrow .symbol { width: 1.125rem; height: 1.125rem; }
:is(.hero, .abschnitt--dunkel, .seitenkopf, .abschluss__panel, .stempel) .eyebrow { color: var(--akzent-auf-dunkel); }
.lead {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--tinte-2);
}
.abschnitt--dunkel .lead, .abschnitt--dunkel p { color: var(--auf-dunkel-2); }

.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  font-size: .78125rem; font-weight: 600; line-height: 1.25;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--apricot); flex: none; }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.25rem;
  border: 1.5px solid transparent; border-radius: var(--r-s);
  font-family: var(--font-text); font-size: .875rem; font-weight: 650; line-height: 1.2; letter-spacing: 0;
  text-align: center; text-decoration: none;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .3s, transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover { text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf .symbol { width: 1.25rem; height: 1.25rem; transition: transform .3s var(--ease); }
.knopf:hover .symbol[class*="symbol"]:last-child { transform: translateX(0); }
.knopf--gross { min-height: 3rem; padding: .75rem 1.4rem; font-size: .875rem; }
@media (min-width: 64rem) {
  .knopf { min-height: 3.125rem; font-size: .9375rem; }
  .knopf--gross { min-height: 3.25rem; padding-inline: 1.6rem; font-size: .9375rem; }
}
.knopf--breit { width: 100%; }
@media (min-width: 30rem) { .knopf { white-space: nowrap; } }
/* sehr schmale Smartphones: etwas weniger Innenabstand, damit große Buttons einzeilig bleiben */
@media (max-width: 22.49rem) { .knopf--gross { padding-inline: 1rem; } }
@media (max-width: 29.99rem) {
  .abschluss__text > .knopf, .band__aktionen .knopf, .gebiet__karte > .knopf, .ablauf__aktion .knopf { width: 100%; }
}

.knopf--primaer { background: var(--cta); color: var(--cta-text); }
.knopf--primaer:hover { background: var(--cta-hover); color: var(--cta-text); }
.knopf--primaer:hover > .symbol:last-child { transform: translateX(4px); }

.knopf--glas { background: transparent; border-color: rgba(255, 255, 255, 0.38); color: #FFFFFF; }
.knopf--glas:hover { background: rgba(255, 255, 255, 0.1); border-color: #FFFFFF; color: #FFFFFF; }
.knopf--glas .symbol { color: var(--tuerkis-licht); }

.knopf--linie { background: transparent; border-color: rgba(23, 60, 67, 0.3); color: var(--gruen); }
.knopf--linie:hover { background: var(--gruen); border-color: var(--gruen); color: #FFFFFF; }
.knopf--linie .symbol { color: var(--tuerkis-text); }
.knopf--linie:hover .symbol { color: var(--tuerkis-licht); }


/* ---------------------------------------------------------------- Kopfbereich */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  color: #FFFFFF;
  transition: box-shadow .35s;
}
.kopf::before {
  content: ""; position: absolute; inset: 0;
  background: var(--petrol);
  opacity: 0; transition: opacity .35s;
}
.kopf.ist-gescrollt::before, .kopf.ist-menue-offen::before { opacity: 1; }
.kopf.ist-gescrollt { box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.7); }
.kopf__inner { position: relative; display: flex; align-items: center; gap: 1rem; height: 100%; }

.marke { display: inline-flex; align-items: center; flex: none; color: #FFFFFF; text-decoration: none; border-radius: 6px; }
.logo { width: auto; }
.logo--quer { height: 2.75rem; }
.logo__haus, .logo__zusatz { fill: var(--tuerkis); }
.logo__schrift { fill: #FFFFFF; }
@media (min-width: 68.75rem) { .logo--quer { height: 3.125rem; } }

.hauptnav { display: none; }
.hauptnav__liste { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.hauptnav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 2.75rem; padding: .5rem .8rem;
  border: 0; border-radius: 6px; background: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.hauptnav__link:hover, .hauptnav__gruppe.ist-offen .hauptnav__knopf { color: #FFFFFF; text-decoration: none; }
/* aktiver Punkt: türkiser Unterstrich in Textbreite; beim Überfahren wächst er kurz an */
.hauptnav__link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .35rem; height: 2px; border-radius: 2px;
  background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.hauptnav__knopf::after { right: 2.1rem; }
.hauptnav__link:hover::after { transform: scaleX(.35); }
.hauptnav__link[aria-current="page"], .hauptnav__link.ist-aktiv, .hauptnav__knopf[data-aktiv] { color: #FFFFFF; }
.hauptnav__link[aria-current="page"]::after, .hauptnav__link.ist-aktiv::after, .hauptnav__knopf[data-aktiv]::after { transform: none; }
.hauptnav__pfeil { width: 1rem; height: 1rem; transition: transform .25s; }
.hauptnav__gruppe.ist-offen .hauptnav__pfeil { transform: rotate(180deg); }

.megamenue {
  position: absolute; top: calc(100% - .5rem); left: 50%;
  width: min(46rem, 100%);
  padding: 1rem;
  border-radius: var(--r-l);
  background: #FFFFFF; color: var(--tinte);
  box-shadow: 0 30px 70px -30px rgba(15, 42, 48, 0.65), 0 0 0 1px rgba(23, 60, 67, 0.06);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
  --fokus: var(--tuerkis-text);
}
.hauptnav__gruppe.ist-offen .megamenue { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
html:not(.js) .hauptnav__gruppe:focus-within .megamenue { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.megamenue__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: 0; list-style: none; }
.megamenue__eintrag {
  display: flex; align-items: flex-start; gap: .9rem; height: 100%;
  padding: .85rem; border-radius: var(--r-m);
  color: var(--tinte); text-decoration: none;
  transition: background-color .2s;
}
.megamenue__eintrag:hover, .megamenue__eintrag[aria-current="page"] { background: var(--mint); color: var(--tinte); text-decoration: none; }
.megamenue__symbol {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-s);
  background: var(--gruen); color: var(--akzent); transition: transform .3s var(--ease);
}
.megamenue__eintrag:hover .megamenue__symbol { transform: scale(1.06) rotate(-3deg); }
.megamenue__symbol .symbol { width: 1.5rem; height: 1.5rem; }
.megamenue__text { display: grid; gap: .15rem; }
.megamenue__text strong { color: var(--gruen); font-size: .875rem; line-height: 1.3; }
.megamenue__text span { color: var(--tinte-2); font-size: .78125rem; line-height: 1.45; }
.megamenue__alle {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 100%; padding: .85rem; border-radius: var(--r-m);
  background: var(--mint); color: var(--tuerkis-tief); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.megamenue__alle:hover { background: var(--gruen); color: #FFFFFF; text-decoration: none; }
.megamenue__alle .symbol { transition: transform .3s var(--ease); }
.megamenue__alle:hover .symbol { transform: translateX(4px); }

.kopf__aktionen { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.kopf__telefon {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .7rem;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px;
  color: #FFFFFF; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.kopf__telefon:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.kopf__telefon .symbol { width: 1.15rem; height: 1.15rem; color: var(--tuerkis-licht); }
.kopf__nummer { display: none; }
.kopf__cta { display: none; order: -1; min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .875rem; }
.kopf__cta:hover { transform: none; }
.kopf__cta-kurz { display: none; }
/* erst nach dem ersten Scrollen einblenden (nur mit JavaScript; ohne bleibt er einfach sichtbar) */
.js .kopf__cta { transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.js .kopf:not(.ist-cta) .kopf__cta { opacity: 0; visibility: hidden; transform: translateY(-6px); }
/* Smartphone: kurzer Button „Anfragen“, sobald genug Platz neben Logo, Telefon und Menü ist */
@media (min-width: 22.5rem) and (max-width: 39.99rem) {
  .kopf__cta { display: inline-flex; min-height: 2.75rem; padding: .5rem .8rem; }
  .kopf__cta-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf__cta-kurz { display: inline; }
}
.kopf__menueknopf {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); color: #FFFFFF;
  transition: background-color .2s;
}
.kopf__menueknopf:hover { background: rgba(255, 255, 255, 0.14); }
.kopf__menueknopf .symbol { width: 1.4rem; height: 1.4rem; }
.kopf__menueknopf-zu, .kopf__menueknopf[aria-expanded="true"] .kopf__menueknopf-auf { display: none; }
.kopf__menueknopf[aria-expanded="true"] .kopf__menueknopf-zu { display: block; }

@media (min-width: 40rem) {
  .kopf__cta { display: inline-flex; }
}
@media (min-width: 68.75rem) {
  .hauptnav { display: block; margin-inline: auto; }
  .kopf__menueknopf { display: none; }
  .kopf__inner { gap: 1.5rem; }
}
/* schmale Desktops (1100–1279 px): etwas engere Navigation, damit alle Punkte und die Buttons in eine Zeile passen */
@media (min-width: 68.75rem) and (max-width: 79.99rem) {
  .kopf__inner { gap: 1rem; }
  .logo--quer { height: 3rem; }
  .hauptnav__link { padding-inline: .55rem; font-size: .8125rem; }
  .hauptnav__link::after { left: .55rem; right: .55rem; }
  .hauptnav__knopf::after { right: 1.85rem; }
  .kopf__cta { padding-inline: 1rem; }
}
@media (min-width: 87.5rem) {
  .kopf__nummer { display: inline; }
  .kopf__telefon { padding: 0 1rem 0 .85rem; }
}

/* Heller Kopf: Weiß mit feiner Linie, Logo in den Farben für helle Flächen (Haus #196E70, Schriftzug Petrol),
   Navigation in Petrol, aktiver Punkt türkis unterstrichen. Der Einstieg darunter bleibt Petrol – klarer Kontrast. */
.kopf { color: var(--gruen); --fokus: var(--tuerkis-text); }
.kopf::before { background: #FFFFFF; opacity: 1; border-bottom: 1px solid var(--linie); }
.kopf.ist-gescrollt { box-shadow: 0 10px 30px -24px rgba(15, 42, 48, 0.5); }
.kopf .marke { color: var(--gruen); }
.kopf .logo__haus, .kopf .logo__zusatz { fill: var(--logo-gruen); }
.kopf .logo__schrift { fill: var(--gruen); }
.hauptnav__link { color: var(--tinte-2); }
.hauptnav__link:hover, .hauptnav__gruppe.ist-offen .hauptnav__knopf,
.hauptnav__link[aria-current="page"], .hauptnav__link.ist-aktiv, .hauptnav__knopf[data-aktiv] { color: var(--gruen); }
.hauptnav__link::after { bottom: .3rem; background: var(--tuerkis); }
.kopf__telefon { border-color: var(--linie); color: var(--gruen); }
.kopf__telefon:hover { color: var(--gruen); background: var(--flaeche-hell); border-color: rgba(23, 60, 67, 0.3); }
.kopf__telefon .symbol { color: var(--tuerkis-text); }
.kopf__menueknopf { border-color: var(--linie); background: #FFFFFF; color: var(--gruen); }
.kopf__menueknopf:hover { background: var(--flaeche-hell); }

/* Mobilmenü */
.mobilmenue {
  position: fixed; inset: calc(var(--kopf-h) + env(safe-area-inset-top, 0px)) 0 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 1rem var(--rand) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--petrol); color: #FFFFFF;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, transform .3s var(--ease);
}
.mobilmenue.ist-offen { opacity: 1; transform: none; }
.mobilmenue__liste { margin: 0; padding: 0; list-style: none; }
.mobilmenue__liste > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobilmenue__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .5rem 0;
  color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.125rem;
  text-decoration: none; cursor: pointer; list-style: none;
}
.mobilmenue__link::-webkit-details-marker { display: none; }
.mobilmenue__link:hover { color: var(--akzent-auf-dunkel); text-decoration: none; }
.mobilmenue__pfeil { width: 1.4rem; height: 1.4rem; transition: transform .25s; }
.mobilmenue__gruppe[open] .mobilmenue__pfeil { transform: rotate(180deg); }
.mobilmenue__unter { display: grid; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mobilmenue__eintrag, .mobilmenue__alle {
  display: flex; align-items: center; gap: .85rem; min-height: 3rem; padding: .5rem .75rem;
  border-radius: var(--r-s); color: var(--auf-dunkel); font-size: .9375rem; font-weight: 600; text-decoration: none;
}
.mobilmenue__eintrag:hover, .mobilmenue__eintrag[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; text-decoration: none; }
.mobilmenue__eintrag .symbol { width: 1.4rem; height: 1.4rem; color: var(--akzent); }
.mobilmenue__alle { justify-content: space-between; color: var(--tuerkis-licht); }
.mobilmenue__alle:hover { color: #FFFFFF; text-decoration: none; }
.mobilmenue__fuss { display: grid; gap: .75rem; }
.mobilmenue__kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mobilmenue__mail { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; color: var(--auf-dunkel-2); font-size: .875rem; text-decoration: none; }
.mobilmenue__mail:hover { color: #FFFFFF; }
.mobilmenue__mail .symbol { color: var(--tuerkis-licht); }
@media (min-width: 68.75rem) { .mobilmenue { display: none !important; } }

/* ---------------------------------------------------------------- Einstieg (Hero)
   Petrol in natürlicher Höhe: links Dachzeile, Überschrift, Unterzeile, Anfrage mit Telefon/WhatsApp als ruhige Links,
   Hinweis und Google; rechts das Foto der Geschäftsführer mit angehängter Namenskarte; unten über die volle Breite die
   Vertrauensleiste. Smartphone: alles untereinander, Vorteile 2 × 2. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--kopf-h) + clamp(2rem, 1rem + 3vw, 4rem)) 0 0;
  background: var(--petrol); color: var(--auf-dunkel);
  --akzent: var(--tuerkis-hell); --akzent-hell: var(--tuerkis-licht);
}
.hero__bild { position: absolute; inset: 0; z-index: -1; }
.hero__flaeche { background: var(--petrol); }
.hero__raster { display: grid; gap: 2.25rem; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero__eyebrow { margin-bottom: 1.1rem; }
.hero__titel > .eyebrow { display: flex; width: fit-content; }
/* „Wohin geht’s?“ gibt es auf dem Smartphone nicht – ab Tablet-Breite als helles Band unter dem Einstieg */
@media (max-width: 39.99rem) { .hero__box { display: none !important; } }

/* Google-Bewertung: eine kompakte Plakette über den Buttons. Zustände: platzhalter (Demo, ohne Zahlen), laedt, ok (Link),
   fehler (nur Link zum Profil ohne Zahlen oder ausgeblendet) */
.google-bewertung {
  display: inline-flex; align-items: center; gap: .7rem; align-self: flex-start; max-width: 100%; min-height: 3rem;
  margin: 1.25rem 0 0; padding: .4rem 1.1rem .4rem .45rem;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: transparent;
  color: #FFFFFF; text-decoration: none; transition: border-color .25s, background-color .25s;
}
a.google-bewertung:hover { border-color: rgba(127, 220, 209, 0.65); background: rgba(255, 255, 255, 0.1); color: #FFFFFF; text-decoration: none; }
a.google-bewertung:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.google-bewertung__marke { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #FFFFFF; }
.google-bewertung__logo { width: 1.3rem; height: 1.3rem; }
.google-bewertung__inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; min-width: 0; color: var(--auf-dunkel-2); font-size: .8125rem; line-height: 1.3; }
.google-bewertung__inhalt strong { color: #FFFFFF; font-weight: 600; }
.google-bewertung__demo {
  padding: .05rem .45rem; border: 1px dashed rgba(127, 220, 209, 0.7); border-radius: 6px;
  color: var(--akzent-auf-dunkel); font-size: .6875rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
}
.google-bewertung__wert { display: inline-flex; align-items: center; gap: .45rem; }
.google-bewertung__wert strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.google-bewertung__sterne { position: relative; display: inline-flex; width: max-content; }
.google-bewertung__sterne .symbol { flex: none; width: .9rem; height: .9rem; }
.google-bewertung__leer { display: inline-flex; gap: .1rem; color: rgba(255, 255, 255, 0.25); }
.google-bewertung__voll { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: .1rem; overflow: hidden; color: var(--akzent); }
.google-bewertung__quelle { color: var(--auf-dunkel-2); font-size: .6875rem; }
.google-bewertung__pfeil { flex: none; width: 1rem; height: 1rem; margin-left: -.2rem; color: var(--akzent); transition: transform .3s var(--ease); }
a.google-bewertung:hover .google-bewertung__pfeil { transform: translateX(3px); }
.google-bewertung__skelett {
  display: block; width: 10.5rem; height: .75rem; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.1) 70%) 0 0 / 220% 100%;
  animation: lade-schimmer 1.4s linear infinite;
}
@keyframes lade-schimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .google-bewertung__skelett { animation: none; } }
html:not(.js) .google-bewertung[data-zustand="laedt"] { display: none; }
@media (max-width: 23.99rem) { .google-bewertung { border-radius: 18px; } }
.hero__titel {
  margin: 0;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.625rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.hero__zeile { display: block; }
.hero__zeile--akzent { color: var(--akzent); }
.hero__unterzeile { margin: 1.25rem 0 0; max-width: 32rem; font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.55; color: var(--auf-dunkel-2); }
.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2rem; }
.hero__kontakt { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.hero__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  color: #FFFFFF; font-size: .9375rem; font-weight: 650; text-decoration: none;
}
.hero__link .symbol { width: 1.15rem; height: 1.15rem; color: var(--tuerkis-licht); }
.hero__link:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: .3em; }
.hero__hinweis { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; color: var(--auf-dunkel-2); font-size: .8125rem; }
.hero__hinweis .symbol { width: 1rem; height: 1rem; color: var(--akzent); }
.hero .google-bewertung { margin-top: 1.5rem; }

/* Geschäftsführer: Foto mit angehängter Namenskarte (Foto oben gerundet, Karte unten) */
.hero__gruender { display: flex; flex-direction: column; min-width: 0; }
.hero__gruender > .bild { aspect-ratio: 4 / 3; border-radius: var(--r-l) var(--r-l) 0 0; }
.hero__gruender > .bild img { object-position: 50% 40%; }
.hero__gruender .gruender {
  margin: 0; padding: 1rem 1.25rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.1); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l);
  background: rgba(255, 255, 255, 0.05);
}

/* Vertrauensleiste: vier Vorteile über die volle Breite, feine Linien statt Kästen */
.hero__vorteile {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__vorteil {
  display: flex; align-items: center; gap: .65rem; min-width: 0; padding: 1rem .5rem 1rem 0;
  color: #FFFFFF; font-size: .8125rem; font-weight: 650; line-height: 1.3; -webkit-tap-highlight-color: transparent;
}
.hero__vorteil:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.hero__vorteil:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.hero__vorteil-symbol {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--apricot-zart); color: var(--apricot);
  transition: background-color .25s, color .25s, transform .3s var(--ease);
}
.hero__vorteil-symbol .symbol { width: 1.15rem; height: 1.15rem; }
.hero__vorteil.ist-angetippt .hero__vorteil-symbol { background: var(--apricot); color: var(--gruen-tief); transform: scale(1.08); }
@media (hover: hover) { .hero__vorteil:hover .hero__vorteil-symbol { background: var(--apricot); color: var(--gruen-tief); } }
@media (min-width: 48rem) {
  .hero__vorteile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__vorteil { padding: 1.6rem 1rem 1.75rem 1.25rem; border-bottom: 0 !important; font-size: .9375rem; }
  .hero__vorteil:nth-child(n) { border-left: 1px solid rgba(255, 255, 255, 0.14); }
  .hero__vorteil:first-child { padding-left: 0; border-left: 0; }
  .hero__vorteil-symbol { width: 2.5rem; height: 2.5rem; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .hero__gruender > .bild { aspect-ratio: 16 / 10; } }
@media (min-width: 64rem) {
  .hero__raster { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: clamp(2.5rem, 4vw, 3.5rem); align-items: center; }
}
/* niedrige Laptop-Bildschirme: Foto etwas flacher, damit Anfrage und Vertrauensleiste in die erste Ansicht passen */
@media (min-width: 64rem) and (max-height: 50rem) {
  .hero { padding-top: calc(var(--kopf-h) + 2rem); }
  .hero__gruender > .bild { aspect-ratio: 16 / 11; }
  .hero__vorteil { padding-block: 1.1rem 1.25rem; }
}

/* ---------------------------------------------------------------- Smartphone: Kopf und Einstieg (unter 640 px)
   Kompakt und klar: Kopf 64 px, Überschrift 34 px, Text 15 px, ein Hauptknopf (48 px) über die volle Breite, darunter
   Anrufen und WhatsApp als ruhige Links, dann Foto mit Namenskarte und die Vorteile 2 × 2. */
@media (max-width: 39.99rem) {
  :root { --kopf-h: 4rem; }
  .logo--quer { height: 2.25rem; }
  .marke { min-height: 2.75rem; }   /* Tippfläche des Logos bleibt 44 px hoch */
  .kopf__aktionen { gap: .5rem; }
  .hero { padding-top: calc(var(--kopf-h) + 1.75rem); }
  .hero__raster { gap: 1.75rem; }
  .hero__eyebrow { margin-bottom: .8rem; }
  .hero__unterzeile { margin-top: .875rem; font-size: .9375rem; }
  .hero__aktionen { display: grid; width: 100%; gap: .25rem; margin-top: 1.5rem; }
  .hero__aktionen > .knopf { width: 100%; }
  .hero__kontakt { justify-content: center; gap: 0 1.75rem; }
  .hero__link { font-size: .875rem; }
  .hero__hinweis { align-self: center; margin-top: .25rem; font-size: .75rem; }
  /* Google-Bewertung: schlanke Zeile statt Kapsel */
  .hero .google-bewertung { align-self: center; margin-top: 1rem; min-height: 0; padding: 0; gap: .55rem; border: 0; border-radius: 0; background: none; }
  .google-bewertung__marke { width: 1.5rem; height: 1.5rem; }
  .google-bewertung__logo { width: .95rem; height: .95rem; }
  .google-bewertung__inhalt { gap: .2rem .5rem; font-size: .75rem; }
  .google-bewertung__demo { padding: 0 .4rem; font-size: .6875rem; }
  .hero__gruender .gruender { padding: .85rem 1rem .95rem; }
}
/* sehr schmale Handys (unter 360 px): „Anfragen“ hat neben Logo, Telefon und Menü keinen Platz – dort genügen Menü und Kontaktknopf */
@media (max-width: 22.49rem) { .kopf__cta { display: none !important; } }

/* Schnellanfrage „Wohin geht’s?“: helles Band direkt unter dem Einstieg (Tablet und Desktop) */
.schnellband { padding-block: clamp(1.75rem, 1rem + 2vw, 2.5rem); background: var(--flaeche-hell); border-bottom: 1px solid var(--linie); }
.schnell { position: relative; --fokus: var(--tuerkis-text); }
.schnell__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; margin-bottom: 1.1rem; }
.schnell__titel { font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); line-height: 1.1; color: var(--gruen); }
.schnell__unterzeile { margin: 0; color: var(--tuerkis-text); font-size: .8125rem; font-weight: 650; }
.schnell__arten { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.schnell__art { position: relative; cursor: pointer; }
.schnell__art input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Leistungsauswahl: verhält sich wie die übrigen Knöpfe – beim Überfahren Rahmen in Petrol und helle Fläche,
   beim Drücken kurz kleiner, ausgewählt deckend Petrol */
.schnell__art span {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1.5px solid var(--linie); border-radius: 999px; background: #FFFFFF;
  color: var(--tinte); font-size: .8125rem; font-weight: 650; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15, 42, 48, 0.05);
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s var(--ease);
}
.schnell__art span .symbol { width: 1.1rem; height: 1.1rem; color: var(--tuerkis-text); transition: color .2s, transform .3s var(--ease); }
.schnell__art:hover span { border-color: var(--gruen); background: var(--mint); color: var(--gruen); box-shadow: 0 6px 16px -10px rgba(15, 42, 48, 0.45); }
.schnell__art:hover span .symbol { transform: scale(1.1); }
.schnell__art:active span { transform: scale(.97); }
.schnell__art input:checked + span { background: var(--gruen); border-color: var(--gruen); color: #FFFFFF; box-shadow: none; }
.schnell__art input:checked + span .symbol { color: var(--tuerkis-licht); }
.schnell__art:hover input:checked + span { background: var(--gruen-tief); border-color: var(--gruen-tief); }
.schnell__art input:focus-visible + span { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }
.schnell__felder { display: grid; gap: .85rem; margin-bottom: 1.1rem; }
.schnell__feld { display: grid; gap: .4rem; min-width: 0; }
.schnell__feld label { color: var(--tinte-2); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.schnell__eingabe { position: relative; }
.schnell__eingabe > .symbol { position: absolute; left: 1rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); color: var(--tuerkis-text); pointer-events: none; }
/* Eingabefelder: dieselbe Rückmeldung wie die Knöpfe – beim Überfahren dunklerer Rahmen und leichter Schatten,
   das Symbol färbt sich; beim Eingeben türkiser Rahmen mit Fokusring */
.schnell__eingabe :is(input, select) {
  width: 100%; height: 3.25rem; padding: 0 1rem 0 2.8rem;
  border: 1.5px solid var(--linie); border-radius: var(--r-s);
  background: #FFFFFF; color: var(--tinte); font-size: .9375rem; cursor: text;
  box-shadow: 0 1px 2px rgba(15, 42, 48, 0.05);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.schnell__eingabe select { cursor: pointer; }
.schnell__eingabe > .symbol { transition: color .2s, transform .3s var(--ease); }
.schnell__eingabe:hover :is(input, select):not(:focus):not(:disabled) { border-color: var(--gruen); box-shadow: 0 6px 16px -10px rgba(15, 42, 48, 0.45); }
.schnell__eingabe:hover > .symbol, .schnell__eingabe:focus-within > .symbol { color: var(--gruen); transform: translateY(-50%) scale(1.12); }
.schnell__feld:focus-within label { color: var(--tuerkis-text); }
.schnell__feld label { transition: color .2s; cursor: pointer; }
.schnell__eingabe select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m9 12.5 7 7 7-7' fill='none' stroke='%230D756B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center / 1.25rem;
}
.schnell__eingabe :is(input, select)::placeholder { color: #6B7476; }
.schnell__eingabe :is(input, select):focus { outline: none; border-color: var(--tuerkis-text); box-shadow: 0 0 0 4px rgba(25, 169, 155, 0.22); }
.schnell__absenden { margin-top: .1rem; }
.schnell__vorteile { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--tinte-2); font-size: .8125rem; }
.schnell__vorteile li { display: inline-flex; align-items: center; gap: .4rem; }
.schnell__vorteile .symbol { width: 1.1rem; height: 1.1rem; color: var(--tuerkis-text); }
@media (min-width: 40rem) and (max-width: 68.74rem) {
  .schnell__felder { grid-template-columns: 1fr 1fr; }
}
/* Desktop: Anfrage als Leiste unter Text und Foto – Titel und Leistungsauswahl links bzw. oben, Felder und Knopf in einer
   Reihe. Bis 1399 px zweizeilig, ab 1400 px alles in einer Zeile. */
@media (min-width: 68.75rem) {
  .schnell {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.75rem; align-items: end;
    grid-template-areas: "kopf arten" "felder knopf" "vorteile vorteile";
  }
  .schnell__kopf { grid-area: kopf; align-self: center; margin-bottom: 1.1rem; }
  .schnell__arten { grid-area: arten; flex-wrap: nowrap; justify-self: end; margin-bottom: 1.1rem; }
  .schnell__felder { grid-area: felder; grid-template-columns: 1fr 1fr; margin-bottom: 0; }
  .schnell__absenden { grid-area: knopf; width: auto; white-space: nowrap; margin-top: 0; }
  .schnell__vorteile { grid-area: vorteile; margin-top: 1.1rem; padding-top: .9rem; }
}
@media (min-width: 87.5rem) {
  .schnell { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kopf felder knopf" "arten felder knopf" "vorteile vorteile vorteile"; column-gap: 2rem; }
  .schnell__kopf { align-self: start; margin-bottom: .9rem; }
  .schnell__arten { justify-self: start; margin-bottom: 0; }
}

/* Einstieg beim Laden: Inhalte gleiten nacheinander herein.
   Überschrift und Foto sind sofort sichtbar und gleiten nur sanft an ihren Platz (kein Ausblenden) – so verzögert die
   Animation den ersten großen Seitenaufbau (LCP) nicht. Die übrigen Elemente blenden wie bisher nacheinander ein. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__unterzeile, .js .hero .google-bewertung, .js .hero__aktionen, .js .hero__hinweis, .js .hero__vorteile,
  .js .seitenkopf__text > :not(.seitenkopf__titel) {
    animation: hereingleiten .9s var(--ease) both;
  }
  .js .hero__titel > *, .js .hero__gruender, .js .seitenkopf__titel, .js .seitenkopf__bild {
    animation: heranschieben .8s var(--ease) both;
  }
  .js .hero__zeile:nth-child(3) { animation-delay: .06s; }
  .js .hero__unterzeile { animation-delay: .2s; }
  .js .hero__aktionen { animation-delay: .28s; }
  .js .hero__hinweis { animation-delay: .34s; }
  .js .hero .google-bewertung { animation-delay: .38s; }
  .js .hero__vorteile { animation-delay: .45s; }
  .js .seitenkopf__text > :nth-child(4) { animation-delay: .1s; }
  .js .seitenkopf__text > :nth-child(5) { animation-delay: .2s; }
}
@keyframes hereingleiten { from { opacity: 0; transform: translateY(26px); } }
@keyframes heranschieben { from { transform: translateY(18px); } }

/* ---------------------------------------------------------------- Persönliche Akzente im Text (seit 08.11.2026)
   Botschaft: eine kurze, prägnante Überschrift und genau ein Satz – ohne Kasten, mit der Linie und dem Apricot-
   Segment der Linienkarten. Sparsam: höchstens eine Botschaft pro Seite bzw. Abschnitt.
   Zwischentitel: kleine Überschrift innerhalb eines Fließtexts. Gruß: persönliche Zeile im Kontaktbereich. */
.botschaft { position: relative; max-width: 34rem; margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) 0 0; padding-top: 1.25rem; border-top: 2px solid var(--linie); }
.botschaft::before { content: ""; position: absolute; top: -2px; left: 0; width: 2.5rem; height: 2px; background: var(--apricot); }
.botschaft__titel { margin: 0 0 .45rem; font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.2; }
.botschaft__text { margin: 0; color: var(--tinte-2); font-size: 1rem; line-height: 1.6; }
.abschnitt--dunkel .botschaft { border-top-color: rgba(255, 255, 255, 0.14); }
.umfang__seite { display: grid; align-content: start; min-width: 0; }
.umfang__seite > .botschaft { margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); }
.abschnitt--dunkel .botschaft__text { color: var(--auf-dunkel-2); }
.zwischentitel { margin: 1.75rem 0 .5rem; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); }
.gruss { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 1.25rem 0 0; color: var(--auf-dunkel-2); font-size: .9375rem; }
.gruss__name { display: inline-flex; align-items: center; gap: .55rem; color: #FFFFFF; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.gruss__name::before { content: ""; width: 1rem; height: 2px; background: var(--apricot); }

/* ---------------------------------------------------------------- Bildflächen und Platzhalter */
.bild {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0;
  aspect-ratio: var(--format, 4/3);
  border-radius: var(--r-l);
  background: var(--linie);
}
.bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bild__flaeche {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--flaeche);
  transition: transform .8s var(--ease);
}
.bild__symbol { width: clamp(3rem, 24%, 6.5rem); height: auto; aspect-ratio: 1; color: rgba(23, 60, 67, 0.22); }
/* gestrichelter Innenrahmen: zeigt deutlich, dass hier ein Foto hingehört */
.bild--platzhalter::after {
  content: ""; position: absolute; inset: .75rem; z-index: 1; pointer-events: none;
  border: 1.5px dashed var(--linie); border-radius: calc(var(--r-l) - 8px);
}
.bild__etikett {
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 2.5rem);
  padding: .38rem .8rem .38rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88); color: var(--gruen);
  font-size: .75rem; font-weight: 600; line-height: 1.3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bild__etikett .symbol { width: 1rem; height: 1rem; color: var(--tuerkis-text); }
.bild--sand .bild__flaeche { background: var(--flaeche); }
.bild--sand .bild__symbol { color: rgba(13, 117, 107, 0.4); }
.bild--sand::after { border-color: rgba(13, 117, 107, 0.35); }
.bild--dunkel { background: var(--petrol); }
.bild--dunkel .bild__flaeche { background: var(--petrol); }
.bild--dunkel .bild__symbol { color: rgba(127, 220, 209, 0.45); }
.bild--dunkel::after { border-color: rgba(127, 220, 209, 0.45); }
.bild--dunkel .bild__etikett { background: rgba(15, 42, 48, 0.72); color: #FFFFFF; }
.bild--dunkel .bild__etikett .symbol { color: var(--akzent); }
.bild:hover .bild__flaeche, .bild:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------- Abschnitte */
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--hell { background: var(--flaeche-hell); }
.abschnitt--dunkel { position: relative; isolation: isolate; overflow: hidden; background: var(--petrol); color: var(--auf-dunkel); }
.abschnitt--ohne-oben { padding-top: 0; }
/* Weiße Abschnitte direkt hintereinander: feine Trennlinie in Inhaltsbreite (nicht über einem Petrol-Band) */
:is(.abschnitt, .naechster-schritt):not(.abschnitt--dunkel):not(.abschnitt--hell) + .abschnitt:not(.abschnitt--dunkel):not(.abschnitt--hell):not(.abschnitt--ohne-oben) { position: relative; }
:is(.abschnitt, .naechster-schritt):not(.abschnitt--dunkel):not(.abschnitt--hell) + .abschnitt:not(.abschnitt--dunkel):not(.abschnitt--hell):not(.abschnitt--ohne-oben)::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(var(--breite), 100% - 2 * var(--rand)); height: 1px;
  background: var(--linie); transform: translateX(-50%);
}
.faq + .abschnitt--ohne-oben { padding-top: var(--abschnitt); }

/* Themenabschnitt einer Leistung (Möbelmontage: Möbelaufbau) */
.schwerpunkt__raster { display: grid; gap: 2rem; align-items: center; }
.schwerpunkt__text h2 { margin-bottom: 1rem; }
.schwerpunkt__aktion { margin: 1.5rem 0 0; }
.schwerpunkt__hinweis { max-width: 32rem; margin: 1rem 0 0; color: var(--tinte-2); font-size: .75rem; line-height: 1.5; }
.schwerpunkt__punkte { display: grid; gap: 1.75rem 2rem; margin: clamp(2rem, 1.6rem + 1.5vw, 2.75rem) 0 0; padding: 0; list-style: none; }
.schwerpunkt__punkt {
  padding: 1.25rem 0 0; border-top: 2px solid var(--linie);
  position: relative; transition: border-color .25s;
}
.schwerpunkt__symbol { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .8rem; border-radius: 50%; background: var(--gruen); color: var(--apricot); }
.schwerpunkt__symbol .symbol { width: 1.35rem; height: 1.35rem; }
.schwerpunkt__punkt h3 { margin-bottom: .35rem; font-size: 1.0625rem; }
.schwerpunkt__punkt p { color: var(--tinte-2); font-size: .9375rem; }
.js .schwerpunkt__punkt.ist-sichtbar { transition: opacity .8s var(--ease), transform .25s var(--ease), box-shadow .25s; transition-delay: 0s; }
@media (hover: hover) { .schwerpunkt__punkt:hover { border-top-color: var(--tuerkis); } }
@media (min-width: 40rem) { .schwerpunkt__punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.schwerpunkt--ohne-bild .schwerpunkt__punkte { margin-top: 0; }
.schwerpunkt--ohne-bild .schwerpunkt__aktion { margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .schwerpunkt__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; }
  .schwerpunkt__punkte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.faq__cta { margin: 1.25rem 0 0; }
/* Abschnittskopf (überall gleich): links Dachzeile und Überschrift, rechts – unten bündig – eine kurze Einleitung */
.abschnittskopf { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.abschnittskopf .eyebrow { margin-bottom: .9rem; }
@media (min-width: 56rem) {
  .abschnittskopf { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 4rem; }
  .abschnittskopf > .lead, .abschnittskopf > div + div { justify-self: end; }
  .abschnittskopf > .lead { max-width: 28rem; font-size: 1rem; }
}

/* Planungshilfen direkt nach dem Ablauf: zentrierter Kopf, zwei Hilfen nebeneinander, darunter der Direktlink */
/* Planungshilfen (helles Petrol-Grau): Kopf mit Direktlink rechts, zwei Hilfen als weiße Karten nebeneinander */
.naechster-schritt__raster { display: grid; gap: .75rem; }
.helferkarte {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  width: 100%; min-height: 4.5rem; padding: .9rem 1rem; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--flaeche); color: var(--tinte); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 0 rgba(23, 60, 67, 0.04); -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), border-color .2s, box-shadow .25s, background-color .2s;
}
.helferkarte__symbol {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gruen); color: var(--akzent); transition: background-color .25s, color .25s, transform .3s var(--ease);
}
.helferkarte__symbol .symbol { width: 1.4rem; height: 1.4rem; }
.helferkarte__text { display: grid; gap: .2rem; }
.helferkarte__text strong { color: var(--gruen); font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.0625rem; line-height: 1.2; }
.helferkarte__text span { color: var(--tinte-2); font-size: .875rem; line-height: 1.45; }
.helferkarte__pfeil { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mint); color: var(--tuerkis-text); transition: transform .3s var(--ease), background-color .2s; }
.helferkarte__pfeil .symbol { width: 1.1rem; height: 1.1rem; }
.helferkarte:focus-visible { outline: 3px solid var(--tuerkis-text); outline-offset: 3px; }
.helferkarte:active { transform: scale(.985); background: var(--flaeche); }
@media (hover: hover) {
  .helferkarte:hover { transform: translateY(-3px); border-color: var(--akzent); box-shadow: var(--schatten-hoch); }
  .helferkarte:hover .helferkarte__symbol { background: var(--tuerkis); color: var(--gruen-tief); transform: rotate(-6deg); }
  .helferkarte:hover .helferkarte__pfeil { background: var(--mint); transform: translateX(3px); }
}
.naechster-schritt__direkt { margin: 0; color: var(--tinte-2); font-size: .9375rem; }
.naechster-schritt__direkt a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; font-weight: 600; }
.naechster-schritt__direkt .symbol { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.naechster-schritt__direkt a:hover .symbol { transform: translateX(3px); }
@media (min-width: 48rem) { .naechster-schritt__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) { .helferkarte { min-height: 5.5rem; padding: 1.25rem 1.35rem; } }

/* Kurze Vorstellung */
.vorstellung__raster { display: grid; gap: 2rem; }
.vorstellung__bild { position: relative; }
.stempel {
  display: flex; align-items: center; gap: .9rem; margin: 1rem 0 0; padding: 1rem 1.25rem;
  border-radius: var(--r-m); background: var(--gruen); color: #FFFFFF;
  font-size: .875rem; font-weight: 600; line-height: 1.4;
  box-shadow: var(--schatten-hoch);
}
.stempel .symbol { width: 2.25rem; height: 2.25rem; color: var(--apricot); }
.vorteile { display: grid; gap: 1.75rem 2rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.vorteil {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem .85rem;
  padding: 1.25rem 0 0; border-top: 2px solid var(--linie);
  position: relative; transition: border-color .25s;
}
.vorteil__symbol { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mint); color: var(--tuerkis-text); transition: background-color .25s, color .25s; }
.vorteil__symbol .symbol { width: 1.35rem; height: 1.35rem; }
.vorteil h3 { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.vorteil p { grid-column: 1 / -1; color: var(--tinte-2); font-size: .9375rem; line-height: 1.6; }
@media (min-width: 40rem) {
  .vorteile { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .vorteile--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-top: 0; }
  .vorteile--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stempel--zeile { display: inline-flex; margin-top: .5rem; }
@media (min-width: 48rem) { .stempel.stempel--zeile { position: static; max-width: none; margin-top: .5rem; } }
@media (max-width: 47.99rem) {
  .vorstellung__bild .bild { aspect-ratio: 4/3; }
  .ueber__haupt { aspect-ratio: 5/4; }
}
@media (min-width: 48rem) {
  .vorstellung__bild { max-width: 34rem; }
  .stempel { position: absolute; right: -1.5rem; bottom: 2.5rem; z-index: 3; max-width: 17rem; margin: 0; }
}
@media (min-width: 64rem) {
  /* Desktop wie bisher: Foto links über die ganze Höhe, rechts Überschrift und darunter der Text */
  .vorstellung__raster {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "bild kopf" "bild lead" "bild .";
    column-gap: clamp(3rem, 6vw, 6.5rem); row-gap: 0; align-items: start;
  }
  .vorstellung__kopf { grid-area: kopf; }
  .vorstellung__lead { grid-area: lead; margin-top: 1.5rem; }
  .vorstellung__bild { grid-area: bild; position: sticky; top: calc(var(--kopf-h) + 2rem); }
}
.vorstellung__mehr { margin: 1rem 0 0; }
.vorstellung__lead .lead + .lead { margin-top: 1em; }

/* Bildunterschrift „Warum GEKAR“: GE aus Gerke + KAR aus Karout = GEKAR. Die Silben sind dezent hinterlegt (GE in
   Kraftbeige, KAR in Mint); beim Hereinscrollen läuft ein Schimmer zuerst über „Ge“, dann über „Kar“. */
.bild picture { display: contents; }
.gruender { margin: 1rem 0 0; padding: .15rem 0 .2rem .95rem; border-left: 3px solid var(--akzent); }
.gruender p { margin: 0; }
.gruender__namen { color: var(--gruen); font-size: clamp(1rem, .96rem + .2vw, 1.125rem); font-weight: 600; line-height: 1.4; }
.gruender__name { white-space: nowrap; }
.gruender__und { margin: 0 .1em; color: var(--akzent-tief); }
.gruender__silbe {
  position: relative; display: inline-block; padding: 0 .08em; margin: 0 -.02em 0 -.08em;
  border-radius: .3em; vertical-align: baseline; line-height: 1.3;
}
.gruender__silbe--ge { background: rgba(23, 60, 67, 0.1); box-shadow: inset 0 -2px 0 var(--petrol); color: var(--gruen-tief); }
.gruender__silbe--kar { background: rgba(25, 169, 155, 0.16); box-shadow: inset 0 -2px 0 rgba(25, 169, 155, 0.6); color: var(--gruen-tief); }
.gruender__silbe::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.7) 50%, transparent 75%) no-repeat;
  background-size: 220% 100%; background-position: 160% 0;
}
.gruender__rolle { margin-top: .1rem !important; color: var(--tinte-2); font-size: .875rem; line-height: 1.45; }
.gruender__formel { margin-top: .45rem !important; color: var(--tinte-2); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gruender__wort { letter-spacing: .04em; }
.gruender__teil--ge { color: var(--akzent-tief); }
.gruender__teil--kar { color: var(--tuerkis-text); }
/* auf dunklem Grund (Hero): helle Schrift, „Ge“ in Apricot und „Kar“ in Türkis hinterlegt (auch GE/KAR im Leitsatz darunter) */
.gruender--dunkel { border-left-color: var(--akzent); }
.gruender--dunkel .gruender__namen { color: #FFFFFF; }
.gruender--dunkel .gruender__und { color: var(--akzent-auf-dunkel); }
.gruender--dunkel .gruender__silbe--ge { background: var(--apricot-zart); box-shadow: inset 0 -2px 0 var(--apricot); color: var(--apricot); }
.gruender--dunkel .gruender__silbe--kar { background: rgba(76, 192, 179, 0.18); box-shadow: inset 0 -2px 0 var(--tuerkis-hell); color: var(--tuerkis-licht); }
.gruender--dunkel .gruender__rolle, .gruender--dunkel .gruender__formel { color: var(--auf-dunkel-2); }
.gruender--dunkel .gruender__teil--ge { color: var(--apricot); }
.gruender--dunkel .gruender__teil--kar { color: var(--tuerkis-licht); }
@media (prefers-reduced-motion: no-preference) {
  .gruender.ist-sichtbar .gruender__silbe::after { animation: silbe-schimmer 1.3s ease-in-out both; }
  .gruender.ist-sichtbar .gruender__silbe { animation: silbe-leuchten 1.3s ease-in-out both; }
  .gruender.ist-sichtbar .gruender__silbe--ge, .gruender.ist-sichtbar .gruender__silbe--ge::after { animation-delay: .6s; }
  .gruender.ist-sichtbar .gruender__silbe--kar, .gruender.ist-sichtbar .gruender__silbe--kar::after { animation-delay: 1.45s; }
}
@keyframes silbe-schimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes silbe-leuchten { 0%, 100% { filter: none; } 50% { filter: brightness(1.08) saturate(1.25); } }

/* Leistungen: Einleitung, dann die Karten */
.abschnittskopf--oben { align-items: start; }
.leistungen__einleitung { display: grid; gap: .9rem; max-width: 32rem; }
.leistungen__einleitung p { margin: 0; color: var(--tinte-2); font-size: .9375rem; line-height: 1.6; }
.leistungen__einleitung .lead { font-size: 1rem; color: var(--tinte); }
.leistungen__ueberleitung { margin: 0 0 1.25rem; color: var(--gruen); font-weight: 600; }
.leistungsraster { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
/* Leistungskarten: Foto (ruhiger Radius) mit kleiner Nummer, darunter Titel, kurzer Text und Link – ohne Kasten,
   Rahmen oder Schatten. Beim Überfahren zoomt das Foto leicht, der Pfeil rückt nach rechts. */
.leistungskarte__link { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--tinte); text-decoration: none; border-radius: var(--r-m); }
.leistungskarte__link:hover { color: var(--tinte); text-decoration: none; }
.leistungskarte__link:hover .bild__flaeche, .leistungskarte__link:hover .bild img { transform: scale(1.04); }
.leistungskarte__bild { border-radius: var(--r-m); }
.leistungskarte__inhalt { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding: 1.25rem 0 0; }
.leistungskarte__kopf { display: contents; }
.leistungskarte__symbol { display: none; }
.leistungskarte__nr {
  position: absolute; top: .875rem; left: .875rem; z-index: 2;
  display: grid; place-items: center; min-width: 2.25rem; height: 1.875rem; padding: 0 .5rem; border-radius: 4px;
  background: #FFFFFF; color: var(--gruen); box-shadow: inset 0 -3px 0 var(--apricot);
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.leistungskarte__titel { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.leistungskarte__text { flex: 1; color: var(--tinte-2); font-size: .9375rem; line-height: 1.6; }
.leistungskarte__mehr { display: inline-flex; align-items: center; gap: .55rem; margin-top: .6rem; color: var(--gruen); font-size: .9375rem; font-weight: 700; }
.leistungskarte__mehr .symbol { width: 1.15rem; height: 1.15rem; color: var(--tuerkis-text); transition: transform .3s var(--ease); }
.leistungskarte__link:hover .leistungskarte__mehr .symbol { transform: translateX(5px); }
@media (min-width: 40rem) { .leistungsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .leistungsraster { column-gap: 1.5rem; row-gap: 3rem; } }
@media (min-width: 64rem) { .leistungsraster { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3.5rem; } }

/* Smartphone: die Leistungen als wischbare Reihe (eine Karte plus Anschnitt der nächsten), darunter Fortschritt und
   Pfeilknöpfe. Ohne JavaScript bleibt die Reihe einfach wischbar. */
.schieber-steuerung { display: none; }
@media (max-width: 39.99rem) {
  .leistungsraster[data-schieber] {
    grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 1rem; align-items: start;
    margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) .25rem; scroll-padding-inline: var(--rand);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .leistungsraster[data-schieber]::-webkit-scrollbar { display: none; }
  .leistungsraster[data-schieber] > li { scroll-snap-align: start; }
  .leistungsraster[data-schieber] > [data-reveal] { opacity: 1; transform: none; }
  .leistungsraster[data-schieber] > .leistungsraster__frage { align-self: stretch; }
  .js .schieber-steuerung { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; }
  .schieber-steuerung__spur { position: relative; flex: 1; height: 2px; margin-right: .75rem; border-radius: 2px; background: var(--linie); overflow: hidden; }
  .schieber-steuerung__balken {
    position: absolute; top: 0; bottom: 0; left: calc(var(--lage, 0) * (100% - var(--anteil, 12.5%))); width: var(--anteil, 12.5%);
    border-radius: 2px; background: var(--tuerkis);
  }
  .schieber-steuerung__knopf {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 1px solid var(--linie); border-radius: 50%; background: #FFFFFF; color: var(--gruen);
    transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
  }
  .schieber-steuerung__knopf .symbol { width: 1.15rem; height: 1.15rem; }
  .schieber-steuerung__knopf[data-schieber-zurueck] .symbol { transform: rotate(180deg); }
  .schieber-steuerung__knopf:not(:disabled):active { background: var(--gruen); border-color: var(--gruen); color: #FFFFFF; }
  .schieber-steuerung__knopf:disabled { opacity: .4; cursor: default; }
}
.leistungsraster__frage { display: flex; }
/* achte Zelle des Leistungsrasters: dunkle Anfrage-Kachel */
.leistungsraster__frage .hinweisband {
  width: 100%; margin-top: 0; align-content: center; color: #FFFFFF; --fokus: var(--akzent);
  background: var(--petrol);
}
.leistungsraster__frage .hinweisband h3 { color: #FFFFFF; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.leistungsraster__frage .hinweisband p { color: var(--auf-dunkel-2); }
.leistungsraster__frage .hinweisband__symbol { background: var(--tuerkis); color: var(--gruen-tief); }
.leistungsraster__frage .knopf--linie { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.leistungsraster__frage .knopf--linie .symbol { color: var(--tuerkis-licht); }
.leistungsraster__frage .knopf--linie:hover { background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; }
@media (min-width: 64rem) {
  .leistungsraster__frage { grid-column: span 2; }
  .leistungsraster__frage .hinweisband { grid-template-columns: auto 1fr; }
  .leistungsraster__frage .hinweisband__aktionen { grid-column: 2; }
}

.hinweisband {
  display: grid; gap: 1.25rem; justify-items: start;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--r-l); background: #FFFFFF; box-shadow: var(--schatten);
  border: 1px solid var(--linie);
}
.hinweisband__symbol { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--mint); color: var(--tuerkis-text); }
.hinweisband__symbol .symbol { width: 1.75rem; height: 1.75rem; }
.hinweisband h3 { margin-bottom: .35rem; }
.hinweisband p { color: var(--tinte-2); }
.hinweisband__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 64rem) {
  .hinweisband { grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem 2rem; }
}

/* Ablauf: Kreise mit Nummer, verbunden durch eine Linie, die sich beim Scrollen türkis füllt (Smartphone senkrecht,
   Desktop waagerecht). Auf Weiß bzw. hellem Grau; dunkle Fassung über .abschnitt--dunkel. */
.schritte { --n: 4; position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.schritte--3 { --n: 3; }
.schritt { --kreis: 2.75rem; position: relative; padding: 0 0 2rem calc(var(--kreis) + 1.1rem); }
.schritt:last-child { padding-bottom: 0; }
.schritt__nr {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: var(--kreis); height: var(--kreis);
  border: 1.5px solid var(--linie); border-radius: 50%; background: #FFFFFF; color: var(--gruen);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background-color .5s, border-color .5s, color .5s, transform .5s var(--ease);
}
.schritt:not(:last-child)::before, .schritt:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--kreis) / 2 - 1px); top: calc(var(--kreis) + .4rem); bottom: .4rem; width: 2px; border-radius: 2px;
  background: var(--linie);
}
.schritt:not(:last-child)::after { background: var(--tuerkis); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); }
.schritt__symbol { display: none; }
.schritt h3 { margin: .6rem 0 .4rem; font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); }
.schritt p { color: var(--tinte-2); font-size: .9375rem; line-height: 1.6; }
.abschnitt--dunkel .schritt__nr { border-color: rgba(255, 255, 255, 0.3); background: var(--petrol); color: #FFFFFF; }
.abschnitt--dunkel .schritt:not(:last-child)::before { background: rgba(255, 255, 255, 0.14); }
.abschnitt--dunkel .schritt p { color: var(--auf-dunkel-2); }
/* Jeder Schritt wird kräftig, sobald er zu sehen ist; nebeneinander nacheinander (Verzögerung je Schritt) */
.js .schritt > :not(.schritt__nr) { opacity: .45; transition: opacity .6s; }
.js .schritt__nr { transform: scale(.9); }
.schritt.ist-sichtbar > * { opacity: 1 !important; }
.schritt.ist-sichtbar .schritt__nr { transform: none; background: var(--gruen); border-color: var(--gruen); color: #FFFFFF; }
.abschnitt--dunkel .schritt.ist-sichtbar .schritt__nr { background: var(--tuerkis); border-color: var(--tuerkis); color: var(--gruen-tief); }
.schritt.ist-sichtbar:not(:last-child)::after { transform: none; }
.schritt:not(:last-child)::after { transition-delay: .35s; }
/* Smartphone und Tablet: Füllung direkt an die Scrollposition gekoppelt (JS setzt --fuellung je Teilstrecke) */
.schritte--gekoppelt .schritt:not(:last-child)::after { transform: scaleY(var(--fuellung, 0)); transition: none; }
.schritte--gekoppelt .schritt__nr, .schritte--gekoppelt .schritt > :not(.schritt__nr) { transition-duration: .3s; transition-delay: 0s; }
@media (min-width: 64rem) {
  .schritte .schritt:nth-child(2) { --i: 1; }
  .schritte .schritt:nth-child(3) { --i: 2; }
  .schritte .schritt:nth-child(4) { --i: 3; }
  .schritte .schritt__nr, .schritte .schritt > :not(.schritt__nr) { transition-delay: calc(var(--i, 0) * .45s); }
  .schritte .schritt:not(:last-child)::after { transition-delay: calc(var(--i, 0) * .45s + .2s); }
  .schritte { --abstand: 2.5rem; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--abstand); }
  .schritt { --kreis: 3rem; padding: calc(var(--kreis) + 1.4rem) 0 0; }
  .schritt:not(:last-child)::before, .schritt:not(:last-child)::after {
    left: calc(var(--kreis) + .75rem); right: calc(-1 * var(--abstand) + .75rem); top: calc(var(--kreis) / 2 - 1px); bottom: auto; width: auto; height: 2px;
  }
  .schritt:not(:last-child)::after { transform: scaleX(0); transform-origin: left; }
  .schritt.ist-sichtbar:not(:last-child)::after { transform: none; }
  .schritt p { max-width: 19rem; }
}
/* Fuß des Ablaufs: kleiner Hochformat-Clip zu Schritt 4, Text und Anfrage. Smartphone/Tablet: Clip links, Text rechts,
   Anfrage über die ganze Breite darunter. Desktop: gleiches Raster wie die Schritte – Clip in Spalte 4 genau unter
   „Durchführung“, Text und Anfrage links davon, senkrecht mittig zum Clip. */
.ablauf__fuss {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1.5rem 1.25rem; align-items: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.ablauf__clip { grid-column: 1; grid-row: 1; }
.ablauf__clip-text { grid-column: 2; grid-row: 1; }
.ablauf__clip-text .eyebrow { margin-bottom: .6rem; font-size: .75rem; }
.ablauf__clip-text h3 { margin: 0 0 .4rem; font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); }
.ablauf__clip-text p:not(.eyebrow) { margin: 0; color: var(--tinte-2); font-size: .9375rem; line-height: 1.6; }
.ablauf__aktion { grid-column: 1 / -1; }
@media (max-width: 22.49rem) {
  .ablauf__fuss { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 1.25rem 1rem; }
}
@media (min-width: 40rem) {
  .ablauf__fuss { grid-template-columns: 10rem minmax(0, 26rem); gap: 1.5rem 2rem; }
}
@media (min-width: 64rem) {
  .ablauf__fuss {
    --abstand: 2.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr;
    gap: 0 var(--abstand); align-items: start;
  }
  .ablauf__clip { grid-column: 4; grid-row: 1 / -1; width: min(100%, 11.5rem); }
  .ablauf__clip-text { grid-column: 1 / 4; grid-row: 2; }
  .ablauf__clip-text h3, .ablauf__clip-text p:not(.eyebrow) { max-width: 30rem; }
  /* feine Linie von der Dachzeile hinüber zum Clip – verbindet Text und Bild wie die Linie der Schritte */
  .ablauf__clip-text .eyebrow { display: flex; margin-right: -1.5rem; }
  .ablauf__clip-text .eyebrow::after { content: ""; flex: 1; height: 1px; margin-left: .4rem; background: var(--linie); }
  .ablauf__aktion { grid-column: 1 / 4; grid-row: 3; margin-top: 1.5rem; }
}

/* Über GEKAR */
.ueber__raster { display: grid; gap: 3rem; }
.ueber__bilder { position: relative; padding: 0 14% 12% 0; }
.ueber__neben { position: absolute; right: 0; bottom: 0; width: 42%; border: 6px solid #FFFFFF; box-shadow: var(--schatten-hoch); }
.ueber__neben .bild__etikett { left: .75rem; bottom: .75rem; }
.ueber__neben.bild--platzhalter::after { inset: .5rem; }
/* Über uns ohne Bild (bis eigene Fotos folgen): links der Text, rechts Leitsatz und Stempel, unten bündig */
.ueber__seite > .zitat { margin: 0; }
.ueber__seite > .stempel { margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .ueber--ohne-bild .ueber__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; }
  .ueber--ohne-bild .ueber__text { align-self: end; }
}
/* Über uns – „Wer wir sind“: großes Foto von Dennis und Elias direkt neben ihrer Geschichte (Desktop links, Smartphone
   über dem Text), darunter ihre Namen wie im Einstieg der Startseite. Leitsatz und Stempel stehen unter dem Text. */
.team-foto { min-width: 0; }
.team-foto > .bild { border-radius: var(--r-l); }
.team-foto .gruender { margin-top: 1rem; }
.ueber--team .ueber__text > .zitat { margin: 1.75rem 0 0; }
.ueber--team .ueber__text > .stempel { margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .ueber--team .ueber__raster { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .ueber--team .team-foto { align-self: center; }
}
.ueber__text > p:not(.eyebrow):not(.stempel) { color: var(--tinte-2); }
.ueber__text h2 { margin-bottom: 1.5rem; }
.zitat {
  position: relative; margin: 1.75rem 0; padding: 1.35rem 1.5rem 1.35rem 1.75rem;
  border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--flaeche);
  border: 1px solid var(--linie); border-left: 0;
}
.zitat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--apricot); }
.zitat p { color: var(--gruen) !important; font-size: clamp(.9375rem, .9rem + 0.15vw, 1.0625rem); font-weight: 600; line-height: 1.5; }
.ueber__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Startseite: „Über GEKAR“ als Petrol-Abschnitt zwischen den weißen Bereichen */
.ueber--dunkel .ueber__neben { border-color: var(--petrol); box-shadow: none; }
.ueber--dunkel .ueber__text > p:not(.eyebrow):not(.stempel) { color: var(--auf-dunkel-2); }
.ueber--dunkel .ueber__text h2 { color: #FFFFFF; }
.ueber--dunkel .zitat { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.ueber--dunkel .zitat::before { background: var(--apricot); }
.ueber--dunkel .zitat p { color: #FFFFFF !important; }
@media (min-width: 64rem) {
  .ueber__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6.5rem); align-items: center; }
}

/* Einsatzgebiet */
.gebiet__raster { display: grid; gap: 2.5rem; }
.gebiet__text h2 { margin-bottom: 1.5rem; }
.gebiet__text p:not(.eyebrow) { max-width: 34rem; color: var(--tinte-2); }
.gebiet__karte { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--linie); border-radius: var(--r-l); background: #FFFFFF; }
.orte { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ort {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border-radius: 999px;
  background: var(--mint); color: var(--gruen); font-size: .875rem; font-weight: 600; line-height: 1.2;
  transition: transform .3s var(--ease), background-color .3s;
}
.ort:hover { transform: translateY(-2px); }
.ort .symbol { width: 1.05rem; height: 1.05rem; color: var(--tuerkis-text); }
.ort--schwerpunkt { background: var(--gruen); color: #FFFFFF; }
.ort--schwerpunkt .symbol { color: var(--akzent); }
.orte--klein { margin-top: 1rem; }
.orte--klein .ort { padding: .45rem .85rem; border: 1px solid var(--linie); background: transparent; color: var(--tinte); font-size: .8125rem; font-weight: 400; }
.orte-weitere { width: 100%; }
.orte-weitere summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  color: var(--tuerkis-text); font-size: .875rem; font-weight: 600; border-radius: 6px;
}
.orte-weitere summary::-webkit-details-marker { display: none; }
.orte-weitere summary .symbol { width: 1.25rem; height: 1.25rem; transition: transform .3s var(--ease); }
.orte-weitere[open] summary .symbol { transform: rotate(45deg); }
.gebiet__fern { display: flex; gap: .75rem; width: 100%; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--tinte-2); font-size: .9375rem; }
.gebiet__fern .symbol { width: 1.75rem; height: 1.75rem; color: var(--tuerkis-text); }
.gebiet__fern strong { color: var(--gruen); }
@media (min-width: 64rem) {
  .gebiet__raster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 5rem; align-items: center; }
}

/* Abfahrtstafel im Einsatzgebiet (Startseite): Fallblatt-Anzeige wie am Bahnhof. Petrol-Tafel, dunkle Klappen mit
   weißer Schrift; jede Zelle hat zwei flache Hälften (harte Kante, kein Verlauf) und eine feine Trennfuge. main.js
   (initTafel) baut jede Zelle in vier Hälften um und klappt beim Ortswechsel über einige Buchstaben zum Ziel. Ohne
   JavaScript steht der erste Ort fest da; bei reduzierter Bewegung wechseln die Orte ohne Klappen. Die Schriftgröße
   folgt der Tafelbreite (Containerabfrage), damit alle 15 Felder auch auf dem Smartphone in eine Zeile passen.
   Haus-Symbol in Apricot (kleines Detail), der Knopf zum Anhalten in Türkis (anklickbar). */
.tafel {
  --oben: #133239; --unten: #0D272D;
  width: 100%; max-width: 34rem; margin: 1.75rem 0 1.25rem; padding: clamp(.8rem, .55rem + 1vw, 1.25rem);
  border-radius: var(--r-l); background: var(--petrol); color: var(--auf-dunkel);
  container-type: inline-size;
}
.tafel__kopf { display: flex; align-items: center; gap: .7rem; min-height: 2.25rem; margin-bottom: .8rem; }
.tafel__haus { width: 1.6rem; height: 1.6rem; flex: none; fill: var(--apricot); }
.tafel__titel { display: grid; gap: .1rem; line-height: 1.2; }
.tafel__titel span:first-child { color: #FFFFFF; font-family: var(--font-display); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.tafel__titel span:last-child { color: var(--auf-dunkel-2); font-size: .75rem; }
.tafel__pause {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.25rem -.25rem -.25rem auto; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: transparent; color: var(--akzent-auf-dunkel);
  cursor: pointer; transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.tafel__pause:hover { border-color: var(--akzent-auf-dunkel); background: rgba(255, 255, 255, 0.08); }
.tafel__pause:active { transform: scale(.94); }
.tafel__pause:focus-visible { outline: 2px solid var(--akzent-auf-dunkel); outline-offset: 2px; }
.tafel__pause .symbol { width: 1rem; height: 1rem; }
.tafel__pause[aria-pressed="true"] .tafel__symbol-pause, .tafel__pause:not([aria-pressed="true"]) .tafel__symbol-weiter { display: none; }
.tafel__zeile { display: grid; grid-template-columns: repeat(var(--zellen, 15), minmax(0, 1fr)); gap: clamp(2px, .8cqi, 4px); }
.tafel__zelle {
  position: relative; display: grid; place-items: center; aspect-ratio: 5 / 6.8; border-radius: 3px; perspective: 8em;
  background: linear-gradient(var(--oben) 50%, var(--unten) 50%);
  color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-stretch: 88%; line-height: 1;
  font-size: min(1.6rem, 4.2vw);
  font-size: calc((100cqi - (var(--zellen, 15) - 1) * 4px) / var(--zellen, 15) * .92);
}
.tafel__zelle::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: rgba(3, 16, 19, 0.8); }
.tafel__h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tafel__h--oben { top: 0; border-radius: 3px 3px 0 0; background: var(--oben); transform-origin: 50% 100%; }
.tafel__h--unten { bottom: 0; border-radius: 0 0 3px 3px; background: var(--unten); transform-origin: 50% 0; }
.tafel__h > b { position: absolute; left: 0; right: 0; display: grid; place-items: center; height: 200%; font-weight: inherit; }
.tafel__h--oben > b { top: 0; }
.tafel__h--unten > b { bottom: 0; }
.tafel__klappe { z-index: 2; visibility: hidden; }

/* Häufige Fragen */
/* Textlink mit Pfeil (z. B. „Karte und alle Orte ansehen“) */
.pfeillink { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--tuerkis-text); font-weight: 600; text-decoration: none; }
.pfeillink .symbol { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--ease); }
.pfeillink:hover { text-decoration: underline; }
.pfeillink:hover .symbol { transform: translateX(4px); }

/* ---------------------------------------------------------------- Seite Einsatzgebiet: Karte und Orte */
.gebietsseite__raster { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64rem) { .gebietsseite__raster { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3rem; } }

/* Karte: hell wie eine gedruckte Landkarte – Rhein und Ruhr, Regionsnamen, Entfernungsringe um Essen (Luftlinie) und
   die Orte mit Namen. Welche Namen dauerhaft stehen, legt bauen.py fest, damit sich nichts überdeckt: breite Karte ab
   540 px (data-lb, Lage über --b-x/--b-y/--b-tx/--b-ty), schmale Karte (data-ls, --s-…). Übrige Namen erscheinen beim
   Antippen oder Darüberfahren als Schild (--t-…). Ein angetippter Ort zeigt unter der Karte die Entfernung von Essen.
   Keine Leucht- oder Pulseffekte; die Karte erscheint einfach mit dem Abschnitt. */
.gebietskarte {
  --land: #EEF3F1;
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  border: 1px solid var(--linie); border-radius: var(--r-l); background: #FFFFFF; color: var(--tinte);
}
.gebietskarte__flaeche { --schrift: 10.5px; position: relative; width: 100%; overflow: hidden; background: var(--land); container-type: inline-size; }
.gebietskarte__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gebietskarte__rhein, .gebietskarte__ruhr { fill: none; stroke: #BBDCE2; stroke-linecap: round; stroke-linejoin: round; }
.gebietskarte__rhein { stroke-width: 11; }
.gebietskarte__ruhr { stroke-width: 6; }
.gebietskarte__ringe circle { fill: none; stroke: #8FA6A8; stroke-width: 1.25; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.gebietskarte__ringe circle:first-child { fill: rgba(25, 169, 155, 0.07); }
.gebietskarte__region {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  color: #52696C; font-family: var(--font-display); font-size: .6875rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.gebietskarte__fluss {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--drehung, 0deg)); pointer-events: none; white-space: nowrap;
  color: #3B7480; font-size: .625rem; font-style: italic; font-weight: 600; letter-spacing: .08em;
}
.gebietskarte__ring {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  padding: .05rem .4rem; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #CFDBDC;
  color: var(--tinte-2); font-size: .625rem; font-weight: 600; line-height: 1.4;
}
.gebietskarte__nord {
  position: absolute; top: 4%; right: 3.5%; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 1px solid rgba(23, 60, 67, 0.25); border-radius: 50%; background: #FFFFFF; color: var(--gruen); font-size: .6875rem; font-weight: 700;
}
.gebietskarte__nord::before { content: ""; position: absolute; top: -.35rem; left: 50%; margin-left: -.25rem; border: .25rem solid transparent; border-bottom: .35rem solid var(--gruen); border-top: 0; }
.gebietskarte__massstab { position: absolute; left: 3.5%; bottom: 4.5%; width: var(--breite); height: .4rem; border: 1.5px solid var(--tinte-2); border-top: 0; }
.gebietskarte__massstab span { position: absolute; left: 0; bottom: .55rem; color: var(--tinte-2); font-size: .6875rem; white-space: nowrap; }

/* Orte: 44 px große Bedienfläche, sichtbar der Punkt und – wo Platz ist – der Name */
.kartenpunkt {
  --x: var(--t-x); --y: var(--t-y); --tx: var(--t-tx); --ty: var(--t-ty); --r: 4px;
  position: absolute; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kartenpunkt--gross { --r: 5.5px; }
.kartenpunkt__marke {
  width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%; background: var(--gruen);
  box-shadow: 0 0 0 2px #FFFFFF; transition: transform .25s var(--ease), background-color .2s;
}
.kartenpunkt__name {
  position: absolute; left: calc(50% + var(--x, 0px)); top: calc(50% + var(--y, -9px)); z-index: 2;
  transform: translate(var(--tx, -50%), var(--ty, -100%));
  color: var(--gruen); font-size: var(--schrift); font-weight: 600; line-height: 1.25; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 2px var(--land), 0 0 2px var(--land), 0 0 3px var(--land), 1px 1px 0 var(--land), -1px -1px 0 var(--land);
  opacity: 0; transition: opacity .2s;
}
.kartenpunkt[data-ls] .kartenpunkt__name { --x: var(--s-x); --y: var(--s-y); --tx: var(--s-tx); --ty: var(--s-ty); }
.kartenpunkt[data-ls] .kartenpunkt__name { opacity: 1; }
@container (min-width: 540px) {
  .gebietskarte__flaeche > * { --schrift: 12px; }
  .kartenpunkt { --r: 5px; }
  .kartenpunkt--gross { --r: 6.5px; }
  .kartenpunkt[data-ls] .kartenpunkt__name { opacity: 0; }
  .kartenpunkt[data-lb] .kartenpunkt__name { --x: var(--b-x); --y: var(--b-y); --tx: var(--b-tx); --ty: var(--b-ty); opacity: 1; }
}
.gebietskarte__ring--b { display: none; }
@container (min-width: 540px) {
  .gebietskarte__ring--b { display: block; }
  .gebietskarte__ring--s { display: none; }
}
@container (max-width: 539.98px) {
  .gebietskarte__region, .gebietskarte__fluss { display: none; }
}
@container (max-width: 339.98px) {
  .kartenpunkt:not(.kartenpunkt--start)[data-ls] .kartenpunkt__name { opacity: 0; }
  .gebietskarte__ring { display: none !important; }
}
.kartenpunkt:hover, .kartenpunkt:focus-visible, .kartenpunkt.ist-offen { z-index: 4; }
.kartenpunkt:hover .kartenpunkt__marke, .kartenpunkt:focus-visible .kartenpunkt__marke, .kartenpunkt.ist-offen .kartenpunkt__marke { background: var(--tuerkis); transform: scale(1.35); }
.kartenpunkt:hover .kartenpunkt__name, .kartenpunkt:focus-visible .kartenpunkt__name, .kartenpunkt.ist-offen .kartenpunkt__name {
  opacity: 1 !important; padding: .15rem .45rem; border-radius: 6px; background: var(--gruen); color: #FFFFFF; text-shadow: none;
  box-shadow: 0 6px 16px -8px rgba(15, 42, 48, 0.6);
}
.kartenpunkt:focus-visible { outline: none; }
.kartenpunkt:focus-visible .kartenpunkt__marke { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--tuerkis-text); }
/* Essen: Ausgangspunkt mit dem Haus aus dem Logo, Name immer sichtbar */
.kartenpunkt--start { --r: 14px; z-index: 3; }
@container (min-width: 540px) { .kartenpunkt--start { --r: 17px; } }
.kartenpunkt--start .kartenpunkt__marke { display: grid; place-items: center; background: var(--tuerkis); box-shadow: 0 0 0 3px #FFFFFF, 0 6px 14px -6px rgba(15, 42, 48, 0.55); }
.kartenpunkt--start .kartenpunkt__marke svg { width: 58%; height: 58%; fill: var(--gruen-tief); }
.kartenpunkt--start .kartenpunkt__name { font-family: var(--font-display); font-size: calc(var(--schrift) * 1.25); font-weight: 700; }
.kartenpunkt--start:hover .kartenpunkt__marke, .kartenpunkt--start.ist-offen .kartenpunkt__marke, .kartenpunkt--start:focus-visible .kartenpunkt__marke { background: var(--tuerkis-hell); transform: scale(1.08); }

.gebietskarte__leiste { display: grid; gap: .9rem; padding: 1rem clamp(1rem, .8rem + 1vw, 1.5rem) 1.1rem; border-top: 1px solid var(--linie); }
.gebietskarte__info {
  display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin: 0; padding: .55rem .85rem;
  border-radius: var(--r-m); background: var(--flaeche-hell); color: var(--tinte); font-size: .875rem; line-height: 1.4;
}
.gebietskarte__info .symbol { width: 1.15rem; height: 1.15rem; color: var(--tuerkis-text); }
.gebietskarte__info strong { color: var(--gruen); }
.gebietskarte__legende { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--tinte-2); font-size: .8125rem; }
.gebietskarte__legende li { display: inline-flex; align-items: center; gap: .5rem; }
.gebietskarte__legende-start { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--tuerkis); }
.gebietskarte__legende-start svg { width: .85rem; height: .85rem; fill: var(--gruen-tief); }
.gebietskarte__legende-punkt { width: .65rem; height: .65rem; margin: 0 .43rem; border-radius: 50%; background: var(--gruen); }
.gebietskarte__legende-ring { width: 1.5rem; height: 1.5rem; border: 1.5px dashed #8FA6A8; border-radius: 50%; }
.gebietskarte__fern {
  display: inline-flex; align-items: center; gap: .75rem; justify-self: start; min-height: 3rem; padding: .5rem 1.1rem .5rem .55rem;
  border-radius: 999px; background: var(--akzent); color: var(--gruen-tief); text-decoration: none;
  transition: transform .3s var(--ease), background-color .2s;
}
.gebietskarte__fern > .symbol:first-child { width: 2.1rem; height: 2.1rem; padding: .4rem; border-radius: 50%; background: var(--gruen); color: var(--akzent); }
.gebietskarte__fern > span { display: grid; line-height: 1.25; }
.gebietskarte__fern strong { font-size: .875rem; }
.gebietskarte__fern > span span { font-size: .75rem; opacity: .8; }
.gebietskarte__fern > .symbol:last-child { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--ease); }
.gebietskarte__fern:hover { color: var(--gruen-tief); text-decoration: none; background: var(--akzent-hell); transform: translateY(-2px); }
.gebietskarte__fern:hover > .symbol:last-child { transform: translateX(3px); }
.gebietskarte__fern:focus-visible { outline: 3px solid var(--tuerkis-text); outline-offset: 3px; }
.gebietskarte__hinweis { margin: 0; color: var(--tinte-2); font-size: .75rem; line-height: 1.45; }
@media (min-width: 40rem) {
  .gebietskarte__leiste { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .gebietskarte__info, .gebietskarte__hinweis { grid-column: 1 / -1; }
  .gebietskarte__fern { justify-self: end; }
}

.gebietsseite__zwischentitel { margin: 0 0 .25rem; color: var(--gruen); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ortsliste__region { padding: .9rem 0 1rem; border-bottom: 1px solid rgba(23, 60, 67, 0.14); }
.ortsliste__titel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .65rem;
  color: var(--gruen); font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.0625rem; line-height: 1.2;
}
.ortsliste__titel span { flex: none; color: var(--tinte-2); font-family: var(--font-text); font-stretch: normal; font-size: .75rem; font-weight: 600; }
.ortsliste__orte { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ortsliste__ort {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .85rem;
  border: 1px solid rgba(23, 60, 67, 0.16); border-radius: 999px; background: #FFFFFF; color: var(--gruen);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.ortsliste__ort--start { border-color: var(--tuerkis); background: var(--mint); }
.ortsliste__km { margin-left: .4rem; color: var(--tinte-2); font-size: .75rem; font-weight: 500; transition: color .2s; }
.ortsliste__ort:hover .ortsliste__km, .ortsliste__ort.ist-aktiv .ortsliste__km { color: rgba(255, 255, 255, 0.8); }
.ortsliste__ort:hover, .ortsliste__ort.ist-aktiv { border-color: var(--gruen); background: var(--gruen); color: #FFFFFF; }
.ortsliste__ort:focus-visible { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }
.gebietsseite__frage {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1rem; align-items: start; margin-top: 1.5rem; padding: 1.25rem;
  border: 1.5px dashed var(--akzent); border-radius: var(--r-m); background: var(--flaeche);
}
.gebietsseite__frage-symbol { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--gruen); color: var(--akzent); }
.gebietsseite__frage-symbol .symbol { width: 1.35rem; height: 1.35rem; }
.gebietsseite__frage p { margin: 0; color: var(--tinte); font-size: .9375rem; line-height: 1.5; }
.gebietsseite__frage strong { display: block; color: var(--gruen); }
.gebietsseite__frage .knopf { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 29.99rem) { .gebietsseite__frage .knopf { justify-self: stretch; } }

.faq__raster { display: grid; gap: 2.5rem; }
.faq__intro h2 { margin-bottom: 1.25rem; }
.faq__intro p:not(.eyebrow) { color: var(--tinte-2); max-width: 30rem; }
.faq__kontakt { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.faq__kontakt .knopf { min-height: 2.75rem; padding: .55rem .95rem; font-size: .875rem; }
.faq__liste { border-top: 1px solid var(--linie); }
/* Startseite: Fragen mittig in Lesebreite, darunter Hinweis und Kontaktwege */
.frage { border-bottom: 1px solid var(--linie); }
.frage__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 3.5rem; padding: 1.15rem 0; cursor: pointer; list-style: none;
  color: var(--gruen); font-size: 1rem; font-weight: 600; line-height: 1.45;
  border-radius: 6px; transition: color .2s;
}
.frage__kopf::-webkit-details-marker { display: none; }
.frage__kopf:hover { color: var(--tuerkis-text); }
.frage__symbol {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--mint); color: var(--tuerkis-text);
  transition: transform .35s var(--ease), background-color .3s, color .3s;
}
.frage__symbol .symbol { width: 1.25rem; height: 1.25rem; }
.frage[open] .frage__symbol { transform: rotate(45deg); background: var(--gruen); color: #FFFFFF; }
.frage__antwort { padding: 0 3.25rem 1.25rem 0; }
.frage__antwort p { color: var(--tinte-2); font-size: .9375rem; line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .frage[open] .frage__antwort { animation: aufklappen .45s var(--ease); }
  @supports (interpolate-size: allow-keywords) {
    .frage { interpolate-size: allow-keywords; }
    .frage::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
    .frage[open]::details-content { height: auto; }
  }
}
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 64rem) {
  .faq__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; }
  .faq__intro { position: sticky; top: calc(var(--kopf-h) + 2rem); align-self: start; }
}

/* Abschluss */
.abschluss__raster { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .abschluss__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 5rem; } }
.abschluss__panel, .band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 2.5rem;
  padding: clamp(1.4rem, 0.6rem + 4.5vw, 4.5rem);
  border-radius: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  background: var(--petrol);
  color: #FFFFFF;
}
.abschluss__text, .band__text { container-type: inline-size; }
.abschluss__text h2, .band h2 { margin-bottom: 1rem; color: #FFFFFF; font-size: clamp(1.5rem, min(1.2rem + 1.8vw, 9cqi), 2.75rem); }
.abschluss__text p:not(.eyebrow), .band p { max-width: 34rem; color: var(--auf-dunkel-2); }
.abschluss__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.75rem; padding: 0; list-style: none; }
.kontaktwege { display: grid; gap: .75rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.kontaktweg {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.06); color: #FFFFFF; text-decoration: none;
  transition: background-color .25s, transform .35s var(--ease), border-color .25s;
}
.kontaktweg:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #FFFFFF; transform: translateY(-3px); text-decoration: none; }
.kontaktweg__symbol { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief); }
.kontaktweg__symbol .symbol { width: 1.4rem; height: 1.4rem; }
.kontaktweg__text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.kontaktweg__text strong { font-size: .9375rem; }
.kontaktweg__text span { color: var(--auf-dunkel-2); font-size: .8125rem; overflow-wrap: anywhere; }
.kontaktweg__pfeil { width: 1.25rem; height: 1.25rem; color: var(--akzent); transition: transform .3s var(--ease); }
.kontaktweg:hover .kontaktweg__pfeil { transform: translateX(4px); }
@media (max-width: 29.99rem) {
  .kontaktweg { gap: .85rem; padding: .9rem 1rem; }
  .kontaktweg__pfeil { display: none; }
}
@media (min-width: 64rem) {
  .abschluss__panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 4rem; }
}

/* ---------------------------------------------------------------- Leistungsseiten */
.seitenkopf {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--kopf-h) + clamp(1.5rem, 1rem + 2vw, 2.5rem)) 0 var(--abschnitt);
  background: var(--petrol); color: #FFFFFF;
  --akzent: var(--tuerkis-hell);
}
.seitenkopf__raster { display: grid; gap: 2.5rem; }
.seitenkopf__text { container-type: inline-size; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; color: var(--auf-dunkel-2); font-size: .8125rem; }
.brotkrumen li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.brotkrumen li > * { display: inline-block; padding-block: .2rem; }
.brotkrumen a { color: var(--auf-dunkel-2); text-decoration: none; }
.brotkrumen a:hover { color: #FFFFFF; text-decoration: underline; }
.brotkrumen [aria-current] { color: #FFFFFF; font-weight: 600; }
.seitenkopf .eyebrow .symbol { color: var(--apricot); }
.seitenkopf__titel { font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.04em; color: #FFFFFF; }
.seitenkopf__lead { max-width: 36rem; margin: 1.1rem 0 2rem; color: var(--auf-dunkel-2); font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.55; }
.seitenkopf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
@media (max-width: 39.99rem) {
  .seitenkopf__aktionen { display: grid; gap: .25rem; }
  .seitenkopf__aktionen > .knopf { width: 100%; }
  .seitenkopf .hero__kontakt { justify-content: center; gap: 0 1.75rem; }
  .seitenkopf .hero__link { font-size: .875rem; }
}
@media (min-width: 64rem) {
  .seitenkopf { padding-top: calc(var(--kopf-h) + 3rem); }
  .seitenkopf__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 4rem; }
}
.seitenkopf--schmal { padding-bottom: 1rem; }
.seitenkopf--schmal .brotkrumen ol { margin-bottom: 0; }
/* Seitenkopf ohne Bild (Einsatzgebiet, Über uns – dort steht das Foto groß im Abschnitt „Wer wir sind“): Auf dem Desktop nutzt der Text die volle
   Breite – links Überschrift, rechts die Einleitung (unten bündig mit der Überschrift), darunter die Knöpfe.
   Smartphone und Tablet wie gewohnt untereinander. */
@media (min-width: 64rem) {
  .seitenkopf--ohne-bild .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf--ohne-bild .seitenkopf__text {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    grid-template-areas: "krumen krumen" "eyebrow lead" "titel lead" "aktionen aktionen";
    column-gap: clamp(3rem, 5vw, 5rem);
  }
  .seitenkopf--ohne-bild .brotkrumen { grid-area: krumen; }
  .seitenkopf--ohne-bild .eyebrow { grid-area: eyebrow; justify-self: start; }
  .seitenkopf--ohne-bild .seitenkopf__titel { grid-area: titel; align-self: end; }
  .seitenkopf--ohne-bild .seitenkopf__lead { grid-area: lead; align-self: end; margin: 0; }
  .seitenkopf--ohne-bild .seitenkopf__aktionen { grid-area: aktionen; margin-top: 2.25rem; }
}
/* Seitenkopf mit eigenem Foto (Leistungsseiten, sobald in bilder.json eine Datei eingetragen ist): Die Hochformat-Fotos
   bekommen auf dem Desktop eine schmalere Spalte und sind genau so hoch wie der Text daneben (oben und unten bündig).
   Smartphone: quadratisch unter dem Text, Tablet 4:3. Den Ausschnitt legt „position“ in bilder.json fest. */
@media (max-width: 47.99rem) {
  .seitenkopf--foto .seitenkopf__bild > .bild { aspect-ratio: 1 / 1; }
}
@media (min-width: 64rem) {
  .seitenkopf--foto .seitenkopf__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .seitenkopf--foto .seitenkopf__bild > .bild { aspect-ratio: auto; }
  .seitenkopf--foto .seitenkopf__bild > .bild img { position: absolute; inset: 0; }
}
/* Video statt Foto (Neumöbellogistik im Seitenkopf, Karriere „Wer wir sind“): Das Hochformat-Video bekommt am Desktop
   eine schmalere Spalte und bleibt so hoch wie der Text daneben; Smartphone 4:5, Tablet quadratisch. Ausschnitt je
   Bildschirm über --lage, --lage-tablet, --lage-mobil (aus bilder.json), damit Köpfe, Logos und Handlung im Bild bleiben. */
.bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--lage, 50% 50%); }
/* Eigener Knopf für Videos: groß in der Mitte, solange das Video steht (Autoplay gesperrt, Stromsparmodus oder
   angehalten), klein unten rechts zum Anhalten, während es läuft. Während des ersten Ladens unsichtbar. */
.bild__videoknopf {
  position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0; padding: 0;
  border: 3px solid #FFFFFF; border-radius: 50%; background: var(--gruen); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(15, 42, 48, 0.7); transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, opacity .25s, transform .25s var(--ease);
}
.bild__videoknopf .symbol { width: 1.6rem; height: 1.6rem; }
.bild__videoknopf .bild__symbol-abspielen { margin-left: .25rem; }
.bild__videoknopf:hover { background: var(--gruen-tief); transform: translate(-50%, -50%) scale(1.05); }
.bild__videoknopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.bild--video.ist-laedt .bild__videoknopf { opacity: 0; pointer-events: none; }
.bild--video.ist-laeuft .bild__videoknopf {
  left: auto; top: auto; right: .75rem; bottom: .75rem; width: 2.75rem; height: 2.75rem; border-width: 2px;
  background: rgba(15, 42, 48, 0.6); box-shadow: none; transform: none;
}
.bild--video.ist-laeuft .bild__videoknopf:hover { background: var(--gruen); transform: none; }
.bild--video.ist-laeuft .bild__videoknopf .symbol { width: 1rem; height: 1rem; }
.bild--video:not(.ist-laeuft) .bild__symbol-anhalten, .bild--video.ist-laeuft .bild__symbol-abspielen { display: none; }
/* Kleiner Clip (Ablauf, Schritt 4): die ganze Fläche ist der Knopf (großes Tippziel), sichtbar ist nur ein kleiner
   Kreis – mittig zum Abspielen, unten rechts zum Anhalten. Unten eine feine Fortschrittslinie in Türkis. */
.bild--clip { box-shadow: var(--schatten-hoch); }
.bild--video.bild--clip .bild__videoknopf,
.bild--video.bild--clip.ist-laeuft .bild__videoknopf {
  inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; box-shadow: none; transform: none;
}
.bild--video.bild--clip .bild__videoknopf:focus-visible { outline-offset: -3px; }
.bild--video.bild--clip .bild__videoknopf .symbol {
  position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 3.5rem; height: 3.5rem; margin: 0; padding: 1rem 1rem 1rem 1.2rem;
  border: 2px solid #FFFFFF; border-radius: 50%; background: var(--gruen); color: #FFFFFF;
  box-shadow: 0 10px 24px -10px rgba(15, 42, 48, 0.7); transform: translate(-50%, -50%); transition: background-color .2s, transform .25s var(--ease);
}
.bild--video.bild--clip .bild__videoknopf:hover .symbol { background: var(--gruen-tief); transform: translate(-50%, -50%) scale(1.05); }
.bild--video.bild--clip.ist-laeuft .bild__videoknopf .symbol {
  left: auto; top: auto; right: .5rem; bottom: .75rem; width: 2.25rem; height: 2.25rem; padding: .62rem; border-width: 1.5px;
  background: rgba(15, 42, 48, 0.55); box-shadow: none; transform: none; opacity: .85;
}
.bild--video.bild--clip.ist-laeuft .bild__videoknopf:hover .symbol { background: var(--gruen); opacity: 1; }
.bild__fortschritt {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.35); pointer-events: none;
}
.bild__fortschritt > span { display: block; height: 100%; background: var(--tuerkis); transform: scaleX(0); transform-origin: left; }
@media (max-width: 47.99rem) {
  .bild video { object-position: var(--lage-mobil, var(--lage, 50% 50%)); }
  .seitenkopf--video .seitenkopf__bild > .bild, .karriere-start--video .karriere-start__bild > .bild { aspect-ratio: 4 / 5; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .bild video { object-position: var(--lage-tablet, var(--lage, 50% 50%)); }
  .seitenkopf--video .seitenkopf__bild > .bild, .karriere-start--video .karriere-start__bild > .bild { aspect-ratio: 1 / 1; max-width: 30rem; }
}
@media (min-width: 64rem) {
  .seitenkopf--video .seitenkopf__raster, .karriere-start--video .karriere-start__raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); }
  .karriere-start--video .karriere-start__bild > .bild { aspect-ratio: auto; }
}

.umfang__raster { display: grid; gap: 2.5rem; }
.umfang__text h2 { margin-bottom: 1.5rem; }
.umfang__text p:not(.eyebrow) { max-width: 34rem; color: var(--tinte-2); }
.checkliste { display: grid; gap: .3rem; margin: 0; padding: clamp(.85rem, .5rem + 1.5vw, 1.75rem); border-radius: var(--r-l); background: var(--flaeche); list-style: none; border: 1px solid var(--linie); }
.checkliste li {
  display: flex; align-items: flex-start; gap: .8rem; padding: .5rem .7rem; border-radius: var(--r-s);
  color: var(--tinte); font-size: .875rem; line-height: 1.5;
  transition: background-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.checkliste .symbol { width: 1.5rem; height: 1.5rem; padding: .25rem; border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief); transition: background-color .25s, color .25s, transform .25s var(--ease); }
@media (min-width: 64rem) {
  .umfang__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
}

.hinweisraster { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.hinweis { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--linie); transition: border-color .3s; }
/* Linienkarten (Hinweise, Werte, Themenpunkte): kurzes Apricot-Segment am Anfang der Linie */
:is(.hinweis, .vorteil, .schwerpunkt__punkt)::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 2.5rem; height: 2px; background: var(--apricot);
}
.hinweis:hover { border-top-color: var(--tuerkis); }
.hinweis__nr { display: block; margin-bottom: .75rem; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: .875rem; letter-spacing: .04em; line-height: 1; color: var(--akzent-tief); }
.hinweis h3 { margin-bottom: .55rem; }
.hinweis p { color: var(--tinte-2); font-size: .9375rem; }
@media (min-width: 48rem) { .hinweisraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

.band-abschnitt .band { padding: 0; border-radius: 0; background: none; overflow: visible; }
.band__aktionen { display: grid; gap: .75rem; align-content: center; }
@media (min-width: 30rem) { .band__aktionen { display: flex; flex-wrap: wrap; } }
@media (min-width: 64rem) {
  .band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
  .band__aktionen { flex-direction: column; align-items: stretch; }
}

.weitere__liste { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.weitere__karte {
  display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.15rem 1.25rem;
  border-radius: var(--r-m); background: #FFFFFF; color: var(--tinte); text-decoration: none;
  transition: transform .3s var(--ease), border-color .25s;
  border: 1px solid var(--linie);
}
.weitere__karte:hover { transform: translateY(-2px); border-color: var(--akzent); color: var(--tinte); text-decoration: none; }
.weitere__symbol { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px; background: var(--gruen); color: var(--akzent); }
.weitere__symbol .symbol { width: 1.5rem; height: 1.5rem; }
.weitere__text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.weitere__text strong { color: var(--gruen); font-size: .9375rem; }
.weitere__text span { color: var(--tinte-2); font-size: .8125rem; line-height: 1.45; }
.weitere__pfeil { width: 1.25rem; height: 1.25rem; color: var(--tuerkis-text); transition: transform .3s var(--ease); }
.weitere__karte:hover .weitere__pfeil { transform: translateX(4px); }
@media (min-width: 40rem) { .weitere__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .weitere__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* „Über uns“: sieben Leistungen plus Anfrage-Karte = 2 × 4 bzw. 4 × 2 */
@media (min-width: 64rem) { .weitere__liste--alle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .weitere__liste--alle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.weitere__karte--anfrage { background: var(--gruen); color: #FFFFFF; }
.weitere__karte--anfrage:hover { color: #FFFFFF; }
.weitere__karte--anfrage .weitere__symbol { background: var(--tuerkis); color: var(--gruen-tief); }
.weitere__karte--anfrage .weitere__text strong { color: #FFFFFF; }
.weitere__karte--anfrage .weitere__text span { color: var(--auf-dunkel-2); }
.weitere__karte--anfrage .weitere__pfeil { color: var(--akzent); }

/* Karriere */
.karriere-start__raster { display: grid; gap: 2.5rem; }
.karriere-start__text p:not(.eyebrow) { max-width: 36rem; color: var(--tinte-2); }
.karriere-start__text h2 { margin-bottom: 1.25rem; }
@media (min-width: 64rem) { .karriere-start__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4.5rem; align-items: center; } }
.einsatzbereiche { margin-top: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); padding-top: 1.5rem; border-top: 1px solid rgba(23, 60, 67, 0.12); }
.einsatzbereiche__titel { margin: 0 0 .9rem; color: var(--gruen); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.einsatzbereiche__liste { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.einsatzbereiche__liste a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .45rem 1rem .45rem .5rem;
  border-radius: 999px; background: #FFFFFF; color: var(--gruen); font-size: .875rem; font-weight: 600; text-decoration: none;
  box-shadow: var(--schatten); transition: transform .25s var(--ease), box-shadow .25s;
}
.einsatzbereiche__liste a:hover { color: var(--gruen); text-decoration: none; transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.einsatzbereiche__liste .symbol { width: 2rem; height: 2rem; padding: .4rem; border-radius: 50%; background: var(--gruen); color: var(--akzent); }
.stellen__raster { display: grid; gap: 1.25rem; }
.stellen__status {
  display: flex; gap: .9rem; align-items: flex-start; align-self: start; padding: 1.25rem 1.35rem;
  border: 1.5px dashed var(--akzent); border-radius: var(--r-l); background: var(--flaeche);
}
.stellen__status p { margin: 0; color: var(--tinte); font-size: .9375rem; }
.stellen__status strong { display: block; color: var(--gruen); }
.stellen__symbol { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #FFFFFF; color: var(--tuerkis-text); }
.stellen__symbol .symbol { width: 1.35rem; height: 1.35rem; }
.stellen__initiativ { display: grid; gap: .75rem; justify-items: start; padding: clamp(1.35rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--linie); border-radius: var(--r-l); background: #FFFFFF; box-shadow: var(--schatten); }
.stellen__initiativ p { margin: 0; color: var(--tinte-2); }
.stellen__hilft { color: var(--gruen) !important; font-weight: 600; font-size: .875rem; }
.checkliste--kompakt { width: 100%; padding: .4rem; gap: .1rem; }
@media (min-width: 56rem) { .stellen__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; } }
.bewerbung__raster { display: grid; gap: 2.25rem; }
.bewerbung__text h2 { margin-bottom: 1.1rem; }
.bewerbung__text p:not(.eyebrow) { max-width: 30rem; color: var(--tinte-2); }
.bewerbung__karte { padding: clamp(1.25rem, .9rem + 1.6vw, 2rem); border-radius: var(--r-l); background: #FFFFFF; box-shadow: var(--schatten-hoch); }
.formular__titel { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.formular__titel .anfrage__demo { font-family: var(--font-text); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.formular .anfrage__datenschutz { margin: .25rem 0 1rem; }
.formular__erfolg { display: grid; justify-items: center; gap: .5rem; padding: 1rem 0; text-align: center; outline: none; }
.formular__erfolg > p { max-width: 30rem; color: var(--tinte-2); font-size: .9375rem; }
@media (min-width: 64rem) { .bewerbung__raster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; } }

/* Rechtstexte (unverändert übernommen) */
.rechtstext { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.rechtstext__inner { max-width: 46rem; container-type: inline-size; }
.rechtstext h1 { margin: 0 0 1rem; font-size: clamp(1.5rem, min(1.4rem + 1.6vw, 8.4cqi), 2.5rem); line-height: .95; color: var(--gruen); }
.rechtstext h2 { margin: 2.5rem 0 .75rem; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; text-transform: none; font-size: 1.125rem; line-height: 1.25; }
.rechtstext :is(p, li, address) { color: var(--tinte-2); font-size: .875rem; font-style: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext h3 { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.3; color: var(--gruen); }
.rechtstext h4 { margin: 1.1rem 0 .35rem; font-size: .9375rem; line-height: 1.3; }
/* AGB: gesetzlich vorgeschriebene Hinweise (§ 451g HGB) „drucktechnisch deutlich hervorgehoben“ – kräftiger Rahmen,
   Petrol-Balken links, fette Stichworte */
.rechtstext__hinweis {
  margin: 1.25rem 0 0; padding: 1.1rem 1.25rem 1rem; border: 2px solid var(--gruen); border-left-width: 6px; border-radius: var(--r-m);
  background: var(--flaeche-hell);
}
.rechtstext__hinweis ul { margin: 0; }
.rechtstext__hinweis :is(li, p) { color: var(--tinte) !important; }
/* Amtliche Muster (Widerrufsbelehrung, Widerrufsformular): ruhiger Kasten, damit sie als eigenes Dokument erkennbar sind */
.rechtstext__muster { margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid var(--linie); border-radius: var(--r-m); }
.rechtstext__muster > :last-child { margin-bottom: 0; }
.rechtstext__formular { list-style: none; padding-left: 0; }
.rechtstext__formular li { padding-left: 1rem; text-indent: -1rem; }
.rechtstext__formular li::before { content: "– "; }
.draft-note {
  display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 2rem; padding: 1.1rem 1.25rem;
  border-radius: var(--r-m); background: var(--flaeche); border: 1px solid var(--akzent);
}
.draft-note .symbol { width: 1.5rem; height: 1.5rem; color: #6E5410; margin-top: .1rem; }
.draft-note p { margin: 0; color: var(--tinte) !important; font-size: .875rem !important; }
.draft-note strong { display: block; }
.platzhalter { background: #FFF3C4; box-shadow: inset 0 -1px 0 #B8901A; }

/* ---------------------------------------------------------------- Fußbereich */
.fuss { padding: clamp(3.5rem, 2.8rem + 3vw, 5.5rem) 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: var(--gruen-tief); color: var(--auf-dunkel-2); font-size: .875rem; }
.fuss__raster { display: grid; gap: 2.5rem; }
.fuss__marke { display: grid; gap: 1.25rem; justify-items: start; }
.fuss__marke p { max-width: 22rem; margin: 0; }
.logo--gestapelt { height: 6.25rem; }
.fuss a { color: #FFFFFF; text-decoration: none; }
.fuss a:hover { color: var(--akzent-auf-dunkel); text-decoration: underline; }
.fuss .knopf--primaer, .fuss .knopf--primaer:hover { color: var(--gruen-tief); text-decoration: none; }
.fuss__titel { margin: 0 0 .85rem; color: var(--apricot); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.fuss ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fuss__spalte a { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; }
.fuss__kontakt .symbol, .fuss__gebiet .symbol, .fuss__adresse .symbol { width: 1.15rem; height: 1.15rem; flex: none; color: var(--tuerkis-licht); }
.fuss__kontakt span { overflow-wrap: anywhere; }
.fuss__gebiet { display: flex; gap: .6rem; margin: 1rem 0 0; font-size: .8125rem; }
/* Anschrift: gleiche Flucht wie Telefon, WhatsApp und E-Mail darüber; Symbol auf Höhe der ersten Zeile */
.fuss__adresse { display: flex; align-items: flex-start; gap: .6rem; margin: .6rem 0 0; color: #FFFFFF; font-style: normal; line-height: 1.5; }
.fuss__adresse .symbol { margin-top: .15rem; }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: .8125rem; }
.fuss__unten p { margin: 0; }
.fuss__demo { color: var(--auf-dunkel); }
.fuss__rechtliches { display: flex !important; flex-wrap: wrap; gap: .25rem 1.5rem !important; }
.fuss__rechtliches a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
/* Smartphone: Marke und Kontakt über die volle Breite, die beiden Linklisten nebeneinander – kürzerer Fuß */
@media (max-width: 39.99rem) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
  .fuss__marke, .fuss__raster > .fuss__spalte:last-child { grid-column: 1 / -1; }
  .logo--gestapelt { height: 5rem; }
  .fuss__spalte a { font-size: .875rem; }
}
@media (min-width: 40rem) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fuss__raster { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .9fr)) minmax(0, 1.2fr); gap: 3rem; } }

/* ---------------------------------------------------------------- Anfrageprozess (Dialog) */
.anfrage {
  width: min(46rem, calc(100% - 2rem)); max-width: none;
  height: min(46rem, calc(100dvh - 2rem)); max-height: none;
  margin: auto; padding: 0; border: 0; border-radius: 26px;
  background: #FFFFFF; color: var(--tinte);
  box-shadow: 0 50px 100px -40px rgba(15, 42, 48, 0.75);
  overflow: hidden;
}
.anfrage[open] { display: flex; }
.anfrage::backdrop { background: rgba(15, 42, 48, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@media (prefers-reduced-motion: no-preference) {
  .anfrage[open] { animation: dialog-auf .45s var(--ease); }
  .anfrage[open]::backdrop { animation: abdunkeln .35s ease; }
}
@keyframes dialog-auf { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes abdunkeln { from { opacity: 0; } }
.anfrage__form { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.anfrage__kopf { flex: none; padding: 1.15rem clamp(1.25rem, 1rem + 1.5vw, 2rem) 1.15rem; background: var(--petrol); color: #FFFFFF; }
.anfrage__kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* Umzugscheckliste: GEKAR-Logo (Originalvektoren, helle Fassung für den Petrol-Kopf) über der Dachzeile */
.umzugsliste__logo { display: block; margin-bottom: 1rem; }
.umzugsliste__logo .logo { display: block; height: 2.125rem; }
@media (max-width: 39.99rem) {
  .umzugsliste__logo { margin-bottom: .7rem; }
  .umzugsliste__logo .logo { height: 1.75rem; }
}
.anfrage__marke { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; color: var(--akzent); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.anfrage__demo { padding: .15rem .5rem; border-radius: 6px; background: var(--akzent); color: var(--gruen-tief); letter-spacing: .08em; }
/* Echte Website (bauen.py --live): nie Demo-Kennzeichnungen */
[data-modus="live"] .anfrage__demo, [data-modus="live"] [data-demo-hinweis] { display: none !important; }
.anfrage__titel { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1; color: #FFFFFF; }
.anfrage__schliessen {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #FFFFFF; transition: background-color .2s, transform .3s var(--ease);
}
.anfrage__schliessen:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
.anfrage__schliessen .symbol { width: 1.4rem; height: 1.4rem; }
.anfrage__fortschritt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.anfrage__fortschritt li { display: flex; flex-direction: column; gap: .45rem; color: rgba(255, 255, 255, 0.6); font-size: .75rem; line-height: 1.2; }
.anfrage__fortschritt li::before { content: ""; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); transition: background-color .4s; }
.anfrage__fortschritt li.ist-aktiv, .anfrage__fortschritt li.ist-erledigt { color: #FFFFFF; }
.anfrage__fortschritt li.ist-aktiv { font-weight: 600; }
.anfrage__fortschritt li.ist-aktiv::before, .anfrage__fortschritt li.ist-erledigt::before { background: var(--tuerkis); }
.anfrage__punkt { display: none; }
.anfrage__etappe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfrage__inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem clamp(1.25rem, 1rem + 1.5vw, 2rem) 1.75rem; }
.anfrage__fuss {
  flex: none; display: flex; align-items: center; gap: .75rem;
  padding: .9rem clamp(1.25rem, 1rem + 1.5vw, 2rem) calc(.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linie); background: #FFFFFF;
}
.anfrage__schrittinfo { flex: 1; margin: 0; color: var(--tinte-2); font-size: .8125rem; text-align: center; }
.anfrage__zurueck[hidden] + .anfrage__schrittinfo { text-align: left; }
.anfrage__weiter { min-width: 8.5rem; }
.anfrage .anfrage__frage {
  float: none; width: 100%; margin: 0 0 1.25rem; padding: 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); line-height: 1.2;
  color: var(--gruen);
}
.anfrage [tabindex="-1"]:focus { outline: none; }
.anfrage__vorteile { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.5rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--linie); list-style: none; color: var(--tinte-2); font-size: .875rem; }
.anfrage__vorteile li { display: inline-flex; align-items: center; gap: .4rem; }
.anfrage__vorteile .symbol { width: 1.1rem; height: 1.1rem; color: var(--tuerkis-text); }
.anfrage__uebernommen { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: var(--r-s); border: 1px solid var(--linie); border-left: 3px solid var(--tuerkis); background: var(--flaeche); color: var(--gruen); font-size: .875rem; font-weight: 600; }
.anfrage__uebernommen .symbol { width: 1.25rem; height: 1.25rem; color: var(--tuerkis-text); }
@media (prefers-reduced-motion: no-preference) {
  .anfrage__schritt:not([hidden]) { animation: schritt-ein .45s var(--ease); }
}
@keyframes schritt-ein { from { opacity: 0; transform: translateX(16px); } }
@media (max-width: 39.99rem) {
  .anfrage { width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .anfrage__fuss .anfrage__schrittinfo { display: none; }
  .anfrage__fuss .knopf { flex: 1; }
  .anfrage__zurueck { flex: 0 0 auto !important; }
}

/* Formularfelder */
.feld { display: grid; gap: .4rem; min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.feld > label, .feld > legend { color: var(--gruen); font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.feld > legend { float: left; width: 100%; margin-bottom: .55rem; padding: 0; }
.feld > legend + * { clear: both; }
.optional { color: var(--tinte-2); font-weight: 400; }
:is(.anfrage, .formular) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100%; min-height: 3rem; padding: .65rem .95rem;
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-s);
  background: #FFFFFF; color: var(--tinte); font-size: .9375rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
:is(.anfrage, .formular) textarea { min-height: 7rem; resize: vertical; }
:is(.anfrage, .formular) select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m9 12.5 7 7 7-7' fill='none' stroke='%230D756B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center / 1.25rem;
}
.anfrage input[type="date"] { -webkit-appearance: none; appearance: none; }
:is(.anfrage, .formular) :is(input, select, textarea)::placeholder { color: #6B7476; }
:is(.anfrage, .formular) :is(input, select, textarea):focus { outline: none; border-color: var(--tuerkis-text); box-shadow: 0 0 0 4px rgba(25, 169, 155, 0.22); }
.feld.ist-fehler :is(input, select, textarea) { border-color: var(--fehler); box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1); }
.feld__fehler { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--fehler); font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.haken { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin: 0 0 .25rem; cursor: pointer; color: var(--tinte); font-size: .875rem; line-height: 1.4; }
.haken input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--tuerkis-text); cursor: pointer; }

.auswahl { display: grid; gap: .65rem; }
.auswahl__option { position: relative; display: block; cursor: pointer; }
.auswahl__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.auswahl__karte {
  position: relative; display: flex; align-items: center; gap: .9rem; height: 100%;
  padding: .75rem 2.75rem .75rem .75rem;
  border: 1.5px solid var(--linie); border-radius: var(--r-m); background: #FFFFFF;
  transition: border-color .2s, background-color .2s, box-shadow .2s, transform .3s var(--ease);
}
.auswahl__option:hover .auswahl__karte { border-color: var(--tuerkis); transform: translateY(-2px); }
.auswahl__symbol { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-s); background: var(--mint); color: var(--gruen); transition: background-color .2s, color .2s; }
.auswahl__symbol .symbol { width: 1.5rem; height: 1.5rem; }
.auswahl__name { color: var(--gruen); font-size: .875rem; font-weight: 600; line-height: 1.25; }
.auswahl__haken {
  position: absolute; top: 50%; right: .85rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: -.75rem;
  border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief);
  opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease);
}
.auswahl__haken .symbol { width: 1rem; height: 1rem; }
.auswahl__option input:checked + .auswahl__karte { border-color: var(--tuerkis); background: var(--mint); box-shadow: 0 0 0 3px rgba(25, 169, 155, 0.18); }
.auswahl__option input:checked + .auswahl__karte .auswahl__symbol { background: var(--gruen); color: var(--akzent); }
.auswahl__option input:checked + .auswahl__karte .auswahl__haken { opacity: 1; transform: none; }
.auswahl__option input:focus-visible + .auswahl__karte { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }
.feld.ist-fehler .auswahl__karte { border-color: rgba(180, 35, 24, 0.5); }
.feld--auswahl { container-type: inline-size; }
@container (min-width: 39rem) {
  .auswahl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
  .auswahl__karte { flex-direction: column; align-items: flex-start; padding: .9rem; }
  .auswahl__haken { top: .65rem; right: .65rem; margin-top: 0; }
}

.chipwahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.chipwahl__option { position: relative; cursor: pointer; }
.chipwahl__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chipwahl__option span {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1.5px solid var(--linie-stark); border-radius: 999px; color: var(--gruen); font-size: .875rem; font-weight: 600;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chipwahl__option span .symbol { width: 0; height: 1rem; opacity: 0; transition: width .2s, opacity .2s; }
.chipwahl__option:hover span { border-color: var(--tuerkis-text); }
.chipwahl__option input:checked + span { border-color: var(--gruen); background: var(--gruen); color: #FFFFFF; }
.chipwahl__option input:checked + span .symbol { width: 1rem; opacity: 1; color: var(--tuerkis-licht); }
.chipwahl__option input:focus-visible + span { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }
.feld--chips { margin-bottom: 1.25rem; }

.ortblock { margin: 0 0 1rem; padding: 1rem 1.1rem .35rem; border: 1px solid var(--linie); border-radius: var(--r-m); min-width: 0; }
.ortblock__titel { display: inline-flex; align-items: center; gap: .5rem; padding: 0 .4rem; color: var(--gruen); font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.125rem; }
.ortblock__symbol { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--mint); color: var(--tuerkis-text); }
.ortblock__symbol .symbol { width: 1.1rem; height: 1.1rem; }
.ortblock__extras { display: grid; gap: 0 1rem; align-items: end; }
.ortblock__extras .haken { margin-bottom: 1rem; }
@media (min-width: 30rem) { .ortblock__extras { grid-template-columns: minmax(0, 1fr) auto; } }
/* Orte am Desktop nebeneinander, damit Schritt 2 ohne Scrollen auskommt */
@media (min-width: 40rem) {
  .anfrage__gruppe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; align-items: start; }
  .anfrage__gruppe > :not(.ortblock), .anfrage__gruppe:is([data-gruppe="einsatz"], [data-gruppe="montage"]) > .ortblock { grid-column: 1 / -1; }
  .anfrage__gruppe:not([data-gruppe="einsatz"]):not([data-gruppe="montage"]) .ortblock__extras { grid-template-columns: 1fr; }
  .anfrage__gruppe:not([data-gruppe="einsatz"]):not([data-gruppe="montage"]) .ortblock__extras .haken { margin-top: -.25rem; }
}
.anfrage__reihe { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .anfrage__reihe { grid-template-columns: 1fr 1fr; } }

.zusammenfassung { margin: .5rem 0 1.25rem; padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--flaeche); border: 1px solid var(--linie); }
.zusammenfassung__titel { margin: 0 0 .6rem; color: var(--gruen); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.zusammenfassung__liste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .875rem; }
.zusammenfassung__liste dt { color: var(--tinte-2); }
.zusammenfassung__liste dd { margin: 0; color: var(--gruen); font-weight: 600; overflow-wrap: anywhere; }
.anfrage__datenschutz { color: var(--tinte-2); font-size: .8125rem; }

/* Anfrageformular: Bausteine der mehrstufigen Anfrage */
.anfrage__schritttext { display: none; margin: .6rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: .8125rem; font-weight: 600; }
@media (max-width: 39.99rem) {
  .anfrage__fortschritt .anfrage__etappe { display: none; }
  .anfrage__fortschritt { margin-top: .9rem; gap: .35rem; }
  .anfrage__schritttext { display: block; }
}
.anfrage__pflichthinweis { margin: -.6rem 0 1.1rem; color: var(--tinte-2); font-size: .8125rem; line-height: 1.5; }
.anfrage__reihe--plz { grid-template-columns: minmax(6rem, 7.5rem) minmax(0, 1fr) !important; gap: 0 .75rem; }
.feld--janein { margin-bottom: 1rem; }
.feld--janein .chipwahl__option span { min-width: 4.25rem; justify-content: center; }
.anfrage__janein-raster { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .anfrage__janein-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.feld--flaeche input { max-width: 12rem; }
.anfrage__folgefrage {
  margin: -.25rem 0 1rem; padding: .9rem 1rem .1rem; border-left: 3px solid var(--tuerkis); border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-left: 3px solid var(--tuerkis);
}
@media (prefers-reduced-motion: no-preference) {
  .anfrage__folgefrage:not([hidden]) { animation: folgefrage-ein .35s var(--ease); }
}
@keyframes folgefrage-ein { from { opacity: 0; transform: translateY(-6px); } }
.anfrage__termin { display: grid; gap: 0 1rem; align-items: end; }
.anfrage__termin .haken { margin-bottom: 1rem; }
@media (min-width: 30rem) { .anfrage__termin { grid-template-columns: minmax(0, 1fr) auto; } }
.anfrage input[type="date"]:disabled { opacity: .5; }
/* Spam-Falle: unsichtbar und ohne Verschiebung aus dem Bild (sonst „überstehende Elemente“ auf schmalen Bildschirmen) */
.anfrage__falle { position: absolute; 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; }
/* Zusatzleistungen: große Karten, zwei Spalten */
@container (min-width: 30rem) {
  .auswahl.auswahl--extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 39rem) {
  .auswahl--extras .auswahl__karte { flex-direction: row; align-items: center; padding: .75rem 2.75rem .75rem .75rem; }
  .auswahl--extras .auswahl__haken { top: 50%; right: .85rem; margin-top: -.75rem; }
}
/* Übersicht vor dem Absenden */
.uebersicht { display: grid; gap: .75rem; margin-bottom: 1rem; }
.anfrage__versandfehler {
  display: flex; align-items: flex-start; gap: .65rem; margin: 0 0 1rem; padding: .9rem 1rem;
  border: 1.5px solid rgba(180, 35, 24, 0.35); border-radius: var(--r-s); background: #FDF1EF; color: var(--tinte); font-size: .875rem; line-height: 1.5;
}
.anfrage__versandfehler .symbol { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--fehler); }
.anfrage__versandfehler p { margin: 0; }
.anfrage__versandfehler strong { display: block; color: var(--fehler); }
.uebersicht__block { padding: .85rem 1.1rem 1rem; border-radius: var(--r-m); background: var(--flaeche); border: 1px solid var(--linie); }
.uebersicht__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.uebersicht__kopf h4 { margin: 0; color: var(--gruen); font-family: var(--font-text); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.uebersicht__aendern {
  flex: none; min-height: 2.75rem; padding: .35rem .9rem; border: 1.5px solid var(--linie-stark); border-radius: 999px;
  background: #FFFFFF; color: var(--tuerkis-text); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.uebersicht__aendern:hover { border-color: var(--tuerkis-text); background: var(--mint); }
.uebersicht__aendern:focus-visible { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }

/* Planungshilfe „Halteverbotszone planen“ */
/* zwei oder drei Antworten: gleichmäßig verteilen statt vier Spalten */
@container (min-width: 39rem) {
  .auswahl:has(> :nth-child(3):last-child), .auswahl--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auswahl:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.helfer__info, .helfer__hinweis {
  display: flex; align-items: flex-start; gap: .65rem; margin: .25rem 0 0; padding: .85rem 1rem;
  border-radius: var(--r-s); border: 1px solid var(--linie); border-left: 3px solid var(--tuerkis); background: var(--flaeche); color: var(--gruen); font-size: .875rem; line-height: 1.5;
}
.helfer__info .symbol, .helfer__hinweis .symbol { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--tuerkis-text); }
.helfer__hinweis { margin-top: 1.1rem; border: 1.5px dashed var(--akzent); background: var(--flaeche); }
.helfer__hinweis .symbol { color: var(--akzent-tief); }
.helfer__uebersicht { padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--flaeche); border: 1px solid var(--linie); }
/* sehr schmale Smartphones: „Zurück“ als Symbol */
@media (max-width: 23.99rem) {
  .helfer .anfrage__zurueck { padding-inline: .95rem; }
  .helfer .anfrage__zurueck span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Umzugscheckliste: Fortschritt im Kopf, Zeitabschnitte zum Springen, Aufgaben zum Abhaken */
.umzugsliste__stand { display: flex; align-items: center; gap: .85rem; margin-top: 1rem; }
.umzugsliste__balken { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.umzugsliste__balken span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--cta); transition: width .5s var(--ease); }
.umzugsliste__standtext { flex: none; margin: 0; color: #FFFFFF; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.umzugsliste__navigation { display: flex; gap: .4rem; margin: .75rem -.25rem 0; padding: .25rem; overflow-x: auto; scrollbar-width: none; }
.umzugsliste__navigation::-webkit-scrollbar { display: none; }
.umzugsliste__sprung {
  flex: none; display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: .35rem .5rem .35rem .85rem;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.06);
  color: var(--auf-dunkel); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.umzugsliste__sprung:hover { border-color: var(--akzent-auf-dunkel); background: rgba(255, 255, 255, 0.12); }
.umzugsliste__sprung:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.umzugsliste__sprung.ist-aktiv { border-color: #FFFFFF; background: #FFFFFF; color: var(--gruen); }
.umzugsliste__sprungstand { padding: .15rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: .75rem; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
.umzugsliste__sprung.ist-aktiv .umzugsliste__sprungstand { background: var(--mint); }
.umzugsliste__sprung.ist-fertig .umzugsliste__sprungstand { background: var(--tuerkis); color: var(--gruen-tief); }
.umzugsliste__sprung > span:first-child { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .umzugsliste__navigation { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
@media (min-width: 40rem) {
  .umzugsliste__navigation { overflow: visible; }
  .umzugsliste__sprung { flex: 1 1 auto; }
}
.umzugsliste__phase { scroll-margin-top: .75rem; }
.umzugsliste__phase + .umzugsliste__phase { margin-top: 1.75rem; }
.umzugsliste__phasenkopf { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 2px solid var(--akzent); }
.umzugsliste__phasensymbol { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--gruen); color: var(--akzent); transition: background-color .3s, color .3s; }
.umzugsliste__phasensymbol .symbol { width: 1.3rem; height: 1.3rem; }
.umzugsliste__phasenkopf h3 { flex: 1; min-width: 0; margin: 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.umzugsliste__phasenkopf h3:focus { outline: none; }
.umzugsliste__phasennr { margin-right: .45rem; color: var(--akzent-tief); }
.umzugsliste__phasenstand { flex: none; padding: .2rem .6rem; border-radius: 999px; background: var(--mint); color: var(--gruen); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
.umzugsliste__phase.ist-fertig .umzugsliste__phasensymbol { background: var(--tuerkis); color: var(--gruen-tief); }
.umzugsliste__phase.ist-fertig .umzugsliste__phasenstand { background: var(--mint); color: var(--tuerkis-text); }
.umzugsliste__aufgaben { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.aufgabe { border: 1.5px solid var(--linie); border-radius: var(--r-m); background: #FFFFFF; transition: border-color .2s, background-color .25s; }
.aufgabe:has(input:checked) { border-color: rgba(25, 169, 155, 0.45); background: var(--mint); }
.aufgabe__haken { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .8rem; padding: .8rem .9rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aufgabe__haken input { position: absolute; top: .8rem; left: .9rem; width: 1.5rem; height: 1.5rem; margin: 0; opacity: 0; cursor: pointer; }
.aufgabe__box {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .05rem;
  border: 2px solid var(--linie-stark); border-radius: 7px; background: #FFFFFF; color: var(--gruen-tief);
  transition: background-color .2s, border-color .2s, transform .3s var(--ease);
}
.aufgabe__box .symbol { width: 1.05rem; height: 1.05rem; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease); }
.aufgabe__haken input:checked + .aufgabe__box { border-color: var(--tuerkis); background: var(--tuerkis); }
.aufgabe__haken input:checked + .aufgabe__box .symbol { opacity: 1; transform: none; }
.aufgabe__haken input:focus-visible + .aufgabe__box { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; }
.aufgabe__haken:active .aufgabe__box { transform: scale(.9); }
.aufgabe__text { display: grid; gap: .15rem; }
.aufgabe__text strong { color: var(--gruen); font-size: .9375rem; line-height: 1.3; }
.aufgabe__text span { color: var(--tinte-2); font-size: .8125rem; line-height: 1.45; }
.aufgabe__haken input:checked ~ .aufgabe__text strong { text-decoration: line-through; text-decoration-color: rgba(13, 117, 107, 0.6); text-decoration-thickness: 1.5px; }
@media (hover: hover) {
  .aufgabe:hover { border-color: var(--tuerkis); }
  .aufgabe:hover .aufgabe__box { border-color: var(--tuerkis-text); }
}
.aufgabe__aktion {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin: -.6rem 0 .1rem 3.2rem; padding: 0 .25rem;
  border: 0; background: none; color: var(--tuerkis-text); font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.aufgabe__aktion .symbol { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.aufgabe__aktion:hover { text-decoration: underline; }
.aufgabe__aktion:hover .symbol { transform: translateX(3px); }
.aufgabe__aktion:focus-visible { outline: 3px solid var(--tuerkis-text); outline-offset: 2px; border-radius: 4px; }
.umzugsliste__fertig { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--gruen); color: #FFFFFF; font-size: .9375rem; }
.umzugsliste__fertig .symbol { flex: none; width: 2rem; height: 2rem; padding: .35rem; border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief); }
@media (prefers-reduced-motion: no-preference) { .umzugsliste__fertig:not([hidden]) { animation: aufploppen .5s var(--ease); } }
.umzugsliste__hinweis { display: flex; gap: .6rem; margin: 1.5rem 0 0; color: var(--tinte-2); font-size: .8125rem; line-height: 1.5; }
.umzugsliste__hinweis .symbol { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--tuerkis-text); }
.umzugsliste__fuss { display: block; }
.umzugsliste__fussgruppe { display: flex; align-items: center; gap: .75rem; }
.umzugsliste__fussgruppe--frage { flex-wrap: wrap; }
.umzugsliste__frage { flex: 1; margin: 0; color: var(--gruen); font-size: .9375rem; font-weight: 600; }
@media (max-width: 39.99rem) {
  .umzugsliste__frage { flex-basis: 100%; }
  .umzugsliste__fussgruppe--frage [data-ul-abbrechen] { flex: 0 0 auto; }
}
@media (max-width: 23.99rem) {
  .umzugsliste__fussgruppe[data-ul-gruppe="liste"] .knopf .symbol { display: none; }
  .umzugsliste__fussgruppe .knopf { padding-inline: .8rem; }
}
.umzugsliste.ist-druckansicht .anfrage__inhalt { background: var(--flaeche); }
.umzugsliste__druckhinweis { max-width: 46rem; margin: 0 auto .85rem; color: var(--tinte-2); font-size: .8125rem; }

/* Druckblatt: in der Druckansicht als Papier, beim Drucken allein auf der Seite */
#druckbereich { display: none; }
.druckblatt {
  max-width: 46rem; margin: 0 auto; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  border-radius: 6px; background: #FFFFFF; color: #1D2A2C; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px -24px rgba(23, 60, 67, 0.45);
  font-size: .8125rem; line-height: 1.45;
}
.druckblatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--gruen); }
.druckblatt .logo { flex: none; width: 8.5rem; height: auto; }
.druckblatt .logo__schrift { fill: var(--gruen); }
.druckblatt__titel { text-align: right; }
.druckblatt__titel p { margin: 0; color: #4A5759; }
.druckblatt__titel .druckblatt__titelzeile { margin-bottom: .2rem; color: var(--gruen); font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.druckblatt__phase { margin-top: 1.1rem; }
.druckblatt__phasentitel { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .35rem; padding-bottom: .25rem; border-bottom: 1px solid #C9CFD0; color: var(--gruen); font-size: .875rem; font-weight: 700; break-after: avoid; }
.druckblatt__phasentitel span { color: #4A5759; font-weight: 600; font-variant-numeric: tabular-nums; }
.druckblatt ul { margin: 0; padding: 0; list-style: none; }
.druckblatt li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; padding: .28rem 0; break-inside: avoid; }
.druckblatt li strong { color: #142A2E; }
.druckblatt__box { display: grid; place-items: center; width: .95rem; height: .95rem; margin-top: .14rem; border: 1.5px solid #1D2A2C; border-radius: 3px; }
.druckblatt__box .symbol { width: .9rem; height: .9rem; color: var(--gruen); }
.druckblatt__linien { height: 6.4rem; background: repeating-linear-gradient(to bottom, transparent 0 1.6rem, #C9CFD0 1.6rem calc(1.6rem + 1px)); }
.druckblatt__fuss { margin-top: 1.1rem; padding-top: .6rem; border-top: 1px solid #C9CFD0; color: #4A5759; font-size: .75rem; }
@media (max-width: 29.99rem) {
  .druckblatt__kopf { flex-direction: column; align-items: flex-start; }
  .druckblatt__titel { text-align: left; }
}

.anfrage__erfolg { display: grid; justify-items: center; gap: .5rem; padding: 1rem 0; text-align: center; outline: none; }
.anfrage__erfolg-symbol { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: .5rem; border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief); box-shadow: 0 0 0 10px var(--mint); }
.anfrage__erfolg-symbol .symbol { width: 2.25rem; height: 2.25rem; }
.anfrage__erfolg-etikett { margin: 0; padding: .3rem .75rem; border-radius: 999px; background: var(--akzent); color: var(--gruen-tief); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.anfrage__erfolg-titel { margin: .25rem 0 .25rem; font-family: var(--font-display); font-weight: 800; font-stretch: 100%; text-transform: uppercase; font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); line-height: 1; }
.anfrage__erfolg > p { max-width: 32rem; color: var(--tinte-2); font-size: .9375rem; }
.zusammenfassung__liste--erfolg { width: 100%; max-width: 30rem; margin: .75rem 0 1rem; padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--flaeche); text-align: left; border: 1px solid var(--linie); }
.anfrage__erfolg-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .anfrage__erfolg:not([hidden]) .anfrage__erfolg-symbol { animation: aufploppen .6s var(--ease) both; }
}
@keyframes aufploppen { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } }
.anfrage.ist-erfolg .anfrage__fuss, .anfrage.ist-erfolg .anfrage__fortschritt { display: none; }
.knopf.ist-laedt { pointer-events: none; opacity: .8; }

/* ---------------------------------------------------------------- Formulare auf dem Smartphone: Texte mindestens 16 px */
@media (max-width: 39.99rem) {
  .schnell__eingabe :is(input, select), .schnell__art span,
  :is(.anfrage, .formular) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea),
  :is(.anfrage, .formular) :is(.feld > label, .feld > legend, .haken, .auswahl__name, .chipwahl__option span, .feld__fehler, .zusammenfassung__liste, .anfrage__datenschutz, .anfrage__uebernommen) {
    font-size: 1rem;
  }
  .helfer :is(.helfer__info, .helfer__hinweis, .aufgabe__text strong, .umzugsliste__frage) { font-size: 1rem; }
  .anfrage :is(.anfrage__pflichthinweis, .uebersicht__aendern, .anfrage__versandfehler) { font-size: 1rem; }
  .helfer .aufgabe__text span { font-size: .875rem; }
  .schnell__feld label { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--tinte-2); }
}

/* ---------------------------------------------------------------- Einheitlicher Hover: Leistungsmerkmale und Vorteilsfelder
   Kurz anheben und Fläche aufhellen – nur das berührte Element, per transform ohne Layoutänderung */
@media (hover: hover) {
  .checkliste li:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(23, 60, 67, 0.6); }
  .checkliste li:hover .symbol { background: var(--gruen); color: var(--akzent); transform: scale(1.06); }
  .chip:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(127, 220, 209, 0.8); transform: translateY(-2px); }
  .vorteil:hover { border-top-color: var(--tuerkis); }
  .vorteil:hover .vorteil__symbol { background: var(--gruen); color: var(--akzent); }
}

/* Smartphone und Tablet: derselbe Effekt beim Antippen eines Leistungsmerkmals (JS setzt .ist-angetippt kurz),
   danach gleitet der Eintrag langsamer in den Ausgangszustand zurück */
.checkliste li.ist-angetippt { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(23, 60, 67, 0.6); transition-duration: .2s; }
.checkliste li.ist-angetippt .symbol { background: var(--gruen); color: var(--akzent); transform: scale(1.06); transition-duration: .2s; }
@media (hover: none) {
  .checkliste li { cursor: pointer; -webkit-tap-highlight-color: transparent; transition-duration: .5s; }
  .checkliste li .symbol { transition-duration: .5s; }
}

/* ---------------------------------------------------------------- Fortschrittslinie (wie auf der bisherigen Website) */
.fortschritt { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 70; height: 3px; pointer-events: none; }
.fortschritt span { display: block; height: 100%; background: var(--tuerkis); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.js) .fortschritt { display: none; }

/* ---------------------------------------------------------------- Schnellkontakt
   Smartphone und Tablet: kleiner schwebender Button unten rechts; beim Antippen klappt ein kompaktes Menü mit Telefon,
   WhatsApp und E-Mail nach oben auf. Er pulsiert gelegentlich, weicht Buttons, Feldern und Überschriften aus und tritt
   zurück, solange ein Eingabefeld aktiv ist. Unter dem Fußbereich ist Platz, damit am Seitenende nichts darunter liegt.
   Desktop: Lasche bündig am rechten Rand (siehe unten). */
.schnellkontakt { position: fixed; z-index: 50; display: none; --fokus: var(--akzent); }
.schnellkontakt__knopf { position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color .25s, transform .25s var(--ease); }
.schnellkontakt__tipp { display: none; }

.kontaktfab {
  position: fixed; z-index: 50;
  right: max(1rem, calc(env(safe-area-inset-right, 0px) + .5rem));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .65rem;
  pointer-events: none;
  transition: transform .35s var(--ease), opacity .3s, visibility 0s;
  --fokus: var(--akzent);
}
.kontaktfab > * { pointer-events: auto; }
.kontaktfab.ist-ausgewichen, .kontaktfab.ist-tippen {
  transform: translateX(calc(100% + 2rem)); opacity: 0; visibility: hidden;
  transition: transform .35s var(--ease), opacity .25s, visibility 0s .35s;
}
.kontaktfab__knopf {
  position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: 0;
  border: 2px solid #FFFFFF; border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief);
  box-shadow: 0 14px 30px -12px rgba(15, 42, 48, 0.75);
  transition: background-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.kontaktfab__knopf > span:not(.visually-hidden) { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .3s var(--ease), opacity .2s; }
.kontaktfab__knopf .symbol { width: 1.6rem; height: 1.6rem; }
.kontaktfab__zu { opacity: 0; transform: rotate(-90deg) scale(.6); }
.kontaktfab.ist-offen .kontaktfab__knopf { background: var(--petrol); color: #FFFFFF; }
.kontaktfab.ist-offen .kontaktfab__auf { opacity: 0; transform: rotate(90deg) scale(.6); }
.kontaktfab.ist-offen .kontaktfab__zu { opacity: 1; transform: none; }
.kontaktfab__menue { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; margin: 0; padding: 0; list-style: none; }
/* Geschlossen ist die (unsichtbare) Liste durchklickbar – sonst fängt sie Klicks auf Inhalte darunter ab (z. B. Videoknopf) */
.kontaktfab:not(.ist-offen) .kontaktfab__menue { pointer-events: none; }
.kontaktfab__menue li {
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.7); transform-origin: right bottom;
  transition: opacity .15s ease, transform .2s ease, visibility 0s .2s;
}
.kontaktfab.ist-offen .kontaktfab__menue li {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
}
.kontaktfab.ist-offen .kontaktfab__menue li:nth-child(2) { transition-delay: .05s; }
.kontaktfab.ist-offen .kontaktfab__menue li:nth-child(1) { transition-delay: .1s; }
.kontaktfab__eintrag {
  display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .3rem .3rem .3rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  background: var(--petrol); color: #FFFFFF; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.65);
  transition: background-color .2s;
}
.kontaktfab__eintrag:hover, .kontaktfab__eintrag:active { background: var(--logo-gruen); color: #FFFFFF; text-decoration: none; }
.kontaktfab__text { display: grid; text-align: right; font-size: .875rem; font-weight: 600; line-height: 1.2; }
.kontaktfab__text small { color: var(--auf-dunkel-2); font-size: .75rem; font-weight: 400; }
.kontaktfab__symbol { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tuerkis); color: var(--gruen-tief); }
.kontaktfab__symbol .symbol { width: 1.25rem; height: 1.25rem; }
@media (max-width: 63.99rem) {
  .fuss { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 64rem) {
  .kontaktfab { display: none; }
}
/* Desktop: Lasche bündig am rechten Rand, unten. 2.5rem breit – so breit wie der kleinste Seitenrand ab 1280 px,
   darunter höchstens wenige Pixel im Randbereich; Beschriftung als Tooltip links daneben */
@media (min-width: 64rem) {
  .schnellkontakt {
    left: auto; right: 0; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 0;
    padding: .3rem 0 .3rem 0; padding-right: env(safe-area-inset-right, 0px);
    border: 2px solid #FFFFFF; border-right: 0; border-radius: 16px 0 0 16px;
    background: var(--tuerkis);
    box-shadow: 0 16px 34px -16px rgba(15, 42, 48, 0.75);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .schnellkontakt__knopf, .schnellkontakt__knopf:first-child {
    width: 2.375rem; height: 2.75rem; min-height: 0; padding: 0; border: 0; border-radius: 12px 0 0 12px;
    background: transparent; color: var(--gruen-tief);
  }
  .schnellkontakt__knopf + .schnellkontakt__knopf::before {
    content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 1px; background: rgba(15, 42, 48, 0.22);
  }
  .schnellkontakt__knopf .symbol, .schnellkontakt__knopf:first-child .symbol { width: 1.3rem; height: 1.3rem; color: var(--gruen-tief); transition: transform .25s var(--ease); }
  .schnellkontakt__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .schnellkontakt__tipp {
    display: block; position: absolute; right: calc(100% + .85rem); top: 50%;
    padding: .45rem .8rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; background: var(--petrol); color: #FFFFFF;
    font-size: .8125rem; font-weight: 600; white-space: nowrap; pointer-events: none;
    box-shadow: 0 10px 24px -12px rgba(15, 42, 48, 0.7);
    opacity: 0; transform: translate(6px, -50%); transition: opacity .2s, transform .25s var(--ease);
  }
  .schnellkontakt__tipp::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: var(--gruen-tief); }
  .schnellkontakt__knopf:hover, .schnellkontakt__knopf:focus-visible, .schnellkontakt__knopf:first-child:hover { background: var(--tuerkis-hell); color: var(--gruen-tief); }
  .schnellkontakt__knopf:hover .symbol, .schnellkontakt__knopf:focus-visible .symbol { transform: scale(1.12); }
  .schnellkontakt__knopf:focus-visible { outline-offset: -3px; outline-color: var(--gruen-tief); }
  .schnellkontakt__knopf:hover .schnellkontakt__tipp, .schnellkontakt__knopf:focus-visible .schnellkontakt__tipp { opacity: 1; transform: translate(0, -50%); }
  .fuss__unten { padding-right: 2.5rem; }
}
/* 1024–1279 px: Seitenrand ab 33 px – Lasche entsprechend schmaler */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .schnellkontakt__knopf, .schnellkontakt__knopf:first-child { width: 1.875rem; }
  .schnellkontakt__knopf .symbol, .schnellkontakt__knopf:first-child .symbol { width: 1.15rem; height: 1.15rem; }
}

/* ---------------------------------------------------------------- Einblenden beim Scrollen */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--verzoegerung, 0s); }
.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }
/* Hover-Anhebung der Karten nach dem Einblenden wieder mit kurzer Dauer */
.js .vorteil.ist-sichtbar { transition: opacity .8s var(--ease), transform .25s var(--ease), box-shadow .25s, border-color .25s; transition-delay: 0s; }
.js .hinweis.ist-sichtbar { transition: opacity .8s var(--ease), transform .4s var(--ease), box-shadow .4s, border-color .3s; transition-delay: 0s; }

/* ---------------------------------------------------------------- Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .schritte .schritt > * { opacity: 1; }
}

/* ---------------------------------------------------------------- Desktop: Bild und Text bündig
   Stehen Bild und Text nebeneinander, richtet sich das Bild nach der Höhe des Textes: Es füllt die Zeile (object-fit:
   cover, Ausschnitt je Motiv in bilder.json „position“), behält aber eine Mindestform. Ist das Bild dadurch höher als der
   Text, steht der Text mittig daneben. Smartphone und Tablet bleiben wie bisher (Bild über bzw. unter dem Text). */
@media (min-width: 64rem) {
  .seitenkopf__raster, .karriere-start__raster, .schwerpunkt__raster, .ueber__raster { align-items: stretch; }
  .seitenkopf__text, .karriere-start__text, .schwerpunkt__text, .ueber__text { align-self: center; }
  .seitenkopf__bild, .karriere-start__bild, .schwerpunkt__bild { display: flex; flex-direction: column; }
  .seitenkopf__bild > .bild, .karriere-start__bild > .bild, .schwerpunkt__bild > .bild { flex: 1 0 auto; aspect-ratio: 8 / 5; }
  /* Über GEKAR: die Bildcollage wächst mit dem Text, das Hauptfoto ist mindestens 5:4 */
  .ueber__bilder { display: flex; flex-direction: column; }
  .ueber__haupt { flex: 1 0 auto; aspect-ratio: 5 / 4; }
  /* Warum GEKAR: Foto links, rechts Überschrift, Text und Link – oben und unten bündig mit dem Foto. Die Textspalte
     bestimmt die Höhe, das Foto füllt sie (mindestens 4:3, Ausschnitt aus bilder.json); die Bildunterschrift steht
     darunter. Der Text behält die normale Lead-Größe der Website. */
  .vorstellung__raster {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto auto auto auto;
    grid-template-areas: "bild kopf" "bild lead" "bild mehr" "bild .";
    align-items: start;
  }
  .vorstellung__bild { position: static; align-self: stretch; display: grid; grid-template-rows: subgrid; max-width: none; }
  .vorstellung__bild > .bild { grid-row: 1 / 4; align-self: stretch; aspect-ratio: auto; }
  .vorstellung__bild > .bild::before { content: ""; display: block; padding-top: 75%; }
  .vorstellung__bild > .bild img { position: absolute; inset: 0; }
  .vorstellung__bild > .gruender { grid-row: 4; }
  .vorstellung__kopf > .eyebrow { display: flex; } /* ohne Zeilenabstand darüber: beginnt genau auf Höhe der Fotokante */
  /* Link: Die Schriftlinie (nicht die 44px-Klickfläche) schließt mit der Unterkante des Fotos ab */
  .vorstellung__raster > .vorstellung__mehr { grid-area: mehr; align-self: end; margin: 1.75rem 0 -1rem; }
  /* Warum GEKAR (seit 08.11.2026): Teamfoto im Querformat 4:3 – das Team steht im Mittelpunkt, von der Wagendecke
     bleibt nur ein schmaler Streifen. Das Foto steht mittig neben Überschrift, Text und Link. */
  .vorstellung__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: auto auto auto; grid-template-areas: "bild kopf" "bild lead" "bild mehr"; }
  .vorstellung__bild { align-self: center; display: block; }
  .vorstellung__bild > .bild { aspect-ratio: 4 / 3; }
  .vorstellung__bild > .bild::before { content: none; }
  .vorstellung__raster > .vorstellung__mehr { align-self: start; margin: 1.25rem 0 0; }
}

/* ---------------------------------------------------------------- Vorher-Nachher-Vergleich (Entrümpelungen)
   Beide Fotos liegen deckungsgleich übereinander (werkzeuge/vergleich.py); das Vorher-Foto ist bis zur Reglerposition
   --pos zu sehen. Maus: klicken oder ziehen. Finger: waagerecht ziehen – senkrechtes Wischen scrollt die Seite normal
   weiter (touch-action: pan-y), kurzes Antippen springt dorthin. Tastatur über den unsichtbaren Schieberegler. */
.vergleich__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.vergleich__text h2 { margin-bottom: 1.25rem; }
.vergleich__projekte {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); gap: .6rem;
  margin: 1.5rem -.25rem 0; padding: .25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.vergleich__projekte::-webkit-scrollbar { display: none; }
.vergleich__projekt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  min-height: 3rem; padding: .55rem .95rem .55rem .55rem; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: #FFFFFF; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start;
  box-shadow: var(--schatten);
  transition: transform .25s var(--ease), box-shadow .25s, background-color .25s, border-color .25s, color .25s;
}
.vergleich__projekt:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: rgba(25, 169, 155, 0.45); }
.vergleich__projekt[aria-pressed="true"] { border-color: var(--gruen); background: var(--gruen); color: #FFFFFF; }
.vergleich__vorschau { display: block; width: 2.75rem; height: 3.4rem; overflow: hidden; border-radius: 10px; background: var(--linie); }
.vergleich__vorschau img { width: 100%; height: 100%; object-fit: cover; }
.vergleich__projekttext { display: grid; gap: .1rem; min-width: 0; }
.vergleich__projekttext strong { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.vergleich__projekttext span { color: var(--tinte-2); font-size: .8125rem; }
.vergleich__projekt[aria-pressed="true"] .vergleich__projekttext span { color: var(--auf-dunkel-2); }
.vergleich__nr { color: var(--akzent-tief); font-family: var(--font-display); font-size: .9375rem; font-stretch: 100%; font-weight: 800; letter-spacing: .06em; }
.vergleich__projekt[aria-pressed="true"] .vergleich__nr { color: var(--akzent-auf-dunkel); }
@media (max-width: 39.99rem) {
  /* Smartphone: kompakte Umschalter nebeneinander */
  .vergleich__projekte { grid-auto-columns: minmax(8.5rem, 1fr); }
  .vergleich__projekt { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: .7rem .6rem; text-align: center; }
  .vergleich__projekttext strong { font-size: .875rem; white-space: nowrap; }
  .vergleich__vorschau, .vergleich__nr, .vergleich__projekttext span { display: none; }
}

.vergleich__buehnen { width: 100%; max-width: 34rem; margin-inline: auto; }
.vergleich__buehne { margin: 0; }
.vergleich__flaeche {
  --pos: 50%; --p: 50;
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--r-l); background: var(--petrol); box-shadow: var(--schatten-hoch);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.vergleich__bild, .vergleich__bild picture { position: absolute; inset: 0; display: block; }
.vergleich__bild img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vergleich__bild--vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* leichter Verlauf oben, damit die Beschriftungen auch vor hellen Decken gut lesbar bleiben */
.vergleich__etikett {
  position: absolute; top: .85rem; z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 999px; background: rgba(15, 42, 48, 0.8); color: #FFFFFF;
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; line-height: 1; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; transition: opacity .25s;
}
.vergleich__etikett::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; }
.vergleich__etikett--vorher { left: .85rem; opacity: clamp(0, calc((var(--p) - 18) / 10), 1); }
.vergleich__etikett--vorher::before { background: var(--akzent); }
.vergleich__etikett--nachher { right: .85rem; opacity: clamp(0, calc((82 - var(--p)) / 10), 1); }
.vergleich__etikett--nachher::before { background: var(--tuerkis-licht); }
.vergleich__linie { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 0; pointer-events: none; }
.vergleich__linie::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(15, 42, 48, 0.1), 0 0 16px rgba(15, 42, 48, 0.35);
}
.vergleich__griff {
  position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border: 3px solid #FFFFFF; border-radius: 50%; background: var(--gruen); color: #FFFFFF;
  box-shadow: 0 12px 28px -10px rgba(15, 42, 48, 0.7), 0 0 0 0 rgba(25, 169, 155, 0.3);
  transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; cursor: grab;
  transition: transform .3s var(--ease), box-shadow .3s, background-color .25s;
}
/* Griff mit dem Haus aus dem GEKAR-Logo (Logofarben auf Petrol); die Pfeile stehen im Hinweis unter dem Bild */
.vergleich__logo { width: 1.8rem; height: 1.8rem; margin-top: -.1rem; fill: var(--tuerkis); }
.vergleich__flaeche:hover .vergleich__griff { background: var(--gruen-tief); box-shadow: 0 12px 28px -10px rgba(15, 42, 48, 0.7), 0 0 0 7px rgba(25, 169, 155, 0.3); }
.vergleich__flaeche.ist-gezogen .vergleich__griff { background: var(--gruen-tief); transform: translate(-50%, -50%) scale(1.08); cursor: grabbing; }
.vergleich__flaeche:has(.vergleich__regler:focus-visible) .vergleich__griff { outline: 3px solid var(--akzent); outline-offset: 3px; }
.vergleich__regler { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vergleich__flaeche.ist-gleitend .vergleich__bild--vorher { transition: clip-path .5s var(--ease); }
.vergleich__flaeche.ist-gleitend .vergleich__linie { transition: left .5s var(--ease); }
.vergleich__unterschrift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; margin-top: .9rem; color: var(--tinte-2); font-size: .875rem; }
.vergleich__unterschrift strong { color: var(--gruen); font-weight: 600; }
.vergleich__hinweis { display: inline-flex; align-items: center; gap: .5rem; }
.vergleich__hinweis-symbol { width: 1.5rem; height: .75rem; color: var(--tuerkis-text); }
.vergleich__buehne.ist-neu .vergleich__flaeche { animation: vergleich-ein .5s var(--ease) both; }
@keyframes vergleich-ein { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 64rem) {
  .vergleich__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
  .vergleich__projekte { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); max-width: 26rem; overflow: visible; }
  /* das Bild passt immer ganz in den Bildschirm */
  .vergleich__buehnen { max-width: min(34rem, calc((100vh - var(--kopf-h) - 8rem) * 0.8)); margin-right: 0; }
}

@media print {
  .kopf, .mobilmenue, .anfrage, .hero__box, .schnellkontakt, .kontaktfab, .fortschritt { display: none !important; }
  .hero, .seitenkopf { min-height: 0; padding-top: 2rem; }
  .js [data-reveal] { opacity: 1; transform: none; }
  /* Umzugscheckliste: nur das Druckblatt ausgeben, gut lesbar auf A4 */
  @page { size: A4; margin: 14mm 15mm 15mm; }
  html.druckt-checkliste, html.druckt-checkliste body { padding: 0 !important; background: #FFFFFF !important; overflow: visible !important; }
  html.druckt-checkliste body > :not(#druckbereich) { display: none !important; }
  html.druckt-checkliste #druckbereich { display: block !important; }
  #druckbereich .druckblatt { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #druckbereich .druckblatt__titelzeile { font-size: 20pt; }
  #druckbereich .druckblatt__phasentitel { font-size: 11pt; }
  #druckbereich .druckblatt__fuss { font-size: 8.5pt; }
}