/* ===========================================================================
   seite.css: öffentliche Seite
   ---------------------------------------------------------------------------
   Baut auf den Farbvariablen aus navi.css auf (hell und dunkel).
   Spielfarben kommen als --farbe aus der Datenbank. In der hellen Variante
   werden sie über --farbe-stark abgedunkelt, damit Text und Ränder auf dem
   hellen Grund genug Kontrast haben.
   ========================================================================= */

/* Farbvariablen der Spiele (--farbe-stark) und Glanz der Bühne: siehe navi.css */

.huelle { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sprungmarke { position: absolute; left: -999px; top: 8px; background: var(--akzent); color: var(--akzent-text); padding: 8px 14px; border-radius: 999px; z-index: 50; }
.sprungmarke:focus { left: 12px; }
.vorschau-band { background: var(--akzent); color: var(--akzent-text); text-align: center; font-size: .86rem; font-weight: 650; padding: 8px 16px; }
.vorschau-band a { color: inherit; }

/* --- Kopf ----------------------------------------------------------------- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; text-decoration: none; }
.logo i { width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--kugel-hell), var(--kugel-mitte) 45%, var(--kugel-dunkel));
  box-shadow: 0 0 22px rgba(255, 170, 40, .45); }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--schwach); padding: 9px 14px; border-radius: 999px; font-size: .93rem; font-weight: 550; }
.nav a:hover { color: var(--text); background: var(--flaeche2); }
.nav a[aria-current] { background: var(--flaeche2); color: var(--text); }
.kopf__rechts { display: flex; align-items: center; gap: 8px; }
.sprachen { display: flex; gap: 2px; font-size: .8rem; font-weight: 700; }
.sprachen a { text-decoration: none; color: var(--schwach); padding: 6px 8px; border-radius: 8px; }
.sprachen a[aria-current] { color: var(--text); background: var(--flaeche2); }

/* --- Bühne (Kopfbereich mit Glanz) --------------------------------------- */
.buehne { position: relative; overflow: hidden; border-radius: 32px; padding: 44px 40px 40px; margin-top: 4px;
  background: radial-gradient(1200px 500px at 15% -10%, var(--buehne-glanz1), transparent 60%),
              radial-gradient(900px 500px at 110% 120%, var(--buehne-glanz2), transparent 55%), var(--hg2);
  border: 1px solid var(--rand); box-shadow: var(--schatten); }
.buehne--spiel { background: radial-gradient(1100px 480px at 12% -15%, color-mix(in srgb, var(--farbe) 24%, transparent), transparent 60%),
              radial-gradient(900px 500px at 110% 120%, var(--buehne-glanz2), transparent 55%), var(--hg2); }
.buehne--schmal { padding: 32px 36px; }
.buehne__raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: center; }
.buehne h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.05; letter-spacing: -.035em; margin: 12px 0 24px; }
.buehne h1 span { color: var(--schwach); font-weight: 500; }
.buehne--schmal h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 18px; }
.buehne__datum { color: var(--schwach); margin: -10px 0 16px; }
.buehne__zahlen { margin-bottom: 4px; }
.buehne__zahlen .ziffern { font-size: 2.2rem; letter-spacing: .25em; }
.buehne__mehr { margin: 18px 0 0; font-weight: 650; }
.buehne__mehr a { text-decoration: none; color: var(--akzent); }
.etikett { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--schwach); margin: 0; }
.etikett b { color: var(--akzent-text); background: var(--akzent); padding: 2px 9px; border-radius: 999px; letter-spacing: .06em; }
.etikett .punkt { box-shadow: 0 0 12px var(--farbe); }
.hinweiszeile { margin: 16px 0 0; color: var(--schwach); font-size: .9rem; }
.hinweiszeile b { color: var(--text); font-weight: 600; }

/* Grosse Kugeln mit Reihenfolge */
.kugel { position: relative; }
.kugel--gross { width: 64px; height: 64px; font-size: 1.5rem; box-shadow: inset -6px -8px 14px rgba(0,0,0,.18), 0 10px 30px rgba(255,160,40,.22), 0 0 0 1px var(--kugel-rand); }
.kugel--gross.kugel--sz { margin-left: 10px; box-shadow: inset -6px -8px 14px rgba(0,0,0,.18), 0 0 0 1px var(--kugel-rand); }
.kugel small { position: absolute; top: -8px; right: -6px; font-size: .62rem; font-weight: 700; background: var(--hg2); color: var(--schwach);
  border: 1px solid var(--rand); border-radius: 999px; padding: 1px 6px; line-height: 1.4; }
.kugeln:has(.kugel--gross) { gap: 12px; }
.kugel--treffer { outline: 3px solid var(--erfolg); outline-offset: 1px; }
.kugel--spiel { border-color: var(--farbe-stark, var(--akzent)); }
.kugel--spiel-voll { background: var(--farbe-stark, var(--akzent)); border-color: var(--farbe-stark, var(--akzent)); color: var(--hg2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .kugel--spiel-voll { color: #0a0f1f; } } /* feste-farbe-ok: Text auf heller Spielfarbe */
:root[data-theme="dunkel"] .kugel--spiel-voll { color: #0a0f1f; } /* feste-farbe-ok */

/* Chips unter den Zahlen */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.chip { background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 14px; padding: 10px 14px; text-decoration: none; }
a.chip:hover { border-color: var(--farbe-stark, var(--akzent)); color: inherit; }
.chip small { display: block; color: var(--schwach); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.chip b { font-size: 1.05rem; }
.chip b.mono { letter-spacing: .12em; }

/* --- Countdown-Karte ----------------------------------------------------- */
.uhr { background: var(--flaeche2); border: 1px solid var(--rand); border-radius: 22px; padding: 26px; backdrop-filter: blur(8px); }
.uhr__titel { color: var(--schwach); font-size: .88rem; margin: 0; }
.uhr__zeit { display: flex; gap: 10px; margin: 14px 0 18px; }
.uhr__zeit div { flex: 1; text-align: center; background: var(--hg2); border: 1px solid var(--rand-fein); border-radius: 14px; padding: 12px 0; }
.uhr__zeit b { display: block; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.uhr__zeit small { color: var(--schwach); font-size: .72rem; }
.uhr__jackpot small { color: var(--schwach); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.uhr__jackpot b { display: block; font-size: 2.6rem; font-weight: 850; letter-spacing: -.04em; line-height: 1.15;
  background: linear-gradient(90deg, var(--kugel-dunkel), var(--kugel-mitte) 55%, var(--kugel-dunkel)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uhr__fuss { margin: 12px 0 0; color: var(--schwach); font-size: .85rem; border-top: 1px solid var(--rand); padding-top: 12px; }

/* --- Jackpot-Band -------------------------------------------------------- */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0; }
.band a { text-decoration: none; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 16px 18px 16px 22px; position: relative; overflow: hidden; box-shadow: var(--schatten); }
.band a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--farbe); }
.band a:hover { border-color: var(--farbe-stark); color: inherit; }
.band small { color: var(--schwach); font-size: .8rem; }
.band b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.band span { color: var(--schwach); font-size: .8rem; }

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { margin: 46px 0; }
.abschnitt__kopf { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.abschnitt__kopf h2 { font-size: 1.6rem; letter-spacing: -.03em; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.abschnitt__kopf p { margin: 0; color: var(--schwach); max-width: 540px; font-size: .92rem; }
.abschnitt__fuss { margin: 12px 0 0; font-weight: 650; }
.abschnitt__fuss a, .labor__los { color: var(--akzent); text-decoration: none; }
.seitenkopf { margin: 18px 0 26px; }
.seitenkopf h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.035em; margin-bottom: 8px; }
.seitenkopf > p { max-width: 720px; }
.raster-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.karte--leise { background: var(--flaeche2); box-shadow: none; }
.abstand-oben { margin-top: 16px; }
.abstand-unten { margin-bottom: 16px; }
.punkt--gross { width: 14px; height: 14px; box-shadow: 0 0 12px var(--farbe); }
.text h2 { font-size: 1.15rem; margin-top: 1.4em; }
.text ul { padding-left: 1.2em; margin: 0 0 .8em; }
.text li { margin-bottom: .35em; }
.inhaltsseite { max-width: 760px; margin: 18px 0 40px; }
.inhaltsseite h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.035em; }
.brotkrumen { font-size: .86rem; color: var(--schwach); margin: 4px 0 14px; }
.brotkrumen a { color: var(--schwach); }
.blaettern { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0; flex-wrap: wrap; }
.sprungleiste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sprungleiste a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .88rem; font-weight: 600; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche); }
.sprungleiste a:hover { border-color: var(--farbe-stark); color: inherit; }

/* --- Spielkarten --------------------------------------------------------- */
.spiele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spiel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--schatten); min-width: 0; }
.spiel__kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.spiel__name { display: flex; align-items: center; gap: 10px; font-weight: 750; text-decoration: none; }
.spiel__name i { width: 12px; height: 12px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 14px var(--farbe); flex: none; }
.spiel__datum { color: var(--schwach); font-size: .82rem; white-space: nowrap; }
.spiel__text { color: var(--schwach); font-size: .88rem; margin: -4px 0 0; }
.spiel__zahlen .kugel--klein { width: 36px; height: 36px; font-size: .9rem; }
.spiel__zahlen .ziffern { font-size: 1.6rem; letter-spacing: .28em; }
.spiel__zahlen .ziffern--liste { font-size: 1rem; letter-spacing: .1em; line-height: 1.7; }
.spiel__fuss { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; color: var(--schwach); font-size: .82rem; border-top: 1px solid var(--rand); padding-top: 10px; }
.spiel__fuss a { color: var(--farbe-stark); text-decoration: none; font-weight: 650; white-space: nowrap; }

/* --- Quoten als Balken --------------------------------------------------- */
.quoten { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 22px; padding: 6px 22px; box-shadow: var(--schatten); }
.qz { display: grid; grid-template-columns: minmax(180px, 230px) 1fr 130px 150px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rand-fein); }
.qz--ohne { grid-template-columns: 1fr auto; }
.qz:last-child { border-bottom: 0; }
.qz__name b { display: block; font-weight: 650; }
.qz__name small { color: var(--schwach); font-size: .78rem; }
.qz__balken { height: 10px; background: var(--flaeche2); border-radius: 999px; overflow: hidden; }
.qz__balken i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--farbe-stark), var(--farbe)); }
.qz__gew { text-align: right; font-variant-numeric: tabular-nums; color: var(--schwach); font-size: .9rem; }
.qz__gew b { color: var(--text); }
.qz__quote { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.qz__quote.leer { color: var(--schwach); font-weight: 500; padding: 0; text-align: right; }
.qz__quote small { display: block; font-size: .78rem; }

/* --- Labor-Kacheln ------------------------------------------------------- */
.labor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.labor__kachel { display: block; text-decoration: none; background: linear-gradient(160deg, var(--flaeche2), var(--flaeche)); border: 1px solid var(--rand); border-radius: 22px; padding: 20px; box-shadow: var(--schatten); }
.labor__kachel:hover { border-color: var(--akzent); color: inherit; }
.labor__kachel small { display: block; color: var(--schwach); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.labor__kachel p { color: var(--schwach); font-size: .88rem; margin: 10px 0 0; }
.labor__kachel .kugel--klein { width: 36px; height: 36px; font-size: .9rem; }
.labor__frage { color: var(--text) !important; font-size: 1.05rem !important; }
.labor__los { font-weight: 700; }

/* --- Statistik ----------------------------------------------------------- */
.reiter { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rand); margin-bottom: 18px; }
.reiter a { text-decoration: none; padding: 10px 14px; color: var(--schwach); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a[aria-current] { color: var(--text); border-bottom-color: var(--akzent); }
.reiter--unter { border: 0; margin: 0; background: var(--flaeche2); border-radius: 999px; padding: 4px; }
.reiter--unter a { border: 0; margin: 0; border-radius: 999px; padding: 7px 14px; font-size: .88rem; }
.reiter--unter a[aria-current] { background: var(--hg2); box-shadow: var(--schatten); }
.filterleiste { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 16px 0; }
.filterleiste .feld { min-width: 140px; }
.filterleiste__knoepfe { display: flex; gap: 8px; margin-bottom: 16px; }
.feld--eng { margin: 0; min-width: 110px; }
table.liste.kompakt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }
table.liste.kompakt td { padding: 8px 12px; }
table.liste th.breit, table.liste td.breit { width: 34%; }
table.liste tr.gewaehlt td { background: var(--akzent-weich); }
.ausklapper { margin-top: 16px; border-top: 1px solid var(--rand); padding-top: 12px; }
.ausklapper summary { cursor: pointer; font-weight: 650; }
.zahlenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 14px; }
.zahlenraster__feld { display: grid; grid-template-columns: 34px 40px 1fr; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.zahlenraster__feld .balken { min-width: 0; }
.trefferliste { list-style: none; margin: 0; padding: 0; }
.trefferliste li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rand-fein); }
.trefferliste li:last-child { border-bottom: 0; }
.trefferliste__datum { min-width: 110px; font-variant-numeric: tabular-nums; }
.tippform { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.tippform .feld { flex: 1; min-width: 240px; margin-bottom: 0; }
.nowrap { white-space: nowrap; }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { margin: 60px 0 30px; padding-top: 24px; border-top: 1px solid var(--rand); color: var(--schwach); font-size: .85rem; display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.fuss b { color: var(--text); }
.fuss a { color: var(--schwach); }
.fuss__links { display: flex; flex-direction: column; gap: 4px; }
.marke18 { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--schwach); font-weight: 800; font-size: .74rem; color: var(--text); margin-right: 10px; vertical-align: middle; }

/* --- Telefon ------------------------------------------------------------- */
@media (max-width: 980px) {
  .spiele, .labor { grid-template-columns: 1fr 1fr; }
  .qz { grid-template-columns: 1fr auto; grid-template-areas: "name quote" "balken balken" "gew gew"; gap: 6px 14px; }
  .qz--ohne { grid-template-areas: "name quote"; }
  .qz__name { grid-area: name; }
  .qz__quote { grid-area: quote; align-self: start; }
  .qz__balken { grid-area: balken; }
  .qz__gew { grid-area: gew; text-align: left; font-size: .82rem; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .buehne { padding: 28px 20px; border-radius: 24px; }
  .buehne__raster, .raster-zwei, .fuss { grid-template-columns: 1fr; }
  .kugel--gross { width: 46px; height: 46px; font-size: 1.12rem; }
  .kugeln:has(.kugel--gross) { gap: 9px; }
  .kugel--gross.kugel--sz { margin-left: 4px; }
  .uhr__zeit b { font-size: 1.6rem; }
  .uhr__jackpot b { font-size: 2.1rem; }
  .abschnitt { margin: 34px 0; }
  .abschnitt__kopf { flex-direction: column; align-items: start; gap: 6px; }
  .abschnitt__kopf h2 { font-size: 1.35rem; }
  .quoten { padding: 4px 16px; }
  .nur-breit { display: none !important; }
  table.liste.kompakt { background: transparent; border: 0; }
  table.liste th.breit, table.liste td.breit { width: auto; }
  table.liste td .balken { width: 50%; }
}
@media (max-width: 720px) {
  /* Statistik-Tabellen am Telefon: Zeile = kompakte Karte statt 5 Zeilen */
  table.liste.kompakt tr { display: grid; grid-auto-flow: dense; grid-template-columns: 44px 1fr 1fr; gap: 4px 12px; align-items: center; padding: 10px 12px; }
  table.liste.kompakt td { display: block; padding: 0; text-align: left; }
  table.liste.kompakt td::before { display: block; font-size: .7rem; font-weight: 600; }
  table.liste.kompakt td.spalte-kopf { grid-row: span 3; align-self: center; }
  table.liste.kompakt td.spalte-kopf::before, table.liste.kompakt td.breit::before { display: none; }
  table.liste.kompakt td.breit { grid-column: 2 / -1; }
  table.liste.kompakt td.breit .balken { width: 100%; }
  table.liste.kompakt td.nebensache { display: none; }
  table.liste.kompakt td.zeile-voll { grid-column: 2 / -1; }
  .reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .reiter a { white-space: nowrap; }
  .kennzahlen { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kennzahl { padding: 12px; }
  .kennzahl b { font-size: 1.15rem; }
  .kennzahl small { font-size: .7rem; }
}
@media (max-width: 600px) {
  .huelle { padding: 0 16px; }
  .spiele, .labor { grid-template-columns: 1fr; }
  .buehne h1 { font-size: 2rem; }
  .kugel--gross, .buehne__zahlen .kugel { width: 38px; height: 38px; font-size: .98rem; }
  .buehne__zahlen .kugeln { gap: 6px; }
  .kugeln:has(.kugel--gross) { gap: 7px; }
  .kugel--gross.kugel--sz { margin-left: 2px; }
  .kugel small { top: -9px; right: -7px; font-size: .56rem; padding: 0 4px; }
  .buehne__zahlen .ziffern { font-size: 1.7rem; }
  .band { grid-template-columns: 1fr 1fr; }
  .band b { font-size: 1.2rem; }
  .filterleiste .feld { min-width: calc(50% - 6px); flex: 1; }
}

/* --- News ---------------------------------------------------------------- */
.newsliste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.newsliste--drei { grid-template-columns: repeat(3, 1fr); }
.news { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 22px; padding: 20px 22px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 6px; position: relative; }
.news[style*="--farbe"]::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--farbe); }
.news__kopf { margin: 0; color: var(--schwach); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.news h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.news h3 a { text-decoration: none; }
.news h3 a:hover { color: var(--akzent); }
.news__text { margin: 0; color: var(--schwach); font-size: .92rem; }
.news__fuss { margin: auto 0 0; padding-top: 6px; color: var(--schwach); font-size: .8rem; }
.artikel { max-width: 760px; margin: 8px 0 30px; }
.artikel h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.035em; margin: 10px 0 6px; }
.artikel__datum { color: var(--schwach); margin: 0 0 22px; }
.artikel__zahlen { margin: 0 0 22px; }
.artikel__text { font-size: 1.06rem; line-height: 1.7; }
.artikel__text b { font-weight: 700; }
.artikel__hinweis { margin-top: 28px; padding: 16px 18px; border-radius: var(--radius-klein); background: var(--flaeche2); border: 1px solid var(--rand); color: var(--schwach); font-size: .88rem; }
.artikel__hinweis p:last-child { margin: 0; }
@media (max-width: 980px) { .newsliste--drei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .newsliste, .newsliste--drei { grid-template-columns: 1fr; } }

/* --- Werbeplätze (eigene Banner) ---------------------------------------- */
.werbeplatz { margin: 26px auto; text-align: center; max-width: 100%; }
.werbeplatz__label { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--schwach); margin-bottom: 6px; }
.werbeplatz a { display: inline-block; border-radius: 12px; overflow: hidden; line-height: 0; border: 1px solid var(--rand); }
.werbeplatz img { display: block; max-width: 100%; height: auto; }
.werbeplatz--fuss { margin-top: 48px; }

/* --- Labor --------------------------------------------------------------- */
.seitenkopf__links { font-size: .92rem; font-weight: 600; }
.labor-fazit { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-klein); background: var(--flaeche2); border-left: 4px solid var(--warn); }
.labor-fazit--ok { border-left-color: var(--erfolg); }
.labor-balken { position: relative; display: block; height: 14px; background: var(--flaeche2); border-radius: 999px; min-width: 120px; }
.labor-balken i { display: block; height: 100%; border-radius: 999px; background: var(--akzent); }
.labor-balken i.labor-balken--zufall { background: var(--schwach); }
.labor-balken__theorie { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 1px; }
.legende__strich { display: inline-block; width: 2px; height: 14px; background: var(--text); margin-left: 10px; vertical-align: middle; }
table.rangliste-labor td.breit { width: 30%; }
.werte { margin: 0; display: grid; gap: 8px; }
.werte div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rand-fein); padding-bottom: 6px; }
.werte dt { color: var(--schwach); }
.werte dd { margin: 0; text-align: right; }
.labor-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.regler { display: grid; gap: 4px; }
.regler__zeile { display: grid; grid-template-columns: 1fr 140px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rand-fein); }
.tippliste { display: grid; gap: 12px; }
.tipp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tipp__nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche2); font-weight: 800; font-size: .86rem; }
.tipp__info { display: flex; flex-direction: column; gap: 6px; margin-left: auto; align-items: flex-end; }
.himmel { background: radial-gradient(500px 220px at 90% -20%, var(--buehne-glanz2), transparent 70%), var(--flaeche); }
.bio-kurve { width: 100%; height: auto; display: block; }
.bio-kurve polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bio-kurve__null { stroke: var(--rand); stroke-width: 1; }
.bio-kurve__k { stroke: var(--fehler); }
.bio-kurve__s { stroke: var(--akzent); }
.bio-kurve__g { stroke: var(--erfolg); }
.legende__punkt.bio-k { background: var(--fehler); }
.legende__punkt.bio-s { background: var(--akzent); margin-left: 10px; }
.legende__punkt.bio-g { background: var(--erfolg); margin-left: 10px; }
.verlauf__achse { display: flex; justify-content: space-between; color: var(--schwach); font-size: .78rem; margin-top: 6px; }
@media (max-width: 860px) {
  .labor-raster { grid-template-columns: 1fr; }
  .tipp__info { margin-left: 0; align-items: flex-start; }
  .regler__zeile { grid-template-columns: 1fr 120px; }
}
@media (max-width: 720px) {
  table.liste td.zelle-titel { display: block; text-align: left; }
  table.liste td.zelle-titel::before { display: none; }
  table.liste tr.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
  table.liste tr.gewaehlt td { background: transparent; }
  .labor-balken { width: 60%; }
}

/* ---------------------------------------------------------------------------
   Spielwahl (Lotto / Eurojackpot) auf Statistik, Archiv, Tipp prüfen, Labor
   und Kugeln im Eurojackpot-Bereich: Zahlen mit Rand, Eurozahlen gefüllt,
   beides in der Spielfarbe (wie auf der Spielseite)
   --------------------------------------------------------------------------- */
.spielwahl { display: flex; width: fit-content; max-width: 100%; gap: 4px; flex-wrap: wrap; background: var(--flaeche2); border-radius: 999px; padding: 4px; margin: 0 0 14px; }
.spielwahl a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--schwach); }
.spielwahl a i { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe-stark, var(--akzent)); flex: none; }
.spielwahl a[aria-current] { background: var(--hg2); color: var(--text); box-shadow: var(--schatten); }
.spielwahl a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.zs--farbig .kugel { background: transparent; border: 1.5px solid var(--farbe-stark); color: var(--text); box-shadow: none; }
.zs--farbig .kugel.kugel--ez, .zs--farbig .kugel.kugel--spiel-voll { background: var(--farbe-stark); border-color: var(--farbe-stark); color: var(--hg2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .zs--farbig .kugel.kugel--ez, :root:not([data-theme="hell"]) .zs--farbig .kugel.kugel--spiel-voll { color: #0a0f1f; } } /* feste-farbe-ok: Text auf heller Spielfarbe */
:root[data-theme="dunkel"] .zs--farbig .kugel.kugel--ez, :root[data-theme="dunkel"] .zs--farbig .kugel.kugel--spiel-voll { color: #0a0f1f; } /* feste-farbe-ok */
.kugel:not(.kugel--ez) + .kugel--ez { margin-left: 6px; }
@media (max-width: 600px) { .spielwahl { width: auto; display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; } .spielwahl a { justify-content: center; padding: 8px 10px; border-radius: 12px; white-space: nowrap; font-size: .88rem; } }
.zs--farbig .balken:not(.balken--ueber):not(.balken--unter):not(.balken--theorie) i { background: var(--farbe-stark); }
.zs--farbig .legende__punkt:not(.legende__punkt--theorie):not(.bio-k):not(.bio-s):not(.bio-g) { background: var(--farbe-stark); }
.zs--farbig .labor-balken i:not(.labor-balken--zufall) { background: var(--farbe-stark); }
@media (max-width: 600px) { .zs--farbig .tipp .kugeln, .zs--farbig .abschnitt__kopf .kugeln { gap: 6px; } .zs--farbig .tipp .kugel, .zs--farbig .abschnitt__kopf .kugel { width: 36px; height: 36px; font-size: .9rem; } }
.chips-reihe { display: flex; flex-wrap: wrap; gap: 6px; }

/* Live-Test: Hinweis nach dem Erzeugen und Rangliste */
.live-hinweis { border-left: 4px solid var(--erfolg); margin-top: 16px; }
.live-hinweis p { margin: 0 0 8px; }
.live-hinweis__link { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.live-hinweis__link a { font-family: var(--mono); font-size: .88rem; word-break: break-all; }
.systemliste { display: grid; gap: 12px; }
.systemliste .karte { display: grid; gap: 10px; }

/* Spielsimulation */
.wert-minus { color: var(--fehler); }
.wert-plus { color: var(--erfolg); }
.labor-balken i.sim-balken--plus, .zs--farbig .labor-balken i.sim-balken--plus { background: var(--erfolg); }
.sim-stufen { display: grid; gap: 8px; }
.sim-stufe { display: grid; grid-template-columns: 7.5em 1fr 4em; gap: 12px; align-items: center; }
.sim-stufe b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sim-stufe--leer { color: var(--schwach); }
.sim-stufe--leer b { font-weight: 400; }
.sim-stufe .labor-balken { min-width: 0; }
.sim-stufe .labor-balken i.sim-balken--da { min-width: 6px; }
@media (max-width: 720px) {
  .kennzahlen--vier { grid-template-columns: repeat(2, 1fr); }
  .sim-stufe { grid-template-columns: 6.5em 1fr 3em; gap: 8px; font-size: .92rem; }
  table.liste.sim-raenge tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 12px; }
  table.liste.sim-raenge td { display: block; padding: 0; text-align: left; }
  table.liste.sim-raenge td::before { display: block; font-size: .7rem; }
  table.liste.sim-raenge td.zelle-titel { grid-column: 1 / -1; font-weight: 600; }
  table.liste.sim-raenge td.zelle-titel::before { display: none; }
  .sim-karte { background: transparent; border: 0; padding: 0; box-shadow: none; }
}

/* Statistik: Ziehungsgeräte im Vergleich */
.geraet-text { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--schwach); font-size: .85rem; }
@media (max-width: 720px) { .geraet-wert { text-align: right; } }