/* WECKTECH Warmluft-Ausströmer-Konfigurator – Ergänzungen zu ../kiste/css/kiste.css und ../gitter/css/gitter.css (gleiche Farben und Maße)
   v1 2026-10-24 (Testumgebung) */

.produkt-marke { width: 1.25em; height: 1.25em; vertical-align: -.22em; margin-right: .35em; }
.test-chip { display: inline-block; vertical-align: .25em; margin-left: .5em; padding: 2px 9px; border-radius: 10px; border: 1px solid var(--warn, #a8620a);
  color: var(--warn, #a8620a); background: var(--warn-bg, #fdf3e6); font: 700 11px/1.4 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }

/* Produktwahl: hier sieben Einträge (der Ausströmer steht nur auf seiner eigenen Seite) – Zeile etwas breiter */
@media (max-width: 1749px) { body nav.pwahl-zeile .produktwahl { max-width: 720px; } }

/* Schnellwahl wie beim Heizungsadapter (../adapter/css/adapter.css) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { min-width: 46px; height: 32px; padding: 0 12px; 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); }   /* Farben aus ../css/einheit.css (.chips button[aria-pressed]) wie beim Heizungsadapter */
.chip:disabled { opacity: .45; cursor: default; }

.feld-zeile { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.feld .skala span:nth-child(2) { text-align: center; }
.segment button { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segment + .feld, .chips + .feld { margin-top: 8px; }

/* Querschnitte: Anschluss = 100 %, Balken bis 200 % */
.querschnitte { display: grid; gap: 7px; margin-top: 10px; }
.qs-zeile { display: grid; grid-template-columns: 7.4em 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.qs-zeile b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.qs-balken { position: relative; height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.qs-balken i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--petrol); }
.qs-balken::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--ink-2); opacity: .45; }   /* 100 % */
.qs-zeile.knapp .qs-balken i { background: var(--warn, #a8620a); }
.qs-zeile.zu-eng .qs-balken i { background: var(--bad, #b3382c); }
.qs-zeile.zu-eng b { color: var(--bad, #b3382c); }
.qs-zeile.info { color: var(--muted); }
.qs-zeile.info .qs-balken i { background: #9aa6ad; }
.qs-fuss { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

/* Überhang-Kontrolle unter der Ansicht */
.uh-status { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.uh-status:empty { display: none; }
.uh-status .uh-ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; margin-top: 1px; }
.uh-status.gut .uh-ico { background: var(--good, #2e7d32); }
.uh-status.warn .uh-ico { background: var(--bad, #b3382c); }
.uh-status.warn { color: var(--bad, #b3382c); }
html.hy .uh-status.gut { display: none; }   /* Handy: Hinweise an der Ansicht nur, wenn etwas nicht passt (wie überall, ../css/handy.css) */

.druck-lage { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-3); color: var(--ink-2); }
.druck-lage b { color: var(--ink); }

/* Bohrbild / Ausschnitt in der Karte „Montage“ */
.bohrbild { margin-top: 12px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.bohrbild div { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; }
.bohrbild b { color: var(--ink); font-weight: 600; }
.bohrbild .bohr-warn b { color: #a3471b; }   /* Schraube käme hinten heraus (2026-10-24) */
.montage-schritte { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 3px; }   /* Einbau in 5 Schritten (Bauweise 2) */

/* So geht’s ohne Video (js/so-gehts.js LISTE fehlt: true): kein Knopf – kein Hover */
.sg-ohne-video .sg-hinweis-los { cursor: default; }
.sg-ohne-video .sg-hinweis-los:hover { background: none; }
.sg-ohne-video .sg-hinweis-txt { font-size: 13.5px; }

/* 2D: Seitenansicht neben der Vorderansicht */
.ansicht2d .m-titel { font-family: var(--font-display); font-weight: 700; }

/* Werkstatt-Karte: Raster der Werkstattwerte */
.ws-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
@media (max-width: 520px) { .ws-zweispaltig { grid-template-columns: 1fr; } }

@media (max-width: 420px) {
  .qs-zeile { grid-template-columns: 6.4em 1fr auto; font-size: 12.5px; }
  .bohrbild div { grid-template-columns: 8em 1fr; }
  .segment button { font-size: 12px; }
}
/* Handy, kleine Ansicht (Abschluss, Werkstatt): ohne Maß-Beschriftung – die Schilder deckten das Modell zu */
html.hy.hy-ans-klein .ansicht-karte:not(.wt-gross) .mass-label { display: none !important; }

/* Abgang des Stutzens als Windrose von vorn (Bauweise 2, 2026-10-24) */
.windrose { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". o ." "li m re" ". u ."; gap: 6px; max-width: 340px; margin: 4px auto 10px; align-items: center; }
.windrose button { font: 600 13px/1 var(--font-display); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2, #d5dbde); background: #fff; color: var(--ink-2, #444); cursor: pointer; white-space: nowrap; }
.windrose button[aria-checked="true"] { background: var(--petrol-d, #00666f); border-color: var(--petrol-d, #00666f); color: #fff; }
.windrose .wr-o { grid-area: o; } .windrose .wr-u { grid-area: u; } .windrose .wr-li { grid-area: li; justify-self: end; } .windrose .wr-re { grid-area: re; justify-self: start; }
.windrose .wr-mitte { grid-area: m; font-size: 12px; color: var(--ink-2, #555); border: 1px dashed var(--line-2, #c9d3d6); border-radius: 8px; padding: 10px 14px; }
.bogen-eng { color: #c0392b; font-weight: 600; }
.ue-tipp { margin: 4px 0 8px; }
.ue-tipp .chip { margin-left: 6px; }