:root {
    color-scheme: light;
    font-family: "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
    --color-background: #ffffff;
    --color-background-muted: #f1f5f9;
    --color-surface: #ffffff;
    --color-text: #172033;
    --color-text-muted: #526076;
    --color-border: #d8e0ea;
    --color-primary: #c2410c;
    --color-primary-light: #fff7ed;
    --color-focus: #2563eb;
    --color-green: #15803d;
    --color-orange: #c2410c;
    --color-red: #b91c1c;
    --color-unknown: #64748b;
    --content-width: 72rem;
    --border-radius: 1rem;
    --shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 20rem; margin: 0; background: var(--color-background); color: var(--color-text); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.6; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 16ch; margin-bottom: 1.25rem; font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 0.98; letter-spacing: -0.055em; }
h2 { margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
h3 { margin-bottom: 0.65rem; font-size: 1.2rem; line-height: 1.3; }
.content-container { width: min(calc(100% - 2rem), var(--content-width)); margin-inline: auto; }
.event-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 20%, rgba(251, 146, 60, 0.22), transparent 32rem), linear-gradient(145deg, #111827 0%, #1f2937 65%, #292524 100%); color: #ffffff; }
.event-hero::after { position: absolute; right: -8rem; bottom: -13rem; width: 32rem; height: 32rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; content: ""; }
.event-hero__content { position: relative; z-index: 1; padding-block: clamp(4rem, 10vw, 8rem); }
.eyebrow { margin-bottom: 0.75rem; color: #f97316; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.event-hero .eyebrow {
    max-width: 42rem;
    color: #fdba74;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.35;
    letter-spacing: 0.08em;
}
.event-hero__introduction { max-width: 45rem; margin-bottom: 2rem; color: #e2e8f0; font-size: clamp(1.05rem, 2.5vw, 1.3rem); }
.event-facts { display: grid; max-width: 58rem; margin-bottom: 2rem; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event-fact { min-height: 6.5rem; padding: 1.15rem; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.07); }
.event-fact span { display: block; margin-bottom: 0.25rem; color: #fdba74; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.primary-button, .secondary-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border: 0; border-radius: 0.75rem; font-weight: 750; text-decoration: none; transition: background-color 120ms ease, transform 120ms ease; }
.primary-button { background: #f97316; color: #ffffff; }
.primary-button:hover { background: #ea580c; transform: translateY(-1px); }
.secondary-button { background: var(--color-text); color: #ffffff; }
.secondary-button:disabled { cursor: not-allowed; opacity: 0.48; }
.primary-button:focus-visible, .secondary-button:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.page-section { padding-block: clamp(4rem, 8vw, 7rem); }
.page-section--accent { background: var(--color-primary-light); }
.page-section--muted { background: var(--color-background-muted); }
.section-heading { max-width: 48rem; margin-bottom: 2.25rem; }
.section-heading > p:last-child { color: var(--color-text-muted); font-size: 1.08rem; }
.overall-status { display: flex; align-items: center; margin-bottom: 1rem; padding: 1.25rem; border: 1px solid #fed7aa; border-radius: var(--border-radius); background: #fff7ed; gap: 1rem; }
.overall-status .status-label { display: block; color: var(--color-text-muted); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.overall-status strong { display: block; font-size: 1.15rem; }
.status-grid, .registration-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-card, .registration-card { padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-surface); box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.05); }
.status-card__header { display: flex; align-items: center; margin-bottom: 0.85rem; gap: 0.9rem; }
.status-card__header h3 { margin-bottom: 0.1rem; }
.status-text { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 700; }
.status-card > p { margin-bottom: 0; color: var(--color-text-muted); }
.status-indicator { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 0 0 2px currentColor; }
.status-indicator--green { background: var(--color-green); color: var(--color-green); }
.status-indicator--orange { background: var(--color-orange); color: var(--color-orange); }
.status-indicator--red { background: var(--color-red); color: var(--color-red); }
.status-indicator--unknown { background: var(--color-unknown); color: var(--color-unknown); }
.status-updated { margin: 1.25rem 0 0; color: var(--color-text-muted); font-size: 0.9rem; }
.registration-card { display: flex; min-height: 22rem; flex-direction: column; }
.card-category { margin-bottom: 0.75rem; color: var(--color-primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.registration-card ul { margin: 0 0 1.5rem; padding-left: 1.25rem; color: var(--color-text-muted); }
.registration-card li + li { margin-top: 0.35rem; }
.registration-card .secondary-button { align-self: flex-start; margin-top: auto; }
.information-notice { display: grid; margin-top: 1rem; padding: 1rem 1.15rem; border-left: 0.3rem solid var(--color-primary); border-radius: 0.5rem; background: #ffffff; gap: 0.15rem; }
.information-notice span { color: var(--color-text-muted); }
.route-placeholder { display: flex; min-height: 18rem; align-items: center; justify-content: center; padding: 2rem; border: 2px dashed #94a3b8; border-radius: var(--border-radius); background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), repeating-linear-gradient(45deg, #cbd5e1 0, #cbd5e1 1px, transparent 1px, transparent 1rem); text-align: center; }
.route-placeholder__symbol { margin-right: 1.25rem; color: var(--color-primary); font-size: 4rem; line-height: 1; }
.route-placeholder p { max-width: 34rem; margin-bottom: 0; color: var(--color-text-muted); }
.structure-figure { margin: 0; padding: clamp(0.5rem, 2vw, 1.25rem); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: #ffffff; box-shadow: var(--shadow); }
.structure-figure a { display: block; border-radius: 0.65rem; }
.structure-figure img { width: 100%; max-height: 75rem; margin-inline: auto; object-fit: contain; }
.structure-figure figcaption { padding: 1rem 0.5rem 0.25rem; color: var(--color-text-muted); font-size: 0.93rem; text-align: center; }
.page-footer { padding-block: 2.5rem; background: #111827; color: #ffffff; }
.page-footer__content { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.page-footer p { margin: 0.2rem 0 0; color: #cbd5e1; }
.page-footer__links { display: flex; color: #cbd5e1; gap: 1.25rem; }
.valid.modified:not([type="checkbox"]) { outline: 2px solid var(--color-green); }
.invalid { outline: 2px solid var(--color-red); }
.validation-message { color: var(--color-red); }
.participant-summary {
    display: flex;
    max-width: 58rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid rgba(253, 186, 116, 0.45);
    border-radius: var(--border-radius);
    background: rgba(249, 115, 22, 0.13);
    gap: 2rem;
}
.participant-summary__label { display: block; color: #fdba74; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.participant-summary__count { display: inline-block; margin-right: 0.4rem; color: #ffffff; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }
.participant-summary__unit { color: #ffffff; font-size: 1.05rem; font-weight: 750; }
.participant-summary p { max-width: 28rem; margin: 0; color: #e2e8f0; }
.overall-status--green { border-color: #86efac; background: #f0fdf4; }
.overall-status--orange { border-color: #fed7aa; background: #fff7ed; }
.overall-status--red { border-color: #fecaca; background: #fef2f2; }
.overall-status--unknown { border-color: #cbd5e1; background: #f8fafc; }
.status-card { border-left-width: 0.4rem; }
.status-card--green { border-color: #86efac; background: #f0fdf4; }
.status-card--orange { border-color: #fdba74; background: #fff7ed; }
.status-card--red { border-color: #fca5a5; background: #fef2f2; }
.status-card--unknown { border-color: #cbd5e1; background: #f8fafc; }

#blazor-error-ui { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1000; display: none; padding: 0.8rem 3.5rem 0.8rem 1.25rem; background: #991b1b; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.22); color: #ffffff; }
#blazor-error-ui .reload { margin-left: 0.5rem; color: #ffffff; font-weight: 700; }
#blazor-error-ui .dismiss { position: absolute; top: 0.4rem; right: 0.75rem; padding: 0.1rem 0.45rem; border: 0; background: transparent; color: #ffffff; cursor: pointer; font-size: 1.4rem; }
.blazor-error-boundary { padding: 1rem; background: #991b1b; color: #ffffff; }
.blazor-error-boundary::after { content: "Die Seite konnte nicht ordnungsgemäß dargestellt werden."; }
@media (max-width: 48rem) {
    .participant-summary { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
    .event-facts, .status-grid, .registration-grid { grid-template-columns: 1fr; }
    .event-fact, .registration-card { min-height: auto; }
    .route-placeholder { flex-direction: column; }
    .route-placeholder__symbol { margin: 0 0 1rem; }
    .page-footer__content { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 32rem) {
    .content-container { width: min(calc(100% - 1.25rem), var(--content-width)); }
    .event-hero__content, .page-section { padding-block: 3.5rem; }
    .page-footer__links { flex-direction: column; gap: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}