/* Ospella — anmelden.css: Anmeldeschirm, Deck-Umschalter, Zahnrad.
   Alles drei neu am 01.09.2026 (Abend). Eigene Datei, weil es drei neue
   Bausteine sind und die bestehenden Dateien schon je eine klare Zuständigkeit
   haben.

   Kontrast: Es kommt KEINE neue Farbe dazu. Jede Regel hier greift auf die
   Rollen aus tokens.css zu, die die Palette (palette.js) für hell und dunkel
   berechnet — genau deshalb halten die Werte aus docs/kontraste.md auch für
   diese Bausteine. Ein hier fest eingetragenes #irgendwas würde bei der ersten
   freien Farbwahl durchfallen. */

/* --- Anmeldeschirm ------------------------------------------------------- */

.anmelden {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--takt-2);
  padding: var(--takt-3) 0;
}

.anmeldemarke { text-align: center; }

.wortmarke.gross {
  font-family: var(--schrift-display);
  font-size: var(--gr-titel); line-height: var(--zh-titel);
  letter-spacing: .01em;
  color: var(--gruen-text);
}
:root[data-modus="dunkel"] .wortmarke.gross { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .wortmarke.gross { color: var(--text); }
}

.anmeldespruch {
  font-size: var(--gr-flies); line-height: var(--zh-flies);
  color: var(--text-leise);
  margin-top: 6px;
  max-width: 30ch; margin-inline: auto;
}

.anmeldekarte h1 { margin-bottom: 6px; }
.anmeldekarte .feld { margin-bottom: 14px; }

/* Der ehrliche Satz über den fehlenden Server. Er steht mit Holzkante da und
   nicht in Rot: Es ist eine Auskunft, keine Warnung (§6.1). */
.anmeldehinweis {
  margin-top: 16px; padding-left: 12px;
  border-left: 2px solid var(--holz-linie);
  font-size: var(--gr-neben); line-height: var(--zh-neben);
  color: var(--text-leise);
}

/* role="alert" — leer und unsichtbar, solange nichts schiefging. */
.anmeldefehler:empty { display: none; }
.anmeldefehler {
  margin-top: 10px; padding: 10px 12px;
  border-radius: var(--r-zelle);
  background: var(--warn-flaeche);
  color: var(--warn-text);
  font-size: var(--gr-bedien); line-height: var(--zh-bedien);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .anmeldefehler {
    background: transparent;
    border-left: 2px solid var(--warn);
    border-radius: 0; padding-left: 12px;
  }
}
:root[data-modus="dunkel"] .anmeldefehler {
  background: transparent;
  border-left: 2px solid var(--warn);
  border-radius: 0; padding-left: 12px;
}

.aktionsreihe.mittig { justify-content: center; }

/* --- Zahnrad im Screenkopf ----------------------------------------------- */

.screenkopf.mitzahnrad .kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}

/* 44 × 44 Griffweite (§18, WCAG 2.5.8); das gezeichnete Rad ist 21 px.
   Negativer Rand rechts, damit die optische Kante trotzdem auf der
   Satzspiegel-Linie sitzt und der Kopf nicht auseinanderrückt. */
.zahnrad {
  width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  color: var(--text-leise);
  border-radius: var(--r-rund);
  transition: color var(--d-hover) ease, background var(--d-hover) ease;
}
.zahnrad svg { fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.zahnrad:hover { color: var(--text); background: var(--flaeche-ruhig); }
.zahnrad:focus-visible { outline: 2px solid var(--gruen-linie); outline-offset: 2px; }

/* --- Deck-Umschalter: Leute / Solodinner / Gruppendinner ------------------ */

/* Die Leiste trägt einen Rahmen und KEINE Fläche.

   Erst stand hier `background: var(--flaeche-ruhig)`. Nachgemessen im
   Dunkelmodus: Die Ruhig-Fläche (#3B5044) ist dort HELLER als der Grund
   (#26382C), und der geschlossene Reiter kam damit auf 3,95:1 — durchgefallen
   gegen die 4,5:1 aus §18. Im Hellen war es unauffällig, weil die Ruhig-Fläche
   dort dunkler als der Grund ist. Genau die Art Fehler, die man nur in beiden
   Modi sieht.

   Ohne eigene Fläche liegen die geschlossenen Reiter immer auf der
   Grundfläche, gegen die `--text-leise` in jeder Palette gerechnet ist. Der
   offene Reiter hebt sich weiterhin durch seine Kartenfläche ab. */
.deckwahl {
  display: flex; gap: 6px;
  padding: 4px;
  border: 1px solid var(--linie-trenner);
  border-radius: var(--r-bedien);
  margin-bottom: 10px;
}

.deckreiter {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 6px 4px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--r-zelle);
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  transition: background var(--d-hover) ease, color var(--d-hover) ease;
}
.deckreiter .wort {
  font-size: var(--gr-neben); line-height: var(--zh-neben);
  /* „Gruppendinner" ist lang und darf auf schmalen Geräten nicht umbrechen —
     ein zweizeiliger Reiter neben zwei einzeiligen verzieht die Leiste. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.deckreiter .zahl {
  font-family: var(--schrift-display);
  font-size: var(--gr-bedien); line-height: 1;
}

/* Der offene Reiter: eigene Fläche UND fetterer Text. Zwei Merkmale, nicht
   nur Farbe — sonst hinge die Auswahl allein am Kontrast (§18, WCAG 1.4.1). */
.deckreiter.an {
  background: var(--flaeche-karte);
  color: var(--gruen-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
:root[data-modus="dunkel"] .deckreiter.an { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .deckreiter.an { color: var(--text); }
}
.deckreiter:focus-visible { outline: 2px solid var(--gruen-linie); outline-offset: -2px; }

.decksatz {
  font-size: var(--gr-neben); line-height: var(--zh-neben);
  color: var(--text-leise);
  margin-bottom: var(--takt-1);
}

/* --- Bilder am Rezept ----------------------------------------------------- */

/* Das Raster richtet sich nach der Anzahl — `data-anzahl` setzt rezept.js.

   Ein festes Drei-Spalten-Raster sah bei ZWEI Bildern falsch aus: ein breites
   oben, darunter ein einsames Drittel. Deshalb je Anzahl eine eigene Form.

   Bei drei und vier führt weiterhin das erste in voller Breite — das ist das
   Bild vom fertigen Teller, das man sucht. */
.rezeptbilder {
  display: grid; gap: 8px;
  margin-bottom: var(--takt-2);
}
.rezeptbilder img {
  width: 100%; display: block;
  border-radius: var(--r-bildflaeche);
  background: var(--flaeche-ruhig);
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* Eines: volle Breite, liegendes Format. */
.rezeptbilder[data-anzahl="1"] { grid-template-columns: 1fr; }

/* Zwei: gleichberechtigt nebeneinander. Keines der beiden führt — bei zwei
   Bildern gibt es kein Haupt- und kein Nebenbild. */
.rezeptbilder[data-anzahl="2"] { grid-template-columns: 1fr 1fr; }
.rezeptbilder[data-anzahl="2"] img { aspect-ratio: 1 / 1; }

/* Drei: eines oben, zwei darunter. */
.rezeptbilder[data-anzahl="3"] { grid-template-columns: 1fr 1fr; }
.rezeptbilder[data-anzahl="3"] img:first-child { grid-column: 1 / -1; }
.rezeptbilder[data-anzahl="3"] img:not(:first-child) { aspect-ratio: 1 / 1; }

/* Vier: eines oben, drei darunter. */
.rezeptbilder[data-anzahl="4"] { grid-template-columns: repeat(3, 1fr); }
.rezeptbilder[data-anzahl="4"] img:first-child { grid-column: 1 / -1; }
.rezeptbilder[data-anzahl="4"] img:not(:first-child) { aspect-ratio: 1 / 1; }