/* Redaktions-Backend — eigenes, schlankes Stylesheet.
   Bewusst NICHT landingpage.css: das Backend soll ein Werkzeug sein,
   kein Markenauftritt. Grosse Klickflaechen, klare Zustaende, viel Luft. */

:root {
  --ink:    #15171a;
  --muted:  #6b7075;
  --line:   #e2e5e8;
  --bg:     #f6f7f8;
  --paper:  #fff;
  --red:    #c91624;
  --green:  #1f7a4d;
  --focus:  #2563eb;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: inherit; }

/* ── Login ──────────────────────────────────────────────── */
.login {
  max-width: 380px; margin: 12vh auto; padding: 38px 34px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.06); text-align: center;
}
.login__logo { height: 26px; margin-bottom: 26px; }
.login h1 { font-size: 21px; margin: 0 0 4px; }
.login__sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.login label { display: block; text-align: left; font-size: 13px; margin-bottom: 6px; }
.login input { width: 100%; margin-bottom: 18px; }
.login__back { margin: 22px 0 0; font-size: 13px; }
.login__back a { color: var(--muted); text-decoration: none; }

/* ── Kopfleiste ─────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--ink); color: #fff; padding: 0 24px;
  position: sticky; top: 0; z-index: 10;
}
/* Zwei Links in einem Element: Logo → Website, „Redaktion" → Uebersicht.
   Der Abstand dazwischen ist gross genug, dass man auf dem Handy nicht
   danebengreift. */
.topbar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; font-weight: 600;
}
.topbar__brand-logo,
.topbar__brand-text {
  display: flex; align-items: center;
  color: inherit; text-decoration: none;
  border-radius: 4px;
}
.topbar__brand-logo { padding: 4px 2px; opacity: .92; }
.topbar__brand-logo:hover { opacity: 1; }
.topbar__brand-text { padding: 4px 2px; }
.topbar__brand-text:hover { color: #fff; }
.topbar__brand-logo:focus-visible,
.topbar__brand-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Das Wordmark-SVG hat #1d1d1b fest eingebaut (fill im <style>-Block, nicht
   currentColor) — auf der dunklen Leiste war es damit praktisch unsichtbar.
   brightness(0) macht daraus reines Schwarz, invert(1) reines Weiss; das
   funktioniert unabhaengig davon, welche Farbwerte im SVG stehen. */
.topbar__brand img { height: 18px; filter: brightness(0) invert(1); }
.topbar__nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
/* Nur im Burgermenue: auf dem Desktop fuehrt „Redaktion" neben dem Logo
   zur Uebersicht, ein zweiter Reiter dafuer waere doppelt. */
.topbar__nav-home { display: none; }
.topbar__nav a {
  padding: 16px 14px; text-decoration: none; font-size: 14px;
  opacity: .72; border-bottom: 2px solid transparent;
}
.topbar__nav a:hover { opacity: 1; }
.topbar__nav a.is-active { opacity: 1; border-bottom-color: var(--red); }
.topbar__right { display: flex; gap: 16px; align-items: center; }
.topbar__link { font-size: 13px; opacity: .72; text-decoration: none; }
.topbar__link:hover { opacity: 1; }

/* ── Burgerknopf ────────────────────────────────────────────────────
   Auf dem Desktop unsichtbar; ab 900 px uebernimmt er die Navigation.
   Vorher standen dort neun Reiter mit Emoji nebeneinander — auf dem Handy
   brach das auf zwei bis drei Zeilen um und schob den eigentlichen Inhalt
   aus dem Bild (Meldung Mike, 18.08.).

   Die drei Striche sind EIN Element: der mittlere ist der Hintergrund,
   oben und unten kommen aus ::before/::after. Beim Oeffnen drehen sie sich
   zum Kreuz, der mittlere wird durchsichtig — kein zweites Icon noetig. */
.topbar__burger {
  display: none;                      /* siehe Media Query unten */
  align-items: center; justify-content: center;
  width: 42px; height: 38px; padding: 0;
  background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
  color: #fff; cursor: pointer;
}
.topbar__burger:hover { background: rgba(255,255,255,.08); }
.topbar__burger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.topbar__burger-lines,
.topbar__burger-lines::before,
.topbar__burger-lines::after {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s ease, opacity .18s ease;
}
.topbar__burger-lines { position: relative; }
.topbar__burger-lines::before,
.topbar__burger-lines::after { content: ""; position: absolute; left: 0; }
.topbar__burger-lines::before { top: -6px; }
.topbar__burger-lines::after  { top:  6px; }

.topbar.is-offen .topbar__burger-lines { background: transparent; }
.topbar.is-offen .topbar__burger-lines::before { transform: translateY(6px)  rotate(45deg); }
.topbar.is-offen .topbar__burger-lines::after  { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .topbar__burger-lines, .topbar__burger-lines::before, .topbar__burger-lines::after { transition: none; }
}

/* ── Restzeit-Uhr ───────────────────────────────────────────────────
   Sieben-Segment-Optik, weil eine Frist als Uhr schneller gelesen wird als
   als Satz. Die Ziffern stehen auf einem angedeuteten Display: dunkles Feld,
   leichtes Leuchten, feste Zeichenbreite (font-variant-numeric), damit beim
   Zaehlen nichts springt. */
.lcd {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 5px;
  background: #0b0d0f; border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
  cursor: default; user-select: none;
}
.lcd__label {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.lcd__time {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  color: #4ade80; text-shadow: 0 0 7px rgba(74,222,128,.55);
}
/* Letzte fuenf Minuten: Farbe wechselt und der Doppelpunkt blinkt — das faellt
   im Augenwinkel auf, ohne den Blick vom Formular zu ziehen. */
.lcd.is-knapp .lcd__time { color: #fbbf24; text-shadow: 0 0 7px rgba(251,191,36,.6); animation: lcd-blink 1s steps(1) infinite; }
.lcd.is-aus   .lcd__time { color: var(--red); text-shadow: 0 0 7px rgba(201,22,36,.6); }
@keyframes lcd-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lcd.is-knapp .lcd__time { animation: none; } }
@media (max-width: 720px) { .lcd__label { display: none; } }

/* ── Wolfskopf-Wasserzeichen unten rechts ────────────────
   Gleiches Muster wie auf der Website (.stw-support-section::after,
   .stw-model-section::after): kein <img>, sondern eine Flaeche in
   Theme-Farbe, die per Maske in die Logo-Form geschnitten wird. Damit
   bleibt die Farbe an das Theme gekoppelt und laesst sich hier heller
   fahren als auf der dunklen Website.

   `fixed` statt `absolute`, weil das Backend lange Listen hat (425 Haendler):
   am Seitenende angeheftet bekaeme es nie jemand zu sehen. So liegt es wie
   ein Briefpapier-Wasserzeichen hinter dem Inhalt — die weissen Karten und
   Tabellen decken es ohnehin ab, sichtbar bleibt es in den Raendern. */
body::after {
  content: ""; position: fixed; right: -6vw; bottom: -3vw;
  width: min(70vw, 900px); height: min(41vw, 523px);
  background: var(--ink); opacity: .045; pointer-events: none; z-index: 0;
  -webkit-mask: url("../assets/steppenwolf/logos/steppenwolf-head.svg") no-repeat center / contain;
          mask: url("../assets/steppenwolf/logos/steppenwolf-head.svg") no-repeat center / contain;
}
/* Inhalt ueber dem Wasserzeichen halten. */
.wrap, .login { position: relative; z-index: 1; }

@media print {
  body::after { display: none; }
}

.wrap { max-width: 940px; margin: 0 auto; padding: 34px 24px 90px; }
.page-title { font-size: 25px; margin: 0 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 26px; }
.crumb { margin: 0 0 14px; font-size: 14px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

/* ── Meldungen ──────────────────────────────────────────── */
.alert {
  padding: 12px 16px; border-radius: 7px; margin: 0 0 22px; font-size: 14px;
  border: 1px solid transparent;
}
.alert--ok  { background: #e9f6ef; border-color: #bfe3d0; color: var(--green); }
.alert--err { background: #fdeced; border-color: #f6c6ca; color: var(--red); }

/* ── Übersichtskarten ───────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 20px; text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.card__icon { font-size: 24px; }
.card__title { font-weight: 600; font-size: 17px; }
.card__hint { color: var(--muted); font-size: 13px; line-height: 1.45; flex: 1; }
.card__count { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px; margin-top: 4px; }

.help {
  margin-top: 34px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 22px 24px;
}
.help h2 { font-size: 15px; margin: 0 0 12px; }
.help ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.help li { margin-bottom: 7px; }

/* ── Liste ──────────────────────────────────────────────── */
.listhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.empty {
  background: var(--paper); border: 1px dashed var(--line); border-radius: 10px;
  padding: 40px; text-align: center; color: var(--muted);
}
.list { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.list td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list tr:last-child td { border-bottom: 0; }
.list__order { width: 54px; white-space: nowrap; }
.list__thumb { width: 76px; }
.list__thumb img { width: 64px; height: 42px; object-fit: cover; border-radius: 4px; display: block; background: var(--bg); }
.list__title a { font-weight: 600; text-decoration: none; }
.list__title a:hover { color: var(--red); }
.list__meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.list__state { width: 110px; }
.list__actions { width: 190px; text-align: right; white-space: nowrap; }
.inline { display: inline; }

/* Sortierspalte der Kategorie-Liste: zwei kleine Pfeile untereinander. Feste
   Breite, damit die Zeilen nicht springen, wenn beim ersten und letzten
   Eintrag jeweils ein Pfeil fehlt. */
.list__sort { width: 46px; white-space: nowrap; padding-right: 0 !important; }
.list__sort .btn { padding: 2px 7px; line-height: 1.2; }
/* Platzhalter, solange eine frisch angelegte Kategorie noch kein Motiv hat. */
.list__thumb--leer {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 42px; border-radius: 4px;
  background: var(--bg); border: 1px dashed var(--line); color: var(--muted);
}
.csvbox__form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* flex-basis statt min-width: Namensfeld und Kategorie-Auswahl sollen in
   einer Zeile bleiben, solange Platz ist, und erst danach umbrechen. */
.csvbox__form input[type=text] { flex: 1 1 200px; min-width: 0; }
.csvbox__form select { flex: 0 1 210px; }

.pill {
  border: 1px solid transparent; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; cursor: pointer; font-family: inherit;
}
.pill--on  { background: #e9f6ef; border-color: #bfe3d0; color: var(--green); }
.pill--off { background: var(--bg); border-color: var(--line); color: var(--muted); }
.pill:hover { filter: brightness(.96); }

.iconbtn {
  border: 1px solid var(--line); background: var(--paper); border-radius: 5px;
  width: 24px; height: 22px; cursor: pointer; line-height: 1; font-size: 12px;
}
.iconbtn:disabled { opacity: .3; cursor: default; }
.iconbtn:not(:disabled):hover { border-color: var(--ink); }

/* ── Formular ───────────────────────────────────────────── */
.form { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 26px 26px 8px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.field__help { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.req { color: var(--red); }

input[type=text], input[type=url], input[type=date], input[type=password], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
textarea { resize: vertical; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.check { display: flex; align-items: center; gap: 9px; font-weight: 400 !important; }
.check input { width: 17px; height: 17px; }
.field--publish { background: var(--bg); border-radius: 8px; padding: 16px 18px; }

.formbar {
  position: sticky; bottom: 0; background: var(--paper);
  border-top: 1px solid var(--line); margin: 0 -26px; padding: 16px 26px;
  display: flex; gap: 10px;
}

/* Bildfeld */
.imgfield { display: flex; gap: 16px; align-items: flex-start; }
.imgfield__preview {
  width: 148px; height: 100px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); overflow: hidden; flex-shrink: 0;
}
.imgfield__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgfield__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.imgfield__status { font-size: 13px; color: var(--muted); }

.autofill {
  background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 24px; font-size: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.autofill__status { color: var(--muted); font-size: 13px; }

/* ── CSV-Kasten in der Liste ─────────────────────────────
   Zugeklappt, weil er Alltagsarbeit nicht stört: wer einen Händler ändert,
   soll die Liste sehen, nicht erst an einem Import-Formular vorbeiscrollen. */
.csvbox {
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  margin-bottom: 20px; font-size: 14px;
}
.csvbox > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none;
}
.csvbox > summary::-webkit-details-marker { display: none; }
.csvbox > summary::before { content: "▸ "; color: var(--muted); }
.csvbox[open] > summary::before { content: "▾ "; }
.csvbox__inner { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.csvbox__hint { margin: 12px 0 16px; line-height: 1.55; }
.csvbox__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px dashed var(--line);
}
.csvbox__note { color: var(--muted); font-size: 13px; line-height: 1.5; }
.csvbox__row input[type="file"] { font: inherit; font-size: 13px; max-width: 100%; }

/* ── Kopfbereiche ───────────────────────────────────────── */
.hdrbox {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 18px; overflow: hidden;
}
.hdrbox__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.hdrbox__title { font-size: 17px; margin: 0 0 2px; }
.hdrbox__hint  { color: var(--muted); font-size: 13px; margin: 0; }
.hdrbox__body  { display: flex; gap: 20px; padding: 18px; flex-wrap: wrap; }
.hdrbox__preview {
  width: 240px; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden;
}
.hdrbox__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hdrbox__form { flex: 1; min-width: 300px; }
.hdrfield { margin-bottom: 16px; }
.hdrfield > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.hdrfield__now { font-weight: 400; color: var(--muted); }
.hdrfield__help { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 5px 0 0; }
.hdrfield input[type="file"] { font: inherit; font-size: 13px; max-width: 100%; }
.hdrfield--reset {
  border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 18px; font-size: 13px;
}
.hdrfield--reset .check { margin-top: 6px; }

/* ── Modellpflege: Farb- und Ausstattungstabelle ───────── */
.swtable, .spectable { width: 100%; border-collapse: collapse; font-size: 14px; }
.swtable th, .spectable th {
  text-align: left; font-size: 12px; color: var(--muted); font-weight: 600;
  padding: 6px 10px 6px 0; vertical-align: middle;
}
.swtable td, .spectable td { padding: 6px 10px 6px 0; vertical-align: middle; }
.swtable tr + tr td, .spectable tr + tr td, .spectable tr + tr th { border-top: 1px solid var(--line); }
.swtable__color { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.swtable__hex { display: none; }
.swtable__now { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.swtable input[type="file"] { font: inherit; font-size: 12px; max-width: 210px; }
.swtable input[type="text"], .spectable input[type="text"] { width: 100%; }
/* Ausstattung: Bezeichnung schmal, Wert bekommt den Platz. */
.spectable th { width: 34%; color: var(--ink); font-weight: 600; padding-right: 14px; }
.spectable input.is-geaendert { border-color: var(--focus); }

/* ── Instagram-Statuszeile auf der Übersicht ───────────── */
.igbox {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 22px; padding: 14px 18px; font-size: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
}
.igbox__text { color: var(--muted); }
.igbox__text strong { color: var(--ink); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 6px; border: 1px solid transparent;
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; text-align: center;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; }
.btn--ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--danger { background: var(--paper); border-color: #f0c2c6; color: var(--red); }
.btn--danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn--link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 0; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--full { width: 100%; }

/* ── Schmale Bildschirme: Navigation ins Burgermenue ────────────────
   900 px, nicht 700: Bei neun Reitern samt Emoji fangen die Umbrueche
   schon auf dem Tablet an. Die Grenze richtet sich nach dem Punkt, an dem
   die Leiste zweizeilig wird — nicht nach einer runden Geraetegroesse. */
@media (max-width: 900px) {
  .topbar { gap: 10px; padding: 0 14px; flex-wrap: wrap; }
  .topbar__brand { padding: 12px 0; margin-right: auto; }
  .topbar__burger { display: inline-flex; }

  /* Reiter und die beiden Links klappen gemeinsam auf: eine volle Zeile
     unter der Leiste, untereinander statt nebeneinander. */
  .topbar__nav,
  .topbar__right {
    display: none;
    order: 9; flex: 0 0 100%;
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .topbar.is-offen .topbar__nav,
  .topbar.is-offen .topbar__right { display: flex; }

  .topbar__nav { border-top: 1px solid rgba(255,255,255,.14); padding-top: 4px; }
  .topbar__nav-home { display: block; }
  .topbar__nav a {
    padding: 13px 4px; font-size: 15px; opacity: .85;
    border-bottom: none; border-left: 3px solid transparent;
  }
  /* Der aktive Reiter wird links markiert statt unten — untereinander
     saehe eine Unterstreichung wie ein Trennstrich zur naechsten Zeile aus. */
  .topbar__nav a.is-active { border-left-color: var(--red); padding-left: 10px; }

  .topbar__right {
    border-top: 1px solid rgba(255,255,255,.14);
    padding: 6px 0 12px;
  }
  .topbar__link { padding: 11px 4px; font-size: 15px; }
}

/* Handy-Breite: Die Kopfzeile muss EINZEILIG bleiben.
   Nachgemessen bei 390 px: Wordmark 166 + „Redaktion" 76 + Uhr 73 + Burger 42
   plus Abstaende = 415 px — 25 zu viel, der Burger rutschte in eine zweite
   Zeile. Das Wordmark ist der Brocken, also wird es kleiner; alles andere
   bleibt bedienbar gross. Danach: 358 px. */
@media (max-width: 480px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__brand { gap: 8px; }
  .topbar__brand img { height: 14px; }
  .topbar__brand-text { font-size: 14px; }
}

/* Ganz schmal (360 px und weniger): Auch verkleinert braucht die Zeile noch
   364 px — 4 zu viel. Statt weiter an Schriftgroessen zu drehen faellt hier
   das Wort „Redaktion" weg; den Weg zur Uebersicht uebernimmt der Eintrag
   „🏠 Übersicht" im Burgermenue. */
@media (max-width: 400px) {
  .topbar { padding: 0 10px; }
  .topbar__brand-text { display: none; }
  .topbar__brand img { height: 15px; }
}

@media (max-width: 700px) {
  .imgfield { flex-direction: column; }
  .page-title { font-size: 22px; }
  .wrap { padding: 22px 14px 70px; }

  /* Listen werden zu Karten.
     Als Tabelle blieb bei 414 px fuer den Namen keine 100 px Spalte uebrig —
     „Transterra Sport 10" stand dann dreizeilig neben zwei Knoepfen, die
     ihrerseits untereinander rutschten. Jede Zeile ist deshalb ein Block:
     Name oben ueber die volle Breite, darunter Status links und die Knoepfe
     rechts. Die Vorschaubilder entfallen — sie kosten die Haelfte der
     Breite und tragen zum Wiedererkennen nichts bei, was der Name nicht
     schon leistet. */
  .list__thumb, .list__order { display: none; }
  .list tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
  }
  .list tr:last-child { border-bottom: 0; }
  .list td { display: block; width: auto; padding: 0; border: 0; }
  .list__title { flex: 1 1 100%; }
  .list__sort { flex: 0 0 auto; order: -1; display: flex; gap: 4px; }
  .list__state { flex: 0 0 auto; }
  .list__actions {
    flex: 1 1 auto; display: flex; gap: 8px;
    justify-content: flex-end; flex-wrap: wrap;
  }

  /* Anlege-Kaesten: Feld, Auswahl und Knopf jeweils volle Breite —
     nebeneinander waeren alle drei zu schmal zum Treffen. */
  .csvbox__form { flex-direction: column; align-items: stretch; }
  .csvbox__form input[type=text],
  .csvbox__form select,
  .csvbox__form .btn { width: 100%; flex: 0 0 auto; }

  .formbar { flex-wrap: wrap; gap: 8px; }
  .formbar .btn { flex: 1 1 auto; }
}

/* ─────────────────────────────────────────────────────────────
   Sicherheitsprotokoll (?section=sicherheit)
   Reine Leseansicht — kein Formular, keine Aktionen. Farben
   sparsam: eine Ansicht, die dauernd rot leuchtet, wird nach
   zwei Tagen ignoriert. Rot nur bei echter Auffälligkeit.
   ───────────────────────────────────────────────────────────── */
.seclog-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 22px 0 28px;
}
.seclog-kpi__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.seclog-kpi__item.is-warn  { border-color: #f0c98a; background: #fffaf0; }
.seclog-kpi__item.is-alarm { border-color: #f6c6ca; background: #fdeced; }
.seclog-kpi__zahl { font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.seclog-kpi__zahl--klein { font-size: 17px; padding-top: 8px; }
.seclog-kpi__label { font-size: 12px; color: var(--muted); }

.seclog-h2 { font-size: 17px; margin: 30px 0 8px; }
.seclog-hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; max-width: 70ch; }

.seclog-tabelle th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.seclog-tabelle td { font-size: 13px; }
.seclog-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted);
  background: var(--bg); padding: 2px 6px; border-radius: 4px;
}
/* Browser-Kennung darf die Tabelle nicht sprengen. */
.seclog-ua {
  color: var(--muted); font-size: 12px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seclog-zeile.is-ok    td:nth-child(2) { color: var(--green); }
.seclog-zeile.is-fail  td:nth-child(2) { color: var(--muted); }
.seclog-zeile.is-alarm td:nth-child(2) { color: var(--red); font-weight: 600; }
.seclog-zeile.is-alarm { background: #fdeced; }

/* Übersichts-Kachel nur im Auffälligkeitsfall einfärben. */
.card--warn { border-color: #f6c6ca; background: #fdeced; }
.card--warn .card__count { color: var(--red); font-weight: 600; }

/* Feld, das beim Speichern-Versuch leer war — dezent, nicht alarmierend.
   Die Markierung verschwindet, sobald etwas eingetragen wird. */
.is-fehlend {
  border-color: var(--red) !important;
  background: #fffafa;
}