/* =========================================================================
   Helfmann Umzüge — Google-Ads-Landingpage
   Aufbau: Marken-Werte · Grundlagen · Bausteine · Sektionen · Bewegung
   ========================================================================= */

/* --- Schriften ----------------------------------------------------------- */
@font-face{font-family:'LibreFranklin';src:url('../fonts/libre-franklin-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'LibreFranklin';src:url('../fonts/libre-franklin-latin-800-normal.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'HankenGrotesk';src:url('../fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'HankenGrotesk';src:url('../fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'HankenGrotesk';src:url('../fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'HankenGrotesk';src:url('../fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* --- Marken-Werte -------------------------------------------------------- */
:root{
  --ink:#071326;            /* tiefstes Navy, Kopf und dunkle Flächen      */
  --ink-2:#0E2038;          /* zweite dunkle Fläche                        */
  --ink-3:#16304F;          /* Linien und Karten auf dunklem Grund         */
  --acc:#1674D1;            /* Markenblau aus dem Helfmann-Logo            */
  --acc-tief:#115CA8;       /* Hover auf hellem Grund                      */
  --acc-hell:#5BA6EE;       /* Akzent auf dunklem Grund (Kontrast ≥ 4,5)   */
  --acc-text:#115CA8;       /* Markenblau als KLEINTEXT auf Weiss (4,5:1)  */
  --papier:#FFFFFF;
  --flaeche:#F4F7FA;        /* Sektionsfläche, 98 % Helligkeit             */
  --linie:#E1E7EF;
  --text:#16202E;
  --text-2:#5A6675;
  --text-inv:#EAF1F9;
  --text-inv-2:#A8BBD2;
  --gruen:#0C7F4F;          /* WhatsApp-Flächen: dunkel genug für weisse Schrift */
  --gruen-hell:#14B877;     /* nur dekorativ, nie hinter Text              */
  --karton:#C89B62;

  /* Illustrationen im Formular (werden in dunklen Karten überschrieben) */
  --i-hell:#E7EDF5; --i-dunkel:#0B1B33; --i-akzent:#1674D1; --i-karton:#C89B62;

  /* Drei Radien: der Knopf bleibt deutlich eckiger als die Karte */
  --r-knopf:10px; --r-klein:14px; --r-karte:20px; --r-gross:26px; --r-chip:999px;

  /* Schatten weich dosiert, 1,5–6 % Deckkraft */
  --sch-1:0 1px 2px rgba(7,19,38,.04);
  --sch-2:0 1px 2px rgba(7,19,38,.04), 0 14px 32px rgba(7,19,38,.06);
  --sch-3:0 2px 4px rgba(7,19,38,.05), 0 24px 60px rgba(7,19,38,.10);

  --feder:linear(0,.0063 1.95%,.0242 3.9%,.0946 7.9%,.5688 25.4%,.7159 31.7%,.8278 38%,.9058 44.4%,.9535 50.7%,.9812 57.6%,1.0006 71.1%,1.0011 85.5%,1);
  --breit:1240px;
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--text);
  font:400 16px/1.65 'HankenGrotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4{font-family:'LibreFranklin',system-ui,sans-serif;margin:0;
  letter-spacing:-.018em;font-weight:700;line-height:1.14;text-wrap:balance}
p{margin:0}
/* Der Browser zieht das letzte Wort selbst herunter — halbiert die Waisen im
   Fliesstext ohne Copy-Aenderung. NIE auf Ueberschriften: dort sind die
   Zeilenumbrueche bewusst gesetzt. */
p,li,.lead,.frage__a,.r-text p,.r-text li{text-wrap:pretty}

.huelle{width:min(100% - 2.6rem,var(--breit));margin-inline:auto}
.sekt{padding-block:clamp(3.8rem,7vw,6.2rem)}
.s-flaeche{background:var(--flaeche)}
.s-dunkel{background:var(--ink);color:var(--text-inv)}
.s-dunkel h2,.s-dunkel h3,.s-dunkel h4,.abschluss h2,.abschluss h3{color:#fff}
/* Helle Inseln in dunklen Flaechen erben sonst die weisse Schrift */
.s-dunkel .fkarte h2,.s-dunkel .fkarte h3,.abschluss .fkarte h2,.abschluss .fkarte h3,
.hero .fkarte h2,.hero .fkarte h3,.fkarte .fkarte__t{color:var(--text)}

/* Kicker: nur Text in der Akzentfarbe. Kein Strich, kein Kasten, keine Pille. */
.kicker{display:block;margin-bottom:.7rem;font-size:.9375rem;font-weight:600;
  color:var(--acc-text);letter-spacing:0}
.s-dunkel .kicker,.abschluss .kicker{color:var(--acc-hell)}

.h-gross{font-size:clamp(2.05rem,4.6vw,3.15rem);font-weight:800;line-height:1.08}
h2{font-size:clamp(1.7rem,3.3vw,2.3rem)}
h3{font-size:clamp(1.12rem,1.7vw,1.3rem)}
.zeile-acc{color:var(--acc);display:block}
.s-dunkel .zeile-acc,.abschluss .zeile-acc,.hero .zeile-acc{color:var(--acc-hell)}
.lead{font-size:1.0625rem;color:var(--text-2);max-width:54ch}
.s-dunkel .lead,.abschluss .lead{color:rgba(234,241,249,.86)}

.kopf-mitte{text-align:center;max-width:58ch;margin-inline:auto;margin-bottom:2.6rem}

/* --- Knöpfe -------------------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.5rem;border-radius:var(--r-knopf);border:1px solid transparent;
  font-family:'LibreFranklin',sans-serif;font-weight:700;font-size:.9688rem;
  line-height:1.1;text-decoration:none;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s var(--feder);
}
.knopf:active{transform:translateY(1px)}
.knopf svg{width:18px;height:18px;flex:none;max-width:none}
.knopf--acc{background:var(--acc);color:#fff;box-shadow:0 10px 24px rgba(22,116,209,.22)}
.knopf--acc:hover{background:var(--acc-tief)}
.knopf--rand{background:transparent;border-color:var(--linie);color:var(--text)}
.knopf--rand:hover{border-color:var(--acc);color:var(--acc)}
/* Jede dunkle Flaeche braucht den Gegen-Scope — .abschluss und .trust heissen
   nicht .s-dunkel, der Knopf stand dort sonst dunkel auf dunkel. */
.s-dunkel .knopf--rand,.hero .knopf--rand,.abschluss .knopf--rand,.trust .knopf--rand{
  border-color:rgba(255,255,255,.30);color:#fff}
.s-dunkel .knopf--rand:hover,.hero .knopf--rand:hover,.abschluss .knopf--rand:hover,
.trust .knopf--rand:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
/* Umgekehrt: helle Inseln IN dunklen Flaechen holen die dunkle Schrift zurueck. */
.fkarte .knopf--rand{border-color:var(--linie);color:var(--text)}
.fkarte .knopf--rand:hover{border-color:var(--acc);color:var(--acc)}
.knopf--wa{background:var(--gruen);color:#fff}
.knopf--wa:hover{background:#0a6b42}
.knopf--voll{width:100%}

/* --- Kopfzeile ----------------------------------------------------------- */
/* Über dem Hero durchsichtig, beim Scrollen wird die Fläche sichtbar. */
.kopf{position:fixed;inset:0 0 auto;z-index:70;
  transition:background .25s,box-shadow .25s,border-color .25s;
  border-bottom:1px solid transparent}
.kopf.ist-fest{background:rgba(7,19,38,.94);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.10);box-shadow:0 8px 28px rgba(7,19,38,.22)}
.kopf__in{display:flex;align-items:center;gap:1.4rem;padding-block:.9rem}
.kopf__logo{display:flex;align-items:center;flex:none}
.kopf__logo img{height:38px;width:auto}
.kopf__nav{display:flex;gap:1.6rem;margin-left:auto}
.kopf__nav a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.9375rem;
  font-weight:500;transition:color .18s}
.kopf__nav a:hover{color:#fff}
.kopf__tel{display:inline-flex;align-items:center;gap:.5rem;color:#fff;
  text-decoration:none;font-family:'LibreFranklin',sans-serif;font-weight:700;font-size:.9688rem}
.kopf__tel svg{width:17px;height:17px;color:var(--acc-hell)}
.kopf__tel:hover{color:var(--acc-hell)}
.kopf__mob{display:none;margin-left:auto;gap:.5rem}
.kopf__ico{display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:var(--r-knopf);background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.kopf__ico svg{width:19px;height:19px}
.kopf__ico--wa{background:var(--gruen)}
.kopf__ico--tel{background:var(--acc)}

/* --- Hero: reine Anfrage-Flaeche ----------------------------------------
   Kein Split, keine Bullet-Liste, keine zweite Botschaft. Wer hier landet,
   will einen Umzug anfragen — also steht genau das in der Mitte.
   ------------------------------------------------------------------------ */
.hero{position:relative;background:var(--ink);color:#fff;isolation:isolate;overflow:hidden;
  padding-top:clamp(6.4rem,10vw,8.4rem);padding-bottom:clamp(3rem,5.5vw,4.6rem)}
/* Das Foto traegt nur noch Atmosphaere, es konkurriert nicht mit dem Formular */
.hero__bild{position:absolute;inset:0;z-index:-3;opacity:.32}
.hero__bild picture,.hero__bild img{display:block;width:100%;height:100%}
.hero__bild img{object-fit:cover;object-position:58% 44%}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(7,19,38,.93) 0%,rgba(7,19,38,.70) 26%,
             rgba(7,19,38,.88) 64%,rgba(7,19,38,.99) 100%)}
/* Weicher Markenschein hinter der Karte — hebt sie von der Flaeche ab */
.hero::after{content:"";position:absolute;left:50%;top:44%;z-index:-1;
  width:min(1180px,128vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(22,116,209,.34) 0%,rgba(22,116,209,0) 60%);
  pointer-events:none}

.hero__mitte{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{font-family:'HankenGrotesk',system-ui,sans-serif;font-size:.9375rem;font-weight:600;
  letter-spacing:.01em;color:var(--acc-hell);line-height:1.5;margin:0 0 .95rem}
.hero__ansage{font-family:'LibreFranklin',sans-serif;font-weight:800;
  font-size:clamp(2.25rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.026em;
  margin:0 0 .95rem;max-width:17ch}
.hero__unter{font-size:1rem;color:rgba(234,241,249,.82);max-width:48ch;
  margin:0 0 clamp(1.7rem,3.4vw,2.5rem)}
/* Die Karte erbt die Zentrierung des Heros nicht — Kopfzeile, Frage und
   Felder stehen linksbuendig, sonst zerfaellt das Formular optisch. */
.hero__form{width:min(100%,920px);text-align:left}

/* Belege unter dem Formular: eine Zeile, keine eigene Sektion */
.hero__belege{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .5rem;
  margin-top:clamp(1.4rem,2.6vw,2rem)}
.hero__belege span{display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem;border-radius:var(--r-chip);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  font-size:.8438rem;font-weight:500;color:#fff;backdrop-filter:blur(6px)}
.hero__belege svg{width:16px;height:16px;color:var(--acc-hell);flex:none}

/* Google-Sterne-Zeile: nur Logo, Schnitt und Sterne */
.sterne{display:inline-flex;gap:2px;color:#FFB400}
.sterne svg{width:15px;height:15px}
.g-logo{width:19px;height:19px;flex:none}

/* =========================================================================
   DAS FORMULAR — Herzstück der Seite
   Eine Karte, mehrfach mountbar (Hero und Abschluss). Felder werden über
   Klassen angesprochen, nie über IDs, sonst kollidieren die Instanzen.
   ========================================================================= */
.fkarte{position:relative;background:var(--papier);color:var(--text);
  border-radius:var(--r-gross);box-shadow:var(--sch-3);padding:1.5rem 1.5rem 1.35rem}
.fkarte__kopf{padding-right:5.6rem;margin-bottom:1.15rem}
.fkarte__kopf h2,.fkarte__kopf .fkarte__t{font-family:'LibreFranklin',sans-serif;
  font-weight:800;font-size:1.28rem;line-height:1.18;letter-spacing:-.02em;
  color:var(--text);margin:0 0 .35rem}
.fkarte__zeit{font-size:.875rem;color:var(--text-2)}

/* Aktions-Störer: runder Kreis, schräg über die obere rechte Ecke */
.stoerer{position:absolute;top:-16px;right:-10px;width:92px;height:92px;
  border-radius:50%;background:var(--acc);color:#fff;display:grid;place-content:center;
  text-align:center;transform:rotate(9deg);box-shadow:0 10px 24px rgba(22,116,209,.34);
  border:3px solid #fff;z-index:3}
.stoerer b{display:block;font-family:'LibreFranklin',sans-serif;font-weight:800;
  font-size:1.32rem;line-height:1}
.stoerer span{display:block;font-size:.625rem;font-weight:600;line-height:1.2;
  letter-spacing:.02em;margin-top:2px}

/* --- Antwort-Chips: was der Nutzer bisher gewählt hat --------------------- */
.merker{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;min-height:0}
.merker:empty{display:none}
.merker__c{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .62rem;
  border-radius:var(--r-chip);background:#EAF2FB;color:var(--acc-text);
  font-size:.7813rem;font-weight:600;line-height:1.3;
  animation:chipRein .32s var(--feder) both}
.merker__c svg{width:12px;height:12px;flex:none;max-width:none}
@keyframes chipRein{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}

/* --- Fortschritt: ab Schritt 1 sichtbar, mit echtem Prozentwert ----------- */
.fortschritt{margin-bottom:1.1rem}
.fortschritt__z{display:flex;justify-content:space-between;align-items:center;
  font-size:.7813rem;font-weight:600;color:var(--text-2);margin-bottom:.42rem}
.fortschritt__z b{color:var(--acc-text);font-weight:700}
.fortschritt__s{height:6px;border-radius:var(--r-chip);background:#E7EDF5;overflow:hidden}
.fortschritt__f{height:100%;border-radius:var(--r-chip);
  background:linear-gradient(90deg,var(--acc),#4E9CE8);
  transition:width .42s var(--feder)}

/* --- Schritte ------------------------------------------------------------ */
.schritt{display:none}
.schritt.ist-an{display:block;animation:schrittRein .34s var(--feder) both}
@keyframes schrittRein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.schritt__kopf{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.95rem}
.zurueck{display:none;flex:none;width:32px;height:32px;border-radius:var(--r-chip);
  border:1px solid var(--linie);background:#fff;cursor:pointer;
  place-items:center;color:var(--text-2);transition:border-color .18s,color .18s}
.zurueck.ist-an{display:grid}
.zurueck:hover{border-color:var(--acc);color:var(--acc)}
.zurueck svg{width:15px;height:15px}
.schritt__frage{font-family:'LibreFranklin',sans-serif;font-weight:700;
  font-size:1.0625rem;line-height:1.3;color:var(--text);margin:3px 0 0}

/* --- Illustrierte Auswahlkarten ------------------------------------------ */
.picks{display:grid;gap:.6rem}
.picks--2{grid-template-columns:repeat(2,1fr)}
.picks--3{grid-template-columns:repeat(3,1fr)}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:.72rem .5rem .62rem;border:1.5px solid var(--linie);border-radius:var(--r-klein);
  background:#fff;cursor:pointer;text-align:center;
  transition:border-color .18s,box-shadow .18s,transform .18s var(--feder),background .18s}
.pick:hover{border-color:#9EC6EE;box-shadow:var(--sch-1);transform:translateY(-2px)}
.pick__ill{width:100%;max-width:92px;aspect-ratio:96/76;height:auto;display:block;
  border-radius:9px;background:#F2F6FB;transition:background .18s}
.pick__txt{font-size:.8125rem;font-weight:600;line-height:1.25;color:var(--text)}
.pick.ist-gewaehlt{border-color:var(--acc);background:#F7FBFF;
  box-shadow:0 0 0 3px rgba(22,116,209,.12)}
.pick.ist-gewaehlt .pick__ill{background:#E6F1FC}
.pick__haken{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  background:var(--acc);color:#fff;display:grid;place-items:center;opacity:0;
  transform:scale(.5);transition:opacity .2s,transform .24s var(--feder)}
.pick__haken svg{width:11px;height:11px;max-width:none}
.pick.ist-gewaehlt .pick__haken{opacity:1;transform:none}

/* Im Hero steht die Karte allein und darf breiter atmen: groessere Motive,
   vier Spalten fuer den Zeitpunkt statt zwei. */
.fkarte--breit{padding:1.9rem 1.9rem 1.6rem}
.fkarte--breit .fkarte__kopf h2,.fkarte--breit .fkarte__t{font-size:1.5rem}
.fkarte--breit .fkarte__zeit{font-size:.9375rem}
.fkarte--breit .schritt__frage{font-size:1.2rem}
.fkarte--breit .pick{padding:1rem .7rem .8rem;gap:.65rem}
.fkarte--breit .pick__ill{max-width:124px}
.fkarte--breit .pick__txt{font-size:.9063rem}
.fkarte--breit .picks{gap:.75rem}
.fkarte--breit .picks--2{grid-template-columns:repeat(4,1fr)}
.fkarte--breit .rng__zahlgross{font-size:2.9rem}
.fkarte--breit .felder{gap:.75rem}

/* --- Schieberegler: Entfernung ------------------------------------------- */
.rng{--p:0%;--pn:0;padding:.35rem 0 0}
.rng__wert{display:flex;align-items:baseline;justify-content:center;gap:.4rem;
  margin-bottom:.85rem}
.rng__zahlgross{font-family:'LibreFranklin',sans-serif;font-weight:800;font-size:2.15rem;
  line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}
.rng__einheit{font-size:.9375rem;font-weight:600;color:var(--text-2)}
.rng__zone{display:block;text-align:center;font-size:.8125rem;font-weight:600;
  color:var(--text-2);margin-bottom:1.05rem;min-height:1.2em}
.rng__bahn{position:relative;padding:0 11px}
.rng__in{-webkit-appearance:none;appearance:none;width:100%;height:8px;margin:0;
  border-radius:var(--r-chip);cursor:pointer;background:
  linear-gradient(90deg,var(--acc) 0,var(--acc) var(--p),#E7EDF5 var(--p),#E7EDF5 100%)}
.rng__in::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:grab;
  box-shadow:0 3px 10px rgba(7,19,38,.18)}
.rng__in::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--acc);cursor:grab;box-shadow:0 3px 10px rgba(7,19,38,.18)}
.rng__marken{display:flex;justify-content:space-between;margin-top:.55rem;
  font-size:.75rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.rng__tipp{margin-top:.95rem;display:flex;align-items:flex-start;gap:.55rem;
  padding:.7rem .8rem;background:#F4F7FA;border-radius:var(--r-klein);
  font-size:.8125rem;color:var(--text-2);line-height:1.45}
.rng__tipp svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--acc-text);max-width:none}

/* --- Kontaktschritt ------------------------------------------------------ */
.felder{display:grid;gap:.6rem}
.felder--2{grid-template-columns:1fr 1fr}
.feld{display:block}
.feld span{display:block;font-size:.7813rem;font-weight:600;color:var(--text-2);
  margin-bottom:.3rem}
.feld input,.feld textarea{width:100%;padding:.72rem .85rem;border:1.5px solid var(--linie);
  border-radius:var(--r-knopf);background:#fff;font-size:.9375rem;
  transition:border-color .18s,box-shadow .18s}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(22,116,209,.13)}
.feld textarea{resize:vertical;min-height:72px}
.dsgvo{display:flex;align-items:flex-start;gap:.55rem;margin-top:.7rem;
  font-size:.75rem;line-height:1.5;color:var(--text-2)}
.dsgvo input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--acc)}
.dsgvo a{color:var(--acc-text);text-decoration:underline}

/* --- Zweispaltig: Schritt links, mitwachsende Anfrage rechts ------------- */
/* Zwei Spalten NUR in der breiten Karte. In der schmalen Abschluss-Karte
   bliebe fuer den Schritt sonst eine 196-px-Spalte uebrig. */
.fgitter{display:grid;grid-template-columns:1fr;gap:1.3rem}
.fgitter__haupt{min-width:0}
.fkarte--breit .fgitter{grid-template-columns:minmax(0,1fr) 250px;gap:1.6rem}
.frail{border-top:1px solid var(--linie);padding-top:1.3rem;display:flex;flex-direction:column}
.fkarte--breit .frail{border-top:0;border-left:1px solid var(--linie);
  padding-top:0;padding-left:1.5rem}
/* In der schmalen Karte traegt die Sektion daneben die Argumente schon —
   die Spalte zeigt dort nur die Antworten. */
.fkarte:not(.fkarte--breit) .rail__fuss{display:none}
.fkarte:not(.fkarte--breit) .rail__leer{display:none}
.fkarte:not(.fkarte--breit) .rail__l:empty{display:none}
.fkarte:not(.fkarte--breit) .rail__l:empty + .rail__leer ~ *{margin-top:0}
/* Der Rabatt-Stoerer sitzt ueber dieser Ecke — Platz freihalten */
.frail .rail__t{padding-right:4.6rem}
.rail__t{font-family:'LibreFranklin',sans-serif;font-weight:700;font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:.9rem}
.rail__l{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rail__l li{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .7rem;
  border-radius:var(--r-klein);background:var(--flaeche);cursor:pointer;
  border:1px solid transparent;transition:border-color .18s,background .18s;
  animation:chipRein .32s var(--feder) both}
.rail__l li:hover{border-color:#BBD8F3;background:#F4F9FE}
.rail__l svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--gruen);max-width:none}
.rail__l span{display:block;font-size:.6875rem;color:var(--text-2);line-height:1.3}
.rail__l b{display:block;font-size:.8125rem;font-weight:600;line-height:1.3}
.rail__leer{font-size:.8125rem;color:var(--text-2);line-height:1.5}
.rail__l:not(:empty) + .rail__leer{display:none}
.rail__fuss{margin-top:auto;padding-top:1.3rem}
.rail__belege{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.45rem}
.rail__belege li{display:flex;align-items:flex-start;gap:.5rem;font-size:.75rem;
  color:var(--text-2);line-height:1.4}
.rail__belege svg{width:13px;height:13px;flex:none;margin-top:2px;color:var(--acc);max-width:none}
.frail .fkarte__google{border-top:0;padding-top:0;margin-top:0;justify-content:flex-start;
  font-size:.8125rem}

/* --- Steuerung, Fehler, Erfolg ------------------------------------------- */
.form__steuer{margin-top:1.05rem}
.formfehler{display:none;margin-bottom:.7rem;padding:.6rem .8rem;border-radius:var(--r-knopf);
  background:#FDEDED;color:#B42318;font-size:.8125rem;font-weight:500}
.formfehler.ist-an{display:block}
/* Trustline: fett, etwas größer, ohne Rahmen und ohne Hintergrund */
.trustline{margin-top:.85rem;text-align:center;font-size:.875rem;font-weight:700;
  color:var(--text-2)}
.fkarte__google{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--linie);
  display:flex;align-items:center;justify-content:center;gap:.55rem;font-size:.8438rem;
  color:var(--text-2)}
.fkarte__google b{color:var(--text);font-weight:700}
.formstate{display:none;text-align:center;padding:1.6rem .6rem 1rem}
.formstate.ist-an{display:block;animation:schrittRein .4s var(--feder) both}
.formstate__ring{width:62px;height:62px;border-radius:50%;background:#E6F7F0;
  color:var(--gruen);display:grid;place-items:center;margin:0 auto 1rem}
.formstate__ring svg{width:30px;height:30px;max-width:none}
.formstate h3{font-size:1.2rem;margin-bottom:.5rem}
.formstate p{font-size:.9375rem;color:var(--text-2);max-width:34ch;margin-inline:auto}

/* =========================================================================
   SEKTIONEN
   ========================================================================= */

/* --- Bewertungen: Notenfeld links, zwei gegenlaeufige Baender ------------ */
.bew__kopf{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;margin-bottom:clamp(2.2rem,4vw,3rem)}
.bew__note{display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:1.5rem 1.9rem;box-shadow:var(--sch-2);min-width:230px}
.bew__zahl{font-family:'LibreFranklin',sans-serif;font-weight:800;font-size:3.4rem;
  line-height:1;letter-spacing:-.03em;color:var(--text)}
.bew__note .sterne svg{width:19px;height:19px}
.bew__von{font-size:.8438rem;color:var(--text-2);text-align:center}
.bew__quelle{display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;
  padding-top:.7rem;border-top:1px solid var(--linie);width:100%;justify-content:center;
  font-size:.7813rem;font-weight:600;color:var(--text-2)}
.bew__text .lead{margin-top:.7rem}

.band{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.band + .band{margin-top:1.1rem}
/* Karten folgen ihrer eigenen Hoehe statt sich an der laengsten auszurichten —
   im laufenden Band wirkt das lebendig statt luecken-haft. */
.band__spur{display:flex;align-items:flex-start;gap:1.1rem;width:max-content;
  animation:bandLauf 68s linear infinite}
/* Die zweite Reihe laeuft gegen die erste — das nimmt dem Band das Monotone */
.band--zurueck .band__spur{animation-direction:reverse}
.band:hover .band__spur,.band:focus-within .band__spur{animation-play-state:paused}
@keyframes bandLauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none}
  .band{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .band + .band{margin-top:.9rem}}

.bkarte{position:relative;flex:none;width:min(83vw,376px);background:#fff;
  border:1px solid var(--linie);border-radius:var(--r-karte);padding:1.35rem 1.4rem;
  box-shadow:var(--sch-1);display:flex;flex-direction:column;gap:.75rem;overflow:hidden}
/* Grosses Anfuehrungszeichen als Flaeche, nicht als Zeichen im Text */
.bkarte::before{content:"\201C";position:absolute;top:-.45rem;right:.7rem;
  font-family:'LibreFranklin',serif;font-size:6.5rem;line-height:1;font-weight:800;
  color:var(--acc);opacity:.07;pointer-events:none}
/* Eine sehr lange Rezension darf die Reihe nicht sprengen: nach sieben Zeilen
   wird abgeschnitten, vollstaendig steht sie ohnehin im Google-Profil. */
.bkarte__txt{position:relative;font-size:.9063rem;line-height:1.6;color:var(--text);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.bkarte__fuss{display:flex;align-items:center;gap:.7rem;padding-top:.8rem;
  border-top:1px solid var(--linie)}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acc) 0%,#0F4F94 100%);color:#fff;
  font-family:'LibreFranklin',sans-serif;font-weight:700;font-size:.8438rem;
  box-shadow:0 4px 12px rgba(22,116,209,.26)}
.bkarte__name{font-weight:700;font-size:.875rem;line-height:1.3;display:block}
.bkarte__meta{font-size:.75rem;color:var(--text-2)}
.bkarte__g{margin-left:auto;flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--flaeche)}
.bkarte__g svg{width:16px;height:16px}

/* --- Vorteile: Bento-Kacheln mit Fotohintergrund ------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem}
.kach{position:relative;overflow:hidden;border-radius:var(--r-karte);
  min-height:216px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.3rem;isolation:isolate;color:#fff}
.kach--gross{grid-column:span 3;min-height:300px}
.kach--halb{grid-column:span 3}
.kach--drittel{grid-column:span 2}
.kach__bg{position:absolute;inset:0;z-index:-2}
.kach__bg img{width:100%;height:100%;object-fit:cover}
.kach--foto::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(7,19,38,.92) 0%,rgba(7,19,38,.66) 42%,rgba(7,19,38,.3) 100%)}
.kach--ink{background:var(--ink)}
.kach--acc{background:linear-gradient(140deg,var(--acc) 0%,#0F5AA8 100%)}
.kach>svg{width:34px;height:34px;color:var(--acc-hell);max-width:none;flex:none}
.kach--acc>svg{color:#fff}
.kach__num{font-family:'LibreFranklin',sans-serif;font-weight:800;
  font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1;margin-bottom:.35rem}
.kach h3{font-size:1.0625rem;margin-bottom:.4rem;color:#fff}
.kach p{font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.84)}
.kach__haken{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.34rem}
.kach__haken li{display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;
  color:rgba(255,255,255,.9)}
.kach__haken svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--acc-hell)}
.kach--acc .kach__haken svg{color:#fff}

/* --- Einzugsgebiet: Karte läuft über die Sektion hinaus ------------------- */
#gebiet{overflow-x:clip}
.gebiet{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
/* Die Karte ist hochkant (1000x1354). Ueber die Spaltenbreite skaliert wird sie
   doppelt so hoch wie der Text daneben — deshalb bindet sie ihre HOEHE an den
   Inhalt und nicht ihre Breite an die Spalte. */
.gebiet__karte{display:flex;justify-content:flex-end;margin-right:-3%}
.gebiet__karte img{width:auto;max-width:none;height:clamp(380px,38vw,540px)}
.gebiet__haken{list-style:none;margin:1.3rem 0 1.7rem;padding:0;display:grid;gap:.72rem}
.gebiet__haken li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9375rem}
.gebiet__haken svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--acc)}
.gebiet__knoepfe{display:flex;flex-wrap:wrap;gap:.7rem}

/* --- FAQ ----------------------------------------------------------------- */
#fragen{position:relative;overflow:hidden}
.faq__marke{position:absolute;right:-4%;top:40%;width:min(38%,380px);opacity:.055;
  pointer-events:none;z-index:0}
.faq{position:relative;z-index:1;max-width:820px;margin-inline:auto;display:grid;gap:.7rem}
.frage{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);
  overflow:hidden;transition:border-color .2s,box-shadow .2s}
.frage[open]{border-color:#BBD8F3;box-shadow:var(--sch-2)}
.frage summary{list-style:none;cursor:pointer;padding:1.05rem 1.25rem;display:flex;
  align-items:center;gap:1rem;font-family:'LibreFranklin',sans-serif;font-weight:700;
  font-size:.9688rem;line-height:1.35}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:2.4px solid var(--acc);border-bottom:2.4px solid var(--acc);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .26s var(--feder)}
.frage[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.frage__a{padding:0 1.25rem 1.15rem;font-size:.9375rem;color:var(--text-2);line-height:1.65}
.faq__fuss{text-align:center;margin-top:2rem;font-size:.9375rem;color:var(--text-2)}
.faq__fuss a{color:var(--acc-text);font-weight:700;text-decoration:none}

/* --- Abschluss-CTA mit zweitem Formular ---------------------------------- */
.abschluss{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  padding-block:clamp(3.6rem,6.5vw,5.4rem)}
.abschluss__bg{position:absolute;inset:0;z-index:-2}
.abschluss__bg img{width:100%;height:100%;object-fit:cover}
.abschluss::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,19,38,.96) 0%,rgba(7,19,38,.9) 40%,rgba(7,19,38,.66) 100%)}
.abschluss__gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(2rem,4vw,3.4rem);align-items:center}
.abschluss__haken{list-style:none;margin:1.3rem 0 1.7rem;padding:0;display:grid;gap:.7rem}
.abschluss__haken li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9375rem;color:#fff}
.abschluss__haken svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--acc-hell)}

/* --- Fußzeile ------------------------------------------------------------ */
.fuss{background:var(--ink);color:var(--text-inv-2);padding-block:3.2rem 1.6rem}
.fuss__gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem;
  padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.10)}
.fuss__logo img{height:42px;width:auto;margin-bottom:1rem}
.fuss p{font-size:.875rem;line-height:1.65;max-width:38ch}
.fuss h4{font-family:'LibreFranklin',sans-serif;font-size:.8125rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:.9rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{color:var(--text-inv-2);text-decoration:none;font-size:.875rem;transition:color .18s}
.fuss a:hover{color:#fff}
.fuss__unten{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  padding-top:1.5rem;font-size:.8125rem}
.fuss__recht{display:flex;flex-wrap:wrap;gap:1.2rem}

/* --- Schwebender Kontaktknopf -------------------------------------------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:.6rem;
  justify-items:end}
.fab__aus{display:grid;gap:.55rem;justify-items:end;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .22s,transform .26s var(--feder),visibility .22s}
.fab.ist-auf .fab__aus{opacity:1;visibility:visible;transform:none}
.fab__l{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .9rem;
  border-radius:var(--r-chip);background:#fff;color:var(--text);text-decoration:none;
  font-size:.875rem;font-weight:700;box-shadow:var(--sch-2);white-space:nowrap}
.fab__l svg{width:17px;height:17px;flex:none}
.fab__l--wa svg{color:var(--gruen)}
.fab__l--tel svg{color:var(--acc)}
.fab__k{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:var(--acc);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 28px rgba(22,116,209,.4);transition:transform .24s var(--feder)}
.fab__k svg{width:23px;height:23px}
.fab__k:hover{transform:scale(1.06)}
.fab.ist-auf .fab__k{transform:rotate(90deg)}

/* --- Bewegung: 10-px-Reveal ---------------------------------------------- */
.rein{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .6s var(--feder)}
.rein.ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rein{opacity:1;transform:none;transition:none}
  .schritt.ist-an,.formstate.ist-an,.merker__c{animation:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================================
   BREITEN
   ========================================================================= */
@media (max-width:1180px){
  .kopf__nav{gap:1.1rem}
  .kopf__nav a{font-size:.875rem}
}

@media (max-width:1040px){
  .hero{padding-top:6.2rem}
  .abschluss__gitter{grid-template-columns:1fr;gap:2rem}
  .gebiet{grid-template-columns:1fr;gap:1.8rem}
  /* Gestapelt wieder ueber die Breite, nur nach rechts ueberstehend —
     bei negativem margin-left wird der Chip des Firmensitzes angeschnitten. */
  .gebiet__karte{display:block;width:116%;margin-left:0;margin-right:0;order:-1}
  .gebiet__karte img{width:100%;height:auto}
  .bento{grid-template-columns:repeat(4,1fr)}
  .kach--gross{grid-column:span 4;min-height:264px}
  .kach--halb{grid-column:span 2}
  .kach--drittel{grid-column:span 2}
  .fuss__gitter{grid-template-columns:1fr 1fr;gap:2rem}
  .fuss__logo{grid-column:1 / -1}
}

@media (max-width:900px){
  /* Unter dieser Breite steht die Anfrage-Spalte unter dem Schritt statt daneben */
  .fkarte--breit .fgitter{grid-template-columns:1fr;gap:1.3rem}
  .fkarte--breit .frail{border-left:0;border-top:1px solid var(--linie);
    padding-left:0;padding-top:1.3rem}
  .frail .rail__t{padding-right:0}
  .rail__fuss{margin-top:1.2rem}
}

@media (max-width:860px){
  .bew__kopf{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.5rem}
  .bew__note{width:min(100%,300px)}
  .bew__text .lead{margin-inline:auto}
}

@media (max-width:760px){
  .kopf__nav,.kopf__tel,.kopf .knopf{display:none}
  .kopf__mob{display:flex}
  .kopf__logo img{height:34px}
  .hero{padding-top:5.2rem}
  .hero__unter{font-size:.9375rem}
  .hero__belege span{font-size:.8125rem;padding:.45rem .7rem}
  .bento{grid-template-columns:1fr}
  .kach,.kach--gross,.kach--halb,.kach--drittel{grid-column:span 1;min-height:230px}
  .picks--3{grid-template-columns:repeat(2,1fr)}
  .fkarte--breit .picks--2{grid-template-columns:repeat(2,1fr)}
  .felder--2{grid-template-columns:1fr}
  .fuss__gitter{grid-template-columns:1fr}
  .fuss__unten{flex-direction:column;gap:.7rem}
  .faq__marke{display:none}
  .band__spur{animation-duration:48s}
}

@media (max-width:460px){
  .huelle{width:calc(100% - 1.9rem)}
  .fkarte,.fkarte--breit{padding:1.2rem 1rem 1.1rem;border-radius:var(--r-karte)}
  .fkarte__kopf{padding-right:4.4rem}
  .fkarte__kopf h2,.fkarte__kopf .fkarte__t,.fkarte--breit .fkarte__t{font-size:1.14rem}
  .fkarte--breit .schritt__frage{font-size:1.0625rem}
  .fkarte--breit .pick{padding:.6rem .35rem .55rem;gap:.5rem}
  .fkarte--breit .pick__ill{max-width:74px}
  .fkarte--breit .pick__txt{font-size:.75rem}
  .stoerer{width:74px;height:74px;top:-13px;right:-6px}
  .stoerer b{font-size:1.06rem}
  .stoerer span{font-size:.5625rem}
  .pick{padding:.6rem .35rem .55rem}
  .pick__ill{max-width:74px}
  .pick__txt{font-size:.75rem}
  .rng__zahlgross,.fkarte--breit .rng__zahlgross{font-size:1.85rem}
  .bew__zahl{font-size:2.8rem}
  .bkarte{width:min(86vw,320px);padding:1.15rem 1.15rem}
  .fab{right:14px;bottom:14px}
}

@media print{
  .kopf,.fab,.band,.abschluss__bg,.hero__bild{display:none}
  body{color:#000}
}

/* =========================================================================
   RECHTSSEITEN (Impressum, Datenschutz, 404)
   ========================================================================= */
.r-kopf{background:var(--ink);color:#fff;padding:clamp(6rem,10vw,7.6rem) 0 clamp(2.4rem,4vw,3.4rem)}
.r-kopf h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:.55rem}
.r-kopf p{color:var(--text-inv-2);font-size:1.0625rem}
.r-zurueck{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.3rem;
  font-family:'HankenGrotesk',system-ui,sans-serif;
  font-size:.875rem;font-weight:600;color:var(--acc-hell);text-decoration:none}
.r-zurueck:hover{color:#fff}
.r-zurueck svg{width:15px;height:15px}
.r-text{max-width:74ch;margin-inline:auto;padding-block:clamp(2.6rem,5vw,4rem)}
.r-text h2{font-size:1.28rem;margin:2.4rem 0 .8rem;scroll-margin-top:5rem}
.r-text h2:first-child{margin-top:0}
.r-text h3{font-size:1.02rem;margin:1.6rem 0 .5rem}
.r-text p{margin-bottom:1rem;color:var(--text-2);line-height:1.75}
.r-text ul{margin:0 0 1rem;padding-left:1.15rem;color:var(--text-2);line-height:1.75}
.r-text li{margin-bottom:.35rem}
.r-text a{color:var(--acc-text)}
.r-text strong{color:var(--text)}
.r-box{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-karte);
  padding:1.2rem 1.35rem;margin-bottom:1.2rem}
.r-box p{margin-bottom:.3rem}
.r-box p:last-child{margin-bottom:0}
.r-hinweis{border-left:3px solid var(--acc);background:#F4F9FE;border-radius:0 var(--r-klein) var(--r-klein) 0;
  padding:.9rem 1.1rem;margin-bottom:1.2rem}
.r-hinweis p{margin-bottom:0;font-size:.9375rem}

/* 404 */
.vier{min-height:78vh;display:grid;place-items:center;text-align:center;
  padding:clamp(6rem,10vw,8rem) 0 4rem}
/* .vier p traegt Klasse UND Element und schlaegt sonst die Zahl grau */
.vier p.vier__num{font-family:'LibreFranklin',sans-serif;font-weight:800;
  font-size:clamp(4.6rem,15vw,9rem);line-height:.9;color:var(--acc);letter-spacing:-.04em}
.vier h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:1rem 0 .7rem}
.vier p{color:var(--text-2);max-width:46ch;margin:0 auto 1.8rem}
.vier__k{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}