/* Evo-Knopf (gemeinsam) – passt in eine untere Leiste wie ein normaler Reiter.
   23.10.2026: Evo-Blatt nach Designsystem v2 (~/designsystem/2026-10-22/v2/tokens.css). Die Werte sind hier als eigene
   --evo-*-Größen übernommen (gleiche Farben wie tokens.css, Akzent Lagerhaus), damit der Baustein in Apps mit und ohne v2 gleich aussieht.
   Eine App mit v2 kann --evo-akzent auf ihr --akzent setzen. Keine Emoji, Symbole Lucide (currentColor). */
.evo-knopf { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 48px; min-height: 48px; }
.evo-knopf .evo-zeichen { width: 26px; height: 26px; }
.evo-knopf .evo-knopf-text { font-size: 0.875rem; }
.evo-knopf.hoert { color: #1d5fa8; animation: evo-puls 1.2s ease-in-out infinite; }
@keyframes evo-puls { 50% { opacity: 0.55; } }

.evo-blatt {
  --evo-flaeche: #ffffff; --evo-text: #17232b; --evo-leise: #4b5862; --evo-linie: #d5dee4; --evo-feldrand: #6b7883;
  --evo-akzent: #1d5fa8; --evo-akzent-dunkel: #154a84; --evo-akzent-hell: #e2eefa; --evo-aus: #e4e9ed; --evo-weiss: #ffffff;
  --evo-erfolg: #15803d; --evo-erfolg-text: #14532d; --evo-erfolg-hell: #e5f4ea;
  --evo-fehler: #b42318; --evo-fehler-text: #8a1c12; --evo-fehler-hell: #fdecea;
  --evo-dunkel: #1f2a33; --evo-gelb: #ffd84d; --evo-gelb-text: #2b2100;
  position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 520px; margin: 0 auto;
  background: var(--evo-flaeche); color: var(--evo-text); border: 2px solid var(--evo-linie); border-top: 6px solid var(--evo-akzent);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(23, 35, 43, .22); padding: 16px;
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", sans-serif;
  max-height: calc(100vh - 120px); overflow-y: auto; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.evo-blatt[data-art="erfolg"] { border-top-color: var(--evo-erfolg); }
.evo-blatt[data-art="fehler"] { border-top-color: var(--evo-fehler); }
.evo-blatt .evo-erkannt { margin: 0 0 4px; font-size: 0.875rem; color: var(--evo-leise); }
.evo-blatt .evo-satz { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; line-height: 1.35; display: flex; gap: 8px; align-items: flex-start; }
.evo-blatt[data-art="erfolg"] .evo-satz .evo-sy { color: var(--evo-erfolg); flex: none; margin-top: 2px; }
.evo-blatt .evo-sy { width: 20px; height: 20px; }
.evo-blatt .evo-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.evo-blatt[data-art="auswahl"] .evo-reihe { flex-direction: column; }
.evo-blatt .evo-k {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 44px; padding: 0 16px;
  border-radius: 12px; border: 2px solid var(--evo-feldrand); background: var(--evo-flaeche); color: var(--evo-text);
  font: inherit; font-weight: 700; cursor: pointer; hyphens: manual; -webkit-hyphens: manual;
}
.evo-blatt .evo-k:active { transform: translateY(1px); background: var(--evo-aus); }
.evo-blatt .evo-k:focus-visible { outline: 3px solid var(--evo-akzent); outline-offset: 2px; }
.evo-blatt .evo-k.haupt { background: var(--evo-akzent); border-color: var(--evo-akzent); color: var(--evo-weiss); }
.evo-blatt .evo-k.haupt:active { background: var(--evo-akzent-dunkel); }
.evo-blatt .evo-k.neben { border-color: var(--evo-akzent); color: var(--evo-akzent-dunkel); }
.evo-blatt .evo-k.breit { flex: 1 1 100%; width: 100%; justify-content: flex-start; text-align: left; }
.evo-blatt .evo-k.evo-rueck { background: var(--evo-gelb); border-color: var(--evo-gelb); color: var(--evo-gelb-text); }
@media (prefers-reduced-motion: reduce) { .evo-knopf.hoert { animation: none; } }