/* ==========================================================================
   BookTo — Malbrett (js/malen.js), 27.09.2026

   Ein Blatt, darunter die Werkzeuge, unten die Knöpfe. Das Blatt bekommt,
   was Kopf, Werkzeuge und Fuß übrig lassen — keine gerechnete Höhe, dieselbe
   Linie wie beim Kamera-Dialog (`.modal--kamera`).
   ========================================================================== */

.modal--malen { flex-direction: column; }

/* ⛔ Der Dialog nimmt den Schirm (Lars, 28.09.2026: „der dialog kann so
   wie hier ruhig bildschirmfüllend sein … bitte layout so machen dass die
   malfläche maximal groß sein kann“).

   Vorher 1180 px breit und die Werkzeuge UNTER dem Blatt — dabei blieben
   auf einem 1900er Schirm links und rechts je 350 px leer, und dem Blatt
   nur 677 × 508. Jetzt: volle Breite, Werkzeuge als Spalte daneben, Blatt
   nimmt den Rest. */
.malen {
  width: min(97vw, 1800px);
  height: 97vh;
  max-width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.malen__kopf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.malen__x { margin-inline-start: auto; }

.malen__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}
/* Die Unterzeile sagt etwas Wichtiges und ist trotzdem zweitrangig — sie
   darf dem Blatt keine 60 px Kopfhöhe wegnehmen. */
.malen .modal__sub { font-size: var(--text-min); line-height: 1.3; }

/* ⛔ Das Blatt richtet sich nach der BREITE, nicht nach dem Rest der Höhe.
   Mit `flex: 1 1 auto` bekam es nur, was Kopf (141 px), Werkzeuge (136 px)
   und Fuß (221 px) übrig ließen — gemessen am 27.09.2026: 458 × 344 px auf
   1500 × 950, 216 × 162 px auf 1024 × 768 und **5 × 4 px** auf dem Telefon.
   Ein Malbrett von fünf Pixeln ist kein Malbrett.

   Jetzt nimmt es die volle Breite und behält 4:3 (wie die Buchbilder); die
   Höhe deckelt `52vh`, damit auf einem flachen Bildschirm noch Werkzeuge
   und Fuß sichtbar sind. ⚠️ Der Deckel steht als `width`, nicht als
   `max-height`: Mit `aspect-ratio` UND `max-height` klemmt der Browser nur
   die Höhe und lässt die Breite stehen — das Bild wäre verzerrt.

   Wird es trotzdem zu hoch, rollt der Dialogkörper. Er hat seine großen
   Rolltasten von `BookToInput.pushScope` (siehe die Runde vom 17.09.2026). */
/* ⛔ Das Blatt KLEBT oben. Auf dem Telefon passen Blatt, neun Werkzeuge,
   neun Farben und Stärken und die Textzeile nicht zusammen in den
   Dialogkörper — er rollt. Und sobald das Textfeld den Fokus bekommt, holt
   der Browser es in den sichtbaren Bereich und schiebt dabei das Blatt
   vollständig hinaus. Gemessen am 27.09.2026 auf 390 x 844 und 844 x 390:
   „blatt-verdeckt 170“ — also das ganze Blatt.

   Statt den Fokus zu unterdrücken (dann sähe man beim Tippen nicht, was man
   schreibt) bleibt das Blatt stehen und die Werkzeuge rollen darunter
   durch. Dieselbe Lösung wie der klebende Seitenstreifen im Studio. */
.malen__blatt {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 4px;
  background: var(--color-surface);
}
.malen__canvas {
  display: block;
  /* Startwert. Den endgültigen setzt `passeBlattAn()` in js/malen.js an
     der gemessenen Höhe des Dialogkörpers — ein fester vh-Wert kennt die
     Werkzeugleiste nicht und schob das Blatt aus dem Sichtbaren. */
  width: min(100%, calc(46vh * 4 / 3));
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--color-border-strong);
  border-radius: 12px;
  background: #ffffff;
  /* ⚠️ Ohne das rollt die Seite beim Malen mit dem Finger statt zu zeichnen. */
  touch-action: none;
  cursor: crosshair;
}

.malen__werkzeug {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.malen__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Farbe und Stärke sind Knöpfe wie alle anderen: 64 px, damit Verweilen und
   Taster sie treffen. Die Farbe steckt IM Knopf, nicht auf ihm — sonst hätte
   der gewählte Zustand keinen Platz mehr für seinen Rahmen. */
.malen__farbe,
.malen__staerke {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 3px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
}
.malen__farbe[aria-pressed="true"],
.malen__staerke[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.malen__farbe-in {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .25);
}
.malen__punkt {
  border-radius: 50%;
  background: var(--color-text);
}
/* ⚠ Der Verweil-Punkt (`shared/dwell-dom.css`) liegt auf `z-index: 2` und
   hebt nur die Kinder von `.btn`, `.tile`, `.reader__nav` und `.imgpick`
   darüber. Farbfläche und Stärkepunkt sind keines davon — beim Verweilen
   wuchs der Punkt genau über die Farbe, die man gerade wählt. Hier lokal
   geloest, NICHT in der geteilten Datei: die spiegeln alle Projekte. */
.malen__farbe-in,
.malen__punkt { position: relative; z-index: 3; }
/* ---- Werkzeuge (27.09.2026) ---------------------------------------------
   Lars: „whiteboard kann auch text schreiben, sprechblasen mit text,
   verschiedene stifte, linien, formen". Neun Werkzeuge, jedes ein Quadrat
   von 64 px — sie zeigen nur ihr Zeichen, der Name steht in `aria-label`
   und `title`. Neun Beschriftungen nebeneinander brächen die Reihe auf drei
   Zeilen und drückten das Blatt zusammen. */
.malen__wz {
  width: 64px;
  height: 64px;
  min-height: 64px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.malen__wz-ico { width: 28px; height: 28px; }
.malen__wz[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-deep);
}

/* Zwei Scan-Gruppen in einer Zeile: `display: contents` gibt die Knöpfe
   an die Reihe weiter, die Gruppe bleibt für Taster und Screenreader aber
   ein eigener Kasten. */
.malen__gruppe { display: contents; }

/* Trennt Farben von Größen, ohne eine eigene Zeile zu kosten. */
.malen__trenner {
  width: 2px;
  align-self: stretch;
  margin-inline: 4px;
  background: var(--color-border);
  flex: 0 0 auto;
}

/* Die Textzeile steht nur da, wenn Text oder Sprechblase gewählt ist. */
.malen__textzeile { flex-wrap: nowrap; }
.malen__label { font-weight: 700; flex: 0 0 auto; }
.malen__eingabe {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 64px;
}
.malen__hinweis {
  flex: 0 1 auto;
  font-size: var(--text-min);
  color: var(--color-text-muted);
}
@media (max-width: 860px) {
  /* Der Hinweissatz kostet auf dem Telefon die Breite, die das Feld
     braucht — der Platzhalter im Feld sagt dasselbe. */
  .malen__hinweis { display: none; }
}


/* ⚠️ Ein flexibler Zwischenraum (`flex: 1 1 auto`) nimmt in einer
   umbrechenden Reihe eine GANZE Zeile — der Fuß war dadurch 221 px hoch
   statt 72 (gemessen 27.09.2026). Der Hauptknopf schiebt sich jetzt selbst
   nach rechts; bricht die Reihe doch um, steht er einfach in der zweiten. */
.malen__foot { flex-wrap: wrap; }
/* ⛔ KEIN `margin-inline-start: auto` auf dem Hauptknopf. In einer
   umbrechenden Reihe nimmt ein solcher Rand den ganzen Rest der Zeile —
   derselbe Fehler wie der flexible Zwischenraum davor, und der Fuß war
   wieder 221 px hoch statt 72. Die Knöpfe stehen jetzt einfach
   nebeneinander; der Hauptknopf ist durch seine Farbe erkennbar. */
.malen__foot { justify-content: flex-start; }

/* „Blatt leeren" trägt immer nur sein Zeichen: Mit Beschriftung passten die
   fünf Knöpfe nicht in eine Zeile des 920 px breiten Dialogs. Der Name
   steht in `aria-label` und `title`. Zurücknehmen und Wiederholen behalten
   ihre Beschriftung — sie werden am häufigsten gebraucht. */
.malen__foot [data-mal-leer] span:not(.btn__ico) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.malen__foot [data-mal-leer] { min-width: 64px; }

/* ⛔ Auf dem Telefon bleiben es 64 px. Eine frühere Fassung ging hier
   auf 56 herunter — das ist über dem Touch-Maß (48), aber UNTER dem
   Hausmaß für Verweilen (64, `--target-min`). Ausgerechnet dieser Dialog
   verspricht in seiner Unterzeile, dass die Knöpfe mit Verweilen gehen.
   Gespart wird stattdessen am Abstand. Dieselbe Entscheidung wie beim
   Zahlenschloss (17.09.2026, 58 → 72 px) und bei den Reader-Knöpfen im
   Telefon-Querformat (13.09.2026, 56 → 64 px). */
@media (max-width: 720px) {
  .malen__reihe { gap: 6px; }
  .malen__farbe-in { width: 38px; height: 38px; }
  /* ⚠️ Kein `flex: 1 1 auto` auf den Fußknöpfen: Jeder wuchs damit auf die
     volle Breite, und der Fuß war auf dem Telefon 305 px hoch. */
  .malen__foot .btn { flex: 0 0 auto; }
  .malen__foot [data-mal-ok] { flex: 1 1 auto; }
}

/* ---- Die Kachel im Bilderdialog ----------------------------------------
   Mit Kamera UND Malbrett teilen sich drei Kacheln die vierte Spalte. Bei je
   120 px (`.picktile--halb`) wäre die erste Reihe 384 px hoch und die
   Trefferbilder würden mitwachsen — also ein eigenes Maß für den Dreier.
   84 px liegt weiter deutlich über den 64 px für Verweilen. */
.picktile--drittel {
  flex: 1 0 auto;
  min-height: 84px;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
}
.picktile--drittel .picktile__ico { width: 26px; height: 26px; }
.picktile--drittel .picktile__t { font-size: var(--text-base); }
.picktile--drittel .picktile__l { font-size: var(--text-min); }

/* ⚠️ Fünf beschriftete Knöpfe im Fuß brachen bei 920 px auf drei Zeilen
   (221 px gemessen). Unter 720 px tragen Zurücknehmen, Wiederholen und
   Leeren deshalb nur ihr Zeichen; der Name bleibt in `aria-label` und
   `title` und wird vorgelesen. */
@media (max-width: 720px) {
  .malen__foot [data-mal-zurueck] span:not(.btn__ico),
  .malen__foot [data-mal-vor] span:not(.btn__ico),
  .malen__foot [data-mal-leer] span:not(.btn__ico) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .malen__foot [data-mal-zurueck],
  .malen__foot [data-mal-vor],
  .malen__foot [data-mal-leer] { min-width: 64px; }
}

/* ---- Breite Schirme: Werkzeuge als Spalte, Blatt nimmt den Rest ---------
   Ein Gitter statt einer Spalte. Die Werkzeuge stehen links (im
   RTL-Betrieb rechts — `grid-template-columns` dreht mit `dir` mit), das
   Blatt füllt die große Zelle, und die Textzeile liegt darunter über die
   ganze Breite des Blattes.

   ⚠ `minmax(0, 1fr)` auf beiden Achsen: Ein blankes `1fr` wird nie
   schmaler als sein längster Inhalt — dieselbe Regel wie überall sonst im
   Projekt. Und die Zelle des Blattes bekommt ihre Größe damit aus dem
   Gitter, nicht aus dem Inhalt: `passeBlattAn()` kann sie messen, ohne
   eine Rückkopplung auszulösen. */
@media (min-width: 900px) {
  .malen__body {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
  }
  .malen__werkzeug {
    grid-column: 1;
    grid-row: 1 / 3;
    align-content: start;
    overflow-y: auto;
  }
  .malen__blatt {
    grid-column: 2;
    grid-row: 1;
    position: static;
    align-items: center;
  }
  .malen__textzeile {
    grid-column: 2;
    grid-row: 2;
  }
  /* In der Spalte bricht jede Reihe nach drei Knöpfen um. */
  .malen__reihe { align-content: start; }
  .malen__trenner { display: none; }
}

/* ---- Telefon im Querformat: nebeneinander --------------------------------
   Auf 844 x 390 bleiben dem Dialogkörper rund 100 px Höhe. Untereinander
   ist das für ein Malblatt und zwei Werkzeugreihen zu wenig — auch ein
   klebendes Blatt war dort zur Hälfte verdeckt. Flach UND breit heisst
   deshalb: Blatt links, Werkzeuge rechts. Dieselbe Entscheidung wie im
   Reader, der auf flachen breiten Schirmen Bild und Text nebeneinander
   legt (09.08.2026). */
@media (max-height: 560px) and (min-width: 700px) {
  .malen__body { flex-direction: row; align-items: stretch; }
  .malen__blatt {
    position: static;
    align-items: center;
    padding-block: 0;
  }
  .malen__werkzeug {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
  }
  .malen__textzeile { flex-wrap: wrap; }

  /* QA 24.10.2026: Seit die Oberfläche DM Sans statt Oswald trägt (breiter),
     brach der Fuß auf 844 × 390 in zwei Zeilen um, und dem Malblatt blieben
     120 × 90 px. Flach wie hochkant: kurze Unterzeile, „Rückgängig",
     „Wiederherstellen", „Leeren" nur als Zeichen, „Abbrechen" weg (das
     Kreuz im Kopf schließt), alles in EINER Zeile. */
  .malen .modal__head { padding-block: var(--space-2); }
  .malen .modal__head .modal__ico { display: none; }
  .malen__sub-lang { display: none; }
  .malen__sub-kurz { display: inline; }
  .malen__foot { padding-block: var(--space-2); flex-wrap: nowrap; }
  .malen__foot .btn { min-height: 64px; }
  .malen__foot [data-mal-zu] { display: none; }
  .malen__foot [data-mal-zurueck] span:not(.btn__ico),
  .malen__foot [data-mal-vor] span:not(.btn__ico),
  .malen__foot [data-mal-leer] span:not(.btn__ico) { display: none; }
  .malen__foot [data-mal-zurueck],
  .malen__foot [data-mal-vor],
  .malen__foot [data-mal-leer] { min-width: 64px; padding-left: 0; padding-right: 0; justify-content: center; }
  .malen__foot [data-mal-ok] { flex: 1 1 auto; }
}

/* ---- Telefon hochkant (Lars' iPhone-Bild vom 27.09.2026) -----------------
   Gemessen auf 390 x 664 (iPhone mit Safari-Leisten): Kopf 160 px, Fuss
   305 px — dem Dialogkörper blieben **151 px**. Das Blatt füllte sie ganz,
   und die quer liegenden Rolltasten lagen mitten darauf; von der
   Werkzeugleiste war nichts zu sehen.

   Der Platz kommt aus Kopf und Fuss, nicht aus dem Blatt:
   • Kopf: das Zeichen fällt weg, das Kreuz sitzt in der Ecke — die
     Unterzeile bekommt die volle Breite statt 210 px und braucht drei
     Zeilen statt fünf.
   • Fuss: 64 px hohe Knöpfe statt 88, drei davon nur mit Zeichen, der
     Hauptknopf in einer eigenen Zeile. 305 → rund 150 px. */
@media (max-width: 600px) {
  .malen .modal__head {
    position: relative;
    padding-block: var(--space-2);
  }
  .malen .modal__head .modal__ico { display: none; }
  .malen__x {
    position: absolute;
    top: var(--space-2);
    inset-inline-end: var(--space-2);
  }
  .malen__kopf { padding-inline-end: 72px; }
  .malen .modal__sub { line-height: 1.25; }
  /* ⚠ Auf dem Telefon nur der erste Satz. Die zweite Hälfte („… auch mit
     Augensteuerung und mit Tastern“) kostete dort zwei Zeilen im Kopf, und
     die fehlten dem Malblatt. Sie bleibt auf jedem Schirm stehen, auf dem
     Augensteuerung ueberhaupt vorkommt — an einem Telefon steckt kein
     Eyetracker. Der wichtige Satz (Malen braucht Maus, Finger oder Stift)
     steht in beiden Fassungen. */
  .malen__sub-lang { display: none; }

  .malen__foot { padding-block: var(--space-2); }
  .malen__foot .btn { min-height: 64px; }
  .malen__foot [data-mal-ok] { flex: 1 0 100%; }
  /* ⚠ „Abbrechen" fällt im Fuß weg — das Kreuz im Kopf schließt schon,
     und es ist ein 64-px-Ziel in derselben Scan-Gruppe. Mit ihm passte die
     erste Zeile nicht (338 px Bedarf auf 326 px), und der Fuß blieb bei
     drei Zeilen. Zwei Wege zum selben Ziel sind auf 342 px einer zu viel. */
  .malen__foot [data-mal-zu] { display: none; }
}

/* ⚠ Das klebende Blatt muss ÜBER den Rolltasten liegen (die haben
   `z-index: 4`), sonst malen sie sich mitten auf die Leinwand. */
.malen__blatt { z-index: 5; }
.malen__sub-kurz { display: none; }
@media (max-width: 600px) { .malen__sub-kurz { display: inline; } }