/* ============================ GRUNDSYSTEM (07.10.) ============================
   Wird als letzte Datei geladen und zieht alle Seiten auf dieselben Grundelemente.
   Praefix :root:not(#k) hebt die Spezifitaet ueber alle Seitenregeln, ohne !important.

   1  KNOEPFE   Zwei Formen, wie auf der Startseite:
                a) eckig: roter Balken (.knopf-primaer) und als Zweitform der Rahmen
                   (.knopf-sekundaer), beide Radius 0, gleiche Schrift.
                b) kreisrund: roter Kreis (.cta-kreis und alle Abspiel-/Pfeil-Kreise).
                Keine Pillen, keine schwarzen Flaechen. Aktiv und Hover sind immer Rot.
   2  UEBERSCHRIFTEN   Zwei Groessen:
                --h-gross  Seitenkopf und vollflaechige Aussagen
                --h-klein  jede Sektionsueberschrift
                dazu --h-karte fuer Titel in Karten, Zeilen und Listen (kein Sektionstitel).
                Ein Schnitt (600), eine Laufweite, eine Zeilenhoehe.
   3  REGISTER  Die kleine Zeile ueber Ueberschriften sieht ueberall aus wie auf der Startseite.
   4  BILDER    a) vollflaechig (Hero, Buehne, Panorama): eckig, ohne Schatten
                b) Einzelbild oder Einzelvideo im Inhalt: Radius 14 px und weicher Schatten
                c) ab zwei Bildern (Raster, Reihe, Band, Collage): eckig, ohne Schatten
                d) Personen in Zitaten: kreisrund, wie die runden Knoepfe
   5  FLAECHEN  Karten, Kacheln und Felder bleiben eckig. */

:root{
  --h-gross:clamp(44px,5.2vw,86px);
  --h-klein:clamp(30px,3.75vw,60px);
  --h-karte:clamp(20px,1.6vw,27px);
  --h-schnitt:600;
  --h-laufweite:-.025em;
  --schatten-medien:0 28px 64px -36px rgba(53,9,10,.5);
}

/* ---------- 1 · Knoepfe ---------- */
.knopf-sekundaer,
:root:not(#k) .kst-filter-knopf,
:root:not(#k) .an-mehr,
:root:not(#k) .an-ortfilter button,
:root:not(#k) .an-sort select{
  font-family:var(--schrift-hl);font-weight:500;letter-spacing:.06em;font-size:var(--t-15);line-height:1.2;text-transform:none;
  min-height:var(--ziel-min);padding:0 var(--r-24);border-radius:0;
  background:transparent;color:var(--tinte);border:1px solid var(--linie-stark);
  display:inline-flex;align-items:center;gap:var(--r-12);cursor:pointer;
  transition:background var(--dauer-ui) var(--kurve),color var(--dauer-ui) var(--kurve),border-color var(--dauer-ui) var(--kurve)}
:root:not(#k) .an-mehr{min-height:var(--knopf-hoehe);padding:0 var(--r-32);font-size:var(--t-18);border-color:var(--tinte)}
:root:not(#k) .an-sort select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2311100E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
:root:not(#k) .an-ortfilter button{min-height:32px;padding:0 var(--r-12);font-size:12px}
.knopf-sekundaer:hover,
:root:not(#k) .kst-filter-knopf:hover,
:root:not(#k) .an-mehr:hover,
:root:not(#k) .an-ortfilter button:hover,
:root:not(#k) .an-sort select:hover{border-color:var(--rot);color:var(--rot);background:transparent}
:root:not(#k) .kst-filter-knopf[aria-pressed="true"]{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
:root:not(#k) .kst-filter-knopf span{color:inherit;opacity:.7}
.knopf-sekundaer:focus-visible,:root:not(#k) .kst-filter-knopf:focus-visible,:root:not(#k) .an-mehr:focus-visible,
:root:not(#k) .an-sort select:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
/* Rahmenknopf auf dunklem Grund */
:root:not(#k) .an-ende .knopf-sekundaer{color:var(--weiss);border-color:rgba(255,255,255,.5)}

/* Kreisrunde Elemente: immer Rot, nie Schwarz */
:root:not(#k) .an-karte .an-pfeil{border-radius:50%;border-color:var(--linie-stark)}
:root:not(#k) .an-link:hover .an-pfeil{background:var(--rot);border-color:var(--rot)}
:root:not(#k) .kst-lb-zu:hover{background:var(--rot);border-color:var(--rot)}
/* Kleine Merkmal-Etiketten sind keine Knoepfe: eckig, ohne Rahmenpille */
:root:not(#k) .kst-art{border-radius:0}

/* ---------- 2 · Ueberschriften ---------- */
/* gross: Seitenkopf und vollflaechige Aussagen */
:root:not(#k) .b2-claim,
:root:not(#k) .vh-titel,
:root:not(#k) .uh-gross,
:root:not(#k) .kst-gross,
:root:not(#k) .uh-team-titel,
:root:not(#k) .wisch-titel,
:root:not(#k) .vk-zug-titel,
:root:not(#k) .uh-karriere-titel,
:root:not(#k) .uh-dunkel-titel,
:root:not(#k) .tm-panorama-titel{
  font-size:var(--h-gross);font-weight:var(--h-schnitt);letter-spacing:var(--h-laufweite);line-height:1;word-spacing:normal;text-transform:none}
/* klein: jede Sektionsueberschrift, auch die Vorzeile im Seitenkopf */
:root:not(#k) main h2,
:root:not(#k) .film-titel,
:root:not(#k) .angebote-titel,
:root:not(#k) .ks-titel,
:root:not(#k) .team-titel,
:root:not(#k) .sit-titel-gross,
:root:not(#k) .hor-titel-gross,
:root:not(#k) .cta-titel,
:root:not(#k) .wd-titel,
:root:not(#k) .nw-titel,
:root:not(#k) .buero-titel,
:root:not(#k) .stoerer-titel,
:root:not(#k) .zahlen-titel,
:root:not(#k) .v2-titel,
:root:not(#k) .vpruef-titel,
:root:not(#k) .vks-titel,
:root:not(#k) .vab-titel,
:root:not(#k) .uh-rollen-titel,
:root:not(#k) .uh-presse-titel,
:root:not(#k) .uh-kicker,
:root:not(#k) .kst-kicker,
:root:not(#k) .kst-h2,
:root:not(#k) .an-ende-titel,
:root:not(#k) .an-kb-titel,
:root:not(#k) .an-wand,
:root:not(#k) .uh-satz-text{
  font-size:var(--h-klein);font-weight:var(--h-schnitt);letter-spacing:var(--h-laufweite);line-height:1.06;word-spacing:normal;text-transform:none;min-height:0;max-width:none}
:root:not(#k) .uh-kicker,:root:not(#k) .kst-kicker{margin-bottom:.12em}
/* die grossen Woerter haben Unterlaengen, die Maske braucht dafuer Luft */
:root:not(#k) .uh-zeile,:root:not(#k) .kst-zeile{padding-bottom:.1em;margin-bottom:-.1em}
/* Karten-, Zeilen- und Listentitel */
:root:not(#k) main h3,
:root:not(#k) .sit-titel,
:root:not(#k) .hor-titel,
:root:not(#k) .vks-name,
:root:not(#k) .kn-info-titel,
:root:not(#k) .bp-titel,
:root:not(#k) .an-karte .an-titel,
:root:not(#k) .an-vorschau-titel{
  font-size:var(--h-karte);font-weight:var(--h-schnitt);letter-spacing:-.015em;line-height:1.2;text-transform:none}
/* Seitenkopf der Angebote: die Orte sind die Ueberschrift, die Zahl darueber steht als Register */
:root:not(#k) #an-titel{font-family:var(--schrift-label);font-size:var(--t-18);font-weight:500;letter-spacing:.06em;line-height:1.3;
  color:var(--tinte);margin:0 0 var(--r-24)}
:root:not(#k) #an-titel .rot{color:var(--rot)}
:root:not(#k) .an-wand{letter-spacing:-.03em}

/* ---------- 3 · Register ---------- */
:root:not(#k) .kst-register,
:root:not(#k) .uh-register{
  font-family:var(--schrift-label);font-size:var(--t-18);font-weight:500;letter-spacing:.06em;line-height:1.2;text-transform:none;
  color:var(--rot);gap:0}
:root:not(#k) .kst-register .punkt,
:root:not(#k) .uh-register .punkt{width:5px;height:5px;background:currentColor;margin:0 12px 2px 0}
:root:not(#k) .kst-register--dunkel,
:root:not(#k) .an-ende-feld--rot .kst-register,
:root:not(#k) .uh-karriere .uh-register{color:rgba(255,255,255,.8)}

/* ---------- 4 · Bilder ---------- */
/* b) Einzelbild oder Einzelvideo im Inhalt: rund und mit Schatten */
:root:not(#k) .film-box,
:root:not(#k) .ks-d-vorschau,
:root:not(#k) .cta-bild,
:root:not(#k) .an-vorschau-bild,
:root:not(#k) .kst-lb-film{border-radius:var(--rund-medien);overflow:hidden;box-shadow:var(--schatten-medien)}
/* c) ab zwei Bildern: eckig, ohne Schatten */
:root:not(#k) .card,
:root:not(#k) .card img,
:root:not(#k) .card__veil,
:root:not(#k) .nw-feld,
:root:not(#k) .team-block__wrapper,
:root:not(#k) .team-block__wrapper img,
:root:not(#k) .sit-bild,
:root:not(#k) .sit-bild img,
:root:not(#k) .buero-bild,
:root:not(#k) .buero-bild img,
:root:not(#k) .vks-bild,
:root:not(#k) .uh-col-bild,
:root:not(#k) .uh-col-mitte,
:root:not(#k) .uh-team-bild,
:root:not(#k) .kst-notar-reihe li,
:root:not(#k) .kst-b-daumen,
:root:not(#k) .an-bild{border-radius:0;box-shadow:none}
/* a) vollflaechig: eckig */
:root:not(#k) .tm-panorama,
:root:not(#k) .tm-panorama img{border-radius:0}

/* ---------- 5 · Flaechen ---------- */
:root:not(#k) .an-ende-feld{border-radius:0}

/* Ueber-uns-Kopf (07.10.): die Vorzeile in Versalien bleibt schmaler als das grosse Wort darunter,
   deshalb hier in der Kartengroesse statt in der kleinen Ueberschrift */
:root:not(#k) .uh-c .uh-kicker{font-size:var(--h-karte);letter-spacing:.02em;line-height:1.1;margin-bottom:.5em}
:root:not(#k) .uh-c .uh-kicker{font-size:calc(var(--h-gross) * .3)}
/* Ueber uns (07.10.): Zitat schmaler, damit die dunkle Zeile nicht mit einem einzelnen Wort endet */
:root:not(#k) .uh-satz-text{max-width:16em}
/* Ueber uns (07.10.): etwas mehr Luft zwischen Teamkopf und Bildraster */
:root:not(#k) .uh-team-raster{margin-top:clamp(84px,9vw,150px)}
/* Kundenstimmen-Kopf (07.10.): Vorzeile deutlich kleiner als die grosse Aussage, wie beim Ueber-uns-Kopf */
:root:not(#k) .kst-hero .kst-kicker{font-size:var(--h-karte);letter-spacing:-.01em;line-height:1.1;margin-bottom:.6em}
/* Startseite, Bekannt aus (07.10.): Logolauf unter dem Knopf statt Band am unteren Heroende.
   Fenster so breit wie Knopf und Telefon zusammen, Raender laufen weich aus, Zeiger haelt an. */
.b2-bekannt{display:flex;align-items:center;gap:var(--r-24);margin-top:clamp(24px,3.2vh,40px);max-width:620px;position:relative;z-index:1}
.b2-bekannt-hd{flex:none;font-family:var(--schrift-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.b2-bekannt-fenster{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.b2-bekannt-lauf{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:b2-bekannt 28s linear infinite}
.b2-bekannt:hover .b2-bekannt-lauf{animation-play-state:paused}
@keyframes b2-bekannt{to{transform:translateX(-50%)}}
.b2-logo{display:flex;flex-direction:column;justify-content:center;gap:4px;height:52px;padding:0 clamp(28px,3vw,44px);border-left:1px solid rgba(255,255,255,.18);white-space:nowrap}
.b2-logo-marke{font-family:var(--schrift-hl);font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1;color:var(--weiss)}
.b2-logo-bild{display:block;height:24px;width:auto;filter:brightness(0) invert(1)}
.b2-logo-zusatz{font-family:var(--schrift-label);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
@media (max-width:699px){
  .b2-bekannt{flex-direction:column;align-items:flex-start;gap:10px;max-width:none}
  .b2-bekannt-fenster{width:100%}
  .b2-logo{height:44px}.b2-logo-marke{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.b2-bekannt-lauf{animation:none}}
:root:not(#k) .b2-bekannt-hd{text-transform:uppercase}
/* Bekannt aus (07.10., Nachtrag): Titel ueber dem Lauf, Lauf genau so breit wie der rote Knopf */
:root:not(#k) .b2-bekannt{flex-direction:column;align-items:flex-start;gap:10px;width:var(--b2-knopf-b,100%);max-width:100%}
:root:not(#k) .b2-bekannt-fenster{width:100%;flex:none}
:root:not(#k) .b2-logo{padding:0 clamp(22px,2.2vw,32px)}
/* Bekannt aus, echte Logos (07.10.): optisch gleich schwer, deshalb je Marke eigene Hoehe */
:root:not(#k) .b2-logo-bild{filter:none;width:auto;opacity:.92}
.b2-logo-bild--galileo{height:34px}
.b2-logo-bild--focus{height:26px}
.b2-logo-bild--immoscout24{height:28px}
.b2-logo-bild--google{height:21px}
.b2-logo{gap:6px}
.b2-logo{align-items:center}.b2-logo-bild{flex:none;align-self:center;object-fit:contain}
/* Logolauf (09.10.): Luft oben und unten im Fenster, damit kein Logo an der Kante beschnitten wird.
   Die Logodateien haben einen Rand von 4 px, deshalb die Hoehen um diesen Anteil groesser. */
:root:not(#k) .b2-bekannt-fenster{padding:6px 0}
:root:not(#k) .b2-logo{height:auto;min-height:52px}
.b2-logo-bild--galileo{height:38px}
.b2-logo-bild--focus{height:28px}
.b2-logo-bild--immoscout24{height:31px}
.b2-logo-bild--google{height:23px}
:root:not(#k) .an-person-titel{font-size:var(--h-klein);font-weight:var(--h-schnitt);letter-spacing:var(--h-laufweite);line-height:1.06}
:root:not(#k) .an-person-hd{text-transform:uppercase}

/* ============================ LESBARKEIT UND BEDIENBARKEIT (14.10., Designkritik) ============================
   Gemessen an der Leitdatei, Abschnitt 4 und 7: Fliesstext und Sekundaertext mindestens 15 bis 16 px,
   Bedienelemente mindestens 48 x 48, Text nie unter 4,5:1. Jede Zeile nennt den Befund. */

/* Ablauf in Schritten (Startseite, Verkaufen): inaktive Schritte standen auf 50 % Deckkraft, Text dann um 2,2:1.
   Jetzt alle voll lesbar; der aktive Schritt hebt sich weiter ueber Rot Schleier, rote Nummer und den kleinen Versatz ab. */
:root:not(#k) .hor-feld{opacity:1}

/* Weiche (Startseite, Angebote): Weiss auf Logo-Grau lag bei 3,49:1, Logo-Grau ist laut Leitdatei nie Textgrund.
   Text 2 aus derselben Neutral-Leiter (H 42) traegt Weiss mit 6,8:1. */
:root:not(#k) .wd-rot{background:var(--text-2)}
:root:not(#k) .wd-feld .wd-nr{color:var(--weiss)}

/* Menue: Leitdatei 18 px (vorher 13,5 px) */
:root:not(#k) .navi a{font-size:var(--t-18)}
/* unterhalb von 1440 px reicht der Platz fuer 18 px nicht, dort 16 px (gemessen bei 1240 px, kleinste Breite mit Menueleiste) */
@media(max-width:1439px){:root:not(#k) .navi a{font-size:16px}}

/* Formulare: Beschriftungen gleich auf allen Seiten, 15 px statt 13 px */
:root:not(#k) .cta-form label,
:root:not(#k) .vab-form label{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}

/* Angaben in Karten und Listen, die man lesen muss: mindestens 15 px (vorher 12 bis 13 px) */
:root:not(#k) .card__city,
:root:not(#k) .card__fact,
:root:not(#k) .card__big small,
:root:not(#k) .ks-rolle,
:root:not(#k) .an-ort,
:root:not(#k) .an-vorschau-ort,
:root:not(#k) .an-person-name,
:root:not(#k) .kst-b-rolle,
:root:not(#k) .v2-c-label{font-size:var(--t-15)}
:root:not(#k) .bp-text{font-size:17px;line-height:1.45}
:root:not(#k) .kst-art,
:root:not(#k) .v2-c-diff-label,
:root:not(#k) .kn-info-zeile,
:root:not(#k) .kn-fahne,
:root:not(#k) .an-km-fahne{font-size:14px}
/* kleinste Beschriftungen (Logo-Unterzeilen, Namen unter den Vorschaubildern): 12 px wie die Versal-Vorzeilen */
:root:not(#k) .b2-logo-zusatz,
:root:not(#k) .kst-b-daumen span{font-size:12px}

/* Fliesstext mit Zeilenhoehe 1,2 (Prueffrage der Leitdatei fuer Leser ueber 60): 1,5 */
:root:not(#k) .wd-text,
:root:not(#k) .angebote-lead,
:root:not(#k) .zahlen-text p,
:root:not(#k) .team-vorlauf,
:root:not(#k) .team-block__content .text,
:root:not(#k) .stoerer-karriere-text{line-height:1.5}

/* Bedienflaechen: Telefonnummern im Fuss in Knopfhoehe, Slider-Punkte 48 px, Kartenpunkte mit unsichtbarer Trefferflaeche */
:root:not(#k) .fuss-wert{min-height:var(--ziel-min)}
:root:not(#k) .b2-punkt{width:var(--ziel-min);height:var(--ziel-min)}
:root:not(#k) .kn-marker::after{content:"";position:absolute;inset:-11px}

/* Karriere auf Rot (Ueber uns): halbtransparentes Weiss lag bei 3,5 bis 4,3:1, volles Weiss traegt 5,58:1 */
:root:not(#k) .uh-karriere .uh-register,
:root:not(#k) .uh-karriere-frage,
:root:not(#k) .uh-karriere-unter span{color:var(--weiss)}

/* Ueber uns: Collage und Presseband ragten bei 1440 px rund 20 px ueber den rechten Rand */
:root:not(#k) [data-sektion="uu-collage"],
:root:not(#k) [data-sektion="uu-team"]{overflow-x:clip}

/* Platzhalterzahlen (Startseite, Zahlen statt Versprechen): sichtbar als Platzhalter gekennzeichnet (Leitdatei 14) */
:root:not(#k) .zahlen-zahl:has(> .zaehler[data-beispiel]) > p::after{content:"Platzhalter";display:block;width:fit-content;margin:8px auto 0;
  padding:2px 7px;border:1px dashed var(--linie-stark);font-family:var(--schrift-label);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);vertical-align:middle}

/* Nachmessung 14.10.: Nummern in Linie stark (3,25:1) und halbtransparentes Weiss auf Rot (3,5:1) */
:root:not(#k) .ks-d-nr{color:var(--text-2)}
:root:not(#k) .hor-feld--ziel .hor-nr,
:root:not(#k) .hor-feld[data-nr="8"] .hor-nr,
:root:not(#k) .stoerer .register-hell{color:var(--weiss)}
:root:not(#k) .ks-d-ergebnis[data-beispiel]{font-size:14px}

/* ============================ SEITENUEBERGANG (14.10.) ============================
   Rote Flaeche als CSS-Uebergang auf transform, damit der Browser sie auf dem Compositor rechnet und sie nicht
   ruckelt, waehrend die neue Seite aufgebaut wird. Zustaende als Klassen am <html> (uebergang.js, Kopfskript):
   ueb-abgang   Flaeche faehrt von oben herein und deckt (beschleunigend, 0,56 s)
   ueb-ankunft  Flaeche deckt ab dem ersten Bild der neuen Seite
   ueb-raus     Flaeche zieht nach unten heraus (startet schnell, laeuft weich aus, 0,8 s) */
:root:not(#k) .uebergang{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:999;display:block;
  background:var(--rot);pointer-events:none;transform:translate3d(0,-100%,0);will-change:transform;backface-visibility:hidden}
:root:not(#k).ueb-abgang .uebergang{transform:translate3d(0,0,0);transition:transform .56s cubic-bezier(.55,0,.85,.4)}
/* 20.10.: kein Ausblenden der ganzen Seite mehr beim Abgang, das kostete Bilder, waehrend die Flaeche hereinfaehrt */
:root:not(#k).ueb-ankunft .uebergang{transform:translate3d(0,0,0);transition:none}
:root:not(#k).ueb-ankunft.ueb-raus .uebergang{transform:translate3d(0,100%,0);transition:transform .8s cubic-bezier(.16,.84,.3,1)}
@media(prefers-reduced-motion:reduce){:root:not(#k) .uebergang{display:none}}


/* ============================ STARTSEITE, MARKUP-FEEDBACK (15.10.) ============================
   Notarwand ueber die ganze Breite (Sascha: wirkt plakativer). Kopf als Zeile ueber dem Band: links Register und grosse
   Aussage, rechts Satz und Link. Das Band laeuft von Fensterrand zu Fensterrand, die Fotos werden groesser. */
:root:not(#k) .notarwand .nw-zahl-grid{grid-template-columns:minmax(0,1fr);gap:clamp(36px,4.4vw,72px)}
:root:not(#k) .notarwand .nw-titel{font-size:var(--h-gross);line-height:1}
@media(min-width:900px){
  :root:not(#k) .notarwand .nw-zahl-block{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    column-gap:clamp(32px,5vw,96px);align-items:end}
  :root:not(#k) .notarwand .nw-zahl-block .register{grid-column:1;grid-row:1}
  :root:not(#k) .notarwand .nw-titel{grid-column:1;grid-row:2 / span 2}
  :root:not(#k) .notarwand .nw-lead{grid-column:2;grid-row:2;margin:0;max-width:26em}
  :root:not(#k) .notarwand .nw-link{grid-column:2;grid-row:3;justify-self:start;margin-top:var(--r-24)}
}
:root:not(#k) .notarwand .nw-band{width:100vw;margin-left:calc(50% - 50vw)}
:root:not(#k) .notarwand .nw-feld{flex-basis:clamp(220px,19vw,340px)}

/* Handy (15.10.): Der rote Knopf im Kopf war mit 18 px und Laufweite breiter als die Zeile (393 px bei 390 px Bildschirm)
   und hat die ganze Startseite breiter als den Bildschirm gemacht. Unter 520 px darf er schrumpfen und umbrechen. */
@media(max-width:519px){
  :root:not(#k) .b2-knopf{flex:1 1 100%;max-width:100%;justify-content:space-between;font-size:16px;letter-spacing:.05em;text-align:left}
}

/* Handy (15.10.): Im Ablauf rechnet script.js fuer den Desktop einen rechten Innenabstand aus (--menue-r, bei 390 px rund
   420 px). Unter 768 px, wo die Spur zur Liste wird, blieb er stehen: die Schrittkarten waren nur 48 px breit und die ganze
   Startseite wurde auf dem Handy breiter als der Bildschirm gerendert (verkleinerte Ansicht). Hier gilt der normale Rand. */
@media(max-width:767px){
  :root:not(#k) .hor-spur{padding-left:var(--rand);padding-right:var(--rand)}
}

/* Handy (16.10.): Der Kopf-Claim steht in einer schmalen Spalte neben den Personen. Mit dem neuen, laengeren Satz
   lief er bei 44 px ueber sechs Zeilen; 38 px halten ihn bei vier bis fuenf. */
@media(max-width:519px){:root:not(#k) .b2-claim{font-size:38px}}

/* ============================ KUNDENKOMMENTARE STARTSEITE (19.10., Markup v160) ============================ */
/* Kundenstimmen: Weg zu allen Stimmen direkt unter der Ueberschrift */
:root:not(#k) .ks-mehr{margin-top:var(--r-24)}
/* Bekannt aus: Zeitungslogos (SVG, weiss), optisch gleich schwer wie die uebrigen Marken */
.b2-logo-bild--waz{height:32px}
.b2-logo-bild--az{height:19px}
.b2-logo-bild--wn{height:30px}
/* Notarwand: der Kundensatz ist laenger als die alte Aussage, die Titelspalte bekommt mehr Breite,
   der zweite Satz steht in Rot Hell wie bei den anderen dunklen Ueberschriften */
@media(min-width:900px){:root:not(#k) .notarwand .nw-zahl-block{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
/* Karte Wirkungskreis, Handy: das Faehnchen Wolfsburg (Marker bei 84 %) ragte rechts aus dem Bild und machte die Seite
   auf 375 px rund 37 px breiter. Unter 700 px haengt es nach links, endet also am Marker. */
@media(max-width:699px){
  :root:not(#k) .kn-marker[data-ort="Wolfsburg"] .kn-fahne{left:auto;right:-6px;transform:none}
  :root:not(#k) .kn-marker[data-ort="Wolfsburg"]:hover .kn-fahne,
  :root:not(#k) .kn-marker[data-ort="Wolfsburg"]:focus-visible .kn-fahne{transform:translateY(-3px)}
}
/* 320 px: das Buero-Raster nahm die Mindestbreite seines Inhalts (326 px) und schob die Seite auf 342 px.
   Die Spalte darf schmaler werden als ihr Inhalt, der Text bricht dann um. */
@media(max-width:699px){
  :root:not(#k) .buero-raster{grid-template-columns:minmax(0,1fr)}
  :root:not(#k) .buero-raster > *{min-width:0}
}
/* Team-Panorama, 320 px: der Pfeil von „Das ganze Team ansehen" stiess an den Bildrand */
@media(max-width:399px){:root:not(#k) .tm-panorama-link{padding-right:40px}}
/* Kundenstimmen-Video (Startseite): Die Videos sind im Kinoformat 2,34:1, der Rahmen 16:10. Der Vimeo-Player ist durchsichtig,
   oben und unten schienen deshalb Vorschaubild, Name und Verlauf durch (Feedback 19.10.). Beim Abspielen: schwarzer Rand,
   Name, Verlauf und Abspielknopf weg. */
:root:not(#k) .ks-d-vorschau iframe{background:#000}
:root:not(#k) .ks-d-vorschau:has(iframe) .ks-d-info,
:root:not(#k) .ks-d-vorschau:has(iframe) .ks-d-play,
:root:not(#k) .ks-d-vorschau:has(iframe)::after{display:none}

/* ============================ TECHNIK UND TABLET (19.10., Pruefung Sascha) ============================ */
/* Tablet 768 bis 1239 px: Menueleiste ist zu, aber die Ablauf-Spur nahm noch den Desktop-Innenabstand (--menue-r) und
   machte die Startseite 59 px breiter als den Bildschirm. Unter 1240 px gilt der normale Rand. */
@media(max-width:1239px){:root:not(#k) .hor-spur{padding-left:var(--rand);padding-right:var(--rand)}}
/* Beschriftungen der Formulare auf Verkaufen (13 px) und im Newsletter (12 px) auf 15 px wie alle anderen Formulare */
:root:not(#k) .vh-form label,:root:not(#k) .newsletter label{font-size:var(--t-15)}
/* Honigtopf gegen Spam: ein Feld, das Menschen nicht sehen und nicht ausfuellen */
:root:not(#k) .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* Hero, Handy (19.10.): Die Slides liegen absolut am unteren Rand eines Kastens mit fester Mindesthoehe (20vh). Mit der
   laengeren Kopfzeile (drei Zeilen) und dem laengeren Claim (fuenf Zeilen) ragte der Claim nach oben ueber die Kopfzeile.
   Unter 768 px teilen sich die Slides eine Rasterzelle: der Kasten ist so hoch wie der laengste Slide, nichts ueberlappt. */
@media(max-width:767px){
  :root:not(#k) .b2-slides{display:grid;min-height:0}
  :root:not(#k) .b2-slide{position:static;grid-area:1/1;align-self:end}
}

/* ============================ HERO AUF DEM HANDY (19.10., Feedback: zu voll, Gesichter verdeckt, Kontraste) ============================
   Unter 768 px liegt der Text nicht mehr auf dem Bild. Oben das Bild in fester Hoehe mit den Personen, darunter eine
   Anthrazit-Flaeche mit Kopfzeile, Claim, Knopf, Telefon und Bekannt aus. Weiss auf Anthrazit: Kontrast ueber 15:1,
   kein Gesicht hinter Text. Die Slides wechseln weiter per Punkt. */
@media(max-width:767px){
  :root:not(#k) .b2{min-height:0;display:flex;flex-direction:column;justify-content:flex-start;background:#1a1917}
  :root:not(#k) .b2-bild{position:relative;inset:auto;z-index:0;height:clamp(300px,46vh,460px);flex:none}
  :root:not(#k) .b2-bild img,:root:not(#k) .b2-bild .b2-motiv{object-position:72% 22%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="1"]{object-position:60% 30%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="2"]{object-position:74% 20%}
  /* Verlauf nur noch als weicher Anschluss an die Flaeche darunter, Gesichter bleiben hell */
  :root:not(#k) html.grund-anthrazit .b2-bild::after,:root:not(#k) .b2-bild::after{
    background:linear-gradient(to bottom,rgba(20,19,17,.28) 0%,rgba(20,19,17,0) 28%,rgba(20,19,17,0) 70%,rgba(20,19,17,.9) 100%)}
  :root:not(#k) .b2-register{padding:var(--r-24) var(--rand) 0;margin:0}
  :root:not(#k) .b2-unten{padding:var(--r-16) var(--rand) var(--r-32)}
  :root:not(#k) .b2-links{max-width:none}
  :root:not(#k) .b2-claim{font-size:clamp(32px,9vw,40px)}
  :root:not(#k) .b2-bekannt{margin-top:var(--r-24)}
}
/* Nachmessung 375 px: .b2-oben hielt noch den Desktop-Abstand zum Kopf (114 px) und schob die Kopfzeile weit unters Bild.
   Zudem Bild etwas flacher, damit Bild, Claim und Knopf zusammen auf einen Bildschirm passen. */
@media(max-width:767px){
  :root:not(#k) .b2-oben{padding-top:0;min-height:0}
  :root:not(#k) .b2-bild{height:clamp(260px,40vh,420px)}
  :root:not(#k) .b2-claim{font-size:clamp(30px,8.4vw,38px)}
  :root:not(#k) .b2-unten{padding-top:var(--r-12)}
}
@media(max-width:767px){:root:not(#k) .b2-register{padding:var(--r-24) 0 0}}
@media(max-width:767px){:root:not(#k) .b2-slide{align-self:start}}
/* Kundenstimmen, Handy: die Vorschau war hier position:static, das absolut gesetzte Foto legte sich dadurch ueber die
   ganze Sektion samt Ueberschrift (Frank F. bildschirmfuellend). Wieder relativ, das Foto bleibt im 16:10-Kasten. */
@media(max-width:900px){:root:not(#k) .ks-d-vorschau{position:relative;top:auto}}
/* Team-Panorama, Handy: Bild oben ohne Text (Gesichter frei), Titel und Link darunter auf Anthrazit */
@media(max-width:767px){
  :root:not(#k) .team-mehr .tm-panorama{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;background:#1a1917}
  :root:not(#k) .team-mehr .tm-panorama img{position:relative;inset:auto;height:auto;aspect-ratio:16/9;object-position:50% 30%}
  :root:not(#k) .team-mehr .tm-panorama::after{display:none}
  :root:not(#k) .team-mehr .tm-panorama-text{position:static;transform:none;max-width:none;padding:var(--r-24) var(--rand) var(--r-40,40px)}
  :root:not(#k) .tm-panorama-titel{font-size:clamp(30px,8.4vw,38px) !important;white-space:normal}
}
@media(max-width:767px){:root:not(#k) .team-mehr .tm-panorama img{aspect-ratio:4/3;object-position:50% 12%}}
/* Kundenstimmen-Hero, Handy: Bild oben (Gesicht frei), Titel, Zitat und Auswahl darunter auf Tinte */
@media(max-width:767px){
  :root:not(#k) .kst-hv--b{min-height:0}
  :root:not(#k) .kst-b-bilder{position:relative;inset:auto;height:clamp(300px,48vh,440px)}
  :root:not(#k) .kst-b-bild{object-position:66% 25% !important}
  :root:not(#k) .kst-b-schleier{background:linear-gradient(180deg,rgba(17,16,14,.55) 0%,transparent 26%,transparent 72%,rgba(17,16,14,.95) 100%)}
  :root:not(#k) .kst-b-inhalt{min-height:0;padding-top:var(--r-24);padding-bottom:var(--r-40,40px)}
}
/* Verkaufen-Hero, Handy: Text unter das Hausbild statt darauf (Kontrast) */
@media(max-width:760px){
  :root:not(#k) .vh-a{background:#1a1917}
  :root:not(#k) .vh-a-bild{height:auto}
  :root:not(#k) .vh-a-bild img{height:clamp(260px,42vh,400px);transform:none;object-position:56% 60%}
  :root:not(#k) .vh-a-bild::after{background:linear-gradient(180deg,rgba(20,19,17,.5) 0%,transparent 28%)}
  :root:not(#k) .vh-a-text{position:relative;bottom:auto;padding-top:var(--r-24);padding-bottom:var(--r-24);background:#1a1917}
  :root:not(#k) .vh-a-leiste{background:#1a1917;margin-top:0;padding-top:var(--r-8)}
  :root:not(#k) .vh-a-leiste .vh-hinweis,:root:not(#k) .vh-a-leiste .vh-klein{color:rgba(255,255,255,.8)}
}
@media(max-width:767px){
  :root:not(#k) .kst-b-bilder{margin-top:var(--kopf-hoehe,80px);height:clamp(240px,40vh,380px)}
  :root:not(#k) .kst-b-bild{object-position:70% 18% !important}
  :root:not(#k) .kst-hv--b{background:#11100e}
}
@media(max-width:767px){:root:not(#k) .kst-b-auswahl{flex-wrap:wrap}:root:not(#k) .kst-b-daumen{width:calc((100% - 30px) / 4)}}
@media(max-width:760px){:root:not(#k) .vh-a-text .vh-titel .rot{color:var(--rot-hell)}}

/* ============================ HERO HANDY KOMPAKT (19.10., Feedback: passt nicht auf einen Bildschirm) ============================
   Gemessen bei 390 × 844: Hero 1099 px hoch. Jetzt passt alles bis Bekannt aus auf einen Bildschirm (Ziel ≤ 844, auch 812):
   Bild 30 % der Hoehe, Kopfzeile kleiner und zweizeilig, Claim 30 px, Telefon in einer Zeile unter dem Knopf,
   Bekannt aus als eine Zeile, die Slide-Punkte liegen unten rechts auf dem Bild. */
@media(max-width:767px){
  :root:not(#k) .b2{--b2-bild-h:clamp(190px,30vh,300px)}
  :root:not(#k) .b2-bild{height:var(--b2-bild-h)}
  :root:not(#k) .b2-register{padding-top:var(--r-16);font-size:12px;line-height:1.5;letter-spacing:.08em}
  :root:not(#k) .b2-unten{padding-top:var(--r-12);padding-bottom:var(--r-24);gap:0}
  :root:not(#k) .b2-claim{font-size:clamp(27px,7.6vw,31px);line-height:1.1}
  :root:not(#k) .b2-unter{margin-top:var(--r-8);font-size:14px;line-height:1.4}
  :root:not(#k) .b2-aktion{margin-top:var(--r-16);display:flex;flex-direction:column;align-items:stretch;gap:var(--r-12)}
  :root:not(#k) .b2-knopf{min-height:52px}
  :root:not(#k) .b2-tel{display:flex;align-items:baseline;gap:var(--r-12);min-height:0;font-size:18px}
  :root:not(#k) .b2-tel .b2-tel-hd{margin:0}
  :root:not(#k) .b2-bekannt{margin-top:var(--r-16);flex-direction:row;align-items:center;gap:var(--r-12);width:100%}
  :root:not(#k) .b2-bekannt-hd{flex:none;font-size:11px;max-width:5.5em;line-height:1.3}
  :root:not(#k) .b2-bekannt-fenster{flex:1 1 auto;min-width:0;width:auto;padding:2px 0}
  :root:not(#k) .b2-logo{min-height:44px;padding:0 18px}
  /* Slide-Punkte auf das Bild, unten rechts */
  :root:not(#k) .b2-steuerung{position:absolute;right:var(--rand);top:calc(var(--kopf-hoehe,81px) + var(--b2-bild-h) - 56px);z-index:3;margin:0}
  :root:not(#k) .b2-leiste{display:none}
}
/* die Punkte beziehen sich auf .b2, nicht auf .b2-unten */
@media(max-width:767px){:root:not(#k) .b2-unten{position:static}:root:not(#k) .b2-steuerung{top:calc(var(--kopf-hoehe,80px) + var(--b2-bild-h) - 52px)}}
@media(max-width:767px){:root:not(#k) .b2-tel{flex-direction:row;align-items:baseline;justify-content:flex-start;min-height:44px;align-items:center}}

/* ============================ HERO HANDY: GENAU EIN BILDSCHIRM (19.10., Feedback: zu komprimiert) ============================
   Der Hero ist auf dem Handy so hoch wie der Bildschirm (100svh), die rote Weiche beginnt erst danach. Raster aus drei Zeilen:
   Bild (nimmt den freien Platz), Kopfzeile, Text mit Knopf und Bekannt aus. .b2-unten loest sich auf (display:contents),
   damit die Slide-Punkte in derselben Rasterzelle wie das Bild unten rechts liegen. Schrift wieder etwas groesser. */
@media(max-width:767px){
  :root:not(#k) .b2{display:grid;grid-template-rows:minmax(190px,1fr) auto auto;min-height:100vh;min-height:100svh}
  :root:not(#k) .b2-bild{grid-row:1;height:auto;min-height:190px}
  :root:not(#k) .b2-oben{grid-row:2}
  :root:not(#k) .b2-unten{display:contents}
  :root:not(#k) .b2-links{grid-row:3;padding:var(--r-12) var(--rand) var(--r-32)}
  :root:not(#k) .b2-steuerung{grid-row:1;position:relative;top:auto;right:auto;align-self:end;justify-self:end;margin:0 var(--rand) var(--r-12)}
  :root:not(#k) .b2-register{padding-top:var(--r-24);font-size:13px;line-height:1.55}
  :root:not(#k) .b2-claim{font-size:clamp(30px,8.6vw,36px);line-height:1.08}
  :root:not(#k) .b2-unter{margin-top:var(--r-12);font-size:15px}
  :root:not(#k) .b2-aktion{margin-top:var(--r-24)}
  :root:not(#k) .b2-bekannt{margin-top:var(--r-24)}
}
@media(max-width:767px){
  :root:not(#k) .b2{grid-template-columns:minmax(0,1fr)}
  :root:not(#k) .b2 > *,:root:not(#k) .b2-links,:root:not(#k) .b2-steuerung{grid-column:1}
}
@media(max-width:767px){:root:not(#k) .b2-aktion{flex-wrap:nowrap}:root:not(#k) .b2-knopf{flex:none}}
/* kurze Handys (iPhone SE, 667 px hoch): etwas dichter, damit der Hero auch dort nur einen Bildschirm braucht */
@media(max-width:767px) and (max-height:740px){
  :root:not(#k) .b2{grid-template-rows:minmax(150px,1fr) auto auto}
  :root:not(#k) .b2-bild{min-height:150px}
  :root:not(#k) .b2-register{padding-top:var(--r-16);font-size:12px}
  :root:not(#k) .b2-claim{font-size:clamp(26px,7.4vw,30px)}
  :root:not(#k) .b2-unter{margin-top:var(--r-8);font-size:14px}
  :root:not(#k) .b2-links{padding-bottom:var(--r-16)}
  :root:not(#k) .b2-aktion{margin-top:var(--r-16);gap:var(--r-8)}
  :root:not(#k) .b2-bekannt{margin-top:var(--r-12)}
}
/* Hero Handy, Bild sauber (19.10., Feedback: Bilder reingezoomt, oben und unten ein Raster wie bei PNG):
   - die Koernung (.b2-bild::before, Rauschtextur) und der Verlauf oben und unten entfallen auf dem Handy
   - das Bild steht im eigenen Format 16:9 und wird nicht mehr aufgezoomt; der freie Platz geht in den Abstand vor dem Knopf
   - kein Zoom beim Slide-Wechsel (vorher 104 % auf 100 %) */
@media(max-width:767px){
  :root:not(#k) .b2-bild::before,:root:not(#k) html.grund-anthrazit .b2-bild::after,:root:not(#k) .b2-bild::after{display:none;background:none}
  :root:not(#k) .b2{grid-template-rows:auto auto 1fr}
  :root:not(#k) .b2-bild{min-height:0;height:auto;aspect-ratio:16/9}
  :root:not(#k) .b2-bild .b2-motiv,:root:not(#k) .b2-bild .b2-motiv.aktiv{transform:none;object-position:50% 50%}
  :root:not(#k) .b2-links{display:flex;flex-direction:column}
  :root:not(#k) .b2-aktion{margin-top:auto;padding-top:var(--r-24)}
}
@media(max-width:767px) and (max-height:740px){:root:not(#k) .b2{grid-template-rows:auto auto 1fr}:root:not(#k) .b2-aktion{padding-top:var(--r-16)}}
/* dieselbe Bereinigung auf Verkaufen und Kundenstimmen: Bild ohne Koernung und Verlauf, eigenes Format, kein Zoom */
@media(max-width:767px){
  :root:not(#k) .vh-a-bild::before,:root:not(#k) .vh-a-bild::after{display:none}
  :root:not(#k) .vh-a-bild img{height:auto;aspect-ratio:3/2;transform:none}
  :root:not(#k) .kst-b-schleier{display:none}
  :root:not(#k) .kst-b-bilder{height:auto;aspect-ratio:1280/549}
  :root:not(#k) .kst-b-bild,:root:not(#k) .kst-b-bild.aktiv{transform:none;object-position:50% 50% !important}
}
/* Kundenstimmen: das Kinoformat 2,34:1 waere auf dem Handy zu flach, die Person winzig. Ausschnitt 4:3 auf die Person. */
@media(max-width:767px){
  :root:not(#k) .kst-b-bilder{aspect-ratio:4/3}
  :root:not(#k) .kst-b-bild,:root:not(#k) .kst-b-bild.aktiv{object-position:72% 30% !important}
}

/* ============================ HANDY: ABLAUF KUNDENSTIMMEN → NAECHSTER SCHRITT (19.10., Pruefung) ============================
   Unter 901 px schaltet script.js den Vorhang ab (g.aus), Haltezone (165vh), Polster (31vh) und die Hoehe 0 der Sektion
   blieben aber stehen: „Der naechste Schritt – Sie hoeren von uns“ war unsichtbar, an seiner Stelle rund 1400 px leere
   Flaeche. Jetzt steht der Abschnitt im normalen Fluss. Feste Hintergruende (background-attachment:fixed) springen auf
   iOS, deshalb auf dem Handy mitlaufend. */
@media(max-width:900px){
  :root:not(#k) .ks-halt{display:none}
  :root:not(#k) .ks-zug > .kundenstimmen{position:relative;top:auto;padding-bottom:var(--r-48,48px);filter:none !important}
  :root:not(#k) .wisch{height:auto !important;margin:0 !important;pointer-events:auto}
  :root:not(#k) .wisch-buehne{position:relative;inset:auto}
  :root:not(#k) html.js-zug .wisch-flaeche,:root:not(#k) .wisch-flaeche{position:relative;inset:auto;min-height:0;
    visibility:visible !important;-webkit-clip-path:none !important;clip-path:none !important;
    padding:72px var(--rand) 64px}
  :root:not(#k) .wisch-inhalt{transform:none !important}
  :root:not(#k) .wisch-titel{font-size:clamp(30px,8.6vw,38px)}
  :root:not(#k) .wisch-flaeche,:root:not(#k) .dunkelzug,
  :root:not(#k) .wisch-flaeche::before,:root:not(#k) .dunkelzug::after{background-attachment:scroll,scroll,scroll}
}
/* Ablauf (Startseite): .hor-innen schneidet mit --menue-l/--menue-r, die script.js am Desktop-Menue misst. Unter 1240 px
   ist das Menue zu, der Wert lag bei 424 px und schnitt bei 390 px Breite den ganzen Ablauf weg (unsichtbar, 2500 px leer). */
@media(max-width:1239px){:root:not(#k) .hor-innen{clip-path:none}}

/* ============================ HANDY-DURCHGANG (19.10., Feedback: weisse Raender, zu viel Abstand, keine Uebergaenge) ============================ */
@media(max-width:900px){
  /* Kopf: auf dunklen Flaechen durchsichtig, Text lief unter Logo und Menue durch. Auf dem Handy immer deckend. */
  :root:not(#k) .kopf.kopf--ueber-bild,:root:not(#k) .kopf.kopf--dunkelzug{background:#1a1917}
  /* Ablauf: der Zaehler „01 von 08“ gehoert zur seitlichen Fahrt, auf dem Handy laufen die Schritte untereinander */
  :root:not(#k) .hor-fortschritt,:root:not(#k) .hor-balken{display:none}
  /* Film: Ton und Pause sind bis zum Dreh abgeschaltete Knoepfe, auf dem Handy nur Unruhe im Bild */
  :root:not(#k) .film-steuerung{display:none}
}
@media(max-width:767px){
  /* Abstaende: Desktop-Werte (bis 150 px je Seite) auf einen Takt von 56 px */
  :root:not(#k) .angebote,:root:not(#k) .buero,:root:not(#k) .situation,:root:not(#k) .kundenstimmen{padding-top:56px;padding-bottom:56px}
  :root:not(#k) .team{padding-bottom:56px}
  :root:not(#k) .cta{padding-top:48px;padding-bottom:56px}
  :root:not(#k) .film{padding-bottom:48px}
  :root:not(#k) .weiche{padding-bottom:0}
  :root:not(#k) .ablauf{padding-top:16px}
  /* Karte: Gifhorn lag ueber Wolfsburg; auf dem Handy nur die beiden grossen Orte beschriftet */
  :root:not(#k) .kn-marker[data-ort="Gifhorn"] .kn-fahne{display:none}
  /* Uebergaenge hell ↔ dunkel: statt harter Kante schiebt sich die naechste Flaeche mit runden Ecken ueber die vorige */
  :root:not(#k) .wisch-flaeche{border-radius:28px 28px 0 0;margin-top:-28px;position:relative;z-index:2}
  :root:not(#k) .buero{border-radius:28px 28px 0 0;margin-top:-28px;position:relative;z-index:2}
  :root:not(#k) .team-mehr{padding-bottom:28px}
  :root:not(#k) .ks-zug > .kundenstimmen{padding-bottom:84px}
}
/* Einlauf auf dem Handy: Ueberschriften und Bloecke gleiten beim Erreichen 16 px herauf (Leitdatei: Bewegung <= 24 px).
   Nur mit Skript (html.handy-einlauf), ohne Skript oder bei reduzierter Bewegung steht alles sofort. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  html.handy-einlauf .einlauf{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  html.handy-einlauf .einlauf.da{opacity:1;transform:none}
}
/* Handy: „Der naechste Schritt“ und die dunkle Strecke darunter auf denselben ruhigen Grund, sonst Kante zwischen zwei Lichtverlaeufen */
@media(max-width:767px){
  :root:not(#k) .wisch-flaeche,:root:not(#k) .dunkelzug{background:#1a1917 !important}
  :root:not(#k) .wisch-flaeche::before,:root:not(#k) .dunkelzug::after{display:none}
}
/* Verkaufen, Handy: zwischen dem dunklen Zwischenstreifen (Ende Ablauf) und „Geprueft“ lagen 42 px Papier (Innenabstand
   der Ablaufbuehne), dazu zusammen 180 px dunkler Leerraum */
@media(max-width:767px){
  :root:not(#k) .v3-ablauf .hor-innen{padding-bottom:0}
  :root:not(#k) .vk-zug{padding-bottom:56px}
  :root:not(#k) .vpruef{padding-top:56px;padding-bottom:64px}
  :root:not(#k) .vks{padding-top:56px;padding-bottom:56px}
  :root:not(#k) .vab{padding-top:56px;padding-bottom:56px}
  :root:not(#k) .v2{padding-top:56px;padding-bottom:56px}
  :root:not(#k) .vk-zug .wisch-titel,:root:not(#k) .vk-zug h2{text-wrap:balance;font-size:clamp(30px,8.6vw,38px)}
}
/* Unterseiten, Handy: Desktop-Innenabstaende (bis 152 px) auf denselben Takt wie die Startseite */
@media(max-width:767px){
  :root:not(#k) .uh-c{padding-top:0}
  :root:not(#k) .uh-satz{padding-top:56px}
  :root:not(#k) .uh-dunkel{padding-bottom:56px}
  :root:not(#k) .uh-rollen{padding-top:48px;padding-bottom:56px}
  :root:not(#k) .uh-team{padding-top:48px;padding-bottom:64px}
  :root:not(#k) .kst-worte{padding-top:56px;padding-bottom:56px}
  :root:not(#k) .kst-worte-kopf{margin-bottom:32px}
  :root:not(#k) .an-liste{padding-bottom:56px}
  :root:not(#k) .an-person{padding-top:56px;padding-bottom:56px}
}
/* Verkaufen, Handy: Ueberdeckungs-Pause (.vk-pause, 447 px) und Haften von „Geprueft“ gehoeren zum Desktop-Effekt.
   Auf dem Handy entfaellt beides; die helle Sektion schiebt sich mit runden Ecken ueber die dunkle. */
@media(max-width:767px){
  :root:not(#k) .vk-pause{display:none}
  :root:not(#k) .vpruef{position:relative;top:auto}
  :root:not(#k) .vks{border-radius:28px 28px 0 0;margin-top:-28px;position:relative;z-index:2}
  :root:not(#k) .vpruef{padding-bottom:92px}
}
@media(max-width:767px){
  :root:not(#k) .uh-team-raster{margin-top:32px}
  :root:not(#k) .uh-karriere-innen{padding-top:56px;padding-bottom:56px}
}

/* Hero Handy, Bild groesser (19.10., Feedback: zu viel Platz vor dem Knopf). Der Textblock richtet sich nach dem aktiven
   Slide (die anderen liegen ausgeblendet darueber), das Bild nimmt den ganzen restlichen Platz bis zur Bildschirmhoehe.
   Kein Zoom-Effekt, nur Zuschnitt an den Seiten; Personen bleiben im Bild (Ausschnitt oben). */
@media(max-width:767px){
  :root:not(#k) .b2,:root:not(#k) .b2{grid-template-rows:minmax(200px,1fr) auto auto}
  :root:not(#k) .b2-bild{aspect-ratio:auto;height:auto;min-height:200px}
  :root:not(#k) .b2-slides{display:block;position:relative}
  :root:not(#k) .b2-slide{position:absolute;top:0;left:0;right:0}
  :root:not(#k) .b2-slide.aktiv{position:relative}
  :root:not(#k) .b2-aktion{margin-top:var(--r-24);padding-top:0}
  :root:not(#k) .b2-bild .b2-motiv,:root:not(#k) .b2-bild .b2-motiv.aktiv{object-position:62% 30%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="1"]{object-position:66% 35%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="2"]{object-position:55% 40%}
}
@media(max-width:767px) and (max-height:740px){:root:not(#k) .b2{grid-template-rows:minmax(160px,1fr) auto auto}:root:not(#k) .b2-aktion{margin-top:var(--r-16)}}

/* ============================ HERO HANDY RANDLOS (20.10., Feedback: Bild wirkt wie ein rechteckiger Kasten, am Desktop
   ist das Gefuehl anders) ============================
   Wie am Desktop: das Foto fuellt den ganzen Bildschirm bis unter die Kopfleiste, ohne Kante. Nach unten laeuft es in
   Anthrazit aus, darauf steht der Text. Die Gesichter liegen im oberen Teil, wo kein Text ist (Feedback 19.10. bleibt
   erfuellt: kein Text auf Gesichtern, Weiss auf Anthrazit > 15:1). Kopf ueber dem Hero durchsichtig wie am Desktop. */
@media(max-width:767px){
  :root:not(#k) .b2{background:#1a1917}
  :root:not(#k) .b2-bild{grid-row:1 / -1;grid-column:1;position:absolute;inset:0;height:auto;min-height:0;aspect-ratio:auto;z-index:0}
  :root:not(#k) .b2-bild .b2-motiv,:root:not(#k) .b2-bild .b2-motiv.aktiv{height:72%;object-position:62% 18%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="1"]{object-position:66% 22%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="2"]{object-position:55% 30%}
  /* Verlauf: oben leicht fuer Logo und Menue, unten ab etwa der Bildmitte deckend in den Textgrund */
  :root:not(#k) html.grund-anthrazit .b2-bild::after,:root:not(#k) .b2-bild::after{display:block;content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(20,19,17,.55) 0%,rgba(20,19,17,0) 16%,rgba(20,19,17,0) 34%,rgba(20,19,17,.7) 52%,#1a1917 68%,#1a1917 100%)}
  :root:not(#k) .b2-oben,:root:not(#k) .b2-links,:root:not(#k) .b2-steuerung{position:relative;z-index:1}
  /* Kopf ueber dem Hero durchsichtig (nur dort; ueber den dunklen Flaechen weiter unten bleibt er deckend) */
  :root:not(#k) .kopf.kopf--ueber-bild:not(.kopf--dunkelzug){background:transparent}
}
/* Nachmessung: mit grid-row bezog sich das absolut gesetzte Bild auf die Rasterflaeche (beginnt unter dem Kopfabstand von
   81 px), ohne Rasterzeile auf die ganze Hero-Flaeche. Bild etwas weniger hoch, damit es weniger gezoomt ist und beide
   Personen im Bild bleiben; Slide-Punkte oben rechts in den Himmel statt auf das Gesicht. */
@media(max-width:767px){
  :root:not(#k) .b2-bild{grid-area:auto}
  :root:not(#k) .b2-bild .b2-motiv,:root:not(#k) .b2-bild .b2-motiv.aktiv{height:66%;object-position:70% 22%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="1"]{object-position:68% 26%}
  :root:not(#k) .b2-bild .b2-motiv[data-slide="2"]{object-position:58% 32%}
  :root:not(#k) .b2-bild::after{background:linear-gradient(to bottom,rgba(20,19,17,.55) 0%,rgba(20,19,17,0) 18%,rgba(20,19,17,0) 36%,rgba(20,19,17,.75) 54%,#1a1917 64%,#1a1917 100%)}
  :root:not(#k) .b2-steuerung{align-self:start;margin:calc(var(--kopf-hoehe,80px) + 12px) var(--rand) 0}
}
/* Slide-Punkte: senkrecht am rechten Rand auf Hoehe des Sakkos, weder auf Gesichtern noch im Text */
@media(max-width:767px){
  :root:not(#k) .b2-steuerung{grid-area:auto;position:absolute;right:6px;top:40%;margin:0;transform:translateY(-50%)}
  :root:not(#k) .b2-reihe,:root:not(#k) .b2-punkte{flex-direction:column;gap:0}
}
@media(max-width:767px){
  :root:not(#k) .b2-steuerung{top:31%}
  :root:not(#k) .b2-register{padding-right:40px}
}
/* Punkte an den linken Rand: dort liegt auf dieser Hoehe nur Strasse und Haeuser, rechts beruehrten sie Simons Wange */
@media(max-width:767px){
  :root:not(#k) .b2-steuerung{right:auto;left:4px}
  :root:not(#k) .b2-register{padding-right:0}
}

/* ============================ KUNDENSTIMMEN HANDY: VORSCHAU HAFTET (20.10., Feedback: beim Runterscrollen nur Namen,
   kein Video) ============================
   Wie am Desktop: das Video bleibt oben unter der Kopfleiste stehen, die Stimme darunter ist rot hinterlegt und wird als
   Vorschau gezeigt (script.js, Abschnitt Kundenstimmen). Ein Rand in Papier deckt die Zeilen, die dahinter durchlaufen. */
@media(max-width:900px){
  :root:not(#k) .ks-d-vorschau{position:sticky;top:calc(var(--kopf-hoehe,80px) + 12px);z-index:3;aspect-ratio:16/9;
    box-shadow:0 0 0 12px var(--papier),0 0 0 13px var(--papier),0 22px 30px -18px rgba(20,19,17,.35)}
  :root:not(#k) .ks-d-layout{overflow:visible}
  :root:not(#k) .ks-d-zeile{transition:background-color var(--dauer-ui) var(--kurve)}
}

/* ============================ FEEDBACK HANDY 20.10. (Feedback-Werkzeug, index) ============================ */
@media(max-width:767px){
  /* 1 · Teamfoto: mehr Luft ueber den Koepfen, die Beine duerfen abgeschnitten werden */
  :root:not(#k) .team-mehr .tm-panorama img{aspect-ratio:3/2;object-position:50% 0%}
  /* 2 · Buero: keine Rundung oben (Uebergang vom Team ohne Ueberschiebung) */
  :root:not(#k) .buero{border-radius:0;margin-top:0}
  :root:not(#k) .team-mehr{padding-bottom:0}
  /* 3 · Zahlen: die Hauptzahl steht allein in voller Breite, darunter vier Zahlen im 2 × 2-Raster mit Haarlinien.
       Vorher stand die Google-Note allein in der letzten Reihe. */
  :root:not(#k) .zahlen-haupt{width:100%;padding:8px 0 28px;margin:0;border-bottom:1px solid var(--linie)}
  :root:not(#k) .zahlen-haupt .zaehler{font-size:clamp(76px,22vw,104px)}
  :root:not(#k) .zahlen-zahl:not(.zahlen-haupt){width:50%;margin:0;padding:24px 8px;border-bottom:1px solid var(--linie)}
  :root:not(#k) .zahlen-raster > .zahlen-zahl:nth-child(4),:root:not(#k) .zahlen-raster > .zahlen-zahl:nth-child(6){border-right:1px solid var(--linie)}
  :root:not(#k) .zahlen-text{margin:24px 0 0;order:3}
  /* Ziffern kippen beim Erreichen (handy.js setzt .zahlen-los und je Ziffer --verz) */
  :root:not(#k) .zahlen .ziffer > span{transition:transform 1.3s cubic-bezier(.77,0,.18,1);transition-delay:var(--verz,0s)}
  :root:not(#k) .zahlen.zahlen-los .ziffer .alt{transform:translateY(100%)}
  :root:not(#k) .zahlen.zahlen-los .ziffer .neu{transform:translateY(0)}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){:root:not(#k) .zahlen .ziffer > span{transition:none}}
/* 4 · Ablauf: Linie links wie auf der Kontaktseite. Sie fuellt sich beim Scrollen rot, der aktuelle Schritt ist hervorgehoben,
       erledigte Schritte tragen ein rotes Quadrat auf der Linie (handy.js setzt --abl, .dran und .durch). */
@media(max-width:767px){
  :root:not(#k) .ablauf .hor-spur,:root:not(#k) .v3-ablauf .hor-spur{position:relative;padding-left:calc(var(--rand) + 22px)}
  :root:not(#k) .ablauf .hor-spur::before,:root:not(#k) .ablauf .hor-spur::after,:root:not(#k) .v3-ablauf .hor-spur::before,:root:not(#k) .v3-ablauf .hor-spur::after{content:"";position:absolute;left:calc(var(--rand) + 4px);top:0;
    width:2px;bottom:0;background:var(--linie)}
  :root:not(#k) .ablauf .hor-spur::after,:root:not(#k) .v3-ablauf .hor-spur::after{background:var(--rot);bottom:auto;height:var(--abl,0%);transition:height .15s linear}
  :root:not(#k) .ablauf .hor-feld,:root:not(#k) .v3-ablauf .hor-feld{position:relative;transition:background-color .3s var(--kurve),transform .3s var(--kurve)}
  :root:not(#k) .ablauf .hor-feld::before,:root:not(#k) .v3-ablauf .hor-feld::before{content:"";position:absolute;left:-23px;top:28px;width:10px;height:10px;background:var(--papier);
    border:2px solid var(--linie-stark);z-index:1;transition:background-color .3s,border-color .3s}
  :root:not(#k) .ablauf .hor-feld.durch::before,:root:not(#k) .ablauf .hor-feld.dran::before,:root:not(#k) .v3-ablauf .hor-feld.durch::before,:root:not(#k) .v3-ablauf .hor-feld.dran::before{background:var(--rot);border-color:var(--rot)}
  :root:not(#k) .ablauf .hor-feld.dran,:root:not(#k) .v3-ablauf .hor-feld.dran{transform:none}
}

/* Kopf, Telefonknopf (20.10., Feedback): ohne Rahmen, nur das Symbol mit gleich grosser Tippflaeche (48 px).
   Hover und Fokus in Rot wie alle Bedienelemente. */
:root:not(#k) .kopf-anruf,:root:not(#k) .kopf--ueber-bild .kopf-anruf{border:0;background:transparent}
:root:not(#k) .kopf-anruf:hover,:root:not(#k) .kopf-anruf:focus-visible{background:transparent;color:var(--rot)}
:root:not(#k) .kopf--ueber-bild .kopf-anruf:hover,:root:not(#k) .kopf--ueber-bild .kopf-anruf:focus-visible{color:var(--rot-hell)}
:root:not(#k) .kopf-anruf:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* Wirkungskreis, Handy (20.10., Feedback): Reihenfolge wie am Desktop. Oben „Hier vor Ort“, dann die Karte, darunter
   Wolfsburg, Braunschweig und Umgebung rechtsbuendig. */
@media(max-width:900px){
  :root:not(#k) .kreis-oben{order:0;align-self:center;margin:0 0 var(--r-16)}
  :root:not(#k) .kreis-bild--karte,:root:not(#k) .kreis-bild{order:1}
  :root:not(#k) .kreis-unten{order:2;margin-top:var(--r-16)}
}

/* ============================ „SIE HOEREN VON UNS“ AUF DEM HANDY (20.10., Feedback: geht unter, Animation fehlt) ============================
   Am Desktop wischt der Abschnitt als Vorhang ueber die Seite. Auf dem Handy ein eigener Moment: fast bildschirmhoch,
   Ueberschrift gross, Zeilen fahren nacheinander aus der Maske, roter Strich waechst, dann Text und Knopf.
   Dezenter roter Lichtschein unten rechts. Gesteuert von handy.js (.ab-da), ohne Skript steht alles. */
@media(max-width:767px){
  :root:not(#k) .wisch-flaeche,:root:not(#k) .vk-zug{min-height:86vh;min-height:86svh;display:grid;place-items:center;
    background:radial-gradient(90% 55% at 100% 100%,rgba(209,10,16,.30) 0%,rgba(209,10,16,0) 70%),radial-gradient(70% 40% at 0% 0%,rgba(245,50,56,.10) 0%,rgba(245,50,56,0) 70%),#1a1917 !important}
  :root:not(#k) .wisch-inhalt,:root:not(#k) .vk-zug-inhalt{text-align:left;align-items:flex-start;gap:var(--r-24)}
  :root:not(#k) .wisch-titel,:root:not(#k) .vk-zug-titel{font-size:clamp(38px,11vw,48px) !important;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
  :root:not(#k) .ab-zeile{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
  :root:not(#k) .ab-zeile > span{display:block}
  :root:not(#k) .wisch-inhalt .register::after,:root:not(#k) .vk-zug-inhalt .register::after{content:"";display:block;width:56px;height:3px;margin-top:14px;background:var(--rot)}
  :root:not(#k) .wisch-text,:root:not(#k) .vk-zug-text{font-size:18px;line-height:1.55;color:rgba(255,255,255,.82);text-align:left}
  :root:not(#k) .wisch-inhalt .knopf-primaer,:root:not(#k) .vk-zug-inhalt .knopf-primaer{width:100%;justify-content:space-between}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  :root.ab-js:not(#k) .ab-zeile > span{transform:translateY(105%);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
  :root.ab-js:not(#k) .ab-zeile:nth-child(2) > span{transition-delay:.14s}
  :root.ab-js:not(#k) .ab-teil{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:.4s}
  :root.ab-js:not(#k) .ab-teil + .ab-teil{transition-delay:.55s}
  :root.ab-js:not(#k) .register.ab-strich::after{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,.61,.36,1) .1s}
  :root.ab-js:not(#k) .ab-da .ab-zeile > span,:root.ab-js:not(#k) .ab-da .ab-teil{transform:none;opacity:1}
  :root.ab-js:not(#k) .ab-da .register.ab-strich::after{transform:scaleX(1)}
}
@media(max-width:767px){:root:not(#k) .wisch-titel .rot-hell,:root:not(#k) .vk-zug-titel .rot-hell{color:var(--rot-hell)}}

/* ============================ UNTERSEITEN-HEROS RANDLOS (20.10., Feedback: auch dort ein Rechteck, Startseiten-Feedback
   auf die anderen Seiten anwenden) ============================
   Verkaufen und Kundenstimmen wie die Startseite: Foto oben randlos bis unter die durchsichtige Kopfleiste, weicher
   Verlauf in Anthrazit, Text darauf. Gesichter und Haus liegen im oberen Teil, Text erst im dunklen Bereich. */
@media(max-width:767px){
  :root:not(#k) .kopf.kopf--auf-hero{background:transparent}

  /* Verkaufen: Bildhuelle traegt Foto und Text, Foto absolut oben, Text unten auf dem Verlauf */
  :root:not(#k) .vh-a{background:#1a1917}
  :root:not(#k) .vh-a-bild{display:flex;flex-direction:column;justify-content:flex-end;min-height:78vh;min-height:78svh;overflow:hidden}
  :root:not(#k) .vh-a-bild img{position:absolute;inset:0 0 auto 0;width:100%;height:62%;aspect-ratio:auto;object-fit:cover;object-position:56% 55%;transform:none}
  :root:not(#k) .vh-a-bild::after{display:block;content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(20,19,17,.5) 0%,rgba(20,19,17,0) 18%,rgba(20,19,17,0) 34%,rgba(20,19,17,.8) 52%,#1a1917 62%,#1a1917 100%)}
  :root:not(#k) .vh-a-text{position:relative;z-index:2;background:transparent;padding-top:0;padding-bottom:var(--r-24)}

  /* Kundenstimmen: Standbilder oben (Ausschnitt auf die Person), Titel, Zitat und Auswahl darunter auf Tinte */
  :root:not(#k) .kst-hv--b{min-height:100vh;min-height:100svh;background:#11100e}
  :root:not(#k) .kst-b-bilder{position:absolute;inset:0 0 auto 0;margin-top:0;height:58%;aspect-ratio:auto}
  :root:not(#k) .kst-b-bild,:root:not(#k) .kst-b-bild.aktiv{object-position:70% 22% !important}
  :root:not(#k) .kst-b-schleier{display:block;position:absolute;inset:0 0 auto 0;height:58%;
    background:linear-gradient(to bottom,rgba(17,16,14,.5) 0%,rgba(17,16,14,0) 22%,rgba(17,16,14,0) 52%,#11100e 100%)}
  :root:not(#k) .kst-b-inhalt{min-height:100vh;min-height:100svh;justify-content:flex-end;padding-top:0;padding-bottom:var(--r-40,40px);position:relative;z-index:2}
}
/* Kundenstimmen: die Standbilder sind Kinoformat ohne Luft ueber dem Kopf, deshalb beginnt das Bild unter der Kopfleiste.
   Verlauf als ::after am Bild statt als eigener Schleier (der hatte eine harte Kante). */
@media(max-width:767px){
  :root:not(#k) .kst-b-bilder{top:var(--kopf-hoehe,80px);height:50%}
  :root:not(#k) .kst-b-schleier{display:none}
  :root:not(#k) .kst-b-bilder::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(17,16,14,0) 0%,rgba(17,16,14,0) 45%,rgba(17,16,14,.85) 82%,#11100e 100%)}
}
@media(max-width:767px){:root:not(#k) .kst-b-bilder::after{background:linear-gradient(to bottom,rgba(17,16,14,0) 0%,rgba(17,16,14,0) 42%,rgba(17,16,14,.85) 74%,#11100e 90%,#11100e 100%)}}
/* „Sie hoeren von uns“ (20.10., Feedback): ohne roten Strich und ohne roten Lichtschein, nicht im Branding. Ruhiger Grund. */
@media(max-width:767px){
  :root:not(#k) .wisch-inhalt .register::after,:root:not(#k) .vk-zug-inhalt .register::after{display:none}
  :root:not(#k) .wisch-flaeche,:root:not(#k) .vk-zug{background:#1a1917 !important}
  /* Wirkungskreis: „Hier“ und „vor Ort“ ziehen beim Scrollen auseinander wie am Desktop (handy.js setzt die Verschiebung) */
  :root:not(#k) .kreis-oben{align-self:stretch;justify-content:center}
  :root:not(#k) .kreis-oben p{will-change:transform}
}

/* Handy (20.10., Feedback): keine abgerundeten Ecken an den Uebergaengen (Buero, Kundenvideos auf Verkaufen, naechster Schritt) */
@media(max-width:767px){
  :root:not(#k) .vks,:root:not(#k) .wisch-flaeche{border-radius:0;margin-top:0}
  :root:not(#k) .vpruef{padding-bottom:64px}
  :root:not(#k) .ks-zug > .kundenstimmen{padding-bottom:56px}
}
/* Kundenstimmen-Hero, Handy (20.10., Feedback): Foto bis an den oberen Rand, Kopfleiste durchsichtig darueber.
   Oben ein leichter Verlauf, damit Logo und Menue auf dem hellen Wohnzimmer lesbar bleiben. */
@media(max-width:767px){
  :root:not(#k) .kst-b-bilder{top:0;height:60%}
  :root:not(#k) .kst-b-bild,:root:not(#k) .kst-b-bild.aktiv{object-position:70% 30% !important}
  :root:not(#k) .kst-b-bilder::after{background:linear-gradient(to bottom,rgba(17,16,14,.6) 0%,rgba(17,16,14,0) 20%,rgba(17,16,14,0) 46%,rgba(17,16,14,.85) 76%,#11100e 92%,#11100e 100%)}
}

/* ============================ UEBER UNS HANDY (20.10., Feedback: Layouts mobil anpassen) ============================ */
@media(max-width:767px){
  /* Kopf: Text etwas kleiner, ruhiger */
  :root:not(#k) .uh-c-text{padding:32px var(--rand) 8px}
  :root:not(#k) .uh-c-text p{font-size:19px;line-height:1.5}
  /* Zitat: kleiner und dichter, statt fuenf Zeilen in 28 px Grau */
  :root:not(#k) .uh-satz{padding-top:48px}
  :root:not(#k) .uh-satz-text{font-size:24px;line-height:1.3}
  :root:not(#k) .uh-satz-klein{margin-top:48px;font-family:var(--schrift-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
  /* Collage: eine Wischreihe statt gestapelter Bilder (handy.js baut .uh-streifen), die alten Bilder aus */
  :root:not(#k) .uh-col--handy{display:block;padding:0;margin-top:16px}
  :root:not(#k) .uh-col--handy > .uh-col-bild,:root:not(#k) .uh-col--handy > .uh-col-buehne,:root:not(#k) .uh-col--handy .uh-col-luft{display:none}
  :root:not(#k) .uh-col--handy .uh-dunkel{margin:40px 0 0}
  :root:not(#k) .uh-streifen{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 4px;
    scroll-padding-left:var(--rand);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  :root:not(#k) .uh-streifen::-webkit-scrollbar{display:none}
  :root:not(#k) .uh-streifen-bild{flex:0 0 76vw;margin:0;aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start;background:var(--stein)}
  :root:not(#k) .uh-streifen-bild img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block}
  /* Team: Wischreihe, Name und Rolle untereinander */
  :root:not(#k) .uh-team{padding-bottom:56px}
  :root:not(#k) .uh-team-titel{font-size:56px}
  :root:not(#k) .uh-team-spalten p{font-size:16px}
  :root:not(#k) .uh-team-raster{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 4px;margin-top:36px;
    scroll-padding-left:var(--rand);scrollbar-width:none}
  :root:not(#k) .uh-team-raster::-webkit-scrollbar{display:none}
  :root:not(#k) .uh-team-spalte{display:contents;transform:none !important}
  :root:not(#k) .uh-team-karte{flex:0 0 62vw;scroll-snap-align:start}
  :root:not(#k) .uh-team-karte figcaption{flex-direction:column;gap:2px;font-size:16px}
  :root:not(#k) .uh-team-karte figcaption span:empty{display:none}
  :root:not(#k) .uh-team .uh-presse{margin-top:64px}
  /* Karriere: nicht mehr bildschirmhoch, die Platzhalter-Kachel entfaellt (der Knopf fuehrt zu den Stellen) */
  :root:not(#k) .uh-karriere-innen{min-height:0;padding-top:56px;padding-bottom:56px}
  :root:not(#k) .uh-karriere-kachel{display:none}
}
/* Weiche, Handy (20.10., Feedback: Bloecke verrutscht): beide Felder mit demselben Innenabstand und ohne Einlauf,
   damit Rot und Grau buendig untereinander stehen */
@media(max-width:767px){
  :root:not(#k) .weiche .wd-feld{padding-left:var(--rand);padding-right:var(--rand);opacity:1 !important;transform:none !important}
  :root:not(#k) .weiche .wd-titel{opacity:1 !important;transform:none !important}
}
/* Weiche 1000–1239 px: das Menue ist dort zu, --menue-r misst Unsinn (424 px) und schob den Text im grauen Feld zusammen */
@media(min-width:1000px) and (max-width:1239px){
  :root:not(#k) .wd-feld:first-child{padding-left:calc(var(--rand) + clamp(16px,3vw,56px))}
  :root:not(#k) .wd-feld:last-child{padding-right:calc(var(--rand) + clamp(16px,3vw,56px))}
}
/* Wischhinweis unter den Wischreihen (handy.js) */
@media(max-width:767px){
  :root:not(#k) .wisch-hinweis{display:flex;align-items:center;gap:14px;margin:14px var(--rand) 0}
  :root:not(#k) .wisch-hinweis-balken{flex:1 1 auto;height:2px;background:var(--linie);overflow:hidden}
  :root:not(#k) .wisch-hinweis-balken > span{display:block;height:100%;background:var(--rot);transition:transform .15s linear}
  :root:not(#k) .wisch-hinweis-text{flex:none;font-family:var(--schrift-label);font-size:14px;letter-spacing:.04em;color:var(--text-2);
    transition:opacity .3s}
  :root:not(#k) .wisch-hinweis-pfeil{display:inline-block;color:var(--rot);font-size:18px;line-height:1;margin-left:4px}
  :root:not(#k) .wisch-hinweis.ist-gewischt .wisch-hinweis-text{opacity:.6}
  :root:not(#k) .wisch-hinweis--dunkel .wisch-hinweis-balken{background:rgba(255,255,255,.2)}
  :root:not(#k) .wisch-hinweis--dunkel .wisch-hinweis-text{color:rgba(255,255,255,.75)}
  :root:not(#k) .wisch-hinweis--dunkel .wisch-hinweis-pfeil{color:var(--rot-hell)}
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  :root:not(#k) .wisch-hinweis:not(.ist-gewischt) .wisch-hinweis-pfeil{animation:wischStups 1.8s cubic-bezier(.45,0,.2,1) infinite}
}
@keyframes wischStups{0%,55%,100%{transform:none}70%{transform:translateX(6px)}85%{transform:translateX(0)}}
/* Kopf ueber dunklen Flaechen, Handy (20.10., Feedback Ueber uns: transparent, nicht als Block): durchsichtig mit dem
   weichen dunklen Verlauf vom Desktop (::before) statt eines deckenden Balkens. Ueber uns markiert seine dunklen
   Abschnitte jetzt mit data-dunkelzone. */
@media(max-width:900px){
  :root:not(#k) .kopf.kopf--ueber-bild,:root:not(#k) .kopf.kopf--dunkelzug{background:transparent}
}

/* Seitenuebergang (20.10., Feedback: ruckelt): die Flaeche als eigene, abgeschlossene Ebene, damit beim Hinein- und
   Herausfahren nichts von der Seite darunter neu gerechnet wird */
:root:not(#k) .uebergang{contain:strict;isolation:isolate}

/* ============================ WIRKUNGSKREIS IN WORTEN (20.10., SEO) ============================
   Unter der Karte: Register, Ueberschrift links, Text mit Stadtteilen und Links rechts. Ruhig, auf Papier. */
:root:not(#k) .kreis-seo{display:grid;gap:var(--r-24) clamp(32px,5vw,88px);margin-top:clamp(40px,5vw,80px);
  padding:clamp(32px,4vw,56px) 0 clamp(24px,3vw,40px);border-top:1px solid var(--linie)}
:root:not(#k) main .kreis-seo-titel{margin-top:var(--r-16);max-width:14em}
:root:not(#k) .kreis-seo-text{max-width:34em;font-size:clamp(17px,1.2vw,20px);line-height:1.5}
:root:not(#k) .kreis-seo-text > p + p{margin-top:var(--r-12)}
:root:not(#k) .kreis-seo-vor{margin-top:var(--r-24);font-family:var(--schrift-label);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2)}
:root:not(#k) .kreis-seo-orte{list-style:none;margin:var(--r-12) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
:root:not(#k) .kreis-seo-orte li{padding:6px 12px;border:1px solid var(--linie);font-size:15px;line-height:1.3;background:var(--weiss)}
:root:not(#k) .kreis-seo-links{list-style:none;margin:var(--r-24) 0 0;padding:0;display:grid;gap:4px}
:root:not(#k) .kreis-seo-links a{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:17px}
:root:not(#k) .kreis-seo-links a:hover{color:var(--rot)}
@media(min-width:1000px){:root:not(#k) .kreis-seo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
@media(max-width:767px){:root:not(#k) .kreis-seo{margin-top:var(--r-32);padding-top:var(--r-32)}}
:root:not(#k) .kreis-seo-links .rot{color:var(--rot)}
/* Fussorte als Links (20.10., SEO) und Ratgeber-Link auf Verkaufen */
:root:not(#k) .fuss-standorte a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
:root:not(#k) .fuss-standorte a:hover{color:var(--rot)}
:root:not(#k) .vpruef-mehr{position:relative;margin-top:clamp(32px,4vw,56px)}
:root:not(#k) .vpruef-mehr a{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:#fff;font-size:17px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
:root:not(#k) .vpruef-mehr a span{color:var(--rot-hell)}
:root:not(#k) .vpruef-mehr a:hover{color:var(--rot-hell)}
/* Ortsseiten und Ratgeber (20.10.): Bausteine von Verkaufen; das lange Wort Immobilienmakler braucht auf dem Handy etwas weniger Groesse */
@media(max-width:767px){:root:not(#k) .seite-ort .vh-titel{font-size:min(44px,10.2vw)}}