/* ==========================================================================
   Stegplatten24 — Dach-Konfigurator
   Aufbau: große Bühne mit 3D/Plan links, Konfigurations-Panel rechts.
   Markenfarben: Akzent #2e5a44 · Grund #fffdfa. Alle Klassen mit Präfix s24k- / s24-3d.
   ========================================================================== */

:root {
  --s24-grund: #fffdfa;
  --s24-flaeche: #ffffff;
  --s24-fuell: #f6f3ed;          /* gefüllte Eingaben, Tracks */
  --s24-fuell-2: #efebe3;
  --s24-linie: #ebe6dc;
  --s24-linie-2: #d8d1c3;
  --s24-text: #0f172a;          /* SP24 --sp24-dark */
  --s24-leise: #5f6b64;
  --s24-sehr-leise: #8b948e;
  --s24-akzent: #2e5a44;
  --s24-akzent-2: #3d7358;
  --s24-akzent-dunkel: #1e3a2b;  /* SP24 --sp24-primary-hover */
  --s24-akzent-hauch: #f1f6f2;
  --s24-akzent-hell: #e1ece5;
  --s24-akzent-mittel: #a9c5b4;
  --s24-zuschnitt: #b8662a;
  --s24-zuschnitt-hell: #f9ecdf;
  --s24-warn: #86570a;
  --s24-warn-hell: #fcf3dd;
  --s24-fehler: #a3281f;
  --s24-fehler-hell: #fbeae8;
  --s24-r-gross: 28px;
  --s24-r: 18px;
  --s24-r-klein: 12px;
  --s24-schatten-1: 0 1px 2px rgba(23, 32, 27, .04), 0 2px 8px rgba(23, 32, 27, .04);
  --s24-schatten-2: 0 2px 4px rgba(23, 32, 27, .04), 0 12px 32px rgba(23, 32, 27, .08);
  --s24-schrift: "Inter", "SF Pro Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s24-kopf-h: 64px;
  --s24-weich: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Seitenhülle ---------- */
html, body.s24k-body { margin: 0; padding: 0; background: var(--s24-grund); }
body.s24k-body { font-family: var(--s24-schrift); color: var(--s24-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.s24k-body *, .s24k-body *::before, .s24k-body *::after { box-sizing: border-box; }
.s24k-seitenhuelle { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.s24k-kopf {
  height: var(--s24-kopf-h); display: flex; align-items: center; gap: 18px; padding: 0 24px;
  background: var(--s24-grund); border-bottom: 1px solid var(--s24-linie);
}
.s24k-kopf__logo img { display: block; height: 36px; width: auto; }
.s24k-kopf__titel { margin: 0; font-size: 13px; font-weight: 600; color: var(--s24-leise); letter-spacing: .04em; text-transform: uppercase; }
.s24k-kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.s24k-kopf__link {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  color: var(--s24-text); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .2s;
}
.s24k-kopf__link:hover { background: var(--s24-fuell); }
.s24k-kopf__link.ist-korb { background: var(--s24-text); color: #fff; }
.s24k-kopf__link.ist-korb:hover { background: var(--s24-akzent); }
.s24k-kopf__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s24k-buehnenrahmen { flex: 1; display: flex; flex-direction: column; }
#s24k-app { flex: 1; display: flex; flex-direction: column; }
.s24k-fuss { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; padding: 20px; font-size: 12.5px; color: var(--s24-sehr-leise); }
.s24k-fuss a { color: inherit; }

/* ---------- App-Raster ---------- */
.s24k {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 36vw, 560px);
  height: calc(100vh - var(--s24-kopf-h)); height: calc(100dvh - var(--s24-kopf-h)); min-height: 620px;
  font-family: var(--s24-schrift); color: var(--s24-text); font-size: 15px; line-height: 1.5;
}
.s24k button { font-family: inherit; color: inherit; }
.s24k-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.s24k :focus-visible { outline: 2px solid var(--s24-akzent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Bühne ---------- */
.s24k-buehne {
  position: relative; margin: 14px 0 14px 14px; border-radius: var(--s24-r-gross); overflow: hidden;
  background:
    radial-gradient(90% 70% at 25% 15%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #eef4ef 0%, #dfe9e2 55%, #d2dfd6 100%);
  display: flex; flex-direction: column; isolation: isolate;
}
.s24k-buehne__oben {
  position: absolute; z-index: 3; top: 18px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none;
}
.s24k-buehne__oben > * { pointer-events: auto; }
.s24k-umschalter {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--s24-schatten-1);
}
.s24k-umschalter button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; font-size: 13px; font-weight: 650; color: var(--s24-leise); transition: background .2s, color .2s;
}
.s24k-umschalter button.ist-aktiv { background: var(--s24-text); color: #fff; }
.s24k-werte {
  display: flex; gap: 2px; margin: 0; padding: 4px; border-radius: 16px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--s24-schatten-1);
}
.s24k-werte div { padding: 5px 14px; border-radius: 12px; }
.s24k-werte div + div { border-left: 1px solid rgba(23,32,27,.07); }
.s24k-werte dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s24-sehr-leise); }
.s24k-werte dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s24k-buehne__bild { position: relative; flex: 1; min-height: 0; }
.s24k-buehne__plan { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 86px 7% 70px; }
.s24k-buehne__unten {
  position: absolute; z-index: 3; left: 22px; bottom: 18px; display: flex; flex-direction: column; gap: 1px; pointer-events: none;
}
.s24k-buehne__titel { font-size: 18px; font-weight: 750; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.8); }
.s24k-buehne__mass { text-shadow: 0 0 8px rgba(255,255,255,.95); }
.s24k-buehne__mass { font-size: 13px; color: var(--s24-leise); font-variant-numeric: tabular-nums; }

/* 3D-Modul */
.s24-3d { position: absolute; inset: 0; }
.s24-3d__leinwand { position: absolute; inset: 0; cursor: grab; }
.s24-3d__leinwand:active { cursor: grabbing; }
.s24-3d__leinwand canvas { display: block; }
.s24-3d__mass {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: rgba(23,32,27,.78); color: #fff; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.s24-3d__werkzeug {
  position: absolute; z-index: 3; right: 18px; bottom: 18px; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--s24-schatten-1);
}
.s24-3d__werkzeug button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--s24-leise); }
.s24-3d__werkzeug button:hover { color: var(--s24-text); background: rgba(255,255,255,.8); }
.s24-3d__werkzeug button.ist-an { background: var(--s24-akzent); color: #fff; }
.s24-3d__tipp { position: absolute; z-index: 2; right: 22px; bottom: 62px; font-size: 11.5px; color: var(--s24-sehr-leise); pointer-events: none; }
.s24-3d__fehler { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--s24-leise); }

/* Plan (SVG) */
.s24k-plan { display: block; width: 100%; height: auto; max-height: 100%; }
.s24k-plan__wand { fill: #b9b2a3; }
.s24k-plan__wandtext { font-size: 9px; font-weight: 800; fill: #fff; text-anchor: middle; letter-spacing: .14em; text-transform: uppercase; }
.s24k-plan__platte { fill: rgba(255,255,255,.75); stroke: var(--s24-akzent-mittel); stroke-width: 1; }
.s24k-plan__platte.ist-zuschnitt { fill: var(--s24-zuschnitt-hell); stroke: #e0b58f; }
.s24k-plan__sparren { fill: #a48e69; opacity: .7; }
.s24k-plan__nr { font-size: 15px; font-weight: 800; fill: var(--s24-akzent); text-anchor: middle; dominant-baseline: middle; opacity: .45; }
.s24k-plan__mass { font-size: 11px; font-weight: 700; fill: var(--s24-leise); text-anchor: middle; font-variant-numeric: tabular-nums; }
.s24k-plan__mass.ist-zuschnitt { fill: var(--s24-zuschnitt); }
.s24k-plan__bemassung line { stroke: var(--s24-text); stroke-width: 1; opacity: .5; }
.s24k-plan__bemassung text { font-size: 12px; font-weight: 750; fill: var(--s24-text); text-anchor: middle; }
.s24k-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; font-size: 12px; color: var(--s24-leise); }
.s24k-legende span { display: inline-flex; align-items: center; gap: 6px; }
.s24k-legende i { width: 12px; height: 12px; border-radius: 4px; }
.s24k-legende__std { background: #fff; border: 1px solid var(--s24-akzent-mittel); }
.s24k-legende__zs { background: var(--s24-zuschnitt-hell); border: 1px solid #e0b58f; }
.s24k-legende__sp { background: #a48e69; opacity: .7; }

/* ---------- Panel ---------- */
.s24k-panel { display: flex; flex-direction: column; min-height: 0; background: var(--s24-grund); }
.s24k-panel__kopf { padding: 22px 32px 14px; }
.s24k-panel__zeile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.s24k-panel__schritt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s24-akzent); }
.s24k-rund {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--s24-linie);
  background: var(--s24-flaeche); cursor: pointer; color: var(--s24-leise); transition: color .2s, border-color .2s;
}
.s24k-rund:hover { color: var(--s24-text); border-color: var(--s24-linie-2); }
.s24k-fortschritt { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.s24k-fortschritt button { display: flex; flex-direction: column; gap: 7px; padding: 0 0 2px; border: 0; background: none; cursor: pointer; text-align: left; }
.s24k-fortschritt i { display: block; height: 4px; border-radius: 4px; background: var(--s24-fuell-2); transition: background .3s var(--s24-weich); }
.s24k-fortschritt span { font-size: 12.5px; font-weight: 650; color: var(--s24-sehr-leise); transition: color .2s; }
.s24k-fortschritt button:hover span { color: var(--s24-text); }
.s24k-fortschritt .ist-fertig i { background: var(--s24-akzent-mittel); }
.s24k-fortschritt .ist-fertig span { color: var(--s24-leise); }
.s24k-fortschritt .ist-aktiv i { background: var(--s24-akzent); }
.s24k-fortschritt .ist-aktiv span { color: var(--s24-text); }

.s24k-panel__inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 32px 28px; scrollbar-width: thin; scrollbar-color: var(--s24-linie-2) transparent; }
.s24k-schritt { animation: s24k-rein .45s var(--s24-weich); }
@keyframes s24k-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s24k-schritt { animation: none; } .s24k * { transition: none !important; } }

.s24k-schritt__kopf { margin: 6px 0 26px; }
.s24k-ueberzeile { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s24-akzent) !important; }
.s24k-schritt__kopf h2 { margin: 0 0 8px; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.12; font-weight: 750; letter-spacing: -.025em; }
.s24k-schritt__kopf p { margin: 0; color: var(--s24-leise); font-size: 15px; }

.s24k-abschnitt { margin: 0 0 28px; }
.s24k-abschnitt.ist-eingerueckt { margin-top: 16px; }
.s24k-abschnitt__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.s24k-abschnitt__titel { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--s24-text); }
.s24k-abschnitt__sub { margin: 3px 0 0; font-size: 13.5px; color: var(--s24-leise); }

.s24k-raster { display: grid; gap: 10px; }
.s24k-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s24k-raster--3 { grid-template-columns: 1fr; }
.s24k-raster--platten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 26px; }

/* Auswahlkarte */
.s24k-karte {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px 18px; text-align: left;
  background: var(--s24-flaeche); border: 1px solid var(--s24-linie); border-radius: var(--s24-r);
  cursor: pointer; font: inherit; transition: border-color .2s, box-shadow .25s var(--s24-weich), transform .25s var(--s24-weich), background .2s;
}
.s24k-karte:hover { border-color: var(--s24-linie-2); box-shadow: var(--s24-schatten-2); transform: translateY(-1px); }
.s24k-karte.ist-aktiv { border-color: var(--s24-akzent); background: var(--s24-akzent-hauch); box-shadow: inset 0 0 0 1px var(--s24-akzent); }
.s24k-karte.ist-kompakt { padding: 15px 50px 15px 18px; gap: 3px; }
.s24k-karte__bild { display: block; border-radius: var(--s24-r-klein); overflow: hidden; background: var(--s24-fuell); }
.s24k-karte__bild img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.s24k-karte__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s24k-karte__titel { font-weight: 700; font-size: 15.5px; letter-spacing: -.005em; }
.s24k-karte__sub { font-size: 13.5px; color: var(--s24-leise); }
.s24k-karte__rechts { margin-left: auto; }
.s24k-karte__haken {
  position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--s24-linie-2); color: transparent; background: var(--s24-flaeche); transition: all .2s;
}
.s24k-karte.ist-aktiv .s24k-karte__haken { background: var(--s24-akzent); border-color: var(--s24-akzent); color: #fff; transform: scale(1.05); }
/* Karten mit Bild in der Liste (Profilsysteme): Bild links */
.s24k-raster--3 .s24k-karte:has(.s24k-karte__bild) { flex-direction: row; align-items: center; gap: 16px; padding: 12px 50px 12px 12px; }
.s24k-raster--3 .s24k-karte__bild { width: 84px; height: 84px; flex-shrink: 0; }
.s24k-preis-klein { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s24k-preis-klein small { font-weight: 500; color: var(--s24-leise); margin-left: 3px; }

/* Foto-Kacheln (Bauart) */
.s24k-fotos { display: grid; grid-template-columns: 1fr; gap: 14px; }
.s24k-foto {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--s24-r-gross); overflow: hidden;
  cursor: pointer; text-align: left; background: var(--s24-fuell); aspect-ratio: 16 / 9;
  box-shadow: var(--s24-schatten-1); transition: transform .35s var(--s24-weich), box-shadow .35s var(--s24-weich);
}
.s24k-foto:hover { transform: translateY(-2px); box-shadow: var(--s24-schatten-2); }
.s24k-foto__bild { position: absolute; inset: 0; }
.s24k-foto__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--s24-weich); }
.s24k-foto:hover .s24k-foto__bild img { transform: scale(1.04); }
.s24k-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,15,0) 40%, rgba(10,20,15,.72) 100%); }
.s24k-foto__text { position: absolute; z-index: 1; left: 22px; right: 60px; bottom: 18px; display: flex; flex-direction: column; color: #fff; }
.s24k-foto__titel { font-size: 22px; font-weight: 750; letter-spacing: -.015em; }
.s24k-foto__sub { font-size: 14px; opacity: .88; }
.s24k-foto__haken {
  position: absolute; z-index: 1; right: 18px; bottom: 20px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.8); color: transparent; transition: all .25s;
}
.s24k-foto.ist-aktiv { box-shadow: 0 0 0 3px var(--s24-grund), 0 0 0 5px var(--s24-akzent), var(--s24-schatten-2); }
.s24k-foto.ist-aktiv .s24k-foto__haken { background: #fff; border-color: #fff; color: var(--s24-akzent); }

.s24k-vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.s24k-vorteile li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--s24-r); background: var(--s24-akzent-hauch); color: var(--s24-akzent); }
.s24k-vorteile li span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--s24-leise); line-height: 1.35; }
.s24k-vorteile li strong { color: var(--s24-text); font-size: 13.5px; }

/* Segment */
.s24k-segment { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; background: var(--s24-fuell); border-radius: 999px; }
.s24k-segment__opt {
  flex: 1 1 auto; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 650; color: var(--s24-leise); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap;
}
.s24k-segment__opt:hover { color: var(--s24-text); }
.s24k-segment__opt.ist-aktiv { background: var(--s24-flaeche); color: var(--s24-text); box-shadow: 0 1px 3px rgba(23,32,27,.1), 0 0 0 1px rgba(23,32,27,.03); }

/* Eingaben (gefüllter Stil) */
.s24k-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s24k-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s24k-feld__label { font-size: 13px; font-weight: 650; color: var(--s24-leise); }
.s24k-feld__eingabe {
  display: flex; align-items: center; background: var(--s24-fuell); border: 1.5px solid transparent; border-radius: 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.s24k-feld__eingabe:hover { background: var(--s24-fuell-2); }
.s24k-feld__eingabe:focus-within { background: var(--s24-flaeche); border-color: var(--s24-akzent); box-shadow: 0 0 0 4px var(--s24-akzent-hell); }
.s24k-feld__eingabe input {
  flex: 1; min-width: 0; height: 56px; padding: 0 14px; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--s24-text);
}
.s24k-feld__einheit { padding: 0 16px 0 4px; color: var(--s24-sehr-leise); font-weight: 650; font-size: 14px; }
.s24k-feld__hilfe { font-size: 12px; color: var(--s24-sehr-leise); }
.s24k-feld.ist-fehler .s24k-feld__eingabe { border-color: var(--s24-fehler); background: var(--s24-fehler-hell); }
.s24k-feld.ist-lesend .s24k-feld__wert { height: 56px; display: flex; align-items: center; font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--s24-akzent); }

.s24k-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.s24k-chips__label { width: 100%; font-size: 12.5px; color: var(--s24-sehr-leise); }
.s24k-chip {
  height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--s24-linie); background: var(--s24-flaeche);
  cursor: pointer; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; transition: all .2s;
}
.s24k-chip:hover { border-color: var(--s24-akzent); color: var(--s24-akzent); }
.s24k-chip.ist-aktiv { background: var(--s24-text); border-color: var(--s24-text); color: #fff; }

.s24k-achsen { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-items: end; margin-bottom: 14px; }
.s24k-achsen .s24k-feld__eingabe input { font-size: 18px; height: 50px; }
.s24k-achsen .s24k-feld__einheit { padding-right: 10px; }
.s24k-achsen__feld { position: relative; }
.s24k-achsen__weg {
  position: absolute; top: -3px; right: 0; width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--s24-fuell-2); color: var(--s24-leise); cursor: pointer;
}
.s24k-achsen__weg:hover { background: var(--s24-fehler-hell); color: var(--s24-fehler); }
.s24k-achsen__neu {
  height: 53px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 14px;
  border: 1.5px dashed var(--s24-linie-2); background: transparent; color: var(--s24-akzent); font-weight: 700; cursor: pointer; transition: all .2s;
}
.s24k-achsen__neu:hover { border-color: var(--s24-akzent); background: var(--s24-akzent-hauch); }

.s24k-erweitert { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--s24-r); background: var(--s24-fuell); }
.s24k-erweitert[open] summary { margin-bottom: 14px; }
.s24k-erweitert summary { cursor: pointer; font-weight: 650; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
.s24k-erweitert summary::-webkit-details-marker { display: none; }
.s24k-erweitert summary::after { content: "+"; font-size: 18px; line-height: 1; color: var(--s24-leise); }
.s24k-erweitert[open] summary::after { content: "–"; }
.s24k-erweitert .s24k-feld__eingabe { background: var(--s24-flaeche); }

/* Hinweise */
.s24k-hinweis {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin: 12px 0; border-radius: 14px;
  font-size: 13.5px; line-height: 1.45; background: var(--s24-akzent-hauch); color: var(--s24-akzent-dunkel);
}
.s24k-hinweis .s24k-icon { margin-top: 1px; }
.s24k-hinweis.ist-warn { background: var(--s24-warn-hell); color: var(--s24-warn); }
.s24k-hinweis.ist-fehler { background: var(--s24-fehler-hell); color: var(--s24-fehler); }
.s24k-textknopf {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 0; background: none; cursor: pointer;
  color: var(--s24-akzent) !important; font-weight: 650; font-size: 13.5px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.s24k-hinweis .s24k-textknopf, .s24k-menge__sub .s24k-textknopf { padding: 0; font-size: inherit; }

/* Plattenkarten */
.s24k-platte {
  display: flex; flex-direction: column; background: var(--s24-flaeche); border: 1px solid var(--s24-linie);
  border-radius: var(--s24-r); overflow: hidden; transition: border-color .2s, box-shadow .25s var(--s24-weich), transform .25s var(--s24-weich);
}
.s24k-platte:hover { box-shadow: var(--s24-schatten-2); transform: translateY(-1px); }
.s24k-platte.ist-aktiv { border-color: var(--s24-akzent); box-shadow: inset 0 0 0 1px var(--s24-akzent); }
.s24k-platte__haupt { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px; border: 0; background: none; text-align: left; cursor: pointer; }
.s24k-platte__bild { display: block; aspect-ratio: 16 / 10; background: var(--s24-fuell); margin-bottom: 10px; overflow: hidden; }
.s24k-platte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--s24-weich); }
.s24k-platte:hover .s24k-platte__bild img { transform: scale(1.04); }
.s24k-platte__name { padding: 0 14px; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.s24k-platte__marke { padding: 0 14px; font-size: 12.5px; color: var(--s24-leise); line-height: 1.35; }
.s24k-platte__preis { padding: 6px 14px 0; font-size: 12.5px; color: var(--s24-leise); }
.s24k-platte__preis strong { color: var(--s24-text); font-size: 15px; font-variant-numeric: tabular-nums; }
.s24k-farben { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; margin-top: auto; }
.s24k-farbe {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 999px;
  border: 1px solid var(--s24-linie); background: var(--s24-flaeche); cursor: pointer; font-size: 12px; font-weight: 650; transition: all .2s;
}
.s24k-farbe i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.s24k-farbe:hover { border-color: var(--s24-linie-2); }
.s24k-farbe.ist-aktiv { border-color: var(--s24-text); background: var(--s24-text); color: #fff; }

/* Mengen- und Schalterzeilen */
.s24k-menge, .s24k-schalter {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 0 0 8px;
  background: var(--s24-flaeche); border: 1px solid var(--s24-linie); border-radius: var(--s24-r); transition: background .2s, opacity .2s;
}
.s24k-schalter { cursor: pointer; position: relative; }
.s24k-menge.ist-aus, .s24k-schalter:not(.ist-an) { background: transparent; border-style: dashed; }
.s24k-menge.ist-aus .s24k-menge__titel, .s24k-schalter:not(.ist-an) .s24k-menge__titel { color: var(--s24-leise); }
.s24k-menge__bild { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: var(--s24-fuell); flex-shrink: 0; mix-blend-mode: multiply; }
.s24k-menge__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s24k-menge__titel { font-weight: 650; font-size: 14px; line-height: 1.35; }
.s24k-menge__sub { font-size: 12.5px; color: var(--s24-leise); line-height: 1.4; }
.s24k-menge__rechts { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.s24k-menge__preis { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.s24k-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--s24-fuell); }
.s24k-stepper button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--s24-flaeche); cursor: pointer; display: grid; place-items: center; color: var(--s24-text); box-shadow: 0 1px 2px rgba(23,32,27,.08); transition: background .2s; }
.s24k-stepper button:hover:not(:disabled) { background: var(--s24-akzent); color: #fff; }
.s24k-stepper button:disabled { background: transparent; box-shadow: none; color: var(--s24-linie-2); cursor: not-allowed; }
.s24k-stepper__wert { min-width: 28px; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums; }
.s24k-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s24k-schalter__bahn { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--s24-linie-2); transition: background .25s; flex-shrink: 0; }
.s24k-schalter__bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s var(--s24-weich); }
.s24k-schalter.ist-an .s24k-schalter__bahn { background: var(--s24-akzent); }
.s24k-schalter.ist-an .s24k-schalter__bahn::after { transform: translateX(18px); }
.s24k-schalter input:focus-visible + .s24k-schalter__bahn { outline: 2px solid var(--s24-akzent); outline-offset: 3px; }

/* Übersicht */
.s24k-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; }
.s24k-zuschnitt { background: var(--s24-flaeche); border: 1px solid var(--s24-linie); border-radius: var(--s24-r); padding: 6px 16px; }
.s24k-zuschnitt__zeile { display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--s24-linie); }
.s24k-zuschnitt__zeile:last-of-type { border-bottom: 0; }
.s24k-zuschnitt__nr { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s24-fuell); font-size: 11.5px; font-weight: 750; }
.s24k-zuschnitt__balken { height: 8px; background: var(--s24-fuell); border-radius: 8px; overflow: hidden; }
.s24k-zuschnitt__teil { display: block; height: 100%; background: var(--s24-akzent); border-radius: 8px; }
.s24k-zuschnitt__teil.ist-zuschnitt { background: var(--s24-zuschnitt); }
.s24k-zuschnitt__mass { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.s24k-marke { justify-self: end; font-size: 11px; font-weight: 750; padding: 3px 9px; border-radius: 999px; }
.s24k-marke.ist-standard { background: var(--s24-akzent-hell); color: var(--s24-akzent); }
.s24k-marke.ist-zuschnitt { background: var(--s24-zuschnitt-hell); color: var(--s24-zuschnitt); }
.s24k-klein { font-size: 12.5px; color: var(--s24-leise); margin: 8px 0 4px; }
.s24k-liste__gruppe { background: var(--s24-flaeche); border: 1px solid var(--s24-linie); border-radius: var(--s24-r); padding: 4px 16px 10px; margin-bottom: 10px; }
.s24k-liste h4 { margin: 12px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--s24-akzent); }
.s24k-liste table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.s24k-liste td { padding: 9px 0; border-bottom: 1px solid var(--s24-linie); vertical-align: top; line-height: 1.4; }
.s24k-liste tr:last-child td { border-bottom: 0; }
.s24k-liste__menge { white-space: nowrap; width: 68px; font-weight: 750; font-variant-numeric: tabular-nums; }
.s24k-liste__preis { white-space: nowrap; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; padding-left: 12px !important; }
.s24k-liste tr.ist-gratis .s24k-liste__preis { color: var(--s24-akzent); }
.s24k-liste__hinweis { display: flex; gap: 6px; font-size: 12px; color: var(--s24-leise); margin: 6px 0 0; }
.s24k-endsumme { padding: 20px 22px; border-radius: var(--s24-r); background: var(--s24-text); color: #fff; }
.s24k-endsumme div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 650; }
.s24k-endsumme strong { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s24k-endsumme p { margin: 6px 0 0; font-size: 12.5px; opacity: .7; }

/* Hinweise & Hilfe unter dem Schritt */
.s24k-panelhinweise { margin-top: 8px; }
.s24k-feedback { font-size: 13px; color: var(--s24-leise); margin: 12px 0; }
.s24k-feedback summary { cursor: pointer; font-weight: 650; }
.s24k-feedback ul { margin: 8px 0 0; padding-left: 18px; }
.s24k-hilfe { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--s24-r); border: 1px solid var(--s24-linie); }
.s24k-hilfe__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--s24-akzent-hauch); color: var(--s24-akzent); flex-shrink: 0; }
.s24k-hilfe div { display: flex; flex-direction: column; font-size: 13px; color: var(--s24-leise); }
.s24k-hilfe strong { color: var(--s24-text); font-size: 14px; }
.s24k-hilfe a { color: var(--s24-akzent); font-weight: 650; text-decoration: none; }
.s24k-hilfe a:hover { text-decoration: underline; }
/* KI-Berater (Plugin „Stegplatten24 KI-Chatbot“) */
.s24k-hilfe__chat { margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--s24-akzent); text-align: left; cursor: pointer; }
.s24k-hilfe__chat:hover { text-decoration: underline; }
button.s24k-kopf__link { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.s24k-kopf__link.ist-berater { background: var(--s24-akzent-hauch); color: var(--s24-akzent); }
.s24k-kopf__link.ist-berater:hover { background: var(--s24-akzent-hell); }

/* Panel-Fuß: Preis + Knöpfe */
.s24k-panel__fuss { position: relative; padding: 14px 32px 18px; border-top: 1px solid var(--s24-linie); background: var(--s24-grund); }
.s24k-panel__fusszeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.s24k-preis { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.s24k-preis__label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--s24-leise); }
.s24k-preis__pfeil { transition: transform .25s var(--s24-weich); }
.ist-offen .s24k-preis__pfeil { transform: rotate(180deg); }
.s24k-preis__wert { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.s24k-preis__info { font-size: 11.5px; color: var(--s24-sehr-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.s24k-panel__knoepfe { display: flex; gap: 8px; flex-shrink: 0; }
.s24k-preisdetails { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--s24-r); background: var(--s24-fuell); font-size: 13.5px; animation: s24k-rein .3s var(--s24-weich); }
.s24k-preisdetails div { display: flex; justify-content: space-between; padding: 3px 0; font-variant-numeric: tabular-nums; }
.s24k-preisdetails .ist-mwst { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--s24-linie-2); color: var(--s24-leise); }
.s24k-preisdetails p { margin: 6px 0 0; font-size: 12px; color: var(--s24-leise); }

.s24k-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .25s var(--s24-weich);
}
.s24k-knopf:active:not(:disabled) { transform: scale(.98); }
.s24k-knopf.ist-primaer { background: var(--s24-akzent); color: #fff; box-shadow: 0 6px 18px rgba(46, 90, 68, .28); }
.s24k-knopf.ist-primaer:hover:not(:disabled) { background: var(--s24-akzent-dunkel); box-shadow: 0 8px 24px rgba(46, 90, 68, .34); }
.s24k-knopf.ist-primaer:disabled { background: var(--s24-linie-2); box-shadow: none; cursor: not-allowed; }
.s24k-knopf.ist-rund { width: 54px; padding: 0; background: var(--s24-flaeche); border-color: var(--s24-linie); }
.s24k-knopf.ist-rund:hover { border-color: var(--s24-text); }
.s24k-knopf.ist-leise { height: 44px; padding: 0 18px; background: var(--s24-flaeche); border-color: var(--s24-linie); font-size: 14px; }
.s24k-knopf.ist-leise:hover { border-color: var(--s24-text); }

/* Dialog */
.s24k-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15, 22, 18, .5); backdrop-filter: blur(4px); }
.s24k-modal__box { width: min(480px, 100%); padding: 28px; border-radius: var(--s24-r-gross); background: var(--s24-flaeche); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.s24k-modal__box h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.01em; }
.s24k-modal__box ul { padding-left: 18px; font-size: 14px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .s24k { grid-template-columns: minmax(0, 1fr) 420px; }
  .s24k-panel__kopf, .s24k-panel__inhalt, .s24k-panel__fuss { padding-left: 24px; padding-right: 24px; }
  .s24k-fortschritt span { font-size: 11.5px; }
  .s24k-raster--platten { grid-template-columns: 1fr; }
  .s24k-vorteile { grid-template-columns: 1fr; }
  .s24k-vorteile li { flex-direction: row; align-items: center; }
}

/* ---------- Mobil ---------- */
@media (max-width: 759px) {
  :root { --s24-kopf-h: 56px; }
  .s24k-kopf { padding: 0 12px; gap: 8px; }
  .s24k-kopf__logo img { height: 28px; }
  .s24k-kopf__titel, .s24k-kopf__link span { display: none; }
  .s24k-kopf__link { width: 40px; padding: 0; justify-content: center; }
  .s24k { display: block; height: auto; min-height: 0; }
  .s24k-buehne { margin: 8px 8px 0; height: 46vh; min-height: 300px; max-height: 440px; border-radius: 24px; }
  .s24k-buehne__oben { top: 12px; left: 12px; right: 12px; }
  .s24k-werte div { padding: 4px 9px; }
  .s24k-werte dd { font-size: 13.5px; }
  .s24k-buehne__plan { padding: 64px 14px 58px; }
  .s24k-buehne__unten { left: 16px; bottom: 14px; }
  .s24k-buehne__titel { font-size: 15px; }
  .s24-3d__werkzeug { right: 10px; bottom: 12px; }
  .s24-3d__werkzeug button { padding: 0 9px; }
  .s24-3d__tipp { display: none; }
  .s24k-buehne__unten { display: none; }
  .s24k-werte div:nth-child(3) { display: none; }
  .s24k-preis__info { display: none; }
  .s24k-preis__label { font-size: 11px; white-space: nowrap; }
  .s24k-panel__fusszeile { gap: 10px; }
  .s24k-panel__knoepfe .ist-primaer { padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
  .ist-letzter .s24k-knopf.ist-rund { display: none; }
  .s24k-preis { flex: 1; }
  .s24k-panel__kopf { padding: 18px 16px 8px; position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--s24-grund) 94%, transparent); backdrop-filter: blur(10px); }
  .s24k-panel__inhalt { overflow: visible; padding: 10px 16px 150px; }
  .s24k-fortschritt span { display: none; }
  .s24k-fortschritt .ist-aktiv span { display: none; }
  .s24k-panel__fuss {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(23, 32, 27, .08);
  }
  .s24k-preis__wert { font-size: 22px; }
  .s24k-knopf { height: 50px; padding: 0 20px; }
  .s24k-knopf.ist-rund { width: 50px; }
  .s24k-raster--2, .s24k-felder { grid-template-columns: 1fr; }
  .s24k-raster--platten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s24k-platte__name { font-size: 13.5px; padding: 0 10px; }
  .s24k-platte__marke, .s24k-platte__preis { padding-left: 10px; padding-right: 10px; }
  .s24k-farben { padding: 0 8px 10px; }
  .s24k-foto { aspect-ratio: 16 / 10; }
  .s24k-foto__titel { font-size: 19px; }
  .s24k-menge { flex-wrap: wrap; }
  .s24k-menge__bild { width: 40px; height: 40px; }
  .s24k-menge__rechts { width: 100%; justify-content: space-between; }
  .s24k-schalter .s24k-menge__bild { display: none; }
  .s24k-zuschnitt__zeile { grid-template-columns: 24px 1fr auto; }
  .s24k-zuschnitt__balken { display: none; }
  .s24k-segment__opt { padding: 0 10px; font-size: 13px; }
  .s24k-fuss { padding-bottom: 110px; }
}

/* ---------- Druck ---------- */
@media print {
  .no-print, .s24k-kopf, .s24k-fuss, .s24k-buehne, .s24k-panelhinweise .s24k-hilfe { display: none !important; }
  .s24k { display: block; height: auto; }
  .s24k-panel__inhalt { overflow: visible; }
  body.s24k-body { background: #fff; }
}
.s24k-modal__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Angebot per E-Mail */
.s24k-angebot { max-height: calc(100dvh - 32px); overflow-y: auto; }
.s24k-angebot form > * + * { margin-top: 12px; }
.s24k-angebot .s24k-feld__eingabe input { width: 100%; }
.s24k-angebot__haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.s24k-angebot__haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--s24-akzent); flex-shrink: 0; }
.s24k-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.s24k-knopf.ist-angebot { background: var(--s24-akzent); color: #fff; }
.s24k-knopf.ist-angebot:hover:not(:disabled) { background: var(--s24-akzent-dunkel); }
.s24k-knopf.ist-angebot:disabled { opacity: .5; }
.s24k-modal__knoepfe a.s24k-knopf { height: 54px; text-decoration: none; color: var(--s24-text); }
.s24k-angebot a { color: var(--s24-akzent); font-weight: 600; }
.s24k-angebot a:hover { color: var(--s24-akzent-dunkel); }