/* ==============================================================
   seite-version-d — neue Angebots-Sektionen (09.09.2026)
   Ergänzt style.css, überschreibt nichts Bestehendes.
   Klassen: sy (System-Überblick) · sx (Systemsektion, zweispaltig)
            fd (Fundament, Navy-Band) · rc (Rechnung) · eh (Ehrlich)
   ============================================================== */

/* ---------- gemeinsame Bausteine ---------- */
.kz{ /* Konturziffer — das Markenmotiv der Seite, wie in #ablauf */
  font-weight:300;line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(10,23,48,.34);
  font-variant-numeric:tabular-nums}
.on-dark .kz{-webkit-text-stroke-color:rgba(255,255,255,.34)}

.ph{ /* Platzhalter-Block für Zahlen, die noch nicht gemessen sind */
  display:inline-block;vertical-align:-.08em;height:.78em;min-width:3.2ch;
  border-radius:1px;background:rgba(10,23,48,.13)}
.on-dark .ph{background:rgba(255,255,255,.22)}

/* ---------- SY · Das System im Überblick ---------- */
.sy{background:#fff;position:relative;overflow:hidden}
.sy .head-mitte{margin-bottom:56px}
/* Kein min-height: die Grafik setzt ihre Hoehe selbst. 520px war der Rest der
   alten 500er-Buehne und schob 20px Leerraum unter die Grafik. */
.sy__stage{position:relative;margin:0 auto;max-width:1264px}
.sy__stage .wg{width:100%}
/* .sy__foot geloescht: das Element existiert im Markup nicht mehr (Rest einer
   entfernten Fussnote), die Regeln waren verwaist. */

/* ---------- SX · Systemsektion (Anfragen / Bewerber) ---------- */
.sx{position:relative}
.sx--alt{background:var(--bg-alt)}
.sx__head{position:relative;margin-bottom:64px}
.sx__head .lbl{margin-bottom:18px}
.sx__head .h2{max-width:15em}
.sx__head .lede{max-width:640px;margin-top:20px}
.sx__grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.sx--flip .sx__grid{grid-template-columns:7fr 5fr}
.sx--flip .sx__txt{order:2}
.sx--flip .sx__viz{order:1}
.sx__viz{position:sticky;top:104px}
.sx__viz .wg{width:100%}

/* Bausteine als Zeilen mit Haarlinie — kein Kachelraster */
.sx__rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sx__row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;
  padding:28px 0 30px;border-bottom:1px solid var(--line)}
.sx__row .kz{font-size:46px;padding-top:2px}
.sx__name{margin:0;font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.sx__do{margin:8px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.sx__get{margin:10px 0 0;display:flex;gap:10px;align-items:baseline;
  font-size:15.5px;line-height:1.5;color:var(--ink)}
.sx__get i{flex:none;font:600 11px/1.6 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);font-style:normal}

/* Ergebnis als Szene */
.sx__scene{margin:40px 0 0;padding:28px 32px 30px;background:#fff;
  border:1px solid var(--line);border-left:2px solid var(--blue);border-radius:2px}
.sx--alt .sx__scene{background:#fff}
.sx__scene .lbl{margin-bottom:12px}
.sx__scene p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}

@media(max-width:1040px){
  .sx__grid,.sx--flip .sx__grid{grid-template-columns:1fr;gap:48px}
  .sx--flip .sx__txt{order:1}.sx--flip .sx__viz{order:2}
  .sx__viz{position:static}
}
@media(max-width:760px){
  .sx__row{grid-template-columns:52px 1fr;gap:12px;padding:22px 0 24px}
  .sx__row .kz{font-size:36px}
  .sx__scene{padding:22px 22px 24px}
}

/* ---------- FD · Fundament (Navy-Band) ---------- */
.fd{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.fd::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 0%,rgba(24,91,237,.22) 0%,rgba(24,91,237,0) 70%)}
.fd .container{position:relative;z-index:1}
.fd__head{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:end;margin-bottom:64px}
.fd__head .lbl{color:var(--blue);margin-bottom:18px}
.fd__head .h2{color:#fff}
.fd__head .h2 strong{color:#fff}
.fd__head .lede{color:rgba(255,255,255,.72)}
.fd__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--wline)}
.fd__item{padding:32px 28px 40px 0;border-right:1px solid var(--wline-soft);
  display:flex;flex-direction:column;gap:18px}
.fd__item + .fd__item{padding-left:28px}
.fd__item:last-child{border-right:0;padding-right:0}
.fd__gfx{height:190px;border-radius:2px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.05);border:1px solid var(--wline-soft)}
.fd__gfx .wg{width:100%;height:100%}
.fd__no{font:600 11.5px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;color:var(--blue)}
.fd__name{margin:0;font-size:19px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:#fff}
.fd__p{margin:0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.72)}
@media(max-width:1040px){
  .fd__head{grid-template-columns:1fr;gap:16px}
  .fd__grid{grid-template-columns:1fr 1fr}
  .fd__item{padding:28px 24px 32px 0}
  .fd__item:nth-child(2n){border-right:0;padding-right:0}
  .fd__item:nth-child(n+3){border-top:1px solid var(--wline-soft)}
  .fd__item:nth-child(3){padding-left:0}
}
@media(max-width:600px){
  .fd__grid{grid-template-columns:1fr}
  .fd__item,.fd__item + .fd__item{padding:26px 0 30px;border-right:0}
  .fd__item + .fd__item{border-top:1px solid var(--wline-soft)}
}

/* ---------- RC · Die Rechnung ---------- */
.rc{background:var(--bg-alt)}
.rc .head-mitte{margin-bottom:56px}
.rc__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto}
.rc__col{position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:44px 44px 40px;display:flex;flex-direction:column;gap:14px}
.rc__col--r{border-color:rgba(24,91,237,.5);box-shadow:0 30px 40px -22px rgba(11,27,43,.18)}
.rc__col--r::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;height:3px;background:var(--blue)}
.rc__q{margin:0;font:600 12px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.rc__col--r .rc__q{color:var(--blue)}
.rc__h{margin:0;font-size:clamp(24px,2.2vw,30px);line-height:1.15;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.rc__big{margin:14px 0 0;font-size:clamp(34px,3.6vw,52px);line-height:1.05;font-weight:300;letter-spacing:-.03em;color:var(--ink);
  display:flex;flex-direction:column;gap:10px}
.rc__big small{display:block;font-size:14px;letter-spacing:.02em;color:var(--ink-3);font-weight:400;margin-top:4px}
.rc__big .ph{min-width:4.6ch;height:.72em}
.rc__p{margin:12px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.rc__note{margin:40px auto 0;max-width:760px;text-align:center;font-size:14px;line-height:1.6;color:var(--ink-3)}
@media(max-width:820px){.rc__grid{grid-template-columns:1fr}.rc__col{padding:32px 26px 30px}}

/* ---------- EH · Ehrlich gesagt (Damaging Admission + Warum jetzt) ---------- */
.eh .pm-wende{margin-top:0}
.eh__kick{display:block;font:600 12px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 18px}
.eh__list{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.eh__list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.eh__list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--blue)}
.eh__cta{margin-top:28px}
@media(max-width:1040px){
  .eh .pm-wende{grid-template-columns:1fr}
  .eh .pm-wende__img{justify-self:center}
}

/* ---------- Ablauf-Kopf: Methodenname ---------- */
.ab__kick i{font-style:normal;font-weight:400;color:var(--ink-3);letter-spacing:.08em}

/* ---------- Platzhalter für Grafiken (bis die Fragmente eingesetzt sind) ---------- */
.gfx-ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1264/520;
  border:1px dashed rgba(10,23,48,.28);border-radius:2px;background:repeating-linear-gradient(135deg,rgba(10,23,48,.03) 0 12px,transparent 12px 24px)}
.gfx-ph--tall{aspect-ratio:600/520}
.fd .gfx-ph{aspect-ratio:auto;height:100%;border-color:rgba(255,255,255,.28);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px)}
.gfx-ph span{font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:0 12px}
.fd .gfx-ph span{color:rgba(255,255,255,.6)}

/* ---------- Für wen / nicht für wen ---------- */
.sy__who{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:72px auto 0;max-width:1080px;border-top:1px solid var(--line);padding-top:40px}
.sy__who-col .lbl{margin-bottom:16px}
.sy__who-col--no .lbl{color:var(--ink-3)}
.sy__who ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sy__who li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.sy__who li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1px;background:var(--blue)}
.sy__who-col--no li::before{background:var(--ink-3)}
@media(max-width:760px){.sy__who{grid-template-columns:1fr;gap:32px;margin-top:48px}}

/* ---------- dunkle Labels im Fundament ---------- */
.fd .lbl i{color:rgba(255,255,255,.5)}
.ph-txt{color:var(--ink-3);font-style:italic}
.final__ps{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:62ch}

/* ---------- EW · Einwände offen beantwortet ---------- */
.ew{background:#fff}
.ew__head{margin-bottom:64px}
.ew__head .lede{max-width:680px;margin-top:20px}
.ew__list{border-top:1px solid var(--line)}
.ew__q{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:48px 0 52px;border-bottom:1px solid var(--line)}
.ew__ask{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start}
.ew__ask .kz{font-size:46px;padding-top:4px}
.ew__h{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.ew__ans p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.ew__ans p + p{margin-top:14px}
.ew__aside{margin-top:18px!important;padding:18px 22px;background:var(--bg-alt);border-left:2px solid var(--blue);color:var(--ink)!important}
.ew__gfx{margin-top:32px}
.ew__gfx .wg{width:100%}
.gfx-ph--g6{aspect-ratio:1080/460}
@media(max-width:1040px){
  .ew__q{grid-template-columns:1fr;gap:24px;padding:36px 0 40px}
  .ew__ask{grid-template-columns:52px 1fr;gap:12px}
  .ew__ask .kz{font-size:36px}
}

/* ---------- RC · Rechenkette ---------- */
.rc .head-mitte .lede{max-width:760px}
.rc__chain{position:relative;margin:0 auto;max-width:1264px}
.rc__chain .wg{width:100%}
.rc__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  background:#fff;border:1px solid var(--line);border-radius:2px}
.rc__steps li{position:relative;padding:30px 26px 32px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px;min-width:0}
.rc__steps li:last-child{border-right:0}
.rc__steps .kz{font-size:40px;margin-bottom:6px}
.rc__steps b{font-size:17px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.rc__steps .ph{display:block;height:30px;width:64%;margin:6px 0 2px}
.rc__steps small{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.rc__satz{margin:36px auto 0;max-width:760px;text-align:center;font-size:17px;line-height:1.62;color:var(--ink)}
.rc__note{margin:14px auto 0}
.rc__cta{margin-top:32px;text-align:center}
@media(max-width:1040px){.rc__steps{grid-template-columns:repeat(2,1fr)}.rc__steps li{border-bottom:1px solid var(--line-soft)}.rc__steps li:nth-child(2n){border-right:0}.rc__steps li:last-child{grid-column:1/-1}}
@media(max-width:600px){.rc__steps{grid-template-columns:1fr}.rc__steps li{border-right:0}}

/* ---------- GT · So läuft das nach sechs Monaten ---------- */
.gt__check{margin-top:56px;display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;
  border-top:1px solid var(--line);padding-top:44px}
.gt__check-txt .lbl{margin-bottom:14px}
.gt__check-txt p{margin:0;font-size:17px;line-height:1.62;color:var(--ink)}
.gt__check-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gt__check-list li{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.gt__check-list .kz{font-size:30px}
.gt__check-end{grid-column:2;margin:6px 0 0;font-size:16px;font-weight:500;color:var(--ink)}
@media(max-width:900px){.gt__check{grid-template-columns:1fr;gap:24px}.gt__check-end{grid-column:1}}

/* ==============================================================
   GFX · gemeinsame Bausteine der Systemgrafiken (10.09.2026)
   Bühne in festen px gezeichnet, per zoom auf Containerbreite skaliert.
   Markenmotiv: Rasterpapier, weiße 2-px-Karten mit Haarlinie, Navy-Masse,
   blaue Bahnen (stroke-dashoffset), Konturziffern, WebMount-Meldungen.
   ============================================================== */
.wg{position:relative;width:100%;overflow:hidden;font-family:'Inter Tight',system-ui,sans-serif;--z:1}
.wg .g-stage{position:absolute;left:0;top:0;zoom:var(--z);overflow:hidden}
.wg .g-stage,.wg .g-stage *{box-sizing:border-box}
.wg .g-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,37,87,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,37,87,.045) 1px,transparent 1px);
  background-size:22px 22px}
.on-dark .wg .g-grid,.wg--dark .g-grid{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
/* Karten */
.wg .g-card{position:absolute;background:#fff;border-radius:2px;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 24px 40px -22px rgba(11,27,43,.22)}
.wg .card--navy{background:var(--navy);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 44px -24px rgba(11,27,43,.5)}
.wg .g-lbl{position:absolute;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.wg .lbl--dim{color:var(--ink-3)}
.wg .lbl--w{color:rgba(255,255,255,.72)}
/* Google-Suchfeld (einzige Rundung: echtes Google-Bauteil) */
.wg .g-gs{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 16px;background:#fff;border-radius:20px;
  box-shadow:0 1px 6px rgba(32,33,36,.28);font:400 14px/1 Roboto,Arial,system-ui,sans-serif;color:#202124}
.wg .g-gs i{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #9AA0A6;position:relative}
.wg .g-gs i::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;background:#9AA0A6;transform:rotate(45deg)}
.wg .g-gs .g-q{white-space:nowrap;overflow:hidden}
.wg .g-gs .g-bar{display:inline-block;width:52px;height:11px;background:#DADCE0;border-radius:1px;vertical-align:-1px;margin-left:4px}
.wg .g-gs .g-cur{display:inline-block;width:1px;height:16px;background:#202124;vertical-align:-3px;margin-left:1px;animation:gfxblink 1s steps(2) infinite}
@keyframes gfxblink{50%{opacity:0}}
/* Suchergebnis-Zeile */
.wg .g-res{position:absolute;left:0;right:0;padding:10px 12px;font-family:Roboto,Arial,system-ui,sans-serif}
.wg .g-res .g-u{font-size:9.5px;color:#4D5156;display:flex;align-items:center;gap:6px}
.wg .g-res .g-u b{display:inline-block;width:14px;height:14px;border-radius:50%;background:#E8EAED}
.wg .g-res .g-t{margin-top:3px;font-size:13.5px;color:#1A0DAB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg .g-res .g-d{margin-top:3px;font-size:10.5px;color:#4D5156;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg .res--mute .g-t,.wg .res--mute .g-d,.wg .res--mute .g-u{color:#B0B4BA}
.wg .res--own{background:#F8F9FA}
.wg .res--own .g-t{color:#0B2557;font-weight:500}
/* Sterne */
.wg .g-stars{display:inline-flex;gap:1.5px;vertical-align:middle}
.wg .g-stars i{width:9px;height:9px;background:#FBBC04;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* WebMount-Meldung */
.wg .g-chip{position:absolute;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:#fff;border-radius:2px;
  box-shadow:0 0 0 1px rgba(10,23,48,.12),0 14px 28px -14px rgba(11,27,43,.3);font-family:'Inter Tight',system-ui,sans-serif}
.wg .g-chip .g-ic{flex:none;width:26px;height:26px;border-radius:2px;background:var(--blue);display:flex;align-items:center;justify-content:center}
.wg .g-chip .g-ic img{width:18px;height:18px;display:block;filter:brightness(0) invert(1)}
.wg .g-chip .g-tx{min-width:0}
.wg .g-chip .g-app{display:flex;gap:8px;font:600 9px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.wg .g-chip .g-app i{font-style:normal;font-weight:400;letter-spacing:.04em;text-transform:none}
.wg .g-chip .g-h{margin-top:4px;font:500 12px/1.3 'Inter Tight',system-ui,sans-serif;color:var(--ink)}
.wg .g-chip .g-p{margin-top:2px;font:400 11px/1.35 'Inter Tight',system-ui,sans-serif;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Betriebsmarke Elektro Berger — neutral, nicht WebMount-Blau */
.wg .g-mark{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.06em;color:#1E3A2F}
.wg .g-mark b{width:18px;height:18px;border-radius:2px;background:#2E5E4E;position:relative;flex:none}
.wg .g-mark b::after{content:"";position:absolute;left:5px;top:3px;width:8px;height:12px;background:#fff;clip-path:polygon(60% 0,0 55%,45% 55%,35% 100%,100% 42%,55% 42%)}
/* Bahnen */
.wg svg.g-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.wg .g-wire{fill:none;stroke:rgba(10,23,48,.16);stroke-width:1}
.wg .g-wire--on{stroke:var(--blue);stroke-width:1.4;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s cubic-bezier(.22,.8,.24,1)}
.wg.is-on .g-wire--on{stroke-dashoffset:0}
.wg .g-dot{fill:var(--blue)}
/* Reveal-Bausteine: alles startet versteckt, .is-on schaltet mit gestaffelter Verzögerung */
.wg .g-rv{opacity:0;transform:translateY(14px);transition:opacity .85s cubic-bezier(.22,.8,.24,1) var(--d,0s),transform .85s cubic-bezier(.22,.8,.24,1) var(--d,0s)}
.wg .rv--x{transform:translateX(18px)}
.wg.is-on .g-rv{opacity:1;transform:none}
.wg .g-ph{border-radius:1px}
@media(prefers-reduced-motion:reduce){.wg .g-rv,.wg .g-wire--on{transition:none!important}}
.wg.is-still *,.wg.is-still *::before,.wg.is-still *::after{transition:none!important;animation:none!important}
.rc__legend{list-style:none;margin:18px auto 0;padding:0;max-width:1264px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px}
.rc__legend li{font-size:13px;line-height:1.5;color:var(--ink-3);padding:0 18px}
.rc__legend b{display:block;font:600 10px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.16em;color:var(--blue);margin-bottom:6px}
@media(max-width:1040px){.rc__legend{grid-template-columns:1fr;gap:10px}.rc__legend li{padding:0}.rc__legend b{display:inline;margin-right:8px}}
.ew__q > .ew__gfx{grid-column:1/-1;margin-top:8px}
.ew__gfx .wg{max-width:1080px;margin:0 auto}