/* ==========================================================================
   WEBBMAKARN — 03 LAYOUT
   Tolvkolumnsraster med avsiktlig asymmetri. Ingen sektion delar
   kolumnindelning med den föregående — det är det som bryter mallkänslan.
   ========================================================================== */

.ram {
  max-width:var(--behallare);
  margin-inline:auto;
  padding-inline:var(--kant);
}
.ram-bred { max-width:1680px; margin-inline:auto; padding-inline:var(--kant); }

/* -- Rastret ------------------------------------------------------------- */
.rutnat {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2.4vw,40px);
  row-gap:var(--r-5);
}
@media (max-width:980px) { .rutnat { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:620px) { .rutnat { grid-template-columns:1fr; row-gap:var(--r-4); } }

/* Kolumnspann — används direkt i markup för asymmetrin */
.k1-4   { grid-column:1 / 5; }
.k1-5   { grid-column:1 / 6; }
.k1-6   { grid-column:1 / 7; }
.k1-7   { grid-column:1 / 8; }
.k1-8   { grid-column:1 / 9; }
.k1-9   { grid-column:1 / 10; }
.k1-11  { grid-column:1 / 12; }
.k1-13  { grid-column:1 / -1; }
.k2-8   { grid-column:2 / 9; }
.k3-9   { grid-column:3 / 10; }
.k4-13  { grid-column:4 / -1; }
.k5-13  { grid-column:5 / -1; }
.k6-13  { grid-column:6 / -1; }
.k7-13  { grid-column:7 / -1; }
.k8-13  { grid-column:8 / -1; }
.k9-13  { grid-column:9 / -1; }
.k10-13 { grid-column:10 / -1; }

@media (max-width:980px) {
  .k1-4,.k1-5,.k1-6,.k1-7,.k1-8,.k1-9,.k1-11,.k1-13,
  .k2-8,.k3-9,.k4-13,.k5-13,.k6-13,.k7-13 { grid-column:1 / -1; }
  .k8-13,.k9-13,.k10-13 { grid-column:1 / -1; }
}

/* -- Sektioner ----------------------------------------------------------- */
.sektion { padding-block:var(--r-9); position:relative; }
.sektion-tat  { padding-block:var(--r-7); }
.sektion-vid  { padding-block:var(--r-10); }
.sektion-ljus { background:var(--yta); }
.sektion-mork { background:var(--mork); color:var(--mork-text); }
.linje-topp   { border-top:1px solid var(--regel); }

@media (max-width:980px) {
  .sektion      { padding-block:var(--r-7); }
  .sektion-tat  { padding-block:var(--r-6); }
  .sektion-vid  { padding-block:var(--r-8); }
}

/* Sektionshuvud — etikett i vänsterkanten, rubrik förskjuten inåt */
.sekhuvud { display:grid; gap:var(--r-3); }
.sekhuvud .etikett { margin-bottom:var(--r-1); }

/* -- Flöden -------------------------------------------------------------- */
.flode   { display:grid; gap:var(--r-3); }
.flode-s { display:grid; gap:var(--r-2); }
.flode-l { display:grid; gap:var(--r-5); }
.flode-xl{ display:grid; gap:var(--r-7); }
.rad     { display:flex; gap:var(--r-2); flex-wrap:wrap; align-items:center; }
.mellan  { display:flex; justify-content:space-between; gap:var(--r-4); flex-wrap:wrap; align-items:baseline; }

/* -- Den mörka sektionens färgroller ------------------------------------- */
.sektion-mork h1,.sektion-mork h2,.sektion-mork h3,.sektion-mork h4 { color:var(--mork-text); }
.sektion-mork p { color:var(--mork-gra); }
.sektion-mork strong { color:var(--mork-text); }
.sektion-mork .etikett { color:var(--mork-gra); }
.sektion-mork .etikett::before { background:var(--mork-accent); }
.sektion-mork .nummer { color:var(--mork-gra); }
.sektion-mork .stor { color:var(--mork-text); }
.sektion-mork :focus-visible { outline-color:var(--mork-accent); }