/* ============================================================
   Animations-Werkstatt - styles.css
   ------------------------------------------------------------
   GUI 3.13, Typ 3 - Werkzeug. Eigenes PWA-Paket (3.10/6.1):
   KEINE colors.css/jupi.css. Der Theme-Schalter und der
   Sprachumschalter stehen darum woertlich hier.

   DIE WELT: Trickfilm-Studio (Regel 3.13.6b)
   Die Taetigkeit ist Zeichentrick: Bild fuer Bild auf einem
   LEUCHTTISCH zeichnen, die Nachbarbilder als Zwiebel-Haut
   durchscheinen sehen und die Bilder als Film abspielen.
   Deshalb:
     - Kulisse (3.13.7 Weg A): EINE Szene, 1600 x 1000,
       cover/no-repeat/fixed - Studio-Wand mit Regal,
       Stecktafel und Trickkamera. Nacht = eigene Szene.
     - Leiste: dunkle Studio-Konsole aus Petrol und Messing.
     - Buehne: der Leuchttisch mit Blatt, Peg-Leiste und Glut.
     - HUD/Timeline: Filmstreifen mit Loechern und Bildern.
     - Karten/Fenster: Belichtungsblatt (Papier) mit Messingkante.
   Die Leinwand bleibt IMMER weiss - sie ist das Arbeitsblatt.

   Keine CSS-Variablen: das Paket laedt keine colors.css, und der
   Node-Test verbietet eigene Variablen bewusst (eine Quelle, kein Zweitstand).
   ============================================================ */

* { box-sizing: border-box; }
/* aus jupi.css uebernommen: kein waagerechter Seiten-Scroll */
html { overflow-x: hidden; }
[hidden] { display: none !important; }
/* Achtung: eigene display-Regeln schlagen [hidden] sonst nicht (Barriere-Falle) */
.aw_versteckt { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; }

body.aw {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #23302c;
  /* Kulisse: EINE gestreckte Studio-Szene, nie gekachelt (3.13.7 Weg A) */
  background: #223431 url("kulisse.svg") center top / cover no-repeat fixed;
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme="dark"] body.aw {
  background: #0d1716 url("kulisse-nacht.svg") center top / cover no-repeat fixed;
  color: #ece2cb;
}
body.aw button { font-family: inherit; }

/* ---------- Fokus-Ringe: Messing, in beiden Themes sichtbar ---------- */
body.aw :focus-visible {
  outline: 3px solid #e0b25f;
  outline-offset: 2px;
}

/* ---------- App-Leiste: Drei-Zonen-Kopfzeile (GUI 3.13.2) ----------
   Links "Alle Spiele", mittig Paket-Logo + Name, rechts Sprachwahl +
   Dark-Mode-Pill 74x40. Kein Schullogo, kein jupi-Wortlogo. */
.aw_kopf {
  flex: 0 0 auto;
  position: relative;
  display: grid;               /* 3 Zonen: links | Mitte | rechts */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .25rem .5rem;
  padding: .3rem .65rem .45rem;
  background: linear-gradient(112deg, #102725 0%, #1b3b37 55%, #27524a 100%);
  color: #f7ecd4;
  border-bottom: 3px solid #a9792d;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .aw_kopf {
  background: linear-gradient(112deg, #071110 0%, #10211f 55%, #1a302b 100%);
  border-bottom-color: #8a6224;
}
/* Messingkante mit feinen Sprocket-Loechern (Filmstreifen-Anklang) */
.aw_kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background-image: repeating-linear-gradient(90deg,
    rgba(247, 236, 212, .55) 0 7px, transparent 7px 19px);
  opacity: .35; pointer-events: none;
}
a.aw_zurueck {
  justify-self: start;
  display: inline-flex; align-items: center;
  background: #f6ecd4; color: #1b2b28;
  border: 1px solid #c79a45; border-radius: 999px;
  padding: .45rem .8rem; min-height: 40px;
  text-decoration: none; font-size: .84rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
a.aw_zurueck:hover { background: #fff8e7; }
html[data-theme="dark"] a.aw_zurueck { background: #efe3c6; color: #17251f; border-color: #b7862f; }
html[data-theme="dark"] a.aw_zurueck:hover { background: #fff6e2; }

.aw_marke {
  justify-self: center;
  display: inline-flex; align-items: center; gap: .45rem; min-width: 0;
  padding: .15rem .65rem .15rem .25rem;
  background: rgba(7, 17, 16, .35);
  border: 1px solid rgba(226, 179, 92, .35);
  border-radius: 999px;
}
.aw_marke_logo {
  height: 1.9rem; width: 1.9rem; display: block;
  border-radius: .45rem; box-shadow: 0 0 0 1px #c79a45;
}
.aw_titel {
  font-size: 1.04rem; font-weight: 800; margin: 0; line-height: 1.1;
  letter-spacing: .005em; color: #f7ecd4; white-space: nowrap;
}
.aw_kopf_ende {
  justify-self: end;
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
}
/* Dark-Mode-Pill 74x40 (GUI 3.13.2) */
.aw_kopf_ende .jupi_theme_switch { width: 74px; height: 40px; min-width: 74px; padding: 0; }

/* ---------- Theme-Schalter (aus jupi.css, fuer die 74x40-Pille angepasst) ---------- */
.jupi_theme_switch {
  position: relative; flex-shrink: 0;
  width: 3.5rem; height: 1.9rem;
  background: rgba(247, 236, 212, .14);
  border: 1px solid rgba(226, 179, 92, .65);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.jupi_theme_switch:hover { background: rgba(247, 236, 212, .24); }
.jupi_theme_switch .jts_icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: .82rem; line-height: 1;
  transition: opacity .2s;
}
.jupi_theme_switch .jts_sun { left: .55rem; }
.jupi_theme_switch .jts_moon { right: .55rem; }
html[data-theme="light"] .jupi_theme_switch .jts_sun { opacity: 0; }
html[data-theme="dark"] .jupi_theme_switch .jts_moon { opacity: 0; }
/* Der Daumen ist ein KREIS: Breite UND Hoehe. Die Basisregeln setzen nur die
   Breite, die Hoehe kaeme aus top/bottom - in der 40-px-Pille waere das ein Ei. */
.jupi_theme_switch .jts_thumb {
  position: absolute; z-index: 2; pointer-events: none;
  top: 50%; left: .35rem;
  width: 1.5rem; height: 1.5rem;
  transform: translateY(-50%);
  background: #f7ecd4; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transition: left .2s ease;
}
html[data-theme="dark"] .jupi_theme_switch .jts_thumb {
  left: calc(100% - 1.5rem - .35rem);
}
html[data-theme="dark"] .jupi_theme_switch {
  background: rgba(0, 0, 0, .38);
  border-color: rgba(226, 179, 92, .5);
}

/* ---------- Sprachumschalter (aus jupi.css, auf die dunkle Leiste umgefaerbt) ---------- */
.jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.jupi_sprachen_icon { font-size: 1rem; line-height: 1; }
.jupi_sprachen_select {
  font: inherit; font-size: .84rem; color: #f7ecd4; cursor: pointer;
  background: rgba(247, 236, 212, .10); border: 1px solid rgba(226, 179, 92, .55);
  border-radius: 999px; padding: .32rem .6rem; max-width: 12rem; min-height: 40px;
}
.jupi_sprachen_select:hover { background: rgba(247, 236, 212, .2); }
.jupi_sprachen_select:focus-visible { outline: 2px solid #f2c777; outline-offset: 2px; }
.jupi_sprachen_select option { color: #212121; background: #fff; }

/* ---------- Aktionsleiste (Typ 3, 3.13.3) ----------
   Studio-Konsole unter der Leiste. Alle Knoepfe sind Papier-Tasten. */
.aw_aktionsleiste {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  padding: .32rem .6rem;
  background: linear-gradient(180deg, #203430 0%, #172825 100%);
  border-bottom: 2px solid #8a6224;
}
html[data-theme="dark"] .aw_aktionsleiste {
  background: linear-gradient(180deg, #132421 0%, #0d1a18 100%);
}
.aw_sterne {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(10, 22, 20, .55); color: #f2d79a;
  border: 1px solid rgba(226, 179, 92, .55); border-radius: 999px;
  padding: .2rem .65rem; white-space: nowrap;
}
.aw_flex { flex: 1 1 auto; }

/* ---------- Knoepfe: Papier auf dunklem Studio-Material ---------- */
.aw_knopf {
  border: 1px solid #c9b17f; border-radius: 8px;
  padding: .38rem .62rem; font-size: .82rem; font-weight: 600;
  background: #efe3c6; color: #23302c; cursor: pointer; white-space: nowrap;
  min-height: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 5px rgba(0, 0, 0, .28);
}
.aw_knopf:hover { background: #fff4dc; border-color: #e0b25f; }
.aw_knopf:active { transform: translateY(1px); }
.aw_knopf[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.aw_knopf_licht { background: #efe3c6; color: #23302c; }
html[data-theme="dark"] .aw_knopf,
html[data-theme="dark"] .aw_knopf_licht { background: #efe3c6; color: #1f2c28; border-color: #b7862f; }
html[data-theme="dark"] .aw_knopf:hover,
html[data-theme="dark"] .aw_knopf_licht:hover { background: #fff4dc; }
.aw_knopf_grau { background: #dbccab; color: #3a3426; border-color: #b9a274; }
.aw_knopf_rot { background: #f3d3c8; color: #8e2f1c; border-color: #c98674; }
.aw_knopf_rot:hover { background: #ffe2d8; border-color: #b95c43; }
.aw_aktionsleiste .aw_knopf { min-height: 40px; }
.aw_aktionsleiste .aw_trenner { height: 26px; }
.aw_trenner {
  flex: 0 0 auto; width: 2px; height: 30px; margin: 0 .25rem;
  background: rgba(226, 179, 92, .45); border-radius: 2px;
}

/* ---------- Werkzeug-Optionen (Typ 3: Optionen oben) ----------
   Ein Papierstreifen (Belichtungsblatt) zwischen Konsole und Werkstatt. */
.aw_optionen {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: .28rem .6rem;
  background:
    repeating-linear-gradient(0deg, rgba(122, 101, 61, .045) 0 1px, transparent 1px 26px),
    #e9dcc0;
  color: #3c3a2e;
  border-bottom: 1px solid #b9a274;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .aw_optionen {
  background:
    repeating-linear-gradient(0deg, rgba(247, 236, 212, .03) 0 1px, transparent 1px 26px),
    #1a2a27;
  color: #ece2cb;
  border-bottom-color: #384a45;
}
.aw_opt_block { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.aw_opt_schalter { gap: .25rem; }
.aw_feld {
  flex: 0 0 auto; font-size: .78rem; font-weight: 600;
  color: #6b5939; display: inline-flex; align-items: center; gap: .25rem;
  white-space: nowrap;
}
html[data-theme="dark"] .aw_feld { color: #ccbfa4; }
.aw_wert {
  font-size: .75rem; min-width: 2.7rem;
  color: #5a4a2e; font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .aw_wert { color: #e7d5ac; }
.aw_farbe {
  width: 44px; height: 34px; padding: 2px; cursor: pointer;
  border: 2px solid #a9792d; border-radius: 6px; background: #fdf6e4;
}
html[data-theme="dark"] .aw_farbe { background: #22332f; border-color: #b7862f; }
.aw_muster { display: flex; gap: 3px; flex: 0 0 auto; }
.aw_muster_knopf {
  width: 28px; height: 28px; border-radius: 5px; cursor: pointer; padding: 0;
  border: 2px solid rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.aw_muster_knopf:hover { transform: scale(1.12); border-color: #5a4a2e; }
.aw_regler { width: 88px; accent-color: #b7862f; flex: 0 0 auto; }
.aw_regler_klein { width: 64px; }
.aw_druck_min_zeile { display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto; }
.aw_druck_min_zeile.aw_versteckt { display: none !important; }

/* ---------- Werkzeuge: vertikale Palette LINKS (Typ 3) ---------- */
.aw_arbeitsbereich {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; gap: .55rem; padding: .5rem .6rem .15rem;
}
.aw_werkzeuge {
  flex: 0 0 62px; width: 62px; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: .38rem;
  padding: .45rem .3rem;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, #1b2d2a 0%, #12201e 100%);
  border: 1px solid rgba(226, 179, 92, .45);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  scrollbar-width: thin; scrollbar-color: #8a6a32 transparent;
}
html[data-theme="dark"] .aw_werkzeuge {
  background: linear-gradient(180deg, #142421 0%, #0b1615 100%);
  border-color: rgba(226, 179, 92, .32);
}
.aw_werkzeug {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid #c9b17f; background: #f3e7cd; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .22);
  position: relative;
}
.aw_werkzeug svg { width: 26px; height: 26px; pointer-events: none; }
.aw_werkzeug:hover { background: #fff6e2; border-color: #e0b25f; }
.aw_werkzeug_aktiv {
  background: #f2c777; border-color: #8a6224;
  box-shadow: 0 0 0 2px rgba(242, 199, 119, .35), inset 0 0 0 1px rgba(122, 85, 26, .35);
}
/* kleines Messing-Punktchen am aktiven Werkzeug (wie eine Nadel im Tray) */
.aw_werkzeug_aktiv::after {
  content: ""; position: absolute; right: 3px; top: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #7a5520; box-shadow: 0 0 0 1px rgba(255, 246, 220, .6);
}
/* In der Optionsleiste sind die Schalter etwas kleiner, aber weiter 40 px. */
.aw_opt_schalter .aw_werkzeug { width: 40px; height: 40px; }
.aw_opt_schalter .aw_werkzeug svg { width: 24px; height: 24px; }

/* ---------- Hauptbereich: Leuchttisch + Ebenen-Panel ---------- */
.aw_haupt {
  flex: 1 1 auto; display: flex; gap: .55rem;
  justify-content: center; align-items: stretch;
  min-width: 0; min-height: 0;
}
.aw_buene {
  /* Das Blatt waechst mit dem Fenster (JS setzt die Groesse); die Buehne
     umschliesst es. Vorher war sie auf 720 px gedeckelt - auf grossen
     Bildschirmen blieb die Arbeitsflaeche klein. */
  flex: 0 1 auto; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: .7rem .9rem 1.9rem;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 226, 166, .07), transparent 62%),
    radial-gradient(ellipse at 50% 45%, rgba(12, 24, 23, .42), rgba(8, 16, 15, .82));
  border: 1px solid rgba(226, 179, 92, .38);
  border-radius: 14px;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .38), 0 12px 28px rgba(0, 0, 0, .22);
}
html[data-theme="dark"] .aw_buene {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 210, 140, .10), transparent 62%),
    radial-gradient(ellipse at 50% 45%, rgba(8, 16, 15, .55), rgba(4, 9, 9, .9));
  border-color: rgba(226, 179, 92, .3);
}
/* warme Glut des Leuchttisches hinter dem Blatt */
.aw_buene::before {
  content: ""; position: absolute; inset: 6% 5% 11%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 232, 180, .16), transparent 68%);
  pointer-events: none;
}
/* Peg-Leiste (Acme-Pegs) unter dem Blatt: Messing mit drei Loechern */
.aw_buene::after {
  content: ""; position: absolute; left: 50%; bottom: 8px;
  transform: translateX(-50%);
  width: 150px; height: 16px; border-radius: 3px;
  background:
    radial-gradient(circle at 25% 50%, #101a18 0 4px, transparent 4.5px),
    radial-gradient(circle at 50% 50%, #101a18 0 4px, transparent 4.5px),
    radial-gradient(circle at 75% 50%, #101a18 0 4px, transparent 4.5px),
    linear-gradient(180deg, #f2c777, #b7862f 55%, #7a5520);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 246, 220, .5);
  pointer-events: none;
}
/* Das Blatt: ein eigener Kasten um die Leinwand. game.js setzt Breite/Hoehe
   passend zum Bildformat und zum freien Platz; die Leinwand fuellt ihn.
   Der Default (4:3, volle Hoehe) verhindert ein Aufblitzen vor dem ersten
   Messen. */
.aw_blatt {
  position: relative; z-index: 1;
  height: 100%; aspect-ratio: 4 / 3;
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
}
/* Die Leinwand: weisses Arbeitsblatt im Holz-/Messingrahmen des Leuchttischs.
   Sie fuellt genau den Blatt-Kasten - so stimmen die Zeigerkoordinaten. */
.aw_leinwand, #aw_canvas {
  width: 100%; height: 100%;
  background: #fff; border-radius: 3px;
  box-shadow:
    0 0 0 6px #2a1e15,
    0 0 0 8px #b98b45,
    0 18px 40px rgba(0, 0, 0, .55),
    0 0 46px rgba(255, 214, 140, .2);
  touch-action: none; display: block; cursor: crosshair;
}
#aw_canvas.aw_cursor_move { cursor: move; }
#aw_canvas.aw_cursor_pipette { cursor: copy; }

/* kurzer Text ueber dem Blatt (Auftragszeile): Regie-Zettel */
.aw_buehentext {
  position: absolute; z-index: 2; top: .55rem; left: .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .2rem .55rem; border-radius: 4px;
  background: rgba(12, 24, 22, .82); color: #f7ecd4;
  border-left: 2px solid #cb9a46;
  font-size: .76rem; line-height: 1.35; pointer-events: none;
}
html[data-theme="dark"] .aw_buehentext { background: rgba(4, 10, 9, .86); }

/* ---------- Panel rechts: Belichtungsblatt (Ebenen) ---------- */
.aw_panel {
  flex: 0 0 300px; width: 300px;
  align-self: flex-start; max-height: 100%;
  padding: .55rem .65rem .8rem;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background:
    repeating-linear-gradient(0deg, rgba(122, 101, 61, .055) 0 1px, transparent 1px 25px),
    #f8f0da;
  color: #2a352f;
  border: 1px solid #c9b17f; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .5);
  scrollbar-width: thin; scrollbar-color: #a9792d transparent;
}
html[data-theme="dark"] .aw_panel {
  background:
    repeating-linear-gradient(0deg, rgba(247, 236, 212, .035) 0 1px, transparent 1px 25px),
    #172523;
  color: #ece2cb; border-color: #3b4d48;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Sichtbarer Messing-Scrollbalken: das Belichtungsblatt ist laenger als das
   Fenster (Bild-Import steht unten). Ohne Balken findet man den Rest nicht. */
.aw_panel::-webkit-scrollbar { width: 10px; }
.aw_panel::-webkit-scrollbar-track { background: rgba(122, 101, 61, .12); border-radius: 8px; }
.aw_panel::-webkit-scrollbar-thumb {
  background: #b7862f; border-radius: 8px; border: 2px solid #f8f0da;
}
html[data-theme="dark"] .aw_panel::-webkit-scrollbar-track { background: rgba(247, 236, 212, .07); }
html[data-theme="dark"] .aw_panel::-webkit-scrollbar-thumb { background: #c79a45; border-color: #172523; }
.aw_zeile {
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #7a653d;
  margin: .35rem 0 .25rem; padding-bottom: .12rem;
  border-bottom: 1px dashed rgba(122, 101, 61, .35);
}
.aw_zeile_format { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.aw_format_mass {
  color: #8b7650; font-size: .68rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
html[data-theme="dark"] .aw_format_mass { color: #c7ad7d; }
.aw_format { display: flex; align-items: stretch; gap: .3rem; margin: .1rem 0 .3rem; }
.aw_format_wahl {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  padding: .25rem .35rem; border-radius: 7px;
  border: 1px solid #c9b17f; background: #fffaf0; color: #32403b;
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
html[data-theme="dark"] .aw_format_wahl {
  background: #2c3e39; color: #f1e4c8; border-color: #53655f;
}
.aw_format .aw_knopf_klein { flex: 0 0 auto; min-width: 52px; min-height: 40px; padding: 0 .4rem; }
.aw_format .aw_knopf_klein:disabled { opacity: .45; cursor: default; }
html[data-theme="dark"] .aw_zeile { color: #c7ad7d; border-bottom-color: rgba(199, 173, 125, .3); }
.aw_hinweis { font-size: .78rem; line-height: 1.4; color: #62553c; margin: .2rem 0; }
html[data-theme="dark"] .aw_hinweis { color: #c9bda2; }
.aw_zahlfeld {
  width: 58px; font-size: .82rem; padding: .22rem .3rem;
  border: 1px solid #cbb98e; border-radius: 5px; background: #fffaf0; color: #23302c;
}
html[data-theme="dark"] .aw_zahlfeld { background: #243532; color: #f1e4c8; border-color: #485a54; }
.aw_reihe { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .2rem 0; }
.aw_paar {
  display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center;
  gap: .3rem; margin: .25rem 0;
}
.aw_paar > .aw_feld { white-space: nowrap; }
.aw_paar > .aw_zahlfeld { width: 100%; min-width: 0; }
.aw_aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }

/* Ebenenliste: Karteikarten auf dem Belichtungsblatt */
.aw_ebenenliste { display: flex; flex-direction: column; gap: .28rem; margin: .3rem 0; }
.aw_ebene {
  display: flex; align-items: center; gap: .22rem;
  border: 1px solid #d8c59c; border-left: 3px solid transparent;
  border-radius: 7px; padding: .26rem .28rem;
  background: #fffaf0; color: #2a352f; cursor: pointer;
}
html[data-theme="dark"] .aw_ebene { background: #22332f; border-color: #3b4d48; color: #ece2cb; }
.aw_ebene_aktiv {
  border-color: #b7862f; border-left-color: #b7862f;
  background: #fff3d6;
  box-shadow: inset 0 0 0 1px rgba(183, 134, 47, .25);
}
html[data-theme="dark"] .aw_ebene_aktiv {
  background: #2c3d35; border-color: #d8a854; border-left-color: #e0b25f;
  box-shadow: inset 0 0 0 1px rgba(224, 178, 95, .35);
}
.aw_ebene_name {
  flex: 1 1 auto; font-size: .8rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw_ebene_name[contenteditable="true"] {
  background: #fffdf4; border: 2px solid #b7862f; border-radius: 4px; padding: 0 .2rem;
  color: #23302c;
}
html[data-theme="dark"] .aw_ebene_name[contenteditable="true"] { background: #f8f0da; color: #23302c; }
.aw_klein_knopf {
  flex: 0 0 auto; width: 26px; height: 26px; line-height: 1; padding: 0;
  border: 1px solid #cbb98e; background: #f4e8cc; border-radius: 5px;
  cursor: pointer; font-size: .8rem; color: #32403b;
}
html[data-theme="dark"] .aw_klein_knopf { background: #2c3e39; color: #f1e4c8; border-color: #53655f; }
.aw_klein_knopf:hover { border-color: #e0b25f; background: #fff4dc; color: #2a2413; }
.aw_klein_knopf svg { width: 15px; height: 15px; display: block; margin: 0 auto; }
.aw_deckkraft { width: 54px; accent-color: #b7862f; }

/* ---------- Zeitsteuerung in der Timeline ---------- */
.aw_knopf_klein {
  border: 1px solid #c9b17f; background: #f4e8cc; color: #32403b;
  border-radius: 7px; padding: .24rem .45rem; font-size: .78rem; font-weight: 600;
  cursor: pointer; min-height: 30px;
}
html[data-theme="dark"] .aw_knopf_klein { background: #efe3c6; color: #23302c; border-color: #b7862f; }
.aw_knopf_klein:hover { border-color: #e0b25f; background: #fff4dc; }
.aw_knopf_klein_aktiv {
  background: #f2c777; border-color: #8a6224; color: #2a2413; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(122, 85, 26, .25);
}
html[data-theme="dark"] .aw_knopf_klein_aktiv { background: #e8bd75; color: #241d0d; border-color: #8a6224; }
.aw_knopf_rot { border-color: #c98674; background: #f3d3c8; color: #8e2f1c; }
html[data-theme="dark"] .aw_knopf_rot { background: #f3d3c8; color: #8e2f1c; border-color: #c98674; }

/* ---------- Formen-Panel ---------- */
.aw_form_kacheln { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0; }
.aw_form_kachel {
  width: 42px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid #cbb98e; border-radius: 6px; background: #fffaf0;
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] .aw_form_kachel { background: #2c3e39; border-color: #53655f; }
.aw_form_kachel:hover { border-color: #e0b25f; }
.aw_form_kachel svg { width: 22px; height: 22px; pointer-events: none; }
.aw_form_kachel_aktiv {
  background: #f2c777; border-color: #8a6224;
  box-shadow: inset 0 0 0 1px rgba(122, 85, 26, .3);
}
html[data-theme="dark"] .aw_form_kachel_aktiv {
  background: #e8bd75; border-color: #8a6224;
}

/* ---------- Text-Panel ---------- */
.aw_textfeld {
  width: 100%; font-size: .86rem; padding: .3rem .35rem; resize: vertical;
  border: 1px solid #cbb98e; border-radius: 5px; background: #fffaf0; color: #23302c;
  font-family: inherit; line-height: 1.35;
}
html[data-theme="dark"] .aw_textfeld { background: #243532; color: #f1e4c8; border-color: #485a54; }
.aw_text_schriften, .aw_text_ausrichtungen {
  display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0;
}
.aw_text_schrift { min-width: 76px; font-size: .78rem; }
.aw_text_ausrichtung { min-width: 44px; font-size: 1rem; }

/* ---------- Timeline: der Filmstreifen ----------
   Zwei Stockwerke: oben die Bildeinstellungen, darunter die Bilder.
   Die Bilder sitzen in einem dunklen Filmband mit Sprocket-Loechern. */
.aw_timeline {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .32rem .65rem .42rem;
  background: linear-gradient(180deg, #172623 0%, #101b19 100%);
  border-top: 2px solid #a9792d;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .aw_timeline {
  background: linear-gradient(180deg, #101d1a 0%, #0a1412 100%);
  border-top-color: #8a6224;
}
.aw_timeline_leiste {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; overflow-x: auto;
}
.aw_timeline_leiste .aw_feld { color: #c9b78f; }
html[data-theme="dark"] .aw_timeline_leiste .aw_feld { color: #c9b78f; }
.aw_timeline_leiste .aw_trenner { height: 24px; background: rgba(226, 179, 92, .3); }
.aw_timeline_leiste .aw_zahlfeld {
  width: 54px; background: #0d1917; color: #f1e4c8; border-color: #41534e;
}
.aw_timeline_leiste select.aw_knopf_klein { min-height: 34px; padding: .2rem .35rem; }
.aw_timeline_leiste .aw_knopf { min-height: 36px; padding: .3rem .7rem; }
/* Abspielen ist der Hauptknopf: Messing, dunkle Schrift */
#aw_k_play {
  background: linear-gradient(180deg, #f4cb7e, #d8a64e);
  border-color: #8a6224; color: #241d0d; font-weight: 800;
}
#aw_k_play:hover { background: linear-gradient(180deg, #ffe09a, #e8b85f); }

.aw_timeline_bilder {
  display: flex; gap: .4rem; flex: 1 1 auto;
  overflow-x: auto; padding: .7rem .35rem .7rem;
  background-color: #0c1514;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(247, 236, 212, .42) 9px 15px, transparent 15px 24px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(247, 236, 212, .42) 9px 15px, transparent 15px 24px);
  background-size: 24px 5px, 24px 5px;
  background-position: 0 .3rem, 0 calc(100% - .3rem);
  background-repeat: repeat-x;
  border: 1px solid #34443f; border-radius: 4px;
  scrollbar-width: thin; scrollbar-color: #8a6a32 transparent;
}
.aw_thumb {
  flex: 0 0 auto; position: relative;
  border: 2px solid #3f524d; border-radius: 4px;
  background: #1b2a27;
  padding: 3px 4px 2px; cursor: pointer; touch-action: none;
}
.aw_thumb:hover { border-color: #8a6a32; }
.aw_thumb_aktiv {
  border-color: #e0b25f;
  box-shadow: 0 0 0 2px rgba(224, 178, 95, .25), 0 0 12px rgba(224, 178, 95, .18);
}
.aw_thumb_zieht { opacity: .5; }
.aw_thumb canvas {
  display: block; width: 76px; height: 57px;
  background: #fff; border-radius: 2px;
}
.aw_thumm_dauer {
  width: 64px; font-size: .68rem; padding: .08rem .18rem; margin-top: .18rem;
  border: 1px solid #41534e; border-radius: 3px;
  background: #0d1917; color: #f1e4c8;
}
.aw_thumm_nummer {
  font-size: .64rem; color: #c9b78f; text-align: center;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.aw_thumb_aktiv .aw_thumm_nummer { color: #f2c777; }

/* ---------- Zeitspur ---------- */
.aw_zeitspur {
  flex: 0 0 auto; height: 6px; margin: 0 .7rem;
  background: #0c1514; border: 1px solid #2c3b38;
  border-radius: 999px; overflow: hidden;
}
html[data-theme="dark"] .aw_zeitspur { background: #070f0e; border-color: #2c3b38; }
.aw_zeitspur_fuellung {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #f2c777, #b7862f);
}

/* ---------- Statuszeile: Regie-Monitor ---------- */
.aw_status {
  flex: 0 0 auto; font-size: .76rem; color: #d9cdb0;
  background: #0e1917; border-top: 1px solid #263531;
  padding: .22rem .7rem .28rem; min-height: 24px;
  font-family: "Consolas", "Cascadia Mono", ui-monospace, monospace;
  letter-spacing: .01em;
}
html[data-theme="dark"] .aw_status { color: #e3d5b4; background: #08110f; }
.aw_status_warn { color: #ffb3a2; font-weight: 700; }
html[data-theme="dark"] .aw_status_warn { color: #ffb3a2; }

/* ---------- Fuß (GUI 3.13.2): Schule + Impressum ---------- */
.jupi_footer {
  flex: 0 0 auto; margin-top: auto;
  background: #f1e6cd; border-top: 2px solid #b7862f;
  padding: .32rem 1rem;
}
.jupi_footer p {
  margin: 0; text-align: center; font-size: .76rem; line-height: 1.5;
  color: #514733;
}
.jupi_footer a { color: #1b5e20; font-weight: 700; text-decoration: none; }
.jupi_footer a:hover { text-decoration: underline; }
html[data-theme="dark"] .jupi_footer { background: #101a18; border-top-color: #8a6224; }
html[data-theme="dark"] .jupi_footer p { color: #bdb097; }
html[data-theme="dark"] .jupi_footer a { color: #e8bd75; }

/* ---------- Info-/Hilfe-Boxen IM Hilfe-Fenster ----------
   (Die Goldene Negativ-Regel 3.13.4 verbietet sie unter dem Werkzeug.) */
.aw_info, .aw_hilfe { margin-top: .55rem; }
.aw_info summary, .aw_hilfe summary {
  cursor: pointer; font-weight: 800; font-size: .84rem; padding: .4rem .7rem;
  border-radius: 6px; border: 1px solid transparent; list-style: none;
}
.aw_info summary::-webkit-details-marker, .aw_hilfe summary::-webkit-details-marker { display: none; }
.aw_info summary::before, .aw_hilfe summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
/* Messing = Hilfe, Petrol = Lernziel */
.aw_hilfe summary { background: #f2d79a; color: #4a3410; border-color: #c9a24e; }
.aw_info summary { background: #d7e6df; color: #173d35; border-color: #9dbbae; }
html[data-theme="dark"] .aw_hilfe summary { background: #3a2f16; color: #ffe0a3; border-color: #8a6224; }
html[data-theme="dark"] .aw_info summary { background: #16302c; color: #bfe3d6; border-color: #365c53; }
.aw_box_inhalt { padding: .5rem .8rem .2rem; font-size: .86rem; line-height: 1.55; }
.aw_box_inhalt p { margin: .3rem 0; }
.aw_merksatz {
  background: #f2e6c9; border-left: 4px solid #b7862f; border-radius: 5px;
  padding: .5rem .7rem; margin: .35rem 0; color: #3a3222;
}
html[data-theme="dark"] .aw_merksatz { background: #23322c; color: #f1e4c8; border-left-color: #e0b25f; }

/* ---------- Fenster: Belichtungsblatt ---------- */
.aw_modalfilter {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(7, 13, 12, .68);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.aw_modal {
  background:
    repeating-linear-gradient(0deg, rgba(122, 101, 61, .045) 0 1px, transparent 1px 27px),
    #fbf3df;
  color: #2a352f;
  border: 1px solid #b7862f; border-top: 5px solid #b7862f;
  border-radius: 10px; max-width: 620px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: 1rem 1.1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
}
html[data-theme="dark"] .aw_modal {
  background:
    repeating-linear-gradient(0deg, rgba(247, 236, 212, .035) 0 1px, transparent 1px 27px),
    #192724;
  color: #ece2cb; border-color: #c79a45; border-top-color: #c79a45;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
}
.aw_modal h2 {
  margin: 0 0 .5rem; font-size: 1.12rem; letter-spacing: .01em;
  color: #3a2c10;
}
html[data-theme="dark"] .aw_modal h2 { color: #f2d79a; }
.aw_modal_breit { max-width: 780px; }
.aw_hilfe_sprung { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; }
/* Der Fuss klebt am unteren Fensterrand: "Schliessen" ist immer erreichbar,
   auch wenn der Hilfetext laenger ist als das Fenster. */
.aw_modal_fuss {
  display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 2;
  margin: .8rem -.15rem -.1rem; padding: .55rem .15rem .15rem;
  background: #fbf3df; border-top: 1px solid #d8c59c;
}
html[data-theme="dark"] .aw_modal_fuss { background: #192724; border-top-color: #3f524d; }
.aw_modal_fuss .aw_knopf { border-color: #b9a274; }
html[data-theme="dark"] .aw_modal .aw_hinweis { color: #cfc2a6; }
html[data-theme="dark"] .aw_modal .aw_merksatz { background: #23332d; color: #f1e4c8; }

/* Auftrags- und Beispielkarten: angepinnte Zettel */
.aw_auftragskarte, .aw_beispielkarte {
  position: relative;
  border: 1px solid #d8c59c; border-radius: 7px; padding: .55rem .7rem; margin: .5rem 0;
  background: #fffaf0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}
html[data-theme="dark"] .aw_auftragskarte,
html[data-theme="dark"] .aw_beispielkarte {
  background: #22332f; border-color: #3f524d; color: #ece2cb;
}
.aw_auftragskarte::before, .aw_beispielkarte::before {
  content: ""; position: absolute; top: 6px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2c777, #8a6224 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.aw_auftrag_titel { font-weight: 800; margin: 0; font-size: .95rem; }
.aw_auftrag_text { margin: .15rem 0; font-size: .86rem; line-height: 1.45; }
.aw_auftrag_ziel { margin: .2rem 0; font-size: .8rem; color: #1c5a4e; font-weight: 700; }
html[data-theme="dark"] .aw_auftrag_ziel { color: #9fd8c9; }
.aw_auftrag_regeln { margin: .2rem 0; font-size: .8rem; padding-left: 1.1rem; }
.aw_auftrag_regeln li { margin: .12rem 0; }
.aw_gruende {
  margin: .3rem 0 0; font-size: .83rem; color: #8e2f1c;
  background: #f8ddd4; border-radius: 5px; padding: .4rem .6rem;
  border-left: 3px solid #c45c43;
}
html[data-theme="dark"] .aw_gruende { background: #3b221c; color: #ffcdc1; }
.aw_erfolg {
  margin: .3rem 0 0; font-size: .86rem; font-weight: 700;
  background: #dcecdf; color: #1b5e20; border-radius: 5px; padding: .4rem .6rem;
  border-left: 3px solid #4f8c5c;
}
html[data-theme="dark"] .aw_erfolg { background: #1e3828; color: #c8e6c9; }

/* Beispiel-Vorschau bleibt ein weisses Arbeitsblatt - wie die Leinwand */
.aw_beispiel_vorschau {
  display: block; width: 132px; height: 99px;
  background: #fff; border-radius: 3px; margin: .25rem auto;
  border: 1px solid #cbb98e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.aw_beispiel_schau { margin-top: .3rem; }

/* ---------- Rechtsklick-Menue: Papier am Mauszeiger ---------- */
.aw_menue {
  position: fixed; z-index: 65;
  min-width: 190px; max-width: 260px;
  background: #fbf3df; color: #2a352f;
  border: 1px solid #c9b17f; border-top: 3px solid #b7862f; border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
  padding: .25rem; overflow: hidden auto; max-height: 80vh;
}
html[data-theme="dark"] .aw_menue { background: #1b2a27; color: #ece2cb; border-color: #485a54; border-top-color: #c79a45; }
.aw_menue_titel {
  font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #7a653d; padding: .2rem .5rem .3rem;
  border-bottom: 1px solid #e4d7ba;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="dark"] .aw_menue_titel { color: #c7ad7d; border-bottom-color: #384a45; }
.aw_menue_punkt {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: .84rem; color: inherit;
  padding: .42rem .5rem; border-radius: 4px; white-space: nowrap;
  min-height: 34px;
}
.aw_menue_punkt:hover, .aw_menue_punkt:focus-visible {
  background: #f2e6c9; color: #3a2c10;
}
html[data-theme="dark"] .aw_menue_punkt:hover,
html[data-theme="dark"] .aw_menue_punkt:focus-visible { background: #2c403a; color: #ffe0a3; }
.aw_menue_punkt[disabled] { opacity: .45; cursor: not-allowed; }
.aw_menue_punkt[disabled]:hover { background: none; color: inherit; }
.aw_menue_punkt_rot { color: #8e2f1c; }
.aw_menue_punkt_rot:hover, .aw_menue_punkt_rot:focus-visible { background: #f8ddd4; color: #8e2f1c; }
html[data-theme="dark"] .aw_menue_punkt_rot { color: #ff9d88; }
html[data-theme="dark"] .aw_menue_punkt_rot:hover,
html[data-theme="dark"] .aw_menue_punkt_rot:focus-visible { background: #3b221c; color: #ffcdc1; }
.aw_menue_taste { float: right; margin-left: .8rem; font-size: .72rem; opacity: .65; }

/* ---------- Toast + Konfetti ---------- */
.aw_toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(20px);
  background: #142522; color: #f7ecd4; padding: .55rem 1rem; border-radius: 6px;
  border: 1px solid #c79a45;
  font-size: .88rem; opacity: 0; pointer-events: none; transition: all .25s; z-index: 60;
  max-width: 92vw; text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.aw_toast_zeigen { opacity: 1; transform: translateX(-50%) translateY(0); }
.aw_konfetti {
  position: fixed; top: -14px; width: 10px; height: 16px; z-index: 70;
  pointer-events: none; border-radius: 2px;
  animation: aw_fall 1.5s ease-in forwards;
}
@keyframes aw_fall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .aw_konfetti { display: none; }
  .aw_toast { transition: none; }
}

/* ---------- Handy (bis 900 px): Palette oben, Seite scrollt ----------
   Wichtig: die Leinwand darf hier NICHT in eine Flex-Hoehe schrumpfen.
   Ein Canvas ist ein Ersatz-Element; in einer Spalte mit flex:1 1 auto
   schrumpft es auf Briefmarkengroesse (Falle im 390-px-Test). Deshalb:
   Seite scrollt senkrecht, die Leinwand nimmt die volle Breite. */
@media (max-width: 900px) {
  html, body.aw { height: auto; min-height: 100%; }
  body.aw { overflow: auto; }
  /* Zwei Zeilen, aber die rechte Zone darf umbrechen: Bei 320-390 px passt
     Sprachwahl + Theme-Pille nicht immer neben "Alle Spiele" - vorher schob
     sich die Sprachwahl ueber den Zurueck-Knopf. */
  .aw_kopf {
    position: sticky; top: 0; z-index: 30;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .aw_marke { grid-column: 1 / -1; grid-row: 1; }
  a.aw_zurueck {
    grid-row: 2; grid-column: 1; padding: .3rem .55rem; font-size: .78rem;
  }
  .aw_kopf_ende {
    grid-row: 2; grid-column: 2;
    justify-self: end; justify-content: flex-end;
    flex-wrap: wrap; gap: .25rem;
  }
  .aw_kopf_ende .jupi_sprachen_select { max-width: 8.5rem; }
  .aw_titel { font-size: .96rem; }
  .aw_marke_logo { height: 1.55rem; width: 1.55rem; }
  /* Aktionsleiste bricht um, statt Aktionen hinter dem Rand zu verstecken:
     am Handy sind Undo/Redo/Export/Hilfe sonst nicht auffindbar. */
  .aw_aktionsleiste { flex-wrap: wrap; gap: .25rem; padding: .28rem .4rem; }
  .aw_aktionsleiste .aw_knopf { font-size: .76rem; padding: .3rem .45rem; }
  .aw_aktionsleiste .aw_flex { display: none; }
  .aw_optionen { gap: .3rem; padding: .3rem .45rem; }
  .aw_muster_knopf { width: 26px; height: 26px; }
  .aw_arbeitsbereich { flex: 0 0 auto; flex-direction: column; padding: .4rem .45rem .1rem; gap: .4rem; }
  /* Werkzeugpalette oben als Papier-Tray (vertikal waere am Handy zu breit) */
  .aw_werkzeuge {
    flex: 0 0 auto; width: auto; flex-direction: row;
    overflow-x: auto; overflow-y: hidden; padding: .28rem; gap: .2rem;
    border-radius: 10px;
  }
  /* Acht Werkzeuge passen in eine Zeile (8 x 40 + 7 x 3 = 341 px):
     nichts liegt mehr hinter dem rechten Rand. Die Trenner entfallen. */
  .aw_werkzeuge .aw_trenner { display: none; }
  .aw_werkzeuge .aw_werkzeug { width: 40px; height: 40px; }
  .aw_werkzeuge .aw_werkzeug svg { width: 23px; height: 23px; }
  .aw_haupt { flex-direction: column; flex: 0 0 auto; gap: .4rem; }
  .aw_buene { flex: 0 0 auto; width: 100%; padding: .45rem .45rem 1.8rem; }
  /* Am Handy kein JS-Messen: das Blatt bleibt seitenverhaeltnistreu und wird
     nur so hoch wie noetig (hochkante Formate sollen nicht abgeschnitten werden). */
  .aw_blatt {
    width: auto; height: auto; aspect-ratio: auto;
    max-width: 100%; max-height: 58vh;
  }
  .aw_leinwand, #aw_canvas {
    width: auto; height: auto; max-width: 100%; max-height: 58vh;
  }
  /* Das Panel scrollt fuer sich: sonst schiebt sein ganzer Inhalt die Timeline
     weit nach unten. 48vh lassen Canvas und Panel gemeinsam ins Bild passen. */
  .aw_panel {
    flex: 0 0 auto; width: 100%; max-width: 100%;
    max-height: 48vh; overflow-y: auto;
  }
  .aw_timeline_leiste { flex-wrap: wrap; overflow-x: visible; }
  .aw_timeline_bilder { max-width: 100%; }
}

/* Sehr schmale Geraete (320 px): die Farbmuster duerfen umbrechen, statt
   den Raster-Schalter aus dem Fenster zu schieben. */
@media (max-width: 360px) {
  .aw_optionen { flex-wrap: wrap; }
  .aw_opt_block { flex-wrap: wrap; min-width: 0; }
  .aw_muster_knopf { width: 24px; height: 24px; }
  /* Die Ebenenzeile darf umbrechen, sonst schiebt ihr Mindestinhalt das
     ganze Panel aus dem 320-px-Fenster. */
  .aw_ebene { flex-wrap: wrap; }
  .aw_format .aw_knopf_klein { min-width: 46px; }
}