:root { --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif }
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: #141017; color-scheme: dark; -webkit-text-size-adjust: 100% }
#root { container: app / inline-size; height: 100vh; height: 100dvh; overflow: hidden; position: relative }

/* Dunkel, weil Foyer und Theke während der Vorstellung abgedunkelt sind */
.app {
  --a-bg: #141017; --a-surface: #211A27; --a-raised: #2E2636; --a-line: #41374B; --a-fg: #F5F0F7; --a-muted: #B9AEC1;
  --a-brass: #E2B868; --a-brass-ink: #241803; --a-new: #9CC2FF; --a-ok: #8DD6A2; --a-due: #FFA3A0;
  color-scheme: dark; color: var(--a-fg); background: var(--a-bg); font: 16px/1.35 var(--body);
  height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "main" "nav"; position: relative;
  font-variant-numeric: tabular-nums;
}
.app button { font: inherit; color: inherit; cursor: pointer }
.app :focus-visible, .link-btn:focus-visible { outline: 3px solid var(--a-brass, var(--accent)); outline-offset: 2px }
.a-top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--a-line) }
.a-show { min-width: 0; min-height: 44px; flex: 1; display: grid; align-content: center; padding: 0; text-align: left; background: none; border: 0 }
.a-show strong { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.a-show span { color: var(--a-muted); font-size: .82rem }
.a-show span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 0; color: var(--a-ok) }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--a-ok) }
.who { flex: none; max-width: 84px; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem !important; font-weight: 700; color: var(--a-brass) !important; background: none; border: 1px solid var(--a-brass); border-radius: 8px; padding: 0 10px }
.who span { display: none }
.gear { flex: none; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; background: none; border: 1px solid var(--a-line); border-radius: 8px; font-size: .86rem !important; color: var(--a-muted) !important }
.gear span { display: none }
.gear[aria-current="page"] { border-color: var(--a-brass); color: var(--a-brass) !important }
.a-nav { grid-area: nav; display: grid; grid-template-columns: 1.25fr 1.1fr 1fr 1fr; border-top: 1px solid var(--a-line); background: var(--a-surface) }
.a-nav button { background: none; border: 0; min-height: 56px; padding: 0 2px; font-weight: 700; font-size: .88rem; color: var(--a-muted); display: flex; align-items: center; justify-content: center; gap: 4px; box-shadow: inset 0 0 0 0 var(--a-brass); min-width: 0 }
.a-nav button[aria-current="page"] { color: var(--a-brass); box-shadow: inset 0 3px 0 0 var(--a-brass) }
.count { font-size: .72rem; min-width: 20px; padding: 1px 5px; border-radius: 99px; background: var(--a-raised); color: var(--a-fg); text-align: center }
.a-main { grid-area: main; min-height: 0; position: relative }
.scroll { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain }

/* Garderobenmarke und Tischschild */
.marke { --s: 46px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; padding-top: calc(var(--s) * .13);
  font: 800 calc(var(--s) * .42)/1 var(--display); color: var(--a-brass-ink);
  background: radial-gradient(circle at 34% 28%, #F6DDA4, var(--a-brass) 58%, #B98D40);
  -webkit-mask: radial-gradient(circle at 50% 12%, transparent calc(var(--s) * .05), #000 calc(var(--s) * .055));
  mask: radial-gradient(circle at 50% 12%, transparent calc(var(--s) * .05), #000 calc(var(--s) * .055)) }
.marke.big { --s: 116px }
.tisch { flex: none; display: inline-grid; justify-items: center; align-self: start; min-width: 56px; padding: 4px 8px 5px; border: 2px solid var(--a-brass); border-radius: 6px; color: var(--a-brass); line-height: 1 }
.tisch small { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--a-muted) }
.tisch b { font: 800 1.45rem/1.05 var(--display) }
.tisch.none { border: 2px dashed var(--a-due); color: var(--a-due); font-size: .74rem; font-weight: 700; text-align: center; max-width: 78px; padding: 6px }
.tisch.wish { border-style: dashed }
.tisch.wish.taken { border-color: var(--a-due); color: var(--a-due) }
.tisch.wish.taken small { color: var(--a-due) }
.tisch.big { width: 116px; height: 116px; align-content: center; align-self: center; border-width: 3px; border-radius: 10px }
.tisch.big small { font-size: .76rem }
.tisch.big b { font-size: 3.1rem }
.tisch.big.none { max-width: none; font-size: .95rem; line-height: 1.2; padding: 8px }

/* Aufnehmen */
.take { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto }
.menu { padding: 14px; display: grid; gap: 16px; align-content: start }
.cat { display: grid; gap: 8px }
.cat h4 { margin: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted) }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.tile { position: relative; min-width: 0 }
.tile-add { width: 100%; min-height: 88px; text-align: left; padding: 10px 12px; display: grid; gap: 2px; align-content: start; background: var(--a-surface); border: 2px solid var(--a-line); border-radius: 10px }
.tile-add b { font-size: 1rem; padding-right: 26px }
.tile-add small { font-size: .82rem; color: var(--a-muted) }
.tile-add:active { background: var(--a-raised) }
.tile.on .tile-add { border-color: var(--a-brass); background: var(--a-raised) }
.tile-qty { position: absolute; top: 7px; right: 7px; min-width: 28px; height: 28px; border-radius: 99px; background: var(--a-brass); color: var(--a-brass-ink); font-weight: 700; display: grid; place-items: center; pointer-events: none }
.tile-minus { position: absolute; right: 4px; bottom: 4px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-bg); font-size: 1.3rem; line-height: 1 }
.tile.out .tile-add { opacity: .5; cursor: not-allowed; border-style: dashed }
.cartbar { display: flex; padding: 10px 14px; border-top: 1px solid var(--a-line) }
.primary { width: 100%; min-height: 56px; border: 0; border-radius: 10px; background: var(--a-brass); color: var(--a-brass-ink) !important; font-weight: 700; font-size: 1.05rem; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px }
.primary.center { justify-content: center }
.primary:disabled { opacity: .45; cursor: not-allowed }
.bon { display: none; flex-direction: column; min-height: 0; background: var(--a-surface) }
.sheet-open .bon { display: flex; position: absolute; inset: 0; z-index: 5 }
.bon-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--a-line) }
.bon-head h4 { margin: 0; font: 600 1.25rem/1 var(--display); flex: 1 }
.back { background: none; border: 1px solid var(--a-line); border-radius: 8px; min-height: 44px; padding: 0 12px }
.bon-lines { flex: 1; padding: 4px 14px; min-height: 56px }
.bon-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--a-line) }
.stepper { display: flex; align-items: center; gap: 2px }
.stepper button { width: 44px; height: 44px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-bg) }
.stepper b { min-width: 24px; text-align: center }
.bon-empty { color: var(--a-muted); padding: 16px 0 }
.bon-form { padding: 8px 14px 12px; display: grid; gap: 8px; border-top: 1px solid var(--a-line) }
.field { display: grid; gap: 3px }
.field > label, .field > span { font-size: .8rem; color: var(--a-muted) }
.field input { font: inherit; color: var(--a-fg); background: var(--a-bg); border: 2px solid var(--a-line); border-radius: 8px; min-height: 44px; padding: 8px 10px; width: 100% }
.field input:focus { border-color: var(--a-brass); outline: 0 }
.field.bad input { border-color: var(--a-due) }
.field > .err { color: var(--a-due); font-size: .84rem }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px }
.seg button { min-height: 44px; border: 1px solid var(--a-line); background: var(--a-bg); border-radius: 8px; padding: 2px 4px; font-size: .92rem }
.seg button[aria-pressed="true"] { background: var(--a-raised); border-color: var(--a-brass); color: var(--a-brass); font-weight: 700 }
.field > .hint { font-size: .8rem; color: var(--a-brass) }
.confirm { position: absolute; inset: 0; z-index: 6; background: var(--a-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center }
.confirm h4 { margin: 0; font: 800 2.1rem/1 var(--display); overflow-wrap: anywhere }
.confirm p { color: var(--a-muted) }
.confirm .primary { max-width: 300px; margin-top: 6px }
.tokens { display: flex; gap: 16px; align-items: stretch; justify-content: center }
.tokens figure { margin: 0; display: grid; gap: 6px; justify-items: center }
.tokens figcaption { color: var(--a-muted); font-size: .78rem; display: block }

/* Tischauswahl */
.picker { position: absolute; inset: 0; z-index: 7; background: var(--a-bg); display: flex; flex-direction: column; min-height: 0 }
.picker-body { flex: 1; padding: 14px; display: grid; gap: 12px; align-content: start }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px }
.tbtn { min-height: 76px; min-width: 0; padding: 6px 4px; border-radius: 10px; border: 2px solid var(--a-line); background: var(--a-surface); display: grid; gap: 4px; justify-items: center; align-content: center; text-align: center }
.tbtn b { font: 800 1.7rem/1 var(--display) }
.tbtn small { font-size: .76rem; color: var(--a-muted) }
.tbtn.some { border-color: var(--a-brass) }
.tbtn.full { background: var(--a-bg); border-style: dashed; opacity: .75 }
.tbtn.full:disabled { cursor: not-allowed; opacity: .45 }
.tbtn[aria-pressed="true"] { background: var(--a-raised); box-shadow: inset 0 0 0 2px var(--a-brass); border-color: var(--a-brass) }
.pips { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap }
.pips i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--a-muted) }
.pips i.f { background: var(--a-brass); border-color: var(--a-brass) }
.pips i.w { border: 2px solid var(--a-brass) }
.picker-note { color: var(--a-muted); font-size: .95rem }

/* Theke */
.bar { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0 }
.rl { padding: 12px 14px; border-bottom: 1px solid var(--a-line); display: grid; gap: 8px; min-width: 0 }
.rl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px }
.rl-head h4 { margin: 0; font: 600 1.25rem/1 var(--display); white-space: nowrap }
.rl-head span { font-size: .82rem; color: var(--a-muted) }
.progress { height: 6px; border-radius: 99px; background: var(--a-raised); overflow: hidden }
.progress i { display: block; height: 100%; background: var(--a-ok) }
.rl-rows { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; margin: 0; list-style: none; padding-left: 0 }
.rl-rows li { flex: none; display: flex; align-items: baseline; gap: 6px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 8px; padding: 4px 10px; white-space: nowrap; font-size: .9rem }
.rl-rows b { font: 800 1.35rem/1.1 var(--display); color: var(--a-brass) }
.rl-empty, .rl-note { color: var(--a-muted); font-size: .84rem }
.rl-note { color: var(--a-due) }
.work { display: flex; flex-direction: column; min-height: 0 }
.tools { padding: 10px 14px; display: grid; gap: 8px; border-bottom: 1px solid var(--a-line) }
.tools input { font: inherit; color: var(--a-fg); background: var(--a-surface); border: 2px solid var(--a-line); border-radius: 8px; min-height: 44px; padding: 8px 12px; width: 100% }
.tools input:focus { border-color: var(--a-brass); outline: 0 }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none }
.chips button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--a-line); background: none; font-size: .88rem; color: var(--a-muted) }
.chips button[aria-pressed="true"] { background: var(--a-raised); border-color: var(--a-brass); color: var(--a-fg); font-weight: 700 }
.orders { flex: 1; padding: 12px 14px 16px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); align-content: start }
.card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.card.flash { animation: flash 2.4s ease-out }
@keyframes flash { 0%, 40% { border-color: var(--a-brass); background: #3A2F24 } 100% { border-color: var(--a-line); background: var(--a-surface) } }
.card.done { opacity: .68 }
.card-top { display: flex; gap: 10px; align-items: center; min-width: 0 }
.card-who { min-width: 0; flex: 1; display: grid }
.card-who b { font-size: 1.08rem; overflow-wrap: anywhere }
.card-who small { color: var(--a-muted); font-size: .8rem }
.state { font-size: .74rem; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; align-self: start; border: 1px solid currentColor }
.state.neu { color: var(--a-new) } .state.offen { color: var(--a-due) } .state.gerichtet { color: var(--a-ok) }
.card-mid { display: flex; gap: 10px; flex: 1; align-items: flex-start; min-width: 0 }
.items { margin: 0; padding: 0; list-style: none; font-size: .94rem; display: grid; gap: 1px; flex: 1; min-width: 0 }
.pay { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; align-items: baseline }
.pay b { font-size: 1rem }
.pay .due { color: var(--a-due); font-weight: 700 }
.pay .paid { color: var(--a-muted) }
.tell { background: var(--a-raised); border: 1px solid var(--a-brass); border-radius: 8px; padding: 8px 10px; font-weight: 700; font-size: .95rem }
.acts { display: flex; flex-wrap: wrap; gap: 6px }
.acts button { flex: 1 1 auto; min-height: 44px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-bg); padding: 4px 10px; font-size: .92rem; font-weight: 700 }
.acts .go { background: var(--a-brass); color: var(--a-brass-ink); border-color: var(--a-brass) }
.acts .cash { background: var(--a-due); color: #2A0706; border-color: var(--a-due) }
.acts .quiet { font-weight: 400; color: var(--a-muted); flex: 0 1 auto }
.ask { font-size: .88rem; flex-basis: 100%; color: var(--a-fg) }
.none { color: var(--a-muted); padding: 20px 4px; grid-column: 1 / -1 }

/* Tische */
.tables { height: 100% }
.t-plan { padding: 14px; display: grid; gap: 12px; align-content: start }
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9rem; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; padding: 8px 12px }
.rule small { flex-basis: 100%; color: var(--a-muted); font-size: .78rem }
.t-sum { font-size: .86rem; color: var(--a-muted) }
.t-detail { padding: 0 14px 16px; display: grid; gap: 10px; align-content: start }
.t-detail h4 { margin: 0; font: 800 1.7rem/1 var(--display) }
.t-detail p { color: var(--a-muted); font-size: .9rem }
.t-detail h5 { margin: 6px 0 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted) }

/* Arbeitsbereich */
.login { position: absolute; inset: 0; z-index: 8; background: var(--a-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; text-align: center; overflow-y: auto }
.login h4 { margin: 0; font: 800 2.2rem/1.05 var(--display); text-wrap: balance }
.login p { color: var(--a-muted); font-size: .9rem }
.work-btns { display: grid; gap: 10px; width: 100% }
.work-btn { min-height: 96px; padding: 12px; display: grid; gap: 4px; justify-items: center; align-content: center; background: var(--a-surface); border: 2px solid var(--a-line); border-radius: 12px }
.work-btn b { font: 800 2.2rem/1 var(--display) }
.work-btn small { font-size: .84rem; color: var(--a-muted) }
.work-btn[aria-pressed="true"] { border-color: var(--a-brass); background: var(--a-raised) }
.event-btns { display: grid; gap: 8px; width: min(100%, 560px) }
.event-btn { min-height: 72px; padding: 10px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; background: var(--a-surface); border: 2px solid var(--a-line); border-radius: 12px }
.event-btn > b { font: 800 1.7rem/1 var(--display); color: var(--a-brass) }
.event-btn > span { display: grid; gap: 2px; min-width: 0 }
.event-btn small { font-size: .84rem; color: var(--a-muted) }
.event-btn[aria-pressed="true"] { border-color: var(--a-brass); background: var(--a-raised) }
.recon-box { display: grid; gap: 6px; padding: 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; min-width: 0 }
.recon-box h4, .eve-title { margin: 0; font: 600 1.25rem/1.1 var(--display) }
.recon-box input { font: inherit; color: var(--a-fg); background: var(--a-bg); border: 2px solid var(--a-line); border-radius: 8px; min-height: 44px; padding: 6px 8px; width: 100%; min-width: 0 }
.recon-box input:focus { border-color: var(--a-brass); outline: 0 }
.recon-float { margin-bottom: 4px }
.recon-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; font-size: .9rem; padding: 3px 0; min-width: 0 }
.recon-row > span { overflow-wrap: anywhere }
.recon-row.head { color: var(--a-muted); font-size: .76rem; padding-bottom: 0 }
.recon-row.head.small { margin-top: 8px; border-top: 1px solid var(--a-line); padding-top: 8px }
.recon-row.small { font-size: .84rem }
.diff { font-weight: 700 }
.diff.ok { color: var(--a-ok) }
.diff.off { color: var(--a-due) }
.eve-day { border-top: 1px solid var(--a-line); padding-top: 14px }
.eve-day h4 { margin: 0 0 6px; font: 600 1.25rem/1 var(--display) }
.rows.day div { grid-template-columns: 52px minmax(0, 1fr) auto }
.search-note { grid-column: 1 / -1; color: var(--a-muted); font-size: .84rem }

/* Einstellungen */
.settings { height: 100%; padding: 14px; display: grid; gap: 20px; align-content: start }
.set-block { display: grid; gap: 10px; min-width: 0 }
.set-block h4 { margin: 0; font: 600 1.35rem/1 var(--display) }
.set-block p, .set-note { color: var(--a-muted); font-size: .88rem }
.set-block .err { color: var(--a-due); font-weight: 700 }
.area-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 8px; padding: 10px 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px }
.area-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: .88rem }
.area-foot span { color: var(--a-brass) }
.plain { min-height: 44px; padding: 0 12px; background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-fg); font-size: .9rem }
.settings .rule { width: fit-content; max-width: 100% }

/* Abend */
.eve { height: 100%; padding: 14px; display: grid; gap: 16px; align-content: start }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.kpi { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px }
.kpi span { font-size: .8rem; color: var(--a-muted) }
.kpi b { font: 800 1.8rem/1.05 var(--display) }
.kpi.alert b { color: var(--a-due) }
.kpi.total { grid-column: 1 / -1 }
.app.team .a-nav { grid-template-columns: repeat(3, 1fr) }
.eve-cols { display: grid; gap: 16px; min-width: 0 }
.eve-cols h4 { margin: 0 0 6px; font: 600 1.25rem/1 var(--display) }
.rows { display: grid }
.rows div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--a-line); font-size: .94rem; align-items: center }
.rows b { color: var(--a-brass) }
.left-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--a-line); font-size: .94rem }
.left-row .marke { --s: 38px }
.left-row span { flex: 1; min-width: 0; overflow-wrap: anywhere }
.left-row em { font-style: normal; color: var(--a-due); font-size: .84rem; white-space: nowrap }
.left-row i { font-style: normal; color: var(--a-muted); font-size: .84rem; text-align: right }
.muted-small { color: var(--a-muted); margin-top: 10px; font-size: .84rem }

@container app (min-width: 620px) {
  .app { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top" "nav" "main" }
  .live { font-size: .78rem }
  .who { max-width: 180px }
  .who span { display: inline }
  .gear span { display: inline }
  .work-btns { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); width: min(100%, 560px) }
  .settings { max-width: 640px }
  .a-nav { grid-template-columns: repeat(4, 1fr); border-top: 0; border-bottom: 1px solid var(--a-line); background: none }
  .a-nav button { min-height: 48px; font-size: 1rem; gap: 6px; box-shadow: none }
  .a-nav button[aria-current="page"] { box-shadow: inset 0 -3px 0 0 var(--a-brass) }
  .take { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 300px }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .cartbar { display: none }
  .bon { display: flex; border-left: 1px solid var(--a-line) }
  .sheet-open .bon { position: static }
  .back { display: none }
  .bar { grid-template-rows: minmax(0, 1fr); grid-template-columns: 220px minmax(0, 1fr) }
  .rl { border-bottom: 0; border-right: 1px solid var(--a-line); align-content: start; overflow-y: auto; gap: 10px }
  .rl-rows { flex-direction: column; overflow: visible; gap: 0 }
  .rl-rows li { background: none; border: 0; border-bottom: 1px solid var(--a-line); border-radius: 0; padding: 6px 0; white-space: normal; font-size: .96rem; gap: 10px }
  .rl-rows b { min-width: 30px; font-size: 1.6rem }
  .tables { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0 }
  .t-plan, .t-detail { height: 100%; overflow-y: auto; min-height: 0 }
  .t-detail { padding: 14px; border-left: 1px solid var(--a-line); background: var(--a-surface) }
  .t-detail .left-row { border-color: var(--a-line) }
  .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .kpi.total { grid-column: auto }
  .eve-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px }
}
@media (prefers-reduced-motion: reduce) { .card.flash { animation: none } }

/* Echte App: Notch und Home-Leiste, Verbindung, Anmeldung, Verwaltung */
.a-top { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)) }
.a-nav { padding-bottom: env(safe-area-inset-bottom) }
.live.off { color: var(--a-due); font-size: .78rem; font-weight: 700 }
.live.off::before { background: var(--a-due) }
.login { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); justify-content: safe center }
.login .form { display: grid; gap: 12px; width: min(100%, 360px); text-align: left }
.name-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; width: min(100%, 560px) }
.name-btn { min-height: 64px; padding: 8px; background: var(--a-surface); border: 2px solid var(--a-line); border-radius: 12px; font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere }
.name-btn[aria-pressed="true"] { border-color: var(--a-brass); background: var(--a-raised); color: var(--a-brass) }
.pin input { font-size: 1.8rem; letter-spacing: .35em; text-align: center; padding-left: .35em }
.login .err, .take-err { color: var(--a-due); font-weight: 700; font-size: .92rem }
.take-err { padding: 0 2px }
.toast { position: absolute; left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 9; background: var(--a-raised); border: 1px solid var(--a-brass); border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: .95rem; box-shadow: 0 10px 30px -12px #000 }
.toast.bad { border-color: var(--a-due); color: var(--a-due) }
.empty { padding: 28px 16px; display: grid; gap: 12px; align-content: start; justify-items: start; max-width: 520px }
.empty h4 { margin: 0; font: 800 1.8rem/1.05 var(--display) }
.empty p { margin: 0; color: var(--a-muted) }
.field select, .field textarea { font: inherit; color: var(--a-fg); background: var(--a-bg); border: 2px solid var(--a-line); border-radius: 8px; min-height: 44px; padding: 8px 10px; width: 100% }
.field textarea { min-height: 140px; resize: vertical; font-size: .9rem }
.field select:focus, .field textarea:focus { border-color: var(--a-brass); outline: 0 }
.field input[type="file"] { padding: 8px; border-style: dashed }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px }
.item-row.off { opacity: .75; border-style: dashed }
.item-row .wide, .area-foot { grid-column: 1 / -1 }
.ev-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px }
.ev-row .wide { grid-column: 1 / -1 }
.ev-row input { min-width: 0 }
.ev-day { margin: 8px 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted) }
.imp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--a-line); font-size: .9rem; align-items: baseline }
.imp-row b { color: var(--a-brass); white-space: nowrap }
.imp-row em { font-style: normal; font-size: .8rem; color: var(--a-muted); white-space: nowrap }
.imp-row.new em { color: var(--a-ok) }
.imp-errs { color: var(--a-due); font-size: .86rem; display: grid; gap: 2px }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.plain.danger { color: var(--a-due); border-color: var(--a-due) }
.plain:disabled { opacity: .5; cursor: not-allowed }
.set-seg { position: sticky; top: -14px; z-index: 2; background: var(--a-bg); padding: 4px 0 8px; margin-top: -4px }
.signed { color: var(--a-muted); font-size: .9rem }
.loading { display: grid; place-items: center; height: 100%; color: #B9AEC1; font: 16px var(--body) }
@container app (min-width: 620px) {
  .item-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 96px minmax(0, 1.4fr) }
  .ev-row { grid-template-columns: 172px 118px 118px minmax(0, 1fr) }
  .ev-row .wide { grid-column: auto }
  .ev-row .area-foot { grid-column: 1 / -1 }
  .toast { left: auto; right: 16px; bottom: 16px; max-width: 420px }
}