/* Netdk — SMB site core styles */
:root {
  --bg: #FAF8F5;
  --bg-warm: #F2EDE5;
  --ink: #161413;
  --ink-soft: #3A332F;
  --muted: #6B6560;
  --line: #E4DED5;
  --accent: #FF5A1F;
  --accent-soft: #FFE8DE;
  /* Var #D94712, som kun giver 4,30:1 mod hvid og derfor ikke består WCAG AA's
     krav på 4,5:1 for brødtekst. --accent-deep bruges til alle de små ting —
     labels, links, ikoner, priser — så den skal kunne læses. #B23A0E giver
     5,9:1. Der hvor farven i stedet er baggrund under hvid tekst
     (.btn-primary:hover), bliver kontrasten også bedre af at gøre den mørkere.
     Den signaturorange --accent er uændret. */
  --accent-deep: #B23A0E;
  --ok: #1E6F4B;
  --warn: #B8860B;
  --danger: #B8342A;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(22,20,19,0.04), 0 2px 8px rgba(22,20,19,0.04);
  --shadow-md: 0 4px 16px rgba(22,20,19,0.06), 0 20px 48px rgba(22,20,19,0.06);
  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

.serif { font-family: 'Instrument Serif', 'Serif Fallback', 'Iowan Old Style', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', 'Mono Fallback', ui-monospace, Menlo, monospace; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
h1 { font-size: clamp(44px, 7vw, 92px); }
h2 { font-size: clamp(32px, 4.5vw, 56px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(64px, 10vw, 120px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  /* 44px er minimum for et touch-target. Med 14px lodret padding og 15px tekst
     blev knapperne 39px høje — lige under grænsen. */
  min-height: 44px;
}
.btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 20px rgba(255,90,31,0.28);
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); background: white; }
.btn-dark {
  background: var(--ink);
  color: var(--bg);
}
.btn-dark:hover { background: #000; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.scrolled { border-color: var(--line); }
/* Navigationen bygges af JavaScript og indsættes i [data-nav]. Indtil scriptet
   har kørt er pladsholderen 0px høj, og hele siden hopper 97px ned i det øjeblik
   navigationen lander. Det gav en layoutforskydning på 0,118 CLS på HVER side.
   97px = nav-inner 96px + 1px bundkant. */
[data-nav] { min-height: 97px; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 96px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
}
/* <picture> er en inline-boks og ville derfor bryde alle eksisterende
   "X img { width:100% }"-regler. display: contents fjerner boksen helt, så
   <img> layoutmæssigt står som direkte barn af den oprindelige forælder og
   alle nuværende selektorer virker uændret. */
picture, .logo-pic { display: contents; }

.logo-img { height: 41px; width: auto; display: block; }
.footer .logo-img { height: 80px; }
.footer-marks { margin-top: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 20px; letter-spacing: -0.03em;
}
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
  position: relative;
  overflow: hidden;
}
.logo-mark::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 8px;
  background: var(--accent);
}
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.nav-link:hover { background: var(--bg-warm); color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.nav-dropdown { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px;
  min-width: 280px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.nav-dropdown:hover .nav-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-panel-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
.nav-panel-item:hover { background: var(--bg-warm); color: var(--ink); }
.nav-panel-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Cards */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #D5CEC2; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
/* Spørgsmålet er et h3 af hensyn til overskriftshierarkiet — søgemaskiner og
   AI-crawlere læser spørgsmål/svar langt bedre, når spørgsmålet er en overskrift
   og ikke bare en knap. Visuelt skal h3'et være usynligt; knappen bærer stylingen. */
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  background: none; border: none; text-align: left;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
}
.faq-q:hover { color: var(--accent-deep); }
.faq-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-warm);
  display: grid; place-items: center;
  transition: background .2s ease, transform .3s ease;
  flex: none;
}
.faq-item.open .faq-toggle { background: var(--accent); color: white; transform: rotate(45deg); }
/* Animeres via grid-template-rows i stedet for max-height. Med max-height: 600px
   blev lange svar klippet på smalle skærme — et svar på 400 tegn fylder over
   600px ved 360px bredde. 0fr → 1fr animerer til indholdets faktiske højde,
   uanset hvor højt det er. */
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease, padding .35s ease;
  color: var(--ink-soft);
}
.faq-a > * { overflow: hidden; min-height: 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; padding: 0 0 24px 0; }
.faq-a p { max-width: 70ch; margin: 0; }
.faq-a a { color: var(--accent-deep); text-decoration: underline; }

/* Footer */
.footer {
  background: var(--ink);
  color: #B5ADA5;
  padding: clamp(64px, 8vw, 96px) 0 32px;
  margin-top: 80px;
}
.footer a { color: #D9D3CB; }
.footer a:hover { color: white; }
.footer h3 { color: white; font-size: 14px; font-weight: 500; margin-bottom: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
.footer-intro { font-size: 14px; }
.direct-sub { font-size: 13px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

/* LinkedIn/Google i footeren. 44x44 så de er store nok at ramme med en finger. */
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: #2A2523; color: #CFC8C1;
  transition: background .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--accent); color: white; }
/* Juridiske links over copyright-linjen */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding-bottom: 20px; font-size: 13px;
}
.footer-legal a { color: #A8A29B; }
.footer-legal a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid #2A2523;
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #8A827B;
  flex-wrap: wrap; gap: 16px;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ==========================================================================
   Mobil — hardblock-tjeklisten fra design.md
   ========================================================================== */

/* NB: alle selektorer herunder er præfikset med "body".
   Sidernes egne <style>-blokke står i <head> EFTER denne fil, så en regel som
   ".layer-card p { font-size: 15px }" på siden vinder over en identisk selektor
   her — samme specificitet, senere i kaskaden. "body" foran gør specificiteten
   højere, så mobilreglerne slår igennem uden !important. */

/* Touch-targets. Gælder på alle berøringsskærme, ikke kun smalle: en tablet i
   landskab er 1024px bred og betjenes stadig med fingeren. Grænsen er 44x44px. */
@media (hover: none), (pointer: coarse) {
  /* "Læs mere →" og lignende inline-links i kort. Padding frem for højde, så
     teksten bliver stående hvor den står. */
  body .svc-link,
  body .article-related li a { padding: 12px 0; min-height: 44px; align-items: center; }
  /* Logoet er 41px højt. Padding giver et rambart felt uden at flytte billedet. */
  body .nav .logo { padding: 4px 0; }
  /* Footer-links: 14px tekst gav 20px høje mål. */
  body .footer-col ul { gap: 4px; }
  body .footer-col ul li a,
  body .footer-legal a,
  body .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  body .footer-legal { gap: 0 24px; }
  /* Telefon- og mailadresser i footeren er links, ikke løbende tekst. */
  body .footer-col p a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Brødkrummer er navigation. 16px høje links er for små at ramme. */
  body .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Telefon og mail i kontaktkortene. */
  body .direct-item a,
  body .hours a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 600px) {
  /* design.md kræver mindst 16px på brødtekst. Desktop-skalaen bruger 13-15px
     til sekundær tekst — fornuftigt på en stor skærm, for småt på en telefon.
     Her hæves det, der faktisk skal læses. Labels, eyebrows og fineprint
     beholder deres størrelse, fordi de er etiketter og ikke løbende tekst. */
  body .svc-card p, body .layer-card p, body .val p, body .card p,
  body .sec-head p, body .pkgs-head p, body .faq-a p,
  body .legal p, body .legal li,
  body .layer-card ul li, body .svc-incl li span, body .threat p,
  body .svc-detail .lede, body .cert p, body .coworkit-card p,
  body .pkg-desc, body .pkg p, body .t-item p, body .founder-role,
  body .direct-item p, body .hours dd, body .hours dt,
  body .stack-layer .desc, body .legal td, body .legal th,
  body .footer-col > p, body .jobs-open-note, body .form-note,
  body .blog-card p, body .article-body p, body .article-body li,
  body .svc-inline p, body .local-note, body .legal-note div,
  body .process-step p, body .pkg .desc, body .footer-intro, body .form-note,
  body .bullets li span, body .svc-inline p, body .direct-sub {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Overskrifter i talkort var 15px — mindre end brødteksten under dem. */
  body .threat h3 { font-size: 17px; }

  /* Etiketter, mærkater og fineprint er ikke brødtekst og må gerne være mindre,
     men 11px er under grænsen for at kunne læses på en telefon. Gulvet er 13px. */
  body .pkg .fineprint, body .footer-bottom, body .blog-card .meta,
  body .article-meta, body .nav-panel-item small { font-size: 13px; }
  body .svc-link, body .footer-col ul, body .footer-legal { font-size: 15px; }
}

/* Mobile */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Smalle skærme: .btn har white-space: nowrap, så lange CTA-tekster som
   "Bestil gratis sikkerhedsoverblik" og "Se hele sikkerhedsstakken" skubbede hele siden
   ud i vandret scroll ved 320px. Her må teksten ombrydes i stedet. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* Selection */
::selection { background: var(--accent); color: white; }

/* Tweaks panel */
.tweaks-panel {
  position: fixed; bottom: 24px; left: 24px; z-index: 70;
  background: white; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-md);
  padding: 16px; width: 280px;
  font-size: 13px;
  display: none;
}
.tweaks-panel.on { display: block; }
.tweaks-title { font-weight: 600; font-size: 13px; margin-bottom: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.tweak-row { margin-bottom: 12px; }
.tweak-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.tweak-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak-opt {
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-warm); border: 1px solid transparent;
  font-size: 12px; cursor: pointer; font-family: inherit;
}
.tweak-opt.sel { background: var(--ink); color: white; }

/* Variant: Bold */
body[data-variant="bold"] {
  --bg: #FFF4EC;
  --bg-warm: #FFE3CE;
  --accent: #E84118;
}
body[data-variant="bold"] h1, body[data-variant="bold"] h2 { font-family: 'Instrument Serif', 'Serif Fallback', Georgia, serif; font-weight: 400; letter-spacing: -0.035em; }

/* Variant: Dark */
body[data-variant="dark"] {
  --bg: #14110F;
  --bg-warm: #1F1B18;
  --ink: #F5F0E8;
  --ink-soft: #CFC7BB;
  --muted: #8A827B;
  --line: #2A2522;
}
body[data-variant="dark"] .card { background: #1F1B18; }
body[data-variant="dark"] .nav { background: color-mix(in oklab, #14110F 85%, transparent); }
body[data-variant="dark"] .btn-ghost { color: var(--ink); }
body[data-variant="dark"] .btn-dark { background: var(--accent); }
body[data-variant="dark"] .logo-mark { background: var(--accent); }

/* ========== Kontaktwidget ==========
   Erstattede Telavox-chatten. Telavox lagde et unikt id (TVX_LID_CONFIG) i
   browserens lokale lager allerede ved sideindlæsning — før samtykke — og var
   derfor den sidste grund til at siden skulle have et cookiebanner. Denne
   widget er vores egen: ingen tredjepart, ingen cookies, ingen lagring.
   Formularen poster til /api/leads, samme endpoint som kontaktsiden. */
.kw {
  position: fixed;
  z-index: 900;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* --- Åbn-knappen --- */
.kw-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 56px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kw-launch:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,20,19,.10), 0 24px 56px rgba(22,20,19,.10); }
.kw-launch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.kw-av {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-warm);
}
.kw-av img { width: 100%; height: 100%; object-fit: cover; }
.kw-launch-txt { white-space: nowrap; }

/* Statusprikken viser om telefonen bliver taget lige nu. Farven sættes af JS ud
   fra dansk tid, så den er rigtig uanset hvor den besøgende sidder. */
.kw-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }
.kw-dot[data-open="1"] { background: var(--ok); }

/* --- Panelet --- */
.kw-panel {
  width: min(370px, calc(100vw - 32px));
  max-height: min(672px, calc(100vh - 100px));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ingen synlig rullebar. Paa lave skaerme kan der stadig rulles med hjul,
     finger og tastatur — der er blot ingen bjaelke der skaerer panelet over. */
  scrollbar-width: none;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(22,20,19,.08), 0 32px 72px rgba(22,20,19,.12);
  /* Lukket tilstand: visibility skjuler også for skærmlæsere og tab-rækkefølgen,
     og inert er et ekstra værn i browsere der understøtter det. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transform-origin: bottom right;
  pointer-events: none;
  /* visibility er en diskret egenskab: animeres den, skifter den foerst midtvejs
     i overgangen. Det betoed at fokus ikke kunne saettes i foerste felt lige
     efter aabning, fordi panelet stadig var usynligt. Derfor skifter den nu
     oejeblikkeligt ved aabning og med 0,22s forsinkelse ved lukning, saa
     udtoningen kan koere faerdig foerst. */
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.kw-panel::-webkit-scrollbar { display: none; }
.kw-panel.open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.kw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.kw-head .kw-av { width: 46px; height: 46px; }
.kw-head-txt { min-width: 0; flex: 1; }
.kw-name, .kw-role, .kw-row-b { display: block; }
/* Paa mobil flyttes fokus til overskriften i stedet for foerste felt, saa der
   ikke springer et tastatur op og daekker panelet. Overskriften kan ikke naas
   med tab, saa fokusringen ville kun se ud som en fejl. */
.kw-name:focus { outline: none; }
.kw-name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.kw-role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kw-close {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: -8px -8px -8px 0;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
}
.kw-close:hover { background: var(--bg-warm); color: var(--ink); }
.kw-close:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.kw-body { padding: 14px 18px 0; }

/* --- Direkte kontakt --- */
.kw-direct { display: grid; gap: 4px; }
.kw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
  min-height: 44px;
  transition: background .18s ease;
}
.kw-row:hover { background: var(--bg); }
.kw-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.kw-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); }
.kw-row-txt { min-width: 0; }
.kw-row-b { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.kw-row-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* --- Formularen --- */
.kw-sep { display: flex; align-items: center; gap: 12px; margin: 10px 0 10px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.kw-sep::before, .kw-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.kw-form .kw-field { margin-bottom: 7px; }
.kw-form .kw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kw-form label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.kw-form input, .kw-form textarea {
  width: 100%;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 11px;
  min-height: 44px;
}
.kw-form input:focus, .kw-form textarea:focus { outline: none; border-color: var(--ink); background: white; }
.kw-form textarea { min-height: 54px; resize: vertical; }
.kw-submit {
  position: sticky;
  bottom: 0;
  padding: 8px 0 12px;
  background: white;
}
/* Blød overgang over bundfeltet, så indhold der ruller under det ikke bare
   stopper på en hård kant. */
.kw-submit::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), white);
  pointer-events: none;
}
.kw-submit button { width: 100%; justify-content: center; }
.kw-err { display: none; color: var(--danger); font-size: 13px; margin-top: 10px; }
.kw-err.show { display: block; }
.kw-note { font-size: 11.5px; color: var(--muted); margin: 7px 0 0; line-height: 1.45; text-align: center; }
.kw-note a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Tak-tilstand --- */
.kw-done { display: none; padding: 28px 18px 30px; text-align: center; }
.kw-done.show { display: block; }
.kw-done-ic { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); }
.kw-done h3 { font-size: 20px; margin-bottom: 8px; }
.kw-done p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }

/* Smalle skærme: panelet fylder bredden, og teksten på knappen ryger, så
   boblen ikke dækker indhold. */
@media (max-width: 420px) {
  body .kw { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  body .kw-launch { padding: 6px; }
  body .kw-launch-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body .kw-panel { width: calc(100vw - 28px); }
  /* Email og telefon bliver ved med at stå side om side. Én kolonne kostede
     66px i højden, og det var forskellen på om der var noget at rulle på. */
}

/* Adressen ryger når højden er knap. Telefon og mail er handlingerne, og
   adressen står også i footeren. */
@media (max-height: 740px) {
  body .kw-row-adr { display: none; }
}

/* Er der ikke plads til både panel og åbn-knap, skjules knappen mens panelet
   er åbent — der er et kryds i panelets hoved at lukke med. Det frigør 68px
   (knappen plus mellemrummet), og det var det der gjorde at panelet på små
   telefoner ikke havde noget at rulle på, og i landskab ikke stak op over
   skærmens kant. */
@media (max-height: 780px), (max-width: 420px) {
  body .kw-panel.open + .kw-launch { display: none; }
  body .kw-panel { max-height: calc(100vh - 30px); }
}
.kw-alt { display: none; }

/* Telefon i landskab: under ~480px hoejde er der ikke plads til en formular med
   fire felter, og det er heller ikke det man vil paa en 390px hoej skaerm. Der
   staar kontaktoplysningerne alene med et link videre til kontaktsiden — saa er
   der stadig intet at rulle paa. */
@media (max-height: 480px) {
  body .kw-form, body .kw-sep { display: none; }
  body .kw-row-adr { display: flex; }
  body .kw-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 14px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
  }
  body .kw-alt:hover { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  .kw-launch, .kw-panel, .kw-row { transition: none; }
  .kw-launch:hover { transform: none; }
}