/* ==========================================================================
   Küchentisch – Bauteile (Ticket L1 / ORG-453)
   Karte, Knopf, Eingabe/Feld, Meldung, Listenzeile, Pille, Person,
   Auswahlschalter, Leerer Zustand, Tabelle. Klassen wie in docs/stil/stil.css
   und Spezifikation §3.5. Nur Variablen aus basis.css – keine Hex-Farben,
   kein font-family.
   ========================================================================== */

/* ---------- Karte ---------- */
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
  padding: var(--a4); box-shadow: var(--schatten); color: var(--text);
}
.karte--hervor { background: var(--butter-hell); border-color: var(--butter); }
.karte--ruhig { box-shadow: none; background: var(--tisch); border-color: transparent; }
.karte > :last-child { margin-bottom: 0; }
a.karte { display: block; text-decoration: none; transition: transform var(--dauer-1) var(--ease); }
a.karte:active { transform: scale(.98); }

/* ---------- Knopf (fühlt sich wie ein Ding zum Drücken an) ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: var(--tipp); padding: .6rem 1.25rem; border: 0; border-radius: var(--rund-s);
  background: var(--primaer); color: var(--primaer-text); font: inherit; font-weight: 800;
  text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--primaer-dunkel);
  transition: transform var(--dauer-1) var(--ease), box-shadow var(--dauer-1) var(--ease), filter var(--dauer-1);
}
.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primaer-dunkel); }
.knopf--zweit { background: var(--karte); color: var(--text); border: 2px solid var(--rand); box-shadow: 0 3px 0 var(--linie); }
.knopf--leise { background: transparent; color: var(--primaer); box-shadow: none; text-decoration: underline; }
.knopf--gefahr { background: var(--fehler); color: var(--fehler-text); box-shadow: 0 3px 0 rgb(0 0 0 / .25); }
.knopf--gross { width: 100%; min-height: 3.5rem; font-size: 1.125rem; }
.knopf--rund { width: var(--tipp); padding: 0; border-radius: 50%; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ---------- Eingabe, Feld, Meldung ---------- */
.eingabe {
  width: 100%; min-height: var(--tipp); padding: .6rem .85rem; font: inherit; color: var(--text);
  background: var(--karte); border: 2px solid var(--rand); border-radius: var(--rund-s);
}
textarea.eingabe { min-height: 6rem; resize: vertical; }
.eingabe:focus-visible { outline: 3px solid var(--primaer); outline-offset: 1px; border-color: var(--primaer); }
.feld { display: grid; gap: var(--a1); font-weight: 700; }
.feld .hilfe { font-weight: 400; color: var(--leise); font-size: .9rem; }
.meldung { padding: var(--a3) var(--a4); border-radius: var(--rund-s); border: 2px solid var(--rand); background: var(--karte); }
.meldung--fehler { border-color: var(--fehler); color: var(--fehler); font-weight: 700; }
.meldung--ok { border-color: var(--primaer); color: var(--primaer); font-weight: 700; }

/* ---------- Listenzeile: ul.liste > li > .zeile ---------- */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.zeile {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--a3);
  min-height: 3.5rem; padding: .5rem var(--a4); width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m);
  text-decoration: none; cursor: pointer; box-shadow: var(--schatten);
  transition: transform var(--dauer-1) var(--ease);
}
.zeile--zwei { grid-template-columns: 1fr auto; }
.zeile:active { transform: scale(.985); }
.zeile__text { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.zeile__unter { display: block; font-weight: 400; font-size: .9rem; color: var(--leise); }
.zeile__meta { color: var(--leise); font-size: .95rem; white-space: nowrap; }
.zeile__haken {
  width: 1.75rem; height: 1.75rem; border: 2px solid var(--primaer); border-radius: 50%;
  display: grid; place-items: center; color: transparent;
  transition: background var(--dauer-2) var(--ease), color var(--dauer-2) var(--ease), transform var(--dauer-2) var(--ease-hupf);
}
.zeile__haken .symbol { width: 1rem; height: 1rem; stroke-width: 3; }
.zeile--erledigt { background: transparent; box-shadow: none; }
.zeile--erledigt .zeile__text { text-decoration: line-through; color: var(--leise); font-weight: 400; }
.zeile--erledigt .zeile__haken { background: var(--primaer); color: var(--primaer-text); transform: scale(1.08); }

/* ---------- Pille und Person ---------- */
.pille {
  display: inline-flex; align-items: center; gap: var(--a1); padding: .1rem .65rem; border-radius: var(--pille);
  border: 1px solid var(--linie); background: var(--tisch); color: var(--text); font-size: .85rem; font-weight: 700;
}
.pille--primaer { background: var(--primaer-hell); border-color: transparent; color: var(--primaer); }
.pille--butter { background: var(--butter); border-color: transparent; color: var(--butter-text); }
.person {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--person, var(--primaer)); color: var(--person-text); font: 900 1rem/1 var(--schrift-titel);
}
.person--erik { --person: var(--erik); }
.person--emmy { --person: var(--emmy); }

/* ---------- Auswahlschalter (2–3 Möglichkeiten nebeneinander) ---------- */
.wahl { display: inline-flex; border: 2px solid var(--rand); border-radius: var(--rund-s); overflow: hidden; background: var(--karte); }
.wahl__knopf { min-height: var(--tipp); padding: .4rem 1rem; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.wahl__knopf + .wahl__knopf { border-left: 2px solid var(--rand); }
.wahl__knopf[aria-pressed="true"] { background: var(--primaer); color: var(--primaer-text); }

/* ---------- Leerer Zustand (immer: Figur + ein Satz + ein Knopf) ---------- */
.leer { display: grid; justify-items: center; gap: var(--a3); text-align: center; padding: var(--a6) var(--a4); }
.leer__bild { width: 6.5rem; height: 6.5rem; }

/* ---------- Tabelle (nur für echte Zahlenreihen) ---------- */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: var(--a2); border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .85rem; color: var(--leise); font-weight: 800; }
.tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }