/* ==========================================================================
   1. DESIGNSYSTEM – variabler
   ========================================================================== */
:root{
  --marin:#0B2E59;      /* Mörk marinblå: rubriker, footer, overlays */
  --bla:#2563EB;        /* Primär klarblå: knappar, länkar, accenter */
  --bla-hover:#1D4ED8;  /* Hover på primärknappar */
  --himmel:#38BDF8;     /* Ljus accent: gradienter, ikoner, detaljer */
  --isbla:#EFF6FF;      /* Ljusblå sektionsbakgrund */
  --dimma:#F8FAFC;      /* Alternativ ljusgrå-blå sektionsbakgrund */
  --vit:#FFFFFF;
  --text:#1E293B;       /* Brödtext */
  --text-2:#5E6B82;     /* Sekundär text */
  --gron:#16A34A;       /* ENDAST bekräftelser och godkänd validering (ikoner, ramar, ytor) */
  /* Mörkare nyans av systemgrönt, används ENDAST när grönt sätts som text eller
     som botten bakom vit text. #16A34A ger bara 3,3:1 mot vitt och klarar därför
     inte WCAG AA för text – denna nyans ger 5,0:1. Samma roll, tillgänglig kontrast. */
  --gron-text:#15803D;

  --kant:#DBEAFE;                                  /* Ljusblå linje */
  --skugga:0 8px 24px rgba(37,99,235,.10);         /* Standardskugga på kort */
  --skugga-hog:0 16px 40px rgba(37,99,235,.18);    /* Hover-skugga */
  --radie:16px;
  --radie-s:12px;
  --pill:999px;
  --max:1140px;
  --grad:linear-gradient(135deg,#0B2E59,#2563EB);

  /* Linus riktiga logotyp, inbäddad som data-URL. Definieras EN gång här och
     återanvänds via background-image i header, hero, footer och bokningsvyn.
     --logga-mork: originalfärger, för vita bottnar.
     --logga-ljus: vit knockout med ljusblå skrapa, för marinblå/gradient. */
  --logga-mork:url("bilder/logga-mork.png");
  --logga-ljus:url("bilder/logga-ljus.png");
  --logga-forh:3.897;

  /* Hero-bakgrund: foto på Linus vid glasfasad i solnedgång (JPEG 2752x1536).
     Uppskalad 2x från källans 1376x768 med högkvalitativ omsampling: vid
     DPR 2 slipper webbläsaren sträcka ut bilden, vilket ger märkbart skarpare
     resultat. Linus står redan till höger, så ingen spegling behövs –
     textspalten ligger till vänster. Används även av CTA-sektionen. */
  --hero-foto:url("bilder/hero-linus-solnedgang.jpg");
  --hero-foto-mobil:url("bilder/hero-linus-mobil.jpg");
  --overgang:.25s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. Grundreset och typografi
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.65;
  color:var(--text);background:var(--vit);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.laast{overflow:hidden;} /* används när mobilmenyn är öppen */
h1,h2,h3,h4{color:var(--marin);line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em;}
h1{font-size:clamp(1.9rem,6vw,3.4rem);}
h2{font-size:clamp(1.6rem,4.5vw,2.5rem);}
h3{font-size:clamp(1.15rem,2.6vw,1.4rem);font-weight:700;}
h4{font-size:1.02rem;font-weight:700;}
p{margin:0 0 1rem;}
a{color:var(--bla);text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--text);}

/* Synlig fokusmarkering överallt (WCAG) */
:focus-visible{outline:3px solid var(--himmel);outline-offset:3px;border-radius:4px;}

/* Hoppa till innehåll – för tangentbordsanvändare */
.hoppa{position:absolute;left:-9999px;top:0;z-index:200;background:var(--vit);color:var(--marin);
  padding:12px 20px;border-radius:0 0 var(--radie-s) 0;font-weight:700;}
.hoppa:focus{left:0;}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ==========================================================================
   3. Layoutbyggstenar
   ========================================================================== */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px;}
/* Ankarlänkar ska inte hamna under den fasta headern */
section[id],footer[id]{scroll-margin-top:84px;}
section{padding:64px 0;}
@media(min-width:1024px){section{padding:96px 0;}}
.bg-is{background:var(--isbla);}
.bg-dim{background:var(--dimma);}

.sekt-topp{text-align:center;max-width:680px;margin:0 auto 44px;}
.sekt-topp p{color:var(--text-2);font-size:1.05rem;margin:0;}
.etikett{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bla);background:var(--isbla);padding:6px 14px;border-radius:var(--pill);margin-bottom:14px;
}

/* ==========================================================================
   4. Knappar
   ========================================================================== */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;border-radius:var(--pill);
  font-weight:700;font-size:1rem;text-align:center;text-decoration:none;
  transition:transform var(--overgang),box-shadow var(--overgang),background var(--overgang),color var(--overgang);
  border:2px solid transparent;white-space:nowrap;
}
.knapp:hover{text-decoration:none;}
.knapp-primar{background:var(--bla);color:var(--vit);box-shadow:0 6px 18px rgba(37,99,235,.30);}
.knapp-primar:hover{background:var(--bla-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,99,235,.38);}
.knapp-primar:active{transform:translateY(0);background:#1E40AF;}
.knapp-sekundar{background:var(--vit);color:var(--bla);border-color:var(--bla);}
.knapp-sekundar:hover{background:var(--isbla);transform:translateY(-2px);box-shadow:var(--skugga);}
.knapp-sekundar:active{transform:translateY(0);background:var(--kant);}
.knapp-vit{background:var(--vit);color:var(--marin);box-shadow:0 8px 24px rgba(0,0,0,.20);}
.knapp-vit:hover{background:var(--isbla);color:var(--bla);transform:translateY(-2px);}
.knapp-liten{min-height:44px;padding:10px 20px;font-size:.94rem;}
.knapp-bred{width:100%;}
/* Tvåradig knapp: huvudordet stort och centrerat, förklaringen mindre under.
   Storlekarna är i em så de följer knappens egen font-size (t.ex. i heron). */
.knapp-staplad{flex-direction:column;gap:2px;line-height:1.2;}
.knapp-staplad .knapp-rad{font-size:1.25em;font-weight:800;letter-spacing:-.01em;}
.knapp-staplad .knapp-underrad{font-size:.82em;font-weight:600;opacity:.92;}
.knapp[disabled],.knapp[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;}
/* På riktigt smala skärmar måste långa knapptexter få brytas,
   annars spränger knappen spalten (.knapp har white-space:nowrap). */
@media(max-width:430px){.knapp{white-space:normal;max-width:100%;}}

/* ==========================================================================
   5. Kort
   ========================================================================== */
.kort{
  background:var(--vit);border-radius:var(--radie);padding:28px;
  box-shadow:var(--skugga);border:1px solid rgba(37,99,235,.07);
  transition:transform var(--overgang),box-shadow var(--overgang);
}
/* Gemensam hovermarkering för alla kort: lyft, blå kant och en mjuk
   isblå ton. Håller sig helt inom det blå-vita spektrumet. */
.kort-hover:hover,.gal-kort:hover,.valj-kort:hover,.badge:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(37,99,235,.22);
  border-color:var(--bla);
  background:linear-gradient(180deg,var(--vit) 0%,var(--isbla) 100%);
}
.kort-hover,.gal-kort{border:1px solid rgba(37,99,235,.07);}
/* Kortet känns tryckbart */
.kort-hover:active,.gal-kort:active{transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.20);}

/* Blå ikoncirkel */
.ikon-cirkel{
  width:56px;height:56px;border-radius:50%;background:var(--isbla);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none;
}
.ikon-cirkel svg{width:28px;height:28px;stroke:var(--bla);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Bocklista */
.bocklista li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:.95rem;color:var(--text);}
.bocklista li svg{width:18px;height:18px;flex:none;margin-top:4px;stroke:var(--bla);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   6. Sticky header
   ========================================================================== */
.topp{
  position:fixed;inset:0 0 auto 0;z-index:90;
  transition:background var(--overgang),box-shadow var(--overgang);
  background:transparent;
}
.topp.fast{background:var(--vit);box-shadow:0 2px 14px rgba(11,46,89,.10);}
.topp-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;}

.logga{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;}
.logga:hover{text-decoration:none;}
.logga svg{width:36px;height:36px;flex:none;}
.logga-bild{
  display:block;height:48px;aspect-ratio:var(--logga-forh);
  background-repeat:no-repeat;background-position:left center;background-size:contain;
}
@media(max-width:479px){.logga-bild{height:38px;}}
.logga-bild.ljus{background-image:var(--logga-ljus);}
.logga-bild.mork{background-image:var(--logga-mork);}
/* Headern ligger transparent över heron -> ljus logotyp.
   När den blir vid scroll (eller menyn öppnas) -> mörk logotyp. */
.topp .logga .mork{display:none;}
.topp.fast .logga .ljus,.topp.meny-oppen .logga .ljus{display:none;}
.topp.fast .logga .mork,.topp.meny-oppen .logga .mork{display:block;}

.nav{display:none;}
@media(min-width:1024px){
  .nav{display:flex;align-items:center;gap:26px;}
  .nav a{color:var(--text);font-weight:600;font-size:.95rem;text-decoration:none;position:relative;padding:6px 0;}
  .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--bla);transition:right var(--overgang);}
  .nav a:hover::after{right:0;}
  .topp:not(.fast) .nav a{color:rgba(255,255,255,.92);}
  .topp:not(.fast) .nav a::after{background:var(--himmel);}
}
.topp-cta{display:none;}
@media(min-width:1024px){.topp-cta{display:inline-flex;}}
.topp:not(.fast) .topp-cta{background:var(--vit);color:var(--bla);}
.topp:not(.fast) .topp-cta:hover{background:var(--isbla);}

/* Hamburgare */
.burgare{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:12px;border-radius:var(--radie-s);flex:none;
}
@media(min-width:1024px){.burgare{display:none;}}
.burgare span{display:block;height:2px;width:100%;background:var(--marin);border-radius:2px;transition:transform var(--overgang),opacity var(--overgang);}
.topp:not(.fast) .burgare span{background:var(--vit);}
.burgare[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burgare[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burgare[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.topp.meny-oppen{background:var(--vit);box-shadow:0 2px 14px rgba(11,46,89,.10);}
.topp.meny-oppen .burgare span{background:var(--marin);}

/* Mobilmeny */
.mobmeny{
  position:fixed;left:0;right:0;top:72px;bottom:0;z-index:89;
  background:var(--vit);padding:22px 20px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform var(--overgang);
  visibility:hidden;
}
.mobmeny.oppen{transform:translateX(0);visibility:visible;}
@media(min-width:1024px){.mobmeny{display:none;}}
.mobmeny a.mlank{
  display:block;padding:16px 4px;font-size:1.1rem;font-weight:600;color:var(--marin);
  border-bottom:1px solid var(--kant);text-decoration:none;
}
.mobmeny a.mlank:hover{color:var(--bla);}
.mobmeny .knapp{margin-top:26px;}
/* Andra knappen i menyn ligger tätt under den första */
.mobmeny .knapp + .knapp{margin-top:12px;}
.mobmeny .mob-tel{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-weight:600;color:var(--text-2);}
.mobmeny .mob-tel svg{width:18px;height:18px;stroke:var(--bla);fill:none;stroke-width:2;}
.mobmeny .mob-tel{min-height:44px;}
#hemsida :focus-visible{outline-color:var(--marin);box-shadow:0 0 0 3px var(--vit);}

/* ==========================================================================
   7. Hero
   ========================================================================== */
/* MOBIL FÖRST. Fotot ligger som bakgrund över hela heron på alla bredder;
   Linus står till höger och textspalten till vänster. Hero-innehållet är en
   kolumn där rubriken ligger högst upp och trygghetspunkterna trycks ned
   med margin-top:auto, så de alltid avslutar sektionen. */
.hero{
  position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:stretch;
  padding:96px 0 28px;background:var(--marin);overflow:hidden;
}
.hero-inner{display:flex;flex-direction:column;}
.hero-txt{flex:none;}
.hero-botten{margin-top:auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.hero-botten .usp{margin-bottom:0;}
@media(min-width:1024px){.hero{min-height:100vh;padding:130px 0 90px;}}
.hero-bild{
  position:absolute;inset:0;z-index:0;
  background-image:var(--hero-foto);
  background-size:cover;
  /* Mobil först: skjut bilden åt höger så Linus står bredvid textspalten */
  background-position:86% center;
  background-repeat:no-repeat;
}
@media(min-width:1024px){.hero-bild{background-position:center;}}

/* MOBIL. Egen stående bild i exakt samma proportion som heron (941x1672),
   så cover fyller ytan utan att beskära något. Den vågräta gradienten är
   byggd för desktop där texten ligger till vänster; på mobil täcker texten
   hela bredden, så den går uppifrån och ned i stället. */
@media(max-width:639px){
  .hero-bild{
    background-image:var(--hero-foto-mobil);
    /* Lite inzoomad och forankrad uppe till vanster: da hamnar Linus i
       hogerspalten bredvid texten i stallet for bakom den. */
    background-size:auto 135%;
    background-position:14% 0%;
  }
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(11,46,89,.94) 0%,
      rgba(11,46,89,.86) 22%,
      rgba(11,46,89,.48) 40%,
      rgba(11,46,89,.24) 58%,
      rgba(11,46,89,.34) 78%,
      rgba(11,46,89,.60) 100%);
  }
  /* Textspalten halls smal sa att hogerkanten lamnas at Linus. */
  .hero-txt{max-width:62%;}
}

/* Mörkblå gradientoverlay så texten alltid är läsbar */
/* Mörkblå gradient som håller texten läsbar. Tung till vänster där texten
   ligger, betydligt lättare till höger så att fotot syns tydligt. */
/* Tät till vänster där texten ligger, klar till höger där Linus står. */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,
    rgba(11,46,89,.96) 0%,
    rgba(11,46,89,.93) 30%,
    rgba(11,46,89,.78) 52%,
    rgba(11,46,89,.40) 74%,
    rgba(11,46,89,.22) 100%);
}
@media(min-width:1024px){
  .hero-overlay{
    background:linear-gradient(100deg,
      rgba(11,46,89,.95) 0%,
      rgba(11,46,89,.91) 28%,
      rgba(11,46,89,.82) 46%,
      rgba(11,46,89,.46) 63%,
      rgba(11,46,89,.20) 82%,
      rgba(11,46,89,.12) 100%);
  }
}

/* Subtila glasreflexer – sneda transparenta vita band */
.glasreflex{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.glasreflex i{
  position:absolute;top:-40%;height:180%;transform:rotate(18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.10),rgba(255,255,255,0));
}
.glasreflex i:nth-child(1){left:8%;width:120px;}
.glasreflex i:nth-child(2){left:26%;width:56px;opacity:.7;}
.glasreflex i:nth-child(3){right:14%;width:180px;opacity:.55;}
/* I heron finns redan riktiga reflexer i fotot – dämpa de dekorativa banden */
.hero .glasreflex{opacity:.45;}

.hero-inner{position:relative;z-index:3;width:100%;}
.hero-txt{max-width:72%;}
@media(min-width:640px){.hero-txt{max-width:62%;}}
@media(min-width:1024px){.hero-txt{max-width:640px;}}
@media(max-width:399px){.hero-txt{max-width:80%;}}
.hero h1{
  color:var(--vit);margin-bottom:18px;max-width:11ch;
  font-size:clamp(1.75rem,7.2vw,3.4rem);
  text-shadow:0 2px 20px rgba(11,46,89,.45);
}
@media(min-width:1024px){.hero h1{max-width:15ch;margin-bottom:24px;}}
/* Linus egna ord, satt mot ljusblatt strec sa det last som ett citat och
   inte som brodtext. Fotot bakom ar pa honom. */
/* På telefon hålls citatet smalt så att högerkanten tydligt slutar innan
   Linus ansikte börjar i fotot. Bredare först när skärmen ger plats. */
.hero-citat{
  margin:0 0 2px;max-width:16ch;
  border-left:3px solid var(--himmel);padding-left:14px;
  text-shadow:0 2px 14px rgba(11,46,89,.45);
}
@media(min-width:640px){.hero-citat{max-width:24ch;}}
.hero-citat-text{
  display:block;color:var(--vit);font-weight:600;font-style:italic;
  font-size:clamp(1rem,3.9vw,1.3rem);line-height:1.5;
}
.hero-citat-namn{
  display:block;margin-top:7px;color:var(--himmel);
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
@media(min-width:1024px){.hero-citat{max-width:32ch;padding-left:18px;margin-bottom:4px;}}

.hero-under{color:rgba(255,255,255,.93);font-size:1.06rem;line-height:1.7;margin-bottom:26px;max-width:560px;}
@media(min-width:640px){.hero-under{font-size:1.14rem;}}

/* De två chipsen ligger på samma rad och är lika höga. Utan brödtext blir
   heron luftigare, så rubriken får lite mer plats och chipsen bär budskapet. */
.hero-txt > .prisbadge{margin:0 0 22px;max-width:min(100%,420px);}
@media(min-width:1024px){.hero-txt > .prisbadge{max-width:560px;}}

/* Större och tydligare huvudknapp, med extra luft ovanför så den hamnar
   längre ned i heron. */
.hero-knappar{display:flex;flex-wrap:wrap;gap:14px;margin:38px 0 26px;}
.hero-knappar .knapp{min-height:62px;padding:18px 34px;font-size:1.06rem;}
@media(min-width:1024px){.hero-knappar{margin-top:44px;}.hero-knappar .knapp{min-height:66px;font-size:1.12rem;padding:20px 40px;}}
@media(max-width:1023px){
  /* Textspalten tar det lediga utrymmet och knappen skjuts ned till dess
     botten, sa den hamnar tatt ovanfor trygghetspunkterna i stallet for
     att svava hogt upp i heron. */
  .hero-txt{flex:1;display:flex;flex-direction:column;}
  .hero-knappar{max-width:320px;margin-top:auto;margin-bottom:20px;}
  .hero-knappar .knapp{width:100%;}
}
/* På surfplatta hålls rubriken borta från ansiktet och heron blir inte
   onödigt hög i stående läge. Telefonens och datorns utsnitt behålls. */
@media(min-width:640px) and (max-width:1023px){
  .hero{min-height:min(88svh,820px);}
  .hero-bild{background-position:65% center;}
  .hero h1{font-size:clamp(2.2rem,5vw,3rem);max-width:13ch;}
}

/* Prisbadge i heron – sidans starkaste erbjudande */
.prisbadge{
  display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(120deg,var(--himmel),#7DD3FC);
  color:var(--marin);font-weight:800;
  padding:12px 20px;border-radius:var(--pill);
  box-shadow:0 10px 30px rgba(56,189,248,.35);
  font-size:.95rem;line-height:1.35;
}
.prisbadge svg{width:24px;height:24px;flex:none;stroke:var(--marin);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.prisbadge b{font-size:1.06rem;}

.usp{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:22px;}
@media(max-width:1023px){.usp li{font-size:.84rem;}}
.usp li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.94);font-size:.9rem;font-weight:600;}
.usp svg{width:18px;height:18px;flex:none;stroke:var(--himmel);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   8. Tjänstekort
   ========================================================================== */
.tjanster-grid{display:grid;gap:24px;grid-template-columns:1fr;}
@media(min-width:768px){.tjanster-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1024px){.tjanster-grid{grid-template-columns:repeat(3,1fr);}}

.tjanst-kort{display:flex;flex-direction:column;position:relative;overflow:hidden;min-width:0;
  border:2px solid var(--bla);cursor:pointer;scroll-margin-top:116px;}
.tjanst-kort .flagga{
  position:absolute;top:0;right:0;z-index:2;
  display:flex;align-items:center;gap:6px;
  background:#C2410C;color:var(--vit);
  font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 14px;border-radius:0 var(--radie) 0 var(--radie);
  box-shadow:0 4px 12px rgba(249,115,22,.35);
}
.tjanst-kort .flagga svg{width:14px;height:14px;fill:var(--vit);stroke:none;flex:none;}
.tjanst-kort h3{
  margin-bottom:8px;
  font-size:clamp(1.55rem,4.4vw,1.9rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
}
.tjanst-kort .ingress{color:var(--text-2);font-size:.95rem;margin-bottom:18px;}
/* Mobil: nätare kort så att alla tre går att skanna utan lång scroll */
@media(max-width:639px){
  .tjanst-kort{padding:20px 18px;}
  .tjanst-kort h3{font-size:1.45rem;}
  .tjanst-kort .ingress{font-size:.88rem;margin-bottom:14px;}
  .tjanst-kort .ikon-cirkel{width:46px;height:46px;margin-bottom:12px;}
  .tjanst-kort .ikon-cirkel svg{width:23px;height:23px;}
  .tjanst-kort .bocklista li{font-size:.87rem;margin-bottom:7px;}
  .tjanst-kort .bocklista{margin-bottom:16px;}
  .tjanst-kort .pris-rad{padding-top:14px;margin-bottom:14px;}
  .tjanst-kort .pris-tal{font-size:1.7rem;}
  .tjanst-kort .fastpris-chip{padding:8px 13px;font-size:.98rem;margin-bottom:13px;}
  .tjanst-kort .ingar-rubrik{margin-bottom:9px;}
  .tjanster-grid{gap:16px;}
}
.tjanst-kort .ingar-rubrik{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--bla);margin-bottom:12px;}
.tjanst-kort .bocklista{margin-bottom:22px;}
.tjanst-kort .pris-rad{margin-top:auto;padding-top:18px;border-top:1px solid var(--kant);margin-bottom:18px;}
/* Kortens prisblock ska staplas. Offertens delade .pris-rad får inte
   trycka ut förklaringen eller dela beloppet på flera rader här. */
.tjanst-kort .pris-rad{flex-direction:column;align-items:flex-start;gap:6px;}
.tjanst-kort .pris-rad .pris-suffix{white-space:normal;font-weight:500;}
.tjanst-kort .pris-tal{white-space:nowrap;}
.pris-fran{font-size:.8rem;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:block;}
.pris-tal{font-size:2rem;font-weight:800;color:var(--marin);line-height:1.15;letter-spacing:-.03em;}
.pris-suffix{font-size:.86rem;color:var(--text-2);font-weight:600;}

/* Stor prisbadge på fönsterputskortet */
.fastpris-chip{
  display:inline-flex;align-items:baseline;gap:8px;
  background:var(--isbla);border:1.5px dashed var(--bla);
  color:var(--marin);font-weight:800;border-radius:var(--radie-s);
  padding:10px 16px;margin-bottom:16px;font-size:1.05rem;
}
.fastpris-chip small{font-weight:600;font-size:.8rem;color:var(--bla);}
.fastpris-chip{flex-wrap:wrap;gap:2px 8px;}

/* Intern länk vidare till tjänstesidan – ger både SEO-värde och en väg
   för besökare som vill läsa mer innan de bokar. */
.las-mer{
  display:block;text-align:center;margin-top:12px;
  font-size:.9rem;font-weight:600;color:var(--bla);text-decoration:underline;
  text-underline-offset:3px;
}
.las-mer:hover{color:var(--bla-hover);}

.rut-rad{
  text-align:center;margin-top:28px;color:var(--text-2);font-size:.92rem;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
}
.rut-rad svg{width:18px;height:18px;stroke:var(--bla);fill:none;stroke-width:2;flex:none;}

/* Prisjämförelse mot marknaden */
/* Prisjämförelsen ska sticka ut mer, men stanna i det blå-vita spektrumet:
   tydligare blå botten, hel blå kant och en blåtonad skugga. */
.jamfor{
  margin-top:34px;
  background:linear-gradient(135deg,#DBEAFE 0%,var(--isbla) 55%,var(--vit) 100%);
  border:2px solid var(--bla);
  box-shadow:0 10px 30px rgba(37,99,235,.16);
  border-radius:var(--radie);padding:26px;max-width:760px;margin-left:auto;margin-right:auto;
  position:relative;overflow:hidden;
}
.jamfor h3{font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.jamfor h3 svg{width:22px;height:22px;stroke:var(--bla);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.jamfor-rad{
  display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-bottom:1px dashed rgba(37,99,235,.35);font-size:.93rem;
}
.jamfor-rad:nth-last-of-type(2){border-bottom:none;}
.jamfor-rad .namn{font-weight:700;color:var(--marin);}
.jamfor-rad .marknad{color:var(--text-2);}
.jamfor-rad .vi{
  font-weight:800;color:var(--vit);white-space:nowrap;
  background:var(--bla);padding:3px 12px;border-radius:var(--pill);font-size:.86rem;
}
.jamfor .kalla{font-size:.78rem;color:var(--text-2);margin:14px 0 0;}

/* Liten animation nar rutan rullas in i bild: raderna glider in efter
   varandra, prischipen studsar fram sist, och ett glasstrak sveper over
   rutan en gang – samma sorts reflex som ligger i heron. Allt hanger pa
   .syns, som app.js satter nar rutan syns, sa den spelas en gang. */
.jamfor.syns .jamfor-rad{animation:jamfor-rad-in .55s cubic-bezier(.4,0,.2,1) both;}
.jamfor.syns .jamfor-rad:nth-of-type(1){animation-delay:.12s;}
.jamfor.syns .jamfor-rad:nth-of-type(2){animation-delay:.26s;}
.jamfor.syns .jamfor-rad .vi{animation:jamfor-chip-in .5s cubic-bezier(.34,1.56,.64,1) both;}
.jamfor.syns .jamfor-rad:nth-of-type(1) .vi{animation-delay:.44s;}
.jamfor.syns .jamfor-rad:nth-of-type(2) .vi{animation-delay:.58s;}
@keyframes jamfor-rad-in{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}
@keyframes jamfor-chip-in{from{opacity:0;transform:scale(.72);}to{opacity:1;transform:none;}}

.jamfor::after{
  content:"";position:absolute;top:-60%;left:-45%;width:38%;height:220%;
  pointer-events:none;opacity:0;transform:rotate(18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62),rgba(255,255,255,0));
}
.jamfor.syns::after{animation:jamfor-glans 1.4s ease .5s 1;}
@keyframes jamfor-glans{0%{opacity:0;left:-45%;}18%{opacity:1;}100%{opacity:0;left:118%;}}

/* Reseten for reducerad rorelse nollar langden men inte fordrojningen –
   utan detta star raderna osynliga i en halv sekund. */
@media(prefers-reduced-motion:reduce){
  .jamfor.syns .jamfor-rad,
  .jamfor.syns .jamfor-rad .vi{animation-delay:0s!important;}
  .jamfor.syns::after{animation:none;}
}

/* ==========================================================================
   9. Så funkar det
   ========================================================================== */
.steg-grid{display:grid;gap:24px;grid-template-columns:1fr;counter-reset:steg;}
@media(min-width:768px){.steg-grid{grid-template-columns:repeat(3,1fr);}}
.steg-kort{position:relative;padding-top:40px;}
.steg-nr{
  position:absolute;top:-22px;left:28px;
  width:52px;height:52px;border-radius:50%;background:var(--grad);color:var(--vit);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;
  box-shadow:0 8px 20px rgba(37,99,235,.35);
}
.steg-kort h3{margin-bottom:8px;}
.steg-kort p{color:var(--text-2);font-size:.96rem;margin:0;}

/* ==========================================================================
   10. Om Linus
   ========================================================================== */
.om-grid{display:grid;gap:36px;grid-template-columns:1fr;align-items:center;}
@media(min-width:1024px){.om-grid{grid-template-columns:.85fr 1.15fr;gap:56px;}}
.om-bild{border-radius:var(--radie);overflow:hidden;box-shadow:var(--skugga-hog);background:var(--isbla);}
.om-bild svg{width:100%;height:auto;display:block;}
.om-bild img{width:100%;height:auto;display:block;}
.om-text .citat{
  font-size:1.06rem;line-height:1.75;color:var(--text);
  border-left:4px solid var(--bla);padding-left:20px;margin:0 0 26px;
}
/* Tre märken. På mobil ligger de två och två, så den sista får hela bredden
   i stället för att lämna en tom ruta bredvid sig. */
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px;grid-auto-rows:1fr;}
.badges .badge:last-child{grid-column:1/-1;}
@media(min-width:640px){.badges{grid-template-columns:repeat(3,1fr);}.badges .badge:last-child{grid-column:auto;}}
.badge{
  background:var(--vit);border:1px solid var(--kant);border-radius:var(--radie-s);
  padding:16px 10px;text-align:center;transition:transform var(--overgang),box-shadow var(--overgang);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.badge:hover{transform:translateY(-4px);box-shadow:var(--skugga);}
.badge svg{width:28px;height:28px;margin:0 auto 8px;stroke:var(--bla);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Rubriken hallas pa en rad; forklaringen ligger under i mindre, dovare stil. */
.badge-titel{display:block;font-size:.8rem;font-weight:700;color:var(--marin);line-height:1.3;}
.badge-under{display:block;margin-top:4px;font-size:.71rem;font-weight:600;color:var(--text-2);line-height:1.3;}
@media(min-width:400px){.badge-titel{font-size:.85rem;}.badge-under{font-size:.74rem;}}
.omraden{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--isbla);border-radius:var(--radie-s);padding:16px 18px;
  font-size:.93rem;color:var(--text);
}
.omraden svg{width:22px;height:22px;flex:none;margin-top:2px;stroke:var(--bla);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   11. Galleri + före/efter-slider
   ========================================================================== */
/* Fyra kort bildar två jämna rader från surfplatta och uppåt. */
.galleri-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:768px){.galleri-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.gal-kort{
  background:var(--vit);border-radius:var(--radie);overflow:hidden;
  box-shadow:var(--skugga);border:1px solid rgba(37,99,235,.07);
  transition:transform var(--overgang),box-shadow var(--overgang);
}
.gal-kort:hover{transform:translateY(-4px);box-shadow:var(--skugga-hog);}
.gal-kort .bild{background:var(--isbla);line-height:0;}
.gal-kort .bild svg{width:100%;height:auto;}
.gal-kort .txt{padding:16px 18px 20px;}
.gal-tagg{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bla);background:var(--isbla);padding:4px 10px;border-radius:var(--pill);margin-bottom:8px;
}
.gal-kort h3{font-size:.98rem;margin-bottom:4px;}
.gal-kort p{font-size:.86rem;color:var(--text-2);margin:0;}

/* Före/efter-kortet: dubbel bredd på desktop */
.fe-kort{grid-column:1/-1;}
/* Bildspelet spanner en spalt som ovriga, sa alla fyra kort blir lika
   stora aven pa datorskarm. */
@media(min-width:768px){.fe-kort{grid-column:span 1;}}

.fe{position:relative;user-select:none;-webkit-user-select:none;touch-action:pan-y;overflow:hidden;line-height:0;cursor:ew-resize;}
.fe .lager{position:relative;width:100%;}
.fe .lager svg{width:100%;height:auto;display:block;}
/* "Efter"-lagret ligger exakt ovanpå "före" och beskärs med clip-path av JS */
.fe .efter{position:absolute;inset:0;clip-path:inset(0 0 0 50%);}
.fe .efter svg{width:100%;height:100%;display:block;}
.fe-handtag{
  position:absolute;top:0;bottom:0;left:50%;width:4px;background:var(--vit);
  transform:translateX(-2px);box-shadow:0 0 0 1px rgba(11,46,89,.18),0 0 18px rgba(11,46,89,.35);
  z-index:4;
}
.fe-knopp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:var(--vit);
  box-shadow:0 6px 18px rgba(11,46,89,.35);
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;
}
.fe-knopp svg{width:24px;height:24px;stroke:var(--bla);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.fe-etikett{
  position:absolute;top:14px;z-index:3;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;
  padding:6px 12px;border-radius:var(--pill);
  background:rgba(11,46,89,.82);color:var(--vit);line-height:1.2;
}
.fe-etikett.f{left:14px;}
.fe-etikett.e{right:14px;background:rgba(37,99,235,.92);}
.fe-hjalp{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(255,255,255,.92);color:var(--marin);font-size:.76rem;font-weight:700;
  padding:6px 14px;border-radius:var(--pill);white-space:nowrap;line-height:1.2;
  transition:opacity var(--overgang);
}
.fe.rord .fe-hjalp{opacity:0;}
/* Osynligt reglage över hela ytan ger drag med mus, touch och tangentbord.
   pan-y låter sidan scrollas vertikalt medan vågrätt drag styr slidern. */
.fe-slider{position:absolute;inset:0;z-index:5;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize;touch-action:pan-y;}

/* --- Slideshow som håller flera före/efter-jämförelser --------------- */
.fe-show{position:relative;}
.fe-slide{display:none;}
.fe-slide.aktiv{display:block;animation:tona .3s ease;}
.fe-pil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:8;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(11,46,89,.28);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--overgang),transform var(--overgang);
}
.fe-pil:hover{background:var(--vit);transform:translateY(-50%) scale(1.08);}
.fe-pil svg{width:20px;height:20px;stroke:var(--bla);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.fe-pil.bak{left:12px;}
.fe-pil.fram{right:12px;}
.fe-pil.fram svg{transform:rotate(180deg);}
.fe-scen{
  position:absolute;left:50%;transform:translateX(-50%);bottom:56px;z-index:8;
  background:rgba(11,46,89,.86);color:var(--vit);
  font-size:.78rem;font-weight:700;letter-spacing:.03em;
  padding:6px 16px;border-radius:var(--pill);max-width:calc(100% - 24px);text-align:center;line-height:1.35;
}
.fe-punkter{
  position:absolute;left:50%;transform:translateX(-50%);bottom:4px;z-index:8;
  display:flex;gap:0;
}
.fe-punkt{
  width:44px;height:44px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.fe-punkt::before{content:"";width:10px;height:10px;border-radius:var(--pill);background:rgba(255,255,255,.65);box-shadow:0 1px 4px rgba(11,46,89,.6);transition:width var(--overgang),background var(--overgang);}
.fe-punkt[aria-pressed="true"]::before{background:var(--vit);width:26px;}
@media(max-width:639px){
  .fe-scen{bottom:48px;font-size:.76rem;padding:5px 12px;}
  .fe-hjalp{display:none;}
}

/* --- Gallerikort med riktigt foto ------------------------------------ */
.gal-foto{
  aspect-ratio:900/540;width:100%;height:auto;display:block;
  object-fit:cover;object-position:center;
}
/* Liten notis om att bilderna är exempelbilder */
.galleri-notis{
  text-align:center;margin:22px auto 0;max-width:640px;
  font-size:.82rem;color:var(--text-2);
}
.fe-slider:focus-visible+.fe-handtag{box-shadow:0 0 0 3px var(--himmel),0 0 18px rgba(11,46,89,.35);}

/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq{max-width:800px;margin:0 auto;}
.faq-post{
  background:var(--vit);border:1px solid var(--kant);border-radius:var(--radie-s);
  margin-bottom:12px;overflow:hidden;transition:box-shadow var(--overgang),border-color var(--overgang);
}
.faq-post.oppen{box-shadow:var(--skugga);border-color:var(--bla);}
.faq-fraga{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:18px 20px;min-height:60px;text-align:left;
  font-weight:700;font-size:1rem;color:var(--marin);
}
.faq-fraga:hover{background:var(--isbla);}
.faq-ikon{
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--isbla);
  display:flex;align-items:center;justify-content:center;transition:transform var(--overgang),background var(--overgang);
}
.faq-ikon svg{width:16px;height:16px;stroke:var(--bla);fill:none;stroke-width:2.5;stroke-linecap:round;}
.faq-post.oppen .faq-ikon{transform:rotate(180deg);background:var(--bla);}
.faq-post.oppen .faq-ikon svg{stroke:var(--vit);}
.faq-svar[hidden]{display:none;}
.faq-svar-inner{padding:0 20px 20px;color:var(--text-2);font-size:.96rem;line-height:1.7;}

/* ==========================================================================
   13. Avslutande CTA
   ========================================================================== */
/* CTA-sektionen får samma foto som heron, men beskuret mot tvålfönstret och
   under en tät blå gradient – knyter ihop sidan utan extra bildvikt. */
.cta{
  position:relative;color:var(--vit);text-align:center;overflow:hidden;
  background-image:
    linear-gradient(135deg,rgba(11,46,89,.93) 0%,rgba(11,46,89,.86) 45%,rgba(37,99,235,.82) 100%),
    var(--hero-foto);
  background-size:cover,cover;
  background-position:center,62% center;
  background-repeat:no-repeat,no-repeat;
}
.cta h2{color:var(--vit);}
.cta p{color:rgba(255,255,255,.92);font-size:1.08rem;max-width:520px;margin:0 auto 28px;}
.cta-inner{position:relative;z-index:2;}
/* auto i sidled behövs – .cta p sätter max-width:520px, och utan auto
   fastnar stycket till vänster i stället för att centreras. */
.cta .tel-rad{margin:22px auto 0;max-width:none;font-size:1rem;color:rgba(255,255,255,.92);}
.cta .tel-rad a{color:var(--vit);font-weight:800;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.footer{background:var(--marin);color:rgba(255,255,255,.78);padding:56px 0 0;}
.footer h4{color:var(--vit);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.4fr 1fr 1.15fr 1.1fr;gap:40px;}}
.footer p{font-size:.9rem;line-height:1.7;}
.footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.9rem;}
.footer a:hover{color:var(--himmel);text-decoration:underline;}
.footer li{margin-bottom:9px;}
.footer .kontakt li{display:flex;gap:10px;align-items:flex-start;}
.footer .kontakt svg{width:17px;height:17px;flex:none;margin-top:4px;stroke:var(--himmel);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.footer .fskatt{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:14px;}
.footer-slut{
  border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding:20px 0 24px;
  text-align:center;font-size:.82rem;color:rgba(255,255,255,.6);
}
@media(max-width:1023px){.footer{padding-bottom:84px;}} /* plats för sticky mobil-CTA */

/* ==========================================================================
   15. Sticky mobil-CTA
   ========================================================================== */
.mob-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -4px 20px rgba(11,46,89,.14);
  transform:translateY(120%);visibility:hidden;transition:transform var(--overgang),visibility var(--overgang);
}
.mob-cta.visa{transform:translateY(0);visibility:visible;}
@media(min-width:1024px){.mob-cta{display:none;}}

/* ==========================================================================
   16. Scroll-in-animation
   ========================================================================== */
.in{transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1);}
.rorelse .in:not(.syns){opacity:0;transform:translateY(24px);}
.in.syns{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .rorelse .in:not(.syns){opacity:1;transform:none;}
}

/* ==========================================================================
   17. OFFERTGUIDEN – helskärmsvy, ett steg i taget

   Varje steg är exakt en vyhöjd och aldrig mer, så kunden aldrig behöver
   rulla för att se både frågan och fälten. Höjden sätts i dvh, som räknar
   bort webbläsarens egen adressrad på mobil; vh gör inte det och skulle
   trycka ned navigeringen utanför skärmen.
   ========================================================================== */
/* Vyn ar exakt en skarmhojd hog och delas i tre: topprad, stegmatare och
   stegytan som tar resten. Da behover ingen hojd gissas, och ett steg kan
   aldrig gora sidan hogre an skarmen. */
#bokning{display:none;background:var(--vit);}
body.bokar{overflow:hidden;}
body.bokar #hemsida{display:none;}
body.bokar #bokning{display:flex;flex-direction:column;height:100dvh;}
.bok-topp,.stegrad{flex:none;}
.bok-kropp{flex:1;min-height:0;}
#kundform{height:100%;}
body.bokar .mob-cta{display:none!important;}
body.bokar .topp,body.bokar .mobmeny{display:none;}

.bok-topp{background:var(--vit);border-bottom:1px solid var(--kant);}
.bok-topp-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;}
.tillbaka-lank{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 4px;
  background:none;border:0;cursor:pointer;
  color:var(--bla);font-weight:700;font-size:.92rem;font-family:inherit;
}
.tillbaka-lank:hover{color:var(--bla-hover);}
.tillbaka-lank svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Stegmätare: en tunn linje och en rad text ------------------------- */
.stegrad{background:var(--vit);padding:14px 0 0;}
/* Samma bredd som stegets innehåll, annars spänner mätaren över hela
   sidan medan frågan står i en smal spalt. */
.stegrad .wrap{max-width:660px;}
.stegspar{height:4px;border-radius:2px;background:var(--kant);overflow:hidden;}
.stegspar span{
  display:block;height:100%;width:0;border-radius:2px;
  background:var(--bla);transition:width .28s ease;
}
.stegtext{margin:8px 0 0;font-size:.8rem;font-weight:700;color:var(--text-2);letter-spacing:.02em;}

/* ---- Ett steg --------------------------------------------------------- */
.bok-steg{display:none;}
.bok-steg.aktiv{
  display:flex;flex-direction:column;height:100%;
  max-width:620px;margin:0 auto;padding:0 20px 18px;
  /* Ryms innehållet inte ändå rullar steget invandigt, aldrig hela sidan. */
  overflow-y:auto;overscroll-behavior:contain;
}
.steg-inner{
  flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:20px;
  padding:20px 0;min-height:auto;
}
/* På smala/låga skärmar får innehållet sin naturliga höjd, så hela steget
   går att rulla utan att de första fälten hamnar ovanför scrollområdet. */
.steg-nav{flex-shrink:0;}
.steg-inner.mitten{align-items:center;text-align:center;}

.steg-fraga h2{
  font-size:clamp(1.5rem,6vw,2rem);line-height:1.2;letter-spacing:-.02em;
  color:var(--marin);margin:0 0 8px;
}
.steg-fraga p{margin:0;color:var(--text-2);font-size:1rem;line-height:1.55;}
.steg-not{margin:0;font-size:.86rem;color:var(--text-2);line-height:1.55;}
.steg-not a{font-weight:700;}

/* Navigeringen ligger alltid i botten av steget, aldrig utanför vyn */
.steg-nav{display:flex;gap:12px;padding-top:4px;}
.steg-nav .knapp{flex:1;min-height:54px;}
.steg-nav .knapp-sekundar{flex:0 0 auto;padding-left:22px;padding-right:22px;}

/* ---- Fält ------------------------------------------------------------- */
/* Två fält per rad även på telefon. Sex fält staplade på varandra skulle
   inte rymmas i en vyhöjd, och paren hör ihop två och två ändå. */
.falt-par{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:339px){.falt-par{grid-template-columns:1fr;}}
.falt-par.en{grid-template-columns:1fr;}

.ffalt{display:flex;flex-direction:column;gap:5px;min-width:0;}
.ffalt label{font-size:.86rem;font-weight:700;color:var(--marin);}
.ffalt label.dold{position:absolute;left:-9999px;}
.ffalt input,.ffalt textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--text);
  background:var(--vit);border:2px solid var(--kant);border-radius:var(--radie-s);
  padding:12px 14px;transition:border-color var(--overgang),box-shadow var(--overgang);
}
.ffalt textarea{resize:vertical;min-height:110px;line-height:1.55;}
.ffalt input::placeholder,.ffalt textarea::placeholder{color:#94A3B8;}
.ffalt input:focus,.ffalt textarea:focus{
  outline:none;border-color:var(--bla);box-shadow:0 0 0 4px rgba(37,99,235,.14);
}
.ffalt.fel input,.ffalt.fel textarea{border-color:#DC2626;}
.ffalt.ok input{border-color:var(--gron);}
/* Tom felrad tar ingen höjd, så steget inte reserverar plats i onödan. */
.faltfel{margin:0;font-size:.82rem;font-weight:600;color:#DC2626;}
.faltfel:empty{display:none;}
.falt-not{margin:0;font-size:.86rem;color:var(--text-2);line-height:1.5;}

/* ---- Stepper och reglage ---------------------------------------------- */
.stepper{display:flex;align-items:center;justify-content:center;gap:18px;}
.stepper button{
  width:56px;height:56px;flex:none;border-radius:50%;cursor:pointer;
  background:var(--vit);border:2px solid var(--kant);color:var(--marin);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--overgang),background var(--overgang);
}
.stepper button:hover:not(:disabled){border-color:var(--bla);color:var(--bla);}
.stepper button:disabled{opacity:.4;cursor:not-allowed;}
.stepper button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;}
.stepper .varde{
  font-size:3.2rem;font-weight:800;color:var(--marin);letter-spacing:-.04em;
  min-width:2.4em;text-align:center;line-height:1;
}
/* Antal fönster och antal med spröjs delar steg. */
.tal-par{display:flex;flex-direction:column;gap:18px;}
@media(min-width:520px){.tal-par{flex-direction:row;gap:24px;}.tal-grupp{flex:1;}}
.tal-grupp{display:flex;flex-direction:column;gap:10px;}
.tal-etikett{
  margin:0;font-size:.86rem;font-weight:700;color:var(--marin);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.tal-etikett span{font-weight:600;color:var(--bla);font-size:.82rem;}
.tal-par .stepper{gap:14px;}
.tal-par .stepper button{width:48px;height:48px;}
.tal-par .stepper .varde{font-size:2.5rem;min-width:2.2em;}

.stort-varde{
  margin:0;text-align:center;font-size:2.6rem;font-weight:800;
  color:var(--marin);letter-spacing:-.03em;line-height:1;
}
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:3px;background:var(--kant);cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--bla);border:3px solid var(--vit);box-shadow:0 2px 8px rgba(11,46,89,.28);
}
input[type="range"]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;border:3px solid var(--vit);
  background:var(--bla);box-shadow:0 2px 8px rgba(11,46,89,.28);
}
input[type="range"]:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.18);}

/* ---- Valkort: tjänst, frekvens och tillägg ---------------------------- */
.val-lista{display:flex;flex-direction:column;gap:10px;}
.val-lista.tat{gap:6px;}
.val-lista.tat .val-kort{padding:10px 14px;}
.val-lista.tat .val-txt b{font-size:.98rem;}
.val-kort{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--vit);border:2px solid var(--kant);border-radius:var(--radie-s);
  padding:15px 17px;cursor:pointer;font-family:inherit;
  transition:border-color var(--overgang),background var(--overgang);
}
/* hidden-attributet maste sla display:flex, annars gar kortet inte att
   dolja fran JavaScript. */
.val-kort[hidden]{display:none;}
.val-kort:hover{border-color:var(--bla);}
.val-kort.vald{border-color:var(--bla);background:var(--isbla);}
.val-kort input{position:absolute;opacity:0;width:1px;height:1px;}
.val-kort:focus-within{box-shadow:0 0 0 4px rgba(37,99,235,.14);}
.val-ikon{
  width:46px;height:46px;flex:none;border-radius:12px;background:var(--isbla);
  display:flex;align-items:center;justify-content:center;
}
.val-kort.vald .val-ikon{background:var(--vit);}
.val-ikon svg{width:24px;height:24px;stroke:var(--bla);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.val-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.val-txt b{color:var(--marin);font-size:1.02rem;font-weight:700;line-height:1.3;}
.val-txt small{color:var(--text-2);font-size:.86rem;line-height:1.4;}
/* Populära tillägg. Flamman flimrar svagt för att dra ögat dit utan att
   bli en blinkande reklamskylt – och står stilla för den som valt att
   minska rörelser i systemet. */
/* Flaggan ligger på samma rad som namnet, annars blir de populära korten
   två rader högre och steget slutar rymmas på en kort skärm. */
.val-kort.populart .val-txt{flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap;}
.val-txt .flagga{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#C2410C;
}
.val-txt .flagga svg{
  width:13px;height:13px;flex:none;fill:#EA580C;stroke:none;
  transform-origin:50% 85%;animation:flamma 1.7s ease-in-out infinite;
}
@keyframes flamma{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.9;}
  25%{transform:scale(1.16) rotate(-5deg);opacity:1;}
  50%{transform:scale(.95) rotate(4deg);opacity:.82;}
  75%{transform:scale(1.09) rotate(-2deg);opacity:1;}
}
@media(prefers-reduced-motion:reduce){.val-txt .flagga svg{animation:none;}}
.val-kort.populart{border-color:#FED7AA;background:#FFFBF5;}
.val-kort.populart:hover,.val-kort.populart.vald{border-color:var(--bla);background:var(--isbla);}

.val-chip{
  flex:none;font-size:.88rem;font-weight:800;color:var(--bla);
  background:var(--isbla);border-radius:var(--pill);padding:5px 11px;
}
.val-kort.vald .val-chip{background:var(--vit);}
.val-bock{
  width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--kant);
  display:flex;align-items:center;justify-content:center;
}
.val-bock svg{width:15px;height:15px;stroke:var(--vit);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.val-kort.vald .val-bock{background:var(--bla);border-color:var(--bla);}
.val-kort.vald .val-bock svg{opacity:1;}

/* ---- Prisrutan i sista steget ----------------------------------------- */
.prisruta{
  background:var(--isbla);border:1px solid var(--kant);border-radius:var(--radie);
  padding:22px;text-align:center;
}
.pris-stor{margin:0;font-size:2.8rem;font-weight:800;color:var(--marin);letter-spacing:-.035em;line-height:1;}
.pris-under{margin:8px 0 0;font-size:.92rem;color:var(--text-2);}
.pris-lank{
  margin-top:14px;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.88rem;font-weight:700;color:var(--bla);text-decoration:underline;
}
.pris-rader{margin-top:16px;text-align:left;border-top:1px solid var(--kant);padding-top:14px;}
.pris-rad{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.92rem;color:var(--text);}
.pris-rad span:last-child{font-weight:700;white-space:nowrap;}
.pris-rad.summa{border-top:1px solid var(--kant);margin-top:6px;padding-top:10px;font-weight:700;color:var(--marin);}
.pris-rad.gron span:last-child{color:var(--gron-text);}

/* ---- Godkännande ------------------------------------------------------ */
.gdpr-kort{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  background:var(--vit);border:2px solid var(--kant);border-radius:var(--radie-s);
  padding:15px 17px;font-size:.92rem;line-height:1.55;color:var(--text);
}
.gdpr-kort:hover{border-color:var(--bla);}
.gdpr-kort.fel{border-color:#DC2626;}
.gdpr-kort input{position:absolute;opacity:0;width:1px;height:1px;}
.gdpr-kort .check-ruta{
  width:24px;height:24px;flex:none;margin-top:1px;border-radius:6px;
  border:2px solid var(--kant);background:var(--vit);
  display:flex;align-items:center;justify-content:center;
}
.gdpr-kort .check-ruta svg{width:14px;height:14px;stroke:var(--vit);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.gdpr-kort input:checked+.check-ruta{background:var(--bla);border-color:var(--bla);}
.gdpr-kort input:checked+.check-ruta svg{opacity:1;}
.gdpr-kort input:focus-visible+.check-ruta{box-shadow:0 0 0 4px rgba(37,99,235,.18);}
.gdpr-kort a{font-weight:700;}

/* ---- Felruta ---------------------------------------------------------- */
.felruta{
  display:none;align-items:flex-start;gap:10px;
  background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radie-s);
  padding:13px 15px;font-size:.9rem;line-height:1.5;color:#991B1B;
}
.felruta.visa{display:flex;}
.felruta svg{width:19px;height:19px;flex:none;margin-top:1px;stroke:#DC2626;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Tacksteget ------------------------------------------------------- */
.bock-cirkel{
  width:76px;height:76px;border-radius:50%;background:var(--gron);
  display:flex;align-items:center;justify-content:center;
}
.bock-cirkel svg{width:38px;height:38px;stroke:var(--vit);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.boknr{
  display:flex;flex-direction:column;gap:4px;margin:0;
  background:var(--isbla);border-radius:var(--radie-s);padding:14px 24px;
}
.boknr .etik{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);}
.boknr .nr{font-size:1.5rem;font-weight:800;color:var(--marin);letter-spacing:.02em;}

/* ---- Tacksidan (fristående sida efter skickad förfrågan, tack.html) --- */
.tack-sida{max-width:600px;padding:112px 20px 64px;text-align:center;min-height:70svh;}
@media(min-width:1024px){.tack-sida{padding-top:156px;}}
.tack-bock{margin:0 auto 24px;}
.tack-sida h1{font-size:clamp(1.7rem,6vw,2.3rem);line-height:1.2;letter-spacing:-.02em;color:var(--marin);margin:0 0 12px;}
.tack-text{margin:0 0 28px;color:var(--text-2);font-size:1.05rem;line-height:1.6;}
.tack-sida .prisruta{margin-bottom:24px;}
.tack-sida .boknr{margin:0 auto 24px;max-width:280px;}
.tack-sida [hidden]{display:none;}
.tack-sida .pris-rad{flex-wrap:wrap;gap:4px 12px;}
.tack-sida .pris-rad span{min-width:0;overflow-wrap:anywhere;}
.tack-sida .pris-rad span:last-child{white-space:normal;}
.tack-hem{margin-top:8px;}
.tack-hem .knapp{display:inline-flex;min-width:220px;}

/* Honungsfälla: osynlig för människor men kvar i DOM:en, så att robotar
   som fyller i allt avslöjar sig. display:none hoppas ofta över. */
.honung{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Spinner i skicka-knappen */
.spinner{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:var(--vit);animation:snurr .6s linear infinite;}
.knapp.laddar .spinner{display:inline-block;}
.knapp.laddar .etikett-txt{opacity:.7;}
@keyframes snurr{to{transform:rotate(360deg);}}

/* ==========================================================================
   18. Undersidor (hemstad.html, kontorsstad.html)
   ========================================================================== */
.under-hero{
  min-height:auto;padding:140px 0 64px;
  background:var(--grad);
}
@media(min-width:1024px){.under-hero{min-height:auto;padding:170px 0 80px;}}
.under-hero .hero-txt{max-width:720px;}
.under-hero h1{max-width:20ch;margin-bottom:18px;}
.under-hero /* Linus egna ord, satt mot ljusblatt strec sa det last som ett citat och
   inte som brodtext. Fotot bakom ar pa honom. */
.hero-citat{
  margin:0 0 2px;max-width:24ch;
  border-left:3px solid var(--himmel);padding-left:14px;
  text-shadow:0 2px 14px rgba(11,46,89,.45);
}
.hero-citat-text{
  display:block;color:var(--vit);font-weight:600;font-style:italic;
  font-size:clamp(1rem,3.9vw,1.3rem);line-height:1.5;
}
.hero-citat-namn{
  display:block;margin-top:7px;color:var(--himmel);
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
@media(min-width:1024px){.hero-citat{max-width:32ch;padding-left:18px;margin-bottom:4px;}}

.hero-under{color:rgba(255,255,255,.93);font-size:1.06rem;margin-bottom:26px;max-width:560px;}
/* Brödsmulor ger både orientering och intern länkning */
.smulor{font-size:.86rem;color:rgba(255,255,255,.75);margin-bottom:16px;}
.smulor a{color:var(--vit);text-decoration:underline;text-underline-offset:3px;}
.smulor span{opacity:.8;}

/* ==========================================================================
   19. Blogg / guider
   ========================================================================== */
.blogg-grid{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:768px){.blogg-grid{grid-template-columns:repeat(3,1fr);}}
.blogg-kort{display:flex;flex-direction:column;}
.blogg-kort h2{font-size:1.25rem;margin:8px 0 10px;line-height:1.3;}
.blogg-kort h2 a{color:var(--marin);text-decoration:none;}
.blogg-kort h2 a:hover{color:var(--bla);}
.blogg-kort p{color:var(--text-2);font-size:.94rem;}
.blogg-kort .las-mer{margin-top:auto;text-align:left;}

.inlagg-meta{font-size:.82rem;color:var(--text-2);font-weight:600;margin:0;}
.inlagg-topp{background:var(--grad);color:var(--vit);padding:132px 0 44px;}
@media(min-width:1024px){.inlagg-topp{padding:164px 0 56px;}}
.inlagg-topp h1{color:var(--vit);max-width:18ch;margin-bottom:14px;}
.inlagg-topp .inlagg-ingress{color:rgba(255,255,255,.92);font-size:1.08rem;max-width:60ch;margin-bottom:14px;}
.inlagg-topp .inlagg-meta{color:rgba(255,255,255,.78);}

/* Läsbar radlängd är viktigare än full bredd i löpande text */
.inlagg-kropp{max-width:720px;padding-top:44px;padding-bottom:64px;}
.inlagg-kropp h2{font-size:clamp(1.35rem,3.4vw,1.7rem);margin:36px 0 12px;}
.inlagg-kropp h3{font-size:1.12rem;margin:24px 0 8px;}
.inlagg-kropp p{font-size:1.02rem;line-height:1.75;color:var(--text);}
.inlagg-kropp .bocklista{margin:16px 0 20px;}
.inlagg-kropp .bocklista li{align-items:flex-start;font-size:1rem;line-height:1.65;margin-bottom:12px;}
.inlagg-kropp a{text-decoration:underline;text-underline-offset:3px;}

.inlagg-cta{
  background:var(--isbla);border:2px solid var(--bla);border-radius:var(--radie);
  padding:26px;margin:40px 0 28px;text-align:center;
  box-shadow:0 10px 30px rgba(37,99,235,.14);
}
.inlagg-cta h2{margin:0 0 8px;font-size:1.3rem;}
.inlagg-cta p{color:var(--text-2);margin-bottom:18px;}
.tillbaka-blogg{margin:0;}
.tillbaka-blogg a{font-weight:600;}

/* ==========================================================================
   20. Desktopjusteringar
   Sidan är byggd mobil först. Reglerna nedan gäller ENBART från 1024 px och
   rör därför aldrig mobilvyn. De finns för att samma mobilvärden annars
   sträcks ut på en bred skärm: heron får ett stort tomrum i mitten, rubriken
   bryts för tidigt och korten blir avlånga pelare.
   ========================================================================== */
@media(min-width:1024px){

  /* 1. Tomrummet i heron. På mobil är heron ungefär lika hög som innehållet,
     så margin-top:auto ger nästan ingen lucka. På desktop är heron låst till
     88vh medan innehållet är ~400px, och all överbliven höjd hamnade i EN
     lucka mitt i bilden. Här hålls blocket ihop och centreras i stället. */
  .hero-inner{justify-content:center;}
  .hero-botten{margin-top:64px;gap:18px;}

  /* 2. Rubriken ska fylla spalten i stället för att brytas efter 11 tecken */
  .hero h1{
    max-width:16ch;
    font-size:clamp(2.9rem,3.9vw,3.9rem);
    margin-bottom:30px;
  }

  /* 3. Bredare textspalt så innehållet inte klumpar ihop sig till vänster */
  .hero-txt{max-width:760px;}
  .hero-knappar{margin-top:40px;}

  /* 5. Betydligt större logotyp. Headern måste växa i takt, annars spränger
     loggan sin rad. OBS: bokningsvyns header delar klassen .logga-bild men
     har egen kompakt höjd – den låses därför explicit nedan. */
  .topp-inner{height:92px;}
  .topp .logga-bild{height:58px;}
  /* Navlänkarna får inte brytas – 'Om Linus' hamnade annars på två rader */
  .nav{gap:20px;}
  /* Navlänkarna får inte brytas, och en aning mindre grad ger luft mellan
     den större loggan och Boka-knappen. */
  .nav a{white-space:nowrap;font-size:.92rem;}
  .footer .logga-bild{height:58px;}
  .bok-topp .logga-bild{height:48px;}   /* oförändrad i bokningsflödet */

  /* Ankarlänkar och heron måste kompensera för den högre headern */
  section[id],footer[id]{scroll-margin-top:116px;}
  .hero{padding-top:128px;}

  /* Från 1280 px finns plats för full logotypstorlek */
  @media(min-width:1280px){
    .topp-inner{height:104px;}
    .topp .logga-bild{height:68px;}
    .nav{gap:26px;}
  }

  /* 4. Två tjänster kvar. Griden hade tre kolumner, vilket lämnade korten
     vänsterställda med ett tomt fack – därför två kolumner, centrerade och
     större. Gäller bara desktop; mobilens en-kolumn är orörd. */
  .tjanster-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:900px;margin-left:auto;margin-right:auto;gap:30px;
  }
  .tjanst-kort{padding:36px 32px;}
  .tjanst-kort h3{font-size:2rem;}
  .tjanst-kort .ingress{font-size:1.02rem;margin-bottom:18px;}
  .tjanst-kort .bocklista li{font-size:.99rem;margin-bottom:11px;}
  .tjanst-kort .bocklista{margin-bottom:22px;}
  .tjanst-kort .fastpris-chip{margin-bottom:18px;font-size:1.12rem;padding:12px 18px;}
  .tjanst-kort .pris-rad{padding-top:20px;margin-bottom:20px;}
  .tjanst-kort .pris-tal{font-size:2.3rem;}
  .tjanst-kort .ikon-cirkel{width:60px;height:60px;margin-bottom:20px;}
  .tjanst-kort .ikon-cirkel svg{width:30px;height:30px;}

  /* Samma sak för tjänstevalet i bokningens steg 1 */
  .valj-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:840px;gap:28px;
  }
  .valj-kort{padding:36px 30px;}
  .valj-kort h3{font-size:1.55rem;}
  .valj-kort p{font-size:1rem;}
  .valj-kort .pris{font-size:1.08rem;}
  .valj-kort .ikon-cirkel{width:60px;height:60px;}
  .valj-kort .ikon-cirkel svg{width:30px;height:30px;}
}

/* ==========================================================================
   21. JURIDISKA SIDOR – integritetspolicy, köpvillkor, kakor
   Bygger vidare på blogglayouten (.inlagg-kropp) och lägger bara till det
   som behövs för villkorstext: faktaruta, tabell, blankett och platshållare.
   ========================================================================== */
.juridik h2{margin-top:40px;}
.juridik h2:first-of-type{margin-top:8px;}
.juridik p,.juridik li{font-size:1rem;}

/* Sammanfattningsruta överst på varje sida */
.juridik-ruta{
  background:var(--isbla);border:1px solid var(--kant);border-left:4px solid var(--bla);
  border-radius:var(--radie-s);padding:16px 18px;margin:0 0 8px;
}
.juridik-ruta p{margin:0;color:var(--text);}

/* Ändamål och rättslig grund */
.juridik-tabell{
  width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem;
  border:1px solid var(--kant);border-radius:var(--radie-s);overflow:hidden;
}
.juridik-tabell th,.juridik-tabell td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--kant);vertical-align:top;
}
.juridik-tabell thead th{background:var(--dimma);color:var(--marin);font-weight:700;}
.juridik-tabell tbody tr:last-child td{border-bottom:0;}
/* Under 560 px blir tabellen två staplade rader per post i stället för
   två kolumner – annars pressas texten till en oläslig remsa. */
@media(max-width:560px){
  .juridik-tabell,.juridik-tabell tbody,.juridik-tabell tr,.juridik-tabell td{display:block;width:100%;}
  .juridik-tabell thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .juridik-tabell tr{border-bottom:1px solid var(--kant);padding:4px 0;}
  .juridik-tabell tr:last-child{border-bottom:0;}
  .juridik-tabell td{border:0;padding:6px 14px;}
  .juridik-tabell td:last-child{color:var(--text-2);font-size:.88rem;padding-top:0;}
  .juridik-tabell td:last-child::before{content:'Rättslig grund: ';font-weight:700;color:var(--marin);}
}

/* Konsumentverkets standardformulär för ångerrätt */
.angerblankett{
  border:1px dashed var(--kant);border-radius:var(--radie-s);
  background:var(--dimma);padding:18px 20px;margin:18px 0;
}
.angerblankett p{margin:0 0 10px;font-size:.94rem;}
.angerblankett p:last-child{margin-bottom:0;}

/* Uppgifter som måste fyllas i innan sidan publiceras – syns tydligt så att
   ingen platshållare råkar följa med ut i skarp drift. */
.platshallare{
  background:#FEF3C7;border-bottom:2px dotted #B45309;color:#78350F;
  padding:1px 5px;border-radius:3px;font-weight:600;
}

/* Juridiska länkar i sidfoten */
.footer-juridik{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
}
.footer-juridik a{font-size:.9rem;}

/* Länken syns bara när samtycke.js faktiskt har något att fråga om -
   se filens egen kommentar. Samma utseende som de andra juridiklänkarna. */
.samtycke-fotlank{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.82);text-decoration:none;font-size:.9rem;
}
.samtycke-fotlank:hover{color:var(--himmel);text-decoration:underline;}

/* ---- Samtyckesbanner (cookiebot), se samtycke.js ---------------------- */
.samtycke-ruta{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--vit);border-top:1px solid var(--kant);
  box-shadow:0 -4px 20px rgba(11,46,89,.14);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
}
/* Bokningsrutan är sin egen fullskärmsvy - samtycket ligger i vägen där. */
body.bokar .samtycke-ruta{display:none;}
.samtycke-inner{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;}
.samtycke-text{flex:1 1 320px;margin:0;font-size:.92rem;line-height:1.55;color:var(--text);}
.samtycke-text a{font-weight:700;}
.samtycke-knappar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;flex:none;}
.samtycke-val{margin-bottom:12px;max-width:640px;}

/* ==========================================================================
   22. ÅNGERRÄTT OCH VILLKOR I BOKNINGENS SISTA STEG
   ========================================================================== */
/* Informationsruta om ångerrätten. Måste synas innan avtalet ingås. */
.anger-ruta{
  display:flex;gap:11px;align-items:flex-start;margin-top:22px;
  background:var(--dimma);border:1px solid var(--kant);border-radius:var(--radie-s);
  padding:14px 16px;font-size:.88rem;line-height:1.6;color:var(--text-2);
}
.anger-ruta svg{
  width:19px;height:19px;flex:none;margin-top:2px;
  stroke:var(--bla);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.anger-ruta b{color:var(--marin);}

/* Länkarna i kryssrutorna får inte äta klicket på själva rutan – de öppnar
   villkoren i ny flik, resten av ytan kryssar i som vanligt. */
.gdpr-kort a{color:var(--bla);font-weight:700;text-decoration:underline;}
.gdpr-kort a:hover{color:var(--marin);}
.gdpr-kort + .gdpr-kort{margin-top:12px;}
.gdpr-kort span:last-child{font-size:.9rem;line-height:1.55;}

/* ==========================================================================
   23. HONUNGSFÄLLA
   Fältet ska vara omojligt att nå för en människa men fortfarande finnas i
   DOM:en, så att robotar som fyller i allt avslöjar sig. display:none skulle
   många robotar hoppa över, därför flyttas det ur bild i stället.
   ========================================================================== */
.honung{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}