/* ===========================================================================
   Benutzerverwaltung — Medienbibliothek

   Gestaltungsentscheidungen:

   * Schrift liegt lokal, nicht auf einem CDN. Ein Landespressedienst sollte
     keine Besucherdaten an einen Font-Anbieter schicken; deutsche Gerichte
     haben das wiederholt beanstandet. "Source Sans 3" (SIL Open Font
     License) liegt deshalb als eigene Datei unter fonts/ im Projekt und
     wird per @font-face lokal eingebunden — optisch dieselbe CI-Schrift,
     ohne dass der Browser je einen fremden Server aufruft.

   * Festbreitenschrift für alles Maschinelle: E-Mail-Adressen, Kennungen,
     Rechte-Schlüssel, Zeitstempel. Fließschrift nur für Sätze, die ein
     Mensch liest. Der Kontrast macht auf einen Blick klar, was Datenwert
     und was Erklärung ist.

   * Farbe trägt nur Zustand, nie Dekoration. Bernstein heißt „wartet",
     Kiefer heißt „aktiv", Rost heißt „gesperrt". Dieselben drei Farben
     überall — in der Instrumentenleiste, an den Kontozeilen, an den
     Tokens. Die Markenfarbe (Kiefer/Akzent) ist an die CI angeglichen
     (design_reference.md) und bleibt — anders als die übrigen Zustände —
     in beiden Farbschemata exakt derselbe Grünton, nur der Hintergrund
     dahinter wird im Dunkelmodus transparent statt deckend eingesetzt.
   =========================================================================== */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSans3-Variable.woff2") format("woff2");
}

:root {
  /* Flächen */
  --papier:      #f8f9fa;
  --papier-tief: #eef0f2;
  --tafel:       #ffffff;
  --kante:       #dfe2e6;
  --kante-stark: #ced4da;

  /* Schrift */
  --tinte:       #212529;
  --tinte-matt:  #6c757d;
  --tinte-blass: #97a0a8;

  /* Zustände */
  --kiefer:      #52ad31;
  --kiefer-hell: #eaf5e3;
  --bernstein:   #8a5a08;
  --bernstein-hell: #fff6d9;
  --rost:        #dc3545;
  --rost-hell:   #fceaec;

  /* Bewusst NICHT im Dunkelmodus neu definiert: die CI-Markenfarbe bleibt in
     beiden Farbschemata derselbe Grünton (design_reference.md: "Primärfarbe
     bleibt #52ad31") — auch für Flächen mit weißem Text (Logo-Kachel,
     Hauptknopf), die sonst im Dunkelmodus unlesbar würden. */
  --akzent-fest: #52ad31;

  --schrift: "Source Sans 3", ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fest:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
             "Liberation Mono", monospace;

  /* Signature-Wert der CI: durchgängig 5px auf Cards, Buttons, Inputs,
     Modals, Ablage — siehe design_reference.md, "zentraler Signature-Wert". */
  --radius: 5px;
  --schatten: 0 2px 14px rgba(0, 0, 0, .06);
}

/* Dunkelmodus folgt der Systemeinstellung, kein eigener Umschalter — dieselben
   Bezeichner wie oben, nur mit vertauschter Helligkeit. Die Zustandsfarben
   behalten ihren Farbton (Kiefer bleibt grün, Bernstein bleibt Bernstein,
   Rost bleibt Rost), nur heller genug, um auf dunklem Grund zu tragen. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Flächen */
    --papier:      #1a1d20;
    --papier-tief: #141619;
    --tafel:       #22262a;
    --kante:       #33383d;
    --kante-stark: #3a3f44;

    /* Schrift */
    --tinte:       #e9ecef;
    --tinte-matt:  #9aa0a6;
    --tinte-blass: #7d838a;

    /* Zustände — Kiefer/Akzent bleibt der exakt gleiche Grünton wie im
       Licht-Modus (siehe Begründung oben bei --akzent-fest), nur die
       Hintergrundfläche für Badges wird transparent statt deckend, damit
       sie auf jedem Kartenton funktioniert, ohne einen eigenen dunklen
       Grünton pflegen zu müssen. */
    --kiefer:      #52ad31;
    --kiefer-hell: rgba(82, 173, 49, .16);
    --bernstein:   #e0a94a;
    --bernstein-hell: rgba(255, 193, 7, .14);
    --rost:        #f1707c;
    --rost-hell:   rgba(220, 53, 69, .16);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 15px/1.5 var(--schrift);
}

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

.augenbraue {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-blass);
}

h1 { margin: 2px 0 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 14.5px; font-weight: 650; }

.lauf {
  margin: 6px 0 14px;
  max-width: 62ch;
  font-size: 13.5px;
  color: var(--tinte-matt);
}

code, .fest, pre { font-family: var(--fest); }

code {
  font-size: .89em;
  background: var(--papier-tief);
  border: 1px solid var(--kante);
  border-radius: 2px;
  padding: .5px 4px;
}

/* --- Anmeldetor -------------------------------------------------------- */

.tor {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--papier-tief);
}

.tor-karte {
  width: 100%;
  max-width: 420px;
  background: var(--tafel);
  border: 1px solid var(--kante);
  border-top: 3px solid var(--kiefer);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
}

.tor-karte h1 { margin-bottom: 20px; }

.tor-karte label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinte-matt);
}

.tor-karte input { width: 100%; }
.tor-karte button { width: 100%; margin-top: 12px; }

.tor-zustand { margin-bottom: 18px; }

.tor-zustand .zeile {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--kante);
  font-size: 13px;
}
.tor-zustand .zeile:last-child { border-bottom: none; }
.tor-zustand .zeile b { font-weight: 600; }
.tor-zustand .hinweis {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bernstein-hell);
  border-left: 3px solid var(--bernstein);
  font-size: 13px;
}

.tor-fuss { margin: 16px 0 0; font-size: 12.5px; color: var(--tinte-blass); }

/* --- Anwendungsgerüst: Seitenleiste + Hauptbereich --------------------- */

.schale {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
}

.schatten {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 37, 41, .38);
  z-index: 30;
}

.seitenleiste {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--tafel);
  border-right: 1px solid var(--kante);
  padding: 16px 12px 20px;
}

.seiten-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
}

.marke-zeichen {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  background: var(--akzent-fest);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
}

.marke-text { display: flex; flex-direction: column; min-width: 0; }
.marke-haupt { font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.marke-neben { font-size: 11px; color: var(--tinte-blass); }

/* --- Reiter (Seitenleisten-Navigation) ---------------------------------- */

.reiter-gruppe { margin-bottom: 16px; }
.reiter-gruppe:last-child { margin-bottom: 0; }

.reiter-titel {
  margin: 0 0 4px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-blass);
}

.reiter button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-left: 2.5px solid transparent;
  background: none;
  padding: 8px 9px 8px 7px;
  margin-bottom: 1px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font: inherit;
  font-size: 13px;
  color: var(--tinte-matt);
  cursor: pointer;
  text-align: left;
}

.reiter button svg {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reiter button:hover { background: var(--papier-tief); color: var(--tinte); }
.reiter button.an {
  background: var(--kiefer-hell);
  border-left-color: var(--kiefer);
  color: var(--kiefer);
  font-weight: 600;
}

/* --- Hauptbereich und Topbar -------------------------------------------- */

.hauptbereich { min-width: 0; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--tafel);
  border-bottom: 1px solid var(--kante);
}

.kopf-titel { flex: 0 0 auto; }

.knopf-menu, .knopf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  background: var(--tafel);
  color: var(--tinte-matt);
  cursor: pointer;
}
.knopf-menu:hover, .knopf-icon:hover { background: var(--papier-tief); color: var(--tinte); }
.knopf-menu svg, .knopf-icon svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.knopf-menu { display: none; }
.knopf-icon-klein { width: 24px; height: 24px; }
.knopf-icon-klein svg { width: 13px; height: 13px; }

.leiste {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 12px;
}

.lampe { display: flex; align-items: center; gap: 6px; }

.lampe i {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tinte-blass);
}
.lampe.gut i     { background: var(--kiefer); }
.lampe.warnt i   { background: var(--bernstein); }
.lampe.schlecht i{ background: var(--rost); }

.lampe span { color: var(--tinte-matt); }
.lampe b { font-family: var(--fest); font-size: 11.5px; font-weight: 500; }

/* --- Arbeitsfläche ------------------------------------------------------ */

.arbeitsflaeche {
  padding: 18px 20px 48px;
  max-width: 1200px;
}

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

/* --- Tafeln ------------------------------------------------------------- */

.tafel {
  background: var(--tafel);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* CI-Vorlage will Cards ganz ohne Rahmen (nur Schatten trägt die Fläche) —
   im Dunkelmodus ist ein rgba(0,0,0,.06)-Schatten auf dunklem Grund aber
   praktisch unsichtbar, dort bleibt ein dezenter Rahmen die eigentliche
   Kontur der Karte. */
@media (prefers-color-scheme: dark) {
  .tafel { border: 1px solid var(--kante); }
}

.tafel-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tafel-kopf h2 { margin-right: auto; }

/* Eingeklappte Tafel (z. B. upload.html, "Redaktion und Verwaltung") —
   das native Dreieck bleibt als bekannte Auf/Zu-Markierung, nur der
   Mauszeiger und der Abstand zum Inhalt darunter sind nachgezogen. */
details.tafel > summary { cursor: pointer; }
details.tafel > summary > h2 { display: inline-block; }
details.tafel[open] > summary { margin-bottom: 12px; }

/* Card-Titel mit Akzentstrich, wie in der CI-Referenz (design_reference.md,
   "::before, 4px breit"). Gilt für jedes h2 in einer Tafel, ob direkt drin
   oder über .tafel-kopf verschachtelt. */
.tafel h2 {
  position: relative;
  padding-left: 12px;
  font-size: 16px;
  font-weight: 700;
}
.tafel h2::before {
  content: "";
  position: absolute;
  left: 0; top: 1px; bottom: 1px;
  width: 4px;
  border-radius: 2px;
  background: var(--akzent-fest);
}

.tafel-gefahr h2::before { background: var(--rost); }

/* --- Einrichtungsschritte: echte Reihenfolge, daher numeriert ---------- */

.schritt {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  background: var(--tafel);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
}

.schritt-nr {
  font-family: var(--fest);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinte-blass);
  line-height: 1.1;
}

.schritt.fertig { border-left: 3px solid var(--kiefer); }
.schritt.fertig .schritt-nr { color: var(--kiefer); }
.schritt.dran   { border-left: 3px solid var(--bernstein); }
.schritt.dran   .schritt-nr { color: var(--bernstein); }
.schritt.blockiert { opacity: .55; }

.schritt h2 { margin-bottom: 4px; }
.schritt .lauf { margin-bottom: 10px; }

/* --- Formulare und Knöpfe --------------------------------------------- */

input, select, button, textarea {
  font: inherit;
  color: var(--tinte);
}

input, select {
  padding: 6px 9px;
  background: var(--tafel);
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius);
  min-width: 0;
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--kiefer);
  outline-offset: 1px;
}
input:focus-visible, select:focus-visible { border-color: var(--kiefer); }

.raster {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: start;
}

.reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reihe input { flex: 1 1 170px; }

/* --- Medienauswahl (Pressemappe anlegen) -------------------------------- */

.medienauswahl {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  padding: 4px 10px;
}

.medienauswahl-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--kante);
  cursor: pointer;
}
.medienauswahl-zeile:last-child { border-bottom: none; }

/* --- Auswahlkacheln (Pressemappe anlegen/bearbeiten) ---------------------
   Vorschaubild statt nur einer Titelzeile: wer eine Aufnahme nicht sieht,
   kann sie nicht beurteilen. Das Häkchen sitzt oben links auf dem Bild. */

.auswahl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding: 3px;
}

.auswahl-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--tafel);
}
.auswahl-kachel:hover { border-color: var(--kante-stark); }

/* :has() — in allen aktuellen Browsern vorhanden; fehlt es, bleibt das
   Häkchen selbst die Anzeige, nur der farbige Rahmen entfällt. */
.auswahl-kachel:has(input:checked) {
  border-color: var(--kiefer);
  box-shadow: 0 0 0 2px var(--kiefer);
}

.auswahl-kachel img,
.auswahl-kachel .raster-leer {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.auswahl-kachel .raster-leer {
  display: grid; place-items: center;
  color: var(--tinte-blass);
  font-size: 12.5px;
}

.auswahl-kachel input[type=checkbox] {
  position: absolute;
  top: 8px; left: 8px;
  width: 20px; height: 20px;
  accent-color: var(--akzent-fest);
  cursor: pointer;
}

.auswahl-ansehen {
  position: absolute;
  top: 6px; right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  color: #fff;
  background: rgba(0, 0, 0, .62);
  text-decoration: none;
}
.auswahl-ansehen:hover { background: rgba(0, 0, 0, .8); }

.auswahl-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
  min-width: 0;
}
.auswahl-text strong,
.auswahl-text .neben {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auswahl-text strong { font-size: 13px; }
.auswahl-text .neben { font-size: 11.5px; }

/* --- Suchleiste (Protokoll) --------------------------------------------- */

.suche-leiste {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

.suche-leiste select,
.suche-leiste input[type="date"] { flex: 0 1 auto; }

.suche-feld {
  position: relative;
  flex: 2 1 260px;
  display: flex;
  align-items: center;
}

.suche-feld svg {
  position: absolute;
  left: 9px;
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--tinte-blass);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.suche-feld input {
  width: 100%;
  padding-left: 30px;
}

.suche-feld input::-webkit-search-cancel-button { cursor: pointer; }

/* --- Aktive Filter, als entfernbare Chips -------------------------------- */

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 10px;
  background: var(--kiefer-hell);
  color: var(--kiefer);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 550;
}

.chip button {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.chip button:hover { background: rgba(47, 93, 80, .18); }

/* --- Trefferhervorhebung in der Suche ------------------------------------ */

mark {
  background: var(--bernstein-hell);
  color: var(--bernstein);
  border-radius: 2px;
  padding: 0 1px;
}

.knopf {
  padding: 6px 13px;
  background: var(--papier-tief);
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.knopf:hover:not(:disabled) { background: var(--kante); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

.knopf-haupt {
  background: var(--akzent-fest);
  border-color: var(--akzent-fest);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(82, 173, 49, .28);
}
.knopf-haupt:hover:not(:disabled) { background: #459427; border-color: #459427; }

.knopf-gefahr { background: var(--tafel); border-color: var(--rost); color: var(--rost); }
.knopf-gefahr:hover:not(:disabled) { background: var(--rost-hell); }

.knopf-still { background: none; border-color: var(--kante); color: var(--tinte-matt); }
.knopf-klein { padding: 3px 9px; font-size: 12.5px; }
.knopf-winzig { padding: 1px 7px; font-size: 11px; }

.ansicht-umschalter { display: inline-flex; gap: 4px; }
.ansicht-umschalter .knopf.aktiv {
  background: var(--akzent-fest);
  border-color: var(--akzent-fest);
  color: #fff;
}

/* --- Medien-Raster ------------------------------------------------------
   Zeigt ausschließlich Thumbnails (max. 400px Kante, siehe Upload::ablegen),
   nie web/original — die Kachelgröße in CSS begrenzt zusätzlich, was das
   Bild im Layout einnimmt, lädt aber nichts Zusätzliches nach. Damit bleibt
   die Ladezeit unabhängig von der Zahl der Aufnahmen im Rahmen. */
.medien-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.raster-kachel {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--kante);
  overflow: hidden;
  cursor: pointer;
  background: var(--tafel);
}
.raster-kachel:hover { border-color: var(--kante-stark); }

.raster-kachel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.raster-kachel .raster-leer {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--tinte-blass);
  font-size: 12.5px;
}

.raster-kachel .raster-marke {
  position: absolute;
  top: 6px; right: 6px;
}

/* Pfadzeile und Auswahlleiste der Bibliothek. Das [hidden]-Attribut greift
   bei einem Element mit eigenem display nicht von selbst — dieselbe Falle wie
   sonst überall hier, deshalb ausdrücklich. */
.bibliothek-pfad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0;
}
.bibliothek-pfad[hidden] { display: none; }

.kruemel-knopf {
  background: none;
  border: none;
  padding: 2px 4px;
  font: inherit;
  color: var(--kiefer);
  cursor: pointer;
}
.kruemel-knopf:hover { text-decoration: underline; }

/* Ordner-Kachel: Symbol statt Titelbild */
.ordner-kachel { background: var(--tafel); }
.ordner-kachel .raster-leer svg { width: 52%; height: 52%; }

/* Markierte Kachel im Auswahlmodus */
.raster-kachel.gewaehlt {
  border-color: var(--kiefer);
  box-shadow: 0 0 0 3px var(--kiefer);
}
.raster-kachel.gewaehlt::after {
  content: "✓";
  position: absolute;
  left: 6px; bottom: 28px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  color: #fff;
  background: var(--akzent-fest);
}

/* Aufnahme aus einer Sammlung herausnehmen (Detailfenster) */
.raster-kachel .raster-entfernen {
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 15px; line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .62);
  cursor: pointer;
}
.raster-kachel .raster-entfernen:hover { background: var(--rost); }

/* Zahl der Aufnahmen auf einer Container-Kachel */
.raster-kachel .raster-anzahl {
  position: absolute;
  top: 6px; left: 6px;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .62);
}

.raster-kachel .raster-titel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 7px;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Kennzahlen -------------------------------------------------------- */

.zahlen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.zahl {
  flex: 1 1 110px;
  background: var(--tafel);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  padding: 9px 13px;
}
.zahl b {
  display: block;
  font-family: var(--fest);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.zahl span {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-blass);
}

/* --- Kontozeilen ------------------------------------------------------- */

.satz { border-top: 1px solid var(--kante); }
.satz:first-child { border-top: none; }

.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 0 10px 11px;
  border-left: 3px solid transparent;
}
.zeile.st-angefragt { border-left-color: var(--bernstein); }
.zeile.st-aktiv     { border-left-color: var(--kiefer); }
.zeile.st-gesperrt  { border-left-color: var(--rost); }

.zeile .name { font-weight: 550; }
.zeile .mail { font-family: var(--fest); font-size: 12.5px; color: var(--tinte-matt); }
.zeile .neben { font-size: 12px; color: var(--tinte-blass); }
.zeile .tun { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.marke {
  display: inline-block;
  padding: 1.5px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.m-angefragt { background: var(--bernstein-hell); color: var(--bernstein); }
.m-aktiv     { background: var(--kiefer-hell);    color: var(--kiefer); }
.m-gesperrt  { background: var(--rost-hell);      color: var(--rost); }
.m-still     { background: var(--papier-tief);    color: var(--tinte-matt); }

/* --- Tabellen --------------------------------------------------------- */

.tabelle { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th {
  text-align: left;
  padding: 7px 9px;
  border-bottom: 1.5px solid var(--kante-stark);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-blass);
  white-space: nowrap;
}
td { padding: 8px 9px; border-bottom: 1px solid var(--kante); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover > td { background: var(--kiefer-hell); }

.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; }

.schalter {
  width: 26px; height: 22px;
  padding: 0;
  border: 1px solid var(--kante);
  border-radius: 2px;
  background: var(--tafel);
  color: var(--tinte-blass);
  cursor: pointer;
  font-family: var(--fest);
  font-size: 12px;
}
.schalter.an {
  background: var(--kiefer-hell);
  border-color: var(--kiefer);
  color: var(--kiefer);
  font-weight: 700;
}

/* --- Meldungen und Ausgaben ------------------------------------------- */

.leer {
  padding: 16px 0;
  color: var(--tinte-blass);
  font-size: 13.5px;
}

.leer-zustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 0;
}
.leer-zustand .leer { padding: 4px 0 0; max-width: 320px; }
.leer-icon { color: var(--tinte-blass); opacity: .7; }
.leer-icon svg { width: 40px; height: 40px; display: block; }

.sparkline { display: inline-flex; vertical-align: middle; margin-left: 6px; }

.ausgabe {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--papier-tief);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

#link-kasten, .link-kasten {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bernstein-hell);
  border-left: 3px solid var(--bernstein);
  border-radius: var(--radius);
  font-size: 13px;
}
#link-kasten a, .link-kasten a {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--tafel);
  border: 1px solid var(--kante);
  border-radius: 2px;
  font-family: var(--fest);
  font-size: 11.5px;
  color: var(--kiefer);
  word-break: break-all;
}

/* --- Werkbank: Signatur der Seite ---------------------------------------
   Ein-/ausklappbares Panel statt fester Spalte, damit der Hauptbereich den
   vollen Platz neben der Seitenleiste bekommt. Öffnet sich rechts über den
   Inhalt, wie eine Benachrichtigungsschublade. */

.werkbank {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 35;
  width: 360px;
  max-width: calc(100vw - 32px);
  /* Fest verdrahtet, nicht --tinte: dieses Feld ist als Konsole immer dunkel
     gedacht, die Kindfarben darunter (z. B. #a9b2a9) sind darauf abgestimmt.
     --tinte wird im Dunkelmodus hell (Fließtextfarbe) und würde die Fläche
     umkehren, während die Kindfarben unverändert bleiben — unlesbar. */
  background: #1f2721;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .18s ease-out;
  box-shadow: -10px 0 32px rgba(33, 37, 41, .28);
}
.werkbank.offen { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .werkbank { transition: none; }
}

.werkbank-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #333c35;
}
.werkbank-kopf .augenbraue { color: #8d968d; margin-right: auto; }
.werkbank-kopf .knopf {
  background: none;
  border-color: #3d463f;
  color: #a9b2a9;
}
.werkbank-kopf .knopf:hover { background: #2b342d; }
.werkbank-kopf .knopf-icon-klein {
  border-color: #3d463f;
  color: #a9b2a9;
  background: none;
}
.werkbank-kopf .knopf-icon-klein:hover { background: #2b342d; }

.werkbank-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  font-size: 12px;
}

.werkbank-liste li {
  padding: 9px 12px;
  border-bottom: 1px solid #2b342d;
  color: #d5dad4;
}

.werkbank-leer { color: #79837a !important; line-height: 1.45; }

.eintrag-kopf {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 3px;
}
.eintrag-kopf .zeit { font-family: var(--fest); font-size: 10.5px; color: #79837a; }
.eintrag-kopf .was {
  font-family: var(--fest);
  font-size: 11.5px;
  color: #e8ebe7;
  word-break: break-all;
}
.eintrag-kopf .punkt {
  width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 4px;
}
.eintrag.ja  .punkt { background: #6aab8f; }
.eintrag.nein .punkt { background: #cf7a68; }

.eintrag .oeffentlich { color: #cfd5ce; }
.eintrag .intern {
  display: block;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid #3d463f;
  color: #939c93;
  font-size: 11.5px;
}

/* --- Wolke (kurze Rückmeldung) --------------------------------------- */

.wolke {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}

.blase {
  padding: 10px 14px;
  background: var(--tafel);
  border: 1px solid var(--kante-stark);
  border-left: 3px solid var(--kiefer);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(33, 37, 41, .13);
  font-size: 13.5px;
  animation: hoch .18s ease-out;
}
.blase.nein { border-left-color: var(--rost); }

@keyframes hoch {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blase { animation: none; }
}

/* --- Schmale Fenster -------------------------------------------------- */

@media (max-width: 900px) {
  .schale { grid-template-columns: minmax(0, 1fr); }

  .knopf-menu { display: inline-flex; }

  .seitenleiste {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    width: 232px;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
  }
  .seitenleiste.offen { transform: none; }

  .schatten.an { display: block; }

  @media (prefers-reduced-motion: reduce) {
    .seitenleiste { transition: none; }
  }
}

@media (max-width: 660px) {
  .kopf { gap: 12px; padding: 12px 14px; }
  .leiste { width: 100%; order: 3; gap: 12px; }
  .zeile { grid-template-columns: minmax(0, 1fr); }
  .zeile .tun { justify-content: flex-start; }
  .arbeitsflaeche { padding: 14px 12px 40px; }
  .tafel, .schritt { padding: 14px; }
  .schritt { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
}

/* ===========================================================================
   Öffentliche Upload-Seite
   =========================================================================== */

body.oeffentlich { background: var(--papier-tief); }

.kopf-schlank { gap: 14px; }
.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.kopf-name { color: var(--tinte-matt); }

.schmal {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 60px;
}

/* --- Ablagefläche: der erste Bildschirm gehört ihr ---------------------- */

.ablage {
  border: 2px dashed var(--kante-stark);
  border-radius: var(--radius);
  background: var(--tafel);
  padding: 34px 20px;
  margin-bottom: 14px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.ablage.bereit {
  border-color: var(--kiefer);
  background: var(--kiefer-hell);
}

.ablage-bild {
  width: 74px;
  height: 56px;
  color: var(--kante-stark);
  margin-bottom: 10px;
}
.ablage.bereit .ablage-bild { color: var(--kiefer); }

.ablage-titel { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.ablage-satz {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 13px;
  color: var(--tinte-matt);
}

.ablage-knoepfe { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.ablage-knoepfe .knopf { padding: 9px 20px; }

textarea {
  padding: 6px 9px;
  background: var(--tafel);
  border: 1px solid var(--kante-stark);
  border-radius: var(--radius);
  resize: vertical;
  font: inherit;
  grid-column: 1 / -1;
}

/* --- Warteschlange ----------------------------------------------------- */

.posten { padding: 11px 0; border-top: 1px solid var(--kante); }
.posten:first-of-type { border-top: none; }

.posten-kopf {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.posten-name {
  font-family: var(--fest);
  font-size: 12.5px;
  word-break: break-all;
  margin-right: auto;
}

.balken {
  height: 5px;
  background: var(--papier-tief);
  border-radius: 3px;
  overflow: hidden;
}
.balken-fuellung {
  display: block;
  height: 100%;
  background: var(--kiefer);
  transition: width .2s ease-out;
}
.balken-fuellung.fertig { background: var(--kiefer); }
.balken-fuellung.pause  { background: var(--bernstein); }
.balken-fuellung.fehler { background: var(--rost); }

.posten-fuss {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--tinte-blass);
}
.posten-meldung { color: var(--bernstein); }

/* --- Eigene Einreichungen ---------------------------------------------- */

.zeile-medium { display: flex; gap: 11px; align-items: center; min-width: 0; }

.daumen {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--kante);
  background: var(--papier-tief);
}
.daumen-leer {
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-blass);
}

.grund {
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--rost-hell);
  border-left: 2px solid var(--rost);
  border-radius: 2px;
  font-size: 12px;
  color: var(--rost);
}

/* --- Meldungen --------------------------------------------------------- */

.meldung-warnung, .meldung-fehler {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: 13px;
}
.meldung-warnung { background: var(--bernstein-hell); border-color: var(--bernstein); }
.meldung-fehler  { background: var(--rost-hell);      border-color: var(--rost); }

@media (max-width: 660px) {
  .ablage { padding: 26px 14px; }
  .ablage-knoepfe .knopf { flex: 1 1 130px; }
  .zeile-medium { width: 100%; }
}

/* --- Detailfenster ------------------------------------------------------ */

.fenster { position: fixed; inset: 0; z-index: 40; }

.fenster-flaeche {
  position: absolute;
  inset: 0;
  background: rgba(33, 37, 41, .45);
  overflow-y: auto;
  padding: 24px 16px;
}

.fenster-karte {
  max-width: 780px;
  margin: 0 auto;
  background: var(--tafel);
  border-radius: var(--radius);
  padding: 18px 20px 22px;
  box-shadow: 0 12px 44px rgba(33, 37, 41, .25);
  animation: fenster-auf .16s ease-out;
}

@keyframes fenster-auf {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fenster-karte { animation: none; }
}

/* Bestätigungsdialog (bestaetigen() in app.js) — CI-Vorlage untersagt
   native confirm()-Popups ausdrücklich ("nie native alert()/confirm()
   verwenden"), deshalb dasselbe Fenster-Muster wie die Detailansicht, nur
   deutlich schmaler und ohne den weiten Innenabstand einer vollen Karte. */
.fenster-karte-klein { max-width: 420px; padding: 20px; }
.fenster-karte-klein .fenster-fuss {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.fenster-karte h3 {
  margin: 20px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-blass);
  border-bottom: 1px solid var(--kante);
  padding-bottom: 5px;
}

.fenster-karte img.gross,
.fenster-karte video.gross {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: var(--papier-tief);
  border-radius: var(--radius);
  margin-top: 12px;
}

.fenster-fuss {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--kante);
}

.felder { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.feld { display: flex; flex-direction: column; gap: 3px; }
.feld > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinte-blass);
}
.feld textarea { grid-column: auto; }

/* --- Tags: Auswahl-Chips beim Hochladen und in der Detailansicht -------- */
.tag-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.tag-wahl-kopf { font-size: .85rem; color: var(--tinte-blass); margin-right: 4px; }
.tag-chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--kante); background: var(--papier, transparent); color: var(--tinte);
}
.tag-chip:hover { border-color: var(--kiefer); }
.tag-chip.an { background: var(--akzent-fest); border-color: var(--akzent-fest); color: #fff; }

/* --- Bibliothek: Drag & Drop ------------------------------------------- */
.raster-kachel.wird-gezogen { opacity: .45; }
.raster-kachel.ablage-ziel,
.kruemel-knopf.ablage-ziel { outline: 2px dashed var(--kiefer); outline-offset: 2px; background: var(--papier-tief); }

/* --- Bibliothek: Seitenspalte rechts neben der Tafel -------------------- */
.arbeitsflaeche:has(#blatt-bibliothek.an) { max-width: none; }
#blatt-bibliothek.an {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, 38vw, 680px); gap: 16px; align-items: start;
}
.bibliothek-detail {
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
  border: 1px solid var(--kante); border-radius: 10px; padding: 20px; background: var(--tafel);
}
.bibliothek-detail .medien-raster { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.bibliothek-detail img.gross { max-width: 100%; height: auto; }
.bibliothek-detail .tabelle { overflow-x: auto; }
.raster-kachel.aktiv-kachel { outline: 2px solid var(--kiefer); outline-offset: 1px; }
@media (max-width: 1100px) {
  #blatt-bibliothek.an { grid-template-columns: minmax(0, 1fr); }
  .bibliothek-detail { position: static; max-height: none; }
}
.tag-chip.tag-lesen { cursor: default; }
.tag-chip.tag-lesen:hover { border-color: var(--akzent-fest); }

/* --- Rechte-Bestätigung beim Hochladen ---------------------------------- */
.rechte-bestaetigung { display: flex; gap: 10px; align-items: flex-start; grid-column: 1 / -1; font-size: .92rem; cursor: pointer; }
.rechte-bestaetigung input { margin-top: 3px; flex: none; }

/* --- „Angaben zur Aufnahme": geordnetes Formular ------------------------ */
.angaben-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.angaben-form .breit { grid-column: 1 / -1; }
.angaben-form .feld { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.angaben-form .feld > span { font-size: .78rem; color: var(--tinte-blass); }
.angaben-form input:not([type=checkbox]), .angaben-form select, .angaben-form textarea { width: 100%; box-sizing: border-box; }
.angaben-mehr > summary { cursor: pointer; font-size: .9rem; padding: 4px 0; }
.angaben-mehr > summary .neben { margin-left: 8px; }
.angaben-mehr[open] > summary { margin-bottom: 10px; }
@media (max-width: 560px) { .angaben-form { grid-template-columns: minmax(0, 1fr); } }

/* --- Tag-Auswahl: gewählte Tags als Chips, Rest in einer durchsuchbaren Liste --- */
[hidden].tag-panel, .tag-eintrag[hidden] { display: none; }
.tag-wahl { position: relative; }
.tag-gewaehlt { display: contents; }
.tag-chip.an .x { opacity: .7; margin-left: 4px; }
.tag-panel {
  flex-basis: 100%; border: 1px solid var(--kante); border-radius: 8px; padding: 8px;
  background: var(--papier-tief); display: flex; flex-direction: column; gap: 6px;
}
.tag-suche { width: 100%; box-sizing: border-box; }
.tag-liste { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; }
.tag-eintrag {
  font: inherit; font-size: .85rem; cursor: pointer; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--kante); background: transparent; color: var(--tinte);
}
.tag-eintrag:hover { border-color: var(--kiefer); }
.tag-eintrag.an { background: var(--akzent-fest); border-color: var(--akzent-fest); color: #fff; }

/* --- Upload-Warteschlange: Vorschau der gewählten Datei ------------------ */
.posten-mit-bild { display: flex; gap: 12px; align-items: flex-start; }
.posten-inhalt { flex: 1; min-width: 0; }
.posten-bild {
  flex: none; width: 120px; height: 120px; border-radius: 8px; overflow: hidden;
  background: var(--papier-tief); cursor: zoom-in; display: flex; align-items: center; justify-content: center;
}
.posten-bild img, .posten-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.posten-bild.ohne { color: var(--tinte-blass); font-size: .8rem; }
.posten-bild.gross { width: min(340px, 60%); height: auto; max-height: 420px; cursor: zoom-out; }
.posten-bild.gross img, .posten-bild.gross video { height: auto; max-height: 420px; object-fit: contain; }
@media (max-width: 560px) { .posten-bild.gross { width: 100%; } .posten-mit-bild.hat-gross { flex-wrap: wrap; } }

/* --- Tags auf Kacheln ---------------------------------------------------- */
.raster-kachel .raster-tags {
  position: absolute; left: 6px; right: 6px; bottom: 26px;
  padding: 1px 6px; border-radius: 4px; font-size: 10.5px; color: #fff;
  background: rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* --- Bibliothek: Ablageziele für Einzelaufnahmen -------------------------- */
.ablage-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; max-height: 92px; overflow-y: auto; }
.ablage-chip {
  font: inherit; font-size: .82rem; padding: 4px 12px; border-radius: 999px; cursor: default;
  border: 1px dashed var(--kante-stark, var(--kante)); background: transparent; color: var(--tinte);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ablage-chip.ablage-ziel { border-style: solid; border-color: var(--kiefer); background: var(--papier-tief); outline: none; }

/* --- Upload: Zusammenfassung nach dem Absenden --------------------------- */
.upload-fertig {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--kiefer); background: var(--papier-tief);
}
.upload-fertig p { margin: 4px 0 10px; }

/* --- Einreichen mit Einmalcode: zweistufiges Formular -------------------- */
.angaben-form[hidden] { display: none; }
.angaben-form .breit.lauf { margin: 0; }