/* SCHICHT-WERK — Darstellung der digitalen Anprobe /tools/vorschau/ (v221 Gruppe VA). Nur Hausfarben (Variablen der Seite).
   Quelle: INTERN/vorschau/quelle/anprobe.css, kopiert von INTERN/vorschau/baue-vorschau.py. */
.ap-tabs { display:flex; flex-wrap:wrap; gap:.4rem; max-width:1300px; margin:.75rem auto 0; padding:0 1rem; }
.ap-tabs [role=tab] { flex:1 1 9rem; padding:.6rem .8rem; border:1px solid var(--line); border-radius:6px; background:#0e0e0e; color:var(--fg); cursor:pointer; font:inherit; }
.ap-tabs [role=tab][aria-selected=true] { border-color:var(--acc); color:var(--acc); background:#161006; font-weight:600; }
.ap { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1rem; padding:1rem; max-width:1300px; margin:0 auto; }
@media (max-width:860px) { .ap { grid-template-columns:minmax(0,1fr); } }
.ap-buehne, .ap-panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.75rem; min-width:0; }
.ap-zeile { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; margin-bottom:.5rem; }
.ap-zeile.ap-innen { margin:0; }
.ap-zeile label { font-size:.85rem; color:var(--mut); }
.ap-zeile input[type=number] { width:6.5rem; }
.ap-panel label { display:block; font-size:.85rem; color:var(--mut); margin-top:.5rem; }
.ap-panel .ap-zeile label { display:inline-block; }
.ap-panel select, .ap-panel input[type=range], .ap-panel input[type=file] { width:100%; max-width:100%; accent-color:var(--acc); }
.ap select, .ap input[type=number] { font:inherit; padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; background:#0e0e0e; color:var(--fg); max-width:100%; }
.ap button { font:inherit; padding:.5rem .75rem; border:1px solid var(--line); border-radius:6px; background:#0e0e0e; color:var(--fg); cursor:pointer; }
.ap button.p { background:var(--acc); border-color:var(--acc); color:#0b0a08; font-weight:600; }
.ap button:focus-visible, .ap select:focus-visible, .ap input:focus-visible, .ap canvas:focus-visible, .ap a:focus-visible, .ap-tabs button:focus-visible { outline:3px solid var(--acc); outline-offset:2px; }
.ap-datei { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border:1px dashed var(--acc); border-radius:6px; color:var(--acc); cursor:pointer; font-size:.85rem; max-width:100%; }
.ap-datei input[type=file] { width:9.5rem; max-width:100%; font-size:.75rem; color:var(--mut); }
.ap-flaeche { position:relative; width:100%; aspect-ratio:3 / 2; border-radius:4px; overflow:hidden; background:#222222; }
.ap-flaeche canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#apGl { touch-action:none; cursor:crosshair; background:transparent; }   /* die Seite gibt jedem canvas eine Fläche — die 3D-Ebene muss durchsichtig bleiben */
.ap-vgl { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media (max-width:560px) { .ap-vgl { grid-template-columns:1fr; } }
.ap-vgl figure { margin:0; } .ap-vgl canvas { width:100%; height:auto; display:block; border-radius:4px; }
.ap-vgl figcaption { text-align:center; color:var(--acc); font-weight:600; }
#koCv { width:100%; height:auto; display:block; touch-action:none; border-radius:4px; background:#222222; }
.ap-hinweis { margin:.5rem 0 0; color:var(--fg); min-height:2.6em; }
.ap-ehrlich { color:var(--acc); }
.ap-pflicht { border-left:3px solid var(--acc); padding-left:.5rem; }
.ap fieldset { border:1px solid var(--line); border-radius:6px; margin:.75rem 0 0; padding:.25rem .6rem .6rem; min-width:0; }
.ap legend { color:var(--acc); font-size:.85rem; padding:0 .3rem; }
.ap-check { display:flex !important; gap:.4rem; align-items:center; }
.ap-knoepfe { margin-top:.75rem; }
.ap-info { margin-top:.75rem; border-top:1px solid var(--line); padding-top:.5rem; font-size:.9rem; overflow-wrap:anywhere; }
.ap-info h3 { margin:.25rem 0; font-size:1rem; } .ap-info p { margin:.2rem 0; }
.ap a[aria-disabled=true] { opacity:.55; }
.ap a:not([class]) { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.ap .note { font-size:.8rem; color:var(--mut); overflow-wrap:anywhere; }