/* PolyTicker: Aussehen der App (vorher inline in index.html) */
:root {
  --breite: 760px;
  color-scheme: light dark;      /* Scrollleisten und Auswahllisten passend zum Dunkelmodus */
  --bg: #f4f5fb; --surface: #ffffff; --text: #141622; --muted: #62677a;
  --line: #e1e3ef; --accent: #2b59c3; --up: #137a4b; --down: #b3261e;
  --chip: #eceef8; --flash: #efeaff; --land: #d9dcec; --land-rand: #f4f5fb; --warn: #8a6a00; --glanz: #7a4cc3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e14; --surface: #141722; --text: #eceef4; --muted: #969db1;
    --line: #252a3b; --accent: #7aa2ff; --up: #4cc38a; --down: #ff7a70;
    --chip: #1e2334; --flash: #2a2745; --land: #2a3150; --land-rand: #141722; --warn: #d9a400; --glanz: #b794ff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }      /* quer am iPhone kein aufgeblasener Text */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
header {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top);
}
/* Kopfzeile (Leo, 4.11.2026): links Rubriken-Knopf und Stand, in der Mitte der Name, rechts Briefing und Knöpfe. Die äußeren Spalten sind gleich breit, so steht der Name wirklich mittig */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 16px; max-width: 1680px; margin: 0 auto; }
.bar-links, .bar-rechts, .bar-knoepfe { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-links { gap: 10px; }
.bar-rechts { justify-content: flex-end; gap: 10px; }
.bar .ctl { flex: none; }
h1 { font-size: 21px; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
h1 span { color: var(--accent); }
#status { min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.err { color: var(--down); }
.ctl {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 6px;
  font: inherit; font-size: 12.5px; padding: 3px 9px; cursor: pointer; align-self: center; white-space: nowrap;
}
#stop:hover { color: var(--down); border-color: var(--down); }
#alerts.on { color: var(--text); border-color: var(--accent); }
.bye { max-width: 420px; margin: 30vh auto 0; padding: 0 16px; text-align: center; color: var(--muted); }

.ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); background: var(--surface); }
.ticker-track { display: inline-block; padding: 7px 0; animation: scroll linear infinite; font-size: 14px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  margin-right: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.ticker-item:hover { color: var(--accent); text-decoration: underline; }
.ticker-item b { font-weight: 600; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.filters { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; max-width: var(--breite); margin: 0 auto; scrollbar-width: none; }
.filters button {
  border: 0; background: var(--chip); color: var(--text); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.filters button.on { background: var(--text); color: var(--bg); }
.filters button.schalter { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.filters select.sortierung {
  flex: none; appearance: none; -webkit-appearance: none; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 5px 28px 5px 12px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
}
/* Ausgeklappte Liste mit festen Farben: „initial“ ergab im dunklen Bild weiße Schrift auf weißem Grund (Leo, 10.11.2026) */
.filters select.sortierung option { color: var(--text); background: var(--surface); }
.filters select.region.gewaehlt { border-color: var(--accent); }
.filters button.schalter.on { color: var(--text); border-color: var(--accent); background: transparent; }
.gruppe { border-left: 3px solid var(--accent); padding-left: 8px; margin-bottom: 10px; }
.gruppe article { margin-bottom: 6px; }
.gruppe-kopf { font-size: 12.5px; color: var(--muted); margin: 0 0 4px 2px; }
.gruppe-kopf b { color: var(--text); }
.gruppe-kopf .volatil {
  display: inline-block; padding: 0 7px; border-radius: 8px; font-size: 11.5px; color: var(--warn);
  border: 1px solid var(--warn); cursor: help;
}

main { max-width: var(--breite); margin: 0 auto; padding: 8px 16px 40px; }
.day { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 18px 0 6px; }
article {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; transition: background 2s;
}
article.new { background: var(--flash); }
/* Nach dem Neu-laden-Knopf: Die neue Karte leuchtet drei Sekunden (Leo, 10.11.2026) */
article.frisch { animation: frisch 3s ease-out; }
@keyframes frisch {
  0%, 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px color-mix(in srgb, var(--glanz) 50%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { article.frisch { animation: none; outline: 2px solid var(--accent); outline-offset: -1px; } }
/* Kopfzeile der Karte bricht um, statt über die Karte hinauszuragen (Handy: Zeit, Rubrik, Frist, Thema, Stern) */
.meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.cat { background: var(--chip); color: var(--text); border-radius: 4px; padding: 1px 6px; font-size: 11.5px; white-space: nowrap; }
.meta > .cat { white-space: normal; }     /* „Neue Konten: … · lange Antwort“ lief auf schmalen Handys aus der Karte */
.cat.done { background: var(--accent); color: var(--surface); }
article h2 .umsatz-tag { font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.cat.neu { background: #7a4cc3; color: #fff; font-weight: 600; }
.cat.gross { background: #b7791f; color: #fff; font-weight: 600; }     /* Große Positionen (positionen.py) */
.cat.trend { background: #7048e8; color: #fff; }
.cat.wackelt { background: #fff3bf; color: #5c4400; }
.cat.haelt { background: var(--chip); color: var(--up); }
.cat.gegen { background: #c2255c; color: #fff; font-weight: 600; }      /* Kauf gegen den Kurs (positionen.py) */
.cat.wechsel { background: #e8590c; color: #fff; font-weight: 600; }   /* Führungswechsel hervorgehoben (Leo, 1.11.2026) */
.cat.entschieden { background: var(--up); color: var(--surface); font-weight: 700; padding: 2px 8px; letter-spacing: 0.01em; }
article.entschieden { box-shadow: inset 3px 0 0 var(--up); }
.cat.top { background: var(--up); color: var(--surface); }
article { position: relative; }
.stern {
  margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 17px; line-height: 1;
  padding: 0 2px; cursor: pointer;
}
.meta .tpl + .stern, .meta .stern { order: 9; }
.stern:hover, .stern.an { color: #e0a800; }
.merk-menu {
  position: absolute; z-index: 5; right: 10px; top: 32px; width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.merk-menu b { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px 4px; }
.merk-menu button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 5px 6px; border-radius: 6px; cursor: pointer;
}
.merk-menu button:hover { background: var(--chip); }
.merk-menu button.an { color: #c99700; font-weight: 600; }
.merk-menu small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.merk-menu p { margin: 6px 4px 0; font-size: 12px; color: var(--muted); }
.rueckblick {
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 14px 12px; margin: 14px 0 8px;
}
.rb-kopf { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.rueckblick.zu { cursor: pointer; padding-bottom: 10px; }
.briefings .rueckblick + .rueckblick { margin-top: 16px; }
.rueckblick.zu .rb-kopf h2 { font-size: 15px; }
@media (hover: hover) { .rueckblick.zu:hover { border-color: var(--accent); } }
.rb-mehr { font: inherit; font-size: 12.5px; color: var(--accent); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.rb-mehr:hover { text-decoration: underline; }
.rueckblick li.rb-mehr-zeile { display: block; padding-left: 104px; }
.rb-kopf h2 { font-size: 16.5px; margin: 0; }
.rb-kopf span { color: var(--muted); font-size: 12.5px; margin-right: auto; }
.rueckblick h3 {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; font-weight: 600;
}
.rueckblick ol { list-style: none; margin: 0; padding: 0; }
.rueckblick li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; }
.rueckblick time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rueckblick small { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-link {
  font: inherit; font-size: 14px; color: var(--text); background: none; border: 0; padding: 0; text-align: left;
  cursor: pointer; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) { .rb-link:hover { color: var(--accent); text-decoration: underline; } }
.rb-leer { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
@media (max-width: 560px) {
  .rueckblick li { grid-template-columns: 86px minmax(0, 1fr); }
  .rueckblick li small { grid-column: 2; }
  .rueckblick li.rb-mehr-zeile { padding-left: 94px; }
}
.rang-kopf h2 { font-size: 17px; margin: 14px 0 2px; }
.rang-kopf p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.rangliste { list-style: none; margin: 0; padding: 0; }
.rangliste li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 90px auto auto; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px;
}
.rangliste li.rest { opacity: 0.7; }
.rang-nr { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.rang-name { min-width: 0; }
.rang-name b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-name span { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-kurve svg { display: block; width: 90px; height: 26px; }
.rang-zahl { font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rang-zahl small { display: block; font-size: 12px; }
.rang-link {
  font: inherit; font-size: 12.5px; color: var(--accent); background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
@media (max-width: 560px) {
  .rangliste li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .rang-kurve { display: none; }
  .rang-link { grid-column: 2 / -1; justify-self: start; }
}
.meta .tpl { margin-left: auto; font-size: 11px; }
h2 { font-size: 16.5px; margin: 5px 0 3px; line-height: 1.3; }
.umsatz {
  margin: 0 0 5px; font-size: 11.5px; line-height: 1.35; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
article p { margin: 0; color: var(--text); opacity: 0.88; font-size: 15px; }
/* Zweiter Absatz der Meldung: ein bis zwei Sätze aus Polymarkets Hintergrund (ki.hintergrund), ruhiger gesetzt */
article p.hintergrund { margin-top: 6px; font-size: 14px; opacity: 0.75; }
/* Auslöser: kurze farbige Zeile; grün = viele Konten (eher Nachricht), gelb = ein Konto oder kaum Handel */
article p.ausloeser, .ganzer-text p.ausloeser {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 8px; font-size: 13.5px;
  background: var(--chip); border-left: 3px solid var(--muted);
}
article p.ausloeser b, .ganzer-text p.ausloeser b { font-weight: 600; margin-right: 4px; }
.position-tx { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
article p.ausloeser.breit { border-left-color: var(--up); }
article p.ausloeser.gemischt { border-left-color: var(--accent); }
article p.ausloeser.duenn { border-left-color: #d9a400; }
.hintergrund-quelle { font-weight: 600; }
/* Bild zwischen Überschrift und Text. Das Grundmaß gilt im Fenster (daten-vorspann), auf der Karte setzt „article > .seite“ das große Bild */
.seite { --bild: 120px; display: flex; gap: 8px; align-items: stretch; height: 116px; margin: 12px 0 16px; }
/* Marke in der Ecke der Landkarte: anklickbar, dahinter steckt mehr */
.karte { position: relative; }
.klick-marke {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: var(--accent); color: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.klick-marke svg { width: 13px; height: 13px; }
@media (hover: hover) { .karte:hover .klick-marke { transform: scale(1.12); } }
.kandidaten { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.kandidaten span {
  display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px;
}
.kandidaten ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.kandidaten li {
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kandidaten li b { font-weight: 500; color: var(--text); }
.kandidaten li.eigener { border-color: var(--accent); }
.kandidaten li.eigener b { font-weight: 650; }
.kandidaten li.mehr { border-style: dashed; }
.kandidaten small.vorher { opacity: 0.85; }
.kandidaten small.vorher.up { color: var(--up); }
.kandidaten small.vorher.down { color: var(--down); }
.kontext { margin: 8px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.kontext span {
  display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px;
}
.kontext ul { margin: 0; padding-left: 1.15em; }
.kontext-folgt { margin: 0; font-style: italic; }
.kontext-voll { margin: 0; }
.kontext-voll li + li { margin-top: 4px; }
.kontext-englisch { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; }
.kontext li { margin: 1px 0; }
/* Daten der Meldung (Umsatz, Feld, Hintergrund, Artikel, Chart, Quellen): in der Karte nur eine Zeile, die wie ein
   Klick auf die Karte ein eigenes Fenster öffnet; dahinter wird die Seite weichgezeichnet (dialog::backdrop) */
.daten-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 0 0;
  border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; cursor: pointer;
  text-align: left;
}
.daten-titel { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.daten-kopf::after { content: "›"; margin-left: auto; color: var(--accent); font-size: 18px; line-height: 1; }
.daten-kopf:hover .daten-titel { color: var(--text); }
.daten-weitere {
  display: inline-block; margin-top: 8px; font: inherit; font-size: 12px; color: var(--accent); white-space: nowrap;
  padding: 2px 9px; border-radius: 10px; border: 1px solid var(--accent); background: none; cursor: pointer;
}
@media (hover: hover) { .daten-weitere:hover { background: var(--chip); } }
/* Aufgeklappte übrige Meldungen einer Gruppe, unter der vorderen Karte */
.gruppe-weitere { margin: 0 0 6px 12px; }
/* Kommentare auf Polymarket in der Detailseite */
.kommentare h4 { margin: 10px 0 4px; font-size: 13px; }
.kommentare ul { margin: 0; padding-left: 18px; }
.kommentare li { margin: 4px 0; font-size: 14px; }
.kommentare li small { color: var(--muted); }
.kommentare-hinweis { margin: 0; font-size: 12.5px; color: var(--muted); }
/* Meldung, die nur im Datenfenster steht: Kopfzeile, Bild und Text oben im Fenster */
.daten-vorspann { padding-top: 10px; }
.daten-vorspann .meta { margin-bottom: 8px; }
.daten-vorspann .text p { margin: 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 560px) {
  article > .text > p:not(.neuer-stand):not(.hintergrund):not(.nur-fenster) { display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden; }
}
.daten-dlg {
  width: min(92vw, 640px); max-height: 86vh; max-height: 86dvh; border: 1px solid var(--line); border-radius: 12px; padding: 0;
  background: var(--surface); color: var(--text); overflow: hidden;
}
.daten-dlg[open] { display: flex; flex-direction: column; }
/* Safari auf dem iPhone: Ohne flex und min-height 0 wächst der Bereich mit dem Text und das Fenster schneidet ihn
   ab, statt ihn scrollen zu lassen (Leo, 1.11.2026: auf dem Handy nicht die ganze Meldung) */
.daten-dlg > .lese-leiste { flex: none; }
.daten-buehne { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain; padding: 4px 18px 18px; touch-action: pan-y pinch-zoom; }
.daten-buehne:focus { outline: none; }      /* Fokus nur für die Pfeiltasten (app.js, datenFenster) */
/* Die Seite dahinter bleibt stehen (Leo, 3.11.2026): Ziehen auf der Leiste oder neben dem Fenster bewegte sonst den Feed.
   Gescrollt wird nur in der Bühne, die Leiste gehört dem Griff (griffAnbauen) */
.daten-dlg:modal, dialog:modal::backdrop { touch-action: none; }
html:has(dialog:modal) { overflow: hidden; }
.daten-buehne p { margin: 0; }
@media (max-width: 560px) {
  .daten-dlg { width: 100vw; max-width: 100vw; max-height: 88vh; max-height: 88dvh; margin: auto 0 0;
               border-radius: 14px 14px 0 0; }     /* dvh: sichtbare Höhe ohne Safaris Leisten */
  .daten-buehne { padding: 4px 16px calc(18px + env(safe-area-inset-bottom)); }
  .daten-dlg:modal > .lese-leiste { position: relative; padding-top: 16px; }
  .daten-dlg:modal > .lese-leiste::before {
    content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line);
  }
}
.daten-inhalt > .umsatz { margin: 8px 0 0; }
.daten-buehne .spark { height: 150px; }
.daten-buehne .moves { border-top: 0; margin-top: 4px; }
.daten-teil, .daten-inhalt > .lesen, .daten-inhalt > .kontext, .daten-inhalt > .kandidaten {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
}
.daten-teil { font-size: 14px; }
.daten-teil h3 {
  margin: 0 0 6px; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.daten-teil p { margin: 0 0 6px; line-height: 1.45; }
.daten-teil a { color: var(--accent); text-decoration: none; font-size: 13px; }
.feld-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.feld-liste li {
  display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 5.5em; align-items: center; gap: 8px;
  font-size: 13px;
}
.feld-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.feld-liste li.eigener .feld-name { font-weight: 650; }
.feld-balken { position: relative; height: 8px; border-radius: 4px; background: var(--chip); }
.feld-balken .jetzt { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); opacity: 0.6; }
.feld-liste li.eigener .feld-balken .jetzt { background: var(--accent); opacity: 1; }
.feld-balken .vorher { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: 0.55; }
.feld-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feld-zahl small { font-size: 11.5px; }
.markt dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: 13px; }
.markt dt { color: var(--muted); }
.markt dd { margin: 0; font-variant-numeric: tabular-nums; }
.lager { margin-top: 10px; font-size: 13px; }
.lager-titel { display: block; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.lager p { margin: 0 0 3px; line-height: 1.4; }
.lager .lager-hinweis { color: var(--muted); font-size: 12px; }
.markt-warnung {
  margin-top: 8px !important; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--down); color: var(--text); background: color-mix(in srgb, var(--down) 10%, transparent);
}
/* Zeitleiste bis zur Entscheidung */
.zeit { border-top: 0; padding-top: 4px; margin-top: 8px; }
.zeit-kopf { font-size: 14px; }
.zeit-kopf b { font-size: 16px; }
.zeit-balken { position: relative; height: 10px; margin: 10px 0 6px; border-radius: 5px; background: var(--chip); }
.zeit-gelaufen { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); opacity: 0.55; }
.zeit-marke { position: absolute; transform: translateX(-50%); }
.zeit-marke.heute {
  top: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface);
}
.zeit-marke.meldung { top: -5px; bottom: -5px; width: 2px; background: var(--text); }
.zeit-fuss { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.zeit-legende { margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: pre; }
.zeit-hinweis { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cat.frist { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.verlauf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.verlauf li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; font-size: 13px; align-items: start; }
.verlauf time { color: var(--muted); font-size: 12px; padding-top: 6px; }
/* Eine Zeile je Bewegung: Art klein darüber, darunter Markt links und Kurs rechts */
.verlauf-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; width: 100%; padding: 4px 6px;
  border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .verlauf-link:hover { background: var(--chip); } }
.verlauf-art {
  grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.verlauf-markt { min-width: 0; overflow-wrap: anywhere; }
.verlauf-kurs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.person-kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.person-kopf img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; object-position: center 20%; }
.person-kopf b { display: block; }
.person-kopf .rolle { display: block; font-size: 12.5px; color: var(--muted); }
.person-auch { font-size: 13px; color: var(--muted); }
.moves { margin-top: 8px; display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.lesen { margin: 8px 0 0; font-size: 13.5px; line-height: 1.35; }
.lesen-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.lesen-kopf > span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lesen-mehr {
  border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12.5px; color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.lesen-mehr:hover { text-decoration: underline; }
.lesen ul { margin: 0; padding-left: 1.15em; color: var(--muted); }
.lesen li { margin: 2px 0; }
.lesen a { color: var(--text); text-decoration: none; }
@media (hover: hover) { .lesen a:hover { color: var(--accent); text-decoration: underline; } }
.lesen small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lesen-leer { margin: 2px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }
.trigger { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.caption { text-transform: none; letter-spacing: 0; font-size: 12px; }
.key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; vertical-align: middle; margin-right: 4px; }
.key-neu { background: var(--accent); }
.key-alt { background: var(--muted); }
.tip b + b { margin-left: 2px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px;
  padding: 2px 8px; cursor: pointer;
}
.seg button.on { background: var(--chip); color: var(--text); }
.spark { position: relative; height: 72px; margin: 2px 0 4px; touch-action: pan-y; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .msg { font-size: 12px; color: var(--muted); padding-top: 26px; text-align: center; }
.spark text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.spark text.val { fill: var(--text); font-size: 11px; font-weight: 600; }
.tip {
  position: absolute; top: -6px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  background: var(--text); color: var(--bg); border-radius: 6px; padding: 3px 7px; font-size: 11.5px;
}
.tip b { font-weight: 600; margin-right: 6px; }
.move { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: 13px; color: var(--muted); }
.move .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move .num { font-variant-numeric: tabular-nums; color: var(--text); }
.up { color: var(--up); } .down { color: var(--down); }
.thumb {
  position: relative; overflow: hidden; flex: 0 0 var(--bild); width: var(--bild); height: 100%;
  border-radius: 10px; background: var(--chip);
}
.thumb-hinten {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(14px) brightness(0.75); transform: scale(1.2);
}
.thumb-bild { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.thumb.ganz { background: #fff; }                     /* Logos: auf Weiß, ohne Unschärfe */
.thumb.ganz .thumb-hinten { display: none; }
.thumb.ganz .thumb-bild { box-sizing: border-box; padding: 6px; }
.karte {
  flex: 0 0 180px; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: var(--surface);
}
.karte svg { display: block; width: 100%; flex: 1; min-height: 0; height: auto; }
.seite > .karte:only-child { flex-basis: 260px; }
.karte .land { fill: var(--land); stroke: var(--land-rand); stroke-width: 0.6; }
.karte .land.ziel { fill: var(--accent); fill-opacity: 0.55; stroke: var(--accent); }
.karte .punkt { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.karte figcaption {
  padding: 3px 6px 4px; font-size: 11px; line-height: 1.25; text-align: center; color: var(--muted);
  border-top: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte { cursor: zoom-in; }
/* Bilanz eines entschiedenen Marktes in den Details (bilanzKachel) */
.kurs-kachel {
  display: flex; flex-direction: column; margin: 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface);
}
.kurs-kachel figcaption {
  padding: 3px 6px 4px; font-size: 11px; line-height: 1.25; text-align: center; color: var(--muted);
  border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.karte:focus-visible { border-color: var(--accent); outline: none; }
@media (hover: hover) { .karte:hover { border-color: var(--accent); } }
.karte-gross {
  width: min(92vw, 820px); padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); overflow: hidden;
}
.karte-gross::backdrop { background: rgba(0, 0, 0, 0.55); }
.karte-leiste { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.karte-leiste b { margin-right: auto; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-leiste .ctl { min-width: 30px; font-size: 14px; color: var(--text); }
/* Quer am iPhone wäre sie sonst höher als der Bildschirm, und das Fenster schneidet ab (kartenSvg folgt der Höhe) */
.karte-flaeche svg { display: block; width: 100%; height: auto; aspect-ratio: 1.6; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }
.karte-flaeche .land { fill: var(--land); stroke: var(--land-rand); stroke-width: 0.8; }
.karte-flaeche .land.ziel { fill: var(--accent); fill-opacity: 0.55; stroke: var(--accent); }
.karte-flaeche .punkt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.karte-flaeche .ortsname { fill: var(--text); stroke: var(--surface); paint-order: stroke; font-weight: 600; }
/* Feste Höhe: Die Vorschau wird beim Schieben länger oder kürzer, sonst wandert das ganze Fenster mit */
.filter-dlg {
  width: min(96vw, 960px); height: min(92vh, 860px); padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); overflow: hidden;
}
.filter-dlg[open] { display: flex; flex-direction: column; }
.filter-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.filter-kopf { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.filter-kopf b { margin-right: auto; font-size: 15px; }
.filter-kopf .ctl.haupt { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.filter-kopf .ctl:disabled { opacity: 0.5; cursor: default; }
.filter-inhalt { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); min-height: 0; flex: 1; }
.regler { padding: 10px 14px; border-right: 1px solid var(--line); overflow-y: auto; }
.regler h3, .vorschau h3 {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; font-weight: 600;
}
.regler label { display: block; margin: 8px 0 10px; font-size: 13px; }
.regler .zeile { display: flex; justify-content: space-between; gap: 8px; }
.regler .wert { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.regler .wert.geaendert { color: var(--accent); }
.regler input[type=range] { width: 100%; accent-color: var(--accent); margin: 4px 0 0; }
.regler input[type=checkbox] { accent-color: var(--accent); margin-right: 6px; }
.vorschau { padding: 10px 14px; overflow-y: auto; }
.vorschau .summe { font-size: 14px; margin: 4px 0 8px; }
.vorschau .hinweis { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.vorschau ol { list-style: none; margin: 0; padding: 0; }
.vorschau li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
               padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.vorschau li time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vorschau li small { display: block; color: var(--muted); font-size: 12px; }
.vorschau li.weg span.t { text-decoration: line-through; color: var(--muted); }
.marke { font-size: 11px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; background: var(--chip); color: var(--muted); }
.marke.neu { background: var(--accent); color: var(--surface); }
.marke.weg { background: var(--down); color: var(--surface); }
@media (max-width: 700px) {
  .filter-inhalt { grid-template-columns: 1fr; overflow-y: auto; }
  .regler { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .vorschau { overflow: visible; }
}
.karte-quelle { margin: 0; padding: 4px 10px 6px; font-size: 11px; color: var(--muted); text-align: right; }
@media (max-width: 480px) {
  .seite { --bild: 92px; height: 100px; }
  .karte { flex-basis: 120px; }
  /* Bild und Landkarte dürfen schrumpfen */
  .seite { min-width: 0; }
  .seite > * { min-width: 0; flex-shrink: 1; }
  .seite > .karte { flex: 1 1 96px; }
}
.foot { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 6px; }
.src { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.credit { font-size: 11px; color: var(--muted); text-decoration: none; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
a.credit:hover { text-decoration: underline; }
.empty { color: var(--muted); text-align: center; padding: 48px 16px; }
.handy-dlg {
  width: min(92vw, 520px); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  background: var(--surface); color: var(--text);
}
.handy-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.handy-dlg h2 { font-size: 17px; margin: 0 0 8px; }
.handy-dlg ol { margin: 0 0 10px; padding-left: 1.3em; line-height: 1.5; }
.handy-dlg li { margin: 4px 0; }
.handy-url { display: inline-block; margin: 4px 0; padding: 3px 8px; border-radius: 6px; background: var(--chip); font-size: 15px;
              color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.handy-dlg .hinweis { font-size: 12.5px; color: var(--muted); }

/* Suche, Themenseite, Ungelesen, Sprungziel */
.suchleiste { max-width: var(--breite); margin: 0 auto; padding: 0 16px 8px; }
#suche {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.thema-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 14px; color: var(--muted);
}
.thema-kopf b { color: var(--text); font-size: 16px; }
.thema-kopf .ctl { margin-left: auto; }
.meta .thema-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer;
  max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
article.ungelesen .meta-fakten > span:first-child::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin-right: 5px; vertical-align: 1px;
}
article, .rueckblick { scroll-margin-top: calc(var(--kopf, 140px) + 12px); }   /* --kopf misst app.js (kopfHoehe) */
article.ziel { outline: 2px solid var(--accent); outline-offset: 2px; }
.move .jetzt { color: var(--muted); font-weight: 400; }
.zeitgleich {
  display: inline-block; font-size: 11px; letter-spacing: 0.03em; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); vertical-align: 1px;
}
.lesen .gefunden { display: block; font-size: 11px; color: var(--muted); opacity: 0.8; }
.suche-kasten {
  margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip);
  font-size: 12px; color: var(--muted);
}
.suche-titel { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.suche-kasten ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.suche-kasten li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.suche-kasten code { font: inherit; color: var(--text); overflow-wrap: anywhere; }
.suche-sprache { font-weight: 600; }
.suche-zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.suche-kasten p { margin: 6px 0 0; font-size: 11.5px; }
.nennt {
  display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted); vertical-align: 1px;
}
.offen { margin-top: 14px; font-size: 13px; }
.offen summary { cursor: pointer; color: var(--muted); }
.offen ol { margin: 6px 0 0; padding-left: 1.4em; }
.offen li { margin: 3px 0; }
.offen small { color: var(--muted); }

/* Desktop: breitere Spalte, Filter brechen um statt abgeschnitten zu werden */
@media (min-width: 1000px), (min-width: 640px) and (orientation: landscape) {
  .filters { flex-wrap: wrap; overflow-x: visible; }
}

/* Leseansicht: Klick auf eine Meldungskarte, Artikel zum Thema nacheinander */
article.klickbar { cursor: pointer; }
article.klickbar :is(a, button, input, select, .spark) { cursor: auto; }
article.klickbar :is(a, button) { cursor: pointer; }
.lese-dlg {
  width: min(92vw, 560px); border: 1px solid var(--line); border-radius: 12px; padding: 0;
  background: var(--surface); color: var(--text);
}
.lese-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
/* Alles Vergrößerte (Karte, Leseansicht, Filter, iPhone): die Seite dahinter weichzeichnen */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lese-leiste {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line);
}
.lese-leiste b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }      /* ganz zu lesen (Leo, 5.11.2026): „Kurs dafür, dass …“ passt nicht in eine Zeile */
.lese-zaehler { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lese-buehne { padding: 18px 20px 6px; min-height: 150px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lese-quelle { font-size: 12.5px; color: var(--muted); }
.lese-buehne h3 { font-size: 19px; line-height: 1.35; margin: 8px 0 16px; }
.lese-oeffnen {
  display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--surface);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.lese-leer { color: var(--muted); font-size: 14px; }
.lese-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 4px; }
.lese-fuss[hidden] { display: none; }
.lese-pfeil { min-width: 44px; min-height: 36px; font-size: 20px; line-height: 1; color: var(--text); }
.lese-pfeil:disabled { opacity: 0.35; cursor: default; }
.lese-punkte { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lese-punkte span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.lese-punkte span.an { background: var(--accent); }
.lese-hinweis { margin: 4px 16px calc(14px + env(safe-area-inset-bottom)); font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) {
  .lese-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .lese-buehne h3 { font-size: 18px; }
}

/* Drei Spalten am Desktop: links Rubriken und Suche, rechts die Details zur Meldung */
.seite-rechts { display: none; }
.links-schleier { display: none; }
.menue-knopf { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; min-width: 0; white-space: nowrap; }
#menue-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#menue-name:empty { display: none; }

/* Schmaler als 1280 px (Handy, Tablet, kleines Fenster): Rubriken und Suche klappen von links auf (Leo, 3.11.2026).
   Zugeklappt sind beide wirklich weg: Die Schublade blieb sonst in der Tab-Reihenfolge und für VoiceOver erreichbar, und Safari 26 tönt
   seine Leisten vermutlich nach dem durchsichtigen Schleier. Beim Wisch zeigt app.js sie direkt am Element. */
@media (max-width: 1279.98px) {
  .seite-links {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(82vw, 320px); box-sizing: border-box;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; transform: translateX(-102%); visibility: hidden;
    transition: transform 0.28s var(--feder), visibility 0s linear 0.28s;
  }
  body.links-offen .seite-links { transform: none; visibility: visible; transition: transform 0.28s var(--feder); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3); }
  .links-schleier {
    display: none; position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease; transition: opacity 0.28s ease, display 0.28s allow-discrete;
  }
  body.links-offen .links-schleier { display: block; opacity: 1; pointer-events: auto; }
  @starting-style { body.links-offen .links-schleier { opacity: 0; } }
}
/* Waagerecht entscheidet das Skript (Wisch), senkrecht scrollt und zoomt der Browser wie immer; so muss kein Listener etwas blockieren.
   Hineingezoomt gehört alles dem Browser, sonst ließe sich der Ausschnitt nicht verschieben (app.js setzt gezoomt) */
main, header, .seite-links { touch-action: pan-y pinch-zoom; }
.links-schleier { touch-action: none; }
html.gezoomt main, html.gezoomt header, html.gezoomt .seite-links { touch-action: auto; }
/* Eine Liste in der Seitenleiste, am Handy wie am Desktop */
.seite-links .suchleiste { max-width: none; margin: 0; padding: 0 0 10px; }
.seite-links .filters {
  display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible;
  padding: 0; margin: 0; max-width: none; gap: 2px;
}
.seite-links .filters button { text-align: left; border-radius: 8px; padding: 6px 10px; background: transparent; }
@media (hover: hover) { .seite-links .filters button:hover { background: var(--chip); } }
.seite-links .filters button.on { background: var(--text); color: var(--bg); }
.seite-links .filters button.schalter { border: 1px solid var(--line); margin-bottom: 4px; }
.seite-links .filters button.schalter.on { background: transparent; color: var(--text); border-color: var(--accent); }
.seite-links .filters select.sortierung { margin-bottom: 4px; }
.seite-links .themen:not(:empty) { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.seite-links .filter-titel { padding: 0 10px 4px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.seite-links .themen button { display: flex; justify-content: space-between; gap: 8px; border: 0; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; }
.seite-links .themen button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite-links .themen small { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.seite-links .filters button.trenner { margin-top: 14px; position: relative; }
.seite-links .filters button.trenner::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -8px; border-top: 1px solid var(--line);
}
/* Feed höchstens 640 px, rund 83 Zeichen je Zeile (Leo, 1.11.2026: „schmaler“), die Details bekommen den Rest */
@media (min-width: 1280px) {
  .spalten {
    display: grid; grid-template-columns: 200px minmax(0, 640px) minmax(400px, 1fr); gap: 24px;
    justify-content: center; max-width: 1680px; margin: 0 auto; padding: 0 16px;
  }
  .seite-links {
    display: block; position: sticky; top: calc(var(--kopf-jetzt, var(--kopf, 100px)) + 12px); align-self: start;
    max-height: calc(100vh - var(--kopf-jetzt, var(--kopf, 100px)) - 24px); transition: top 0.2s ease; overflow-y: auto; scrollbar-width: thin; padding-top: 14px;
  }
}
/* iPad quer, Pro 12,9 hoch, Fenster ab 1000 px: Feed und Details nebeneinander, die Rubriken bleiben Schublade (Leo, 3.11.2026).
   Unter 1000 fiele der Feed unter 450 px, drei Spalten ließen bei 1133 nur rund 470 */
@media (min-width: 1000px) and (max-width: 1279.98px), (min-width: 640px) and (max-width: 1279.98px) and (orientation: landscape) {
  .spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 0 auto; padding: 0 16px; }
}
@media (min-width: 1000px), (min-width: 640px) and (orientation: landscape) {
  main { max-width: none; margin: 0; padding: 8px 0 40px; }
  .seite-rechts {
    display: block; position: sticky; top: calc(var(--kopf-jetzt, var(--kopf, 100px)) + 12px); align-self: start;
    max-height: calc(100vh - var(--kopf-jetzt, var(--kopf, 100px)) - 24px); transition: top 0.2s ease; overflow-y: auto; scrollbar-width: thin; padding-top: 14px;
  }
}
/* Rechte Spalte: Details zur Meldung, solange keine offen ist, was bald entschieden wird */
.rechts-titel { margin: 12px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rechts-hinweis { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.termine { list-style: none; margin: 0 0 20px; padding: 0; }
.termine li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 4px 0; align-items: baseline; }
.termine time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.termin-link { font: inherit; font-size: 13.5px; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
@media (hover: hover) { .termin-link:hover { color: var(--accent); text-decoration: underline; } }
.rechts-schliessen { float: right; position: sticky; top: 0; z-index: 1; margin-left: 8px; }
.seite-rechts.ruhe:not(:has(dialog[open])) { border-color: transparent; background: none; }
/* Geschlossene Spalte (Leo, 3.11.2026: „geiler und mehr eye catching“): leuchtender Name, dahinter zwei Lichter, darunter der Globus. Die Höhe rechnet mit dem
   ganzen Kopf: Blendet er beim Scrollen aus, soll die Kugel nicht mitspringen */
.seite-rechts.ruhe:not(:has(dialog[open])) { padding-inline: 4px; scrollbar-gutter: auto; }
.rechts-ruhe {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  min-height: calc(100vh - var(--kopf, 100px) - 56px); border-radius: 12px;
}
/* Name und Knopf stehen nebeneinander, auch in der schmalsten Spalte (Leo, 4.11.2026) */
.rechts-ruhe::before, .rechts-ruhe::after {
  content: ""; position: absolute; z-index: -2; left: 3%; top: 12%; width: 66%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 42%, transparent), transparent);
  animation: ruhe-atmen 7s ease-in-out infinite alternate;
}
.rechts-ruhe::after {
  left: auto; right: 3%; top: 26%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glanz) 38%, transparent), transparent);
  animation-delay: -3.5s;
}
@keyframes ruhe-atmen { from { opacity: 0.5; transform: scale(0.9); } to { opacity: 1; transform: scale(1.1); } }
@keyframes ruhe-auf { from { opacity: 0; transform: translateY(10px); } }
.rechts-oeffnen {
  flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650; color: var(--surface); background: linear-gradient(100deg, var(--accent), var(--glanz));
  box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rechts-oeffnen::after { content: "→"; transition: transform 0.15s ease; }
.rechts-oeffnen:active { transform: scale(0.98); }
.rechts-oeffnen:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.bar .rechts-oeffnen { flex: none; gap: 6px; min-height: 32px; padding: 4px 14px; font-size: 13px; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (hover: hover) {
  .rechts-oeffnen:hover { transform: translateY(-1px); box-shadow: 0 7px 22px color-mix(in srgb, var(--glanz) 55%, transparent); }
  .rechts-oeffnen:hover::after { transform: translateX(4px); }
}
/* Globus (Leo, 3.11.2026): Der Canvas füllt seinen Kasten und bestimmt dessen Größe nicht mit, die Info-Fläche darunter ist fest hoch, die Kugel springt nie.
   Nur der Canvas gehört dem Ziehen. Fehlt globus.json, bleiben Name und Knopf in der Mitte stehen */
.globus-flaeche { position: relative; flex: 1 1 0; min-height: 220px; animation: ruhe-auf 0.7s 0.1s ease-out backwards; }
.globus-leinwand {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* Hineingezoomt gehört der Finger auch hier dem Browser, sonst füllt die Kugel den Ausschnitt und nichts lässt sich mehr verschieben. Er übernimmt mit pointercancel, ein Tipp wählt weiter aus */
html.gezoomt .globus-leinwand { touch-action: auto; }
.globus-leinwand.ziel { cursor: pointer; }
.globus-leinwand.zieht { cursor: grabbing; }
.globus-leinwand:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.globus-info {
  flex: none; display: flex; flex-direction: column; gap: 3px; height: 144px; padding: 9px 14px; overflow: hidden; font-size: 13px; line-height: 1.35;
  border: 1px solid var(--rahmen); border-radius: 14px; background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: ruhe-auf 0.6s 0.2s ease-out backwards;
}
.globus-info[hidden] { display: none; }
/* Zoom: am Finger 44 px (unten, any-pointer: coarse), die Fläche bleibt position: relative */
.globus-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.globus-zoom button {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--rahmen); border-radius: 10px; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.globus-zoom button:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) { .globus-zoom button:hover:not(:disabled) { border-color: var(--glanz); } }
/* Unter 1000 px: Leiste unten schaltet zwischen Meldungen und Globus um, wie früher beim Live-Feed (Leo, 4.11.2026). Ab 1000 px steht der Globus in der rechten Spalte.
   In der Ansicht Globus füllt die Fläche die Höhe zwischen Kopf und Leiste, ohne Seitenscrollen: Kugel oben, Info darunter, am Handy quer nebeneinander */
.umschalter, .globus-feld { display: none; }
@media (max-width: 999.98px) and (orientation: portrait), (max-width: 639.98px) {
  :root { --leiste: 58px; }
  body { padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom)); }
  .umschalter {
    display: flex; justify-content: center; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); background: var(--surface);
    border-top: 1px solid var(--rahmen); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  }
  .umschalter button {
    flex: 1; max-width: 240px; min-height: 45px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px;
    background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .umschalter button.an { background: var(--verlauf); color: var(--surface); }
  body[data-ansicht="globus"] #feed, body[data-ansicht="globus"] .menue-knopf, body[data-ansicht="globus"] #links { display: none; }
  body[data-ansicht="globus"] .globus-feld {
    display: flex; flex-direction: column; gap: 8px; max-width: var(--breite); margin: 0 auto;
    padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    height: calc(100vh - var(--kopf, 100px) - var(--leiste)); height: calc(100dvh - var(--kopf, 100px) - var(--leiste) - env(safe-area-inset-bottom));
  }
  .globus-feld > .globus-info { margin-top: 0; }
  .globus-feld .globus-legende { white-space: normal; }      /* schmal in zwei Zeilen statt abgeschnitten */
}
.globus-info.zu { display: none; }
.globus-griff[hidden] { display: none; }
.globus-info:empty { visibility: hidden; }      /* bis globus.json da ist, bleibt nur der Platz: So springt die Kugel nicht */
.globus-summe { margin: 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.globus-laender { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 4px; }
.globus-land {
  display: inline-flex; align-items: baseline; gap: 4px; max-width: 170px; padding: 2px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--glanz) 44%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--glanz) 16%, transparent);
}
.globus-land span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.globus-land b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.globus-legende { margin: auto 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); opacity: 0.85; }
.globus-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.globus-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 700; }
.globus-zu { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; }
.globus-zahlen { margin: 0; min-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.globus-meldungen { flex: 1 1 auto; min-height: 0; list-style: none; margin: 2px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent; }
.globus-meldung {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; align-items: baseline; width: 100%; padding: 3px 0; font: inherit; font-size: 13px; line-height: 1.35;
  text-align: left; color: var(--accent); background: none; border: 0; cursor: pointer;
}
.globus-meldung time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
a.globus-meldung { text-decoration: none; }
.globus-meldung span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (hover: hover) {
  .globus-land:hover { border-color: var(--glanz); background: color-mix(in srgb, var(--glanz) 28%, transparent); }
  .globus-zu:hover { color: var(--text); background: var(--chip); }
  .globus-meldung:hover span { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  .rechts-ruhe::before, .rechts-ruhe::after, .globus-flaeche, .globus-info { animation: none; }
  .rechts-oeffnen, .rechts-oeffnen::after { transition: none; }
}
.rechts-statistik { padding-bottom: 12px; }
.rechts-statistik .rb-stunden-saeulen { height: 64px; }
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; }
.stat-kachel, .stat-zeile, .stat-thema, .stat-bilanz { font: inherit; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; width: 100%; }
.stat-kachel { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.stat-kachel-titel, .stat-kachel small, .stat-zeile small, .stat-thema small, .stat-bilanz small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-kachel b { font-size: 20px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-themen { display: grid; gap: 2px; }
.stat-thema { display: grid; grid-template-columns: minmax(0, 1fr) 34% 24px; gap: 8px; align-items: center; padding: 3px 0; font-size: 13.5px; }
.stat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.stat-balken { display: block; min-width: 2px; height: 8px; border-radius: 0 4px 4px 0; background: var(--accent); }
.stat-thema small { text-align: right; }
.stat-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
.stat-liste { list-style: none; margin: 0; padding: 0; }
.stat-zeile { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 4px 0; }
.stat-zeile b { grid-row: span 2; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-zeile small { grid-column: 2; }
.stat-bilanz { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; font-size: 13.5px; }
.stat-bilanz b { grid-row: span 2; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .stat-kachel:hover { border-color: var(--accent); }
  .stat-zeile:hover .stat-name, .stat-thema:hover .stat-name, .stat-bilanz:hover span { color: var(--accent); }
}
.seite-rechts:has(dialog[open]) { overflow: hidden; }
.seite-rechts:has(dialog[open]) .rechts-leer { display: none; }
.daten-dlg.seitlich {
  position: static; inset: auto; width: 100%; max-width: none; box-sizing: border-box; margin: 0;
  max-height: calc(100vh - var(--kopf-jetzt, var(--kopf, 100px)) - 24px);
}
article.ausgewaehlt { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Sortierung ohne Gruppen: im Kopf (Handy) ganz weg, in der linken Leiste nur ausgegraut, damit nichts springt */
.seite-links .filters select.sortierung.aus { opacity: 0.4; }
/* Platz für die Scrollleiste immer freihalten: Sonst ist die Seite bei kurzen Ansichten (ein Filter mit
   wenigen Meldungen) breiter, und die zentrierten Spalten rücken ein Stück hin und her */
html { scrollbar-gutter: stable; }
.seite-links, .seite-rechts { scrollbar-gutter: stable; }

/* Bewegung wie bei iOS: Federkurve, Fenster wachsen sanft auf, auf dem Handy gleiten Blätter von unten herein.
   Schließen blendet aus (Klasse "schliesst", gesetzt von close() in app.js). */
:root { --feder: cubic-bezier(0.32, 0.72, 0, 1); }
dialog[open] { animation: fenster-auf 0.34s var(--feder); }
dialog[open]::backdrop { animation: hintergrund-auf 0.3s ease-out; }
dialog.schliesst { animation: fenster-zu 0.22s ease-in forwards; }
dialog.schliesst::backdrop { animation: hintergrund-zu 0.22s ease-in forwards; }
@keyframes fenster-auf { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
@keyframes fenster-zu { to { opacity: 0; transform: scale(0.97) translateY(6px); } }
@keyframes hintergrund-auf { from { opacity: 0; } }
@keyframes hintergrund-zu { to { opacity: 0; } }
@media (max-width: 560px) {
  .lese-dlg[open], .daten-dlg[open] { animation: blatt-auf 0.42s var(--feder); }
  .lese-dlg.schliesst, .daten-dlg.schliesst { animation: blatt-zu 0.24s ease-in forwards; }
}
@keyframes blatt-auf { from { transform: translateY(100%); } }
@keyframes blatt-zu { to { transform: translateY(100%); } }
/* Knöpfe geben beim Drücken leicht nach */
button { transition: transform 0.18s var(--feder), background-color 0.2s, color 0.2s, border-color 0.2s; }
button:active:not(:disabled) { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog.schliesst, dialog[open]::backdrop, dialog.schliesst::backdrop { animation: none !important; }
  button:active:not(:disabled) { transform: none; }
}

/* Datenfenster: jeder Abschnitt zugeklappt, die Kopfzeile nennt das Wichtigste ("noch 2 Monate", "6 % → 22 %") */
.daten-inhalt:not(.fertig) { visibility: hidden; }      /* bis die Abschnitte gebaut sind, kein Aufblitzen */
.daten-klapp { border-top: 1px solid var(--line); }
.daten-klapp:first-child { border-top: 0; }
.daten-klapp-kopf {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none;
}
.daten-klapp-kopf::-webkit-details-marker { display: none; }
.daten-klapp-titel { flex: none; font-size: 14.5px; font-weight: 600; color: var(--text); }
.daten-klapp-hinweis {
  flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.daten-klapp-kopf::after {
  content: "›"; flex: none; font-size: 20px; line-height: 1; color: var(--accent); transition: transform 0.25s var(--feder);
}
.daten-klapp[open] > .daten-klapp-kopf::after { transform: rotate(90deg); }
.daten-klapp > :not(summary) { margin: 0 0 14px; }
.daten-klapp[open] > :not(summary) { animation: einblenden 0.28s var(--feder); }
/* Innen doppelte Überschriften und Trennlinien weg, die Kopfzeile trägt den Titel */
.daten-klapp > .daten-teil, .daten-klapp > .lesen, .daten-klapp > .kontext, .daten-klapp > .kandidaten {
  border-top: 0; margin-top: 0; padding-top: 0;
}
.daten-klapp > .daten-teil > h3, .daten-klapp > .kontext > span:first-child,
.daten-klapp > .kandidaten > span:first-child { display: none; }
.daten-klapp .lesen-kopf > span { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .daten-klapp[open] > :not(summary) { animation: none; } }
.daten-klapp[open] > .daten-klapp-kopf .daten-klapp-hinweis { visibility: hidden; }   /* offen steht es darunter */

/* Filter: drei Hauptregler oben, der Rest eingeklappt */
.regler > .hinweis { margin: 4px 0 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.regler > label { font-size: 14px; margin: 12px 0 14px; }
.weitere-regler { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.weitere-regler > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.weitere-regler[open] > summary { color: var(--text); }
.vorschau li.leer { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* Passwortabfrage (passwortAbfrage in app.js): verdecktes Feld statt prompt() */
.pw-dlg { width: min(90vw, 340px); padding: 16px; border: 1px solid var(--line); border-radius: 12px;
          background: var(--surface); color: var(--text); }
.pw-dlg p { margin: 0 0 10px; font-size: 15px; }
.pw-dlg input { width: 100%; padding: 9px 10px; font: inherit; font-size: 16px; color: var(--text); background: var(--bg);
                border: 1px solid var(--line); border-radius: 8px; }
.pw-dlg input:focus { outline: none; border-color: var(--accent); }
.pw-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pw-knoepfe .ctl { font-size: 14px; padding: 5px 14px; }
.pw-knoepfe .ctl.haupt { color: var(--surface); background: var(--accent); border-color: var(--accent); }

/* Käufe neuer Konten (neukonten.py) */
.cat.neukonten { background: transparent; border: 1px solid #c58b00; color: #c58b00; }
.nk-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.nk-liste li { padding: 6px 8px; border-radius: 8px; background: var(--chip); }
.nk-liste li.auffaellig { box-shadow: inset 3px 0 0 #c58b00; }
.nk-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.nk-kopf span { color: var(--muted); font-size: 12.5px; }
.nk-liste small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums;
                  overflow-wrap: anywhere; }
.nk-hinweis { margin-top: 8px !important; font-size: 12px; color: var(--muted); }
.nk-ansicht h2 { font-size: 17px; margin: 6px 0 4px; }
.nk-ansicht > .hinweis { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.nk-was { margin-top: 3px; font-size: 14px; }
.nk-links { display: flex; gap: 8px; margin-top: 6px; }
.nk-links .ctl { text-decoration: none; font-size: 12.5px; }

/* Zum Weiterlesen: Artikel als kleine Karten mit Logo des Mediums */
.lesen ul.artikel-karten { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.artikel-karte {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--chip);
  cursor: pointer; transition: background-color 0.15s;
}
@media (hover: hover) { .artikel-karte:hover { background: color-mix(in srgb, var(--chip) 80%, var(--accent)); } }
.ak-logo {
  flex: none; width: 28px; height: 28px; border-radius: 6px; background: var(--surface); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; overflow: hidden;
}
.ak-logo img { width: 20px; height: 20px; object-fit: contain; }
.ak-text { min-width: 0; }
.ak-meta { font-size: 11.5px; color: var(--muted); }
.lesen a.ak-titel { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--text); font-weight: 500; }
.ak-fuss { margin-top: 3px; font-size: 11px; color: var(--muted); opacity: 0.85; }
.nk-statistik { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.nk-statistik h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.nk-statistik table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.nk-statistik th { text-align: right; font-weight: 400; color: var(--muted); font-size: 11.5px; padding: 2px 4px; }
.nk-statistik td { text-align: right; padding: 4px; border-top: 1px solid var(--line); white-space: nowrap; }
.nk-statistik th:first-child, .nk-statistik td:first-child { text-align: left; white-space: normal; }
.nk-statistik .hinweis { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.ak-anriss { margin: 4px 0 0 !important; font-size: 12.5px; line-height: 1.4; color: var(--muted);
             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ak-text { flex: 1; }
.ak-bild { flex: none; width: 84px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--surface); }
@media (max-width: 480px) { .ak-bild { width: 64px; height: 52px; } }

/* Briefing, visualisiert: Kennzahlen-Kacheln, Aufmacher, Meldungen je Stunde, Kursspuren */
.rb-stunden { margin: 12px 0 2px; }
.rb-stunden figcaption { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.rb-stunden-saeulen { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid var(--line); }
.rb-saeule { flex: 1; min-width: 3px; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.85; }
.rb-saeule:hover { opacity: 1; }
.rb-saeule.leer { background: var(--line); border-radius: 1px; }
.rb-stunden-achse { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px;
                    font-variant-numeric: tabular-nums; }
.kspur { display: flex; align-items: center; gap: 8px; }
.kspur-bahn { position: relative; flex: none; width: 84px; height: 6px; border-radius: 3px; background: var(--line); }
.kspur-strecke { position: absolute; top: 0; bottom: 0; border-radius: 3px; opacity: 0.55; }
.kspur-strecke.up, .kspur-punkt.jetzt.up { background: var(--up); }
.kspur-strecke.down, .kspur-punkt.jetzt.down { background: var(--down); }
.kspur-punkt { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); }
.kspur-punkt.vorher { background: var(--surface); border: 2px solid var(--muted); width: 8px; height: 8px; }
.kspur-punkt.jetzt { border: 2px solid var(--surface); }
.rueckblick li.mit-spur { align-items: center; }
.rb-ergebnis { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; vertical-align: 1px; }
.rb-ergebnis.ja { color: var(--up); border: 1px solid var(--up); }
.rb-ergebnis.nein { color: var(--down); border: 1px solid var(--down); }
@media (max-width: 560px) {
  .rueckblick li .kspur { grid-column: 2; }
}
@media (max-width: 560px) {
  .rueckblick li .kspur small { white-space: normal; }
}

/* Briefing: Aufmacher mit Bild und Zusammenfassung, Zahlen, weitere Themen als Text, bald entschieden, Rest eingeklappt */
.rb-aufmacher {
  display: flex; gap: 14px; align-items: stretch; width: 100%; margin: 12px 0 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--chip); color: var(--text); font: inherit;
  text-align: left; cursor: pointer; transition: transform 0.25s var(--feder), border-color 0.2s;
}
@media (hover: hover) { .rb-aufmacher:hover, .rb-thema:hover { border-color: var(--accent); } }
.rb-aufmacher:active, .rb-thema:active, .rb-bald-marke:active { transform: scale(0.98); }
.rb-aufmacher-bild { flex: none; display: block; width: 220px; min-height: 160px; object-fit: cover; object-position: center 25%; }
.rb-aufmacher-bild.ohne { display: none; }
.rb-aufmacher-text { display: block; flex: 1; min-width: 0; padding: 12px 14px 12px 0; }
.rb-aufmacher > .rb-aufmacher-text:first-child { padding-left: 14px; }
.rb-aufmacher-marke {
  display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-aufmacher b { display: block; margin: 3px 0 8px; font-size: 17px; line-height: 1.3; }
.rb-aufmacher-zeile { display: flex; gap: 8px; align-items: center; }
.rb-aufmacher-zeile small { color: var(--muted); font-size: 12px; }
.rb-zf { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ki-fassung { margin: 10px 0 0; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--chip); border-radius: 0 8px 8px 0; }
.ki-fassung p { margin: 0 0 4px; font-size: 14px; line-height: 1.45; }
.ki-fassung small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.ki-daumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ki-daumen-knopf {
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: transform 0.2s var(--feder), border-color 0.2s;
}
@media (hover: hover) { .ki-daumen-knopf:hover { border-color: var(--accent); } }
.ki-daumen-knopf:active { transform: scale(0.95); }
.ki-daumen-knopf.an { border-color: var(--accent); background: var(--chip); font-weight: 600; }
.ki-marke {
  display: inline-block; padding: 0 5px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; vertical-align: 1px; cursor: help;
}
.rb-zahlen { margin: 12px 0 0; }
.rb-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-bottom: 12px; }
.rb-kachel {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 10px; background: var(--chip); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: transform 0.25s var(--feder), border-color 0.2s;
}
@media (hover: hover) { .rb-kachel:hover { border-color: var(--accent); } }
.rb-kachel:active { transform: scale(0.97); }
.rb-kachel-titel { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rb-kachel b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.rb-kachel.up b { color: var(--up); }
.rb-kachel.down b { color: var(--down); }
.rb-kachel-bezug {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12px; line-height: 1.3; color: var(--muted);
}
.rb-zahlen .rb-stunden { margin: 0; }
.rb-themen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }   /* vier Themen: 2 × 2, im Briefing-Fenster 4 nebeneinander (.briefing-dlg) */
.rb-thema {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: transform 0.25s var(--feder), border-color 0.2s;
}
.rb-thema { overflow: hidden; }
.rb-thema-bild {
  display: block; width: calc(100% + 24px); height: 96px; margin: -10px -12px 2px; object-fit: cover;
  object-position: center 25%; background: var(--surface);
}
.rb-thema-bild.ohne { display: none; }
.rb-kachel-kopf { display: flex; gap: 6px; align-items: center; min-width: 0; }
.rb-kachel-bild { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.rb-kachel-bild.ohne { display: none; }
.rb-thema-kopf { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rb-thema-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.rb-thema-kopf small { color: var(--muted); font-size: 11.5px; }
.rb-thema b { font-size: 14px; line-height: 1.3; }
.rb-thema .rb-zf { margin-top: 0; font-size: 12.5px; }
.rb-delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.rb-delta.up { color: var(--up); }
.rb-delta.down { color: var(--down); }
.rb-bald { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-bald-marke {
  display: inline-flex; gap: 6px; align-items: baseline; max-width: 100%; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
  transition: transform 0.25s var(--feder), border-color 0.2s;
}
@media (hover: hover) { .rb-bald-marke:hover { border-color: var(--accent); } }
.rb-bald-marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-alle { margin-top: 12px; border-top: 1px solid var(--line); }
.rb-alle > .rb-alle-inhalt > h3:first-child { margin-top: 4px; }
@media (max-width: 760px) {
  .rb-themen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rb-aufmacher { flex-direction: column; gap: 0; }
  .rb-aufmacher-bild { width: 100%; min-height: 0; aspect-ratio: 2 / 1; }
  .rb-aufmacher-text, .rb-aufmacher > .rb-aufmacher-text:first-child { padding: 10px 12px 12px; }
  .rb-aufmacher b { font-size: 16px; }
  .rb-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-aufmacher, .rb-thema, .rb-bald-marke { transition: none; }
}

/* Aufgeräumt (Leo, 31.10.2026: erst Handy, dann "genau so für die Desktop-Version") */
#ticker { display: none; }                 /* das Laufband wiederholt den Feed und die Live-Spalte */
.knopf-text { display: none; }             /* Alerts und Push nur als Symbol, der Tooltip erklärt */
/* Kopf blendet sich beim Herunterscrollen aus, beim Hochscrollen ein; die Seitenspalten rücken mit (--kopf-jetzt) */
header { transition: transform 0.2s ease; }
header.weg { transform: translateY(-100%); }
.seite > .karte { flex: 1 1 0; min-width: 0; max-width: 240px; }
/* Bilanz statt Kursverlauf bei entschiedenen Märkten */
.bilanz-liste { flex: 1 1 auto; margin: 0; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-content: center; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.bilanz-liste dt { color: var(--muted); }
.bilanz-liste dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.seite > .karte:only-child { flex: 0 1 200px; }
/* Hintergrund laut Polymarket: zwei Zeilen, ein Klick klappt auf */
article p.hintergrund { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                        cursor: pointer; }
article p.hintergrund.offen { display: block; }
@media (max-width: 560px) {
  #handy-knopf { display: none; }          /* die Anleitung fürs iPhone braucht es auf dem Handy nicht */
  .seite > .karte { flex: 1 1 0; }
}
@media (pointer: coarse) { #handy-knopf { display: none; } }     /* auch am iPad */
@media (prefers-reduced-motion: reduce) { header { transition: none; } }

/* Bilder in der Live-Spalte und bei "bald entschieden" (Leo, 31.10.2026) */
.rb-bald-bild.symbol { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.rb-bald-marke { align-items: center; padding-left: 4px; }
.rb-bald-bild { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.rb-bald-bild.symbol { font-size: 13px; background: var(--chip); }

/* Zusammenfassung von Claude im Briefing (briefing.py) */
.rb-claude { margin: 10px 0 2px; font-size: 14.5px; line-height: 1.5; }
.rb-claude p { margin: 0 0 8px; }
.hilfe-text h3 { margin: 14px 0 2px; font-size: 14.5px; }
.hilfe-text h3:first-child { margin-top: 0; }
.hilfe-text p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.erklaer-dlg { max-width: min(90vw, 420px); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); }
.erklaer-dlg p { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.erklaer-dlg small { color: var(--muted); }
img.auf-weiss { background: #fff; object-fit: contain; box-sizing: border-box; padding: 3px; }
.kalshi-stand { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.kalshi-stand b { font-weight: 600; color: var(--text); }
.daten-oben > .daten-klapp { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.meldung-zeile { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 2px; border: 0;
  border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; font-size: 13.5px; cursor: pointer; }
.meldung-zeile:last-child { border-bottom: 0; }
@media (hover: hover) { .meldung-zeile:hover { background: var(--chip); } }
.meldung-zeile img { flex: none; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.meldung-zeile-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meldung-zeile time { color: var(--muted); font-size: 12px; }
.meldung-zeile .kspur { flex: none; }
.gruppe-weitere { margin: 4px 0 8px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.gruppe-verlauf { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 2px; }
.thema-kurve svg { display: block; width: 100%; height: 120px; }
.thema-kurve .hinweis { margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .meldung-zeile .kspur-bahn { width: 44px; } }
.neuer-stand { margin: 0 0 6px; padding-left: 8px; border-left: 3px solid var(--accent); font-size: 13px; color: var(--muted); }
/* Symbol hinter einem Satz im Briefing: öffnet die Meldung dazu */
.rb-verweis { display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px;
  width: 22px; height: 20px; margin: 0 1px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--accent); cursor: pointer; }
.rb-verweis:focus-visible { background: var(--accent); color: var(--surface); border-color: var(--accent); }
@media (hover: hover) { .rb-verweis:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); } }
/* Steht mitten im Text: sichtbar klein, die Fläche für den Finger 44 × 44 */
@media (any-pointer: coarse) {
  .rb-verweis { position: relative; width: 28px; height: 24px; vertical-align: -5px; }
  .rb-verweis::after { content: ""; position: absolute; inset: -10px -8px; }
}
.rb-claude-quelle { display: block; font-size: 11.5px; color: var(--muted); }
.rb-claude.zu { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rb-claude.zu .rb-claude-quelle { display: none; }

/* Absätze 2 und 3 von Claude (Hintergrund, Einordnung): drei Zeilen, ein Klick klappt auf */
article p.absatz-mehr { margin-top: 6px; }      /* gleiche Schrift wie der erste Absatz: alles KI */
.daten-vorspann p.absatz-mehr { display: block; cursor: default; }   /* im Fenster alle Absätze ganz */

/* Fuß der Karte: weitere Meldungen links, "Details ›" rechts; die ganze Karte ist klickbar */
.karten-fuss { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.karten-fuss .daten-weitere { margin-top: 0; }
.mehr-hinweis { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; cursor: pointer; }
article.klickbar { cursor: pointer; transition: background 2s, border-color 0.15s; }
@media (hover: hover) {
  article.klickbar:hover { border-color: var(--accent); }
  article.klickbar:hover .mehr-hinweis { color: var(--accent); }
}
.daten-vorspann p.hintergrund { display: block; }   /* im Fenster der ganze Hintergrund */
/* Hintergrund und Einordnung von Claude nur im Detailfenster, auf der Karte der erste Absatz */
article p.nur-fenster, article .nur-im-fenster { display: none; }
.daten-vorspann p.nur-fenster { display: block; }
.ganzer-text { padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.ganzer-text p { margin: 0 0 10px; line-height: 1.55; }
/* Im Fenster sichtbare Absätze: Meldung, Hintergrund auf Polymarket, Nachrichten (Leo, 31.10.2026) */
.daten-vorspann .text p.absatz-mehr { margin-top: 10px; }
/* Ansicht "24 Std.": Sortierung */
.rang-sort { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.rang-sort .chip { border: 1px solid var(--line); background: var(--chip); color: var(--text); border-radius: 999px;
                   padding: 3px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.rang-sort .chip.on { background: var(--accent); color: var(--surface); border-color: var(--accent); }
/* Merkliste-Stern ausgeblendet (Leo, 31.10.2026) */
.stern { display: none; }
/* Neue Konten: Seite des Kaufs farbig, Thema klein über der Frage */
.nk-seite { padding: 0 6px; border-radius: 4px; background: var(--chip); }
.nk-seite.ja { background: var(--up); color: #fff; }
.nk-seite.nein { background: var(--down); color: #fff; }
.nk-thema { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* Das Bild im Fenster ein Drittel der Zeile (Leo, 1.11.2026: "die bilder und graphen alle gleich groß") */
.seite > :nth-child(n), .seite > .karte:only-child {
  flex: 0 0 calc((100% - 16px) / 3); width: auto; min-width: 0; max-width: none;
}

/* Rubriken links und Live-Feed rechts als Kasten mit Rahmen, gleich hervorgehoben (Leo, 1.11.2026) */
@media (min-width: 1000px), (min-width: 640px) and (orientation: landscape) {
  .seite-rechts { margin-top: 14px; padding: 12px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
}
@media (min-width: 1280px) {
  .seite-links { margin-top: 14px; padding: 12px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
}

/* Die Rubriken lassen sich am Desktop wegklappen (Leo, 4.11.2026), die Meldungen rücken nach links, der Globus bekommt den Platz. Weg sind sie auch für die Tab-Reihenfolge */
@media (min-width: 1280px) {
  body.links-zu .seite-links { display: none; }
  body.links-zu .spalten { grid-template-columns: minmax(0, 640px) minmax(400px, 1fr); }
  body:not(.links-zu) #menue-name { display: none; }
}
/* Briefing im Feed als Teaser mit Bild, das ganze Briefing im Fenster (Leo, 1.11.2026) */
.rb-teaser { display: flex; gap: 14px; align-items: stretch; }
.rb-teaser-bild { flex: none; width: 168px; min-height: 112px; border-radius: 8px; object-fit: cover;
                  object-position: center 25%; background: var(--chip); }
.rb-teaser-bild.ohne { display: none; }
.rb-teaser-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-teaser .rb-claude { margin-top: 6px; font-size: 14px; }
.rb-teaser-satz { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
.rb-teaser-mehr { align-self: flex-start; margin-top: auto; padding: 6px 0 0; border: 0; background: none; font: inherit; font-size: 12.5px;
  color: var(--accent); cursor: pointer; }
.rueckblick.zu .rb-kopf h2 { font-size: 16px; }
@media (max-width: 560px) {
  .rb-teaser { flex-direction: column; gap: 10px; }
  .rb-teaser-bild { width: 100%; min-height: 0; aspect-ratio: 2 / 1; }
}
.briefing-dlg { width: min(94vw, 920px); }
.briefing-dlg .rueckblick { border: 0; border-radius: 0; margin: 0; padding: 6px 0 4px; background: none; }
.briefing-dlg .rb-kopf h2 { display: none; }        /* der Titel steht schon in der Leiste */
/* Der Stapel aus Tag, Vortag und Woche braucht je Karte einen eigenen Titel */
.briefing-dlg .briefings .rueckblick { padding: 10px 0 14px; }
.briefing-dlg .briefings .rueckblick + .rueckblick { border-top: 1px solid var(--line); }
.briefing-dlg .briefings .rb-kopf h2 { display: block; }
.briefing-dlg .rb-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px), (min-width: 640px) and (orientation: landscape) {
  .briefing-dlg .rb-themen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .briefing-dlg { width: 100vw; }
  .briefing-dlg .rb-themen { grid-template-columns: minmax(0, 1fr); }
}

button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, article:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Stammt von den Kacheln nach Breite: Seit dem einen Bild je Karte (Leo, 3.11.2026) fragt kein @container mehr danach.
   Die Eindämmung bleibt, bis das im Browser geprüft ist. Im Fenster hat die Bilanz keinen solchen Behälter, sie bleibt zweispaltig */
.seite > * { container-type: inline-size; }
/* Bedienflächen für den Finger: auch am Touch-Laptop und am iPad mit Trackpad (any-pointer). Apple nennt 44 × 44 Punkte als Standard */
@media (any-pointer: coarse), (max-width: 480px) {
  .ctl { min-height: 36px; min-width: 36px; }
  .seg button { min-height: 34px; padding-inline: 10px; }
  .daten-weitere { min-height: 34px; padding: 6px 12px; border-radius: 17px; }
  .gruppe-verlauf { min-height: 34px; padding: 0 6px; }
  .mehr-hinweis { min-height: 34px; padding-left: 12px; }
  .src { display: inline-block; padding: 8px 0; }
  .seite-links #suche { font-size: 16px; }      /* kleiner zoomt iOS beim Tippen */
  .seite-links .filters button { min-height: 44px; }
  .seite-links .filters select.sortierung { min-height: 44px; font-size: 16px; }
  .rb-link, .termin-link, .rb-mehr, .lesen-mehr, .rang-link, .ki-daumen-knopf, .rang-sort .chip, .rb-bald-marke, .stat-zeile, .stat-thema, .stat-bilanz { min-height: 44px; }
  .rechts-oeffnen, .globus-land, .globus-meldung { min-height: 44px; }
  .globus-land, .globus-meldung { align-items: center; }
  .globus-zu { width: 36px; height: 36px; margin: -2px -8px -2px 0; }
  .globus-zoom button { width: 44px; height: 44px; font-size: 22px; }
  .globus-info { height: auto; max-height: 212px; }      /* so hoch wie ihr Inhalt: Ohne Maus gibt es kein Hovern, das die Kugel springen ließe */
  a.rb-link { padding-block: 12px; }
  a.rang-link { display: inline-flex; align-items: center; }
  a.credit { padding-block: 14px; }
  .daten-teil a { display: inline-block; padding-block: 13px; }
  .offen summary, .weitere-regler > summary { padding-block: 12px; }
}
/* Erklärung per Tipp (ERKLAERBAR in app.js): Safari auf dem iPhone schickt den Klick nur mit cursor: pointer bis zum Dokument */
:is(.volatil, .zeitgleich, .nennt, dt, dd, .kalshi-stand, small.vorher, .move .jetzt, .rb-saeule, .zeit-marke, p.ausloeser, .kommentare li, .rechts-titel)[title] { cursor: help; }
@media (any-pointer: coarse) {
  :is(.volatil, .zeitgleich, .nennt, dt, dd, .kalshi-stand, small.vorher, .move .jetzt, .rb-saeule, .zeit-marke, p.ausloeser, .kommentare li, .rechts-titel)[title] { cursor: pointer; }
}
.markt dt[title], .bilanz-liste dt[title] { text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
/* Über dem Feed: was gerade eingrenzt (filterMarken), und der Knopf für den Rest des Feeds (feedWeiter) */
.filter-marken { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.filter-marke { max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-color: var(--accent); color: var(--text); }
.feed-rest { display: block; margin: 14px auto 0; }
.meldung-zeile small { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Kopf in schmaleren Fenstern: erst wird „Schwellen“ zum Symbol, dann „Briefing anschauen“ kürzer, am Handy hoch steht der Stand mit dem Briefing in einer zweiten Zeile */
.nur-schmal, .briefing-kurz { display: none; }
@media (max-width: 1099.98px) {
  .nur-schmal { display: inline; }
  .nur-breit { display: none; }
}
@media (max-width: 719.98px) {
  .briefing-kurz { display: inline; }
  .briefing-lang { display: none; }
}
@media (max-width: 599.98px) {
  .bar { gap: 4px 6px; padding: 6px 12px; }
  .bar-links, .bar-rechts { display: contents; }
  .bar .menue-knopf { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
  .bar h1 { grid-column: 2; grid-row: 1; font-size: 18px; }
  .bar-knoepfe { grid-column: 3; grid-row: 1; justify-self: end; gap: 4px; }
  .bar #status { grid-column: 1 / 3; grid-row: 2; }
  .bar #briefing-knopf { grid-column: 3; grid-row: 2; justify-self: end; }
}
@media (max-width: 340px) { .bar h1 { display: none; } }

/* Fenster „Benachrichtigungen“: worüber, und ob dieses Gerät sie bekommt (Leo, 3.11.2026: ein Knopf statt zwei) */
.alarm-wahl { display: block; width: 100%; min-height: 44px; margin: 6px 0; padding: 8px 12px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.alarm-wahl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.alarm-wahl.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.alarm-geraet { margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.alarm-geraet p { margin: 0 0 8px; font-size: 14px; }
.alarm-dlg .ctl { min-height: 36px; }

/* Look der ganzen App (Leo, 3.11.2026: „übernimm die farben und den vibe“): dunkles Blau, Verlauf von Blau nach Violett, leuchtende Knöpfe, weiche
   Lichter im Hintergrund. Eine eigene Schicht am Ende: Die Regeln darüber bauen die Seite, hier steht nur das Aussehen. Grün und Rot bleiben der Richtung vorbehalten */
:root {
  --verlauf: linear-gradient(100deg, var(--accent), var(--glanz));
  --rahmen: color-mix(in srgb, var(--accent) 14%, var(--line));
  --leuchten: 0 6px 22px color-mix(in srgb, var(--accent) 40%, transparent);
  --schatten: 0 10px 30px rgba(30, 34, 80, 0.09);
  --titel: color-mix(in srgb, var(--accent) 36%, var(--muted));
}
@media (prefers-color-scheme: dark) { :root { --schatten: 0 10px 30px rgba(0, 0, 0, 0.28); } }
html { scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent; }
.seite-links, .seite-rechts, .daten-buehne, .regler, .vorschau { scrollbar-color: color-mix(in srgb, var(--accent) 34%, transparent) transparent; }
/* Zwei Lichter hinter allem; fest stehend, kostet beim Scrollen nichts */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62vmax 52vmax at 10% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(60vmax 56vmax at 98% 34%, color-mix(in srgb, var(--glanz) 19%, transparent), transparent 70%);
}
header {
  background: color-mix(in srgb, var(--bg) 76%, transparent); border-bottom-color: var(--rahmen);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
h1 { font-weight: 800; letter-spacing: -0.03em; }
h1 span { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1::after {
  content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.22em; vertical-align: 0.48em; border-radius: 50%; background: var(--up);
  animation: kopf-puls 2.4s ease-out infinite;
}
@keyframes kopf-puls { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); } to { box-shadow: 0 0 0 0.5em transparent; } }
body:has(#status.err) h1::after { background: var(--down); animation: none; }

/* Karten und Flächen */
article { border-color: var(--rahmen); border-radius: 14px; box-shadow: var(--schatten); }
article h2 { font-weight: 750; letter-spacing: -0.006em; }
article.entschieden { box-shadow: inset 3px 0 0 var(--up), var(--schatten); }
@media (hover: hover) {
  article.klickbar:hover { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 22%, transparent); }
  article.klickbar.entschieden:hover { box-shadow: inset 3px 0 0 var(--up), 0 10px 34px color-mix(in srgb, var(--accent) 22%, transparent); }
  .ctl:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
}
article.ausgewaehlt {
  outline: 0; border-color: transparent; box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--verlauf) border-box;
}
article.ungelesen .meta-fakten > span:first-child::before { background: var(--glanz); }
article p.ausloeser, .ganzer-text p.ausloeser { border-radius: 10px; }
.gruppe { border-left: 3px solid; border-image: linear-gradient(180deg, var(--accent), var(--glanz)) 1; }
.kurs-kachel, .karte, .rb-thema, .rb-aufmacher, .stat-kachel, .rangliste li, .nk-statistik, .gruppe-weitere, .suche-kasten { border-color: var(--rahmen); }
.kurs-kachel, .karte, .thumb, .rb-kachel, .rb-thema, .rb-aufmacher, .stat-kachel, .artikel-karte, .rangliste li, .nk-statistik, .gruppe-weitere, .suche-kasten, .nk-liste li { border-radius: 12px; }
.rueckblick {
  border: 1px solid transparent; border-radius: 14px; box-shadow: var(--schatten);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--verlauf) border-box;
}
.briefing-dlg .rueckblick { box-shadow: none; }
@media (min-width: 1000px), (min-width: 640px) and (orientation: landscape) {
  .seite-rechts { background: color-mix(in srgb, var(--surface) 74%, transparent); border-color: var(--rahmen); border-radius: 16px; }
}
@media (min-width: 1280px) {
  .seite-links { background: color-mix(in srgb, var(--surface) 74%, transparent); border-color: var(--rahmen); border-radius: 16px; }
}
.seite-rechts.ruhe:not(:has(dialog[open])) { border-color: transparent; background: none; }

/* Knöpfe: Pillen, die aktive Wahl leuchtet */
.ctl { border-color: var(--rahmen); border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); padding-inline: 12px; color: color-mix(in srgb, var(--text) 72%, var(--muted)); }
.filters button.on, .seite-links .filters button.on, .rang-sort .chip.on, .seg button.on {
  background: var(--verlauf); color: var(--surface); font-weight: 650; border-color: transparent; box-shadow: var(--leuchten);
}
.filters button.schalter.on, .seite-links .filters button.schalter.on { background: transparent; color: var(--text); border-color: var(--accent); box-shadow: none; }
.seite-links .filters button { border-radius: 10px; }
.seg { border-color: var(--rahmen); border-radius: 999px; }
.seg button.on { box-shadow: none; }
.filter-kopf .ctl.haupt, .pw-knoepfe .ctl.haupt, .lese-oeffnen, .marke.neu { background: var(--verlauf); color: var(--surface); border-color: transparent; box-shadow: var(--leuchten); }
.lese-oeffnen { border-radius: 999px; }
.daten-weitere, .rang-link { border-radius: 999px; }
.klick-marke { background: var(--verlauf); }
.filter-marke { border-color: var(--accent); }

/* Abzeichen: Glas in ihrer Farbe, nur Neu und Entschieden sind voll */
.cat { border-radius: 999px; padding: 1px 8px; }
.cat.done, .cat.trend, .cat.gross, .cat.wechsel, .cat.gegen, .cat.wackelt, .cat.haelt, .cat.top, .cat.neukonten {
  font-weight: 600; background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 62%, var(--text)); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.cat.done { --c: var(--accent); }
.cat.trend { --c: var(--glanz); }
.cat.gross { --c: #f0a53a; }
.cat.wechsel { --c: #ff7a3d; }
.cat.gegen { --c: #ff4d8d; }
.cat.wackelt { --c: #e5b80b; }
.cat.haelt, .cat.top { --c: var(--up); }
.cat.neukonten { --c: #e0a800; }
.cat.neu { background: var(--verlauf); color: var(--surface); }
.cat.entschieden { padding: 2px 9px; }
.ki-marke { border-color: color-mix(in srgb, var(--glanz) 60%, transparent); color: var(--glanz); border-radius: 6px; }
.ki-fassung, .neuer-stand { border-left-color: var(--glanz); }

/* Zahlen und Balken im Verlauf */
.stat-kachel { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--glanz) 8%, var(--surface))); }
.stat-kachel b, .stat-bilanz b { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-balken, .zeit-gelaufen, .feld-liste li.eigener .feld-balken .jetzt { background: var(--verlauf); }
.zeit-gelaufen { opacity: 0.85; }
.rb-saeule { background: linear-gradient(180deg, var(--glanz), var(--accent)); opacity: 0.9; }
.rb-saeule.leer { background: var(--line); }
.zeit-marke.heute { background: var(--glanz); }
.karte .punkt, .karte-flaeche .punkt { fill: var(--glanz); }
.day, .rechts-titel, .daten-titel, .rb-kachel-titel, .rueckblick h3, .regler h3, .vorschau h3, .filter-titel, .trigger, .verlauf-art { color: var(--titel); }
.rb-aufmacher-marke, .rb-thema-name { color: var(--glanz); }

/* Fenster mit Rand im Verlauf; das Blatt am Handy behält seine runden Ecken nur oben */
.daten-dlg, .filter-dlg, .lese-dlg, .handy-dlg, .pw-dlg, .erklaer-dlg, .karte-gross, .merk-menu {
  border: 1px solid transparent; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), 0 0 50px color-mix(in srgb, var(--glanz) 12%, transparent);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(140deg, color-mix(in srgb, var(--accent) 55%, var(--line)), color-mix(in srgb, var(--glanz) 45%, var(--line))) border-box;
}
@media (min-width: 560.02px) { .daten-dlg, .filter-dlg, .lese-dlg, .handy-dlg, .pw-dlg, .erklaer-dlg, .karte-gross { border-radius: 16px; } }
.daten-dlg.seitlich { box-shadow: none; }
dialog::backdrop { background: color-mix(in srgb, #06070f 52%, transparent); }

/* Eingaben */
#suche, .filters select.sortierung, .pw-dlg input { border-color: var(--rahmen); }
#suche { background: color-mix(in srgb, var(--surface) 82%, transparent); }
#suche:focus, .pw-dlg input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.regler input[type=range], .regler input[type=checkbox] { accent-color: var(--glanz); }
/* Kopfzeile der Karte: eine Zeile Text, darunter nur die Abzeichen, die etwas sagen (Leo, 3.11.2026: „ein bisschen viele tags“) */
.meta-fakten { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta-fakten > * + *::before { content: "·"; margin-right: 6px; opacity: 0.7; }
.meta-fakten .cat { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: 400; white-space: nowrap; }
.meta-fakten .cat.haelt, .meta-fakten .cat.top { color: var(--up); }
.meta-fakten > span:first-child { white-space: nowrap; }

/* Ein großes Bild je Karte (Leo, 3.11.2026: „ein bild groß in die mitte der meldung“), über die ganze Breite, immer ganz zu sehen */
article > .seite { display: block; width: 100%; height: auto; margin: 10px 0 12px; }
article > .seite:empty { display: none; }
article > .seite > .thumb { width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 320px; border: 1px solid var(--rahmen); border-radius: 12px; }
article > .seite > .thumb.ganz { aspect-ratio: 3 / 1; background: var(--chip); }
article > .seite > .thumb.ganz .thumb-bild { width: auto; max-width: 70%; margin: 0 auto; padding: 10px; background: #fff; border-radius: 10px; }
article > .seite > .karte { height: 170px; border-color: var(--rahmen); }
.thumb-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); color: #fff; font-size: 14px; line-height: 1.25; }
.thumb-name b { font-weight: 700; }
.thumb-name span { margin-left: 7px; font-size: 12.5px; opacity: 0.85; }
.daten-vorspann .seite:has(> .karte) { display: none; }
.daten-klapp .kurs-kachel { margin-bottom: 10px; }
/* Oben in den Details: links der Zeitstrahl, rechts der Ort, darunter über die ganze Breite der Kursverlauf. Ohne Zeitstrahl steht der Kursverlauf neben dem Ort */
.daten-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; }
.daten-oben > .daten-klapp { grid-column: 1; grid-row: 1; min-width: 0; }
.daten-oben > .daten-zeitbox ~ .daten-klapp { grid-column: 1 / -1; grid-row: 2; }
.daten-oben > .daten-ort { grid-column: 2; grid-row: 1; width: 108px; height: 108px; margin-top: 12px; }
/* Neben dem Zeitstrahl genau so hoch wie er (Leo, 3.11.2026), unten bis zum Ende seines Texts; ist er zugeklappt, bleibt sie quadratisch */
.daten-oben:has(> .daten-zeitbox) > .daten-ort { align-self: stretch; height: auto; min-height: 108px; margin-bottom: 25px; }
.daten-oben > .daten-ort > svg { flex: 1 1 0; height: 0; min-height: 0; }    /* das Kartenbild füllt die Kachel, drückt sie aber nicht höher */
@media (max-width: 480px) {
  /* Am Handy bleibt sie quadratisch: Der Text bricht dort um, die Kachel wäre ein hoher Streifen */
  .daten-oben > .daten-ort, .daten-oben:has(> .daten-zeitbox) > .daten-ort { align-self: start; width: 88px; height: 88px; min-height: 88px; margin-bottom: 0; }
}

/* Briefing in der rechten Spalte: Liegt eine Meldung darüber, bleibt es still dahinter und behält seine Stelle */
.seite-rechts:has(#daten-dlg.seitlich[open]) #briefing-dlg.seitlich { position: absolute; visibility: hidden; pointer-events: none; }
/* Nie drei und eine allein (Leo, 3.11.2026: „entweder schmaler oder nur drei“): Reicht die Spalte, alle schmaler in einer Reihe, sonst 2 × 2 */
.briefing-dlg.seitlich .daten-buehne { container-type: inline-size; }
.briefing-dlg.seitlich .rb-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 620px) {
  .briefing-dlg.seitlich .rb-themen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .briefing-dlg.seitlich .rb-thema-bild { height: 84px; }
  .briefing-dlg.seitlich .rb-thema .rb-zf { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
.briefing-dlg.seitlich .rb-aufmacher { flex-direction: column; gap: 0; }
.briefing-dlg.seitlich .rb-aufmacher-bild { width: 100%; min-height: 0; aspect-ratio: 2 / 1; max-height: 260px; }
.briefing-dlg.seitlich .rb-aufmacher-text, .briefing-dlg.seitlich .rb-aufmacher > .rb-aufmacher-text:first-child { padding: 10px 12px 12px; }

/* Rubrikwechsel (weichWechseln): alter und neuer Feed blenden ineinander */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }

/* Rubrik Stand: stand.js bringt seine Regeln selbst mit und lädt später, deshalb über #feed */
#feed .stand-senat { border-color: var(--rahmen); border-radius: 12px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--glanz) 8%, var(--surface))); }
#feed .stand-liste, #feed .stand-zeile { border-color: var(--rahmen); }
#feed .stand-block h3 { color: var(--titel); }
@media (prefers-reduced-motion: reduce) { h1::after { animation: none; } }

/* Griff der Info-Fläche (Leo, 4.11.2026: „minimieren können, sodass man sie wieder hochholen kann“). Er steht unter der Kugel, nie auf ihr („macht den da drunter“).
   Steht hinten in der Datei, weil er die Regeln für den Finger weiter oben überschreibt */
.globus-griff {
  position: relative; z-index: 1; flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 24px; min-width: 56px; padding: 0 12px;
  border: 1px solid var(--rahmen); border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.globus-griff::after { content: "▾"; font-size: 15px; line-height: 1; }
.globus-griff.zu::after { content: "▴"; }
@media (hover: hover) { .globus-griff:hover { color: var(--text); border-color: var(--glanz); } }
@media (any-pointer: coarse) {
  .globus-griff { height: 36px; min-width: 88px; }
  .bar .rechts-oeffnen { min-height: 36px; }
}
@media (max-width: 999.98px) and (orientation: portrait), (max-width: 639.98px) {
  .globus-stat-knopf { display: none; }      /* unter 1000 px gibt es keine rechte Spalte */
}
/* Handy hoch: Die Fläche läuft über die ganze Breite und Höhe, Griff und Info liegen unten darauf. Eingeklappt bleibt nur der Griff */
@media (max-width: 599.98px) and (orientation: portrait) {
  body[data-ansicht="globus"] .globus-feld { display: grid; grid-template: minmax(0, 1fr) auto auto / minmax(0, 1fr); gap: 0; max-width: none; padding: 0; }
  .globus-feld > .globus-flaeche { grid-row: 1 / 4; grid-column: 1; min-height: 0; }
  .globus-feld .globus-leinwand { border-radius: 0; }
  .globus-feld > .globus-griff { grid-row: 2; grid-column: 1; justify-self: center; margin: 0 0 6px; }
  .globus-feld > .globus-info { grid-row: 3; grid-column: 1; position: relative; z-index: 1; height: auto; max-height: 212px; margin: 0 10px 8px; }
  .globus-feld .globus-legende { display: none; }
}
/* Handy quer (Leo, 4.11.2026): Meldungen und Globus halb und halb, die Meldung öffnet über dem Globus. Die Spalte ist niedrig: Die Kugel bekommt die ganze Höhe, der Griff steht in der Ecke
   neben ihr, die Info legt sich aufgeklappt über sie */
@media (min-width: 640px) and (max-width: 999.98px) and (max-height: 500px) and (orientation: landscape) {
  .spalten { gap: 10px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  .seite-rechts { top: calc(var(--kopf-jetzt, var(--kopf, 60px)) + 4px); max-height: calc(100dvh - var(--kopf-jetzt, var(--kopf, 60px)) - 8px); padding-top: 0; }
  .rechts-ruhe { min-height: calc(100dvh - var(--kopf, 60px) - 12px); gap: 0; }
  .globus-flaeche { min-height: 0; }
  .rechts-ruhe > .globus-griff { position: absolute; right: 6px; bottom: 6px; z-index: 2; min-width: 44px; padding: 0 10px; }
  .rechts-ruhe > .globus-info { position: absolute; inset: auto 0 0; z-index: 1; height: auto; max-height: 100%; overflow-y: auto; }
}

/* Neue Meldungen warten auf diesen Knopf (Leo, 4.11.2026). Mitte und Höhe setzt neuKnopfStellen: über dem Feed, unter dem Kopf */
.neu-knopf {
  position: fixed; z-index: 15; top: max(calc(env(safe-area-inset-top) + 8px), var(--neu-oben, 64px)); left: var(--neu-mitte, 50%); transform: translateX(-50%);
  max-width: calc(100vw - 32px); min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: var(--verlauf); color: var(--surface); font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); animation: neu-knopf-rein 0.25s ease-out;
}
.neu-knopf[hidden] { display: none; }
.neu-knopf:hover { filter: brightness(1.08); }
.neu-knopf:focus-visible { outline: 2px solid var(--titel); outline-offset: 2px; }
@keyframes neu-knopf-rein { from { opacity: 0; transform: translate(-50%, -10px); } }
@media (prefers-reduced-motion: reduce) { .neu-knopf { animation: none; } }
/* Gäste über die Spielhalle können nichts ändern (Leo, 4.11.2026) */
.gast .ki-daumen, .gast .stern, .gast #filter-knopf { display: none; }

/* Fokus-Modus (fokus.py, Leo 10.11.2026): ein Land genauer, Karten ab halber Schwelle nur hier */
/* Rubrik Briefing: Teaser in der Mitte, das gewählte rechts (Leo, 10.11.2026) */
.briefing-liste { display: flex; flex-direction: column; gap: 12px; }
.briefing-liste .rueckblick.ausgewaehlt { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Öffentliche Ausgabe (Leo, 10.11.2026): Band oben, Pro statt Details, keine Knöpfe zum Ändern */
.oeffentlich #alerts, .oeffentlich #handy-knopf, .oeffentlich #stop { display: none !important; }
.oeffentlich-band { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  font-size: 14px; line-height: 1.5; color: var(--muted); }
.oeffentlich-band b { color: var(--text); margin-right: 4px; }
.oeffentlich-band a { color: var(--accent); margin-right: 10px; }
.oeffentlich-band small { display: block; margin-top: 6px; font-size: 12px; }
/* Als App aufs Handy (Leo, 10.11.2026): eigene Zeile im Band, Knopf nur, wenn der Browser installieren kann */
.oeffentlich-band .install-hinweis { display: block; margin-top: 8px; }
.oeffentlich-band .install-hinweis b { margin-right: 0; }
.install-knopf { font: inherit; font-weight: 600; color: var(--text); background: var(--surface2, var(--surface)); border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.install-knopf:hover { background: var(--accent); color: var(--bg, #fff); }
/* Pro überall in der öffentlichen Ausgabe (Leo, 10.11.2026: „richtig mit der pro version genervt“) */
.pro-teaser {
  margin: 0 0 14px; padding: 18px 20px; border-radius: 14px; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(120deg, var(--accent), var(--glanz)) border-box;
  box-shadow: 0 0 34px color-mix(in srgb, var(--glanz) 14%, transparent);
}
.pro-teaser h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.pro-teaser > p:not(.pro-marke) { margin: 0; color: var(--muted); line-height: 1.5; }
.pro-teaser-unten { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.pro-teaser .pro-abo { margin-top: 0; }
.pro-preis { font-size: 13px; color: var(--muted); }
.pro-karte .pro-preis { margin: 0 0 4px; }
.pro-anlass { color: var(--text); font-weight: 600; }
.mehr-hinweis.pro-schloss { color: var(--accent); font-weight: 600; }
#filters button.gesperrt { color: var(--muted); }
#filters button.gesperrt:hover { color: var(--accent); }
.pro-leiste {
  position: fixed; z-index: 14; left: 50%; transform: translateX(-50%); bottom: calc(var(--leiste, 0px) + env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid transparent; font-size: 14px;
  background: linear-gradient(color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)) padding-box,
              linear-gradient(120deg, var(--accent), var(--glanz)) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 30px color-mix(in srgb, var(--glanz) 18%, transparent);
  animation: pro-leiste-rein 0.5s var(--feder, ease-out);
}
.pro-leiste .pro-abo { margin-top: 0; white-space: nowrap; }
.pro-leiste-zu { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.pro-leiste-zu:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
@keyframes pro-leiste-rein { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (max-width: 560px) { .pro-leiste-text { font-size: 12.5px; line-height: 1.3; } }
@media (prefers-reduced-motion: reduce) { .pro-leiste { animation: none; } }
/* Pro über die ganze rechte Spalte, dahinter verschwommen die Details (Leo, 10.11.2026) */
.pro-dlg.seitlich { height: calc(100vh - var(--kopf-jetzt, var(--kopf, 100px)) - 24px); }
.pro-inhalt { position: relative; display: flex; align-items: center; align-items: safe center; justify-content: center;
              min-height: min(560px, 72vh); padding: 24px 18px; overflow-x: hidden; }
.pro-hinten { position: absolute; inset: 0; padding: 18px 22px; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none;
              filter: blur(10px) saturate(1.15); opacity: 0.55; }
.pro-hinten-bild { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: 12px; }
.pro-hinten-bild.auf-weiss { object-fit: contain; background: #fff; }
.pro-hinten-kopf { margin: 16px 0 12px; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.pro-kurve svg { display: block; width: 100%; height: 150px; margin: 6px 0 14px; }
.pro-kurve .strich { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pro-kurve .flaeche { fill: color-mix(in srgb, var(--glanz) 18%, transparent); stroke: none; }
.pro-balken { height: 11px; margin: 11px 0; border-radius: 6px; background: color-mix(in srgb, var(--text) 20%, transparent); }
.pro-konto { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.pro-konto::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.pro-konto .pro-balken { margin: 0; }
.pro-karte { position: relative; z-index: 1; box-sizing: border-box; width: min(100%, 460px); padding: 22px 24px 24px; border-radius: 18px;
             background: color-mix(in srgb, var(--surface) 76%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
             border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
             box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 0 46px color-mix(in srgb, var(--glanz) 16%, transparent); }
.pro-karte > p:not(.pro-marke) { margin: 0 0 10px; }
@media (prefers-reduced-transparency: reduce) { .pro-karte { background: var(--surface); } }
.pro-marke { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pro-inhalt h3 { margin: 4px 0 10px; font-size: 1.5rem; }
.pro-abo { display: inline-block; margin-top: 8px; text-decoration: none; }
.cat.gegenbewegung { background: #0b7285; color: #fff; font-weight: 600; }     /* Gegenbewegung (scanner.gegenbewegungen, Leo 10.11.2026) */
.cat.fokus { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.fokus-kopf { padding: 14px 16px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.fokus-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fokus-titel b { font-size: 1.1rem; margin-right: auto; }
.fokus-wahl { min-width: 200px; }
.fokus-kopf .hinweis { margin: 8px 0 0; }
.fokus-fehler { color: var(--down); }
.fokus-lage { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fokus-lage .filter-titel { padding: 10px 16px 6px; }
.fokus-zeilen { display: flex; flex-direction: column; }
.fokus-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 8px 16px;
  border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
button.fokus-zeile { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
button.fokus-zeile:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
button.fokus-zeile.ausgewaehlt { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.markt-inhalt { padding: 4px 18px 18px; }
.markt-antwort { margin: 6px 0 0; font-weight: 600; }
.markt-zahlen { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 4px; }
.markt-kurs { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.markt-zahlen .fokus-aenderung { font-size: 15px; min-width: 0; text-align: left; }
.markt-verlauf { height: 150px; margin: 6px 0 14px; }
.markt-karten { margin: 4px 0 10px; }
.markt-link { display: inline-block; margin-top: 6px; color: var(--accent); }
.fokus-name { display: flex; flex-direction: column; min-width: 0; }
.fokus-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fokus-name span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fokus-kurs { font-variant-numeric: tabular-nums; font-weight: 600; }
.fokus-aenderung { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); min-width: 56px; text-align: right; }
.fokus-aenderung.hoch { color: var(--up); }
.fokus-aenderung.runter { color: var(--down); }
.fokus-zeile small { color: var(--muted); font-size: 12px; min-width: 96px; text-align: right; }
@media (max-width: 560px) {
  .fokus-zeile { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fokus-zeile small { display: none; }
}
/* Länderwahl wie die Regionsauswahl der Seitenleiste */
.fokus-titel select.fokus-wahl {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 30px 6px 14px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.fokus-titel select.fokus-wahl option { color: var(--text); background: var(--surface); }