/* Tableiste mit allen Pills (22.09.2026).
   Bis heute lagen Alarm, Konto und „Listings & Delistings" in einer eigenen
   festen Leiste darüber (#accountRail 46 px, Listings als fixed-Element).
   Jetzt stehen sie rechts in der Tableiste, alle in einer Pill-Größe — der
   des Alarm-Knopfs (32 px, 0,85rem Innenabstand, voll gerundet).

   Die Reiter scrollen in `.table-tabs-scroll`, die Pills nicht: Menüs und
   das Listings-Panel klappen unter ihrem Knopf auf und dürfen deshalb in
   keiner Fläche mit overflow liegen. */

.table-tabs-nav-global {
  top: 0;
  margin-top: 0;
  overflow: visible;
  gap: var(--space-2);
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.table-tabs-scroll {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  /* Scrollbar unsichtbar: auf schmaleren Bildschirmen wischt bzw. scrollt
     man die Reiter, eine Leiste mit Pfeilen unter den Namen störte. */
  scrollbar-width: none;
}

/* Die zentrale Regel in design-system.css (`html[data-theme] *`) ist
   spezifischer als eine Klasse — deshalb hier mit derselben Vorsilbe. */
html[data-theme] .table-tabs-scroll,
.table-tabs-scroll { scrollbar-width: none; }
html[data-theme] .table-tabs-scroll::-webkit-scrollbar,
.table-tabs-scroll::-webkit-scrollbar { display: none; height: 0; }

/* Etwas enger als vorher (0,9rem), damit bei 1440 px mehr Reiter passen. */
.table-tabs-scroll .table-tab,
.table-tabs-scroll .table-tab-group-head { padding: 0 0.7rem; }
.table-tabs-scroll .table-tab.active::after,
.table-tabs-scroll .table-tab-group-head.active::after { left: 0.7rem; right: 0.7rem; }

.tabbar-actions {
  position: static;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 1px solid var(--border-1);
  background: transparent;
}

/* Die frühere Kontoleiste ist jetzt nur noch eine Gruppe in der Reihe. */
.tabbar-actions .account-rail {
  position: static;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  z-index: auto;
}

/* ── Eine Pill für alle ─────────────────────────────────────────────── */
.tabbar-actions .account-btn,
.tabbar-actions .account-menu-wrapper > .account-btn,
.tabbar-actions .lifecycle-overlay-toggle,
.tabbar-actions .table-tab-help,
.tabbar-actions .account-hint,
.tabbar-actions .account-grace {
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  padding: 0 0.85rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-1);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  backdrop-filter: none;
}

.tabbar-actions .account-btn:hover,
.tabbar-actions .account-menu-wrapper > .account-btn[aria-expanded="true"],
.tabbar-actions .lifecycle-overlay-toggle:hover {
  background: var(--surface-3);
  border-color: var(--border-3);
}

/* Zustände behalten ihre Farbe, nur die Form ist gleich. */
.tabbar-actions .alarm-open-btn {
  color: var(--th-text-f2c96d);
  background: var(--th-grund-1b1913);
  border-color: var(--th-rand-4c4024);
}
.tabbar-actions .alarm-open-btn:hover { background: var(--th-grund-262116); border-color: var(--th-rand-8d753d); box-shadow: 0 0 18px var(--th-schatten-f2c96d-12); }

.tabbar-actions .account-hint {
  color: var(--text-warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

.tabbar-actions .table-tab-help {
  align-self: center;
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--primary-text);
  box-shadow: var(--primary-glow);
}
.tabbar-actions .table-tab-help:hover {
  border-color: var(--primary-hover-border);
  box-shadow: 0 0 0 1px var(--th-schatten-ffffff-18), 0 0 24px var(--th-schatten-ffffff-16);
}
/* Hell (01.10.2026, Restpunkt Light Mode): Der Katalog-Primary ist hell ein
   schwarzer Rand (--primary-border = --border-3 = Tinte) PLUS ein dunkler
   1-px-Ring aus --primary-glow – zusammen ein zwei Pixel harter Rahmen, der
   als einziger in der Pill-Reihe hart wirkte. Dunkel hebt sich „Feedback“
   über einen mittleren Rand und einen weichen Schein ab; hell genauso: Rand
   halb Tinte, halb Fläche, weicher Schatten statt Ring. Der weiße Schein des
   Hovers wäre hell unsichtbar → dort der Katalog-Glow mit vollem Rand. */
html[data-theme="light"] .tabbar-actions .table-tab-help {
  border-color: color-mix(in srgb, var(--primary-border) 40%, var(--surface-2));
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .tabbar-actions .table-tab-help:hover {
  border-color: var(--primary-hover-border);
  box-shadow: var(--primary-glow);
}

/* Hell/dunkel (01.10.2026): runder Knopf in der Pill-Form der Reihe; er
   zeigt, wohin er schaltet (dunkel: Sonne, hell: Mond). modules/thema.js. */
.tabbar-actions .thema-schalter {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tabbar-actions .thema-schalter:hover { background: var(--surface-3); border-color: var(--border-3); }
.tabbar-actions .thema-schalter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tabbar-actions .thema-schalter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar-actions .thema-schalter .thema-mond { display: none; }
html[data-theme="light"] .tabbar-actions .thema-schalter .thema-sonne { display: none; }
html[data-theme="light"] .tabbar-actions .thema-schalter .thema-mond { display: block; }

.tabbar-actions .lifecycle-tab-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--fs-12);
  line-height: 20px;
  text-align: center;
}

/* ── Listings & Delistings: Panel unter seinem Knopf ─────────────────── */
.tabbar-actions .lifecycle-overlay {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  z-index: var(--z-dropdown, 40);
  pointer-events: auto;
}

.tabbar-actions .lifecycle-overlay-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2 * var(--space-3));
  box-sizing: border-box;
  margin-top: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}

/* Volle Tage: breiter und mehrspaltig statt scrollen (lifecycleTab.js). */
/* 50 rem seit 25.09.2026: mit festen Spalten (Art, Markt, Börse, Zeit) braucht der Markt Platz. */
.tabbar-actions .lifecycle-overlay-panel.ist-breit { width: min(50rem, calc(100vw - 2 * var(--space-3))); }

/* Das Konto-Menü muss über dem Listings-Knopf liegen, der am Handy darunter
   umbricht (beide Gruppen bilden sonst gleich hohe Stapel). */
.tabbar-actions .account-menu-wrapper { position: relative; z-index: calc(var(--z-dropdown, 100) + 1); }
.tabbar-actions .account-menu { z-index: calc(var(--z-dropdown, 100) + 1); }

/* ── Eine Zeile (18.10.2026, modules/leiste.js) ─────────────────────────
   Nutzer nach Mockup D: links Gruppen und Einzelreiter als Pillen in der Form
   der Knöpfe rechts (Alarm, Nutzermenü, Listings: 32 px, voll gerundet, helle
   Schrift); der aktive Eintrag schimmert wie „Alarm stellen“. Rechts mit
   Abstand die Knöpfe; was nicht passt, wandert unter „Mehr ▾“. Gruppen klappen
   ihre Unterreiter in #leisteKlapp darunter auf. Menüs und Panels liegen in
   keiner Fläche mit overflow (nur .table-tabs-scroll schneidet, damit
   leiste.js die Breite messen kann). */
.table-tabs-nav-global {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.leiste-zeile1 {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
}
.leiste-zeile1 > .table-tabs-scroll { flex: 0 1 auto; min-width: 0; max-width: none; align-items: center; gap: var(--space-2); }
/* Innenraum für den Schimmer der aktiven Pille und das „?“ der Reiter-Einführung an
   ihrer Ecke: die Zeile schneidet (overflow), und was übersteht, zählte leiste.js
   als „passt nicht“ – ohne Polster wanderte alles ins „Mehr“. */
.leiste-zeile1 > .table-tabs-scroll { padding: var(--space-3); margin: calc(-1 * var(--space-3)) 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); }
.leiste-zeile1 > .leiste-mehr { align-items: center; margin-left: var(--space-2); }
/* Abstand zu Alarm, Nutzermenü und Listings (Nutzer 18.10.2026). */
.leiste-zeile1 > .tabbar-actions { flex: none; margin-left: auto; padding: 0 0 0 var(--space-6); border-left: 0; }

/* Einträge unter „Mehr“ (leiste.js). */
.table-tabs-scroll > .leiste-im-mehr { display: none !important; }
.table-tabs-scroll .table-tab-group-caret { display: none; }

/* Pillen der Zeile: dieselbe Form wie die Knöpfe rechts (tabbar-actions oben). */
.leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head),
.leiste-zeile1 .leiste-mehr-knopf {
  box-sizing: border-box;
  gap: 0.4em;
  min-height: 32px;
  height: 32px;
  padding: 0 0.85rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head):hover,
.leiste-zeile1 .table-tabs-scroll > .table-tab-group-head[aria-expanded="true"],
.leiste-zeile1 .leiste-mehr-knopf:hover,
.leiste-zeile1 .leiste-mehr-knopf[aria-expanded="true"] {
  background: var(--surface-3);
  border-color: var(--border-3);
  color: var(--text-1);
}
.leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head)::after,
.leiste-zeile1 .leiste-mehr-knopf::after { display: none; }
.leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head):focus-visible,
.leiste-zeile1 .leiste-mehr-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Aktiv: Farbe und Schimmer von „Alarm stellen“. --leiste-ring ist die
   Innenkante der Fassung (web3-design-privat-kopf.css setzt seine eigene). */
.leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head).active,
.leiste-zeile1 .leiste-mehr-knopf.active {
  --leiste-glanz: var(--th-schatten-f2c96d-12);
  border-color: var(--th-rand-8d753d);
  background: var(--th-grund-1b1913);
  color: var(--th-text-f2c96d);
  font-weight: var(--fw-semibold);
  animation: leiste-schimmer 2.6s ease-in-out infinite;
}
@keyframes leiste-schimmer {
  0%, 100% { box-shadow: var(--leiste-ring, 0 0 0 0 transparent), 0 0 6px var(--leiste-glanz, transparent); }
  50% { box-shadow: var(--leiste-ring, 0 0 0 0 transparent), 0 0 12px var(--leiste-glanz, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .leiste-zeile1 .table-tabs-scroll > :is(.table-tab, .table-tab-group-head).active,
  .leiste-zeile1 .leiste-mehr-knopf.active {
    animation: none;
    box-shadow: var(--leiste-ring, 0 0 0 0 transparent), 0 0 10px var(--leiste-glanz, transparent);
  }
}

/* Gruppenkopf: „TEAM · PP ▾“. */
.leiste-kopf-unter { font-weight: var(--fw-medium); opacity: 0.85; }
.leiste-kopf-unter::before { content: "·"; margin-right: 0.4em; opacity: 0.6; }
.leiste-kopf-unter[hidden] { display: none; }
.leiste-kopf-pfeil { font-size: 0.7em; color: var(--text-3); transition: transform var(--t-fast); }
.table-tab-group-head.active .leiste-kopf-pfeil { color: inherit; opacity: 0.8; }
.table-tab-group-head[aria-expanded="true"] .leiste-kopf-pfeil { transform: rotate(180deg); }

/* „Mehr ▾“ und sein Menü. */
.leiste-mehr { position: relative; display: flex; flex: none; }
.leiste-mehr[hidden] { display: none; }
.leiste-mehr-knopf[aria-expanded="true"] .table-tab-group-caret { transform: rotate(180deg); }
.leiste-mehr .table-tab-group-caret { display: inline; }
.leiste-mehr-aktiv { color: inherit; }
.leiste-mehr-aktiv::before { content: "·"; margin-right: var(--space-2); color: var(--text-3); }
.leiste-mehr-aktiv[hidden] { display: none; }

.leiste-mehr-menue {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: calc(var(--z-dropdown, 100) + 2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  min-width: 13rem;
  max-width: calc(100vw - 2 * var(--space-4));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.leiste-mehr-menue[hidden] { display: none; }
.leiste-mehr-gruppe { display: flex; flex-direction: column; gap: 2px; }
.leiste-mehr-gruppe + .leiste-mehr-gruppe,
.leiste-mehr-eintrag + .leiste-mehr-gruppe,
.leiste-mehr-gruppe + .leiste-mehr-eintrag {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-1);
}
.leiste-mehr-titel,
.leiste-klapp-titel {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--text-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.leiste-mehr-eintrag,
.leiste-klapp-eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.leiste-mehr-gruppe .leiste-mehr-eintrag { padding-left: var(--space-5); }
.leiste-mehr-eintrag:hover,
.leiste-klapp-eintrag:hover { background: var(--surface-3); color: var(--text-1); }
.leiste-mehr-eintrag.active,
.leiste-klapp-eintrag.active { background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-semibold); }
.leiste-mehr-eintrag:focus-visible,
.leiste-klapp-eintrag:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Klappmenü der Gruppen (#leisteKlapp) ──────────────────────────────
   Unter dem Kopf (leiste.js richtet `left` aus), Abschnitte als Spalten. */
.leiste-klapp {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: calc(var(--z-dropdown, 100) + 2);
  display: grid;
  grid-template-columns: minmax(11rem, auto);
  gap: var(--space-4);
  box-sizing: border-box;
  max-width: calc(100vw - 2 * var(--space-3));
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.leiste-klapp[hidden] { display: none; }
/* Spalten = Abschnitte (leiste.js setzt data-spalten; TEAM hat drei). */
.leiste-klapp[data-spalten="2"] { grid-template-columns: repeat(2, minmax(11rem, auto)); }
.leiste-klapp[data-spalten="3"] { grid-template-columns: repeat(3, minmax(11rem, auto)); }
.leiste-klapp[data-spalten="4"] { grid-template-columns: repeat(4, minmax(11rem, auto)); }
.leiste-klapp-abschnitt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leiste-klapp-eintrag { color: var(--text-1); padding-right: var(--space-2); }
.leiste-klapp-text { flex: 1 1 auto; }
.leiste-klapp-eintrag .bugs-menue-zahl { flex: none; margin-left: var(--space-3); }

/* Unterreiter (19.10.2026, Nutzer: PP & Co. zeigen ihre Unterreiter beim Hover): „›“ rechts am
   Eintrag, Untermenü daneben (leiste.js richtet aus, am rechten Rand .nach-links); ohne Hover
   oder schmal klappt ein Tipp auf den Pfeil die Unterreiter darunter auf (Media-Abfrage unten). */
.leiste-klapp-zeile { position: relative; display: flex; flex-direction: column; }
.leiste-klapp-unterpfeil {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  min-width: 28px;
  margin-left: var(--space-2);
  color: var(--text-3);
  font-size: var(--fs-17);
  line-height: 1;
  transition: color var(--t-fast), transform var(--t-fast);
}
.leiste-klapp-eintrag:hover .leiste-klapp-unterpfeil,
.leiste-klapp-eintrag:focus-visible .leiste-klapp-unterpfeil,
.leiste-klapp-zeile.unter-offen .leiste-klapp-unterpfeil { color: var(--text-1); }
.leiste-klapp-zeile.unter-offen > .leiste-klapp-eintrag { background: var(--surface-3); }
.leiste-unter {
  position: absolute;
  top: calc(-1 * var(--space-1) - 1px);
  left: calc(100% + var(--space-3) + var(--space-1));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  min-width: 11rem;
  padding: var(--space-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.leiste-unter[hidden] { display: none; }
.leiste-unter.nach-links { left: auto; right: calc(100% + var(--space-3) + var(--space-1)); }
.leiste-unter-eintrag {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.leiste-unter-eintrag:hover { background: var(--surface-3); color: var(--text-1); }
.leiste-unter-eintrag.active { background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-semibold); }
.leiste-unter-eintrag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: none), (max-width: 640px) {
  .leiste-unter,
  .leiste-unter.nach-links {
    position: static;
    min-width: 0;
    margin: 2px 0 var(--space-1) var(--space-5);
    padding: 0 0 0 var(--space-2);
    border: 0;
    border-left: 1px solid var(--border-1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
  }
  /* Größere Tippfläche für den Pfeil; offen zeigt er nach unten. */
  .leiste-klapp-unterpfeil { min-width: 40px; justify-content: center; margin-right: calc(-1 * var(--space-2)); }
  .leiste-klapp-zeile.unter-offen .leiste-klapp-unterpfeil { transform: rotate(90deg); }
}

/* Symbole je Reiter (Nutzer 15.10.2026: UI immer mit Symbolen), als Maske in currentColor. */
.leiste-klapp-eintrag::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--leiste-symbol, none) center / contain no-repeat;
  mask: var(--leiste-symbol, none) center / contain no-repeat;
}
.leiste-klapp-eintrag.active::before { opacity: 1; }
/* Symbole je Unterreiter (Nutzer 18.10.2026: „passende Symbole, die wirklich zum Tab-Thema passen, nix 0815“).
   Bedeutung je Reiter steht als Kommentar in der Erzeugung (siehe Commit); 24er-Raster, Strich 1,8. */
.leiste-klapp-eintrag { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="fundingratesTab"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v4h-4'/%3E%3Cpath d='m9.5 14.5 5-5'/%3E%3Ccircle cx='9.8' cy='9.8' r='.9'/%3E%3Ccircle cx='14.2' cy='14.2' r='.9'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="frCompareView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='m5 7-2.5 6h5z'/%3E%3Cpath d='m19 7-2.5 6h5z'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="backtesterTab"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.6-6.4'/%3E%3Cpath d='M3 4v4h4'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="topSpreadsTab"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16M4 19h16'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='m9.5 10.5 2.5-2.5 2.5 2.5M9.5 13.5l2.5 2.5 2.5-2.5'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="boersenHedgesView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V5'/%3E%3Cpath d='m4 9 4-4 4 4'/%3E%3Cpath d='M16 4v15'/%3E%3Cpath d='m12 15 4 4 4-4'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="crossOiTab"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.5'/%3E%3Cpath d='M5 6v4c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V6'/%3E%3Cpath d='M5 10v4c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-4'/%3E%3Cpath d='M5 14v4c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-4'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="liquidityView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5c2.5 0 3.5 4 5 8s2 6 3 6'/%3E%3Cpath d='M21 5c-2.5 0-3.5 4-5 8s-2 6-3 6'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M12 3v4' stroke-dasharray='1.5 2'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="kostenMarginView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5L6 21z'/%3E%3Cpath d='m9.5 14.5 5-5'/%3E%3Ccircle cx='9.8' cy='9.8' r='.8'/%3E%3Ccircle cx='14.2' cy='14.2' r='.8'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="carryView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12'/%3E%3Cpath d='M7 3c0 5 10 5 10 9s-10 4-10 9'/%3E%3Cpath d='M17 3c0 5-10 5-10 9s10 4 10 9'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="xstocksPointsView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 19.5 6v6c0 4.5-3.2 7.8-7.5 9.5C7.7 19.8 4.5 16.5 4.5 12V6z'/%3E%3Cpath d='M12 7v10'/%3E%3Crect x='10' y='9.5' width='4' height='5' rx='.5'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="glvView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 8.5V7M12 17v-1.5M8.5 12H7M17 12h-1.5'/%3E%3Cpath d='M6 20v1M18 20v1'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="shortcutsView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V9a4 4 0 0 1 4-4h11'/%3E%3Cpath d='m16 2 3 3-3 3'/%3E%3Cpath d='M20 13v2a4 4 0 0 1-4 4H5'/%3E%3Cpath d='m8 22-3-3 3-3'/%3E%3Cpath d='M12 9.5v5M9.5 12h5'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="tradingView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v4M7 15v6M17 3v2M17 13v8'/%3E%3Crect x='5' y='7' width='4' height='8' rx='.5'/%3E%3Crect x='15' y='5' width='4' height='8' rx='.5'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="rstPoolsView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5s4.5 5 4.5 8.5a4.5 4.5 0 0 1-9 0C4.5 8.5 9 3.5 9 3.5z'/%3E%3Cpath d='M15 8s4.5 5 4.5 8.5a4.5 4.5 0 0 1-8.6 1.9'/%3E%3C/svg%3E"); }
/* PP (18.10.2026, Nutzer): das PerpPilot-Zeichen statt Papierflieger, gefüllt; Farbe am Ende der Datei. */
.leiste-klapp-eintrag[data-leiste-ziel="rstPpView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 22 22'%3E%3Cpath fill='currentColor' d='M12 5.6Q12 4 14 4Q16 4 16 5.6L16 12L22.4 12Q23 12 23 12.6L23 15.4Q23 16 22.4 16L20.4 16Q16 16 16 20.4L16 22.4Q16 24 14 24Q12 24 12 22.4L12 16L4.6 16Q4 16 4 15.4L4 12.6Q4 12 4.6 12L5 12Q12 12 12 5.6Z'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="rhPunkteView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 18 6'/%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M4 20l1-4M4 20l4-1'/%3E%3Cpath d='M7 17l-1.5-3.5M7 17l3.5 1.5'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="tradeBustersView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3Cpath d='m7 12 2-2.5 2 2 2.5-3'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="dBotView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20l1.2-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M10 9.5a2.2 2.2 0 1 1 3 2c-.6.3-1 .8-1 1.5'/%3E%3Cpath d='M12 15.5h.01'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="botTestingView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='7' width='8' height='12' rx='4'/%3E%3Cpath d='M9.5 7 8 4.5M14.5 7 16 4.5'/%3E%3Cpath d='M8 11H4M8 15H4.5M16 11h4M16 15h3.5'/%3E%3Cpath d='M12 11v8'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="samplePortfolioView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M3 12.5h18'/%3E%3Cpath d='M11 12.5v1.5h2v-1.5'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="v3btDashboardView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 12h7M9 15h7M9 18h7' stroke-dasharray='2 2'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="v3btBacktesterView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h11M10 10h11M10 15h11M10 20h11'/%3E%3Cpath d='M7 9 3 12l4 3'/%3E%3Cpath d='M3 12h5'/%3E%3C/svg%3E"); }

/* Tools ▾ und ETF Spot (18.10.2026): Lupe über Route, Liquiditätsbalken in der Range, Peg-Linie mit Ausschlag, Fonds-Anteile. */
.leiste-klapp-eintrag[data-leiste-ziel="routeLensView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4' cy='19' r='1.6'/%3E%3Cpath d='M5.5 18.2C8 16 7 12 10 11'/%3E%3Ccircle cx='14.5' cy='9.5' r='4.5'/%3E%3Cpath d='m17.8 12.8 3.7 3.7'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.2'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="v3dexView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v16M19 4v16'/%3E%3Cpath d='M8 20v-5M11 20v-9M14 20v-7M16.5 20v-3'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="depegView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h18' stroke-dasharray='2 2.2'/%3E%3Cpath d='M3 8c3 0 4 0 6 4s2 7 4 7 3-6 5-9 2-2 3-2'/%3E%3C/svg%3E"); }
.leiste-klapp-eintrag[data-leiste-ziel="etfView"] { --leiste-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5V12l6.2 5.8'/%3E%3Cpath d='M12 12 4.3 15.5'/%3E%3C/svg%3E"); }

/* Die Unterreiterknöpfe aus index.html sind nur noch Quelle des Klappmenüs. */
.leiste-pillen-zone { display: none !important; }

/* Angemeldet stehen Hell/Dunkel und Feedback im Nutzermenü (auth.js). */
.tabbar-actions .thema-schalter[hidden],
.tabbar-actions .table-tab-help[hidden] { display: none; }

/* ── Schmale Bildschirme: Knöpfe in eigener Zeile unter den Pillen ─────── */
@media (max-width: 900px) {
  .leiste-zeile1 { flex-wrap: wrap; padding: var(--space-2); row-gap: var(--space-2); }
  .leiste-zeile1 > .table-tabs-scroll { flex: 1 1 0; }
  .leiste-zeile1 > .tabbar-actions {
    flex-basis: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-left: 0;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--border-1);
  }
}
@media (max-width: 640px) {
  /* „Mehr · Tracking“ wird zu „Mehr“: die Zeile gehört den Reitern. */
  .leiste-mehr-aktiv { display: none; }
  .leiste-klapp,
  .leiste-klapp[data-spalten] { grid-template-columns: minmax(0, 1fr); left: 0 !important; right: 0; }
}

/* ── Ein Abstand unter der Tableiste für alle Reiter (22.09.2026) ─────
   Vorher 0 bis 32 px je nach Reiter: Die Dashboard-Reiter hatten den Abstand
   zum (meist leeren) Alarmbereich plus einen Außenabstand, FR Vergleich und
   Airdrop 16 px, Tiefe/Musterportfolio/Nutzer/Tracking keinen. Jetzt trägt
   ihn nur noch die Leiste selbst; Maß ist FR Vergleich (16 px). */
#tableTabsNav { margin-bottom: var(--space-4); }
#alertsContainer:empty { display: none; }
.dashboard > .table-tabs,
.app-view,
.app-view.active,
.depeg-view.active { margin-top: 0 !important; }
.xstocks-points-view { padding-top: 0 !important; }
.route-lens-view > .route-lens-notice:first-child { margin-top: 0; }

/* ── Kopfsortierung (23.09.2026) ─────────────────────────────────────────
   Sortierknöpfe für Listen ohne eigene Stildatei: Listings-Overlay (hier in
   der Tableiste), ETF Spot, xStocks Points und der Alarm-Dialog. Die Regeln
   sind je Bereich begrenzt. Der Pfeil hält Platz für zwei Zeichen, damit die
   Beschriftung beim Umschalten nicht springt. */
:is(.lifecycle-popup-body, #etfView, #xstocksPointsView, #alarmsDialog) .tab-sortkopf {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 0 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}
:is(.lifecycle-popup-body, #etfView, #xstocksPointsView, #alarmsDialog) .tab-sortkopf > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.lifecycle-popup-body, #etfView, #xstocksPointsView, #alarmsDialog) .tab-sortkopf:hover,
:is(.lifecycle-popup-body, #etfView, #xstocksPointsView, #alarmsDialog) .tab-sortkopf.active { color: var(--text-1); }
:is(.lifecycle-popup-body, #etfView, #xstocksPointsView, #alarmsDialog) .tab-sortkopf:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 1px;
}
:is(.lifecycle-popup-body, #etfView, #xstocksPointsView, #alarmsDialog) .tab-sortpfeil {
  display: inline-block;
  flex: none;
  min-width: 1.4em;
  text-align: left;
}

/* Listings: Kopf je Kartenspalte im selben Raster wie die Karten (style.css
   --lc-spalten); Innenabstand = Kartenrand (links 3 px, rechts 1 px) + Polster. */
.lifecycle-popup-body .lifecycle-sortleiste {
  display: grid;
  grid-template-columns: var(--lc-spalten);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 28px;
  padding: 0 calc(0.45rem + 1px) 0 calc(0.45rem + 3px);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.lifecycle-popup-body .lifecycle-sortleiste > .tab-sortkopf { justify-self: start; }
.lifecycle-popup-body .lifecycle-sortleiste > .tab-sortkopf:last-child { justify-self: end; }
.lifecycle-popup-body .lifecycle-sortleiste.ist-spiegel .tab-sortkopf { cursor: default; }

/* xStocks Points: Köpfe dürfen umbrechen („davon Basis") — sonst schiebt die
   Tabelle am Handy die ganze Seite breiter (bei 390 px gemessen: 18 px). */
#xstocksPointsView .xstocks-points-table .tab-sortkopf { white-space: normal; padding: 0; gap: 1px; }
#xstocksPointsView .xstocks-points-table .tab-sortkopf > span:first-child { overflow: visible; }
/* Schmale Spalten im Quests-Kasten (332 px bei 1440): der Pfeil reserviert
   hier nur ein Zeichen, sonst scrollt die Tabelle waagrecht. */
#xstocksPointsView .xstocks-points-table .tab-sortpfeil { min-width: 1em; }

/* PP im Klappmenü in PerpPilot-Grün (--marke-perppilot in thema-farben.css, hell dunkler für Kontrast; 18.10.2026). */
.leiste-klapp-eintrag[data-leiste-ziel="rstPpView"]::before { background: var(--marke-perppilot); opacity: 1; }