/* /eksempler/: temaer i returportalen. Bygger på site.css (nav, sidefod, knapper, farver). */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero */
.ex-hero{padding-bottom:72px}
.ex-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
/* Væggen: de seks temaer som strimler i deres egne farver og skrifter */
.wall{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wall a{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px;padding:0 12px 0 20px;text-decoration:none;color:var(--t);background:var(--l);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(17,20,24,.06);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.wall li:nth-child(even) a{margin-left:28px}
.wall a:hover{transform:translateX(-8px)}
.wall a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wall b{font-size:1.5rem;line-height:1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall i{flex:none;font:600 .82rem/1 Inter,sans-serif;font-style:normal;padding:10px 14px;border-radius:var(--r);background:var(--p);color:var(--op)}
.wall i.ol{background:transparent;color:var(--pt);box-shadow:inset 0 0 0 1.5px var(--pt)}
.wall li{opacity:0;transform:translateY(10px);animation:wall-in .7s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--k) * 70ms + 150ms)}
@keyframes wall-in{to{opacity:1;transform:none}}
.ex-kicker{display:inline-flex;align-items:center;gap:10px;margin:8px 0 22px;font-size:.86rem;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.ex-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(200,242,90,.28)}
.ex-hero h1{max-width:13ch;font-size:clamp(2.7rem,7.4vw,6rem)}
.ex-hero h1 span{color:var(--deep);opacity:.55}
.ex-lede{max-width:52ch;margin:26px 0 0;font-size:1.12rem;color:var(--ink-2)}

/* Showcase: mørk flade, liste til venstre, telefon til højre (sticky) */
.show{background:#0c0e10;color:#f6f3ec;border-radius:28px;margin:0 12px;overflow:clip}
.show-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.entries{list-style:none;margin:0;padding:10vh 0}
.step{display:grid;align-items:center;min-height:82vh}
.entry{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1rem,2.4vw,1.75rem);align-items:start;margin:0;padding:.5rem 0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;
  color:rgba(246,243,236,.28);transition:color .5s cubic-bezier(.16,1,.3,1);border-radius:.5rem;width:100%}
.entry:hover{color:rgba(246,243,236,.55)}
.entry.on{color:#f6f3ec}
.entry:focus-visible{outline:2px solid var(--lime);outline-offset:8px}
.num{display:inline-block;font:500 .8rem/1 ui-monospace,"SF Mono",Menlo,monospace;padding-top:.85em;transition:color .4s cubic-bezier(.16,1,.3,1);backface-visibility:hidden}
.entry.on .num{color:var(--lime);animation:num-flip .55s cubic-bezier(.16,1,.3,1)}
@keyframes num-flip{from{transform:rotateX(-90deg)}to{transform:rotateX(0)}}
.body{display:grid;gap:0}
.name{display:block;font-size:clamp(2.2rem,1.2rem + 3.4vw,4rem);line-height:1.02;letter-spacing:-.015em}
.tags{display:block;margin-top:14px;font:500 .78rem/1.4 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;text-transform:uppercase}
.tags em{font-style:normal;opacity:.5}
.line{display:block;margin-top:14px;max-width:38ch;font-size:1rem;line-height:1.55;opacity:.8}
.voice{display:block;margin-top:18px;max-width:34ch;font-size:1.05rem;line-height:1.4;font-style:italic}
.voice small{display:block;margin-bottom:4px;font:600 .7rem/1 Inter,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.sw{display:flex;gap:6px;margin-top:20px}
.sw i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.entry:not(.on) .sw{opacity:.35}

.stage{position:relative;min-height:100%}
.dock{position:sticky;top:96px;margin:10vh 0;display:grid;justify-items:center;gap:14px}
.phone{position:relative;width:min(360px,100%);height:min(720px,calc(100vh - 150px));min-height:520px;padding:11px;border-radius:50px;background:#1b1e22;
  box-shadow:0 0 0 1px #2c3036 inset,0 50px 100px -40px rgba(0,0,0,.9),0 0 0 8px rgba(255,255,255,.02)}
.scr{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;isolation:isolate;transform:translateZ(0);background:#f1efea}
.scr iframe{display:block;width:100%;height:100%;border:0;padding-top:30px;background:inherit}
.island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:92px;height:24px;border-radius:20px;background:#0c0e10;z-index:3;pointer-events:none}
.curtain{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px;text-align:center}
.curtain[hidden]{display:none}
.curtain b{font-size:2.1rem;line-height:1.05;letter-spacing:-.01em}
.stage-note{margin:0;text-align:center;font:500 .78rem/1.4 ui-monospace,"SF Mono",Menlo,monospace;color:rgba(246,243,236,.55)}
.stage-note b{color:#f6f3ec;font-weight:500}

/* Det kan I skrue på */
.knobs{padding:110px 24px 40px}
.knobs-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:44px}
.knobs-head h2{margin:0;font-size:clamp(2rem,4.4vw,3.4rem)}
.knobs-head p{margin:0;color:var(--ink-2);max-width:40ch}
.knob-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin:0}
.knob-list > div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.knob-list dt{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.knob-list dd{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.55}

/* CTA */
.ex-cta{padding:64px 24px 110px}
.ex-cta-in{background:var(--deep);color:var(--on-deep);border-radius:28px;padding:clamp(36px,6vw,72px);display:grid;gap:18px;justify-items:start}
.ex-cta h2{margin:0;color:#fff;font-size:clamp(2rem,4.6vw,3.6rem);max-width:16ch}
.ex-cta p{margin:0;max-width:46ch;color:var(--on-deep-2);font-size:1.08rem}
.ex-cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn-line-light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}.btn-line-light:hover{background:rgba(255,255,255,.08)}

/* Mobil: telefonen øverst, temaerne som et vandret galleri, man swiper i */
@media (max-width:900px){
  .ex-hero{padding-bottom:48px}
  .ex-top{grid-template-columns:1fr;gap:36px}
  .wall li:nth-child(even) a{margin-left:16px}
  .wall a{height:54px}
  .wall b{font-size:1.25rem}
  .show{margin:0;border-radius:0}
  .show-in{display:flex;flex-direction:column-reverse;padding:28px 0 36px}
  .stage{min-height:0;padding:0 16px}
  .dock{position:static;margin:0}
  .show{scroll-margin-top:72px}
  .show-in{padding:16px 0 28px}
  .phone{width:min(320px,100%);height:max(420px,calc(100svh - 72px - 300px));min-height:0;border-radius:44px;padding:9px}
  .scr{border-radius:36px}
  .entries{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 6px;margin-top:14px;scrollbar-width:none;overscroll-behavior-x:contain}
  .entries::-webkit-scrollbar{display:none}
  .step{flex:0 0 min(82%,320px);min-height:0;scroll-snap-align:center}
  .entry{grid-template-columns:1fr;gap:4px;height:100%;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:rgba(246,243,236,.5)}
  .entry.on{box-shadow:inset 0 0 0 1.5px var(--lime);background:rgba(255,255,255,.06)}
  .num{padding:0}
  .name{font-size:1.7rem}
  .tags{margin-top:8px}
  .line{display:none}
  .voice{font-size:.92rem;margin-top:10px}
  .sw{margin-top:10px}
  .sw i{width:18px;height:18px}
  .knobs{padding:72px 16px 24px}
  .knobs-head{grid-template-columns:1fr;margin-bottom:24px}
  .knob-list{grid-template-columns:1fr}
  .knob-list > div{grid-template-columns:1fr;gap:6px}
  .ex-cta{padding:40px 16px 72px}
}
@media (prefers-reduced-motion:reduce){
  .entry,.num{transition-duration:.001ms}
  .entry.on .num{animation:none}
  .wall li{animation:none;opacity:1;transform:none}
  .wall a{transition:none}
}