/* Kristin Krumm Immobilien — Seitenstile
   Tokens siehe :root. Werte stammen aus der Leitdatei, Abschnitt 5.
   Stand 15.09.2026 — Kopf mit Menü und Hero überarbeitet. */

:root{
  --rot-schleier:#F8E3E3; --rot-hell:#F53238; --rot:#D10A10; --rot-hover:#B9090E;
  --rot-aktiv:#A6080D; --rot-fehler:#92070B; --rot-tief:#6A0C0F; --rot-nacht:#35090A;
  --weiss:#FFFFFF; --papier:#F9F8F6; --papier-2:#F2F1ED; --stein:#E4E2DD;
  --linie:#DDDAD5; --logo-grau:#8C8982; --linie-stark:#8E8A80;
  --text-2:#5E5B55; --tinte-weich:#292724; --tinte:#11100E;
  /* Typografie nach dem Gestaltungsvorbild: Gilroy für Headline, Menü und Links,
     IvyStyle Sans für Fließtext, Helvetica für kleine Versal-Labels. Fallbacks bis die Lizenzdateien vorliegen. */
  /* Erster Wert = vorgesehene Lizenzschrift, zweiter = Ersatz, der aktuell einspringt.
     Details und benoetigte Dateinamen siehe assets/fonts/fonts.css */
  --schrift-hl:"Gilroy","Red Hat Display",Helvetica,Arial,sans-serif;   /* Gilroy vorgesehen, aktuell Red Hat Display */
  --schrift:"IvyStyle Sans","Onest",Helvetica,Arial,sans-serif;        /* IvyStyle Sans vorgesehen, aktuell Onest */
  --schrift-label:"Helvetica Neue",Helvetica,Arial,sans-serif;         /* systemseitig vorhanden, kein Ersatz noetig */
  --mono:var(--schrift-label);
  --t-text:clamp(18px,1.25vw,24px);   /* Vorbild: 24rem, Zeilenabstand 1,2, Laufweite -5 Prozent */
  --t-lead:clamp(24px,1.67vw,32px);   /* Vorbild: 32rem */
  --t-15:15px; --t-18:18px; --t-20:20px; --t-24:24px; --t-30:30px;
  --t-38:38px; --t-47:47px; --t-59:59px; --t-74:74px;
  --r-4:4px; --r-8:8px; --r-12:12px; --r-16:16px; --r-24:24px;
  --r-32:32px; --r-48:48px; --r-64:64px; --r-96:96px; --r-128:128px;
  --ziel-min:48px; --feld-hoehe:56px; --knopf-hoehe:56px;
  --dauer-ui:240ms; --kurve:cubic-bezier(.2,0,0,1);
  --rand:clamp(20px,4.5vw,64px);
  --max:1500px;
  --kopf-hoehe:80px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--schrift);font-size:var(--t-text);line-height:1.2;letter-spacing:-.05em;text-align:left;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: hidden macht den Body zum Scrollbehaelter und setzt position:sticky
     in allen Kindern ausser Kraft. clip beschneidet genauso, ohne das zu tun (18.09.). */
  overflow-x:clip}
body.menue-offen{overflow:hidden}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
.rahmen{max-width:var(--max);margin:0 auto;padding-inline:var(--rand)}

/* ============================ INTRO (nach dem Gestaltungsvorbild) ============================ */
.intro-ebene{display:none;position:fixed;inset:0;z-index:90;background:var(--papier);overflow:hidden}
html.mit-intro .intro-ebene{display:block}
/* Während des Intros liegt der Claim über der Ebene, alles andere darunter */
html.mit-intro .hero-kopf .rahmen{z-index:95}
html.mit-intro .zeile{overflow:visible}
html.mit-intro .kopf,html.mit-intro .band{opacity:0}
.intro-rahmen{position:absolute;left:50%;bottom:var(--r-24);transform:translateX(-50%);
  width:14rem;height:5.5rem}
.intro-rahmen .ecke{position:absolute;width:14px;height:14px;background:var(--tinte-weich)}
.intro-rahmen .e1{left:0;top:0}.intro-rahmen .e2{right:0;top:0}
.intro-rahmen .e3{left:0;bottom:0}.intro-rahmen .e4{right:0;bottom:0}
.zaehler-maske{position:absolute;left:50%;bottom:0;transform:translateX(-50%);overflow:hidden;
  padding:0 .1em;line-height:1}
.zaehler{display:block;font-family:var(--schrift-label);font-size:var(--t-74);font-weight:400;letter-spacing:-.03em;color:var(--text-2);
  font-variant-numeric:tabular-nums;line-height:1;transform:translateY(100%)}
.claim .w{display:inline-block}

/* Sprungmarke: sichtbar nur bei Tastaturfokus */
.sprung{position:fixed;left:var(--r-16);top:-100px;z-index:100;background:var(--tinte);color:var(--weiss);
  font-weight:600;padding:0 var(--r-24);min-height:var(--ziel-min);display:inline-flex;align-items:center;
  transition:top var(--dauer-ui) var(--kurve)}
.sprung:focus-visible{top:var(--r-16)}

/* Register-Label — Mono, nur hier */
.register{font-family:var(--schrift-label);font-size:var(--t-18);font-weight:400;line-height:1.2;
  letter-spacing:0;text-transform:uppercase;color:var(--rot)}
.register .punkt{display:inline-block;width:5px;height:5px;background:currentColor;
  vertical-align:middle;margin:0 12px 2px 0}

/* ============================ KNÖPFE ============================ */
.knopf-primaer{font-family:var(--schrift-hl);font-weight:500;letter-spacing:.09em;font-size:var(--t-18);line-height:1.2;
  color:var(--weiss);background:var(--rot);border:0;border-radius:0;
  min-height:var(--ziel-min);padding:0 var(--r-24);
  display:inline-flex;align-items:center;gap:var(--r-12);cursor:pointer;
  box-shadow:0 2px 0 rgba(53,9,10,.20);
  transition:background var(--dauer-ui) var(--kurve);flex:none}
.knopf-primaer:hover{background:var(--rot-hover)}
.knopf-primaer:active{background:var(--rot-aktiv)}
.pfeil{transition:transform var(--dauer-ui) var(--kurve)}
a:hover > .pfeil{transform:translateX(4px)}
.knopf-primaer.gross{font-size:var(--t-20);min-height:var(--knopf-hoehe);padding:0 var(--r-32)}
@media(max-width:519px){
  .knopf-primaer.gross{font-size:var(--t-18);padding:0 var(--r-24);width:100%;justify-content:space-between}
}

/* ============================ KOPF ============================ */
.kopf{position:sticky;top:0;z-index:60;background:var(--papier);
  border-bottom:1px solid var(--linie)}
.kopf .inner{max-width:var(--max);margin:0 auto;padding-inline:var(--rand);
  height:var(--kopf-hoehe);display:flex;align-items:center;gap:var(--r-32)}

/* Logo: Bildmarke und Wortmarke getrennt, damit die Wortmarke in der Kopfzeile lesbar bleibt */
.logo{flex:none;display:flex;align-items:center;gap:var(--r-12);min-height:var(--ziel-min)}
.logo .bildmarke{height:44px;width:auto}
.logo .wortmarke{height:28px;width:auto}
@media(max-width:420px){.logo .wortmarke{display:none}}

/* Navigation nach dem Gestaltungsvorbild, Quellcode 15.09.):
   Größen relativ zur Bildschirmbreite wie im Original (18rem Schrift, 20rem Quadrat bei 1920, also 13,5px und 15px bei 1440),
   Quadrat links als ::after, beim Hover wächst es in 0,6 s auf die volle Breite hinter das Wort,
   die Schrift wird weiß. Hier in Markenrot statt Anthrazit (Feedback 15.09.). */
.navi{display:flex;justify-content:space-between;flex:1 1 auto;
  margin-left:clamp(var(--r-48),9vw,160px);margin-right:var(--r-16)}
.navi a{position:relative;z-index:0;font-family:var(--schrift-hl);font-weight:500;letter-spacing:.09em;color:var(--tinte-weich);
  font-size:clamp(13px,.94vw,18px);white-space:nowrap;line-height:1.2;
  padding:6px 2.1em 5px;min-height:var(--ziel-min);display:inline-flex;align-items:center;
  transition:color .6s cubic-bezier(.39,.52,0,1)}
.navi a::after{content:"";position:absolute;left:0;top:50%;width:1.5em;height:1.5em;transform:translateY(-50%);
  background:var(--rot);z-index:-1;transition:width .6s cubic-bezier(.39,.52,0,1)}
.navi a:hover,.navi a:focus-visible,.navi a[aria-current]{color:var(--weiss)}
.navi a:hover::after,.navi a:focus-visible::after,.navi a[aria-current]::after{width:100%}

.kopf-rechts{display:flex;align-items:center;gap:var(--r-16);margin-left:auto;flex:none}

/* Anrufen-Knopf: nur auf schmalen Bildschirmen, ersetzt die ausgeschriebene Nummer */
.kopf-anruf{display:none;align-items:center;gap:var(--r-8);min-height:var(--ziel-min);min-width:var(--ziel-min);
  padding:0 var(--r-16);border:1px solid var(--tinte);font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);
  transition:background var(--dauer-ui) var(--kurve),color var(--dauer-ui) var(--kurve)}
.kopf-anruf:hover{background:var(--tinte);color:var(--weiss)}

/* Menü-Knopf: zwei Striche, echtes Wort daneben */
.menue-knopf{display:none;align-items:center;gap:var(--r-12);min-height:var(--ziel-min);min-width:var(--ziel-min);
  padding:0 var(--r-16);background:transparent;border:0;border-radius:0;cursor:pointer;
  font-family:var(--schrift-hl);font-weight:500;letter-spacing:.09em;font-size:var(--t-18);color:var(--tinte)}
.menue-knopf .striche{display:flex;flex-direction:column;gap:6px;width:22px}
.menue-knopf .striche i{display:block;height:2px;background:currentColor}
.menue-knopf .kreuz{position:relative;width:22px;height:22px}
.menue-knopf .kreuz i{position:absolute;left:0;top:10px;width:22px;height:2px;background:currentColor}
.menue-knopf .kreuz i:first-child{transform:rotate(45deg)}
.menue-knopf .kreuz i:last-child{transform:rotate(-45deg)}

@media(max-width:1239px){
  .navi{display:none}
  .menue-knopf{display:inline-flex}
}
@media(max-width:899px){
  .kopf-anruf{display:inline-flex}
  .kopf .inner{gap:var(--r-16)}
  .kopf-rechts{gap:var(--r-8)}
}
@media(max-width:420px){
  .kopf-anruf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kopf-anruf{padding:0 12px}
}

/* ============================ MENÜ ============================ */
.menue{position:fixed;inset:0;z-index:70;background:var(--papier);overflow:auto;
  -webkit-overflow-scrolling:touch}
.menue[hidden]{display:none}
.menue-inner{max-width:var(--max);margin:0 auto;padding:0 var(--rand) var(--r-64);
  transform:translateY(-12px);transition:transform var(--dauer-ui) var(--kurve)}
.menue.auf .menue-inner{transform:none}
.menue-kopf{height:var(--kopf-hoehe);display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--linie)}
.menue-kopf .menue-knopf{display:inline-flex;margin-right:calc(var(--r-16) * -1)}
.menue-raster{display:grid;gap:var(--r-48);padding-top:var(--r-48)}
@media(min-width:900px){
  .menue-raster{grid-template-columns:1fr 1fr;gap:var(--r-96);padding-top:var(--r-64)}
}
.menue-navi .register,.menue-kontakt .register{margin-bottom:var(--r-24)}
.menue-navi ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menue-navi li{border-top:1px solid var(--linie)}
.menue-navi li:last-child{border-bottom:1px solid var(--linie)}
.menue-navi a{display:flex;align-items:baseline;gap:var(--r-24);font-family:var(--schrift-hl);text-transform:uppercase;
  padding:var(--r-16) 0;font-size:var(--t-24);font-weight:600;letter-spacing:-.07em;line-height:1.1;
  transition:color var(--dauer-ui) var(--kurve)}
@media(min-width:480px){.menue-navi a{font-size:var(--t-30)}}
@media(min-width:900px){.menue-navi a{font-size:var(--t-38);padding:var(--r-24) 0}}
.menue-navi a .nr{font-family:var(--mono);font-size:var(--t-15);font-weight:600;letter-spacing:.08em;
  color:var(--text-2);width:2.2em;flex:none;transition:color var(--dauer-ui) var(--kurve)}
.menue-navi a:hover{color:var(--rot)}
.menue-navi a:hover .nr{color:var(--rot)}

.menue-kontakt{display:flex;flex-direction:column;gap:var(--r-12)}
.tel-karte{display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:var(--feld-hoehe);padding:var(--r-12) var(--r-24);border:1px solid var(--linie-stark);
  background:var(--weiss);transition:border-color var(--dauer-ui) var(--kurve)}
.tel-karte:hover{border-color:var(--tinte)}
.tel-karte .nr{font-family:var(--schrift-label);font-weight:400;font-size:var(--t-24);letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.2}
.tel-karte .was{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.menue-kontakt .knopf-primaer{margin-top:var(--r-12);justify-content:space-between}
.menue-adresse{margin-top:var(--r-24);color:var(--text-2);line-height:1.2}
.menue-adresse a{color:var(--tinte);border-bottom:1px solid var(--linie-stark)}
.menue-adresse a:hover{border-bottom-color:var(--rot)}

/* ---------- Spaltengitter: Haarlinien bei 25, 50, 75 Prozent ---------- */
.gitter{position:absolute;inset:0;z-index:0;pointer-events:none}
.gitter i{position:absolute;top:0;bottom:0;width:1px;background:var(--linie)}
.gitter i:nth-child(1){left:25%}
.gitter i:nth-child(2){left:50%}
.gitter i:nth-child(3){left:75%}
@media(max-width:760px){.gitter i:nth-child(1),.gitter i:nth-child(3){display:none}}

/* ============================ HERO ============================ */
.hero{padding-top:0;padding-bottom:0}
.hero-kopf{position:relative;padding:clamp(16px,2.4vw,40px) 0 clamp(8px,.8vw,16px);
  border-bottom:1px solid var(--linie)}
.hero-kopf .rahmen{position:relative;z-index:1}
.hero-kopf .register{margin-bottom:var(--r-24)}
.hero-kopf .claim{padding-top:0}

/* Zwei versetzte Großzeilen — nur Werte aus der Skala */
/* Headline nach dem Gestaltungsvorbild, Quellcode 15.09.):
   Schnitt 600 auf Wunsch (Original 500), 140rem bei 1920 = 7,3vw, Zeilenabstand 1,2, Laufweite -7 Prozent, Versalien,
   erste Zeile 415rem eingerückt = 21,6 Prozent. Gilroy Medium ist lizenzpflichtig, deshalb Urbanist 500 als
   geometrischer Ersatz. Abweichung von Leitdatei Abschnitt 6 (nur Archivo, Skala bis 74, Schnitte 400/600/800), bewusst. */
.claim{font-family:var(--schrift-hl);font-size:var(--t-38);line-height:1.2;font-weight:600;
  text-transform:uppercase;letter-spacing:-.07em;word-spacing:.18em;display:flex;flex-direction:column;gap:0;text-wrap:balance}
@media(min-width:620px){.claim{font-size:var(--t-47)}}
@media(min-width:900px){.claim{font-size:clamp(56px,6.8vw,98px)}}
.zeile{display:block;overflow:hidden}
.zeile > span{display:block}
.zeile.versetzt{padding-left:0}
/* Versatz entfernt: die erste Zeile stand eingerueckt und wirkte verrutscht (Feedback 17.09.) */
.claim .rot{color:var(--rot)}

/* Bildband nach Referenz Vorbild: überlanges Bild, kleiner Textblock rechts,
   halbtransparent, hängt über die untere Bildkante. */
.band{position:relative;margin-top:clamp(16px,1.9vw,32px);padding-inline:var(--rand);max-width:var(--max);
  margin-inline:auto}
.bildplatz{position:relative;overflow:hidden;background:var(--stein);aspect-ratio:4/5}
@media(min-width:620px){.bildplatz{aspect-ratio:16/10}}
@media(min-width:900px){.bildplatz{aspect-ratio:auto;height:clamp(640px,110vh,1100px)}}
.bildinner{position:absolute;inset:0;will-change:transform;background:var(--stein)}
.bildinner img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.bildplatz .kennung{position:absolute;left:var(--r-24);top:var(--r-24);z-index:2;
  font-family:var(--mono);font-size:var(--t-15);letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);background:var(--weiss);border:1px solid var(--linie);padding:7px 11px;
  max-width:calc(100% - var(--r-48));line-height:1.5}

/* Textblock nach Referenz Vorbild: Milchglas ohne Kante, nur Text, sitzt mit 48px Abstand innerhalb des Bildes, Zeilen laufen maskiert ein.
   Abweichung von Leitdatei Abschnitt 5 (keine Weichzeichnung) auf Wunsch von Sascha, 15.09. */
.platte{position:relative;z-index:3;color:var(--tinte);
  background:rgba(228,226,221,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.05);backdrop-filter:blur(22px) saturate(1.05);
  padding:var(--r-32);display:flex;flex-direction:column;gap:var(--r-16);margin:0}
@supports not (backdrop-filter:blur(1px)){.platte{background:rgba(236,234,230,.94)}}
@media(min-width:900px){
  .band{display:grid}
  .bildplatz{grid-area:1/1}
  .platte{grid-area:1/1;align-self:end;justify-self:end;
    width:min(520px,40%);margin:0 var(--r-48) var(--r-48) 0;padding:var(--r-48);will-change:transform}
}
.platte .register{color:var(--tinte);letter-spacing:.14em}
.platte h2{font-family:var(--schrift);font-weight:400;font-size:var(--t-lead);line-height:1.2;letter-spacing:-.05em;text-wrap:balance}
.platte .leistungen{font-size:var(--t-20);line-height:1.45;color:var(--tinte)}
.platte .vorlauf{font-size:var(--t-text);color:var(--tinte);max-width:44ch}
.platte .aktionen{display:flex;flex-direction:column;gap:var(--r-8);margin:0}
.platte .aktionen > span{display:flex;flex-direction:column;gap:var(--r-8)}
/* Pfeillink nach dem Gestaltungsvorbild): Unterstrich läuft rechts raus und von links wieder rein,
   der Pfeil verlässt das Feld nach oben rechts, ein zweiter kommt von unten links nach. Kurve und Zeiten wie im Original.
   Abweichung von Leitdatei Abschnitt 7 (unter 300 ms) auf Wunsch von Sascha, 15.09. */
.pfeillink{--pf-kurve:cubic-bezier(.39,.52,0,1);
  position:relative;overflow:hidden;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--r-4) var(--r-12);
  width:max-content;max-width:100%;min-height:var(--ziel-min);padding:var(--r-4) 50px 5px 0;
  font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);letter-spacing:.09em;color:var(--tinte);align-self:flex-start}
.pfeillink .pf{position:absolute;right:0;top:50%;width:15px;height:15px;line-height:0;
  transform:translateY(-60%);transition:transform .8s var(--pf-kurve)}
.pfeillink .pf:last-child{transform:translate(-110%,230%)}
.pfeillink::before,.pfeillink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.pfeillink::before{transform:scaleX(1);transform-origin:left;transition:transform .8s var(--pf-kurve) .5s}
.pfeillink::after{transform:scaleX(0);transform-origin:right;transition:transform .8s var(--pf-kurve) 0s}
.pfeillink:hover::before,.pfeillink:focus-visible::before{transform:scaleX(0);transform-origin:right;transition:transform .3s var(--pf-kurve) 0s}
.pfeillink:hover::after,.pfeillink:focus-visible::after{transform:scaleX(1);transform-origin:left;transition:transform .8s var(--pf-kurve) .5s}
.pfeillink:hover .pf:first-of-type,.pfeillink:focus-visible .pf:first-of-type{transform:translate(120%,-170%)}
.pfeillink:hover .pf:last-child,.pfeillink:focus-visible .pf:last-child{transform:translateY(-60%);transition-delay:.5s}
.pfeillink .nr{white-space:nowrap;font-variant-numeric:tabular-nums}
.pfeillink .was{font-family:var(--schrift-label);font-size:var(--t-15);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
#heroCta{color:var(--rot)}

/* Maskierte Zeilen: das äußere Element ist die Maske, das innere läuft ein. Ohne JS steht alles. */
[data-maske]{overflow:hidden}
[data-maske] > span{display:block}
/* Zeilenmasken für den Textblock (SplitType, nach dem Vorbild) */
#platte .line{display:block;overflow:hidden}
#platte .line-inner{display:block}

/* ============================ TRUST ============================ */
/* Trust-Leiste sitzt zwischen Claim und Bildband, damit sie auf jedem Bildschirm im ersten Blick liegt */
.trust{border-bottom:1px solid var(--linie);background:var(--weiss)}
.trust .inner{max-width:var(--max);margin:0 auto;padding:var(--r-24) var(--rand);
  display:flex;align-items:center;gap:var(--r-32);flex-wrap:wrap}
.trust .hd{font-family:var(--mono);font-size:var(--t-15);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);flex:none}
.trust ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--r-32);flex-wrap:wrap}
.trust li{font-weight:800;font-size:var(--t-20);letter-spacing:-.01em}
.trust li span{display:block;font-family:var(--mono);font-size:var(--t-15);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-top:3px}
.trust li.offen{color:var(--linie-stark)}
.trust a{border-bottom:2px solid transparent;transition:border-color var(--dauer-ui) var(--kurve)}
.trust a:hover{border-bottom-color:var(--rot)}

/* ============================ ZAHLEN (nach dem Gestaltungsvorbild, .stats) ============================
   Werte aus deren CSS bei 1920: Zellen 84rem Innenabstand, obere Reihe 200rem oben / 131rem unten, Titel 109rem,
   Zähler 120rem in der Textschrift, Beschriftung 20rem fett mit 19 Prozent Sperrung, Titelzelle 145rem eingerückt. */
.zahlen{position:relative;background:var(--papier)}
.zahlen .ecke{position:absolute;width:14px;height:14px;background:var(--tinte-weich)}
.zahlen .e1{left:calc(var(--rand) + 20px);top:clamp(32px,3.5vw,68px)}.zahlen .e2{right:calc(var(--rand) + 20px);top:clamp(32px,3.5vw,68px)}
.zahlen .e3{left:calc(var(--rand) + 20px);bottom:clamp(20px,1.5vw,30px)}.zahlen .e4{right:calc(var(--rand) + 20px);bottom:clamp(20px,1.5vw,30px)}
/* Raster liegt im Seitenrahmen, bündig mit dem Hero-Bild (Feedback 15.09.); Haarlinien links und rechts schließen es ab */
.zahlen-raster{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linie);border-top:0}
.zelle{border-right:1px solid var(--linie);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(40px,4.4vw,84px) 0;position:relative}
.zelle:nth-child(4n){border-right:0}
.zahlen-titel,.zahlen-haupt,.zahlen-text{padding-top:clamp(100px,10.4vw,200px);padding-bottom:clamp(50px,6.8vw,131px);border-bottom:1px solid var(--linie)}
.zahlen-titel{grid-column:1 / span 2;align-items:flex-start;padding-left:clamp(16px,3vw,56px)}
.zahlen-titel h2{margin:0;font-family:var(--schrift-hl);font-weight:600;font-size:clamp(34px,5.7vw,109px);line-height:1.2;
  letter-spacing:-.02em;word-spacing:.18em;text-transform:uppercase;color:var(--tinte)}
.zahlen-titel h2 > span{display:block}
.zahlen-titel h2 .zeile-2{overflow:hidden}
.zahlen-titel h2 .w-1,.zahlen-titel h2 .w-2{display:inline-block}
.zahlen-titel h2 .maske{display:inline-block;overflow:hidden;vertical-align:top}  /* nur statt läuft maskiert, Zahlen kommt ganz von links (Feedback 15.09.) */
.zahlen-titel h2 .rot{color:var(--rot)}
.zahlen-haupt{grid-column:3}
.zahlen-text{grid-column:4;align-items:flex-start;justify-content:center}
.zahlen-text p{margin:0;padding:0 clamp(12px,.8vw,15px);font-family:var(--schrift);font-weight:400;font-size:var(--t-text);
  line-height:1.2;letter-spacing:-.05em;text-transform:uppercase;text-align:left;max-width:34ch}
.zaehler{font-family:var(--schrift);font-weight:400;font-size:clamp(50px,6.25vw,120px);line-height:1.2;letter-spacing:-.07em;
  color:var(--rot);display:inline-flex;overflow:hidden;font-variant-numeric:tabular-nums}
.zahlen .zaehler{transform:none}   /* hebt die Intro-Regel .zaehler{transform:translateY(100%)} auf */
.ziffer{display:inline-grid;overflow:hidden}
.ziffer > span{grid-area:1/1;display:block}
.ziffer .neu{transform:translateY(-100%)}
.zahlen-zahl p{margin:clamp(8px,1vw,20px) auto 0;width:min(100%,60%);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(12px,1.04vw,20px);
  line-height:1.2;letter-spacing:.19em;text-transform:uppercase;text-align:center;color:var(--tinte)}
.zahl-folgt{margin-top:var(--r-8);font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rot);border:1px dashed var(--rot);padding:2px 8px}
@media(max-width:768px){
  .zahlen-raster{display:flex;flex-wrap:wrap;border:0}
  .zahlen .rahmen{padding-inline:var(--rand)}
  .zelle{border:0;padding:20px 0}
  .zahlen-titel,.zahlen-haupt,.zahlen-text{padding:0;border:0}
  .zahlen-titel{width:100%;padding:0 0 30px;order:0}
  .zahlen-haupt{order:1}
  .zahlen-zahl:not(.zahlen-haupt){order:2}
  .zahlen-text{width:100%;order:3;margin-bottom:24px}
  .zahlen-text p{padding:0;max-width:none}
  .zahlen-zahl{width:50%;margin-bottom:20px}
  .zahlen .ecke{display:none}
}

/* ============================ WIRKUNGSKREIS (nach dem Gestaltungsvorbild, .ceo) ============================
   Werte aus deren CSS bei 1920 Bezugsbreite: Sektion 174rem oben / 250rem unten, Bild 916rem breit,
   große Wörter 140rem, Orte 90 / 70 / 60rem, Titel darunter mittig. Hier auf vw umgerechnet. */
.kreis{padding:clamp(48px,6vw,110px) 0 clamp(16px,2vw,40px);background:var(--papier)}  /* Abstaende verringert (Feedback 16.09.) */
.kreis-buehne{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kreis-bild--karte{order:2}
.kreis-oben{order:1}
.kreis-bild{position:relative;z-index:2;width:min(100%,47.7vw)}
.kreis-karte{width:100%;height:auto;display:block;filter:grayscale(1)}
/* Das Bild läuft rechts unten und oben links nach Papier aus, damit die Orte und die großen Wörter
   beim Start genug Kontrast haben (Feedback 15.09.) */
.kreis-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top left,var(--papier) 0%,rgba(249,248,246,.92) 18%,rgba(249,248,246,.55) 34%,transparent 55%),
    linear-gradient(to bottom,rgba(249,248,246,.92) 0%,rgba(249,248,246,.7) 14%,transparent 34%)}
.kreis-text{position:absolute;z-index:3;display:flex;margin:0;
  font-family:var(--schrift-hl);font-weight:600;font-size:clamp(56px,6.8vw,98px);line-height:1.2;
  letter-spacing:-.02em;word-spacing:.18em;text-transform:uppercase}  /* lockerer als die Hero-Headline (Feedback 15.09.) */
.kreis-text p{margin:0;white-space:nowrap;flex:none}  /* einzeilig halten (Feedback 16.09.) */
.kreis-oben{top:0;left:50%;transform:translateX(-50%);white-space:nowrap}
.kreis-oben .kreis-links{color:var(--tinte)}
.kreis-oben .kreis-rechts{color:var(--rot);margin-left:.18em}
.kreis-unten{position:static;flex-direction:column;align-items:flex-end;align-self:stretch;text-align:right;
  color:var(--rot);order:3;margin-top:clamp(-120px,-8.5vw,-44px)}  /* Wolfsburg ueberlappt die Karte leicht, bleibt aber von den Markern weg (Feedback 16.09.) */
.kreis-unten p{font-size:clamp(34px,4.7vw,90px);margin-bottom:clamp(6px,.5vw,10px);white-space:nowrap}
.kreis-unten p:nth-child(2){font-size:clamp(28px,3.65vw,70px)}
.kreis-unten p:nth-child(3){font-size:clamp(22px,3.1vw,60px);margin-bottom:0}



@media(max-width:768px){
  .kreis-buehne{align-items:flex-start}
  .kreis-text{position:static;transform:none}
  .kreis-oben{order:2;flex-direction:row;margin-top:var(--r-16)}
  .kreis-unten{order:3;align-self:flex-end;margin-top:var(--r-8)}
  .kreis-bild{order:1;width:100%}
  .kreis-bild::after{display:none}

  
}

/* ============================ IMAGEFILM + VERMARKTUNGSSTANDARD ============================ */
.film{padding:clamp(32px,4vw,80px) 0 clamp(56px,7vw,120px);background:var(--papier)}
.film-titel{margin:var(--r-16) 0 clamp(24px,3vw,56px);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(34px,5.7vw,109px);
  line-height:1.15;letter-spacing:-.02em;word-spacing:.18em;text-transform:uppercase;color:var(--tinte);max-width:14ch}
.film-titel .rot{color:var(--rot)}
.film-box{position:relative;width:100%;aspect-ratio:16/9;background:var(--stein);overflow:hidden;transform-origin:center;will-change:transform}
.film-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-platzhalter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(17,16,14,.05) 22px 23px),
    var(--stein)}
.film-kennung{position:absolute;left:var(--r-24);top:var(--r-24);font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.08em;text-transform:uppercase;color:var(--rot);border:1px dashed var(--rot);padding:4px 10px;background:var(--papier)}
.film-play{width:clamp(64px,7vw,120px);height:clamp(64px,7vw,120px);background:var(--rot);position:relative}
.film-play::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
  border-left:clamp(22px,2.4vw,40px) solid var(--weiss);border-top:clamp(13px,1.4vw,24px) solid transparent;border-bottom:clamp(13px,1.4vw,24px) solid transparent}
.film-steuerung{position:absolute;right:var(--r-24);bottom:var(--r-24);display:flex;gap:var(--r-8)}
.film-knopf{min-height:var(--ziel-min);padding:0 var(--r-16);background:var(--papier);color:var(--tinte);border:1px solid var(--linie-stark);
  font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-15);letter-spacing:.09em;cursor:pointer}
.film-knopf[disabled]{opacity:.5;cursor:default}
.leistungen{list-style:none;margin:clamp(40px,5vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.leistungen li{position:relative;z-index:0;display:flex;flex-direction:column;gap:var(--r-12);padding:var(--r-24) var(--r-24) var(--r-24) calc(var(--r-24) + 20px + var(--r-12));
  min-height:clamp(120px,10vw,180px);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);
  font-family:var(--schrift);font-size:var(--t-text);line-height:1.2;letter-spacing:-.05em;color:var(--tinte);
  transition:color .6s cubic-bezier(.39,.52,0,1)}
/* Rotes Quadrat neben der Nummer, füllt beim Hover die ganze Zelle, wie im Menü (Feedback 15.09.) */
.leistungen li::before{content:"";position:absolute;left:var(--r-24);top:var(--r-24);width:20px;height:20px;background:var(--rot);z-index:-1;
  transition:width .6s cubic-bezier(.39,.52,0,1),height .6s cubic-bezier(.39,.52,0,1),left .6s cubic-bezier(.39,.52,0,1),top .6s cubic-bezier(.39,.52,0,1)}
.leistungen li:hover{color:var(--weiss)}
.leistungen li:hover::before{left:0;top:0;width:100%;height:100%}
.leistungen .nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;color:var(--rot);line-height:20px;
  transition:color .6s cubic-bezier(.39,.52,0,1)}
.leistungen li:hover .nr{color:var(--weiss)}
@media(max-width:768px){
  .leistungen{grid-template-columns:1fr 1fr}
  .film-steuerung{position:static;margin-top:var(--r-8)}
  .film-box{overflow:visible}
}
@media(max-width:520px){.leistungen{grid-template-columns:1fr}}

.angebote{padding:clamp(64px,8vw,150px) 0;background:var(--papier)}
.angebote-kopf{display:grid;gap:var(--r-16);margin-bottom:clamp(32px,4vw,64px)}
@media(min-width:820px){.angebote-kopf{grid-template-columns:1.1fr 1fr;align-items:end;gap:clamp(24px,4vw,64px)}}
.angebote-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(28px,3.2vw,52px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.angebote-lead{margin:0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.35;letter-spacing:-.02em;color:var(--text-2);max-width:46ch;align-self:end}

/* ============================ REFERENZ-KARTEN (1:1 nach das Rastervorbild Bau, 16.09.) ============================
   12-Spalten-Grid, jede Karte aspect-ratio 4/3, keine Zeilenhöhen-Tricks, deshalb nie gequetscht.
   card--w = 7 Spalten, card--n = 5, card--t = 4. Verlauf, Hover-Zoom und Fakten-Layout 1:1 aus deren CSS. */
.grid-referenzen{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,24px)}
.card{position:relative;display:block;overflow:hidden;background:var(--stein);color:var(--weiss);aspect-ratio:4/3;isolation:isolate;grid-column:span 12}
@media(min-width:760px){
  .card--w{grid-column:span 7}
  .card--n{grid-column:span 5}
  .card--t{grid-column:span 4}
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.39,.52,0,1);z-index:0}
.card:hover img,.card:focus-visible img{transform:scale(1.04)}
.card__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(53,9,10,0) 40%,rgba(53,9,10,.82) 100%);z-index:1}
.card__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,32px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;z-index:2}
.card__city{display:block;font-family:var(--schrift-label);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.card__name{display:block;margin:8px 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(17px,1.5vw,24px);line-height:1.25;text-transform:uppercase}
.card__fact{font-family:var(--schrift-label);font-size:13px;line-height:1.35;text-align:right;white-space:nowrap}
.card__fact b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:700;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
/* typografische Kachel (Störer) ohne Bild */
.card--type{background:var(--rot);color:var(--weiss)}
.card__big{position:absolute;left:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);
  font-family:var(--schrift-hl);font-weight:800;font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.card__big small{display:block;font-family:var(--schrift-label);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;opacity:.9}
.card .bento-kreis{width:clamp(130px,10vw,190px);height:clamp(130px,10vw,190px)}  /* gleich groß wie der CTA-Button (Feedback 16.09.) */

/* ============================ TEAM (nach dem Gestaltungsvorbild, .team) ============================
   Werte aus deren CSS bei 1920: inaktiver Block 390rem breit, Bild 390×380, aktiver Block 830rem, Bild 350×615, Text 450rem,
   Rahmen 1rem #dedede, Blöcke unten bündig. Übergänge: Breite 0,8 s (aktiv 0,5 s mit 0,5 s Verzögerung), Bild 1,3 s,
   Inhalt und Links blenden nach 1 s in 0,8 s ein, Name und Rolle rutschen maskiert nach unten weg. Kurve cubic-bezier(.39,.52,0,1). */
.team{padding:clamp(36px,4vw,72px) 0 clamp(88px,10vw,180px);background:var(--papier);overflow-x:hidden}  /* mehr Luft unten (Feedback 16.09.) */
.team-titel{margin:var(--r-16) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.65vw,70px);line-height:1.15;letter-spacing:-.02em;
  word-spacing:.18em;text-transform:uppercase;color:var(--tinte);max-width:16ch}  /* schwarz mit rotem Akzent, kürzer und ohne Einzug (Feedback 15.09.) */
.team-titel .rot{color:var(--rot)}
.team-vorlauf{margin:var(--r-24) 0 0;font-family:var(--schrift);font-size:var(--t-lead);line-height:1.2;letter-spacing:-.05em;color:var(--tinte);max-width:40ch}
.team-inhalt{display:flex;align-items:flex-end;margin-top:clamp(50px,5.2vw,100px);--k:cubic-bezier(.39,.52,0,1)}
.team-block{position:relative;border:1px solid var(--linie);padding:clamp(20px,2.1vw,40px) clamp(16px,1.56vw,30px);width:clamp(220px,20.3vw,390px);
  transition:width .8s var(--k) 0s;outline:none}
.team-block .ecke{position:absolute;width:12px;height:12px;background:var(--tinte-weich);opacity:0;transition:opacity .1s var(--k)}
.team-block .ecke:nth-child(1){left:10px;top:10px}.team-block .ecke:nth-child(2){right:10px;top:10px}
.team-block .ecke:nth-child(3){left:10px;bottom:10px}.team-block .ecke:nth-child(4){right:10px;bottom:10px}
.team-block__wrapper{display:flex}
.team-block__image{width:clamp(200px,20.3vw,390px);height:clamp(200px,19.8vw,380px);object-fit:cover;object-position:50% 12%;display:block;
  transition:width 1.3s var(--k),height 1.3s var(--k)}
.team-block__content{position:absolute;right:clamp(16px,1vw,20px);top:0;margin-left:clamp(24px,2.9vw,55px);margin-top:clamp(40px,4.2vw,80px);width:clamp(220px,21vw,410px);
  opacity:0;pointer-events:none;transition:opacity .1s var(--k) 0s}
.team-block__content h3{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(20px,1.67vw,32px);line-height:1.2;text-transform:uppercase;color:var(--tinte)}
.team-block__content .rolle{margin:4px 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(13px,1.04vw,20px);line-height:1.2;text-transform:uppercase;color:var(--tinte)}
.team-block__content .text{margin:clamp(24px,2.9vw,55px) 0 0;font-family:var(--schrift);font-weight:400;font-size:var(--t-text);line-height:1.2;letter-spacing:-.05em;color:var(--tinte)}
.team-block__name-vor,.team-block__rolle-vor{overflow:hidden}
.team-block__name-vor{margin:5px 0}
.team-block__name-vor span,.team-block__rolle-vor span{display:block;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(18px,1.46vw,28px);line-height:1.2;
  text-transform:uppercase;color:var(--tinte);transition:transform 1.3s var(--k)}
.team-block__rolle-vor span{font-weight:700;font-size:clamp(12px,1.04vw,20px)}
.team-block__links{position:absolute;bottom:clamp(20px,1.8vw,35px);left:50%;width:clamp(560px,43.2vw,830px);transform:translateX(-50%);
  display:flex;justify-content:space-between;padding:0 clamp(24px,2.1vw,40px);opacity:0;z-index:-1;transition:opacity .1s var(--k) 0s}
.team-block__links .pfeillink{font-size:var(--t-15)}
/* aktiver Block */
.team-block-aktiv{width:clamp(560px,43.2vw,830px)!important;transition:width .5s var(--k) .5s}
.team-block-aktiv .ecke{opacity:1}
.team-block-aktiv .team-block__image{width:clamp(180px,18.2vw,350px);height:clamp(320px,32vw,615px)}
.team-block-aktiv .team-block__content{opacity:1;pointer-events:auto;transition:opacity .8s var(--k) 1s}
.team-block-aktiv .team-block__links{opacity:1;overflow:hidden;z-index:1;transition:opacity .8s var(--k) 1s}
.team-block-aktiv .team-block__name-vor span,.team-block-aktiv .team-block__rolle-vor span{transform:translateY(100%)}
@media(max-width:768px){
  .team-inhalt{flex-direction:column;align-items:stretch;gap:var(--r-16)}
  .team-block,.team-block-aktiv{width:100%!important;padding:0}
  .team-block__wrapper{flex-direction:column;padding:30px 20px 0}
  .team-block__image,.team-block-aktiv .team-block__image{width:100%;height:320px}
  .team-block__content{opacity:1;position:relative;right:0;margin:15px 0 0;width:100%;pointer-events:auto}
  .team-block__name-vor,.team-block__rolle-vor{display:none}
  .team-block__links{position:relative;left:0;bottom:0;width:auto;transform:none;opacity:1;z-index:1;padding:20px 20px 30px;flex-wrap:wrap;gap:var(--r-12)}
  .team-block .ecke{opacity:1;width:8px;height:8px;left:5px;top:5px}
  .team-block .ecke:nth-child(2){left:auto;right:5px}.team-block .ecke:nth-child(3){top:auto;bottom:5px}.team-block .ecke:nth-child(4){left:auto;top:auto;right:5px;bottom:5px}
}


/* ============================ TEAM-MEHR · Panorama (16.09.) ============================
   Eigenständige Sektion, keine rote Kette zu Kontakt/Störer. Echtes Foto, Graustufen, dunkler Verlauf. */
.team-mehr{background:var(--papier)}
.tm-panorama{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--stein)}
.tm-panorama img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tm-panorama::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(53,9,10,.92) 0%,rgba(53,9,10,.68) 32%,rgba(53,9,10,.15) 60%,transparent 78%)}
.tm-panorama-text{position:absolute;left:var(--rand);top:50%;transform:translateY(-50%);z-index:1;max-width:22ch}
.tm-panorama-text .register{color:rgba(255,255,255,.8)}
.tm-panorama-text .register::before{background:var(--weiss)}
.tm-panorama-titel{margin:var(--r-12) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(28px,3.6vw,56px);line-height:1.12;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--weiss)}
.tm-panorama-titel .rot{color:var(--rot-hell)}  /* Rot Hell statt Anker-Rot: fuer dunklen Grund vorgesehen, besser lesbar (Feedback 16.09.) */
@media(max-width:640px){.tm-panorama{aspect-ratio:4/5}}

/* ============================ KUNDENSTIMMEN · final (16.09.) ============================
   Fünf echte Videostimmen von Vimeo, Thumbnails ueber die oeffentliche oEmbed-API, Graustufen. Nur noch
   die finale Gestaltung: Liste mit Ueberlagerungs-Effekt links, sticky Vorschau rechts. */
.kundenstimmen{background:var(--papier);padding:clamp(64px,8vw,150px) 0}
.ks-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(28px,3.4vw,56px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.ks-titel .rot{color:var(--rot)}
.ks-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:var(--rot);color:var(--weiss);display:flex;align-items:center;justify-content:center;z-index:2;
  transition:transform .5s cubic-bezier(.39,.52,0,1),background .3s}

/* --- Kundenstimmen-Liste, Technik + Optik nach dem Gestaltungsvorbild):
   jede Zeile ist sticky und schiebt sich ueber die vorherige; die aktive Zeile ist farbig hinterlegt,
   ihre Nummer gross und in Markenrot, die inaktiven Nummern hellgrau (Feedback 16.09.). --- */
.ks-d-kopf{padding-bottom:clamp(24px,3vw,40px)}
.ks-d-layout{display:grid;gap:clamp(20px,3vw,40px)}
@media(min-width:900px){.ks-d-layout{grid-template-columns:1fr 1.05fr;align-items:start}}
.ks-d-liste{display:flex;flex-direction:column}
.ks-d-slot{min-height:42vh}
.ks-d-liste .ks-d-slot:last-child{min-height:0}  /* endet direkt nach der Zeile, damit Liste und Bild unten buendig abschliessen (Feedback 16.09.) */
.ks-d-zeile{position:sticky;top:26vh;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,2vw,32px);padding:clamp(28px,3.6vh,44px) clamp(16px,2vw,28px);border:0;border-top:1px solid var(--linie);
  background:var(--papier);cursor:pointer;text-align:left;width:100%;
  transition:background .6s cubic-bezier(.39,.52,0,1)}
.ks-d-liste .ks-d-slot:last-child .ks-d-zeile{border-bottom:1px solid var(--linie)}
/* aktive Zeile: farbige Flaeche wie im Vorbild, hier im Markenrot-Schleier statt Blau */
.ks-d-zeile.aktiv{background:var(--rot-schleier)}
/* grosse Nummer, grau im Ruhezustand, rot wenn aktiv */
.ks-d-nr{font-family:var(--schrift-label);font-weight:400;font-size:var(--t-15);line-height:1;letter-spacing:.14em;
  color:var(--linie-stark);flex:none;align-self:center;transition:color .6s cubic-bezier(.39,.52,0,1)}
.ks-d-zeile.aktiv .ks-d-nr{color:var(--rot)}
.ks-d-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ks-d-name{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.4vw,54px);line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--tinte);transition:color .6s cubic-bezier(.39,.52,0,1)}
.ks-d-zeile.aktiv .ks-d-name{color:var(--rot)}
.ks-d-rolle{font-family:var(--schrift-label);font-size:var(--t-15);color:var(--text-2)}
.ks-d-hinweis{font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-15);letter-spacing:.06em;color:var(--text-2);
  flex:none;transition:color .3s,transform .3s}
.ks-d-zeile:hover .ks-d-hinweis,.ks-d-zeile.aktiv .ks-d-hinweis{color:var(--rot);transform:translateX(4px)}
/* Vorschau rechts, auf Hoehe der aktiven Zeile angeklebt */
.ks-d-vorschau{position:sticky;top:22vh;overflow:hidden;aspect-ratio:16/10;background:var(--stein);cursor:pointer;
  margin-right:clamp(0px,3vw,32px)}
.ks-d-vorschau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.39,.52,0,1),opacity .3s}
.ks-d-vorschau:hover img{transform:scale(1.04)}  /* gleicher Zoom wie bei den Objektkarten (Feedback 16.09.) */
.ks-d-vorschau::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(53,9,10,.8) 0%,rgba(53,9,10,.1) 45%,transparent 65%)}
.ks-d-play{width:72px;height:72px;transition:transform .5s cubic-bezier(.39,.52,0,1)}
.ks-d-vorschau:hover .ks-d-play{transform:translate(-50%,-50%) scale(1.1)}
.ks-d-info{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(16px,2vw,28px);display:flex;flex-direction:column;gap:2px}
.ks-d-info .ks-name{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(18px,1.6vw,26px);text-transform:uppercase;color:var(--weiss)}
.ks-d-info .ks-rolle{font-family:var(--schrift-label);font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.85)}
.ks-d-vorschau iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
@media(max-width:900px){.ks-d-vorschau{order:-1;position:static}.ks-d-slot{min-height:0}.ks-d-zeile{position:static}}

/* ============================ IHRE SITUATION (16.09., final: Register) ============================ */



.situation{background:var(--papier);padding:clamp(80px,10vw,190px) 0 clamp(64px,8vw,150px)}  /* mehr Luft oben (Feedback 16.09.) */

.sit-kopf{padding-bottom:clamp(32px,4vw,56px)}

.sit-titel-gross{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.6vw,60px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.sit-titel-gross .rot{color:var(--rot)}
.sit-lead{margin:var(--r-16) 0 0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.35;letter-spacing:-.02em;
  color:var(--text-2);max-width:56ch}

/* Register: Langtext klappt beim Hover oder Tastaturfokus auf */
.sit-liste{display:flex;flex-direction:column}
.sit-zeile{position:relative;z-index:0;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:clamp(16px,2vw,32px);padding:clamp(20px,2.6vh,32px) clamp(12px,1.6vw,24px);border-top:1px solid var(--linie);
  color:var(--tinte);transition:color .5s cubic-bezier(.39,.52,0,1)}
.sit-liste .sit-zeile:last-child{border-bottom:1px solid var(--linie)}
.sit-zeile::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rot);transform:translateY(101%);
  transition:transform .6s cubic-bezier(.39,.52,0,1)}
.sit-zeile:hover::before,.sit-zeile:focus-visible::before{transform:translateY(0)}
.sit-zeile:hover,.sit-zeile:focus-visible{color:var(--weiss)}
.sit-nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;color:var(--rot);padding-top:.35em;
  transition:color .5s cubic-bezier(.39,.52,0,1)}
.sit-zeile:hover .sit-nr,.sit-zeile:focus-visible .sit-nr{color:rgba(255,255,255,.8)}
.sit-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.sit-titel{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(22px,2.2vw,34px);line-height:1.12;
  letter-spacing:-.02em;text-transform:uppercase}
.sit-kurz{font-family:var(--schrift);font-size:var(--t-text);line-height:1.3;letter-spacing:-.02em;color:var(--text-2);
  transition:color .5s cubic-bezier(.39,.52,0,1)}
.sit-zeile:hover .sit-kurz,.sit-zeile:focus-visible .sit-kurz{color:rgba(255,255,255,.9)}
/* Langtext erscheint erst beim Hover -- Inhalt bleibt im Quelltext, also auch ohne Hover lesbar (Leitdatei: keine Funktion nur im Hover) */
.sit-lang{font-family:var(--schrift);font-size:var(--t-15);line-height:1.4;letter-spacing:-.01em;color:rgba(255,255,255,.92);
  max-width:74ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.39,.52,0,1),opacity .4s,margin .4s}
.sit-zeile:hover .sit-lang,.sit-zeile:focus-visible .sit-lang{max-height:12em;opacity:1;margin-top:var(--r-8)}
.sit-pfeil{font-size:var(--t-24);padding-top:.1em;transition:transform .45s cubic-bezier(.39,.52,0,1)}
.sit-zeile:hover .sit-pfeil,.sit-zeile:focus-visible .sit-pfeil{transform:translateX(8px)}









.sit-fuss{padding-top:clamp(24px,3vw,40px)}
.sit-fuss p{margin:0;font-family:var(--schrift-label);font-size:var(--t-15);line-height:1.6;color:var(--text-2);max-width:78ch}

/* ============================ ABLAUF IN ACHT SCHRITTEN (16.09.) ============================
   Fortschrittslinie links waechst beim Scrollen mit (GSAP ScrollTrigger, scrub). Jeder Schritt
   klappt auf Klick auf. Schritt 08 ist der rote Abschluss statt eines weiteren Listenpunkts. */
.ablauf{background:var(--papier);padding:clamp(64px,8vw,150px) 0}
.ab-kopfbereich{padding-bottom:clamp(32px,4vw,64px)}
.ab-titel-gross{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.6vw,60px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.ab-titel-gross .rot{color:var(--rot)}
.ab-lead{margin:var(--r-16) 0 0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.35;letter-spacing:-.02em;
  color:var(--text-2);max-width:52ch}
.ab-bereich{position:relative}
/* Fortschrittsspur: duenne Linie, die beim Scrollen mitwaechst */
.ab-spur{position:absolute;left:clamp(14px,2.2vw,34px);top:0;bottom:0;width:2px;background:var(--linie);z-index:0}
.ab-spur-fuellung{position:absolute;left:0;top:0;width:100%;height:0;background:var(--rot);transform-origin:top}
.ab-liste{position:relative;z-index:1;display:flex;flex-direction:column}
.ab-schritt{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,40px);align-items:start;
  padding:clamp(16px,2vh,26px) 0}
.ab-nr{position:relative;width:clamp(30px,4.4vw,70px);flex:none;font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.14em;color:var(--text-2);padding-top:.95em;transition:color .5s cubic-bezier(.39,.52,0,1)}
/* Punkt auf der Spur */
.ab-nr::before{content:"";position:absolute;left:calc(clamp(14px,2.2vw,34px) - 5px);top:1em;width:12px;height:12px;border-radius:50%;
  background:var(--papier);border:2px solid var(--linie);transition:border-color .5s,background .5s;z-index:2}
.ab-schritt.erreicht .ab-nr{color:var(--rot)}
.ab-schritt.erreicht .ab-nr::before{border-color:var(--rot);background:var(--rot)}
.ab-inhalt{min-width:0}
/* zwei Zeilen links (Titel, Kurztext), Plus rechts aussen */
.ab-kopf{display:grid;grid-template-columns:1fr auto;grid-template-areas:"titel plus" "kurz plus";
  align-items:center;gap:2px var(--r-16);width:100%;
  border:0;border-top:1px solid var(--linie);background:transparent;cursor:pointer;text-align:left;
  padding:clamp(14px,1.8vh,22px) 0}
.ab-titel{grid-area:titel;display:block;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(20px,2vw,32px);
  line-height:1.12;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte);transition:color .4s}
.ab-kurz{grid-area:kurz;display:block;font-family:var(--schrift);font-size:var(--t-15);line-height:1.35;
  letter-spacing:-.01em;color:var(--text-2)}
/* Plus-Zeichen, dreht sich beim Aufklappen zum Minus */
.ab-plus{grid-area:plus;position:relative;width:22px;height:22px;flex:none}
.ab-plus::before,.ab-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--rot);
  transition:transform .45s cubic-bezier(.39,.52,0,1)}
.ab-plus::before{width:16px;height:2px;transform:translate(-50%,-50%)}
.ab-plus::after{width:2px;height:16px;transform:translate(-50%,-50%)}
.ab-kopf[aria-expanded="true"] .ab-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ab-kopf:hover .ab-titel{color:var(--rot)}
.ab-detail{overflow:hidden;height:0}
.ab-detail p{margin:0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.4;letter-spacing:-.01em;
  color:var(--text-2);max-width:66ch;padding-top:var(--r-12)}
.ab-dauer{padding-top:var(--r-8)}
.ab-dauer-kennung{display:inline-block;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rot);border:1px dashed var(--rot);padding:3px 9px}
/* Schritt 08: roter Abschluss */
.ab-schritt--ziel{padding-top:clamp(20px,2.6vh,32px)}
.ab-ziel{background:var(--rot);color:var(--weiss);padding:clamp(28px,3.4vw,56px);display:flex;flex-direction:column;gap:var(--r-8)}
.ab-ziel .ab-titel{color:var(--weiss);font-size:clamp(26px,2.8vw,44px)}
.ab-ziel .ab-kurz{color:rgba(255,255,255,.85);font-size:var(--t-18)}
.ab-ziel-text{margin:var(--r-12) 0 0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.4;
  color:rgba(255,255,255,.92);max-width:60ch}
.ab-ziel-link{align-self:start;margin-top:var(--r-16);color:var(--weiss)}
.ab-ziel-link::before,.ab-ziel-link::after{background:var(--weiss)}
.ab-schritt--ziel .ab-nr{color:var(--rot)}
@media(max-width:640px){
  .ab-spur{left:6px}
  .ab-nr{width:26px;font-size:12px}
  .ab-nr::before{left:1px;width:10px;height:10px}
}

/* --- Ablauf Variante B: Selbstauswahl, nicht relevante Schritte treten zurueck --- */



.abb-wahl{display:flex;flex-wrap:wrap;gap:var(--r-8);margin-top:clamp(20px,2.4vw,32px)}
.abb-knopf{min-height:52px;padding:0 clamp(16px,2vw,28px);border:1px solid var(--linie-stark);background:transparent;cursor:pointer;
  font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-15);letter-spacing:.04em;color:var(--tinte);
  transition:background .4s,color .4s,border-color .4s}
.abb-knopf:hover{border-color:var(--rot);color:var(--rot)}
.abb-knopf.aktiv{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.abb-liste{display:flex;flex-direction:column;margin-top:clamp(24px,3vw,48px)}
.abb-schritt{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,40px);align-items:baseline;
  padding:clamp(16px,2vh,26px) 0;border-top:1px solid var(--linie)}
.abb-liste .abb-schritt:last-child{border-bottom:1px solid var(--linie)}
.abb-nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;color:var(--text-2)}
.abb-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.abb-titel{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(20px,2vw,32px);line-height:1.12;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.abb-kurz{font-family:var(--schrift);font-size:var(--t-15);line-height:1.35;color:var(--text-2)}
/* aktiver Bereich hervorgehoben, Rest tritt zurueck */
.abb-schritt.relevant .abb-nr{color:var(--rot)}
.abb-schritt.relevant .abb-titel{color:var(--rot)}
.abb-hinweis{margin:clamp(20px,2.4vw,32px) 0 0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.4;
  color:var(--text-2);max-width:60ch}

/* --- D: waagerechter Zeitstrahl, Sektion bleibt beim Scrollen stehen --- */
/* Waagerechter Ablauf ohne GSAP-Pinning: hohe Huelle + CSS-sticky Innenbereich.
   CSS-sticky erzeugt keinen Platzhalter und veraendert die Seitenhoehe nicht, deshalb kann es
   die Positionen der Nachbarsektionen nicht verschieben. Die Verschiebung nach links wird direkt
   aus der Scrollposition gerechnet (16.09., nach vier Fehlversuchen mit pin). */
.hor-buehne{position:relative;height:340vh}
.hor-innen{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(14px,2vh,28px);padding:clamp(6px,0.8vh,14px) 0 clamp(8px,1vh,16px)}
.hor-kopf{padding-inline:var(--rand);max-width:var(--max);margin-inline:auto;width:100%}
.hor-titel-gross{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(26px,3.2vw,52px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.hor-titel-gross .rot{color:var(--rot)}
.hor-fortschritt{margin:var(--r-16) 0 0;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-2)}
.hor-fortschritt span{color:var(--rot);font-size:var(--t-24);font-variant-numeric:tabular-nums}
.hor-balken{margin-top:var(--r-12);width:min(340px,60%);height:2px;background:var(--linie);position:relative}
.hor-balken-fuellung{position:absolute;left:0;top:0;height:100%;width:0;background:var(--rot)}
.hor-spur{display:flex;gap:clamp(14px,1.6vw,26px);padding-inline:var(--rand);will-change:transform}
.hor-feld{flex:0 0 clamp(260px,26vw,380px);background:var(--papier-2);padding:clamp(24px,2.4vw,40px);
  display:flex;flex-direction:column;gap:6px;min-height:clamp(280px,36vh,380px);
  transition:background .5s cubic-bezier(.39,.52,0,1),opacity .5s,transform .5s cubic-bezier(.39,.52,0,1);opacity:.5}
/* Schritt, der gerade dran ist: farbig hervorgehoben, die anderen treten zurueck (Feedback 16.09.) */
.hor-feld.dran{background:var(--rot-schleier);opacity:1;transform:translateY(-6px)}
.hor-feld.dran .hor-nr{color:var(--rot)}
.hor-feld.dran .hor-titel{color:var(--rot)}
.hor-nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;color:var(--rot)}
.hor-titel{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(22px,2vw,32px);line-height:1.1;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.hor-kurz{font-family:var(--schrift);font-size:var(--t-15);line-height:1.3;color:var(--text-2)}
.hor-text{margin:var(--r-12) 0 0;font-family:var(--schrift);font-size:var(--t-15);line-height:1.45;color:var(--text-2)}
.hor-dauer{margin-top:auto;align-self:start;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rot);border:1px dashed var(--rot);padding:3px 9px}
/* Dieselbe Auszeichnung fuer das Zielfeld unabhaengig von seiner Nummer (05.10.) --
   die Unterseite hat sechs Schritte statt acht. */
.hor-feld--ziel{background:var(--rot)}
.hor-feld--ziel.dran{background:var(--rot);opacity:1}
.hor-feld--ziel .hor-nr,.hor-feld--ziel.dran .hor-nr{color:rgba(255,255,255,.8)}
.hor-feld--ziel .hor-titel,.hor-feld--ziel.dran .hor-titel{color:var(--weiss)}
.hor-feld--ziel .hor-kurz,.hor-feld--ziel .hor-text{color:rgba(255,255,255,.92)}
.hor-feld--ziel .hor-dauer{color:var(--weiss);border-color:rgba(255,255,255,.6)}
.hor-feld[data-nr="8"]{background:var(--rot)}
.hor-feld[data-nr="8"].dran{background:var(--rot);opacity:1}
.hor-feld[data-nr="8"].dran .hor-nr{color:rgba(255,255,255,.8)}
.hor-feld[data-nr="8"].dran .hor-titel{color:var(--weiss)}
.hor-feld[data-nr="8"] .hor-nr{color:rgba(255,255,255,.75)}
.hor-feld[data-nr="8"] .hor-titel{color:var(--weiss)}
.hor-feld[data-nr="8"] .hor-kurz,.hor-feld[data-nr="8"] .hor-text{color:rgba(255,255,255,.92)}
.hor-feld[data-nr="8"] .hor-dauer{color:var(--weiss);border-color:rgba(255,255,255,.6)}
@media(max-width:768px){
  .hor-buehne{height:auto}
  .hor-innen{position:static;height:auto;overflow:visible;padding:clamp(32px,5vh,56px) 0}
  .hor-spur{flex-direction:column;transform:none!important}
  .hor-feld{flex:none;min-height:0}
}

/* ============================ BLICKFANG zwischen Situation und Ablauf · vier Varianten (16.09.) ============================ */





/* Marker auf der Karte im Wirkungskreis: rot fuer die beiden Hauptstaedte, grau fuer die Umgebung.
   Positionen sind umgerechnete Geo-Koordinaten (16.09.). */
.kn-marker{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border:0;background:transparent;
  padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kn-marker--gross{width:34px;height:34px;z-index:5}
.kn-marker:hover,.kn-marker:focus-visible{z-index:7}
.kn-punkt{position:relative;z-index:2;display:block;border-radius:50%;background:var(--rot);
  box-shadow:0 0 0 3px var(--papier);transition:transform .35s cubic-bezier(.39,.52,0,1)}
.kn-marker--gross .kn-punkt{width:15px;height:15px}

.kn-puls{position:absolute;z-index:1;border-radius:50%;background:var(--rot);opacity:.5}
.kn-marker--gross .kn-puls{width:15px;height:15px;animation:knPuls 2.6s cubic-bezier(.39,.52,0,1) infinite}

@keyframes knPuls{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
.kn-marker:hover .kn-punkt,.kn-marker:focus-visible .kn-punkt{transform:scale(1.4)}

.kn-fahne{position:absolute;left:50%;bottom:calc(50% + 12px);transform:translateX(-50%);white-space:nowrap;
  font-family:var(--schrift-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tinte);color:var(--weiss);padding:3px 7px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;z-index:6}
.kn-marker--gross .kn-fahne{opacity:1;background:var(--rot);font-size:12px}
.kn-marker[data-ort="Braunschweig"] .kn-fahne{bottom:auto;top:calc(50% + 12px)}
.kn-marker[data-ort="Braunschweig"]:hover .kn-fahne{transform:translateX(-50%) translateY(3px)}
.kn-marker:hover .kn-fahne,.kn-marker:focus-visible .kn-fahne{opacity:1;transform:translateX(-50%) translateY(-3px)}
.kn-marker:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.kn-puls{animation:none;opacity:.25}}

/* Karte statt Foto in der Buehne */
.kreis-bild--karte{aspect-ratio:830/714;background:transparent;width:min(100%,38vw)}
.kreis-bild--karte::after{display:none}
.kreis-svg{position:absolute;inset:0;color:var(--stein);line-height:0}
.kreis-svg svg{width:100%;height:100%;display:block}

/* --- Marker-Hover: Umkreis, zuruecktretende Karte, Infokarte, Achse (16.09.) --- */
.kreis-bild--karte{--kn-dim:0}
/* Karte tritt zurueck, sobald ein Marker angesteuert wird */
.kreis-bild--karte:has(.kn-marker:hover) .kreis-svg,
.kreis-bild--karte:has(.kn-marker:focus-visible) .kreis-svg{color:var(--linie)}
.kreis-svg{transition:color .45s cubic-bezier(.39,.52,0,1)}

/* Umkreis: duenner Ring, waechst beim Hover aus dem Marker heraus */
.kn-ring{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:1px solid var(--rot);opacity:0;transform:scale(1);pointer-events:none;z-index:1;
  transition:transform .7s cubic-bezier(.39,.52,0,1),opacity .5s}
.kn-marker:hover .kn-ring,.kn-marker:focus-visible .kn-ring{opacity:.55;transform:scale(9)}

/* Achse zwischen Wolfsburg und Braunschweig */
.kn-achse{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.kn-achse line{stroke:var(--rot);stroke-width:1.5;stroke-dasharray:4 4;
  stroke-dashoffset:60;opacity:0;transition:opacity .4s}
.kreis-bild--karte:has(.kn-marker:hover) .kn-achse line,
.kreis-bild--karte:has(.kn-marker:focus-visible) .kn-achse line{opacity:.85;animation:knAchse .9s cubic-bezier(.39,.52,0,1) forwards}
@keyframes knAchse{to{stroke-dashoffset:0}}

/* Infokarte neben dem Marker */
.kn-karte-info{position:absolute;left:calc(50% + 18px);top:50%;transform:translateY(-50%) translateX(-6px);
  display:flex;flex-direction:column;gap:2px;min-width:max-content;
  background:var(--tinte);color:var(--weiss);padding:10px 14px;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.39,.52,0,1);z-index:8}
.kn-marker:hover .kn-karte-info,.kn-marker:focus-visible .kn-karte-info{opacity:1;transform:translateY(-50%) translateX(0)}
.kn-info-titel{font-family:var(--schrift-hl);font-weight:700;font-size:15px;letter-spacing:-.01em;text-transform:uppercase}
.kn-info-zeile{font-family:var(--schrift-label);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.8)}
/* Braunschweig liegt links unten: Karte nach links ausklappen, damit sie im Bild bleibt */
.kn-marker[data-ort="Braunschweig"] .kn-karte-info{left:auto;right:calc(50% + 18px);transform:translateY(-50%) translateX(6px)}
.kn-marker[data-ort="Braunschweig"]:hover .kn-karte-info,
.kn-marker[data-ort="Braunschweig"]:focus-visible .kn-karte-info{transform:translateY(-50%) translateX(0)}
/* die dauerhafte Fahne weicht der Infokarte */
.kn-marker:hover .kn-fahne,.kn-marker:focus-visible .kn-fahne{opacity:0}
@media(prefers-reduced-motion:reduce){
  .kn-ring{transition:opacity .3s}
  .kn-achse line{animation:none;stroke-dashoffset:0}
}
@media(max-width:768px){.kn-karte-info{display:none}}

/* --- Infokarte am Marker (16.09., final: helle Karte mit roter Kante, Telefon betont) --- */
[data-info="c"] .kn-karte-info{background:var(--weiss);color:var(--tinte);border-left:3px solid var(--rot);
  box-shadow:0 14px 30px -18px rgba(53,9,10,.45)}
[data-info="c"] .kn-info-zeile{display:block;color:var(--text-2)}
[data-info="c"] .kn-info-tel{font-family:var(--schrift-hl);font-weight:700;font-size:15px;color:var(--rot);
  letter-spacing:-.01em;margin-top:2px}

/* ============================ NOTARWAND · vier Varianten (16.09.) ============================ */




.notarwand{padding:clamp(56px,7vw,120px) 0;overflow:hidden}

.nw-kopf{padding-bottom:clamp(28px,3.4vw,52px)}

@media(min-width:900px){}
.nw-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(28px,3.6vw,58px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--weiss)}

.nw-titel .rot-hell{color:var(--rot-hell)}
.nw-titel .rot{color:var(--rot)}
.nw-lead{margin:var(--r-16) 0 0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.35;
  letter-spacing:-.02em;color:rgba(255,255,255,.8);max-width:52ch}

/* Laufbaender */
.nw-band{overflow:hidden;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px)}
.nw-spur{display:flex;gap:clamp(10px,1.2vw,18px);will-change:transform;transition:transform .25s linear}
/* Zeiger auf dem Band haelt die Bewegung an (statt einer Schaltflaeche, Feedback 16.09.) */
.nw-band{cursor:default}
.nw-band:hover .nw-spur,.nw-band:focus-within .nw-spur{transition:none}
.nw-feld{flex:0 0 clamp(150px,15vw,230px);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.06) 16px 17px),rgba(255,255,255,.07)}

.nw-band--eng .nw-feld{flex-basis:clamp(130px,12vw,190px)}
.nw-kennung{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.06em;text-transform:uppercase;
  color:var(--rot-hell);border:1px dashed var(--rot-hell);padding:3px 9px}

/* B: dichte Wand */

@media(min-width:680px){}
@media(min-width:1040px){}


/* C: grosse Zahl neben dem Band */
.nw-zahl-grid{display:grid;gap:clamp(28px,3.4vw,56px);align-items:center}
@media(min-width:900px){.nw-zahl-grid{grid-template-columns:minmax(260px,34%) 1fr}}
.nw-zahl{margin:var(--r-16) 0 0;display:flex;flex-direction:column;gap:var(--r-8)}
.nw-zahl-wert{font-family:var(--schrift-hl);font-weight:700;font-size:clamp(70px,9vw,150px);line-height:.9;
  letter-spacing:-.04em;color:var(--rot-hell);border-bottom:3px dashed rgba(245,50,56,.6);align-self:flex-start;padding-bottom:6px}
.nw-zahl-label{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.75)}

/* Fuss mit Stopp-Schaltflaeche (WCAG 2.2.2) */
.nw-fuss{padding-top:clamp(20px,2.4vw,36px)}

.nw-hell 

.nw-hell 
.nw-hinweis{margin:0;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.06em;color:rgba(255,255,255,.7)}


/* E: dieselbe Anlage wie C, aber auf Markenrot. Weiss auf Rot liegt bei 5,58:1 und traegt,
   Rot Hell waere auf Rot unlesbar -- deshalb hier Zahl und Kacheln in Weiss (16.09.). */
.nw-markenrot{background:var(--rot);color:var(--weiss)}
.nw-markenrot .nw-zahl-wert{color:var(--weiss);border-bottom-color:rgba(255,255,255,.55)}
.nw-markenrot .nw-zahl-label,.nw-markenrot .nw-lead,.nw-markenrot .nw-hinweis{color:rgba(255,255,255,.85)}
.nw-markenrot .nw-feld{background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.1) 16px 17px),rgba(255,255,255,.12)}
.nw-markenrot .nw-kennung{color:var(--weiss);border-color:rgba(255,255,255,.7)}
.nw-markenrot 
.nw-markenrot 
.nw-markenrot .register-hell{color:rgba(255,255,255,.8)}

/* ============================ ABSCHLUSS-CTA (nach dem Gestaltungsvorbild, .form, minimal) ============================
   Zwei Blöcke 50 / 45 Prozent, Titel 112rem (5,8vw, hier 4,4vw wegen der längeren Wörter), Beschriftungen in Versalien gesperrt,
   Felder ohne Rahmen nur mit Unterstrich, runder roter Knopf. Links das Karten-Video mit roter Lupe am Zeiger. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cta{padding:clamp(56px,6.5vw,120px) 0 clamp(64px,8vw,150px);background:var(--papier)}  /* oben knapper (Feedback 16.09.) */
.cta-inner{display:flex;justify-content:space-between;align-items:stretch;gap:clamp(24px,3.5vw,72px)}
.cta-links{width:50%}
.cta-intro{display:flex;flex-direction:column;justify-content:center}
.cta-schritte{margin:var(--r-24) 0 0;font-family:var(--schrift-hl);font-weight:500;font-size:clamp(24px,2.6vw,44px);
  line-height:1.25;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.cta-links{width:50%;position:relative}
.cta-bild{position:relative;width:100%;height:100%;min-height:clamp(360px,42vw,600px);overflow:hidden;background:var(--stein)}
.cta-bild img,.cta-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cta-platzhalter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(17,16,14,.05) 22px 23px),var(--stein)}
.cta-kennung{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;color:var(--rot);
  border:1px dashed var(--rot);padding:4px 10px;background:var(--papier)}
.cta-rechts{width:45%;display:flex;flex-direction:column;justify-content:center}
.cta-titel{margin:0;font-family:var(--schrift-hl);font-weight:600;font-size:clamp(30px,3.4vw,60px);line-height:1.05;letter-spacing:-.02em;
  word-spacing:.18em;text-transform:uppercase;color:var(--tinte)}
.cta-titel > span{display:inline-block}
.cta-titel .maske{overflow:hidden;vertical-align:top;margin-right:.18em}
.cta-titel .w-sprechen{display:block}
.cta-titel .w-wir{vertical-align:top}
.cta-titel .rot{color:var(--rot);display:block;margin-left:clamp(40px,9vw,170px)}
.cta-form{margin-top:clamp(36px,3.6vw,64px);display:flex;flex-direction:column;gap:clamp(12px,1.3vw,22px)}  /* mehr Abstand zur Headline (Feedback 16.09.) */
.cta-form .feld{display:flex;flex-direction:column;gap:var(--r-8)}
.cta-form label{font-family:var(--schrift-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.cta-form input,.cta-form textarea{min-height:52px;padding:var(--r-8) 0;border:0;border-bottom:1px solid var(--linie-stark);border-radius:0;background:transparent;
  font-family:var(--schrift);font-size:var(--t-text);letter-spacing:-.02em;color:var(--tinte)}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:var(--text-2)}
.cta-form textarea{min-height:64px;resize:vertical}
.cta-form input:focus,.cta-form textarea:focus{outline:none;border-bottom:2px solid var(--rot)}
.cta-hinweis{margin:0;font-family:var(--schrift-label);font-size:var(--t-15);color:var(--rot-fehler);min-height:1.2em}
.cta-aktionen{display:flex;justify-content:flex-end;margin-top:var(--r-24)}
.cta-frei{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);max-width:22ch;line-height:1.5}
/* Runder Knopf, Hover-Animation nach dem Gestaltungsvorbild). Zwei Textlagen, jede füllt die volle Knopfhöhe,
   deshalb schiebt 100 Prozent sie sauber ganz raus bzw. rein. Ruhe: Marktwert anfordern. Hover: dunkler Kreis wächst, Text wechselt. */
.cta-kreis{position:relative;overflow:hidden;width:clamp(130px,10vw,190px);height:clamp(130px,10vw,190px);border-radius:50%;border:0;
  background:var(--rot);cursor:pointer;padding:0;flex:none}
.cta-kreis::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rot-nacht);transform:scale(0);z-index:0;
  transition:transform .8s cubic-bezier(.39,.52,0,1)}
.cta-kreis:hover::after,.cta-kreis:focus-visible::after{transform:scale(1)}
.cta-kreis:focus-visible{outline:3px solid var(--rot);outline-offset:4px}
.cta-kreis__text{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  color:var(--weiss);font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-15);letter-spacing:.06em;line-height:1.25;text-align:center;
  transition:transform .6s cubic-bezier(.39,.52,0,1)}
.cta-kreis__text--rein{transform:translateY(-100%)}
.cta-kreis:hover .cta-kreis__text--raus,.cta-kreis:focus-visible .cta-kreis__text--raus{transform:translateY(100%)}
.cta-kreis:hover .cta-kreis__text--rein,.cta-kreis:focus-visible .cta-kreis__text--rein{transform:translateY(0);transition-delay:.3s}
.cta-frei{margin:var(--r-16) 0 0;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);line-height:1.5;max-width:32ch}
.cta-telefon{margin-top:clamp(32px,4vw,64px);display:flex;flex-direction:column;gap:var(--r-4)}
/* Bento-Button: sicher weiss im Ruhezustand, gewinnt gegen die allgemeine .cta-kreis-Regel */
.bento-kreis{margin-top:auto;align-self:flex-start;background:var(--weiss)!important;box-shadow:none}
.bento-kreis .cta-kreis__text--raus{color:var(--rot)}
.bento-kreis .cta-kreis__text--rein{color:var(--weiss)}
.bento-kreis::after{background:var(--logo-grau)}  /* Hover in Grau statt Dunkelrot (Feedback 16.09.) */
@media(max-width:900px){
  .cta-inner{flex-direction:column}
  .cta-links,.cta-rechts{width:100%}
  .cta-bild{min-height:0;aspect-ratio:4/3}
  .cta-links{min-height:0;aspect-ratio:16/9;cursor:auto}
  
}
@media(prefers-reduced-motion:reduce){}

/* ============================ WEICHE · final (16.09.) ============================
   Zwei eingefärbte Flächen mit Hover-Wisch: links hell -> Markenrot, rechts Grau -> Tinte-Weich. */
.weiche{background:var(--papier);padding-top:clamp(72px,9vw,160px);padding-bottom:clamp(48px,6vw,110px)}
.wd-grid{display:grid;min-height:clamp(420px,44vw,600px)}
@media(min-width:768px){.wd-grid{grid-template-columns:1fr 1fr}}
.wd-feld{position:relative;z-index:0;overflow:hidden;display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--r-16);
  padding:clamp(48px,5vw,96px) clamp(24px,3vw,64px);transition:color .6s cubic-bezier(.39,.52,0,1)}
.wd-hell{background:var(--rot);color:var(--weiss);padding-left:calc(var(--rand) + clamp(16px,3vw,56px))}
@media(min-width:1620px){.wd-hell{padding-left:calc((100vw - var(--max))/2 + var(--rand) + clamp(16px,3vw,56px))}}
.wd-rot{background:var(--logo-grau);color:var(--weiss)}
.wd-feld::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .7s cubic-bezier(.39,.52,0,1)}
.wd-hell::before{background:var(--rot-tief)} .wd-rot::before{background:var(--tinte-weich)}
.wd-feld:hover::before,.wd-feld:focus-visible::before{transform:translateY(0)}
.wd-nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;color:rgba(255,255,255,.75)}
.wd-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.4vw,56px);line-height:1.08;
  letter-spacing:-.02em;text-transform:uppercase;max-width:14ch;min-height:2.16em}
.wd-text{margin:0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.3;letter-spacing:-.03em;max-width:42ch;color:rgba(255,255,255,.9)}
.wd-cta{align-self:start;font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);letter-spacing:.06em;
  border-bottom:2px solid currentColor;padding-bottom:4px}

/* ============================ ZAHLEN (nach dem Gestaltungsvorbild, .stats) ============================
   Werte aus deren CSS bei 1920: Zellen 84rem Innenabstand, obere Reihe 200rem oben / 131rem unten, Titel 109rem,
   Zähler 120rem in der Textschrift, Beschriftung 20rem fett mit 19 Prozent Sperrung, Titelzelle 145rem eingerückt. */
.zahlen{position:relative;background:var(--papier)}
.zahlen .ecke{position:absolute;width:14px;height:14px;background:var(--tinte-weich)}
.zahlen .e1{left:calc(var(--rand) + 20px);top:clamp(32px,3.5vw,68px)}.zahlen .e2{right:calc(var(--rand) + 20px);top:clamp(32px,3.5vw,68px)}
.zahlen .e3{left:calc(var(--rand) + 20px);bottom:clamp(20px,1.5vw,30px)}.zahlen .e4{right:calc(var(--rand) + 20px);bottom:clamp(20px,1.5vw,30px)}
/* Raster liegt im Seitenrahmen, bündig mit dem Hero-Bild (Feedback 15.09.); Haarlinien links und rechts schließen es ab */
.zahlen-raster{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linie);border-top:0}
.zelle{border-right:1px solid var(--linie);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(40px,4.4vw,84px) 0;position:relative}
.zelle:nth-child(4n){border-right:0}
.zahlen-titel,.zahlen-haupt,.zahlen-text{padding-top:clamp(100px,10.4vw,200px);padding-bottom:clamp(50px,6.8vw,131px);border-bottom:1px solid var(--linie)}
.zahlen-titel{grid-column:1 / span 2;align-items:flex-start;padding-left:clamp(16px,3vw,56px)}
.zahlen-titel h2{margin:0;font-family:var(--schrift-hl);font-weight:600;font-size:clamp(34px,5.7vw,109px);line-height:1.2;
  letter-spacing:-.02em;word-spacing:.18em;text-transform:uppercase;color:var(--tinte)}
.zahlen-titel h2 > span{display:block}
.zahlen-titel h2 .zeile-2{overflow:hidden}
.zahlen-titel h2 .w-1,.zahlen-titel h2 .w-2{display:inline-block}
.zahlen-titel h2 .maske{display:inline-block;overflow:hidden;vertical-align:top}  /* nur statt läuft maskiert, Zahlen kommt ganz von links (Feedback 15.09.) */
.zahlen-titel h2 .rot{color:var(--rot)}
.zahlen-haupt{grid-column:3}
.zahlen-text{grid-column:4;align-items:flex-start;justify-content:center}
.zahlen-text p{margin:0;padding:0 clamp(12px,.8vw,15px);font-family:var(--schrift);font-weight:400;font-size:var(--t-text);
  line-height:1.2;letter-spacing:-.05em;text-transform:uppercase;text-align:left;max-width:34ch}
.zaehler{font-family:var(--schrift);font-weight:400;font-size:clamp(50px,6.25vw,120px);line-height:1.2;letter-spacing:-.07em;
  color:var(--rot);display:inline-flex;overflow:hidden;font-variant-numeric:tabular-nums}
.zahlen .zaehler{transform:none}   /* hebt die Intro-Regel .zaehler{transform:translateY(100%)} auf */
.ziffer{display:inline-grid;overflow:hidden}
.ziffer > span{grid-area:1/1;display:block}
.ziffer .neu{transform:translateY(-100%)}
.zahlen-zahl p{margin:clamp(8px,1vw,20px) auto 0;width:min(100%,60%);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(12px,1.04vw,20px);
  line-height:1.2;letter-spacing:.19em;text-transform:uppercase;text-align:center;color:var(--tinte)}
.zahl-folgt{margin-top:var(--r-8);font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rot);border:1px dashed var(--rot);padding:2px 8px}
@media(max-width:768px){
  .zahlen-raster{display:flex;flex-wrap:wrap;border:0}
  .zahlen .rahmen{padding-inline:var(--rand)}
  .zelle{border:0;padding:20px 0}
  .zahlen-titel,.zahlen-haupt,.zahlen-text{padding:0;border:0}
  .zahlen-titel{width:100%;padding:0 0 30px;order:0}
  .zahlen-haupt{order:1}
  .zahlen-zahl:not(.zahlen-haupt){order:2}
  .zahlen-text{width:100%;order:3;margin-bottom:24px}
  .zahlen-text p{padding:0;max-width:none}
  .zahlen-zahl{width:50%;margin-bottom:20px}
  .zahlen .ecke{display:none}
}

/* ============================ WIRKUNGSKREIS (nach dem Gestaltungsvorbild, .ceo) ============================
   Werte aus deren CSS bei 1920 Bezugsbreite: Sektion 174rem oben / 250rem unten, Bild 916rem breit,
   große Wörter 140rem, Orte 90 / 70 / 60rem, Titel darunter mittig. Hier auf vw umgerechnet. */
.kreis{padding:clamp(48px,6vw,110px) 0 clamp(16px,2vw,40px);background:var(--papier)}  /* Abstaende verringert (Feedback 16.09.) */
.kreis-buehne{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kreis-bild--karte{order:2}
.kreis-oben{order:1}
.kreis-bild{position:relative;z-index:2;width:min(100%,47.7vw)}
.kreis-karte{width:100%;height:auto;display:block;filter:grayscale(1)}
/* Das Bild läuft rechts unten und oben links nach Papier aus, damit die Orte und die großen Wörter
   beim Start genug Kontrast haben (Feedback 15.09.) */
.kreis-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top left,var(--papier) 0%,rgba(249,248,246,.92) 18%,rgba(249,248,246,.55) 34%,transparent 55%),
    linear-gradient(to bottom,rgba(249,248,246,.92) 0%,rgba(249,248,246,.7) 14%,transparent 34%)}
.kreis-text{position:absolute;z-index:3;display:flex;margin:0;
  font-family:var(--schrift-hl);font-weight:600;font-size:clamp(56px,6.8vw,98px);line-height:1.2;
  letter-spacing:-.02em;word-spacing:.18em;text-transform:uppercase}  /* lockerer als die Hero-Headline (Feedback 15.09.) */
.kreis-text p{margin:0;white-space:nowrap;flex:none}  /* einzeilig halten (Feedback 16.09.) */
.kreis-oben{top:0;left:50%;transform:translateX(-50%);white-space:nowrap}
.kreis-oben .kreis-links{color:var(--tinte)}
.kreis-oben .kreis-rechts{color:var(--rot);margin-left:.18em}
.kreis-unten{position:static;flex-direction:column;align-items:flex-end;align-self:stretch;text-align:right;
  color:var(--rot);order:3;margin-top:clamp(-120px,-8.5vw,-44px)}  /* Wolfsburg ueberlappt die Karte leicht, bleibt aber von den Markern weg (Feedback 16.09.) */
.kreis-unten p{font-size:clamp(34px,4.7vw,90px);margin-bottom:clamp(6px,.5vw,10px);white-space:nowrap}
.kreis-unten p:nth-child(2){font-size:clamp(28px,3.65vw,70px)}
.kreis-unten p:nth-child(3){font-size:clamp(22px,3.1vw,60px);margin-bottom:0}



@media(max-width:768px){
  .kreis-buehne{align-items:flex-start}
  .kreis-text{position:static;transform:none}
  .kreis-oben{order:2;flex-direction:row;margin-top:var(--r-16)}
  .kreis-unten{order:3;align-self:flex-end;margin-top:var(--r-8)}
  .kreis-bild{order:1;width:100%}
  .kreis-bild::after{display:none}

  
}

/* ============================ IMAGEFILM + VERMARKTUNGSSTANDARD ============================ */
.film{padding:clamp(32px,4vw,80px) 0 clamp(56px,7vw,120px);background:var(--papier)}
.film-titel{margin:var(--r-16) 0 clamp(24px,3vw,56px);font-family:var(--schrift-hl);font-weight:600;font-size:clamp(34px,5.7vw,109px);
  line-height:1.15;letter-spacing:-.02em;word-spacing:.18em;text-transform:uppercase;color:var(--tinte);max-width:14ch}
.film-titel .rot{color:var(--rot)}
.film-box{position:relative;width:100%;aspect-ratio:16/9;background:var(--stein);overflow:hidden;transform-origin:center;will-change:transform}
.film-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-platzhalter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(17,16,14,.05) 22px 23px),
    var(--stein)}
.film-kennung{position:absolute;left:var(--r-24);top:var(--r-24);font-family:var(--schrift-label);font-size:var(--t-15);
  letter-spacing:.08em;text-transform:uppercase;color:var(--rot);border:1px dashed var(--rot);padding:4px 10px;background:var(--papier)}
.film-play{width:clamp(64px,7vw,120px);height:clamp(64px,7vw,120px);background:var(--rot);position:relative}
.film-play::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
  border-left:clamp(22px,2.4vw,40px) solid var(--weiss);border-top:clamp(13px,1.4vw,24px) solid transparent;border-bottom:clamp(13px,1.4vw,24px) solid transparent}
.film-steuerung{position:absolute;right:var(--r-24);bottom:var(--r-24);display:flex;gap:var(--r-8)}
.film-knopf{min-height:var(--ziel-min);padding:0 var(--r-16);background:var(--papier);color:var(--tinte);border:1px solid var(--linie-stark);
  font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-15);letter-spacing:.09em;cursor:pointer}
.film-knopf[disabled]{opacity:.5;cursor:default}
.leistungen{list-style:none;margin:clamp(40px,5vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linie);border-left:1px solid var(--linie)}
.leistungen li{position:relative;z-index:0;display:flex;flex-direction:column;gap:var(--r-12);padding:var(--r-24) var(--r-24) var(--r-24) calc(var(--r-24) + 20px + var(--r-12));
  min-height:clamp(120px,10vw,180px);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);
  font-family:var(--schrift);font-size:var(--t-text);line-height:1.2;letter-spacing:-.05em;color:var(--tinte);
  transition:color .6s cubic-bezier(.39,.52,0,1)}
/* Rotes Quadrat neben der Nummer, füllt beim Hover die ganze Zelle, wie im Menü (Feedback 15.09.) */
.leistungen li::before{content:"";position:absolute;left:var(--r-24);top:var(--r-24);width:20px;height:20px;background:var(--rot);z-index:-1;
  transition:width .6s cubic-bezier(.39,.52,0,1),height .6s cubic-bezier(.39,.52,0,1),left .6s cubic-bezier(.39,.52,0,1),top .6s cubic-bezier(.39,.52,0,1)}
.leistungen li:hover{color:var(--weiss)}
.leistungen li:hover::before{left:0;top:0;width:100%;height:100%}
.leistungen .nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;color:var(--rot);line-height:20px;
  transition:color .6s cubic-bezier(.39,.52,0,1)}
.leistungen li:hover .nr{color:var(--weiss)}
@media(max-width:768px){
  .leistungen{grid-template-columns:1fr 1fr}
  .film-steuerung{position:static;margin-top:var(--r-8)}
  .film-box{overflow:visible}
}
@media(max-width:520px){.leistungen{grid-template-columns:1fr}}

.angebote{padding:clamp(64px,8vw,150px) 0;background:var(--papier)}
.angebote-kopf{display:grid;gap:var(--r-16);margin-bottom:clamp(32px,4vw,64px)}
@media(min-width:820px){.angebote-kopf{grid-template-columns:1.1fr 1fr;align-items:end;gap:clamp(24px,4vw,64px)}}
.angebote-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(28px,3.2vw,52px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.angebote-lead{margin:0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.35;letter-spacing:-.02em;color:var(--text-2);max-width:46ch;align-self:end}

/* ============================ REFERENZ-KARTEN (1:1 nach das Rastervorbild Bau, 16.09.) ============================
   12-Spalten-Grid, jede Karte aspect-ratio 4/3, keine Zeilenhöhen-Tricks, deshalb nie gequetscht.
   card--w = 7 Spalten, card--n = 5, card--t = 4. Verlauf, Hover-Zoom und Fakten-Layout 1:1 aus deren CSS. */
.grid-referenzen{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,24px)}
.card{position:relative;display:block;overflow:hidden;background:var(--stein);color:var(--weiss);aspect-ratio:4/3;isolation:isolate;grid-column:span 12}
@media(min-width:760px){
  .card--w{grid-column:span 7}
  .card--n{grid-column:span 5}
  .card--t{grid-column:span 4}
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.39,.52,0,1);z-index:0}
.card:hover img,.card:focus-visible img{transform:scale(1.04)}
.card__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(53,9,10,0) 40%,rgba(53,9,10,.82) 100%);z-index:1}
.card__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,32px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;z-index:2}
.card__city{display:block;font-family:var(--schrift-label);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.card__name{display:block;margin:8px 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(17px,1.5vw,24px);line-height:1.25;text-transform:uppercase}
.card__fact{font-family:var(--schrift-label);font-size:13px;line-height:1.35;text-align:right;white-space:nowrap}
.card__fact b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:700;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
/* typografische Kachel (Störer) ohne Bild */
.card--type{background:var(--rot);color:var(--weiss)}
.card__big{position:absolute;left:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);
  font-family:var(--schrift-hl);font-weight:800;font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.card__big small{display:block;font-family:var(--schrift-label);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;opacity:.9}
.card .bento-kreis{width:clamp(130px,10vw,190px);height:clamp(130px,10vw,190px)}  /* gleich groß wie der CTA-Button (Feedback 16.09.) */

/* ============================ TEAM (nach dem Gestaltungsvorbild, .team) ============================
   Werte aus deren CSS bei 1920: inaktiver Block 390rem breit, Bild 390×380, aktiver Block 830rem, Bild 350×615, Text 450rem,
   Rahmen 1rem #dedede, Blöcke unten bündig. Übergänge: Breite 0,8 s (aktiv 0,5 s mit 0,5 s Verzögerung), Bild 1,3 s,
   Inhalt und Links blenden nach 1 s in 0,8 s ein, Name und Rolle rutschen maskiert nach unten weg. Kurve cubic-bezier(.39,.52,0,1). */
.team{padding:clamp(36px,4vw,72px) 0 clamp(88px,10vw,180px);background:var(--papier);overflow-x:hidden}  /* mehr Luft unten (Feedback 16.09.) */
.team-titel{margin:var(--r-16) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.65vw,70px);line-height:1.15;letter-spacing:-.02em;
  word-spacing:.18em;text-transform:uppercase;color:var(--tinte);max-width:16ch}  /* schwarz mit rotem Akzent, kürzer und ohne Einzug (Feedback 15.09.) */
.team-titel .rot{color:var(--rot)}
.team-vorlauf{margin:var(--r-24) 0 0;font-family:var(--schrift);font-size:var(--t-lead);line-height:1.2;letter-spacing:-.05em;color:var(--tinte);max-width:40ch}
.team-inhalt{display:flex;align-items:flex-end;margin-top:clamp(50px,5.2vw,100px);--k:cubic-bezier(.39,.52,0,1)}
.team-block{position:relative;border:1px solid var(--linie);padding:clamp(20px,2.1vw,40px) clamp(16px,1.56vw,30px);width:clamp(220px,20.3vw,390px);
  transition:width .8s var(--k) 0s;outline:none}
.team-block .ecke{position:absolute;width:12px;height:12px;background:var(--tinte-weich);opacity:0;transition:opacity .1s var(--k)}
.team-block .ecke:nth-child(1){left:10px;top:10px}.team-block .ecke:nth-child(2){right:10px;top:10px}
.team-block .ecke:nth-child(3){left:10px;bottom:10px}.team-block .ecke:nth-child(4){right:10px;bottom:10px}
.team-block__wrapper{display:flex}
.team-block__image{width:clamp(200px,20.3vw,390px);height:clamp(200px,19.8vw,380px);object-fit:cover;object-position:50% 12%;display:block;
  transition:width 1.3s var(--k),height 1.3s var(--k)}
.team-block__content{position:absolute;right:clamp(16px,1vw,20px);top:0;margin-left:clamp(24px,2.9vw,55px);margin-top:clamp(40px,4.2vw,80px);width:clamp(220px,21vw,410px);
  opacity:0;pointer-events:none;transition:opacity .1s var(--k) 0s}
.team-block__content h3{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(20px,1.67vw,32px);line-height:1.2;text-transform:uppercase;color:var(--tinte)}
.team-block__content .rolle{margin:4px 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(13px,1.04vw,20px);line-height:1.2;text-transform:uppercase;color:var(--tinte)}
.team-block__content .text{margin:clamp(24px,2.9vw,55px) 0 0;font-family:var(--schrift);font-weight:400;font-size:var(--t-text);line-height:1.2;letter-spacing:-.05em;color:var(--tinte)}
.team-block__name-vor,.team-block__rolle-vor{overflow:hidden}
.team-block__name-vor{margin:5px 0}
.team-block__name-vor span,.team-block__rolle-vor span{display:block;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(18px,1.46vw,28px);line-height:1.2;
  text-transform:uppercase;color:var(--tinte);transition:transform 1.3s var(--k)}
.team-block__rolle-vor span{font-weight:700;font-size:clamp(12px,1.04vw,20px)}
.team-block__links{position:absolute;bottom:clamp(20px,1.8vw,35px);left:50%;width:clamp(560px,43.2vw,830px);transform:translateX(-50%);
  display:flex;justify-content:space-between;padding:0 clamp(24px,2.1vw,40px);opacity:0;z-index:-1;transition:opacity .1s var(--k) 0s}
.team-block__links .pfeillink{font-size:var(--t-15)}
/* aktiver Block */
.team-block-aktiv{width:clamp(560px,43.2vw,830px)!important;transition:width .5s var(--k) .5s}
.team-block-aktiv .ecke{opacity:1}
.team-block-aktiv .team-block__image{width:clamp(180px,18.2vw,350px);height:clamp(320px,32vw,615px)}
.team-block-aktiv .team-block__content{opacity:1;pointer-events:auto;transition:opacity .8s var(--k) 1s}
.team-block-aktiv .team-block__links{opacity:1;overflow:hidden;z-index:1;transition:opacity .8s var(--k) 1s}
.team-block-aktiv .team-block__name-vor span,.team-block-aktiv .team-block__rolle-vor span{transform:translateY(100%)}
@media(max-width:768px){
  .team-inhalt{flex-direction:column;align-items:stretch;gap:var(--r-16)}
  .team-block,.team-block-aktiv{width:100%!important;padding:0}
  .team-block__wrapper{flex-direction:column;padding:30px 20px 0}
  .team-block__image,.team-block-aktiv .team-block__image{width:100%;height:320px}
  .team-block__content{opacity:1;position:relative;right:0;margin:15px 0 0;width:100%;pointer-events:auto}
  .team-block__name-vor,.team-block__rolle-vor{display:none}
  .team-block__links{position:relative;left:0;bottom:0;width:auto;transform:none;opacity:1;z-index:1;padding:20px 20px 30px;flex-wrap:wrap;gap:var(--r-12)}
  .team-block .ecke{opacity:1;width:8px;height:8px;left:5px;top:5px}
  .team-block .ecke:nth-child(2){left:auto;right:5px}.team-block .ecke:nth-child(3){top:auto;bottom:5px}.team-block .ecke:nth-child(4){left:auto;top:auto;right:5px;bottom:5px}
}

/* ============================ ABSCHLUSS-CTA (nach dem Gestaltungsvorbild, .form, minimal) ============================
   Zwei Blöcke 50 / 45 Prozent, Titel 112rem (5,8vw, hier 4,4vw wegen der längeren Wörter), Beschriftungen in Versalien gesperrt,
   Felder ohne Rahmen nur mit Unterstrich, runder roter Knopf. Links das Karten-Video mit roter Lupe am Zeiger. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cta{padding:clamp(56px,6.5vw,120px) 0 clamp(64px,8vw,150px);background:var(--papier)}  /* oben knapper (Feedback 16.09.) */
.cta-inner{display:flex;justify-content:space-between;align-items:stretch;gap:clamp(24px,3.5vw,72px)}
.cta-links{width:50%}
.cta-intro{display:flex;flex-direction:column;justify-content:center}
.cta-schritte{margin:var(--r-24) 0 0;font-family:var(--schrift-hl);font-weight:500;font-size:clamp(24px,2.6vw,44px);
  line-height:1.25;letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.cta-links{width:50%;position:relative}
.cta-bild{position:relative;width:100%;height:100%;min-height:clamp(360px,42vw,600px);overflow:hidden;background:var(--stein)}
.cta-bild img,.cta-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cta-platzhalter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(17,16,14,.05) 22px 23px),var(--stein)}
.cta-kennung{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;color:var(--rot);
  border:1px dashed var(--rot);padding:4px 10px;background:var(--papier)}
.cta-rechts{width:45%;display:flex;flex-direction:column;justify-content:center}
.cta-titel{margin:0;font-family:var(--schrift-hl);font-weight:600;font-size:clamp(30px,3.4vw,60px);line-height:1.05;letter-spacing:-.02em;
  word-spacing:.18em;text-transform:uppercase;color:var(--tinte)}
.cta-titel > span{display:inline-block}
.cta-titel .maske{overflow:hidden;vertical-align:top;margin-right:.18em}
.cta-titel .w-sprechen{display:block}
.cta-titel .w-wir{vertical-align:top}
.cta-titel .rot{color:var(--rot);display:block;margin-left:clamp(40px,9vw,170px)}
.cta-form{margin-top:clamp(36px,3.6vw,64px);display:flex;flex-direction:column;gap:clamp(12px,1.3vw,22px)}  /* mehr Abstand zur Headline (Feedback 16.09.) */
.cta-form .feld{display:flex;flex-direction:column;gap:var(--r-8)}
.cta-form label{font-family:var(--schrift-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.cta-form input,.cta-form textarea{min-height:52px;padding:var(--r-8) 0;border:0;border-bottom:1px solid var(--linie-stark);border-radius:0;background:transparent;
  font-family:var(--schrift);font-size:var(--t-text);letter-spacing:-.02em;color:var(--tinte)}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:var(--text-2)}
.cta-form textarea{min-height:64px;resize:vertical}
.cta-form input:focus,.cta-form textarea:focus{outline:none;border-bottom:2px solid var(--rot)}
.cta-hinweis{margin:0;font-family:var(--schrift-label);font-size:var(--t-15);color:var(--rot-fehler);min-height:1.2em}
.cta-aktionen{display:flex;justify-content:flex-end;margin-top:var(--r-24)}
.cta-frei{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);max-width:22ch;line-height:1.5}
/* Runder Knopf, Hover-Animation nach dem Gestaltungsvorbild). Zwei Textlagen, jede füllt die volle Knopfhöhe,
   deshalb schiebt 100 Prozent sie sauber ganz raus bzw. rein. Ruhe: Marktwert anfordern. Hover: dunkler Kreis wächst, Text wechselt. */
.cta-kreis{position:relative;overflow:hidden;width:clamp(130px,10vw,190px);height:clamp(130px,10vw,190px);border-radius:50%;border:0;
  background:var(--rot);cursor:pointer;padding:0;flex:none}
.cta-kreis::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rot-nacht);transform:scale(0);z-index:0;
  transition:transform .8s cubic-bezier(.39,.52,0,1)}
.cta-kreis:hover::after,.cta-kreis:focus-visible::after{transform:scale(1)}
.cta-kreis:focus-visible{outline:3px solid var(--rot);outline-offset:4px}
.cta-kreis__text{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  color:var(--weiss);font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-15);letter-spacing:.06em;line-height:1.25;text-align:center;
  transition:transform .6s cubic-bezier(.39,.52,0,1)}
.cta-kreis__text--rein{transform:translateY(-100%)}
.cta-kreis:hover .cta-kreis__text--raus,.cta-kreis:focus-visible .cta-kreis__text--raus{transform:translateY(100%)}
.cta-kreis:hover .cta-kreis__text--rein,.cta-kreis:focus-visible .cta-kreis__text--rein{transform:translateY(0);transition-delay:.3s}
.cta-frei{margin:var(--r-16) 0 0;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);line-height:1.5;max-width:32ch}
.cta-telefon{margin-top:clamp(32px,4vw,64px);display:flex;flex-direction:column;gap:var(--r-4)}
/* Bento-Button: sicher weiss im Ruhezustand, gewinnt gegen die allgemeine .cta-kreis-Regel */
.bento-kreis{margin-top:auto;align-self:flex-start;background:var(--weiss)!important;box-shadow:none}
.bento-kreis .cta-kreis__text--raus{color:var(--rot)}
.bento-kreis .cta-kreis__text--rein{color:var(--weiss)}
.bento-kreis::after{background:var(--logo-grau)}  /* Hover in Grau statt Dunkelrot (Feedback 16.09.) */
@media(max-width:900px){
  .cta-inner{flex-direction:column}
  .cta-links,.cta-rechts{width:100%}
  .cta-bild{min-height:0;aspect-ratio:4/3}
  .cta-links{min-height:0;aspect-ratio:16/9;cursor:auto}
  
}
@media(prefers-reduced-motion:reduce){}

/* ============================ WEICHE · alle Varianten (16.09.) ============================ */
.weiche-schalter{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:var(--r-8);flex-wrap:wrap;
  justify-content:flex-end;padding:var(--r-8) var(--rand);background:var(--papier);border-bottom:1px solid var(--linie)}
.weiche-schalter__titel{margin-right:auto;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.weiche-schalter button{min-height:40px;padding:0 var(--r-16);border:1px solid var(--linie-stark);background:transparent;cursor:pointer;
  font-family:var(--schrift-hl);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--tinte)}
.weiche-schalter button[aria-selected="true"]{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.weiche{background:var(--papier);padding-top:clamp(72px,9vw,160px);padding-bottom:clamp(48px,6vw,110px)}  /* eigener Block, abgesetzt von der Sektion darunter (Feedback 16.09.) */
.weiche-var[hidden]{display:none}

/* A: heller Split, gemeinsame Grundlinie, Hover-Wisch */
.weiche-grid{display:grid;gap:0;padding-block:clamp(48px,6vw,110px)}
@media(min-width:768px){.weiche-grid{grid-template-columns:1fr 1fr}}

/* B: zwei Karten */
.weiche-b-inner{padding-block:clamp(48px,6vw,110px)}

/* C: ruhiges Register */
.weiche-c-inner{padding-block:clamp(48px,6vw,110px)}
@media(max-width:767px){.wc-text,.wc-pfeil{display:none}}

/* D: eingefärbte Störer-Flächen mit Hover-Wisch */
.wd-grid{display:grid;min-height:clamp(420px,44vw,600px)}
@media(min-width:768px){.wd-grid{grid-template-columns:1fr 1fr}}
.wd-feld{position:relative;z-index:0;overflow:hidden;display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--r-16);
  padding:clamp(48px,5vw,96px) clamp(24px,3vw,64px);transition:color .6s cubic-bezier(.39,.52,0,1)}
/* Textkanten auf den Seitenrahmen ziehen, damit sie mit der Sektion darunter fluchten (Feedback 16.09.) */
.wd-hell{background:var(--rot);color:var(--weiss);padding-left:calc(var(--rand) + clamp(16px,3vw,56px))}
.wd-rot{background:var(--logo-grau);color:var(--weiss)}
@media(min-width:1620px){.wd-hell{padding-left:calc((100vw - var(--max))/2 + var(--rand) + clamp(16px,3vw,56px))}}
.wd-feld::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .7s cubic-bezier(.39,.52,0,1)}
.wd-hell::before{background:var(--rot-tief)} .wd-rot::before{background:var(--tinte-weich)}
.wd-feld:hover::before,.wd-feld:focus-visible::before{transform:translateY(0)}

.wd-nr{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.18em;transition:color .6s cubic-bezier(.39,.52,0,1)}
.wd-hell .wd-nr{color:rgba(255,255,255,.75)} .wd-rot .wd-nr{color:rgba(255,255,255,.8)}

.wd-titel{margin:var(--r-8) 0 0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(30px,3.4vw,56px);line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;max-width:14ch;min-height:2.16em}
.wd-text{margin:0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.3;letter-spacing:-.03em;max-width:42ch}
.wd-hell .wd-text{color:rgba(255,255,255,.9)} .wd-rot .wd-text{color:rgba(255,255,255,.9)}

.wd-cta{align-self:start;font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);letter-spacing:.06em;border-bottom:2px solid currentColor;padding-bottom:4px}

/* ============================ STÖRER · Erstbewertung + Karriere (16.09.) ============================
   Ein durchgehender roter Hintergrund, zwei Inhalte ohne Bruch dazwischen (einem Gestaltungsvorbild),
   damit der Übergang zwischen den weißen Sektionen nicht abrupt wirkt. */
.stoerer{position:relative;overflow:hidden;background:var(--rot);color:var(--weiss);isolation:isolate}
/* Weißes Zeichen als Wasserzeichen, haelt die zwei Bloecke optisch zusammen (Kundenwunsch 16.09.) */
.stoerer-wasserzeichen{position:absolute;left:clamp(-40px,-3vw,-10px);bottom:clamp(-40px,-3vw,-10px);
  width:clamp(220px,20vw,340px);height:auto;opacity:.12;z-index:0;pointer-events:none}
.stoerer-cta{position:relative;z-index:1;padding-block:clamp(48px,6vw,96px) clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:var(--r-24)}  /* padding-block statt padding, damit das padding-inline von .rahmen erhalten bleibt (Feedback 16.09.) */
.stoerer-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(26px,3vw,48px);line-height:1.15;
  letter-spacing:-.02em;text-transform:uppercase;max-width:20ch}
.stoerer-hell{opacity:.85}
.stoerer-link{color:var(--weiss)}
.stoerer-link::before,.stoerer-link::after{background:var(--weiss)}
.stoerer-karriere{position:relative;z-index:1;padding-block:clamp(32px,4vw,56px) clamp(48px,6vw,96px);border-top:1px solid rgba(255,255,255,.22);
  display:grid;gap:var(--r-16)}
@media(min-width:820px){.stoerer-karriere{grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(24px,3vw,48px)}}
.register-hell{color:rgba(255,255,255,.75)}
.stoerer-karriere-text{margin:0;font-family:var(--schrift);font-size:var(--t-text);line-height:1.3;letter-spacing:-.02em;
  color:rgba(255,255,255,.92);max-width:52ch}

/* Leistungsliste gekürzt + Pfeillink */
.leistungen-mehr{margin-top:var(--r-24);color:var(--rot)}
/* ============================ FOOTER (nach dem Gestaltungsvorbild) ============================ */
.fuss{background:var(--papier);border-top:1px solid var(--linie);padding:var(--r-64) 0 var(--r-32)}  /* kompakter (Feedback 15.09.) */
.fuss-inner{max-width:var(--max);margin:0 auto;padding-inline:var(--rand);
  display:grid;gap:var(--r-64)}
@media(min-width:900px){.fuss-inner{grid-template-columns:1fr minmax(300px,360px);gap:var(--r-64)}}
.fuss-kanaele{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--r-16) var(--r-96)}

.fuss-logo{display:flex;align-items:center;flex-wrap:wrap;gap:var(--r-24);margin:var(--r-32) 0}
.fuss-logo .bildmarke{height:clamp(80px,9vw,130px);width:auto}
.fuss-logo .wortmarke{height:clamp(40px,4.4vw,62px);width:auto}
.fuss-rechte{font-family:var(--schrift-label);font-size:var(--t-18);font-weight:400;letter-spacing:-.02em;text-transform:uppercase}
.fuss-rechte span{margin-right:var(--r-16)}

.register-grau{font-family:var(--schrift-label);font-size:var(--t-15);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);line-height:1.2;margin-top:var(--r-24)}
.register-grau:first-child{margin-top:0}
.fuss-rechts{display:flex;flex-direction:column;gap:var(--r-4)}
.fuss-wert{font-family:var(--schrift-label);font-size:clamp(18px,1.15vw,22px);font-weight:400;letter-spacing:0;line-height:1.2;
  font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r-12);
  min-height:40px}
.fuss-wert .was{font-family:var(--schrift-label);font-size:var(--t-15);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2)}
a.fuss-wert:hover{color:var(--rot)}
p.fuss-wert{min-height:0}

.newsletter{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--r-8)}
.newsletter .register-grau{margin-top:var(--r-24)}
.newsletter-feld{width:100%;min-height:var(--ziel-min);margin-top:var(--r-8);padding:var(--r-8) 0;border:0;border-bottom:1px solid var(--linie-stark);
  background:transparent;font-family:var(--schrift);font-size:var(--t-text);letter-spacing:-.02em;color:var(--tinte);border-radius:0}
.newsletter-feld::placeholder{color:var(--text-2)}
.newsletter-feld:focus{outline:none;border-bottom-color:var(--rot);box-shadow:0 1px 0 var(--rot)}
.newsletter-hinweis{margin:var(--r-8) 0 0;font-family:var(--schrift-label);font-size:var(--t-15);color:var(--rot);min-height:1.2em}
.newsletter-knopf{align-self:flex-end;margin-top:var(--r-8);background:transparent;border:0;cursor:pointer}
.fuss-standorte{max-width:var(--max);margin:var(--r-48) auto 0;padding-inline:var(--rand);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r-16) var(--r-48);
  border-top:1px solid var(--linie);padding-top:var(--r-32)}
.fuss-standorte .register-grau{margin:0}
.fuss-standorte ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--r-8) var(--r-32)}
.fuss-standorte li{font-family:var(--schrift-hl);font-size:var(--t-18);font-weight:500;letter-spacing:.09em}
.fuss-leiste{max-width:var(--max);margin:var(--r-32) auto 0;padding-inline:var(--rand);
  display:flex;flex-wrap:wrap;gap:var(--r-16) var(--r-32);font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:0;color:var(--text-2)}
.fuss-leiste a{color:var(--tinte);border-bottom:1px solid var(--linie-stark);min-height:var(--ziel-min);
  display:inline-flex;align-items:center}
.fuss-leiste a:hover{border-bottom-color:var(--rot)}
.fuss-leiste span{display:inline-flex;align-items:center;gap:6px;margin-left:auto}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pfeillink .pf:last-child{display:none}
  html{scroll-behavior:auto}
  .bildinner{transform:none!important}
}

/* ============================ HERO B2 · Vollbild mit Slides (17.09.) ============================
   Vollflaechiges Bild, Angaben auf mittlerer Hoehe, Claim unten links, Slides ueber Punkte.
   Abdunklung laeuft nach Rot Nacht, nicht nach Schwarz -- so bleibt die Marke auch im Bild.
   Die Slides wechseln nur auf Klick, nichts laeuft von selbst. */




.b2{position:relative;min-height:clamp(680px,100vh,1150px);  /* hoeher, ruhigerer Aufbau (Feedback 17.09.) */display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;color:var(--weiss);isolation:isolate}
.b2-bild{position:absolute;inset:0;z-index:-1}
.b2-bild img{width:100%;height:100%;object-fit:cover;object-position:72% 40%;display:block}
/* Das Duo steht im rechten Bilddrittel. Der Ausschnitt haelt es im Bild und laesst links
   Platz fuer den Claim; auf schmalen Schirmen rueckt er weiter auf die Personen (17.09.). */
@media(max-width:860px){.b2-bild img{object-position:83% 35%}}
/* Abdunklung nach Rot Nacht: unten kraeftig fuer den Claim, oben leicht fuer den Kopf */
.b2-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(53,9,10,.55) 0%,rgba(53,9,10,.22) 34%,rgba(53,9,10,.72) 100%)}

/* Zeile auf mittlerer Hoehe */

@media(min-width:860px){}



/* Claim unten links plus Steuerung */
/* max-width und margin:auto wie bei .rahmen (28.09.): mit blossem padding-inline klebte der
   Hero-Text auf breiten Bildschirmen am Fensterrand, waehrend Kopf und alle uebrigen
   Abschnitte mitwandern -- der Claim stand dadurch als Einziger aus der Flucht. */
.b2-unten{position:relative;z-index:1;display:grid;gap:var(--r-24);align-items:end;
  width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--rand) clamp(28px,5vh,64px)}
@media(min-width:900px){.b2-unten{grid-template-columns:1fr auto}}
.b2-slides{position:relative;min-height:clamp(150px,20vh,240px)}
.b2-slide{position:absolute;left:0;bottom:0;opacity:0;pointer-events:none}
.b2-slide.aktiv{opacity:1;pointer-events:auto}
.b2-claim{margin:0;font-family:var(--schrift-hl);font-weight:700;font-size:clamp(34px,5.2vw,86px);line-height:1.02;
  letter-spacing:-.03em;color:var(--weiss);max-width:18ch}
.b2-claim .rot-hell{color:var(--rot-hell)}
.b2-unter{margin:var(--r-16) 0 0;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.b2-steuerung{display:flex;flex-direction:column;align-items:flex-end;gap:var(--r-16)}
.b2-punkte{display:flex;gap:var(--r-12)}
.b2-punkt{width:48px;height:48px;border:0;background:transparent;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.b2-punkt::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .35s,transform .35s}
.b2-punkt.aktiv::before{background:var(--rot-hell);transform:scale(1.3)}
.b2-punkt:focus-visible{outline:3px solid var(--rot-hell);outline-offset:2px}
.b2-leiste{width:clamp(120px,14vw,220px);height:2px;background:rgba(255,255,255,.3);position:relative}
.b2-leiste-fuellung{position:absolute;left:0;top:0;height:100%;width:33.3%;background:var(--weiss);
  transition:width .5s cubic-bezier(.39,.52,0,1)}

/* ============================ KOPF ÜBER DEM VOLLBILD-HERO (17.09.) ============================
   Solange der Vollbild-Hero im Blick ist, liegt der Kopf durchsichtig darauf: keine helle Leiste,
   keine Trennlinie, Schrift und Logo in Weiss. Sobald ein heller Bereich beginnt, kehrt er in den
   normalen Zustand zurueck. Nur in der Vollbild-Variante aktiv.
   Kontrast: die Abdunklung des Bildes liegt oben bei 55 Prozent Rot Nacht, Weiss traegt darauf. */
.kopf{transition:background .45s cubic-bezier(.39,.52,0,1),border-color .45s}
.kopf--ueber-bild{background:transparent;border-bottom-color:transparent}
.kopf--ueber-bild .navi a,
.kopf--ueber-bild .kopf-anruf,
.kopf--ueber-bild .kopf-nr,
.kopf--ueber-bild .menue-auf{color:var(--weiss)}
/* Die Logodateien sind dunkel angelegt; hier werden sie auf Weiss gestellt */
.kopf--ueber-bild .logo .wortmarke{filter:brightness(0) invert(1)}
/* Auch die Bildmarke auf Weiss stellen, sonst steht sie rot-grau im dunklen Bild */
.kopf--ueber-bild .logo .bildmarke{filter:brightness(0) invert(1)}
.kopf--ueber-bild .navi a::before{background:var(--rot-hell)}
.kopf--ueber-bild .menue-auf i{background:var(--weiss)}
/* Mobil: Menue-Knopf ueber Bild/Dunkel ebenfalls weiss, sonst Tinte auf Foto (06.10.) */
#kopf.kopf--ueber-bild .menue-knopf{color:var(--weiss)}
/* Der Knopf bleibt gefuellt, damit die Hauptaktion nicht im Bild verschwindet */
.kopf--ueber-bild .kopf-knopf{border-color:var(--weiss)}

/* Der Vollbild-Hero muss unter dem Kopf beginnen, sonst steht weisse Schrift auf hellem Grund.
   Der Versatz wird im Script aus den echten Hoehen gerechnet (Kopf plus Varianten-Leiste),
   damit er bei jeder Bildschirmgroesse stimmt (17.09.). */
.b2{position:relative;z-index:0}


.tm-panorama-link::before,.tm-panorama-link::after{background:var(--weiss)}
.tm-panorama-link:hover{color:var(--rot-hell)}

/* --- Ihre Situation: Bild je Sparte (Feedback 17.09.) ---
   Platzhalter bis die Fotos aus dem Shooting vorliegen. Die Zeile bleibt dreispaltig:
   Nummer, Bild, Text. Beim Hover wandert das Bild leicht mit. */
.sit-zeile{grid-template-columns:auto auto 1fr auto}
.sit-bild{position:relative;display:none;width:clamp(96px,9vw,132px);aspect-ratio:4/3;flex:none;
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(17,16,14,.05) 12px 13px),var(--stein);
  align-self:start;overflow:hidden;transition:transform .5s cubic-bezier(.39,.52,0,1)}
@media(min-width:760px){.sit-bild{display:block}}
.sit-bild img{width:100%;height:100%;object-fit:cover;display:block}
.sit-bild-kennung{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--schrift-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rot);border:1px dashed var(--rot);padding:2px 6px;background:var(--papier)}
.sit-zeile:hover .sit-bild,.sit-zeile:focus-visible .sit-bild{transform:scale(1.04)}
.sit-zeile:hover .sit-bild-kennung,.sit-zeile:focus-visible .sit-bild-kennung{color:var(--weiss);border-color:var(--weiss);background:transparent}

/* --- Kleiner Umschalter zwischen den beiden Hero-Fassungen (17.09.) ---
   Nur fuer die Abstimmung gedacht, faellt vor dem Livegang weg. Bewusst klein und
   am unteren Rand, damit er den Hero nicht stoert. */
.hero-bereich{position:relative}
.hero-var[hidden]{display:none}
/* Fest am unteren Rand ueber dem Feedback-Knopf: im Hero selbst stoert er je nach Fassung
   entweder den Claim oder das Bild (Feedback 17.09.). */
.hero-tausch{position:fixed;right:var(--rand);top:calc(50% + 24px);z-index:70;  /* mittlere Hoehe: unten liegen jetzt Punkte und Balken (17.09.) */
  min-height:38px;padding:0 var(--r-12);border:1px solid rgba(255,255,255,.5);
  background:rgba(53,9,10,.45);backdrop-filter:blur(3px);color:var(--weiss);cursor:pointer;
  font-family:var(--schrift-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .35s,border-color .35s}
.hero-tausch:hover{background:var(--rot);border-color:var(--rot)}
.hero-tausch[aria-pressed="true"]{background:var(--papier);color:var(--tinte);border-color:var(--linie-stark)}

/* --- Zweite Schriftfassung: Inter mit dem Typo-System des LeeFinance-Beispiels (17.09.) ---
   Uebernommen sind nicht nur die Schrift, sondern auch Groessen, Laufweite, Zeilenabstand und
   Strichstaerken, so wie sie in deren Stylesheet stehen:
     Display  clamp(2.85rem, 7.4vw, 6.75rem), Zeilenabstand .96, Laufweite -.035em
     H2       clamp(2rem, 4.2vw, 3.5rem)
     Lead     clamp(1.0625rem, 1.32vw, 1.28rem)
     Text     clamp(1rem, 1.05vw, 1.0625rem), Zeilenabstand 1.65
     Meta     .8125rem, Laufweite .09em
   Gewichte dort: Ueberschriften 600, Text 400, Label 500. Hinweis: Inter ist auch dort
   ausdruecklich als Platzhalter vermerkt, die verbindliche Schrift liegt bei Christoph Michler. */
html.schrift-inter{
  --schrift-hl:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --schrift:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --schrift-label:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* Display: Claim im Hero und die grossen Sektionsueberschriften */
html.schrift-inter .b2-claim,
html.schrift-inter .claim,
html.schrift-inter .vh-titel,
html.schrift-inter .vh-frage{
  font-size:clamp(2rem,4.6vw,4.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:600;text-transform:none}
/* H2 */
html.schrift-inter .sit-titel-gross,
html.schrift-inter .ab-titel-gross,
html.schrift-inter .kns-titel,
html.schrift-inter .nw-titel,
html.schrift-inter .hor-titel-gross,
html.schrift-inter .vplatz-titel,
html.schrift-inter .cta-titel{
  font-size:clamp(1.6rem,2.9vw,2.5rem);line-height:1.12;letter-spacing:-.02em;font-weight:600;text-transform:none}
/* Lead und Fliesstext */
html.schrift-inter .sit-lead,
html.schrift-inter .ab-lead,
html.schrift-inter .kns-lead,
html.schrift-inter .nw-lead,
html.schrift-inter .vh-lead,
html.schrift-inter .vorlauf{line-height:1.6;font-weight:400;letter-spacing:0}
html.schrift-inter p,html.schrift-inter li{font-weight:400}
html.schrift-inter .sit-kurz,html.schrift-inter .sit-lang,
html.schrift-inter .ab-kurz,html.schrift-inter .hor-text,
html.schrift-inter .sta-text{line-height:1.6;letter-spacing:0}
/* Meta und Label */
html.schrift-inter .register,
html.schrift-inter .b2-unter,
html.schrift-inter .sit-nr,html.schrift-inter .ab-nr,
html.schrift-inter .kns-fuss,html.schrift-inter .nw-kennung{
  letter-spacing:.09em;font-weight:500}
/* Zeilennummern und Titel in Listen bleiben in H3-Groesse */
html.schrift-inter .sit-titel,html.schrift-inter .ab-titel,
html.schrift-inter .hor-titel,html.schrift-inter .vw-titel{
  letter-spacing:-.02em;font-weight:600;text-transform:none}

.schrift-tausch{position:fixed;right:var(--rand);top:calc(50% - 24px);z-index:70;
  min-height:38px;padding:0 var(--r-12);border:1px solid rgba(255,255,255,.5);
  background:rgba(53,9,10,.45);backdrop-filter:blur(3px);color:var(--weiss);cursor:pointer;
  font-family:var(--schrift-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .35s,border-color .35s}
.schrift-tausch:hover{background:var(--rot);border-color:var(--rot)}
.schrift-tausch[aria-pressed="true"]{background:var(--papier);color:var(--tinte);border-color:var(--linie-stark)}

/* --- Pausenknopf im Hero (17.09.) ---
   Eine selbstlaufende Bewegung braucht eine Moeglichkeit zum Anhalten, die auch
   ohne Maus erreichbar ist. Hovern allein genuegt dafuer nicht. */
.b2-steuerung{flex-direction:row;align-items:center;gap:var(--r-12)}

/* zwei Balken = Pause */


/* gedrueckt = angehalten: Dreieck statt Balken */




/* ============================ FEINSCHLIFF (17.09.) ============================ */

/* --- Kundenstimmen: abgerundete Ecken und ein weicher Schatten dahinter ---
   Hinweis: Die Leitdatei schliesst Rundungen und Weichzeichnung eigentlich aus
   (Abschnitt 5, "Material statt Dekoration"). Auf ausdruecklichen Wunsch hier gesetzt,
   der Schatten bleibt in Rot Nacht statt neutralem Schwarz. */
.ks-d-vorschau{border-radius:14px;box-shadow:0 26px 60px -34px rgba(53,9,10,.55)}
.ks-d-vorschau img,.ks-d-vorschau iframe,.ks-d-vorschau::after{border-radius:14px}

/* --- Team-Panorama: Pfeillink in Weiss, mehr Luft zur Ueberschrift (17.09.) ---
   Kein gefuellter Knopf, sondern die gewohnte Form aus Text, Pfeil und Unterstrich,
   nur eben durchgehend weiss fuer den dunklen Grund. */
.tm-panorama-link{margin-top:clamp(28px,3.4vw,52px);color:var(--weiss);white-space:nowrap}  /* einzeilig, sonst laeuft der Unterstrich durch den Umbruch */
.tm-panorama-link::before,.tm-panorama-link::after{background:var(--weiss)}
.tm-panorama-link .pf svg{stroke:var(--weiss)}
.tm-panorama-link:hover{color:var(--weiss)}

/* --- Ihre Situation: das Bild erscheint erst beim Hover, zusammen mit der roten Flaeche --- */
.sit-bild{opacity:0;transform:scale(.94);
  transition:opacity .45s cubic-bezier(.39,.52,0,1),transform .5s cubic-bezier(.39,.52,0,1)}
.sit-zeile:hover .sit-bild,.sit-zeile:focus-visible .sit-bild,
.sit-zeile.dran .sit-bild{opacity:1;transform:scale(1)}

/* --- Zweite Schriftfassung: durchgehend ohne Versalien, wie im Vorbild --- */
html.schrift-inter h1,html.schrift-inter h2,html.schrift-inter h3,
html.schrift-inter .claim,html.schrift-inter .b2-claim,
html.schrift-inter .ks-titel,html.schrift-inter .tm-panorama-titel,
html.schrift-inter .sit-titel,html.schrift-inter .zahlen-wert,
html.schrift-inter .uf-titel,html.schrift-inter .vw-titel,
html.schrift-inter .b2-unter,html.schrift-inter .register,
html.schrift-inter .sit-nr,html.schrift-inter .ks-d-nr,
html.schrift-inter .kopf-knopf,html.schrift-inter .navi a{text-transform:none}
/* Register und Zahlen bleiben als ruhige Meta-Zeile erkennbar, nur eben gemischt gesetzt */
html.schrift-inter .register{letter-spacing:.06em;font-weight:500}

/* --- Inter: Wortabstand zuruecksetzen (17.09.) ---
   Die Ueberschriften tragen word-spacing:.18em. Das gleicht in der Originalschrift die enge
   Laufweite bei Versalien aus. Inter laeuft ohnehin offener und steht gemischt gesetzt,
   dort wirkt derselbe Wert wie ein Fehler. */
html.schrift-inter h1,html.schrift-inter h2,html.schrift-inter h3,
html.schrift-inter .claim,html.schrift-inter .b2-claim,
html.schrift-inter .film-titel,html.schrift-inter .ks-titel,
html.schrift-inter .tm-panorama-titel,html.schrift-inter .sit-titel-gross,
html.schrift-inter .ab-titel-gross,html.schrift-inter .kns-titel,
html.schrift-inter .nw-titel,html.schrift-inter .hor-titel-gross,
html.schrift-inter .cta-titel,html.schrift-inter .vplatz-titel,
html.schrift-inter .zahlen-titel,html.schrift-inter .weiche-titel,
html.schrift-inter .ang-titel,html.schrift-inter .kreis-titel{word-spacing:normal}

/* --- Inter: alle grossen Sektionsueberschriften auf denselben ruhigeren Massstab (17.09.) ---
   Zuvor griff die Regel nur bei einem Teil der Klassen, der Rest blieb auf Originalgroesse. */
html.schrift-inter .film-titel,
html.schrift-inter .angebote-titel,
html.schrift-inter .ks-titel,
html.schrift-inter .team-titel,
html.schrift-inter .tm-panorama-titel,
html.schrift-inter .sit-titel-gross,
html.schrift-inter .hor-titel-gross,
html.schrift-inter .cta-titel,
html.schrift-inter .stoerer-titel,
html.schrift-inter .wd-titel{
  font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.12;letter-spacing:-.02em;
  font-weight:600;text-transform:none;word-spacing:normal}
html.schrift-inter .sit-titel,
html.schrift-inter .hor-titel,
html.schrift-inter .kn-info-titel{text-transform:none;word-spacing:normal;letter-spacing:-.01em}

/* ============================ FEINSCHLIFF II (17.09.) ============================ */

/* --- Ihre Situation: Text ganz links, Bild erscheint rechts beim Pfeil ---
   Das Bild nimmt im Ruhezustand keinen Platz mehr ein, sondern liegt ueber der Zeile
   und blendet erst beim Hover ein, zusammen mit der roten Flaeche. */
.sit-zeile{grid-template-columns:auto 1fr auto auto}
.sit-bild{position:absolute;right:calc(var(--r-48) + 72px);top:50%;  /* mehr Luft zum Pfeil (Feedback 17.09.) */
  transform:translateY(-50%) scale(.94);display:none;z-index:2;
  width:clamp(110px,10vw,150px);aspect-ratio:4/3;
  box-shadow:0 18px 40px -26px rgba(53,9,10,.6)}
@media(min-width:760px){.sit-bild{display:block}}
.sit-zeile:hover .sit-bild,.sit-zeile:focus-visible .sit-bild{
  opacity:1;transform:translateY(-50%) scale(1)}

/* --- Inter: keine Versalien mehr, nirgends. Bei langen Zeilen ist das schwer zu lesen. --- */
html.schrift-inter *{text-transform:none}
/* Die Register bleiben als ruhige Meta-Zeile erkennbar, nur eben gemischt gesetzt */
html.schrift-inter .register,html.schrift-inter .b2-unter{letter-spacing:.06em;font-weight:500}

/* --- Inter: die Ueberschrift auf dem Teambild braucht mehr Gewicht --- */
html.schrift-inter .tm-panorama-titel{font-weight:700}
.tm-panorama-titel{text-wrap:balance;max-width:22ch}  /* sonst bricht sie dreizeilig und ein Wort steht allein */

/* --- Pfeillink auf dem Teambild: mehr Raum fuer den Pfeil (17.09.) ---
   Der Pfeil sitzt absolut am rechten Rand. Durch das einzeilige Setzen reichte der
   bisherige Abstand nicht mehr, er lag im Wort. */
/* Der Link wurde vom Elternelement beschnitten, dadurch lag der rechts verankerte Pfeil
   im Wort. max-width:none loest die Begrenzung, overflow bleibt sichtbar (17.09.). */
.tm-panorama-link{padding-right:64px;max-width:none}
/* overflow bleibt hidden: der zweite Pfeil gehoert zur Hover-Bewegung und darf nicht sichtbar sein */

/* --- Hero-Steuerung nach dem Vorbild (17.09.) ---
   Punkte in Weiss statt Rot, der aktive voll deckend, die uebrigen zurueckgenommen.
   Darunter ein breiterer Balken: heller Grund, weisse Fuellung. */
.b2-steuerung{flex-direction:column;align-items:flex-end;gap:var(--r-12)}
.b2-punkte{gap:var(--r-8)}
.b2-punkt{width:32px;height:32px}
.b2-punkt::before{width:9px;height:9px;background:rgba(255,255,255,.45);transform:none}
.b2-punkt.aktiv::before{background:var(--weiss);transform:none}
.b2-leiste{width:clamp(110px,13vw,190px);height:2px;background:rgba(255,255,255,.35)}  /* kuerzer und feiner (Feedback 17.09.) */
.b2-leiste-fuellung{background:var(--weiss)}
/* Der Pausenknopf bleibt, aber im selben zurueckgenommenen Weiss wie die Punkte.
   Ohne ihn gaebe es keine Moeglichkeit, die selbstlaufende Bewegung anzuhalten. */


.b2-reihe{display:flex;align-items:center;gap:var(--r-8)}

/* ============================ RUNDUNGEN UND TEMPO (17.09.) ============================
   Hinweis: Die Leitdatei schliesst Rundungen aus (Abschnitt 5). Auf Wunsch gesetzt,
   und zwar bewusst nur an Bildern und Videos -- alle tragenden Flaechen, Knoepfe und
   Register bleiben eckig. Genau dieser Gegensatz war der Gedanke dahinter. */
:root{--rund-medien:14px}

/* Film */
.film-box{border-radius:var(--rund-medien);overflow:hidden;
  box-shadow:0 28px 64px -36px rgba(53,9,10,.5)}
.film-box iframe,.film-box video,.film-platzhalter{border-radius:var(--rund-medien)}

/* Objektkarten in den Angeboten */
.card{border-radius:var(--rund-medien);overflow:hidden;
  box-shadow:0 22px 52px -34px rgba(53,9,10,.45)}
.card img,.card__veil{border-radius:var(--rund-medien)}

/* Teamportraets */
.team-block__wrapper{border-radius:var(--rund-medien);overflow:hidden}
.team-block__wrapper img{border-radius:var(--rund-medien)}

/* Teampanorama und Bild im Abschluss */
.tm-panorama{border-radius:var(--rund-medien);overflow:hidden}
.tm-panorama img{border-radius:var(--rund-medien)}
.cta-bild{border-radius:var(--rund-medien);overflow:hidden}

/* Bild je Sparte in Ihre Situation */
.sit-bild{border-radius:var(--rund-medien);overflow:hidden}
.sit-bild img{border-radius:var(--rund-medien)}

/* Notarfotos */
.nw-feld{border-radius:10px;overflow:hidden}

/* Der Hero bleibt vollflaechig und damit eckig, sonst entsteht ein Rahmen um die ganze Seite. */

/* --- Uebergang Hero zur Weiche (17.09.) ---
   Der obere Innenabstand erzeugte einen hellen Streifen zwischen Bild und den beiden
   Bloecken. Jetzt stossen sie direkt an den Hero, der Wechsel von Bild zu Farbe
   passiert an einer Kante statt in einer Pause. */
.weiche{padding-top:0}

/* --- Angebote: Objektkarten bleiben eckig (Feedback 17.09.) ---
   Bei einer Flaeche aus vielen Bildern wirken Rundungen unruhig. */
.card{border-radius:0}
.card img,.card__veil{border-radius:0}

/* --- Abstand vor dem Ablauf verringern (17.09.) ---
   Zwischen Wirkungskreis und Ablauf standen rund 144 Pixel. Das war mehr Luft als
   zwischen allen anderen Sektionen und liess den Ablauf abgehaengt wirken. */
.ablauf{padding-top:clamp(40px,5vw,72px)}

/* --- Hero oben links: Register und Beweiszeile (17.09.) ---
   Das Register nennt den Wirkungskreis, ohne Braunschweig zu bewerben -- so sieht es die
   Leitdatei vor. Die Beweiszeile steht vorerst rein typografisch, bis die Logo-Freigaben
   je Marke vorliegen. Regionalpresse fehlt bewusst, dort ist die Freigabe offen. */
.b2{justify-content:space-between}
.b2-oben{position:relative;z-index:1;padding:clamp(88px,14vh,180px) var(--rand) 0;  /* weiter nach unten (17.09.) */
  width:100%;max-width:var(--max);margin-inline:auto;   /* auf der Flucht, siehe .b2-unten (28.09.) */
  display:flex;flex-direction:column;gap:var(--r-16);color:var(--weiss)}
/* Durchgehende Grossschreibung in normaler Stärke, wie im Vorbild. Kapitaelchen werden
   in dieser Schrift vom Browser nachgebildet und wirken dadurch duenner und unruhiger (17.09.). */
.b2-register{margin:0;font-family:var(--schrift-hl);font-size:var(--t-15);font-weight:400;
  letter-spacing:.06em;line-height:1.85;text-transform:uppercase;  /* kleiner, damit es den Claim nicht konkurriert (17.09.) */
  font-variant-caps:normal;color:var(--weiss)}




/* --- Teampanorama wieder eckig (Feedback 17.09.) ---
   Auch das ist eine grosse zusammenhaengende Bildflaeche, dort wirkt die Rundung unruhig. */
.tm-panorama{border-radius:0}
.tm-panorama img{border-radius:0}

/* --- Inter: Unterlaengen im Claim nicht abschneiden (17.09.) ---
   Die Zeilen sind fuer die Einlauf-Animation beschnitten (.zeile{overflow:hidden}).
   Bei einem Zeilenabstand von 1,04 lag die Unterlaenge von g, y und p unter der Kante.
   Etwas mehr Abstand plus ein wenig Luft nach unten loest das, ohne die Maske zu stoeren. */
html.schrift-inter .claim{line-height:1.14}
html.schrift-inter .claim .zeile{padding-bottom:.08em}
html.schrift-inter .b2-claim{line-height:1.12;padding-bottom:.04em}

/* --- Ausnahme in der Inter-Fassung (17.09.) ---
   Dort steht sonst nirgends etwas in Versalien. Das Register im Hero ist die Ausnahme:
   es ist kurz, es ist Meta-Information und soll in beiden Fassungen gleich aussehen. */
html.schrift-inter .b2-register{text-transform:uppercase;font-weight:400;letter-spacing:.06em}

/* --- Inter: Groessen anheben (17.09.) ---
   Die Fassung wirkte insgesamt zu klein. Wichtiger noch: der Fliesstext lag bei 15px und
   damit unter dem Mindestwert von 18px aus der Leitdatei (Abschnitt 4, Presbyopie ab 45).
   Diese Regeln stehen bewusst am Ende und ueberschreiben die frueheren Inter-Werte. */
html.schrift-inter .b2-claim,
html.schrift-inter .vh-titel,
html.schrift-inter .claim{font-size:clamp(2.3rem,5.4vw,4.7rem)}
/* Die Hero-Zeile der Landingpage folgt dem Claim der Startseite (05.10.) */
html.schrift-inter .vh-titel{line-height:1.12;padding-bottom:.04em}
html.schrift-inter .film-titel,
html.schrift-inter .angebote-titel,
html.schrift-inter .ks-titel,
html.schrift-inter .team-titel,
html.schrift-inter .tm-panorama-titel,
html.schrift-inter .sit-titel-gross,
html.schrift-inter .hor-titel-gross,
html.schrift-inter .cta-titel,
html.schrift-inter .stoerer-titel,
html.schrift-inter .wd-titel,
html.schrift-inter .nw-titel,
html.schrift-inter .vplatz-titel{font-size:clamp(2rem,3.9vw,3.4rem)}
html.schrift-inter .sit-lead,
html.schrift-inter .ab-lead,
html.schrift-inter .kns-lead,
html.schrift-inter .nw-lead,
html.schrift-inter .vh-lead,
html.schrift-inter .vorlauf{}
/* Fliesstext: nie unter 18px */
html.schrift-inter p,html.schrift-inter li,
html.schrift-inter .sit-kurz,html.schrift-inter .ab-kurz,
html.schrift-inter .hor-text,html.schrift-inter .sta-text{}
/* Die Langtexte folgen dem Original, damit die Zeilen dort nicht ausufern */
html.schrift-inter .sit-lang{}
html.schrift-inter .sit-titel{}


/* ============================ UEBERGANG · Wischen nach oben (18.09.) ============================
   Aufbau wie im LeeFinance-Beispiel: eine hohe Sektion, darin eine feststehende Buehne,
   in der die dunkle Flaeche beim Scrollen von unten heraufwaechst. Der Verlauf ist wieder
   aus Lichtkegeln und Koernung gebaut, nicht linear -- Toene ausschliesslich aus der Marke. */
/* Die Sektion beansprucht keinen eigenen Scrollweg: der negative Rand legt sie ueber den
   letzten Bildschirm der Kundenstimmen. Dadurch scrollt man nicht an ihnen vorbei, sondern
   die dunkle Flaeche steigt darueber (Feedback 18.09.). */
.wisch{position:relative;z-index:3;height:200vh;margin-top:-100vh;pointer-events:none}
/* Nach dem Aufsteigen uebernimmt der Grund des Zuges; der Vorhang blendet sich weg,
   statt nach oben abzuziehen -- sonst schob er sich sichtbar ueber das Team. */
/* Die Buehne haftet am unteren Fensterrand, solange die Sektion im Blick ist. Dadurch
   steigt die Flaeche am Bildschirm hoch und nicht am Abschnitt (gemessen 18.09.). */
.wisch-buehne{position:absolute;inset:0}
.wisch-inhalt{pointer-events:auto}
/* Am Fenster geheftet statt im Seitenfluss: nur so steigt die Flaeche ueber die
   Kundenstimmen, bleibt eine Bildschirmlaenge stehen und zieht dann weiter. Ausserhalb
   ihres Bereichs liegt sie durch die Verschiebung unter- oder oberhalb des Bildes. */
.wisch-flaeche{position:fixed;inset:0;display:grid;place-items:center;
  color:var(--weiss);will-change:transform;
  background-color:var(--rot-nacht);
  background-image:
    radial-gradient(110% 85% at 0% 100%, rgba(228,226,221,.14) 0%, rgba(228,226,221,0) 62%),
    radial-gradient(85% 70% at 100% 0%, rgba(106,12,15,.45) 0%, rgba(106,12,15,0) 62%),
    linear-gradient(165deg,#2a1012 0%,var(--rot-nacht) 70%)}
.wisch-flaeche::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;opacity:.16;mix-blend-mode:screen}
.wisch-inhalt{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:var(--r-16)}
.wisch-titel{margin:0;font-family:var(--schrift-hl);font-weight:700;
  font-size:clamp(30px,4.4vw,68px);line-height:1.08;letter-spacing:-.03em;color:var(--weiss)}
.wisch-text{margin:0;font-family:var(--schrift);font-size:var(--t-18);line-height:1.6;
  color:rgba(255,255,255,.75);max-width:46ch}
.wisch-inhalt .knopf-primaer{margin-top:var(--r-12)}
/* Den Startversatz setzt ausschliesslich das Skript. Stuende er zusaetzlich hier im CSS,
   laese GSAP ihn als Ausgangswert und addierte seinen eigenen dazu -- die Flaeche
   legte dann den doppelten Weg zurueck (gemessen und behoben 18.09.). */

/* ============================ FEINSCHLIFF III (18.09.) ============================ */

/* --- Notarwand vorerst ausgeblendet (Feedback 18.09.) ---
   Markup und Stile bleiben stehen, damit sie sich mit einer Zeile zurueckholen laesst,
   sobald Kristin die echten Fotos und die Zahl geliefert hat. */
.notarwand{display:none}

/* --- Kundenstimmen weichzeichnen, waehrend die dunkle Flaeche darueber steigt --- */
.kundenstimmen{will-change:filter}

/* --- Team in denselben Markentoenen wie der Uebergang, mit wandernden Lichtkegeln ---
   Die Kegel sitzen auf zwei Variablen, die beim Scrollen bewegt werden. Dadurch
   entsteht das langsame Wandern des Lichts statt eines starren Verlaufs. */
/* Ein Grund fuer den ganzen Zug statt eines Verlaufs je Sektion. */
.dunkelzug{position:relative;isolation:isolate;color:var(--weiss);
  --g1x:0%; --g1y:100%; --g2x:100%; --g2y:0%;
  background-color:var(--rot-nacht)}
.dunkelzug::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(70% 45% at var(--g1x) var(--g1y), rgba(228,226,221,.18) 0%, rgba(228,226,221,0) 62%),
    radial-gradient(85% 55% at var(--g2x) var(--g2y), rgba(106,12,15,.5) 0%, rgba(106,12,15,0) 62%),
    linear-gradient(165deg,#2a1012 0%,var(--rot-nacht) 70%)}
.dunkelzug::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;opacity:.16;mix-blend-mode:screen}
.dunkelzug > *{position:relative;z-index:1}
/* Die Sektionen im Zug tragen selbst keinen Grund mehr, sonst entstuende eine Kante. */
.team,.team-mehr{background:transparent}
/* Schrift und Linien auf den dunklen Grund umstellen */
.team .team-titel,.team .team-block__name-vor{color:var(--weiss)}
.team .team-titel .rot{color:var(--rot-hell)}
.team .register{color:rgba(255,255,255,.7)}
.team .team-vorlauf,.team .team-block__rolle-vor,.team .rolle,.team .text{color:rgba(255,255,255,.75)}
.team .pfeillink{color:var(--weiss)}
.team .pfeillink::before,.team .pfeillink::after{background:var(--weiss)}
.team .pfeillink .pf svg{stroke:var(--weiss)}
.team .ecke{border-color:rgba(255,255,255,.25)}

/* ============================ FEINSCHLIFF IV (21.09.) ============================ */

/* --- Seitenrand auf dem Desktop etwas schmaler, Menue und Inhalt dadurch breiter --- */
:root{--rand:clamp(16px,3.2vw,44px)}

/* --- Zahlen: Titel darf nicht in die Nachbarkachel laufen ---
   Bei schmaleren Desktops lief Versprechen ueber die Kachelgrenze. Die Groesse haengt
   jetzt enger an der Fensterbreite, und das Wort darf im Notfall umbrechen statt zu
   ueberlappen. */
.zahlen-titel .zeile-1,.zahlen-titel .zeile-2{font-size:clamp(38px,4.7vw,78px);
  overflow-wrap:anywhere;hyphens:auto}
.zahlen-titel{min-width:0;overflow:hidden}

/* --- Kundenstimmen: andocken, kurz stehen, dann ueberlagert der Vorhang (21.09.) ---
   Die Sektion haftet mit ihrer UNTERKANTE am Fensterrand (der obere Wert wird im Skript
   als negative Zahl gesetzt). Solange man durch die Haltezone scrollt, steht sie still,
   und der Vorhang steigt darueber. Unter der letzten Stimme bleibt Weissraum stehen. */
.ks-zug{position:relative}
/* Doppelte Klasse, weil eine aeltere Regel position:relative setzt. Ohne sticky wirkt der
   negative Wert als Verschiebung nach oben statt als Haftpunkt (gemessen 21.09.). */
/* Der Weissraum unten ist so bemessen, dass auch die letzte Stimme die Ausloeselinie
   bei 27 bis 38 Prozent Fensterhoehe erreicht, BEVOR die Sektion andockt. Mit weniger
   Raum blieb Lea P. unterhalb der Linie und kam nie dran (gemessen 21.09.). */
.ks-zug > .kundenstimmen{position:sticky;top:var(--ks-top,0px);padding-bottom:62vh}
.ks-halt{height:165vh}
/* Der Vorhang braucht keinen eigenen Platz im Seitenfluss mehr: er ist ans Fenster
   geheftet. Der rote Block, in den man vorher hineinscrollte, entfaellt dadurch. */
.wisch{height:0 !important;margin:0 !important}

/* ============================ FEINSCHLIFF V (21.09.) ============================ */

/* --- Weiche: Text in der Flucht des Menues ---
   Links beginnt der Text jetzt auf der Hoehe des Logos, rechts endet er auf der Hoehe
   des Menues. Vorher stand er mit eigenem, groesserem Innenabstand eingerueckt. */
@media(min-width:760px){
  .wd-grid{grid-template-columns:1fr 1fr}
  .wd-feld:first-child{padding-left:var(--rand)}
  .wd-feld:last-child{padding-right:var(--rand)}
}

/* --- Ablauf: der Laufstreifen bleibt in den Seitenraendern ---
   Die Karten laufen nicht mehr bis an den Fensterrand, sondern werden auf Hoehe der
   Ueberschrift darueber abgeschnitten. */
/* Laufstreifen auf den Linien des Kopfes: beginnt am Logo, endet am Ende des Menues.
   Die beiden Werte misst das Skript am echten Kopf (--menue-l, --menue-r, 21.09.). */
.hor-innen{clip-path:inset(0 var(--menue-r,var(--rand)) 0 var(--menue-l,var(--rand)))}
.hor-spur{padding-left:var(--menue-l,var(--rand));padding-right:var(--menue-r,var(--rand))}

/* --- Angebote: Kreisknopf auf dem Desktop kleiner --- */
.card .bento-kreis,.cta-kreis{width:clamp(96px,7.2vw,132px);height:clamp(96px,7.2vw,132px)}
.card .bento-kreis{font-size:var(--t-15)}

/* --- Weissraum unter den Kundenstimmen halbiert --- */
.ks-zug > .kundenstimmen{padding-bottom:31vh}

/* --- Aufruf im Vorhang: flaechiger, er ist der grosse Abschluss vor dem Team --- */
.wisch-titel{font-size:clamp(44px,7.4vw,124px);line-height:1;letter-spacing:-.035em}
.wisch-text{font-size:clamp(18px,1.4vw,22px)}

/* ============================ EIN GRUND FUER VORHANG UND ZUG (21.09.) ============================
   Vorhang und dunkler Zug zeigen denselben Verlauf, beide ans FENSTER geheftet
   (background-attachment:fixed). An der Nahtstelle sind die Pixel dadurch identisch,
   es gibt weder Kante noch sichtbare Ueberlappung. Der Vorhang bewegt sich nicht mehr
   ueber transform -- transform wuerde den gehefteten Grund wieder an das Element binden --,
   sondern wird ueber clip-path aufgedeckt. Die Lichtkegel sitzen auf Variablen an :root
   und wandern beim Scrollen ueber den ganzen Zug. */
:root{--g1x:0%;--g1y:100%;--g2x:100%;--g2y:0%}
.wisch-flaeche,.dunkelzug{
  background-color:var(--rot-nacht);
  background-image:
    radial-gradient(48% 40% at var(--g1x) var(--g1y), rgba(236,232,226,.46) 0%, rgba(236,232,226,.18) 40%, rgba(236,232,226,0) 72%),
    radial-gradient(80% 58% at var(--g2x) var(--g2y), rgba(106,12,15,.4) 0%, rgba(106,12,15,0) 62%),
    linear-gradient(165deg,#2a1012 0%,var(--rot-nacht) 70%);
  background-attachment:fixed,fixed,fixed}
.wisch-flaeche::before,.dunkelzug::after{
  background-attachment:fixed}
.dunkelzug::before{display:none}

/* Ohne Skript steht der Aufruf einfach im Fluss, nichts liegt ueber der Seite. */
html:not(.js-zug) .wisch{height:auto !important}
html:not(.js-zug) .wisch-flaeche{position:relative;min-height:100vh}
/* Mit Skript: am Fenster geheftet, zunaechst vollstaendig zugedeckt */
/* Doppelt gesichert: die Maske verdeckt, und zusaetzlich ist die Flaeche unsichtbar,
   bis das Skript sie in ihrem Bereich einschaltet. Safari braucht fuer die Maske teils
   noch die -webkit-Schreibweise; faellt sie aus, bleibt die Flaeche trotzdem verborgen
   (21.09., Rueckmeldung: rote Flaeche erschien schon bei den Angeboten). */
html.js-zug .wisch-flaeche{position:fixed;inset:0;
  -webkit-clip-path:inset(100% 0 0 0);clip-path:inset(100% 0 0 0);
  visibility:hidden;transform:none !important}

/* --- Weiche in der Flucht des MENUES, nicht des Logos (21.09.) ---
   Links beginnt der Text am ersten Menuepunkt, rechts endet er am letzten. Die beiden
   Werte misst das Skript am echten Menue, damit es bei jeder Breite stimmt. */
@media(min-width:1000px){
  .wd-feld:first-child{padding-left:var(--menue-l,var(--rand))}
  .wd-feld:last-child{padding-right:var(--menue-r,var(--rand))}
}

/* --- Team: nicht gehoverte Person ebenfalls weiss (21.09.) --- */
.team .team-block,.team .team-block *{color:var(--weiss)}
.team .team-block .rot{color:var(--rot-hell)}
.team .team-block .pfeillink::before,.team .team-block .pfeillink::after{background:var(--weiss)}

/* --- Inter: Sektionsueberschriften bei Film und Angeboten groesser (21.09.) --- */
html.schrift-inter .film-titel,
html.schrift-inter .angebote-titel{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1.05}
html.schrift-inter .angebote-lead{font-size:clamp(1.15rem,1.4vw,1.35rem)}

/* ============================ TEAMFOTO · kurzes Vollbild (21.09.) ============================
   Die Sektion wird hoch, das Bild haftet als Buehne im Fenster. Beim Scrollen oeffnet sich
   das Band zum Vollbild, der Bildausschnitt wandert so, dass die Gruppe mittig steht, die
   Schrift und das Menue treten zurueck. Nach einem kurzen Halt schiebt sich die helle
   Sektion darunter herauf -- ohne Kante, im normalen Seitenfluss. */
.team-mehr{position:relative;height:240vh;background:transparent}
.team-mehr .tm-panorama{position:sticky;top:0;height:100vh;aspect-ratio:auto;
  --tm-x:50%;--tm-schleier:1;background:transparent}
.team-mehr .tm-panorama img{object-position:var(--tm-x) 42%}
.team-mehr .tm-panorama::after{opacity:var(--tm-schleier)}
/* Menue waehrend des Vollbilds ausblenden */
.kopf{transition:transform .45s cubic-bezier(.39,.52,0,1)}
html.kopf-weg .kopf{transform:translateY(-100%)}
@media(max-width:900px){.team-mehr{height:auto}.team-mehr .tm-panorama{position:relative;height:auto;aspect-ratio:21/9}}

/* Hero-Bild ab 21.09.: Ausschnitt auf dem Handy auf die Mitte zwischen beiden Gesichtern
   gelegt (83 %), damit Kristin und Simon beide im Bild sind. */

/* 21.09.: Aus allen Inter-Regeln fuer Fliesstext, Register, Sparten und Absaetze die
   Schriftgroesse entfernt. Sie griffen breiter als gewollt -- unter anderem schrumpften die
   grossen Woerter im Wirkungskreis von 98 auf 18 Pixel, dadurch hatte die Animation dort
   nichts mehr zu tun. Inter unterscheidet sich jetzt nur noch in Schriftart, Schreibweise,
   Laufweite und den ausdruecklich gewuenschten groesseren Sektionsueberschriften. */

/* ============================ FEINSCHLIFF VI (21.09.) ============================ */

/* --- Weniger Abstand nach dem Ablauf ---
   Die feststehende Buehne war 100vh hoch, der Inhalt endet aber bei rund 80 Prozent.
   Zusammen mit dem Innenabstand standen gut 400 Pixel bis zur naechsten Ueberschrift. */
@media(min-width:769px){.hor-innen{height:82vh}}
.ablauf{padding-bottom:clamp(24px,3vw,48px)}

/* --- Hero: Abdunklung um die beiden herum deutlich leichter ---
   Vorher lag ein senkrechter Verlauf bis 72 Prozent Rot Nacht ueber der ganzen Breite,
   also auch ueber Kristin und Simon. Jetzt dunkelt ein waagerechter Verlauf nur die linke
   Haelfte ab, wo Register und Claim stehen; oben bleibt ein Hauch fuer die Kopfzeile,
   unten ein leichter Boden. Rechts bei den Personen ist das Bild nahezu unberuehrt. */
.b2-bild::after{
  background:
    linear-gradient(90deg, rgba(53,9,10,.62) 0%, rgba(53,9,10,.38) 32%, rgba(53,9,10,.08) 58%, rgba(53,9,10,0) 72%),
    linear-gradient(to bottom, rgba(53,9,10,.34) 0%, rgba(53,9,10,0) 22%, rgba(53,9,10,0) 64%, rgba(53,9,10,.38) 100%);
  opacity:var(--b2-schleier,1)}
@media(max-width:860px){
  /* Auf dem Handy steht der Claim ueber den Personen, dort braucht es unten mehr Boden */
  .b2-bild::after{background:linear-gradient(to bottom, rgba(53,9,10,.4) 0%, rgba(53,9,10,.05) 30%, rgba(53,9,10,.1) 55%, rgba(53,9,10,.72) 100%)}
}

/* --- Team: Eckquadrate auf dunklem Grund in Markenrot (21.09.) ---
   In Tinte waren sie auf dem dunklen Zug nicht zu sehen. */
.team .team-block .ecke{background:var(--rot-hell)}

/* --- Abschluss: Bild von Kristin im Gespraech (21.09.) ---
   Sie sitzt links der Bildmitte, daher der Ausschnitt etwas nach links. */
.cta-bild img{object-position:38% 40%}

/* --- Kopf ueber dem dunklen Zug (21.09.) ---
   Durchsichtig wie ueber dem Hero, aber mit einem weichen Verlauf aus Rot Nacht dahinter.
   Ohne ihn lief beim Scrollen Text direkt unter die Menuepunkte. Der Verlauf endet
   unterhalb des Kopfes im Nichts, es entsteht also kein Balken. */
/* Der Verlauf liegt auf einer eigenen Ebene, die weit unter den Kopf reicht. Auf der
   Kopfhoehe selbst fiel er zu steil ab, das Auge sah dort eine Kante. */
.kopf.kopf--dunkelzug::before{content:"" !important;opacity:1 !important;position:absolute;left:0;right:0;top:0;
  height:190px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(42,12,13,.9) 0%, rgba(42,12,13,.72) 34%, rgba(42,12,13,.32) 64%, rgba(42,12,13,.08) 86%, rgba(42,12,13,0) 100%)}
.kopf.kopf--dunkelzug{border-bottom-color:transparent !important;box-shadow:none !important}
.kopf.kopf--dunkelzug::after{opacity:0 !important}

/* --- Mehr Luft unter der Kontakt-Sektion (21.09.) --- */
.cta{padding-bottom:clamp(120px,14vw,210px)}

/* ============================ VERLAEUFE IN ANTHRAZIT (21.09.) ============================
   Zum Vergleich: alle Verlaeufe in Anthrazit statt Rot Nacht. Das Anthrazit stammt aus der
   Neutralleiter der Leitdatei (Tinte weich #292724, Tinte #11100E, Farbwinkel 42) und ist
   damit dem warmen Grau des Logos verwandt, kein neutrales Schwarz. Rot bleibt nur dort,
   wo es Bedeutung traegt: Akzentwoerter, Knoepfe, Markierungen.
   Hinweis: Die Leitdatei setzt fuer dunkle Kapitel ausdruecklich Rot Nacht statt Schwarz
   (Abschnitt 5). Anthrazit ist eine bewusste Abweichung und gehoert bei Entscheidung
   dorthin zurueckgeschrieben. */
html.grund-anthrazit .wisch-flaeche,
html.grund-anthrazit .dunkelzug{
  background-color:#1a1917;
  background-image:
    radial-gradient(48% 40% at var(--g1x) var(--g1y), rgba(236,232,226,.40) 0%, rgba(236,232,226,.15) 40%, rgba(236,232,226,0) 72%),
    radial-gradient(80% 58% at var(--g2x) var(--g2y), rgba(8,8,7,.55) 0%, rgba(8,8,7,0) 62%),
    linear-gradient(165deg,#2c2a27 0%,#1a1917 70%);
  background-attachment:fixed,fixed,fixed}
/* Kopf ueber dem dunklen Zug */
html.grund-anthrazit .kopf.kopf--dunkelzug::before{
  background:linear-gradient(to bottom, rgba(24,23,21,.9) 0%, rgba(24,23,21,.72) 34%, rgba(24,23,21,.32) 64%, rgba(24,23,21,.08) 86%, rgba(24,23,21,0) 100%)}
/* Hero */
html.grund-anthrazit .b2-bild::after{
  background:
    linear-gradient(90deg, rgba(20,19,17,.62) 0%, rgba(20,19,17,.38) 32%, rgba(20,19,17,.08) 58%, rgba(20,19,17,0) 72%),
    linear-gradient(to bottom, rgba(20,19,17,.34) 0%, rgba(20,19,17,0) 22%, rgba(20,19,17,0) 64%, rgba(20,19,17,.38) 100%)}
@media(max-width:860px){
  html.grund-anthrazit .b2-bild::after{background:linear-gradient(to bottom, rgba(20,19,17,.4) 0%, rgba(20,19,17,.05) 30%, rgba(20,19,17,.1) 55%, rgba(20,19,17,.72) 100%)}
}
/* Teamfoto */
html.grund-anthrazit .tm-panorama::after{
  background:linear-gradient(100deg,rgba(20,19,17,.9) 0%,rgba(20,19,17,.64) 32%,rgba(20,19,17,.14) 60%,transparent 78%)}

/* Umschalter fuer den Vergleich, faellt vor dem Livegang weg */
.grund-tausch{position:fixed;right:var(--rand);top:calc(50% - 72px);z-index:70;
  min-height:38px;padding:0 var(--r-12);border:1px solid rgba(255,255,255,.5);
  background:rgba(53,9,10,.45);backdrop-filter:blur(3px);color:var(--weiss);cursor:pointer;
  font-family:var(--schrift-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .35s,border-color .35s}
.grund-tausch:hover{background:var(--rot);border-color:var(--rot)}

/* --- Teamfoto: Text in der Mitte des sichtbaren Bands, das jetzt unten sitzt (21.09.) --- */
@media(min-width:901px){.team-mehr .tm-panorama-text{top:66%}}

/* --- Hero: ein Bild je Slide, Ueberblendung mit der Ueberschrift (21.09.) ---
   Alle Motive liegen uebereinander; das aktive blendet ein und zieht sich dabei aus einer
   leichten Vergroesserung zurueck. Das ruhige Tempo passt zur Maske der Ueberschrift. */
.b2-bild .b2-motiv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.1s cubic-bezier(.39,.52,0,1), transform 2.4s cubic-bezier(.22,.61,.36,1)}
.b2-bild .b2-motiv.aktiv{opacity:1;transform:scale(1)}
/* Erweiterte Motive: Personen in der rechten Haelfte, links bleibt Wand fuer den Claim */
.b2-bild .b2-motiv[data-slide="1"]{object-position:78% 40%}
.b2-bild .b2-motiv[data-slide="2"]{object-position:80% 38%}
@media(max-width:860px){
  .b2-bild .b2-motiv[data-slide="1"]{object-position:66% 40%}
  .b2-bild .b2-motiv[data-slide="2"]{object-position:68% 35%}
}
@media(prefers-reduced-motion:reduce){.b2-bild .b2-motiv{transition:opacity .01s;transform:none}}

/* ============================ WORDING-RUNDE (21.09.) ============================ */

/* --- Hero: Aufruf und Telefon direkt unter dem Claim ---
   Leitdatei: Primaeraufruf zur Marktwertermittlung, daneben die Telefonnummer. */
.b2-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r-16) var(--r-32);
  margin-top:var(--r-24);position:relative;z-index:1}
.b2-knopf{min-height:52px}
.b2-tel{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;
  color:var(--weiss);text-decoration:none;font-family:var(--schrift-hl);font-weight:600;font-size:var(--t-18);letter-spacing:.02em}
.b2-tel-hd{font-family:var(--schrift-label);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.b2-tel:hover{color:var(--rot-hell)}
html.schrift-inter .b2-tel-hd{text-transform:uppercase}

/* --- Kundenstimmen: das Ergebnis steht vorn, als markierter Platzhalter bis zur Lieferung --- */
.ks-d-text{display:flex;flex-direction:column;gap:4px}
.ks-d-ergebnis{align-self:flex-start;margin-top:2px}
.ks-platzhalter{display:inline-block;padding:2px 8px;border:1px dashed var(--rot);color:var(--rot);
  font-family:var(--schrift-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
html.schrift-inter .ks-platzhalter{text-transform:uppercase}

/* --- Teamfoto: Ein Team, das mitdenkt -- einzeilig und groesser --- */
.tm-panorama-titel{max-width:none !important;white-space:nowrap;font-size:var(--h-gross) !important;line-height:1.05}
html.schrift-inter .tm-panorama-titel{font-size:var(--h-gross) !important}
@media(max-width:700px){.tm-panorama-titel{white-space:normal}}

/* --- Kontakt: Aufruf statt Gespraechsangebot --- */
.cta-titel--aufruf{display:block;max-width:none;text-align:left !important;align-self:flex-start;margin-left:0 !important}
/* Linker Block aus Claim und Aufruf: breit genug, dass der Claim zweizeilig bleibt */
.b2-links{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1 1 auto;max-width:min(62vw,980px)}
.b2-links .b2-slides{width:100%}
/* Team-Ueberschrift: ein Satz pro Zeile (21.09.) */
@media(min-width:900px){.team-titel{max-width:none !important}}
.cta-titel--aufruf .rot{display:inline !important;padding:0 !important;margin:0 !important;text-indent:0 !important;transform:none !important}

/* --- Team: Kristin als Inhaberin hervorgehoben (21.09.) --- */
.team-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-bottom:var(--r-12);
  padding:6px 12px;background:var(--rot);color:var(--weiss);
  font-family:var(--schrift-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
html.schrift-inter .team-badge{text-transform:uppercase}

/* --- Anthrazit auch auf den Bildern in Angeboten und Kundenstimmen (22.09.) --- */
html.grund-anthrazit .card__veil{background:linear-gradient(180deg,rgba(20,19,17,0) 40%,rgba(20,19,17,.82) 100%)}
html.grund-anthrazit .ks-d-vorschau::after{background:linear-gradient(to top,rgba(20,19,17,.8) 0%,rgba(20,19,17,.1) 45%,transparent 65%)}

/* --- Ihre Situation: grosse schwebende Vorschau beim Hovern (22.09.) ---
   Ersetzt die kleinen Bilder in den Zeilen auf dem Desktop. Bewegung und Einblendung
   steuert GSAP, hier nur Groesse, Lage und Grundzustand. */
.sit-liste{position:relative}
.sit-vorschau{position:absolute;right:calc(var(--r-48) + 60px);top:0;z-index:5;pointer-events:none;
  width:clamp(240px,24vw,380px);aspect-ratio:4/3;visibility:hidden;opacity:0;
  border-radius:var(--rund-medien);overflow:hidden;box-shadow:0 30px 70px -34px rgba(20,19,17,.55);
  will-change:transform,opacity,clip-path}
.sit-vorschau-innen{position:absolute;inset:0}
.sit-vorschau-innen > .sit-bild,.sit-vorschau-innen > *{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  display:block !important;opacity:1 !important;transform:none !important;border-radius:0 !important;box-shadow:none !important}
.sit-vorschau .sit-bild-kennung{font-size:12px}
@media(min-width:760px){.sit-zeile .sit-bild{display:none !important}}
@media(max-width:759px){.sit-vorschau{display:none}}

/* --- Neue Hero-Motive (22.09.): Duo in der Altbaustraße, Haus, Team ---
   Personen und Haus stehen jeweils rechts, links bleibt Ruhe fuer Claim und Aufruf. */
.b2-bild .b2-motiv[data-slide="0"]{object-position:76% 40%}
.b2-bild .b2-motiv[data-slide="1"]{object-position:82% 50%}
.b2-bild .b2-motiv[data-slide="2"]{object-position:80% 38%}
@media(max-width:860px){
  .b2-bild .b2-motiv[data-slide="0"]{object-position:83% 35%}
  .b2-bild .b2-motiv[data-slide="1"]{object-position:80% 50%}
  .b2-bild .b2-motiv[data-slide="2"]{object-position:68% 35%}
}

/* --- Schreibtisch-Motiv: Weichzeichner von links nach rechts (22.09.) ---
   Eine zweite, weichgezeichnete Fassung liegt ueber dem Original und laeuft ueber eine
   Maske nach rechts aus. Links (Bildschirm, Fenster, Claim) unscharf, rechts bei den
   Personen scharf. Die Kopie ist etwas groesser, damit die weichen Raender nicht sichtbar
   werden. Sie blendet mit demselben Slide ein und aus wie das Original. */
.b2-bild .b2-motiv--weich{
  inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);
  filter:blur(14px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 22%,rgba(0,0,0,.6) 38%,transparent 56%);
          mask-image:linear-gradient(90deg,#000 0%,#000 22%,rgba(0,0,0,.6) 38%,transparent 56%);
  pointer-events:none}
@media(max-width:860px){
  /* Auf dem Handy stehen die Personen weiter links im Ausschnitt, deshalb nur ein schmaler Rand */
  .b2-bild .b2-motiv--weich{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 14%,transparent 30%);
            mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 14%,transparent 30%)}
}

/* --- Dritter Slide: Simon an der Haustuer (22.09.) ---
   Simon steht im Bild mittig; der Ausschnitt ruht ganz links, damit er so weit rechts
   wie moeglich steht und der Claim links Platz hat. */
.b2-bild .b2-motiv[data-slide="2"]{object-position:0% 40%}
@media(max-width:860px){.b2-bild .b2-motiv[data-slide="2"]{object-position:53% 30%}}

/* --- Wirkungskreis: Umkreis und Gifhorn (22.09.) --- */
.kn-umkreis{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.kn-umkreis circle{fill:rgba(215,10,10,.07);stroke:var(--rot);stroke-width:2;stroke-dasharray:6 6}
/* Gifhorn: kleinerer Punkt, Beschriftung aber immer sichtbar wie bei den Hauptorten */
.kn-marker[data-ort="Gifhorn"] .kn-fahne{opacity:1;background:var(--rot);color:var(--weiss);font-size:11px}
/* Wolfsburg und Gifhorn liegen dicht beieinander: Beschriftungen seitlich auseinander */
.kn-marker[data-ort="Wolfsburg"] .kn-fahne{left:calc(50% + 14px);bottom:auto;top:50%;transform:translateY(-50%)}
.kn-marker[data-ort="Gifhorn"] .kn-fahne{left:auto;right:calc(50% + 12px);bottom:auto;top:50%;transform:translateY(-50%)}
/* Gifhorn: roter Punkt wie die Hauptorte, nur kleiner */
.kn-marker[data-ort="Gifhorn"]{z-index:5}
.kn-marker[data-ort="Gifhorn"] .kn-punkt{width:11px;height:11px;background:var(--rot);border:2px solid var(--weiss);box-shadow:0 0 0 1px rgba(215,10,10,.35)}

/* --- Dritter Slide, neue Fassung (22.09.): Simon steht rechts im Bild --- */
.b2-bild .b2-motiv[data-slide="2"]{object-position:62% 40%}
@media(max-width:860px){.b2-bild .b2-motiv[data-slide="2"]{object-position:72% 30%}}

/* --- Kundenstimmen: Ergebnis als Beispielwert (22.09.) ---
   Gestaltet wie das spaetere echte Ergebnis. data-beispiel markiert die Werte im Quelltext,
   vor dem Livegang durch echte Angaben ersetzen. */
.ks-d-ergebnis[data-beispiel]{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  background:var(--rot-schleier,#F8E3E3);color:var(--rot);border:0;
  font-family:var(--schrift-label);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.ks-d-ergebnis[data-beispiel]::before{content:"";width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(-45deg);flex:none}

/* Ergebnisse der Kundenstimmen auf dem Handy: engere Laufweite, damit sie moeglichst
   einzeilig bleiben; laengere brechen sauber mit Haken vor der ersten Zeile um */
@media(max-width:760px){
  .ks-d-ergebnis[data-beispiel]{font-size:11px;letter-spacing:.03em;line-height:1.3;align-items:flex-start}
  .ks-d-ergebnis[data-beispiel]::before{margin-top:3px;flex:none}
}

/* --- Kundenstimmen: kurze Erfolgsgeschichte je Stimme (22.09.) ---
   Aufbau Situation, Ergebnis, Grund. Beispielwerte, per data-beispiel markiert und vor dem
   Livegang durch die Aussagen aus den Videos zu ersetzen. */
.ks-d-geschichte{margin-top:6px;max-width:46ch;font-family:var(--schrift-text);font-size:16px;line-height:1.5;color:var(--text-2)}
.ks-d-zeile.aktiv .ks-d-geschichte{color:var(--tinte)}

/* --- Angebote (22.09.): die schmale Karte neben der breiten fuellt die volle Reihenhoehe,
   statt eigenes 4:3 zu behalten und eine weisse Luecke darunter zu lassen --- */
@media(min-width:760px){
  .grid-referenzen .card--n{aspect-ratio:auto;align-self:stretch;min-height:100%}
}

/* --- Beispielwerte statt folgt (22.09.) ---
   Dauer im Ablauf als ruhiges Etikett statt gestricheltem Platzhalter */
.hor-dauer[data-beispiel]{border-style:solid;border-color:rgba(215,10,10,.35)}
.hor-feld[data-nr="8"] .hor-dauer[data-beispiel]{border-color:rgba(255,255,255,.55)}

/* --- Fusszeile (22.09.): Proudly designed by mit Deepsoul-Logo --- */
.fuss-leiste .fuss-credit{gap:10px;color:var(--text-2)}
.fuss-leiste .fuss-credit-logo{border-bottom:0;display:inline-flex;align-items:center;min-height:var(--ziel-min)}
.fuss-credit-logo img{height:34px;width:auto;display:block;opacity:.85;transition:opacity .25s}
.fuss-credit-logo:hover img,.fuss-credit-logo:focus-visible img{opacity:1}

/* --- Bildbehandlung nach LeeFinance-Art (22.09.) ---
   Die Fotos bleiben unveraendert. Darueber liegt eine Ebene mit leichtem kuehlem Anthrazit-Ton
   und feinem Korn, eingesperrt per isolation, damit der Mischmodus nur auf dieser Ebene wirkt.
   So wirken alle Bilder wie eine Serie, auch wenn sie aus verschiedenen Quellen stammen. */
.b2-bild::before,.card::after,.cta-bild::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(28,34,38,.16),rgba(28,34,38,.16));
  background-size:220px 220px,100% 100%;
  mix-blend-mode:normal;opacity:1}
/* Korn getrennt vom Farbton: das Korn soll ueberlagern, nicht abdunkeln */
.b2-bild::before{background-blend-mode:overlay,normal;opacity:.9}
.card::after{background-blend-mode:overlay,normal;opacity:.85}
@media (prefers-reduced-transparency: reduce){.b2-bild::before,.card::after,.cta-bild::after{display:none}}
/* Korrektur: Korn wie bei LeeFinance, als Ueberlagerung mit geringer Deckkraft; der Farbton
   kommt ueber einen sehr leichten, normal gemischten Schleier dazu */
.b2-bild::before,.card::after,.cta-bild::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;background-blend-mode:normal;mix-blend-mode:overlay;opacity:.16}
.b2-bild,.card{isolation:isolate}
.b2-bild .b2-motiv{filter:saturate(.9)}

/* --- Teamfoto -> Ihre Situation: die helle Sektion ueberdeckt das stehende Vollbild (22.09.) ---
   Die Teamfoto-Sektion wird um eine Bildschirmhoehe laenger (240vh -> 340vh). In dieser letzten
   Bildschirmhoehe steht das Vollbild still. Ihre Situation rueckt um genau diese Hoehe nach oben
   und liegt eine Ebene darueber, faehrt also ueber das Bild statt darunter zu folgen.
   Gerade Kante mit weichem Schatten, keine Rundung (Leitdatei). Auf dem Handy unveraendert. */
@media(min-width:901px){
  .team-mehr{height:340vh}
  /* Seit 28.09. uebernimmt die Buero-Sektion die Ueberdeckung (vorher .situation). */
  .buero{position:relative;z-index:6;margin-top:-100vh;
    box-shadow:0 -28px 60px -24px rgba(20,19,17,.45)}
}

/* ======================= BUERO · Standort Innenstadt (28.09.) =======================
   Zwei Spalten: links die Argumente, rechts das Buero. Auf dem Handy untereinander, Bild zuerst,
   weil der Raum schneller ueberzeugt als drei Zeilen Text. Farbig ist nur das Markenrot. */
.buero{background:var(--papier);padding:clamp(80px,10vw,180px) 0 clamp(72px,9vw,160px)}
.buero-raster{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:901px){
  .buero-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
}
.buero-titel{font-family:var(--schrift-titel,inherit);
  font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;margin:.35em 0 0}
.buero-lead{margin:1.1em 0 0;max-width:46ch;font-size:clamp(16px,1.15vw,19px);line-height:1.62;opacity:.82}
.buero-punkte{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;gap:0}
.buero-punkte li{display:grid;gap:.3em;padding:clamp(16px,1.6vw,22px) 0;border-top:1px solid rgba(20,19,17,.12)}
.buero-punkte li:last-child{border-bottom:1px solid rgba(20,19,17,.12)}
.bp-titel{font-weight:600;font-size:clamp(15px,1.05vw,17px);letter-spacing:-.01em}
.bp-text{font-size:clamp(14px,.95vw,15.5px);line-height:1.6;opacity:.72;max-width:44ch}
.buero-links{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);margin-top:clamp(26px,3vw,40px)}

/* Bilder: echte Aufnahmen (Karriereseite, 28.09.), farblich in die Bildsprache gezogen.
   Gross das Haus von der Strasse (die Lage ist das Argument), darunter zwei Einblicke. */
.buero-bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.9vw,14px)}
.buero-bild--gross{grid-column:1 / -1}
.buero-bild{position:relative;margin:0;isolation:isolate;overflow:hidden;
  background:rgba(20,19,17,.06)}
.buero-bild--gross{aspect-ratio:4/3}
@media(min-width:901px){.buero-bild--gross{aspect-ratio:16/11}}
.buero-bild--klein{aspect-ratio:4/3}
.buero-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.39,.52,0,1)}   /* gleiche Kurve wie die Inserat-Karten */
.buero-bild:hover img,.buero-bild:focus-visible img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.buero-bild img{transition:none}.buero-bild:hover img{transform:none}}
.buero-bild--gross img{object-position:48% 38%}
.buero-bild--klein img{object-position:50% 50%}
/* Korn wie bei den uebrigen Fotos (LeeFinance-Art) */
.buero-bild::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:220px 220px;mix-blend-mode:overlay;opacity:.16}
/* Adressschild unten links, sitzt auf dem Bild auf */
.buero-schild{position:absolute;left:0;bottom:0;z-index:3;display:grid;gap:.15em;
  padding:clamp(14px,1.5vw,20px) clamp(18px,2vw,26px);background:var(--markenrot,#c8102e);color:#fff}
.bs-ort{font-weight:600;font-size:clamp(14px,1vw,16px);letter-spacing:-.01em}
.bs-stadt{font-size:clamp(12px,.85vw,13.5px);opacity:.85}
@media(max-width:900px){
  .buero-raster{grid-template-columns:1fr}
  .buero-bilder{order:-1}
}

/* --- Hero-Motive aus Magnific (23.09.): Gasse, Dächer, Haus --- */
.b2-bild .b2-motiv[data-slide="0"]{object-position:70% 30%}
.b2-bild .b2-motiv[data-slide="1"]{object-position:70% 45%}
.b2-bild .b2-motiv[data-slide="2"]{object-position:65% 55%}
@media(max-width:860px){
  .b2-bild .b2-motiv[data-slide="0"]{object-position:78% 25%}
  .b2-bild .b2-motiv[data-slide="1"]{object-position:72% 40%}
  .b2-bild .b2-motiv[data-slide="2"]{object-position:60% 55%}
}
/* Feinjustierung (23.09.): Haus nach rechts, damit der Claim links auf der Straße steht;
   auf dem Handy die beiden in der Gasse mittiger */
.b2-bild .b2-motiv[data-slide="2"]{object-position:100% 55%}
@media(max-width:860px){
  .b2-bild .b2-motiv[data-slide="0"]{object-position:66% 25%}
  .b2-bild .b2-motiv[data-slide="2"]{object-position:100% 45%}
}

/* Teamfoto neu im 3:2-Format (23.09.): im Startband sollen die Gesichter sichtbar sein,
   deshalb Ausschnitt weiter oben; der Zoom zielt auf die Gruppe */
.team-mehr .tm-panorama img{object-position:var(--tm-x) 28%}
/* Teamfoto wieder im 21:9-Zuschnitt wie zuvor, schwarzweiss per Filter (23.09.) */
.team-mehr .tm-panorama img{object-position:var(--tm-x) 42%;filter:grayscale(1)}

/* --- Vorschaubild des Imagefilms (24.09.) --- */
.film-vorschau{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block}
.film-platzhalter .film-kennung,.film-platzhalter .film-play{position:relative;z-index:2}
.film-platzhalter::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(20,19,17,.28),rgba(20,19,17,.42))}
/* Abschlussbereich (24.09.): Simon mit Schlüssel, Ausschnitt auf die rechte Bildhälfte */
.cta-bild img{object-position:78% 45%}
@media(max-width:760px){.cta-bild img{object-position:72% 40%}}
/* Neue Fassung von Simon (24.09.): er steht weiter rechts im Bild */
.cta-bild img{object-position:72% 40%}
@media(max-width:760px){.cta-bild img{object-position:68% 35%}}
/* Feedback 24.09.: Simon weiter links im Ausschnitt */
.cta-bild img{object-position:90% 40%}
@media(max-width:760px){.cta-bild img{object-position:84% 35%}}
/* Ausgleich: weit genug links, Schlüsselhand bleibt aber im Bild */
.cta-bild img{object-position:82% 40%}
@media(max-width:760px){.cta-bild img{object-position:78% 35%}}

/* --- Ihre Situation: echte Bilder in Zeilen und Vorschau (24.09.) --- */
.sit-bild img{width:100%;height:100%;object-fit:cover;display:block}
.sit-vorschau-innen .sit-bild{background:none}

/* ============================ 07.10.: Notarwand mit echten Fotos, Vertrauensband im Hero ============================ */
.notarwand{display:block}
.nw-markenrot .nw-feld{background:rgba(0,0,0,.15);padding:0}
.nw-feld img{width:100%;height:100%;object-fit:cover;display:block}
.nw-band{gap:clamp(10px,1.2vw,18px)}
.nw-band .nw-feld{flex-basis:clamp(200px,18vw,300px)}
.nw-spur--2{margin-left:clamp(-120px,-6vw,-60px)}
.nw-titel{text-transform:none;font-size:clamp(34px,3.8vw,64px);line-height:1;letter-spacing:-.035em}
.nw-markenrot .nw-lead{max-width:28ch}
.nw-link{margin-top:var(--r-24);color:var(--weiss)}

.b2-vertrauen{position:relative;z-index:1;margin-top:clamp(20px,3vh,36px);border-top:1px solid rgba(255,255,255,.22);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.b2-vt-lauf{list-style:none;margin:0;padding:14px 0;display:flex;width:max-content;animation:b2-vt 50s linear infinite}
.b2-vertrauen:hover .b2-vt-lauf{animation-play-state:paused}
.b2-vt-lauf li{display:flex;align-items:center;gap:10px;padding-right:clamp(28px,3vw,48px);white-space:nowrap;
  font-family:var(--schrift-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.b2-vt-lauf li svg{color:var(--rot-hell);flex:none}
@keyframes b2-vt{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.b2-vt-lauf{animation:none}}
/* Notarwand dunkel statt rot (Feedback 07.10.): liegt im dunklen Zug und uebernimmt dessen Grund,
   damit zwischen Uebergang, Notarwand und Team keine Kante entsteht */
.notarwand.nw-markenrot{background:transparent;position:relative;z-index:1}
.nw-markenrot .nw-feld{background:rgba(255,255,255,.06)}
.nw-markenrot .nw-titel{color:var(--weiss)}
.nw-markenrot .nw-link .pf{color:var(--rot-hell)}
/* Notarwand laeuft von selbst (Feedback 07.10.) */
.nw-spur.nw-spur--lauf{width:max-content;transition:none;transform:none;animation:nw-lauf 90s linear infinite}
.nw-spur--2.nw-spur--lauf{animation-direction:reverse;animation-duration:100s;margin-left:0}
.nw-band:hover .nw-spur--lauf{animation-play-state:paused}
@keyframes nw-lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.nw-spur.nw-spur--lauf{animation:none}}