/* ============================================================
   TextLab — Design nach dem Auftritt der epd-Landesdienste
   (epd.de/regional/niedersachsen_bremen, 29.07.2026):
   Hausfarbe Rot #E31B22, Hausschrift Rubik, flache Flächen,
   kaum Rundungen, Linien statt Schatten. Der Basisdienst ist
   grün, die Landesdienste sind rot — TextLab gehört zu Rot.

   Schriften selbst gehostet (vendor/fonts/fonts.css), kein
   Aufruf bei Google zur Laufzeit (DSGVO).
   ============================================================ */

:root {
  /* Hausfarbe. Die alten --coral-Namen bleiben als Aliase bestehen:
     sie stecken in Ansichten als Inline-Stil und sollen nicht bei
     jeder Farbanpassung erneut durchsucht werden müssen. */
  /* Drei Rollen, weil eine Farbe nicht beides kann: --epd-fill ist die Fläche
     mit weißer Schrift (6,2:1), --epd ist Rot ALS SCHRIFT auf hellem Grund.
     Im Dunkelmodus muss die Schriftfarbe aufhellen, die Fläche aber nicht —
     weiß auf aufgehelltem Rot ergäbe nur 3,1:1. */
  --epd:#E31B22; --epd-700:#B4151B; --epd-soft:#FBE7E8;
  --epd-fill:#E31B22; --epd-fill-hover:#B4151B;
  --coral:var(--epd); --coral-700:var(--epd-700); --coral-soft:var(--epd-soft);

  /* Enges Farbband statt Ampel (Daniel, 29.07.: „Rot und grün,
     Komplementärkontrast, wirkt billig"). Alles liegt zwischen 355° und 35°:
     Rot – Burgunder – Ocker, dazu warme Grautöne. Zustände unterscheiden sich
     über Tiefe, nicht über Farbwechsel.
       fertig  = Burgunder, satt und ruhig — abgeschlossen, nicht laut
       arbeit  = genau die Mitte zwischen Entwurf-Grau und Fertig-Burgunder,
                 kanalweise gemittelt (Daniel, 29.07.: „Nimm doch eine Farbe,
                 die exakt zwischen dem Mittelgrau von Entwurf und dem Blassen
                 von finalisiert liegt"). Der Ocker davor war ein Fremdkörper:
                 eigener Farbton statt Zwischenschritt.
       störung = dunkles Braunrot, dazu ein Balken; die Farbe allein trägt hier
                 nicht, weil das ganze Schema rot ist. */
  --fertig:#6E1A1F; --fertig-soft:#F6E7E6;
  --arbeit:#6E4042; --arbeit-soft:#F4ECEA;
  --green:var(--fertig); --green-soft:var(--fertig-soft);   /* Altnamen */
  --ocker:var(--arbeit); --ocker-soft:var(--arbeit-soft);
  --amber:var(--arbeit); --amber-soft:var(--arbeit-soft);

  /* Warme Neutraltöne — angeregt von Daniels Palette (262222 / ECEAEA /
     BEBBBA). Reines Grau wirkt neben dem warmen Rot kalt. */
  --ink:#262222; --grey:#6E6764; --grey-2:#8E8683;
  --hairline:#DAD6D4; --line:var(--hairline); --bg:#F2F0EF; --paper:#FFFFFF;

  --danger:#8E1B14; --danger-soft:#F7E6E4;
  --shadow:none;
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --radius:3px;
  --sans:'Rubik', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:var(--sans);        /* Alias: die Serifenschrift ist raus */
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
[data-theme="dark"] {
  /* #E31B22 auf dunklem Grund ergibt nur 2,9:1 — als Text unlesbar.
     Aufgehellt auf ~5,8:1, der Vollton bleibt für Flächen. Dasselbe gilt für
     Burgunder und Ocker: satt auf hell, aufgehellt auf dunkel. */
  --epd:#F4645E; --epd-700:#F4645E; --epd-soft:#33191A;
  --epd-fill:#E31B22; --epd-fill-hover:#B4151B;

  --fertig:#E0A0A2; --fertig-soft:#2A1B1C;
  --arbeit:#C4A0A0; --arbeit-soft:#201717;
  --green:var(--fertig); --green-soft:var(--fertig-soft);
  --ocker:var(--arbeit); --ocker-soft:var(--arbeit-soft);
  --amber:var(--arbeit); --amber-soft:var(--arbeit-soft);

  --ink:#EDEAE8; --grey:#A9A19E; --grey-2:#968E8B;
  --hairline:#332E2C; --line:var(--hairline); --bg:#161312; --paper:#1F1B1A;

  --danger:#F08076; --danger-soft:#2E1A18;
  --shadow:none;
  --shadow-lg:0 8px 32px rgba(0,0,0,.55);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--epd); text-decoration:none; }
a:hover { color:var(--epd-700); text-decoration:underline; }
h1,h2,h3 { font-family:var(--sans); font-weight:500; letter-spacing:-.015em; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--hairline); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--grey-2); background-clip:content-box; }

@keyframes tl-pulse { 0%{box-shadow:0 0 0 0 rgba(227,27,34,.45);} 70%{box-shadow:0 0 0 6px rgba(227,27,34,0);} 100%{box-shadow:0 0 0 0 rgba(227,27,34,0);} }
@keyframes tl-fade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

/* ---- brand mark ---- */
.tl-mark { width:30px; height:30px; border-radius:2px; background:var(--epd-fill); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:500; font-size:17px; line-height:1; }
.tl-mark.lg { width:34px; height:34px; font-size:19px; border-radius:2px; }
.tl-wordmark { font-family:var(--sans); font-weight:500; font-size:20px; letter-spacing:-.02em; }

/* ---- buttons ---- */
/* 31.07., Daniels Feinschliff-Runde: „filigraner und luftiger, ohne an der
   Struktur irgendetwas zu verändern" — Knöpfe eine Spur schlanker und mit
   weniger Strichstärke, damit die roten Flächen nicht massiv wirken. */
.btn { height:36px; padding:0 15px; border:1px solid transparent; border-radius:2px; background:var(--paper);
  color:var(--ink); font:inherit; font-weight:500; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; white-space:nowrap; transition:background .12s,border-color .12s; }
.btn-primary { background:var(--epd-fill); color:#fff; border-color:var(--epd-fill); }
.btn-primary:hover { background:var(--epd-fill-hover); border-color:var(--epd-fill-hover); color:#fff; }
.btn-ghost { background:transparent; border-color:var(--hairline); color:var(--ink); font-weight:500; }
.btn-ghost:hover { background:var(--bg); border-color:var(--grey-2); color:var(--ink); }
.btn-block { width:100%; height:38px; }
.btn-sm { height:32px; padding:0 11px; font-size:12.5px; }

/* ---- form controls ---- */
.field-label { display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ink); }
.input, .textarea, .select { width:100%; min-height:40px; padding:9px 12px; border:1px solid var(--hairline);
  border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; outline:none; }
.textarea { resize:vertical; line-height:1.5; }
.input:focus, .textarea:focus, .select:focus { border-color:var(--epd); box-shadow:0 0 0 3px var(--epd-soft); }

/* ---- app shell ---- */
.app-shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.sidebar { background:var(--paper); border-right:1px solid var(--hairline); display:flex; flex-direction:column;
  padding:18px 14px; position:sticky; top:0; height:100vh; }
/* Die Marke ist seit dem 30.07. ein Link auf den Anfang. Farbe und
   Unterstreichung der allgemeinen a-Regel müssen hier ausdrücklich zurück,
   sonst stünde „TextLab" rot da und bekäme beim Überfahren einen Strich. */
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:4px 6px 20px;
  color:var(--ink); text-decoration:none; border-radius:var(--radius); }
.sidebar .brand:hover { color:var(--ink); text-decoration:none; }
.sidebar .brand:hover .tl-mark { background:var(--epd-fill-hover); }
.sidebar .brand .tl-mark { transition:background .12s ease; }
.sidebar .brand:focus-visible { outline:2px solid var(--epd); outline-offset:2px; }
.nav-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); padding:0 8px 8px; }
.nav-item { width:100%; text-align:left; border:none; background:transparent; color:var(--grey); font:inherit; font-weight:500;
  cursor:pointer; padding:9px 10px; border-radius:var(--radius); display:flex; align-items:center; gap:10px; margin-bottom:2px; text-decoration:none; }
.nav-item:hover { background:var(--bg); color:var(--ink); }
/* Aktiv nicht als Fläche, sondern als Marke am Rand — das ist der Duktus von
   epd.de: Linien führen, Flächen tragen nicht. */
.nav-item.active { background:var(--bg); color:var(--epd); font-weight:600; box-shadow:inset 3px 0 0 var(--epd-fill); border-radius:0 var(--radius) var(--radius) 0; }
/* Die Zeichen sind eingebettete SVG (app/Helpers/icon_helper.php), keine
   Schriftzeichen mehr. flex:none, sonst quetscht der Flex-Kasten sie bei
   langen Beschriftungen schmal. */
.nav-item .ic, .tl-theme-btn .ic { width:16px; height:16px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.nav-item .ic svg, .tl-theme-btn .ic svg { display:block; }
.nav-item.active .ic { opacity:1; }

/* Dieselben gezeichneten Zeichen stehen seit dem 30.07. auch auf den
   Bildschirmen (Knöpfe, Filterleiste, Wegkacheln). Knöpfe und Chips sind
   bereits Flex-Kästen mit eigenem gap — dort genügt flex:none, damit ein
   langer Text das Zeichen nicht schmalquetscht. */
.btn > svg, .filter-chip > svg, .wf-ic > svg { flex:none; }
/* Der Weg in der Werkbank-Tabelle steht in einer gewöhnlichen Zelle, nicht in
   einem Flex-Kasten: Ohne das hier säße das Zeichen auf der Schriftlinie und
   hinge sichtbar unter dem Wort. */
.tl-weg { display:inline-flex; align-items:center; gap:7px; }

/* Mond oder Sonne — welches gilt, entscheidet das Thema, nicht ein Skript.
   So steht beim Laden sofort das richtige da. Die Auswahl muss dieselbe
   Gewichtung schlagen wie „.tl-theme-btn .ic" darüber, sonst gewinnt das
   inline-flex von dort und beide Zeichen stehen nebeneinander. */
.tl-theme-btn { justify-content:flex-start; gap:10px; }
.tl-theme-btn .ic-sonne { display:none; }
[data-theme="dark"] .tl-theme-btn .ic-mond { display:none; }
[data-theme="dark"] .tl-theme-btn .ic-sonne { display:inline-flex; }
.sidebar .foot { margin-top:auto; padding-top:16px; border-top:1px dashed var(--hairline); }
.sidebar .tl-theme-btn { width:100%; }
.sidebar .tl-foot-link { font-size:12.5px; }
.sidebar .tl-foot-link-erster { margin-top:6px; }
.user-chip { display:flex; align-items:center; gap:10px; padding:6px 6px 10px; }
.avatar { width:30px; height:30px; border-radius:50%; background:#3E5C6B; color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:600; flex:none; }
.main { min-width:0; display:flex; flex-direction:column; }

/* ---- rote Kopfleiste (Vorbild: epd-Redaktionssystem LENI) ---- */
.topbar { flex:none; height:46px; background:var(--epd-fill); color:#fff; display:flex;
  align-items:center; gap:14px; padding:0 18px; }
.topbar-titel { font-weight:500; font-size:14.5px; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-status { flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.4); border-radius:2px; padding:2px 8px; }
.topbar-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
.topbar-aktion { margin-left:auto; flex:none; color:#fff; font-size:12.5px; font-weight:500;
  border:1px solid rgba(255,255,255,.55); border-radius:2px; padding:5px 11px; white-space:nowrap; }
.topbar-aktion:hover { background:rgba(255,255,255,.14); color:#fff; text-decoration:none; }
.page { padding:26px 32px 40px; max-width:1180px; width:100%; animation:tl-fade .18s ease both; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.page-head h1 { font-size:30px; line-height:1.1; margin:0; }
.page-head .sub { color:var(--grey); margin-top:4px; }

/* ---- cards ---- */
.card { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius); }
.card.pad { padding:20px; }

/* ---- filter bar ---- */
.filterbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; align-items:center; }
.filter-chip { display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:8px 12px; font-size:13px; color:var(--grey); }
.filter-chip b { color:var(--ink); font-weight:600; }
/* Auswahlfelder sitzen in der Chip-Hülle: gleiche Anmutung wie vorher, nur
   jetzt bedienbar. */
.filter-chip select { border:none; background:transparent; color:var(--ink); font:inherit;
  font-weight:600; padding:0 0 0 6px; margin:0; cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none; padding-right:14px;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey-2) 50%),
                   linear-gradient(135deg,var(--grey-2) 50%,transparent 50%);
  background-position:right 5px top 55%, right 1px top 55%;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat; }
.filter-chip:has(select) { padding-right:10px; }
.filter-chip select:focus-visible { outline:2px solid var(--epd); outline-offset:3px; }
.search { flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:var(--paper);
  border:1px solid var(--hairline); border-radius:var(--radius); padding:0 12px; }
.search input { border:none; background:transparent; outline:none; font:inherit; color:var(--ink); height:40px; width:100%; }

/* ---- table ---- */
.tl-table { width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden; }
.tl-table th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--grey-2); padding:12px 16px; border-bottom:1px solid var(--hairline); }
.tl-table td { padding:14px 16px; border-bottom:1px dashed var(--hairline); vertical-align:middle; }
.tl-table tr:last-child td { border-bottom:none; }
.tl-table tbody tr { cursor:pointer; }
.tl-table tbody tr:hover { background:var(--bg); }
.tl-title { font-weight:600; color:var(--ink); }

/* ---- pills ---- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:2px; white-space:nowrap; }
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }
.pill--entwurf { background:var(--bg); color:var(--grey); }
.pill--arbeit { background:var(--arbeit-soft); color:var(--arbeit); }
.pill--review { background:var(--epd-soft); color:var(--epd); }
.pill--final { background:var(--fertig-soft); color:var(--fertig); }
.pill--plain { background:var(--bg); color:var(--grey); }
.pill--plain::before { display:none; }

/* ---- workflow cards ---- */
.wf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.wf-card { display:block; text-align:left; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:22px; cursor:pointer; transition:border-color .12s, background .12s; }
.wf-card:hover { border-color:var(--epd); background:var(--bg); }
.wf-card .wf-ic { width:44px; height:44px; border-radius:2px; background:var(--epd-soft); color:var(--epd);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.wf-card h3 { font-size:18px; margin:0 0 6px; }
.wf-card p { color:var(--grey); margin:0 0 12px; font-size:13.5px; }
.wf-card .wf-len { font-size:12px; color:var(--grey-2); font-family:var(--mono); }

/* ---- KI-Entwurf badge ---- */
.badge-ki { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--epd);
  background:var(--epd-soft); border-radius:2px; padding:4px 10px; }
.badge-ki::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--epd); }

/* ---- studio (3-column workspace) ---- */
.studio { display:grid; grid-template-columns:minmax(280px,1fr) minmax(420px,1.4fr) minmax(300px,1fr); gap:0; height:calc(100vh - 46px); }
.studio-col { border-right:1px solid var(--hairline); display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.studio-col:last-child { border-right:none; }
.studio-col .col-head { padding:14px 18px; border-bottom:1px solid var(--hairline); display:flex; align-items:center;
  justify-content:space-between; gap:10px; }
.studio-col .col-body { padding:18px; overflow:auto; flex:1; }
.col-title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-2); }
.source-block { background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius); padding:16px; }
.source-block .dateline { font-weight:700; color:var(--ink); }
.source-block p { margin:0 0 12px; }
.source-block p:last-child { margin-bottom:0; }

/* Längen-Meter */
.laengen-meter { display:flex; align-items:center; gap:10px; }
.laengen-meter .track { flex:1; height:8px; border-radius:99px; background:var(--bg); overflow:hidden; position:relative; }
.laengen-meter .fill { height:100%; border-radius:99px; background:var(--fertig); }
.laengen-meter.warn .fill { background:var(--arbeit); }
.laengen-meter .val { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--grey); white-space:nowrap; }
.laengen-meter.warn .val { color:var(--arbeit); }

/* refinement thread */
.thread { display:flex; flex-direction:column; gap:12px; }
.msg { max-width:92%; padding:10px 13px; border-radius:var(--radius); font-size:13.5px; line-height:1.5; }
.msg.user { align-self:flex-end; background:var(--epd-soft); color:var(--ink); border-radius:var(--radius);
  border-right:3px solid var(--epd-fill); }
.msg.bot { align-self:flex-start; background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius); }

/* model toggle */
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius); padding:3px; gap:2px; }
/* Längenwahl (Quelle-Seite): <label>-Segmente. Bis 30.07. war nur `.seg button`
   gestaltet — die Labels erbten die Fließtextgröße und brachen um. Der
   Aktiv-Zustand hängt am Radio selbst (:has), nicht an einer Klasse: Die
   server-gerenderte „on"-Klasse wanderte beim Klicken nie mit. */
.seg .seg-opt { flex:1; text-align:center; position:relative; cursor:pointer; white-space:nowrap;
  color:var(--grey); font-size:12.5px; font-weight:600; padding:6px 10px;
  border:1px solid transparent; border-radius:2px; }
.seg .seg-opt input { position:absolute; inset:0; opacity:0; pointer-events:none; }
.seg .seg-opt:hover { color:var(--ink); }
.seg .seg-opt:has(input:checked) { background:var(--paper); color:var(--ink); border-color:var(--hairline); }
.seg .seg-opt:has(input:focus-visible) { outline:2px solid var(--epd); outline-offset:2px; }
.seg button { border:none; background:transparent; color:var(--grey); font:inherit; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:2px; cursor:pointer; }
.seg button.on { background:var(--paper); color:var(--ink); border:1px solid var(--hairline); }

/* Segment-Auswahl aus Radio-Buttons (z. B. „War der Aufhänger richtig?").
   Zwei Dinge sind hier wichtig:
   1. Das unsichtbare <input> muss pointer-events:none haben. Es liegt absolut
      positioniert im Label; ohne diese Zeile fängt es Klicks ab, die dem
      Nachbar-Feld gelten — die Auswahl wirkt dann unzuverlässig oder tot.
   2. Die Auswahl muss SOFORT sichtbar sein. Vorher kam die Hervorhebung nur
      aus dem serverseitig gerenderten Zustand, also erst nach dem Speichern.
      Wer klickte, sah nichts und hielt das Feld für kaputt (Daniel, 26.7.). */
.seg-choice { position:relative; display:inline-flex; cursor:pointer; }
.seg-choice input { position:absolute; inset:0; opacity:0; pointer-events:none; }
.seg-choice span { display:inline-block; padding:5px 12px; border-radius:2px;
  font-size:12.5px; font-weight:600; color:var(--grey); transition:background .12s ease; }
.seg-choice:hover span { color:var(--ink); }
.seg-choice input:checked + span { background:var(--paper); color:var(--ink); border:1px solid var(--hairline); }
.seg-choice input:focus-visible + span { outline:2px solid var(--epd); outline-offset:2px; }

/* draft editor */
/* Aufklapp-Sektionen der Quelle-Spalte (Daniels Pflichtenheft 30.07.,
   Lightroom-Vorbild): zu ist der Normalzustand; offen nur, wenn eine
   Entscheidung wartet. */
.tl-sektion { border:1px solid var(--hairline); border-radius:var(--radius); background:var(--paper); }
.tl-sektion > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  padding:10px 12px; font-weight:600; font-size:13px; }
.tl-sektion > summary::-webkit-details-marker { display:none; }
/* Der Pfeil ist gezeichnet, kein Schriftzeichen (Daniel, 30.07.: „Sonst rafft
   man nicht gleich, dass das zum Ausklappen ist"). Das ▸ davor stand in
   Textgröße 11 px grau da und las sich aus normalem Sitzabstand wie ein
   Aufzählungspunkt — ein Punkt fordert zu nichts auf. Zwei Rahmenkanten
   ergeben eine Spitze, die in jeder Schrift gleich aussieht, scharf bleibt
   und beim Öffnen sichtbar nach unten kippt. */
.tl-sektion > summary::before { content:''; flex:none; width:6px; height:6px; margin:0 1px 0 2px;
  border-right:2px solid var(--grey); border-bottom:2px solid var(--grey);
  transform:rotate(-45deg); transition:transform .18s ease, border-color .12s ease; }
.tl-sektion[open] > summary::before { transform:rotate(45deg); }
.tl-sektion > summary:hover::before { border-color:var(--epd); }
.tl-sektion > summary .anz { margin-left:auto; font-weight:400; font-size:11.5px; color:var(--grey); white-space:nowrap; }
.tl-sektion .sektion-body { padding:2px 12px 12px; }

.draft { font-size:15.5px; line-height:1.75; color:var(--ink); }
.draft h2 { font-size:21px; margin:0 0 12px; }
.draft .teaser { font-style:italic; color:var(--grey); font-weight:500; margin-bottom:14px; }
.draft p { margin:0 0 14px; }
.zz { font-family:var(--sans); font-weight:500; font-size:15px; color:var(--ink); margin:18px 0 10px; }

/* Quellentreue-Synopse: das Modell liefert sie als Markdown-Tabelle. Sie ist
   das Prüfwerkzeug der Redaktion und muss lesbar sein, nicht nur vorhanden. */
.draft-table-wrap { overflow-x:auto; margin:0 0 16px; }
.draft-table { width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.5; }
.draft-table th, .draft-table td { padding:9px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.draft-table th { font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--grey); font-weight:600; white-space:nowrap; border-bottom:1.5px solid var(--line); }
.draft-table tbody tr:last-child td { border-bottom:none; }
.draft-table tbody tr:nth-child(even) { background:var(--bg); }
/* Erste Spalte = Aussage im Text, zweite = Beleg, dritte = Fundstelle. Die
   Fundstelle ist kurz und darf nicht umbrechen, der Rest teilt sich den Platz. */
.draft-table td.eng { white-space:nowrap; color:var(--grey); font-size:12.5px; }
@media (max-width:640px) { .draft-table td.eng { white-space:normal; } }

/* auth */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--epd-soft), transparent 60%), var(--bg); }
.auth-card { width:100%; max-width:392px; }
.auth-brand { display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:28px; }
.auth-brand .tl-wordmark { font-size:25px; }
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--grey-2); font-size:12px; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--hairline); }

/* alerts */
.alert { border-radius:var(--radius); padding:11px 14px; font-size:13.5px; margin-bottom:16px; border-left:3px solid currentColor; }
.alert-error { background:var(--danger-soft); color:var(--danger); }
.alert-ok { background:var(--fertig-soft); color:var(--fertig); }

/* Aktionsleiste unter dem Entwurf — klebt am Fuß der scrollenden Spalte,
   damit „Finalisieren" nicht am Ende eines langen Textes verschwindet. */
.draft-actions { position:sticky; bottom:-18px; margin:18px -18px -18px; padding:14px 18px;
  background:var(--paper); border-top:1px solid var(--hairline);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Nachschlagezeichen — klein, rot, rund; steht neben Zahlen, die man
   sonst glauben müsste. */
.tl-info { width:15px; height:15px; flex:none; border:none; border-radius:50%;
  background:var(--epd-fill); color:#fff; font:600 10px/1 var(--sans);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.tl-info:hover { background:var(--epd-fill-hover); }

/* Regelzeile im Nachschlagefenster: zugeklappt ein Begriff, aufgeklappt der
   Wortlaut. Kein Skript nötig — <details> kann das. */
.tl-regel { border-bottom:1px solid var(--hairline); }
.tl-regel > summary { display:flex; align-items:baseline; gap:9px; cursor:pointer; list-style:none;
  padding:6px 2px; font-size:13px; font-weight:500; }
.tl-regel > summary::-webkit-details-marker { display:none; }
.tl-regel > summary:hover { color:var(--epd); }
.tl-regel > summary .nr { flex:none; min-width:19px; height:16px; padding:0 4px; background:var(--epd-fill);
  color:#fff; font:600 10px/16px var(--mono); text-align:center; border-radius:2px; }
.tl-regel[open] > summary { color:var(--epd); }
.tl-regel .wortlaut { white-space:pre-line; font-size:12.5px; line-height:1.6; font-weight:400;
  color:var(--grey); padding:2px 2px 10px 30px; }

/* Regelnummer im Editor — dieselbe Marke wie in der Übersicht, nur ohne
   Klappmechanik drumherum. */
.nr-fest { flex:none; min-width:22px; height:17px; padding:0 5px; background:var(--epd-fill);
  color:#fff; font:600 10px/17px var(--mono); text-align:center; border-radius:2px; }

/* Speicherleiste im Regel-Editor — klebt unten, damit sie unter 22 Regeln
   nicht verschwindet, und färbt sich, sobald etwas ungespeichert ist. */
.editor-leiste { position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
  flex-wrap:wrap; padding:12px 0; margin-top:4px; background:var(--bg);
  border-top:1px solid var(--hairline); }
.editor-leiste.offen { border-top-color:var(--arbeit); }
.editor-leiste.offen .muted { color:var(--arbeit); }

/* misc */
.stack > * + * { margin-top:14px; }
/* Kleine Kopier-Zeichen (André, 03.08.): unaufdringlich mit Tooltip da,
   wenn man sie braucht — und stören sonst niemanden. */
.tl-kopier { background:none; border:none; padding:3px; cursor:pointer; color:var(--grey);
  opacity:.55; border-radius:5px; line-height:0; vertical-align:middle; }
.tl-kopier:hover { opacity:1; color:var(--ink); background:var(--bg); }

.muted { color:var(--grey); }
.mono { font-family:var(--mono); }
.chip-cost { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--grey);
  background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius); padding:4px 10px; }

@media (max-width:960px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap;
             gap:4px 10px; padding:10px 14px; }
  .sidebar .brand { padding:0 8px 0 0; }
  /* „Navigation" als Überschrift ergibt in einer Zeile keinen Sinn. */
  .sidebar .nav-label { display:none; }
  .sidebar .nav-item { width:auto; margin:0; padding:7px 10px; }
  /* Der Fuß bekommt seine EIGENE volle Zeile unter der Navigation statt
     rechts hineingequetscht zu werden — vorher wirkte er improvisiert und
     der Dunkelmodus-Knopf (damals inline width:100%) schob die ganze Seite
     seitlich aus dem Fenster (Andrés Befund, 02.08. nachts). */
  .sidebar .foot { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
                   flex-basis:100%; margin:6px 0 0; padding:8px 0 0;
                   border-top:1px dashed var(--hairline); }
  .sidebar .user-chip { padding:0; margin-right:auto; }
  .sidebar .foot .nav-item { font-size:12px; margin:0; }
  .sidebar .tl-theme-btn { width:auto; }
  .sidebar .tl-foot-link-erster { margin-top:0; }
  /* Breite Tabellen scrollen in ihrem eigenen Kasten. Vorher schob die Werkbank
     die ganze Seite seitwärts: 853 Pixel Inhalt in einem 760 breiten Fenster,
     die Spalte „Geändert" und der Verwerfen-Knopf lagen außerhalb. */
  .tl-table { display:block; overflow-x:auto; white-space:nowrap; }
  .tl-table td, .tl-table th { white-space:normal; }
  .filterbar .search { min-width:160px; }
  .studio { grid-template-columns:1fr; height:auto; }
  .studio-col { border-right:none; border-bottom:1px solid var(--hairline); }
}

/* Prüfleiste „Beitrag von TextLab": eine Zeile je Prüfung, Haarlinie dazwischen.
   Beschriftung bleibt einzeilig, der Wert bricht rechtsbündig unter sich selbst
   um — vorher wurden die Zeilen ungleich hoch und das Auge fand keine Kante. */
.tl-pruef-zeile { display:flex; gap:8px; align-items:baseline; font-size:12px;
  line-height:1.45; padding:4px 0; border-bottom:1px solid var(--hairline); }
.tl-pruef-zeile:last-of-type { border-bottom:none; padding-bottom:0; }
.tl-pruef-zeile .mark { flex:none; width:11px; }
.tl-pruef-zeile .mark.ok { color:var(--epd); }
.tl-pruef-zeile .mark.mangel { color:var(--ink); font-weight:700; }
.tl-pruef-zeile .mark.auskunft { color:var(--grey); }
.tl-pruef-zeile .was { flex:none; white-space:nowrap; }
.tl-pruef-zeile .wert { flex:1; min-width:0; font-weight:600; text-align:right;
  overflow-wrap:anywhere; }