/*
 * VereinsOps styles. Plain CSS (Tailwind is deferred: docs/reviews/B0.md, "Decisions").
 * B2 walkthrough W-3 (2026-10-13): app shell with sidebar (desktop) and tab bar (phone),
 * status tiles, calmer cards and buttons.
 *
 * Colours come only from the tokens below. The dark palette re-maps the same variables, under
 * [data-theme="dark"] and under prefers-color-scheme: dark (both blocks must stay identical).
 * tests/core/test_contrast.py checks every text/background pair in both palettes against
 * WCAG 2.1 AA (4.5:1) and that the two dark blocks are identical.
 */

/* Source Sans 3 (SIL OFL 1.1, static/vendor/source-sans-3/LICENSE), self-hosted (B18). */
@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../vendor/source-sans-3/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../vendor/source-sans-3/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --color-page: #f4f5f2;
  --color-surface: #ffffff;
  --color-surface-2: #eceeeb;
  --color-border: #d9ddd8;
  --color-border-strong: #7d8781;
  --color-text: #16201b;
  --color-muted: #4d5a53;
  --color-link: #1f5c46;
  --color-primary: #1f5c46;
  --color-on-primary: #ffffff;
  --color-accent-soft: #e3eee8;
  --color-on-accent-soft: #174634;
  --color-badge: #eceeeb;
  --color-on-badge: #2c3631;
  --color-ok-bg: #e3eee8;
  --color-ok: #174634;
  --color-warn-bg: #fbefd9;
  --color-warn: #7a4200;
  --color-error-bg: #fcebea;
  --color-error: #a1231b;
  /* B18 «Vereinsbuch»: 6 text sizes (factor 1.25 around 16 px), 7 spaces, 3 corner radii. */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9375rem;
  --text-display: 3rem; /* only the day on the «Als Nächstes» calendar sheet */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* dark palette (keep identical to the media block below) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #0f1512;
  --color-surface: #18211c;
  --color-surface-2: #222d27;
  --color-border: #34423a;
  --color-border-strong: #76857c;
  --color-text: #e8eeea;
  --color-muted: #a9b6ae;
  --color-link: #8fd1b2;
  --color-primary: #2e7a5d;
  --color-on-primary: #ffffff;
  --color-accent-soft: #1f3a2e;
  --color-on-accent-soft: #cdeadb;
  --color-badge: #222d27;
  --color-on-badge: #dfe7e2;
  --color-ok-bg: #1f3a2e;
  --color-ok: #a7dcc0;
  --color-warn-bg: #3a2a10;
  --color-warn: #f5c97a;
  --color-error-bg: #3a1518;
  --color-error: #fecaca;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-page: #0f1512;
    --color-surface: #18211c;
    --color-surface-2: #222d27;
    --color-border: #34423a;
    --color-border-strong: #76857c;
    --color-text: #e8eeea;
    --color-muted: #a9b6ae;
    --color-link: #8fd1b2;
    --color-primary: #2e7a5d;
    --color-on-primary: #ffffff;
    --color-accent-soft: #1f3a2e;
    --color-on-accent-soft: #cdeadb;
    --color-badge: #222d27;
    --color-on-badge: #dfe7e2;
    --color-ok-bg: #1f3a2e;
    --color-ok: #a7dcc0;
    --color-warn-bg: #3a2a10;
    --color-warn: #f5c97a;
    --color-error-bg: #3a1518;
    --color-error: #fecaca;
  }
}

/* --- base --------------------------------------------------------------------------------- */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: "Source Sans 3 Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-link); text-underline-offset: 0.15em; }
h1 { font-size: var(--text-2xl); line-height: 1.15; font-weight: 700; margin: 0 0 var(--space-5); }
h2 { font-size: var(--text-lg); line-height: 1.25; font-weight: 600; margin: 0 0 var(--space-3); }
h3 { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-2); }
:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; border-radius: var(--radius-sm); }
.icon { flex: none; vertical-align: -0.2em; }
.muted { color: var(--color-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--color-surface); padding: 0.5rem 1rem; }
/* Figures line up in columns: amounts, dates, counts (B18). */
table, .facts dd, .row-meta, .date-badge, .tile-value, .countdown, .badge, .status { font-variant-numeric: tabular-nums; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em; }

/* --- app shell ---------------------------------------------------------------------------- */

.shell { display: grid; grid-template-columns: 16.5rem 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1rem 0.75rem; background: var(--color-surface); border-right: 1px solid var(--color-border);
}
.brand {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem;
  font-weight: 700; color: var(--color-text); text-decoration: none;
}
.logo {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-on-primary); font-weight: 800; font-size: var(--text-base);
}
.verein-switch {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem; border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text); text-decoration: none;
}
.verein-switch:hover { outline: 1px solid var(--color-border); }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md);
  background: var(--color-accent-soft); color: var(--color-on-accent-soft); font-weight: 700; font-size: var(--text-sm);
}
.verein-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.verein-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verein-name small { color: var(--color-muted); }
.switch-icon { margin-left: auto; color: var(--color-muted); }
.pill {
  display: inline-block; margin: 0; padding: 0.15rem 0.6rem; border-radius: var(--radius-sm); font-size: var(--text-xs);
  font-weight: 600; background: var(--color-warn-bg); color: var(--color-warn);
}
.sidebar .pill-demo { align-self: flex-start; margin-left: 0.5rem; }
.appnav ul, .foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.appnav a, .foot-links a, .navbutton {
  display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font: inherit;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.appnav a:hover, .foot-links a:hover, .navbutton:hover { background: var(--color-surface-2); }
.appnav a[aria-current="page"] {
  background: var(--color-accent-soft); color: var(--color-on-accent-soft); font-weight: 600;
}
.nav-label {
  margin: var(--space-4) 0 var(--space-1); padding: 0 0.7rem; font-size: var(--text-xs); font-weight: 600;
  color: var(--color-muted);
}
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.me-line { display: flex; flex-direction: column; margin: 0 0 0.5rem; padding: 0 0.7rem; line-height: 1.3; }
.me-line small { color: var(--color-muted); }
.foot-links form { margin: 0; }

.page { width: 100%; max-width: 62rem; margin: 0 auto; padding: 2rem 2rem 4rem; }
.auth-header { padding: 1.25rem 1.5rem; }
.page-auth { max-width: 30rem; padding-top: 1rem; }
.page-auth > h1, .page-auth form, .page-auth > p { background: none; }

.tabbar { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar {
    position: sticky; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; padding: 0.6rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--color-border);
  }
  .sidebar .brand span:last-child { display: none; }
  .verein-switch { flex: 1; min-width: 0; padding: 0.4rem 0.6rem; }
  .verein-switch .avatar { width: 1.9rem; height: 1.9rem; }
  .sidebar .pill-demo { margin: 0; align-self: center; }
  .sidebar .orgnav, .sidebar-foot { display: none; }
  .sidebar .appnav:not(.orgnav) { width: 100%; }
  .sidebar .appnav:not(.orgnav) ul { display: flex; flex-wrap: wrap; gap: 0.15rem 0.25rem; }
  .page { padding: 1.25rem 1rem 6rem; }
  h1 { font-size: var(--text-xl); }
  .tabbar {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
  }
  .tabbar > a, .tabbar summary {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.4rem 0.2rem;
    border-radius: var(--radius-md); color: var(--color-muted); text-decoration: none; font-size: var(--text-xs); font-weight: 600;
    list-style: none; cursor: pointer;
  }
  .tabbar summary::-webkit-details-marker { display: none; }
  .tabbar > a[aria-current="page"] { color: var(--color-on-accent-soft); background: var(--color-accent-soft); }
  .tabbar .icon { width: 22px; height: 22px; }
  .more { position: relative; }
  .more-menu {
    position: absolute; right: 0.25rem; bottom: calc(100% + 0.5rem); width: 15rem; list-style: none; margin: 0;
    padding: 0.4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.18);
  }
  .more-menu a, .more-menu .navbutton {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-md);
    color: var(--color-text); text-decoration: none;
  }
  .more-menu form { margin: 0; }
}

/* --- page building blocks ----------------------------------------------------------------- */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head .eyebrow { margin: 0 0 0.25rem; color: var(--color-muted); }
.lead { color: var(--color-muted); max-width: 46rem; margin: -0.75rem 0 1.5rem; }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); margin: 0 0 var(--space-5);
}
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.card-head h2 { margin: 0; }
.card-head .muted { margin: 0; }
.narrow { max-width: 26rem; margin: 2rem auto; }
.list { list-style: none; padding: 0; margin: 0; }
.links { padding-left: 1.2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

/* status tiles (Wichtige Dokumente, Fristen) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.tile {
  display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tile-icon {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text);
}
.tile-title { margin: 0.25rem 0 0; font-weight: 600; }
.tile-body { margin: 0; color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.tile-body a { font-weight: 600; }
.tile-actions { margin-top: auto; padding-top: 0.4rem; }
.tile.is-missing { border-style: dashed; background: var(--color-page); }
.tile-value { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
.tile-value.is-empty { font-size: var(--text-base); font-weight: 500; color: var(--color-muted); }
.tile.is-soon { background: var(--color-page); }

.status {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.status .icon { width: 15px; height: 15px; }
.status-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.status-missing { background: var(--color-warn-bg); color: var(--color-warn); }
.status-info { background: var(--color-surface-2); color: var(--color-text); }
.status-neutral { background: var(--color-surface-2); color: var(--color-muted); }
.progress-line { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--color-muted); }
.meter { flex: 1; max-width: 10rem; height: 0.4rem; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--color-primary); }

/* document hero (Statuten page) */
.doc-hero { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.doc-hero .tile-icon { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); }
.doc-hero .icon { width: 26px; height: 26px; }
.doc-hero-text { flex: 1; min-width: 12rem; }
.doc-hero-text h2 { margin: 0 0 0.15rem; }
.doc-hero-text p { margin: 0; }

/* rows (documents list, Meine Vereine) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--color-border); }
.row {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.25rem; color: var(--color-text); text-decoration: none;
}
a.row:hover .row-title { text-decoration: underline; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.row-meta { color: var(--color-muted); font-size: var(--text-sm); }
.row .chevron { color: var(--color-muted); }
.row-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.verein-card { padding: 0.5rem 1rem; }
.verein-card .avatar { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); font-size: var(--text-base); }
.add-card {
  display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); color: var(--color-link); text-decoration: none; font-weight: 600; background: var(--color-surface);
}

/* key facts */
.facts { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 0.6rem 1.25rem; margin: 0; }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; gap: 0.1rem; } .facts dd { margin-bottom: 0.6rem; } }
.iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-base); letter-spacing: 0.02em; }
.bank + .bank { border-top: 1px solid var(--color-border); margin-top: 1.25rem; padding-top: 1.25rem; }
.bank h3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* --- controls ----------------------------------------------------------------------------- */

label { display: block; margin-top: 0.85rem; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 0.6rem 0.7rem; margin-top: 0.3rem; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus { border-color: var(--color-link); }
textarea { font-family: inherit; }
input[type="checkbox"] { width: auto; margin: 0; }
input[type="checkbox"] + label { display: inline; margin-left: 0.5rem; }
.helptext { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: 0.2rem; }
form p { margin: 0 0 0.25rem; }
button { font: inherit; cursor: pointer; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  text-decoration: none; font: inherit; font-weight: 600;
}
button:hover, .button:hover { background: var(--color-surface-2); }
.button.primary, button.primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.button.primary:hover, button.primary:hover { border-color: var(--color-primary); filter: brightness(1.08); }
button.primary { margin-top: 1rem; }
.actions button.primary, .tile-actions button.primary, .card-head button.primary { margin-top: 0; }
button.link { min-height: 0; background: none; border: 0; padding: 0; color: var(--color-link); text-decoration: underline; font-weight: 400; }
.button.small, button.small { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 0; }
form.inline label { display: inline; margin: 0; font-weight: 400; }
form.inline input, form.inline select { width: auto; margin: 0; }
.narrow-form { max-width: 40rem; }
.narrow-form input, .narrow-form select, .narrow-form textarea { width: 100%; }
fieldset.rule { border: 1px solid var(--color-border); }
fieldset.rule legend { font-weight: 700; padding: 0 0.25rem; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.25rem 1rem; }
details > summary { cursor: pointer; font-weight: 600; }
details.card > summary { list-style-position: inside; }

/* --- feedback ----------------------------------------------------------------------------- */

.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.message, .notice {
  background: var(--color-accent-soft); color: var(--color-on-accent-soft);
  padding: 0.75rem 1rem; border-radius: var(--radius-md); margin: 0 0 0.6rem;
}
.message.success { background: var(--color-ok-bg); color: var(--color-ok); }
.notice.warn { background: var(--color-warn-bg); color: var(--color-warn); }
.message.error, .error { background: var(--color-error-bg); color: var(--color-error); }
.error { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); }
.errorlist { list-style: none; margin: 0.3rem 0 0; padding: 0; color: var(--color-error); }
.badge {
  display: inline-block; padding: 0.05rem 0.55rem; border-radius: var(--radius-sm);
  background: var(--color-badge); color: var(--color-on-badge); font-size: var(--text-xs); font-weight: 600;
}

/* --- tables ------------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table thead th { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
@media (max-width: 640px) {
  .table thead { display: none; }
  .table td { display: block; border: 0; padding: 0.25rem 0; }
  .table tr { border-bottom: 1px solid var(--color-border); display: block; padding: 0.5rem 0; }
}

@media print {
  .sidebar, .tabbar, .messages, .actions, .demo-banner { display: none; }
  .shell { display: block; }
}

/* document pages */
.eyebrow { margin: 0 0 0.5rem; color: var(--color-muted); font-size: var(--text-sm); }
.doc-title { font-size: var(--text-xl); margin: 0 0 0.2rem; }
.rows > li.row { flex-wrap: wrap; }
.more-docs { margin-top: 1rem; }
.more-docs > summary { color: var(--color-link); font-weight: 600; }

/* --- polish after the first screenshots (W-3) --------------------------------------------- */
.navbutton { justify-content: flex-start; font-weight: 400; min-height: 0; border: 0; }
.navbutton:hover { border-color: transparent; }
.doc-hero > .tile-icon .icon { width: 26px; height: 26px; }
.doc-hero .icon { width: 20px; height: 20px; }
.doc-hero .status .icon { width: 15px; height: 15px; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.tile-body .iban { font-size: var(--text-sm); white-space: nowrap; }
/* allauth pages (login, sign-up, codes): one card, a clear primary button */
.page-auth {
  margin-top: 1rem; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.page-auth button[type="submit"] {
  width: 100%; margin-top: 1rem; background: var(--color-primary); color: var(--color-on-primary);
}
.page-auth button[type="submit"].link, .page-auth .link { width: auto; background: none; color: var(--color-link); }
@media (max-width: 900px) {
  .sidebar .brand { display: none; }
  .verein-name small { display: none; }
  .sidebar .pill-demo { white-space: nowrap; }
  .page-auth { margin: 0.5rem 1rem 2rem; width: auto; }
}
/* people and access (B1 page) */
.person { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0; }
.rows > li.person + li.person { border-top: 1px solid var(--color-border); }
.person .row-text { min-width: 12rem; }
.person details { flex-basis: 100%; }
.person details > summary { color: var(--color-link); font-weight: 600; }
.person-actions { display: grid; gap: 0.75rem; margin-top: 0.75rem; padding: 0.85rem; border-radius: var(--radius-md); background: var(--color-surface-2); }
.tile-body .iban { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-xs); }
.narrow-form input[type="checkbox"], .person input[type="checkbox"] { width: auto; }
@media (max-width: 900px) {
  .pill-long { display: none; }
  .sidebar.no-org .sidebar-foot { display: block; width: 100%; margin: 0; padding-top: 0.25rem; border-top: 0; }
  .sidebar.no-org .me-line { display: none; }
  .sidebar.no-org .foot-links { grid-auto-flow: column; justify-content: start; }
  .sidebar.no-org .appnav:not(.orgnav) ul { flex-wrap: wrap; }
}

/* --- B5a: members and board --------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.chip span { color: var(--color-muted); font-weight: 500; }
.chip small { color: var(--color-muted); font-weight: 400; }
.chip.is-on { background: var(--color-accent-soft); color: var(--color-on-accent-soft); border-color: transparent; }
.chip.is-on span, .chip.is-on small { color: var(--color-on-accent-soft); }
.chip-link { color: var(--color-link); }
.search { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.search input { margin: 0; }
.avatar-sm { width: 1.6rem; height: 1.6rem; border-radius: var(--radius-sm); font-size: var(--text-xs); }
.avatar-lg { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); font-size: var(--text-lg); }
.form-section { margin: 1.25rem 0 0; font-size: var(--text-base); }
.grid-2.tight { gap: 0.5rem; }
input.num { width: 4.5rem; display: inline-block; }
form.grow { flex: 1; }
.steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; padding: 0.3rem 0.75rem; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.steps li::before { content: counter(step) ". "; }
.steps li.is-on { background: var(--color-accent-soft); color: var(--color-on-accent-soft); }
.office-row { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0.75rem; padding: 0.75rem 0; }
.rows > li.office-row + li.office-row { border-top: 1px solid var(--color-border); }
.office-name { font-weight: 600; padding-top: 0.55rem; }
.office-name a { color: var(--color-text); text-decoration: none; }
.office-holders .row { padding: 0.35rem 0; }
.office-holders .row-meta .status { font-size: var(--text-xs); }
.more-link { font-size: var(--text-sm); }
.vacancy { gap: 0.5rem; }
@media (max-width: 700px) { .office-row { grid-template-columns: 1fr; gap: 0.25rem; } .office-name { padding: 0; } }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem; }
.who {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 0.85rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
}
.who:hover { border-color: var(--color-link); }
.who-office { color: var(--color-muted); font-size: var(--text-sm); }
.who-person { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.who .status { align-self: flex-start; }
.office-holders .row.holder { flex-wrap: wrap; }
.office-holders .row.holder .row-text { flex: 1 1 14rem; }
@media (max-width: 700px) {
  .office-holders .row.holder .row-chips { flex-basis: 100%; justify-content: flex-start; padding-left: 2.85rem; }
}

/* --- B6: meetings ------------------------------------------------------------------------- */
.steps-links li { padding: 0; }
.steps-links li a { display: block; padding: 0.3rem 0.75rem; color: inherit; text-decoration: none; }
.steps-links li.is-done { background: var(--color-accent-soft); color: var(--color-on-accent-soft); }
.agenda { padding-left: 1.4rem; margin: 0; } .agenda li { margin: 0.4rem 0; }
.agenda-edit { list-style: decimal; padding-left: 1.6rem; margin: 0 0 1rem; }
.agenda-edit > li { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.agenda-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 0.5rem; align-items: center; }
.agenda-row input, .agenda-row textarea { margin: 0; }
.agenda-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.inline-check { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-weight: 400; }
@media (max-width: 700px) { .agenda-row { grid-template-columns: 1fr; } }
.generated { background: var(--color-surface-2); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.generated ol { margin: 0.25rem 0 0; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.seg { margin: 0; font-weight: 500; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: var(--text-sm);
}
.seg input:checked + span { background: var(--color-accent-soft); color: var(--color-on-accent-soft); border-color: transparent; font-weight: 600; }
.seg input:focus-visible + span { outline: 3px solid var(--color-link); outline-offset: 2px; }
.attendance-row { flex-wrap: wrap; }
.attendance-row .row-text { flex: 1 1 12rem; }
.count-line { margin: 0 0 0.4rem; }
.next-date { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; margin: 0 0 0.6rem; }
.next-meeting .steps { margin: 0.75rem 0; }
.sheet td.sign { width: 35%; }
.sheet td { height: 2.2rem; }
@media print {
  .page { max-width: none; padding: 0; } .eyebrow, .actions { display: none; }
  .sheet th, .sheet td { border: 1px solid #999; }
}
.steps-links li::before { content: none; }
.steps-links li a::before { content: counter(step) ". "; }

/* --- B7: Protokoll ------------------------------------------------------------------------ */
.outcome legend { font-size: var(--text-base); }
.outcome .f-resolution, .outcome .f-election { display: none; margin-top: 0.75rem; }
.outcome:has(input[value="resolution"]:checked) .f-resolution { display: block; }
.outcome:has(input[value="election"]:checked) .f-election { display: block; }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.25rem 0.75rem; }
.vote-grid input.num { width: 100%; }
.result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }
.election-table select, .election-table input { margin: 0.15rem 0; }
.election-table input.num { width: 4.5rem; display: inline-block; }
.small { font-size: var(--text-sm); }
.sticky-actions { position: sticky; bottom: 0; background: var(--color-page); padding: 0.75rem 0; z-index: 5; }
@media (max-width: 900px) { .sticky-actions { bottom: 4.2rem; } }
.register-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.2rem; }

/* --- B3: Aufgaben, Checkliste, Übersicht ----------------------------------------------- */
.tabs { margin: 0 0 1rem; }
.tabs .seg { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.tabs .seg.is-on { background: var(--color-accent-soft); color: var(--color-on-accent-soft); border-color: transparent; font-weight: 600; }
.filter { margin-bottom: 1rem; align-items: center; }
.date-badge { min-width: 3.2rem; text-align: center; padding: 0.3rem 0.4rem; border-radius: var(--radius-md); background: var(--color-badge); color: var(--color-on-badge); font-size: var(--text-xs); line-height: 1.2; }
.date-badge strong { display: block; font-size: var(--text-base); }
.facts { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.4rem 1rem; margin: 0 0 0.5rem; }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; }
.history { margin: 0; padding-left: 1.2rem; }
.history li { margin: 0.25rem 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; }
.choice-grid form { margin: 0; }
.choice { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; height: 100%; text-align: left; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); font-weight: 400; }
.choice strong { font-size: var(--text-base); }
.choice:hover { border-color: var(--color-primary); }
.tick { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ok); flex: none; }
.tick.is-on, .is-done .tick { background: var(--color-ok-bg); border-color: transparent; }
.checklist .is-done .row-title { color: var(--color-muted); text-decoration: line-through; }
.checklist .order { gap: 0.25rem; }
.checklist form { margin: 0; }
.dismiss summary { cursor: pointer; color: var(--color-link); }
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { margin-top: 0.4rem; }
  .checklist .order .small { padding: 0.2rem 0.45rem; }
  .checklist .row { flex-wrap: wrap; }
  .checklist .row-text { flex: 1 1 calc(100% - 2.6rem); }
  .checklist .order { width: 100%; justify-content: flex-end; }
}

/* --- B4: the bell and the email preview --------------------------------------------------- */
.bell { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; margin: 0.25rem 0 0.5rem; padding: 0.4rem 0.6rem; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.bell:hover { outline: 1px solid var(--color-border); }
.bell-count { min-width: 1.2rem; padding: 0 0.4rem; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.bell-label { font-size: var(--text-sm); }
@media (max-width: 900px) { .bell { margin: 0; align-self: center; } .bell-label { display: none; } }
.email-preview { white-space: pre-wrap; font-family: inherit; background: var(--color-surface-2); color: var(--color-text); padding: 0.8rem 1rem; border-radius: var(--radius-md); margin: 0.5rem 0; }
.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.narrow { max-width: 34rem; margin: 2rem auto; }
@media (max-width: 640px) { .status { white-space: normal; max-width: 100%; } }

/* --- W-B4-1: offices to choose from ------------------------------------------------------- */
.small-head { font-size: var(--text-sm); margin: 0.8rem 0 0.3rem; color: var(--color-muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.chip-row form { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; min-height: 0; border-radius: var(--radius-sm); border: 1px dashed var(--color-border); background: var(--color-surface); color: var(--color-text); font-weight: 500; font-size: var(--text-sm); }
.chip:hover { border-color: var(--color-primary); }
.setup-office .edit summary { cursor: pointer; color: var(--color-link); }
.setup-office { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.25rem 1rem; }
.setup-office > form.inline { margin: 0; justify-self: end; }
.setup-office .edit[open] { grid-column: 1 / -1; order: 3; }
.setup-office .short { display: none; }
.setup-office .row-title { overflow-wrap: normal; hyphens: auto; }
@media (max-width: 640px) { .setup-office .long { display: none; } .setup-office .short { display: inline; } .setup-office { gap: 0.25rem 0.6rem; } }

/* --- B12: Finanzen ------------------------------------------------------------------------- */
.amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.amount.is-in { color: var(--color-ok); }
.money-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.money-table td, .money-table th { padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); text-align: left; }
.money-table td:not(:first-child), .money-table th:not(:first-child) { text-align: right; }
.money-table tr.total td { font-weight: 700; border-bottom: 0; }
.tile-link { display: block; color: inherit; text-decoration: none; }
.tile.is-on { outline: 2px solid var(--color-primary); }
.fee-row { flex-wrap: wrap; }
.choice-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.check input[type="radio"], .check input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.check { justify-content: flex-start; }

/* --- B15: modules ----------------------------------------------------------------------------- */
.module-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem 1rem; }
.module-row form { margin: 0; }
.locked-note { max-width: 16rem; font-size: var(--text-sm); color: var(--color-muted); text-align: right; }
@media (max-width: 640px) { .module-row { grid-template-columns: 1fr auto; } .module-row .locked-note, .module-row form { grid-column: 1 / -1; justify-self: start; text-align: left; max-width: none; } }

/* B16: Einstieg. The "?" next to a page title, empty states, the Hilfe page and the Rundgang. */
.title-line { position: relative; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.title-line h1 { margin: 0; }
.page-help summary {
  list-style: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-link); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.page-help summary::-webkit-details-marker { display: none; }
.page-help summary:hover, .page-help[open] summary { background: var(--color-accent-soft); color: var(--color-on-accent-soft); border-color: transparent; }
.page-help-body {
  position: absolute; left: 0; top: calc(100% + 0.4rem); z-index: 20; width: min(30rem, calc(100vw - 2rem));
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 0.75rem 1rem; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  font-size: var(--text-base); font-weight: 400;
}
.page-help-body p { margin: 0 0 0.4rem; }
.page-help-body p:last-child { margin: 0; font-size: var(--text-sm); }
li.empty-state { list-style: none; padding: 1rem 0 0.25rem; }
.empty-state p { margin: 0 0 0.75rem; max-width: 40rem; color: var(--color-muted); }
.empty-state strong { color: var(--color-text); }
.empty-state .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.help-list { margin: 0; display: grid; gap: 0.9rem; }
.help-list dt { font-weight: 600; }
.help-list dd { margin: 0.15rem 0 0; color: var(--color-muted); max-width: 46rem; }
.tour {
  position: fixed; z-index: 60; width: min(22rem, calc(100vw - 2rem));
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem; box-shadow: 0 16px 40px rgb(0 0 0 / 0.22);
}
.tour[hidden], .tour [hidden] { display: none; }
.tour.is-centred { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tour.is-pointing::before {
  content: ""; position: absolute; left: -0.45rem; top: var(--arrow-top, 2rem); width: 0.8rem; height: 0.8rem;
  background: var(--color-surface); border-left: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  transform: translateY(-50%) rotate(45deg);
}
.tour-count { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.tour-title { margin: 0.2rem 0 0.4rem; font-size: var(--text-lg); }
.tour-text { margin: 0 0 1rem; color: var(--color-muted); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; }
.tour-nav { display: flex; gap: 0.5rem; }
.tour button.primary { margin-top: 0; }
.tour-target { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-md); position: relative; z-index: 55; }
@media (max-width: 900px) { .tour.is-centred { top: auto; bottom: 5rem; transform: translateX(-50%); } }
.appnav .nav-help { margin-top: 0.75rem; }

/* B5b: Zur Übernahme */
.takeover-row { align-items: center; }
.takeover-row .row-text { color: inherit; text-decoration: none; }
.takeover-row .row-text:hover .row-title { text-decoration: underline; }
.takeover-row form { margin: 0; }
.takeover-row button { margin: 0; }
.takeover > form button.primary { margin-top: 0.75rem; }
.office-note { display: block; color: var(--color-muted); font-size: var(--text-sm); }
/* B5b review: long document titles in the Traktanden tools must not widen the page on phones. */
.agenda-tools { min-width: 0; max-width: 100%; }
.agenda-tools form.inline { flex-wrap: wrap; max-width: 100%; }
.agenda-tools select { min-width: 0; max-width: 100%; }

/* Vorstand page (B5b review): the person column starts at the same place in every row; on
   phones the office name sits above its holders and the buttons go under the name. */
.office-holders { min-width: 0; }
.office-holders .row.holder { align-items: flex-start; }
.office-holders .row.holder .row-chips { align-self: center; }
@media (max-width: 700px) {
  .office-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .office-name { padding: 0; font-size: var(--text-base); }
  .office-holders .row.holder .row-chips { padding-left: 2.85rem; flex-wrap: nowrap; }
}
/* A title with its "?" outside a page header keeps the usual space below (B16, review). */
.page > .title-line { margin: 0 0 1.5rem; }

/* B17: Rückmeldung */
fieldset.kinds { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
fieldset.kinds legend { font-weight: 600; margin-bottom: 0.4rem; }
.shot { margin: 1rem 0; }
.shot img, img.feedback-shot { display: block; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
p.pre { white-space: normal; overflow-wrap: anywhere; }

/* B1b: Konto-Wiederherstellung */
.recovery-link { margin-top: 1rem; text-align: center; }
ol.steps-plain { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--color-muted); }
ol.steps-plain li { margin-bottom: 0.25rem; }
.upload { margin: 0.5rem 0 1rem; } .upload input[type=file] { width: 100%; }
fieldset.kinds-stacked { flex-direction: column; }
.choice-note { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }

/* B8a: Übergabe-Mappe */
.handover h2 { margin-top: 1.5rem; } .handover h2:first-child { margin-top: 0; }
table.report { width: 100%; border-collapse: collapse; margin: 0.25rem 0 0.5rem; font-size: var(--text-base); }
table.report th, table.report td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem 0.35rem 0; border-bottom: 1px solid var(--color-border); }
table.report th { color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); }
@media (max-width: 640px) { table.report { font-size: var(--text-sm); } }

/* B8b: the countdown while a Verein is being deleted */
.countdown { font-size: var(--text-xl); margin: 0 0 0.5rem; font-variant-numeric: tabular-nums; }

/* --- B18 «Vereinsbuch»: navigation groups, phone menu groups ----------------------------- */
.orgnav .nav-label { margin: var(--space-4) 0 var(--space-1); }
.more-menu { max-height: calc(100vh - 6rem); overflow-y: auto; }
.more-menu .more-label {
  padding: var(--space-3) 0.7rem var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted);
}
.more-menu .more-label:first-child { padding-top: var(--space-1); }

/* --- B18 «Vereinsbuch»: «Als Nächstes» (the closest deadline as a calendar sheet) ----------- */
.next-up-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.leaf {
  flex: 0 0 7rem; display: flex; flex-direction: column; text-align: center; overflow: hidden;
  border: 2px solid var(--color-text); border-radius: var(--radius-md); background: var(--color-surface);
}
.leaf-month { padding: var(--space-1) 0; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: 600; }
.leaf-day { padding: var(--space-2) 0 0; font-size: var(--text-display); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.leaf-weekday { padding: var(--space-1) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.next-up-text { flex: 1 1 18rem; min-width: 0; }
.next-up-label { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.next-up-title { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.next-up-why { margin: 0; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.next-up-actions { margin: 0; }
.next-up-later { margin: var(--space-5) 0 var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-muted); }
.next-up-all { margin: var(--space-3) 0 0; }
@media (max-width: 640px) {
  .leaf { flex-basis: 4.75rem; }
  .leaf-day { font-size: var(--text-2xl); }
  .leaf-weekday { display: none; }
  .next-up-main { gap: var(--space-4); align-items: flex-start; }
  .next-up-title { font-size: var(--text-lg); }
  .next-up-actions { flex-basis: 100%; }
  .next-up-actions .button { width: 100%; }
}

/* --- B18: the shared building blocks of the design board -------------------------------- */
/* Who: a person next to the reason, not chained with « · ». */
.meta-who { display: inline-flex; align-items: center; gap: var(--space-1); }
.meta-who .icon { width: 14px; height: 14px; }
.row-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
/* Status chips carry a symbol as well as a colour (never colour alone). */
.status-ok:not(:has(.icon))::before { content: "✓" / ""; font-weight: 700; }
.status-missing:not(:has(.icon))::before { content: "!" / ""; font-weight: 700; }
.status-late::before { content: "×" / ""; font-weight: 700; }
.status-late { background: var(--color-error-bg); color: var(--color-error); }
.status-final { background: var(--color-text); color: var(--color-surface); }
/* The fourth button kind: destructive actions. */
.button.danger, button.danger { border-color: var(--color-error); color: var(--color-error); background: var(--color-surface); }
.button.danger:hover, button.danger:hover { background: var(--color-error-bg); }
/* Notices: a symbol, then the sentence. */
.notice.warn, .message.error { display: flex; gap: var(--space-3); align-items: flex-start; }
.notice.warn::before, .message.error::before {
  content: "!" / ""; flex: none; display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem;
  border: 2px solid currentColor; border-radius: 999px; font-weight: 700; font-size: var(--text-sm); line-height: 1;
}
/* Fields: label, hint, field, error, always in this order; errors carry a symbol. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { min-height: 2.75rem; }
.errorlist li::before { content: "× " / ""; font-weight: 700; }
.errorlist { font-weight: 600; }
input[aria-invalid="true"], .errorlist + p input, .errorlist + input { border: 2px solid var(--color-error); }
/* Facts in a row's second line: separate parts with a thin line between, never « · ». */
.row-meta { column-gap: var(--space-3); }
.meta-part:empty { display: none; }
.meta-part + .meta-part, .meta-part + .meta-who { padding-left: var(--space-3); border-left: 1px solid var(--color-border); }

/* --- B18: sidebar head and foot ---------------------------------------------------------- */
.verein-switch { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.verein-switch:hover { outline: 0; background: var(--color-surface-2); }
.verein-switch .avatar { background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-md); }
.orgnav .nav-help { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.orgnav .nav-help a { justify-content: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-2); border: 1px solid var(--color-border); font-size: var(--text-sm); }
.orgnav .nav-help .icon { width: 16px; height: 16px; }
.me-line { flex-direction: row; align-items: center; gap: var(--space-3); }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-round { width: 2rem; height: 2rem; border-radius: 999px; font-size: var(--text-xs); background: var(--color-surface-2); color: var(--color-text); }

/* --- B18: page header: back link above the title ---------------------------------------- */
.eyebrow { font-size: var(--text-sm); }
.eyebrow a { font-weight: 600; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.eyebrow > a:first-child::before { content: "← " / ""; }
.page-head .lead, .page-head > div > .muted { margin: var(--space-1) 0 0; }
@media (max-width: 640px) {
  .row-meta, .next-up-why { flex-direction: column; align-items: flex-start; }
  .meta-part + .meta-part, .meta-part + .meta-who { padding-left: 0; border-left: 0; }
}

/* --- B18: date and time fields in Swiss form (TT.MM.JJJJ, 24 hours) --------------------- */
input[data-date] { max-width: 9.5rem; font-variant-numeric: tabular-nums; }
input[data-time] { max-width: 6rem; font-variant-numeric: tabular-nums; }
.date-field { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); margin-top: 0.3rem; }
.date-field input[data-date] { margin-top: 0; }
.date-pick { width: 2.75rem; padding: 0; flex: none; }
.date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
form.inline .date-field { margin-top: 0; }

/* --- B18: «Zuletzt im Vereinsbuch» --------------------------------------------------------- */
.table-box { overflow-x: auto; }
.table.book td { vertical-align: middle; }
.book-date { white-space: nowrap; color: var(--color-muted); }
.book-title { color: var(--color-text); font-weight: 600; text-decoration: none; }
.book-title:hover { text-decoration: underline; }
.book-kind { text-align: right; }
@media (max-width: 640px) {
  .table.book tr { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); }
  .table.book .book-date { grid-column: 1; }
  .table.book .book-kind { grid-column: 2; grid-row: 1; }
  .table.book td:nth-child(2), .table.book td:nth-child(3) { grid-column: 1 / -1; }
}

/* --- B18: «Wer macht was» as a compact list (role, person, since) ------------------------- */
.who-list { margin: 0; }
.who-row { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
@media (min-width: 900px) { .who-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }
.who-row dt { color: var(--color-muted); }
.who-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.who-row .who-person { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.who-since { font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.who-more { margin: var(--space-3) 0 0; }
@media (max-width: 640px) { .who-row { grid-template-columns: 1fr; gap: var(--space-1); } }
.who-since { white-space: nowrap; }
.who-row .who-person { flex-wrap: wrap; }

/* --- B18: Darstellung (light, dark, automatic) ----------------------------------------- */
.theme-toggle [data-theme-label] { font-weight: 600; }

/* --- B18: the shorter menu: «Mein Konto» under the name, «Einstellungen» for the Verein ---- */
a.me-line { color: var(--color-text); text-decoration: none; padding: var(--space-2) 0.7rem; margin: 0 0 var(--space-2); border-radius: var(--radius-md); }
a.me-line:hover { background: var(--color-surface-2); }
a.me-line[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-on-accent-soft); }
a.me-line .chevron { margin-left: auto; color: var(--color-muted); }
.theme-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.theme-form fieldset { border: 0; padding: 0; margin: 0; }
.theme-form .seg span { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 var(--space-4); }
.section-title { margin: var(--space-6) 0 var(--space-3); }
.late-ok { margin: var(--space-4) 0 0; }
.late-ok label { margin: 0; }