/* Nachgeladener Teil des Stilblatts: Quotentabellen, Fusszeile, Kleinigkeiten. */

.ziehung-datum { margin-top: 8px; }

.quoten-ueberschrift { margin-top: 28px; }

/* Quotentabelle ---------------------------------------------------------- */

.quoten {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
  background: var(--weiss);
  /* Waagerechtes Scrollen ist ausgeschlossen — es versteckte genau die Spalte,
     wegen der der Besucher gekommen ist. */
  table-layout: fixed;
}

.quoten caption {
  margin-bottom: 10px;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gruen-800);
}

.quoten th, .quoten td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gruen-100);
  text-align: left;
  vertical-align: top;
}

.quoten thead th {
  background: var(--gruen-100);
  color: var(--gruen-800);
  font-size: 0.95rem;
}

.quoten tbody th {
  width: 5.5em;
  font-weight: 700;
  color: var(--gruen-800);
}

/* Betraege in Tabellenziffern und rechtsbuendig, damit die Nachkommastellen
   untereinander liegen. Bei Werten zwischen 5,00 € und 114 Millionen € ist das
   kein Detail (_uiux.md § 3). */
.quoten .betrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Der Strich einer nicht besetzten Gewinnklasse wird nicht farblich
   hervorgehoben — Farbe traegt nie allein eine Aussage (_uiux.md § 2). */
.strich { color: inherit; }

.offen { color: var(--teal-700); font-size: 0.95rem; }

.ohne-gewaehr {
  margin: 0 0 24px;
  color: var(--grau-500);
  font-size: 0.95rem;
}

/* Auf schmalen Schirmen wird jede Gewinnklasse ein gestapelter Block: Neun
   Zeilen mit Texten wie „5 Richtige + Superzahl" brechen sonst um, und die
   Betraege geraten aus dem Blick. */
@media (max-width: 599px) {
  .quoten, .quoten tbody, .quoten tr, .quoten th, .quoten td { display: block; }

  .quoten thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }

  .quoten tr {
    margin-bottom: 12px;
    border: 1px solid var(--gruen-100);
    border-radius: 8px;
    overflow: hidden;
  }

  .quoten tbody th {
    width: auto;
    background: var(--gruen-100);
  }

  .quoten th::before, .quoten td::before {
    content: attr(data-spalte) ": ";
    color: var(--grau-500);
    font-weight: 400;
    font-size: 0.9rem;
  }

  .quoten .betrag {
    text-align: left;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gruen-800);
  }
}

/* Nebenspalte ------------------------------------------------------------ */

.neben {
  padding: 16px;
  background: var(--weiss);
  border: 1px solid var(--gruen-100);
  border-radius: 8px;
}
.neben > :first-child { margin-top: 0; }
.neben > :last-child { margin-bottom: 0; }

/* Fusszeile -------------------------------------------------------------- */

.fuss {
  margin-top: 40px;
  padding: 24px 0 32px;
  background: var(--weiss);
  border-top: 1px solid var(--gruen-100);
}

.pflichthinweis {
  margin: 0 0 16px;
  color: var(--grau-500);
  font-size: 0.95rem;
}

.fuss-verweise { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 8px; }
.fuss-verweise a { display: inline-flex; align-items: center; min-height: var(--griff); }

.fuss-zeile { margin: 0; color: var(--grau-500); font-size: 0.95rem; }

/* Hilfsmittel ------------------------------------------------------------ */

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.epost { font-weight: 600; }

img { max-width: 100%; height: auto; }