/* ══════════════════════════════════════════════════════════════════
   Unterseite „BAFA und KfW – Förderungen BEG 2026"
   Baut auf assets/style.css auf (Token, Kopfzeile, Hintergrund) und
   ergänzt nur, was die Förderflüsse brauchen. Alles ist unter .beg
   gekapselt, damit sich nichts mit der Startseite überschneidet.
   ══════════════════════════════════════════════════════════════════ */

/* Seite darf scrollen — die Startseite ist dagegen ein Bildschirm */
html:has(body.beg-page),body.beg-page{height:auto}
body.beg-page{overflow:auto}
.beg-page .shell{height:auto;min-height:100dvh;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr)}
.beg-page .shell > *,.beg > *,.beg section.block > *,.beg .rules > *,.beg .minis > *{min-width:0}

.beg{
  --halo:#111D25;
  --f-cost:#8FA3AE; --f-kredit:#5B9BD5; --f-zus:#E58A4F; --f-nh:#74BC62; --f-wpb:#E06A55; --f-ser:#A688DA;
  --f-isfp:#3FC1B1; --f-eink:#E3B23E; --f-kgb:#E06AA6; --f-fpb:#F2B25E; --f-eigen:#56676F;
  width:100%;max-width:1240px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(14px,1.4vw,22px);
  font-size:clamp(14px,.95vw,15.5px);
}
:root[data-theme="light"] .beg{
  --halo:#EDF2F5;
  --f-cost:#5A6E79; --f-kredit:#2E6A9E; --f-zus:#C8652A; --f-nh:#4A9444; --f-wpb:#B53D2E; --f-ser:#7656AE;
  --f-isfp:#16968A; --f-eink:#B8820A; --f-kgb:#BE3F7C; --f-fpb:#D48A22; --f-eigen:#A7B6BE;
}

/* Glasfläche wie die Kacheln der Startseite */
.beg .panel,.beg-intro{
  background:var(--pane);
  border:1px solid var(--edge);
  border-radius:clamp(12px,1.1vw,18px);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
          backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:var(--cast), inset 0 1px 0 var(--gloss);
}
:root[data-theme="light"] .beg .panel,:root[data-theme="light"] .beg-intro{background:rgba(255,255,255,.62)}

.beg a{color:var(--frost);border-bottom:1px solid var(--copper);transition:color .2s}
.beg a:hover{color:var(--copper-lit)}
.beg h2,.beg h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.12;text-wrap:balance}
.beg h2{font-size:clamp(20px,2vw,30px)}
.beg h3{font-size:clamp(15px,1.2vw,18px)}

/* ── Kopf der Unterseite ─────────────────────────────────────────── */
.beg-intro{padding:clamp(20px,2.6vw,40px);display:flex;flex-direction:column;gap:12px}
.beg-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--copper-lit);margin:0}
.beg-h1{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4vw,60px);line-height:1;letter-spacing:-.035em;margin:0;text-wrap:balance}
.beg-h1 em{font-style:normal;background:linear-gradient(96deg,var(--copper-lit),var(--iso-lit));-webkit-background-clip:text;background-clip:text;color:transparent}
.beg .lede{max-width:74ch;margin:0;color:var(--muted);font-size:clamp(14px,1.05vw,17px);line-height:1.55}
.beg .meta{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--faint);max-width:120ch;line-height:1.6}
.beg nav.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.beg nav.toc a{
  border:1px solid var(--edge);background:rgba(120,160,180,.06);border-radius:999px;padding:6px 13px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--frost);
  transition:border-color .2s,background .2s,transform .2s;
}
.beg nav.toc a:hover{border-color:var(--copper);background:rgba(201,123,74,.12);transform:translateY(-1px);color:var(--frost)}
.beg nav.toc a b{color:var(--copper-lit);font-weight:500;margin-right:6px}
.beg .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted)}
.beg .legend span{display:inline-flex;align-items:center;gap:6px}
.beg .legend i{width:20px;height:8px;border-radius:2px;display:inline-block}

/* ── Abschnitte ──────────────────────────────────────────────────── */
.beg section.block{display:flex;flex-direction:column;gap:12px;padding-top:clamp(18px,2vw,30px);scroll-margin-top:16px}
.beg .sec-head{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding:0 4px}
.beg .sec-no{font-family:var(--f-mono);font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1;color:var(--copper-lit);grid-row:span 2}
.beg .sec-sub{margin:0;color:var(--muted);font-size:.95em;max-width:90ch}

/* Eingaben */
.beg form.ctl{display:flex;flex-wrap:wrap;gap:12px 18px;padding:16px 18px}
.beg .fld{display:grid;gap:4px;min-width:0}
.beg .fld label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.beg .fld input[type=number],.beg .fld select{
  font:500 14px var(--f-mono);color:var(--frost);
  background:rgba(140,175,195,.07);border:1px solid var(--edge);border-radius:9px;
  padding:8px 10px;width:10rem;max-width:100%;
  transition:border-color .2s,background .2s;
}
.beg .fld select{font-family:var(--f-body);width:auto}
.beg .fld select option{color:#14202A;background:#EEF3F6}
:root[data-theme="light"] .beg .fld input[type=number],:root[data-theme="light"] .beg .fld select{background:rgba(255,255,255,.7)}
.beg .fld input:focus,.beg .fld select:focus{outline:none;border-color:var(--copper);background:rgba(201,123,74,.08)}
.beg .fld.sm input[type=number]{width:6.5rem}
.beg .chk{display:flex;align-items:center;gap:8px;font-size:13.5px;padding-top:18px;color:var(--frost);cursor:pointer}
.beg .chk input{accent-color:var(--copper);width:16px;height:16px}
.beg .chk.off{opacity:.42;cursor:default}
.beg .ctl-note{flex-basis:100%;margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* Kennzahlen */
.beg .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,.85vw,14px)}
.beg .kpi{
  background:var(--pane);border:1px solid var(--edge);border-radius:12px;padding:12px 16px;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:var(--cast), inset 0 1px 0 var(--gloss);
}
:root[data-theme="light"] .beg .kpi{background:rgba(255,255,255,.62)}
.beg .kpi .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.beg .kpi .v{font:500 clamp(17px,1.5vw,23px) var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px}
.beg .kpi.hot .v{color:var(--copper-lit)}

/* Diagramme */
.beg figure.flow{margin:0;padding:12px 10px 8px}
.beg .fig-scroll{overflow-x:auto}
.beg figure.flow svg{display:block;width:100%;height:auto;min-width:780px}
.beg figure.flow figcaption{font-size:12px;color:var(--faint);padding:6px 8px 4px;max-width:95ch}
.beg .sk-link{fill-opacity:.74;transition:fill-opacity .15s}
.beg .sk-link:hover{fill-opacity:.95}
.beg .sk-lab,.beg .sk-val,.beg .sk-head{paint-order:stroke;stroke:var(--halo);stroke-width:4px;stroke-linejoin:round}
.beg .sk-lab{font:600 12.5px var(--f-body);fill:var(--frost)}
.beg .sk-val{font:500 11.5px var(--f-mono);fill:var(--muted)}
.beg .sk-head{font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;fill:var(--faint)}
.beg .sk-scale{fill:var(--muted)}

/* Konditionen und Hinweise */
.beg .rules{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(8px,.85vw,14px)}
.beg .notes{padding:16px 20px}
.beg .notes h3{margin-bottom:10px}
.beg dl.rl{margin:0;display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);font-size:13.5px}
.beg dl.rl dt{font-weight:600;color:var(--frost);padding:8px 12px 8px 0;border-top:1px solid var(--rule)}
.beg dl.rl dd{margin:0;padding:8px 0;border-top:1px solid var(--rule);color:var(--muted)}
.beg table.rate{border-collapse:collapse;margin-top:2px}
.beg table.rate th,.beg table.rate td{padding:2px 14px 2px 0;text-align:left;font-variant-numeric:tabular-nums}
.beg table.rate th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500}
.beg table.rate td{font-family:var(--f-mono);font-size:12.5px;color:var(--frost)}
.beg .notes ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.beg .notes li{position:relative;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.55}
.beg .notes li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--copper)}
.beg .notes li b{color:var(--frost);font-weight:600}

/* Fachplanung: vier kleine Flüsse */
.beg .minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,.85vw,14px)}
.beg .mini{padding:14px 10px 6px}
.beg .mini h3{padding:0 8px}
.beg .mini .res{font-size:12.5px;color:var(--muted);padding:4px 8px 0;margin:0}
.beg .mini .res b{font-family:var(--f-mono);color:var(--copper-lit);font-weight:500}
.beg .mini svg{display:block;width:100%;height:auto;min-width:440px}
.beg .tbl-scroll{overflow-x:auto}
.beg table.fpb{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.beg table.fpb th,.beg table.fpb td{padding:10px 14px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.beg table.fpb td{color:var(--muted)}
.beg table.fpb thead th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:500;border-bottom:1px solid var(--edge-hover)}
.beg table.fpb tbody th{width:24%;color:var(--frost);font-weight:600}
.beg table.fpb tbody tr:last-child th,.beg table.fpb tbody tr:last-child td{border-bottom:0}
.beg .src{font-size:12px;color:var(--faint);margin:0;padding:0 4px}

/* Beratung */
.beg-cta{padding:clamp(18px,2.2vw,32px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center}
.beg-cta p{margin:6px 0 0;color:var(--muted);max-width:70ch}
.beg-cta .btns{display:flex;flex-wrap:wrap;gap:10px}
.beg .btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;border:0;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.beg .btn--main{background:linear-gradient(100deg,var(--copper),#B0663A);color:#12181C;box-shadow:0 12px 26px -14px rgba(201,123,74,.9)}
.beg .btn--main:hover{color:#12181C;transform:translateY(-2px)}
.beg .btn--line{border:1px solid var(--edge);background:var(--pane);color:var(--frost)}
.beg .btn--line:hover{border-color:var(--copper);transform:translateY(-2px)}
:root[data-theme="light"] .beg .btn--main,:root[data-theme="light"] .beg .btn--main:hover{color:#FFF}

/* Quellen */
.beg ol.srcs{margin:0;padding:16px 20px 16px 38px;display:grid;gap:6px;font-size:13px;color:var(--muted)}
.beg ol.srcs a{border-bottom-color:var(--edge-hover)}
.beg footer.disc{font-size:12px;color:var(--faint);padding:4px 4px 0;max-width:100ch}

/* Kopfzeile: Rückweg */
.beg-page .mark{color:inherit}
.act--home svg{stroke:var(--copper-lit)}

@media (max-width:1180px){
  .beg .fld input[type=number],.beg .fld select{min-height:44px;font-size:16px}
  .beg .chk{min-height:44px;padding-top:14px}
  .beg nav.toc a{min-height:40px;display:inline-flex;align-items:center}
}
@media (max-width:900px){
  .beg .rules,.beg .minis{grid-template-columns:1fr}
  .beg-cta{grid-template-columns:1fr}
}
@media (max-width:720px){
  .beg .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beg dl.rl{grid-template-columns:1fr}
  .beg dl.rl dd{border-top:0;padding-top:0}
  .beg form.ctl{padding:14px}
}
@media (prefers-reduced-motion:reduce){.beg .sk-link{transition:none}}