/* ══════════════════════════════════════════════════════════════════════
   SLYNE — Anwendungs-Oberfläche des Social-Bots (17.07.2026)
   ══════════════════════════════════════════════════════════════════════
   Die Tokens sind 1:1 aus `slyne/site/css/theme.css` übernommen und dort
   AUS DEM LOGO GEMESSEN (Pillow), nicht geschätzt. Wer hier Farben ändert,
   ändert die Marke — Änderungen gehören zuerst nach slyne/site/css/theme.css.

   NUR DUNKEL. Der alte Bot hatte einen Hell/Dunkel-Umschalter; SLYNE hat keinen.
   Die Marke lebt vom Indigo-Grund, auf dem der Verlauf leuchtet — auf Weiß
   ist sie eine andere Marke. Ein Umschalter wäre kein Feature, sondern ein
   zweites, ungepflegtes Design.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Schriften: lokal, kein CDN zur Laufzeit ───────────────────────── */
@font-face { font-family:'Clash Display'; src:url('fonts/clash-display-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('fonts/clash-display-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('fonts/clash-display-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('fonts/switzer-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('fonts/switzer-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('fonts/switzer-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --bg:#05051F; --bg-deep:#04041C; --bg-elevated:#0B0A2E;
  --text:#FFF5F3; --text-muted:#B9B4CE; --text-dim:#7C77A0;

  --brand-1:#F24242; --brand-2:#F29A58; --brand-3:#8442DC; --brand-3-soft:#B06EDC;
  --gradient:linear-gradient(100deg,var(--brand-1) 0%,var(--brand-2) 46%,var(--brand-3) 100%);

  /* 🩸 GEMESSEN: dunkler Text (#1A0A20) auf dem VIOLETTEN Verlaufsende steht bei
     nur 3,4:1 ⇒ AA verfehlt. Flächen mit dunklem Text tragen deshalb NUR die
     hellen Stopps (Rot 5,1:1 · Orange 8,6:1). Der volle Dreiklang bleibt Deko. */
  --gradient-btn:linear-gradient(100deg,var(--brand-1) 0%,var(--brand-2) 100%);
  --accent:var(--brand-3-soft); --on-accent:#1A0A20;

  --glass:rgba(255,245,243,0.035); --glass-strong:rgba(255,245,243,0.07);
  --border:rgba(255,245,243,0.12); --border-soft:rgba(255,245,243,0.07);

  /* Statusfarben — auf dem Indigo geprüft, nicht die Ampel-Standardwerte */
  --ok:#4ADE80; --warn:#F29A58; --err:#F24242; --info:var(--brand-3-soft);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px;

  --ease:cubic-bezier(0.22,1,0.36,1); --t-micro:0.18s; --t-entry:0.62s;
  --sidebar:264px;
}

*,*::before,*::after { box-sizing:border-box; }

/* 🩸 Muss GANZ OBEN und mit !important stehen. Das `hidden`-Attribut ist nur
   ein `display:none` aus dem Browser-Standard — jede eigene display-Regel
   schlägt es. Ein `.bild-vorschau { display:block }` machte damit ein
   verstecktes <img hidden> sichtbar: als kaputtes Bild-Symbol mit Alt-Text.
   Einmal je Bauteil nachzupatchen (wie anfangs bei .banner) heilt das Symptom
   und lässt die Falle für das nächste Element scharf. */
[hidden] { display:none !important; }

body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Switzer',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  /* 🩸 GEMESSEN (17.07.), nicht geschätzt: Switzers Leerzeichen ist 0.2em breit,
     Clash Displays sogar nur 0.15em — üblich sind ~0.25em. Auf slyne.de fällt
     das nicht auf, weil dort fast alles gross gesetzt ist. In einer Anwendung
     mit 0.7–1.1rem-Text verschmelzen Wörter sichtbar zu "AlsNächstes".
     Das ist kein Geschmack, sondern eine Eigenschaft der Schriften. */
  word-spacing:0.04em;
}

h1,h2,h3,h4 {
  font-family:'Clash Display',Georgia,serif; font-weight:600;
  line-height:1.08; letter-spacing:-0.025em; margin:0;
  /* Clash Display braucht mehr Ausgleich als Switzer (0.15em vs 0.2em) — und
     die negative Sperrung zieht zusätzlich zu. */
  word-spacing:0.1em;
}
h1 { font-size:clamp(1.9rem,3.2vw,2.6rem); }
h2 { font-size:1.5rem; }
h3 { font-size:1.1rem; letter-spacing:-0.015em; }

a { color:var(--accent); }

/* ══ Aurora — der Grund der Marke ════════════════════════════════════
   Dieselben drei Blobs wie auf slyne.de, aber ruhiger: eine Anwendung, in
   der man arbeitet, darf nicht im Hintergrund zappeln. Deshalb halbe
   Deckkraft und keine Animation. */
.aurora { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg-deep); }
.aurora::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 20%, transparent 0%, var(--bg-deep) 80%),
    linear-gradient(180deg, transparent 0%, var(--bg-deep) 60%);
}
.blob { position:absolute; width:44vw; height:44vw; min-width:320px; min-height:320px;
        border-radius:50%; filter:blur(120px); opacity:0.07; }
.blob-1 { background:var(--brand-1); top:-20%; left:0; }
.blob-2 { background:var(--brand-2); top:-14%; left:34%; opacity:0.05; }
.blob-3 { background:var(--brand-3); top:-18%; right:0; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ══ App-Gerüst ══════════════════════════════════════════════════════
   Feste Seitenleiste + Inhalt. Der alte Bot war eine schmale Spalte in der
   Mitte — links und rechts nichts. Die Leiste füllt die linke Seite mit
   etwas Nützlichem (Navigation + Kanal-Status), statt mit Luft. */
.app { display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh; }

.sidebar {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:var(--s-5);
  padding:var(--s-5) var(--s-4);
  background:linear-gradient(180deg, rgba(11,10,46,0.9) 0%, rgba(4,4,28,0.9) 100%);
  border-right:1px solid var(--border-soft);
  backdrop-filter:blur(12px);
  overflow-y:auto;
}

/* ── Marke: SLYNE + „powered by Flowmatik24" ──────────────────────
   Philip: „überall das Logo von Flowmatik24 bzw. powered by Flowmatik24" —
   der Bezug ist Pflicht, die Form ist frei. */
.brand { display:block; text-decoration:none; padding:var(--s-2) var(--s-3) 0; }
.wordmark {
  font-family:'Clash Display',serif; font-weight:600; font-size:1.6rem;
  text-transform:uppercase;
  /* Die weite Sperrung ist der Fingerabdruck der Wortmarke (am Logo gemessen).
     Sperrung schiebt rechts Leerraum an — margin-right gleicht das aus.
     Tracking und Ausgleich sind ein PAAR, nie einzeln ändern. */
  letter-spacing:0.2em; margin-right:-0.2em;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block;
}
.brand-pb { display:flex; align-items:center; gap:6px; margin-top:var(--s-2); color:var(--text-dim); font-size:0.68rem; }
.brand-pb svg { width:15px; height:15px; flex:none; }
.brand-pb b { color:var(--text-muted); font-weight:500; }

/* ── Navigation ─────────────────────────────────────────────────── */
.nav { display:flex; flex-direction:column; gap:2px; }
.nav-label {
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--text-dim); padding:var(--s-4) var(--s-3) var(--s-2);
}
.nav-item {
  display:flex; align-items:center; gap:var(--s-3);
  padding:10px var(--s-3); border-radius:var(--r-sm);
  color:var(--text-muted); text-decoration:none; font-size:0.94rem; font-weight:500;
  border:1px solid transparent;
  transition:background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.nav-item:hover { background:var(--glass); color:var(--text); }
.nav-item .num { font-size:0.7rem; color:var(--text-dim); font-variant-numeric:tabular-nums; min-width:16px; }
.nav-item[aria-current="page"] {
  background:var(--glass-strong); color:var(--text); border-color:var(--border);
}
/* Der aktive Punkt trägt den Verlauf als schmale Kante — Deko, kein Text drauf. */
.nav-item[aria-current="page"]::before {
  content:''; position:absolute; left:0; width:3px; height:20px;
  border-radius:0 3px 3px 0; background:var(--gradient);
}
.nav-item[aria-current="page"] { position:relative; }
.nav-item[aria-current="page"] .num { color:var(--brand-2); }

.sidebar-spacer { flex:1; }

/* ── Kanal-Status in der Leiste ──────────────────────────────────── */
.kanal-box { border:1px solid var(--border-soft); border-radius:var(--r-md); padding:var(--s-3) var(--s-4); background:var(--glass); }
.kanal-box h4 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); font-family:'Switzer',sans-serif; font-weight:500; margin-bottom:var(--s-3); }
.kanal-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); padding:3px 0; font-size:0.85rem; color:var(--text-muted); }
.dot-status { width:7px; height:7px; border-radius:50%; flex:none; }
.dot-status.an { background:var(--ok); box-shadow:0 0 8px var(--ok); }
.dot-status.aus { background:var(--text-dim); }

/* ── Benutzerkarte unten ────────────────────────────────────────── */
.userbox { border-top:1px solid var(--border-soft); padding-top:var(--s-4); display:flex; align-items:center; gap:var(--s-3); }
.avatar {
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--gradient-btn); color:var(--on-accent);
  display:grid; place-items:center; font-weight:700; font-size:0.8rem;
}
/* Avatar und Name führen zum eigenen Zugang — dort sucht man Passwort und
   Kontaktdaten zuerst. Sie sind Links, sollen aber nicht wie Links aussehen. */
.userbox-meta { min-width:0; flex:1; text-decoration:none; color:inherit; display:block; }
.userbox-name { font-size:0.85rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); display:block; }
.userbox-rolle { font-size:0.7rem; color:var(--text-dim); display:block; }
a.avatar { text-decoration:none; transition:transform var(--t-micro) var(--ease); }
a.avatar:hover { transform:scale(1.08); }
.userbox-meta:hover .userbox-name { color:var(--brand-2); }
.icon-btn {
  background:none; border:1px solid var(--border-soft); color:var(--text-muted);
  border-radius:var(--r-sm); padding:5px 9px; cursor:pointer; font-size:0.75rem;
  transition:border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.icon-btn:hover { border-color:var(--brand-3-soft); color:var(--text); }

/* ══ Inhalt ══════════════════════════════════════════════════════ */
/* 🩸 `min-width:0` ist hier KEINE Vorsichtsmassnahme, sondern trägt das Layout.
   Grid- und Flex-Elemente haben von Haus aus `min-width:auto` — sie schrumpfen
   nie unter die Breite ihres breitesten Inhalts. Eine Tabelle mit nowrap-Spalten
   drückt damit die ganze SEITE auf, statt in ihrem eigenen `.tabelle-wrap` zu
   scrollen. Auf dem Handy war die Kopfzeile dadurch nur halb so breit wie der
   Inhalt und alles verschob sich seitlich. Diese Zeilen bitte nicht "aufräumen". */
.main { padding:var(--s-6) var(--s-7); min-width:0; overflow-x:hidden; }
.page { max-width:1180px; margin:0 auto; min-width:0; }
/* Zwei Spalten ab 1500px: der Inhalt wächst nicht ins Leere, die rechte
   Schiene nimmt, was sonst am Rand als Luft stünde. */
.page-rail { display:grid; grid-template-columns:1fr; gap:var(--s-6); min-width:0; }
.page-rail > * { min-width:0; }
@media (min-width:1500px) { .page-rail { grid-template-columns:1fr 320px; align-items:start; } }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-6); }
.eyebrow { display:flex; align-items:center; gap:var(--s-2); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--text-dim); margin:0 0 var(--s-2); }
.eyebrow .dot { width:5px; height:5px; border-radius:50%; background:var(--brand-2); }
.page-head p.sub { color:var(--text-muted); margin:var(--s-2) 0 0; font-size:0.95rem; }
.grad { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Kacheln ───────────────────────────────────────────────────── */
.tiles { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-bottom:var(--s-6); }
.tile {
  background:var(--glass); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); padding:var(--s-5);
  transition:border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.tile:hover { border-color:var(--border); transform:translateY(-2px); }
.tile-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); }
.tile-wert { font-family:'Clash Display',serif; font-size:2.1rem; font-weight:600; line-height:1.1; margin-top:var(--s-2); font-variant-numeric:tabular-nums; }
.tile-wert.ok { color:var(--ok); } .tile-wert.warn { color:var(--warn); } .tile-wert.err { color:var(--err); }
.tile-fuss { font-size:0.78rem; color:var(--text-dim); margin-top:var(--s-1); }

/* ── Karten ────────────────────────────────────────────────────── */
.card { background:var(--glass); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:var(--s-6); }
.card + .card { margin-top:var(--s-5); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); flex-wrap:wrap; }
.card-head h2, .card-head h3 { margin:0; }
/* Ohne diese zwei Regeln riss ein langer Beschreibungstext die Status-Pille in
   die nächste Zeile — bei kurzen Karten sass sie rechts oben, bei langen unten.
   Dasselbe Bauteil darf nicht je nach Textlänge woanders stehen. */
.card-head > div:first-child { flex:1 1 260px; min-width:0; }
.card-head > .pill { flex:none; }
.card p.hint { color:var(--text-muted); font-size:0.9rem; margin:var(--s-2) 0 0; }

/* ── Knöpfe ────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:10px var(--s-5); border-radius:var(--r-pill);
  font-family:'Switzer',sans-serif; font-weight:500; font-size:0.92rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease),
             background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-primary { background:var(--gradient-btn); color:var(--on-accent); font-weight:700; }
.btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 32px -8px var(--brand-1); }
.btn-ghost { background:var(--glass); color:var(--text); border-color:var(--border); }
.btn-ghost:hover:not(:disabled) { background:var(--glass-strong); border-color:var(--brand-3-soft); transform:translateY(-2px); }
.btn-danger { background:transparent; color:var(--err); border-color:rgba(242,66,66,0.4); }
.btn-danger:hover:not(:disabled) { background:rgba(242,66,66,0.12); border-color:var(--err); }
.btn-sm { padding:6px var(--s-3); font-size:0.82rem; }

/* ── Formulare ─────────────────────────────────────────────────── */
.field { display:block; margin-bottom:var(--s-4); }
.field > span, .field-label { display:block; font-size:0.82rem; color:var(--text-muted); margin-bottom:6px; font-weight:500; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=datetime-local], input[type=number], select, textarea {
  width:100%; padding:10px var(--s-4);
  background:rgba(4,4,28,0.6); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:'Switzer',sans-serif; font-size:0.94rem;
  transition:border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--brand-3-soft);
  box-shadow:0 0 0 3px rgba(176,110,220,0.18);
}
textarea { resize:vertical; min-height:100px; line-height:1.55; }
input::placeholder, textarea::placeholder { color:var(--text-dim); }
.f-row { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.f-hint { font-size:0.78rem; color:var(--text-dim); margin:-8px 0 var(--s-4); }
.checkline { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) 0; }
.checkline input[type=checkbox] { width:17px; height:17px; accent-color:var(--brand-3); cursor:pointer; }
.checkline label { font-size:0.92rem; cursor:pointer; }

/* ── Tabellen ──────────────────────────────────────────────────── */
.tabelle-wrap { overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--border-soft); }
table { width:100%; border-collapse:collapse; font-size:0.9rem; }
th {
  text-align:left; padding:var(--s-3) var(--s-4);
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-dim); font-weight:500;
  background:rgba(4,4,28,0.5); border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
td { padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border-soft); vertical-align:top; color:var(--text-muted); }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background-color var(--t-micro) var(--ease); }
tbody tr:hover { background:var(--glass); }
td.datum { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text); }
/* Der Text ist der Inhalt der Zeile — er bekommt den Platz, nicht die Randspalten.
   Ohne die min-width drückten die nowrap-Spalten ihn auf ein Wort pro Zeile. */
td.text-zelle { color:var(--text); min-width:300px; width:99%; }
.zeilen-marken { margin-top:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:0.78rem; color:var(--text-dim); }
/* nowrap: die Knöpfe brachen sonst untereinander um und machten jede Zeile
   dreimal so hoch. Wird es zu eng, scrollt .tabelle-wrap waagerecht — das ist
   die bessere Niederlage. */
.zeilen-aktionen { display:flex; gap:6px; flex-wrap:nowrap; }
td:last-child { white-space:nowrap; }

/* 🩸 Status UND Aktionen in EINER Spalte, gestapelt. Als zwei Spalten frassen
   sie zusammen 501 von 760 px (gemessen) — die Tabelle war 178 px zu breit und
   der „Löschen"-Knopf hing rechts ausserhalb. Untereinander brauchen sie nur
   die Breite des Breiteren, und der Beitragstext bekommt den Rest. */
.status-zelle { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.status-zelle .kanal-tag { margin:-4px 0 0; }

/* ── Pillen / Status ───────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:0.74rem; font-weight:500; white-space:nowrap;
  border:1px solid var(--border-soft); background:var(--glass);
  color:var(--text-muted);
}
.pill.ausstehend { color:var(--brand-3-soft); border-color:rgba(176,110,220,0.35); }
.pill.gepostet { color:var(--ok); border-color:rgba(74,222,128,0.35); }
.pill.fehler { color:var(--err); border-color:rgba(242,66,66,0.4); background:rgba(242,66,66,0.08); }
.pill.rolle-admin { background:var(--gradient-btn); color:var(--on-accent); font-weight:700; border-color:transparent; }
.kanal-tag { font-size:0.7rem; color:var(--text-dim); }

/* ══ Status — deutlich (Kai, 17.07.2026: „muss etwas deutlicher zu erkennen sein")
   Die kleine graue Pille von vorher war zu leise: „ausstehend" und „gepostet"
   unterschieden sich nur durch Textfarbe in 0.74rem. Jetzt tragen sie
   dreifache Redundanz — Zeichen, Farbe UND Wort — plus eine farbige Kante an
   der ganzen Zeile. Farbe allein reicht nicht: rund 8 % der Männer sehen
   Rot/Grün nicht zuverlässig. */
.status {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 10px; border-radius:var(--r-pill);
  font-size:0.84rem; font-weight:700; white-space:nowrap;
  border:1px solid transparent;
}
.status .zeichen { font-size:0.9em; line-height:1; }
.status-gepostet   { background:rgba(74,222,128,0.16);  color:#7BE8A4; border-color:rgba(74,222,128,0.45); }
.status-ausstehend { background:rgba(176,110,220,0.16); color:#C89BE8; border-color:rgba(176,110,220,0.45); }
.status-fehler     { background:rgba(242,66,66,0.18);   color:#FF8080; border-color:rgba(242,66,66,0.55); }
.status-teilweise,
.status-teilweise-fehler { background:rgba(242,154,88,0.16); color:#F5B37C; border-color:rgba(242,154,88,0.5); }
.status-entwurf    { background:var(--glass); color:var(--text-dim); border-color:var(--border); }

/* Farbige Kante an der Zeile — man erkennt den Zustand schon beim Überfliegen,
   ohne die Statusspalte zu lesen. */
tr.zeile-gepostet   td:first-child { box-shadow:inset 4px 0 0 var(--ok); }
tr.zeile-ausstehend td:first-child { box-shadow:inset 4px 0 0 var(--brand-3-soft); }
tr.zeile-fehler     td:first-child { box-shadow:inset 4px 0 0 var(--err); }
tr.zeile-teilweise td:first-child,
tr.zeile-teilweise-fehler td:first-child { box-shadow:inset 4px 0 0 var(--warn); }
tr.zeile-entwurf    td:first-child { box-shadow:inset 4px 0 0 var(--text-dim); }
tr.zeile-fehler { background:rgba(242,66,66,0.045); }
tr.zeile-gepostet { opacity:0.82; }   /* Erledigtes tritt zurück, ohne zu verschwinden */
tr.zeile-gepostet:hover { opacity:1; }

/* ── Ziele je Beitrag (welches Konto, und wie ist es dort ausgegangen) ── */
.ziele { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ziel {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:var(--r-pill);
  font-size:0.72rem; font-weight:500; white-space:nowrap;
  border:1px solid var(--border-soft); background:var(--glass); color:var(--text-muted);
}
.ziel .zeichen { font-size:0.85em; }
.ziel-gepostet   { color:#7BE8A4; border-color:rgba(74,222,128,0.4); }
.ziel-ausstehend { color:#C89BE8; border-color:rgba(176,110,220,0.4); }
.ziel-fehler     { color:#FF8080; border-color:rgba(242,66,66,0.5); background:rgba(242,66,66,0.1); }
.ziel-inaktiv    { opacity:0.5; text-decoration:line-through; }

/* ── Vorschaubild in der Liste (Kai: „vorschaubilder müssen wieder zu sehen sein") ── */
.mini {
  width:64px; height:64px; flex:none;
  border-radius:var(--r-sm); border:1px solid var(--border-soft);
  object-fit:cover; background:rgba(4,4,28,0.6); display:block;
}
.mini-leer {
  width:64px; height:64px; flex:none;
  border-radius:var(--r-sm); border:1px dashed var(--border);
  display:grid; place-items:center; color:var(--text-dim); font-size:0.62rem; text-align:center;
  line-height:1.2; padding:4px;
}
.zeile-inhalt { display:flex; gap:var(--s-3); align-items:flex-start; }
.zeile-text { min-width:0; flex:1; }

/* ── Banner / Meldungen ────────────────────────────────────────── */
.banner {
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--glass);
  font-size:0.9rem; margin-bottom:var(--s-5);
}
.banner.warn { border-color:rgba(242,154,88,0.4); background:rgba(242,154,88,0.09); color:var(--text); }
.banner.err  { border-color:rgba(242,66,66,0.45); background:rgba(242,66,66,0.1); color:var(--text); }
.banner.ok   { border-color:rgba(74,222,128,0.35); background:rgba(74,222,128,0.08); }
.banner.info { border-color:rgba(176,110,220,0.35); background:rgba(176,110,220,0.08); }
.banner a { color:var(--text); text-decoration:underline; }
.banner .banner-icon { flex:none; font-size:1rem; line-height:1.4; }

.leer {
  text-align:center; padding:var(--s-8) var(--s-5); color:var(--text-dim);
  border:1px dashed var(--border); border-radius:var(--r-lg);
}
.leer h3 { color:var(--text-muted); margin-bottom:var(--s-2); }

/* ── Rechte Schiene ────────────────────────────────────────────── */
.rail { display:flex; flex-direction:column; gap:var(--s-4); }
.rail .card { padding:var(--s-5); }
.rail h3 { font-size:0.95rem; margin-bottom:var(--s-4); }
.rail-liste { display:flex; flex-direction:column; gap:var(--s-3); }
.rail-item { display:flex; gap:var(--s-3); align-items:flex-start; font-size:0.85rem; }
.rail-item .wann { color:var(--brand-2); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:0.78rem; padding-top:2px; }
.rail-item .was { color:var(--text-muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ── Anmeldung ─────────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--s-5); }
.login-card {
  width:100%; max-width:410px;
  background:var(--glass); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); padding:var(--s-7) var(--s-6);
  backdrop-filter:blur(14px);
}
.login-card .wordmark { font-size:2.1rem; text-align:center; }
.login-card .brand-pb { justify-content:center; margin-bottom:var(--s-7); }
.login-card .btn { width:100%; margin-top:var(--s-2); }

/* ── Anleitung ─────────────────────────────────────────────────── */
.prosa { max-width:74ch; }
.prosa h2 { margin:var(--s-7) 0 var(--s-4); }
.prosa h3 { margin:var(--s-6) 0 var(--s-3); color:var(--text); }
.prosa p, .prosa li { color:var(--text-muted); font-size:0.96rem; }
.prosa ol, .prosa ul { padding-left:var(--s-5); }
.prosa li { margin-bottom:var(--s-3); }
.prosa code {
  background:rgba(4,4,28,0.7); border:1px solid var(--border-soft);
  padding:2px 6px; border-radius:5px; font-size:0.86em;
  color:var(--brand-2); font-family:ui-monospace,'SF Mono',Menlo,monospace;
  overflow-wrap:anywhere;
}
.prosa strong { color:var(--text); }
.schritt {
  display:flex; gap:var(--s-4); padding:var(--s-5) 0;
  border-bottom:1px solid var(--border-soft);
}
.schritt:last-child { border-bottom:none; }
.schritt-num {
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--gradient-btn); color:var(--on-accent);
  display:grid; place-items:center; font-weight:700; font-size:0.82rem;
}
.schritt-inhalt { min-width:0; flex:1; }
.schritt-inhalt h3 { margin:0 0 var(--s-2); font-size:1.02rem; }
.schritt-inhalt p { margin:0 0 var(--s-2); font-size:0.92rem; }

/* Inhaltsverzeichnis der Anleitung */
.toc { position:sticky; top:var(--s-6); }
.toc a { display:block; padding:6px var(--s-3); color:var(--text-muted); text-decoration:none; font-size:0.86rem; border-left:2px solid var(--border-soft); }
.toc a:hover { color:var(--text); border-left-color:var(--brand-3-soft); }

/* ── Kleinkram ─────────────────────────────────────────────────── */
.bild-vorschau { max-width:200px; border-radius:var(--r-md); border:1px solid var(--border-soft); display:block; margin-top:var(--s-3); }
.spinner {
  display:inline-block; width:13px; height:13px;
  border:2px solid rgba(255,245,243,0.25); border-top-color:var(--text);
  border-radius:50%; animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--s-4); top:var(--s-4); z-index:100; background:var(--bg-elevated); padding:var(--s-3) var(--s-4); border-radius:var(--r-sm); color:var(--text); }

/* ── Schmal: Leiste wird zur Kopfzeile ─────────────────────────── */
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .sidebar {
    position:static; height:auto; flex-direction:row; align-items:center;
    flex-wrap:wrap; gap:var(--s-3); border-right:none;
    border-bottom:1px solid var(--border-soft); padding:var(--s-3) var(--s-4);
  }
  .nav { flex-direction:row; flex-wrap:wrap; gap:var(--s-1); }
  .nav-label, .kanal-box, .sidebar-spacer { display:none; }
  .nav-item .num { display:none; }
  .brand { padding:0; }
  .brand-pb { display:none; }
  .wordmark { font-size:1.25rem; }
  .userbox { border-top:none; padding-top:0; width:auto; }
  .userbox-meta { display:none; }
  .main { padding:var(--s-5) var(--s-4); }
}