*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + 1.5rem); }
/* Smooth only after an in-page link click; a smooth jump on page load (e.g. verein/#vorstand) gets cut off while the shell renders. */
html:focus-within { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body:has(> .site-footer, > [data-site-footer]) { display: flex; flex-direction: column; min-block-size: 100dvh; }
body:has(> .site-footer, > [data-site-footer]) > main { flex-grow: 1; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.045em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.035em; }
p { text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
button { color: inherit; }
address { font-style: normal; }
::selection { background: var(--color-accent); color: var(--color-text); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; border-radius: var(--radius-small); }
[hidden] { display: none !important; }
.container { inline-size: min(calc(100% - var(--page-gutter) * 2), var(--container-width)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.eyebrow { display: flex; align-items: center; gap: 0.65rem; font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: 0 0 0.4rem; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: var(--color-primary); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-block-end: 2.5rem; }
.section-heading .eyebrow { margin-block-end: 1rem; }
.section-intro { max-inline-size: 37rem; margin-block-start: 1.25rem; color: var(--color-text-muted); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.1rem; min-block-size: 2.75rem; font-size: 0.875rem; font-weight: 650; }
.text-link:hover { color: var(--color-primary); }
.text-link .icon { transition: transform var(--transition); }
.text-link:hover .icon { transform: translateX(3px); }
.section-heading > .text-link { flex-shrink: 0; }
.icon { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1rem; min-block-size: 3.25rem; padding: 0.8rem 1.3rem; border: 1px solid transparent; border-radius: var(--radius-small); font-size: 0.875rem; font-weight: 650; line-height: 1.35; text-align: center; transition: background var(--transition), color var(--transition), transform var(--transition); }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--color-primary); color: var(--color-surface); }
.button--primary:hover { background: var(--color-primary-hover); }
.button--outline { border-color: var(--color-border); background: transparent; }
.button--outline:hover { border-color: var(--color-text); background: var(--color-surface); }
.button--light { background: var(--color-surface); color: var(--color-text); }
.button--light:hover { background: var(--color-sport-sand); }
.button--dark { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.button--dark:hover { background: var(--color-primary-hover); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; inset-block-start: 0.75rem; inset-inline-start: 1rem; padding: 0.7rem 1rem; background: var(--color-surface); box-shadow: var(--shadow-card); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.loading-note, .empty-state { padding: 2rem; border: 1px dashed var(--color-border); border-radius: var(--radius-medium); color: var(--color-text-muted); }
.empty-state .text-link { margin-block-start: 0.5rem; }
.empty-state p + p { margin-block-start: 0.35rem; }
noscript .loading-note { margin-block: 1rem; }

/* Loading states (js/components/loading.js): skeletons reserve the final layout
   and only become visible after --skeleton-delay, so fast requests never flash. */
@keyframes skeleton-reveal { from, to { visibility: hidden; } }
@keyframes skeleton-pulse { 50% { opacity: 0.55; } }
.skeleton, .skeleton-inline, .loading-note { animation: skeleton-reveal 1ms linear var(--skeleton-delay) backwards; }
.skeleton-bone, .skeleton-inline { display: block; border-radius: var(--radius-small); background: var(--color-skeleton); animation: skeleton-reveal 1ms linear var(--skeleton-delay) backwards, skeleton-pulse 1.8s ease-in-out var(--skeleton-delay) infinite; }
.skeleton-line { inline-size: var(--w, 100%); block-size: 0.8rem; margin-block: 0.6rem; }
.skeleton-eyebrow { block-size: 0.65rem; }
.skeleton-title { inline-size: var(--w, 60%); block-size: clamp(2rem, 3.4vw, 3rem); margin-block: 1rem 1.25rem; border-radius: var(--radius-medium); }
.skeleton-inline { display: inline-block; inline-size: var(--w, 60%); max-inline-size: 100%; block-size: 0.8em; vertical-align: middle; }
.skeleton-media { inline-size: 100%; aspect-ratio: var(--ratio, 1.7); border-radius: var(--radius-medium); }
.skeleton-media--wide { --ratio: 2.4; }
.skeleton-text { max-inline-size: 46rem; padding-block: 0.5rem; }
.skeleton-headline { margin-block-end: 2rem; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem; }
.skeleton-card { display: grid; align-content: start; gap: 0.15rem; min-inline-size: 0; }
.skeleton-card .skeleton-media { margin-block-end: 0.85rem; }
.skeleton-card__title { inline-size: var(--w, 80%); block-size: 1.35rem; margin-block: 0.45rem 0.35rem; }
.skeleton-row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding-block: 1.1rem; border-block-end: 1px solid var(--color-border); }
.skeleton-row__mark { inline-size: 3.25rem; aspect-ratio: 1; border-radius: var(--radius-medium); }
.skeleton-row__body .skeleton-line { margin-block: 0.45rem; }
.skeleton-row__action { inline-size: 5.5rem; block-size: 2.25rem; }
.skeleton-table { border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.skeleton-table-row { display: grid; grid-template-columns: 2.2fr 1.2fr 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem 1.25rem; }
.skeleton-table-row + .skeleton-table-row { border-block-start: 1px solid var(--color-border); }
.skeleton-table-row .skeleton-line { margin-block: 0; }
.skeleton-account { inline-size: 100%; block-size: 2.75rem; }
/* Static placeholder until loading.js upgrades it: a neutral text skeleton. */
.loading-note { min-block-size: 7.5rem; border-color: transparent; color: transparent; background: linear-gradient(var(--color-skeleton) 0 0) 0 0 / 45% 0.8rem no-repeat, linear-gradient(var(--color-skeleton) 0 0) 0 1.6rem / 92% 0.8rem no-repeat, linear-gradient(var(--color-skeleton) 0 0) 0 3.2rem / 70% 0.8rem no-repeat; background-origin: content-box; user-select: none; }
noscript .loading-note { min-block-size: 0; border-color: var(--color-border); color: var(--color-text-muted); background: none; animation: none; user-select: auto; }
@media (max-width: 600px) {
  .skeleton-table-row { grid-template-columns: minmax(0, 1fr) auto; }
  .skeleton-table-row .skeleton-line:nth-child(n+2) { display: none; }
}
@media (max-width: 600px) {
  .section-heading { align-items: start; flex-direction: column; gap: 1rem; margin-block-end: 2rem; }
  .section-heading > .text-link { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  /* Keep the anti-flicker delay, drop the pulse. */
  .skeleton-bone, .skeleton-inline { animation: skeleton-reveal 1ms linear var(--skeleton-delay) backwards; }
}