/* ============ UNTERSEITE SICHTBARKEIT (Auftrag Website-Redesign 31.10.2026, Abschnitt 10) ============
   Gilt nur für sichtbarkeit.html (body.sb-seite, main.sb). Designsystem wie die Startseite (css/start.css):
   Creme und Dunkelblau, Orange nur als feine Linie und Knopf; Cinzel in Versalien mit Sperrung für Titel,
   Cormorant Garamond kursiv für Leitsätze, Inter für Fließtext; schräge Bildflächen (skewX, runde Ecken,
   Inhalt zurückgedreht) mit überlappenden Textkarten. Keine Pfeile, kein Glas, kein Glühen, keine Verläufe.
   Bewegung nur über transform und opacity (js/seite-sichtbarkeit.js); ohne Skript und mit „Bewegung reduzieren“
   steht alles ruhig und vollständig da. */

:root{
  --sb-creme:#F1EEE6;
  --sb-creme-hell:#F8F6F0;
  --sb-navy:#172C50;
  --sb-nacht:#0c1830;
  --sb-orange:#E87536;
  --sb-orange-h:#ef8a50;
  --sb-tinte-2:#3a4458;
  --sb-linie:rgba(23,44,80,.14);
  --sb-rand:clamp(16px,4.2vw,56px);
  --sb-breit:1320px;
  --sb-kurve:cubic-bezier(.2,.7,.2,1);
  --sb-titel:'Cinzel','Cormorant Garamond',Georgia,serif;
  --sb-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sb-sans:'Inter','Helvetica Neue',Arial,sans-serif;
}

body.sb-seite{background:var(--sb-creme);color:var(--sb-navy)}
/* Die Palast-Szene und andere Hintergründe aus css/style.css stehen hier nicht */
body.sb-seite .bg-stage{display:none!important}

/* ---------- Kopfzeile: Nachtblau, ruhig, Schrift wie auf der Startseite ---------- */
body.sb-seite .legal-top{background:var(--sb-nacht);border-bottom:1px solid rgba(241,238,230,.12);box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.sb-seite .legal-top .nav-brand{font-family:var(--sb-titel);font-weight:600;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sb-creme)}
body.sb-seite .legal-top .nav-brand em{color:var(--sb-creme);margin-left:.36em}
body.sb-seite .legal-top .legal-quer,body.sb-seite .legal-top .legal-back{border:0;background:transparent;border-radius:6px;
  color:var(--sb-creme);font-size:13.5px;min-height:44px;align-items:center;padding:0 10px}
@media(min-width:1041px){body.sb-seite .legal-top .legal-quer{display:inline-flex}}
body.sb-seite .legal-top .legal-quer:hover,body.sb-seite .legal-top .legal-back:hover{color:#fff;text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px}
body.sb-seite .legal-top .legal-interesse{background:var(--sb-orange);color:var(--sb-nacht);border:0;border-radius:6px;box-shadow:none;
  min-height:44px;display:inline-flex;align-items:center}
body.sb-seite .legal-top .legal-interesse:hover{background:var(--sb-orange-h)}
/* 31.10.2026: Die Regel oben setzt display:inline-flex und hob damit am Handy die kurze Fassung des Kopf-Knopfs auf
   (beide Knöpfe nebeneinander). Hier wie in css/unterseite-kopf.css: bis 1040 px nur „Anfragen“, darüber nur die lange. */
@media(max-width:1040px){body.sb-seite .legal-top .legal-interesse.uk-lang{display:none}
  html body.sb-seite .legal-top a.nav-brand{font-size:13px;letter-spacing:.1em}
  body.sb-seite .legal-top .legal-interesse.uk-kurz{flex:0 0 auto;min-width:max-content}}
@media(min-width:1041px){body.sb-seite .legal-top .legal-interesse.uk-kurz{display:none}}
body.sb-seite .legal-top .lang-btn{background:transparent;border:1px solid rgba(241,238,230,.22);border-radius:6px;color:var(--sb-creme);
  min-height:44px;box-shadow:none}

/* ---------- Grundgerüst ---------- */
main.sb{position:relative;display:block;max-width:none;margin:0;padding:0;overflow-x:clip;color:var(--sb-navy);font-family:var(--sb-sans)}
main.sb > *{box-sizing:border-box}
.sb-krume{max-width:var(--sb-breit);margin:0 auto;padding:clamp(28px,4vw,48px) var(--sb-rand) 0;font-size:13.5px;
  color:rgba(23,44,80,.72);background:none;border:0}
.sb-krume a{color:rgba(23,44,80,.72);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.sb-krume a:hover{color:var(--sb-navy);text-decoration:underline;text-underline-offset:4px}
.sb-krume strong{color:var(--sb-navy);font-weight:600}
.sb a:focus-visible,.sb button:focus-visible{outline:2px solid var(--sb-orange);outline-offset:4px}

.sb-h2{position:relative;margin:0 0 clamp(36px,5vw,72px);font-family:var(--sb-titel);font-weight:600;
  font-size:clamp(26px,1rem + 2vw,44px);line-height:1.15;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-navy)}
.sb-h2::after{content:"";display:block;width:56px;height:2px;margin-top:16px;background:var(--sb-orange)}
.sb-h3{margin:0;font-family:var(--sb-titel);font-weight:600;font-size:clamp(19px,.85rem + .7vw,26px);line-height:1.25;
  letter-spacing:.05em;color:var(--sb-navy);text-wrap:balance}

/* Schräge Fläche wie die Kacheln der Startseite: Fläche schräg, Inhalt zurückgedreht */
.sb-flaeche{--schief:-8deg;--zurueck:8deg;position:relative;display:block;overflow:hidden;border-radius:22px;background:#d9d4c8;
  transform:skewX(var(--schief));box-shadow:0 26px 52px -28px rgba(23,44,80,.5)}
.sb-flaeche video,.sb-flaeche img{position:absolute;top:0;left:-12%;width:124%;height:100%;max-width:none;object-fit:cover;
  transform:skewX(var(--zurueck));display:block}
.sb-karte{--schief:-6deg;--zurueck:6deg;position:relative;z-index:2;background:var(--sb-creme);border-radius:18px;
  transform:skewX(var(--schief));box-shadow:0 20px 44px -24px rgba(23,44,80,.55),0 1px 0 rgba(255,255,255,.7) inset}
.sb-karte__in{display:block;transform:skewX(var(--zurueck));padding:clamp(20px,2.2vw,34px) clamp(22px,2.6vw,40px)}
.sb-karte__in::before{content:"";display:block;width:34px;height:2px;margin-bottom:16px;background:var(--sb-orange)}

/* ============ 1. HELD ============ */
.sb-held{max-width:var(--sb-breit);margin:0 auto;padding:clamp(12px,2vw,24px) var(--sb-rand) clamp(80px,10vw,150px)}
.sb-titel{margin:0;font-family:var(--sb-titel);font-weight:600;font-size:clamp(34px,9.2vw,124px);line-height:1;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sb-navy);hyphens:manual;-webkit-hyphens:manual;white-space:nowrap}
.sb-strich{display:block;width:min(300px,52%);height:auto;margin:clamp(12px,1.6vw,20px) 0 0;overflow:visible}
.sb-strich path{fill:none;stroke:var(--sb-orange);stroke-width:4;stroke-linecap:round}
.sb-held__text{position:relative;z-index:3}
.sb-held__text .sb-leit{margin:clamp(26px,3.4vw,46px) 0 0;max-width:22em;font-family:var(--sb-serif);font-style:italic;font-weight:500;
  font-size:clamp(23px,1rem + 1.25vw,38px);line-height:1.24;color:var(--sb-navy);text-wrap:pretty}
.sb-held__bild{position:relative;margin-top:clamp(36px,4vw,56px)}
.sb-flaeche--held{aspect-ratio:16/9}
.sb-karte--held .sb-karte__p{margin:0;font-size:clamp(15px,.85rem + .2vw,17px);line-height:1.55;color:var(--sb-navy)}
@media(min-width:900px){
  .sb-held{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px);align-items:end}
  .sb-held__text{grid-column:1 / -1;grid-row:1}
  .sb-held__text .sb-leit{position:absolute;left:0;top:calc(100% + clamp(36px,4vw,64px));width:38%;margin:0}
  .sb-held__bild{grid-column:6 / -1;grid-row:2;margin-top:clamp(40px,4.4vw,64px)}
  .sb-karte--held{position:absolute;left:-14%;bottom:-12%;width:min(380px,52%)}
}
@media(max-width:899px){
  .sb-held__bild{width:92%;margin-left:auto}
  .sb-flaeche--held{--schief:-5deg;--zurueck:5deg;border-radius:18px}
  .sb-karte--held{width:84%;margin:-34px 0 0 -9%;border-radius:14px}
}

/* ============ 2. LEISTUNGEN ============ */
.sb-leistungen{max-width:var(--sb-breit);margin:0 auto;padding:clamp(40px,6vw,90px) var(--sb-rand) clamp(70px,9vw,140px)}

/* Drehs: Bild links, Karte rechts darüber */
.sb-dreh{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.sb-flaeche--dreh{grid-column:1 / 9;grid-row:1;aspect-ratio:3/2}
.sb-flaeche--dreh img{object-position:50% 40%}
.sb-karte--dreh{grid-column:7 / 13;grid-row:1;margin-top:clamp(60px,8vw,130px)}
.sb-liste{list-style:none;margin:16px 0 0;padding:0}
.sb-liste li{position:relative;margin:0;padding:11px 0 11px 22px;border-top:1px solid var(--sb-linie);font-size:15.5px;line-height:1.5;color:var(--sb-tinte-2)}
.sb-liste li:first-child{border-top:0}
.sb-liste li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:1.5px;background:var(--sb-orange)}

/* Profile: drei Karten, versetzt */
.sb-profil{margin-top:clamp(90px,11vw,170px)}
.sb-h3--gross{max-width:22em;font-size:clamp(22px,.9rem + 1.1vw,32px);letter-spacing:.06em}
.sb-profile{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px);align-items:start}
.sb-profilkarte{position:relative;margin:0;padding:clamp(24px,2.4vw,36px) clamp(22px,2.2vw,32px) clamp(26px,2.6vw,38px);
  background:var(--sb-creme-hell);border:1px solid var(--sb-linie);border-radius:18px;box-shadow:0 18px 40px -30px rgba(23,44,80,.45)}
.sb-profilkarte::before{content:"";display:block;width:34px;height:2px;margin-bottom:18px;background:var(--sb-orange)}
.sb-profilkarte:nth-child(2){margin-top:clamp(28px,4vw,64px)}
.sb-profilkarte:nth-child(3){margin-top:clamp(56px,8vw,128px)}
.sb-name{display:block;font-family:var(--sb-titel);font-weight:600;font-size:clamp(17px,.8rem + .5vw,21px);line-height:1.25;
  letter-spacing:.04em;color:var(--sb-navy);overflow-wrap:break-word}
.sb-text{display:block;margin-top:10px;font-size:15px;line-height:1.6;color:var(--sb-tinte-2)}

/* Betreuung: dunkle Fläche */
.sb-betreuung{position:relative;margin-top:clamp(90px,11vw,170px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);padding:clamp(36px,5vw,76px) clamp(24px,5vw,80px);background:var(--sb-navy);color:var(--sb-creme);
  border-radius:24px;box-shadow:0 30px 60px -36px rgba(12,24,48,.7)}
.sb-betreuung::before{content:"";position:absolute;left:clamp(24px,5vw,80px);top:0;width:56px;height:2px;background:var(--sb-orange)}
.sb-h3--hell{color:var(--sb-creme);font-size:clamp(22px,.9rem + 1.1vw,32px);letter-spacing:.06em}
.sb-punkte{list-style:none;margin:0;padding:0}
.sb-punkte li{margin:0;padding:18px 0;border-top:1px solid rgba(241,238,230,.18)}
.sb-punkte li:first-child{border-top:0;padding-top:4px}
.sb-punkte strong{display:block;font-weight:600;font-size:16.5px;line-height:1.4;color:var(--sb-creme)}
.sb-punkte span{display:block;margin-top:5px;font-size:15px;line-height:1.6;color:rgba(241,238,230,.8)}

/* ============ 3. ABLAUF ============ */
.sb-ablauf{max-width:var(--sb-breit);margin:0 auto;padding:clamp(20px,3vw,40px) var(--sb-rand) clamp(70px,9vw,130px)}
.sb-schritte{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.sb-schritte::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--sb-navy);opacity:.35}
.sb-schritt{position:relative;margin:0;padding:clamp(26px,3vw,40px) 0 0}
.sb-schritt::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--sb-orange)}
.sb-nr{display:block;font-family:var(--sb-titel);font-weight:600;font-size:clamp(44px,2rem + 2.4vw,80px);line-height:1;letter-spacing:.04em;color:var(--sb-navy)}
.sb-schritt__k{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sb-schritt__t{display:block;margin-top:14px;font-size:16.5px;font-weight:500;line-height:1.4;color:var(--sb-navy)}

/* ============ 4. ZUSAMMENARBEIT ============ */
.sb-zusammen{max-width:900px;margin:0 auto;padding:0 var(--sb-rand) clamp(70px,9vw,130px);text-align:center}
.sb-zitat{margin:0;font-family:var(--sb-serif);font-style:italic;font-weight:500;font-size:clamp(26px,1rem + 1.8vw,48px);line-height:1.2;
  color:var(--sb-navy);text-wrap:balance}
.sb-zusatz{margin:26px 0 0;font-family:var(--sb-titel);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(23,44,80,.8)}
.sb-zusatz::before{content:"";display:block;width:40px;height:2px;margin:0 auto 22px;background:var(--sb-orange)}

/* ============ 5. ANFRAGE (gemeinsamer Block, hier im neuen Kleid) ============ */
main.sb > .contact-duo.anfrage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start;
  max-width:var(--sb-breit);margin:0 auto;padding:clamp(48px,6vw,90px) var(--sb-rand) clamp(70px,8vw,120px);
  border-top:1px solid var(--sb-linie);background:none;text-align:left}
main.sb .anfrage .anfrage-k{margin:0 0 16px;font-family:var(--sb-titel);font-weight:600;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#A64B17}   /* 31.10.2026: Orange tief, Markenorange als Schrift auf Hell hatte 2,5:1 */
main.sb .anfrage .anfrage-h{margin:0;padding:0;border:0;font-family:var(--sb-serif);font-weight:500;font-size:clamp(32px,1rem + 2.4vw,54px);
  line-height:1.08;color:var(--sb-navy);text-wrap:balance}
main.sb .anfrage .anfrage-l{list-style:none;margin:0 0 30px;padding:0}
main.sb .anfrage .anfrage-l li{position:relative;margin:0;padding:15px 0 15px 34px;border-top:1px solid var(--sb-linie)}
main.sb .anfrage .anfrage-l li:first-child{border-top:0;padding-top:2px}
main.sb .anfrage .anfrage-l li::before{content:"";position:absolute;left:3px;top:20px;width:13px;height:7px;
  border-left:1.5px solid var(--sb-navy);border-bottom:1.5px solid var(--sb-navy);transform:rotate(-45deg)}
main.sb .anfrage .anfrage-l li:first-child::before{top:7px}
main.sb .anfrage .anfrage-l b{display:block;font-size:16px;font-weight:600;line-height:1.4;color:var(--sb-navy)}
main.sb .anfrage .btn.btn-primary{margin:0;min-height:54px;padding:15px 30px;font-size:16px;font-weight:600;border:0;border-radius:6px;
  background:var(--sb-orange);color:var(--sb-nacht);box-shadow:none;text-shadow:none}
main.sb .anfrage .btn.btn-primary:hover{background:var(--sb-orange-h)}
main.sb .anfrage .btn.btn-primary::before,main.sb .anfrage .btn.btn-primary::after{display:none}

/* ---------- Fußzeile: Nachtblau als Abschluss ---------- */
body.sb-seite .site-foot{margin-top:0;background:var(--sb-nacht);border-top:0;padding:26px var(--sb-rand) 32px}
body.sb-seite .site-foot .foot__legal,body.sb-seite .site-foot .foot__legal a{color:rgba(241,238,230,.82)}
body.sb-seite .site-foot .foot__legal a{display:inline-flex;align-items:center;min-height:44px}
body.sb-seite .site-foot .foot__legal a:hover{color:#fff}

/* ============ HANDY UND SCHMALE FENSTER ============ */
@media(max-width:899px){
  .sb-dreh{display:block}
  .sb-flaeche--dreh{--schief:-5deg;--zurueck:5deg;width:92%;border-radius:18px}
  .sb-karte--dreh{--schief:-3deg;--zurueck:3deg;width:94%;margin:-40px 0 0 auto;border-radius:14px}
  .sb-profile{grid-template-columns:1fr;gap:18px}
  .sb-profilkarte:nth-child(n){margin-top:0}
  .sb-profilkarte:nth-child(2){margin-left:6%}
  .sb-profilkarte:nth-child(3){margin-left:12%}
  .sb-betreuung{grid-template-columns:1fr;gap:22px;border-radius:18px}
  .sb-schritte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .sb-schritte::before{display:none}
  .sb-schritt{border-top:1px solid rgba(23,44,80,.35)}
  main.sb > .contact-duo.anfrage{grid-template-columns:1fr;gap:28px}
  main.sb .anfrage .btn.btn-primary{width:100%}
}
@media(max-width:560px){
  .sb-titel{font-size:clamp(30px,9.4vw,46px);letter-spacing:.06em}
  .sb-karte__in{padding:18px 18px 20px}
  .sb-karte__in::before{margin-bottom:12px;width:28px}
  .sb-liste li{font-size:16px}
  .sb-text,.sb-punkte span{font-size:16px}
  .sb-profilkarte:nth-child(2){margin-left:4%}
  .sb-profilkarte:nth-child(3){margin-left:8%}
  .sb-schritte{grid-template-columns:1fr;row-gap:0}
  .sb-schritt{display:grid;grid-template-columns:72px 1fr;align-items:baseline;padding:18px 0}
  .sb-schritt::before{top:-5px}
  .sb-schritt__t{margin-top:0}
  .sb-nr{font-size:40px}
  .sb-zusatz{font-size:13px;letter-spacing:.14em}
}

/* ============ BEWEGUNG (nur mit Skript, ohne „Bewegung reduzieren“) ============ */
@media(prefers-reduced-motion:no-preference){
  html.sb-js .sb-auf{opacity:0;transform:translateY(26px);transition:opacity .75s var(--sb-kurve),transform .75s var(--sb-kurve)}
  html.sb-js .sb-auf.sb-da{opacity:1;transform:none}
  html.sb-js .sb-profilkarte.sb-auf:nth-child(2){transition-delay:.08s}
  html.sb-js .sb-profilkarte.sb-auf:nth-child(3){transition-delay:.16s}
  html.sb-js .sb-schritt.sb-auf:nth-child(2){transition-delay:.08s}
  html.sb-js .sb-schritt.sb-auf:nth-child(3){transition-delay:.16s}
  html.sb-js .sb-schritt.sb-auf:nth-child(4){transition-delay:.24s}
  html.sb-js .sb-held__text,html.sb-js .sb-held__bild{opacity:0;transform:translateY(16px);transition:opacity .9s var(--sb-kurve),transform .9s var(--sb-kurve)}
  html.sb-js.sb-bereit .sb-held__text,html.sb-js.sb-bereit .sb-held__bild{opacity:1;transform:none}
  html.sb-js.sb-bereit .sb-held__bild{transition-delay:.18s}
  html.sb-js .sb-strich path{stroke-dasharray:320;stroke-dashoffset:320}
  html.sb-js.sb-bereit .sb-strich path{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s .35s var(--sb-kurve)}
}
@media print{
  .sb-flaeche,.sb-karte{transform:none;box-shadow:none}
  .sb-flaeche video,.sb-flaeche img,.sb-karte__in{transform:none}
}

/* Nachbesserung nach Sicht 31.10.2026: Pfeil im gemeinsamen „Zurück“ (pl_003) widerspricht „keine Pfeile“; Startseite und
   Leistungen stehen schon in der Leiste, deshalb hier ausgeblendet. Orange Linie der Betreuung über dem Titel statt an der Kante. */
body.sb-seite .legal-top .legal-back{display:none!important}
.sb-krume__t{margin:0 6px;color:rgba(23,44,80,.5)}
.sb-betreuung::before{display:none}
.sb-h3--hell::before{content:"";display:block;width:40px;height:2px;margin-bottom:20px;background:var(--sb-orange)}

/* Am Handy setzt css/style.css alle Absätze der Unterseiten auf 16 px (body:has(>.legal-top) main p); Leitsätze und Karten
   behalten hier ihre eigene Größe */
main.sb p.sb-zitat{font-size:clamp(26px,1rem + 1.8vw,48px);line-height:1.2}
main.sb p.sb-leit{font-size:clamp(23px,1rem + 1.25vw,38px);line-height:1.24}
main.sb p.sb-zusatz{font-size:13px;line-height:1.6}
main.sb p.sb-karte__p{font-size:clamp(15px,.85rem + .2vw,17px);line-height:1.55}
@media(max-width:560px){main.sb p.sb-karte__p{font-size:16px}}
body.sb-seite .legal-top .nav-brand{display:inline-flex;align-items:center;min-height:44px}

/* DESIGNSPRACHE §11: H1 mindestens 40 px bei 375, Wort passt in die Breite (Nachprüfer 31.10.2026) */
body .sb-titel{font-size:clamp(40px,calc(8.1vw + 9px),124px)}

/* Design-Prüfer 31.10.2026 (DESIGNSPRACHE §11): Zwischenüberschriften mindestens 30 px am Handy und bis 48 px am Rechner, Fließtext höchstens 68 Zeichen breit, Abschnitte mit Luft oben und unten */
.sb-h2{font-size:clamp(30px,1.1rem + 2.2vw,48px)}
.sb-held{padding-top:clamp(48px,7vw,96px)}
main li{max-width:68ch}
/* Zwei Wege der Sichtbarkeit (Ansage Inhaber 01.11.2026): organisch unter den Profilaufwertungen, gezielt bei den Anzeigen */
.sb-weg{margin:10px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(19px,.9rem + .5vw,24px);
  line-height:1.3;color:#A64B17}
.sb-punkte span.sb-weg--hell{margin-top:6px;font-size:clamp(18px,.85rem + .4vw,21px);color:#F2A273}
/* Profilaufwertungen am Rechner versetzt nebeneinander im Wechsel oben, unten, oben (Ansage Inhaber 01.11.2026 nachts) */
@media(min-width:900px){
  .sb-profilkarte:nth-child(odd){margin-top:0}
  .sb-profilkarte:nth-child(even){margin-top:clamp(48px,6vw,96px)}
  .sb-profile{align-items:start}
}
/* Prüfung 01.11.2026 Teil 2 (DESIGNSPRACHE §5.3 und §11): Abschnittsluft oben und unten gleich, nie unter 64 / 88 / 128 px bei 375 / 768 / 1440.
   Das Drehfoto stand am Rechner fast 1000 px breit (Datei 1280 px, auf Retina unscharf); es nimmt jetzt knapp sieben statt acht Spalten. */
main.sb{--sb-luft:clamp(64px,42px + 6vw,144px)}
.sb-held{padding-bottom:var(--sb-luft)}
.sb-leistungen,.sb-ablauf,.sb-zusammen{padding-top:var(--sb-luft);padding-bottom:var(--sb-luft)}
@media(min-width:900px){
  .sb-flaeche--dreh{grid-column:1 / 8;width:92%}
  .sb-karte--dreh{grid-column:7 / 13}
}

/* 01.11.2026 (Ansage Inhaber, logische Reihenfolge): „Was Sie davon haben“ steht jetzt direkt unter dem Titel,
   Überschrift mittig über den beiden Sätzen */
.sb-zusammen .sb-h2--mitte{text-align:center;margin-bottom:clamp(26px,3.4vw,44px)}
.sb-zusammen .sb-h2--mitte::after{margin-left:auto;margin-right:auto}