/* Ospella — screens.css: Navigation, Wischstapel, Chat, Masken. */

/* --- Navigationsleiste (§9) --- */
.navleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--flaeche-karte); border-top: 1px solid var(--linie-karte);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
}
.navleiste > div { display: flex; width: 100%; max-width: var(--spalte-max); margin: 0 auto; }
.navpunkt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px; color: var(--text-leise); min-height: 56px; position: relative;
  text-decoration: none; background: none;
}
.navpunkt svg { width: 1.3125rem; height: 1.3125rem; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.navpunkt span { font-size: var(--gr-marker); line-height: var(--zh-marker); font-weight: 500; }
.navpunkt[aria-current="page"] { color: var(--gruen-text); }
.navpunkt[aria-current="page"]::after {
  content: ""; position: absolute; top: 5px; left: 50%; margin-left: 11px;
  width: 4px; height: 4px; border-radius: var(--r-rund); background: var(--akzent);
}
.navpunkt .melder { position: absolute; top: 5px; left: 50%; margin-left: -17px;
  width: 6px; height: 6px; border-radius: var(--r-rund); background: var(--akzent-stark); }

@media (min-width: 1024px) {
  .navleiste { left: 50%; right: auto; top: 0; bottom: 0; width: 92px;
    transform: translateX(-311px); border-top: 0; border-right: 1px solid var(--linie-karte);
    align-items: center; }
  .navleiste > div { flex-direction: column; }
  .navpunkt { flex: none; padding: 14px 4px; }
}

/* --- Wischstapel (§15) --- */
.stapelbereich { position: relative; }
/* 46 px Luft unten: so viel, wie die dritte Karte hervorschaut (42 px) plus
   ihr Schatten. Ohne sie schnitten die hinteren Karten in die Knopfreihe. */
.stapel { position: relative; height: 420px; margin-bottom: 46px; }
.wischkarte {
  position: absolute; inset: 0; background: var(--flaeche-karte);
  border: 1px solid var(--linie-karte); border-radius: var(--r-tischkarte);
  padding: 18px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  display: flex; flex-direction: column;
}
/* Die Karten dahinter (Ansage 01.09.2026, Abend: „dahinter schon die nächste
   Karte leicht zu sehen").

   Vorher: scale(.965) und 9px tiefer. Rechnerisch schaute die zweite Karte
   damit rund 7 px unten und knapp 6 px seitlich hervor — bei einer Karte mit
   1px Rand auf gleichfarbigem Grund ist das nichts, was jemand als „da liegt
   noch eine" liest. Es war gebaut und trotzdem unsichtbar.

   Jetzt schaut die zweite Karte gut 22 px unten heraus, die dritte weitere
   18 px. Dazu drei Dinge, die den Stapel erst wirklich als Stapel lesbar
   machen:
   - Ein Schatten nach oben. Ohne ihn stünden drei gleichfarbige Rechtecke
     ineinander; die Kante allein trägt das nicht.
   - Leicht zurückgenommene Deckkraft nach hinten — was weiter weg ist,
     ist blasser.
   - `transform-origin: top center`, damit die Karten nach UNTEN
     auseinanderlaufen und nicht nach beiden Seiten. Der Blick soll auf der
     obersten Karte bleiben.

   Der Bezugspunkt ist `bottom center`, und das ist der eigentliche Kniff:
   Bei `top center` (dem Naheliegenden) wandert die Unterkante beim
   Verkleinern nach OBEN und frisst genau das translateY wieder auf, das sie
   sichtbar machen soll — bei scale(.945) auf 420 px Höhe sind das 23 px, die
   gegen 26 px Verschiebung stehen: knapp 3 px Rest. Von `bottom` aus bleibt
   die Unterkante beim Skalieren stehen, und die Verschiebung ist genau das,
   was man sieht — unabhängig von der Kartenhöhe, die im Menschendeck ohnehin
   `min(38rem, 78vh)` ist und nicht 420 px.

   `.stapel` bekommt unten Luft, sonst schnitte die dritte Karte in die
   Knopfreihe. */
.wischkarte { transform-origin: bottom center; }
.wischkarte.tief2,
.wischkarte.tief3 {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.wischkarte.tief2 { transform: scale(.94) translateY(22px); opacity: .94; }
.wischkarte.tief3 { transform: scale(.88) translateY(42px); opacity: .8; }

/* Von den hinteren Karten ist nur die KANTE zu sehen, nicht ihr Inhalt.

   Ohne das schauen unten die Knöpfe der nächsten Karte hervor („Profil
   ansehen", „Melden", „Blockieren") — beim Nachmessen war genau das im Bild.
   Es sieht nicht nach Stapel aus, sondern nach einem Darstellungsfehler, und
   es lädt zum Danebentippen ein.

   `visibility: hidden` statt `display: none`: Die Karte behält ihre Höhe und
   damit die Staffelung. Die Kinder sind ohnehin schon `aria-hidden`
   (wischstapel.js), für Vorlesesoftware ändert sich also nichts. */
.wischkarte.tief2 > *,
.wischkarte.tief3 > * { visibility: hidden; }
/* Sonst ließe sich der unsichtbare Inhalt der hinteren Karten scrollen. */
.menschendeck .wischkarte.tief2,
.menschendeck .wischkarte.tief3 { overflow: hidden; }
.wischkarte.federt { transition: transform var(--d-federn) var(--k-federn); }
.wischkarte.fliegt { transition: transform var(--d-flug) ease-out, opacity var(--d-flug) ease-out; }
.wischkarte h2 { font-family: var(--schrift-display); font-weight: 400;
  font-size: var(--gr-portion); line-height: 1.14; margin: 13px 0 3px; }
.wischkarte .ort { font-size: var(--gr-neben); color: var(--text-leise); }
.wischkarte .text { font-size: var(--gr-flies); line-height: var(--zh-flies); margin-top: 9px; }
.wischkarte .fuss { margin-top: auto; }
.wischkarte .kreisflaeche {
  width: 118px; height: 118px; border-radius: var(--r-rund); margin: 0 auto;
  display: grid; place-items: center; font-family: var(--schrift-display);
  font-size: var(--gr-buchstabe); font-weight: 400;
}

.stempel {
  position: absolute; top: 20px; padding: 6px 12px; border-radius: var(--r-zelle);
  font-size: var(--gr-bedien); font-weight: 500; opacity: 0; pointer-events: none;
  border: 2px solid currentColor;
}
.stempel.ja { right: 18px; transform: rotate(-7deg); color: var(--gruen-text);
  background: var(--flaeche-ruhig); }
.stempel.nein { left: 18px; transform: rotate(7deg); color: var(--warn);
  background: var(--warn-flaeche); }

.deckknoepfe { display: flex; justify-content: center; gap: 40px; margin-top: 22px; }
.deckknopf { width: 60px; height: 60px; border-radius: var(--r-rund); border: 2px solid;
  display: grid; place-items: center; background: var(--flaeche-karte); }
.deckknopf.nein { border-color: var(--warn); color: var(--warn); }
.deckknopf.ja { border-color: var(--flaeche-tisch); color: var(--gruen-text); }
.deckknopf svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; }
.deckfuss { display: flex; justify-content: center; margin-top: 14px; }

/* --- Abschluss des Decks (§15) --- */
.abschluss { border: 1px dashed var(--holz-linie); border-radius: var(--r-tischkarte);
  padding: 30px 22px; text-align: center; }
.abschluss .zeichen { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: var(--r-rund);
  border: 2px dashed var(--holz-linie); }

/* --- Rezeptschritte --- */
.schrittzeile { display: flex; gap: 13px; padding: 10px 0; }
.schrittzeile .zahl { font-family: var(--schrift-display); font-size: var(--gr-listentitel);
  color: var(--holz-text); flex: none; min-width: 1.4ch; }
.zutatzeile { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; }
.zutatzeile .menge { color: var(--text-leise); font-variant-numeric: tabular-nums; flex: none; }

.eingabezeile { display: flex; gap: 8px; align-items: center; padding: 5px 0;
  animation: zeile-ein var(--d-zeile) ease-out both; }
@keyframes zeile-ein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.eingabezeile input, .eingabezeile select {
  background: var(--flaeche-karte); border: 1px solid var(--linie-feld);
  border-radius: var(--r-bedien); padding: 11px 10px; font-size: var(--gr-flies);
  min-height: 44px; min-width: 0;
}
.eingabezeile .e-menge { width: 60px; flex: none; }
.eingabezeile .e-einheit { width: 92px; flex: none; }
.eingabezeile .e-name { flex: 1; }

.titelfeld {
  width: 100%; border: 0; background: none; padding: 0;
  font-family: var(--schrift-display); font-weight: 500;
  font-size: var(--gr-titel); line-height: var(--zh-titel); color: var(--text);
}
.toenungswahl { display: flex; align-items: center; gap: 12px; }
.tonknopf { width: 40px; height: 40px; border-radius: var(--r-rund); border: 2.5px solid transparent; }
.tonknopf[aria-pressed="true"] { border-color: var(--gruen-text); }

/* --- Chat --- */
.chatverlauf { display: flex; flex-direction: column; gap: 9px; }
.blase { max-width: 84%; border-radius: var(--r-karte); padding: 11px 13px;
  font-size: var(--gr-flies); line-height: var(--zh-flies); }
.blase .absender { font-size: var(--gr-marker); font-weight: 500; margin-bottom: 3px; }
.blase.fremd { align-self: flex-start; background: var(--flaeche-karte);
  border: 1px solid var(--linie-karte); }
.blase.fremd .absender { color: var(--holz-text); }
.blase.eigen { align-self: flex-end; background: var(--flaeche-tisch); color: var(--text-auf-gruen); }
.blase .zeit { font-size: var(--gr-marker); color: var(--text-leise); margin-top: 4px; }
.blase.eigen .zeit { color: var(--broth); }
.blase.gefiltert { border-style: dashed; color: var(--text-leise); }

.chateingabe { display: flex; gap: 9px; align-items: flex-end; margin-top: var(--takt-2); }
.chateingabe textarea {
  flex: 1; background: var(--flaeche-karte); border: 1px solid var(--linie-feld);
  border-radius: var(--r-bedien); padding: 12px 13px; font-size: var(--gr-flies);
  resize: none; overflow: hidden; min-height: 46px; max-height: 140px; line-height: var(--zh-flies);
}
.chateingabe textarea[aria-invalid="true"] { border-color: var(--holz-linie); border-width: 2px; }
.sendeknopf { width: 46px; height: 46px; flex: none; border-radius: var(--r-rund);
  background: var(--flaeche-tisch); color: var(--text-auf-gruen); display: grid; place-items: center; }
.sendeknopf[disabled] { opacity: .4; cursor: default; }
.sendeknopf svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* --- Masken: rechtliches, zahlung --- */
.platzhalterblock {
  border: 1px dashed var(--holz-linie); border-radius: var(--r-karte);
  padding: 15px 16px; color: var(--text-leise); font-size: var(--gr-flies);
  line-height: var(--zh-flies);
}
.platzhalterblock .marke { display: inline-block; font-size: var(--gr-marker); font-weight: 500;
  color: var(--holz-text); margin-bottom: 6px; }
.zustimmzeile { display: flex; gap: 12px; align-items: flex-start; width: 100%;
  background: none; text-align: left; padding: 11px 0; }
.zustimmzeile .kaestchen { margin-top: 2px; }
.betragszeile { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; }
.betragszeile .wert { font-family: var(--schrift-display); font-weight: 500;
  font-size: var(--gr-portion); font-variant-numeric: tabular-nums; }

/* --- Loeschbestaetigung (§7, einzige Ausnahme von "keine Overlays") --- */
.bestaetigung { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(38, 56, 44, .55); padding: var(--rand-seite); }
.bestaetigung .karte { max-width: 340px; width: 100%; }

/* --- Fünf Navigationspunkte statt vier (Ansage 01.09.2026) ---------------
   Die Leiste trägt seit der Küchen-Sektion einen Punkt mehr. Geändert wird
   dafür nur der seitliche Innenabstand, nicht die Schriftgröße — eine kleinere
   Schrift in der Navigation wäre der erste Schritt zurück hinter §18. Erst
   unterhalb von 350 px Gerätebreite, wo „Entdecken" sonst anstößt, geht die
   Beschriftung eine Stufe herunter; die Trefferfläche von 44 px bleibt in
   jedem Fall unangetastet. */
.navpunkt { padding-left: 2px; padding-right: 2px; }
/* Ohne diese Zeile trennt die Silbentrennung aus base.css (hyphens: auto am
   body) das Wort mitten in der Leiste: „Entde-cken". */
.navpunkt span { hyphens: none; -webkit-hyphens: none; }

@media (max-width: 349px) {
  .navpunkt span { font-size: .625rem; }
}