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

/* Umschalter 3D / 2D über der Ansicht */
.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); }

/* 2D-Ansicht */
.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; }
.ansicht2d .m-klein { font-family: var(--font-body); }

/* Segment-Auswahl (Eckradien) */
.segment { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--bg-3); margin-top: 6px; }
.segment button { flex: 1 1 0; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 13px/1 var(--font-display); color: var(--ink-2); }
.segment button[aria-checked="true"] { background: #fff; color: var(--petrol-d); box-shadow: 0 1px 2px rgba(0, 60, 70, .18); }
.card.fest .segment { opacity: .6; pointer-events: none; }

/* Rahmen: Seiten an- und abwählen */
.seiten-plan { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; grid-template-rows: auto 70px auto; gap: 6px 10px; align-items: center; justify-items: center; margin-top: 12px; }
.seiten-plan .mitte { width: 100%; height: 100%; border-radius: 10px; background: var(--bg-3); position: relative; box-sizing: border-box; border: 8px solid var(--line-2); }
.seiten-plan .mitte::after { content: "Loch"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.seite { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.seite input { width: 17px; height: 17px; accent-color: var(--petrol); margin: 0; }

/* Muster-Auswahl */
.muster-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.muster { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 7px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; font: 600 11.5px/1.2 var(--font-display); color: var(--ink-2); text-align: center; }
.muster svg { width: 100%; max-width: 92px; height: auto; display: block; border-radius: 6px; }
.muster:hover { border-color: var(--petrol); }
.muster[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-l); color: var(--petrol-d); box-shadow: inset 0 0 0 1px var(--petrol); }

/* AR-Fenster */
.ar-knopf svg { flex: 0 0 auto; }
.ar-fenster { position: fixed; inset: 0; z-index: 60; background: rgba(20, 28, 30, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ar-karte { width: min(760px, 100%); max-height: 100%; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.ar-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-display); }
.ar-kopf span { flex: 1 1 auto; color: var(--muted); font-size: 13px; }
.ar-buehne { position: relative; height: min(70vh, 520px); background: linear-gradient(180deg, #fbfcfc 0%, #eef2f3 100%); }
.ar-buehne model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.ar-buehne .ar-start { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
.ar-tipp { padding: 10px 14px 12px; }

/* Hinweis „wird mehrteilig gedruckt“ (2026-10-13) – ploppt unten mittig auf, über der Handy-Leiste */
.teile-hinweis { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 12px);
  width: min(460px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 14px 14px 18px;
  border-radius: 14px; border: 2px solid #e3a06c; background: #fff; color: var(--wt-text, #1d2327); box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font: 400 14px/1.45 var(--wt-schrift, system-ui, sans-serif); opacity: 0; transition: opacity .2s, transform .2s; }
.teile-hinweis.an { opacity: 1; transform: translate(-50%, 0); }
.teile-hinweis b { grid-column: 1; font-weight: 700; font-size: 15px; color: #a3541c; }
.teile-hinweis span { grid-column: 1; }
.teile-hinweis button { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.teile-hinweis button:hover, .teile-hinweis button:focus-visible { background: rgba(0, 0, 0, .06); }
html.hy .teile-hinweis { bottom: calc(var(--hy-leiste-h, 64px) + 16px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .teile-hinweis { transition: none; } }