/* =====================================================================
   Tverrberg Hund- og Kattepensjonat — demo
   Designspråk: "Varm redaksjonell" — krem papir, skogsgrønt, oker,
   stor Fraunces-serif, asymmetrisk grid, bilete som bryt kolonna.
   ===================================================================== */

:root{
  --krem:#FBF7F0;
  --krem2:#F4ECDD;
  --papir:#FFFDF9;
  --blekk:#16211B;
  --skog:#1F3B2C;
  --skog2:#2E5540;
  --oker:#E8A33D;
  --oker-mjuk:#F7DFB0;
  --terra:#C4603C;
  --lav:#7B8B80;
  --line:#E3D9C7;
  --ok:#3F7D53;
  --varsel:#C4603C;

  --r-s:10px;
  --r-m:18px;
  --r-l:28px;
  --r-xl:44px;

  --skugge:0 1px 2px rgba(22,33,27,.05), 0 12px 32px -18px rgba(22,33,27,.35);
  --skugge-l:0 2px 4px rgba(22,33,27,.05), 0 30px 60px -30px rgba(22,33,27,.45);

  --maks:1240px;
  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--krem); color:var(--blekk);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer}

/* korn-tekstur over heile sida — gjev papirkjensle */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.03; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(40px,5.6vw,74px); font-variation-settings:"SOFT" 40,"WONK" 1}
h2{font-size:clamp(32px,4.6vw,58px)}
h3{font-size:clamp(21px,2.2vw,28px); line-height:1.15}
p{margin:0 0 1em}

.wrap{max-width:var(--maks); margin-inline:auto; padding-inline:26px}
.smal{max-width:820px}

.stikk{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--skog2);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.stikk::before{content:""; width:26px; height:2px; background:var(--oker); border-radius:2px}
.stikk.lys{color:var(--oker-mjuk)}

.leie{color:var(--lav); font-size:18px; max-width:62ch}

/* ---------------------------------------------------------- knappar */
.knapp{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 26px; border-radius:999px; border:1.5px solid transparent;
  font-weight:600; font-size:16px; text-decoration:none; letter-spacing:-.01em;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s;
}
.knapp:hover{transform:translateY(-2px)}
.knapp-primar{background:var(--skog); color:var(--krem); box-shadow:var(--skugge)}
.knapp-primar:hover{background:var(--skog2); box-shadow:var(--skugge-l)}
.knapp-oker{background:var(--oker); color:#2A1B04; box-shadow:var(--skugge)}
.knapp-oker:hover{background:#F2B455}
.knapp-linje{border-color:var(--skog); color:var(--skog); background:transparent}
.knapp-linje:hover{background:rgba(31,59,44,.07)}
.knapp-lys{background:var(--papir); color:var(--skog); box-shadow:var(--skugge)}
.knapp-liten{padding:10px 18px; font-size:14.5px}

/* ---------------------------------------------------------- toppbar */
.topp{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--krem) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.topp.festa{border-bottom-color:var(--line)}
.topp-inner{display:flex; align-items:center; gap:22px; height:76px; max-width:var(--maks); margin-inline:auto; padding-inline:26px}
.merke{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.merke-ikon{
  width:42px; height:42px; border-radius:14px; flex:none;
  background:var(--skog); color:var(--oker);
  display:grid; place-items:center; font-size:21px;
  box-shadow:0 6px 18px -8px rgba(31,59,44,.9);
}
.merke b{font-family:var(--serif); font-size:19px; line-height:1.05; display:block; letter-spacing:-.02em}
.merke span{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lav)}
.merke b, .merke>span>span{white-space:nowrap}
.meny{display:flex; gap:2px; align-items:center}
.meny a{
  text-decoration:none; padding:9px 12px; border-radius:999px; white-space:nowrap;
  font-size:14.5px; font-weight:500; color:var(--skog); transition:background .18s;
}
.topp .knapp{white-space:nowrap}
.meny a:hover{background:rgba(31,59,44,.08)}
.meny a.aktiv{background:var(--skog); color:var(--krem)}
.menyknapp{display:none; background:none; border:1.5px solid var(--line); border-radius:12px; padding:9px 12px}

@media (max-width:1150px){
  .meny{
    position:fixed; inset:76px 0 auto 0; background:var(--papir);
    flex-direction:column; align-items:stretch; padding:14px 20px 26px;
    border-bottom:1px solid var(--line); box-shadow:var(--skugge-l);
    display:none;
  }
  .meny.open{display:flex}
  .meny a{padding:14px 12px; font-size:17px}
  .menyknapp{display:block}
  .topp .knapp{display:none}
}

/* ---------------------------------------------------------- demo-stripe */
.demostripe{
  background:var(--skog); color:var(--oker-mjuk); font-size:13.5px;
  padding:9px 26px; text-align:center; letter-spacing:.01em;
}
.demostripe b{color:#fff}
.demostripe a{color:var(--oker)}

@media (max-width:620px){
  body{font-size:16px}
  .demostripe{font-size:12px; padding:8px 16px; line-height:1.45}
  .demostripe .berre-stor{display:none}
  .merke>span>span{display:none}
  .merke b{font-size:17px}
  .hero{padding:28px 0 20px}
  .hero .leie{font-size:17px}
  .seksjon{padding:64px 0}
  .kort{padding:22px}
  .hero-tillit{gap:18px}
}

/* ---------------------------------------------------------- hero */
.hero{position:relative; padding:70px 0 40px; overflow:hidden}
.hero::after{
  content:""; position:absolute; right:-180px; top:-160px; width:620px; height:620px;
  background:radial-gradient(circle, rgba(232,163,61,.30), transparent 68%);
  pointer-events:none; z-index:0;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  position:relative; z-index:1;
}
.hero h1 em{font-style:normal; color:var(--skog); position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.30em;
  background:var(--oker); opacity:.42; border-radius:.2em; z-index:-1;
}
.hero .leie{font-size:20px; margin-top:22px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
.hero-tillit{display:flex; gap:26px; flex-wrap:wrap; margin-top:36px; padding-top:26px; border-top:1px solid var(--line)}
.hero-tillit div b{font-family:var(--serif); font-size:28px; display:block; line-height:1}
.hero-tillit div span{font-size:13.5px; color:var(--lav)}

/* fotokollasj */
.kollasj{position:relative; aspect-ratio:1/1.02}
.kollasj figure{
  position:absolute; margin:0; overflow:hidden; background:var(--krem2);
  box-shadow:var(--skugge-l); border:7px solid var(--papir);
}
.kollasj .f1{inset:0 24% 30% 0; border-radius:var(--r-l) 6px var(--r-l) var(--r-l); transform:rotate(-2.2deg); z-index:2}
.kollasj .f2{inset:36% 0 12% 44%; border-radius:6px var(--r-l) var(--r-l) 6px; transform:rotate(2.6deg); z-index:3}
.kollasj .f3{inset:auto auto 0 6%; width:40%; aspect-ratio:1/1; border-radius:999px; transform:rotate(-4deg); z-index:4; border-width:8px}
.kollasj img{width:100%; height:100%; object-fit:cover}
.kollasj .lapp{
  position:absolute; right:-6px; top:-18px; z-index:6;
  background:var(--oker); color:#2A1B04; font-weight:700; font-size:13.5px;
  padding:11px 17px; border-radius:999px; transform:rotate(5deg);
  box-shadow:var(--skugge); display:flex; align-items:center; gap:8px;
}
.puls{width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(63,125,83,.7); animation:puls 2.2s infinite}
@keyframes puls{70%{box-shadow:0 0 0 12px rgba(63,125,83,0)}100%{box-shadow:0 0 0 0 rgba(63,125,83,0)}}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .kollasj{aspect-ratio:1/.9; max-width:520px; margin-inline:auto; width:100%}
}

/* ---------------------------------------------------------- seksjonar */
section{position:relative}
.seksjon{padding:96px 0}
.seksjon-krem{background:var(--krem2)}
.seksjon-skog{background:var(--skog); color:var(--krem)}
.seksjon-skog h2, .seksjon-skog h3{color:var(--papir)}
.seksjon-skog .leie{color:rgba(251,247,240,.72)}
.seksjon-topp{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:52px; flex-wrap:wrap}

/* bølgjekant */
.kant{display:block; width:100%; height:52px}

/* ---------------------------------------------------------- kort */
.kort{
  background:var(--papir); border:1px solid var(--line); border-radius:var(--r-l);
  padding:30px; box-shadow:var(--skugge);
}
.kort-mjuk{background:var(--papir); border-radius:var(--r-m); padding:22px; border:1px solid var(--line)}
.rutenett{display:grid; gap:22px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.r3,.r4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.r2,.r3,.r4{grid-template-columns:1fr}}

/* ---------------------------------------------------------- ledig no */
.ledig{
  background:var(--papir); border-radius:var(--r-xl); padding:34px;
  box-shadow:var(--skugge-l); border:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
}
@media (max-width:880px){.ledig{grid-template-columns:1fr; padding:26px}}
.datofelt{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--lav); margin-bottom:7px}
input[type=date], input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea{
  width:100%; padding:13px 15px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--krem); font:inherit; font-size:16px; color:var(--blekk); transition:border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--skog2); box-shadow:0 0 0 4px rgba(46,85,64,.13)}

.plassar{display:grid; gap:16px}
.plass{
  display:grid; grid-template-columns:52px 1fr auto; gap:16px; align-items:center;
  padding:18px 20px; border-radius:var(--r-m); background:var(--krem); border:1px solid var(--line);
}
.plass .dyr{font-size:30px; text-align:center}
.plass b{font-family:var(--serif); font-size:19px; display:block}
.plass small{color:var(--lav); font-size:13.5px}
.plass .tal{font-family:var(--serif); font-size:32px; line-height:1; text-align:right}
.plass .tal span{font-size:14px; color:var(--lav); font-family:var(--sans)}
.stolpe{height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:9px}
.stolpe i{display:block; height:100%; border-radius:99px; background:var(--skog2); transition:width .5s cubic-bezier(.2,.8,.3,1)}
.stolpe.varm i{background:var(--oker)}
.stolpe.full i{background:var(--terra)}

/* ---------------------------------------------------------- prisar */
.pris{
  background:var(--papir); border:1px solid var(--line); border-radius:var(--r-l);
  padding:32px; position:relative; overflow:hidden; box-shadow:var(--skugge);
  transition:transform .2s, box-shadow .2s;
}
.pris:hover{transform:translateY(-4px); box-shadow:var(--skugge-l)}
.pris .tal{font-family:var(--serif); font-size:60px; line-height:1; letter-spacing:-.03em}
.pris .tal sup{font-size:20px; vertical-align:top; margin-left:3px}
.pris .per{color:var(--lav); font-size:15px; margin-bottom:20px; display:block}
.pris ul{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px}
.pris li{display:flex; gap:11px; font-size:15.5px; align-items:flex-start}
.pris li::before{content:"✓"; color:var(--ok); font-weight:700; flex:none}
.pris-merkt{background:var(--skog); color:var(--krem); border-color:var(--skog)}
.pris-merkt .per{color:rgba(251,247,240,.6)}
.pris-merkt li::before{color:var(--oker)}
.merkelapp{
  position:absolute; top:20px; right:-38px; transform:rotate(38deg);
  background:var(--oker); color:#2A1B04; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 42px;
}

/* ---------------------------------------------------------- steg */
.steg{counter-reset:s; display:grid; gap:2px}
.stegrad{
  display:grid; grid-template-columns:96px 1fr; gap:28px; align-items:start;
  padding:30px 0; border-top:1px solid var(--line);
}
.stegrad:last-child{border-bottom:1px solid var(--line)}
.stegrad .n{
  counter-increment:s; font-family:var(--serif); font-size:56px; line-height:.9;
  color:var(--oker); letter-spacing:-.04em;
}
.stegrad .n::before{content:"0" counter(s)}
@media (max-width:640px){.stegrad{grid-template-columns:1fr; gap:10px}}

/* ---------------------------------------------------------- dyra */
.dyrekort{
  background:var(--papir); border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--skugge);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.dyrekort:hover{transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--skugge-l)}
.dyrekort .foto{aspect-ratio:4/5; background:var(--krem2); overflow:hidden}
.dyrekort .foto img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.dyrekort:hover .foto img{transform:scale(1.06)}
.dyrekort .tekst{padding:22px 24px 26px}
.dyrekort .tekst small{color:var(--oker); font-weight:700; letter-spacing:.13em; text-transform:uppercase; font-size:11.5px}
.dyrekort p{font-size:15px; color:var(--lav); margin:8px 0 0}

/* manglar-foto-kort */
.utanfoto{
  width:100%; height:100%; display:grid; place-items:center; gap:6px;
  background:
    radial-gradient(circle at 30% 25%, rgba(232,163,61,.35), transparent 60%),
    linear-gradient(150deg, var(--krem2), #E7DCC8);
  color:var(--skog2);
}
.utanfoto span{font-size:52px; opacity:.55}
.utanfoto small{font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.65}

/* ---------------------------------------------------------- galleri */
.galleri{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.galleri figure{margin:0; overflow:hidden; border-radius:var(--r-m); background:var(--krem2); box-shadow:var(--skugge); position:relative}
.galleri img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.galleri figure:hover img{transform:scale(1.07)}
.galleri{grid-template-rows:390px 300px}
.galleri figure:nth-child(1){grid-column:span 5}
.galleri figure:nth-child(2){grid-column:span 3}
.galleri figure:nth-child(3){grid-column:span 4}
.galleri figure:nth-child(4){grid-column:span 4}
.galleri figure:nth-child(5){grid-column:span 5}
.galleri figure:nth-child(6){grid-column:span 3}
@media (max-width:820px){
  .galleri{grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:230px}
  .galleri figure:nth-child(n){grid-column:span 1}
}

/* ---------------------------------------------------------- tilleggstenester */
.tags{display:flex; flex-wrap:wrap; gap:11px}
.tag{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px;
  border-radius:999px; border:1.5px solid var(--line); background:var(--papir);
  font-size:15px; font-weight:500; cursor:pointer; user-select:none;
  transition:all .16s;
}
.tag:hover{border-color:var(--skog2); transform:translateY(-2px)}
.tag.valt{background:var(--skog); border-color:var(--skog); color:var(--krem)}
.tag .kr{color:var(--lav); font-size:13.5px}
.tag.valt .kr{color:var(--oker-mjuk)}

/* ---------------------------------------------------------- omtalar */
.omtale{background:var(--papir); border-radius:var(--r-l); padding:28px; border:1px solid var(--line); box-shadow:var(--skugge)}
.stjerner{color:var(--oker); letter-spacing:3px; font-size:16px}
.omtale p{font-family:var(--serif); font-size:19px; line-height:1.42; margin:14px 0 18px}
.omtale footer{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--lav)}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--skog); color:var(--oker); display:grid; place-items:center; font-weight:700; font-size:15px; flex:none}

/* ---------------------------------------------------------- faq */
details{border-bottom:1px solid var(--line); padding:4px 0}
details summary{
  list-style:none; cursor:pointer; padding:20px 46px 20px 0; position:relative;
  font-family:var(--serif); font-size:20px; font-weight:600;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:26px; color:var(--oker); transition:transform .2s;
}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details .svar{padding:0 40px 22px 0; color:var(--lav)}

/* ---------------------------------------------------------- footer */
footer.botn{background:var(--blekk); color:rgba(251,247,240,.72); padding:72px 0 32px}
footer.botn h3{color:var(--papir); margin-bottom:16px}
footer.botn a{color:rgba(251,247,240,.72); text-decoration:none}
footer.botn a:hover{color:var(--oker)}
.botn-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px}
@media (max-width:880px){.botn-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.botn-grid{grid-template-columns:1fr}}
.botn-slutt{margin-top:52px; padding-top:24px; border-top:1px solid rgba(251,247,240,.14); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px}

/* ---------------------------------------------------------- app-skal (booking/min side/admin) */
.appbar{background:var(--skog); color:var(--krem); position:sticky; top:0; z-index:110}
.appbar .topp-inner{height:70px}
.appbar .merke b{color:var(--papir)}
.appbar .merke span{color:rgba(251,247,240,.55)}
.appbar .merke-ikon{background:var(--oker); color:var(--skog)}
.appbar .meny a{color:rgba(251,247,240,.8)}
.appbar .meny a:hover{background:rgba(251,247,240,.12)}
.appbar .meny a.aktiv{background:var(--papir); color:var(--skog)}

.stegvisar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:34px}
.stegvisar div{
  display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
  background:var(--krem2); font-size:14px; font-weight:600; color:var(--lav);
  border:1.5px solid transparent;
}
.stegvisar div.no{background:var(--skog); color:var(--krem)}
.stegvisar div.ferdig{background:transparent; border-color:var(--ok); color:var(--ok)}
.stegvisar i{font-style:normal; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.09); display:grid; place-items:center; font-size:12px; font-weight:700}
.stegvisar div.no i{background:var(--oker); color:var(--skog)}

.panel{display:none}
.panel.vis{display:block; animation:inn .35s cubic-bezier(.2,.8,.3,1)}
@keyframes inn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.valkort{
  border:1.5px solid var(--line); border-radius:var(--r-l); padding:26px; cursor:pointer;
  background:var(--papir); transition:all .18s; text-align:left; width:100%;
}
.valkort:hover{border-color:var(--skog2); transform:translateY(-3px); box-shadow:var(--skugge)}
.valkort.valt{border-color:var(--skog); background:#F2F6F1; box-shadow:0 0 0 4px rgba(46,85,64,.10)}
.valkort .ikon{font-size:38px; margin-bottom:12px}

.samandrag{
  position:sticky; top:96px; background:var(--papir); border:1px solid var(--line);
  border-radius:var(--r-l); padding:26px; box-shadow:var(--skugge);
}
.samandrag .rad{display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:15px; border-bottom:1px dashed var(--line)}
.samandrag .rad:last-of-type{border-bottom:none}
.samandrag .sum{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:2px solid var(--blekk)}
.samandrag .sum b{font-family:var(--serif); font-size:32px}

/* dropsone */
.dropsone{
  border:2px dashed var(--line); border-radius:var(--r-l); padding:40px 26px; text-align:center;
  background:var(--krem); transition:all .2s; cursor:pointer;
}
.dropsone:hover{border-color:var(--skog2); background:#F2F6F1}
.dropsone .ikon{font-size:42px; margin-bottom:10px}

/* signaturboks */
.signatur{
  border:1.5px solid var(--line); border-radius:var(--r-m); padding:22px;
  background:var(--krem); display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}

/* ---------------------------------------------------------- admin */
.adminskal{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
@media (max-width:1000px){.adminskal{grid-template-columns:1fr}}
.sidemeny{background:var(--blekk); color:rgba(251,247,240,.7); padding:24px 16px; position:sticky; top:0; height:100vh; overflow:auto}
@media (max-width:1000px){.sidemeny{position:static; height:auto}}
.sidemeny a{
  display:flex; gap:12px; align-items:center; padding:11px 14px; border-radius:12px;
  text-decoration:none; color:inherit; font-size:15px; margin-bottom:3px; transition:background .15s;
}
.sidemeny a:hover{background:rgba(251,247,240,.09)}
.sidemeny a.aktiv{background:var(--oker); color:#2A1B04; font-weight:600}
.sidemeny .grp{font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.45; padding:20px 14px 8px}

.adminflate{padding:34px 34px 70px; background:var(--krem)}
@media (max-width:640px){.adminflate{padding:22px 18px 60px}}

.nokkeltal{
  background:var(--papir); border:1px solid var(--line); border-radius:var(--r-m);
  padding:20px 22px; box-shadow:var(--skugge); position:relative; overflow:hidden;
}
.nokkeltal .etikett{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--lav); font-weight:700}
.nokkeltal .verdi{font-family:var(--serif); font-size:42px; line-height:1.05; margin-top:6px; letter-spacing:-.03em}
.nokkeltal .verdi small{font-size:16px; color:var(--lav); font-family:var(--sans)}
.nokkeltal .trend{font-size:13px; color:var(--ok); margin-top:4px; font-weight:600}
.nokkeltal .glyf{position:absolute; right:14px; top:12px; font-size:30px; opacity:.16}

table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--lav); padding:0 12px 12px; font-weight:700}
td{padding:14px 12px; border-top:1px solid var(--line); vertical-align:middle}
tbody tr:hover{background:var(--krem)}

.pille{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700}
.p-gron{background:#E4F0E6; color:#2C6B3E}
.p-oker{background:#FCEED4; color:#8A5A0B}
.p-terra{background:#F8E4DC; color:#9B3F1F}
.p-grå{background:var(--krem2); color:var(--lav)}

.romrutenett{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px}
.rom{
  border-radius:14px; padding:12px 10px; text-align:center; border:1.5px solid var(--line);
  background:var(--papir); font-size:13px; transition:transform .15s;
}
.rom:hover{transform:translateY(-3px)}
.rom b{display:block; font-family:var(--serif); font-size:16px}
.rom small{color:var(--lav); font-size:11.5px}
.rom.opptatt{background:#EEF4EC; border-color:#C9DCC6}
.rom.inn{background:#FCEED4; border-color:#F0D49A}
.rom.ut{background:#F8E4DC; border-color:#EDC3B2}
.rom.vask{background:var(--krem2); border-style:dashed}

.tidslinje{position:relative; padding-left:30px}
.tidslinje::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tidslinje .hend{position:relative; padding:0 0 22px}
.tidslinje .hend::before{
  content:""; position:absolute; left:-26px; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--papir); border:3px solid var(--oker);
}
.tidslinje .hend.ok::before{border-color:var(--ok)}
.tidslinje .kl{font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--lav)}
.tidslinje b{display:block; font-family:var(--serif); font-size:19px; margin:2px 0 3px}
.tidslinje p{margin:0; font-size:14.5px; color:var(--lav)}

.ai{
  background:linear-gradient(140deg, #23402F, #16211B);
  color:var(--krem); border-radius:var(--r-l); padding:28px; position:relative; overflow:hidden;
}
.ai::after{
  content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(232,163,61,.4), transparent 70%);
}
.ai .stikk{color:var(--oker)}
.ai p{color:rgba(251,247,240,.86); position:relative; z-index:1}

.graf{display:flex; align-items:flex-end; gap:8px; height:170px}
.graf div{flex:1; background:var(--skog2); border-radius:8px 8px 3px 3px; position:relative; transition:height .6s cubic-bezier(.2,.8,.3,1)}
.graf div.full{background:var(--oker)}
.graf div.sprengt{background:var(--terra)}

.saksrad{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px; border-radius:12px}
.saksrad>div{flex:1; min-width:0; font-size:14.5px}
.saksrad>.knapp{flex:none}
.graf span{position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:11px; color:var(--lav)}

/* ---------------------------------------------------------- diverse */
.badge-demo{
  display:inline-flex; align-items:center; gap:7px; background:var(--oker-mjuk); color:#7A4E06;
  padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.sms{
  background:var(--papir); border:1px solid var(--line); border-radius:20px 20px 20px 6px;
  padding:15px 18px; max-width:400px; box-shadow:var(--skugge); font-size:15px;
}
.sms .fra{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--lav); font-weight:700; margin-bottom:6px}

/* Skjuling skjer berre når JS er på — utan JS er alt synleg */
html.js .avslor{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1)}
html.js .avslor.inne{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html.js .avslor{opacity:1; transform:none; transition:none}
  *{scroll-behavior:auto !important}
}

.skiljelinje{height:1px; background:var(--line); margin:28px 0}
.mt{margin-top:22px}.mt-l{margin-top:44px}.mb{margin-bottom:22px}
.senter{text-align:center}
.flex{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.mellom{justify-content:space-between}

/* =====================================================================
   ENKEL ADMIN — stor, visuell, få val. Laga for nettbrett i gangen.
   ===================================================================== */

.enkel{background:var(--krem); min-height:100vh}

.e-topp{
  position:sticky; top:0; z-index:100; background:var(--skog); color:var(--krem);
  padding:18px 0 0;
}
.e-topp-inn{max-width:1320px; margin-inline:auto; padding-inline:26px}
.e-hovud{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:16px}
.e-hovud h1{font-size:clamp(26px,3vw,38px); color:var(--papir); margin-right:auto}
.e-hovud .dato{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--oker); font-weight:700}
.e-brukar{display:flex; align-items:center; gap:11px; background:rgba(251,247,240,.12); padding:8px 16px 8px 8px; border-radius:999px}
.e-brukar b{color:var(--papir); font-size:15px}

.e-faner{display:flex; gap:6px; overflow-x:auto; padding-bottom:0}
.e-faner button{
  border:0; background:transparent; color:rgba(251,247,240,.72);
  padding:14px 22px; border-radius:16px 16px 0 0; font-size:17px; font-weight:600;
  white-space:nowrap; display:flex; align-items:center; gap:9px; transition:all .16s;
}
.e-faner button:hover{background:rgba(251,247,240,.1); color:var(--papir)}
.e-faner button.aktiv{background:var(--krem); color:var(--skog)}
.e-faner .ik{font-size:20px}

.e-flate{max-width:1320px; margin-inline:auto; padding:34px 26px 90px}
@media (max-width:640px){ .e-flate{padding:24px 16px 80px} .e-faner button{padding:12px 16px; font-size:15px} }

/* ------------------------------------------------------------- ringar */
.ringrad{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:820px){.ringrad{grid-template-columns:1fr}}
.ringkort{
  background:var(--papir); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:26px; box-shadow:var(--skugge); display:flex; align-items:center; gap:24px;
}
.ring{
  width:132px; height:132px; border-radius:50%; flex:none; display:grid; place-items:center;
  position:relative; background:conic-gradient(var(--skog2) 0deg, var(--line) 0deg);
}
.ring::after{content:""; position:absolute; inset:14px; border-radius:50%; background:var(--papir)}
.ring span{position:relative; z-index:1; text-align:center; line-height:1}
.ring b{display:block; font-family:var(--serif); font-size:40px; letter-spacing:-.03em}
.ring small{font-size:12px; color:var(--lav)}
.ringkort .txt h3{font-size:23px}
.ringkort .txt p{margin:6px 0 0; color:var(--lav); font-size:15px}

/* --------------------------------------------------------- stor knapp */
.storknapp{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 22px; border-radius:18px; border:2px solid var(--line);
  background:var(--papir); font-size:16px; font-weight:600; color:var(--skog);
  transition:all .15s; min-height:58px;
}
.storknapp:hover{border-color:var(--skog2); transform:translateY(-2px)}
.storknapp.gjort{background:#E4F0E6; border-color:#9CC4A4; color:#2C6B3E}
.storknapp.hovud{background:var(--skog); border-color:var(--skog); color:var(--krem)}
.storknapp.hovud:hover{background:var(--skog2)}
.storknapp.varsel{background:var(--oker); border-color:var(--oker); color:#2A1B04}

/* ------------------------------------------------------------ avatarar */
.dyravatar{
  width:64px; height:64px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--krem2); border:3px solid var(--papir); box-shadow:var(--skugge);
  display:grid; place-items:center; font-family:var(--serif); font-size:24px; color:var(--skog2);
}
.dyravatar img{width:100%; height:100%; object-fit:cover}
.dyravatar.stor{width:96px; height:96px; font-size:34px}
.dyravatar.liten{width:44px; height:44px; font-size:17px; border-width:2px}

/* ---------------------------------------------------------- dyrekort-e */
.dyrgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px}
.dyr-e{
  background:var(--papir); border:1px solid var(--line); border-radius:var(--r-l);
  padding:22px; box-shadow:var(--skugge); transition:transform .18s, box-shadow .18s;
}
.dyr-e:hover{transform:translateY(-3px); box-shadow:var(--skugge-l)}
.dyr-e .hovud{display:flex; gap:16px; align-items:center; margin-bottom:16px}
.dyr-e .hovud b{font-family:var(--serif); font-size:24px; display:block; line-height:1.1}
.dyr-e .hovud small{color:var(--lav); font-size:14px}
.dyr-e .fakta{display:grid; gap:8px; font-size:14.5px; margin-bottom:16px}
.dyr-e .fakta div{display:flex; gap:9px; align-items:flex-start}
.dyr-e .fakta span:first-child{width:22px; flex:none; text-align:center}
.dyr-e .knappar{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.dyr-e .knappar .storknapp{padding:12px 6px; font-size:13px; min-height:auto; flex-direction:column; gap:4px}
.dyr-e .knappar .storknapp .ik{font-size:20px}

/* --------------------------------------------------------- oppgåverad */
.oppg{
  display:flex; align-items:center; gap:18px; padding:18px 22px;
  background:var(--papir); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--skugge); transition:all .18s;
}
.oppg.gjort{background:#F1F7F1; border-color:#CBE0CD; opacity:.72}
.oppg .kl{font-family:var(--serif); font-size:26px; width:74px; flex:none; letter-spacing:-.02em}
.oppg .kva{flex:1; min-width:0}
.oppg .kva b{font-size:17px; display:block}
.oppg .kva small{color:var(--lav); font-size:14px}
.oppg .storknapp{flex:none; min-width:120px}
@media (max-width:640px){
  .oppg{flex-wrap:wrap; gap:12px}
  .oppg .kl{width:auto}
  .oppg .storknapp{width:100%}
}

/* ------------------------------------------------------- romtavle stor */
.romtavle{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.rom-e{
  border-radius:var(--r-m); padding:16px 14px; text-align:center; min-height:132px;
  border:2px solid var(--line); background:var(--papir);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s;
}
.rom-e:hover{transform:translateY(-3px)}
.rom-e .nr{font-size:11.5px; letter-spacing:.14em; font-weight:700; color:var(--lav)}
.rom-e b{font-family:var(--serif); font-size:19px; line-height:1.1}
.rom-e.opptatt{background:#EFF5ED; border-color:#B9D4B7}
.rom-e.inn{background:#FDF1DC; border-color:#EFCB8E}
.rom-e.ut{background:#FAE7DF; border-color:#E8B9A6}
.rom-e.vask{background:var(--krem2); border-style:dashed; border-color:var(--line)}
.rom-e.ledig{background:transparent; border-style:dashed; color:var(--lav)}

/* -------------------------------------------------------- heatkalender */
.kal{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.kal .hovud{
  text-align:center; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lav); font-weight:700; padding-bottom:4px;
}
.kal-dag{
  aspect-ratio:1/.86; border-radius:14px; padding:9px; display:flex; flex-direction:column;
  justify-content:space-between; border:1px solid transparent; transition:transform .15s;
}
.kal-dag:hover{transform:scale(1.05)}
.kal-dag .d{font-size:13px; font-weight:700; opacity:.8}
.kal-dag .f{font-family:var(--serif); font-size:22px; line-height:1}
.kal-dag .f small{font-size:11px; font-family:var(--sans); opacity:.7; display:block; font-weight:600}
.kal-forklar{display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:13.5px; color:var(--lav)}
.kal-prikk{width:16px; height:16px; border-radius:5px; display:inline-block; vertical-align:-3px; margin-right:6px}
@media (max-width:560px){ .kal-dag .f{font-size:17px} .kal{gap:5px} }

/* ------------------------------------------------------------ pengesøyler */
.soyler{display:flex; align-items:flex-end; gap:10px; height:220px}
.soyler div{
  flex:1; background:var(--skog2); border-radius:12px 12px 4px 4px; position:relative;
  display:flex; align-items:flex-start; justify-content:center; padding-top:8px;
  color:var(--krem); font-size:12px; font-weight:700;
}
.soyler div.topp{background:var(--oker); color:#2A1B04}
.soyler div span{position:absolute; bottom:-24px; left:0; right:0; text-align:center; font-size:11.5px; color:var(--lav); font-weight:600}

/* --------------------------------------------------------- varselkort */
.varselkort{
  border-radius:var(--r-l); padding:24px; display:flex; gap:18px; align-items:center;
  border:2px solid transparent;
}
.varselkort .ik{font-size:36px; flex:none}
.varselkort .txt{flex:1; min-width:0}
.varselkort .txt b{font-family:var(--serif); font-size:21px; display:block; line-height:1.15}
.varselkort .txt small{font-size:14.5px; color:var(--lav); display:block; margin-top:3px}
.varselkort.raud{background:#FAE7DF; border-color:#E8B9A6}
.varselkort.gul{background:#FDF1DC; border-color:#EFCB8E}
.varselkort.grå{background:var(--krem2); border-color:var(--line)}
@media (max-width:560px){ .varselkort{flex-wrap:wrap} .varselkort .storknapp{width:100%} }

.e-tittel{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 20px}
.e-tittel h2{font-size:clamp(26px,3.2vw,38px)}
.e-tittel span{color:var(--lav); font-size:15px}

/* =====================================================================
   DETALJKORT — ordre, kunde og dyr. Opnar seg over sida.
   ===================================================================== */
.modal-bak{
  position:fixed; inset:0; z-index:500; background:rgba(22,33,27,.55);
  backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto; animation:fadeinn .2s ease;
}
@keyframes fadeinn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--krem); border-radius:var(--r-xl); width:100%; max-width:980px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6); overflow:hidden;
  animation:oppinn .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes oppinn{from{opacity:0; transform:translateY(24px) scale(.985)}to{opacity:1; transform:none}}
.modal-topp{
  background:var(--skog); color:var(--krem); padding:24px 30px;
  display:flex; align-items:center; gap:18px; position:sticky; top:0; z-index:2;
}
.modal-topp h2{color:var(--papir); font-size:clamp(24px,3vw,34px); flex:1; min-width:0}
.modal-topp .undertekst{font-size:13.5px; color:rgba(251,247,240,.7); margin-top:4px}
.modal-lukk{
  border:0; background:rgba(251,247,240,.15); color:var(--krem); width:44px; height:44px;
  border-radius:50%; font-size:22px; flex:none; display:grid; place-items:center; transition:background .15s;
}
.modal-lukk:hover{background:rgba(251,247,240,.3)}
.modal-inn{padding:30px; max-height:none}
.modal-botn{
  padding:20px 30px; background:var(--papir); border-top:1px solid var(--line);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; position:sticky; bottom:0;
}
.modal-botn .venstre{margin-right:auto}
@media (max-width:640px){
  .modal-bak{padding:0}
  .modal{border-radius:0; min-height:100vh}
  .modal-inn{padding:20px}
  .modal-topp{padding:18px 20px}
  .modal-botn{padding:16px 20px}
  .modal-botn .storknapp{flex:1 1 100%}
}

/* faneknappar inne i detaljkortet */
.d-faner{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px; border-bottom:1px solid var(--line)}
.d-faner button{
  border:0; background:transparent; color:var(--lav); padding:12px 18px;
  font-size:15.5px; font-weight:600; border-bottom:3px solid transparent; margin-bottom:-1px;
}
.d-faner button.aktiv{color:var(--skog); border-bottom-color:var(--oker)}
.d-panel{display:none}
.d-panel.vis{display:block; animation:inn .25s cubic-bezier(.2,.8,.3,1)}

/* redigerbare felt */
.felt{margin-bottom:0}
.felt label{margin-bottom:6px}
.felt input, .felt select, .felt textarea{font-size:15.5px; padding:11px 14px}
.feltgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.feltgrid.tre{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.feltgrid, .feltgrid.tre{grid-template-columns:1fr}}
.d-bolk{margin-bottom:28px}
.d-bolk > h3{font-size:20px; margin-bottom:14px}

/* fakturadokument */
.faktura{background:var(--papir); border:1px solid var(--line); border-radius:var(--r-l); padding:34px}
@media (max-width:640px){.faktura{padding:20px}}
.faktura-topp{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:30px}
.faktura-topp .avsendar b{font-family:var(--serif); font-size:22px; display:block}
.faktura-topp .avsendar span{font-size:14px; color:var(--lav); line-height:1.7}
.faktura-topp .meta{text-align:right; font-size:14.5px}
.faktura-topp .meta .nr{font-family:var(--serif); font-size:30px; letter-spacing:-.02em; line-height:1}
.faktura-topp .meta div{color:var(--lav)}
.faktura-topp .meta b{color:var(--blekk)}
@media (max-width:640px){.faktura-topp .meta{text-align:left}}
.faktura-til{background:var(--krem); border-radius:var(--r-m); padding:18px 20px; margin-bottom:26px}
.faktura-til .etikett{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lav); font-weight:700; margin-bottom:6px}
.faktura-til b{font-size:17px}
.faktura table td{padding:13px 10px}
.faktura tfoot td{border-top:1px solid var(--line); padding:9px 10px}
.faktura tfoot tr:last-child td{border-top:2px solid var(--blekk); font-family:var(--serif); font-size:24px; padding-top:14px}
.faktura .hoyre{text-align:right}
.betalingsstripe{
  display:flex; gap:20px; flex-wrap:wrap; background:var(--krem); border-radius:var(--r-m);
  padding:18px 22px; margin-top:24px; font-size:14.5px;
}
.betalingsstripe div b{display:block; font-family:var(--serif); font-size:19px}
.betalingsstripe div span{color:var(--lav); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700}

/* foto i dyrekortet */
.fotoboks{position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--r-l); overflow:hidden; background:var(--krem2); border:1px solid var(--line)}
.fotoboks img{width:100%; height:100%; object-fit:cover}
.fotoboks .tom{width:100%; height:100%; display:grid; place-items:center; font-size:56px; color:var(--lav)}
.fotobyt{position:absolute; left:12px; right:12px; bottom:12px}

/* vekttabell */
.vektlinje{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px}
.vektlinje:last-child{border-bottom:0}
.vektlinje b{font-family:var(--serif); font-size:19px; width:86px}
.vektgraf{display:flex; align-items:flex-end; gap:6px; height:90px; margin:14px 0}
.vektgraf div{flex:1; background:var(--skog2); border-radius:6px 6px 2px 2px; min-height:6px}

.klikkbar{cursor:pointer}
.klikkbar:hover{box-shadow:var(--skugge-l)}

.d-fotogrid{grid-template-columns:300px 1fr; gap:26px; align-items:start}
@media (max-width:760px){ .d-fotogrid{grid-template-columns:1fr} }
.modal-inn{overflow-x:auto}
.modal-inn table{min-width:420px}

/* =====================================================================
   STADFESTING — «er du sikker?»
   ===================================================================== */
.bekreft-bak{
  position:fixed; inset:0; z-index:600; background:rgba(22,33,27,.62);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center;
  padding:24px; animation:fadeinn .16s ease;
}
.bekreft{
  background:var(--papir); border-radius:var(--r-l); max-width:480px; width:100%;
  padding:32px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); text-align:center;
  animation:oppinn .22s cubic-bezier(.2,.8,.3,1);
}
.bekreft .ik{font-size:52px; line-height:1; margin-bottom:16px}
.bekreft h3{font-size:26px; margin-bottom:12px}
.bekreft p{color:var(--lav); font-size:16px; margin:0 0 12px}
.bekreft .detalj{
  background:var(--krem); border-radius:var(--r-m); padding:14px 18px; margin:18px 0 0;
  font-size:15px; text-align:left; display:grid; gap:7px;
}
.bekreft .detalj div{display:flex; justify-content:space-between; gap:14px}
.bekreft .detalj b{white-space:nowrap}
.bekreft-knappar{display:flex; gap:10px; margin-top:26px}
.bekreft-knappar .storknapp{flex:1}
.bekreft-knappar .fare{background:var(--terra); border-color:var(--terra); color:#fff}
.bekreft-knappar .fare:hover{background:#B0522F}
@media (max-width:520px){ .bekreft-knappar{flex-direction:column-reverse} }

/* =====================================================================
   SPRÅKVAL
   ===================================================================== */
.sprakval{display:flex; gap:2px; padding:3px; background:rgba(31,59,44,.10); border-radius:999px; flex:none}
.sprakval button{
  border:0; background:transparent; color:var(--skog); font-size:12.5px; font-weight:700;
  letter-spacing:.08em; padding:7px 12px; border-radius:999px; transition:all .15s;
}
.sprakval button:hover{background:rgba(31,59,44,.10)}
.sprakval button.aktiv{background:var(--skog); color:var(--krem)}
.appbar .sprakval, .e-topp .sprakval{background:rgba(251,247,240,.14)}
.appbar .sprakval button, .e-topp .sprakval button{color:rgba(251,247,240,.8)}
.appbar .sprakval button.aktiv, .e-topp .sprakval button.aktiv{background:var(--papir); color:var(--skog)}
.filmtopp .sprakval{background:rgba(251,247,240,.18); backdrop-filter:blur(6px)}
.filmtopp .sprakval button{color:#fff}
.filmtopp .sprakval button.aktiv{background:var(--papir); color:var(--skog)}
@media (max-width:1150px){ .meny .sprakval{margin-top:10px; align-self:flex-start} }

/* =====================================================================
   LOGO
   ===================================================================== */
.logo{display:block; height:44px; width:auto}
.logo-lys{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.merke-logo{position:relative; display:flex; align-items:center; text-decoration:none; margin-right:auto}
.merke-logo img{height:46px; width:auto; transition:opacity .3s}
.merke-logo .morkt{position:absolute; left:0; top:50%; transform:translateY(-50%)}


/* =====================================================================
   LOGO — alltid i original farge. På mørk bakgrunn får han ei lys plate
   under seg i staden for å bli farga om.
   ===================================================================== */
.logo{display:block; height:44px; width:auto}
.merke-logo{display:flex; align-items:center; gap:14px; text-decoration:none; margin-right:auto}
.merke-logo .logo{height:46px}
@media (max-width:620px){ .merke-logo .logo{height:38px} }

.logoplate{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--papir); border-radius:16px; padding:10px 16px;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.55);
}
.logoplate img{height:38px; width:auto; display:block}
.logoplate.stor{border-radius:20px; padding:14px 20px}
.logoplate.stor img{height:52px}
.logoplate.liten{padding:7px 12px; border-radius:12px}
.logoplate.liten img{height:28px}

/* =====================================================================
   VIDEORAMME i hero-kollasjen
   ===================================================================== */
.kollasj .filmramme{background:var(--krem2)}
.kollasj .filmramme video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.kollasj .filmramme video.vis{opacity:1}
.kollasj .filmramme .plakat{width:100%; height:100%; object-fit:cover}
.lydknapp{
  position:absolute; right:12px; bottom:12px; z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(22,33,27,.45); backdrop-filter:blur(8px); color:#fff; font-size:17px;
  display:grid; place-items:center; transition:background .15s;
}
.lydknapp:hover{background:rgba(22,33,27,.7)}
.lydknapp[hidden]{display:none}