/* FAKTIVE kontaktsiden 2026 (kontakt.html). Hører sammen med assets/kontakt-2026.js.
   To flader: toppen i creme helt op bag menuen med de tre veje (ring, skriv, kom forbi) og et
   nordisk foto af en supporter med headset, og formularen, der sammen med footeren står som én
   aubergine flade (.s12-slut i sektion12-2026.css).

   Taget ud fra den gamle side, fordi det gentog sig: de seks kort (telefon, to adresser, demo,
   eksisterende kunde, virksomhed), "ingen salgstale" to gange, telefonnummeret seks gange og
   virksomhedsoplysningerne, som står i footeren. "Skriv demo i formularen" er blevet til et valg
   i formularen. Ringene fra prissidens kontakt bruges ikke her, så siderne ikke ligner hinanden. */

:root{--kt-aub:#3C2A44; --kt-kobber:#B23F14; --kt-orange:#E45724; --kt-tekst:#5C4F48; --kt-streg:rgba(60,42,68,.16)}

/* ---------- toppen ---------- */
nav + section.hero.kt-top{
  min-height:0 !important;
  padding:calc(var(--nav-h) + clamp(56px,7vw,112px)) 0 clamp(72px,8vw,120px) !important;
}
section.hero.kt-top{display:flex;flex-direction:column;justify-content:center;position:relative;overflow:clip;isolation:isolate;
  background:#F2E7DC;color:#2A2321;grid-template-columns:none;gap:0}
/* toppen fylder skærmen, så formularen først kommer frem, når man scroller */
@media (min-width:901px){
  nav + section.hero.kt-top{min-height:100svh !important;padding:calc(var(--nav-h) + 40px) 0 56px !important}
}
.kt-in{width:100%}
.kt-top::after,.kt-top::before{display:none !important}

/* fotoet står forankret i højre kant og toner ud mod teksten, som fotoet ved spørgsmålene. Foroven toner det
   også ud, så menuen står frit på cremen (som toppens fotos på regelsætssiderne): to masker, hvor kun det,
   begge viser, står frem */
.kt-foto{position:absolute;right:0;top:0;bottom:0;width:min(56vw,920px);margin:0;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.6) 30%,#000 62%),
                     linear-gradient(180deg,transparent 0,transparent calc(var(--nav-h) - 10px),#000 calc(var(--nav-h) + 150px));
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.6) 30%,#000 62%),
                     linear-gradient(180deg,transparent 0,transparent calc(var(--nav-h) - 10px),#000 calc(var(--nav-h) + 150px));
          mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.kt-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;
  transform:scale(1.06);transition:transform 2.2s cubic-bezier(.16,1,.3,1)}
.kt-klar .kt-foto img{transform:none}

.kt-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 32px}
.kt-in > *{max-width:560px}
.kt-top .kicker{color:var(--kt-kobber) !important;font-size:12px !important;letter-spacing:.24em !important;margin-bottom:22px !important}
section.hero.kt-top h1{font-size:clamp(40px,4.6vw,72px) !important;line-height:1.04 !important;color:var(--kt-aub);max-width:10em;margin:0 0 clamp(36px,4vw,52px);text-wrap:balance}
.kt-top h1 i{font-style:normal;color:var(--kt-orange)}

/* de tre veje: hårfine linjer, etiket i venstre spalte */
.kt-veje{margin:0;border-top:1px solid var(--kt-aub)}
.kt-vej{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--kt-streg)}
.kt-vej dt{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kt-kobber);padding-top:6px}
.kt-vej dt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kt-vej dd{margin:0}
/* Lucide-symboler med tynde streger; tegnes frem af kontakt-2026.js (pathLength=1) */
.kt-ikon{width:30px;height:30px;fill:none;stroke:var(--kt-orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;transform-origin:50% 50%}
.kt-ikon path,.kt-ikon circle{stroke-dasharray:1;stroke-dashoffset:0}
.kt-ikon-pin{transform-origin:50% 100%}
/* cifrene i nummeret, som de tastes */
.kt-ciffer{display:inline-block;white-space:pre}
.kt-vej p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--kt-tekst);max-width:30em}
.kt-tel{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.1;
  color:var(--kt-aub);text-decoration:none;letter-spacing:-.01em}
.kt-til{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:20px;color:var(--kt-aub);
  text-decoration:none;border-bottom:1px solid rgba(60,42,68,.3);transition:border-color .25s ease}
.kt-tel:hover{color:var(--kt-kobber)}
.kt-til:hover{border-color:var(--kt-aub)}
.kt-steder{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.kt-steder address{font-style:normal;font-size:15.5px;line-height:1.55;color:var(--kt-tekst)}
.kt-steder b{display:block;margin-bottom:4px;font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:18px;color:var(--kt-aub)}
.kt-steder a{display:table;margin-top:8px;font-size:14px;color:var(--kt-kobber);text-decoration:none;
  border-bottom:1px solid rgba(178,63,20,.35)}
.kt-steder a:hover{border-color:var(--kt-kobber)}

/* toppen kommer frem roligt: overskrift, så vejene én ad gangen */
.kt-js .kt-in > *{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.kt-js .kt-vej{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.kt-klar .kt-in > *,.kt-klar .kt-vej{opacity:1;transform:none}
.kt-klar .kt-in > h1{transition-delay:.08s}
.kt-klar .kt-veje{transition-delay:.16s}
.kt-klar .kt-vej:nth-child(1){transition-delay:.28s}
.kt-klar .kt-vej:nth-child(2){transition-delay:.38s}
.kt-klar .kt-vej:nth-child(3){transition-delay:.48s}

/* ---------- formularen ---------- */
/* ringene hører til prissiden; her står kun det bløde lysskær */
.kt-slut .s12-signal{display:none}
/* valget af emne: fire felter i samme form som tekstfelterne, det valgte med kobberkant */
#demo.s12-klar .kt-emne{border:0;margin:0 0 16px;padding:0;min-width:0}
#demo.s12-klar .kt-emne legend{padding:0;margin:0 0 7px;color:var(--s12-sand);font-size:13px;font-weight:500}
.kt-emner{display:flex;flex-wrap:wrap;gap:8px}
#demo.s12-klar .kt-emner label{position:relative;display:block;margin:0;cursor:pointer}
#demo.s12-klar .kt-emner input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.kt-emner span{display:grid;place-items:center;min-height:44px;padding:8px 16px;white-space:nowrap;border-radius:10px;text-align:center;
  font-size:14px;line-height:1.25;color:#EADDD2;background:rgba(20,12,24,.35);border:1px solid rgba(242,231,220,.16);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.kt-emner label:hover span{border-color:rgba(242,231,220,.3)}
.kt-emner input:checked + span{border-color:var(--s12-orange);background:rgba(228,87,36,.12);color:#fff}
.kt-emner input:focus-visible + span{box-shadow:0 0 0 3px rgba(228,87,36,.3)}

@media (max-width:900px){
  nav + section.hero.kt-top{display:block;padding:var(--nav-h) 0 64px !important}
  .kt-foto{position:relative;inset:auto;width:100%;height:clamp(240px,52vw,380px);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 60%,transparent)}
  .kt-in{padding-top:8px}
}
@media (max-width:560px){
  .kt-in{padding-left:20px;padding-right:20px}
  .kt-vej{grid-template-columns:1fr;gap:10px}
  .kt-vej dt{padding-top:0;flex-direction:row;align-items:center}
  .kt-ikon{width:24px;height:24px}
  .kt-steder{grid-template-columns:1fr 1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .kt-js .kt-in > *,.kt-js .kt-vej{opacity:1;transform:none;transition:none}
  .kt-foto img{transform:none;transition:none}
}