/* ============================================================
   Behandlerside (.bnbeh)

   Erstatter Elementor-mal 23405 på detaljsidene. Seksjonene kommer i den
   rekkefølgen fagområdets mal sier, så CSS-en her kan ikke anta noen
   rekkefølge – hver seksjon står på egne ben.

   Om spesifisitet: samme grep som i kortene. Regler som treffer lenker og
   knapper er skrevet med to klasser, slik at temaets Elementor Kit (0-1-1)
   ikke overtar. Kan forenkles den dagen Kit-en er borte.
   ============================================================ */

.bnbeh,
.bnbeh *{ box-sizing:border-box; }

.bnbeh{
  --bnb-blekk:#14241d;
  --bnb-dus:#5a6b62;
  --bnb-svak:#8a978f;
  --bnb-linje:#e6e8e6;
  --bnb-flate:#ffffff;
  --bnb-mykt:#f4f6f4;
  --bnb-gronn:#2f7048;
  --bnb-gronn-lys:#e8efe6;
  --bnb-radius:10px;

  max-width:820px;
  margin:0 auto;
  padding-inline:16px;
  padding-block:24px 56px;
  color:var(--bnb-blekk);
  font-size:16px;
  line-height:1.6;
}

/* ---- hero ---- */
.bnbeh .bnbeh__hero{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding-bottom:22px;
  margin-bottom:8px;
  border-bottom:1px solid var(--bnb-linje);
}
/*
 * Portrettet er det eneste bildet av mennesket man vurderer å gå til.
 * 112px var for smått til det – ansiktet ble et ikon ved siden av navnet
 * i stedet for en del av presentasjonen. 184px på skjerm, 136px på mobil.
 */
.bnbeh .bnbeh__portrett{
  width:184px;
  height:184px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  background:var(--bnb-mykt);
  box-shadow:0 1px 3px rgba(20,36,29,.10);
}
/*
 * Klinikklogoer er sirkler de ogsaa.
 *
 * Foer fikk de avrundet firkant, med den begrunnelsen at en bred logo blir
 * beskaaret av en sirkel og mister navnet. Det er riktig – men resultatet
 * var at omtrent halvparten av bildene var runde og halvparten firkantede,
 * uten at noen utenfra kunne se regelen bak. Sirkelen er ikke problemet;
 * beskjaeringen er. Saa logoen ligger HELE inni sirkelen i stedet:
 * object-fit:contain, og luft nok til at den faar plass i kvadratet som
 * staar innskrevet i sirkelen.
 *
 * Kvadratet i en sirkel med diameter d har siden d/sqrt(2) = 0,707d. Luften
 * maa da vaere (1 - 0,707)/2 = 14,6 % paa hver side; 15 % gir en liten
 * margin. Prosent regnes ut fra bredden, saa tallet foelger stoerrelsen og
 * skal ikke gjentas i media-queryen.
 */
.bnbeh .bnbeh__portrett--logo{
  background:#fff;
  border:1px solid var(--bnb-linje);
  box-shadow:none;
}
.bnbeh .bnbeh__portrett img,
.bnbeh .bnbeh__portrett svg{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Maa staa ETTER den generelle regelen: de har samme spesifisitet
   (0-2-1), og da er det den siste som gjelder. Foerste forsoek sto
   foran, og logoen ble beskjaert likevel. */
.bnbeh .bnbeh__portrett--logo img{
  object-fit:contain;
  padding:var(--bnett-logoluft, 15%);
  box-sizing:border-box;
}
.bnbeh .bnbeh__herotekst{ min-width:0; }

.bnbeh .bnbeh__merke{
  display:inline-block;
  margin:0 0 6px;
  padding:2px 8px;
  border-radius:4px;
  background:var(--bnb-gronn-lys);
  color:#245c3c;
  font-size:12.5px;
  font-weight:600;
}
.bnbeh .bnbeh__navn{
  margin:0;
  font-size:clamp(24px,4vw,32px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.bnbeh .bnbeh__under{
  margin:5px 0 0;
  font-size:15px;
  color:var(--bnb-dus);
}
.bnbeh .bnbeh__ingress{
  margin:12px 0 0;
  max-width:62ch;
}
.bnbeh .bnbeh__ingress p{
  margin:0 0 10px;
  font-size:16.5px;
  line-height:1.6;
  color:var(--bnb-dus);
}
.bnbeh .bnbeh__ingress p:last-child{ margin-bottom:0; }

/* «Tilbyr online-timer» – samme merke som paa kortet, saa det er samme
   opplysning og ikke to ulike ting som ligner. */
.bnbeh .bnbeh__online{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:10px 0 0;
  padding:5px 12px 5px 10px;
  border:1px solid #cfe3d4;
  border-radius:999px;
  background:var(--bnb-gronn-lys);
  color:#1f5a38;
  font-size:14px;
  font-weight:600;
}

@media (max-width:560px){
  .bnbeh .bnbeh__hero{ flex-direction:column; gap:14px; }
  .bnbeh .bnbeh__portrett{ width:136px; height:136px; }
}

/* ---- seksjoner ----

   Runde 2 av omdesignet: seksjonene er kort, ikke rader med strek mellom.

   Sideflaten ble #f2f5f2 i 8.85.0. Da fikk en hvit flate med luft rundt
   gratis adskillelse, og streken mellom seksjonene ble en strek for
   strekens skyld. Kortet gjoer det samme arbeidet og taaler dessuten aa
   staa i to spalter – det gjorde ikke raden.

   `display:block` staar eksplisitt. Temaet har `.entry-content div{
   display:grid }`, og den slaar inn paa alt vi ikke selv har sagt noe om.
   Det var den som gjorde «5 av 6» til tre rader paa Min side. */
.bnbeh .bnbeh__seksjon{
  display:block;
  background:var(--bnb-flate);
  border:1px solid var(--bnb-linje);
  border-radius:var(--bnb-radius);
  padding:18px 20px;
  margin-bottom:14px;
  /* Hopper man hit fra fanelinjen, skal overskriften ikke ligge klemt
     oppe i kanten – og ikke under en fast header. */
  scroll-margin-top:84px;
}
.bnbeh .bnbeh__seksjon:last-child{ margin-bottom:0; }

/* ---- to spalter ----

   Hovedspalten foerst i markupen, sidekortet etter. Paa telefon snur vi
   det med `order`, slik at «Ta kontakt» staar rett under navnet.

   Rekkefoelgen i MARKUPEN er valgt for skjermlesere og for den som leser
   kilden: innholdet foerst, kontaktkortet etterpaa. */
.bnbeh .bnbeh__spalter{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:start;
}
.bnbeh .bnbeh__hoved{ display:block; min-width:0; order:2; }
.bnbeh .bnbeh__side{ display:block; min-width:0; order:1; }

@media (min-width:900px){
  .bnbeh{ max-width:1140px; }
  .bnbeh .bnbeh__spalter{ grid-template-columns:minmax(0,1fr) 352px; gap:20px; }
  .bnbeh .bnbeh__hoved{ order:1; }
  .bnbeh .bnbeh__side{ order:2; }

  /* Kortet foelger med naar man blar.
     `top` maa vaere stoerre enn en eventuell fast header, ellers legger
     den seg oppaa. 84px er headerens hoeyde pluss luft. */
  .bnbeh .bnbeh__sidekort{
    display:block;
    position:sticky;
    top:84px;
  }
}

.bnbeh .bnbeh__sidekort{ display:block; }

/* I sidekortet staar seksjonene som ÉN boks, ikke to.
   To kort over hverandre med hver sin ramme ser ut som to tilbud. */
@media (min-width:900px){
  .bnbeh .bnbeh__sidekort > .bnbeh__seksjon{
    border-radius:0;
    border-bottom:0;
    margin-bottom:0;
  }
  .bnbeh .bnbeh__sidekort > .bnbeh__seksjon:first-child{
    border-top-left-radius:var(--bnb-radius);
    border-top-right-radius:var(--bnb-radius);
  }
  .bnbeh .bnbeh__sidekort > .bnbeh__seksjon:last-child{
    border-bottom:1px solid var(--bnb-linje);
    border-bottom-left-radius:var(--bnb-radius);
    border-bottom-right-radius:var(--bnb-radius);
  }
}

.bnbeh .bnbeh__h2{
  margin:0 0 12px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.bnbeh .bnbeh__seksjon p{ margin:0 0 10px; max-width:62ch; }
.bnbeh .bnbeh__seksjon p:last-child{ margin-bottom:0; }

/* ---- emner ---- */
.bnbeh .bnbeh__emner{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.bnbeh .bnbeh__emner li{
  padding:5px 12px;
  border:1px solid #d7e2d5;
  border-radius:999px;
  background:var(--bnb-gronn-lys);
  color:#245c3c;
  font-size:14px;
  font-weight:600;
}

/* ---- fakta ---- */
.bnbeh .bnbeh__fakta{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 18px;
  margin:0;
}
.bnbeh .bnbeh__fakta dt{
  font-weight:600;
  font-size:14.5px;
  color:var(--bnb-dus);
}
.bnbeh .bnbeh__fakta dd{ margin:0; font-size:15.5px; }

@media (max-width:440px){
  .bnbeh .bnbeh__fakta{ grid-template-columns:1fr; gap:2px; }
  .bnbeh .bnbeh__fakta dd{ margin-bottom:8px; }
}

/* ---- knapper ---- */
.bnbeh .bnbeh__knapper{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.bnbeh .bnbeh__knapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--bnb-linje);
  border-radius:6px;
  background:var(--bnb-flate);
  color:var(--bnb-blekk);
  font-family:inherit;
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}
.bnbeh .bnbeh__knapp:focus-visible{ outline:2px solid var(--bnb-gronn); outline-offset:2px; }
.bnbeh .bnbeh__knapp--primar{
  background:var(--bnb-gronn);
  border-color:var(--bnb-gronn);
  color:#fff;
}
/* «Avtal en time» er en handling, ikke en henvisning – den skal se ut
   som noe man trykker paa, men ikke konkurrere med ringeknappen. */
.bnbeh .bnbeh__knapp--avtal{
  border-color:var(--bnb-gronn);
  color:var(--bnb-gronn);
  font-weight:700;
}

/*
 * Hover maa sette bade bakgrunn OG tekstfarge.
 *
 * Temaets Elementor Kit har en regel paa `a:hover` som setter tekstfarge
 * til samme groenn som knappen. Vi satte bare bakgrunnen, saa teksten ble
 * groenn paa groenn: «Ring 97129052» forsvant naar musen laa over. Derfor
 * staar fargen eksplisitt i hver eneste tilstand her, og velgeren har
 * klassen to ganger saa den slaar Kit-ets 0-2-0 uten !important.
 */
.bnbeh a.bnbeh__knapp.bnbeh__knapp:hover,
.bnbeh a.bnbeh__knapp.bnbeh__knapp:focus,
.bnbeh a.bnbeh__knapp.bnbeh__knapp:active,
.bnbeh button.bnbeh__knapp.bnbeh__knapp:hover,
.bnbeh button.bnbeh__knapp.bnbeh__knapp:focus{
  background:var(--bnb-mykt);
  color:var(--bnb-blekk);
  border-color:var(--bnb-linje);
}
.bnbeh a.bnbeh__knapp--primar.bnbeh__knapp--primar:hover,
.bnbeh a.bnbeh__knapp--primar.bnbeh__knapp--primar:focus,
.bnbeh a.bnbeh__knapp--primar.bnbeh__knapp--primar:active,
.bnbeh button.bnbeh__knapp--primar.bnbeh__knapp--primar:hover{
  background:#26603c;
  border-color:#26603c;
  color:#fff;
}
.bnbeh a.bnbeh__knapp--avtal.bnbeh__knapp--avtal:hover,
.bnbeh a.bnbeh__knapp--avtal.bnbeh__knapp--avtal:focus,
.bnbeh a.bnbeh__knapp--avtal.bnbeh__knapp--avtal:active,
.bnbeh button.bnbeh__knapp--avtal.bnbeh__knapp--avtal:hover{
  background:var(--bnb-gronn);
  border-color:var(--bnb-gronn);
  color:#fff;
}

/* ---- Priser ----
   Behandlerens egne tall øverst, fagområdets generelle linje under, og
   lenken til full prisliste sist. Tallene settes med tabular-nums, slik
   at «850» og «1 200» står på samme bredde per siffer når de ligger
   under hverandre. */
.bnbeh .bnbeh__pristekst{
  margin:0 0 10px;
  font-size:16px;
  color:#14241d;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__prisliste{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:7px;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__prisliste li{
  position:relative;
  padding-left:16px;
  font-size:16px;
  color:#14241d;
}
/* Prikken tegnes i CSS. Et bullet-tegn arver fonten og faller bort i en
   reserve som ikke har det. */
.bnbeh .bnbeh__prisliste li::before{
  content:"";
  position:absolute; left:2px; top:.62em;
  width:5px; height:5px;
  border-radius:999px;
  background:#5a6b62;
}
.bnbeh .bnbeh__priskilde{
  margin:0 0 10px;
  font-size:13.5px;
  color:#5f6f67;
}
.bnbeh .bnbeh__prisnote{ font-size:14.5px; color:var(--bnb-dus); }
.bnbeh .bnbeh__adresse{ font-size:16px; }

/* ---- Godt å vite ---- */
.bnbeh .bnbeh__raskt{
  list-style:none;
  margin:0;
  padding:16px 18px;
  display:grid;
  gap:9px;
  background:var(--bnb-mykt);
  border:1px solid var(--bnb-linje);
  border-radius:7px;
}
@media (min-width:560px){
  .bnbeh .bnbeh__raskt{ grid-template-columns:1fr 1fr; column-gap:22px; }
}
.bnbeh .bnbeh__raskt li{
  position:relative;
  padding-left:24px;
  font-size:15.5px;
  font-weight:500;
}
.bnbeh .bnbeh__raskt li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:17px; height:17px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--bnb-gronn);
  color:#fff;
  font-size:10px;
  font-weight:700;
}

/* ---- arbeidsformer ---- */
.bnbeh .bnbeh__former{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.bnbeh .bnbeh__former li{
  padding:6px 13px;
  border:1px solid var(--bnb-linje);
  border-radius:6px;
  background:var(--bnb-flate);
  font-size:14.5px;
}

/* ---- godkjenning ---- */
.bnbeh .bnbeh__hpr{
  margin:0;
  font-size:16px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__hprnote{
  margin:4px 0 0;
  font-size:14px;
  color:var(--bnb-svak);
}

/* ---- tilbake ---- */
.bnbeh .bnbeh__tilbake{
  margin:0 0 14px;
  font-size:14.5px;
}
.bnbeh .bnbeh__tilbake a{
  color:var(--bnb-dus);
  text-decoration:none;
  font-weight:500;
}
.bnbeh .bnbeh__tilbake a:hover{ color:var(--bnb-gronn); text-decoration:underline; }

/* ---- veien videre, nederst ---- */
.bnbeh .bnbeh__videre{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0 0;
  padding-top:22px;
  border-top:1px solid var(--bnb-linje);
}

/* ---- galleri ----
   Knapper, ikke bilder: de aapner lightboxen, og da skal de ogsaa kunne
   naas med tabulator og Enter. Forstoerrelsesglasset dukker opp paa hover
   saa det er tydelig at bildet kan aapnes. */
.bnbeh .bnbeh__galleri{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  margin:0;
  padding:0;
}
.bnbeh .bnbeh__bilde{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  /* Rammen maa vaere synlig: med `contain` er det ofte hvitt rundt
     motivet, og paa et hvitt ark forsvant ruten helt. */
  border:1px solid #dcdfdc;
  border-radius:7px;
  overflow:hidden;
  background:var(--bnb-mykt);
  cursor:zoom-in;
  font:inherit;
  color:inherit;
}
/*
 * `cover` kuttet bildene. Behandlere laster opp logoer, diplomer og
 * skilt like ofte som fotografier, og en logo som er beskaaret er
 * oedelagt – «NORSK PSYKOLOG» ble til «ORSK PSYKOLO». Derfor `contain`
 * paa en hvit flate: hele bildet vises, og rammen holder samme hoeyde
 * i hele rutenettet.
 */
.bnbeh .bnbeh__bilde img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:contain;
  background:#fff;
  padding:8px;
  box-sizing:border-box;
  display:block;
  transition:transform .2s ease;
}
.bnbeh .bnbeh__bilde:hover img,
.bnbeh .bnbeh__bilde:focus-visible img{ transform:scale(1.04); }
.bnbeh .bnbeh__bilde:focus-visible{ outline:2px solid var(--bnb-gronn); outline-offset:2px; }

.bnbeh .bnbeh__forstorr{
  position:absolute;
  right:8px; bottom:8px;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--bnb-pine, #16352b);
  box-shadow:0 1px 4px rgba(20,36,29,.22);
  opacity:0;
  transition:opacity .15s ease;
}
.bnbeh .bnbeh__bilde:hover .bnbeh__forstorr,
.bnbeh .bnbeh__bilde:focus-visible .bnbeh__forstorr{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .bnbeh .bnbeh__bilde img,
  .bnbeh .bnbeh__forstorr{ transition:none; }
  .bnbeh .bnbeh__bilde:hover img{ transform:none; }
  .bnbeh .bnbeh__forstorr{ opacity:1; }
}

/* ---- naboer ---- */
.bnbeh .bnbeh__naere{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:620px){
  .bnbeh .bnbeh__naere{ grid-template-columns:1fr 1fr; }
}

/* ------------------------------------------------------------
   Ikke mørk modus.

   Her lå det et @media (prefers-color-scheme: dark)-blokk. Resten av
   behandlingsnett.no har ingen mørk variant, så for alle med mørkt
   operativsystem ble kortene mørkegrønne med lys tekst midt på en ellers
   lys side. Komponent-CSS skal ikke innføre en modus siden ikke har.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   «Er dette deg?»

   En rolig boks nederst på profilen, til behandleren som finner sin egen
   side ved å google seg selv. Den skal være lett å få øye på for den ene
   det gjelder, og lett å overse for alle de andre.
   Fargene står som tall i hver tilstand – en lenke uten egen :hover-farge
   arver temaets, og den har vært hvit.
   ------------------------------------------------------------ */
.bnbeh .bnbeh__eier{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 20px;
  margin:28px 0 0;
  padding:18px 20px;
  border:1px dashed #d5ddd7;
  border-radius:8px;
  background:#f7f9f7;
}
.bnbeh .bnbeh__eier-tekst{
  margin:0;
  max-width:62ch;
  color:#4a5a52;
  font-size:15px;
  line-height:1.55;
}
.bnbeh .bnbeh__eier-tekst strong{ color:#14241d; }
.bnbeh a.bnbeh__eier-lenke{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:11px 20px;
  border:1px solid #c9d2cc;
  border-radius:999px;
  background:#fff;
  color:#16352b;
  font-size:15px; font-weight:700; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.bnbeh a.bnbeh__eier-lenke:hover,
.bnbeh a.bnbeh__eier-lenke:focus,
.bnbeh a.bnbeh__eier-lenke:active{
  background:#f1f7f2; border-color:#388051; color:#16352b;
}
.bnbeh a.bnbeh__eier-lenke:focus-visible{ outline:3px solid #a8cdb5; outline-offset:2px; }

@media (max-width:560px){
  .bnbeh .bnbeh__eier{ flex-direction:column; align-items:flex-start; }
  .bnbeh a.bnbeh__eier-lenke{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .bnbeh a.bnbeh__eier-lenke{ transition:none; }
}

/* ---- tilgjengelighet ----
   Tar behandleren imot, hvor lenge maa du vente, naar er det aapent.
   Disse gaar rett ut fra Min side uten godkjenning: en ventetid som maa
   vente paa redaksjonen, er ikke lenger en ventetid. */
.bnbeh ul.bnbeh__tilgjenge{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.bnbeh ul.bnbeh__tilgjenge li{
  margin:0;
  padding:7px 13px;
  border:1px solid #d5ddd7;
  border-radius:999px;
  background:#f4f6f4;
  color:#3a4a42;
  font-size:14.5px;
  font-weight:600;
}
.bnbeh ul.bnbeh__tilgjenge li::marker{ content:none; }
.bnbeh ul.bnbeh__tilgjenge li.bnbeh__tilgjenge--ja{
  border-color:#b9d7c4;
  background:#eef7f1;
  color:#1f5636;
}
.bnbeh dl.bnbeh__uke{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0 22px;
}
.bnbeh dl.bnbeh__uke > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--bnb-linje);
}
.bnbeh dl.bnbeh__uke dt{
  margin:0;
  color:#3a4a42;
  font-size:14.5px;
  font-weight:600;
}
.bnbeh dl.bnbeh__uke dd{
  margin:0;
  color:#14241d;
  font-size:14.5px;
  font-variant-numeric:tabular-nums;
}
.bnbeh .bnbeh__tilgjenge-note{
  margin:10px 0 0;
  color:#55655c;
  font-size:13.5px;
  line-height:1.55;
}

/* ============================================================
   Fanelinjen / «På denne siden»
   ============================================================

   ÉN markup, to utseender. Paa skjerm en vannrett rad med faner; paa
   telefon en boks man slaar ut. Det er en <details>, saa den virker uten
   JS – paa en profilside er navigasjonen det siste som boer ryke.

   `open` staar i markupen. Paa skjerm skal fanene ALLTID vaere synlige,
   og en <details open> som CSS-en uansett tvinger aapen, er det enkleste
   som ogsaa taaler at CSS-en ikke lastes. */
.bnbeh .bnbeh__hopp{
  display:block;
  background:var(--bnb-flate);
  border:1px solid var(--bnb-linje);
  border-radius:var(--bnb-radius);
  margin-bottom:14px;
}
.bnbeh .bnbeh__hopp-topp{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 16px;
  cursor:pointer;
  font-size:15px;
  color:var(--bnb-dus);
  list-style:none;
  /* 44px klikkflate ogsaa naar teksten er kort. */
  min-height:44px;
}
.bnbeh .bnbeh__hopp-topp::-webkit-details-marker{ display:none; }
.bnbeh .bnbeh__hopp-ikon{ display:inline-flex; color:var(--bnb-gronn); flex:0 0 auto; }
.bnbeh .bnbeh__hopp-tekst{ flex:0 0 auto; }
.bnbeh .bnbeh__hopp-forste{
  color:var(--bnb-blekk); font-weight:650;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
/* Pilen. Snur naar boksen er aapen. */
.bnbeh .bnbeh__hopp-topp::after{
  content:""; margin-left:auto; flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid var(--bnb-svak);
  border-bottom:2px solid var(--bnb-svak);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.bnbeh .bnbeh__hopp[open] .bnbeh__hopp-topp::after{
  transform:rotate(-135deg) translate(-2px,-2px);
}

.bnbeh .bnbeh__faner{
  display:block;
  margin:0; padding:0 0 6px; list-style:none;
  border-top:1px solid var(--bnb-linje);
}
.bnbeh .bnbeh__faner li{ display:block; }
.bnbeh a.bnbeh__fane{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:4px 16px;
  color:var(--bnb-blekk);
  text-decoration:none;
  font-size:15.5px;
  border-bottom:1px solid var(--bnb-linje);
}
.bnbeh .bnbeh__faner li:last-child a.bnbeh__fane{ border-bottom:0; }
.bnbeh a.bnbeh__fane:hover,
.bnbeh a.bnbeh__fane:focus-visible{
  color:var(--bnb-gronn); background:var(--bnb-mykt);
}

@media (min-width:900px){
  /* Paa skjerm er dette faner, ikke en liste man slaar ut. */
  .bnbeh .bnbeh__hopp{ border-radius:var(--bnb-radius); overflow:hidden; }
  .bnbeh .bnbeh__hopp-topp{ display:none; }
  .bnbeh .bnbeh__faner{
    display:flex;
    flex-wrap:wrap;
    gap:2px;
    border-top:0;
    padding:0 6px;
  }
  .bnbeh .bnbeh__faner li{ display:block; }
  .bnbeh a.bnbeh__fane{
    min-height:48px;
    padding:0 14px;
    border-bottom:2px solid transparent;
    font-size:15px;
    font-weight:600;
    color:var(--bnb-dus);
  }
  .bnbeh .bnbeh__faner li:last-child a.bnbeh__fane{ border-bottom:2px solid transparent; }
  .bnbeh a.bnbeh__fane:hover,
  .bnbeh a.bnbeh__fane:focus-visible{
    color:var(--bnb-gronn); background:transparent;
    border-bottom-color:var(--bnb-gronn);
  }
}

/* ============================================================
   Finn frem
   ============================================================ */
.bnbeh .bnbeh__adresse{
  display:flex; align-items:flex-start; gap:9px;
  margin:0 0 12px; color:var(--bnb-blekk);
}
.bnbeh .bnbeh__adresse-ikon{ flex:0 0 auto; color:var(--bnb-gronn); margin-top:3px; }

.bnbeh .bnbeh__kart{
  display:block;
  position:relative;
  border:1px solid var(--bnb-linje);
  border-radius:8px;
  overflow:hidden;
  line-height:0;
}
.bnbeh .bnbeh__kartskisse{ display:block; width:100%; height:auto; }

.bnbeh a.bnbeh__kartlenke{
  display:inline-flex;
  align-items:center;
  gap:7px;
  position:absolute;
  right:10px; bottom:10px;
  min-height:38px;
  padding:0 13px;
  background:var(--bnb-flate);
  border:1px solid var(--bnb-linje);
  border-radius:8px;
  color:var(--bnb-blekk);
  font-size:14.5px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  box-shadow:0 1px 3px rgba(20,36,29,.10);
}
.bnbeh a.bnbeh__kartlenke:hover,
.bnbeh a.bnbeh__kartlenke:focus-visible{
  color:var(--bnb-gronn); border-color:var(--bnb-gronn);
}

/* ============================================================
   Den faste linjen nederst paa telefon
   ============================================================

   Den dekker bunnen av siden. Derfor faar .bnbeh luft tilsvarende
   hoeyden, slik at den siste setningen aldri havner under den.

   `env(safe-area-inset-bottom)` er for telefoner med stripe nederst:
   uten den ligger knappene delvis under systemlinjen. */
.bnbeh .bnbeh__fastlinje{
  display:flex;
  gap:10px;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  background:var(--bnb-flate);
  border-top:1px solid var(--bnb-linje);
  box-shadow:0 -2px 10px rgba(20,36,29,.07);
}
.bnbeh a.bnbeh__fast-knapp{
  display:inline-flex;
  flex:1 1 0;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 14px;
  border:1px solid var(--bnb-linje);
  border-radius:9px;
  background:var(--bnb-flate);
  color:var(--bnb-blekk);
  font-size:16px;
  font-weight:650;
  line-height:1;
  text-decoration:none;
}
.bnbeh a.bnbeh__fast-knapp--primar{
  background:var(--bnb-gronn);
  border-color:var(--bnb-gronn);
  color:#ffffff;
}
.bnbeh a.bnbeh__fast-knapp:hover,
.bnbeh a.bnbeh__fast-knapp:focus-visible{ border-color:var(--bnb-gronn); }
.bnbeh a.bnbeh__fast-knapp--primar:hover,
.bnbeh a.bnbeh__fast-knapp--primar:focus-visible{
  background:var(--bnb-gronn-mork, #276039); border-color:var(--bnb-gronn-mork, #276039);
  color:#ffffff;
}

/* Luft i bunnen, slik at linjen ikke dekker noe. */
.bnbeh:has(.bnbeh__fastlinje){ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }

@media (min-width:900px){
  /* Paa skjerm er kontaktkortet alltid synlig i hoeyre spalte. Da er en
     fast linje nederst bare stoey. */
  .bnbeh .bnbeh__fastlinje{ display:none; }
  .bnbeh:has(.bnbeh__fastlinje){ padding-bottom:56px; }
}

/* Hvor du landet.

   Fanene kan ikke selv vite hvilken seksjon du ser paa – det krever et
   skript som foelger rullingen, og det er ikke verdt et skript paa en
   profilside. Men seksjonen DU HOPPET TIL vet det selv, med :target.

   Markeringen er svak med vilje. Den skal si «her», ikke rope. */
.bnbeh .bnbeh__seksjon:target{
  border-color:var(--bnb-gronn);
  box-shadow:0 0 0 1px var(--bnb-gronn);
}