/* =========================================================================
   Touch Clean Objektservice GmbH: Stadtseiten, Premium-Fassung (21.10.2026, R5)
   Liegt über styles.css und stadtseite.css. Gleiche Tokens, gleiche Schrift.
   Richtung: ruhig, groß, viel Weißraum. Eine Akzentfarbe, feine Schatten (≤ 6 %),
   deckende Flächen statt Glas. Radien: 10 / 14 / 20 / 26 / 999.
   Breakpoints wie die LP: 1100 / 960 / 760 / 340, nur max-width.
   ========================================================================= */

:root{
  --r-card:20px;
  --r-lg:26px;
  --shadow:0 1px 2px rgba(29,29,31,.04),0 12px 32px rgba(29,29,31,.06);
  --shadow-hover:0 1px 2px rgba(29,29,31,.05),0 20px 44px rgba(29,29,31,.06);
  --handy-b:318px;
}

/* ---------- Typo: größer, enger, ruhiger ---------------------------------- */
.sek{padding:120px 0}
.h2{font-size:clamp(1.5rem,.9rem + 2.9vw,2.875rem);font-weight:600;letter-spacing:-.032em;line-height:1.08}
.kicker{font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem}
.lead{font-size:1.125rem;line-height:1.6}
.kopfblock{margin-bottom:3.5rem}
/* H2 in zweispaltigen Sektionen etwas kleiner, damit sie zweizeilig bleibt */
.chat-text .h2,.plan .h2,.steckbrief .h2{font-size:clamp(1.5rem,.6rem + 2vw,2.375rem)}

/* ---------- Formular als Konfigurator -------------------------------------- */
.fortschritt__zeile{font-size:.8125rem;margin-bottom:.6rem}
.fortschritt__zeile .f-prozent{color:var(--accent);font-weight:600}
.fortschritt__seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fortschritt__seg i{height:4px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;position:relative}
.fortschritt__seg i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fortschritt__seg i.ist-an::after{transform:scaleX(1)}

.picks--bild{gap:.6rem}
.pick--bild{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0;overflow:hidden;
  border-radius:14px;background:#fff;text-align:left}
.pick__bild{display:block;aspect-ratio:4/3;background:#f4f2f0;overflow:hidden}
.pick__bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pick--bild:hover .pick__bild img{transform:scale(1.05)}
.pick__name{display:block;padding:.55rem .7rem .6rem;font-size:.875rem;font-weight:600;line-height:1.25;color:var(--ink);hyphens:manual}
.pick__haken{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.pick__haken svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pick--bild.ist-gewaehlt .pick__haken{opacity:1;transform:scale(1)}
.pick--bild.ist-gewaehlt{background:var(--accent-soft)}
.hero .pick--bild{font-size:inherit;padding:0}
.hero .pick__name{font-size:.8125rem;padding:.45rem .55rem .5rem}
.qk__auswahl{margin:-.2rem 0 .9rem;padding:.6rem .8rem;border-radius:10px;background:var(--accent-soft);color:var(--ink-2);font-size:.8438rem;font-weight:500;line-height:1.45}
.schritt:focus,.danke:focus{outline:none}
.schritt:focus-visible,.danke:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
[aria-invalid="true"]{border-color:#c62828}

/* ---------- Vertrauen: Bewertung, Zahlen, Kunden --------------------------- */
.beweis{padding-top:0}
.beweis__kopf{max-width:980px;margin:0 auto 4rem;text-align:center}
.beweis__satz{color:var(--ink);text-wrap:balance}
.js .beweis__satz.ist-geteilt .wort{color:#8e8e93;transition:color .35s var(--ease)}
.js .beweis__satz.ist-geteilt .wort.ist-an{color:var(--ink)}
.js .beweis__satz.ist-geteilt .hl .wort.ist-an{color:var(--accent)}
.beweis__raster{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:16px}
.note{display:flex;flex-direction:column;gap:.35rem;padding:1.6rem 1.6rem 1.4rem;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;
  transition:background-color .25s var(--ease),transform .25s var(--ease)}
.note:hover{background:var(--surface-2);transform:translateY(-2px)}
.note__kopf{display:flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.note__wert{display:flex;align-items:baseline;gap:.4rem;margin-top:.6rem;font-size:4rem;font-weight:600;letter-spacing:-.05em;line-height:1}
.note__wert small{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.sterne svg{fill:#f5b400}
.note__text{margin-top:.5rem;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.note__text b{color:var(--ink)}
.beweis__quelle{margin-top:14px;font-size:.75rem;line-height:1.45;color:var(--muted)}
.zahl{display:flex;flex-direction:column;padding:1.6rem 1.4rem 1.4rem;border-radius:var(--r-lg);background:var(--surface)}
.zahl__wert{font-size:2.75rem;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--accent)}
.zahl__wert--wort{font-size:2rem;letter-spacing:-.035em;line-height:1.1}
.zahl__name{margin-top:.7rem;font-size:1rem;font-weight:600;line-height:1.3;color:var(--ink)}
.zahl p{margin-top:.5rem;font-size:.875rem;line-height:1.55;color:var(--muted)}
.beweis .kunden{margin:0 0 5.5rem;padding:2.6rem 0 2.8rem;border-top:0;border-bottom:1px solid var(--line)}
.beweis .kunden__t{font-size:.875rem;font-weight:500;letter-spacing:0}
.karte{position:relative;display:flex;flex-direction:column;justify-content:center;margin:0;padding:clamp(12px,2vw,28px);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#f7f9fd,#eef3fb);overflow:hidden}
.karte img{width:100%;height:auto}

/* ---------- WhatsApp: echtes Handy-Format (19,5 : 9), feste Größe ----------
   Das Gehäuse hat eine feste Höhe aus der Breite. Der Verlauf läuft im Fenster
   nach oben weg (app.js, transform), das Gehäuse wächst nie mit dem Inhalt. */
.chat-sek{background:var(--surface);color:var(--ink)}
.chat-sek .h2{color:var(--ink)}
.chat-sek .h2 .hl,.chat-sek .kicker{color:var(--accent)}
.chat-sek .lead{color:var(--ink-2)}
.chat-hinweis{color:var(--ink-2)}
.chat-punkte li{color:var(--muted)}
.chat-punkte b{color:var(--ink)}
.chat-sek .ck{background:var(--accent-soft);color:var(--accent)}
.handy{position:relative;width:var(--handy-b);height:calc(var(--handy-b) * 2.05);min-height:0;padding:11px;border-radius:54px;background:#1d1d1f;
  box-shadow:0 0 0 1.5px #3a3a3c,0 2px 4px rgba(0,0,0,.06),0 40px 80px rgba(29,29,31,.06)}
.handy::before,.handy::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2c2c2e}
.handy::before{left:-3px;top:22%;height:9%}
.handy::after{right:-3px;top:26%;height:14%}
.handy__in{position:relative;height:100%;min-height:0;overflow:hidden;border-radius:44px;background:#ECE5DD}
.handy__status{flex:none;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 1.5rem 0 1.7rem;background:#f7f7f7;font-size:.75rem;font-weight:600;color:#111}
.handy__insel{position:absolute;left:50%;top:10px;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000}
.handy__ikons{display:flex;gap:4px;align-items:center}
.handy__ikons i{display:block;width:14px;height:8px;border-radius:2px;background:#111}
.handy__ikons i:nth-child(1){width:12px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.handy__ikons i:nth-child(2){width:12px;border-radius:6px 6px 2px 2px;opacity:.9}
.handy__ikons i:nth-child(3){width:20px;height:9px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #111;background:linear-gradient(90deg,#111 70%,transparent 70%)}
.handy .wa-kopf{flex:none;padding:.55rem .9rem .65rem}
.handy .wa-fenster{flex:1 1 0;height:auto;min-height:0}
.handy .wa-fuss{flex:none;padding:.5rem .65rem 1.6rem}
.handy__balken{position:absolute;left:50%;bottom:7px;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:#111;opacity:.85}

/* ---------- Reinigungsplan: Zeilenköpfe als th ----------------------------- */
.planer__tabelle tbody th{font-size:.875rem;font-weight:500;color:var(--ink);background:none}
.planer__tabelle tbody th span{display:block;font-size:.75rem;font-weight:400;color:var(--muted)}
.planer__tabelle tr:last-child th{border-bottom:0}

/* ---------- Vergleich als Tabelle ------------------------------------------ */
.vtab{max-width:920px;margin:0 auto;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.vtab table{width:100%;border-collapse:collapse;table-layout:fixed}
.vtab__k{width:46%}
.vtab__wir,.vtab__die{width:27%}
.vtab th,.vtab td{padding:1.05rem 1.4rem;text-align:center;vertical-align:middle;line-height:1.35;border-bottom:1px solid var(--line)}
.vtab tbody tr:last-child th,.vtab tbody tr:last-child td{border-bottom:0}
.vtab th[scope=row],.vtab thead th:first-child{text-align:left}
.vtab thead th{padding-top:1.5rem;padding-bottom:1.3rem;font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.vtab thead .vtab__wir-kopf img{height:34px;width:auto;margin:0 auto}
.vtab thead .vtab__die-kopf{font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--ink-2);text-transform:none;letter-spacing:-.01em}
.vtab th[scope=row]{font-size:1rem;font-weight:500;color:var(--ink)}
.vtab td:nth-child(2),.vtab thead th:nth-child(2){background:var(--accent-soft)}
.vtab .kurz{display:none}
.v-ja{display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.v-ja svg{box-sizing:content-box;padding:5px;border-radius:50%;background:var(--accent);color:#fff;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.v-ja span:not(.vh){font-size:.9375rem;font-weight:600;color:var(--accent)}
.v-text{font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.35}
.v-text--grau{font-weight:500;color:#6e6e73}
/* CH-03 R5: Kreuz in der Stundensatz-Spalte, neutral grau, Wortlaut bleibt (Aussage abgeschwächt, kein hartes Nein) */
.v-nein{display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.v-nein svg{box-sizing:content-box;padding:5px;border-radius:50%;background:#e8e8ed;color:#6e6e73;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.v-nein span{font-size:.9375rem;font-weight:500;color:#6e6e73}
.vtab__notiz{max-width:920px;margin:1rem auto 0;text-align:center;font-size:.875rem;color:var(--muted)}

/* ---------- Ablauf: dunkel, vier Schritte ---------------------------------- */
.ablauf2{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff}
.ablauf2__bild,.ablauf2__bild img{position:absolute;inset:0;width:100%;height:100%}
.ablauf2__bild{z-index:-2}
.ablauf2__bild img{object-fit:cover;object-position:60% 50%}
.ablauf2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,58,138,.9) 0%,rgba(30,58,138,.8) 50%,rgba(30,58,138,.9) 100%)}
.ablauf2__ki{position:absolute;left:16px;bottom:12px;padding:.2rem .55rem;border-radius:6px;background:rgba(11,18,32,.62);color:rgba(255,255,255,.88);font-size:.6875rem;line-height:1.4}
.ablauf2 .h2{color:#fff}
.ablauf2 .h2 .hl,.ablauf2 .kicker{color:var(--accent-on-dark)}
.ablauf2 .lead{color:rgba(255,255,255,.72)}
.weg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.weg::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:1px;background:linear-gradient(90deg,rgba(141,184,255,0),rgba(141,184,255,.45) 15%,rgba(141,184,255,.45) 85%,rgba(141,184,255,0))}
.weg__s{position:relative;padding:1.6rem 1.5rem 1.7rem;border-radius:var(--r-lg);background:rgba(42,74,158,.85);border:1px solid rgba(255,255,255,.12)}
.weg__nr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy-2);border:1px solid rgba(141,184,255,.5);font-size:.875rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.weg__marke{display:inline-block;margin-top:1.4rem;padding:.22rem .6rem;border-radius:var(--r-pill);background:rgba(141,184,255,.14);color:#fff;font-size:.75rem;font-weight:600}
.weg__s h3{margin-top:.8rem;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.weg__s p{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.78)}
.ablauf2__fuss{display:flex;justify-content:center;margin-top:3rem}

/* ---------- Kosten --------------------------------------------------------- */
.preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.preis-k{display:flex;flex-direction:column;padding:1.8rem 1.7rem 1.7rem;border-radius:var(--r-lg);background:var(--surface)}
.preis-k__name{font-size:.875rem;font-weight:600;color:var(--muted)}
.preis-k__wert{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .5rem;margin-top:1.1rem;font-size:clamp(2.4rem,1.6rem + 2vw,3.25rem);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.preis-k__wert small{font-size:.9375rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.preis-k p{margin-top:1rem;font-size:.875rem;line-height:1.55;color:var(--muted)}
.preis-k--dunkel{background:var(--navy);color:#fff}
.preis-k--dunkel .preis-k__name{color:rgba(255,255,255,.66)}
.preis-k--dunkel .preis-k__wert{color:#fff}
.preis-k--dunkel .preis-k__wert small,.preis-k--dunkel p{color:rgba(255,255,255,.7)}
.kosten2__h3{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.kosten2 .preis__hinweis{margin-top:1.1rem;padding:0;background:none;color:var(--muted)}
.kosten2 .preis__hinweis b{color:var(--ink)}
.kosten2 .kopfblock{max-width:980px}
/* Aufwand-Kompass: vier Regler, ein Tacho. Ordnet grob ein, nennt keinen Preis */
.kompass{margin-top:64px;padding:48px;border-radius:var(--r-lg);background:radial-gradient(120% 90% at 85% 0%,#2647a0 0%,var(--navy) 60%);color:#fff;box-shadow:0 30px 60px -30px rgba(11,18,32,.45)}
.kompass__kopf{max-width:760px}
.kompass .kosten2__h3{color:#fff;font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem)}
.kompass .preis__hinweis{color:rgba(255,255,255,.72)}
.kompass__raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:36px}
.kompass__regler{display:grid;gap:12px}
.regler{margin:0;padding:1.1rem 1.2rem 1.2rem;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);background:rgba(255,255,255,.04);min-width:0}
.regler__kopf{display:flex;gap:.9rem;align-items:flex-start;padding:0;float:left;width:100%}
.regler__kopf b{display:block;font-size:1rem;font-weight:600;color:#fff}
.regler__kopf small{display:block;margin-top:.2rem;font-size:.8438rem;line-height:1.5;color:rgba(255,255,255,.85)}
.regler__ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(141,184,255,.14);color:#fff}
.regler__wahl{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:.9rem;padding:4px;border-radius:14px;background:rgba(0,0,0,.28)}
.regler__o{position:relative;display:block;cursor:pointer}
.regler__o input{position:absolute;opacity:0;width:1px;height:1px}
.regler__o span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.35rem .5rem;border-radius:10px;font-size:.875rem;font-weight:500;line-height:1.25;text-align:center;color:rgba(255,255,255,.78);transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.regler__o:hover span{color:#fff;background:rgba(255,255,255,.06)}
.regler__o input:checked+span{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.regler__o input:focus-visible+span{outline:2px solid var(--accent-on-dark);outline-offset:2px}
.kompass__anzeige{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 28px 28px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.kompass__label{font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-on-dark)}
.tacho{position:relative;width:100%;max-width:300px;margin-top:1rem;perspective:600px}
.tacho svg{display:block;width:100%;height:auto;overflow:visible;transform:rotateX(18deg);transform-origin:50% 100%}
.tacho__bahn,.tacho__bogen{fill:none;stroke-width:16;stroke-linecap:round}
.tacho__bahn{stroke:rgba(255,255,255,.1)}
.tacho__bogen{stroke:url(#tacho-verlauf);stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--k,25));filter:drop-shadow(0 0 8px rgba(37,99,235,.55));transition:stroke-dashoffset .9s cubic-bezier(.34,1.4,.5,1)}
.tacho__striche path{stroke:rgba(255,255,255,.35);stroke-width:2;stroke-linecap:round}
.tacho__nadel{transform-origin:130px 136px;transform:rotate(calc(var(--k,25) * 1.8deg - 90deg));transition:transform .9s cubic-bezier(.34,1.4,.5,1)}
.tacho__nadel path,.tacho__nadel circle{fill:#fff}
.tacho__nadel .tacho__kern{fill:var(--accent)}
.tacho__min,.tacho__max{position:absolute;bottom:-6px;font-size:.75rem;color:rgba(255,255,255,.8)}
.tacho__min{left:0}.tacho__max{right:0}
.kompass__wert{margin-top:1.4rem}
.kompass__wert b{display:block;font-size:1.75rem;font-weight:600;letter-spacing:-.03em;color:#fff}
.kompass__wert span{display:block;margin:.35rem auto 0;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.72);max-width:34ch}
.kompass__anzeige .btn{margin-top:1.4rem}
.kompass__fuss{margin-top:1rem;font-size:.75rem;line-height:1.5;color:rgba(255,255,255,.8);max-width:36ch}

/* ---------- FAQ (auf Weiß) ------------------------------------------------- */
.faq__f{font-size:1.0625rem}

/* ---------- Weitere Städte: 4 × 5, gleich breite Spalten, zentriert -------- */
.orte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;max-width:920px;margin:0 auto}
.orte__sp li a,.orte__sp li span{position:relative;display:flex;align-items:center;min-height:44px;line-height:1.3;padding-left:1.35rem;font-size:1.0313rem;font-weight:500;color:var(--ink);text-decoration:none;transition:color .2s var(--ease)}
.orte__sp li a::before,.orte__sp li span::before{content:"–";position:absolute;left:0;color:var(--accent);font-weight:600}
.orte__sp li a:hover{color:var(--accent)}
.orte__mehr{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.2rem .9rem;margin-top:2.6rem;font-size:.9063rem;color:var(--muted)}
.orte__mehr a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:500;text-decoration:none}
.orte__mehr a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Abschluss ------------------------------------------------------ */
.final2{padding:136px 0}
.final2__raster{display:block}
.final2 .final__text{max-width:760px}
.final2 p{color:rgba(255,255,255,.8)}

/* ========================================================================= */
@media (max-width:1100px){
  .beweis__raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .note{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"kopf kopf" "wert text" "sterne text";column-gap:2rem;align-items:start}
  .note__kopf{grid-area:kopf}.note__wert{grid-area:wert}.sterne{grid-area:sterne}.note__text{grid-area:text;align-self:center;margin:0}
}
@media (max-width:960px){
  .sek{padding:96px 0}
  .chat-text .h2,.plan .h2,.steckbrief .h2{font-size:clamp(1.5rem,.9rem + 2.9vw,2.875rem)}
  .weg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weg::before{display:none}
  .preise{grid-template-columns:minmax(0,1fr)}
  .preis-k{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:1.4rem}
  .preis-k__name{flex:1 1 100%}
  .kompass{padding:36px 28px}
  .kompass__raster{grid-template-columns:minmax(0,1fr);gap:24px}
  .orte{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
}
@media (max-width:760px){
  :root{--handy-b:min(82vw,300px)}
  .sek{padding:76px 0}
  .kopfblock{margin-bottom:2.4rem}
  .lead{font-size:1.0313rem}
  .beweis__kopf{margin-bottom:2.6rem}
  .beweis__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .note{display:flex;padding:1.3rem 1.3rem 1.2rem}
  .note__wert{font-size:3.25rem}
  .zahl{padding:1.2rem 1.1rem}
  .zahl__wert{font-size:2.1rem}
  .zahl__wert--wort{font-size:1.5rem}
  .zahl:last-child{grid-column:1/-1}
  .beweis .kunden{margin-bottom:3.5rem}
  /* Karte am Handy randlos, damit die Schrift im SVG groß genug bleibt */
  .karte{margin:0 -16px;padding:4px 0 10px;border-radius:0}
  .vtab{border-radius:var(--r-card)}
  .vtab__k{width:38%}
  .vtab__wir,.vtab__die{width:31%}
  .vtab th,.vtab td{padding:.85rem .4rem}
  .vtab th[scope=row],.vtab thead th:first-child{padding-left:.9rem}
  .vtab .lang{display:none}
  .vtab .kurz{display:inline}
  .vtab th[scope=row]{font-size:.875rem;hyphens:auto}
  .vtab thead th{font-size:.6875rem;letter-spacing:.03em}
  .vtab thead .vtab__wir-kopf img{height:22px}
  .vtab thead .vtab__die-kopf{font-size:.8125rem;hyphens:manual}
  .v-text{font-size:.8125rem}
  .v-ja{flex-direction:column;gap:.3rem}
  .v-ja span:not(.vh){font-size:.8125rem}
  .v-nein{flex-direction:column;gap:.3rem}
  .v-nein span{font-size:.8125rem}
  .weg{grid-template-columns:minmax(0,1fr);gap:10px}
  .weg__s{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:1rem;padding:1.2rem 1.2rem 1.3rem}
  .weg__nr{grid-row:span 3}
  .weg__marke{margin-top:0;justify-self:start}
  .weg__s h3{margin-top:.5rem;font-size:1.125rem}
  .preis-k{padding:1.4rem 1.3rem}
  .kompass{margin:44px -16px 0;padding:28px 16px 20px;border-radius:0}
  .kompass__anzeige{padding:24px 16px 20px}
  .regler{padding:.95rem .9rem 1rem}
  .regler__o span{font-size:.8125rem;padding:.3rem .3rem}
  .orte{gap:0 20px}
  .orte__sp li a,.orte__sp li span{font-size:.9688rem}
  /* Linkzeile untereinander, ohne Trennpunkte am Zeilenende */
  .orte__mehr{flex-direction:column;gap:0}
  .orte__trenner{display:none}
  .final2{padding:88px 0}
  .final2::before{background:linear-gradient(180deg,rgba(30,58,138,.88),rgba(30,58,138,.92))}
}
@media (max-width:340px){
  .beweis__raster{grid-template-columns:minmax(0,1fr)}
  .orte{grid-template-columns:minmax(0,1fr)}
  .vtab th,.vtab td{padding:.75rem .3rem}
  .vtab th[scope=row]{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  .fortschritt__seg i::after,.pick__bild img,.note{transition:none}
  .danke__ic svg{animation:none;stroke-dashoffset:0}
  .tacho__bogen,.tacho__nadel,.regler__o span{transition:none}
}
/* CH-02 R5: KI-Etikett im Hero links unten, rechts sitzt der feste Kontaktknopf darüber */
.hero__ki{right:auto;left:16px}

/* R7: Steckbrief als Antwort-Karte, links Antwort und Knöpfe, rechts die Fakten auf Navy */
.antwort{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.antwort__text{padding:56px 52px}
.antwort .knoepfe{margin-top:1.8rem}
.antwort__beleg{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin-top:1.4rem;font-size:.9063rem;color:var(--muted);text-decoration:none}
.antwort__beleg b{color:#9a6b00;font-weight:600}
.antwort__beleg span{font-size:.75rem}
.antwort__beleg:hover{color:var(--ink)}
.antwort .fakten{align-content:center;gap:0;margin:0;padding:40px 44px;background:var(--navy);grid-template-columns:minmax(0,1fr)}
.antwort .fakt{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;padding:1rem 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.1)}
.antwort .fakt:last-child{border-bottom:0}
.antwort .fakt dt{color:rgba(255,255,255,.66)}
.antwort .fakt dt svg{color:var(--accent-on-dark)}
.antwort .fakt dd{margin:0;color:#fff}
.antwort .fakt dd small{color:rgba(255,255,255,.6)}
.antwort .fakt a{color:#fff}
@media (max-width:1100px){
  .antwort__text{padding:44px 36px}
  .antwort .fakten{padding:32px}
  .antwort .fakt{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
@media (max-width:960px){
  .antwort{grid-template-columns:minmax(0,1fr)}
  .antwort .fakt{grid-template-columns:150px minmax(0,1fr);gap:1rem}
}
@media (max-width:760px){
  .antwort{margin:0 -16px;border-radius:0}
  .antwort__text{padding:36px 16px 32px}
  .antwort .knoepfe .btn{flex:1 1 100%;justify-content:center}
  .antwort .fakten{padding:12px 16px 16px}
  .antwort .fakt{grid-template-columns:minmax(0,1fr);gap:.2rem}
}

/* ===== R7b · Leistungen als Slider mit 3D-Karten (Florian 22.10.2026, Variante 1) ===== */
.lsl{--dio:#f4f2ef;--rand:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
.lsl__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:2.25rem}
.lsl__kopf .kopfblock{margin:0}
.lsl__steuer{display:flex;align-items:center;gap:10px;flex:none}
.lsl__zahl{font-size:.9375rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.lsl__rund{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(29,29,31,.06);transition:background .2s var(--ease),color .2s var(--ease)}
.lsl__rund:hover:not(:disabled){background:var(--accent);color:#fff}
.lsl__rund:disabled{opacity:.35;cursor:default}
.lsl__rund--zurueck svg{transform:scaleX(-1)}
.lsl__spur{display:flex;gap:20px;margin:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--rand);padding:4px var(--rand) 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.lsl__spur::-webkit-scrollbar{display:none}
.lsl__karte{flex:0 0 clamp(280px,30vw,360px);scroll-snap-align:start;background:var(--dio);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.lsl__bild{aspect-ratio:4/3;overflow:hidden}
.lsl__bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.lsl__karte:hover .lsl__bild img{transform:scale(1.04)}
.lsl__text{padding:4px 26px 28px;display:flex;flex-direction:column;gap:.55rem;flex:1}
.lsl__marke{align-self:flex-start;font-size:.8125rem;font-weight:600;color:var(--accent-hover);background:#fff;border-radius:var(--r-pill);padding:4px 11px}
.lsl__text h3{font-size:1.3125rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.lsl__text p{margin:0;color:var(--ink-2);font-size:.9688rem;line-height:1.58}
.lsl__kurz{display:none}
.lsl__balken{height:3px;background:var(--line);border-radius:3px;margin:8px 0 0;overflow:hidden}
.lsl__balken i{display:block;height:100%;width:16.6%;background:var(--accent);border-radius:3px;transition:transform .25s linear}
.lsl__ki{margin-top:12px;font-size:.75rem;color:var(--muted)}
@media (max-width:760px){
  .lsl__kopf{flex-direction:column;align-items:flex-start}
  .lsl__steuer{display:none}
  .lsl__karte{flex-basis:84%}
  .lsl__spur{gap:12px}
  .lsl__text{padding:2px 20px 22px}
  .lsl__lang{display:none}
  .lsl__kurz{display:block}
}

/* ===== R7b · Einsatzgebiet als drei Objektwelten (Florian 22.10.2026, Variante 3) ===== */
.welten__kopf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:3.25rem}
.welten__kopf .h2{margin:0}
.welten__zahlen{display:flex;gap:40px;justify-content:flex-end;margin:0;padding:0;list-style:none}
.welten__zahlen b{display:block;font-size:2.75rem;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.welten__zahlen span{display:block;margin-top:.5rem;font-size:.875rem;color:var(--muted)}
.welten__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.welt{display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.welt:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(29,29,31,.05),0 24px 48px rgba(29,29,31,.09)}
.welt__bild{background:#ebebed;aspect-ratio:4/3;overflow:hidden}
.welt__bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.welt:hover .welt__bild img{transform:scale(1.035)}
.welt__text{padding:26px 26px 30px;display:flex;flex-direction:column;gap:.8rem;flex:1}
.welt__text h3{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.welt__text h3 small{font-size:.8125rem;font-weight:500;color:var(--muted);white-space:nowrap}
.welt__text p{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.welt__teile{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.welt__teile li{padding:.3rem .65rem;border-radius:var(--r-pill);background:var(--accent-soft);color:#1e40af;font-size:.8125rem;font-weight:500;line-height:1.3}
.welten__ki{margin-top:14px;font-size:.75rem;color:var(--muted)}
.welten__fuss{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.welten__fuss .lokal__notiz{margin:0;padding:0;background:none;max-width:62ch;font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.welten__fuss .lokal__notiz b{font-weight:600;color:var(--ink)}
.welten__fuss .btn{flex:none}
@media (max-width:1020px){
  .welten__kopf{grid-template-columns:1fr;gap:28px}
  .welten__zahlen{justify-content:flex-start}
  .welten__karten{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:760px){
  .welten__kopf{margin-bottom:2.25rem}
  .welten__zahlen{gap:28px}
  .welten__zahlen b{font-size:2.25rem}
  .welten__fuss .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .lsl__bild img,.lsl__balken i,.welt,.welt__bild img{transition:none}
}

/* R7c · Google-Box am Handy: alles linksbündig untereinander */
@media (max-width:760px){
  .note{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "wert" "sterne" "text"}
  .note__text{align-self:start;margin-top:.6rem}
}