/* ==========================================================================
   PhotoTo — Bildschirme
   Regeln für Augensteuerung: jedes Ziel mindestens 64 px, nichts muss
   gezogen oder gerollt werden, das Foto selbst löst nie etwas aus.
   ========================================================================== */
:root {
  --pt-ziel: clamp(72px, 11vh, 120px); /* Mindestmaß eines Ziels außerhalb des Rasters */
  --pt-luecke: 8px;
  --pt-buehne: #2b2f36;            /* Hintergrund hinter dem Foto */
  --pt-rahmen: #ffd400;            /* Zuschneide-Rahmen, Auswahl */
  --pt-maske: #e11d48;             /* Gesichts-Markierung */
}
:root[data-theme="kontrast"] { --pt-buehne: #000; }

/* ── Knopf der App ── */
.pt-btn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--pt-ziel); min-width: var(--pt-ziel);
  padding: var(--space-2);
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-lg);
  font-weight: var(--font-bold); font-size: var(--text-sm); line-height: 1.2; text-align: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.pt-btn:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.pt-btn:active { transform: scale(0.97); }
.pt-btn svg { width: 30px; height: 30px; flex: 0 0 auto; }
.pt-btn__text { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.pt-btn--primary { background: var(--color-primary); border-color: var(--color-primary-dark); color: var(--color-text-inverse); }
.pt-btn--primary:hover { background: var(--color-primary-dark); color: var(--color-text-inverse); }
.pt-btn--gefahr { border-color: var(--color-error); color: var(--color-error); }
.pt-btn.is-active { border-color: var(--color-primary); background: var(--color-primary-bg); box-shadow: inset 0 0 0 3px var(--color-primary); }
.pt-btn[disabled], .pt-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.pt-btn--quer { flex-direction: row; justify-content: flex-start; gap: var(--space-3); text-align: left; }
:root[data-theme="kontrast"] .pt-btn--primary { color: #000; }

/* ── Allgemeiner Bildschirm ── */
.screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--pt-luecke); padding: var(--pt-luecke); }
.screen__kopf { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.screen__kopf h1 { margin-right: auto; }
.hinweis {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-primary-bg); color: var(--color-text); font-size: var(--text-sm);
}
.hinweis svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.hinweis--warnung { background: #fff7e6; border-left: 4px solid var(--color-warning); }
:root[data-theme="kontrast"] .hinweis--warnung { background: #1a1a00; }

/* ══════════════════════════════════════════════════════════════════════
   RASTER (Lars 26.09.2026: „Ausrichtung am Raster und Mindestgröße")
   Familienraster wie DigitalPainters/AssistPlay: 10 Spalten × 6 Reihen
   unter der Kopfleiste, gleiche Lücke überall. Jedes Bedienelement belegt
   mindestens EINE ganze Zelle. Innere Raster (Werkzeuge, Optionen, Pfeile)
   haben dieselbe Lücke und gleich breite Spuren — ihre Kanten liegen
   deshalb genau auf den Zellkanten der Seite.
   Hochformat (iPad hochkant, Telefon): 4 Spalten × 8 Reihen.
   ══════════════════════════════════════════════════════════════════════ */
.raster {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: var(--pt-luecke); padding: var(--pt-luecke);
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
}
.raster .pt-btn { min-width: 0; min-height: 0; }

/* ── Fotokiste ──
   Spalten 1–2: Foto machen / Fotos hinzufügen / Ordner (Reihen 1–3),
   Hinweis „bleibt auf dem Gerät" (Reihen 5–6).
   Spalten 3–10: Fotos je 2 × 2 Zellen in Reihen 1–4 (8 je Seite),
   Reihe 6: Vorige Seite | Seite x von y | Nächste Seite. */
.kiste__aktionen { grid-column: 1 / 3; grid-row: 1 / 7; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.kiste__aktionen > .hinweis { grid-row: 5 / 7; margin: 0; overflow: hidden; font-size: var(--text-xs); }
.kiste__rechts { grid-column: 3 / 11; grid-row: 1 / 7; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.kiste__raster { grid-column: 1 / 9; grid-row: 1 / 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.kiste__foto { padding: 0; background: var(--pt-buehne); border-width: 3px; }
.kiste__foto img { width: 100%; height: 100%; object-fit: cover; }
.kiste__leer { grid-column: 1 / 9; grid-row: 1 / 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6); border: 3px dashed var(--color-border-strong); border-radius: var(--radius-xl); min-height: 0; overflow: hidden; }
.kiste__leer svg { width: 64px; height: 64px; color: var(--color-text-muted); }
.blaettern { grid-column: 1 / 9; grid-row: 6; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.blaettern > :nth-child(1) { grid-column: 1 / 3; }
.blaettern > :nth-child(2) { grid-column: 3 / 7; }
.blaettern > :nth-child(3) { grid-column: 7 / 9; }
.blaettern__stand { display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-weight: var(--font-bold); }

/* ── Bearbeiten ──
   Spalten 1–2: Werkzeuge (Reihen 1–4), Rückgängig (Reihe 5), Fotokiste (6)
   Spalten 3–8: Bühne (Reihen 1–5), Weg + Stand (Reihe 6, nicht klickbar)
   Spalten 9–10: Optionen als 2 × 5 Zellen (Reihen 1–5), Fertig (6) */
.ed__werkzeuge { grid-column: 1 / 3; grid-row: 1 / 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.ed__werkzeuge .pt-btn { font-size: var(--text-xs); }
.ed__buehne { grid-column: 3 / 9; grid-row: 1 / 6; position: relative; min-height: 0; overflow: hidden; background: var(--pt-buehne); border-radius: var(--radius-lg); }
.ed__optionen { grid-column: 9 / 11; grid-row: 1 / 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.ed__optionen .o-voll { grid-column: span 2; }
.ed__optionen .o-halb { grid-column: span 1; font-size: var(--text-xs); }
.ed__optionen .o-hinweis { grid-column: 1 / 3; grid-row: 5; margin: 0; overflow: hidden; font-size: var(--text-xs); line-height: 1.35; }
.ed__leiste { display: contents; }
.ed__rueckgaengig { grid-column: 2; grid-row: 5; }   /* 10. Zelle neben den 9 Werkzeugen */
.ed__zurueck { grid-column: 1 / 3; grid-row: 6; }
.ed__weg { grid-column: 3 / 9; grid-row: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none; overflow: hidden; min-height: 0; }
.ed__weg-pfad { font-size: var(--text-sm); color: var(--color-text-muted); }
.ed__weg-titel { font-family: var(--font-headline); font-weight: var(--font-bold); font-size: var(--text-xl); color: var(--color-text); }
.ed__weg-stand { font-size: var(--text-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.ed__fertig { grid-column: 9 / 11; grid-row: 6; }

/* Pfeile: eigenes Zellenraster über der Bühne (6 × 5 wie die Bühne selbst) */
.pfeilraster { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; gap: var(--pt-luecke); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
.randpfeil { pointer-events: auto; min-width: 0; min-height: 0; background: rgba(255,255,255,0.92); color: #111; border: 3px solid #111; }
.randpfeil svg { width: 44px; height: 44px; }
.randpfeil[disabled] { opacity: 0.25; }
.randpfeil--oben   { grid-column: 3 / 5; grid-row: 1; }
.randpfeil--unten  { grid-column: 3 / 5; grid-row: 5; }
.randpfeil--links  { grid-column: 1; grid-row: 3; }
.randpfeil--rechts { grid-column: 6; grid-row: 3; }

/* Nummern auf den Gesichtern: eine ganze Zelle groß, durchsichtig, damit
   das Gesicht darunter zu sehen bleibt. --zelle-b/-h setzt bearbeiten.js. */
.maskenknopf {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  width: var(--zelle-b, 96px); height: var(--zelle-h, 96px); min-width: 0; min-height: 0; padding: 0;
  background: rgba(255,255,255,0.12); color: #111; border: 4px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}
.maskenknopf .pt-btn__text { background: #fff; border: 2px solid #111; border-radius: var(--radius-full); min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); }
.maskenknopf.is-gewaehlt { border-color: var(--pt-rahmen); }
.maskenknopf.is-gewaehlt .pt-btn__text { background: var(--pt-rahmen); }

/* ── Speichern und Kamera: Vorschau Spalten 1–8, Knöpfe 9–10 (6 Reihen) ── */
.sp__vorschau { grid-column: 1 / 9; grid-row: 1 / 7; position: relative; min-height: 0; background: var(--pt-buehne); border-radius: var(--radius-lg); overflow: hidden; }
.sp__vorschau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sp__knoepfe { grid-column: 9 / 11; grid-row: 1 / 7; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--pt-luecke); min-height: 0; }
.sp__knoepfe > .hinweis { margin: 0; overflow: hidden; font-size: var(--text-xs); }

/* ── Hochformat: 4 Spalten × 8 Reihen ── */
@media (max-aspect-ratio: 4/5), (max-width: 700px) and (orientation: portrait) {
  .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); }

  .kiste__aktionen { grid-column: 1 / 5; grid-row: 1; grid-template-rows: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* drei Knöpfe auf vier Zellen: „Foto machen“ doppelt breit; ohne Ordner-Knopf (iPad) beide doppelt */
  .kiste__aktionen.zwei > .pt-btn:first-child { grid-column: span 2; }
  .kiste__aktionen > .hinweis { display: none; }
  .kiste__rechts { grid-column: 1 / 5; grid-row: 2 / 9; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); }
  .kiste__raster { grid-column: 1 / 5; grid-row: 1 / 7; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .kiste__leer { grid-column: 1 / 5; grid-row: 1 / 7; }
  .blaettern { grid-column: 1 / 5; grid-row: 7; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blaettern > :nth-child(1) { grid-column: 1; }
  .blaettern > :nth-child(2) { grid-column: 2 / 4; }
  .blaettern > :nth-child(3) { grid-column: 4; }

  /* Reihen 1–2: 6 Werkzeuge + Rückgängig + Fotokiste; 3–5: Bühne;
     6–8: Optionen (4 × 3, die letzten zwei Zellen gehören „Fertig“) */
  /* Bearbeiten hochkant: 4 × 9. Reihen 1–3: 9 Werkzeuge + Rückgängig +
     Fotokiste; 4–6: Bühne; 7–9: Optionen (10 Zellen) + Fertig (2 Zellen) */
  .ed.raster { grid-template-rows: repeat(9, minmax(0, 1fr)); }
  .ed__werkzeuge { grid-column: 1 / 5; grid-row: 1 / 4; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .ed__buehne { grid-column: 1 / 5; grid-row: 4 / 7; }
  .ed__optionen { grid-column: 1 / 5; grid-row: 7 / 10; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .ed__optionen .o-hinweis { display: none; }
  .ed__rueckgaengig { grid-column: 2; grid-row: 3; }
  .ed__zurueck { grid-column: 3; grid-row: 3; }
  .ed__weg { display: none; }
  .ed__fertig { grid-column: 3 / 5; grid-row: 9; }
  .pfeilraster { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .randpfeil--oben   { grid-column: 2 / 4; grid-row: 1; }
  .randpfeil--unten  { grid-column: 2 / 4; grid-row: 3; }
  .randpfeil--links  { grid-column: 1; grid-row: 2; }
  .randpfeil--rechts { grid-column: 4; grid-row: 2; }

  .sp__vorschau { grid-column: 1 / 5; grid-row: 1 / 6; }
  .sp__knoepfe { grid-column: 1 / 5; grid-row: 6 / 9; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Foto auf der Bühne: Canvas wird per JS eingepasst und mittig gesetzt. */
.buehne__canvas { position: absolute; display: block; image-rendering: auto; }
.buehne__lage { position: absolute; pointer-events: none; }

/* Zuschneide-Rahmen: alles außerhalb abgedunkelt (über den Schatten). */
.rahmen {
  position: absolute; pointer-events: none;
  border: 3px solid var(--pt-rahmen);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
}
.rahmen::before, .rahmen::after { content: ""; position: absolute; border: 1px dashed rgba(255,255,255,0.6); }
.rahmen::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-top: 0; border-bottom: 0; }
.rahmen::after { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-left: 0; border-right: 0; }

/* Gesichts-Markierungen */
.maske { position: absolute; pointer-events: none; border: 3px dashed #fff; outline: 2px solid rgba(0,0,0,0.5); border-radius: 6px; }
.maske.is-aus { border-color: var(--pt-maske); border-style: dotted; }
.maske.is-gewaehlt { border: 4px solid var(--pt-rahmen); }
/* Stelle wählen: 3 × 3 Felder über dem Foto */
.wahl { position: absolute; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; }
.wahl__feld { min-width: 0; min-height: 0; background: rgba(255,255,255,0.08); border: 3px solid rgba(255,255,255,0.85); color: #fff; font-size: var(--text-2xl); text-shadow: 0 1px 3px #000; border-radius: var(--radius-md); }
.wahl__feld:hover { background: rgba(255,212,0,0.25); border-color: var(--pt-rahmen); }

/* Kamera */
.kamera__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Lesetexte (Hilfe, Einstellungen): blättern mit großen Knöpfen */
.lese { display: grid; grid-template-columns: 1fr var(--pt-ziel); gap: var(--pt-luecke); flex: 1; min-height: 0; }
.lese__text { overflow: hidden; min-height: 0; padding-right: var(--space-2); }
.lese__text > * + * { margin-top: var(--space-3); }
.lese__text ul { padding-left: var(--space-5); }
.lese__text li + li { margin-top: var(--space-1); }
.lese__pfeile { display: flex; flex-direction: column; gap: var(--pt-luecke); }
.lese__pfeile .pt-btn { flex: 1; }

.einst { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.einst__titel { font-weight: var(--font-bold); }
.einst__wahl { display: flex; gap: var(--pt-luecke); flex-wrap: wrap; }
.einst__wahl .pt-btn { flex: 1 1 120px; }

/* Dialog */
.pt-dialog { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); padding: var(--space-4); }
.pt-dialog__kasten { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-xl); padding: var(--space-6); max-width: 640px; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-xl); border: 2px solid var(--color-border-strong); }
.pt-dialog__text { font-size: var(--text-lg); color: var(--color-text); }
.pt-dialog__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pt-luecke); }
.pt-dialog__knoepfe .pt-btn { min-height: 96px; }

/* Kurzmeldung */
.pt-meldung { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; background: var(--color-text); color: var(--color-bg); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font-weight: var(--font-bold); box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); text-align: center; }

/* Arbeit läuft (Gesichtssuche) */
.laeuft { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; font-weight: var(--font-bold); font-size: var(--text-lg); text-align: center; padding: var(--space-4); }

/* Hinweis „Als App installieren" (js/pwa-install.js) */
.pwa-karte {
  position: fixed; right: 16px; bottom: 16px; z-index: 250;
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
}
.pwa-karte__titel { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-headline); font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--color-primary-dark); }
.pwa-karte__titel svg { width: 24px; height: 24px; }
:root[data-theme="kontrast"] .pwa-karte__titel { color: var(--color-primary); }
.pwa-karte p { font-size: var(--text-sm); }
.pwa-karte__ios { background: var(--color-surface-alt); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); }
.pwa-karte__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pt-luecke); }
.pwa-update { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 251; flex-direction: row; padding: var(--space-2) var(--space-5); box-shadow: var(--shadow-lg); }

/* Einstellungen auf dem Raster (js/screens/einstellungen.js setzt die Lage) */
.ei-zelle { grid-column: var(--qc); grid-row: var(--qr); min-width: 0; min-height: 0; }
.ei-label { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-2); font-weight: var(--font-bold); font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface-alt); border-radius: var(--radius-lg); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; overflow: hidden; }
.ei-text { margin: 0; overflow: hidden; font-size: var(--text-xs); align-items: center; }
.ei-titel { display: flex; align-items: center; justify-content: center; margin: 0; }
@media (max-aspect-ratio: 4/5), (max-width: 700px) and (orientation: portrait) {
  .ei-zelle { grid-column: var(--hc); grid-row: var(--hr); }
  .ei-titel { display: none; }
}

/* Knöpfe mit Beispielbild: Bild oben (füllt die Zelle), Wort darunter.
   Das Symbol tritt zurück, solange das Bild da ist. */
.pt-btn.hat-bild { padding: 4px 4px 3px; gap: 2px; justify-content: flex-start; }
.pt-btn.hat-bild > svg { display: none; }
.pt-btn__bild { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; border-radius: calc(var(--radius-lg) - 4px); background: var(--pt-buehne); }
.pt-btn.hat-bild .pt-btn__text { flex: 0 0 auto; line-height: 1.15; }
.pt-btn.hat-bild.is-active { box-shadow: inset 0 0 0 4px var(--color-primary); }
.pt-btn.hat-bild.is-active .pt-btn__bild { outline: 3px solid var(--pt-rahmen); outline-offset: -3px; }
.pt-btn.hat-bild[disabled] .pt-btn__bild { filter: grayscale(1); }

/* Löschen in der Fotokiste (kiste.js) */
.kiste__foto.is-loeschen { border-color: var(--color-error); border-width: 4px; }
.kiste__foto.is-loeschen img { opacity: 0.75; }
.kiste__loeschmarke { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-error); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.kiste__loeschmarke svg { width: 28px; height: 28px; }
/* „Foto löschen“ im Bearbeiten steht unten in der Optionsspalte, fern von den Werkzeugen */
.ed__optionen .o-unten { grid-row: 4; }
@media (max-aspect-ratio: 4/5), (max-width: 700px) and (orientation: portrait) { .ed__optionen .o-unten { grid-row: auto; } }

/* ══════════════════════════════════════════════════════════════════════
   HANDY (Lars 26.09.2026, Bildschirmfoto iPhone: „Layout fixen. Soll
   responsivität haben“). Auf dem Telefon bleiben für 8 Reihen hochkant
   bzw. 6 Reihen quer nur 20–55 px je Zelle — Symbol + zweizeilige
   Beschriftung passten nicht, Wörter wurden mitten getrennt („hinzufü-“).
   Tablets und Computer sind davon nicht betroffen (keine der Bedingungen).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px), (max-height: 560px) {
  :root { --pt-luecke: 6px; }
  .raster { padding: 6px; }
  .pt-btn { padding: 3px; gap: 2px; font-size: var(--text-xs); line-height: 1.1; }
  .pt-btn svg { width: 22px; height: 22px; }
  .pt-btn__text { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
  .pt-btn.hat-bild { padding: 3px 3px 2px; }
  .ed__werkzeuge .pt-btn, .ed__optionen .o-halb { font-size: var(--text-xs); }
  .kiste__leer { padding: var(--space-3); gap: var(--space-2); }
  .kiste__leer svg { width: 44px; height: 44px; }
  .kiste__leer h2 { font-size: var(--text-xl); }
  .kiste__leer p { font-size: var(--text-sm); }
  .ed__weg-pfad { display: none; }
  .ed__weg-titel { font-size: var(--text-base); }
  .ed__weg-stand { font-size: var(--text-xs); }
  .randpfeil svg { width: 30px; height: 30px; }
  .maskenknopf .pt-btn__text { min-width: 34px; height: 34px; font-size: var(--text-base); }

  /* Kopf und Fuß schlanker: jede Zeile Höhe gehört dem Raster */
  .statusbar { padding-top: 2px; padding-bottom: 2px; }
  .app-footer { padding: 4px var(--space-3); gap: 2px var(--space-3); line-height: 1.3; }
  .app-footer__powered > span { display: none; }   /* „Entwickelt von“ — das Logo bleibt */
  .app-footer__logo { height: 16px; }
}
/* Telefon quer: der Hinweis „bleibt auf dem Gerät“ steht schon in der Hilfe */
@media (max-height: 560px) {
  .app-footer__privacy { display: none; }
}

/* Telefon hochkant: Fotokiste mit zwei Knopfreihen (je Knopf 2 Zellen breit),
   darunter 2 × 2 Fotos und die Blätterzeile. */
@media (max-width: 560px) and (orientation: portrait) {
  .kiste__aktionen { grid-row: 1 / 3; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .kiste__aktionen .pt-btn, .kiste__aktionen.zwei > .pt-btn:first-child { grid-column: span 2; }
  .kiste__aktionen .pt-btn { flex-direction: row; gap: 6px; font-size: var(--text-sm); }
  .kiste__rechts { grid-row: 3 / 9; grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .kiste__raster { grid-row: 1 / 6; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .kiste__leer { grid-row: 1 / 7; }
  .blaettern { grid-row: 6; }
}

/* Einzelne Zellen (Werkzeuge, halbe Optionen): Schrift an der Zellbreite
   ausrichten, damit „Zuschneiden“, „Hintergrund“, „Rückgängig“ ganz passen. */
@media (max-width: 560px) and (orientation: portrait) {
  .ed__werkzeuge .pt-btn, .ed__rueckgaengig, .ed__optionen .o-halb, .blaettern .pt-btn { font-size: max(10px, min(var(--text-xs), 3.2vw)); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .ed__werkzeuge .pt-btn, .ed__rueckgaengig, .ed__optionen .o-halb { font-size: max(9.5px, min(var(--text-xs), 1.4vw)); }
  .ed__rueckgaengig svg { width: 18px; height: 18px; }
  .ed__weg-titel { font-size: var(--text-sm); }
}

/* Sehr flache Querlage (iPhone SE quer, ~320 px Höhe): Symbol neben das
   Wort, sonst passt beides nicht in eine 35-px-Reihe. Einzelzellen ohne
   Beispielbild zeigen nur das Wort. */
@media (max-height: 420px) and (orientation: landscape) {
  .pt-btn:not(.hat-bild) { flex-direction: row; gap: 4px; }
  .pt-btn:not(.hat-bild) svg { width: 18px; height: 18px; }
  .ed__werkzeuge .pt-btn:not(.hat-bild) svg, .ed__rueckgaengig svg, .ed__optionen .o-halb:not(.hat-bild) svg { display: none; }
  .sp__knoepfe .pt-btn { font-size: max(10px, min(var(--text-xs), 1.6vw)); }
  .statusbar__brand-logo { width: 28px; height: 28px; }
  .ed__optionen .o-hinweis { display: none; }   /* zu flach zum Lesen; der Titel unten sagt es */
}