/* =========================================================================
   Felles stilsett for undersidene: Pointe du Hoc, La Cambe, Chateau du Molay.
   Samme fargetokens som hovedsida (index.html), men bare de komponentene
   undersidene faktisk bruker. Hovedsida har sitt eget stilsett innebygd og
   bruker IKKE denne fila.
   ========================================================================= */
/* Denne sida har sitt eget stilsett, med samme fargetokens som hovedsida.
   Den trenger bare en brøkdel av komponentene der, så den er holdt kort. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0d1117;--bg-2:#141a22;--bg-3:#1b222c;
  --ink:#ece7dc;--ink-2:#b3bcc7;--ink-3:#7d8895;
  --gold:#c9a227;--gold-lys:#e6c860;--rod:#c0392b;--bla:#4a7fa8;
  --linje:rgba(236,231,220,.13);--linje-sterk:rgba(236,231,220,.26);
  --serif:'Spectral',Georgia,serif;--sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --maks:660px;--pad:20px;--r:14px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--gold-lys);text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.18;margin:0}
:focus-visible{outline:2px solid var(--gold-lys);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maks);margin:0 auto;padding:0 var(--pad)}
.seksjon{padding:60px 0}
.seksjon+.seksjon{border-top:1px solid var(--linje)}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
h2{font-size:clamp(28px,7.4vw,38px);margin:0 0 18px}
h3{font-size:clamp(20px,5vw,24px);margin:0 0 10px}
.ingress{font-size:19px;color:var(--ink-2);line-height:1.6}
p{margin:0 0 17px}
.seksjon p:last-child{margin-bottom:0}
.dempet{color:var(--ink-3);font-size:14.5px;line-height:1.6}
strong{color:var(--ink)}

.js .vis{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.js .vis.inne{opacity:1;transform:none}

/* ---------- Tilbakeknappen: alltid synlig ---------- */
#tilbake-hoved{
  position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;z-index:95;
  display:flex;align-items:center;gap:9px;padding:11px 17px 11px 13px;
  border-radius:999px;background:rgba(20,26,34,.94);backdrop-filter:blur(14px);
  border:1px solid var(--linje-sterk);color:var(--ink);
  font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 6px 24px rgba(0,0,0,.55);transition:.2s;
  max-width:calc(100vw - 24px);
}
#tilbake-hoved:hover{border-color:var(--gold);background:rgba(27,34,44,.96)}
#tilbake-hoved .pil{color:var(--gold);font-size:16px;line-height:1;flex:none}
#tilbake-hoved .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Forside ---------- */
#topp{min-height:96svh;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;padding-bottom:46px}
#topp .bakgrunn{position:absolute;inset:0;z-index:0}
#topp .bakgrunn img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
#topp .slor{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,17,23,.8) 0%,rgba(13,17,23,.3) 30%,rgba(13,17,23,.9) 76%,var(--bg) 100%)}
#topp .innhold{position:relative;z-index:2}
#topp .sted{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
#topp h1{font-size:clamp(42px,12vw,72px);font-weight:300;line-height:1;
  letter-spacing:-.02em;margin:0 0 16px;text-shadow:0 4px 40px rgba(0,0,0,.7)}
#topp .under{font-size:17px;color:var(--ink-2);max-width:34ch;margin:0}

/* ---------- Bilder ---------- */
figure{margin:26px 0}
figure img{border-radius:var(--r);border:1px solid var(--linje);cursor:zoom-in}
figcaption{font-size:13px;color:var(--ink-3);line-height:1.5;margin-top:9px}
figcaption b{color:var(--ink-2)}
.full{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}
.full img{border-radius:0;border-left:0;border-right:0}
.full figcaption{padding:0 var(--pad)}

/* ---------- Tidslinje ---------- */
.tidslinje{margin:26px 0 0;position:relative;padding-left:26px}
.tidslinje::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,var(--linje-sterk) 8%,var(--linje-sterk) 92%,transparent)}
.hendelse{position:relative;padding-bottom:24px}
.hendelse:last-child{padding-bottom:0}
.hendelse::before{content:"";position:absolute;left:-25px;top:7px;width:11px;height:11px;
  border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.hendelse.merket::before{background:var(--gold);box-shadow:0 0 0 5px rgba(201,162,39,.18)}
.hendelse .nar{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px}
.hendelse .hva{font-family:var(--serif);font-size:19px;margin-bottom:5px;line-height:1.3}
.hendelse p{font-size:14.8px;color:var(--ink-2);margin:0;line-height:1.6}

/* ---------- Merknadsbokser ---------- */
.boks{background:var(--bg-2);border:1px solid var(--linje);border-left:2px solid var(--bla);
  border-radius:0 11px 11px 0;padding:17px 18px;margin:24px 0;
  font-size:14.8px;color:var(--ink-2);line-height:1.62}
.boks .tit{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bla);margin-bottom:8px}
.boks.gull{border-left-color:var(--gold)}
.boks.gull .tit{color:var(--gold)}
.boks.rod{border-left-color:var(--rod)}
.boks.rod .tit{color:var(--rod)}
.boks p:last-child{margin-bottom:0}
.boks ul{margin:10px 0 0;padding-left:20px}
.boks li{margin-bottom:7px}

/* ---------- Store tall ---------- */
.tallrad{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:26px 0 0}
.tallkort{background:var(--bg-2);border:1px solid var(--linje);border-radius:var(--r);
  padding:18px 16px;position:relative;overflow:hidden}
.tallkort::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);opacity:.55}
.tallkort .t{font-family:var(--serif);font-size:clamp(28px,7.5vw,36px);line-height:1;margin-bottom:7px}
.tallkort .e{font-size:13.5px;color:var(--ink-2);line-height:1.42}

/* ---------- Illustrasjon ---------- */
.illu{margin:26px 0;background:var(--bg-2);border:1px solid var(--linje);
  border-radius:var(--r);padding:18px 14px 14px}
.illu svg{width:100%;height:auto;display:block}
.illu .tekst{font-size:13px;color:var(--ink-3);line-height:1.55;margin:14px 4px 0;
  padding-top:13px;border-top:1px solid var(--linje)}

/* ---------- Snakkeboble som spretter fram under skrolling ----------
   Styres av js/underside.js: klassen .synlig legges på og tas av.
   Nedtellingsstreken nederst viser at boblen forsvinner av seg selv;
   varigheten settes fra JavaScript i --hk-tid, så de to alltid stemmer. */
#hopp-knapp{
  position:fixed;right:16px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));
  z-index:96;display:flex;align-items:center;gap:10px;
  padding:14px 21px 17px;border-radius:24px 24px 6px 24px;
  max-width:calc(100vw - 32px);
  background:var(--rod);color:#fff;
  font-size:16.5px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 12px 36px rgba(0,0,0,.72);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.3) translateY(40px);transform-origin:100% 100%;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s,background .2s;
}
#hopp-knapp.synlig{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .18s ease,transform .5s cubic-bezier(.3,1.7,.5,1),visibility 0s,background .2s;
}
/* Halen på boblen */
#hopp-knapp::before{
  content:"";position:absolute;right:0;bottom:-11px;width:20px;height:14px;
  background:var(--rod);clip-path:polygon(0 0,100% 0,100% 100%);
}
#hopp-knapp:hover,#hopp-knapp:hover::before{background:#d1452f}
#hopp-knapp .hk-pil{font-size:17px;line-height:1;flex:none}
#hopp-knapp .hk-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hopp-knapp .hk-tid{
  position:absolute;left:18px;right:18px;bottom:7px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.25);overflow:hidden;
}
#hopp-knapp .hk-tid::after{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.85);
  transform-origin:0 50%;transform:scaleX(0);
}
#hopp-knapp.synlig .hk-tid::after{animation:hk-nedtelling var(--hk-tid,7s) linear forwards}
@keyframes hk-nedtelling{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  #hopp-knapp,#hopp-knapp.synlig{transform:none;transition:opacity .2s,visibility 0s}
}
/* Målet for boblen: ikke gjem det bak «Tilbake til oversikten»-knappen */
#diekmann{scroll-margin-top:86px}

/* ---------- Personblokk med portrett ---------- */
.person-blokk{
  display:flex;gap:16px;align-items:flex-start;margin:24px 0;
  padding:16px 17px;background:var(--bg-2);
  border:1px solid var(--linje);border-left:2px solid var(--rod);
  border-radius:0 var(--r) var(--r) 0;
}
.person-blokk img{
  width:84px;height:auto;flex:none;border-radius:8px;
  border:1px solid var(--linje-sterk);filter:grayscale(.15);
}
.person-blokk .pb-tekst{flex:1}
.person-blokk .pb-navn{
  font-family:var(--serif);font-size:22px;line-height:1.2;
  color:var(--ink);margin:0 0 3px;
}
.person-blokk .pb-rolle{
  font-size:12.5px;color:var(--rod);font-weight:600;
  letter-spacing:.03em;margin:0 0 10px;
}
.person-blokk .pb-be{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin:0}

/* Røde talltavler for tapstall som skal treffe hardt */
.tallkort.rod::after{background:var(--rod)}
.tallkort.rod .t{color:#e8776a}

/* ---------- Sammenlikning i to spalter ---------- */
.sammenlikn{display:flex;flex-direction:column;gap:12px;margin:26px 0}
.sml-kolonne{
  background:var(--bg-2);border:1px solid var(--linje);
  border-top:2px solid var(--ink-2);border-radius:0 0 var(--r) var(--r);
  padding:17px 18px;
}
.sml-kolonne.mork{border-top-color:#6a655c;background:#12161c}
.sml-kolonne .sml-tit{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 12px}
.sml-kolonne ul{margin:0;padding-left:19px}
.sml-kolonne li{font-size:14.8px;color:var(--ink-2);line-height:1.55;margin-bottom:9px}
.sml-kolonne li:last-child{margin-bottom:0}

/* ---------- Kildemerke ---------- */
.kmerke{display:inline-grid;place-items:center;position:relative;
  width:19px;height:19px;border-radius:50%;
  border:1px solid rgba(201,162,39,.75);background:rgba(201,162,39,.1);
  color:var(--gold-lys);font-family:var(--sans);font-size:10.5px;font-weight:700;
  line-height:1;vertical-align:15%;margin:0 3px;transition:.2s}
.kmerke::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.kmerke:hover,.kmerke:focus-visible{background:var(--gold);color:#171208;border-color:var(--gold)}
#kilde-ark{position:fixed;inset:0;z-index:115;display:none}
#kilde-ark.apen{display:block}
#kilde-ark .bak{position:absolute;inset:0;background:rgba(6,9,13,.72);backdrop-filter:blur(5px)}
#kilde-ark .ark{position:absolute;left:0;right:0;bottom:0;max-height:76vh;overflow-y:auto;
  background:var(--bg-2);border-top:1px solid var(--linje-sterk);border-radius:20px 20px 0 0;
  padding:10px 0 max(22px,env(safe-area-inset-bottom));animation:opp .3s cubic-bezier(.2,.8,.3,1)}
@keyframes opp{from{transform:translateY(100%)}to{transform:translateY(0)}}
#kilde-ark .grep{width:38px;height:4px;border-radius:2px;background:var(--linje-sterk);margin:8px auto 16px}
#kilde-ark .inni{padding:0 var(--pad) 6px;max-width:var(--maks);margin:0 auto}
#kilde-ark .k-hode{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px;display:flex;align-items:center;gap:9px}
#kilde-ark .k-om{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--ink);margin:0 0 16px}
#kilde-ark .k-lenke{display:flex;align-items:center;gap:13px;padding:15px 16px;background:var(--bg-3);
  border:1px solid var(--linje);border-radius:12px;color:var(--ink);text-decoration:none;font-size:15px}
#kilde-ark .k-lenke:hover{border-color:var(--gold)}
#kilde-ark .k-txt{flex:1;line-height:1.35}
#kilde-ark .k-txt i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);
  margin-top:3px;word-break:break-all}

/* ---------- KI-varsel og KVS ---------- */
.ki-varsel{background:var(--bg-2);border:1px solid var(--linje);border-left:2px solid var(--rod);
  border-radius:0 var(--r) var(--r) 0;padding:18px 19px;margin:0 0 26px}
.ki-varsel .v-tit{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rod);margin-bottom:10px}
.ki-varsel p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0}
.kvs-merke{display:block;width:76px;aspect-ratio:1214/1075;height:auto;color:var(--ink);opacity:.94;flex:none}
.kvs-stripe{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.kvs-stripe .strek{flex:1;height:1px;background:var(--linje-sterk);max-width:54px}
.kvs-stripe .txt{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Kilder + bunn ---------- */
.kildeliste{margin:22px 0 0;display:flex;flex-direction:column}
.kildeliste a{display:flex;align-items:baseline;gap:11px;padding:12px 2px;
  border-bottom:1px solid var(--linje);color:var(--ink);text-decoration:none;font-size:15px;line-height:1.45}
.kildeliste a .ut{color:var(--ink-3);font-size:12px;margin-left:auto}
details.kreditt{margin:24px 0 0;border:1px solid var(--linje);border-radius:11px;background:var(--bg-2);overflow:hidden}
details.kreditt summary{padding:15px 16px;cursor:pointer;font-size:14.5px;font-weight:600;
  list-style:none;display:flex;align-items:center;gap:9px}
details.kreditt summary::-webkit-details-marker{display:none}
details.kreditt summary::before{content:"▸";color:var(--gold);transition:transform .25s;font-size:12px}
details.kreditt[open] summary::before{transform:rotate(90deg)}
details.kreditt .inni{padding:0 16px 16px;font-size:12.8px;color:var(--ink-3);line-height:1.62}
details.kreditt .inni p{margin:0 0 8px}

.retur{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:30px 0 0;padding:18px 20px;border-radius:var(--r);
  background:var(--gold);color:#171208;font-weight:600;font-size:16px;text-decoration:none}
.retur:hover{filter:brightness(1.07)}

footer{padding:34px 0 max(38px,env(safe-area-inset-bottom));border-top:1px solid var(--linje);text-align:center}
footer .kvs-merke{margin:0 auto 16px;width:98px;color:var(--ink-2)}
footer p{font-size:13px;color:var(--ink-3);margin:0 0 7px;line-height:1.6}

/* ---------- Lightbox ---------- */
#lys{position:fixed;inset:0;z-index:140;display:none;background:rgba(5,8,11,.96)}
#lys.apen{display:grid;place-items:center;padding:16px}
#lys img{max-width:100%;max-height:82svh;object-fit:contain;border-radius:8px}
#lys .tekst{position:absolute;left:0;right:0;bottom:0;padding:18px var(--pad) max(22px,env(safe-area-inset-bottom));
  font-size:13px;color:var(--ink-2);text-align:center;line-height:1.5;
  background:linear-gradient(180deg,transparent,rgba(5,8,11,.9))}
#lys-lukk{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,26,34,.85);border:1px solid var(--linje-sterk);font-size:19px}

@media (min-width:700px){
  body{font-size:18px}
  :root{--pad:32px}
  .seksjon{padding:84px 0}
  .tallrad{grid-template-columns:repeat(4,1fr)}
  .sammenlikn{flex-direction:row}
  .sammenlikn .sml-kolonne{flex:1}
  #tilbake-hoved{top:20px;left:24px}
}

/* ============================================================
   K-MERKE PÅ BILDER
   ============================================================ */
.bildekilde{
  position:absolute;right:8px;bottom:8px;z-index:4;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;line-height:1;
  background:rgba(13,17,23,.82);color:#e6c860;
  border:1px solid rgba(230,200,96,.75);
  backdrop-filter:blur(6px);cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.bildekilde::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.bildekilde:hover,.bildekilde:focus-visible{
  background:#c9a227;color:#171208;transform:scale(1.1);
}
.full .bildekilde{right:14px}
.person .bilde .bildekilde,.s-bilde .bildekilde{right:7px;bottom:7px;width:23px;height:23px;font-size:11px}
#forside .bakgrunn .bildekilde,#topp .bakgrunn .bildekilde{
  right:12px;bottom:auto;top:max(14px,env(safe-area-inset-top));
}