/* ==========================================================================
   8unlimited — Website-Designsystem, Variante „Editorial"
   Identisch zur PDF-Identität: warmes Papier, Pagella-Serifen, Carlito-Text,
   HerosCn-Labels, Mono-Zahlen. Editions-Akzente Blau/Bordeaux/Orange.
   ========================================================================== */

/* ---- Schriften ---------------------------------------------------------- */
@font-face { font-family: "Pagella"; src: url("schriften/Pagella-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pagella"; src: url("schriften/Pagella-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pagella"; src: url("schriften/Pagella-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pagella"; src: url("schriften/Pagella-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("schriften/Carlito-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("schriften/Carlito-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("schriften/Carlito-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "HerosCn"; src: url("schriften/HerosCn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "UnlimitedMono"; src: url("schriften/Mono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "UnlimitedMono"; src: url("schriften/Mono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Farbwelt ------------------------------------------------------------ */
:root {
  --papier: #faf5ec;
  --tinte: #241f1a;
  --tinte-soft: #6b6259;
  --hairline: #d8cfc0;
  --box-bg: #f1e9db;
  --box-rand: #e0d6c4;
  --weiss: #fffdf8;

  --daily: #1e4b7a;      --daily-tief: #12314f;
  --weekly: #7c2d3e;     --weekly-tief: #521c28;
  --hotstocks: #b4531f;  --hotstocks-tief: #7c3813;

  --gruen: #1e6b47;
  --rot: #a83a32;
  --akzent: var(--daily);

  --serif: "Pagella", "Georgia", serif;
  --sans: "Carlito", "Calibri", "Helvetica Neue", sans-serif;
  --label: "HerosCn", "Arial Narrow", sans-serif;
  --mono: "UnlimitedMono", "Consolas", monospace;
}

/* ---- Grundgerüst --------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}
a { color: inherit; }
img { display: block; }
.spanne { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 3.5vw, 28px); }

/* ---- Label-Typo (gesperrte Kapitälchen-Anmutung) ------------------------- */
.label {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-soft);
}

/* ---- Masthead ------------------------------------------------------------ */
.masthead { text-align: center; padding: 34px 0 0; }
.masthead .zeichen { width: auto; height: 58px; margin: 0 auto 10px; }  /* offizielles Logo, Seitenverhältnis 460:420 */
.masthead .wortmarke {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 48px);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--tinte);
  text-decoration: none;
  display: inline-block;
}
.masthead .unterzeile { margin-top: 10px; }
.masthead .doppellinie {
  margin-top: 20px;
  border-top: 2px solid var(--tinte);
  position: relative;
}
.masthead .doppellinie::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--tinte);
}

/* ---- Navigation ---------------------------------------------------------- */
.nav {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.nav a {
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--tinte); }
.nav a.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }

/* ---- Marktleiste ---------------------------------------------------------- */
.marktleiste {
  border-bottom: 1px solid var(--hairline);
  background: var(--box-bg);
}
.marktleiste .spanne {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding-top: 9px;
  padding-bottom: 9px;
  align-items: baseline;
}
.markt-item { white-space: nowrap; font-family: var(--mono); font-size: 13px; }
.markt-item .mname {
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-soft);
  margin-right: 7px;
}
.markt-item .stand-hinweis { color: var(--tinte-soft); font-size: 11px; }
.pos { color: var(--gruen); }
.neg { color: var(--rot); }
.neutral { color: var(--tinte-soft); }

/* ---- Sektionen ------------------------------------------------------------ */
main { padding: 40px 0 60px; }
.sektion { margin-bottom: 52px; }
.sektion-kopf {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
}
.sektion-kopf .balken {
  width: 26px; height: 11px;
  background: var(--akzent);
  align-self: center;
  flex: none;
}
.sektion-kopf h2 {
  font-family: var(--label);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinte);
  font-weight: 700;
}
.sektion-kopf .rechts { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--tinte-soft); }

/* ---- Hero (aktuelle Ausgabe) ---------------------------------------------- */
.hero {
  background: var(--weiss);
  border: 1px solid var(--box-rand);
  border-top: 4px solid var(--akzent);
  padding: 34px 38px 30px;
  display: flex;
  gap: 34px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hero .edition-label { color: var(--akzent); margin-bottom: 8px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.12;
  margin-bottom: 8px;
}
.hero .datum { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--tinte-soft); }
.hero .aktionen { display: flex; gap: 12px; flex-wrap: wrap; }

.knopf {
  display: inline-block;
  font-family: var(--label);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px 11px;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.knopf:hover { background: var(--akzent); color: var(--papier); }
.knopf.voll { background: var(--akzent); color: var(--papier); }
.knopf.voll:hover { background: var(--daily-tief); border-color: var(--daily-tief); }

/* ---- Editions-Karten ------------------------------------------------------- */
.editionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.edition-karte {
  background: var(--weiss);
  border: 1px solid var(--box-rand);
  border-top: 4px solid var(--edition-farbe, var(--akzent));
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.edition-karte .kopf { display: flex; justify-content: space-between; align-items: baseline; }
.edition-karte h3 { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.edition-karte .rhythmus { font-family: var(--label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--edition-farbe, var(--akzent)); }
.edition-karte p { font-size: 15.5px; color: var(--tinte-soft); flex: 1; }
.edition-karte .letzte { font-family: var(--mono); font-size: 12.5px; color: var(--tinte-soft); }
.edition-karte .letzte a { color: var(--edition-farbe, var(--akzent)); }
.edition-daily { --edition-farbe: var(--daily); }
.edition-weekly { --edition-farbe: var(--weekly); }
.edition-hotstocks { --edition-farbe: var(--hotstocks); }

/* ---- Archiv ----------------------------------------------------------------- */
.filter { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.chip {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: var(--weiss);
  color: var(--tinte-soft);
  padding: 8px 16px 7px;
  cursor: pointer;
}
.chip.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.monat-titel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--tinte-soft);
  margin: 26px 0 10px;
}
.archiv-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--weiss);
  border: 1px solid var(--box-rand);
  border-left: 4px solid var(--edition-farbe, var(--akzent));
  padding: 15px 20px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.archiv-zeile:hover { background: var(--box-bg); }
.archiv-zeile .titel { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.archiv-zeile .meta { font-family: var(--mono); font-size: 12.5px; color: var(--tinte-soft); margin-left: auto; text-align: right; white-space: nowrap; }
.archiv-zeile .pdf-tag {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.12em;
  border: 1px solid var(--edition-farbe, var(--akzent));
  color: var(--edition-farbe, var(--akzent));
  padding: 3px 8px 2px;
}
.leer-hinweis { color: var(--tinte-soft); font-style: italic; font-family: var(--serif); font-size: 17px; padding: 18px 0; }

/* ---- Thesen-Tracker ----------------------------------------------------------- */
.thesen-hinweis {
  background: var(--box-bg);
  border: 1px solid var(--box-rand);
  padding: 14px 20px;
  font-size: 14.5px;
  color: var(--tinte-soft);
  margin-bottom: 26px;
}
.thesen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.these-karte {
  background: var(--weiss);
  border: 1px solid var(--box-rand);
  padding: 26px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.these-karte .kopf { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.these-karte h3 { font-family: var(--serif); font-size: 23px; font-weight: 700; line-height: 1.2; }
.badge {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 4px 10px 3px; white-space: nowrap; flex: none;
  border: 1px solid var(--tinte-soft); color: var(--tinte-soft);
}
.badge.pro { border-color: var(--gruen); color: var(--gruen); background: rgba(30, 107, 71, 0.07); }
.badge.contra { border-color: var(--rot); color: var(--rot); background: rgba(168, 58, 50, 0.07); }
.these-karte .claim { font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.5; }
.metrik-zeile {
  background: var(--box-bg);
  border: 1px solid var(--box-rand);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.metrik-zeile .mlabel { font-family: var(--label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-soft); align-self: center; }
.pro-contra { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pro-contra h4 { font-family: var(--label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.pro-contra .pro-spalte h4 { color: var(--gruen); }
.pro-contra .contra-spalte h4 { color: var(--rot); }
.pro-contra ul { list-style: none; }
.pro-contra li { font-size: 14px; line-height: 1.45; padding-left: 14px; position: relative; margin-bottom: 8px; color: var(--tinte); }
.pro-contra li::before { content: "—"; position: absolute; left: 0; color: var(--tinte-soft); }
.these-karte .fuss { border-top: 1px solid var(--hairline); padding-top: 12px; font-size: 13.5px; color: var(--tinte-soft); }
.these-karte .fuss strong { color: var(--tinte); }

/* ---- Watchlist ------------------------------------------------------------------ */
.wl-werkzeuge { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; align-items: center; }
.wl-suche {
  font-family: var(--mono);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  background: var(--weiss);
  color: var(--tinte);
  width: 300px;
  max-width: 100%;
}
.wl-suche:focus { outline: none; border-color: var(--akzent); }
.wl-sprungnav { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-sprungnav a {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--tinte-soft);
  border: 1px solid var(--hairline); background: var(--weiss); padding: 5px 10px 4px;
}
.wl-sprungnav a:hover { color: var(--akzent); border-color: var(--akzent); }

.wl-gruppe { margin-bottom: 34px; }
.wl-gruppen-kopf {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 2px solid var(--tinte);
  padding-bottom: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.wl-gruppen-kopf h3 { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.wl-gruppen-kopf .etf { font-family: var(--mono); font-size: 12px; color: var(--tinte-soft); }
.wl-gruppen-kopf .gruppen-delta { margin-left: auto; font-family: var(--mono); font-size: 13px; }

.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.wl-kachel {
  background: var(--weiss);
  border: 1px solid var(--box-rand);
  padding: 13px 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wl-kachel .zeile1 { display: flex; align-items: center; gap: 10px; }
.wl-logo {
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 3px;
}
.wl-logo-ersatz {
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: var(--box-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--label); font-size: 10px; letter-spacing: 0.02em; color: var(--tinte-soft);
}
.wl-kachel .nameblock { min-width: 0; }
.wl-kachel .wname { font-weight: 700; font-size: 14.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-kachel .wticker { font-family: var(--mono); font-size: 11px; color: var(--tinte-soft); }
.wl-kachel .delta-pill {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  padding: 3px 8px 2px; border-radius: 2px;
}
.delta-pill.pos { background: rgba(30, 107, 71, 0.1); }
.delta-pill.neg { background: rgba(168, 58, 50, 0.1); }
.delta-pill.neutral { background: var(--box-bg); }
.wl-kachel .zeile2 { display: flex; align-items: flex-end; gap: 10px; }
.wl-kachel .kurs { font-family: var(--mono); font-size: 15px; }
.wl-kachel .kurs .waehrung { font-size: 11px; color: var(--tinte-soft); }
.wl-kachel .spark { margin-left: auto; }
.wl-kachel .marker { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-tag {
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline); color: var(--tinte-soft); padding: 2px 6px 1px;
}
.mini-tag.kern { border-color: var(--akzent); color: var(--akzent); }
.mini-tag.privat { border-color: var(--hotstocks); color: var(--hotstocks); }

/* ---- Footer ------------------------------------------------------------------------ */
footer {
  border-top: 2px solid var(--tinte);
  padding: 26px 0 40px;
  background: var(--box-bg);
}
footer .spanne { display: flex; flex-direction: column; gap: 8px; }
footer .disclaimer { font-size: 13.5px; color: var(--tinte-soft); max-width: 780px; }
footer .stand { font-family: var(--mono); font-size: 11.5px; color: var(--tinte-soft); }
footer .marke { font-family: var(--serif); font-weight: 700; font-size: 17px; }

/* ---- Responsiv ----------------------------------------------------------------------- */
@media (max-width: 900px) {
  .editionen { grid-template-columns: 1fr; }
  .thesen-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { gap: 20px; }
  .hero { padding: 24px 22px; }
  .pro-contra { grid-template-columns: 1fr; }
  .archiv-zeile .titel { font-size: 16.5px; }
  .wl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .wl-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v2 — Dashboard-Komponenten (Tabs, Charts, Modal, Sektoren, Termine, Leser)
   ========================================================================== */

.mono { font-family: var(--mono); }
.live-badge { color: var(--gruen); font-weight: 700; letter-spacing: 0.08em; }

/* ---- Hero-Zusätze ---- */
.hero .hero-text { max-width: 640px; }
.hero-schlagzeile { margin-top: 12px; font-size: 16px; color: var(--tinte-soft); line-height: 1.5; }

/* ---- Heute wichtig / Movers / Terminvorschau (Start) ---- */
.heute-liste { list-style: none; }
.heute-liste li {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.5;
  padding: 10px 0 10px 20px; position: relative;
  border-bottom: 1px solid var(--hairline);
}
.heute-liste li:last-child { border-bottom: none; }
.heute-liste li::before { content: "■"; position: absolute; left: 0; top: 13px; font-size: 9px; color: var(--akzent); }
.heute-quelle { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--tinte-soft); }

.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mover-spalte h4 { margin-bottom: 10px; }
.mover {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 11px 16px; margin-bottom: 7px; text-decoration: none;
  font-size: 15px;
}
.mover:hover { background: var(--box-bg); }
.mover-name { font-weight: 700; }
.mover .mono { font-size: 13.5px; }

.termin-vorschau { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.termin-mini {
  display: flex; align-items: center; gap: 10px;
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 10px 14px; text-decoration: none;
}
.termin-mini:hover { background: var(--box-bg); }
.termin-mini-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin-mini-datum { margin-left: auto; font-family: var(--mono); font-size: 12px; text-align: right; color: var(--tinte-soft); display: flex; flex-direction: column; }
.termin-countdown { color: var(--akzent); font-family: var(--label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- Archiv v2 ---- */
.archiv-zeile { display: block; cursor: default; }
.archiv-kopfzeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.archiv-aktionen { display: flex; gap: 8px; margin-left: 8px; }
.archiv-aktionen .pdf-tag { text-decoration: none; }
.archiv-aktionen .pdf-tag:hover { background: var(--edition-farbe, var(--akzent)); color: var(--papier); }
.archiv-schlagzeile { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--tinte-soft); }
.kern-toggle {
  margin-top: 9px; background: none; border: none; cursor: pointer;
  font-family: var(--label); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--akzent); padding: 0;
}
.kernpunkte { list-style: none; margin-top: 8px; }
.kernpunkte li { font-size: 14.5px; line-height: 1.5; padding: 5px 0 5px 16px; position: relative; }
.kernpunkte li::before { content: "—"; position: absolute; left: 0; color: var(--tinte-soft); }

/* ---- Tabs ---- */
.tab-leiste {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 2px solid var(--tinte); margin-bottom: 26px;
}
.tab-leiste button {
  font-family: var(--label); font-size: 12.5px; letter-spacing: 0.16em;
  text-transform: uppercase; background: none; border: none; cursor: pointer;
  color: var(--tinte-soft); padding: 10px 16px 9px;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tab-leiste button:hover { color: var(--tinte); }
.tab-leiste button.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 700; }
.tab-panel { display: none; }
.tab-panel.aktiv { display: block; }
.unter-titel { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 26px 0 12px; }

/* ---- Charts ---- */
.chart-wrap { background: var(--weiss); border: 1px solid var(--box-rand); padding: 16px 18px 12px; margin-bottom: 14px; }
.chart-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-titel { font-family: var(--serif); font-weight: 700; font-size: 17px; }
.chart-bereiche { margin-left: auto; display: flex; gap: 4px; }
.chart-bereiche button {
  font-family: var(--mono); font-size: 11.5px; background: none; cursor: pointer;
  border: 1px solid var(--hairline); color: var(--tinte-soft); padding: 3px 9px;
}
.chart-bereiche button.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.chart-flaeche { position: relative; }
.chart-flaeche svg { display: block; width: 100%; height: auto; }
.chart-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--tinte); color: var(--papier);
  font-family: var(--mono); font-size: 11.5px;
  padding: 4px 9px; display: flex; gap: 9px; white-space: nowrap;
}
.chart-tooltip .tt-datum { opacity: 0.75; }
.chart-fussnote { font-family: var(--mono); font-size: 11px; color: var(--tinte-soft); margin-top: 8px; }
.chart-leer { font-family: var(--serif); font-style: italic; color: var(--tinte-soft); padding: 24px 0; }

/* ---- Märkte: Karten ---- */
.index-grid, .rohstoff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-bottom: 18px; }
.index-karte, .rohstoff-karte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 12px 14px; cursor: pointer; text-align: left; font-family: var(--sans);
}
.index-karte:hover, .rohstoff-karte:hover { background: var(--box-bg); }
.index-karte.aktiv { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.ik-name { font-weight: 700; font-size: 14.5px; color: var(--tinte); }
.ik-region { font-size: 10px; }
.ik-kurs { font-size: 15px; color: var(--tinte); }
.ik-delta { font-size: 12.5px; }
.index-karte .spark, .rohstoff-karte .spark { align-self: flex-end; margin-top: -18px; }

.chart-doppel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Bitcoin: Fear & Greed ---- */
.btc-neben { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
#btc-kennzahlen { display: flex; flex-direction: column; gap: 10px; background: var(--weiss); border: 1px solid var(--box-rand); padding: 16px 18px; }
.fg-wrap { background: var(--weiss); border: 1px solid var(--box-rand); padding: 16px 18px; }
.fg-balken { position: relative; height: 14px; margin: 14px 0 6px; }
.fg-skala {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--rot), #c9a227 50%, var(--gruen));
  opacity: 0.75;
}
.fg-marker {
  position: absolute; top: -4px; width: 3px; height: 22px;
  background: var(--tinte); transform: translateX(-50%);
}
.fg-marker.alt { background: var(--tinte-soft); opacity: 0.6; height: 18px; top: -2px; }
.fg-legende { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinte-soft); gap: 8px; flex-wrap: wrap; }

/* ---- Sektoren ---- */
.sektor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sektor-karte {
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 12px;
  scroll-margin-top: 20px;
}
.sektor-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--tinte); padding-bottom: 7px; }
.sektor-kopf h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.sektor-kopf .etf { font-size: 11.5px; color: var(--tinte-soft); margin-left: auto; }
.sektor-text { font-size: 14.5px; line-height: 1.55; color: var(--tinte); }
.sektor-kennzahlen { display: flex; gap: 18px; font-size: 13px; flex-wrap: wrap; }
.sektor-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sektor-logos { display: flex; gap: 5px; flex-wrap: wrap; }
.sektor-mini-logo {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--hairline); background: #fff; object-fit: contain; padding: 2px;
}
.sektor-fuss .knopf.klein { margin-left: auto; }
.knopf.klein { padding: 8px 14px 7px; font-size: 10.5px; }
.gruppen-link {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinte-soft); text-decoration: none;
}
.gruppen-link:hover { color: var(--akzent); }

/* ---- Termine ---- */
.termin-gruppe { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.termin-zeile {
  display: flex; align-items: center; gap: 13px;
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 11px 16px;
}
.termin-zeile.vergangen { opacity: 0.55; }
.termin-zeile .nameblock { min-width: 0; }
.termin-datum { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }

/* ---- Watchlist v2 ---- */
.wl-kachel.klickbar { cursor: pointer; transition: background 0.12s; }
.wl-kachel.klickbar:hover { background: var(--box-bg); }
.mini-tag.termin { border-color: var(--weekly); color: var(--weekly); }
.wl-select {
  font-family: var(--label); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline); background: var(--weiss); color: var(--tinte-soft);
  padding: 9px 12px; cursor: pointer;
}
.wl-check { display: flex; align-items: center; gap: 7px; font-family: var(--label); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-soft); cursor: pointer; }
.wl-check input { accent-color: var(--akzent); width: 15px; height: 15px; }

/* ---- Modal ---- */
.modal-deckel {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(36, 31, 26, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.modal {
  position: relative; background: var(--papier);
  border: 1px solid var(--box-rand); border-top: 4px solid var(--akzent);
  max-width: 680px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 26px 28px;
}
.modal-zu {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 26px; cursor: pointer;
  color: var(--tinte-soft); line-height: 1;
}
.modal-zu:hover { color: var(--tinte); }
.wm-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.wm-logo { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); background: #fff; object-fit: contain; padding: 4px; }
.wm-kopf h3 { font-family: var(--serif); font-size: 23px; font-weight: 700; }
.wm-kurs { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 17px; }
.wm-fakten { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; background: var(--box-bg); border: 1px solid var(--box-rand); }
.wm-fakt { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.wm-thesen { margin-bottom: 14px; font-size: 13px; }
.wm-thesen .mini-tag { text-decoration: none; }
.wm-chart { margin-bottom: 4px; }
.wm-hinweis { font-family: var(--serif); font-style: italic; color: var(--tinte-soft); }
.q-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.q-tabelle th {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-soft); text-align: left; padding: 6px 10px 6px 0;
  border-bottom: 2px solid var(--tinte);
}
.q-tabelle td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); }

/* ---- PDF-Leser ---- */
.leser-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.leser-kopf h1 { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.pdf-rahmen { width: 100%; height: 82vh; border: 1px solid var(--box-rand); background: #fff; }
.pdf-fallback { margin-top: 14px; }

/* ---- Responsiv v2 ---- */
@media (max-width: 900px) {
  .sektor-grid { grid-template-columns: 1fr; }
  .chart-doppel { grid-template-columns: 1fr; }
  .btc-neben { grid-template-columns: 1fr; }
  .movers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v3 — Command Center: Ampel, Treemap, Signale, Lab, Rotation, Portfolio
   ========================================================================== */

/* ---- Gruppierte Navigation ---- */
.nav-gruppen { gap: 26px; align-items: baseline; }
.nav-gruppe { display: inline-flex; gap: 18px; align-items: baseline; }
.nav-gruppe + .nav-gruppe { border-left: 1px solid var(--hairline); padding-left: 26px; }
.nav-gruppen-label {
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--box-rand); user-select: none;
  color: color-mix(in srgb, var(--tinte-soft) 55%, var(--papier));
}

/* ---- Marktampel ---- */
.ampel {
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 20px 24px; display: flex; gap: 26px; flex-wrap: wrap; align-items: center;
  border-left: 5px solid var(--tinte-soft);
}
.ampel-pos { border-left-color: var(--gruen); }
.ampel-neg { border-left-color: var(--rot); }
.ampel-neutral { border-left-color: var(--tinte-soft); }
.ampel-links { min-width: 230px; }
.ampel-modus { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.15; margin: 4px 0 8px; }
.ampel-pos .ampel-modus { color: var(--gruen); }
.ampel-neg .ampel-modus { color: var(--rot); }
.ampel-euphorie {
  font-family: var(--label); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hotstocks); border: 1px solid var(--hotstocks); padding: 3px 8px 2px;
  vertical-align: middle; margin-left: 8px;
}
.ampel-meter { position: relative; height: 7px; background: linear-gradient(90deg, var(--rot), var(--box-bg) 50%, var(--gruen)); opacity: 0.9; }
.ampel-meter-punkt {
  position: absolute; top: -3px; width: 4px; height: 13px;
  background: var(--tinte); transform: translateX(-50%);
}
.ampel-score { margin-top: 6px; font-size: 11.5px; color: var(--tinte-soft); }
.ampel-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 260px; }
.faktor-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--hairline); background: var(--papier);
  padding: 7px 11px 6px; cursor: help;
}
.faktor-chip .fc-name { font-family: var(--label); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-soft); }
.faktor-chip .fc-wert { font-size: 12.5px; }
.ampel-methodik { flex-basis: 100%; font-family: var(--mono); font-size: 11px; color: var(--tinte-soft); }
.ampel-mehr { display: inline-block; margin-top: 10px; text-decoration: none; color: var(--akzent); }

/* ---- Heute in 60 Sekunden ---- */
.heute-doppel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; }
.start-signale { display: flex; flex-direction: column; gap: 10px; }

/* ---- Signal-Karten ---- */
.signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.signal-karte {
  background: var(--weiss); border: 1px solid var(--box-rand);
  border-left: 4px solid var(--tinte-soft);
  padding: 15px 18px 13px; display: flex; flex-direction: column; gap: 7px;
}
.signal-karte.s-hoch { border-left-color: var(--rot); }
.signal-karte.s-mittel { border-left-color: var(--hotstocks); }
.signal-karte.s-info { border-left-color: var(--daily); }
.signal-kopf { display: flex; gap: 10px; align-items: baseline; }
.signal-badge {
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px 2px; border: 1px solid var(--tinte-soft); color: var(--tinte-soft);
}
.signal-badge.neg { border-color: var(--rot); color: var(--rot); background: rgba(168,58,50,0.07); }
.signal-badge.warn { border-color: var(--hotstocks); color: var(--hotstocks); background: rgba(180,83,31,0.07); }
.signal-badge.info { border-color: var(--daily); color: var(--daily); background: rgba(30,75,122,0.07); }
.signal-badge.pos { border-color: var(--gruen); color: var(--gruen); background: rgba(30,107,71,0.07); }
.signal-kat { font-size: 10px; }
.signal-karte h3 { font-family: var(--serif); font-size: 17.5px; font-weight: 700; line-height: 1.25; }
.signal-karte p { font-size: 14px; color: var(--tinte); line-height: 1.5; }
.signal-link {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--akzent); text-decoration: none; margin-top: 2px;
}

/* ---- Treemap ---- */
.treemap { position: relative; background: var(--weiss); border: 1px solid var(--box-rand); overflow: hidden; }
.treemap-gruppe { position: absolute; border: 1px solid var(--papier); }
.treemap-gruppentitel {
  position: absolute; top: 0; left: 0; right: 0; height: 17px;
  font-family: var(--label); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--papier); background: var(--tinte); opacity: 0.85;
  padding: 2px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 2; pointer-events: none;
}
.treemap-kachel {
  position: absolute; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: filter 0.1s;
}
.treemap-kachel:hover { filter: brightness(0.93); z-index: 3; }
.tm-ticker { font-family: var(--label); font-size: 11px; letter-spacing: 0.04em; }
.tm-delta { font-family: var(--mono); font-size: 10.5px; }
.treemap-tip {
  position: absolute; z-index: 10; pointer-events: none;
  background: var(--tinte); color: var(--papier);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
  padding: 8px 12px; max-width: 230px;
}
.treemap-legende {
  position: absolute; right: 8px; bottom: 6px; z-index: 4;
  display: flex; gap: 8px; align-items: center;
  font-size: 10px; color: var(--tinte-soft);
  background: rgba(255,253,248,0.9); padding: 3px 8px;
}
.tm-skala { width: 90px; height: 8px; display: inline-block;
  background: linear-gradient(90deg, #a83a32, #f1e9db 50%, #1e6b47); }

/* ---- Rotations-Board ---- */
.rotations-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--weiss); border: 1px solid var(--box-rand); }
.rotations-tabelle th {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-soft); text-align: left; padding: 10px 14px;
  border-bottom: 2px solid var(--tinte);
}
.rotations-tabelle td { padding: 9px 14px; border-bottom: 1px solid var(--hairline); }
.rot-zeile { cursor: pointer; }
.rot-zeile:hover { background: var(--box-bg); }
.rot-trend { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--tinte-soft); }

/* ---- Hot-Stock-Lab ---- */
.lab-aggregat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.lab-kachel {
  background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 5px;
}
.lab-wert { font-size: 19px; }
.lab-karte {
  background: var(--weiss); border: 1px solid var(--box-rand);
  border-top: 4px solid var(--hotstocks);
  padding: 20px 24px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.lab-kopf { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lab-kopf h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.lab-perf { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.lab-perf-wert { font-size: 24px; font-weight: 700; }
.lab-meta { font-size: 12.5px; color: var(--tinte-soft); }
.lab-spekulativ {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hotstocks); border: 1px solid var(--hotstocks);
  padding: 4px 10px 3px; align-self: flex-start;
}
.lab-kennzahlen { font-size: 12.5px; }
.lab-anlass { font-size: 14.5px; line-height: 1.5; }
.lab-these { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.55; border-left: 3px solid var(--hotstocks); padding-left: 14px; }

/* ---- Thesen v3 ---- */
.these-badges { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.these-seit { font-size: 11px; color: var(--tinte-soft); }
.these-historie { display: flex; gap: 6px; align-items: center; }
.historie-punkt { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid var(--hairline); cursor: help; }
.historie-punkt.pos { background: var(--gruen); }
.historie-punkt.neg { background: var(--rot); }
.historie-punkt.neutral { background: var(--box-bg); }

/* ---- Redaktions-Zitat (Märkte) ---- */
.redaktion-zitat {
  margin: 16px 0 22px; padding: 16px 22px;
  background: var(--box-bg); border-left: 4px solid var(--akzent);
}
.redaktion-zitat p { font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.55; }
.redaktion-zitat footer { margin-top: 8px; font-size: 11px; color: var(--tinte-soft); }

/* ---- Erwähnungen (Modal & Portfolio) ---- */
.wm-erwaehnungen, .wm-erwaehnung { margin-top: 6px; }
.wm-erwaehnung {
  border-left: 3px solid var(--hairline); padding: 4px 0 4px 12px; margin-bottom: 8px;
}
.wm-erwaehnung .mono { font-size: 11px; color: var(--tinte-soft); }
.wm-erwaehnung p { font-size: 13.5px; line-height: 1.5; }
.mini-tag.erwaehnt { border-color: var(--daily); color: var(--daily); }
.mover-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 8px; }
.mover { width: 100%; text-align: left; font-family: var(--sans); border: 1px solid var(--box-rand); background: var(--weiss); cursor: pointer; }
.mover .wticker { font-size: 11px; color: var(--tinte-soft); font-weight: 400; }

/* ---- Portfolio ---- */
.pf-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr auto; gap: 8px; margin-bottom: 12px; }
.pf-form .wl-suche, .pf-form .wl-select { width: 100%; }
.pf-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.pf-tabelle td, .pf-tabelle th { padding-right: 14px; }
.pf-entfernen {
  border: 1px solid var(--hairline); background: none; cursor: pointer;
  color: var(--tinte-soft); font-size: 15px; line-height: 1; padding: 3px 8px;
}
.pf-entfernen:hover { border-color: var(--rot); color: var(--rot); }
.pf-doppel { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.pf-block { background: var(--weiss); border: 1px solid var(--box-rand); padding: 18px 20px; margin-bottom: 16px; }
.pf-block h4 { margin-bottom: 12px; }
.pf-balken-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13.5px; }
.pf-balken-name { width: 150px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-balken { flex: 1; height: 12px; background: var(--box-bg); border: 1px solid var(--box-rand); }
.pf-balken-fuellung { display: block; height: 100%; background: var(--daily); opacity: 0.75; }
.pf-roaster { margin-top: 26px; background: var(--weiss); border: 1px solid var(--box-rand); padding: 22px 24px; }
.pf-roaster:empty { display: none; }
.roaster-kopf { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.roaster-score {
  display: flex; align-items: baseline; gap: 5px;
  border: 2px solid var(--tinte-soft); padding: 10px 16px;
}
.roaster-score .mono { font-size: 32px; font-weight: 700; }
.roaster-score.pos { border-color: var(--gruen); color: var(--gruen); }
.roaster-score.warn { border-color: var(--hotstocks); color: var(--hotstocks); }
.roaster-score.neg { border-color: var(--rot); color: var(--rot); }
.roaster-fazit { font-family: var(--serif); font-style: italic; font-size: 17px; max-width: 520px; }
.roaster-befund { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--hairline); }
.roaster-befund p { font-size: 14.5px; line-height: 1.5; }
.roaster-befund .signal-badge { flex: none; margin-top: 2px; }

/* ---- Responsiv v3 ---- */
@media (max-width: 900px) {
  .heute-doppel { grid-template-columns: 1fr; }
  .signal-grid { grid-template-columns: 1fr; }
  .pf-doppel { grid-template-columns: 1fr; }
  .pf-form { grid-template-columns: 1fr 1fr; }
  .nav-gruppe + .nav-gruppe { border-left: none; padding-left: 0; }
}

/* ==========================================================================
   v4 — Dunkles Editorial-Schema (AP3). Aktiviert über html[data-thema="dunkel"],
   Default folgt prefers-color-scheme (Inline-Script im <head> verhindert Flackern).
   ========================================================================== */
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --papier: #16130f;
  --tinte: #eae2d3;
  --tinte-soft: #a2988a;
  --hairline: #38322a;
  --box-bg: #201c16;
  --box-rand: #322c24;
  --weiss: #1c1813;

  --daily: #7fb0e0;      --daily-tief: #a9cceb;
  --weekly: #d791a1;     --weekly-tief: #e4b1bd;
  --hotstocks: #e09a63;  --hotstocks-tief: #ecb98f;

  --gruen: #58b98a;      /* colorblind-tauglicher im Dunkeln */
  --rot: #e07a6b;
}
:root[data-thema="dunkel"] .treemap-gruppentitel { background: #0c0a07; color: var(--tinte-soft); }
:root[data-thema="dunkel"] .chart-tooltip,
:root[data-thema="dunkel"] .treemap-tip { background: #efe8da; color: #16130f; }
:root[data-thema="dunkel"] .tm-skala { background: linear-gradient(90deg, #e07a6b, #201c16 50%, #58b98a); }
:root[data-thema="dunkel"] .fg-skala { opacity: 0.85; }
:root[data-thema="dunkel"] .wl-logo,
:root[data-thema="dunkel"] .wm-logo,
:root[data-thema="dunkel"] .sektor-mini-logo { background: #f2ede3; }
:root[data-thema="dunkel"] .ampel-meter { background: linear-gradient(90deg, var(--rot), var(--box-bg) 50%, var(--gruen)); }
:root[data-thema="dunkel"] .ampel-meter-punkt,
:root[data-thema="dunkel"] .fg-marker { background: var(--tinte); }
:root[data-thema="dunkel"] .chip.aktiv { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
:root[data-thema="dunkel"] .chart-bereiche button.aktiv { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
:root[data-thema="dunkel"] .knopf.voll { color: var(--papier); }
:root[data-thema="dunkel"] .knopf:hover { color: var(--papier); }
:root[data-thema="dunkel"] .nav a.aktiv { color: var(--daily); border-bottom-color: var(--daily); }
:root[data-thema="dunkel"] embed.pdf-rahmen { background: #f2ede3; }

/* Kopf-Utility oben rechts: Portfolio · Konto · Theme (statt in der Tab-Leiste) */
.masthead { position: relative; }
.kopf-utility {
  position: absolute; right: 26px; top: 24px; z-index: 6;
  display: flex; align-items: center; gap: 14px;
}
.kopf-utility .kopf-link {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--tinte-soft);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.kopf-utility .kopf-link:hover { color: var(--tinte); }
.kopf-utility .kopf-link.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }
.thema-knopf {
  background: none; border: 1px solid var(--hairline); color: var(--tinte-soft);
  font-family: var(--label); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 6px 11px 5px; cursor: pointer;
}
.thema-knopf:hover { color: var(--tinte); border-color: var(--tinte-soft); }

/* Logo-Umschaltung Hell/Dunkel (weiße 8 im Dunkelmodus) */
.zeichen-dunkel { display: none; }
:root[data-thema="dunkel"] .zeichen-hell { display: none; }
:root[data-thema="dunkel"] .zeichen-dunkel { display: block; }

/* Navigation: Research und Intelligence untereinander statt nebeneinander */
.nav.nav-gruppen { flex-direction: column; align-items: center; gap: 9px; }
.nav.nav-gruppen .nav-gruppe + .nav-gruppe { border-left: none; padding-left: 0; }

@media (max-width: 760px) {
  .kopf-utility { position: static; justify-content: center; margin: 12px 0 2px; }
}

/* AP2 — Movers als Karten */
.mover { position: relative; padding: 11px 16px 11px 19px; }
.mover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hairline); }
.mover.pos-kante::before { background: var(--gruen); }
.mover.neg-kante::before { background: var(--rot); }
.mover .rang {
  font-family: var(--label); font-size: 10px; color: var(--tinte-soft);
  width: 18px; flex: none;
}
.mover .mover-spark { margin-left: auto; flex: none; }
.mover .mono.delta-gross { font-size: 15px; font-weight: 700; margin-left: 10px; }

/* AP1 — Treemap-Logos + Dichte-Umschalter */
.tm-logo {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; object-fit: contain; padding: 2px; margin-bottom: 3px;
  border: 1px solid rgba(0,0,0,0.12);
}

/* v4c — Donut + geführter Portfolio-Flow + Profil-Panel */
.donut-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.donut-svg { width: 200px; height: 200px; flex: none; }
.donut-teil { cursor: pointer; stroke: var(--weiss); stroke-width: 1.5; transition: opacity 0.12s; }
.donut-teil:hover { opacity: 0.82; }
.donut-mitte { font-family: var(--mono); font-size: 11.5px; fill: var(--tinte); }
.donut-legende { flex: 1; min-width: 180px; }
.donut-legende-zeile { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 3px 0; cursor: default; }
.donut-punkt { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.donut-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pf-vorschau {
  display: flex; align-items: center; gap: 13px;
  background: var(--box-bg); border: 1px solid var(--box-rand);
  padding: 12px 16px; margin: 10px 0 4px;
}
.pf-vorschau .hinweis { font-size: 12.5px; color: var(--tinte-soft); }
.pf-hilfe { font-size: 12px; color: var(--tinte-soft); margin: 4px 0 14px; }
.pf-tabelle .wl-logo { width: 24px; height: 24px; }
.pf-tabelle td:first-child { display: flex; align-items: center; gap: 9px; }

/* ==========================================================================
   Ausbaustufe 5 · Kopf-Ausrichtung, Währungsumschalter, runde Kacheln
   ========================================================================== */

/* (1) Kopfleiste: Portfolio · Konto · €/$ · Theme auf einer Linie, gleiche Höhe */
.kopf-utility { align-items: center; gap: 12px; }
.kopf-utility .kopf-link,
.kopf-utility .thema-knopf,
.kopf-utility .waehrung-schalter button {
  height: 28px; display: inline-flex; align-items: center; box-sizing: border-box;
}
.kopf-utility .kopf-link {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinte-soft); text-decoration: none; border-bottom: none; padding: 0;
}
.kopf-utility .kopf-link:hover { color: var(--tinte); }
.kopf-utility .kopf-link.aktiv { color: var(--akzent); box-shadow: inset 0 -2px 0 var(--akzent); }
.kopf-utility .thema-knopf {
  padding: 0 11px; border: 1px solid var(--hairline); border-radius: 8px;
  background: none; color: var(--tinte-soft); font-size: 10px;
}

/* (2) Anzeigewährung € / $ */
.waehrung-schalter { display: inline-flex; height: 28px; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.waehrung-schalter button {
  border: none; background: none; color: var(--tinte-soft); cursor: pointer;
  padding: 0 11px; font-family: var(--label); font-size: 12.5px; line-height: 1;
}
.waehrung-schalter button + button { border-left: 1px solid var(--hairline); }
.waehrung-schalter button.aktiv { background: var(--akzent); color: var(--papier); }
.waehrung-schalter button:hover:not(.aktiv) { color: var(--tinte); }

/* (3) Runde Kacheln — weicheres, kräftigeres Erscheinungsbild */
.hero, .edition-karte, .these-karte, .wl-kachel, .mover, .signal-karte, .sektor-karte,
.index-karte, .rohstoff-karte, .lab-kachel, .lab-karte, .chart-wrap, .termin-zeile,
.termin-mini, .ampel, .metrik-zeile, .pf-block, .pf-roaster, .thesen-hinweis,
.redaktion-zitat, .treemap, .modal, .wm-fakten, .archiv-zeile, .profil-panel,
#btc-kennzahlen, .fg-wrap { border-radius: 12px; }
.faktor-chip, .chip, .knopf, .wl-suche, .wl-select, .mini-tag, .badge, .signal-badge,
.pdf-tag, .lab-spekulativ, .roaster-score, .chart-tooltip, .treemap-tip { border-radius: 8px; }
.delta-pill { border-radius: 6px; }
.pf-balken { border-radius: 6px; overflow: hidden; }
.treemap-kachel { border-radius: 5px; }

/* Marktphasen (Signal-Center, Punkt 8) */
.phasen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.phase-karte { background: var(--weiss); border: 1px solid var(--box-rand); border-radius: 12px; padding: 16px 18px; }
.phase-zustand { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.1; margin: 4px 0 2px; }
.phase-zustand.pos { color: var(--gruen); }
.phase-zustand.neg { color: var(--rot); }
.phase-zustand.neutral { color: var(--tinte-soft); }
.phase-unter { font-size: 12.5px; color: var(--tinte-soft); }
.phase-basis { font-size: 12px; color: var(--tinte-soft); margin-top: 8px; }
@media (max-width: 700px) { .phasen-grid { grid-template-columns: 1fr; } }

/* Hotstocks-Sektorlogos (Punkt 16) */
.lab-sektorlogos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.lab-logostrip { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-logo-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--box-rand); border-radius: 999px; padding: 4px 11px 4px 4px; background: var(--weiss); }
.lab-logo-chip .wl-logo { width: 24px; height: 24px; }
.lab-logo-chip .mono { font-size: 12px; }

/* Bitcoin-Zyklusbalken (Punkt 7) */
.zyklus-balken { position: relative; height: 12px; border-radius: 999px; background: var(--box-bg); border: 1px solid var(--box-rand); margin: 12px 0 6px; }
.zyklus-fuellung { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hotstocks); opacity: 0.35; border-radius: 999px; }
.zyklus-marker { position: absolute; top: -3px; width: 4px; height: 18px; background: var(--tinte); transform: translateX(-50%); border-radius: 2px; }

/* Makro-Termin-Detail zum Aufklappen (Punkt 6) */
.termin-zeile.klickbar { cursor: pointer; }
.termin-detail { background: var(--box-bg); border: 1px solid var(--box-rand); border-radius: 10px; padding: 10px 14px; margin: -2px 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--tinte-soft); }

/* Feinschliff-Fixes */
/* (1) €/$-Umschalter exakt auf einer Linie mit Konto/Portfolio (auch im Dunkelmodus) */
.kopf-utility .waehrung-schalter { align-self: center; }
.kopf-utility .waehrung-schalter button { height: 100%; }
/* (4) Farb-Trennstrich der Sektor-Mover folgt der abgerundeten Ecke */
.mover { overflow: hidden; }
/* (6) Heatmap: dichter separiert, weniger Verschwimmen */
.treemap-kachel { border-radius: 3px; box-sizing: border-box; }
.tm-logo { width: 20px; height: 20px; margin-bottom: 2px; }

/* Zusatz-Marktfaktoren (Signal-Center, Punkt 3) */
.faktoren-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.faktor-karte { background: var(--weiss); border: 1px solid var(--box-rand); border-radius: 12px; padding: 13px 16px; }
.faktor-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.faktor-deutung { font-size: 13px; line-height: 1.5; color: var(--tinte-soft); }
@media (max-width: 700px) { .faktoren-grid { grid-template-columns: 1fr; } }

.profil-panel { background: var(--weiss); border: 1px solid var(--box-rand); padding: 18px 22px; margin-bottom: 18px; }
.profil-zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.profil-zeile .label { width: 210px; flex: none; }
.profil-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.profil-chip {
  font-family: var(--label); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline); background: var(--papier); color: var(--tinte-soft);
  padding: 6px 11px 5px; cursor: pointer;
}
.profil-chip.aktiv { border-color: var(--akzent); color: var(--akzent); background: rgba(30,75,122,0.06); }
.rb-bewusst .signal-badge { border-color: var(--daily); color: var(--daily); }

/* v5 — Kalibrierung */
.reliability-svg { width: 100%; max-width: 340px; height: auto; display: block; }
.reliability-label { font-family: var(--mono); font-size: 10px; fill: var(--tinte-soft); }

/* v5b — Zeitmaschine */
.zeitmaschine { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  background: var(--box-bg); border: 1px solid var(--box-rand); padding: 9px 14px; }

/* ==========================================================================
   v6 — AP-A: Mobil & Cross-Browser. Kompakt, klar, kein Geister-Scroll.
   Grundsatz: Ursachen beheben (Tabellen, Ticker, feste Breiten) — das
   overflow-Sicherheitsnetz ist nur die letzte Verteidigungslinie.
   ========================================================================== */

/* Sicherheitsnetz gegen horizontales Geister-Scrollen (Ursachen s. u. behoben).
   „clip" statt „hidden": erzeugt keinen neuen Scroll-Container (iOS-Safari). */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* iPhone-Notch & Home-Indikator: Inhalt nie unter die Gehäuse-Rundungen
   (wirkt nur zusammen mit viewport-fit=cover im Meta-Viewport). */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* Tastatur-Fokus überall sichtbar, ohne Maus-Klick-Ringe */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Lange Mono-Zahlen dürfen Kacheln nicht sprengen */
.lab-wert { overflow-wrap: anywhere; }

/* Marktleiste: bewusst wischbarer Streifen — ohne sichtbare Scrollbar,
   mit Wisch-Affordanz (Farbverlaufskante), nie über den Seitenrand. */
.marktleiste { position: relative; }
.marktleiste .spanne { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.marktleiste .spanne::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
  .marktleiste::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
    background: linear-gradient(90deg, rgba(0,0,0,0), var(--box-bg));
    pointer-events: none;
  }
}

/* Modale: dynamische Viewport-Höhe (iOS-Adressleiste) */
@supports (height: 1dvh) { .modal { max-height: 88dvh; } }

/* ---- Gestapelte Tabellen: unter 640 px werden breite Tabellen zu Karten
   (Label-Wert-Paare aus data-label) — gleicher Inhalt, andere Anordnung. ---- */
@media (max-width: 640px) {
  table.stapelbar { border: none; background: none; width: 100%; border-collapse: separate; }
  table.stapelbar thead { display: none; }
  table.stapelbar, table.stapelbar tbody, table.stapelbar tr, table.stapelbar td { display: block; }
  table.stapelbar tr {
    background: var(--weiss); border: 1px solid var(--box-rand); border-radius: 10px;
    padding: 10px 14px 9px; margin-bottom: 9px;
  }
  table.stapelbar td { border-bottom: none; padding: 3px 0; width: auto; }
  table.stapelbar td[data-label] {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  }
  table.stapelbar td[data-label]::before {
    content: attr(data-label);
    font-family: var(--label); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tinte-soft); flex: none;
  }
  table.stapelbar td:empty { display: none; }
  table.stapelbar td.stapel-kopf {
    border-bottom: 1px solid var(--hairline); padding-bottom: 7px; margin-bottom: 5px;
    font-size: 15.5px;
  }
  /* Portfolio-Tabelle: erste Zelle (Logo + Name) bleibt eine Zeile mit Luft */
  table.stapelbar td.stapel-kopf.mit-logo { display: flex; align-items: center; gap: 9px; }
}

/* ---- Formulare, Touch-Ziele, Feinheiten unter 640 px ---- */
@media (max-width: 640px) {
  /* Eingaben: 16 px verhindert den iOS-Auto-Zoom beim Fokussieren */
  .wl-suche, .wl-select { font-size: 16px; }
  .pf-form { grid-template-columns: 1fr; }

  /* Touch-Ziele ≥ 44 px (Spec AP-A) — Desktop bleibt unverändert */
  .chip, .tab-leiste button, .chart-bereiche button, .knopf.klein,
  .wl-sprungnav a, .profil-chip, .kern-toggle, .pf-entfernen, .signal-link {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .kopf-utility .kopf-link, .kopf-utility .thema-knopf,
  .kopf-utility .waehrung-schalter button { height: 40px; }
  .waehrung-schalter { height: 40px; }
  .nav a { padding-top: 8px; padding-bottom: 8px; }

  /* Kompaktere Karten-Innenabstände */
  .these-karte, .sektor-karte, .lab-karte { padding: 18px 16px 16px; }
  .modal { padding: 22px 16px; }
  .modal-deckel { padding: 12px; }
  .lab-wert { font-size: 17px; }
  .ampel { padding: 16px 16px; gap: 16px; }
  .ampel-links { min-width: 0; }
  .ampel-chips { min-width: 0; }
}

/* ==========================================================================
   v7 — Mobil-GUI „App-Leiste unten" (Binis Wahl, 07.07.2026).
   Gilt ausschließlich unter 700 px — der Desktop bleibt unverändert.
   Editorial-Stil auch hier: Papier, Hairlines, Label-Typografie.
   ========================================================================== */

/* Leiste + Sheet existieren im DOM (app.js injiziert) — Desktop blendet aus */
.app-leiste, .mehr-sheet, .mehr-deckel { display: none; }

@media (max-width: 700px) {
  /* ---- Kopf kompakt: Unterzeile weg, Logo kleiner, Nav ersetzt die Leiste ---- */
  .masthead { padding-top: 16px; }
  .masthead .zeichen { height: 40px; margin-bottom: 6px; }
  .masthead .wortmarke { font-size: 30px; }
  .masthead .unterzeile { display: none; }
  .masthead .doppellinie { margin-top: 12px; }
  .nav.nav-gruppen { display: none; }           /* ersetzt durch App-Leiste + „Mehr" */
  .kopf-utility .kopf-link { display: none; }   /* Portfolio/Konto stecken in der Leiste */

  /* ---- Inhalt: Platz für die feste Leiste unten ---- */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  main { padding: 22px 0 34px; }
  .sektion { margin-bottom: 34px; }
  .hero { padding: 20px 18px 18px; gap: 18px; }

  /* ---- App-Leiste (Bottom-Navigation) ---- */
  .app-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--papier);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -4px 14px rgba(36, 31, 26, 0.07);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-leiste a, .app-leiste button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 7px; min-height: 56px; justify-content: center;
    background: none; border: none; cursor: pointer;
    text-decoration: none; color: var(--tinte-soft);
    font-family: var(--label); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  .app-leiste .aktiv { color: var(--akzent); border-top-color: var(--akzent); }
  .app-leiste svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* ---- „Mehr"-Sheet (alle übrigen Seiten, Editorial-Look) ---- */
  .mehr-deckel {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgba(36, 31, 26, 0.45);
  }
  .mehr-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
    background: var(--papier); border-top: 2px solid var(--tinte);
    border-radius: 14px 14px 0 0;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    max-height: 82dvh; overflow-y: auto;
  }
  .mehr-sheet .griff { width: 40px; height: 4px; border-radius: 999px;
    background: var(--hairline); margin: 0 auto 14px; }
  .mehr-sheet .label { margin: 10px 0 6px; }
  .mehr-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .mehr-links a {
    display: flex; align-items: center; min-height: 44px;
    font-family: var(--serif); font-size: 17px; text-decoration: none;
    color: var(--tinte); border-bottom: 1px solid var(--box-rand);
  }
  .mehr-links a.aktiv { color: var(--akzent); font-weight: 700; }
  .mehr-zu { margin-top: 14px; width: 100%; }

  /* ---- Seiten-Tabs & Filter: eine wischbare Chip-Zeile statt Mehrzeilen-Umbruch ---- */
  .tab-leiste, .filter, .wl-sprungnav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    border-bottom: 1px solid var(--hairline); padding-bottom: 8px;
  }
  .tab-leiste::-webkit-scrollbar, .filter::-webkit-scrollbar,
  .wl-sprungnav::-webkit-scrollbar { display: none; }
  .tab-leiste button {
    flex: none; scroll-snap-align: start; white-space: nowrap;
    border: 1px solid var(--hairline); border-radius: 999px; border-bottom-width: 1px;
    margin-bottom: 0; padding: 9px 15px;
  }
  .tab-leiste button.aktiv {
    background: var(--akzent); border-color: var(--akzent);
    color: var(--papier); font-weight: 700;
  }
  .filter .chip, .wl-sprungnav a { flex: none; scroll-snap-align: start; white-space: nowrap; }

  /* ---- Karten & Kacheln dichter (Handy-Dichte, gleiche Inhalte) ---- */
  .lab-aggregat { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lab-kachel { padding: 11px 13px; }
  .edition-karte { padding: 18px 18px 16px; }
  .index-grid, .rohstoff-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .termin-vorschau { grid-template-columns: 1fr; }
  .chart-wrap { padding: 12px 12px 10px; }
  .donut-wrap { justify-content: center; }

  /* ---- Modale als Sheet von unten (App-Gefühl) ---- */
  .modal-deckel { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; border-radius: 14px 14px 0 0; border-top: 3px solid var(--akzent);
    max-height: 92dvh; padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Stufen 6–9 (07.07.2026): Skip-Link & Fokus, Zeitungskopf-Datumszeile,
   Daten-Banner, Skeleton-Platzhalter, Empty-States, Fußzeilen-Links,
   Status- & Geopolitik-Seite, Audio-Leiste.
   ========================================================================== */

/* ---- Zugänglichkeit ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinte); color: var(--papier);
  padding: 10px 16px; border-radius: 0 0 10px 0; text-decoration: none;
  font-family: var(--label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* ---- Masthead-Datumszeile (Zeitungskopf) ---- */
.datumszeile { margin-top: 7px; min-height: 15px; }
.datumszeile .boerse { margin-left: 14px; white-space: nowrap; }
.datumszeile .punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; background: var(--hairline);
}
.datumszeile .punkt.offen { background: var(--gruen); }
.datumszeile .punkt.vorboerse { background: var(--hotstocks); }
@media (max-width: 640px) { .datumszeile .boerse { display: none; } }

/* ---- Daten-Banner (sichtbarer Hinweis statt stillem Leerlauf) ---- */
.daten-banner {
  background: color-mix(in srgb, var(--rot) 10%, var(--papier));
  border-top: 1px solid var(--rot); border-bottom: 1px solid var(--rot);
  color: var(--tinte); font-size: 14px; text-align: center; padding: 8px 14px;
}
.daten-banner[hidden] { display: none; }

/* ---- Skeleton-Platzhalter: reine CSS-Schimmer, solange Container leer sind ---- */
@keyframes u8-schimmer {
  0% { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
#marktleiste:empty::before, #hero:empty::before, #heute-wichtig:empty::before,
#movers:empty::before, #juengste:empty::before, #archiv-liste:empty::before,
#artikel:empty::before, #status-karten:empty::before, #geo-themen:empty::before {
  content: ""; display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--box-bg) 25%, var(--weiss) 50%, var(--box-bg) 75%);
  background-size: 840px 100%;
  animation: u8-schimmer 1.4s linear infinite;
}
#marktleiste:empty::before { height: 18px; margin: 2px 0; }
#hero:empty::before, #artikel:empty::before { height: 140px; }
#heute-wichtig:empty::before, #movers:empty::before, #juengste:empty::before,
#archiv-liste:empty::before, #status-karten:empty::before, #geo-themen:empty::before { height: 88px; }

/* ---- Empty-States mit Charakter ---- */
.leer-hinweis {
  text-align: center; color: var(--tinte-soft); padding: 26px 14px;
}
.leer-hinweis::before {
  content: ""; display: block; width: 40px; height: 38px; margin: 0 auto 10px;
  background: url("logo_offiziell.svg") no-repeat center / contain;
  opacity: 0.16;
}

/* ---- Fußzeilen-Links ---- */
.fuss-links { margin-top: 10px; font-size: 13px; color: var(--tinte-soft); }
.fuss-links a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.fuss-links a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }

/* ---- Systemstatus-Seite ---- */
.status-einleitung { color: var(--tinte-soft); margin-bottom: 16px; max-width: 720px; }
.status-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.status-karte {
  background: var(--weiss); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px;
}
.status-karte .s-wert { font-family: var(--mono); font-weight: 700; font-size: 19px; margin: 6px 0 2px; }
.status-karte .s-hinweis { font-size: 13px; color: var(--tinte-soft); }
.status-karte .punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; background: var(--hairline);
}
.status-karte .punkt.gruen { background: var(--gruen); }
.status-karte .punkt.rot { background: var(--rot); }
.status-tabelle { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14.5px; }
.status-tabelle th, .status-tabelle td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--hairline); }
.status-tabelle td.mono { text-align: right; }

/* ---- Geopolitik-Monitor ---- */
.geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.geo-karte {
  background: var(--weiss); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px; font-size: 15px;
}
.geo-karte h3 { font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }
.geo-karte.aktiv { border-left: 4px solid var(--akzent); }
.geo-badge {
  display: inline-block; font-family: var(--label); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--akzent); border: 1px solid var(--akzent);
  border-radius: 999px; padding: 2px 9px; margin-bottom: 8px;
}
.geo-lage {
  background: var(--weiss); border: 1px solid var(--hairline); border-left: 4px solid var(--akzent);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.geo-lage h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 8px; }
.geo-markt { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.geo-markt .kachel {
  background: var(--weiss); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 12px 14px;
}
.geo-markt .kachel .label { margin-bottom: 4px; }
.geo-markt .kachel .mono { font-size: 18px; font-weight: 700; }

/* ---- Audio-Briefing ---- */
.audio-leiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--box-bg); border: 1px solid var(--box-rand); border-radius: 12px;
  padding: 10px 14px; margin: 12px 0;
}
.audio-leiste audio { height: 36px; max-width: 100%; }
.audio-leiste .label { white-space: nowrap; }

/* ---- Masthead: volles Logo (Zeichen + Schriftzug) statt Zeichen + Text-Wortmarke ---- */
.masthead .zeichen-link { display: inline-block; text-decoration: none; }
.masthead .zeichen-voll { height: 144px; margin: 0 auto 2px; }
@media (max-width: 640px) { .masthead .zeichen-voll { height: 116px; } }

/* ==========================================================================
   Portfolio-Dashboard (Neuaufbau 07/2026) — Parqet-Geist im Editorial-Kleid.
   Präfix pf2-; nutzt ausschließlich die bestehenden Design-Variablen.
   ========================================================================== */

/* ---- Kopfbereich: Gesamtwert + Kennzahlen-Band ---- */
.pf2-hero { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end;
  padding: 18px 0 14px; border-bottom: 1px solid var(--hairline); }
.pf2-hero-wert .label { margin-bottom: 2px; }
.pf2-gesamt { font-family: UnlimitedMono, monospace; font-weight: 700;
  font-size: 46px; line-height: 1.05; letter-spacing: -0.5px; color: var(--tinte); }
.pf2-gesamt .waehrung { font-size: 26px; color: var(--tinte-soft); }
.pf2-badge { display: inline-flex; align-items: center; gap: 5px;
  font-family: UnlimitedMono, monospace; font-size: 14px; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; margin-left: 10px; vertical-align: 6px; }
.pf2-badge.pos { background: color-mix(in srgb, var(--gruen) 14%, transparent); color: var(--gruen); }
.pf2-badge.neg { background: color-mix(in srgb, var(--rot) 12%, transparent); color: var(--rot); }
.pf2-badge.neutral { background: var(--box-bg); color: var(--tinte-soft); }
.pf2-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; flex: 1; min-width: 300px; }
.pf2-kachel { background: var(--box-bg); border: 1px solid var(--box-rand);
  padding: 10px 12px; position: relative; }
.pf2-kachel .label { display: block; margin-bottom: 3px; white-space: nowrap; }
.pf2-kachel-wert { font-family: UnlimitedMono, monospace; font-size: 19px;
  font-weight: 700; white-space: nowrap; }
.pf2-kachel-sub { font-size: 12px; color: var(--tinte-soft); margin-top: 2px; }
.pf2-info { display: inline-block; width: 15px; height: 15px; line-height: 15px;
  text-align: center; border: 1px solid var(--hairline); border-radius: 50%;
  font-size: 10.5px; color: var(--tinte-soft); cursor: help; margin-left: 5px;
  vertical-align: 2px; font-family: TeXGyreHerosCn, HerosCn, sans-serif; }
.pf2-kachel:hover .pf2-info, .pf2-info:hover { color: var(--akzent); border-color: var(--akzent); }

/* ---- Tab-Leiste ---- */
.pf2-tabs { display: flex; gap: 2px; margin: 18px 0 0; border-bottom: 2px solid var(--tinte);
  overflow-x: auto; scrollbar-width: none; }
.pf2-tabs::-webkit-scrollbar { display: none; }
.pf2-tab { appearance: none; background: none; border: none; cursor: pointer;
  font-family: TeXGyreHerosCn, HerosCn, sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 0.4px; color: var(--tinte-soft); padding: 9px 14px 7px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
  transition: color 160ms ease; }
.pf2-tab:hover { color: var(--tinte); }
.pf2-tab.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }
.pf2-tab .pf2-tab-zahl { font-family: UnlimitedMono, monospace; font-size: 11.5px;
  color: var(--tinte-soft); margin-left: 4px; font-weight: 400; }
.pf2-panel { display: none; padding-top: 16px; }
.pf2-panel.aktiv { display: block; animation: pf2-auf 240ms ease-out; }
@keyframes pf2-auf { from { opacity: 0; transform: translateY(4px); }
                     to { opacity: 1; transform: none; } }

/* ---- Karten-Raster ---- */
.pf2-karte { background: var(--weiss); border: 1px solid var(--box-rand);
  padding: 14px 16px 12px; margin-top: 14px; }
.pf2-karte > .label { display: block; margin-bottom: 8px; }
.pf2-doppel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pf2-kopfzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf2-kopfzeile .label { margin: 0; }
.pf2-schalter { display: inline-flex; gap: 0; border: 1px solid var(--hairline); }
.pf2-schalter button { appearance: none; background: none; border: none;
  border-right: 1px solid var(--hairline); cursor: pointer; padding: 4px 10px;
  font-family: UnlimitedMono, monospace; font-size: 12px; color: var(--tinte-soft);
  transition: background 140ms ease, color 140ms ease; }
.pf2-schalter button:last-child { border-right: none; }
.pf2-schalter button:hover { color: var(--tinte); }
.pf2-schalter button.aktiv { background: var(--tinte); color: var(--papier); }

/* ---- Donut v2 ---- */
.donut-teil { transition: transform 180ms ease, opacity 180ms ease; will-change: transform; }
.donut-teil.aktiv { transform: translate(var(--dx, 0), var(--dy, 0)); }
.donut-svg:hover .donut-teil:not(.aktiv) { opacity: 0.82; }
.donut-mitte-name { font-family: TeXGyreHerosCn, HerosCn, sans-serif; font-size: 13.5px;
  font-weight: 700; fill: var(--tinte); }
.donut-mitte-wert { font-family: UnlimitedMono, monospace; font-size: 12.5px;
  fill: var(--tinte-soft); }
.donut-legende-zeile { display: flex; align-items: center; gap: 7px; padding: 3px 4px;
  cursor: default; border-radius: 3px; transition: background 140ms ease; }
.donut-legende-zeile.aktiv { background: var(--box-bg); }
.donut-legende-zeile .donut-anteil { margin-left: auto; }
.donut-legende-zeile .donut-wert { color: var(--tinte-soft); min-width: 74px; text-align: right; }

/* ---- Positionsliste ---- */
.pf2-tabelle th { cursor: pointer; user-select: none; white-space: nowrap; }
.pf2-tabelle th .sort { color: var(--akzent); font-size: 10px; margin-left: 3px; }
.pf2-tabelle .spark { display: block; }
.pf2-tabelle tbody tr { transition: background 120ms ease; }
.pf2-tabelle tbody tr:hover { background: var(--box-bg); }
.pf2-zeilen-aktionen { white-space: nowrap; }
.pf2-mini-knopf { appearance: none; background: none; border: 1px solid var(--hairline);
  cursor: pointer; font-size: 11.5px; color: var(--tinte-soft); padding: 2px 8px;
  font-family: TeXGyreHerosCn, HerosCn, sans-serif; transition: all 140ms ease; }
.pf2-mini-knopf:hover { color: var(--akzent); border-color: var(--akzent); }
.pf2-mini-knopf.neg:hover { color: var(--rot); border-color: var(--rot); }

/* Löschen-Bestätigung im Portfolio (ersetzt das native confirm()) */
.pf2-bestaetigung { max-width: 440px; }
.pf2-best-titel { font-family: var(--serif); font-size: 22px; font-weight: 700; margin: 2px 0 12px; }
.pf2-best-text { font-size: 14.5px; line-height: 1.55; color: var(--tinte); margin-bottom: 12px; }
.pf2-best-warnung { font-size: 13px; line-height: 1.45; color: var(--rot);
  background: rgba(168, 58, 50, 0.08); border-left: 3px solid var(--rot);
  padding: 9px 13px; margin: 0 0 20px; border-radius: 0 6px 6px 0; }
.pf2-best-aktionen { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.knopf.gefahr { border-color: var(--rot); color: var(--rot); }
.knopf.gefahr:hover { background: var(--rot); color: var(--papier); }

/* ---- Kauf/Verkauf-Dialog ---- */
.pf2-dialog { border: 1px solid var(--tinte); background: var(--weiss);
  padding: 14px 16px; margin-top: 12px; animation: pf2-auf 200ms ease-out; }
.pf2-dialog-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pf2-artwahl { display: inline-flex; border: 1px solid var(--hairline); }
.pf2-artwahl button { appearance: none; border: none; background: none; cursor: pointer;
  padding: 5px 14px; font-family: TeXGyreHerosCn, HerosCn, sans-serif; font-weight: 700;
  font-size: 14px; color: var(--tinte-soft); }
.pf2-artwahl button.aktiv.kauf { background: var(--gruen); color: #fffdf8; }
.pf2-artwahl button.aktiv.verkauf { background: var(--rot); color: #fffdf8; }
.pf2-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; }
.pf2-form .voll-breit { grid-column: 1 / -1; }
.pf2-feld label { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--tinte-soft); margin-bottom: 3px; }
.pf2-summe { font-family: UnlimitedMono, monospace; font-size: 14px;
  color: var(--tinte-soft); align-self: center; }

/* ---- Aktivitäten ---- */
.pf2-akt { border-left: 2px solid var(--hairline); margin: 10px 0 0 6px; padding-left: 0; }
.pf2-akt-zeile { display: flex; align-items: baseline; gap: 10px; padding: 7px 0 7px 14px;
  position: relative; flex-wrap: wrap; }
.pf2-akt-zeile::before { content: ""; position: absolute; left: -5px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-soft); }
.pf2-akt-zeile.kauf::before { background: var(--gruen); }
.pf2-akt-zeile.verkauf::before { background: var(--rot); }
.pf2-akt-datum { font-family: UnlimitedMono, monospace; font-size: 12.5px;
  color: var(--tinte-soft); min-width: 84px; }
.pf2-akt-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 1px 7px; border-radius: 3px; }
.pf2-akt-badge.kauf { background: color-mix(in srgb, var(--gruen) 14%, transparent); color: var(--gruen); }
.pf2-akt-badge.verkauf { background: color-mix(in srgb, var(--rot) 12%, transparent); color: var(--rot); }
.pf2-akt-detail { font-size: 14px; }
.pf2-akt-zeile .pf2-zeilen-aktionen { margin-left: auto; }

/* ---- Dividenden ---- */
.pf2-div-termin { display: flex; align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.pf2-div-termin:last-child { border-bottom: none; }
.pf2-div-tage { font-family: UnlimitedMono, monospace; font-size: 12px;
  background: var(--box-bg); border: 1px solid var(--box-rand); padding: 2px 8px;
  white-space: nowrap; }
.pf2-div-jahr { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.pf2-div-jahr .pf2-balken { flex: 1; height: 14px; background: var(--box-bg);
  border: 1px solid var(--box-rand); position: relative; overflow: hidden; }
.pf2-div-jahr .pf2-balken span { position: absolute; inset: 0 auto 0 0;
  background: var(--gruen); opacity: 0.75; transition: width 500ms ease-out; }

/* ---- Szenarien ---- */
.pf2-szn-regler { display: grid; grid-template-columns: 130px 1fr 74px; gap: 10px;
  align-items: center; padding: 5px 0; }
.pf2-szn-regler .label { margin: 0; white-space: nowrap; }
.pf2-szn-regler input[type="range"] { width: 100%; accent-color: var(--akzent); }
.pf2-szn-balkenreihe { display: grid; grid-template-columns: 150px 1fr 84px; gap: 10px;
  align-items: center; padding: 6px 0; }
.pf2-szn-balken { height: 16px; background: var(--box-bg); border: 1px solid var(--box-rand);
  position: relative; }
.pf2-szn-balken span { position: absolute; top: 0; bottom: 0;
  transition: width 420ms ease-out, left 420ms ease-out; }
.pf2-szn-balken span.neg { background: var(--rot); opacity: 0.8; }
.pf2-szn-balken span.pos { background: var(--gruen); opacity: 0.8; }
.pf2-szn-null { position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: var(--tinte-soft); }
.pf2-hinweis-klein { font-size: 12px; color: var(--tinte-soft); margin-top: 6px; line-height: 1.5; }

/* ---- Leerzustand + Sonstiges ---- */
.pf2-leer { text-align: center; padding: 34px 18px; border: 1px dashed var(--hairline);
  margin-top: 14px; }
.pf2-leer h3 { font-size: 21px; margin: 0 0 8px; }
.pf2-leer p { color: var(--tinte-soft); max-width: 480px; margin: 0 auto 14px; }
.pf2-quelle-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 4px; vertical-align: 1px; }
.pf2-quelle-punkt.echt { background: var(--gruen); }
.pf2-quelle-punkt.rekonstruiert { background: var(--akzent); opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
  .pf2-panel.aktiv, .pf2-dialog { animation: none; }
  .donut-teil, .pf2-tabelle tbody tr, .pf2-schalter button,
  .pf2-div-jahr .pf2-balken span, .pf2-szn-balken span { transition: none; }
}

/* Dividenden-Kalender — Aufklapp-Zeile (Termine-Seite) */
.div-zeile { cursor: pointer; }
.div-zeile .aufklapp-pfeil { margin-left: 8px; color: var(--tinte-soft); transition: transform .18s ease; }
.div-zeile.offen .aufklapp-pfeil { transform: rotate(180deg); }
.div-zeile[aria-expanded="true"] .wname { color: var(--akzent); }

/* 2FA-QR: immer auf Weiß (Scanner-Kontrast, auch im Dunkel-Thema) */
.zfa-qr { display: inline-block; background: #ffffff; padding: 10px;
  border: 1px solid var(--box-rand); line-height: 0; }
.zfa-qr svg { width: 190px; height: 190px; }

/* ==========================================================================
   Feinschliff 10.07.2026 (Bini-Paket): Börsenuhr-Nachbörse, Portfolio-Dialog,
   eigene Ticker-Vorschlagsliste, Konto-Tabs. Ton bleibt Editorial-Research.
   ========================================================================== */

/* Börsenuhr: nachbörslicher Handel (NYSE After-Hours, Tradegate/LS) */
.datumszeile .punkt.nachboerse { background: var(--akzent); opacity: 0.75; }

/* ---- Transaktions-Dialog: ruhiger, runder, klar gegliedert ---- */
.pf2-dialog { border-radius: 14px; box-shadow: 0 10px 34px rgba(36, 31, 26, 0.10); }
.pf2-dialog .pf2-form { row-gap: 12px; }
.pf2-feld label { letter-spacing: 0.02em; }
.pf2-summe { font-size: 15px; }

/* ---- Eigene Vorschlagsliste (statt OS-Datalist) ---- */
.pf2-suche-wrap { position: relative; }
.pf2-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--weiss); border: 1px solid var(--box-rand); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(36, 31, 26, 0.16);
  max-height: 320px; overflow-y: auto; padding: 4px;
}
.pf2-suggest-zeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  cursor: pointer; text-align: left; color: var(--tinte);
  font: inherit; font-size: 14px;
}
.pf2-suggest-zeile:hover, .pf2-suggest-zeile.aktiv { background: var(--box-bg); }
.pf2-suggest-zeile .wl-logo, .pf2-suggest-zeile .wl-logo-ersatz {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px;
}
.pf2-suggest-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pf2-suggest-meta { color: var(--tinte-soft); font-size: 12px; }
.pf2-suggest-ticker { flex: 0 0 auto; color: var(--tinte-soft); font-size: 12.5px; }

/* ---- Konto-Bereich mit Tabs ---- */
.konto-kopf {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 14px 16px; background: var(--box-bg);
  border: 1px solid var(--box-rand); border-radius: 12px;
}
.konto-avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--akzent); color: #fffdf8;
  font-family: UnlimitedSerif, Georgia, serif; font-size: 20px; font-weight: 700;
}
.konto-status-zeilen { margin-top: 8px; display: grid; gap: 6px; }
.konto-status-zeilen > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--hairline); font-size: 13.5px;
}
.konto-status-zeilen > div:last-child { border-bottom: 0; }

/* ---- Analyse: kompakte Profil-Klappzeile ---- */
#pfa-profil-klapp > summary { cursor: pointer; line-height: 1.5; }
#pfa-profil-klapp > summary .pfa-profil-kurz { margin-left: 4px; }
#pfa-profil-klapp[open] > summary { margin-bottom: 10px; }

/* ---- Termine: Redaktions-Vorschau ---- */
#termin-tagesvorschau { margin: 10px 0 14px; }

/* ---- Geopolitik-Monitor: Barometer-Deutungen + Szenarien ---- */
.geo-kachel { display: block; }
.geo-kachel-deutung { margin-top: 6px; font-size: 12.5px; line-height: 1.45;
  color: var(--tinte-soft); }
.geo-szenarien { margin-top: 14px; }
.geo-szenario { padding: 8px 0; border-top: 1px dashed var(--hairline); }
.geo-szenario-kopf { display: flex; align-items: center; gap: 10px; }
.geo-szenario p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; }
.geo-neben { margin-top: 14px; }
.geo-neben p { font-size: 13.5px; line-height: 1.5; margin: 6px 0; }

/* ---- Symbol-Badges (eigene Editorial-Logos für Rohstoffe/Devisen/Indizes) ---- */
.sym-logo { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  display: inline-block; vertical-align: middle; }
.rohstoff-karte .sym-logo, .index-karte .sym-logo { margin-bottom: 4px; }
.geo-kachel .sym-logo { float: right; margin-left: 8px; }

/* ==========================================================================
   Design-Pass 10.07.2026 (Bini-Punkt 11): Portfolio & Modelle — weg vom
   „Default-Plot-Look": weichere Karten, ruhige Tabellen, klare Zahlen.
   ========================================================================== */

/* ---- Karten: mehr Luft, weiche Radien, feine Tiefe ---- */
.pf2-karte {
  border-radius: 16px !important;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.04), 0 8px 26px rgba(36, 31, 26, 0.05);
}
.pf2-karte > .label { letter-spacing: 0.06em; }

/* ---- Hero: der Portfoliowert als ruhige Serif-Zahl ---- */
.pf2-gesamt {
  font-family: UnlimitedSerif, Georgia, serif;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.01em;
}
.pf2-kachel {
  border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--box-rand);
  background: var(--weiss);
  box-shadow: none;
}
.pf2-kachel-wert { font-size: 17px; }

/* ---- Tabs als Pillen ---- */
.pf2-tab {
  border-radius: 999px !important;
  padding: 7px 16px;
}
.pf2-tab.aktiv { box-shadow: 0 2px 10px rgba(36, 31, 26, 0.12); }

/* ==========================================================================
   Design-Pass 11.07.2026 (Bini): Kennzahlen „ruhig & edel" + Allokation edel
   ========================================================================== */
/* Lead-Wert prominenter */
.pf2-hero { gap: 30px; padding: 20px 0 18px; }
.pf2-hero-wert .label { letter-spacing: 0.14em; color: var(--tinte-soft); }
.pf2-gesamt { font-size: 50px; letter-spacing: -0.015em; }
.pf2-gesamt .waehrung { font-size: 27px; }
.pf2-badge { font-size: 14px; padding: 4px 11px; border-radius: 999px; vertical-align: 8px; }

/* Sekundärkarten: feine Tiefe, farbcodierte Kante, klare Hierarchie */
.pf2-kacheln { gap: 12px; }
.pf2-kachel {
  background: var(--weiss);
  border: 1px solid var(--box-rand);
  border-radius: 14px;
  padding: 14px 16px 13px 18px;
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.035), 0 7px 20px rgba(36, 31, 26, 0.045);
  transition: box-shadow 180ms ease, transform 180ms ease;
  overflow: hidden;
}
.pf2-kachel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--hairline);
}
.pf2-kachel.k-pos::before { background: var(--gruen); }
.pf2-kachel.k-neg::before { background: var(--rot); }
.pf2-kachel:hover {
  box-shadow: 0 2px 4px rgba(36, 31, 26, 0.05), 0 12px 30px rgba(36, 31, 26, 0.07);
  transform: translateY(-1px);
}
.pf2-kachel .label { color: var(--tinte-soft); font-size: 10.5px; letter-spacing: 0.11em; margin-bottom: 5px; }
.pf2-kachel-wert { font-size: 20px; letter-spacing: -0.01em; }
.pf2-kachel-sub { font-size: 11.5px; margin-top: 4px; }
/* Delta als ruhige Pille */
.pf2-pill {
  display: inline-block; margin-top: 6px;
  font-family: UnlimitedMono, monospace; font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.pf2-pill.pos { background: color-mix(in srgb, var(--gruen) 13%, transparent); color: var(--gruen); }
.pf2-pill.neg { background: color-mix(in srgb, var(--rot) 12%, transparent); color: var(--rot); }
.pf2-pill.neutral { background: var(--box-bg); color: var(--tinte-soft); }
/* „i" dezenter: ohne Kreis, feines Serif-Zeichen, erst im Hover deutlich */
.pf2-info {
  border: none; width: auto; height: auto; line-height: 1; border-radius: 0;
  font-style: italic; font-family: var(--serif); font-size: 12.5px;
  color: var(--tinte-soft); opacity: 0.45; vertical-align: 1px; margin-left: 4px;
}
.pf2-kachel:hover .pf2-info, .pf2-info:hover { opacity: 1; color: var(--akzent); border: none; }

/* Allokations-Donut edel: klare Segment-Gaps + prominente Mitte */
.donut-teil { stroke: var(--weiss); stroke-width: 3; }
.donut-teil.plan { stroke: var(--akzent); stroke-width: 3.5; }
.donut-mitte-name { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; fill: var(--tinte-soft); }
.donut-mitte-wert { font-size: 16px; font-weight: 700; fill: var(--tinte); }
/* Donut-Fokus (Hover): andere Segmente verblassen, aktives Segment + Mitte treten hervor — 11.07.2026 */
.donut-mitte-name, .donut-mitte-wert { transition: font-size 140ms ease, fill 140ms ease; }
.donut-svg.fokus .donut-teil:not(.aktiv) { opacity: 0.14; }
.donut-svg.fokus .donut-teil.aktiv { opacity: 1; }
.donut-svg.fokus .donut-mitte-name { font-size: 13px; fill: var(--tinte); }
.donut-svg.fokus .donut-mitte-wert { font-size: 18.5px; fill: var(--akzent); }
.donut-svg.kompakt { width: 148px; height: 148px; }

/* Live-Allokation im Kauf/Verkauf-Dialog */
.pf2-dlg-allok {
  margin: 4px 0 6px; padding: 14px 16px; background: var(--weiss);
  border: 1px solid var(--box-rand); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.035), 0 7px 20px rgba(36, 31, 26, 0.045);
}
.pf2-dlg-allok-titel {
  display: block; font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--tinte-soft); margin-bottom: 10px;
}
.pf2-dlg-allok .donut-wrap { gap: 18px; }
.pf2-dlg-allok .donut-legende-zeile { font-size: 12.5px; padding: 2px 4px; }

/* Desktop-App-Band auf der Startseite */
.app-band { display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  background: var(--weiss); border: 1px solid var(--box-rand); border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.035), 0 7px 20px rgba(36, 31, 26, 0.045); }
.app-band .app-text { flex: 1; min-width: 240px; }
.app-band .app-text p { margin: 0 0 6px; }
.app-band .app-meta { font-size: 12px; color: var(--tinte-soft); font-family: var(--mono); }
.app-knopf { flex: none; white-space: nowrap; }

/* ==========================================================================
   Portfolio-Feinschliff 11.07.2026 (Batch 2): Kachel-Lesbarkeit + Tabs
   ========================================================================== */
/* Kachel klar vertikal: Label · Wert (+ %-Wert auf gleicher Grundlinie) · Zusatz darunter */
.pf2-kachel { display: flex; flex-direction: column; padding: 13px 16px 12px 17px; }
.pf2-kachel .label { margin-bottom: 5px; }
.pf2-kachel-zeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pf2-kachel-wert { font-size: 21px; line-height: 1.15; }
.pf2-kachel-delta { font-family: UnlimitedMono, monospace; font-size: 13px; font-weight: 700; }
.pf2-kachel-delta.pos { color: var(--gruen); }
.pf2-kachel-delta.neg { color: var(--rot); }
.pf2-kachel-delta.neutral { color: var(--tinte-soft); }
.pf2-kachel-sub { margin-top: 3px; font-size: 11.5px; color: var(--tinte-soft); line-height: 1.35; }

/* Tabs: klare runde Pillen statt „Kreis + Rechteck dahinter" */
.pf2-tabs { border-bottom: none; gap: 6px; margin: 18px 0 6px; }
.pf2-tab {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  margin-bottom: 0 !important;
  color: var(--tinte-soft);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pf2-tab:hover { background: var(--box-bg); color: var(--tinte); }
.pf2-tab.aktiv {
  background: var(--akzent); color: var(--papier);
  border-color: var(--akzent) !important; box-shadow: none;
}
:root[data-thema="dunkel"] .pf2-tab.aktiv { color: var(--papier); }
.pf2-tab .pf2-tab-zahl { color: inherit; opacity: 0.68; }

/* ==========================================================================
   App-Seite (Downloads, SHA-256-Verifikation, Versionshistorie)
   ========================================================================== */
.app-hero { padding: 8px 0 6px; }
.app-hero-titel { font-family: var(--serif); font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin: 6px 0 12px; }
.app-hero-unter { font-size: 16px; line-height: 1.6; max-width: 640px; color: var(--tinte); }
.app-dl-zeile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 20px 0 8px; }
.app-dl-knopf { font-size: 13.5px; padding: 15px 30px 14px; border-radius: 12px; }
.app-dl-meta { font-family: var(--mono); font-size: 13px; color: var(--tinte-soft); }
.app-hero-fuss { font-size: 12.5px; color: var(--tinte-soft); }

/* Prüfsummen-Blöcke */
.app-verify { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 12px; }
.app-schritt { display: flex; gap: 14px; align-items: flex-start; }
.app-schritt-nr { flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--akzent); color: var(--papier); font-family: var(--mono); font-size: 13px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.app-schritt-inhalt { flex: 1; min-width: 0; }
.app-select { font-family: var(--mono); font-size: 13px; padding: 8px 12px; border: 1px solid var(--box-rand);
  border-radius: 8px; background: var(--weiss); color: var(--tinte); cursor: pointer; }
.app-verify-eingabe { font-family: var(--mono); font-size: 13px; color: var(--tinte);
  background: var(--box-bg); border: 1px solid var(--box-rand); border-radius: 8px;
  padding: 9px 12px; flex: 1; min-width: 0; letter-spacing: 0.02em; }
.app-verify-eingabe:focus { outline: none; border-color: var(--akzent); background: var(--weiss); }
.app-verify-knopf { flex: none; font-size: 12px; padding: 11px 20px; border-radius: 8px; }
.app-verify-ergebnis { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.5;
  padding: 11px 14px; border-radius: 10px; border-left: 3px solid var(--hairline); }
.app-verify-ergebnis.ok { color: var(--gruen); background: color-mix(in srgb, var(--gruen) 13%, transparent); border-left-color: var(--gruen); }
.app-verify-ergebnis.fehler { color: var(--rot); background: color-mix(in srgb, var(--rot) 12%, transparent); border-left-color: var(--rot); }
.app-verify-ergebnis.neutral { color: var(--tinte-soft); background: var(--box-bg); }
.app-verify-label { display: block; font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--tinte-soft); margin-bottom: 6px; }
.app-code-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-code { font-family: var(--mono); font-size: 13px; color: var(--tinte);
  background: var(--box-bg); border: 1px solid var(--box-rand); border-radius: 8px;
  padding: 9px 12px; flex: 1; min-width: 0; word-break: break-all; line-height: 1.5; }
.app-hash { letter-spacing: 0.02em; }
.app-kopier { flex: none; appearance: none; cursor: pointer; font-family: var(--label);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--akzent); background: none; border: 1px solid var(--akzent);
  border-radius: 999px; padding: 7px 14px; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.app-kopier:hover { background: var(--akzent); color: var(--papier); }
.app-kopier.ok { border-color: var(--gruen); color: var(--gruen); background: color-mix(in srgb, var(--gruen) 12%, transparent); }

/* Versionshistorie */
.app-versionen { display: grid; gap: 12px; }
.app-version-karte { background: var(--weiss); border: 1px solid var(--box-rand);
  border-radius: 14px; padding: 15px 18px;
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.035), 0 7px 20px rgba(36, 31, 26, 0.045); }
.app-version-karte.aktuell { border-color: var(--akzent);
  box-shadow: 0 1px 2px rgba(36, 31, 26, 0.05), 0 10px 26px rgba(36, 31, 26, 0.07); }
.app-version-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-version-nr { font-size: 17px; font-weight: 700; color: var(--tinte); }
.app-version-badge { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--papier); background: var(--akzent);
  padding: 3px 9px; border-radius: 999px; }
.app-version-datum { font-size: 12.5px; color: var(--tinte-soft); }
.app-version-groesse { font-size: 12.5px; color: var(--tinte-soft); }
.app-version-dl { margin-left: auto; font-family: var(--label); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--akzent); text-decoration: none; white-space: nowrap; }
.app-version-dl:hover { text-decoration: underline; }
.app-version-notiz { font-size: 14px; line-height: 1.5; margin: 9px 0 10px; }
.app-version-hash { font-size: 12px; }
.app-version-hash .app-hash-label { font-family: var(--label); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-soft); flex: none; }
.app-version-hash .app-code { font-size: 11.5px; padding: 6px 10px; }

/* Info-Karten (Installation & Updates) */
.app-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.app-info-karte { background: var(--box-bg); border: 1px solid var(--box-rand); border-radius: 14px; padding: 16px 18px; }
.app-info-karte h4 { margin-bottom: 7px; }
.app-info-karte p { font-size: 14px; line-height: 1.55; }
@media (max-width: 640px) { .app-version-dl { margin-left: 0; } }

/* Benchmark-Steuerung im Performance-Chart (Punkt 4) */
.pf2-bench { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; }
.pf2-bench-label { font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-soft); margin-right: 2px; }
.pf2-bench-chip { appearance: none; cursor: pointer; font-family: var(--mono); font-size: 12px;
  color: var(--tinte-soft); background: none; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 5px 12px; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.pf2-bench-chip:hover { color: var(--tinte); border-color: var(--tinte-soft); }
.pf2-bench-chip.aktiv { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.pf2-bench-suche-wrap { position: relative; }
.pf2-bench-suche { font-family: var(--mono); font-size: 12px; padding: 6px 12px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--weiss);
  color: var(--tinte); width: 148px; }
.pf2-bench-suche:focus { outline: none; border-color: var(--akzent); }
.pf2-bench-status { font-size: 11.5px; color: var(--tinte-soft); }
.pf2-bench-status.neg { color: var(--rot); }
.pf2-bench .pf2-suggest { position: absolute; top: 112%; left: 0; z-index: 20; min-width: 230px; }

/* Analyse laienverständlich (Punkt 5): Rahmen-Text + Klartext-Erklärungen je Abschnitt */
.pfa-intro { font-size: 15px; line-height: 1.6; color: var(--tinte); margin: 2px 0 18px;
  padding: 14px 18px; background: var(--box-bg); border-radius: 12px; border-left: 3px solid var(--akzent); }
.pfa-erklaer { font-size: 13px; line-height: 1.5; color: var(--tinte-soft); margin: 4px 0 12px; }

/* ==========================================================================
   Punkt 6 (Bini 11.07.): interaktive Elemente entklobigen — runde Kanten,
   ruhigeres Uppercase-Tracking, weiche Übergänge. Rein visuell, Logik bleibt.
   ========================================================================== */
.knopf { border-radius: 10px; letter-spacing: 0.09em; padding: 11px 20px 10px;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.knopf:hover { box-shadow: 0 4px 14px rgba(36, 31, 26, 0.10); }
.knopf.voll:hover { box-shadow: 0 5px 18px rgba(30, 75, 122, 0.26); }
.chip { border-radius: 999px; letter-spacing: 0.07em; padding: 7px 15px 6px; }
.chip:hover { border-color: var(--tinte-soft); color: var(--tinte); }
.wl-suche, .wl-select { border-radius: 10px; }
.wl-select { letter-spacing: 0.05em; }
.wl-check { letter-spacing: 0.05em; }
.chart-bereiche button { border-radius: 999px; padding: 4px 12px; }
.faktor-chip { border-radius: 12px; }
.faktor-chip .fc-name { letter-spacing: 0.06em; }
.profil-chip { border-radius: 999px; letter-spacing: 0.05em; padding: 6px 13px 5px; transition: all .14s ease; }
.mini-tag { border-radius: 999px; }
.signal-badge { border-radius: 999px; }
.pf2-schalter { border-radius: 999px; overflow: hidden; }
.pf2-schalter button { padding: 6px 14px; }
.tab-leiste button { border-radius: 9px 9px 0 0; }

/* Allokations-Donut größer + mehr Luft (Bini: zu klein, überschneidet Text) */
.donut-svg { width: 240px; height: 240px; }
.donut-svg.kompakt { width: 172px; height: 172px; }
.donut-wrap { gap: 30px; align-items: center; row-gap: 14px; }
.donut-legende { min-width: 210px; }
/* Ausfahren beim Hover geringer, damit Segmente nicht über die Legende/den Text laufen */
.donut-teil.aktiv { transform: translate(calc(var(--dx, 0px) * 0.6), calc(var(--dy, 0px) * 0.6)); }

/* Geführter Analyse-Fragebogen (Bini): eine Frage pro Schritt, Alltagssprache */
.pfa-quiz { max-width: 640px; margin: 6px auto; }
.pfa-quiz-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pfa-quiz-zaehler { font-family: var(--mono); font-size: 12px; color: var(--tinte-soft); }
.pfa-quiz-balken { height: 5px; background: var(--box-bg); border-radius: 999px; overflow: hidden; margin: 10px 0 20px; }
.pfa-quiz-balken span { display: block; height: 100%; background: var(--akzent); border-radius: 999px; transition: width .3s ease; }
.pfa-quiz-frage { font-family: var(--serif); font-size: clamp(21px, 3vw, 27px); font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.pfa-quiz-hilfe { font-size: 14px; color: var(--tinte-soft); line-height: 1.5; margin-bottom: 18px; }
.pfa-quiz-optionen { display: grid; gap: 10px; }
.pfa-quiz-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: var(--weiss); border: 1px solid var(--box-rand); border-radius: 14px; padding: 14px 18px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.pfa-quiz-opt:hover { border-color: var(--akzent); box-shadow: 0 6px 18px rgba(36, 31, 26, .07); transform: translateY(-1px); }
.pfa-quiz-opt.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent) inset; }
.pfa-quiz-opt-titel { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--tinte); }
.pfa-quiz-opt-sub { font-size: 13px; color: var(--tinte-soft); line-height: 1.4; }
.pfa-quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.pfa-quiz-neu { appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--akzent); text-decoration: underline; }
.pfa-quiz-optionen.mehr { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.pfa-quiz-optionen.mehr .pfa-quiz-opt { padding: 11px 15px; }
.pfa-quiz-optionen.mehr .pfa-quiz-opt-titel { font-size: 15px; }
.pfa-quiz-opt.aktiv::after { content: "✓"; position: absolute; top: 10px; right: 14px; color: var(--akzent); font-weight: 700; }
.pfa-quiz-opt { position: relative; }

/* ---- Positions-/Datentabellen: Zebra, Hairlines, Zahlen rechts ---- */
.pf2-tabelle { border-collapse: separate; border-spacing: 0; }
.pf2-tabelle thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinte-soft); font-weight: 600;
  border-bottom: 1px solid var(--box-rand); padding: 8px 10px;
}
.pf2-tabelle tbody td {
  padding: 11px 10px; border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.pf2-tabelle tbody tr:nth-child(even) td { background: rgba(36, 31, 26, 0.022); }
[data-thema="dunkel"] .pf2-tabelle tbody tr:nth-child(even) td { background: rgba(255, 253, 248, 0.03); }
.pf2-tabelle tbody tr:hover td { background: var(--box-bg); }
.pf2-tabelle td.mono, .pf2-tabelle th[data-feld]:not([data-feld="name"]) { text-align: right; }
.pf2-tabelle td.stapel-kopf { text-align: left; }
.pf2-tabelle .wl-logo, .pf2-tabelle .wl-logo-ersatz {
  width: 30px; height: 30px; border-radius: 8px;
}
.pf2-zeilen-aktionen { white-space: nowrap; }
.pf2-mini-knopf { border-radius: 999px; padding: 4px 11px; }

/* ---- Aktivitäten: Zeilen als weiche Streifen ---- */
.pf2-akt-zeile {
  border-radius: 12px; border: 1px solid var(--hairline);
  padding: 10px 12px; margin-bottom: 8px; background: var(--weiss);
}
.pf2-akt-zeile:hover { border-color: var(--box-rand); }
.pf2-akt-badge { border-radius: 999px; }

/* ---- Dialog: Formularfelder ruhiger ---- */
.pf2-dialog .wl-suche, .pf2-dialog .wl-select {
  border-radius: 10px; padding: 10px 12px; font-size: 14.5px;
}
.pf2-dialog .knopf.voll { border-radius: 12px; padding: 12px; font-size: 15px; }

/* ---- Marktphasen v2 (Signal-Center) ---- */
.phase-karte.v2 { display: flex; flex-direction: column; gap: 8px;
  border-radius: 14px; padding: 16px; }
.phase-karte.v2 .phase-kopf { display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; }
.phase-karte.v2 .phase-seit { font-size: 11.5px; color: var(--tinte-soft); }
.phase-karte.v2 .phase-zustand { font-family: UnlimitedSerif, Georgia, serif;
  font-size: 26px; line-height: 1; }
.phase-meter { position: relative; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--rot), var(--box-bg) 42%,
    var(--box-bg) 58%, var(--gruen)); opacity: 0.9; }
.phase-meter-null { position: absolute; left: 50%; top: -2px; width: 1px;
  height: 10px; background: var(--tinte-soft); opacity: 0.55; }
.phase-meter-punkt { position: absolute; top: 50%; width: 12px; height: 12px;
  border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid var(--weiss); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background: var(--tinte-soft); }
.phase-meter-punkt.pos { background: var(--gruen); }
.phase-meter-punkt.neg { background: var(--rot); }
.phase-score { font-size: 11px; color: var(--tinte-soft); }
.phase-faktoren { display: grid; gap: 4px; border-top: 1px dashed var(--hairline);
  padding-top: 8px; }
.phase-faktor { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--tinte-soft); }
.phase-faktor .mono { flex: 0 0 auto; }
.phase-deutung { font-size: 13px; line-height: 1.5; }

/* Portfolio-Design-Pass 11.07.2026 */