/* =====================================================================
   css/aufnahme.css — das schwebende Aufnahme-Fenster (js/aufnahme.js,
   Paket A der Vorlesungsaufnahme, docs/AUFNAHME-A-2026-10-12.md).

   EINE Zeile (Punkt, Zeit, Pegel, Name/Kurs/Sprache, Knöpfe), darunter
   ein kleiner Satz (Preis, Fortschritt, Ergebnis) — Muster der
   Podcast-Leiste (docs/PODCAST-LEISTE-2026-10-10.md): kompakt, Knöpfe
   aus .pp-btn.slim. Das Fenster hängt am <body> (es überlebt jeden
   Seitenwechsel) und steht über den angedockten Fenstern (130), unter
   Kontextmenüs (140) und Portal-Dialogen (150).

   Tokens --pp-*, Abstände aus dem 4-px-Raster (--pp-sp-*), Schrift aus
   der Skala (--pp-fs-*); --pp-accent nur als Fläche, nie als Schrift
   (docs/SKALA-2026-09-05.md).
   ===================================================================== */
/* EINE Breite in allen Zuständen (WebKit-Abnahme 12.10.2026, S3-1): Ohne
   sie schrumpfte das Fenster beim Start von 571 auf 422 px (Name, Kurs und
   Sprache weichen dem Titel), und weil die Lage die linke Kante hielt,
   sprang der Abstand zum rechten Rand von 16 auf 165 px. 36rem = 576 px
   fasst die breiteste Zeile (bereit, gemessen 571 px); passt etwas nicht,
   bricht die Zeile um (flex-wrap), das Fenster wird nicht breiter. */
.au-fenster {
  position: fixed; z-index: 135; left: 0; top: 0;
  box-sizing: border-box;
  width: 36rem;
  max-width: calc(100vw - var(--pp-sp-4));
  display: flex; flex-direction: column; gap: var(--pp-sp-1);
  padding: var(--pp-sp-2) var(--pp-sp-3);
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-line-2); border-radius: var(--pp-sp-3);
  box-shadow: var(--pp-lift);
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein); line-height: var(--pp-lh-eng);
  cursor: grab;
  touch-action: none;
}
.au-fenster button, .au-fenster input, .au-fenster select, .au-fenster a { cursor: auto; touch-action: manipulation; }
.au-fenster button { cursor: pointer; }
.au-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pp-sp-2); }

/* Der Punkt: grau in der Ruhe, rot während der Aufnahme. Der Zustand ist
   zusätzlich eine FORM (der Ring beim Pausieren), nicht nur eine Farbe. */
.au-punkt {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pp-text-3);
}
.au-fenster[data-phase="nimmtAuf"] .au-punkt { background: var(--pp-err); }
.au-fenster[data-phase="pausiert"] .au-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--pp-err); }
.pp-anim .au-fenster[data-phase="nimmtAuf"] .au-punkt { animation: au-puls 1.6s ease-in-out infinite; }
@keyframes au-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .pp-anim .au-fenster[data-phase="nimmtAuf"] .au-punkt { animation: none; }
}

.au-zeit {
  font-family: var(--pp-mono); font-weight: 500; font-size: var(--pp-fs-text);
  font-variant-numeric: tabular-nums; min-width: 5ch;
}
/* Der Pegel: acht Balken, nur mit Animationen (js/aufnahme.js rendert ihn
   sonst gar nicht). Skaliert wird per transform — kein Relayout je Takt. */
.au-pegel { display: inline-flex; align-items: flex-end; gap: 2px; height: var(--pp-sp-4); }
.au-pegel i {
  display: block; width: 3px; height: var(--pp-sp-4); border-radius: 1px;
  background: var(--pp-accent); transform-origin: bottom; transform: scaleY(.08);
}
.pp-anim .au-pegel i { transition: transform .12s linear; }

.au-name {
  width: 14em; min-width: 0;
  padding: var(--pp-sp-1) var(--pp-sp-2);
  font: inherit; color: var(--pp-text);
  background: var(--pp-bg-2); border: 1px solid var(--pp-line); border-radius: var(--pp-sp-1);
}
.au-kurs { max-width: 12em; }
.au-titel {
  max-width: 16em; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--pp-text-2);
}
.au-knoepfe { display: inline-flex; align-items: center; gap: var(--pp-sp-1); margin-left: auto; }
.au-zu {
  min-width: var(--pp-sp-8); height: var(--pp-sp-8);
  border: 0; background: transparent; color: var(--pp-text-2); border-radius: var(--pp-sp-1);
}
.au-zu:hover { background: var(--pp-surface-2); color: var(--pp-text); }

.au-satz { color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.au-satz[data-art="fehler"] { color: var(--pp-err); }
.au-satz[data-art="ok"] { color: var(--pp-ok); }
.au-satz a { color: var(--pp-accent-2); }

/* Finger: 44 px Zielgröße. */
@media (pointer: coarse) {
  .au-fenster .pp-btn, .au-zu { min-height: 44px; }
  .au-zu { min-width: 44px; }
}
/* Telefon: über die ganze Breite, der Name auf eigener Zeile. */
@media (max-width: 560px) {
  .au-fenster { max-width: calc(100vw - var(--pp-sp-4)); }
  .au-name { flex: 1 1 100%; width: auto; }
}
/* Unter 640 px UNTEN statt oben (S3-3; js/aufnahme.js klemmen setzt
   data-lage): volle Breite minus 2 × 16 px, 16 px über dem unteren Rand
   (plus der Sicherheitszone des Geräts). Oben stand es an der Kopfkante
   des Öffnens und deckte nach dem Scrollen die Unterreiter ab. Gezogen
   wird hier nicht. */
.au-fenster[data-lage="unten"] {
  left: var(--pp-sp-4); right: var(--pp-sp-4); top: auto;
  bottom: calc(var(--pp-sp-4) + env(safe-area-inset-bottom, 0px));
  width: auto; max-width: none;
  cursor: auto;
}

/* In der laufenden Prüfung (web1014/WO3; js/aufnahme.js pruefungLage):
   nur Punkt und Zeit, klein in der Kopfleiste der Prüfung neben ihrem
   letzten Knopf — über keinem Bedienelement (vorher deckte das Fenster am
   Telefon den Fuß mit OVERVIEW und SUBMIT, oben die Zeitbox). Keine
   Knöpfe, kein Ziehen; ohne laufende Aufnahme (bereit, fertig) nichts. */
.au-fenster[data-lage="pruefung"] {
  width: auto; max-width: none; right: auto; bottom: auto;
  padding: 3px 10px; border-radius: 999px; gap: 0; cursor: default;
  box-shadow: none; pointer-events: none;
}
.au-fenster[data-lage="pruefung"] .au-zeile { flex-wrap: nowrap; gap: 6px; }
.au-fenster[data-lage="pruefung"] .au-zeile > :not(.au-punkt):not(.au-zeit),
.au-fenster[data-lage="pruefung"] .au-satz,
.au-fenster[data-lage="pruefung"] .au-ios,
.au-fenster[data-lage="pruefung"] .au-zu { display: none; }
.au-fenster[data-lage="pruefung"] .au-zeit { font-size: var(--pp-fs-klein); min-width: 0; }
.au-fenster[data-lage="pruefung"][data-phase="bereit"],
.au-fenster[data-lage="pruefung"][data-phase="fertig"] { display: none; }

/* ---- Hintergrund und gesperrter Bildschirm (12.10.2026 abends,
   docs/AUFNAHME-A-2026-10-12.md 9) ---- */

/* Unterbrochen: der Punkt als Ring wie in der Pause, aber grau — es nimmt
   gerade nichts auf. „Aufnahme fortsetzen" ist der große Knopf der Zeile
   (ein Klick, und iOS bekommt seine Geste). */
.au-fenster[data-phase="unterbrochen"] .au-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--pp-text-3); }
.au-fortsetzen { font-size: var(--pp-fs-text); padding: var(--pp-sp-2) var(--pp-sp-4); min-height: 40px; }

/* Der ehrliche Satz für iPhone und iPad (nur dort gerendert). */
.au-ios { color: var(--pp-text-2); font-size: var(--pp-fs-mini); }

/* ---- Der Chip in der Kopfzeile (R3, 13.10.2026,
   docs/APP-R3-AUFNAHME-CHIP-2026-10-13.md) ----
   Das zugeklappte Fenster: ein Kästchen in der Gestalt des Jobs-Chips
   daneben (Höhe 30, Rand, Radius — css/prepp.css .pp-jobs-laeuft), ein
   Punkt und die Zeit. Der Zustand ist FARBE UND FORM: rot gefüllt (nimmt
   auf), gelb gefüllt (pausiert), roter Ring (unterbrochen), grauer Ring
   mit Text (wird verarbeitet). Pulsieren nur unter .pp-anim — der EINE
   Schalter (docs/ANIMATIONEN.md). */
.au-fenster[hidden] { display: none; }
#pp-au-wirt { position: relative; display: inline-flex; align-items: center; min-width: 0; }
#pp-au-wirt:empty { display: none; }
.au-chip {
  position: relative;
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-width: 32px; height: 30px; padding: 0 8px;
  border: 1px solid var(--pp-err); background: var(--pp-err-tint); border-radius: 6px;
  font-family: inherit; color: var(--pp-text);
  cursor: pointer;
}
/* 44 px Ziel ohne 44 px Kasten: die Trefferfläche reicht 7 px über die
   30er Höhe hinaus. */
.au-chip::after { content: ""; position: absolute; inset: -7px -4px; }
.au-chip:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
.au-chip-punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--pp-err); }
.au-chip-zeit {
  font-family: var(--pp-mono); font-weight: 500; font-size: var(--pp-fs-mini);
  font-variant-numeric: tabular-nums;
}
.au-chip-zeit:empty, .au-chip-txt:empty { display: none; }
.au-chip-txt { font-size: var(--pp-fs-mini); color: var(--pp-text-2); white-space: nowrap; }
.au-chip[data-art="pause"] { border-color: var(--pp-warn); background: var(--pp-warn-tint); }
.au-chip[data-art="pause"] .au-chip-punkt { background: var(--pp-warn); }
.au-chip[data-art="unterbrochen"] .au-chip-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--pp-err); }
.au-chip[data-art="verarbeitet"] { border-color: var(--pp-line); background: var(--pp-bg); }
.au-chip[data-art="verarbeitet"] .au-chip-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--pp-text-3); }
.pp-anim .au-chip[data-art="auf"] .au-chip-punkt { animation: au-puls 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pp-anim .au-chip[data-art="auf"] .au-chip-punkt { animation: none; }
}
/* Telefon und Touch: ein echtes 44er Ziel wie der Jobs-Chip (dieselbe
   Abfrage); der Text „wird verarbeitet" geht, der Ring bleibt. */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  .au-chip { min-width: 44px; height: 44px; }
  .au-chip::after { inset: 0; }
}
@media (max-width: 700px) {
  .au-chip-txt { display: none; }
}
/* Der rote Punkt (MITSCHRIFT-M1, 14.10.2026, js/aufnahme.js punktZu):
   nach PUNKT_MS nur noch der Punkt — kein Kasten, keine Zeit; aufgeklappt
   stehen Pause/Weiter und Stopp daneben (.au-chip-akt). Die Kopfzeile
   bleibt einzeilig: zu ist er schmaler als vorher, offen so breit wie der
   alte Chip plus zwei 30er Knöpfe. */
.au-chip[data-punkt] { min-width: 30px; padding: 0; border-color: transparent; background: transparent; }
.au-chip[data-punkt] .au-chip-zeit, .au-chip[data-punkt] .au-chip-txt { display: none; }
.au-chip[data-punkt] .au-chip-punkt { width: 12px; height: 12px; }
.au-chip-akt { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.au-chip-akt[hidden], .au-chip-akt:empty { display: none; }
.au-chip-k {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--pp-line-2); background: var(--pp-surface); color: var(--pp-text);
  font-family: inherit; font-size: var(--pp-fs-mini); line-height: 1;
}
.au-chip-k[data-au-chip-akt="stopp"] { color: var(--pp-err); }
/* rel1018-R5 (W2-08): das Wort neben dem Zeichen („■ Stopp"). In der
   breiten Kopfzeile zwischen 641 und 1100 px bleibt es weg — dort stehen
   die Knöpfe IN der Zeile, und sie soll einzeilig bleiben (der Name steht
   dann im title). Am Telefon stehen sie im Feld unter dem Punkt. */
.au-chip-k { gap: 5px; }
.au-chip-kt { font-weight: 600; white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1100px) {
  .au-chip-kt { display: none; }
}
@media (pointer: coarse) and (max-height: 500px) and (max-width: 1200px) {
  .au-chip-kt { display: inline; }
}
.au-chip-k:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
/* (Der vierte Eintrag „Mitschrift beenden …" — .au-chip-vl, MS1 — ist mit
   UI1015-U5 entfallen: Den Knopf zum Beenden gibt es nicht mehr.) */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  .au-chip[data-punkt] { min-width: 44px; }
  .au-chip-k { min-width: 44px; height: 44px; }
}
/* sim1016-R6 (A1-02, A7-02): Am Telefon stehen die aufgeklappten Knöpfe
   (Fenster · ❚❚ · ■, je 44 px) nicht IN der Statuszeile, sondern in einem
   kleinen Feld UNTER dem Punkt — in der Zeile schoben sie „?" aus dem Bild
   (390 px: 4 px Überlauf, „?" unter ☰; 360 px: ☰ unter dem Stopp-Knopf).
   Die Zeile wird damit nie breiter, als sie mit dem Punkt allein ist.
   Dieselbe Abfrage wie die Statuszeile (css/prepp.css, H1). */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) and (max-width: 1200px) {
  .au-chip-akt {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; margin: 0;
    padding: 4px; background: var(--pp-surface); border: 1px solid var(--pp-line-2);
    border-radius: 10px; box-shadow: var(--pp-lift);
  }
}
/* Der Minimieren-Knopf im Fenster: Gestalt des Schließen-Kreuzes. */
.au-mini { font-weight: 600; }