/* FAKTIVE sektion 10 2026: "Spørgsmål og svar". Hører sammen med assets/sektion10-2026.js. Al tekst er originalens; uden JavaScript står sektionen, som den gjorde før (almindelige
). Tre gennemprøvede opbygninger, valgt med data-s10-form på (1, 2 eller 3): 1 smal og centreret liste, som Apples supportsider: intet felt står tomt 2 spørgsmål i venstre side, svaret stort til højre (master/detail) 3 listen til venstre og en rolig hjælpespalte til højre ("Fandt I ikke svaret?") Fælles: kun ét svar er åbent ad gangen, lukkede spørgsmål virker som indholdsfortegnelse, hårfine linjer, husets brede skrift, og alt falder til én spalte under 900 px. Farver: aubergine #3C2A44, brødtekst #5C4F48, dæmpet #7A6B63, kobber #B23F14. */ #faq.s10-klar{--s10-aub:#3C2A44; --s10-tekst:#5C4F48; --s10-daemp:#7A6B63; --s10-kobber:#B23F14; --s10-streg:rgba(60,42,68,.14); --s10-ud:cubic-bezier(.16,1,.3,1)} #faq.s10-klar h2.big{margin-top:10px} /* ---------- listen ---------- */ .s10-liste{border-bottom:1px solid var(--s10-streg)} .s10-punkt{border-top:1px solid var(--s10-streg)} .s10-punkt h3{margin:0;font:inherit} .s10-punkt button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:flex-start; justify-content:space-between;gap:28px;width:100%;padding:22px 0;font-family:var(--font-display); font-stretch:125%;font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.3;letter-spacing:-.01em; color:var(--s10-aub);transition:color .25s ease} .s10-punkt button:hover{color:var(--s10-kobber)} .s10-punkt button:focus-visible{outline:2px solid var(--s10-kobber);outline-offset:4px;border-radius:4px} .s10-tegn{flex:none;position:relative;width:16px;height:16px;margin-top:.3em} .s10-tegn::before,.s10-tegn::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.5px; border-radius:1px;background:var(--s10-kobber);transform:translate(-50%,-50%); transition:transform .35s var(--s10-ud),opacity .25s ease} .s10-tegn::after{transform:translate(-50%,-50%) rotate(90deg)} .s10-punkt.aaben .s10-tegn::after{transform:translate(-50%,-50%) rotate(0);opacity:0} .s10-svar{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--s10-ud)} .s10-svar p{overflow:hidden;margin:0;max-width:46em;font-size:16.5px;line-height:1.62;font-weight:300; color:var(--s10-tekst);opacity:0;transition:opacity .3s ease} .s10-punkt.aaben .s10-svar{grid-template-rows:1fr} .s10-punkt.aaben .s10-svar p{opacity:1;padding-bottom:24px;transition-delay:.1s} /* hjælpelinjen: samme sætning, tre steder alt efter opbygning */ .s10-hjaelp{font-size:16px;line-height:1.6;font-weight:300;color:var(--s10-tekst)} .s10-hjaelp a{color:var(--s10-aub);font-weight:500;white-space:nowrap;text-decoration:none; border-bottom:1px solid rgba(60,42,68,.3);transition:border-color .25s ease} .s10-hjaelp a:hover{border-color:var(--s10-aub)} .s10-hjaelp a:focus-visible{outline:2px solid var(--s10-kobber);outline-offset:3px;border-radius:2px} /* ---------- billedet: forankret i højre kant, toner ud mod midten, driver under scroll ---------- */ #faq.s10-klar{position:relative;overflow:clip} .s10-foto{position:absolute;right:0;top:0;bottom:0;width:min(54vw,820px);margin:0;z-index:0;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 34%,#000 70%); mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 34%,#000 70%)} /* fotoet står der fra start, som "Svaret" i sektion 4; indgangen er zoomen ud (.synlig), ikke en indtoning, for en indtoning samtidig med zoomen skjulte den */ /* samme kamera som "Svaret" i sektion 4: laget zoomer fra 112 % ud til 100 %, når billedet toner ind, og fotoet (lidt større end rammen) panorerer ±2,2 % sidelæns og driver ±3,4 % lodret */ .s10-lag{position:absolute;inset:0;overflow:hidden;transform:scale(1.12); transition:transform 1.9s cubic-bezier(.16,1,.3,1) .08s} .s10-foto.synlig .s10-lag{transform:none} .s10-foto img{position:absolute;left:-5%;top:-6%;width:110%;height:112%;display:block;object-fit:cover; transform:translate3d(calc((var(--s10-p,.5) * 2 - 1) * 2.2%),calc((var(--s10-p,.5) * 2 - 1) * 3.4%),0); will-change:transform} .s10 .s10-hoved,.s10 .s10-liste,.s10 .s10-hjaelp{position:relative;z-index:1} /* Safari visker ikke altid hårlinjerne ud fra deres gamle plads, når et svar folder sig sammen, så der står spøgelsesstreger i bunden af listen. På sit eget lag tegnes listen helt forfra. */ .s10 .s10-liste,.s10 .s10-hjaelp{transform:translateZ(0);backface-visibility:hidden} /* ---------- 1: spørgsmålene i venstre halvdel, billedet i højre ---------- */ /* ---------- 1: smal og centreret ---------- */ #faq[data-form="1"] .s10{max-width:min(54%,640px)} #faq[data-form="1"] .s10-hoved{margin-bottom:clamp(26px,3vw,40px)} #faq[data-form="1"] h2.big{max-width:12em} #faq[data-form="1"] .s10-punkt button{gap:20px;font-size:clamp(17px,1.4vw,21px)} #faq[data-form="1"] .s10-hjaelp{margin:clamp(24px,2.8vw,34px) 0 0;max-width:26em} /* ---------- 2: spørgsmål venstre, svar højre ---------- */ #faq[data-form="2"] .s10{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,80px); align-items:start} #faq[data-form="2"] .s10-hoved{grid-column:1 / -1;margin-bottom:clamp(26px,3vw,40px)} #faq[data-form="2"] .s10-punkt button{font-size:clamp(17px,1.35vw,20px);padding:18px 0} #faq[data-form="2"] .s10-svar{display:none} #faq[data-form="2"] .s10-punkt.aaben button{color:var(--s10-kobber)} #faq[data-form="2"] .s10-panel{position:sticky;top:max(110px,calc(50vh - 200px));padding-left:clamp(0px,3vw,40px); border-left:1px solid var(--s10-streg);min-height:220px} #faq[data-form="2"] .s10-panel p{margin:0;font-size:17.5px;line-height:1.62;font-weight:300;color:var(--s10-tekst);max-width:34em; transition:opacity .3s ease} #faq[data-form="2"] .s10-hjaelp{margin:clamp(26px,3vw,36px) 0 0} /* ---------- 3: liste til venstre, hjælpespalte til højre ---------- */ #faq[data-form="3"] .s10{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(36px,5vw,88px); align-items:start} #faq[data-form="3"] .s10-hoved{grid-column:1 / -1;margin-bottom:clamp(26px,3vw,40px);max-width:24em} #faq[data-form="3"] .s10-aside{position:sticky;top:max(110px,calc(50vh - 180px))} #faq[data-form="3"] .s10-aside h3{margin:0 0 12px;font-family:var(--font-display);font-stretch:125%;font-weight:400; font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.01em;color:var(--s10-aub)} #faq[data-form="3"] .s10-aside{padding-top:22px;border-top:1px solid var(--s10-streg)} /* ---------- under 1000 px: billedet bliver en stribe under spørgsmålene ---------- */ @media (max-width:999px){ #faq[data-form="1"] .s10{max-width:none} .s10-foto{position:relative;width:100vw;margin:clamp(34px,4vw,52px) 0 0 calc(50% - 50vw);height:clamp(220px,40vw,300px); -webkit-mask-image:none;mask-image:none} } @media (max-width:899px){ #faq[data-form="2"] .s10,#faq[data-form="3"] .s10{grid-template-columns:1fr;gap:24px} #faq[data-form="2"] .s10-svar{display:grid} #faq[data-form="2"] .s10-panel{display:none} #faq[data-form="3"] .s10-aside{position:static} .s10-punkt button{padding:18px 0;gap:18px} } @media (prefers-reduced-motion:reduce){ .s10-foto{opacity:1} .s10-foto img,.s10-lag{transform:none;transition:none} .s10-svar,.s10-svar p,.s10-tegn::before,.s10-tegn::after,#faq[data-form="2"] .s10-panel p{transition-duration:.01ms !important} }