/* ==========================================================================
   web-profis.com · Bauhaus-Override (Konzept 2026-10-13)
   Reines Override-Stylesheet. Wird NACH allen anderen CSS geladen.
   Farben, Montserrat, Wellen-Hero, Header und Footer bleiben unverändert.
   ========================================================================== */
:root{
  /* Raster: 12 Spalten, 1200px Content, 32px Gutter (Achse = Footer-Kante) */
  --bh-max:1200px; --bh-gutter:32px; --bh-pad:5%;
  --bh-inline:max(var(--bh-pad),calc((100% - var(--bh-max)) / 2));
  --bh-measure:66ch;        /* Fließtext */
  --bh-head:22ch;           /* Überschriften (≈ 8 Spalten) */
  /* Spacing 8px-Basis */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;--s16:128px;
  --bh-sec:var(--s16);
  /* Flächen */
  --bh-bg:#0a0d12; --bh-bg2:#0e1219; --bh-lime:#b8d44a;
  --bh-spot-a:radial-gradient(ellipse 55% 65% at 88% 0%,rgba(184,212,74,.045),transparent 70%);
  --bh-spot-b:radial-gradient(ellipse 50% 60% at 6% 100%,rgba(255,255,255,.035),transparent 70%);
}
@media (max-width:767px){:root{--bh-sec:72px;--bh-pad:20px;--bh-gutter:16px}}
html,body{overflow-x:clip}

/* ---------- Typo-Skala ---------- */
.h-sec h2,.content>section>h2,.page-hero h1{letter-spacing:-.02em;text-wrap:balance}
.h-sec h2,.content>section>h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15;max-width:var(--bh-head);margin:0 0 var(--s4)}
.h-sec h3,.content h3{font-size:1.25rem;line-height:1.3;margin:var(--s6) 0 var(--s1)}
.h-sec p,.content p,.content li{font-size:1.0625rem;line-height:1.7;max-width:var(--bh-measure)}
.bh-lime{color:var(--bh-lime);font-weight:600}

/* Section-Nummer: siehe Rollout-Teil unten (Klasse .bh-n statt Selektorliste, Konzept 11.3) */

/* ---------- Startseite ---------- */
.h-sec{padding:var(--bh-sec) var(--bh-inline)!important;position:relative}
.h-inner{max-width:none;margin:0}
.h-einstieg .hero-sub,.h-einstieg .hero-note,.hero-proof{max-width:var(--bh-measure)}
.h-einstieg .hero-sub{font-size:1.25rem;line-height:1.6}
.h-quotes{max-width:none;gap:var(--s3)}
.h-quotes li{max-width:36ch}
.promise,.promise:nth-of-type(2){padding:var(--s4) 0;padding-left:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--bh-gutter);border-top:1px solid rgba(255,255,255,.08)}
.promise h3{grid-column:1/span 4;margin:0}
.promise p{grid-column:5/span 7;margin:0}
.h-testimonial{max-width:var(--bh-measure);margin-bottom:var(--s8)}
.ref{display:grid!important;grid-template-columns:repeat(12,1fr);column-gap:var(--bh-gutter);align-items:center;margin-bottom:var(--s6)}
.ref>img{grid-column:1/span 5;width:100%;height:auto}
.ref>div{grid-column:7/span 6}
.ref>div h3{margin-top:0}
.svc-list li{max-width:var(--bh-measure)}
/* Ausnahme: Bildband #vergleich bleibt zentriert, Tabelle auf Container */
#vergleich>.compare-highlight,#vergleich>.compare-table-wrap,#vergleich>.compare-cta,#vergleich>.compare-faq{width:auto;max-width:var(--bh-max);margin-left:var(--bh-inline);margin-right:var(--bh-inline)}
.h-contact .h-inner>*:not(h2):not(p){max-width:760px}
/* Horizontal-Timelines (nur Desktop+Motion): Startkante = Achse */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .js .tl--svc .tl-head,.js .tl--svc .tl-track.svc-list{padding-left:max(5vw,calc(50vw - 600px))}
  .js .tl-track{padding-left:max(5vw,calc(50vw - 600px))}
  .js .tl-line{left:max(5vw,calc(50vw - 600px))}
}

/* ---------- Unterseiten (.page-hero + .content) ---------- */
.page-hero{max-width:none;margin:0;padding-left:var(--bh-inline);padding-right:var(--bh-inline);padding-bottom:var(--s8)}
.page-hero h1{font-size:clamp(2.25rem,4.6vw,3.5rem);max-width:18ch}
.page-hero .lead{max-width:var(--bh-measure)}
.page-hero .bc{padding-left:0}
.usp-bar p{max-width:none;padding-left:var(--bh-inline);padding-right:var(--bh-inline)}
.content{max-width:none;margin:0;padding:0}
.content>section{padding:var(--bh-sec) var(--bh-inline);border-bottom:0}
.content>section>p.cta{text-align:left}
.content .faq,.content .region-links,.content>section>ul{max-width:var(--bh-measure)}
.content ul{margin-left:1.1em}
/* Ablauf-Timeline statisch / mobil: Punkte hängen links an der Achse, Text auf Achse */
.tl:not(.tl--svc){padding:var(--bh-sec) var(--bh-inline)}
.tl:not(.tl--svc) .tl-track{padding-left:0;margin-left:0}
.tl:not(.tl--svc) .tl-line{left:-25px}
.tl:not(.tl--svc) .tl-dot{left:-32px}
.tl-step{max-width:var(--bh-measure)}
.tl-step h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:var(--s2)}
@media (max-width:767px){
  .tl:not(.tl--svc){padding-left:calc(var(--bh-pad) + 28px)}
  .promise h3,.promise p,.ref>img,.ref>div{grid-column:1/-1}
  .ref>img{margin-bottom:var(--s2)}
  .h-sec h2,.content>section>h2{font-size:1.75rem}
  .h-einstieg .hero-sub{font-size:1.125rem}
  .h-sec p,.content p{font-size:1rem}
}
.content>:not(section){margin-left:0;margin-right:0;padding-left:var(--bh-inline);padding-right:var(--bh-inline);padding-bottom:var(--s8)}
.content .region-links ul{margin-left:0;padding-left:0}

/* ==========================================================================
   Rollout relaunch11 (13.10.2026): gilt fuer ALLE Templates ueber bh-Klassen
   bh-hero  = Seitenkopf (H1)      bh-strip = Breadcrumb/USP-Leiste/Trust-Zeile
   bh-sec   = Section (bh-a/bh-b = Hintergrundwechsel)   bh-band = CTA-Band (zentriert, Ausnahme 4.3)
   bh-cont  = Fortsetzung der vorigen Section (ohne eigene H2)   bh-n = Traeger der Section-Nummer
   ========================================================================== */
body{counter-reset:bhsec}
/* Eine linke Textachse: jeder Container startet an x = --bh-inline */
.bh-hero,.bh-strip,.bh-sec:not(.h-band),.bh-cont{box-sizing:border-box;max-width:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;padding-left:var(--bh-inline)!important;padding-right:var(--bh-inline)!important}
.bh-sec:not(.bh-band)>*:not(.tl-pin),.bh-cont>*,.bh-hero>*,.bh-strip>*{margin-left:0!important;margin-right:0!important}
.bh-strip>*,.bh-sec:not(.bh-band)>:is(.section-inner,.section-dark-inner,.h-inner,.lp2-split,.lp2-contact-grid,.h2b-prose,.h2b-narrow,.related-links){padding-left:0!important;padding-right:0!important;max-width:var(--bh-max)}
.bh-strip>p{max-width:none!important}
.bh-strip,.bh-hero,.bh-sec:not(.bh-band),.bh-cont{text-align:left}
.bh-hero :is(h1,p,.lead,.hero-sub,.tag,.section-label){text-align:left;margin-left:0;margin-right:0}
.bh-hero :is(.hero-ctas,.trust-row),.bh-strip.trust-row{justify-content:flex-start}
.bh-strip .trust-item{text-align:left}
.bh-sec:not(.bh-band) :is(h2,.section-label,.section-header,.section-intro,.section-lead,.h2b-kicker){text-align:left;margin-left:0;margin-right:0}
.bh-hero{padding-bottom:var(--s8)}
/* Section-Abstaende 128 / 72 */
.bh-sec:not(.h-band):not(.bh-band){padding-top:var(--bh-sec)!important;padding-bottom:var(--bh-sec)!important;border-top:0!important;border-bottom:0!important;border-radius:0}
.bh-sec:not(.h-band):not(.bh-band)>:last-child{margin-bottom:0}
.bh-cont{padding-top:0!important;padding-bottom:var(--bh-sec)!important;border-top:0!important;border-bottom:0!important}
.bh-sec:has(+ .bh-cont),.bh-sec:has(+ hr + .bh-cont){padding-bottom:var(--s8)!important}
.bh-cont.bh-none{padding-bottom:var(--s8)!important}
/* Hintergrundwechsel + Lichtspot (Konzept 6); keine Trennlinien zwischen Sections */
.bh-a{background:var(--bh-spot-a),var(--bh-bg2)!important}
.bh-b{background:var(--bh-spot-b),var(--bh-bg)!important}
main:not(.bh-legal)>hr.divider,body>hr.divider{display:none}
.bh-sec.section-dark{border:0}
/* CTA-Band: bleibt zentriert (Ausnahme 4.3), ohne Rahmen, volle Breite */
.bh-band:not(.h-band){margin:0!important;border:0!important;border-radius:0!important;padding:var(--bh-sec) var(--bh-inline)!important;background:var(--bh-spot-a),#131820!important;text-align:center;max-width:none!important}
/* Typo-Skala fuer Section-H2 */
.bh-sec :is(h2.bh-n,.bh-n+h2){font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;max-width:var(--bh-head);margin-bottom:var(--s4)}
.bh-sec p,.bh-cont p{max-width:var(--bh-measure)}
.bh-sec>p,.bh-cont>p,.bh-sec>:is(.section-inner,.section-dark-inner,.h2b-prose)>p{font-size:1.0625rem;line-height:1.7}
/* Section-Nummer 01, 02 … + 32x2-Lime-Strich, CSS-Counter, fuer Screenreader stumm */
.bh-n{counter-increment:bhsec}
.bh-n.section-label{display:block}
.bh-n::before{content:counter(bhsec,decimal-leading-zero);content:counter(bhsec,decimal-leading-zero) / "";display:flex;align-items:center;width:max-content;padding:0 48px 0 0;margin:0 0 var(--s2);font:600 .75rem/1.4 'Montserrat',system-ui,sans-serif;letter-spacing:.16em;text-transform:none;color:var(--bh-lime);background:linear-gradient(var(--bh-lime),var(--bh-lime)) no-repeat 2.6em 50%/32px 2px;border:0;position:static;transform:none;opacity:1}
/* Rechtsseiten + 404: nur Layout (Achse, Abstaende, Nummern), keine Lime-Woerter */
main:is(.bh-legal,.bh-p404){box-sizing:border-box;max-width:none!important;margin:0!important;padding-left:var(--bh-inline)!important;padding-right:var(--bh-inline)!important;padding-top:var(--s8)!important;padding-bottom:var(--bh-sec)!important;text-align:left}
main:is(.bh-legal,.bh-p404)>*{margin-left:0!important;margin-right:0!important;max-width:760px}
main.bh-legal h2.bh-n{margin-top:var(--s6)}
@media (max-width:767px){
  .bh-sec :is(h2.bh-n,.bh-n+h2){font-size:1.75rem}
  .bh-sec>p,.bh-cont>p{font-size:1rem}
}
/* Hub-Template (h2b): main nicht mehr als zentrierte 1140er-Spalte, Achse kommt aus den Sections */
main.h2b-main{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
/* Ablauf-Timeline mobil: Text auf der Achse (x = 20), Punkte/Linie im 20-px-Rand links daneben (Konzept 9) */
@media (max-width:767px){
  .tl.bh-sec:not(.tl--svc){padding-left:var(--bh-inline)!important}
  .tl:not(.tl--svc) .tl-dot{left:-18px}
  .tl:not(.tl--svc) .tl-line{left:-11px}
}
/* Rechtsseiten: Breadcrumb ausserhalb von main ebenfalls auf die Achse */
body>.breadcrumb{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:var(--bh-inline)!important;padding-right:var(--bh-inline)!important}

/* ==========================================================================
   relaunch12 (13.10.2026): Karls Section-Liste (A / Z / 2), Marco-Kontaktblock, volle Hoehe, Scroll-Snap
   Umschaltbar je Section per Klasse (tools/apply-layout.py, Tabelle ZENTRIERUNG-relaunch12.md)
   ========================================================================== */
:root{--bh-col:720px}
.bh-w760{--bh-col:760px}
.bh-w880{--bh-col:880px}
/* Z: Block mittig (720/760/880), Text bleibt linksbuendig – auch H2, Nummer und Tag */
.bh-center.bh-center.bh-center{padding-left:max(var(--bh-inline),calc((100% - var(--bh-col)) / 2))!important;padding-right:max(var(--bh-inline),calc((100% - var(--bh-col)) / 2))!important}
.bh-center :is(h1,h2,.lead,.section-label,.tag){max-width:none}
/* Lichtspot: bei Z mittig hinter dem Block, bei 2 hinter der rechten Spalte (Karl Regel 6) */
.bh-center.bh-a{background:radial-gradient(ellipse 40% 60% at 50% 0%,rgba(184,212,74,.045),transparent 70%),var(--bh-bg2)!important}
.bh-center.bh-b{background:radial-gradient(ellipse 40% 60% at 50% 100%,rgba(255,255,255,.035),transparent 70%),var(--bh-bg)!important}
.bh-two.bh-a{background:radial-gradient(ellipse 35% 60% at 75% 0%,rgba(184,212,74,.045),transparent 70%),var(--bh-bg2)!important}
.bh-two.bh-b{background:radial-gradient(ellipse 35% 60% at 75% 100%,rgba(255,255,255,.035),transparent 70%),var(--bh-bg)!important}
/* A + volle Rasterkante (lp2-price, Miet-Pakete, Ablauf-Timeline) */
.bh-full>*,.bh-full .lp2-price-panel,.bh-full .price-grid,.bh-full .tl-track,.bh-full .tl-step{max-width:none!important}
.bh-full .lp2-price-panel,.bh-full .price-grid{width:100%}
/* Recht: Z 760 */
main.bh-legal{padding-left:max(var(--bh-inline),calc((100% - 760px) / 2))!important;padding-right:max(var(--bh-inline),calc((100% - 760px) / 2))!important}
body:has(main.bh-legal)>.breadcrumb{padding-left:max(var(--bh-inline),calc((100% - 760px) / 2))!important}
main.bh-legal>*{max-width:none}
/* lp2-Splits 6/6 im 1200er-Raster (Karl) */
.bh-sec .lp2-split:not(.lp2-region-grid){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:64px!important;max-width:var(--bh-max)}
@media (min-width:1280px){.bh-sec .lp2-split:not(.lp2-region-grid){column-gap:80px!important}}
/* 2: Zweispalter (Karl Regel 2), H2 links in Spalte 1, rechtes Element aus der bestehenden Section */
@media (min-width:900px){
  .bh-two:not(:has(>.h-inner,>.lp2-contact-grid)),.bh-two>:is(.h-inner,.lp2-contact-grid){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;row-gap:0;align-items:start;max-width:var(--bh-max)}
  .bh-two.bh-66:not(:has(>.h-inner,>.lp2-contact-grid)),.bh-two.bh-66>:is(.h-inner,.lp2-contact-grid){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bh-two:not(:has(>.h-inner,>.lp2-contact-grid))>*,.bh-two>:is(.h-inner,.lp2-contact-grid)>*{grid-column:1;max-width:none}
  .bh-two:not(:has(>.h-inner,>.lp2-contact-grid))>:is(ul,ol,form,.faq,figure,blockquote,.hero-proof,.cards,dl),
  .bh-two>:is(.h-inner,.lp2-contact-grid)>:is(ul,ol,form,.faq,figure,blockquote,.hero-proof,.cards,dl,.form-card,.lp2-contact-form){grid-column:2;grid-row:1 / span 40}
  /* 6/6 Textfluss: H2 + erster Absatz links, uebrige Absaetze rechts */
  .bh-two.bh-flow:not(:has(>.h-inner)){display:block!important;column-count:2;column-fill:balance;column-gap:64px;max-width:var(--bh-max)}
  .bh-two.bh-flow>*{break-inside:avoid}
  .bh-two.bh-flow>:is(h2,.bh-n){break-after:avoid}
  .bh-two.bh-flow>p:first-of-type{break-after:column}
}
@media (min-width:1280px){.bh-two:not(:has(>.h-inner,>.lp2-contact-grid)),.bh-two>:is(.h-inner,.lp2-contact-grid),.bh-two.bh-flow{column-gap:80px}}
/* Kontaktblock (Marco): mittige Spalte – Nummer, H2, Intro, #gernePerDu zentriert, Formular als Spalte, Felder linksbuendig */
.bh-kontakt .bh-n,.bh-kontakt :is(.h-inner>h2,.h-inner>p,>h2,>p){text-align:center}
.bh-kontakt .bh-n::before{margin-left:auto;margin-right:auto}
.bh-kontakt .h-intro{display:flow-root;width:fit-content;max-width:100%;text-align:left;margin-left:auto!important;margin-right:auto!important}
.bh-kontakt form,.bh-kontakt form *{text-align:left}
/* 1) Folien (Karl Folien-Liste): .bh-fh = Folie (100svh, Inhalt vertikal mittig), .lang = normal scrollend, .nosnap = GSAP-Pin.
      Gruppen: div.folie-grp (g-pair 6/6 | g-stack) um bestehende Sections; Teile .grp-m. Weiche Gruppe (Hero + Intro in verschiedenen Eltern): .grp-soft */
:root{--header-h:72px}
.folie-grp{box-sizing:border-box;padding:var(--bh-sec) max(var(--bh-inline),calc((100% - var(--bh-max)) / 2))}
.folie-grp>.grp-m.grp-m.grp-m{padding-top:0!important;padding-bottom:0!important;min-height:0!important;background:none!important;border:0!important;box-shadow:none!important}
.folie-grp.g-pair>.grp-m.grp-m.grp-m{padding-left:0!important;padding-right:0!important}
.folie-grp.g-stack{padding-left:0;padding-right:0}
.folie-grp.g-stack>.grp-m+.grp-m.grp-m{padding-top:48px!important}
.folie-grp.g-pair>.grp-m+.grp-m{margin-top:var(--bh-sec)!important}
.folie-grp>.grp-m:not(.grp-first) .bh-n{counter-increment:none}
.folie-grp.g-stack>.grp-m:not(.grp-first) .bh-n::before{display:none}
.folie-grp.g-pair>.grp-m:not(.grp-first) .bh-n::before{visibility:hidden}
.grp-soft.grp-first{padding-bottom:48px!important}
.grp-soft.grp-m.grp-m{padding-top:48px!important}
@media (min-width:900px){
  .folie-grp.g-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
  .folie-grp.g-pair>.grp-m+.grp-m{margin-top:0!important}
  .bh-sec.bh-fh:not(:has(.tl-pin)),.bh-band.bh-fh,.folie-grp.bh-fh{min-height:100svh;align-content:center}
  .bh-hero.bh-fh:not(#heroSection){min-height:calc(100svh - var(--header-h))!important;align-content:center}
  /* Zusatz 4 (Marco): Luft in Folien mit wenig Inhalt, waechst mit der Viewport-Hoehe (Obergrenze); nur wo gemessen < 100svh bleibt (.fh-air, tools/apply-air.py) */
  /* Akkordeon-Folien oben ausrichten: beim Aufklappen wandert die Frage nicht (zentrierter Inhalt wuerde um die halbe Zusatzhoehe springen) */
  .bh-fh:has(details,.faq,.faq-item,.faq-question){align-content:start!important}
  .fh-air{--air:clamp(32px,calc(8vh - 24px),96px)}
  .fh-air:not(.bh-two)>*+*,.fh-air>:is(.h-inner,.section-inner,.grp-m,.h2b-prose)>*+*,.fh-air.bh-two>:is(.h-inner)>*:not(:first-child){margin-top:var(--air)!important}
  .fh-air .bh-n::before{margin-bottom:calc(var(--s2) + var(--air) * .5)}
}
@media (min-width:1280px){.folie-grp.g-pair{column-gap:80px}}
/* Scroll-Snap: proximity, nur ab 900 px und ohne reduced-motion; Pin-Sections und Gruppenteile ohne snap-align */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity;scroll-padding-top:var(--header-h);scroll-behavior:auto}
  #heroSection,.bh-fh,.lang,.grp-soft.grp-first{scroll-snap-align:start}
  body,.breadcrumb{scroll-snap-align:start} /* Seitenanfang bleibt Rastpunkt: beim Laden springt nichts unter den Header */
  .grp-m:not(.grp-soft.grp-first),.nosnap{scroll-snap-align:none!important}
  :is(.bh-sec,.bh-hero,.bh-band,.bh-cont,.folie-grp)[id]{scroll-margin-top:0}
}
/* Zusatz 3 (Marco): Paket-Badges BASIC/BUSINESS/PREMIUM lesbar – Lime-Text auf dunklem Grund mit Lime-Rahmen (Outline, nicht gefuellt) */
.price-card .badge,.badge.green,.badge.blue{background:#0b0e14!important;color:var(--bh-lime)!important;border:1px solid var(--bh-lime)!important;box-shadow:none!important;opacity:1!important;text-shadow:none!important}
/* Karl: /website-mieten/ Preisbox mittig */
.price-box-wrap.bh-cont>*{margin-left:auto!important;margin-right:auto!important}
/* Startseite #vergleich: Bildband fuellt die ganze Folie (kein dunkler Leerstreifen unter dem Band) */
@media (min-width:900px){#vergleich.bh-fh{display:grid;align-content:stretch}#vergleich.bh-fh>.home-abend-band{display:grid;align-content:center;height:100%;box-sizing:border-box}}