/* =========================================================================
   Leistungsbaukasten – Preisrechner auf preise.html
   =========================================================================
   Alle Farben, Radien und Kurven kommen aus dem Designsystem in style.css.
   Die Fallback-Werte hinter jedem var() sind bewusst stehen geblieben:
   sie greifen nur, falls diese Datei einmal ohne style.css geladen wird.
   ========================================================================= */
/* ============================================================
   Leistungsbaukasten – nutzt die Tokens aus style.css,
   Fallbacks nur für den Standalone-Betrieb dieser Datei.
   ============================================================ */
.bk{
  --bk-bg:      var(--ink-950, #070B0D);
  --bk-card:    var(--ink-900, #0B1114);
  --bk-card2:   var(--ink-850, #0F171B);
  --bk-line:    var(--ink-700, #1D2C33);
  --bk-line2:   var(--ink-600, #2A3D45);
  --bk-brand:   var(--brand-500, #5FBB46);
  --bk-brand-d: var(--brand-600, #4A9B36);
  --bk-glass:   var(--glass-cyan, #8FE6DA);
  --bk-tx:      var(--tx-light, #fff);
  --bk-mute:    var(--tx-light-mute, rgba(255,255,255,.72));
  --bk-faint:   var(--tx-light-faint, rgba(255,255,255,.52));
  --bk-r:       var(--r-md, 18px);
  --bk-rs:      var(--r-sm, 12px);
  --bk-ease:    var(--ease-out, cubic-bezier(.22,.75,.28,1));

  background:var(--bk-bg);
  color:var(--bk-tx);
  padding:clamp(3.5rem,3rem + 5vw,7rem) 0;
  font-family:'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.6;
}
.bk *,.bk *::before,.bk *::after{box-sizing:border-box}
.bk__wrap{max-width:var(--wrap,1240px);margin:0 auto;padding:0 var(--gutter,clamp(1.15rem,4vw,2.5rem))}

/* ---- Kopf ---- */
.bk__head{max-width:46rem;margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)}
.bk__eyebrow{
  font-family:'Manrope',system-ui,sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bk-brand);margin:0 0 .9rem
}
.bk__title{
  font-family:'Manrope',system-ui,sans-serif;
  font-size:clamp(1.9rem,1.15rem + 2.9vw,3.4rem);
  font-weight:800;line-height:1.06;letter-spacing:-.02em;margin:0 0 1rem
}
.bk__lead{color:var(--bk-mute);font-size:clamp(1.05rem,.98rem + .48vw,1.3rem);margin:0 0 1.8rem;max-width:38rem}

/* ---- Segmente ---- */
.bk__seg{display:inline-flex;gap:.25rem;padding:.3rem;background:var(--bk-card2);
  border:1px solid var(--bk-line);border-radius:var(--r-pill,999px)}
.bk__seg--wrap{flex-wrap:wrap}
.bk__segbtn{
  font:inherit;font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:.95rem;
  padding:.6rem 1.35rem;border:0;border-radius:var(--r-pill,999px);background:transparent;
  color:var(--bk-faint);cursor:pointer;transition:color var(--t-fast,.18s),background var(--t-fast,.18s)
}
.bk__segbtn:hover{color:var(--bk-tx)}
.bk__segbtn.is-on{background:var(--bk-brand);color:#07130A}
.bk__seg--sm .bk__segbtn{font-size:.88rem;padding:.5rem 1.05rem}

/* ---- Layout ---- */
.bk__grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.75rem);align-items:start}
@media (min-width:940px){.bk__grid{grid-template-columns:minmax(0,1fr) 22.5rem}}

/* -------------------------------------------------------------------------
   Textfarben gegen das Grundstylesheet durchsetzen
   -------------------------------------------------------------------------
   Der Baukasten stand ursprünglich als eigenständige Datei ohne style.css.
   Eingebunden in die Website erben Überschriften und <strong> die dunkle
   Textfarbe des Grundstylesheets – auf dem fast schwarzen Grund des
   Rechners waren sie dadurch unsichtbar.

   Die Regeln unten setzen nur dort eine helle Farbe, wo der Untergrund
   dunkel ist. Schaltflächen mit grüner Fläche bleiben bewusst
   ausgenommen: dort ist die dunkle Schrift richtig.
   ------------------------------------------------------------------------- */
.bk h2, .bk h3,
.bk__title, .bk__gtitle, .bk__korbtitle{ color:var(--bk-tx); }
.bk__summewert{ color:var(--bk-tx); }
.bk__hinweisleiste strong{ color:var(--bk-tx); }
.bk__abotitle{ color:var(--bk-tx); }

/* Der Katalog steht in einer eigenen Rasterspalte. min-width:0 verhindert,
   dass lange Positionsnamen die Spalte über die Rasterbreite hinaus
   aufziehen – Grid-Elemente wachsen sonst mit ihrem Inhalt. */
.bk__katalog{min-width:0}

/* Hinweiszeile, die im Kopf den früheren Privat/Gewerbe-Umschalter ersetzt */
.bk__hinweisleiste{
  margin:1.5rem 0 0;
  padding:.85rem 1.1rem;
  border:1px solid var(--bk-line);
  border-left:3px solid var(--bk-brand);
  border-radius:0 var(--bk-rs) var(--bk-rs) 0;
  background:var(--bk-card2);
  color:var(--bk-mute);
  font-size:.92rem;
  line-height:1.6;
  max-width:64ch;
}
.bk__hinweisleiste a{color:var(--bk-brand);text-decoration:underline;text-underline-offset:2px}
.bk__hinweisleiste a:hover{color:var(--bk-glass)}

/* ---- Optionszeile ---- */
.bk__opt{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-bottom:2rem}
.bk__optlabel{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:.95rem}

/* ---- Gruppen ---- */
.bk__gruppe{margin-bottom:2.5rem}
.bk__gtitle{
  font-family:'Manrope',system-ui,sans-serif;font-size:1.1rem;font-weight:800;
  letter-spacing:-.01em;margin:0 0 .35rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--bk-line)
}
.bk__ghint{color:var(--bk-faint);font-size:.9rem;margin:.7rem 0 0;max-width:42rem}
.bk__items{margin-top:1rem;display:grid;gap:.5rem}

/* ---- Zeile ---- */
.bk__item{
  display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem;align-items:center;
  padding:.85rem 1rem;background:var(--bk-card);border:1px solid var(--bk-line);
  border-radius:var(--bk-rs);transition:border-color var(--t-fast,.18s),background var(--t-fast,.18s)
}
.bk__item.is-aktiv{border-color:var(--bk-brand-d);background:var(--bk-card2)}
.bk__itemtx{min-width:0}
.bk__itemname{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:.98rem;display:block}
.bk__itempreis{color:var(--bk-faint);font-size:.86rem;font-variant-numeric:tabular-nums}
.bk__itemnote{display:block;color:var(--bk-faint);font-size:.82rem;margin-top:.15rem}

/* Stepper */
.bk__step{display:flex;align-items:center;gap:.15rem;background:var(--bk-bg);
  border:1px solid var(--bk-line2);border-radius:var(--r-pill,999px);padding:.2rem}
.bk__stepbtn{
  width:2.1rem;height:2.1rem;border:0;border-radius:50%;background:transparent;color:var(--bk-tx);
  font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background var(--t-fast,.18s)
}
.bk__stepbtn:hover:not(:disabled){background:var(--bk-line2)}
.bk__stepbtn:disabled{opacity:.3;cursor:default}
.bk__stepval{min-width:2.4rem;text-align:center;font-variant-numeric:tabular-nums;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700}

/* Schalter */
.bk__toggle{position:relative;width:3.1rem;height:1.75rem;flex:0 0 auto;border:0;padding:0;
  border-radius:var(--r-pill,999px);background:var(--bk-line2);cursor:pointer;
  transition:background var(--t-fast,.18s)}
.bk__toggle::after{content:"";position:absolute;top:.22rem;left:.22rem;width:1.31rem;height:1.31rem;
  border-radius:50%;background:#fff;transition:transform var(--t-fast,.18s) var(--bk-ease)}
.bk__toggle[aria-pressed="true"]{background:var(--bk-brand)}
.bk__toggle[aria-pressed="true"]::after{transform:translateX(1.35rem)}

/* Auswahlliste (PV) */
.bk__wahl{display:flex;flex-wrap:wrap;gap:.4rem;grid-column:1/-1;margin-top:.15rem}
.bk__wahlbtn{
  font:inherit;font-size:.85rem;font-family:'Manrope',system-ui,sans-serif;font-weight:700;
  padding:.42rem .85rem;border-radius:var(--r-pill,999px);cursor:pointer;
  background:var(--bk-bg);border:1px solid var(--bk-line2);color:var(--bk-mute);
  transition:all var(--t-fast,.18s)
}
.bk__wahlbtn:hover{color:var(--bk-tx);border-color:var(--bk-brand-d)}
.bk__wahlbtn.is-on{background:var(--bk-brand);border-color:var(--bk-brand);color:#07130A}

/* ---- Warenkorb ---- */
@media (min-width:940px){.bk__korb{position:sticky;top:calc(var(--header-h,76px) + 1.5rem)}}
.bk__korbinner{
  background:linear-gradient(180deg,var(--bk-card2),var(--bk-card));
  border:1px solid var(--bk-line2);border-radius:var(--bk-r);padding:1.5rem 1.35rem 1.35rem
}
.bk__korbtitle{font-family:'Manrope',system-ui,sans-serif;font-size:1.05rem;font-weight:800;margin:0 0 1rem}
.bk__zeilen{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.55rem;
  max-height:19rem;overflow-y:auto}
.bk__zeile{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;align-items:baseline}
.bk__zeile span:first-child{color:var(--bk-mute);min-width:0}
.bk__zeile b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk__zeile--rabatt span:first-child,.bk__zeile--rabatt b{color:var(--bk-brand)}
.bk__leer{color:var(--bk-faint);font-size:.9rem;font-style:italic}

/* Füllstand */
.bk__pegel{margin-bottom:1.1rem}
.bk__pegelbar{height:.42rem;border-radius:var(--r-pill,999px);background:var(--bk-line);overflow:hidden}
.bk__pegelbar span{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--bk-glass),var(--bk-brand));
  transition:width var(--t-med,.36s) var(--bk-ease)}
.bk__pegeltext{margin:.5rem 0 0;font-size:.83rem;color:var(--bk-faint)}

/* Summe */
.bk__summe{padding:1.1rem 0;border-top:1px solid var(--bk-line2);display:grid;gap:.15rem}
.bk__summelabel{font-size:.85rem;color:var(--bk-faint)}
.bk__summewert{font-family:'Manrope',system-ui,sans-serif;font-size:2.15rem;font-weight:800;
  line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bk__summenote{font-size:.8rem;color:var(--bk-faint)}

/* Abo */
.bk__abo{padding-top:1.1rem;border-top:1px solid var(--bk-line2)}
.bk__abotitle{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:.92rem;margin:0 0 .6rem}
.bk__aboopts{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}
.bk__abobtn{
  font:inherit;font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:.85rem;
  padding:.55rem .5rem;border-radius:var(--bk-rs);cursor:pointer;text-align:center;
  background:var(--bk-bg);border:1px solid var(--bk-line2);color:var(--bk-mute);
  display:grid;gap:.1rem;transition:all var(--t-fast,.18s)
}
.bk__abobtn em{font-style:normal;font-size:.75rem;font-weight:600;opacity:.75}
.bk__abobtn:hover{color:var(--bk-tx);border-color:var(--bk-brand-d)}
.bk__abobtn.is-on{background:var(--bk-brand);border-color:var(--bk-brand);color:#07130A}
.bk__abomonat{margin:.75rem 0 0;font-size:.88rem;color:var(--bk-brand);font-weight:600}

.bk__steuer{margin:1rem 0 0;font-size:.83rem;color:var(--bk-mute);
  padding:.7rem .85rem;background:rgba(95,187,70,.09);
  border:1px solid rgba(95,187,70,.22);border-radius:var(--bk-rs)}

.bk__cta{
  width:100%;margin-top:1.15rem;padding:.95rem 1rem;border:0;border-radius:var(--r-pill,999px);
  background:var(--bk-brand);color:#07130A;cursor:pointer;
  font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1rem;
  transition:transform var(--t-fast,.18s),box-shadow var(--t-fast,.18s),background var(--t-fast,.18s)
}
.bk__cta:hover{background:var(--brand-400,#78D05E);transform:translateY(-1px);
  box-shadow:var(--sh-glow,0 18px 44px -18px rgba(95,187,70,.55))}
.bk__cta:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.bk__fein{margin:.8rem 0 0;font-size:.79rem;color:var(--bk-faint);line-height:1.5}

.bk :focus-visible{outline:2px solid var(--bk-glass);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.bk *{transition:none!important}}