/* HEXA - Apple-Design */
:root{color-scheme:light dark;--bg:#f5f5f7;--card:#fff;--ink:#1d1d1f;--ink2:#6e6e73;--sep:rgba(0,0,0,.08);--blue:#0071e3;--blue-soft:rgba(0,113,227,.1);--green:#34c759;--green-soft:rgba(52,199,89,.14);--red:#ff3b30;--red-soft:rgba(255,59,48,.12);--amber:#ff9500;--amber-soft:rgba(255,149,0,.14);--input:#f2f2f7;--shadow:0 2px 12px rgba(0,0,0,.05)}
@media(prefers-color-scheme:dark){:root{--bg:#000;--card:#1c1c1e;--ink:#f5f5f7;--ink2:#98989d;--sep:rgba(255,255,255,.1);--input:#2c2c2e;--blue:#0a84ff;--green:#30d158;--red:#ff453a;--amber:#ff9f0a;--shadow:none}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Noto Color Emoji";font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
/* Oben darf es atmen - der Name stand direkt unter der Fensterkante. */
.wrap{max-width:1080px;margin:0 auto;padding:40px 18px 60px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 28px}
/* Die Begruessung soll in einer Zeile stehen - sie brach um, weil die Knopfreihe daneben den
   Platz nahm. Auf schmalen Schirmen darf sie umbrechen, dort ist ohnehin das Menue eingeklappt. */
.top h1{font-size:28px;letter-spacing:-.5px;margin:0;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Die Kopfleiste behaelt ihre Breite, die Begruessung gibt nach - siehe .hauptmenue .btn.
   Ganz verschwinden darf sie aber nicht: Unter 210px wuerde schon der eigene Name abgeschnitten,
   und ein "Hallo Anton B. ..." ist schlechter als ein etwas engerer Knopf daneben. */
.top .kopfleiste{flex:0 0 auto}
/* Der Gruss gibt nach, nicht die Knopfreihe: Wird es eng, wird der Name gekuerzt, statt die
   Navigation ueber den Rand zu schieben. Aber erst ab 1060px - darueber ist Platz genug, und
   "Hallo Anton B. ..." mit abgeschnittenem Namen waere die schlechtere Loesung. */
.top .logo{min-width:210px;flex:0 1 auto;overflow:hidden}
@media (max-width:1060px){.top .logo{min-width:0}}
.top .logo > div{min-width:0}
@media (max-width:980px){.top h1{white-space:normal}}
.top .sub{color:var(--ink2);font-size:13px;margin-top:2px}
.logo{display:flex;align-items:center;gap:10px}
.logo i{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#0071e3,#5e5ce6);display:inline-block;box-shadow:0 4px 10px rgba(0,113,227,.3)}
.card{background:var(--card);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);margin-top:14px}
.card h2{font-size:17px;margin:0 0 10px;letter-spacing:-.2px}
.label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);font-weight:600;margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
/* Raster- und Flexkinder duerfen schrumpfen. Ohne das waechst eine Spalte auf die MIN-CONTENT-Breite
   ihres Inhalts (z.B. eine Tabelle) - die Karte wird dann breiter als der Bildschirm, alle Karten
   haben unterschiedliche Breiten und die ganze Seite laesst sich seitlich wegschieben. */
.grid>*,.varianten>*{min-width:0}
.card,.kpi{max-width:100%}
@media(min-width:760px){.grid{grid-template-columns:repeat(4,1fr)}.grid.zwei{grid-template-columns:1fr 1fr}.grid.drei{grid-template-columns:repeat(3,1fr)}}
.kpi{background:var(--input);border-radius:14px;padding:12px 14px}
.kpi b{display:block;font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--ink2)}
.pos{color:var(--green)!important}.neg{color:var(--red)!important}.warn{color:var(--amber)!important}
.bar{height:8px;border-radius:6px;background:var(--input);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:100%;border-radius:6px;background:var(--blue);transform-origin:left center;transform:scaleX(0);transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .2s ease-out}
.bar i.ok{background:var(--green)}.bar i.bad{background:var(--red)}.bar i.warn{background:var(--amber)}
.btn{box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:12px;padding:0 16px;font:inherit;font-weight:600;cursor:pointer;background:var(--blue);color:#fff;transition:transform .09s cubic-bezier(.22,1,.36,1),opacity .12s ease-out}
.btn:active{transform:scale(.97)}
.btn:disabled{transform:none}
.btn.sec{background:var(--input);color:var(--ink)}
.btn.rot{background:var(--red-soft);color:var(--red)}
.btn.gruen{background:var(--green-soft);color:var(--green)}
/* Knoepfe, die AUF einer --input-Flaeche stehen (Variantenkarten), brauchen eine eigene Flaeche:
   `.btn.sec` hat denselben Farbton wie die Karte darunter und war dort unsichtbar. */
.btn.flaeche{background:var(--card);color:var(--ink);border:1px solid var(--sep)}
.btn.flaeche.rot{color:var(--red);border-color:var(--red-soft)}
/* Trading-PC je Konto. Der Pfad darf umbrechen - er ist lang und soll trotzdem ganz lesbar sein. */
.pczeile{background:var(--input);border-radius:12px;padding:9px 11px;margin-top:8px}
.pczeile b{margin-right:8px}
.pczeile .pfad{font:12px/1.45 Consolas,ui-monospace,monospace;color:var(--ink2);margin-top:4px;word-break:break-all}
/* Ankreuzfeld mit Erklaertext daneben - der Text gehoert zur Entscheidung, nicht in eine Fussnote. */
.anhaken{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px;cursor:pointer}
.anhaken input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--blue)}
.anhaken>span{font-size:14px}
.anhaken .klein{display:block;color:var(--ink2)}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
input[type=text],input[type=email],input[type=password],input[type=number],select{width:100%;border:1.5px solid var(--sep);border-radius:12px;padding:11px 13px;background:var(--input);color:var(--ink);font:inherit;outline:none}
input:focus,select:focus{border-color:var(--blue)}
.feld{margin-top:12px}
.feld label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.hint{font-size:12.5px;color:var(--ink2);margin-top:6px}
.tab{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);padding:6px;border-bottom:1px solid var(--sep);font-weight:600}
.tab td{padding:7px 6px;border-bottom:1px solid var(--sep)}
.tab tr:last-child td{border-bottom:none}
.tab .z{text-align:right}
.roll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600;background:var(--input);color:var(--ink2)}
.pill.on{background:var(--green-soft);color:var(--green)}.pill.off{background:var(--red-soft);color:var(--red)}.pill.blau{background:var(--blue-soft);color:var(--blue)}.pill.amber{background:var(--amber-soft);color:var(--amber)}
.switch{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--sep)}
.switch:last-child{border-bottom:none}
.switch .t{font-weight:600}.switch .d{font-size:12px;color:var(--ink2)}
.sw{position:relative;display:inline-block;width:46px;height:28px;flex:none;vertical-align:middle}
.sw input{opacity:0;width:0;height:0}
.sw > span{position:absolute;inset:0;background:#c7c7cc;border-radius:999px;transition:background-color .18s ease-out;cursor:pointer}
.sw > span:before{content:"";position:absolute;width:24px;height:24px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .24s cubic-bezier(.34,1.4,.64,1)}
.sw input:checked+span{background:var(--green)}.sw input:checked+span:before{transform:translateX(18px)}
/* Ueberall '.sw > span': Die Glasscheibe im Schalter besteht selbst aus <span>-Elementen, und ein
   weiter Selektor faerbte die grau ein. */
.seg{display:inline-flex;background:var(--input);border-radius:11px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;color:var(--ink2);font:inherit;font-weight:600;padding:7px 12px;border-radius:9px;cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.kurve{width:100%;height:170px;display:block}
/* Eigene display-Regeln (z. B. .kurve) schlagen das eingebaute [hidden] des Browsers - ein
   verstecktes SVG blieb deshalb als 170 Pixel Leerraum stehen. Einmal hart fuer alles. */
[hidden]{display:none!important}
.log{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;max-height:280px;overflow:auto;background:var(--input);border-radius:12px;padding:10px}
.log div{padding:2px 0;border-bottom:1px solid var(--sep)}
.log .error{color:var(--red)}.log .trade{color:var(--green)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block}
.dot.on{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.hero{text-align:center;padding:40px 10px 20px}
.hero h1{font-size:40px;letter-spacing:-1px;margin:0 0 8px}
.hero p{color:var(--ink2);font-size:17px;max-width:560px;margin:0 auto}
.schritte{counter-reset:s}
.schritte>div{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--sep)}.schritte>div>div{flex:1;min-width:0}
.schritte>div:last-child{border-bottom:none}
.schritte>div:before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:13px}
.klein{font-size:12.5px;color:var(--ink2)}
.meld{padding:10px 12px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-size:13px;font-weight:600;margin-top:10px}
.meld.rot{background:var(--red-soft);color:var(--red)}.meld.gruen{background:var(--green-soft);color:var(--green)}
.fuss{text-align:center;color:var(--ink2);font-size:12px;margin-top:30px}
/* v2: Varianten, Strategie-Karten, Chips, Dialog, Mobile */
.varianten{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.varianten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.varianten{grid-template-columns:repeat(4,1fr)}}
.vkarte{border:2px solid var(--sep);border-radius:16px;padding:12px 14px;cursor:pointer;background:var(--input)}
.vkarte b{display:block;font-size:16px}.vkarte span{display:block;font-size:13px;color:var(--ink2);margin:2px 0 6px}.vkarte small{display:block;font-size:12px;color:var(--ink2);line-height:1.4}
.vkarte.on{border-color:var(--blue);background:var(--blue-soft)}
.vkarte.warn.on{border-color:#ff9500;background:rgba(255,149,0,.12)}
.vkarte.turbo.on{border-color:var(--red);background:var(--red-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{border:1.5px solid var(--sep);background:var(--input);color:var(--ink);border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.mini{padding:3px 8px;font-size:11.5px}
.chip.mini.on{background:var(--green-soft);border-color:transparent;color:var(--green)}
.chip.mini.off{background:var(--input);color:var(--ink2);text-decoration:line-through;opacity:.7}
.strat{border:1px solid var(--sep);border-radius:14px;padding:10px 12px;margin-top:10px}
.skopf{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.srow{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.srow input{width:110px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal .box{background:var(--card);border-radius:20px;padding:22px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal h3{margin:0 0 8px;font-size:19px;letter-spacing:-.3px}
.modal p{margin:0 0 8px;font-size:14px;line-height:1.5}
.modal .row .btn{flex:1}
@media(max-width:600px){.wrap{padding:14px 12px 50px}.top{flex-direction:column;align-items:flex-start}.top h1{font-size:24px}.kpi b{font-size:19px}.card{padding:14px 14px;border-radius:16px}.btn{padding:11px 12px;font-size:14px}.grid{gap:8px}}
@media(max-width:600px){.kpi{min-width:0;overflow:hidden;padding:10px 11px}.kpi b{font-size:16px;white-space:normal;word-break:break-word}.kpi .label{font-size:10px}.grid{grid-template-columns:1fr 1fr}.top .row{width:100%}.varianten{grid-template-columns:1fr}}

.modal[hidden]{display:none}
.modal{padding:14px}
.modal .box{max-height:88vh;overflow:auto;padding:18px}
@media(max-width:600px){.modal .row{flex-direction:column}.modal .row .btn{width:100%}}

.modal .box{max-width:min(480px,calc(100vw - 28px));word-wrap:break-word;overflow-wrap:anywhere}

/* Handy: Login/Registrierung untereinander, grosse Knoepfe */
@media(max-width:700px){.grid.zwei{grid-template-columns:1fr}.hero{padding:26px 6px 10px}.hero h1{font-size:32px}.hero p{font-size:15px}.row .btn{flex:1;min-width:0}.schritte>div{gap:10px}}

.cd{display:inline-block;margin-top:5px;font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-soft);border-radius:8px;padding:3px 8px;font-variant-numeric:tabular-nums}

.logo img{width:34px;height:34px;display:block;flex:none}
.logo-gross{display:block;margin:0 auto 14px;filter:drop-shadow(0 8px 20px rgba(0,113,227,.3))}

.seg.voll{display:flex;width:100%;margin-bottom:6px}
.seg.voll button{flex:1}
.card.anmeldung{max-width:none}                     /* genauso breit wie die Karte darunter */
.card.anmeldung form,.card.anmeldung .seg,.card.anmeldung .meld{max-width:470px;margin-left:auto;margin-right:auto}
.card.anmeldung>h2,.card.anmeldung>.hint{text-align:center}
details summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--blue);list-style:none}
details summary::-webkit-details-marker{display:none}

/* Haftungsausschluss */
.haft{max-height:52vh;overflow:auto;padding:4px 14px 4px 0;font-size:14px;line-height:1.55;user-select:text}
.haft h3{font-size:15px;margin:16px 0 4px}
.haft p{margin:6px 0}
.zustimm{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px}
.zustimm input{width:20px;height:20px;margin-top:1px;flex:none}

/* Strategie-Detail */
.zusz{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--sep);font-size:13.5px}
.zusz:last-of-type{border-bottom:none}
.stitel{cursor:pointer}
.stitel .pill{vertical-align:middle}

/* Bewegung: Ruecksicht auf die Systemeinstellung und auf Zeigergeraete */
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.btn:active{transform:none}}
@media (hover:hover) and (pointer:fine){.vkarte:hover{border-color:var(--ink2)}.chip:hover{opacity:.85}}
/* Dialog: aus der Naehe einblenden statt hart erscheinen */
.modal:not([hidden]){animation:schleier .16s ease-out}
.modal .box{animation:kasten .22s cubic-bezier(.22,1,.36,1)}
@keyframes schleier{from{opacity:0}to{opacity:1}}
@keyframes kasten{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}

/* Install-Befehl */
.befehl{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.befehl code{flex:1;min-width:240px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--input);border-radius:10px;padding:10px 12px;user-select:all;overflow-x:auto;white-space:nowrap}

/* ---------------------------------------------------------------- Kopfzeile und Pillen
   Die Pillen standen niedriger als die Knoepfe daneben - gleiche Reihe, zwei Hoehen, das liest sich
   unruhig. Jetzt haben beide dasselbe Innenmass, und Kontoauswahl und Navigation sind zwei Gruppen
   mit Luft dazwischen statt einer gequetschten Reihe. */
.kopfgruppen{display:flex;flex-direction:column;gap:12px;margin:0}
.kopfgruppe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kopflabel{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink2);min-width:58px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:0;align-items:center}
/* 44 px ist Apples Mindestmass fuer ein Tippziel - und zugleich die Hoehe der Knoepfe daneben.
   Eine Reihe, ein Mass: vorher standen Pillen (33 px) und Knoepfe (44 px) nebeneinander und die Reihe
   wirkte schief. box-sizing sorgt dafuer, dass der Rand der Pille die Hoehe nicht zusaetzlich aufblaeht. */
.chip{box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;
  border:1.5px solid var(--sep);background:var(--input);color:var(--ink);border-radius:999px;
  padding:0 16px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;line-height:1.15;
  transition:transform .09s cubic-bezier(.22,1,.36,1),background .12s ease-out,border-color .12s ease-out}
.chip:active{transform:scale(.97)}
.chip.mini{min-height:0;padding:3px 8px;font-size:11.5px;line-height:1.3}
/* Der Terminal-Knopf traegt Sperrschrift und ist dadurch der breiteste. Er darf NICHT schrumpfen,
   sonst schneidet die Ellipse "HEXER TERMINAL" ab - die anderen Knoepfe geben stattdessen nach.
   Die Regel steht bewusst mit derselben Staerke wie `.hauptmenue .btn`: Mit nur `.terminalbtn` gewann
   dort weiter overflow:hidden, und das erste H wurde beschnitten. */
.terminalbtn{background:#0b0c0f;color:#e6e8ee;font-family:Consolas,ui-monospace,monospace;letter-spacing:.05em;font-weight:700}
/* Sperrschrift und Polsterung sind hier zurueckgenommen: Mit .08em und 18px Polster war der Knopf so
   breit, dass rechts daneben "Einstellungen" und "Abmelden" keinen Platz mehr hatten. */
.hauptmenue .btn.terminalbtn{overflow:visible;text-overflow:clip;padding-left:12px;padding-right:12px;font-size:12.5px}
@media (max-width:1150px){.hauptmenue .btn.terminalbtn{letter-spacing:.03em;font-size:12px;padding-left:9px;padding-right:9px}}
.btn.gefahr{color:var(--red);border:1.5px solid var(--red-soft);background:var(--red-soft)}
/* Zwei Knoepfe, gleiche Breite - sonst sieht "Alles zuruecksetzen" wie ein Anhaengsel aus. */
.row.breitzwei{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Variantenkarte: Uebertragen bekommt den Platz, den es braucht, Umbenennen und Loeschen stehen
   daneben und nicht in einer eigenen Zeile. Auf schmalen Schirmen untereinander. */
.row.vknoepfe{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
@media (max-width:560px){ .row.vknoepfe{grid-template-columns:1fr} }
@media (max-width:560px){ .row.breitzwei{grid-template-columns:1fr} .kopflabel{min-width:0} }
@media (prefers-reduced-motion:reduce){ .chip:active,.btn:active{transform:none} }

/* ---------------------------------------------------------------- Kopfleiste, Konto-Menue, Mobilmenue
   Kompakter Kopf: Begruessung, Zustand, Kontowahl, Navigation. Auf schmalen Schirmen klappt die Navigation
   hinter einen Knopf, die Kontowahl bleibt immer erreichbar - sie ist die haeufigste Handlung. */
.top h1{font-size:20px;letter-spacing:-.01em;line-height:1.2}
.top .sub{font-size:12.5px;margin-top:1px}
.top .logo{gap:10px}
.winken{display:inline-block;filter:none}
.kopfleiste{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;position:relative;min-width:0}
.kontowahl{position:relative}
/* nowrap: Ohne das brach "Alle Konten" um und der Knopf wurde doppelt so hoch wie die daneben. */
.kontoknopf{box-sizing:border-box;min-height:44px;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--input);border:0;border-radius:999px;padding:0 12px;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
  transition:transform .09s cubic-bezier(.22,1,.36,1),background .12s ease-out}
.kontoknopf:hover{background:var(--sep)}
.kontoknopf:active{transform:scale(.97)}
.kontoknopf .kontolabel{font-size:11.5px;color:var(--ink2);font-weight:600}
.kontoknopf b{font-weight:700;font-variant-numeric:tabular-nums}
.kontoknopf .pfeil{width:0;height:0;border:4px solid transparent;border-top-color:var(--ink2);margin-top:3px}
.kontomenue{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:250px;
  background:var(--card);border:1px solid var(--sep);border-radius:14px;padding:5px;
  box-shadow:0 18px 44px rgba(0,0,0,.16);opacity:0;transform:scale(.96) translateY(-5px);transform-origin:top left;
  transition:opacity .16s ease-out,transform .16s cubic-bezier(.22,1,.36,1)}
.kontomenue.offen{opacity:1;transform:none}
.kontomenue button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;
  padding:9px 11px;cursor:pointer;color:var(--ink);font:inherit}
.kontomenue button:hover{background:var(--input)}
.kontomenue button.an{background:var(--blue);color:#fff}
.kontomenue button.an span{color:rgba(255,255,255,.82)}
.kontomenue button b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.kontomenue button span{display:block;font-size:11.5px;color:var(--ink2);margin-top:1px}
/* Eine Reihe, nicht zwei. Vorher brach "Abmelden" um, sobald die Namen zusammen zu breit wurden;
   das sah aus wie ein vergessener Knopf. Jetzt schrumpfen die Knoepfe stattdessen mit. */
.hauptmenue{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;flex:0 0 auto}
/* Kein Knopf wird mehr beschnitten. Vorher schrumpften die Knoepfe mit (flex:0 1 auto) und schnitten
   ihre Beschriftung ab - erst "HEXER TERMINAL", nach dessen Reparatur dann "Einstellungen" und
   "Abmelden". Ein halb sichtbares Wort ist immer falsch. Jetzt behalten die Knoepfe ihre Breite;
   nachgeben muss stattdessen die Begruessung links, denn die kann man raten, eine Beschriftung nicht.
   Wird es trotzdem zu eng, uebernimmt ab 980px das Menue. */
.hauptmenue .btn{white-space:nowrap;flex:0 0 auto;overflow:visible;text-overflow:clip;
  padding-left:12px;padding-right:12px}
@media (max-width:1150px){.hauptmenue .btn{padding-left:10px;padding-right:10px;font-size:13px}}
@media (max-width:1060px){.hauptmenue .btn{padding-left:8px;padding-right:8px;font-size:12.5px;gap:4px}}
.menuknopf{display:none}
.menuknopf .burger{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.menuknopf .burger i{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .18s cubic-bezier(.22,1,.36,1),opacity .12s ease-out}
.menuknopf.offen .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menuknopf.offen .burger i:nth-child(2){opacity:0}
.menuknopf.offen .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.fernaus{margin-top:10px;background:var(--input);border-radius:12px;padding:10px 12px;font-size:11.5px;
  line-height:1.45;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}
@media (max-width:980px){
  /* Navigation hinter den Menueknopf - sonst quetschen sich sechs Knoepfe in den Kopf.
     Frueher stand hier 760px: Zwischen 760 und 980 lief die Reihe ueber den Rand hinaus, seit sie
     nicht mehr umbrechen darf. Der Menueknopf uebernimmt jetzt frueher. */
  .menuknopf{display:inline-flex}
  .hauptmenue{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:55;flex-direction:column;
    align-items:stretch;background:var(--card);border:1px solid var(--sep);border-radius:14px;padding:8px;
    box-shadow:0 18px 44px rgba(0,0,0,.16);
    opacity:0;transform:scale(.98) translateY(-6px);transform-origin:top right;pointer-events:none;
    transition:opacity .16s ease-out,transform .16s cubic-bezier(.22,1,.36,1)}
  .hauptmenue.offen{opacity:1;transform:none;pointer-events:auto}
  .hauptmenue .btn{width:100%;justify-content:flex-start}
  .top h1{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .kontomenue,.hauptmenue,.menuknopf .burger i{transition:opacity .12s ease}
  .kontomenue.offen,.hauptmenue.offen{transform:none}
  .kontoknopf:active{transform:none}
}

/* Eigene Varianten: aufklappbare Karte mit Ergebnis, Maerkten und Knoepfen. */
.vkarte.eigen{cursor:pointer}
.vkarte.eigen.auf{grid-column:1/-1}
.eigenauf{margin-top:12px;border-top:1px solid var(--g3);padding-top:12px}
.ezahlen{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:12px}
.ezahlen>div{min-width:0}
.ezahlen span{display:block;font-size:11px;color:var(--ink2)}
.ezahlen b{font-size:15px}
.emaerkte{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.emarkt{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border:1px solid var(--g3);border-radius:999px;font-size:12px;white-space:nowrap}
/* Marktplaketten - eins zu eins wie in der Windows-App: runde Zeichen, und bei einem Waehrungspaar
   liegen die beiden Laender UEBEREINANDER. Vorher waren es abgerundete Quadrate nebeneinander. */
.flagge{position:relative;display:inline-block;width:26px;height:16px;flex:none;vertical-align:middle}
.flagge.einzeln{width:16px}
.flagge .flg{position:absolute;top:0;width:16px;height:16px;border-radius:50%;display:block;background:#fff;box-shadow:0 0 0 1.5px var(--card)}
.flagge .flg:first-child{left:0;z-index:2}
.flagge .flg:nth-child(2){left:10px}
.emarkt .flagge{height:15px;width:24px}
.emarkt .flagge.einzeln{width:15px}
.emarkt .flagge .flg{width:15px;height:15px}
.emarkt .flagge .flg:nth-child(2){left:9px}

/* ---------------------------------------------------------------- Steckbriefe
   Ein Klick auf einen Strategienamen oder eine Marktzeile oeffnet den Backtest dazu. Der Dialog ist
   dafuer breiter als die uebliche Rueckfrage - eine Kurve in 480 Pixeln ist keine Kurve. */
.modal.breit .box{max-width:760px}
/* Ein Steckbrief ist laenger als eine Rueckfrage: Er darf nie hoeher werden als das Fenster,
   sonst stehen die Knoepfe ausserhalb und man kommt nicht mehr heraus. */
.modal .box{max-height:calc(100vh - 40px);overflow:auto;-webkit-overflow-scrolling:touch}
.linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:var(--blue);cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}
tr.klickbar{cursor:pointer}
tr.klickbar:hover{background:var(--input)}
.skurve{width:100%;display:block;margin:10px 0 6px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pills .pill.gut{background:var(--amber-soft);color:var(--amber)}
.pills .pill.warn{background:var(--amber-soft);color:var(--amber)}
.jahre{display:flex;flex-wrap:wrap;gap:6px}
.jahre .jahr{display:inline-flex;gap:6px;align-items:baseline;font-size:12px;font-weight:600;border-radius:8px;padding:4px 8px;background:var(--input)}
.jahre .jahr.pos{color:var(--green)}
.jahre .jahr.neg{color:var(--red)}
.vdetail{margin-top:6px}
.vpunkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.puffer{margin-top:10px}
.puffer .summe td{border-top:1.5px solid var(--sep)}
.fussknopf{font-weight:500;color:var(--ink2)}
/* Behaelter fuer die Flaechendiagramme aus charts.js. */
.chartbox{margin:10px 0 6px;min-height:120px}

/* ---------------------------------------------------------------- Farben der Flaechendiagramme
   Die Bausteine in charts.js lesen ihre Farben aus diesen Variablen. Sie sind auf HEXAs Palette
   gelegt, damit die Diagramme nicht aussehen wie aus einer anderen Anwendung. */
:root{
  --chart-background:var(--card);
  --chart-foreground:var(--ink2);
  --chart-foreground-muted:var(--ink2);
  --chart-line-primary:var(--blue);
  --chart-line-secondary:var(--amber);
  --chart-crosshair:var(--ink2);
  --chart-grid:var(--sep);
  --chart-tooltip-foreground:#fff;
  --chart-tooltip-muted:rgba(255,255,255,.65);
  --chart-segment-background:rgba(120,120,128,.08);
  --chart-segment-line:rgba(120,120,128,.28);
  /* Die Legende bringt eigene Variablen mit. */
  --legend:var(--card);
  --legend-foreground:var(--ink);
  --legend-muted:var(--ink2);
  --legend-muted-foreground:var(--ink2);
  --legend-track:var(--input);
  /* Einige Bausteine greifen auf die shadcn-Grundfarben zu. */
  --foreground:var(--ink);
  --muted-foreground:var(--ink2);
}
/* Die Legende soll sich in die Karte einfuegen, nicht in eine Liste zerfallen. */
.hexa-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.hexa-legende > div{flex:0 1 auto;padding:4px 8px}
.hexa-legende.breit{flex-direction:column;gap:2px}
.hexa-legende.breit > div{flex:1 1 auto;width:100%}

/* ---------------------------------------------------------------- Glasoptik
   Das Hover-Widget im Kontendiagramm sah aus wie Milchglas, der Rest der Seite nach flachen Kacheln.
   Jetzt tragen alle Karten dieselbe Optik: halb durchsichtig, mit Unschaerfe dahinter und einer
   Haarlinie als Kante.

   Damit Glas ueberhaupt als Glas lesbar ist, braucht es etwas, das durchscheint - eine flache Flaeche
   hinter einer Milchglasscheibe sieht aus wie eine flache Flaeche. Deshalb liegt hinter der Seite ein
   sehr zurueckhaltender Farbverlauf.

   Wo es keine Unschaerfe gibt (aeltere Browser), bleibt die Karte deckend - lesbar ist wichtiger als
   huebsch. */
body.glas{
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 62%),
    radial-gradient(900px 560px at 6% 102%, color-mix(in srgb, var(--green) 12%, transparent), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* Die Glasschicht von liquid-glass-react liegt als erstes Kind in der Karte und muss HINTER den
   Inhalt. Ohne diese beiden Regeln laege sie darueber und der Text waere weg. */
body.glas .card{position:relative;overflow:hidden}
body.glas .card > *:not(.glasschicht){position:relative;z-index:1}
.glasschicht{position:absolute;inset:0;z-index:0;pointer-events:none}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  /* .hauptmenue steht hier NICHT mehr: Die Knoepfe sollen einzeln schweben, nicht in einem
     gemeinsamen Rahmen sitzen. */
  body.glas .card,body.glas .kpi,body.glas .vkarte,body.glas .strat,body.glas .modal .box,
  body.glas .kontomenue,body.glas .fernaus,body.glas .log{
    /* Durchsichtiger als vorher (72 %): Glas, durch das nichts durchkommt, ist eine Wand.
       Und ohne jede Kante - weder ein border noch die weisse Haarlinie, die liquid-glass-react
       sonst um jede Flaeche zeichnet (die ist in charts/ ausgebaut, siehe diagramme2.py).
       Falls das zu wenig Halt gibt, ist der Weg zurueck genau diese eine Zeile. */
    background:color-mix(in srgb, var(--card) 55%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border:0;
    box-shadow:0 8px 30px rgba(0,0,0,.10);
  }
  body.glas .kpi,body.glas .vkarte,body.glas .strat{border-radius:14px}
  body.glas .modal{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  body.glas .modal .box{background:color-mix(in srgb, var(--card) 86%, transparent)}
  /* Eingabefelder und Knoepfe innerhalb einer Glaskarte duerfen nicht ebenfalls durchsichtig sein -
     sonst verschwimmt die Grenze zwischen Flaeche und Bedienelement. */
  body.glas .card input,body.glas .card select,body.glas .card textarea,
  body.glas .btn.sec,body.glas .chip{backdrop-filter:none;-webkit-backdrop-filter:none}
  body.glas .kontoknopf{background:color-mix(in srgb, var(--input) 65%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
}

/* ---------------------------------------------------------------- Schalter aus Glas
   Die Kippschalter waren die letzten flachen Flaechen in einer Glasoberflaeche. Sie bekommen
   dieselbe Behandlung: durchsichtiger Traeger mit Unschaerfe dahinter, der Knopf darauf bleibt
   deckend - man muss ja sehen koennen, wo er steht. Eingeschaltet faerbt sich der Traeger gruen,
   behaelt aber die Durchsicht. */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  body.glas .sw > span{
    background:color-mix(in srgb, var(--ink2) 30%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
    backdrop-filter:saturate(160%) blur(10px);
    box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
               inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent);
  }
  body.glas .sw input:checked+span{
    background:color-mix(in srgb, var(--green) 55%, transparent);
  }
  body.glas .sw > span:before{
    background:color-mix(in srgb, #fff 92%, transparent);
    box-shadow:0 2px 6px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.6);
  }
  /* Segmentschalter (Phase, Kontotyp) gehoeren zur selben Familie. */
  body.glas .seg{
    background:color-mix(in srgb, var(--input) 55%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
    backdrop-filter:saturate(160%) blur(10px);
  }
  body.glas .seg button.on{background:color-mix(in srgb, var(--card) 75%, transparent)}
}

/* ---------------------------------------------------------------- Keine Umrandungen
   Ausdruecklicher Wunsch: Die Kaesten sollen keine Linie um sich haben - auch die flachen nicht,
   und auch dort nicht, wo eine Linie ihren Zweck hatte (Strategiekarten, Varianten, Menues). Ihre
   Form kommt jetzt allein aus Flaeche und Schatten. Diese Regeln stehen absichtlich am Ende und in
   einem eigenen Block: Sie zurueckzunehmen heisst, ihn zu loeschen. */
.card,.kpi,.strat,.vkarte,.kontomenue,.hauptmenue,.fernaus,.log,.modal .box,.pczeile,.befehl code{border:0}
.vkarte{box-shadow:inset 0 0 0 2px transparent}
.vkarte.on{box-shadow:inset 0 0 0 2px var(--blue)}
.vkarte.warn.on{box-shadow:inset 0 0 0 2px #ff9500}
.vkarte.turbo.on{box-shadow:inset 0 0 0 2px var(--red)}
@media (hover:hover) and (pointer:fine){.vkarte:hover{box-shadow:inset 0 0 0 2px var(--ink2)}}
/* Die Trennlinien INNERHALB einer Karte bleiben: Sie umranden nichts, sie gliedern eine Liste. */

/* ---------------------------------------------------------------- Schalter mit echtem Glas
   Die Kippschalter bekommen dieselbe Scheibe wie die Karten (liquid-glass-react, eingehaengt in
   dashboard.php). Die Scheibe liegt als .glasschicht IM Schalter - der Knopf ist ein ::before und
   muss deshalb ausdruecklich darueber liegen, sonst verschwindet er dahinter. */
.sw > span{position:absolute;overflow:hidden}
.sw > span > .glasschicht{border-radius:inherit}
.sw > span:before{z-index:2}