/* DATEI: signalkompass/dashboard/static/css/aktienampel.css
   BESCHREIBUNG:
     Skin-spezifische STRUKTUR-/Form-Overrides fuer das Individualdesign „Aktienampel"
     (data-design="aktienampel"). Nur das, was reines Token-Remapping (tokens.css) NICHT abdeckt:
     luftigere Profi-Tabelle und der rahmenlose „Kachel"-Look (Teaser-Karten + KPI, simplywall.st-
     Anmutung: leicht transluzent, bei Hover voll deckend). Farben kommen weiterhin
     ausschliesslich aus den Skin-Token-Bloecken in tokens.css. Wird NACH components.css geladen und
     greift ausschliesslich unter [data-design^="aktienampel"] — der Standard-Look bleibt unberuehrt. */

/* --- Header-Marke: im Aktienampel-Skin Ampel-Balken-Logo + Name „Aktienampel" statt „Signalkompass".
   Beide Marken liegen im Markup; hier wird per data-design die richtige gezeigt (live umschaltbar,
   kein Reload). Claim/Beta/Stand/Info bleiben gemeinsam. --- */
.marke-logo--ampel,
.marke-name--ampel { display: none; }
[data-design^="aktienampel"] .marke-logo--std,
[data-design^="aktienampel"] .marke-name--std { display: none; }
[data-design^="aktienampel"] .marke-logo--ampel { display: inline-flex; align-items: center; }
[data-design^="aktienampel"] .marke-name--ampel { display: inline; }

/* --- „Kachel"-Look (simplywall.st): Teaser-Karten (Kompaktmodus) UND KPI-Kacheln (Profimodus)
   sind rahmenlos und HELLER als der getoente Seiten-Hintergrund (Kachel=Panel, bg=Pergament/Espresso)
   -> sie heben sich allein durch die Helligkeit ab. Hover ist KEIN Farbwechsel, sondern eine weiche
   Schatten-Elevation (die Kachel „schwebt" leicht an); im Dark zusaetzlich ein Tick heller, weil ein
   schwarzer Schatten auf dunklem Grund kaum traegt. Linke KPI-Akzentkante entfaellt bewusst. --- */
/* `.dashboard-overview .kpi` (dashboard.css, gleiche Tiefe + spaeter geladen) wuerde background/
   box-shadow/border sonst zurueckholen -> KPI-Selektoren bewusst eine Stufe spezifischer. */
[data-design^="aktienampel"] .ui-signal-card,
[data-design^="aktienampel"] .dashboard-overview .kpi,
[data-design^="aktienampel"] .kpi,
[data-design^="aktienampel"] .ui-kpi {
  background: var(--ampel-tile-bg);
  border-color: transparent;
  box-shadow: var(--ampel-tile-shadow);
  transition: box-shadow var(--duration-normal) ease, background-color var(--duration-normal) ease;
}
[data-design^="aktienampel"] .ui-signal-card:not(.ui-signal-card--kachel):hover,
[data-design^="aktienampel"] .dashboard-overview .kpi:hover,
[data-design^="aktienampel"] .kpi:hover,
[data-design^="aktienampel"] .ui-kpi:hover {
  background: var(--ampel-tile-bg-hover);
  border-color: transparent;
  box-shadow: var(--ampel-tile-shadow);
  transform: none;
}
/* Die Rasterkarte hat bewusst einen eigenen, themeübergreifend weißen Hover-Vertrag. Die
   spezifische Ausnahme verhindert, dass die allgemeine Aktienampel-Kachelfläche ihn überlagert. */
[data-design^="aktienampel"] .ui-signal-card.ui-signal-card--kachel:is(:hover,:focus-within),
[data-design^="aktienampel"] .ui-signal-card.ui-signal-card--kachel:is(:hover,:focus-within) .ui-signal-card__kachel {
  background: var(--signal-card-kachel-hover-bg);
  border-color: var(--signal-card-kachel-hover-bg);
  color: var(--signal-card-kachel-hover-txt);
}
/* Kein abweichender Kopf-Hover -> die ganze Kachel wird einheitlich voll deckend */
[data-design^="aktienampel"] .ui-signal-card__kopf:hover { background: transparent; }
/* KPI-Top-Akzentlinie (::before) entfaellt -> rahmenloser Kachel-Look wie die Teaser */
[data-design^="aktienampel"] .kpi::before,
[data-design^="aktienampel"] .ui-kpi::before { display: none; }

/* --- Profi-Tabelle: luftigere Zeilen (Zeilenhoehe +4px ggue. Standard-Skin) --- */
[data-design^="aktienampel"] .tabelle-wrap th,
[data-design^="aktienampel"] .tabelle-wrap td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* --- Kompaktmodus-Teaser: allseitig etwas luftiger (nicht viel) --- */
[data-design^="aktienampel"] .ui-signal-card__kopf { padding: var(--space-8) var(--space-9); }
[data-design^="aktienampel"] .ui-signal-card__body { padding: var(--space-7) var(--space-9) var(--space-8); }

/* --- Kompaktmodus-Teaser: etwas mehr Luft zwischen den Kacheln (+4px in Reihe und Spalte) --- */
[data-design^="aktienampel"] .einfach-karten { gap: calc(var(--space-5) + 4px); }
@media (min-width: 680px) {
  [data-design^="aktienampel"] .einfach-karten { gap: calc(var(--space-6) + 4px); }
}

/* --- Kompaktmodus: Trennlinie ueber den Gruppen-Ueberschriften (Portfolio/Watchlist) entfaellt
   (erbt sonst die generische h2-border-top aus dashboard.css). --- */
[data-design^="aktienampel"] .einfach-gruppe { border-top: none; padding-top: 0; }

/* --- Profimodus-Detail: „Warum dieses Signal" + „Portfolio-Entscheidung" stehen bei genug Platz
   zweispaltig nebeneinander (wie das .detail-grid darunter), schmal gestapelt. Der Standard-Skin
   bleibt unberuehrt: ohne dieses Grid stapeln die Bloecke wie bisher. --- */
[data-design^="aktienampel"] .signal-grund-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  align-items: start;
  margin: var(--space-12) 0;
}
[data-design^="aktienampel"] .signal-grund-paar > .signal-grund { margin: 0; }

/* --- Skin-weites Vollbreit-Raster: Header/Uebersicht, Strategie-Arbeitsbereich, sticky Detailkopf und
   die Detail-Aufklappzeile fluchten GEMEINSAM ueber die ganze Browserbreite (simplywall.st /returns).
   Frueher war nur der Workspace-Inner ausgebrochen, Uebersicht/KPIs blieben „gefasst" — der Nutzer will
   den GANZEN Screen im Vollbreit-Raster (Header inkl. aufgeklapptem oberen Bereich wie die Tabellen).
   Die `.dashboard-zone`-Sektionen brechen via Negativ-Marge ohnehin auf Viewport-Breite aus; `max-width:
   none` an den Inner-Containern laesst Header, KPIs UND Tabellen ueber die volle Breite fluchten.

   Seitenrand `--ampel-rand` ist responsiv (clamp); alle Zonen nutzen denselben Wert -> ihre Kanten
   fluchten exakt. transition:none auf der Tabelle -> der Browser passt die Breite beim Resize sofort an.
   Kurve (Nutzer-Feedback 2026-06-30):
   - bei ~1024px = 24px (vom Nutzer als „gut so" bestaetigt);
   - >1024px waechst der Rand zum Browserrand (Slope /21, Cap 90) -> bei hohen Aufloesungen mehr Luft
     (~44px @1440, ~67px @1920). [2026-06-30: gegenueber der ersten Fassung /14,Cap120 um ~1/4
     zurueckgenommen — Nutzer-Feedback „bei hohen Aufloesungen ein Viertel weniger Abstand".]
   - <=1024px Plateau bei 24px (clamp-Minimum) statt weiter auf 16px zu schrumpfen -> schmaler Desktop
     wirkt gerahmt statt randlos-gequetscht (die Tabelle scrollt bei Bedarf horizontal — Bestandsverhalten).
   Echtes Handy (<600px) faengt der Media-Override unten ab (schlanker Rand, Platz fuer Content). */
[data-design^="aktienampel"] {
  --ampel-rand: clamp(24px, calc(24px + (100vw - 1024px) / 21), 90px);
}
@media (max-width: 600px) {
  [data-design^="aktienampel"] { --ampel-rand: var(--space-5); } /* 10px, deckungsgleich mit Standard-Phone-Rand */
}
/* Die globale Nutzerpräferenz (data-layout="full") aktiviert das Vollbreit-Raster in beiden
   Ansichtsmodi. Ohne sie bleibt der Content zentriert — deshalb hängt die Regel bewusst am
   data-layout und gilt NICHT pauschal für den ganzen Skin. */
[data-design="aktienampel"][data-layout="full"] .dashboard-overview .dashboard-zone-inner,
[data-design="aktienampel"][data-layout="full"] .dashboard-workspace .dashboard-zone-inner,
[data-design="aktienampel"][data-layout="full"] .sdk-inner,
[data-design="aktienampel"][data-layout="full"] .einfach-wrap {
  max-width: none;
  padding-left: var(--ampel-rand);
  padding-right: var(--ampel-rand);
}
/* Footer ins Vollbreit-Raster: die `.footer-inner` (= `.dashboard-zone-inner`) liegt NICHT unter
   `.dashboard-overview`/`.dashboard-workspace`, wird also von der Regel oben nicht erfasst und bliebe
   auf 1350px zentriert -> waehrend der uebrige Content bis zum Rand geht (der Footer wirkt „zu schmal").
   Hier separat aufspannen, damit die Footer-Kanten mit dem Content fluchten (Nutzer-Wunsch: Footer
   ueber die ganze Breite, deckungsgleich mit dem Vollbreit-Content). */
[data-design="aktienampel"][data-layout="full"] footer .footer-inner {
  max-width: none;
  padding-left: var(--ampel-rand);
  padding-right: var(--ampel-rand);
}
/* Detail-Aufklappzeile: bisher als zentrierte 1316px-Box gekappt -> im Skin ueber die ganze
   Tabellenzeile aufspannen (Nutzer: „Content soll sich ueber die ganze Zeile aufteilen"). Der
   Viewport-Cap bleibt erhalten, damit der sticky Detail-Block bei horizontal scrollender Tabelle
   (schmale Viewports) lesbar im sichtbaren Bereich bleibt. */
[data-design^="aktienampel"] .detail-content-wrap {
  max-width: calc(100vw - 2 * var(--ampel-rand));
}
[data-design^="aktienampel"] .tabelle-wrap {
  transition: none;
}

/* Der Profil-Schalter gehört ausschließlich zum führenden Aktienampel-Neu-Design. Die höhere
   Spezifität hält den Eintrag trotz der später geladenen Basisregel `.theme-switch-wrapper` verborgen. */
.theme-switch-wrapper.layoutbreite-switch-wrapper { display: none; }
[data-design="aktienampel"] .theme-switch-wrapper.layoutbreite-switch-wrapper { display: flex; }
@media (max-width: 600px) {
  [data-design="aktienampel"] .theme-switch-wrapper.layoutbreite-switch-wrapper { display: none; }
}

/* ===== Aktienampel-Skin — Feinschliff/Deltas =====
   Die [data-design^=…]-Regeln oben und die Regeln hier gehören demselben Skin. Die Zweiteilung ist
   historisch: hier lag das Vorschau-Design „aktienampel-neu", das seit dem Mock-Abbau (2026-07-15)
   DER Aktienampel-Skin ist. Reihenfolge = Kaskade — die Regeln hier überschreiben die oben. */

/* Mesh-Grund (F-84): Statt einer Volltonfläche liegt hinter dem gesamten Dashboard eine feste
   Ebene aus weichen Farbwolken. Bewusst als reine radial-gradients in EINEM Element — ein
   weicher Verlauf ist optisch bereits eine vor-geblurrte Fläche, kostet aber im Gegensatz zu
   filter:blur() nichts zur Laufzeit (das Dashboard muss flott bleiben). Die Ebene liegt fix am
   Viewport und scrollt nicht mit; die Zonen darüber sind transluzent (siehe tokens.css).
   Der :has()-Test grenzt den Grund auf die Seiten ein, die den Mesh tragen sollen: Dashboard und
   Landingpage (Nutzerwunsch 2026-07-15 — die Landingpage soll denselben Grund zeigen wie das
   Produkt dahinter). `.lp-page` gibt es ausschliesslich in landing.html; Login und Rechtstexte
   teilen sich denselben Skin, behalten aber ihren eigenen Aufbau. Die Flaechen der Landingpage
   werden dafuer in landing.css transparent gestellt. */
[data-design="aktienampel"] body:has(.dashboard-workspace),
[data-design="aktienampel"] body:has(.lp-page) {
  background: var(--mesh-base);
}
[data-design="aktienampel"] body:has(.dashboard-workspace)::before,
[data-design="aktienampel"] body:has(.lp-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--mesh-base);
  background-image: var(--mesh-bg);
  /* Die Wolken liegen in einer eigenen Box (--mesh-size), die dem Viewport nur teilweise folgt —
     verkleinert man das Fenster, laufen Teile rechts/unten heraus, statt alles zusammenzustauchen.
     Verankert oben links, damit die Gold-Ecke an der Marke stehen bleibt. */
  background-size: var(--mesh-size);
  background-position: left top;
  background-repeat: no-repeat;
}
/* Im Druck bleibt der Grund weiß — der Mesh würde sonst mitgedruckt (print-color-adjust: exact). */
@media print {
  [data-design="aktienampel"] body::before { display: none; }
}

/* Zonenkante: Der Kopf erhält 40 px mehr Tiefe. Die 48 px hohe Strategie-Navigation beginnt
   24 px oberhalb der Trennkante und endet 24 px darunter, liegt also exakt mittig auf ihr. */
/* Die Kopf-Zone trägt seit F-84 statt der Volltonfläche nur noch eine sehr schwache
   Dunkelbraun-Tönung (--mesh-zone-bg) — grenzt den Kopf wie zuvor ab, lässt den Mesh-Grund
   darunter aber deutlich durchscheinen. */
[data-design="aktienampel"] .dashboard-overview {
  padding-bottom: calc(44px + var(--space-12));
  background: var(--mesh-zone-bg);
}
@media (max-width: 760px) {
  [data-design^="aktienampel"] .signal-grund-paar {
    grid-template-columns: minmax(0, 1fr);
  }
}
[data-design="aktienampel"] body.overview-collapsed .dashboard-overview {
  padding-bottom: calc(var(--space-3) + var(--space-8) + var(--space-2));
}
/* Der Arbeitsbereich ist seit F-84 transparent — der Mesh-Grund scheint hier ungefiltert durch.
   Über --mesh-workspace-bg (tokens.css) lässt sich der frühere Volltongrund zurückholen. */
[data-design="aktienampel"] .dashboard-workspace {
  padding-top: var(--space-20);
  background: var(--mesh-workspace-bg);
}

/* Strategie-Navigation: zusammenhängende Pill ausschließlich im neuen Aktienampel-Skin.
   Die einheitliche 6-px-Einfassung lässt den sehr hellen Braungrund um den dunkelbraunen aktiven
   Reiter sichtbar und hält auch benachbarte Reiter im exakt gleichen Abstand. */
[data-design="aktienampel"] .tab-nav {
  align-items: center;
  gap: var(--space-5);
  margin-top: calc(-1 * (var(--space-20) + var(--space-12)));
  box-shadow: none;
  position: relative;
  z-index: 10;
}
[data-design="aktienampel"] .ui-tabs--pill {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--nav-surface);
  scrollbar-width: none;
}
[data-design="aktienampel"] .ui-tabs--pill::-webkit-scrollbar {
  display: none;
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--nav-text);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab.ui-tab--notification-capable {
  padding-right: calc(var(--space-8) + var(--notification-size-sm) + var(--space-3));
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab::before,
[data-design="aktienampel"] .ui-tabs--pill .ui-tab::after {
  content: none;
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab:is(.is-active,.aktiv,[aria-selected="true"])::before,
[data-design="aktienampel"] .ui-tabs--pill .ui-tab:is(.is-active,.aktiv,[aria-selected="true"])::after {
  content: none;
  display: none;
  width: 0;
  height: 0;
  border: 0;
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab:hover {
  background: var(--nav-surface-hover);
  color: var(--nav-surface-hover-text);
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab.is-active,
[data-design="aktienampel"] .ui-tabs--pill .ui-tab.aktiv,
[data-design="aktienampel"] .ui-tabs--pill .ui-tab[aria-selected="true"] {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border: 0;
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab:is(.is-active,.aktiv,[aria-selected="true"]):hover {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}
[data-design="aktienampel"] .ui-tabs--pill .ui-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
[data-design="aktienampel"] .tab-drag-ghost {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  box-shadow: var(--shadow-floating);
  opacity: .96;
  transform: rotate(-1deg) scale(1.04);
}
[data-design="aktienampel"] .tab-drag-hint {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--nav-surface);
  color: var(--nav-text);
  box-shadow: var(--shadow-floating);
  backdrop-filter: none;
}
[data-design="aktienampel"] .tabnav-aktionen {
  gap: var(--space-4);
  padding-bottom: 0;
}
[data-design="aktienampel"] .ui-btn--nav {
  min-height: 48px;
  padding: 0 var(--space-9);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--nav-surface);
  color: var(--nav-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  box-shadow: none;
}
[data-design="aktienampel"] .ui-btn--nav:hover {
  background: var(--nav-action-hover);
  color: var(--nav-text);
  transform: none;
  box-shadow: none;
}
[data-design="aktienampel"] .ui-icon-btn--nav {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--nav-surface);
  color: var(--nav-text);
}
[data-design="aktienampel"] .ui-icon-btn--nav:hover {
  background: var(--nav-action-hover);
  color: var(--nav-text);
}
[data-design="aktienampel"] .overview-collapse-btn {
  position: relative;
}
/* Der Auf-/Zuklapp-Pfeil spiegelt den Zustand des Kopfbereichs: OFFEN = aktive Dunkelbraunfläche,
   ZUGEKLAPPT = heller Braungrund wie die übrigen Bedienflächen. */
[data-design="aktienampel"] .overview-collapse-btn[aria-expanded="true"] {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-design="aktienampel"] .overview-collapse-btn[aria-expanded="true"]:hover {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}
[data-design="aktienampel"] .overview-collapse-btn :is(.icon-up,.icon-down) {
  line-height: 0;
}
[data-design="aktienampel"] :is(.ui-btn--nav,.ui-icon-btn--nav)[aria-expanded="true"],
[data-design="aktienampel"] .btn-filter.is-active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border: 0;
}
[data-design="aktienampel"] .tab-nav.filter-offen .tabnav-werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 0;
}
[data-design="aktienampel"] .tab-nav.filter-offen .tabnav-aktionen {
  display: flex;
}
[data-design="aktienampel"] .tab-nav.filter-offen .tabnav-hinzufuegen {
  display: none;
}
[data-design="aktienampel"] .tab-nav.filter-offen .btn-filter,
[data-design="aktienampel"] .tab-nav.filter-offen .btn-filter.is-active {
  background: var(--nav-surface);
  color: var(--nav-text);
}
[data-design="aktienampel"] .tab-nav.filter-offen .btn-filter:hover {
  background: var(--nav-action-hover);
  color: var(--nav-action-hover-text);
}
[data-design="aktienampel"] .tab-nav.filter-offen .filter-badge {
  display: none;
}
[data-design="aktienampel"] .tabnav-filterinhalt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--nav-surface);
}
[data-design="aktienampel"] .tabnav-filterinhalt .filter-chips {
  order: 1;
  flex: 0 1 auto;
  justify-content: flex-end;
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-chip {
  border-color: transparent;
  background: var(--nav-surface-hover);
  color: var(--nav-text);
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-chip:hover {
  border-color: var(--nav-action-hover);
  background: var(--nav-action-hover);
  color: var(--nav-action-hover-text);
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-chip.is-active,
[data-design="aktienampel"] .tabnav-filterinhalt .ui-chip.is-active:hover {
  border-color: var(--nav-active-bg);
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search {
  order: 2;
  position: relative;
  flex: 0 1 240px;
  width: auto;
  min-width: 180px;
  max-width: 240px;
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input,
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input:focus,
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--nav-surface-hover-text);
  caret-color: var(--nav-surface-hover-text);
  padding-right: calc(var(--space-5) + 28px);
  box-shadow: none;
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input::placeholder {
  color: var(--nav-text);
  opacity: .72;
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input::-webkit-search-cancel-button {
  appearance: none;
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input::-ms-clear {
  display: none;
}
html:not([data-design="aktienampel"]) .filter-search-clear {
  display: none;
}
[data-design="aktienampel"] .tabnav-filterinhalt .filter-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nav-text);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}
[data-design="aktienampel"] .tabnav-filterinhalt .ui-search > input:not(:placeholder-shown) + .filter-search-clear {
  display: inline-flex;
}
[data-design="aktienampel"] .tabnav-filterinhalt .filter-search-clear:hover {
  background: var(--nav-surface-hover);
  color: var(--nav-text);
}
[data-design="aktienampel"] .tabnav-filterinhalt .filter-search-clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (max-width: 760px) {
  [data-design="aktienampel"] .tab-nav {
    align-items: stretch;
    gap: var(--space-4);
  }
  [data-design="aktienampel"] .tab-nav.is-stuck {
    padding: var(--space-4) var(--space-5);
    box-shadow: none;
  }
  [data-design="aktienampel"] .tab-nav.filter-offen .tabnav-werkzeuge {
    flex-wrap: nowrap;
    flex: 1 1 100%;
    width: 100%;
    order: 2;
  }
  [data-design="aktienampel"] .tab-nav.filter-offen .tabnav-aktionen {
    flex: 1 1 100%;
    width: 100%;
    order: 1;
    justify-content: flex-end;
    height: 48px;
  }
  [data-design="aktienampel"] .ui-tabs--pill .ui-tab {
    padding: 0 var(--space-8);
  }
  [data-design="aktienampel"] .ui-tabs--pill .ui-tab.ui-tab--notification-capable {
    padding-right: calc(var(--space-8) + var(--notification-size-sm) + var(--space-3));
  }
  [data-design="aktienampel"] .tabnav-filterinhalt {
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    padding: var(--space-4);
    border-radius: var(--radius-surface-outer);
  }
  [data-design="aktienampel"] .tabnav-filterinhalt .ui-search {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }
  [data-design="aktienampel"] .tabnav-filterinhalt .filter-chips {
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1 1 100%;
    width: 100%;
    gap: var(--space-3);
  }
  [data-design="aktienampel"] .tabnav-filterinhalt .ui-chip {
    justify-content: center;
    min-height: 32px;
    padding: var(--space-3) var(--space-4);
  }
}

/* C1 — Header-Boxen (Strategie-Gesundheit/Marktstimmung): Kachel-Look statt Ton-in-Ton.
   Fläche kommt bereits über --overview-panel-soft->panel aus dem Token-Block; hier Border weg,
   Halo-Schatten drauf, mehr Innenluft. Die Radius-Hierarchie folgt dem semantischen System unten. */
[data-design="aktienampel"] details.gesund-block,
[data-design="aktienampel"] details.ki-aggregat-block {
  border-color: transparent;
  box-shadow: var(--ampel-tile-shadow);
  padding: var(--space-9) var(--space-10);
  /* Kachel-Verhalten wie die KPI-Boxen (Nutzer-Wunsch 2026-07-10): zugeklappt transluzent
     (der getönte Grund scheint durch), bei Hover UND aufgeklappt voll deckend weiß. */
  background: var(--ampel-tile-bg);
  transition: background var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
[data-design="aktienampel"] details.gesund-block:hover,
[data-design="aktienampel"] details.ki-aggregat-block:hover,
[data-design="aktienampel"] details.gesund-block[open],
[data-design="aktienampel"] details.ki-aggregat-block[open] {
  background: var(--ampel-tile-bg-hover);
}
/* Box-Titel als echter Sektions-Kopf (16px/600) + deterministischer Fix des kalten
   Farblecks (Summary-Titel rendete mit Standard-Slate statt --txt). */
[data-design="aktienampel"] details.gesund-block > summary,
[data-design="aktienampel"] details.ki-aggregat-block > summary,
[data-design="aktienampel"] details.gesund-block > summary h2,
[data-design="aktienampel"] details.ki-aggregat-block > summary h2 {
  color: var(--txt);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}
[data-design="aktienampel"] details.gesund-block[open] > summary,
[data-design="aktienampel"] details.ki-aggregat-block[open] > summary {
  margin-bottom: var(--space-8);
}

/* C2 — KPI-Hierarchie: Label klein/ruhig in Versalien, Zahlen tabellarisch.
   Radius auf die Skin-Stufe (12px) heben — .kpi trägt sonst hartkodierte 10px (dashboard.css). */
[data-design="aktienampel"] .kpi,
[data-design="aktienampel"] .ui-kpi {
  border-radius: var(--radius-lg);
}
[data-design="aktienampel"] .kpi-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
[data-design="aktienampel"] .kpi-wert,
[data-design="aktienampel"] .m-wert {
  font-variant-numeric: tabular-nums;
}
[data-design="aktienampel"] .m-wert { font-size: 22px; }

/* C3 — Tabelle: tabellarische Ziffern; Zeilentrenner eine Stufe zarter
   (Linien treten zurück, Struktur kommt aus Fläche + Typo — SWS-Border-Politik). */
[data-design="aktienampel"] .tabelle-wrap td,
[data-design="aktienampel"] .tabelle-wrap th {
  font-variant-numeric: tabular-nums;
}
[data-design="aktienampel"] .tabelle-wrap td {
  border-bottom-color: var(--border-light);
}

/* Der zusätzliche Ticker steht strukturell in allen Profi-Tabellen, bleibt außerhalb der
   Redesign-Vorschau aber unsichtbar. So behält der Standard-Skin seine bisherige Namenszeile. */
.tabelle-wrap .aktie-ticker {
  display: none;
}
[data-design="aktienampel"] .tabelle-wrap .aktie-ident {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: middle;
}
[data-design="aktienampel"] .tabelle-wrap .aktie-ticker {
  display: block;
  color: var(--txt);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-tight);
}
[data-design="aktienampel"] .tabelle-wrap .aktie-name {
  display: block;
  color: var(--mut);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-tight);
}
[data-design="aktienampel"] .spalte-aktion :is(.btn-detail, .btn-kebab) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  vertical-align: middle;
}
[data-design="aktienampel"] .spalte-aktion .btn-detail-txt {
  display: none;
}
[data-design="aktienampel"] .spalte-aktion .btn-detail-icon.icon-open {
  display: inline-flex;
}
[data-design="aktienampel"] tr.zeile.is-open .spalte-aktion .btn-detail-icon.icon-open {
  display: none;
}
[data-design="aktienampel"] tr.zeile.is-open .spalte-aktion .btn-detail-icon.icon-close {
  display: inline-flex;
}

/* Iteration 2 (Nutzer-Feedback 2026-07-10) — KEINE Außenlinien mehr um Tabellen und ihre
   Strategie-/Archiv-Blöcke (wie Header-Boxen/KPIs): Trennung über Fläche + Halo statt Rahmen.
   Die inneren Zeilentrenner (td border-bottom) bleiben bewusst erhalten. Alle auf- und zuklappbaren
   Tabellenflächen nutzen in Ruhe dieselbe transluzente Fläche wie die KPI-Kacheln. */
[data-design="aktienampel"] details.haupt-block,
[data-design="aktienampel"] details.archiv-block,
[data-design="aktienampel"] details.aus-block {
  background: var(--ampel-tile-bg);
  border-color: transparent;
  box-shadow: var(--ampel-tile-shadow);
  border-radius: var(--radius-lg);
}
[data-design="aktienampel"] details.haupt-block > summary {
  background: transparent;
  border-radius: var(--radius-lg);
}
[data-design="aktienampel"] .tabelle-wrap {
  border-color: transparent;
}

/* KPI-Kacheln außerhalb der Kopfzone übernehmen deren Hintergrundfarbe und bleiben vollständig
   statisch: kein Schatten und kein Hover-Wechsel. */
/* KPI-Kacheln tragen im gesamten Dashboard dasselbe Glas — auch die im Arbeitsbereich, nicht nur
   die der Kopfzone (F-84). Die spezifischere Kopfzonen-Regel weiter unten setzt denselben Wert;
   sie bleibt nötig, weil `.dashboard-overview .kpi` aus dem gemeinsamen Ampel-Block sonst gewinnt. */
[data-design="aktienampel"] .kpi,
[data-design="aktienampel"] .ui-kpi {
  background: var(--mesh-kpi-bg);
  backdrop-filter: blur(var(--mesh-kpi-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--mesh-kpi-blur)) saturate(1.3);
  box-shadow: none;
}
[data-design="aktienampel"] .kpi:hover,
[data-design="aktienampel"] .ui-kpi:hover {
  background: var(--mesh-kpi-bg);
  box-shadow: none;
}
/* In der Kopfzone liegen die KPIs als Glasflächen auf dem Mesh-Grund (F-84): halbtransparent
   plus backdrop-filter, damit die Farbwolken darunter erkennbar bleiben, ohne die Zahlen zu
   stören. Die Tabellen-Aktionsspalte verwendet bewusst kein Glas, sondern setzt den deckenden
   Mesh-Grund pixelgleich fort (siehe unten); Datenzellen und einzelne Icons bleiben ohne Filter. */
[data-design="aktienampel"] .dashboard-overview .kpi,
[data-design="aktienampel"] .dashboard-overview .ui-kpi {
  background: var(--mesh-kpi-bg);
  backdrop-filter: blur(var(--mesh-kpi-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--mesh-kpi-blur)) saturate(1.3);
  box-shadow: none;
}
[data-design="aktienampel"] .dashboard-overview .kpi:hover,
[data-design="aktienampel"] .dashboard-overview .ui-kpi:hover {
  background: var(--mesh-kpi-bg);
  box-shadow: none;
}

/* Die Aufklapp-Panels der Kopfzone (Strategie-Gesundheit, Marktstimmung) liegen zugeklappt flach
   auf dem Mesh — der Schatten kommt erst zurück, wenn sie geöffnet sind oder gehovert werden.
   Zugeklappt sind sie nur eine Zeile; ein Schatten ließe sie dort grundlos abheben. */
[data-design="aktienampel"] details.ki-aggregat-block:not([open]) {
  box-shadow: none;
}
[data-design="aktienampel"] details.ki-aggregat-block:not([open]):hover {
  box-shadow: var(--ampel-tile-shadow);
}

/* Der Admin-Umschalter Default/Sepia im Footer entfällt im führenden Nutzerdesign — dieses Design
   führt seine eigene Hell/Dunkel-Achse, der Sepia-Vergleich gehört nicht hierher. */
[data-design="aktienampel"] .footer-theme-control {
  display: none;
}

/* Karten im Raster tragen dasselbe Glas wie die KPIs und liegen flach auf dem Mesh: kein Schatten
   im Ruhezustand — erst beim Hover hebt der Schatten die Karte ab (F-84, Nutzerwunsch). Der Wert
   von --ampel-tile-shadow bleibt unangetastet, er wird hier nur noch beim Hover eingesetzt. */
[data-design="aktienampel"] .ui-signal-card {
  background: var(--mesh-card-bg);
  backdrop-filter: blur(var(--mesh-kpi-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--mesh-kpi-blur)) saturate(1.3);
  box-shadow: none;
}
[data-design="aktienampel"] .ui-signal-card:not(.ui-signal-card--kachel):hover {
  background: var(--mesh-card-bg);
  box-shadow: var(--ampel-tile-shadow);
}

/* Bedienflächen im Kopf (Glocke, Profil, Kebab, Strategie-Pill) tragen dasselbe Glas wie die KPIs:
   Der Mesh scheint um die Icons herum durch, während der dunklere Grundton die Farbwirkung — und
   damit den Icon-Kontrast — hält. Nur die Fläche wird transparent, die Icons selbst bleiben voll
   deckend (kein `opacity` auf dem Element). */
/* Glocke und Profil gehören zum Kopf, nicht zur Strategie-Leiste: Sie behalten ihr helles
   Kontrastverhältnis und bekommen nur das Glas dazu — die dunkle Leisten-Farbe würde ihren
   Kontrast umkehren. Das Kebab der Strategie-Kopfzeile teilt denselben Look.
   Bewusst über `.strat-kopf` gescoped und NICHT über `.btn-kebab` allein: Von 55 Kebabs im
   Dokument sitzen 50 in Tabellenzeilen. Dort verdeckt die gemeinsame Sticky-Aktionszelle den
   darunterlaufenden Inhalt mit dem fest verankerten Mesh; die Kebabs brauchen keinen eigenen Filter. */
[data-design="aktienampel"] .ui-notif-btn,
[data-design="aktienampel"] .strat-kopf .btn-kebab,
[data-design="aktienampel"] .btn-profil {
  background: var(--mesh-headerbtn-bg);
  backdrop-filter: blur(var(--mesh-nav-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--mesh-nav-blur)) saturate(1.25);
}
/* Strategie-Leiste und alle Bedienflächen der Zeile teilen denselben transluzenten Braungrund.
   Blur und Sättigung lassen den Mesh-Grund wie bei den KPI-Glasflächen organisch durchscheinen.
   Der aktive Reiter setzt über --nav-active-bg den früheren dunklen Leistengrund gezielt ein. */
[data-design="aktienampel"] .ui-btn--nav,
[data-design="aktienampel"] .ui-icon-btn--nav,
[data-design="aktienampel"] .ui-tabs--pill {
  background: var(--nav-surface);
  backdrop-filter: blur(var(--mesh-nav-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--mesh-nav-blur)) saturate(1.25);
}
/* Hover nutzt eine kräftigere helle Braun-Stufe mit dunkler Schrift beziehungsweise dunklem Icon.
   Der Auf-/Zuklapp-Pfeil ist hier bewusst NICHT gelistet: Er führt seine eigene Zustands-Umkehr
   (offen = aktiv, zu = Grundfläche) und braucht daher einen zustandsabhängigen Hover — siehe oben. */
[data-design="aktienampel"] .ui-btn--nav:hover,
[data-design="aktienampel"] .ui-icon-btn--nav:not(.overview-collapse-btn):hover {
  background: var(--nav-action-hover);
  color: var(--nav-action-hover-text);
}
/* Zugeklappt verhält sich der Pfeil wie die übrigen Bedienflächen: Hover dunkelt die Pille ab. */
[data-design="aktienampel"] .overview-collapse-btn[aria-expanded="false"]:hover {
  background: var(--nav-action-hover);
  color: var(--nav-action-hover-text);
}

/* Überlauf-Pfeile liegen innerhalb der Strategie-Pill über den Reitern. Eine feste Maske lässt die
   einzige Farbfläche zur Listenmitte transparent auslaufen. Beim Hover wechselt nur deren Braunton;
   so bleibt die Fade-Geometrie identisch und keine zweite Ebene dunkelt oder verbreitert sie. */
[data-design="aktienampel"] .ui-tabs-scroll__button {
  top: 0;
  bottom: 0;
  width: calc(48px + var(--space-12));
  height: auto;
  border-radius: 0;
  color: var(--nav-text);
  font-size: 20px;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  background: transparent;
}
[data-design="aktienampel"] .ui-tabs-scroll__button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--nav-scroll-overlay);
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color var(--duration-slow) var(--ease-standard);
}
[data-design="aktienampel"] .ui-tabs-scroll__button > .ui-icon {
  position: relative;
  z-index: 1;
}
[data-design="aktienampel"] .ui-tabs-scroll__button--next {
  right: -1px;
  justify-content: flex-end;
  padding-right: var(--space-5);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  color: var(--nav-text);
}
[data-design="aktienampel"] .ui-tabs-scroll__button--next::before {
  -webkit-mask-image: linear-gradient(to right, transparent, black 55%, black);
  mask-image: linear-gradient(to right, transparent, black 55%, black);
}
[data-design="aktienampel"] .ui-icon-btn--nav.ui-tabs-scroll__button--next:hover {
  background: transparent;
  color: var(--nav-surface-hover-text);
}
[data-design="aktienampel"] .ui-tabs-scroll__button--previous {
  left: -1px;
  justify-content: flex-start;
  padding-left: var(--space-5);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  color: var(--nav-text);
}
[data-design="aktienampel"] .ui-tabs-scroll__button--previous::before {
  -webkit-mask-image: linear-gradient(to left, transparent, black 55%, black);
  mask-image: linear-gradient(to left, transparent, black 55%, black);
}
[data-design="aktienampel"] .ui-icon-btn--nav.ui-tabs-scroll__button--previous:hover {
  background: transparent;
  color: var(--nav-surface-hover-text);
}
[data-design="aktienampel"] .ui-tabs-scroll__button:hover::before {
  background-color: var(--nav-scroll-overlay-hover);
}
[data-design="aktienampel"] .ui-tabs-scroll__button:active {
  transform: none;
}

/* Bestätigter Flat-Table-Stand (Nutzer-Feedback 2026-07-13): Aktive Portfolio- und Watchlist-Blöcke
   werden flach und transparent; separate Archivtabellen behalten den Kachel-Look. Die sticky
   Details-Spalte muss darunterlaufende Zellen deckend verdecken, ohne als eigene Fläche sichtbar
   zu werden. Deshalb zeichnet sie denselben am Viewport fixierten Mesh-Grund wie `body::before`;
   ein eigener Glas-Ton oder dauerhaft sichtbarer Sticky-Schatten würde die Spaltengrenze erneut
   sichtbar machen. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap {
  /* Nicht scrollende Sicherheitskante: Die Bedienflächen enden mit etwas Luft innerhalb des Wrappers,
     statt bei schmalem Viewport direkt an dessen Overflow-Kante abgeschnitten zu werden. */
  border-right: var(--space-8) solid transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) {
  background: transparent;
  box-shadow: none;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"])[open] > summary {
  border-bottom-color: transparent;
}
/* Nur Beschriftung und Zähler schalten die Tabelle per Maus um. Die freie Kopfzeile bleibt inert;
   die separate Aktionsgruppe bleibt bedienbar und die native Tastatursteuerung des summary erhalten. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) > summary {
  pointer-events: none;
  cursor: default;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) > summary .haupt-sum-links,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) > summary .haupt-sum-actions {
  pointer-events: auto;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) > summary .haupt-sum-links {
  cursor: pointer;
}
/* Der leere Träger für das schwebende Hinzufügen-Formular bleibt im Fluss. Sein oberer Innenabstand
   bestimmt deshalb den sichtbaren Abstand zwischen Bereichskopf und Tabelle: 8 statt 16 px. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .add-block {
  padding-top: var(--space-4);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap th {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap th,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap td {
  border-bottom-color: var(--line);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap th.spalte-aktion,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap td.spalte-aktion {
  background-color: var(--mesh-base);
  background-image: var(--mesh-bg);
  background-size: var(--mesh-size);
  background-position: left top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Nur solange rechts noch Rest-Scroll vorhanden ist, markiert ein schmaler Schatten die Stelle,
   an der Tabelleninhalt unter der sticky Aktionsspalte verschwindet. Am rechten Scrollende und
   ohne horizontalen Overflow entfernt dashboard.js die Klasse wieder. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap.has-hidden-content th.spalte-aktion,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap.has-hidden-content td.spalte-aktion {
  box-shadow: -5px 0 9px -7px var(--shadow-strong);
}
/* Zeilen-Hover deckend weiß: Die Tabellenzeile selbst bleibt transparent, damit unter den vorab
   gerundeten Randzellen nie eine rechteckige Zwischenfläche durchscheint. */
[data-design="aktienampel"] tbody tr.zeile:hover {
  background: transparent;
}
[data-design="aktienampel"] tbody tr.zeile:hover > td:not(.spalte-aktion),
[data-design="aktienampel"] tbody tr.zeile:hover td.spalte-aktion {
  background-color: var(--ampel-tile-bg-hover);
}
/* Den 16-px-Innenabstand bereits im Ruhezustand reservieren, damit die angehobene Hover-Zeile
   weder ihre Höhe noch die Spaltenbreiten sprunghaft verändert. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td {
  padding: var(--space-8);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td:not(.spalte-aktion) {
  transition: background-color var(--duration-normal) ease, border-bottom-color var(--duration-normal) ease;
}
/* Eine geöffnete Zeile ist bereits Teil der weißen Detailfläche. Dort bleibt beim Hover nur
   der Checkbox-Trigger aktiv; Freistellung, Radius und Trenner-Ausblendung greifen nicht erneut. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open) {
  position: relative;
  transition: box-shadow var(--duration-normal) ease;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover {
  border-radius: calc((var(--radius-lg) * 2) - var(--space-4));
  box-shadow: var(--ampel-tile-shadow);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover > td:not(.spalte-aktion) {
  background-color: var(--ampel-tile-bg-hover);
  border-bottom-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover > td.spalte-aktion {
  border-bottom-color: transparent;
}
/* Oberen Trenner ebenfalls ausblenden: Bei geschlossener Detailzeile malt ihn die vorherige
   Datenzeile, bei geöffneter Detailzeile deren einzelne Zelle. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:has(+ tr.detail + tr.zeile:not(.is-open):hover) > td {
  border-bottom-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.detail:has(+ tr.zeile:not(.is-open):hover) > td {
  border-bottom-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:has(tbody > tr.zeile:first-child:not(.is-open):hover) thead th {
  border-bottom-color: transparent;
}
/* Die linke Hover-Rundung liegt auf einer bereits vorhandenen, unsichtbaren Fläche. So bleibt die
   normale Trennlinie vollständig gerade; beim Hover erscheint trotzdem nie ein eckiger Zwischenframe.
   Ohne Auswahl ist die Aktienzelle links außen, mit Auswahl die 28-px-Checkbox-Zelle. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open) > td:nth-child(2),
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open) > td.ms-checkbox-cell {
  position: relative;
  isolation: isolate;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open) > td:nth-child(2)::before,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open) > td.ms-checkbox-cell::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  z-index: 0;
  pointer-events: none;
  background: var(--ampel-tile-bg-hover);
  border-radius: calc((var(--radius-lg) * 2) - var(--space-4)) 0 0 calc((var(--radius-lg) * 2) - var(--space-4));
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open) > td:nth-child(2) > :not(.ms-hover-trigger),
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open) > td.ms-checkbox-cell > * {
  z-index: 1;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open) > td:nth-child(2) > :not(.ms-hover-trigger) {
  position: relative;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open):hover > td:nth-child(2),
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open):hover > td.ms-checkbox-cell {
  background-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open):hover > td:nth-child(2)::before,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open):hover > td.ms-checkbox-cell::before {
  opacity: 1;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td.spalte-aktion {
  border-radius: 0;
  isolation: isolate;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td.spalte-aktion::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  z-index: 0;
  pointer-events: none;
  background: var(--ampel-tile-bg-hover);
  border-radius: 0 calc((var(--radius-lg) * 2) - var(--space-4)) calc((var(--radius-lg) * 2) - var(--space-4)) 0;
  box-shadow: var(--ampel-tile-shadow);
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover > td.spalte-aktion::before {
  opacity: 1;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td.spalte-aktion > * {
  position: relative;
  z-index: 1;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .ms-hover-trigger {
  background: linear-gradient(to right, var(--ampel-tile-bg-hover) 55%, transparent);
  border-radius: calc((var(--radius-lg) * 2) - var(--space-4)) 0 0 calc((var(--radius-lg) * 2) - var(--space-4));
}
/* Geöffnete Aktie und Detailfläche sind eine deckende Einheit; die explizite Aktionszelle
   hält dabei auch hinter Schließen-Button und Kebab die gleiche Fläche. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.is-open > td:not(.spalte-aktion) {
  background-color: var(--ampel-tile-bg-hover);
  border-bottom-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.is-open > td.spalte-aktion {
  border-bottom-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.is-open > td.spalte-aktion::before {
  opacity: 1;
  border-radius: 0;
  box-shadow: none;
}
/* Die allgemeine Mehrfachauswahl gibt der sticky Aktionszelle eine eigene deckende Fläche. Im
   Aktienampel-Skin liegen stattdessen alle Auswahlflächen als identischer Tint über dem Mesh:
   normale Zellen direkt, die überlagernde Aktionszelle über ihre vorhandene Overlay-Schicht. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected {
  background: transparent !important;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected > td:not(.spalte-aktion) {
  background-color: var(--selected-bg);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected:hover > td:not(.spalte-aktion) {
  background-color: var(--ampel-tile-bg-hover);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile.ms-selected:not(.is-open):hover > td.ms-checkbox-cell {
  background-color: transparent;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile.ms-selected:not(.is-open):hover > td.ms-checkbox-cell::before {
  background: var(--ampel-tile-bg-hover);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected > td.spalte-aktion {
  background-color: var(--mesh-base) !important;
  background-image: var(--mesh-bg) !important;
  background-size: var(--mesh-size) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected > td.spalte-aktion::before {
  background: var(--selected-bg);
  opacity: 1;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected:not(:hover) > td.spalte-aktion::before {
  border-radius: 0;
  box-shadow: none;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile.ms-selected:hover > td.spalte-aktion::before {
  background: var(--ampel-tile-bg-hover);
  border-radius: 0 calc((var(--radius-surface-outer) * 2) - var(--space-4)) calc((var(--radius-surface-outer) * 2) - var(--space-4)) 0;
  box-shadow: var(--ampel-tile-shadow);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.detail > td,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.detail .detail-content-wrap {
  background: var(--ampel-tile-bg-hover);
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.detail .detail-content-wrap {
  width: 100%;
  border-right: 0;
}
@media (max-width: 600px) {
  [data-design^="aktienampel"] .detail-content-wrap {
    max-width: 100vw;
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .tabelle-wrap {
    border-right: 0;
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile {
    border-radius: 0;
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover {
    border-radius: 0;
    box-shadow: none;
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open) > td:nth-child(2)::before,
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open) > td.ms-checkbox-cell::before,
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td.spalte-aktion::before,
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .ms-hover-trigger {
    border-radius: 0;
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover > td {
    border-bottom-color: var(--line);
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.detail .detail-content-wrap {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ===== Iteration 4 (Varianten-Erprobung 2026-07-10) ===== */
/* (a) Handschrift-Zweitschrift NUR fuer die STRATEGIE-Headline (der Aktienstrategie-Name unter dem
   Menue). NICHT fuer die Toggle-Boxen (Portfolio/Watchlist, Strategie-Gesundheit, Marktstimmung),
   nicht fuer "alle Strategien", nicht fuer den Seitentitel -> die bleiben in der Standard-Schrift
   (Nutzer-Feedback 2026-07-10: fuer Toggleboxen generell die Vollschrift). Zusaetzlich groesser,
   damit es wie eine echte Headline wirkt. */
[data-design="aktienampel"] .strat-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  font-size: 34px;   /* +~30% ggue. 26px (Nutzer-Wunsch 2026-07-10): echte, prominente Headline */
  line-height: 1.12;
  -webkit-text-stroke: 0.35px currentColor;
  paint-order: stroke fill;
}

/* (b) Violette Zähler-Badges: das Glocken-Badge zieht --notification-bg bereits aus dem Token
   (im Mock auf Violett gesetzt) — keine Extraregel nötig. */

/* Iteration 7 (Aktien-Detailansicht, Nutzer-Feedback 2026-07-10) */
/* Detail-KPI-Kacheln (.metrik) randlos: Border weg. KEIN Schatten (Nutzer-Wunsch 2026-07-10):
   flache Kachel, allein ueber die Flaechenfarbe abgesetzt. */
[data-design="aktienampel"] .metrik {
  border-color: transparent;
  box-shadow: none;
}
[data-design="aktienampel"] .metrik:hover {
  border-color: transparent;
}
/* Aktienchart: brauner Flaechen-Hintergrund raus -> der (weisse) Detail-Grund scheint durch. */
[data-design="aktienampel"] .chart-plot-wrap {
  background: transparent;
}

/* Handschrift (Handlee) auf der Aktienampel-Wortmarke im Header. Handlee hat nur einen echten
   400er-Schnitt. Deshalb staffeln dünne Außenkonturen die gewünschte Stärke: Die Strategie-
   Headline erhält 0,35 px, das Logo bleibt mit 0,55 px sichtbar kräftiger. `paint-order: stroke
   fill` malt den Fill über den Stroke, damit die Punzen offen bleiben. Der Fill ist solide, weil
   der h1-Gradient-Clip für die Marke aufgehoben wird. */
[data-design="aktienampel"] .marke-name--ampel {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .01em;
  font-size: 1.23em;
  -webkit-text-fill-color: var(--txt);
  -webkit-text-stroke: 0.55px var(--txt);
  paint-order: stroke fill;
}

/* Iteration 9 (Nutzer-Feedback 2026-07-10): Aufklapp-Buttons „flach, Hover hebt ab". */
/* (1) Oberer Kopfbereich-Collapse-Button: gleiche Farbe wie die Header-Zone (verschmilzt,
   nur das Chevron ist sichtbar), KEIN Schatten -> erst bei Hover hebt ihn ein Schatten ab.
   Kein Farbwechsel bei Hover (nur der Schatten kommt). */
[data-design="aktienampel"] .ui-collapse-btn {
  background: var(--overview-bg);
  box-shadow: none;
}
[data-design="aktienampel"] .ui-collapse-btn:hover {
  background: var(--overview-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* (2) Die Toggle-Boxen nutzen wie Portfolio und Watchlist ausschließlich den zentralen
   Solar-Disclosure-Pfeil aus `ui_disclosure_icon`; kein zusätzlicher CSS-Pfeil. */

/* (3) Meta-Zeile (Teaser „ruhig | Trend | …", Info-Icon, Herkunfts-/Typ-Badge wie „Eigenbau")
   auf die GRUNDLINIE der Strategie-Headline setzen. Basis ist align-items:center -> bei der
   nun 34px grossen Handschrift-Headline schwebt die kleine Meta-Zeile vertikal mittig (zu hoch);
   baseline setzt ihren Text auf die Schrift-Grundlinie der Headline. Nur Desktop relevant — auf
   Mobile ist .strat-titel-gruppe display:contents und die Meta-Zeile ohnehin umgebrochen. */
[data-design="aktienampel"] .strat-titel-gruppe {
  align-items: baseline;
}

/* Iteration 11 (Nutzer-Feedback 2026-07-10): Der per JS erzeugte Einklapp-Button unten in den
   Gesundheit-/Marktstimmung-Boxen (.ui-collapse-btn im .overview-toggle-wrapper) trägt einen
   INLINE-Style `background: linear-gradient(var(--overview-line), …) var(--overview-panel-soft)` —
   der --overview-line-Tint (15% Dunkelbraun) über Weiß lässt ihn grau/beige wirken. Inline-Style
   schlägt jede normale CSS-Regel -> daher !important, um ihn auf reines Weiß zu ziehen. Kein
   Schatten in Ruhe -> Hover-Schatten (wie die übrigen Aufklapp-Buttons im Skin). */
[data-design="aktienampel"] details.gesund-block .ui-collapse-btn,
[data-design="aktienampel"] details.ki-aggregat-block .ui-collapse-btn {
  background: var(--panel) !important;
  box-shadow: none;
}
[data-design="aktienampel"] details.gesund-block .ui-collapse-btn:hover,
[data-design="aktienampel"] details.ki-aggregat-block .ui-collapse-btn:hover {
  background: var(--panel) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* Iteration 12 (Nutzer-Feedback 2026-07-10): Aufgeklappte Marktstimmung — die Inhalts-Blöcke
   (Deine Titel, Top-Themen, Details nach Titel · Katalysatoren & Risiken) sollen die VOLLE Breite
   nutzen. Sie flossen bisher links neben dem rechts-schwebenden Fear-&-Greed-Tacho
   (`.tacho-container { float:right; width:373px }`, dashboard.css @media ≥761px) -> nur ~halbe
   Breite. Den Tacho aus dem Float lösen -> eigener Block oben (zentriert); die `.ki-agg-grp` nehmen
   darunter automatisch die volle Breite (`.marktstimmung-grid` ist display:block). */
[data-design="aktienampel"] .marktstimmung-grid .tacho-container {
  float: none;
  margin: 0 auto var(--space-8);
}
[data-design="aktienampel"] .strat-meta .kpi-zaehler--inline {
  display: inline-flex;
  flex-wrap: nowrap;
  margin: 0 0 0 var(--space-4);
}
[data-design="aktienampel"] .strat-meta .kpi-zaehler--inline > span {
  white-space: nowrap;
}

/* Radius-Abstufungs-System (Prüfauftrag #19): Eigenständig begrenzte Flächen werden mit jeder
   Verschachtelung kleiner. Der bisherige Skin-Override von --radius-lg entfällt, damit Controls
   und Hinweise nicht pauschal denselben 12px-Radius wie ihre äußere Box erhalten. */
[data-design="aktienampel"] details.gesund-block,
[data-design="aktienampel"] details.ki-aggregat-block {
  border-radius: var(--radius-surface-outer);
}
[data-design="aktienampel"] details.gesund-block :is(.ui-card, .ui-ticker-card) {
  border-radius: var(--radius-surface-inner);
}
[data-design="aktienampel"] details.gesund-block :is(.ui-card, .ui-ticker-card) .ui-alert {
  border-radius: var(--radius-surface-deep);
}
[data-design="aktienampel"] :is(.kpi, .ui-kpi),
[data-design="aktienampel"] :is(details.haupt-block, details.archiv-block, details.aus-block),
[data-design="aktienampel"] details.haupt-block > summary {
  border-radius: var(--radius-surface-outer);
}

/* Die angehobene Tabellenzeile ist eine bestätigte Interaktionsform, keine Nesting-Ebene:
   (12px × 2) − 8px = 16px bleiben einschließlich beider Randzellen unverändert. */
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open):hover {
  border-radius: calc((var(--radius-surface-outer) * 2) - var(--space-4));
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table:not(.ms-active) tbody tr.zeile:not(.is-open) > td:nth-child(2)::before,
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) table.ms-active tbody tr.zeile:not(.is-open) > td.ms-checkbox-cell::before {
  border-radius: calc((var(--radius-surface-outer) * 2) - var(--space-4)) 0 0 calc((var(--radius-surface-outer) * 2) - var(--space-4));
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open) > td.spalte-aktion::before {
  border-radius: 0 calc((var(--radius-surface-outer) * 2) - var(--space-4)) calc((var(--radius-surface-outer) * 2) - var(--space-4)) 0;
}
[data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .ms-hover-trigger {
  border-radius: calc((var(--radius-surface-outer) * 2) - var(--space-4)) 0 0 calc((var(--radius-surface-outer) * 2) - var(--space-4));
}

/* Mobil bleibt die Tabellenzeile eine bündige Vollbreitenfläche. Diese Regel steht bewusst nach
   dem Radius-System, damit ein auf Touch-Geräten haftender Hover-Zustand keine Rundungen erneut
   auf die ausgewählte beziehungsweise aufgeklappte Zeile legt. */
@media (max-width: 600px) {
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile,
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td,
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile > td.spalte-aktion::before,
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) .ms-hover-trigger {
    border-radius: 0;
  }
  [data-design="aktienampel"] details.haupt-block:is([id$="-portfolio"], [id$="-watchlist"]) tbody tr.zeile:not(.is-open) {
    border-radius: 0;
    box-shadow: none;
  }
}