/* Handy und Tablet (VF-08, 14.10.2026). Die Videofabrik ist auf dem Handy voll bedienbar.
   Umbruchpunkte: bis 480 px Handy (eine Spalte, untere Leiste), 481 bis 900 px Tablet, ab 901 px bleibt alles wie bisher.
   Fingerbedienung (pointer: coarse) bekommt die groesseren Tippziele auch auf breiten Bildschirmen.
   Tippziele mindestens 44 x 44 px, Eingabefelder mindestens 16 px Schrift: darunter zoomt Safari auf dem iPhone beim
   Antippen in die Seite. Farben kommen nur aus basis.css. Diese Datei wird vor den Gestaltungen geladen. */

/* ------------------------------------------------------------ Schmale Fenster und Fingerbedienung */
@media (max-width: 900px), (pointer: coarse) {
  .feld, select, textarea,
  input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="number"], [type="date"], [type="time"], [type="url"], [type="tel"], :not([type])) {
    font-size: max(16px, var(--groesse-4));
  }
  .knopf, .chip, .ui-sprache button, summary { min-height: 44px; }
  .knopf.klein { min-height: 44px; min-width: 44px; }
  .boxen-anzeige > summary { min-height: 44px; }
  .marke { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  input[type="range"] { min-height: 44px; }
  /* Kontrollkaestchen und Schalter: die ganze Zeile mit ihrer Beschriftung ist das Tippziel. */
  label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }
  #inhalt label.zeile:has(> input:is([type="checkbox"], [type="radio"])) { flex-wrap: nowrap; align-items: center; }
  /* Textlinks im Fliesstext: Innenabstand oben und unten vergroessert die Tippflaeche, ohne die Zeilen
     auseinanderzuschieben (bei Inline-Elementen wirkt er nicht auf die Zeilenhoehe). */
  #inhalt :is(p, li) > a:not(.knopf), .anmeldung p > a { padding-block: 14px; }
  .overview-quelle { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------ Video im Fenster halten (Handy, Tablet, Quer gehaltenes Handy) */
@media (max-width: 900px) {
  /* Hochkant-Videos hoechstens 70 Prozent der Bildschirmhoehe, damit Knoepfe darunter sichtbar bleiben. */
  .spieler:not(.quer) { width: min(100%, calc(70vh * 9 / 16)); width: min(100%, calc(70svh * 9 / 16)); }
}

/* ------------------------------------------------------------ Neues Video: KI-Anzeige im gestapelten Kartenkopf */
/* Unter 761 px steht der Kartenkopf senkrecht (bausteine.css). Die Grundbreite von 220 px der KI-Anzeige wirkte dort
   als Hoehe und schob das Themenfeld aus dem ersten Bild. */
@media (max-width: 760px) {
  .ki-status-neu-kopf .ki-status { flex: 0 0 auto; justify-content: flex-start; }
  .ki-status-neu-kopf .ki-status-text { text-align: left; }
}

/* ------------------------------------------------------------ Untere Navigation (nur Handy) */
.unten-navi, .denkbox-klappe, .handy-verbessern { display: none; }
@media (max-width: 480px) {
  .unten-navi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-1);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--flaeche-fenster); border-top: 1px solid var(--rand-stark); box-shadow: var(--schatten-klein);
  }
  .unten-navi button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 44px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: var(--radius-klein);
    background: transparent; color: var(--text-2); font: inherit; font-size: var(--groesse-1); font-weight: 600;
    line-height: 1.15; text-align: center; overflow-wrap: anywhere; cursor: pointer;
  }
  .unten-navi button[data-ansicht]::before { width: 20px; height: 20px; margin: 0; opacity: .85; }
  .unten-navi button[aria-current="page"] { color: var(--akzent-hell); background: var(--akzent-flaeche); }
  .unten-navi button[aria-current="page"]::before { opacity: 1; }
  .unten-navi button:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }

  /* Kopfzeile: Marke, Zustandspunkt im Menueknopf und Menue. "Neu" steht jetzt unten. */
  .kopf .kopf-schmal .kopf-schmal-neu { display: none; }

  /* Platz fuer die Leiste und die Bedienleiste des iPhones darunter. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .band { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .aktualisierung, .diktat-vorschau { bottom: calc(76px + env(safe-area-inset-bottom)); }
  html .kopf :is(.lernstatus-panel, .betriebsstatus-panel) { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Die klebende Startaktion von Formularen sitzt ueber der Leiste. */
  form.tafel > .zeile.ende:has(> .knopf.haupt) { bottom: calc(76px + env(safe-area-inset-bottom)); }
  form.tafel > .zeile.ende > .knopf.haupt { flex: 1 1 auto; }

  /* Drehbuch: Pruefen und Erzeugen bleiben als feste Leiste ueber der Navigation greifbar. */
  .editor-fuss {
    position: fixed; left: 0; right: 0; bottom: calc(65px + env(safe-area-inset-bottom)); z-index: 44;
    display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 8px 12px;
    background: var(--flaeche-fenster); border-top: 1px solid var(--rand); box-shadow: var(--schatten-klein);
  }
  /* #inhalt: governance.css bricht Knopftexte mit ID-Gewicht ueberall um; hier nur an Leerzeichen. */
  #inhalt .editor-fuss > .knopf {
    flex: 1 1 0; min-width: 0; padding: 4px 6px; white-space: normal; line-height: 1.2;
    overflow-wrap: normal; word-break: normal; hyphens: manual;
  }
  .editor-fuss > .hinweis { flex-basis: 100%; order: -1; margin: 0; font-size: var(--groesse-1); }
  .editor-fuss > .hinweis:empty, .editor-fuss > [hidden] { display: none; }
  .editor-fuss > .handy-verbessern { display: inline-flex; }
  body:has(.editor-fuss) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

  /* Fertiger Film: Video zuerst, darunter Herunterladen, Teilen und Text, die Bearbeitungsknoepfe danach. */
  .detail:has(> .fertig-raster) { display: flex; flex-direction: column; }
  .detail:has(> .fertig-raster) > .fertig-raster { order: 1; }
  .detail:has(> .fertig-raster) > .film-aktionen { order: 2; margin-top: var(--abstand-4); }
  #inhalt .fertig-raster .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-3); }

  /* Stimme aufnehmen: grosse Knoepfe untereinander, der Startknopf hervorgehoben, der Pegel gut sichtbar. */
  .aufnahme-studio > .abschnitt.zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2); }
  .aufnahme-studio > .abschnitt.zeile > .knopf { min-height: 56px; font-size: var(--groesse-4); }
  .aufnahme-studio > .abschnitt.zeile > .knopf:last-child:not(:disabled) {
    background: var(--akzent-verlauf); color: var(--text-auf-akzent); border-color: transparent;
  }
  .studio-pegel { height: 28px; }

  /* Live-Boxen (Gedanken, Recherche, Agenten) sind zugeklappt, bis man sie oeffnet. */
  .denkbox-klappe { display: inline-flex; margin-left: auto; }
  .denkbox-kopf { flex-wrap: wrap; row-gap: var(--abstand-2); }
  .denkbox[data-zu="ja"] { min-height: 0; max-height: none; }
  .denkbox[data-zu="ja"] > :not(.denkbox-kopf) { display: none; }
}

/* ------------------------------------------------------------ Einzelne Tippziele aus der Vermessung */
@media (max-width: 900px), (pointer: coarse) {
  .boxen-anzeige-name { min-height: 44px; }
  .boxen-anzeige-zeile .knopf { min-height: 44px; min-width: 44px; }
  .titelbild-lernen-links a, a[href="#avatare"]:not(.knopf) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------ Projektschritte auf dem Handy */
/* Sechs grosse Karten (Thema bis Veroeffentlichen) schoben auf dem Handy Status und Video aus dem ersten Bild. Bis 480 px
   stehen sie kompakt in zwei Reihen: Zeichen ueber dem Namen, der Zustand bleibt fuer Vorleseprogramme lesbar und
   ist sonst an Haken, Farbe und Rahmen zu sehen. */
@media (max-width: 480px) {
  .projekt-ablauf { padding: var(--abstand-3); margin-bottom: var(--abstand-3); }
  .projekt-ablauf .projekt-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .projekt-ablauf .projekt-schritte > li { padding: 8px 4px; font-size: var(--groesse-2); text-align: center; }
  .projekt-ablauf .schritt-zahl { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto 4px; font-size: var(--groesse-1); line-height: 1; }
  .projekt-ablauf .projekt-schritte .prozess-haken { font-size: var(--groesse-3); }
  .projekt-ablauf .prozess-label { display: block; font-size: var(--groesse-1); overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
  .projekt-ablauf .projekt-schritte .prozess-status {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}