body:has(> .zugang) { display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.zugang { inline-size: min(100%, 26rem); display: grid; gap: var(--space-4); padding: var(--space-8) var(--space-6); }
.zugang[data-breit] { inline-size: min(100%, 44rem); }
.zugang:has(> .zugang-film) { inline-size: min(100%, 64rem); }
.zugang-film { inline-size: 100%; block-size: auto; border-radius: var(--radius); background: var(--bg-subtle); }
.zugang h1 { font-size: 1.5rem; line-height: 1.25; }
.zugang h2 { font-size: 1.1rem; }
.zugang p:not(.brand, .warnung, .zugang-zahl) { color: var(--text-muted); line-height: 1.6; }
.zugang :is(p:has(> .button), form) { display: grid; gap: var(--space-2); }
.zugang .button { inline-size: 100%; }
.zugang label[for] { color: var(--text); font-weight: var(--weight-medium); }
.zugang code { overflow-wrap: anywhere; }
.warnung { color: var(--text-danger); }
p.warnung { padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--bg-danger); }
.weg { font-size: 13px; }
.zugang-fuss { padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); font-size: 13px; }
.zugang-teil { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.zugang-liste { display: grid; gap: var(--space-2); }
.zugang-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.zugang-liste span { display: grid; gap: 2px; }
.zugang-liste small { color: var(--text-muted); }
.zugang-liste .button { inline-size: auto; }
.zugang-wahl { display: grid; justify-items: start; margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.table tbody th { height: 40px; background: none; color: var(--text); font-size: 13px; font-weight: var(--weight-medium); }
.tafel { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-large); }
.zugang .tafel :is(th, td) { white-space: nowrap; }
.zugang-qr { justify-self: center; padding: var(--space-2); background: white; border-radius: var(--radius); }
.zugang-qr svg { inline-size: min(240px, 70vw); block-size: auto; }
.zugang-zahl { justify-self: center; color: var(--text); font-family: var(--font-mono); font-size: 2.5rem; font-weight: var(--weight-semibold); letter-spacing: 0.1em; }
.app-sidebar > form { margin-block-start: auto; }
.app-sidebar > form .button { inline-size: 100%; }
.app-header > h1 { font-size: 14px; font-weight: var(--weight-semibold); }
.verwaltung { display: grid; grid-template-columns: minmax(0, 70rem); grid-auto-rows: max-content; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-12); font-size: 14px; line-height: 1.5; }
.verwaltung > :is(section, .panels):not(:first-child) { margin-block-start: var(--space-4); }
.verwaltung section { display: grid; gap: var(--space-3); }
.verwaltung h2 { font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.4; }
.verwaltung > p:first-child, .verwaltung .weg { color: var(--text-muted); }
.verwaltung p.warnung[role="status"] { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-large); background: var(--bg-subtle); color: var(--text-muted); font-size: 13px; }
.verwaltung form:has(> .input) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); max-inline-size: 40rem; }
.verwaltung form:has(> .input) label { grid-column: 1 / -1; font-size: 13px; font-weight: var(--weight-medium); }
.verwaltung mark { background: var(--bg-accent-soft); color: inherit; border-radius: var(--radius-small); }
.verwaltung .table tbody tr:hover { background: var(--bg-hover); }
.verwaltung .table :is(td, tbody th) { overflow-wrap: normal; }
.table .num { text-align: end; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; gap: var(--space-8) var(--space-6); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); }
.kennzahl { display: grid; align-content: start; gap: var(--space-2); }
.kennzahl dt { color: var(--text-subtle); font-size: 13px; font-weight: var(--weight-medium); }
.kennzahl dd { margin: 0; font-size: 24px; font-weight: var(--weight-semibold); line-height: 1.25; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rang, .belege { border: 1px solid var(--border); border-radius: var(--radius-large); }
.rang > li { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); }
.rang > li + li, .beleg + .beleg { border-block-start: 1px solid var(--border); }
.rang .kopf { display: contents; }
.rang .kopf > :not(.punkte), .rang ul { grid-column: 2; }
.rang .kopf > .stern { grid-column: 3; grid-row: 1; }
.stern [aria-pressed="true"] { color: var(--text-warning); }
.notiz { white-space: pre-line; }
.reiter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.verwaltung .filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.verwaltung .filter label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: var(--weight-medium); }
.zeitreihen { display: grid; gap: var(--space-1); padding-inline-start: var(--space-5); list-style: disc; }
.verwaltung .status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rang .punkte { display: grid; place-items: center; block-size: var(--space-6); border-radius: var(--radius-small); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.rang a { color: var(--text); font-weight: var(--weight-medium); }
.rang ul { color: var(--text-muted); font-size: 13px; }
.beleg { padding: var(--space-3) var(--space-4); font-weight: var(--weight-medium); }
.beleg :is(blockquote, .quelle) { margin: 0; font-weight: var(--weight-normal); }
.beleg blockquote { color: var(--text-muted); font-size: 13px; }
.beleg .quelle { color: var(--text-subtle); font-size: 12px; overflow-wrap: anywhere; }
.beleg .quelle::before { content: "← "; content: "← " / ""; }
@media (max-width: 720px) { .app-main { min-block-size: 100dvh; } }