/* The stylesheet of the website in design F (E13): style.css (design A of the prototype) with the overrides of B, D and F, merged.
   It applies with <html data-design="b d f">; the order B, D, F matters. The administration adds admin.css.
   Mobile first: the base rules are for the phone, tablet and desktop come with min-width. No inline styles: the pages run under a
   CSP without 'unsafe-inline' (rule 5).

   Rules from the design review of 01.10.2026:
   - Text never smaller than 12 px (0.75rem) – the audience reaches to Ü49.
   - Everything to tap at least 44 px high (except links in running text).
   - Spacing from the grid 4/8/12/16/24/32/48 (--s1 … --s7); 2 and 6 px only inside small components.
   - Brand colours of other services (Twitch, YouTube, Instagram) only as an icon, surfaces in the colours of the club. */

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
  /* The colours of the club, measured on the official logo */
  --green: #00a780;
  --green-dark: #007a5e;
  --green-deep: #005543;
  --green-light: #3cc4a0;
  --red: #e1021b;
  --red-hover: #b80016;
  --anthracite: #29262a;
  --ink: #1c1a1d;

  /* Surfaces and text */
  --bg: #f5f5f6;
  --surface: #ffffff;
  --surface-2: #efeef1;
  --text: #29262a;
  --text-strong: #1c1a1d;
  --muted: #625e66;
  --border: #e5e3e8;
  /* The outline of fields and controls, at least 3:1 against the surface (WCAG 1.4.11, R054): inputs, selects, text areas, the
     search fields, the track of a switch that is off and the dots of a gallery. It is the outline of the secondary buttons
     (--ghost-line of design F, light and dark); the fallback is its light value. */
  --field-line: var(--ghost-line, #8f8a96);
  /* The green of the logo reaches only 3.1:1 on white – text and buttons use the dark green (5.3:1).
     The red of the logo reaches 5.0:1 with white text and may therefore be a surface too. */
  --link: #007a5e;
  --btn: #007a5e;
  --btn-hover: #00654e;
  --btn-text: #ffffff;
  --accent: #e1021b;
  --accent-hover: #b80016;
  --accent-text: #ffffff;
  --chip-bg: #e0f4ee;
  --chip-text: #007a5e;
  /* A light highlight (selection, icon surfaces) – apart from the chips, because design C made its chips black */
  --tint-bg: #e0f4ee;
  --tint-text: #007a5e;
  --warn: #9a4a06;
  --warn-bg: #fdf0dc;
  --red-text: #c4001a;
  --danger-bg: rgba(225, 2, 27, .1);

  /* Head, footer and dark surfaces */
  --topbar-bg: rgba(255, 255, 255, .94);
  --topbar-text: #1c1a1d;
  --topbar-muted: #625e66;
  --topbar-line: linear-gradient(90deg, var(--red) 0 22%, var(--green) 22% 100%);
  --dark-bg: #29262a;
  --footer-bg: #29262a;
  --footer-text: #c3cdd2;
  --footer-head: #9fb0b8;

  /* The motif of the logo: two slanted bars, red and green */
  --stripe: linear-gradient(90deg, var(--red) 0 34%, transparent 34% 46%, var(--green) 46% 100%);

  /* Display type and title mark – where the designs differed most */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 900;
  --display-style: italic;
  --display-case: uppercase;
  --display-tracking: -.01em;
  --mark: var(--stripe);
  --mark-w: 46px;
  --mark-h: 6px;
  --mark-skew: -24deg;

  /* Shapes and shadows */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-btn: 999px;
  --card-border: 1px solid var(--border);
  --card-shadow: none;
  --shadow-sm: 0 1px 2px rgba(28, 26, 29, .05), 0 1px 3px rgba(28, 26, 29, .07);
  --shadow-md: 0 2px 4px rgba(28, 26, 29, .05), 0 6px 16px rgba(28, 26, 29, .08);
  --shadow-lg: 0 8px 24px rgba(28, 26, 29, .14), 0 2px 6px rgba(28, 26, 29, .08);
  /* The keyboard focus: the ring of :focus-visible and the two-coloured shadow of the fields, opaque so that it stays visible on
     white, red and anthracite (design review part 4, L1). Dark green on light surfaces, a light green in dark mode (R128). */
  --focus-ring: #007a5e;
  --focus: 0 0 0 2px #fff, 0 0 0 5px var(--focus-ring);

  /* Spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Sizes */
  --tap: 44px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --gutter: 16px;
  --maxw: 1120px;

  color-scheme: light;
}

/* Dark mode: by the setting of the system, switchable in the menu (data-theme).
   The logo stands in a white circle and so stays readable on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121113;
    --surface: #1c1a1d;
    --surface-2: #272429;
    --text: #e7e5e9;
    --text-strong: #f6f5f7;
    --muted: #a8a3ad;
    --border: #343036;
    --link: #3cd0a8;
    --chip-bg: rgba(0, 167, 128, .2);
    --chip-text: #5fdcb9;
    --tint-bg: rgba(0, 167, 128, .2);
    --tint-text: #5fdcb9;
    --warn: #f5b25c;
    --warn-bg: rgba(245, 178, 92, .14);
    --red-text: #ff6b78;
    --danger-bg: rgba(255, 107, 120, .14);
    /* 7.9:1 on --surface-2: the dark green of the light mode reaches only 2.9:1 there (R128) */
    --focus-ring: #3cd0a8;
    /* In dark mode the toast is light – „Rückgängig“ needs the dark green there */
    --toast-action: #007a5e;
    --topbar-bg: rgba(22, 20, 23, .92);
    --topbar-text: #f6f5f7;
    --topbar-muted: #a8a3ad;
    --dark-bg: #232025;
    --footer-bg: #0d0c0e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #121113;
  --surface: #1c1a1d;
  --surface-2: #272429;
  --text: #e7e5e9;
  --text-strong: #f6f5f7;
  --muted: #a8a3ad;
  --border: #343036;
  --link: #3cd0a8;
  --chip-bg: rgba(0, 167, 128, .2);
  --chip-text: #5fdcb9;
  --tint-bg: rgba(0, 167, 128, .2);
  --tint-text: #5fdcb9;
  --warn: #f5b25c;
  --warn-bg: rgba(245, 178, 92, .14);
  --red-text: #ff6b78;
  --danger-bg: rgba(255, 107, 120, .14);
  --focus-ring: #3cd0a8;
  --toast-action: #007a5e;
  --topbar-bg: rgba(22, 20, 23, .92);
  --topbar-text: #f6f5f7;
  --topbar-muted: #a8a3ad;
  --dark-bg: #232025;
  --footer-bg: #0d0c0e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

/* =========================================================================
   2. Basics
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--s3));
}
/* On phones the bottom bar lies fixed over the content – focus and anchors land above it, not behind it */
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--s2)); } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 768px) { body { padding-bottom: 0; } }
/* A page without the bottom bar (the maintenance mode, WP23) keeps no room for it */
body.page--bare { padding-bottom: env(safe-area-inset-bottom); }

img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { min-width: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text-strong); line-height: 1.15; }
p { margin: 0; }
[hidden] { display: none !important; }

/* The keyboard focus as an outline, not as a box-shadow: button styles set a box-shadow of their own that would swallow the ring
   (design review part 4, L1). On dark surfaces the outline is white; fields keep --focus. */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.match :focus-visible, .join :focus-visible, .footer :focus-visible, .team-hero :focus-visible, .live :focus-visible,
.score :focus-visible, .team-card--featured :focus-visible, .proto-strip :focus-visible { outline-color: #fff; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .search input:focus-visible { outline: none; }

/* CMS (R125): the first stop of the keyboard on every page jumps over the frame to <main id="content">; visible only with the focus */
.skip-link {
  position: absolute; top: var(--s2); left: var(--s2); z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--radius-btn);
  background: var(--green-dark); color: #fff; font-weight: 800; text-decoration: none; box-shadow: var(--shadow-lg);
}
.skip-link:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   3. Layout
   ========================================================================= */

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s6); }

.stack { display: grid; gap: var(--s3); }
.two-col { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; align-items: start; } }
/* Grid children may become narrower than their content – otherwise a strip to swipe pushes the column over the edge */
.two-col > *, .stack > * { min-width: 0; }

/* =========================================================================
   4. Type and headings
   ========================================================================= */

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
}

/* The kicker as plain text – the stripe mark stands at the title only (finding M8) */
.kicker {
  display: block; margin-bottom: var(--s1);
  font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--link);
}

.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.section__title { font-size: 1.5rem; overflow-wrap: break-word; }
.section__title::after {
  content: ""; display: block; width: var(--mark-w); height: var(--mark-h); margin: 10px 0 0 3px;
  background: var(--mark); transform: skewX(var(--mark-skew));
}
.section > .section__title { margin-bottom: var(--s4); }
.page-title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.05; }
.page-lead { margin: var(--s3) 0 var(--s4); max-width: 62ch; color: var(--muted); }
/* Running text directly in a section keeps the measure of .prose (quality review 23.10.2026: up to 120 characters per line) */
.section > p { max-width: 68ch; }

/* Links to more: a tap area of 44 px through padding (finding M2) */
.section__more {
  display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding-inline: var(--s1);
  margin-inline: calc(-1 * var(--s1));
  font-weight: 800; font-size: .9rem; text-decoration: none; white-space: nowrap;
}

.prose { max-width: 68ch; margin-top: var(--s5); font-size: 1.06rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose--tight { margin-top: 0; }
.prose .lead { font-size: 1.16rem; font-weight: 600; line-height: 1.6; color: var(--text-strong); }
.prose h2 { font-size: 1.4rem; margin-top: 1.7em; }
.prose blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 18px; border-left: 4px solid var(--green);
  font-size: 1.2rem; font-weight: 700; line-height: 1.5; color: var(--text-strong);
}
/* CMS (WP36): not the photos of a slider – a gallery in the text and its full screen keep the slider's own sizes (data-auto-height) */
.prose figure:not(.slides__item) { margin: 1.6em 0; }
/* CMS (WP36): a photo of an image block (.article__single) keeps the width of its width attribute – never wider than the photo, so
   nothing is upscaled; every other figure of the text as in the prototype */
.prose figure:not(.article__single, .slides__item) img { width: 100%; border-radius: var(--radius); }
.prose figcaption { margin-top: var(--s2); font-size: .85rem; color: var(--muted); }

.credit { font-size: .8rem; color: var(--muted); }

/* =========================================================================
   5. Icons
   ========================================================================= */

.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; }
.icon--xs { width: 15px; height: 15px; }
.icon--ball { stroke-width: 3.2; }

/* =========================================================================
   6. Components
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; max-width: 100%; padding: 6px 22px;
  border: 0; border-radius: var(--radius-btn); cursor: pointer;
  font-weight: 800; font-size: .95rem; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--btn); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-hover); }
/* Destructive or not to be undone: red, but never the only hint – the text says it (concept 4.13). --danger for a step that asks
   first, --destroy for the last step itself (deleting the own account, R107). */
.btn--danger { background: var(--danger-bg); color: var(--red-text); }
.btn--danger:hover { background: var(--red); color: #fff; }
.btn--destroy { background: var(--red); color: #fff; }
.btn--destroy:hover { background: var(--red-hover); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn--ghost { background: var(--surface-2); color: var(--text-strong); }
.btn--ghost:hover { background: var(--border); }
.btn--white { background: #fff; color: var(--ink); }
.btn--outline-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.btn--outline-white:hover { background: rgba(255, 255, 255, .1); }
.btn--sm { min-height: var(--tap); padding: 6px var(--s4); font-size: .875rem; }
.btn--block { width: 100%; }
label.btn { cursor: pointer; }
label.btn:has(input:focus-visible) { box-shadow: var(--focus); }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer;
  transition: background .15s;
}
.icon-btn:hover { background: rgba(127, 140, 150, .16); }
.icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s1) 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 800; line-height: 1.4; white-space: nowrap; text-decoration: none;
  background: var(--chip-bg); color: var(--chip-text);
}
.chip--accent { background: var(--accent); color: var(--accent-text); }
.chip--dark { background: rgba(10, 14, 16, .66); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chip--warn { background: var(--warn-bg); color: var(--warn); }
.chip--plain { background: var(--surface-2); color: var(--muted); }

/* A line on a white ground over photos – a sporty accent */
.boxed {
  display: inline; padding: .06em .3em;
  background: #fff; color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.card { padding: var(--s4); border-radius: var(--radius); background: var(--surface); border: var(--card-border); box-shadow: var(--card-shadow); }
.card__label { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-dark); color: #fff; font-weight: 800; font-size: .85rem;
}
.avatar--lg { width: 52px; height: 52px; font-size: 1rem; }
.avatar--xl { width: 64px; height: 64px; font-size: 1.1rem; }
.avatar--ink { background: var(--anthracite); }
.avatar--photo { padding: 0; object-fit: cover; object-position: center 18%; background: var(--surface-2); }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: var(--s3) 14px; border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted); font-size: .875rem; line-height: 1.5;
}
.notice .icon { color: var(--link); margin-top: 1px; }
/* CMS (WP15): the note above an archived post – its address stays, the post stands in no list any more */
.post-archived { margin-bottom: var(--s4); color: var(--text-strong); }
/* CMS (WP18): the note on the page of an archived team, below the head – the page stays, the team stands in no list any more */
.team-archived { margin-top: var(--s4); color: var(--text-strong); }
.note { display: flex; gap: var(--s2); align-items: flex-start; max-width: 68ch; margin-top: var(--s3); font-size: .85rem; color: var(--muted); }
.note .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; }

.toast {
  position: fixed; left: var(--s4); right: var(--s4); z-index: 80; width: fit-content; max-width: 560px; margin-inline: auto;
  bottom: calc(var(--bottomnav-h) + var(--s4) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s4); min-height: 52px; border-radius: 12px;
  background: var(--text-strong); color: var(--bg);
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease-out;
}
.toast button { min-height: var(--tap); padding: 0 var(--s3); border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--toast-action, var(--green-light)); font-weight: 800; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 768px) { .toast { bottom: var(--s5); } }

/* A switch of two or three options; buttons (light/dark) or links (/games: „Kommende Spiele“, „Ergebnisse“, WP07) */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1);
  padding: var(--s1); border-radius: var(--radius-btn); background: var(--surface-2);
}
.segmented button, .segmented a {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  min-height: var(--tap); padding: 2px var(--s2); border: 0; border-radius: var(--radius-btn); background: none; cursor: pointer;
  font-size: .875rem; font-weight: 700; line-height: 1.2; color: var(--muted); text-align: center; text-decoration: none;
}
/* The chosen option as an opaque green pill with white text, like the current tab and menu entry of design F (L2, R252): a white
   pill on the grey track was only 1.15:1 */
.segmented button[aria-pressed="true"], .segmented a[aria-current="page"] { background: var(--green-dark); color: #fff; }
.segmented__label { margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* A bar of filters: on phones a strip to swipe, from 768 px the chips wrap – none lies beyond the edge without a hint (R047). The
   room above and below keeps the focus ring inside the strip, which clips what stands out of it (R251). */
.filters {
  display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) var(--s3);
}
.filters::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 2px 0 var(--s3); } }
.filter {
  flex: none; min-height: var(--tap); padding: 0 var(--s4); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: .875rem; font-weight: 700;
}
.filter[aria-pressed="true"] { background: var(--text-strong); border-color: transparent; color: var(--bg); }

/* A switch: the track of the off state in --field-line, so that control and state reach 3:1 (R187); on it is dark green */
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 50px; height: 30px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--field-line); transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s;
}
.switch:checked { background: var(--green-dark); }
.switch:checked::after { transform: translateX(20px); }

/* Forms */
.field { display: grid; gap: 6px; margin-bottom: var(--s4); }
/* A group of choices as a field (the fields of a hall in the hall plan and in the team form): without the frame of the browser,
   its legend like a label (R265) */
fieldset.field { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
fieldset.field > legend { margin-bottom: 6px; padding: 0; }
.field__label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field__hint { font-size: .85rem; color: var(--muted); }
/* As a link of its own the hint needs a full tap area */
a.field__hint { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--link); font-weight: 700; }
/* Two fields side by side – on phones one below the other, so that an address fits its field (R052) */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 599px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
.field-grid > * { min-width: 0; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--field-line); border-radius: 12px; background: var(--surface);
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.textarea--grow { field-sizing: content; min-height: 76px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
.input--compact, .select--compact { min-height: var(--tap); padding: 6px 10px; font-size: .9rem; }
.input--number { text-align: center; }

.radio-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.radio-row label {
  flex: 1 1 8rem; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); font-weight: 700;
}
.radio-row input { accent-color: var(--green-dark); width: 18px; height: 18px; }
.radio-row label:has(input:checked) { border-color: var(--green); background: var(--tint-bg); color: var(--tint-text); }

.checks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.checks label { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; font-weight: 700; cursor: pointer; }
.checks label:has(input:checked) { border-color: var(--green); background: var(--tint-bg); color: var(--tint-text); }
.checks input { flex: none; accent-color: var(--green-dark); width: 18px; height: 18px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.toggle-row strong { display: block; color: var(--text-strong); font-size: .95rem; }
.toggle-row span { font-size: .85rem; color: var(--muted); }

/* =========================================================================
   7. Head, navigation, menu
   ========================================================================= */

.proto-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px var(--s2);
  padding: 2px var(--gutter);
  background: var(--ink); color: #c3cdd2; font-size: .75rem; text-align: center;
}
.proto-strip a { color: #fff; font-weight: 700; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  color: var(--topbar-text);
  box-shadow: 0 1px 0 var(--border);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--topbar-line); }
.topbar__inner { display: flex; align-items: center; gap: var(--s1); height: var(--topbar-h); }

.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-right: auto; }
.brand__logo { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font: var(--display-style) var(--display-weight) 1.2rem/1 var(--font-display); letter-spacing: .01em; text-transform: var(--display-case); }
.brand__sub { margin-top: var(--s1); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }

/* The main navigation from tablet width – below it the bottom bar takes over (finding H1: no gap any more) */
.mainnav { display: none; }
@media (min-width: 768px) {
  .mainnav { display: flex; gap: 2px; margin-right: var(--s1); }
  .mainnav a {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; border-radius: 10px;
    color: var(--topbar-muted); text-decoration: none; font-weight: 700; font-size: .9rem;
  }
  .mainnav a:hover { color: var(--topbar-text); background: var(--surface-2); }
  .mainnav a[aria-current="page"] { color: var(--link); background: var(--tint-bg); }
}
@media (min-width: 1024px) { .mainnav a { padding: 0 var(--s3); font-size: .95rem; } }

/* „Mitmachen“ fixed in the head (D): on phones the bottom bar takes over, on tablets only the heart –
   the name stays for screen readers. The colour comes from the design. */
.topbar__cta { flex: none; margin-right: var(--s1); }
@media (max-width: 767px) { .topbar__cta { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .topbar__cta { width: var(--tap); padding: 0; }
  .topbar__cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root[data-design~="d"] .mainnav a { padding: 0 8px; }
}

/* The tool bar for people signed in – „Seite bearbeiten“ no longer stands in the middle of the content */
.editbar { background: var(--ink); color: #fff; }
.editbar__inner { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding-block: var(--s1); }
.editbar__who { display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0; font-size: .85rem; color: #c3cdd2; }
.editbar__who strong { color: #fff; }

.bottomnav {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a, .bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--bottomnav-h); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 700;
}
.bottomnav__pill { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .15s; }
.bottomnav [aria-current="page"] { color: var(--link); }
.bottomnav [aria-current="page"] .bottomnav__pill { background: var(--tint-bg); }
@media (min-width: 768px) { .bottomnav { display: none; } }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(10, 14, 16, .55); }

.drawer {
  margin: 0 0 0 auto; padding: 0; border: 0;
  width: min(400px, 100%); height: 100dvh; max-height: 100dvh;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.drawer[open] { animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer__inner { display: flex; flex-direction: column; min-height: 100%; }
.drawer__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s2) var(--s2) var(--gutter);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.drawer__title { font-size: 1.05rem; font-weight: 800; }
.drawer__foot { margin-top: auto; padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); display: grid; gap: var(--s4); }

.search { position: relative; margin: 14px var(--gutter) 6px; }
.search .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); }
.search input { width: 100%; height: 48px; padding: 0 14px 0 46px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--surface-2); }
.search input:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
/* CMS (WP41): the field of the page of results – the query again, with a button beside it; the hits by group below */
.search--page { display: flex; gap: var(--s2); align-items: center; max-width: 40rem; margin: var(--s4) 0; }
.search--page input { flex: 1; min-width: 0; }
.search--page .btn { flex: none; }
.search-group, .search-empty { margin-top: var(--s6); }
.search-group__count { font-size: .9rem; font-weight: 700; color: var(--muted); }
.search-group .fixture__team { text-decoration: none; }
.search-group .fixture__team:hover { text-decoration: underline; }

.navtree { padding: 6px 0; }
.navtree details { border-bottom: 1px solid var(--border); }
.navtree summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: var(--s2) var(--gutter); cursor: pointer; list-style: none;
  font-weight: 800; font-size: 1.05rem; color: var(--text-strong);
}
.navtree summary::-webkit-details-marker { display: none; }
.navtree summary .icon { color: var(--muted); transition: transform .2s; }
.navtree details[open] summary .icon { transform: rotate(180deg); }
.navtree ul { list-style: none; margin: 0; padding: 0 0 10px; }
.navtree li a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--gutter) 0 calc(var(--gutter) + 14px); color: var(--text); text-decoration: none; }
.navtree li a:hover { color: var(--link); }
.navtree > a {
  display: flex; align-items: center; min-height: 52px; padding: var(--s2) var(--gutter); border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 1.05rem; color: var(--text-strong); text-decoration: none;
}
/* The entries reach the edges of the drawer, which clips what stands outside: the focus ring lies inside them (R251) */
.navtree summary:focus-visible, .navtree a:focus-visible { outline-offset: -3px; }
/* CMS (R151, R254): the menu as a page of its own (/menu) – where „Menü“ leads without JavaScript; the entries keep the edge of the
   page like in the drawer, the switch of the display waits for the script (data-script-only) */
.menu-page { max-width: 40rem; }
.menu-page .search { margin: var(--s4) 0; }
.menu-page .navtree, .menu-page .drawer__foot { margin-inline: calc(-1 * var(--gutter)); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font-size: .85rem; color: var(--muted); margin-bottom: var(--s2); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.crumbs .icon { width: 14px; height: 14px; }

/* =========================================================================
   8. Dialogs
   ========================================================================= */

.sheet {
  margin: auto auto 0; padding: 0; border: 0;
  width: 100%; max-width: 640px; max-height: 90dvh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.sheet[open] { animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: var(--s2) auto 2px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 2px var(--s2) 2px var(--gutter); }
.sheet__title { font-size: 1.1rem; font-weight: 800; }
.sheet__body { padding: 6px var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); }
.sheet__body > p { margin-bottom: var(--s3); }
.sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); }
.sheet__actions .btn { flex: 1; }
@media (min-width: 768px) {
  .sheet { margin: auto; border-radius: var(--radius-lg); }
  .sheet[open] { animation: fade-in .18s ease-out; }
}
@keyframes fade-in { from { opacity: 0; transform: scale(.98); } }

.lightbox {
  margin: 0; padding: 0; border: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: #000; color: #fff;
}
.lightbox::backdrop { background: #000; }
/* CMS (E10, R188): the full screen is a grid – counter and close button in a bar above the photo, the dots in a bar below it, the
   photo in the row between them. No control lies on the photo; .slides gives its parts to this grid (display: contents). */
.lightbox[open] {
  display: grid; grid-template: "count close" auto "track track" minmax(0, 1fr) "dots dots" auto / minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.lightbox .slides { display: contents; }
.lightbox__close { grid-area: close; margin: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.lightbox .slides__count { grid-area: count; position: static; align-self: center; justify-self: start; margin: 10px 14px; }
.lightbox .slides__track { grid-area: track; min-height: 0; border-radius: 0; }
.lightbox .slides__dots { grid-area: dots; margin: 0; padding-bottom: var(--s1); }
/* CMS (WP36, E10): the row is the height of its grid row, not of the photo – otherwise a portrait photo stood taller than the screen
   and lost its lower edge */
.lightbox .slides__item { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: 100%; }
.lightbox .slides__item img { width: 100%; height: 100%; object-fit: contain; }
.lightbox .slides__dot::before { background: rgba(255, 255, 255, .55); }
.lightbox .slides__dot[aria-current="true"]::before { background: #fff; }

/* =========================================================================
   9. Slideshow
   ========================================================================= */

.slides { position: relative; }
.slides__track {
  position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.slides__track::-webkit-scrollbar { display: none; }
.slides__item { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.slides__dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--s2); }
.slides__dot { display: grid; place-items: center; width: 32px; height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; }
.slides__dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--field-line); transition: width .2s, background .2s; }
.slides__dot[aria-current="true"]::before { width: 22px; background: var(--green); }
.slides__count { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; }

/* Photos in a slider are never cropped and never covered – a cut would falsify the picture (E10).
   With data-auto-height the height of the slider follows the photo shown (site.js sets it through the CSSOM);
   controls and caption stand below the photo, not on it. */
[data-auto-height] > .slides__track { align-items: flex-start; overflow-y: hidden; transition: height .25s ease; }
.slides__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2); margin-top: var(--s1); }
.slides__bar .slides__count { position: static; justify-self: start; }
.slides__bar .slides__dots { margin: 0; }
/* From six photos counter and arrows suffice – eight dots do not fit beside the arrows at 320 px */
.slides__bar .slides__dots:has(> :nth-child(6)) { display: none; }
/* CMS (WP04): fewer dots only where they fit beside counter and full-screen button – otherwise they would push the arrows under
   them (a tap on "next" opened the full screen). Needed: two outer columns of 48 px (the counter "1 / 5"), two gaps of 8 px, two
   arrows of 44 px and 34 px per dot, plus 2 px of air: 200 px + 34 px per dot. Measured on the bar itself, so it holds at 320 px as
   in the column of the desktop; without the dots the counter alone tells the place. */
.slides__bar { container-type: inline-size; }
@container (width < 370px) { .slides__bar .slides__dots:has(> :nth-child(5)) { display: none; } }
@container (width < 336px) { .slides__bar .slides__dots:has(> :nth-child(4)) { display: none; } }
@container (width < 302px) { .slides__bar .slides__dots:has(> :nth-child(3)) { display: none; } }
@container (width < 268px) { .slides__bar .slides__dots { display: none; } }
.slides__nav-group { display: flex; align-items: center; }
.slides__nav, .slides__full {
  display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-strong); cursor: pointer;
}
.slides__nav:hover, .slides__full:hover { background: var(--border); }
.slides__full { justify-self: end; }

/* =========================================================================
   10. Cards
   ========================================================================= */

/* Match */
.match {
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--s4); border-radius: var(--radius);
  background: var(--surface); border: var(--card-border); box-shadow: var(--shadow-sm);
}
.match--featured { box-shadow: var(--shadow-lg); border-color: transparent; }
.match__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.match__label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.match__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2); text-align: center; }
.match__center { display: grid; gap: 2px; justify-items: center; }
.match__date { font-weight: 800; font-size: .875rem; color: var(--red-text); white-space: nowrap; }
.match__time { font: var(--display-style) var(--display-weight) 1.7rem/1 var(--font-display); color: var(--text-strong); }
.match__league { font-size: .75rem; color: var(--muted); font-weight: 600; }
.match__place { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; color: var(--muted); text-align: center; }
.match__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.match__actions .btn { flex: 1 1 auto; }
/* A second game of the same match day (Berlin leagues) */
.match__more { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }

.team-badge { display: grid; justify-items: center; gap: 6px; font-size: .8rem; font-weight: 800; line-height: 1.25; color: var(--text-strong); }
.team-badge__logo {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted); font: var(--display-style) var(--display-weight) .85rem/1 var(--font-display);
}
.team-badge__logo--home { background: var(--green-dark); color: #fff; }
.team-badge__logo--home .icon { width: 30px; height: 30px; }
/* Club crests from the DVV leagues: round logos on white */
.team-badge__logo--img { padding: 0; background: transparent; }
.team-badge__logo--img img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }

/* Countdown to the next game */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.countdown__part { padding: var(--s2) var(--s1); border-radius: 12px; text-align: center; background: var(--surface-2); }
.countdown__value { display: block; font: var(--display-style) var(--display-weight) 1.5rem/1 var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.countdown__label { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Posts */
.news { display: grid; gap: var(--s3); }
.news-card {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px; border-radius: var(--radius);
  background: var(--surface); border: var(--card-border); box-shadow: var(--card-shadow);
  color: inherit; text-decoration: none; transition: box-shadow .15s;
}
.news-card:hover { box-shadow: var(--shadow-md); }
.news-card__img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; }
.news-card__title {
  margin: 6px 0 var(--s1); font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--text-strong);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__meta { font-size: .8rem; color: var(--muted); }
/* CMS (WP14): the teaser below the title – two lines in a small card, complete in the opening card */
.news-card__text {
  margin: 0 0 var(--s1); font-size: .85rem; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card--feature .news-card__text { display: block; font-size: .95rem; -webkit-line-clamp: unset; }
/* CMS: paging through „Aktuelles“ – „Neuere“ on the left, „Ältere“ on the right, also when only one of the two links is there */
.pager { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.pager__next { margin-left: auto; }
.news-card--feature { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
/* CMS: the opening photo is shown complete (E10) – no fixed 16:9 with cover; tall photos are limited in height */
.news-card--feature .news-card__img { aspect-ratio: auto; border-radius: 0; display: grid; place-items: center; }
.news-card--feature .news-card__img img { height: auto; max-height: 72svh; object-fit: contain; }
.news-card--feature .news-card__body { padding: var(--s1) var(--s4) var(--s4); }
.news-card--feature .news-card__title { font-size: 1.3rem; }
.news-card--feature .news-card__body::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--green); margin-top: var(--s3); }
@media (min-width: 768px) {
  .news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-card--feature { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .news-card--feature .news-card__img { aspect-ratio: auto; min-height: 280px; }
  .news-card--feature .news-card__body { padding: var(--s6) var(--s5); align-self: center; }
  .news-card--feature .news-card__title { font-size: 1.7rem; }
}

.social {
  display: flex; align-items: center; gap: 14px;
  padding: var(--s4); border-radius: var(--radius);
  background: var(--surface); border: var(--card-border);
  color: inherit; text-decoration: none;
}
.social__text { flex: 1; min-width: 0; }
.social__text strong { display: block; color: var(--text-strong); }
.social__text span { font-size: .85rem; color: var(--muted); }

/* A file to download */
.file {
  display: flex; align-items: center; gap: var(--s3); margin: 1.6em 0;
  padding: var(--s3); border-radius: var(--radius);
  background: var(--surface); border: var(--card-border);
  color: inherit; text-decoration: none;
}
a.file:hover { box-shadow: var(--shadow-md); }
.file > .icon--sm { flex: none; color: var(--muted); }
.file--locked .file__icon { background: var(--surface-2); color: var(--muted); }
/* R099: a file block without a file is a note, not a card to click */
.file-note { display: flex; align-items: baseline; gap: var(--s2); margin: 1.2em 0; color: var(--muted); }
.file-note .icon { flex: none; align-self: center; }
.file-note strong { color: var(--text-strong); }
.file__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--tint-bg); color: var(--link); flex: none; }
.file__text { flex: 1; min-width: 0; font-size: .92rem; }
.file__text strong { display: block; color: var(--text-strong); }
.file__text span { font-size: .85rem; color: var(--muted); }

/* A person (coach, rights) */
.person { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--radius); background: var(--surface); border: var(--card-border); }
.person__text { flex: 1; min-width: 0; }
.person__text strong { display: block; color: var(--text-strong); }
.person__text span { font-size: .85rem; color: var(--muted); }

/* Instagram: the tiles lie on the own server, Instagram is reached only with a tap (rule 9) */
.insta {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 270px); gap: 10px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter); scroll-padding-inline: var(--gutter);
}
.insta::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .insta { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); overflow: visible; margin: 0; padding: 0; } }
.insta-post { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; color: #fff; text-decoration: none; background: var(--anthracite); }
.insta-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insta-post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 28%, transparent 45%, rgba(0, 0, 0, .9) 100%); }
.insta-post__account, .insta-post__text { position: absolute; left: var(--s3); right: var(--s3); z-index: 1; }
.insta-post__account { top: 10px; font-size: .8rem; font-weight: 800; }
.insta-post__text {
  bottom: var(--s3); font-size: .95rem; font-weight: 700; line-height: 1.35; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================================
   11. Start page
   ========================================================================= */

/* Top stories: the photo always stands complete, in its own ratio (E10).
   Phone: photo above, text below. Desktop: text on the left, photo on the right. Nothing lies on the photo. */
.hero { position: relative; color: #fff; background: var(--ink); }
.hero-slide { position: relative; display: flex; flex-direction: column; color: #fff; text-decoration: none; background: var(--ink); }
.hero-slide img { display: block; width: 100%; height: auto; max-height: 72svh; object-fit: contain; }
.hero-slide__body { position: relative; z-index: 1; padding: var(--s4) var(--gutter) 104px; }
/* Line height not below 1.08: otherwise the dots of umlauts in the second line touch the white box above */
.hero-slide__title { font-size: clamp(2.1rem, 10.5vw, 4.4rem); line-height: 1.08; color: #fff; margin: var(--s3) 0 var(--s3); text-wrap: balance; }
.hero-slide__title .boxed { color: var(--ink); }
.hero-slide__meta { font-size: .95rem; color: rgba(255, 255, 255, .88); }
.hero .slides__dots { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 2; margin: 0; }
.hero .slides__dot::before { background: rgba(255, 255, 255, .4); }
.hero .slides__dot[aria-current="true"]::before { background: #fff; }
@media (min-width: 900px) {
  .hero-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; padding-bottom: 72px; }
  .hero-slide img { order: 2; max-height: 620px; }
  .hero-slide__body { order: 1; padding: var(--s6) var(--s5) var(--s6) max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  .hero-slide__title { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
  .hero .slides__dots { bottom: 14px; }
}

/* On phones the next game lies half over the dark text box (never over the photo) –
   it is the most frequent reason for a visit */
.next-match { position: relative; z-index: 3; margin-top: calc(-1 * var(--s7)); }
@media (min-width: 900px) { .next-match { margin-top: var(--s5); } }

.join { position: relative; overflow: hidden; padding: 28px 22px; border-radius: var(--radius-lg); color: #fff; background: var(--dark-bg); }
.join::before, .join::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 46px; transform: skewX(-18deg); }
.join::before { right: 92px; background: var(--red); }
.join::after { right: -6px; width: 84px; background: var(--green); }
@media (max-width: 479px) {
  .join::before { right: 40px; width: 22px; }
  .join::after { right: -14px; width: 46px; }
}
.join__title { position: relative; font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1; color: #fff; }
.join p { position: relative; margin: var(--s3) 0 var(--s4); max-width: 40ch; padding-right: 40px; color: rgba(255, 255, 255, .9); }
.join__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }

/* Components from design E, in D too: ways in by the situation of life instead of by league … */
.entry-cards { display: grid; gap: var(--s3); }
@media (min-width: 600px) { .entry-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .entry-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entry-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); align-content: start;
  padding: var(--s4); border-radius: var(--radius); background: var(--surface); border: var(--card-border);
  color: var(--text); text-decoration: none; transition: box-shadow .15s;
}
.entry-card:hover { box-shadow: var(--shadow-md); }
.entry-card__icon { grid-row: span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-dark); color: #fff; }
.entry-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; line-height: 1.25; color: var(--text-strong); }
.entry-card__text { font-size: .95rem; }
.entry-card__meta { font-size: .85rem; font-weight: 700; color: var(--link); }

/* … and home match days as dates. Red stands for the home game. */
.homedays { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
@media (min-width: 768px) { .homedays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.homeday {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s3); border-radius: var(--radius); background: var(--surface); border: var(--card-border);
}
.homeday__date { display: grid; place-items: center; height: 56px; border-radius: var(--radius-sm); background: var(--green-dark); color: #fff; line-height: 1.1; text-align: center; }
.homeday__date strong { font: 700 1.4rem/1 var(--font-display); }
.homeday__date span { font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.homeday__text { display: grid; gap: 2px; font-size: .9rem; color: var(--muted); }
.homeday__text strong { font-size: 1rem; color: var(--text-strong); }
/* D shows the next home game large above already (finding M9: no game twice) */
:root[data-design~="d"] .homeday[data-featured] { display: none; }

/* =========================================================================
   12. Footer
   ========================================================================= */

.footer { margin-top: 36px; padding: var(--s6) 0 var(--s5); background: var(--footer-bg); color: var(--footer-text); font-size: .9rem; }
.footer a { display: inline-flex; align-items: center; min-height: var(--tap); color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); color: #fff; }
.footer__brand .brand__sub { color: #5fdcb9; }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.footer__grid h2 { font-family: var(--font); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--footer-head); margin-bottom: var(--s1); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer__bottom { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; color: var(--footer-head); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =========================================================================
   13. Post
   ========================================================================= */

.article { padding-top: var(--s3); }
.article__title { font-size: clamp(1.9rem, 8.5vw, 3.2rem); line-height: 1.02; margin: var(--s2) 0 14px; text-wrap: balance; }
.article__meta { display: flex; align-items: center; gap: var(--s3); font-size: .875rem; color: var(--muted); margin-bottom: var(--s5); }
.article__meta strong { display: block; color: var(--text-strong); }

/* One photo in its full height, several as a slideshow without cropping: portrait stays portrait, the height is only limited
   upwards */
.article__single { margin: 0 calc(-1 * var(--gutter)); }
/* CMS (V10): no width: auto as in the prototype – with it a lazy photo stays 0 px high until it loads. The width attribute is the
   width (never wider than the photo, so nothing is upscaled), height: auto follows its ratio, and the space is reserved before the
   photo loads. Where the browser reads attr() as a number, max-width keeps the height within 78vh in proportion, so the box is the
   photo and the rounded corners are its corners. Elsewhere contain keeps a photo limited in height complete (E10), nothing is
   cropped. */
.article__single img { max-width: 100%; height: auto; max-height: 78vh; margin-inline: auto; object-fit: contain; }
.article__single img[width][height] { max-width: min(100%, calc(78vh * attr(width type(<number>)) / attr(height type(<number>)))); }
.article__media { margin-inline: calc(-1 * var(--gutter)); }
.article__media .slides__item img { width: 100%; height: auto; max-height: 75svh; object-fit: contain; }
.article__media figcaption, .article__single figcaption { padding: var(--s2) var(--gutter) 0; color: var(--muted); font-size: .85rem; }
.article__media .slides__bar { padding-inline: var(--gutter); }
/* CMS (WP04): the track reaches the edges of the phone – the focus ring lies inside, not cut off by the screen */
.article__media .slides__track:focus-visible { outline-offset: -3px; }
/* CMS (WP36): photos, galleries and buttons inside the text of a post – with the space of a figure above and below */
.prose .post-figure, .prose .post-gallery { margin-block: 1.6em; }
.prose .post-figure img { border-radius: var(--radius); }
.prose .post-button { margin-block: 1.4em; }
.prose .post-button .btn { text-decoration: none; }
@media (min-width: 700px) {
  .article__single { margin: 0; }
  .article__single img { border-radius: var(--radius-lg); }
  .article__media { margin-inline: 0; }
  .article__media .slides__item img { border-radius: var(--radius-lg); }
  .article__media figcaption, .article__single figcaption, .article__media .slides__bar { padding-inline: 0; }
}

.score {
  display: grid; gap: 14px; margin: 1.6em 0;
  padding: 18px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--anthracite), var(--ink)); color: #fff;
}
.score__head { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5fdcb9; }
.score__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2); text-align: center; }
.score .team-badge { color: #fff; }
.score .team-badge__logo { background: rgba(255, 255, 255, .1); color: #fff; }
.score .team-badge__logo--home { background: var(--green); }
.score__result { font: var(--display-style) var(--display-weight) 2.6rem/1 var(--font-display); letter-spacing: .04em; }
.score__state { display: block; margin-top: var(--s1); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5fdcb9; text-align: center; }
.score__sets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.set { padding: var(--s1) 9px; border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.set--won { background: rgba(0, 167, 128, .45); }

.sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--s6) 0 6px; padding-top: var(--s4); border-top: 1px solid var(--border); }
.sharebar__label { font-weight: 800; color: var(--text-strong); margin-right: auto; }

/* =========================================================================
   14. Team – one template with modules to switch on (finding H4)
   ========================================================================= */

.team-hero { position: relative; display: flex; align-items: flex-end; min-height: 280px; color: #fff; background: var(--dark-bg); overflow: hidden; }
.team-hero__body { position: relative; z-index: 1; width: 100%; padding-block: var(--s7) var(--s5); }
.team-hero__name { font-size: clamp(2.4rem, 12vw, 4.6rem); line-height: .95; color: #fff; margin-top: var(--s2); }
.team-hero__league { margin-top: var(--s2); font-weight: 700; color: rgba(255, 255, 255, .92); }

/* Without a photo: a calm pattern of the logo instead of an illustration (finding M7) */
.team-hero--plain::before, .team-hero--plain::after { content: ""; position: absolute; top: -10%; bottom: -10%; transform: skewX(-18deg); }
.team-hero--plain::before { right: 96px; width: 40px; background: var(--red); }
.team-hero--plain::after { right: -20px; width: 96px; background: var(--green); }
.team-hero--plain .team-hero__body { padding-right: 150px; }
@media (max-width: 479px) {
  .team-hero--plain::before { right: 46px; width: 22px; }
  .team-hero--plain::after { right: -26px; width: 56px; }
  .team-hero--plain .team-hero__body { padding-right: 70px; }
}

/* With a photo: shown complete, not cropped, no text over the faces.
   Phone: photo above, name below. From tablet width: name on the left, photo on the right (finding M10). */
.team-hero--photo { display: block; min-height: 0; }
.team-hero__photo { display: block; width: 100%; height: auto; }
.team-hero--photo .team-hero__body { padding-block: var(--s4) var(--s5); }
@media (min-width: 768px) {
  .team-hero--photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
  .team-hero--photo .team-hero__photo { order: 2; max-height: 560px; object-fit: contain; }
  .team-hero--photo .team-hero__body { order: 1; padding: var(--s6) var(--gutter) var(--s6) max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  .team-hero--photo .team-hero__name { font-size: clamp(2.4rem, 6vw, 4.6rem); }
}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); max-width: 460px; }
.stat { padding: 10px var(--s3); border-radius: 12px; background: rgba(255, 255, 255, .12); }
.stat__value { display: block; font: var(--display-style) var(--display-weight) 1.5rem/1 var(--font-display); }
.stat__label { font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .85); }

.tabs { position: sticky; top: var(--topbar-h); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--border); }
.tabs__list { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: none; min-height: 52px; padding: var(--s3) var(--s3) 9px; cursor: pointer;
  border: 0; border-bottom: 3px solid transparent; background: none;
  font-weight: 800; font-size: .95rem; color: var(--muted);
}
.tabs__tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--green); }

/* A training time (from the hall plan) */
.slot-list { display: grid; gap: 6px; }
.plan-slot {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 10px var(--s3); border-radius: 12px; border-left: 5px solid var(--c, var(--green));
  background: color-mix(in srgb, var(--c, var(--green)) 14%, var(--surface));
}
.plan-slot__time { font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; font-size: .9rem; }
.plan-slot__group { display: block; font-weight: 800; color: var(--text-strong); }
.plan-slot__fields { font-size: .8rem; color: var(--muted); }
.plan-slot--blocked { --c: var(--muted); background: repeating-linear-gradient(-45deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); }
.plan-empty { padding: var(--s3); border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: .9rem; }
/* CMS (Welle 5): the note below a schedule is a box of its own – a gap to "Spielplan folgt" and to the last game */
.plan-empty + .notice, .fixtures + .notice { margin-top: var(--s3); }

/* Schedule (team and „Spiele & Termine“) */
.fixtures { list-style: none; margin: 0; padding: 0; }
.fixture {
  display: grid; grid-template-columns: 48px 34px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border-bottom: 1px solid var(--border);
}
.fixture__date { text-align: center; line-height: 1.15; }
.fixture__date strong { display: block; font: var(--display-style) var(--display-weight) 1.3rem/1 var(--font-display); color: var(--text-strong); }
.fixture__date span { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.fixture__logo { width: 34px; height: 34px; border-radius: 50%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15)); }
/* An opponent without a crest: its short name in the circle */
.fixture__logo--text { display: grid; place-items: center; filter: none; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 800; }
.fixture__teams strong { display: block; color: var(--text-strong); font-size: .95rem; }
.fixture__teams > span { display: block; font-size: .85rem; color: var(--muted); }
.fixture__side { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: .75rem; font-weight: 800; vertical-align: 1px; background: var(--surface-2); color: var(--muted); }
.fixture__side--home { background: var(--chip-bg); color: var(--chip-text); }
.fixture--home .fixture__date strong { color: var(--link); }
.fixtures-head { margin: var(--s5) 0 var(--s1); font-family: var(--font); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.result { display: inline-grid; place-items: center; min-width: 54px; padding: 6px var(--s2); border-radius: 10px; font: var(--display-style) var(--display-weight) 1rem/1 var(--font-display); }
.result--win { background: var(--chip-bg); color: var(--chip-text); }
.result--loss { background: var(--danger-bg); color: var(--red-text); }
.result--open { background: var(--surface-2); color: var(--muted); font-style: normal; font-weight: 700; font-size: .85rem; }

.standings { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.standings th, .standings td { padding: 11px var(--s2); text-align: left; border-bottom: 1px solid var(--border); }
.standings th { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.standings td.num, .standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
.standings tr:last-child td { border-bottom: 0; }
.standings .is-own td { background: var(--tint-bg); font-weight: 800; color: var(--text-strong); }
.standings .rank { width: 36px; font-weight: 800; color: var(--text-strong); }
@media (max-width: 479px) { .standings .hide-sm { display: none; } }
.team-cell { display: inline-flex; align-items: center; gap: var(--s2); }
.team-cell img { width: 26px; height: 26px; border-radius: 50%; flex: none; }
/* A team without a crest: its initials in the circle, so that every name starts at the same place – never below 12 px (R264) */
.team-cell__logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: -.02em; }

/* Roster: with consent photo and name, otherwise only number and position */
.roster-group { margin-bottom: var(--s4); }
.roster-group h3 { margin-bottom: var(--s2); font-family: var(--font); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .roster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.player-card { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: var(--card-border); }
/* Portraits in their original ratio, nothing cropped. height: auto is required: the image carries its original size as
   width/height (so that nothing jumps) – without auto it would stay 640 px high and become a strip. */
.player-card img { display: block; width: 100%; height: auto; }
.player-card__num {
  position: absolute; top: var(--s2); left: var(--s2); min-width: 38px; padding: var(--s1) var(--s2); border-radius: 10px; text-align: center;
  background: var(--accent); color: var(--accent-text); font: var(--display-style) var(--display-weight) 1.15rem/1 var(--font-display);
}
.player-card__body { display: block; padding: var(--s2) 10px 10px; }
.player-card__name { display: block; font-weight: 800; color: var(--text-strong); font-size: .92rem; line-height: 1.25; }
.player-card__pos { font-size: .8rem; color: var(--muted); }
.player-card--plain { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; }
.player-card--plain .player-card__num { position: static; }
.player-card--plain .player-card__body { padding: 0; }

/* Live stream */
.live { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--radius); background: var(--dark-bg); color: #fff; }
.live__head { display: flex; align-items: center; gap: 10px; }
.live__title { font-family: var(--font); font-size: 1.05rem; font-weight: 800; color: #fff; }
.live__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(225, 2, 27, .6); animation: live-pulse 1.6s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgba(225, 2, 27, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 2, 27, 0); } }
.live p { font-size: .9rem; color: rgba(255, 255, 255, .85); }
.live__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.live > * { min-width: 0; }

/* Two clicks: the player of another service loads only after an explicit consent */
.consent-embed {
  display: grid; place-items: center; gap: 10px; aspect-ratio: 16 / 9; min-width: 0; padding: var(--s4);
  border-radius: 12px; text-align: center; background: #000 linear-gradient(135deg, rgba(0, 167, 128, .25), rgba(0, 0, 0, .9));
}
.consent-embed p { max-width: 36ch; font-size: .85rem; }
/* After the click: the player fills the box in 16:9 */
.consent-embed--loaded { display: block; padding: 0; overflow: hidden; background: #000; }
.consent-embed__frame { display: block; width: 100%; height: 100%; border: 0; }

.sponsors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.sponsor {
  display: grid; gap: var(--s1); place-items: center; min-height: 92px; padding: var(--s3);
  border-radius: var(--radius); background: var(--surface); border: var(--card-border);
  text-align: center; color: var(--text-strong); text-decoration: none; font-weight: 800;
}
.sponsor img { max-width: 100%; max-height: 64px; width: auto; object-fit: contain; }
.sponsor span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.sponsor--cta { border-style: dashed; color: var(--link); }

.team-extra { margin: 6px 0 0; }
.team-extra img { width: 100%; height: auto; border-radius: var(--radius); border: var(--card-border); background: #fff; }
.team-extra figcaption { margin-top: var(--s2); font-size: .85rem; color: var(--muted); }
.insta-section { margin-top: var(--s6); }

/* =========================================================================
   15. Games and dates (finding H3)
   ========================================================================= */

.games-layout { display: grid; gap: var(--s6); }
/* Grid children may become narrower than the filter bar – otherwise it pushes the whole column over the edge */
.games-layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .games-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .games-aside { position: sticky; top: calc(var(--topbar-h) + var(--s5)); }
}
.games-when { max-width: 360px; margin-bottom: var(--s3); }
.games-month { margin: var(--s5) 0 0; font-family: var(--font); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.games-month:first-child { margin-top: 0; }
.fixture__team { font-weight: 800; color: var(--link); }
.pending-teams { display: grid; gap: var(--s2); }
@media (min-width: 768px) { .pending-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pending-teams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* CMS (WP08): the calendar subscription – the choice without JavaScript and the address to copy for calendars on the web */
.calendar-choice { display: grid; gap: 6px; }
.calendar-choice__row, .calendar-url__row { display: flex; gap: var(--s2); align-items: center; }
.calendar-choice__row > .select, .calendar-url__row > .input { flex: 1 1 auto; min-width: 0; }
.calendar-choice__row > .btn, .calendar-url__row > .btn { flex: none; }
.calendar-url { display: grid; gap: 6px; }
.calendar-url .input { font-size: .85rem; color: var(--muted); }
.section > .calendar-url { margin-top: var(--s4); max-width: 640px; }
/* CMS (WP08): two cards beside the list do not fit a low screen while sticky – then they scroll with the page */
@media (min-width: 1024px) and (max-height: 899px) { .games-aside:has(> .card + .card) { position: static; } }

/* =========================================================================
   16. Overview of the teams
   ========================================================================= */

.team-groups { display: grid; gap: 26px; }
.team-group h2 { margin-bottom: var(--s3); }
.team-list { display: grid; gap: var(--s2); }
@media (min-width: 768px) { .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team-card {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3); border-radius: var(--radius); background: var(--surface); border: var(--card-border);
  color: inherit; text-decoration: none; transition: box-shadow .15s;
}
.team-card:hover { box-shadow: var(--shadow-md); }
.team-card__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--chip-bg); color: var(--chip-text); font: var(--display-style) var(--display-weight) .95rem/1 var(--font-display); text-transform: none; }
.team-card--featured { border-color: transparent; background: var(--dark-bg); color: #fff; }
.team-card--featured .team-card__badge { background: var(--accent); color: var(--accent-text); }
.team-card__name { display: block; font-weight: 800; color: var(--text-strong); }
.team-card--featured .team-card__name { color: #fff; }
.team-card__meta { display: block; font-size: .85rem; color: var(--muted); }
.team-card--featured .team-card__meta { color: rgba(255, 255, 255, .85); }
.team-card__days { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 6px; }
.day-chip { padding: 1px 7px; border-radius: 6px; font-size: .75rem; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.team-card--featured .day-chip { background: rgba(255, 255, 255, .14); color: #fff; }

/* =========================================================================
   17. Club
   ========================================================================= */

.people { display: grid; gap: 10px; }
@media (min-width: 768px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.role-card { display: grid; gap: 10px; padding: var(--s4); border-radius: var(--radius); background: var(--surface); border: var(--card-border); }
.role-card__head { display: flex; align-items: center; gap: var(--s3); }
.role-card__role { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.role-card__name { display: block; font-size: 1.05rem; font-weight: 800; color: var(--text-strong); }
.role-card ul { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--text); }
.role-card .btn { justify-self: start; }
.docs { display: grid; gap: var(--s2); }
.docs .file { margin: 0; }
.link-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@media (min-width: 768px) { .link-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.link-tile {
  display: grid; gap: var(--s2); align-content: start; padding: var(--s4); border-radius: var(--radius);
  background: var(--surface); border: var(--card-border); color: var(--text-strong); text-decoration: none; font-weight: 800;
  hyphens: auto; overflow-wrap: anywhere;
}
.link-tile .icon { color: var(--link); }
.link-tile span { font-size: .85rem; font-weight: 600; color: var(--muted); }
/* A menu entry may lead to a single tile (/club#schulkooperation): mark it, the jump alone is hard to see */
.link-tile:target { outline: 2px solid var(--link); outline-offset: 2px; }

/* =========================================================================
   18. Hall plan
   ========================================================================= */

.plan-tools { display: grid; gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .plan-tools { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.plan-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.plan-actions .btn { flex: 1; }
.plan-edit-hint { margin-bottom: 14px; border: 2px dashed var(--green); background: var(--tint-bg); color: var(--text); }
.plan-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); padding: var(--s1); border-radius: 14px; background: var(--surface-2); }
.plan-days button { position: relative; min-height: var(--tap); border: 0; border-radius: 10px; background: none; cursor: pointer; font-weight: 800; color: var(--muted); }
/* The chosen day as in .segmented: an opaque green pill (R252); its dot of a chosen group turns white */
.plan-days button[aria-pressed="true"] { background: var(--green-dark); color: #fff; }
.plan-days button.has-group::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--green); }
.plan-days button[aria-pressed="true"].has-group::after { background: #fff; }
.plan-exception { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: var(--s3) 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); font-size: .9rem; font-weight: 600; }
.plan-hall { margin-bottom: var(--s4); }
.plan-hall__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); margin-bottom: var(--s2); }
.plan-hall__head h2 { font-size: 1.05rem; }
.plan-day-title { margin: var(--s4) 0 var(--s2); font-family: var(--font); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan-slot--editable { width: 100%; border: 0; border-left: 5px solid var(--c, var(--green)); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.plan-slot--editable:hover { filter: brightness(.97); }

/* The weekly grid: from desktop width and in print.
   Hidden for screen readers; they read the weekly list .plan-week-sr (finding M5). */
.plan-grid-wrap { display: none; }
.plan-week-sr { display: none; }
.plan-grid {
  display: grid; gap: 1px; margin-bottom: 22px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border); background: var(--border); font-size: .75rem;
}
.plan-grid__corner, .plan-grid__day, .plan-grid__field, .plan-grid__time, .plan-grid__cell { background: var(--surface); }
.plan-grid__corner { display: grid; place-items: center; padding: var(--s1); font-weight: 900; color: var(--text-strong); text-align: center; line-height: 1.15; }
.plan-grid__day { padding: 6px var(--s1); text-align: center; font-weight: 800; color: var(--text-strong); }
.plan-grid__field { padding: 2px; text-align: center; color: var(--muted); font-size: .75rem; }
.plan-grid__time { padding: 0 6px; display: flex; align-items: center; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-grid__block {
  z-index: 1; margin: 1px; padding: var(--s1) 5px; border-radius: 6px; overflow: hidden;
  display: grid; place-items: center; text-align: center; line-height: 1.15; font-weight: 800; color: var(--text-strong);
  background: color-mix(in srgb, var(--c, var(--green)) 32%, var(--surface)); border: 1.5px solid var(--c, var(--green));
}
.plan-grid__block--blocked { background: repeating-linear-gradient(-45deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); border-color: var(--border); color: var(--muted); font-weight: 600; }
.plan-grid__block.is-dimmed { opacity: .18; }
@media (min-width: 900px) {
  .plan-grid-wrap { display: block; }
  .plan-week-sr {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .plan-list, .plan-days { display: none; }
}
.is-editing .plan-week-sr { display: none; }

.is-editing .plan-grid__block:not(.plan-grid__block--blocked) { position: relative; cursor: grab; touch-action: none; user-select: none; }
.is-editing .plan-grid__block:not(.plan-grid__block--blocked):hover { box-shadow: 0 0 0 2px var(--c, var(--green)); }
.plan-grid__block.is-dragging { z-index: 5; cursor: grabbing; opacity: .92; box-shadow: var(--shadow-lg); }
.plan-grid__block.is-conflict { border-color: var(--red); background: repeating-linear-gradient(-45deg, rgba(225, 2, 27, .18) 0 6px, rgba(225, 2, 27, .08) 6px 12px); }
.plan-grid__label { pointer-events: none; }
.plan-grid__handle { position: absolute; z-index: 2; }
.plan-grid__handle--top, .plan-grid__handle--bottom { left: 18%; right: 18%; height: 8px; cursor: ns-resize; }
.plan-grid__handle--top { top: -2px; }
.plan-grid__handle--bottom { bottom: -2px; }
.plan-grid__handle--top::after, .plan-grid__handle--bottom::after {
  content: ""; position: absolute; left: 50%; top: 3px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: var(--c, var(--green));
}
.plan-grid__handle--right { top: 18%; bottom: 18%; right: -2px; width: 8px; cursor: ew-resize; }
.plan-grid__handle--right::after { content: ""; position: absolute; top: 50%; left: 3px; width: 3px; height: 18px; margin-top: -9px; border-radius: 2px; background: var(--c, var(--green)); }

.legend-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .75rem; font-weight: 700; }
.legend-chip::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--green)); }

.conflicts { display: grid; gap: 6px; margin: var(--s1) 0 var(--s3); }
.conflict { display: flex; gap: var(--s2); align-items: flex-start; padding: 10px var(--s3); border-radius: 12px; background: var(--danger-bg); color: var(--red-text); font-size: .875rem; font-weight: 700; }
.conflict--ok { background: var(--tint-bg); color: var(--tint-text); }

/* =========================================================================
   19. Editing (block editor, media, team form)
   ========================================================================= */

.save-state { display: flex; align-items: center; gap: var(--s1); font-size: .8rem; color: var(--muted); }
.save-state .icon { width: 14px; height: 14px; color: var(--green); }
.save-state.is-dirty { color: var(--warn); font-weight: 700; }

.blocks { display: grid; }
.blocks > * { min-width: 0; }
.block { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.block:focus-within { border-color: var(--green); box-shadow: var(--focus); }
.block.is-new { animation: block-in .25s ease-out; }
@keyframes block-in { from { opacity: 0; transform: translateY(6px); } }
.block__bar { display: flex; align-items: center; padding: 2px 2px 0 var(--s3); color: var(--muted); }
.block__type { display: flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.block__type .icon { width: 16px; height: 16px; }
.block__content { min-height: 1.7em; padding: 2px 14px 14px; outline: none; line-height: 1.65; }
.block__content:empty::before { content: attr(data-placeholder); color: var(--muted); opacity: .8; }
.block--heading .block__content { font: 800 1.3rem/1.3 var(--font-display); color: var(--text-strong); }
.block--quote .block__content { margin: 2px 14px 14px; padding: 2px 0 2px 14px; border-left: 4px solid var(--green); font-weight: 700; font-size: 1.08rem; color: var(--text-strong); }
.block--list .block__content { padding-left: 34px; }
.block__media { display: grid; gap: 10px; padding: 2px 14px 14px; }
.block__media img { width: 100%; border-radius: 12px; }
.block__form { display: grid; gap: 10px; padding: 2px 14px 14px; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.thumbs img, .thumbs a { aspect-ratio: 1; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.thumbs a { display: grid; place-items: center; background: var(--surface-2); color: var(--link); text-decoration: none; }
.sets-input { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sets-input .input { min-height: var(--tap); padding: var(--s2) 2px; text-align: center; font-variant-numeric: tabular-nums; }
.match-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px var(--s3); border-radius: 12px; background: var(--surface-2); font-size: .9rem; }
.match-preview strong { font: var(--display-style) var(--display-weight) 1.3rem/1 var(--font-display); color: var(--text-strong); }

.insert { display: flex; justify-content: center; padding: 2px 0; }
.insert__btn {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  border: 1px dashed var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, transform .15s;
}
.insert__btn:hover { color: var(--link); border-color: var(--green); transform: scale(1.06); }
.insert__btn .icon { width: 20px; height: 20px; }

.block-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.block-type {
  display: grid; justify-items: center; gap: var(--s2); padding: var(--s4) 6px;
  border: 0; border-radius: var(--radius); background: var(--surface-2); cursor: pointer;
  font-size: .85rem; font-weight: 800; color: var(--text-strong); line-height: 1.2; text-align: center;
}
.block-type:hover { background: var(--tint-bg); color: var(--tint-text); }
.block-type .icon { width: 28px; height: 28px; color: var(--link); }
.add-block { margin-top: 10px; border: 2px dashed var(--border); color: var(--link); background: transparent; }
.add-block:hover { border-color: var(--green); background: var(--tint-bg); }

.format-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  display: flex; align-items: center; gap: 2px;
  padding: 6px var(--s2) calc(6px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}
.format-bar button {
  display: grid; place-items: center; min-width: 46px; height: var(--tap); padding: 0 var(--s2);
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-weight: 900; font-size: 1.05rem; color: var(--text-strong);
}
.format-bar button[aria-pressed="true"] { background: var(--tint-bg); color: var(--tint-text); }
.format-bar__sep { width: 1px; height: 24px; margin: 0 var(--s1); background: var(--border); }
.format-bar .format-bar__done { margin-left: auto; color: var(--link); font-size: .9rem; font-weight: 800; }
.fmt-italic { font-style: italic; font-family: Georgia, serif; }

/* Media */
.storage { display: grid; gap: 10px; padding: var(--s4); border-radius: var(--radius); background: var(--surface); border: var(--card-border); }
.storage__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.storage__row strong { font: var(--display-style) var(--display-weight) 1.4rem/1 var(--font-display); color: var(--text-strong); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--green); }
.legend .legend--unused::before { background: #e6a23c; }
.storage__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.storage__actions span { font-size: .875rem; color: var(--text-strong); font-weight: 600; }

.dropzone {
  margin-top: var(--s4); padding: var(--s5) var(--s4); text-align: center;
  border: 2px dashed rgba(0, 167, 128, .55); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color .15s, background .15s, transform .15s;
}
.dropzone.is-over { border-color: var(--green); background: var(--tint-bg); transform: scale(1.01); }
.dropzone__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%; background: var(--tint-bg); color: var(--link); }
.dropzone__title { font-weight: 800; color: var(--text-strong); }
.dropzone__hint { font-size: .85rem; color: var(--muted); margin-top: var(--s1); }
.dropzone__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
.only-touch { display: none; }
@media (pointer: coarse) { .only-touch { display: inline-flex; } .only-mouse { display: none; } }

.uploads { display: grid; gap: var(--s2); margin-top: var(--s3); }
.upload { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s2) var(--s3) var(--s2) var(--s2); border-radius: var(--radius); background: var(--surface); border: var(--card-border); }
.upload__thumb { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--surface-2); color: var(--muted); }
.upload__name { font-size: .9rem; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload__bar { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.upload__fill { width: 0; height: 100%; background: var(--green); transition: width .15s linear; }
.upload__state { margin-top: var(--s1); font-size: .8rem; color: var(--muted); }
.upload--error .upload__state { color: var(--red-text); font-weight: 700; }
.upload--dupe .upload__state { color: var(--warn); font-weight: 700; }

.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
@media (min-width: 600px) { .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
@media (min-width: 900px) { .media-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer; border: 0; border-radius: 8px; background: var(--surface-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s, border-radius .15s; }
.tile__check {
  position: absolute; top: 6px; right: 6px; display: none; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .3); color: transparent;
}
.tile__check .icon { width: 16px; height: 16px; stroke-width: 3; }
.is-selecting .tile__check { display: grid; }

.group { margin-bottom: var(--s4); }
.group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: var(--s2); }
.group__head h3 { font-size: 1rem; }
.group__head span { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.group .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.select-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--ink); color: #fff;
}
.select-bar__inner { display: flex; align-items: center; gap: 10px; max-width: 900px; margin-inline: auto; }
.select-bar__count { flex: 1; font-weight: 800; }

.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 14px 0; font-size: .875rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--text-strong); font-weight: 600; }
.usage { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 6px; }
.usage a { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: var(--s2) var(--s3); border-radius: 12px; background: var(--surface-2); color: var(--text-strong); text-decoration: none; font-weight: 700; font-size: .9rem; }
.usage a .icon { margin-left: auto; color: var(--muted); }
.usage__empty { padding: 10px var(--s3); border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: .9rem; }

/* Editing a team page */
.edit-section { margin-bottom: var(--s3); border-radius: var(--radius); background: var(--surface); border: var(--card-border); }
.edit-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: var(--s3) var(--s4); cursor: pointer; list-style: none; }
.edit-section > summary::-webkit-details-marker { display: none; }
.edit-section > summary strong { display: block; color: var(--text-strong); font-size: 1.02rem; }
.edit-section__meta { font-size: .85rem; color: var(--muted); }
.edit-section[open] > summary .icon { transform: rotate(180deg); }
.edit-section__body { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.edit-section__body .field { margin-bottom: 0; }
.edit-section__body > * { min-width: 0; }
.edit-photo { margin: 0; }
.edit-photo img { width: 100%; height: auto; border-radius: 12px; background: var(--surface-2); }
.edit-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.paragraph-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1); align-items: start; }
.person--edit .input { margin-top: var(--s1); }
.person--pick { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.person--pick:hover { border-color: var(--green); }
.roster-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.roster-row__photo { width: 56px; height: 74px; border-radius: 10px; object-fit: cover; object-position: center 20%; }
.roster-row__photo--empty { display: grid; place-items: center; background: var(--surface); color: var(--muted); }
.roster-row__fields { display: grid; gap: 6px; min-width: 0; }
.roster-row__line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px; }
.roster-row__consent { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); font-size: .875rem; font-weight: 700; }
.roster-row__preview { font-size: .8rem; color: var(--tint-text); }
.roster-row__preview.is-limited { color: var(--warn); }

/* =========================================================================
   20. Print
   ========================================================================= */

/* Every page prints without its frame (bars, menu, footer) and without the room of the bottom bar; dark components keep their
   colours, so that white text never stands on white paper (R260) */
.print-only { display: none; }
@media print {
  body { background: #fff; padding: 0; }
  .skip-link, .proto-strip, .topbar, .editbar, .bottomnav, .footer, .sharebar, .no-print { display: none !important; }
  .print-only { display: block !important; }
  .match, .score, .team-hero, .join, .live, .team-card--featured, .consent-embed, .standings th, .result, .chip, .avatar {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* The hall plan as a notice on A4 in landscape – only the page that holds it is landscape (a named page); every other page keeps
     the orientation the person chooses */
  @page hallplan { size: A4 landscape; margin: 8mm; }
  main:has(.plan-app) { page: hallplan; font-size: 10px; }
  main:has(.plan-app) .section { padding: 0; }
  .plan-tools, .plan-days, .plan-list, .plan-exception { display: none !important; }
  .plan-grid-wrap { display: block !important; }
  .plan-grid { break-inside: avoid; font-size: 8px; margin-bottom: 6mm; }
}

/* Design B „Vereinsgrün“ – friendly, light, calm.
   Idea: the site is first for parents, young people, recreational and Ü49 players, only then for the league teams. The green
   of the logo becomes a surface, text in normal upper and lower case, large radii, shadows instead of frames. Photos stand above
   the text instead of below it – nothing lies on faces. Red stays for live and home games.
   Applies with <html data-design="b"> and is the base of D and F. */

/* ---------- Tokens, light ---------- */

:root[data-design~="b"] {
  --bg: #f1f6f4;
  --surface: #ffffff;
  --surface-2: #e6f0ec;
  --text: #24302c;
  --text-strong: #12201b;
  --muted: #53625c;
  --border: #d6e4de;
  --link: #007a5e;
  --btn: #007a5e;
  --btn-hover: #00654e;
  --accent: #007a5e;
  --accent-hover: #00654e;
  --chip-bg: #ddf0e8;
  --chip-text: #006a51;
  --tint-bg: #ddf0e8;
  --tint-text: #006a51;

  --topbar-bg: #007a5e;
  --topbar-text: #ffffff;
  --topbar-muted: #e3f6ef;
  --dark-bg: #005543;
  --footer-bg: #0d3a30;
  --footer-text: #d2e7df;
  --footer-head: #a9d4c5;

  --display-weight: 800;
  --display-style: normal;
  --display-case: none;
  --display-tracking: -.015em;
  --mark: var(--green);
  --mark-w: 36px;
  --mark-h: 5px;
  --mark-skew: 0deg;

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 28px;
  --card-border: 1px solid transparent;
  --card-shadow: 0 1px 2px rgba(0, 60, 45, .05), 0 6px 18px rgba(0, 60, 45, .07);
  --shadow-sm: 0 1px 2px rgba(0, 60, 45, .06), 0 2px 6px rgba(0, 60, 45, .06);
  --shadow-md: 0 2px 4px rgba(0, 60, 45, .06), 0 10px 24px rgba(0, 60, 45, .1);
}

/* ---------- Tokens, dark ---------- */

@media (prefers-color-scheme: dark) {
  :root[data-design~="b"]:not([data-theme="light"]) {
    --bg: #0d1513;
    --surface: #15201c;
    --surface-2: #1d2a25;
    --text: #e2ece8;
    --text-strong: #f3f8f6;
    --muted: #9fb2aa;
    --border: #283732;
    --link: #4fd6b0;
    --btn: #007a5e;
    --btn-hover: #00654e;
    --accent: #007a5e;
    --accent-hover: #00654e;
    --chip-bg: rgba(0, 167, 128, .2);
    --chip-text: #6fe0bf;
    --tint-bg: rgba(0, 167, 128, .2);
    --tint-text: #6fe0bf;
    --topbar-bg: #0b3f33;
    --topbar-text: #ffffff;
    --topbar-muted: #d2ece3;
    --dark-bg: #0b3f33;
    --footer-bg: #07211b;
    --footer-text: #c3dbd2;
    --footer-head: #93c4b3;
    --card-border: 1px solid var(--border);
    --card-shadow: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  }
}
:root[data-design~="b"][data-theme="dark"] {
  --bg: #0d1513;
  --surface: #15201c;
  --surface-2: #1d2a25;
  --text: #e2ece8;
  --text-strong: #f3f8f6;
  --muted: #9fb2aa;
  --border: #283732;
  --link: #4fd6b0;
  --btn: #007a5e;
  --btn-hover: #00654e;
  --accent: #007a5e;
  --accent-hover: #00654e;
  --chip-bg: rgba(0, 167, 128, .2);
  --chip-text: #6fe0bf;
  --tint-bg: rgba(0, 167, 128, .2);
  --tint-text: #6fe0bf;
  --topbar-bg: #0b3f33;
  --topbar-text: #ffffff;
  --topbar-muted: #d2ece3;
  --dark-bg: #0b3f33;
  --footer-bg: #07211b;
  --footer-text: #c3dbd2;
  --footer-head: #93c4b3;
  --card-border: 1px solid var(--border);
  --card-shadow: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
}

/* ---------- Basics: slightly larger text for all ages ---------- */

:root[data-design~="b"] body { font-size: 1.0625rem; }
:root[data-design~="b"] .section__title { font-size: 1.6rem; letter-spacing: -.02em; }
:root[data-design~="b"] .section__title::after { border-radius: 999px; margin-left: 0; }
:root[data-design~="b"] .page-title { font-size: clamp(2rem, 7vw, 2.8rem); }
:root[data-design~="b"] .kicker { letter-spacing: .06em; }

/* ---------- The top bar in the green of the logo ---------- */

:root[data-design~="b"] .topbar { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-design~="b"] .topbar::after { display: none; }
:root[data-design~="b"] .brand__name { font-size: 1.3rem; letter-spacing: -.01em; }
:root[data-design~="b"] .topbar .brand__sub { color: var(--topbar-muted); letter-spacing: .06em; }
:root[data-design~="b"] .topbar .icon-btn:hover { background: rgba(255, 255, 255, .16); }
@media (min-width: 768px) {
  :root[data-design~="b"] .mainnav a { border-radius: 999px; }
  :root[data-design~="b"] .mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .16); }
  :root[data-design~="b"] .mainnav a[aria-current="page"] { color: #005543; background: #fff; }
}

:root[data-design~="b"] .editbar { background: var(--surface-2); color: var(--text); }
:root[data-design~="b"] .editbar__who { color: var(--muted); }
:root[data-design~="b"] .editbar__who strong { color: var(--text-strong); }
:root[data-design~="b"] .editbar .btn--white { background: var(--btn); color: #fff; }

:root[data-design~="b"] .tabs__list { gap: var(--s1); padding-block: var(--s2); }
:root[data-design~="b"] .tabs__tab { min-height: var(--tap); padding: 0 var(--s4); border: 0; border-radius: 999px; }
:root[data-design~="b"] .tabs__tab[aria-selected="true"] { background: var(--chip-bg); color: var(--chip-text); }

/* ---------- Start page: the picture above the text, like a club newspaper ---------- */

:root[data-design~="b"] .hero { max-width: var(--maxw); margin: var(--s4) auto 0; padding-inline: var(--gutter); background: none; color: inherit; }
:root[data-design~="b"] .hero .slides__track { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
:root[data-design~="b"] .hero-slide { background: var(--surface); color: var(--text); }
:root[data-design~="b"] .hero-slide img { max-height: 70svh; }
:root[data-design~="b"] .hero-slide__body { padding: var(--s4) var(--s5) var(--s5); }
:root[data-design~="b"] .hero-slide__title { color: var(--text-strong); font-size: clamp(1.7rem, 6.5vw, 2.6rem); line-height: 1.15; margin: var(--s3) 0 var(--s2); }
:root[data-design~="b"] .hero-slide__title .boxed { color: inherit; }
:root[data-design~="b"] .hero-slide__meta { color: var(--muted); }
:root[data-design~="b"] .hero .slides__dots { position: static; margin-top: var(--s1); }
:root[data-design~="b"] .hero .slides__dot::before { background: var(--field-line); }
:root[data-design~="b"] .hero .slides__dot[aria-current="true"]::before { background: var(--green-dark); }
@media (min-width: 900px) {
  :root[data-design~="b"] .hero-slide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding-bottom: 0; }
  :root[data-design~="b"] .hero-slide img, :root[data-design~="b"] .hero-slide__body { order: 0; }
  :root[data-design~="b"] .hero-slide__body { padding: var(--s6); }
}
:root[data-design~="b"] .boxed { background: none; padding: 0; color: inherit; }
:root[data-design~="b"] .next-match { margin-top: var(--s5); }

/* Cards: shadows instead of frames, large radii */
:root[data-design~="b"] .match { box-shadow: var(--card-shadow); border: var(--card-border); }
:root[data-design~="b"] .match--featured { box-shadow: var(--shadow-md); border-top: 6px solid var(--green); }
:root[data-design~="b"] .match__date { color: var(--link); }
:root[data-design~="b"] .countdown__part { border-radius: var(--radius-sm); }
:root[data-design~="b"] .news-card__img { border-radius: var(--radius-sm); }
:root[data-design~="b"] .news-card--feature .news-card__img { border-radius: 0; }
:root[data-design~="b"] .news-card--feature .news-card__body::after { border-radius: 999px; }
:root[data-design~="b"] .insta-post { border-radius: var(--radius); }
:root[data-design~="b"] .chip { padding-inline: var(--s3); }
:root[data-design~="b"] .card, :root[data-design~="b"] .person, :root[data-design~="b"] .role-card, :root[data-design~="b"] .file,
:root[data-design~="b"] .link-tile, :root[data-design~="b"] .sponsor, :root[data-design~="b"] .team-card, :root[data-design~="b"] .news-card,
:root[data-design~="b"] .player-card { box-shadow: var(--card-shadow); }

/* „Mitmachen“: soft circles like a ball instead of slanted bars */
:root[data-design~="b"] .join { background: var(--dark-bg); }
:root[data-design~="b"] .join::before, :root[data-design~="b"] .join::after { transform: none; border-radius: 50%; top: auto; bottom: auto; }
:root[data-design~="b"] .join::before { right: -40px; top: -60px; width: 200px; height: 200px; background: rgba(255, 255, 255, .08); }
:root[data-design~="b"] .join::after { right: 60px; top: 70%; width: 120px; height: 120px; background: rgba(0, 167, 128, .55); }

/* ---------- Team ---------- */

:root[data-design~="b"] .team-hero--plain::before, :root[data-design~="b"] .team-hero--plain::after { transform: none; border-radius: 50%; top: auto; }
:root[data-design~="b"] .team-hero--plain::before { right: -50px; top: -70px; width: 220px; height: 220px; background: rgba(255, 255, 255, .08); }
:root[data-design~="b"] .team-hero--plain::after { right: 70px; bottom: -40px; width: 120px; height: 120px; background: rgba(0, 167, 128, .5); }
:root[data-design~="b"] .team-hero__name { font-size: clamp(2.2rem, 10vw, 3.8rem); line-height: 1.05; }
@media (min-width: 768px) {
  :root[data-design~="b"] .team-hero--photo .team-hero__name { font-size: clamp(2.2rem, 5vw, 3.8rem); }
}
:root[data-design~="b"] .stat { border-radius: var(--radius-sm); }
:root[data-design~="b"] .player-card__num { border-radius: 999px; }
:root[data-design~="b"] .fixture__side--home { background: rgba(225, 2, 27, .1); color: #b80016; }
:root[data-design~="b"] .fixture--home .fixture__date strong { color: #b80016; }
:root[data-design~="b"] .standings { box-shadow: var(--card-shadow); }
:root[data-design~="b"] .live { border-radius: var(--radius); }
:root[data-design~="b"] .consent-embed { border-radius: var(--radius-sm); }
:root[data-design~="b"] .team-card__badge { border-radius: 50%; font-weight: 800; }

@media (prefers-color-scheme: dark) {
  :root[data-design~="b"]:not([data-theme="light"]) .fixture__side--home { background: rgba(255, 107, 120, .16); color: #ff8a95; }
  :root[data-design~="b"]:not([data-theme="light"]) .fixture--home .fixture__date strong { color: #ff8a95; }
  :root[data-design~="b"]:not([data-theme="light"]) .mainnav a[aria-current="page"] { color: #0b3f33; }
}
:root[data-design~="b"][data-theme="dark"] .fixture__side--home { background: rgba(255, 107, 120, .16); color: #ff8a95; }
:root[data-design~="b"][data-theme="dark"] .fixture--home .fixture__date strong { color: #ff8a95; }

/* ---------- Editing pages: the same shapes ---------- */

:root[data-design~="b"] .block, :root[data-design~="b"] .edit-section, :root[data-design~="b"] .storage { box-shadow: var(--card-shadow); }
:root[data-design~="b"] .input, :root[data-design~="b"] .select, :root[data-design~="b"] .textarea { border-radius: var(--radius-sm); }

/* Design D „Vereinsgrün mit Spieltag“ – the recommendation of the design review.
   Idea: B as the base, because the department consists mainly of youth, recreational and grassroots groups. Where games are
   concerned – match card, countdown, schedule, results, table – the scoreboard of C joins, in club green instead of black and
   without the narrow type of the device (finding C1). With it the two open findings of B: the match card gets weight (B1), chips
   and secondary buttons become neutral, so that green means acting again (B2). From E, D takes the components „Finde deine
   Gruppe“ and the home match days of the start page and „Mitmachen“ fixed in head and bottom bar.
   Applies with <html data-design="b d">: B brings everything else, this part only adds. */

/* ---------- Tokens ---------- */

:root[data-design~="d"] {
  /* Scoreboard: an almost black club green */
  --score-bg: #0f2a23;
  --score-2: #1f4038;
  --score-muted: #b9d3c9;
  --score-accent: #7ee6c8;
  /* A button on the board while hovered – as a token, so that F only swaps colours (C1) */
  --score-3: #2b5348;
  /* Neutral chips: green stays for links, buttons and selection (B2) */
  --chip-bg: #e8eeeb;
  --chip-text: #34433d;
  --ghost-line: #b9cbc3;
}
@media (prefers-color-scheme: dark) {
  :root[data-design~="d"]:not([data-theme="light"]) {
    --score-bg: #12322a;
    --score-2: #22483e;
    --score-3: #2f5a4e;
    --score-muted: #b9d3c9;
    --chip-bg: rgba(255, 255, 255, .08);
    --chip-text: #cfdcd7;
    --ghost-line: #3d534b;
  }
}
:root[data-design~="d"][data-theme="dark"] {
  --score-bg: #12322a;
  --score-2: #22483e;
  --score-3: #2f5a4e;
  --score-muted: #b9d3c9;
  --chip-bg: rgba(255, 255, 255, .08);
  --chip-text: #cfdcd7;
  --ghost-line: #3d534b;
}

/* ---------- The second button style: an outline instead of a green surface (B2) ---------- */

:root[data-design~="d"] .btn--ghost { background: var(--surface); color: var(--text-strong); box-shadow: inset 0 0 0 1.5px var(--ghost-line); }
:root[data-design~="d"] .btn--ghost:hover { background: var(--surface-2); }

/* ---------- The match card as a scoreboard (from C, B1) ---------- */

:root[data-design~="d"] .match { background: var(--score-bg); color: #fff; border: 0; box-shadow: var(--card-shadow); }
:root[data-design~="d"] .match--featured { box-shadow: var(--shadow-md); border-top: 6px solid var(--green); }
:root[data-design~="d"] .match__label,
:root[data-design~="d"] .match__league,
:root[data-design~="d"] .match__place,
:root[data-design~="d"] .match__more { color: var(--score-muted); }
:root[data-design~="d"] .match__date { color: var(--score-accent); }
:root[data-design~="d"] .match__time { color: #fff; font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* "Uhrzeit folgt" in place of a time (R223): smaller, so it fits the middle of the board */
.match__time--open,
:root[data-design~="d"] .match__time--open { font-size: 1.1rem; letter-spacing: 0; text-align: center; }
:root[data-design~="d"] .match .team-badge { color: #fff; }
:root[data-design~="d"] .match .team-badge__logo:not(.team-badge__logo--img) { background: var(--score-2); color: #fff; }
:root[data-design~="d"] .match .chip { background: var(--score-2); color: #fff; }
/* Red stays for live – on the board the Twitch button is red, not green */
:root[data-design~="d"] .match .btn--primary { background: var(--red); }
:root[data-design~="d"] .match .btn--primary:hover { background: var(--red-hover); }
:root[data-design~="d"] .match .btn--ghost { background: var(--score-2); color: #fff; box-shadow: none; }
:root[data-design~="d"] .match .btn--ghost:hover { background: var(--score-3); }
:root[data-design~="d"] .countdown__part { background: var(--score-2); border-radius: var(--radius-sm); }
:root[data-design~="d"] .countdown__value { color: #fff; font-size: 1.9rem; font-weight: 800; }
:root[data-design~="d"] .countdown__label { color: var(--score-muted); }

/* ---------- Schedule and results (from C) ---------- */

:root[data-design~="d"] .fixture__date strong { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
:root[data-design~="d"] .fixture--home { box-shadow: inset 4px 0 0 var(--red); padding-left: var(--s2); }
:root[data-design~="d"] .fixture__logo--text, :root[data-design~="d"] .team-cell__logo { background: var(--score-bg); color: #fff; }
:root[data-design~="d"] .fixtures-head,
:root[data-design~="d"] .games-month { color: var(--text-strong); }
:root[data-design~="d"] .result { min-width: 58px; border-radius: var(--radius-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
:root[data-design~="d"] .result--win { background: var(--green-dark); color: #fff; }
:root[data-design~="d"] .result--loss { background: var(--score-bg); color: #fff; }
:root[data-design~="d"] .result--open { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border); }
:root[data-design~="d"] .standings th { background: var(--score-bg); color: #fff; }
:root[data-design~="d"] .stat__value { font-variant-numeric: tabular-nums; }

/* Start page: the card „Nächstes Heimspiel“ stands below the opener like a board in the hall */
:root[data-design~="d"] .next-match .match { padding: var(--s5); }

/* ---------- Components from E: „Finde deine Gruppe“, home match days, „Mitmachen“ ---------- */

/* Cards as in B: shadows instead of frames */
:root[data-design~="d"] .entry-card,
:root[data-design~="d"] .homeday { box-shadow: var(--card-shadow); }
:root[data-design~="d"] .entry-card:hover { box-shadow: var(--shadow-md); }
:root[data-design~="d"] .entry-card__title { font-size: 1.15rem; }
/* On the green top bar a green button would be invisible – „Mitmachen“ stands white on it */
:root[data-design~="d"] .topbar__cta { background: #fff; color: #00543f; }
:root[data-design~="d"] .topbar__cta:hover { background: #e6f4ef; }
:root[data-design~="d"] .bottomnav [data-nav="mitmachen"] .icon { color: var(--red); }

/* Design F „Sportlich mit Spieltag“ – structure and content of D, colours of A (E13).
   Idea (feedback of 06.10.2026): A and D were liked best. F takes D unchanged – the start page with „Finde deine Gruppe“ and the
   home match days, the scoreboard, soft cards, normal case – and lays the colours of A over it: a white top bar with the
   red-green divider, anthracite instead of club green as the dark surface (board, „Mitmachen“, footer, team head), the slanted
   red-green bars of the „R“ below the headings. „Mitmachen“ stands red in head and bottom bar.
   Rule of colours (review part 4): green means acting and choosing, grey is a label, red means „komm vorbei“ – Mitmachen, home
   game (day), live. So league labels, roster numbers and the badge of the 1. Damen are not red here (F1).
   Taken from B on purpose: the light tool bar for people signed in (F6) and the green top edge of the board (F5).
   Applies with <html data-design="b d f">: B and D bring structure and shapes, this part swaps colours only. Its rules stand
   after B and D on purpose and with the same specificity. */

/* ---------- Tokens, light: the values of A ---------- */

:root[data-design~="f"] {
  --bg: #f5f5f6;
  --surface: #ffffff;
  --surface-2: #efeef1;
  --text: #29262a;
  --text-strong: #1c1a1d;
  --muted: #625e66;
  --border: #e5e3e8;
  --link: #007a5e;
  --btn: #007a5e;
  --btn-hover: #00654e;
  --accent: #e1021b;
  --accent-hover: #b80016;
  /* Chips stay neutral as in D (B2), only in the grey of A */
  --chip-bg: #efeef1;
  --chip-text: #4a4650;
  --tint-bg: #e0f4ee;
  --tint-text: #007a5e;

  --topbar-bg: rgba(255, 255, 255, .94);
  --topbar-text: #1c1a1d;
  --topbar-muted: #625e66;
  --dark-bg: #29262a;
  --footer-bg: #29262a;
  --footer-text: #c3cdd2;
  --footer-head: #9fb0b8;

  /* The slanted red-green bars of the „R“ below the headings, as in A (F4) */
  --mark: var(--stripe);
  --mark-w: 46px;
  --mark-h: 6px;
  --mark-skew: -24deg;

  --card-shadow: 0 1px 2px rgba(28, 26, 29, .05), 0 6px 18px rgba(28, 26, 29, .07);
  --shadow-sm: 0 1px 2px rgba(28, 26, 29, .06), 0 2px 6px rgba(28, 26, 29, .06);
  --shadow-md: 0 2px 4px rgba(28, 26, 29, .06), 0 10px 24px rgba(28, 26, 29, .1);

  /* The scoreboard in anthracite instead of an almost black green; --score-3 is the button while hovered (C1) */
  --score-bg: #29262a;
  --score-2: #3b373f;
  --score-3: #4a4550;
  --score-muted: #c3cdd2;
  --score-accent: #3cd0a8;
  --score-edge: transparent;
  /* The outline of the secondary buttons with at least 3:1 on white (L3) – the outline of fields too (--field-line) */
  --ghost-line: #8f8a96;
}

/* ---------- Tokens, dark ---------- */

@media (prefers-color-scheme: dark) {
  :root[data-design~="f"]:not([data-theme="light"]) {
    --bg: #121113;
    --surface: #1c1a1d;
    --surface-2: #272429;
    --text: #e7e5e9;
    --text-strong: #f6f5f7;
    --muted: #a8a3ad;
    --border: #343036;
    --link: #3cd0a8;
    --btn: #007a5e;
    --btn-hover: #00654e;
    --accent: #e1021b;
    --accent-hover: #b80016;
    --chip-bg: rgba(255, 255, 255, .08);
    --chip-text: #cfccd2;
    --tint-bg: rgba(0, 167, 128, .2);
    --tint-text: #5fdcb9;
    --topbar-bg: rgba(22, 20, 23, .92);
    --topbar-text: #f6f5f7;
    --topbar-muted: #a8a3ad;
    --dark-bg: #232025;
    --footer-bg: #0d0c0e;
    --footer-text: #c3cdd2;
    --footer-head: #9fb0b8;
    --card-border: 1px solid var(--border);
    --card-shadow: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    /* The board one step lighter than the cards and with a fine edge, so that it stands out in the dark (F3) */
    --score-bg: #332f37;
    --score-2: #443f49;
    --score-3: #544e5a;
    --score-muted: #c3cdd2;
    --score-accent: #3cd0a8;
    --score-edge: rgba(255, 255, 255, .1);
    --ghost-line: #7d7884;
  }
}
:root[data-design~="f"][data-theme="dark"] {
  --bg: #121113;
  --surface: #1c1a1d;
  --surface-2: #272429;
  --text: #e7e5e9;
  --text-strong: #f6f5f7;
  --muted: #a8a3ad;
  --border: #343036;
  --link: #3cd0a8;
  --btn: #007a5e;
  --btn-hover: #00654e;
  --accent: #e1021b;
  --accent-hover: #b80016;
  --chip-bg: rgba(255, 255, 255, .08);
  --chip-text: #cfccd2;
  --tint-bg: rgba(0, 167, 128, .2);
  --tint-text: #5fdcb9;
  --topbar-bg: rgba(22, 20, 23, .92);
  --topbar-text: #f6f5f7;
  --topbar-muted: #a8a3ad;
  --dark-bg: #232025;
  --footer-bg: #0d0c0e;
  --footer-text: #c3cdd2;
  --footer-head: #9fb0b8;
  --card-border: 1px solid var(--border);
  --card-shadow: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --score-bg: #332f37;
  --score-2: #443f49;
  --score-3: #544e5a;
  --score-muted: #c3cdd2;
  --score-accent: #3cd0a8;
  --score-edge: rgba(255, 255, 255, .1);
  --ghost-line: #7d7884;
}

/* ---------- Top bar: white with the red-green divider, as in A ---------- */

:root[data-design~="f"] .topbar {
  box-shadow: 0 1px 0 var(--border);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
:root[data-design~="f"] .topbar::after { display: block; }
:root[data-design~="f"] .topbar .brand__sub { color: var(--link); }
:root[data-design~="f"] .topbar .icon-btn:hover { background: var(--surface-2); }
/* The current menu entry as an opaque green pill: a shape, not just a tint (L2) */
@media (min-width: 768px) {
  :root[data-design~="f"] .topbar .mainnav a:hover { color: var(--topbar-text); background: var(--surface-2); }
  :root[data-design~="f"] .topbar .mainnav a[aria-current="page"] { color: #fff; background: var(--green-dark); }
}
/* „Mitmachen“ in red – a button on the white bar, a red dot in the bottom bar */
:root[data-design~="f"] .topbar__cta { background: var(--red); color: #fff; }
:root[data-design~="f"] .topbar__cta:hover { background: var(--red-hover); }
:root[data-design~="f"] .bottomnav [data-nav="mitmachen"] { color: var(--red-text); }
:root[data-design~="f"] .bottomnav [data-nav="mitmachen"] .icon { color: var(--red); }
/* The current page in the bottom bar: an opaque pill with a white icon (L2); were it „Mitmachen“, it stays red (V2) */
:root[data-design~="f"] .bottomnav [aria-current="page"] .bottomnav__pill { background: var(--green-dark); }
:root[data-design~="f"] .bottomnav [data-nav="mitmachen"][aria-current="page"] .bottomnav__pill { background: var(--red); }
:root[data-design~="f"] .bottomnav [aria-current="page"] .bottomnav__pill .icon { color: #fff; }

/* Selection is green (B2 still applies): the active tab as an opaque pill (L2) */
:root[data-design~="f"] .tabs__tab[aria-selected="true"] { background: var(--green-dark); color: #fff; }

/* ---------- Headings: bars as in A, slanted and without radius ---------- */

:root[data-design~="f"] .section__title::after { border-radius: 0; margin-left: 3px; }

/* ---------- Red only for „komm vorbei“: labels and numbers in anthracite instead of red (F1) ---------- */

:root[data-design~="f"] .chip--accent { background: var(--anthracite); color: #fff; }
:root[data-design~="f"] .player-card__num { background: var(--anthracite); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root[data-design~="f"]:not([data-theme="light"]) .chip--accent,
  :root[data-design~="f"]:not([data-theme="light"]) .player-card__num { background: var(--surface-2); color: var(--text-strong); }
}
:root[data-design~="f"][data-theme="dark"] .chip--accent,
:root[data-design~="f"][data-theme="dark"] .player-card__num { background: var(--surface-2); color: var(--text-strong); }
/* On the dark team head: a line on a white ground as in A */
:root[data-design~="f"] .team-hero .chip--accent { background: #fff; color: var(--anthracite); }
:root[data-design~="f"] .team-card--featured .team-card__badge { background: var(--green-dark); color: #fff; }

/* ---------- Scoreboard: a fine edge in the dark (F3) ---------- */

:root[data-design~="f"] .match { box-shadow: var(--card-shadow), inset 0 0 0 1px var(--score-edge); }
:root[data-design~="f"] .match--featured { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--score-edge); }

/* ---------- Dark surfaces in anthracite: red and green as in A in the decoration too (F5) ---------- */

:root[data-design~="f"] .join::before,
:root[data-design~="f"] .team-hero--plain::before { background: rgba(225, 2, 27, .35); }

/* =========================================================================
   Additions of the CMS (on the server instead of by script as in the prototype)
   ========================================================================= */

/* Filters as links: the shape of the buttons, „aktuell“ as pressed */
a.filter { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.filter[aria-current="page"] { background: var(--text-strong); border-color: transparent; color: var(--bg); }

/* CMS (WP04): the full screen of a gallery. Nine dots still fit beside each other at 320 px, from ten the counter alone tells the
   place; the focus ring is white on black. */
.lightbox .slides__dots:has(> :nth-child(10)) { display: none; }
.lightbox :focus-visible { outline-color: #fff; }
.lightbox .slides__track:focus-visible { outline-offset: -3px; }

/* Local only: test accounts instead of the sign-in service */
.dev-accounts { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s2); }
.dev-account { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--surface);
  border: var(--card-border); box-shadow: var(--card-shadow); color: var(--text-strong); text-decoration: none; }
.dev-account span { font-size: .85rem; color: var(--muted); }
.dev-account--off { color: var(--muted); box-shadow: none; }

/* CMS: contact form – the trap field is out of sight for people, not for simple bots */
.contact-form { max-width: 42rem; display: grid; gap: var(--s3); }
.form-alert { margin: 0 0 var(--s3); padding: 10px var(--s3); border-left: 4px solid var(--red); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-strong); }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* CMS: data access (account-data.php) – label above value on the phone, side by side from 600 px */
.data-list { display: grid; gap: 2px 14px; margin: 14px 0; }
.data-list dt { color: var(--muted); font-size: .85rem; }
.data-list dd { margin: 0 0 var(--s2); color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .data-list { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
  .data-list dd { margin: 0; }
}

/* CMS: a row of buttons below a text (account pages, messages) – buttons wrap with a gap instead of touching each other */
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; }
.button-row > form { margin: 0; }

/* CMS: a plain list in the width of the lead text (account-delete.php) */
.page-list { max-width: 62ch; margin: 0 0 var(--s4); padding-left: 1.25rem; display: grid; gap: var(--s2); }
.page-list li::marker { color: var(--muted); }

/* CMS: a tick that confirms something lasting, as a field with a full tap area */
.confirm-check {
  display: flex; align-items: flex-start; gap: var(--s3); max-width: 62ch; min-height: var(--tap); padding: var(--s3) 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-strong); font-weight: 700; cursor: pointer;
}
.confirm-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green-dark); }
.confirm-check:has(input:checked) { border-color: var(--green); background: var(--tint-bg); color: var(--tint-text); }
.confirm-check:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* CMS (WP05): the colour of a training group as a class – the palette of the hall plan (Cms\Site\HallPlan::COLORS, same order).
   Another colour (an imported plan) comes from data-color through the CSSOM (site.js); never a style attribute (rule 5). */
.group-color--0 { --c: #e1021b; } .group-color--1 { --c: #ef7d1a; } .group-color--2 { --c: #c2185b; } .group-color--3 { --c: #9575cd; }
.group-color--4 { --c: #00a780; } .group-color--5 { --c: #5e35b1; } .group-color--6 { --c: #4a6fa5; } .group-color--7 { --c: #7cb342; }
.group-color--8 { --c: #558b2f; } .group-color--9 { --c: #e0a800; } .group-color--10 { --c: #78909c; } .group-color--11 { --c: #42a5f5; }
.group-color--12 { --c: #ec6fae; } .group-color--13 { --c: #8d6e63; } .group-color--14 { --c: #43a047; } .group-color--15 { --c: #283593; }
.group-color--16 { --c: #1e88e5; }

/* CMS (WP05): the sticky tab bar of a team page covers the top of a panel the address jumps to */
.tabs:not([hidden]) ~ .container [role="tabpanel"], .tabs:not([hidden]) ~ .container [role="tabpanel"] [id] { scroll-margin-top: 72px; }