/* ==========================================================================
   Casa da Enzo · Trattoria App · Aktionen und Bestätigungen (Runde 8, GM-051)
   Baut nur auf tokens/tokens.css und components.css auf (nutzt dort .knopf,
   .knopfreihe, .bestaetigung und die Animation blatt-hoch).
   Grundregel (Sergio, 29.10.2026): Endgültiges fragt im Dialog nach,
   Umkehrbares passiert sofort mit „Rückgängig“, Harmloses passiert sofort.
   - .aktionen        Aktionsleiste: Handy fest unten, ab 960 px oben, sticky
   - .arbeitsschritt  Bearbeiten-Seiten (am body): die Leiste ersetzt mobil die Reiter
   - .mehr-aktionen   Menü „⋯“ für Seltenes und Zerstörendes, <details> ohne Skript
   - .dialog          Rückfrage als natives <dialog>, mobil unten, ab 960 px mittig
   - .rueckmeldung    Rückmeldung nach einer Aktion, auf Wunsch mit „Rückgängig“
     (nicht .meldung: das ist in components.css der schwebende Toast)
   ========================================================================== */

/* ---------- Aktionsleiste ----------
   Höchstens zwei Knöpfe: links die Nebenaktion (knopf--zweit), rechts die Hauptaktion.
   Mobil sitzt sie über den Reitern (Höhe der D1-Reiter: 48 px Tastfläche + Abstand + Linie). */
/* Höhe des Kopfs ab 960 px: 48 px Inhalt + 2 × 8 px Abstand + 1 px Linie (components.css .kopf) */
:root { --reiter-hoehe: calc(var(--touch) + var(--s-3) + 1px); --kopf-hoehe: 65px; }
.aktionen {
  position: fixed; z-index: 25; left: 0; right: 0;
  bottom: calc(var(--reiter-hoehe) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) max(var(--rand-mobil), env(safe-area-inset-right, 0px)) var(--s-3) max(var(--rand-mobil), env(safe-area-inset-left, 0px));
  background: var(--white); border-top: var(--linie);
}
.aktionen > .knopf { flex: 1 1 0; min-width: 0; padding-inline: var(--s-3); }
.aktionen > .knopf--zweit { flex: 0 1 auto; }
body:has(.aktionen) .app__main { padding-bottom: calc(var(--reiter-hoehe) + var(--touch) + var(--s-6) + var(--s-4) + env(safe-area-inset-bottom, 0px)); }
/* Ein fokussiertes Feld scrollt nie unter die Leiste */
html:has(.aktionen) { scroll-padding-bottom: calc(var(--reiter-hoehe) + var(--touch) + var(--s-8) + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 959.98px) {
  .arbeitsschritt .reiter { display: none; }
  .arbeitsschritt .aktionen { bottom: 0; padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  body.arbeitsschritt .app__main { padding-bottom: calc(var(--touch) + var(--s-6) + var(--s-4) + env(safe-area-inset-bottom, 0px)); }
  html:has(.arbeitsschritt) { scroll-padding-bottom: calc(var(--touch) + var(--s-8) + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 960px) {
  /* Oben in der Inhaltsspalte, bleibt beim Scrollen unter dem Kopf stehen */
  .aktionen {
    position: sticky; top: var(--kopf-hoehe); bottom: auto; z-index: 15;
    margin-top: calc(var(--s-8) * -1);
    padding: var(--s-3) 0;
    justify-content: flex-end;
    background: var(--panna); border-top: 0; border-bottom: var(--linie);
  }
  .aktionen > .knopf, .aktionen > .knopf--zweit { flex: 0 0 auto; padding-inline: var(--s-6); }
  body:has(.aktionen) .app__main { padding-bottom: var(--s-14); }
  html:has(.aktionen) { scroll-padding-top: calc(var(--kopf-hoehe) + var(--touch) + var(--s-8)); scroll-padding-bottom: 0; }
}

/* ---------- Menü „⋯“ ----------
   Im Kopf oben rechts. Zerstörende Punkte stehen unten, nach einem Trenner, nie neben Speichern.
   Ein Punkt, der gerade nicht geht, bleibt sichtbar und sagt warum (--aus). */
.mehr-aktionen { position: relative; flex: none; }
.mehr-aktionen > summary {
  display: inline-grid; place-items: center; width: var(--touch); height: var(--touch);
  list-style: none; cursor: pointer;
}
.mehr-aktionen > summary::-webkit-details-marker { display: none; }
.mehr-aktionen > summary:hover, .mehr-aktionen[open] > summary { background: var(--panna-dark); }
.mehr-aktionen__liste {
  position: absolute; z-index: 35; top: calc(100% + var(--s-1)); right: 0;
  width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 2 * var(--rand-mobil)));
  display: flex; flex-direction: column; padding: var(--s-1) 0;
  background: var(--white); border: var(--linie); box-shadow: var(--schatten-lift);
}
.mehr-aktionen__punkt {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: var(--touch); padding: 0 var(--s-4);
  border: 0; background: none; color: var(--lava); text-align: left; text-decoration: none;
  font-size: var(--text-base);
}
a.mehr-aktionen__punkt:hover, button.mehr-aktionen__punkt:hover { background: var(--panna); }
.mehr-aktionen__punkt--zerstoert { color: var(--vino); }
.mehr-aktionen__punkt--aus { flex-wrap: wrap; row-gap: 2px; padding-block: var(--s-2); color: var(--muted); cursor: default; }
.mehr-aktionen__punkt--aus small { flex-basis: 100%; padding-left: calc(18px + var(--s-3)); font-size: var(--text-sm); line-height: 1.35; }
.mehr-aktionen__trenner { margin: var(--s-1) 0; border: 0; border-top: var(--linie); }

/* ---------- Dialog ----------
   Natives <dialog> mit showModal(): Die Seite dahinter ist inert, Esc schließt.
   Ohne Skript zeigt die App dieselbe Rückfrage als .bestaetigung in der Seite; den Sprung dorthin übernimmt
   autofocus auf „Abbrechen“ (keine Sprungmarke im Link: mit Sprungmarke ignorieren Browser autofocus).
   Der Rand liegt am inneren .dialog__inhalt, damit ein Klick auf den Schleier den Dialog selbst trifft. */
.dialog {
  width: 100%; max-width: 100%; max-height: calc(100dvh - var(--s-8));
  margin: auto 0 0; padding: 0;
  border: 0; border-top: 1.5px solid var(--lava);
  background: var(--white); color: var(--lava); box-shadow: var(--schatten-lift);
}
.dialog::backdrop { background: rgba(39, 41, 40, 0.42); }
.dialog[open] { animation: blatt-hoch 220ms ease-out; }
.dialog__inhalt {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6) max(var(--rand-mobil), env(safe-area-inset-right, 0px)) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)) max(var(--rand-mobil), env(safe-area-inset-left, 0px));
}
.dialog__titel { margin: 0; font: 500 var(--text-lg)/1.25 var(--font-serif); text-wrap: balance; }
.dialog p { margin: 0; font-size: var(--text-sm); }
.dialog .knopfreihe { flex-wrap: nowrap; }
.dialog .knopfreihe > .knopf { flex: 1 1 0; min-width: 0; padding-inline: var(--s-3); }
@media (min-width: 960px) {
  .dialog { width: 480px; margin: auto; border: 1.5px solid var(--lava); }
  .dialog__inhalt { padding: var(--s-8); }
}
@media (prefers-reduced-motion: reduce) { .dialog[open] { animation: none; } }
/* Rückfrage in der Seite: Der Sprung per autofocus landet unter Kopf und Leiste */
.bestaetigung[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--touch) + var(--s-8)); }

/* ---------- Rückmeldung ----------
   Steht in der Seite (nicht schwebend wie der Toast .meldung aus components.css).
   Bleibt, bis die Seite verlassen wird, und blendet sich nicht von selbst aus. */
.rueckmeldung {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4); background: var(--white); color: var(--lava);
  border: var(--linie); border-left: 4px solid var(--live);
}
.rueckmeldung__text { flex: 1 1 200px; min-width: 0; font-size: var(--text-sm); }
.rueckmeldung__text strong { display: block; font: 500 var(--text-md)/1.3 var(--font-serif); }
.rueckmeldung form { margin: 0; }