/* DrinkWatch – touch-first, kiosk-tauglich */
:root {
  --bg: #f4f1ec;
  --surface: #ffffff;
  --surface-2: #f8f6f2;
  --text: #1f2328;
  --muted: #6b6f76;
  --border: #e3ded6;
  --primary: #1f5f99;
  --primary-text: #ffffff;
  --accent: #d9822b;
  --accent-text: #ffffff;
  --danger: #c0392b;
  --pos: #2e7d32;
  --neg: #c0392b;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --radius: 14px;
  --tap: 52px;
  --badge-open-bg: #fdecc8; --badge-open-fg: #7a4b00;
  --badge-paid-bg: #d7f0d9; --badge-paid-fg: #1d5e22;
  --badge-void-bg: #eeeeee; --badge-void-fg: #777777;
  --admin: #b38600;
  --raised: #f8f6f2; --raised-2: #efebe4; --field: #ffffff;   /* Artikelpflege: Karte, Bildgruppe, Felder */
  color-scheme: light;
  font-size: 17px;
}
/* Dunkel: automatisch nach Systemeinstellung – außer der Nutzer hat „hell“ gewählt – oder explizit gewählt.
   Die beiden Blöcke müssen identisch bleiben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a; --surface: #1f2226; --surface-2: #272b30; --text: #eceef0; --muted: #9aa0a6;
    --border: #33383e; --primary: #4a90d9; --accent: #e49a4c; --accent-text: #1b1b1b;
    --pos: #66bb6a; --neg: #ef6b5e; --shadow: 0 1px 2px rgba(0,0,0,.4);
    --badge-open-bg: #4a3a16; --badge-open-fg: #f5cf7a;
    --badge-paid-bg: #1f3d22; --badge-paid-fg: #8fd694;
    --badge-void-bg: #2c2f33; --badge-void-fg: #8a8f95;
    --admin: #f5c518;
    --raised: #272b30; --raised-2: #2f343a; --field: #383d44;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171a; --surface: #1f2226; --surface-2: #272b30; --text: #eceef0; --muted: #9aa0a6;
  --border: #33383e; --primary: #4a90d9; --accent: #e49a4c; --accent-text: #1b1b1b;
  --pos: #66bb6a; --neg: #ef6b5e; --shadow: 0 1px 2px rgba(0,0,0,.4);
  --badge-open-bg: #4a3a16; --badge-open-fg: #f5cf7a;
  --badge-paid-bg: #1f3d22; --badge-paid-fg: #8fd694;
  --badge-void-bg: #2c2f33; --badge-void-fg: #8a8f95;
  --admin: #f5c518;
  --raised: #272b30; --raised-2: #2f343a; --field: #383d44;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}
a { color: var(--primary); }
h1, h2 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.15rem; }
code { background: var(--surface-2); padding: 0 .3em; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.hint { color: var(--muted); font-size: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.neg { color: var(--neg); }
.pos { color: var(--pos); }

.container { max-width: 1200px; margin: 0 auto; padding: 1rem 16px 7rem; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 1rem 16px; }

/* ---------- Buttons & Formulare ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.1rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  user-select: none; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-ghost { color: var(--danger); background: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--primary); }
.btn-light { background: #fff; color: #1f2328; border-color: #fff; }
.btn-small { min-height: 36px; padding: .3rem .7rem; font-size: .9rem; }
.btn-xl { min-height: var(--tap); font-size: 1.15rem; }
.btn-block { width: 100%; }
.btn-icon { min-width: 44px; padding: .4rem; }
.icon { display: inline-block; vertical-align: -0.2em; flex: none; }

/* Hell/Dunkel-Umschalter: zeigt das Symbol des Modus, zu dem gewechselt wird */
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline-block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-float { position: fixed; top: 12px; right: 16px; z-index: 11; }

input, select {
  font: inherit; color: var(--text); background-color: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .55rem .7rem; min-height: 44px; width: 100%;
}
/* Auswahllisten ohne Systemdarstellung: Safari/iPad ignoriert sonst Höhe und Innenabstand, die Liste wird
   flacher als die Textfelder daneben. Eigener Pfeil als SVG, mittleres Grau passt zu hell und dunkel.
   Wichtig: Hintergründe von select nur mit background-color setzen, „background:“ würde den Pfeil löschen. */
select {
  -webkit-appearance: none; appearance: none; line-height: 1.4; padding-right: 2.2rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9299' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .7rem center; background-size: 16px 16px; background-repeat: no-repeat;
}
input { line-height: 1.4; }
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
label { display: block; font-weight: 600; font-size: .95rem; }
label > input, label > select { display: block; margin-top: .25rem; font-weight: 400; }
.check { display: flex; align-items: center; gap: .6rem; font-weight: 400; cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; }   /* nicht neben langem Text schrumpfen */
.form { display: grid; gap: .9rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-form input, .inline-form select { width: auto; }
.inline-form label { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.input-money { max-width: 8rem; text-align: right; }
.input-sort { max-width: 6rem; }

/* ---------- Meldungen ---------- */
.flashes { max-width: 1200px; margin: .75rem auto 0; padding: 0 16px; display: grid; gap: .5rem; }
.page-login .flashes { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding-right: 72px; }
.flash { padding: .75rem 1rem; border-radius: 10px; background: var(--surface); border-left: 5px solid var(--primary); box-shadow: var(--shadow); }
.flash-success { border-left-color: var(--pos); }
.flash-error { border-left-color: var(--danger); }
.flash-info { border-left-color: var(--accent); }

/* ---------- Login ---------- */
.login-card {
  width: 100%; max-width: 420px; background: var(--surface); border-radius: 20px;
  padding: 1.75rem; box-shadow: var(--shadow); display: grid; gap: 1rem;
}
.brand { display: flex; gap: .9rem; align-items: center; }
.brand h1 { margin: 0; }
.brand p { margin: 0; }
.brand-mark { font-size: 2.6rem; }
/* Registrierung: Abschnitte je nach Zustand (data-mode) ein-/ausblenden */
#register-form[data-mode="search"] [data-show]:not([data-show~="search"]),
#register-form[data-mode="selected"] [data-show]:not([data-show~="selected"]),
#register-form[data-mode="free"] [data-show]:not([data-show~="free"]) { display: none !important; }
.login-card .intro { margin: 0; }
.search-label { margin-bottom: 1.1rem; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.search-results { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.search-hit { justify-content: flex-start; min-height: 52px; font-size: 1.05rem; }
.selected-member { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .8rem 1rem;
  border-radius: 12px; background: var(--surface-2); }
.selected-member strong { font-size: 1.15rem; }
.selected-member .btn { margin-left: auto; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h2 { display: inline; }
details.panel > summary::before { content: "▸ "; color: var(--muted); }
details.panel[open] > summary::before { content: "▾ "; }
details.panel[open] > summary { margin-bottom: .75rem; }
/* Admin-Frontend: Karten wie bei Mitgliedern, Klick öffnet den Editor */
.segmented { display: inline-flex; gap: .2rem; padding: .2rem; margin-bottom: 1rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); }
.segmented a { padding: .45rem 1rem; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; }
.segmented a.active { background: var(--surface-2); color: var(--primary); }
.item-card.inactive { opacity: .55; }
.card-flag { position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; background: var(--badge-void-bg); color: var(--badge-void-fg); }
.item-card-new { border-style: dashed; box-shadow: none; background: transparent; }
.item-card-new .thumb { background: transparent; }
.item-card-new .thumb-icon { color: var(--muted); font-size: 2.6rem; }
/* .dialog.dialog-wide: höhere Gewichtung als die spätere Regel .dialog (480px), die sonst gewinnt */
.dialog.dialog-wide { width: min(980px, calc(100% - 32px)); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.dialog-head h2 { margin: 0; }
.dialog .item-form { display: grid; gap: .7rem; }

/* Doku (gerenderte README.md) */
.doc { max-width: 980px; margin-left: auto; margin-right: auto; padding: 1.25rem 1.5rem; line-height: 1.55; }
.doc h1 { font-size: 1.9rem; margin: 0 0 .75rem; }
.doc h2 { font-size: 1.45rem; margin: 2.2rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
.doc h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.doc h4 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.doc :is(h1, h2, h3, h4) { scroll-margin-top: 90px; }
.doc p, .doc ul, .doc ol { margin: .6rem 0; }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li { margin: .2rem 0; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.doc code { font-size: .88em; }
.doc pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem;
  overflow-x: auto; font-size: .85rem; line-height: 1.45; }
.doc pre code { background: none; padding: 0; }
.doc .mermaid-src { border-style: dashed; }
.doc blockquote { margin: .8rem 0; padding: .2rem 1rem; border-left: 4px solid var(--border); color: var(--muted); }
.doc .table td, .doc .table th { white-space: normal; vertical-align: top; }
.doc .contains-task-list { list-style: none; padding-left: .2rem; }
.doc .task-list-item-checkbox { margin: 0 .5rem 0 0; vertical-align: -0.1em; }

/* Demo-Leitfaden */
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.demo-grid .panel { margin-bottom: 0; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 0; }
.checklist .check { padding: .5rem 0; min-height: 44px; align-items: flex-start; }
.checklist .check input { margin-top: .1rem; flex: none; }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
#pin-form { display: grid; gap: 1rem; }
.pin-input { font-size: 2rem; text-align: center; letter-spacing: .5em; min-height: 64px; }
/* Leeres Feld: kleine Schrift fürs ganze Feld, sonst sitzt der kleinere Platzhalter auf der Grundlinie
   der großen Schrift und wirkt nach unten verrutscht */
.pin-input:placeholder-shown { font-size: 1.1rem; letter-spacing: normal; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.key {
  min-height: 64px; font-size: 1.6rem; font-weight: 600; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  cursor: pointer; touch-action: manipulation; user-select: none;
}
.key:active { background: var(--border); }
.key-fn { color: var(--muted); }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .75rem 16px; background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.topbar-who { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.who-text { display: flex; flex-direction: column; min-width: 0; }
.topbar-who strong { font-size: 1.15rem; }
.brand-line { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; gap: .5rem; margin-left: auto; }
.balance { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.balance-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.balance-value { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.balance.neg .balance-value { color: var(--neg); }
.balance.pos .balance-value { color: var(--pos); }
.balance-value.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.12); } }

/* ---------- Kategorien ---------- */
.chips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 1rem; scrollbar-width: none; }
.chip {
  flex: 0 0 auto; min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- Artikel-Karten ---------- */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.item-card {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  box-shadow: var(--shadow); touch-action: manipulation; user-select: none;
  transition: transform .08s ease;
}
.item-card:active { transform: scale(.97); }
.item-card.booked { animation: booked .6s ease; }
@keyframes booked { 0% { box-shadow: 0 0 0 0 var(--pos); } 30% { box-shadow: 0 0 0 5px var(--pos); } 100% { box-shadow: var(--shadow); } }
.item-card.busy { opacity: .6; pointer-events: none; }
.item-card[hidden] { display: none; }
/* Inhalt absolut positioniert statt Grid-Zentrierung: WebKit < 17 (iPadOS 16, auch Chrome dort)
   behandelt die per aspect-ratio berechnete Höhe nicht als definit – Icons landeten sonst oben. */
.thumb {
  display: block; position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden;
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; line-height: 1;
}
.item-name { padding: .6rem .75rem 0; font-weight: 600; }
.item-price { padding: .15rem .75rem .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* ✎ hinter Freitext-Buchungen (Text und Betrag vom Mitglied eingegeben) */
.free-mark { margin-left: .35rem; color: var(--accent); font-weight: 700; cursor: help; }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.panel-head h2 { margin: 0; }
.panel-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
.panel-row .panel { margin-bottom: 0; }
.booking-list { list-style: none; margin: 0; padding: 0; }
.booking-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
#recent li { grid-template-columns: auto 1fr auto 44px; min-height: 52px; }
.undo-cell { display: flex; justify-content: flex-end; }
.btn-undo { color: var(--primary); border-color: var(--border); background: var(--surface-2); min-height: 40px; min-width: 40px; }
.booking-list li.removing { opacity: .4; text-decoration: line-through; }
.booking-list li:last-child { border-bottom: 0; }
.booking-list li span:first-child { color: var(--muted); }
.booking-list li.empty { display: block; }
.booking-list li.new { animation: fadein .5s ease; }
@keyframes fadein { from { background: var(--surface-2); } }

/* ---------- Rückgängig-Leiste ---------- */
.undo-bar {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .7rem .7rem 1.1rem; border-radius: 14px;
  background: #1f2328; color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.undo-bar[hidden] { display: none; }

/* ---------- Dialog ---------- */
.dialog { border: 0; border-radius: 20px; padding: 1.5rem; width: min(480px, calc(100% - 32px)); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(0,0,0,.5); }
.dialog form { display: grid; gap: .75rem; }
.dialog p { margin: 0; }
.big-amount { font-size: 1.4rem; }
.amount-input { font-size: 1.8rem; font-weight: 700; text-align: right; min-height: 60px; font-variant-numeric: tabular-nums; }
.keypad-compact .key { min-height: 52px; font-size: 1.4rem; }
.kiosk .keypad-compact .key { min-height: 56px; font-size: 1.5rem; }
.choice { display: grid; gap: .75rem; }
.btn-choice { flex-direction: column; min-height: 76px; font-size: 1.2rem; }
.btn-choice small { font-weight: 400; font-size: .85rem; opacity: .9; }

/* ---------- Admin ---------- */
.admin-title { color: var(--admin); }
.admin-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.admin-nav a { padding: .5rem .8rem; border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; }
.admin-nav a.active { background: var(--surface-2); color: var(--primary); }
.admin-nav .nav-icon { display: none; }
.admin-nav .nav-short { display: none; }

/* Schmale Bildschirme: Kopfzeile einzeilig, Menü als Tab-Leiste am unteren Rand */
@media (max-width: 760px) {
  .admin-bar { flex-wrap: nowrap; }
  .admin-bar .who-text { flex-direction: row; align-items: baseline; gap: .5rem; min-width: 0; }
  .admin-bar .who-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-bar .brand-logo { display: none; }   /* Handy: kein Logo */
  .admin-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  }
  .admin-nav a {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .35rem .15rem; font-size: .68rem; font-weight: 600; color: var(--muted);
    text-align: center; line-height: 1.15; min-width: 0;
  }
  .admin-nav a.active { background: transparent; color: var(--primary); }
  .admin-nav .nav-icon { display: block; }
  .admin-nav a > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-nav .nav-long, .admin-nav .nav-full { display: none; }
  .admin-nav .nav-short { display: inline; }
  .page-admin main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.panel .stat { background: var(--surface-2); box-shadow: none; }
.stat-label { font-size: .8rem; color: var(--muted); }
.stat-value { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.search { max-width: 260px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; white-space: nowrap; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Aktionszelle bleibt eine echte Tabellenzelle (kein display:flex – sonst verrutschen Rahmenlinien);
   die Formulare/Knöpfe darin stehen als Inline-Elemente rechtsbündig nebeneinander */
.table td.actions { text-align: right; white-space: normal; }
.table td.actions > * { display: inline-flex; vertical-align: middle; margin: .15rem 0 .15rem .4rem; }
.table td.actions > [hidden] { display: none; }   /* z. B. „−1“ bei nur einem Stück */
.table td.actions form { margin-top: .15rem; margin-bottom: .15rem; }
.table tr[hidden] { display: none; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--surface-2); }
.badge-offen { background: var(--badge-open-bg); color: var(--badge-open-fg); }
.badge-bezahlt { background: var(--badge-paid-bg); color: var(--badge-paid-fg); }
.badge-storniert { background: var(--badge-void-bg); color: var(--badge-void-fg); text-decoration: line-through; }
.badge-left { background: var(--badge-void-bg); color: var(--badge-void-fg); }
.table tr.row-left td { color: var(--muted); }
.show-left { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; white-space: nowrap; }

.item-admin-list { display: grid; gap: .75rem; }
.item-admin, .item-form-new { background: var(--raised); padding: .75rem; border: 1px solid var(--border); border-radius: 12px; }
.item-admin { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: start; }
.item-admin .thumb-small { background: var(--raised-2); }
.item-form input:not([type=checkbox]), .item-form select { background-color: var(--field); }
.item-admin.inactive .thumb-small, .item-admin.inactive .item-fields { opacity: .6; }
.thumb-small { width: 72px; border-radius: 10px; }
.thumb-small .thumb-icon { font-size: 2rem; }

/* Artikelformular – derselbe Editor steht in der Liste (viel Platz) und im Modal (wenig Platz).
   Deshalb richtet sich das Raster per Container Query nach der Breite des Formulars selbst,
   nicht nach dem Fenster. Drei Stufen: breit (eine Zeile) / mittel / schmal (gestapelt). */
.item-form { display: grid; gap: .7rem; min-width: 0; container: itemform / inline-size; }
.item-fields {
  display: grid; gap: .6rem; align-items: end;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 7rem 6rem auto;
  grid-template-areas: "name cat price sort active";
}
.item-fields .f-name { grid-area: name; }
.item-fields .f-category { grid-area: cat; }
.item-fields .f-price { grid-area: price; }
.item-fields .f-sort { grid-area: sort; }
.item-fields .f-active { grid-area: active; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: .2rem; }
.item-fields .f-active .check { min-height: 0; }
.item-fields .f-price[hidden] { display: none; }
.item-fields .input-money { max-width: none; }
.item-fields .category-new { margin-top: .4rem; }
.item-fields .category-new[hidden] { display: none; }
/* Auswahllisten/Dateifeld sind sonst mindestens so breit wie ihr längster Eintrag -> Überlauf */
.item-form select, .item-form input { min-width: 0; max-width: 100%; }

.item-bottom { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.image-group {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem;
  margin: 0; padding: .35rem .6rem .5rem; border: 1px solid var(--border); border-radius: 10px; min-width: 0;
  background: var(--raised-2);
}
.image-group legend { padding: 0 .3rem; font-weight: 600; font-size: .95rem; }
.image-group select, .image-group .file-pick { width: 100%; }
/* Eigenes Datei-Element (siehe _item_form.html) */
.file-pick {
  position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 44px;
  padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 10px; background: var(--field); cursor: pointer;
}
.file-pick:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.file-pick .file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn { flex: none; padding: .3rem .7rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.file-name.chosen { color: var(--text); }
.item-actions { display: flex; gap: .4rem; }

@container itemform (max-width: 700px) {
  .item-fields {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: "name name name cat cat cat" "price price sort sort active active";
  }
  .item-bottom { grid-template-columns: minmax(0, 1fr); }
  .item-actions { justify-content: flex-end; }
}
@container itemform (max-width: 440px) {
  .item-fields {
    grid-template-areas: "name name name name name name" "cat cat cat cat cat cat"
                         "price price price sort sort sort" "active active active active active active";
  }
  .image-group { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .image-group > .muted { font-size: .85rem; }
  .item-actions .btn { flex: 1; }
}

/* ---------- Kiosk: größere Touch-Ziele, keine Textauswahl ---------- */
.kiosk { --tap: 64px; font-size: 19px; user-select: none; -webkit-user-select: none; }
.kiosk input { user-select: text; -webkit-user-select: text; }
.kiosk .item-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.kiosk .btn { min-height: 52px; }
.kiosk .key { min-height: 76px; font-size: 1.9rem; }

@media (max-width: 640px) {
  :root { font-size: 16px; }
  .row-2 { grid-template-columns: 1fr; }
  .item-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .balance { margin-left: 0; align-items: flex-start; }
  .topbar-actions { margin-left: 0; width: 100%; }
  .topbar-actions .btn { flex: 1; }
  .topbar-actions .btn-icon { flex: 0 0 auto; }
  .topbar { gap: .5rem 1rem; }
  .item-admin { grid-template-columns: 1fr; }
  .thumb-small { display: none; }
}

/* Fest positionierte Rückmeldungen (z. B. nach Änderungen ohne Neuladen) */
.toasts { position: fixed; top: 84px; right: 16px; z-index: 40; display: grid; gap: .5rem;
  width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toasts .flash { pointer-events: auto; }
@keyframes rowchanged { from { background: var(--badge-paid-bg); } }
tr.row-changed td { animation: rowchanged 1.2s ease; }

/* Artikel-Modal auf dem Handy als Bottom Sheet: volle Breite, von unten, scrollt bei wenig Höhe */
@media (max-width: 560px) {
  .dialog.dialog-wide {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; overflow-y: auto;
    border-radius: 20px 20px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
}

/* Unterpunkte „Artikel“: Icon + Text; Downloads optisch abgesetzt */
.segmented-icons a { display: inline-flex; align-items: center; gap: .4rem; }
.segmented-icons .nav-icon { width: 18px; height: 18px; }
/* erster Download-Knopf: Trennlinie zu den Ansichten */
.segmented-icons a.segmented-download:not(.segmented-download + .segmented-download) { margin-left: .4rem; border-left: 1px solid var(--border); border-radius: 0 8px 8px 0; }
/* Schmal: kompakte Leiste mit Icon über kleinem Label – wie die Tab-Leiste unten */
@media (max-width: 560px) {
  .segmented-icons { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; padding: .25rem; }
  .segmented-icons a { flex-direction: column; gap: .15rem; padding: .35rem .1rem; font-size: .7rem; text-align: center; min-width: 0; }
  .segmented-icons a > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .segmented-icons .nav-icon { width: 22px; height: 22px; }
  .segmented-icons a.segmented-download:not(.segmented-download + .segmented-download) { margin-left: 0; border-left: 0; border-radius: 8px; }
}
.thumb-mini { width: 48px; border-radius: 6px; }
.thumb-mini .thumb-icon { font-size: 1.1rem; }
.table tr.row-inactive td { opacity: .55; }
.only-narrow { display: none; }
@media (max-width: 560px) {
  .table .col-wide { display: none; }
  .only-narrow { display: inline-block; }
  #items-table td, #items-table th { padding-left: .35rem; padding-right: .35rem; white-space: normal; }
  #items-table td.num { white-space: nowrap; }
  #items-table .thumb-mini { width: 40px; }
}
.badge.only-narrow { text-decoration: none; margin-top: .2rem; }

/* Mitglieder-Kopf. Desktop: Name | Saldo | Abrechnen | Werkzeuge in einer Zeile. */
.member-bar .balance { margin-left: auto; }
.member-bar .settle-btn .nav-icon { display: inline-block; width: 20px; height: 20px; }
.header-tools { display: flex; gap: .4rem; align-items: center; }
.admin-bar .header-tools { margin-left: auto; }
.header-tools .tool-label { font-size: .95rem; }
.header-tools .theme-toggle .tool-label, .header-tools .tool-status .tool-label { display: none; }   /* Desktop: nur Icon */
.header-tools .tool-status.active { color: var(--primary); }
.header-tools .tool-logout { gap: .4rem; }

/* Handy: Zeile 1 Name + kleine Icon-Werkzeuge (Icon über Label), Zeile 2 Saldo + Abrechnen */
@media (max-width: 640px) {
  .topbar.member-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem .75rem;
    grid-template-areas: "who tools" "balance settle";
  }
  .member-bar .topbar-who { grid-area: who; }
  .member-bar .topbar-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .member-bar .brand-logo { display: none; }  /* Handy: kein Logo */
  .member-bar .balance { grid-area: balance; margin-left: 0; align-items: flex-start; }
  .member-bar .settle-btn { grid-area: settle; min-height: 48px; padding: .5rem 1rem; }
  .member-bar .header-tools { grid-area: tools; }
  .header-tools { gap: .15rem; }
  .header-tools .tool {
    flex-direction: column; gap: .1rem; min-height: 0; min-width: 52px; padding: .3rem .35rem;
    border-color: transparent; background: transparent; color: var(--muted);
  }
  .header-tools .tool .icon { width: 22px; height: 22px; }
  .header-tools .tool-label, .header-tools .theme-toggle .tool-label, .header-tools .tool-status .tool-label { display: block; font-size: .68rem; font-weight: 600; }
}

/* Unauffälliger Link am Seitenende (z. B. „PIN ändern“) */
.page-foot { text-align: center; margin: 2rem 0 0; }
.link-btn { background: none; border: 0; padding: .5rem 1rem; min-height: 44px; font: inherit; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--primary); }

/* PIN-Felder: Textfeld + Maskierung statt type="password" – verhindert „Starkes Passwort“-Vorschläge
   und „Passwort sichern?“ von iOS/Browsern für eine rein numerische PIN */
.pin-mask { -webkit-text-security: disc; text-security: disc; }

/* Kiosk: PIN-Anzeige statt Eingabefeld (siehe _pin.html) */
.pin-display {
  display: flex; align-items: center; min-height: 44px; margin-top: .25rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font-weight: 400; letter-spacing: .35em; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.pin-display.empty::before { content: attr(data-placeholder); color: var(--muted); letter-spacing: normal; font-size: .95rem; }
.pin-display.active { outline: 2px solid var(--primary); outline-offset: 1px; }
.pin-display.pin-input { justify-content: center; margin-top: 0; min-height: 64px; font-size: 2rem; }
.pin-display.pin-input.empty::before { font-size: 1.1rem; }

/* Hilfeseite für Mitglieder (Doku-Umschalter: 5 Einträge wie die übrigen Icon-Leisten) */
.help-bar { flex-wrap: nowrap; }
.help-bar .help-title { font-size: 1.1rem; }
.help-bar .theme-toggle { margin-left: auto; }
a.link-btn { display: inline-flex; align-items: center; }

/* Mitglieder-Hilfe: Fragen unter „Häufige Fragen“ in der Akzentfarbe (wie „Abrechnen“), je eigene Zeile */
.doc [id="häufige-fragen"] ~ p > strong:first-child { display: block; color: var(--accent); margin-bottom: .15rem; }

/* Vereinslogo im Kopf (templates/_brand.html). Hell: weißer Bildhintergrund verschmilzt mit dem Kopf. */
.brand-logo { display: block; flex: none; height: 44px; width: auto; max-width: 110px; object-fit: contain;
  border-radius: 6px; mix-blend-mode: multiply; }
.brand-logo-large { height: 64px; max-width: 150px; }
/* Dunkel: "plate" = kleines weißes Schild, "invert" = Farben umkehren (Strichzeichnung wird hell) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo.dark-plate { mix-blend-mode: normal; background: #fff; padding: 3px 5px; }
  :root:not([data-theme="light"]) .brand-logo.dark-invert { filter: invert(1); mix-blend-mode: screen; }
}
:root[data-theme="dark"] .brand-logo.dark-plate { mix-blend-mode: normal; background: #fff; padding: 3px 5px; }
:root[data-theme="dark"] .brand-logo.dark-invert { filter: invert(1); mix-blend-mode: screen; }

/* Kompakte Tabellen (z. B. Mitgliederliste): weniger Innenabstand, kleinere Schrift */
.table-compact { font-size: .88rem; }
.table-compact th, .table-compact td { padding: .38rem .45rem; }
.table-compact th { font-size: .7rem; letter-spacing: .03em; }
.table-compact .badge { font-size: .68rem; padding: .05rem .4rem; margin-left: .2rem; }
/* Gekürzte E-Mail als Knopf: Klick kopiert die volle Adresse */
.copy-mail { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: copy;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.copy-mail:hover { color: var(--primary); }
.badge-payout { background: var(--badge-void-bg); color: var(--badge-void-fg); }
.payout-form { margin-top: .6rem; }

/* Admin-Kopf in Zwischenbreiten (z. B. iPhone quer, ~850 px): ohne Logo, Werkzeuge kompakt, damit er einzeilig bleibt */
@media (max-width: 960px) {
  .admin-bar .brand-logo { display: none; }
  .admin-bar .header-tools { gap: .15rem; }
  .admin-bar .header-tools .tool {
    flex-direction: column; gap: .1rem; min-height: 0; min-width: 52px; padding: .3rem .35rem;
    border-color: transparent; background: transparent; color: var(--muted);
  }
  .admin-bar .header-tools .tool .icon { width: 22px; height: 22px; }
  .admin-bar .header-tools .tool-label, .admin-bar .header-tools .theme-toggle .tool-label { display: block; font-size: .68rem; font-weight: 600; }
  .admin-bar .admin-nav a { padding: .5rem .6rem; }
}

/* Admin-Kopf auf dem iPad hochkant (761–840 px): statt zufälligem Umbruch fest zweizeilig –
   Zeile 1 Logo + Titel + Werkzeuge, Zeile 2 das Menü. iPhone quer (≥ 844 px) bleibt einzeilig. */
@media (min-width: 761px) and (max-width: 840px) {
  .topbar.admin-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem 1rem;
    grid-template-areas: "who tools" "nav nav";
  }
  .admin-bar .topbar-who { grid-area: who; }
  .admin-bar .header-tools { grid-area: tools; margin-left: 0; }
  .admin-bar .admin-nav { grid-area: nav; flex-wrap: nowrap; }
  .admin-bar .brand-logo { display: block; height: 40px; }   /* Platz ist da: Logo wieder zeigen */
}
/* Kompakte Tabelle: Namen dürfen bei Platzmangel umbrechen – sonst bestimmt der längste Name die Tabellenbreite */
.table-compact td:first-child { white-space: normal; min-width: 9rem; }
/* Dezenter Hilfe-Link unten in Login-/Registrierungskarte */
.card-foot { margin: -.4rem 0 0; text-align: center; }

/* Archiv „Abgerechnete Buchungen“: eingeklappt, kompakter und ruhiger als die offenen Buchungen */
.booking-list-compact li { padding: .25rem 0; font-size: .9rem; gap: .6rem; color: var(--muted); border-bottom-style: dashed; }
.booking-list-compact li span:nth-child(2) { color: var(--text); }
.panel.archive > summary h2 { font-size: 1.05rem; }
.pending-mark { color: var(--muted); font-size: .85em; font-style: italic; margin-left: .25rem; }
.badge-accounting { background: var(--badge-open-bg); color: var(--badge-open-fg); }
.badge-fixed { background: var(--badge-void-bg); color: var(--badge-void-fg); white-space: nowrap; }
/* Abrechnungstabellen: Status-Details in eigener Zeile unter dem Etikett, damit die Aktionen Platz haben */
.badge.has-tip { cursor: help; }
/* (?)-Button in der Statusspalte der Seite Abrechnungen, Details im Dialog #info-dialog */
.info-btn { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; }
.info-btn .nav-icon { width: 20px; height: 20px; }
.info-btn:hover, .info-btn:focus-visible { color: var(--primary); background: var(--surface-2); }
.info-list { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; }
.member-info { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .92rem; }
.table tr.row-void td { color: var(--muted); }
.table tr.row-void td.num { text-decoration: line-through; }
.table .input-money { max-width: 5.5rem; }

/* Status-Seite (status.py, _status.html): Abschnitte als Kacheln, Hinweise farbig */
.status-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); align-items: start; }
.status-grid .panel { margin: 0; }
.status-page > .panel { margin-bottom: 1rem; }
.status-list { font-size: .92rem; grid-template-columns: minmax(8rem, auto) 1fr; }
.status-list dd { overflow-wrap: anywhere; }
.status-hints { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.status-warn { color: var(--neg); }
.status-info { color: var(--muted); }
.status-ok, .status-ok-line { color: var(--pos); }

/* Band für weitere Instanzen (INSTANCE_LABEL, z. B. TESTSYSTEM) */
.instance-band { position: sticky; top: 0; z-index: 50; padding: .2rem 1rem; text-align: center; font-weight: 800;
  letter-spacing: .12em; font-size: .8rem; color: #1b1b1b;
  background: repeating-linear-gradient(-45deg, #f4c430 0 14px, #ffd95e 14px 28px); }
.device-form { max-width: 46rem; }