/* TextGen – Redaktions-Arbeitsplatz
   Three materials: grey desk (Pult), yellow wire paper (Agentur), white draft paper (Entwurf).
   The memorable element is the ticker timeline where the draft already sits on top, live. */

:root {
  --pult: #e6e8eb;
  --pult-tief: #d6dade;
  --linie: #c3c9d0;
  --papier: #ffffff;
  --draht: #fbf3c8;
  --draht-rand: #dcc767;
  --draht-tinte: #3a3314;
  --tinte: #18222f;
  --tinte-2: #566273;
  --signal: #1f5bcc;
  --signal-hell: #e8effc;
  --live: #d11f2a;
  --ok: #1e7a46;
  --warn: #a35f00;
  --fehler: #b3261e;

  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, serif;
  /* srf.ch preview (UC2-AK18): house font from /api/schrift.css, colours as on srf.ch (light) */
  --srg: "SRG SSR Type", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --srf-ink: #22211d;
  --srf-ink-2: #4e4d47;
  --srf-meta: #6b6960;
  --srf-red: #c91024;
  --srf-line: #ebebe5;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-klein: 3px; --r: 6px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--pult);
  color: var(--tinte);
  font: 15px/1.45 var(--ui);
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h2, h3 { margin: 0; }

/* ---------- top bar ---------- */
.bar {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s2) var(--s5);
  background: var(--tinte); color: #fff;
  min-width: 0;
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); flex: none; }
.logo { display: block; height: 26px; width: auto; background: #fff; padding: 4px 6px; border-radius: var(--r-klein); }
.wordmark { font: 700 17px/1 var(--text); letter-spacing: .01em; }
.ticker-pick { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; }
.ticker-pick select {
  flex: 1; max-width: 460px; min-width: 120px;
  background: #26334a; color: #fff; border: 1px solid #3a4a66; border-radius: var(--r-klein);
  padding: 6px var(--s2);
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(209,31,42,.25); }
.bar-meta { display: flex; gap: var(--s4); font-size: 13px; color: #b9c3d2; white-space: nowrap; }
.llm-pick { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: #b9c3d2; margin-left: auto; min-width: 0; }
.llm-pick select {
  max-width: 320px; min-width: 0; background: #26334a; color: #fff; border: 1px solid #3a4a66;
  border-radius: var(--r-klein); padding: 5px var(--s2); font-size: 13.5px;
}
.llm-pick select:disabled { opacity: .6; }
.llm-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #8a96a8; }
.dot.ok { background: #3fbf74; }
.dot.warn { background: #f0a43a; }
.dot.bad { background: #ff6b60; }
.bar-alert { color: #ffb4ae; }

/* ---------- desk layout ---------- */
.desk {
  --w-wire: 320px; --w-side: 360px;
  display: grid;
  grid-template-columns: var(--w-wire) 7px minmax(420px, 1fr) 7px var(--w-side);
  min-height: 0;
}
.splitter {
  cursor: col-resize; background: var(--linie); position: relative; touch-action: none;
  border-left: 3px solid var(--pult); border-right: 3px solid var(--pult-tief);
}
.splitter:last-of-type { border-left-color: var(--pult-tief); border-right-color: var(--pult); }
.splitter:hover, .splitter.drag, .splitter:focus-visible { background: var(--signal); outline: none; }
.col { background: var(--pult); overflow: auto; padding: var(--s4); min-height: 0; }
.col-draft { background: var(--pult-tief); }
.col-title { font-size: 13px; font-weight: 600; color: var(--tinte-2); margin-bottom: var(--s3); }

@media (max-width: 1100px) {
  html, body { height: auto; }
  body { display: block; }
  .bar { flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2) var(--s4); }
  .ticker-pick { flex-basis: 100%; order: 3; }
  body.mode-artikel .ticker-pick { display: none; }
  .mode-switch { order: 2; }
  .bar-meta { white-space: normal; flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .splitter { display: none; }
  .llm-pick { margin-left: 0; order: 4; flex-basis: 100%; }
  .llm-pick select { flex: 1; max-width: none; }
  .col { overflow: visible; min-width: 0; }
  .paper { padding: var(--s4); }
  .el-image { grid-template-columns: minmax(0, 1fr); }
  .thumb-large { width: 100%; max-width: 320px; }
}

/* ---------- wire column ---------- */
.search input {
  width: 100%; padding: 7px var(--s3); border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--papier);
}
.wire-list { list-style: none; margin: var(--s3) 0; padding: 0; max-height: 38vh; overflow: auto; }
.wire-list button {
  display: grid; grid-template-columns: 3.4em 1fr; gap: 2px var(--s2);
  width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent;
  padding: var(--s2); cursor: pointer; border-radius: 0;
}
.wire-list button:hover { background: rgba(255,255,255,.55); }
.wire-list button[aria-current="true"] { background: var(--draht); border-left-color: var(--draht-rand); }
.wire-time { font-size: 13px; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.wire-agency { font-size: 12px; color: var(--tinte-2); grid-column: 1; }
.wire-head { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; line-height: 1.3; }

.wire-sheet {
  background: var(--draht); color: var(--draht-tinte);
  border-top: 4px solid var(--draht-rand);
  padding: var(--s4); border-radius: 0 0 var(--r-klein) var(--r-klein);
  box-shadow: 0 1px 0 var(--draht-rand);
}
.wire-sheet .meta { font-size: 13px; margin-bottom: var(--s2); }
.wire-sheet h3 { font: 600 17px/1.3 var(--ui); margin-bottom: var(--s3); }
.wire-sheet p { margin: 0 0 var(--s3); font-size: 14.5px; max-width: 62ch; }
.wire-sheet .lead { font-weight: 600; }
.wire-actions {
  position: sticky; bottom: calc(-1 * var(--s4)); margin: var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4));
  padding: var(--s3) var(--s4); background: var(--draht); border-top: 1px solid var(--draht-rand);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--linie); background: var(--papier); padding: 7px var(--s4);
  border-radius: var(--r-klein); cursor: pointer; font-weight: 500;
}
.btn:hover { border-color: var(--tinte-2); }
.btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-primary:hover { background: #1849a6; border-color: #1849a6; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-link { background: none; border: 0; padding: 0; color: var(--signal); cursor: pointer; text-decoration: underline; }
.check-inline { display: inline-flex; align-items: center; gap: var(--s1); font-size: 14px; }

/* ---------- draft column ---------- */
.empty { max-width: 46ch; color: var(--tinte-2); margin-top: var(--s6); }
.empty strong { color: var(--tinte); font-weight: 600; }

.steps { list-style: none; padding: 0; margin: var(--s5) 0; max-width: 46ch; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 1.6em 1fr; gap: var(--s2); padding: var(--s1) 0; color: var(--tinte-2); }
.steps li::before { content: counter(s); font-variant-numeric: tabular-nums; text-align: right; }
.steps li.done { color: var(--tinte); }
.steps li.done::before { content: "✓"; color: var(--ok); }
.steps li.now { color: var(--tinte); font-weight: 600; }
.steps li.now::before { content: "…"; color: var(--signal); }

.paper {
  background: var(--papier); border-radius: var(--r-klein);
  box-shadow: 0 1px 2px rgba(24,34,47,.12), 0 0 0 1px rgba(24,34,47,.06);
  padding: var(--s5) var(--s6);
}
.provenance { font-size: 13px; color: var(--tinte-2); margin-bottom: var(--s4); }
.new-facts { border-left: 3px solid var(--signal); background: var(--signal-hell); padding: var(--s2) var(--s3); margin-bottom: var(--s5); }
.new-facts h3 { font-size: 13px; font-weight: 600; margin-bottom: var(--s1); }
.new-facts ul { margin: 0; padding-left: 1.1em; font-size: 14px; }

.field { display: block; margin-bottom: var(--s4); }
.field > span { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinte-2); margin-bottom: var(--s1); }
.field input, .field textarea {
  width: 100%; border: 1px solid transparent; border-bottom-color: var(--linie);
  background: transparent; padding: var(--s1) 0; border-radius: 0;
}
.field input:hover, .field textarea:hover { border-bottom-color: var(--tinte-2); }
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--signal); }
.field textarea { resize: none; overflow: hidden; display: block; }
.f-title { font: 700 24px/1.25 var(--text); }
.f-text { font: 17px/1.6 var(--text); min-height: 9em; max-width: 72ch; }
.count { font-variant-numeric: tabular-nums; }
.count.over { color: var(--fehler); font-weight: 600; }

.block { margin-top: var(--s5); }
.block h3 { font-size: 14px; font-weight: 600; margin-bottom: var(--s2); }
.elements { list-style: none; margin: 0; padding: 0; }
.element { display: grid; grid-template-columns: 3.5em minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--pult-tief); }
.element:first-child { border-top: 0; }
.kind { font-size: 12px; color: var(--tinte-2); padding-top: 3px; }
.why { font-size: 13px; color: var(--tinte-2); margin-top: 2px; }
.why.reason { font-style: italic; }
.linktext {
  width: 100%; border: 0; border-bottom: 1px solid var(--linie); padding: 2px 0; background: transparent;
  font: 600 15px/1.4 var(--ui); color: var(--signal); resize: none; overflow: hidden; display: block;
}
.linktext:focus { outline: none; border-bottom: 2px solid var(--signal); }
.el-image { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.rights { font-size: 12.5px; color: var(--warn); margin-top: var(--s1); }
a { color: var(--signal); }

.thumb { display: block; aspect-ratio: 16 / 9; background: var(--pult); border-radius: var(--r-klein); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-thumb { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--tinte-2); }
.thumb-large { width: 168px; }
.thumb-timeline { width: 100%; max-width: 240px; margin: var(--s2) 0 var(--s1); }
.tl-link { color: var(--signal); font: 600 13.5px/1.4 var(--ui) !important; margin-top: var(--s1) !important; }

.candidates { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--pult-tief); }
.cand-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.cand-head h3 { margin: 0; }
.cand-search { display: flex; gap: var(--s2); flex: 1; max-width: 420px; min-width: 220px; }
.cand-search input { flex: 1; min-width: 0; padding: 6px var(--s2); border: 1px solid var(--linie); border-radius: var(--r-klein); }
.candidates h4 { font-size: 13px; font-weight: 600; color: var(--tinte-2); margin: var(--s4) 0 var(--s2); }
.cand-articles, .cand-images { list-style: none; padding: 0; margin: 0; }
.cand-article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s2) 0; border-top: 1px solid var(--pult); }
.cand-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.cand-title a { text-decoration: none; }
.cand-title a:hover { text-decoration: underline; }
.candidates small { display: block; color: var(--tinte-2); font-size: 12.5px; }
.cand-lead { margin: var(--s1) 0 0; font-size: 13.5px; color: #3c4858; max-width: 70ch; }
.cand-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s4); }
.cand-image { display: flex; flex-direction: column; gap: var(--s1); font-size: 13px; }
.cand-caption { line-height: 1.35; }
.cand-image .btn { align-self: flex-start; margin-top: auto; }
.btn-small { padding: 4px var(--s3); font-size: 13px; white-space: nowrap; }

.notes { list-style: none; padding: 0; margin: 0; }
.notes li { border-left: 3px solid var(--warn); padding: var(--s1) var(--s3); margin-bottom: var(--s2); font-size: 14px; background: #fff6e8; }
.bullets { margin: 0; padding-left: 1.1em; font: 15px/1.5 var(--text); }

.actions {
  position: sticky; bottom: calc(-1 * var(--s4)); margin-top: var(--s5);
  display: flex; gap: var(--s3); align-items: center; justify-content: flex-end;
  padding: var(--s3) 0; background: var(--pult-tief);
}
.actions .state { margin-right: auto; font-size: 13px; color: var(--tinte-2); }
.published { border-left: 3px solid var(--ok); background: #eaf5ee; padding: var(--s2) var(--s3); margin-bottom: var(--s4); font-size: 14px; }

/* ---------- checks ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.checks li { display: grid; grid-template-columns: 1.3em 1fr; gap: var(--s1); font-size: 13.5px; padding: 3px 0; }
.checks .mark { font-weight: 700; text-align: center; }
.checks .ok .mark { color: var(--ok); }
.checks .warnung .mark { color: var(--warn); }
.checks .fehler .mark { color: var(--fehler); }
.checks .ok { color: var(--tinte-2); }
.checks .crit { color: var(--tinte-2); font-size: 12px; }
.checks-summary { font-size: 14px; font-weight: 600; margin-bottom: var(--s2); }
.checks-summary.bad { color: var(--fehler); }
.checks-note { font-size: 12.5px; color: var(--tinte-2); margin: 0 0 var(--s5); }

/* ---------- ticker timeline ---------- */
.tk-title { font: 700 18px/1.3 var(--text); margin-bottom: var(--s2); }
.tk-bullets { margin: 0 0 var(--s4); padding-left: 1.1em; font: 14.5px/1.45 var(--text); }
.tk-author { font-size: 12.5px; color: var(--tinte-2); margin-bottom: var(--s4); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s4); border-left: 2px solid var(--linie); }
.timeline li { position: relative; padding: 0 0 var(--s4) var(--s3); }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s4) - 6px); top: 5px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--pult); border: 2px solid var(--tinte-2);
}
.timeline time { font-size: 12.5px; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.timeline h4 { margin: 2px 0; font: 600 15px/1.3 var(--text); }
.timeline p { margin: 0; font: 14px/1.45 var(--text); color: #2b3746; }
.timeline .src { font-size: 12px; color: var(--tinte-2); margin-top: 2px; }
.timeline li.draft-entry { background: var(--papier); border: 1px dashed var(--signal); border-radius: var(--r-klein); padding: var(--s2) var(--s3); margin: 0 0 var(--s4) var(--s1); }
.timeline li.draft-entry::before { background: var(--signal); border-color: var(--signal); top: 12px; left: calc(-1 * var(--s4) - 10px); }
.timeline li.draft-entry time { color: var(--signal); font-weight: 600; }
.timeline li.fresh::before { background: var(--ok); border-color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .timeline li.fresh { animation: settle .6s ease-out; }
  @keyframes settle { from { background: #eaf5ee; } to { background: transparent; } }
}

.side-block { margin-top: var(--s5); font-size: 14px; }
.side-block h3 { font-size: 13px; font-weight: 600; color: var(--tinte-2); margin-bottom: var(--s2); }
.side-block ul { margin: 0; padding-left: 1.1em; }

/* ---------- dialog & toast ---------- */
dialog { border: 0; border-radius: var(--r); padding: 0; width: min(640px, 94vw); box-shadow: 0 12px 40px rgba(24,34,47,.35); }
dialog::backdrop { background: rgba(24,34,47,.45); }
.dlg { padding: var(--s5) var(--s6); }
.dlg h2 { font: 700 20px/1.3 var(--text); margin-bottom: var(--s3); }
.dlg .preview { background: var(--pult); padding: var(--s3) var(--s4); border-radius: var(--r-klein); margin-bottom: var(--s4); }
.dlg .preview h4 { margin: 0 0 var(--s1); font: 600 16px/1.3 var(--text); }
.dlg .preview p { margin: 0; font: 15px/1.5 var(--text); }
.dlg .checklist { list-style: none; padding: 0; margin: 0 0 var(--s4); font-size: 14px; }
.dlg .checklist li { margin-bottom: var(--s2); }
.dlg .warnings { color: var(--warn); font-size: 14px; }
.dlg .confirm { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 600; margin: var(--s4) 0; }
.dlg .buttons { display: flex; justify-content: flex-end; gap: var(--s3); }
/* preview of linked articles and images (UC1-AK18) */
.thumb-button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; text-align: left; }
.thumb-button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cand-image .thumb-button, .el-image .thumb-button { width: auto; }
.preview-dlg { width: min(760px, 94vw); }
dialog#preview { width: min(780px, 94vw); }
.preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.preview-kind { font-size: 13px; color: var(--tinte-2); }
.btn-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--tinte-2); padding: 0 var(--s1); }
.btn-close:hover { color: var(--tinte); }
.preview-dlg h2 { font: 700 22px/1.3 var(--text); margin-bottom: var(--s1); }
.preview-image { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: var(--pult); border-radius: var(--r-klein); margin: var(--s3) 0; }
.preview-caption { font: 16px/1.5 var(--text); margin: 0 0 var(--s1); }
.preview-lead { font: 17px/1.55 var(--text); margin: var(--s3) 0; }
.preview-dlg .buttons a.btn { text-decoration: none; display: inline-block; color: inherit; }
.tl-quote { margin: var(--s2) 0 0; padding-left: var(--s3); border-left: 3px solid var(--linie); font: italic 14px/1.45 var(--text); }
/* ---------- mode switch and UC2 article editor ---------- */
.mode-switch { display: inline-flex; border: 1px solid #3a4a66; border-radius: var(--r-klein); overflow: hidden; flex: none; }
.mode-switch button {
  background: transparent; color: #b9c3d2; border: 0; padding: 5px var(--s3); font-size: 13.5px; cursor: pointer;
}
.mode-switch button + button { border-left: 1px solid #3a4a66; }
.mode-switch button[aria-pressed="true"] { background: #fff; color: var(--tinte); font-weight: 600; }
.mode-switch button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
body.mode-artikel .ticker-pick { visibility: hidden; }
.bar-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-meta span { overflow: hidden; text-overflow: ellipsis; }
.type-pick { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; flex: 1; min-width: 160px; }
.type-select { padding: 6px var(--s2); border: 1px solid var(--draht-rand); border-radius: var(--r-klein); background: #fffdf0; }

.article-paper .field > span .count { margin-left: auto; }
.f-subtitle { font: 700 17px/1.35 var(--text); }
.f-lead-in { font: 700 16px/1.4 var(--text); }
.f-lead { font: 600 16px/1.5 var(--text); }
.variants { margin: calc(-1 * var(--s2)) 0 var(--s4); }
.variants ul { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.variants li { display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; font: 15px/1.4 var(--text);
  padding: 3px 0; border-top: 1px dotted var(--linie); }
.bullet-list { list-style: none; margin: 0; padding: 0; }
.bullet-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.bullet-edit .field { margin-bottom: var(--s2); }
.text-head { display: flex; justify-content: space-between; align-items: baseline; }
.text-head .count { font-size: 13px; font-weight: 400; color: var(--tinte-2); }
.text-head .count.over { color: var(--fehler); font-weight: 600; }
.sections { list-style: none; margin: 0 0 var(--s2); padding: 0; counter-reset: sec; }
.section-card { border: 1px solid var(--pult-tief); border-left: 3px solid var(--linie); border-radius: var(--r-klein);
  padding: var(--s2) var(--s3) var(--s3); margin-bottom: var(--s3); background: #fcfcfd; }
.section-card:focus-within { border-left-color: var(--signal); }
.section-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tinte-2); margin-bottom: var(--s1); }
.section-tools { display: inline-flex; gap: var(--s3); }
.section-card .field { margin-bottom: var(--s2); }
.section-card .f-text { min-height: 4.5em; font-size: 16px; }
.src-line { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; font-size: 12.5px; }
.src-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--signal-hell); border-radius: 999px;
  padding: 1px 4px 1px var(--s2); max-width: 100%; }
.src-chip.agency { background: var(--draht); }
.src-chip a { color: var(--tinte); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.chip-x { border: 0; background: none; cursor: pointer; color: var(--tinte-2); font-size: 14px; line-height: 1; padding: 0 3px; }
.src-add { font-size: 12.5px; padding: 1px 4px; border: 1px dashed var(--linie); border-radius: 999px; background: transparent; width: auto; max-width: 26ch; }

.toast {
  position: fixed; top: 60px; right: var(--s5);
  background: var(--tinte); color: #fff; padding: var(--s3) var(--s5); border-radius: var(--r-klein);
  box-shadow: 0 6px 20px rgba(24,34,47,.3); font-size: 14px; max-width: 90vw;
}
.toast.error { background: var(--fehler); }
.error-box { border-left: 3px solid var(--fehler); background: #fbeceb; padding: var(--s3); margin-top: var(--s4); max-width: 60ch; }

/* ---------- failed checks at their field (UC1-AK20, UC2-AK13) ---------- */
.flag-msg { display: flex; gap: 6px; align-items: baseline; font: 13px/1.4 var(--ui); margin: var(--s1) 0 var(--s2); }
.flag-msg.fehler { color: var(--fehler); }
.flag-msg.warnung { color: var(--warn); }
.flag-icon { font-weight: 700; }
.field.flag-fehler > textarea, .field.flag-fehler > input, textarea.flag-fehler { border-bottom: 2px solid var(--fehler); background: #fdf3f2; }
.field.flag-warnung > textarea, .field.flag-warnung > input, textarea.flag-warnung { border-bottom: 2px solid #e0a040; background: #fff9ef; }
.field.flag-fehler > span:first-child { color: var(--fehler); font-weight: 600; }
.field.flag-warnung > span:first-child { color: var(--warn); font-weight: 600; }
.flow-card.flag-fehler, .element.flag-fehler { border-left-color: var(--fehler); }
.flow-card.flag-warnung, .element.flag-warnung { border-left-color: #e0a040; }
.element.flag-fehler, .element.flag-warnung { border-left: 3px solid; padding-left: var(--s2); }
.src-line.flag-fehler { background: #fdf3f2; border-radius: var(--r-klein); padding: 2px var(--s1); }
.src-line.flag-warnung { background: #fff9ef; border-radius: var(--r-klein); padding: 2px var(--s1); }
.src-line .flag-msg { flex-basis: 100%; margin: 2px 0 0; }
.block.flag-fehler > h3, .block.flag-warnung > h3 { color: inherit; }
.block.flag-fehler > h3:first-child { color: var(--fehler); }
.variants li.flag-warnung { color: var(--warn); }
.show-field { font-size: 12.5px; }
@media (prefers-reduced-motion: no-preference) {
  .flag-pulse { animation: flag-pulse 1.2s ease-out; }
  @keyframes flag-pulse { 0%, 30% { box-shadow: 0 0 0 4px rgba(31, 91, 204, .35); } 100% { box-shadow: 0 0 0 0 rgba(31, 91, 204, 0); } }
}

/* ---------- text flow: sections, images, quotes (UC2-AK15) ---------- */
.flow-hint { margin: 0 0 var(--s3); max-width: 70ch; }
.hint-term { text-decoration: underline dotted; cursor: help; }
.flow-card { border: 1px solid var(--pult-tief); border-left: 3px solid var(--linie); border-radius: var(--r-klein);
  padding: var(--s2) var(--s3) var(--s3); margin-bottom: var(--s3); background: #fcfcfd; }
.flow-element { background: #f6f7f9; border-left-color: #9aa6b5; }
.flow-element .el-image { grid-template-columns: 200px minmax(0, 1fr); }
.flow-element .thumb-large { width: 200px; }
.flow-caption { font: 15px/1.45 var(--text); }
.flow-card.dragging { opacity: .45; }
.flow-card.drop-before { box-shadow: 0 -3px 0 var(--signal); }
.flow-card.drop-after { box-shadow: 0 3px 0 var(--signal); }
.drag-handle { cursor: grab; color: var(--tinte-2); margin-right: var(--s2); user-select: none; font-size: 14px; }
.drag-handle:active { cursor: grabbing; }
.btn-icon { border: 1px solid var(--linie); background: var(--papier); border-radius: var(--r-klein); width: 24px; height: 22px;
  line-height: 1; cursor: pointer; color: var(--tinte-2); padding: 0; }
.btn-icon:hover:not([disabled]) { border-color: var(--tinte-2); color: var(--tinte); }
.btn-icon[disabled] { opacity: .35; cursor: default; }
.section-tools { align-items: center; }
.linktext-field { display: block; margin-top: var(--s2); }

/* ---------- teaser of a linked article, as on srf.ch (UC1-AK21, UC2-AK17) ---------- */
.teaser { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); align-items: start;
  color: var(--srf-ink); text-decoration: none; font-family: var(--srg); }
.teaser:hover .teaser-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.teaser-img { display: block; width: 92px; height: 92px; background: var(--srf-line); overflow: hidden; }
.teaser-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teaser-img .no-thumb { font-size: 11px; text-align: center; padding: 0 4px; }
.teaser-body { display: flex; flex-direction: column; min-width: 0; }
.teaser-kicker { font-size: 12px; line-height: 1.35; font-weight: 400; color: var(--srf-red); margin-bottom: 4px; }
.teaser-title { font-size: 16px; line-height: 1.25; font-weight: 500; margin-bottom: 6px; }
.teaser-meta { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: 12px; line-height: 1.35; color: var(--srf-meta); }
.teaser-media::before { display: inline-block; margin-right: 4px; font-size: 9px; vertical-align: 1px; }
.teaser-media.video::before { content: "▶"; }
.teaser-media.audio::before { content: "♪"; font-size: 11px; vertical-align: 0; }
.cand-article .teaser { margin-bottom: var(--s1); }
.teaser-timeline { margin-top: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--srf-line); border-bottom: 1px solid var(--srf-line); }
.preview-kicker { font-family: var(--srg); color: var(--srf-red); font-size: 16px; margin-bottom: 2px; }

/* ---------- article preview as on srf.ch (UC2-AK18) ---------- */
.srg-type { font-family: var(--srg); }
.tk-title, .tk-bullets { font-family: var(--srg); }
.tk-title { font-weight: 500; }
.timeline.srg-type h4 { font: 500 16px/1.3 var(--srg); color: var(--srf-ink); }
.timeline.srg-type p { font: 300 15px/1.5 var(--srg); color: var(--srf-ink); }
.art-preview { background: var(--papier); padding: var(--s5) var(--s4); box-shadow: 0 0 0 1px var(--pult-tief); color: var(--srf-ink); }
.art-head { display: flex; flex-direction: column; margin: 0 0 var(--s3); }
.art-kicker { font-size: 15px; line-height: 1.3; font-weight: 400; color: var(--srf-red); margin-bottom: 2px; }
.art-title { font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -.005em; }
.art-lead { font-size: 17px; line-height: 1.45; font-weight: 300; color: var(--srf-ink-2); margin: 0 0 var(--s4); }
.art-bullets { margin: 0 0 var(--s4); padding-left: 1.1em; font-size: 16px; line-height: 1.5; font-weight: 300; }
.art-bullets strong, .art-body strong { font-weight: 600; }
.art-body h4 { font-size: 17px; line-height: 1.3; font-weight: 500; margin: var(--s4) 0 var(--s1); }
.art-body p { font-size: 16px; line-height: 1.55; font-weight: 300; margin: 0 0 var(--s3); }
.art-figure { margin: var(--s3) 0 var(--s4); }
.art-figure .thumb-button { width: 100%; }
.art-image { width: 100%; border-radius: 0; }
.art-figure figcaption { font-size: 13px; line-height: 1.4; color: var(--srf-ink-2); font-weight: 300; padding-top: var(--s1); }
.art-credit { color: var(--srf-meta); }
.art-quote { margin: var(--s4) 0; padding-left: var(--s3); border-left: 3px solid var(--srf-red); font-size: 18px; line-height: 1.4; font-weight: 400; }
.art-quote cite { display: block; font-style: normal; font-size: 13px; color: var(--srf-meta); margin-top: var(--s1); }
.art-more { margin-top: var(--s5); }
.art-more h4 { font-size: 16px; line-height: 1.25; font-weight: 500; margin: 0 0 var(--s2); }
.art-more .teaser-timeline { margin: 0; border-top: 0; padding: var(--s3) 0; }
.art-more .teaser-timeline:first-of-type { border-top: 1px solid var(--srf-line); }
.art-preview .src { font-size: 12px; color: var(--srf-meta); margin-top: var(--s3); }
.art-teaser { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--linie); font-size: 14px; line-height: 1.45; font-weight: 300; }

/* ---------- Sendungsbezug (UC2-AK19) ---------- */
.broadcast { border: 1px solid var(--pult-tief); border-left: 3px solid var(--linie); border-radius: var(--r-klein);
  padding: var(--s2) var(--s3) var(--s3); margin: var(--s5) 0 var(--s4); background: #fcfcfd; }
.broadcast legend { font-size: 14px; font-weight: 600; padding: 0 var(--s1); }
.broadcast > .why:first-of-type { margin: 0 0 var(--s2); max-width: 70ch; }
.broadcast-choice { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s2); }
.broadcast-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s4); }
.broadcast-fields .field { margin-bottom: var(--s2); }
.broadcast-wip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.broadcast.flag-fehler { border-left-color: var(--fehler); }
.broadcast.flag-warnung { border-left-color: #e0a040; }
@media (max-width: 700px) { .broadcast-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- own message (UC2-AK20) ---------- */
.btn-own { width: 100%; margin-top: var(--s2); background: transparent; border-style: dashed; font-size: 13.5px; }
.btn-own:hover { background: rgba(255,255,255,.55); }
.wire-list li.own button { border-left-color: var(--signal); }
.own-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--signal); background: var(--signal-hell);
  border-radius: 999px; padding: 0 6px; }
dialog#own { width: min(720px, 94vw); }
.own-dlg .field textarea, .own-dlg .field input { border: 1px solid var(--linie); border-radius: var(--r-klein);
  padding: var(--s2); background: var(--papier); }
.own-text { width: 100%; resize: vertical; font: 15px/1.5 var(--ui); }
.own-text:disabled { background: var(--pult) !important; color: var(--tinte-2); }
.own-drop { border: 2px dashed var(--linie); border-radius: var(--r); padding: var(--s3); margin-bottom: var(--s4); font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.own-drop.over { border-color: var(--signal); background: var(--signal-hell); }
.own-drop.has-file { border-style: solid; border-color: var(--ok); }
.own-drop .why { flex-basis: 100%; }
.own-drop label.btn { cursor: pointer; }
.own-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
@media (max-width: 600px) { .own-meta { grid-template-columns: 1fr; } }