/* Simplehouse, retning B Timeglasset. Hvert valg er et niveau længere nede; man falder ned til næste side. */
:root{
  --kridt:#E9ECF5; --nat:#1B1736; --sand:#F5B700; --dis:#55526F; --linje:#C9CCDB; --lys-dis:#C9C7E0;
  --font-overskrift:'Funnel Display',system-ui,sans-serif; --font-tekst:'Funnel Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --kant:clamp(1rem,4vw,3.5rem);
}
body{background:var(--kridt);color:var(--nat);font-family:var(--font-tekst);font-size:1.1rem;line-height:1.55;min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
h1,h2,h3{font-family:var(--font-overskrift);letter-spacing:-.03em;line-height:1}
:focus-visible{outline:3px solid var(--nat);outline-offset:3px}
.nat :focus-visible,body.nat :focus-visible{outline-color:var(--sand)}

/* Timeglasset (logoet som maske). Sandets placering følger sidens dybde. */
.glas{position:relative;aspect-ratio:290/276;-webkit-mask:url(../img/logo.png) center/contain no-repeat;mask:url(../img/logo.png) center/contain no-repeat;background:var(--nat)}
.glas i{position:absolute;left:0;right:0;height:30%;background:var(--sand);transform-origin:bottom;transition:transform .9s var(--ease)}
.glas .s1{top:0}
.glas .s2{bottom:0;transform:scaleY(0)}
[data-dybde="1"] .glas .s1,[data-dybde="1"] .glas .s2,.falder .glas .s1,.falder .glas .s2{transform:scaleY(.5)}
[data-dybde="2"] .glas .s1,[data-dybde="1"] .falder .glas .s1{transform:scaleY(0)}
[data-dybde="2"] .glas .s2,[data-dybde="1"] .falder .glas .s2{transform:scaleY(1)}
.nat .glas{background:var(--kridt)}

/* Top */
.top-linje{display:flex;align-items:center;gap:1rem;padding:1.3rem var(--kant)}
.maerke{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-overskrift);font-weight:700;font-size:1.25rem}
.maerke .glas{width:2.1rem}
.spor{display:flex;gap:.5rem;font-size:1rem;color:var(--dis);margin-left:.6rem;padding-left:1.1rem;border-left:2px solid var(--linje)}
.spor a{text-decoration:none}.spor a:hover{text-decoration:underline}
.nat .spor{color:var(--lys-dis);border-color:#3A3560}
.ring{margin-left:auto;background:var(--nat);color:var(--kridt);padding:.55rem 1.1rem;border-radius:2rem;text-decoration:none;font-weight:600;white-space:nowrap}
.nat .ring{background:var(--sand);color:var(--nat)}

/* Forsiden: valget */
.valg{display:grid;grid-template-columns:1fr minmax(9rem,19rem);gap:2.5rem 5rem;align-items:center;padding:clamp(1.5rem,6vh,5rem) var(--kant) 4rem}
.valg h1{font-size:clamp(2.4rem,5.2vw,4.8rem);font-weight:800;line-height:.95}
.valg h1 span{display:block;font-weight:300}
.valg > .glas{grid-row:1/3;grid-column:2;width:100%}
.doere{list-style:none;padding:0;grid-column:1;max-width:52rem;display:grid;gap:.8rem}
.doere a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem 1.5rem;padding:1.15rem 1.4rem 1.25rem;border:2px solid var(--nat);border-radius:1rem;text-decoration:none;position:relative;isolation:isolate;overflow:hidden}
.doere a::before{content:"";position:absolute;inset:0;background:var(--sand);z-index:-1;transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.doere a:hover::before,.doere a:focus-visible::before{transform:scaleY(1)}
.doere strong{font-family:var(--font-overskrift);font-size:clamp(1.45rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.doere small{font-size:1rem;color:var(--dis);grid-column:1}
.doere .fald-ikon{grid-column:2;grid-row:1/3;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--nat);position:relative;transition:transform .45s var(--ease)}
.doere .fald-ikon::after{content:"";position:absolute;inset:26%;background:var(--sand);-webkit-mask:url(../img/logo.png) center/contain no-repeat;mask:url(../img/logo.png) center/contain no-repeat}
.doere a:hover .fald-ikon,.doere a:focus-visible .fald-ikon{transform:rotate(180deg)}

/* Tilbage-knap */
.tilbage{display:inline-flex;align-items:center;gap:.55rem;margin:.4rem var(--kant) 0;padding:.45rem .95rem .45rem .8rem;border:2px solid currentColor;border-radius:2rem;text-decoration:none;font-weight:600;font-size:1rem}
.tilbage::before{content:"";width:.5rem;height:.5rem;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-left:.15rem}
.tilbage:hover,.tilbage:focus-visible{background:var(--sand);color:var(--nat);border-color:var(--nat)}
.tilbage + .side{padding-top:clamp(1rem,3vh,2.5rem)}

/* Undersider */
.side{padding:clamp(1.5rem,5vh,4rem) var(--kant) 4rem}
.side h1{font-size:clamp(2.3rem,4.6vw,4.2rem);font-weight:800;max-width:15ch;line-height:.98}
.side h1 span{font-weight:300}
.lead{max-width:40ch;font-size:1.2rem;margin-top:1.2rem}
.to{display:grid;grid-template-columns:1.25fr 1fr;gap:3rem 5rem;align-items:start}

.felt{display:flex;gap:.6rem;margin-top:2rem;max-width:34rem}
.felt input{flex:1;min-width:0;font:inherit;padding:.95rem 1.2rem;border:2px solid var(--nat);border-radius:2rem;background:#fff;color:var(--nat)}
.felt.to-felter{flex-wrap:wrap;max-width:40rem}
.felt.to-felter input{flex:1 1 13rem}
.faelde{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.knap{font:inherit;font-weight:700;background:var(--sand);color:var(--nat);border:2px solid var(--nat);border-radius:2rem;padding:.95rem 1.4rem;text-decoration:none;display:inline-block;cursor:pointer;white-space:nowrap}
.knap.moerk{background:var(--nat);color:var(--sand)}
.smaa{font-size:1rem;color:var(--dis);margin-top:1rem;max-width:62ch}
.nat .smaa,.nat .lead{color:var(--lys-dis)}

/* Tidslinje (lodret, med sandkorn) */
.uge{list-style:none;padding:0;border-left:3px solid var(--nat);margin-top:.5rem}
.uge li{padding:0 0 1.3rem 1.4rem;position:relative}
.uge li:last-child{padding-bottom:0}
.uge li::before{content:"";position:absolute;left:-.6rem;top:.3rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--sand);border:3px solid var(--nat)}
.uge li:last-child::before{background:var(--nat)}
.uge b{display:block;font-family:var(--font-overskrift);font-size:1.2rem;line-height:1.25}
.nat .uge{border-color:var(--sand)}.nat .uge li::before{border-color:var(--sand);background:var(--nat)}

/* Gult bånd */
.baand{background:var(--sand);padding:3.5rem var(--kant)}
.baand h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;margin-bottom:1.6rem}
.priser{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--nat)}
.priser div{padding:1.3rem 1.5rem 0 0}
.priser div+div{border-left:2px solid var(--nat);padding-left:1.5rem}
.priser strong{display:block;font-family:var(--font-overskrift);font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1.05}
.priser em{font-style:normal;font-size:1rem;display:block;margin-top:.3rem}

/* Under-valg (to døre et niveau længere nede) */
.under{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.under a,.under div{display:block;padding:1.6rem 1.6rem 1.8rem;border:2px solid currentColor;border-radius:1rem;text-decoration:none;position:relative;isolation:isolate;overflow:hidden}
.under a::before{content:"";position:absolute;inset:0;background:var(--sand);z-index:-1;transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.under a:hover::before,.under a:focus-visible::before{transform:scaleY(1)}
.under a:hover,.under a:focus-visible{color:var(--nat)}
.under h2{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;margin-bottom:.7rem}
.under p{max-width:36ch}
.under .gaa{display:inline-block;margin-top:1.1rem;font-weight:700;border-bottom:3px solid var(--sand)}
.under a:hover .gaa{border-color:var(--nat)}

.jura h1{max-width:none;font-size:clamp(1.9rem,4.6vw,4.2rem)}
.jura h2{font-size:1.35rem;font-weight:700;margin:2.2rem 0 .5rem;max-width:40ch}
.jura p,.jura ul{max-width:64ch}
.jura p+p{margin-top:.6rem}
.jura ul{padding-left:1.2rem;display:grid;gap:.4rem}

/* Priser på Google-siden */
.under .pris{font-family:var(--font-overskrift);font-size:1.8rem;font-weight:700;margin-top:1rem;letter-spacing:-.02em}
.begge{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:1.5rem;padding:1.4rem 1.6rem;border-radius:1rem;background:var(--sand);color:var(--nat)}
.begge p{flex:1 1 18rem}.begge strong{font-family:var(--font-overskrift);font-size:1.6rem;margin-right:.4rem}
.begge .knap{background:var(--nat);color:var(--sand)}
.begge .felt{margin-top:0;flex:2 1 26rem}
.begge input{border-color:var(--nat)}

/* Claus */
.claus{display:grid;grid-template-columns:minmax(10rem,18rem) 1fr;gap:2rem;align-items:center;padding:4rem var(--kant)}
.claus img{width:100%;aspect-ratio:1;object-fit:cover;object-position:52% 18%;border-radius:1rem;display:block}
.claus h2{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:700;max-width:22ch}
.claus p{max-width:44ch;margin-top:.8rem}

.trin{list-style:none;padding:0;max-width:40rem}
.trin li{padding:1.1rem 0;border-bottom:1px solid var(--linje)}
.trin li:first-child{border-top:1px solid var(--linje)}
.trin b{font-family:var(--font-overskrift);display:block;font-size:1.25rem}

body.nat{background:var(--nat);color:var(--kridt)}
.bund{padding:2rem var(--kant);display:flex;gap:1.5rem;flex-wrap:wrap;font-size:1rem;color:var(--dis);border-top:1px solid var(--linje)}
.nat .bund{color:var(--lys-dis);border-color:#3A3560}

/* Samtykke-banner: et lille nat-kort nederst, blokerer ikke siden. Ja og nej er lige store. */
.samtykke{position:fixed;right:1rem;bottom:1rem;z-index:60;max-width:25rem;background:var(--nat);color:var(--kridt);border-radius:1rem;padding:1.2rem 1.3rem 1.3rem;box-shadow:0 18px 40px -18px rgba(27,23,54,.55);font-size:1rem;animation:samtykke-ind .5s var(--ease) both}
.samtykke b{font-family:var(--font-overskrift);font-size:1.15rem;display:block;margin-bottom:.2rem}
.samtykke a{color:var(--sand)}
.samtykke div{display:flex;gap:.6rem;margin-top:1rem}
.samtykke .knap{flex:1;padding:.75rem 1rem;border-color:var(--sand);text-align:center}
.samtykke .knap.lys{background:transparent;color:var(--kridt)}
.samtykke :focus-visible{outline-color:var(--sand)}
body.nat .samtykke{border:2px solid var(--sand)}
@keyframes samtykke-ind{from{transform:translateY(1.5rem);opacity:0}}
.cookie-link{font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.bund .cookie-link{text-decoration:none}.bund .cookie-link:hover{text-decoration:underline}

/* Sandet der falder ved valg */
.fald{position:fixed;width:5px;height:0;background:var(--sand);z-index:50;pointer-events:none;border-radius:3px}

/* Sideskift: ned i systemet = den nye side stiger op nedefra. Op igen = omvendt. */
::view-transition-old(root){animation:.55s var(--ease) both ud-op}
::view-transition-new(root){animation:.65s var(--ease) both ind-nedefra}
html:active-view-transition-type(op)::view-transition-old(root){animation-name:ud-ned}
html:active-view-transition-type(op)::view-transition-new(root){animation-name:ind-oppefra}
@keyframes ud-op{to{transform:translateY(-18%);opacity:0}}
@keyframes ind-nedefra{from{transform:translateY(40%);opacity:0}}
@keyframes ud-ned{to{transform:translateY(18%);opacity:0}}
@keyframes ind-oppefra{from{transform:translateY(-40%);opacity:0}}

@media (max-width:760px){
  .valg{grid-template-columns:1fr;padding-top:1rem}
  .valg > .glas{grid-row:auto;grid-column:1;width:6.5rem;order:-1}
  .spor{display:none}
  .to,.claus{grid-template-columns:1fr}
  .under{grid-template-columns:1fr}
  .priser{grid-template-columns:1fr}.priser div+div{border-left:0;border-top:2px solid var(--nat);padding-left:0}.priser div{padding-bottom:1.2rem}
  .felt{flex-direction:column}
  .felt.to-felter input{flex:none}
  .claus img{max-width:12rem}
  .samtykke{left:1rem;right:1rem;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .glas i,.doere a::before,.under a::before{transition:none}
  .samtykke{animation:none}
}
.mellem{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;margin-top:3rem;margin-bottom:.5rem}