/* ============================================================
   HUSET · v3 (12/10): huset bygges til venstre, ét trin ad gangen
   til højre, i sollys gennem et vindue (baggrund A, Jens' valg) og i
   farvetema E (teglrød accent, skovgrøn mørk).
   til højre. Jens: animationen og længden er god, men listen til højre
   var "kedelig og uoverskuelig" ⇒ nu ét kort ad gangen + fire faner
   øverst, der viser, hvor man er (og kan klikkes).
   Motoren (100 frames på canvas) er stadig Godballes anatomy.js v14.
   JS (scripts/huset.js) sætter --f på fanerne, data-tilstand på kortene
   og tegner huset. Uden JS står de fire kort bare under hinanden.
   ============================================================ */
.huset {
  position: relative; overflow: clip; /* vinduesskyggen må ikke stikke ud til siden */
  padding-top: clamp(96px, 14vh, 160px);
  /* ren, lun flade (kornet er fjernet 12/10), der slutter i præcis den farve, .flow starter i */
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 28%, var(--flow) 100%);
}
.huset .sektionstop { margin-bottom: 0; }

/* sporet giver scroll-længden; den sticky ramme står stille imens */
html:not(.no-js) .huset__spor { height: 290vh; height: 290svh; }
html:not(.no-js) .huset__sticky { position: sticky; top: 72px; height: calc(100vh - 72px); height: calc(100svh - 72px); display: flex; align-items: center; }

/* ----- Sollys gennem et vindue (Jens valgte A, 12/10) -----
   En blød skygge af en vinduesramme og en lun lysplet glider mod højre, mens man
   scroller (--progress sættes af huset.js). Lyset "ånder" svagt; fra ved reduceret bevægelse. */
.huset__sticky { position: relative; isolation: isolate; }
.huset__sticky::before {
  content: ""; position: absolute; z-index: -1; left: 2%; top: -8%; width: min(70vh, 620px); aspect-ratio: 600 / 760; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 760'%3E%3Crect width='600' height='760' fill='%233C2E20' fill-opacity='.10'/%3E%3Cg fill='%23FFFCF5' fill-opacity='.9'%3E%3Crect x='44' y='44' width='238' height='316'/%3E%3Crect x='318' y='44' width='238' height='316'/%3E%3Crect x='44' y='400' width='238' height='316'/%3E%3Crect x='318' y='400' width='238' height='316'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: blur(10px);
  transform: translateX(calc(var(--progress, 0) * 34vw)) skewX(-16deg) rotate(-7deg);
  animation: huset-sol 9s ease-in-out infinite alternate;
}
.huset__sticky::after {
  content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 62% at calc(18% + var(--progress, 0) * 34%) 36%, rgba(255, 244, 224, .8), rgba(255, 244, 224, 0) 72%);
}
@keyframes huset-sol { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .huset__sticky::before { animation: none; opacity: .9; } }
.huset__gitter { width: 100%; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 5vw, 96px); align-items: center; }

/* ----- Venstre: huset ----- */
.huset__visuel { position: relative; aspect-ratio: 1158 / 631; }
.huset__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ----- Højre: fire faner + ét kort ad gangen ----- */
.huset__faner { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.huset__faner button {
  width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 10px 0 12px; background: none; border: 0; cursor: pointer; text-align: left;
  font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); position: relative; transition: color var(--hurtig) var(--ease);
}
.huset__faner button:hover { color: var(--ink); }
.huset__faner button[aria-current] { color: var(--accent-tekst); }
.fane__nr { color: inherit; opacity: .7; }
.huset__faner i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.huset__faner i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--f, 0)); }

.huset__trin { list-style: none; padding: 0; display: grid; }
.huset .kort { background: rgba(252, 247, 239, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.trin {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  padding: clamp(26px, 2.6vw, 40px);
}
.trin > :not(.trin__ikon, .trin__nr) { grid-column: 1 / -1; }
.trin__ikon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 22px; }
.trin__nr { font: var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-tekst); }
.trin h3 { margin-top: 22px; font-size: clamp(30px, 2.8vw, 44px); line-height: 1.04; letter-spacing: -0.035em; }
.trin p { margin-top: 12px; font-size: 17px; line-height: 1.6; max-width: 42ch; }
.trin__punkter { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.trin__punkter li { padding: 8px 14px; border: 1px solid rgba(166, 82, 54, .4); border-radius: var(--r-pill); font-size: 14px; line-height: 1.2; color: var(--ink); background: rgba(255, 255, 255, .5); }
.trin__knap { justify-self: start; margin-top: 26px; }

/* med JS: kortene ligger oven i hinanden, kun det aktive ses */
html:not(.no-js) .trin { grid-area: 1 / 1; transition: opacity 520ms var(--ease), transform 620ms var(--ease), visibility 0s linear 620ms; }
html:not(.no-js) .trin:not([data-tilstand="aktiv"]) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(22px); }
html:not(.no-js) .trin[data-tilstand="foer"] { transform: translateY(-22px); }
html:not(.no-js) .trin[data-tilstand="aktiv"] { transition-delay: 0s; }
/* uden JS: kortene står under hinanden, og fanerne gemmes */
html.no-js .huset__faner { display: none; }
html.no-js .huset__trin { gap: 14px; }
html.no-js .huset__sticky { padding-block: 40px 80px; }
html.no-js .huset__gitter { align-items: start; }

.huset__spor { padding-bottom: clamp(40px, 6vh, 80px); }

/* ----- Mobil: huset øverst, fanerne som numre, kortet under ----- */
@media (max-width: 880px) {
  .huset { padding-top: clamp(72px, 10vh, 110px); }
  html:not(.no-js) .huset__spor { height: 260vh; height: 260svh; }
  .huset__gitter { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .huset__visuel { width: min(100%, 460px); margin-inline: auto; }
  .fane__navn { display: none; }
  .huset__faner { margin-bottom: 12px; }
  .huset__faner button { justify-content: center; padding: 8px 0 10px; }
  .trin { padding: 22px 20px 24px; }
  .trin__ikon { width: 40px; height: 40px; font-size: 19px; }
  .trin h3 { margin-top: 16px; font-size: 26px; }
  .trin p { font-size: 15.5px; line-height: 1.55; }
  .trin__punkter { margin-top: 16px; gap: 6px; }
  .trin__punkter li { padding: 7px 12px; font-size: 13px; }
  .trin__knap { margin-top: 18px; min-height: 48px; }
}
@media (max-width: 880px) and (max-height: 700px) {
  .huset__gitter { gap: 8px; }
  .huset__visuel { width: min(100%, 300px); }
  .trin { padding: 18px 18px 20px; }
  .trin h3 { margin-top: 12px; font-size: 24px; }
  .trin p { margin-top: 8px; font-size: 15px; }
  .trin__punkter { margin-top: 12px; }
  .trin__knap { margin-top: 14px; }
}

/* ============================================================
   v4 (12/10, Jens valgte 2A + 3C nedtonet: "C, men nu bliver det hele for stort og in your face")
   · sektionen er arket, der glider op over hero'en: runde hjørner + blød skygge + lille greb
   · huset står på jorden (jordlinje + skygge) og fylder mere, men ikke alt
   · trinnet sidder i et roligt panel nede i venstre hjørne med en teglrød kant
   ============================================================ */
.huset { z-index: 1; border-radius: 34px 34px 0 0; box-shadow: 0 -40px 80px -30px rgba(14, 20, 16, .45); }
.huset::before { content: ""; position: absolute; top: 14px; left: 50%; width: 46px; height: 4px; margin-left: -23px; border-radius: 4px; background: var(--hairline-2); z-index: 2; }

/* jorden under huset */
.huset__visuel::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: 2%; height: 11%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(45, 34, 22, .28), rgba(45, 34, 22, 0)); filter: blur(4px); }
.huset__visuel::before { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 5.5%; height: 1px; background: rgba(26, 24, 21, .14); pointer-events: none; }

@media (min-width: 881px) {
  .huset__gitter { position: relative; height: 100%; grid-template-columns: minmax(0, 1fr); align-items: center; }
  .huset__visuel { width: min(54vw, calc((100svh - 260px) * 1.83)); margin: 0 clamp(0px, 2vw, 40px) 0 auto; }
  .fane__nr { display: none; }
  .huset__faner { gap: 8px; }
  .huset__faner button { letter-spacing: .1em; }
  html:not(.no-js) .huset__tekst { position: absolute; left: clamp(20px, 5vw, 72px); bottom: clamp(28px, 7vh, 72px); width: min(430px, 38vw); background: rgba(252, 247, 239, .96); border-left: 3px solid var(--accent); padding: 18px 24px 22px; box-shadow: 0 24px 50px -30px rgba(27, 51, 38, .4); }
  .huset__faner { margin-bottom: 8px; }
  .huset .kort, .trin { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .trin h3 { margin-top: 14px; font-size: clamp(26px, 2.1vw, 34px); }
  .trin p { font-size: 16px; line-height: 1.55; }
  .trin__punkter { margin-top: 16px; }
  .trin__punkter li { padding: 7px 12px; font-size: 13px; }
  .trin__knap { margin-top: 18px; min-height: 48px; }
}
@media (max-width: 880px) {
  .huset { border-radius: 24px 24px 0 0; }
  .huset__tekst { background: rgba(252, 247, 239, .96); border-left: 3px solid var(--accent); padding: 14px 16px 18px; }
  .huset .kort, .trin { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
}

/* ============================================================
   12/10 kl. 13: "Kunden i fokus" og huset + trinnene på ÉN skærm (Jens).
   Overskriften ligger øverst i den sticky ramme; huset og panelet deler resten.
   ============================================================ */
.huset { padding-top: 0; }
html:not(.no-js) .huset__sticky { flex-direction: column; align-items: stretch; }
.huset__top { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: clamp(34px, 6vh, 68px); }
.huset__top h2 { font-size: clamp(38px, 4.4vw, 68px); }
.huset__top p { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.5; max-width: 38ch; padding-bottom: 6px; }
html:not(.no-js) .huset__gitter { flex: 1; min-height: 0; height: auto; }
html.no-js .huset__top { padding-bottom: 24px; }
@media (min-width: 881px) {
  .huset__visuel { width: min(52vw, calc((100svh - 330px) * 1.83)); }
}
@media (max-width: 880px) {
  .huset__top { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 26px; }
  .huset__top h2 { font-size: 32px; }
  .huset__top p { font-size: 14.5px; }
  html:not(.no-js) .huset__gitter { align-content: center; }
}
@media (max-width: 880px) and (max-height: 720px) {
  .huset__top p { display: none; }
  .huset__top { padding-top: 18px; }
}

/* 12/10 kl. 13:19: infopanelet en smule større (Jens) */
@media (min-width: 881px) {
  html:not(.no-js) .huset__tekst { width: min(510px, 40vw); padding: 22px 30px 28px; }
  .huset__faner button { font-size: 12px; }
  .trin__ikon { width: 52px; height: 52px; font-size: 23px; }
  .trin h3 { margin-top: 16px; font-size: clamp(30px, 2.5vw, 40px); }
  .trin p { font-size: 17px; line-height: 1.6; }
  .trin__punkter { margin-top: 18px; }
  .trin__punkter li { padding: 8px 14px; font-size: 14px; }
  .trin__knap { min-height: 52px; }
}
@media (min-width: 881px) {
  html:not(.no-js) .huset__tekst { width: min(500px, 40vw); }
  .huset__visuel { width: min(46vw, calc((100svh - 330px) * 1.83)); margin-right: 0; }
}

/* ============================================================
   v5 · TIDSLINJEN (16/10, Jens: 'jeg kan ikke lide denne kasse' → tavlen _forslag/huset2/
   → 'C, men formatet skal ændres' → 'større, fylder venstre side' → 'mere glidende og levende'
   → 'byg c2-kassen ind'). Ingen kasse: alle fire trin står på en lodret linje i venstre side,
   det aktive er foldet ud. Linjen fyldes teglrød via --progress fra huset.js, den aktive prik
   pulserer, og trinnene folder sig blødt ud og ind. Fanerne er skjult (tidslinjen viser, hvor man er).
   Uden JS står alle trin foldet ud. Reduceret bevægelse slår animationerne fra.
   Vægten matcher prøven (html .huset X = html[data-…] X), og blokken ligger sidst, så den vinder.
   ============================================================ */
html .huset .huset__tekst { background: none !important; border-left: 0 !important; box-shadow: none !important; padding: 0 !important; }
html .huset .huset__faner { display: none; }
html:not(.no-js) .huset .huset__trin { position: relative; gap: 0; padding-left: 28px; }
html .huset .huset__trin::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; background: var(--hairline-2); }
html:not(.no-js) .huset .trin { grid-area: auto; position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto; padding: 9px 0 !important; transition: none; }
html .huset .trin::before { content: ""; position: absolute; left: -26px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--hairline-2); }
html .huset .trin[data-tilstand="foer"]::before { background: var(--accent); border-color: var(--accent); opacity: .5; }
html .huset .trin[data-tilstand="aktiv"]::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(166, 82, 54, .18); }
html .huset .trin__ikon { display: none; }
html .huset .trin__nr { grid-column: 1 / -1; }
html .huset .trin h3 { margin-top: 4px; font-size: 19px; color: var(--ink-3); }
html .huset .trin[data-tilstand="aktiv"] h3 { font-size: clamp(26px, 2.1vw, 32px); color: var(--ink); }
html:not(.no-js) .huset .trin:not([data-tilstand="aktiv"]) .trin__nr { opacity: .6; }
html.no-js .huset .trin h3 { color: var(--ink); }
@media (min-width: 881px) { html:not(.no-js) .huset .huset__tekst { width: min(440px, 38vw); bottom: clamp(30px, 6vh, 70px); } }
@media (max-width: 880px) { html .huset .trin h3 { font-size: 17px; } html .huset .trin[data-tilstand="aktiv"] h3 { font-size: 23px; } html:not(.no-js) .huset .trin { padding: 6px 0 !important; } }
/* uden kasse må husets jordlinje ikke løbe gennem teksten → kun under huset */
html .huset .huset__visuel::before { left: -4%; right: -4%; }

/* større, fylder venstre side */
@media (min-width: 881px) {
  html:not(.no-js) .huset .huset__tekst { top: clamp(8px, 3vh, 36px); bottom: auto; width: min(500px, 35vw); }
  html .huset .huset__trin { padding-left: 40px; }
  html .huset .huset__trin::before { left: 9px; top: 20px; bottom: 20px; width: 2px; }
  html:not(.no-js) .huset .trin { padding: 13px 0 !important; }
  html .huset .trin::before { left: -38px; top: 20px; width: 18px; height: 18px; border-width: 3px; }
  html .huset .trin[data-tilstand="aktiv"]::before { box-shadow: 0 0 0 7px rgba(166, 82, 54, .18); }
  html .huset .trin__nr { font-size: 12.5px; letter-spacing: .22em; }
  html .huset .trin h3 { margin-top: 6px; font-size: clamp(22px, 1.9vw, 28px); }
  html .huset .trin[data-tilstand="aktiv"] h3 { font-size: clamp(34px, 3.1vw, 48px); line-height: 1.02; letter-spacing: -0.035em; }
  html .huset .trin p { margin-top: 12px; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; max-width: 44ch; }
  html .huset .trin__punkter { margin-top: 16px; gap: 8px; }
  html .huset .trin__punkter li { padding: 9px 15px; font-size: 14.5px; }
  html .huset .trin__knap { margin-top: 20px; }
}
@media (max-width: 880px) {
  html .huset .huset__trin { padding-left: 32px; }
  html .huset .trin::before { left: -31px; width: 14px; height: 14px; }
  html .huset .trin h3 { font-size: 19px; }
  html .huset .trin[data-tilstand="aktiv"] h3 { font-size: 27px; }
  html .huset .trin p { font-size: 16px; }
}

/* ---------- SCRUB (16/10 kl. 13:09, Jens: 'stadigvæk ikke særlig smooth, når man scroller ned igennem den') ----------
   Før: trinnene foldede sig ud og ind af sig selv ved hvert skift, og det nye åbnede, før det gamle var lukket
   ⇒ listen voksede 510 → 633 → 465 px, og alt nedenunder hoppede. Nu følger ALT scrollet direkte:
   huset.js sætter --aaben (0-1) på hvert trin og --fyld på listen. Det gamle trin lukker i præcis samme takt,
   som det nye åbner (begge står på 0,5 midt i skiftet), så højden er næsten konstant. Intet sker af sig selv,
   undtagen prikkens farve og puls. Uden JS: alt står åbent. */
html .huset { --h3-s: 19px; --h3-l: 27px; }
@media (min-width: 881px) { html .huset { --h3-s: clamp(22px, 1.9vw, 28px); --h3-l: clamp(34px, 3.1vw, 48px); } }
@media (min-width: 881px) and (max-height: 800px) { html .huset { --h3-l: clamp(30px, 2.6vw, 40px); } }
html .huset .trin__mere-ind { display: flow-root; } /* margener bliver inde i indpakningen, så målingen passer */
html .huset .trin__knap { display: flex; width: fit-content; }
/* 16/10 kl. 13:27 (Jens: knappen så 'skarp kantet' ud): overflow:hidden skar knappens skygge af i en firkant.
   Nu klippes der med clip-path i stedet: bunden klippes præcis ved kanten, mens trinnet åbner/lukker,
   og når det er helt åbent (aaben > .95), glider klippet ud, så skygge og fokusring får plads. */
html:not(.no-js) .huset .trin__mere { overflow: visible; clip-path: inset(0 -32px calc(-34px * clamp(0, calc((var(--aaben, 1) - .95) * 20), 1)) -32px); }
html:not(.no-js) .huset .trin[data-maalt] .trin__mere { height: calc(var(--aaben, 1) * var(--fuld, 0px)); }
html:not(.no-js) .huset .trin[data-lukket] .trin__mere { visibility: hidden; } /* lukkede knapper kan ikke fanges med tab */
html:not(.no-js) .huset .trin__mere-ind { opacity: calc(var(--aaben, 1) * var(--aaben, 1)); transform: translateY(calc((1 - var(--aaben, 1)) * -10px)); }
html:not(.no-js) .huset .huset__trin .trin h3 {
  transition: none;
  font-size: calc(var(--h3-s) + (var(--h3-l) - var(--h3-s)) * var(--aaben, 1));
  color: color-mix(in srgb, var(--ink) calc(var(--aaben, 1) * 100%), var(--ink-3));
}
html:not(.no-js) .huset .huset__trin .trin__nr { transition: none; opacity: calc(.6 + .4 * var(--aaben, 1)); letter-spacing: calc(.22em + .06em * var(--aaben, 1)); }
/* punkterne kommer ind ét ad gangen, mens trinnet åbner */
html:not(.no-js) .huset .trin__punkter li { --li: clamp(0, calc((var(--aaben, 1) - .12 * var(--k, 0)) / .64), 1); opacity: var(--li); transform: translateY(calc((1 - var(--li)) * 8px)); }
html .huset .trin__punkter li:nth-child(2) { --k: 1; }
html .huset .trin__punkter li:nth-child(3) { --k: 2; }
/* linjen fyldes præcis hen til prikken, man er ved (--fyld i px fra huset.js) */
html .huset .huset__trin::after { content: ""; position: absolute; left: 9px; top: 20px; width: 2px; height: var(--fyld, 0px); background: var(--accent); border-radius: 2px; }
@media (max-width: 880px) { html .huset .huset__trin::after { left: 7px; top: 14px; } }
/* prikken: farve og puls skifter ved trinnet, størrelsen følger scrollet */
html .huset .trin::before { z-index: 1; transform: scale(calc(1 + .18 * var(--aaben, 0))); transition: background-color .45s var(--ease), border-color .45s var(--ease); }
html .huset .trin[data-tilstand="aktiv"]::before { animation: huset-puls 2.4s ease-out .4s infinite; }
@keyframes huset-puls { 0% { box-shadow: 0 0 0 0 rgba(166, 82, 54, .38); } 70% { box-shadow: 0 0 0 14px rgba(166, 82, 54, 0); } 100% { box-shadow: 0 0 0 0 rgba(166, 82, 54, 0); } }
@media (prefers-reduced-motion: reduce) { html .huset .huset__trin *, html .huset .huset__trin *::before { transition: none !important; animation: none !important; } }
/* huset holder sig fri af teksten (16/10: på brede skærme lå 'Én at ringe til' oven på taget) */
@media (min-width: 881px) { html .huset .huset__visuel { width: min(46vw, calc((100svh - 330px) * 1.83), calc(100% - min(500px, 35vw) - 40px)); } }
/* lave skærme (bærbare m. browserbjælke): sidste trin har en knap, så tidslinjen strammes, og knappen får luft til bunden */
@media (min-width: 881px) and (max-height: 800px) {
  html:not(.no-js) .huset .trin { padding: 8px 0 !important; }
  html .huset .trin::before { top: 15px; }
  html .huset .huset__trin::before, html .huset .huset__trin::after { top: 15px; bottom: 15px; }
  html .huset .trin[data-tilstand="aktiv"] h3 { font-size: clamp(30px, 2.6vw, 40px); }
  html .huset .trin p { margin-top: 8px; }
  html .huset .trin__punkter { margin-top: 12px; }
  html .huset .trin__knap { margin-top: 14px; min-height: 46px; }
}

/* KNAPPERNE · A "Bløde flader" (16/10 kl. 13:39): punkterne i trinnene uden streg, som bløde flader */
.trin__punkter li { border-color: transparent; background: rgba(252, 247, 239, .78); color: var(--ink-2); box-shadow: 0 1px 2px rgba(70, 45, 20, .12), 0 8px 18px -12px rgba(70, 45, 20, .4); }