/* =============================================================================
   BBI Investing Circle v2
   Mobil zuerst gebaut, am Desktop wird daraus ein mehrspaltiges Dashboard.
   Farben liegen als Variablen vor: Hell ist die Grundlage, Dunkel tauscht nur
   die Werte - einmal automatisch nach Systemeinstellung, einmal per Schalter.
   ========================================================================== */
:root{
  --o:#ff6600; --o-soft:rgba(255,102,0,.10); --o-line:rgba(255,102,0,.30);
  --gn:#0f9d58; --gn-soft:rgba(15,157,88,.10);
  --rd:#d93025; --rd-soft:rgba(217,48,37,.10);
  --ground:#f4f4f2; --card:#ffffff; --card-2:#f8f8f6; --hover:#f1f0ed;
  --ink:#141412; --ink-2:#3d3b36; --muted:#6e6b63; --faint:#9d9a91;
  --line:#e5e3dd; --line-soft:#eeece7;
  --bl:#2f6fd0;
  --shadow:0 1px 2px rgba(20,18,10,.04),0 10px 28px rgba(20,18,10,.05);
  --kopf-h:56px; --tab-h:60px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --o:#ff7a1f; --o-soft:rgba(255,122,31,.14); --o-line:rgba(255,122,31,.32);
    --gn:#4ade80; --gn-soft:rgba(74,222,128,.13);
    --rd:#ff6b5e; --rd-soft:rgba(255,107,94,.13);
    --ground:#0d0d0c; --card:#171716; --card-2:#1d1d1b; --hover:#232321;
    --ink:#f2f1ec; --ink-2:#cfcdc5; --muted:#98958c; --faint:#6d6a62;
    --line:#2a2926; --line-soft:#222220;
    --bl:#6ea8ff;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --o:#ff7a1f; --o-soft:rgba(255,122,31,.14); --o-line:rgba(255,122,31,.32);
  --gn:#4ade80; --gn-soft:rgba(74,222,128,.13);
  --rd:#ff6b5e; --rd-soft:rgba(255,107,94,.13);
  --ground:#0d0d0c; --card:#171716; --card-2:#1d1d1b; --hover:#232321;
  --ink:#f2f1ec; --ink-2:#cfcdc5; --muted:#98958c; --faint:#6d6a62;
  --line:#2a2926; --line-soft:#222220;
  --bl:#6ea8ff;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--ground);color:var(--ink)}
body{font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.gruss,.zahl,.kachel h2,.bereich-titel{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.012em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.mono,.zahl,.perf,.kurs{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:6px}

/* ===================== Anmeldung ===================== */
.anmeldung{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.login-wrap{width:100%}
.login-box{max-width:400px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:22px;padding:32px 28px;box-shadow:var(--shadow);text-align:center}
.login-box .logo{width:52px;height:52px;object-fit:contain;margin-bottom:16px}
:root[data-theme="dark"] .login-box .logo{filter:invert(1) brightness(1.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .login-box .logo{filter:invert(1) brightness(1.7)}}
.login-box h1{font-size:38px;line-height:.95;text-transform:uppercase;margin:0 0 14px}
.login-box .sub{font-size:14.5px;color:var(--muted);margin:0 0 20px;line-height:1.55}
.login-box label{display:block;text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.login-box input{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 15px;
  font:inherit;font-size:16px;background:var(--card-2);color:var(--ink)}
.login-box input:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px var(--o-soft)}
.login-box input.code{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:26px;letter-spacing:10px;padding:14px 8px}
.login-box button{width:100%;margin-top:14px;border:0;border-radius:12px;background:var(--o);color:#fff;
  font-weight:700;font-size:14px;letter-spacing:.04em;padding:15px;cursor:pointer}
.login-box button:hover{filter:brightness(.94)}
.login-box .zurueck{margin-top:10px}
.login-box button.link{background:none;color:var(--muted);font-weight:600;font-size:13px;padding:6px;text-decoration:underline}
.hinweis{border-radius:10px;padding:11px 13px;font-size:13.5px;margin:0 0 16px;text-align:left;line-height:1.45}
.hinweis.ok{background:var(--gn-soft);color:var(--gn)}
.hinweis.fehler{background:var(--rd-soft);color:var(--rd)}
.login-box .fuss{font-size:12.5px;color:var(--faint);margin:22px 0 0}
.login-box .fuss a{color:var(--muted);text-decoration:underline}

/* ===================== Kopf ===================== */
.kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.kopf-in{max-width:1560px;margin:0 auto;height:var(--kopf-h);padding:0 14px;display:flex;align-items:center;gap:10px}
.marke{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.marke img{width:27px;height:27px;object-fit:contain}
:root[data-theme="dark"] .marke img{filter:invert(1) brightness(1.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marke img{filter:invert(1) brightness(1.7)}}
.marke span{font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.marke b{color:var(--o);font-weight:700}
@media(max-width:400px){.marke span{display:none}}

/* Desktop-Navigation im Kopf */
.hnav{display:none;margin-left:14px;gap:2px}
@media(min-width:860px){.hnav{display:flex}}
.hnav a{padding:8px 13px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
/* Sieben Punkte passen ab 1120px in voller Groesse. Darunter enger statt
   umbrechend - eine zweizeilige Kopfleiste waere schlimmer als 13 px. */
@media(min-width:860px) and (max-width:1119px){
  .hnav{margin-left:8px}
  .hnav a{padding:8px 8px;font-size:13px}
}
.hnav a:hover{background:var(--hover);color:var(--ink)}
.hnav a.on{background:var(--o-soft);color:var(--o)}
.kopf .sp{flex:1}

.ik{width:36px;height:36px;border:1px solid var(--line);background:var(--card);border-radius:10px;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;color:var(--muted)}
.ik:hover{border-color:var(--o);color:var(--o)}
.ik svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.master-chip{background:var(--ink);color:var(--ground);border-radius:6px;padding:3px 7px;font-size:9px;font-weight:700;letter-spacing:.1em}

/* ===================== Grundraster ===================== */
.app{max-width:1560px;margin:0 auto;padding:20px 14px calc(var(--tab-h) + 34px)}
@media(min-width:860px){.app{padding:26px 26px 60px}}
@media(min-width:1500px){.app{padding:30px 40px 70px}}

/* Ab grossem Schirm zwei Spalten: links das Tagesgeschaeft, rechts der Markt.
   Am Handy bleibt alles untereinander - die Reihenfolge im HTML stimmt so. */
.dash{display:grid;gap:0}
@media(min-width:1180px){
  .dash{grid-template-columns:minmax(0,1.65fr) minmax(330px,.85fr);gap:0 26px;align-items:start}
  .dash .neben{position:sticky;top:calc(var(--kopf-h) + 18px)}
  .dash .haupt > .abschnitt:first-child,.dash .neben > .abschnitt:first-child{margin-top:0}
}
@media(min-width:1500px){.dash{grid-template-columns:minmax(0,1.8fr) minmax(360px,.8fr)}}

.kopfzeile{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.gruss{font-size:clamp(27px,5.5vw,40px);line-height:1.02;text-transform:uppercase;margin:0}
.gruss em{font-style:normal;color:var(--o)}
.seit{margin:5px 0 0;color:var(--muted);font-size:14px}
.seit b{color:var(--ink-2);font-weight:600}

/* Abschnitt mit Titel und "alle ansehen" */
.abschnitt{margin:26px 0 0}
.abschnitt-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.bereich-titel{font-size:19px;text-transform:uppercase;margin:0}
.abschnitt-kopf .mehr{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted)}
.abschnitt-kopf .mehr:hover{color:var(--o)}
.abschnitt-kopf .anzahl{font-size:12px;color:var(--faint);font-weight:600}

/* ===================== Karten ===================== */
.karte{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:15px}
.raster{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:620px){.raster.zwei{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.raster.drei{grid-template-columns:repeat(3,1fr)}
  .raster.vier{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1500px){.raster.drei{grid-template-columns:repeat(4,1fr)}}
@media(min-width:620px) and (max-width:979px){.raster.drei,.raster.vier{grid-template-columns:1fr 1fr}}

/* Waagerecht scrollende Reihe (mobil) - am Desktop normales Raster */
.reihe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,78%);gap:11px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;margin:0 -14px;padding-left:14px;padding-right:14px}
.reihe > *{scroll-snap-align:start}
.reihe::-webkit-scrollbar{height:0}
@media(min-width:700px){.reihe{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  overflow:visible;margin:0;padding:0}}

/* ===================== Wert-Karte (Setup / Rakete) ===================== */
.wert{display:flex;flex-direction:column;gap:9px;position:relative;transition:border-color .15s}
.wert:hover{border-color:var(--o-line)}
.wert-kopf{display:flex;align-items:center;gap:9px}
.tick{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;background:var(--card-2);
  border:1px solid var(--line);border-radius:7px;padding:3px 7px;letter-spacing:.02em}
/* Aktienname bzw. Kuerzel fuehrt in den Screener. Sieht aus wie vorher -
   `a{color:inherit}` gilt global -, verraet sich erst beim Zeigen. */
.zur-aktie{cursor:pointer}
.zur-aktie:hover,.zur-aktie:focus-visible{color:var(--o)}
.tick.zur-aktie:hover,.tick.zur-aktie:focus-visible{border-color:var(--o-line)}
.wert-name{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wert .perf{margin-left:auto;font-size:16px;font-weight:700}
.perf.gn{color:var(--gn)} .perf.rd{color:var(--rd)} .perf.nt{color:var(--faint)}
.wert-zeile{display:flex;gap:8px;align-items:baseline;font-size:13px;color:var(--muted)}
.wert-zeile b{color:var(--ink-2);font-weight:600}
.marke-neu{position:absolute;top:-7px;right:11px;background:var(--o);color:#fff;border-radius:100px;
  padding:2px 8px;font-size:9.5px;font-weight:700;letter-spacing:.08em}
.status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:3px 9px}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.status.laeuft{background:var(--gn-soft);color:var(--gn)}
.status.warten{background:var(--o-soft);color:var(--o)}
.status.ziel{background:var(--gn-soft);color:var(--gn)}

/* ===================== Heute wichtig ===================== */
.wichtig{background:var(--card);border:1px solid var(--o-line);border-radius:15px;padding:14px 16px;
  position:relative;overflow:hidden}
.wichtig:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--o)}
.wichtig h2{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--o);margin:0 0 9px;font-weight:600}
.wichtig ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.wichtig li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.wichtig li i{flex:0 0 auto;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  font-size:10px;font-style:normal;background:var(--card-2);margin-top:1px}
.wichtig li b{font-weight:700}
.wichtig .leer{color:var(--muted);font-size:14px}

/* ===================== Kennzahlen ===================== */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.kpi .zahl{display:block;font-size:25px;line-height:1.05}
.kpi small{display:block;margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.kpi .neben{font-size:12.5px;color:var(--faint);margin-top:3px;display:block}

/* Indexleiste */
.indexleiste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:11px;overflow-x:auto;
  margin:0 -14px;padding:0 14px 2px}
.indexleiste::-webkit-scrollbar{height:0}
@media(min-width:700px){.indexleiste{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}}
@media(min-width:1180px){.neben .indexleiste{grid-template-columns:repeat(2,1fr)}
  .neben .raster.zwei{grid-template-columns:1fr}}
.ix{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ix .nm{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ix .kurs{font-size:17px;font-weight:700;margin-top:2px}
.ix .perf{font-size:12.5px;font-weight:600}

/* Fear & Greed */
.fg{display:flex;align-items:center;gap:15px}
.fg-ring{position:relative;width:78px;height:78px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--o) calc(var(--pct)*1%),var(--line-soft) 0);display:grid;place-items:center}
.fg-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--card)}
.fg-ring b{position:relative;font-family:Anton,sans-serif;font-size:27px;line-height:1}
.fg-txt .lbl{font-size:17px;font-weight:700}
.fg-txt .sub{font-size:13px;color:var(--muted)}

/* Termine */
.termin{display:flex;gap:11px;align-items:center;padding:9px 0;border-top:1px solid var(--line-soft)}
.termin:first-child{border-top:0}
.termin .zeit{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);flex:0 0 46px}
.termin .was{flex:1;font-size:14px}
.wicht{display:flex;gap:2px}
.wicht i{width:5px;height:5px;border-radius:50%;background:var(--line);display:block}
.wicht i.an{background:var(--o)}

/* Tabelle */
.tab-wrap{overflow-x:auto;margin:0 -14px;padding:0 14px}
@media(min-width:700px){.tab-wrap{margin:0;padding:0}}
table.liste{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
table.liste th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
table.liste td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line-soft)}
table.liste tr:last-child td{border-bottom:0}
table.liste td:last-child,table.liste th:last-child{text-align:right;padding-right:0}

/* Videos */
.video{display:flex;gap:11px;align-items:center;padding:11px 0;border-top:1px solid var(--line-soft)}
.video:first-child{border-top:0}
.video .play{width:38px;height:38px;border-radius:10px;background:var(--o-soft);color:var(--o);
  display:grid;place-items:center;flex:0 0 auto;font-size:13px}
.video .t{flex:1;font-size:14.5px;font-weight:600}
.video .d{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--faint)}

/* Event */
.event{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:14px 16px}
.event .kal{flex:0 0 auto;width:46px;text-align:center;background:var(--o);color:#fff;border-radius:11px;padding:6px 0}
.event .kal .tg{font-family:Anton,sans-serif;font-size:20px;line-height:1}
.event .kal .mo{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.event .txt{flex:1;min-width:0}
.event .txt b{display:block;font-size:15px}
.event .txt span{font-size:13px;color:var(--muted)}
.event .btn{flex:0 0 auto;background:var(--o);color:#fff;border-radius:10px;padding:9px 14px;
  font-size:12.5px;font-weight:700}

/* ===================== Hinweis Bauphase ===================== */
.baustelle{display:flex;gap:10px;align-items:flex-start;background:var(--o-soft);border:1px solid var(--o-line);
  border-radius:13px;padding:12px 14px;margin-bottom:18px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.baustelle b{color:var(--o)}
.baustelle a{color:var(--o);text-decoration:underline}

/* ===================== Suche ===================== */
.suche{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding:11vh 14px 0}
.suche[hidden]{display:none}
.suche-box{width:min(560px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden}
.suche-box input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font:inherit;font-size:17px;padding:16px 18px;outline:none}
.suche-liste{max-height:min(56vh,440px);overflow:auto;padding:6px}
.st{display:flex;gap:11px;align-items:center;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:14px}
.st:hover,.st.on{background:var(--o-soft)}
.st .ic{width:28px;height:28px;border-radius:8px;background:var(--card-2);display:grid;place-items:center;font-size:12px;flex:0 0 auto}
.st b{display:block;font-weight:600}
.st small{display:block;color:var(--muted);font-size:12px}
.st .kat{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.suche-leer{padding:18px 14px;color:var(--faint);font-size:14px}
.suche-fuss{border-top:1px solid var(--line);padding:8px 14px;font-size:10.5px;color:var(--faint);
  font-family:"IBM Plex Mono",monospace}

/* ===================== Tab-Leiste (mobil) ===================== */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:860px){.tabs{display:none}}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--tab-h);color:var(--muted);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tabs a,.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--tab-h);color:var(--muted);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tabs button{border:0;background:none;font-family:inherit;cursor:pointer;padding:0}
.tabs a svg,.tabs button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on,.tabs button.on{color:var(--o)}
.tabs button:active{color:var(--o);background:var(--o-soft)}

/* ---- Mehr-Karte, gleiche Form wie im Cockpit ---- */
.menue{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:flex-end}
.menue[hidden]{display:none}
.me-schatten{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.me-box{position:relative;margin:0 8px calc(var(--tab-h) + 14px + env(safe-area-inset-bottom));
  width:min(260px,calc(100% - 16px));background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:5px;box-shadow:0 12px 34px rgba(0,0,0,.30);animation:me-auf .14s ease}
@keyframes me-auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.me-zeile{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:0 11px;
  border:0;background:none;border-radius:10px;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent}
.me-zeile + .me-zeile{margin-top:1px}
.me-zeile:active{background:var(--hover)}
.me-zeile.on{color:var(--o);background:var(--o-soft)}
.me-zeile svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media(min-width:860px){.menue{display:none!important}}

/* ===================== Aktien-Screener ===================== */
/* Safari auf dem iPhone zoomt in JEDES Eingabefeld hinein, dessen Schrift
   kleiner als 16 px ist - die Seite springt beim Antippen und steht danach
   schief. Einzelne Felder nachzuziehen hat am 16.09.2026 nicht gereicht, weil
   es mehr davon gibt, als man beim Suchen findet. Deshalb hier einmal fuer
   alle, und nur auf schmalen Schirmen: Am Desktop gibt es das Verhalten
   nicht, dort darf ein Feld auch kleiner gesetzt sein. */
@media (max-width: 860px) {
  input, select, textarea { font-size: var(--feldgroesse, 16px) !important; }
}

/* ---- Aktiensuche ----
   Steht ganz oben und ist der erste Griff: Wer eine bestimmte Aktie sucht,
   soll nicht erst fuenf Auswahlen durchgehen. Der Erklaertext, der bis zum
   16.09.2026 hier stand, ist entfallen - die Seite erklaert sich ueber das,
   was sie zeigt. */
.ak-suche{position:relative;margin:0 0 14px}
/* 16 px sind Pflicht, nicht Geschmack: Safari auf dem iPhone zoomt in jedes
   Eingabefeld hinein, dessen Schrift kleiner ist - die Seite springt dann beim
   Antippen und steht danach schief. Gilt fuer jedes Feld auf dieser Seite. */
.ak-feld{width:100%;padding:13px 40px 13px 42px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);
  font:inherit;font-size:16px;-webkit-appearance:none}
.ak-feld::placeholder{color:var(--faint)}
.ak-feld:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px var(--o-soft)}
.ak-feld::-webkit-search-cancel-button{display:none}
.ak-lupe{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;pointer-events:none}
.ak-leer{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;
  border-radius:8px}
.ak-leer:hover{background:var(--hover);color:var(--ink)}

/* Eine Suchzeile ist eine Screen-Zeile ohne die drei auswahlabhaengigen
   Zahlen und ohne Kurs - die liegen nicht im Suchindex. Deshalb zwei Spalten
   statt vier, sonst stuenden die Noten mitten im Nichts. */
/* Eine Suchzeile ist ab dem 16.09.2026 exakt eine Listenzeile - gleiche
   Spalten, gleiche Kennzahlen, gleiche Abzeichen. Vorher fehlten Zahlen und
   Marken, die Karte war flacher, und dieselbe Aktie sah je nach Weg anders
   aus. Deshalb keine eigene Rasterregel mehr. */
.ak-laedt{padding:14px;font-size:13.5px;color:var(--muted)}
.ak-meta{font-size:12.5px;color:var(--muted);margin:10px 0 12px}
/* In einer Screen-Zeile steht Sektor, Land und Groesse schon unter dem Namen -
   ein zweites Mal daruntergeschrieben ist Fuellmaterial. In der Suche fehlt
   die Angabe dagegen, dort bleibt sie stehen. */
.scr-detail .ak-meta{display:none}
/* Das Analysten-Kursziel. Eigene Zeile statt einer siebten Kachel in der
   Bewertungsgruppe: Dort stehen gemessene Werte, hier steht eine Meinung -
   und sechs Kacheln je Gruppe sind die Ordnung, die den Block lesbar macht. */
.ak-ziel{font-size:13px;color:var(--ink);margin:-2px 0 12px}
.ak-ziel > span{display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-right:9px}
.ak-ziel b{font-weight:700}
/* `.gn` und `.rd` sind im Blatt nur in Verbindung mit anderen Klassen
   definiert - ohne diese Zeile bliebe das Plus oder Minus farblos. */
.ak-ziel b.gn{color:var(--gn)} .ak-ziel b.rd{color:var(--rd)}
.scr-detail .ak-ziel{margin-top:10px}
.ak-beschr{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:10px 0 12px;max-width:62ch}

/* ---- Kursverlauf ----
   Das SVG wird in der Breite gestreckt (preserveAspectRatio="none"), deshalb
   traegt die Linie `vector-effect: non-scaling-stroke` - ohne das wuerde sie
   auf einem breiten Schirm zum Balken und auf dem Handy zum Haar. */
.ak-verlauf:empty{display:none}
.ak-verlauf{margin:0 0 14px;padding:10px 12px 8px;background:var(--card-2);
  border:1px solid var(--line-soft);border-radius:12px}
.vl-kopf{display:flex;justify-content:flex-end;margin-bottom:6px}
.vl-kopf .chips{display:flex;gap:5px}
/* Zeichenflaeche und Skala nebeneinander, nicht uebereinander: Als Auflage
   lief die Beschriftung auf dem Handy mitten durch die Kurslinie. */
/* Die Zeichenhoehe steht in `grid-template-rows`, nicht in `height` auf dem
   Gitter: Eine `auto`-Reihe wird nach ihrem Inhalt bemessen, und der Inhalt
   ist ein SVG mit dem Seitenverhaeltnis 300:92. `height:100%` daran zaehlt
   bei dieser Messung als `auto`, also wuchs die Reihe mit der Breite - am
   Handy um ein paar Pixel, am Desktop auf ueber 300 und quer durch die
   Kennzahlen darunter. Eine feste Reihe ist nicht verhandelbar, `min-height:0`
   und `overflow:hidden` halten das Bild in seinem Feld. */
.vl-bild{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:92px;gap:0 7px}
.vl-flaeche{position:relative;min-width:0;min-height:0;overflow:hidden}
.vl-svg{display:block;width:100%;height:100%}
.vl-linien{position:absolute;inset:0;pointer-events:none}
.vl-linien span{position:absolute;left:0;right:0;height:0;
  border-top:1px dashed var(--line)}
.vl-achse{position:relative;width:auto;min-width:40px}
.vl-achse span{position:absolute;right:0;transform:translateY(-50%);
  font-size:10.5px;line-height:1;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Die unterste Skalenzahl sitzt auf der Tief-Linie und ragt durch
   translateY(-50%) ein Stueck unter die Zeichenflaeche. Ohne diesen Abstand
   stossen Zeitraum und Skala aneinander. */
.vl-fuss{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:14px;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.vl-fuss .perf{font-size:12.5px}

/* Vier Karten statt einer durchlaufenden Liste. Untereinander ohne Rahmen
   sahen die vierundzwanzig Zeilen auf dem Handy aus wie eine Tabelle, der man
   das Raster weggenommen hat - kein Anfang, kein Ende, kein Rhythmus. */
.ak-gruppen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ak-gruppe{background:var(--card-2);border:1px solid var(--line-soft);
  border-radius:12px;padding:10px 12px 8px}
.ak-gruppe h5{display:flex;align-items:baseline;gap:7px;margin:0 0 8px;
  padding:0 0 7px;border-bottom:1px solid var(--line-soft);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ak-gruppe h5 i{font-style:normal;font-size:13px;line-height:1}
.ak-gruppe h5 span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ak-gruppe h5 b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.ak-kz{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;line-height:1.5;padding:2px 0}
.ak-kz span{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-kz b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:1100px){.ak-gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Auf dem Handy bleiben die Karten einspaltig, aber ihre Zahlen stehen zu
   zweit nebeneinander: sechs Zeilen mal vier Karten waeren sonst wieder eine
   lange Liste, nur mit Zwischenueberschriften. */
@media(max-width:560px){
  .ak-gruppen{grid-template-columns:1fr;gap:10px;min-width:0}
  /* minmax(0,1fr) statt 1fr. Eine Gitterspalte wird von Haus aus nie
     schmaler als ihr Inhalt - "Schulden/EBITDA" zog die Karte am
     16.09.2026 auf 361 px in einem 264 px breiten Feld, sie hing rechts
     ueber. Das betraf jedes Geraet unter 430 px, auf einem iPhone 15 mit
     390 px um 27 px. */
  .ak-gruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;min-width:0}
  .ak-gruppe h5{grid-column:1/-1}
  .ak-kz{font-size:13px;min-width:0}
}

/* Erst unter 430 px steht die Beschriftung UEBER dem Wert statt daneben.
   Nebeneinander braucht eine Zelle die Summe aus Beschriftung und Zahl.
   Gemessen an denselben 24 Kennzahlen: bei 430 px sind null Beschriftungen
   abgeschnitten, bei 414 px zwei, bei 390 px sieben, bei 320 px siebzehn -
   und zweimal "Umsa..." untereinander sagt nichts mehr. Uebereinander
   braucht die Zelle nur das laengere von beiden, das passt ab 320 px.
   Oberhalb der Grenze bleibt die Ansicht unveraendert. */
@media(max-width:430px){
  .ak-kz{display:block;padding:5px 0 6px}
  .ak-kz span{display:block;line-height:1.35}
  .ak-kz b{display:block;font-size:13.5px;line-height:1.3;margin-top:1px}
}

/* ---- Rote Flaggen ----
   Ein Hinweis, kein Urteil. Deshalb der Orangeton der Marke und nicht das
   Rot der Verluste: "Kurs unter der 200-Tage-Linie" ist eine Tatsache, die
   man kennen sollte, keine Warnung vor der Aktie. Die Kante links statt
   eines vollen Kastens - vier Karten darueber sind schon Rahmen genug. */
.ak-flaggen{margin:0 0 14px;padding:11px 14px;border-left:3px solid var(--o);
  border-radius:0 12px 12px 0;background:var(--o-soft);min-width:0}
.ak-flaggen h6{display:flex;align-items:center;gap:7px;margin:0 0 7px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--o)}
.ak-flaggen h6 svg{width:14px;height:14px;flex:0 0 auto;fill:none;
  stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ak-flaggen div{font-size:12.5px;line-height:1.45;color:var(--ink-2);
  padding-left:21px;position:relative}
.ak-flaggen div::before{content:"";position:absolute;left:8px;top:.62em;
  width:4px;height:4px;border-radius:50%;background:var(--o)}

/* ---- Overlay: die Parameter einer Bewertung ---- */
.nt-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
  justify-content:center}
.nt-overlay[hidden]{display:none}
.nt-schatten{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.nt-box{position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;
  background:var(--card-2);border:1px solid var(--line);
  border-radius:16px 16px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:nt-auf .16s ease}
@keyframes nt-auf{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:620px){
  .nt-overlay{align-items:center}
  .nt-box{border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
}
.nt-box h3{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--ink);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.nt-box h3 b{font-size:20px;color:var(--o);font-variant-numeric:tabular-nums}
.nt-box h3 span{font-size:13px;font-weight:600;color:var(--muted)}
.nt-x{position:absolute;right:10px;top:8px;width:32px;height:32px;border:0;background:none;
  color:var(--muted);font-size:24px;line-height:1;cursor:pointer;border-radius:9px}
.nt-x:hover{background:var(--hover);color:var(--ink)}
.nt-fuss{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--faint)}
.nt-fuss b{color:var(--muted)}

.scr-auswahl{margin-bottom:16px}
.scr-auswahl-lbl{display:block;margin:0 0 7px;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.scr-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.scr-chips::-webkit-scrollbar{display:none}
.scr-chip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:border-color .1s,color .1s}
.scr-chip.on{background:var(--o-soft);border-color:var(--o);color:var(--o)}
/* Die Zahl als eigene Pille: Sie gehoert sichtbar zum Knopf und macht ihn
   nebenbei als etwas kenntlich, das Inhalt hat - nicht als Beschriftung. */
.scr-n{padding:1px 6px;border-radius:999px;background:var(--line-soft);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.scr-chip.on .scr-n{background:var(--o);color:#fff}

/* Auf dem Handy umbrechen statt rollen: Von fuenf Auswahlen waren dort
   zweieinhalb zu sehen, die anderen lagen hinter einer Wischgeste, die
   niemand vermutet. Umbruch statt festem Zweierraster, weil die Namen
   verschieden lang sind - so passen drei kurze in eine Zeile, wo ein
   starres Raster zwei Plaetze verschenkt haette. */
/* Der Knopf existiert nur auf dem Handy. Am Desktop ist er weg und die
   Liste immer offen - `.zu` wird dort schlicht ignoriert. */
.scr-auf{display:none}
@media(max-width:620px){
  .scr-auswahl-lbl{display:none}
  /* Orange umrandet, damit er nicht als Ueberschrift durchgeht: Er ist das
     Tor zum Screener und muss auf den ersten Blick als Knopf lesbar sein. */
  .scr-auf{display:flex;align-items:center;gap:9px;width:100%;padding:12px 13px;
    border:1.5px solid var(--o);border-radius:12px;background:var(--card);
    color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .scr-auf svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--o);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .scr-auf:active{background:var(--o-soft)}
  .scr-auf-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scr-auf-pfeil{transition:transform .15s}
  .scr-auswahl:not(.zu) .scr-auf{background:var(--o-soft)}
  .scr-auswahl:not(.zu) .scr-auf-pfeil{transform:rotate(180deg)}
  /* Greift eine Auswahl, sagt der Knopf welche - der Zustand darf nicht
     hinter dem Zuklappen verschwinden. */
  .scr-auf.aktiv{background:var(--o-soft);color:var(--o)}

  .scr-chips{flex-wrap:wrap;gap:7px;overflow:visible;padding:9px 0 0}
  .scr-auswahl.zu .scr-chips{display:none}
  .scr-chip{padding:9px 11px;font-size:13px}
}

/* Zwei Chip-Reihen nebeneinander, solange Platz ist - darunter untereinander.
   Jede scrollt fuer sich, damit auf dem Handy nichts abgeschnitten wird. */
.scr-steuer{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px}
.scr-steuer .chips{display:flex;align-items:center;gap:6px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:2px}
.scr-steuer .chips::-webkit-scrollbar{display:none}
/* Der kleine Pfeil am sortierenden Chip. Er sagt zweierlei: wonach gerade
   geordnet wird und in welche Richtung - ohne ihn waere ein zweiter Klick
   eine Wirkung ohne sichtbare Ursache. */
.sortpfeil{margin-left:5px;font-size:10px;line-height:1;opacity:.8}

.chips-lbl{flex:0 0 auto;display:flex;align-items:center;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.chips-lbl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- Eigener Filter ---- */
.ak-filter-auf{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.ak-filter-auf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ak-filter-auf.offen{border-color:var(--o);color:var(--o)}
.ak-filter-auf.aktiv{background:var(--o-soft);border-color:var(--o);color:var(--o)}
.ak-filter-auf .ak-filter-pfeil{transition:transform .15s}
.ak-filter-auf.offen .ak-filter-pfeil{transform:rotate(180deg)}
.ak-filter-n{padding:1px 6px;border-radius:999px;background:var(--o);color:#fff;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

.ak-filter{margin:0 0 16px;padding:14px;background:var(--card-2);
  border:1px solid var(--line);border-radius:14px}
.ak-filter[hidden]{display:none}
.ak-filter-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px}
.ff{display:flex;flex-direction:column;gap:5px;min-width:0}
.ff > span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.ff-paar{display:flex;gap:6px}
.ff input,.ff select{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:13.5px}
.ff input:focus,.ff select:focus{outline:none;border-color:var(--o)}
/* Die vier Notenfelder tragen nur ihr Emoji als Platzhalter - ausgeschrieben
   passten sie nie nebeneinander, und das Zeichen kennt man von den Kacheln. */
.ff-noten .ff-paar input{text-align:center;padding:8px 4px}
/* Seit 23.09.2026 hat der Filter mehr als doppelt so viele Felder. Ohne
   Zwischenueberschriften ist das eine Wand aus zwanzig gleich aussehenden
   Kaesten, in der niemand etwas findet. Die Zeile laeuft ueber das ganze
   Raster und trennt die Gruppen. */
.ff-titel{grid-column:1/-1;display:flex;align-items:center;gap:9px;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--o);margin:6px 0 -2px}
.ff-titel::after{content:"";flex:1;height:1px;background:var(--line-soft)}
/* Die Ja/Nein-Fragen. Kein Raster: Sie sind unterschiedlich lang, und
   nebeneinander umbrechend stehen sie dichter als in Spalten. */
.ff-haken{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 16px}
.ff-haken label{display:flex;align-items:center;gap:7px;font-size:13px;
  color:var(--ink);cursor:pointer;font-weight:500}
.ff-haken input{width:16px;height:16px;min-width:0;padding:0;margin:0;accent-color:var(--o);cursor:pointer}
/* Die Zahl hinter einem Sektor sagt, wie viele Aktien dort liegen -
   ohne sie hakt man Versorger an und wundert sich ueber drei Treffer. */
.ff-haken label small{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}

/* Sektorauswahl: sieht zu wie ein Auswahlfeld, ist offen eine Hakenliste.
   <details> traegt das Auf- und Zuklappen selbst - kein JavaScript noetig,
   und auf dem Handy verhaelt es sich wie gewohnt. */
.ff-drop{position:relative}
.ff-drop > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--ink);font-size:13.5px}
.ff-drop > summary::-webkit-details-marker{display:none}
.ff-drop > summary::after{content:"▾";color:var(--faint);font-size:11px;flex:none}
.ff-drop[open] > summary{border-color:var(--o)}
/* Steht eine Auswahl, traegt das Feld sie sichtbar - sonst weiss man
   bei zugeklappter Liste nicht, dass gefiltert wird. */
.ff-drop > summary .gewaehlt, .ff-drop > summary#fSektorLabel.gewaehlt{color:var(--o);font-weight:700}
.ff-drop[open] > summary::after{content:"▴"}
/* Die Liste schwebt ueber dem Raster, statt es aufzuschieben - sonst
   springen beim Aufklappen alle Felder darunter nach unten. */
.ff-drop-liste{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);
  max-height:262px;overflow:auto;display:flex;flex-direction:column;gap:9px;
  padding:11px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.20)}
.ff-drop-liste label{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--ink);cursor:pointer;font-weight:500}
.ff-drop-liste input{width:16px;height:16px;min-width:0;padding:0;margin:0;
  accent-color:var(--o);cursor:pointer;flex:none}
.ff-drop-liste label small{margin-left:auto;color:var(--faint);font-size:11px;
  font-variant-numeric:tabular-nums}
/* Kein Treffer in der aktuellen Auswahl - der Eintrag bleibt stehen,
   damit man sieht, dass es ihn gibt, tritt aber zurueck. */
.ff-drop-liste label.leer{opacity:.42}
.ff-drop-liste:empty::before{content:attr(data-leer);font-size:12px;color:var(--faint)}
/* Erklaerung unter einem Feld, das man sonst falsch ausfuellt. Bewusst
   sichtbar und nicht als title-Tooltip: Auf dem Handy gibt es kein Hovern,
   und genau dort wird der Screener am meisten benutzt. */
.ff-hilfe{font-size:11px;line-height:15px;color:var(--faint);font-style:normal}
/* Zeitraum und Spanne gehoeren zusammen, sollen aber nicht drei Spalten
   fressen - deshalb eine Kachel, in der die Auswahl ueber den Feldern sitzt. */
.ff-perf{grid-column:span 2}
.ff-perf select{margin-bottom:5px}
@media(max-width:620px){ .ff-perf{grid-column:1/-1} }
.ak-filter-fuss{display:flex;align-items:center;gap:12px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line-soft)}
.ak-filter-weg{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;padding:0}
.ak-filter-stand{margin-left:auto;font-size:12px;color:var(--faint);
  font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .ak-filter-auf{width:100%;justify-content:center}
  .ak-filter-raster{grid-template-columns:1fr 1fr;gap:10px}
  .ff-noten{grid-column:1/-1}
}

.scr-karte{padding:0}
.scr-liste{display:flex;flex-direction:column}
.scr-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;
  gap:16px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.scr-zeile:last-child{border-bottom:0}
.scr-links{display:flex;align-items:flex-start;gap:9px;min-width:0}
.scr-name{min-width:0}
.scr-name b{display:inline;font-size:14.5px;font-weight:700;color:var(--ink)}
.scr-tick{margin-left:7px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.scr-unter{font-size:12px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.scr-abz{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
/* Bewusst NICHT `.abz`: So heisst im Circle schon das Medaillen-Siegel mit
   Zackenrand (bausteine.php, Mitgliederstatistik). Der Name war am
   16.09.2026 einmal doppelt vergeben - die Siegel bekamen dadurch Versalien,
   Innenabstand und 10,5 px Schrift, und das Setup-Abzeichen hier wurde von
   deren `width:66px` abgeschnitten ("SETUP #11:").
   flex:0 0 auto ist Pflicht, sonst schrumpfen die Abzeichen im Flexbehaelter
   unter ihre Textbreite. */
.sabz{flex:0 0 auto;display:inline-block;padding:2px 7px;border-radius:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}
.sabz-setup{background:var(--o-soft);color:var(--o)}
/* Umrandet statt gefuellt: Es ist eine Einordnung, kein Ereignis wie ein
   Setup oder eine Rakete - und soll die beiden nicht ueberstrahlen. */
.sabz-wachstum{background:none;border:1px solid var(--line);color:var(--muted);padding:1px 6px;cursor:help}
.sabz-rakete{background:var(--gn-soft);color:var(--gn)}
.sabz-archiv{background:var(--line-soft);color:var(--muted)}

/* Kopfzeile: nimmt den Zeilen die Beschriftungen ab, die sich sonst
   dreissigmal wiederholen. Gleiche Spalten wie die Zeile darunter, deshalb
   dasselbe Raster. Unter 980 px faellt sie weg - dort brechen die Spalten
   um, und eine Kopfzeile zeigte ins Leere. */
.scr-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:end;
  gap:16px;padding:10px 14px 7px;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.scr-kopf .zl{min-width:62px}
.scr-kopf .sk{width:62px;text-align:center}
/* Am Desktop traegt die Kopfzeile die Beschriftungen der drei Zahlen; in der
   Zeile waeren sie dreissigmal dasselbe. Das Emoji der Note bleibt stehen -
   es IST die Beschriftung und wird auf einen Blick wiedererkannt.

   Feste Spaltenbreiten statt `auto`: Jede Zeile ist ihr eigenes Raster, also
   richten sich `auto`-Spalten nach dem Inhalt DIESER Zeile. Bei "1.759.000,00
   KRW" neben "58,69 $" standen KGV und Noten von Zeile zu Zeile an
   verschiedenen Stellen - eine Tabelle, deren Spalten wandern. Mit festen
   Breiten stehen sie untereinander, und der Platz, den wir am Desktop
   ohnehin haben, geht an die Zahlen statt an die Luecke in der Mitte. */
@media(min-width:981px){
  /* Die Namensspalte waechst nicht unbegrenzt mit. Bei 1560 px Container
     stand sonst ein halber Bildschirm Leere zwischen "Technologie · USA"
     und dem KGV; den Platz bekommen jetzt die Zahlen. */
  /* Die Zahlenspalte darf mitwachsen: Die Startliste zeigt fuenf Kennzahlen,
     die in 230 Pixeln aneinanderkleben. Mit einer Spanne teilt sich der
     Zwischenraum zwischen Name und Zahlen sinnvoll auf. */
  .scr-zeile, .scr-kopf{grid-template-columns:minmax(0,1fr) minmax(230px,340px) 260px 150px}
  .scr-zeile .zl-was{display:none}
  /* Breit genug fuer "100/100" - mit 44 px lief die Zahl ueber den
     farbigen Grund hinaus und stand halb daneben. */
  .scr-zeile .sc{width:62px;padding:5px 0}
  .scr-zeile .sc b{font-size:14px}
  /* Gleich breite Spalten, damit die Zahlen untereinander stehen - aber ohne
     feste Anzahl: Die Startliste zeigt fuenf Kennzahlen, die Auswahlen drei.
     `flex:1` teilt auf, was da ist; ein Raster mit `repeat(3,...)` haette die
     fuenf zusammengequetscht. Zwei Klassen im Selektor, weil die allgemeine
     `.scr-zahlen`-Regel weiter unten in der Datei steht und sonst gewinnt. */
  .scr-zeile .scr-zahlen,
  .scr-kopf  .scr-zahlen{display:flex;gap:0 12px}
  .scr-zeile .scr-zahlen .zl,
  .scr-kopf  .scr-zahlen .zl{flex:1;min-width:0}
  .scr-kopf .zl,.scr-zeile .zl{min-width:0}
  .scr-scores{justify-content:flex-end}
  .scr-rechts{min-width:0}
}
/* Ab 1280 px ist genug Platz, um den Zahlen mehr Luft zu geben. Darunter
   bleiben sie knapp, sonst wird die Namensspalte so schmal, dass "NVIDIA
   Corporation" auf zwei Zeilen faellt. */
@media(min-width:1280px){
  .scr-zeile, .scr-kopf{grid-template-columns:minmax(0,1fr) minmax(300px,460px) 260px 168px}
}
@media(max-width:980px){.scr-kopf{display:none}}

/* Die drei Zahlen, die die Auswahl begruenden. Rechtsbuendig und mit
   Tabellenziffern, damit die Spalte von Zeile zu Zeile ruhig steht. */
.scr-zahlen{display:flex;gap:18px}
.zl{text-align:right;min-width:62px}
.zl-was{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:1px}
.zl b{font-size:13.5px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* Die vier Noten. Farben fest im Stylesheet, je einmal hell und dunkel -
   berechnete Farben waeren nach dem Umschalten des Schemas falsch. */
.scr-scores{display:flex;gap:4px}
.sc{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:38px;padding:4px 0;border-radius:8px;line-height:1.1;
  border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc i{font-style:normal;font-size:11px;line-height:1;opacity:.95}
.sc b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
/* Die Bezugsgroesse klein und blass: Sie soll die Zahl einordnen, nicht mit
   ihr um Aufmerksamkeit ringen. */
.sc b small,.ak-gruppe h5 b small,.nt-box h3 b small,.sd-z b small{
  font-size:.72em;font-weight:600;opacity:.55;margin-left:1px}
.sc-s5{background:#d8f2d8;color:#116611}
.sc-s4{background:#e8f6e0;color:#3d7a22}
.sc-s3{background:#f2f0e4;color:#7a6a20}
.sc-s2{background:#fbeadf;color:#a65420}
.sc-s1{background:#fbe2e2;color:#a32020}
.sc-x{background:var(--line-soft);color:var(--muted)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sc-s5{background:#16351a;color:#6fd47a}
  :root:not([data-theme="light"]) .sc-s4{background:#1b3318;color:#8fc973}
  :root:not([data-theme="light"]) .sc-s3{background:#33301a;color:#d0bd62}
  :root:not([data-theme="light"]) .sc-s2{background:#3a2517;color:#e09a63}
  :root:not([data-theme="light"]) .sc-s1{background:#3a1c1c;color:#e07a7a}
}
:root[data-theme="dark"] .sc-s5{background:#16351a;color:#6fd47a}
:root[data-theme="dark"] .sc-s4{background:#1b3318;color:#8fc973}
:root[data-theme="dark"] .sc-s3{background:#33301a;color:#d0bd62}
:root[data-theme="dark"] .sc-s2{background:#3a2517;color:#e09a63}
:root[data-theme="dark"] .sc-s1{background:#3a1c1c;color:#e07a7a}

.scr-rechts{text-align:right;min-width:86px}
.scr-kurs{font-size:13px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Pruefliste unter der Zeile. Vier Spalten, solange Platz ist - eine
   Anordnung, die dem Vier-Noten-Raster daneben entspricht. */
.scr-zeile[data-muster]{cursor:pointer}
.scr-zeile[data-muster][aria-expanded="true"]{background:var(--card-2)}
.scr-detail{grid-column:1/-1;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.sd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sd-block h4{margin:0 0 7px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.sd-block h4 b{color:var(--ink);font-variant-numeric:tabular-nums}
.sd-gruppe{margin:9px 0 3px;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.sd-z{display:flex;align-items:baseline;gap:6px;font-size:12.5px;line-height:1.45;
  color:var(--ink-2)}
.sd-z i{font-style:normal;width:11px;flex:0 0 auto;font-weight:700}
.sd-z span{flex:1;min-width:0}
.sd-z b{font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.sd-z.ja i{color:var(--gn)}
.sd-z.nein i{color:var(--rd)}
.sd-z.nein span{color:var(--muted)}
/* Zwei verschiedene Nicht-Ergebnisse, zwei verschiedene Toene: Eine Luecke
   ("?") ist etwas, das uns fehlt - sie bekommt Aufmerksamkeit. Ein "nicht
   anwendbar" ("–") ist in Ordnung und darf zuruecktreten. */
.sd-z.offen{color:var(--ink-2)}
.sd-z.offen i{color:var(--o)}
.sd-z.weg{color:var(--faint)}
/* Teilpunkte: der Check ist weder bestanden noch durchgefallen, sondern
   irgendwo dazwischen. Orange waere zu laut - das ist kein Hinweis, sondern
   ein Zwischenstand. Deshalb der Blauton, den es sonst nur bei Verweisen
   gibt, und die Zeile bleibt in normaler Schrift. */
.sd-z.teil i{color:var(--bl)}
.sd-z.teil b{color:var(--ink-2)}
.sd-z.weg i{color:var(--faint)}
.sd-fuss{margin:14px 0 2px;font-size:11.5px;line-height:1.5;color:var(--faint);max-width:78ch}
@media(max-width:900px){.sd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:560px){.sd-grid{grid-template-columns:1fr}}

.scr-mehr{display:block;width:100%;padding:13px;border:0;border-top:1px solid var(--line);
  background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}

.scr-regel{margin:-4px 0 11px;font-size:13px;line-height:1.5;color:var(--muted);max-width:76ch}

/* Kurzfassung der Watchlist auf der Startseite: ohne Suche, Sortierung und
   Zeitraum-Umschalter - das ist die volle Ansicht unter "Aktien". */
.wl-kurz .wl-liste{margin-top:0}
.wl-alle{display:block;padding:12px;border-top:1px solid var(--line);text-align:center;
  font-size:13px;font-weight:600;color:var(--muted)}
.wl-alle:hover{color:var(--o)}

.scr-fuss{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--muted);max-width:80ch}

/* Auf dem Handy rutschen die Noten unter den Namen - nebeneinander waere
   entweder der Name abgeschnitten oder die Noten unlesbar klein. */
/* Unter 981 px passt die Zeile nicht mehr in eine Reihe: Kennzahlen und Noten
   wandern darunter. Entscheidend sind die FESTEN Plaetze - ohne sie sucht sich
   der Kurs im automatischen Fluss einen eigenen Platz und landet neben den
   Noten statt neben dem Namen. Genau das passierte zwischen 621 und 980 px,
   weil diese Regeln frueher erst ab 620 galten: Am Handy und am Desktop sah
   es richtig aus, dazwischen zerfiel es (16.09.2026). */
@media(max-width:980px){
  .scr-zeile{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  .scr-links {grid-column:1;grid-row:1}
  .scr-rechts{grid-column:2;grid-row:1}
  .scr-zahlen{grid-column:1/-1;grid-row:2;gap:0;justify-content:space-between;width:100%}
  .scr-scores{grid-column:1/-1;grid-row:3;justify-content:flex-start}
  .zl{flex:1;min-width:0;text-align:left}
  /* Die Noten teilen sich die Breite: vier Kacheln, ein Viertel je Kachel.
     Fest 62 px waeren auf 700 px Fensterbreite verloren im Weiss. */
  .sc{width:calc(25% - 3px)}
}
/* Auf dem Handy wird es noch enger - die Abstaende zwischen den Kennzahlen
   duerfen dort nicht mehr grosszuegig sein. */
@media(max-width:620px){
  .scr-zahlen{gap:0 6px}
}

/* ===================== Master-Kasten ===================== */
.masterbox{margin-top:26px;background:var(--card-2);border:1px dashed var(--line);border-radius:14px;padding:15px 17px}
.masterbox h3{font-size:14px;text-transform:uppercase;margin:0 0 9px;color:var(--muted)}
.masterbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 15px;font-size:13px}
.masterbox dt{color:var(--muted)}
.masterbox dd{margin:0;color:var(--ink-2)}

.leerhinweis{color:var(--faint);font-size:14px;padding:10px 0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===================== Newsticker ===================== */
.ticker{display:flex;align-items:center;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-bottom:14px}
.ticker-marke{flex:0 0 auto;background:var(--o);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;
  padding:9px 11px;align-self:stretch;display:flex;align-items:center}
.ticker-fenster{flex:1;min-width:0;overflow:hidden;position:relative;height:38px}
.ticker-band{display:flex;align-items:center;gap:34px;height:100%;width:max-content;
  animation:ticker-lauf var(--ticker-dauer,60s) linear infinite;padding-left:16px}
.ticker:hover .ticker-band,.ticker:focus-within .ticker-band{animation-play-state:paused}
@keyframes ticker-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-eintrag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13.5px;color:var(--ink-2)}
.ticker-eintrag i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--faint)}
.ticker-eintrag em{font-style:normal;font-size:11px;color:var(--faint);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px}
@media(prefers-reduced-motion:reduce){.ticker-band{animation:none}.ticker-fenster{overflow-x:auto}}

/* ===================== Fear & Greed Barometer ===================== */
.baro{text-align:center}
.baro-svg{width:100%;max-width:230px;height:auto;display:block;margin:0 auto}
.baro-zeiger{transform-origin:100px 100px}
.baro-werte{margin-top:6px}
.baro-zahl{font-family:Anton,sans-serif;font-size:38px;line-height:1;display:block}
.baro-stufe{display:block;font-size:14px;font-weight:700;color:var(--ink-2);margin-top:1px}
.baro-diff{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.verlauf{width:100%;height:70px;display:block;margin-top:4px}
.verlauf-cap{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:2px}

/* Ausklappen */
.klapp{border-top:1px solid var(--line-soft);margin-top:12px}
.klapp > summary{list-style:none;cursor:pointer;padding:10px 0 0;font-size:12.5px;font-weight:600;
  color:var(--muted);display:flex;align-items:center;gap:6px}
.klapp > summary::-webkit-details-marker{display:none}
.klapp > summary:hover{color:var(--o)}
.klapp > summary:after{content:"▾";font-size:11px;transition:transform .2s}
.klapp[open] > summary:after{transform:rotate(180deg)}
.klapp .inhalt{padding-top:10px}

/* ===================== Heatmap ===================== */
.heat{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;grid-auto-rows:minmax(52px,auto)}
.heat.klein{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(46px,auto)}
@media(max-width:620px){.heat{grid-template-columns:repeat(4,1fr)}}
.hz{border-radius:9px;padding:7px 8px;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;transition:transform .12s}
.hz:hover{transform:scale(1.04)}
.hz b{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis}
.hz span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.92;margin-top:1px}
.hz.g4{grid-column:span 2;grid-row:span 2}
.hz.g3{grid-column:span 2}
.hz.g2{grid-column:span 1;grid-row:span 1}

/* ===================== Heatmap: Farbstufen =====================
   Acht Stufen je Richtung statt stufenloser Transparenz. Zwei Gruende:
   Die alte Skala war schon ab zwei Prozent voll gesaettigt - bei "Jahr" traf
   das auf 91 Prozent aller Werte zu, die Kachel zeigte dann nur noch das
   Vorzeichen. Und sie legte halbdurchsichtiges Rot ueber den Kartengrund; auf
   dem dunklen #171716 wurde daraus Braun. Beide Endpunkte stehen jetzt fest,
   je Theme eigene - im Dunkelmodus bewusst von blass nach kraeftig, denn eine
   dunkle Kachel liest sich dort als "nichts", nicht als "wenig".
   Die Rampe beginnt nicht bei Weiss, sondern bei einem schon sichtbaren Ton,
   und verteilt die Stufen ungleich (Gamma 0,62): Sonst blieb zu viel zu blass.
   Ab welcher Prozentzahl Stufe 8 erreicht ist, haengt am Zeitraum - die
   Schwellen stehen in bausteine.php und circle.js.
   Seit 23.10.2026 (Moritz, nach Finviz-Vorbild): eine Rampe fuer beide Themes,
   von dunklem Neutralgrau ueber gedecktes Gruen/Rot bis Knallgruen #30cc5a /
   Knallrot #f63538, Schrift immer weiss. "Heute" ist ab 2,5 % voll. */
[data-stufe="g1"]{background:#3f5748;color:#fff}
[data-stufe="g2"]{background:#396a4c;color:#fff}
[data-stufe="g3"]{background:#347b4e;color:#fff}
[data-stufe="g4"]{background:#328a4e;color:#fff}
[data-stufe="g5"]{background:#30994f;color:#fff}
[data-stufe="g6"]{background:#2faa52;color:#fff}
[data-stufe="g7"]{background:#30bb56;color:#fff}
[data-stufe="g8"]{background:#30cc5a;color:#fff}
[data-stufe="r1"]{background:#5f4548;color:#fff}
[data-stufe="r2"]{background:#7a444c;color:#fff}
[data-stufe="r3"]{background:#92444d;color:#fff}
[data-stufe="r4"]{background:#a5424a;color:#fff}
[data-stufe="r5"]{background:#b84046;color:#fff}
[data-stufe="r6"]{background:#cd3d42;color:#fff}
[data-stufe="r7"]{background:#e1393d;color:#fff}
[data-stufe="r8"]{background:#f63538;color:#fff}
[data-stufe="n"]{background:var(--card-2);color:var(--muted)}

/* ===================== Top / Flops ===================== */
.tf{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.tf{grid-template-columns:1fr 1fr;gap:20px}}
@media(min-width:1180px){.neben .tf{grid-template-columns:1fr}}
.tf-kopf{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:2px}
.tf-kopf.gn{color:var(--gn)} .tf-kopf.rd{color:var(--rd)}
.tf-zeile{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.tf-zeile:last-child{border-bottom:0}
.tf-nm{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-zeile .perf{font-weight:700;font-size:13.5px}

/* ===================== Sektor-Performance ===================== */
.sp-liste{display:flex;flex-direction:column}
/* Name links, Prozentbox rechts, dazwischen die Kennzahlen - rechtsbuendig,
   damit sie an der Box haengen. Die Mittelspalte nimmt den Rest der Breite;
   vorher stand dort nur "x % im Plus" und die Zeile blieb zu drei Vierteln
   leer. Der Name bekommt "auto" und darf so lang sein, wie er ist. */
.sp-reihe{display:grid;gap:0 10px;align-items:center;cursor:pointer;
  grid-template-columns:4px auto minmax(0,1fr) 82px;
  grid-template-areas:"st nm br pz" "det det det det";
  padding:6px 0;border-bottom:1px solid var(--line-soft)}
.sp-liste .sp-reihe:last-child{border-bottom:0}
.sp-reihe:hover .sp-nm{color:var(--o)}
.sp-reihe:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:8px}
.sp-strich{grid-area:st;height:20px;border-radius:2px;background:var(--line)}
.sp-strich.gn{background:var(--gn)} .sp-strich.rd{background:var(--rd)}
.sp-nm{grid-area:nm;font-size:13.5px;font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ab Tablet stehen Breite, TOP und FLOP in eigenen Spalten - so beginnen sie
   in jeder Zeile an derselben Stelle und die Liste liest sich wie eine
   Tabelle statt wie drei verschieden lange Saetze untereinander. */
/* TOP und FLOP beginnen beide an einer festen Kante - das laesst die Liste wie
   eine Tabelle lesen. Preis dafuer: Die Spalte muss den laengsten Eintrag
   fassen (gemessen: TOP bis 154 px, FLOP bis 141), bei kurzen bleibt also
   Luft dahinter. Die Spalten sitzen deshalb so knapp wie moeglich ueber dem
   Maximum, und der Abstand ist auf 14 px reduziert. */
.sp-br{grid-area:br;font-size:12.5px;color:var(--faint);white-space:nowrap;
  min-width:0;display:grid;
  grid-template-columns:minmax(0,1fr) var(--topbreite,158px) var(--flopbreite,146px);
  gap:0 32px;align-items:center}
.sp-breite{justify-self:end;overflow:hidden;text-overflow:ellipsis}
.sp-breite[hidden]{display:none}
.sp-tf{justify-self:start;overflow:visible}
.sp-kurz{display:none}
.sp-tf{text-decoration:none;color:inherit}
.sp-tf em{font-style:normal;font-weight:700;letter-spacing:.06em;font-size:11px}
a.sp-tf:hover .sp-tk{color:var(--o)}
.sp-br b{font-weight:700}
.sp-br b.gn{color:var(--gn)} .sp-br b.rd{color:var(--rd)} .sp-br b.nt{color:var(--faint)}
.sp-tk{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12px;color:var(--ink-2)}
/* Die Prozentbox traegt die Farbe: je staerker die Bewegung, desto kraeftiger
   der Ton - dieselbe Skala wie die Heatmap. Der Ton kommt als Stil aus dem
   PHP bzw. dem Skript, hier steht nur die Form. */
.sp-pz{grid-area:pz;text-align:center;font-weight:700;font-size:13px;white-space:nowrap;
  padding:4px 6px;border-radius:6px;font-variant-numeric:tabular-nums;
  transition:background-color .2s ease}
/* Alle Sektoren ist der Bezugswert: oranger Strich, keine Toenung in der Box,
   die Farbe steckt nur in der Zahl - dasselbe Muster wie die Gesamt-Kachel
   auf der Startseite. */
.sp-alle{cursor:default;padding:7px 0 9px;border-bottom:1px solid var(--line);margin-bottom:3px}
.sp-alle .sp-nm{font-weight:700}
.sp-alle .sp-strich{background:var(--o)}
/* Die Bezugszeile hat keine Kennzahlen - das Kuerzel gehoert dort ans rechte
   Ende, nicht in die erste Spalte des Rasters. */
.sp-alle .sp-br{display:block;text-align:right}
.sp-alle .sp-pz{background:none;box-shadow:inset 0 0 0 1px var(--o-line)}
.sp-alle .sp-pz.gn{color:var(--gn)}
.sp-alle .sp-pz.rd{color:var(--rd)}
.sp-alle .sp-pz.nt{color:var(--faint)}
.sp-detail{grid-area:det;display:grid;gap:3px;padding:5px 0 6px}
.sp-detail[hidden]{display:none}
.sp-d-quelle{font-size:11.5px;color:var(--faint);line-height:1.45}
.sp-d-z{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);text-decoration:none;min-width:0}
.sp-d-z em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);flex:0 0 92px}
.sp-d-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.sp-d-z:hover .sp-d-nm{color:var(--o)}
.sp-d-z .perf{font-weight:700;font-size:12.5px}
@media(max-width:560px){
  /* 76 px reichten nicht: "+46,07 %" brach in zwei Zeilen um. */
  .sp-reihe{grid-template-columns:4px auto minmax(0,1fr) 82px;gap:0 6px}
  .sp-pz{font-size:12.5px;padding:4px}
  .sp-br{display:block;text-align:right}
  /* Am Handy bleibt nur Plus/Minus stehen, in der kurzen Fassung. Fuer TOP
     und FLOP reicht der Platz auf schmalen Geraeten nicht - beide stecken
     weiter in der Aufklappung. */
  .sp-top,.sp-flop,.sp-lang{display:none}
  .sp-kurz{display:inline}
  .sp-br{font-size:11.5px}
  .sp-nm{font-size:13px}
  .sp-d-z{font-size:12px;gap:6px}
  .sp-d-z em{flex:0 0 82px;font-size:10px}
  .sp-d-z .perf{font-size:12px}
}

/* Zwischen Handy und breitem Schirm reicht der Platz fuer Breite und TOP,
   aber nicht mehr fuer FLOP - dann faellt die letzte Spalte weg, statt alle
   drei zusammenzuquetschen. */
@media(min-width:561px) and (max-width:900px){
  .sp-br{grid-template-columns:minmax(0,1fr) 158px}
  .sp-flop{display:none}
}

/* Startseite: Gesamt und die elf Sektoren als gleich grosse Kacheln.
   grid-auto-rows:1fr zieht alle Zeilen auf die Hoehe der hoechsten - so bleibt
   jede Kachel gleich gross, auch wenn "Konsum (zyklisch)" auf dem Handy in
   zwei Zeilen umbricht. Der Farbton ist derselbe wie in der grossen Liste. */
.spk{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:6px}
/* min-width:0 ist hier keine Kosmetik: Ohne die Regel gilt fuer Grid-Kinder
   min-width:auto, und ein langes Wort ohne Trennstelle - "Kommunikation" -
   drueckt seine Spalte breiter als die anderen. Gemessen waren es 88 zu 76
   Punkten, also genau die Ungleichheit, die das Raster vermeiden soll.
   Damit das Wort dann nicht ueberlaeuft, darf es getrennt umbrechen. */
.spk-p{display:flex;flex-direction:column;justify-content:space-between;gap:5px;
  min-width:0;padding:8px 9px;border-radius:9px;text-decoration:none;
  border:1px solid transparent;transition:border-color .15s ease}
.spk-p b{font-weight:600;font-size:11.5px;line-height:1.25;opacity:.85;
  min-width:0;overflow-wrap:break-word;hyphens:auto;
  /* Ohne Grenze trennt Chrome "Kommunikati-on" und laesst zwei Buchstaben
     allein stehen. Mindestens vier Zeichen vor und drei nach dem Strich. */
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;
  hyphenate-limit-chars:8 4 3}
.spk-p span{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Gesamt ist der Bezugswert, nicht einer von zwoelf gleichen: heller Grund
   statt Toenung, die Farbe steckt nur in der Zahl. Dazu ein oranger Ring - als
   Ring statt dickerem Rahmen, damit die Kachel exakt so gross bleibt wie die
   anderen und das Raster nicht verrutscht. */
.spk-gesamt{background:var(--card);color:var(--ink);
  border-color:var(--o);box-shadow:0 0 0 1px var(--o)}
.spk-gesamt b{font-weight:700;opacity:1}
.spk-gesamt span.gn{color:var(--gn)}
.spk-gesamt span.rd{color:var(--rd)}
.spk-gesamt span.nt{color:var(--faint)}
.spk-p:hover{border-color:var(--o)}
@media(max-width:440px){
  .spk{gap:5px}
  .spk-p{padding:7px}
  .spk-p b{font-size:11px}
  .spk-p span{font-size:13.5px}
}

/* Termin-Details */
.termin-det{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:12.5px;color:var(--muted);
  padding:2px 0 8px 57px}
.termin-det b{color:var(--ink-2);font-weight:600}
.land{font-family:"IBM Plex Mono",monospace;font-size:10px;border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;color:var(--muted)}

/* Umschalter fuer Tops & Flops */
.tf-schalter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* Sektoren auf der Startseite: Zeitraum-Chips in der Kopfzeile neben der
   Ueberschrift. Mittig statt auf der Grundlinie, sonst sitzt der Chip-Kasten
   zu tief. Wird es zu eng, rutscht nur "Details" in eine zweite Zeile. */
.spk-kopf{align-items:center;flex-wrap:wrap;row-gap:6px}
.spk-kopf .chips{padding:2px}
.spk-kopf .chip{padding:4px 9px}
@media(max-width:520px){.spk-kopf{gap:8px}.spk-kopf .chip{padding:4px 7px;font-size:11.5px}}

.chips{display:flex;gap:4px;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.chips.anzahl-schalter{margin-left:auto}
.chip{border:0;background:none;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;
  color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--card);color:var(--o);box-shadow:0 1px 2px rgba(0,0,0,.06)}
@media(max-width:520px){.tf-schalter{gap:6px}.chip{padding:5px 8px;font-size:11.5px}
  .chips.anzahl-schalter{margin-left:0}}
.tf-daten{display:none}

/* ---- Telegram-Verweise ---- */
.tg-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--o);
  border:1px solid var(--o-line);border-radius:9px;padding:6px 11px;background:var(--o-soft);margin-top:2px}
.tg-link:hover{filter:brightness(.95)}
.tg-link svg{width:13px;height:13px;fill:currentColor}
.wert .tg-link{align-self:flex-start}

/* ---- Heatmap: Info beim Zeigen, zweiter Tipp oeffnet ---- */
.hz{cursor:pointer;position:relative}
.hz.aktiv{outline:2px solid var(--ink);outline-offset:1px;z-index:2}
.hz-info{position:fixed;z-index:70;background:var(--ink);color:var(--ground);border-radius:10px;
  padding:9px 12px;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow);pointer-events:none;
  max-width:230px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.hz-info.an{opacity:1;transform:none}
.hz-info b{display:block;font-size:13.5px}
.hz-info .p{font-variant-numeric:tabular-nums;font-weight:700}
.hz-info small{display:block;margin-top:4px;opacity:.72;font-size:11px}

/* ---- Neueste Updates ---- */
.upd{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft)}
.upd:first-child{border-top:0}
.upd .zt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--faint);flex:0 0 42px;padding-top:2px}
.upd .kern{flex:1;min-width:0}
.upd .kern b{font-size:14px;display:block}
.upd .kern span{font-size:13px;color:var(--muted);display:block;margin-top:1px}
.upd .pfeil{color:var(--faint);flex:0 0 auto;align-self:center}
a.upd:hover .kern b{color:var(--o)}
a.upd:hover .pfeil{color:var(--o)}

/* ---- Setup-Varianten (mit/ohne Retest) ---- */
.var-schalter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.var-hinweis{font-size:13px;color:var(--muted)}
@media(max-width:560px){.var-hinweis{width:100%}}
.status.verlust{background:var(--rd-soft);color:var(--rd)}
.status.aus{background:var(--card-2);color:var(--faint)}
.crv{font-size:12px;font-weight:600;color:var(--muted);margin-left:auto;white-space:nowrap}
.wert-aktionen{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.wert-aktionen .tg-link{padding:5px 9px;font-size:11.5px}
.mini-tg{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:15px;line-height:1}
.mini-tg:hover{border-color:var(--o);color:var(--o)}
.upd .kern b small{font-weight:400;color:var(--muted);font-size:12px}
.karte .abschnitt-kopf{margin-bottom:9px}

/* ===================== Barometer: beschriftete Skala ===================== */
.baro-vergleich{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line-soft)}
.bv{text-align:center}
.bv-l{display:block;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.bv b{display:block;font-size:16px;font-weight:700;margin-top:1px}
.bv-d{font-size:10.5px;font-weight:600}
.bv-d.gn{color:var(--gn)}.bv-d.rd{color:var(--rd)}.bv-d.nt{color:var(--faint)}

/* ===================== Fear-&-Greed-Chart ===================== */
.fgchart-svg{width:100%;height:190px;display:block}
.fgchart-legende{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:10.5px;color:var(--muted)}
.fgchart-legende i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.fgchart-legende .rechts{margin-left:auto;color:var(--faint)}

/* ===================== Heatmap nach Sektoren ===================== */
.heatmap.alle @media(max-width:620px){  .heatmap.alle .hm-kacheln{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}}
.hz:hover{transform:scale(1.07);z-index:3;position:relative}
.hz.aktiv{outline:2px solid var(--ink);outline-offset:1px;z-index:3;position:relative}
.hz b{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;line-height:1.05;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.heatmap.alle .hz b{font-size:9.5px}
.hz span{font-size:10px;font-variant-numeric:tabular-nums;opacity:.9}
.heatmap.alle .hz span{font-size:8.5px}
.hz-info{position:fixed;z-index:70;background:var(--ink);color:var(--ground);border-radius:11px;
  padding:11px 13px;font-size:12.5px;line-height:1.5;box-shadow:var(--shadow);pointer-events:none;
  max-width:250px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.hz-info.an{opacity:1;transform:none}
.hz-info b{display:block;font-size:14px;margin-bottom:3px}
.hz-info .zeile{display:flex;justify-content:space-between;gap:14px}
.hz-info .zeile span:first-child{opacity:.65}
.hz-info .archiv{display:flex;align-items:center;gap:5px;margin-top:7px;padding-top:7px;
  border-top:1px solid rgba(255,255,255,.16);color:#7ee0a0;font-size:11.5px;font-weight:600}
.hz-info .archiv small{display:block;color:rgba(255,255,255,.55);font-weight:400;font-size:10.5px;margin-top:1px}

/* ===================== Update-Karten mit Vorschau ===================== */
/* Updates als wischbare Reihe: am Handy eine Karte im Blick (die Kante der
   naechsten laedt zum Wischen ein), am Schreibtisch drei - dahinter warten
   die uebrigen der acht. */
.upd-raster{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;
  margin:0 -14px;padding-left:14px;padding-right:14px;
  overscroll-behavior-x:contain}
.upd-raster > *{scroll-snap-align:start}
.upd-raster::-webkit-scrollbar{height:0}
@media(min-width:620px){.upd-raster{grid-auto-columns:calc((100% - 20px) / 3);
  margin:0;padding-left:0;padding-right:0}}
@media(min-width:1180px){.neben .upd-raster{grid-auto-columns:100%}}
.updk-kopf{display:flex;align-items:baseline;gap:7px}
.updk-kopf b{font-size:13px;font-family:"IBM Plex Mono",monospace;font-weight:600}
.updk-kopf i{font-style:normal;font-size:11px;color:var(--faint);margin-left:auto}
.updk-text{font-size:13px;color:var(--ink-2);line-height:1.45}

/* ===================== Ticker mit Kennzeichnung ===================== */
.ticker-eintrag .tm{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;
  border-radius:4px;padding:2px 5px;color:#fff}
.tm-setup{background:var(--o)} .tm-archiv{background:var(--gn)}
.tm-index{background:#4a6cf7} .tm-termin{background:var(--muted)}
.ticker-marke{display:none}

/* ===================== Kennzahlen-Reihe (Setups, Raketen) ===================== */
/* Sechs Spalten als Raster - daraus lassen sich Drittel, Hälften und volle
   Zeilen bilden, ohne dass am Ende eine halbe Kachel allein stehen bleibt. */
.stat-reihe{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.stat{grid-column:span 3;min-width:0}
.stat.s-drittel{grid-column:span 2}
.stat.s-voll{grid-column:1/-1}
@media(min-width:760px){
  .stat-reihe{grid-template-columns:repeat(6,1fr)}
  .stat.s-voll{grid-column:span 3}
  .stat.s-voll.s-breit{grid-column:1/-1}
}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;min-width:0}
.stat-l{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.stat b{font-family:Anton,sans-serif;font-weight:400;font-size:30px;line-height:1;display:block;white-space:nowrap}
/* Drei Kacheln nebeneinander am Handy: der Wert waechst mit der Geraetebreite
   mit, statt bei fester Groesse je nach Modell umzubrechen */
@media(max-width:760px){.s-drittel b{font-size:clamp(15px,6vw,30px)}}
.stat b small{font-size:15px;color:var(--muted)}
.stat.s-o b{color:var(--o)} .stat.s-gn b{color:var(--gn)} .stat.s-rd b{color:var(--rd)}
.stat b .gn{color:var(--gn)} .stat b .rd{color:var(--rd)}
.stat.s-gross{grid-column:1/-1}
@media(min-width:760px){.stat.s-gross{grid-column:span 3}}
.stat-euro{display:block;margin-top:7px;font-size:12px;color:var(--muted);line-height:1.4}
.stat-euro b{display:inline;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink)}
.vert-balken{display:block;height:6px;border-radius:100px;background:var(--rd);overflow:hidden;margin-top:9px}
.vert-balken i{display:block;height:100%;background:var(--gn);border-radius:100px}

/* ===================== Tabellen mit fixierter Kopfzeile und erster Spalte ===================== */
.tab-karte{padding:0;overflow:hidden}
.tab-wrap.fix{max-height:70vh;overflow:auto;position:relative}
table.liste.fixiert{min-width:640px;margin:0}
table.liste.fixiert th{position:sticky;top:0;z-index:3;background:var(--card);
  padding:11px 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.liste.fixiert th:first-child{left:0;z-index:4;padding-left:14px}
table.liste.fixiert td{padding:10px 12px 10px 0;white-space:nowrap}
table.liste.fixiert td.sp1,table.liste.fixiert th.sp1{position:sticky;left:0;background:var(--card);
  z-index:2;padding-left:14px;box-shadow:1px 0 0 var(--line-soft)}
table.liste.fixiert th.sp1{z-index:5}
table.liste.fixiert tr:nth-child(even) td{background:var(--card-2)}
table.liste.fixiert tr:nth-child(even) td.sp1{background:var(--card-2)}
table.liste.fixiert td:last-child,table.liste.fixiert th:last-child{padding-right:14px}
table.liste b.gn{color:var(--gn)} table.liste b.rd{color:var(--rd)}
/* Winner-Zeilen gruen gerahmt und leicht getoent, passend zur gewaehlten Variante (Moritz, 27.10.2026) */
body:has(#setupVariante[data-variante="mit"]) table.liste tr[data-mit="ziel"] td,
body:has(#setupVariante[data-variante="ohne"]) table.liste tr[data-ohne="ziel"] td{
  background:color-mix(in srgb,var(--gn) 8%,var(--card));box-shadow:inset 0 1.5px 0 var(--gn),inset 0 -1.5px 0 var(--gn)}
body:has(#setupVariante[data-variante="mit"]) table.liste tr[data-mit="ziel"] td:first-child,
body:has(#setupVariante[data-variante="ohne"]) table.liste tr[data-ohne="ziel"] td:first-child{
  box-shadow:inset 0 1.5px 0 var(--gn),inset 0 -1.5px 0 var(--gn),inset 1.5px 0 0 var(--gn)}
body:has(#setupVariante[data-variante="mit"]) table.liste tr[data-mit="ziel"] td:last-child,
body:has(#setupVariante[data-variante="ohne"]) table.liste tr[data-ohne="ziel"] td:last-child{
  box-shadow:inset 0 1.5px 0 var(--gn),inset 0 -1.5px 0 var(--gn),inset -1.5px 0 0 var(--gn)}

/* ===================== Raketen-Kacheln auf der Startseite ===================== */
.reihe.reihe-6,.reihe.reihe-8{grid-auto-columns:minmax(190px,72%)}
@media(min-width:700px){.reihe.reihe-6{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
  .reihe.reihe-8{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}}
.rakete{display:flex;flex-direction:column;gap:7px;padding:13px 14px}
.rk-kopf{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;min-width:0}
@media(min-width:620px){.rk-kopf{flex-wrap:nowrap}}
.rk-name{font-size:13.5px;font-weight:600;line-height:1.25;flex:1;min-width:0}
.rk-perf b{font-family:Anton,sans-serif;font-weight:400;font-size:25px;line-height:1;display:block}
.rk-perf b.gn{color:var(--gn)} .rk-perf b.rd{color:var(--rd)}
.rk-perf span{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:2px}
.rk-fuss{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--faint);
  padding-top:7px;border-top:1px solid var(--line-soft)}
.rk-heute .perf{font-size:11.5px}

/* Tops & Flops: Namen auf gleicher Hoehe */
.tf-zeile .tick{flex:0 0 58px;text-align:center}

/* ===================== Setup-Karte: Status ruhig, Verweise als Knopf ===================== */
.setupk{display:flex;flex-direction:column;gap:9px;padding:13px 14px}
/* Am Handy hatten Stern und Auge zusammen keinen Platz mehr und schoben sich
   aus der Karte. Deshalb darf die Kopfzeile dort umbrechen. */
.sk-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.sk-kopf > .stern:first-of-type{margin-left:auto}
@media(min-width:620px){.sk-kopf{flex-wrap:nowrap}}
.sk-nr{font-size:12px;color:var(--faint)}
.sk-r{margin-left:auto;font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.sk-r.gn{color:var(--gn)} .sk-r.rd{color:var(--rd)}
.sk-crv{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.sk-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--muted);align-self:flex-start}
.sk-status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.sk-status.st-laeuft{color:var(--gn)}
.sk-status.st-warten{color:var(--muted)}
/* Seit 27.10.2026: offen = farbig, beendet = grau. Den Ausgang zeigt die R-Zahl oben (gruen/rot),
   Status und Rand treten zurueck - sonst sehen Aktiv und Winner auf den ersten Blick gleich aus. */
.sk-status.st-ziel{color:var(--gn)}
.sk-status.st-verlust{color:var(--muted)}
.sk-status.st-ziel i,.sk-status.st-verlust i{width:auto;height:auto;border-radius:0;background:none;font-style:normal;font-size:12px;line-height:1}
.sk-status.st-ziel i::before{content:"\2713"}
.sk-status.st-verlust i::before{content:"\2715"}
/* Aktiv: der Punkt pulsiert leicht - "laeuft gerade" */
.sk-status.st-laeuft i{animation:skPuls 2.2s ease-out infinite}
@keyframes skPuls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gn) 55%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.sk-status.st-laeuft i{animation:none}}
.sk-status.st-aus{color:var(--faint)}
/* Status links, Tagesveraenderung rechts (seit 06.10.2026) */
.sk-mitte{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:27px}   /* so hoch wie „Seit Entry“ (27.10.2026): alle Karten gleich hoch, mit und ohne Zahl */
.sk-heute{display:flex;flex-direction:column;align-items:flex-end;line-height:1;flex:0 0 auto}
.sk-heute b{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.sk-heute small{margin-top:3px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sk-heute.gn b{color:var(--gn)} .sk-heute.rd b{color:var(--rd)} .sk-heute.nu b{color:var(--muted)}
/* Dasselbe in der Setups-Liste, Spalte "Ergebnis" (seit 27.10.2026): linksbuendig wie die R-Werte */
.sk-heute.sp-abstand{display:inline-flex;align-items:flex-start}
.sk-fuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line-soft)}
.sk-datum{font-size:11.5px;color:var(--faint)}
.sk-links{margin-left:auto;display:flex;align-items:center;gap:5px}
.sk-btn{font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--card-2);
  border:1px solid var(--line);border-radius:7px;padding:4px 7px;white-space:nowrap}
.sk-btn:hover{border-color:var(--o);color:var(--o)}
.sk-btn.zweit{color:var(--muted)}
/* Der Chart-Knopf oeffnet die Grossansicht in der App - deshalb steht er vorn
   und traegt als Einziger Orange. Die beiden Telegram-Knoepfe daneben bleiben
   ruhig, damit erkennbar ist, welcher Weg die Seite verlaesst und welcher nicht.
   Die Klasse .updk-bild kommt vom Klickhandler der Update-Vorschauen mit; deren
   Bildmasse stehen weiter unten im Stylesheet und werden hier mit der zweiten
   Klasse wieder aufgehoben - sonst gewaenne der spaetere Eintrag. */
.updk-bild.sk-lupe{display:inline-flex;align-items:center;gap:4px;width:auto;height:auto;
  aspect-ratio:auto;font-size:10.5px;font-weight:600;line-height:1;color:var(--o);
  background:var(--o-soft);border:1px solid var(--o-line);border-radius:7px;padding:4px 7px;
  white-space:nowrap;cursor:pointer;overflow:visible;transition:background .15s,border-color .15s,color .15s}
.updk-bild.sk-lupe svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:0 0 auto}
.updk-bild.sk-lupe:hover{background:var(--o);border-color:var(--o);color:#fff}
/* linker Rand zeigt den Status auf einen Blick */
.setupk{border-left:3px solid var(--line)}
.setupk.s-laeuft{border-left-color:var(--gn)}
.setupk.s-warten{border-left-color:var(--o)}
.setupk.s-verlust{border-left-color:var(--faint)}
/* Winner: ganze Karte gruen gerahmt plus leichter Schimmer - Streifen = laeuft, Rahmen = geschafft (Moritz, 27.10.2026) */
.setupk.s-ziel{border:1.5px solid var(--gn);background:color-mix(in srgb,var(--gn) 7%,var(--card))}

/* ===================== Markt: Stimmung breiter ===================== */
.markt-oben{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:900px){.markt-oben{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.baro-svg{max-width:330px}
.neben .baro-svg{max-width:250px}
.neben 
/* ===================== Kalender ===================== */
/* ---- Suche ueber dem Kalender ---- */
.kal-suche{position:relative;margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.kal-feld{width:100%;font:inherit;font-size:13px;padding:9px 34px 9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);outline:none}
.kal-feld:focus{border-color:var(--o)}
.kal-feld::placeholder{color:var(--faint)}
.kal-leeren{position:absolute;right:6px;top:19px;width:24px;height:24px;
  border:0;background:none;color:var(--faint);cursor:pointer;border-radius:6px;font-size:12px;
  display:grid;place-items:center}
.kal-leeren:hover{color:var(--ink);background:var(--card)}
/* Ergebniszeile - steht im Fluss, nichts kann sie abschneiden. Bewusst als
   auffaelliger Kasten: sie ist die Antwort auf die Eingabe und wurde als
   duenne graue Zeile leicht uebersehen. */
.kal-stand{margin-top:12px;padding:11px 13px;border-radius:10px;font-size:13px;
  font-weight:600;line-height:1.5;color:var(--o);
  background:color-mix(in srgb,var(--o) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--o) 40%,transparent);
  border-left:3px solid var(--o)}
.kal-stand.leer{color:var(--ink-2);font-weight:500;
  background:var(--card-2);border-color:var(--line);border-left-color:var(--muted)}
/* Datum ueber jedem Tagesblock - nur waehrend der Suche, weil dann mehrere
   Tage gleichzeitig sichtbar sind */
.kal-datum{display:none;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--o);padding:14px 0 6px}
.kal.suchend .kal-datum{display:block}
.kal.suchend .kal-tag{max-height:none}

.chip-n{display:inline-block;margin-left:5px;font-size:10px;color:var(--faint)}
.chip.on .chip-n{color:var(--o)}
.kal-kopf{display:none}
.kal-zeile{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:11px 0;
  border-top:1px solid var(--line-soft);align-items:baseline}
.kal-zeile:first-of-type{border-top:0}
.kal-sp.zeit{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);grid-row:span 2}
.kal-sp.was{font-size:14px;line-height:1.4}
.kal-sp.zahl{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--ink-2);grid-column:2}
.kal-sp.zahl .kal-l{color:var(--faint);margin-right:5px}
.kal-sp.zahl.ist{color:var(--ink);font-weight:600}
.kal-zeile .wicht{display:inline-flex;gap:2px;margin-right:6px;vertical-align:1px}
@media(min-width:900px){
  .kal-kopf,.kal-zeile{display:grid;grid-template-columns:58px minmax(0,1fr) 92px 92px 92px;gap:12px;align-items:center}
  .kal-kopf{padding:0 0 8px;border-bottom:1px solid var(--line);font-family:"IBM Plex Sans",sans-serif;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .kal-sp.zeit{grid-row:auto}
  .kal-sp.zahl{grid-column:auto;text-align:right}
  .kal-sp.zahl .kal-l{display:none}
  .kal-kopf .kal-sp.zahl{text-align:right}
}
.kal-zeile.w3 .kal-sp.was{font-weight:600}

/* Beide Kalender in der Hoehe begrenzt: die Tagesliste scrollt fuer sich,
   die Tagesschalter darueber bleiben stehen. */
.kal-tag{max-height:56vh;overflow-y:auto;overscroll-behavior:contain}

/* ---- Earnings-Kalender: erbt das Layout des Wirtschaftskalenders,
   braucht nur eine breitere erste Spalte und zwei eigene Textstile ---- */
.ern-name{color:var(--ink-2)}
.ern-mcap{font-size:11.5px;color:var(--faint);white-space:nowrap}
/* Umsatz steht in einer eigenen Zeile unter dem Namen - er gehoert zum
   Ergebnis, soll aber die Kopfzeile nicht sprengen. */
.ern-umsatz{flex-basis:100%;font-size:11.5px;color:var(--muted);white-space:nowrap;margin-top:1px}
.ern-umsatz b{color:var(--ink-2);font-weight:600}
.ern-umsatz em{font-style:normal;font-weight:700;margin-left:5px}
.ern-umsatz em.gn{color:var(--gn)} .ern-umsatz em.rd{color:var(--rd)}
.ern .kal-sp.was{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.ern .kal-sp.zeit{font-size:11.5px}
.ern-wann{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ern-wann svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ern-wann.vorboerse svg{color:var(--o);stroke-width:1.9}
.ern-wann.vorboerse svg circle{fill:color-mix(in srgb,currentColor 22%,transparent)}
/* Nacht in Blau, Tag in Orange - auf einen Blick unterscheidbar, auch wenn
   das Wort daneben am Handy weggelassen wird. */
.ern-wann.nachboerse svg{color:var(--bl);stroke-width:1.9}
.ern-wann.nachboerse svg path{fill:color-mix(in srgb,currentColor 18%,transparent)}
/* Am Handy hat die Zeitspalte sonst die Breite ihres Inhalts. Fehlt die Angabe
   vor- oder nachboerslich, schrumpft sie auf einen Strich und die ganze Zeile
   rutscht nach links. Deshalb eine feste Breite - so stehen alle Firmennamen
   untereinander, egal ob die Angabe da ist. */
.ern .kal-zeile,.ern .kal-kopf{grid-template-columns:88px minmax(0,1fr)}
/* Am Handy nur noch Sonne oder Mond. Das ausgeschriebene Wort machte die
   Spalte breit, obwohl das Symbol allein genuegt - der Rest der Zeile hat
   den Platz noetiger. Wer es genau wissen will, tippt lange darauf. */
@media(max-width:899px){
  .ern .kal-zeile{grid-template-columns:24px minmax(0,1fr)}
  .ern-wort{display:none}
  .ern .kal-sp.zeit{grid-row:span 2;align-self:start;padding-top:2px}
  .ern-wann svg{width:15px;height:15px}
  .ern-wann.leer{color:var(--faint)}
}
.ern .kal-sp.zeit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-earnings .termin .was{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-earnings .ern-wann{flex:0 0 auto}
/* Der Name beginnt immer an derselben Stelle, egal wie lang das Kuerzel ist -
   dasselbe Muster wie bei Tops & Flops. Ohne seitlichen Innenabstand passen
   auch die wenigen siebenstelligen Kuerzel noch in die feste Spalte. */
#s-earnings .termin .tick{flex:0 0 58px;text-align:center;padding-left:0;padding-right:0}
/* Die Zeile fuehrt in den vollen Kalender - als Verweis, aber optisch wie zuvor */
.termin-klick{text-decoration:none;color:inherit;border-radius:9px;
  transition:background .12s}
.termin-klick:hover{background:var(--card-2)}
.termin-pfeil{flex:0 0 auto;color:var(--faint);font-size:15px;line-height:1}
.termin-klick:hover .termin-pfeil{color:var(--o)}
@media(min-width:900px){
  .ern .kal-kopf,.ern .kal-zeile{grid-template-columns:104px minmax(0,1fr) 92px 92px 100px}
}

/* Die Tagesleiste darf am Handy nicht aus dem Bild laufen. Als Flex-Element
   verweigert sie das Schrumpfen, solange min-width auf auto steht - deshalb
   beides: schrumpfen erlauben und stattdessen seitlich scrollen. */
/* Zusaetzlich von unten Luft geben, damit der Abstand in jedem Fall steht */
.kal .tf-schalter{flex-wrap:nowrap;margin-top:8px}
.kal .chips{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.kal .chips::-webkit-scrollbar{display:none}
.kal .chip{flex:0 0 auto}

/* ---- Telegram-Links auf der Wissen-Seite ---- */
.tg-liste{display:grid;gap:7px;margin-top:4px}
.tg-knopf{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line);color:var(--ink);font-size:14px;
  font-weight:600;text-decoration:none;transition:border-color .12s,color .12s}
.tg-knopf:hover{border-color:var(--o);color:var(--o)}
.tg-knopf span{flex:1;min-width:0}
.tg-knopf i{font-style:normal;color:var(--faint);font-size:17px;line-height:1}
.tg-knopf:hover i{color:var(--o)}

/* ===================== Videos ===================== */
.video-karte{padding:0;overflow:hidden}
.video-rahmen{aspect-ratio:16/9;background:var(--card-2)}
.video-rahmen iframe{width:100%;height:100%;border:0;display:block}
.video-titel{padding:11px 14px;font-size:14px;font-weight:600}
.klapp.faq > summary{padding:13px 0;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
.klapp.faq .inhalt{padding-bottom:13px;color:var(--ink-2);font-size:14px;line-height:1.6}

/* Tops & Flops als Verweis */
a.tf-zeile{text-decoration:none}
a.tf-zeile:hover .tf-nm{color:var(--o)}

/* ===================== Update-Karten mit Großansicht ===================== */
.updk{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:13px;overflow:hidden;transition:border-color .15s}
.updk:hover{border-color:var(--o-line)}
.updk-bild{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;
  background:var(--card-2);cursor:zoom-in;overflow:hidden}
.updk-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.updk-bild:hover img{transform:scale(1.03)}
.updk-lupe{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:8px;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:13px;
  opacity:0;transition:opacity .15s}
.updk-bild:hover .updk-lupe,.updk-bild:focus-visible .updk-lupe{opacity:1}
.updk-txt{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px}
.updk-kopf{display:flex;align-items:baseline;gap:8px}
.updk-kopf b{font-size:13px;font-family:"IBM Plex Mono",monospace;font-weight:600}
.updk-kopf i{font-style:normal;font-size:11px;color:var(--faint);margin-left:auto}
.updk-text{font-size:13px;color:var(--ink-2);line-height:1.45}
.updk-btn{align-self:flex-start;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--o);
  border:1px solid var(--o-line);background:var(--o-soft);border-radius:8px;padding:6px 10px}
.updk-btn:hover{filter:brightness(.96)}

/* ===================== Großansicht (Lightbox) ===================== */
.lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:22px 14px}
.lb[hidden]{display:none}
.lb-karte{position:relative;width:min(980px,100%);max-height:92vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.lb-zu{position:absolute;top:11px;right:11px;z-index:3;width:34px;height:34px;border-radius:10px;
  border:0;background:rgba(0,0,0,.55);color:#fff;font-size:15px;cursor:pointer;display:grid;place-items:center}
.lb-zu:hover{background:rgba(0,0,0,.75)}
.lb-bild{width:100%;max-height:68vh;display:block;object-fit:contain;background:var(--card-2)}
/* ---- Galerie in der Grossansicht (Telegram-Alben, 21.09.2026) ----
   Pfeile und Punkte erscheinen nur, wenn ein Beitrag mehr als ein Bild hat.
   Die Pfeile liegen ueber dem Bild, die Punkte darunter an seiner Unterkante. */
.lb-pfeil{position:absolute;top:34vh;z-index:3;width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:none;place-items:center;transition:background .15s}
.lb-pfeil:hover{background:rgba(0,0,0,.78)}
.lb-zurueck{left:12px}
.lb-vor{right:12px}
.lb-punkte{display:none;justify-content:center;gap:7px;padding:10px 0 0}
.lb-galerie .lb-pfeil{display:grid}
.lb-galerie .lb-punkte{display:flex}
.lb-punkt{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .15s,transform .15s}
.lb-punkt.an{background:var(--o);transform:scale(1.25)}
.lb-punkt:hover{background:var(--muted)}
@media(max-width:600px){
  .lb-pfeil{width:36px;height:36px;font-size:20px;top:28vh}
  .lb-zurueck{left:6px} .lb-vor{right:6px}
}
@media(prefers-reduced-motion:reduce){.lb-punkt{transition:none}}

/* Zaehler auf der Vorschau: zeigt schon vor dem Klick, dass mehrere Bilder da sind */
.updk-anzahl{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11.5px;font-weight:600;line-height:1}
.updk-anzahl svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.lb-info{padding:16px 20px 20px}
.lb-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.lb-kopf b{font-size:15px;font-family:"IBM Plex Mono",monospace;font-weight:600}
.lb-kopf span{font-size:11.5px;color:var(--faint);margin-left:auto}
.lb-text{font-size:14px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap}
.lb-link{display:inline-flex;align-items:center;gap:7px;margin-top:15px;padding:10px 15px;
  border-radius:9px;background:var(--o);color:#fff;font-size:13px;font-weight:700}
.lb-link:hover{filter:brightness(.94)}

/* ===================== Heatmap: verschachteltes Treemap ===================== */
.hm-flaeche{position:relative;width:100%;height:min(74vh,660px);border-radius:10px;
  overflow:hidden;background:var(--line-soft)}
.neben .hm-flaeche,.heatmap.gross.kompakt .hm-flaeche{height:300px}
.hm-sekt{position:absolute;padding:15px 2px 2px;box-sizing:border-box}
.hm-sekt-name{position:absolute;top:2px;left:5px;right:4px;font-size:10px;font-weight:700;
  letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:uppercase;pointer-events:none}
.hm-innen{position:relative;width:100%;height:100%}
.hm-flaeche .hz{position:absolute;border-radius:4px;border:1px solid var(--ground);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;transition:filter .12s;padding:1px;line-height:1.1}
.hm-flaeche .hz:hover{filter:brightness(1.12);z-index:6}
.hm-flaeche .hz.aktiv{outline:2px solid var(--ink);outline-offset:-2px;z-index:7}
.hm-flaeche .hz b{font-family:"IBM Plex Sans",sans-serif;font-size:clamp(7px,.85vw,15px);font-weight:700;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-flaeche .hz span{font-size:clamp(6px,.65vw,11px);font-variant-numeric:tabular-nums;opacity:.95;
  white-space:nowrap;overflow:hidden}
/* Winzige Kacheln zeigen nur noch das Kürzel */
.heatmap.alle .hm-flaeche .hz b{font-size:clamp(6px,.62vw,11px);line-height:1.05}
.heatmap.alle .hm-flaeche .hz span{font-size:clamp(5.5px,.55vw,9.5px);line-height:1.05;opacity:.95}
.heatmap.alle .hz{gap:0}
/* Am Rechner die quere Fassung, am Handy die hochkante - beides sind
   echte Heatmaps mit Groessengewichtung, nur anders zugeschnitten. */
.hm-hoch{display:none}
@media(max-width:760px){
  .hm-quer{display:none}
  .hm-hoch{display:block;height:min(150vh,900px)}
  .heatmap.alle .hm-hoch{height:min(220vh,1500px)}
  .hm-hoch .hz b{font-size:9.5px}
  .hm-hoch .hz span{font-size:8.5px}
  .heatmap.alle .hm-hoch .hz b{font-size:8px}
  .heatmap.alle .hm-hoch .hz span{font-size:7.5px}
  .hm-hoch .hm-sekt{padding-top:14px}
  .hm-hoch .hm-sekt-name{font-size:9.5px}
}

/* Gleichmäßige Abstände zwischen den Blöcken der Marktseite */
.markt-oben{margin-top:11px}
.indexleiste + .markt-oben{margin-top:11px}
.markt-oben > .karte{display:flex;flex-direction:column}
/* Die Stimmungs-Box füllt die Höhe der Tops&Flops daneben aus */
.markt-oben .baro{display:flex;flex-direction:column;justify-content:center;flex:1}
.markt-oben .baro-vergleich{margin-top:auto;padding-top:16px}
.markt-oben .baro-vergleich .bv b{font-size:22px}
.markt-oben .baro-vergleich .bv-l{font-size:10.5px}
.markt-oben .baro-vergleich .bv-d{font-size:12px}
.markt-oben .baro-svg{max-width:400px}
.markt-oben .markt-oben .baro-zahl{font-size:46px}
.markt-oben .baro-stufe{font-size:16px}

/* Raketen auf der Startseite: genau drei nebeneinander */
@media(min-width:700px){.reihe.reihe-3{grid-template-columns:repeat(3,1fr)}}

/* ===================== Barometer: Skala über die volle Breite ===================== */
.baro-skala{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  max-width:430px;margin:-6px auto 0;padding:0 2px}
.baro-skala span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);line-height:1.25;flex:0 0 auto}
.baro-skala .bs-links{text-align:left}
.baro-skala .bs-rechts{text-align:right}
.baro-skala .bs-mitte{flex:1;text-align:center;font-size:15px;letter-spacing:0;text-transform:none;
  font-weight:700;color:var(--ink);align-self:center}
.neben .baro-skala{max-width:280px}
.neben .baro-skala .bs-mitte{font-size:13.5px}

/* ===================== Kleine Heatmap auf der Startseite ===================== */
.heat-klein{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.hzk:hover{transform:scale(1.06);z-index:3}
.hzk.aktiv{outline:2px solid var(--ink);outline-offset:1px;z-index:4}

/* Heatmap: Beschriftung nur wo Platz ist */
.hm-flaeche .hz.nur-tick span{display:none}
.hm-flaeche .hz.leer b,.hm-flaeche .hz.leer span{display:none}

/* Tops & Flops: nichts läuft mehr aus der Box */
.tf{min-width:0}
.tf-sp{min-width:0}
.tf-zeile{min-width:0}
.tf-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-zeile .perf{flex:0 0 auto;text-align:right;min-width:62px}
.tf-zeile .tick{flex:0 0 58px;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* In der halbbreiten Karte auf der Marktseite wird es sonst zu eng */
.markt-oben .tf{gap:16px}
.markt-oben .tf-zeile{gap:7px;font-size:12.5px}
.markt-oben .tf-zeile .tick{flex:0 0 48px;max-width:48px;font-size:11.5px}
.markt-oben .tf-zeile .perf{font-size:12.5px;min-width:56px}
.markt-oben .baro-svg{max-width:330px}
@media(min-width:900px) and (max-width:1120px){
  .markt-oben .tf{grid-template-columns:1fr}
}

/* ===================== Wissen: Videos ===================== */
.video-raster{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:900px){.video-raster{grid-template-columns:repeat(3,1fr)}}
/* Ausklapp-Knopf fuer die restlichen Videos */
.mehr-klapp{margin-top:11px}
.mehr-klapp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  font-size:13px;font-weight:600;color:var(--muted);transition:color .12s,border-color .12s}
.mehr-klapp > summary::-webkit-details-marker{display:none}
.mehr-klapp > summary:hover{color:var(--o);border-color:var(--o)}
.mehr-klapp > summary:after{content:"▾";font-size:11px;transition:transform .2s}
.mehr-klapp[open] > summary:after{transform:rotate(180deg)}
.mehr-klapp > summary .zu{display:none}
.mehr-klapp[open] > summary .auf{display:none}
.mehr-klapp[open] > summary .zu{display:inline}
.mehr-klapp .video-raster{margin-top:11px}

/* Firmenname neben dem Ticker in den Update-Karten */
.updk-kopf em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0}
.updk-kopf{min-width:0}

/* ===================== Tagesbilanz über der Heatmap ===================== */
.hm-bilanz{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.hm-bilanz .hb-z{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.hm-bilanz .hb-z b{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;margin-right:3px}
.hm-bilanz .hb-z.gn b{color:var(--gn)} .hm-bilanz .hb-z.rd b{color:var(--rd)}
.hm-bilanz .hb-balken{flex:1;min-width:40px;height:5px;border-radius:99px;overflow:hidden;
  background:var(--rd);display:block}
.hm-bilanz .hb-balken i{display:block;height:100%;background:var(--gn);border-radius:99px}
@media(max-width:520px){.hm-bilanz{gap:8px}.hm-bilanz .hb-z{font-size:10.5px}
  .hm-bilanz .hb-z b{font-size:13.5px}}

/* Kacheln der kleinen Heatmap: Kürzel, Name, Tagesveränderung */
.hzk{border-radius:11px;padding:9px 10px;display:flex;flex-direction:column;justify-content:center;
  gap:2px;min-height:74px;cursor:pointer;overflow:hidden;transition:transform .12s,box-shadow .12s}
.hzk:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.16);z-index:3}
.hzk.aktiv{outline:2px solid var(--ink);outline-offset:1px;z-index:4}
.hzk b{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700;line-height:1.15}
.hzk em{font-style:normal;font-size:10.5px;line-height:1.2;opacity:.82;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hzk span{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
@media(max-width:620px){.heat-klein{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.heat-klein{grid-template-columns:repeat(2,1fr)}
  .hzk{min-height:64px;padding:8px}.hzk b{font-size:12px}.hzk em{font-size:10px}.hzk span{font-size:11.5px}}

/* ===================== Nachbesserungen ===================== */
/* hidden muss immer gewinnen - sonst zeigen Grid-/Flex-Regeln versteckte Blöcke doch an */
[hidden]{display:none!important}

/* Setup-Karten: die Knöpfe stehen immer unten, egal ob einer oder zwei */
.sk-fuss{flex-direction:column;align-items:stretch;gap:9px;flex-wrap:nowrap}
.sk-links{align-self:flex-end;margin-left:0}

/* Vorschaubilder im Dunkelmodus umkehren - die Charts sind fast immer weiß.
   Die Farben werden dabei zurückgedreht, damit Grün grün und Rot rot bleibt.
   Die Großansicht zeigt bewusst das Originalbild. */
:root[data-theme="dark"] .updk-bild img{filter:invert(1) hue-rotate(180deg) brightness(.90) contrast(.95)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .updk-bild img{filter:invert(1) hue-rotate(180deg) brightness(.90) contrast(.95)}
}

/* Kleiner Zusatz neben einer Überschrift, z. B. welche Setup-Variante gezeigt wird */
.abschnitt-kopf .kopf-hinweis{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--faint);
  border:1px solid var(--line);border-radius:7px;padding:2px 7px;white-space:nowrap}

/* Eigener Hinweiskasten - der native Titel-Hinweis des Browsers kommt zu spät
   und passt nicht zum Rest. Gleicher Look wie der Kasten an der Heatmap. */
/* Sprungziele duerfen nicht unter dem festen Kopf verschwinden */
.abschnitt,[id]{scroll-margin-top:calc(var(--kopf-h) + 16px)}
.tip{position:relative;cursor:help;outline:none}
/* In einer Tabellenzelle braucht der Hinweis einen eigenen Bezugspunkt */
td.tip{position:relative}
.tip:after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 9px);
  transform:translate(-50%,4px);background:var(--ink);color:var(--ground);border-radius:10px;
  padding:8px 11px;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;
  line-height:1.4;width:max-content;max-width:250px;white-space:normal;text-align:left;
  box-shadow:0 10px 28px rgba(0,0,0,.22);opacity:0;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;z-index:60}
.tip:before{content:"";position:absolute;left:50%;top:calc(100% + 4px);transform:translate(-50%,4px);
  border:5px solid transparent;border-bottom-color:var(--ink);opacity:0;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;z-index:61}
.tip:hover:after,.tip:focus:after,.tip:hover:before,.tip:focus:before{opacity:1;transform:translate(-50%,0)}
/* Am Handy ragte der Hinweis links aus dem Bild. Ein kleiner Helfer im Skript
   rechnet die passende Kante aus und legt sie in --tip-x ab; die Breite in
   --tip-b sorgt dafuer, dass er nie breiter als der Schirm wird. Der Pfeil
   bleibt auf der Mitte des Elements stehen. */
.tip.tip-frei:after{left:var(--tip-x,0);right:auto;transform:translate(0,4px);
  max-width:var(--tip-b,250px)}
.tip.tip-frei:hover:after,.tip.tip-frei:focus:after{transform:translate(0,0)}
.tip:focus{border-color:var(--o);color:var(--muted)}

/* ===================== Fear & Greed auf der Marktseite: mehr Raum ===================== */
@media(min-width:900px){
  .markt-oben .baro{padding:4px 0 2px}
  .markt-oben .baro-svg{max-width:400px;width:100%}
  .markt-oben .baro-skala{max-width:390px;padding:0 2px}
  .markt-oben .baro-skala span{font-size:10.5px}
  .markt-oben .baro-skala .bs-mitte{font-size:16px}
  .markt-oben .baro-zahl{font-size:46px;line-height:1}
  .markt-oben .baro-vergleich{padding-top:20px}
  .markt-oben .baro-vergleich .bv b{font-size:24px}
  .markt-oben .baro-vergleich .bv-l{font-size:11px}
  .markt-oben .baro-vergleich .bv-d{font-size:12.5px}
}

/* Stimmung farblich: von knallrot über grau bis knallgrün */
.baro.fg-xangst  .bs-mitte,.baro.fg-xangst  .baro-zahl{color:#e6192d}
.baro.fg-angst   .bs-mitte,.baro.fg-angst   .baro-zahl{color:#e8735f}
.baro.fg-neutral .bs-mitte,.baro.fg-neutral .baro-zahl{color:var(--muted)}
.baro.fg-gier    .bs-mitte,.baro.fg-gier    .baro-zahl{color:#3faa5f}
.baro.fg-xgier   .bs-mitte,.baro.fg-xgier   .baro-zahl{color:#00b050}
:root[data-theme="dark"] .baro.fg-angst .bs-mitte,:root[data-theme="dark"] .baro.fg-angst .baro-zahl{color:#ff9384}
:root[data-theme="dark"] .baro.fg-gier  .bs-mitte,:root[data-theme="dark"] .baro.fg-gier  .baro-zahl{color:#5fca7e}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .baro.fg-angst .bs-mitte,
  :root:not([data-theme="light"]) .baro.fg-angst .baro-zahl{color:#ff9384}
  :root:not([data-theme="light"]) .baro.fg-gier .bs-mitte,
  :root:not([data-theme="light"]) .baro.fg-gier .baro-zahl{color:#5fca7e}
}

/* =============================================================================
   Persönliche Bereiche: Watchlist, Gemerktes, Neues seit dem letzten Besuch
   ============================================================================= */

/* ---- Merk-Stern ---- */
.stern{border:0;background:none;padding:3px;margin:-3px;cursor:pointer;line-height:0;
  color:var(--faint);border-radius:6px;transition:color .12s,transform .12s;flex:0 0 auto}
.stern svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
/* Hover nur, wo es einen Zeiger gibt. Auf dem Handy bleibt der Zustand nach
   dem Tippen haengen, bis man woanders hintippt - das Auge blieb deshalb nach
   dem Entfernen von der Watchlist gruen, obwohl die Klasse `an` laengst weg
   war. Es sah aus wie ein Fehler in der Logik und war eine Fussnote im CSS
   (16.09.2026). */
@media (hover: hover) {
  .stern:hover{color:var(--o);transform:scale(1.12)}
  .stern.auge:hover{color:var(--gn)}
}
.stern.an{color:var(--o)}
.stern.an svg{fill:currentColor}
.stern:focus-visible{outline:2px solid var(--o);outline-offset:1px}
/* Das Auge: gleiche Mechanik wie der Stern, eigene Farbe zur Unterscheidung.
   Stern = merken, Auge = auf die Watchlist. */
.stern.auge{color:var(--faint)}
.stern.auge.an{color:var(--gn)}
.stern.auge.an svg{fill:none}
.stern.auge.an circle{fill:currentColor}
/* Kurze Erklaerung unter den beiden Listen - beantwortet die Frage
   "was ist der Unterschied zwischen Stern und Auge" an Ort und Stelle */
.listen-legende{margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.5;color:var(--muted)}
.listen-legende span{display:flex;gap:7px;align-items:flex-start}
.listen-legende b{color:var(--ink-2);font-weight:600}
.lg-bild{flex:0 0 auto;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round}
/* Dasselbe Symbol auch in der Ueberschrift - macht auf einen Blick klar,
   welcher Knopf welche Liste fuellt. */
.bereich-titel .lg-bild{width:15px;height:15px;vertical-align:-2px;margin-left:3px}
.lg-auge{color:var(--gn)}
.lg-stern{color:var(--o);fill:currentColor}
/* Tops & Flops: Zeile und Auge nebeneinander */
.tf-reihe{display:flex;align-items:center;gap:8px;min-width:0}
.tf-reihe .tf-zeile{flex:1;min-width:0}
/* Stern und Auge stehen in der festen ersten Spalte unter Kuerzel bzw. Name.
   Rechts aussen waeren sie am Handy nur nach seitlichem Scrollen erreichbar. */
.sp1-tat{display:flex;gap:2px;margin-top:5px}
.sp1-name{display:block;font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap}
@media(max-width:699px){.sp1-name{display:none}}
table.liste.fixiert td.sp1{vertical-align:top}
.rk-tat{white-space:nowrap}
.rk-tat .stern{margin-right:4px}
.sk-kopf .stern{margin-left:6px}
.updk-kopf .stern{margin-left:4px}
/* Nichts darf aus seiner Karte herausragen */
.setupk,.rakete,.updk{overflow:hidden}
.rk-kopf .stern{margin-left:auto}
.rk-kopf .mini-tg{margin-left:6px}

/* ---- Band: seit deinem letzten Besuch ---- */
.neu-band{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--o);
  border-radius:12px;background:var(--card)}
.nb-titel{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--o)}
.nb-text{font-size:13px;font-weight:600;color:var(--ink)}
.nb-liste{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.nb-chip{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--card-2);
  border:1px solid var(--line);border-radius:8px;padding:4px 8px;white-space:nowrap}
.nb-chip b{font-family:"IBM Plex Mono",monospace;color:var(--ink-2);margin-right:3px}
.nb-chip:hover{border-color:var(--o);color:var(--o)}
.nb-ern{font-size:13px;color:var(--ink-2);white-space:normal}
.nb-ern b{color:var(--o);font-weight:700}
.nb-chip.nb-ern-chip b{color:var(--o)}
@media(max-width:720px){.nb-liste{margin-left:0;width:100%}
  .nb-ern{width:100%}}

/* ---- Watchlist und Gemerktes nebeneinander ---- */
.meins-raster{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:900px){.meins-raster{grid-template-columns:1fr 1fr}}
.meins-raster > div{display:flex;flex-direction:column;min-width:0}
/* Karten behalten ihre Inhaltshoehe. Vorher wurden sie auf die Hoehe der
   Nachbarspalte gestreckt - eine fast leere Merkliste sah dann unnoetig
   lang aus. Unterschiedlich hohe Spalten sind das kleinere Uebel. */
.meins-raster .karte{flex:0 0 auto}

/* ---- Watchlist ---- */
.wl-box{display:flex;flex-direction:column;gap:11px;min-height:190px}
.wl-suche{position:relative}
/* 16 px, damit Safari auf dem iPhone beim Antippen nicht in die Seite zoomt.
   Darunter tut es das immer, und die Seite steht danach schief. */
.wl-feld{width:100%;font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);outline:none}
.wl-feld:focus{border-color:var(--o)}
.wl-feld::placeholder{color:var(--faint)}
.wl-treffer{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;max-height:270px;
  overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.16);padding:4px}
.wl-vorschlag{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;
  background:none;padding:7px 8px;border-radius:8px;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--ink);min-width:0}
.wl-vorschlag:hover{background:var(--card-2)}
.wl-vorschlag > span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--muted)}
.wl-vorschlag em{font-style:normal;font-size:10.5px;color:var(--faint);white-space:nowrap}
/* Umschalter ueber der Watchlist. Erscheint erst ab zwei Aktien - bei einer
   einzelnen waere er nur Ballast. */
/* Sortierung und Zeitraum stehen nebeneinander in einer Leiste. Zwischen
   beiden Gruppen ein etwas groesserer Abstand plus feiner Strich, damit man
   sieht, dass es zwei verschiedene Fragen sind: wonach ordnen, und welcher
   Zeitraum. Wird es zu eng, rutscht die zweite Gruppe in die naechste Zeile. */
.wl-leisten{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:10px 0 4px}
.wl-zeit{display:flex;align-items:center}
.wl-zeit .chips{flex:0 0 auto}
.wl-leisten .wl-sort+.wl-zeit{padding-left:14px;border-left:1px solid var(--line)}
.wl-leisten .wl-sort-hinweis{margin-left:auto;flex:0 1 auto;text-align:right}
@media(max-width:760px){
  /* Der Hinweis kostet Breite, die die Chips brauchen - und wer zweimal auf
     denselben Chip tippt, findet die Umkehrung ohnehin von allein. */
  .wl-leisten .wl-sort-hinweis{display:none}
}
@media(max-width:560px){
  /* Enger schnueren, damit beide Gruppen nebeneinander bleiben statt
     umzubrechen. Der Trennstrich wandert in den kleineren Abstand. */
  .wl-leisten{gap:6px 8px}
  .wl-leisten .wl-sort+.wl-zeit{padding-left:8px}
  .wl-leisten .chips{gap:2px;padding:2px}
  .wl-leisten .chip{padding:5px 7px}
}
.wl-sort{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0}
.wl-sort .chips{flex:0 0 auto}
.wl-sort-hinweis{font-size:11px;color:var(--faint);flex:1;min-width:0}
.sort-pfeil{font-size:10px;opacity:.85;margin-left:1px}
table.liste th.sortierbar{cursor:pointer;user-select:none;-webkit-user-select:none}
table.liste th.sortierbar:hover{color:var(--ink,inherit)}
@media(max-width:520px){.wl-sort-hinweis{display:none}}
.wl-liste{display:flex;flex-direction:column}
.wl-leer{padding:14px 2px}
/* Eine Watchlist-Zeile hat zwei Ebenen:
   oben Kuerzel, Name und ganz rechts die Tagesperformance,
   darunter die Marken - links, buendig unter dem Kuerzel.
   Feste Spalten sorgen dafuer, dass Namen und Prozentwerte ueber alle Zeilen
   an derselben Stelle stehen, egal wie lang das Kuerzel ist. */
.wl-zeile{display:flex;flex-direction:column;gap:6px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);min-width:0}
.wl-zeile:last-child{border-bottom:0}
.wl-haupt{display:grid;grid-template-columns:58px minmax(0,1fr) 76px auto;
  gap:10px;align-items:center;min-width:0}
.wl-zeile .tick{text-align:center;padding-left:0;padding-right:0}
.wl-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:var(--muted)}
.wl-haupt .perf{font-weight:700;font-size:13.5px;justify-self:end;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wl-zusatz{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.wl-marke{font-size:10.5px;font-weight:600;border-radius:7px;padding:3px 7px;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted)}
a.wl-marke:hover{border-color:var(--o);color:var(--o)}
.wl-marke.m-setup{color:var(--o);border-color:color-mix(in srgb, var(--o) 45%, transparent)}
.wl-marke.m-rakete{color:var(--gn);border-color:color-mix(in srgb, var(--gn) 45%, transparent)}
/* Der einzige Knopf in dieser Reihe - die anderen Marken sind Verweise oder
   nur Beschriftung. Deshalb traegt er den Orangeton der Marke, damit man
   sieht, dass hier etwas passiert. `font:inherit` ist noetig, weil ein
   <button> sonst seine eigene Schrift mitbringt und aus der Reihe faellt. */
.wl-marke.wl-details{font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;
  background:var(--o-soft);color:var(--o);border-color:var(--o-line);
  line-height:1.35;touch-action:manipulation}
/* Quartalszahlen: diese Woche zurueckhaltend, heute deutlich */
.wl-marke.m-earnings{color:var(--ink-2);border-color:var(--line);
  display:inline-flex;align-items:center;gap:5px}
/* Das Symbol in der Marke etwas kleiner - es steht neben Text, nicht allein */
.marke-wann{display:inline-flex;line-height:0}
.marke-wann svg{width:12px;height:12px}
.wl-marke.m-earnings.heute{color:var(--o);border-color:color-mix(in srgb, var(--o) 55%, transparent);
  background:color-mix(in srgb, var(--o) 9%, transparent)}
.wl-weg{border:0;background:none;color:var(--faint);cursor:pointer;font-size:13px;line-height:1;
  padding:4px 5px;border-radius:6px}
.wl-weg:hover{color:var(--rd);background:var(--rd-soft)}

/* ---- Gemerktes ---- */
.merk-box{display:flex;flex-direction:column}
/* Kleine Ueberschrift je Gruppe. Die Merkliste ist ohnehin nach Art sortiert -
   das macht die vorhandene Ordnung sichtbar, ohne dass man bedienen muss. */
.merk-gruppe{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:14px 0 5px;border-bottom:1px solid var(--line-soft);margin-bottom:2px}
.merk-gruppe:first-child{padding-top:2px}
.merk-zeile{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);min-width:0;font-size:13px}
.merk-zeile:last-child{border-bottom:0}
.merk-art{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 6px;flex:0 0 auto}
.merk-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.merk-name{color:var(--ink)}
.merk-zeile .perf{flex:0 0 auto;font-weight:700}

/* ---- Kurzer Hinweis nach dem Merken ---- */
.merk-hinweis{position:fixed;right:18px;bottom:84px;z-index:90;background:var(--ink);color:var(--ground);
  border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.24);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;max-width:260px}
.merk-hinweis.an{opacity:1;transform:none}
.merk-hinweis.fehler{background:var(--rd);color:#fff}
@media(min-width:900px){.merk-hinweis{bottom:22px}}

/* Rakete in der Merkliste: Tageswert und Archiv-Verweis nebeneinander */
.merk-perf{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:5px}
.merk-perf em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.merk-perf .perf{font-weight:700}

/* Stimmungsverlauf: Beschriftung als Text neben dem Bild, feste Größe */
.fgc-flaeche{position:relative;padding-bottom:16px}
.fgc-marke{position:absolute;left:0;width:24px;text-align:right;transform:translateY(-50%);
  font-size:9.5px;font-variant-numeric:tabular-nums;color:var(--faint);pointer-events:none}
.fgc-datum{position:absolute;bottom:0;font-size:9.5px;color:var(--faint);pointer-events:none}
.fgc-datum.links{left:30px}
.fgc-datum.rechts{right:6px}

/* =============================================================================
   Dein Circle: Besuchsreihe, Monatszahlen, Meilensteine
   ============================================================================= */
/* In der breiten Spalte zwei Bahnen: links die Zahlen, rechts die Abzeichen */
.mein-box{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.mein-box{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px}}
.mein-links,.mein-rechts{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:900px){
  .mein-rechts{border-left:1px solid var(--line-soft);padding-left:22px}
  .mein-ziel,.mein-abzeichen{border-top:0;padding-top:0}
}
.mein-zahlen{margin-top:auto}
.mein-reihe{display:flex;align-items:center;gap:13px}
.mr-zahl{flex:0 0 auto;text-align:center;min-width:62px;padding:9px 10px;border-radius:12px;
  background:var(--card-2);border:1px solid var(--line)}
.mr-zahl b{display:block;font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mr-zahl small{display:block;margin-top:3px;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.mr-zahl.heiss{border-color:var(--o);background:var(--o-soft)}
.mr-zahl.heiss b{color:var(--o)}
.mr-text{font-size:12.5px;color:var(--muted);line-height:1.45}
.mr-text b{color:var(--ink)}

.mein-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(min-width:520px){.mein-zahlen{grid-template-columns:repeat(3,1fr)}}
.mz{background:var(--card-2);border-radius:10px;padding:9px 10px;min-width:0}
.mz b{display:block;font-size:18px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.mz small{display:block;margin-top:3px;font-size:10px;color:var(--faint);line-height:1.3}

.mein-rang{font-size:12.5px;color:var(--muted);background:var(--gn-soft);border-radius:10px;padding:9px 11px}
.mein-rang b{color:var(--gn)}

.mein-ziel{border-top:1px solid var(--line-soft);padding-top:12px}
.mzl-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mzl-kopf span{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.mzl-kopf b{font-size:13px;color:var(--o)}
.mzl-text{font-size:13px;font-weight:600;margin:4px 0 7px}
.mzl-balken{display:block;height:5px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.mzl-balken i{display:block;height:100%;background:var(--o);border-radius:99px}

.mein-abzeichen{border-top:1px solid var(--line-soft);padding-top:12px}
.ma-titel{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  margin-bottom:9px;display:flex;align-items:center;gap:6px}
.ma-titel span{background:var(--card-2);border-radius:6px;padding:1px 6px;font-size:10px;color:var(--muted)}
.ma-liste{display:flex;flex-wrap:wrap;gap:7px}
.ma-karte{flex:0 0 auto;text-align:center;min-width:56px;padding:8px 9px;border-radius:11px;
  background:var(--card-2);border:1px solid var(--line);cursor:help}
.ma-karte b{display:block;font-size:17px;font-weight:800;line-height:1;color:var(--o);
  font-variant-numeric:tabular-nums}
.ma-karte b.ma-name{font-size:12px;letter-spacing:-.01em}
.ma-karte small{display:block;margin-top:4px;font-size:9px;font-weight:600;color:var(--faint);white-space:nowrap}
.ma-klapp{margin-top:12px}
.ma-offen{padding:7px 0;border-bottom:1px solid var(--line-soft)}
.ma-offen:last-child{border-bottom:0}
.mao-text{font-size:12.5px}
.mao-rest{float:right;font-size:11.5px;color:var(--faint)}
.ma-offen .mzl-balken{margin-top:6px;height:4px}

/* ---- Bulle oder Bär ---- */
.bb-box{display:flex;flex-direction:column;gap:11px;margin-bottom:11px}
.bb-frage{font-size:13.5px;font-weight:700}
.bb-wahl{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bb-knopf{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--card-2);font:inherit;color:var(--ink);
  transition:border-color .12s,background .12s,transform .1s}
.bb-knopf:hover{transform:translateY(-1px)}
.bb-zeichen{font-size:22px;line-height:1}
.bb-wort{font-size:12px;font-weight:700}
.bb-knopf.bull:hover,.bb-knopf.bull.an{border-color:var(--gn);background:var(--gn-soft);color:var(--gn)}
.bb-knopf.bear:hover,.bb-knopf.bear.an{border-color:var(--rd);background:var(--rd-soft);color:var(--rd)}
.bb-band{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-soft)}
.bb-band i{display:block;height:100%;transition:width .3s ease}
.bb-band .bb-bull{background:var(--gn)} .bb-band .bb-bear{background:var(--rd)}
.bb-zahlen{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:11.5px;color:var(--muted)}
.bb-zahlen b{font-weight:700;font-variant-numeric:tabular-nums}
.bb-zahlen .gn b{color:var(--gn)} .bb-zahlen .rd b{color:var(--rd)}
.bb-summe{color:var(--faint)}
.bb-hinweis{font-size:11.5px;color:var(--faint);line-height:1.4}

/* ---- Meistbeobachtet ---- */
.trend-box{display:flex;flex-direction:column}
.tr-zeile{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:9px;
  padding:8px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.tr-zeile:last-child{border-bottom:0}
.tr-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--muted)}
.tr-koepfe{font-size:11.5px;font-weight:700;color:var(--o);font-variant-numeric:tabular-nums;cursor:help}
.tr-balken{grid-column:1/-1;height:3px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:-3px}
.tr-balken i{display:block;height:100%;background:var(--o);opacity:.6;border-radius:99px}

/* ---- Abzeichen: Siegel mit Zackenrand ----
   Runde Ringe sahen aus wie Ladeanzeigen. Die Zackenform ist als Auszeichnung
   unverkennbar; Symbol oben, erreichte Stufe darunter, Wertigkeit an der Farbe. */
.ma-liste{display:flex;flex-wrap:wrap;gap:12px 10px}
.abz{flex:0 0 auto;width:66px;text-align:center;cursor:help}
.abz-siegel{position:relative;display:block;width:52px;height:52px;margin:0 auto}
.abz-form{position:absolute;inset:0;width:100%;height:100%}
.abz-inhalt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;line-height:1}
.abz-inhalt svg{width:15px;height:15px;fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;margin-top:2px}
.abz-inhalt b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px}
.abz small{display:block;margin-top:6px;font-size:9.5px;font-weight:600;color:var(--faint);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis}

/* Vier Stufen wie bei Medaillen: Bronze, Silber, Gold, Diamant.
   Jede fuer sich sichtbar, auch auf hellem Grund. */
.abz.r1 .abz-form{fill:url(#abzBronze)}
.abz.r2 .abz-form{fill:url(#abzSilber)}
.abz.r3 .abz-form,.abz.r4 .abz-form{fill:url(#abzGold)}
.abz.r5 .abz-form,.abz.r6 .abz-form,.abz.r7 .abz-form{fill:url(#abzDiamant)}
/* Auf Bronze weisse Schrift, auf den helleren Stufen dunkle */
.abz.r1 .abz-inhalt svg{stroke:#fff}
.abz.r1 .abz-inhalt b{color:#fff}
.abz.r2 .abz-inhalt svg{stroke:#4a5260}
.abz.r2 .abz-inhalt b{color:#4a5260}
.abz.r3 .abz-inhalt svg,.abz.r4 .abz-inhalt svg{stroke:#6b4600}
.abz.r3 .abz-inhalt b,.abz.r4 .abz-inhalt b{color:#6b4600}
.abz.r5 .abz-inhalt svg,.abz.r6 .abz-inhalt svg,.abz.r7 .abz-inhalt svg{stroke:#155a76}
.abz.r5 .abz-inhalt b,.abz.r6 .abz-inhalt b,.abz.r7 .abz-inhalt b{color:#155a76}
.abz .abz-siegel{filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
/* Diamant funkelt ein wenig */
.abz.r5 .abz-siegel,.abz.r6 .abz-siegel,.abz.r7 .abz-siegel{filter:drop-shadow(0 2px 7px rgba(95,179,221,.45))}

/* Mini-Legende: die Stufen in ihrer Reihenfolge */
.ma-legende{display:flex;align-items:center;flex-wrap:wrap;gap:3px 7px;margin-top:12px;
  font-size:10px;color:var(--faint)}
.ma-legende b{font-weight:600;color:var(--faint);margin-right:2px}
.ma-legende .lg{width:11px;height:11px;border-radius:3px;display:inline-block;cursor:help}
.ma-legende .lg.s1{background:linear-gradient(150deg,#e0a877,#9a5c2b)}
.ma-legende .lg.s2{background:linear-gradient(150deg,#f7f9fc,#9aa3b2)}
.ma-legende .lg.s3{background:linear-gradient(150deg,#ffe396,#d18b06)}
.ma-legende .lg.s4{background:linear-gradient(150deg,#f2fdff,#5fb3dd)}
.ma-legende em{font-style:normal;opacity:.7}

/* =============================================================================
   Mobil: nichts darf die Seite breiter machen als das Fenster
   ============================================================================= */
/* Raster-Kinder bekommen von sich aus min-width:auto - ein Bild mit
   width-Attribut zwingt die Spalte dann auf seine Eigenbreite und schiebt die
   ganze Seite auseinander. Das ist die Ursache der zu breiten Seite. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
.dash,.haupt,.neben,.abschnitt,.karte{min-width:0}
.upd-raster,.upd-raster>*,.updk,.updk-txt,.updk-kopf,.reihe,.reihe>*,
.raster,.raster>*,.meins-raster,.meins-raster>*,.video-raster,.video-raster>*,
.mein-box,.mein-links,.mein-rechts{min-width:0}
.updk-bild{flex:0 0 auto}
.updk-text{overflow-wrap:anywhere}
.ticker,.ticker-fenster{max-width:100%}   /* das Laufband selbst braucht max-content */

/* Am Handy stehen die Abschnitte enger beieinander - der erste unter dem
   Ticker braucht besonders wenig Abstand, sonst klafft dort eine Lücke. */
@media(max-width:619px){
  .abschnitt{margin-top:16px}
  .haupt > .abschnitt:first-child{margin-top:10px}
  .ticker{margin-bottom:8px}
}

/* Die persönlichen Blöcke am Handy */
@media(max-width:520px){
  .mein-zahlen{grid-template-columns:repeat(2,1fr)}
  .mr-zahl{min-width:56px;padding:8px}
  .mr-zahl b{font-size:22px}
  .abz{width:62px}
  .abz-rund{width:46px;height:46px}
  .abz-rund svg{width:20px;height:20px}
  .bb-zeichen{font-size:20px}
  .bb-zahlen{flex-wrap:wrap;row-gap:3px}
  .tr-zeile{grid-template-columns:auto 1fr auto;row-gap:2px}
  .tr-koepfe{grid-column:3}
  .wl-zusatz{width:100%;justify-content:flex-start}
  .merk-zeile{flex-wrap:wrap;row-gap:4px}
  .merk-txt{flex:1 1 100%;order:3;white-space:normal}
}

/* ---- Vorschaubilder: Hinweis auf die Großansicht ---- */
.updk-lupe{right:8px;top:8px;bottom:auto;opacity:1;width:auto;height:24px;padding:0 8px;
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  border-radius:7px;letter-spacing:.02em;backdrop-filter:blur(2px)}
.updk-lupe svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
.updk-lupe:after{content:"Großansicht"}
.updk-bild:hover .updk-lupe{background:rgba(0,0,0,.72)}
@media(min-width:900px){.updk-lupe:after{content:"Groß"}}

/* ---- Am Handy erst eine Karte, der Rest auf Knopfdruck ---- */
.upd-mehr{display:none;width:100%;margin-top:9px;padding:10px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.upd-mehr:hover{border-color:var(--o);color:var(--o)}
@media(max-width:619px){
  .upd-mehr{display:block}
}
.upd-mehr .zu{display:none}
.upd-mehr.offen .auf{display:none}
.upd-mehr.offen .zu{display:inline}

/* ---- Farbschema-Knopf: welcher Modus gerade gilt, ist sichtbar ---- */
.ik-theme{position:relative}
.ik-theme svg{display:none}
:root[data-mode="auto"] .ik-theme .t-auto,
:root:not([data-mode]) .ik-theme .t-auto{display:block}
:root[data-mode="dark"] .ik-theme .t-dark{display:block}
:root[data-mode="light"] .ik-theme .t-light{display:block}
/* Kleiner Punkt zeigt an, dass eine feste Wahl gilt statt der Systemvorgabe */
.t-punkt{position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;
  background:var(--o);display:none}
:root[data-mode="dark"] .t-punkt,:root[data-mode="light"] .t-punkt{display:block}

.mein-vorschau{font-size:12px;color:var(--muted);background:var(--card-2);border-radius:10px;
  padding:9px 11px;line-height:1.45}


/* =============================================================================
   Reihenfolge am Handy
   Am Desktop stehen die Abschnitte in zwei Spalten - dort bleibt alles wie es ist.
   Darunter loesen sich die Spalten auf und die Abschnitte laufen in EINER Reihe
   durch, in der Reihenfolge, in der man sie morgens sehen will: erst was sich
   taeglich aendert, dann der Inhalt, dann das Eigene, zuletzt Nachschlagbares.
   ============================================================================= */
@media(max-width:1179px){
  .dash{display:flex;flex-direction:column}
  .dash > .haupt,.dash > .neben{display:contents}

  #bullebaer        {order:10}
  #s-indexstaende   {order:20}
  #s-setups         {order:30}
  #s-archiv         {order:40}
  #s-raketen        {order:50}
  #s-indexupd       {order:60}
  #s-sektoren       {order:65}
  #s-stimmung       {order:70}
  #s-topflops       {order:80}
  #s-heatmapklein   {order:90}
  #meincircle       {order:100}
  #meins            {order:110}
  #s-termine        {order:120}
  #s-earnings       {order:125}
  #s-event          {order:130}
  .masterbox        {order:900}

  /* Der erste Abschnitt sitzt direkt unter dem Ticker - am Wochenende fehlt
     "Bulle oder Baer", dann ist "Markt" der erste und bekommt denselben Abstand */
  #bullebaer{margin-top:10px}
  .dash:not(:has(#bullebaer)) #s-indexstaende{margin-top:10px}
  /* Der Push-Hinweis steht ohne eigene Ordnung ganz vorn und ist meist leer
     (seine Karte ist versteckt) - dann darf der Abschnitt keinen Platz nehmen */
  #pushhinweis:not(:has(#pushBox:not([hidden]))){display:none}
}

/* ---- Marktseite am Handy: Stimmung und Verlauf gehören zusammen ---- */
@media(max-width:899px){
  .markt-seite{display:flex;flex-direction:column}
  .markt-seite > .markt-oben{display:contents}
  .indexleiste      {order:10}
  #sektoren         {order:15}
  #heatmap          {order:20}
  #fgbaro           {order:30}
  #fgchart          {order:40}
  #topflops         {order:50}
  #kalender         {order:60}
  #earningskalender {order:65}
  #watchlist        {order:70}
  /* Die beiden Karten aus dem Zweispalter brauchen ihren Abstand selbst */
  #fgbaro,#topflops{margin-top:16px}
  #fgchart{margin-top:16px}
}

/* ---- Filterleisten über Tabellen ---- */
.filter{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.filter-titel{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);flex:0 0 auto}
.filter .chips{flex:0 0 auto}
.filter-zahl{font-size:11.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.filter.aktiv .filter-titel{color:var(--o)}
@media(max-width:620px){
  .filter{gap:7px}
  .filter .chips{overflow-x:auto;max-width:100%}
  .filter-zahl{margin-left:0;width:100%}
}

/* Tops & Flops: der Name bekommt allen Platz, der da ist. Am Handy steht die
   Karte über die volle Breite - dort passt deutlich mehr als in der schmalen
   Spalte am Rechner. */
.tf-nm{flex:1 1 auto;min-width:0}
@media(max-width:899px){
  .tf-zeile{gap:8px}
  .tf-zeile .tick{flex:0 0 52px;max-width:52px}
  .markt-oben .tf-zeile{font-size:13.5px}
  .markt-oben .tf-zeile .tick{flex:0 0 52px;max-width:52px;font-size:12px}
  .markt-oben .tf-zeile .perf{font-size:13.5px}
}

/* ---- Hinweis auf Benachrichtigungen ---- */
.push-box{display:flex;flex-direction:column;gap:11px;border-left:3px solid var(--o)}
.pb-zeichen{width:34px;height:34px;border-radius:10px;background:var(--o-soft);display:grid;place-items:center}
.pb-zeichen svg{width:18px;height:18px;fill:none;stroke:var(--o);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pb-text b{display:block;font-size:14px;margin-bottom:3px}
.pb-text span{font-size:12.5px;color:var(--muted);line-height:1.45}
.pb-knoepfe{display:flex;gap:8px}
.pb-ja{flex:1;padding:10px 14px;border:0;border-radius:10px;background:var(--o);color:#fff;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pb-ja:hover{filter:brightness(1.06)}
.pb-ja:disabled{opacity:.6;cursor:default}
.pb-nein{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:none;
  color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pb-nein:hover{color:var(--ink)}
.pb-stand{font-size:12.5px;color:var(--gn);line-height:1.45}

/* ---- Mitteilung des Betreibers ---- */
.meldung{display:flex;align-items:flex-start;gap:11px;margin:0 0 14px;padding:12px 14px;
  border:1px solid var(--o-line);border-left:3px solid var(--o);border-radius:12px;
  background:var(--o-soft)}
.meldung[hidden]{display:none}
.md-zeichen{flex:0 0 auto;margin-top:1px}
.md-zeichen svg{width:18px;height:18px;fill:none;stroke:var(--o);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.md-text{flex:1;min-width:0}
.md-text b{display:block;font-size:14px;line-height:1.3}
.md-text span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.md-link{flex:0 0 auto;align-self:center;font-size:12.5px;font-weight:700;color:var(--o);white-space:nowrap}
.md-zu{flex:0 0 auto;width:28px;height:28px;border:0;background:none;color:var(--muted);
  font-size:14px;line-height:1;cursor:pointer;border-radius:8px}
.md-zu:hover{color:var(--ink)}
@media(max-width:520px){
  .meldung{flex-wrap:wrap;gap:9px}
  .md-text{flex:1 1 calc(100% - 70px)}
  .md-link{flex:1 1 100%;order:5;align-self:flex-start}
}

/* ---- Sofortige Rückmeldung beim Antippen ----
   Ohne sichtbare Reaktion wirkt jeder Wechsel träge, egal wie schnell geladen
   wird. Der angetippte Punkt färbt sich sofort und die Seite zeigt oben einen
   feinen Balken - beides passiert im selben Moment wie die Berührung. */
.tabs a,.tabs button,.hnav a,.mehr,.tb,.scr-chip,.me-zeile{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tabs a{transition:color .08s,background .08s}
.tabs a:active,.tabs a.gehtlos{color:var(--o);background:var(--o-soft)}
.hnav a:active,.mehr:active{color:var(--o)}

.ladebalken{position:fixed;left:0;top:0;height:2px;width:0;z-index:200;background:var(--o);
  opacity:0;transition:width .25s ease,opacity .15s}
.ladebalken.an{opacity:1}

/* Die Ergebniszeile: hervorgehoben, aber nicht groesser als noetig -
   dieselbe Schriftgroesse wie die uebrigen Kacheln, nur farbig unterlegt. */
.stat.s-ergebnis{background:var(--gn-soft);border-color:color-mix(in srgb, var(--gn) 30%, transparent);
  padding:13px 15px}
.stat.s-ergebnis b{color:var(--gn)}
.stat.s-ergebnis.minus{background:var(--rd-soft);border-color:color-mix(in srgb, var(--rd) 30%, transparent)}
.stat.s-ergebnis.minus b{color:var(--rd)}
.stat.s-ergebnis .stat-euro{margin-top:5px}

/* ===================== Marktupdate ===================== */
/* Streifen auf der Startseite */
.mu-streifen{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:15px;
  transition:border-color .14s,background .14s}
.mu-streifen:hover{border-color:var(--o);background:var(--hover)}
.mu-streifen.frisch{border-color:var(--o-line);background:var(--o-soft)}
.mu-s-symbol{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--o);color:#fff}
.mu-s-symbol svg{width:19px;height:19px}
.mu-s-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mu-s-text b{font-size:14.5px;font-weight:700;color:var(--ink)}
.mu-s-text small{font-size:12px;color:var(--muted)}
.mu-s-pfeil{margin-left:auto;color:var(--muted);font-size:17px;flex:0 0 auto}
.mu-streifen:hover .mu-s-pfeil{color:var(--o)}

/* Das Blatt selbst */
.mu-blatt{padding:20px 20px 16px}
@media(min-width:760px){.mu-blatt{padding:28px 32px 20px}}
.mu-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mu-marke{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--o);background:var(--o-soft);border:1px solid var(--o-line);padding:3px 9px;border-radius:7px}
.mu-marke.zurueck{color:var(--muted);background:var(--card-2);border-color:var(--line)}
.mu-marke.zurueck:hover{color:var(--o);border-color:var(--o-line)}
.mu-kopf time{margin-left:auto;font-size:12px;color:var(--muted)}
.mu-betreff{font-size:clamp(21px,3.4vw,29px);line-height:1.16;margin:0 0 4px;text-wrap:balance}

.mu-inhalt{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.mu-inhalt h3{font-size:clamp(18px,2.6vw,22px);line-height:1.25;margin:26px 0 8px;color:var(--ink);
  text-transform:none;text-wrap:balance}
.mu-inhalt h4{font-size:15px;font-weight:700;margin:20px 0 5px;color:var(--ink);text-wrap:balance}
.mu-inhalt h3+h4{margin-top:12px}
.mu-inhalt p{margin:0 0 11px}
.mu-inhalt a{color:var(--o);text-decoration:underline;text-underline-offset:2px}
.mu-inhalt hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.mu-inhalt img,.mu-bild img{max-width:100%;height:auto;border-radius:11px}

/* Zahlenkacheln aus dem Newsletter */
.mu-kachel{display:inline-flex;flex-direction:column;gap:1px;vertical-align:top;
  min-width:min(100%,152px);margin:0 7px 7px 0;padding:9px 12px;
  background:var(--card-2);border:1px solid var(--line);border-radius:11px}
.mu-kachel b{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.mu-kachel span{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mu-kachel i{font-style:normal;font-size:11px;color:var(--faint)}

/* Terminfahrplan */
.mu-termin{margin:0 0 9px;padding:11px 13px;background:var(--card-2);
  border:1px solid var(--line);border-left:3px solid var(--o);border-radius:11px}
.mu-termin b{display:block;font-size:11.5px;font-weight:800;color:var(--o);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.mu-termin strong{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.mu-termin p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
.mu-termin p+p{margin-top:6px}

.mu-fuss{margin:22px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.mu-fuss b{color:var(--ink-2)}
.mu-leer{margin:0;color:var(--muted);font-size:14px}

/* Archiv */
.mu-archiv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mu-archiv a{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:9px;min-width:0}
.mu-archiv a:hover{background:var(--hover)}
.mu-archiv li.on a{background:var(--o-soft);box-shadow:inset 2px 0 0 var(--o)}
.mu-archiv b{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mu-archiv li.on b{color:var(--o)}
.mu-archiv span{font-size:13.5px;color:var(--ink-2);line-height:1.4}

/* Wisch-Hinweis: eine kleine Hand, die andeutet, dass die Reihe scrollt */
.wisch-tipp{margin-left:auto;color:var(--faint);display:inline-flex;flex:0 0 auto}
.wisch-tipp svg{width:17px;height:17px;animation:wischen 2.6s ease-in-out infinite}
.abschnitt-kopf .wisch-tipp + .mehr{margin-left:10px}
@keyframes wischen{0%,55%,100%{transform:translateX(0)}70%{transform:translateX(-3px)}85%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.wisch-tipp svg{animation:none}}
/* Setups und Raketen scrollen nur am Handy - dort erst zeigen */
@media(min-width:700px){.wisch-tipp.nur-schmal{display:none}}

/* Stimmungsverlauf: die Erklaerung steht klein unter dem Titel -
   neben der Ueberschrift muesste sie je nach Breite umbrechen */
#fgchart .abschnitt-kopf{display:block}
#fgchart .abschnitt-kopf .anzahl{display:block;margin-top:3px;font-size:11.5px}

/* Schliessknopf der "Seit deinem letzten Besuch"-Box */
.neu-band{position:relative;padding-right:38px}
.nb-zu{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:8px;
  background:transparent;color:var(--faint);font-size:13px;line-height:1;cursor:pointer;
  display:grid;place-items:center}
.nb-zu:hover{background:var(--card-2);color:var(--ink)}

/* Glocke im Kopf: Mitteilungs-Zustand immer erreichbar */
#glockeBtn{position:relative}
#glockeBtn.an svg{fill:var(--o);stroke:var(--o)}
#glockeBtn .gl-punkt{display:none;position:absolute;top:6px;right:6px;width:8px;height:8px;
  border-radius:50%;background:var(--o);border:2px solid var(--card)}
#glockeBtn.ruf .gl-punkt{display:block}
.glocke-blatt{position:fixed;top:calc(var(--kopf-h) + 8px);right:14px;z-index:80;
  width:min(320px,calc(100vw - 28px));background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;box-shadow:0 18px 44px -16px rgba(0,0,0,.28)}
.glocke-blatt b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.glocke-blatt span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.gl-tat{margin-top:11px;width:100%;border:0;border-radius:10px;background:var(--o);color:#fff;
  font-size:14px;font-weight:600;padding:11px 14px;cursor:pointer}
.gl-tat:disabled{opacity:.6}

/* ---- Wissen: Videos und Aufzeichnungen ----
   Ausklappen ohne JavaScript: ein verstecktes Kaestchen vor dem Raster, die
   Leiste darunter ist sein Label. So funktioniert es auch dann noch, wenn ein
   Baustein in circle.js klemmt - und es ueberlebt jeden Seitenwechsel. */
.webinar-text{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.video-titel .video-datum{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--muted)}

.mehr-schalter{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.videos-block .video-raster{margin-top:11px}
/* Am Desktop stehen drei Videos da, alles Weitere wartet. */
.videos-block .video-karte.extra{display:none}
/* Am Handy nur eines - sonst scrollt man ewig. */
@media(max-width:899px){
  .videos-block .video-raster > .video-karte:nth-child(n+2){display:none}
}
/* Aufgeklappt sind alle da - diese Regel steht bewusst zuletzt. */
.videos-block .mehr-schalter:checked ~ .video-raster > .video-karte{display:block}

.mehr-leiste{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:12px;padding:14px 18px;border-radius:13px;cursor:pointer;
  background:var(--o-soft,rgba(255,102,0,.08));border:1px solid var(--o-line,rgba(255,102,0,.28));
  color:var(--o);font-size:14px;font-weight:700;letter-spacing:.01em;
  transition:background .18s,border-color .18s,transform .18s}
.mehr-leiste:hover{background:rgba(255,102,0,.14);transform:translateY(-1px)}
.mehr-leiste:active{transform:none}
.mehr-leiste i{font-style:normal;font-size:12px;transition:transform .2s}
.mehr-leiste .zu{display:none}
.videos-block .mehr-schalter:checked ~ .mehr-leiste .auf{display:none}
.videos-block .mehr-schalter:checked ~ .mehr-leiste .zu{display:inline}
.videos-block .mehr-schalter:checked ~ .mehr-leiste i{transform:rotate(180deg)}
.mehr-schalter:focus-visible ~ .mehr-leiste{outline:2px solid var(--o);outline-offset:2px}

/* ===================== Beiträge des Betreibers (seit 05.09.2026) =====================
   Oben nur der Balken (gleiche Hülle wie die frühere Mitteilung), der Klick
   öffnet das Blatt in der Hülle der Chart-Großansicht - ohne Bild oben. */
.bt-band{align-items:center;padding-right:10px}
.bt-auf{flex:1;min-width:0;display:flex;align-items:center;gap:11px;margin:0;padding:0;border:0;
  background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:8px}
.bt-auf .md-zeichen{margin-top:0}
.bt-auf .md-text b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* "Lesen" als kleine Pille, mittig auf Hoehe des Schliesskreuzes */
.bt-auf .md-link{flex:0 0 auto;align-self:center;margin-left:auto;padding:7px 12px;border-radius:100px;
  border:1px solid var(--o-line);background:var(--card);color:var(--o);font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
.bt-auf:hover .md-link{background:var(--o);color:#fff;border-color:var(--o)}
.bt-auf:focus-visible{outline:2px solid var(--o);outline-offset:3px}
@media(max-width:520px){
  .bt-band{flex-wrap:nowrap;gap:8px}
  .bt-auf{flex-wrap:nowrap;gap:9px}
  .bt-auf .md-text{flex:1 1 auto}
  .bt-auf .md-link{flex:0 0 auto;order:0;align-self:center}
}

/* Kleine Knoepfe neben "Dein letzter Besuch": erscheinen, wenn der Streifen
   oder der Balken weggeklickt wurde - so bleibt beides erreichbar. */
.kchips{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle;margin-left:8px}
.kchips:empty{display:none}
.kchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:100px;
  border:1px solid var(--o-line);background:var(--o-soft);color:var(--o);
  font:inherit;font-size:11px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap}
.kchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--o)}
.kchip:hover{background:var(--o);color:#fff}
.kchip[hidden]{display:none}
/* Am Handy immer in einer eigenen Zeile darunter, buendig links */
@media(max-width:759px){
  .kchips{display:flex;margin:8px 0 0}
  .kchips:not(:has(.kchip:not([hidden]))){display:none}
}

.bt-lb .lb-karte{width:min(720px,100%)}
.bt-blatt{padding:22px 20px 24px}
@media(min-width:760px){.bt-blatt{padding:28px 32px 30px}}
.bt-kopf{display:flex;align-items:center;gap:10px;margin:0 44px 10px 0}
.bt-marke{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--o)}
.bt-kopf time{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.bt-titel{margin:0 0 14px;font-size:23px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:760px){.bt-titel{font-size:28px}}
.bt-bilder{margin:0 0 16px}
.bt-bild{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin-bottom:10px;cursor:zoom-in;background:var(--card-2)}
.bt-inhalt{font-size:15px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.bt-inhalt p{margin:0 0 .85em}
.bt-inhalt p:last-child{margin-bottom:0}
.bt-inhalt h3{font-size:16.5px;line-height:1.3;margin:1.2em 0 .45em;font-weight:800}
.bt-inhalt ul,.bt-inhalt ol{margin:0 0 .85em;padding-left:22px}
.bt-inhalt li{margin:.25em 0}
.bt-inhalt a{color:var(--o);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bt-inhalt blockquote{margin:0 0 .85em;padding:8px 14px;border-left:3px solid var(--o);color:var(--ink-2)}
.bt-weitere{border-top:1px solid var(--line-soft);padding:14px 20px 18px}
@media(min-width:760px){.bt-weitere{padding:16px 32px 22px}}
.bt-weitere[hidden]{display:none}
.bt-weitere small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bt-weiter{display:flex;gap:8px;align-items:center;width:100%;text-align:left;margin-top:6px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--card-2);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.bt-weiter:hover{border-color:var(--o)}
.bt-weiter[hidden]{display:none}
.bt-weiter span{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap}

/* Marktupdate-Streifen: seit 05.09.2026 Link plus Schließkreuz statt reinem Link */
.mu-streifen[hidden]{display:none}
.mu-s-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit}
.mu-s-zu{flex:0 0 auto;width:28px;height:28px;border:0;background:none;color:var(--muted);
  font-size:14px;line-height:1;cursor:pointer;border-radius:8px}
.mu-s-zu:hover{color:var(--ink)}
/* Event-Streifen: gleiche Form wie das Marktupdate, nur das Symbolfeld ist
   dunkel statt orange - so sind beide auseinanderzuhalten, wenn sie einmal
   gleichzeitig oben stehen. */
.ev-streifen .mu-s-symbol{background:var(--ink);color:var(--card)}
.ev-streifen:hover{border-color:var(--o);background:var(--hover)}

/* ===========================================================================
   Umfrage - die Karte ueber dem Circle
   Nutzt die Theme-Variablen oben, damit sie hell wie dunkel sitzt.
   =========================================================================== */
.um-ov{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;
  justify-content:center;padding:16px;background:rgba(20,18,10,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:um-auf .18s ease-out}
@media(min-width:640px){.um-ov{align-items:center}}
@keyframes um-auf{from{opacity:0}to{opacity:1}}
.um-ov[hidden]{display:none}

.um-box{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:22px 20px 18px;box-shadow:var(--shadow);
  animation:um-hoch .22s cubic-bezier(.2,.8,.3,1)}
@keyframes um-hoch{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}

.um-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o)}
.um-box>b{display:block;font-size:20px;line-height:1.3;margin:8px 0 16px;color:var(--ink)}

.um-wahl{display:flex;flex-direction:column;gap:8px}
.um-o{position:relative;display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 14px;border:1px solid var(--line);border-radius:13px;
  background:var(--card-2);color:var(--ink);font:inherit;font-size:15px;
  text-align:left;cursor:pointer;overflow:hidden;
  transition:border-color .15s,background .15s}
.um-o:hover{background:var(--hover)}
.um-o.an{border-color:var(--o);background:var(--o-soft)}
.um-o-k{flex:0 0 24px;height:24px;border-radius:50%;background:var(--o);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.um-o-t{flex:1;position:relative;z-index:1}
.um-o-bar{position:absolute;inset:0;z-index:0;pointer-events:none}
.um-o-bar i{display:block;height:100%;width:0;background:var(--o-soft);
  transition:width .5s cubic-bezier(.2,.8,.3,1)}
.um-o-n{position:relative;z-index:1;font-size:13px;font-weight:600;color:var(--muted);
  opacity:0;transition:opacity .3s}
.um-ov.fertig .um-o-n{opacity:1}
.um-ov.fertig .um-o{cursor:default}

.um-fuss{display:flex;gap:8px;margin-top:14px}
.um-send,.um-spaeter{flex:1;padding:12px;border-radius:12px;font:inherit;
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--line)}
.um-send{background:var(--o);color:#fff;border-color:var(--o)}
.um-send:disabled{opacity:.45;cursor:default}
.um-spaeter{background:transparent;color:var(--muted)}
.um-spaeter:hover{background:var(--hover)}
.um-danke{display:block;text-align:center;margin-top:12px;font-size:14px;
  font-weight:600;color:var(--gn)}
.um-danke[hidden]{display:none}

/* Alle Hover-Zustaende der Aktien-Seite an einer Stelle - und nur dort, wo es
   einen Zeiger gibt. Auf dem Handy bleibt ein Hover nach dem Tippen haengen,
   bis man woanders hintippt: Eine angetippte Zeile blieb hervorgehoben, eine
   Notenkachel abgedunkelt. Das sieht nach Auswahl aus, ist aber keine. */
@media (hover: hover) {
  .wl-marke.wl-details:hover{background:var(--o);color:#fff;border-color:var(--o)}
  .scr-chip:hover{border-color:var(--o-line);color:var(--ink)}
  .sabz-archiv:hover{color:var(--ink)}
  .sc:hover{filter:brightness(.96)}
  .scr-zeile[data-muster]:hover{background:var(--hover)}
  .scr-mehr:hover{color:var(--o)}
  .ak-gruppe h5:hover{color:var(--o)}
}

/* Monatsrueckblick: der Einstieg im persoenlichen Block. Das Overlay selbst
   bringt sein eigenes CSS mit - es erscheint einmal im Monat und muss nicht
   in der Datei stehen, die jeder Seitenaufruf laedt. */
.mein-wrapped{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:13px 15px;
  border:1px solid var(--o-line);border-radius:14px;background:var(--o-soft);text-decoration:none}
.mein-wrapped b{font-size:14px;color:var(--ink)}
.mein-wrapped span{font-size:12.5px;color:var(--muted)}
.mein-wrapped:hover{border-color:var(--o)}

/* Setups-Tabelle: Details + Telegram ganz rechts (seit 26.10.2026), rechtsbuendig in einer Reihe */
.sp-knoepfe{display:flex;align-items:center;justify-content:flex-end;gap:5px}