@import url("./stromschalter.css");
/* Schaltbares Glas, Konfigurator (public/schaltbares-glas/konfigurator.mjs) im Werkbank-Gerüst. Aufbau nach
   docs/konfiguratoren/REGEL-aufbau.md: Leitblau #154e8a für Wege und Markierung, dezentes Blau (#eef4fb, #c5d8ee) für Hinweise ohne
   Problem, Orange nur für Probleme und den Zeiger der Führung, keine Schrift unter 13 px. */
.sgk-seite{--sgk-ink:#1c2b3a;--sgk-leise:#4b6075;--sgk-blau:#154e8a;display:block;color:var(--sgk-ink);font-size:16px}
.sgk-krumen{max-width:1180px;margin:0 auto;padding:14px 16px 0;font-size:14px}
.sgk-krumen ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
.sgk-krumen li+li::before{content:"/";margin-right:8px;color:#8d98a9}
.sgk-krumen a{color:var(--sgk-blau)}
.sgk-seitenkopf{max-width:1180px;margin:0 auto;padding:18px 16px 6px}
.sgk-seitenkopf h1{margin:0 0 6px;font-size:clamp(24px,3.4vw,34px);line-height:1.2;letter-spacing:-.02em}
.sgk-seitenkopf p{margin:0;color:var(--sgk-leise)}
.sgk-laden{max-width:1180px;margin:0 auto;padding:18px 16px 60px}

/* Vorfrage: zwei große Karten */
.sgk-vorfrage{max-width:1180px;margin:0 auto;padding:18px 16px 64px}
.sgk-vorfrage h2,.sgk-art-dialog h2{margin:0 0 6px;font-size:22px;line-height:1.3}
.sgk-vorfrage>p{margin:0 0 18px;color:var(--sgk-leise)}
.sgk-artkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.sgk-art-dialog .sgk-artkarten{padding:4px 0 8px}
.sgk-seite .sgk-artkarte{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:44px;padding:16px;border:1px solid #c9d5df;border-radius:14px;background:#fff;color:var(--sgk-ink);font:inherit;text-align:left;cursor:pointer}
.sgk-seite .sgk-artkarte:is(:hover,:focus-visible){border-color:var(--sgk-blau);background:#f0f6fb;color:var(--sgk-ink)}
.sgk-seite .sgk-artkarte[aria-pressed="true"]{border:2px solid var(--sgk-blau);padding:15px;background:#eaf2fa}
.sgk-artkarte .sgz-karte{display:block;width:100%;height:auto;max-height:170px;border-radius:10px;background:#f5f7f9}
.sgk-artkarte-zeile{display:grid;grid-template-columns:1fr 1fr;font-size:13px;color:var(--sgk-leise);text-align:center}
.sgk-artkarte strong{margin-top:6px;font-size:19px;line-height:1.3}
.sgk-artkarte>span{font-size:15px;line-height:1.45}
.sgk-artkarte>span:last-child{font-weight:700;color:var(--sgk-blau)}

/* Im Gerüst: Seitenkopf und Krümelpfad machen am Rechner Platz, darunter bleibt die Überschrift klein stehen */
.sgk.sgk-bereit .sgk-seitenkopf p{display:none}
.sgk.sgk-bereit .sgk-seitenkopf{padding:10px 16px 4px}
.sgk.sgk-bereit .sgk-seitenkopf h1{margin:0;font-size:20px}
@media (min-width:1200px) and (min-height:600px){
 .sgk-seite:has(.sgk-bereit) .sgk-krumen{display:none}
 .sgk.sgk-bereit .sgk-seitenkopf{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Rechte Spalte: Überschrift, ein Satz, Gruppen mit 26 px Abstand (der Hof der Führung hat 8 px) */
.sgk .wb .wb-schritt-kopf>span{display:none}
.sgk .wb .wb-schritt-kopf{min-height:0;margin:0;padding:0;border:0}
.sgk .wb .wb-schritt-kopf:empty{display:none}
.sgk-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.sgk-kopf h2{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.sgk-kopf h2:focus{outline:none}
.sgk .wb .sgk-kopf .wb-tipp-knopf{flex:none;min-height:32px;padding:4px 12px;border:1px solid #c5d8ee;border-radius:999px;background:#eef4fb;color:var(--sgk-blau);font-size:13px;font-weight:700}
.sgk .wb .wb-tipp{margin:0 0 14px;border-color:#c5d8ee;background:#eef4fb;color:#12365f}
.sgk .wb .wb-tipp>span{background:var(--sgk-blau);color:#fff;font-size:13px}
.sgk .wb .wb-tipp :is(strong,p){font-size:14px;color:#12365f}
.sgk-einleitung{margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--sgk-leise)}
.sgk-art{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 26px;padding:10px 12px;border:1px solid #d8e1ea;border-radius:10px;background:#f7f9fb;font-size:14px;line-height:1.4}
.sgk .wb .sgk-art button{min-height:32px;padding:4px 10px;border:0;background:none;color:var(--sgk-blau);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sgk-gruppe{margin:0 0 26px}
.sgk-gruppe>label,.sgk-gruppe>h3{display:block;margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.35}
.sgk .wb .sgk-gruppentext{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--sgk-leise)}
.sgk-eingabe{display:block;position:relative}
.sgk .wb .sgk-eingabe>input,.sgk .wb .sgk-zaehler>input{display:block;width:100%;min-height:48px;margin:0;padding:10px 12px;border:1px solid #8d98a9;border-radius:8px;background:#fff;color:var(--sgk-ink);font:inherit;font-size:17px}
.sgk .wb .sgk-eingabe.wb-feld-mit-knopf>input{padding-right:92px}
.sgk .wb .sgk-eingabe>.wb-feld-weiter{top:5px;bottom:5px;right:5px;min-height:0;height:auto;padding:0 14px;border-radius:5px;font-size:14px}
.sgk .wb .sgk-eingabe.wb-feld-mit-knopf::after{top:50%;bottom:auto;margin-top:-8px}
.sgk .wb input[aria-invalid="true"]{border-color:#d9661f;box-shadow:0 0 0 2px #fbd9c2}
.sgk .wb :is(input,button,a,summary):focus-visible{outline:3px solid #2f73c0;outline-offset:2px}
.sgk .wb .sgk-feldhinweis{margin:10px 0 2px;font-size:13px;line-height:1.4;color:var(--sgk-leise)}
.sgk-feldhinweis:empty{display:none}
.sgk-feldhinweis.ist-problem{color:#a64b0d;font-weight:700}
.sgk-zaehler{display:grid;grid-template-columns:48px minmax(0,92px) 48px;gap:8px}
.sgk .wb .sgk-zaehler>input{text-align:center}
.sgk .wb .sgk-zaehler>button{min-height:48px;padding:0;border:1px solid #9fb3c4;border-radius:8px;background:#fff;color:var(--sgk-blau);font-size:22px;font-weight:700;line-height:1}
.sgk .wb .sgk-zaehler>button:hover{border-color:var(--sgk-blau);background:#f0f6fb}
.sgk .wb .sgk-fehlt{position:relative}
.sgk .wb .sgk-fehlt::before{border-color:#f5c3a0;border-left-color:#d9661f;background:#fff3e8}

/* Karten der Wahl: ruhige Karten, gewählt mit blauem Rand und Haken (Baustein wb-karte) */
.sgk .wb .wb-karten{display:grid;gap:8px}
.sgk .wb .sgk-dicken{grid-template-columns:repeat(2,minmax(0,1fr))}
.sgk .wb .sgk-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.sgk .wb .sgk-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
.sgk .wb .sgk-eins{grid-template-columns:1fr}
.sgk .wb .sgk-karte{gap:2px;padding:10px 34px 10px 12px;color:var(--sgk-ink);font:inherit;cursor:pointer}
.sgk .wb .sgk-karte[aria-pressed="true"]{padding:9px 33px 9px 11px;color:var(--sgk-ink)}
.sgk .wb .sgk-karte strong{font-size:15px;line-height:1.35}
.sgk .wb .sgk-karte>span{font-size:14px;line-height:1.4;color:var(--sgk-leise)}
.sgk .wb .sgk-karte[disabled]{border-style:dashed;background:#f5f6f7;cursor:not-allowed}
.sgk .wb .sgk-karte[disabled] :is(strong,span){color:#5d6b7a}
.sgk-marke{align-self:flex-start;margin-top:4px;padding:2px 8px;border:1px solid #c5d8ee;border-radius:999px;background:#eef4fb;color:var(--sgk-blau);font-size:13px;font-style:normal;font-weight:700;line-height:1.4}
.sgk .wb .sgk-karte[disabled] .sgk-marke{border-color:#f5c3a0;background:#fff3e8;color:#a64b0d}

/* Übersicht */
.sgk-posten{display:grid;gap:6px;margin:0 0 18px;padding:12px 14px;border:1px solid #d8e1ea;border-radius:10px;background:#f7f9fb;font-size:14px;line-height:1.4}
.sgk-posten>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.sgk-posten :is(dt,dd){margin:0}
.sgk-posten dd{white-space:nowrap;text-align:right;font-weight:600}
.sgk-posten .ist-summe{margin-top:4px;padding-top:8px;border-top:1px solid #c9d5df;font-weight:800}
.sgk-posten .ist-summe dd{font-weight:800}
.sgk-hinweise{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sgk-hinweise li{padding:11px 14px;border:1px solid #c5d8ee;border-left:4px solid var(--sgk-blau);border-radius:10px;background:#eef4fb;color:#12365f;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.sgk-hinweise li.ist-problem{border-color:#f5c3a0;border-left-color:#d9661f;background:#fff3e8;color:#4a2c14;font-weight:700}
@media (min-width:1200px) and (min-height:600px){.sgk-posten{display:none}}

/* Unten am großen Knopf: Hinweis mit "Jetzt bearbeiten" und der Abschlusshinweis der Führung */
.sgk-unten{position:sticky;bottom:0;z-index:6;display:grid;gap:8px;margin:0}
.sgk-unten:has(>:not([hidden])){margin-top:18px}
.sgk .wb .sgk-unten .wb-fertig{position:static;margin:0}
.sgk-fehler-unten{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border:1px solid #f5c3a0;border-left:4px solid #d9661f;border-radius:10px;background:#fff3e8;color:#4a2c14;font-size:14px;font-weight:700;line-height:1.4;box-shadow:0 -6px 16px rgba(255,255,255,.9),0 6px 18px rgba(166,75,13,.16)}
.sgk-fehler-unten[hidden]{display:none}
.sgk-fehler-unten p{flex:1 1 180px;margin:0;overflow-wrap:anywhere}
.sgk .wb .sgk-fehler-knopf{flex:0 0 auto;min-height:44px;padding:8px 14px;border:1px solid #a64b0d;border-radius:8px;background:#fff;color:#a64b0d;font-size:14px;font-weight:800}
.sgk .wb .sgk-fehler-knopf:hover{background:#a64b0d;color:#fff}
.sgk-fehler-unten[data-gruppe=""] .sgk-fehler-knopf{display:none}
@media (max-width:1199px){.sgk-unten{bottom:96px}}
@media (max-width:640px){.sgk-unten{bottom:72px}}

/* Links: Werte je Schritt */
.sgk .wb :is(.wb-schritte,.wb-uebersicht-liste) button:has(.sgk-werte)>span>small{display:none}
.sgk-werte{display:grid;gap:1px;margin-top:4px}
.sgk-wert{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;font-size:13px;line-height:1.4;text-align:left}
.sgk-wert>span{color:var(--sgk-leise);overflow-wrap:anywhere;hyphens:auto}
.sgk-wert>b{font-weight:600;color:var(--sgk-ink);overflow-wrap:anywhere}
.sgk-wert.ist-offen>b{color:#a64b0d}
.sgk-werte.ist-folgt .sgk-wert:not(.ist-offen)>b{font-weight:400;color:var(--sgk-leise)}
.sgk-werte.ist-folgt .sgk-wert.ist-offen>b{color:var(--sgk-leise);font-weight:400}
.sgk-wert:is(.ist-posten,.ist-summe){grid-template-columns:minmax(0,1fr) auto}
.sgk-wert:is(.ist-posten,.ist-summe)>b{white-space:nowrap;text-align:right}
.sgk-wert.ist-summe{margin-top:3px;padding-top:3px;border-top:1px solid #c9d5df}
.sgk .sgk-wert.ist-summe>:is(span,b){font-weight:800;color:var(--sgk-ink)}
.sgk .wb .sgk-zuruecksetzen{display:block;width:100%;min-height:44px;margin-top:6px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--sgk-blau);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sgk .wb .sgk-zuruecksetzen:is(:hover,:focus-visible){background:#e2edf9;color:#103c6c}

/* Mitte: die Scheibe */
.sgk-bild{display:grid;justify-items:center;gap:8px;margin:0;padding:8px 0}
.sgk-bild .sgz{display:block;max-width:100%;height:auto}
.sgk-bild figcaption{font-size:14px;line-height:1.4;color:var(--sgk-leise);text-align:center}
.sgk-bild figcaption strong{color:var(--sgk-ink)}
.sgk-foto{display:block;max-width:100%;height:auto;border-radius:10px}
.sgz text{font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;fill:#1c2b3a}
.sgz-raum{fill:#c8d2dc;stroke:#aab7c4;stroke-width:1.5}
path.sgz-raum,.sgz-raum path{fill:none}
.sgz-glas{stroke:none}
.sgz-glas.ist-klar{fill:#cfe6f1;fill-opacity:.34}
.sgz-glas.ist-milchig{fill:#f4f7f9;fill-opacity:.97}
.sgz-grau{fill:#4d5965;fill-opacity:.22}
.sgz-glanz{fill:#fff;fill-opacity:.7}
.sgz-rand{fill:none;stroke:#6f8597;stroke-width:2}
.sgz-rand.ist-dran{stroke:#154e8a;stroke-width:3.5}
.sgz-kante{fill:#b9d3df;stroke:#6f8597;stroke-width:1}
.sgz-kante.ist-dran{fill:#154e8a;stroke:#154e8a}
.sgz-mass path{fill:none;stroke:#5d6b7a;stroke-width:1.5}
.sgz-mass.ist-dran path{stroke:#154e8a;stroke-width:2.5}
.sgz-schild rect{fill:#fff;fill-opacity:.9;stroke:#d8e1ea}
.sgz-schild.ist-dran rect{fill:#154e8a;fill-opacity:1;stroke:#154e8a}
.sgz-schild.ist-dran text{fill:#fff}
.sgz-zeiger{fill:#f2884b}
.sgz-kabel{fill:none;stroke:#5d6b7a;stroke-width:2.5;stroke-linejoin:round}
.sgz-kabel.ist-offen{stroke-dasharray:5 5}
.sgz-kabel.ist-dran{stroke:#154e8a;stroke-width:3.5}
.sgz-stecker{fill:#5d6b7a}
.sgz-stecker.ist-dran{fill:#154e8a}
.sgz-trafo{fill:#e9eef3;stroke:#5d6b7a;stroke-width:2}
.sgz-trafo.ist-offen{fill:#fff;stroke-dasharray:5 5}
.sgz-trafo.ist-dran{fill:#dce9f7;stroke:#154e8a;stroke-width:3}
.sgk .wb .wb-werkzeuge button[aria-pressed="true"]{border-color:var(--sgk-blau);background:#eaf2fa;color:var(--sgk-blau)}

/* Fenster: Anfrage, Ausführung ändern, Zurücksetzen */
.sgk .wb-dialog.sgk-anfrage{width:min(560px,calc(100vw - 24px))}
.sgk-anfrage-gruende{margin:0 0 16px;padding:12px 16px;border-radius:8px;background:#fff3e8;box-shadow:inset 4px 0 0 #d9661f;font-size:14px;line-height:1.55;color:#4a2c14}
.sgk-anfrage-gruende p{margin:0 0 6px;font-weight:800}
.sgk-anfrage-gruende ul{margin:0;padding-left:18px}
.sgk-anfrage-ablauf{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none;counter-reset:sgk-ablauf;font-size:14px;line-height:1.5}
.sgk-anfrage-ablauf li{counter-increment:sgk-ablauf;position:relative;padding-left:38px}
.sgk-anfrage-ablauf li::before{content:counter(sgk-ablauf);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#154e8a;color:#fff;font-size:13px;font-weight:800}
.sgk-anfrage-form label{display:block;margin:0 0 6px;font-size:14px;font-weight:700}
.sgk-anfrage-form :is(input,textarea){display:block;width:100%;min-height:44px;margin:0 0 12px;padding:10px;border:1px solid #8d98a9;border-radius:6px;background:#fff;color:var(--sgk-ink);font:inherit}
.sgk-anfrage-fehler{margin:0 0 10px;color:#a64b0d;font-size:14px;font-weight:700}
.sgk .sgk-anfrage-senden{display:block;min-height:52px;margin:4px 0 12px;padding:14px 18px;border:1px solid #154e8a;border-radius:10px;background:#154e8a;color:#fff;font-size:15px;font-weight:800;line-height:1.5;text-align:center;text-decoration:none}
.sgk .sgk-anfrage-senden:hover{background:#103c6c;color:#fff}
.sgk-anfrage-klein{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--sgk-leise)}
.sgk-anfrage-klein a{color:var(--sgk-blau);font-weight:700}
.sgk-anfrage-text summary{min-height:44px;padding:10px 0;font-size:14px;font-weight:700;color:var(--sgk-blau);cursor:pointer}
.sgk-anfrage-text pre{margin:0;padding:12px;border-radius:8px;background:#f5f6f7;font:14px/1.5 system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.sgk-reset p{margin:0 0 16px;font-size:15px;line-height:1.5}
.sgk-reset-knoepfe{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.sgk .wb .sgk-reset-knoepfe button{min-height:44px;padding:8px 16px;border:1px solid #154e8a;border-radius:8px;background:#fff;color:#154e8a;font-size:15px;font-weight:700}
.sgk .wb .sgk-reset-knoepfe .sgk-reset-ja{background:#154e8a;color:#fff}

/* Lesbarkeit (Regel Abschnitt 8): keine Schrift unter 13 px, auch nicht in den Teilen des Gerüsts */
.sgk .wb-fortschritt-text,.sgk .wb :is(.wb-schritte,.wb-uebersicht-liste) :is(i,small,em),.sgk .wb-mitte-kopf span,.sgk .wb-bilder span,.sgk .wb-preis-wort,.sgk .wb-preis-zusatz,.sgk .wb-hier small,.sgk .wb-shopzeile,.sgk .wb-shopzeile small,.sgk .wb .wb-karte small,.sgk .wb .wb-karte[aria-pressed="true"]::after{font-size:13px}
.sgk .wb :is(.wb-schritte,.wb-uebersicht-liste) strong,.sgk .wb .wb-alles,.sgk .wb .wb-hier-knopf,.sgk .wb .wb-werkzeuge button{font-size:14px}
.sgk .wb-shopzeile>span{font-size:15px}
/* Mitte am Rechner: die Zeichnung füllt die freie Höhe, die Seite scrollt nicht */
@media (min-width:1200px) and (min-height:600px){
 .sgk .wb .wb-zeichnung{flex:1 1 0;min-height:0;overflow:hidden}
 .sgk .wb .wb-zeichnung .sgk-bild{height:100%;align-content:center;padding:0}
}

@media(max-width:600px){
  .sgk .wb-mitte-kopf>div:first-child{flex-basis:100%}
  .sgk .wb-mitte-kopf .sg-stromschalter{flex:1 1 auto}
}
/* Unter 1200 px: Kaufleiste mit Rand, Preis und Zusatzzeile ohne Berührung. */
@media (max-width:1199px){
 .sgk .wb .wb-leiste{padding-inline:10px}
 .sgk .wb .wb-preis{row-gap:3px}
 .sgk .wb .wb-betrag{line-height:1.2}
 .sgk .wb .wb-preis-zusatz{line-height:1.25}
 .sgk .wb .wb-mitte-kopf h2{white-space:normal}
}
/* Fotos aus den Bildplätzen (config/bildstellen.json), sobald sie vorliegen */
.sgk-gruppenbild{display:block;width:100%;height:auto;max-height:180px;margin:0 0 10px;border-radius:10px;object-fit:cover}
.sgk-artkarte>img{display:block;width:100%;height:auto;border-radius:10px}
/* Preis und Zusatzzeile berühren sich in keiner Höhe; bei 320 px steht der Preis in einer eigenen Zeile über den Knöpfen */
.sgk .wb .wb-preis{row-gap:3px}
.sgk .wb .wb-betrag{line-height:1.2}
.sgk .wb .wb-preis-zusatz{line-height:1.25}
@media (max-width:360px){
 .sgk .wb .wb-preis{flex:1 1 100%}
 .sgk .wb .wb-wege{flex:1 1 100%}
 .sgk .wb .wb-wege .wb-weiter{flex:1 1 auto}
}

/* Solange Versand und Anschlusskosten offen sind: Zeile unter der Zwischensumme in dunklem Orange (Prüfung nötig) */
.sgk-posten .ist-offen :is(dt,dd),.sgk .sgk-wert.ist-offen.ist-posten>:is(span,b){color:#a64b0d;font-weight:700}
.sgk .wb .wb-preis-wort{font-weight:700}

/* Am Rechner rollt nur der Schritt, der Hinweis unten steht darunter und verdeckt kein Feld (auch bei 720 px Höhe) */
@media (min-width:1200px) and (min-height:600px){
 .sgk .wb .wb-rechts{display:flex;flex-direction:column;overflow:hidden}
 .sgk .wb .wb-schritt{flex:1 1 auto;min-height:0;margin-inline:-22px;padding-inline:22px;overflow-y:auto;overscroll-behavior:contain}
 .sgk .wb .sgk-unten{position:static;flex:none}
 .sgk .wb .sgk-unten:has(>:not([hidden])){margin-top:12px}
 .sgk .wb .sgk-fehler-unten{box-shadow:none}
 .sgk .wb .wb-zeichnung .sgk-bild{gap:6px;grid-template-rows:minmax(0,1fr) auto}
 .sgk .wb .wb-zeichnung .sgk-bild .sgz{max-height:100%;width:auto}
}
/* Niedrige Fenster: kompakter Kopf, damit die Zeichnung Platz hat. */
@media (min-width:1200px) and (min-height:600px) and (max-height:800px){
 .sgk .wb .wb-mitte-kopf{padding-block:10px 4px}
 .sgk .wb .wb-werkzeuge button{min-height:40px}
}

/* Links im letzten Schritt: Zwischensumme über die ganze Breite, Betrag darunter rechts */
.sgk-wert:is(.ist-summe,.ist-offen.ist-posten){grid-template-columns:1fr}
.sgk-wert:is(.ist-summe,.ist-offen.ist-posten)>b{text-align:right}
.sgk-wert>:is(span,b){hyphens:manual}
.sgk-wert>b,.sgk-wert.ist-posten>span{overflow-wrap:normal}

/* Unter 1200 px klebt nur der Hinweis nach "Weiter"; der Anfragegrund, der beim Tippen erscheint, verdeckt das Feld nicht */
@media (max-width:1199px){.sgk-unten:has(>.sgk-fehler-unten.ist-grund:not([hidden])){position:static}}
/* Fenster: "Schließen" bricht nicht um */
.sgk .wb-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sgk .wb .wb-dialog>header .wb-zu{flex:none;white-space:nowrap}
.sgz-stapel{fill:#dce7e9;stroke:#68818a;stroke-width:1.2}
.sgz-material{fill:#d7eef3;fill-opacity:.08}
.sgz-material.ist-milchig{fill:#fff;fill-opacity:.28}
.sgk-artkarte>.sgk-artkarte-zeile{font-size:14px}
.sgk-gruppenbild{object-fit:contain;background:#f1f5f7;max-height:106px}
.sgz-grau.sgz-fototon{fill-opacity:0}
.sgk-bild .sgf-raum{display:block;max-width:100%;height:auto;max-height:100%;border-radius:9px}
.sgf-raum text{font:600 13px system-ui,sans-serif;fill:#fff}
.sgf-legende rect{fill:#17302d;opacity:.89}
.sgk-technikbild{min-height:0;max-width:100%;height:100%;display:grid;place-items:center}
.sgk-technikbild[hidden]{display:none}
.sgk .wb-werkzeuge{flex-wrap:wrap}
/* Ein identischer Kontrastcode für den bearbeiteten Bezug in beiden Ansichten. */
.sgf-hinweis polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.sgf-halo{stroke:#172b2a;stroke-width:2.7;opacity:.65}
.sgf-strich{stroke:#f3f7f2;stroke-width:1.15}
.sgf-schild rect,.sgf-trafo{fill:#203632;stroke:#e7f0eb;stroke-width:.7}
.sgf-aktiv .sgf-halo{stroke:#27190d;stroke-width:5;opacity:.92}
.sgf-aktiv .sgf-strich{stroke:#ffad4d;stroke-width:2.7}
.sgf-aktiv .sgf-schild rect,.sgf-aktiv .sgf-trafo{fill:#74300a;stroke:#ffbd69;stroke-width:2}
.sgz .sgz-schild.ist-dran rect{fill:#74300a;stroke:#ffb65f;stroke-width:2}
.sgz .sgz-mass.ist-dran path,.sgz .sgz-kabel.ist-dran,.sgz .sgz-rand.ist-dran{stroke:#a44608;stroke-width:3.5}
.sgz .sgz-kante.ist-dran,.sgz .sgz-trafo.ist-dran{fill:#ffc17a;stroke:#964306;stroke-width:2.5}
.sgk .wb .sgk-abschluss{display:inline-flex;align-items:center;justify-self:start;grid-column:1/-1;gap:.45em;width:fit-content;max-width:100%;padding:2px 7px;border-radius:4px;background:#d8eee4;color:#154936;font:700 13px/1.35 system-ui,sans-serif}
.sgk .wb .sgk-abschluss::before{content:"✓";font-size:14px}
.sgk .wb .sgk-abschluss[hidden]{display:none}

/* Beide Tönungen im gleichen Ausschnitt, Bild und Preis bilden jeweils eine Auswahl. */
.sgk .wb .sgk-tonvergleich{align-items:stretch}
.sgk .wb .sgk-tonkarte,.sgk .wb .sgk-tonkarte[aria-pressed="true"]{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;overflow:hidden;min-width:0;padding:0 0 10px;gap:0;border:2px solid #ccd8e2;border-radius:12px;text-align:left}
.sgk .wb .sgk-tonkarte[aria-pressed="true"]{border-color:#154e8a;background:#edf4fa}
.sgk .wb .sgk-tonkarte img{display:block;width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;margin:0 0 9px}
.sgk .wb .sgk-tonkarte strong,.sgk .wb .sgk-tonkarte>span{padding:0 9px}
.sgk .wb .sgk-tonkarte>span{margin-top:auto;padding-top:3px}
.sgk .wb .sgk-tonkarte[aria-pressed="true"]::after{content:"✓";position:absolute;inset:7px 7px auto auto;display:grid;place-items:center;width:22px;height:22px;border:1px solid white;border-radius:50%;background:#154e8a;color:white;font-weight:700}
.sgk .wb .sgk-tonkarte:focus-visible{outline:3px solid #154e8a;outline-offset:2px}

.sgk-technikbild .sgz{background:#394851;border-radius:9px}
.sgk-technikbild .sgz-mass path,.sgk-technikbild .sgz-kabel{stroke:#d4e4eb}
.sgk-technikbild .sgz-mass.ist-dran path,.sgk-technikbild .sgz-kabel.ist-dran{stroke:#ffbf75}
.sgk-technikbild .sgz-schild rect{fill-opacity:1}