/* ==========================================================================
   BERGENS ROKLUB – STILARK (style.css)
   --------------------------------------------------------------------------
   Denne filen bestemmer hvordan ALLE sidene ser ut: farger, skrift,
   avstander og plassering. HTML-filene inneholder bare innholdet.

   Filen er delt i nummererte deler. Søk etter nummeret (f.eks. "5.") for
   å hoppe rett dit:

     1.  Farger og grunnverdier (endre farger HER)
     2.  Grunnoppsett for hele siden
     3.  Felles byggeklosser (knapper, overskrifter, bilderammer)
     4.  Toppen: logo-rad og «Kontakt oss»
     5.  Menylinjen (hvit meny med nedtrekk)
     6.  Toppbilde (hero) – forside og undersider
     7.  Tekstboks-rad (2–3 bokser som ligger over toppbildet)
     8.  Bilde + tekst side ved side
     9.  Bildebanner (stort bilde med tekstboks oppå)
     10. Stor tekstboks (full bredde)
     11. Avslutningsboks (overskrift til venstre, tekst til høyre)
     12. Bildegalleri (Lei selskapslokalet)
     13. Ukeplan (Treningsrom)
     14. Grasrotandelen med graf
     15. Footer (bunnen av siden)
     16. Byggeklosser for undersidene (versjon 2):
         16a Felles  16b Styret  16c Hva skjer  16d Ro-skole
         16e Selskapslokalet  16f Junior B  16g Junior A/senior
     17. Mobil og nettbrett (skjermer smalere enn 900 px)
     18. Tilgjengelighet og detaljer (etter Apples designprinsipper)
     19. Bevegelse og animasjoner
     20. Nye byggeklosser (versjon 3): glassflate på forsiden, gruppetekst
         og enkel ukeplan (Nybegynner & U15)
   ========================================================================== */


/* ==========================================================================
   1. FARGER OG GRUNNVERDIER
   Bytt en verdi her, så endres den på alle sider samtidig.
   ========================================================================== */
:root {
  /* Farger */
  --farge-bla: #26348f;            /* Hovedblå: overskrifter, knapper, menytekst */
  --farge-bla-mork: #141d5c;       /* Mørkere blå når musen holdes over lenker */
  --farge-marine: #1c2140;         /* Nesten svart-blå: brødtekst og footer */
  --farge-kontakt: #242c5d;        /* Bakgrunnen på «Kontakt oss»-blokken */
  --farge-bakgrunn: #f7f5f0;       /* Kremhvit bakgrunn på hele siden */
  --farge-hvit: #ffffff;
  --farge-skillelinje: #dfe1ea;    /* Tynne streker mellom tekstbokser */

  /* Skrifttyper (lastes fra Google Fonts i <head> på hver side)
     Inter brukes overalt. Tykkelsen skiller overskrifter fra brødtekst:
       700 = store titler, 600 = overskrifter, 500 = mellomting, 400 = avsnitt.
     Archivo brukes bare i logoen («BERGENS ROKLUB»). */
  --skrift-overskrift: 'Inter', system-ui, sans-serif;
  --skrift-tekst: 'Inter', system-ui, sans-serif;
  --skrift-logo: 'Archivo', system-ui, sans-serif;

  /* Former og skygger */
  --hjorne: 16px;                                  /* Runde hjørner på bokser */
  --skygge-boks: 0 2px 10px rgba(28, 33, 64, .07); /* Svak skygge på bokser */
  --skygge-knapp: 0 4px 12px rgba(28, 33, 64, .18);

  /* Bredde og marger */
  --sidebredde: 1200px;  /* Maks bredde på innholdet */
  --sidemarg: 40px;      /* Luft på venstre og høyre side */
}


/* ==========================================================================
   2. GRUNNOPPSETT FOR HELE SIDEN
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--farge-bakgrunn);
  color: var(--farge-marine);
  font-family: var(--skrift-tekst);
  font-size: 16px;
  font-weight: 500;            /* Litt tykkere brødtekst (som på apple.com) */
  line-height: 1.65;
}

/* Hindrer at sidens innhold blir for bredt på store skjermer */
.side-innhold {
  max-width: var(--sidebredde);
  margin: 0 auto;
}

a {
  color: var(--farge-bla);
}

a:hover {
  color: var(--farge-bla-mork);
}

/* Avsnitt har ingen egen marg – luften mellom dem styres av boksen de ligger i */
p {
  margin: 0;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;            /* Tykke overskrifter (som på apple.com) */
  text-wrap: pretty;
}

/* Inter ser best ut litt tettere i store størrelser */
.hero-tittel,
.overskrift-stor,
.overskrift-medium,
.overskrift-liten,
.overskrift-mindre,
.bildebanner-tittel,
.ingress,
.footer-navn {
  letter-spacing: -.02em;
}

img {
  max-width: 100%;
}


/* ==========================================================================
   3. FELLES BYGGEKLOSSER
   ========================================================================== */

/* --- Blå, avrundet knapp: «Les mer →», «Kontakt oss →» osv. --- */
.knapp {
  display: inline-block;
  align-self: flex-start;      /* Knappen blir ikke strukket ut i full bredde */
  background: var(--farge-bla);
  color: var(--farge-hvit);
  padding: 9px 20px;
  border-radius: 999px;
  font: 500 14px var(--skrift-tekst);
  text-decoration: none;
  transition: background .15s;
}

.knapp:hover {
  background: var(--farge-bla-mork);
  color: var(--farge-hvit);
}

/* Lang knapp med en hel setning, og «Les mer →» på linjen under.
   Blå, frostet glass: litt gjennomsiktig blå med lys kant og glans øverst. */
.knapp--setning {
  max-width: 100%;
  padding: 12px 22px 11px;
  border-radius: 20px;
  line-height: 1.45;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: rgba(38, 52, 143, .86);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),   /* glans langs toppen */
    inset 0 0 18px rgba(255, 255, 255, .08),  /* svak glød innvendig */
    var(--skygge-knapp);
}

.knapp--setning:hover {
  background: rgba(30, 41, 120, .9);
}

/* Setningen holdes på én linje på PC (brytes bare på smale skjermer) */
.knapp-setning {
  white-space: nowrap;
}

/* «Les mer →» under setningen, med en tynn lys strek over */
.knapp-hel {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 6px;                       /* Luft mellom «Les mer» og pilen */
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .knapp-setning {
    white-space: normal;
  }
}

/* Knapp med skygge (brukes i de store boksene) */
.knapp--skygge {
  box-shadow: var(--skygge-knapp);
}

/* --- Overskrifter i serif-skrift --- */
.overskrift-stor {               /* f.eks. «Hva skjer i Bergens Roklub?» */
  font: 700 36px/1.15 var(--skrift-overskrift);
  color: var(--farge-bla);
}

.overskrift-medium {             /* f.eks. «Slik foregår kurset» */
  font: 700 34px/1.15 var(--skrift-overskrift);
  color: var(--farge-bla);
}

.overskrift-liten {              /* f.eks. «Ro-skole» i tekstboks-raden */
  font: 700 28px/1.2 var(--skrift-overskrift);
  color: var(--farge-bla);
}

/* Liten tekst i store bokstaver over en overskrift («Siden 22. mai 1906») */
.etikett {
  font: 400 14px var(--skrift-tekst);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- Hvit boks med runde hjørner og svak skygge --- */
.hvit-boks {
  background: var(--farge-hvit);
  border-radius: var(--hjorne);
  box-shadow: var(--skygge-boks);
}

/* --- Bilderamme ---
   Alle bilder ligger i en <div class="bilde">.
   Bildet fyller hele rammen og beskjæres pent (object-fit: cover).
   Mangler bildefilen, viser rammen et grått stripemønster med
   filnavnet, slik at du ser hvilket navn bildet skal ha.
   (Filnavnet skrives inn av script.js.) */
.bilde {
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #dcdad3 0 10px, #e6e4de 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bilde img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Etiketten med filnavnet som vises når bildet mangler */
.bilde[data-mangler]::before {
  content: "Mangler bilde: " attr(data-mangler);
  font: 11px ui-monospace, Menlo, monospace;
  background: var(--farge-bakgrunn);
  padding: 3px 6px;
  color: #555;
  position: relative;
  z-index: 1;
}

.bilde--rund {
  border-radius: var(--hjorne);
}

/* Felles ytre marg for seksjonene under toppbildet */
.seksjon {
  padding: 0 var(--sidemarg) 24px;
}

.seksjon--siste {               /* Siste seksjon før footeren får mer luft */
  padding-bottom: 64px;
}

.seksjon--luft-over {           /* Brukes når siden ikke har tekstboks-rad */
  padding-top: 44px;
}

.seksjon--uten-toppbilde,       /* Side uten toppbilde (Styret): luft under menylinjen */
.kontaktliste-seksjon.seksjon--uten-toppbilde {
  padding-top: 130px;
}

/* Tekst som kun er synlig for skjermlesere (blinde/svaksynte) */
.skjult-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   4. TOPPEN: LOGO-RAD OG «KONTAKT OSS»
   ========================================================================== */
.topp {
  position: relative;
  z-index: 10;                  /* Menyen skal ligge over toppbildet */
}

.topp-rad {
  height: 96px;
  padding-left: var(--sidemarg);
  border-bottom: 1px solid var(--farge-marine);
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* Logo (flagg + navn). Hele logoen er en lenke til forsiden. */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #111;
}

.logo-flagg {
  width: 52px;
  height: auto;
  display: block;
}

.logo-tekst {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.logo-navn {
  font: 900 32px/1 var(--skrift-logo);
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}

.logo-stiftet {
  font: 700 11px var(--skrift-logo);
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* Mørkeblå «Kontakt oss»-blokk helt ut til høyre, i full høyde */
.kontakt-knapp {
  margin-left: auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  background: var(--farge-kontakt);
  color: var(--farge-hvit);
  font: 700 18px var(--skrift-tekst);
  text-decoration: none;
  transition: background .15s;
}

.kontakt-knapp:hover {
  background: var(--farge-bla);
  color: var(--farge-hvit);
}


/* ==========================================================================
   5. MENYLINJEN (hvit, avrundet boks som ligger over toppbildet)
   ========================================================================== */
.meny-linje {
  position: absolute;
  top: calc(100% + 16px);       /* 16 px under logo-raden */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 65px);
  max-width: 1135px;
  height: 58px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--farge-hvit);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(20, 24, 52, .18);
}

/* Knappen «Meny ☰» vises bare på mobil (se del 16) */
.meny-knapp {
  display: none;
}

/* Selve menypunktene */
.meny {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.meny-punkt {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.meny-lenke {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 3px 0 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  font: 500 15px var(--skrift-tekst);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--farge-bla);
  text-decoration: none;
  white-space: nowrap;
}

.meny-lenke:hover {
  color: var(--farge-bla-mork);
}

/* Menypunktet for siden du står på: fet skrift og blå strek under.
   Settes ved å gi <li> klassen "aktiv" i HTML-en. */
.meny-punkt.aktiv > .meny-lenke {
  font-weight: 700;
  border-bottom-color: var(--farge-bla);
}

/* --- Nedtrekksmeny (Om Bergens / For medlemmer) ---
   Skjult som standard. Vises når musen holdes over menypunktet,
   når man tabber dit med tastaturet, eller når script.js
   setter klassen "apen" (ved klikk/trykk). */
.undermeny {
  position: absolute;
  top: calc(100% - 4px);
  left: -18px;
  min-width: 230px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--farge-hvit);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 24, 52, .18);
  display: none;
}

.meny-punkt:hover > .undermeny,
.meny-punkt:focus-within > .undermeny,
.meny-punkt.apen > .undermeny {
  display: block;
}

.undermeny a {
  display: block;
  padding: 9px 18px;
  font: 500 15px var(--skrift-tekst);
  color: var(--farge-bla);
  text-decoration: none;
}

.undermeny a:hover,
.undermeny a[aria-current="page"] {
  background: #eef0f8;
}

.undermeny a[aria-current="page"] {
  font-weight: 700;
}

/* --- Facebook- og Instagram-ikoner til høyre i menylinjen --- */
.sosiale-ikoner {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hvert ikon er en lenke med et SVG-ikon og et lite merke ved siden av
   («BR» eller «BRgutta») som viser hvilken konto det er. */
.sosialt-ikon {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--farge-marine);
  text-decoration: none;
}

.sosialt-svg {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* Merket er skjult og glir fram når musen holdes over ikonet */
.sosialt-merke {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: -5px;            /* Tar bort mellomrommet når merket er skjult */
  font: 700 11px/1 var(--skrift-tekst);
  letter-spacing: .02em;
  color: var(--farge-marine);
  white-space: nowrap;
  transition: max-width .6s var(--myk), opacity .5s ease .05s, margin-left .6s var(--myk);
}

.sosialt-ikon:hover .sosialt-merke,
.sosialt-ikon:focus-visible .sosialt-merke {
  max-width: 60px;
  opacity: 1;
  margin-left: 0;
}

/* På telefon og nettbrett (ingen mus) vises merket alltid */
@media (hover: none) {
  .sosialt-merke {
    max-width: none;
    opacity: 1;
    margin-left: 0;
  }
}

.sosialt-ikon:hover {
  color: var(--farge-bla);
}


/* ==========================================================================
   6. TOPPBILDE (HERO)
   ========================================================================== */

/* Forsiden: stort bilde uten tekst */
.hero {
  height: 560px;
}

/* Utsnittet av forsidebildet: «center 30%» viser litt mer av himmelen,
   så båten havner under menylinjen. Endre prosenten for å flytte utsnittet. */
.hero img {
  object-position: center 30%;
}

/* Undersidene: litt lavere bilde med tittel nede til venstre */
.hero--underside {
  height: 460px;
}

/* Mørk toning nederst i bildet slik at den hvite teksten blir lesbar */
.hero-tekst {
  position: absolute;
  z-index: 2;
  /* Toppbildene har ingen mørk toning – bildet vises skarpt.
     En svak skygge bak teksten gjør at den likevel kan leses. */
  text-shadow: 0 2px 18px rgba(20, 24, 52, .5);
  left: max(var(--sidemarg), calc((100% - var(--sidebredde)) / 2 + var(--sidemarg)));
  right: var(--sidemarg);
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--farge-hvit);
}

.hero-tittel {
  font: 700 52px/1.05 var(--skrift-overskrift);
}

/* Når siden ikke har tekstboks-rad over bildekanten, står tittelen lavere */
.hero--uten-boksrad .hero-tekst {
  bottom: 44px;
}

/* Video i toppbildet (Prøv roing). Ligger oppå stillbildet og
   spilles i ring (loop i HTML-en). */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;          /* Kan ikke trykkes på (og dermed ikke stoppes) */
}

/* Skjul nettleserens egne video-knapper (f.eks. play-knappen på iPhone) */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Ekstra stor sidetittel (brukes på Ro-skole og Prøv roing) */
.hero-tittel--stor {
  font-size: 80px;
}


/* ==========================================================================
   7. TEKSTBOKS-RAD
   Hvit boks delt i 2 eller 3 kolonner med tynne skillelinjer.
   Den ligger litt oppå toppbildet (negativ marg øverst).
   ========================================================================== */
.boks-rad {
  position: relative;
  z-index: 3;
  margin: -60px var(--sidemarg) 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.boks-rad--to {                   /* Variant med to kolonner */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.boks-kolonne {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
}

/* Tynn skillelinje til venstre for alle kolonner unntatt den første */
.boks-kolonne + .boks-kolonne {
  border-left: 1px solid var(--farge-skillelinje);
}

.boks-kolonne .overskrift-liten {
  font-size: 28px;
}

/* Knappen legger seg nederst i kolonnen */
.boks-kolonne .knapp {
  margin-top: auto;
}


/* ==========================================================================
   8. BILDE + TEKST SIDE VED SIDE
   ========================================================================== */
.bilde-tekst {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.bilde-tekst--bredt-bilde {       /* Forsiden: bildet er litt bredere (7:5) */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.bilde-tekst--staende {           /* Stående bilde til venstre, tekst til høyre (Junior A/senior) */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.bilde-tekst.bilde-tekst--staende > .bilde {
  min-height: 600px;
}

.bilde-tekst--regler {            /* Treningsrom: reglene får mest plass (7:5) */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.bilde-tekst > .bilde {
  min-height: 340px;
}

.bilde-tekst--forside > .bilde {
  height: 424px;
}

.bilde-tekst--forside > .bilde img {
  object-position: center 55%;    /* Utsnittet viser roerne og båten */
}

.tekst-boks {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.tekst-boks--apen {               /* Uten hvit boks rundt (Prøv roing, Treningsrom) */
  padding: 0 8px 8px 16px;
  justify-content: flex-start;     /* Overskriften står på høyde med toppen av bildet */
}

/* Fjerner den lille luften over store overskrifter, så toppen av bokstavene
   står helt i flukt med toppen av bildet ved siden av */
.tekst-boks--apen > :first-child {
  margin-top: -.12em;
}

.tekst-boks--luftig {             /* Litt større innvendig luft */
  padding: 44px 48px;
  justify-content: flex-start;
}

.tekst-boks--luftig .knapp {
  margin-top: auto;
}

/* Punktliste (f.eks. reglene på Treningsrom-siden) */
.punktliste {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
}


/* ==========================================================================
   9. BILDEBANNER (stort bilde med tekst oppå)
   Brukes på forsiden («Bergens Roklubs historie») og på Prøv roing
   («Hvis ikke, prøv Ro-skole»). Tekst og en halvgjennomsiktig hvit
   tekstboks ligger oppå bildet til venstre.
   ========================================================================== */
.bildebanner {
  position: relative;
  overflow: hidden;             /* Gir runde hjørner også på den mørke toningen */
  min-height: 520px;            /* Banneret blir høyere hvis teksten krever det */
  border-radius: var(--hjorne);
  background-color: var(--farge-marine);
}

/* Bredere tekstfelt (Prøv roing, der teksten er lengre) */
.bildebanner--bred .bildebanner-innhold {
  max-width: 560px;
}

.bildebanner--bred .bildebanner-boks {
  width: auto;
}

.bildebanner .bildebanner-bilde img {
  object-position: center;
}

/* Forsiden: utsnittet flyttes litt mot høyre, så roerne synes ved siden av teksten */
.bildebanner .bildebanner-bilde--forside img {
  object-position: 65% center;
}

.bildebanner .bildebanner-bilde {
  position: absolute;
  inset: 0;
}

/* Mørk toning fra venstre, slik at teksten blir lesbar */
.bildebanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 24, 52, .88) 0%, rgba(20, 24, 52, .6) 38%, rgba(20, 24, 52, 0) 62%);
}

.bildebanner-innhold {
  position: relative;
  z-index: 2;
  max-width: 440px;
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--farge-hvit);
}

.bildebanner-tittel {
  font: 700 44px/1.1 var(--skrift-overskrift);
}

.bildebanner-boks {
  margin-top: 8px;
  width: 393px;
  max-width: 100%;
  min-height: 254px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--farge-hvit);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(20, 24, 52, .35);

  /* «Liquid glass» (som widgetene på iPhone): klar, frostet glassflate.
     Bildet bak gjøres uskarpt og skinner gjennom, og teksten er hvit.
     - Mer/mindre gjennomsiktig: endre 0.16 (høyere = mer hvitt glass).
     - Mer/mindre uskarphet: endre 28px. */
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),    /* lys kant øverst, som på glass */
    inset 0 0 24px rgba(255, 255, 255, .06),   /* svak glød innvendig */
    0 10px 30px rgba(20, 24, 52, .22);         /* skygge under */
}


/* ==========================================================================
   10. STOR TEKSTBOKS (full bredde)
   ========================================================================== */
.stor-tekstboks {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ==========================================================================
   11. AVSLUTNINGSBOKS
   Overskrift til venstre (4 deler) og tekst + knapp til høyre (7 deler).
   ========================================================================== */
.avslutning {
  padding: 44px 48px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.avslutning-tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
  line-height: 1.7;
}


/* ==========================================================================
   12. BILDEGALLERI (Lei selskapslokalet)
   To bilder – ett stort – to bilder.
   ========================================================================== */
.galleri {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.galleri-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.galleri-rad .bilde {
  height: 320px;
}

.galleri-stort {
  height: 520px;
}


/* ==========================================================================
   13. UKEPLAN (Treningsrom)
   Dagene bortover, tidene nedover. Hver økt plasseres med
   grid-column (hvilken dag) og grid-row (hvilken tid) i HTML-en.
   ========================================================================== */
.ukeplan-ramme {
  overflow-x: auto;              /* Kan skrolles sidelengs på smal skjerm */
  margin-top: 8px;
}

.ukeplan {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(112px, 1fr));
  /* rad 1 = dager, rad 2–11 = 07:00–12:00 (én rad per halvtime),
     rad 12 = «Ledig 12–17»-linjen, rad 13–22 = 17:00–22:00 */
  grid-template-rows: auto repeat(10, minmax(24px, auto)) 28px repeat(10, minmax(24px, auto));
  gap: 3px 4px;
  min-width: 860px;
}

.ukeplan-dag {
  grid-row: 1;
  padding: 0 4px 6px;
  font: 700 12px var(--skrift-tekst);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--farge-bla);
}

.ukeplan-tid {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  border-top: 1px solid #e6e7ee;   /* Tynn strek ved hver hele time */
  padding-top: 3px;
  white-space: nowrap;
  font: 500 12px var(--skrift-tekst);
  font-variant-numeric: tabular-nums;
  color: #5b6080;
}

.ukeplan-ledig {
  grid-column: 1 / span 8;
  grid-row: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px var(--skrift-tekst);
  color: #636884;
}

.ukeplan-ledig::before,
.ukeplan-ledig::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #cfd2df;
}

.okt {
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  font: 600 13px/1.25 var(--skrift-tekst);
  color: var(--farge-marine);
}

.okt small {                     /* Tiden og «+ U23» under gruppenavnet */
  font-weight: 400;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* To grupper på samme tid: halve bredden hver, side om side */
.okt--venstre {
  justify-self: start;
  width: calc(50% - 2px);
}

.okt--hoyre {
  justify-self: end;
  width: calc(50% - 2px);
}

/* Én farge per gruppe */
.okt--stend      { background: #e6e3da; }
.okt--u23        { background: #ebe0f0; }
.okt--vik        { background: #e4ead2; }
.okt--gruppe-1   { background: #dde3f7; }
.okt--gruppe-2   { background: #d4e9ec; }
.okt--skeie      { background: #e9e4f1; }
.okt--gruppe-3   { background: #f2e6d2; }
.okt--sr-masters { background: var(--farge-bla); color: var(--farge-hvit); }


/* ==========================================================================
   14. GRASROTANDELEN (forsiden)
   Hvit boks med tekst og nøkkeltall til venstre og en graf til høyre.
   Grafen tegnes av script.js (del 7) ut fra tabellen i HTML-en.
   ========================================================================== */
/* Grasrotandelen (venstre) og kart (høyre) side om side */
.grasrot-og-kart {
  padding-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: stretch;          /* Begge sidene blir like høye */
}

/* Grasrotandelen uten boks: tekst og nøkkeltall over grafen */
.grasrot-kort {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.grasrot-tekst {
  gap: 12px;
}

.grasrot-tekst {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Knappen og nøkkeltallene står på samme rad */
.grasrot-tekst .knapp {
  align-self: center;
  margin-left: auto;             /* Knappen legger seg til høyre på raden med tallene */
}

/* De to store tallene (givere og beløp) */
.nokkeltall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin: 4px 0 6px;
}

.nokkeltall-tall {
  font: 700 34px/1 var(--skrift-overskrift);
  letter-spacing: -.02em;
  color: var(--farge-marine);
}

.nokkeltall-tekst {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #5b6080;
}

/* Grafen */
.grasrot-graf {
  position: relative;
  margin: 0;
  min-width: 0;
}

.grasrot-graf figcaption {
  margin: 0 0 6px 4px;
}

.graf-flate {
  position: relative;
  height: 220px;
}

.graf-flate svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.graf-flate svg text {
  font-family: var(--skrift-tekst);
}

.graf-kilde {
  margin: 4px 0 0 4px;
  font-size: 12px;
  color: #636884;
}

/* Boksen som vises når musen holdes over grafen */
.graf-tips {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  background: var(--farge-hvit);
  border: 1px solid var(--farge-skillelinje);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(28, 33, 64, .14);
  font-size: 13px;
  line-height: 1.4;
  color: var(--farge-marine);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}

.graf-tips[hidden] {
  display: none;
}

.graf-tips strong {
  display: block;
  font-size: 15px;
}

/* Kartet (Google Maps) til høyre for Grasrotandelen */
.kart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kart-tekst {
  font-size: 15px;
  color: #5b6080;
}

.kart-ramme {
  flex: 1;                       /* Kartet fyller resten av høyden */
  min-height: 260px;
  margin-top: 4px;
  border-radius: var(--hjorne);
  overflow: hidden;
  background: #e6e4de;
  box-shadow: var(--skygge-boks);
}

.kart-ramme iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.kart-lenke {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* «Se alle tallene» – tabellen under grafen */
.graf-tabell {
  margin: 10px 0 0 4px;
  font-size: 13px;
}

.graf-tabell summary {
  cursor: pointer;
  color: var(--farge-bla);
  font-weight: 500;
}

.graf-tabell table {
  margin-top: 8px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.graf-tabell th,
.graf-tabell td {
  padding: 4px 16px 4px 0;
  text-align: left;
  border-bottom: 1px solid var(--farge-skillelinje);
}

.graf-tabell td:last-child,
.graf-tabell th:last-child {
  text-align: right;
}


/* ==========================================================================
   15. FOOTER (bunnen av alle sider)
   ========================================================================== */
.footer {
  background: var(--farge-marine);
  color: #d9dcec;
  padding: 56px var(--sidemarg) 28px;
}

.footer-innhold {
  max-width: calc(var(--sidebredde) - 2 * var(--sidemarg));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer-kolonner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, max-content);
  column-gap: 56px;
  font-size: 14px;
  line-height: 1.9;
}

.footer-navn {
  font: 600 26px/1.2 var(--skrift-overskrift);
  color: var(--farge-hvit);
}

.footer-stiftet {
  font: 400 14px var(--skrift-tekst);
  color: #aeb3d1;
  margin-top: 8px;
}

/* «Finn oss» er høyrestilt, «Om klubben» (helt til høyre) er venstrestilt */
.footer-hoyre {
  text-align: right;
}

.footer-venstre {
  text-align: left;
}

.footer-tittel {
  color: var(--farge-hvit);
  font-weight: 700;
  margin-bottom: 6px;
}

.footer a {
  color: #d9dcec;
  text-decoration: none;
}

.footer a:hover {
  color: var(--farge-hvit);
  text-decoration: underline;
}

.footer-bunn {
  border-top: 1px solid #353c66;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: #8d93b8;
}


/* ==========================================================================
   16. BYGGEKLOSSER FOR UNDERSIDENE (versjon 2)
   ========================================================================== */

/* --- 16a. Felles ------------------------------------------------------- */

/* Seksjon som ligger litt over toppbildet (Historie, Styret, Hva skjer, Treningsrom) */
.seksjon--over-bildet {
  position: relative;
  z-index: 3;
  margin-top: -60px;
}

/* Tekst uten hvit boks rundt: overskrift + avsnitt under hverandre */
.apen-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* Liten blå etikett i store bokstaver («Hva styret ikke er», «Siste nytt» …) */
.liten-etikett {
  margin: 0;
  font: 700 12px var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--farge-bla);
}

.tekst-stor {             /* Litt større brødtekst */
  font-size: 17px;
  line-height: 1.7;
}

.tekst-liten {            /* Litt mindre brødtekst */
  font-size: 15px;
  line-height: 1.6;
}

.tekst-dempet {           /* Grå hjelpetekst */
  font-size: 14px;
  color: #5b6080;
}

.overskrift-mindre {      /* Overskrift i små bokser («Ta med», «Spørsmål?») */
  font: 700 26px/1.2 var(--skrift-overskrift);
  color: var(--farge-bla);
}

/* Større knapp («Meld deg på →» på Ro-skole) */
.knapp--stor {
  padding: 12px 26px;
  font-weight: 600;
  font-size: 15px;
}

/* Én blå knapp med to lenker og en skillestrek mellom (Ro-skole) */
.knapp-gruppe {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
  background: var(--farge-bla);
  border-radius: 999px;
  box-shadow: var(--skygge-knapp);
  font: 600 15px var(--skrift-tekst);
}

.knapp-gruppe a {
  padding: 12px 22px;
  color: var(--farge-hvit);
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s;
}

.knapp-gruppe a:hover {
  background: var(--farge-bla-mork);
  color: var(--farge-hvit);
}

.knapp-gruppe-strek {
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
}

/* Knapper (eller knapp + tekst) ved siden av hverandre */
.knapp-rad {
  display: flex;
  align-items: stretch;           /* Knappene blir like høye */
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 4px;
}

.knapp-rad .knapp {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

/* Tekst til venstre (5 deler) og bilde til høyre (7 deler), uten boks (Historie) */
.tekst-bilde-apen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: stretch;
}

.tekst-bilde-apen .apen-tekst {
  padding: 8px;
}

.tekst-bilde-apen .bilde {
  min-height: 360px;
}

/* Avslutning uten hvit boks (Historie) */
.avslutning--apen {
  padding: 24px 8px;
}

/* Stor innledende setning («Tre faste økter i uka …») */
.ingress-rad {
  padding: 56px 48px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}

.ingress-rad--alene {
  grid-template-columns: minmax(0, 1fr);
}

.ingress {
  max-width: 760px;
  font: 500 30px/1.3 var(--skrift-overskrift);
  color: var(--farge-marine);
  text-wrap: pretty;
}

/* To bilder: et bredt (2 deler) og et smalt (1 del) */
.bildepar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
}

.bildepar .bilde {
  height: 380px;
}

/* Bildeserie («Hva skjer» på forsiden og hva-skjer.html)
   Hvert bilde ligger i en <figure> sammen med teksten sin. Figurene ligger
   oppå hverandre. Bare den med klassen "aktiv" synes, og bilde og tekst
   tones inn og ut sammen. Prikkene lages av script.js. */
.bildeserie-bilde {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.45, 0, .2, 1);
  will-change: opacity;
}

.bildeserie-bilde.aktiv {
  opacity: 1;
}

/* Teksten øverst til venstre på bildet */
.bildeserie-tekst {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  top: 20px;
  color: var(--farge-hvit);
  font: 700 20px/1.25 var(--skrift-overskrift);
  letter-spacing: -.01em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    0 2px 14px rgba(0, 0, 0, .45);

  /* Teksten glir litt ned på plass når bildet kommer fram */
  transform: translateY(-8px);
  transition: transform 1.2s var(--myk);
}

.bildeserie-bilde.aktiv .bildeserie-tekst {
  transform: none;
}

/* Prikker og pauseknapp nederst i bildet, samlet i én liten glassboble.
   Glasset er svært gjennomsiktig og bare litt uskarpt, så fargene i bildet
   bak skinner gjennom (boblen har ikke én jevn farge).
   - Mer/mindre gjennomsiktig: endre 0.16 i --serie-glass (høyere = mer hvitt).
   - Mer/mindre uskarphet: endre 8px. */
.bildeserie-kontroller {
  --serie-glass: rgba(255, 255, 255, .16);
  --serie-gli: .6s cubic-bezier(.45, 0, .2, 1);   /* Myk start og myk stopp */
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  height: 30px;
  padding: 0 3px 0 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--serie-glass);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(14, 18, 44, .12);
}

.bildeserie-kontroller[hidden] {
  display: none;
}

/* Vinduet med prikker: plass til den aktive + 2 prikker på hver side
   (4 × 14 px + 34 px = 90 px) */
.bildeserie-prikker {
  position: relative;
  width: 90px;
  height: 100%;
  overflow: hidden;
}

/* Sporet med alle prikkene. script.js flytter det så den aktive står i midten. */
.bildeserie-spor {
  height: 100%;
  display: flex;
  align-items: center;
  transition: transform var(--serie-gli);
}

.bildeserie-spor.uten-glid,
.bildeserie-spor.uten-glid .bildeserie-prikk,
.bildeserie-spor.uten-glid .bildeserie-prikk::after {
  transition: none;
}

/* Én prikk. Selve knappen er en usynlig plass; prikken tegnes med ::after. */
.bildeserie-prikk {
  position: relative;
  flex: 0 0 14px;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: flex-basis var(--serie-gli);
}

.bildeserie-prikk::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 999px;
  background: rgba(28, 33, 64, .5);
  transition:
    transform var(--serie-gli),
    width var(--serie-gli),
    margin var(--serie-gli),
    opacity var(--serie-gli),
    background-color var(--serie-gli);
}

/* Prikkene blir mindre jo lenger unna den aktive de er */
.bildeserie-prikk[data-avstand="2"]::after { transform: scale(.66); }
.bildeserie-prikk[data-avstand="3"]::after { transform: scale(0); opacity: 0; }

/* Den aktive: en avlang pille */
.bildeserie-prikk.aktiv {
  flex-basis: 34px;
}

.bildeserie-prikk.aktiv::after {
  width: 24px;
  margin-left: -12px;
  background: rgba(28, 33, 64, .25);
}

/* Fremdriften: fylles opp i midten (der den aktive pillen alltid står) */
.bildeserie-fyll {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 6px;
  margin: -3px 0 0 -12px;
  pointer-events: none;
}

.bildeserie-fyll::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--farge-marine);
}

.bildeserie-fyll.i-gang::after {
  animation: bildeserie-fremdrift var(--varighet, 5s) linear forwards;
}

@keyframes bildeserie-fremdrift {
  from { width: 6px; }
  to   { width: 24px; }
}

/* Når bildeserien er satt på pause, stopper også fremdriften */
.bildeserie.pauset .bildeserie-fyll::after {
  animation-play-state: paused;
}

/* Pauseknappen: rund, inne i samme boble, med en tynn strek foran */
.bildeserie-pause {
  position: relative;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farge-marine);
  cursor: pointer;
  transition: transform .25s var(--myk), background-color .25s ease;
}

.bildeserie-pause::before {           /* Tynn strek mellom prikkene og knappen */
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  border-left: 1px solid rgba(28, 33, 64, .18);
}

.bildeserie-pause:hover {
  background: rgba(255, 255, 255, .25);
}

.bildeserie-pause svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.bildeserie-pause:active {
  transform: scale(.88);
}

/* Uten støtte for frostet glass: litt tettere bakgrunn */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bildeserie-kontroller {
    --serie-glass: rgba(255, 255, 255, .75);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .bildeserie-kontroller {
    --serie-glass: rgba(255, 255, 255, .95);
  }
}

/* For besøkende som har slått av animasjoner i systemet sitt */
@media (prefers-reduced-motion: reduce) {
  .bildeserie-bilde,
  .bildeserie-tekst,
  .bildeserie-spor,
  .bildeserie-prikk,
  .bildeserie-prikk::after {
    transition: none;
  }

  .bildeserie-fyll.i-gang::after {
    animation: none;
    width: 24px;
  }
}

/* --- 16b. Styret --------------------------------------------------------- */

/* Hvit boks med tekst til venstre og grå sideboks til høyre */
.tekst-og-sideboks {
  padding: 44px 48px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 56px;
  line-height: 1.7;
}

.sideboks {
  background: var(--farge-bakgrunn);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.65;
}

/* Kontaktlisten: én rad per person */
.kontaktliste-seksjon {
  padding: 32px 48px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kontaktliste {
  border-bottom: 1px solid #d6d8e2;
}

.kontakt-rad {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 3fr);
  gap: 24px;
  align-items: baseline;
  padding: 16px 8px;
  border-top: 1px solid #d6d8e2;
}

/* Overskriftsraden (Rolle / Navn / Telefon / E-post) */
.kontakt-rad--topp {
  padding: 0 8px 10px;
  border-top: none;
  font: 600 11px var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #636884;
}

.kontakt-rolle {
  font: 700 12px var(--skrift-tekst);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--farge-bla);
}

.kontakt-navn {
  font: 500 20px/1.25 var(--skrift-overskrift);
  color: var(--farge-marine);
}

.kontakt-tlf {
  font-size: 15px;
  color: var(--farge-marine);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kontakt-eposter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.45;
}

.kontakt-epost {                 /* Privat e-post: grå */
  color: #5b6080;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.kontakt-epost--klubb {          /* Klubbens e-post: blå og fet */
  color: var(--farge-bla);
  font-weight: 600;
}

.kontakt-epost:hover,
.kontakt-tlf:hover {
  text-decoration: underline;
}

/* Vaktmester på Styret-siden: egen liste med samme kolonner som styret,
   men med egen overskrift og en svak blå bakgrunn så den skiller seg litt ut. */
.kontaktliste-undertittel {
  margin-top: 28px;
}

.kontaktliste--vaktmester {
  border-bottom: none;
}

.kontaktliste--vaktmester .kontakt-rad {
  border-top: none;
  border-radius: 12px;
  background: rgba(38, 52, 143, .06);
}

/* Vaktmester – liten boks på Lei selskapslokalet (under lenkekortene).
   Vaktmesterparet er ikke en del av styret, derfor et annet oppsett. */
.vaktmester {
  margin-top: 32px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.vaktmester-om {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vaktmester-navn {
  font: 600 20px/1.25 var(--skrift-overskrift);
  color: var(--farge-marine);
}

.vaktmester-tekst {
  font-size: 14px;
  line-height: 1.5;
  color: #5b6080;
}

.vaktmester-kontakt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 15px;
}

.vaktmester-kontakt a {
  color: var(--farge-bla);
  font-weight: 600;
  text-decoration: none;
}

.vaktmester-kontakt a:hover {
  text-decoration: underline;
}

/* Mindre variant (Lei selskapslokalet, under lenkekortene) */
.vaktmester--kompakt {
  margin-top: 0;
  padding: 16px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.vaktmester--kompakt .vaktmester-navn {
  font-size: 16px;
}

.vaktmester--kompakt .vaktmester-kontakt {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 14px;
}

/* --- 16c. Hva skjer ------------------------------------------------------ */

.arrangementer {
  padding: 36px 44px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arrangement-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  column-gap: 40px;
}

.arrangement {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--farge-skillelinje);
}

/* Den blå firkanten med dato */
.dato-brikke {
  height: 72px;
  border-radius: 12px;
  background: var(--farge-bla);
  color: var(--farge-hvit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dato-dag {
  font: 600 28px/1 var(--skrift-overskrift);
}

.dato-maned {
  margin-top: 4px;
  font: 700 11px var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.arrangement-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: #5b6080;
}

.arrangement-tittel {
  font: 600 22px/1.2 var(--skrift-overskrift);
  color: var(--farge-marine);
}

/* --- 16d. Ro-skole -------------------------------------------------------- */

/* Innledning: tekst (7 deler) og faktaboks (5 deler) */
.to-kolonner {
  padding: 56px 48px 56px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.to-kolonner .apen-tekst {
  gap: 20px;
}

/* Variant der teksten går i full bredde (Ro-skole) */
.to-kolonner--full {
  grid-template-columns: minmax(0, 1fr);
}

/* «Ro-skolen i år» med tykk blå strek over */
.faktaboks {
  border-top: 3px solid var(--farge-bla);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sitat {
  font: italic 600 22px/1.4 var(--skrift-overskrift);
  color: var(--farge-marine);
}

.faktaboks .punktliste {
  gap: 8px;
  padding-left: 18px;
  line-height: 1.55;
}

/* Galleri-varianter */
.galleri-rad--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.galleri-rad--tre .bilde {
  height: 260px;
}

.galleri-stort--lavere {
  height: 440px;
}

/* Tre bilder i én rad der midterste er bredest (Ro-skole).
   Passer når bildene til venstre og høyre er stående. */
.galleri-rad--midt-bred {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.galleri-rad--midt-bred .bilde {
  height: 460px;
}

/* Tre stående bilder side om side (Ro-skole, rad 3) */
.galleri-rad--tre-hoy .bilde {
  height: 460px;
}

/* To høye bilder side om side (Ro-skole rad 2, Lei selskapslokalet rad 2) */
.galleri-rad--hoy .bilde {
  height: 560px;
}

/* --- 16e. Lei selskapslokalet -------------------------------------------- */

/* Tekst til venstre, lenkekort (380 px) til høyre */
.tekst-og-lenker {
  padding: 56px 48px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: center;
}

.tekst-og-lenker .tekst-stor {
  font-size: 18px;
  line-height: 1.65;
}

.lenkekort-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hvitt, klikkbart kort med logo, tekst og pil */
.lenkekort {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  height: 84px;
  padding: 0 20px;
  background: var(--farge-hvit);
  border-radius: 14px;
  box-shadow: var(--skygge-boks);
  text-decoration: none;
  transition: box-shadow .15s;
}

.lenkekort:hover {
  box-shadow: 0 6px 18px rgba(28, 33, 64, .16);
}

.lenkekort-logo {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lenkekort-logo img {
  max-height: 52px;
  max-width: 120px;
  display: block;
  mix-blend-mode: multiply;
}

/* Lite blått Facebook-merke nede i hjørnet av logoen */
.lenkekort-facebook {
  position: absolute;
  right: -6px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1877f2;
  color: var(--farge-hvit);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px var(--skrift-tekst);
  box-shadow: 0 0 0 2px var(--farge-hvit);
}

.lenkekort-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lenkekort-tittel {
  font: 700 15px var(--skrift-tekst);
  color: var(--farge-marine);
}

.lenkekort-under {
  font-size: 13px;
  color: #5b6080;
}

.lenkekort-pil {
  font: 500 18px var(--skrift-tekst);
  color: var(--farge-bla);
}

/* --- 16f. Junior B: sesongvelger og ukeplan med dagkort ------------------ */

/* Knappene «Sommer» / «Høst / vinter» */
.sesongvelger {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--farge-hvit);
  border-radius: 999px;
  box-shadow: var(--skygge-boks);
}

.sesong-knapp {
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: 600 14px var(--skrift-tekst);
  color: var(--farge-marine);
}

.sesong-knapp[aria-pressed="true"] {   /* Valgt knapp: blå */
  background: var(--farge-bla);
  color: var(--farge-hvit);
}

.seksjon--ukeplan {
  padding-bottom: 40px;
}

.sesongplan {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sesongplan[hidden] {                  /* Planen som ikke er valgt, skjules */
  display: none;
}

.sesongplan-topp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 8px;
}

.sesongplan-topp .liten-etikett {
  font-size: 13px;
  letter-spacing: .14em;
}

/* Forklaring: «På vannet» / «Inne / land» */
.forklaring {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #5b6080;
}

.forklaring > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.forklaring-strek {
  width: 18px;
  height: 4px;
  border-radius: 2px;
}

.forklaring-strek--vann { background: var(--farge-bla); }
.forklaring-strek--inne { background: #9aa3d6; }

/* Ett kort per dag */
.dagkort-rad {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.dagkort {
  min-height: 190px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--farge-hvit);
  border-radius: 14px;
  box-shadow: var(--skygge-boks);
  border-top: 4px solid transparent;
}

.dagkort--vann { border-top-color: var(--farge-bla); }  /* Økt på vannet */
.dagkort--inne { border-top-color: #9aa3d6; }          /* Økt inne / på land */

.dagkort--fri {                                          /* Fri dag: stiplet ramme */
  background: none;
  box-shadow: none;
  border: 1.5px dashed #cfd2df;
}

.dagkort-dag {
  font: 700 12px var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--farge-bla);
}

.dagkort-tid {
  font: 500 15px var(--skrift-tekst);
  font-variant-numeric: tabular-nums;
  color: var(--farge-marine);
}

.dagkort-aktivitet {
  font: 600 19px/1.2 var(--skrift-overskrift);
  color: var(--farge-marine);
  text-wrap: pretty;
}

.dagkort-sted {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.4;
  color: #5b6080;
}

.dagkort--fri .dagkort-dag,
.dagkort--fri .dagkort-aktivitet {
  color: #636884;
}

/* To små hvite bokser ved siden av hverandre */
.to-bokser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.liten-boks {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.liten-boks .knapp {
  margin-top: auto;
}

/* --- 16g. Junior A/senior: vinter- og sommerboks ------------------------- */

.vinter-sommer {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  align-items: stretch;
}

.sesongboks {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sesongboks--bla {
  background: var(--farge-bla);
  color: var(--farge-hvit);
  border-radius: var(--hjorne);
  line-height: 1.7;
}

.sesongboks--bla .overskrift-medium {
  color: var(--farge-hvit);
}

/* Liste med ukedag til venstre og aktivitet til høyre */
.dagliste-rad {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--farge-skillelinje);
  font-size: 15px;
  line-height: 1.6;
}

.dagliste-dag {
  font: 700 12px/1.6 var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--farge-bla);
}


/* ==========================================================================
   17. MOBIL OG NETTBRETT
   Alt under gjelder bare skjermer som er smalere enn 900 px.
   ========================================================================== */
@media (max-width: 900px) {

  :root {
    --sidemarg: 16px;
  }

  /* --- Toppen --- */
  .topp-rad {
    height: 72px;
    gap: 12px;
  }

  .logo-flagg {
    width: 38px;
  }

  .logo-navn {
    font-size: 20px;
  }

  .logo-stiftet {
    font-size: 9px;
  }

  .kontakt-knapp {
    padding: 0 16px;
    font-size: 14px;
  }

  /* --- Menyen blir en «Meny ☰»-knapp som åpner en liste --- */
  .meny-linje {
    top: calc(100% + 10px);
    width: calc(100% - 2 * var(--sidemarg));
    height: auto;
    min-height: 52px;
    padding: 0 18px;
    flex-wrap: wrap;
  }

  .meny-knapp {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font: 700 15px var(--skrift-tekst);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--farge-bla);
  }

  .meny-knapp-ikon {
    font-size: 20px;
    line-height: 1;
  }

  .sosiale-ikoner {
    height: 52px;
  }

  /* Listen er skjult til man trykker på «Meny» (script.js setter "meny-apen") */
  .meny {
    display: none;
    order: 3;                    /* Legger listen under knappen og ikonene */
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 12px;
    border-top: 1px solid var(--farge-skillelinje);
  }

  .meny-linje.meny-apen .meny {
    display: flex;
  }

  .meny-punkt {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .meny-lenke {
    height: auto;
    padding: 12px 0;
    border-bottom: none;
    justify-content: space-between;
  }

  .meny-punkt.aktiv > .meny-lenke {
    border-bottom: none;
  }

  /* Undermenyen vises inni listen, ikke som svevende boks */
  .undermeny {
    position: static;
    min-width: 0;
    padding: 0 0 6px 12px;
    box-shadow: none;
    border-radius: 0;
  }

  /* På mobil åpnes undermenyen bare ved trykk, ikke ved «hover» */
  .meny-punkt:hover > .undermeny,
  .meny-punkt:focus-within > .undermeny {
    display: none;
  }

  .meny-punkt.apen > .undermeny {
    display: block;
  }

  /* --- Toppbilder --- */
  .hero {
    height: 380px;
  }

  .hero--underside {
    height: 380px;
  }

  .hero-tekst {
    bottom: 76px;
  }

  .hero--uten-boksrad .hero-tekst {
    bottom: 32px;
  }

  .hero-tittel {
    font-size: 34px;
  }

  /* --- Alt som sto side ved side, legges under hverandre --- */
  .boks-rad,
  .boks-rad--to,
  .bilde-tekst,
  .bilde-tekst--bredt-bilde,
  .bilde-tekst--regler,
  .bilde-tekst--staende,
  .avslutning,
  .galleri-rad {
    grid-template-columns: minmax(0, 1fr);
  }

  .boks-kolonne + .boks-kolonne {
    border-left: none;
    border-top: 1px solid var(--farge-skillelinje);
  }

  .bilde-tekst > .bilde,
  .bilde-tekst--forside > .bilde {
    height: 260px;
    min-height: 0;
  }

  /* Bildet skal alltid stå øverst når boksene ligger under hverandre */
  .bilde-tekst > .bilde {
    order: -1;
  }

  .tekst-boks,
  .tekst-boks--luftig,
  .stor-tekstboks,
  .avslutning {
    padding: 28px 22px;
    gap: 16px;
  }

  .overskrift-stor,
  .overskrift-medium {
    font-size: 28px;
  }

  .galleri-rad .bilde {
    height: 220px;
  }

  .galleri-stort {
    height: 300px;
  }

  /* --- Bildebanneret --- */
  .bildebanner {
    height: auto;
  }

  .bildebanner::after {
    background: rgba(20, 24, 52, .55);
  }

  .bildebanner-innhold {
    padding: 28px 22px;
  }

  .bildebanner-tittel {
    font-size: 32px;
  }

  .bildebanner-boks {
    width: auto;
    min-height: 0;
  }

  /* --- Grasrot og footer --- */
  .bilde-tekst.bilde-tekst--staende > .bilde {
    min-height: 0;
    height: 380px;
  }

  .grasrot-og-kart {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .kart-ramme {
    flex: none;
    height: 300px;
  }

  .grasrot-tekst .knapp {
    margin-left: 0;
  }

  .graf-flate {
    height: 240px;
  }

  .footer-kolonner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  /* På mobil ligger kolonnene under hverandre og er venstrestilt */
  .footer-hoyre {
    text-align: left;
  }

  .footer-bunn {
    flex-direction: column;
  }

  /* Ro-skole: den blå knappen med to lenker legges under hverandre */
  .knapp-gruppe {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
  }

  .knapp-gruppe a {
    border-radius: 0;
  }

  .knapp-gruppe a:first-child {
    border-radius: 18px 18px 0 0;
  }

  .knapp-gruppe a:last-child {
    border-radius: 0 0 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, .3);
  }

  .knapp-gruppe-strek {
    display: none;
  }

  .tekst-boks--apen {
    padding: 8px 0;
  }

  .seksjon--uten-toppbilde,
  .kontaktliste-seksjon.seksjon--uten-toppbilde {
    padding-top: 100px;
  }

  /* --- Undersidene (versjon 2) --- */
  .hero-tittel--stor {
    font-size: 48px;
  }

  .tekst-bilde-apen,
  .tekst-og-sideboks,
  .kontakt-rad,
  .to-kolonner,
  .tekst-og-lenker,
  .galleri-rad--tre,
  .galleri-rad--midt-bred,
  .bildepar,
  .vinter-sommer,
  .to-bokser,
  .ingress-rad {
    grid-template-columns: minmax(0, 1fr);
  }

  .tekst-bilde-apen .bilde {
    min-height: 240px;
  }

  .tekst-og-sideboks {
    padding: 28px 22px;
    gap: 24px;
  }

  .kontaktliste-seksjon {
    padding: 24px var(--sidemarg) 48px;
  }

  .vaktmester {
    padding: 20px 22px;
  }

  .vaktmester-kontakt {
    align-items: flex-start;
  }

  /* Kontaktlisten: hver person som en liten blokk */
  .kontakt-rad {
    gap: 4px;
    padding: 14px 4px;
  }

  .kontakt-rad--topp {
    display: none;
  }

  .arrangementer,
  .sesongboks,
  .liten-boks {
    padding: 28px 22px;
  }

  .to-kolonner,
  .tekst-og-lenker {
    padding: 32px var(--sidemarg);
    gap: 32px;
  }

  .ingress-rad {
    padding: 32px var(--sidemarg) 24px;
    gap: 20px;
  }

  .ingress {
    font-size: 24px;
  }

  .sesongvelger {
    justify-self: start;
  }

  .lenkekort {
    grid-template-columns: 90px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 14px;
  }

  .galleri-rad--midt-bred .bilde {
    height: 420px;
  }

  .galleri-rad--hoy .bilde {
    height: 420px;
  }

  .galleri-rad--tre-hoy .bilde {
    height: 420px;
  }

  .galleri-rad--midt-bred .bilde:nth-child(2) {
    height: 260px;
  }

  .galleri-rad--tre .bilde,
  .bildepar .bilde {
    height: 240px;
  }

  .galleri-stort--lavere {
    height: 300px;
  }

  /* Ukeplanen: to dager i bredden, lavere kort */
  .dagkort-rad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dagkort {
    min-height: 0;
  }

  .sesongplan-topp {
    flex-direction: column;
    gap: 8px;
  }
}

/* Ekstra smale telefoner: litt mindre logo, men «Stiftet»-linjen vises fortsatt */
@media (max-width: 420px) {
  .logo-stiftet {
    font-size: 8px;
    letter-spacing: .1em;
  }

  .logo-navn {
    font-size: 17px;
  }
}


/* ==========================================================================
   18. TILGJENGELIGHET OG DETALJER
   Hentet fra Apples designprinsipper (Human Interface Guidelines):
     - «Design for everyone»: synlig fokus for tastatur, «Hopp til innhold»,
       sterk nok kontrast på tekst.
     - «Provide clear feedback»: knapper og kort reagerer når man trykker.
     - «Support the way people hold their device»: trykkflater på minst
       44 × 44 px på mobil.
   Utseendet ellers er uendret.
   ========================================================================== */

/* --- «Hopp til innhold»: skjult til man trykker Tab --- */
.hopp-til-innhold {
  position: absolute;
  z-index: 100;
  left: 16px;
  top: -60px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--farge-bla);
  color: var(--farge-hvit);
  font: 600 15px var(--skrift-tekst);
  text-decoration: none;
  transition: top .2s ease;
}

.hopp-til-innhold:focus {
  top: 12px;
  color: var(--farge-hvit);
}

/* Hovedinnholdet får ikke ramme når «Hopp til innhold» flytter fokus dit */
#innhold:focus {
  outline: none;
}

/* --- Synlig fokusring for tastatur (vises ikke ved museklikk) --- */
:focus-visible {
  outline: 3px solid var(--farge-bla);
  outline-offset: 3px;
  border-radius: 6px;
}

.knapp:focus-visible,
.knapp-gruppe a:focus-visible,
.kontakt-knapp:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

/* På mørke flater (footer, glassboks, video) er ringen hvit */
.footer :focus-visible,
.bildebanner :focus-visible,
.bildeserie-prikk:focus-visible,
.bildeserie-pause:focus-visible {
  outline-color: var(--farge-marine);
}

/* --- Tydelig tilbakemelding når man trykker --- */
.knapp,
.knapp-gruppe a,
.lenkekort,
.kontakt-knapp,
.sesong-knapp {
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.knapp:active,
.knapp-gruppe a:active,
.sesong-knapp:active {
  transform: scale(.97);           /* Knappen «trykkes inn» litt */
}

.lenkekort:hover {
  transform: translateY(-2px);     /* Kortet løfter seg litt */
}

.lenkekort:active {
  transform: translateY(0) scale(.99);
}

/* Myk rulling når man hopper til et sted på siden */
html {
  scroll-behavior: smooth;
}

/* --- Større trykkflate på prikkene i bildeserien (selve prikken er like liten) --- */
/* --- Mobil: trykkflater på minst 44 px --- */
@media (max-width: 900px) {
  .meny-lenke,
  .undermeny a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sosialt-ikon {
    position: relative;
  }

  .sosialt-ikon::after {
    content: "";
    position: absolute;
    inset: -10px;                  /* Usynlig, større trykkflate rundt ikonet */
  }

  .footer a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* --- Færre bevegelser for dem som har bedt om det i systemet sitt --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .knapp:active,
  .knapp-gruppe a:active,
  .sesong-knapp:active,
  .lenkekort:hover,
  .lenkekort:active {
    transform: none;
  }
}


/* ==========================================================================
   19. BEVEGELSE OG ANIMASJONER
   Alt her er pynt: siden fungerer og ser riktig ut uten. Animasjonene slås
   av automatisk for besøkende som har valgt «reduser bevegelse».

     19a  Felles fart og «fjær»-kurve
     19b  Sideoverganger (mykt bytte mellom undersider)
     19c  Toppbildet og tittelen glir inn når siden åpnes
     19d  Innhold glir inn når man ruller ned (script.js, del 8)
     19e  Knapper: fjærende trykk og pil som skyter fram
     19f  Menylinjen følger med når man ruller (glass)
     19g  Nedtrekksmeny og mobilmeny som glir åpen
     19h  Bilder som zoomer litt når musen er over
     19i  Grafen tegnes, tallene telles opp, sesongplanen tones inn
   ========================================================================== */

/* --- 19a. Felles fart og «fjær»-kurve --------------------------------------
   --fjaer gir en liten «sprett» på slutten, slik Apple bruker mye.
   --myk er en rolig kurve for ting som glir inn. */
:root {
  --fjaer: cubic-bezier(.34, 1.56, .64, 1);
  --myk: cubic-bezier(.22, 1, .36, 1);
  --rask: .18s;
  --rolig: .9s;                /* Hvor lang tid innhold bruker på å gli inn */
}

/* --- 19b. Sideoverganger ----------------------------------------------------
   Når man klikker til en annen underside, tones den gamle siden ut og den
   nye glir inn. Toppen (logo og meny) står stille. Virker i nyere
   Chrome, Edge og Safari; andre nettlesere bytter side som vanlig. */
@view-transition {
  navigation: auto;
}

.topp {
  view-transition-name: topp;
}

::view-transition-old(root) {
  animation: side-ut .25s ease both;
}

::view-transition-new(root) {
  animation: side-inn .45s var(--myk) both;
}

@keyframes side-ut {
  to { opacity: 0; transform: scale(.985); }
}

@keyframes side-inn {
  from { opacity: 0; transform: translateY(16px); }
}

/* --- 19c. Toppbildet og tittelen ------------------------------------------- */
.hero > img,
.hero--underside > img,
.hero-video {
  animation: bilde-inn 1.6s var(--myk) both;
}

.hero-tekst {
  animation: tekst-opp .9s var(--myk) .25s both;
}

@keyframes bilde-inn {
  from { transform: scale(1.06); opacity: .4; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes tekst-opp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 19d. Innhold glir inn ved rulling --------------------------------------
   script.js gir elementene klassen «glir-inn» og legger til «synlig» når de
   kommer inn på skjermen. --nr gir en liten forsinkelse, så elementer som står
   ved siden av hverandre kommer etter tur. */
.glir-inn {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--rolig) var(--myk),
    transform var(--rolig) var(--myk);
  transition-delay: calc(var(--nr, 0) * 80ms);
}

.glir-inn.synlig {
  opacity: 1;
  transform: none;
}

/* --- 19e. Knapper ----------------------------------------------------------- */
.knapp,
.knapp-gruppe a,
.kontakt-knapp,
.sesong-knapp,
.lenkekort {
  transition:
    background-color var(--rask) ease,
    box-shadow var(--rask) ease,
    transform .35s var(--fjaer);
}

.knapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 33, 64, .22);
}

.knapp:active,
.knapp-gruppe a:active,
.sesong-knapp:active {
  transform: scale(.94);
  transition-duration: .08s;     /* Trykkes raskt inn, spretter tilbake med fjær */
}

/* Pilen skyter litt fram når musen er over knappen */
.pil {
  display: inline-block;
  transition: transform .35s var(--fjaer);
}

.knapp:hover .pil,
.knapp-gruppe a:hover .pil {
  transform: translateX(4px);
}

.lenkekort:hover .pil {
  transform: translate(3px, -3px);
}

/* Lenkekortene løfter seg tydeligere */
.lenkekort:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(28, 33, 64, .16);
}

/* «Kontakt oss» får en liten lysglød */
.kontakt-knapp:hover {
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .35);
}

/* Menylenkene får en strek som vokser fram under */
@media (min-width: 901px) {
  .meny-lenke {
    position: relative;
  }

  .meny-lenke::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--farge-bla);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--myk);
  }

  .meny-punkt:not(.aktiv) > .meny-lenke:hover::after {
    transform: scaleX(1);
  }
}

/* --- 19f. Menylinjen følger med når man ruller -----------------------------
   Når menylinjen når toppen av skjermen, legger script.js klassen «festet»
   på den. Den blir da stående fast øverst (uten å blinke), som frostet glass. */
.meny-linje.festet {
  position: fixed;
  z-index: 50;
  top: 12px;
  background: rgba(255, 255, 255, .84);   /* Høyere tall = mindre gjennomsiktig */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 28px rgba(20, 24, 52, .16);
}

/* Mobil: åpen meny er helt hvit (så teksten bak ikke skinner gjennom),
   og kan rulles hvis den er høyere enn skjermen */
.meny-linje.festet.meny-apen {
  background: var(--farge-hvit);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* --- 19g. Nedtrekksmeny (PC) og mobilmeny ---------------------------------- */
@media (min-width: 901px) {
  .undermeny {
    display: block;              /* Skjules med gjennomsiktighet i stedet, så den kan gli */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    transform-origin: top left;
    transition:
      opacity .2s ease,
      transform .3s var(--fjaer),
      visibility 0s linear .3s;
  }

  .meny-punkt:hover > .undermeny,
  .meny-punkt:focus-within > .undermeny,
  .meny-punkt.apen > .undermeny {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity .2s ease,
      transform .35s var(--fjaer),
      visibility 0s;
  }

  /* Lenkene i nedtrekket glir litt til høyre når musen er over */
  .undermeny a {
    transition: background-color .15s ease, padding-left .25s var(--myk);
  }

  .undermeny a:hover {
    padding-left: 24px;
  }
}

@media (max-width: 900px) {
  .meny-linje.meny-apen .meny {
    animation: meny-apne .35s var(--myk) both;
  }

  .meny-punkt.apen > .undermeny {
    animation: meny-apne .3s var(--myk) both;
  }

  /* «Meny ☰» snurrer litt når den trykkes */
  .meny-knapp-ikon {
    display: inline-block;
    transition: transform .35s var(--fjaer);
  }

  .meny-linje.meny-apen .meny-knapp-ikon {
    transform: rotate(90deg);
  }
}

@keyframes meny-apne {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --- 19h. Bilder som zoomer litt ------------------------------------------- */
.galleri .bilde img,
.bildepar .bilde img,
.bilde-tekst > .bilde:not(.bildeserie) img,
.tekst-bilde-apen .bilde img {
  transition: transform .8s var(--myk);
}

.galleri .bilde:hover img,
.bildepar .bilde:hover img,
.bilde-tekst > .bilde:not(.bildeserie):hover img,
.tekst-bilde-apen .bilde:hover img {
  transform: scale(1.04);
}

/* Bildeserien: bildene tones rolig over i hverandre.
   (Ingen zoom her – det ga hakkete bevegelse i enkelte nettlesere.) */
.bildeserie-bilde {
  transition: opacity 1.2s cubic-bezier(.45, 0, .2, 1);
}

/* Dagkortene i ukeplanen løfter seg litt */
.dagkort:not(.dagkort--fri) {
  transition: transform .35s var(--fjaer), box-shadow .2s ease;
}

.dagkort:not(.dagkort--fri):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(28, 33, 64, .12);
}

/* --- 19i. Grafen, tallene og sesongplanen --------------------------------- */

/* Grafen tegnes fra venstre mot høyre når den kommer inn på skjermen
   (script.js setter lengden på streken i --lengde) */
.graf-linje {
  stroke-dasharray: var(--lengde, 2000);
  stroke-dashoffset: var(--lengde, 2000);
}

.synlig .graf-linje,
.graf-flate.synlig .graf-linje {
  animation: tegn-linje 1.6s var(--myk) .2s forwards;
}

@keyframes tegn-linje {
  to { stroke-dashoffset: 0; }
}

.graf-flate circle {
  opacity: 0;
}

.graf-flate.synlig circle {
  animation: prikk-inn .4s var(--fjaer) forwards;
  animation-delay: calc(.3s + var(--nr, 0) * 90ms);
}

@keyframes prikk-inn {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

.graf-flate circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: r .2s var(--fjaer);
}

/* Sesongplanen (Junior B) tones inn når man bytter */
.sesongplan:not([hidden]) .dagkort {
  animation: tekst-opp .5s var(--myk) both;
  animation-delay: calc(var(--nr, 0) * 50ms);
}

/* --- Ingen bevegelse for dem som har bedt om det ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .glir-inn {
    opacity: 1;
    transform: none;
  }

  .graf-linje {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .graf-flate circle {
    opacity: 1;
  }
}


/* ==========================================================================
   20. NYE BYGGEKLOSSER (versjon 3)
   ========================================================================== */

/* --- 20a. Forsiden: «liquid glass»-flate nederst til venstre i toppbildet ---
   Én lenke til Prøv roing som flyter over bildet. Glass brukes bare her
   (en kontroll over innholdet), aldri på selve innholdet, og aldri glass på glass.
   Safari støtter ikke ekte lysbrytning, så glasset er en tilnærming:
   uskarphet + metning bak, mørkeblå tint, lys kant og myke skygger.
   - Venstrekanten følger menylinjen over (del 5).
   - Bredden er ca. 45 % av menylinjens bredde.
   - Mørkere/lysere bak teksten: se kommentaren over .glassflate. */
.hero--forside {
  height: 680px;

  /* Menylinjens bredde (samme regnestykke som .meny-linje i del 5) */
  --menybredde: min(calc(100% - 65px), 1135px);
}

/* Klart glass uten farge: bildet bak blir bare uskarpt og litt dempet
   (brightness), så den hvite teksten kan leses. Ingen blå tone.
   - Mer/mindre gjennomsiktig: endre .06 (høyere = mer hvitt glass).
   - Mørkere/lysere bak teksten: endre brightness(.68) (lavere = mørkere).
     Verdien er valgt så den hvite teksten har god nok kontrast (minst 4,5:1). */
.glassflate {
  position: absolute;
  z-index: 2;
  left: calc((100% - var(--menybredde)) / 2);
  bottom: 36px;
  width: calc(var(--menybredde) * .55);
  padding: 30px 30px 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--farge-hvit);
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);

  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(18px) brightness(.68) saturate(140%);
  backdrop-filter: blur(18px) brightness(.68) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 28px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14);

  transition:
    transform .25s var(--myk),
    background-color .25s ease;

  animation: tekst-opp .9s var(--myk) .3s backwards;
}

.glassflate:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--farge-hvit);
  transform: translateY(-2px);
}

.glassflate:active {
  transform: scale(.98);
  transition-duration: .12s;
}

.glassflate:focus-visible {
  outline: 3px solid var(--farge-hvit);
  outline-offset: 4px;
}

.glassflate-tekst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.glassflate-tittel {
  font: 700 72px/1 var(--skrift-overskrift);
  letter-spacing: -.035em;
}

.glassflate-under {
  font-size: 19px;
  font-weight: 500;
}

/* Hvit rund knapp med blå pil (bare pynt – hele flaten er lenken) */
.glassflate-pil {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--farge-hvit);
  color: var(--farge-marine);
  text-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  transition: transform .25s var(--myk);
}

.glassflate:hover .glassflate-pil {
  transform: translateX(3px);
}

/* Tilgjengelighet: tett, mørk flate uten uskarphet når brukeren har bedt om
   mindre gjennomsiktighet eller mer kontrast – og i nettlesere uten backdrop-filter */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glassflate,
  .glassflate:hover {
    background: rgba(20, 20, 24, .82);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .glassflate {
    border: 2px solid var(--farge-hvit);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glassflate,
  .glassflate:hover {
    background: rgba(20, 20, 24, .6);
  }
}

/* Luft mellom toppbildet og innholdet under */
.hero--forside + .side-innhold {
  padding-top: 64px;
}

/* --- 20b. Tekst om gruppen (Nybegynner & U15) ----------------------------- */
.gruppe-tekst {
  margin: 0 0 48px;
}

.gruppe-tekst .apen-tekst {
  max-width: 980px;
}

/* Litt større tekst på gruppesidene, så teksten veier opp mot bildene */
.gruppe-tekst .tekst-stor,
.gruppe-bilde-tekst p {
  font-size: 20px;
  line-height: 1.6;
}

/* Gruppe 1: bildet er like høyt som teksten (ikke høyere) */
.bilde-tekst.gruppe-bilde-tekst {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}

.bilde-tekst.gruppe-bilde-tekst > .bilde {
  min-height: 440px;
}

.gruppe-bilde-tekst .tekst-boks--apen {
  justify-content: center;
  gap: 20px;
}

/* --- 20c. Enkel ukeplan (Nybegynner & U15) --------------------------------
   Én kolonne per dag, bare tynne streker – ingen bokser eller farger. */
.ukeplan-enkel {
  margin: 0 0 56px;
}

/* Bildene under ukeplanen er litt lavere, så tekst og plan får like mye plass */
.ukeplan-enkel + .bildepar .bilde {
  height: 340px;
}

.ukeplan-enkel-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 20px;
}

.ukeplan-enkel-topp p {
  margin: 0;
  color: #636884;
}

.ukeliste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 2px solid var(--farge-marine);
}

.ukeliste-dag {
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ukeliste-dag + .ukeliste-dag {
  border-left: 1px solid var(--farge-skillelinje);
}

.ukeliste-navn {
  margin-bottom: 10px;
  font: 700 12px var(--skrift-tekst);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--farge-bla);
}

.ukeliste-tid {
  font: 600 17px var(--skrift-tekst);
  font-variant-numeric: tabular-nums;
  color: var(--farge-marine);
}

.ukeliste-okt {
  font-size: 15px;
  font-weight: 500;
}

.ukeliste-dag--fri .ukeliste-okt {
  color: #636884;
}

/* --- 20d. Mobil ----------------------------------------------------------- */
@media (max-width: 900px) {
  /* Glassflaten: full bredde minus sidemarg (samme som menylinjen), samme høyde */
  .hero--forside {
    height: 560px;
    --menybredde: calc(100% - 2 * var(--sidemarg));
  }

  .glassflate {
    width: var(--menybredde);
    bottom: 20px;
    padding: 16px 16px 16px 22px;
  }

  .glassflate-tittel {
    font-size: 44px;
  }

  /* Bildet bak er lysere på mobil, så glasset demper litt mer her */
  .glassflate {
    -webkit-backdrop-filter: blur(18px) brightness(.6) saturate(140%);
    backdrop-filter: blur(18px) brightness(.6) saturate(140%);
  }

  .glassflate-under {
    font-size: 15px;
  }

  .glassflate-pil {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .hero--forside + .side-innhold {
    padding-top: 32px;
  }

  /* Gruppesidene: bilde over teksten */
  .bilde-tekst.gruppe-bilde-tekst {
    grid-template-columns: minmax(0, 1fr);
  }

  .bilde-tekst.gruppe-bilde-tekst > .bilde {
    min-height: 0;
    height: 380px;
  }

  .gruppe-tekst .tekst-stor,
  .gruppe-bilde-tekst p {
    font-size: 17px;
  }

  .ukeplan-enkel + .bildepar .bilde {
    height: 260px;
  }

  /* Ukeplanen blir en liste: én rad per dag */
  .ukeliste {
    grid-template-columns: minmax(0, 1fr);
  }

  .ukeliste-dag {
    padding: 12px 0;
    display: grid;
    grid-template-columns: 88px 104px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 12px;
  }

  .ukeliste-dag + .ukeliste-dag {
    border-left: none;
    border-top: 1px solid var(--farge-skillelinje);
  }

  .ukeliste-navn {
    margin-bottom: 0;
  }

  .ukeliste-tid {
    font-size: 15px;
  }

  .ukeliste-dag--fri .ukeliste-okt {
    grid-column: 2 / span 2;
  }
}


/* ==========================================================================
   21. HVA SKJER I BR (versjon 3)
   ========================================================================== */

/* --- 21a. Toppbilde uten tittel ------------------------------------------ */
.hero--uten-tittel {
  height: 560px;
}

/* --- 21b. Unge talenter: lang boks med bilder, tekst under --------------- */
/* Hvit, rund ramme rundt en rad med bilder i full størrelse som henger sammen.
   Bilderekken glir mot venstre i en uendelig løkke (script.js del 11).
   Farten styres av fartsbaren nederst i bildene. */
.talenter-bilder {
  --bilde-hoyde: 300px;
  position: relative;
  padding: 10px;
  background: var(--farge-hvit);
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(20, 24, 52, .08);
}

/* Vinduet: viser bare det som er innenfor rammen, med runde hjørner */
.talenter-vindu {
  overflow: hidden;
  border-radius: 18px;
}

/* Sporet har bilderekken to ganger. Det flyttes fra −50 % til 0, altså
   nøyaktig én rekke mot høyre, og starter så på nytt uten at det synes. */
.talenter-spor {
  display: flex;
  width: max-content;
  will-change: transform;
}

.talenter-rekke {
  display: flex;
  flex-shrink: 0;
}

.talenter-rekke img {
  display: block;
  height: var(--bilde-hoyde);
  width: auto;                    /* Hvert bilde beholder sin egen form */
  flex-shrink: 0;
}

/* --- Fartsbaren nederst i bildene ------------------------------------------
   Liten glassbar (samme glass som prikkboblen) med en strek og en rund knapp.
   Knappen viser pause helt til venstre, og spill ellers.
   Selve glideren er et usynlig <input type="range"> oppå (kan brukes med
   mus, finger og piltaster). --verdi (0–1) settes av script.js. */
.fartsbar {
  --verdi: .5;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 150px;
  height: 30px;
  padding: 0 12px;
  /* Svært gjennomsiktig glass. Mer/mindre gjennomsiktig: endre 0.07. */
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(14, 18, 44, .12);
}

/* Streken (og den mørke delen som viser farten) */
.fartsbar-spor {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}

.fartsbar-fyll {
  height: 100%;
  width: calc(var(--verdi) * 100%);
  border-radius: inherit;
  background: rgba(28, 33, 64, .55);
}

/* Den runde knappen oppå streken */
.fartsbar-knapp {
  position: absolute;
  top: 50%;
  left: calc(22px + var(--verdi) * (100% - 44px));
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: var(--farge-hvit);
  box-shadow: 0 1px 6px rgba(14, 18, 44, .3);
  color: var(--farge-marine);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .2s var(--myk);
}

.fartsbar-ikon {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.fartsbar-ikon--pause,
.fartsbar.pauset .fartsbar-ikon--spill {
  display: none;
}

.fartsbar.pauset .fartsbar-ikon--pause {
  display: block;
}

/* Usynlig glider over hele baren (det er denne man drar i) */
.fartsbar-glider {
  position: absolute;
  inset: 0 10px;
  width: calc(100% - 20px);
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fartsbar-glider:active + .fartsbar-knapp,
.fartsbar:active .fartsbar-knapp {
  transform: scale(1.12);
}

.fartsbar:has(.fartsbar-glider:focus-visible) {
  outline: 3px solid var(--farge-hvit);
  outline-offset: 2px;
}

/* Teksten fyller hele bredden, med jevne kanter på begge sider */
.talenter-tekst {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- 21c. Kommende arrangementer: glasskort oppå et bilde -----------------
   Bildet ligger i bakgrunnen, og hvert arrangement er et mørkeblått,
   frostet glasskort (samme glass som flaten på forsiden, del 20a).
   - Mørkere/lysere glass: endre siste tall i --arr-glass (0.42). */
.arrangement-banner {
  --arr-glass: rgba(33, 41, 92, .42);
  position: relative;
  overflow: hidden;
  min-height: 440px;
  padding: 48px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: center;
  border-radius: 26px;
  isolation: isolate;
}

.arrangement-banner-bilde {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.arrangement-banner-tittel {
  align-self: end;
  color: var(--farge-hvit);
  font: 700 52px/1.02 var(--skrift-overskrift);
  letter-spacing: -.03em;
  text-shadow: 0 2px 18px rgba(14, 18, 44, .55);
}

.glass-arrangementer {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.glass-arrangement {
  padding: 16px 22px 16px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--farge-hvit);
  background: var(--arr-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .38);
  border-top-color: rgba(255, 255, 255, .58);
  border-radius: 22px;
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, .06),
    0 10px 28px rgba(14, 18, 44, .2);
  transition: transform .3s var(--myk), background-color .3s ease;
}

.glass-arrangement:hover {
  transform: translateY(-2px);
  background: rgba(45, 54, 112, .5);
}

/* Datoen i en lys, tett brikke (ikke glass oppå glass) */
.glass-dato {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--farge-hvit);
  color: var(--farge-bla);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.glass-dato-dag {
  font: 700 26px/1 var(--skrift-overskrift);
  letter-spacing: -.02em;
}

.glass-dato-maned {
  margin-top: 4px;
  font: 700 11px var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.glass-arrangement-tekst {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.glass-arrangement-tittel {
  font: 700 20px/1.2 var(--skrift-overskrift);
}

.glass-arrangement-tekst p {
  font-size: 15px;
  opacity: .9;
}

/* Tett, mørk flate uten uskarphet når brukeren har bedt om det,
   eller når nettleseren ikke støtter frostet glass */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-arrangement,
  .glass-arrangement:hover {
    background: var(--farge-marine);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-arrangement,
  .glass-arrangement:hover {
    background: var(--farge-marine);
  }
}

/* --- 21d. Mobil ----------------------------------------------------------- */
@media (max-width: 900px) {
  .hero--uten-tittel {
    height: 320px;
  }

  .talenter-bilder {
    --bilde-hoyde: 220px;
    padding: 8px;
    border-radius: 22px;
  }

  .talenter-vindu {
    border-radius: 15px;
  }

  .talenter-tekst {
    margin-top: 24px;
  }

  .arrangement-banner {
    min-height: 0;
    padding: 24px 16px 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    border-radius: 22px;
  }

  .arrangement-banner-tittel {
    font-size: 34px;
  }

  .glass-arrangement {
    padding: 12px 16px 12px 12px;
    gap: 14px;
  }

  .glass-dato {
    width: 54px;
    height: 54px;
  }

  .glass-dato-dag {
    font-size: 22px;
  }
}

/* --- 21e. Medaljeoversikt (NM) i frostet glass ----------------------------
   Lys, frostet glassboks med en svak glans øverst. */
.medaljer {
  position: relative;
  align-self: stretch;              /* Like bred som avsnittet over */
  margin-top: 8px;
  padding: 18px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),     /* glans langs toppen */
    inset 0 0 0 1px rgba(38, 52, 143, .06),    /* tynn blålig kant innerst */
    0 10px 30px rgba(20, 24, 52, .1);
}

.medaljer-tittel {
  font: 700 12px var(--skrift-tekst);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--farge-bla);
}

/* Medaljene på én rad. Apples emojier på iPhone, iPad og Mac; andre enheter
   viser sine egne (Apples emojier kan ikke legges ut på nettsider). */
.nm-medaljer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-height: 40px;
}

.nm-medalje {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  line-height: 1;
  opacity: .6;
  transform-origin: center bottom;
  transition: transform .5s var(--fjaer), opacity .4s ease;
}

.nm-medalje:hover {
  opacity: .9;
}

/* Medaljen som hører til bildet som vises, vokser */
.nm-medalje.aktiv {
  opacity: 1;
  transform: scale(1.45);
}

/* Teksten til bildet. Alle tekstene ligger oppå hverandre; den aktive vises. */
.nm-tekster {
  display: grid;
  padding-right: 52px;               /* Plass til tidsmåleren nede til høyre */
}

.nm-tekst {
  grid-area: 1 / 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--farge-marine);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease, transform .6s var(--myk);
}

.nm-tekst strong {
  font-weight: 800;
  margin-right: 4px;
  color: var(--farge-bla);
}

.nm-tekst.aktiv {
  opacity: 1;
  transform: none;
}

/* Rund tidsmåler med pauseknapp i midten (nede til høyre i boksen) */
.nm-pause {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(28, 33, 64, .06);
  color: var(--farge-marine);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s var(--myk), background-color .2s ease;
}

.nm-pause:hover {
  background: rgba(28, 33, 64, .1);
}

.nm-pause:active {
  transform: scale(.9);
}

.nm-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);         /* Ringen starter øverst */
}

.nm-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.nm-ring-spor {
  stroke: rgba(28, 33, 64, .15);
}

/* Omkretsen er 2 × π × 16 ≈ 100.5 */
.nm-ring-fyll {
  stroke: var(--farge-marine);
  stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5;
}

.nm-ring-fyll.i-gang {
  animation: nm-ring var(--nm-varighet, 6s) linear forwards;
}

@keyframes nm-ring {
  to { stroke-dashoffset: 0; }
}

.nm.pauset .nm-ring-fyll {
  animation-play-state: paused;
}

.nm-ikon {
  position: relative;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.nm-ikon--spill,
.nm.pauset .nm-ikon--pause {
  display: none;
}

.nm.pauset .nm-ikon--spill {
  display: block;
}

/* Bildene: ligger oppå hverandre og tones over i hverandre */
.nm-bilde {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.45, 0, .2, 1);
}

.nm-bilde.aktiv {
  opacity: 1;
}

@media (max-width: 900px) {
  .nm-medalje {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nm-bilde,
  .nm-tekst,
  .nm-medalje {
    transition: none;
  }

  .nm-ring-fyll.i-gang {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* --- 21f. Kommende arrangementer (uten bakgrunnsbilde) ---------------------
   Overskrift og tekst til venstre, arrangementene til høyre som lyse,
   frostede kort (samme glass som medaljeboksen) med mørk tekst. */
.arrangementer-ny {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}

.arrangementer-ny-tekst {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arrangementer-ny .glass-arrangement {
  color: var(--farge-marine);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(38, 52, 143, .06),
    0 10px 30px rgba(20, 24, 52, .1);
}

.arrangementer-ny .glass-arrangement:hover {
  background: rgba(255, 255, 255, .85);
}

/* Datobrikken blir blå her (kortet er lyst) */
.arrangementer-ny .glass-dato {
  background: var(--farge-bla);
  color: var(--farge-hvit);
}

.arrangementer-ny .glass-arrangement-tittel {
  color: var(--farge-bla);
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .arrangementer-ny .glass-arrangement,
  .arrangementer-ny .glass-arrangement:hover {
    background: var(--farge-hvit);
  }
}

@media (max-width: 900px) {
  .arrangementer-ny {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* --- 21g. Forsiden: «Prøv roing» nederst i toppbildet (uten boks) ---------
   Blå overskrift rett på bildet med en «Les mer»-knapp under. Venstrekanten
   følger menylinjen. En svak lys glød bak teksten gjør den lesbar på bildet. */
.forside-lenke {
  position: absolute;
  z-index: 2;
  left: calc((100% - var(--menybredde)) / 2 + 8px);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  animation: tekst-opp .9s var(--myk) .3s backwards;
}

.forside-lenke-tittel {
  margin: 0;
  color: var(--farge-bla);
  font: 800 84px/1 var(--skrift-overskrift);
  letter-spacing: -.035em;
  text-shadow:
    0 0 24px rgba(255, 255, 255, .55),
    0 0 4px rgba(255, 255, 255, .5);
}

.forside-lenke .knapp {
  padding: 11px 24px;
  font-size: 16px;
}

@media (max-width: 900px) {
  .forside-lenke {
    left: var(--sidemarg);
    bottom: 24px;
  }

  .forside-lenke-tittel {
    font-size: 48px;
  }
}