/* Tenten – Layout & Komponenten (reduziert: keine Rahmen, Flächen + Abstand). Farben: css/theme.css
   Wichtig: Farben NUR über CSS-Variablen und KEINE Übergänge (transition) auf Farben/Hintergründe –
   sonst bleiben beim Live-Wechsel hell/dunkel Flächen im alten Farbton hängen. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; font-size: var(--fs-root); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.pad { padding: 3rem 1rem; }
.error { color: var(--danger); }
.hint { color: var(--muted); font-size: .85rem; }
.marker { font-family: var(--font); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }   /* Graffiti-Schrift entfernt (11.11.2026): klare, fette Systemschrift */
.big { font-size: 1.6rem; margin: 0; font-weight: 300; }
q { quotes: "„" "“"; }
.icon { display: inline-block; vertical-align: -0.2em; flex: none; }

/* Kleine graue Versal-Überschriften */
.kicker, .label { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .5rem; }
.chips > .label { display: inline-flex; align-items: center; margin: 0 .25rem 0 0; min-width: 3.2rem; }

/* Logo: schwarz im Hellmodus, weiß im Dunkelmodus */
.logo-img { display: block; height: auto; }
@media (prefers-color-scheme: dark) { .logo-img { filter: invert(1); } }
.splash { min-height: 100vh; display: grid; place-items: center; }

/* ---------- Kopfzeile ---------- */
.shell { max-width: 640px; margin: 0 auto; padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }  /* Platz für die Leiste unten */
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem;
  padding: calc(.5rem + env(safe-area-inset-top)) 1.25rem .5rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tb-left { justify-self: start; min-width: 0; }
.tb-right { justify-self: end; }
.brand { display: block; justify-self: center; text-decoration: none; }  /* Logo exakt mittig (Grid 1fr | auto | 1fr) */
.brand img { height: 68px; width: auto; transition: height .2s var(--ease); }   /* groß; beim Scrollen kompakt */
.topbar.compact .brand img { height: 38px; }
.topbar { transition: padding .2s var(--ease); }
.topbar:not(.compact) { padding-top: calc(.8rem + env(safe-area-inset-top)); padding-bottom: .8rem; }
.demo-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--surface-2); padding: .2rem .55rem; border-radius: 999px; }
.me-btn { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.me-badge { position: absolute; right: -2px; bottom: -2px; background: var(--accent); color: var(--on-accent); border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; }

.content { padding: .5rem 1.25rem; display: flex; flex-direction: column; gap: 2.75rem; }

/* ---------- Abschnitte: keine Boxen, nur Abstand ---------- */
.block { background: none; padding: 0; }
.block-head { margin-bottom: 1rem; }
.block-head h2 { margin: 0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-family: var(--font); }
.block-head .kicker { margin: 0 0 .2rem; color: var(--text); }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.hero-title { font-size: clamp(1.8rem, 8.5vw, 2.1rem); line-height: 1.1; margin: 0 0 1.1rem; }
.hero-num { font-size: 4rem; font-weight: 200; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-num.mid { font-size: 2.6rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .55rem 1.2rem;
  border: 0; border-radius: 999px; background: var(--surface-2); font-weight: 500; cursor: pointer; transition: transform .15s var(--ease); }
.btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.subtle, .btn.ghost { background: var(--surface-2); }
.btn.text { background: none; color: var(--muted); }
.btn.danger { background: none; color: var(--danger); }
.btn.small { min-height: 36px; padding: .3rem .9rem; font-size: .88rem; }
.btn.block { width: 100%; margin-top: .75rem; }
.btn:disabled, .chip:disabled { opacity: .4; cursor: default; }
.btn:active:not(:disabled), .chip:active:not(:disabled) { transform: scale(.97); }
.link { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--surface-3); text-underline-offset: 3px; font-weight: 500; cursor: pointer; }
.link.small { font-size: .85rem; color: var(--muted); }
.muted-link { color: var(--muted); margin-top: 1rem; }
.icon-btn { border: 0; background: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--muted); display: inline-grid; place-items: center; font-size: 1.4rem; line-height: 1; }
.icon-btn.small { width: 32px; height: 32px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.row { display: flex; gap: .6rem; align-items: center; margin: .5rem 0; }
.row > input, .row > select, .row > div { flex: 1; min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.gap { margin-top: .75rem; }

/* Eingabefelder: Grau-Fläche, kein Rand; Fokus = hellere Fläche + feine Akzent-Unterkante */
input, select { width: 100%; min-height: 46px; padding: .55rem .9rem; border: 0; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 -2px 0 transparent; }
input:focus, select:focus { outline: none; background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--accent); }
input::placeholder { color: var(--muted); }
label { display: block; font-size: .78rem; color: var(--muted); margin: .9rem 0 .3rem; }
label.check, label.switch { display: flex; gap: .7rem; align-items: center; color: var(--text); font-size: .95rem; margin: .7rem 0; }
label.check input, label.switch input { width: 22px; min-height: 22px; accent-color: var(--active); }

/* ---------- Chips: Grau-Fläche, aktiv = gefüllt ---------- */
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: .5rem 0; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .35rem .95rem; border: 0; border-radius: 999px;
  background: var(--surface-2); font-size: .92rem; cursor: pointer; text-align: left; }
.chip.on { background: var(--active); color: var(--on-active); font-weight: 600; }
.chip.person { padding-left: .35rem; }
.chip.guest { font-style: italic; }
.chip .cnt { font-size: .72rem; color: var(--muted); }
.chip.on .cnt { color: inherit; opacity: .6; }
.chip.excuse { font-size: .86rem; border-radius: 14px; }
.chip.dice { background: var(--surface-2); }
.chip.time { font-variant-numeric: tabular-nums; font-weight: 500; }
.chip.score { font-size: 1.5rem; font-weight: 300; min-width: 76px; min-height: 56px; justify-content: center; border-radius: 16px; font-variant-numeric: tabular-nums; }
.chip.score.win { font-weight: 400; }
.chip.score.on { background: var(--active); color: var(--on-active); }   /* gewählt – gespeichert wird erst mit „Eintragen“ */
.date-chip { position: relative; overflow: hidden; }
.date-chip .date-input { position: absolute; inset: 0; opacity: 0; min-height: 0; padding: 0; cursor: pointer; }
.pill { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Umschalter */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: .35rem .85rem; min-height: 44px; font-size: .86rem; cursor: pointer; border-radius: 999px; color: var(--muted); }
.seg button.on { background: var(--active); color: var(--on-active); font-weight: 600; }

/* ---------- Avatar ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--surface-3); color: var(--text); font-weight: 500; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.guest { background: var(--surface-2); color: var(--muted); }

/* ---------- Hinweise ---------- */
.notice { background: var(--surface); border-radius: 14px; padding: .85rem 1rem; margin: .75rem 0; font-size: .93rem; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
/* Wichtiger Hinweis: KEINE Button-Optik (keine Akzentfläche, keine Pillenform) – Text mit Pink-Punkt */
.notice.hot { background: none; padding: .2rem 0 .2rem 1.1rem; position: relative; font-weight: 600; border-radius: 0; }
.notice.hot::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 8px; border-radius: 50%; background: var(--active); }
.notice.hot .saying { font-weight: 400; }
.notice.danger { color: var(--danger); }
.notice .saying { margin: 0; flex: 1 1 100%; }
.nudge { display: flex; align-items: center; gap: .5rem; background: none; padding: 0 0 0 1.1rem; position: relative; font-weight: 600; }
.nudge::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--active); }
.nudge span { flex: 1; }
.nudge .icon-btn { color: var(--muted); }

/* ---------- Treffen ---------- */
.meet-hero { display: flex; align-items: flex-end; gap: 1rem; margin: .2rem 0 .3rem; }
.meet-when { display: flex; flex-direction: column; padding-bottom: .45rem; }
.meet-when b { font-weight: 500; }
.meet-when span { color: var(--muted); font-size: .9rem; }
.meet-where { color: var(--muted); font-size: .9rem; margin: 0 0 1.2rem; }
.meeting.cancelled .hero-num { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.ask { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 1.5rem 0 .5rem; }
.rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.rsvp-btn { min-height: 52px; border: 0; border-radius: 999px; background: var(--surface-2); font-weight: 500; font-size: .95rem; cursor: pointer; }
.rsvp-btn.on { background: var(--active); color: var(--on-active); font-weight: 600; }
.extras { margin-top: .6rem; }
.extras-more { margin-top: .4rem; }
.checkin { width: 100%; margin: 1rem 0 .3rem; border: 0; border-radius: 20px; background: var(--accent); color: var(--on-accent); min-height: 76px; font-size: 1.15rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; cursor: pointer; }
.checkin small { font-weight: 400; font-size: .82rem; opacity: .7; }
.checkin.on { background: var(--surface-2); color: var(--text); }

.weather { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; align-items: center; background: var(--surface); border-radius: var(--radius); padding: 1rem 1.2rem; }
.weather.muted-box { display: block; color: var(--muted); font-size: .9rem; }
.wx-main { display: flex; align-items: center; gap: .5rem; color: var(--text); }
.wx-facts { display: grid; grid-template-columns: repeat(2, auto); gap: .3rem 1.2rem; margin: 0; }
.wx-facts dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.wx-facts dd { margin: 0; font-size: .95rem; }
.wx-note, .wx-warn { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .9rem; }
.weather.warn .wx-warn { font-weight: 600; }
.weather .saying { grid-column: 1 / -1; margin: 0; }
.wx-src { grid-column: 1 / -1; margin: 0; font-size: .66rem; color: var(--muted); }

.who { margin-top: 2rem; }
.people-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.people-list li { display: flex; align-items: center; gap: .7rem; }
.people-list li.me .pname { font-weight: 600; }
.people-list li.maybe { opacity: .6; }
.pname { flex: 1; }
.pname small { color: var(--muted); }
.pmeta { color: var(--muted); font-size: .82rem; display: inline-flex; align-items: center; gap: .25rem; }
.excuse-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; font-size: .93rem; }
.excuse-list li { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.open-line { margin-top: 1rem; }
.timeline { margin: .5rem 0 .8rem; }
.tl-bars { display: flex; align-items: flex-end; height: 26px; gap: 2px; }
.tl-bars span { background: var(--surface-3); border-radius: 3px; display: block; }
.tl-bars span.hi { background: var(--accent); }
.timeline p { margin: .35rem 0 0; }
.also { margin-top: 1.5rem; display: grid; gap: .3rem; }
.also-row { text-align: left; background: var(--surface); border: 0; border-radius: 12px; padding: .7rem 1rem; cursor: pointer; }
.also-row b { font-weight: 500; }
.call-link { margin-top: 1.2rem; display: inline-block; }
.call { margin-top: .5rem; }
.call-title { font-size: 1.15rem; margin: 0 0 .3rem; }

.excuse-picker { background: var(--surface); border-radius: var(--radius); padding: 1rem; margin-top: .8rem; }
.picker-title { margin: 0 0 .5rem; font-weight: 500; }
.dice-row { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0; align-items: flex-start; }
.idea { background: var(--bg); border-radius: 14px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.idea-text { font-weight: 500; }

/* ---------- Umfrage ---------- */
.lead { margin: 0 0 .8rem; }
.lead b { font-weight: 600; }
.poll-days { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.poll-day { width: 100%; display: grid; grid-template-columns: 3.4rem 1fr 1.6rem; gap: .7rem; align-items: center; border: 0; background: var(--surface); border-radius: 14px; padding: .7rem .9rem; cursor: pointer; text-align: left; }
.poll-days li.on .poll-day { background: var(--active); color: var(--on-active); }
.poll-days li.on .pd-wx { color: inherit; opacity: .75; }
.poll-days li.on .pd-bar { background: rgba(0, 0, 0, .15); }
.poll-days li.on .pd-bar span { background: var(--on-active); }
.poll-days li.past .poll-day { opacity: .35; }
.pd-name { display: flex; justify-content: flex-start; }
.pd-name .day-mark { align-items: flex-start; }
.poll-days li.on .dm-date { color: inherit; opacity: .8; }
.poll-days li.on .dm-today { background: var(--on-active); color: var(--active); }
.pd-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.pd-bar span { display: block; height: 100%; background: var(--muted); border-radius: 3px; transition: width .25s var(--ease); }
.poll-days li.best .pd-bar span { background: var(--accent); }
.pd-n { font-variant-numeric: tabular-nums; text-align: right; }
.pd-wx { color: var(--muted); font-size: .82rem; display: inline-flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.pd-faces { display: flex; gap: 3px; padding: .25rem 0 .2rem 3.9rem; }

/* ---------- Spiel eintragen ---------- */
.entry-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.mic { margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer; display: grid; place-items: center; }
.mic.live { background: var(--accent); color: var(--on-accent); animation: pulse 1.2s ease-out infinite; }
.step-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 1rem 0 .2rem; }
.score-step .step-title { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); font-weight: 500; }
.vs { color: var(--muted); padding: 0 .2rem; font-weight: 400; }
.score-step { margin-top: .8rem; }
.guest-add { margin-top: .3rem; }
.voice { background: var(--surface); border-radius: var(--radius); padding: 1rem; margin: .5rem 0; }
.voice.listening { display: flex; align-items: center; gap: .7rem; }
.voice .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-out infinite; }
.voice-result { margin: .3rem 0; }
.voice-score { font-size: 3rem; font-weight: 200; margin: 0; line-height: 1; }
@keyframes pulse { 50% { opacity: .5; } }

/* ---------- Warteschlange ---------- */
.queue-toggle { width: 100%; background: var(--surface); border: 0; border-radius: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; cursor: pointer; padding: .9rem 1rem; }
.queue-toggle .label { margin: 0; }
.queue-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .45rem; }
.queue-list li { display: flex; align-items: center; gap: .6rem; }
.queue-list li.up .qname { font-weight: 600; }
.queue-list .pos { width: 1.4rem; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.queue-list .qname { flex: 1; }
.tag { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--on-accent); padding: .15rem .5rem; border-radius: 999px; }

/* ---------- Rangliste ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.rank-row { display: grid; grid-template-columns: 1.6rem auto 1fr auto 3.6rem; gap: .75rem; align-items: center; padding: .55rem .6rem; border-radius: 14px; }
.rank-row.me { background: var(--surface); }
.rank-row.me .rank-name { font-weight: 600; }
.rank-pos { color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rank-row.top1 .rank-pos { color: var(--text); font-weight: 600; }
.rank-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rank-wl { font-size: .74rem; color: var(--muted); font-weight: 400; }
.rank-elo { font-size: 1.35rem; font-weight: 300; text-align: right; font-variant-numeric: tabular-nums; }
.trend { font-size: .82rem; display: flex; align-items: center; gap: .1rem; color: var(--muted); }
.trend.up { color: var(--text); }
.trend small { font-size: .72rem; }

/* ---------- Verlauf ---------- */
.review { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.review header { display: flex; justify-content: space-between; align-items: center; }
.review header .label { margin: 0; }
.review p { margin: .5rem 0 0; }
.review .src { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.feed-item { display: flex; gap: .5rem; align-items: flex-start; font-size: .93rem; }
.feed-main { flex: 1; }
.feed .side.won { font-weight: 600; }
.feed .score { font-weight: 300; padding: 0 .25rem; font-variant-numeric: tabular-nums; }
.d { font-size: .72rem; color: var(--muted); font-weight: 400; }
.reacts { display: inline-flex; gap: .15rem; align-items: center; flex: none; }
.react-count, .react-pick, .react-add { border: 0; background: none; cursor: pointer; padding: .1rem .25rem; border-radius: 999px; font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .1rem; }
.react-count small { font-size: .72rem; }
.react-count.me { background: var(--surface-2); }
.react-pick { font-size: 1.1rem; background: var(--surface-2); animation: pop .18s var(--ease); }
.react-add { opacity: .55; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

/* ---------- Spaß & Kasse ---------- */
.fun-grid { display: grid; gap: .8rem; }
@media (min-width: 600px) { .fun-grid { grid-template-columns: 1fr 1fr; } }
.king-row { display: flex; align-items: center; gap: .7rem; margin: .4rem 0; }
.crown { color: var(--muted); }
.top-excuse { margin: 1rem 0 0; }
.top-excuse .label { margin-bottom: .2rem; }
.top-excuse q { display: block; }
.cash-head { display: flex; align-items: center; justify-content: space-between; }
.cash-balance { font-size: 2.6rem; font-weight: 200; font-variant-numeric: tabular-nums; }
.cash-balance.neg { color: var(--danger); }
.in, .out { font-variant-numeric: tabular-nums; }
.out { color: var(--muted); }
details summary { cursor: pointer; padding: .4rem 0; list-style: none; color: var(--muted); font-size: .9rem; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: " ›"; }
details[open] > summary::after { content: " ‹"; }
.dues, .ledger, .people, .plain, .admin-matches, .sayings-admin { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .55rem; }
.dues li, .ledger li, .people li, .plain li, .sayings-admin li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; flex-wrap: wrap; }
.plain li span:first-child { flex: 1; }
.dues li small, .ledger li span:nth-child(2) { flex: 1; }
.sayings-admin li span { flex: 1 1 100%; }
.admin-matches li { font-size: .9rem; }

/* ---------- Sprüche ---------- */
.saying { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-top: .5rem; color: var(--muted); font-size: .92rem; }
.saying-text { flex: 1 1 auto; }
.like, .add-saying { border: 0; background: none; padding: 0; font-size: .76rem; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: .15rem; }
.like.on { color: var(--active); font-weight: 600; }
.saying-form { flex: 1 1 100%; display: grid; gap: .45rem; margin-top: .4rem; }

/* ---------- Leere Zustände ---------- */
.empty { text-align: center; padding: .5rem 0; color: var(--muted); }
.empty .saying { justify-content: center; }
.illu { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; }
.illu.small { max-width: 64px; margin: 0; }
.empty.small .illu { max-width: 140px; }

/* ---------- Bottom-Sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s var(--ease); }
.sheet { width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: var(--float-shadow); animation: up .22s var(--ease); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .4rem 1.4rem; }
.sheet-head h2 { margin: 0; font-size: 1.5rem; }
.sheet-body { overflow-y: auto; padding: .4rem 1.4rem calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .9rem; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.profile-top { display: flex; gap: 1.2rem; align-items: center; }
.photo-pick { position: relative; margin: 0; cursor: pointer; }
.photo-badge { position: absolute; right: 0; bottom: 0; background: var(--surface-2); color: var(--text); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
.sheet-links { display: grid; gap: 0; }
.info p { margin: .4rem 0; }
/* Profil → Mitteilungen (Push) */
.push-box { display: grid; gap: .55rem; }
.push-box .kicker { margin: 0; }
.push-status { display: flex; align-items: flex-start; gap: .55rem; margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.push-status .dot { margin-top: .35em; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--surface-3); }
.push-status.on .dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.push-status.bad .dot { background: var(--active); }
.push-warn { margin: 0; color: var(--danger); }
.push-help { background: var(--surface-2); border-radius: 12px; padding: .7rem .9rem; }
.push-help p { margin: 0 0 .4rem; }
.push-help ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.push-actions { display: grid; gap: .2rem; }
.push-list { display: grid; gap: 0; margin-top: .3rem; }
.push-list .label { margin: .2rem 0 .1rem; }
.push-list label.switch.push-topic { align-items: flex-start; margin: 0; padding: .55rem 0; min-height: 44px; font-size: .95rem; }
.push-list label.switch.push-topic input { margin-top: .15rem; flex: none; }
.pt-label { font-weight: 500; }
.pt-hint { font-size: .8rem; color: var(--muted); }
.pt-saved { font-size: .72rem; font-weight: 600; color: var(--accent-line); }
.push-list > .small { margin: .3rem 0 0; }
.admin-box { background: var(--surface); border-radius: var(--radius); padding: .5rem 1.1rem; }
.admin-box > summary { color: var(--text); font-size: 1rem; font-weight: 500; padding: .6rem 0; }
.admin-body { padding-bottom: .8rem; display: grid; gap: .3rem; }
.admin-body input, .admin-body select { background: var(--bg); }
.admin-box-close { justify-self: end; margin-top: .3rem; color: var(--muted); }
.admin-close { margin-top: .5rem; }
details.sub { margin-top: .3rem; }
.amounts label { display: flex; align-items: center; gap: .6rem; color: var(--text); font-size: .9rem; }
.amounts input { width: 90px; flex: none; }
.chat { display: flex; flex-direction: column; gap: .6rem; min-height: 120px; }
.bubble { padding: .65rem .95rem; border-radius: 18px; max-width: 88%; white-space: pre-wrap; }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
.bubble.assistant { align-self: flex-start; background: var(--surface); }
.bubble.sys { color: var(--muted); }

/* ---------- Login ---------- */
.login { max-width: 420px; margin: 0 auto; padding: 3rem 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.login-logo { width: 220px; margin: 0 auto; }
.login-claim { font-size: 1.15rem; margin: .5rem 0 0; font-weight: 300; }
.login h1 { font-weight: 300; text-align: center; }
.login h2 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* ---------- Toast (schwebend, dezenter Schatten) ---------- */
.toast { position: fixed; left: 50%; bottom: calc(5.6rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  width: min(92vw, 520px); display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 16px;
  background: var(--text); color: var(--bg); box-shadow: var(--float-shadow); overflow: hidden; animation: up .2s var(--ease); }
.toast-msg { flex: 1; }
.toast-action { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: .5rem .95rem; font-weight: 600; cursor: pointer; min-height: 40px; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: shrink linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }

/* ---------- Effekte (ruhig & kurz) ---------- */
.fx-fly { position: fixed; z-index: 70; transform: translate(-50%, 0); font-size: 2rem; font-weight: 300; color: var(--on-accent);
  background: var(--accent); padding: .1rem .6rem; border-radius: 999px; pointer-events: none; animation: fly 1.1s var(--ease) forwards; }
.fx-fly.neg { background: var(--surface-3); color: var(--text); }
@keyframes fly { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -90px); } }
.fx-splat { position: fixed; z-index: 65; transform: translate(-50%, -50%); pointer-events: none; animation: splat 1.3s var(--ease) forwards; }
@keyframes splat { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .toast-bar { display: none; }
}

.foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 2rem 0 1rem; }
.foot .logo-img { margin: 0 auto .6rem; opacity: .5; }
.foot p { margin: .25rem 0; }

/* ---------- Einklappbare Sektionen (Überschrift = Tipp-Bereich, Kurzinfo, dünner Chevron) ---------- */
.sec-head { width: 100%; display: flex; align-items: baseline; gap: .6rem; border: 0; background: none; padding: .35rem 0; margin: 0 0 .8rem; cursor: pointer; text-align: left; color: var(--muted); }
.block.closed .sec-head { margin-bottom: 0; }
.sec-title { margin: 0; flex: none; font: 600 .72rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sec-sum { flex: 1; min-width: 0; font-size: .86rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; font-variant-numeric: tabular-nums; }
.chev { flex: none; align-self: center; color: var(--muted); transition: transform .2s var(--ease); }
.chev.up { transform: rotate(180deg); }
.dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sec-body:not([hidden]), .col-body:not([hidden]) { animation: reveal .2s var(--ease); }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
.kicker.hot { color: var(--text); }
.collapse { margin: .4rem 0; }
.col-head { width: 100%; display: flex; align-items: center; gap: .5rem; border: 0; background: none; padding: .45rem 0; cursor: pointer; text-align: left; color: var(--muted); }
.col-title { flex: none; font-size: .85rem; color: var(--muted); }
.collapse .sec-sum { font-size: .8rem; color: var(--muted); }
.wx-more { grid-column: 1 / -1; }
.wx-more .collapse { margin: 0; }
.fun-grid.single { grid-template-columns: 1fr; }

/* ---------- Wer kommt wann, was bringt er mit (Umfrage & Treffen) ---------- */
.col-head .col-title { flex: 1; min-width: 0; white-space: normal; color: var(--text); font-size: .86rem; }
.col-head .sec-sum { flex: none; max-width: 45%; }
.pd-detail { padding: 0 .9rem; }
.pd-detail .collapse { margin: .1rem 0 .3rem; }
.att-list { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .3rem; }
.att-list li { display: flex; flex-wrap: wrap; gap: .1rem .45rem; font-size: .88rem; }
.att-name { font-weight: 500; }
.att-meta { color: var(--muted); }
.att-meta::before { content: "· "; }
.my-day { margin: .4rem 0 .8rem; }
.my-day > .label { margin-bottom: .1rem; }

/* ---------- Rückfrage-Sheet & Bestätigen ---------- */
.confirm-backdrop { z-index: 80; }
.sheet.confirm { max-width: 480px; }
.confirm-body { padding: 1.4rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom)); }
.confirm-body h2 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 600; }
.confirm-body p { margin: 0 0 1.2rem; font-size: .92rem; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.btn.danger-fill { background: var(--danger); color: #fff; font-weight: 600; }
.confirm-line { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font-size: .9rem; color: var(--muted); }
.confirm-line .icon { color: var(--text); }
.pending { background: var(--surface); border-radius: 14px; padding: .8rem 1rem; margin-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.pending b { font-weight: 600; font-variant-numeric: tabular-nums; }

.poll-days li.best.on .pd-bar span { background: var(--on-active); }
.who .col-head { flex-wrap: wrap; }
.who .col-head .sec-sum { order: 3; flex: 1 1 100%; max-width: none; text-align: left; white-space: normal; }

/* ---------- Intro-Animation (Logo wird „gesprüht“) ---------- */
#intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; cursor: pointer; }
#intro .intro-stage { position: relative; display: grid; justify-items: center; gap: 18px; }
#intro .intro-logo {
  width: min(64vw, 260px);
  -webkit-mask-image: linear-gradient(100deg, #000 45%, transparent 55%);
          mask-image: linear-gradient(100deg, #000 45%, transparent 55%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  opacity: 0; transform: scale(1.06); filter: blur(6px);
}
@media (prefers-color-scheme: dark) { #intro .intro-logo { filter: invert(1) blur(6px); } }
#intro .intro-line { display: block; height: 4px; width: min(46vw, 180px); border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }

#intro.go .intro-logo { animation: intro-spray 1.2s cubic-bezier(.45, 0, .25, 1) .15s forwards; }
#intro.go .intro-line { animation: intro-line .5s var(--ease) 1.2s forwards; }
@media (prefers-color-scheme: dark) { #intro.go .intro-logo { animation-name: intro-spray-dark; } }

@keyframes intro-spray {
  0%   { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: scale(1.06); filter: blur(6px); }
  70%  { filter: blur(0); }
  100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; transform: scale(1); filter: blur(0); }
}
@keyframes intro-spray-dark {
  0%   { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: scale(1.06); filter: invert(1) blur(6px); }
  70%  { filter: invert(1) blur(0); }
  100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; transform: scale(1); filter: invert(1) blur(0); }
}
@keyframes intro-line { to { transform: scaleX(1); } }

/* Bewegung reduzieren: nur kurz einblenden */
#intro.go-reduced .intro-logo { -webkit-mask-image: none; mask-image: none; transform: none; filter: none; animation: intro-fade .3s ease-out forwards; }
@media (prefers-color-scheme: dark) { #intro.go-reduced .intro-logo { filter: invert(1); } }
#intro.go-reduced .intro-line { transform: scaleX(1); }
@keyframes intro-fade { to { opacity: 1; } }

#intro.out { animation: intro-out .45s var(--ease) forwards; }
#intro.go-reduced.out { animation-duration: .2s; }
@keyframes intro-out { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }

/* ---------- Umfrage-Ablauf: 1 Tag · 2 Uhrzeit · 3 Mitbringen ---------- */
.steps { margin: .2rem 0 .5rem; font-size: .72rem; letter-spacing: .06em; color: var(--muted); }
.steps .cur { color: var(--text); font-weight: 600; }
.day-flow { padding: .6rem .9rem .4rem; animation: reveal .2s var(--ease); }
.day-line { margin: .35rem .9rem .2rem; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.bring-group { margin-top: .3rem; }
.bring-group .label { margin: .4rem 0 0; font-size: .64rem; }
.bring .btn { margin-top: .5rem; }
.tally { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }

/* ---------- Übersicht "Wer kommt wann mit was" = Anzeigetafel (Fallblatt) ---------- */
.overview { margin: .4rem 0 1rem; }
.board { background: var(--board-bg); color: var(--board-text); border-radius: var(--radius); padding: .7rem .8rem .5rem; margin: .3rem 0 .7rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow: hidden; }
.bd-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--board-head); padding-bottom: .4rem; }
.bd-clock { color: var(--board-text); letter-spacing: .08em; }
/* Handy: zweizeilig – Zeile 1 NAME … STATUS, Zeile 2 TAG ZEIT, Zeile 3 Mitbringsel */
.bd-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "name name status" "day time time" "bring bring bring" "edit edit edit";
  column-gap: .7rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--board-line); }
.bd-name { grid-area: name; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; }
.bd-day { grid-area: day; display: grid; margin-top: .25rem; white-space: nowrap; }
.bd-time { grid-area: time; display: grid; margin-top: .25rem; white-space: nowrap; color: var(--board-head); }
.bd-bring { grid-area: bring; margin-top: .2rem; font-size: .8rem; color: var(--board-muted); line-height: 1.35; }
.bd-status { grid-area: status; justify-self: end; font-weight: 700; font-size: .95rem; }
.bd-day:empty, .bd-time:empty, .bd-bring:empty { display: none; }
.bd-day, .bd-time { font-size: .9rem; }
.bd-headrow { padding: 0 0 .3rem; border-top: 0; font: 600 .62rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--board-muted); }
.bd-headrow > span { margin: 0; color: var(--board-muted); font-size: inherit; font-weight: inherit; }
.bd-headrow .bd-day, .bd-headrow .bd-time, .bd-headrow .bd-bring { display: none; }
.bd-person { border: 0; background: none; padding: .15rem 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; min-height: 36px; }
.bd-name .flap { font-size: 1.05rem; font-weight: 700; }
.bd-mini { font-family: var(--font); font-size: .7rem; color: var(--board-muted); white-space: nowrap; }
.bd-status.go { color: var(--board-go); }
.bd-status.wait { color: var(--board-wait); }
.bd-status.out { color: var(--board-out); }
.bd-status.open { color: var(--board-muted); }
.bd-row.me { background: var(--board-row-me); margin: 0 -.8rem; padding-left: .8rem; padding-right: .8rem; }
/* Zugesagte oben & hell, Vielleicht etwas leiser, Raus/Offen gedämpft und kleiner */
.bd-row.st-vielleicht .bd-name { opacity: .85; }
.bd-row.st-nein, .bd-row.st-offen { padding: .35rem 0; }
.bd-row.st-nein .bd-name, .bd-row.st-offen .bd-name { opacity: .6; }
.bd-row.st-nein .bd-name .flap, .bd-row.st-offen .bd-name .flap { font-size: .88rem; font-weight: 500; }
.bd-row.st-nein .bd-status, .bd-row.st-offen .bd-status { font-size: .8rem; }
.bd-row.st-ja + .bd-row:not(.st-ja) { border-top-color: #333; }
.bd-row.me.st-nein, .bd-row.me.st-offen { padding-left: .8rem; padding-right: .8rem; }
/* Breiter (Tablet/Desktop): Zeile 2 = TAG · ZEIT · MITBRINGSEL nebeneinander */
@media (min-width: 560px) {
  .bd-row { grid-template-columns: auto auto 1fr auto; grid-template-areas: "name name name status" "day time bring bring" "edit edit edit edit"; }
  .bd-bring { margin-top: .25rem; align-self: baseline; }
  .bd-day:empty + .bd-time:empty + .bd-bring { grid-column: 1 / -1; }
}
/* Fallblatt: jedes Zeichen klappt einzeln (rotateX), Blätter mit Mittelfuge bei NAME/STATUS */
.flap { display: inline; white-space: normal; }
.fw { white-space: nowrap; }
.fl { display: inline-block; perspective: 220px; text-align: center; }
.fl-c { display: inline-block; transform-origin: 50% 50%; animation: flapflip .11s ease-out; backface-visibility: hidden; }
.flap.cells .fl { position: relative; min-width: 1.25ch; margin-right: 2px; padding: .06em .1em; background: var(--board-cell); border-radius: 3px; line-height: 1.2; }
.flap.cells .fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--board-split); }
.bd-status .flap.cells .fl { min-width: 1.1ch; }
@keyframes flapflip { from { transform: rotateX(-90deg); opacity: .3; } to { transform: rotateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fl-c { animation: none !important; } }
.pd-head { margin: .25rem .9rem .3rem; font-size: .8rem; color: var(--muted); }
.chips.plan { margin-top: .6rem; }

/* ---------- Statistik ---------- */
.stat-head { margin-top: 1.4rem; }
.nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 1rem .8rem; margin: .4rem 0 .8rem; }
.num { display: flex; flex-direction: column; }
.num-v { font-size: 1.9rem; font-weight: 200; line-height: 1.1; font-variant-numeric: tabular-nums; }
.num-v.small-v { font-size: 1.05rem; font-weight: 400; }
.num-l { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; }
.form { display: inline-flex; gap: 5px; margin: .2rem 0 .6rem; }
.fd { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); }
.fd.w { background: var(--text); box-shadow: none; }
.spark { display: block; margin: .2rem 0; }
.h2h { list-style: none; margin: .2rem 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.h2h li { display: flex; justify-content: space-between; gap: .6rem; }
.h2h b { font-weight: 500; font-variant-numeric: tabular-nums; }
.link-name, .rank-name { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.link-name { font-weight: 500; }
.bars { list-style: none; margin: .2rem 0; padding: 0; display: grid; gap: .35rem; }
.bars li { display: grid; grid-template-columns: 6.5rem 1fr 3rem; gap: .6rem; align-items: center; font-size: .85rem; }
.bars li.me .bar-n { font-weight: 600; }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--muted); border-radius: 3px; }
.bars li.me .bar span { background: var(--accent-line); }
.bar-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Abstimmungen: neu / bearbeiten ---------- */
.poll-new { margin: 0 0 -1.2rem; }
.poll-meta { margin: -.6rem 0 .8rem; }
.poll-form .seg { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; margin-bottom: .2rem; }
.poll-form .seg button { padding: .3rem .2rem; font-size: .8rem; white-space: nowrap; }
.poll-danger { margin-top: .4rem; }

/* ---------- Einheitliches Tagesformat: Wochentag groß, Datum klein darunter, "heute" markiert ---------- */
.day-mark { display: flex; flex-direction: column; align-items: center; line-height: 1.1; gap: .12rem; }
.dm-wd { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dm-date { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dm-today { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; padding: 0 .4em; border-radius: 999px; background: var(--text); color: var(--bg); }
.day-grid { display: grid; gap: .9rem; margin: .7rem 0 .1rem; }
.dg-label { margin: 0 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--text); }
.dg-label span { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.dg-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.day-tile { min-width: 0; min-height: 64px; padding: .4rem 0; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--ease); }
.day-tile:active:not(:disabled) { transform: scale(.95); }
.day-tile.on { background: var(--active); color: var(--on-active); }
.day-tile.on .dm-date { color: inherit; opacity: .8; }
.day-tile.on .dm-today { background: var(--on-active); color: var(--active); }
.day-tile.past { background: none; color: var(--muted); cursor: default; }
.day-tile.past .dm-wd { font-weight: 500; }
.day-tile.past.on { background: var(--active); color: var(--on-active); cursor: pointer; }
.day-count { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.day-count b { color: var(--text); font-weight: 700; }
.day-count.none { color: var(--danger); }
@media (max-width: 400px) { .sheet-body { padding-left: 1rem; padding-right: 1rem; } }

/* ---------- Abstimmung: Zwischenstand/Anleitung in Headline-Schrift, Hinweis ohne Button-Optik ---------- */
.poll-sub { font-size: 1.45rem; margin: .2rem 0 .7rem; color: var(--text); }
.hint-line { display: flex; align-items: baseline; gap: .55rem; margin: .2rem 0 .8rem; font-weight: 600; }
.hint-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--active); transform: translateY(-.1em); }


/* ---------- Status ändern auf der Anzeigetafel ---------- */
.status-text { margin: 0; }
.status-chips { gap: .5rem; }
.status-chips .chip { min-height: 48px; padding: .4rem 1.1rem; font-size: 1rem; }
.status-chips .chip.out { color: var(--danger); }
.status-chips .chip.out.on { color: var(--on-active); }
.bd-by { flex-basis: 100%; font-family: var(--font); font-size: .66rem; color: var(--board-wait); }
.status-label { margin: .2rem 0 -.3rem; }
.status-days { margin: 0; }

/* ---------- Bearbeiten: EIN Muster für die ganze App (Stift im Neon-Kreis + Wort, echte Fläche, ≥ 44 px) ---------- */
.btn-edit { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .3rem 1rem .3rem .35rem; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font: 600 .88rem/1.1 var(--font); cursor: pointer; vertical-align: middle; transition: transform .15s var(--ease); }
.btn-edit:active { transform: scale(.97); }
.btn-edit .pen { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.btn-edit.icon-only { padding: 6px; }
.btn-edit.board { background: var(--board-cell); color: var(--board-text); }
.btn-edit.board.icon-only { min-height: 44px; min-width: 44px; padding: 6px; margin-left: .35rem; vertical-align: middle; }
.btn-edit.board.icon-only .pen { width: 30px; height: 30px; }
.edit-row { margin: -.4rem 0 1rem; }
.edit-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.day-line .btn-edit { margin-left: auto; }

/* Tafel: eigene Zeile mit pinkem Balken links + Button "Status ändern" */
.bd-row.me { box-shadow: inset 4px 0 0 var(--active); }
.bd-editrow { grid-area: edit; margin-top: .5rem; }
.bd-status { display: inline-flex; align-items: center; justify-content: flex-end; }

/* ---------- Großer Kopf der Tafel: "05 DABEI" ---------- */
.bd-head { padding: .3rem 0 .8rem; border-bottom: 1px solid var(--board-line); margin-bottom: .3rem; }
.bd-big { display: flex; align-items: center; gap: .7rem; }
.bd-num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--board-go); }
.bd-num .fl { min-width: 1.15ch; padding: .04em .08em; border-radius: 6px; }
.bd-word { display: flex; flex-direction: column; gap: .15rem; font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; color: var(--board-text); }
.bd-word small { font: 500 .78rem/1.3 var(--font); letter-spacing: 0; color: var(--board-head); }
.bd-goal { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.bd-goal small { font: 500 .78rem/1.3 var(--font); color: var(--board-muted); }
.bd-goal.ok small { color: var(--board-go); }
.bd-pips { display: inline-flex; gap: 4px; }
.bd-pips i { width: 14px; height: 14px; border-radius: 3px; background: var(--board-cell); }
.bd-pips i.on { background: var(--board-go); }
.bd-names { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 0; }
.bd-names span { font: 600 .74rem/1 var(--font); letter-spacing: .03em; text-transform: uppercase; padding: .35rem .55rem; border-radius: 6px; background: var(--board-cell); color: var(--board-text); }
.bd-names span.me { background: var(--active); color: var(--on-active); }

/* ---------- Rangliste als Anzeigetafel ---------- */
.rk-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "pos name elo" "pos meta meta"; column-gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--board-line); }
.rk-headrow { padding: 0 0 .3rem; border-top: 0; font: 600 .62rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--board-muted); grid-template-areas: "pos name elo"; }
.rk-pos { grid-area: pos; align-self: start; font-weight: 700; font-size: .95rem; color: var(--board-muted); }
.rk-name { grid-area: name; min-width: 0; font-weight: 700; font-size: 1.02rem; }
.rk-elo { grid-area: elo; justify-self: end; font-weight: 800; font-size: 1.15rem; color: var(--board-text); }
.rk-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .25rem; font-family: var(--font); font-size: .78rem; color: var(--board-muted); }
.rk-move { font-family: var(--font-mono); font-weight: 700; min-width: 2.2rem; }
.rk-move.up { color: var(--board-go); }
.rk-move.down { color: var(--board-out); }
.rk-move.new { color: var(--board-head); text-transform: uppercase; font-size: .7rem; }
.rk-form { display: inline-flex; gap: 3px; }
.rk-form i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; font: 700 .62rem/1 var(--font-mono); font-style: normal; }
.rk-form i.w { background: var(--board-go); color: #111; }
.rk-form i.l { background: #3a3a3a; color: var(--board-text); }
.rk-rate { font-variant-numeric: tabular-nums; }
.rk-streak { display: inline-flex; align-items: center; gap: .15rem; color: var(--active); font-weight: 700; }
.rk-row.top1 .rk-pos { color: var(--board-head); }
.rk-row.top2 .rk-pos, .rk-row.top3 .rk-pos { color: var(--board-text); }
.rk-row.top1 .rk-elo { color: var(--board-head); }
.rk-row.me { background: var(--board-row-me); margin: 0 -.8rem; padding-left: .8rem; padding-right: .8rem; box-shadow: inset 4px 0 0 var(--active); }
.milestone { background: var(--surface); border-radius: 14px; padding: .8rem 1rem; margin: .2rem 0 .6rem; }
.milestone p { margin: 0; }
.milestone p + p { margin-top: .35rem; }

/* ---------- Gadget: Matchup vor dem Spiel ---------- */
.matchup { background: var(--surface); border-radius: 16px; padding: .9rem 1rem; margin: .4rem 0 .6rem; }
.matchup.muted-box { padding: .6rem 1rem; }
.mu-chance { display: flex; align-items: center; gap: .8rem; }
.mu-num { font-size: 2.6rem; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.mu-num small { font-size: 1rem; margin-left: .1rem; }
.mu-lbl { font-size: .85rem; color: var(--muted); line-height: 1.3; }
.mu-lbl b { color: var(--text); font-weight: 600; }
.mu-bar { height: 6px; border-radius: 3px; background: var(--surface-3); margin: .6rem 0; overflow: hidden; }
.mu-bar span { display: block; height: 100%; background: var(--accent-line); border-radius: 3px; }
.mu-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; }
.mu-facts dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.mu-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mu-facts .down { color: var(--danger); }
.mu-revenge { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-weight: 700; color: var(--active); }
@media (prefers-color-scheme: light) { .mu-revenge { color: #c2186b; } }

/* ---------- Gadget: Spielbarkeits-Ampel + Restlicht ---------- */
.ampel { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-bottom: .6rem; margin-bottom: .2rem; border-bottom: 1px solid var(--faint); }
.amp-lights { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 8px; background: #111; flex: none; }
.amp-lights i { width: 11px; height: 11px; border-radius: 50%; background: #333; }
.ampel.rot .amp-lights .r { background: #ff2e93; }
.ampel.gelb .amp-lights .y { background: #00e5ff; }
.ampel.gruen .amp-lights .g { background: #c6ff00; }
.amp-text { display: flex; flex-direction: column; flex: 1; min-width: 10rem; }
.amp-text small { color: var(--muted); font-size: .8rem; }
.amp-sun { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }

/* ---------- Gadget: faire Paarung in der Warteschlange ---------- */
.pairing { background: var(--surface); border-radius: 14px; padding: .8rem 1rem; margin-top: .6rem; }
.pairing p { margin: 0 0 .3rem; }
.pair-teams { font-size: 1.05rem; }
/* Fremde Zeilen (nur Admins): Stift ohne Neon – die Tafel bleibt ruhig, Tippziel trotzdem 44 px */
.bd-status .btn-edit.board.icon-only { background: none; }
.bd-status .btn-edit.board.icon-only .pen { background: var(--board-cell); color: var(--board-muted); }
.rk-headrow .rk-elo { font: inherit; color: inherit; letter-spacing: inherit; }
.sec-ico { display: inline-flex; vertical-align: -0.25em; margin-right: .4rem; color: var(--text); }

/* ---------- Live-Spiel mit Uhr ---------- */
.live-tiles { display: grid; gap: .5rem; }
.live-tile { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge teams clock" "badge score clock"; align-items: center; gap: .1rem .8rem;
  width: 100%; border: 0; border-radius: 18px; padding: .8rem 1rem; background: var(--board-bg); color: var(--board-text); text-align: left; cursor: pointer; min-height: 64px; }
.live-tile .lt-badge { grid-area: badge; }
.lt-teams { grid-area: teams; font-size: .9rem; min-width: 0; }
.lt-teams .vs { color: var(--board-muted); }
.lt-score { grid-area: score; font: 800 1.3rem/1.1 var(--font-mono); color: var(--board-go); }
.lt-score small { font-size: .8rem; color: var(--board-text); font-weight: 600; }
.lt-clock { grid-area: clock; font: 700 1.15rem/1 var(--font-mono); color: var(--board-cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(0, 229, 255, .35); }
.lt-badge { display: inline-flex; align-items: center; gap: .35rem; font: 800 .7rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  background: var(--active); color: var(--on-active); padding: .35rem .55rem; border-radius: 6px; }
.lt-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-out infinite; }
.live-tile.stale .lt-badge { background: var(--board-cell); color: var(--board-head); }

.live-sheet { position: fixed; inset: 0; z-index: 55; background: var(--bg); overflow-y: auto; animation: up .22s var(--ease); }
.live-inner { max-width: 640px; margin: 0 auto; padding: calc(.6rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .8rem; }
.live-top { display: flex; align-items: center; gap: .6rem; }
.live-who { flex: 1; }
.live-board { margin: 0; padding: .9rem .8rem; }
.lb-clock { display: flex; justify-content: center; font-size: 2.6rem; font-weight: 800; color: var(--board-cyan); text-shadow: 0 0 14px rgba(0, 229, 255, .35); }
.lb-clock .fl { min-width: 1.05ch; }
.lb-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin-top: .7rem; }
.lb-team { font: 700 .95rem/1.2 var(--font); color: var(--board-text); overflow-wrap: anywhere; }
.lb-team.right { text-align: right; }
.lb-team.won { color: var(--board-go); }
.lb-sets { font-size: 1.9rem; font-weight: 800; color: var(--board-go); }
.lb-setlist { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .6rem 0 0; }
.lb-setlist span { font: 600 .8rem/1 var(--font-mono); background: var(--board-cell); color: var(--board-text); padding: .3rem .45rem; border-radius: 5px; }
.live-modes .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.live-q { margin: .2rem 0 0; font-weight: 600; }
.set-steppers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stepper { background: var(--surface); border-radius: 18px; padding: .8rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.st-name { font-weight: 600; text-align: center; }
.st-row { display: flex; align-items: center; gap: .6rem; }
.st-val { font: 200 3rem/1 var(--font); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.st-btn { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 1.6rem; cursor: pointer; color: var(--text); }
.st-btn.plus { background: var(--accent); color: var(--on-accent); }
.st-btn:disabled { opacity: .35; cursor: default; }
.point-pads { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pad { min-height: min(46vh, 380px); border: 0; border-radius: 24px; background: var(--surface-2); color: var(--text); cursor: pointer; padding: .8rem .5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pad:active:not(:disabled) { background: var(--active); color: var(--on-active); transform: scale(.98); }
.pad.serving { box-shadow: inset 0 -6px 0 var(--accent); }
.pad:disabled { cursor: default; }
.pad-name { font-weight: 700; font-size: .95rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; overflow-wrap: anywhere; }
.serve { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.serve i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-line); }
.pad-num { font: 200 clamp(4.5rem, 24vw, 7.5rem)/1 var(--font); font-variant-numeric: tabular-nums; }
.pad-hint { font-size: .8rem; color: var(--muted); font-weight: 600; }
.chips.stw .label { margin-right: .3rem; }
.center-chips { justify-content: center; }
.live-say { text-align: center; font-size: 1.35rem; margin: .2rem 0; }
.live-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.live-actions .grow { flex: 1 1 100%; }
.live-start { margin-top: 1rem; }
.live-go .icon { margin-right: .2rem; }

/* ---------- Hintergrund: Tenten-Logo senkrecht, angeschnitten, sehr dezent ----------
   Fixiertes Element (iOS-tauglich, kein background-attachment:fixed). Logo -90° gedreht (liest
   von unten nach oben), 135 % der Bildschirmhöhe lang -> oben und unten bündig angeschnitten;
   links bei 18 % der Breite, rechts ragt es aus dem Bild (der kleine Untertitel liegt außerhalb).
   Deckkraft 4–6 %, hell: dunkles Logo, dunkel: helles Logo. Leichter Parallax per JS (app.js). */
#bg-logo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#bg-logo .bg-logo-par { position: absolute; inset: 0; will-change: transform; }
#bg-logo img { position: absolute; top: 50%; width: 135vh; height: auto; max-width: none;
  left: calc(18vw + 46.2vh);  /* sichtbare linke Kante bei 18vw: Mitte = 18vw + halbe Logo-Höhe (135vh / 1.46 / 2) */
  transform: translate(-50%, -50%) rotate(-90deg); opacity: .045; -webkit-user-select: none; user-select: none; }
@supports (height: 1lvh) { #bg-logo img { width: 135lvh; left: calc(18vw + 46.2lvh); } }
@media (prefers-color-scheme: dark) { #bg-logo img { filter: invert(1); opacity: .06; } }
@media (min-width: 900px) { #bg-logo img { left: calc(55vw + 46.2vh); } }
@media (prefers-reduced-motion: reduce) { #bg-logo .bg-logo-par { will-change: auto; transform: none !important; } }



/* ---------- Cyan: dritte, sparsame Akzentfarbe – nur informativ (nie Aktion/Auswahl) ---------- */
.avatar:not(.guest) { color: var(--cyan); }
.bd-clock { color: var(--board-cyan); }

.day-flow { padding-left: .2rem; padding-right: .2rem; }

/* ---------- Uhrzeiten: eine chronologische Chip-Reihe (darf umbrechen), "später" am Ende ---------- */
.chips.time-chips { gap: .4rem; }
.chips.time-chips .chip.time { font-size: .9rem; min-width: 3.3rem; padding-left: .5rem; padding-right: .5rem; justify-content: center; font-variant-numeric: tabular-nums; }

/* ---------- Haupt-Buttons mit eigener Farbe: "Spiel eingeben" Pink, "Neue Abstimmung" Cyan ---------- */
.btn.cyan { background: var(--cyan); color: var(--on-cyan); font-weight: 600; }

/* ---------- Tafel "Wer kommt" kompakt (Wunsch: etwas kompakter) ----------
   Zeile 1: Name (+ Elo/Quote klein) … Status; Zeile 2: Tag · Zeit · Mitbringsel in einer Zeile.
   Offene stehen zusammengefasst in einer Zeile, aufklappbar. */
.bd-top { padding-bottom: .25rem; }
.bd-row { grid-template-columns: auto auto 1fr auto; grid-template-areas: "name name name status" "day time bring bring"; padding: .38rem 0; column-gap: .6rem; }
.bd-day, .bd-time { margin-top: .1rem; font-size: .86rem; }
.bd-bring { margin-top: .1rem; align-self: baseline; font-size: .76rem; }
.bd-day:empty + .bd-time:empty + .bd-bring { grid-column: 1 / -1; }
.bd-name .flap { font-size: .98rem; }
.bd-mini { font-size: .64rem; }
.bd-person { min-height: 32px; padding: .05rem 0; }
.bd-row.st-nein, .bd-row.st-offen { padding: .25rem 0; }
.bd-status { flex-direction: column; align-items: flex-end; gap: .15rem; align-self: start; }
.bd-status .btn-edit.board.icon-only { margin: -.35rem -.35rem -.35rem .3rem; }
.bd-row:has(.btn-edit.icon-only) .bd-status { flex-direction: row; align-items: center; }
.btn-edit.mini { min-height: 44px; padding: 0 .75rem 0 .2rem; gap: .35rem; font-size: .76rem; margin: -.2rem -.3rem -.4rem 0; background: transparent; }
.btn-edit.mini .pen { width: 26px; height: 26px; }
.bd-row.me.editable { padding-bottom: .15rem; }
/* großer Kopf etwas niedriger */
.bd-head { padding: 0 0 .5rem; }
.bd-num { font-size: 2.3rem; }
.bd-word { font-size: 1.1rem; }
.bd-goal { margin-top: .35rem; }
.bd-pips i { width: 11px; height: 11px; }
.bd-names { margin-top: .4rem; gap: .25rem; }
.bd-names span { padding: .25rem .45rem; font-size: .66rem; }
/* Offene zusammengefasst */
.bd-openrow { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.bd-open-names { flex: 1; min-width: 0; font: 500 .74rem/1.4 var(--font); color: var(--board-muted); }
.bd-open-names b { font: 700 .74rem/1 var(--font-mono); letter-spacing: .08em; color: var(--board-muted); margin-right: .3rem; }
.bd-more { flex: none; min-height: 44px; padding: 0 .8rem; border: 0; border-radius: 999px; background: var(--board-cell); color: var(--board-text); font: 600 .74rem/1 var(--font); cursor: pointer; }
.bd-more.block { display: block; width: 100%; margin: .35rem 0 .1rem; }
.bd-day .flap, .bd-time .flap { white-space: nowrap; }

/* ---------- Reiter-Leiste unten: Start · Spiel · [Spiel eingeben] · Rangliste · Mehr ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  max-width: 640px; margin: 0 auto; padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 52px; color: var(--muted);
  text-decoration: none; font-size: .66rem; font-weight: 600; letter-spacing: .02em; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.tab.on { color: var(--active); }
@media (prefers-color-scheme: light) { .tab.on { color: #c2186b; } }   /* Pink als Text auf Weiß: abgedunkelt für AA */
.tab-play { display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 0; background: none; padding: 0; cursor: pointer; color: var(--text); margin-top: -1.3rem; }
.tp-circle { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--board-cyan); color: #111111; box-shadow: var(--float-shadow), 0 0 18px rgba(0, 229, 255, .35); transition: transform .15s var(--ease); }   /* Neon-Blau (Cyan), in hell und dunkel gleich; Symbol fast schwarz ≈ 12:1 */
.tab-play:active .tp-circle { transform: scale(.94); }
.tp-label { font-size: .62rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.tab-play.on .tp-label { color: var(--cyan); }   /* hell: abgedunkeltes Cyan für lesbaren Text */
.tab-title { font-size: 2rem; margin: .2rem 0 -1.2rem; }

/* Start: weitere Abstimmungen als je eine Zeile */
.poll-more-list { display: grid; gap: .5rem; margin-top: -1.4rem; }
.poll-more { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k k" "t n" "v v"; gap: .05rem .8rem; align-items: center; text-align: left;
  border: 0; border-radius: 14px; background: var(--surface); padding: .7rem 1rem; min-height: 56px; cursor: pointer; color: var(--text); }
.pm-k { grid-area: k; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pm-t { grid-area: t; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-n { grid-area: n; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.poll-more.open { margin-bottom: 1rem; }

/* Mehr: Einstiege als ruhige Zeilen */
.more-links { display: grid; gap: .5rem; }
.more-link { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; border: 0; border-radius: 16px; background: var(--surface); padding: .9rem 1rem; min-height: 60px; cursor: pointer; color: var(--text); }
.more-link .icon { color: var(--muted); }
.more-link span { display: flex; flex-direction: column; }
.more-link b { font-weight: 600; }
.more-link small { color: var(--muted); font-size: .8rem; }
/* Start kompakter: Raus/Offen zusammengefasst, Elo/Quote neben dem Namen (kein Umbruch) */
.bd-open-names { display: grid; gap: .25rem; }
.bd-fold b { color: var(--board-muted); }
.bd-fold.out b { color: var(--board-out); }
.bd-name { flex-wrap: nowrap; min-width: 0; }
.bd-mini { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bd-name:has(.bd-by) { flex-wrap: wrap; }
.poll-day { padding-top: .5rem; padding-bottom: .5rem; }
.bd-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.bd-name { overflow: hidden; }
.pm-hot { color: var(--text); font-weight: 700; letter-spacing: .04em; }
.poll-more-list:first-child, .poll-new + .poll-more-list { margin-top: 0; }
.bd-day:empty + .bd-time { grid-column: 1 / 3; }
.tp-label { font-size: .56rem; }

/* ---------- Geführte Ergebnis-Eingabe (Spiel eintragen & Live-Spiel) ---------- */
.wizard { background: var(--surface); border-radius: 18px; padding: .9rem 1rem 1rem; margin: .4rem 0 .6rem; }
.wiz-title { margin: 0 0 .6rem; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--text); font-weight: 600; }
.wiz-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wiz-big { min-height: 68px; font-size: 1.1rem; border-radius: 18px; }
.wizard .chips.score .chip { min-width: 76px; min-height: 56px; font-size: 1.4rem; justify-content: center; border-radius: 16px; font-variant-numeric: tabular-nums; }
.chips.pts { gap: .4rem; }
.chip.pt { min-width: 52px; min-height: 52px; justify-content: center; font-size: 1.2rem; font-variant-numeric: tabular-nums; border-radius: 14px; }
.wiz-setwin { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.wiz-setwin .seg { max-width: 100%; }
.wiz-setwin .seg button { white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.wiz-extra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wiz-ex { font-size: 1.6rem; font-weight: 300; font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: center; }
.wiz-back { padding-left: 0; }
.wiz-sum { margin-top: 0; }
.mu-both { margin: .1rem 0 .3rem; }
.live-quick { margin-top: .2rem; }
.live-quick-btn { margin-top: .2rem; }

/* ---------- Doppel: Teams zusammenstellen ---------- */
.team-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .4rem; }
.team-box { background: var(--surface); border-radius: 16px; padding: .5rem; display: grid; gap: .35rem; }
.team-box.active { background: color-mix(in srgb, var(--active) 16%, var(--surface)); }   /* aktives Team: pinke Fläche, keine Outline */
.team-head { border: 0; background: none; text-align: left; font: 700 .78rem/1.2 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--text); padding: .3rem .2rem; min-height: 32px; cursor: pointer; }
.team-head small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--active); }
@media (prefers-color-scheme: light) { .team-head small { color: #c2186b; } }
.team-slot { display: flex; align-items: center; gap: .4rem; min-height: 44px; border: 0; border-radius: 12px; background: var(--bg); color: var(--muted); padding: .3rem .5rem; cursor: pointer; text-align: left; font-size: .9rem; min-width: 0; }
.team-slot.set { color: var(--text); font-weight: 600; background: var(--surface-2); }
.team-slot.set .icon { margin-left: auto; color: var(--muted); }

/* ---------- Punkte-Chips: absteigend ab Satzziel (11 … 0 bzw. 21 … 0), Raster, ≥ 44 px ---------- */
.wizard .chips.pts { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .35rem; }
.wizard .chip.pt { min-width: 0; min-height: 48px; padding: 0; flex-direction: column; gap: 0; line-height: 1.05; }
.wizard .chip.pt small { font-size: .56rem; color: var(--muted); font-weight: 600; }
.wizard .chip.pt.ot { background: var(--surface-3); }
.wizard .chip.pt.ot:last-child { grid-column: span 2; font-size: .85rem; }

/* ---------- Jetzt fordern / Nächste Spiele ---------- */
.next-games { display: grid; gap: .6rem; }
.ch-go { margin-top: 0; }
.ch-next { background: var(--surface); border-radius: 16px; padding: .8rem 1rem; }
.ch-next .label { margin-bottom: .2rem; }
.ch-next-pair { margin: 0 0 .5rem; font-size: 1.05rem; }
.ch-board { margin: 0; }
.ch-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--board-line); }
.ch-nr { font-weight: 700; color: var(--board-head); }
.ch-pair { min-width: 0; font-size: .86rem; font-weight: 700; }
.ch-pair small { display: block; font: 500 .66rem/1.35 var(--font); color: var(--board-muted); margin-top: .1rem; }
.ch-act { display: inline-flex; gap: .2rem; }
.ch-act .btn-edit.board.icon-only { background: none; }
.ch-act .btn-edit.board.icon-only .pen { background: var(--board-cell); color: var(--board-text); width: 30px; height: 30px; font-weight: 700; }
.ch-notices { display: grid; gap: .4rem; }
.ch-notice { flex-wrap: wrap; align-items: center; }
.ch-n-text { flex: 1 1 12rem; }
.ch-n-act { display: inline-flex; gap: .4rem; }
.lt-fordern { justify-self: start; }
.team-boxes.one { grid-template-columns: 1fr; }

/* "Good Game" beim Spielstart: kurz groß einblenden, antippen schließt */
.gg-splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, .72); cursor: pointer;
  animation: gg-fade 2.2s var(--ease) forwards; }
.gg-splash .marker { font-size: clamp(3rem, 16vw, 5.5rem); color: var(--board-cyan); text-shadow: 0 0 24px rgba(0, 229, 255, .45); transform: rotate(-4deg);
  animation: gg-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes gg-fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gg-pop { from { transform: rotate(-4deg) scale(.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gg-splash, .gg-splash .marker { animation: none; } }

/* Fordern-Sheet: Spielart und Gewinnsätze nicht quetschen – lieber in die nächste Zeile umbrechen */
.ch-opts { flex-wrap: wrap; }
.sheet .ch-opts > .seg { flex: 0 0 auto; }
.ch-opts .seg button { white-space: nowrap; }

/* Login-Code: groß, gut tippbar, Ziffern mit Abstand */
.code-input { font-size: 1.8rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

/* Abstimmung: deutlicher Status oben */
.vote-state { display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; border-radius: 16px; margin: .6rem 0 .9rem; background: var(--surface-2); }
.vote-state .vs-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; font-size: 1.2rem; }
.vote-state .vs-text { display: grid; gap: .1rem; min-width: 0; }
.vote-state .vs-text b { font-size: 1.05rem; }
.vote-state .vs-text small { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.vote-state.done .vs-icon { background: var(--accent); color: #111; }
.vote-state.done b { color: var(--text); }
.vote-state.open .vs-icon { background: var(--active); color: var(--on-active); }
.vote-state.out .vs-icon { background: var(--surface); color: var(--muted); }
/* Abstimmung: Wetter kompakt unten */
.wx-list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; }
.wx-list li { display: grid; grid-template-columns: 2.6rem 1.4rem 2.6rem 1fr; align-items: center; gap: .4rem; font-size: .9rem; }
.wx-list li.past { opacity: .4; }
.wx-list .wx-day { font-weight: 700; }
.wx-list .wx-r { color: var(--muted); text-align: right; }

/* Start: "Neue Abstimmung" unter den laufenden Abstimmungen; abgestimmt-Marke in der Zeile */
.poll-new-bottom { margin: .9rem 0 .4rem; }
.pm-ok { color: var(--accent); font-weight: 700; }
@media (prefers-color-scheme: light) { .pm-ok { color: #3a6b00; } }
.pm-arrow { display: inline-flex; vertical-align: -1px; margin-right: .35rem; }

.pm-v { grid-area: v; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.pm-n { white-space: nowrap; }
/* aufgeklappte Abstimmung direkt unter ihrer Zeile, ohne zweiten Klapp-Kopf */
.poll-more-list .block.bare.poll { margin-top: .6rem; }

/* Schließen-X überall in Neon-Pink */
.icon-btn.close-btn { color: var(--active); font-size: 1.7rem; font-weight: 300; }
.icon-btn.close-btn .icon { stroke-width: 2; }

/* Revanche-Karte */
.rematch { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 16px; background: var(--surface); margin: .4rem 0 1rem; }
.rematch .rm-text { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.rematch .rm-k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--active); }
.rematch b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rematch .rm-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; }

/* Warteliste: Kurzinfo unter der LIVE-Kachel + eigene Position */
.wl-hint { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "k me arrow" "t t arrow"; align-items: center; gap: .2rem .6rem;
  border: 0; cursor: pointer; text-align: left; color: var(--text); background: var(--surface); border-radius: 14px; padding: .65rem .9rem; margin: 0 0 .8rem; min-height: 48px; }
.wl-hint .wl-k { grid-area: k; } .wl-hint .wl-t { grid-area: t; } .wl-hint .wl-me-pill { grid-area: me; justify-self: start; } .wl-hint .wl-arrow { grid-area: arrow; }
.wl-hint .wl-k { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.wl-hint .wl-t { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-hint .wl-me-pill { font-size: .75rem; font-weight: 700; background: var(--active); color: var(--on-active); border-radius: 999px; padding: .15rem .5rem; white-space: nowrap; }
.wl-hint .wl-arrow { color: var(--muted); font-size: 1.2rem; }
.wl-me { margin: .5rem 0 0; font-weight: 600; color: var(--active); }
@media (prefers-color-scheme: light) { .wl-me { color: #c2186b; } }

/* Leiste unten: nur Icons, keine Beschriftung (Namen bleiben für Vorleseprogramme als aria-label) */
.tabbar .tab { min-height: 56px; }
.tabbar .tab.on .icon { stroke-width: 2; }
.tab-play { margin-top: -1.1rem; }

/* Überschriften in Systemschrift: etwas kleiner als zu Graffiti-Zeiten, damit sie nicht umbrechen */
.hero-title { font-size: clamp(1.45rem, 6.6vw, 1.75rem); line-height: 1.15; }
.poll-sub { font-size: 1.15rem; }
.tab-title { font-size: 1.7rem; }
.sheet-head h2.marker { font-size: 1.35rem; }
.gg-splash .marker { font-size: clamp(2.4rem, 12vw, 4rem); font-weight: 900; }

/* "Direkt loslegen" + Hinweis "Gegner noch offen" im Live-Spiel */
.go-now { margin: .2rem 0 1rem; min-height: 56px; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.live-open-slot { width: 100%; display: flex; align-items: center; gap: .8rem; border: 0; cursor: pointer; text-align: left; color: var(--text);
  background: var(--surface); border-radius: 14px; padding: .7rem .9rem; margin: 0 0 .8rem; }
.live-open-slot span:first-child { flex: 1; display: grid; gap: .1rem; }
.live-open-slot small { color: var(--muted); font-size: .82rem; }
.live-open-slot .los-btn { background: var(--active); color: var(--on-active); font-weight: 700; border-radius: 999px; padding: .5rem .8rem; white-space: nowrap; font-size: .9rem; }

/* ---------- Wochenrückblick als Karte mit Kennzahlen ---------- */
.review { background: var(--board-bg); color: var(--board-text); border-radius: 18px; padding: 1rem 1rem 1.1rem; }
.review header { display: flex; align-items: baseline; gap: .6rem; }
.review .rv-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--board-cyan); }
.review .rv-week { font: 800 1.25rem/1 var(--font); color: var(--board-text); }
.review .src { margin-left: auto; color: var(--board-muted); }
.rv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .8rem 0 .2rem; }
.rv-tile { border-radius: 12px; padding: .65rem .7rem; background: var(--board-cell); display: grid; gap: .15rem; min-width: 0; }
.rv-tile b { font: 800 1.35rem/1.1 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tile small { font-size: .74rem; color: var(--board-muted); line-height: 1.3; }
.rv-tile.lime { background: #c6ff00; } .rv-tile.lime b, .rv-tile.lime small { color: #111; }
.rv-tile.pink { background: #ff2e93; } .rv-tile.pink b, .rv-tile.pink small { color: #111; }
.rv-tile.cyan { background: #00e5ff; } .rv-tile.cyan b, .rv-tile.cyan small { color: #111; }
.rv-tile.plain b { color: var(--board-text); }
.review .rv-text { margin: .7rem 0 0; color: var(--board-text); line-height: 1.45; }
/* Gruppen-Kacheln in der Statistik: gleiche Optik, auf normaler Fläche */
.group-tiles .rv-tile.plain { background: var(--surface); } .group-tiles .rv-tile.plain b { color: var(--text); } .group-tiles .rv-tile.plain small { color: var(--muted); }
/* ---------- Letzte Spiele als Ergebnistafel ---------- */
.feed { gap: .55rem; }
.feed-item.match { background: var(--surface); border-radius: 14px; padding: .6rem .7rem; align-items: center; }
.fm-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.fm-side { display: grid; gap: .1rem; min-width: 0; color: var(--muted); }
.fm-side.b { text-align: right; justify-items: end; }
.fm-side.won { color: var(--text); font-weight: 700; }
.fm-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-d { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .02rem .4rem; justify-self: start; }
.fm-side.b .fm-d { justify-self: end; }
.fm-d.up { background: #c6ff00; color: #111; } .fm-d.down { background: #ff2e93; color: #111; }
.fm-score { display: inline-flex; align-items: center; gap: .15rem; font: 800 1.15rem/1 var(--font-mono, ui-monospace, monospace); background: var(--board-bg); color: var(--board-muted); border-radius: 8px; padding: .35rem .5rem; }
.fm-score b.w { color: #c6ff00; } .fm-score i { font-style: normal; opacity: .6; }
.fm-meta { display: block; margin-top: .3rem; color: var(--muted); font-size: .75rem; }
/* ---------- Head-to-Head mit Bilanz-Balken ---------- */
.h2h.bars2 li { display: grid; grid-template-columns: minmax(4.5rem, 1fr) 2fr auto; align-items: center; gap: .6rem; }
.h2h .h-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.h2h .h-bar i { display: block; min-width: 0; } .h2h .h-bar i.w { background: #c6ff00; } .h2h .h-bar i.l { background: #ff2e93; }
.h2h .h-score .w { color: var(--text); } .h2h .h-score .l { color: var(--muted); }
.review .rv-week { white-space: nowrap; }
.rv-tile b { white-space: normal; overflow-wrap: anywhere; font-size: 1.25rem; }

/* Live: Zuschauer übernimmt das Zählen; Korrektur −1 je Seite + großes Rückgängig */
.i-count { min-height: 56px; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin: .4rem 0 .3rem; }
.i-count small { font-weight: 500; opacity: .75; }
.pad-fix { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: .5rem; margin: .5rem 0 .6rem; }
.fix-btn { min-height: 52px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.fix-btn.undo { background: var(--active); color: var(--on-active); font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.fix-btn.undo span { font-size: 1.3rem; line-height: 1; }
.fix-btn:disabled { opacity: .35; cursor: default; }

/* Live: Ergebnis nach dem Speichern + große Revanche */
.done-view .lt-badge.done { background: var(--surface-2); color: var(--text); }
.done-view .lt-badge.done i { background: var(--accent); animation: none; }
.rematch-big { min-height: 64px; font-size: 1.15rem; margin: 1rem 0 .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.lb-setsum { font-weight: 700; color: var(--board-cyan); }

/* Head-to-Head: Legende, Spielzahl, farbige Bilanz */
.h2h-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: .82rem; color: var(--muted); margin: .2rem 0 .5rem; }
.h2h-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.h2h-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.h2h-legend .dot.w { background: #c6ff00; } .h2h-legend .dot.l { background: #ff2e93; }
.h2h.bars2 { gap: .55rem; }
.h2h .h-name { display: grid; line-height: 1.2; min-width: 0; }
.h2h .h-name small { font-size: .72rem; color: var(--muted); }
.h2h .h-score { font-weight: 800; font-size: 1rem; }
.h2h .h-score .w { color: var(--text); } .h2h .h-score .l { color: var(--text); }
.h2h .h-score i { font-style: normal; color: var(--muted); padding: 0 .1rem; }
@media (prefers-color-scheme: dark) { .h2h .h-score .w { color: #c6ff00; } .h2h .h-score .l { color: #ff2e93; } }
@media (prefers-color-scheme: light) { .h2h .h-score .w { color: #3a6b00; } .h2h .h-score .l { color: #c2186b; } }

/* Niederlagen neutral statt pink (11.11.2026): Grau, Siege bleiben gelbgrün */
.h2h .h-bar i.l { background: var(--muted); }
.h2h-legend .dot.l { background: var(--muted); }
.h2h .h-score .l { color: var(--muted) !important; }
.fm-d.down { background: var(--surface-3); color: var(--text); }

/* Siege in Neon-Blau (11.11.2026): Head-to-Head, Letzte Spiele, Form in Rangliste/Statistik */
.h2h .h-bar i.w, .h2h-legend .dot.w { background: #00e5ff; }
@media (prefers-color-scheme: dark) { .h2h .h-score .w { color: #00e5ff; } }
@media (prefers-color-scheme: light) { .h2h .h-score .w { color: #006577; } }
.fm-score b.w { color: #00e5ff; }
.fm-d.up { background: #00e5ff; color: #111; }
.rk-form i.w { background: #00e5ff; color: #111; }
.fd.w { background: #00e5ff; }

/* "Was bringst du mit?" als deutliche Karte + eigene Mitbringsel */
.bring { background: var(--surface); border-radius: 18px; padding: .9rem .9rem 1rem; margin: .8rem 0; display: grid; gap: .7rem; }
.bring-head { display: flex; align-items: center; gap: .6rem; }
.bring-head b { font-size: 1.1rem; font-weight: 800; }
.bring-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #00e5ff; color: #111; flex: 0 0 auto; }
.bring-n { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--muted); }
.bring .bring-group .label { margin-bottom: .3rem; }
.bring-own { display: flex; gap: .5rem; margin-top: .3rem; }
.bring-own input { flex: 1; min-width: 0; }
.bring-own .btn { min-width: 48px; display: inline-grid; place-items: center; }
.bring-own .btn { margin-top: 0; }
.bring-head b { flex: 1; min-width: 0; font-size: 1.05rem; line-height: 1.2; }
.bring-n { white-space: nowrap; }

/* Wetter: kompakte Ampel-Zeile oben im Treffen, große Karte ganz unten */
.wx-line { width: 100%; display: flex; align-items: center; gap: .6rem; border: 0; cursor: pointer; text-align: left; color: var(--text);
  background: var(--surface); border-radius: 14px; padding: .6rem .8rem; margin: .4rem 0 .9rem; min-height: 48px; }
.wx-line b { font-size: .95rem; }
.wx-line .wxl-facts { flex: 1; min-width: 0; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-line .wxl-arrow { color: var(--muted); font-size: 1.2rem; }
.wx-bottom { margin-top: 1.4rem; }
.wx-line.ampel { flex-wrap: nowrap; border-bottom: 0; padding: .6rem .8rem; margin: .4rem 0 .9rem; grid-column: auto; }
.wx-line .wxl-facts { white-space: normal; overflow: visible; line-height: 1.3; }

/* Treffen: Datum groß, Uhrzeit klein daneben */
.hero-date { font-weight: 300; letter-spacing: -.03em; }
.meet-when .meet-time { color: var(--text); font-size: 1.05rem; font-weight: 600; }

/* Live: Seiten tauschen (nur Anzeige) */
.swap-row { display: flex; justify-content: center; margin: .2rem 0 .5rem; }
.swap-btn { display: inline-flex; align-items: center; gap: .45rem; border: 0; cursor: pointer; background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: .55rem 1rem; min-height: 44px; font-weight: 700; font-size: .95rem; }
.swap-btn span { color: #00e5ff; font-size: 1.25rem; line-height: 1; }

/* "Uns fehlen noch Leute!" – Anstupsen direkt im Hinweis */
.notice .nudge-btn { margin-top: .6rem; display: inline-flex; align-items: center; gap: .4rem; }

/* Kompakte Wetter-Zeile: ohne Ampel-Lichter, Wetter-Symbol + farbiges Stichwort */
.wx-line.wx-gruen b { color: var(--accent-line); } .wx-line.wx-gelb b { color: var(--cyan); } .wx-line.wx-rot b { color: var(--active); }
@media (prefers-color-scheme: dark) { .wx-line.wx-gruen b { color: #c6ff00; } .wx-line.wx-gelb b { color: #00e5ff; } }
@media (prefers-color-scheme: light) { .wx-line.wx-rot b { color: #c2186b; } }
.wx-line .icon { flex: 0 0 auto; color: var(--text); }

/* Aufklapp-Kopf als deutliche Fläche mit Knopf rechts (z. B. Übersicht beim Treffen) */
.collapse.boxed > .col-head { background: var(--surface-2); border-radius: var(--radius); padding: .6rem .7rem .6rem .9rem; gap: .7rem; min-height: 48px; }
.collapse.boxed.open > .col-head { margin-bottom: .5rem; }
.col-cta { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.collapse.boxed.open .col-cta { background: var(--bg); color: var(--muted); }
/* Treffen absagen: klarer Knopf in Pink (Umriss), nicht nur ein grauer Link */
.btn.danger-outline { background: none; color: var(--danger); border: 1.5px solid var(--danger); margin-top: 1.2rem; gap: .4rem; }