/* =====================================================================
   Feedback-Knopf und -Panel (js/feedback.js).

   Gehört wie die Speicherwarnung keiner der beiden Welten: Der Knopf muss
   im Portal wie in der Prüfungsansicht stehen. Deshalb feste Farben statt
   --pp-Tokens und keine Eingrenzung auf .pp-root oder .pp-mode.

   z-index 90: über der unteren Item-Leiste der Prüfung (50) und dem
   Punktekasten (60), aber UNTER allen Modals (100/120/150/200) — ein
   offener Dialog darf den Knopf verdecken, nie umgekehrt.
   Nachgemessen am 13.10.2026 (R4-N2) in WebKit am Abgabedialog der
   Prüfung: elementFromPoint über dem Knopf trifft .modal-bg, und sein
   Pixel fällt von 150 auf 79 = 0,45 · 150 + 0,55 · 20 — genau die
   Abdunklung rgba(20,30,45,.55). Er liegt also DARUNTER; dass er „darüber"
   wirke, lag am Bild (die 45 % Deckkraft lassen ihn hell aussehen).
   Wächter: test/verify-r4-n2-kleinkram.js (C).
   Die rechte obere Ecke ist tabu (.scorebox liegt dort fest) — der Knopf
   sitzt unten rechts.
   ===================================================================== */

.pp-fb-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #243247; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: .45; transition: opacity .15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
/* :focus-visible dazu (ns0929-p5): Mit der Tastatur erreicht, stand der
   Knopf mit seinem Ring bei 45 % Deckkraft — der Ring gemessen 2,31 : 1. */
.pp-fb-btn:hover, .pp-fb-btn.open, .pp-fb-btn:focus-visible { opacity: 1; }
.pp-fb-btn svg { width: 22px; height: 22px; }

/* In der Prüfungsansicht (body ohne .pp-mode) liegt unten die 54-px-Leiste
   .exam-bottom mit dem Abgabe-Knopf rechts — Knopf und Panel rücken darüber. */
body:not(.pp-mode) .pp-fb-btn { bottom: 70px; }
body:not(.pp-mode) .pp-fb-panel { bottom: 124px; }

/* ---- Auf dem Telefon steht der Knopf nicht mehr über dem Inhalt ----
   Befunde B59 und B61 des Rundgangs vom 04.09.2026, nachgemessen am
   06.09.2026 in WebKit bei 390 und 360 px, hell und dunkel, angemeldet.

   Gemessen wurde nicht EINE Lage, sondern ACHT — je Station über die
   ganze Seitenhöhe in 120-px-Schritten, und gezählt, an wie vielen
   Stellen ein 44 × 44-Feld ein Bedienelement verdeckt:

     Lage              Start Kurs Detail Prüfung Einsicht Training Material
     u-rechts (heute)   0/1  6/6   6/9    6/6     15/15   11/11    8/15
     u-rechts+54        1/1  6/6   6/9    1/6*    1/15    11/11    7/15
     u-links            0/1  5/6   6/9    6/6     15/15   11/11    7/15
     u-mitte            0/1  5/6   6/9    6/6     15/15   11/11    7/15
     o-rechts           1/1  6/6   9/9    0/6     15/15   11/11   15/15
     o-links            0/1  0/6   0/9    6/6     15/15    0/11    0/15
     o-links+56         0/1  0/6   0/9    0/6     15/15    0/11    0/15
     mitte-rechts       0/1  3/6   3/9    0/6      2/15   10/11    4/15
     (* darunter ein EINGABEFELD der laufenden Prüfung)

   Keine einzige Lage ist überall frei — ein 44-px-Knopf über einer
   390-px-Seite hat keinen Platz, der ihm gehört. Deshalb verlässt er
   auf dem Telefon die schwebende Schicht und geht dorthin, wo die
   Seite ohnehin ihre Nebenwege führt:

     Portal          → Fuß der Seitenleiste, also ☰ › Feedback (app.js)
     Einsicht        → eigene Kopfleiste neben dem Theme-Knopf (app.js)
     Prüfungsansicht → bleibt schwebend, aber IN der fixen Kopfleiste
                       links neben dem Wasserzeichen (0/6 gemessen)

   Die Prüfungswelt behält den Knopf, weil sie als einzige weder
   Seitenleiste noch eigene Kopfzeile mit Platz hat — und weil eine
   Meldung über eine kaputte Aufgabe genau dort entsteht.

   Das PANEL bleibt in beiden Welten, wo es ist: Es wird über
   PreppFeedback.open() geöffnet und hat sein eigenes ✕. */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1200px) {
  body.pp-mode .pp-fb-btn { display: none; }
  /* Der Knopf sitzt in der 56 px hohen `.exam-top` (z 50) rechts vom ✕
     (0…64 px) und links vom Wasserzeichen (ab ~150 px). Seine eigene
     Farbe #243247 ist der Ton der Leiste — er liest sich dort als Teil
     der Kopfzeile, nicht als schwebender Fleck. */
  body:not(.pp-mode) .pp-fb-btn {
    top: 6px; left: 66px; right: auto; bottom: auto;
    width: 44px; height: 44px; opacity: .85;
    box-shadow: none; background: transparent;
    border-color: rgba(255, 255, 255, .28);
  }
  /* W1-11 (qa1013): im LAUFENDEN Versuch nicht — dort ist die Kopfleiste
     die der Klausur, und eine Sprechblase darin liest sich als Chat. Die
     Marke setzt js/feedback.js (laufMarke). Das Panel bleibt über
     PreppFeedback.open() erreichbar. */
  body.pp-fb-lauf:not(.pp-mode) .pp-fb-btn { display: none; }
  body:not(.pp-mode) .pp-fb-panel {
    top: 60px; bottom: auto; left: 8px; right: 8px;
    width: auto; max-height: calc(100vh - 130px);
  }
  /* Das Panel füllt auf dem Telefon die Breite — 340 px in 360 px
     Fenster liessen 20 px Rand und schnitten die Kontextzeilen ab. */
  body.pp-mode .pp-fb-panel {
    left: 8px; right: 8px; width: auto; max-height: calc(100vh - 96px);
  }
}

.pp-fb-panel {
  position: fixed; right: 16px; bottom: 70px; z-index: 90;
  width: min(340px, calc(100vw - 32px));
  max-height: min(540px, calc(100vh - 120px)); overflow-y: auto;
  display: none;
  background: #fff; color: #1c2733;
  border: 1px solid #c6cfda; border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
  padding: 14px;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--pp-fs-klein); font-weight: 500; line-height: var(--pp-lh-text);
}
.pp-fb-panel.open { display: block; }
.pp-fb-panel.drag { outline: 2px dashed #2e7fc2; outline-offset: -6px; }

.pp-fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pp-fb-head b { font-size: var(--pp-fs-text); }
.pp-fb-x {
  background: none; border: 0; cursor: pointer; color: #55606c;
  font-size: var(--pp-fs-gross); line-height: var(--pp-lh-eng); padding: 2px 4px;
}
.pp-fb-x:hover { color: #1c2733; }

.pp-fb-label { display: block; margin: 8px 0 3px; font-size: var(--pp-fs-klein); color: #55606c; }
.pp-fb-panel select, .pp-fb-panel textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #c6cfda; border-radius: 6px;
  background: #fff; color: #1c2733;
  font: inherit; padding: 6px 8px;
}
.pp-fb-panel textarea { resize: vertical; min-height: 76px; }

.pp-fb-attach { margin-top: 8px; }
.pp-fb-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-fb-thumbs:not(:empty) { margin-bottom: 6px; }
.pp-fb-thumb { position: relative; display: inline-block; }
.pp-fb-thumb img {
  width: 52px; height: 52px; object-fit: cover;
  border: 1px solid #c6cfda; border-radius: 6px; display: block;
}
.pp-fb-thumb-x {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #c6cfda; background: #fff; color: #55606c;
  font-size: var(--pp-fs-mini); line-height: var(--pp-lh-eng); cursor: pointer; padding: 0;
}
.pp-fb-thumb-x:hover { color: #a33; }
.pp-fb-add {
  border: 1px solid #c6cfda; border-radius: 6px; background: #f4f7fa;
  color: #1c2733; font: inherit; font-size: var(--pp-fs-klein);
  padding: 5px 10px; cursor: pointer;
}
.pp-fb-add:hover { background: #e9eef4; }
.pp-fb-hint { margin-top: 4px; font-size: var(--pp-fs-mini); color: #77828e; }

#pp-fb-ctx { margin-top: 10px; }
#pp-fb-ctx summary { cursor: pointer; font-size: var(--pp-fs-klein); color: #2e5f8f; }
.pp-fb-ctx-body { margin-top: 6px; }
.pp-fb-ctx-row {
  display: flex; gap: 8px; padding: 2px 0;
  font-size: var(--pp-fs-mini); border-bottom: 1px dotted #e3e8ee;
}
.pp-fb-ctx-row span:first-child { flex: 0 0 92px; color: #77828e; }
.pp-fb-ctx-row span:last-child { flex: 1 1 auto; word-break: break-word; }
.pp-fb-ctx-note { margin-top: 6px; font-size: var(--pp-fs-mini); color: #77828e; }

.pp-fb-status { margin-top: 8px; font-size: var(--pp-fs-klein); }
.pp-fb-status:empty { display: none; }
.pp-fb-status.ok { color: #2c7a3f; }
.pp-fb-status.err { color: #a33; }
.pp-fb-mailto-inline { color: #2e5f8f; }

.pp-fb-send-row { margin-top: 10px; }
.pp-fb-send {
  display: inline-block; box-sizing: border-box;
  border: 0; border-radius: 6px; cursor: pointer;
  background: #2e7fc2; color: #fff; text-decoration: none;
  font: inherit; font-weight: 600; font-size: var(--pp-fs-klein);
  padding: 8px 14px;
}
.pp-fb-send:hover { background: #276da8; }
.pp-fb-send[disabled] { opacity: .6; cursor: default; }

/* ---- Ausnahme: aus einem Dialog heraus geöffnet ----
   Die Grundregel oben (z-index 90, unter allen Modals) gilt für den Knopf,
   den man selbst sucht — ein offener Dialog darf ihn verdecken. Ruft ein
   Dialog das Panel dagegen ausdrücklich auf (Registrierung › Informationen
   › Kontakt), muss es DARÜBER liegen; sonst wäre die Kontaktzeile ein
   toter Link. 9200 heißt: über Modals (100–400), unter der
   Speicherwarnung (99999), die Datenverlust meldet.
   js/feedback.js setzt die Klasse nur bei open({ ueberDialog: true }) und
   nimmt sie beim Schließen wieder weg. */
.pp-fb-btn.pp-fb-over, .pp-fb-panel.pp-fb-over { z-index: 9200; }