/* ══════════════════════════════════════════════════════════════
   Prep Radar – Stylesheet
   Editorial, ruhig, hohe Informationsdichte. Priorität liegt auf
   Hierarchie, nicht auf Dekoration.
   ══════════════════════════════════════════════════════════════ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Inter, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --bg:        #fbfbfd;
  --bg-2:      #f2f2f5;
  --surface:   #ffffff;
  --surface-2: #f4f4f7;
  --text:      #16161a;
  --text-2:    #61616b;
  --text-3:    #8a8a93;
  --line:      rgba(0,0,0,.11);
  --line-2:    rgba(0,0,0,.065);
  --accent:    #0071e3;
  --accent-sf: rgba(0,113,227,.10);
  --header-bg: rgba(251,251,253,.78);
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.055);
  --shadow-h:  0 2px 5px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.12);
  --shadow-xl: 0 8px 20px rgba(0,0,0,.10), 0 40px 90px rgba(0,0,0,.22);

  --c-green:  #1c8c3c; --c-green-bg:  rgba(48,209,88,.14);
  --c-red:    #c92a20; --c-red-bg:    rgba(255,69,58,.13);
  --c-purple: #7b3fbf; --c-purple-bg: rgba(175,82,222,.13);
  --c-violet: #8a3fd6; --c-violet-bg: rgba(160,80,255,.13);
  --c-pink:   #c2185b; --c-pink-bg:   rgba(255,45,85,.12);
  --c-blue:   #0062c4; --c-blue-bg:   rgba(0,113,227,.12);
  --c-amber:  #a15c00; --c-amber-bg:  rgba(255,159,10,.16);
  --c-teal:   #00796b; --c-teal-bg:   rgba(0,199,190,.14);
  --c-cyan:   #0277a8; --c-cyan-bg:   rgba(50,173,230,.14);
  --c-indigo: #4338a8; --c-indigo-bg: rgba(88,86,214,.13);
  --c-slate:  #4a5568; --c-slate-bg:  rgba(120,130,150,.13);
  --c-gray:   #6b6b73; --c-gray-bg:   rgba(120,120,128,.12);

  --r-card: 16px;
  --r-pill: 980px;
  --ease:   cubic-bezier(.28,.11,.32,1);
  --maxw:   1560px;
}

html[data-theme="dark"] {
  --bg:        #000000;
  --bg-2:      #0b0b0d;
  --surface:   #141417;
  --surface-2: #1c1c20;
  --text:      #f2f2f5;
  --text-2:    #a0a0a8;
  --text-3:    #7d7d86;
  --line:      rgba(255,255,255,.14);
  --line-2:    rgba(255,255,255,.075);
  --accent:    #2997ff;
  --accent-sf: rgba(41,151,255,.17);
  --header-bg: rgba(0,0,0,.76);
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.38);
  --shadow-h:  0 2px 6px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 10px 30px rgba(0,0,0,.7), 0 40px 90px rgba(0,0,0,.75);

  --c-green:#30d158; --c-red:#ff6961; --c-purple:#d08bff; --c-violet:#c48bff;
  --c-pink:#ff6f9c;  --c-blue:#5aa9ff; --c-amber:#ffb340; --c-teal:#40d6c8;
  --c-cyan:#64c8f0;  --c-indigo:#8f8cf0; --c-slate:#9aa6bd; --c-gray:#a0a0a8;
}

* { box-sizing: border-box; }
/* hidden gilt immer – auch gegen display:flex einer Klasse (leerer #pager unter dem Kaufberater). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.47; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Achtung: Klassen die zusammen mit .wrap stehen (.hero, .hdr-in)
   niemals mit der Kurzschreibweise `padding:` versehen – das
   setzt links/rechts auf 0 und die Zeile läuft aus der Flucht.
   Immer padding-top / padding-bottom einzeln. */
.spacer { flex: 1; }
.mono { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); word-break: break-all; }

/* ─────────────────────────── Kopf ───────────────────────────
   Eine Zeile, drei Dinge: Wortmarke (öffnet den Portalwechsel), Reiter
   als Text mit Unterstrich in der Akzentfarbe, Suche als Symbol, das ein
   Feld aufklappt. Kennzahlen stehen im Fuss, die Frische in der
   Filterleiste. Die Zeile ist 44 px hoch – so wenig wie möglich klebt. */

.hdr {
  position: sticky; top: 0; z-index: 60; background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line-2);
}
.hdr-in { display: flex; align-items: center; gap: 18px; height: 44px; position: relative; }

.brand-mark {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(140deg, #ff5f6d, #ffc371 28%, #4facfe 62%, #a06eff);
  color: #fff; font-size: 13px; line-height: 1; box-shadow: 0 2px 7px rgba(0,0,0,.18);
}
.brand-txt { font-size: 15px; font-weight: 650; letter-spacing: -.022em; white-space: nowrap; }

.nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; align-self: stretch; }
.nav::-webkit-scrollbar { display: none; }
.nav button {
  border: 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent;
  background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  padding: 0 1px; font-size: 13.5px; font-weight: 500;
  color: var(--text-2); transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nav button:hover { color: var(--text); }
.nav button[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
/* Schmal: was rechts hinausläuft, verblasst – der Hinweis, dass man wischen kann. */
.nav.cut { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }

.hdr-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.search { position: relative; display: none; align-items: center; width: 240px; }
.search.open { display: flex; }
.search svg { position: absolute; left: 10px; width: 14px; height: 14px; opacity: .45; pointer-events: none; }
.search input {
  width: 100%; height: 32px; padding: 0 28px 0 31px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface-2); outline: none; font-size: 13.5px;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); }
.search kbd {
  position: absolute; right: 8px; font-size: 10.5px; color: var(--text-3); font-family: var(--font);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; pointer-events: none;
}
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { opacity: 0; }
#searchToggle[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }

.iconbtn {
  height: 32px; min-width: 32px; padding: 0 9px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }

/* Segmentierte Auswahl – gleiche Höhe und Radius wie alles andere */
.seg { display: flex; height: 32px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button {
  border: 0; background: transparent; cursor: pointer; padding: 0 10px;
  font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ─────────────────────── Breaking & Kennzahlen ─────────────────────── */

/* Die frühere Breaking-Leiste über der Seite gibt es nicht mehr.
   Eilmeldungen sind jetzt ein Filter wie jeder andere: der Knopf
   „Breaking" in der Filterzeile. Ohne diesen Filter werden sie auch
   nicht besonders gekennzeichnet. */

/* Nur für Suchmaschinen und Vorlesegeräte – auf dem Bildschirm nimmt der
   Seitentitel keinen Platz mehr weg, er steht ja oben links im Kopf. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Gewählte Filter als abwählbare Marken, in derselben Zeile wie die
   Filter-Schaltfläche. Die Zeile ist immer da und immer gleich hoch –
   es rutscht nichts nach unten, wenn man etwas auswählt. Bei vielen
   Marken schiebt sich die Leiste seitwärts. */
.active {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; padding: 1px 0;
}
.active::-webkit-scrollbar { display: none; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 26px; padding: 0 9px 0 11px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: var(--accent-sf); color: var(--accent);
  font-size: 12.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.fchip svg { opacity: .6; }
.fchip:hover { background: var(--accent); color: #fff; }
.fchip:hover svg { opacity: 1; }
.fchip.fclear {
  background: transparent; color: var(--text-3); padding: 0 8px;
  text-decoration: underline; text-underline-offset: 2px;
}
.fchip.fclear:hover { color: var(--text); background: transparent; }

/* Kennzahlen (Stories, Artikel, Quellen) stehen im Fuss – Beiwerk, keine
   Bedienelemente. Oben bleibt nur die Frische: Punkt und «aktualisiert vor». */
.stats { display: flex; align-items: center; flex-wrap: wrap; gap: 0;
         font-size: 12px; color: var(--text-3); white-space: nowrap; }
.stat { display: inline-flex; align-items: center; gap: 5px; }
.stat + .stat::before { content: '·'; margin: 0 8px; color: var(--line); }
.stat b { font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fresh { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
         font-size: 12px; color: var(--text-3); white-space: nowrap; }
.fresh .dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; }
.fresh .dot.warn { background: #ff9f0a; } .fresh .dot.bad { background: #ff453a; }

/* ─────────────────────────── Filter ─────────────────────────── */

.filters { position: sticky; top: 44px; z-index: 50; background: var(--bg); padding-top: 12px; }
.filters::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: var(--line-2); }

/* Themen umbrechen statt seitlich scrollen – so bleibt die Leiste
   exakt so breit wie das Kachelraster darunter. Standardmässig eine
   Zeile, der Rest kommt per Schaltfläche. */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 0;
  /* exakt eine Zeile: Chiphöhe 30 + Abstand 6 – so lugt die zweite
     Zeile nicht als Streifen darunter hervor */
  max-height: 36px; overflow: hidden;
  transition: max-height .28s var(--ease);
}
.chips.open { max-height: 420px; }

.chipsmore {
  border: 0; background: transparent; cursor: pointer; color: var(--accent);
  font-size: 12.5px; padding: 7px 2px 10px; display: block;
}
.chipsmore:hover { text-decoration: underline; }

/* Kopfzeile der Filterzone: immer sichtbar, auch wenn der Rest zu ist */
/* Eine Zeile, immer. Was nicht passt, scrollt innerhalb von .active. */
.filterbar { display: flex; align-items: center; gap: 10px; padding-bottom: 9px;
             flex-wrap: nowrap; min-height: 34px; }
.ctl.fbtn { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
             background-image: none; font-weight: 500; }
.fbtn svg { opacity: .55; }
.fbadge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fbadge[hidden] { display: none; }
/* Themen und Auswahlfelder sind zu, bis «Filter» gedrückt wird – auf jeder
   Breite. Sie liegen als Schublade direkt unter der Zeile ÜBER dem Inhalt:
   nichts rutscht, beim Stufenwechsel schliesst sie sich (syncZoom). */
.filters .wrap { position: relative; }
.filterbody {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 55; margin-top: 1px;
  background: var(--surface); border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 14px 14px; box-shadow: var(--shadow-h); padding: 12px 16px 2px;
}
.filterbody.open { display: block; animation: fslide .22s var(--ease); }
.fhint { margin: 0 0 9px; font-size: 12px; color: var(--text-3); }
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap;
  transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--text-3); color: var(--text); }
.chip .n { font-size: 10.5px; font-variant-numeric: tabular-nums; background: var(--surface-2);
           border-radius: var(--r-pill); padding: 1px 6px; color: var(--text-3); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip[aria-pressed="true"] .n { background: rgba(255,255,255,.2); color: inherit; }
html[data-theme="dark"] .chip[aria-pressed="true"] .n { background: rgba(0,0,0,.25); }

.controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-bottom: 11px; }
.controls .ctl { flex: 0 1 auto; }
.ctl {
  height: 31px; padding: 0 28px 0 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface) no-repeat right 9px center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a93' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-size: 12px; cursor: pointer; font-size: 12.5px; appearance: none; -webkit-appearance: none;
  transition: border-color .16s var(--ease);
}
.ctl:hover { border-color: var(--text-3); }
.linkbtn { border: 0; background: transparent; cursor: pointer; color: var(--accent); font-size: 12.5px; height: 31px; padding: 0 4px; }
.linkbtn:hover { text-decoration: underline; }
.count { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Quellen-Popover */
.srcwrap { position: relative; }
.srcpanel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; width: min(440px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 15px;
  box-shadow: var(--shadow-h); padding: 11px; display: none;
}
.srcpanel.open { display: block; animation: pop .16s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.srchead { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; }
.srchead input { flex: 1; height: 31px; padding: 0 10px; font-size: 12.5px; border: 1px solid var(--line);
                 border-radius: 9px; background: var(--surface-2); outline: none; }
.srclist { max-height: 330px; overflow-y: auto; margin: 0 -4px; }
.srcgrp { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
          color: var(--text-3); padding: 10px 8px 4px; }
.srcrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.srcrow:hover { background: var(--surface-2); }
.srcrow input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.srcrow img { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.srcrow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcrow .n { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.srcrow.dead .nm { color: var(--text-3); text-decoration: line-through; }

/* ──────────────────────── Typ-Badges ──────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .035em;
  text-transform: uppercase; white-space: nowrap;
}
.badge.green  { background: var(--c-green-bg);  color: var(--c-green); }
.badge.red    { background: var(--c-red-bg);    color: var(--c-red); }
.badge.purple { background: var(--c-purple-bg); color: var(--c-purple); }
.badge.violet { background: var(--c-violet-bg); color: var(--c-violet); }
.badge.pink   { background: var(--c-pink-bg);   color: var(--c-pink); }
.badge.blue   { background: var(--c-blue-bg);   color: var(--c-blue); }
.badge.amber  { background: var(--c-amber-bg);  color: var(--c-amber); }
.badge.teal   { background: var(--c-teal-bg);   color: var(--c-teal); }
.badge.cyan   { background: var(--c-cyan-bg);   color: var(--c-cyan); }
.badge.indigo { background: var(--c-indigo-bg); color: var(--c-indigo); }
.badge.slate  { background: var(--c-slate-bg);  color: var(--c-slate); }
.badge.gray   { background: var(--c-gray-bg);   color: var(--c-gray); }
.badge.solid  { background: #ff453a; color: #fff; }

.tag { font-size: 11.5px; font-weight: 600; color: var(--text-3); letter-spacing: .01em; }

.tierdot {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px;
  font-size: 9px; font-weight: 800; background: var(--surface-2); color: var(--text-3); flex-shrink: 0;
}
.tierdot.A { background: var(--text); color: var(--bg); }
.tierdot.OFFICIAL { background: var(--accent); color: #fff; }

/* ─────────────────────────── Karten ─────────────────────────── */

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); padding: 24px 0 8px; }
.grid.dense { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  animation: rise .34s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(9px); } }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); border-color: var(--line); }
.card:hover .card-h { color: var(--accent); }
.card:hover .card-img img { transform: scale(1.04); }
.card.breaking-card { border-color: rgba(255,69,58,.45); }
#fBreaking[aria-pressed="true"] { background: #ff453a; border-color: transparent; color: #fff; }

.card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0;
                transition: transform .5s var(--ease), opacity .25s var(--ease); }
/* Bis das Bild da ist, schimmert die Fläche; danach blendet es ein. Scheitert
   das Bild, fliegt das <picture> raus und der Farbverlauf der Kachel bleibt. */
.card-img picture { position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-2) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shim 1.3s ease-in-out infinite; }
.card-img picture.ok { animation: none; background: none; }
.card-img picture.ok img { opacity: 1; }
.card-img .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px;
                font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.28); }
.card-img .ovl { position: absolute; left: 9px; top: 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.card-img .ovl .badge { -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); }

.card-body { padding: 13px 15px 0; flex: 1; display: flex; flex-direction: column; }
.card-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.card-h {
  margin: 0 0 7px; font-size: 15.5px; font-weight: 650; line-height: 1.31; letter-spacing: -.018em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s var(--ease);
}
.card-x { margin: 0; font-size: 13px; line-height: 1.46; color: var(--text-2);
          display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card-f { display: flex; align-items: center; gap: 7px; padding: 12px 15px 13px; margin-top: auto;
          font-size: 11.5px; color: var(--text-3); }
.card-f img { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.card-f .src { font-weight: 650; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-f time { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.srcn {
  display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--surface-2); font-size: 10.5px; font-weight: 700; color: var(--text-2); flex-shrink: 0;
}
.srcn.multi { background: var(--accent-sf); color: var(--accent); }

/* Resonanz-Anzeige */
/* ───────────────────────── Kurzerklärungen ─────────────────────────
   Ein Element am Seitenende, per JS positioniert. Innerhalb der Kachel
   ginge es nicht: .card hat overflow:hidden. */
.tip {
  position: fixed; z-index: 200; max-width: 290px; padding: 9px 12px;
  border-radius: 11px; background: var(--text); color: var(--bg);
  font-size: 12.5px; line-height: 1.45; letter-spacing: -.005em;
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .13s var(--ease), transform .13s var(--ease), visibility .13s;
  pointer-events: none; text-transform: none; font-weight: 400;
}
.tip.on { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } .card-img picture, .sh, .l { animation: none; background: var(--surface-2); } }

/* Erklärbare Anzeigen: Cursor und Fokusrahmen zeigen, dass da etwas ist */
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.card [data-tip] { cursor: pointer; }

.meter { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.meter .bar { width: 34px; height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 3px; background: var(--c-amber); }
.meter .bar.hi i { background: var(--c-green); }
.meter .bar.lo i { background: var(--c-red); }
.meter .v { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-3); }

/* ─────────────────────── Story-Detail (Overlay) ─────────────────────── */

.sheet-bg {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .26s var(--ease);
}
.sheet-bg.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(720px, 100vw);
  background: var(--bg); box-shadow: var(--shadow-xl); overflow-y: auto;
  transform: translateX(100%); transition: transform .3s var(--ease);
}
.sheet.open { transform: none; }
.sheet-hd {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line-2);
}
.sheet-bd { padding: 22px 26px 60px; }
.sheet-bd h2 { margin: 12px 0 10px; font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.18; }
.sheet-bd .lead { font-size: 15px; color: var(--text-2); line-height: 1.55; margin: 0 0 18px; }
.sheet-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 13px; display: block; margin-bottom: 18px; background: var(--surface-2); }

/* Ein klarer nächster Schritt aus der Vorschau heraus */
.sheet-act { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px; }
.btn-main {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 11px; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 550; cursor: pointer; text-decoration: none;
  transition: filter .16s var(--ease);
}
.btn-main:hover { filter: brightness(1.08); }
.btn-main.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-main.ghost:hover { background: var(--surface-2); filter: none; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; margin-bottom: 24px; }
.kpi { background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 13px; }
.kpi .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 4px; }
.kpi .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 11px; color: var(--text-3); }

.sec-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
         color: var(--text-3); margin: 26px 0 12px; }

.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-i { position: relative; padding: 0 0 20px; }
.tl-i::before {
  content: ''; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--text-3);
}
.tl-i.orig::before { border-color: var(--accent); background: var(--accent); }
.tl-i.official::before { border-color: var(--c-green); background: var(--c-green); }
.tl-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; font-size: 11.5px; color: var(--text-3); }
.tl-top .who { font-weight: 700; color: var(--text-2); font-size: 12.5px; }
.tl-i a.t { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.36; letter-spacing: -.014em; margin-bottom: 3px; }
.tl-i a.t:hover { color: var(--accent); text-decoration: underline; }
.tl-i p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

.people { display: flex; flex-wrap: wrap; gap: 7px; }
.person { display: inline-flex; align-items: center; gap: 7px; background: var(--surface);
          border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; }
.person b { font-weight: 650; } .person span { color: var(--text-3); font-size: 11.5px; }
/* Als Schaltfläche gerendert, wenn die Person filterbar ist */
button.person { cursor: pointer; color: inherit; font-family: inherit; transition:
  border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease); }
button.person:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-sf); }
button.person:hover span { color: var(--accent); }
button.person[aria-pressed="true"] { background: var(--text); border-color: transparent; color: var(--bg); }
button.person[aria-pressed="true"] span { color: var(--bg); opacity: .7; }

/* ─────────────────────── Analystenurteil ───────────────────────
   Konsens, Verteilung und Kursziel. Kommt nichts vom Anbieter,
   erscheint der Block gar nicht – geschätzt wird hier nichts. */
.analysis {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: var(--shadow); margin-bottom: 26px; overflow: hidden;
}
.rating { padding: 14px 16px 15px; }
.analysis .rating + .fin { border-top: 1px solid var(--line-2); }
.rating-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.ratekey {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--text);
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
.ratekey.up   { background: var(--c-green-bg); color: var(--c-green); }
.ratekey.down { background: var(--c-red-bg);   color: var(--c-red); }
.ratemeta { font-size: 12px; color: var(--text-3); }
.ratemeta b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.ratemeta .up { color: var(--c-green); font-weight: 650; }
.ratemeta .down { color: var(--c-red); font-weight: 650; }
/* Das Kursziel ist die Kernaussage – gross, links, mit Abstand zum Kurs
   und der Lage im Jahresbereich. Die Verteilung steht daneben. */
.ratebody { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 4px; }
@media (min-width: 860px) { .ratebody { grid-template-columns: 300px minmax(0, 1fr); gap: 30px; } }
.ratetarget { min-width: 0; }
.ratetarget .tk {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.ratetarget .tv {
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.ratetarget .tv span { font-size: 15px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.ratetarget .td { margin-top: 4px; font-size: 13px; font-weight: 600; }
.ratetarget .td.up { color: var(--c-green); } .ratetarget .td.down { color: var(--c-red); }
.trange {
  display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums; cursor: help;
}
.trange b { color: var(--text-2); font-weight: 650; }
.ratedist { min-width: 0; }

/* Verteilung als Liste statt als ein einziger gestapelter Balken:
   jede Stufe mit Anzahl und Anteil, waagerecht. */
.ratelist { display: flex; flex-direction: column; gap: 5px; }
.raterow {
  display: grid; grid-template-columns: 108px minmax(60px, 1fr) 34px 40px;
  align-items: center; gap: 10px; font-size: 12.5px;
}
.raterow.zero { opacity: .38; }
.raterow .rk { color: var(--text-2); }
.raterow .rb { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.raterow .rb i { display: block; height: 100%; border-radius: 4px; }
.raterow .rc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.raterow .rp { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 11.5px; }

/* Lage des Kursziels im Jahresbereich */
.ratespan {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.ratespan .track {
  position: relative; flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2), var(--line));
}
.ratespan .track i {
  position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 1px;
  background: var(--accent); transform: translateX(-1px);
}
.ratespan .track b {
  position: absolute; top: -5px; width: 0; height: 0; transform: translateX(-4px);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text);
}
.ratetrend { margin-top: 10px; font-size: 12px; color: var(--text-2); }
.ratenote {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-size: 11px; line-height: 1.5; color: var(--text-3);
}
@media (max-width: 620px) {
  .raterow { grid-template-columns: 92px minmax(40px, 1fr) 30px 36px; gap: 7px; font-size: 12px; }
}

/* ────────────────────── Umsatz und Gewinn ──────────────────────
   Waagerechte Balken, eine Zeile je Zeitraum. Kein Achsendiagramm:
   die Zahl steht daneben, der Balken zeigt nur das Verhältnis. */
.fin { padding: 15px 16px 14px; }
.fin-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.finrows { display: flex; flex-direction: column; gap: 9px; }
.finrow {
  display: grid; grid-template-columns: 62px 1fr 118px 44px;
  align-items: center; gap: 12px;
}
.finrow .ft { font-size: 11.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.finrow .fb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fbar { height: 9px; border-radius: 3px; background: var(--surface-2); overflow: hidden; cursor: help; }
.fbar i { display: block; height: 100%; border-radius: 3px; }
.finrow .fv { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.finrow .fv span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.35; }
.finrow .fv span + span { color: var(--text-2); font-size: 11.5px; }
.finrow .fv .down { color: var(--c-red); }
.finrow .fm { font-size: 11.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.fin-legend {
  display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--text-3);
}
.fin-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
@media (max-width: 620px) {
  .finrow { grid-template-columns: 46px 1fr 82px; }
  .finrow .fm { display: none; }
}

/* ─────────────────── Kurzfassung zur Auswahl ───────────────────
   Aufklappbar, direkt über dem Raster. Alle Sätze sind aus dem
   Bestand gerechnet – hier wird nichts formuliert, was nicht in den
   Zahlen daneben steht. */
.brief {
  margin: 18px 0 4px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.brief > summary {
  list-style: none; cursor: pointer; padding: 11px 15px;
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); user-select: none;
}
.brief > summary::-webkit-details-marker { display: none; }
.brief > summary::after {
  content: ''; width: 7px; height: 7px; margin-left: auto;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.brief[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.brief > summary:hover { color: var(--text); }
.brief-meta {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-2); margin-left: 4px;
}
/* Text links, Zahlen rechts: der Fliesstext braucht keine volle Breite,
   und neben ihm steht ohnehin Platz leer. */
.brief-bd { padding: 0 15px 13px; }
@media (min-width: 940px) {
  .brief-bd { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 30px; align-items: start; }
}
.brief-lead { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text); max-width: 78ch; }

.brief-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 1px 0; grid-template-columns: 1fr;
}
@media (min-width: 620px) and (max-width: 939px) {
  .brief-list { grid-template-columns: 1fr 1fr; column-gap: 26px; }
}
@media (min-width: 940px) { .brief-list { margin-top: 0; } }
/* Raster statt Flex: so beginnen alle Werte auf derselben Linie,
   auch wenn die Beschriftung unterschiedlich lang ist. */
.brief-list li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline;
  gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--line-2); font-size: 13px;
}
.brief-list li:first-child { border-top: 0; }
.brief-list .k {
  color: var(--text-3); line-height: 1.35;
  font-size: 11px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
}
.brief-list .v { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.brief-list em {
  font-style: normal; color: var(--text-3); font-size: 11.5px;
  font-variant-numeric: tabular-nums; margin-left: 5px;
}
@media (max-width: 720px) {
  .brief { margin-top: 12px; }
  /* Beschriftung und Wert bleiben in einer Zeile, sonst wird der Block
     doppelt so hoch wie die erste Kachel. */
  .brief-list li { grid-template-columns: 108px minmax(0, 1fr); padding: 6px 0; gap: 3px 8px; font-size: 12.5px; }
  .brief-list .k { font-size: 10px; }
  .brief-list em { display: block; margin-left: 0; }
}

/* ─────────────────────── Quellen-Ansicht ───────────────────────
   Ein Verzeichnis, keine Galerie: eine Zeile je Quelle, nach Tier
   gruppiert. Neunzig Karten waren drei Bildschirme lang. */

.srclistview { padding: 18px 0 8px; }
.srcgrp-h {
  display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
}
.srcgrp-h:first-child { margin-top: 0; }
.srcgrp-h span { font-weight: 500; letter-spacing: 0; }
.srcrows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);
}
.srcrow2 {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
  min-width: 0; cursor: pointer; transition: background .14s var(--ease);
}
.srcrow2:hover { background: var(--surface-2); }
.srcrow2:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.srcrow2 .ag {
  font-size: 11px; color: var(--text-3); white-space: nowrap; min-width: 74px; text-align: right;
}
.srcrow2 .ext {
  width: 20px; text-align: center; color: var(--text-3); font-size: 12px; flex-shrink: 0;
  border-radius: 5px;
}
.srcrow2 .ext:hover { color: var(--accent); background: var(--accent-sf); }
.srcrow2 img { border-radius: 4px; flex-shrink: 0; }
.srcrow2 .nm { font-size: 13.5px; font-weight: 550; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.srcrow2 .lg { font-size: 10px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.srcrow2 .st { font-size: 9px; color: var(--c-green); cursor: help; }
.srcrow2.bad .st { color: var(--c-red); }
.srcrow2 .n { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
              min-width: 40px; text-align: right; font-weight: 600; }


/* ─────────────────────── Zustände ─────────────────────── */

.more { display: grid; place-items: center; padding: 28px 0 46px; }
.more button { height: 40px; padding: 0 24px; border: 0; border-radius: var(--r-pill); background: var(--accent);
               color: #fff; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: filter .16s var(--ease); }
.more button:hover { filter: brightness(1.08); }
.empty { text-align: center; padding: 84px 20px; color: var(--text-2); }
.empty .big { font-size: 38px; margin-bottom: 12px; opacity: .32; }
.empty h3 { margin: 0 0 6px; font-size: 18px; font-weight: 650; color: var(--text); letter-spacing: -.02em; }
.empty p { margin: 0 0 16px; font-size: 13.5px; }

.skel { border-radius: var(--r-card); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); }
.skel .sh { aspect-ratio: 16/9; } .skel .sb { padding: 14px 15px 20px; }
.skel .l { height: 10px; border-radius: 5px; margin-bottom: 9px; }
.sh, .l { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-2) 37%, var(--surface-2) 63%);
          background-size: 400% 100%; animation: shim 1.3s ease-in-out infinite; }
@keyframes shim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.ftr { border-top: 1px solid var(--line-2); margin-top: 22px; padding: 24px 0 40px;
       font-size: 12px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.ftr a:hover { color: var(--accent); }

.totop {
  position: fixed; right: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--header-bg); display: grid; place-items: center;
  cursor: pointer; z-index: 80; opacity: 0; pointer-events: none; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.totop.show { opacity: 1; pointer-events: auto; }
.totop:hover { transform: translateY(-2px); }

/* ─────────────────────── Responsive ─────────────────────── */

/* Schmal: das Suchfeld klappt als Zeile unter dem Kopf auf, statt die
   Reiter zu verdrängen. */
@media (max-width: 720px) {
  .search {
    position: absolute; left: 0; right: 0; top: 100%; width: auto;
    padding: 8px 16px 10px; background: var(--header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--line-2);
  }
  .search svg { left: 26px; }
  .search kbd { display: none; }
}

@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .hdr-in { gap: 12px; }
  .nav { gap: 14px; }
  .grid { gap: 15px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .sheet-bd { padding: 18px 18px 60px; }
}

/* ── Handy: Kopfbereich straffen, Filter zusammenklappen ──
   Vorher belegten Titel, Kennzahlen und Filter über die halbe
   Bildschirmhöhe, bevor die erste Kachel kam. */
@media (max-width: 720px) {
  .stats { font-size: 11px; width: 100%; }
  .count { display: none; }

  .filters { padding-top: 10px; }
  .filterbar { padding-bottom: 10px; }
  .filterbar .count { font-size: 11.5px; }

  /* Auch auf dem Handy nicht alle 20 Themen auf einmal – zwei Zeilen,
     der Rest per Schaltfläche. */
  .chips { max-height: 72px; }
  .chipsmore { padding: 6px 2px 8px; }
  .controls { gap: 6px; }
  .controls .ctl, .controls .chip { flex: 1 1 calc(50% - 3px); min-width: 0; }
  .controls .ctl { padding-right: 26px; }
  .srcwrap { flex: 1 1 calc(50% - 3px); }
  .srcwrap .ctl { width: 100%; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .card-img { aspect-ratio: 2/1; }
  .nav button { font-size: 13px; }
  .sheet-bd h2 { font-size: 21px; }
  .pager { padding: 22px 0 36px; }
  .pg { min-width: 32px; height: 32px; padding: 0 9px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─────────────────────── Seitennavigation ─────────────────────── */

.pager {
  display: flex; justify-content: center; align-items: center; gap: 5px;
  flex-wrap: wrap; padding: 30px 0 50px;
}
.pg {
  min-width: 34px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  cursor: pointer; font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.pg:hover:not(:disabled) { border-color: var(--text-3); color: var(--text); }
.pg:disabled { opacity: .38; cursor: default; }
.pg.on { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 650; }
.pg-gap { color: var(--text-3); padding: 0 3px; font-size: 13px; }

/* ─────────────────────────── Aktie ─────────────────────────── */

/* Eine Serie, eine Farbe. Kein Legendenkasten – die Überschrift benennt sie. */
:root            { --chart: #0071e3; --grid: rgba(0,0,0,.07); }
html[data-theme="dark"] { --chart: #2997ff; --grid: rgba(255,255,255,.09); }

.stock { padding: 24px 0 10px; }
.stock-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.stock-sym { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); margin-bottom: 6px; }
.stock-sym span { font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.stock-price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.stock-price b { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -.035em;
                 line-height: 1; font-variant-numeric: tabular-nums; }
.stock-price .ccy { font-size: 15px; color: var(--text-3); font-weight: 500; }
.stock-note { margin-top: 8px; font-size: 12px; color: var(--text-3); }

.delta { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.delta.up   { color: var(--c-green); }
.delta.down { color: var(--c-red); }

.stock-ranges { padding-bottom: 0; margin-left: auto; -webkit-mask-image: none; mask-image: none; }
.stock-ranges .chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }

.chart { position: relative; margin: 0 0 22px; background: var(--surface);
         border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 10px 6px; box-shadow: var(--shadow); }
/* Höhe kommt aus dem Skript, damit sie exakt zur viewBox passt –
   sonst wird die Grafik gedehnt und der Punkt am Fadenkreuz oval. */
.chart svg { display: block; width: 100%; height: 300px; overflow: visible; }
.chart .gl   { stroke: var(--grid); stroke-width: 1; }
.chart .gt   { fill: var(--text-3); font-size: 11px; font-family: var(--font);
               font-variant-numeric: tabular-nums; }
.chart .carea { fill: url(#cg); }
.chart .cline { fill: none; stroke: var(--chart); stroke-width: 2;
                stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .cx   { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .cd   { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.chart figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                    padding: 8px 4px 4px; font-size: 11.5px; color: var(--text-3);
                    font-variant-numeric: tabular-nums; }

.ctip {
  position: absolute; top: 16px; pointer-events: none; z-index: 3;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow-h); padding: 7px 11px; font-size: 12px; white-space: nowrap;
}
.ctip b { display: block; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ctip span { color: var(--text-3); font-size: 11px; }

.stock-kpis { margin-bottom: 10px; }
.stock-kpis .kpi .v { font-size: 16px; }
.kpi .sub { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 2px; }

@media (max-width: 700px) {
  .stock-ranges { margin-left: 0; width: 100%; overflow-x: auto; }
  .stock-head { gap: 14px; }
}

/* Einträge pro Seite – sitzt rechts in der Seitennavigation */
.pg-per { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px;
          font-size: 12.5px; color: var(--text-3); }
.pg-per .ctl { height: 34px; padding: 0 26px 0 10px; font-size: 12.5px; }
@media (max-width: 620px) {
  .pg-per { margin-left: 0; width: 100%; justify-content: center; margin-top: 8px; }
}

/* ─────────────────── Portalumschalter ───────────────────
   Die Wortmarke ist eine Schaltfläche. Ein Klick öffnet ein Overlay
   über die volle Fensterbreite mit den Ansichten dieses Portals und
   allen sechs Portalen.

   Das Panel hängt in `.hdr` (sticky, also positioniert) und steht auf
   `absolute; left:0; right:0` — volle Breite ohne Messung. Die
   Verdunklung liegt BEWUSST ausserhalb von `.hdr`: dort hat ein
   `backdrop-filter` den Bezugsrahmen für `position:fixed` verschoben,
   und die Fläche war nur so hoch wie die Kopfzeile. */

.brand {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: inherit; border-radius: 9px;
}
.brand:hover .brand-txt { color: var(--accent); }
.brand-caret { color: var(--text-3); transition: transform .18s var(--ease); }
.brand[aria-expanded="true"] .brand-caret { transform: rotate(180deg); }

.pmenu-bg {
  position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.32);
  animation: fade .18s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.pmenu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-h);
  animation: pslide .2s var(--ease);
  max-height: calc(100vh - 44px); overflow-y: auto;
}
@keyframes pslide { from { opacity: 0; transform: translateY(-8px); } }

.pmenu-in { display: grid; grid-template-columns: 260px 1fr; gap: 34px;
            padding-top: 22px; padding-bottom: 26px; }

.pmenu-hd {
  padding: 0 10px 9px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}

/* Ansichten dieses Portals */
.pmenu-views { display: flex; flex-direction: column; gap: 2px; }
.pmenu-views button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 9px 10px; border-radius: 10px; color: var(--text);
  font-size: 14px; font-weight: 500;
}
.pmenu-views button:hover { background: var(--surface-2); }
.pmenu-views button[aria-current="page"] { background: var(--text); color: var(--bg); font-weight: 600; }
.pmenu-views .pm-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); flex-shrink: 0;
}
.pmenu-views button[aria-current="page"] .pm-dot { background: var(--bg); }

/* Die sechs Portale */
.pmenu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pmenu-grid a, .pmenu-grid span.soon {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: 12px; text-decoration: none; color: var(--text);
  border: 1px solid transparent;
}
.pmenu-grid a:hover { background: var(--surface-2); border-color: var(--line-2); }
.pmenu-grid a[aria-current="true"] { background: var(--surface-2); border-color: var(--line); }
.pmenu-grid span.soon { opacity: .42; cursor: default; }
.pmenu .pm-mark {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 8px; background: var(--text); color: var(--bg);
  font-size: 13px; font-weight: 700;
}
.pmenu a[aria-current="true"] .pm-mark { background: var(--accent); }
.pmenu .pm-txt { min-width: 0; flex: 1; }
.pmenu .pm-name {
  display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.25; white-space: nowrap;
}
.pmenu .pm-sub {
  display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.pmenu .pm-badge {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3); flex-shrink: 0;
}

/* Fusszeile: die beiden Einsteller stehen rechts neben dem Admin-Link. */
.ftr-ctl { display: flex; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .pmenu-grid { grid-template-columns: repeat(2, 1fr); }
  .pmenu-in { grid-template-columns: 210px 1fr; gap: 24px; }
}

@media (max-width: 620px) {
  /* Untereinander statt nebeneinander. Die Ansichten zuerst — danach
     greift man häufiger als nach einem anderen Portal. */
  .pmenu-in { grid-template-columns: 1fr; gap: 22px;
              padding-top: 16px; padding-bottom: 20px; }
  .pmenu-grid { grid-template-columns: 1fr; }
  .pmenu-views { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .pmenu-views button { width: auto; padding: 8px 13px; }
  .pmenu-views .pm-dot { display: none; }
  /* Die Wortmarke bleibt jetzt auch schmal sichtbar — der Platz kommt
     von Sprachwahl und Themenschalter, die in den Fuss gewandert sind. */
  .brand-txt { display: block; font-size: 14px; }
  /* Der „nach oben"-Kreis klebt fest unten rechts am Fenster und lag
     sonst genau auf dem Hell/Dunkel-Schalter. 56px = 40 Kreis + 22 Rand. */
  .ftr-ctl { margin-right: 56px; }
}

/* ─────────────────────── Zeit-Zoom ───────────────────────
   Jahre › Monate › Wochen › Stories wie in Apple Fotos: eine Kachel je
   Zeitraum aus derselben Kachelstruktur, klebende Abschnittsköpfe,
   Stufenschalter oben in der Leiste, auf dem Handy unten fixiert. */
#zoom { flex-shrink: 0; }
#zoom[hidden] { display: none; }
.znow { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 4px 7px; min-width: 0; overflow: hidden;
          white-space: nowrap; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--accent); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 650; }
.zlist { touch-action: pan-y; }   /* Pinch zoomt die Stufe, nicht die Seite – nur auf dem Zeitleisten-Raster, in «Artikel» zoomt der Browser */
.zsec .grid { padding-top: 12px; }
.zsec:first-child > .grid:first-child { padding-top: 24px; }   /* ohne Abschnittskopf (Jahre) wie das Artikelraster */
.zhd { position: sticky; top: var(--ztop, 90px); z-index: 5; margin: 14px 0 0; padding: 8px 0 6px;
       font-size: 17px; letter-spacing: -.01em; background: var(--bg); }
.zcard { position: relative; }
.zgo { color: inherit; text-decoration: none; }
.zgo::after { content: ''; position: absolute; inset: 0; }
.zcard:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge.z { background: rgba(0,0,0,.6); color: #fff; }
.tag.hot { color: var(--accent); background: var(--accent-sf); padding: 3px 8px; border-radius: var(--r-pill); }
.znext { list-style: none; padding: 0; }
.znext li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.znext li::before { content: '· '; color: var(--text-3); }
.zbar { flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.zbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.zin { animation: zin .2s var(--ease) both; }
@keyframes zin { from { opacity: 0; transform: scale(.96); } }
::view-transition-old(zcard), ::view-transition-new(zcard), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  .zin { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Zeitstufen: die Zeile bleibt gleich hoch, nichts verschwindet. Themen und Typ
   filtern auch die Zeitleiste (api r=zoom); Quelle, Sprache, Zeitraum und
   Sortierung gelten nur bei Artikeln und werden gedimmt, nicht entfernt.
   Brotkrumen stehen in der Zeile (breit), die mitlaufende Zeitraum-Anzeige
   nur schmal, wo der Zoom unten klebt. */
.filters[data-zoom="b"] .controls > :not(#fType), .filters[data-zoom="w"] .controls > :not(#fType) { opacity: .45; pointer-events: none; }
@media (min-width: 721px) { .znow { display: none !important; } }
@media (max-width: 720px) { .crumbs { display: none !important; } }
@media (max-width: 720px) {
  #zoom {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70;
    background: var(--header-bg); box-shadow: var(--shadow-h);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  }
  main { padding-bottom: 56px; }
}