/* Use the application's light/dark/system tokens on every step, including direct links. */
:is(.page-zug-public, .page-zug-sign, .zug-profile-page, .page-zug-admin-settings, .page-zug-admin-anmeldungen) {
    --zug-surface: var(--ui-surface);
    --zug-surface-soft: var(--ui-surface-subtle);
    --zug-surface-elevated: var(--ui-surface-elevated);
    --zug-border: var(--ui-border-strong);
    --zug-accent: var(--ui-primary);
    --zug-accent-hover: var(--ui-primary-strong);
    --zug-accent-light: var(--ui-primary-soft);
    --zug-radius-xs: .25rem;
    --zug-radius-sm: var(--ui-radius-sm);
    --zug-radius-md: var(--ui-radius-md);
    --zug-radius-lg: var(--ui-radius-lg);
    --zug-radius-xl: var(--ui-radius-xl);
    --zug-shadow-xs: 0 1px 2px rgb(0 0 0 / .08);
    --zug-shadow-sm: var(--ui-shadow-sm);
    --zug-shadow-md: var(--ui-shadow-card);
    --zug-shadow-lg: var(--ui-shadow-soft);
    --zug-transition: .2s ease;
    --zug-transition-slow: .35s ease;
    color: var(--ui-text);
}
.page-zug-public.page-zug-registration { background: var(--ui-bg); }
:is(.page-zug-public, .page-zug-sign, .zug-profile-page, .page-zug-admin-settings, .page-zug-admin-anmeldungen) :is(.input, .zug-pr-role-select) {
    background: var(--ui-surface);
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    font-size: 1rem;
}
:is(.page-zug-public, .page-zug-sign, .zug-profile-page) :is(input, select, textarea) { font-size: 1rem; }
:is(.page-zug-public, .page-zug-sign, .zug-profile-page) .input::placeholder { color: var(--ui-text-muted); opacity: 1; }
.page-zug-public :is(.zug-landing-hero, .zug-registration-hero, .zug-login-card-highlight) {
    background: linear-gradient(145deg, var(--ui-surface), var(--ui-surface-subtle));
}
.page-zug-public :is(.zug-metric, .zug-quickfact, .zug-side-task-item, .zug-side-task-item:hover) { background: var(--ui-surface-subtle); }
.page-zug-public :is(.zug-landing-title, .zug-hero-title, .zug-metric-value, .zug-pr-name, .zug-req-text strong, .zug-login-card-highlight .card-title) { color: var(--ui-text); }
.page-zug-public :is(.zug-landing-copy, .zug-hero-text, .zug-progress-label, .zug-side-list, .zug-req-text, .zug-login-tip, .zug-quickfact, .zug-login-card-highlight .card-subtitle) { color: var(--ui-text); }
.page-zug-public :is(.zug-hero-kicker, .zug-metric-label) { color: var(--ui-text-muted); }
.page-zug-public .zug-step { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border-strong); }
.page-zug-public .zug-step.is-active { color: var(--ui-primary-strong); background: var(--ui-primary-soft); border-color: var(--ui-primary); }
.page-zug-public :is(.zug-role-badge, .zug-phase-badge, .status-pill, .zug-link-locked) { color: var(--ui-text); }
.page-zug-public .zug-req-badge { background: var(--ui-primary-action); color: var(--ui-text-inverse); }
.page-zug-public .zug-info-list li::before { color: var(--ui-primary); }
.page-zug-public .zug-pr-icon-btn.is-danger:hover { color: var(--ui-danger); }
.page-zug-public :is(.zug-stage, .zug-stage > *, .zug-documents, .zug-doc-card, .zug-doc-preview) { min-width: 0; max-width: 100%; }
.page-zug-public :is(.zug-grid, .zug-person-list) { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.page-zug-public :is(.zug-grid > *, .zug-field-row > *, .zug-pr-edit-fields > *, .zug-person-row > *, .card-head > *, .zug-req-text) { min-width: 0; }
.page-zug-public :is(.zug-responsible-section, .zug-person-row, .zug-field-group, .zug-field-row, .zug-pr-edit-fields, .input) { max-width: 100%; }
.page-zug-public .card-subtitle { white-space: normal; overflow-wrap: anywhere; }
.page-zug-public .zug-person-row.is-editing { flex-wrap: nowrap; }
.page-zug-public .zug-person-row.is-editing :is(.zug-pr-name, .zug-pr-info) { flex-basis: auto; }
.page-zug-public .zug-doc { overflow-wrap: anywhere; }
.page-zug-public .zug-doc a { color: #1d4ed8; text-decoration: underline; }
/* Logos and documents keep their own white paper; surrounding controls follow the theme. */
:is(.page-zug-public, .page-zug-sign, .page-zug-admin-settings, .page-zug-admin-anmeldungen) :is(.zug-landing-logo, .app-header-logo-image, .app-header-co-brand-image) { background: #fff; border-radius: .35rem; padding: .2rem; }
:is(.page-zug-public, .page-zug-sign) .signature-canvas { background: #fff; color-scheme: light; }
.page-zug-admin-anmeldungen .zug-doc-modal__body { background: #fff; color: #111827; color-scheme: light; }
.page-zug-admin-anmeldungen :is(.zug-guide-step, .zug-kpi-card, .zug-admin-quickfilters, .zug-quickfilters, .zug-lineup-total, .zug-chip, .zug-tag, .zug-hero-visual) { background: var(--ui-surface); color: var(--ui-text); }
.page-zug-admin-anmeldungen .zug-chip.is-active { background: var(--ui-primary-action); color: var(--ui-text-inverse); }
.page-zug-admin-anmeldungen :is(.zug-guide-next-kicker, .zug-guide-step.is-done .zug-guide-step-index, .zug-guide-step-status.is-done, .zug-inline-pill, [class*="status-pill--"]) { color: var(--ui-text); }
.zug-theme-control { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem 0; font-size: .85rem; color: var(--ui-text-muted); }
.zug-theme-control .input { width: auto; min-height: 2.75rem; max-width: 100%; }
[data-zug-live-confirmation][hidden] { display: none; }
.zug-live-confirmation { padding: 1rem; background: var(--ui-primary-soft); border: 1px solid var(--ui-primary); border-radius: var(--ui-radius-sm); }
.zug-live-confirmation label { flex-direction: row; align-items: flex-start; gap: .7rem; }
:is(.page-zug-public, .page-zug-sign, .zug-profile-page) :focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
@media (max-width: 480px) {
    .page-zug-public .zug-registration-hero { padding: 1rem; }
    .page-zug-public .zug-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-zug-public .zug-metric { padding: .6rem; }
    .page-zug-public .zug-step { padding-inline: .5rem; }
    .page-zug-public .zug-step-nav { padding: .6rem; }
    .page-zug-public .zug-pr-icon-btn { width: 2.75rem; height: 2.75rem; }
    .page-zug-public .zug-pr-name { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
    .page-zug-public .zug-pr-info { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
    .page-zug-public .zug-pr-sep { display: none; }
    .page-zug-public .zug-pr-role-select { min-width: 0; width: 100%; }
    .page-zug-public .zug-req-banner { padding: .65rem; align-items: flex-start; }
    .page-zug-public .zug-req-badge { flex-shrink: 0; }
    .page-zug-public .zug-doc-card { padding: .75rem 0; }
    .page-zug-public .zug-doc-card > .card-head { padding-inline: .75rem; }
    .page-zug-public .zug-doc-page { padding: .75rem .5rem; }
    .page-zug-public .zug-doc .zug-guidelines { padding: .5rem; }
    .page-zug-public .zug-doc-header { flex-wrap: wrap; }
    .page-zug-public .zug-doc :is(td, th, p, li) { overflow-wrap: anywhere; }
    .page-zug-public .zug-kv { table-layout: fixed; }
    .page-zug-public .zug-kv td { padding: .4rem; }
    .page-zug-public .zug-signature-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Public pages have a separate theme-control row between header and content. */
:is(.page-zug-public, .page-zug-sign) > .app-container:has(> .zug-theme-control) {
    grid-template-rows: auto auto 1fr auto;
}
@media print {
    .zug-theme-control { display: none; }
    .page-zug-public .zug-print-target { background: #fff; color: #111827; color-scheme: light; }
}

/* Distinguish year-round account access from a time-limited event registration. */
.page-zug-public .zug-landing-hero > * { min-width: 0; }
.page-zug-public .zug-account-entry { align-self: start; padding: 1.25rem; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.page-zug-public .zug-account-entry h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .75rem; }
.page-zug-public .zug-account-entry p { margin: .75rem 0; line-height: 1.55; }
.page-zug-public .zug-countdown-compact { grid-column: 1 / -1; min-height: 0; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; background: var(--ui-surface-subtle); color: var(--ui-text); border-color: var(--ui-border); box-shadow: none; }
.page-zug-public .zug-countdown-compact::before { display: none; }
.page-zug-public .zug-countdown-compact :is(.zug-countdown-label, .zug-countdown-value, .zug-countdown-state) { color: var(--ui-text); }
.page-zug-public .zug-countdown-compact .zug-countdown-state:empty { display: none; }
.page-zug-public .zug-countdown-compact .zug-countdown-value { font-size: clamp(1.1rem, 3vw, 1.5rem); line-height: 1.5; margin: .25rem 0; }
.page-zug-public .zug-countdown-compact .zug-countdown-state { margin: 0; }
.page-zug-account :is(.app-daily-greeting, .app-header-right, .push-hint) { display: none !important; }
.page-zug-account .zug-account-main { width: 100%; max-width: 680px; margin-inline: auto; padding: 1.25rem 1rem 2rem; display: grid; gap: 1rem; box-sizing: border-box; }
.page-zug-account .zug-account-main > * { min-width: 0; margin-block: 0; overflow-wrap: anywhere; }
.page-zug-account .zug-account-heading { display: flex; gap: 1rem; align-items: center; }
.page-zug-account .zug-account-heading img { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.page-zug-account .zug-account-heading h1 { font-size: clamp(1.65rem, 5vw, 2rem); line-height: 1.2; font-weight: 750; margin: .3rem 0 0; }
.page-zug-account .zug-account-venue { font-size: .95rem; margin: 0; color: var(--ui-text-muted); }
.page-zug-account .zug-account-main h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 0 0 1rem; }
.page-zug-account .zug-account-main :is(p, aside) { line-height: 1.55; }
.page-zug-account .zug-account-main form, .page-zug-account .zug-account-main label { display: grid; gap: .6rem; }
.page-zug-account .zug-account-main form { gap: 1rem; }
.page-zug-account .zug-account-main .input { min-height: 44px; width: 100%; box-sizing: border-box; }
.page-zug-account .zug-account-main :is(button, summary) { min-height: 44px; }
.page-zug-account .zug-account-main summary { cursor: pointer; align-content: center; font-weight: 600; }
.page-zug-account .zug-account-main .card { padding: 1.25rem; }
.page-zug-account .zug-account-back { min-height: 44px; align-content: center; justify-self: start; }
.page-zug-account .zug-account-admin { font-size: .9rem; }
.page-zug-account :is(a, button, input, summary):focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 3px; }
.page-zug-account [hidden], .page-zug-public .zug-countdown-refresh[hidden] { display: none !important; }

/* Group detail navigation must remain obvious after a filtered selection. */
#zug-detail, #zug-list { scroll-margin-top: calc(var(--app-header-height, 72px) + 1rem); }
@media (max-width: 700px) {
    #zug-detail td[data-label]::before { content: none !important; display: none !important; }
    #zug-detail .card-head { align-items: flex-start; }
}

.zug-next-actions ul { padding-left: 1.2rem; margin:.5rem 0; }
.zug-next-actions li { margin:.35rem 0; }
.zug-doc-preview { min-width:0; overflow-x:auto; }
.zug-doc-preview table { min-width:32rem; }
.zug-field { min-width:0; }
.zug-field > label { display:inline; }
@media (max-width:700px) {
    .zug-progress-panel { padding:.7rem!important; }
    .zug-doc-preview { padding:.5rem!important; font-size:1rem; }
    .zug-next-actions { padding:1rem!important; }
    .zug-step-nav { scroll-margin-top:1rem; }
}

@media (max-width:700px) {
    .page-zug-registration .app-main { gap:.75rem; }
    .page-zug-registration .app-main-header { padding:.75rem 1rem; }
    .page-zug-registration .zug-registration-hero { padding:1rem; gap:.75rem; }
    .page-zug-registration .zug-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; margin-top:.65rem; }
    .page-zug-registration .zug-metric { padding:.45rem .65rem; }
}