/* Julesanger.net - juledesign
   Natteblatt, granbar, gull og et lys av stearin. */

:root{
  /* Gran, gull og julerodt. Toppen og bunnen var opprinnelig natteblaa, men
     ble byttet til edelgran fordi det leser mer som jul og mindre som vinternatt. */
  --natt:#12563c;        /* edelgran - topp, mork blokk, overskrifter */
  --natt-dyp:#0d3f2c;    /* dypere gran - bunn */
  --natt-lys:#1a6b4b;    /* lysere gran - nedtrekk og kort paa mork bunn */
  --tittel:#123f2e;      /* overskrifter - dempet gran, roligere enn toppfargen */
  --rod:#a3212c;
  --rod-lys:#c8353f;
  --gull:#d8b26a;
  --gull-lys:#efd9a8;
  --sno:#f7f5f0;
  --papir:#fffdf8;
  --blekk:#22303f;
  --blekk-mild:#55606c;
  --kant:#e6ded0;
  --skygge:0 2px 6px rgba(9,19,32,.08), 0 12px 32px rgba(9,19,32,.07);
  --serif:"Iowan Old Style",Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bredde:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papir);
  color:var(--blekk);
  font:400 18px/1.65 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rod);text-underline-offset:.16em}
a:hover{color:var(--rod-lys)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;color:var(--tittel);margin:0 0 .5em}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
.innramming{max-width:var(--bredde);margin:0 auto;padding:0 20px}
.hopp{position:absolute;left:-9999px}
.hopp:focus{left:12px;top:12px;z-index:99;background:var(--gull);color:var(--natt);padding:10px 16px;border-radius:4px}

/* ---------------------------------------------------------------- snø --- */
.snolag{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 34% 62%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 58% 28%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 77% 74%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 90% 40%, rgba(255,255,255,.75) 50%, transparent 51%);
  background-size:100% 100%;
  opacity:0;
  transition:opacity .6s;
}
body.forside .snolag,body.seksjon .snolag,body.hub .snolag{opacity:.45;animation:snofall 26s linear infinite}
@keyframes snofall{from{transform:translateY(-8vh)}to{transform:translateY(8vh)}}
@media (prefers-reduced-motion:reduce){.snolag{animation:none!important}}

/* -------------------------------------------------------------- topp --- */
.topp{
  position:relative;z-index:5;
  background:linear-gradient(180deg,var(--natt-dyp),var(--natt));
  color:var(--sno);
  border-bottom:3px solid var(--gull);
}
.topp::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:repeating-linear-gradient(90deg,var(--rod) 0 22px,var(--gull) 22px 44px);
  opacity:.9;
}
.toppinnhold{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  color:var(--sno);text-decoration:none;font-family:var(--serif);
  font-size:1.42rem;line-height:1;
}
.logostjerne{color:var(--gull);font-size:1.32rem;line-height:1}
.logotekst{color:var(--gull);font-weight:400}
.logotekst strong{color:#fffaf0;font-weight:600}
.logo:hover .logostjerne{color:var(--gull-lys)}
.menyknapp{
  margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.4);
  color:var(--sno);padding:8px 14px;border-radius:4px;font:600 .95rem var(--sans);cursor:pointer;
}
.menyboks{flex:1 1 auto;min-width:0}
.hovedmeny ul{list-style:none;margin:0;padding:0}
.hovedmeny > ul{display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-end}
.hovedmeny > ul > li{flex:0 0 auto}
.hovedmeny a{
  display:block;color:var(--sno);text-decoration:none;padding:9px 11px;
  font-size:.95rem;border-radius:4px;white-space:nowrap;
}
/* Logo og meny skal dele EN linje helt ned til mobilbruddet paa 901 px.
   Menyen krymper trinnvis i stedet for aa brekke. */
@media(min-width:901px) and (max-width:1180px){
  .hovedmeny a{padding:9px 8px;font-size:.9rem}
  .logo{font-size:1.32rem}
}
@media(min-width:901px) and (max-width:1030px){
  .toppinnhold{gap:10px}
  .hovedmeny a{padding:8px 6px;font-size:.84rem}
  .logo{font-size:1.2rem;gap:7px}
  .logostjerne{font-size:1.1rem}
}
.hovedmeny a:hover,.hovedmeny a.aktiv{background:rgba(216,178,106,.18);color:var(--gull-lys)}
.har-barn{position:relative}
.undermeny{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--natt-lys);
  border:1px solid rgba(216,178,106,.35);border-radius:6px;padding:6px;
  box-shadow:0 14px 30px rgba(0,0,0,.35);display:none;z-index:20;
}
.har-barn:hover .undermeny,.har-barn:focus-within .undermeny{display:block}
.undermeny a{font-size:.93rem;padding:8px 12px}

@media(max-width:900px){
  .menyboks{display:none}
  .menyboks.apen{display:block}
  .hovedmeny > ul{flex-direction:column;gap:0;padding-bottom:10px}
  .hovedmeny a{padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.09)}
  .undermeny{position:static;display:block;background:transparent;border:0;box-shadow:none;padding:0 0 6px 14px}
  .undermeny a{opacity:.85;border-bottom:0;padding:8px 6px}
}
@media(min-width:901px){.menyknapp{display:none}}

/* ------------------------------------------------ hero: bildekarusell --- */
.storhero{
  position:relative;
  height:78vh;min-height:500px;max-height:720px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;background:var(--natt-dyp);
}
.serie{position:absolute;inset:0;z-index:0}
.bilde{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.5s ease;
}
.bilde.aktiv{opacity:1}
.storhero-innhold{position:relative;z-index:1;color:#fff;max-width:860px;padding:2rem 20px}
.storhero h1{
  color:#fff;
  font-size:clamp(2.1rem,1.2rem + 3.6vw,3.6rem);
  line-height:1.1;margin:0 0 16px;
  text-shadow:0 1px 4px rgba(0,0,0,.75), 0 4px 30px rgba(0,0,0,.65);
}
/* Merkelappen sto tidligere som ren gulltekst og forsvant i bildene med
   varme julelys. Solid brikke leser like godt over alle fem motivene. */
.storhero .overskrift{
  display:inline-block;
  background:var(--rod);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  padding:7px 17px;
  border-radius:50px;
  margin:0 0 20px;
  text-shadow:none;
  box-shadow:0 2px 14px rgba(0,0,0,.4);
}
.storhero .ingress{
  font-size:clamp(1rem,.93rem + .45vw,1.2rem);line-height:1.6;
  margin:0 auto 26px;max-width:640px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.8), 0 2px 20px rgba(0,0,0,.7);
}
.storhero .heroknapper{justify-content:center}
.storhero .knapp{box-shadow:0 2px 14px rgba(0,0,0,.35)}
.storhero .knapp.sekundaer{
  background:rgba(13,63,44,.55);border-color:var(--gull-lys);color:#fff;
  backdrop-filter:blur(2px);
}
.storhero .knapp.sekundaer:hover{background:rgba(13,63,44,.78)}
@media (prefers-reduced-motion:reduce){.bilde{transition:none}}
@media(max-width:600px){.storhero{height:64vh;min-height:420px}}

/* Toppbilde paa seksjoner, temalister, hubber og artikler.
   Hoyden ble oket etter onske fra eier (var maks 340 px).
   Forsiden bruker .storhero og beroeres ikke av dette. */
.topbilde{position:relative;line-height:0}
.topbilde img{width:100%;height:clamp(280px,38vw,520px);object-fit:cover}

/* Menysidene: tittel og ingress ligger OPPAA bildet, i en egen plate.
   Platen dekker bare teksten - resten av bildet er helt ufiltrert. */
/* Hoyden er en MINSTEhoyde, ikke en fast hoyde: bildet dekker hele seksjonen,
   og seksjonen vokser hvis tekstplaten trenger mer plass. Med fast hoyde
   sprengte den lengste ingressen (norske-julesanger) bildet paa smale skjermer.
   ca. 100 px lavere enn for (var clamp(330px,40vw,540px)). */
.herotopp{
  position:relative;background:var(--natt-dyp);
  min-height:clamp(260px,calc(40vw - 100px),440px);
  display:flex;align-items:flex-end;
}
.herotopp .topbilde{position:absolute;inset:0}
.herotopp .topbilde img{width:100%;height:100%;object-fit:cover}
.heroramme{position:relative;width:100%;padding-top:26px;padding-bottom:26px}
.heroplate{
  display:inline-block;
  background:rgba(13,63,44,.74);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:6px;border-left:4px solid var(--gull);
  padding:18px 26px 20px;max-width:46em;color:#fff;
  box-shadow:0 6px 30px rgba(0,0,0,.3);
}
.heroplate h1{color:#fff;margin-bottom:.2em}
.heroplate .ingress{color:#e4efe8;margin-bottom:0;max-width:none}
.heroplate .teller{color:var(--gull-lys);margin:.7em 0 0}
.heroplate .brodsmuler{margin-bottom:.6em;color:#c3d8cb}
.heroplate .brodsmuler a{color:#c3d8cb}
.heroplate .brodsmuler a:hover{color:var(--gull-lys)}
.heroplate .brodsmuler .skille{opacity:.6}

/* Paa smale skjermer legger platen seg UNDER bildet, ellers renner lange
   ingresser ut av bildekanten. */
/* Bruddet ligger paa 900 px fordi den lengste ingressen (norske-julesanger)
   ellers blir hoyere enn det nedskalerte bildet paa smale skjermer. */
@media(max-width:900px){
  .herotopp{display:block;min-height:0}
  .herotopp .topbilde{position:static}
  .herotopp .topbilde img{height:clamp(200px,44vw,300px)}
  .heroramme{padding:0}
  .heroplate{
    display:block;max-width:none;border-radius:0;border-left:0;
    border-top:4px solid var(--gull);backdrop-filter:none;
    background:var(--natt-dyp);box-shadow:none;padding:20px 20px 24px;
    margin:0 -20px;
  }
}
.herotekst h1{color:var(--sno);margin-bottom:.25em}
.overskrift{
  text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;font-weight:700;
  color:var(--gull);margin:0 0 .7em;
}
.heroingress{font-size:1.16rem;max-width:44em;color:#e9e4da}
.heroknapper{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
.knapp{
  display:inline-block;background:var(--rod);color:#fff;text-decoration:none;
  padding:12px 22px;border-radius:4px;font-weight:600;font-size:1rem;border:0;cursor:pointer;
  font-family:var(--sans);
}
.knapp:hover{background:var(--rod-lys);color:#fff}
.knapp.sekundaer{background:transparent;color:var(--gull-lys);border:1px solid var(--gull)}
.knapp.sekundaer:hover{background:rgba(216,178,106,.16);color:var(--gull-lys)}

/* --------------------------------------------------------- sidetopper --- */
.sidetopp{padding-top:30px;padding-bottom:6px}
body.sangside .sidetopp,body.artikkelside .sidetopp,body.hub .sidetopp,
body.tema .sidetopp,body.register .sidetopp,body.seksjon .sidetopp{max-width:820px}
.brodsmuler{font-size:.86rem;color:var(--blekk-mild);margin-bottom:1.1em}
.brodsmuler a{color:var(--blekk-mild)}
.brodsmuler .skille{margin:0 .5em;opacity:.5}
.ingress{font-size:1.15rem;color:#3a4855;max-width:40em}
.teller{font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gull);font-weight:700}
.datolinje{font-size:.83rem;color:var(--blekk-mild)}

/* (tidligere begrenset til 340 px - hoyden styres naa av .topbilde img) */

/* ------------------------------------------------------------- blokker --- */
.blokk{padding:44px 20px 48px}
.blokk.mork{background:var(--natt);color:#e8e3d9;margin:36px 0;padding:48px 0 54px}
.blokk.mork h2,.blokk.mork h3{color:var(--gull-lys)}
.blokk.mork a{color:var(--gull-lys)}
.blokktittel{
  position:relative;padding-bottom:.35em;margin-bottom:.8em;
}
.blokktittel::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--rod);
}
.blokk.mork .blokktittel::after{background:var(--gull)}
.blokkingress{color:var(--blekk-mild);max-width:42em;margin-top:-.4em}
.mer{margin-top:1.4em;font-weight:600}

/* --------------------------------------------------------------- kort --- */
.sangliste{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.sangkort a{
  display:block;background:var(--sno);border:1px solid var(--kant);border-left:4px solid var(--rod);
  border-radius:4px;padding:13px 16px;text-decoration:none;color:var(--blekk);height:100%;
  transition:transform .15s,box-shadow .15s;
}
.sangkort a:hover{transform:translateY(-2px);box-shadow:var(--skygge);border-left-color:var(--gull)}
.blokk.mork .sangkort a{background:var(--natt-lys);border-color:rgba(216,178,106,.25);color:#e8e3d9}
.korttittel{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:600;color:inherit}
.blokk.mork .korttittel{color:var(--gull-lys)}
.kortlinje{display:block;font-size:.85rem;color:var(--blekk-mild);margin-top:3px;font-style:italic}
.blokk.mork .kortlinje{color:#b4cfbf}
.kortmerke{
  display:inline-block;margin-top:7px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(163,33,44,.1);color:var(--rod);padding:2px 8px;border-radius:20px;font-weight:700;
}
.blokk.mork .kortmerke{background:rgba(216,178,106,.15);color:var(--gull)}

.artliste{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.artkort a{
  display:block;background:var(--sno);border:1px solid var(--kant);border-radius:6px;
  overflow:hidden;text-decoration:none;color:var(--blekk);height:100%;
  transition:transform .15s,box-shadow .15s;
}
.artkort a:hover{transform:translateY(-3px);box-shadow:var(--skygge)}
.kortbilde{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--natt-lys)}
.kortbilde img{width:100%;height:100%;object-fit:cover}
.kortinnhold{display:block;padding:15px 17px 18px}
.kortingress{display:block;font-size:.92rem;color:var(--blekk-mild);margin-top:5px}
/* Paa mork gran arvet ingressen den morke blekkfargen og ble nesten usynlig. */
.blokk.mork .kortingress{color:#d3e7db}
.blokk.mork .kortantall{color:var(--gull-lys)}
.kortantall{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gull);font-weight:700;margin-top:8px}

.spraakliste{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.spraakkort a{
  display:block;background:var(--sno);border:1px solid var(--kant);border-radius:6px;
  overflow:hidden;text-decoration:none;color:var(--blekk);text-align:center;height:100%;
  transition:transform .15s,box-shadow .15s;
}
.spraakkort a:hover{transform:translateY(-3px);box-shadow:var(--skygge)}
.spraakkort .kortinnhold,.spraakkort .korttittel{padding:0}
.spraakkort .korttittel{margin:14px 12px 2px;font-size:1.05rem}
.spraakkort .kortantall{margin:0 12px 14px;color:var(--blekk-mild);font-weight:600;letter-spacing:0;text-transform:none}

.temaliste{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.temaliste a{
  display:block;padding:15px 17px;border-radius:5px;text-decoration:none;
  background:var(--natt-dyp);
  border:1px solid rgba(216,178,106,.45);
  border-left:4px solid var(--gull);
  transition:background .15s,transform .15s;
}
.temaliste a:hover{background:#0a3323;transform:translateY(-2px)}
.temaliste .korttittel{color:var(--gull-lys)}

/* ------------------------------------------------------------ sangside --- */
.tekstplate{
  background:var(--sno);
  border:1px solid var(--kant);
  border-top:5px solid var(--gull);
  border-radius:4px;
  padding:34px 34px 26px;
  max-width:820px;
  font-family:var(--serif);
  font-size:1.19rem;
  line-height:1.85;
  box-shadow:var(--skygge);
  position:relative;
}
.tekstplate::before{
  content:"\2726";position:absolute;top:-17px;left:32px;color:var(--gull);
  background:var(--papir);padding:0 8px;font-size:1.1rem;
}
.tekstplate p{margin:0 0 1.5em}
.tekstplate p:last-child{margin-bottom:.4em}
.skrivut{max-width:820px;margin-top:1.2em}
.faktaboks{
  max-width:820px;background:var(--sno);border:1px solid var(--kant);
  border-left:4px solid var(--natt);border-radius:4px;padding:16px 22px;margin:24px 0;
}
.faktaboks h2{font-size:1rem;margin-bottom:.5em}
.faktaboks dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 .2em}
.faktaboks dt{font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blekk-mild);padding-top:2px}
.faktaboks dd{margin:0;font-size:.98rem}
.faktaboks p{margin:.8em 0 0;font-size:.93rem;color:#3d4b44}

.kildeboks{
  max-width:820px;background:#f2f7f3;border:1px solid #cfe0d5;border-left:4px solid var(--natt);
  border-radius:4px;padding:16px 20px;margin:24px 0;font-size:.93rem;
}
.kildeboks h2{font-size:1rem;margin-bottom:.35em}
.kildeboks p{margin:0;color:#3d4b44}
.temaboks,.histboks{
  max-width:820px;background:#fdf6ea;border:1px solid var(--kant);border-left:4px solid var(--gull);
  border-radius:4px;padding:18px 22px;margin:26px 0;
}
.temaboks h2,.histboks h2{font-size:1.05rem;margin-bottom:.4em}
.temaboks ul{margin:0;padding-left:1.1em}
.temaboks li{margin-bottom:.2em}
.naboer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  max-width:820px;margin:34px 0 10px;font-weight:600;font-size:.95rem}
body.sangside .blokktittel{margin-top:2em}

/* ----------------------------------------------------------- brodtekst --- */
.brodtekst{max-width:760px;padding-bottom:40px}
.brodtekst h2{margin-top:1.9em}
.brodtekst li{margin-bottom:.35em}
.brodtekst figure{margin:2em 0}
.brodtekst figcaption{font-size:.82rem;color:var(--blekk-mild);margin-top:.5em}
.tekstlenke{margin:2.4em 0 1em}
.videre{margin-top:2.6em;border-top:1px solid var(--kant);padding-top:1.6em}
.videre h2{margin-top:0}

/* ------------------------------------------------------------- tabell --- */
.tabellramme{overflow-x:auto;margin:1.6em 0 2em;border:1px solid var(--kant);border-radius:5px}
table.kreditt{border-collapse:collapse;width:100%;font-size:.88rem;min-width:640px;background:var(--sno)}
table.kreditt th{background:var(--natt);color:var(--gull-lys);text-align:left;
  padding:10px 12px;font-family:var(--sans);font-weight:700;font-size:.8rem;
  letter-spacing:.05em;text-transform:uppercase}
table.kreditt td{padding:9px 12px;border-top:1px solid var(--kant);vertical-align:top}
table.kreditt tr:nth-child(even) td{background:#fdf8ef}
table.kreditt td:nth-child(2){font-family:ui-monospace,Consolas,monospace;font-size:.8rem;word-break:break-word}

/* ------------------------------------------------------------- register --- */
.bokstavnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.2em}
.bokstavnav a{
  display:inline-block;min-width:34px;text-align:center;padding:5px 8px;
  border:1px solid var(--kant);border-radius:4px;text-decoration:none;font-weight:700;
  background:var(--sno);
}
.bokstavblokk{margin-bottom:34px}
.bokstavblokk h2{border-bottom:2px solid var(--gull);padding-bottom:.2em}

/* -------------------------------------------------------------- fredet --- */
/* Selve tekstspalten er sentrert paa siden, men teksten inne i den staar
   venstrejustert som ellers paa nettstedet. */
.fredet{background:#fdf8ef;border-top:1px solid var(--kant);border-bottom:1px solid var(--kant)}
.fredet h4,.fredet p{max-width:46em;margin-left:auto;margin-right:auto;text-align:left}
.fredet h4{font-family:var(--serif);font-size:1.35rem;margin-top:1.6em;margin-bottom:.5em;color:var(--tittel)}
.fredet h4:first-child{margin-top:0}

/* --------------------------------------------------------------- bunn --- */
.bunn{
  background:var(--natt-dyp);color:#cbe0d4;margin-top:20px;padding:34px 0 40px;
  border-top:3px solid var(--gull);
}
.bunn a{color:#e6f2ea;text-decoration:none}
.bunn a:hover{color:var(--gull-lys);text-decoration:underline}
.bunntopp{display:grid;gap:30px 40px;grid-template-columns:minmax(220px,1.1fr) 3fr;
  align-items:start;padding-bottom:26px}
.bunnmerke{max-width:24em}
.bunnlogo{font-family:var(--serif);font-size:1.3rem;margin:0 0 .4em;color:var(--gull)}
.bunnlogo strong{color:#fffaf0;font-weight:600}
.bunnslagord{font-size:.9rem;color:#a4c4b1;margin:0}
.bunnspalter{display:grid;gap:24px 26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.bunnspalte h2{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gull);margin:0 0 .8em;
}
.bunnspalte ul{list-style:none;margin:0;padding:0}
.bunnspalte li{margin-bottom:.42em;font-size:.9rem;line-height:1.35}
.bunntekst{
  font-size:.85rem;color:#a4c4b1;margin:0;padding-top:20px;
  border-top:1px solid rgba(216,178,106,.28);
}
.bunntekst strong{color:#d8e8de;font-weight:600}
.lenkeknapp{
  background:none;border:0;padding:0;margin-left:.3em;cursor:pointer;
  color:var(--gull-lys);font:inherit;text-decoration:underline;
  text-underline-offset:.16em;
}
.lenkeknapp:hover{color:#fff}
@media(max-width:820px){
  .bunntopp{grid-template-columns:1fr;gap:26px}
  .bunnspalter{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* ------------------------------------------------------- faq og program --- */
.faq{margin:2.4em 0 1em;max-width:760px}
.faq h2{margin-bottom:.7em}
.faq details{
  border:1px solid var(--kant);border-left:4px solid var(--gull);
  border-radius:4px;background:var(--sno);margin-bottom:10px;
}
.faq summary{
  cursor:pointer;padding:14px 18px;font-family:var(--serif);font-size:1.08rem;
  font-weight:600;color:var(--tittel);list-style-position:inside;
}
.faq summary:hover{color:var(--rod)}
.faq details[open] summary{border-bottom:1px solid var(--kant)}
.faq details > div{padding:14px 18px 4px}
.faq p{margin-bottom:1em}
.faqramme{max-width:none;padding:0}

.program{list-style:none;margin:1.6em 0 2.4em;padding:0;counter-reset:none}
.programsang{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--kant);
}
.programnr{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--rod);
  color:#fff;font:700 1rem var(--sans);display:flex;align-items:center;justify-content:center;
}
.programtekst{display:block}
.programtekst > a{font-family:var(--serif);font-size:1.18rem;font-weight:600;text-decoration:none}
.programlinje{display:block;font-style:italic;color:var(--blekk-mild);font-size:.92rem;margin-top:2px}
.programnote{display:block;font-size:.9rem;color:#4a5a51;margin-top:5px}

@media print{
  .programnote{color:#000}
  .programnr{background:none;color:#000;border:1px solid #000}
}

/* ---------------------------------------------------------------- sok --- */
.skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.herosok{display:flex;gap:8px;justify-content:center;max-width:560px;margin:0 auto 22px;width:100%}
.herosok input{
  flex:1 1 auto;min-width:0;padding:13px 18px;border-radius:4px;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.95);
  font:400 1rem var(--sans);color:var(--blekk);
}
.herosok input::placeholder{color:#6c7a72}
.herosok button{
  flex:0 0 auto;background:var(--rod);color:#fff;border:0;border-radius:4px;
  padding:13px 24px;font:600 1rem var(--sans);cursor:pointer;
}
.herosok button:hover{background:var(--rod-lys)}
.sokform{max-width:640px;margin:1.2em 0 .6em}
.sokform input{
  width:100%;padding:14px 18px;border:1px solid var(--kant);border-radius:5px;
  font:400 1.05rem var(--sans);background:var(--sno);color:var(--blekk);
}
.sokform input:focus{outline:2px solid var(--gull);outline-offset:1px}
.sokstatus{font-size:.88rem;color:var(--blekk-mild);min-height:1.3em;margin:0}
#soktomt{max-width:44em}

/* ----------------------------------------------------------- samtykke --- */
.samtykke{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--natt-dyp);color:#dbe8e0;
  border-top:3px solid var(--gull);
  box-shadow:0 -6px 30px rgba(0,0,0,.35);
}
.samtykke[hidden]{display:none}
.samtykke-innhold{
  max-width:var(--bredde);margin:0 auto;padding:18px 20px 20px;
  display:flex;gap:16px 30px;align-items:center;flex-wrap:wrap;
}
.samtykke p{margin:0;font-size:.92rem;max-width:62em;flex:1 1 320px}
.samtykke strong{color:#fff}
.samtykke a{color:var(--gull-lys)}
.samtykke-knapper{display:flex;gap:10px;flex:0 0 auto}
.samtykke .knapp{padding:10px 20px;font-size:.95rem}
.samtykke .knapp.sekundaer{background:transparent;color:#dbe8e0;border:1px solid rgba(255,255,255,.4)}
.samtykke .knapp.sekundaer:hover{background:rgba(255,255,255,.1);color:#fff}

/* -------------------------------------------------------------- print --- */
@media print{
  .topp,.bunn,.snolag,.naboer,.temaboks,.histboks,.skrivut,.brodsmuler,
  .sangliste,.blokktittel,.mer,.hopp{display:none!important}
  body{background:#fff;font-size:13pt}
  .tekstplate{border:0;box-shadow:none;padding:0;max-width:none;font-size:13pt;line-height:1.6}
  .tekstplate::before{display:none}
  h1{font-size:20pt}
  .datolinje{display:none}
}