/* ==========================================================================
   vaktio-nytt.css — nya block till startsidan. Bygger på fyr.css.
   Kontrollmatris, bristkort, sårbarhetstabell, två vägar in, skärmar.
   ========================================================================== */

/* --- Kontrollmatris (KAP 01) --- */
.matris-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start;padding-top:20px}
@media(max-width:960px){.matris-grid{grid-template-columns:1fr}}
.matris-huvud,.matris-rad{display:grid;grid-template-columns:minmax(112px,1.05fr) minmax(0,2.5fr) 42px;gap:clamp(10px,1.6vw,20px);align-items:center}
.matris-huvud{padding-bottom:9px;border-bottom:1px solid var(--linje)}
.matris-huvud span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--blck-2)}
.matris-huvud span:last-child{text-align:right}
.matris-rad{padding:10px 0;border-bottom:1px solid var(--linje)}
.matris-rad .namn{font-size:13.5px;line-height:1.35}
.matris-rad .celler{display:flex;gap:4px;flex-wrap:wrap}
.matris-rad .antal{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.cell{width:12px;height:12px;border-radius:2px;flex:none;box-sizing:border-box}
.cell.ok{background:var(--gran)}
.cell.brist{background:#8E2A1D}
.cell.okand{background:transparent;border:1px dashed #A9A396}
.cell.ejkord{background:#DCD7C9}
.matris-sida{display:flex;flex-direction:column;gap:18px}
.matris-tal{display:flex;align-items:flex-end;gap:14px}
.matris-tal b{font-family:var(--serif);font-weight:600;font-size:clamp(52px,6.6vw,88px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.matris-tal span{font-size:13.5px;line-height:1.45;color:var(--blck-2);max-width:16ch;padding-bottom:7px}
.matris-tecken{display:flex;flex-direction:column;gap:9px;padding-top:17px;border-top:1px solid var(--linje)}
.tecken{display:grid;grid-template-columns:16px minmax(0,1fr) 26px;gap:10px;align-items:baseline}
.tecken .prov{width:13px;height:13px;border-radius:2px;margin-top:3px;box-sizing:border-box}
.tecken .txt{font-size:13px;line-height:1.45;color:var(--blck-2)}
.tecken .n{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}

/* --- Figurhuvud utan "FIG."-etiketter --- */
.figrad{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1.5px solid var(--black)}
.figrad .rubrik{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--black)}
.figrad .meta{font-family:var(--mono);font-size:11px;color:var(--blck-2)}

/* --- Bristkort (KAP 03) --- */
.brist-kort{margin-top:20px;background:#fff;border:1px solid var(--linje-mork);border-radius:8px;overflow:hidden}
.brist-topp{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 20px;background:#F9F7F1;border-bottom:1px solid #E3E2DC}
.brist-topp .id{font-family:var(--mono);font-size:11.5px;color:var(--blck-2)}
.brist-topp .konf{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--blck-2)}
.mrk{font-size:11.5px;font-weight:600;border-radius:3px;padding:2px 7px;white-space:nowrap}
.mrk.kritisk{color:#8E2A1D;background:#FBEDEA;border:1px solid #EDD0CA}
.mrk.atgard{color:#8A5300;background:#FBF3E4;border:1px solid #E9D9B4}
.brist-kropp{padding:20px;display:flex;flex-direction:column;gap:16px}
.brist-kropp h3{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.2vw,25px);line-height:1.2;letter-spacing:-.01em}
.bit{border:1px solid #E3E2DC;border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.bit.varfor{border-color:#E0C4BE}
.bit .etikett{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--blck-2)}
.bit.varfor .etikett{color:#8E2A1D}
.bit p{font-size:13.5px;line-height:1.62;color:#2B302D}
.doklank{display:flex;align-items:baseline;gap:10px;border:1px solid #E3E2DC;border-radius:5px;padding:10px 12px;text-decoration:none;transition:background-color .18s var(--ease)}
.doklank:hover{background:#FAF9F5}
.doklank .t{flex:1;font-size:13px;font-weight:500;color:var(--gran);text-decoration:underline;text-underline-offset:2px}
.doklank .k{font-family:var(--mono);font-size:10.5px;color:var(--blck-2);white-space:nowrap}
.bit .not{font-size:12px;line-height:1.5;color:var(--blck-2)}
.efter{background:#F3F6F8;border:1px solid #D9E3E9;border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.efter .etikett{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#35566B}
.efter .steg{display:flex;align-items:baseline;gap:9px}
.efter .steg b{font-family:var(--mono);font-size:11px;font-weight:500;color:#35566B;flex:none}
.efter .steg span{font-size:13px;line-height:1.55;color:#274A5C}
.brist-fot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 20px;background:#F9F7F1;border-top:1px solid #E3E2DC}
.knapp-prim{font-size:13.5px;font-weight:600;color:#fff;background:var(--gran);border:1px solid var(--gran-djup);border-radius:5px;padding:9px 14px}
.knapp-sek{font-size:13.5px;font-weight:500;color:#2B302D;background:#fff;border:1px solid var(--linje-mork);border-radius:5px;padding:9px 13px}

/* --- Sårbarheter (KAP 04) --- */
.cve-tabell{width:100%;border-collapse:collapse;border-top:1.5px solid var(--black);margin-top:clamp(30px,5vh,50px)}
.cve-tabell th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blck-2);font-weight:500;text-align:left;padding:10px 0;border-bottom:1px solid var(--linje)}
.cve-tabell td{padding:14px 0;border-bottom:1px solid var(--linje);font-size:13.5px;vertical-align:middle}
.cve-tabell td.id{font-family:var(--mono);font-size:12.5px}
.cve-tabell td.kalla{text-align:right}
.cve-tabell td.kalla a{font-family:var(--mono);font-size:11px;color:var(--gran);white-space:nowrap}
.lage{font-size:11.5px;font-weight:600;border-radius:3px;padding:2px 7px;white-space:nowrap}
.lage.aktiv{color:#8E2A1D;background:#FBEDEA;border:1px solid #EDD0CA}
.lage.rattning{color:#8A5300;background:#FBF3E4;border:1px solid #E9D9B4}
.lage.okand{color:#3A453F;background:transparent;border:1px dashed #A9A396}
/* Pa telefon blir varje rad ett stycke: forsta cellen ar rubrik, ovriga
   cellar far synlig etikett fran data-etikett eftersom thead ar gomd.
   Etikettspalten ar fast, sa vardena star i pelare hela tabellen ner.
   Tidigare regel lag pa "1fr auto" och radbrot tredje och fjarde cellen. */
@media(max-width:760px){
  .cve-tabell thead{display:none}
  .cve-tabell tbody,.cve-tabell tr,.cve-tabell td{display:block}
  .cve-tabell tr{padding:15px 0;border-bottom:1px solid var(--linje)}
  .cve-tabell td{border:0;padding:0}
  .cve-tabell tr>td:first-child{font-size:15px;font-weight:600;color:var(--black);margin-bottom:8px}
  .cve-tabell td[data-etikett]{display:grid;grid-template-columns:8.6em 1fr;gap:12px;
    align-items:baseline;padding:3px 0;font-size:13.5px}
  .cve-tabell td[data-etikett]::before{content:attr(data-etikett);font-family:var(--mono);
    font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--blck-2)}
  .cve-tabell td.kalla{text-align:left}
  .cve-tabell td.bedom{color:var(--blck-2)}
}

/* --- Två vägar in (KAP 05) --- */
.vagar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,28px);margin-top:clamp(30px,5vh,52px)}
@media(max-width:860px){.vagar{grid-template-columns:1fr}}
.vag{display:flex;flex-direction:column;gap:14px;padding:26px;background:#fff;border:1px solid var(--linje-mork);border-radius:8px}
.vag h3{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.3vw,28px);line-height:1.15;letter-spacing:-.01em}
.vag p{font-size:14.5px;line-height:1.66;color:var(--blck-2)}
.vag ul{list-style:none;margin:0;padding:15px 0 0;border-top:1px solid #E3E2DC;display:flex;flex-direction:column;gap:8px}
.vag li{display:flex;align-items:baseline;gap:10px;font-size:13.5px;line-height:1.55;color:var(--blck-2)}
.vag li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gran);flex:none;margin-top:7px}
.vag .lank3{align-self:flex-start;font-size:14.5px;font-weight:600;color:var(--gran);margin-top:6px}

/* --- Skärmarna (KAP 06) --- */
.skarmar{display:flex;flex-direction:column;gap:clamp(30px,5vh,54px);margin-top:clamp(28px,4.6vh,48px)}
.skarm{display:flex;flex-direction:column;gap:13px}
.skarm figcaption{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid var(--linje-mork)}
.skarm figcaption b{font-family:var(--serif);font-size:19px;font-weight:600;flex:none}
.skarm figcaption span{flex:1;min-width:280px;font-size:14px;line-height:1.6;color:var(--blck-2)}
.skarm .ram{background:#fff;border:1px solid var(--linje-mork);border-radius:7px;padding:10px}
.skarm img{display:block;width:100%;height:620px;object-fit:cover;object-position:top center;border:1px solid #E3E2DC;border-radius:3px}
@media(max-width:1080px){.skarm img{height:480px}}
@media(max-width:700px){.skarm img{height:340px}}

/* --- Pilot: en signerad rad hos Vakten --- */
.pilot{margin-top:clamp(40px,6vh,66px);padding-top:26px;border-top:1px solid rgba(208,138,47,.5);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,44px);align-items:start}
@media(max-width:860px){.pilot{grid-template-columns:1fr}}
.pilot h3{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.4vw,29px);line-height:1.2;letter-spacing:-.01em;color:var(--black)}
.pilot .kol{display:flex;flex-direction:column;gap:12px}
.pilot p{font-size:15px;line-height:1.66;color:var(--blck-2);max-width:56ch}
.pilot .sign{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--black)}
.pilot a{align-self:flex-start;font-size:15px;font-weight:600;color:var(--gran);margin-top:4px}

/* --- Hero: allt ska rymmas på första skärmen --- */
.natt-inner{min-height:calc(100svh - 88px);padding-bottom:6vh}
.natt h1{font-size:clamp(36px,5.4vw,80px);line-height:1.04;max-width:17ch;margin-bottom:22px}
.natt .ingress{font-size:clamp(15px,1.4vw,17px);line-height:1.6;max-width:54ch;margin-bottom:26px}
.natt-fakta{margin-top:32px;padding-top:18px;gap:28px}
@media(max-height:760px){
  .natt h1{font-size:clamp(32px,4.4vw,62px);margin-bottom:16px}
  .natt .ingress{font-size:15.5px;margin-bottom:20px}
  .natt-fakta{margin-top:22px;padding-top:14px}
  .natt-inner{padding-bottom:4vh}
}

/* --- NIS2: tio områden, tre kolumner --- */
.lagtabell{margin-top:clamp(30px,5vh,50px);border-top:1.5px solid var(--black)}
.laghuvud,.lagrad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);gap:clamp(14px,2.4vw,34px)}
.laghuvud{padding:10px 0;border-bottom:1px solid var(--linje)}
.laghuvud span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blck-2)}
.lagrad{padding:20px 0;border-bottom:1px solid var(--linje);align-items:start}
.lagpunkt{display:flex;flex-direction:column;gap:5px}
.lagpunkt .art{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gran)}
.lagpunkt .omr{font-size:15px;font-weight:600;line-height:1.35;color:var(--black);max-width:26ch}
.lagcell p{font-size:13.5px;line-height:1.6;color:var(--blck-2);max-width:44ch}
.lagcell .et{display:none}
.lagcell.lagslut{padding-left:0}
.lagcell.lagslut p{color:#5C6560}
@media(max-width:900px){
  .laghuvud{display:none}
  .lagrad{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .lagcell .et{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blck-2);margin-bottom:4px}
  .lagcell.lagslut{padding-left:0}
  .lagpunkt .omr{max-width:none}
}

/* --- Hero: vad Vaktio är, ovanför rubriken --- */
.natt-over{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--mint-dov);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(154,214,198,.18);display:inline-block}
@media(max-width:700px){.natt-over{font-size:10px;letter-spacing:.14em;margin-bottom:16px}}

/* --- Indexmenyn: två vägar ut ur menyn --- */
.index-knappar{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.index-knappar .plattform-knapp{margin-top:0}
.plattform-knapp.andra{background:transparent;color:var(--papper);border:1px solid rgba(154,214,198,.32)}
.plattform-knapp.andra:hover{background:transparent;border-color:var(--mint);color:var(--mint)}

/* --- Produktsidan: funktioner i tre grupper --- */
.funk-grupp{margin-top:clamp(34px,5.5vh,58px)}
.funk-grupp:first-of-type{margin-top:clamp(28px,4.6vh,46px)}
.fg-huvud{padding-bottom:14px;border-bottom:1.5px solid var(--black)}
.fg-huvud h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.5vw,30px);line-height:1.15;letter-spacing:-.012em;color:var(--black)}
.fg-huvud p{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--blck-2);max-width:62ch}
.funk-grupp .funk-rad h4{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.008em;color:var(--black);margin:0}
.funk-grupp .funk-rad{padding:18px 0;border-bottom:1px solid var(--linje);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.funk-grupp .funk-rad p{font-size:14px;line-height:1.65;color:var(--blck-2);max-width:78ch;margin:0}
.funk-grupp .funk-rad .pro{align-self:flex-start}

/* --- NIS2-sidan: de tio omradena --- */
.omrlista{margin-top:clamp(26px,4.4vh,44px);border-top:1.5px solid var(--black);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,48px)}
@media(max-width:760px){.omrlista{grid-template-columns:1fr}}
.omrrad{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--linje)}
.omrrad .art{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gran);flex:none;min-width:52px}
.omrrad .namn{font-size:15px;line-height:1.4;color:var(--black)}

/* --- Sidhuvud pa undersidor --- */
.sidhuvud{background:var(--papper);padding:clamp(56px,9vh,104px) 0 clamp(30px,5vh,52px);border-bottom:1px solid var(--linje)}
.sidhuvud h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,64px);line-height:1.06;letter-spacing:-.018em;color:var(--black);max-width:19ch}
.sidhuvud h1 em{font-style:italic;color:var(--gran)}
.sidhuvud .ingress{margin-top:20px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.62;color:var(--blck-2);max-width:60ch}
.sidhuvud .rad{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.sidhuvud .lank{color:var(--gran);border-bottom:1px solid rgba(15,92,74,.34)}
.sidhuvud .lank:hover{border-bottom-color:var(--gran)}

/* --- Inga lodrata streck i loptexten --- */
.fotnot{padding-left:0;border-left:0}
.utdrag{border-left:0}
.legal .box{border-left-width:1px!important;border-left-color:var(--linje-mork)!important}

/* --- Hero: kallan vi laser just nu --- */
/* Reserverad bredd, men aldrig radbrytning. Ordet "sårbarhetslistor" ar med
   letter-spacing bredare an 17.5ch och bröts inuti rutan. En inline-block
   ligger i linje med sin SISTA rad, sa den forsta raden hoppade upp ovanfor
   textraden. min-width later langa ord vaxa i stallet for att brytas. */
.natt-over .las{display:inline-block;min-width:17.5ch;white-space:nowrap;text-align:left;color:var(--mint)}
.natt-over .mrk-blink{display:inline-block;width:7px;height:11px;margin-left:3px;background:var(--mint);vertical-align:baseline;animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.natt-over .mrk-blink{display:none}}
@media(max-width:520px){.natt-over{display:block}.natt-over .las{min-width:0}}
/* Under ~380px ryms bara vissa ord pa samma rad, sa styckets hojd hoppade
   mellan 31 och 48px varje gang ordet byttes. Egen rad at ordet ger konstant
   hojd oavsett langd. */
@media(max-width:380px){.natt-over .las{display:block;margin-top:3px}}

.fot-bygge{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:rgba(195,210,202,.5)}

/* --- Fyra saker vi hade fel om --- */
.fel{margin-top:clamp(24px,4vh,40px);border-top:1.5px solid var(--black)}
.fel-post{padding:22px 0;border-bottom:1px solid var(--linje);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(14px,2.6vw,36px);align-items:start}
@media(max-width:820px){.fel-post{grid-template-columns:1fr;gap:10px}}
.fel-post h3{font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.9vw,22px);line-height:1.25;letter-spacing:-.008em;color:var(--black);max-width:24ch;text-decoration:line-through;text-decoration-color:rgba(142,42,29,.45);text-decoration-thickness:1.5px;text-underline-offset:2px}
.fel-var{font-size:13.5px;line-height:1.62;color:var(--blck-2)}
.fel-nu{grid-column:2;font-size:13.5px;line-height:1.62;color:var(--black);margin-top:10px;padding-left:14px;border-left:2px solid var(--gran)}
@media(max-width:820px){.fel-nu{grid-column:1}}
.fel-nu .et{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gran);margin-bottom:4px}

/* ==========================================================================
   Detaljerna. Inget av det har syns forst, men allt marks.
   ========================================================================== */

/* 1. Inga ensamma ord sist i en rubrik. Webblasaren far balansera raderna. */
h1, h2, h3, .fg-huvud h3, .vag h3, blockquote {
  text-wrap: balance;
}
p, li, .ing, .ingress, .fotnot, .betyd {
  text-wrap: pretty;
}

/* 2. Hoppa till ett avsnitt utan att den fasta navigeringen taeker rubriken. */
:target,
section[id],
[id^="kap"] {
  scroll-margin-top: 92px;
}

/* 3. Markerad text far husets farger, inte webblasarens bla. */
::selection {
  background: #0F5C4A;
  color: #FFFFFF;
}
.natt ::selection,
.natt2 ::selection,
.slut ::selection,
.botten ::selection {
  background: #9AD6C6;
  color: #04120E;
}

/* 4. Siffror i tabeller och matriser ska sta i pelare, inte dansa. */
.cve-tabell td, .cve-tabell th,
.matris-rad .antal, .tecken .n, .matris-tal b,
.omrrad .art, .lagpunkt .art, .brist-topp .id,
.fot-bygge, .natt-fakta b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 5. Lankar i loptext: understrykningen ska ligga under bokstaven, inte i den. */
.brod a, .ing a, .fotnot a, .betyd a, .svar a, .lagcell a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(15, 92, 74, .38);
  transition: text-decoration-color .16s var(--ease, ease);
}
.brod a:hover, .ing a:hover, .fotnot a:hover, .betyd a:hover, .svar a:hover, .lagcell a:hover {
  text-decoration-color: var(--gran, #0F5C4A);
}

/* 6. Citatets inledande tecken hanger ut i marginalen, som i tryck. */
.citat-spread blockquote {
  text-indent: -.42em;
}

/* 7. Ljuskaglan ar en bild, inte text. Den ska inte kunna markeras. */
#fyr, #fyr2 {
  user-select: none;
  -webkit-user-select: none;
}

/* 8. Rorelse pa hover: en pixel racker. Fyra ser billigt ut. */
.doklank, .fraga summary, .vag, .skarm .ram {
  transition: transform .18s var(--ease, ease), border-color .18s var(--ease, ease), background-color .18s var(--ease, ease);
}
.vag:hover, .skarm .ram:hover {
  transform: translateY(-1px);
  border-color: #C9C8C0;
}

/* ==========================================================================
   Utskrift. Nagon kommer att skriva ut NIS2-sidan och lagga den pa ett bord.
   Da ska den se ut som ett dokument, inte som en webbsida med svart bakgrund.
   ========================================================================== */
/* ==========================================================================
   MOBIL: rattningar for telefon. Ingenting i denna sektion ror datorvyn
   utom .vagar.tre, som ar den gamla inline-stilen flyttad till en klass.
   ========================================================================== */
.vagar.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.vagar.tre{grid-template-columns:1fr}}

@media(max-width:760px){
  /* Langa sammansattningar far brytas i stallet for att spranga sidbredden */
  .legal h1,.legal h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .natt h1,.kap h2,.vag h3,.fel-post h3{overflow-wrap:break-word}

  /* Juridiska tabeller staplas rad for rad i stallet for att kraeva sidoskroll */
  .legal table{display:block;border-top:1.5px solid var(--linje-mork)}
  .legal table thead{display:none}
  .legal table tbody{display:block}
  .legal table tr{display:block;padding:16px 0;border-bottom:1px solid var(--linje)}
  .legal table td,.legal table tbody th{display:block;border:0!important;padding:0;background:transparent!important}
  .legal table tbody th,.legal table td:first-child{text-align:left;font-weight:600;color:var(--black)}
  .legal table tr>*+*{margin-top:7px;font-size:14px;line-height:1.6;color:var(--blck-2)}

  /* Minsta lasbara storlek pa telefon: mikrotypografin lyfts till 11px */
  .matris-huvud span,.laghuvud span,.lagcell .et,.fel-nu .et,.cve-tabell th,
  .bit .etikett,.efter .etikett,.fot-kolumner h4,.fot-bygge,.ki .r,
  .tabell th,.ss .not,.funk-rad .pro,.brist-topp .konf,.doklank .k{font-size:11px}

  /* Fotens lankar blir tummvanliga; hojden pa datorn ar orord */
  .fot-kolumner a{padding:6px 0;margin-bottom:2px}

  /* Traeffytor pa 44px for nav och stangknapp. Negativ marginal aeter upp
     paddingen sa att inget flyttar sig optiskt. */
  .meny-knapp{padding:14px 10px;margin:-14px -10px}
  .ordmarke{padding:13px 0;margin:-13px 0}
  /* Vaxande traeffyta dras av fran top/right i stallet for negativ
     marginal, annars hamnar knappen utanfor skarmen. */
  .index-stang{padding:14px;top:12px;right:calc(clamp(20px,4vw,56px) - 14px)}
}

/* Indexmenyn pa liten skarm: hogerspalten var helt gomd, vilket lamnade
   Insikter, Om oss och Sakerhet utan nagon vag in. Den visas nu som en
   andra rad under kapitlen, och menyn far egen vertikal skroll. */
@media(max-width:820px){
  .index{overflow-y:auto;overscroll-behavior:contain;
    grid-template-rows:max-content max-content;align-content:start}
  /* Menyn skrollar nu, sa en absolut placerad stangknapp aker ur bild och
     lamnar telefonen utan vag ut. Fast till vyn i stallet, med egen
     bakgrundsplatta sa den ar lasbar over texten som glider under. */
  .index-stang{position:fixed;z-index:2;background:var(--natt)}
  .index-vanster{padding-top:clamp(76px,11vh,110px);padding-bottom:26px}
  .index-hoger{display:flex!important;border-left:0;
    border-top:1px solid rgba(154,214,198,.14);
    padding:26px clamp(24px,5vw,72px) calc(34px + env(safe-area-inset-bottom));
    gap:26px}
  .index-sidor{display:flex;flex-direction:column}
  .index-sidor br{display:none}
  .index-sidor a{padding:11px 0;line-height:1.5}
  .index-knappar{margin-top:30px}
}

@media print {
  @page { margin: 18mm 16mm; }

  html, body { background: #FFFFFF !important; color: #151A17 !important; }

  /* Skarmens mobler hor inte hit. */
  .natt, .natt2, .slut, .remsa, .progress, .scrollhint, .index, nav,
  #fyr, #fyr2, .plattform-knapp, .index-knappar, .cta, .lank, .lank3,
  .brist-fot, .kform, .fot-kolumner {
    display: none !important;
  }

  .rapport, .kap, .ark, .sidhuvud { background: #FFFFFF !important; padding: 0 !important; }
  .kap { margin-bottom: 12mm; }
  .wrap { max-width: none !important; padding: 0 !important; }

  h1 { font-size: 24pt; }
  h2 { font-size: 16pt; break-after: avoid; }
  h3, h4 { font-size: 12pt; break-after: avoid; }
  p, td, th, li { font-size: 10pt; line-height: 1.45; }

  .kap, .lagrad, .fel-post, .funk-rad, .matris-rad, .brist-kort, figure, tr {
    break-inside: avoid;
  }

  /* Adressen bakom en lank ar det enda som betyder nagot pa papper. */
  .brod a[href^="http"]::after, .ing a[href^="http"]::after,
  .fotnot a[href^="http"]::after, .doklank::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #5C6560;
    word-break: break-all;
  }

  .lagcell.lagslut { border-left: 1pt solid #B26B1D; }
  .fel-post h3 { text-decoration: line-through; }

  .botten { border-top: 1pt solid #151A17; padding-top: 4mm; }
  .fot-bas span { display: block; font-size: 8pt; color: #5C6560; }
}