/* WECKTECH Heizungsadapter-Konfigurator – Ergänzungen zu ../kiste/css/kiste.css (gleiche Farben und Maße) */

/* Umschalter 3D / Draufsicht über der Ansicht (wie Lüftungsgitter) */
.ansicht-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ansicht-tabs [role="tab"] { height: 30px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; font: 600 13px/1 var(--font-display); color: var(--ink-2); }
.ansicht-tabs [role="tab"]:hover { color: var(--petrol-d); }
.ansicht-tabs [role="tab"][aria-selected="true"] { background: var(--petrol); color: #fff; }
.ansicht-tabs .sp { flex: 1 1 auto; }
.rechnet { font-size: 12px; color: var(--muted); }
.ansicht2d { cursor: default; background: #fbfcfc; touch-action: auto; }
.ansicht2d svg { display: block; width: 100%; height: 100%; }
.ansicht2d .m-text { font-family: var(--font-display); font-weight: 600; }

/* Stutzen-Liste */
.stutzen-liste { display: grid; gap: 10px; margin-top: 10px; }
.stutzen-zeile { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 10px 10px 12px; background: #fff; }
.stutzen-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 14px/1.2 var(--font-display); color: var(--ink); }
.stutzen-kopf .sp { flex: 1 1 auto; }
.stutzen-kopf small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-body); color: var(--muted); }
.stutzen-weg { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink-2); font-size: 15px; line-height: 1; }
.stutzen-weg:hover:not(:disabled) { border-color: #c62828; color: #c62828; }
.stutzen-weg:disabled { opacity: .35; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-width: 46px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; cursor: pointer; font: 600 13px/1 var(--font-display); color: var(--ink-2); }
.chip:hover { border-color: var(--petrol); color: var(--petrol-d); }
.chip[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol); color: #fff; }
.eigen { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.eigen input { width: 78px; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 9px; text-align: right; background: #fff; }
.eigen-tipp { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: #8a5a00; background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 9px; padding: 7px 9px; }
.btn-plus { margin-top: 10px; }
.beispiele { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.beispiele .chip { font-weight: 500; }

/* Stutzen-Nummern in der 3D-Ansicht */
.mass-label.stutzen-label { background: var(--petrol); color: #fff; border-color: var(--petrol); }

/* ---------- Modellwahl oben (2026-10-13): Heizungsadapter | Y-Stück | Übergang ---------- */
.modellwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.modell-karte { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius, 14px); background: #fff; cursor: pointer; text-align: left; color: var(--ink); box-shadow: var(--shadow); font: inherit; }
.modell-karte img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; }
.modell-karte .mk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modell-karte b { font: 700 15px/1.25 var(--font-display); }
.modell-karte small { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.modell-karte:hover { border-color: var(--petrol); }
.modell-karte[aria-pressed="true"] { border: 2px solid var(--petrol); padding: 9px 11px; background: var(--petrol-l, #e6f3f4); }
.modell-karte[aria-pressed="true"] b { color: var(--petrol-d); }
@media (max-width: 760px) {
  .modellwahl { gap: 6px; margin-top: 8px; }
  .modell-karte { flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; text-align: center; }
  .modell-karte[aria-pressed="true"] { padding: 6px 3px; }
  .modell-karte img { width: 40px; height: 40px; }
  .modell-karte b { font-size: 13px; }
  .modell-karte small { display: none; }
}
/* Handy quer (css/handy.css: Ansicht links, Schritte rechts): Modellwahl knapp in der rechten Spalte unter den Schritt-Reitern,
   damit der offene Schritt im ersten Bildschirm beginnt */
html.hy.hy-quer .wrap > .modellwahl { grid-column: 2; grid-row: 2; gap: 6px; margin: 0 0 8px; min-width: 0; }
html.hy.hy-quer .modell-karte { flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px; text-align: center; box-shadow: none; }
html.hy.hy-quer .modell-karte[aria-pressed="true"] { padding: 3px 3px; }
html.hy.hy-quer .modell-karte img { width: 26px; height: 26px; border-radius: 6px; }
html.hy.hy-quer .modell-karte .mk-text { max-width: 100%; }
html.hy.hy-quer .modell-karte b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.hy.hy-quer .modell-karte small { display: none; }
/* Am Rechner (2026-10-14, Inhaber: „oben soll der ganze verfügbare Platz der Ansicht gehören“): die Modellwahl steht kompakt
   rechts in der Titelzeile – Symbol und Name als Pillen, die Erklärung im title. Vorher eine eigene Kartenreihe (≈ 90 px) über der
   Ansicht. Tablet und Handy wie bisher. */
@media (min-width: 980px) {
  html:not(.hy) main.wrap:has(> .modellwahl) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; }
  html:not(.hy) main.wrap:has(> .modellwahl) > * { grid-column: 1 / -1; min-width: 0; }
  html:not(.hy) main.wrap:has(> .modellwahl) > .wt-titelzeile { grid-column: 1; }
  html:not(.hy) main.wrap:has(> .modellwahl) > .stage { margin-top: 0; }
  html:not(.hy) main.wrap > .modellwahl { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0 0 12px; }
  html:not(.hy) main.wrap > .modellwahl .modell-karte { flex: 0 0 auto; gap: 8px; padding: 4px 14px 4px 5px; border-radius: 999px; box-shadow: none; }
  html:not(.hy) main.wrap > .modellwahl .modell-karte[aria-pressed="true"] { padding: 3px 13px 3px 4px; }
  html:not(.hy) main.wrap > .modellwahl .modell-karte img { width: 30px; height: 30px; border-radius: 8px; }
  html:not(.hy) main.wrap > .modellwahl .modell-karte b { font-size: 14px; white-space: nowrap; }
  html:not(.hy) main.wrap > .modellwahl .modell-karte small { display: none; }
}

/* ---------- Anschlüsse (Y-Stück, Übergang) ---------- */
.ende { display: grid; gap: 10px; margin-top: 10px; }
.ende-zeile { display: grid; gap: 6px; }
.ende-zeile > span { font: 600 12.5px/1.2 var(--font-display); color: var(--ink-2); }
.seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; }
.seg button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; font: 600 13px/1.2 var(--font-display); color: var(--ink-2); text-align: left; }
.seg button svg { flex: 0 0 auto; }
.seg button small { display: block; font: 400 11.5px/1.25 var(--font-body); color: var(--muted); }
.seg button:hover:not(:disabled) { border-color: var(--petrol); color: var(--petrol-d); }
.seg button[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol); color: #fff; }
.seg button[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.seg button:disabled { opacity: .4; cursor: default; }
.ende-satz { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--bg-3, #f4f6f7); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.ende .eigen input { width: 84px; }

/* ---------- Schnitt mit Maßen ---------- */
.ansicht-schnitt { background: #fff !important; background-image: none !important; cursor: default; }
/* 1.1 (Inhaber-Screenshot 2026-10-13: „zu stark gezoomt, unten abgeschnitten“): die Zeichnung füllt genau die Fläche der Ansicht
   (wie „Zoom auf alles“) – nie höher als die Ansicht, kein Scrollen */
.ansicht-schnitt { position: relative; overflow: hidden; }
.ansicht-schnitt svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ansicht-schnitt .schnitt-leer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; padding: 20px; text-align: center; }

/* Werkstatt: Schlauch-Tabelle */
.ws-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.ws-tabelle th { text-align: left; font-weight: 600; padding: 3px 4px; color: var(--ink-2); white-space: nowrap; }
.ws-tabelle td { padding: 2px 3px; }
.ws-tabelle input { width: 100%; min-width: 44px; height: 28px; padding: 0 4px; font-size: 12px; }
.ws-tabelle input[type="checkbox"] { width: auto; height: auto; }
.ws-tabelle-rahmen { overflow-x: auto; }

/* ---------- Abgänge des Heizungsadapters (1.3): Schlauch + Anschluss je Abgang ---------- */
.abgang-wahl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; margin-top: 6px; }
.abgang-wahl label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.abgang-wahl select { width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.abgang-zeile .ende-satz { margin: 6px 0 0; font-size: 12.5px; }
@media (max-width: 480px) { .abgang-wahl { grid-template-columns: 1fr; } }