/* DATEI: signalkompass/dashboard/static/css/components.css
   BESCHREIBUNG:
     Zentrale, token-basierte UI-Komponenten-Klassen (Design-System B-6, Phase 3).
     Genutzt von den `_components.html`-Makros + der /styleguide-Seite; die Templates
     werden schrittweise auf diese Klassen migriert. Ausschliesslich Tokens (keine
     hartkodierten Farben) -> voll theme-/skin-faehig. */

/* ============ Custom-Scrollbar (themenbasiert, kein System-Look) ============ */
/* Auf scrollbare Komponenten (Textarea, Listen, size-Select) anwenden via .ui-scroll. */
.ui-scroll{scrollbar-width:thin;scrollbar-color:var(--slate-line) transparent;}
.ui-scroll::-webkit-scrollbar{width:10px;height:10px;}
.ui-scroll::-webkit-scrollbar-track{background:transparent;}
.ui-scroll::-webkit-scrollbar-thumb{background:var(--slate-line);border-radius:10px;border:2px solid transparent;background-clip:content-box;}
.ui-scroll::-webkit-scrollbar-thumb:hover{background:var(--mut);}

/* ============ Foundation-/Layout-Primitive ============ */
.ui-page-shell{min-height:100vh;background:var(--bg);color:var(--txt);font-family:var(--font-sans);
  font-size:var(--font-size-md);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;
  padding:var(--space-16) var(--space-8);}
.ui-page-shell--center{align-items:center;}
.ui-page-shell--auth{align-items:center;background:var(--auth-page-bg);}
.ui-page-stack{width:460px;max-width:100%;}
.ui-page-stack--sm{width:360px;}
.ui-page-stack--md{width:460px;}
.ui-page-stack--lg{width:600px;}
.ui-page-stack--dashboard{width:min(1350px,100%);}
.ui-page-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);letter-spacing:-0.01em;margin:var(--space-5) 0 var(--space-1);
  background:linear-gradient(90deg,var(--white),var(--mut));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ui-page-subtitle{color:var(--mut);font-size:13px;margin:0 0 var(--space-9);line-height:var(--line-normal);}
.ui-panel-title{font-size:var(--font-size-lg);margin:0 0 var(--space-2);font-weight:var(--font-weight-semibold);}
.ui-copy{color:var(--mut);font-size:12px;line-height:var(--line-normal);margin:0 0 var(--space-4);}
.ui-copy--success{color:var(--status-kaufen);}
.ui-copy--warn{color:var(--status-warnung);}
.ui-copy--spaced{margin-top:var(--space-5);}
.ui-link{color:var(--accent);text-decoration:none;font-weight:var(--font-weight-medium);}
.ui-link:hover{color:var(--txt);text-decoration:underline;}
.ui-link--muted{color:var(--mut);font-weight:var(--font-weight-regular);}
.ui-legal-body{margin:0;min-height:100vh;background:var(--bg);color:var(--txt);font-family:var(--font-sans);
  font-size:var(--font-size-md);line-height:var(--line-normal);-webkit-font-smoothing:antialiased;}
.ui-legal-shell{width:min(920px,calc(100vw - 32px));margin:0 auto;padding:var(--space-16) 0;}
.ui-legal-top{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-8);
  color:var(--mut);font-size:var(--font-size-sm);}
.ui-legal-top a{color:var(--mut);text-decoration:none;font-weight:var(--font-weight-medium);}
.ui-legal-top a:hover,.ui-legal-top a[aria-current="page"]{color:var(--txt);text-decoration:underline;}
.ui-legal-card{padding:var(--space-14);}
.ui-legal-doc{line-height:1.58;}
.ui-legal-doc h1{font-size:var(--font-size-2xl);line-height:var(--line-tight);margin:0 0 var(--space-8);
  font-weight:var(--font-weight-bold);letter-spacing:0;background:linear-gradient(90deg,var(--white),var(--mut));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ui-legal-doc h2{font-size:var(--font-size-lg);line-height:var(--line-tight);margin:var(--space-10) 0 var(--space-4);
  font-weight:var(--font-weight-semibold);letter-spacing:0;color:var(--txt);}
.ui-legal-doc h3{font-size:var(--font-size-md);margin:var(--space-8) 0 var(--space-3);font-weight:var(--font-weight-semibold);}
.ui-legal-doc p{margin:var(--space-4) 0;color:var(--txt);}
.ui-legal-doc ul,.ui-legal-doc ol{margin:var(--space-4) 0;padding-left:var(--space-10);}
.ui-legal-doc li{margin:var(--space-2) 0;}
.ui-legal-doc blockquote{margin:var(--space-5) 0;padding:var(--space-5) var(--space-6);
  border-left:3px solid var(--line);background:var(--block-alt-bg);border-radius:0 var(--radius-lg) var(--radius-lg) 0;}
.ui-legal-doc a{color:var(--accent);}
.ui-legal-doc code{background:var(--bg-darker);padding:1px var(--space-2);border-radius:var(--radius-sm);font-size:.92em;}
.ui-legal-doc table{border-collapse:collapse;width:100%;margin:var(--space-5) 0;font-size:var(--font-size-sm);table-layout:fixed;}
.ui-legal-doc th,.ui-legal-doc td{border:1px solid var(--line);padding:var(--space-4) var(--space-5);
  text-align:left;vertical-align:top;white-space:normal;overflow-wrap:break-word;}
.ui-legal-doc th{background:var(--block-alt-bg);font-weight:var(--font-weight-semibold);}
.ui-legal-modal{max-width:min(900px,calc(100vw - 32px));}
.ui-legal-modal__body{max-height:calc(100vh - 190px);overflow:auto;overscroll-behavior:contain;}
.ui-legal-modal .ui-legal-doc h1{font-size:var(--font-size-xl);margin-bottom:var(--space-6);}
.ui-back-link{color:var(--mut);text-decoration:none;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);
  display:inline-flex;align-items:center;gap:var(--space-2);}
.ui-back-link:hover{color:var(--txt);}
.ui-back-link__arrow{font-size:18px;line-height:1;}

.ui-auth-card{width:360px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-2xl);padding:var(--space-14);box-shadow:var(--shadow-auth);position:relative;overflow:hidden;}
.ui-auth-card--login{width:340px;border:0;padding:var(--space-15) var(--space-14) var(--space-12);}
.ui-auth-card--wide{width:360px;padding:var(--space-15) var(--space-14) var(--space-12);}
.ui-auth-card--center{text-align:center;}
.ui-auth-brand{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-2);}
.ui-auth-brand img{width:30px;height:30px;flex:0 0 auto;}
.ui-auth-brand img{filter:var(--logo-filter);}
.ui-auth-title{font-size:var(--font-size-2xl);margin:0;font-weight:var(--font-weight-bold);letter-spacing:-0.01em;
  background:linear-gradient(90deg,var(--white),var(--mut));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.ui-auth-sub{color:var(--mut);font-size:13px;margin:var(--space-1) 0 var(--space-9);line-height:var(--line-normal);}
.ui-auth-footer{margin-top:var(--space-9);text-align:center;color:var(--field-placeholder);font-size:var(--font-size-xs);line-height:1.5;}
.ui-auth-linkline{margin:var(--space-8) 0 0;text-align:center;}
.ui-auth-linkline--tight{margin-top:var(--space-5);}
.ui-auth-message{margin-top:var(--space-8);}
.ui-auth-submit{margin-top:var(--space-11);}
.ui-auth-secondary-form{margin-top:var(--space-4);}

.ui-form-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--space-10) var(--space-11);margin-bottom:var(--space-9);}
.ui-form-panel--compact{padding:var(--space-8) var(--space-11);}
.ui-form-panel--pull{margin-top:calc(var(--space-2) * -1);}
.ui-inline-form{display:flex;gap:var(--space-4);align-items:flex-end;flex-wrap:wrap;}
.ui-inline-form__grow{flex:1;min-width:150px;}
.ui-form-actions{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin-top:var(--space-8);}
.ui-form-actions--end{justify-content:flex-end;}
.ui-setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);}
.ui-setting-row__text{min-width:0;}
.ui-setting-row__text p{margin:var(--space-3) 0 0;color:var(--mut);font-size:var(--font-size-sm);line-height:var(--line-normal);}
.ui-setting-row .ui-switch{margin:0;}
.ui-setting-row .ui-switch > input{width:auto;padding:0;border:0;}
.ui-setting-row .ui-btn{margin-top:0;flex:0 0 auto;}
.ui-setting-status{margin:var(--space-6) 0 0;color:var(--mut);font-size:var(--font-size-sm);}
.ui-setting-status strong{color:var(--txt);}
@media (max-width:560px){
  .ui-setting-row{align-items:flex-start;flex-direction:column;}
}

.ui-simple-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.ui-simple-table th,.ui-simple-table td{text-align:left;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line);vertical-align:middle;}
.ui-simple-table tbody tr:last-child td{border-bottom:0;}
.ui-simple-table th{color:var(--mut);font-weight:var(--font-weight-semibold);}
.ui-simple-table td.r,.ui-simple-table th.r{text-align:right;}
.ui-simple-table__actions{display:inline-flex;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;}
.ui-beta-section-title{margin:var(--space-8) 0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--mut);text-transform:uppercase;letter-spacing:.06em;}
.ui-beta-table{table-layout:fixed;margin-top:0;}
.ui-beta-table__name{width:38%;}
.ui-beta-table__value{width:22%;}
.ui-beta-table__stand{width:20%;}
.ui-beta-table__limit{width:20%;}
.ui-beta-table__setting{width:31%;}
.ui-beta-table__input{width:18%;}
.ui-beta-table__meaning{width:51%;}
.ui-beta-table__metric{width:30%;}
.ui-beta-table__current{width:14%;}
.ui-beta-table__cap{width:18%;}
.ui-beta-table__source{width:20%;}
.ui-beta-table__purpose{width:28%;}
.ui-beta-table__rule{width:20%;}
.ui-beta-table--usage .ui-beta-table__meaning{width:38%;}
.ui-beta-table th,.ui-beta-table td{white-space:normal;overflow-wrap:break-word;}
.ui-beta-table .ui-field{max-width:150px;padding:var(--space-3) var(--space-4);font-size:13px;}
.ui-beta-table .num{font-variant-numeric:tabular-nums;}
.ui-beta-over{color:var(--status-warnung);font-weight:var(--font-weight-semibold);}
@media (max-width:720px){
  .ui-beta-table{min-width:760px;}
  .ui-beta-panel{overflow-x:auto;}
}
.ui-role-badge{font-weight:var(--font-weight-semibold);}
.ui-role-badge--admin{color:var(--status-kaufen);}
.ui-role-badge--system{color:var(--accent);}
.ui-muted-note{color:var(--mut);font-size:11px;}
.ui-disclosure{margin-top:var(--space-3);border-top:1px solid var(--line);}
.ui-disclosure > summary{list-style:none;cursor:pointer;color:var(--mut);font-size:13px;font-weight:var(--font-weight-semibold);
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-1) var(--space-2);user-select:none;}
.ui-disclosure > summary::-webkit-details-marker{display:none;}
.ui-disclosure__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--mut);flex:none;
  transition:transform var(--duration-normal) ease;}
.ui-disclosure__icon .ui-icon{width:14px;height:14px;}
details[open] > summary > .ui-disclosure__icon{transform:rotate(90deg);}
.ui-disclosure > summary:hover{color:var(--txt);}
.ui-disclosure td{color:var(--mut);}

/* Typografie-Stile fuer Produkt-UI und Styleguide. */
.ui-type-display{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-tight);letter-spacing:0;}
.ui-type-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--line-tight);letter-spacing:0;}
.ui-type-section{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-tight);letter-spacing:0;}
.ui-type-body{font-size:var(--font-size-md);font-weight:var(--font-weight-regular);line-height:var(--line-normal);letter-spacing:0;}
.ui-type-caption{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--line-normal);letter-spacing:0;}
.ui-type-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-tight);letter-spacing:0;}

/* Breiter Bereichskopf für fokussierte Research-/Kandidatenansichten (F-81). */
.ui-feature-header{position:relative;overflow:hidden;border:1px solid var(--feature-header-border);
  border-radius:var(--radius-surface-outer);background:var(--feature-header-bg);padding:var(--space-14);
  box-shadow:inset 0 3px 0 var(--feature-header-accent);}
.ui-feature-header__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-10);}
.ui-feature-header__info{flex:0 0 auto;}
.ui-feature-header__eyebrow{display:block;margin-bottom:var(--space-3);color:var(--mut);font-size:var(--font-size-xs);
  font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;}
.ui-feature-header__title-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5);}
.ui-feature-header__title{margin:0;font-size:clamp(var(--font-size-2xl),4vw,34px);line-height:var(--line-tight);}
.ui-feature-header__count{color:var(--mut);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);}
.ui-feature-header__description{max-width:720px;margin:var(--space-5) 0 0;color:var(--mut);font-size:var(--font-size-md);line-height:var(--line-relaxed);}
.ui-feature-header__controls{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  gap:var(--space-8);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--feature-header-border);}
@media(max-width:640px){
  .ui-feature-header{padding:var(--space-10);}
  .ui-feature-header__controls{align-items:stretch;}
}

/* ============ Button ============ */
/* padding/line-height an die Produktions-.btn-haupt kalibriert (B-6 Phase 3b, Chromium-mess-verifiziert):
   padding 10px + line-height:normal (Inter) = 37px; mit padding 11/line-height:1 waere der Button 1px niedriger. */
.ui-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:inherit;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:normal;cursor:pointer;
  border:0;border-radius:var(--radius-pill);padding:var(--space-5) var(--space-9);text-decoration:none;white-space:nowrap;
  transition:all .2s var(--ease-standard);}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;}
/* Das hidden-Attribut MUSS einen .ui-btn verstecken. Die .ui-btn-Regel oben (display:inline-flex) hat
   dieselbe Spezifitaet wie das UA-[hidden]{display:none} und gewinnt sonst -> hidden bliebe wirkungslos
   (Import-Modal-Schritt-Toggle: Zurueck/Importieren tauchten faelschlich schon in Schritt 1 auf).
   !important sticht auch spezifischere ".kontext .ui-btn"-Regeln. */
.ui-btn[hidden]{display:none !important;}
/* Primaer: Akzent-Verlauf, Schrift in beiden Modi hell (--on-accent) */
.ui-btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  color:var(--on-accent);box-shadow:var(--shadow-accent);}
.ui-btn--primary:hover{background:linear-gradient(135deg,var(--accent-hell),var(--accent));
  transform:translateY(-1px);box-shadow:var(--shadow-accent-hover);}
.ui-btn--gold{background:var(--btn-gold-bg);color:var(--btn-gold-txt);box-shadow:var(--shadow-card);}
.ui-btn--gold:hover{background:var(--btn-gold-hover);transform:translateY(-1px);box-shadow:var(--shadow-card);}
.ui-btn--primary:active{transform:translateY(1px);}
/* Sekundaer: transparent + Rahmen */
.ui-btn--secondary{background:transparent;color:var(--mut);border:1px solid var(--line);}
.ui-btn--secondary:hover{background:var(--line);color:var(--txt);}
/* Werkzeug/Tertiaer: gefuellt neutral */
.ui-btn--tool{background:var(--btn-bg);color:var(--btn-txt);}
.ui-btn--tool:hover{background:var(--btn-bg-hover);}
/* Grau: gefuellte Sekundaer-Aktion (Schrift hell) */
.ui-btn--grau{background:var(--btn-grau-bg);color:var(--on-accent);}
/* Gefahr */
.ui-btn--danger{background:var(--chart-neg);color:var(--on-accent);}
.ui-btn--danger:hover{background:var(--gefahr-hover-bg);}
/* Erfolg / Reaktivieren */
.ui-btn--success{background:var(--reakt-bg);color:var(--reakt-txt);border:1px solid var(--reakt-border);}
.ui-btn--success:hover{background:var(--reakt-bg-hover);}
/* Outline: gefuellte Flaeche (--bg-lighter) + Rahmen — fuer Add-/„Neue"-Aktionen (B-6 Phase 3b Tier 2, an .btn-add angelehnt). */
.ui-btn--outline{background:var(--bg-lighter);color:var(--txt);border:1px solid var(--line);}
.ui-btn--outline:hover{background:var(--slate-hover);border-color:var(--slate-line);transform:translateY(-1px);}
.ui-btn--outline:active{transform:translateY(0);}
/* Navigationsaktion: Basis entspricht dem bisherigen kompakten Primär-Button. Der neue
   Aktienampel-Skin formt dieselbe Variante in aktienampel.css zur ruhigen Pille um. */
.ui-btn--nav{min-height:30px;padding:7px var(--space-6);border:0;border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--on-accent);
  font-size:13px;font-weight:var(--font-weight-semibold);box-shadow:var(--shadow-accent);}
.ui-btn--nav:hover{background:linear-gradient(135deg,var(--accent-hell),var(--accent));color:var(--on-accent);
  transform:translateY(-1px);box-shadow:var(--shadow-accent-hover);}
.ui-btn--nav:active{transform:translateY(1px);}
.ui-btn--nav:focus-visible{outline:none;box-shadow:var(--focus-ring);}
/* Groessen-/Layout-Modifier */
/* Klein: einheitliche Dashboard-Kleinbutton-Groesse (B-6 Phase 3b Tier 2); weight 500, Primaer bleibt 600. */
.ui-btn--sm{padding:7px var(--space-6);font-size:13px;border-radius:var(--radius-pill);font-weight:var(--font-weight-medium);}
.ui-btn--primary.ui-btn--sm{font-weight:var(--font-weight-semibold);}
/* Rahmen-Ausgleich: umrandete Klein-Varianten 1px weniger vertikales Padding -> gleiche Hoehe wie randlose Tool/Primary-sm. */
.ui-btn--secondary.ui-btn--sm,.ui-btn--outline.ui-btn--sm{padding-top:var(--space-3);padding-bottom:var(--space-3);}
.ui-btn--block{width:100%;}
.ui-btn--auth{padding:var(--space-6);font-size:var(--font-size-lg);letter-spacing:.01em;}

/* ============ Icon-Button ============ */
.ui-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--btn-bg);color:var(--btn-txt);font-family:inherit;font-size:16px;line-height:1;
  cursor:pointer;text-decoration:none;transition:background var(--duration-normal) ease,color var(--duration-normal) ease,border-color var(--duration-normal) ease;}
.ui-icon-btn:hover{background:var(--btn-bg-hover);color:var(--txt);}
.ui-icon-btn--sm{width:28px;height:28px;font-size:13px;border-radius:var(--radius-md);}
.ui-icon-btn--round{border-radius:50%;}
.ui-icon-btn--nav{width:30px;height:30px;border:0;border-radius:var(--radius-sm);background:var(--btn-bg);
  color:var(--btn-txt);font-size:18px;}
.ui-icon-btn--nav:hover{background:var(--btn-bg-hover);color:var(--txt);}
.ui-icon-btn--nav:active{transform:translateY(1px);}
.ui-icon-btn--nav:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.ui-icon-btn--danger{background:var(--gflag-verkaufen-bg);color:var(--status-verkaufen);border-color:var(--fehler-border);}
.ui-icon-btn--danger:hover{background:var(--gefahr-hover-bg);color:var(--on-accent);}
.ui-icon-btn--close{width:30px;height:30px;border:0;background:transparent;color:var(--mut);font-size:20px;}
.ui-icon-btn--close:hover{background:var(--btn-bg-hover);color:var(--txt);}
/* Hell-/Dunkel-Umschalter (Makro ui_theme_toggle): traegt beide Icons, sichtbar ist der AKTUELLE
   Modus laut data-theme-modus. Erbt Geometrie/Fokus von .ui-icon-btn, tritt aber bewusst nackt auf
   (ohne Rahmen und Flaeche) — so ist er auf den ersten Blick von umrandeten Icon-Buttons wie dem
   Burger zu unterscheiden. Rueckmeldung beim Hover kommt allein ueber die Icon-Farbe. */
.ui-icon-btn--theme{border:0;background:transparent;color:var(--mut);}
.ui-icon-btn--theme:hover{background:transparent;color:var(--txt);}
.ui-icon-btn--theme > span{display:inline-flex;}
.ui-icon-btn--theme[data-theme-modus="dark"] > span[data-modus="light"]{display:none;}
.ui-icon-btn--theme[data-theme-modus="light"] > span[data-modus="dark"]{display:none;}

/* ============ Icon (Inline-SVG, Lucide) ============ */
/* Monochrom via currentColor -> erbt Textfarbe (Dark/Light + Signalfarben automatisch korrekt).
   Groesse skaliert mit der Schrift (1em); vertical-align fuer Inline-Text, flex:none gegen Schrumpfen. */
.ui-icon{width:1em;height:1em;vertical-align:-.125em;flex:none;}
.ui-icon--vertical{transform:rotate(90deg);}
/* Abstand nur fuer Icons IN einem Badge (Badge ist flex) — beruehrt icon-lose Badges nicht. */
.ui-badge .ui-icon{margin-inline-end:.35em;}

/* ============ Segmentiertes Control ============ */
.ui-segmented{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-lighter);padding:var(--space-1);}
.ui-segmented__item{border:0;background:transparent;color:var(--mut);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);
  font-family:inherit;font-size:13px;font-weight:var(--font-weight-semibold);cursor:pointer;line-height:var(--line-tight);}
.ui-segmented__item:hover{color:var(--txt);background:var(--panel-hover);}
.ui-segmented__item.is-active{color:var(--on-accent);background:var(--accent);}
.ui-segmented__item:disabled{opacity:.5;cursor:not-allowed;}

/* ============ Feld (Input/Select/Textarea) + Label ============ */
.ui-label{display:block;font-size:var(--font-size-sm);margin:var(--space-7) 0 var(--space-3);color:var(--mut);font-weight:var(--font-weight-medium);}
.ui-label--flush{margin-top:0;}
/* an die Produktions-Felder kalibriert (B-6 Phase 3c #3, Chromium-mess-verifiziert): .add-q = 8px10px/14px/r6/lh-normal = h35. */
.ui-field{box-sizing:border-box;width:100%;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--line);
  background:var(--field-bg);color:var(--txt);font-size:var(--font-size-md);font-family:inherit;line-height:normal;
  transition:border-color var(--duration-normal) ease,box-shadow var(--duration-normal) ease;}
.ui-field::placeholder{color:var(--field-placeholder);}
.ui-field:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring);}
select.ui-field{cursor:pointer;}
.ui-field--auth{padding:11px var(--space-6);border-radius:var(--radius-lg);font-size:14.5px;}
.ui-field--code{letter-spacing:.15em;}
/* Textarea: gleiche Optik, vertikal scrollbar mit themenbasierter Scrollbar */
.ui-textarea{min-height:84px;resize:vertical;line-height:var(--line-normal);}

/* ---- Combobox (F-48): Auswahlfeld mit eigener, themenbasierter Liste ----
   Das Popup eines nativen <select> zeichnet das Betriebssystem — CSS erreicht es nicht, deshalb
   erscheint dort bei langen Listen die System-Scrollbar. `ui-combobox.js` legt darum einen Auslöser
   samt eigener Liste darüber; das <select> bleibt als Formular-Wahrheit im DOM und wird nur
   versteckt, sobald die Anreicherung greift (`.is-enhanced`). Ohne JavaScript bleibt das native
   Feld sichtbar — die Klassen unten ändern daran nichts. */
.ui-combo{position:relative;}
.ui-combo.is-enhanced .ui-combo__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip-path:inset(50%);overflow:hidden;}
.ui-combo__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  width:100%;text-align:left;cursor:pointer;}
.ui-combo__trigger:disabled{cursor:not-allowed;opacity:.6;}
.ui-combo__wert{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Aufklapp-Pfeil als reine CSS-Form (kein Icon-Asset für ein 6px-Dreieck) */
.ui-combo__pfeil{flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--combo-pfeil);transition:transform var(--duration-normal) var(--ease-standard);}
.ui-combo__trigger[aria-expanded="true"] .ui-combo__pfeil{transform:rotate(180deg);}
/* Feste Positionierung: scrollende/überlaufende Vorfahren würden die Liste sonst abschneiden
   (dieselbe Falle wie bei den Viewport-Popovern, deshalb dieselbe Ebene). */
.ui-combo__liste{position:fixed;z-index:var(--z-popover-fixed);margin:0;padding:var(--space-2) 0;list-style:none;
  max-height:min(260px,60vh);overflow-y:auto;box-sizing:border-box;
  background:var(--combo-liste-bg);border:1px solid var(--combo-liste-border);border-radius:var(--radius-md);
  box-shadow:0 4px 12px var(--combo-liste-shadow);}
.ui-combo__liste[hidden]{display:none;}
.ui-combo__option{padding:var(--space-4) var(--space-6);font-size:var(--font-size-md);color:var(--txt);
  cursor:pointer;white-space:nowrap;}
.ui-combo__option.is-aktiv{background:var(--combo-option-hover-bg);}
.ui-combo__option[aria-selected="true"]{background:var(--combo-option-selected-bg);color:var(--combo-option-selected-txt);
  font-weight:var(--font-weight-medium);}

/* ============ Checkbox & Radio ============ */
/* Label-umschlossen; accent-color faerbt das native Steuerelement theme-konform. */
.ui-check,.ui-radio{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  color:var(--txt);font-size:13.5px;line-height:var(--line-tight);user-select:none;}
.ui-check--wrap{align-items:flex-start;color:var(--mut);font-size:var(--font-size-sm);line-height:var(--line-normal);margin-top:var(--space-8);}
.ui-check--wrap a{color:var(--accent);text-decoration:none;font-weight:var(--font-weight-medium);}
.ui-check--wrap a:hover{color:var(--txt);text-decoration:underline;}
.ui-check > input,.ui-radio > input{appearance:auto;width:17px;height:17px;margin:0;
  flex:0 0 auto;accent-color:var(--accent);cursor:pointer;}
.ui-check > input:focus-visible,.ui-radio > input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ui-check.is-disabled,.ui-radio.is-disabled{opacity:.5;cursor:not-allowed;}

/* ============ Switch (Toggle) ============ */
.ui-switch{display:inline-flex;align-items:center;gap:9px;color:var(--txt);font-size:13.5px;cursor:pointer;user-select:none;}
.ui-switch > input{position:absolute;opacity:0;pointer-events:none;}
.ui-switch__track{box-sizing:border-box;position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-lighter);
  box-shadow:var(--shadow-control-inset);transition:background .18s ease,border-color .18s ease;}
.ui-switch__track::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--slate-bullet);box-shadow:var(--shadow-card);transition:transform .18s ease,background .18s ease;}
.ui-switch > input:checked + .ui-switch__track{background:var(--accent);border-color:var(--accent);}
.ui-switch > input:checked + .ui-switch__track::after{transform:translateX(18px);background:var(--on-accent);}
.ui-switch:hover .ui-switch__track{border-color:var(--slate-line);}
.ui-switch > input:focus-visible + .ui-switch__track{box-shadow:var(--shadow-control-inset),var(--focus-ring);}

/* ============ Alert / Hinweis ============ */
.ui-alert{border-radius:var(--radius-lg);padding:var(--space-5) 13px;font-size:13px;line-height:var(--line-normal);border:1px solid transparent;}
.ui-alert--ok{background:var(--ok-bg);color:var(--status-kaufen);border-color:var(--ok-border);}
.ui-alert--err{background:var(--gflag-verkaufen-bg);color:var(--status-verkaufen);border-color:var(--fehler-border);}
.ui-alert--info{background:var(--gflag-info-bg);color:var(--status-halten);border-color:var(--info-border);}
.ui-alert--warn{background:var(--warn-bg);color:var(--status-warnung);border-color:var(--warn-border);}
/* Banner-Variante: vollbreiter, eckiger Seitenkopf-Hinweis (z. B. Demokonto-Kennzeichnung) mit
   Aktions-Slot rechts. Kombinierbar mit den Farb-Varianten oben (ui-alert--info etc.). */
.ui-alert--banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;border-radius:0;margin:0;}
.ui-reauth{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);color:var(--txt);}
.ui-reauth__title{font-size:var(--font-size-md);color:var(--status-warnung);}
.ui-reauth__message,.ui-reauth__reason{display:block;}
.ui-reauth__reason{color:var(--mut);}
.ui-reauth__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2);}
.ui-reauth-host:empty{display:none;}
.ui-reauth-host{position:fixed;left:50%;bottom:var(--space-9);z-index:var(--z-toast);
  width:min(520px,calc(100vw - 24px));transform:translateX(-50%);}
.ui-reauth-host .ui-reauth{box-shadow:0 8px 24px var(--shadow-menu);}

/* ============ Badge (Signal) ============ */
.ui-badge{display:inline-flex;align-items:center;justify-content:center;line-height:1;
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-xl);font-size:12px;font-weight:var(--font-weight-semibold);letter-spacing:.02em;border:1px solid transparent;}
.ui-badge--buy{background:var(--badge-kaufen-bg);color:var(--badge-kaufen-txt);border-color:var(--badge-kaufen-border);}
.ui-badge--sell{background:var(--badge-verkaufen-bg);color:var(--badge-verkaufen-txt);border-color:var(--badge-verkaufen-border);}
.ui-badge--reduce{background:var(--badge-reduzieren-bg);color:var(--badge-reduzieren-txt);border-color:var(--badge-reduzieren-border);}
.ui-badge--hold{background:var(--badge-halten-bg);color:var(--badge-halten-txt);border-color:var(--badge-halten-border);}
.ui-badge--watch{background:var(--badge-beobachten-bg);color:var(--mut);border-color:var(--badge-beobachten-border);}
.ui-badge--avoid{background:var(--badge-meiden-bg);color:var(--badge-meiden-txt);border-color:var(--badge-meiden-border);}
.ui-badge--ki-signal{background:var(--badge-ki-signal-bg);color:var(--badge-ki-signal-txt);border-color:var(--badge-ki-signal-border);}
/* "folgt"-Marker (noch nicht implementierte Vorlage/Stil): bewusst kleine, dezente Pille. */
.ui-badge--folgt{background:transparent;color:var(--badge-folgt-txt);border-color:var(--badge-folgt-border);
  font-size:10px;font-weight:var(--font-weight-regular);letter-spacing:normal;padding:1px 7px;border-radius:10px;}

/* ---- Einschaetzung (A12/V5, ENTWURF) ----
   Verdichtet Signal, Score, Signal-Naehe und KI-Stimmung zu EINER Zelle mit klarer Rangfolge:
   das Handlungssignal traegt die erste Ebene, alles Erklaerende steht kleiner darunter. Heute
   stehen diese vier Werte als gleichrangige Spalten nebeneinander — das Auge findet nicht, was
   zuerst zaehlt. Bis zur Entscheidung ueber V5 wird der Baustein NUR im Styleguide gezeigt; die
   Produktivtabelle ist unveraendert. Farben kommen aus den Signal-/Status-Tokens, damit die
   Ampel-Semantik dieselbe bleibt. */
.ui-einschaetzung{display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);}
.ui-einschaetzung__kopf{display:inline-flex;align-items:center;gap:var(--space-3);}
.ui-einschaetzung__meta{display:inline-flex;align-items:center;gap:var(--space-3);white-space:nowrap;
  font-size:var(--font-size-xs);color:var(--mut);}
.ui-einschaetzung__score{color:var(--txt);font-weight:var(--font-weight-semibold);}
.ui-einschaetzung__trenner{color:var(--line);}
.ui-einschaetzung__punkt{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--mut);}
.ui-einschaetzung__punkt--positiv{background:var(--status-kaufen);}
.ui-einschaetzung__punkt--neutral{background:var(--status-halten);}
.ui-einschaetzung__punkt--negativ{background:var(--status-verkaufen);}
/* Einzeilige Ausprägung: Die gestapelte Form spart Breite, kostet aber Zeilenhöhe — bei 24 Titeln
   wird aus weniger Scrollen nach rechts mehr Scrollen nach unten. Diese Variante legt alles in eine
   Zeile: gleiche Rangfolge über Schriftgewicht statt über Stapelung, Zeilenhöhe wie heute. */
.ui-einschaetzung--zeile{flex-direction:row;align-items:center;gap:var(--space-4);}
.ui-einschaetzung--zeile .ui-einschaetzung__meta{font-size:var(--font-size-sm);}
/* In der Tabelle traegt das Signal-Badge die Ampelfarbe; die Signal-Naehe daneben bleibt gedaempft,
   sonst konkurrieren zwei farbige Elemente in derselben Zelle um die Aufmerksamkeit. Ihre eigene
   Ampelfarbe (.naehe.kaufen usw.) wird dafuer hier neutralisiert — die Information steckt im Text
   ("noch 4 % bis Reduzieren"), nicht in der Farbe. Gilt NUR innerhalb der Einschaetzung-Zelle. */
.ui-einschaetzung .ui-einschaetzung__meta .naehe{color:inherit;}  /* drei Klassen, weil dashboard.css NACH components.css laedt und .naehe.kaufen sonst gewinnt */
/* Status-Badge (z. B. "Beta") am Logo: bewusst dezent + neutral (slate, NICHT-ampelig), damit es wie
   ein Statushinweis wirkt und nicht wie eine Warnung. Kleine Caps-Pille analog zur "folgt"-Marke. */
.ui-badge--status{background:var(--badge-status-bg);color:var(--badge-status-txt);border-color:var(--badge-status-border);
  font-size:10px;font-weight:var(--font-weight-medium);letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:10px;}
/* Generische, NICHT-ampelige Kontext-Varianten (Auswahl-/Strategie-Status, keine Signalbedeutung):
   --neutral = "ist bereits so" (dezent, nur Umriss); --outline-accent = "du bist hier" (Umriss, Akzentfarbe,
   kein Fülleffekt -> kein Button-Look); --accent = "wird durch die Aktion neu entstehen" (gefuellt, faellt auf). */
.ui-badge--neutral{background:transparent;color:var(--mut);border-color:var(--line);}
.ui-badge--outline-accent{background:transparent;color:var(--accent);border-color:var(--accent);}
.ui-badge--accent{background:var(--accent);color:var(--ref-gray-100);}
/* Reset, damit ein <button class="ui-badge ..."> als Popover-Trigger wie ein Inline-Badge aussieht
   (Button-Default-Optik aus; Geometrie/Farbe kommen aus .ui-badge + Variante). */
button.ui-badge{-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;}

/* ============ Tag (Kontext-Marker) ============ */
.ui-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:1px solid var(--line);border-radius:10px;padding:var(--space-1) var(--space-4);font-size:11px;font-weight:var(--font-weight-semibold);
  line-height:var(--line-tight);white-space:nowrap;background:var(--tag-bg);color:var(--status-beobachten);}
.ui-tag--neutral{background:var(--tag-bg);color:var(--status-beobachten);border-color:var(--line);}
.ui-tag--strategy{background:var(--bg-lighter);color:var(--txt);border-color:var(--line);}
.ui-tag--portfolio{background:var(--gflag-info-bg);color:var(--status-halten);border-color:var(--info-border);}
.ui-tag--watchlist{background:var(--tag-bg);color:var(--status-beobachten);border-color:var(--line);}
.ui-tag--info{background:var(--gflag-info-bg);color:var(--status-halten);border-color:var(--info-border);}
.ui-tag--warn{background:var(--gflag-warnung-bg);color:var(--status-warnung);border-color:var(--warn-border);}
.ui-tag--danger{background:var(--gflag-verkaufen-bg);color:var(--status-verkaufen);border-color:var(--fehler-border);}

/* ============ Notification Badge (Neuigkeiten) ============ */
.ui-notification-badge{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--notification-size);height:var(--notification-size);padding:0 var(--space-3);
  border-radius:var(--radius-pill);background:var(--notification-bg);color:var(--notification-txt);
  box-shadow:var(--notification-shadow);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:1;flex-shrink:0;
  transition:opacity .4s ease, transform .4s ease;}
.ui-notification-badge.is-fadeout{opacity:0;transform:scale(0.5);pointer-events:none;}
.ui-notification-badge--inline{margin-left:auto;}
.ui-notification-badge--sm{min-width:var(--notification-size-sm);height:var(--notification-size-sm);padding:0 var(--space-2);font-size:10px;}
.ui-notification-badge--dot{width:var(--notification-dot-size);min-width:var(--notification-dot-size);height:var(--notification-dot-size);padding:0;border-radius:50%;}
.ui-notification-badge--abs{position:absolute;top:calc(var(--space-4) * -1);right:calc(var(--space-4) * -1);}
.ui-notification-target{position:relative;display:inline-flex;align-items:center;max-width:100%;}
.ui-notification-target-anchor{position:relative;}
/* Waypoint-Punkt auf dem Signal-Badge: bewusst 3px weiter in die Badge-Flaeche geschoben (nach unten
   und nach links) als der reine Token-Offset (--space-2 = 4px), damit er auf der abgerundeten Ecke
   sitzt statt daneben zu schweben. Ein Ort fuer beide Ansichten (Tabelle + Kachel-Raster) -> die
   Position bleibt zwischen den Modi identisch. */
:is(.ui-notification-target,.ui-notification-target-anchor)>.ui-notification-badge--target{position:absolute;z-index:1;top:calc(var(--space-2) * -1 + 3px);right:calc(var(--space-2) * -1 + 3px);pointer-events:none;}

/* ============ Notification-Bell (zentrale Glocke; ersetzt Dauer-Banner) ============ */
/* Header-Flyout im Stil des Profil-Menues (.profil-menu). Farben nur aus Semantic-Tokens; die
   Ampelfarben am linken Item-Rand stehen fuer die echte Severity (err/warn/info/ok), nicht als Deko. */
.ui-notif-bell{position:relative;display:inline-flex;}
.ui-notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:9px;background:var(--panel-hover);color:var(--mut);
  border:1px solid var(--line);cursor:pointer;}
.ui-notif-btn:hover{background:var(--btn-bg);color:var(--txt);}
.ui-notif-btn svg{width:20px;height:20px;}
/* Badge "ein Viertel im Anschnitt" in die obere rechte Ecke ziehen (Nutzerwunsch). Wegen der abgerundeten
   Ecke (border-radius 9px) braucht jede Badge-Groesse einen eigenen Offset: der grosse Zaehler (18px)
   sitzt bei -8px mit ~1/4 im Button; der kleine Dot (10px) laege bei -8px komplett AUSSERHALB (0 %) und
   wird deshalb mit -3.5px deutlich naeher gezogen. Nur fuer die Glocke; der globale Badge bleibt unveraendert. */
.ui-notif-btn .ui-notification-badge{top:-8px;right:-8px;}
.ui-notif-btn .ui-notification-badge--dot{top:-3.5px;right:-3.5px;}
.ui-notif-backdrop{display:none;}
.ui-notif-panel{position:absolute;right:0;top:46px;z-index:var(--z-menu);width:360px;
  max-width:calc(100vw - 24px);max-height:min(70vh,520px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 8px 24px var(--shadow-menu);overflow:hidden;}
.ui-notif-panel[hidden]{display:none;}
.ui-notif-panel__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-5) 13px;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:var(--font-weight-semibold);color:var(--txt);flex:0 0 auto;}
.ui-notif-panel__aktionen{display:flex;align-items:center;gap:var(--space-5);}
.ui-notif-panel__alle{background:none;border:0;color:var(--accent);font-size:12px;cursor:pointer;padding:0;}
.ui-notif-panel__alle:hover{text-decoration:underline;}
.ui-notif-panel__close{display:none;}
.ui-notif-tabs{display:flex;gap:var(--space-3);padding:var(--space-4) 13px;border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto;}
.ui-notif-tab{border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--panel-hover);
  color:var(--mut);font-size:11px;font-weight:var(--font-weight-semibold);padding:var(--space-2) var(--space-5);
  cursor:pointer;white-space:nowrap;}
.ui-notif-tab:hover,.ui-notif-tab.is-active{background:var(--btn-bg);color:var(--txt);border-color:var(--accent);}
.ui-notif-panel__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.ui-notif-panel__body--history .ui-notif-item{opacity:.82;}
.ui-notif-leer{padding:var(--space-12) 13px;text-align:center;color:var(--mut);font-size:13px;}
/* Gruppen-Trenner im Profi-Panel: "Veraenderungen" (Signalwechsel) zuoberst, dann "System", "Marktumfeld".
   Dezent (kein Ampel-/Akzentton — reiner Strukturhinweis), sticky am oberen Panelrand beim Scrollen. */
.ui-notif-gruppe{position:sticky;top:0;z-index:1;padding:var(--space-3) 13px;
  background:var(--panel);border-bottom:1px solid var(--line);
  font-size:10px;font-weight:var(--font-weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}
.ui-notif-item{position:relative;padding:var(--space-5) 13px var(--space-5) var(--space-9);
  border-bottom:1px solid var(--line);border-left:3px solid transparent;}
.ui-notif-item:last-child{border-bottom:0;}
.ui-notif-item--err{border-left-color:var(--status-verkaufen);}
.ui-notif-item--warn{border-left-color:var(--status-warnung);}
.ui-notif-item--info{border-left-color:var(--status-halten);}
.ui-notif-item--ok{border-left-color:var(--status-kaufen);}
.ui-notif-item.is-unread{background:var(--panel-hover);}
/* Aeltere Eintraege (>7 Tage) treten optisch zurueck, ohne unlesbar zu werden (F-83). */
.ui-notif-item.is-alt{opacity:.6;}
.ui-notif-item__kopf{display:flex;align-items:center;gap:var(--space-3);}
.ui-notif-item__titel{flex:1;font-size:13px;font-weight:var(--font-weight-semibold);color:var(--txt);}
.ui-notif-item__ki{font-size:10px;font-weight:var(--font-weight-bold);letter-spacing:.04em;
  padding:1px var(--space-3);border-radius:var(--radius-md);
  background:var(--warn-bg);color:var(--status-warnung);border:1px solid var(--warn-border);}
.ui-notif-item__neu{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}
.ui-notif-item__text{margin-top:var(--space-2);font-size:12px;line-height:var(--line-normal);color:var(--mut);}
.ui-notif-item__meta{margin-top:var(--space-3);display:flex;align-items:center;gap:var(--space-6);
  font-size:11px;color:var(--mut);}
.ui-notif-item__cta{background:none;border:0;color:var(--accent);font-size:11px;
  font-weight:var(--font-weight-semibold);cursor:pointer;padding:0;}
.ui-notif-item__cta:hover{text-decoration:underline;}
.ui-notif-item__hide{margin-left:auto;background:none;border:0;color:var(--mut);font-size:11px;cursor:pointer;padding:0;}
.ui-notif-item__hide:hover{color:var(--txt);}
@media (max-width:560px){
  body.notif-sheet-open{overflow:hidden;}
  .ui-notif-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:var(--z-modal);
    background:var(--overlay-bg);}
  .ui-notif-panel{
    position:fixed;left:0;right:0;bottom:0;
    top:calc(var(--space-4) + env(safe-area-inset-top, 0px));z-index:calc(var(--z-modal) + 1);
    width:auto;max-width:none;max-height:none;
    border-left:0;border-right:0;border-bottom:0;
    border-radius:var(--modal-radius) var(--modal-radius) 0 0;
    box-shadow:var(--modal-shadow);
  }
  .ui-notif-panel__close{display:inline-flex;width:44px;height:44px;}
  .ui-notif-panel__body{padding-bottom:env(safe-area-inset-bottom, 0px);}
}
/* Kurzes Aufleuchten des Ziel-Bereichs nach Klick auf eine Notification (Deep-Link).
   Umrandung INNEN zeichnen (outline-offset negativ + inset-Glow): ein aeusserer Ring
   (outline-offset positiv / aeusserer box-shadow) wird von Vorfahren mit overflow:hidden|auto
   an deren Rand beschnitten -> dann leuchtet nur ein Teil der Kanten auf. Innenliegend kann
   ihn kein Container kappen, die Umrandung geht garantiert rundherum. */
.notif-highlight{border-radius:var(--radius-md);outline:2px solid transparent;outline-offset:-2px;animation:notif-flash 2.2s ease;}
tr.notif-highlight>td{animation:notif-cell-flash 2.2s ease;}
@keyframes notif-flash{0%,100%{outline-color:transparent;box-shadow:none;}12%,55%{outline-color:var(--accent);box-shadow:inset var(--focus-ring);}}
@keyframes notif-cell-flash{0%,100%{background:inherit;}12%,55%{background:var(--selected-bg);}}

/* ============ Toast (fluechtige Erfolgs-/Status-Meldung; Spec-Typ 4) ============ */
/* Kurze, selbst-verschwindende Rueckmeldung nach einer Aktion (z. B. "Strategie gespeichert").
   Anders als die persistente Glocke: nicht gespeichert, kein Verlauf. Schatten wie .ui-notif-panel,
   Severity als linker Akzentstrich wie .ui-notif-item — Ampelfarbe = echte Bedeutung, nicht Deko. */
.ui-toast-stack{position:fixed;bottom:var(--space-9);right:var(--space-9);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--space-5);width:340px;max-width:calc(100vw - 24px);pointer-events:none;}
.ui-toast{display:flex;align-items:flex-start;gap:var(--space-5);pointer-events:auto;
  padding:var(--space-5) 13px;border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius-lg);
  background:var(--panel);box-shadow:0 8px 24px var(--shadow-menu);
  font-size:13px;line-height:var(--line-normal);color:var(--txt);
  opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;}
.ui-toast.is-in{opacity:1;transform:translateY(0);}
.ui-toast.is-out{opacity:0;transform:translateY(8px);}
.ui-toast--ok{border-left-color:var(--status-kaufen);}
.ui-toast--info{border-left-color:var(--status-halten);}
.ui-toast--warn{border-left-color:var(--status-warnung);}
.ui-toast--err{border-left-color:var(--status-verkaufen);}
.ui-toast__text{flex:1;}
.ui-toast__close{flex:none;background:none;border:0;color:var(--mut);font-size:16px;line-height:1;cursor:pointer;padding:0;}
.ui-toast__close:hover{color:var(--txt);}

/* ============ KI-Signal-Hinweise (ADR-032: Transparenz im Baukasten) ============ */
.ki-brick-hinweis{margin-top:var(--space-3);padding:var(--space-3) 9px;border-radius:var(--radius-lg);font-size:11px;line-height:1.4;
  background:var(--warn-bg);color:var(--status-warnung);border:1px solid var(--warn-border);}
.ki-dialog-hinweis{margin-top:var(--space-7);padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);font-size:12px;line-height:1.5;
  background:var(--warn-bg);color:var(--status-warnung);border:1px solid var(--warn-border);}

/* ============ Tabelle (Organism) ============ */
.ui-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);}
/* border-collapse:separate ist Pflicht, damit position:sticky an Zellen greift. */
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.ui-table th,.ui-table td{text-align:right;padding:var(--space-4) 11px;border-bottom:1px solid var(--line);white-space:nowrap;}
.ui-table th:first-child,.ui-table td:first-child,.ui-table .l{text-align:left;}
.ui-table th{color:var(--mut);font-weight:var(--font-weight-semibold);font-size:12px;background:var(--th-bg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--border-light);}
.ui-table tbody tr{transition:background var(--duration-normal) ease;}
.ui-table tbody tr:hover{background:var(--panel-hover);}
.ui-table tbody tr:last-child td{border-bottom:0;}
.ui-table th.ui-sortable{cursor:pointer;user-select:none;}
.ui-table th.ui-sortable:hover{color:var(--txt);background:var(--th-bg-hover);}
.ui-sort-icon{display:inline-flex;align-items:center;margin-left:var(--space-2);vertical-align:text-bottom;color:currentColor;}
.ui-sort-icon .ui-icon{width:13px;height:13px;}
.ui-sort-icon__asc,.ui-sort-icon__desc{display:none;}
.sort-asc>.ui-sort-icon .ui-sort-icon__neutral,.sort-desc>.ui-sort-icon .ui-sort-icon__neutral{display:none;}
.sort-asc>.ui-sort-icon .ui-sort-icon__asc,.sort-desc>.ui-sort-icon .ui-sort-icon__desc{display:inline-flex;}
.ui-sort-icon__neutral{display:inline-flex;opacity:.35;}
.ui-table .num{font-variant-numeric:tabular-nums;}
.ui-table .pos{color:var(--status-kaufen);}
.ui-table .neg{color:var(--status-verkaufen);}

/* ============ Tabs / Registernavigation ============ */
.ui-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);border-bottom:1px solid var(--line);}
.ui-tabs-scroll{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;}
.ui-tabs-scroll>.ui-tabs{flex:1 1 auto;width:100%;min-width:0;}
.ui-tabs-scroll__button{position:absolute;top:50%;z-index:2;flex:0 0 auto;transform:translateY(-50%);}
.ui-tabs-scroll__button[hidden]{display:none;}
.ui-tabs-scroll__button--previous{left:0;}
.ui-tabs-scroll__button--next{right:0;}
.ui-tabs-scroll__button--previous .ui-icon{transform:rotate(180deg);}
.ui-tabs-scroll__button:active{transform:translateY(-50%);}
@media (min-width:761px){
  .ui-tabs-scroll>.ui-tabs{overflow-x:auto;scrollbar-width:none;}
  .ui-tabs-scroll>.ui-tabs::-webkit-scrollbar{display:none;}
}
@media (max-width:760px){
  .ui-tabs-scroll{width:100%;}
  .ui-tabs-scroll__button{display:none !important;}
}
.ui-tab{position:relative;background:transparent;color:var(--mut);border:0;border-bottom:2px solid transparent;
  padding:var(--space-5) var(--space-8);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);font-family:inherit;cursor:pointer;
  margin-bottom:-1px;border-radius:var(--radius-md) var(--radius-md) 0 0;transition:color var(--duration-normal) ease,background var(--duration-normal) ease,border-color var(--duration-normal) ease;}
.ui-tab--notification-capable{padding-right:calc(var(--space-8) + var(--notification-size-sm) + var(--space-3));}
.ui-tab__label{display:block;line-height:inherit;}
.ui-tab__notification{position:absolute;top:50%;right:var(--space-7);display:inline-flex;align-items:center;justify-content:center;transform:translateY(-50%);pointer-events:none;}
.ui-tab__notification[hidden]{display:none;}
.ui-tab:hover{color:var(--txt);background:var(--panel-hover);}
.ui-tab.is-active{color:var(--txt);border-bottom-color:var(--accent);background:var(--tab-active-bg);}

/* ============ Suchfeld ============ */
.ui-search{display:inline-block;width:100%;max-width:340px;}
/* --grow: als wachsendes Flex-Item in Toolbars (ersetzt .suchfeld flex:1 1 220px). B-6 Phase 3c #5. */
.ui-search--grow{flex:1 1 220px;min-width:180px;}
.ui-search > input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  color:var(--txt);padding:7px var(--space-5);font-size:var(--font-size-md);font-family:inherit;
  transition:border-color var(--duration-normal) ease,box-shadow var(--duration-normal) ease;}
.ui-search > input::placeholder{color:var(--field-placeholder);}
.ui-search > input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring);}

/* ============ Filter-Chip (Toggle-Pill) ============ */
/* padding/font-weight an die Produktions-.fchip kalibriert (B-6 Phase 3b, Chromium-mess-verifiziert):
   .fchip ist 3px/font-weight 400 — ohne das waere der migrierte Chip 1px hoeher + sichtbar fetter. */
.ui-chip{display:inline-flex;align-items:center;gap:5px;background:var(--tag-bg);color:var(--status-beobachten);
  border:1px solid var(--line);border-radius:13px;padding:3px 11px;font-size:12px;font-weight:var(--font-weight-regular);font-family:inherit;
  cursor:pointer;user-select:none;transition:all var(--duration-normal) ease;}
.ui-chip:hover{color:var(--txt);}
.ui-chip.is-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

/* ============ Card (Flaeche) ============ */
.ui-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-9) var(--space-10);box-shadow:var(--shadow-card);}
.ui-card__titel{font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;font-weight:var(--font-weight-semibold);margin:0 0 var(--space-4);}

/* ============ Ticker-/Kontextkarte ============ */
.ui-ticker-list{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6);}
.ui-ticker-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-7);
  display:flex;flex-direction:column;gap:var(--space-5);transition:background var(--duration-normal) ease,border-color var(--duration-normal) ease;}
.ui-ticker-card:hover{background:var(--panel-hover);}
.ui-ticker-card--alert{border-left:4px solid var(--status-verkaufen);padding-left:11px;}
.ui-ticker-card--warn{border-left:4px solid var(--status-warnung);padding-left:11px;}
.ui-ticker-card--info{border-left:4px solid var(--status-halten);padding-left:11px;}
.ui-ticker-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);
  border-bottom:1px solid var(--line);padding-bottom:9px;}
.ui-ticker-card__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3);min-width:0;}
.ui-ticker-card__context{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);margin-left:auto;}
.ui-ticker-card__body{display:flex;flex-direction:column;gap:var(--space-5);font-size:13px;line-height:1.5;}
.ui-ticker-card__section{display:flex;flex-direction:column;gap:var(--space-3);}
@media (max-width: 620px){
  .ui-ticker-card__header{flex-direction:column;align-items:flex-start;}
  .ui-ticker-card__context{justify-content:flex-start;margin-left:0;}
}

/* ============ Signal-Karte (Einfach-/Easy-Modus) ============ */
/* Vorderseite: Klarname + farbiges Signal-Pill (+ NEU). Antippen klappt den Body auf. Nur Tokens. */
.ui-signal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden;}
.ui-signal-card.is-neu{border-color:var(--accent);}
.ui-signal-card__kopf{display:flex;align-items:center;gap:var(--space-5);width:100%;
  background:none;border:0;text-align:left;cursor:pointer;color:var(--txt);font-family:inherit;
  padding:var(--space-7) var(--space-8);}
.ui-signal-card__kopf:hover{background:var(--panel-hover);}
.ui-signal-card__titel{display:flex;align-items:center;gap:var(--space-5);flex:1 1 auto;min-width:0;}
.ui-signal-card__name{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-signal-card__rechts{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto;}
.ui-signal-card__kopfwert{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--txt);white-space:nowrap;font-variant-numeric:tabular-nums;}
@media (max-width:360px){.ui-signal-card__kopfwert{display:none;}}
/* Ticker-Logo: kleine Marke vor dem Aktiennamen. Die runde, theme-neutrale Plakette steckt schon
   im Bild (logo.py), daher kein border/background hier — transparente Ecken zeigen das Theme. */
.ui-ticker-logo{width:30px;height:30px;object-fit:contain;flex:0 0 auto;vertical-align:middle;background:transparent;}
.ui-ticker-logo--tabelle{width:28px;height:28px;margin-right:var(--space-5);}
/* Detail-Kopf (Aktiendetails): Name-Ueberschrift + VOLLES Logo (mit Schriftzug, /logo-full).
   Desktop: Logo rechts auf Namenshoehe; Mobile (<600px): Logo zuerst (row-reverse), dann Name.
   Das volle Logo ist transparent -> weisse Box (bewusst immer weiss, wie die Signet-Plakette).
   Groessen-Logik: max-height 56 UND max-width 200 (proportional) -> SCHMALE/quadratische Logos
   (Stern, Bildmarke) nutzen die volle Hoehe 56px; BREITE Wortmarken werden ueber die Breite begrenzt
   und damit automatisch niedriger (~40px) -> wirken nicht uebergross. PNG hoch aufgeloest -> scharf. */
.detail-kopf{display:flex;align-items:center;gap:var(--space-6);}
.detail-kopf .firma{flex:1 1 auto;min-width:0;}
.detail-titelzeile{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-6);min-width:0;}
.detail-identitaet{min-width:0;overflow-wrap:anywhere;}
.detail-signal{display:inline-flex;align-items:center;flex:0 0 auto;}
.ui-ticker-logo--detail{max-height:56px;max-width:200px;height:auto;width:auto;flex:0 0 auto;
  background:var(--logo-plakette-bg);border-radius:var(--radius-sm);padding:8px 10px;box-sizing:content-box;}
@media (max-width:600px){.detail-kopf{flex-direction:row-reverse;}}
.ui-signal-card__neu{background:var(--accent);color:var(--on-accent);font-size:10px;
  font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.04em;
  padding:2px 7px;border-radius:var(--radius-pill);}
.ui-signal-card__meta{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);
  line-height:var(--line-tight);white-space:nowrap;}
.ui-signal-card__meta .money{justify-content:flex-end;}
.ui-signal-card__chev{display:inline-flex;color:var(--mut);transition:transform var(--duration-normal) ease;}
.ui-signal-card.is-open .ui-signal-card__chev{transform:rotate(180deg);}
.ui-signal-card__body{padding:var(--space-6) var(--space-8) var(--space-7);display:flex;flex-direction:column;
  gap:var(--space-5);font-size:var(--font-size-md);line-height:var(--line-normal);border-top:1px solid var(--line);}
/* hidden muss display schlagen (sonst Body dauer-offen — gleiche Spezifitaet wie UA [hidden], Footgun
   wie .ui-btn[hidden]): attribut-qualifiziert -> hoehere Spezifitaet, kein !important noetig. */
.ui-signal-card__body[hidden]{display:none;}
.ui-signal-card__grund{color:var(--txt);}
.ui-signal-card__grund b{color:var(--mut);font-weight:var(--font-weight-semibold);}
.ui-signal-card__zeile{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);}
.ui-signal-card__label{color:var(--mut);}
.ui-signal-card__wert{font-weight:var(--font-weight-medium);}
.ui-signal-card__kriterien{display:flex;flex-direction:column;gap:var(--space-2);}
.ui-signal-card__kriterien ul{margin:0;padding-left:var(--space-9);display:flex;flex-direction:column;gap:var(--space-1);}
/* Gegenstueck zu __kriterien: deterministische Risiko-Hinweise zum Einstieg (signal_caveats.py).
   Gleiche Struktur, warnende Semantik — beantwortet "was spricht dagegen?" neben "was ist erfuellt?". */
.ui-signal-card__caveats{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--status-soft-warn-bg);border-radius:var(--radius-sm);}
/* Warn-TEXT-Token statt --status-warnung: letzterer traegt im hellen Theme nur 2.8:1 (WCAG-AA-Bruch). */
.ui-signal-card__caveats .ui-signal-card__label{color:var(--warn-aktion-txt);}
.ui-signal-card__caveats ul{margin:0;padding-left:var(--space-9);display:flex;flex-direction:column;gap:var(--space-1);}
.ui-signal-card__aktionen{display:flex;gap:var(--space-4);margin-top:var(--space-3);justify-content:flex-end;}
/* Aktionen (Verschieben/Entfernen) im Kebab unten rechts — JS-frei via <details>. Der ⋮-Knopf bleibt
   FIX an seiner Position; geoeffnet erscheinen die Buttons LINKS davon (row-reverse), und das Icon
   wechselt zu einem ✕. Kein absolut positioniertes Menue -> kein Clipping durch overflow:hidden. */
.ui-signal-card__kebab{display:flex;flex-direction:row-reverse;align-items:center;gap:var(--space-4);}
.ui-signal-card__kebab>summary{list-style:none;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);color:var(--mut);line-height:1;}
.ui-signal-card__kebab>summary::-webkit-details-marker{display:none;}
.ui-signal-card__kebab>summary .ui-icon{font-size:18px;}
.ui-signal-card__kebab>summary .ui-icon--close{display:none;}
.ui-signal-card__kebab[open]>summary .ui-icon--kebab{display:none;}
.ui-signal-card__kebab[open]>summary .ui-icon--close{display:block;font-size:17px;}
.ui-signal-card__kebab>summary:hover{background:var(--panel-hover);color:var(--txt);}
.ui-signal-card__kebabmenu{display:flex;gap:var(--space-4);}
.ui-signal-card__kebab:not([open]) .ui-signal-card__kebabmenu{display:none;}

/* ============ Tooltip (kurzer Info-Hinweis mit Hover/Fokus) ============ */
.ui-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;
  border:0;border-radius:50%;font-size:16px;color:var(--mut);cursor:help;}
.ui-info--label{width:auto;height:auto;border-radius:var(--radius-pill);}
.ui-info--label:focus-visible{box-shadow:var(--focus-ring);}
.ui-info:hover,.ui-info:focus{color:var(--txt);background:transparent;outline:none;}
.ui-info[data-tip]::after{content:attr(data-tip);position:absolute;bottom:140%;left:50%;transform:translateX(-50%);
  background:var(--pop-bg);color:var(--pop-txt-hell);border:1px solid var(--pop-border);border-radius:var(--radius-md);
  padding:7px var(--space-5);font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:1.4;white-space:normal;width:200px;
  box-shadow:0 4px 12px var(--shadow-strong);opacity:0;visibility:hidden;transition:opacity var(--duration-normal) ease;z-index:var(--z-popover);}
.ui-info--label[data-tip]::after{width:min(260px,calc(100vw - var(--space-16)));}
.ui-info:hover::after,.ui-info:focus::after{opacity:1;visibility:visible;}

/* ============ Accordion (native details) ============ */
.ui-accordion{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--archiv-bg);margin:var(--space-3) 0;}
.ui-accordion > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:var(--space-5) var(--space-7);color:var(--txt);font-size:13px;font-weight:var(--font-weight-semibold);user-select:none;}
.ui-accordion > summary::-webkit-details-marker{display:none;}
.ui-accordion[open] > summary{border-bottom:1px solid var(--line);}
.ui-accordion__label{min-width:0;}
.ui-accordion__body{padding:var(--space-6) var(--space-7);font-size:13px;line-height:1.5;}

/* Einheitlicher, netzunabhängiger Ladeindikator für Jinja- und Browser-Markup. */
.ui-spinner{width:14px;height:14px;display:inline-block;vertical-align:middle;flex:none;animation:ui-spinner-rotate .8s linear infinite;}
.ui-spinner circle{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:42 15;stroke-linecap:round;}
.ui-spinner--leading{margin-right:var(--space-3);margin-top:-2px;}
.ui-spinner--trailing{margin-left:var(--space-3);margin-top:-2px;}
.ui-spinner--compact{margin-right:var(--space-2);margin-top:-2px;}
@keyframes ui-spinner-rotate{to{transform:rotate(360deg);}}

/* ============ Modal / Dialog ============ */
.ui-modal-overlay{display:none;position:fixed;inset:0;z-index:var(--modal-stack-z,var(--z-modal));background:var(--overlay-bg);
  align-items:flex-start;justify-content:center;padding:var(--space-20) var(--space-8);overflow:auto;}
.ui-modal-overlay.is-open{display:flex;}
.ui-modal-overlay--center{align-items:center;}
.ui-modal{display:flex;flex-direction:column;max-width:var(--modal-width-md);width:100%;max-height:var(--modal-max-height);
  background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow);}
.ui-modal--sm{max-width:var(--modal-width-sm);}
.ui-modal--lg{max-width:var(--modal-width-lg);}
.ui-modal--xl{max-width:var(--modal-width-xl);}
.ui-modal__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-9) var(--space-11) var(--space-6);flex:0 0 auto;}
.ui-modal__kopf h3{margin:0;font-size:var(--font-size-lg);line-height:var(--line-tight);font-weight:var(--font-weight-semibold);}
.ui-modal__stock-identitaet{flex:1 1 auto;min-width:0;}
.ui-modal__body{min-height:0;max-height:var(--modal-body-max-height);overflow:auto;overscroll-behavior:contain;
  padding:var(--space-2) var(--space-11) var(--space-7);font-size:13.5px;line-height:1.55;}
.ui-modal__fuss{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:flex-end;padding:var(--space-6) var(--space-11) var(--space-9);border-top:1px solid var(--line);flex:0 0 auto;}
/* Aktien-Detail in Kompakt- und Profi-Rasteransicht: Die Dialoghöhe folgt dem Inhalt bis zum
   Viewport-Limit. Nur der Body scrollt; Kopf und Schließen-Aktion bleiben dabei erreichbar. */
.ui-modal-overlay--stock-detail{padding:var(--space-8);overflow:hidden;}
.ui-modal--stock-detail{box-sizing:border-box;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);}
.ui-modal--stock-detail .ui-modal__kopf{position:relative;padding:var(--space-16) var(--space-16) 0;
  padding-right:calc(var(--space-8) + 30px + var(--space-8));}
.ui-modal--stock-detail .ui-modal__kopf>h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ui-modal--stock-detail .ui-modal__stock-identitaet .detail-kopf{min-width:0;}
.ui-modal--stock-detail .ui-modal__stock-identitaet .firma{margin:0;min-width:0;overflow-wrap:anywhere;}
.ui-modal--stock-detail .ui-modal__stock-identitaet .detail-instrument{display:block;line-height:var(--line-normal);}
.ui-modal--stock-detail .ui-modal__stock-identitaet .detail-instrument-trenner{display:none;}
.ui-modal--stock-detail .ui-modal__kopf > .ui-icon-btn--close{position:absolute;top:var(--space-8);right:var(--space-8);}
.ui-modal--stock-detail .ui-modal__body{flex:1 1 auto;max-height:none;overflow:auto;padding:var(--space-16);}
@media (min-width:561px){
  .ui-modal--stock-detail{max-width:1200px;}
}
@media (max-width:560px){
  .ui-modal-overlay{padding:var(--space-8);}
  .ui-modal{max-height:calc(100vh - 32px);}
  .ui-modal-overlay--stock-detail{align-items:flex-start;padding:var(--space-4) 0 0;overflow:hidden;}
  .ui-modal--stock-detail{width:100%;max-width:100%;height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);
    border-left:0;border-right:0;border-bottom:0;border-radius:var(--modal-radius) var(--modal-radius) 0 0;}
  .ui-modal__kopf,.ui-modal__body,.ui-modal__fuss{padding-left:var(--space-8);padding-right:var(--space-8);}
  .ui-modal--stock-detail .ui-modal__kopf{padding:var(--space-8);padding-right:calc(var(--space-8) + 30px + var(--space-8));}
  .ui-modal--stock-detail .ui-modal__stock-identitaet .detail-kopf{gap:var(--space-5);}
  .ui-modal--stock-detail .ui-modal__stock-identitaet .firma b{display:block;font-size:var(--font-size-lg);line-height:var(--line-tight);}
  .ui-modal--stock-detail .ui-modal__stock-identitaet .detail-instrument{font-size:var(--font-size-xs);}
  .ui-modal--stock-detail .ui-modal__stock-identitaet .ui-ticker-logo--detail{max-width:70px;max-height:40px;padding:5px var(--space-3);}
  .ui-modal--stock-detail .ui-modal__body{padding:var(--space-12) var(--space-8) var(--space-8);overflow-y:auto;overflow-x:hidden;}
}

/* ============ Datei-Import (F-65): Upload-Feld + Pruefmodal ============ */
.ui-file{padding:var(--space-3) var(--space-4);}
.ui-file::file-selector-button{margin-right:var(--space-5);padding:var(--space-3) var(--space-5);
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-lighter);color:var(--txt);
  cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);}
.ui-file::file-selector-button:hover{border-color:var(--accent);}
.import-optionen{display:flex;flex-wrap:wrap;gap:var(--space-7);align-items:flex-start;margin-bottom:var(--space-6);}
.import-fieldset{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-6) var(--space-5);
  margin:0;display:flex;flex-direction:column;gap:var(--space-3);}
.import-fieldset legend{font-size:var(--font-size-sm);color:var(--mut);padding:0 var(--space-3);}
.import-feld{display:flex;flex-direction:column;gap:var(--space-2);}
.import-mapping{display:flex;flex-wrap:wrap;gap:var(--space-5);margin:var(--space-5) 0;padding:var(--space-5);
  border:1px dashed var(--line);border-radius:var(--radius-md);}
.import-mapping__feld{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--mut);}
/* Durchsuchbares Mapping-Dropdown (Combobox): Eingabefeld + gefilterte Optionsliste (F-65). */
.import-combo{position:relative;min-width:160px;}
.import-combo__input{width:100%;cursor:text;}
.import-combo__list{position:absolute;left:0;right:0;top:100%;z-index:5;max-height:240px;overflow:auto;
  margin-top:2px;background:var(--bg-lighter);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);overscroll-behavior:contain;}
.import-combo__opt{padding:var(--space-3) var(--space-5);cursor:pointer;font-size:13px;color:var(--txt);white-space:nowrap;}
.import-combo__opt:hover{background:var(--field-bg);}
.import-combo__opt.is-active{color:var(--accent);font-weight:var(--font-weight-semibold);}
/* Befuelltes Mapping-Feld (Zielfeld != "ignorieren") deutlich markieren: Akzent-Haken am Spaltennamen +
   Akzent-Rahmen am Feld -> die wenigen erkannten Spalten fallen zwischen den vielen "ignorieren" sofort
   ins Auge. Bewusst Akzent (Indigo), KEIN Ampelgruen (das ist fuer die Signal-Ampel reserviert). */
.import-mapping__feld.is-belegt > span{color:var(--accent);font-weight:var(--font-weight-semibold);}
.import-mapping__check{display:none;margin-right:var(--space-2);vertical-align:text-bottom;}
.import-mapping__check .ui-icon{width:13px;height:13px;}
.import-mapping__feld.is-belegt .import-mapping__check{display:inline-flex;}
.import-mapping__feld.is-belegt .import-combo__input{border-color:var(--accent);}
.import-tabelle-wrap{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md);overscroll-behavior:contain;}
/* Spalten nicht stauchen: width:auto + nowrap + Input-Mindestbreite -> der Wrap scrollt horizontal,
   die eingetragenen Werte bleiben sichtbar (Nutzer-Wunsch statt gequetschter, abgeschnittener Zellen). */
.import-tabelle{width:auto;min-width:100%;border-collapse:collapse;font-size:13px;}
.import-tabelle th,.import-tabelle td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap;}
.import-tabelle th{position:sticky;top:0;background:var(--bg-lighter);color:var(--mut);font-weight:var(--font-weight-semibold);z-index:1;}
.import-tabelle input{width:100%;box-sizing:border-box;min-width:140px;padding:var(--space-2) var(--space-3);background:var(--field-bg);color:var(--txt);
  border:1px solid transparent;border-radius:var(--radius-md);font-size:13px;font-family:inherit;}
.import-tabelle input:focus{outline:none;border-color:var(--accent);}
.import-row--fehler{box-shadow:inset 3px 0 0 var(--status-verkaufen);}
.import-row--warnung{box-shadow:inset 3px 0 0 var(--status-warnung);}
.import-row__hinweis{font-size:11.5px;color:var(--mut);}
.import-row--fehler .import-row__hinweis{color:var(--status-verkaufen);}
.import-summary{margin-top:var(--space-6);font-size:var(--font-size-sm);color:var(--mut);}
.import-summary b{color:var(--txt);}
/* Import-Ergebnis (F-65): je Titel ausweisen, was nicht uebernommen wurde + warum. */
.import-ergebnis{margin-top:var(--space-4);font-size:var(--font-size-sm);text-align:left;}
.import-ergebnis__liste{margin:var(--space-3) 0 0;padding-left:var(--space-6);max-height:200px;overflow-y:auto;color:var(--mut);}
.import-ergebnis__liste li{margin:var(--space-1) 0;}
.import-ergebnis__liste b{color:var(--txt);}
.import-ergebnis__hint{margin-top:var(--space-3);color:var(--mut);}
.import-ergebnis--ok{color:var(--status-kaufen);}      /* importiert = Erfolg (gruen) */
.import-ergebnis--err{color:var(--status-verkaufen);}  /* fehlgeschlagen = rot (Zaehler + betroffene Titel) */
.import-ergebnis__liste li.import-ergebnis--err b{color:inherit;}
.ui-btn__spinner{margin-left:var(--space-3);vertical-align:middle;}
/* Abbrechen im Import-Modal-Footer losgeloest ganz nach links (Rest bleibt rechtsbuendig). */
#import-btn-abbruch{margin-right:auto;}

/* ============ Feedback Widget ============ */
.ui-feedback-btn{position:fixed;right:0;top:70%;transform:translateY(-50%) rotate(-90deg);transform-origin:bottom right;
  z-index:var(--z-feedback);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-4) var(--space-8);box-shadow:var(--shadow-card);
  font-weight:var(--font-weight-semibold);font-size:13px;background:var(--accent);color:var(--on-accent);border:0;cursor:pointer;}
.ui-feedback-btn:hover{background:var(--accent-hover);}

/* Modal Theme Invertierung (hoher Kontrast) */
:root .ui-feedback-panel {
  --panel: var(--ref-gray-100);
  --bg: var(--ref-gray-98);
  --line: var(--ref-slate-91);
  --txt: var(--ref-slate-11);
  --mut: var(--ref-slate-47);
  --field-bg: var(--ref-gray-100);
  --bg-lighter: var(--ref-gray-100);
  --btn-bg: var(--ref-slate-91);
  --btn-bg-hover: var(--ref-slate-84);
  --btn-txt: var(--ref-slate-11);
}
[data-theme="light"] .ui-feedback-panel {
  --panel: var(--ref-slate-12);
  --bg: var(--ref-slate-07);
  --line: var(--ref-slate-21);
  --txt: var(--ref-slate-84);
  --mut: var(--ref-slate-47);
  --field-bg: var(--ref-slate-09);
  --bg-lighter: var(--ref-slate-17);
  --btn-bg: var(--ref-slate-21);
  --btn-bg-hover: var(--ref-slate-27);
  --btn-txt: var(--ref-slate-84);
}

.ui-feedback-panel{position:fixed;right:0;top:70%;transform:translateY(-50%);z-index:var(--z-feedback-panel);
  width:320px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl) 0 0 var(--radius-xl);border-right:0;
  box-shadow:0 10px 40px var(--shadow-strong);padding:var(--space-8);display:none;flex-direction:column;gap:var(--space-6);color:var(--txt);}
.ui-feedback-panel.is-open{display:flex;}
.ui-feedback-panel__close{position:absolute;top:10px;right:10px;background:none;border:0;color:var(--mut);font-size:var(--font-size-xl);cursor:pointer;line-height:1;}
.ui-feedback-panel__close:hover{color:var(--txt);}
.ui-feedback-preview__close{position:absolute;top:12px;right:4px;background:var(--overlay-bg);color:var(--white);}
.ui-feedback-panel__titel{margin:0 0 var(--space-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);}
.ui-feedback-panel .ui-field{margin-bottom:var(--space-4);}
.ui-feedback-panel__preview{width:100%;height:auto;max-height:150px;object-fit:contain;border:1px dashed var(--line);border-radius:var(--radius-md);margin-top:var(--space-4);display:none;}

/* Mobile: Panel als unten angedocktes Sheet ueber volle Breite, damit es nie aus dem Viewport
   ragt. dvh statt vh, weil die mobile Browser-UI-Leiste sonst den unteren Rand (Senden-Button)
   abschneidet; bei zu wenig Hoehe scrollt der Panel-Inhalt intern statt zu ueberlaufen. */
@media (max-width:560px){
  .ui-feedback-panel{
    top:auto;bottom:0;left:0;right:0;width:auto;transform:none;
    max-height:calc(100dvh - var(--space-8));overflow-y:auto;
    border:1px solid var(--line);border-bottom:0;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* ============ Screenshot Area Selection ============ */
.ui-screenshot-overlay{position:fixed;inset:0;background:transparent;z-index:var(--z-screenshot);cursor:crosshair;display:none;}
.ui-screenshot-overlay.is-active{display:block;}
.ui-selection-box{position:absolute;border:2px solid var(--chart-neg);background:transparent;z-index:calc(var(--z-screenshot) + 1);pointer-events:none;}

/* ============ Strategie-Visuals (Signaturen + Block-Bilder) ============ */
/* Token-basiert (Blau primaer, Pink sekundaer); Kauf/Verkauf-Marker tragen die Signal-Ampel-
   Bedeutung und NUR die. Genutzt von _strategie_visuals.html und der Vorlagen-Galerie. */
.viz-line{fill:none;stroke:var(--viz-line);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.viz-line-thin{fill:none;stroke:var(--viz-line);stroke-width:2;stroke-linecap:round;}
.viz-accent{fill:none;stroke:var(--viz-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.viz-accent-fill{fill:var(--viz-accent);}
.viz-fill{fill:var(--viz-line);opacity:.08;}
.viz-soft{fill:none;stroke:var(--viz-muted);stroke-width:1.5;stroke-dasharray:4 4;opacity:.6;}
.viz-band{fill:none;stroke:var(--viz-accent);stroke-width:1.2;stroke-dasharray:3 4;opacity:.5;}
.viz-mid{fill:none;stroke:var(--viz-muted);stroke-width:1;stroke-dasharray:2 4;opacity:.5;}
.viz-box{fill:var(--viz-line);fill-opacity:.07;stroke:var(--viz-line);stroke-width:1.2;stroke-dasharray:4 4;opacity:.85;}
.viz-bar{fill:var(--viz-line);}
.viz-bar-soft{fill:var(--viz-accent);opacity:.5;}
.viz-stop{fill:none;stroke:var(--status-verkaufen);stroke-width:1.5;stroke-dasharray:3 3;opacity:.75;}
.viz-marker-buy{fill:var(--status-kaufen);}
.viz-marker-sell{fill:var(--status-verkaufen);}
.viz-grid-base{stroke:var(--viz-grid);stroke-width:1;}
/* Modal-Block-Bilder (Vorlage waehlen / Baukasten) */
.viz-card-back{fill:var(--bg-darker);stroke:var(--line);stroke-width:1;}
.viz-card-front{fill:var(--panel);stroke:var(--viz-line);stroke-width:1.5;}
.viz-check-badge{fill:var(--viz-line);}
.viz-check-mark{fill:none;stroke:var(--on-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.viz-block{fill:url(#viz-blockverlauf);fill-opacity:.2;stroke:url(#viz-blockverlauf);stroke-width:1.3;}
.viz-knob{fill:var(--viz-line);}
.viz-param{fill:var(--bg);stroke:var(--viz-line);stroke-width:1.5;}
.viz-param-accent{fill:var(--bg);stroke:var(--viz-accent);stroke-width:1.5;}

/* ---- KPI / Metric ---- */
.ui-metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-6);margin:var(--space-16) 0;}
.ui-metric{background:var(--metric-bg);border:1px solid var(--metric-border);border-radius:var(--radius-lg);padding:var(--space-7) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;transition:background var(--duration-normal) ease,border-color var(--duration-normal) ease;}
.ui-metric:hover{background:var(--metric-bg-hover);border-color:var(--metric-border-hover);}
.ui-metric__label{color:var(--mut);font-size:11px;line-height:var(--line-tight);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.02em;}
.ui-metric__value{font-weight:var(--font-weight-bold);font-size:19px;color:var(--txt);letter-spacing:-.01em;}
.ui-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(178px, calc(20% - var(--space-6))), 1fr));gap:var(--space-6);margin:var(--space-4) 0 var(--space-12);}
.ui-kpi{background:var(--kpi-bg);border:1px solid var(--kpi-border);border-radius:10px;padding:var(--space-7) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-2);box-shadow:0 4px 6px var(--kpi-shadow);position:relative;overflow:hidden;
  transition:all .2s cubic-bezier(.4,0,.2,1);}
.ui-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--border-light),transparent);opacity:0;transition:opacity .3s;}
.ui-kpi:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 16px var(--kpi-shadow-hover);}
.ui-kpi:hover::before{opacity:1;}
.ui-kpi__label{color:var(--mut);font-size:12px;font-weight:var(--font-weight-medium);}
.ui-kpi__value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-tight);}
.ui-kpi__sub{color:var(--mut);font-size:11px;}
.ui-kpi--warning .ui-kpi__value{color:var(--status-warnung);}
.ui-kpi__action{display:flex;align-items:flex-end;flex:1;margin-top:var(--space-4);padding-top:var(--space-3);}

/* ---- Popover (klickbar und viewport-sicher über vp-tip/vp-pop) ---- */
.ui-popover-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:help;}
.ui-popover-trigger:focus{outline:none;}
.ui-popover{display:none;position:fixed;z-index:var(--z-popover-fixed);max-width:min(280px,calc(100vw - 16px));box-sizing:border-box;
  width:240px;background:var(--popover-bg);color:var(--popover-txt);border:1px solid var(--popover-border);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-6);font-size:var(--font-size-xs);font-style:normal;font-weight:var(--font-weight-regular);line-height:var(--line-normal);
  text-align:left;white-space:normal;box-shadow:0 4px 12px var(--popover-shadow);text-transform:none;letter-spacing:normal;}
.ui-popover--wide{width:280px;}
.ui-popover--narrow{width:230px;}
.ui-popover__header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);border-bottom:1px solid var(--popover-separator);padding-bottom:var(--space-3);}
.ui-popover__muted{color:var(--popover-muted);font-size:11px;}

/* ---- Callout / Hinweisbox ---- */
.ui-callout{border-radius:var(--radius-lg);border:1px solid var(--callout-info-border);background:var(--callout-info-bg);
  color:var(--callout-info-txt);padding:var(--space-5) var(--space-6);font-size:13px;line-height:1.5;}
.ui-callout--warn{background:var(--callout-warn-bg);border-color:var(--callout-warn-border);color:var(--callout-warn-txt);}
.ui-callout--danger{background:var(--callout-danger-bg);border-color:var(--callout-danger-border);color:var(--callout-danger-txt);}
.ui-callout--info{background:var(--callout-info-bg);border-color:var(--callout-info-border);color:var(--callout-info-txt);}
.ui-callout__label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:var(--font-weight-bold);margin-bottom:var(--space-2);}

/* ---- Aktien-Kachel (Rasteransicht, F-80) ----
   Kompakte Variante der Signal-Karte: erbt Flaeche/Rahmen/Radius/Schatten der
   .ui-signal-card-Basis (keine zweite Klasse, DS-Regel), --kachel schaltet vom
   horizontalen Akkordeon-Kopf auf ein vertikales, klickbares Kachel-Layout um
   (oeffnet das Titel-Detail statt aufzuklappen). Der Grid-Container ordnet die
   Kacheln responsiv an (auto-fill: 4/3/2/1 Spalten je nach Breite). */
.ui-signal-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-6);}
.ui-signal-card--kachel{transition:background-color var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard);}
.ui-signal-card.ui-signal-card--kachel:is(:hover,:focus-within){background:var(--signal-card-kachel-hover-bg);border-color:var(--signal-card-kachel-hover-bg);}
.ui-signal-card--kachel .ui-signal-card__kachel{display:flex;flex-direction:column;gap:var(--space-6);
  position:relative;box-sizing:border-box;width:100%;padding:var(--space-7);background:none;border:0;text-align:left;
  color:var(--txt);font-family:inherit;transition:background-color var(--duration-normal) var(--ease-standard),color var(--duration-normal) var(--ease-standard);}
.ui-signal-card--kachel .ui-signal-card__kachel:is(:hover,:focus-within){
  background:var(--signal-card-kachel-hover-bg);color:var(--signal-card-kachel-hover-txt);outline:none;}
.ui-signal-card__kachel-detail{position:absolute;inset:0;z-index:0;width:100%;background:none;border:0;
  border-radius:inherit;cursor:pointer;}
.ui-signal-card__kachel-detail:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent);}
.ui-signal-card__kachel>:not(.ui-signal-card__kachel-detail){position:relative;z-index:1;pointer-events:none;}
.ui-signal-card__kachel .vp-tip{pointer-events:auto;}
.ui-signal-card__kachel-kopf{display:flex;align-items:center;gap:var(--space-4);min-width:0;}
.ui-signal-card__kachel-ident{display:flex;flex-direction:column;min-width:0;line-height:var(--line-tight);}
.ui-signal-card__kachel-ticker{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-signal-card__kachel-name{font-size:var(--font-size-sm);color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-signal-card--kachel .ui-signal-card__kachel:is(:hover,:focus-within) :is(.ui-signal-card__kachel-name,.ui-signal-card__kachel-trenner,.ui-signal-card__kachel-kurs){color:var(--signal-card-kachel-hover-mut);}
.ui-signal-card__kachel-kennzahlen{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);width:100%;font-variant-numeric:tabular-nums;}
.ui-signal-card__kachel-renditezeile{display:flex;align-items:baseline;gap:var(--space-1);width:100%;min-width:0;}
.ui-signal-card__kachel-performance,.ui-signal-card__kachel-positionswert,.ui-signal-card__kachel-gewinn-verlust{display:inline-flex;align-items:baseline;flex:0 0 auto;white-space:nowrap;cursor:help;}
:is(.ui-signal-card__kachel-performance,.ui-signal-card__kachel-positionswert,.ui-signal-card__kachel-gewinn-verlust,.ui-signal-card__kachel-kurs):focus{outline:none;}
.ui-signal-card__kachel-performance-wert{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);}
.ui-signal-card__kachel-positionswert,.ui-signal-card__kachel-gewinn-verlust{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);}
.ui-signal-card__kachel-renditezeile--portfolio .ui-signal-card__kachel-performance-wert{font-size:var(--font-size-xs);}
.ui-signal-card__kachel-renditezeile--portfolio :is(.ui-signal-card__kachel-gewinn-verlust,.ui-signal-card__kachel-positionswert){font-size:var(--font-size-lg);}
.ui-signal-card__kachel-positionswert{margin-left:auto;color:inherit;}
:is(.ui-signal-card__kachel-gewinn-verlust,.ui-signal-card__kachel-positionswert) .money-currency{color:inherit;}
.ui-signal-card__kachel-trenner{color:var(--mut);font-size:var(--font-size-xs);}
.ui-signal-card__kachel-chartzeile{display:flex;align-items:center;gap:var(--space-2);width:100%;min-width:0;}
.ui-signal-card__kachel-spark-wrap{flex:1 1 0;min-width:0;}
.ui-signal-card__kachel .ui-signal-card__kachel-spark{width:100%;height:24px;display:block;pointer-events:auto;cursor:help;}
.ui-signal-card__kachel-werte{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);flex:0 0 auto;min-width:max-content;line-height:var(--line-tight);}
.ui-signal-card__kachel-kurs{display:inline-flex;align-items:baseline;flex:0 0 auto;white-space:nowrap;color:var(--mut);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;cursor:help;}
.ui-signal-card__kachel-fuss{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:var(--space-4);width:100%;min-width:0;}
.ui-signal-card__kachel-signal{display:block;max-width:100%;min-width:0;flex:0 1 auto;}
.ui-signal-card__kachel-signal>:is(.badge,.ui-badge){box-sizing:border-box;max-width:100%;}
.ui-signal-card__kachel-signaltext{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ui-signal-card__kachel-scores{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-5);margin-left:auto;min-width:0;text-align:right;}
.ui-signal-card__kachel-score{display:inline-flex;align-items:center;gap:var(--space-3);
  flex:0 0 auto;white-space:nowrap;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;cursor:help;}
.ui-signal-card__kachel-score:focus{outline:none;}
.ui-signal-card__kachel-ki{display:inline-flex;align-items:center;gap:var(--space-3);flex:0 0 auto;white-space:nowrap;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;cursor:help;}
.ui-signal-card__kachel-ki .ki-pkt{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto;background:var(--pkt-leer);}
.ui-signal-card__kachel-ki .ki-pkt.p-positiv{background:var(--badge-kaufen-txt);}
.ui-signal-card__kachel-ki .ki-pkt.p-negativ{background:var(--badge-verkaufen-txt);}
.ui-signal-card__kachel-ki .ki-pkt.p-neutral{background:var(--status-halten);}
.ui-signal-card__kachel-ki:focus{outline:none;}
.ui-signal-card__kachel-ki.s-positiv{color:var(--badge-kaufen-txt);}
.ui-signal-card__kachel-ki.s-negativ{color:var(--badge-verkaufen-txt);}
.ui-signal-card__kachel-ki.s-neutral{color:var(--status-halten);}
.ui-signal-card__kachel-punkt{width:8px;height:8px;border-radius:50%;background:var(--status-neutral);flex:0 0 auto;}
.ui-signal-card__kachel-punkt--gruen{background:var(--status-kaufen);}
.ui-signal-card__kachel-punkt--gelb{background:var(--status-halten);}
.ui-signal-card__kachel-punkt--rot{background:var(--status-verkaufen);}
/* F-80 Listen/Raster-Umschaltung: das Kachel-Gitter liegt im DOM neben der Tabelle und ist per Default
   versteckt; body[data-tabelle-view="raster"] (gesetzt aus ui_prefs.tabelle_view_mode + dashboard.js)
   blendet die Tabelle aus und das Gitter ein. */
.tabelle-raster{display:none;}
.haupt-block[data-view="raster"] .tabelle-wrap{display:none;}
.haupt-block[data-view="raster"] .tabelle-raster{display:grid;}
/* F-80 Umschalter je Bereich: EIN Icon-Button, der die jeweils ANDERE Ansicht zeigt
   (Liste aktiv -> Raster-Icon; Raster aktiv -> Listen-Icon). */
.bvt-icon{display:none;}
.bereich-view-toggle .bvt-zu-raster{display:inline-flex;}
.haupt-block[data-view="raster"] .bereich-view-toggle .bvt-zu-raster{display:none;}
.haupt-block[data-view="raster"] .bereich-view-toggle .bvt-zu-liste{display:inline-flex;}
html.tdo-lock{overflow:hidden;}
/* In beiden Aktien-Detail-Modals sitzt der Kurs-Chart rechtsbuendig am Content-Rand; seine rechte
   Rahmenlinie wirkt dort als stoerende vertikale Linie -> rechte Kante ausblenden. */
.ui-modal-overlay .chart-plot-wrap{border-right-color:transparent;}

/* ============ Chart-Ereignismarker (Signalwechsel / Transaktionen) ============ */
.chart-event-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.ui-chart-event-marker{position:absolute;width:24px;height:24px;padding:0;border:0;background:transparent;
  transform:translate(-50%,50%);cursor:pointer;pointer-events:auto;box-sizing:border-box;
  --chart-marker-size:14px;--chart-marker-size-umriss:12px;}
/* Feste Kantenlaenge statt `inset`: bei `inset` berechnet der Browser beide Kanten aus der Position
   des Buttons, und die sitzt (prozentual platziert) auf Bruchteil-Pixeln. Beide Kanten werden dann je
   Achse unabhaengig gerundet — die Box wurde 13 oder 15 px breit/hoch und der Punkt sichtbar oval.
   Mit fester Groesse und ganzzahligem Rand-Ausgleich bleibt er in jeder Position exakt kreisrund. */
.ui-chart-event-marker::before{content:"";position:absolute;top:50%;left:50%;
  width:var(--chart-marker-size);height:var(--chart-marker-size);aspect-ratio:1;
  margin:calc(var(--chart-marker-size) / -2) 0 0 calc(var(--chart-marker-size) / -2);
  border:2px solid var(--chart-event-outline);box-sizing:border-box;background:var(--status-halten);}
.ui-chart-event-marker:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent);border-radius:var(--radius-xs);}
.ui-chart-event-marker--signal::before{border-radius:50%;background:var(--status-halten);}
.ui-chart-event-marker--kauf::before{background:var(--status-kaufen);clip-path:polygon(50% 0,100% 100%,0 100%);}
.ui-chart-event-marker--verkauf::before{background:var(--status-verkaufen);clip-path:polygon(0 0,100% 0,50% 100%);}
.ui-chart-event-marker--kaufen::before{background:var(--status-kaufen);}
.ui-chart-event-marker--verkaufen::before{background:var(--status-verkaufen);}
/* „Meiden" ist der einzige Punkt, dessen Rand die Signalfarbe traegt (Flaeche = Panel). Bei allen
   anderen liest das Auge nur den farbigen Kern als Punkt, der helle Rand wirkt als Abstand — mit
   gleicher Kantenlaenge wirkte „Meiden" dadurch deutlich groesser. Deshalb eine Stufe kleiner. */
.ui-chart-event-marker--meiden::before{width:var(--chart-marker-size-umriss);height:var(--chart-marker-size-umriss);
  margin:calc(var(--chart-marker-size-umriss) / -2) 0 0 calc(var(--chart-marker-size-umriss) / -2);
  background:var(--panel);border-color:var(--status-verkaufen);}
.ui-chart-event-marker--reduzieren::before{background:var(--status-warnung);}
.ui-chart-event-marker--halten::before{background:var(--status-halten);}
.ui-chart-event-marker--beobachten::before{background:var(--status-beobachten);}
/* „Unbekannt" heisst: keine auswertbare Datenlage, also bewusst KEINE Ampelfarbe (die sind semantisch
   besetzt) — neutrales Grau. Vorher fiel dieser Signalwert auf die Halten-Optik zurueck. */
.ui-chart-event-marker--unbekannt::before{background:var(--status-neutral);}
/* --stand markiert den Garantie-Punkt am Kurvenende (aktuell gueltiges Signal ohne Ereignis im
   Zeitraum). Absichtlich OHNE eigene Optik: er soll dieselbe Signalfarbe wie ein Wechselpunkt zeigen,
   sonst waere das aktuelle Signal wieder schwerer zu lesen. Die Klasse bleibt als Haken fuer
   Popover-Text/Tests; dass er kein Wechseltag ist, sagt sein Popover. */
.chart-event-popover{width:min(360px,calc(100vw - 2 * var(--space-4)));max-height:min(480px,calc(100dvh - 2 * var(--space-4)));
  box-sizing:border-box;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:var(--space-5) var(--space-6);background:var(--pop-bg);color:var(--txt);
  border:1px solid var(--pop-border);border-radius:var(--radius-md);box-shadow:0 4px 12px var(--popover-shadow);
  font-size:var(--font-size-xs);line-height:var(--line-normal);white-space:normal;overflow-wrap:anywhere;hyphens:auto;
  pointer-events:auto;}
.chart-event-popover :where(b,span){max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.chart-event-popover:focus{outline:none;}
.chart-event-popover:focus-visible{box-shadow:0 4px 12px var(--popover-shadow),0 0 0 2px var(--accent);}
.ui-chart-event-history{position:absolute;width:34px;height:28px;padding:0;border:0;background:transparent;
  transform:translate(-50%,50%);cursor:pointer;pointer-events:auto;box-sizing:border-box;}
.ui-chart-event-history:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent);border-radius:var(--radius-xs);}
.ui-chart-history-dot{position:absolute;left:var(--history-left);top:var(--history-top);
  width:14px;height:14px;aspect-ratio:1;border:2px solid var(--chart-event-outline);border-radius:50%;
  box-sizing:border-box;background:var(--status-halten);}
.ui-chart-history-dot--kaufen{background:var(--status-kaufen);}
.ui-chart-history-dot--verkaufen{background:var(--status-verkaufen);}
/* Eine Stufe kleiner + 1px Ausgleich, damit der farbig umrandete Punkt neben den gefuellten nicht
   groesser wirkt (gleiche Begruendung wie beim Chart-Marker) und optisch mittig bleibt. */
.ui-chart-history-dot--meiden{width:12px;height:12px;margin:1px;
  background:var(--panel);border-color:var(--status-verkaufen);}
.ui-chart-history-dot--reduzieren{background:var(--status-warnung);}
.ui-chart-history-dot--halten{background:var(--status-halten);}
.ui-chart-history-dot--beobachten{background:var(--status-beobachten);}
.ui-chart-history-dot--unbekannt{background:var(--status-neutral);}
.ui-chart-history-list{display:block;margin-top:var(--space-4);border-top:1px solid var(--popover-separator);}
.ui-chart-history-event{display:block;padding:var(--space-4) 0;border-bottom:1px solid var(--popover-separator);}
.ui-chart-history-event:last-child{border-bottom:0;}
.ui-chart-history-hint{display:block;margin-top:var(--space-2);color:var(--popover-muted);}
.ui-chart-event-legende{align-items:center;flex-wrap:wrap;gap:var(--space-5);color:var(--mut);font-size:var(--font-size-xs);}
.ui-chart-event-legende:not([hidden]){display:inline-flex;}
.ui-chart-event-legende>span{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;}
.ui-chart-event-symbol{display:inline-block;width:10px;height:10px;flex:0 0 auto;background:var(--status-halten);}
.ui-chart-event-symbol--signal{border-radius:50%;}
.ui-chart-event-symbol--kauf{background:var(--status-kaufen);clip-path:polygon(50% 0,100% 100%,0 100%);}
.ui-chart-event-symbol--verkauf{background:var(--status-verkaufen);clip-path:polygon(0 0,100% 0,50% 100%);}
.ui-chart-event-symbol--kaufen{background:var(--status-kaufen);}
.ui-chart-event-symbol--verkaufen{background:var(--status-verkaufen);}
.ui-chart-event-symbol--meiden{background:var(--panel);border:2px solid var(--status-verkaufen);box-sizing:border-box;}
.ui-chart-event-symbol--reduzieren{background:var(--status-warnung);}
.ui-chart-event-symbol--halten{background:var(--status-halten);}
.ui-chart-event-symbol--beobachten{background:var(--status-beobachten);}
.ui-chart-event-symbol--unbekannt{background:var(--status-neutral);}

/* ============ Ende Chart-Ereignismarker ============ */

/* ============ Sparkline-Ereignismarker (reduzierte Chart-Variante) ============ */
.ui-sparkline-shell{position:relative;display:block;width:80px;max-width:100%;height:24px;}
.ui-sparkline{position:relative;display:block;width:100%;height:24px;cursor:help;}
.ui-sparkline:focus{outline:none;}
.ui-sparkline:focus-visible{border-radius:var(--radius-sm);box-shadow:0 0 0 2px var(--accent);}
.ui-signal-card__kachel-spark-wrap.ui-sparkline-shell{width:auto;}
.ui-sparkline>.spark{width:100%;height:24px;display:block;}
/* Lade-Indikator, solange die Kursreihe nachlaedt: bewusst als HTML-Overlay NEBEN dem SVG.
   Das Sparkline-SVG skaliert mit preserveAspectRatio="none" (die Kurve SOLL sich strecken) —
   ein Kreis darin wuerde im Raster, wo die Kachel-Sparkline breiter als ihre 80er-viewBox ist,
   zur flachen Ellipse verzerrt. Als HTML-Element behaelt der zentrale .ui-spinner in jeder
   Ansicht seine runden 14x14 px (gleiches Muster wie .kpi-spark-lade). */
.ui-sparkline__lade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--mut);pointer-events:none;z-index:1;}
.ui-sparkline__preview-line{fill:none;stroke:var(--status-kaufen);}
.ui-sparkline__events{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.ui-sparkline__marker{position:absolute;width:10px;height:10px;aspect-ratio:1;box-sizing:border-box;
  transform:translate(-50%,-50%);background:var(--status-halten);}
.ui-sparkline__marker--signal{border:2px solid var(--chart-event-outline);border-radius:50%;}
.ui-sparkline__marker--kauf{background:var(--status-kaufen);clip-path:polygon(50% 0,100% 100%,0 100%);}
.ui-sparkline__marker--verkauf{background:var(--status-verkaufen);clip-path:polygon(0 0,100% 0,50% 100%);}
.ui-sparkline__marker--kaufen{background:var(--status-kaufen);}
.ui-sparkline__marker--verkaufen{background:var(--status-verkaufen);}
/* Eine Stufe kleiner als die gefuellten Marker — der farbige Umriss wirkt sonst groesser
   (gleiche Begruendung wie bei .ui-chart-event-marker--meiden). */
.ui-sparkline__marker--meiden{width:8px;height:8px;background:var(--panel);border-color:var(--status-verkaufen);}
.ui-sparkline__marker--reduzieren{background:var(--status-warnung);}
.ui-sparkline__marker--halten{background:var(--status-halten);}
.ui-sparkline__marker--beobachten{background:var(--status-beobachten);}
.ui-sparkline__marker--unbekannt{background:var(--status-neutral);}
.ui-sparkline__history{position:absolute;z-index:2;width:22px;height:18px;padding:0;border:0;background:transparent;
  transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto;}
.ui-sparkline__history:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent);border-radius:var(--radius-xs);}

/* ============ Analytische Aufschlüsselung ============ */
.ui-breakdown{display:flex;flex-direction:column;gap:var(--space-8);}
.ui-breakdown__intro,.ui-breakdown__meta,.ui-breakdown__footnote{margin:0;color:var(--mut);line-height:var(--line-normal);}
.ui-breakdown__meta{font-size:var(--font-size-xs);}
.ui-breakdown__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10);}
.ui-breakdown__section{min-width:0;}
.ui-breakdown__section h4{margin:0 0 var(--space-6);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--txt);}
.ui-breakdown__list{display:flex;flex-direction:column;gap:var(--space-6);}
.ui-breakdown__footnote{border-top:1px solid var(--line);padding-top:var(--space-6);font-size:var(--font-size-xs);}
.ui-distribution-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-5);min-width:0;}
.ui-distribution-row__label{min-width:0;overflow-wrap:anywhere;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--txt);}
.ui-distribution-row__value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--txt);}
.ui-distribution-row__track{grid-column:1/-1;height:8px;overflow:hidden;border-radius:var(--radius-pill);background:var(--distribution-track);}
.ui-distribution-row__fill{display:block;width:clamp(0%,var(--ui-distribution-value,0%),100%);height:100%;border-radius:inherit;background:var(--distribution-fill);}
.ui-distribution-row--warning .ui-distribution-row__fill{background:var(--distribution-fill-warning);}
.ui-distribution-row__meta{grid-column:1/-1;color:var(--mut);font-size:var(--font-size-xs);}
@media(max-width:680px){.ui-breakdown__grid{grid-template-columns:1fr;}}

/* ============ Messwerte, Stufenskala & Statusmarker ============ */
.ui-meter{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
.ui-meter__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);}
.ui-meter__label{color:var(--txt);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);}
.ui-meter__value{color:var(--txt);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;}
.ui-meter__track{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--meter-track);}
.ui-meter__fill{display:block;width:clamp(0%,var(--ui-meter-value,0%),100%);height:100%;border-radius:inherit;
  background:var(--meter-fill-accent);}
.ui-meter--good .ui-meter__fill{background:var(--meter-fill-good);}
.ui-meter--warning .ui-meter__fill{background:var(--meter-fill-warning);}
.ui-meter--danger .ui-meter__fill{background:var(--meter-fill-danger);}
.ui-meter--neutral .ui-meter__fill{background:var(--meter-fill-neutral);}
.ui-meter__threshold{position:absolute;top:-3px;bottom:-3px;left:clamp(0%,var(--ui-meter-threshold,0%),100%);
  width:2px;border-radius:var(--radius-pill);background:var(--meter-marker);opacity:.65;transform:translateX(-1px);}
.ui-meter__meta{color:var(--mut);font-size:var(--font-size-xs);line-height:var(--line-normal);}
.ui-level-scale{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
.ui-level-scale__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);}
.ui-level-scale__label{color:var(--txt);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);}
.ui-level-scale__value{color:var(--txt);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);
  text-transform:capitalize;}
.ui-level-scale__axis{position:relative;height:8px;margin:0 5px;}
.ui-level-scale__line{position:absolute;top:3px;right:0;left:0;height:2px;border-radius:var(--radius-pill);
  background:var(--level-scale-track);}
.ui-level-scale__point{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--level-scale-point);box-shadow:0 0 0 2px var(--panel);transform:translateX(-50%);}
.ui-level-scale--mittel .ui-level-scale__point{left:50%;}
.ui-level-scale--hoch .ui-level-scale__point{left:100%;}
.ui-level-scale__labels{display:grid;grid-template-columns:repeat(3,1fr);color:var(--level-scale-label);
  font-size:var(--font-size-xs);}
.ui-level-scale__labels span:nth-child(2){text-align:center;}
.ui-level-scale__labels span:last-child{text-align:right;}
.ui-level-scale--niedrig .ui-level-scale__labels span:first-child,
.ui-level-scale--mittel .ui-level-scale__labels span:nth-child(2),
.ui-level-scale--hoch .ui-level-scale__labels span:last-child{color:var(--txt);font-weight:var(--font-weight-semibold);}
.ui-level-scale__meta{color:var(--mut);font-size:var(--font-size-xs);line-height:var(--line-normal);}
.ui-status-marker{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--txt);
  font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);}
.ui-status-marker__dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--status-marker-neutral);}
.ui-status-marker--good .ui-status-marker__dot{background:var(--status-marker-good);}
.ui-status-marker--warning .ui-status-marker__dot{background:var(--status-marker-warning);}
.ui-status-marker--danger .ui-status-marker__dot{background:var(--status-marker-danger);}
.ui-status-marker--meta{color:var(--mut);font-size:12px;font-weight:var(--font-weight-bold);}
.ui-sparkline__history .ui-chart-history-dot{width:9px;height:9px;}
.ui-sparkline__popover-copy,.ui-sparkline__popover-events{display:block;}
.ui-sparkline__popover-events{display:flex;flex-direction:column;gap:var(--space-4);max-height:220px;
  margin:var(--space-4) 0;overflow-y:auto;border-top:1px solid var(--popover-separator);}
.ui-sparkline__popover-event{display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4) 0 var(--space-5);border-bottom:1px solid var(--popover-separator);}
.ui-sparkline__popover-event:last-child{border-bottom:0;}
.ui-sparkline__popover-event>.ui-chart-event-symbol{margin-top:var(--space-1);}
.ui-sparkline__popover-event-copy{min-width:0;flex:1 1 auto;}
.ui-sparkline__popover-status{display:block;padding:var(--space-4) 0;color:var(--popover-muted);}
/* ============ Ende Sparkline-Ereignismarker ============ */


/* ============ Honigtopf (Spam-Schutz) ============
   Ein Feld, das Menschen nicht sehen und Formular-Bots blind ausfuellen. Bewusst NICHT
   `display:none`: Manche Bots ueberspringen genau das. Stattdessen aus dem sichtbaren Bereich
   geschoben — sichtbar fuer den Bot, unerreichbar fuer alle anderen. Zusammen mit `aria-hidden`
   und `tabindex="-1"` im Markup bleibt es auch Screenreadern und der Tab-Reihenfolge fern; ein
   Spam-Schutz, der Menschen mit Hilfsmitteln aussperrt, waere keiner. */
.kontakt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}