/* ==========================================================================
   Küchentisch · Rahmen (Ticket L2): Kopf, untere Leiste / Seitenleiste, Blatt,
   Startbildschirm, Gruppenseiten, Aktionsleiste. Nur Variablen aus basis.css,
   keine eigenen Farben oder Schriften (Spezifikation §9).
   ========================================================================== */

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--a2);
  min-height: 3.5rem; padding: .35rem var(--a3) .35rem var(--a2); background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.kopf__zurueck {
  display: grid; place-items: center; width: var(--tipp); height: var(--tipp); border-radius: 50%;
  color: var(--text); text-decoration: none; flex: none;
}
.kopf__zurueck:active { background: var(--tisch); }
.kopf__titel {
  flex: 1; min-width: 0; font-weight: 700; font-size: 1.25rem;
  margin: 0; padding-left: var(--a2); overflow-wrap: anywhere;
}
.kopf .konto { font-size: .9rem; color: var(--leise); text-align: right; }
.kopf .konto:empty { display: none; }
.kopf .person { flex: none; }

/* ---------- Inhalt ---------- */
.inhalt {
  max-width: var(--inhalt-breit); margin: 0 auto;
  padding: var(--a4) var(--a4) calc(var(--leiste-h) + env(safe-area-inset-bottom, 0px) + var(--a6));
}
.inhalt--ohne-leiste { padding-bottom: var(--a6); }
.ueberspringen {
  position: absolute; left: var(--a2); top: -4rem; z-index: 40; padding: var(--a2) var(--a3);
  background: var(--karte); color: var(--text); border-radius: var(--rund-s); border: 2px solid var(--primaer);
}
.ueberspringen:focus { top: var(--a2); }

/* ---------- Untere Leiste (Daumenzone); breit: Seitenleiste ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--leiste-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--a2) env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; background: var(--karte); border-top: 1px solid var(--linie);
}
.leiste__ziel {
  display: grid; justify-items: center; gap: 2px; padding: .35rem 0; margin: 0 2px; border-radius: var(--rund-m);
  color: var(--leise); text-decoration: none; font-size: .75rem; font-weight: 700; min-height: var(--tipp);
}
.leiste__ziel[aria-current="page"] { color: var(--primaer); background: var(--primaer-hell); }
.leiste__ziel[aria-current="page"] .symbol { stroke-width: 2.6; }
.leiste__plus {
  justify-self: center; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-top: -1.5rem;
  border-radius: 50%; background: var(--tomate); color: var(--primaer-text); border: 4px solid var(--papier);
  cursor: pointer; text-decoration: none; box-shadow: 0 4px 0 rgb(0 0 0 / .18); font: inherit;
  transition: transform var(--dauer-2) var(--ease-hupf);
}
.leiste__plus:active { transform: scale(.92); }
.leiste__plus .symbol { width: 1.9rem; height: 1.9rem; stroke-width: 3; }
@media (min-width: 900px) {
  .leiste {
    top: 0; right: auto; width: 6rem; height: auto; padding: var(--a4) var(--a2); grid-template-columns: 1fr;
    grid-auto-rows: min-content; align-content: start; gap: var(--a2); border-top: 0; border-right: 1px solid var(--linie);
  }
  .leiste__plus { margin-top: 0; order: -1; margin-bottom: var(--a3); }
  .inhalt { margin-left: max(7rem, calc(50vw - var(--inhalt-breit) / 2 + 3rem)); padding-bottom: var(--a6); }
  .inhalt--ohne-leiste { margin-left: auto; }
  .kopf { padding-left: 6.5rem; }
  .kopf--ohne-leiste { padding-left: var(--a2); }
}

/* ---------- Blatt „Was ist neu?“ (von unten) ---------- */
.blatt { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 32rem; background: var(--karte); color: var(--text); border-radius: var(--rund-l) var(--rund-l) 0 0; }
.blatt::backdrop { background: rgb(20 15 5 / .5); }
.blatt[open] { animation: blatt-hoch var(--dauer-3) var(--ease); }
.blatt__inhalt { padding: var(--a5) var(--a4) calc(var(--a5) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--a2); }
@keyframes blatt-hoch { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 900px) { .blatt { margin: auto; border-radius: var(--rund-l); } }

/* ---------- Startbildschirm „Küche“ und Gruppenseiten ---------- */
.tischband {
  margin: calc(var(--a4) * -1) calc(var(--a4) * -1) var(--a4); padding: var(--a5) var(--a4) var(--a4);
  background-color: var(--tisch);
  background-image:
    linear-gradient(90deg, rgb(194 59 37 / .10) 50%, transparent 50%),
    linear-gradient(rgb(194 59 37 / .10) 50%, transparent 50%);
  background-size: 28px 28px;
  border-bottom: 1px solid var(--linie);
}
.tischband p { margin: 0; }
@media (min-width: 900px) { .tischband { margin: 0 0 var(--a4); border: 1px solid var(--linie); border-radius: var(--rund-m); } }
.gruss { font-size: 1.75rem; margin-bottom: var(--a1); }
.balken-gruppe { display: grid; gap: var(--a3); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--a3); }
.kachel { display: grid; justify-items: start; gap: var(--a1); min-height: 7.5rem; align-content: start; position: relative; }
a.karte.kachel { display: grid; }
.kachel__bild {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--rund-s);
  background: var(--kachel-farbe, var(--primaer-hell)); color: var(--kachel-text, var(--primaer)); margin-bottom: var(--a1);
}
.kachel strong { font-size: 1.125rem; overflow-wrap: anywhere; }
.kachel span.leise { font-size: .9rem; line-height: 1.3; }
.kachel .pille { position: absolute; top: var(--a3); right: var(--a3); }
.kachel--butter { --kachel-farbe: var(--butter-hell); --kachel-text: var(--text); }
.kachel--tomate { --kachel-farbe: var(--tomate-hell); --kachel-text: var(--tomate); }
.kachel--bald { opacity: .7; }
.heute__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); }
.heute__kopf h2 { margin: 0; font-size: 1.125rem; }
.balken-kopf { display: flex; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a2); font-weight: 700; }

/* ---------- Einstellungen ---------- */
.einstellungen { display: grid; gap: var(--a4); }
.einstellungen .karte h2 { font-size: 1.25rem; }
.einstellungen .wahl { display: flex; flex-wrap: wrap; }
.einstellungen .wahl__knopf { flex: 1 1 auto; }
.konto-zeile { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; }
.konto-zeile form { margin: 0; }

/* ---------- Aktionsleiste (Hauptknopf im Daumenbereich, über der Leiste) ---------- */
.aktionsleiste {
  position: sticky; bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom, 0px) + var(--a2)); z-index: 10;
  display: flex; gap: var(--a2); padding: var(--a3) 0 var(--a1);
  background: linear-gradient(to top, var(--papier) 70%, transparent);
}
.aktionsleiste .knopf { flex: 1; }
.inhalt--ohne-leiste .aktionsleiste { bottom: 0; }
@media (min-width: 900px) { .aktionsleiste { bottom: 0; } }