/* ------------------------------------------------------------------------
   lotterie-online.eu — Gestaltung „Lesesaal"
   (Entwurf 2, gewaehlt am 17.08.2026; Seitenaufbau vom 18.08.2026)

   Textbetont und nuechtern: Serifenschrift des Geraets fuer den Fliesstext, keine
   Farbflaechen, ein einziger Akzent. Die Seiten sind lange Erklaertexte — das ist
   die Form, in der sie sich am besten lesen.

   Links der Text, rechts eine schmale Spalte mit dem Ziehungsblock und den
   uebrigen Verweisen; darueber ein Menueband mit drei Punkten. Die Kopfbox als
   Band ueber dem Inhalt gibt es seit dem 18.08.2026 nicht mehr
   (_harness/_uiux.md § 2).

   Grundsaetze:
   * **Keine Webfonts.** Es wird die Schrift des Geraets benutzt
     (_harness/_architecture.md § 2). Keine Google Fonts, kein fremder Server.
   * Kein Framework, kein Aufbauschritt. Bootstrap 3 und jQuery 1.10 des
     Altsystems entfallen ersatzlos.
   * Ab 320 Pixel Bildschirmbreite benutzbar; breite Tabellen scrollen in ihrer
     eigenen Huelle, nie die Seite (_specs/E1 .../F2 Seitenrahmen/S2).
   ------------------------------------------------------------------------ */

:root {
  --grund: #fbfaf8;
  --papier: #ffffff;
  --linie: #e0dcd4;
  --linie-tief: #b9b2a5;
  --text: #1e1c19;
  --leise: #6f6a61;
  --akzent: #7a1f2b;
  --akzent-tief: #5d1721;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --grotesk: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
}

a { color: var(--akzent); text-underline-offset: .15em; }
a:hover { text-decoration: none; }

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

.zum-inhalt {
  position: absolute; left: -9999px;
  background: var(--text); color: #fff; padding: .6rem 1rem;
}
.zum-inhalt:focus { left: .5rem; top: .5rem; z-index: 10; }

/* Fuer Vorleseprogramme sichtbar, auf dem Bildschirm nicht. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Die Verschleierung der Anbieterangaben (Darstellung/Anschriftschutz.php).
   `display:none` erzeugt keine Luecke und wird auch von Vorleseprogrammen
   uebergangen — der Text bleibt fuer alle Besucher unveraendert. */
.tarnung { display: none; }

/* Alle Rahmenteile und der Inhaltsbereich stehen in derselben Huelle. Ihre
   Breite ist die Summe dessen, was darin steht: 44 rem Satzbreite + 2,4 rem
   Abstand + 16 rem Spalte + 2,2 rem seitlicher Rand = 64,6 rem.

   Die Spalte misst 16 rem und nicht weniger, weil sieben Zahlenkaestchen in
   **eine** Reihe passen muessen: 7 x 1,7 rem + 6 Luecken = 13,4 rem, dazu der
   Innenrand des Kastens. Bei 14 rem brach die Reihe um. */
.mitte { max-width: 64.6rem; margin: 0 auto; padding: 0 1.1rem; }

/* --- Kopfleiste -------------------------------------------------------- */

.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); }

.kopf-reihe { padding: 1rem 0 .7rem; }

.marke {
  font-size: 1.3rem; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.marke b { color: var(--akzent); font-weight: 700; }

/* --- Menueband ---------------------------------------------------------- */

/* Drei Punkte, mehr nicht (E1 F2 S2). Auf schmalem Bildschirm bricht das Band
   um — `flex-wrap` statt Klappmenue oder waagerechtem Schieber: Ein Menue, das
   sich erst oeffnen laesst, braucht ein Skript, und ein Schieber versteckt
   Punkte hinter einer Geste, die niemand sucht. */
.menueband { font-family: var(--grotesk); }

.menueband ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.6rem;
}

.menueband a {
  display: inline-block;
  color: var(--text); text-decoration: none; font-size: .95rem;
  padding: .5rem 0; border-bottom: 2px solid transparent;
}
.menueband a:hover { border-bottom-color: var(--linie-tief); }

/* Der Punkt der aufgerufenen Seite haengt an `aria-current` und nicht an einer
   eigenen Klasse: So kann die Auszeichnung fuer Vorleseprogramme nicht fehlen,
   waehrend der Unterstrich da ist. */
.menueband a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent); }

/* --- Seitenaufbau ------------------------------------------------------- */

/* Drei Geschwister: Inhalt, Ziehungsblock, Verweise. Schmal untereinander,
   ab 48 rem zweispaltig (`_harness/_uiux.md` § 2). */
.seite {
  display: flex; flex-direction: column;
  /* Nur senkrecht: Der seitliche Rand kommt von `.mitte` und darf nicht
     ueberschrieben werden, sonst steht der Text auf schmalem Bildschirm an der
     Kante. */
  padding-top: 1.6rem; padding-bottom: 2.4rem;
}

/* Auf den Zahlenseiten — Startseite, Archiv, Check, Eurojackpot — steht der
   Ziehungsblock schmal **vor** dem Inhalt: Dort ist die Zahl der Anlass des
   Besuchs. Auf den Erklaerseiten ist es der Text, dort bleibt er dahinter. */
.seite--zahlen-zuerst .zahlenspalte { order: -1; }

.zahlenspalte, .verweisspalte { margin-top: 1.8rem; }
.seite--zahlen-zuerst .zahlenspalte { margin: 0 0 1.8rem; }

@media (min-width: 48rem) {
  .seite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    /* Zeile 1 nimmt genau die Hoehe des Ziehungsblocks; die Verweise stehen
       unmittelbar darunter und nicht auf halber Texthoehe. */
    grid-template-rows: auto 1fr;
    column-gap: 2.4rem;
    align-items: start;
  }

  /* Der Inhalt laeuft ueber beide Zeilen der rechten Spalte hinweg. */
  .inhalt { grid-column: 1; grid-row: 1 / span 2; }
  .zahlenspalte { grid-column: 2; grid-row: 1; }
  .verweisspalte { grid-column: 2; grid-row: 2; }

  .zahlenspalte, .seite--zahlen-zuerst .zahlenspalte { order: 0; margin: 0; }
  .verweisspalte { margin-top: 1.6rem; }
}

.inhalt { max-width: 44rem; }

/* --- Ziehungsblock ------------------------------------------------------ */

.ziehungsblock {
  background: var(--papier); border: 1px solid var(--linie);
  font-family: var(--grotesk); padding: .8rem .9rem .9rem;
}

.block-titel {
  margin: 0 0 .6rem;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--leise);
}

.feld + .feld { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linie); }

.feld-titel { margin: 0 0 .3rem; font-size: .88rem; font-weight: 600; }
.feld-leer { margin: 0; font-size: .88rem; color: var(--leise); }

.zeile-datum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin: 0; }
.datum { font-size: .85rem; color: var(--leise); }

.ohne-gewaehr {
  color: var(--leise); font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

.zahlen { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0 0; }

.zahl {
  display: inline-block; min-width: 1.7rem;
  padding: .1rem .25rem; text-align: center;
  border: 1px solid var(--linie-tief); border-radius: 2px;
  background: var(--papier);
  font-family: var(--grotesk); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: .88rem;
}
.zahl--hervor { border-color: var(--text); border-width: 2px; }
.zahl--ziffer { min-width: 1.4rem; }

.termin {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .1rem .6rem; font-size: .85rem; margin: 0;
}
/* Beschriftung und Datum brechen als Ganzes um, nie mitten im Wort. */
.termin span, .termin a { white-space: nowrap; }
.termin + .termin { margin-top: .2rem; }
.termin span { color: var(--leise); }
.termin a { text-decoration: none; border-bottom: 1px solid var(--linie-tief); }

/* --- Verweise der Seitenspalte ------------------------------------------ */

.spaltenverweise { font-family: var(--grotesk); }

.spaltenverweise ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.spaltenverweise li { margin: 0; }

.spalten-titel {
  margin: 0 0 .3rem;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--leise);
  border-bottom: 1px solid var(--linie); padding-bottom: .2rem;
}

.spaltenverweise a {
  display: block; padding: .3rem 0;
  color: var(--akzent); text-decoration: none; font-size: .9rem;
}
.spaltenverweise a:hover { text-decoration: underline; }

/* --- Inhalt -------------------------------------------------------------- */

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 1.1rem; font-weight: 700; }
h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; font-weight: 700; }
h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; font-weight: 700; }
h4 { font-size: 1rem; margin: 1.4rem 0 .4rem; font-weight: 700; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: .3rem; }

.hinweis { font-family: var(--grotesk); font-size: .92rem; color: var(--leise); }


/* --- Hinweiskasten ------------------------------------------------------- */

/* Der eine Satz, der aus dem Fliesstext heraussteht: der schnellere Weg zum
   Ziel. Grotesk statt Serife, damit er sich vom Text abhebt, und mit einer
   Akzentkante links. **Kein Knopf** — direkt darunter steht auf dem
   Lottozahlen-Check das Formular mit seinem eigenen Knopf „Pruefen", und zwei
   gleich laute Aufforderungen nebeneinander helfen niemandem. */
.tipp {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  padding: .8rem 1rem;
  margin: 0 0 1.4rem;
  font-family: var(--grotesk); font-size: .95rem;
}

.tipp p { margin: 0; }
.tipp p + p { margin-top: .4rem; }
.tipp a { font-weight: 600; text-decoration: none; }
.tipp a:hover { text-decoration: underline; }


/* --- Bilder im Inhalt ---------------------------------------------------- */

/* Ein Bild neben dem Text, wie im Altsystem. Es traegt `width` und `height` im
   Markup — ohne die beiden Masse springt der Text beim Nachladen des Bildes,
   und die Seite lebt von Suchmaschinen, die genau das bewerten. */
.bild-links {
  float: left;
  margin: .3rem 1.2rem .5rem 0;
  border: 1px solid var(--linie);
  /* Die Linie liegt aussen um das Bild, damit `width` und `height` aus dem
     Markup das Bild selbst messen und nicht um zwei Pixel stauchen. */
  box-sizing: content-box;
}

/* Unter 30 rem bleibt neben einem Bild zu wenig Text stehen, um noch lesbar zu
   sein — dann steht es ueber dem Absatz statt daneben. */
@media (max-width: 30rem) {
  .bild-links { float: none; display: block; margin: 0 0 .8rem; }
}

/* Keine Ueberschrift laeuft neben einem Bild weiter. */
.inhalt h2, .inhalt h3, .inhalt h4 { clear: left; }

/* --- Tabellen ------------------------------------------------------------ */

/* Eine Tabelle, die breiter ist als der Platz, scrollt in ihrer eigenen Huelle.
   Die Seite selbst scrollt dabei nicht waagerecht. */
.tabellenhuelle { overflow-x: auto; margin: 0 0 1.2rem; }

table {
  border-collapse: collapse; width: 100%; min-width: 20rem;
  font-family: var(--grotesk); font-size: .93rem;
}
th, td { padding: .4rem .7rem; text-align: left; border-bottom: 1px solid var(--linie); }
thead th { border-bottom: 2px solid var(--linie-tief); font-weight: 600; }
tbody th { font-weight: 600; white-space: nowrap; }

.betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unbekannt { color: var(--leise); font-style: italic; }

.ziehungszahlen td { padding: .35rem .7rem; }
.ziehungstitel { margin-top: 1.4rem; }

.einzelquote {
  font-family: var(--grotesk); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 600; margin: 0 0 1.2rem;
}

/* --- Formulare (Archiv und Check) ---------------------------------------- */

.auswahl {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 3px;
  padding: .9rem 1rem .4rem; margin: 0 0 1.4rem;
  font-family: var(--grotesk);
}
.auswahl-felder { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 .6rem; }
.auswahl label { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); }

.auswahl select {
  font: inherit; font-size: .95rem; padding: .3rem .4rem;
  border: 1px solid var(--linie-tief); border-radius: 2px; background: var(--papier); color: var(--text);
}
.auswahl--pruefung select { min-width: 4rem; }

.auswahl button {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  color: var(--papier); background: var(--akzent);
  border: 0; border-radius: 2px; padding: .42rem 1.1rem;
}
.auswahl button:hover { background: var(--akzent-tief); }

.ergebnis { font-family: var(--grotesk); font-size: 1rem; }
.ohne-gewaehr-zeile { font-family: var(--grotesk); font-size: .85rem; color: var(--leise); }
.ohne-gewaehr-zeile a { color: var(--leise); }

/* --- Lottozahlen-Check: Ziehungen je Anzahl Richtiger --------------------- */

/* Eine Klasse mit mehr als `Zahlenpruefung::OFFEN_BIS` Ziehungen kommt
   zugeklappt — bei zwei Richtigen sind es ueber siebenhundert. `<details>`
   klappt sie ohne Skript wieder auf. */
.trefferklasse {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 3px;
  margin: 0 0 .7rem;
}

.trefferklasse > summary {
  cursor: pointer; padding: .5rem .9rem;
  font-family: var(--grotesk); font-size: .95rem;
}
.trefferklasse > summary::marker { color: var(--leise); }
.trefferklasse[open] > summary { border-bottom: 1px solid var(--linie); }

.trefferklasse .tabellenhuelle { margin: 0; }
.trefferliste { min-width: 0; font-size: .9rem; }
.trefferliste th { white-space: nowrap; color: var(--leise); font-weight: 400; }
.trefferliste tr:last-child > * { border-bottom: 0; }

/* Die eigenen Zahlen heben sich vom Rest der Ziehung ab. */
.zahl--treffer { border-color: var(--akzent); background: var(--akzent); color: var(--papier); }

/* --- Verweise nach aussen ----------------------------------------------- */

.verweis-partner { font-weight: 600; }

/* Der Pfeil sagt vor dem Klick, dass ein neues Fenster aufgeht — an jedem
   Partnerverweis, im Fliesstext wie im Rahmen. `Verweisbau` setzt die Klasse
   anhand des Ziels, der Pfeil kann deshalb nicht vergessen werden
   (`_specs/_Querschnitt.md` Q4). */
.verweis-partner::after, .aussen::after {
  content: " \2197"; color: var(--leise); font-weight: 400;
}

/* --- Anbieterangaben ------------------------------------------------------ */

.anschrift { font-family: var(--grotesk); font-size: .97rem; }

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

.fuss {
  border-top: 1px solid var(--linie); background: var(--papier);
  font-family: var(--grotesk); padding: 1.2rem 0 2rem;
}
.pflichthinweis { font-size: .8rem; color: var(--leise); margin: 0 0 .7rem; }
.pflichthinweis a { color: var(--leise); }
.fuss-verweise { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .4rem; font-size: .9rem; }
.fuss-zeile { margin: 0; font-size: .84rem; color: var(--leise); }