/* ============================================================================
   Designsystem – heller Blaugrau-Grund, schwebende Kopfzeile, Kursband,
   großer Titelbereich mit Bogen-Anzeige und darunter eine eingelassene
   Panel-Fläche, in der alle Karten sitzen.

   Diese Datei liefert das gemeinsame Gerüst aller Seiten. Seitenspezifische
   Bausteine stehen in pages.css.
   ========================================================================= */

@import url("vendor/dmsans.css");

:root {
  /* Flächen */
  --page: #dee5ef;
  --panel: #edf1f7;
  --card: #ffffff;
  --tile: #f4f7fb;
  --tile-2: #eaeff7;

  /* Schrift */
  --ink: #10131c;
  --ink-2: #454c5e;
  --muted: #8b94a7;

  /* Linien */
  --line: #e8ecf4;
  --line-2: #dde4ef;

  /* Akzente */
  --blue: #1f6bff;
  --blue-2: #6a9bff;
  --blue-soft: #e7efff;
  --green: #1faa72;
  --green-soft: #dbf3e5;
  --red: #e4505c;
  --red-soft: #fce7e9;
  --amber: #edbc4c;
  --violet: #7b68ee;

  /* Radien */
  --r-card: 24px;
  --r-tile: 16px;
  --r-pill: 999px;

  /* Schatten */
  --sh-card: 0 1px 2px rgba(19, 32, 64, 0.04), 0 10px 30px rgba(30, 52, 110, 0.05);
  --sh-pop: 0 10px 28px rgba(19, 32, 64, 0.14);
  --sh-btn: 0 1px 3px rgba(19, 32, 64, 0.1);

  /* Altnamen, die noch in Bausteinen stecken, auf das neue Schema ziehen */
  --bg: var(--page);
  --surface: var(--page);
  --text: var(--ink);
  --border: var(--line);
  --up: var(--green);
  --down: var(--red);
  --radius: var(--r-card);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--page);
}

body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  max-width: none;
  padding: 0;
  margin: 0;
}

::selection {
  background: rgba(31, 107, 255, 0.16);
}

/* Eigene Bildlaufleisten – die Systemleisten wirken im hellen Grund zu hart. */
* {
  scrollbar-width: thin;
  scrollbar-color: #cdd6e4 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: #cdd6e4;
  border-radius: 99px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   Grundgerüst
   ========================================================================== */

.app {
  min-height: 100vh;
  padding: 20px 34px 0;
  display: flex;
  flex-direction: column;
}
.app > * {
  flex: 0 0 auto;
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 4px 0 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.brand-mark svg {
  display: block;
}
.brand-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* Mitte: Reiter plus Marktfeld in einer Reihe */
.nav-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}
.pills {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pill);
  padding: 5px;
}
.pills a {
  display: block;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.pills a:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.pills a.on {
  background: #fff;
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--sh-btn);
  font-weight: 600;
}

/* Marktfeld: gleiche Form wie in der Vorlage, zeigt den Live-Stand. */
.market-field {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-pill);
  padding: 11px 22px 11px 18px;
  font-size: 14.5px;
  color: var(--ink);
  white-space: nowrap;
  min-width: 250px;
}
.market-field svg {
  color: var(--ink-2);
  flex: none;
}
.market-field .mf-label {
  color: var(--muted);
}
.market-field .mf-value {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
}

/* ==========================================================================
   Tab-Leiste am unteren Rand – nur auf dem Handy sichtbar
   ========================================================================== */

.tabbar {
  display: none;
}
.tabbar a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 4px;
  text-decoration: none;
  color: var(--muted);
  border-radius: 14px;
  transition: color 0.16s, background 0.16s;
}
.tabbar a.on {
  color: var(--ink);
}
.tabbar a:active {
  background: var(--tile);
}
.tb-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 9px;
  transition: background 0.16s, color 0.16s;
}
.tabbar a.on .tb-icon {
  background: var(--ink);
  color: #fff;
}
.tb-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tabbar a.on .tb-label {
  font-weight: 600;
}

/* Runde bzw. abgerundete Kopfknöpfe */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  box-shadow: var(--sh-btn);
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}
.icon-btn:hover {
  color: var(--ink);
  border-color: #cdd7e6;
}
.icon-btn.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(145deg, #2f7bff, #7b68ee);
  box-shadow: var(--sh-btn);
  letter-spacing: -0.02em;
}

/* ---------- Kontoknopf mit Abmelde-Menü ---------- */

.konto {
  position: relative;
  flex: none;
}
button.avatar {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.16s, transform 0.1s;
}
button.avatar:hover {
  filter: brightness(1.06);
}
button.avatar:active {
  transform: translateY(1px);
}
button.avatar:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.konto-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 208px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: var(--sh-pop);
  animation: konto-auf 0.16s ease both;
}
@keyframes konto-auf {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.konto-kopf {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.konto-label {
  font-size: 11.5px;
  color: var(--muted);
}
.konto-kopf strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.konto-eintrag {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s, color 0.14s;
}
.konto-eintrag:hover {
  background: var(--red-soft);
  color: var(--red);
}
.konto-eintrag:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.konto-eintrag svg {
  flex: none;
}

/* ==========================================================================
   Kursband
   ========================================================================== */

/* Laufendes Kursband: die Spur trägt den Inhalt doppelt und wandert um eine
   Hälfte, dadurch läuft die Schleife nahtlos durch. */
.tape {
  overflow: hidden;
  padding: 6px 0 22px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 40px,
    #000 calc(100% - 40px),
    transparent 100%
  );
}
.tape[hidden] {
  display: none;
}
.tape-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: tapeLauf var(--tape-dauer, 45s) linear infinite;
}
.tape:hover .tape-track {
  animation-play-state: paused;
}
@keyframes tapeLauf {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tape-track {
    animation: none;
  }
  .tape {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tape::-webkit-scrollbar {
    display: none;
  }
}
.tape-item {
  flex: none;
  padding-right: 46px;
}
.tape-label {
  font-size: 14.5px;
  color: var(--muted);
  white-space: nowrap;
  margin-bottom: 5px;
}
.tape-row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.tape-value {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tape-chip {
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  background: var(--tile-2);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tape-chip.up {
  background: var(--green-soft);
  color: var(--green);
}
.tape-chip.down {
  background: var(--red-soft);
  color: var(--red);
}

/* ==========================================================================
   Titelbereich mit Bogen-Anzeige
   ========================================================================== */

/* Drei Bereiche: Titel, Aufteilungsbalken, Bogen. Auf dem Desktop stehen
   Titel und Balken links untereinander, der Bogen rechts daneben. Auf dem
   Handy rutscht der Bogen zwischen Titel und Balken – dort soll die Zahl
   zuerst kommen, nicht erst nach den Balken. */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 46%);
  grid-template-areas:
    "titel bogen"
    "spuren bogen";
  gap: 20px 24px;
  align-items: end;
  padding-bottom: 8px;
}
.hero-left {
  grid-area: titel;
  align-self: end;
}
.facts {
  grid-area: spuren;
}
.hero-right {
  grid-area: bogen;
  align-self: end;
}
.hero-left,
.hero-right,
.facts {
  min-width: 0;
}

.crumb-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.back-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  box-shadow: 0 2px 6px rgba(19, 32, 64, 0.08);
  transition: transform 0.16s, box-shadow 0.16s;
}
.back-btn:hover {
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(19, 32, 64, 0.12);
}
.crumb {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.crumb .crumb-up {
  color: var(--muted);
}

.hero-title {
  font-size: clamp(46px, 6.6vw, 104px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin-bottom: 34px;
}

/* Kennzahlen im Titelbereich – reine Zahlen, keine Grafik. Sie stehen dort,
   wo vorher die Aufteilungsbalken waren. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
}
.fact {
  min-width: 0;
}
.f-label {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  margin-bottom: 4px;
}
.f-value {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.f-value.up {
  color: var(--green);
}
.f-value.down {
  color: var(--red);
}
.f-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}

/* --- Bogen --- */
.gauge {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 330;
  min-height: 250px;
}
.gauge > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gauge-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
}
.gauge-label {
  font-size: 17px;
  color: var(--ink-2);
}
.gauge-value {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gauge-sub {
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gauge-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(19, 32, 64, 0.1);
  transition: transform 0.16s, box-shadow 0.16s;
}
.gauge-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(19, 32, 64, 0.14);
}

/* --- Titelbereich mit Chart statt Bogen --- */
.gauge.as-chart {
  aspect-ratio: auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.hero-chart {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.hc-text {
  min-width: 0;
}
.hc-label {
  font-size: 15px;
  color: var(--ink-2);
}
.hc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
}
.hc-value {
  font-size: clamp(28px, 3.1vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
}
.hc-chip {
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 4px 12px;
  background: var(--tile-2);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hc-chip.up {
  background: var(--green-soft);
  color: var(--green);
}
.hc-chip.down {
  background: var(--red-soft);
  color: var(--red);
}
.hc-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.45;
}
.gauge.as-chart .gauge-btn {
  margin-top: 4px;
  flex: none;
}
/* Chart.js richtet sich nach dem Kasten – der Kasten darf sich deshalb nicht
   nach dem Canvas richten, sonst schaukeln sich beide in die Breite. */
.hc-canvas {
  position: relative;
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 172px;
  height: 172px;
}
.hc-canvas canvas {
  position: absolute;
  inset: 0;
}
/* Ring-Variante: Auf der Allokationsseite ist der Ring die Hauptaussage –
   er darf die Spalte ausfüllen. */
.gauge.as-ring .hc-canvas {
  min-height: 400px;
  height: clamp(280px, 30vw, 460px);
}
.gauge.as-ring .hc-head {
  align-items: flex-end;
}

@media (max-width: 1240px) {
  .gauge.as-chart {
    max-width: none;
  }
}

/* ==========================================================================
   Panel: eingelassene Fläche mit allen Karten
   ========================================================================== */

.panel {
  background: var(--panel);
  border-radius: 30px 30px 0 0;
  margin: 12px -34px 0;
  padding: 26px 34px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel > * {
  flex: 0 0 auto;
}

/* ==========================================================================
   Karten
   ========================================================================== */

.card,
.chart-section,
.kpi {
  background: var(--card);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.card,
.chart-section {
  padding: 22px 24px;
}
.kpi {
  padding: 18px 20px;
}

/* Kartenkopf: Symbol + Titel links, runde Knöpfe rechts */
.card-head,
.corr-header,
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.card-head h2,
.corr-header h2,
.chart-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.card-head h2 .ci,
.corr-header h2 .ci,
.chart-header h2 .ci {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.card-head h2 .ci svg {
  width: 14px;
  height: 14px;
}
.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.round-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--tile);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  text-decoration: none;
  transition: background 0.16s, color 0.16s;
}
.round-btn:hover {
  background: var(--tile-2);
  color: var(--ink);
}

.chart-sub,
.corr-method,
.pf-empty,
.corr-hint {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 3px;
  line-height: 1.5;
}
.chart-sub strong {
  color: var(--ink);
  font-weight: 600;
}

/* Kennzahl-Kacheln im Stil der Vorlage */
.kpi .label {
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
}
.kpi .value {
  font-size: 25px;
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi .sub {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.kpi.hero .value {
  font-size: 28px;
}

/* Weiche Kachel innerhalb einer Karte (Kennzahlen neben dem Chart) */
.tile {
  background: var(--tile);
  border-radius: var(--r-tile);
  padding: 18px 20px;
}
.tile .t-label {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}
.tile .t-value {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-top: 10px;
}

.up {
  color: var(--green);
}
.down {
  color: var(--red);
}
.flat {
  color: var(--muted);
}

/* ==========================================================================
   Bedienelemente
   ========================================================================== */

.scale-buttons,
.range-buttons,
.seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  background: var(--tile);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 3px;
}
.scale-buttons button,
.range-buttons button,
.seg button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 7px 15px;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, color 0.16s;
}
.scale-buttons[hidden],
.range-buttons[hidden],
.seg[hidden] {
  display: none;
}
.scale-buttons button:hover,
.range-buttons button:hover,
.seg button:hover {
  color: var(--ink);
}
.scale-buttons button.active,
.range-buttons button.active,
.seg button.on {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--sh-btn);
}
/* Variante mit blauem Ring – für die Zeitraumwahl, damit sie sich von der
   Reihenauswahl daneben unterscheidet. Ring als Innenschatten, sonst würde
   ein Rahmen die Knopfbreite verschieben. */
.scale-buttons.ring button.active {
  box-shadow: inset 0 0 0 2px var(--blue);
  color: var(--ink);
}

.header-controls,
.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.ghost {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.ghost:hover {
  background: var(--tile);
  border-color: #cdd7e6;
}

.btn-primary {
  border: none;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 107, 255, 0.28);
  transition: background 0.16s, transform 0.16s;
}
.btn-primary:hover {
  background: #1a5ce0;
  transform: translateY(-1px);
}

/* Eingabefelder */
input[type="number"],
input[type="text"],
input[type="month"],
select {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 10px 13px;
  outline: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}
input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.14);
}

/* ==========================================================================
   Tabellen
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  margin: 0 -6px;
  padding: 0 6px;
}
.pos-table,
.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pos-table th,
.calc-table th {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pos-table th.num,
.pos-table td.num,
.calc-table th,
.calc-table td {
  text-align: right;
}
.calc-table th:first-child,
.calc-table td:first-child {
  text-align: left;
}
.pos-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.pos-table th.sortable:hover {
  color: var(--ink);
}
.pos-table th.sorted::after {
  content: " ↓";
  color: var(--blue);
}
.pos-table th.sorted.asc::after {
  content: " ↑";
}
.pos-table td,
.calc-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pos-table tbody tr {
  transition: background 0.14s;
}
.pos-table tbody tr:hover {
  background: var(--tile);
}
.pos-table tfoot td,
.calc-table tfoot td {
  padding: 14px 12px;
  font-weight: 700;
  border-top: 1px solid var(--line-2);
  border-bottom: none;
}
.pos-table td.datum {
  color: var(--ink);
}
.pos-table td.datum .seit {
  color: var(--muted);
  font-size: 12px;
  margin-left: 7px;
}
.pos-name {
  display: flex;
  align-items: center;
  gap: 11px;
}
.pos-name .tag {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.pos-name .sym {
  font-weight: 600;
}
.pos-name .full {
  color: var(--muted);
  font-size: 12px;
}
tr.stale td {
  opacity: 0.42;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  background: var(--tile);
  border: none;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  margin-left: 6px;
}
.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: none;
  color: var(--muted);
  background: var(--tile);
  margin-right: 4px;
}
.chip-bitpanda {
  color: #6455d8;
  background: #eceaff;
}
.chip-etoro {
  color: var(--green);
  background: var(--green-soft);
}
/* Kauf und Verkauf in der Liste "Zuletzt gehandelt". */
.chip-kauf {
  color: var(--green);
  background: var(--green-soft);
}
.chip-verkauf {
  color: var(--red);
  background: var(--red-soft);
}
/* Frisch gekauft bzw. seit dem letzten Blick neu im Konto gefunden. */
.badge-neu {
  color: var(--green);
  background: var(--green-soft);
}
tr.handel-neu td {
  background: var(--green-soft);
}
.warn {
  color: var(--red);
}

/* ==========================================================================
   Fußzeile
   ========================================================================== */

footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12.5px;
  border-top: 1px solid var(--line-2);
  padding-top: 18px;
  margin-top: 4px;
  line-height: 1.5;
}
.disclaimer {
  opacity: 0.8;
}

/* ==========================================================================
   Privatmodus – Beträge verwischen, Struktur bleibt sichtbar
   ========================================================================== */

body.privat .gauge-value,
body.privat .gauge-sub,
body.privat .tape-value,
body.privat .tape-chip,
body.privat .f-value,
body.privat .big,
body.privat .badge,
body.privat .tile .t-value,
body.privat .value-sub,
body.privat .alloc-total,
body.privat .ring-value,
body.privat .ring-sub,
body.privat .kpi .value,
body.privat .kpi .sub,
body.privat .pf-stats strong,
body.privat .gainer .row,
body.privat .dist-list .val,
body.privat .dist-list .share,
body.privat .asset-list .val,
body.privat .asset-list .chg,
body.privat .market-list .val,
body.privat .market-list .chg,
body.privat .market-list .chg200,
body.privat .pos-table td.num,
body.privat .pos-table tfoot td,
body.privat .card-price,
body.privat .card-change {
  color: transparent;
  text-shadow: 0 0 9px currentColor;
  user-select: none;
}
@supports (-webkit-text-fill-color: transparent) {
  body.privat .gauge-value,
  body.privat .gauge-sub,
  body.privat .tape-value,
  body.privat .tape-chip,
  body.privat .f-value,
  body.privat .big,
  body.privat .badge,
  body.privat .tile .t-value,
  body.privat .value-sub,
  body.privat .alloc-total,
  body.privat .ring-value,
  body.privat .ring-sub,
  body.privat .kpi .value,
  body.privat .kpi .sub,
  body.privat .pf-stats strong,
  body.privat .gainer .row,
  body.privat .dist-list .val,
  body.privat .dist-list .share,
  body.privat .asset-list .val,
  body.privat .asset-list .chg,
  body.privat .market-list .val,
  body.privat .market-list .chg,
  body.privat .market-list .chg200,
  body.privat .pos-table td.num,
  body.privat .pos-table tfoot td,
  body.privat .card-price,
  body.privat .card-change {
    color: inherit;
    -webkit-text-fill-color: transparent;
  }
}

/* ==========================================================================
   Enger werdende Fenster
   ========================================================================== */

@media (max-width: 1240px) {
  .page-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titel"
      "bogen"
      "spuren";
    align-items: start;
  }
  .gauge {
    max-width: 560px;
    margin: 8px auto 0;
  }
}

@media (max-width: 1080px) {
  .topbar {
    grid-template-columns: 1fr auto;
    row-gap: 14px;
  }
  .nav-cluster {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    flex-wrap: wrap;
    min-width: 0;
  }
  /* Ohne min-width schiebt die Reiterleiste die ganze Seite in die Breite,
     statt in sich zu scrollen. */
  .pills {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pills::-webkit-scrollbar {
    display: none;
  }
  .market-field {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
  }
}

/* ==========================================================================
   Handy: Auf einem 390er Bildschirm stand vor dem ersten Inhalt fast ein
   ganzer Bildschirm Kopfzeile und Titelbereich. Hier wird alles enger
   gestellt – und Knopfgruppen scrollen in einer Reihe, statt in vier
   Reihen umzubrechen.
   ========================================================================== */

@media (max-width: 720px) {
  .app {
    padding: 12px 12px 0;
  }
  .panel {
    margin: 10px -12px 0;
    padding: 16px 12px 28px;
    border-radius: 22px 22px 0 0;
  }
  .card,
  .chart-section {
    padding: 16px 14px;
  }

  /* --- Kopfzeile --- */
  .topbar {
    gap: 12px;
    padding-bottom: 12px;
  }
  .brand-name {
    font-size: 18px;
  }
  .icon-btn,
  .avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  /* Navigation wandert nach unten in die Tab-Leiste. */
  .pills {
    display: none;
  }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2);
  }
  /* Platz, damit die Leiste nichts überdeckt. */
  .panel {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .market-field {
    padding: 9px 14px;
    font-size: 13px;
    gap: 8px;
  }
  /* "Live:" ist auf dem Handy verzichtbar – der Punkt zeigt es ohnehin. */
  .market-field .mf-label {
    display: none;
  }
  .mf-status {
    font-size: 13px;
  }

  /* --- Kursband --- */
  .tape {
    padding: 4px 0 16px;
  }
  .tape-item {
    padding-right: 30px;
  }
  .tape-label {
    font-size: 13px;
    margin-bottom: 3px;
  }
  .tape-value {
    font-size: 18px;
  }

  /* --- Titelbereich --- */
  .crumb-row {
    gap: 12px;
    margin-bottom: 12px;
  }
  .back-btn {
    width: 40px;
    height: 40px;
  }
  .crumb {
    font-size: 16px;
  }
  .hero-title {
    font-size: 40px;
    margin-bottom: 16px;
  }
  .facts {
    gap: 14px 28px;
  }
  .f-label {
    font-size: 13px;
  }
  .f-value {
    font-size: 19px;
  }
  .gauge {
    max-width: 400px;
    margin: 4px auto 0;
    min-height: 180px;
  }
  .gauge-label {
    font-size: 14px;
  }
  .gauge-value {
    font-size: 30px;
  }
  .gauge-sub {
    font-size: 12.5px;
  }
  .gauge-btn {
    margin-top: 8px;
    padding: 9px 17px;
    font-size: 14px;
  }
  /* Betrag und Knopf nebeneinander lassen den Betrag umbrechen – auf dem
     Handy bekommt der Knopf deshalb eine eigene Zeile. */
  .hc-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hc-text {
    flex: 1 1 100%;
  }
  .hc-value {
    font-size: 30px;
  }
  .gauge.as-chart .gauge-btn {
    margin-top: 0;
  }
  .hc-canvas {
    min-height: 150px;
    height: 150px;
  }
  .gauge.as-ring .hc-canvas {
    min-height: 260px;
    height: 260px;
  }

  /* --- Knopfgruppen: eine scrollbare Reihe statt vieler Zeilen --- */
  .scale-buttons,
  .range-buttons,
  .seg {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .scale-buttons::-webkit-scrollbar,
  .range-buttons::-webkit-scrollbar,
  .seg::-webkit-scrollbar {
    display: none;
  }
  .scale-buttons button,
  .range-buttons button,
  .seg button {
    flex: none;
    padding: 7px 13px;
  }
  .header-controls,
  .controls {
    width: 100%;
    justify-content: flex-start;
  }
  .card-head,
  .corr-header,
  .chart-header {
    gap: 10px;
    margin-bottom: 14px;
  }
  .card-head h2,
  .corr-header h2,
  .chart-header h2 {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .hero-title {
    font-size: 34px;
  }
  .gauge-value {
    font-size: 26px;
  }
}