/* ============================================================================
   LIDO DARTKLUB — DESIGNSYSTEM  "SCORELINJEN"
   Bygget på dartens eget sprog: tallene, oche-linjen, kridttavlen, trådnettet.
   1) Tokens  2) Reset  3) Typografi  4) Layout  5) Komponenter
   6) Sektions- og sidemønstre  7) Motion  8) Responsivt
   ========================================================================== */

/* ---------------------------------------------------------------- 1) TOKENS */
:root{
  /* --- Farveroller ------------------------------------------------------ */
  /* Fundament er sort. Lido-gul er struktur og signal — aldrig tapet.
     Kridthvid bærer al læsning. Statusfarver er hentet fra dartskiven. */
  --ink:        #0A0A0A;   /* sidefundament                                */
  --ink-1:      #101010;   /* alternerende sektion                         */
  --ink-2:      #171716;   /* flade / panel                                */
  --ink-3:      #201F1D;   /* hævet panel, felter                          */
  --chalk:      #F5F4F0;   /* primær tekst                                 */
  --chalk-2:    #B6B4AC;   /* sekundær tekst                               */
  --chalk-3:    #7A7871;   /* tertiær tekst, meta                          */
  --line:       #2A2926;   /* hårfin kant                                  */
  --line-2:     #3B3A36;   /* tydelig kant                                 */

  --lido:       #FFD100;   /* Lido-gul — accent, struktur, primær handling  */
  --lido-deep:  #C29A00;   /* dyb gul — kanter og hover                    */
  --lido-wash:  rgba(255,209,0,.09);

  --treble:     #E2453C;   /* skivens rød  — live / tabt                   */
  --double:     #2F7D52;   /* skivens grøn — vundet / åbent                */
  --board:      #1B3527;   /* kridttavlens grøn — resultatflader           */

  --on-lido:    #0A0A0A;
  --on-lido-2:  rgba(10,10,10,.68);
  --on-lido-3:  rgba(10,10,10,.42);
  --line-lido:  rgba(10,10,10,.17);

  /* --- Typografi -------------------------------------------------------- */
  /* Archivo variabel: breddeaksen giver ét system to stemmer — bredt og
     tungt til overskrifter, smalt til scoreboard-etiketter. */
  --display: 'Archivo','Archivo Black','Helvetica Neue',Helvetica,sans-serif;
  --body:    'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:    'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --fs-mega: clamp(3.2rem,12.5vw,11rem);
  --fs-hero: clamp(2.75rem,8.6vw,7.6rem);
  --fs-d1:   clamp(2rem,5.2vw,4.3rem);
  --fs-d2:   clamp(1.65rem,3.2vw,2.8rem);
  --fs-d3:   clamp(1.28rem,2vw,1.72rem);
  --fs-d4:   clamp(1.08rem,1.4vw,1.28rem);
  --fs-lead: clamp(1.1rem,0.98rem + 0.6vw,1.42rem);
  --fs-body: clamp(1rem,0.96rem + 0.2vw,1.08rem);
  --fs-sm:   .92rem;
  --fs-xs:   .8rem;
  --fs-label:.72rem;
  --num:     clamp(2.9rem,8.5vw,7rem);

  /* --- Rum -------------------------------------------------------------- */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;  --s5:1.5rem;
  --s6:2rem;   --s7:2.75rem;--s8:3.5rem; --s9:5rem;  --s10:7rem;
  --sec: clamp(3.5rem,7.5vw,7rem);
  --gut: clamp(1.15rem,4vw,4.25rem);
  --max: 1560px;
  --measure: 62ch;

  /* --- Form og bevægelse ------------------------------------------------ */
  --r-1:2px; --r-2:4px; --r-pill:100px;
  --lift: 0 24px 60px -24px rgba(0,0,0,.85);
  --e-out: cubic-bezier(.16,.84,.28,1);
  --e-io:  cubic-bezier(.62,.05,.25,1);
  --t-1:.18s; --t-2:.38s; --t-3:.72s;
  --nav-h: 66px;
}
@media (min-width:1120px){ :root{ --nav-h:84px; } }

/* ----------------------------------------------------------------- 2) RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ink); color:var(--chalk);
  font-family:var(--body); font-size:var(--fs-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,h5{ margin:0; font-weight:400; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--lido); outline-offset:3px; }
::selection{ background:var(--lido); color:var(--on-lido); }
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:var(--gut); top:-120px; z-index:300; background:var(--lido);
       color:var(--on-lido); padding:.75rem 1.1rem; font-weight:600; font-size:var(--fs-sm); }
.skip:focus{ top:.7rem; }

/* ------------------------------------------------------------ 3) TYPOGRAFI */
.d-mega,.d-hero,.d1,.d2,.d3,.d4{
  font-family:var(--display); text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 800;
  letter-spacing:-.028em; line-height:.9; text-wrap:balance;
}
.d-mega{ font-size:var(--fs-mega); line-height:.82; letter-spacing:-.042em;
         font-variation-settings:'wdth' 116,'wght' 850; }
.d-hero{ font-size:var(--fs-hero); line-height:.86; letter-spacing:-.036em;
         font-variation-settings:'wdth' 114,'wght' 830; }
.d1{ font-size:var(--fs-d1); }
.d2{ font-size:var(--fs-d2); line-height:.95; letter-spacing:-.022em; }
.d3{ font-size:var(--fs-d3); line-height:1.03; letter-spacing:-.015em;
     font-variation-settings:'wdth' 108,'wght' 750; }
.d4{ font-size:var(--fs-d4); line-height:1.18; letter-spacing:-.006em;
     font-variation-settings:'wdth' 104,'wght' 700; }

.lead{ font-size:var(--fs-lead); line-height:1.45; letter-spacing:-.008em; }
.sm{ font-size:var(--fs-sm); } .xs{ font-size:var(--fs-xs); }
.measure{ max-width:var(--measure); }
.measure-sm{ max-width:46ch; }
.em{ color:var(--lido); }
.dim{ color:var(--chalk-2); }
.dimmer{ color:var(--chalk-3); }
.up{ text-transform:uppercase; }
.tnum{ font-variant-numeric:tabular-nums; }

/* Mono-etiket med sektionsindeks — som et leg-nummer i en kamp */
.label{
  font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  text-transform:uppercase; letter-spacing:.17em; color:var(--chalk-3);
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem;
  /* anywhere (ikke break-word) fordi kun den paavirker min-content og dermed
     lader et langt dansk ord krympe sit flex-spor i stedet for at blive klippet */
  hyphens:auto; overflow-wrap:anywhere;
}
.label--lido{ color:var(--lido); }
.label .idx{
  font-variant-numeric:tabular-nums; color:var(--lido); border:1px solid var(--lido);
  padding:.2rem .42rem; letter-spacing:.06em; line-height:1; font-size:.7rem; flex:none;
}
.label::after{ content:''; flex:1 1 auto; height:1px; background:var(--line); min-width:1.5rem; }
.label--bare::after{ display:none; }

/* Tal som arkitektur */
.num{
  font-family:var(--display); font-variation-settings:'wdth' 118,'wght' 850;
  font-variant-numeric:tabular-nums; font-size:min(var(--num), 28cqi);
  line-height:.82; letter-spacing:-.05em; color:var(--lido);
}
.num--chalk{ color:var(--chalk); }
.num--outline{ color:transparent; -webkit-text-stroke:1.5px var(--line-2); }

/* -------------------------------------------------------------- 4) LAYOUT */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* Bredde-vaern -----------------------------------------------------------
   1) Gitter- og stakbarn skal kunne krympe under deres eget min-indhold,
      ellers sprænger et enkelt langt ord hele sporet — og dermed siden.
   2) Danske sammensatte ord er lange. I displaystoerrelser deles de med
      korrekt dansk orddeling (html lang="da") i stedet for at blive
      klippet af. Kun aktivt naar ordet faktisk ikke kan staa paa linjen. */
.grid > *, .stack > *, .hero__grid > *, .phead__grid > *, .menu__g > *,
.foot__grid > *, .bigrow > *, .gal > *, .cal__grid > *, .facts > div > *{ min-width:0; }
/*  3) Store tal er arkitektur, men maa aldrig sprænge deres spor. Stakken
      bliver inline-size-container, saa tallet skalerer efter sporets faktiske
      bredde i stedet for viewportens. Uden container falder cqi tilbage til
      viewporten, hvor --num allerede er loftet. */
.stack:has(> .num){ container-type:inline-size; }
/*  4) Danske sammensatte ord i smalle spor skal kunne brydes frem for at
      blive klippet. Slaar kun til naar ordet reelt ikke kan staa. */
body{ overflow-wrap:break-word; }
.d-mega,.d-hero,.d1,.d2,.d3,.d4{ hyphens:auto; overflow-wrap:break-word; }
.wrap--narrow{ max-width:1100px; }
.sec{ padding-block:var(--sec); position:relative; }
.sec--tight{ padding-block:clamp(2.25rem,4.5vw,4rem); }
.sec--1{ background:var(--ink-1); }
.sec--2{ background:var(--ink-2); }
.sec--flood{ background:var(--lido); color:var(--on-lido); }
.sec--flood .label{ color:var(--on-lido-2); }
.sec--flood .label::after{ background:var(--line-lido); }
.sec--flood .label .idx{ color:var(--on-lido); border-color:var(--line-lido); }
.sec--flood .dim{ color:var(--on-lido-2); }
.sec--flood .dimmer{ color:var(--on-lido-3); }
.sec--flood .num{ color:var(--on-lido); }
.sec--flood .num--outline{ color:transparent; -webkit-text-stroke:1.5px var(--line-lido); }
.sec--flood .rule{ background:var(--line-lido); }
.sec--flood .pill{ border-color:var(--line-lido); color:var(--on-lido-2); }

.grid{ display:grid; gap:var(--s5); }
.g-2,.g-3{ grid-template-columns:1fr; }
.g-4{ grid-template-columns:1fr 1fr; }
.stack{ display:flex; flex-direction:column; }
.stack-1{ gap:var(--s1); } .stack-2{ gap:var(--s2); } .stack-3{ gap:var(--s3); }
.stack-4{ gap:var(--s4); } .stack-5{ gap:var(--s5); } .stack-6{ gap:var(--s6); }
.stack-7{ gap:var(--s7); } .stack-8{ gap:var(--s8); }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); }
.between{ display:flex; flex-wrap:wrap; gap:var(--s5); align-items:flex-end; justify-content:space-between; }
.mt-auto{ margin-top:auto; }
.pt-6{ padding-top:var(--s6); }

/* Oche-linjen — systemets tilbagevendende deler.
   En hårfin regel med en gul markør i venstre kant, som kastelinjen. */
.rule{ height:1px; background:var(--line); border:0; margin:0; width:100%; }
.rule--oche{ position:relative; }
.rule--oche::before{
  content:''; position:absolute; left:0; top:-1px;
  width:clamp(70px,9vw,130px); height:3px; background:var(--lido);
}
.rule--lido{ background:var(--lido); height:2px; }

/* Segmentbånd — 20 felter, abstraheret trådnet. Sektionsovergang. */
.segbar{ display:flex; height:6px; width:100%; overflow:hidden; }
.segbar i{ flex:1 1 auto; background:var(--line); }
.segbar i:nth-child(odd){ background:var(--lido); }
.segbar--thin{ height:3px; }
.segbar--dim i:nth-child(odd){ background:var(--lido-deep); }
.segbar--dim i:nth-child(even){ background:var(--ink-3); }

/* --------------------------------------------------------- 5) KOMPONENTER */

/* Knapper */
.btn{
  --btn-bg:var(--lido); --btn-fg:var(--on-lido); --btn-bd:var(--lido);
  display:inline-flex; align-items:center; gap:.6rem; min-height:52px;
  padding:.85rem 1.4rem; background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--r-1);
  font-family:var(--display); font-size:.86rem; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 750; letter-spacing:.045em; line-height:1;
  transition:background var(--t-1) var(--e-out),color var(--t-1) var(--e-out),
             border-color var(--t-1) var(--e-out),transform var(--t-1) var(--e-out);
}
.btn .arw{ transition:transform var(--t-2) var(--e-out); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arw{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--chalk); --btn-bd:var(--line-2); }
.btn--ghost:hover{ --btn-bg:var(--chalk); --btn-fg:var(--ink); --btn-bd:var(--chalk); }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--chalk); --btn-bd:var(--ink); }
.btn--dark:hover{ --btn-bg:transparent; --btn-fg:var(--on-lido); --btn-bd:var(--on-lido); }
.btn--sm{ min-height:44px; padding:.6rem 1rem; font-size:.78rem; }
.btn--wide{ width:100%; justify-content:space-between; }

/* Tekstlink */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem; position:relative; align-self:flex-start;
  font-family:var(--mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.13em; font-weight:500; padding-bottom:.35rem; color:var(--chalk);
}
.tlink::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--line-2); transform-origin:left;
  transition:background var(--t-1),transform var(--t-2) var(--e-out);
}
.tlink:hover{ color:var(--lido); }
.tlink:hover::after{ background:var(--lido); transform:scaleX(1.05); }
.sec--flood .tlink{ color:var(--on-lido); }
.sec--flood .tlink::after{ background:var(--line-lido); }
.sec--flood .tlink:hover::after{ background:var(--on-lido); }

/* Pill / status */
.pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.34rem .68rem;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--chalk-2); max-width:100%;
}
.pill--lido{ border-color:var(--lido); color:var(--lido); }
.pill--solid{ background:var(--lido); border-color:var(--lido); color:var(--on-lido); font-weight:600; }
.pill--win{ border-color:rgba(47,125,82,.6); color:#5FB683; background:rgba(47,125,82,.16); }
.pill--loss{ border-color:rgba(226,69,60,.55); color:#EE7A73; background:rgba(226,69,60,.13); }
.pill--todo{ border-style:dashed; color:var(--chalk-3); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.dot--live{ background:#5FB683; animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(95,182,131,.55); }
                  70%{ box-shadow:0 0 0 9px rgba(95,182,131,0); }
                  100%{ box-shadow:0 0 0 0 rgba(95,182,131,0); } }

/* Billedbehandling — klubbens fotos er autentiske telefonbilleder.
   Vi graderer dem bevidst, så variation i kvalitet læses som retning. */
.ph{ position:relative; overflow:hidden; background:var(--ink-2); display:block; }
.ph img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.74) contrast(1.09) brightness(.94);
  transition:filter var(--t-3) var(--e-out),transform var(--t-3) var(--e-out);
}
.ph::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg,var(--lido-wash),transparent 46%),
             linear-gradient(0deg,rgba(10,10,10,.5),transparent 62%);
}
.ph--flat::after{ background:linear-gradient(0deg,rgba(10,10,10,.34),transparent 70%); }
.ph--plain::after{ display:none; }
.ph--hard img{ filter:saturate(.32) contrast(1.2) brightness(.86); }
a.ph:hover img,.ph--live:hover img{ filter:none; transform:scale(1.03); }
.ph--tick::before{ content:''; position:absolute; left:0; top:0; z-index:2;
  width:34px; height:3px; background:var(--lido); }
.ph-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--s4);
  display:flex; gap:.75rem; align-items:baseline; justify-content:space-between;
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.11em; color:var(--chalk);
}
.ar-1{ aspect-ratio:1; } .ar-43{ aspect-ratio:4/3; } .ar-34{ aspect-ratio:3/4; }
.ar-169{ aspect-ratio:16/9; } .ar-32{ aspect-ratio:3/2; } .ar-45{ aspect-ratio:4/5; }
.ar-219{ aspect-ratio:21/9; } .ar-54{ aspect-ratio:5/4; }

/* Ærlig pladsholder — vi opdigter ikke billeder vi ikke har */
.stub{
  position:relative; min-height:150px; border:1px dashed var(--line-2);
  background:repeating-linear-gradient(135deg,var(--ink-2) 0 12px,var(--ink-3) 12px 24px);
  display:flex; align-items:flex-end; padding:var(--s4);
}
.stub span{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--chalk-3); max-width:28ch; line-height:1.5; }
.stub::before{
  content:'FOTO MANGLER'; position:absolute; left:var(--s4); top:var(--s4);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--lido-deep);
}

/* Panel */
.panel{ background:var(--ink-2); border:1px solid var(--line); padding:var(--s6); }
.panel--raised{ background:var(--ink-3); }
.panel--lido{ background:var(--lido); color:var(--on-lido); border-color:var(--lido); }
.panel--lido .label{ color:var(--on-lido-2); }
.panel--lido .label::after{ background:var(--line-lido); }
.panel--board{ background:var(--board); border-color:#0F2117; }
.panel--outline{ background:transparent; border-color:var(--line-2); }
.panel--tick{ position:relative; }
.panel--tick::before{ content:''; position:absolute; left:-1px; top:-1px; width:44px; height:3px;
  background:var(--lido); }

/* Stort listeled — bærer kategorier og navigation i stedet for kortgitre */
.bigrow{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--s4); padding:var(--s5) 0;
  border-top:1px solid var(--line); isolation:isolate; overflow:hidden;
  transition:padding var(--t-2) var(--e-io);
}
.bigrow:last-child{ border-bottom:1px solid var(--line); }
.bigrow::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--lido);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-2) var(--e-io);
}
.bigrow__i{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--lido); }
.bigrow__m{ font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; color:var(--chalk-3);
  text-transform:uppercase; text-align:right; }
.bigrow__a{ color:var(--chalk-3); transition:transform var(--t-2) var(--e-out),color var(--t-1); }
.bigrow__t,.bigrow__i,.bigrow__m{ transition:color var(--t-1); }
a.bigrow:hover::before{ transform:scaleX(1); }
a.bigrow:hover{ padding-inline:var(--s5); }
a.bigrow:hover .bigrow__t,a.bigrow:hover .bigrow__i,
a.bigrow:hover .bigrow__m,a.bigrow:hover .bigrow__a{ color:var(--on-lido); }
a.bigrow:hover .bigrow__a{ transform:translateX(6px); }
.sec--flood .bigrow{ border-color:var(--line-lido); }
.sec--flood .bigrow::before{ background:var(--ink); }
.sec--flood .bigrow__i{ color:var(--on-lido); }
.sec--flood .bigrow__m,.sec--flood .bigrow__a{ color:var(--on-lido-3); }
.sec--flood a.bigrow:hover .bigrow__t,.sec--flood a.bigrow:hover .bigrow__i{ color:var(--lido); }
.sec--flood a.bigrow:hover .bigrow__m,.sec--flood a.bigrow:hover .bigrow__a{ color:var(--chalk-3); }

/* Faktalinjer — praktisk information i scoreboard-form */
.facts{ border-top:1px solid var(--line); }
.facts > div{
  display:grid; grid-template-columns:1fr; gap:.15rem;
  padding:.8rem 0; border-bottom:1px solid var(--line);
}
.facts dt,.facts .k{
  font-family:var(--mono); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.12em; color:var(--chalk-3);
}
.facts dd,.facts .v{ font-variant-numeric:tabular-nums; }
/* Faktalinjer: vaerdikolonnen skal kunne krympe, og lange mailadresser
   og URL'er skal kunne brydes i stedet for at sprede tabellen ud.        */
.facts > div > *{ min-width:0; }
.facts dd,.facts .v{ overflow-wrap:anywhere; }
.sec--flood .facts,.sec--flood .facts > div{ border-color:var(--line-lido); }
.sec--flood .facts dt,.sec--flood .facts .k{ color:var(--on-lido-3); }
.panel--lido .facts,.panel--lido .facts > div{ border-color:var(--line-lido); }
.panel--lido .facts dt,.panel--lido .facts .k{ color:var(--on-lido-3); }

/* Tabel — resultater og stillinger */
.tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.tbl caption{ text-align:left; padding-bottom:var(--s4); color:var(--chalk-2); font-size:var(--fs-sm); }
.tbl th{
  text-align:left; font-family:var(--mono); font-weight:500; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.13em; color:var(--chalk-3);
  padding:.7rem .7rem; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.tbl td{ padding:.85rem .7rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr{ transition:background var(--t-1); }
.tbl tbody tr:hover{ background:var(--ink-3); }
.tbl tbody tr[data-lido="true"]{ background:var(--lido-wash); }
.tbl tbody tr[data-lido="true"] td:first-child{ box-shadow:inset 3px 0 0 var(--lido); }
.tbl .n{ text-align:right; font-family:var(--mono); }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll table{ min-width:560px; }

/* Formular */
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field > label{
  font-family:var(--mono); font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:.14em; color:var(--chalk-3);
}
.field .req{ color:var(--lido); }
.inp{
  width:100%; background:var(--ink-3); border:1px solid var(--line-2);
  border-radius:var(--r-1); padding:.8rem .9rem; min-height:52px;
  transition:border-color var(--t-1),background var(--t-1),box-shadow var(--t-1);
}
select.inp{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B6B4AC' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:11px;
  padding-right:2.4rem; }
textarea.inp{ min-height:150px; resize:vertical; }
.inp::placeholder{ color:var(--chalk-3); }
.inp:hover{ border-color:var(--chalk-3); }
.inp:focus{ border-color:var(--lido); background:var(--ink-2); outline:none;
            box-shadow:0 0 0 3px rgba(255,209,0,.14); }
.inp[aria-invalid="true"]{ border-color:var(--treble); box-shadow:0 0 0 3px rgba(226,69,60,.15); }
.err{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:#EE7A73; min-height:1.1em; }
.hint{ font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--chalk-3); }
.chk{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; }
.chk input{ appearance:none; width:20px; height:20px; flex:none; margin-top:.2rem; cursor:pointer;
  border:1px solid var(--line-2); background:var(--ink-3); border-radius:var(--r-1); }
.chk input:checked{ background:var(--lido); border-color:var(--lido);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%230A0A0A' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  background-size:14px; background-position:center; background-repeat:no-repeat; }
.formok{ display:none; }
.formok[data-on="true"]{ display:block; }

/* Accordion */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; gap:var(--s4); align-items:center; justify-content:space-between;
  padding:var(--s5) 0; text-align:left; color:var(--chalk); transition:color var(--t-1);
}
.acc__btn:hover{ color:var(--lido); }
.acc__ico{ flex:none; width:26px; height:26px; border:1px solid var(--line-2); position:relative;
  transition:border-color var(--t-1),color var(--t-1); }
.acc__ico::before,.acc__ico::after{ content:''; position:absolute; top:50%; left:6px; right:6px;
  height:1px; background:currentColor; }
.acc__ico::after{ transform:rotate(90deg); transition:transform var(--t-2) var(--e-out); }
.acc__btn[aria-expanded="true"] .acc__ico{ border-color:var(--lido); color:var(--lido); }
.acc__btn[aria-expanded="true"] .acc__ico::after{ transform:rotate(0); }
.acc__p{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-2) var(--e-io); }
.acc__p[data-open="true"]{ grid-template-rows:1fr; }
.acc__p > div{ overflow:hidden; }
.acc__inner{ padding-bottom:var(--s5); max-width:66ch; color:var(--chalk-2); }

/* ------------------------------------------------- NAVIGATION / SIDEHOVED */
.nav{
  position:sticky; top:0; z-index:120; background:rgba(10,10,10,.84);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  min-height:var(--nav-h); display:flex; align-items:center; gap:var(--s4); }
.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand__mark{ width:36px; filter:invert(1) contrast(1.2); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand__n{ font-family:var(--display); font-size:.95rem; text-transform:uppercase;
  font-variation-settings:'wdth' 108,'wght' 830; letter-spacing:-.012em; }
.brand__s{ font-family:var(--mono); font-size:.55rem; letter-spacing:.24em;
  color:var(--chalk-3); text-transform:uppercase; }
.nav__links{ display:none; }
.nav__cta{ display:none; margin-left:auto; }
.nav__burger{ margin-left:auto; width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line-2); flex:none; }
.nav__burger i{ display:block; width:18px; height:1.5px; background:var(--chalk); position:relative; }
.nav__burger i::before,.nav__burger i::after{ content:''; position:absolute; left:0;
  width:18px; height:1.5px; background:var(--chalk);
  transition:transform var(--t-2) var(--e-out); }
.nav__burger i::before{ top:-6px; } .nav__burger i::after{ top:6px; }
body.menu-open .nav__burger i{ background:transparent; }
body.menu-open .nav__burger i::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav__burger i::after{ transform:translateY(-6px) rotate(-45deg); }

/* Mobilmenu — fuldskærm, stor typografi, ikke en skrumpet desktopmenu */
.menu{
  position:fixed; inset:var(--nav-h) 0 0; z-index:110; background:var(--ink);
  padding:var(--s6) var(--gut) var(--s9); overflow-y:auto;
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path var(--t-3) var(--e-io),visibility var(--t-3);
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__g{ display:grid; gap:var(--s6); }
.menu__h{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; color:var(--chalk-3);
  text-transform:uppercase; padding-bottom:.6rem; border-bottom:1px solid var(--line);
  margin-bottom:var(--s3); }
.menu a.ml{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.5rem 0;
  font-family:var(--display); text-transform:uppercase; font-size:1.45rem;
  font-variation-settings:'wdth' 106,'wght' 780; letter-spacing:-.02em; line-height:1.05;
  transition:color var(--t-1),padding-left var(--t-2) var(--e-out);
}
.menu a.ml span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  color:var(--chalk-3); font-variation-settings:normal; }
.menu a.ml:hover,.menu a.ml[aria-current="page"]{ color:var(--lido); padding-left:.45rem; }
.menu__foot{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); }

/* -------------------------------------------------- 6) SEKTIONSMØNSTRE */
/* Hero — forside */
.hero{ position:relative; padding-top:clamp(1.75rem,4.5vw,3.75rem); overflow:hidden; }
.hero__grid{ display:grid; gap:var(--s6); align-items:end; }
.hero__ph{ position:relative; }
.hero__num{
  position:absolute; right:-.05em; bottom:-.14em; z-index:1; pointer-events:none;
  font-family:var(--display); font-variation-settings:'wdth' 120,'wght' 860;
  font-size:clamp(5.5rem,20vw,15rem); line-height:.7; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,209,0,.24);
  font-variant-numeric:tabular-nums;
}

/* Sidehoved — undersider */
.phead{ position:relative; padding-top:clamp(2rem,5vw,4.25rem); overflow:hidden; }
.phead__grid{ display:grid; gap:var(--s6); align-items:end; }
.crumb{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--chalk-3); }
.crumb a:hover{ color:var(--lido); }
.crumb i{ color:var(--line-2); font-style:normal; }

/* Levende åbningsindikator — beregnet ud fra klubbens rigtige åbningstider */
.openbar{
  display:inline-flex; align-items:center; gap:.65rem; padding:.5rem .85rem .5rem .7rem;
  border:1px solid var(--line-2); background:var(--ink-2); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:.71rem; letter-spacing:.06em; color:var(--chalk-2);
}
.openbar[data-state="open"]{ border-color:rgba(47,125,82,.55); background:rgba(47,125,82,.12); }
.openbar b{ font-weight:600; color:var(--chalk); }
.openbar[data-state="open"] b{ color:#6DC08F; }

/* Værdi — Sammenhold / Troskab / Loyalitet */
.value{ padding-top:var(--s5); border-top:2px solid var(--lido); }
.value__n{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--lido); }
.value__w{ margin:var(--s3) 0 var(--s4); }
.sec--flood .value{ border-top-color:var(--on-lido); }
.sec--flood .value__n{ color:var(--on-lido-2); }

/* Sponsorflise — logoerne får en lys flade, så deres egne farver bevares */
.sponsor{
  display:grid; place-items:center; aspect-ratio:16/10; padding:var(--s5);
  background:var(--chalk); border:1px solid var(--chalk); border-radius:var(--r-1);
  transition:transform var(--t-2) var(--e-out),box-shadow var(--t-2);
}
.sponsor img{ max-height:100%; width:auto; max-width:100%; object-fit:contain; mix-blend-mode:multiply; }
a.sponsor:hover{ transform:translateY(-4px); box-shadow:0 14px 34px -14px rgba(255,209,0,.4); }
.sponsor--lead{ aspect-ratio:16/6.5; }
.sponsor--sm{ aspect-ratio:16/9; padding:var(--s4); }

/* Galleri */
.filters{ display:flex; flex-wrap:wrap; gap:.45rem; }
.filter{
  padding:.5rem .9rem; border:1px solid var(--line-2); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:.69rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--chalk-2); transition:background var(--t-1),border-color var(--t-1),color var(--t-1);
}
.filter:hover{ border-color:var(--chalk-3); color:var(--chalk); }
.filter[aria-pressed="true"]{ background:var(--lido); border-color:var(--lido);
  color:var(--on-lido); font-weight:600; }
.gal{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
.gal__i{ transition:opacity var(--t-2),transform var(--t-2); }
.gal__i[hidden]{ display:none; }
.gal__i.is-out{ opacity:0; transform:scale(.985); }
.gal__i.tall{ grid-row:span 2; }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(5,5,5,.95);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:var(--s4);
  padding:var(--s4) var(--gut) var(--s6); opacity:0; visibility:hidden;
  transition:opacity var(--t-2),visibility var(--t-2); }
.lb[data-open="true"]{ opacity:1; visibility:visible; }
.lb__top{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); }
.lb__fig{ display:grid; place-items:center; min-height:0; }
.lb__fig img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }
.lb__nav{ display:flex; gap:var(--s3); justify-content:center; align-items:center; }
.lb__b{ width:46px; height:46px; border:1px solid var(--line-2); display:grid; place-items:center;
  transition:border-color var(--t-1),color var(--t-1); }
.lb__b:hover{ border-color:var(--lido); color:var(--lido); }

/* Kalender */
.cal__head{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; justify-content:space-between; }
.cal__m{ font-family:var(--display); text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 800; font-size:clamp(1.4rem,3.2vw,2.3rem);
  letter-spacing:-.02em; line-height:1; }
.cal__dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-top:var(--s5); }
.cal__dow span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--chalk-3);
  text-transform:uppercase; padding:.4rem .35rem; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.cal__d{ background:var(--ink-1); min-height:66px; padding:.3rem; display:flex;
  flex-direction:column; gap:.2rem; }
.cal__d[data-out="true"]{ background:var(--ink); opacity:.4; }
.cal__d[data-today="true"]{ box-shadow:inset 0 0 0 2px var(--lido); }
.cal__n{ font-family:var(--mono); font-size:.66rem; color:var(--chalk-3); font-variant-numeric:tabular-nums; }
.cal__d[data-today="true"] .cal__n{ color:var(--lido); font-weight:600; }
.ev{ font-family:var(--mono); font-size:.55rem; letter-spacing:.02em; line-height:1.3;
  padding:.18rem .26rem; border-left:2px solid var(--lido); background:var(--lido-wash);
  color:var(--chalk); text-align:left; width:100%; overflow:hidden; text-overflow:ellipsis;
  transition:background var(--t-1),color var(--t-1); }
.ev--match{ border-color:var(--treble); background:rgba(226,69,60,.12); }
.ev--event{ border-color:#5FB683; background:rgba(47,125,82,.14); }
.ev:hover{ background:var(--lido); color:var(--on-lido); }
.legend{ display:flex; flex-wrap:wrap; gap:var(--s4); }
.legend b{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono);
  font-size:.66rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-3); }
.legend i{ width:12px; height:12px; flex:none; border-left:3px solid var(--lido);
  background:var(--lido-wash); }
.legend i.m{ border-color:var(--treble); background:rgba(226,69,60,.12); }
.legend i.e{ border-color:#5FB683; background:rgba(47,125,82,.14); }

/* Sidefod */
.foot{ background:var(--ink); border-top:1px solid var(--line); padding-top:var(--sec); }
.foot__grid{ display:grid; gap:var(--s7); }
.foot__h{ font-family:var(--mono); font-size:.64rem; letter-spacing:.19em; color:var(--chalk-3);
  text-transform:uppercase; margin-bottom:var(--s4); }
.foot a.fl{ display:block; padding:.28rem 0; color:var(--chalk-2);
  transition:color var(--t-1),padding-left var(--t-1); }
.foot a.fl:hover{ color:var(--lido); padding-left:.35rem; }
.soc{ display:flex; gap:.5rem; flex-wrap:wrap; }
.soc a{ width:44px; height:44px; border:1px solid var(--line-2); display:grid; place-items:center;
  color:var(--chalk-2); transition:border-color var(--t-1),color var(--t-1),transform var(--t-1); }
.soc a:hover{ border-color:var(--lido); color:var(--lido); transform:translateY(-3px); }
.foot__bar{ margin-top:var(--s8); border-top:1px solid var(--line);
  padding-block:var(--s5) var(--s6); display:flex; flex-wrap:wrap; gap:var(--s4);
  justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--chalk-3); }
.foot__word{ font-family:var(--display); text-transform:uppercase; line-height:.78;
  font-variation-settings:'wdth' 120,'wght' 850; letter-spacing:-.045em;
  font-size:clamp(3rem,14vw,12rem); color:transparent; -webkit-text-stroke:1px var(--line-2);
  margin-top:var(--s7); margin-bottom:calc(var(--s5) * -1); user-select:none; }

/* ------------------------------------------------------------- 7) MOTION */
[data-rv]{ opacity:0; transform:translateY(20px); }
[data-rv].rv-in{ opacity:1; transform:none;
  transition:opacity .7s var(--e-out),transform .7s var(--e-out); }
[data-rv-d="1"].rv-in{ transition-delay:.07s; }
[data-rv-d="2"].rv-in{ transition-delay:.14s; }
[data-rv-d="3"].rv-in{ transition-delay:.21s; }
[data-rv-d="4"].rv-in{ transition-delay:.28s; }
[data-rv-d="5"].rv-in{ transition-delay:.35s; }
[data-rv="wipe"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); }
[data-rv="wipe"].rv-in{ clip-path:inset(0 0 0 0); transition:clip-path 1s var(--e-io); }
[data-rv="right"]{ transform:translateX(26px); }
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv="wipe"]{ opacity:1!important; transform:none!important; clip-path:none!important; }
  .dot--live{ animation:none; }
  .btn:hover,a.sponsor:hover,.soc a:hover{ transform:none; }
}

/* --------------------------------------------------------- 8) RESPONSIVT */
/* 360–429  mobil compact: én kolonne, hierarki intakt */
/* Smalle skærme: to spor efterlader for lidt tekstbredde i polstrede paneler,
   og det store listeled kan ikke holde tre kolonner. Begge stakkes. */
/* Polstrede paneler taaler faerre spor end bare stakke: fire spor ved 768px
   efterlader kun ~93px tekstbredde inde i panelets luft. Hold dem paa to
   spor indtil 1024px og paa ét spor under 600px. */
@media (max-width:1023.98px){
  .g-4:has(> .panel){ grid-template-columns:repeat(2,1fr); }
}
/* Et delt gitter inde i et delt gitter halverer sporet igen. Hold det indre
   gitter i én kolonne indtil der reelt er plads til to. */
@media (max-width:1023.98px){
  .g-2 .g-2, .g-2 .g-3, .g-3 .g-2, .g-3 .g-3{ grid-template-columns:1fr; }
}
@media (max-width:599.98px){
  .g-4:has(> .panel){ grid-template-columns:1fr; }
}
@media (max-width:639.98px){
  .bigrow{ row-gap:var(--s2); }
  .bigrow__t{ grid-column:2; }
  .bigrow__m{ grid-row:2; grid-column:2 / -1; text-align:left; }
}
@media (min-width:430px){
  .gal{ grid-template-columns:1fr 1fr; }
  .facts > div{ grid-template-columns:minmax(8.5rem,auto) 1fr; gap:var(--s4); align-items:baseline; }
}
/* 600–767  foldbar / lille tablet */
@media (min-width:600px){
  .g-2,.g-3{ grid-template-columns:1fr 1fr; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .menu__g{ grid-template-columns:1fr 1fr; gap:var(--s7); }
  .menu a.ml{ font-size:1.65rem; }
  .cal__d{ min-height:84px; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
/* 768–1023  tablet portræt */
@media (min-width:768px){
  .g-3{ grid-template-columns:repeat(3,1fr); }
  .g-4{ grid-template-columns:repeat(4,1fr); }
  .gal{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
  .cal__d{ min-height:98px; }
  .cal__n{ font-size:.7rem; }
  .ev{ font-size:.58rem; }
}
/* 1024–1119  tablet landskab / stor tablet */
@media (min-width:1024px){
  .hero__grid{ grid-template-columns:1.06fr .94fr; gap:var(--s7); }
  .phead__grid{ grid-template-columns:1.12fr .88fr; gap:var(--s7); }
  .cal__d{ min-height:112px; }
  .gal{ grid-template-columns:repeat(4,1fr); }
  .foot__grid{ grid-template-columns:1.4fr 1fr 1fr; }
}
/* 1120+  vandret navigation overtager */
@media (min-width:1120px){
  .nav__burger{ display:none; }
  .nav__links{ display:flex; align-items:center; gap:clamp(.85rem,1.4vw,1.55rem);
    margin-left:var(--s5); }
  .nav__links > li > a{ font-family:var(--mono); font-size:.71rem; text-transform:uppercase;
    letter-spacing:.1em; color:var(--chalk-2); padding:.5rem 0; position:relative;
    display:block; white-space:nowrap; transition:color var(--t-1); }
  .nav__links > li > a::after{ content:''; position:absolute; left:0; right:0; bottom:-1px;
    height:2px; background:var(--lido); transform:scaleX(0); transform-origin:left;
    transition:transform var(--t-2) var(--e-out); }
  .nav__links > li > a:hover{ color:var(--chalk); }
  .nav__links > li > a:hover::after,
  .nav__links > li > a[aria-current="page"]::after{ transform:scaleX(1); }
  .nav__links > li > a[aria-current="page"]{ color:var(--lido); }
  .nav__cta{ display:inline-flex; }
  .menu{ display:none; }
  .has-sub{ position:relative; }
  .sub{ position:absolute; top:100%; left:-1rem; min-width:272px; background:var(--ink-1);
    border:1px solid var(--line-2); padding:.45rem; box-shadow:var(--lift);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity var(--t-1),transform var(--t-2) var(--e-out),visibility var(--t-1); }
  .has-sub:hover .sub,.has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:none; }
  .sub a{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
    padding:.6rem .7rem; font-size:.9rem; transition:background var(--t-1),color var(--t-1); }
  .sub a small{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; color:var(--chalk-3); }
  .sub a:hover{ background:var(--lido); color:var(--on-lido); }
  .sub a:hover small{ color:var(--on-lido-2); }
}
/* 1440+  desktop */
@media (min-width:1440px){
  .foot__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
}
/* 1800+  bred skærm — containeren vokser, læselinjen holdes */
@media (min-width:1800px){
  :root{ --max:1720px; --sec:clamp(5rem,6.5vw,8.5rem); }
}
@media print{
  .nav,.menu,.foot__word,.lb,.nav__burger{ display:none!important; }
  body{ background:#fff; color:#000; }
  .sec--flood{ background:#FFD100!important; }
}