/* ====== Variabler & basis ====== */
:root {
  --bg1: #0f172a;
  --bg2: #111827;
  --bg3: #1f2937;
  --bg4: #312e81;
  --bg5: #064e3b;
  --fg:  #e5e7eb;
  --accent: #22d3ee;
  --focus: #FB363F;
  --bg-light: #3D4244;
  --bg-dark:  #282C34;
  --font-display: "Winky Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  background-attachment: fixed;
}

.insidekolonne {
  width: 32%;
  float: left;
  margin-right: 1%;
}

/* Links */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--focus) 60%, transparent);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover { color: var(--focus); text-decoration-color: var(--focus); }
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Typografi */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: .5px;
  line-height: 1.05;
  font-weight: 700;
}
h1 { font-size: 7vh; margin: 0 0 1rem 0; }
h2 { font-size: clamp(1rem, 4vw, 4rem); margin: 0 0 1rem 0; }
h3 { font-size: clamp(1rem, 2vw, 2rem); margin: 0 0 1rem 0; }
h4 { font-size: clamp(1rem, 2vw, 2rem); margin: 0 0 1rem 0; }
li, p { max-width: 70ch; font-size: clamp(1rem, 2.2vw, 1.25rem); opacity: .9; }

/* Fælles layout-byggesten */
.track {
  display: flex;
  height: 100svh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;       /* vertikal tilstand overrider til y */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.track { scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }

section {
  position: relative;
  min-width: 100vw;                     /* vertikal tilstand neutraliserer */
  height: 100svh;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  padding: 8vmin;
}

/* Logo (bruges flere steder) */
.logo-fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
}
.logo-fixed img {
  width: 140px;
  height: auto;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.logo-fixed img:hover { opacity: 0.85; }

/* Hotspot + taleboble (fælles) */
#fixedImageHotspot {
  position: fixed;
  pointer-events: auto;
  z-index: 6;
}
.help-bubble {
  position: absolute;
  bottom: 100%;
  right: 15vw;
  background: #fff;
  color: #000;
  padding: 25px;
  border-radius: 15px;
  box-shadow: rgb(27, 30, 32) 0px 20px 30px -10px;
  width: 20vw;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: .4s;
  pointer-events: auto;
}
.help-bubble::after {
  content: "";
  position: absolute;
  bottom: -45px;
  right: 20px;
  border-width: 45px 10px 0 45px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.help-bubble.show { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.bubble-buttons { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.bubble-btn {
  background: var(--fokusfarve, #ff3b30);
  color: #fff; border: 0; padding: .6rem; border-radius: 6px; cursor: pointer;
  font-size: 20px; text-decoration: none; display: inline-block; transition: background-color .3s ease;
}
.bubble-btn:hover { background: #e62e26; }

/* Understreget effekt */
.understreget { position: relative; display: inline-block; }
.understreget::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px; bottom: -2px;
  background: var(--focus); border-radius: 9999px;
}

/* “Derfor”-kort */
.derfor-grid { display: grid; gap: 1.2rem; }
@media (min-width: 992px) {
  .derfor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.derfor { padding: 1rem; border-radius: 10px; }
.derfor h4 { margin: 0 0 .4rem 0; }
.derfor p { margin: 0; }

/* Tjekliste */
ul { list-style: none; padding: 0; margin: 0 0 25px 0; }
ul li {
  position: relative; padding-left: 2em; margin-bottom: .5em; line-height: 1.4;
}
ul li::before {
  content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  background-color: var(--focus); color: #fff; font-weight: bold; font-size: .9em;
  width: 1.4em; height: 1.4em; display: flex; align-items: center; justify-content: center; border-radius: 50%;
}

/* Knapper */
.btn-red {
  --btn-bg: #FB363F; --btn-bg-hover: #e12f37; --btn-bg-active: #c9282f; --btn-fg: #FFF;
  align-items: center; gap: .5rem; background: var(--btn-bg); color: var(--btn-fg);
  border: none; border-radius: 999px; padding: .65rem 1rem;
  font: 500 15px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer; transition: background-color .15s ease, transform .05s ease;
  font-size: 20px; margin-right: 25px;
}
.btn-red .btn-icon { display: inline-flex; }
.btn-red:focus-visible { outline: 3px solid rgba(251, 54, 63, .35); outline-offset: 2px; }
.btn-red:hover { background: #000; animation: shake .4s ease-in-out; }
.btn-red:active { background: var(--btn-bg-active); transform: translateY(1px); }
.btn-red:disabled { opacity: .6; cursor: not-allowed; }

/* Fælles UI-stumper */
.hint { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); opacity: .6; font-size: .95rem; z-index: 11; }
.fixed-image {
  position: fixed; right: calc(1rem + env(safe-area-inset-right));
  bottom: env(safe-area-inset-bottom); max-width: 35vw; height: auto; max-height:75vh;z-index: 5; pointer-events: none; transition: opacity .35s ease;
}

/* Kunder-stream baggrund (kan bruges flere steder) */
section.s5 { position: relative; overflow: hidden; }
section.s5 .kunder-stream {
  position: absolute; inset: 0; z-index: 0; opacity: .25; pointer-events: none;
}
section.s5 main { position: relative; z-index: 2; }
.kunder-stream__img { opacity: .8; mix-blend-mode: lighten; transition: opacity .3s; }

/* Burger + menu-overlay + pile (fælles) */
.burger {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top));
  right: calc(1rem + env(safe-area-inset-right));
  background: var(--focus); padding: 10px; height: 50px; width: 50px; border-radius: 50%;
  display: block; cursor: pointer; z-index: 20;
}
.burger div { background: var(--fg); height: 3px; border-radius: 2px; transition: all .4s ease; margin-bottom: 25%; margin-top: 10%; }
.burger.active div:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.burger.active div:nth-child(2) { opacity: 0; }
.burger.active div:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.menu-overlay {
  position: fixed; top: 0; right: 0; width: 0; height: 0;
  background: rgba(15,23,42,0.97); color: var(--fg);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden; clip-path: circle(0% at 100% 0); transition: clip-path .7s ease-in-out; z-index: 15;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-left: 1px solid color-mix(in srgb, var(--focus) 20%, transparent);
}
.menu-overlay.open { width: 100vw; height: 100svh; clip-path: circle(150% at 100% 0); }
.menu-overlay a { text-decoration: none; color: var(--fg); font-size: clamp(1.25rem,4vw,2rem); margin: 1rem 0; transition: color .2s ease; }
.menu-overlay a:hover { color: var(--focus); }

.arrow {
  position: fixed; color: var(--fg); opacity: .6; cursor: pointer; user-select: none;
  transition: transform .5s ease, opacity .3s; animation: pulse 2s ease-in-out infinite; z-index: 12;
  padding: .75rem 1rem; border-radius: 999px; background: rgba(0,0,0,.25); backdrop-filter: blur(6px);
  font-size: 25px;
}
.arrow:hover { opacity: 1; }
.arrow.left { left: calc(.5rem + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.arrow.right { right: calc(.5rem + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }

@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes shake {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 0); }
  40% { transform: translate(3px, 0); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(3px, 0); }
  100% { transform: translate(0); }
}

/* Kort/grid */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding-right: 10vw;
}
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cards { grid-template-columns: 1fr; } }

/* Sektionstitler – basis (bruges i begge tilstande, vertikal overrider/detajler) */
.section-titles {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 1rem;
  z-index: 14; font-size: 1rem; padding: .5rem 1rem;
  background: rgba(0,0,0,.25); backdrop-filter: blur(6px);
  border-radius: 999px; overflow: visible; max-width: min(92vw, 1100px);
  scroll-snap-type: none; touch-action: none;
}
.section-titles button,
.section-titles a {
  position: relative; background: none; border: none; color: var(--fg);
  font: inherit; cursor: pointer; transition: transform .35s ease, color .35s ease, opacity .35s ease;
  opacity: .8; white-space: nowrap; padding: .25rem .5rem; text-decoration: none;
}
.section-titles button:hover,
.section-titles a:hover { color: var(--focus); opacity: 1; }
.section-titles button::after,
.section-titles a::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -0.35rem;
  height: 2px; background: var(--focus); border-radius: 2px; transform: scaleX(0);
  transform-origin: left; transition: transform .3s ease; opacity: .9;
}
.section-titles [aria-current="true"],
.section-titles .is-active {
  color: var(--focus); transform: scale(1.2); opacity: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--focus) 40%, transparent);
}
.section-titles [aria-current="true"]::after,
.section-titles .is-active::after { transform: scaleX(1); }

/* Responsiv basis */
@media (max-width: 1300px) {
  h1 {font-size: clamp(2rem, 4vw, 3rem);}
  h2 {font-size: clamp(1.5rem, 4vw, 4rem);}
  h3 {font-size: clamp(1.3rem, 4vw, 4rem);}
  .logo-fixed {display:none;}
  .help-bubble {width: 25vw;}
}
@media (max-width: 768px) {
  .section-titles { display: none; }
  section { place-items: normal; padding: 15px; }
  .burger { top: 5px; right: 5px; }
  .arrow { font-size: 14px; height: 55px; padding: 20px; bottom: calc(1.5rem + env(safe-area-inset-bottom)); top: auto; transform: none; }
  .arrow.left { left: 1.5rem; top: 88%; }
  .arrow.right { right: 1.5rem; top: 88%; }
  .understreget::after { height: 5px; }
  .logo-fixed {display:none;}
  
  p, li {font-size: 15px;line-height:22px;}
  .btn-red {font-size: 16px;padding: 10px 25px !important;}
  
    main {margin-top: 80px !important;}
  
    section {
    place-items: normal;
    padding: 15px;
    height: unset !important;
    scroll-snap-align: none;
    display: block;
  }
  
}












.cc-overlay{position:fixed;inset:0;background:rgba(50,50,50,.75);display:flex;align-items:center;justify-content:center;z-index:99999;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#000}
.cc-modal{background:#fff;color:#000;border-radius:16px;padding:2rem;max-width:520px;width:calc(100% - 2rem);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cc-modal h2{font-size:1.3rem;margin-bottom:1rem}
.cc-modal p{margin-bottom:1.5rem;line-height:1.5}
.cc-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.cc-btn{background:#000;color:#fff;border:none;padding:.75rem 1.75rem;border-radius:50px;font-weight:600;font-size:20px;cursor:pointer;transition:.2s}
.cc-btn:hover{opacity:.85;transform:translateY(-1px)}
details{text-align:left;margin-top:1rem;font-size:.9rem}
details summary{cursor:pointer;font-weight:600}
ul.cc-cookie-list{list-style:none;padding:0;margin:.5rem 0 0}
ul.cc-cookie-list li{margin:.5rem 0}
.cc-kv{display:grid;grid-template-columns:110px 1fr;gap:2px 10px}