/* === Discbase "Flight Deck" brand system (Phase 14a) ===
   Public-facing pages only (tournament calendar, a single tournament's
   page, login/signup/reset, impressum) - deliberately separate from
   static/style.css's "Fairway & Sky" theme, which stays exactly as-is
   for the admin/team-internal tooling. Every class here is fd-prefixed
   so it can never collide with Bootstrap's own classes or style.css's.
   Concept: a disc's flight rating (speed/glide/turn/fade) is real,
   printed disc golf terminology - Discbase "tracks" that flight, from
   registration to the final putt. See the approved concept mockup for
   the full rationale. */

:root {
  --fd-ink: #1c2a3a;
  --fd-ink-soft: #46566b;
  --fd-slate: #647184;
  --fd-sky: #eef1f4;
  --fd-paper: #ffffff;
  --fd-paper-inset: #f4f6f8;
  --fd-signal: #4d7d72;
  --fd-signal-glow: #5f9186;
  --fd-signal-soft: #eaf3ec;
  --fd-flare: #ab7a48;
  --fd-flare-soft: #f1e9dd;
  --fd-line: #dbe1e7;
  --fd-hero-bg: #1a2636;
  --fd-hero-ink: #eef1f4;
  --fd-hero-line: rgba(238,241,244,0.14);
  --fd-hero-slate: #a9b4c1;
  --fd-focus: #4d7d72;

  /* Admin re-skin tokens (Phase 34a) - admin content is forced to light
     via <html data-theme="light"> in base.html, so most of these need no
     dark-mode variant. Deliberately NOT reusing --fd-signal/--fd-flare
     (those already carry other meanings elsewhere) - see Phase 34
     masterplan. --fd-danger/--fd-danger-soft are the two exceptions: they
     also back .fd-alert-danger, which (unlike everything else in this
     block) is used on public/theme-adaptive pages too - see their dark-
     mode overrides below, safe to add since admin's own forced-light
     <html data-theme="light"> never reads those blocks regardless. */
  --fd-division-open: #2E6F9E;
  --fd-division-mixed: #2F7A40;
  --fd-division-open-soft: #eaf2f8;
  --fd-division-mixed-soft: #eaf3ec;
  --fd-danger: #C0392B;
  --fd-danger-soft: #fdecea;
  --fd-team-a: #2E6F9E;
  --fd-team-b: #D9691B;
  --fd-team-a-soft: #eaf2f8;
  --fd-team-b-soft: #fbede1;

  /* Deliberately NOT redefined in the dark-mode blocks below - .fd-hero's
     own background stays a dark navy band regardless of the site's
     light/dark toggle (see --fd-hero-bg above, same value in both blocks),
     so form fields sitting on it (the calendar's filter panel) need a
     fixed light chrome to stay readable, not the adaptive --fd-paper-inset/
     --fd-ink pair (which turns dark-on-dark once the toggle is set to
     dark - the bug this fixes: a barely-visible search field). */
  --fd-hero-field-bg: #ffffff;
  --fd-hero-field-ink: #1c2a3a;
  --fd-hero-field-placeholder: #647184;
}

/* Tells the browser which palette to render native controls (select,
   input[type=date], scrollbars, ...) in - without this, a browser's own
   dark-mode heuristics can mis-color unstyled native widgets (seen as
   garbled multi-colored text in a <select>/date input under a dark OS
   theme) since it has no way to know the page already has its own dark
   tokens. Default supports both (browser follows the OS, matching the
   prefers-color-scheme fallback below); an explicit data-theme choice
   (manual toggle, or admin's forced light) pins it to match exactly. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fd-ink: #e6eaee;
    --fd-ink-soft: #b7c0cb;
    --fd-slate: #93a0af;
    --fd-sky: #0b121a;
    --fd-paper: #1c2836;
    --fd-paper-inset: #131b26;
    --fd-signal: #79a89c;
    --fd-signal-glow: #8ab8ac;
    --fd-signal-soft: #17251e;
    --fd-flare: #c19566;
    --fd-flare-soft: #2c2620;
    --fd-danger: #e0655a;
    --fd-danger-soft: #3a1f1c;
    --fd-line: #3c4a5c;
    --fd-hero-bg: #070b10;
    --fd-hero-ink: #eef1f4;
    --fd-hero-line: rgba(238,241,244,0.16);
    --fd-hero-slate: #93a0af;
    --fd-focus: #79a89c;
  }
}

:root[data-theme="dark"] {
  --fd-ink: #e6eaee;
  --fd-ink-soft: #b7c0cb;
  --fd-slate: #93a0af;
  --fd-sky: #0b121a;
  --fd-paper: #1c2836;
  --fd-paper-inset: #131b26;
  --fd-signal: #79a89c;
  --fd-signal-glow: #8ab8ac;
  --fd-signal-soft: #17251e;
  --fd-flare: #c19566;
  --fd-flare-soft: #2c2620;
  --fd-danger: #e0655a;
  --fd-danger-soft: #3a1f1c;
  --fd-line: #3c4a5c;
  --fd-hero-bg: #070b10;
  --fd-hero-ink: #eef1f4;
  --fd-hero-line: rgba(238,241,244,0.16);
  --fd-hero-slate: #93a0af;
  --fd-focus: #79a89c;
}

body.fd-body {
  background: var(--fd-sky);
  color: var(--fd-ink);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
/* Bootstrap's own .text-muted/.form-text color (--bs-secondary-color) is
   never wired to this project's dark-mode tokens - loaded after Bootstrap
   in every page's <head>, so this plain override already wins the cascade
   without !important. Without it, helper text/hints render as barely-
   visible dark-gray-on-dark-navy the moment the page is in dark theme. */
body.fd-body .text-muted, body.fd-body .form-text { color: var(--fd-slate); }
/* Same problem, different mechanism: Bootstrap 5.3's own .alert-success/
   -danger/-warning set fixed light-only values via --bs-alert-* custom
   properties, so a flash message (login/signup errors, "already
   registered" notices, ...) always renders as a bright light-tinted box
   no matter the theme - reusing this project's own tokens through the
   same custom-property hooks fixes every such alert everywhere at once,
   with no template changes (this also covers alert-dismissible's fade/
   show/role="alert" flash pattern used across every auth/registration
   page - only the color variables change, the dismiss button/JS keep
   working exactly as Bootstrap already wires them). */
body.fd-body .alert-success { --bs-alert-color: var(--fd-signal); --bs-alert-bg: var(--fd-signal-soft); --bs-alert-border-color: var(--fd-line); }
body.fd-body .alert-danger { --bs-alert-color: var(--fd-danger); --bs-alert-bg: var(--fd-danger-soft); --bs-alert-border-color: var(--fd-line); }
body.fd-body .alert-warning { --bs-alert-color: var(--fd-flare); --bs-alert-bg: var(--fd-flare-soft); --bs-alert-border-color: var(--fd-line); }
/* Bootstrap's default .btn-close icon is a dark SVG, fine on the light
   alert backgrounds above in light theme but invisible against their
   dark-tinted equivalents once the theme is dark - the same filter
   Bootstrap's own .btn-close-white variant uses, applied automatically
   instead of requiring every dismiss button to carry that extra class. */
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}
.fd-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.fd-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.fd-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fd-signal); font-weight: 600;
}

/* ---------- Nav ---------- */
.fd-nav { background: var(--fd-hero-bg); color: var(--fd-hero-ink); border-bottom: 1px solid var(--fd-hero-line); }
.fd-nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.fd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fd-signal-glow); }
.fd-brand svg { display: block; }
.fd-brand-word {
  font-family: 'Big Shoulders', system-ui, sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--fd-hero-ink);
}
.fd-brand-word .fd-accent { color: var(--fd-signal-glow); }
.fd-nav-links { display: flex; gap: 18px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.fd-nav-links a { text-decoration: none; color: var(--fd-hero-slate); font-weight: 600; letter-spacing: 0.02em; }
@media (hover: hover) and (pointer: fine) {
  .fd-nav-links a:hover { color: var(--fd-hero-ink); }
}
.fd-nav-links .fd-btn-ghost { border: 1px solid var(--fd-hero-line); padding: 7px 14px; border-radius: 3px; color: var(--fd-hero-ink); }

/* Manual light/dark toggle (see _theme_toggle.html) - default styling sits
   on .fd-nav's own dark hero background, so it borrows the hero tokens
   (not --fd-ink/--fd-paper, which would be invisible there); the
   -paper/-fixed modifiers place it on a page with no dark nav bar (the
   auth cards), sitting directly on the page's own light/dark ground. */
.fd-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; font-size: 15px;
  border: 1px solid var(--fd-hero-line); background: transparent; color: var(--fd-hero-ink);
  cursor: pointer; transition: background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fd-theme-toggle:hover { background: rgba(255,255,255,0.08); }
}
.fd-theme-toggle-paper {
  border-color: var(--fd-line); color: var(--fd-ink-soft); background: var(--fd-paper);
}
@media (hover: hover) and (pointer: fine) {
  .fd-theme-toggle-paper:hover { background: var(--fd-paper-inset); color: var(--fd-ink); }
}
.fd-theme-toggle-fixed { position: fixed; top: 16px; right: 16px; z-index: 1050; }
/* _locale_switcher.html reuses .fd-theme-toggle's circle/border/hover but
   shows a 2-letter language code instead of an icon glyph - needs a
   smaller, bolder font to stay legible at the same 32px size. */
.fd-locale-toggle { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.fd-locale-switcher-form { display: inline-flex; }
/* Sits 40px left of .fd-theme-toggle-fixed (32px button + 8px gap) so the
   two toggles line up side by side instead of overlapping on the auth
   cards, which have no navbar to hold either of them inline. */
.fd-locale-toggle-fixed { position: fixed; top: 16px; right: 56px; z-index: 1050; }

/* ---------- Admin nav (Phase 22d) ----------
   Reskins base.html's existing Bootstrap navbar (dropdowns/collapse/
   toggler stay entirely Bootstrap-JS-driven - only colors/typography
   change here, reached through the cascade, same technique .fd-reg-card
   below uses for plain Bootstrap form-control/form-select markup) - denser
   than the public .fd-nav above (more items, dropdowns, a badge), so it
   gets its own modifier class instead of reusing .fd-nav's own layout
   rules. Every existing nav_menu-gated {% if %}/link/dropdown/href in
   base.html stays structurally identical; this is a pure visual pass. */
.fd-admin-nav { background: var(--fd-hero-bg) !important; border-bottom: 1px solid var(--fd-hero-line); }
.fd-admin-nav .fd-brand { margin-right: 8px; }
.fd-cal-top > #pwa-install-banner:not(.d-none), .fd-cal-top > .fd-myev { margin-top: 16px; }
.fd-admin-nav .fd-brand-word { font-size: 19px; }
/* Langer Turniername (Prüfung 2026-10-12): einzeilig mit "…" statt dreizeilig - der volle Name steht im Tooltip. */
.fd-admin-nav .fd-brand-word { display: inline-block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (max-width: 991.98px) { .fd-admin-nav .fd-brand-word { max-width: 62vw; } }
/* Kleine Laptops/Tablets quer (2026-10-12, "Turnierverwaltung"/"Serienverwaltung" sind länger): links nur Text ohne Symbole,
   Turniername kürzer - sonst rutschen die Symbole rechts aus dem Bild */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .fd-admin-nav.navbar-expand-lg .navbar-nav.me-auto .nav-link > .bi { display: none; }
  .fd-admin-nav.navbar-expand-lg .navbar-nav.me-auto .nav-link { padding-left: .5rem; padding-right: .5rem; }
  .fd-admin-nav.navbar-expand-lg .fd-brand-word { max-width: 190px; }
}
@media (min-width: 992px) and (max-width: 1099.98px) { .fd-admin-nav.navbar-expand-lg .fd-brand-word { max-width: 110px; } }
/* Matchplay-Leiste (navbar-expand-xxl): zwischen 1400 und 1600 px ebenso ohne Symbole und mit kürzerem Turniernamen */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .fd-admin-nav.navbar-expand-xxl .navbar-nav.me-auto .nav-link > .bi { display: none; }
  .fd-admin-nav.navbar-expand-xxl .navbar-nav.me-auto .nav-link { padding-left: .5rem; padding-right: .5rem; }
  .fd-admin-nav.navbar-expand-xxl .fd-brand-word { max-width: 190px; }
}
@media (max-width: 1399.98px) { .fd-admin-nav.navbar-expand-xxl .fd-brand-word { max-width: 62vw; } }
.fd-admin-nav.navbar-dark .navbar-nav .nav-link {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--fd-hero-slate);
}

.fd-admin-nav.navbar-dark .navbar-nav .nav-link:focus,
.fd-admin-nav.navbar-dark .navbar-nav .nav-link.active { color: var(--fd-hero-ink); }
@media (hover: hover) and (pointer: fine) {
  .fd-admin-nav.navbar-dark .navbar-nav .nav-link:hover { color: var(--fd-hero-ink); }
}
.fd-admin-nav.navbar-dark .navbar-nav .nav-link.text-danger { color: var(--fd-flare); }
.fd-admin-nav .dropdown-menu {
  background: var(--fd-paper); border: 1px solid var(--fd-line); border-radius: 4px;
  font-family: 'Karla', sans-serif;
}
.fd-admin-nav .dropdown-item { color: var(--fd-ink); font-size: 14px; }
 .fd-admin-nav .dropdown-item:focus { background: var(--fd-paper-inset); color: var(--fd-ink); }
@media (hover: hover) and (pointer: fine) {
  .fd-admin-nav .dropdown-item:hover { background: var(--fd-paper-inset); color: var(--fd-ink); }
}
.fd-admin-nav .dropdown-divider { border-color: var(--fd-line); }
.fd-admin-nav .badge.bg-danger { background: var(--fd-flare); font-family: 'JetBrains Mono', monospace; }

/* ---------- Hero ---------- */
.fd-hero { position: relative; background: var(--fd-hero-bg); color: var(--fd-hero-ink); overflow: hidden; padding: 56px 0 48px; }
.fd-hero-sweep {
  position: absolute; top: -10%; right: -10%; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(121,168,156,0.10), transparent 70%); pointer-events: none;
}
.fd-hero-inner { position: relative; z-index: 1; }
.fd-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.fd-hero h1 {
  font-family: 'Big Shoulders', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
  text-wrap: balance; margin: 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; font-weight: 800;
}
.fd-hero h1 .fd-line2 { color: var(--fd-signal-glow); }
.fd-hero p.fd-lede { font-family: 'Karla', sans-serif; font-size: 16px; color: var(--fd-hero-slate); max-width: 46ch; margin-top: 14px; }
.fd-flight-readout { border: 1px solid var(--fd-hero-line); border-radius: 4px; padding: 16px 18px; background: rgba(255,255,255,0.02); min-width: 0; }
.fd-flight-readout .fd-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--fd-hero-line); font-size: 13px; }
.fd-flight-readout .fd-row:last-child { border-bottom: none; }
.fd-flight-readout .fd-row span:first-child { color: var(--fd-hero-slate); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.fd-flight-readout .fd-row span:last-child { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
/* .fd-hero prefix on every selector below bumps specificity past .fd-field
   .form-control (defined later in this file, same 2-class specificity) -
   this must win regardless of source order, since .fd-field's adaptive
   tokens are wrong here (see --fd-hero-field-* above). */
.fd-hero .fd-flight-readout .form-control, .fd-hero .fd-flight-readout .form-select {
  background: var(--fd-hero-field-bg); color: var(--fd-hero-field-ink); border-color: var(--fd-hero-line);
  /* Independent of the whole page's color-scheme (which follows the
     site-wide light/dark toggle) - these fields are always a light box
     (see --fd-hero-field-bg above), so their native chrome (specifically
     input[type=date]'s calendar-picker icon) must render in the LIGHT
     variant too, or the icon stays the dark-theme's pale icon color and
     turns invisible against this fixed-light background. */
  color-scheme: light;
}
.fd-hero .fd-flight-readout .form-control::placeholder { color: var(--fd-hero-field-placeholder); opacity: 1; }
.fd-hero .fd-flight-readout .form-control:focus, .fd-hero .fd-flight-readout .form-select:focus {
  border-color: var(--fd-focus); box-shadow: none; outline: 2px solid var(--fd-focus); outline-offset: 1px;
}

/* ---------- Section shell ---------- */
.fd-block { padding: 48px 0; }
.fd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.fd-section-head h2 {
  font-family: 'Big Shoulders', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0; font-size: 26px; font-weight: 800; color: var(--fd-ink);
}
.fd-section-head .fd-sub { color: var(--fd-slate); font-size: 14px; max-width: 42ch; }

/* ---------- Flight board (tournament calendar) ---------- */
.fd-board { border: 1px solid var(--fd-line); border-radius: 6px; overflow: hidden; background: var(--fd-paper); }
.fd-board-head {
  display: grid; grid-template-columns: 2.1fr 1fr 1.1fr 120px; gap: 14px; padding: 10px 20px;
  background: var(--fd-paper-inset); font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fd-slate); border-bottom: 1px solid var(--fd-line);
}
.fd-board-row {
  display: grid; grid-template-columns: 2.1fr 1fr 1.1fr 120px; gap: 14px; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--fd-line); text-decoration: none; color: var(--fd-ink);
}
.fd-board-row:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .fd-board-row:hover { background: var(--fd-paper-inset); }
}
.fd-board-row .fd-name {
  font-family: 'Big Shoulders', system-ui, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 0;
}
.fd-board-row .fd-venue { font-size: 13px; color: var(--fd-slate); }
.fd-board-row .fd-venue .fd-fmt { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fd-ink-soft); margin-top: 3px; }
.fd-board-row .fd-date { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.fd-status { justify-self: end; display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 3px; white-space: nowrap; }
.fd-status.fd-live { background: var(--fd-flare-soft); color: var(--fd-flare); }
.fd-status.fd-live .fd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fd-flare); animation: fd-blip 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fd-status.fd-live .fd-dot { animation: none; } }
@keyframes fd-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Shared "live" pulsing dot (Phase 34f) - consolidates every page-local
   .live-dot/@keyframes live-pulse definition (5x duplicated: live.html,
   live_r1.html, live_individual.html, admin_scoreboard.html,
   team_login.html) onto --fd-flare, the same "live" meaning
   .fd-status.fd-live already established (Phase 14a) - reuses its
   fd-blip keyframe instead of a second, near-identical animation. */
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--fd-flare); animation: fd-blip 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.fd-status.fd-upcoming { background: var(--fd-paper-inset); color: var(--fd-signal); border: 1px solid var(--fd-signal); }
.fd-status.fd-past { background: var(--fd-paper-inset); color: var(--fd-slate); }

/* ---------- Tournament page hero ---------- */
.fd-tpage { border: 1px solid var(--fd-line); border-radius: 6px; overflow: hidden; background: var(--fd-paper); }
.fd-tpage-hero { background: var(--fd-hero-bg); color: var(--fd-hero-ink); padding: 34px 32px 26px; position: relative; }
.fd-tpage-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(121,168,156,0.14), transparent 60%);
}
.fd-tpage-hero .fd-eyebrow { position: relative; }
.fd-tpage-hero h1 {
  position: relative; margin-top: 6px; font-family: 'Big Shoulders', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; font-size: 34px; font-weight: 800;
}
.fd-tpage-hero .fd-meta { position: relative; margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--fd-hero-slate); font-family: 'JetBrains Mono', monospace; }
.fd-tpage-body { padding: 24px 32px 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.fd-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 12px 20px; border-radius: 3px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; cursor: pointer;
}
.fd-btn-flare { background: var(--fd-flare); color: #fff; }
.fd-btn-signal { background: var(--fd-signal); color: #fff; }
.fd-btn-outline { border-color: var(--fd-line); color: var(--fd-ink); background: transparent; }
.fd-btn:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
.fd-btn-block { width: 100%; justify-content: center; }
.fd-btn-sm { padding: 7px 12px; font-size: 11px; gap: 6px; }
.btn-check:checked + .fd-btn-outline { background: var(--fd-paper-inset); box-shadow: inset 0 0 0 2px currentColor; }
.btn-group > .fd-btn, .btn-group-vertical > .fd-btn { flex: 1 1 auto; }

/* ---------- Auth card + wordmark lockup ---------- */
.fd-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fd-card-auth { background: var(--fd-paper); border: 1px solid var(--fd-line); border-radius: 6px; padding: 34px 32px; max-width: 380px; width: 100%; }
.fd-card-auth .fd-brand { justify-content: center; margin-bottom: 4px; color: var(--fd-signal); }
.fd-card-auth .fd-brand .fd-brand-word { color: var(--fd-ink); }
.fd-card-auth .fd-brand .fd-brand-word .fd-accent { color: var(--fd-signal); }
.fd-card-auth .fd-sub { color: var(--fd-slate); font-size: 14px; text-align: center; margin: 4px 0 22px; }
.fd-field { margin-bottom: 14px; }
.fd-field label { display: block; font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-slate); margin-bottom: 6px; }
.fd-field .form-control {
  width: 100%; padding: 10px 12px; border: 1px solid var(--fd-line); border-radius: 3px;
  background: var(--fd-paper-inset); color: var(--fd-ink); font-family: 'Karla', sans-serif; font-size: 15px;
}
.fd-field .form-control:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; box-shadow: none; }
.fd-card-auth .fd-btn { margin-top: 6px; }
.fd-card-auth .fd-foot-link { text-align: center; margin-top: 16px; font-size: 14px; }
.fd-card-auth .fd-foot-link a { color: var(--fd-slate); }

@media (max-width: 860px) {
  .fd-hero-grid { grid-template-columns: 1fr; }
  /* Handy (Prüfung 2026-10-12): Datum war ausgeblendet - jetzt Karte mit Name + Status oben, Datum darunter, Ort + Format. */
  .fd-board-head { display: none; }
  .fd-board-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "date date" "venue venue"; row-gap: 3px; }
  .fd-board-row .fd-name { grid-area: name; }
  .fd-board-row .fd-status { grid-area: status; align-self: start; }
  .fd-board-row .fd-date { grid-area: date; font-size: 12.5px; color: var(--fd-ink); }
  .fd-board-row .fd-venue { grid-area: venue; }
  .fd-board-row .fd-venue .fd-fmt { display: inline; margin: 0 0 0 8px; }
}

/* ---------- Registration cards (team-gründen/beitreten, Einzelanmeldung) ----------
   Deliberately does NOT restyle templates/_registration_questions_fields.html
   itself (Phase 11c) - that partial is shared with team_manage.html, an
   internal team-facing page that stays on the "Fairway & Sky" theme. These
   rules only reach its plain Bootstrap form-control/form-select/list-group
   markup through the .fd-reg-card container, via the cascade - so the
   partial itself needs no changes and no fork. */
.fd-reg-wrap { max-width: 620px; margin: 0 auto; padding: 32px 20px 56px; }
.fd-reg-card { background: var(--fd-paper); border: 1px solid var(--fd-line); border-radius: 6px; padding: 32px; }
.fd-reg-card h1 {
  font-family: 'Big Shoulders', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
  margin: 0 0 2px; font-size: 26px; font-weight: 800; color: var(--fd-ink);
}
.fd-reg-card .fd-sub { color: var(--fd-slate); font-size: 14px; margin: 0 0 22px; }
.fd-reg-card .form-label {
  font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fd-slate); font-weight: 400;
}
.fd-reg-card .form-control, .fd-reg-card .form-select {
  border: 1px solid var(--fd-line); border-radius: 3px; background: var(--fd-paper-inset);
  color: var(--fd-ink); font-family: 'Karla', sans-serif;
}
.fd-reg-card .form-control:focus, .fd-reg-card .form-select:focus {
  border-color: var(--fd-focus); box-shadow: none; outline: 2px solid var(--fd-focus); outline-offset: 1px;
}
.fd-reg-card hr { border-color: var(--fd-line); opacity: 1; }
.fd-reg-card #price-total { color: var(--fd-signal); font-family: 'JetBrains Mono', monospace; }
.fd-reg-card .list-group-item { border-color: var(--fd-line); background: var(--fd-paper); color: var(--fd-ink); }
@media (hover: hover) and (pointer: fine) {
  .fd-reg-card .list-group-item:hover { background: var(--fd-paper-inset); }
}

/* ---------- Admin re-skin components (Phase 34a) ----------
   Light-only (admin is fixed light, see base.html's data-theme="light").
   .fd-panel is a wide replacement for Bootstrap's .card on admin pages -
   .fd-reg-card stays narrow (620px wrap) for the registration flow, so
   admin content gets its own, unconstrained card shell instead. */
.fd-panel { background: var(--fd-paper); border: 1px solid var(--fd-line); border-radius: 6px; margin-bottom: 24px; }
.fd-panel-head {
  padding: 14px 22px; border-bottom: 1px solid var(--fd-line); background: var(--fd-paper-inset);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.fd-panel-head strong {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fd-ink); display: flex; align-items: center; gap: 8px;
}
.fd-panel-body { padding: 22px; }
.fd-panel-body.p-0 { padding: 0; }
.fd-panel-active { box-shadow: 0 0 0 2px var(--fd-flare); border-color: var(--fd-flare) !important; }

/* Real <table> styling - didn't exist before 34a (.fd-board is a CSS-grid
   list, not a <table>). */
.fd-table { width: 100%; border-collapse: collapse; color: var(--fd-ink); font-family: 'Karla', sans-serif; }
.fd-table th {
  text-align: left; padding: 10px 14px; background: var(--fd-paper-inset); border-bottom: 1px solid var(--fd-line);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fd-slate); white-space: nowrap;
}
.fd-table td { padding: 10px 14px; border-bottom: 1px solid var(--fd-line); font-size: 14px; }
.fd-table tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .fd-table tbody tr:hover { background: var(--fd-paper-inset); }
}
.fd-table-sm th, .fd-table-sm td { padding: 6px 10px; font-size: 13px; }

/* Multi-column, dense form layout - .fd-reg-card's form styling is tuned
   for a narrow, single-column registration form; admin forms need
   several fields per row. */
.fd-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.fd-form-grid .fd-field-wide { grid-column: 1 / -1; }
.fd-form-grid label, .fd-panel-body .form-label {
  font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fd-slate); font-weight: 400; display: block; margin-bottom: 4px;
}
.fd-panel-body .form-control, .fd-panel-body .form-select,
.modal-body .form-control, .modal-body .form-select {
  border: 1px solid var(--fd-line); border-radius: 3px; background: var(--fd-paper-inset);
  color: var(--fd-ink); font-family: 'Karla', sans-serif;
}
.fd-panel-body .form-control:focus, .fd-panel-body .form-select:focus,
.modal-body .form-control:focus, .modal-body .form-select:focus {
  border-color: var(--fd-focus); box-shadow: none; outline: 2px solid var(--fd-focus); outline-offset: 1px;
}
.fd-panel-body textarea.form-control, .modal-body textarea.form-control { min-height: 90px; }
.fd-panel-body .form-check-input, .modal-body .form-check-input { border: 1px solid var(--fd-line); background-color: var(--fd-paper-inset); }
.fd-panel-body .form-check-input:checked, .modal-body .form-check-input:checked { background-color: var(--fd-signal); border-color: var(--fd-signal); }
.fd-panel-body .form-check-input:focus, .modal-body .form-check-input:focus { border-color: var(--fd-focus); box-shadow: none; outline: 2px solid var(--fd-focus); outline-offset: 1px; }
.fd-panel-body .form-check-label, .modal-body .form-check-label { font-size: 14px; color: var(--fd-ink); }

/* Stat-tile grid - promoted from account_career.html's Phase-33 page-local
   <style> so every admin dashboard can reuse it (TD dashboards, series
   overview, ...). */
.fd-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.fd-stat { border: 1px solid var(--fd-line); border-radius: 6px; padding: 14px 16px; text-align: center; }
.fd-stat-value {
  display: block; font-family: 'Big Shoulders', system-ui, sans-serif; font-size: 30px;
  font-weight: 700; color: var(--fd-signal); line-height: 1.1;
}
.fd-stat-label { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fd-slate); margin-top: 4px; }

/* Flash-message replacement for Bootstrap's .alert. */
.fd-alert { border-radius: 4px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; }
.fd-alert-success { background: var(--fd-signal-soft); color: var(--fd-signal); border-color: var(--fd-line); }
.fd-alert-danger { background: var(--fd-danger-soft); color: var(--fd-danger); border-color: var(--fd-line); }
.fd-alert-warning { background: var(--fd-flare-soft); color: var(--fd-flare); border-color: var(--fd-line); }

/* ---------- Admin page heading + list (Phase 34b) ----------
   .fd-page-title/.fd-page-sub give every admin page's <h1>/subtitle the
   same Big Shoulders treatment .fd-panel-head/.fd-section-head h2 already
   use, so a converted page doesn't read half-Bootstrap/half-Flight-Deck.
   .fd-list/.fd-list-item replace Bootstrap's list-group/list-group-item(-
   action) for a wide admin list (setup checklist, round status, ...) -
   .fd-reg-card's own list-group styling only covers the narrow
   registration card. */
.fd-page-title {
  font-family: 'Big Shoulders', system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: 0.01em; font-weight: 800; color: var(--fd-ink); font-size: 28px; margin: 0;
}
.fd-page-sub { color: var(--fd-slate); font-size: 14px; }

.fd-list { border: 1px solid var(--fd-line); border-radius: 6px; overflow: hidden; background: var(--fd-paper); }
.fd-list-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--fd-line); background: var(--fd-paper); text-decoration: none;
  color: var(--fd-ink); flex-wrap: wrap;
}
.fd-list-item:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .fd-list-item:hover { background: var(--fd-paper-inset); }
}

/* ---------- Marketing landing page (feature-roadmap item, 2026-10-01) ----------
   Plain reusable grid helpers plus one new card variant (.fd-shot-card, a
   clickable screenshot + caption - the proof gallery). Deliberately placed
   in normal .fd-block sections, never inside .fd-hero: .fd-panel/.fd-stat's
   own tokens (--fd-line/--fd-paper/--fd-ink/--fd-slate) adapt to the site's
   light/dark toggle, but .fd-hero's background stays a fixed dark navy
   regardless of that toggle (see its own comment above) - dropping an
   adaptive-token component inside it would go unreadable in light mode. */
.fd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fd-shot-card { display: block; border: 1px solid var(--fd-line); border-radius: 6px; overflow: hidden; background: var(--fd-paper); text-decoration: none; color: inherit; }
.fd-shot-card img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  a.fd-shot-card:hover { border-color: var(--fd-signal); }
}
.fd-shot-cap { padding: 14px 16px; }
.fd-shot-cap strong { font-family: 'Big Shoulders', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: 15px; color: var(--fd-ink); }
.fd-shot-cap p { margin: 4px 0 0; font-size: 13px; color: var(--fd-slate); }

@media (max-width: 860px) {
  .fd-grid-2, .fd-grid-3 { grid-template-columns: 1fr; }
}
.fd-panel-head.fd-attention { background: var(--fd-flare-soft); }

/* Öffentliches Spielerprofil: Namen in Listen als dezente Links (2026-10-03) */
.fd-name-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--fd-slate); }
@media (hover: hover) and (pointer: fine) {
  .fd-name-link:hover { color: var(--fd-signal); border-bottom-color: var(--fd-signal); }
}

/* ---------- Admin bar on public pages (2026-10-04) ----------
   Shown only to people who manage the tournament / have admin access; sits above
   the public .fd-nav and uses the bronze "flare" tokens so it reads as "admin mode"
   in both themes without competing with the page's own colours. */
.fd-adminbar { background: var(--fd-flare-soft); border-bottom: 1px solid var(--fd-flare); color: var(--fd-ink); font-size: 13px; }
.fd-adminbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 8px 28px;
  display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap;
}
.fd-adminbar a { color: var(--fd-ink); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .fd-adminbar a:hover { text-decoration: underline; }
}
.fd-adminbar-note { color: var(--fd-ink-soft); font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-right: auto; }
.fd-adminbar-edit { white-space: nowrap; }

/* Admin navbar: the "Öffentliche Seite" switch is the one link meant to catch the eye. */
.fd-admin-nav.navbar-dark .navbar-nav .nav-link.fd-nav-public {
  border: 1px solid var(--fd-hero-line); border-radius: 3px; color: var(--fd-hero-ink); padding: 4px 10px; margin: 0 4px;
}
@media (hover: hover) and (pointer: fine) {
  .fd-admin-nav.navbar-dark .navbar-nav .nav-link.fd-nav-public:hover { background: rgba(255,255,255,0.08); }
}

/* Admin navbar is already wide on tournaments with many menu items: below ~1900px the two
   public-page links shrink to an icon (the title attribute keeps the tooltip); in the
   collapsed mobile menu (< 992px) the labels always show. */
@media (min-width: 992px) and (max-width: 1899.98px) {
  .fd-admin-nav.navbar-expand-lg .fd-nav-label { display: none; }
}
/* Matchplay-Leiste (navbar-expand-xxl, 2026-10-12): aufgeklappt ab 1400 px, Beschriftungen rechts erst ab 2500 px */
@media (min-width: 1400px) and (max-width: 2499.98px) {
  .fd-admin-nav.navbar-expand-xxl .fd-nav-label { display: none; }
}

/* Destructive actions (tournament delete, 2026-10-04): outline in the list, solid only inside the confirm dialog. */
.fd-btn-danger-outline { background: transparent; color: var(--fd-danger); border: 1px solid var(--fd-danger); }
@media (hover: hover) and (pointer: fine) {
  .fd-btn-danger-outline:hover { background: var(--fd-danger-soft); color: var(--fd-danger); }
}
.fd-btn-danger-solid { background: var(--fd-danger); color: #fff; border: 1px solid var(--fd-danger); }
@media (hover: hover) and (pointer: fine) {
  .fd-btn-danger-solid:hover:not(:disabled) { filter: brightness(0.92); color: #fff; }
}
.fd-btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }

/* Mitgliedsbeiträge (Vereinsverwaltung, 2026-10-04): Status-Chips für bezahlt / offen / überfällig / befreit. */
.fd-status.fd-due-paid { background: var(--fd-signal-soft); color: var(--fd-signal); border: 1px solid var(--fd-signal); }
.fd-status.fd-due-open { background: var(--fd-paper-inset); color: var(--fd-ink-soft); border: 1px solid var(--fd-line); }
.fd-status.fd-due-overdue { background: var(--fd-danger-soft); color: var(--fd-danger); border: 1px solid var(--fd-danger); }
.fd-status.fd-due-waived { background: var(--fd-flare-soft); color: var(--fd-flare); }

/* ---------- Accessibility: skip link ---------- */
.fd-skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 2000; padding: 10px 16px; border-radius: 3px;
  background: var(--fd-signal); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 13px;
  font-weight: 700; text-decoration: none; transition: top .15s ease;
}
.fd-skip-link:focus { top: 12px; outline: 2px solid var(--fd-focus); outline-offset: 2px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .fd-skip-link { transition: none; } }

/* ---------- Accessibility pass (Web Interface Guidelines audit 2026-10-06) ---------- */
/* Footer links used inline styles only -> no hover/focus state */
.fd-footer { opacity: .55; color: var(--fd-slate); }
.fd-footer a { color: var(--fd-slate); text-decoration: none; }
 .fd-footer a:focus-visible { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .fd-footer a:hover { text-decoration: underline; }
}
.fd-footer a.fd-footer-badge { border: 1px solid currentColor; border-radius: 4px; padding: 1px 6px; font-size: .85em; }
.fd-footer a:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }

/* Buttons: hover/active feedback, no double-tap-zoom delay on touch */
.fd-btn, .fd-board-row, .fd-theme-toggle { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .fd-btn:hover { filter: brightness(1.08); }
}
@media (hover: hover) and (pointer: fine) {
  .fd-btn-outline:hover { background: var(--fd-paper-inset); filter: none; }
}
.fd-btn:active { transform: translateY(1px); filter: brightness(.95); }
.fd-btn[disabled], .fd-btn.is-busy { opacity: .6; cursor: not-allowed; pointer-events: none; }

/* Calendar rows: focus ring inside the clipped board (overflow:hidden would cut an outset ring) */
.fd-board-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; background: var(--fd-paper-inset); }

/* Auth cards: the page title was a <p>, now an <h1> - keep the look */
.fd-card-auth h1.fd-sub { font-family: inherit; font-weight: 400; line-height: inherit; letter-spacing: normal; }

/* Numbers line up in columns; headings wrap evenly */
.fd-table td, .fd-table th, .fd-board-row .fd-date, .fd-result-row td { font-variant-numeric: tabular-nums; }
h1, h2, h3, .fd-name { text-wrap: balance; }
.fd-link-btn { background: none; border: none; padding: 0; font-size: 12px; color: var(--fd-signal-glow); text-decoration: underline; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .fd-link-btn:hover { text-decoration-thickness: 2px; }
}
.fd-link-btn:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }

/* Versions-Stempel im Footer: ganz unten, klein und blass; ein Klick öffnet die Änderungsliste (/changelog) */
.fd-footer-version { display: block; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; opacity: .55; }
 .fd-footer a.fd-footer-version:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fd-footer a.fd-footer-version:hover { opacity: 1; }
}

/* iPhone-App vom Home-Bildschirm (Statusleiste durchsichtig, Inhalt reicht bis ganz nach oben): Platz für Uhr/Notch freihalten,
   damit nichts darunter verschwindet oder verblasst. Der Abstand liegt in der obersten Leiste der Seite, so setzt sich deren
   Farbe unter der Uhr fort. Im normalen Browser sind die Werte 0. */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.fd-admin-nav { padding-top: calc(var(--bs-navbar-padding-y, .5rem) + env(safe-area-inset-top, 0px)); }
.fd-adminbar, .fd-nav { padding-top: env(safe-area-inset-top, 0px); }
.fd-adminbar ~ .fd-nav { padding-top: 0; }
body:not(:has(.fd-admin-nav, .fd-adminbar, .fd-nav, .ev-top)) { padding-top: env(safe-area-inset-top, 0px); }

/* "Zurück zum Event-Begleiter": schwebender Knopf, nur wenn man aus der Begleiter-App kommt */
.fd-eventback { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 99px; background: var(--fd-signal); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
@media (hover: hover) and (pointer: fine) {
  .fd-eventback:hover { color: #fff; filter: brightness(1.08); }
}
.fd-eventback:focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 3px; }
.fd-nav-admin { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; text-decoration: none; color: var(--fd-flare); border: 1px solid var(--fd-flare); border-radius: 99px; padding: 5px 13px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .fd-nav-admin:hover { background: var(--fd-flare-soft); color: var(--fd-flare); }
}
@media (max-width: 560px) { .fd-nav-admin span { display: none; } .fd-nav-admin { padding: 7px 10px; } }
/* Link "Für Vereine" (2026-10-12): am Handy nur das Fahnen-Symbol, auch in der nicht kompakten Leiste der Turnierseite */
@media (max-width: 560px) { .fd-nav-clubs .fd-nav-label { display: none; } .fd-nav-clubs i { font-size: 20px; } }
/* Öffentliche Navigationsleiste auf dem Handy: eine Zeile, Verweise nur als Symbol (Beschriftung steht im Tooltip und für Screenreader) */
@media (max-width: 380px) {                         /* kleinste Handys (320 px): Kopfleiste passt sonst nicht mehr in eine Zeile */
  .fd-nav-compact .fd-brand-word { font-size: 18px; }
  .fd-nav-compact .fd-nav-links { gap: 8px; }
  .fd-nav-compact .fd-btn-ghost { padding: 6px 9px; }
}
@media (max-width: 340px) { .fd-nav-compact .fd-nav-inner { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 560px) {
  .fd-nav-compact .fd-nav-inner { padding: 12px 16px; gap: 8px; flex-wrap: nowrap; }
  .fd-nav-compact .fd-brand-word { font-size: 20px; }
  .fd-nav-compact .fd-nav-links { gap: 12px; flex-wrap: nowrap; }
  .fd-nav-compact .fd-nav-links > a:not(.fd-nav-admin):not(.fd-btn-ghost) .fd-nav-label { display: none; }
  .fd-nav-compact .fd-nav-links > a:not(.fd-nav-admin):not(.fd-btn-ghost) i { font-size: 20px; }
}

/* ---------- Titelbild im Kopf der Turnierseite (2026-10-10) ----------
   Das Banner-Bild liegt als Hintergrund hinter Name/Datum, mit Verlauf vom Seitenrand, damit der Text lesbar bleibt;
   Banner-Text/-Link stehen als Zeile darunter. */
.fd-tpage-hero.has-cover { min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.fd-tpage-hero.has-cover::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--fd-hero-bg) 94%, transparent) 0%, color-mix(in srgb, var(--fd-hero-bg) 72%, transparent) 45%,
                    color-mix(in srgb, var(--fd-hero-bg) 30%, transparent) 100%),
    var(--fd-cover) center / cover no-repeat;
}
.fd-tpage-hero.has-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--fd-hero-bg) 85%, transparent) 100%);
  pointer-events: none;
}
.fd-tpage-hero.has-cover > * { position: relative; z-index: 1; }
.fd-tpage-hero.has-cover h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.fd-hero-note { position: relative; margin-top: 14px; font-size: 13px; }
.fd-hero-note a, .fd-hero-note span {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--fd-hero-ink) 12%, transparent); color: var(--fd-hero-ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--fd-hero-ink) 18%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .fd-hero-note a:hover { background: color-mix(in srgb, var(--fd-hero-ink) 22%, transparent); }
}
.fd-hero-cover-link { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 640px) {
  .fd-tpage-hero.has-cover { min-height: 200px; }
  .fd-tpage-hero.has-cover::before {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--fd-hero-bg) 35%, transparent) 0%, color-mix(in srgb, var(--fd-hero-bg) 90%, transparent) 70%),
      var(--fd-cover) center / cover no-repeat;
  }
}

/* ── Turnierbaum (Matchplay-Brackets Stufe 1, 2026-10-11) ──────────────────
   Spalten je Runde, Karten je Match, Linien im SVG (static/js/bracket.js).
   Nur Tokens, damit derselbe Baum auf den dunklen oeffentlichen Seiten
   (Stufe 2) genauso funktioniert. */
.fd-bracket { position: relative; overflow-x: auto; padding: 8px 4px 16px; -webkit-overflow-scrolling: touch; }
.fd-bracket-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.fd-bracket-line { fill: none; stroke: var(--fd-line); stroke-width: 2; }
.fd-bracket-line.is-done { stroke: var(--fd-signal); }
.fd-bracket-line--loser { stroke-dasharray: 4 6; opacity: .7; }
.fd-bracket-rounds { position: relative; display: flex; align-items: stretch; gap: 44px; min-width: max-content; }
.fd-bracket-round { display: flex; flex-direction: column; width: 232px; flex: 0 0 232px; }
.fd-bracket-round--third { width: 232px; }
.fd-bracket-round-head { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 10px; border-bottom: 2px solid var(--fd-line); margin-bottom: 10px; }
.fd-bracket-round-head strong { font-family: 'Big Shoulders', sans-serif; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--fd-ink); }
.fd-bracket-round-head span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--fd-slate); }
.fd-bracket-cells { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.fd-bracket-cell { display: flex; align-items: center; }
.fd-bracket-match { position: relative; width: 100%; background: var(--fd-paper); border: 1px solid var(--fd-line); border-radius: 6px; overflow: hidden; }
.fd-bracket-match.is-done { border-color: var(--fd-signal); }
.fd-bracket-match.is-final { border-color: var(--fd-flare); box-shadow: 0 0 0 2px var(--fd-flare-soft); }
.fd-bracket-match.is-bronze { border-color: var(--fd-flare); }
.fd-bracket-match--bye { border-style: dashed; opacity: .75; }
.fd-bracket-match-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--fd-paper-inset); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-ink-soft); }
.fd-bracket-match-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-bracket-match-label .bi-trophy-fill { color: var(--fd-flare); }
.fd-bracket-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--fd-flare-soft); color: var(--fd-flare); letter-spacing: .04em; }
.fd-bracket-badge--warn { background: var(--fd-flare-soft); color: var(--fd-flare); }
.fd-bracket-open { color: var(--fd-ink-soft); text-decoration: none; font-size: 14px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .fd-bracket-open:hover { color: var(--fd-signal); }
}
.fd-bracket-team { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 6px; padding: 7px 8px; border-top: 1px solid var(--fd-line); font-size: 14px; color: var(--fd-ink); }
.fd-bracket-team.is-winner { font-weight: 700; color: var(--fd-signal); }
.fd-bracket-team.is-winner .fd-bracket-score { background: var(--fd-signal); color: #fff; }
.fd-bracket-team.is-tbd { color: var(--fd-slate); }
.fd-bracket-seed { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fd-slate); }
.fd-bracket-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-bracket-score { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: center; border-radius: 3px; min-height: 20px; line-height: 20px; background: var(--fd-paper-inset); color: var(--fd-ink-soft); }
.fd-bracket-score:empty { background: transparent; }
@media (max-width: 600px) { .fd-bracket-round { width: 200px; flex-basis: 200px; } .fd-bracket-rounds { gap: 32px; } }
/* Stufe 2 - Zuschauer: laufendes Spiel, "Mein Spiel", aktuelle Runde */
.fd-bracket-match.is-live { border-color: var(--fd-flare); box-shadow: 0 0 0 2px var(--fd-flare-soft); }
.fd-bracket-match-head .live-dot { width: 8px; height: 8px; margin: 0; flex: 0 0 auto; }
.fd-bracket-live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px 7px; border-top: 1px dashed var(--fd-line); background: var(--fd-paper-inset); }
.fd-bracket-live-holes { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--fd-ink-soft); margin-right: auto; }
.fd-bracket-live-chip { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--fd-paper); border: 1px solid var(--fd-line); color: var(--fd-ink); }
.fd-bracket-live-chip.is-decided { border-color: var(--fd-signal); color: var(--fd-signal); }
.fd-bracket-team.is-mine { background: var(--fd-flare-soft); }
.fd-bracket-team.is-mine .fd-bracket-name { font-weight: 800; color: var(--fd-ink); }
.fd-bracket-match.is-mine { border-color: var(--fd-flare); }
.fd-bracket-badge--mine { background: var(--fd-flare); color: #fff; }
.fd-bracket-round.is-current .fd-bracket-round-head { border-bottom-color: var(--fd-flare); }
.fd-bracket-round.is-current .fd-bracket-round-head strong { color: var(--fd-flare); }
.fd-table tr.is-mine td { background: var(--fd-flare-soft); }
.fd-bracket-panel .fd-panel-body { padding-bottom: 6px; }
.fd-bracket-swipe { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--fd-slate); text-align: center; padding: 2px 0 6px; }
@media (min-width: 900px) { .fd-bracket-swipe { display: none; } }
/* Double-KO (Stufe 3): Siegerzweig oben, Verliererzweig darunter im selben Container */
.fd-bracket-row-head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fd-slate); padding: 0 4px 6px; }
.fd-bracket-row-head--lower { margin-top: 26px; padding-top: 12px; border-top: 1px dashed var(--fd-line); }
.fd-bracket-rounds--lower .fd-bracket-round-head strong { color: var(--fd-ink-soft); }

/* ── Ortssuche + Karten (2026-10-12, OpenStreetMap) ─────────────────────────── */
.vp { position: relative; }
.vp-field { position: relative; }
.vp-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fd-slate); pointer-events: none; }
.vp-input { padding-left: 34px; }
.vp-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1000; margin: 0; padding: 4px; list-style: none;
  background: var(--fd-paper); border: 1px solid var(--fd-line); border-radius: 10px; box-shadow: 0 12px 28px rgba(16, 24, 40, .16);
  max-height: 320px; overflow-y: auto; }
.vp-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--fd-ink); }
.vp-item i { margin-top: 2px; color: var(--fd-slate); flex: none; }
.vp-item strong { display: block; font-weight: 600; }
.vp-item small { display: block; color: var(--fd-slate); font-size: 12.5px; line-height: 1.35; }
.vp-item.is-active{ background: var(--fd-paper-inset); }
@media (hover: hover) and (pointer: fine) {
  .vp-item:hover { background: var(--fd-paper-inset); }
}
.vp-item.vp-disc_golf i { color: var(--fd-signal); }
.vp-empty { padding: 10px; color: var(--fd-slate); font-size: 13.5px; }
.vp-loading { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--fd-slate); font-size: 13px; }
.vp-attr { padding: 6px 10px 4px; border-top: 1px solid var(--fd-line); margin-top: 4px; font-size: 11px; color: var(--fd-slate); text-align: right; }
.vp-attr a { color: inherit; }
.vp-item.vp-known i { color: var(--fd-flare); }
.vp-picked { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 10px; border-radius: 8px;
  background: var(--fd-signal-soft); color: var(--fd-ink); font-size: 13.5px; }
.vp-picked > i { color: var(--fd-signal); }
.vp-picked-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vp-clear { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--fd-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .vp-clear:hover { background: rgba(0, 0, 0, .06); }
}
.vp-hint { margin: 6px 0 0; color: var(--fd-flare); }
.vp-map, .fd-venue-map { height: 220px; margin-top: 8px; border-radius: 10px; border: 1px solid var(--fd-line); overflow: hidden; z-index: 0; }
.fd-venue-map { height: 240px; margin-top: 0; }
.vp-pin span { display: block; width: 22px; height: 22px; margin: 1px 0 0 3px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--fd-signal); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.leaflet-container { font: inherit; }
.fd-venue-routes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Nation / Flaggen (2026-10-12, flag-icons) ─────────────────────────────── */
.fd-flag-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
.fd-flag { width: 1.4em; height: 1.05em; line-height: 1; border-radius: 2px; background-size: cover;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .14); flex: none; }
.fd-flag-code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--fd-ink-soft); }
.fd-flag-name { font-size: inherit; }

/* ---------- Handy-Feinschliff (Prüfung 2026-10-14: break-ui + mobile-native) ---------- */
/* Kein graues Aufblitzen beim Tippen; dafür sieht man das Drücken über :active (auch ohne Hover) */
html { -webkit-tap-highlight-color: transparent; }
.fd-board-row:active { background: var(--fd-paper-inset); }
.fd-theme-toggle:active { background: rgba(255, 255, 255, 0.14); }
/* Lange Wörter im Namen/Ort brechen um, statt unter das Status-Abzeichen zu laufen oder die Karte zu sprengen;
   ohne Ortsangabe steht das Format allein (kein einsames "–") */
.fd-board-row .fd-name, .fd-board-row .fd-venue { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* Lange Wörter in Überschriften: erst am Silbenrand trennen (Sprache der Seite), erst zuletzt mitten im Wort */
.fd-tpage-hero h1, .ev-hero h1, .ev-pagehead h1, .ev-now-title { overflow-wrap: break-word; hyphens: auto; }
.fd-board-row .fd-vn:empty + .fd-fmt { margin-left: 0; }
@supports (min-height: 100dvh) { .fd-auth-wrap { min-height: 100dvh; } }
/* iOS zoomt in Felder unter 16 px hinein und zoomt nicht zurück: auf Touch-Geräten mindestens 16 px.
   Tippflächen: die runden Schalter bekommen eine unsichtbar größere Fläche (40 px), kleine Knöpfe mindestens 40 px Höhe. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select, textarea, .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px !important; }
  .fd-theme-toggle { position: relative; }
  .fd-theme-toggle::after { content: ''; position: absolute; inset: -4px; }
  .fd-btn-sm { min-height: 40px; }
}

/* Runden & Spiele auf der Turnierseite (2026-10-19): ein Knopf je Runde zur Live-Seite */
.fd-round-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.fd-round-btn { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--fd-line); border-radius: 10px; background: var(--fd-paper);
  color: var(--fd-ink); text-decoration: none; min-height: 58px; touch-action: manipulation; }
.fd-round-btn strong { font-family: 'Big Shoulders', sans-serif; font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .02em; }
.fd-round-btn span { font-size: 12.5px; color: var(--fd-slate); line-height: 1.25; }
.fd-round-btn.is-done { border-color: var(--fd-signal); }
.fd-round-btn.is-done strong { color: var(--fd-signal); }
.fd-round-btn:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .fd-round-btn:hover { border-color: var(--fd-signal); } }

/* Spiel um Platz 3 steht unter dem Finale (gleiche Runde, gleiche Spalte) */
.fd-bracket-cell--third { margin-top: 6px; }