/* App-spezifisches CSS -- das gemeinsame Grundgerüst liegt in shared.css
   (siehe D:\OneDrive\coding\Flux-Shared), hier geladen VOR dieser Datei. */

:root {
  --header-farbe: #7a3b4a;
  --border: #d8dee3;
  --bg: #f4f6f7;
  --panel-bg: #ffffff;
  --text: #1f2933;
  --muted: #64748b;
  --viewer-bg: #14161a;
}

.xv-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .xv-layout { grid-template-columns: 1fr; }
}
.xv-layout .panel { margin-bottom: 0; min-width: 0; }

.button-like {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--header-farbe);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}
.button-like.secondary { background: #fff; color: var(--text); border-color: var(--border); }
.button-like.small { padding: 4px 10px; font-size: 0.82rem; }
.button-like:hover { filter: brightness(1.08); }

.xv-check { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; margin: 6px 0; }
.xv-check input { width: auto; }

.xv-canvas-rahmen {
  position: relative;
  height: min(70vh, 720px);
  min-height: 320px;
  background: var(--viewer-bg);
  border-radius: 6px;
  overflow: hidden;
}
.xv-canvas-rahmen canvas { width: 100%; height: 100%; display: block; }
.xv-leer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #8b95a3; font-size: 0.95rem; text-align: center; padding: 20px;
}
.xv-leer[hidden] { display: none; }

.xv-regler { display: grid; gap: 4px; margin: 10px 0 6px; }
.xv-regler label { display: grid; grid-template-columns: 150px 1fr 60px; gap: 10px; align-items: center; font-size: 0.88rem; }
.xv-regler input { width: 100%; padding: 0; }
.xv-regler output { color: var(--muted); font-size: 0.82rem; text-align: right; }
@media (max-width: 600px) {
  .xv-regler label { grid-template-columns: 110px 1fr 50px; }
}

/* Umschalter Schichten / 3D-Modell im rechten Panel */
.xv-umschalter { display: flex; gap: 6px; margin-bottom: 10px; }
.xv-umschalter button { background: #fff; color: var(--text); border: 1px solid var(--border); }
.xv-umschalter button.aktiv { background: var(--header-farbe); color: #fff; border-color: var(--header-farbe); }
.xv-tab[hidden] { display: none; }

.xv-schicht-rahmen, .xv-box-rahmen { background: #000; }
.xv-schicht-rahmen canvas, .xv-box-rahmen canvas {
  object-fit: contain;
  cursor: crosshair;
  touch-action: none;
}

/* Box-Fenster in der linken Spalte: quadratisch, so breit wie die Spalte */
.xv-box-rahmen { height: auto; min-height: 0; aspect-ratio: 1; }
.xv-regler-schmal label { grid-template-columns: 60px 1fr 64px; }
.xv-box-knoepfe { gap: 6px; margin-bottom: 4px; }

.xv-box {
  border: 1px solid #f0d27a;
  background: #fffbea;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.xv-box ol { margin: 4px 0 8px; padding-left: 20px; }
.xv-box .toolbar { margin-bottom: 4px; }
.xv-box .hint { margin: 0; }

.xv-start-hinweis { color: #9a3412; font-size: 0.85rem; margin: -6px 0 6px; }
.xv-start-hinweis:empty { display: none; }
input.xv-fehlt { border-color: #dc2626; background: #fef2f2; }

/* Werkzeuge und Strukturwahl über der Schichtansicht */
.xv-werkzeuge { gap: 6px; margin-bottom: 8px; }
.xv-label { font-size: 0.82rem; color: var(--muted); margin-left: 4px; }
.xv-werkzeuge button { background: #fff; color: var(--text); border: 1px solid var(--border); }
.xv-werkzeuge button.aktiv { background: var(--header-farbe); color: #fff; border-color: var(--header-farbe); }
.xv-struktur-wahl { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.xv-struktur { display: inline-flex; align-items: center; gap: 4px; }
.xv-anzahl { font-size: 0.75rem; opacity: 0.8; }
.xv-farbpunkt {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25); flex-shrink: 0;
}
.xv-schicht-rahmen canvas[data-werkzeug="punkte"] { cursor: cell; }

/* Strukturliste im 3D-Tab */
.xv-teile { display: grid; gap: 4px; margin: 10px 0 4px; }
.xv-teil { display: grid; grid-template-columns: 1fr 140px auto; gap: 10px; align-items: center; font-size: 0.88rem; }
.xv-teil.aus .xv-teil-name { opacity: 0.45; }
.xv-teil-name { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.xv-teil-name input { width: auto; margin: 0; }
.xv-teil input[type=range] { width: 100%; padding: 0; }
@media (max-width: 600px) {
  .xv-teil { grid-template-columns: 1fr 90px auto; }
}
.xv-check-inline { display: inline-flex; margin: 0 0 0 6px; }
.button-like.xv-aus { opacity: 0.45; pointer-events: none; }

/* Werkzeug-Teile (Punkte / Trennlinie) in der Leiste über dem Ausschnitt */
.xv-werkzeug-teil { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xv-werkzeug-teil[hidden] { display: none; }
.xv-schicht-rahmen canvas[data-werkzeug="linie"] { cursor: crosshair; }