/* Gemeinsames Fundament der Prototyp-Seiten. Das Cockpit traegt seine Stile inline,
   weil es als Artifact self-contained sein muss; die Tokens hier sind dieselben. */
:root{
  --grund:#FAFAF7; --flaeche:#FFFFFF; --erhoben:#F2F2ED; --linie:#E4E4DE;
  --text:#1C1C1E; --gedaempft:#6E7178;
  --handlung:#3765DC; --handlung-weich:rgba(55,101,220,.12);
  --gewinn:#0E8F58; --verlust:#CE2F3B; --warnung:#B4771C; --marke:#FF696A;
  --gitter:rgba(28,28,30,.07);
  --schatten:0 1px 2px rgba(0,0,0,.05),0 8px 24px -12px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --grund:#0E0F12; --flaeche:#17191D; --erhoben:#1F2126; --linie:#2A2D34;
  --text:#F5F5F5; --gedaempft:#8B909A;
  --handlung:#4A7DF4; --handlung-weich:rgba(74,125,244,.16);
  --gewinn:#1FBF75; --verlust:#F0474F; --warnung:#E8A33D; --marke:#FF696A;
  --gitter:rgba(245,245,245,.055);
  --schatten:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --grund:#0E0F12; --flaeche:#17191D; --erhoben:#1F2126; --linie:#2A2D34;
  --text:#F5F5F5; --gedaempft:#8B909A;
  --handlung:#4A7DF4; --handlung-weich:rgba(74,125,244,.16);
  --gewinn:#1FBF75; --verlust:#F0474F; --warnung:#E8A33D; --marke:#FF696A;
  --gitter:rgba(245,245,245,.055);
  --schatten:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--grund);color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.zahl{font-family:"IBM Plex Mono","SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--handlung)}
:focus-visible{outline:2px solid var(--handlung);outline-offset:2px;border-radius:4px}
.gewinn{color:var(--gewinn)} .verlust{color:var(--verlust)}
.etikett{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--gedaempft);font-weight:600}

/* Band ganz oben, auf jeder Seite, nicht wegklickbar. Es traegt die beiden Aussagen, auf
   die es rechtlich ankommt: Spielgeld, kein Preisgeld, keine Zahlung.
   Am 29.08.2026 kam die Variante .einladung dazu. Der Grund ist nicht Kosmetik: das Band
   stand in Warnfarbe und las sich wie eine Fehlermeldung, obwohl es die erste Zeile ist,
   die ein neuer Besucher sieht. In der Vorsaison ist die Nachricht eine Einladung, kein
   Alarm, deshalb ruhige Flaeche statt Gelb. Der Inhalt bleibt derselbe. */
.protoband{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; padding:6px 14px; background:var(--warnung); color:#1C1C1E;
  font-size:12px; font-weight:600; line-height:1.4; text-align:center;
}
/* Das hidden-Attribut allein reicht hier nicht: der Browser setzt dafuer display:none
   als Standardregel, und jede eigene display-Angabe schlaegt sie. Oben steht display:flex,
   also blieb ein per hidden abgeschaltetes Band als 13 Pixel hohe leere Leiste stehen.
   Am 30.08.2026 genau so gemessen, nachdem bandSetzen() das Band eigentlich abgeschaltet
   hatte: sichtbar, 13 Pixel hoch, ohne Text. */
.protoband[hidden]{display:none !important}
.protoband a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.protoband span{font-weight:400}
/* Auf schmalen Bildschirmen nur der Kernsatz: drei Zeilen Band fressen im Cockpit
   den halben Chart. */
@media (max-width:900px){ .protoband{font-size:11px; padding:5px 10px} .protoband span{display:none} }

/* Seitenleiste aller Seiten */
.seitennav{position:fixed;left:0;top:0;bottom:0;width:96px;z-index:40;background:var(--flaeche);
  border-right:1px solid var(--linie);display:flex;flex-direction:column;padding:10px 8px;gap:2px}
body{padding-left:96px}
.navlogo{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0 14px;text-decoration:none;color:var(--text)}
.navlogo i{width:22px;height:22px;border-radius:5px;background:var(--marke);display:block}
.navlogo img{width:26px;height:30px;display:block;object-fit:contain}
.navlogo b{font-size:9.5px;letter-spacing:.02em}
.navlogo span{font-size:8px;letter-spacing:.12em;color:var(--gedaempft);font-weight:700;text-transform:uppercase}
.navpunkt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;
  border-radius:8px;text-decoration:none;color:var(--gedaempft);font-size:9.5px;font-weight:600;text-align:center}
.navpunkt:hover{background:var(--erhoben);color:var(--text)}
.navpunkt.an{background:var(--handlung-weich);color:var(--handlung)}
.navpunkt svg{width:22px;height:22px;display:block;flex:0 0 auto}
.navlogo img{width:26px;height:30px;display:block;object-fit:contain}
.navpunkt .zeichen{width:26px;height:26px;border-radius:7px;border:1.5px solid currentColor;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.navfuss{margin-top:auto;font-size:8.5px;color:var(--gedaempft);text-align:center;line-height:1.5;padding:8px 2px}
@media (max-width:760px){
  body{padding-left:0}
  .seitennav{position:sticky;top:0;bottom:auto;width:auto;flex-direction:row;align-items:center;
    border-right:none;border-bottom:1px solid var(--linie);padding:6px 8px;overflow-x:auto;scrollbar-width:none}
  .seitennav::-webkit-scrollbar{display:none}
  .navlogo{flex-direction:row;padding:0 10px 0 2px;gap:7px}
  .navlogo i{width:14px;height:14px}
  .navlogo img{width:16px;height:18px}
  .navlogo span{display:none}
  .navpunkt{flex-direction:row;padding:7px 10px;gap:6px;flex:0 0 auto}
  .navpunkt .zeichen{width:18px;height:18px;font-size:9px;border-radius:5px}
  .navpunkt svg{width:17px;height:17px}
  .navpunkt br{display:none}
  /* Der Fuss traegt Impressum, AGB, Datenschutz, Einstellungen und die Cookie-Wahl.
     Ihn mobil auszublenden macht diese Wege unerreichbar (Befund Audit, 26.08.2026).
     Deshalb bleibt er, nur der Werbesatz verschwindet. */
  .navfuss{display:block;margin-top:0;margin-left:auto;padding:0 4px;font-size:0;flex:0 0 auto}
  .navfuss br{display:none}
  .navfuss .rechtslinks{border-top:none;margin:0;padding:0;display:flex;gap:8px;white-space:nowrap}
  .navfuss .rechtslinks a{font-size:10px}
}

/* Kopfzeile aller Seiten */
.seitenkopf{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;
  background:var(--flaeche);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:30}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--text)}
.logo i{width:9px;height:9px;border-radius:2px;background:var(--marke);display:block}
.logo span{color:var(--gedaempft);font-weight:500}
.seitenkopf nav{margin-left:auto;display:flex;gap:4px}
.seitenkopf nav a{padding:6px 11px;border-radius:6px;font-size:13px;font-weight:500;text-decoration:none;color:var(--gedaempft)}
.seitenkopf nav a:hover{background:var(--erhoben);color:var(--text)}
.seitenkopf nav a.an{background:var(--handlung-weich);color:var(--handlung)}
.knopf{display:inline-block;background:var(--handlung);color:#fff;border-radius:6px;
  padding:10px 18px;font-weight:600;font-size:13.5px;text-decoration:none;text-align:center}
.knopf:hover{filter:brightness(1.08)}
.knopf.neben{background:none;color:var(--handlung);border:1px solid var(--linie)}
.knopf.gross{padding:13px 26px;font-size:15px}

.bahn{max-width:1080px;margin:0 auto;padding:0 20px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:18px}
.hinweiszeile{font-size:11.5px;color:var(--gedaempft)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:right;padding:8px 12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gedaempft);font-weight:600;border-bottom:1px solid var(--linie);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--gitter);white-space:nowrap}
tbody tr:hover{background:var(--erhoben)}

.fussnote{max-width:1080px;margin:26px auto 0;padding:14px 20px 34px;font-size:11.5px;
  color:var(--gedaempft);border-top:1px solid var(--linie);text-align:center}

/* Mobil: Kopfzeile umbricht, Navigation wird wischbar statt die Seite aufzuziehen */
@media (max-width:760px){
  .seitenkopf{flex-wrap:wrap;height:auto;padding:10px 12px;gap:8px}
  .seitenkopf nav{width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .seitenkopf nav::-webkit-scrollbar{display:none}
  .seitenkopf nav a{white-space:nowrap;flex:0 0 auto;font-size:12.5px;padding:5px 9px}
}


/* Einladungsfassung des Bandes, siehe Kommentar bei .protoband. */
.protoband.einladung{
  background:var(--flaeche); color:var(--text); border-bottom:1px solid var(--linie);
  font-weight:600;
}
.protoband.einladung span{font-weight:400; color:var(--gedaempft)}
.protoband.einladung a{color:var(--handlung)}


/* ---------- Der Hinweis wandert nach links, 30.08.2026 ----------
   Bis heute war die erste Zeile jeder Seite eine breite Leiste, die als Erstes sagte, was
   man NICHT bekommt: kein Preisgeld, keine Zahlung. Das schreckt ab, bevor irgendetwas
   gezeigt wurde. Die Aussagen bleiben, sie stehen nur nicht mehr an erster Stelle. */
/* Die Seitenleiste ist 96 Pixel breit, nach Abzug der Innenabstaende bleiben rund 75.
   Ein Fliesstext mit Woertern wie "Uebungsdepot" bricht darin in Zwei-Wort-Zeilen und
   war am 30.08.2026 im Live-Bild kaum zu lesen. Der erste Versuch erlaubte dem Browser
   die Silbentrennung, und dann stand dort "Probemo-nat Septem-ber": ein Trennstrich
   mitten im Monatsnamen sieht nach Panne aus. Jetzt setzt seitenhinweisHTML() kurze
   Woerter und eigene Umbrueche, und der Browser trennt nichts mehr selbst. */
.seitenhinweis{
  /* Nachgerechnet statt geschaetzt, am 30.08.2026: die Leiste ist 96 breit, davon gehen
     2 fuer den Rahmen ab und zweimal 8 fuer das Innere. Fuer den Text blieben 59 Pixel.
     "September" braucht bei 11 Pixel fett rund 57, also brach es mitten im Wort:
     "Septembe / r". Mit 5 Pixel Innenabstand und 10 Pixel Schrift bleiben 84 Pixel fuer
     etwa 48, und das Wort steht wieder in einer Zeile. */
  display:block; margin:0 0 12px; padding:8px 5px;
  border-radius:9px; border:1px solid var(--linie); background:var(--erhoben);
  font-size:10px; line-height:1.4; text-align:left;
  hyphens:none; -webkit-hyphens:none; overflow-wrap:break-word;
}
.seitenhinweis b{display:block; font-size:10px; color:var(--text); margin-bottom:4px; line-height:1.3}
.seitenhinweis span{display:block; color:var(--gedaempft)}
.seitenhinweis a{display:inline-block; margin-top:5px; color:var(--handlung);
  text-decoration:underline; text-underline-offset:2px}

/* Auf schmalen Schirmen gibt es keine Seitenleiste, dort bleibt der Streifen oben. Aber
   schmal, in ruhiger Farbe und ohne die Aufmachung einer Warnung. */
.protoband.schmal{
  padding:5px 12px; font-size:11px; font-weight:500;
  background:var(--flaeche); color:var(--gedaempft);
  border-bottom:1px solid var(--linie);
}
.protoband.schmal span{font-weight:400}
@media (min-width:761px){
  /* Am Rechner steht der Hinweis links, oben braucht es ihn dann nicht mehr. */
  .protoband.schmal{display:none}
}