:root { --green:#0b7f28; --green-d:#086420; --bg:#f4f6f5; --card:#fff; --line:#dbe0dd; --text:#1a2420; --muted:#4c5d55;
    --chip-bg:#eef3f0;
    /* Karten hell: randlos, sanfter Schatten hebt sie ruhig von der Fläche ab (Social-Feed-Optik). */
    --card-bd:transparent;
    --shadow:0 1px 2px rgba(20,40,30,.06), 0 3px 10px rgba(20,40,30,.06);
    --shadow-hover:0 3px 12px rgba(20,40,30,.12);
    --ok-bg:#e6f7ef; --ok-fg:#0b7f28; --ok-bd:#b6e6cf;
    --warn-bg:#fff4e6; --warn-fg:#b26a00; --warn-bd:#ffd9a8;
    --crit-bg:#fdece9; --crit-fg:#c0392b; --crit-bd:#f2c6bf;
    --info-bg:#e6ecfb; --info-fg:#2952cc; --info-bd:#c9d6f7;
    /* Design-System: einheitliche Radien & Abstandsraster (Social-Feed-Ruhe). */
    --radius:14px; --radius-sm:10px;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; }
  body.dark { --green:#22cc5c; --green-d:#1aa749; --bg:#14181a; --card:#1e2427; --line:#38443f; --text:#e7ece9; --muted:#a6b6ae;
    --chip-bg:#2a352f;
    /* Karten dunkel: feiner Rand nötig — Schatten sind auf Dunkel kaum sichtbar. */
    --card-bd:var(--line);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
    --shadow-hover:0 4px 14px rgba(0,0,0,.45);
    --ok-bg:#12331e; --ok-fg:#46d67a; --ok-bd:#205834;
    --warn-bg:#33280f; --warn-fg:#e2ac44; --warn-bd:#5a4620;
    --crit-bg:#3a1c18; --crit-fg:#f0857a; --crit-bd:#5e2b25;
    --info-bg:#1a2338; --info-fg:#8aa4f7; --info-bd:#33436f; }
  body.dark .reacts button, body.dark .spec { background:#2a3330; }
  body.dark input, body.dark textarea, body.dark select { background:#161b1d; }
  body.dark .editorial { background:#1e2f5a; color:#bcd0ff; border-color:#2e4680; }
  * { box-sizing:border-box; }
  /* Handy: Textgröße nicht automatisch aufblähen (Rotation), sauberes Antippen ohne grauen
     Blitz (die Buttons geben per :active eigenes Feedback). */
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  /* Sofort reagierende Taps am Handy: kein Doppeltipp-Zoom, keine 300ms-Verzögerung. */
  button, a, .clickable, input, select, textarea, .poll-opt, .pv-item, .nr-card, .ovtile, .opento-badge { touch-action:manipulation; }
  body { margin:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent; }
  /* Tastatur-Fokus deutlich sichtbar (Barrierefreiheit) */
  :focus-visible { outline:3px solid #1a73e8; outline-offset:2px; }
  /* Sichere Bereiche moderner Handys (Notch/Kamera-Insel) respektieren: der grüne Kopf
     reicht unter die Statusleiste, Inhalt beginnt darunter (env-Insets = 0 ohne Notch). */
  /* Neutraler Kopf (wie LinkedIn/X/Instagram): ruhige Fläche pro Theme, Grün nur als
     Marken-Akzent (Logo). Wirkt hochwertiger und lässt wichtige Aktionen besser
     hervortreten, ohne Klarheit/Kontrast zu opfern. */
  header { background:var(--card); color:var(--text); padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:5; border-bottom:1px solid var(--line); box-shadow:0 1px 4px rgba(0,0,0,.06); }
  header .logo { font-weight:800; letter-spacing:.5px; font-size:1.25em; display:inline-flex; align-items:center; gap:8px; color:var(--green); }
  header .logo .logo-ic { display:block; flex:0 0 auto; }
  header .logo:hover { text-decoration:none; opacity:.9; }
  header .logo:hover .logo-txt { text-decoration:underline; }
  /* Länder-Auswahl (erster Schritt): große, klar klickbare Karten */
  .country-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:14px; }
  .country-pick { display:flex; align-items:center; gap:10px; justify-content:flex-start; text-align:left; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:1.02em; font-weight:600; min-height:56px; overflow-wrap:normal; word-break:keep-all; hyphens:none; }
  @media (max-width:460px){ .country-grid { grid-template-columns:1fr; } }
  .country-pick:hover { border-color:var(--green); background:transparent; }
  .country-pick .flag { font-size:1.5em; line-height:1; }
  /* Start-/Anmelde-Landing: breiter, klar in Ebenen — links der Wert (was ist ApoTrend),
     rechts die Formulare. Neue Besucher:innen verstehen sofort, worum es geht. */
  #app.auth-mode { max-width:920px; }
  .auth-grid { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
  @media (min-width:820px){ .auth-grid { grid-template-columns:1.05fr .95fr; } }
  .card.auth-hero { background:linear-gradient(150deg, var(--green), var(--green-d)); color:#fff; border-color:transparent; box-shadow:0 6px 20px rgba(11,127,40,.25); }
  .auth-hero-brand { font-weight:800; letter-spacing:.5px; font-size:1.15em; opacity:.95; }
  .auth-hero-title { font-size:1.5em; font-weight:800; line-height:1.22; margin:10px 0 6px; letter-spacing:-0.01em; }
  .auth-hero-sub { opacity:.92; font-size:1.02em; }
  .auth-hero-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
  .auth-hero-list li { font-size:1.02em; font-weight:600; line-height:1.4; }
  header .sp { flex:1; }
  /* Kopf-Aktionen auf neutraler Fläche: klar erkennbarer Rahmen (Owner-Prinzip:
     Buttons müssen als solche erkennbar sein), Text in Vordergrundfarbe. */
  header button { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm); min-height:42px; min-width:42px; }
  header button:hover { background:var(--bg); border-color:var(--muted); }
  /* Länder-/Sprach-Umschalter in der Kopfzeile: klar erkennbar, lesbar (Karten-
     Hintergrund statt Weiß-auf-Grün), kompakt genug fürs Handy. */
  header #countrySwitch { width:auto; max-width:240px; min-height:42px; padding:8px 10px; font-size:0.92em; font-weight:600; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
  /* Handy: nur die Flagge zeigen (der volle Ländername erscheint beim Aufklappen);
     spart Platz, damit die Kopfzeile in eine Zeile passt (kein Horizontal-Scroll). */
  @media (max-width:560px){ header #countrySwitch { max-width:52px; padding:8px 4px; font-size:1.05em; } }
  /* Mobil: Header muss in eine Zeile passen (sonst Horizontal-Scroll, Logout
     abgeschnitten). MUSS nach den Basisregeln stehen (gleiche Spezifität). */
  /* Handy: 8 Kopf-Bedienelemente passen bei sehr schmalen Geräten (≤390px) nicht
     in eine Zeile. Statt alles auf Winzig-Größe zu quetschen (schlecht bedienbar),
     lassen wir die Zeile umbrechen – jedes Element bleibt komfortabel antippbar,
     kein Horizontal-Scroll. Logo oben, Aktionen darunter. */
  @media (max-width:560px){ #whoami { display:none; } header { gap:4px; padding:9px 8px; flex-wrap:wrap; } header .logo { font-size:0.96em; letter-spacing:0; } header button { min-width:0; min-height:40px; padding:8px 7px; } }
  .wrap { max-width:640px; margin:0 auto; padding:16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .card { background:var(--card); border:1px solid var(--card-bd); border-radius:var(--radius); padding:16px; margin-bottom:18px; overflow-wrap:anywhere; box-shadow:var(--shadow); }
  /* Typografie-Skala: selbstbewusste, klar gestufte Überschriften (engeres Tracking
     wirkt hochwertiger, bleibt aber gut lesbar). */
  h1 { font-size:1.55em; font-weight:800; letter-spacing:-0.02em; margin:0 0 12px; line-height:1.18; }
  h2 { font-size:1.2em; font-weight:800; letter-spacing:-0.01em; margin:0 0 8px; line-height:1.25; }
  h3 { font-size:1.05em; font-weight:700; letter-spacing:-0.005em; margin:0 0 6px; line-height:1.3; }
  label { display:block; font-size:0.9em; color:var(--muted); margin:10px 0 4px; }
  input, textarea, select { width:100%; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:1em; font-family:inherit; min-height:46px; background:var(--card); color:var(--text); }
  textarea { resize:vertical; min-height:70px; }
  /* Aktives Eingabefeld klar erkennbar (grüner Rahmen) — moderne Formular-Optik, ergänzt
     den Tastatur-Fokusring, ohne ihn zu ersetzen. */
  input:focus, textarea:focus, select:focus { border-color:var(--green); }  button { background:var(--green); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px 16px; font-size:0.95em; font-weight:600; cursor:pointer; min-height:44px; transition:background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .04s ease; }
  button:hover { background:var(--green-d); }
  /* Tasthaftes Drücken: jeder Button gibt beim Klick sichtbar nach (klare Affordanz für
     nicht-technische Nutzer:innen). @media reduced-motion respektiert Bewegungsstopp. */
  button:active { transform:translateY(1px); }
  @media (prefers-reduced-motion: reduce) { button, .ovtile { transition:none; } button:active, .ovtile.clickable:hover, .ovtile.clickable:focus-visible { transform:none; } }
  button.ghost { background:transparent; color:var(--green); border:1px solid var(--green); }
  button.small { padding:8px 12px; font-size:0.85em; min-height:40px; }
  /* Text-Link-artiger Button (z. B. „Passwort vergessen?") — sieht aus wie ein Link,
     bleibt aber als <button> tastatur-/screenreader-bedienbar. */
  button.linklike { background:transparent; color:var(--green); border:none; padding:4px 0; min-height:0; font-weight:600; text-decoration:underline; }
  button.linklike:hover { background:transparent; color:var(--green-d); }
  /* Wiederherstellungscodes: gut lesbar, monospace, klare Kästchen zum Abschreiben. */
  ol.recovery-codes { list-style:decimal inside; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  ol.recovery-codes li { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
  ol.recovery-codes code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.05em; letter-spacing:1px; }
  /* Repost: das eingebettete Original klar abgesetzt (Rahmen + leichter Hintergrund). */
  .repost-embed { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:8px; background:var(--bg); }
  .repost-embed.clickable { cursor:pointer; }
  .repost-embed.clickable:hover { border-color:var(--green); }
  .row > button { flex-shrink:0; white-space:nowrap; } /* Buttons in einer Zeile (Folgen, Filtern …) behalten ihre Breite; das Eingabefeld gibt nach statt den Button-Text mitten im Wort umzubrechen */
  #sgo { white-space:nowrap; } /* „Search"/„Pesquisar" nicht umbrechen lassen */
  /* Filter-/Sortier-Chips füllen sich leicht (Chip-Grund statt Karten-Grund), damit sie
     auf einer Karte klar als antippbare Schalter erkennbar sind — nicht als flacher Text. */
  button.sortbtn { background:var(--chip-bg); color:var(--text); border:1px solid var(--line); font-weight:600; }
  button.sortbtn:hover { border-color:var(--green); background:var(--chip-bg); }
  button.sortbtn.active { background:var(--green); color:#fff; border-color:var(--green); }
  button.sortbtn.active:hover { background:var(--green-d); }
  .row { display:flex; gap:8px; align-items:center; }
  /* Kopfzeilen mit Abstandshalter (Titel · Spacer · Aktion) dürfen umbrechen: ein langer
     Button (z. B. CSV-Export) rutscht auf Mobil unter den Titel, statt ihn zu stauchen.
     Eingabe+Button-Zeilen (ohne .sp) bleiben einzeilig — der Button gibt nicht nach. */
  .row:has(> .sp), .row:has(> h1) { flex-wrap:wrap; }
  /* Überschrift in einer Kopfzeile hält ihre Inhaltsbreite (flex-basis:auto statt 0),
     damit auf Mobil der Button umbricht statt die Überschrift mitten im Wort zu zerreißen. */
  .row > h1 { flex:1 1 auto !important; }
  /* Reiter füllen die 640px-Spalte, aber die 8 Labels passen nicht in EINE Zeile —
     ohne Umbruch ragten sie bisher rechts über alle Karten hinaus. Jetzt sauberer
     Umbruch in zwei Reihen zu je vier (bündig mit dem Inhalt). */
  .tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
  /* Reiter im selben ruhigen Karten-System wie der Inhalt: hell randlos mit sanftem
     Schatten, dunkel feiner Rand (--card-bd). Wirkt wie eine zusammengehörige Pill-Nav. */
  .tabs button { flex:1 1 140px; background:var(--card); color:var(--text); border:1px solid var(--card-bd); box-shadow:var(--shadow); font-weight:600; }
  /* Klares Hover-Feedback (grüner Rand + Text) — Nav fühlt sich lebendig an, bleibt eindeutig klickbar. */
  .tabs button:not(.active):hover { border-color:var(--green); color:var(--green); }
  /* Aktiver Reiter deutlich hervorgehoben: grün + kräftiger + dezenter grüner Schein
     (segmentierte Pill-Nav à la X/Instagram), damit „wo bin ich" sofort klar ist. */
  .tabs button.active { background:var(--green); color:#fff; border-color:var(--green); font-weight:800; box-shadow:0 2px 8px rgba(11,127,40,.28); }
  /* Mobil: 8 Tabs passen nicht in eine Zeile (Horizontal-Scroll, halbe Tabs
     unsichtbar). Als 4-Spalten-Grid umbrechen -> alle Tabs sichtbar, kein Overflow. */
  @media (max-width: 640px) {
    /* Reiter-Leiste bleibt beim Scrollen erreichbar (klebt direkt unter der Kopfzeile) —
       app-typische Navigation am Handy. Hintergrund deckt durchscrollende Karten ab. */
    /* minmax(0,1fr): Spalten dürfen unter ihre Inhaltsbreite schrumpfen — sonst ragte das
       Raster bei großer Schrift über den Rand (Querscroll). overflow-wrap bricht lange Wörter. */
    .tabs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); position:sticky; top:var(--header-h, 58px); z-index:4; background:var(--bg); padding:8px 0; margin-bottom:8px; box-shadow:0 6px 6px -6px rgba(0,0,0,.14); }
    .tabs button { flex:none; padding-left:4px; padding-right:4px; overflow-wrap:anywhere; }
    /* Sehr große Schrift: 3 Spalten geben den längeren Beschriftungen genug Platz. */
    body[data-fontscale="2"] .tabs { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  }
  .post-author { font-weight:700; }
  /* Social-Header: Avatar links, daneben Name (fett) über „@handle · Zeit" — die vertraute
     Feed-Optik von X/LinkedIn, aber mit gut lesbarer Größe (keine Winzig-Schrift). */
  .post-head { display:flex; align-items:flex-start; }
  .post-hd-main { flex:1; min-width:0; }
  .post-hd-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:4px; }
  .post-hd-sub { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--muted); font-size:13px; margin-top:1px; }
  .post-hd-sub .handle { font-size:13px; }
  .handle { color:var(--muted); font-weight:400; font-size:0.9em; }
  .verified { color:var(--green); font-size:13px; }
  .editorial { background:var(--info-bg); color:var(--info-fg); font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; border:1px solid var(--info-bd); }
  .rank { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px; border-radius:999px; background:var(--green); color:#fff; font-weight:800; font-size:15px; margin-right:8px; }
  .rabatt-badge { background:var(--ok-bg); color:var(--ok-fg); font-weight:800; font-size:16px; padding:4px 12px; border-radius:999px; border:1px solid var(--ok-bd); white-space:nowrap; } /* Rabatt-Prozentwert nie mitten in der Zahl umbrechen (z. B. „−29.8%") */
  .mention { color:var(--green); font-weight:600; }
  .mention-ac { border:1px solid var(--line); border-radius:8px; background:var(--card); margin-top:4px; overflow:hidden; }
  .mention-ac-item { padding:8px 10px; cursor:pointer; font-size:0.9em; }
  .mention-ac-item:hover, .mention-ac-item.active { background:var(--bg); }
  .hashtag { color:var(--info-fg); font-weight:600; }
  .clickable { cursor:pointer; }
  .clickable:hover { text-decoration:underline; }
  /* Übersichts-Kacheln sind Navigations-Buttons: klare Karten-Optik + sichtbare
     Hover-/Fokus-Affordanz (Rahmen wird grün), aber KEIN Unterstreichen (Karte, kein Link). */
  /* Kennzahlen-Kacheln (der Überblick „auf einen Blick"): farbiger Rand-Akzent links
     macht die Semantik sofort scannbar (rot = kritisch); klare Klick-Affordanz
     (Hover hebt die Kachel leicht an + Schatten), damit erkennbar ist: anklickbar. */
  .ovtile { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--tile-accent, var(--line)); border-radius:12px; box-shadow:var(--shadow); transition:border-color .12s, box-shadow .12s, transform .12s; }
  .ovtile.clickable { cursor:pointer; }
  .ovtile.clickable:hover, .ovtile.clickable:focus-visible { text-decoration:none; border-color:var(--green); border-left-color:var(--tile-accent, var(--green)); box-shadow:0 6px 18px rgba(0,0,0,.12); transform:translateY(-2px); }
  .ovtile-go { color:var(--green); font-weight:800; opacity:.7; transition:opacity .12s; }
  .ovtile.clickable:hover .ovtile-go, .ovtile.clickable:focus-visible .ovtile-go { opacity:1; }
  /* Krypto-Zahlung: klare Karte je Coin, Adresse gut lesbar (monospace, umbrechbar). */
  .crypto-pay { border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:10px; background:var(--bg); }
  .crypto-addr { margin-top:8px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
  .crypto-addr code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.92em; word-break:break-all; }
  a.btn-link { display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#fff; border-radius:var(--radius-sm); padding:10px 14px; font-weight:600; font-size:0.9em; text-decoration:none; min-height:40px; }
  a.btn-link:hover { background:var(--green-d); }
  .ok-box { background:var(--ok-bg); color:var(--ok-fg); border-radius:8px; }
  /* Premium-Abzeichen: sichtbarer Vorteil für zahlende Mitglieder (gold, gut lesbar). */
  .premium-badge { font-size:12px; font-weight:700; color:#8a6d00; background:#fff3c4; border:1px solid #f0d98a; border-radius:6px; padding:1px 7px; white-space:nowrap; }
  body.dark .premium-badge { color:#ffd95e; background:#3a3200; border-color:#5c4f00; }
  /* „Beobachtet"-Zustand am Such-Chip: klar als aktiv erkennbar (grün). */
  .watched-on { color:var(--green); border-color:var(--green); font-weight:700; }
  /* Daten-Herkunfts-Pille: grün = live, gelb = Referenz/Aufbau. Gut lesbar in hell/dunkel. */
  .data-pill { font-size:12px; font-weight:700; border-radius:999px; padding:2px 9px; white-space:nowrap; border:1px solid transparent; }
  .data-pill.live { color:#0b6b2e; background:#dff3e6; border-color:#a9dcbd; }
  .data-pill.ref  { color:#8a6d00; background:#fff3c4; border-color:#f0d98a; }
  body.dark .data-pill.live { color:#7ee2a3; background:#0f3320; border-color:#1f5c39; }
  body.dark .data-pill.ref  { color:#ffd95e; background:#3a3200; border-color:#5c4f00; }
  /* „Nach oben"-Button: erscheint beim Scrollen auf langen Listen (v.a. mobil). */
  .backtotop { position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); z-index:40; width:44px; height:44px; border-radius:50%;
    border:none; background:var(--green); color:#fff; font-size:20px; line-height:44px; text-align:center; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.25); opacity:0; transform:translateY(8px); transition:opacity .18s, transform .18s; pointer-events:none; }
  .backtotop.show { opacity:1; transform:none; pointer-events:auto; }
  .backtotop:hover { background:var(--green-d); }
  @media print { .backtotop { display:none; } }
  /* Weicher Zeichenzähler an Textfeldern: dezent, wird bei Überschreitung rot. */
  .char-counter { font-size:12px; text-align:right; margin-top:2px; min-height:14px; }
  .char-counter.over { color:var(--crit-fg); font-weight:700; }
  .avatar { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; font-size:19px; flex:0 0 auto; box-shadow:0 0 0 1px var(--line); }
  .profile-cover { width:100%; height:140px; border-radius:var(--radius); background:var(--chip-bg); background-size:cover; background-position:center; border:1px solid var(--line); }
  /* Jedes Profil bekommt ein „Banner" (Social-Optik): ohne Bild ein dezenter grüner Verlauf. */
  .profile-cover-ph { background:linear-gradient(120deg, var(--green), var(--green-d)); border-color:transparent; }
  /* Avatar überlappt das Banner unten links (X/LinkedIn/Instagram) — mit Karten-Ring abgesetzt. */
  .profile-avatar-wrap { margin-top:-42px; position:relative; z-index:1; padding-left:2px; }
  .profile-avatar { width:84px; height:84px; font-size:30px; box-shadow:0 0 0 4px var(--card); }
  .profile-idblock { margin-top:10px; }
  #whoami.clickable { display:inline-flex; align-items:center; cursor:pointer; border-radius:999px; padding:2px 8px 2px 2px; }
  #whoami.clickable:hover { background:var(--bg); }
  #whoami .avatar { border:1.5px solid var(--line); }
  .pfc { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--chip-bg); }
  .pfc-bar { height:10px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:6px; }
  .pfc-bar > span { display:block; height:100%; background:var(--green); border-radius:999px; transition:width .3s ease; }
  .pfc-done { margin-top:14px; padding:10px 12px; border-radius:12px; background:rgba(11,127,40,.10); color:var(--ok-fg); font-weight:700; }
  .exp-section { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
  .exp-head { font-weight:800; margin-bottom:6px; }
  .exp-item { padding:6px 0 6px 12px; border-left:3px solid var(--green); margin-bottom:6px; }
  .exp-role { font-weight:700; }
  .exp-edit { border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:8px; background:var(--chip-bg); }
  button.spec-endorse { cursor:pointer; font-family:inherit; }
  button.spec-endorse:hover { border-color:var(--green); }
  .spec-endorsed { background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-bd); }
  .pv { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--chip-bg); }
  .pv-list { display:flex; flex-direction:column; gap:2px; }
  .pv-item { display:flex; align-items:center; gap:2px; width:100%; text-align:left; border:0; background:none; color:var(--text); padding:6px; border-radius:8px; cursor:pointer; }
  .pv-item:hover { background:var(--card); }
  .pv-name { font-weight:600; margin-right:6px; }
  .rec-item { border-top:1px solid var(--line); padding:10px 0; }
  .rec-item:first-child { border-top:0; }
  .rec-body { margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
  .opento-row { margin-top:10px; font-size:14px; line-height:1.9; }
  .opento-badge { display:inline-block; background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-bd); border-radius:999px; padding:3px 11px; font-size:13px; font-weight:600; margin:2px; font-family:inherit; }
  button.opento-badge { cursor:pointer; }
  button.opento-badge:hover { filter:brightness(0.97); text-decoration:underline; }
  .opento-badge-hi { outline:2px solid var(--ok-fg); outline-offset:1px; }
  .ot-check { display:inline-flex; align-items:center; gap:6px; margin:2px 12px 2px 0; font-size:14px; cursor:pointer; }
  .ot-check input { width:auto; min-height:0; }
  /* News-Livestream links, im Euronews-Stil (gestapelte 𝕏-Karten), im freien linken Rand
     neben der zentrierten 640px-Spalte. Ab 1300px passt die 300px-Leiste sicher neben
     den Inhalt (linker Inhaltsrand = (1300-640)/2 = 330px > Leisten-Rechtskante 316px),
     damit auch übliche Laptops (1366px) den News-Livestream als Ebene sehen. */
  .news-rail { display:none; box-sizing:border-box; position:fixed; left:16px; top:64px; width:300px; max-height:calc(100vh - 84px); overflow-y:auto; z-index:20; }
  @media (min-width:1300px){ .news-rail.on { display:block; } }
  .nr-head { display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; margin-bottom:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 15px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .nr-clock { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; }
  .nr-live { width:9px; height:9px; border-radius:50%; background:#c0392b; flex:0 0 auto; animation:nr-pulse 1.7s ease-in-out infinite; }
  @keyframes nr-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }
  .nr-card { display:block; box-sizing:border-box; width:100%; text-align:left; border:1px solid var(--line); background:var(--card); color:var(--text); padding:13px 15px; margin-bottom:11px; border-radius:14px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .nr-card:hover { border-color:var(--green); }
  .nr-card.nr-new { border-color:var(--ok-bd); background:var(--ok-bg); }
  .nr-src { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; margin-bottom:7px; }
  .nr-x { font-weight:900; }
  .nr-handle { color:#1d9bf0; }
  .nr-newtag { color:var(--ok-fg); font-weight:800; font-size:11px; letter-spacing:.03em; }
  .nr-time { margin-left:auto; color:var(--muted); font-weight:600; }
  .nr-body { font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
  /* Inline-News (Handy): leichtere Karten, blendet aus, sobald die Seitenleiste erscheint. */
  .news-inline .nr-card { box-shadow:none; background:var(--chip-bg); }
  .news-inline .nr-card:last-child { margin-bottom:0; }
  @media (min-width:1300px){ .news-inline { display:none; } }
  /* Laptop/Desktop: der leere rechte Rand neben der zentrierten Spalte wird zum
     Schnellzugriff-Rail (analog zum News-Rail links) — sekundäre Bereiche griffbereit,
     ohne den Feed anzufassen. Erst ab 1240px, damit es die Spalte nicht überlappt. */
  .quick-rail { display:none; box-sizing:border-box; position:fixed; right:24px; top:76px; width:250px; max-height:calc(100vh - 96px); overflow-y:auto; z-index:20; }
  @media (min-width:1240px){ .quick-rail.on { display:block; } }
  .qr-card { padding:12px; }
  .qr-title { font-weight:800; font-size:13px; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; margin:2px 2px 8px; }
  .qr-link { display:block; width:100%; text-align:left; background:transparent; color:var(--text); border:1px solid transparent; border-radius:var(--radius-sm); padding:11px 12px; font-weight:600; font-size:15px; margin-bottom:4px; }
  .qr-link:last-child { margin-bottom:0; }
  .qr-link:hover { background:var(--chip-bg); border-color:var(--line); color:var(--green); }
  /* Anzeigen-Fläche (eigene Ebene in der rechten Leiste): klar als „Anzeige" markiert,
     dezent vom Inhalt abgesetzt — sofort verständlich, nicht aufdringlich. */
  .qr-ad { padding:12px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
  .qr-ad:hover { border-color:var(--green); box-shadow:var(--shadow-hover); }
  .qr-ad-label { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:1px 7px; display:inline-block; margin-bottom:8px; }
  .qr-ad-img { width:100%; height:130px; object-fit:cover; border-radius:10px; margin-bottom:8px; display:block; }
  .qr-ad-cat { font-size:12px; font-weight:700; color:var(--info-fg); background:var(--info-bg); border:1px solid var(--info-bd); border-radius:999px; padding:2px 8px; display:inline-block; }
  .qr-ad-title { font-weight:700; font-size:15px; margin:6px 0 2px; line-height:1.3; }
  .qr-ad-price { font-size:14px; }
  .qr-ad-by { font-size:12px; color:var(--muted); margin-top:4px; }
  /* Klickbarkeits-Hinweis der Anzeige: „Angebot ansehen ›" — für die nicht-technische
     Zielgruppe eindeutig, dass die Karte zum Angebot führt (mehr Klicks = Monetarisierung). */
  .qr-ad-cta { margin-top:8px; font-weight:700; font-size:13px; color:var(--green); }
  .feed-ad:hover .qr-ad-cta, .qr-ad:hover .qr-ad-cta { text-decoration:underline; }
  /* In-Feed-Anzeige: wie ein Beitrag, aber klar als „Anzeige" gekennzeichnet. */
  .feed-ad { cursor:pointer; transition:border-color .12s, box-shadow .12s; }
  .feed-ad:hover, .feed-ad:focus-visible { border-color:var(--green); box-shadow:var(--shadow-hover); text-decoration:none; }
  .feed-ad-title { font-weight:700; font-size:1.05em; margin:2px 0; line-height:1.3; }
  .feed-ad-img { width:100%; max-height:220px; object-fit:cover; border-radius:10px; margin-bottom:8px; display:block; }
  .cart-sup { font-weight:800; margin:10px 2px 6px; color:var(--muted); }
  .cart-subline { text-align:right; font-weight:800; margin:2px 2px 8px; padding:6px 12px; border-top:2px solid var(--line); color:var(--text); }
  .spec { display:inline-block; background:var(--chip-bg); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:13px; margin:2px 2px 2px 0; }
  .post-body { margin:8px 0; white-space:pre-wrap; line-height:1.55; overflow-wrap:anywhere; }
  .vis { font-size:12px; color:var(--muted); }
  .reacts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .reacts button { background:var(--chip-bg); color:var(--text); border:1px solid var(--line); padding:8px 12px; font-size:0.85em; font-weight:500; min-height:40px; }
  .reacts button:not(.reacted):hover { border-color:var(--green); color:var(--green); }
  .reacts button.reacted { background:var(--green); color:#fff; border-color:var(--green); font-weight:700; } /* eigene Reaktion sichtbar markiert (nochmal klicken = entfernen) */
  body.dark .reacts button.reacted { background:var(--green); color:#fff; }
  .muted { color:var(--muted); font-size:14px; }
  .err { color:var(--crit-fg); font-size:14px; margin-top:8px; }
  /* Einheitlicher, freundlicher Leerzustand (Icon + Titel + Text + optionale Aktion).
     Icon in einem sanft getönten Kreis (moderne App-Optik), Karte gleitet dezent ein. */
  .empty { text-align:center; padding:34px 20px; animation:apo-fade-up .28s ease both; }
  .empty-ic { display:inline-flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; background:var(--chip-bg); font-size:36px; line-height:1; }
  .empty-t { font-size:17px; font-weight:700; margin-top:12px; }
  .empty-s { margin-top:6px; max-width:44ch; margin-left:auto; margin-right:auto; }
  @keyframes apo-fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .empty { animation:none; } }
  /* Einheitlicher, dezenter Lade-Indikator (Spinner + Text), theme-tauglich. */
  .loading { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; padding:8px 2px; animation:apo-fade-up .28s ease both; }
  .loading::before { content:''; width:18px; height:18px; border:3px solid var(--line); border-top-color:var(--green); border-radius:50%; animation:apo-spin .7s linear infinite; flex:none; }
  @keyframes apo-spin { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .loading::before { animation:none; } .loading { animation:none; } }
  .bell { position:relative; }
  .badge { position:absolute; top:-6px; right:-6px; background:#e02a2a; color:#fff; border-radius:10px; font-size:11px; padding:1px 6px; }
  /* Klartext-Beschriftung der Header-Aktionen (Zielgruppe: nicht-technisch). Auf
     schmalen Screens Icon-only, damit die Kopfzeile nicht umbricht. */
  .hlabel { margin-left:6px; font-size:0.84em; font-weight:600; }
  /* Große Schrift: Kopfzeile darf umbrechen und BEHÄLT die Beschriftungen — wer die Schrift
     vergrößert, braucht gerade die Klartext-Labels (besser als Icon-only). Statt Querscroll
     wird die Zeile mehrzeilig. flex-wrap greift hier nur bei großer Schrift. */
  body[data-fontscale="1"] header, body[data-fontscale="2"] header { flex-wrap:wrap; }
  /* Kopf-Beschriftungen nur zeigen, wenn die volle Reihe sicher passt (≥~1180px).
     Darunter Icon-only (mit aria-label/Tooltip) — sonst ragte die Reihe über die Seite
     hinaus (Querscroll). */
  @media (max-width: 1180px) { .hlabel { display:none; } header button { min-width:42px; } }
  /* Passt selbst die Icon-Reihe nicht mehr (≤~980px: Tablet, kleines/geteiltes Fenster),
     bricht die Kopfzeile sauber um statt Querscroll. */
  @media (max-width: 980px) { header { flex-wrap:wrap; } }
  .comments { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
  .comment { font-size:0.9em; padding:6px 0; border-bottom:1px solid var(--line); }
  .comment:last-child { border-bottom:none; }
  /* Verzeichnis: mehrspaltiges Karten-Raster ab genug Breite (auto-fill füllt den Platz),
     am Handy automatisch einspaltig — bessere Raumnutzung auf Laptop/Desktop. */
  .dir-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
  .dir-grid > .card { margin-bottom:0; }
  .hidden { display:none; }
  /* Offline-Hinweis: gut sichtbarer Bernstein-Balken (nicht Rot — Rot bleibt dem
     kritischen Engpass vorbehalten). Fest oben, damit er nie übersehen wird. */
  .offline-banner { position:fixed; top:0; left:0; right:0; z-index:60; text-align:center;
    background:var(--warn-bg); color:var(--warn-fg); border-bottom:1px solid var(--warn-bd);
    font-weight:700; font-size:15px; padding:max(10px, env(safe-area-inset-top)) 14px 10px; }
  /* Besuchs-Kontext: gut sichtbarer Info-Balken (blau/Info, NICHT rot/orange — die sind
     kritischem Engpass bzw. Offline vorbehalten). Zeigt, dass man ein fremdes Land ansieht. */
  .view-ctx { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
    background:var(--info-bg); color:var(--info-fg); border-bottom:1px solid var(--info-bd);
    font-weight:600; font-size:14px; padding:9px 14px; }
  .view-ctx button { flex:0 0 auto; }
  /* Umfrage: antippbare Optionen mit Ergebnis-Balken. Grün = neutrale Zustimmung (kein Rot). */
  .poll { display:flex; flex-direction:column; gap:8px; margin:10px 0 4px; }
  .poll-opt { position:relative; display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px;
    padding:11px 13px; font-size:15px; font-weight:600; cursor:pointer; overflow:hidden; min-height:44px; }
  .poll-opt:hover { border-color:var(--green); }
  .poll-opt.mine { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
  .poll-bar { position:absolute; left:0; top:0; bottom:0; background:var(--ok-bg); z-index:0; transition:width .35s ease; }
  .poll-lbl { position:relative; z-index:1; flex:1; }
  .poll-pct { position:relative; z-index:1; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; }
  .poll-you { color:var(--ok-fg); font-weight:700; font-size:.82em; margin-left:4px; }
  .poll-total { font-size:13px; margin-top:2px; }
  @media (prefers-reduced-motion:reduce){ .poll-bar { transition:none; } }
  .skiplink { position:absolute; left:-9999px; top:0; z-index:20; background:var(--green); color:#fff; padding:10px 14px; border-radius:0 0 8px 0; font-weight:700; }
  .skiplink:focus { left:0; }
  #printhead { display:none; }
  @media print {
    header, .tabs, .skiplink, button, input, textarea, select, .reacts, [data-report], [data-scsv], [data-statusbox], [data-postbox], [data-aboutbox] { display:none !important; }
    body { background:#fff; color:#000; }
    .card { border:1px solid #999; box-shadow:none; break-inside:avoid; margin-bottom:8px; }
    #printhead { display:block; margin:0 0 12px; }
    /* nur die Engpass-Info drucken: Melde-Formular, Legende & Filter ausblenden */
    #feed > .card:has([data-report]), #feed > .card:has([data-tgl]), #feed > .card:has([data-q]) { display:none !important; }
  }