/* ==========================================================================
   Frei Spiele – Seitenspezifische Bereiche
   ========================================================================== */

/* --- Startseiten-Kopf --------------------------------------------------- */
.aufmacher {
  background:
    linear-gradient(180deg, var(--papier) 0%, var(--papier-tief) 100%);
  border-bottom: 1px solid var(--linie);
  padding-block: var(--r8) var(--r7);
}
.aufmacher__raster {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: var(--r7);
  align-items: start;
}
@media (max-width: 940px) {
  .aufmacher__raster { grid-template-columns: 1fr; gap: var(--r6); }
}

.aufmacher h1 { margin-bottom: var(--r4); }
.aufmacher h1 em {
  font-style: normal;
  display: block;
  color: var(--tiefblau);
}
.aufmacher__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
  margin-top: var(--r5);
}

/* Prüfprotokoll – Kennzahlen der Redaktion, nicht des Casinos */
.protokoll {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--tiefblau);
  border-radius: var(--kante);
  box-shadow: var(--schatten);
  padding: var(--r5);
}
.protokoll__kopf {
  font-family: var(--schrift-daten);
  font-size: var(--tg-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--r3);
}
.protokoll dl { margin: 0; }
.protokoll__zeile {
  display: flex;
  align-items: baseline;
  gap: var(--r3);
  padding-block: 0.55rem;
  border-bottom: 1px dotted var(--linie);
}
.protokoll__zeile:last-child { border-bottom: 0; }
.protokoll dt { font-size: 0.9375rem; color: var(--tinte-leise); }
.protokoll dd {
  margin: 0 0 0 auto;
  font-family: var(--schrift-daten);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.protokoll dd.hervor { color: var(--gold-tief); font-size: var(--tg-md); }

/* --- Seitenkopf für Unterseiten ----------------------------------------- */
.seitenkopf {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  padding-block: var(--r5) var(--r7);
}
.seitenkopf h1 { margin-top: var(--r4); }

/* --- Zwei-Spalten-Textseite --------------------------------------------- */
.textseite {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--r7);
  align-items: start;
}
/* Rasterkinder duerfen unter ihre Inhaltsbreite schrumpfen – sonst sprengen
   breite Tabellen auf schmalen Bildschirmen das Layout. */
.textseite > * { min-width: 0; }
@media (max-width: 940px) { .textseite { grid-template-columns: 1fr; } }

.randspalte {
  position: sticky;
  top: 92px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  padding: var(--r4);
  font-size: 0.9375rem;
}
.randspalte h2 {
  font-family: var(--schrift-daten);
  font-size: var(--tg-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: var(--r3);
}
.randspalte ul { list-style: none; margin: 0; padding: 0; }
.randspalte li { padding-block: 0.35rem; border-bottom: 1px solid var(--linie); }
.randspalte li:last-child { border-bottom: 0; }

/* --- Bonus-Rechner ------------------------------------------------------ */
.rechner {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gold);
  border-radius: var(--kante);
  box-shadow: var(--schatten);
  padding: var(--r5);
  margin-bottom: var(--r6);
}
.rechner__gruppe { border: 0; padding: 0; margin: 0 0 var(--r5); }
.rechner__gruppe legend {
  font-family: var(--schrift-daten);
  font-size: var(--tg-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding: 0 0 var(--r3);
}
.rechner__presets { display: flex; flex-wrap: wrap; gap: var(--r3); }
.rechner__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--r4);
}
.rechner__feld { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.rechner__feld label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinte);
}
.rechner__feld small { font-size: var(--tg-xs); color: var(--tinte-leise); }
.rechner__feld input,
.rechner__feld select {
  font-family: var(--schrift-daten);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--papier);
  color: var(--tinte);
  width: 100%;
}
.rechner__feld input:focus-visible,
.rechner__feld select:focus-visible {
  outline: 2px solid var(--tiefblau);
  outline-offset: 1px;
  background: #fff;
}
.rechner__ergebnis { margin-top: var(--r5); scroll-margin-top: 90px; }
.rechner__ergebnis:focus { outline: none; }
.rechner__ergebnis > .hinweis:first-child { margin-top: 0; }
@media (max-width: 620px) {
  .rechner { padding: var(--r4); }
  .rechner__raster { grid-template-columns: 1fr 1fr; }
}