/* RAUMRISS · Konfigurator wie ein Bestellschein (Papier-Look, braucht studio.css). Benutzt auf preise.html und rechner-software-kosten.html. */
.konf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.konf-auswahl{border:1.5px solid var(--s-linie);background:var(--s-karte)}
.gruppe{padding:26px 28px}
.gruppe + .gruppe{border-top:1.5px solid var(--s-linie)}
.gruppe-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gruppe h3{font-size:22px}
.gruppe-kopf b{font-family:var(--s-mono);font-weight:400;font-size:12px;color:var(--s-akzent)}
.gruppe p{margin:6px 0 16px;color:var(--s-zweit);font-size:15px}
.bausteine{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--s-haar);border-left:1px solid var(--s-haar)}
.baustein{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px;cursor:pointer;border-right:1px solid var(--s-haar);border-bottom:1px solid var(--s-haar);background:#fff;transition:background .15s,color .15s}
.baustein:hover{background:#f6f2ea}
.baustein input{position:absolute;opacity:0;pointer-events:none}
.baustein .haken{width:20px;height:20px;border:1.5px solid var(--s-linie);flex:none;display:grid;place-items:center;margin-top:1px;background:#fff}
.baustein .haken::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.baustein b{display:block;font-size:15px}
.baustein small{display:block;color:var(--s-zweit);font-size:13px;line-height:1.35;margin-top:2px}
.baustein:has(input:checked){background:var(--s-tinte);color:var(--s-grund)}
.baustein:has(input:checked) small{color:#c9c3b8}
.baustein:has(input:checked) .haken{background:var(--s-akzent);border-color:var(--s-akzent)}
.baustein:has(input:checked) .haken::after{opacity:1}
.baustein:has(input:focus-visible){outline:2px solid var(--s-akzent);outline-offset:-2px}
.regler{display:flex;align-items:center;gap:16px}
.regler input[type=range]{flex:1;accent-color:var(--s-akzent);height:28px}
.regler output{min-width:130px;text-align:right;font-family:var(--s-mono);font-size:13px;text-transform:uppercase}
.schalter{display:inline-grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--s-linie)}
.schalter label{position:relative;cursor:pointer}
.schalter input{position:absolute;opacity:0;pointer-events:none}
.schalter span{display:block;padding:10px 26px;font-weight:600;font-size:15px;text-align:center}
.schalter input:checked + span{background:var(--s-tinte);color:var(--s-grund)}
.schalter input:focus-visible + span{outline:2px solid var(--s-akzent);outline-offset:-2px}

.konf-ergebnis{position:sticky;top:calc(88px + env(safe-area-inset-top,0px));background:var(--s-tinte);color:var(--s-grund);padding:28px}
.konf-ergebnis .st-etikett{display:block}
.e-paket{display:block;margin-top:10px;font-size:15px;color:#c9c3b8;min-height:1.5em}
.summe{font-family:var(--s-plakat);font-stretch:75%;font-weight:800;font-size:clamp(40px,4.6vw,60px);line-height:1;margin-top:18px;font-variant-numeric:tabular-nums}
.konf-ergebnis .art{color:#c9c3b8;font-size:14px;margin-top:8px}
.balken{margin-top:24px;padding-top:18px;border-top:1px solid rgba(243,239,230,.25);display:flex;flex-direction:column;gap:14px}
.balken div{font-size:13.5px;color:#c9c3b8}
.balken div b{float:right;color:var(--s-grund);font-family:var(--s-mono);font-weight:400;font-variant-numeric:tabular-nums}
.balken i{display:block;height:8px;margin-top:8px;background:rgba(243,239,230,.12);overflow:hidden}
.balken i em{display:block;height:100%;width:var(--w,0%);transition:width .6s var(--rr-feder)}
.balken .wir em{background:var(--s-akzent)}
.balken .abo em{background:#c9c3b8}
.balken .agentur em{background:#8a847a}
.ersparnis{margin-top:18px;padding:14px 16px;border-left:3px solid var(--s-akzent);background:rgba(243,239,230,.06);font-size:14.5px;color:#e6e0d5}
.ersparnis:empty{display:none}
.ersparnis b{color:#fff}
.konf-ergebnis .st-knopf{width:100%;margin-top:20px}
.konf-ergebnis .fein{margin:12px 0 0;font-size:12px;color:#a39d92}

.konf-ergebnis .e-dauer{margin-top:6px;font-family:var(--s-mono);font-size:12px;text-transform:uppercase;color:#c9c3b8}
.e-posten{margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(243,239,230,.25);list-style:none;display:grid;gap:6px;font-size:13.5px;color:#c9c3b8}
.e-posten li{display:flex;justify-content:space-between;gap:12px}
.e-posten b{font-family:var(--s-mono);font-weight:400;color:var(--s-grund);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:960px){
  .konf{grid-template-columns:minmax(0,1fr)}
  .konf-ergebnis{position:relative;top:0}
}
@media (max-width:640px){
  .bausteine{grid-template-columns:minmax(0,1fr)}
  .gruppe{padding:22px 18px}
  .regler{flex-wrap:wrap}
  .regler output{text-align:left}
}