/* FAKTIVE sektion 7 2026: liste til venstre, ét stort billede til højre.
   Hører sammen med assets/sektion7-2026.js. Rubrikker og brødtekst er originalens;
   uden JavaScript står sektionen, som den gjorde før.
   Farver fra huset: aubergine #3C2A44, brødtekst #5C4F48 (7,4:1 mod creme), dæmpet #8A7B72
   til inaktive trin (3,9:1, stor tekst), kobber #B23F14 til småtekst, orange #E45724 til accent. */

#hvordan.s7f-klar{--f-aub:#3C2A44; --f-tekst:#5C4F48; --f-daemp:#8A7B72; --f-kobber:#B23F14; --f-orange:#E45724;
  --f-streg:rgba(60,42,68,.14); --f-ud:cubic-bezier(.16,1,.3,1)}

/* filmisk scroll: blokken er 300vh høj, og rammen med liste og billede står fast imens */
.s7f{height:300vh;margin-top:clamp(40px,4.4vw,64px)}
.s7f-ramme{position:sticky;top:max(100px,calc(50vh - 260px));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,5vw,88px);align-items:center}

/* ---------- listen: en harmonika, hvor det aktive trin er foldet ud ----------
   Over 900 px sætter JS stregens fyld efter scroll; under 900 px kører den på tid (.koerer). */
.s7f-trin{position:relative;border-top:1px solid var(--f-streg)}
.s7f-trin:last-child{border-bottom:1px solid var(--f-streg)}
#hvordan .s7f-h3{margin:0;font:inherit !important;line-height:inherit !important;letter-spacing:0 !important}
.s7f-h3 button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:18px;width:100%;
  padding:24px 0}
.s7f-h3 .nr{flex:none;width:22px;font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--f-kobber);
  font-variant-numeric:tabular-nums}
.s7f-h3 .t{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(21px,1.75vw,27px);line-height:1.12;
  letter-spacing:-.012em;color:var(--f-daemp);transition:color .35s ease}
.s7f-trin.aktiv .t,.s7f-h3 button:hover .t{color:var(--f-aub)}
.s7f-h3 button:focus-visible{outline:2px solid var(--f-orange);outline-offset:4px;border-radius:4px}
/* teksten foldes blødt ud og ind */
.s7f-tekst{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--f-ud)}
.s7f-tekst p{overflow:hidden;margin:0;padding-left:40px;font-size:17px;line-height:1.62;font-weight:300;
  color:var(--f-tekst);opacity:0;transition:opacity .35s ease}
.s7f-trin.aktiv .s7f-tekst{grid-template-rows:1fr}
.s7f-trin.aktiv .s7f-tekst p{opacity:1;padding-bottom:26px;transition-delay:.12s}
/* fremdriftsstregen under det aktive trin viser, hvornår det skifter */
.s7f-fremdrift{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.s7f-fremdrift i{position:absolute;inset:0;background:var(--f-aub);transform:scaleX(0);transform-origin:left center}
.s7f-trin.aktiv .s7f-fremdrift i{transform:scaleX(1);transition:transform .3s ease}
.s7f-trin.koerer .s7f-fremdrift i{transform:scaleX(0);animation:s7f-frem var(--s7f-tid,6.5s) linear forwards}
@keyframes s7f-frem{to{transform:scaleX(1)}}

/* ---------- sektionen: en lys papirflade efter den mørke sektion 6, så den står som sit eget
   kapitel og ikke flyder sammen med næste sektions creme ---------- */
#hvordan.s7f-klar{background:#FFFDF9 !important;border-bottom:1px solid rgba(60,42,68,.08)}

/* ---------- billedet: én flade, ét billede pr. trin ---------- */
.s7f-billede{position:relative;aspect-ratio:6/5;border-radius:24px;overflow:hidden;isolation:isolate;
  background:#F4ECE3;border:1px solid rgba(60,42,68,.08);
  box-shadow:0 1px 2px rgba(60,42,68,.05),0 40px 80px -48px rgba(60,42,68,.45)}
/* den levende baggrund: to store, bløde farvepletter driver langsomt rundt og skifter farve med trinnet */
@property --s7f-a{syntax:'<color>';inherits:true;initial-value:rgba(242,161,126,.42)}
@property --s7f-b{syntax:'<color>';inherits:true;initial-value:rgba(196,164,214,.40)}
.s7f-billede{--s7f-a:rgba(242,161,126,.42);--s7f-b:rgba(196,164,214,.40);transition:--s7f-a 1.2s ease,--s7f-b 1.2s ease}
.s7f-billede[data-k="1"]{--s7f-a:rgba(196,164,214,.5);--s7f-b:rgba(255,255,255,.85)}
.s7f-billede[data-k="2"]{--s7f-a:rgba(228,87,36,.26);--s7f-b:rgba(196,164,214,.36)}
.s7f-billede::before,.s7f-billede::after{content:"";position:absolute;z-index:-1;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none}
.s7f-billede::before{left:-18%;top:-26%;background:radial-gradient(closest-side,var(--s7f-a),transparent);
  animation:s7f-drift1 16s ease-in-out infinite alternate}
.s7f-billede::after{right:-20%;bottom:-30%;background:radial-gradient(closest-side,var(--s7f-b),transparent);
  animation:s7f-drift2 21s ease-in-out infinite alternate}
@keyframes s7f-drift1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(22%,18%,0) scale(1.12)}100%{transform:translate3d(8%,34%,0) scale(.94)}}
@keyframes s7f-drift2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26%,-12%,0) scale(1.1)}100%{transform:translate3d(-10%,-30%,0) scale(1.18)}}
.s7f-vis{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:clamp(28px,4vw,56px);text-align:center;opacity:0;visibility:hidden;transform:translate3d(0,14px,0);
  transition:opacity .35s ease,transform .5s var(--f-ud),visibility 0s linear .5s}
.s7f-vis.aktiv{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform .8s var(--f-ud) .1s,visibility 0s}
/* Hvert billede afspiller sit eget forløb med en GSAP-tidslinje (assets/sektion7-2026.js).
   Reglerne her beskriver det færdige billede; tidslinjen starter fra begyndelsen og spiller
   hen til det. Uden GSAP eller ved reduceret bevægelse står billedet derfor færdigt. */

/* 01: ét spørgsmål, svaret valgt */
.s7f-over{margin:0;font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--f-daemp)}
.s7f-spm{margin:0;font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.1;
  letter-spacing:-.015em;color:var(--f-aub);text-wrap:balance}
.s7f-valg{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.s7f-valg span{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:#fff;
  border:1px solid rgba(60,42,68,.16);font-size:16px;color:var(--f-aub);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.s7f-valg .valgt{background:var(--f-aub);border-color:var(--f-aub);color:#FDF8F2}
.s7f-valg svg{display:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:0}
.s7f-valg .valgt svg{display:block}
/* spørgsmålet skrives: resten holder pladsen, så intet hopper */
.s7f-spm .rest{color:transparent}
.s7f-spm .mark{display:none;width:2px;height:.9em;margin:0 1px;vertical-align:-.08em;background:var(--f-orange);
  animation:s7f-blink 1s steps(1) infinite}
.skriver .s7f-spm .mark{display:inline-block}
@keyframes s7f-blink{50%{opacity:0}}

/* 02: omkring 30 dokumenter */
.s7f-tal{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--f-daemp);font-size:15px}
.s7f-tal b{min-width:2ch;text-align:center;font-family:var(--font-display);font-stretch:125%;font-weight:400;
  font-size:clamp(84px,8vw,124px);line-height:.9;letter-spacing:-.04em;color:var(--f-aub)}
/* bunken: det nyeste dokument ligger øverst (sidst i DOM'en), de to ældre et trin længere nede
   og bagved som blanke ark; de øvrige er lagt væk */
.s7f-stak{position:relative;width:min(100%,340px);height:74px}
.s7f-side{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:12px;background:#fff;border:1px solid rgba(60,42,68,.1);
  box-shadow:0 14px 26px -22px rgba(60,42,68,.5);font-size:14px;color:var(--f-aub);text-align:left;
  transform-origin:50% 0;opacity:0}
.s7f-side:nth-last-child(1){opacity:1}
.s7f-side:nth-last-child(2){opacity:.7;transform:translate3d(0,12px,0) scale(.95)}
.s7f-side:nth-last-child(3){opacity:.4;transform:translate3d(0,24px,0) scale(.9)}
.s7f-side span{flex:none;width:18px;height:23px;border-radius:2px;background:#F2E7DC;clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%)}
.s7f-side b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s7f-stak:not(.spiller) .s7f-side:not(:last-child) b,.s7f-stak:not(.spiller) .s7f-side:not(:last-child) span{opacity:0}

/* 03: én hændelse, en pil, og det dokument, der følger med */
.s7f-raekke{display:flex;align-items:center;gap:14px;width:min(100%,380px);padding:16px 18px;border-radius:14px;background:#fff;
  border:1px solid rgba(60,42,68,.1);box-shadow:0 18px 30px -24px rgba(60,42,68,.5);text-align:left;font-size:16px;color:var(--f-aub)}
.s7f-raekke > span:last-child{min-width:0;flex:1}
.s7f-raekke b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s7f-raekke small{display:block;margin-bottom:3px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--f-daemp)}
.s7f-sker i{flex:none;width:9px;height:9px;margin:0 7.5px;border-radius:50%;background:var(--f-orange);box-shadow:0 0 0 5px rgba(228,87,36,.14)}
/* dokumentikonet: et kobberfarvet ark med et flueben, når dokumentet er opdateret */
.s7f-dokikon{flex:none;position:relative;width:24px;height:30px;border-radius:2px;background:var(--f-kobber);
  clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%)}
.s7f-dokikon svg{position:absolute;left:4px;top:9px;width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0}
/* status over titlen: "Sidst opdateret …" afløses af "Opdateret i dag" */
.s7f-status{position:relative;height:1.3em;overflow:hidden}
.s7f-status span{position:absolute;left:0;top:0;white-space:nowrap}
.s7f-status .foer{opacity:0}
.s7f-status .nu{color:var(--f-kobber)}
/* pilen: en hårfin streg fra hændelsen ned til dokumentet og en åben pilespids */
.s7f-pil{display:block;width:12px;height:40px;margin:-8px 0;overflow:visible;fill:none;stroke:rgba(60,42,68,.5);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.s7f-pil path{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- under 900 px: billedet over listen ---------- */
@media (max-width:899px){
  .s7f{height:auto}
  .s7f-ramme{position:static;grid-template-columns:1fr;gap:28px}
  .s7f-billede{order:-1;aspect-ratio:4/3.4}
  .s7f-tekst p{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  #hvordan.s7f-klar *{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}