/**
 * Undertjänstsidan enligt byggspec v3.
 *
 * Egen fil, inte påbyggnad på hb-design.css: det gamla kortsystemet lever kvar
 * på sidor som ännu inte är omlagda, och de två får inte trampa på varandra.
 * Formen här kommer ur linjer, luft och färgfält — inga ramar, inga skuggor,
 * inga rundade hörn utom på knappar, pillar och formulärfält.
 *
 * Typsnittet är medvetet inte satt. Specen vill ha Outfit; sajten kör Barlow
 * och Hind tills det bytet tas separat, så allt ärver därifrån.
 */

/* Tokens ligger på :root och inte bara på .hb-t. Sidorna byggs numera i
   Elementors mallar, där det inte finns något omslutande .hb-t — utan den
   här raden blev var(--t-rosa) och resten odefinierade i mallarna. */
:root,.hb-t{
  --t-mork:#17101F;
  --t-rosa:#F2456B;        /* accent mot mörkt */
  --t-rosa-ljus:#D62F58;   /* accent mot ljust */
  --t-bg:#FBFAFC;
  --t-bg-avvik:#F1EDF6;
  --t-rubrik:#17101F;
  /* Brödtexten hämtas från samma globala färg som resten av sajten, så att
     löptext ser likadan ut oavsett vilken mall den råkar ligga i. */
  --t-brod:var(--e-global-color-text,#0A0A0A);
  --t-sekundar:var(--e-global-color-text,#0A0A0A);
  --t-dampad:#5C5468;
  --t-etikett:#8B8494;
  --t-linje:#E9E5EF;
  --t-linje-mork:#2E2438;
  --t-pa-mork:#B9B2C2;
  --t-pa-mork-stark:#EFEBF3;
  --t-sidpad:56px;
}

/* ============================ sektioner ============================ */

/* Varje sektion bär sin egen luft upptill. Utan den låg allt som följde efter
   ett färgat band dikt an mot bandets kant. */
.hb-sek{padding:80px var(--t-sidpad) 88px;background:var(--t-bg);color:var(--t-rubrik)}
.hb-sek--mork{background:var(--t-mork);color:#fff}
.hb-sek--avvik{background:var(--t-bg-avvik);padding-top:72px;padding-bottom:72px}

/* Två ljusa band i rad ska inte lägga dubbel luft — då räcker den undre. */
.hb-sek:not(.hb-sek--mork):not(.hb-sek--avvik) + .hb-sek:not(.hb-sek--mork):not(.hb-sek--avvik){
  padding-top:0}
/* Innehållet centreras i sitt band. Utan margin-inline hängde hela sidan
   i vänsterkanten med en tom halva till höger på breda skärmar. */
.hb-sek > *{max-width:1180px;margin-inline:auto}

.hb-sek h2{margin:0 0 6px;font-size:32px;line-height:1.2;letter-spacing:-.02em;
  font-weight:600;color:inherit}
.hb-sek--mork h2{color:#fff}

/* etikett/eyebrow */
.hb-ey{display:block;font-size:11px;line-height:1;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;color:var(--t-etikett);margin:0 0 16px}
.hb-ey--rosa{color:var(--t-rosa-ljus)}
.hb-sek--mork .hb-ey--rosa{color:var(--t-rosa)}

/* knapp: enda stället utom formulärfält där hörn rundas */
/* Som länk i kod, och som Elementors knappwidget där klassen hamnar på
   ytterrutan — då ska rutan vara osynlig och knappen inuti vara pillret. */
a.hb-pill,.hb-pill .elementor-button{display:inline-block;background:var(--t-rosa);
  color:#fff;font-weight:600;font-size:15px;line-height:1;padding:17px 30px;
  border-radius:999px;text-decoration:none;border:0;transition:background .2s}
a.hb-pill:hover,a.hb-pill:focus,
.hb-pill .elementor-button:hover,.hb-pill .elementor-button:focus{background:#FF7A96;color:#fff}
.elementor-widget-button.hb-pill{background:none;padding:0;border-radius:0}

/* ============================== hero =============================== */

/* Heron är ett eget rutnät men måste centreras som allt annat, annars ligger
   texten i vänsterkanten och ikonen i högerkanten med ett tomrum emellan. */
.hb-hero{padding:72px var(--t-sidpad) 80px;background:var(--t-mork);color:#fff}
.hb-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;
  align-items:start;max-width:1180px;margin-inline:auto}
.hb-hero .hb-ey{margin-bottom:26px}
.hb-hero h1{margin:0 0 18px;font-size:60px;line-height:1.1;letter-spacing:-.03em;
  font-weight:700;color:#fff}
.hb-hero--langt h1{font-size:48px}
.hb-hero h2{margin:0 0 22px;font-size:30px;line-height:1.35;letter-spacing:-.015em;
  font-weight:600;color:#fff}
.hb-hero--lang-h2 h2{font-size:26px}
.hb-hero h2 em{font-style:normal;color:var(--t-rosa)}
.hb-hero-ingress{margin:0;max-width:560px;font-size:16px;line-height:1.75;
  color:var(--t-pa-mork)}
.hb-hero-cta{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.hb-hero-tel{font-size:15px;line-height:1.5;color:var(--t-etikett)}
.hb-hero-tel a{color:#fff;text-decoration:none}
.hb-hero-ikon{margin-top:44px;line-height:0}
.hb-hero-ikon .hb-ikon{width:120px;height:120px;color:#fff}

/* ============================ introtext ============================ */

.hb-intro{max-width:720px}
/* Brödtexten på tjänste- och områdessidorna ligger på 16 px överallt.
   Tidigare hade introt 20, längre text 17 och punktlistan 18 — samma text
   bytte storlek beroende på vilket fält den råkade ligga i. */
.hb-intro p{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--t-brod)}
.hb-intro p:last-child{margin-bottom:0}

/* ===================== punktlista + faktapanel ===================== */

.hb-listsek{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.hb-listsek--ensam{grid-template-columns:minmax(0,1fr)}
.hb-listsek--ensam .hb-punkter{max-width:780px}

.hb-punkter{display:flex;flex-direction:column;margin-top:18px}
.hb-punkt{display:grid;grid-template-columns:20px 1fr;gap:16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--t-linje)}
.hb-punkt::before{content:"—";font-size:18px;line-height:1.5;color:var(--t-rosa)}
.hb-punkt span{font-size:16px;line-height:1.6;color:var(--t-brod)}

.hb-fakta{align-self:start;background:var(--t-mork);color:#fff;padding:34px 32px}
.hb-fakta .hb-ey{color:var(--t-rosa);margin-bottom:22px}
.hb-fakta-rad{display:flex;flex-direction:column;gap:5px;padding:14px 0;
  border-bottom:1px solid var(--t-linje-mork)}
.hb-fakta-rad:last-child{border-bottom:0;padding-bottom:0}
.hb-fakta-etikett{font-size:13px;line-height:1.4;color:var(--t-etikett)}
.hb-fakta-varde{font-size:16px;line-height:1.5;color:var(--t-pa-mork-stark)}

.hb-bild{align-self:stretch}
.hb-bild img{display:block;width:100%;height:100%;object-fit:cover}

/* Stora ikonen bredvid punktlistan. Ritar om sig när man hovrar — egna
   keyframes-namn, annars startar inte en färdigspelad animation om. */
.hb-storikon{align-self:center;justify-self:center;padding:8px}
.hb-storikon .hb-ikon{width:200px;height:200px;color:var(--t-mork);
  transition:transform .35s cubic-bezier(.34,1.1,.64,1)}
.hb-storikon:hover .hb-ikon{transform:translateY(-6px)}
.hb-storikon:hover .p{animation:hb-rita-om .55s cubic-bezier(.65,0,.35,1) forwards}
.hb-storikon:hover .a{animation-duration:.42s}
.hb-storikon:hover .blob{transform-origin:36.5% 38.5%;
  animation:hb-klick-om .48s cubic-bezier(.34,1.3,.64,1) forwards}
@media (prefers-reduced-motion:reduce){
  .hb-storikon .hb-ikon,.hb-storikon:hover .hb-ikon{transition:none;transform:none}
  .hb-storikon:hover .p,.hb-storikon:hover .blob{animation:none}
}

/* ==================== längre text med bild ==================== */

.hb-textbild{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.hb-textbild--utan-bild{grid-template-columns:minmax(0,1fr)}
.hb-textbild-text{max-width:620px}
.hb-textbild--utan-bild .hb-textbild-text{max-width:620px}
.hb-textbild p{margin:0 0 20px;font-size:16px;line-height:1.75;color:var(--t-sekundar)}
.hb-textbild p:last-child{margin-bottom:0}

/* Kortkoder som är egna block — kalkylatorn, formulär — står i full bredd
   under texten i stället för inklämda i läsespalten. */
.hb-verktyg{margin-top:52px;max-width:none}

/* ========================= så går det till ========================= */

.hb-process{display:grid;grid-template-columns:340px minmax(0,1fr);gap:64px;
  align-items:start}
.hb-process-topp{position:sticky;top:24px}
.hb-process-topp h2{margin:0 0 14px}
.hb-process-lead{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--t-dampad)}
.hb-leverans{display:inline-flex;align-items:baseline;gap:10px;font-size:15px;
  line-height:1.5;color:var(--t-sekundar);border-top:1px solid var(--t-linje);
  padding-top:16px}
.hb-leverans::before{content:"";display:block;width:7px;height:7px;flex:none;
  border-radius:50%;background:var(--t-rosa);transform:translateY(-2px)}
.hb-steg{display:grid;grid-template-columns:32px 52px minmax(0,1fr);gap:22px;
  padding:24px 0;border-bottom:1px solid var(--t-linje);align-items:start}
.hb-steg-nr{font-size:16px;line-height:1.5;font-weight:500;color:#B3A9C0}
/* Stegets ikon ritar om sig när man hovrar raden. */
.hb-steg-ikon{line-height:0}
.hb-steg-ikon .hb-ikon{width:44px;height:44px;color:var(--t-mork);
  transition:transform .3s cubic-bezier(.34,1.1,.64,1)}
.hb-steg:hover .hb-steg-ikon .hb-ikon{transform:translateY(-3px)}
.hb-steg:hover .p{animation:hb-rita-om .5s cubic-bezier(.65,0,.35,1) forwards}
.hb-steg:hover .a{animation-duration:.38s}
.hb-steg:hover .blob{transform-origin:36.5% 38.5%;
  animation:hb-klick-om .45s cubic-bezier(.34,1.3,.64,1) forwards}
@media (prefers-reduced-motion:reduce){
  .hb-steg-ikon .hb-ikon,.hb-steg:hover .hb-steg-ikon .hb-ikon{transition:none;transform:none}
  .hb-steg:hover .p,.hb-steg:hover .blob{animation:none}
}
.hb-steg h3{margin:0 0 8px;font-size:21px;line-height:1.3;font-weight:600;
  color:var(--t-rubrik)}
.hb-steg p{margin:0;max-width:620px;font-size:16px;line-height:1.7;color:var(--t-dampad)}

/* ====================== text nummer 3: poängen ===================== */

/* Fältet används både som kort poäng och som ett helt textavsnitt. 27 px höll
   för en rad men skrek när det låg en hel artikel där — samma storlek som
   övrig brödtext, blocket känns igen på linjen ovanför i stället. */
.hb-poang{max-width:820px;border-top:2px solid var(--t-mork);padding-top:28px}
.hb-poang p{margin:0 0 16px;font-size:16px;line-height:1.7;color:var(--t-rubrik)}
.hb-poang h2,.hb-poang h3{margin:26px 0 10px;font-size:22px;line-height:1.3;
  font-weight:600;color:var(--t-rubrik)}
.hb-poang > :first-child{margin-top:0}
.hb-poang p:last-child{margin-bottom:0}

/* ============================== faq =============================== */

.hb-fragor-topp{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;
  flex-wrap:wrap}
.hb-fragor-ort{font-size:15px;line-height:1.5;color:var(--t-etikett)}
.hb-fragor{display:flex;flex-direction:column;max-width:880px}
.hb-fraga{border-bottom:1px solid var(--t-linje)}
.hb-fraga > summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;gap:24px;padding:22px 0;
  font-size:20px;line-height:1.4;font-weight:500;color:var(--t-rubrik)}
.hb-fraga > summary::-webkit-details-marker{display:none}
.hb-fraga > summary::after{content:"+";font-size:24px;line-height:1;
  color:var(--t-rosa-ljus);flex:none}
.hb-fraga[open] > summary::after{content:"–"}
.hb-fraga-svar{padding:0 0 24px}
.hb-fraga-svar p{margin:0 0 14px;max-width:660px;font-size:16px;line-height:1.75;
  color:var(--t-sekundar)}
.hb-fraga-svar p:last-child{margin-bottom:0}

/* Ett fält kan innehålla en frågelista i stället för löptext — då byggs den
   om till <details> med de gamla klassnamnen. Här får den samma form som
   sidans egen FAQ, och slipper poängens 27 px. */
.hb-t .hb-faq{margin-top:24px;border-top:1px solid var(--t-linje);max-width:880px}
.hb-t .hb-faq-rad{border-bottom:1px solid var(--t-linje);padding:0}
.hb-t .hb-faq-rad > summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;justify-content:space-between;gap:24px;padding:22px 0;
  font-size:20px;line-height:1.4;font-weight:500;color:var(--t-rubrik)}
.hb-t .hb-faq-rad > summary::-webkit-details-marker{display:none}
.hb-t .hb-faq-rad > summary::after{content:"+";font-size:24px;line-height:1;
  color:var(--t-rosa-ljus);flex:none}
.hb-t .hb-faq-rad[open] > summary::after{content:"–"}
.hb-t .hb-faq-rad .hb-kort-text{padding:0 0 24px;max-width:660px}
.hb-t .hb-faq p,.hb-poang .hb-faq p{margin:0 0 14px;font-size:16px;line-height:1.75;
  color:var(--t-sekundar)}
.hb-t .hb-faq p:last-child{margin-bottom:0}
.hb-poang:has(.hb-faq){border-top:2px solid var(--t-mork);max-width:880px}

/* ========================== den som svarar ========================= */

.hb-hjalte{max-width:760px;border-top:2px solid var(--t-mork);padding-top:30px}
.hb-hjalte .hb-ey{font-size:12px;margin-bottom:22px}
.hb-hjalte-portratt{margin:0 0 22px;line-height:0}
.hb-hjalte-portratt img{display:block;width:72px;height:72px;object-fit:cover;
  border-radius:50%}
.hb-hjalte-text{margin:0 0 28px;font-size:23px;line-height:1.6;color:var(--t-brod)}
.hb-hjalte-rad{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:16px;line-height:1.6;color:var(--t-sekundar)}
.hb-hjalte-namn{font-weight:600;color:var(--t-rubrik)}
.hb-hjalte-roll{color:#6B6280}
.hb-hjalte-rad .hb-punktavskiljare{color:#B3A9C0}
.hb-hjalte-rad a{color:var(--t-rosa-ljus);text-decoration:none}
.hb-hjalte-rad a:hover{color:#A81F41}

/* ============================ syskonlista ========================== */

.hb-syskon-topp{display:flex;align-items:baseline;justify-content:space-between;
  gap:32px;margin-bottom:8px;flex-wrap:wrap}
.hb-syskon-topp h2{font-size:28px}
.hb-syskon-alla{font-size:15px;line-height:1;font-weight:500;
  color:var(--t-rosa-ljus);text-decoration:none}
.hb-syskon-alla:hover{color:#A81F41}
.hb-syskon{display:flex;flex-direction:column;max-width:900px}
.hb-syskon a{display:grid;grid-template-columns:36px 240px minmax(0,1fr) 24px;gap:24px;
  align-items:center;padding:20px 0;border-bottom:1px solid var(--t-linje);
  color:var(--t-rubrik);text-decoration:none}
.hb-syskon a:hover{color:var(--t-rosa-ljus)}
/* Radens ikon följer radens färg, så den tänds rosa i samma rörelse. */
.hb-syskon-ikon{line-height:0}
.hb-syskon-ikon .hb-ikon{width:32px;height:32px;color:currentColor}
.hb-syskon-namn{font-size:19px;line-height:1.35;font-weight:600}
.hb-syskon-txt{font-size:16px;line-height:1.6;color:var(--t-dampad)}
.hb-syskon-pil{font-size:17px;line-height:1.4;color:var(--t-rosa-ljus);text-align:right}

/* ============================== kontakt ============================ */

.hb-kontakt{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.hb-kontakt h2{margin:0 0 18px;font-size:42px;line-height:1.1;letter-spacing:-.03em;
  color:#fff}
.hb-kontakt-lead{margin:0 0 26px;max-width:420px;font-size:16px;line-height:1.7;
  color:var(--t-pa-mork)}
.hb-loften{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5;
  color:#DAD5E1}
.hb-lofte{display:flex;gap:12px}
.hb-lofte::before{content:"✓";color:var(--t-rosa)}
.hb-kontakt-tel{margin-top:30px;padding-top:24px;border-top:1px solid var(--t-linje-mork);
  font-size:16px;line-height:1.7;color:var(--t-etikett)}
.hb-kontakt-tel a{color:#fff;text-decoration:none}

/* Formulärmallen har en egen vit platta. I det mörka kontaktbandet gjorde den
   en vit ruta med ljusgrå etiketter i — oläsbart. Rutan är genomskinlig här. */
.hb-kontakt-form,
.hb-kontakt-form .elementor-widget-container,
.hb-kontakt-form .elementor-shortcode > .elementor,
.hb-kontakt-form .e-con,
.hb-kontakt-form .elementor-section{background:transparent !important}

/* Elementors formulär i mörka rutan */
.hb-kontakt-form .elementor-field-textual{background:#1E1626 !important;
  border:1px solid #322939 !important;border-radius:12px !important;color:#fff !important;
  font-size:16px !important;padding:15px 16px !important}
.hb-kontakt-form .elementor-field-textual::placeholder{color:#6B6280}
.hb-kontakt-form .elementor-field-label{font-size:12px !important;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:#A29BAE !important}
.hb-kontakt-form .elementor-button{background:var(--t-rosa) !important;color:#fff !important;
  border-radius:999px !important;font-weight:600 !important;padding:16px 30px !important}

/* ============ Elementor-mallarna: tjänst 4b och områdesmallen ==========
   I mallarna bär varje widget sin egen klass i stället för att ligga inuti
   .hb-hero eller .hb-kontakt. Reglerna nedan ger dem samma form som
   PHP-versionen hade, så att de två sätten ser likadana ut. */

/* Elementor sätter klassen på widgetens yttre ruta, inte på rubriken inuti.
   Temat färgar rubriken explicit, så en färg på ytterrutan ärvs aldrig ned —
   därför pekar reglerna på .elementor-heading-title inuti. */
.hb-hero-h1 .elementor-heading-title{margin:0;font-size:60px;line-height:1.1;
  letter-spacing:-.03em;font-weight:700;color:#fff}
.hb-hero-h2 .elementor-heading-title{margin:0;font-size:30px;line-height:1.35;
  letter-spacing:-.015em;font-weight:600;color:#fff}
.hb-hero-h1 em,.hb-hero-h2 em,.hb-kontakt-rubrik em{font-style:normal;color:var(--t-rosa)}
.hb-kontakt-rubrik .elementor-heading-title{margin:0;font-size:42px;line-height:1.1;
  letter-spacing:-.03em;font-weight:600;color:#fff}

/* En rubrik börjar alltid med versal, även om titeln är skriven med liten
   bokstav. Skyddsnät — titlarna i databasen är rättade, men nästa tjänst
   någon lägger in ska inte kunna bryta mot det. */
.hb-hero-h1 .elementor-heading-title::first-letter,
.hb-sekrubrik .elementor-heading-title::first-letter,
.hb-syskon-namn .elementor-heading-title::first-letter,
.hb-kort-rubrik .elementor-heading-title::first-letter{text-transform:uppercase}

/* Etiketten över rubriken ligger också på ytterrutan. */
.hb-ey .elementor-heading-title{font-size:inherit;line-height:inherit;
  letter-spacing:inherit;text-transform:inherit;font-weight:inherit;color:inherit}

/* Rubrikerna i de ljusa banden. Samma storlek i båda mallarna: tjänstemallen
   använder .hb-rubrik, områdesmallen .hb-sekrubrik. */
.hb-sekrubrik .elementor-heading-title,
.hb-t .hb-rubrik .elementor-heading-title,
.elementor-widget-heading.hb-rubrik .elementor-heading-title{margin:0;font-size:32px;
  line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--t-rubrik)}

/* Loopgridarna ska inte ha Elementors kortgluggar — raderna skiljs åt av
   sina egna linjer, precis som i listan de ersätter. */
.hb-syskonloop .elementor-grid,
.hb-tjansteloop .elementor-grid{gap:0 !important;row-gap:0 !important}
.hb-syskonloop .e-loop-item,
.hb-tjansteloop .e-loop-item{margin:0}
.hb-tjansteloop{max-width:980px}

/* Raden: namn, beskrivning, pil. Tät, med en hårfin linje under. */
.hb-syskon-namn .elementor-heading-title{font-size:19px;line-height:1.35;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--t-rubrik)}
.hb-syskon-namn a,
.hb-syskon-namn .elementor-heading-title a{color:inherit;text-decoration:none;
  border-bottom:0;box-shadow:none}
.hb-syskon-txt{font-size:16px;line-height:1.6;color:var(--t-dampad)}
.hb-syskon-txt p{margin:0;font-size:16px;line-height:1.6;color:var(--t-dampad)}
.hb-syskon-pil .elementor-heading-title{font-size:17px;line-height:1.4;
  color:var(--t-rosa-ljus);text-align:right}
.hb-syskon-pil a{color:inherit;text-decoration:none}
/* Hela raden är klickbar, inte bara namnet. Pilens länk sträcks ut över hela
   raden med ett genomskinligt lager — då blir det tydligt att listan går att
   klicka på, utan att varje ord behöver vara en länk. */
.hb-syskonloop .e-loop-item > .e-con,
.hb-tjansteloop .e-loop-item > .e-con{position:relative;cursor:pointer;
  transition:background-color .18s}
.hb-syskonloop .hb-syskon-pil a::after,
.hb-tjansteloop .hb-syskon-pil a::after{content:"";position:absolute;inset:0;z-index:1}

/* Hela raden tänds när man hovrar den. */
.hb-syskonloop .e-loop-item:hover > .e-con,
.hb-tjansteloop .e-loop-item:hover > .e-con{background:var(--t-bg-avvik)}
.hb-syskonloop .e-loop-item:hover .hb-syskon-namn .elementor-heading-title,
.hb-syskonloop .e-loop-item:hover .hb-syskon-namn a,
.hb-tjansteloop .e-loop-item:hover .hb-syskon-namn .elementor-heading-title,
.hb-tjansteloop .e-loop-item:hover .hb-syskon-namn a{color:var(--t-rosa-ljus)}
.hb-syskonloop .e-loop-item:hover .hb-syskon-pil .elementor-heading-title,
.hb-tjansteloop .e-loop-item:hover .hb-syskon-pil .elementor-heading-title{transform:translateX(4px)}
.hb-syskon-pil .elementor-heading-title{display:block;transition:transform .18s}

/* Länk upp till området, under syskonlistan. */
.hb-omradeslank{margin:22px 0 0;font-size:15px;line-height:1.4;font-weight:500}
.hb-omradeslank a{color:var(--t-rosa-ljus);text-decoration:none}
.hb-omradeslank a:hover{color:#A81F41}
.hb-omradeslank a::after{content:" →"}

/* "Läs hela svaret" i frågelistorna. */
.hb-faq-rad .hb-fraga-lank,.faq-lank{margin:10px 0 0;font-size:15px;line-height:1.4}
.hb-faq-rad .hb-fraga-lank a,.faq-lank a{color:var(--t-rosa-ljus);text-decoration:none;font-weight:500}
.hb-faq-rad .hb-fraga-lank a:hover,.faq-lank a:hover{color:#A81F41}

/* Raden har luft in från kanten så hover-ytan inte klipper i texten. */
.hb-syskonloop .e-loop-item > .e-con,
.hb-tjansteloop .e-loop-item > .e-con{padding-left:12px;padding-right:12px;
  margin-left:-12px;margin-right:-12px}

/* Klassen sitter på widgetens ytterruta, så de responsiva reglerna måste peka
   på rubriken inuti precis som reglerna ovan. Gjorde de inte det stod H1:an
   kvar på 60 px i mobilen. */
@media (max-width:1023px){
  .hb-hero-h1 .elementor-heading-title{font-size:40px;line-height:1.15}
  .hb-hero-h2 .elementor-heading-title{font-size:23px}
  .hb-kontakt-rubrik .elementor-heading-title{font-size:32px}
  .hb-sekrubrik .elementor-heading-title,
  .hb-t .hb-rubrik .elementor-heading-title,
  .elementor-widget-heading.hb-rubrik .elementor-heading-title{font-size:26px}
}

@media (max-width:767px){
  .hb-hero-h1 .elementor-heading-title{font-size:34px}
  .hb-hero-h2 .elementor-heading-title{font-size:20px}
  .hb-kontakt-rubrik .elementor-heading-title{font-size:28px}

  /* Tjänsteraden blir för trång i två kolumner — namn över beskrivning,
     pilen kvar till höger. */
  .hb-syskonloop .e-loop-item > .e-con,
  .hb-tjansteloop .e-loop-item > .e-con{flex-wrap:wrap;align-items:flex-start}
  .hb-syskonloop .hb-syskon-namn,
  .hb-tjansteloop .hb-syskon-namn{width:calc(100% - 44px) !important}
  .hb-syskonloop .hb-syskon-txt,
  .hb-tjansteloop .hb-syskon-txt{width:100% !important;order:3}
  .hb-syskonloop .hb-syskon-pil,
  .hb-tjansteloop .hb-syskon-pil{order:2}
}

/* ============================ responsivt =========================== */

@media (max-width:1023px){
  .hb-hero-inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .hb-hero-ikon{margin-top:0;order:-1}
  .hb-hero-ikon .hb-ikon{width:88px;height:88px}
  .hb-listsek,.hb-textbild,.hb-process,.hb-kontakt{grid-template-columns:minmax(0,1fr);gap:40px}
  .hb-process-topp{position:static}
  .hb-syskon a{grid-template-columns:36px minmax(0,1fr) 24px;gap:6px 20px;align-items:start}
  .hb-syskon-ikon{grid-column:1;grid-row:1 / span 2}
  .hb-syskon-namn{grid-column:2}
  .hb-syskon-txt{grid-column:2}
  .hb-syskon-pil{grid-column:3;grid-row:1 / span 2}
  .hb-steg{grid-template-columns:32px 44px minmax(0,1fr);gap:16px}
  .hb-steg-ikon .hb-ikon{width:36px;height:36px}
  .hb-storikon{justify-self:start}
  .hb-storikon .hb-ikon{width:140px;height:140px}
}

@media (max-width:767px){
  .hb-t{--t-sidpad:24px}
  .hb-hero{padding-left:24px;padding-right:24px}
  .hb-hero h1,.hb-hero--langt h1{font-size:40px}
  .hb-hero h2,.hb-hero--lang-h2 h2{font-size:24px}
  .hb-sek h2{font-size:26px}
  .hb-kontakt h2{font-size:32px}
  .hb-poang p{font-size:22px}
  .hb-hjalte-text{font-size:20px}
  .hb-intro p{font-size:18px}
  .hb-pill{padding:15px 26px;min-height:44px;box-sizing:border-box}
  .hb-hero-ikon .hb-ikon{width:72px;height:72px}
}