@charset "UTF-8";
/* =========================================================================
   Wibholm Aut. El-installatør — designsystem
   Farverne er hentet fra firmaets eget materiale:
     #007DC2  primærblå, den mest brugte farve i den gamle stylesheet
     #66E3FE  den cyan der blev brugt som hover-farve på den gamle side
     Logoets blå spænder fra #003963 til #017EC3
   ========================================================================= */

@import url('/assets/css/fonts.css');

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand */
  --blue:        #007DC2;
  --blue-600:    #0069A6;
  --blue-700:    #005486;
  --navy:        #0B1B2B;
  --navy-2:      #12283C;
  --navy-3:      #1B3A55;
  --cyan:        #66E3FE;
  --sky:         #5E9BD3;

  /* Neutraler */
  --ink:         #101820;
  --ink-2:       #44535F;
  --ink-3:       #6C7C89;
  --line:        #E3E9EE;
  --line-2:      #EFF3F6;
  --paper:       #FFFFFF;
  --paper-2:     #F6F9FB;
  --paper-3:     #EDF3F7;

  /* Status */
  --ok:          #15803D;
  --warn:        #B45309;
  --err:         #C62828;

  /* Typografi */
  --font-display: 'Instrument Serif', 'Times New Roman', Times, serif;
  --font-sans:    'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.11rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.72vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.35vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.70rem + 2.45vw, 3.95rem);
  --step-5:  clamp(2.70rem, 1.85rem + 4.10vw, 5.60rem);

  /* Rum */
  --sp-1: 0.375rem;  --sp-2: 0.75rem;  --sp-3: 1.125rem;
  --sp-4: 1.75rem;   --sp-5: 2.5rem;   --sp-6: 3.75rem;
  --sp-7: 5.5rem;    --sp-8: 8rem;

  --container: 1180px;
  --container-wide: 1420px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 32, .06), 0 2px 8px rgba(16, 24, 32, .04);
  --shadow:    0 2px 6px rgba(16, 24, 32, .07), 0 12px 32px rgba(16, 24, 32, .08);
  --shadow-lg: 0 8px 24px rgba(11, 27, 43, .12), 0 32px 64px rgba(11, 27, 43, .14);
  --glow:      0 0 0 1px rgba(102, 227, 254, .35), 0 0 32px rgba(102, 227, 254, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
p  { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.25em; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

/* ------------------------------------------------------------------ layout */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 2.5rem, var(--container-wide)); margin-inline: auto; }
.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--paper { background: var(--paper-2); }
.section--navy { background: var(--navy); color: #DCE7F0; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.section--navy .eyebrow { color: var(--cyan); }

.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 62ch; }
.section--navy .lede { color: #A9C0D4; }

.section-head { max-width: 68ch; margin-bottom: var(--sp-5); }
.section-head h2 { font-size: var(--step-3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ knapper */
.btn {
  --btn-bg: var(--blue); --btn-fg: #fff; --btn-bd: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .82em 1.5em; border-radius: 999px; border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: var(--step-0); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,125,194,.28); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--blue); --btn-fg: var(--blue-700); box-shadow: none; }
.btn--light  { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--outline-light:hover { --btn-bd: var(--cyan); --btn-fg: var(--cyan); box-shadow: none; }
.btn--lg { padding: 1em 1.9em; font-size: var(--step-1); }
.btn .icon { width: 1.1em; height: 1.1em; }

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* Forsiden: sidehovedet svæver OVEN PÅ scroll-verdenen i stedet for at
   skubbe den ned. Derfor fixed, ikke sticky, når der er en hero. */
body.has-hero .site-header { position: fixed; left: 0; right: 0; top: 0; }

.site-header--over {
  background: transparent; border-bottom-color: transparent; color: #fff;
}
.site-header--over .nav a { color: rgba(255,255,255,.88); }
.site-header--over .nav a:hover, .site-header--over .nav a.is-active { color: #fff; }
.site-header--over .header-phone { color: #fff; }
.site-header--over .logo-mark--dark { display: none; }
.site-header--over .logo-mark--light { display: block; }
.logo-mark--light { display: none; }

.header-inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 78px;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: 0 0 auto; }
.brand img { width: auto; height: 42px; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .97rem;
  padding: .4em 0; position: relative; white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
  border-radius: 2px;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--blue-700); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.header-phone .icon { color: var(--blue); }

.nav-toggle { display: none; background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: .55rem; cursor: pointer; }
.nav-toggle .icon { width: 22px; height: 22px; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav {
    position: fixed; inset: 78px 0 auto; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--sp-3) 1.25rem var(--sp-4);
    box-shadow: var(--shadow); max-height: calc(100dvh - 78px); overflow-y: auto;
    overscroll-behavior: contain;
    /* Skuffen ligger inde i et gennemsigtigt sidehoved. Uden visibility ville
       dens hvide bund stikke frem over skærmkanten, når den er lukket. */
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .34s var(--ease), visibility 0s linear .34s;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform .34s var(--ease), visibility 0s linear 0s;
  }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { display: block; padding: .85em 0; border-bottom: 1px solid var(--line-2); color: var(--ink); }
  .nav a::after { display: none; }
  .header-actions .btn { display: none; }
  .site-header--over .nav a { color: var(--ink); }
}

/* ============================================================= FORSIDEFILMEN */
/* Filmen koerer af sig selv, saa forsiden fylder ét skaermbillede og resten af
   siden ligger under. Hoejden staar her og ikke i JavaScript, saa der ikke er
   et glimt af en anden hoejde foer motoren naar at starte. */
.world {
  position: relative;
  height: 100svh;
  background: var(--navy);
  color: #fff;
}
/* .world__media, .world__copy og .world__rail er absolut placerede og skal
   have en placeret forfader. Scenen stod tidligere som sticky, fordi .world
   var hoej nok til hele filmen at klaebe i. Det er den ikke laengere: .world
   er praecis 100svh, saa der er nul vandring, og sticky ville kun faa det til
   at ligne en rulleeffekt der ikke findes. */
.world__stage {
  position: relative; height: 100svh;
  overflow: hidden;
  background: var(--navy);
}
.world__media { position: absolute; inset: 0; }
.world__media video,
.world__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  will-change: opacity;
}

/* Plakatbilledet maa gerne tone, for det skiftes i ét spring. */
.world__media img { transition: opacity .28s linear; }

/* Videoerne maa IKKE tone via CSS. Motoren regner selv overtoningen ud for
   hvert billede, og en CSS-overgang oveni giver to animationer af det samme.
   Det gjorde ondt i praksis: naar motoren satte det udgaaende klip til nul og
   gav afkoderen fri, blev elementet ved med at glide ned gennem CSS-overgangen
   i knap et tredjedels sekund. I det stykke havde det ingen billeddata, saa
   plakatbilledet slog igennem, og det gjorde det ved hver eneste overgang. */
.world__media video { transition: none; }
.world__media video[data-active="true"],
.world__media img[data-active="true"] { opacity: 1; }

/* Vignet + bundgradient, så teksten altid kan læses oven på videoen */
.world__stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(11,27,43,.55) 100%),
    linear-gradient(180deg, rgba(11,27,43,.72) 0%, transparent 26%, transparent 52%, rgba(11,27,43,.88) 100%);
}

.world__copy {
  position: absolute; inset: auto 0 0; z-index: 3;
  padding-bottom: max(clamp(2.5rem, 7vh, 4.5rem), env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
/* Alle paneler ligger i SAMME gittercelle. Så får beholderen højde efter det
   højeste panel, og teksten kan ikke løbe ud under skærmkanten. */
.world__copy .container { display: grid; }
.world__panel {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(26px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
  align-self: end;
}
.world__panel[data-active="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.world__panel .inner { max-width: 40rem; }
.world__panel h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1.03; color: #fff;
  margin-bottom: var(--sp-2); text-wrap: balance;
}
.world__panel p { color: #C3D5E4; font-size: var(--step-1); margin-bottom: var(--sp-3); }
.world__panel .eyebrow { color: var(--cyan); }
.world__tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.world__tags li {
  font-size: var(--step--1); font-weight: 500;
  padding: .38em .95em; border-radius: 999px;
  background: rgba(102,227,254,.10); border: 1px solid rgba(102,227,254,.28);
  color: #BFEEFF;
}

/* Fremdriftsskinne i højre side */
.world__rail {
  position: absolute; right: clamp(1rem, 3vw, 2.75rem); top: 50%; z-index: 4;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .9rem; align-items: center;
}
.world__rail button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.26); border: 0;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.world__rail button[aria-current="true"] {
  background: var(--cyan); transform: scale(1.45); box-shadow: 0 0 14px rgba(102,227,254,.8);
}
.world__rail button:hover { background: rgba(255,255,255,.6); }

/* -------------------------------------------------- statisk reserveløsning
   Bruges ved reduceret bevægelse, datasparetilstand eller hvis video ikke
   kan afspilles. Så bliver flyveturen til en almindelig, rolig billedserie. */
.world--stills { height: auto; }
.world--stills .world__stage { position: relative; height: auto; overflow: visible; }
.world--stills .world__stage::after { display: none; }
.world--stills .world__media {
  position: relative; height: auto; inset: auto;
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.world-still {
  display: grid; gap: var(--sp-4);
  align-items: center;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
@media (min-width: 900px) {
  .world-still { grid-template-columns: 1.15fr .85fr; gap: var(--sp-6); }
  .world-still:nth-child(even) > img { order: 2; }
}
.world--stills .world__media img {
  position: relative; opacity: 1; height: auto; width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.world-still__copy { opacity: 1 !important; transform: none !important; pointer-events: auto; }
.world-still__copy h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: 1.05; color: #fff; margin-bottom: var(--sp-2);
}
.world-still__copy p { color: #C3D5E4; }
.world-still__copy .eyebrow { color: var(--cyan); }

@media (max-width: 820px) {
  .world__panel h2 { font-size: var(--step-3); }
  .world__panel p  { font-size: var(--step-0); }
  /* Plads er knap på telefon: skinnen ville lægge sig oven i mærkaterne. */
  .world__rail { display: none; }
  .world__copy { padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 0px)); }
  .world__tags li { font-size: .78rem; padding: .32em .8em; }
}

/* --------------------------------------------------------------- tillidsbar */
.trustbar {
  background: var(--navy-2); color: #C7D8E6;
  border-top: 1px solid rgba(255,255,255,.07);
}
.trustbar__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: var(--sp-4);
}
.trustbar__item { display: flex; gap: .85rem; align-items: flex-start; }
.trustbar__item .icon { width: 1.5rem; height: 1.5rem; color: var(--cyan); flex: 0 0 auto; margin-top: .15rem; }
.trustbar__item strong { display: block; color: #fff; font-size: .98rem; font-weight: 600; }
.trustbar__item span { font-size: var(--step--1); color: #93AABE; }
.trustbar a { color: var(--cyan); }

/* ------------------------------------------------------------------ kort */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-2); font-size: .98rem; margin-bottom: 0; }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: var(--sp-3);
  background: linear-gradient(140deg, rgba(0,125,194,.12), rgba(102,227,254,.16));
  color: var(--blue-700);
}
.card__icon .icon { width: 22px; height: 22px; }
.card a.stretched { position: absolute; inset: 0; }
.card__more {
  display: inline-flex; align-items: center; gap: .4em; margin-top: var(--sp-3);
  font-weight: 600; font-size: .95rem; color: var(--blue-600);
}
.card:hover .card__more .icon { transform: translateX(3px); }
.card__more .icon { width: 1em; height: 1em; transition: transform .25s var(--ease); }

/* --------------------------------------------------------- projektkort */
.project-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.project-card__media {
  aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; position: relative;
}
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.045); }
.project-card__media--empty {
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--paper-3), #DCE8F0);
  color: var(--ink-3);
}
.project-card__media--empty .icon { width: 40px; height: 40px; opacity: .5; }
.project-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.project-card h3 { font-size: var(--step-1); margin: 0; }
.project-card p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.project-card__meta { margin-top: auto; padding-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-3); display: flex; gap: .8rem; flex-wrap: wrap; }

.tag {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .02em;
  padding: .3em .8em; border-radius: 999px;
  background: rgba(0,125,194,.09); color: var(--blue-700);
}
.tag--muted { background: var(--paper-3); color: var(--ink-2); }

/* --------------------------------------------------------------- filtre */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--sp-5); }
.filters a {
  padding: .5em 1.1em; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: .93rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: all .2s var(--ease);
}
.filters a:hover { border-color: var(--blue); color: var(--blue-700); }
.filters a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------------------------------------------------------- medarbejdere */
/* Er der intet billede, vises der intet billede. Ingen pladsholder, ingen
   initialer, ingen tom firkant. Kortet skifter i stedet form, så det ser
   bevidst ud frem for mangelfuldt. */
.person { text-align: left; }
.person__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-3);
  margin-bottom: var(--sp-3);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }

.person--nophoto {
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
}
.person--nophoto h3 { margin-bottom: .1rem; }

/* Et enkelt eller to kort må ikke strækkes ud over hele bredden. */
.team-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (min-width: 620px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); }
}
.person h3 { font-size: var(--step-1); margin-bottom: .15rem; }
.person__role { color: var(--blue-700); font-weight: 600; font-size: .95rem; margin-bottom: var(--sp-2); }
.person__contact { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.person__contact a { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; color: var(--ink-2); }
.person__contact a:hover { color: var(--blue-700); }
.person__contact .icon { width: 1em; height: 1em; color: var(--blue); }

/* ------------------------------------------------------------ formularer */
.form { display: grid; gap: var(--sp-3); }
.form__row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: .93rem; color: var(--ink); }
.field .req { color: var(--err); }
.field .hint { font-size: var(--step--1); color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8em 1em;
  border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--paper); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,125,194,.14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.field .error { font-size: var(--step--1); color: var(--err); font-weight: 500; }

.choice-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice {
  position: relative; display: inline-flex;
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: inline-flex; align-items: center; padding: .55em 1.15em;
  border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  font-size: .93rem; font-weight: 600; color: var(--ink-2);
  transition: all .18s var(--ease);
}
.choice input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice span:hover { border-color: var(--blue); }

/* Honeypot — skjult for mennesker, synlig for robotter */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.consent input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blue); flex: 0 0 auto; }

.alert {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-2);
  display: flex; gap: .8rem; align-items: flex-start;
}
.alert .icon { flex: 0 0 auto; margin-top: .15rem; }
.alert--ok   { background: #F0FAF3; border-color: #BFE5CA; color: #14532D; }
.alert--err  { background: #FEF2F2; border-color: #F6C9C9; color: #7F1D1D; }
.alert--warn { background: #FFFBEB; border-color: #FCE4B0; color: #78350F; }
.alert--info { background: #F0F7FC; border-color: #C4DEF0; color: #0C4A6E; }
.alert strong { display: block; margin-bottom: .15rem; }

/* --------------------------------------------------------------- kontakt */
.contact-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-aside { display: grid; gap: var(--sp-4); position: sticky; top: 100px; }
.contact-block { padding: var(--sp-4); border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); }
.contact-block h3 { font-size: var(--step-1); }
.contact-block .icon { width: 1.05em; height: 1.05em; color: var(--blue); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.contact-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; }
.contact-list a { text-decoration: none; color: var(--ink); font-weight: 500; }
.contact-list a:hover { color: var(--blue-700); }

.callout-emergency {
  border-left: 4px solid var(--warn);
  background: #FFFBEB; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem; color: #78350F;
}

/* ------------------------------------------------------------------- CTA
   Panelet laa foer i samme navy som sidefoden lige under, saa de to floed
   sammen til ét moerkt omraade. Nu er det bygget paa firmablaa, saa det
   staar frem som en handling og ikke som starten paa sidefoden. */
.cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(102,227,254,.20), transparent 55%),
    linear-gradient(135deg, var(--blue-700) 0%, #0A4E7A 45%, var(--navy-3) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5.5vw, 4rem);
  box-shadow: 0 24px 60px rgba(0, 84, 134, .28);
}
/* Stroem-linjen fra scroll-verdenen gaar igen langs toppen */
.cta::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 25%, var(--cyan) 75%, transparent);
  opacity: .8;
}
.cta > * { position: relative; }

.cta__inner {
  display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  align-items: center;
}
@media (max-width: 860px) {
  .cta__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.cta .eyebrow { color: var(--cyan); }
.cta h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: 1.05; color: #fff;
  margin-bottom: var(--sp-2); text-wrap: balance;
}
.cta p { color: #C6DCEC; max-width: 46ch; margin-bottom: 0; }

.cta__actions {
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: stretch;
}
@media (min-width: 861px) { .cta__actions { align-items: flex-end; } }
.cta__actions .btn-call { align-self: stretch; }
@media (min-width: 861px) { .cta__actions .btn-call { align-self: auto; } }

.cta__note {
  display: flex; align-items: center; gap: .5em;
  font-size: var(--step--1); color: #9FBDD4;
}
.cta__note .icon { width: 1.05em; height: 1.05em; color: var(--cyan); }

/* Den lysende strøm-linje, som går igen fra scroll-verdenen */
.currentline {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--cyan) 18%, var(--blue) 50%, var(--cyan) 82%, transparent);
  opacity: .75;
}

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: #93AABE; padding-block: var(--sp-6) var(--sp-4); font-size: .95rem; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-3); letter-spacing: .01em; }
.site-footer a { color: #B7CBDB; text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }
.footer-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1.4fr repeat(3, minmax(150px, 1fr)); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-brand img { height: 46px; width: auto; margin-bottom: var(--sp-3); }
.footer-legal {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between; align-items: center;
  font-size: var(--step--1); color: #7C93A8;
}
.footer-auth {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .45em 1em; border-radius: 999px;
  background: rgba(102,227,254,.08); border: 1px solid rgba(102,227,254,.22);
  color: #BFEEFF; font-weight: 600;
}
.footer-auth .icon { width: 1.05em; height: 1.05em; color: var(--cyan); }

.social { display: flex; gap: .6rem; margin-top: var(--sp-3); }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  transition: all .2s var(--ease);
}
.social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }

/* ------------------------------------------------------------- sidehoved */
.page-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 130%);
  color: #fff; padding-block: clamp(4.5rem, 12vh, 8rem) var(--sp-6);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .6;
}
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-5); color: #fff; margin-bottom: var(--sp-3); }
.page-hero p { color: #A9C0D4; font-size: var(--step-1); max-width: 58ch; }
.breadcrumb { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 var(--sp-3); font-size: var(--step--1); color: #7E97AC; }
.breadcrumb a { color: #A9C0D4; text-decoration: none; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: #4A6479; }

/* ---------------------------------------------------------------- prosa */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-4); }
.prose > :first-child { margin-top: 0; }
.prose ul li { margin-bottom: .4rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6rem; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--cyan));
}

/* ---------------------------------------------------------------- galleri */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { padding: .7rem .9rem; font-size: var(--step--1); color: var(--ink-2); }

/* --------------------------------------------------------- tom tilstand */
.empty-state {
  text-align: center; padding: var(--sp-6) var(--sp-4);
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  color: var(--ink-2); background: var(--paper-2);
}
/* Kun tom-tilstandens eget illustrationsikon, ikke ikoner inde i knapper.
   Uden > blev knapperne 93 px hoeje, fordi telefonikonet arvede 44 px. */
.empty-state > .icon { width: 44px; height: 44px; color: var(--ink-3); margin: 0 auto var(--sp-3); }
.empty-state h3 { color: var(--ink); }

/* ------------------------------------------------------------ animationer */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ berøring */
/* På berøringsskærme skal alt der kan trykkes på være mindst 44 px højt. */
@media (pointer: coarse) {
  .btn, .nav-toggle, .filters a, .choice span,
  .field input, .field select, .field textarea,
  .world__rail button {
    min-height: 44px;
  }
  .btn { padding-block: .9em; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .header-phone, .card__more, .contact-list a, .person__contact a, .site-footer a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .social a { width: 44px; height: 44px; }
}

/* Meget smalle telefoner (fx iPhone SE i portræt) */
@media (max-width: 430px) {
  /* Telefonnummeret som tekst fylder for meget ved 320 px og skubbede
     sidehovedet ud over skærmkanten. Ikonet bliver stående som link. */
  .header-phone span { display: none; }
  .header-phone {
    width: 44px; height: 44px; justify-content: center;
    border: 1.5px solid var(--line); border-radius: 50%;
  }
  .site-header--over .header-phone { border-color: rgba(255,255,255,.35); }
  .header-inner { gap: var(--sp-2); min-height: 68px; }
  .brand img { height: 34px; }
  .nav { inset-block-start: 68px; max-height: calc(100dvh - 68px); }
}

@media (max-width: 380px) {
  .container, .container-wide { width: calc(100% - 1.75rem); }
  .cta { padding: 2rem 1.25rem; }
  .card, .contact-block { padding: var(--sp-3); }
  .cta__actions .btn { width: 100%; }
}

/* Berøringsmål på segment- og valgknapper. Målt til 42,9 px, altså lige
   under kravet på 44 px. Rettet med et gulv frem for mere polstring, så
   knapperne ikke bliver højere end nødvendigt på skrivebordet. */
.choice span, .filters a { min-height: 44px; box-sizing: border-box; }
.choice span { padding-block: 0; }
.filters a { display: inline-flex; align-items: center; }

@media print {
  .site-header, .world, .site-footer nav, .btn { display: none !important; }
  body { color: #000; }
}

/* ------------------------------------------------------------- ringeknap
   "Ring 20 61 20 69" paa én linje blev en bred, tung pille. Her staar
   handlingen som en lille etiket og nummeret som det store, saa knappen
   baade ligner et telefonnummer og kan rammes med en tommelfinger. */
.btn-call {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .7rem 1.4rem .7rem .8rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn-call:hover {
  transform: translateY(-1px);
  border-color: var(--blue);
  box-shadow: 0 8px 22px rgba(0,125,194,.18);
  color: var(--ink);
}
.btn-call__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--blue), var(--blue-700));
  color: #fff;
}
.btn-call__icon .icon { width: 20px; height: 20px; }
.btn-call__text { display: flex; flex-direction: column; line-height: 1.15; }
.btn-call__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.btn-call__number {
  font-size: var(--step-1); font-weight: 700; letter-spacing: .01em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Paa moerk baggrund */
.btn-call--dark {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #fff; box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn-call--dark:hover { background: rgba(255,255,255,.12); border-color: var(--cyan); color: #fff; }
.btn-call--dark .btn-call__icon { background: #fff; color: var(--blue-700); }
.btn-call--dark .btn-call__label { color: #9FBDD4; }
.btn-call--dark .btn-call__number { color: #fff; }

@media (max-width: 420px) {
  .btn-call { width: 100%; justify-content: flex-start; }
}