/* ═══════════════════════════════════════════════════════════════════
   bowhuman-mobile.css — Komponenten der Mobil-Apps (Robin, LittleJohn, Tuck)
   ═══════════════════════════════════════════════════════════════════
   Keim des Mobile-Styleguides (Entscheidung Peter, 28.09.2026). Bewusst
   NICHT in bowhuman-app.css: das ist auf .bh-app gescopt und wird von den
   Mobil-Apps gar nicht geladen. Die Site-/App-Ordner binden diese Datei
   per Symlink ein — nie eine Kopie editieren.

   Produktfarbe: Die Komponenten kennen nur --accent, --accent-dk und
   --accent-on (Namen wie in bowhuman-tokens.css). Die Werte je Produkt
   stehen einmal in Abschnitt 0 und greifen über <html data-product="…">.
   Kein Cyan, kein Orange in den Regeln darunter (Peter, 29.09.2026).
   Weitere Tokens der App (mit Fallback): --navy, --surface, --text.
   Dark Mode über html.dark wie in Robin und LittleJohn.

   Tuck (Angleich-Mobil, 21.10.2026) lädt diese Datei NEBEN
   bowhuman-app.css (Mischform E40): Kopfleiste und Karten aus dem
   Desktop-System, Navigation, Formular-Controls, Snack und Sheets von
   hier. Was beide Dateien berührt, steht in Abschnitt 19 und greift nur
   unter .bh-app — Robin und LittleJohn tragen die Klasse nicht.

   Inhalt:
     0. Produktfarben ([data-product="robin" | "littlejohn" | "tuck"])
     1. Logo-Button (.bh-fab) — trägt das animierte Logo, öffnet das Bogen-Menü
     2. Bogen-Menü (.pie-menu--arc) — Darstellung zu sherwood-pie-menu.js, opts.arc
     3. Scrim hinter dem offenen Menü (.bh-scrim)
     4. Platz links neben dem Logo-Button (.bh-bottom-slot)
     5. Formularliste (.bh-list, .bh-row, .bh-reveal)
     6. Dropdown (.bh-select, .bh-dd*, __group aus <optgroup>) — zu bowhuman-dropdown.js
     7. Segmente (.bh-seg) — Radiogruppe mit gleitendem Knopf
     8. Aktionsmenü (.bh-menu, __item--danger) — zu bowhuman-menu.js, ☰ in der Kopfleiste
     9. Schalter (.bh-switch) — Checkbox mit role=switch, ohne Label-Hülle
    10. Zeilen-Varianten (.bh-group-title, .bh-row--tap, __value, --danger)
    11. Bereichsauswahl (.bh-alpha) — zu bowhuman-alpha-slider.js
    12. Sortierleiste (.bh-sortbar, .bh-dir) — Kategorie, Bereich, Richtung
    13. Hinweis-Toast (.bh-snack, --ok, --err) — zu core/toast.js
    14. Bestätigungsdialog (.confirm-dialog*) — zu core/confirm-dialog.js
    15. Aktionsleiste unter einer Zeile (.bh-row-actions, .bh-row-action)
    16. Zahlenfelder (input[type="number"]) — nativer Spinner aus
    17. Sheet-Basis (.sheet-backdrop, .bottom-sheet, .sheet-*) — aus robin/css/pwa.css
    18. Bewegung (bh-pop, bh-bar-grow, bh-rise, bh-stagger-in)
    19. Mischform mit bowhuman-app.css (.bh-app) — nur Tuck
    20. Datumsfeld und Kalenderblatt (.bh-mdate, .bh-mcal) — zu tuck/js/tuck-date.js
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Produktfarben ──────────────────────────────────────────────
   Der kräftige Markenton füllt in beiden Themes (Pie-Eintrag, Knopf,
   Balken), --accent-on ist die Schrift darauf, --accent-dk die Tinte auf
   Weiß. Alles andere wird daraus gerechnet (color-mix), damit ein neues
   Produkt hier genau drei Werte setzt. Kontraste (29.09.2026):
     Robin      Navy auf #00BCD4 8,24:1 · #0097A7 auf Weiß 3,51:1
     LittleJohn Navy auf #FF9100 8,38:1 · #E07000 auf Weiß 3,24:1
   Beide über 3:1 für Icons und Flächen, Text steht nie direkt in -dk.
     Tuck       Weiß auf #AD1457 6,97:1 (hell) · Weiß auf #C2185B 5,87:1 (dunkel)

   Die abgeleiteten Töne stehen auf [data-product] selbst, nicht auf :root:
   Custom Properties lösen var() dort auf, wo sie deklariert sind. So kann
   ein Element mit anderem data-product mitten auf der Seite stehen (der
   Styleguide zeigt Robin und LittleJohn nebeneinander). */
[data-product="robin"] {
  --accent:    #00BCD4;
  --accent-dk: #0097A7;
  --accent-on: #0d1117;
}
[data-product="littlejohn"] {
  --accent:    #FF9100;
  --accent-dk: #E07000;
  --accent-on: #0d1117;
}
/* Tuck (Angleich-Mobil E41/E42): Magenta trägt WEISSE Schrift, nicht Navy
   — ein Magenta, das Navy trägt, ist zu blass für die Marke. Darum steht
   die Fläche in einem eigenen Token --bh-accent-fill; die Regeln unten
   lesen es mit Rückfall var(--bh-accent-fill, var(--accent)), Robin und
   LittleJohn setzen es nicht und sehen unverändert aus.
   In der Tuck-App setzt bowhuman-app.css --accent schon auf html.bh-app
   (im Dunkeln als Tinte #F05FAA, E33) und schlägt den Wert hier; die
   Fläche kommt dann aus Tucks --accent-fill. Ohne tuck.css (Styleguide-
   Vorschau) greifen die Rückfälle auf die Magenta-Tokens. */
[data-product="tuck"] {
  --accent:         var(--accent-fill, var(--magenta-dk, #AD1457));
  --accent-dk:      var(--magenta-dk, #AD1457);
  --accent-on:      #fff;
  --bh-accent-fill: var(--accent-fill, var(--magenta-dk, #AD1457));
}
[data-product] {
  /* Hellere Stufe für Fokusringe und Tinte im Dunkeln: 70 % Markenton, 30 %
     Weiß. Ergibt für Robin genau das bisherige #4dd0e1 (9,40:1 auf #141b27),
     für LittleJohn #ffb24d (9,65:1) — den Ton aus seinem App-Icon. */
  --bh-accent-hi:  color-mix(in srgb, var(--accent) 70%, #fff);
  --bh-accent-ink: var(--accent-dk);   /* Icons, gewählter Eintrag */
}
html.dark[data-product],
html.dark [data-product] { --bh-accent-ink: var(--bh-accent-hi); }
/* Tuck dunkel: Fläche #C2185B (Weiß 5,87:1); helle Stufe = --magenta-fg
   (#F05FAA, 5,69:1 auf #141b27) statt 70 % Markenton + Weiß, das auf dem
   dunkleren Magenta nur 3,8:1 ergäbe. */
html.dark[data-product="tuck"],
html.dark [data-product="tuck"] {
  --accent:         var(--accent-fill, var(--magenta-fill, #C2185B));
  --bh-accent-fill: var(--accent-fill, var(--magenta-fill, #C2185B));
  --bh-accent-hi:   var(--magenta-fg, #F05FAA);
}
/* Das Zielmotiv im Logo-Button steht auf dem dunklen Knopf, nicht auf der
   Seite: dort der volle Markenton wie im App-Icon, in beiden Themes gleich
   (bowhuman-nav-fab.js liest die Töne am Button). */
[data-product="tuck"] .bh-fab {
  --accent:       var(--magenta, #E91E8C);
  --accent-dk:    var(--magenta-dk, #AD1457);
  --bh-accent-hi: color-mix(in srgb, var(--magenta, #E91E8C) 70%, #fff);
}

:root {
  --bh-fab-size:   60px;
  --bh-fab-gap:    20px;   /* Abstand zum Rand, zusätzlich zur Safe Area */
  --bh-arc-item:   52px;   /* über der 44-pt-Mindestgröße für Touch-Ziele */
  --bh-spring:     cubic-bezier(.34, 1.56, .64, 1);  /* wie .pie-item im Web */
  /* Abstand der App-Spalte zum Fensterrand. Apps mit begrenzter Breite
     setzen ihn, z. B. Robin: max(0px, (100vw - 480px) / 2). */
  --bh-edge:       0px;
  /* Platz unter dem letzten Inhalt, damit der Logo-Button nichts verdeckt */
  --bh-fab-clear:  calc(var(--bh-fab-size) + var(--bh-fab-gap) + 16px + env(safe-area-inset-bottom, 0px));

  /* Formular-Controls (Abschnitte 5–7) */
  --bh-field:        #eef2f5;   /* Feld- und Segmentgrund */
  --bh-field-border: #cfd6dd;
  --bh-danger-ink:   #c62828;   /* Löschen & Co.: 5,62:1 auf Weiß */
  --bh-ease-out:     cubic-bezier(.2, .8, .2, 1);
  /* Bewegungsdauern (Aufgabe 5, 29.09.2026). Faustregel am Pflock:
     Rückmeldung auf einen Tipp ≤ dur-1, nichts, worauf man warten muss. */
  --bh-dur-1:        120ms;   /* Tipp-Rückmeldung: Druck, Auswahl-Pop */
  --bh-dur-2:        220ms;   /* Screenwechsel, Menüs, Überblendungen */
  --bh-dur-3:        280ms;   /* Sheets (Robin confirm-dialog.js wartet genau so lange) */
  --bh-chev:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bh-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bh-ext:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5H3.5v9h9V10M9 3h4v4M13 3L7.5 8.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.dark {
  --bh-field:        #1e2a3e;
  --bh-field-border: rgba(255, 255, 255, .16);
  --bh-danger-ink:   #ff8a80;   /* 7,57:1 auf #141b27 */
}

/* ── 1. Logo-Button ─────────────────────────────────────────────── */
.bh-fab {
  position: fixed;
  right:  calc(var(--bh-edge) + var(--bh-fab-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--bh-fab-gap) + env(safe-area-inset-bottom, 0px));
  z-index: 35;             /* unter Sheet-Backdrops (40): offene Sheets decken ihn ab */
  width: var(--bh-fab-size);
  height: var(--bh-fab-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: none;           /* sichtbar erst mit .is-visible (Router), s. Robin router.js */
  place-items: center;
  cursor: pointer;
  background: linear-gradient(135deg, #0d1117, #1a2e4a);
  box-shadow: 0 8px 20px rgba(13, 17, 23, .4), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .16s var(--bh-spring), box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.bh-fab.is-visible { display: grid; }
.bh-fab:active { transform: scale(.92); }
.bh-fab:focus-visible { outline: 3px solid var(--bh-accent-hi); outline-offset: 3px; }
.bh-fab[aria-expanded="true"] {
  z-index: 1001;           /* über Scrim und Menü, damit er als Schließen-Knopf greift */
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent);
}
.bh-fab svg { width: 46px; height: 46px; overflow: visible; pointer-events: none; }

/* ── 2. Bogen-Menü ──────────────────────────────────────────────────
   sherwood-pie-menu.js setzt left/top jedes Ziels relativ zum Zentrum
   (Mitte des Logo-Buttons) und --i für den Versatz. Der Rand der
   Glasscheibe (Durchmesser = Radius*2+4, gesetzt im Skript) läuft durch
   die Mitten der Ziele. */
.pie-menu--arc {
  position: fixed;
  z-index: 1000;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pie-menu--arc.open { pointer-events: auto; }
.pie-menu--arc .pie-close { display: none; }   /* der Logo-Button schließt */

.pie-menu--arc .pie-bg {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .3s var(--bh-spring), opacity .2s;
}
html.dark .pie-menu--arc .pie-bg { background: rgba(20, 27, 39, .78); }
.pie-menu--arc.open .pie-bg { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.pie-menu--arc .pie-item {
  position: absolute;
  width: var(--bh-arc-item);
  height: var(--bh-arc-item);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  cursor: pointer;
  background: var(--surface, #fff);
  border: 2px solid var(--accent);
  color: var(--accent-dk);          /* ≥ 3:1 auf Weiß — reicht für Icons (Abschnitt 0) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  transition:
    transform .26s var(--bh-spring) calc(var(--i, 0) * 30ms),
    opacity .16s calc(var(--i, 0) * 30ms),
    background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
html.dark .pie-menu--arc .pie-item { background: #141b27; color: var(--bh-accent-hi); }
.pie-menu--arc.open .pie-item { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.pie-menu--arc.open .pie-item:active { transform: translate(-50%, -50%) scale(.92); }

/* Aktives Ziel: --accent-on auf dem Markenton (Kontraste in Abschnitt 0).
   Die html.dark-Variante ist Pflicht — ohne sie überschreibt die Dark-Mode-
   Regel oben die Icon-Farbe und es bleibt die helle Stufe auf dem Markenton
   (1,25:1). Im Prototyp am 28.09. genau so passiert. */
.pie-menu--arc .pie-item[aria-current="page"],
html.dark .pie-menu--arc .pie-item[aria-current="page"] {
  background: var(--bh-accent-fill, var(--accent));
  color: var(--accent-on);
}
.pie-menu--arc .pie-item:focus-visible { outline: 3px solid var(--bh-accent-hi); outline-offset: 3px; }

/* ── 3. Scrim ───────────────────────────────────────────────────── */
.bh-scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 17, 23, .35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
html.dark .bh-scrim { background: rgba(0, 0, 0, .5); }
.bh-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ── 4. Platz links neben dem Logo-Button ────────────────────────────
   Für genau eine Aktion des Screens (Resume-Pille, „Runde starten“).
   Vertikal auf die Mitte des Logo-Buttons ausgerichtet. */
.bh-bottom-slot {
  position: fixed;
  left:   calc(var(--bh-edge) + 16px + env(safe-area-inset-left, 0px));
  right:  calc(var(--bh-edge) + var(--bh-fab-gap) + var(--bh-fab-size) + 12px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--bh-fab-gap) + (var(--bh-fab-size) - 48px) / 2 + env(safe-area-inset-bottom, 0px));
  z-index: 34;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  background: var(--bh-accent-fill, var(--accent));
  color: var(--accent-on);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-dk) 35%, transparent);
  transition: transform .16s var(--bh-spring), background .12s, color .12s;
  animation: bh-slot-in .22s var(--bh-spring) both;
}
.bh-bottom-slot i { font-size: 20px; }
.bh-bottom-slot:active:not(:disabled) { transform: scale(.96); }
.bh-bottom-slot[hidden] { display: none !important; }

@keyframes bh-slot-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. Formularliste ───────────────────────────────────────────────
   Eine Karte aus Zeilen: Beschriftung links, Control rechts oder
   (.bh-row--stack) darunter. .bh-reveal klappt eine Zeile weich auf und zu
   — für Zeilen, die nur manchmal gelten (Pflock bei Mehrpflock-Parcours). */
.bh-list {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 16px;
  overflow: hidden;
}
.bh-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 14px;
}
.bh-row + .bh-row,
.bh-reveal + .bh-row,
.bh-row + .bh-reveal > .bh-reveal__in > .bh-row { border-top: 1px solid var(--border, #e2e6ea); }
.bh-row__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1a2230);
}
.bh-row__label i { font-size: 20px; color: var(--bh-accent-ink); flex-shrink: 0; }
.bh-row__label small { display: block; font-size: 12.5px; font-weight: 400; color: var(--label, #546e7a); }
.bh-row--stack { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 12px; }
.bh-row--stack .bh-select { width: 100%; max-width: none; }

.bh-reveal {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s var(--bh-ease-out);
}
.bh-reveal[data-open="false"] { grid-template-rows: 0fr; }
.bh-reveal__in { overflow: hidden; min-height: 0; }

/* ── 6. Dropdown ────────────────────────────────────────────────────
   .bh-select ist das native <select> (Fallback ohne Skript). Das Skript
   versteckt es und legt einen Auslöser darüber, der dieselbe Klasse erbt
   plus .bh-dd. Die Liste hängt am App-Container (position: fixed), damit
   kein overflow: hidden sie abschneidet. */
.bh-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 66%;
  min-height: 44px;
  padding: 10px 38px 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--bh-field-border);
  background: var(--bh-field);
  color: var(--text, #1a2230);
  font: inherit;
  font-size: 16px;                 /* 16 px: iOS zoomt beim Fokus nicht */
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.bh-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

.bh-dd {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding-right: 12px;
  touch-action: manipulation;      /* kein Warten auf Doppeltipp-Zoom */
  -webkit-tap-highlight-color: transparent;
}
.bh-dd__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-dd__chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--bh-accent-ink);
  -webkit-mask: var(--bh-chev) center / 16px no-repeat;
          mask: var(--bh-chev) center / 16px no-repeat;
  transition: transform .25s var(--bh-spring);
}
.bh-dd.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.bh-dd.is-open .bh-dd__chev { transform: rotate(180deg); }
.bh-dd.is-changed { animation: bh-pulse .45s ease-out; }
@keyframes bh-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to   { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Unsichtbarer Fänger hinter der offenen Liste: schließt nur auf echten
   Tipp und verschluckt ihn (s. Touch-Regeln in bowhuman-dropdown.js).
   z-index über Logo-Button (35), Bottom-Slot (34), Sheets (40/41) und der
   sticky App-Leiste (100) — sonst löst ein Tipp auf „Zurück“ trotz offener
   Liste aus (Playwright-Befund 28.09.2026). Unter Toasts (200) und Pie (999+). */
.bh-dd__scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.bh-dd__list {
  position: fixed;
  z-index: 151;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--bh-field-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px -8px rgba(13, 17, 23, .35), 0 2px 6px rgba(13, 17, 23, .12);
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top center;
  transition: opacity .16s ease, transform .22s var(--bh-spring);
}
.bh-dd__list--up { transform: translateY(6px) scale(.97); transform-origin: bottom center; }
/* Beim Ausblenden (160–180 ms) nicht mehr antippbar */
.bh-dd__list:not(.is-open) { pointer-events: none; }
.bh-dd__list.is-open { opacity: 1; transform: none; }
.bh-dd__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text, #1a2230);
  font-size: 16px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.bh-dd__opt.is-active,
.bh-dd__opt:active { background: var(--bh-field); }
.bh-dd__opt[aria-selected="true"] { color: var(--bh-accent-ink); }
.bh-dd__opt[aria-disabled="true"] { opacity: .45; cursor: default; }
/* Zwischenüberschrift aus <optgroup label> — nicht wählbar */
.bh-dd__group {
  padding: 12px 12px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label, #546e7a);
  pointer-events: none;
}
.bh-dd__group:first-child { padding-top: 4px; }
.bh-dd__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-dd__sub { font-size: 13px; font-weight: 400; color: var(--label, #546e7a); }
.bh-dd__check { width: 18px; height: 18px; flex-shrink: 0; }
.bh-dd__opt[aria-selected="true"] .bh-dd__check {
  background: var(--bh-accent-ink);
  -webkit-mask: var(--bh-check) center / 18px no-repeat;
          mask: var(--bh-check) center / 18px no-repeat;
}

/* ── 7. Segmente ────────────────────────────────────────────────────
   Radiogruppe aus nativen Radios (Tastatur und Screenreader gratis).
   Der Knopf (::before) gleitet zur gewählten Stelle; --n = Anzahl.
   Gewählt: --accent-on auf dem Markenton. */
.bh-seg {
  --n: 2;
  --idx: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  padding: 4px;
  border-radius: 14px;
  background: var(--bh-field);
  min-height: 48px;
}
.bh-seg::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n));
  border-radius: 10px;
  background: var(--bh-accent-fill, var(--accent));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-dk) 35%, transparent);
  transform: translateX(calc(var(--idx) * 100%));
  transition: transform .32s var(--bh-spring), opacity .18s ease-out;
}
/* Noch nichts gewählt (Pflichtfeld „Klasse“ beim neuen Schützen): kein Knopf —
   sonst sähe die erste Option ausgewählt aus, obwohl nichts gewählt ist. */
.bh-seg:not(:has(> input:checked))::before { opacity: 0; }
.bh-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.bh-seg label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--text, #1a2230);
  cursor: pointer;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.bh-seg input:checked + label { color: var(--accent-on); }
.bh-seg input:focus-visible + label { outline: 3px solid var(--bh-accent-hi); outline-offset: 1px; }
.bh-seg:has(> input:nth-of-type(2):checked) { --idx: 1; }
.bh-seg:has(> input:nth-of-type(3):checked) { --idx: 2; }
.bh-seg:has(> input:nth-of-type(4):checked) { --idx: 3; }
.bh-seg:has(> input:nth-of-type(5):checked) { --idx: 4; }   /* Tucks Morgen-Check: 1–5 */
/* Zweizeilige Segmente (z. B. Klasse + Altersband) */
.bh-seg--sub label { flex-direction: column; gap: 1px; }
.bh-seg label small { font-size: 11.5px; font-weight: 400; opacity: .8; }
/* Pflichtauswahl fehlt: kurzes Schütteln mit Magenta-Rand (Skript setzt .is-missing) */
.bh-seg.is-missing { box-shadow: 0 0 0 2px var(--magenta, #E91E8C); animation: bh-shake .32s ease-out; }
@keyframes bh-shake {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* ── 8. Aktionsmenü ─────────────────────────────────────────────────
   Gleiche Karte wie die Dropdown-Liste, rechtsbündig unter dem „⋯“.
   Scrim teilt es sich mit dem Dropdown (.bh-dd__scrim, z 150). */
.bh-menu {
  position: fixed;
  z-index: 151;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--bh-field-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px -8px rgba(13, 17, 23, .35), 0 2px 6px rgba(13, 17, 23, .12);
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  transition: opacity .16s ease, transform .22s var(--bh-spring);
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
.bh-menu[hidden] { display: none; }
.bh-menu:not(.is-open) { pointer-events: none; }
.bh-menu.is-open { opacity: 1; transform: none; }
.bh-menu:focus { outline: none; }
.bh-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text, #1a2230);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bh-menu__item[hidden] { display: none; }
.bh-menu__item i { font-size: 20px; color: var(--bh-accent-ink); flex-shrink: 0; }
.bh-menu__item:active,
.bh-menu__item:focus-visible { background: var(--bh-field); outline: none; }
@media (hover: hover) { .bh-menu__item:hover { background: var(--bh-field); } }
.bh-menu__sep { height: 1px; margin: 4px 6px; background: var(--bh-field-border); }
/* Zerstörende Einträge (Löschen) — rot wie .bh-row--danger */
.bh-menu__item--danger,
.bh-menu__item--danger i { color: var(--bh-danger-ink); }

/* ── 9. Schalter ────────────────────────────────────────────────────
   <input type="checkbox" role="switch" class="bh-switch" aria-labelledby="…">
   Die Checkbox selbst ist der Schalter (appearance: none) — keine
   Label-Hülle, kein verstecktes Input. Screenreader sagen „Schalter, an“.
   Tippfläche 48 × 44 px; sichtbar 48 × 28 wie iOS/Android.
   Einziger Schalter im System — der Vorgänger .hw-toggle ist am
   08.10.2026 aus beiden pwa.css entfernt worden. */
.bh-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  margin: 8px 0;
  border-radius: 14px;
  background: #7f8b98;   /* aus: 3,47:1 auf Weiß — WCAG 1.4.11 (Neinhorn 29.09.2026) */
  cursor: pointer;
  transition: background .2s var(--bh-ease-out);
  -webkit-tap-highlight-color: transparent;
}
html.dark .bh-switch:not(:checked) { background: rgba(120, 130, 145, .32); }   /* weißer Knopf 11:1 trägt den Zustand */
.bh-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  transition: transform .25s var(--bh-spring);
}
.bh-switch:checked { background: var(--bh-accent-fill, var(--bh-accent-ink)); }
.bh-switch:checked::after { transform: translateX(20px); }
.bh-switch:active::after { width: 26px; }                       /* Daumen „drückt“ */
.bh-switch:checked:active::after { transform: translateX(16px); }
.bh-switch:focus-visible { outline: 2px solid var(--bh-accent-ink); outline-offset: 3px; }
.bh-switch:disabled { opacity: .45; cursor: default; }
html.dark .bh-switch:checked::after { background: var(--accent-on); }    /* auf der hellen Stufe */

/* ── 10. Zeilen-Varianten für Einstellungslisten ─────────────────────
   Gruppenüberschrift über einer .bh-list; Zeile als Knopf oder Link
   (.bh-row--tap, Pfeil rechts), Wert rechts (.bh-row__value), rote
   Zeile für Unumkehrbares (.bh-row--danger). */
.bh-group-title {
  margin: 22px 16px 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label, #546e7a);
}
.bh-group-title:first-child { margin-top: 4px; }
.bh-row--tap {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.bh-row--tap::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--label, #546e7a);
  -webkit-mask: var(--bh-chev) center / contain no-repeat;
          mask: var(--bh-chev) center / contain no-repeat;
  transform: rotate(-90deg);
}
.bh-row--tap[target="_blank"]::after { transform: none; -webkit-mask-image: var(--bh-ext); mask-image: var(--bh-ext); }
.bh-row--tap:active,
.bh-row--tap:focus-visible { background: var(--bh-field); outline: none; }
.bh-row--tap:disabled { opacity: .5; cursor: default; }
.bh-row__value {
  flex-shrink: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--label, #546e7a);
}
.bh-row--danger .bh-row__label,
.bh-row--danger .bh-row__label i { color: var(--bh-danger-ink); }
.bh-row--danger::after { display: none; }
.bh-row__img { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.bh-list + .bh-note,
.bh-note { margin: 8px 16px 0; font-size: 13px; line-height: 1.45; color: var(--label, #546e7a); }

@media (prefers-reduced-motion: reduce) {
  .bh-menu, .bh-switch, .bh-switch::after, .bh-row--tap,
  .bh-reveal, .bh-dd__chev, .bh-dd__list, .bh-seg::before,
  .bh-fab, .bh-scrim, .bh-bottom-slot, .bh-row-action,
  .bh-dir svg, .bh-alpha__handle circle, .bh-alpha__bar,
  .pie-menu--arc .pie-bg, .pie-menu--arc .pie-item,
  .bh-rise, .bh-stagger-in, .bh-bar-grow, .bh-seg--pop label,
  .bh-app .bottom-sheet, .bh-app .sheet-backdrop {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .bh-dd.is-changed, .bh-seg.is-missing { animation: none; }
}

/* ── 11. Bereichsauswahl ────────────────────────────────────────────
   Histogramm mit zwei Griffen, Muster aus dem Design-System (.alpha-slider,
   dort auf .bh-app gescopt). Spur-Zone 44 px hoch = Touch-Ziel; nur dort
   touch-action: none, daneben scrollt die Seite. Beschriftungen darunter. */
.bh-alpha {
  position: relative;
  min-width: 0;
  padding-bottom: 18px;
  user-select: none;
  -webkit-user-select: none;
}
.bh-alpha__track { display: block; overflow: visible; touch-action: none; cursor: pointer; }
.bh-alpha__bg    { fill: var(--bh-field); stroke: var(--bh-field-border); stroke-width: 1; }
.bh-alpha__bar   { fill: var(--bh-accent-fill, var(--accent)); transition: opacity var(--bh-dur-1); }
.bh-alpha__bar.is-out { opacity: .22; }
.bh-alpha__sel   { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: color-mix(in srgb, var(--accent-dk) 60%, transparent); stroke-width: 1.5; }
.bh-alpha__handle { outline: none; }
.bh-alpha__handle circle {
  fill: var(--surface, #fff);
  stroke: var(--bh-accent-ink);
  stroke-width: 2.5;
  transition: r var(--bh-dur-1) var(--bh-ease-out);
}
.bh-alpha__track.is-active .bh-alpha__handle circle { r: 12px; }
.bh-alpha__handle:focus-visible circle { stroke-width: 3.5; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
.bh-alpha__label {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--bh-accent-ink);
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
html.dark .bh-alpha__sel { fill: color-mix(in srgb, var(--bh-accent-hi) 14%, transparent); stroke: color-mix(in srgb, var(--bh-accent-hi) 55%, transparent); }
html.dark .bh-alpha__handle circle { fill: #141b27; }

/* ── 12. Sortierleiste ──────────────────────────────────────────────
   Kategorie (.bh-select) · Bereich (.bh-alpha) · Richtung (.bh-dir).
   Ab 400 px eine Zeile, darunter rutscht der Bereich in eine eigene,
   damit die Griffe nicht auf 150 px zusammengedrückt werden. */
.bh-sortbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cat range dir";
  align-items: start;
  gap: 10px;
}
.bh-sortbar > .bh-select,
.bh-sortbar > .bh-dd   { grid-area: cat; max-width: none; }
.bh-sortbar > .bh-alpha,
.bh-sortbar__range     { grid-area: range; min-width: 0; }
.bh-sortbar > .bh-dir  { grid-area: dir; }
@media (max-width: 399px) {
  .bh-sortbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cat dir" "range range";
  }
}
.bh-dir {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--bh-field-border);
  border-radius: 12px;
  background: var(--bh-field);
  color: var(--bh-accent-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bh-dir svg { width: 20px; height: 20px; transition: transform var(--bh-dur-2) var(--bh-spring); }
.bh-dir[data-dir="asc"] svg { transform: rotate(180deg); }
.bh-dir:active { transform: scale(.94); }
.bh-dir:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ── 13. Hinweis-Toast ─────────────────────────────────────────────
   core/toast.js. Aus robin/css/pwa.css hierher (30.09.2026), vorher
   .archers-toast. Nicht .bh-toast: den Namen trägt der Desktop-Toast in
   bowhuman-app.css (03-organisms). Neutral grau; Erfolg und Fehler als volle Fläche
   (Review Peter, 29.09.2026: der graue Toast ging unter) — beide Töne
   mit Weiß ≥ 5:1, in Hell und Dunkel gleich. */
.bh-snack {
  position: fixed;
  /* 96px statt 72px: der Logo-FAB (--bh-fab-size 60px + --bh-fab-gap 20px)
     reicht bis 80px — der Toast soll ihn nicht überdecken (UX-Eval
     2026-10-06, W·3) */
  bottom: calc(96px + var(--safe-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  background: var(--surface, #1e2228);
  color: var(--text, #eee);
  border: 1px solid var(--border, #444);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  /* Kurze Meldungen einzeilig wie bisher, lange brechen um statt mit „…“
     abgeschnitten zu werden (LittleJohns Fehlertexte, 30.09.2026).
     width: max-content, sonst bricht es wegen left: 50% schon bei 50vw. */
  width: max-content;
  max-width: 90vw;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 200;
}
.bh-snack--visible { opacity: 1; }
.bh-snack--ok,
.bh-snack--err { color: #fff; border-color: transparent; font-weight: 600; }
.bh-snack--ok  { background: #2e7d32; }   /* 5,13:1 */
.bh-snack--err { background: #c62828; }   /* 5,62:1 */

/* ── 14. Bestätigungsdialog ────────────────────────────────────────
   core/confirm-dialog.js — Ersatz für window.confirm(). Nutzt die
   Bottom-Sheet-Optik der App (.bottom-sheet, .sheet-* in der pwa.css der
   App), liegt aber über allen anderen Sheets und dem Logo-Button. Unten
   dockt es wie .bottom-sheet direkt am Rand an; die Safe Area steckt im
   Padding. Aus robin/css/pwa.css hierher (30.09.2026).
   Diese Datei lädt VOR der pwa.css der App — jede Regel hier braucht
   deshalb zwei Klassen, sonst gewinnt die gleich starke App-Regel
   (.bottom-sheet, .sheet-actions). */
.bottom-sheet.confirm-dialog-sheet {
  z-index: 70; /* über Sheets (40) und Logo-Button — Bestätigen ist eine blockierende Aktion */
  /* LittleJohn hebt .bottom-sheet über seine Bottom Nav; der Dialog liegt
     darüber und dockt immer am Rand an */
  bottom: 0;
  padding-bottom: var(--safe-bottom, 0px);
  max-height: 90dvh;
}
.confirm-dialog__title {
  margin-bottom: 10px;
}
.confirm-dialog__msg {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: pre-line; /* \n\n in den i18n-Strings bleibt als Absatz erhalten */
}
.sheet-actions.confirm-dialog__actions {
  flex-direction: row; /* Abbrechen | Bestätigen nebeneinander statt gestapelt */
}
.confirm-dialog__actions .btn { flex: 1; }


/* ── 15. Aktionsleiste unter einer Zeile ─────────────────────────────
   Für Listen, in denen jeder Eintrag mehr als ein Ziel hat (LittleJohns
   Parcours-Hub: Bearbeiten · Wartung). Die Zeile darüber ist dann reine
   Information, kein .bh-row--tap; die Knöpfe teilen sich die Breite.
   Jeder Eintrag ist eine eigene .bh-list. Zwei, höchstens drei Knöpfe —
   mehr gehört in ein Aktionsmenü (.bh-menu). */
.bh-row-actions {
  display: flex;
  border-top: 1px solid var(--border, #e2e6ea);
}
.bh-row-action {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bh-accent-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.bh-row-action + .bh-row-action { border-left: 1px solid var(--border, #e2e6ea); }
.bh-row-action i { font-size: 18px; flex-shrink: 0; }
.bh-row-action:active,
.bh-row-action:focus-visible { background: var(--bh-field); outline: none; }
.bh-row-action:disabled { color: var(--label, #546e7a); opacity: .5; cursor: default; background: none; }
/* Wie :disabled, aber weiter antippbar: der Klick erklärt per Toast, warum
   die Aktion gerade nicht geht (UX-Eval 2026-10-06, B·5/B·8). */
.bh-row-action--off { color: var(--label, #546e7a); opacity: .5; }
.bh-row-action--off:active,
.bh-row-action--off:focus-visible { background: none; }

/* ── 16. Zahlenfelder ───────────────────────────────────────────────
   Das Design-System kennt keine Stepper: der native Number-Spinner ist
   auf Touch zu klein und bricht die Feldoptik (Walkthrough R-03,
   2026-10-11). Galt vorher nur punktuell (.dist-input in Robin und
   LittleJohn, .flock-dist-input) — jetzt für jedes Zahlenfeld der
   Mobil-Apps. Die Tastaturwahl regelt inputmode am Element. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── 17. Sheet-Basis ────────────────────────────────────────────────
   Wortgleich aus robin/css/pwa.css (Angleich-Mobil E49, 21.10.2026), damit
   Tuck die Bestätigungs-Sheets aus Abschnitt 14 ohne eigene Kopie hat.
   Robin und LittleJohn behalten ihre Kopie in der pwa.css: die lädt NACH
   dieser Datei und gewinnt bei gleicher Spezifität — dort ändert sich nichts.
   Zusätze für Tuck stehen in Abschnitt 19. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 40;
  animation: fade-in var(--bh-dur-2) var(--bh-ease-out);
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  padding-bottom: var(--safe-bottom);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  z-index: 50;
  transition: transform var(--bh-dur-3) var(--bh-ease-out);
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
}
.bottom-sheet.sheet--open { transform: translateX(-50%) translateY(0); }

.sheet-handle {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 12px auto 0;
}
.sheet-content { padding: 16px 20px 32px; }

.sheet-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 20px;
}

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 18. Bewegung ───────────────────────────────────────────────────
   Angleich-Mobil E52 (21.10.2026). Bewegung bestätigt, was der Schütze
   getan hat — sie kündigt nichts an und lockt nicht. Dauern aus den
   --bh-dur-*-Tokens (oben), bei „Bewegung reduzieren“ alles aus
   (Block nach Abschnitt 10). Klassen zum Anstecken:
     .bh-rise        Inhalt steigt beim Erscheinen leicht auf
     .bh-stagger-in  Reihe nacheinander, --i = Platz in der Reihe (30 ms)
     .bh-bar-grow    Balken wächst von links auf seinen Wert
     .bh-seg--pop    an .bh-seg: das gewählte Segment federt kurz
   Kein View-Transitions-API (E51) — Screenwechsel blendet die App selbst. */
@keyframes bh-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes bh-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes bh-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bh-stagger-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
.bh-rise { animation: bh-rise var(--bh-dur-2) var(--bh-ease-out) both; }
.bh-stagger-in {
  animation: bh-stagger-in var(--bh-dur-2) var(--bh-spring) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.bh-bar-grow {
  transform-origin: left center;
  transform-box: fill-box;   /* auch für SVG-Rechtecke */
  animation: bh-bar-grow calc(var(--bh-dur-3) * 2) var(--bh-ease-out) both;
}
.bh-seg--pop input:checked + label { animation: bh-pop var(--bh-dur-2) var(--bh-spring); }

/* ── 19. Mischform mit bowhuman-app.css ─────────────────────────────
   Nur Tuck lädt beide Dateien (E40). Alles hier ist auf .bh-app gescopt
   und erreicht Robin und LittleJohn deshalb nie.

   Token-Brücke: die Komponenten oben lesen die Namen der Mobil-Apps
   (--surface, --text, --label, --safe-bottom); in bowhuman-app.css heißen
   sie anders. Nur am Produkt-Wurzelelement — der Trainer in Tuck hat kein
   data-product und behält sein Desktop-Bild (E56). */
html.bh-app[data-product] {
  --surface:            var(--panel-bg, var(--white));
  --text:               var(--text-primary);
  --label:              var(--text-muted);
  --safe-bottom:        env(safe-area-inset-bottom, 0px);
  --color-text-primary: var(--text-primary);
}
/* Bogen-Menü über den App-Ebenen: bowhuman-app.css legt .pie-menu auf
   --z-max (9999) — über Scrim (999) und Logo-Button (1001). Die Regel stand
   bis 21.10. im <style> der Styleguide-Vorschau (E55). */
.bh-app .pie-menu--arc { z-index: 1000; }
/* Hover/Fokus aus bowhuman-app.css (!important) färben jedes .pie-item mit
   --accent — im Tuck-Dunkel die Tinte #F05FAA, darauf trägt Weiß nicht.
   Im Bogen gilt die Fläche. */
.bh-app .pie-menu--arc .pie-item:is(:hover, :focus-visible) {
  background: var(--bh-accent-fill, var(--accent)) !important;
  color: var(--accent-on) !important;
}
/* .bh-list ist in beiden Dateien belegt: hier die Formularkarte aus
   .bh-row, in bowhuman-app.css die Zeilenliste aus .bh-list-item. Die
   Kartenoptik gilt nur, wenn wirklich Formularzeilen darin stehen. */
.bh-app .bh-list:not(:has(> .bh-row, > .bh-reveal)) {
  background: none;
  border: 0;
  border-radius: 0;
}
/* Bestätigung und Snack liegen in Tuck auch über einem offenen Formular
   (.modal-wrap, --z-modal 300). */
.bh-app .sheet-backdrop.confirm-dialog-backdrop { z-index: calc(var(--z-modal, 300) + 10); }
.bh-app .bottom-sheet.confirm-dialog-sheet      { z-index: calc(var(--z-modal, 300) + 20); }
.bh-app .bh-snack                               { z-index: calc(var(--z-modal, 300) + 30); }
/* Knöpfe im Sheet: Touch-Ziel 44 px (bowhuman-app.css .btn ist kleiner) */
.bh-app .confirm-dialog__actions .btn { min-height: 44px; justify-content: center; }

/* ── 20. Datumsfeld und Kalenderblatt ───────────────────────────────
   Mobiles Gegenstück zu .bh-date (Desktop, bowhuman-components.css): ein
   antippbares Feld, das ein Blatt mit Monatskalender öffnet. Kein Tippen,
   keine Auswahlliste, kein Systemfenster — die Dropdown-Variante des
   Desktop-Controls scheiterte im Dialog (Peter, 25.10.2026, zweimal
   gemeldet). Das Feld trägt zusätzlich .f-input (Rahmen, Höhe, Fokus).
   Markup und Verhalten: Dokumentation/design-system/02-molecules.md,
   Skript tuck/js/tuck-date.js. */
.bh-app .bh-mdate {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; text-align: left; cursor: pointer; font: inherit;
}
.bh-mdate.is-error { border-color: var(--err, #c0392b); }
.bh-mdate:focus-visible,
.bh-mcal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bh-mdate__ico { display: inline-flex; color: var(--accent); }
.bh-mdate__txt { flex: 1; min-width: 0; }
.bh-mdate__txt.is-empty { color: var(--label, var(--text-muted)); }
.bh-mcal { display: flex; flex-direction: column; gap: 8px; }
.bh-mcal__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bh-mcal__title { flex: 1; font-weight: 800; font-size: 1rem; text-align: center; }
.bh-mcal__title--year { font-weight: 600; color: var(--label, var(--text-secondary)); }
.bh-mcal__wd, .bh-mcal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center;
}
.bh-mcal__wd { margin-top: 4px; font-size: .75rem; font-weight: 700; color: var(--label, var(--text-muted)); }
.bh-mcal__day {
  min-height: 44px; border: 1.5px solid transparent; border-radius: var(--r-md, 10px);
  background: none; color: var(--text, var(--text-primary)); font: inherit; font-weight: 600; cursor: pointer;
}
.bh-mcal__day.is-today { border-color: var(--accent); }
.bh-mcal__day.is-sel { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.bh-mcal__day:active { transform: scale(.94); }