/* ===========================================================================
   projekt.css: nur was das Lotto-Labor zusätzlich braucht
   Wird zuletzt geladen. Ausschliesslich Variablen der Farbwelt, keine
   festen Farbwerte, damit ein Wechsel der Farbwelt überall greift.
   ========================================================================= */

/* --- Kugeln (Gewinnzahlen) ---------------------------------------------- */
.kugeln { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kugel {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--flaeche); color: var(--text);
  border: 2px solid var(--akzent);
  font-weight: 750; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  flex: none;
}
.kugel--treffer { background: var(--akzent); color: var(--akzent-text); }
/* Superzahl abgesetzt: gefüllt in der dunklen Farbe des Kopfbands */
.kugel--sz { background: var(--dunkel); color: var(--dunkel-text); border-color: var(--dunkel); margin-left: 6px; }
.kugeln--klein { gap: 5px; }
.kugeln--klein .kugel, .kugel--klein {
  width: 30px; height: 30px; font-size: .82rem; border-width: 1.5px;
}
.kugeln--klein .kugel--sz { margin-left: 3px; }

/* --- Kopfband: Name rechts --------------------------------------------- */
.marke {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dunkel-schwach); border: 1px solid var(--dunkel-flaeche);
  padding: 5px 10px; border-radius: var(--radius);
}

/* --- Raster und Abstände ------------------------------------------------- */
.raster-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft); align-items: start; }
.raster-zwei > .karte { margin: 0; }
.karte h3 { margin-top: 0; }
.abstand-oben { margin-top: var(--luft); }
.klein { font-size: .85rem; }
.schmal { max-width: 520px; }

/* --- Filterleiste --------------------------------------------------------- */
.filterleiste {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  margin-top: var(--luft);
}
.filterleiste .feld { margin: 0; min-width: 140px; }
.filterleiste__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.feld--eng { margin: 0; }

/* --- Tabellen ------------------------------------------------------------- */
table.liste td.breit, table.liste th.breit { width: 34%; }
table.liste td.breit .balken + .balken { margin-top: 4px; }
table.liste tr.gewaehlt td { background: var(--flaeche2); }
table.liste td .kugeln { vertical-align: middle; }

/* --- Balken-Varianten ----------------------------------------------------- */
.balken { display: block; min-width: 60px; }
.balken--ueber > i { background: var(--erfolg); }
.balken--unter > i { background: var(--fehler); }
.balken--theorie > i { background: var(--dunkel-schwach); }
.legende { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: .82rem; color: var(--schwach); margin-top: 8px; }
.legende__punkt { display: inline-block; width: 18px; height: 8px; border-radius: 999px; background: var(--akzent); }
.legende__punkt--theorie { background: var(--dunkel-schwach); margin-left: 8px; }

/* --- 49er-Raster in der Kalenderansicht ---------------------------------- */
.zahlenraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px 14px; margin-top: 10px;
}
.zahlenraster__feld { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; }
.zahlenraster__feld .zahl { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.zahlenraster__feld .balken { min-width: 30px; }

/* --- Nachtrag-Formular: 8 Felder in einer Reihe, umbrechend --------------- */
.nachtrag { display: grid; grid-template-columns: 1.6fr repeat(7, 1fr); gap: 10px; align-items: end; }
.nachtrag .feld { margin: 0; }
.nachtrag input { width: 100%; }

/* --- Fussnote -------------------------------------------------------------- */
.fussnote { color: var(--schwach); font-size: .84rem; border-top: 1px solid var(--rand); }
.fussnote p { max-width: 780px; }

/* --- Posten mit Kugeln (Tipp prüfen) ------------------------------------- */
.posten__was .kugeln { display: inline-flex; }

/* --- Telefon ------------------------------------------------------------- */
@media (max-width: 640px) {
  .raster-zwei { grid-template-columns: 1fr; }
  .kugel { width: 40px; height: 40px; font-size: .98rem; }
  .kugeln { gap: 6px; }
  .filterleiste .feld { flex: 1 1 40%; min-width: 0; }
  .filterleiste__knoepfe { flex: 1 1 100%; }
  .nachtrag { grid-template-columns: repeat(3, 1fr); }
  .nachtrag .feld:first-child { grid-column: 1 / -1; }
  table.liste td.breit { width: auto; }
  table.liste td.breit .balken { flex: 1; max-width: 60%; align-self: center; }
  table.liste td.breit { flex-wrap: wrap; }
  /* Bottom-Tabs fest am unteren Rand; der Werkbank-Block hat unten schon Platz */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
  body.a-werkbank { padding-bottom: 64px; }
  .marke { display: none; }
}

/* --- Kompakte Listen am Telefon -------------------------------------------
   Lange Zahlenlisten (49 Zahlen, 100 Ziehungen im Jahr) wären als volle
   Karten je Zeile mehrere Meter lang. Hier wird jede Zeile zu einer
   zweizeiligen Karte: oben die Werte, darunter der Balken bzw. die Kugeln.
   Spalten mit class="nebensache" entfallen am Telefon.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .werkbank__block { padding-bottom: 16px; }
  table.liste.kompakt tr {
    display: grid; grid-template-columns: auto 1fr auto; grid-auto-flow: row dense;
    align-items: center; gap: 6px 12px; padding: 8px 10px; margin-bottom: 6px;
  }
  table.liste.kompakt td { display: block; padding: 0; text-align: left; }
  table.liste.kompakt td::before { content: attr(data-label) " "; font-size: .74rem; margin-right: 4px; }
  table.liste.kompakt td.spalte-kopf { grid-row: span 2; }
  table.liste.kompakt td.spalte-kopf::before,
  table.liste.kompakt td.breit::before { content: none; }
  table.liste.kompakt td.breit { grid-column: 2 / -1; grid-row: 2; max-width: none; }
  table.liste.kompakt td.breit .balken { max-width: none; }
  table.liste.kompakt td.zeile-voll { grid-column: 2 / -1; }
  table.liste.kompakt td.nebensache { display: none; }
  /* Archiv: Datum und Superzahl oben, Kugeln darunter über die ganze Breite */
  table.liste.kompakt.archiv tr { grid-template-columns: 1fr auto; }
  table.liste.kompakt.archiv td.breit { grid-column: 1 / -1; }
  table.liste.kompakt.archiv td::before { content: none; }
}

/* Karte als letztes Element eines Blocks: kein Zusatzabstand, der Block
   bringt seinen eigenen mit (sonst doppelte Lücken zwischen den Blöcken). */
.werkbank__block > .karte:last-child { margin-bottom: 0; }
.karte h3.abstand-oben { margin-top: var(--luft); }

/* Kleine Tabellen, die auch am Telefon Tabellen bleiben (wenige Spalten) */
@media (max-width: 640px) {
  table.liste.fest thead { display: table-header-group; }
  table.liste.fest tr { display: table-row; border: 0; padding: 0; margin: 0; box-shadow: none; background: transparent; }
  table.liste.fest td { display: table-cell; padding: 8px 6px; border-bottom: 1px solid var(--rand-fein); text-align: left; }
  table.liste.fest td.zahl { text-align: right; }
  table.liste.fest td::before { content: none; }
}

/* Ziehungen mit vielen Richtigen (Tipp prüfen) */
.trefferliste { list-style: none; margin: 8px 0 0; padding: 0; }
.trefferliste li {
  display: grid; grid-template-columns: 9.5em auto 1fr; gap: 6px 14px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--rand-fein);
}
.trefferliste__datum { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .trefferliste li { grid-template-columns: 1fr auto; }
  .trefferliste li .kugeln { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  table.liste.kompakt td { white-space: nowrap; }
  table.liste.kompakt td.zeile-voll { white-space: normal; }
}

/* Codezeilen zum Kopieren (Cron-Befehl, config-Zeilen): umbrechen statt
   abschneiden, sonst ist am Telefon nur der Anfang sichtbar */
.codeblock { white-space: pre-wrap; word-break: break-all; }
table.liste td code { white-space: nowrap; }

/* Noch nicht übernommene Ziehungen (Abgleich zweier Quellen) */
.offen { display: grid; grid-template-columns: 9em 1fr; gap: 10px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rand-fein); }
.offen__datum { padding-top: 4px; }
.offen__version { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.offen__version + .offen__version { grid-column: 2; }
.offen__version form { margin: 0; }
@media (max-width: 640px) {
  .offen { grid-template-columns: 1fr; }
  .offen__version + .offen__version { grid-column: 1; }
  .offen__version > .schwach { flex-basis: 100%; }
}
@media (min-width: 640.02px) {
  .offen__version > .schwach { min-width: 15.5em; }
}

/* Quoten-Tabelle */
@media (min-width: 640.02px) { table.liste.quoten td.zahl { white-space: nowrap; } }
@media (min-width: 640.02px) { table.liste.quoten td:first-child { width: 4em; } }
@media (max-width: 640px) {
  table.liste.quoten td[data-label="Richtige"] { font-weight: 650; }
  table.liste.quoten td[data-label="Richtige"]::before { content: none; }
  table.liste.quoten td[data-label="Richtige"] { white-space: normal; }
}