/* Ospella — komponenten.css (§10). Keine Schatten, Trennung ueber Ton. */

/* --- Kopf: Wortmarke (§20) + Screentitel --- */
.wortmarke {
  font-family: var(--schrift-display); font-weight: 500;
  font-size: var(--gr-listentitel); color: var(--gruen-text);
  margin-bottom: 4px;
}
.wortmarke i { font-style: normal; color: var(--akzent); }
.screenkopf { margin-bottom: var(--takt-2); }
.screenkopf h1 { color: var(--pot-deep); }
:root[data-modus="dunkel"] .screenkopf h1 { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .screenkopf h1 { color: var(--text); }
}

.zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gruen-text); font-size: var(--gr-bedien);
  padding: 8px 4px 8px 0; margin: -8px 0 6px -4px; min-height: 44px;
}
.zurueck::before {
  content: ""; width: 9px; height: 9px; flex: none;
  border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

/* --- Karte --- */
.karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-karte);
  border-radius: var(--r-karte);
  padding: 16px 17px;
}
.karte + .karte { margin-top: var(--takt-1); }
.rubrik { margin: 26px 0 12px; }
.rubrik:first-child { margin-top: 0; }

.trenner { height: 1px; background: var(--linie-trenner); border: 0; margin: 12px 0; }
.zeile:last-child .trenner { display: none; }

/* --- Tischkarte (§10) — genau einmal pro App --- */
.tischkarte {
  background: var(--flaeche-tisch); color: var(--text-auf-gruen);
  border-radius: var(--r-tischkarte); padding: 22px 18px 20px;
}
.tischkarte .zeit { font-size: var(--gr-marker); font-weight: 500;
  color: var(--broth); letter-spacing: 0; }
.tischkarte h2 { font-family: var(--schrift-display); font-weight: 400;
  font-size: var(--gr-gericht); line-height: var(--zh-gericht); margin: 6px 0 4px; }
.tischkarte .meta { font-size: var(--gr-neben); color: var(--broth); }
.tischkarte .trenner { background: var(--linie-auf-gruen); margin: 16px 0 14px; }
.tischkarte .detail { font-size: var(--gr-neben); color: var(--broth); margin-top: 12px; }

/* --- Gedeck (§8) --- */
.gedeck { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: 2px; }
.gedeck::-webkit-scrollbar { display: none; }
.gedeck-platz {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
  scroll-snap-align: center; background: none; padding: 0;
}
.gedeck-teller {
  width: 44px; height: 44px; border-radius: var(--r-rund);
  display: grid; place-items: center;
  background: var(--porcelain); border: 2.5px solid var(--flaeche-tisch);
  font-family: var(--schrift-display); font-weight: 500; font-size: 1.125rem;
  color: var(--pot);
  transition: transform var(--d-teller) ease-out, border-color var(--d-teller) ease-out;
}
.gedeck-platz[aria-pressed="true"] .gedeck-teller {
  border-color: var(--akzent); transform: translateY(-3px);
}
.gedeck-platz.frei .gedeck-teller {
  background: transparent; border: 2px dashed var(--holz-linie); color: var(--holz-text);
}
.gedeck-name { font-size: var(--gr-marker); line-height: var(--zh-marker); color: var(--broth); }
.gedeck-rest { align-self: center; font-size: var(--gr-marker); color: var(--holz); }
.gedeck-auskunft { font-size: var(--gr-neben); color: var(--broth); margin-top: 12px; min-height: 1.5em; }

/* Kleines Gedeck auf der Wischkarte */
.gedeck.klein { overflow: visible; gap: 8px; }
.gedeck.klein .gedeck-teller { width: 34px; height: 34px; font-size: .9375rem;
  border-color: var(--linie-karte); }
.gedeck.klein .gedeck-platz.frei .gedeck-teller { border: 2px dashed var(--holz-linie); }

/* --- Bildflaeche (§10) — nie Foto, nie Emoji --- */
.bildflaeche {
  border-radius: var(--r-bildflaeche); display: grid; place-items: center;
  font-family: var(--schrift-display); font-weight: 400; flex: none;
}
.bildflaeche.klein { width: 60px; height: 60px; font-size: 1.5rem; }
.bildflaeche.gross { width: 100%; height: 118px; font-size: var(--gr-buchstabe); }
.ton-kraut { background: var(--ton-kraut-flaeche); color: var(--ton-kraut-buchstabe); }
.ton-teig { background: var(--ton-teig-flaeche); color: var(--ton-teig-buchstabe); }
.ton-paprika { background: var(--ton-paprika-flaeche); color: var(--ton-paprika-buchstabe); }
.ton-rauch { background: var(--ton-rauch-flaeche); color: var(--ton-rauch-buchstabe); }

/* --- Gerichtszeile --- */
.gerichtszeile { display: flex; gap: 13px; align-items: center; width: 100%;
  text-align: left; background: none; padding: 0; }
.gerichtszeile .rumpf { min-width: 0; flex: 1; }
.gerichtszeile .name { font-family: var(--schrift-display); font-weight: 400;
  font-size: var(--gr-listentitel); line-height: var(--zh-listentitel); color: var(--text); }
.gerichtszeile .meta { font-size: var(--gr-neben); color: var(--text-leise); margin-top: 2px; }

/* --- Portionsleiste (§10) --- */
.portionen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--flaeche-ruhig); border-radius: var(--r-bedien); padding: 11px 13px;
}
.portionen .beschriftung { font-size: var(--gr-bedien); color: var(--text); }
.portionen .steller { display: flex; align-items: center; gap: 6px; }
.portionen button {
  width: 44px; height: 44px; border-radius: var(--r-rund);
  border: 1.5px solid var(--gruen-linie); color: var(--gruen-text);
  display: grid; place-items: center; font-size: 1.25rem; line-height: 1;
}
.portionen button[disabled] { opacity: .38; cursor: default; }
.portionen .wert { min-width: 2.4ch; text-align: center; color: var(--gruen-text); }

/* --- Buttons (§10) --- */
.hauptaktion {
  display: block; width: 100%; background: var(--flaeche-tisch);
  color: var(--text-auf-gruen); border-radius: var(--r-bedien);
  padding: 15px 16px; font-size: var(--gr-flies); text-align: center; min-height: 48px;
}
.nebenaktion {
  display: inline-block; border: 1.5px solid var(--gruen-linie); color: var(--gruen-text);
  border-radius: var(--r-bedien); padding: 12px 16px; font-size: var(--gr-bedien);
  background: none; min-height: 44px;
}
.nebenaktion.warnend { border-color: var(--warn); color: var(--warn-text); }
.aktionsreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }

.pille {
  display: inline-flex; align-items: center; border-radius: var(--r-pille);
  padding: 5px 11px; font-size: var(--gr-marker); font-weight: 500;
  border: 1px solid var(--linie-feld); color: var(--text-leise);
}
.pille.offen { color: var(--akzent-stark); border-color: var(--akzent-stark); }
.pille.wahl { min-height: 44px; padding: 10px 14px; font-size: var(--gr-bedien);
  font-weight: 400; color: var(--text); }
.pille.wahl[aria-pressed="true"] { border: 1.5px solid var(--gruen-linie);
  background: var(--flaeche-ruhig); color: var(--gruen-text); }
.pille.freiwillig { border-style: dashed; border-color: var(--holz-linie); color: var(--holz-text); }

/* --- Eingabefelder --- */
.feld { display: block; margin-bottom: 12px; }
.feld > span { display: block; font-size: var(--gr-bedien); color: var(--text-leise); margin-bottom: 6px; }
.feld input, .feld select, .feld textarea {
  width: 100%; background: var(--flaeche-karte); border: 1px solid var(--linie-feld);
  border-radius: var(--r-bedien); padding: 13px; font-size: var(--gr-flies);
  color: var(--text); min-height: 44px;
}
.feld textarea { resize: none; overflow: hidden; line-height: var(--zh-flies); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-leise); }

/* --- Fehler: keine Fehlerfarbe, Kante in Holz (§6.1) --- */
.hinweis-kante {
  border-left: 2px solid var(--holz-linie); padding-left: 11px;
  color: var(--text); font-size: var(--gr-neben); line-height: var(--zh-neben);
  margin-top: 10px;
}

/* --- Einkaufszeile --- */
.einkaufszeile { display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; padding: 9px 0; text-align: left; }
.kaestchen {
  width: 21px; height: 21px; flex: none; border-radius: var(--r-kaestchen);
  border: 1.5px solid var(--gruen-linie); display: grid; place-items: center;
  transition: background var(--d-kaestchen) ease-out;
}
.einkaufszeile[aria-checked="true"] .kaestchen { background: var(--flaeche-tisch);
  border-color: var(--flaeche-tisch); }
.kaestchen svg { width: 12px; height: 12px; opacity: 0; }
.einkaufszeile[aria-checked="true"] .kaestchen svg { opacity: 1; }
.einkaufszeile .sache { flex: 1; min-width: 0; }
.einkaufszeile[aria-checked="true"] .sache { text-decoration: line-through; color: var(--text-leise); }
.einkaufszeile .menge { font-size: var(--gr-bedien); color: var(--text-leise); }

.fortschritt { height: 8px; border-radius: var(--r-pille); background: var(--wood-pale); overflow: hidden; }
.fortschritt i { display: block; height: 100%; background: var(--flaeche-tisch);
  transition: width var(--d-balken) ease; }

/* --- Beitragszeile --- */
.beitragszeile { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: var(--r-rund);
  display: grid; place-items: center; background: var(--flaeche-ruhig);
  color: var(--gruen-text); font-family: var(--schrift-display); font-weight: 500; }

/* --- Wochenraster (§12) --- */
.wochenraster { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 6px; }
.wochenraster .kopf { font-size: var(--gr-marker); color: var(--text-leise); text-align: center; }
.wochenraster .beschriftung { font-size: var(--gr-neben); color: var(--text-leise);
  align-self: center; padding-right: 6px; }
.rasterzelle {
  height: 36px; border-radius: var(--r-zelle); background: var(--flaeche-karte);
  border: 1px solid var(--linie-feld); display: grid; place-items: center;
}
.rasterzelle[aria-checked="true"] { background: var(--flaeche-ruhig);
  border: 1.5px solid var(--gruen-linie); }
.rasterzelle svg { width: 13px; height: 13px; opacity: 0; color: var(--gruen-text); }
.rasterzelle[aria-checked="true"] svg { opacity: 1; }

/* --- Leerzustand (§17) --- */
.leer { padding: 4px 0 2px; }
.leer p { font-size: var(--gr-flies); line-height: var(--zh-flies); color: var(--text-leise); max-width: 40ch; }

/* --- Abstandsklassen statt Inline-Stilen (die CSP erlaubt kein style-Attribut) --- */
.abstand { margin-top: var(--takt-2); }
.abstand-unten { margin-bottom: var(--takt-2); }
.abstand-klein { margin-top: 14px; }

.zeilenrumpf { flex: 1; min-width: 0; display: block; }
.beitragszeile .kaestchen { background: var(--flaeche-tisch); border-color: var(--flaeche-tisch);
  color: var(--text-auf-gruen); }
.beitragszeile .kaestchen svg { opacity: 1; }

.noskript { padding: var(--rand-seite); }

/* Schrittliste im Eingabemodus: Zahl in Holz, Feld nimmt den Rest. */
.schrittliste .eingabezeile { align-items: flex-start; }
.schrittliste .zahl { color: var(--holz-text); flex: none; min-width: 1.6ch;
  padding-top: 10px; text-align: right; }
.schrittliste textarea {
  flex: 1; background: var(--flaeche-karte); border: 1px solid var(--linie-feld);
  border-radius: var(--r-bedien); padding: 11px 12px; font-size: var(--gr-flies);
  line-height: var(--zh-flies); resize: none; overflow: hidden; min-height: 44px;
}

/* Zeilenrumpf: Titel und Metazeile stapeln, sonst laufen sie ineinander. */
.gerichtszeile .rumpf > span,
.zeilenrumpf > span,
.zustimmzeile > span > span { display: block; }
.zeilenrumpf .t-neben, .zustimmzeile .t-neben { margin-top: 2px; }

.hinweis-kante + .t-neben { margin-top: 10px; }

/* Zustimmzeile, Schalter und Auswahl teilen sich das Kaestchen der
   Einkaufszeile — die Fuellung im Zustand „an" fehlte dort. */
.zustimmzeile[aria-checked="true"] .kaestchen {
  background: var(--flaeche-tisch); border-color: var(--flaeche-tisch);
  color: var(--text-auf-gruen);
}
.zustimmzeile[aria-checked="true"] .kaestchen svg { opacity: 1; }
.zustimmzeile[role="radio"] .kaestchen { border-radius: var(--r-rund); }
.nebenaktion[disabled] { opacity: .4; cursor: default; }

/* GEMESSEN 01.09.2026: Der Hauptknopf zeigte seinen deaktivierten Zustand
   nicht an. Im Onboarding stand „Weiter" voll grün da, obwohl das Pflichtfeld
   leer war und der Knopf nicht reagierte — die Nebenaktion kennt diese Regel
   seit jeher, der Hauptaktion fehlte sie. */
.hauptaktion[disabled] { opacity: .45; cursor: default; }