/* ============================================================
   UNTERSCHIEDE ZU NOEO
   ============================================================
   Alles in noeo.css steht wortwoertlich so in noeointerface. Was hier
   folgt, gilt NUR hier - und jede Regel sagt, warum. Ohne diesen
   Abschnitt muesste man die beiden Dateien Zeile fuer Zeile
   vergleichen, um zu sehen, wo sie auseinandergehen.

   Was hier NICHT stehen darf: eine Regel, die eine aus noeo.css
   ueberschreibt, weil sie einem hier nicht gefaellt. Dann sind es zwei
   Systeme statt einem, und man sieht es erst, wenn man zwei
   Bildschirmfotos nebeneinanderlegt.
   ============================================================ */


/* ------------------------------------------------------------
   1. DIE MARKE IST HIER EIN WORT UND DREI BALKEN, KEIN SVG
   ------------------------------------------------------------
   NOEO hat eine feste Wortmarke als Pfad. dibidam hat einen Namen, der
   in den Globalen Einstellungen steht und sich aendern laesst - er kann
   also kein Bild sein -, und davor drei Balken, die atmen.

   Die Balken bleiben. Sie sind das einzige, was sich in dieser
   Oberflaeche bewegt, und sie sagen ohne ein Wort, worum es hier geht:
   Stimmen, die auf- und abgehen. Die Geometrie ist unveraendert aus
   der alten Kopfzeile uebernommen (viewBox 0 0 64 64: x 8/26/44,
   Breite 13, Hoehen 44/33/52, Unterkante y=60) - nur der Ort ist neu. */
.logo__wort{
  font-size:17px; font-weight:600; letter-spacing:-.015em;
  color:var(--logo-ink); white-space:nowrap;
}

/* Drei HTML-Balken statt SVG-Rects: SVG-Kind-Transforms bekommen in
   Firefox keine GPU-Ebene und ruckeln - sichtbar besonders in klein.
   Jeder Balken atmet mit eigener Dauer, Tiefe und Spitze; die Werte
   sind bewusst nicht harmonisch, damit sie auseinanderlaufen. */
.logo-bars{ position:relative; display:inline-block; flex:none }
.logo-bars .lb{
  position:absolute; bottom:6.25%; width:20.3125%;
  border-radius:999px; transform-origin:bottom; will-change:transform;
}
.logo-bars .lb1{ left:12.5%;   height:68.75%; background:#4f9eff;
  animation: logo-grow .55s cubic-bezier(.2,.7,.3,1.15) backwards,
             logo-eq1 2.9s ease-in-out 1.1s infinite; }
.logo-bars .lb2{ left:40.625%; height:51.5625%; background:#3fb950;
  animation: logo-grow .55s cubic-bezier(.2,.7,.3,1.15) .08s backwards,
             logo-eq2 3.7s ease-in-out 1.25s infinite; }
.logo-bars .lb3{ left:68.75%;  height:81.25%; background:#ffd76a;
  animation: logo-grow .55s cubic-bezier(.2,.7,.3,1.15) .16s backwards,
             logo-eq3 3.3s ease-in-out 1.4s infinite; }
@keyframes logo-grow { from { transform:scaleY(.2); opacity:0 } }
@keyframes logo-eq1 { 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.84) } }
@keyframes logo-eq2 { 0%,100%{ transform:scaleY(1) } 45%{ transform:scaleY(.74) } }
@keyframes logo-eq3 { 0%,100%{ transform:scaleY(1) } 55%{ transform:scaleY(.9) } }

/* Gross - auf der Anmeldeseite und im Leerzustand. Kraeftigere Welle,
   weiterhin je Balken eigene Dauer und Tiefe. */
.logo-bars-lg .lb1{ animation: logo-grow .55s cubic-bezier(.2,.7,.3,1.15) backwards,
             logo-wave1 2.7s ease-in-out 1.1s infinite }
.logo-bars-lg .lb2{ animation: logo-grow .55s cubic-bezier(.2,.7,.3,1.15) .08s backwards,
             logo-wave2 3.5s ease-in-out 1.25s infinite }
.logo-bars-lg .lb3{ animation: logo-grow .55s cubic-bezier(.2,.7,.3,1.15) .16s backwards,
             logo-wave3 3.1s ease-in-out 1.4s infinite }
@keyframes logo-wave1 { 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.68) } }
@keyframes logo-wave2 { 0%,100%{ transform:scaleY(1) } 45%{ transform:scaleY(.58) } }
@keyframes logo-wave3 { 0%,100%{ transform:scaleY(1) } 55%{ transform:scaleY(.76) } }

/* Die Systemeinstellung "Bewegung reduzieren" gilt auch fuer die Marke.
   Sie steht dann still - sie verschwindet nicht. */
@media (prefers-reduced-motion: reduce){
  .logo-bars .lb, .logo-bars-lg .lb{ animation:none }
}

/* Auf der Anmeldeseite steht die Marke gross ueber dem Formular. NOEO
   setzt dort seine Wortmarke ein; hier sind es Balken und Wort. */
.schlicht__logo .logo-bars{ width:44px; height:44px }
.schlicht__logo .logo__wort{ font-size:27px }
.schlicht__logo a{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
}


/* ------------------------------------------------------------
   2. DIE ALTEN MARKEN ZEIGEN AUF DIE NEUEN
   ------------------------------------------------------------
   Die Moderationssteuerung wird NICHT umgebaut. Sie ist die einzige
   Seite, an der jemand unter Zeitdruck arbeitet, waehrend eine Sendung
   laeuft; wo dort ein Knopf sitzt, sitzt er aus einem Grund, und der
   Grund ist nicht das Aussehen. Sie soll aber auch nicht aussehen wie
   die Verwaltung von vorgestern.

   Deshalb bekommt sie die neuen Farben, ohne dass eine ihrer Regeln
   angefasst wird: die alten Markennamen zeigen hier auf die neuen. Das
   ist der ganze Umbau fuer diese Seite - keine Zeile in control.css
   und keine in control-view.js.

   Der Umweg ist absichtlich sichtbar. Wer spaeter die Moderation doch
   umbaut, loescht diesen Block und findet in control.css keine
   Ueberraschung mehr. */
:root{
  --bg-0: var(--bg);
  --bg-1: var(--surface);
  --bg-2: var(--hover);
  --bg-3: var(--hover-2);
  --fg-0: var(--ink);
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);

  /* Der Hauptknopf ist dunkel, nicht farbig - wie ueberall sonst auch. */
  --primary:    var(--stark-b);
  --primary-fg: var(--auf-stark);
  --accent:     var(--accent-ink);
  --accent-2:   var(--accent-ink);
  --accent-fg:  var(--auf-stark);

  /* Die vier Zustandsfarben sind die Schriftfarben des Statussystems.
     Sie stehen auf hellen Flaechen und muessen lesbar sein, nicht
     leuchten - eine Signalfarbe aus dem Dunkelmodus waere hier
     unlesbar. */
  --danger:  var(--st-fehler-ink);
  --success: var(--st-aktiv-ink);
  --warning: var(--st-entw-ink);
  --info:    var(--st-info-ink);

  --border:       1px solid var(--line);
  --btn-border:   var(--line-2);
  --input-bg:     var(--surface);
  --input-border: var(--line-2);
  --header-bg:    var(--kopf-grund);
  --table-border: var(--line);
  --row-hover:    var(--hover);
  --scroll:       var(--line-stark);

  --radius-s: var(--r-sm);
  --radius:   var(--r);
  --radius-l: 14px;
  --gap-xs: 4px; --gap-s: 8px; --gap: 14px; --gap-l: 22px; --gap-xl: 32px;
  --dur: .15s;
  --shadow-s: 0 2px 8px rgba(24,24,20,.07);
}


/* ------------------------------------------------------------
   3. WAS EINE SENDUNG BRAUCHT UND NOEO NICHT HAT
   ------------------------------------------------------------ */

/* Die Fragenliste ist eine Liste wie jede andere - nur traegt eine
   Frage einen Griff zum Sortieren, und sie kann lang sein. Deshalb
   bricht ihr Text um, statt abgeschnitten zu werden: bei einer Frage
   ist die zweite Haelfte des Satzes nicht Beiwerk.

   Die Spalten stehen hier und nicht am Element, damit Kopfzeile und
   Zeilen auf denselben Kanten sitzen - dieselbe Regel wie in noeo.css. */
.list--fragen{ --cols: 26px 24px 30px minmax(0,1fr) 96px 40px }
.list--fragen .row__name{ white-space:normal; overflow:visible }
.list--fragen .row__sub{ white-space:normal; overflow:visible }
.list--medien{ --cols: 26px 44px minmax(0,1fr) 110px 140px 40px }
.list--ablauf{ --cols: 24px 30px 28px minmax(0,1fr) 130px 40px }
.list--toene{  --cols: minmax(0,1fr) 150px 120px 40px }
.list--sendungen{ --cols: minmax(0,1fr) 120px 120px 140px 40px }
.list--rang{   --cols: 48px minmax(0,1fr) 110px 110px }
.list--schluessel{ --cols: minmax(0,1fr) 190px 150px 40px }
.list--sendungen .row__zahl,
.list--rang .row__zahl{ font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums }

/* Die Nummer einer Frage im Ablauf. Feste Zeichenbreite, weil man sie
   von oben nach unten liest und nicht einzeln. */
.row__pos{ font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums }

/* Der Griff zum Sortieren. Kein Knopf: er tut nichts beim Klicken,
   er ist die Stelle, an der man anfasst. */
.griff{
  border:0; background:transparent; padding:2px; margin:0;
  color:var(--ink-3); cursor:grab; touch-action:none; line-height:0;
  border-radius:6px;
}
.griff:hover{ color:var(--ink-2); background:var(--hover-2) }
.griff:active{ cursor:grabbing }
.row.wird-gezogen{ opacity:.45 }
.row.ziel-oben{ box-shadow:inset 0 2px 0 var(--accent-ink) }
.row.ziel-unten{ box-shadow:inset 0 -2px 0 var(--accent-ink) }

/* Eine Kennzahl steht frei, ohne Kasten. NOEO sagt es fuer Uebersichten,
   und eine laufende Sendung ist eine Uebersicht, die sich bewegt.
   `tabular-nums` steht hier ausdruecklich: eine Zahl, die sich jede
   Sekunde aendert, darf nicht in der Breite wackeln. */
.kennzahlen{
  display:grid; gap:28px 40px; padding:4px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(132px,max-content));
}
.kennzahl__wert{
  font-size:29px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.kennzahl__wort{ font-size:20px }
.kennzahl__name{ margin-top:4px; font-size:13.5px; color:var(--ink-3) }

/* Farbwahl im Reiter Aussehen. Das Feld IST die Farbe - eine Flaeche
   daneben waere dasselbe zweimal. Es steht auf Bedienhoehe wie jedes
   andere Feld auch. */
.farbfeld{
  width:100%; height:var(--ctrl-h); padding:4px;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); cursor:pointer;
}
.farbfeld::-webkit-color-swatch-wrapper{ padding:0 }
.farbfeld::-webkit-color-swatch{ border:0; border-radius:6px }
.farbfeld::-moz-color-swatch{ border:0; border-radius:6px }
.farbzeile{ display:grid; grid-template-columns:1fr 104px; gap:8px; align-items:center }

/* Der Schnipsel zum Einbetten. Maschinentext: feste Zeichenbreite,
   auswaehlbar mit einem Klick, und daneben der Knopf, der ihn nimmt. */
.schnipsel{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center;
}
.schnipsel .input{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px;
}

/* Ein Geheimnis, das man einmal sieht. Es steht als Text auf einer
   ruhigen Flaeche, nicht in einem Feld: man aendert es nicht, man
   kopiert es. */
.geheimnis{
  padding:14px 16px; border-radius:var(--r);
  background:var(--hover); border:1px solid var(--line);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px; word-break:break-all; user-select:all;
}


/* ------------------------------------------------------------
   4. MASKEN
   ------------------------------------------------------------
   NOEO braucht sie kaum: dort ist fast alles eine eigene Seite mit
   eigener Adresse. Hier gibt es Vorgaenge, die man MITTEN in einer
   Sendung ausloest - eine Frage nachtragen, einen Ton tauschen -, und
   dafuer die Seite zu verlassen hiesse, die laufende Verbindung zur
   Sendung abzureissen.

   Die Maske ist deshalb kein Kasten im Sinne der Regel, sondern eine
   zweite Ebene: sie deckt zu, was darunter liegt, und traegt oben
   rechts dieselbe Knopfleiste wie jede Detailseite. */
.deckel{
  position:fixed; inset:0; z-index:80;
  background:var(--deckel);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:36px 20px; overflow-y:auto;
}
.maske{
  width:100%; max-width:640px; margin:auto;
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow);
  animation: maske-auf .18s cubic-bezier(.2,.7,.3,1) both;
}
.maske--breit{ max-width:900px }
@keyframes maske-auf{ from{ opacity:0; transform:translateY(8px) } }
@media (prefers-reduced-motion: reduce){ .maske{ animation:none } }
/* Die Knopfleiste der Maske traegt dieselbe Reihenfolge wie eine
   Detailseite: ···, Abbrechen, Speichern. Und dieselbe Linie darunter. */
.maske__kopf{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:20px 24px; border-bottom:1px solid var(--line);
}
.maske__kopf h2{ font-size:19px; font-weight:600; letter-spacing:-.015em }
.maske__knoepfe{ display:flex; align-items:center; gap:10px; flex:none }
.maske__leib{ padding:24px }
/* Am Telefon nimmt die Maske die ganze Breite und sitzt unten - dort
   ist der Daumen. Ein zentrierter Kasten mit Rand ringsum verschenkt
   auf 390 Pixeln ein Drittel der Flaeche. */
@media (max-width: 560px){
  .deckel{ padding:0; align-items:flex-end }
  /* Hoeher als der Schirm darf die Maske nicht werden. Als sie es wurde,
     lag ihr Kopf - Titel, Abbrechen, Speichern - oberhalb des Bildes, und
     der Deckel scrollte nicht dorthin: ein am unteren Rand ausgerichtetes
     Flex-Kind hat nach oben keinen erreichbaren Ueberlauf. Gemessen an der
     Fragenmaske: 1882 Pixel Maske, der Kopf bei -982. Also: der Kopf bleibt
     stehen, der Leib rollt. */
  .maske{ max-width:none; border-radius:16px 16px 0 0; margin:0;
          display:flex; flex-direction:column; max-height:100% }
  .maske__leib{ padding:20px 16px; overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch }
  .maske__kopf{ padding:16px; flex:none }
}


/* ------------------------------------------------------------
   5. RUECKMELDUNG NACH EINER HANDLUNG
   ------------------------------------------------------------
   NOEO hat sie als `.toast` im Seitenfuss - dort kommt sie mit dem
   naechsten Seitenaufbau vom Server. Hier laedt die Seite nicht neu,
   also muss die Meldung von selbst wieder gehen. */
.melder{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:120; display:flex; flex-direction:column; gap:8px;
  align-items:center; pointer-events:none;
}
.melder__zeile{
  display:flex; align-items:center; gap:10px;
  max-width:min(92vw,520px); padding:12px 18px;
  border-radius:999px; box-shadow:var(--shadow);
  background-image:linear-gradient(180deg,var(--stark-a) 0%,var(--stark-b) 100%);
  color:var(--auf-stark); font-size:14px;
  animation: melder-auf .18s ease both;
}
.melder__zeile--fehler{
  background-image:none; background-color:var(--st-fehler-bg);
  color:var(--st-fehler-ink);
}
@keyframes melder-auf{ from{ opacity:0; transform:translateY(10px) } }
@media (prefers-reduced-motion: reduce){ .melder__zeile{ animation:none } }


/* ------------------------------------------------------------
   6. HIER STAND EINE AUSNAHME FUER DIE MODERATION
   ------------------------------------------------------------
   `.wrap--weit` gab ihr die volle Fensterbreite. Der Grund war die alte
   Seitenleiste, die zweihundertvierzig Pixel wegnahm; ohne sie hat die
   Moderation auf NOEOs gemeinsamer Spalte MEHR Platz als vorher.

   Weggefallen ist sie aber aus einem anderen Grund: der Kopf sitzt auf
   derselben Spalte. Beim Wechsel auf die Moderation wanderte die Marke
   um zweihundert Pixel nach links und beim Zurueckwechseln wieder
   zurueck. Eine Ausnahme, die die Kopfzeile springen laesst, ist teurer
   als die Breite, die sie einbringt.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   7. DIE BRUECKE ZUR MODERATION
   ------------------------------------------------------------
   Die Moderationssteuerung ist nicht umgebaut. Ihre Anordnung stammt
   aus control.css und control-view.js und bleibt Zeile fuer Zeile
   stehen. Was sie an ALLGEMEINEN Bauteilen benutzt - Knoepfe vor allem
   -, zeichnet aber ab hier NOEO.

   Ohne diesen Block waeren ihre Knoepfe unsichtbar: `.btn` heisst in
   noeo.css etwas anderes als in der alten admin.css, und `primary`,
   `danger`, `sm` sind dort keine Bezeichner, sondern Wortreste.

   Die Liste ist vollstaendig und abgeschlossen. Was hier nicht steht,
   benutzt die Moderation nicht - nachgesehen, nicht vermutet. Kommt
   ein Bauteil dazu, gehoert es in die Sprache von noeo.css und nicht
   hierher. */
/* DIE BRUECKE GILT NUR FUER DIE ALTEN KNOEPFE.
 *
 * `.btn--primary` und `.btn` heissen beide `.btn`. Ohne diese Abgrenzung
 * traf `.btn:not(.primary)` auch NOEOs Hauptknopf und uebermalte seinen
 * Verlauf mit einer weissen Flaeche - der Anmelden-Knopf sah aus wie ein
 * zweiter. Gesehen auf der Anmeldeseite, und es war nicht zu deuten: da
 * stand ein Knopf, der aussah, als tue er nichts.
 *
 * `[class*="btn--"]` erkennt einen Knopf aus noeo.css an seinem Beiwort.
 * Alles ohne Beiwort ist ein alter - und nur der wird hier gezeichnet. */
.btn--alt{ /* nur zur Erklaerung, wird nicht benutzt */ }

.btn:not([class*="btn--"]).primary{
  background-image:linear-gradient(180deg,var(--stark-a) 0%,var(--stark-b) 100%);
  color:var(--auf-stark); border-color:transparent }
.btn:not([class*="btn--"]).primary:hover{
  background-image:linear-gradient(180deg,var(--stark-a-an) 0%,var(--stark-b-an) 100%) }
.btn:not([class*="btn--"]).danger{
  background-image:linear-gradient(180deg,#9B3838 0%,#7E2B2B 100%);
  color:#FFF; border-color:transparent }
.btn:not([class*="btn--"]).danger:hover{
  background-image:linear-gradient(180deg,#AC4242 0%,#8E3232 100%) }
.btn:not([class*="btn--"]).success{
  background-color:var(--st-aktiv-bg); color:var(--st-aktiv-ink); border-color:transparent }
.btn:not([class*="btn--"]).ghost{ background:transparent; border-color:transparent; color:var(--ink-2) }
.btn:not([class*="btn--"]).ghost:hover{ background:var(--hover); color:var(--ink) }
/* Ohne Beiwort ist ein Knopf der zweite: weisse Flaeche, feine Kante.
   Genau das sagt die Regel, und genau so sah der alte aus. */
.btn:not([class*="btn--"]):not(.primary):not(.danger):not(.ghost):not(.success){
  background:var(--surface); border-color:var(--line-2); color:var(--ink) }
.btn:not([class*="btn--"]):not(.primary):not(.danger):not(.ghost):not(.success):hover{
  background:var(--hover) }
/* Klein und gross weichen von der gemeinsamen Hoehe ab. Das ist in der
   Moderation richtig und sonst nirgends: dort steht ein Knopf je Antwort
   und einer je Phase, und die Phase ist die Handlung, die man im Halbdunkel
   ohne Hinsehen trifft. */
.btn:not([class*="btn--"]).sm{ height:36px; padding:0 12px; font-size:13.5px }
.btn:not([class*="btn--"]).lg{ height:52px; padding:0 22px; font-size:16px }
.btn:not([class*="btn--"]).block{ width:100%; justify-content:center }
.btn:not([class*="btn--"]).active{ box-shadow:inset 0 0 0 2px var(--st-aktiv-ink) }

.btn-plain{
  height:var(--ctrl-h); padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); color:var(--ink);
  font-size:14.5px; font-weight:500; cursor:pointer;
}
.btn-plain:hover{ background:var(--hover) }
.btn-plain:disabled, .btn-plain[disabled]{ opacity:.42; cursor:not-allowed; background:var(--surface) }
.btn-plain.danger{ color:var(--st-fehler-ink); border-color:var(--st-fehler-bg) }
.btn-plain.danger:hover{ background:var(--st-fehler-bg) }
.btn-plain.danger:disabled{ color:var(--ink-3); border-color:var(--line) }

.row-s{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.spacer{ flex:1 }
.muted{ color:var(--ink-3); font-size:max(12px,.92em) }
.hidden{ display:none !important }

/* Waehrend die Sendung noch nicht antwortet, steht die Form da, in der
   die Antwort kommen wird. Kein Kreisel: er sagt "es passiert etwas"
   und nicht "gleich steht hier eine Frage". */
.skeleton{
  background:linear-gradient(90deg,var(--hover) 25%,var(--hover-2) 37%,var(--hover) 63%);
  background-size:400% 100%; border-radius:var(--r-sm);
  animation: sk-wandern 1.4s ease infinite;
}
@keyframes sk-wandern{ from{ background-position:100% 0 } to{ background-position:0 0 } }
@media (prefers-reduced-motion: reduce){ .skeleton{ animation:none } }


/* Ein Verweis neben der Abschnittsueberschrift. NOEO kennt ihn nicht, weil
   dort ein Abschnitt nirgendwohin fuehrt; hier gehoert zu jedem Block eine
   Seite der Sendung, die man sich ansehen kann. Er steht NEBEN der
   Ueberschrift und nicht darunter: darunter waere er die erste Zeile der
   Liste, und die Liste besteht aus Schaltern. */
.fsec__kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px 16px; flex-wrap:wrap; margin-bottom:20px;
}
.fsec__kopf .fsec__label{ margin-bottom:0 }


/* Ein Datum als Zwischenzeile in einer Liste. NOEO kennt es nicht, weil
   dort keine Liste nach Tagen gruppiert ist; hier ist der Verlauf nach
   Tagen geordnet, und ohne Zwischenzeile stuende neben jeder Aenderung
   dasselbe Datum ein zweites Mal.

   Es ist KEINE Ueberschrift im Sinne von Abschnitt 4: es benennt keine
   Gruppe, die man sonst falsch verstuende, sondern traegt den Wert, den
   die Zeilen darunter gemeinsam haben. Deshalb leise und klein. */
.list__tag{
  padding:26px 8px 10px; font-size:12.5px; font-weight:500; color:var(--ink-3);
}
.list__tag:first-child{ padding-top:2px }


/* Ein Konto, das sich nicht anmelden kann. Es steht weiter in der Liste —
   nichts ist verloren, einschalten geht jederzeit —, aber es ist leiser.
   Nicht ausgegraut bis zur Unlesbarkeit: man muss den Namen noch lesen
   koennen, um es wieder einzuschalten. */
.row.ist-aus .row__name{ color:var(--ink-2) }
.row.ist-aus .row__sub, .row.ist-aus .row__rolle{ color:var(--ink-3) }
.row.ist-aus .avatar{ opacity:.6 }


/* ------------------------------------------------------------
   8. AUF DEM TELEFON WIRD AUCH DIESE ZEILE ZUM BLOCK
   ------------------------------------------------------------
   NOEO reduziert `.row` unter 640 Pixeln auf drei Spalten: Kaestchen,
   Namensblock, drei Punkte. Das reicht fuer seine Listen - sie haben
   genau diese drei Kinder (plus das Bild bei den Konten, und dafuer
   steht dort eine eigene Zeile).

   Die Listen hier haben mehr davon: einen Griff zum Sortieren, eine
   Nummer, ein Zeichen fuer die Art. Ohne eigene Angabe landen sie in
   Spalten, die das Raster gar nicht kennt - und die Zeile ragt hinaus.
   Bei den Fragen waren das vierhundertsiebenundsechzig Pixel; die
   Breitenpruefung hat es gemeldet, das Auge haette es auch.
   ------------------------------------------------------------ */
@media (max-width: 640px){
  /* Kaestchen · Griff · Nummer · Name … und die drei Punkte rechts.
     Die Nummer bleibt: sie IST die Sendereihenfolge. */
  .list--fragen .row{ grid-template-columns:auto auto auto minmax(0,1fr) auto }
  .list--fragen .row__haupt{ grid-column:4; grid-row:1 }
  .list--fragen .row__meta{ grid-column:4; grid-row:2 }
  .list--fragen .row__end{ grid-column:5; grid-row:1 }
  .list--fragen .griff{ grid-column:2; grid-row:1 }
  .list--fragen .row__pos{ grid-column:3; grid-row:1; margin-top:2px }

  /* Griff · Nummer · Zeichen der Art · Name … */
  .list--ablauf .row{ grid-template-columns:auto auto auto minmax(0,1fr) auto }
  .list--ablauf .row__haupt{ grid-column:4; grid-row:1 }
  .list--ablauf .row__meta{ grid-column:4; grid-row:2 }
  .list--ablauf .row__end{ grid-column:5; grid-row:1 }

  /* Der Platz in der Rangliste steht vorn, der Name daneben. */
  .list--rang .row{ grid-template-columns:auto minmax(0,1fr) auto }
  .list--rang .row__pos{ grid-column:1; grid-row:1 }
  .list--rang .row__haupt{ grid-column:2; grid-row:1 }
  .list--rang .row__meta{ grid-column:2; grid-row:2 }

  /* Ein Name, der aus EINEM langen Wort besteht, hat keine Stelle, an der
     der Browser umbrechen duerfte - und ragt hinaus.

     NOEO gibt das seiner Zweitzeile mit (`.row__sub{ overflow-wrap:anywhere }`),
     dem Namen aber nicht: dort steht meist ein Personen- oder Projektname mit
     Leerzeichen darin. Eine Frage ist ein Satz und kann alles enthalten -
     hier stand „Donaudampfschifffahrtsgesellschaftskapitaenswitwe…" und schob
     die Seite um fuenfhundert Pixel nach rechts. Lieber ein Wort mitten
     durchgetrennt als eine Seite, die seitlich wegläuft.

     Gilt fuer JEDE Zeile, nicht nur fuer die Fragen: ein Sendungsname kann
     genauso lang sein, und dann waere es dort derselbe Fehler. */
  .row__name{ overflow-wrap:anywhere }

  /* Der Schnipsel zum Einbetten und die Farbzeile: nebeneinander bleibt
     davon auf 390 Pixeln nichts uebrig, was man noch lesen koennte. */
  .schnipsel{ grid-template-columns:minmax(0,1fr) }
  .schnipsel .row-s{ justify-content:flex-start }
}


/* ------------------------------------------------------------
   9. DER EDITOR FÜR EINEN RECHTSTEXT
   ------------------------------------------------------------
   NOEO hat ihn nicht: dort ist der Wortlaut einer Vereinbarung Rich-Text,
   aber er kommt fertig vom Server. Hier tippt ihn jemand ein.

   Er stand in der alten admin.css und kam beim Umstieg nicht mit — die
   Knöpfe waren achtundzwanzig Pixel hoch und grau in grau, das Feld hatte
   überhaupt keine Kante. Ein Feld, das man nicht sieht, ist keines: auf der
   Vorlagenseite stand der Text einfach im Nichts, und dazwischen lief die
   Beschriftung des nächsten Feldes durch.

   Jetzt trägt er dieselbe Kante, dieselbe Rundung und denselben Fokusring
   wie jedes andere Feld — er IST eines. Nur höher, weil ein Impressum
   länger ist als eine Zeile. */
.rt-editor{
  background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.rt-editor:hover{ border-color:var(--line-stark) }
.rt-editor:focus-within{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(90,75,209,.14);
}

/* Die Leiste ist eine Reihe Befehle, keine Werkzeugkiste: sie sitzt IM Feld,
   auf einer leiseren Fläche, und trennt sich mit einer Linie ab. */
.rt-leiste{
  display:flex; flex-wrap:wrap; gap:2px;
  padding:6px; border-bottom:1px solid var(--line);
  background:var(--hover);
}
/* Sechsunddreissig Pixel und nicht vierundvierzig: das ist die eine
   begründete Ausnahme von der gemeinsamen Höhe. Zehn Befehle nebeneinander
   auf voller Bedienhöhe wären eine Leiste, die höher ist als das halbe Feld
   darunter — und sie werden im Schreiben angetippt, nicht gesucht. Für einen
   Finger reicht es (die Grenze liegt bei 28). */
.rt-knopf{
  min-width:36px; height:36px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--ink-2); cursor:pointer; font:inherit; font-size:13.5px; line-height:1;
}
.rt-knopf:hover{ background:var(--surface); color:var(--ink) }
.rt-knopf:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px }

/* Der Text im Feld sieht aus wie später auf der Seite — sonst schreibt man
   blind und wundert sich beim Ansehen. Dieselben Maße wie `.lesen__text`. */
.rt-feld{
  min-height:16rem; max-height:26rem; overflow-y:auto;
  padding:14px 16px; font-size:15px; line-height:1.7; color:var(--ink-2);
}
.rt-feld:focus{ outline:none }
.rt-feld > :first-child{ margin-top:0 }
.rt-feld h2{ font-size:19px; font-weight:600; margin:28px 0 10px; color:var(--ink) }
.rt-feld h3{ font-size:16px; font-weight:600; margin:22px 0 8px; color:var(--ink) }
.rt-feld p{ margin:0 0 14px }
.rt-feld ul, .rt-feld ol{ margin:0 0 14px; padding-left:22px }
.rt-feld li{ margin:0 0 6px }
.rt-feld strong{ font-weight:600; color:var(--ink) }
.rt-feld a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
/* Ein leeres Feld sagt, was hineingehört — als Platzhalter, nicht als
   Erklärtext darunter. */
.rt-feld:empty::before{ content:attr(data-leer); color:var(--ink-3) }


/* ------------------------------------------------------------
   10. WAS AUF DEM TELEFON SEINE BESCHRIFTUNG VERLIERT
   ------------------------------------------------------------
   Unter 640 Pixeln fällt die Kopfzeile der Liste weg — übereinander
   stehende Werte brauchen keine Spaltennamen, sie stehen ja beieinander.
   Das gilt, solange sich der Wert selbst deutet. Ein Datum tut das, eine
   Statusmarke auch.

   Ein einzelner Buchstabe nicht. In der Fragenliste stand am Ende des
   Blocks ein nacktes „A" — richtig gelesen nur von dem, der die Spalte
   „Lösung" vom großen Bildschirm noch im Kopf hat. Also nimmt der Wert sein
   Wort mit, sobald die Überschrift geht. */
@media (max-width: 640px){
  .list--fragen .row__rolle::before{ content:'Lösung ' }

  /* Ein Haken zum Filtern muss mit dem Daumen zu treffen sein. Die
     Beschriftung ist das, was man antippt — also ist sie es, die die Höhe
     bekommt, nicht das Kästchen darin. */
  .toolbar label.row-s{ min-height:var(--ctrl-h) }
}

/* Zustand und Weg nebeneinander rechts an der Abschnittsüberschrift: wie
   viele Zeichen schon dastehen, und wo man das Ergebnis ansieht. */
/* Umbrechen, nicht hinausschieben. Ohne `flex-wrap` schob die Zeile
   "10722 Zeichen · Seite ansehen" die Seite bei 320px um 63 Pixel nach
   rechts — die Ueberschrift steht links, der Stand rechts, und beides
   nebeneinander passt auf einem Telefon nicht. Beide Ebenen brauchen es:
   der Kopf, damit der Stand unter die Ueberschrift rutscht, und der Stand
   selbst, damit Zeichenzahl und Verweis untereinander stehen, wenn auch
   das noch zu breit ist. */
.fsec__stand{
  display:flex; align-items:baseline; gap:2px 16px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-3);
}

/* Zwischen dem Editor und dem Feld darunter braucht es Luft — er ist hoch,
   und ohne Abstand klebt die nächste Beschriftung an seiner Kante. */
.rt-editor{ margin-bottom:26px }


/* IOS ZOOMT IN JEDES FELD MIT SCHRIFT UNTER 16 PIXELN — AUCH IN DIESE.
   noeo.css hat dieselbe Regel und sie greift fuer `.input` ueberall. Nur:
   diese Datei wird DANACH geladen, und zwei Regeln hier sind spezifischer
   oder stehen spaeter — sie gewinnen und setzen die Schrift wieder herunter:

     .schnipsel .input   12,5px   (0,2,0) schlaegt NOEOs (0,1,0)
     .farbfeld           15px     (0,1,0), aber spaetere Datei

   Gemessen auf einem Beruehrungsgeraet waren es genau diese drei Feldarten,
   die iOS aufgezogen haette. Eine Medienabfrage erhoeht die Spezifitaet nicht
   — DIESER BLOCK MUSS DESHALB AM ENDE DER DATEI STEHEN, sonst verliert er
   gegen die Zeilen darueber und tut gar nichts. Genau daran ist NOEOs erster
   Versuch gescheitert, und hier waere es derselbe Fehler noch einmal.

   Die Schnipsel bleiben in Schreibmaschinenschrift; sie werden nur groesser.
   Das Feld ist 44 Pixel hoch, 16 sitzen darin bequemer als 12,5. */
@media (pointer: coarse){
  .schnipsel .input{ font-size:16px }
  .farbfeld{ font-size:16px }
}


/* EINE ZEILE NUR FUERS KONTEXTMENUE IST EINE ZEILE ZU VIEL.
   NOEO gibt der Knopfleiste auf schmalen Schirmen die volle Breite, damit
   mehrere Knoepfe nebeneinander passen und sich die Zeile teilen
   (`.pagehead__actions{width:100%}` unter 520px). Steht dort aber nur das
   ⋯-Menue — auf der Moderation ist das so —, kauft die volle Breite nichts
   und kostet ein Band von 44 Pixeln plus Abstaenden zwischen Titel und
   Reiterleiste: ein einzelner kleiner Knopf links, daneben 280 Pixel nichts,
   und die Reiter rutschen dafuer nach unten. Auf einem Telefon waehrend der
   Sendung ist das der halbe sichtbare Kopf.

   Deshalb: nur wenn wirklich nur das Menue dasteht, bleibt die Zeile so
   schmal wie ihr Inhalt und stellt sich wieder neben die Ueberschrift. */
@media (max-width: 520px){
  .pagehead__actions:has(> .dots:only-child){ width:auto }
}


/* DER SPALTENKOPF ALS KNOPF.
   INTERFACE.md: „Ueber der Tabelle steht ein Suchfeld, und die
   Spaltenueberschriften sind Knoepfe." Er sieht aus wie die Ueberschrift,
   die er ersetzt — 12,5px, 500er Schnitt, leise —, denn er IST sie; neu ist
   nur, dass man ihn druecken kann. Ein Kopf, der sich als Knopf aufspielt,
   waere ein zweiter Bedienrang in einer Zeile, die keiner sein soll.

   Das Zeichen dahinter steht IMMER, auch ungewaehlt (dann blass): sonst
   springt die Ueberschrift beim ersten Klick um die Breite des Pfeils zur
   Seite, und die Oberflaeche darf nicht springen. */
.sortkopf{
  display:inline-flex; align-items:center; gap:2px;
  margin:0 0 0 -6px; padding:2px 6px; border:0; border-radius:var(--r-sm);
  background:none; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--ink-3); cursor:pointer; text-align:left;
  transition:color .12s ease, background .12s ease;
}
.sortkopf svg{ opacity:.32; transition:opacity .12s ease }
.sortkopf:hover{ color:var(--ink); background:var(--hover) }
.sortkopf:hover svg{ opacity:.6 }
.sortkopf.ist-an{ color:var(--ink) }
.sortkopf.ist-an svg{ opacity:1; color:var(--accent-ink) }

/* Steht die Spalte rechtsbuendig, gehoert der Knopf dorthin mit. */
.list__head > .sortkopf:last-child{ margin-left:auto }


/* ============================================================
   Gruppen, Connectoren, KI - Bausteine, die NOEO hat und die hier zum
   ersten Mal gebraucht werden (INTERFACE.md 13, 13a, 14)
   ============================================================ */

/* Die Gruppenliste: Name, Rechte, Konten. NOEOs Seite nennt die Klasse,
   NOEOs Stylesheet kennt nur `.list--rollen` mit denselben Massen. */
.list--gruppen{ --cols: minmax(0,1fr) 190px 90px }
/* Firmen haben hier weder Logo noch Branche: Name, Konten, Menue. */
.list--firmen{ --cols: minmax(0,1fr) 120px 150px }
.list--post{ --cols: minmax(0,1fr) 150px 108px }
/* Das unsichtbare Dateifeld der Bildwahl erbt 15 Pixel Schrift. iOS zoomt in
   jedes Feld unter 16 Pixeln hinein, und die Regel gilt jedem Feld - auch
   einem, in das niemand tippt. */
.fotowahl__feld{ font-size:16px }
/* Vorschlaege der KI: Kaestchen, Frage mit ihren vier Antworten, Loesung.
   Die Frage darf umbrechen - abgeschnitten liesse sich nichts pruefen. */
.list--vorschlaege{ --cols: 26px minmax(0,1fr) 96px }
.list--vorschlaege .row__name, .list--vorschlaege .row__sub{ white-space:normal; overflow:visible }
.row__gruppe{ font-size:14px; color:var(--ink-2) }
@media (max-width: 720px){
  .list--gruppen{ --cols: minmax(0,1fr) 150px 80px }
  .list--firmen{ --cols: minmax(0,1fr) 90px }
  .list--post{ --cols: minmax(0,1fr) 130px }
}

/* Was von der Gruppe abweicht, traegt einen Ring (INTERFACE.md 13a): sonst
   saehe eine geerbte Erlaubnis genauso aus wie eine ausdruecklich erteilte,
   und beim Wechsel der Gruppe wuesste niemand, welche Zeile sich mitbewegt. */
.switch.ist-abweichend{ box-shadow:0 0 0 3px var(--accent-line) }

/* Das Geheimfeld: Spur und Eingabe sind EIN Feld und teilen sich die
   Breite eines Zugangsfeldes in der Zeile mit dem Pruefknopf. Im Raster
   eines Formulars nimmt es seine Spalte wie jedes andere Feld. */
.frow > .geheim{ flex:1 1 340px; max-width:420px; min-width:0 }
.geheim .zugangsfeld{ max-width:none }
.geheim .readonly{ min-height:var(--ctrl-h) }
/* Die offene Gestalt (lixe): Spur und neues Feld nebeneinander in einer
   Reihe, der Pruefknopf dahinter. Die Spur ist so breit wie ihr Wort. */
.geheim--offen{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.frow > .geheim--offen{ flex:1 1 560px; max-width:none }
.geheim--offen .readonly--spur{ flex:none; width:auto }
.geheim--offen .pw{ flex:1 1 260px; max-width:420px }

/* Der KI-Knopf in der Knopfleiste oben rechts steht zwischen ··· und dem
   Hauptknopf; am Telefon teilt er sich die Zeile wie die anderen. In der
   Maske steht er in der Knopfreihe des Kopfes. */
.pagehead__actions .ki, .maske__knoepfe .ki{ height:var(--ctrl-h) }
@media (max-width: 520px){
  .pagehead__actions .ki{ flex:1 1 auto }
}

/* ============================================================
   Das Dashboard (INTERFACE.md 13c) - uebernommen aus NOEO, Abschnitt 34
   ============================================================
   Die Teile liegen am Konto, nicht im Code. KEINE KAESTEN: jeder Teil
   zeichnet eine Ueberschrift mit einer Linie darunter und dann seinen
   Inhalt; was ihn vom naechsten trennt, ist der Abstand.

   ALLE TEILE SIND GLEICH BREIT. „Gross" ist die doppelte HOEHE, nicht die
   doppelte Breite: so steht das Raster still, und was sich aendert, ist
   nur, wie viel Platz eine Karte nach unten bekommt. Bei wechselnder
   Breite sprang die Aufteilung, sobald jemand eine Karte umstellte. */
.db-seite{ padding-top:4px }

.db-raster{
  display:grid; grid-template-columns:1fr;
  /* DIE SCHMALE HOEHE, eine Zahl an einer Stelle: „gross" ist zweimal
     diese Hoehe plus den Abstand dazwischen, und das rechnet das Raster
     selbst (grid-row: span 2). Nachgemessen an dem, was die kleinen Teile
     brauchen (tests/test_dashboard.py misst es mit), nicht geschaetzt:
     steht hier eine zu kleine Zahl, schneidet overflow:hidden eine Zeile
     mittendurch, und das sieht nach Fehler aus statt nach Absicht. */
  --db-hoehe: 260px;
  grid-auto-rows:var(--db-hoehe);
  /* DICHT GEPACKT: ohne `dense` bliebe rechts neben einem grossen Teil ein
     Loch, sobald der naechste nicht mehr in die Zeile passt. */
  grid-auto-flow:row dense;
  gap:40px 48px; align-items:stretch;
}
/* Zwei Spalten ab 1000 Pixeln, am Telefon eine. */
@media (min-width:1000px){ .db-raster{ grid-template-columns:1fr 1fr } }

/* Die Hoehe ist FEST, und was nicht hineinpasst, wird nicht gezeigt. Kein
   Rollen in der Karte: eine Karte, in der man scrollt, ist ein Fenster im
   Fenster. Die Perspektive haengt am Teil, die Drehung an der Karte darin. */
.db-teil{ min-width:0; overflow:hidden; perspective:1600px }
.db-teil--gross{ grid-row:span 2 }
.db-teil__karte{ transform-origin:center; will-change:transform }
.db-teil__seite[hidden]{ display:none !important }

.db-teil__kopf{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
/* Der Titel IST der Knopf. Er sieht aus wie eine Ueberschrift und verhaelt
   sich wie einer - kein Zahnrad daneben, das erklaeren muesste, wozu es da
   ist. Der Pfeil sagt es leise. */
.db-teil__titel-knopf{
  display:inline-flex; align-items:center; gap:7px; flex:1 1 auto; min-width:0;
  border:0; background:transparent; padding:0; margin:0; min-height:28px;
  font-size:16px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer;
}
.db-teil__titel-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.db-teil__pfeil{ flex:none; color:var(--ink-3); font-size:15px; font-weight:400 }
.db-teil__titel-knopf:hover .db-teil__pfeil{ color:var(--ink) }

/* KREUZ UND ZIEHGRIFF STEHEN HINTEN, und dort staendig: wer umgedreht hat,
   will einstellen. Das Kreuz traegt die Warnfarbe erst, wenn man darauf
   zeigt - staendig rot waere eine Aufforderung. */
.db-teil__griffe{ display:flex; align-items:center; gap:8px; flex:none }
.db-teil__weg, .db-teil__ziehen{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--ink-3); cursor:pointer;
  transition:background-color .14s ease, color .14s ease;
}
.db-teil__ziehen{ cursor:grab; touch-action:none }
.db-teil__ziehen:active{ cursor:grabbing }
.db-teil__weg:hover{ color:var(--st-fehler-ink) }
.db-teil__weg:hover, .db-teil__ziehen:hover{ background:var(--hover) }

/* Die Rueckseite: kein Kasten, nur Abstand - wie ueberall. Beschriftung
   darueber, Wahl darunter; was eine Einstellung tut, sagt ihr Name. */
.db-teil__optionen{ display:flex; flex-direction:column; gap:16px }
.db-option{ display:flex; flex-direction:column; gap:7px }
.db-option__name{ font-size:13px; color:var(--ink-3) }
/* Die Stufen einer Wahl: Woerter, das gewaehlte dunkel - keine
   Knopfflaechen, es ist eine Angabe und keine Handlung. */
.db-stufen{ display:flex; flex-wrap:wrap; gap:14px }
.db-stufe{ border:0; background:transparent; padding:0; font-size:13.5px; color:var(--ink-3); cursor:pointer }
.db-stufe:hover{ color:var(--ink) }
.db-stufe.ist-hier{ color:var(--ink); font-weight:500 }
/* Ein Auswahlfeld, wo eine Reihe aus Woertern nicht mehr traegt: ueber
   vier Moeglichkeiten liest man sie nicht, man durchkaemmt sie. */
.db-option .select{ max-width:260px }
/* Ein Satz auf der Rueckseite, der keine Einstellung ist: er sagt, warum
   eine gerade nichts bewirkt. */
.db-option__aus{ margin:0; font-size:13px; color:var(--ink-3) }
/* Ein Schalter in den Optionen: Name links, Kippe rechts. */
.db-schalter{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:13.5px; color:var(--ink); cursor:pointer;
}

/* --- Vorne: die Liste ---------------------------------------------------- */
.db-liste{ list-style:none; margin:0; padding:0 }
.db-zeile{
  display:flex; align-items:baseline; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.db-zeile:last-child{ border-bottom:0 }
.db-zeile__haupt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto }
.db-zeile__name{ min-width:0; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
a.db-zeile__name:hover{ text-decoration:underline; text-underline-offset:3px }
.db-zeile__neben{ color:var(--ink-3); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Die Wertspalte bricht NICHT um: was rechts steht, ist eine Zahl oder
   eine Kennung, und beide liest man in einem Stueck. */
.db-zeile__wert{ flex:none; white-space:nowrap; color:var(--ink-3); font-variant-numeric:tabular-nums }
/* Der Zustand als WORT, kein Ampelpunkt: die Farbe allein sagt niemandem,
   was los ist. Dieselben Toene wie die Statusmarken. */
.db-zustand{ flex:none; white-space:nowrap; font-size:12.5px }
.db-zustand--gut, .db-zustand--aktiv{ color:var(--st-aktiv-ink) }
.db-zustand--offen, .db-zustand--entwurf{ color:var(--st-entw-ink) }
.db-zustand--fehler{ color:var(--st-fehler-ink) }
.db-zustand--aus, .db-zustand--weg{ color:var(--ink-3) }
.db-zustand--info{ color:var(--st-info-ink) }
.db-zustand--live, .db-zustand--arbeit{ color:var(--st-arbeit-ink) }
.db-leer{ margin:0; padding:6px 0; color:var(--ink-3); font-size:14px }
/* Der Zeitraum steht vorne als AUSKUNFT, nicht als Wahl: „128 Anfragen"
   ist ohne ihn keine Zahl. Gewaehlt wird er hinten. */
.db-zeitraum__wort{ margin:0 0 8px; font-size:13px; color:var(--ink-3) }

/* --- Vorne: Zahlen und die Uhr ------------------------------------------ */
.db-zahlen{ display:flex; flex-wrap:wrap; gap:18px 28px }
.db-zahl{ display:flex; flex-direction:column; gap:2px }
.db-zahl__wert{ font-size:22px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums }
.db-zahl__name{ font-size:12.5px; color:var(--ink-3) }
.db-uhr__zeit{ margin:0; font-size:34px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink) }
.db-uhr__datum{ margin:4px 0 0; font-size:14px; color:var(--ink-2) }

/* --- Ziehen ------------------------------------------------------------- */
/* Der Platzhalter, der liegen bleibt: eine ruhige Flaeche mit Kante - er
   zeigt den ORT, nicht sich selbst, deshalb ist sein Inhalt unsichtbar. Die
   Kante als Innenschatten, weil das Teil overflow:hidden traegt und eine
   Kontur ausserhalb beschnitten wuerde. Keine Null-Deckkraft: die loeschte
   den Platzhalter aus, und man zog eine Karte in ein Loch. */
.db-teil--schatten{
  opacity:1; border-radius:var(--r); background:var(--hover);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.db-teil--schatten > *{ visibility:hidden }
/* Die Kopie am Zeiger: leicht angehoben, mit ihrem Inhalt - man soll
   sehen, WAS man traegt. Sie ist fuer den Zeiger durchsichtig, damit die
   Karte darunter gefunden wird. */
.db-teil--zieht{
  position:fixed; z-index:60; pointer-events:none; opacity:.92;
  background:var(--bg); border-radius:var(--r); box-shadow:var(--shadow);
  cursor:grabbing;
}

/* ─── Das Filtermenue: ein Knopf, Kaestchen darin (wie in lixe) ───────────
   16/18 Polsterung, 12,5px in 600 fuer die Frage, 10px zwischen den
   Antworten, 22px zwischen den Gruppen - keine Trennlinie dazwischen,
   Abstand traegt hier weiter. Was nicht passt, wird gerollt, und das Menue
   schneidet nicht mitten durch eine Zeile. */
.menu--filter{
  display:flex; flex-direction:column; gap:22px;
  width:320px; max-width:calc(100vw - 16px);
  padding:16px 18px 18px;
  max-height:min(60vh, 480px); overflow-y:auto;
}
.menu__frage{ font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); margin-bottom:10px }
.menu__wahl{ display:flex; align-items:center; gap:10px; min-height:22px; font-size:14.5px; color:var(--ink); cursor:pointer }
.menu__wahl + .menu__wahl{ margin-top:10px }

/* Was gesetzt ist, steht unter der Leiste - benannt, mit einem Kreuz. */
.marken{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:-8px; padding-bottom:18px }
.marke{
  display:inline-flex; align-items:center; gap:2px; height:30px; padding:0 4px 0 12px;
  border:1px solid var(--accent-line); border-radius:999px;
  background-image:linear-gradient(140deg,var(--akzent-a) 0%,var(--akzent-b) 100%);
  color:var(--accent-ink); font-size:13.5px; font-weight:500; white-space:nowrap;
}
.marke__x{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; padding:0;
}
.marke__x:hover{ background:var(--hover) }

/* ─── Der Reiter Integration einer Firma ─────────────────────────────── */
.lage{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:-8px 0 26px }
.auskunft{ display:grid; gap:6px }
.auskunft code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13px; color:var(--ink-2);
  overflow-wrap:anywhere;
}

/* ── Die Form einer Seite, in den Farben dieser Sendung ──────────────────
   Auf der Kachel im Einrichter. Sie zeigt nicht die Seite - sie zeigt ihre
   FORM: die Buehne als Raster, die Einblendung als Balken unten, das
   Telefon als Saeule. Sieben laufende Seiten in sieben Rahmen waeren sieben
   Verbindungen fuer ein Bild, das man nur anklickt. */
.seitenbild {
  display: flex; inline-size: 100%; block-size: 100%;
  border-radius: inherit; overflow: hidden;
}
.seitenbild i { display: block; border-radius: 3px; }

/* Bühne: vier Flächen im Raster 2 × 2. */
.seitenbild--raster {
  flex-wrap: wrap; align-content: center; gap: 6px; padding: 16px 20px;
}
.seitenbild--raster i { flex: 1 1 calc(50% - 6px); block-size: 26px; }

/* Einblendung: ein Balken unten, vier Chips darin. */
.seitenbild--balken { align-items: flex-end; gap: 4px; padding: 0 14px 14px; }
.seitenbild--balken i { flex: 1; block-size: 14px; }

/* Telefon: eine Säule. */
.seitenbild--saeule {
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 12px 32px;
}
.seitenbild--saeule i { block-size: 12px; }

/* QR: ein Feld in der Mitte, die vier Farben als Ecken. */
.seitenbild--code {
  flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 3px; padding: 22px 42px;
}
.seitenbild--code i { flex: 0 0 calc(50% - 3px); block-size: 20px; border-radius: 2px; }

/* Eingebettet: derselbe Inhalt, kleiner und mit Rand ringsum. */
.seitenbild--rahmen {
  flex-direction: column; justify-content: center; gap: 4px;
  padding: 18px 28px;
}
.seitenbild--rahmen i { block-size: 9px; }

/* Moderation: eine Liste mit einer betonten Zeile oben. */
.seitenbild--liste {
  flex-direction: column; justify-content: center; gap: 6px; padding: 14px 26px;
}
.seitenbild--liste i { block-size: 8px; }
.seitenbild--liste i:first-child { block-size: 18px; }

/* Die Kachel ist ein Knopf - sie braucht die Schrift der Seite, nicht die
   des Browsers, und keinen eigenen Rahmen. */
.tile--seite { font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; color: inherit; }