/* =====================================================================
   jupi - voxelwerk/styles.css
   ---------------------------------------------------------------------
   Nur die Eigenheiten von Voxelwerk. Das Geraeust (Dark-Mode,
   Sprachumschalter, Abstaende) kommt aus jupi.css/colors.css.

   WELT: Voxel-Atelier / 3D-Design-Studio (3.13.6/3.13.7).
   Das Spiel setzt Voxel-Wuerfel im 3D-Raum (Mathematik: Raum & Form +
   3D-Druck). Die Kulisse (kulisse.svg, Generator .zcode/voxelwerk-kulisse.cjs)
   zeigt die Voxel-Werkstatt: Voxel-Modelle im Regal, 3D-Bauplan mit
   Koordinatenachsen, digitale Schiebelehre, Schneidematte mit losen Voxeln.
   STRIKT VOXEL: reine Wuerfel, keine Noppen / kein Lego!
   Kopfzeile als Praezisions-Konsole, Werkzeuge links im Dock, das Technische
   (Skalieren, Pruefen, Exportieren) auf dem Druckbogen.
   Der Dark Mode ist dieselbe Werkstatt am Abend.

   Grundsaetze aus AGENTS.md 3.13:
   - Drei-Zonen-Kopfzeile, keine zweite Titelzeile
   - JEDE Bedienflaeche mindestens 40 px (auch im Dunkelmodus und am Handy)
   - KEINE Infoboxen unter dem Spiel, Erklaerungen nur im Fenster
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Welt und Seite
   --------------------------------------------------------------------- */
/* Farben der Welt - dieselben Namen wie in kulisse.svg und im Generator */
/* Achtung Spezifitaet: jupi.css legt body.jupi und
   html[data-theme="dark"] body.jupi fest - die Kulisse muss beide
   uebermalen (body.jupi.vw_body bzw. html[dark] body.jupi.vw_body). */
body.jupi.vw_body {
  /* Klemmbaustein-Gruen der Bau-Platten; Papier und Bernstein als Akzent. */
  --vw-platte: #2f8f4e;
  --vw-platte-tief: #1f6a39;
  --vw-platte-nacht: #1c4a2e;
  --vw-plastik: #3aa45f;
  --vw-glas: rgba(255, 253, 247, 0.94);
  --vw-glas-rand: rgba(255, 255, 255, 0.95);
  --vw-tinte: #25332d;
  --vw-tinte-leise: rgba(37, 51, 45, 0.68);
  --vw-akzent: #2e7d32;
  --vw-akzent-2: #ef8f00;
  --vw-schatten: 0 12px 30px rgba(21, 46, 31, 0.26), 0 2px 6px rgba(21, 46, 31, 0.16);
  --vw-knopf: #f4f5ef;
  --vw-knopf-hover: #e5eee4;
  --vw-linie: rgba(37, 51, 45, 0.18);
  --vw-papier: #f7f2e4;
  --vw-papier-rand: #d8ccae;
  --vw-papier-linie: #b9c8d4;
  --vw-papier-tinte: #2a3540;

  min-height: 100vh;
  /* EINE gestreckte Szene (3.13.7 Weg A): Werkstatt am Nachmittag.
     Die zweite Ebene ist weiches Fenstlicht, die dritte eine Vignette. */
  background-image:
    radial-gradient(ellipse at 18% -8%, rgba(255, 244, 214, 0.34), transparent 52%),
    url("kulisse.svg"),
    linear-gradient(rgba(24, 40, 28, 0), rgba(24, 40, 28, 0.14));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-position: center top, center top, center bottom;
  background-attachment: fixed, fixed, fixed;
  background-color: #d9c9a8;
}

/* Dieselbe Werkstatt am Abend: warme Lampe ueber dem Tisch, die Szene
   darunter gedimmt (Papiere und die Buehne bleiben hell - sie liegen
   VOR der Kulisse). */
html[data-theme="dark"] body.jupi.vw_body {
  background-image:
    radial-gradient(ellipse at 50% 108%, rgba(255, 176, 88, 0.20), transparent 46%),
    linear-gradient(rgba(9, 20, 14, 0.66), rgba(9, 20, 14, 0.78)),
    url("kulisse.svg");
  background-color: #101d15;
}

/* Die Spiel-Kachel traegt sonst die Deckfarbe der Plattform und
   verbaute die Werkstatt hinter dem Atelier. */
.vw_body .jupi_main { background: transparent; }

.vw_header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  /* Die Konsole aus Bau-Plastik: satte Platte mit Gusskante und einer
     Noppenreihe am unteren Rand - das Material der Werkstatt (3.13.2:
     Material darf dem Spiel gehoeren, die drei Zonen bleiben). */
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, var(--vw-platte) 0%, var(--vw-platte-tief) 100%);
  border-bottom: 3px solid rgba(16, 46, 28, 0.55);
  box-shadow: 0 3px 10px rgba(21, 46, 31, 0.35);
}

/* Praezisionskante der Konsole: feiner Voxel-Raster-Akzent am unteren Rand. */
.vw_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 2px, transparent 2px, transparent 16px);
  background-size: 16px 3px;
  pointer-events: none;
}

[data-theme="dark"] .vw_header {
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, var(--vw-platte-nacht) 0%, #143824 100%);
}

[data-theme="dark"] .vw_header::after {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.18) 2px, transparent 2px, transparent 16px);
}

/* Logo und Titel in der Konsole */
.vw_marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.vw_marke_logo {
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: 9px;
  box-shadow: 0 2px 0 rgba(14, 42, 25, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.vw_marke_titel {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(14, 42, 25, 0.45);
}

.vw_kopf_rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* Das dunkle Schwellenlicht der Plattform ist 74 x 40 px - darunter
   ist das Bedienziel zu klein (Befund aus formwerkstatt). Sprachwahl
   und „← Alle Spiele" brauchen dasselbe Mindestmass (3.13.6). */
.vw_kopf_rechts .jupi_theme_switch {
  min-width: 74px;
  min-height: 40px;
}

.vw_header .jupi_sprachen_wahl select {
  min-height: 40px;
}

.vw_header .jupi_nav_opt {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;   /* auf dem Handy nicht in drei Zeilen umbrechen */
}

/* --- Kopfzeile auf dem Handy -----------------------------------------
   Drei Zonen passen in 390 px nicht nebeneinander: mit Sprachwahl
   wuerde der Name unter dem Sprachfeld verschwinden. Darum bricht die
   Leiste um (Muster Comic-Macher/Form-Werkstatt) - der Name bleibt
   oben und die Bedienziele darunter. */
@media (max-width: 820px) {
  .vw_header {
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem 0.4rem;
    gap: 0.2rem 0.3rem;
  }
  .vw_marke { order: -1; margin-right: auto; }
}

@media (max-width: 30rem) {
  .vw_marke_logo { width: 1.6rem; height: 1.6rem; }
  .vw_marke_titel { font-size: 1rem; }
  .vw_kopf_rechts { width: 100%; justify-content: space-between; }
  .vw_labelfeld select { min-width: 8.5rem; }
}

/* ---------------------------------------------------------------------
   2. Das Atelier: neutrales Modellier-Feld mit schwebendem Werkzeug
   ---------------------------------------------------------------------
   DIESES Feld bleibt ein Werkzeug (Wunsch der Lehrperson, 28.10.2026):
   KEIN Klemmbaustein-Look auf der Buehne - keine Noppen, kein Plastik-
   Gruen. Die Werkstatt-Welt lebt ausserhalb: Kulisse, Leiste, Steinkiste
   und Papier-Schublade. Die Buehne ist eine ruhige helle Arbeitsflaeche
   mit feiner Kante, die auf dem Werkstatttisch liegt. */
.vw_main {
  --vw-glas: rgba(255, 253, 247, 0.94);
  --vw-glas-rand: rgba(255, 255, 255, 0.95);
  --vw-tinte: #25332d;
  --vw-tinte-leise: rgba(37, 51, 45, 0.68);
  --vw-akzent: #2e7d32;
  --vw-akzent-2: #ef8f00;
  --vw-schatten: 0 12px 30px rgba(21, 46, 31, 0.26), 0 2px 6px rgba(21, 46, 31, 0.16);
  --vw-knopf: #f4f5ef;
  --vw-knopf-hover: #e5eee4;
  --vw-linie: rgba(37, 51, 45, 0.18);
  width: 100%;
}

[data-theme="dark"] .vw_main {
  --vw-glas: rgba(26, 36, 31, 0.96);
  --vw-glas-rand: rgba(255, 255, 255, 0.10);
  --vw-tinte: #f1f5f0;
  --vw-tinte-leise: rgba(241, 245, 240, 0.72);
  --vw-akzent: #71c878;
  --vw-akzent-2: #ffb52e;
  --vw-schatten: 0 12px 30px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.32);
  --vw-knopf: rgba(255, 255, 255, 0.09);
  --vw-knopf-hover: rgba(113, 200, 120, 0.2);
  --vw-linie: rgba(255, 255, 255, 0.16);
}

/* Der Rand der Arbeitsflaeche: ruhiges Helles Material mit feiner Kante,
   unten ein weicher Schatten (es LIEGT auf dem Tisch). */
.vw_atelier {
  position: relative;
  width: 100%;
  margin: 0.6rem 0 0.4rem;
  border-radius: 22px;
  padding: clamp(8px, 1vw, 12px);
  overflow: hidden;
  box-shadow:
    var(--vw-schatten),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #fdfbf4 0%, #f1ecdd 100%);
  border: 1px solid rgba(122, 106, 79, 0.35);
  isolation: isolate;
}

[data-theme="dark"] .vw_atelier {
  background: linear-gradient(180deg, #26302a 0%, #1c241f 100%);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow:
    var(--vw-schatten),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Die Flaeche LIEGT auf dem Tisch: weiche Schattenlinie am unteren Rand */
.vw_atelier::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: clamp(6px, 1vw, 10px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(21, 46, 31, 0.16), rgba(21, 46, 31, 0));
  pointer-events: none;
  z-index: 0;
}

/* --- die Bühne --- */
.vw_buehne {
  position: relative;
  height: clamp(440px, calc(100vh - 150px), 920px);
  overflow: hidden;
  background: #cfe6f2;          /* Rückfall; game.js malt den Himmelsverlauf */
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(37, 51, 45, 0.14), 0 1px 4px rgba(21, 46, 31, 0.12);
  touch-action: none;           /* zwei Finger drehen, Seite scrollt nicht mit */
  cursor: crosshair;
  z-index: 1;
}

[data-theme="dark"] .vw_buehne { background: #12211a; }

.vw_buehne canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* sanfte Vignette: rückt den Blick in die Mitte, das Modell leuchtet */
.vw_buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(18, 42, 31, 0.15) 100%);
}

.vw_meldung {
  position: absolute;
  left: 50%;
  bottom: 4.9rem;
  transform: translateX(-50%) translateY(6px);
  max-width: min(36rem, calc(100% - 2rem));
  margin: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
  text-align: center;
  color: var(--vw-tinte, #2b2a33);
  background: var(--vw-glas, rgba(255, 252, 245, 0.85));
  border: 1px solid var(--vw-glas-rand, rgba(255, 255, 255, 0.8));
  border-radius: 999px;
  box-shadow: var(--vw-schatten, 0 6px 18px rgba(0, 0, 0, 0.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;   /* die Meldung ist Anzeige, kein Bedienziel */
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 3;
}

.vw_atelier .vw_meldung {
  --vw-tinte: #2b2a33;
}
[data-theme="dark"] .vw_atelier .vw_meldung {
  --vw-tinte: #f1eefc;
  --vw-glas: rgba(25, 35, 30, 0.92);
}

.vw_meldung_sichtbar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- schwebende Werkzeugleisten --- */
.vw_dock,
.vw_chip {
  position: absolute;
  z-index: 4;
  color: var(--vw-tinte);
  background: var(--vw-glas);
  border: 1px solid var(--vw-glas-rand);
  border-radius: 18px;
  box-shadow: var(--vw-schatten);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.vw_chip {
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: calc(100% - 1.5rem);
  min-height: 40px;
  padding: 0.3rem 0.9rem 0.3rem 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  pointer-events: none;
}

.vw_chip_icon { font-size: 1.15rem; }

/* Die Steinkiste: das Werkzeug links liegt in einer Kunststoff-Kiste mit
   Stapelrand - wie die Kisten im Regal der Kulisse. */
.vw_dock_links {
  top: 4.1rem;
  left: 0.75rem;
  max-height: calc(100% - 4.9rem);
  overflow-y: auto;
  width: 224px;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scrollbar-width: thin;
  color: #f6f8f3;
  background: linear-gradient(180deg, #2c4636 0%, #22392b 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.14),   /* Kistenwulst oben */
    inset 0 -4px 0 rgba(0, 0, 0, 0.28),        /* Kistenboden */
    0 12px 28px rgba(23, 43, 35, 0.32);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

[data-theme="dark"] .vw_dock_links {
  color: #f4f7f2;
  background: linear-gradient(180deg, #1d3026 0%, #16261e 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

.vw_dock_unten {
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.65rem;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.76);
}

.vw_dock_rechts {
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 0.4rem;
  border-radius: 16px;
}

.vw_gruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.vw_gruppe_name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vw-tinte-leise);
  white-space: nowrap;
}

.vw_dock_links .vw_gruppe {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.2rem 0.1rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.vw_dock_links .vw_gruppe:last-child { border-bottom: 0; padding-bottom: 0.1rem; }
.vw_dock_links .vw_gruppe_werkzeug { flex-direction: row; }
.vw_dock_links .vw_gruppe_name { color: #c7dbcd; }
.vw_dock_links .vw_farbe_aktuell { color: #f4f7f2; }

/* --- Knöpfe --- */
.vw_knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.35rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: inherit;
  background: var(--vw-knopf, rgba(127, 127, 127, 0.12));
  border: 1px solid rgba(43, 61, 48, 0.2);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(33, 56, 39, 0.16), 0 3px 8px rgba(33, 56, 39, 0.08);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}

.vw_knopf:hover {
  background: var(--vw-knopf-hover, rgba(127, 127, 127, 0.22));
  transform: translateY(-1px);
}

.vw_knopf:active { transform: translateY(1px) scale(0.97); }

.vw_knopf:focus-visible {
  outline: 3px solid var(--vw-akzent, #2e7d32);
  outline-offset: 2px;
}

.vw_knopf_wirksam,
.vw_knopf[aria-pressed="true"] {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(160deg, #43a047, #246b34);
  border-color: #1e642e;
  box-shadow: 0 2px 0 #1d5429, 0 5px 12px rgba(31, 105, 51, 0.25);
}

[data-theme="dark"] .vw_knopf_wirksam,
[data-theme="dark"] .vw_knopf[aria-pressed="true"] {
  color: #102c19;
  background: linear-gradient(160deg, #a1e3a4, #65bc6b);
  border-color: #5baa60;
  box-shadow: 0 2px 0 #397d40, 0 5px 12px rgba(0, 0, 0, 0.24);
}

.vw_dock_links .vw_knopf {
  color: #f6f8f3;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 rgba(0, 0, 0, 0.18);
}

.vw_dock_links .vw_knopf:hover { background: rgba(255, 255, 255, 0.17); }
.vw_dock_links .vw_knopf[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(160deg, #43a047, #246b34);
  border-color: #79c779;
  box-shadow: 0 2px 0 #1d5429, 0 5px 12px rgba(19, 26, 20, 0.3);
}
.vw_dock_links .vw_werkzeug[data-modus="abtragen"][aria-pressed="true"] {
  background: linear-gradient(160deg, #f17867, #c83e31);
  border-color: #b9382d;
  box-shadow: 0 2px 0 #8f2a23, 0 5px 12px rgba(190, 52, 39, 0.25);
}

[data-theme="dark"] .vw_dock_links .vw_knopf[aria-pressed="true"] { color: #102c19; }
[data-theme="dark"] .vw_dock_links .vw_werkzeug[data-modus="abtragen"][aria-pressed="true"] { color: #fff; }

.vw_klein {
  min-width: 40px;
  padding: 0.35rem 0.55rem;
}

/* Große Werkzeugknöpfe: Bauen / Abtragen */
.vw_werkzeug {
  flex-direction: column;
  gap: 0.1rem;
  width: 70px;
  min-height: 72px;
  padding: 0.45rem 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 13px;
}

.vw_werkzeug_ebene { width: 52px; min-width: 52px; padding-inline: 0.1rem; }

.vw_werkzeug_icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.12rem;
  color: #f4f7ef;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  font-size: 1.35rem;
  line-height: 1;
}

.vw_werkzeug[aria-pressed="true"] .vw_werkzeug_icon { background: rgba(255, 255, 255, 0.2); }

.vw_symbol {
  min-width: 44px;
  min-height: 44px;
  padding: 0.3rem 0.6rem;
  font-size: 1.15rem;
  border-radius: 12px;
}

.vw_symbol .vw_text {
  font-size: 0.85rem;
  font-weight: 600;
}

.vw_druck_knopf {
  position: relative;
  min-height: 44px;
  padding: 0.35rem 1rem 0.35rem 0.85rem;
  font-weight: 800;
  color: #382300;
  background: linear-gradient(160deg, #ffd166, #f0a51a);
  border-color: #db9410;
  border-radius: 12px;
  box-shadow: 0 2px 0 #bd7d0b, 0 5px 12px rgba(164, 107, 14, 0.22);
}

.vw_druck_knopf:hover { background: linear-gradient(160deg, #ffdf8b, #f6b534); }
.vw_druck_knopf[aria-expanded="true"] { filter: saturate(1.2) brightness(1.05); }

.vw_badge[hidden] { display: none; }

.vw_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #b71c1c;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.vw_trenner {
  width: 1px;
  height: 26px;
  margin: 0 0.15rem;
  background: var(--vw-linie);
}

/* Schalter (Druckgröße): sieht auch im Aus-Zustand nach Schalter aus */
.vw_knopf_schalter { border-color: var(--vw-linie); }

/* --- Farbwahl: runde Farbtöpfchen --- */
.vw_palette {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 0.45rem;
  justify-content: start;
  padding: 0.2rem 0.15rem;
}

.vw_farb_knopf {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.22), inset 0 3px 5px rgba(255, 255, 255, 0.4),
    0 2px 5px rgba(0, 0, 0, 0.28);
  transition: transform 0.14s, box-shadow 0.14s;
}

/* Glanzpunkt wie bei einem Farbtopf */
.vw_farb_knopf::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 24%;
  width: 28%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-30deg);
  pointer-events: none;
}

.vw_farb_knopf:hover { transform: scale(1.08); }

.vw_farbe_neu {
  display: inline-grid;
  place-items: center;
  color: var(--vw-akzent);
  background: transparent;
  border: 2px dashed var(--vw-akzent);
  box-shadow: none;
  font-size: 1.65rem;
  font-weight: 500;
}

.vw_farbe_neu::after { display: none; }
.vw_farbe_neu:hover { background: var(--vw-knopf-hover); }

.vw_farbwaehler_input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vw_farbe_aktuell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  min-height: 28px;
  color: var(--vw-tinte);
  font: 700 0.78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.vw_farbe_muster {
  width: 22px;
  height: 22px;
  border: 2px solid var(--vw-glas-rand);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--vw-linie), inset 0 -3px 5px rgba(0, 0, 0, 0.18);
}

.vw_farb_knopf[aria-pressed="true"] {
  transform: scale(1.14);
  outline: 3px solid var(--vw-tinte);
  outline-offset: 3px;
}

.vw_farb_knopf:focus-visible {
  outline: 3px solid var(--vw-akzent);
  outline-offset: 3px;
}

/* Pinsel + Rückgängig */
.vw_pinsel_reihe {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 0.3rem;
}

.vw_pinsel_reihe .vw_klein { min-width: 0; padding: 0.35rem 0; font-weight: 700; }
.vw_rueck { font-size: 1.15rem; }

/* --- Bauhöhe --- */
.vw_ebene { gap: 0.4rem; }

.vw_ebene input[type="range"] {
  width: clamp(100px, 12vw, 190px);
  height: 40px;
  accent-color: var(--vw-akzent);
  cursor: pointer;
}

.vw_ebene_zahl {
  min-width: 4.6rem;
  padding: 0.25rem 0.55rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
  background: var(--vw-knopf);
  border-radius: 10px;
}

/* ---------------------------------------------------------------------
   3. Schublade "Drucken" - der Papier-Bogen
   ---------------------------------------------------------------------
   Das Technische (Skalieren, Drucker, Masse, Export) ist ein Bogen aus
   Papier, der ueber die Platte gelegt wird: vom Bauwerkzeug zum Druck-
   bogen. Papier bleibt in BEIDEN Themes hell (Muster: Papiere duerfen
   hell bleiben), die Tinte ist blaustichig wie ein Bauplan. */
.vw_schublade {
  position: absolute;
  z-index: 6;
  top: 4.1rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width: min(370px, calc(100% - 1.5rem));
  display: flex;
  flex-direction: column;
  color: var(--vw-papier-tinte);
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(148, 170, 186, 0.10) 26px 27px),
    linear-gradient(180deg, #fbf6e8 0%, var(--vw-papier) 30%, #efe7d2 100%);
  border: 1px solid var(--vw-papier-rand);
  border-radius: 14px 6px 6px 14px;       /* links offen wie ein abgehefteter Bogen */
  box-shadow: 0 14px 34px rgba(21, 46, 31, 0.34), inset 0 1px 0 #fffdf4;
  /* Zu: innerhalb der Bühne halten und mit einer Maske ausblenden. */
  transform: none;
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  opacity: 0;
  transition: clip-path 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, visibility 0s 0.28s;
}

.vw_offen .vw_schublade {
  transform: none;
  clip-path: inset(0);
  visibility: visible;
  opacity: 1;
  transition: clip-path 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, visibility 0s;
}

.vw_schublade_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.5rem 1rem;
  border-bottom: 2px dotted var(--vw-papier-rand);
}

.vw_schublade_inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  scrollbar-width: thin;
}

.vw_schublade_fuss {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem 0.8rem;
  border-top: 2px dotted var(--vw-papier-rand);
}

.vw_schublade_fuss .vw_knopf { flex: 1 1 0; }

.vw_abschnitt {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0 0.7rem;
  border-bottom: 1px dashed var(--vw-papier-rand);
}

.vw_abschnitt:last-child { border-bottom: 0; }

.vw_faktoren {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.vw_zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vw_freifeld,
.vw_labelfeld {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  font-size: 0.9rem;
}

.vw_labelfeld_breit {
  display: flex;
  justify-content: space-between;
}

.vw_nur_lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vw_freifeld input,
.vw_labelfeld select {
  min-height: 40px;
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: inherit;
  /* KEIN eigener heller Hintergrund: der Bogen ist schon Papier. */
  background: transparent;
  border: 1px solid var(--vw-papier-linie);
  border-radius: 10px;
}

.vw_freifeld input { width: 4.5rem; }

.vw_labelfeld select {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  cursor: pointer;
}

.vw_labelfeld select option { color: #222; background: #fff; }

.vw_labelfeld select:focus-visible,
.vw_freifeld input:focus-visible {
  outline: 3px solid var(--vw-akzent);
  outline-offset: 2px;
}

.vw_seite_titel {
  margin: 0;
  font-size: 1.1rem;
}

.vw_seite_untertitel {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(42, 53, 64, 0.66);
}

.vw_masse {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}

.vw_masse_zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--vw-papier-rand);
}

.vw_masse_zeile dt {
  font-size: 0.9rem;
  color: rgba(42, 53, 64, 0.66);
}

.vw_masse_zeile dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.vw_masse_hervor dd {
  font-size: 1.05rem;
  color: #246b34;
}

[data-theme="dark"] .vw_masse_hervor dd { color: #246b34; }

.vw_warnungen {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vw_warnung {
  display: flex;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  line-height: 1.35;
  border-left: 5px solid #EF6C00;
  border-radius: 8px;
  background: rgba(239, 108, 0, 0.13);
}

.vw_warnung_dick {
  border-left-color: #C62828;
  background: rgba(198, 40, 40, 0.15);
  font-weight: 600;
}

.vw_warnung_ok {
  border-left-color: #2E7D32;
  background: rgba(67, 160, 71, 0.16);
  font-weight: 600;
}

.vw_auftrag_stand {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   3b. Schmale Bildschirme (Handy, Tablet hochkant)
   ---------------------------------------------------------------------
   Das Werkzeug wandert als schiebbare Leiste an den unteren Rand, die
   Ablage-Knöpfe werden zu reinen Symbolen. Die Schublade deckt dann die
   ganze Bühne ab. */
@media (max-width: 720px) {
  .vw_atelier { border-radius: 16px; margin-top: 0.3rem; }

  .vw_buehne { height: clamp(430px, calc(100vh - 130px), 820px); }

  .vw_dock_rechts {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.35rem;
  }

  .vw_dock_rechts .vw_text { display: none; }
  .vw_dock_rechts > *, .vw_dock_rechts button { flex: 0 0 auto; }
  .vw_dock_rechts button { padding-inline: 0.55rem; min-width: 0; }
  .vw_dock_rechts .vw_druck_knopf { order: -1; margin-left: 0; font-size: 0.85rem; }
  .vw_dock_rechts .vw_trenner { display: none; }

  /* Export und Hilfe bleiben ohne waagrechtes Scrollen erreichbar. */
  .vw_chip { top: 7.1rem; left: 0.5rem; }

  .vw_dock_links {
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    max-height: none;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.8rem;
    padding: 0.45rem 0.6rem;
    border-radius: 20px;
  }

  .vw_dock_links .vw_gruppe { flex: 0 0 auto; flex-direction: row; align-items: center; }
  .vw_dock_links .vw_gruppe_name { display: none; }
  .vw_gruppe_farbe { min-width: max-content; }
  .vw_werkzeug { width: 56px; min-height: 56px; font-size: 0.7rem; }
  .vw_werkzeug_ebene { width: 52px; min-width: 52px; padding-inline: 0.1rem; }

.vw_werkzeug_icon { font-size: 1.3rem; }
  .vw_palette { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: 40px; grid-auto-columns: 40px; gap: 0.35rem; }
  .vw_farbe_aktuell { display: none; }
  .vw_pinsel_reihe { grid-template-columns: repeat(4, 40px); }

  .vw_dock_unten { bottom: 7rem; width: calc(100% - 1rem); max-width: 26rem; }
  .vw_ebene { width: 100%; justify-content: space-between; }
  .vw_ebene .vw_gruppe_name { display: none; }
  .vw_ebene input[type="range"] { flex: 1 1 auto; width: auto; min-width: 70px; }
  .vw_ebene_zahl { min-width: 3.8rem; }

  .vw_meldung { bottom: 11.5rem; border-radius: 16px; font-size: 0.85rem; padding: 0.4rem 0.8rem; }

  .vw_schublade { inset: 0.5rem; width: auto; }
}

@media (max-width: 720px) and (max-height: 560px) {
  /* Handy quer: wenig Höhe - die Bühne darf die Seite etwas länger machen */
  .vw_buehne { height: 480px; }
}

/* ---------------------------------------------------------------------
   4. Fenster (Hilfe, Ueber, Auftraege) - die Bauanleitung aus Papier
   ---------------------------------------------------------------------
   Anleitungsblatt: Erklaerungen stehen auf einem gefalteten
   Anleitungsblatt. Papier bleibt in beiden Themes hell und lesbar. */
.vw_dialog {
  max-width: min(46rem, 92vw);
  max-height: 86vh;
  padding: 1.2rem 1.4rem;
  color: var(--vw-papier-tinte, #2a3540);
  background:
    linear-gradient(180deg, #fbf6e8, var(--vw-papier, #f7f2e4));
  border: 2px solid var(--vw-papier-rand, #d8ccae);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(10, 25, 16, 0.4);
  overflow-y: auto;
}

[data-theme="dark"] .vw_dialog {
  color: var(--vw-papier-tinte, #2a3540);
  background:
    linear-gradient(180deg, #fbf6e8, var(--vw-papier, #f7f2e4));
  border-color: var(--vw-papier-rand, #d8ccae);
}

.vw_dialog h2 { margin-top: 0; color: #1d4f30; }

.vw_dialog_breit {
  max-width: min(60rem, 94vw);
}

.vw_dialog::backdrop {
  background: rgba(8, 20, 12, 0.55);
}

.vw_schritte,
.vw_merksatze,
.vw_auftraege_liste {
  padding-left: 1.2rem;
  line-height: 1.5;
}

.vw_schritte li,
.vw_merksatze li {
  margin-bottom: 0.45rem;
}

.vw_auftraege_liste {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 0;
  list-style: none;
}

.vw_auftrag {
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--jupi-border, rgba(0, 0, 0, 0.15));
  border-radius: 10px;
}

.vw_auftrag_erledigt {
  border-color: #2E7D32;
  background: var(--jupi-ok-bg, rgba(67, 160, 71, 0.12));
}

.vw_auftrag_titel {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.vw_auftrag_ziel {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.vw_auftrag_status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.vw_dialog_einleitung {
  margin-top: 0;
  line-height: 1.45;
}

.vw_dialog .vw_knopf {
  --vw-knopf: rgba(127, 127, 127, 0.14);
  --vw-knopf-hover: rgba(127, 127, 127, 0.24);
  --vw-akzent: #2e7d32;
}

.vw_dialog_fuss {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------
   5. Fusszeile
   ---------------------------------------------------------------------
   WICHTIG - grid-area:footer. .jupi_container ist ein Grid mit den
   Zeilen "bypass" "header" "main" "footer". Die Kopf- und die Spiel-
   zeile setzen ihren Bereich selbst. Die Fusszeile tat das nicht und
   wurde deshalb AUTOMATISCH platziert - und landete in der ersten
   freien Zeile, also OBEN auf der Seite.

   Die erste Zeile ist nämlich frei: .bypass (der "Zum Inhalt
   springen"-Link) ist position:absolute und damit kein Grid-Teil.
   Voxelwerk hat als einziges Spiel einen eigenen Fuss OHNE
   jupi_footer - und genau dem fehlte diese Zeile. */
.vw_fuss {
  grid-area: footer;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 0 1.4rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------
   6. Bewegungsreduktion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vw_knopf,
  .vw_meldung,
  .vw_farb_knopf,
  .vw_schublade {
    transition: none;
  }
}
/* Schalter in der Schublade */
.vw_schalter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.vw_schalter input { width: 1.1rem; height: 1.1rem; accent-color: #2e7d32; cursor: pointer; }

/* Exportieren: Kacheln, Hilfetext, Dateiknöpfe - Messfelder auf dem Bogen */
.vw_kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.vw_kachel {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--vw-papier-linie);
  box-shadow: inset 0 1px 0 #fffdf4;
}
.vw_kachel_breit { grid-column: 1 / -1; }
.vw_kachel_name { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(42, 53, 64, 0.66); }
.vw_kachel_wert { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: #1d4f30; }
[data-theme="dark"] .vw_kachel_wert { color: #1d4f30; }
.vw_masse_klein .vw_masse_zeile dt, .vw_masse_klein .vw_masse_zeile dd { font-size: 0.85rem; }
.vw_hilfetext { margin: 0; font-size: 0.85rem; color: rgba(42, 53, 64, 0.72); }
.vw_fuss_titel { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(42, 53, 64, 0.66); }
.vw_export_knoepfe { display: flex; gap: 0.4rem; }
.vw_export_knoepfe .vw_export { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0.45rem 0.3rem; line-height: 1.2; }
.vw_export small { font-size: 0.72rem; font-weight: 600; opacity: 0.8; }

/* Die Knöpfe AUF dem Papier brauchen Tinte statt Plastik-Hell */
.vw_schublade .vw_knopf {
  color: var(--vw-papier-tinte);
  background: #fffdf6;
  border-color: var(--vw-papier-linie);
  box-shadow: 0 2px 0 rgba(42, 53, 64, 0.16), 0 3px 8px rgba(42, 53, 64, 0.08);
}
.vw_schublade .vw_knopf:hover { background: #ffffff; }
.vw_schublade .vw_knopf[aria-pressed="true"],
.vw_schublade .vw_knopf_wirksam {
  color: #fff;
  background: linear-gradient(160deg, #43a047, #246b34);
  border-color: #1e642e;
}
[data-theme="dark"] .vw_schublade .vw_knopf[aria-pressed="true"],
[data-theme="dark"] .vw_schublade .vw_knopf_wirksam {
  color: #fff;
  background: linear-gradient(160deg, #43a047, #246b34);
}