/* ==========================================================================
   Klubhuset — designsystem for billardklub.dk
   Version 1.0 · 24. oktober 2026
   Kilde: canvasset "Klubhuset — designudkast" (6 skærme)

   Indhold
     1. Skrifttyper (self-hostet, ingen CDN)
     2. Tokens (farver, typografi, afstande, radier, størrelser)
     3. Klubbens branding (overskrives pr. klub fra Klubindstillinger)
     4. Mørk tilstand (udkast)
     5. Basis
     6. Layouts: offentlig side · administration · Min side (mobil)
     7. Komponenter
     8. Hjælpeklasser

   Regler
     - Alle nye klasser har præfikset .kh- så de aldrig kolliderer med gamle.
     - Brug ALTID tokens (var(--kh-…)), aldrig hex-værdier i sider eller moduler.
     - Ingen klubnavne, logoer eller klubfarver i koden. De kommer fra
       Klubindstillinger via --kh-club-* (afsnit 3).
     - Farve bruges til status (grøn = ok, gul = tæt på/mangler, rød = stop)
       og altid sammen med tekst. Aldrig farve alene.
   ========================================================================== */


/* 1. Skrifttyper ----------------------------------------------------------- */
/* Begge er SIL Open Font License. Latin-subsættet dækker æ, ø og å.          */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations'),
       url('fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
}


/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* Grundfarver (lyst tema) */
  --kh-bg:            #F3F6F2;  /* sidebaggrund */
  --kh-surface:       #FFFFFF;  /* kort, tabeller, felter */
  --kh-tint:          #E4EDE6;  /* fremhævet flade, valgt valg */
  --kh-line:          #D5DDD6;  /* kant på kort */
  --kh-line-soft:     #E4EAE5;  /* skillelinjer inde i kort */
  --kh-field-line:    #7F9488;  /* kant på inputfelter (designet havde #9DB0A4 = 2.3:1, under WCAG's 3:1) */

  /* Tekst */
  --kh-ink:           #0F2A20;  /* brødtekst og overskrifter */
  --kh-ink-2:         #2E4036;  /* tekst på tonede flader */
  --kh-muted:         #3F5148;  /* hjælpetekst (4.5:1 også på --kh-tint) */

  /* Mørk flade (sidebar, hero, mobilheader, footer) */
  --kh-dark:          var(--kh-club-primary-deep);
  --kh-on-dark:       #DDE8E1;
  --kh-on-dark-muted: #B9CCC1;

  /* Handling */
  --kh-primary:       var(--kh-club-primary);
  --kh-primary-hover: var(--kh-club-primary-deep);
  --kh-on-primary:    #FFFFFF;
  --kh-link:          var(--kh-club-primary);   /* tekst, links og kanter i primærfarve */
  --kh-link-hover:    var(--kh-club-primary-deep);
  --kh-nav-active-bg: #F3F6F2;                  /* aktivt punkt i den mørke sidebar */
  --kh-nav-active-fg: var(--kh-club-primary-deep);
  --kh-accent:        var(--kh-club-accent);
  --kh-accent-hover:  color-mix(in srgb, var(--kh-club-accent) 88%, #000);
  --kh-on-accent:     #0F2A20;

  /* Status (baggrund + tekst, altid sammen med et ord) */
  --kh-ok-bg:         #DDF0E3;  --kh-ok-fg:      #17613A;
  --kh-warn-bg:       #FCE9C8;  --kh-warn-fg:    #7A4300;
  --kh-warn-line:     #C98A1B;  --kh-warn-field: #FFFBF0;
  --kh-danger-bg:     #FBE3E1;  --kh-danger-fg:  #8E1B14;  --kh-danger-line: #C2392E;
  --kh-info-bg:       #E3ECFA;  --kh-info-fg:    #1D4690;
  --kh-neutral-bg:    #E9EEEA;  --kh-neutral-fg: #2E4036;

  /* Fokus */
  --kh-focus:         #1D4690;

  /* Typografi */
  --kh-font-body:     'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kh-font-display:  'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --kh-text-base:     18px;     /* brødtekst. Aldrig under 16px */
  --kh-text-sm:       16px;
  --kh-text-xs:       15px;     /* kun chips og tabeloverskrifter */
  --kh-text-lg:       20px;
  --kh-leading:       1.45;

  --kh-h-hero:        clamp(40px, 6vw, 64px);   /* offentlig forside */
  --kh-h1:            clamp(34px, 4vw, 44px);   /* sidetitel */
  --kh-h2:            clamp(30px, 3.4vw, 44px); /* sektion på offentlig side */
  --kh-h3:            24px;                     /* korttitel */
  --kh-h4:            20px;                     /* rækketitel */

  /* Afstande (4px-grid) */
  --kh-space-1: 4px;   --kh-space-2: 8px;   --kh-space-3: 12px;
  --kh-space-4: 16px;  --kh-space-5: 20px;  --kh-space-6: 24px;
  --kh-space-7: 28px;  --kh-space-8: 32px;  --kh-space-10: 40px;
  --kh-space-12: 48px; --kh-space-14: 56px; --kh-space-20: 80px;

  /* Radier */
  --kh-radius-sm:   12px;  /* knapper, felter, nav-punkter */
  --kh-radius-md:   14px;  /* store knapper */
  --kh-radius-card: 20px;  /* kort */
  --kh-radius-lg:   24px;  /* store formularkort */
  --kh-radius-pill: 999px;

  /* Størrelser (berøringsflader) */
  --kh-tap:       48px;  /* minimum overalt */
  --kh-tap-md:    52px;  /* standardknap, inputfelt, nav-punkt */
  --kh-tap-lg:    60px;  /* primær handling */
  --kh-tap-xl:    64px;  /* "Fortsæt til betaling", terminalknapper */

  --kh-sidebar-w: 280px;
  --kh-content-max: 1200px;
}


/* 3. Klubbens branding ----------------------------------------------------- */
/* Standard = Klubhuset-grøn og guld. Layoutet skriver klubbens egne værdier
   ind fra Klubindstillinger, fx i <head>:

     <style>:root{
       --kh-club-primary: <?= e($club['color_primary']) ?>;
       --kh-club-primary-deep: <?= e($club['color_primary_deep']) ?>;
       --kh-club-accent: <?= e($club['color_accent']) ?>;
     }</style>

   Krav til klubfarver (valideres når de gemmes):
     - primary mod hvid tekst: kontrast mindst 4.5:1
     - primary-deep mod --kh-on-dark: mindst 4.5:1
     - accent mod --kh-on-accent (mørk tekst): mindst 4.5:1                     */
:root {
  --kh-club-primary:      #13503A;
  --kh-club-primary-deep: #0C3A2A;
  --kh-club-accent:       #F2B632;
}


/* 4. Mørk tilstand ----------------------------------------------------------- */
/* Følger altid brugerens enhed (lys/mørk), medmindre siden har data-theme="light".
   Sæt data-theme="dark" på <html> for at tvinge mørkt. Palet: grafit + dæmpet klubfarve + guld-accent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kh-bg: #14181B; --kh-surface: #1C2125; --kh-tint: #252B30;
    --kh-line: #353D43; --kh-line-soft: #2B3237; --kh-field-line: #7B8890;
    --kh-ink: #EDF1F0; --kh-ink-2: #D0D8D5; --kh-muted: #A9B5B0;
    /* Mørke bånd (sidebar, hero, mobilheader, footer): klubbens dybe farve dæmpet mod grafit, så det ikke bliver grønt overalt */
    --kh-dark: color-mix(in srgb, var(--kh-club-primary-deep) 42%, #0F1316);
    --kh-on-dark: #E3EAE6; --kh-on-dark-muted: #AEBBB5;
    /* Knapper: klubbens primærfarve lysnet, så knappen står tydeligt på mørk flade (hvid tekst >= 4.5:1) */
    --kh-primary: color-mix(in srgb, var(--kh-club-primary) 72%, #7FD1A8);
    --kh-primary-hover: color-mix(in srgb, var(--kh-primary) 82%, #000);
    --kh-on-primary: #FFFFFF;
    --kh-nav-active-bg: rgba(255, 255, 255, .14); --kh-nav-active-fg: #FFFFFF;
    --kh-ok-bg: #1B3B2B;  --kh-ok-fg: #9FE0B8;
    --kh-warn-bg: #3A2D12; --kh-warn-fg: #F6C979; --kh-warn-field: #2A2310;
    --kh-danger-bg: #3E1A17; --kh-danger-fg: #F5A49C;
    --kh-info-bg: #1A2A44; --kh-info-fg: #A9C4F5;
    --kh-neutral-bg: #252B30; --kh-neutral-fg: #D0D8D5;
    --kh-focus: #A9C4F5;
    --kh-link: #7FD1A8; --kh-link-hover: #A3E0C1;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kh-bg: #14181B; --kh-surface: #1C2125; --kh-tint: #252B30;
  --kh-line: #353D43; --kh-line-soft: #2B3237; --kh-field-line: #7B8890;
  --kh-ink: #EDF1F0; --kh-ink-2: #D0D8D5; --kh-muted: #A9B5B0;
  /* Mørke bånd (sidebar, hero, mobilheader, footer): klubbens dybe farve dæmpet mod grafit, så det ikke bliver grønt overalt */
  --kh-dark: color-mix(in srgb, var(--kh-club-primary-deep) 42%, #0F1316);
  --kh-on-dark: #E3EAE6; --kh-on-dark-muted: #AEBBB5;
  /* Knapper: klubbens primærfarve lysnet, så knappen står tydeligt på mørk flade (hvid tekst >= 4.5:1) */
  --kh-primary: color-mix(in srgb, var(--kh-club-primary) 72%, #7FD1A8);
  --kh-primary-hover: color-mix(in srgb, var(--kh-primary) 82%, #000);
  --kh-on-primary: #FFFFFF;
  --kh-nav-active-bg: rgba(255, 255, 255, .14); --kh-nav-active-fg: #FFFFFF;
  --kh-ok-bg: #1B3B2B;  --kh-ok-fg: #9FE0B8;
  --kh-warn-bg: #3A2D12; --kh-warn-fg: #F6C979; --kh-warn-field: #2A2310;
  --kh-danger-bg: #3E1A17; --kh-danger-fg: #F5A49C;
  --kh-info-bg: #1A2A44; --kh-info-fg: #A9C4F5;
  --kh-neutral-bg: #252B30; --kh-neutral-fg: #D0D8D5;
  --kh-focus: #A9C4F5;
  --kh-link: #7FD1A8; --kh-link-hover: #A3E0C1;
  color-scheme: dark;
}


/* 5. Basis ----------------------------------------------------------------- */
/* Basisregler bruger :where(.kh) (specificitet 0), så komponentklasser altid vinder. */
.kh, .kh *, .kh *::before, .kh *::after { box-sizing: border-box; }

body.kh {
  margin: 0;
  background: var(--kh-bg);
  color: var(--kh-ink);
  font-family: var(--kh-font-body);
  font-size: var(--kh-text-base);
  line-height: var(--kh-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.kh) a { color: var(--kh-link); }
:where(.kh) a:hover { color: var(--kh-link-hover); }
:where(.kh) img { max-width: 100%; height: auto; }

:where(.kh) :is(h1, h2, h3, h4),
.kh-display {
  font-family: var(--kh-font-display);
  color: inherit;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
:where(.kh) h1 { font-size: var(--kh-h1); font-weight: 800; }
:where(.kh) h2 { font-size: var(--kh-h2); font-weight: 700; }
:where(.kh) h3 { font-size: var(--kh-h3); font-weight: 700; line-height: 1.2; }
:where(.kh) h4 { font-size: var(--kh-h4); font-weight: 700; line-height: 1.25; font-family: var(--kh-font-body); }
:where(.kh) p { margin: 0; }

.kh :focus-visible {
  outline: 3px solid var(--kh-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.kh-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kh-skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--kh-surface); color: var(--kh-ink); padding: 12px 20px;
  border-radius: var(--kh-radius-sm); font-weight: 700;
}
.kh-skip:focus { top: 16px; }

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


/* 6. Layouts --------------------------------------------------------------- */

/* 6a. Offentlig side (klubbens forside) ------------------------------------ */
.kh-container {
  width: 100%;
  max-width: calc(var(--kh-content-max) + 2 * var(--kh-gutter, 120px));
  margin: 0 auto;
  padding-inline: var(--kh-gutter, 120px);
}
@media (max-width: 1100px) { .kh-container { --kh-gutter: 48px; } }
@media (max-width: 640px)  { .kh-container { --kh-gutter: 20px; } }

.kh-topbar {
  background: var(--kh-bg);
  border-bottom: 1px solid var(--kh-line);
}
.kh-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--kh-space-4);
  min-height: 88px; padding-block: var(--kh-space-3);
}
.kh-topbar__nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--kh-space-2) var(--kh-space-8);
}
.kh-topbar__nav > a:not(.kh-btn) {
  color: var(--kh-ink); text-decoration: none; font-weight: 700;
  min-height: var(--kh-tap); display: inline-flex; align-items: center;
}
.kh-topbar__nav > a:not(.kh-btn):hover { text-decoration: underline; text-underline-offset: 4px; }

.kh-brand {
  display: inline-flex; align-items: center; gap: 14px;
  color: inherit; text-decoration: none;
}
.kh-brand__logo {
  width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: contain;
  background: var(--kh-primary);
}
/* Uploadet logo: hvid cirkel og hele logoet synligt, så gennemsigtige og mørke logoer ikke forsvinder på de mørke bånd */
img.kh-brand__logo { background: #FFFFFF; padding: 3px; }
.kh-brand__name {
  font-family: var(--kh-font-display); font-weight: 700; font-size: 22px; line-height: 1.1;
}
/* Pladsholder-logo når klubben ikke har uploadet et: kugle i accentfarve */
.kh-brand__logo--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
}
.kh-brand__logo--placeholder::after {
  content: ""; width: 40%; height: 40%; border-radius: 50%; background: var(--kh-accent);
}

.kh-hero {
  background: var(--kh-dark); color: #FFFFFF;
  padding-block: var(--kh-space-20);
}
.kh-hero__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--kh-space-14);
}
.kh-hero__text { flex: 1 1 520px; min-width: 0; max-width: 600px; }
.kh-hero__media { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }
.kh-hero h1 { font-size: var(--kh-h-hero); line-height: 1.05; color: #FFFFFF; margin-bottom: var(--kh-space-6); }
.kh-hero__lead { font-size: 22px; color: var(--kh-on-dark); margin-bottom: var(--kh-space-10); }
.kh-hero__note { font-size: 17px; color: var(--kh-on-dark-muted); margin-top: var(--kh-space-6); }
.kh-hero__eyebrow {
  display: inline-block; padding: 6px 16px; border-radius: var(--kh-radius-pill);
  background: var(--kh-primary); color: var(--kh-accent); font-weight: 700; font-size: 16px;
  margin-bottom: var(--kh-space-6);
}

.kh-section { padding-block: var(--kh-space-20); }
.kh-section--tight { padding-block: var(--kh-space-14) var(--kh-space-6); }
.kh-section--surface { background: var(--kh-surface); border-block: 1px solid var(--kh-line); }
.kh-section__title { margin-bottom: var(--kh-space-3); }
.kh-section__lead { font-size: var(--kh-text-lg); color: var(--kh-muted); max-width: 640px; margin-bottom: var(--kh-space-10); }

.kh-footer {
  background: var(--kh-dark); color: var(--kh-on-dark);
  padding-block: var(--kh-space-14); font-size: 17px;
}
.kh-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--kh-space-8); }
.kh-footer a { color: var(--kh-on-dark); }
.kh-footer a:hover { color: #FFFFFF; }
.kh-footer__title { font-family: var(--kh-font-display); font-weight: 700; font-size: 24px; color: #FFFFFF; margin-bottom: var(--kh-space-3); }
.kh-footer__meta { color: var(--kh-on-dark-muted); }

/* 6b. Administration (sidebar + indhold) ----------------------------------- */
.kh-app {
  display: flex; min-height: 100vh; background: var(--kh-bg);
}
.kh-sidebar {
  flex: 0 0 var(--kh-sidebar-w);
  background: var(--kh-dark);
  padding: var(--kh-space-7) var(--kh-space-5);
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.kh-sidebar .kh-brand { padding: 0 var(--kh-space-2) var(--kh-space-6); gap: 12px; color: #FFFFFF; }
.kh-sidebar .kh-brand__logo { width: 40px; height: 40px; }
.kh-sidebar .kh-brand__name { font-size: 19px; line-height: 1.15; color: #FFFFFF; }
.kh-sidebar__spacer { flex: 1; }
.kh-sidebar__toggle { display: none; }

.kh-nav-item {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--kh-tap-md); padding: 0 var(--kh-space-4);
  border-radius: var(--kh-radius-sm);
  color: var(--kh-on-dark); text-decoration: none;
  font-weight: 700; font-size: 19px;
}
.kh .kh-nav-item { color: var(--kh-on-dark); }
.kh .kh-nav-item:hover { background: color-mix(in srgb, #FFFFFF 10%, transparent); color: #FFFFFF; }
.kh .kh-nav-item.is-active,
.kh .kh-nav-item[aria-current="page"] { background: var(--kh-nav-active-bg); color: var(--kh-nav-active-fg); }
.kh-nav-item svg { flex: none; width: 24px; height: 24px; stroke: currentColor; }
.kh-nav-item__label { flex: 1; min-width: 0; }
.kh-nav-item--quiet { min-height: var(--kh-tap); font-size: 17px; }
.kh .kh-nav-item--quiet { color: var(--kh-on-dark-muted); }

/* undermenu i sidebaren (vises under det aktive hovedpunkt) */
.kh-nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 38px; }
.kh .kh-nav-sub a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--kh-on-dark); text-decoration: none; font-size: 17px;
}
.kh .kh-nav-sub a:hover { background: color-mix(in srgb, #FFFFFF 10%, transparent); color: #FFFFFF; }
.kh .kh-nav-sub a[aria-current="page"] { color: #FFFFFF; font-weight: 700; box-shadow: inset 3px 0 0 var(--kh-accent); }

.kh-badge {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px;
  background: var(--kh-accent); color: var(--kh-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}

.kh-user {
  margin-top: var(--kh-space-2); padding: 14px var(--kh-space-4);
  border-radius: var(--kh-radius-sm); background: var(--kh-primary);
  display: flex; align-items: center; gap: 12px; color: #FFFFFF;
}
.kh-user__name { font-weight: 700; font-size: 17px; }
.kh .kh-user a { color: #FFFFFF; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }   /* hvid: læsbar på enhver klubfarve (primær >= 4.5:1 mod hvid) */
.kh .kh-user a:hover { text-decoration-thickness: 2px; }

.kh-main {
  flex: 999 1 560px; min-width: 0;
  padding: var(--kh-space-12) var(--kh-space-14);
}
.kh-page-header { margin-bottom: var(--kh-space-8); }
.kh-page-header h1 { margin-bottom: var(--kh-space-2); }
.kh-page-header__lead { font-size: var(--kh-text-lg); color: var(--kh-muted); }
.kh-page-header--split {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: var(--kh-space-5);
}
.kh-page-header__actions { display: flex; gap: var(--kh-space-3); flex-wrap: wrap; }

/* Hovedkolonne + sidekolonne */
.kh-split { display: flex; gap: var(--kh-space-8); flex-wrap: wrap; align-items: flex-start; }
.kh-split__main  { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--kh-space-6); }
.kh-split__aside { flex: 1 1 320px;  min-width: 0; display: flex; flex-direction: column; gap: var(--kh-space-6); }
.kh-split__nav   { flex: 0 0 240px; }

/* Under 900px: sidebar bliver til en topbar med fold-ud-menu */
@media (max-width: 900px) {
  .kh-app { flex-direction: column; }
  .kh-sidebar {
    position: sticky; top: 0; z-index: 20; height: auto; flex: none;
    padding: var(--kh-space-3) var(--kh-space-4);
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px;
  }
  .kh-sidebar .kh-brand { padding: 0; flex: 1; }
  .kh-sidebar__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: var(--kh-tap); padding: 0 var(--kh-space-4);
    border: 2px solid var(--kh-on-dark-muted); border-radius: var(--kh-radius-sm);
    background: transparent; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer;
  }
  .kh-sidebar__menu { display: none; width: 100%; flex-direction: column; gap: 4px; padding-top: var(--kh-space-3); }
  .kh-sidebar.is-open .kh-sidebar__menu { display: flex; }
  .kh-sidebar__spacer { display: none; }
  .kh-main { padding: var(--kh-space-8) var(--kh-space-5); }
}
@media (min-width: 901px) {
  .kh-sidebar__menu { display: flex; flex-direction: column; gap: 6px; flex: 1; }
}

/* 6c. Min side (mobil først) ---------------------------------------------- */
.kh-mobile {
  max-width: 560px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; background: var(--kh-bg);
  padding-bottom: 76px; /* plads til bundmenuen */
}
.kh-m-header {
  background: var(--kh-dark); color: #FFFFFF;
  padding: var(--kh-space-6) var(--kh-space-5) var(--kh-space-7);
  border-radius: 0 0 28px 28px;
}
.kh-m-header .kh-brand { gap: 10px; margin-bottom: 18px; }
.kh-m-header .kh-brand__logo { width: 32px; height: 32px; }
.kh-m-header .kh-brand__name { font-family: var(--kh-font-body); font-size: 16px; color: var(--kh-on-dark); }
.kh-m-header__title { font-family: var(--kh-font-display); font-weight: 800; font-size: 34px; line-height: 1.1; color: #FFFFFF; margin: 0; }
.kh-m-header__sub { margin-top: 6px; font-size: 17px; color: var(--kh-on-dark-muted); }
.kh .kh-m-header .kh-back { color: var(--kh-on-dark); }
.kh-m-content { padding: var(--kh-space-5); display: flex; flex-direction: column; gap: var(--kh-space-4); }
.kh-mobile .kh-card { padding: 18px; border-radius: 18px; }

.kh-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: 76px; background: var(--kh-surface); border-top: 1px solid var(--kh-line);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}
.kh-bottom-nav__inner { display: flex; width: 100%; max-width: 560px; margin: 0 auto; }
.kh .kh-bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--kh-muted); text-decoration: none; font-weight: 700; font-size: 15px;
  border-top: 4px solid transparent;
}
.kh .kh-bottom-nav a[aria-current="page"] { color: var(--kh-link); border-top-color: var(--kh-link); }
.kh-bottom-nav svg { width: 26px; height: 26px; stroke: currentColor; }


/* 7. Komponenter ----------------------------------------------------------- */

/* Knapper. Brug <button> til handlinger og <a> til navigation. */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--kh-tap-md); padding: 0 var(--kh-space-6);
  border-radius: var(--kh-radius-sm); border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: var(--kh-text-base); line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.kh .kh-btn { text-decoration: none; }
.kh-btn svg { width: 20px; height: 20px; stroke: currentColor; flex: none; }
.kh-btn--primary, .kh .kh-btn--primary { background: var(--kh-primary); color: var(--kh-on-primary); }
.kh .kh-btn--primary:hover { background: var(--kh-primary-hover); color: var(--kh-on-primary); }
.kh-btn--accent, .kh .kh-btn--accent { background: var(--kh-accent); color: var(--kh-on-accent); }
.kh .kh-btn--accent:hover { background: var(--kh-accent-hover); color: var(--kh-on-accent); }
.kh-btn--outline, .kh .kh-btn--outline { background: transparent; border-color: var(--kh-link); color: var(--kh-link); }
.kh .kh-btn--outline:hover { background: var(--kh-tint); color: var(--kh-link-hover); }
.kh-btn--on-dark, .kh .kh-btn--on-dark { background: transparent; border-color: var(--kh-on-dark); color: #FFFFFF; }
.kh .kh-btn--on-dark:hover { background: color-mix(in srgb, #FFFFFF 12%, transparent); color: #FFFFFF; }
.kh-btn--link, .kh .kh-btn--link { background: transparent; color: var(--kh-link); padding-inline: var(--kh-space-3); }
.kh .kh-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }
.kh-btn--danger, .kh .kh-btn--danger { background: transparent; border-color: var(--kh-danger-line); color: var(--kh-danger-fg); }
.kh .kh-btn--danger:hover { background: var(--kh-danger-bg); }
.kh-btn--sm { min-height: var(--kh-tap); padding: 0 18px; }
.kh-btn--lg { min-height: var(--kh-tap-lg); padding: 0 var(--kh-space-8); font-size: var(--kh-text-lg); border-radius: var(--kh-radius-md); }
.kh-btn--xl { min-height: var(--kh-tap-xl); padding: 0 36px; font-size: 21px; border-radius: var(--kh-radius-md); }
.kh-btn--block { display: flex; width: 100%; }
.kh-btn[disabled], .kh-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.kh-btn-row { display: flex; gap: var(--kh-space-4); flex-wrap: wrap; }

/* Tilbage-link */
.kh-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--kh-link); text-decoration: none; font-weight: 700; font-size: 18px;
}
.kh .kh-back { text-decoration: none; }
.kh-back svg { width: 20px; height: 20px; stroke: currentColor; }

/* Kort */
.kh-card {
  background: var(--kh-surface); border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius-card); padding: var(--kh-space-6) var(--kh-space-7);
}
.kh-card--tint    { background: var(--kh-tint); border-color: transparent; }
.kh-card--outline { border: 2px solid var(--kh-link); }      /* fremhævet: "du er tilmeldt" */
.kh-card--feature { background: var(--kh-tint); border: none; padding: var(--kh-space-8); } /* offentlig side */
.kh-card--flush   { padding: 0; overflow: hidden; }
.kh-card--lg      { border-radius: var(--kh-radius-lg); padding: var(--kh-space-10); }
.kh-card__header {
  padding: var(--kh-space-5) var(--kh-space-7); border-bottom: 1px solid var(--kh-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--kh-space-4); flex-wrap: wrap;
}
.kh-card__title { font-family: var(--kh-font-display); font-weight: 700; font-size: var(--kh-h3); line-height: 1.2; margin: 0; }
.kh-card__title--sm { font-size: 22px; }
.kh-card--compact { padding: var(--kh-space-4) 18px; border-radius: 18px; }
.kh-card__lead  { color: var(--kh-muted); margin: var(--kh-space-1) 0 var(--kh-space-5); }
.kh-card__eyebrow { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--kh-link); margin-bottom: 6px; }
.kh-card__footer-link {
  display: flex; align-items: center; justify-content: center; min-height: var(--kh-tap-lg);
  color: var(--kh-link); text-decoration: none; font-weight: 700; border-top: 1px solid var(--kh-line-soft);
}
.kh-cards { display: flex; gap: var(--kh-space-6); flex-wrap: wrap; }
.kh-cards > * { flex: 1 1 300px; min-width: 0; }

/* Ikon i cirkel (offentlige featurekort) */
.kh-icon-circle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--kh-primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--kh-space-5);
}
.kh-icon-circle svg { width: 28px; height: 28px; color: var(--kh-accent); stroke: currentColor; }

/* Chips (status og rolle). Altid et ord, aldrig kun farve. */
.kh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: var(--kh-radius-pill);
  font-weight: 700; font-size: var(--kh-text-xs); line-height: 1.5; white-space: nowrap;
  background: var(--kh-neutral-bg); color: var(--kh-neutral-fg);
}
.kh-chip--ok      { background: var(--kh-ok-bg);     color: var(--kh-ok-fg); }
.kh-chip--warn    { background: var(--kh-warn-bg);   color: var(--kh-warn-fg); }
.kh-chip--danger  { background: var(--kh-danger-bg); color: var(--kh-danger-fg); }
.kh-chip--info    { background: var(--kh-info-bg);   color: var(--kh-info-fg); }
.kh-chip--role    { background: var(--kh-tint);      color: var(--kh-link); }
.kh-chip--lg      { font-size: 16px; padding: 6px 14px; }
.kh-chips { display: flex; gap: var(--kh-space-2); flex-wrap: wrap; }

/* Opgaveliste ("Det skal du gøre") */
.kh-tasks { list-style: none; margin: 0; padding: 0; }
.kh-task {
  display: flex; align-items: center; gap: var(--kh-space-5); flex-wrap: wrap;
  padding: 22px var(--kh-space-7); border-bottom: 1px solid var(--kh-line-soft);
}
.kh-task:last-child { border-bottom: none; }
.kh-task__body { flex: 1 1 280px; min-width: 0; }
.kh-task__title { font-weight: 700; font-size: var(--kh-h4); }
.kh-task__desc  { color: var(--kh-muted); font-size: 17px; }
.kh-task__meta  { margin-top: 10px; }
.kh-task__action { flex: none; }

/* Nøgle–værdi-liste ("Klubben i tal", eventinfo, indkøbsliste) */
.kh-kv { margin: 0; }
.kh-kv__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--kh-space-4);
  padding: var(--kh-space-3) 0; border-bottom: 1px solid var(--kh-line-soft);
}
.kh-kv__row:last-child { border-bottom: none; }
.kh-kv dt, .kh-kv__key   { color: var(--kh-muted); }
.kh-kv dd, .kh-kv__value { margin: 0; font-weight: 700; text-align: right; }
.kh-kv--big .kh-kv__value, .kh-kv--big dd { font-family: var(--kh-font-display); font-weight: 800; font-size: 30px; }

/* Nøgletal-kort */
.kh-stats { display: flex; gap: var(--kh-space-5); flex-wrap: wrap; }
.kh-stats > * { flex: 1 1 220px; min-width: 0; }
.kh-stat { background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: 18px; padding: 22px var(--kh-space-6); }
.kh-stat__label { color: var(--kh-muted); font-size: var(--kh-text-sm); }
.kh-stat__value { font-family: var(--kh-font-display); font-weight: 800; font-size: 40px; line-height: 1.1; }
.kh-stat__unit  { font-size: var(--kh-text-lg); font-weight: 700; color: var(--kh-muted); }
.kh-stat__note  { color: var(--kh-muted); font-size: var(--kh-text-sm); margin-top: 6px; }

/* Fremdriftsbjælke (brug <progress> eller role="progressbar") */
.kh-progress {
  appearance: none; -webkit-appearance: none; display: block;
  width: 100%; height: 12px; border: none; border-radius: 6px;
  background: var(--kh-line); overflow: hidden; margin-top: 10px;
}
.kh-progress::-webkit-progress-bar   { background: var(--kh-line); border-radius: 6px; }
.kh-progress::-webkit-progress-value { background: var(--kh-primary); border-radius: 6px; }
.kh-progress::-moz-progress-bar      { background: var(--kh-primary); border-radius: 6px; }

/* Datoblok (aktiviteter) */
.kh-date {
  flex: none; width: 76px; text-align: center; height: fit-content;
  background: var(--kh-primary); color: #FFFFFF; border-radius: var(--kh-radius-md); padding: 10px 0;
}
.kh-date__month { font-size: 15px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; }   /* hvid: accent og primær valideres kun hver for sig */
.kh-date__day   { font-family: var(--kh-font-display); font-weight: 800; font-size: 34px; line-height: 1; }
.kh-date--sm { width: 58px; border-radius: var(--kh-radius-sm); padding: 6px 0; }
.kh-date--sm .kh-date__month { font-size: 13px; }
.kh-date--sm .kh-date__day   { font-size: 26px; }

/* Aktivitetsrække (dato + tekst + handling) */
.kh-event { display: flex; align-items: center; gap: 14px; }
.kh-event__body { flex: 1; min-width: 0; }
.kh-event__title { font-weight: 700; font-size: 19px; overflow-wrap: break-word; hyphens: auto; }
.kh-event__meta  { color: var(--kh-muted); font-size: var(--kh-text-sm); }

/* Formularer */
.kh-field { display: flex; flex-direction: column; gap: var(--kh-space-2); margin-bottom: var(--kh-space-5); }
.kh-label { display: block; font-weight: 700; }
.kh-hint  { color: var(--kh-muted); font-size: var(--kh-text-sm); }
.kh-input, .kh-select, .kh-textarea {
  width: 100%; min-height: var(--kh-tap-md); padding: 0 14px;
  font: inherit; font-size: 19px; color: var(--kh-ink);
  background: var(--kh-surface); border: 2px solid var(--kh-field-line); border-radius: var(--kh-radius-sm);
}
.kh-input--lg { min-height: 56px; font-size: var(--kh-text-lg); padding: 0 var(--kh-space-4); }
.kh-textarea { padding: 12px 14px; min-height: 120px; resize: vertical; }
.kh-select { padding-right: 40px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233F5148' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.kh-input:focus, .kh-select:focus, .kh-textarea:focus { border-color: var(--kh-link); outline: 3px solid color-mix(in srgb, var(--kh-link) 30%, transparent); outline-offset: 0; }
.kh-input::placeholder { color: var(--kh-muted); opacity: 1; }
/* Mangler (gul) og fejl (rød) — altid sammen med tekst i .kh-field__msg */
.kh-field--missing .kh-input, .kh-input.is-missing { border-color: var(--kh-warn-line); background: var(--kh-warn-field); }
.kh-field--error .kh-input, .kh-input.is-error, .kh-input[aria-invalid="true"] { border-color: var(--kh-danger-line); }
.kh-field__msg { font-weight: 700; font-size: var(--kh-text-sm); }
.kh-field--missing .kh-field__msg { color: var(--kh-warn-fg); }
.kh-field--error .kh-field__msg { color: var(--kh-danger-fg); }
.kh-fieldset { border: 0; margin: 0 0 var(--kh-space-5); padding: 0; min-width: 0; }
.kh-form-row { display: flex; gap: var(--kh-space-4); flex-wrap: wrap; }
.kh-form-row > * { flex: 1 1 200px; min-width: 0; }

/* Valgkort: radio/checkbox som stor flade. Markeres automatisk via :has(). */
.kh-choice {
  display: flex; align-items: center; gap: var(--kh-space-4);
  min-height: 56px; padding: var(--kh-space-4) var(--kh-space-5);
  border: 2px solid var(--kh-field-line); border-radius: var(--kh-radius-md);
  background: var(--kh-surface); cursor: pointer; font-weight: 700;
}
.kh-choice:has(input:checked) { border-color: var(--kh-link); background: var(--kh-tint); }
.kh-choice:has(input:focus-visible) { outline: 3px solid var(--kh-focus); outline-offset: 2px; }
.kh-choice input { width: 24px; height: 24px; accent-color: var(--kh-link); flex: none; margin: 0; }
.kh-choice__body  { flex: 1; min-width: 0; }
.kh-choice__title { display: block; font-size: var(--kh-text-lg); }
.kh-choice__desc  { display: block; color: var(--kh-muted); font-weight: 400; }
.kh-choice__price { font-size: var(--kh-text-lg); }
.kh-choice--center { justify-content: center; }
.kh-choices { display: flex; flex-direction: column; gap: var(--kh-space-3); }
.kh-choices--row { flex-direction: row; flex-wrap: wrap; }
.kh-choices--row > * { flex: 1 1 130px; }

.kh-check { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.kh-check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--kh-link); flex: none; }

/* Tæller (+/−) */
.kh-counter { display: flex; align-items: center; justify-content: space-between; gap: var(--kh-space-4); }
.kh-counter__btn {
  width: 56px; height: 56px; border-radius: var(--kh-radius-sm); border: 2px solid var(--kh-link);
  background: transparent; color: var(--kh-link); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.kh-counter__btn--plus { background: var(--kh-primary); color: var(--kh-on-primary); }
.kh-counter__btn svg { width: 24px; height: 24px; stroke: currentColor; }
.kh-counter__value { text-align: center; }
.kh-counter__num { font-family: var(--kh-font-display); font-weight: 800; font-size: 36px; line-height: 1; }

/* Tabeller */
.kh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kh-table { width: 100%; border-collapse: collapse; }
.kh-table th {
  text-align: left; font-size: var(--kh-text-xs); color: var(--kh-muted); font-weight: 700;
  padding: 12px 16px; border-bottom: 2px solid var(--kh-line); white-space: nowrap;
}
.kh-table td { padding: 14px 16px; border-bottom: 1px solid var(--kh-line-soft); vertical-align: middle; }
.kh-table th:first-child, .kh-table td:first-child { padding-left: var(--kh-space-7); }
.kh-table th:last-child,  .kh-table td:last-child  { padding-right: var(--kh-space-7); }
.kh-table tbody tr:hover { background: color-mix(in srgb, var(--kh-tint) 55%, transparent); }
.kh-table .kh-num { text-align: right; font-variant-numeric: tabular-nums; }
.kh-table__name { font-weight: 700; }

/* Beskeder */
.kh-alert {
  display: flex; gap: var(--kh-space-3); align-items: flex-start;
  padding: var(--kh-space-4) var(--kh-space-5); border-radius: var(--kh-radius-md);
  background: var(--kh-tint); color: var(--kh-ink-2); font-size: 17px;
}
.kh-alert strong { color: inherit; }
.kh-alert svg { width: 24px; height: 24px; stroke: currentColor; flex: none; }
.kh-alert--ok     { background: var(--kh-ok-bg);     color: var(--kh-ok-fg); }
.kh-alert--warn   { background: var(--kh-warn-bg);   color: var(--kh-warn-fg); }
.kh-alert--danger { background: var(--kh-danger-bg); color: var(--kh-danger-fg); }
.kh-alert--info   { background: var(--kh-info-bg);   color: var(--kh-info-fg); }

/* Toast med Fortryd (vises nederst; skjules automatisk efter 10 sek.) */
.kh-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: var(--kh-space-5);
  width: max-content; max-width: calc(100vw - 32px); padding: 14px 14px 14px 22px;
  background: var(--kh-ink); color: #FFFFFF; border-radius: var(--kh-radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.18); font-weight: 700;
}
@media (max-width: 560px) {
  .kh-toast { left: 16px; right: 16px; transform: none; max-width: none; justify-content: space-between; }
}
.kh-mobile ~ .kh-toast, .kh-toast--above-nav { bottom: 92px; }
.kh .kh-toast .kh-btn { background: var(--kh-accent); color: var(--kh-on-accent); min-height: var(--kh-tap); }

/* Avatar */
.kh-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--kh-primary); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.kh-avatar--accent { background: var(--kh-accent); color: var(--kh-on-accent); }
.kh-avatars { display: flex; gap: var(--kh-space-2); flex-wrap: wrap; }

/* Trin (1-2-3 på "Bliv medlem") */
.kh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kh-space-7); }
.kh-step { display: flex; gap: var(--kh-space-5); align-items: flex-start; }
.kh-step__num {
  flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--kh-accent); color: var(--kh-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kh-font-display); font-weight: 800; font-size: 24px;
}
.kh-step__title { font-weight: 700; font-size: var(--kh-text-lg); }
.kh-step__desc  { color: var(--kh-muted); }

/* Undermenu (fx Indstillinger) */
.kh-subnav { background: var(--kh-surface); border: 1px solid var(--kh-line); border-radius: var(--kh-radius-card); padding: var(--kh-space-3); display: flex; flex-direction: column; gap: 2px; }
.kh .kh-subnav a {
  display: flex; align-items: center; min-height: var(--kh-tap-md); padding: 0 var(--kh-space-4);
  border-radius: var(--kh-radius-sm); color: var(--kh-ink); text-decoration: none; font-weight: 700;
  border-left: 4px solid transparent;
}
.kh .kh-subnav a:hover { background: var(--kh-bg); }
.kh .kh-subnav a[aria-current="page"] { background: var(--kh-tint); color: var(--kh-ink); border-left-color: var(--kh-link); }
@media (max-width: 900px) {
  .kh-subnav { flex-direction: row; overflow-x: auto; padding: 6px; }
  .kh .kh-subnav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .kh .kh-subnav a[aria-current="page"] { border-bottom-color: var(--kh-link); }
}

/* Faner (fx Venter / Afstemt / Afvist) */
.kh-tabs { display: flex; gap: var(--kh-space-2); border-bottom: 2px solid var(--kh-line); margin-bottom: var(--kh-space-6); overflow-x: auto; }
.kh .kh-tabs a, .kh .kh-tabs button {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--kh-tap); padding: 0 var(--kh-space-4);
  background: none; border: none; border-bottom: 4px solid transparent; margin-bottom: -2px;
  font: inherit; font-weight: 700; color: var(--kh-muted); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.kh .kh-tabs [aria-current="page"], .kh .kh-tabs [aria-selected="true"] { color: var(--kh-link); border-bottom-color: var(--kh-link); }

/* Tom tilstand (aldrig en tom skærm) */
.kh-empty { text-align: center; padding: var(--kh-space-12) var(--kh-space-6); color: var(--kh-muted); }
.kh-empty__title { font-family: var(--kh-font-display); font-weight: 700; font-size: var(--kh-h3); color: var(--kh-ink); margin-bottom: var(--kh-space-2); }

/* Info-kort med ikon (åbningstider, adresse, pris) */
.kh-infocard { display: flex; gap: var(--kh-space-5); align-items: flex-start; }
.kh-infocard svg { width: 40px; height: 40px; color: var(--kh-link); stroke: currentColor; flex: none; }
.kh-infocard__title { font-family: var(--kh-font-display); font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.kh-infocard__text  { color: var(--kh-muted); }

/* Årshjul-liste */
.kh-timeline { list-style: none; margin: 0; padding: 0; }
.kh-timeline li { display: flex; gap: var(--kh-space-4); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--kh-line-soft); }
.kh-timeline li:last-child { border-bottom: none; }
.kh-timeline__when { flex: none; width: 56px; font-weight: 700; color: var(--kh-link); }


/* Ikoner fra ikoner.svg */
.kh-icon { width: 24px; height: 24px; flex: none; stroke: currentColor; vertical-align: middle; }
.kh-icon--sm { width: 20px; height: 20px; }
.kh-icon--lg { width: 40px; height: 40px; }


/* 8. Hjælpeklasser --------------------------------------------------------- */
.kh-stack   { display: flex; flex-direction: column; gap: var(--kh-space-4); }
.kh-stack-lg{ display: flex; flex-direction: column; gap: var(--kh-space-6); }
.kh-row     { display: flex; align-items: center; gap: var(--kh-space-3); flex-wrap: wrap; }
.kh-between { display: flex; align-items: center; justify-content: space-between; gap: var(--kh-space-4); flex-wrap: wrap; }
.kh-muted   { color: var(--kh-muted); }
.kh-soft    { color: var(--kh-ink-2); }
.kh-text-primary { color: var(--kh-link); }
.kh-lg      { font-size: 19px; }
.kh-small   { font-size: var(--kh-text-sm); }
.kh-strong  { font-weight: 700; }
.kh-num     { font-variant-numeric: tabular-nums; }
.kh-big-number { font-family: var(--kh-font-display); font-weight: 800; font-size: 30px; line-height: 1.1; }
.kh-center  { text-align: center; }
.kh-mt-0 { margin-top: 0 !important; }   .kh-mb-0 { margin-bottom: 0 !important; }
.kh-mt-4 { margin-top: var(--kh-space-4); } .kh-mb-4 { margin-bottom: var(--kh-space-4); }
.kh-mt-8 { margin-top: var(--kh-space-8); } .kh-mb-8 { margin-bottom: var(--kh-space-8); }


/* 9. Tilføjelser til de ombyggede offentlige sider ------------------------- */
.kh-hero__media img, .kh-hero__media svg { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--kh-radius-lg, 20px); }
.kh-hero__media img { object-fit: cover; aspect-ratio: 560 / 340; }
a.kh-card { color: inherit; text-decoration: none; }
a.kh-card:hover, a.kh-card:focus-visible { border-color: var(--kh-link); box-shadow: 0 6px 18px rgba(15, 42, 32, .12); }
a.kh-card:focus-visible { outline: 3px solid var(--kh-link); outline-offset: 2px; }
.kh-fit { display: block; width: 100%; height: auto; }
.kh-pad { padding: var(--kh-space-4) var(--kh-space-5); margin: 0; }
.kh-event .kh-chip { margin-top: var(--kh-space-2); }
.kh-cards--quad > * { flex-basis: 230px; }   /* fire kort i én række på bred skærm */

/* 10. Mørk tilstand: dekorative flader på mørke bånd bruger en dæmpet hvid i stedet for den lysnede knapfarve */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kh-user { background: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .kh-hero__eyebrow { background: rgba(255, 255, 255, .1); }
}
:root[data-theme="dark"] .kh-user { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .kh-hero__eyebrow { background: rgba(255, 255, 255, .1); }

/* 11. Udseende-vælger (Lys / Mørk / System) */
:root[data-theme="light"] { color-scheme: light; }
.kh-theme { display: inline-flex; border: 1px solid var(--kh-field-line); border-radius: var(--kh-radius-pill, 999px); overflow: hidden; background: var(--kh-surface); }
.kh-theme__opt { font: inherit; font-size: 15px; font-weight: 700; min-height: 40px; padding: 0 var(--kh-space-4); border: 0; background: transparent; color: var(--kh-ink); cursor: pointer; }
.kh-theme__opt + .kh-theme__opt { border-left: 1px solid var(--kh-field-line); }
.kh-theme__opt[aria-pressed="true"] { background: var(--kh-primary); color: var(--kh-on-primary); }
.kh-theme__opt:focus-visible { outline: 3px solid var(--kh-focus); outline-offset: -3px; }
.kh-theme--on-dark { background: transparent; border-color: rgba(255, 255, 255, .45); }
.kh-theme--on-dark .kh-theme__opt { color: var(--kh-on-dark); }
.kh-theme--on-dark .kh-theme__opt + .kh-theme__opt { border-left-color: rgba(255, 255, 255, .45); }
.kh-theme--on-dark .kh-theme__opt[aria-pressed="true"] { background: #FFFFFF; color: #0F2A20; }
.kh-theme-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--kh-space-3); margin-top: var(--kh-space-6); }

/* 12. Adminlister: fire nøgletal på en række, navn med avatar, DataTables-kontroller i kort */
.kh-stats--quad > * { flex-basis: 150px; }
.kh-stats--quad .kh-stat { padding: var(--kh-space-4) var(--kh-space-5); }
@media (max-width: 600px) { .kh-stats--quad > * { flex-basis: calc(50% - var(--kh-space-5)); } }
.kh-row--nowrap { flex-wrap: nowrap; }
.kh-card--flush .dataTables_wrapper .dataTables_length,
.kh-card--flush .dataTables_wrapper .dataTables_filter { padding: var(--kh-space-4) var(--kh-space-7) 0; }
.kh-card--flush .dataTables_wrapper .dataTables_info,
.kh-card--flush .dataTables_wrapper .dataTables_paginate { padding: var(--kh-space-4) var(--kh-space-7); }
@media (max-width: 600px) {
  .kh-card--flush .dataTables_wrapper .dataTables_length, .kh-card--flush .dataTables_wrapper .dataTables_filter,
  .kh-card--flush .dataTables_wrapper .dataTables_info, .kh-card--flush .dataTables_wrapper .dataTables_paginate { padding-inline: var(--kh-space-4); }
}
body.kh td.dtr-control::before, body.kh th.dtr-control::before { color: var(--kh-muted) !important; }

/* 13. Platformens sider: smal indholdskolonne til formularer og beskeder */
.kh-page-narrow { width: 100%; max-width: 680px; margin: 0 auto; padding: var(--kh-space-10) 20px calc(var(--kh-space-10) * 1.5); }
.kh-page-narrow--wide { max-width: 760px; }
.kh-input-group { display: flex; align-items: stretch; }
.kh-input-group .kh-input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; flex: 1 1 auto; }
.kh-input-group__suffix { display: inline-flex; align-items: center; padding: 0 var(--kh-space-4); background: var(--kh-tint); border: 2px solid var(--kh-field-line); border-left: 0; border-radius: 0 var(--kh-radius-sm) var(--kh-radius-sm) 0; color: var(--kh-muted); font-weight: 700; white-space: nowrap; }
.kh-option { display: flex; align-items: flex-start; gap: var(--kh-space-4); padding: var(--kh-space-4) var(--kh-space-5); border: 2px solid var(--kh-field-line); border-radius: var(--kh-radius-sm); background: var(--kh-surface); cursor: pointer; margin-bottom: var(--kh-space-3); }
.kh-option input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--kh-link); flex: none; }
.kh-option:has(input:checked) { border-color: var(--kh-link); }
.kh-option__body { flex: 1 1 auto; min-width: 0; }
.kh-option__price { font-weight: 800; white-space: nowrap; }
.kh-form-section { margin: var(--kh-space-8) 0 var(--kh-space-4); display: flex; align-items: center; gap: var(--kh-space-3); font-family: var(--kh-font-display); font-weight: 800; font-size: var(--kh-text-lg); }
.kh-form-section .kh-step__num { flex: none; }
.kh-url { font-family: var(--kh-font-display); font-weight: 800; font-size: 22px; overflow-wrap: anywhere; }
.kh-hero h2 { color: #FFFFFF; margin-bottom: var(--kh-space-4); }

/* 14. Klubfinder (platformen): filter, søgning og klubkort */
.kh-search { display: flex; gap: var(--kh-space-3); flex-wrap: wrap; margin-top: var(--kh-space-6); }
.kh-search .kh-input { flex: 1 1 260px; width: auto; }
.kh-filters { display: flex; gap: var(--kh-space-3); flex-wrap: wrap; margin-bottom: var(--kh-space-4); }
.kh-filter { display: inline-flex; align-items: center; gap: var(--kh-space-2); min-height: var(--kh-tap); padding: 0 16px; border: 2px solid var(--kh-field-line); border-radius: var(--kh-radius-pill); background: var(--kh-surface); color: var(--kh-ink); font-weight: 700; text-decoration: none; }
.kh-filter:hover { border-color: var(--kh-link); }
.kh-filter[aria-current="true"] { background: var(--kh-primary); color: var(--kh-on-primary); border-color: transparent; }
.kh-filter__count { font-size: var(--kh-text-sm); opacity: .85; }
.kh-results-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--kh-space-3); color: var(--kh-muted); margin-bottom: var(--kh-space-4); }
.kh-club { position: relative; display: flex; flex-direction: column; gap: var(--kh-space-3); }
.kh-club h3 { margin: 0; }
.kh-club h3 a { color: inherit; }
.kh-club__dist { position: absolute; top: var(--kh-space-4); right: var(--kh-space-4); }
.kh-club__links { display: flex; gap: var(--kh-space-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--kh-space-2); }
.kh-disc-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.kh-disc-row .disc { display: inline-flex; align-items: center; gap: 4px; }
.kh-disc-row .disc b { font-size: var(--kh-text-sm); }
.kh-contact .kv, .kh-contact .kh-kv__row { margin: var(--kh-space-2) 0; }
.kh-contact .kv b { color: var(--kh-muted); font-weight: 700; }
.kh-disc-list { display: flex; flex-direction: column; gap: var(--kh-space-3); }
.kh-disc-item { display: flex; align-items: center; gap: var(--kh-space-3); padding: var(--kh-space-3) var(--kh-space-4); background: var(--kh-tint); border-radius: var(--kh-radius-sm); }
.kh-disc-item span { flex: 1; font-weight: 700; }

/* 15. Fokuserede guider (opsætning, import): fremdriftslinje, uploadzone, fast bundlinje, tabelfelter */
.kh-stepper { list-style: none; margin: 0; padding: var(--kh-space-6) 20px 0; display: flex; justify-content: center; gap: var(--kh-space-5); flex-wrap: wrap; }
.kh-stepper__item { display: flex; align-items: center; gap: var(--kh-space-2); color: var(--kh-muted); font-size: var(--kh-text-sm); }
.kh-stepper__dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--kh-field-line); display: grid; place-items: center; font-weight: 800; background: var(--kh-surface); }
.kh-stepper__item.is-active { color: var(--kh-ink); font-weight: 700; }
.kh-stepper__item.is-active .kh-stepper__dot { border-color: var(--kh-link); color: var(--kh-link); }
.kh-stepper__item.is-done .kh-stepper__dot { background: var(--kh-primary); border-color: var(--kh-primary); color: var(--kh-on-primary); }
.kh-focus { width: 100%; max-width: 900px; margin: 0 auto; padding: var(--kh-space-10) 20px 140px; }
.kh-focus--narrow { max-width: 640px; padding-bottom: var(--kh-space-10); }
.kh-drop { display: block; border: 3px dashed var(--kh-field-line); border-radius: var(--kh-radius-card); background: var(--kh-surface); padding: 56px 20px; text-align: center; cursor: pointer; }
.kh-drop:hover, .kh-drop:focus-within { border-color: var(--kh-link); }
.kh-drop strong { display: block; font-family: var(--kh-font-display); font-size: var(--kh-text-lg); margin: var(--kh-space-3) 0 var(--kh-space-1); }
.kh-drop svg { width: 44px; height: 44px; color: var(--kh-link); stroke: currentColor; }
.kh-focus-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--kh-surface); border-top: 1px solid var(--kh-line); padding: var(--kh-space-4) 0; z-index: 20; }
.kh-focus-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--kh-space-4); flex-wrap: wrap; }
.kh-stat--ok .kh-stat__value { color: var(--kh-ok-fg); }
.kh-stat--warn .kh-stat__value { color: var(--kh-warn-fg); }
.kh-stat--danger .kh-stat__value { color: var(--kh-danger-fg); }
.kh-table tr.is-warn td { background: var(--kh-warn-bg); }
.kh-table tr.is-danger td { background: var(--kh-danger-bg); }
.kh-input--cell { min-height: 40px; font-size: var(--kh-text-base); padding: 0 10px; min-width: 84px; }
.kh-table--edit th, .kh-table--edit td { padding-inline: 8px; }
.kh-table--edit th:first-child, .kh-table--edit td:first-child { padding-left: var(--kh-space-5); }
.kh-table--edit td:last-child { min-width: 190px; padding-right: var(--kh-space-5); }
.kh-summary-grid { display: flex; gap: var(--kh-space-4); flex-wrap: wrap; margin: var(--kh-space-8) 0; }
.kh-summary-grid > * { flex: 1 1 200px; }
.kh-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--kh-link); text-decoration: underline; cursor: pointer; }
.kh-check-line { display: flex; gap: var(--kh-space-5); flex-wrap: wrap; margin-bottom: var(--kh-space-4); }
@media (max-width: 600px) { .kh-stepper__label { display: none; } .kh-stepper__item.is-active .kh-stepper__label { display: inline; } }
.kh-table--edit input[name$="[email]"] { min-width: 160px; }
.kh-alert + form, .kh-alert + .kh-card, .kh-alert + .kh-alert { margin-top: var(--kh-space-4); }

/* 16. Login og sikkerhed (adgangssider) */
.kh-honeypot { position: absolute; left: -5000px; }
.kh-qr { background: #FFFFFF; padding: 16px; border-radius: var(--kh-radius-sm); display: inline-block; margin: var(--kh-space-3) 0; max-width: 100%; }   /* hvid kant (quiet zone) er nødvendig for at authenticator-apps kan aflæse QR */
.kh-qr img, .kh-qr canvas { max-width: 100%; height: auto; }
.kh-secret { display: inline-block; background: var(--kh-tint); border: 2px solid var(--kh-field-line); border-radius: var(--kh-radius-sm); padding: 10px 14px; font-family: ui-monospace, Menlo, monospace; letter-spacing: .08em; overflow-wrap: anywhere; }
.kh-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--kh-space-3); margin: var(--kh-space-4) 0; }
.kh-codes > div { background: var(--kh-tint); border-radius: var(--kh-radius-sm); padding: 10px; text-align: center; font-family: ui-monospace, Menlo, monospace; letter-spacing: .1em; }
.kh-input--code { max-width: 260px; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.kh-role-grid { display: flex; gap: var(--kh-space-5); flex-wrap: wrap; margin-bottom: var(--kh-space-6); }
.kh-role-grid > * { flex: 1 1 260px; }
.kh-role-grid .kh-option { height: 100%; margin: 0; }

/* 17. Adminkø (afventende m.m.): kort pr. sag og bekræftelsesdialog */
.kh-queue { display: flex; flex-direction: column; gap: var(--kh-space-4); }
.kh-queue__item { display: flex; gap: var(--kh-space-5); align-items: flex-start; flex-wrap: wrap; }
.kh-queue__main { flex: 1 1 320px; min-width: 0; }
.kh-queue__who { display: flex; align-items: center; gap: var(--kh-space-3); margin-bottom: var(--kh-space-3); }
.kh-queue__facts { display: flex; flex-direction: column; gap: 2px; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-queue__actions { display: flex; gap: var(--kh-space-2); flex-wrap: wrap; align-items: center; }
dialog.kh-dialog { border: 0; border-radius: var(--kh-radius-card); background: var(--kh-surface); color: var(--kh-ink); padding: var(--kh-space-8); max-width: min(480px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog.kh-dialog::backdrop { background: rgba(10, 16, 14, .6); }
.kh-dialog h2 { margin-bottom: var(--kh-space-3); }
.kh-dialog__actions { display: flex; gap: var(--kh-space-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--kh-space-6); }
/* Lange danske ord i sideoverskrifter må ikke give vandret scroll på små skærme */
.kh-page-header h1 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { .kh-page-header h1 { font-size: 30px; } }

/* 18. Tabelhandlinger: små knapper og statusvælger i rækker */
.kh-actions { display: flex; gap: var(--kh-space-2); flex-wrap: wrap; align-items: center; }
.kh-actions form { display: inline-flex; gap: var(--kh-space-2); align-items: center; margin: 0; }
.kh-select--sm { min-height: var(--kh-tap); font-size: var(--kh-text-sm); padding: 0 36px 0 12px; width: auto; background-position: right 10px center; }
.kh-nowrap { white-space: nowrap; }
/* Pil i vælgere skal ses i mørk tilstand */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kh-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A9B5B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .kh-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A9B5B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.kh-chip--muted { background: var(--kh-neutral-bg); color: var(--kh-neutral-fg); }

/* 19. Offentlige undersider: todelt indhold, lister, flere chips */
.kh-split-2 { display: flex; gap: var(--kh-space-10); flex-wrap: wrap; align-items: flex-start; }
.kh-split-2 > * { flex: 1 1 340px; min-width: 0; }
.kh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kh-space-3); }
.kh-list li { display: flex; gap: var(--kh-space-3); align-items: flex-start; font-weight: 700; }
.kh-list svg { width: 24px; height: 24px; color: var(--kh-link); stroke: currentColor; flex: none; margin-top: 2px; }

/* 20. Længere tekster (privatlivspolitik, klubdokumenter): læsevenlig prosa */
.kh-prose { font-size: var(--kh-text-base); line-height: 1.7; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kh-prose h1, .kh-prose h2, .kh-prose h3, .kh-prose h4 { color: var(--kh-ink); margin: var(--kh-space-8) 0 var(--kh-space-3); line-height: 1.25; }
.kh-prose > :first-child { margin-top: 0; }
.kh-prose p { margin: 0 0 var(--kh-space-4); }
.kh-prose ul, .kh-prose ol { margin: 0 0 var(--kh-space-4); padding-left: 1.4em; }
.kh-prose li { margin-bottom: var(--kh-space-2); }
.kh-prose hr { border: 0; border-top: 1px solid var(--kh-line); margin: var(--kh-space-8) 0; }
.kh-prose a { color: var(--kh-link); }
.kh-prose .kh-table-wrap { margin: var(--kh-space-4) 0; border: 1px solid var(--kh-line); border-radius: var(--kh-radius-sm); }
.kh-prose .kh-table th:first-child, .kh-prose .kh-table td:first-child { padding-left: var(--kh-space-4); }
.kh-prose .kh-table th:last-child, .kh-prose .kh-table td:last-child { padding-right: var(--kh-space-4); }
.kh-prose .kh-cards { margin: var(--kh-space-4) 0; }
.kh-prose .kh-card h4 { margin-top: 0; }
.kh-prose h2 { font-size: 1.5rem; }
.kh-prose h3 { font-size: 1.25rem; }
.kh-prose h4 { font-size: 1.1rem; }
.kh-stat__value--sm { font-size: 26px; }
.kh-text-danger { color: var(--kh-danger-fg); font-weight: 700; }
.kh-prose mark { background: var(--kh-warn-bg); color: var(--kh-warn-fg); padding: 1px 5px; border-radius: 4px; }

/* 21. Klubfinder: søgning, filtre, liste og kort */
.kh-hero--compact { padding-block: var(--kh-space-12) var(--kh-space-10); }
.kh-finder [hidden] { display: none !important; }
.kh-finder__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--kh-space-4); flex-wrap: wrap; margin-bottom: var(--kh-space-5); }
.kh-finder__meta { display: flex; align-items: center; gap: var(--kh-space-4); flex-wrap: wrap; color: var(--kh-muted); font-weight: 700; }
.kh-finder__grid { display: grid; grid-template-columns: minmax(340px, 480px) 1fr; gap: var(--kh-space-6); align-items: start; }
.kh-finder__list { display: flex; flex-direction: column; gap: var(--kh-space-4); max-height: 78vh; overflow-y: auto; padding: 2px 6px 2px 2px; }
.kh-finder__map { position: sticky; top: var(--kh-space-4); height: 78vh; border-radius: var(--kh-radius-card); overflow: hidden; border: 1px solid var(--kh-line); background: var(--kh-tint); }
.kh-finder__map #map { width: 100%; height: 100%; }
.kh-fclub { position: relative; background: var(--kh-surface); border: 2px solid var(--kh-line); border-radius: var(--kh-radius-card); padding: var(--kh-space-5); display: flex; flex-direction: column; gap: var(--kh-space-3); cursor: pointer; }
.kh-fclub:hover { border-color: var(--kh-link); }
.kh-fclub.is-active { border-color: var(--kh-link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kh-link) 25%, transparent); }
.kh-fclub__head { display: flex; justify-content: space-between; gap: var(--kh-space-3); align-items: flex-start; }
.kh-fclub__name { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.kh-fclub__name a { color: inherit; text-decoration: none; }
.kh-fclub__name a:hover { text-decoration: underline; }
.kh-fclub__addr { margin: 0; color: var(--kh-muted); }
.kh-fclub__actions { display: flex; gap: var(--kh-space-2); flex-wrap: wrap; align-items: center; margin-top: var(--kh-space-2); }
.kh-fclub__badge { align-self: flex-start; }
.kh-fclub__dist { flex: none; }
.kh-empty-note { color: var(--kh-muted); padding: var(--kh-space-6); text-align: center; border: 2px dashed var(--kh-line); border-radius: var(--kh-radius-card); }
.kh-seg { display: none; border: 2px solid var(--kh-field-line); border-radius: var(--kh-radius-pill); overflow: hidden; }
.kh-seg__btn { font: inherit; font-weight: 700; min-height: var(--kh-tap); padding: 0 var(--kh-space-5); border: 0; background: var(--kh-surface); color: var(--kh-ink); cursor: pointer; }
.kh-seg__btn[aria-pressed="true"] { background: var(--kh-primary); color: var(--kh-on-primary); }
.kh-pin { background: none; border: 0; }
.kh-pin span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--kh-club-primary, #13503A); border: 3px solid #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.kh-pin.is-active span { background: var(--kh-club-accent, #F2B632); transform: scale(1.35); }
.kh-pin.is-active { z-index: 1000 !important; }
.kh-finder__map .leaflet-popup-content { font-family: var(--kh-font-body); color: #0F2A20; }
.kh-finder__map .leaflet-container a { color: #1D4690; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kh-finder__map .leaflet-tile { filter: brightness(.78) contrast(1.05) saturate(.85); } }
:root[data-theme="dark"] .kh-finder__map .leaflet-tile { filter: brightness(.78) contrast(1.05) saturate(.85); }
@media (max-width: 900px) {
  .kh-finder__grid { grid-template-columns: 1fr; }
  .kh-finder__list { max-height: none; overflow: visible; padding: 0; }
  .kh-finder__map { position: relative; top: 0; height: 70vh; }
  .kh-seg { display: inline-flex; }
  .kh-finder[data-view="liste"] .kh-finder__map { display: none; }
  .kh-finder[data-view="kort"] .kh-finder__list { display: none; }
}
.kh-hero--compact { padding-block: var(--kh-space-8) var(--kh-space-8); }
.kh-hero--compact .kh-hero__text { max-width: 900px; flex-basis: 100%; }
.kh-hero--compact h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--kh-space-3); }
.kh-hero--compact .kh-hero__lead { margin-bottom: var(--kh-space-5); max-width: 640px; }
.kh-hero--compact .kh-search { margin-top: 0; flex-wrap: nowrap; }
.kh-hero--compact .kh-search .kh-input { flex: 1 1 320px; min-width: 0; }
.kh-hero--compact .kh-search .kh-btn { flex: none; }
.kh-hero--compact .kh-hero__note { margin-top: var(--kh-space-3); }
@media (max-width: 720px) { .kh-hero--compact .kh-search { flex-wrap: wrap; } }
.kh-filters .kh-filter { min-height: 40px; padding: 0 14px; font-size: 15px; }
.kh-filter__count { opacity: .75; font-weight: 600; }
.kh-fdiscs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kh-fdisc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kh-text-sm); color: var(--kh-ink-2); }
.kh-fdisc .dik { flex: none; }
@media (max-width: 900px) {
  .kh-finder .kh-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(var(--kh-gutter, 20px) * -1); padding-inline: var(--kh-gutter, 20px); scroll-snap-type: x proximity; }
  .kh-finder .kh-filter { flex: none; scroll-snap-align: start; }
}
.kh-clubmap { height: 320px; border-radius: var(--kh-radius-card); overflow: hidden; border: 1px solid var(--kh-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kh-clubmap .leaflet-tile { filter: brightness(.78) contrast(1.05) saturate(.85); } }
:root[data-theme="dark"] .kh-clubmap .leaflet-tile { filter: brightness(.78) contrast(1.05) saturate(.85); }
.kh-clubmap .leaflet-container a { color: #1D4690; }
.kh-clubmap .leaflet-control-attribution, .kh-finder__map .leaflet-control-attribution { background: rgba(255, 255, 255, .92); color: #0F2A20; }
.kh-clubmap .leaflet-control-attribution a, .kh-finder__map .leaflet-control-attribution a { color: #1D4690; text-decoration: underline; }