/* Kachelansicht — die Regeln stammen aus der Startseite.
   Die alten Variablennamen werden hier auf die der neuen Seiten gelegt,
   damit es genau EINE Palette gibt und nicht zwei, die auseinanderlaufen. */
:root{
  --bg:var(--grund); --bg2:var(--grund-2);
  --surface:var(--flaeche); --surface-2:var(--flaeche-2);
  --line:var(--linie); --line-2:var(--linie-2);
  --ink:var(--tinte); --ink-2:var(--tinte-2); --ink-3:var(--tinte-3);
  --up:var(--besser); --up-bg:#12251a; --up-bg2:#1a3524;
  --dn:var(--schlechter); --dn-bg:#251618; --dn-bg2:#3a1e1f;
  --nt:var(--gleichauf); --nt-bg:#161c22;
  --acc:var(--bedienung); --acc-2:var(--bedienung-hell);
  --gold:var(--punkt); --gold-2:#c0a259;
}

*{box-sizing:border-box}
body{font-variant-numeric:tabular-nums;margin:0;background:var(--bg);background-image:radial-gradient(120% 80% at 50% -10%,var(--bg2) 0%,var(--bg) 62%);background-attachment:fixed;color:var(--ink);font-family:"Figtree",system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
#view{transition:opacity .35s ease}
#view.upd{opacity:.35}
.wrap{max-width:1280px;margin:0 auto;padding:28px 18px 70px;display:flex;flex-direction:column;gap:20px}
h1,h2{font-family:"Figtree",sans-serif;margin:0;text-wrap:balance}
h1{font-family:"Figtree",sans-serif;font-size:clamp(38px,6vw,62px);font-weight:700;line-height:1;letter-spacing:-.01em;text-transform:none}
h1 em{font-style:italic;color:var(--acc)}
h2{font-size:22px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.eyebrow{font-family:"Figtree",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--acc-2)}
.eyebrow::after{content:"";display:block;width:46px;height:1px;background:var(--acc-2);margin-top:9px;opacity:.6}
header p{margin:.5rem 0 0;color:var(--ink-2);max-width:60ch}
.mono{font-family:"Figtree",sans-serif;font-variant-numeric:tabular-nums}

.ctl{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px;position:sticky;top:8px;z-index:20}
.seg{display:flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.seg button{font:600 12.5px "Figtree",sans-serif;padding:8px 14px;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--acc);color:#04211f}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* Telefon und schmale Fenster: Der Filterkasten laeuft NICHT mehr mit.
   Gemessen am 11.10.2026 von der Steuerung in Chrome bei 390 Pixeln: mitlaufend
   deckte er rund ein Drittel der Bildschirmhoehe ab, samt Ueberschrift. Ein
   Bedienfeld, das den Inhalt verdeckt, den es filtert, ist kein Bedienfeld.
   Ausserdem bekommt jede Beschriftung ihre eigene Zeile UEBER ihrer Knopfreihe
   — vorher rutschte "Zeitraum" und "Sortieren" ans Ende der vorigen Zeile und
   stand neben fremden Knoepfen (FESTLEGUNG 10.10.2026, Ergaenzung 5, Punkt 2). */
@media (max-width:599px){
  .ctl{position:static;top:auto;z-index:auto;
       display:grid;grid-template-columns:1fr;gap:4px;padding:12px}
  .ctl .lab{margin-top:8px}
  .ctl .lab:first-child{margin-top:0}
  /* Die Auswahlreihe traegt vier Knoepfe. Bei 390 Pixeln passten sie nicht in
     eine Zeile und "An der Schwelle" wurde abgeschnitten — gemessen am
     11.10.2026. Die Reihe darf deshalb umbrechen; die Trennlinie wandert mit. */
  .ctl .seg{width:100%;flex-wrap:wrap}
  .ctl .seg button{flex:1 1 auto;min-width:33%;padding:9px 6px;white-space:nowrap}
  .ctl .seg button+button{border-left:1px solid var(--line-2)}
  /* Der laengste Bereichsname ("Kuenstliche Intelligenz und Daten") ist bei
     320 Pixeln breiter als die Zeile und schob die Seite 2 Pixel hinaus.
     Hier darf die Beschriftung umbrechen. */
  .chips button{white-space:normal;max-width:100%;text-align:left}
}
/* Auf dem Telefon EINE seitlich schiebbare Zeile statt acht uebereinander —
   dieselbe Loesung wie bei der Sprungleiste des Verzeichnisses (.vznav) und der
   Kopfleiste. Gemessen am 20.09.2026: mit den deutschen Bereichsnamen wuchs die
   Leiste auf 375 Pixel Breite von 134 auf 274 Pixel, also ueber ein Drittel des
   Bildschirms. Ausgeblendet wird nichts. */
@media (max-width:640px){
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;min-width:0;padding-right:28px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:0 0 auto;white-space:nowrap}
}
.chips button{font:600 12px "Figtree",sans-serif;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer}
.chips button:hover{color:var(--ink);border-color:var(--ink-3)}
.chips button[aria-pressed="true"]{background:var(--acc);color:#04211f;border-color:var(--acc)}
.chips button .cnt{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:999px;background:var(--surface-2);color:var(--ink-3);font:600 10.5px "Figtree",sans-serif;vertical-align:1px}
.chips button[aria-pressed="true"] .cnt{background:rgba(2,26,25,.22);color:#04211f}
.card .sek{position:absolute;top:7px;left:11px;right:34px;font:600 8.5px "Figtree",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.s1 .sek,.card.s2 .sek{display:none}
.lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-right:-8px}
input[type=search]{font:400 13px "Figtree",sans-serif;padding:8px 11px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);min-width:130px}
.sp{flex:1}
:where(button,input,.card):focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.leg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.leg h2{margin-bottom:10px}
/* min(280px,100%) statt 280px: Mit fester Untergrenze verlangt die Spalte
   280 Pixel, auch wenn ihr Kasten nur 236 breit ist — die Seite stand
   dadurch bei 320 Pixeln zwei Pixel ueber. Gefunden hat es die Steuerung,
   nicht meine Messung. Dasselbe Muster wie bei .rlist und .laeufe. */
.leg .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px 26px}
.leg h3{font:600 10.5px "Figtree",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--acc-2);margin:0 0 6px}
.leg dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px}
.leg dt{color:var(--ink);font-weight:600;white-space:nowrap}
.leg dd{margin:0;color:var(--ink-2)}
.leg .how{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:0 0 15px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.leg .how p{margin:0 0 8px}
.leg .how p:last-child{margin:0}
.leg .how b{color:var(--ink);font-weight:600}
.leg .pt{color:var(--gold);font-weight:600;white-space:nowrap}
.lauf{background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--acc);border-radius:12px;padding:15px 17px}
.lauf .lk{font:600 10px "Figtree",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-2)}
.lauf .lt{font-family:"Figtree",sans-serif;font-weight:700;font-size:23px;text-transform:uppercase;line-height:1.05;margin:3px 0 6px}
.lauf p{margin:0 0 7px;font-size:13px;color:var(--ink-2)}
.lauf ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.lauf li{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2)}
.lauf li b{font-family:"Figtree",sans-serif;color:var(--ink);min-width:72px;text-align:right}
.lauf .fu{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.baro{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.baro h2{margin-bottom:3px}
.baro .sub{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.brow{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.brow:first-of-type{border-top:0}
.brow .nm{font-size:13px;color:var(--ink)}
.brow .nm span{color:var(--ink-3);font-family:"Figtree",sans-serif;font-size:10.5px;margin-left:5px}
.brow .tr{position:relative;height:16px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.brow .tr i{position:absolute;top:0;bottom:0;border-radius:3px}
.brow .tr u{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2)}
.brow .vv{font-family:"Figtree",sans-serif;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.brow.dim{opacity:.45}
/* 03.09.2026: Die Groessenueberschriften klebten an den Kacheln darueber.
   Sie bekommen jetzt denselben Abstand nach oben wie die Nexo-Gruppen (40px),
   nur die erste im Block nicht — dort waere er ein Loch. */
.band{display:flex;flex-direction:column;gap:9px;margin-top:40px}
.band:first-child,.ngruppe .band:first-of-type{margin-top:0}
.bh{display:flex;align-items:baseline;gap:11px;border-bottom:1px solid var(--line);padding-bottom:5px}
.bh .n{font-family:"Figtree",sans-serif;font-size:11.5px;color:var(--ink-3)}
.cards{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}

.card{position:relative;border-radius:12px;border:2px solid var(--line-2);background:var(--surface);
  padding:10px 11px;cursor:default;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  transition:transform .09s ease,box-shadow .09s ease;font-family:inherit;color:inherit}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.45);z-index:5}
.card .tk{font-family:"Figtree",sans-serif;font-weight:700;line-height:.95;letter-spacing:.01em}
.card .pc{font-family:"Figtree",sans-serif;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums}
.card .mc{font-family:"Figtree",sans-serif;font-size:10px;line-height:1.25;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .pts{position:absolute;top:6px;right:7px;font:700 10px "Figtree",sans-serif;color:var(--gold);
  background:rgba(217,184,102,.12);border:1px solid rgba(217,184,102,.32);border-radius:5px;padding:2px 5px}
/* 02.09.2026: Alle fünf Größen waren zu niedrig für ihren eigenen Inhalt. Der
   Flex-Kasten hat die drei Zeilen gestaucht, und weil .mc auf overflow:hidden steht,
   war die Marktkapitalisierung unten angeschnitten — bei s1 und s2 sichtbar
   („7 Mio $“ bei MDT), bei s3 bis s5 nur am Kürzel. Zwei Maßnahmen: die drei Zeilen
   dürfen nicht mehr schrumpfen, und jede Größe bekommt die Höhe, die ihr Inhalt
   wirklich braucht. */
.card.s5{width:236px;height:138px}.card.s5 .tk{font-size:34px}.card.s5 .pc{font-size:26px}
.card.s4{width:190px;height:122px}.card.s4 .tk{font-size:28px}.card.s4 .pc{font-size:22px}
.card.s3{width:154px;height:108px}.card.s3 .tk{font-size:23px}.card.s3 .pc{font-size:19px}
.card.s2{width:126px;height:98px} .card.s2 .tk{font-size:19px}.card.s2 .pc{font-size:16px}
.card.s1{width:104px;height:88px} .card.s1 .tk{font-size:16px}.card.s1 .pc{font-size:14px}
.card .tk,.card .pc,.card .mc{flex:0 0 auto}
.card.up{border-color:var(--up);background:linear-gradient(160deg,var(--up-bg2),var(--up-bg))}
.card.up .pc{color:var(--up)}
.card.dn{border-color:var(--dn);background:linear-gradient(160deg,var(--dn-bg2),var(--dn-bg))}
.card.dn .pc{color:var(--dn)}
.card.nt{border-color:var(--line-2);background:var(--nt-bg)}
.card.nt .pc{color:var(--ink-2)}
/* 02.09.2026: Die Abblendung auf 42 Prozent hat Kürzel, Kurs und Marktkapitalisierung
   unlesbar gemacht. Die Kennzeichnung trägt jetzt allein der gestrichelte Rand — der
   Grund des Ausschlusses steht ohnehin im Fenster und im Steckbrief. */
.card.out{opacity:1;border-style:dashed}

.rang{margin:34px 0 0}
.rang .sub{max-width:74ch;color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0 0 16px}
.rtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rtabs button{font:600 13px "Figtree",sans-serif;padding:7px 15px;border-radius:8px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer}
.rtabs button:hover{color:var(--ink);border-color:var(--ink-3)}
.rtabs button.on{background:var(--acc);border-color:var(--acc);color:#04211f}
.rwhat{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:78ch;margin:0 0 14px;
  padding-left:12px;border-left:2px solid var(--line-2)}
.rwhat b{color:var(--ink)}
.rrow{display:grid;grid-template-columns:26px 76px 1fr auto;align-items:center;gap:8px;
  padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12.5px}
.rrow.kon{border-color:var(--up);background:var(--up-bg2)}
.rrow .rn{font-family:"Figtree",sans-serif;color:var(--ink-3);font-size:11.5px;text-align:right}
.rrow .rt{font-family:"Figtree",sans-serif;font-weight:700;font-size:16px;letter-spacing:.01em}
.rrow .rv{color:var(--ink-2);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .rz{font-family:"Figtree",sans-serif;color:var(--ink);font-size:12px}
.rfoot{font-size:12px;color:var(--ink-3);margin-top:14px;max-width:78ch;line-height:1.5}
#hov{position:fixed;pointer-events:none;opacity:0;transition:opacity .12s;z-index:60;width:330px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  max-height:min(78vh,720px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#hov.on{pointer-events:auto}
#hov.on::before{content:"";position:absolute;inset:-22px;z-index:-1;border-radius:22px}
#hov::-webkit-scrollbar{width:8px}
#hov::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
#hov .pin{position:sticky;top:-13px;margin:-13px -15px 8px;padding:5px 15px 5px;background:var(--surface);
  font:600 10px "Figtree",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line)}
#hov .ht{font-family:"Figtree",sans-serif;font-weight:700;font-size:24px;text-transform:uppercase;line-height:1}
#hov .hs{font-size:12px;color:var(--ink-3);margin-bottom:8px}
#hov .r{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-2);padding:1.5px 0}
#hov .r b{color:var(--ink);font-family:"Figtree",sans-serif;font-weight:500}
#hov .bar{height:6px;border-radius:3px;background:var(--surface-2);margin:8px 0 3px;overflow:hidden}
#hov .bar i{display:block;height:100%;background:var(--gold)}
#hov .nt2{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
#hov .was{font-size:13px;color:var(--ink);margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid var(--line)}
#hov .pblock{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
#hov .phead{font:600 11px "Figtree",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
#hov .pgrid{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:12px;color:var(--ink-2)}
#hov .pgrid b{color:var(--ink);font-family:"Figtree",sans-serif;font-weight:500}
#hov .hint{font-size:10.5px;color:var(--ink-3);margin:3px 0 6px;line-height:1.35}
#hov .freibox{background:var(--up-bg2);border:1px solid var(--up);border-radius:7px;padding:7px 9px;font-size:12px;margin:0 0 9px;color:var(--ink-2)}
#hov .freibox b{color:var(--up)}
#hov .warnbox{background:var(--dn-bg);border:1px solid var(--dn);border-radius:7px;padding:7px 9px;font-size:12px;margin:0 0 9px;color:var(--ink-2)}
#hov .warnbox b{color:var(--dn)}
#hov .warn{color:var(--dn);font-weight:600}

.plotbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto}
#plot{display:block;width:100%;min-width:680px;height:auto}
.gl{stroke:var(--line)}
.axl{fill:var(--ink-3);font-family:"Figtree",sans-serif;font-size:10.5px}
.axt{fill:var(--ink-2);font-family:"Figtree",sans-serif;font-size:12px;font-weight:600}
.dot{cursor:default}.dot circle{stroke:var(--surface);stroke-width:2}
.dlab{fill:var(--ink);font-family:"Figtree",sans-serif;font-size:10px;pointer-events:none}

.legend{display:flex;flex-wrap:wrap;gap:15px;font-size:12.5px;color:var(--ink-2);align-items:center}
.legend i{display:inline-block;width:20px;height:12px;border-radius:3px;border:2px solid;vertical-align:-2px;margin-right:5px}
.sizes{display:inline-flex;align-items:flex-end;gap:3px}
.sizes b{display:block;background:var(--line-2);border-radius:2px;width:6px}
footer{color:var(--ink-3);font-size:12.5px;border-top:1px solid var(--line);padding-top:14px}
footer p{margin:.35rem 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.merk{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--line);
  border-left:4px solid var(--acc);border-radius:14px;padding:22px 24px;margin:0 0 24px}
.merk .mk{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-2);margin-bottom:10px}
.merk h2{font-family:"Figtree",sans-serif;font-size:clamp(21px,3.2vw,30px);font-weight:700;
  line-height:1.2;margin:0 0 12px;color:var(--ink);text-wrap:balance}
.merk .ml{margin:0 0 14px;color:var(--ink-2);font-size:14.5px;line-height:1.65;max-width:75ch}
.merk .ml b{color:var(--ink)}
.merk .mfu{font-size:13.2px;color:var(--ink-2);line-height:1.65;border-top:1px solid var(--line);
  padding-top:14px;margin-top:2px;max-width:82ch}
.merk .mfu b{color:var(--ink)}

header .lede{font-size:17px;line-height:1.62;max-width:66ch;color:var(--ink-2)}
header .lede b{color:var(--ink)}
.jump{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:20px 0 24px}
.jump a{text-decoration:none;font-size:14.5px;font-weight:600}
.jump .j1{background:var(--acc);color:#04211f;border-radius:9px;padding:10px 18px}
.jump .j2{color:var(--ink-2);border-bottom:1px solid var(--line-2);padding:2px 0}
.jump .j2:hover{color:var(--ink);border-bottom-color:var(--acc)}
header .disc{font-size:12.6px;color:var(--ink-3);line-height:1.55;max-width:78ch;margin:0 0 6px}
header .howto{font-size:13.6px;color:var(--ink-2);line-height:1.6;max-width:74ch}
.ngruppe{margin:0 0 40px}
.ngruppe .nh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:0 0 10px;margin:0 0 18px;border-bottom:1px solid var(--line-2)}
.ngruppe .nh h2{font:600 22px/1.2 "Figtree",sans-serif;margin:0;letter-spacing:-.01em}
.ngruppe .nh span{font-size:13px;color:var(--ink-3)}
.nfuss{font-size:13px;line-height:1.6;color:var(--ink-3);max-width:78ch;margin:8px 0 0}
.nfuss b{color:var(--ink-2)}
#hov .nbox{font-size:11.5px;line-height:1.5;color:var(--ink-2);background:var(--nt-bg);
  border:1px solid var(--line-2);border-radius:6px;padding:7px 9px;margin:8px 0}
.anreisser{margin:0 0 40px}
.anreisser .weiter{display:inline-block;margin-top:6px;font-weight:600;color:var(--acc);
  border-bottom:1px solid rgba(20,182,177,.4);text-decoration:none}
.anreisser .weiter:hover{color:var(--acc-2);border-bottom-color:var(--acc-2)}
.card.mass{border-color:var(--acc);background:linear-gradient(160deg,#0f2a2b,#0c1c1e)}
.card.mass .massband{position:absolute;bottom:6px;right:8px;font:600 8px "Figtree",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);opacity:.9}
.werbung{font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:78ch;margin:0 0 12px;
  padding:10px 12px;border:1px dashed var(--line-2);border-radius:8px}
.werbung b{color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.werbung a{color:var(--acc)}

/* ---------- Symbole ---------- */
.card{position:relative;overflow:hidden}
/* Kleine, volle Variante in der freien unteren rechten Ecke: erkennbar, ohne
   Zahl oder Kuerzel zu stoeren. Die zurueckgenommene Hintergrundvariante war
   auf dem dunklen Verlauf praktisch unsichtbar. */
.card .symbg{position:absolute;right:9px;bottom:9px;width:28px;height:28px;border-radius:50%;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.10);
  opacity:.92;pointer-events:none;z-index:0}
.card.s1 .symbg{width:20px;height:20px;right:7px;bottom:7px}
.card.s2 .symbg{width:23px;height:23px;right:8px;bottom:8px}
.card.s4 .symbg{width:32px;height:32px;right:11px;bottom:11px}
.card.s5 .symbg{width:38px;height:38px;right:13px;bottom:13px}
.card .symbg.ers{display:grid;place-items:center;
  background:var(--surface-2);font:700 9px "Figtree",sans-serif;color:var(--ink-2);opacity:1}
.card.s4 .symbg.ers,.card.s5 .symbg.ers{font-size:11px}
/* Nur die drei Fliesselemente anheben — .pts und .sek sind bereits absolut
   positioniert; ein pauschales position:relative wuerde sie aus ihrer Ecke reissen. */
.card .tk,.card .pc,.card .mc{position:relative;z-index:1}

/* ---------- Legende: gleiche Zeilenlaenge, gleicher Abstand ---------- */
.leg .cols{align-items:start}
.leg dl{display:grid;gap:14px;margin:0}
.leg dt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  color:var(--ink);font-weight:600;white-space:normal;margin:0 0 3px}
.leg dd{margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.5;max-width:42ch}
@media (max-width:760px){.leg dd{max-width:none}}

/* ---------- Platz fuer lange Kuerzel und dreistellige Punktzahlen ----------
   Anforderung: acht Zeichen Kuerzel und Punktzahl 100 duerfen sich nie beruehren. */
.card.s1{padding-top:20px}
.card.s2{padding-top:22px}
.card .sek{right:44px}
.card .pts{min-width:24px;text-align:center}
.card.s1 .tk{font-size:16px}
.card.s1.tmittel .tk{font-size:14px}
.card.s1.tlang .tk{font-size:12px}
.card.s2.tmittel .tk{font-size:17px}
.card.s2.tlang .tk{font-size:14px}
.card.s3.tmittel .tk{font-size:21px}
.card.s3.tlang .tk{font-size:17px}
.card.s4.tmittel .tk{font-size:25px}
.card.s4.tlang .tk{font-size:20px}
.card.s5.tmittel .tk{font-size:31px}
.card.s5.tlang .tk{font-size:25px}
.card .tk{white-space:nowrap;overflow:hidden;text-overflow:clip}

/* Kachel ist jetzt ein Verweis */
a.card{text-decoration:none;color:inherit;cursor:pointer;transition:transform .12s,border-color .12s}
a.card:hover{transform:translateY(-2px)}
a.card:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- Kurzfenster an der Kachel ---------- */
#hov{position:fixed;left:-9999px;top:0;width:300px;max-height:min(70vh,520px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 15px;box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:60}
#hov.on{pointer-events:auto}
#hov .kfk{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
#hov .kfsym{width:30px;height:30px;border-radius:50%;object-fit:contain;background:#ffffff0a;
  background-size:contain;background-repeat:no-repeat;background-position:center}
#hov .kfsym.ers{display:grid;place-items:center;font:700 10px "Figtree",sans-serif;color:var(--ink-2);
  background:var(--surface-2)}
#hov .kft{font:700 19px "Figtree",sans-serif;letter-spacing:.01em;line-height:1.1}
#hov .kfn{font-size:11.5px;color:var(--ink-3);margin-top:2px}
#hov .kfp{font:700 20px "Figtree",sans-serif;color:var(--gold);text-align:right;line-height:1}
#hov .kfp span{display:block;font:600 9px "Figtree",sans-serif;color:var(--ink-3);letter-spacing:.06em;
  text-transform:uppercase;margin-top:3px}
#hov .kfz{display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:12px}
#hov .kfz span{color:var(--ink-2)}
#hov .kfz b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
#hov .kfz b.gut{color:var(--up)} #hov .kfz b.schlecht{color:var(--dn)}
/* Datum und Abstand gehoeren zur Zeile darueber: kleiner, gedaempft, mit Luft
   danach, damit Hoch und Tief als zwei Bloecke lesbar bleiben. */
#hov .kfz .kfd{font-size:11px;color:var(--ink-3);padding-bottom:7px}
#hov .kfz b.kfab{font-size:11.5px;color:var(--ink-3);font-weight:500;padding-bottom:7px}
#hov .kfz span:last-of-type.kfd,#hov .kfz .kfd:last-of-type{padding-bottom:0}
/* Ausschluss vor der Bewertung. Steht oben, weil er alles darunter einordnet,
   und in der Warnfarbe, damit er nicht wie eine Nebenbemerkung wirkt. */
#hov .kfaus{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--dn-bg);
  border:1px solid var(--dn);font-size:11.5px;line-height:1.5;color:var(--ink-2)}
/* Der dritte Zustand. Er sieht bewusst nicht aus wie ein Messwert. */
#hov .kfnm{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--surface-2);
  border:1px solid var(--line);font-size:11.5px;line-height:1.5;color:var(--ink-2)}
#hov .kfnm b{color:var(--ink);font-weight:600}
#hov .kfmehr{display:inline-block;margin-top:12px;font:600 12.5px "Figtree",sans-serif;
  color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(20,182,177,.4)}
#hov .kfmehr:hover{color:var(--acc-2)}
@media (max-width:640px){#hov{width:calc(100vw - 24px);max-height:64vh}}
/* Handelsplaetze, Tiefenhinweis und Memecoin-Vermerk im Kachelfenster.
   Stand 05.09.2026. Der Tiefenhinweis steht bewusst direkt unter dem
   Ausschlusssatz — eine Zahl ohne ihre Schwankungsbreite liest sich wie ein
   Urteil, und genau das ist sie nicht. */
.kfplz{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--tinte-2)}
.kfmeme{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--tinte-2)}
.kftief{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--tinte-2);
  border-left:3px solid #d9b866;padding-left:10px}
.kf .krk,.krk{color:var(--schlechter);font-weight:700;padding-left:1px}
/* Kachel eines Werts, dessen Zuordnung geprueft wird: sichtbar, aber ohne jede
   Zahl. Gestrichelt wie die ausgeschlossenen, aber ohne deren Rotton — es ist
   kein Befund ueber den Wert, sondern einer ueber unsere Zuordnung. */
.card.pruef{border-style:dashed;opacity:1}
.card.pruef .mc{font-size:10.5px;line-height:1.2;color:var(--tinte-3)}
.kfgrau{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--tinte-2);
  border-left:3px solid var(--linie-2);padding-left:10px}
/* "Wofuer es da ist" im Kachelfenster, 06.09.2026 — EINE Zeile.
   Bewusst direkt unter dem Kopf: Was ein Wert IST, ordnet alles darunter ein.
   Die Beschriftung ist klein und gedaempft, damit das Fenster nicht in zwei
   gleich laute Haelften zerfaellt. */
#hov .kfwf{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#hov .kfwf dt{font:600 9.5px "Figtree",sans-serif;color:var(--ink-3);
  letter-spacing:.07em;text-transform:uppercase}
#hov .kfwf dd{margin:2px 0 8px;font-size:12px;line-height:1.45;color:var(--ink-2)}
#hov .kfwf dd:last-of-type{margin-bottom:0}