/* ISA Allstars - zentrales Stylesheet (seit 18.09.2026, vorher stand das CSS in jeder Seite).
   Aufbau: 1 Tokens (Skala, Farben, Schrift, Radien, Schatten) - 2 Grundregeln, die nur Tokens benutzen (Navigation, Suche,
   Tabellen, Formulare, Kacheln ...) - 3 Stile als Token-Ueberschreibungen plus wenige Strukturregeln: modern (Standard),
   office (Family Office), clean, institut, terminal, einfach - 4 Bewegung - 5 Mobil. "klassisch" gibt es seit 05.10.2026 nicht mehr.
   Die Datei wird mit Versions-Hash eingebunden (/static/allstars.css?v=...), daher lange cachebar. */

/* ---------------------------------------------------------------- 1 Tokens (Grundwerte; jeder Stil ueberschreibt sie) */
:root{
  /* Abstandsskala 4/8/12/16/24/32 - alle Luecken und Innenabstaende nehmen diese Stufen */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  /* Schriftskala: Fliesstext 15-16px, Tabelle 13.5-14px, Kleintext 12.5-13px, Ueberschriften deutlich gestuft */
  --t-tabelle:13.5px; --t-klein:12.5px; --h1:30px; --h2:20px; --h3:16px;
  --ctl-h:38px; --nav-h:56px;
  --akzent:#6B1E2D; --akzent-2:#8a2a3c; --akzent-weich:#FDF3F3; --rot:#6B1E2D; --rot-weich:#FDF3F3;
  --gruen:#2E6B45; --gruen-weich:#F1F7F3; --gelb:#C9A227; --grau:#9A9A9A;
  --text:#1A1A1A; --text-2:#444; --muted:#666; --muted-2:#777;
  --bg:#fff; --surface:#F4F2F2; --surface-2:#F8F7F7; --surface-3:#FCFBFB; --kopf:#EFEDED;
  --border:#E0E0E0; --border-2:#CCC; --border-3:#EEE; --border-stark:#999; --spur:#EFEDED;
  --nav-bg:#1A1A1A; --nav-text:#ddd; --nav-hover:#333; --nav-an:var(--akzent); --nav-an-text:#fff; --marke:#fff;
  --such-bg:rgba(255,255,255,.10); --such-border:rgba(255,255,255,.20); --such-text:#fff; --such-ph:rgba(255,255,255,.55); --such-fokus:rgba(255,255,255,.55);
  --font:15px/1.55 Georgia,'Times New Roman',serif; --font-ui:14px Georgia,serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:6px; --radius-s:4px; --radius-l:8px; --pille:999px;
  --schatten:none; --schatten-menu:0 10px 26px rgba(0,0,0,.28);
  --knopf-bg:var(--akzent); --knopf-text:#fff; --knopf-hover:var(--akzent-2);
  --tabelle-hover:#FAF8F8; --code-bg:#1A1A1A; --code-text:#DDD;
  --dauer:.16s;
}

/* ---------------------------------------------------------------- 2 Grundregeln */
*{box-sizing:border-box}
body{font:var(--font);color:var(--text);margin:0;background:var(--bg)}
/* Navigationsleiste: Marke links, Seitenlinks, rechts Suchpille und "More". Auf schmalen Schirmen (<=880px) zwei Zeilen, siehe Abschnitt 5 */
nav{background:var(--nav-bg);padding:0 var(--s5);display:flex;align-items:center;gap:var(--s2);min-height:var(--nav-h);position:relative}
nav .marke{color:var(--marke);font-weight:bold;font-size:17px;padding-right:var(--s4);white-space:nowrap}
nav .links{display:flex;align-items:stretch;align-self:stretch;gap:2px;min-width:0}
nav a{color:var(--nav-text);text-decoration:none;display:flex;align-items:center;padding:0 var(--s3);min-height:var(--nav-h);font-size:14.5px;white-space:nowrap}
nav a:hover{background:var(--nav-hover);color:#fff} nav a.an{background:var(--nav-an);color:var(--nav-an-text)}
nav details.mehr{position:relative;align-self:stretch;display:flex}
nav details.mehr summary{list-style:none;cursor:pointer;color:var(--nav-text);padding:0 var(--s3);display:flex;align-items:center;font-size:14.5px;white-space:nowrap;user-select:none}
nav details.mehr summary::-webkit-details-marker{display:none} nav details.mehr summary:hover,nav details.mehr[open] summary{background:var(--nav-hover);color:#fff}
nav details.mehr.an summary{background:var(--nav-an);color:var(--nav-an-text)}
nav .menu{position:absolute;top:100%;right:0;z-index:30;min-width:220px;display:flex;flex-direction:column;background:var(--nav-bg);padding:var(--s2) 0;border-radius:0 0 var(--radius-l) var(--radius-l);box-shadow:var(--schatten-menu)}
nav .menu a{padding:var(--s3) var(--s5);min-height:0}
/* Suche: eine Pille aus Lupe und Feld (Lupe im Markup hinter dem Feld, per order davor) */
nav form.suche{display:flex;align-items:center;margin:0 var(--s2) 0 auto;flex:0 1 240px;min-width:150px;height:36px;padding:0 var(--s3) 0 var(--s3);
  background:var(--such-bg);border:1px solid var(--such-border);border-radius:var(--pille);transition:border-color var(--dauer),box-shadow var(--dauer),background-color var(--dauer)}
nav form.suche:focus-within{border-color:var(--such-fokus);box-shadow:0 0 0 3px color-mix(in srgb,var(--such-fokus) 28%,transparent)}
nav form.suche input{flex:1;min-width:0;height:100%;min-height:0;margin:0;padding:0 0 0 var(--s2);border:0;border-radius:0;background:transparent;color:var(--such-text);font:14px/1 inherit;outline:none;-webkit-appearance:none;appearance:none;box-shadow:none}
nav form.suche input::placeholder{color:var(--such-ph);opacity:1}
nav form.suche input::-webkit-search-cancel-button{-webkit-appearance:none}
nav form.suche button{order:-1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--such-ph);cursor:pointer}
nav form.suche button:hover,nav form.suche:focus-within button{background:transparent;color:var(--such-text)}
main{max-width:1560px;margin:0 auto;padding:var(--s5)}
h1{font-size:var(--h1);line-height:1.2;margin:var(--s2) 0 var(--s2)} h2{font-size:var(--h2);line-height:1.3;margin:var(--s6) 0 var(--s3);border-bottom:1px solid var(--border);padding-bottom:var(--s2)}
h3{font-size:var(--h3);line-height:1.35;margin:var(--s5) 0 var(--s2)}
.stand{color:var(--muted-2);font-size:var(--t-klein);margin-bottom:var(--s4)}
a.zurueck{display:inline-block;margin:0 0 var(--s3);color:var(--text-2);text-decoration:none;font-size:14px;border:1px solid var(--border-2);border-radius:var(--pille);padding:var(--s1) var(--s4);background:var(--bg)}
a.zurueck:hover{color:var(--text);border-color:var(--border-stark)}
/* Kacheln: gleichmaessiges Raster statt ausfransender Reihe */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s3);margin:var(--s4) 0}
.k{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s4);min-width:0;box-shadow:var(--schatten)}
a.k{text-decoration:none;color:inherit;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;padding-right:30px}
a.k:hover,a.k:active{border-color:var(--border-stark);background:var(--kopf)} a.k.an{border-color:var(--akzent);background:var(--bg)}
a.k::after{content:"›";position:absolute;right:12px;top:9px;font-size:22px;line-height:1;color:var(--border-stark)}
details.klapp{margin:var(--s5) 0;border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s4);background:var(--surface-3)}
details.klapp summary{cursor:pointer;font-weight:bold;font-size:16px}
details.klapp[open] summary{margin-bottom:var(--s2)}
.k b{display:block;font-size:25px;line-height:1.2;color:var(--akzent)} .k span{font-size:var(--t-klein);color:var(--muted);display:block}
/* lange Kachelwerte (Schoenheitsfehler 10.10.2026: '193 · 82 · 103 · 257 · 164' lief aus der Kachel): umbrechen, kleiner, ab 600px doppelt breit */
.k.lang b,body.modern .k.lang b,body.clean .k.lang b,body.office .k.lang b,body.einfach .k.lang b{white-space:normal;overflow-wrap:anywhere;font-size:22px;line-height:1.25}
@media(min-width:600px){.kacheln .k.lang{grid-column:span 2}}
table{width:100%;border-collapse:collapse;font-size:var(--t-tabelle);margin:var(--s2) 0}
th{background:var(--kopf);text-align:left;padding:var(--s2) var(--s3);border-bottom:2px solid var(--border-stark);font-size:var(--t-klein);font-weight:600;line-height:1.35}
/* Kopfzeile bleibt beim Scrollen stehen (Thore, 09.10.2026; neu 10.10.2026): allstars_kopf.js blendet eine Kopie des thead als
   position:fixed-Kasten (.schwebe) ein, sobald der echte Kopf unter die klebende Navigation gescrollt ist - so funktioniert das auch
   im waagerecht scrollenden Rahmen .tw. --th-oben = Abstand von oben (Navigation, ggf. Abschnittsleiste). */
body{--th-oben:var(--abschn-oben,0px)} main:has(.abschn){--th-oben:calc(var(--abschn-oben,0px) + 58px)}
td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--border-3);vertical-align:top} td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.n{font-feature-settings:"tnum"}
/* Statuszellen (Punkt + Text) nicht in schmale Spalten quetschen: lieber scrollt die Tabelle in sich (.tw) als dass Zeilen fuenf Zeilen hoch werden */
td:has(>.dot:first-child:not(:last-child)){white-space:nowrap}
/* Status (Punkt + Satz) darf in 2 Zeilen umbrechen statt die Spalte auf 500 px zu dehnen; Listen-/Fonds-Punkte bleiben in einer Zeile */
td:has(>.dot:first-child:not(:last-child)):not(:has(>.dot[data-tip])){white-space:normal;min-width:150px;max-width:240px}
td>.tag{display:inline-block}
/* Sortierbare Spaltenkoepfe (Rangliste): sehen aus wie Koepfe, nicht wie Links; die aktive Spalte traegt den Pfeil */
th a.sortk{color:inherit;text-decoration:none;cursor:pointer} th a.sortk:hover{text-decoration:underline} th a.sortk.aktiv{font-weight:700}
th .sortpf{margin-left:var(--s1);font-size:9px;vertical-align:1px}
/* Tabellen per Klick sortieren (allstars_sortieren.js): Pfeil nur an der aktiven Spalte, beim Darueberfahren ein blasser Doppelpfeil */
th.sortbar{cursor:pointer;user-select:none} th.sortbar:hover{color:var(--text)}
th.sortbar.auf::after,th.sortbar.ab::after{font-size:9px;margin-left:var(--s1);vertical-align:1px;color:var(--akzent)} th.sortbar.auf::after{content:"▲"} th.sortbar.ab::after{content:"▼"}
th.sortbar:not(.auf):not(.ab):hover::after{content:"↕";font-size:11px;margin-left:var(--s1);opacity:.45}
tr:hover td{background:var(--tabelle-hover)} a.t{color:var(--akzent);text-decoration:none} a.t:hover{text-decoration:underline}
/* Verweise ohne eigene Klasse: Farbe aus dem Stil, sonst blieben sie im Browser-Blau stehen (auf dunklem Grund unlesbar) */
main a:not([class]),main a.t,footer a:not([class]){color:var(--akzent)}
/* Zustandsfarben als Klassen statt fest im Markup - so geht jeder Stil mit */
.pos{color:var(--gruen)} .neg{color:var(--rot)} .tag.pos{background:var(--gruen-weich)}
.devmarke{background:var(--gelb);color:#1A1A1A;font-size:11px;padding:1px 7px;border-radius:var(--pille);vertical-align:middle}
a.klein.btn.an{background:var(--text);color:var(--bg);border-color:var(--text)}
form.f{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4);display:flex;gap:var(--s3) var(--s4);align-items:flex-end;flex-wrap:wrap;margin:var(--s3) 0}
/* Filterfelder: gleich breite Spalten, Beschriftung ueber dem Feld, alles in einer Hoehe; Suchfeld doppelt breit */
form.f>div{flex:1 1 150px;max-width:230px;min-width:0}
form.f>div:has(input[name=suche]){flex:2 1 260px;max-width:380px}
form.f>div:has(select[name=sort]){flex:2 1 260px;max-width:360px}
form.f>div>select,form.f>div>input:not([type=checkbox]):not([type=radio]):not([type=file]){width:100%!important}
form.f label{font-size:var(--t-klein);line-height:1.3;color:var(--text-2);display:block;margin-bottom:var(--s1)}
form.f>button,form.f>a.btn{align-self:flex-end}
select,input{font:var(--font-ui);padding:var(--s2) var(--s3);border:1px solid var(--border-2);border-radius:var(--radius-s);background:var(--bg);color:var(--text)}
select,input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:var(--ctl-h)}
select:focus,input:focus{outline:2px solid color-mix(in srgb,var(--akzent) 45%,transparent);outline-offset:1px}
button,a.btn{font:var(--font-ui);padding:0 var(--s4);min-height:var(--ctl-h);background:var(--knopf-bg);color:var(--knopf-text);border:0;border-radius:var(--radius-s);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap;line-height:1.2}
button:hover,a.btn:hover{background:var(--knopf-hover)} button.grau,a.grau{background:var(--muted)} button.klein{padding:0 var(--s3);min-height:28px;font-size:var(--t-klein);background:var(--border-3);color:var(--text);border:1px solid var(--border-2)} button.klein.an{background:var(--text);color:var(--bg)}
.warn{background:var(--rot-weich);border-left:3px solid var(--rot);padding:var(--s3) var(--s4);margin:var(--s2) 0;font-size:var(--t-tabelle)}
.ok{background:var(--gruen-weich);border-left:3px solid var(--gruen);padding:var(--s3) var(--s4);margin:var(--s2) 0;font-size:var(--t-tabelle)}
.info{background:var(--surface);border-left:3px solid var(--grau);padding:var(--s3) var(--s4);margin:var(--s2) 0;font-size:var(--t-tabelle)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)} .grid31{display:grid;grid-template-columns:1.05fr 2fr;gap:var(--s5)}
@media(max-width:1100px){.grid2,.grid31{grid-template-columns:1fr}}
.bal{background:var(--spur);height:15px;position:relative;border-radius:2px} .bal i{display:block;height:100%;background:var(--grau);border-radius:2px}
.rl-stats{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0} .rl-stats div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;min-width:120px}
.rl-stats b{display:block;font-size:18px;color:var(--akzent)} .rl-stats span{font-size:12px;color:var(--muted)}
ol.rl{list-style:none;padding:0;margin:8px 0;max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-3)}
ol.rl li{display:flex;gap:10px;padding:5px 10px;border-bottom:1px solid var(--border-3);font-size:13.5px;align-items:baseline} ol.rl li:last-child{border-bottom:0}
ol.rl time{color:var(--muted-2);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:58px} ol.rl .ico{width:22px;text-align:center} ol.rl .txt{flex:1;word-break:break-word}
ol.rl li.notiz .txt{color:var(--text-2);font-style:italic} ol.rl li.fehler .txt{color:var(--rot)} ol.rl li.aktiv .txt{color:var(--muted-2)}
.rl-vorschau{border:1px dashed var(--border-2);border-radius:var(--radius);padding:8px 12px;margin-top:8px;max-height:280px;overflow:auto;background:var(--bg)}
.mini{display:inline-block;height:10px;background:var(--grau);vertical-align:middle;margin-left:6px} .mini.pos{background:var(--gruen)} .mini.neg{background:var(--rot)}
pre{background:var(--code-bg);color:var(--code-text);padding:12px;border-radius:5px;font-size:12px;overflow:auto;max-height:340px;white-space:pre-wrap}
.tag{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11.5px;background:var(--border-3);margin-right:4px}
details.hin{display:inline-block;margin:0;vertical-align:top}
details.hin summary{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11.5px;background:var(--border-3);cursor:pointer;list-style:none;white-space:nowrap}
details.hin summary::-webkit-details-marker{display:none}
details.hin[open] summary{background:var(--border-2)}
details.hin .txt{display:block;font-size:12.5px;color:var(--muted);max-width:360px;margin-top:4px;white-space:normal}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
/* Sofort-Tooltip an Listen-Punkten und Fonds-Quadraten (Thore, 09.10.2026: beim Hover muss man sehen, welche Liste / welcher Fonds);
   der Browser-title kommt erst nach einer Sekunde und auf dem iPad nie. Tippen (tabindex) zeigt ihn ebenfalls. */
.dot[data-tip]{position:relative;cursor:help;outline:none}
.dot[data-tip]:hover::after,.dot[data-tip]:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);background:var(--text);color:var(--bg);padding:4px 9px;border-radius:6px;font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;z-index:30;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dot[data-tip]:hover::before,.dot[data-tip]:focus::before{content:'';position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text);z-index:30}
.rand{font-size:13px;color:var(--text-2);margin:6px 0} .rand b{color:var(--text)}
.chart{position:relative;margin:6px 0 4px} .al-tip{position:absolute;z-index:5;background:var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-s);padding:6px 9px;font-size:12.5px;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.12);white-space:nowrap}
.u-legend{font:12px Georgia,serif} .tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}
.gl{font-size:12.5px;color:var(--muted)}
.qwrap{position:relative} .qtools{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;margin:6px 0}
.qtools label{cursor:pointer;white-space:nowrap} .qlegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:4px 0 8px;font-size:13.5px} .qlegend label{cursor:pointer}
.qtip{position:absolute;display:none;z-index:6;background:var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-s);padding:7px 10px;font-size:13px;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.12);max-width:360px}
.qfilter{font-size:13px;color:var(--akzent);min-height:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s3);margin:var(--s3) 0}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:var(--s4);cursor:pointer;box-shadow:var(--schatten)} .tile.an{outline:2px solid var(--akzent)}
.tile b{display:block;font-size:16px;margin-bottom:4px} .tile .n{font-size:26px;color:var(--akzent);display:block} .tile .gl{display:block}
.tile a{color:var(--akzent);text-decoration:none;font-weight:bold} .tile a:hover{text-decoration:underline}
.status-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);margin:var(--s4) 0}
.status-tiles a{text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:6px solid var(--border-stark);border-radius:var(--radius-l);padding:var(--s4);display:block;box-shadow:var(--schatten)}
.status-tiles a b{display:block;font-size:30px} .status-tiles a span{font-size:14px;color:var(--text-2)}
/* Chipzeilen (Listen, Fonds, Ansichten): umbrechende Reihe, Beschriftung in fester Breite, damit die Zeilen buendig starten */
.xswitch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)} .xswitch>.gl{min-width:68px}
.xswitch a{display:inline-flex;align-items:center;gap:6px;padding:var(--s1) var(--s3);min-height:32px;border:1px solid var(--border-2);border-radius:var(--radius-s);text-decoration:none;color:var(--text);margin:0;font-size:14px;line-height:1.2} .xswitch a.an{background:var(--text);color:var(--bg);border-color:var(--text)}
.xswitch a .dot{margin:0}
footer{max-width:1560px;margin:var(--s6) auto 0;padding:var(--s4) var(--s5);border-top:1px solid var(--border);color:var(--muted-2);font-size:12.5px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
footer form{display:inline} footer button{font-size:var(--t-klein);padding:0 var(--s3);min-height:28px;background:var(--border-3);color:var(--text);border:1px solid var(--border-2)} footer button.an{background:var(--text);color:var(--bg);border-color:var(--text)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
/* Breiter als der Rahmen: allstars_kopf.js setzt .breit und je nach Scrollstand .links / .rechts; der Rand blendet dann aus = "da ist mehr" */
.tw.rechts{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.tw.links{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.tw.links.rechts{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
/* Spaltenprioritaeten (data-prio, siehe tabelle() im Server): 3 erst ab 1200 px, 2 erst ab 900 px; Schalter "Show all columns" zeigt alles */
@media(max-width:1499px){body:not(.alle-spalten) [data-prio="3"]{display:none}}   /* bis 1499px: MacBook 13-15 Zoll (1280-1470) zeigt Prio 3 nur auf Wunsch, sonst scrollt das Ranking seitwaerts */
@media(max-width:899px){body:not(.alle-spalten) [data-prio="2"]{display:none}}
.spaltenschalter{display:none;align-items:center;gap:8px;margin:var(--s2) 0 0;font-size:var(--t-klein);color:var(--text-2);cursor:pointer;min-height:32px}
.spaltenschalter input{margin:0;width:18px;height:18px}
@media(max-width:1499px){.spaltenschalter{display:inline-flex}}
/* Schwebende Kopfzeile */
.schwebe{position:fixed;top:var(--th-oben,0px);z-index:12;overflow:hidden;visibility:hidden;pointer-events:none;box-shadow:0 2px 4px rgba(0,0,0,.12)}
.schwebe.an{visibility:visible;pointer-events:auto}
.schwebe table{margin:0;table-layout:fixed;box-shadow:none;border-radius:0;border-width:0;max-width:none}
@media(max-width:1100px){body[class] table{font-size:12.5px} body[class] td,body[class] th{padding:var(--s2) 8px}}
/* iPhone: Titelname bleibt beim Seitwaertsscrollen stehen */
@media(max-width:480px){
  .tw td.f1,.tw th.f1{position:sticky;left:0;z-index:2;background:var(--surface,#fff);box-shadow:1px 0 0 var(--border-2,#ddd);max-width:46vw}
  .tw th.f1{background:var(--kopf,#eee);z-index:3}
  .schwebe th.f1{position:static;box-shadow:none}
}
.login{max-width:380px;display:flex;flex-direction:column;gap:14px;margin:18px 0} .login label{display:block;font-size:13.5px;color:var(--text-2)}
.login input[type=text],.login input[type=password]{display:block;width:100%;font-size:16px;margin-top:4px}
.login label.check{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14.5px;cursor:pointer} .login label.check input{width:18px;height:18px;margin:0}
.login button{align-self:flex-start} footer form.abmelden{margin-left:auto} footer a.fusslink{color:var(--text-2)}
/* ---------------------------------------------------------------- 3a Einfach: grosse Schrift, Kacheln */
body.einfach{font-size:17px} body.einfach h1{font-size:31px} body.einfach h2{font-size:22px} body.einfach .k b{font-size:32px} body.einfach .k span{font-size:14.5px}
body.einfach table{font-size:15.5px} body.einfach td,body.einfach th{padding:9px 10px} body.einfach th{font-size:14px}
body.einfach button,body.einfach a.btn{font-size:16px;padding:9px 18px} body.einfach button.klein{font-size:14px;padding:5px 12px}
body.einfach{--nav-h:62px} body.einfach nav a{font-size:16.5px;padding:0 var(--s4)} body.einfach nav details.mehr summary{font-size:16.5px;padding:0 var(--s4)} body.einfach nav form.suche{height:42px} body.einfach nav form.suche input{font-size:16px} body.einfach .gl{font-size:14px} body.einfach .stand{font-size:14px}
body.einfach .qtools,body.einfach .qlegend{font-size:15px} body.einfach select,body.einfach input{font-size:16px}


/* ---------------------------------------------------------------- 3b Modern (Standard): ruhig, viel Weissraum, Hairlines, Pillen, Systemschrift, ein Akzent (Tintenblau) */
body.modern{
  --font:16px/1.6 -apple-system,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif; --font-ui:15px inherit;
  --h1:32px; --h2:21px; --h3:16px; --t-tabelle:14px; --ctl-h:40px; --nav-h:60px;
  --akzent:#2D4FD0; --akzent-2:#2441AD; --akzent-weich:#EEF2FD; --gelb:#B7791F;
  --bg:#F7F7F9; --text:#111114; --muted:#6B6B73; --muted-2:#6B6B73; --text-2:#3A3A40;
  --surface:#fff; --surface-2:#fff; --surface-3:#fff; --kopf:#fff; --border:#E6E6EB; --border-2:#D5D5DC; --border-3:#F0F0F3; --border-stark:#B8B8C2;
  --nav-bg:rgba(255,255,255,.88); --nav-text:#3A3A40; --nav-hover:transparent; --nav-an:transparent; --nav-an-text:var(--akzent); --marke:#111114;
  --such-bg:#F0F0F4; --such-border:transparent; --such-text:#111114; --such-ph:#8A8A93; --such-fokus:var(--akzent);
  --radius:14px; --radius-s:10px; --radius-l:14px; --schatten:0 1px 2px rgba(17,17,20,.03),0 8px 28px rgba(17,17,20,.04); --schatten-menu:0 12px 32px rgba(17,17,20,.12);
  --knopf-bg:#111114; --knopf-hover:#33333A; --tabelle-hover:#F5F6FA; --code-bg:#111114;
  letter-spacing:-.004em}
body.modern nav{-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;padding:0 var(--s6);gap:var(--s3)}
body.modern nav a,body.modern nav details.mehr summary{color:var(--nav-text);font-size:15px;font-weight:500;padding:0 14px;position:relative}
body.modern nav .links{gap:var(--s1)}
body.modern nav a:hover,body.modern nav details.mehr summary:hover,body.modern nav details.mehr[open] summary{background:transparent;color:#111114}
body.modern nav a.an,body.modern nav details.mehr.an summary{background:transparent;color:var(--akzent);box-shadow:inset 0 -2px 0 var(--akzent)}
body.modern nav .marke{color:#111114;font-weight:650;font-size:17px;letter-spacing:-.01em;padding-right:var(--s5)}
body.modern nav .menu{background:#fff;border:1px solid var(--border);border-radius:var(--radius-s);padding:var(--s2);margin-top:-4px;min-width:200px}
body.modern nav .menu a{color:var(--nav-text);padding:10px 14px;border-radius:8px;box-shadow:none} body.modern nav .menu a:hover{background:#F3F4F8} body.modern nav .menu a.an{color:var(--akzent);background:var(--akzent-weich)}
body.modern main{max-width:1360px;padding:var(--s6) var(--s6) var(--s5)}
body.modern h1{font-weight:650;letter-spacing:-.022em;margin:var(--s2) 0 var(--s2)} body.modern h2{font-weight:600;letter-spacing:-.012em;border:0;padding:0;margin:44px 0 var(--s4)} body.modern h3{font-weight:600;margin:var(--s5) 0 var(--s2)}
body.modern .stand{font-size:14px;margin-bottom:var(--s5)} body.modern .gl{font-size:13px}
body.modern .info,body.modern .ok,body.modern .warn{padding:var(--s4) var(--s5);border:1px solid var(--border);border-left-width:1px;border-radius:var(--radius);box-shadow:var(--schatten);background:#fff;font-size:14px}
body.modern .warn{border-color:#B4233C44;background:#FFFBFB} body.modern .ok{border-color:#2E6B4544} body.modern .info{border-color:var(--border)}
body.modern .kacheln{gap:var(--s4);margin:var(--s5) 0}
body.modern .k{padding:var(--s5)} body.modern .k b{font-weight:600;font-size:30px;letter-spacing:-.02em;color:var(--text)} body.modern .k span{font-size:13.5px;margin-top:var(--s1)}
body.modern a.k.an{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)} body.modern a.k:hover{background:#fff;border-color:var(--border-stark)}
body.modern .status-tiles{gap:var(--s4)} body.modern .status-tiles a{border-left:4px solid #999;padding:var(--s5)} body.modern .status-tiles a b{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.15} body.modern .status-tiles a span{font-size:14px}
body.modern .tiles{gap:var(--s4)}
body.modern .tile{padding:var(--s5)} body.modern .tile b{font-weight:600} body.modern .tile .n{font-weight:600;letter-spacing:-.02em;color:var(--text)} body.modern .tile.an{outline:2px solid var(--akzent);outline-offset:-1px}
body.modern table{background:#fff;border:1px solid var(--border);border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:clip;box-shadow:var(--schatten)}
body.modern th{color:var(--muted);font-weight:500;font-size:12.5px;border-bottom:1px solid var(--border);padding:var(--s3) var(--s4);background:#FCFCFD}
body.modern td{padding:var(--s3) var(--s4)} body.modern tbody tr:last-child td{border-bottom:0}
body.modern th.sortbar:hover{color:var(--text)}
body.modern a.t{color:var(--text);font-weight:500} body.modern a.t:hover{color:var(--akzent);text-decoration:none}
body.modern button,body.modern a.btn{border-radius:var(--pille);font:500 15px inherit;padding:0 var(--s5)}
body.modern button.grau,body.modern a.grau{background:#fff;color:var(--text);border:1px solid var(--border-2)} body.modern button.grau:hover,body.modern a.grau:hover{background:#F3F4F8}
body.modern button.klein{background:#fff;border:1px solid var(--border-2);color:var(--text);border-radius:var(--pille);padding:0 var(--s3);min-height:30px;font-size:13.5px} body.modern button.klein.an{background:#111114;color:#fff;border-color:#111114}
body.modern a.klein.btn{border-radius:var(--pille);padding:0 var(--s3);min-height:30px;font-size:13.5px;background:#fff;color:var(--text);border:1px solid var(--border-2)}
body.modern form.f{padding:var(--s5);box-shadow:var(--schatten);background:#fff;gap:var(--s4) var(--s4)} body.modern form.f label{font-size:12.5px;color:var(--muted);font-weight:500}
body.modern select,body.modern input{padding:0 var(--s3);border-color:var(--border-2);background:#fff}
body.modern select{padding-right:var(--s2)}
body.modern .xswitch a{border-radius:var(--pille);border:1px solid var(--border-2);background:#fff;font-size:14px;padding:0 14px;min-height:34px} body.modern .xswitch a.an{background:#111114;border-color:#111114;color:#fff}
body.modern .xswitch a:hover:not(.an){border-color:var(--border-stark)}
body.modern .tag{background:#F0F0F4;color:var(--text-2);border-radius:var(--pille);padding:2px 10px} body.modern .dot{width:9px;height:9px}
body.modern details.klapp{padding:var(--s4) var(--s5);box-shadow:var(--schatten)} body.modern details.klapp summary{font-weight:600}
body.modern .qtools,body.modern .qlegend{font-size:14px;color:var(--text-2)} body.modern .qtip,body.modern .al-tip{border-radius:12px;border-color:var(--border);box-shadow:0 8px 24px rgba(17,17,20,.10);font-size:13px}
body.modern .qwrap svg{background:#fff;border:1px solid var(--border);border-radius:var(--radius)} body.modern svg text{font-family:-apple-system,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif}
body.modern .chart{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s2) var(--s1)} body.modern .u-legend{font:13px inherit;color:var(--text-2)}
body.modern pre{border-radius:12px} body.modern .bal{border-radius:var(--pille)} body.modern .bal i{border-radius:var(--pille);background:var(--akzent)}
body.modern footer{padding:var(--s4) var(--s6)} body.modern footer button{border-radius:var(--pille)}
body.modern .mini{border-radius:var(--pille)} body.modern .grid2,body.modern .grid31{gap:var(--s6)}
body.modern .rl-stats div{background:#fff}

/* ---------------------------------------------------------------- 3c Clean: klar und ruhig, ohne Effekte - Inter/System, neutrale Grautoene, wenig Radius, kein Blur */
body.clean{
  --font:15.5px/1.6 Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-ui:14.5px inherit;
  --akzent:#7A1F32; --akzent-2:#5E1726; --akzent-weich:#FBF1F3;
  --bg:#FFFFFF; --text:#0F172A; --text-2:#334155; --muted:#64748B; --muted-2:#64748B;
  --surface:#F8FAFC; --surface-2:#F8FAFC; --surface-3:#FFFFFF; --kopf:#F1F5F9; --border:#E2E8F0; --border-2:#CBD5E1; --border-3:#EEF2F7; --border-stark:#94A3B8;
  --nav-bg:#FFFFFF; --nav-text:#334155; --nav-hover:#F1F5F9; --nav-an:#F1F5F9; --nav-an-text:#0F172A; --marke:#0F172A;
  --such-bg:#F1F5F9; --such-border:transparent; --such-text:#0F172A; --such-ph:#94A3B8; --such-fokus:#0F172A;
  --radius:10px; --radius-s:8px; --radius-l:10px; --schatten:none; --schatten-menu:0 12px 32px rgba(15,23,42,.12);
  --knopf-bg:#0F172A; --knopf-hover:#1E293B; --tabelle-hover:#F8FAFC; --code-bg:#0F172A; --code-text:#E2E8F0;
  --gruen:#15803D; --gruen-weich:#F0FDF4; --gelb:#B45309;
  font-feature-settings:"cv11","ss01","tnum"}
body.clean nav{border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;padding:0 var(--s6);gap:var(--s1)} body.clean nav .links{align-items:center}
body.clean nav a,body.clean nav details.mehr summary{font-size:14px;font-weight:500;padding:0 12px;min-height:40px;align-self:center;border-radius:8px;margin:0}
body.clean nav a:hover,body.clean nav details.mehr summary:hover,body.clean nav details.mehr[open] summary{color:#0F172A}
body.clean nav a.an,body.clean nav details.mehr.an summary{font-weight:600}
body.clean nav .marke{font-weight:700;letter-spacing:-.01em;padding-right:22px}
body.clean nav .menu{background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px;margin-top:2px} body.clean nav .menu a{border-radius:8px;margin:0}
body.clean main{max-width:1320px;padding:30px 28px}
body.clean h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:4px 0 6px} body.clean h2{font-size:17px;font-weight:600;border:0;padding:0;margin:34px 0 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
body.clean h3{font-weight:600}
body.clean .stand{font-size:13.5px;margin-bottom:16px}
body.clean .k,body.clean .tile,body.clean .status-tiles a,body.clean form.f,body.clean .info,body.clean .ok,body.clean .warn{background:#fff;border:1px solid var(--border)}
body.clean .k{padding:16px 18px} body.clean .k b{font-weight:700;font-size:28px;letter-spacing:-.02em;color:var(--text)} body.clean .k span{font-size:13px}
body.clean a.k.an{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
body.clean .status-tiles a{border-left-width:4px;padding:16px 18px} body.clean .status-tiles a b{font-size:30px;font-weight:700;letter-spacing:-.02em}
body.clean .tile .n{color:var(--text);font-weight:700} body.clean .tile.an{outline:2px solid var(--text)}
body.clean table{font-size:14px;border:1px solid var(--border);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:clip;background:#fff}
body.clean th{background:var(--kopf);color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--border)}
body.clean td{padding:10px 12px} body.clean tbody tr:nth-child(even) td{background:#FCFDFE} body.clean tbody tr:last-child td{border-bottom:0}
body.clean a.t{color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px} body.clean a.t:hover{text-decoration-color:var(--text)}
body.clean button,body.clean a.btn{font:500 14px inherit;padding:8px 14px;border-radius:8px} body.clean button.grau,body.clean a.grau{background:#fff;color:var(--text);border:1px solid var(--border-2)} body.clean button.grau:hover,body.clean a.grau:hover{background:var(--surface)}
body.clean button.klein{background:#fff;border:1px solid var(--border-2);border-radius:6px;font-size:13px} body.clean button.klein.an{background:var(--text);color:#fff;border-color:var(--text)}
body.clean select,body.clean input{padding:7px 10px;border-radius:8px}
body.clean .xswitch a{border-radius:8px;border:1px solid var(--border-2);background:#fff;font-size:13.5px;padding:6px 12px} body.clean .xswitch a.an{background:var(--text);border-color:var(--text);color:#fff}
body.clean .tag{background:var(--kopf);border-radius:6px} body.clean .info,body.clean .ok,body.clean .warn{border-left-width:3px;border-radius:10px;padding:12px 16px}
body.clean details.klapp{background:#fff} body.clean details.klapp summary{font-size:15px}
body.clean .qwrap svg,body.clean .chart{background:#fff;border:1px solid var(--border);border-radius:10px} body.clean .chart{padding:8px 6px 2px}
body.clean svg text{font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body.clean .u-legend{font:12.5px inherit;color:var(--text-2)}
body.clean footer{padding:16px 28px} body.clean footer button{border-radius:6px}
body.clean pre{border-radius:8px}

/* ---------------------------------------------------------------- 3e Institutional: Finanzwelt, datenorientiert - Navy, kuehle Grautoene,
   kompakte Tabellen mit Tabellenziffern, Abschnittstitel als kleine Versalien-Etiketten, kaum Rundung, keine Effekte */
body.institut{
  --font:14.5px/1.5 Inter,"Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-ui:13.5px inherit;
  --akzent:#0B3D91; --akzent-2:#082E6E; --akzent-weich:#EEF3FB;
  --bg:#F5F7FA; --text:#101828; --text-2:#344054; --muted:#667085; --muted-2:#667085;
  --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF; --kopf:#F2F4F7; --spur:#EAECF0;
  --border:#E4E7EC; --border-2:#D0D5DD; --border-3:#EAECF0; --border-stark:#98A2B3;
  --nav-bg:#0A2540; --nav-text:#C7D2E0; --nav-hover:#12355B; --nav-an:#12355B; --nav-an-text:#FFFFFF; --marke:#FFFFFF;
  --radius:4px; --radius-s:3px; --radius-l:6px; --schatten:0 1px 2px rgba(16,24,40,.05); --schatten-menu:0 12px 28px rgba(10,37,64,.28);
  --knopf-bg:#0B3D91; --knopf-hover:#082E6E; --tabelle-hover:#F0F5FF; --code-bg:#0A2540; --code-text:#E4E7EC;
  font-feature-settings:"tnum","cv11"}
body.institut nav{position:sticky;top:0;z-index:20;padding:0 24px;border-bottom:2px solid #5B9BFF}
body.institut nav a,body.institut nav details.mehr summary{font-size:13px;font-weight:500;letter-spacing:.02em;padding:0 14px}
body.institut nav a.an,body.institut nav details.mehr.an summary{box-shadow:inset 0 -3px 0 #5B9BFF}
body.institut nav .marke{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13.5px;padding-right:24px}
body.institut main{max-width:1640px;padding:22px 24px}
body.institut h1{font-size:23px;font-weight:600;letter-spacing:-.01em;margin:2px 0 4px}
body.institut h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);border-bottom:1px solid var(--border-2);padding-bottom:6px;margin:30px 0 10px}
body.institut h3{font-size:14px;font-weight:600}
body.institut .stand{font-size:12.5px;margin-bottom:14px}
body.institut .k{padding:12px 14px;border-left:3px solid var(--akzent)} body.institut .k b{font-size:24px;font-weight:600;color:var(--text);letter-spacing:-.01em}
body.institut .k span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
body.institut a.k.an{background:var(--akzent-weich);border-color:var(--akzent)}
body.institut .status-tiles a{border-left-width:4px;padding:12px 14px} body.institut .status-tiles a b{font-size:26px;font-weight:600}
body.institut .status-tiles a span{font-size:12.5px} body.institut .tile .n{color:var(--text);font-weight:600} body.institut .tile.an{outline:2px solid var(--akzent)}
body.institut table{font-size:13px;background:#fff;border:1px solid var(--border)}
body.institut th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);padding:8px 10px;border-bottom:1px solid var(--border-2)}
body.institut td{padding:6px 10px} body.institut tbody tr:nth-child(even) td{background:#FAFBFC} body.institut tbody tr:hover td{background:var(--tabelle-hover)}
body.institut a.t{color:var(--akzent);font-weight:500}
body.institut button,body.institut a.btn{font:500 13.5px inherit;padding:7px 14px} body.institut button.grau,body.institut a.grau{background:#fff;color:var(--text-2);border:1px solid var(--border-2)}
body.institut button.grau:hover,body.institut a.grau:hover{background:var(--kopf)}
body.institut button.klein{background:#fff;border:1px solid var(--border-2)} body.institut button.klein.an,body.institut a.klein.btn.an{background:var(--akzent);color:#fff;border-color:var(--akzent)}
body.institut a.klein.btn{background:#fff;color:var(--text-2);border:1px solid var(--border-2);padding:4px 10px;font-size:12.5px}
body.institut .xswitch a{font-size:12.5px;padding:5px 11px;background:#fff} body.institut .xswitch a.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
body.institut .info,body.institut .ok,body.institut .warn{background:#fff;border:1px solid var(--border);border-left-width:3px}
body.institut form.f{box-shadow:var(--schatten)} body.institut form.f label{text-transform:uppercase;font-size:11px;letter-spacing:.05em}
body.institut .tag{background:var(--kopf);border-radius:3px} body.institut details.klapp summary{font-size:14px}
body.institut .qwrap svg,body.institut .chart{background:#fff;border:1px solid var(--border)} body.institut .chart{padding:8px 6px 2px}
body.institut svg text{font-family:Inter,"Helvetica Neue",-apple-system,"Segoe UI",Arial,sans-serif} body.institut .u-legend{font:12px inherit;color:var(--text-2)}
body.institut footer{padding:14px 24px} body.institut .bal i{background:var(--akzent)}
body.institut .fm-hero{background:linear-gradient(135deg,#0A2540 0%,#12355B 100%)}

/* ---------------------------------------------------------------- 3f Family Office: Privatbank - warmes Papier, Bordeaux, Gold;
   Ueberschriften in Serifenschrift, Zahlen und Tabellen in ruhiger Grotesk, feine Haarlinien, grosszuegige Abstaende, kaum Rundung */
body.office{
  --font:16px/1.65 "Avenir Next","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-ui:14.5px inherit;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; --gold:#A8894A; --gold-hell:#E4D5B2;
  --h1:36px; --h2:24px; --h3:18px; --t-tabelle:14px; --ctl-h:40px; --nav-h:64px;
  --akzent:#6E2233; --akzent-2:#561A28; --akzent-weich:#F6ECEA; --rot:#9B2C2C; --rot-weich:#FBF0EC; --gruen:#3B6A4A; --gruen-weich:#F0F5EE;
  --bg:#F6F1E7; --text:#2A211C; --text-2:#4A3F37; --muted:#85796C; --muted-2:#85796C;
  --surface:#FFFCF6; --surface-2:#FFFCF6; --surface-3:#FFFCF6; --kopf:#F1EADC; --spur:#EADFCB;
  --border:#E4DAC8; --border-2:#D3C6AD; --border-3:#EEE6D6; --border-stark:#A8894A;
  --nav-bg:#FBF7EE; --nav-text:#4A3F37; --nav-hover:transparent; --nav-an:transparent; --nav-an-text:var(--akzent); --marke:var(--akzent);
  --such-bg:#fff; --such-border:var(--border-2); --such-text:#2A211C; --such-ph:#9A8E7E; --such-fokus:var(--gold);
  --radius:3px; --radius-s:3px; --radius-l:4px; --schatten:0 1px 0 rgba(42,33,28,.04); --schatten-menu:0 14px 32px rgba(42,33,28,.18);
  --knopf-bg:var(--akzent); --knopf-hover:var(--akzent-2); --tabelle-hover:#F7F1E4; --code-bg:#2A211C; --code-text:#EADFCB;
  font-feature-settings:"tnum"}
body.office nav{position:sticky;top:0;z-index:20;padding:0 var(--s6);border-bottom:1px solid var(--gold);gap:var(--s3)}
body.office nav a,body.office nav details.mehr summary{font-size:14px;font-weight:500;letter-spacing:.03em;padding:0 var(--s4);position:relative}
body.office nav a:hover,body.office nav details.mehr summary:hover,body.office nav details.mehr[open] summary{background:transparent;color:var(--akzent)}
body.office nav a.an,body.office nav details.mehr.an summary{background:transparent;color:var(--akzent);box-shadow:inset 0 -2px 0 var(--gold)}
body.office nav .marke{font-family:var(--serif);font-weight:normal;font-size:22px;letter-spacing:.03em;padding-right:var(--s6);color:var(--akzent)}
body.office nav .menu{background:var(--surface);border:1px solid var(--border-2);border-top:2px solid var(--gold);border-radius:0;padding:var(--s2) 0}
body.office nav .menu a{padding:var(--s3) var(--s5);color:var(--text-2);box-shadow:none} body.office nav .menu a:hover{background:var(--kopf)} body.office nav .menu a.an{color:var(--akzent);box-shadow:inset 2px 0 0 var(--gold)}
body.office nav form.suche{border-radius:var(--pille);border-color:var(--border-2)}
body.office main{max-width:1440px;padding:var(--s6) var(--s6) var(--s5)}
body.office h1{font-family:var(--serif);font-weight:normal;letter-spacing:-.005em;margin:var(--s2) 0 var(--s2)}
body.office h2{font-family:var(--serif);font-weight:normal;border:0;padding:0 0 var(--s3);margin:48px 0 var(--s4);position:relative}
body.office h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;background:var(--gold)}
body.office h3{font-family:var(--serif);font-weight:normal;margin:var(--s5) 0 var(--s2)}
body.office .stand{font-size:13.5px;margin-bottom:var(--s5);font-style:italic}
body.office .kacheln{gap:var(--s4);margin:var(--s5) 0}
body.office .k{padding:var(--s4) var(--s5);border-top:2px solid var(--gold)} body.office .k b{font-family:var(--serif);font-weight:normal;font-size:28px;color:var(--akzent);white-space:nowrap}
body.office .k span{font-size:13px;margin-top:var(--s1)} body.office a.k.an{background:var(--akzent-weich);border-color:var(--akzent);border-top-color:var(--gold)}
body.office a.k::after{color:var(--gold)} body.office a.k:hover{background:var(--kopf)}
body.office .status-tiles{gap:var(--s4)} body.office .status-tiles a{padding:var(--s4) var(--s5);border-left-width:3px}
body.office .status-tiles a b{font-family:var(--serif);font-weight:normal;font-size:34px;line-height:1.15} body.office .status-tiles a span{font-size:14px}
body.office .tiles{gap:var(--s4)}
body.office .tile{padding:var(--s4) var(--s5);border-top:2px solid var(--gold)} body.office .tile b{font-family:var(--serif);font-weight:normal;font-size:18px} body.office .tile .n{font-family:var(--serif);color:var(--akzent)}
body.office .tile.an{outline:1px solid var(--gold);outline-offset:-1px}
body.office table{background:var(--surface);border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2)}
body.office th{background:var(--surface);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:var(--s3) var(--s3);border-bottom:1px solid var(--gold)}
body.office td{padding:var(--s3) var(--s3)} body.office a.t{color:var(--akzent);font-weight:500;border-bottom:1px solid transparent} body.office a.t:hover{text-decoration:none;border-bottom-color:var(--gold)}
body.office th.sortbar.auf::after,body.office th.sortbar.ab::after{color:var(--gold)}
body.office button,body.office a.btn{font:500 14px inherit;letter-spacing:.04em;padding:0 var(--s5)}
body.office button.grau,body.office a.grau{background:transparent;color:var(--akzent);border:1px solid var(--border-2)} body.office button.grau:hover,body.office a.grau:hover{background:var(--kopf);border-color:var(--gold)}
body.office button.klein{background:transparent;border:1px solid var(--border-2);padding:0 var(--s3);font-size:13px;letter-spacing:.02em} body.office button.klein.an,body.office a.klein.btn.an{background:var(--akzent);color:#fff;border-color:var(--akzent)}
body.office a.klein.btn{background:transparent;color:var(--akzent);border:1px solid var(--border-2);padding:0 var(--s3);font-size:13px}
body.office select,body.office input{padding:0 var(--s3);background:#fff;border-color:var(--border-2)} body.office select{padding-right:var(--s2)}
body.office select:focus,body.office input:focus{outline:1px solid var(--gold);outline-offset:0;border-color:var(--gold)}
body.office .xswitch a{background:transparent;font-size:13.5px;padding:0 14px;min-height:34px;border-radius:var(--pille);letter-spacing:.01em} body.office .xswitch a.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
body.office .xswitch a:hover:not(.an){border-color:var(--gold)}
body.office .info,body.office .ok,body.office .warn{background:var(--surface);border:1px solid var(--border);border-left-width:2px;padding:var(--s4) var(--s5)}
body.office .info{border-left-color:var(--gold)} body.office form.f{padding:var(--s5)} body.office form.f label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
body.office .tag{background:var(--kopf);border-radius:2px;padding:2px 8px} body.office details.klapp{padding:var(--s4) var(--s5)} body.office details.klapp summary{font-family:var(--serif);font-weight:normal;font-size:18px}
body.office .qwrap svg,body.office .chart{background:var(--surface);border:1px solid var(--border)} body.office .chart{padding:var(--s3) var(--s2) var(--s1)}
body.office .u-legend{font:13px inherit;color:var(--text-2)} body.office .bal i{background:var(--akzent)}
body.office footer{padding:var(--s5) var(--s6);border-top:1px solid var(--border-2)} body.office footer button{background:transparent}
body.office .gl{font-size:13px}
body.office .fm-hero{background:linear-gradient(135deg,#6E2233 0%,#3E131E 100%);box-shadow:0 14px 34px rgba(62,19,30,.20)} body.office .fm-hero h2::after{display:none}
body.office .fm-hero h2{font-family:var(--serif);font-weight:normal;font-size:26px} body.office .fm-kpi b{font-family:var(--serif);font-weight:normal}
body.office .ok-kpi b{font-family:var(--serif);font-weight:normal} body.office .fm-kpi{border-color:rgba(168,137,74,.35)} body.office .tl-h b{font-family:var(--serif);font-weight:normal;font-size:21px}
body.office .tl-q:before{background:var(--gold);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--border-2)} body.office .tl:before{background:linear-gradient(var(--gold),var(--border))}
body.office .fc .fh b{font-family:var(--serif);font-weight:normal;font-size:17px}

/* ---------------------------------------------------------------- 3d Terminal: Datenportal der 80er - Schwarz, Bernstein, Monospace, keine Rundungen, dichte Raster */
body.terminal{
  --font:13.5px/1.5 "IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --font-ui:13px inherit; --mono:inherit;
  --akzent:#FFB000; --akzent-2:#FFC94D; --akzent-weich:#2A1F00;
  --gruen:#4AF626; --gruen-weich:#0B1F0B; --gelb:#FFB000; --grau:#6B6B5A;
  --bg:#050505; --text:#FFB000; --text-2:#E0A020; --muted:#9A7A2A; --muted-2:#9A7A2A;
  --surface:#0E0E0C; --surface-2:#0E0E0C; --surface-3:#0A0A09; --kopf:#1A1600; --border:#3A3000; --border-2:#5A4A00; --border-3:#241E00; --border-stark:#FFB000;
  --nav-bg:#000; --nav-text:#FFB000; --nav-hover:#1A1600; --nav-an:#FFB000; --nav-an-text:#000; --marke:#FFB000;
  --radius:0; --radius-s:0; --radius-l:0; --pille:0; --schatten:none; --schatten-menu:0 0 0 1px #FFB000;
  --knopf-bg:#000; --knopf-text:#FFB000; --knopf-hover:#1A1600; --tabelle-hover:#1A1600; --code-bg:#000; --code-text:#FFB000;
  text-shadow:0 0 .35px rgba(255,176,0,.35)}
body.terminal nav{border-bottom:1px solid var(--akzent);padding:0 14px}
body.terminal{--nav-h:44px;--such-bg:#000;--such-border:#FFB000;--such-text:#FFB000;--such-ph:#9A6B00;--such-fokus:#FFB000} body.terminal nav a,body.terminal nav details.mehr summary{text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;padding:0 12px} body.terminal nav form.suche,body.terminal nav form.suche input{border-radius:0;font-family:var(--mono)}
body.terminal nav .marke{text-transform:uppercase;letter-spacing:.14em;font-size:14px} body.terminal nav .marke::before{content:"■ "}
body.terminal nav .menu{border:1px solid var(--akzent);border-top:0}
body.terminal main{max-width:1600px;padding:16px 14px}
body.terminal h1{font-size:20px;text-transform:uppercase;letter-spacing:.12em;margin:4px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--akzent)}
body.terminal h1::after{content:"_";animation:blink 1.1s steps(1) infinite;margin-left:2px}
body.terminal h2{font-size:14px;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px dashed var(--border-2);margin:22px 0 8px;padding-bottom:3px}
body.terminal h2::before{content:"> "} body.terminal h3{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
body.terminal .stand{color:var(--muted)} body.terminal .gl{color:var(--muted)}
body.terminal .k,body.terminal .tile,body.terminal .status-tiles a,body.terminal .info,body.terminal .ok,body.terminal .warn,body.terminal form.f,body.terminal details.klapp{background:var(--surface);border:1px solid var(--border-2)}
body.terminal .k b{color:var(--akzent);font-size:24px} body.terminal a.k.an{border-color:var(--akzent);background:var(--kopf)} body.terminal a.k::after{color:var(--akzent)}
body.terminal .status-tiles a b{font-size:26px} body.terminal .tile .n{color:var(--akzent)} body.terminal .tile.an{outline:1px solid var(--akzent)}
body.terminal table{font-size:12.5px;border:1px solid var(--border-2)}
body.terminal th{background:var(--kopf);color:var(--akzent);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;border-bottom:1px solid var(--akzent);padding:5px 8px}
body.terminal td{padding:4px 8px;border-bottom:1px solid var(--border-3)} body.terminal tr:hover td{background:var(--kopf);color:#FFD466}
body.terminal a.t{color:var(--akzent);text-decoration:none;border-bottom:1px dotted var(--border-2)} body.terminal a.t:hover{background:var(--akzent);color:#000;border-bottom-color:transparent}
body.terminal button,body.terminal a.btn{border:1px solid var(--akzent);text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:6px 12px}
body.terminal button:hover,body.terminal a.btn:hover{background:var(--akzent);color:#000} body.terminal button.grau,body.terminal a.grau{background:#000;color:var(--muted);border-color:var(--border-2)}
body.terminal button.klein{background:#000;color:var(--akzent);border:1px solid var(--border-2)} body.terminal button.klein.an{background:var(--akzent);color:#000;border-color:var(--akzent)}
body.terminal select,body.terminal input{background:#000;color:var(--akzent);border:1px solid var(--border-2)} body.terminal select:focus,body.terminal input:focus{outline:1px solid var(--akzent)}
body.terminal .xswitch a{border:1px solid var(--border-2);color:var(--akzent);text-transform:uppercase;font-size:12px;letter-spacing:.06em} body.terminal .xswitch a.an{background:var(--akzent);color:#000;border-color:var(--akzent)}
body.terminal .info{border-left:3px solid var(--muted)} body.terminal .warn{border-left-color:#FF5A36;color:#FF8A6A} body.terminal .ok{border-left-color:var(--gruen);color:var(--gruen)}
body.terminal .tag{background:var(--kopf);color:var(--akzent);border:1px solid var(--border-2);border-radius:0}
body.terminal details.hin summary{background:var(--kopf);color:var(--akzent);border-radius:0} body.terminal details.hin[open] summary{background:var(--border-2)}
body.terminal .bal{background:var(--border-3)} body.terminal .bal i{background:var(--akzent)}
body.terminal .mini.pos{background:var(--gruen)} body.terminal .mini.neg{background:#FF5A36}
body.terminal .qwrap svg,body.terminal .chart canvas{filter:invert(1) hue-rotate(180deg) saturate(1.2)} body.terminal .qwrap svg{border:1px solid var(--border-2)}
body.terminal .qtip,body.terminal .al-tip{background:#000;color:var(--akzent);border:1px solid var(--akzent);box-shadow:none;border-radius:0}
body.terminal .u-legend{font:11.5px inherit;color:var(--akzent)}
body.terminal footer{border-top:1px solid var(--border-2);color:var(--muted)} body.terminal footer button{background:#000;color:var(--akzent);border:1px solid var(--border-2)} body.terminal footer button.an{background:var(--akzent);color:#000}
/* Punkte, Mini-Balken und Balkenfuellungen sind HTML und tragen die Farben der hellen Palette. Sie bekommen
   dieselbe Drehung wie die Diagramme: der Farbton bleibt (gruen bleibt gruen), der Kontrast auf Schwarz wird
   besser, und die Legende zeigt wieder dieselbe Farbe wie das Bild daneben. */
body.terminal .dot,body.terminal .mini,body.terminal .bal i,body.terminal .ev .ic,body.terminal .fm-kpi i{filter:invert(1) hue-rotate(180deg) saturate(1.2)}
body.terminal .pos{color:var(--gruen)} body.terminal .neg{color:#FF8A6A}
/* Befund 19: Rand der Eingabefelder war mit 2,3:1 kaum zu sehen */
body.terminal select,body.terminal input{border-color:var(--muted)}
body.terminal ::selection{background:var(--akzent);color:#000}
body.terminal a.zurueck{background:#000;color:var(--akzent);border:1px solid var(--border-2);text-transform:uppercase;font-size:12px}
body.terminal pre{border:1px solid var(--border-2)}
body.terminal .fm-hero{background:#000;border:1px solid var(--akzent);border-radius:0;box-shadow:none;color:var(--akzent)}
body.terminal .ok-kpi{border-radius:0} body.terminal .fm-kpi{border-radius:0;background:var(--surface);border:1px solid var(--border-2)} body.terminal .fm-kpi span{color:var(--muted)}
body.terminal .fm-filter a{border-radius:0;background:#000;color:var(--akzent);border-color:var(--border-2)} body.terminal .fm-filter a.an{background:var(--akzent);color:#000;border-color:var(--akzent)}
body.terminal .fc{border-radius:0;background:var(--surface);border-color:var(--border-2);box-shadow:none}
body.terminal .ev{border-radius:0;background:#000;color:var(--akzent);border:1px solid var(--border-2)} body.terminal .ev.neu{border-color:var(--gruen)} body.terminal .ev.verkauft{border-color:#FF5A36}
body.terminal .ev .tk{background:var(--kopf);color:var(--akzent)} body.terminal .cnt i{background:var(--kopf);color:var(--akzent);border-radius:0}
body.terminal .tl:before{background:var(--border-2)} body.terminal .tl-q:before{background:var(--akzent);box-shadow:0 0 0 3px #000,0 0 0 4px var(--border-2);border-radius:0}
body.terminal .tl-h b{color:var(--akzent)}
@keyframes blink{50%{opacity:0}}

/* ---------------------------------------------------------------- 4 Bewegung: sanft, ohne Ablenkung; aus bei "reduzierte Bewegung" */
main{animation:einblenden .22s ease-out backwards}
@keyframes einblenden{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
a.k,.tile,.status-tiles a,button,a.btn,.xswitch a,.chip,.ev{transition:transform var(--dauer) ease,box-shadow var(--dauer) ease,background-color var(--dauer) ease,border-color var(--dauer) ease,color var(--dauer) ease}
body.modern a.k:hover,body.clean a.k:hover,body.modern .status-tiles a:hover,body.clean .status-tiles a:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
@media(prefers-reduced-motion:reduce){main{animation:none} *{transition:none!important} body.terminal h1::after{animation:none}}

/* ---------------------------------------------------------------- 6 Fonds-Monitor (Seite "Funds")
   Stand vorher: dieses CSS stand inline in allstars_server.fonds_monitor_html(). Jetzt hier, auf Tokens gezogen,
   damit es jeder Stil mitnimmt statt es zu ueberschreiben. */
.fm{margin:12px 0 24px}
.fm-hero{background:linear-gradient(135deg,#141416 0%,#2B1219 100%);color:#fff;border-radius:calc(var(--radius) + 4px);padding:22px 24px;box-shadow:0 18px 40px rgba(20,20,22,.18)}
.fm-hero .kopf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
body .fm-hero h2{margin:0;border:0;padding:0;font-size:22px;letter-spacing:-.02em;color:#fff;text-transform:none}
.fm-hero .sub{color:rgba(255,255,255,.62);font-size:13.5px;margin-top:4px}
.fm-hero .sub a{color:rgba(255,255,255,.85)}
.fm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}
.fm-kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:calc(var(--radius) - 2px);padding:12px 14px;position:relative;text-decoration:none;color:#fff;display:block}
.fm-kpi:hover{background:rgba(255,255,255,.13)} .fm-kpi.an{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.fm-kpi b{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.fm-kpi span{font-size:11.5px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.08em}
/* zweite Zeile einer Kachel (Insider-Abschnitt): eigene Zeile, kleiner, ohne Versalien */
.fm-kpi span+span,.fm-kpi span.gl{display:block;text-transform:none;letter-spacing:0;font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.fm-kpi i{position:absolute;right:12px;top:10px;font-style:normal;font-size:20px;font-weight:700}
.fm-filter{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px;align-items:center} .fm-filter.fm-uni{margin:16px 0 0} .fm-filter.fm-uni a.an{font-weight:600}
.fm-filter a{border-radius:var(--pille);padding:6px 13px;border:1px solid var(--border);background:var(--bg);color:var(--text);text-decoration:none;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.fm-filter a.an{background:var(--text);color:var(--bg);border-color:var(--text)} .fm-filter a .n{opacity:.55} .fm-filter .sep{width:1px;height:20px;background:var(--border);margin:0 4px}
.fm-filter .av{width:18px;height:18px;border-radius:6px;font-size:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.tl{position:relative;padding-left:28px;margin-top:12px}
.tl:before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--text),var(--border))}
.tl-q{position:relative;margin:0 0 20px}
.tl-q:before{content:'';position:absolute;left:-24px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--text);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--border)}
.tl-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tl-h b{font-size:18px;letter-spacing:-.02em} .tl-h span{color:var(--muted);font-size:12.5px}
.fc{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:0 0 10px;box-shadow:var(--schatten)}
.fc .av{width:40px;height:40px;border-radius:calc(var(--radius) - 4px);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.02em}
.fc .fh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .fc .fh b{font-size:15px} .fc .fh .gl{font-size:12.5px}
.fc .cnt{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.cnt i{font-style:normal;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:var(--pille);background:var(--surface);color:var(--text-2)}
.cnt i.neu{background:#E3F4EA;color:#1F5A38} .cnt i.aufgestockt{background:#EAF3E2;color:#3F6B2A} .cnt i.reduziert{background:#FFF1CC;color:#7A5A00} .cnt i.verkauft{background:#F9E3E7;color:#6B1E2D}
.evs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ev{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:calc(var(--radius) - 4px);border:1px solid transparent;font-size:13.5px;background:var(--surface)}
.ev .ic{width:24px;height:24px;border-radius:calc(var(--radius) - 8px);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;font-style:normal;flex:0 0 auto}
.ev.neu{background:#E9F7EF;border-color:#CDEBD9} .ev.neu .ic{background:#2E6B45}
.ev.aufgestockt{background:#EEF6E8;border-color:#D8EBCB} .ev.aufgestockt .ic{background:#5C8F3E}
.ev.reduziert{background:#FFF6E0;border-color:#F5E4B0} .ev.reduziert .ic{background:var(--gelb)}
.ev.verkauft{background:#FBEDEF;border-color:#F0CCD2} .ev.verkauft .ic{background:#6B1E2D}
.ev a{color:inherit;text-decoration:none;font-weight:500} .ev a:hover{text-decoration:underline}
.ev .tk{font:11.5px var(--mono);color:var(--muted);background:rgba(0,0,0,.05);padding:1px 6px;border-radius:6px}
.ev .d{font-size:12px;font-weight:600;padding:1px 7px;border-radius:var(--pille);background:rgba(0,0,0,.06)}
.fm-legend{font-size:12.5px;color:var(--muted);margin:8px 0 0}
body.modern .ev:hover,body.clean .ev:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
@media(max-width:740px){
.fm-kpis{grid-template-columns:repeat(2,1fr)} .fm-hero{padding:16px} .fm-kpi b{font-size:24px}
.tl{padding-left:22px} .tl:before{left:6px} .tl-q:before{left:-21px} .fc{padding:12px} .fc .cnt{margin-left:0}
}

/* ---------------------------------------------------------------- 7 Kursspanne: Balken von Tief (links) bis Hoch (rechts), Punkt = Kurs zum Stichtag */
.spn{min-width:84px;display:inline-block;text-align:left;vertical-align:middle}
.spn-b{position:relative;height:6px;border-radius:var(--pille);background:var(--spur);margin:5px 5px 4px}
.spn-b::before,.spn-b::after{content:"";position:absolute;top:-3px;width:1px;height:12px;background:var(--border-stark)} .spn-b::before{left:-1px} .spn-b::after{right:-1px}
.spn-b i{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 2px var(--bg)}
.spn-t{display:block;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums} .spn-t b{font-weight:600}
.spn.gross{display:block;min-width:0} .spn.gross .spn-b{height:8px;margin:10px 6px 8px} .spn.gross .spn-b i{width:15px;height:15px;margin:-7.5px 0 0 -7.5px} .spn.gross .spn-t{font-size:13.5px}
body.terminal .spn-b i{box-shadow:0 0 0 2px #000}

/* ---------------------------------------------------------------- 8 Einzeltitel, neue Ansicht (Schalter ui.detail_neu): kompakter Kopf,
   Kennzahl-Karten, Abschnittsleiste, Diagramme als Reiter. Auf dem Handy zweispaltig und mit grossen Tippflaechen. */
.dk{margin:2px 0 12px} .dk-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .dk-t h1{margin:4px 0}
.dk-t .tk,.tk{font:12.5px var(--mono);color:var(--muted);background:var(--kopf);padding:2px 8px;border-radius:var(--radius-s);white-space:nowrap}
.dk-m{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.mk{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:4px 11px;border:1px solid var(--border);border-radius:var(--pille);background:var(--surface-3);white-space:nowrap}
.mk.stark{font-weight:600;border-color:var(--border-2)} .mk .tag{margin:0 0 0 4px}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 6px}
@media(max-width:1000px){.kp{grid-template-columns:1fr 1fr}}
.kp-k{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--schatten);min-width:0}
.kp-k.breit{grid-column:span 2} .kp-l{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.kp-w{display:block;font-size:24px;font-weight:600;letter-spacing:-.01em;margin:5px 0 2px;white-space:nowrap;color:var(--text)}
.kp-w.pos{color:var(--gruen)} .kp-w.neg{color:var(--rot)} .kp-u{display:block;font-size:12.5px;color:var(--muted)}
.kp-mehr summary{font-size:12px;color:var(--muted);cursor:pointer;list-style:none} .kp-mehr summary::-webkit-details-marker{display:none}
.kp-mehr span{display:block;font-size:12.5px;color:var(--text-2);margin-top:4px}
.kp-spn{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:4px} .kp-spn>div>.gl{display:block;font-size:12px}
.abschn{position:sticky;top:var(--abschn-oben,0px);z-index:15;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0;margin:10px 0 4px;background:var(--bg)}
.abschn::-webkit-scrollbar{display:none}
.abschn a{flex:0 0 auto;font-size:13px;padding:6px 13px;border:1px solid var(--border-2);border-radius:var(--pille);text-decoration:none;color:var(--text);background:var(--surface-3)}
.abschn a:hover{border-color:var(--text)} .anker{scroll-margin-top:calc(var(--abschn-oben,0px) + 58px)} span.anker{display:block;height:0}
.reiter{display:flex;gap:6px;margin:6px 0 8px} .reiter button.klein{padding:6px 16px;font-size:13.5px}
body.modern,body.clean,body.institut,body.office{--abschn-oben:calc(var(--nav-h) + 1px)}
body.office .dk-t h1{font-size:32px} body.office .kp-w{font-family:var(--serif);font-weight:normal;font-size:27px}
body.institut .kp-k{border-left:3px solid var(--akzent)} body.institut .kp-l{text-transform:uppercase;letter-spacing:.05em;font-size:11px}
body.terminal .mk,body.terminal .kp-k,body.terminal .abschn a{background:var(--surface);border-color:var(--border-2)} body.terminal .abschn{background:var(--bg)}

/* ---------------------------------------------------------------- 9 Von der Analyse zur Ausfuehrung (seit 22.09.2026):
   ausgeblendete Cluster (Rangliste, Shortlist) und die Begruendung am Kaufkandidaten-Knopf */
details.ohne{margin:6px 0 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-3);padding:8px 14px;font-size:13.5px}
details.ohne summary{cursor:pointer;user-select:none;line-height:1.5} details.ohne[open] summary{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.ohne-alle{max-height:440px;overflow-y:auto;padding-right:4px;margin:0 0 10px}
/* Sektor-Cluster-Block (seit 12.10.2026): Sektor als Zeile, seine Cluster eingerueckt darunter; Regelformular und Ausblenden */
.sc-block{display:grid;grid-template-columns:1fr;gap:6px 18px;margin:6px 0}
@media(min-width:900px){.sc-block{grid-template-columns:1fr 1fr} .sc-block>.sc-kopf{grid-column:1/-1;max-width:50%}}
.sc-sektor{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:0 8px;align-self:start}
.sc-sektor>summary{list-style:none;cursor:pointer} .sc-sektor>summary::-webkit-details-marker{display:none}
.sc-zeile{display:flex;align-items:center;gap:4px;min-height:30px;padding:1px 0}
.sc-sektor-zeile{flex-wrap:wrap;min-height:34px}
.sc-sektor-zeile::before{content:"\25B8";width:14px;color:var(--muted);flex:0 0 14px}
.sc-sektor[open]>.sc-sektor-zeile::before{content:"\25BE"}
.sc-kopf{font-size:12px;color:var(--muted);font-weight:600;min-height:20px;padding-left:18px}
.sc-box{flex:0 0 60px;text-align:center;line-height:1} .sc-box input{margin:0;width:18px;height:18px}
.sc-kopf .sc-box{flex-basis:60px}
.sc-name{flex:1 1 140px;min-width:0}
.sc-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;flex:1 1 100%;padding:0 0 2px calc(var(--sc-n,1)*64px + 18px)}
.sc-paar{display:inline-flex;align-items:center;white-space:nowrap;margin-right:12px} .sc-paar .gl{margin-right:2px}
body .sc-block button.sc-knopf{background:none;border:0;box-shadow:none;color:var(--akzent,#2347c5);text-decoration:underline;font-family:inherit;font-size:12.5px;font-weight:400;border-radius:0;padding:2px 5px;min-height:28px;min-width:0;width:auto;height:auto;margin:0;flex:0 0 auto;cursor:pointer}
body .sc-block button.sc-knopf:hover{background:none;text-decoration:none} .sc-knopf[hidden]{display:none!important}
.sc-cluster{margin:0 0 6px 18px;border-top:1px solid var(--border-3)}
.sc-cluster .sc-zeile:hover{background:var(--surface-3)}
.sc-rot .sc-cluster .sc-zeile:has(input:checked){color:var(--rot);font-weight:600}
.sc-block:not(.sc-rot) .sc-box{flex-basis:56px}
body.terminal .sc-rot .sc-cluster .sc-zeile:has(input:checked){color:var(--akzent)}
@media(max-width:700px){.sc-box{flex-basis:50px} .sc-block:not(.sc-rot) .sc-box{flex-basis:46px} .sc-cluster{margin-left:8px} .sc-sektor-zeile{padding:3px 0} .sc-knoepfe{padding-left:calc(var(--sc-n,1)*54px + 18px)}}
details.ohne form>.gl{display:block;margin-top:6px}
form.kand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0}
/* Gewicht einer Position im Fonds-Monitor: bewusst grau und klein - es ist Kontext, kein Handelssignal */
.ev .gw{margin-left:6px;font-size:11px;color:var(--muted);background:var(--border-3);border-radius:8px;padding:0 5px}
details.hin.lang ul{margin:6px 0 0;padding-left:18px} details.hin.lang li{margin:4px 0;line-height:1.5;max-width:70ch}
form.kand input{flex:1 1 260px;max-width:460px;font-size:13.5px} form.kand .gl{flex:1 1 100%}

/* ---------------------------------------------------------------- 10 Rueckrechnung (/simulation, seit 24.09.2026):
   zwei Grafiken zeichnet der Server als Inline-SVG (kategorisch, klein, unveraenderlich), der Zeitverlauf laeuft
   ueber uPlot. Alle Farben kommen aus den Tokens, damit die Seite jedem Stil folgt. */
.simsatz{font-size:16px;line-height:1.55;margin:14px 0 18px;padding:12px 14px;border-left:3px solid var(--akzent);background:var(--surface-3)}
.simhin{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:74ch;margin:8px 0 14px}
.simchart{width:100%;min-height:330px;margin:6px 0 4px}
.simreihen{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 20px}
.simchk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.simchk input[disabled]{cursor:default} .simchk input[disabled]+.simpunkt+span{color:var(--muted)}
.simpunkt{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.simsvg{width:100%;height:auto;max-width:860px;display:block;margin:4px 0 10px}
.ixzeile .simsvg{max-width:1100px}
.simsvg .sg{stroke:var(--border-3);stroke-width:1}
.simsvg .sb{fill:var(--akzent)} .simsvg .sb2{fill:var(--gelb)}
.simsvg .sm{stroke:var(--grau);stroke-width:1;stroke-dasharray:3 3}
.simsvg .sk{stroke:var(--gruen);stroke-width:2}
.simsvg .sa{font-size:11px;fill:var(--muted)} .simsvg .sr{text-anchor:end} .simsvg .sc{text-anchor:middle}
.simsvg .sl{font-size:12px;font-weight:600;fill:var(--gruen)}
.simfenster{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 6px;padding:10px 14px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius,6px)}
.simfenster label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.simfenster input[type=month]{font-size:14px;padding:5px 8px} .simfenster .simknoepfe{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.mk.gut{color:var(--gruen);border-color:var(--gruen)} .mk.grau{color:var(--muted)}

/* ---------------------------------------------------------------- 11 Orderliste (/handelstermin, seit 24.09.2026) */
form.hform{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;margin:14px 0 18px;padding:14px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius,6px)}
form.hform label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-2)}
form.hform label.breit{flex:1 1 320px}
form.hform .klein{font-size:11.5px;color:var(--muted);font-weight:400}
form.hform input[type=text]{padding:7px 9px;font:inherit;font-size:14px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg);color:var(--text)}
form.hform textarea{padding:7px 9px;font:inherit;font-size:13px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg);color:var(--text);resize:vertical;min-height:70px}
form.hform .hbtn{display:flex;gap:8px;align-items:flex-end}
form.hform .feld{display:flex;align-items:center;gap:6px}
.ausleiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 20px}
.ausleiste .klein{font-size:12.5px;color:var(--muted)}
.flagbtn{color:var(--rot);border-color:var(--border-2);padding:2px 8px;line-height:1.2}
.flagbtn:hover{background:var(--rot);color:#fff;border-color:var(--rot)}
.ok-balken{background:var(--gruen-weich,var(--surface-3));border-left:3px solid var(--gruen);padding:9px 12px;margin:10px 0;font-size:14px}
form.hform select,form.hform input[type=date]{padding:7px 9px;font:inherit;font-size:14px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg);color:var(--text)}
/* Kennzahlenkacheln der Orderliste. EIGENE Klasse, nicht .fm-kpi: die gehoert in die dunkle Kopfkarte des
   Fonds-Monitors und setzt dort weisse Schrift auf durchscheinendem Weiss - auf normalem Seitenhintergrund
   steht sie weiss auf weiss. Farben und Flaechen kommen aus den Tokens, damit jeder Stil passt. */
.ok-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:16px 0 18px}
.ok-kpi{background:var(--surface-3);border:1px solid var(--border);border-left:3px solid var(--grau);
  border-radius:var(--radius);padding:12px 14px}
.ok-kpi b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.ok-kpi span{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.ok-kpi.ton-grau{border-left-color:var(--grau)} .ok-kpi.ton-gruen{border-left-color:var(--gruen)}
.ok-kpi.ton-rot{border-left-color:var(--rot)} .ok-kpi.ton-akzent{border-left-color:var(--akzent)} .ok-kpi.ton-gelb{border-left-color:var(--gelb)}
.warn-balken{background:var(--surface-3);border-left:3px solid var(--rot);padding:9px 12px;margin:10px 0;font-size:14px}
/* Eigene Titel auf die Kaufliste: zwei Kaesten nebeneinander, auf dem Handy untereinander */
.zusatz{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:18px 0}
.zbox{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;min-width:0}
.zbox h3{margin:0 0 4px;font-size:15px}
.zbox form.hform{margin:8px 0 0}
.zbox input[type=text],.zbox select{max-width:100%;box-sizing:border-box}
.zliste{grid-column:1/-1;margin-top:10px}
.zusatz>.zbox:last-child .zliste{margin-top:12px}
.handmarke{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:9px;border:1px solid var(--akzent);color:var(--akzent)}

/* ---------------------------------------------------------------- 11b Gefuehrter Ablauf (Orders und Backtest, seit 06.10.2026):
   Zweck-Satz, Antwort in grossen Zahlen, nummerierte Schritte. Mindestgroesse 12.5px (= --t-klein), Farben nur aus Tokens. */
.zweck{font-size:17px;line-height:1.55;max-width:70ch;margin:6px 0 12px;color:var(--text-2)}
.hinweis2{color:var(--muted);font-size:14px;line-height:1.55;max-width:74ch;margin:8px 0 14px}
p.klein{font-size:var(--t-klein);color:var(--muted);margin:6px 0 12px}
.ok-kpi span{font-size:13px;text-transform:none;letter-spacing:0}
.hilfe{margin:6px 0 20px;padding:12px 16px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius,6px);max-width:74ch;font-size:14.5px}
.hilfe ol,ol.regeln{margin:6px 0 0;padding-left:22px} .hilfe li,ol.regeln li,ul.regeln li{margin:5px 0;line-height:1.5}
ul.regeln{margin:8px 0 0;padding-left:20px;max-width:74ch;font-size:14px;color:var(--text-2)}
h2.schritt{display:flex;align-items:center;gap:10px;margin-top:28px}
h2.schritt .nr{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--akzent);color:#fff;font-size:15px;font-weight:600;flex:0 0 auto}
details.setup{margin:8px 0 18px;border:1px solid var(--border);border-radius:var(--radius,6px);background:var(--surface-3)}
details.setup>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;padding:12px 14px;cursor:pointer;list-style:none;font-size:15px}
details.setup>summary::-webkit-details-marker{display:none}
details.setup .sz+.sz::before{content:"\00b7";margin:0 10px;color:var(--muted)}
details.setup .aendern{margin-left:auto;padding:4px 14px;border:1px solid var(--border-2);border-radius:var(--pille,14px);font-size:14px;background:var(--bg)}
details.setup[open] .aendern{background:var(--text);color:var(--bg)}
details.setup form.hform{margin:0;border:0;border-top:1px solid var(--border);border-radius:0}
details.setup .warn{margin:10px 14px 0}
form.hform .beispiel{font-size:13.5px;color:var(--text-2);font-weight:400}
form.hform .beispiel code,.hinweis2 code{font-size:13.5px}
form.hform .klein{font-size:var(--t-klein)}
.flagbtn{font-size:13px;padding:4px 12px}
.alle-leiste{display:flex;gap:8px;margin:6px 0}
.buchen{margin:8px 0 22px;padding:16px;background:var(--surface-3);border:1px solid var(--border);border-left:3px solid var(--gruen);border-radius:var(--radius,6px)}
button.gross{font-size:17px;padding:12px 26px;min-height:48px}
button.gross:disabled{opacity:.45;cursor:not-allowed}
.bz-zeile{display:flex;flex-wrap:wrap;gap:6px 24px;margin:12px 0 4px;font-size:15px;color:var(--text-2)}
.bz-zeile b{color:var(--text);font-variant-numeric:tabular-nums}
.simreihen-oben{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px}
.simmehr{margin:4px 0 20px} .simmehr .simreihen{margin-top:6px}
.simchk{font-size:14px;white-space:normal}
.mk.neg{color:var(--rot);border-color:var(--rot)}
.simsvg .sa{font-size:12.5px} .simsvg .sl{font-size:13px}
@media(max-width:700px){
  .zweck{font-size:16px} .ok-kpi b{font-size:22px}
  details.setup .aendern{margin-left:0;margin-top:6px}
  details.setup .sz+.sz::before{margin:0 7px}
  .buchen button.gross{width:100%}
}

/* ---------------------------------------------------------------- 12 Portfolio-Bild (/portfolio, seit 24.09.2026):
   Treemap und Ring zeichnet der Server als Inline-SVG. Farben ausschliesslich aus den Tokens - ein Depotbild
   soll jedem Stil folgen, und Gruen/Rot sind hier die einzigen Toene, die etwas BEDEUTEN. */
.tm{width:100%;height:auto;display:block;margin:6px 0 8px}
.tm rect{stroke:var(--bg);stroke-width:1.5;transition:opacity .12s}
.tm g:hover rect{opacity:1;stroke:var(--text)}
.tm .sehr-schwach rect{fill:var(--rot)} .tm .schwach rect{fill:var(--rot);opacity:.5}
.tm .neutral rect{fill:var(--grau);opacity:.35}
.tm .stark rect{fill:var(--gruen);opacity:.55} .tm .sehr-stark rect{fill:var(--gruen)}
.tm .unbekannt rect{fill:var(--grau);opacity:.2}
.tm text{fill:#fff;pointer-events:none;font-family:var(--font-ui,inherit)}
.tm .t1{font-size:13px;font-weight:600} .tm .t2{font-size:12px;opacity:.85}
.tm .neutral text,.tm .unbekannt text{fill:var(--text)}
.tmleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 22px;font-size:12px;color:var(--muted)}
.tmleg .k{display:inline-flex;align-items:center;gap:6px}
.tmleg i{width:12px;height:12px;border-radius:2px;display:inline-block}
.tmleg .sehr-schwach i{background:var(--rot)} .tmleg .schwach i{background:var(--rot);opacity:.5}
.tmleg .neutral i{background:var(--grau);opacity:.35}
.tmleg .stark i{background:var(--gruen);opacity:.55} .tmleg .sehr-stark i{background:var(--gruen)}

.pfzeile{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;margin:10px 0 18px}
.ringblock{flex:1 1 340px} .ringtools{display:flex;gap:6px;margin-bottom:10px}
.ringflex{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.rg{width:176px;height:176px;flex:0 0 auto}
.rg path{stroke:var(--bg);stroke-width:1.5}
.rg .s1{fill:var(--akzent)} .rg .s2{fill:var(--akzent);opacity:.82} .rg .s3{fill:var(--akzent);opacity:.66}
.rg .s4{fill:var(--akzent);opacity:.52} .rg .s5{fill:var(--akzent);opacity:.40} .rg .s6{fill:var(--akzent);opacity:.30}
.rg .s7{fill:var(--akzent);opacity:.22} .rg .s8{fill:var(--akzent);opacity:.15}
.rg .mitte{text-anchor:middle;font-size:26px;font-weight:600;fill:var(--text)}
.rg .mittek{text-anchor:middle;font-size:11px;fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ringleg{list-style:none;margin:0;padding:0;font-size:13px;min-width:180px}
.ringleg li{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid var(--border-3)}
.ringleg i{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.ringleg .s1{background:var(--akzent)} .ringleg .s2{background:var(--akzent);opacity:.82}
.ringleg .s3{background:var(--akzent);opacity:.66} .ringleg .s4{background:var(--akzent);opacity:.52}
.ringleg .s5{background:var(--akzent);opacity:.40} .ringleg .s6{background:var(--akzent);opacity:.30}
.ringleg .s7{background:var(--akzent);opacity:.22} .ringleg .s8{background:var(--akzent);opacity:.15}
.ringleg span{flex:1;color:var(--text-2)} .ringleg b{color:var(--text);font-variant-numeric:tabular-nums}

.bestenblock{display:flex;gap:26px;flex:1 1 300px}
.besten h3{margin:0 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border:0;padding:0}
.besten ul{list-style:none;margin:0;padding:0;font-size:14px}
.besten li{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border-bottom:1px solid var(--border-3)}
.besten b{font-variant-numeric:tabular-nums} .besten b.gut{color:var(--gruen)} .besten b.schlecht{color:var(--rot)}
details.pfein{margin:14px 0} details.pfein>summary{cursor:pointer;color:var(--muted);font-size:13.5px;padding:6px 0}
details.pfein[open]>summary{color:var(--text)}
.fm-hero .tools{display:flex;gap:6px;flex-wrap:wrap}
/* Der Depotwert ist die Zahl, auf die man zuerst schaut - im Fonds-Monitor ist die Ueberschrift ein Titel,
   hier ist sie der Wert selbst und darf entsprechend gross sein. */
body .pf-hero h2{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
body .pf-hero .sub{font-size:14px;margin-top:8px}
body .pf-hero .fm-kpi b{font-size:26px}
.fm-hero .tools a.btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#fff}
.fm-hero .tools a.btn.an{background:#fff;color:#111;border-color:#fff}

/* ---------------------------------------------------------------- 5 Mobil: Seite bleibt schmal, Tabellen scrollen in sich.
   Navigation ab 880px (iPad hochkant, Handy): Zeile 1 = Marke, Suchpille (fuellt den Rest), "More"; Zeile 2 = Seitenlinks, seitlich wischbar.
   Auf dem Handy scrollt die Leiste mit (zwei Zeilen als Dauerleiste frassen zu viel Platz). */
@media(max-width:1100px) and (min-width:881px){body[class] nav a,body[class] nav details.mehr summary{padding:0 10px}body[class] nav .marke{padding-right:var(--s2)}body[class] nav form.suche{flex:0 1 170px;min-width:120px}nav .links{flex-shrink:0}}
@media(max-width:880px){
nav:has(>.links){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"marke suche mehr" "links links links";align-items:center;gap:0 var(--s2);padding:var(--s2) var(--s3) 0;min-height:0;position:relative!important;top:auto}
body nav:has(>.links) .marke{grid-area:marke;padding-right:var(--s2);font-size:16px;letter-spacing:0}
nav:has(>.links) form.suche{grid-area:suche;margin:0;flex:none;min-width:0;width:100%}
nav:has(>.links) details.mehr{grid-area:mehr;align-self:center;height:36px}
nav:has(>.links) details.mehr summary{padding:0 var(--s2)!important}
nav .links{grid-area:links;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0;margin:var(--s1) calc(var(--s3) * -1) 0;padding:0 var(--s2);align-self:auto}
nav .links::-webkit-scrollbar{display:none}
body nav .links a{min-height:44px;padding:0 var(--s3);font-size:14px;flex:0 0 auto}
nav:not(:has(>.links)){flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav:not(:has(>.links))::-webkit-scrollbar{display:none} nav:not(:has(>.links)) a{white-space:nowrap;flex:0 0 auto}
nav .menu{min-width:min(260px,calc(100vw - 24px))}
body.modern,body.clean,body.institut,body.office{--abschn-oben:0px}
}
@media(max-width:740px){
:root,body.modern,body.office{--h1:26px;--h2:20px;--h3:16px;--ctl-h:42px}
body{overflow-x:hidden} main{padding:var(--s4) var(--s3);overflow-x:hidden;max-width:100vw}
svg{max-width:100%;height:auto;display:block}
h2{margin:var(--s5) 0 var(--s2)}
.ohne-alle{max-height:320px} form.kand input{flex-basis:100%;max-width:none}
.kacheln,body.modern .kacheln,body.office .kacheln{grid-template-columns:1fr 1fr;gap:var(--s2)} .k,body.modern .k,body.office .k{padding:var(--s3) var(--s4)} .k b,body.modern .k b,body.office .k b{font-size:22px}
.status-tiles,body.modern .status-tiles,body.office .status-tiles{grid-template-columns:1fr 1fr;gap:var(--s2)} .status-tiles a,body.modern .status-tiles a,body.office .status-tiles a{padding:var(--s3) var(--s4)} .status-tiles a b,body.modern .status-tiles a b,body.office .status-tiles a b{font-size:26px}
.tiles,body.modern .tiles,body.office .tiles{gap:var(--s2)} body.modern .tile,body.office .tile{padding:var(--s4)}
details.klapp,body.modern details.klapp,body.office details.klapp{padding:var(--s3) var(--s4);margin:var(--s4) 0}
form.f,body.modern form.f,body.office form.f{gap:var(--s3);padding:var(--s4)}
form.f>div,form.f>div:has(input[name=suche]){flex:1 1 calc(50% - 6px);max-width:none} form.f>div:has(input[name=suche]){flex-basis:100%}
form.f>button,form.f>a.btn{flex:1 1 auto}
footer,body.modern footer,body.office footer{padding:var(--s3) var(--s4);gap:var(--s2)}
table,body.modern table{font-size:var(--t-tabelle)} body.modern td,body.modern th,body.office td,body.office th{padding:var(--s2) var(--s3)}
body.modern .info,body.modern .ok,body.modern .warn,body.office .info,body.office .ok,body.office .warn{padding:var(--s3) var(--s4)}
body.modern main,body.clean main,body.institut main,body.office main{padding:var(--s4) var(--s3) var(--s5)}
body.einfach{font-size:15.5px} body.einfach h1{font-size:24px} body.einfach nav a{font-size:14px}
body.terminal main{padding:10px 8px}
body .pf-hero h2{font-size:32px}
.pfzeile{gap:18px} .bestenblock{gap:18px;flex-basis:100%} .tm .t2{display:none}
form.hform{padding:11px;gap:10px} form.hform label.breit{flex-basis:100%}
.simsatz{font-size:15px} .simreihen{gap:4px 12px} .simchk{font-size:12px} .simchart{min-height:250px}
/* Einzeltitel auf dem Handy: Karten zweispaltig, Spanne ueber die volle Breite, grosse Tippflaechen in den Werkzeugleisten */
.kp{grid-template-columns:1fr 1fr;gap:8px} .kp-k{padding:10px 11px} .kp-k.breit{grid-column:1 / -1} .kp-w{font-size:20px;white-space:normal}
.dk-t h1{font-size:22px} .mk{font-size:12.5px;padding:3px 9px}
.u-legend{font-size:11px!important} main ul{padding-left:20px} main li{margin-bottom:4px}
.tools{gap:8px} .tools button.klein,.tools a.klein.btn,.reiter button.klein{min-height:36px;padding:6px 12px;font-size:13.5px}
}

/* ---------------------------------------------------------------- 11 Ablauf und letztes Kontrolltor (seit 30.09.2026):
   vier Schritte oben auf der Einzeltitel-Seite (Kandidat -> Vollanalyse -> Entscheidung -> Order). Farben aus den Tokens. */
ol.ablauf{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0 10px}
ol.ablauf li{flex:1 1 170px;min-width:0;border:1px solid var(--border-2);border-left:3px solid var(--grau);border-radius:8px;background:var(--bg)}
ol.ablauf li a{display:block;padding:6px 10px;color:inherit;text-decoration:none}
ol.ablauf li b{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px}
ol.ablauf li span{font-size:13px;line-height:1.35}
ol.ablauf li.ok{border-left-color:var(--gruen);background:var(--gruen-weich)}
ol.ablauf li.nein{border-left-color:var(--rot);background:var(--rot-weich)}
ol.ablauf li.warn{border-left-color:var(--gelb)}
ol.ablauf li.offen span{color:var(--muted)}
.warnf{color:var(--gelb);font-weight:600}
body.terminal ol.ablauf li{border-radius:0;background:transparent} body.terminal ol.ablauf li.ok{background:transparent}

/* ---------------------------------------------------------------- 12 Titellisten (seit 30.09.2026): Ringe je Sektor/Cluster/Status/Herkunft */
.ringe{display:flex;flex-wrap:wrap;gap:16px 28px;margin:6px 0 14px} .ringe .ringblock{flex:1 1 300px;max-width:460px}
.ringe .ringblock h3{margin:0 0 6px;font-size:14px}
form.listef details.klapp{flex:1 1 100%;margin:4px 0} form.listef details.klapp summary{font-size:13.5px}
form.listef select[multiple]{min-width:180px}
.ixbox{max-width:640px;margin:4px 0 10px} .ixb{width:100%;height:auto;font-family:inherit}
.ixb .netz{stroke:var(--border-3);stroke-width:1} .ixb .marke{stroke:var(--akzent);stroke-width:1;stroke-dasharray:4 3;opacity:.7} .ixb .null{stroke:var(--border-2);stroke-width:1}
.ixb .achse{font-size:10px;fill:var(--muted);text-anchor:end} .ixb .kat{font-size:12px;fill:var(--text);text-anchor:middle}
.ixb .wert{font-size:10.5px;fill:var(--text-2);text-anchor:middle} .ixb .legende{font-size:11px;fill:var(--muted)}
.ixb .b1{fill:var(--akzent)} .ixb .b2{fill:var(--akzent);opacity:.4} .ixb .l1{fill:var(--akzent)} .ixb .l2{fill:var(--akzent);opacity:.4}
.ixb a{cursor:pointer} .ixb a:hover rect{stroke:var(--text);stroke-width:1.5} .ixb a:hover .wert{font-weight:bold}
td a.an{font-weight:bold;color:var(--akzent);text-decoration:underline;text-underline-offset:3px}
/* Rueckmeldung beim Absenden (static/allstars_absenden.js): Kreisel im Knopf, Hinweis mit Sekundenzaehler daneben */
button.laeuft{position:relative;pointer-events:none;opacity:.78;padding-right:38px !important}
button.laeuft::after{content:"";position:absolute;right:12px;top:50%;width:13px;height:13px;margin-top:-8.5px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kreisel .7s linear infinite}
button.klein.laeuft{padding-right:27px !important} button.klein.laeuft::after{right:8px;width:9px;height:9px;margin-top:-6.5px}
@keyframes kreisel{to{transform:rotate(360deg)}}
.wartet{display:none;margin-left:12px;color:var(--text-2);font-size:13px} .wartet.an{display:inline;animation:einblenden .25s ease}
.wartet .sek{font-variant-numeric:tabular-nums;color:var(--muted)} .wartet .sek::before{content:" · "}
@media (prefers-reduced-motion:reduce){button.laeuft::after{animation-duration:2.4s}}

/* Linienchart der Titellisten (05.10.2026): neben den Balken, auf schmalen Schirmen darunter */
.ixzeile{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start} .ixzeile .ixbox{flex:1 1 440px;max-width:680px;margin:4px 0 10px} .ixzeile #verlauf{max-width:1100px}   /* der Chart steht seit 07.10.2026 allein in der Zeile (Balken eingeklappt) */
.lxb polyline{fill:none !important;stroke-linejoin:round} .lxb .lb1{stroke:var(--akzent);stroke-width:2} .lxb .lb2{stroke:var(--text-2);stroke-width:1.4} .lxb .lb3{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3} .lxb .lb4{stroke:#4f9a94;stroke-width:1.2;stroke-dasharray:8 3 2 3}
.lxb .l1{fill:var(--akzent);font-weight:700} .lxb .l2{fill:var(--text-2);font-weight:700} .lxb .l3{fill:var(--muted);font-weight:700} .lxb .l4{fill:#4f9a94;font-weight:700}
.lxkopf{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 4px;font-size:12px} .lxkopf .xswitch{margin:0}

/* ---------------------------------------------------------------- 13 Portfolio-Charts (/portfolio, 06.10.2026):
   "Compare with"-Pillen ueber dem Linienchart, Jahres- und Beitragssaeulen als Server-SVG (siehe portfolio_screen.py) */
.vgl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 4px}
.vgl-t{font-size:13px;color:var(--muted);margin-right:4px}
.vgl .pill{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:5px 12px;min-height:32px;border:1px solid var(--border-2);border-radius:999px;color:var(--text-2);text-decoration:none;background:var(--bg)}
.vgl .pill i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);flex:0 0 auto}
.vgl .pill.an{border-color:var(--akzent);color:var(--text);font-weight:600} .vgl .pill.an i{background:var(--akzent);border-color:var(--akzent)}
.vgl .pill:hover{border-color:var(--text-2)}
.vgl-l{flex:1 1 100%} .vgl-l summary{font-size:13.5px;cursor:pointer;color:var(--text-2)} .vgl-l .pills{display:flex;flex-wrap:wrap;gap:6px 8px;margin:8px 0 4px}
.pfc .sn{stroke:var(--text-2);stroke-width:1} .pfc .sg{stroke:var(--border-3);stroke-width:1}
.pfc .pa{fill:var(--akzent)} .pfc .pb{fill:var(--grau);opacity:.75} .pfc .pg{fill:var(--gruen)} .pfc .pv{fill:var(--rot)}
.pfc .pgt{fill:var(--gruen);font-weight:600} .pfc .pvt{fill:var(--rot);font-weight:600}
.pfc .sa{font-size:12px} .pfc .sc{text-anchor:middle}
#lauf ~ h3{margin:16px 0 4px;font-size:15px}

/* ---------------------------------------------------------------- 14 Portfolio-Werkzeug (/portfolio, 06.10.2026):
   Karten der Uebersicht, Gewichtstabelle, Pillen als Knoepfe, Kacheln, Verlust-vom-Hoch-Bild */
.pfkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:14px 0 26px}
.pfkarte{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--surface-3);border:1px solid var(--border);border-left:3px solid var(--akzent);border-radius:var(--radius,6px);color:var(--text);text-decoration:none}
.pfkarte:hover{border-color:var(--akzent);box-shadow:0 4px 14px rgba(20,20,22,.08)}
.pfk-name{font-size:17px;font-weight:600} .pfk-von{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pfk-zahl{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.pfk-zahl.gut{color:var(--gruen)} .pfk-zahl.schlecht{color:var(--rot)}
.pfk-satz{font-size:13.5px;color:var(--text-2);line-height:1.45} .pfk-satz.aus{color:var(--muted)}
.pfk-vgl{font-size:13px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--border-3)}
.pf-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px 24px;margin:0 0 6px}
.pf-kopf>.simhin{margin:6px 0}
.pf-werkzeuge{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:flex-start}
.pf-werkzeuge details.pfein{margin:2px 0} .pf-werkzeuge form.hform{margin:6px 0 10px}
.pf-dup{margin:0;padding-top:3px} .pf-dup button{min-height:30px;font-size:13.5px}
.pf-bestaetigen{flex-direction:row!important;align-items:center;gap:8px!important;font-size:14px!important}
.pf-aktionen{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:12px 0 4px}
.pf-summe{margin-left:auto;font-size:14px;color:var(--text-2)} .pf-summe b{font-variant-numeric:tabular-nums;color:var(--text)} .pf-summe b.pf-abw{color:var(--rot)}
input.pf-w{width:72px;text-align:right;padding:5px 7px;font:inherit;font-size:14px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg);color:var(--text)}
.pf-add{margin-top:8px} .pf-add form.hform{margin:10px 0}
form.hform input[type=month],form.hform select{padding:7px 9px;font:inherit;font-size:14px;border:1px solid var(--border-2);border-radius:4px;background:var(--bg);color:var(--text)}
.pf-schnell{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.pf-schnell button.klein{min-height:34px;padding:0 14px;font-size:13.5px;background:var(--bg);color:var(--text);border:1px solid var(--border-2);border-radius:999px}
.pf-schnell button.klein.an{background:var(--akzent);color:#fff;border-color:var(--akzent)}
form.vgl{margin:14px 0 4px}
.vgl button.pill{font:inherit;font-size:13.5px;cursor:pointer;line-height:1.2}
.vgl-hin{flex:1 1 100%}
.pf-stil{flex:1 1 100%;width:100%;margin:12px 0 4px}
.pf-stil label.pill{cursor:pointer;position:relative}
.pf-stil label.pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pf-stil label.pill:focus-within{outline:2px solid var(--akzent);outline-offset:2px}
.pf-stil .vgl-hin{margin:4px 0 0}
.ok-kpis.aus .ok-kpi{opacity:.5}
h3.pfh{margin:22px 0 4px;font-size:16px}
.pfc .va{fill:var(--akzent);opacity:.18} .pfc .vl{fill:none;stroke:var(--akzent);stroke-width:2}
.pfc .vb{fill:none;stroke:var(--grau);stroke-width:1.6;stroke-dasharray:5 4}
/* Ringe anklickbar (12.10.2026): Scheibe und Legendeneintrag sind Links in die gefilterte Tabelle */
.rg{overflow:visible} .rg a.sl{cursor:pointer} .rg a.sl path{transition:opacity .12s}
.rg a.sl:hover path,.rg a.sl:focus path{stroke:var(--text);stroke-width:2.5;opacity:1}
.rg.hat-an a.sl:not(.an){opacity:.45}
.rg a.sl.an path{stroke:var(--text);stroke-width:3}
.ringleg li.sl{padding:0}
.ringleg li.sl a{display:flex;align-items:center;gap:8px;flex:1;padding:6px 4px;color:inherit;text-decoration:none;min-height:30px;border-radius:4px}
.ringleg li.sl a:hover,.ringleg li.sl a:focus{background:var(--akzent-bg,rgba(127,127,127,.12))}
.ringleg li.sl.an a{font-weight:600;background:var(--akzent-bg,rgba(127,127,127,.12))}
.ringleg li.mehr span{color:var(--muted)}
@media(max-width:740px){
 .pf-summe{margin-left:0;flex:1 1 100%}
 .pfk-zahl{font-size:26px}
 input.pf-w{width:60px}
 .ok-kpi b{font-size:22px}
}
#pf-gform{min-width:0;max-width:100%}
form.hform input[type=text]{max-width:100%}
@media(max-width:740px){
 #pf-gform th:nth-child(2),#pf-gform td:nth-child(2){display:none}
 #pf-gform td,#pf-gform th{padding-left:6px;padding-right:6px}
 #pf-gform .flagbtn{padding:0 8px}
 input.pf-w{width:54px}
}

.lkp .ok-kpi{text-decoration:none;color:inherit} .lkp .ok-kpi b.pos{color:var(--gruen)} .lkp .ok-kpi b.neg{color:var(--rot)}
.lkp-unter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:-6px 0 18px}
.tw.gesamt tr.zan td{background:var(--gruen-weich,#eef6ee);font-weight:600} .tw.gesamt td a{text-decoration:none}

/* Titellisten: Block "AI grades" im Regelformular (fuenf Zeilen, von/bis) - eigene Zeile, schlichte Tabelle */
form.f>div.notenblock{flex:0 0 100%;max-width:none;margin:4px 0 8px} form.listef table.notenraster{width:auto;min-width:0;border:0;box-shadow:none;background:none;border-collapse:collapse;margin-top:4px}
form.listef .notenraster th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:2px 10px 2px 0;background:none;border:0}
form.listef .notenraster td{padding:2px 10px 2px 0;font-size:14px;white-space:nowrap;border:0;background:none} form.listef .notenraster input{width:72px}

/* Audit 12.10.2026: Textfelder nie breiter als ihr Container (iPad 820 px, iPhone 390 px); Gewichtsfeld im Portfolio: Eingabe und % in einer Zeile */
textarea{max-width:100%;box-sizing:border-box}
form.hform textarea{width:100%}
td .pf-wz{white-space:nowrap}
input.pf-w{width:4.5em;box-sizing:border-box}
.pf-betrag{white-space:nowrap}
button,a.btn{max-width:100%}
form.f button{white-space:normal;text-align:center;padding-top:6px;padding-bottom:6px}
form.f input[type=text],form.f select{max-width:100%;box-sizing:border-box}