:root {
  color-scheme: dark;
  --bg: #101418;
  --card: #171d24;
  --line: #2a323c;
  --text: #e8e6e3;
  --muted: #8a9299;
  --red: #E60000;
  --green: #7ee29a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 1.25rem;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.brand .cross { width: 64px; height: 64px; }
.brand h1 { font-size: 2.4rem; letter-spacing: 0.04em; font-weight: 600; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem;
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
label { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 0.3rem; }
input[type="text"], input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: #0c1014;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
}
input:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
button {
  width: 100%;
  padding: 0.75rem;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:active { transform: scale(0.99); }
.hint { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.error {
  background: #2a1414;
  border: 1px solid #6e2b2b;
  color: #ffb4b4;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
}
.ok-badge {
  color: var(--green);
  border: 1px solid #2c5a3d;
  background: #14231a;
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  font-size: 0.95rem;
}
.secret {
  font-family: ui-monospace, monospace;
  background: #0c1014;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem;
  font-size: 0.95rem;
  word-break: break-all;
  user-select: all;
}
.qr { background: #fff; padding: 10px; border-radius: 12px; width: max-content; margin: 0 auto; }
ol.steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; }
.linkbutton {
  text-align: center;
  display: block;
  padding: 0.75rem;
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  top: 0;
}
.topbar .cross { width: 30px; height: 30px; }
.topbar h1 { font-size: 1.15rem; letter-spacing: 0.04em; }

/* ---------- Wort mit Brief-Punkten: Das oe im Topbar-Wort traegt Mini-Umschlaege als Umlaut ---------- */
.titel .oe-buchstabe { position: relative; display: inline-block; }
.oe-punkte {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 0.72em;
  height: 0.3em;
  margin-bottom: -0.30em;
  pointer-events: none;
}
.oe-punkte-klappe { stroke: var(--card); }

/* ---------- Modul-Klappe: Tip aufs OE klappt die Module als Leiter nach unten ---------- */
details.modul-klappe { position: relative; }
details.modul-klappe summary { list-style: none; cursor: pointer; display: flex; }
details.modul-klappe summary::-webkit-details-marker { display: none; }
.klappe-inhalt {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 13rem;
  padding: 0.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.modul-eintrag {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  border-radius: 10px;
}
.modul-eintrag:active { transform: scale(0.97); }
.modul-eintrag .cross { width: 30px; height: 30px; flex-shrink: 0; }
.modul-eintrag.aktiv { color: var(--text); background: #131a21; }
/* Aktive Sprosse: Silber wie die Ringe auf der Signaturkurve - das aktive
   Modul traegt sein Rot ja schon im Zeichen selbst. */
.modul-eintrag.aktiv .cross { outline: 2px solid #d8d8dd; outline-offset: 3px; border-radius: 7px; }
.modul-label { text-align: left; }

/* ---------- Topbar links: OE-Klappe und Wort zusammen wie im alten Grundriss ---------- */
.topbar-links { display: flex; align-items: center; gap: 0.8rem; }

/* ---------- Abmelden: leise im Fund der Seite ---------- */
.abmelden { display: flex; justify-content: center; padding: 0.4rem 1.1rem 2.2rem; }
.abmelden button {
  width: auto;
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
  font-weight: 400;
  background: transparent;
  border: none;
  color: var(--muted);
  opacity: 0.55;
}
main { max-width: 42rem; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; display: flex; flex-direction: column; gap: 1.2rem; }
section.card h2 { font-size: 1.05rem; }
.empty { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }


/* ---------- Watchlist ---------- */
.stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  margin-bottom: 0.8rem;
}
.stock-row:active { transform: scale(0.99); }
.stock-name { font-weight: 600; font-size: 1.05rem; }
.stock-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.stock-side { text-align: right; }
.stock-kurs { font-weight: 600; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.45rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.72rem; color: var(--muted); }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.kv.big .v { font-size: 1.3rem; font-weight: 600; }
h3.section { font-size: 0.95rem; margin: 0.2rem 0; }
.backlink { display: inline-block; color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.8rem; }
.sources { display: flex; flex-direction: column; gap: 0.35rem; }
.sources a { color: var(--muted); font-size: 0.78rem; text-decoration: none; word-break: break-all; }

/* ---------- Live-Kurse ---------- */
.pos { color: var(--green); }
.neg { color: #ff9d9d; }
.live-hint { font-size: 0.75rem; color: var(--muted); font-weight: 400; }

/* ---------- Score-Balken (Doppel-Balken, Teil 1: Fundamentaldaten) ---------- */
.stock-row { flex-direction: column; gap: 0.55rem; }
.stock-main { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 0.8rem; }
.scorebars { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.scorebar { display: flex; align-items: center; gap: 0.5rem; }
.sb-label { font-size: 0.68rem; color: var(--muted); width: 6rem; flex-shrink: 0; }
.sb-track { flex: 1; display: block; height: 6px; background: #0c1014; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sb-fill { display: block; height: 100%; border-radius: 999px; }
.sb-val { font-size: 0.72rem; color: var(--muted); width: 1.7rem; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.g5 { background: #35c26e; }
.g4 { background: #93c35d; }
.g3 { background: #d4b74a; }
.g2 { background: #e0873c; }
.g1 { background: #e05252; }
.kz-row { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.kz-row:last-of-type { border-bottom: none; }
.kz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.kz-name { font-size: 0.88rem; font-weight: 600; }
.kz-score { font-size: 0.85rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; color: #101418; font-variant-numeric: tabular-nums; }
.kz-wert { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.kz-erklaerung { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* ---------- Aufklapp-Erklaerungen (Antippen oeffnet die Tiefe in der Karte) ---------- */
details.kz-details summary { list-style: none; cursor: pointer; }
details.kz-details summary::-webkit-details-marker { display: none; }
details.kz-details summary::after { content: '+'; margin-left: 0.4rem; color: var(--muted); font-weight: 600; }
details.kz-details[open] summary::after { content: '\2212'; }
details.kz-details[open] summary { color: var(--text); }
.kz-tiefe { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0 0.1rem 0.75rem; border-left: 2px solid var(--line); margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.kz-tiefe-hinweis { font-size: 0.72rem; opacity: 0.85; }
.cap-hinweis { background: #2a2416; border: 1px solid #6e5b2b; color: #ffd884; border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.82rem; line-height: 1.5; margin-top: 0.4rem; }

/* ---------- Wert hinzufuegen ---------- */
.add-results { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.add-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; text-align: left; padding: 0.55rem 0.7rem; background: #0c1014; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 0.9rem; }
.add-row:active { transform: none; background: #131a21; }
.add-row-sub { font-size: 0.72rem; color: var(--muted); }
.add-status { font-size: 0.8rem; color: var(--muted); margin-top: 0.5rem; min-height: 1.15rem; line-height: 1.4; }
.add-fehler { color: #ffb4b4; }
.versteckt { display: none; }
.add-detail { display: flex; flex-direction: column; gap: 0.8rem; }
.add-detail .add-name { font-weight: 600; font-size: 1rem; }
.add-felder { display: flex; flex-direction: column; gap: 0.6rem; }
#add-btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- Formulare: Luft ueber Absende-Knoepfen ---------- */
.card form button[type="submit"] { margin-top: 1rem; }


/* ---------- Einwurf ---------- */
textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: #0c1014;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
  resize: vertical;
}
/* FIX 23.10.: Der grosse Brief gehoert in die Box, darf aber keinen
   Scrollbalken erzeugen - die 6rem/8.8rem-Version ueberragte die sieben
   Reihen des Feldes, mobile Browser zeigten den Balken schon im leeren
   Zustand. 4rem/6rem passt in jede Zeilenzahl, der Balken kommt erst
   wieder, wenn wirklich ein Einschreiben drin liegt. */
#einwurf-block::placeholder {
  font-size: 4rem;
  line-height: 6rem;
  text-align: center;
}
.notice {
  background: #14231a;
  border: 1px solid #2c5a3d;
  color: var(--green);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

/* ---------- Aktien-News: chronologische Timeline im News-Fach ---------- */
.news-status { color: var(--muted); font-size: 0.78rem; }
.news-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.news-filter a.chip { text-decoration: none; }
.chip.aktiv { border-color: var(--red); color: var(--text); }
.news-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: none; }
.news-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.news-firma { font-size: 0.8rem; font-weight: 600; }
.news-zeit { font-size: 0.72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.news-link { color: var(--text); text-decoration: none; font-size: 0.95rem; line-height: 1.45; }
.news-link:active { color: var(--muted); }
.news-probe { white-space: pre-wrap; word-break: break-all; font-size: 0.65rem; color: var(--muted); max-height: 18rem; overflow: auto; }

/* ---------- RSS-Reader: Wetter-Kachel (Philipps Variante B, 22.10.) ----------
   Form wie eine Aktie (.stock-row-Masse), Akzentstreifen links je Wetterlage
   (Farbe kommt per Inline-Style aus lib/wetter.php), farbiges Inline-SVG-Icon,
   rechts die Pflichtwerte max/min und Regenwahrscheinlichkeit. */
.wetter-kachel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid #8a9299;
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.wetter-links { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.w-icon { width: 2.4rem; height: 2.4rem; flex-shrink: 0; }
.wetter-ort { font-weight: 600; font-size: 1.05rem; }
.wetter-text { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.wetter-werte { display: flex; align-items: baseline; gap: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wetter-temp { font-weight: 600; font-size: 0.95rem; }
.hoch { color: #FFCC00; }
.tief { color: #6aa9c9; }
.tropfen { color: #5b9bd5; font-size: 0.85rem; }

/* ---------- Merken (gelikte Meldungen des RSS-Fachs, Philipps Beschluss
   22.10., Vorschau-Canvas poestli-like-vorschau): Briefmarke in der
   Meta-Zeile, ungemerkt grau, gemerkt gelb gefuellt (#FFCC00 wie der
   gelbe Zustand nach Einwurf). Reines POST-Formular, kein JavaScript;
   der Knopf ist schmaler als die rot-flaechigen Haus-Buttons. ---------- */
.news-meta-rechts { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
form.merken-form { display: inline-flex; }
button.merken {
  width: auto;
  padding: 0.15rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
}
button.merken svg { width: 17px; height: 17px; display: block; }
button.merken.aktiv { color: #FFCC00; }

/* Vorschau unter dem Titel in der Gemerkt-Ansicht (Philipps Wunsch 23.10.):
   ein Satz Beschreibung aus dem Feed, gedeckelt vom RSS-Parser. */
.news-vorschau { color: var(--muted); font-size: 0.82rem; line-height: 1.45; margin: 0; }

/* ---------- Vorschaubilder (Lage 3, Philipps Wahl 23.10., Vorschau-Canvas
   poestli-thumb-vorschau): 16:9-Streifen unterm Titel ueber volle Kartenbreite.
   Das Bild ist eine serverseitig verkleinerte Kopie aus dem Datenordner
   (144x81, PHP/GD), ausgespielt ueber api/thumb.php - kein Hotlinking, das
   Handy spricht nur mit poestli.de. Ohne Bild zeigt das stille Brieffach
   den Platz (Platzhalter-SVG), die Zeilenhoehe bleibt gleich. ---------- */
.news-bild.streifen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1014;
  margin-top: 0.35rem;
}

/* ---------- Herkunfts-Zeile unterm Netz-Bild (Philipps Beschluss 23.10.,
   Vorschau-Canvas poestli-netzbild-vorschau): Urheber und Lizenz klein und
   leise unter dem Streifen - nur bei Netz-Bildern (Openverse/Wikimedia
   Commons), Verlagbilder tragen keine Zeile. ---------- */
.bild-herkunft { font-size: 0.68rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------- Standort-Anker beim Merken (Philipps Wunsch 24.10.): Der POST-
   Redirect traegt #m-<Hash> der gelikten Karte mit, der Browser stellt die
   Ansicht bei der Karte wieder her statt am Seitenanfang - weiter scrollen
   geht dort weiter, wo gelikt wurde. scroll-margin-top haelt der Karte Luft
   unter der klebenden Topbar. ---------- */
.news-item { scroll-margin-top: 4.5rem; }

/* ---------- Entmerken-Nachfrage (Philipps Beschluss 24.10. nachts):
   Gemerktes ist ein Archiv - die gelbe Briefmarke einer GEMERKTEN Karte
   oeffnet als details/summary (ohne JavaScript) eine kleine Frage-Karte,
   erst deren Ja-Knopf loescht endgueltig. Die Frage schwebt ueber der
   Karte, der Ja-Knopf traegt das rote Knopf-Gesicht in kompakt, die
   Briefmarke selbst bleibt im gewohnten Gelb. ---------- */
details.merk-frage { position: relative; display: inline-flex; }
details.merk-frage > summary { list-style: none; cursor: pointer; }
details.merk-frage > summary::-webkit-details-marker { display: none; }
details.merk-frage > summary.merken { display: inline-flex; padding: 0.15rem; background: none; border: none; color: #FFCC00; }
details.merk-frage > summary.merken svg { width: 17px; height: 17px; display: block; }
.merk-frage-inhalt {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.merk-frage-text { color: var(--muted); font-size: 0.8rem; }
.merk-frage-knopf { width: auto; padding: 0.3rem 0.7rem; font-size: 0.82rem; border-radius: 8px; }

/* ---------- MHL-Einwurf (gespeicherte Browser-Artikel, Philipps Gimmick
   24.10.): Der Knopf steht ueber der Gemerkt-Liste, per display:none - NUR
   die App-Bruecke oeffnet ihn nach onPageFinished (window.poestli), der
   Desktop-Browser sieht ihn nie. Sonst traegt er das gewohnte Button-
   Gesicht. ---------- */
button.mhl-einwurf { display: none; margin-bottom: 0.8rem; }

/* Volltext-Klappe der Gemerkt-Karte (Dauerhaft-Canon 24.10. nachts):
   Antippen oeffnet den ganzen Artikeltext in der Karte - details/summary
   ohne JavaScript, der Leistentext zeigt Plus/Minus wie die Kennzahlen-
   Aufklapper, der Text laeuft pre-wrap mit fester Hoehe und Scrollbalken -
   lange Artikel sprengen die Karte nie. ---------- */
details.volltext_klappe summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  user-select: none;
}
details.volltext_klappe summary::-webkit-details-marker { display: none; }
details.volltext_klappe summary::after { content: '+'; margin-left: 0.4rem; color: var(--muted); font-weight: 600; }
details.volltext_klappe[open] summary::after { content: '\2212'; }
details.volltext_klappe[open] summary { color: var(--text); }
.volltext {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  background: #0c1014;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.4rem;
  max-height: 24rem;
  overflow-y: auto;
}

/* ---------- Leseseite (Philipps Wunsch 24.10.): Der gelagerte Volltext
   liest sich in Ruhe - eigene Adresse, Serifen-Fall mit Initial, die
   Quelle leise im Fund. Das Bild bleibt der ehrliche Thumbnail-Streifen
   (144x81, kein Netzabruf), deshalb mit Mass zentriert statt gross
   hochskaliert. ---------- */
.lese-main { max-width: 36rem; }
.lese-zurueck { display: inline-block; color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.lese-zurueck:active { transform: scale(0.98); }
.lese-meta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.4rem; }
.lese-zeit { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.lese-titel { font-size: 1.7rem; line-height: 1.25; letter-spacing: 0.01em; margin: 0.4rem 0 0; }
.lese-teaser { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin-top: 0.7rem; }
.lese-bild { margin-top: 0.35rem; }
.lese-bild .news-bild { width: 100%; max-width: 20rem; margin: 0 auto; }
.lese-text { font-family: Georgia, 'Times New Roman', serif; font-size: 1.04rem; line-height: 1.78; margin-top: 1.2rem; }
.lese-text p { margin: 0 0 1.1rem; }
.lese-text p:first-of-type::first-letter { float: left; font-size: 3.1rem; line-height: 0.9; padding: 0.28rem 0.55rem 0 0; font-weight: 600; }
.lese-fuss { border-top: 1px solid var(--line); margin-top: 1.4rem; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.lese-quelle { color: var(--muted); font-size: 0.78rem; text-decoration: none; word-break: break-all; }
.lese-lager { color: var(--muted); font-size: 0.72rem; line-height: 1.6; }
.lese-quellknopf { display: block; text-align: center; padding: 0.75rem; background: var(--red); color: #fff; border-radius: 10px; font-weight: 600; text-decoration: none; font-size: 0.95rem; margin-top: 0.6rem; }
.lese-quellknopf:active { transform: scale(0.99); }
/* Tuere von der Gemerkt-Karte zur Leseseite: gelb wie das Fach */
.lese-karte-link { display: inline-block; margin: 0.2rem 0 0.4rem; color: #FFCC00; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.lese-karte-link:active { transform: scale(0.98); }

/* ---------- RSS-Chips (Philipps Wunsch 25.10.): Quelle-Chips ueber der
   Timeline wie die Aktien-News-Filter, jeder Chip traegt links den
   Markenfarben-Punkt der Quelle (Signaturfarben-Canon). ---------- */
.chip-punkt { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-right: 0.3rem; vertical-align: middle; background: var(--muted); }

/* ---------- Merk-Fach-Suche (Philipps Wunsch 25.10.): Schlichtes GET-
   Formular ueber der Liste - das Suchfeld im gewohnten Feld-Gesicht
   (Masse wie die Text-Felder), der Knopf kompakt daneben statt ueber die
   volle Breite (der Haus-Button ist breiten-gebeugt). ---------- */
form.merk-suche { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
form.merk-suche input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  background: #0c1014;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
}
form.merk-suche button[type="submit"] { width: auto; margin-top: 0; padding: 0.75rem 1rem; flex-shrink: 0; }
/* ---------- RSS-Chip-Klappe (Philipps Wunsch 25.10. abends): Die Chip-
   Auswahl ruht zugemacht in einer details-Klappe ueber der Timeline -
   Antippen der Leiste klappt die Quelle-Chips auf (Canon wie die Kennzahl-
   Aufklapper, kein JavaScript). Ohne Filter nennt die Leiste nur den
   Wunsch, mit Filter steht die gewaehlte Quelle samt Farbtupfer darauf
   und die Klappe bleibt offen (Plus/Minus wie die Volltext-Klappe). ---------- */
details.chip-klappe summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  user-select: none;
}
details.chip-klappe summary::-webkit-details-marker { display: none; }
details.chip-klappe summary::after { content: '+'; margin-left: 0.4rem; color: var(--muted); font-weight: 600; }
details.chip-klappe[open] summary::after { content: '\2212'; }
details.chip-klappe[open] summary { color: var(--text); }
details.chip-klappe .news-filter { margin-top: 0.5rem; }
/* ---------- Lese-Zeiger (Philipps Wunsch 25.10. nachts): Kleiner Knopf
   unter der Chip-Klappe - die Rueckkehr aus einer anderen Ansicht startet
   die Timeline sonst immer am Anfang. Er erscheint nur, wenn JavaScript
   eine gemerkte Stelle findet (sessionStorage, je Sitzung), Antippen
   springt dorthin und versteckt ihn wieder. Gesicht: das gelbe Hinweis-
   Kostuem der Cap-Hinweis-Karte, kompaktes Mass wie die Frage-Knoepfe. ---------- */
.lese-zeiger button {
  width: auto;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 400;
  border-radius: 8px;
  background: #2a2416;
  border: 1px solid #6e5b2b;
  color: #ffd884;
}

/* ---------- Regen-Tagesverlauf (Philipps Wunsch 27.10.; Vierer-Bloecke
   nach Philipps Wahl aus drei Vorschau-Varianten): Der Maximalwert der
   Kachel verschweigt den Lauf des Tages - sechs Vier-Stunden-Bloecke
   unterm Kachel-Kopf nennen ihre Spitze als lesbares Zahlwort, der
   laufende Block laeuft in Haus-Gelb. Ein Antippen oeffnet
   daswetter.com fuer Tonndorf (neuer Tab); das Label haelt Luft nach unten zu den
   Bloecken (Philipps Feinschliff-Abstandswunsch 27.10. nachts). ---------- */
.wetter-verlauf { flex: 0 0 100%; margin-top: 0.7rem; }
.wetter-verlauf-label { display: block; font-size: 0.68rem; color: var(--muted); margin-bottom: 0.65rem; }
.regen-verlauf-svg { display: block; width: 100%; height: auto; }
.regen-verlauf-link { display: block; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: rgba(255, 204, 0, 0.18); }
.regen-verlauf-link:active { opacity: 0.72; }

/* ---------- Ueberflogen-Grau (Philipps Wunsch 27.10., Feinschliff nach
   Philipps Live-Befund): Nicht die ganze Karte graut ein - die ueberflogene
   Karte graut nur ihre Ueberschrift ein, Weiss wird Grau (muted) mit sanftem
   Farb-Uebergang, der Rest der Karte bleibt unberuehrt. ---------- */
.news-item.ueberflogen .news-link { color: var(--muted); transition: color 0.3s ease; }

/* ---------- Merken ohne jede Bewegung (Philipps Klarstellung 27.10.
   nachts, vierte Runde): Der fetch-Abruf tauscht die Briefmarke ohne
   Reload ein - die Seite bewegt sich gar nicht. Der .merken-halter ist
   der Tausch-Halt fuer die frische Briefmarke; scroll-margin-top dient
   dem Fragment-Anker (No-JavaScript-Fallback) und haelt die Karte unter
   der klebenden Kopfleiste frei statt sie am Rand zu verkleben. ---------- */
.news-item { scroll-margin-top: 4.2rem; }
.merken-halter { display: inline-flex; align-items: center; }

/* ---------- Nach-oben-Knopf (Philipps Wunsch 27.10.): Schwebender gelber
   Pfeil unten rechts, erscheint erst beim Runterscrollen (Schwelle 600
   Pixel), ein Antippen saust sanft ganz nach oben. Ohne JavaScript
   bleibt er stumm versteckt (hidden). ---------- */
#nach-oben {
  position: fixed;
  right: 1.1rem;
  bottom: 1.2rem;
  z-index: 45;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background: #FFCC00;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#nach-oben svg { width: 1.35rem; height: 1.35rem; display: block; }
#nach-oben[hidden] { display: none; }

/* ---------- Seitwaerts-Dichtung (Philipps Befund 2.11.): Der Nach-oben-
   Pfeil verschwand auf dem Handy - eine Karte trieb das Layout breiter als
   den Handy-Bildschirm, der fix am rechten Rand geparkte Pfeil stand am Ende
   des zu breiten Gefueges, ausser Sicht der Mittelansicht (Philipps Beweis:
   Laptop-Browser zeigt ihn, Handy-Browser nicht; seitlich verschiebbar
   fand er ihn ganz rechts in der Ecke). overflow-x:clip am Wurzelelement
   nimmt jede seitliche Fahrt - clip statt hidden, weil clip kein Scroll-
   Gefaess bildet und die klebende Topbar klebend bleibt. Titel und Vorschau-
   texte brechen mit overflow-wrap:anywhere auch mitten im Wort, damit keine
   Karte das Layout mehr auseinanderreibt. ---------- */
html { overflow-x: clip; }
.news-link, .news-vorschau { overflow-wrap: anywhere; }

/* ---------- Quellen-Walze (Philipps Wunsch 31.10., TradingView-Vorbild):
   Lange auf der Filter-Leiste gedrueckt halten oeffnet die Walze - die
   Quellen rollen als Trommel unterm Finger, jede Rast klingelt haptisch
   (App-Bruecke klirr, Poestli 1.8), Loslassen waehlt die Quelle wie ihr
   Chip. Der gelbe Mittelrahmen ist die Rast-Markierung (Haus-Gelb wie der
   Briefmarken-Zustand), die Trommel kippt perspektivisch wie eine Walze.
   Ohne JavaScript bleibt die Walze stumm, die Chips bleiben das Gesicht. ---------- */
.walze-tipp { margin-top: 0.45rem; color: var(--muted); font-size: 0.72rem; }
.walze-huelle {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(16, 20, 24, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.walze-fenster {
  position: relative;
  width: min(22rem, 88vw);
  height: 15rem;
  overflow: hidden;
  perspective: 900px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.walze-mitte {
  position: absolute;
  left: 0;
  right: 0;
  top: 6rem;
  height: 3rem;
  border-top: 2px solid #FFCC00;
  border-bottom: 2px solid #FFCC00;
  background: rgba(255, 204, 0, 0.07);
  pointer-events: none;
}
.walze-trommel { position: absolute; left: 0; right: 0; top: 0; }
.walze-eintrag {
  position: absolute;
  left: 0;
  right: 0;
  top: 6rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  color: var(--text);
  backface-visibility: hidden;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.walze-hinweis { color: var(--muted); font-size: 0.78rem; }