/* Vinge Rekrytering. A6 corporate-authority.
   Strikt linjerat, inga kort, inga skuggor, mycket luft.

   KONTRAST (uppmatt, WCAG 2.1 relativ luminans):
     text  #1c2622 pa bas  #f7f7f4 = 14,5:1
     text  #1c2622 pa yta  #e8eeea = 13,2:1
     dov   #4d5a54 pa bas          =  6,7:1   pa yta = 6,1:1
     accent-text #245243 pa bas    =  8,3:1   pa yta = 7,6:1
     accent      #2f6b57 pa bas    =  5,8:1   (racker, men anvands bara till
                                               ytor, linjer och grafik)
     bas   #f7f7f4 pa accent       =  5,8:1
     ljus  #dfeae4 pa accent       =  5,1:1
   All text i accentfarg anvander #245243. */

:root {
  --bas: #f7f7f4;
  --yta: #e8eeea;
  --text: #1c2622;
  --dov: #4d5a54;
  --accent: #2f6b57;
  --accent-text: #245243;
  --pa-accent: #f7f7f4;
  --pa-accent-dov: #dfeae4;
  --linje: #c9d4cd;
  --linje-svag: #dde5e0;
  --rutnat: #d3ded8;

  --display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --brod: Assistant, "Segoe UI", system-ui, sans-serif;

  --ram: 1220px;
  --sido: clamp(20px, 5vw, 64px);
  --luft: clamp(64px, 8.5vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bas);
  color: var(--text);
  font-family: var(--brod);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

@media (max-width: 600px) { body { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  overflow-wrap: break-word;
  /* Frank Ruhl Libre: A-ringen nar 0,915 em, J och g gar 0,215 em under
     baslinjen. Tva rader kraver darfor minst 1,13. 1,24 ger marginal. */
  line-height: 1.24;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.ram {
  max-width: var(--ram);
  margin: 0 auto;
  padding-inline: var(--sido);
}

/* Toppmenyn ar sticky. Utan detta hamnar rubriken under den vid ankarhopp. */
section[id], body[id] { scroll-margin-top: 84px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--text);
  color: var(--bas);
  padding: 14px 20px;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ── Toppmeny ─────────────────────────────────────────────── */

.topp {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bas);
  border-bottom: 1px solid var(--linje);
}

.topp-inre {
  max-width: var(--ram);
  margin: 0 auto;
  padding-inline: var(--sido);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  min-height: 48px;
  align-content: center;
  flex-wrap: wrap;
  text-decoration: none;
  padding-block: 10px;
}
.marke-namn {
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.marke-suffix {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dov);
  font-weight: 600;
  line-height: 1.2;
}

.burgare {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 4px 8px 14px;
  background: none;
  border: 0;
  border-left: 1px solid var(--linje);
  font-family: var(--brod);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
}
.burgare-streck {
  display: block;
  width: 26px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.burgare[aria-expanded="true"] .burgare-streck {
  border-top-color: var(--text);
  border-bottom-color: var(--text);
  height: 2px;
  border-bottom: 0;
  margin-block: 4px;
}

.huvudmeny ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.huvudmeny a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid transparent;
}
.huvudmeny a:hover { border-bottom-color: var(--accent); }
.huvudmeny .meny-cta {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

@media (max-width: 899px) {
  .burgare { display: inline-flex; }
  .huvudmeny {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bas);
    border-bottom: 1px solid var(--linje);
  }
  body.meny-oppen .huvudmeny { display: block; }
  .huvudmeny ul {
    display: block;
    max-width: var(--ram);
    margin: 0 auto;
    padding-inline: var(--sido);
    padding-block: 4px 20px;
  }
  .huvudmeny li + li { border-top: 1px solid var(--linje-svag); }
  .huvudmeny a {
    display: flex;
    width: 100%;
    min-height: 56px;
    font-size: 17px;
    border-bottom: 0;
  }
  .huvudmeny .meny-cta { border-bottom: 0; }
  body.meny-oppen { overflow: hidden; }
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero { padding-top: clamp(28px, 4vw, 52px); padding-bottom: 0; }

.hero-rad {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linje);
}

.hero-kropp {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-block: clamp(30px, 4.5vw, 56px);
  border-bottom: 1px solid var(--linje);
}

.ordmarke {
  /* TERING ar bredaste raden: 3,73 em fore letter-spacing, 3,61 em efter.
     Vid tva spalter ar vansterspalten cirka 0,473 av vyn, vilket ger tak
     13,1vw. 12,4vw ger marginal. Stackad (under 860px) tal den mer. */
  font-size: clamp(3.9rem, 12.4vw, 9.1rem);
  font-weight: 900;
  text-transform: uppercase;
  /* Versaler utan nedstaplar: ink-hojd 0,675 em, ink-djup 0,015 em.
     0,78 em radavstand ger 0,09 em fritt mellan raderna. Ingen kollision. */
  line-height: 0.78;
  letter-spacing: -0.02em;
  padding-top: 0.06em;
}
/* nowrap: ordmarket far brytas dar VI brutit det, aldrig mitt i en rad. */
.ordmarke span { display: block; white-space: nowrap; }
.ordmarke span:nth-child(2) { color: var(--accent-text); }

.hero-rail { padding-bottom: 6px; }

/* Fotot kom som 16:9 dar prompten bad om 4:5. Det visas darfor i sin egen
   proportion i stallet for att beskaras hart pa hojden: rummets tomhet ar hela
   poangen med bilden, ett 4:5-utsnitt hade bara lamnat de tva ryggarna. Ingen
   text ligger ovanpa. */
.hero-bild {
  width: 100%;
  height: auto;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.ingress {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 42ch;
}

.hero-lankar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  background: var(--accent);
  color: var(--pa-accent);
  font-family: var(--brod);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
}
.knapp:hover { background: var(--accent-text); border-color: var(--accent-text); }

.knapp-tunn {
  background: transparent;
  color: var(--accent-text);
  border-color: var(--linje);
}
.knapp-tunn:hover { background: var(--yta); color: var(--accent-text); border-color: var(--accent); }

.fakta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--linje);
}
.fakta-cell {
  padding: clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 34px) clamp(22px, 3vw, 34px) 0;
}
.fakta-cell + .fakta-cell {
  border-left: 1px solid var(--linje);
  padding-left: clamp(16px, 2.4vw, 34px);
}
.fakta dt {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.fakta dd {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dov);
  max-width: 32ch;
}

/* ── Avsnitt ──────────────────────────────────────────────── */

.avsnitt { padding-block: var(--luft); }
.avsnitt-ton { background: var(--yta); }

.avsnitt-topp {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 56px);
  padding-bottom: clamp(34px, 4.5vw, 60px);
}

.ogonbryn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-top: 0.7em;
}
.ogonbryn .nr {
  display: inline-block;
  margin-right: 10px;
  color: var(--dov);
}

.avsnitt-text h2 {
  font-size: clamp(1.85rem, 4.1vw, 3.05rem);
  max-width: 20ch;
}
.ledtext {
  margin-top: 18px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--dov);
  max-width: 60ch;
}

/* ── SIGNATUR: tillsattningstiden ─────────────────────────── */

.tid { border-top: 1px solid var(--text); }

.tid-val {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--linje);
}
.tid-knapp {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  min-height: 56px;
  padding: 10px clamp(14px, 2.2vw, 28px);
  font-family: var(--brod);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dov);
  cursor: pointer;
}
.tid-knapp + .tid-knapp { border-left: 1px solid var(--linje-svag); }
.tid-knapp:hover { color: var(--text); background: var(--yta); }
.tid-knapp[aria-pressed="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
  background: none;
}

.tid-ledtext {
  padding-block: 20px 26px;
  font-size: 15px;
  color: var(--dov);
  max-width: 62ch;
}

.tid-diagram { --ax: 8; }

/* Radens luft ligger i cellerna, inte i raden. Da kan sparet stracka sig
   hela radhojden och rutnatslinjerna blir genomgaende i hela diagrammet. */
.tid-rad {
  --rad-luft: 15px;
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 7rem;
  gap: clamp(14px, 2vw, 30px);
  align-items: stretch;
  border-top: 1px solid var(--linje-svag);
}

.tid-axel {
  --rad-luft: 0px;
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
  padding-block: 9px;
  align-items: end;
}
.tid-axel .tid-spar { align-self: end; }
.tid-axel-ord,
.tid-axel .tid-langd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dov);
}

.tid-etikett {
  min-width: 0;
  padding-block: var(--rad-luft);
  align-self: center;
}
.tid-nr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  margin-right: 10px;
}
.tid-namn {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
}
.tid-not {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dov);
}

.tid-spar {
  position: relative;
  align-self: stretch;
  min-height: 40px;
  min-width: 0;
  background-image: repeating-linear-gradient(
    to right, var(--rutnat) 0 1px, transparent 1px calc(100% / var(--ax)));
  border-right: 1px solid var(--rutnat);
}
.tid-spar::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: 0;
  left: calc(var(--mark) / var(--ax) * 100%);
  width: 2px;
  background: var(--accent);
  opacity: 0.5;
}

.tid-spar-axel {
  align-self: end;
  height: 22px;
  min-height: 0;
  background-image: none;
  border-right: 0;
}
.tid-spar-axel::before { top: 0; bottom: -9px; }

.tid-tick {
  position: absolute;
  bottom: 0;
  left: calc(var(--w) / var(--ax) * 100%);
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--dov);
  line-height: 1;
  padding-left: 5px;
}
.tid-tick-forst { transform: none; padding-left: 0; }
.tid-tick-sist { transform: translateX(-100%); padding-left: 0; padding-right: 1px; }

.tid-bar {
  position: absolute;
  top: 50%;
  left: calc(var(--f) / var(--ax) * 100%);
  width: calc((var(--t) - var(--f)) / var(--ax) * 100%);
  min-width: 9px;
  height: 15px;
  margin-top: -7px;
  background: var(--accent);
  transition: left 0.25s ease, width 0.25s ease;
}

.tid-bar-vantar {
  height: 17px;
  margin-top: -8px;
  background: repeating-linear-gradient(
    45deg, var(--accent) 0 1.5px, transparent 1.5px 7px);
  border: 1px solid var(--accent);
  -webkit-mask-image: linear-gradient(to right, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0 55%, transparent 100%);
}

.tid-langd {
  padding-block: var(--rad-luft);
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--dov);
  text-align: right;
  line-height: 1.35;
  /* Utan detta bryts "1 till 3 man" till fyra rader nar spalten ar auto. */
  white-space: nowrap;
}
.tid-axel .tid-langd { align-self: end; }
.tid-langd-stark {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-text);
}

.tid-rad-vantar .tid-namn { font-family: var(--brod); font-size: 0.97rem; font-weight: 700; }

.tid-slut {
  --rad-luft: 17px;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
}
.tid-slut .tid-namn { font-size: 1.08rem; }

.tid-noter {
  margin-top: 26px;
  display: grid;
  gap: 10px;
  max-width: 74ch;
}
.tid-noter li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dov);
}
.tid-noter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 860px) {
  /* Sparet hamnar under etiketten och kan inte langre bara markorlinjen.
     Da ritar raden den i stallet, over hela sin hojd. Sparet ar lika brett
     som raden har, sa procenten pekar pa samma vecka. */
  .tid-rad {
    --rad-luft: 0px;
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "etikett langd" "spar spar";
    gap: 9px 14px;
    align-items: start;
    padding-block: 17px;
  }
  .tid-rad::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: 0;
    left: calc(var(--mark) / var(--ax) * 100%);
    width: 2px;
    background: var(--accent);
    opacity: 0.5;
  }
  .tid-spar::before { display: none; }

  .tid-etikett { grid-area: etikett; align-self: start; }
  .tid-spar { grid-area: spar; height: 26px; min-height: 0; }
  .tid-langd { grid-area: langd; align-self: start; padding-top: 2px; }

  .tid-axel { padding-block: 10px; align-items: end; }
  .tid-spar-axel { height: 22px; }
  .tid-slut { padding-block: 17px; }
}

/* ── Sa jobbar vi ─────────────────────────────────────────── */

.regler { border-top: 1px solid var(--text); }
.regler li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding-block: clamp(26px, 3.4vw, 40px);
  border-bottom: 1px solid var(--linje);
}
.regel-nr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  padding-top: 0.55em;
}
.regel-kropp h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.26;
}
.regel-kropp p {
  margin-top: 12px;
  color: var(--dov);
  max-width: 66ch;
}

/* ── Specialistomraden ────────────────────────────────────── */

/* Avdelaren. Kallan ar 4:3, slotten 21:9, alltsa beskars den. height: auto
   kravs for att aspect-ratio ska vinna over width/height-attributen. */
.omraden-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 56%;
  margin-bottom: clamp(26px, 3vw, 42px);
}

.omraden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--text);
}
.omrade {
  padding: clamp(24px, 3vw, 36px) clamp(18px, 3vw, 44px) clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--linje);
}
.omraden .omrade:nth-child(even) {
  border-left: 1px solid var(--linje);
  padding-left: clamp(18px, 3vw, 44px);
}
.omrade h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.28;
}
.roller {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.omrade-not {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dov);
  border-top: 1px solid var(--linje-svag);
  padding-top: 11px;
}

/* ── Garanti ──────────────────────────────────────────────── */

.garanti {
  background: var(--accent);
  color: var(--pa-accent);
  padding-block: var(--luft);
}
.ogonbryn-ljus { color: var(--pa-accent-dov); padding-top: 0; }
.ogonbryn-ljus .nr { color: var(--pa-accent-dov); }

.garanti-rubrik {
  margin-top: 20px;
  font-size: clamp(1.85rem, 4.3vw, 3.2rem);
  max-width: 18ch;
  color: var(--pa-accent);
}
.garanti-text {
  margin-top: 20px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--pa-accent-dov);
  max-width: 58ch;
}

.garanti-punkter {
  margin-top: clamp(34px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(247, 247, 244, 0.42);
}
.garanti-punkter > div {
  padding: 24px clamp(14px, 2vw, 28px) 4px 0;
}
.garanti-punkter > div + div {
  border-left: 1px solid rgba(247, 247, 244, 0.42);
  padding-left: clamp(14px, 2vw, 28px);
}
.garanti-punkter dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pa-accent-dov);
}
.garanti-punkter dd {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pa-accent);
}

/* ── Priser ───────────────────────────────────────────────── */

.pristabell { border-top: 1px solid var(--text); }

.pris-rad {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 13rem);
  gap: clamp(14px, 2.4vw, 34px);
  padding-block: clamp(22px, 2.8vw, 32px);
  border-bottom: 1px solid var(--linje);
  align-items: baseline;
}
.pris-huvud {
  padding-block: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dov);
}
.pris-huvud span:last-child { text-align: right; }

.pris-rad h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  line-height: 1.28;
}
.pris-rad > p {
  color: var(--dov);
  font-size: 15px;
  line-height: 1.6;
}
.pris {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  font-weight: 700;
  color: var(--accent-text);
  text-align: right;
  line-height: 1.3;
}
.pris-not {
  display: block;
  font-family: var(--brod);
  font-size: 13px;
  font-weight: 500;
  color: var(--dov);
  margin-top: 4px;
}
.pris-fot {
  margin-top: 26px;
  font-size: 14px;
  color: var(--dov);
  max-width: 66ch;
}

/* ── Omdomen ──────────────────────────────────────────────── */

.omdomen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--text);
}
.omdomen figure {
  margin: 0;
  padding: clamp(28px, 3.4vw, 44px) clamp(18px, 3vw, 44px) clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--linje);
}
.omdomen figure + figure {
  border-left: 1px solid var(--linje);
  padding-left: clamp(18px, 3vw, 44px);
}
.omdomen blockquote { margin: 0; }
.omdomen blockquote p {
  font-family: var(--display);
  font-size: clamp(1.18rem, 2.1vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.omdomen blockquote p::before { content: "\201D"; margin-right: 2px; color: var(--accent-text); }
.omdomen figcaption {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--linje-svag);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Ramen ar 3:4, inte kvadratisk. Portratten kom i olika format, 03 som 1:1 och
   05 som 3:4. I en kvadratisk ram hade 03 inte gatt att beskara alls och
   ansiktet krympt bort. Ett 3:4-utsnitt tar 128 px fran vardera sidan av 03,
   langt utanfor huvudet, och lamnar 05 orort. Da far bada samma huvudstorlek
   utan transform, och de laser som ett par. Kommer nya portratt i samma
   format kan denna regel sta kvar oforandrad. */
.omdome-foto {
  flex: none;
  width: 66px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid var(--linje);
}
.omdome-vem { min-width: 0; }
.omdomen .namn {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.omdomen .titel {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dov);
}

/* ── Kontakt ──────────────────────────────────────────────── */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--text);
  padding-top: clamp(28px, 3.4vw, 44px);
}

.kontakt-fakta dl { display: grid; gap: 0; }
.kontakt-fakta dl > div {
  padding-block: 16px;
  border-bottom: 1px solid var(--linje);
}
.kontakt-fakta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dov);
}
.kontakt-fakta dd {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.5;
}
.kontakt-fakta dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--linje);
  overflow-wrap: anywhere;
}
.kontakt-fakta dd a:hover { border-bottom-color: var(--accent); }

.kontakt-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px clamp(14px, 2vw, 24px);
  align-content: start;
}
.falt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.falt-bred { grid-column: 1 / -1; }
.falt label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dov);
}
.falt input,
.falt textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--bas);
  border: 1px solid var(--linje);
  border-radius: 0;
  font-family: var(--brod);
  font-size: 16px;
  color: var(--text);
}
.falt textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.falt input::placeholder,
.falt textarea::placeholder { color: var(--dov); opacity: 1; }
.falt input:focus,
.falt textarea:focus { border-color: var(--accent); }
.falt input[aria-invalid="true"],
.falt textarea[aria-invalid="true"] { border-color: var(--accent-text); border-width: 2px; }

.falt-skicka {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.form-svar {
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-text);
  font-weight: 600;
  max-width: 40ch;
}

/* ── Sidfot ───────────────────────────────────────────────── */

.fot {
  border-top: 1px solid var(--text);
  padding-block: clamp(38px, 4.5vw, 62px) 26px;
}
.fot-topp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
}
.fot-marke {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.24;
}
.fot-meny ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.fot-meny a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--dov);
  text-decoration: none;
}
.fot-meny a:hover { color: var(--text); }
.fot-kontakt { display: grid; gap: 2px; }
.fot-kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fot-kontakt a:hover { text-decoration: underline; }
.fot-kontakt span {
  display: block;
  padding-top: 8px;
  font-size: 14px;
  color: var(--dov);
}

.fot-rad {
  border-top: 1px solid var(--linje);
  padding-top: 20px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--dov);
}

/* ── Brytpunkter ──────────────────────────────────────────── */

@media (max-width: 1040px) {
  .avsnitt-topp { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
  .pris-rad { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 11rem); }
  .tid-rad { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 6.5rem; }
}

@media (max-width: 860px) {
  .hero-kropp { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; }
  .ordmarke { font-size: clamp(3.9rem, 17vw, 8rem); }
  .hero-rail { padding-bottom: 0; }
  /* Stackat ligger bilden mellan ordmarket och ingressen och ager hela
     spaltbredden. Vid 768 sköt den knappraden 27 px under vecket. Taket kostar
     52 px hojd dar och biter inte alls under 600 px, alltsa aldrig i mobil. */
  .hero-bild { max-width: 600px; }
  .ingress { max-width: none; }
  .fakta { grid-template-columns: minmax(0, 1fr); }
  .fakta-cell { padding-right: 0; padding-block: 22px; border-top: 1px solid var(--linje-svag); }
  .fakta-cell:first-child { border-top: 0; }
  .fakta-cell + .fakta-cell { border-left: 0; padding-left: 0; }
  .fakta dd { max-width: 46ch; }

  .avsnitt-topp { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ogonbryn { padding-top: 0; }
  .avsnitt-text h2 { max-width: 18ch; }

  .omraden { grid-template-columns: minmax(0, 1fr); }
  .omrade { padding-right: 0; }
  .omraden .omrade:nth-child(even) { border-left: 0; padding-left: 0; }

  .garanti-punkter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garanti-punkter > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .garanti-punkter > div:nth-child(3),
  .garanti-punkter > div:nth-child(4) {
    border-top: 1px solid rgba(247, 247, 244, 0.42);
    margin-top: 18px;
  }

  .pris-rad {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titel pris" "text text";
    gap: 6px 16px;
    align-items: baseline;
  }
  .pris-rad h3 { grid-area: titel; }
  .pris-rad > p:not(.pris) { grid-area: text; }
  .pris { grid-area: pris; }
  .pris-huvud { display: none; }

  .omdomen { grid-template-columns: minmax(0, 1fr); }
  .omdomen figure { padding-right: 0; }
  .omdomen figure + figure { border-left: 0; padding-left: 0; }

  .kontakt { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .fot-topp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fot-meny ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .kontakt-form { grid-template-columns: minmax(0, 1fr); }
  .regler li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .regel-nr { padding-top: 0; }
  .garanti-punkter { grid-template-columns: minmax(0, 1fr); }
  .garanti-punkter > div { padding-right: 0; }
  .garanti-punkter > div + div {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(247, 247, 244, 0.42);
    margin-top: 18px;
  }
  .tid-knapp { flex: 1 1 100%; text-align: left; padding-inline: 0; }
  .tid-knapp + .tid-knapp { border-left: 0; border-top: 1px solid var(--linje-svag); }
  .tid-knapp[aria-pressed="true"] { border-bottom-color: transparent; box-shadow: inset 4px 0 0 var(--accent); padding-left: 14px; }
  .tid-knapp:hover { background: none; }
  .hero-lankar .knapp { flex: 1 1 100%; }
  .fot-meny ul { grid-template-columns: minmax(0, 1fr); }
}