/* Konfigurator (gemeinsames Modul) · Design A. Baut auf tokens.css + site.css von site-a auf (kachel, chip, gruppe, rechner, ausgabe,
   summe, posten, status, leer-zustand, hinweis-box, knopf, rund, mobil-leiste) und wird NACH site.css eingebunden. Werte nur aus Tokens.
   TOKEN FEHLT: Breakpoints - CSS-Variablen gehen in @media nicht; gleiche Grenzen wie site-a 4-seiten.css (60rem, 40rem). */
.konf{display:block}
.konf-sr{position:absolute;width:var(--linie);height:var(--linie);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.konf[data-zustand="fehler"] .konf-raster{grid-template-columns:minmax(0,1fr)}
.konf[data-zustand="fehler"] .konf-preis{display:none}

/* Laden */
.konf-skelett{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--abstand-7) + var(--abstand-4))),1fr));gap:var(--abstand-2)}
.konf-skelett i{height:calc(var(--abstand-6) + var(--abstand-4));border-radius:var(--radius-2);background:linear-gradient(90deg,var(--farbe-flaeche-2),var(--farbe-flaeche-3),var(--farbe-flaeche-2));background-size:200% 100%;animation:konf-schimmer var(--dauer-4) linear infinite}
@keyframes konf-schimmer{to{background-position:-200% 0}}

/* Abschnitte */
.konf-legende{display:flex;align-items:center;gap:var(--abstand-2);padding:0;font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--farbe-text-leise)}
.gruppe .konf-legende{margin-bottom:0}
.konf-nr{display:inline-grid;place-items:center;min-width:calc(var(--abstand-4) + var(--abstand-1));height:calc(var(--abstand-4) + var(--abstand-1));padding:0 var(--abstand-1);border-radius:var(--radius-voll);background:var(--verlauf-marke);color:var(--farbe-akzent-text);font-weight:700;letter-spacing:0}
.konf-lead{margin:0;font-size:var(--schrift-gr-1);color:var(--farbe-text-leise)}
.konf-zahl{margin-left:auto;font:500 var(--schrift-gr-0) var(--schrift-mono);text-transform:none;letter-spacing:0;color:var(--farbe-text-fein)}

/* Spiele und Dienst */
.konf-spiele{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--abstand-7) + var(--abstand-4))),1fr));gap:var(--abstand-2)}
.konf-spiele .kachel span{align-content:start;height:100%;padding:var(--abstand-3)}
.konf-spiele .kachel b,.konf-spiele .kachel small{min-width:0;overflow-wrap:anywhere}
.konf-zeichen{margin-bottom:var(--abstand-2);width:calc(var(--abstand-5) - var(--abstand-1));height:calc(var(--abstand-5) - var(--abstand-1));font:700 var(--schrift-gr-2) var(--schrift-titel);font-style:normal;transition:background-color var(--dauer-1),color var(--dauer-1)}
.kachel input:checked+span .konf-zeichen{background:var(--verlauf-marke);color:var(--farbe-akzent-text);border-color:transparent}
.konf-dienst .konf-spiele{grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--abstand-7) * 2 + var(--abstand-4))),1fr))}
.konf-dienst{display:grid;gap:var(--abstand-2);margin-top:var(--abstand-2);padding-top:var(--abstand-3);border-top:var(--linie) dashed var(--farbe-linie-stark)}
.konf-leer{justify-items:start}

/* Art und Faehigkeiten */
.konf-kann{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.konf-kann li{display:inline-flex;align-items:center;gap:var(--abstand-1);padding:var(--abstand-1) var(--abstand-3);border-radius:var(--radius-voll);background:var(--farbe-ok-flaeche);color:var(--farbe-ok);font-size:var(--schrift-gr-0);font-weight:600}

/* Empfehlung mit Grund */
.konf-grund{align-items:flex-start}
.konf-grund>div{display:grid;gap:var(--abstand-1);justify-items:start;min-width:0}
.konf-grund b{font:600 var(--schrift-gr-1) var(--schrift-titel)}
.konf-grund p{margin:0;color:var(--farbe-text)}
.konf-grund .hinweis{color:var(--farbe-text-leise)}
.konf-grund .knopf{margin-top:var(--abstand-2)}
.konf-grund[data-zustand="laedt"] p{color:var(--farbe-text-leise)}
.konf-grund[data-zustand="fehler"]{background:var(--farbe-fehler-flaeche)}
.konf-grund[data-zustand="fehler"] .ico{color:var(--farbe-fehler)}

.konf-suche{position:relative;display:block}
.konf-suche .ico{position:absolute;left:var(--abstand-3);top:50%;transform:translateY(-50%);color:var(--farbe-text-fein);pointer-events:none}
.konf .konf-suche input[type=search]{padding-left:calc(var(--abstand-5) + var(--abstand-1))}
.konf-liste{display:grid;align-content:start;gap:var(--abstand-1);max-height:calc(var(--abstand-7) * 3);overflow:auto;overscroll-behavior:contain;padding:var(--abstand-1);border-radius:var(--radius-2);border:var(--linie) solid var(--farbe-linie);background:var(--farbe-grund-2)}
.konf-mp{position:relative;display:block;cursor:pointer}
.konf-mp input{position:absolute;opacity:0;width:var(--linie);height:var(--linie)}
.konf-mp span{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--abstand-1) var(--abstand-3);padding:var(--abstand-2) var(--abstand-3);border-radius:var(--radius-1);border:var(--linie) solid transparent;transition:background-color var(--dauer-1),border-color var(--dauer-1)}
.konf-mp b{font:600 var(--schrift-gr-1) var(--schrift-titel)}
.konf-mp small{font:500 var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-ueber);white-space:nowrap}
.konf-mp em{grid-column:1/-1;font-style:normal;font-size:var(--schrift-gr-0);color:var(--farbe-text-leise)}
.konf-mp:hover span{background:var(--farbe-flaeche-2)}
.konf-mp input:checked+span{border-color:var(--farbe-akzent);background:var(--farbe-akzent-flaeche)}
.konf-mp input:focus-visible+span{outline:var(--linie-2) solid var(--farbe-akzent-2);outline-offset:calc(-1 * var(--linie-2))}
.konf-mp-leer{padding:var(--abstand-3) var(--abstand-4)}
.konf-mp-leer p{margin:0}

/* Ausstattung */
.konf-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-3)}
.konf-wert{display:grid;gap:var(--abstand-2);align-content:start;padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-2);background:var(--farbe-grund-2);border:var(--linie) solid var(--farbe-linie);transition:border-color var(--dauer-1)}
.konf-wert.ist-grenze{border-color:var(--farbe-fehler)}
.konf-wert-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--abstand-2);min-height:calc(var(--abstand-4) + var(--abstand-1))}
.konf-wert-kopf label{font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--farbe-text-leise)}
.konf-marke{padding:0 var(--abstand-2);border-radius:var(--radius-voll);background:var(--farbe-akzent-flaeche);color:var(--farbe-akzent);font:600 var(--schrift-gr-0)/var(--zeile-text) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit)}
.konf-marke.angepasst{background:var(--farbe-flaeche-3);color:var(--farbe-text-leise)}
.konf-stepper{display:flex;align-items:center;gap:var(--abstand-2)}
.konf .konf-stepper input[type=number]{flex:1;min-width:0;padding:var(--abstand-1) var(--abstand-2);text-align:center;font:700 var(--schrift-gr-3) var(--schrift-titel);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.konf-stepper input::-webkit-outer-spin-button,.konf-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.konf-einheit{font:600 var(--schrift-gr-1) var(--schrift-mono);color:var(--farbe-text-leise)}
.konf-schritt{flex:none;font:600 var(--schrift-gr-3)/1 var(--schrift-text)}
.konf-schritt[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.konf-regler{margin:0}
.konf-info{font:var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-text-fein)}
.konf-wirkung{margin:0;font:var(--schrift-gr-0)/var(--zeile-text) var(--schrift-mono);color:var(--farbe-akzent)}
.konf-grenze{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2);font-size:var(--schrift-gr-0);font-weight:600;color:var(--farbe-fehler)}
.konf-neu{justify-self:start}
.konf-adresse{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2);margin:0}
.konf-adresse code{padding:var(--abstand-1) var(--abstand-2);border-radius:var(--radius-1);background:var(--farbe-grund-2);border:var(--linie) solid var(--farbe-linie);font:600 var(--schrift-gr-1) var(--schrift-mono)}

/* Preis-Seite */
.konf-wahl{display:grid;gap:var(--abstand-1)}
.konf-wahl b{font:600 var(--schrift-gr-3)/var(--zeile-titel) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.konf-wahl small{font-size:var(--schrift-gr-1);color:var(--farbe-text-leise)}
.konf-wahl small:empty{display:none}
.konf[data-preis="rechnet"] .summe b,.konf[data-preis="rechnet"] .posten,.konf[data-preis="rechnet"] .konf-jahr{opacity:.45}
.konf .summe b,.konf .posten{transition:opacity var(--dauer-1)}
.konf[data-preis="folgt"] .summe b{font-size:var(--schrift-gr-4);background:var(--verlauf-marke);-webkit-background-clip:text;background-clip:text;color:transparent}
.konf-jahr{margin:calc(-1 * var(--abstand-2)) 0 0;font:500 var(--schrift-gr-1) var(--schrift-mono);color:var(--farbe-ok)}
.posten .trenner{margin-top:var(--abstand-1);padding-top:var(--abstand-2);border-top:var(--linie) dashed var(--farbe-linie);color:var(--farbe-text)}
.status.folgt{display:flex;gap:var(--abstand-2);padding:var(--abstand-3);border-radius:var(--radius-2);background:var(--farbe-akzent-flaeche);color:var(--farbe-text)}
.status.fehler .knopf{margin-left:auto;flex:none}
.konf-preis .status.fehler{flex-wrap:wrap;align-items:center}
.konf-aktion{display:grid;gap:var(--abstand-2)}
.konf-erfolg{display:grid;gap:var(--abstand-2);padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-2);background:var(--farbe-ok-flaeche);border:var(--linie) solid var(--farbe-ok)}
.konf-erfolg b{display:flex;align-items:center;gap:var(--abstand-2);font:600 var(--schrift-gr-2) var(--schrift-titel);color:var(--farbe-ok)}
.konf-erfolg p{margin:0;color:var(--farbe-text-leise)}
.konf-erfolg .reihe{gap:var(--abstand-2)}
.konf-attrappe{margin:0;padding:var(--abstand-2) var(--abstand-3);border-radius:var(--radius-1);border:var(--linie) dashed var(--farbe-warn);color:var(--farbe-warn);font-size:var(--schrift-gr-0)}
.konf-preis .hinweis{display:flex;gap:var(--abstand-2);align-items:flex-start}
.konf-mini{margin-top:var(--linie-2);width:var(--abstand-3);height:var(--abstand-3)}
.konf-fehler .ico{width:var(--abstand-5);height:var(--abstand-5)}
.konf-fehler .reihe{justify-content:center}
.konf-leiste .knopf{flex:none}

@media (max-width:40rem){
  .konf-werte{grid-template-columns:minmax(0,1fr)}
  .konf-liste{max-height:calc(var(--abstand-7) * 2 + var(--abstand-6))}
  .konf-mp span{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.konf-skelett i{animation:none}}

/* Modus "nur" (Dienst-Seite): keine Abschnittsnummern; Adresse steht schon auf der Seite */
.konf[data-nur] .konf-nr{display:none}