/* ============================================================================
   microdat HUB - Bedienoberfläche
   ----------------------------------------------------------------------------
   Aufbau dieser Datei
     1  Farben        Tokens, hell und dunkel
     2  Grundgerüst  Zurücksetzen, Rahmen, Seitenband
     3  Bausteine     Karten, Felder, Knöpfe, Schalter
     4  Broadcast     Fassungen, Ziele, Auslieferung
     5  Einstellungen Blattliste, Kanalkarten, Listen, Konten
     6  Fenster       Anleitungen
     7  YouTube       Videoliste und Werkbank
     8  Schmal        Telefon und Tablet
     9  Anmeldung

   Hell und dunkel folgen ausschließlich prefers-color-scheme. Es gibt
   keinen Umschalter mehr: Wer sein System auf dunkel stellt, meint es auch
   für diese Seite. Jede Farbe ist im hellen Block definiert, der dunkle
   belegt nur um - es gibt keine Farbe, die nur in einem Betrieb existiert.
   ==========================================================================*/

/* --- 1  Farben ---------------------------------------------------------- */

:root {
  --ff: "Segoe UI Variable Display", "Segoe UI", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --grund:  #F4F5F8;
  --feld:   #FFFFFF;
  --feld2:  #FAFBFD;
  --linie:  #DFE3EC;
  --linie2: #C9CFDD;

  --ink:  #14161C;
  --ink2: #565E70;
  --ink3: #8A93A6;

  --akz:  #E5003B;
  --akz2: #FF3A63;
  --akz-zart: #FDE9EE;

  --gut:  #0E8A4F;
  --gut-zart: #E4F4EB;
  --warn: #B26A00;
  --warn-zart: #FBF0DE;
  --schlecht: #C4123A;
  --schlecht-zart: #FBE6EB;

  --schatten: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px rgba(20, 22, 28, .06);
  --rund: 12px;
  --bandbreite: 232px;

  /* Die Polsterung von main - als Werte, weil der YouTube-Arbeitsplatz
     sie aufheben und innen wieder herstellen muss. */
  --main-oben:  24px;
  --main-seite: 28px;
  --main-unten: 40px;

  /* Hoehe der haftenden Kopfzeile. Steht hier, weil sich zwei Regeln
     darauf beziehen muessen - siehe .einst-nav. */
  --kopf-hoch: 60px;

  /* Die Luft UNTER der Kopfzeile. Sie gehoert zum Klebepunkt der
     Blattliste dazu, und genau daran fehlte es: Die Liste sass
     natuerlicherweise 20px unter der Kopfzeile, klebte aber bei 60 -
     also rutschte sie beim ersten Rollen um diese 20px nach oben und
     blieb dann stehen. Fuer sich genommen war jede Zahl richtig; nur
     ihr Verhaeltnis stand nirgends. Jetzt teilen sich beide den Wert,
     und die Liste bewegt sich ueberhaupt nicht mehr. */
  --kopf-luft: 20px;

  /* Die Hoehe der beiden Kaesten im Studio, die nebeneinander stehen:
     das Titelfeld und die Ablage fuers Hintergrundbild. Eine Variable,
     weil sie gleich sein MUESSEN - zwei gleiche Zahlen an zwei Orten
     waeren beim naechsten Umbau zwei verschiedene. */
  --studio-kasten: 104px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:  #08090C;
    --feld:   #101218;
    --feld2:  #161922;
    --linie:  #242938;
    --linie2: #333A4D;

    --ink:  #EEF0F5;
    --ink2: #98A0B4;
    --ink3: #5E6679;

    --akz-zart: #2A0A14;

    --gut:  #3BD07E;
    --gut-zart: #0C2418;
    --warn: #E8A33D;
    --warn-zart: #2A1E08;
    --schlecht: #FF6B85;
    --schlecht-zart: #2A0D14;

    --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
  }
}

/* --- 2  Grundgerüst ---------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Der Platz für den Rollbalken bleibt immer reserviert. Ohne das
   springt bei jedem Wechsel zwischen einem langen und einem kurzen
   Bereich die ganze Seite um seine Breite zur Seite - und im schmalen
   Betrieb wechselt dadurch sogar die Höhe des Menübands, weil sein
   Inhalt mal umbricht und mal nicht. */
html { color-scheme: light dark; scrollbar-gutter: stable; }

body {
  font-family: var(--ff);
  background: var(--grund);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.sprung {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--akz); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.sprung:focus { left: 0; }

/* Gerollt wird das FENSTER, nicht main.
   Ein Versuch, main zum Rollfeld zu machen, ist wieder zurueckgebaut:
   Der Rollbalken sass dann an mains Kante - bei max-width 1500 also
   mitten im Bild -, und die haftende Kopfzeile der Einstellungen klebte
   um die Polsterung versetzt. Wer eine feste Fensterhoehe braucht,
   rechnet sie sich aus den --main-Werten aus; siehe YouTube. */
.rahmen {
  display: grid;
  grid-template-columns: var(--bandbreite) minmax(0, 1fr);
  min-height: 100vh;
}

/* Seitenband - wächst mit, ohne dass es eng wird. */
.band {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px;
  background: var(--feld);
  border-right: 1px solid var(--linie);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marke { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.marke .zeichen { height: 22px; width: auto; display: block; }
/* Das Zeichen trägt schwarze Flächen - im Dunkeln wären sie fort. */
/* currentColor, nicht var(--ink) - beides ergibt hier heute dasselbe,
   aber currentColor ist das richtigere Werkzeug: Es nimmt die Farbe des
   Ortes, an dem das Zeichen steht, statt eine bestimmte Farbe zu
   behaupten. Steht das Logo einmal woanders - in einer farbigen Leiste,
   in der Anmeldemaske, auf einem Knopf -, faerbt es sich mit, ohne dass
   eine zweite Regel dazukommt. Der Kommentar in Core\View sagte das
   ohnehin schon; die Regel hielt sich nur nicht daran. */
.marke .zeichen [fill="black"] { fill: currentColor; }
.marke-t {
  font-size: 12px; letter-spacing: .14em; font-weight: 600;
  color: var(--ink3); text-transform: uppercase;
}
.marke-t b { color: var(--ink); font-weight: 800; }

.band-liste { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }

.band-gruppe {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800;
  padding: 16px 10px 6px;
}
.band-gruppe:first-child { padding-top: 0; }

.band-punkt {
  display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: var(--ink2); padding: 9px 10px; border-radius: 8px;
  position: relative;
}
.band-punkt svg { width: 17px; height: 17px; flex: 0 0 auto; }
.band-punkt:hover { background: var(--feld2); color: var(--ink); }

.band-fuss {
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--linie);
}
/* Der Name ist ein Knopf - er oeffnet das eigene Konto, genau wie das
   Zahnrad daneben. Er soll trotzdem aussehen wie vorher: Ein Kaestchen,
   das erst beim Zeigen darauf verraet, dass es eines ist. */
.benutzer {
  font-size: 12px; color: var(--ink2); font-family: var(--mono);
  padding: 4px 8px; border: 1px solid var(--linie); border-radius: 6px;
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; text-align: left; cursor: pointer;
}
.benutzer:hover { background: var(--feld2); color: var(--ink); border-color: var(--linie2); }

/* Flex-Spalte, damit ein Bereich sich die volle Hoehe holen kann, ohne
   die Polsterung nachzurechnen (siehe YouTube-Arbeitsplatz). Fuer alle
   anderen Bereiche aendert das nichts: Sie sind so hoch wie ihr Inhalt
   und rollen weiter die Seite. */
main { padding: var(--main-oben) var(--main-seite) var(--main-unten); max-width: 1500px; }

/* [hidden] ist eine Vorgabe des BROWSERS (display: none im
   UA-Stylesheet) - und jede eigene display-Regel schlaegt sie, weil
   Autorenregeln vorgehen. Genau daran scheiterten die Schliessen-Knoepfe
   am Studio und an der Playlist-Karte: Beide tragen display: flex, also
   blieb hidden ohne Wirkung, und der Klick sah aus wie kaputt. Einmal
   hier ausdruecklich, dann gilt es ueberall. */
[hidden] { display: none !important; }

.bereich { display: none; }
.bereich.an { display: block; }

.kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }

/* Was in der Kopfzeile rechts steht - Knopf und Lagemeldung. */
.kopf-tun { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kopf-tun .zart { max-width: 46ch; }

/* Eine Kopfzeile, die oben stehen bleibt.
   Der Speichern-Knopf sass frueher in einer eigenen Leiste am Fuss der
   Seite. Das war eine Leiste zu viel: Sie lag ueber dem Inhalt, war rot
   wie ein Hauptknopf und stand doch nur fuer "uebernehmen". Oben in der
   Kopfzeile braucht sie keinen eigenen Platz - und ist trotzdem immer
   da, weil die Kopfzeile mitwandert. */
.kopfzeile.haftend {
  position: sticky; top: 0; z-index: 12;
  min-height: var(--kopf-hoch);
  margin: calc(-1 * var(--main-oben)) calc(-1 * var(--main-seite)) var(--kopf-luft);
  padding: 16px var(--main-seite);
  background: color-mix(in srgb, var(--grund) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

/* --- 3  Bausteine ------------------------------------------------------- */

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.karte {
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 20px;
}
.karte + .karte { margin-top: 20px; }

/* Eine Zwischenueberschrift INNERHALB einer Karte.

   Gebraucht, seit zwei Karten zu einer wurden: "Protokoll" stellte ein,
   "Protokoll lesen" zeigte - eine Einstellung und ihr Ergebnis, in zwei
   Kaesten nebeneinander. Zusammengelegt braucht der zweite Teil eine
   Naht, sonst laufen Formular und Ausgabe ineinander.

   Der Strich steht IMMER, anders als bei .studio-einst-h3: Dort ist die
   erste Ueberschrift der Anfang der Karte, hier folgt sie stets auf
   etwas. */
.karte-h3 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--ink2);
  margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--linie);
  display: flex; align-items: center; gap: 10px;
}

h2 {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
h2.abstand { margin-top: 24px; }

/* ---- Was gerade gilt ----
   Aktiv ist EINE Sache, also sieht sie überall gleich aus: ein dezenter
   Balken am linken Rand und ein Hauch Farbe im Grund. Das Muster kommt
   aus dem Anwendungsband; die Videoliste und die Blattliste der
   Einstellungen folgen ihm, statt sich je etwas Eigenes auszudenken
   (vorher: rosa Fläche mit rotem Rahmen, weisse Karte mit Schatten). */
.band-punkt.an,
.yt-eintrag.an,
.einst-punkt.an {
  color: var(--ink); background: var(--akz-zart); position: relative;
}
.band-punkt.an::before,
.yt-eintrag.an::before,
.einst-punkt.an::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--akz); border-radius: 0 3px 3px 0;
}

.zart { font-size: 12px; color: var(--ink3); line-height: 1.55; }
.abstand-unten { margin-bottom: 16px; }

code {
  font-family: var(--mono); font-size: .92em;
  background: var(--feld2); border: 1px solid var(--linie);
  padding: 1px 5px; border-radius: 4px; color: var(--ink2);
}

.feld { margin-bottom: 16px; }
.feld:last-child { margin-bottom: 0; }
.feld label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 6px;
}
.feld label em {
  font-style: normal; font-size: 11px; color: var(--ink3); font-weight: 500;
}
.feld label em.pflicht { color: var(--akz); font-weight: 600; }
.feld .zart { margin-top: 6px; }

input[type="text"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  width: 100%; font: inherit; font-size: 14px;
  background: var(--feld2); color: var(--ink);
  border: 1px solid var(--linie); border-radius: 8px;
  padding: 10px 12px; transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; line-height: 1.55; min-height: 110px; }
select[multiple] { padding: 6px; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--akz);
  box-shadow: 0 0 0 3px var(--akz-zart);
}
::placeholder { color: var(--ink3); }

.zaehler { font-family: var(--mono); font-size: 11px; }
.zaehler[data-eng="ja"] { color: var(--warn); }
.zaehler[data-eng="drueber"] { color: var(--schlecht); font-weight: 700; }

.knopf {
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--feld2); color: var(--ink);
  border: 1px solid var(--linie2); border-radius: 8px;
  padding: 9px 14px; cursor: pointer;
  /* Auch als <a> - "Zugang erteilen" fuehrt aus der Seite heraus zu
     Google, ist also ein Verweis und kein Knopf. Aussehen soll es
     trotzdem wie einer, und Knoepfe sind nicht unterstrichen. */
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.knopf:hover:not(:disabled) { border-color: var(--ink3); }
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Der Hauptknopf ist der wichtigste, WEIL ER FARBE HAT - nicht, weil er
   groesser ist. Hier standen einmal 11px Polsterung und 14px Schrift
   gegen 9px und 13px am gewoehnlichen Knopf; nebeneinander waren die
   beiden dann verschieden hoch ("Speichern" neben "Schliessen"), und das
   sah nach einem Fehler aus, weil es einer war. Jetzt unterscheidet nur
   noch die Farbe, und die Breite: etwas mehr Luft links und rechts. */
.knopf.haupt {
  background: var(--akz); border-color: var(--akz); color: #fff;
  padding: 9px 18px;
}
.knopf.haupt:hover:not(:disabled) { background: var(--akz2); border-color: var(--akz2); }
.knopf.schmal { font-size: 12px; padding: 6px 10px; }
.knopf.schmal svg { width: 14px; height: 14px; }
.knopf.gefahr { color: var(--schlecht); border-color: var(--schlecht); }
.knopf.gefahr:hover:not(:disabled) { background: var(--schlecht-zart); }

.knopf-flach {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: none; border: 1px solid transparent; color: var(--ink2);
  cursor: pointer; text-decoration: none; font: inherit; font-size: 18px;
  flex: 0 0 auto;
}
.knopf-flach:hover { background: var(--feld2); border-color: var(--linie); color: var(--ink); }
.knopf-flach svg { width: 18px; height: 18px; }

.segment { display: flex; gap: 4px; background: var(--feld2);
  border: 1px solid var(--linie); border-radius: 9px; padding: 4px; }
.segment button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 0; border-radius: 6px; padding: 8px 6px;
  color: var(--ink2); cursor: pointer;
}
.segment button svg { width: 15px; height: 15px; }
.segment button:hover { color: var(--ink); }
.segment button.an,
/* Das Studio setzt aria-pressed statt einer Klasse - beides ist
   dasselbe Segment, also sieht auch beides gleich aus. */
.segment button[aria-pressed="true"] {
  background: var(--feld); color: var(--ink); box-shadow: var(--schatten);
}
.segment.gross { margin-bottom: 18px; }
.segment.gross button { font-size: 13px; padding: 9px 8px; }

/* Schalter statt Haken - an oder aus soll man sehen */
.schalterfeld { margin-bottom: 18px; }
.schalter {
  display: flex !important; align-items: center; gap: 10px;
  cursor: pointer; margin-bottom: 0 !important;
  justify-content: flex-start !important;
}
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter .riegel {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: var(--linie2); position: relative; transition: background .14s;
}
.schalter .riegel::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--feld); box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .14s;
}
.schalter input:checked + .riegel { background: var(--gut); }
.schalter input:checked + .riegel::after { transform: translateX(16px); }
.schalter input:focus-visible + .riegel { box-shadow: 0 0 0 3px var(--akz-zart); }
.schalter-t { font-size: 13px; font-weight: 600; color: var(--ink); }

/* Ein Schalter, der bewusst feststeht - etwa der eigene Admin-Rang.
   Er wird nicht versteckt: Man soll sehen, dass der Rang gilt, und dass
   er hier nicht abzulegen ist. */
.schalter.fest { cursor: default; opacity: .7; }
.schalter.fest .riegel { cursor: default; }

/* Geheimfeld */
.geheim { display: flex; gap: 6px; align-items: center; }
.geheim input { flex: 1 1 auto; }
.geheim .knopf-flach { border-color: var(--linie); }
.geheim-lage { font-family: var(--mono); font-size: 11px; }
.geheim-lage[data-zustand="gesetzt"] { color: var(--gut); }
.geheim-lage[data-zustand="leer"]    { color: var(--ink3); }

.hinweis-warn {
  font-size: 12.5px; color: var(--warn); background: var(--warn-zart);
  border: 1px solid var(--warn); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 16px; line-height: 1.5;
}

.befunde { list-style: none; display: grid; gap: 2px; }
.befunde li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 9px 12px; border-radius: 8px;
  background: var(--feld2); border: 1px solid var(--linie); font-size: 13px;
}
.befunde .befund-t { color: var(--ink2); font-weight: 600; }
.befunde .befund-w { color: var(--ink); font-family: var(--mono); font-size: 12px; text-align: right; }
.befunde li[data-gut="ja"]   { border-color: var(--gut); background: var(--gut-zart); }
.befunde li[data-gut="ja"]   .befund-w { color: var(--gut); }
.befunde li[data-gut="nein"] { border-color: var(--warn); background: var(--warn-zart); }
.befunde li[data-gut="nein"] .befund-w { color: var(--warn); }

/* Der System-Check kennt drei Stufen. "fast" laeuft, will aber gesehen
   werden; "schlecht" gehoert behoben - und nur das ist rot, damit Rot
   etwas bedeutet. */
.befunde li[data-gut="fast"] { border-color: var(--warn); background: var(--warn-zart); }
.befunde li[data-gut="fast"] .befund-w { color: var(--warn); }
.befunde li[data-gut="schlecht"] { border-color: var(--schlecht); background: var(--schlecht-zart); }
.befunde li[data-gut="schlecht"] .befund-w { color: var(--schlecht); }
.befunde li[data-gut="offen"] { opacity: .6; }

/* Ein Befund darf einen Rat mitbringen - zweite Zeile, ganze Breite. */
.befunde li { flex-wrap: wrap; }
.befund-rat { flex-basis: 100%; font-size: 11.5px; color: var(--ink2); margin-top: 3px; }

/* --- 4  Broadcast ------------------------------------------------------- */

/* Die drei Kacheln des Broadcasts liegen in EINEM Raster, nicht in
   einer Karte plus einem Raster darunter. Vorher hing der Abstand
   zwischen oben und unten an ".karte + .karte", das zwischen den
   Geschwistern gar nicht griff - und innerhalb der Spalten dafuer die
   zweite Karte um 20px nach unten schob. Ein Raster kennt nur einen
   Abstand, und der gilt dann ueberall gleich. */
.broadcast-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
/* Die Verfassen-Kachel nimmt die ganze Breite, die beiden anderen je
   eine Spalte - und stehen dadurch oben wie unten auf einer Linie. */
.broadcast-raster > .breit { grid-column: 1 / -1; }
.broadcast-raster > .karte { margin-top: 0; }

/* Beitrag und E-Mail nebeneinander - eine Maske, zwei Fassungen.
   Unter 1000px untereinander: Zwei Textfelder nebeneinander sind auf
   einem schmalen Fenster keine Uebersicht, sondern zwei schmale Spalten. */
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.haelfte { min-width: 0; }
.haelfte + .haelfte { border-left: 1px solid var(--linie); padding-left: 26px; }

h2.mit-zeichen { display: flex; align-items: center; gap: 8px; }
h2.mit-zeichen svg { width: 16px; height: 16px; color: var(--ink2); }

.zart code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px; background: var(--feld2); border: 1px solid var(--linie);
  border-radius: 4px; padding: 1px 4px;
}

@media (max-width: 1000px) {
  .paar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .haelfte + .haelfte { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: 22px; }
}

.ablage {
  border: 1.5px dashed var(--linie2); border-radius: 10px;
  background: var(--feld2); padding: 18px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ablage:hover, .ablage:focus-visible, .ablage.drueber {
  border-color: var(--akz); background: var(--akz-zart); outline: none;
}
.ablage-leer { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ablage-leer svg { width: 24px; height: 24px; color: var(--ink3); }
.ablage-leer span { font-size: 12px; color: var(--ink2); }
.ablage-voll { position: relative; }
.ablage-voll img {
  display: block; width: 100%; max-height: 220px; object-fit: contain;
  border-radius: 8px; background: var(--grund);
}
.entfernen {
  position: absolute; top: 6px; right: 6px;
  background: var(--feld); border: 1px solid var(--linie);
  line-height: 1; color: var(--ink2);
}

.kanalliste { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.kanal-gruppe {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800; padding: 12px 10px 4px;
}
.kanal-gruppe:first-child { padding-top: 0; }
.kanal label {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.kanal label:hover { background: var(--feld2); }
.kanal input { accent-color: var(--akz); width: 15px; height: 15px; cursor: pointer; }
.kanal-name { font-size: 14px; font-weight: 600; }

.tun { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.ergebnisse { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ergebnisse .leer { font-size: 12px; color: var(--ink3); padding: 10px 0; }
.ergebnisse li.zeile {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--feld2); font-size: 13px;
}
.ergebnisse li.zeile .kn { font-weight: 700; }
.ergebnisse li.zeile .ms { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.ergebnisse li.zeile .txt { color: var(--ink2); }
.ergebnisse li.zeile a { color: var(--akz); }
.ergebnisse li[data-zustand="ok"]            { border-color: var(--gut); background: var(--gut-zart); }
.ergebnisse li[data-zustand="fehler"]        { border-color: var(--schlecht); background: var(--schlecht-zart); }
.ergebnisse li[data-zustand="uebersprungen"] { border-style: dashed; }
.ergebnisse li[data-zustand="laeuft"]        { border-color: var(--warn); background: var(--warn-zart); }

/* Geplante E-Mails - was noch gestoppt werden kann */
.geplante { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.geplante .leer { font-size: 12px; color: var(--ink3); padding: 10px 0; }
/* Ein wartender Vorgang, nicht mehr eine einzelne Mail: Betreff und
   Termin oben, die betroffenen Kanaele darunter, die Griffe rechts. */
/* :not(.leer), sonst traegt auch das "Noch nicht nachgesehen." den
   Warnrahmen - eine Warnung darueber, dass noch nichts passiert ist. */
.geplante li:not(.leer) {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 12px; border-radius: 8px;
  border: 1px solid var(--warn); background: var(--warn-zart); font-size: 13px;
}
.gp-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gp-betreff { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-termin { font-family: var(--mono); font-size: 11px; color: var(--warn); white-space: nowrap; }
.gp-tun { display: flex; gap: 6px; justify-content: flex-end; }

/* --- 5  Einstellungen --------------------------------------------------- */

.einst-rahmen {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px; align-items: start;
}

/* Unterhalb der haftenden Kopfzeile, nicht darunter verschwindend.

   Der Wert MUSS zur Hoehe der Kopfzeile passen, und zwar nach unten:
   Ist er groesser als der natuerliche Abstand der Liste vom oberen
   Rand, schiebt sticky sie schon bei Rollstand null nach unten - und
   zwar so weit, wie ihr Rasterfeld es zulaesst. Genau das war der
   Grund, warum die Liste beim Blattwechsel sprang: Auf einem langen
   Blatt gab das Feld nach, auf einem kurzen nicht. Hier stand einmal
   eine feste 92, die nach einer Aenderung an der Kopfzeile nicht mehr
   passte. Jetzt teilen sich beide einen Wert. */
.einst-nav {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: calc(var(--kopf-hoch) + var(--kopf-luft));
}
.einst-gruppe {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800; padding: 16px 10px 6px;
}
.einst-gruppe:first-child { padding-top: 0; }
.einst-punkt {
  display: flex; align-items: center; gap: 9px;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left;
  background: none; border: 0; cursor: pointer;
  color: var(--ink2); padding: 8px 10px; border-radius: 8px;
}
.einst-punkt:hover { background: var(--feld2); color: var(--ink); }


.punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink3); flex: 0 0 auto;
}
.punkt[data-zustand="bereit"]         { background: var(--gut); }
.punkt[data-zustand="ungeprueft"]     { background: var(--warn); }
.punkt[data-zustand="unvollstaendig"] { background: var(--ink3); }
.punkt[data-zustand="abgeschaltet"]   { background: var(--linie2); }
.punkt[data-zustand="fehler"]         { background: var(--schlecht); }

.einst-blatt { display: none; }
.einst-blatt.an { display: block; }

/* Titelblock links, Marke und Speichern rechts.
   Vorher stand hier space-between - mit zwei Kindern richtig, mit dem
   dazugekommenen Speichern-Knopf aber falsch: Drei Kinder verteilt
   space-between auf links, MITTE und rechts. Ein wachsender
   Titelblock haelt die Reihenfolge unabhaengig von der Anzahl. */
.kanal-kopf {
  display: flex; align-items: flex-start;
  gap: 14px; margin-bottom: 14px;
}
.kanal-kopf > div:first-child { flex: 1 1 auto; min-width: 0; }
.kanal-kopf h2 { margin-bottom: 4px; }
.marke-art {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink2); background: var(--feld2);
  border: 1px solid var(--linie); border-radius: 999px; padding: 3px 9px;
  flex: 0 0 auto;
}

.kanal-lage {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 20px;
  background: var(--feld2); border: 1px solid var(--linie); border-radius: 8px;
}
.kanal-lage .befund { font-size: 12px; color: var(--ink2); flex: 1 1 200px; }
.kanal-tun { display: flex; gap: 6px; flex-wrap: wrap; }

/* Google Business: die geholten Kennungen zur Auswahl.
   Der Block steht unter den Feldern, die er fuellt - die Linie sagt,
   dass hier nichts mehr eingetippt, sondern ausgewaehlt wird. */
.kennungen-abruf { border-top: 1px solid var(--linie); padding-top: 16px; margin-top: 16px; }
.gb-wahl { margin-top: 14px; }

.marke-zustand {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--feld); color: var(--ink2); border: 1px solid var(--linie);
}
.marke-zustand[data-zustand="bereit"]         { background: var(--gut-zart); color: var(--gut); border-color: var(--gut); }
.marke-zustand[data-zustand="fehler"]         { background: var(--schlecht-zart); color: var(--schlecht); border-color: var(--schlecht); }
.marke-zustand[data-zustand="ungeprueft"]     { background: var(--warn-zart); color: var(--warn); border-color: var(--warn); }
.marke-zustand[data-zustand="unvollstaendig"] { background: var(--warn-zart); color: var(--warn); border-color: var(--warn); }

/* Listen mit beliebig vielen Zeilen */
.liste { display: flex; flex-direction: column; gap: 6px; }
.liste-kopf, .liste-zeile {
  display: grid; grid-template-columns: 1fr 1fr 32px; gap: 6px; align-items: center;
}
.liste-kopf span {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); font-weight: 700; padding-left: 2px;
}
.liste-zeilen { display: flex; flex-direction: column; gap: 6px; }
.liste-mehr { align-self: flex-start; margin-top: 4px; }

/* Konten */
.konten { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.konten li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 8px;
  background: var(--feld2); border: 1px solid var(--linie);
}
.konto-n { font-weight: 600; font-size: 14px; }
.konto-ich {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--akz); background: var(--akz-zart);
  border: 1px solid var(--akz); border-radius: 999px; padding: 2px 8px;
}
.konten li .knopf { margin-left: auto; }
.konten li .knopf + .knopf { margin-left: 0; }

.konto-neu {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
}
.konto-neu .feld { margin-bottom: 0; }

/* Konten: Kopfzeile, Rang und Rechte */
.konten li { flex-direction: column; align-items: stretch; gap: 10px; }
.konto-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.konto-tun { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.konto-rang {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gut); background: var(--gut-zart);
  border: 1px solid var(--gut); border-radius: 999px; padding: 2px 8px;
}
.konto-rechte {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--linie);
}
.konto-bereiche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.haken {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink2); cursor: pointer;
}
.haken input { accent-color: var(--akz); width: 15px; height: 15px; cursor: pointer; }

/* Protokoll und Diagnose - beides Text, den man lesen und kopieren soll */
.log-tun {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.log-tun select { width: auto; min-width: 150px; }

.log, .diagnose {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  background: var(--feld2); color: var(--ink2);
  border: 1px solid var(--linie); border-radius: 8px;
  padding: 12px; margin: 0;
  max-height: 420px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.diagnose { margin-bottom: 14px; max-height: 340px; }

h2 .knopf { order: 3; margin-left: 12px; }

/* Die Meldung einer Einstellungskarte steht unter ihren Feldern - dort,
   wo der Blick nach dem Speichern ohnehin ist. */
.einst-karte-lage:empty { display: none; }
.einst-karte-lage { margin-top: 14px; }

/* Mehrzeiliges Geheimnis - ein privater Schluessel ist Text, aber
   keiner, den man liest. Also Schreibmaschinenschrift und kein Umbruch
   an Wortgrenzen, damit ein PEM-Block aussieht wie einer. */
textarea.geheim-lang {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  min-height: 130px; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.geheim-lage .knopf { margin-left: 8px; vertical-align: middle; }

/* --- Vorgangsmappe -------------------------------------------------------
   Ein Vorgang ist kein Listeneintrag, sondern eine kleine Akte: oben
   Zustand, Betreff und Termin, darunter die Kanaele mit dem, was aus
   ihnen wurde, und ganz unten die beiden Griffe. Deshalb Karten und
   keine Tabellenzeilen - eine Zeile je Kanal waere eine Liste, in der
   man den Vorgang nicht mehr sieht. */

.vorgaenge { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vorgaenge .leer { font-size: 12px; color: var(--ink3); padding: 10px 0; }

.vorgaenge > li:not(.leer) {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--feld2);
}
/* Was noch wartet, faellt ins Auge - es ist das Einzige, was man hier
   noch beeinflussen kann (und zwar im Broadcast, nicht hier). */
.vorgaenge > li[data-zustand="offen"] { border-color: var(--warn); background: var(--warn-zart); }

.vg-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vg-titel {
  font-weight: 600; font-size: 14px; flex: 1 1 200px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vg-termin { font-family: var(--mono); font-size: 11px; color: var(--ink3); white-space: nowrap; }
.vg-unter { font-family: var(--mono); font-size: 11px; margin: 0; }

.vg-marke {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; flex: 0 0 auto;
  background: var(--feld); border: 1px solid var(--linie); color: var(--ink2);
}
.vg-marke[data-zustand="offen"]       { color: var(--warn); border-color: var(--warn); background: var(--warn-zart); }
.vg-marke[data-zustand="erledigt"]    { color: var(--gut); border-color: var(--gut); background: var(--gut-zart); }
.vg-marke[data-zustand="gestoppt"]    { color: var(--ink3); }
.vg-marke[data-zustand="gescheitert"] { color: var(--schlecht); border-color: var(--schlecht); background: var(--schlecht-zart); }

.vg-kanaele { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.vg-kanaele li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px;
  align-items: baseline; font-size: 12.5px;
  padding: 6px 9px; border-radius: 6px;
  background: var(--feld); border: 1px solid var(--linie);
}
.vg-kanal-name { font-weight: 600; }
.vg-kanal-text { color: var(--ink2); }
.vg-kanaele li[data-zustand="ok"],
.vg-kanaele li[data-zustand="erledigt"] { border-color: var(--gut); }
.vg-kanaele li[data-zustand="fehler"]   { border-color: var(--schlecht); }
.vg-kanaele li[data-zustand="offen"]    { border-color: var(--warn); }

.vg-bild { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vg-bild img {
  width: 96px; height: 64px; object-fit: cover; border-radius: 6px;
  background: var(--grund); border: 1px solid var(--linie); flex: 0 0 auto;
}
.vg-bild a { color: var(--akz); word-break: break-all; font-size: 12px; }

.vg-tun { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- 6  Fenster --------------------------------------------------------- */

/* Zwei Dinge waren hier falsch, und beide kamen aus derselben Ecke.
   1  Der Reset ganz oben setzt `* { margin: 0 }` - auch am <dialog>.
      Ein Dialog im Top-Layer zentriert sich aber ueber `margin: auto`;
      ohne das klebte das Fenster in der linken oberen Ecke.
   2  Fensterrahmen UND Werkteil trugen je eine eigene Hoehenbremse
      (80vh hier, 80vh-60px dort). Sobald der Inhalt lang wurde, rollten
      beide - zwei Leisten uebereinander. Jetzt bremst nur der Rahmen,
      und nur der Werkteil rollt. */
.fenster {
  position: fixed; inset: 0; margin: auto;
  width: min(640px, calc(100vw - 32px));
  max-height: min(85vh, 780px);
  padding: 0; border: 1px solid var(--linie);
  border-radius: var(--rund); background: var(--feld); color: var(--ink);
  box-shadow: var(--schatten);
  overflow: hidden;
}
/* Nur im geoeffneten Zustand ein Flex-Kasten - ein geschlossener
   <dialog> muss `display: none` behalten, sonst steht er auf der Seite. */
.fenster[open] { display: flex; flex-direction: column; }
.fenster::backdrop { background: rgba(8, 9, 12, .55); backdrop-filter: blur(3px); }

.fenster-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--linie);
  background: var(--feld); flex: 0 0 auto;
}
.fenster-kopf h2 { margin: 0; font-size: 13px; letter-spacing: .1em; }
.fenster-kopf h2::after { display: none; }

.fenster-werk { padding: 22px 24px 26px; overflow-y: auto; flex: 1 1 auto; }

/* Das Fenster "Mein Konto". Eine Zwischenueberschrift, damit die
   Auskunft oben (wer bin ich, was darf ich) und das Formular darunter
   nicht ineinanderlaufen. */
.konto-h3 {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--ink3); margin-bottom: 12px;
}
.konto-fenster-tun { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.konto-fenster-tun .zart { flex: 1 1 12ch; }

/* Der zweite Faktor steht unter dem Passwort, deutlich abgesetzt. Das
   Geheimnis und die Wiederherstellungscodes werden abgeschrieben - also
   in Festbreite, in der sich kein Zeichen ins Nachbarfeld verliest. */
#konto-totp { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); }
.totp-geheimnis { font-family: var(--mono); letter-spacing: .06em; }
/* Der QR-Code bleibt schwarz auf weiss, auch im Dunkelbetrieb - hell auf
   dunkel lesen nicht alle Apps. Die Ruhezone steckt im SVG selbst. */
.totp-qr { width: 220px; max-width: 100%; }
.totp-qr svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.totp-reserve {
  font-family: var(--mono); font-size: 14px; line-height: 1.9;
  columns: 2; padding: 12px 16px; border-radius: 8px;
  background: var(--feld2); border: 1px solid var(--linie);
}

.anleitung-ziel { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.anleitung-dauer { margin-bottom: 18px; }

.schritte { list-style: none; counter-reset: schritt; display: grid; gap: 16px; }
.schritte li {
  counter-increment: schritt; position: relative; padding-left: 38px;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--akz-zart); color: var(--akz);
  border: 1px solid var(--akz);
  font-size: 12px; font-weight: 800; font-family: var(--mono);
}
.schritte h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.schritte p { font-size: 13px; color: var(--ink2); line-height: 1.6; }
.schritt-link {
  display: inline-block; margin-top: 6px; font-size: 12.5px;
  color: var(--akz); text-decoration: none; font-weight: 600;
}
.schritt-link:hover { text-decoration: underline; }

.achtung {
  margin-top: 22px; padding: 14px;
  background: var(--warn-zart); border: 1px solid var(--warn); border-radius: 8px;
}
.achtung h3 {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--warn); font-weight: 800; margin-bottom: 8px;
}
.achtung ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.achtung li { font-size: 12.5px; color: var(--ink2); line-height: 1.55; }

/* --- 7  YouTube --------------------------------------------------------- */

/* Der YouTube-Bereich ist eine Werkbank, kein Text.
   Ueberschrift und Kartenkanten stehen, gerollt wird nur in der Liste
   und in der rechten Spalte. Dafuer nimmt der Bereich genau eine
   Fensterhoehe ein - und hebt die Polsterung von main auf, um sie innen
   selbst zu setzen. Der Gewinn: Das Rollfeld der rechten Spalte reicht
   bis an die Fensterkante, der Rollbalken sitzt also dort, wo man ihn
   sucht, und nicht neunzig Pixel weiter innen.

   Das minmax(0, 1fr) fuer die Rasterzeile ist der entscheidende Teil -
   eine auto-Zeile waere so hoch wie das Studio und liefe unten hinaus. */
.bereich[data-bereich="youtube"].an {
  display: flex; flex-direction: column;
  height: 100vh;
  margin: calc(-1 * var(--main-oben)) calc(-1 * var(--main-seite)) calc(-1 * var(--main-unten));
  padding: var(--main-oben) 0 0 var(--main-seite);
}

/* Eine Werkbank bekommt keine Zeilenlaenge vorgeschrieben. */
main:has(> .bereich[data-bereich="youtube"].an) { max-width: none; }

.yt-rahmen {
  display: grid; grid-template-columns: 330px minmax(0, 1fr);
  gap: 20px; align-items: stretch;
}
.bereich[data-bereich="youtube"] .yt-rahmen {
  flex: 1 1 auto; min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

/* Das Seitenband fuellt seine Spalte; gerollt wird darin nur die Liste. */
.yt-liste-karte {
  min-height: 0;
  display: flex; flex-direction: column;
  /* Der Platz unter dem Seitenband ist Absicht - er nimmt der Karte den
     abgeschnittenen Eindruck. Die rechte Spalte hat ihn innen. */
  margin-bottom: var(--main-oben);
}
.yt-liste { min-height: 0; flex: 1 1 auto; }

.yt-liste { list-style: none; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.yt-liste .leer { font-size: 12px; color: var(--ink3); padding: 10px 0; }
/* EINE Zeile, drei Spalten: Ampel, Vorschaubild, Titel.
   Vorher waren es zwei Zeilen - Bild und Text oben, darunter der
   beschriftete Sichtbarkeitsschalter ueber die volle Breite -, dazu
   eine Datumszeile im Text. Zusammen war ein Eintrag rund doppelt so
   hoch wie sein Titel. Jetzt bestimmt der Titel die Hoehe: zwei Zeilen,
   und daneben steht alles andere. */
.yt-eintrag {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
}
.yt-eintrag:hover { background: var(--feld2); }
.yt-eintrag img {
  width: 72px; height: 41px; object-fit: cover; border-radius: 4px;
  background: var(--grund); flex: 0 0 auto;
}
.yt-eintrag > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yt-titel {
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Sichtbarkeit und Verarbeitungsstand des Videos.
   Nicht gelistet und privat sind keine Fehler - aber man muss sie sehen,
   ohne das Video erst anzuklicken. Deshalb Farbe nur da, wo sie etwas
   bedeutet: Grau fuer oeffentlich, Warnton fuer alles, was nicht frei
   erreichbar ist, Rot nur fuer wirklich kaputt. */
.yt-marken { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.yt-marke {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--linie2); color: var(--ink3); background: var(--feld);
  white-space: nowrap;
}
.yt-marke[data-stand="unlisted"] { color: var(--warn); border-color: var(--warn); background: var(--warn-zart); }
.yt-marke[data-stand="private"]  { color: var(--ink2); border-color: var(--linie2); background: var(--feld2); }
.yt-marke[data-stand="arbeit"]   { color: var(--schlecht); border-color: var(--schlecht); background: var(--schlecht-zart); }

/* Drei Abschnitte in einer Karte: Kanal, Playlists, Videos. Die
   Ueberschriften tragen den Abstand, damit die Karte ohne Trennlinien
   auskommt - die Linie steckt schon in h2::after. */
.yt-liste-karte > h2 { margin-bottom: 8px; }
.yt-liste-karte > h2:not(:first-child) { margin-top: 18px; }

.yt-kanal { font-family: var(--mono); font-size: 11px; margin-bottom: 0; }

/* „Videos (11)" - die Zahl gehört zur Überschrift, nicht in eine
   eigene Zeile darunter. */
.yt-zahl { font-weight: 700; color: var(--ink3); letter-spacing: .06em; }

.yt-band-tun { display: flex; gap: 8px; }
.yt-band-tun .knopf { flex: 1 1 0; justify-content: center; }

/* ---- Ampel und Auswahl -------------------------------------------------

   Die Sichtbarkeit haengt nicht mehr als beschrifteter Schalter unter
   dem Eintrag, sondern steht als senkrechte Ampel daneben: oben Rot,
   Mitte Gelb, unten Gruen. Wer eine Ampel sieht, muss sie nicht lesen -
   und genau darum steht auf ihr nichts. Was eine Lampe ausloest, sagt
   ihr title.

   ERSTE SPALTE, ZWEI BEWOHNER. Ampel und Haekchen sitzen im selben
   Rasterfeld, immer nur eines ist zu sehen. Beim Wechsel in den
   Auswahlbetrieb rueckt dadurch nichts zur Seite. */
.yt-wahlspalte {
  display: grid; place-items: center;
  width: 14px; flex: 0 0 auto;
}
.yt-wahlspalte > * { grid-area: 1 / 1; }

.yt-ampel {
  display: flex; flex-direction: column; gap: 3px;
  padding: 3px; border-radius: 999px;
  background: var(--feld2); border: 1px solid var(--linie2);
}
.yt-lampe {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linie2); background: var(--feld);
  cursor: pointer; display: block;
  /* Die Lampe ist klein; die Trefferflaeche muss es nicht sein. */
  position: relative;
}
.yt-lampe::after { content: ""; position: absolute; inset: -3px; }
.yt-lampe:hover { border-color: var(--ink3); }

/* Nur die geltende Lampe leuchtet. Die anderen bleiben blass - eine
   Ampel, an der alles brennt, sagt nichts. */
.yt-lampe[aria-pressed="true"] { border-color: transparent; }
.yt-lampe[aria-pressed="true"][data-farbe="rot"]   { background: var(--schlecht); }
.yt-lampe[aria-pressed="true"][data-farbe="gelb"]  { background: var(--warn); }
.yt-lampe[aria-pressed="true"][data-farbe="gruen"] { background: var(--gut); }

/* Ein Hauch der eigenen Farbe beim Zeigen darauf - damit man vor dem
   Klick sieht, welche Lampe man trifft. */
.yt-lampe[data-farbe="rot"]:hover   { background: var(--schlecht-zart); }
.yt-lampe[data-farbe="gelb"]:hover  { background: var(--warn-zart); }
.yt-lampe[data-farbe="gruen"]:hover { background: var(--gut-zart); }

/* Waehrend YouTube antwortet: nicht noch einmal draufschlagen. */
.yt-ampel[data-arbeit] { opacity: .45; pointer-events: none; }

/* Im Auswahlbetrieb sind ALLE Ampeln fort - die Frage lautet dann
   nicht mehr "was tut dieses Video", sondern "was tun diese Videos".
   Beide gleichzeitig zu zeigen hiesse raten lassen, welche gilt. */
/* Im Auswahlbetrieb sind die Ampeln unsichtbar - aber ihr Platz bleibt,
   sonst rueckte die ganze Liste zur Seite. */
.yt-liste.waehlen .yt-ampel { visibility: hidden; }

/* DER GRUND SAGT ES, sonst nichts.
   Hier stand einmal ein Kaestchen zum Ankreuzen. Es war ueberfluessig:
   Welche Eintraege markiert sind, sieht man an ihrem Grund, und zwar
   ueber die ganze Liste auf einen Blick. Ein Kaestchen daneben sagte
   dasselbe noch einmal, nur kleiner - und es kostete die Spalte, in der
   die Ampel steht.

   Der Balken links ist derselbe wie ueberall, wo etwas aktiv ist
   (Menueband, Videoliste, Blattliste) - nur in der Akzentfarbe statt
   in der der Schrift, weil "markiert" etwas anderes ist als "offen". */
.yt-eintrag.gewaehlt {
  background: var(--akz-zart);
  border-color: color-mix(in srgb, var(--akz) 35%, transparent);
}
.yt-eintrag.gewaehlt::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--akz);
}
.yt-eintrag { position: relative; }

/* ---- Das Aktionen-Menue ------------------------------------------------ */

.yt-aktionen {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; margin-bottom: 8px;
  border: 1px solid var(--linie2); border-radius: 8px;
  background: var(--feld2);
}
.yt-aktionen[data-arbeit] { opacity: .45; pointer-events: none; }

.yt-aktionen-kopf { display: flex; align-items: center; gap: 8px; }
.yt-aktionen-zahl {
  flex: 1 1 auto;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink2);
}
.yt-aktionen-kopf .knopf-flach { font-size: 11px; padding: 2px 8px; width: auto; height: auto; }

/* Dieselbe Ampel, hier beschriftet: Der Klick wirkt auf viele Videos
   auf einmal, da wiegt jede Eindeutigkeit doppelt. */
.yt-aktionen-ampel { display: flex; flex-direction: column; gap: 3px; }
.yt-stapel-lampe {
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 11.5px; font-weight: 600; text-align: left;
  color: var(--ink2); background: var(--feld); cursor: pointer;
  padding: 4px 8px; border: 1px solid var(--linie2); border-radius: 6px;
}
.yt-stapel-lampe:hover { background: var(--feld2); color: var(--ink); border-color: var(--ink3); }
.yt-stapel-lampe .lampe {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--linie2);
}
.yt-stapel-lampe[data-farbe="rot"]   .lampe { background: var(--schlecht); border-color: transparent; }
.yt-stapel-lampe[data-farbe="gelb"]  .lampe { background: var(--warn);     border-color: transparent; }
.yt-stapel-lampe[data-farbe="gruen"] .lampe { background: var(--gut);      border-color: transparent; }

.yt-aktionen-tun { display: flex; gap: 6px; }
.yt-aktionen-tun .knopf { flex: 1 1 0; justify-content: center; }

/* Kopf der Video-Karte: Bild, Angaben, Knoepfe.
   Speichern steht OBEN, wie in den Einstellungen - niemand soll ans
   Ende einer langen Karte rollen muessen, um zu sichern. Und der Knopf
   bleibt stumm, solange sich nichts geaendert hat: So sieht man auf
   einen Blick, an welcher Karte gearbeitet wurde. */
.yt-werk-kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: start; margin-bottom: 20px;
}
.yt-werk-meta { min-width: 0; }
/* Links speichern, rechts schliessen - gleich breit, damit keiner der
   beiden wichtiger aussieht, als er ist. */
/* stretch, nicht start: Zwei Knoepfe nebeneinander sind gleich hoch,
   auch wenn einer von beiden je wieder eine andere Polsterung bekommt. */
.yt-werk-tun { display: flex; gap: 8px; align-items: stretch; }
.yt-werk-tun .knopf {
  justify-content: center; white-space: nowrap;
  flex: 1 1 0; min-width: 118px;
}

/* ---- Thumbnail = Ablage ----
   Das Bild, das gilt, ist zugleich die Fläche für ein neues. Beim Zeigen
   darauf legt sich ein Schleier darüber und gibt die zwei Wege frei:
   eine Datei wählen oder eine bauen. Getrennt kostete das eine
   gestrichelte Kiste und drei Zeilen Erklärung - für dieselbe Sache. */
.yt-bild {
  position: relative; width: 280px; aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden; padding: 0;
  border: 1px solid var(--linie); background: var(--grund);
  cursor: pointer; flex: 0 0 auto;
}
.yt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-bild .ablage-leer,
.yt-bild .ablage-voll { position: absolute; inset: 0; padding: 0; border: 0; }

.yt-bild-leer {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; color: var(--ink3);
}
.yt-bild .entfernen { top: 6px; right: 6px; }

.yt-bild-tun {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(20, 22, 28, .62);
  opacity: 0; transition: opacity .12s ease;
}
.yt-bild:hover .yt-bild-tun,
.yt-bild:focus-visible .yt-bild-tun,
.yt-bild:focus-within .yt-bild-tun { opacity: 1; }
.yt-bild-tun .knopf { pointer-events: none; }
.yt-bild-tun button.knopf { pointer-events: auto; }

/* Ein neues Bild liegt bereit: sichtbar machen, auch ohne Zeigen. */
.yt-bild.drueber { border-color: var(--akz); }

.yt-werk-kopf > img {
  width: 200px; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 8px; background: var(--grund); border: 1px solid var(--linie);
  flex: 0 0 auto;
}
.yt-werk-kopf h2 { margin-bottom: 6px; }
/* Klasse statt Kennung: Die Video-Karte gibt es mehrfach. */
.yt-id { font-family: var(--mono); }

/* ---- Playlists ----
   Eine Liste, die man anfassen kann. Ziehen fuer weite Wege, die Pfeile
   fuer einen Schritt - beides ist genau ein Aufruf an YouTube, weite
   Wege kosten also nicht mehr als kurze. */
.pl-karte { display: flex; flex-direction: column; gap: 14px; }
.pl-karte > h2 { margin-bottom: 0; }

.pl-kopf { display: flex; align-items: flex-end; gap: 10px; }
.pl-kopf .feld { flex: 1 1 auto; margin-bottom: 0; }

.pl-liste {
  list-style: none; display: flex; flex-direction: column; gap: 4px;
  max-height: min(60vh, 620px); overflow-y: auto;
}
.pl-liste .leer { font-size: 12px; color: var(--ink3); padding: 10px 0; }
/* Waehrend ein Zug laeuft, ist die Liste veraltet - also stillhalten. */
.pl-liste[data-arbeit] { opacity: .55; pointer-events: none; }

.pl-eintrag {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--linie); background: var(--feld);
}
.pl-eintrag.zieht { opacity: .4; }
.pl-eintrag.ziel { border-color: var(--akz); background: var(--akz-zart); }

.pl-griff { cursor: grab; color: var(--ink3); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.pl-eintrag:active .pl-griff { cursor: grabbing; }
.pl-nr {
  font-family: var(--mono); font-size: 11px; color: var(--ink3);
  width: 22px; text-align: right; flex: 0 0 auto;
}
.pl-eintrag img {
  width: 64px; height: 36px; object-fit: cover; border-radius: 4px;
  background: var(--grund); flex: 0 0 auto;
}
.pl-titel {
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-tun { display: flex; gap: 3px; flex: 0 0 auto; }
.pl-tun button {
  width: 24px; height: 24px; border-radius: 6px; font-size: 10px; line-height: 1;
  border: 1px solid var(--linie2); background: var(--feld); color: var(--ink2);
  cursor: pointer; font-family: inherit;
}
.pl-tun button:hover:not(:disabled) { background: var(--feld2); color: var(--ink); }
.pl-tun button:disabled { opacity: .3; cursor: default; }

/* --- 7b  Thumbnail-Studio ------------------------------------------------
   Vorschau oben, Regler darunter - und beides in derselben Spalte wie
   die Videoansicht. Die alte eigenstaendige Seite hatte links eine
   schmale Reglerspalte; das war dort richtig, weil die Buehne den
   ganzen Rest fuellte. Hier sitzt das Studio schon in einer Spalte, und
   eine Spalte in einer Spalte waere zweimal schmal.
   ------------------------------------------------------------------------*/

/* Werkbank und Studio in einer Spalte. Der Abstand kommt vom gap -
   deshalb muss der Kartenabstand hier weg, sonst waere er doppelt. */
.yt-werkbereich {
  display: flex; flex-direction: column; gap: 20px; min-width: 0;

  /* Eigenes Rollfeld, bis an die Fensterkante. Die Polsterung sitzt
     INNEN: So laeuft der Rollbalken am Rand, waehrend der Inhalt seinen
     Abstand behaelt. Links sechs Pixel aus der Rasterluecke geliehen,
     sonst schnitte der Behaelter den Schlagschatten der Karten ab. */
  min-height: 0; overflow-y: auto;
  padding: 0 var(--main-seite) var(--main-oben) 6px;
  margin-left: -6px;
}

/* Mehrere Videos zum Vergleichen heisst: mehrere Karten untereinander,
   in einem eigenen Behaelter zwischen Playlists und Studio. Leer nimmt
   er keinen Platz weg. */
.yt-werke { display: flex; flex-direction: column; gap: 20px; }
.yt-werke:empty { display: none; }
.yt-werke > .karte + .karte { margin-top: 0; }
.yt-werkbereich > .karte + .karte { margin-top: 0; }

/* Das Studio ist keine eigene Karte mehr, sondern ein Teil der
   Video-Karte: abgesetzt durch eine Linie, nicht durch einen Rahmen. */
/* Dichter als zuvor (16px Zwischenraum, 20px Rand). Das Studio ist eine
   Werkbank mit vielen kleinen Stellschraubern, keine Leseseite - hier
   kostet Luft Uebersicht, statt sie zu schaffen. Wer scrollen muss, um
   den Regler zu sehen, dessen Wirkung er oben beurteilen will, hat
   nichts gewonnen. */
.studio {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--linie);
}
.studio > h2 { margin-bottom: 0; }

/* ---- Bühne ---- */

.studio-buehne {
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--grund); overflow: hidden;
}
.studio-buehne svg { display: block; width: 100%; height: auto; }

.studio-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.studio-spec { font-family: var(--mono); font-size: 11px; margin: 0; }
.studio-tun { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }

/* ---- Abschnitte ---- */

.studio-teil { display: flex; flex-direction: column; min-width: 0; }
.studio-teil h3 {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800; margin-bottom: 7px;
}
.studio-h3-abstand { margin-top: 14px; }

/* Die Regler stehen dichter als gewoehnliche Felder - es sind viele,
   und jeder ist nur eine Zeile hoch. */
.studio-regler-feld { margin-top: 9px; margin-bottom: 0; }
.studio-regler-feld label { margin-bottom: 3px; }
.studio-regler-feld input[type="range"] {
  width: 100%; accent-color: var(--akz); cursor: pointer;
  background: none; border: 0; padding: 0;
}
.studio-regler-feld label em {
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* ---- Vorlagen: ein breites Band, keine Spalte ---- */

.studio-typen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px;
}
.studio-typ {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 0 8px; overflow: hidden;
  background: var(--feld2); color: var(--ink);
  border: 1px solid var(--linie); border-radius: 9px;
  transition: border-color .12s, background .12s;
}
/* 16:9 wie das Thumbnail selbst - es IST das Thumbnail, nur klein.
   Vorher stand hier 64:36 (dasselbe Verhaeltnis, andere Zahlen) fuer
   eine gezeichnete Andeutung. */
.studio-typ svg {
  display: block; width: 100%; height: auto; aspect-ratio: 16/9;
  margin-bottom: 5px; background: var(--grund);
}
.studio-typ b { font-size: 11.5px; font-weight: 700; padding: 0 8px; }
.studio-typ:hover { border-color: var(--linie2); }
.studio-typ[aria-pressed="true"] {
  border-color: var(--akz); background: var(--akz-zart);
  box-shadow: 0 0 0 1px var(--akz);
}

/* ---- Die übrigen Regler nebeneinander, solange Platz ist ---- */

/* ---- Neun Felder in einem 3x3-Raster ----

   Vorher drei Spalten mit den Ueberschriften TEXT, BILDZEICHEN und
   HINTERGRUNDBILD - eine Gruppierung, die etwas ueber die Herkunft der
   Felder im Code sagte und nichts ueber ihre Benutzung.

   FESTE DREI SPALTEN, kein auto-fit. Das ist hier der Punkt: Die
   Anordnung IST die Aussage, und ein Raster, das je nach Fensterbreite
   zwei oder vier Spalten macht, haette keine. Erst unterhalb der
   Schwelle bricht es auf eine Spalte um - dort ist Anordnung ohnehin
   kein Argument mehr, nur noch Reihenfolge.

   align-items: start, damit eine hohe Zelle (das Hintergrundbild mit
   seinen fuenf Reglern) die Nachbarn nicht mitzieht. */
.studio-felder {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
}

.studio-zelle { display: flex; flex-direction: column; min-width: 0; }

/* EINE Beschriftung je Feld, nicht zwei.
   Hier standen einmal eine Ueberschrift ("OBERZEILE") und darunter ein
   Label ("Text") - zwei Zeilen, die dasselbe sagten, und bei der
   Koernung sogar "KOERNUNG" ueber "Staerke". Wo eine Zelle genau EINE
   Eingabe hat, ist die Ueberschrift ueberfluessig: Das Label IST sie.
   Es traegt deshalb ihr Aussehen. Nur wo mehrere Bedienelemente in
   einer Zelle stehen - Farbwelt, Bildzeichen, Hintergrundbild - bleibt
   eine eigene Ueberschrift, denn dort gehoert sie zu keinem einzelnen. */
.studio-zelle > h3,
.studio-zelle .feld > label.zelle-titel {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); font-weight: 800; margin-bottom: 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
/* Der Zusatz rechts - "optional", der Prozentwert eines Reglers - bleibt
   klein und gerade, sonst schrie er mit. */
.studio-zelle .feld > label.zelle-titel em {
  text-transform: none; letter-spacing: 0; font-weight: 500;
}

/* Die letzte Zeile eines Feldes braucht unten keinen Abstand mehr - den
   setzt schon das Raster. */
.studio-zelle > .feld:last-child { margin-bottom: 0; }

/* Titelfeld und Bildkasten sind GLEICH HOCH - sie stehen nebeneinander,
   und zwei verschieden hohe Kaesten in einer Zeile sehen nach Versehen
   aus. Ueber eine Variable und nicht ueber zwei gleiche Zahlen: Wer die
   eine aendert, aendert die andere mit. */
.studio-zelle .studio-titel { height: var(--studio-kasten); resize: vertical; }
.studio-zelle .studio-ablage {
  min-height: var(--studio-kasten);
  display: flex; align-items: center; justify-content: center;
}

/* ---- Farbwelten ---- */

.studio-welten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.studio-welt {
  font: inherit; cursor: pointer;
  height: 38px; border-radius: 8px;
  border: 1px solid var(--linie2);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
  transition: box-shadow .12s, border-color .12s;
}
.studio-welt span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.studio-welt:hover { border-color: var(--ink3); }
.studio-welt[aria-pressed="true"] { border-color: var(--akz); box-shadow: 0 0 0 2px var(--akz); }

/* ---- Ablage im Studio: flacher als im Broadcast, hier zählt Platz ---- */

/* Herunterladen - eine Zeile, die sich bei Bedarf umbricht. */
/* Die eigene Zeile "Herunterladen" mit vier Knoepfen (JPG 2560, JPG
   1280, PNG 1280, SVG) ist am 2026-08-27 entfallen. Geblieben ist ein
   einzelner SVG-Knopf bei den uebrigen Studio-Knoepfen - er braucht
   keine eigene Formatierung mehr. */

.studio-ablage { padding: 10px; }
.studio-ablage .ablage-voll img { max-height: 96px; }

/* Das Logo der Anwendung: was gilt, daneben die Knoepfe. Die Vorschau
   ist so gross wie im Menuband - ein Logo, das man nur klein sieht,
   beurteilt man falsch. Die Masse selbst stehen bei .marke-jetzt in
   Abschnitt 7b, damit Logo und Bildzeichen sich gleich verhalten. */
.marke-vorschau {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--linie); border-radius: 9px; background: var(--feld2);
}

/* --- 7b  Das Erscheinungsbild einstellen --------------------------------
   Bildzeichen und Farbwelten des Studios. Beide Listen baut hub.js;
   hier steht nur, wie sie aussehen.

   KEINE INTERNEN KENNUNGEN: Wo einmal ein Kaestchen mit "tinte" stand,
   steht jetzt eine Farbkachel, und wo "f" stand, das Zeichen selbst.
   Ein Bild sagt es besser als eine Kennung - und es sagt nichts
   Falsches. */

/* Die <defs> der Bildzeichen: da, aber unsichtbar. Nicht display:none -
   ein Element ohne Darstellung kann in manchen Browsern auch nicht als
   Quelle eines <use> dienen. */
.studio-einst-defs {
  position: absolute; width: 0; height: 0; overflow: hidden;
}

.studio-einst-h3 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--ink2);
  margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--linie);
}
.studio-einst-h3:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }

/* Ein Bildzeichen: Vorschau, Name, Knoepfe - in einer Zeile. */
.marke-zeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--linie); border-radius: 9px; background: var(--feld2);
}
.marke-zeile input[type="text"] { flex: 1 1 130px; min-width: 0; }
.marke-zeile .zart { flex: 0 0 auto; }

/* Die Vorschau: so gross wie im Schalter des Studios. Ein Zeichen, das
   man nur klein sieht, beurteilt man falsch. */
.marke-jetzt {
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; height: 34px; flex: 0 0 auto;
  color: var(--ink);
}
.marke-jetzt img, .marke-jetzt svg, .marke-jetzt .zeichen {
  max-height: 30px; max-width: 90px; width: auto; height: auto; display: block;
}
/* Dieselbe Umfaerbung wie ueberall - sonst sieht das Zeichen hier
   anders aus als dort, wo es hingehoert. */
.marke-jetzt [fill="black"] { fill: currentColor; }
.marke-tun { display: flex; gap: 6px; flex-wrap: wrap; }

.studio-einst-welt {
  padding: 12px; margin-bottom: 10px;
  border: 1px solid var(--linie); border-radius: 9px; background: var(--feld2);
}
.studio-einst-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.studio-einst-kopf input[type="text"] { flex: 1 1 140px; min-width: 0; }

/* Die Kachel steht fuer die Farbwelt - sie ersetzt die Kennung. */
.studio-einst-kachel {
  width: 34px; height: 26px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid var(--linie2);
}

.studio-einst-farben {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px; margin-bottom: 8px;
}
.studio-einst-farbe { display: flex; align-items: center; gap: 6px; }
.studio-einst-farbe > span {
  flex: 1 1 auto; font-size: 11px; color: var(--ink2); min-width: 0;
}
.studio-einst-farbe input[type="color"] {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--linie2); border-radius: 5px;
  background: none; cursor: pointer;
}
.studio-einst-farbe input[type="text"] {
  flex: 0 0 84px; font-family: var(--mono); font-size: 11px;
  padding: 4px 6px; text-transform: uppercase;
}

/* --- 8  Schmal ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .broadcast-raster, .yt-rahmen { grid-template-columns: minmax(0, 1fr); }

  /* Einspaltig ergibt ein fester Arbeitsplatz keinen Sinn: Untereinander
     bekaeme jede Spalte nur noch einen Streifen. Also zurueck zur
     rollenden Seite - samt der Polsterung, die der Arbeitsplatz sonst
     aufhebt. */
  .bereich[data-bereich="youtube"].an {
    display: block; height: auto; margin: 0; padding: 0;
  }
  .bereich[data-bereich="youtube"] .yt-rahmen {
    grid-template-rows: none; min-height: 0;
  }
  .yt-liste-karte { max-height: 70vh; margin-bottom: 0; }
  .yt-werkbereich { overflow: visible; padding: 0; margin-left: 0; }
}

@media (max-width: 900px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .band {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 10px; padding: 10px 14px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--linie);
  }
  .marke { padding: 0 8px 0 0; flex: 0 0 auto; }
  .marke-t { display: none; }
  .band-liste { flex-direction: row; gap: 4px; }
  .band-gruppe { display: none; }
  .band-punkt { white-space: nowrap; }
  .band-punkt.an::before { display: none; }
  .band-fuss { padding-top: 0; border-top: 0; margin-left: auto; flex: 0 0 auto; }
  .benutzer { display: none; }

  main { padding: 16px 14px 40px; }
  .kopfzeile.haftend { margin: -16px -14px 16px; padding: 12px 14px; }
  .einst-rahmen { grid-template-columns: minmax(0, 1fr); }
  .einst-nav {
    position: static; top: auto; flex-direction: row; flex-wrap: wrap;
    padding-bottom: 8px; border-bottom: 1px solid var(--linie);
  }
  .einst-gruppe { width: 100%; padding-top: 8px; }
  .konto-neu, .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .konten li .knopf { margin-left: 0; }
  .liste-kopf { display: none; }
  .vg-kanaele li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .liste-zeile { grid-template-columns: 1fr 32px; }
  /* EINE Spalte - und dann gilt eine ANDERE Reihenfolge.

     Im Raster steht nebeneinander, was zusammen gesehen werden will;
     untereinander ist das keine Aussage mehr, dort zaehlt der Ablauf.
     Also erst alles Geschriebene, dann Farbe und Zeichen, zuletzt die
     Feinheiten:

       Oberzeile · Marke · Titel · Fusszeile
       Farbwelt · Bildzeichen
       Groesse · Koernung · Hintergrundbild

     Ueber `order` und nicht ueber eine zweite Markierung: Es gibt die
     Felder genau einmal.

     PREIS, ehrlich benannt: `order` verschiebt das Bild, nicht die
     Tab-Folge. Schmal springt der Tabulator also anders, als das Auge
     liest. Die Alternative waere, die Reihenfolge im HTML so zu legen
     und das Raster breit umzusortieren - dann spraenge der Tabulator
     BREIT, und breit wird der Hub benutzt. */
  .studio-felder { grid-template-columns: minmax(0, 1fr); }
  .studio-zelle:nth-child(1) { order: 1; }   /* Oberzeile       */
  .studio-zelle:nth-child(2) { order: 2; }   /* Marke           */
  .studio-zelle:nth-child(4) { order: 3; }   /* Titel           */
  .studio-zelle:nth-child(9) { order: 4; }   /* Fusszeile       */
  .studio-zelle:nth-child(7) { order: 5; }   /* Farbwelt        */
  .studio-zelle:nth-child(8) { order: 6; }   /* Bildzeichen     */
  .studio-zelle:nth-child(3) { order: 7; }   /* Groesse         */
  .studio-zelle:nth-child(6) { order: 8; }   /* Koernung        */
  .studio-zelle:nth-child(5) { order: 9; }   /* Hintergrundbild */
  .studio-typen { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .yt-werk-kopf { grid-template-columns: minmax(0, 1fr); }
  .yt-werk-kopf img { width: 100%; }
}

/* --- 9  Anmeldung ------------------------------------------------------- */

.anmeldung {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
}
.anmeldung .karte { width: 100%; max-width: 380px; }
.anmeldung .marke { justify-content: center; padding: 0 0 20px; }
.anmeldung .fehler {
  font-size: 12px; color: var(--schlecht); background: var(--schlecht-zart);
  border: 1px solid var(--schlecht); border-radius: 8px; padding: 9px 12px; margin-bottom: 14px;
}
.anmeldung .gelungen {
  font-size: 12px; color: var(--gut); background: var(--gut-zart);
  border: 1px solid var(--gut); border-radius: 8px; padding: 9px 12px; margin-bottom: 14px;
}
.anmeldung .knopf.haupt { width: 100%; justify-content: center; margin-top: 6px; }
.anmeldung .zurueck { text-align: center; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}