/* ============================================================
   MOTORENS DELTE DESIGN SYSTEM
   Farverne herunder er kun en NOEDPLAN. Hver klient faar sin egen
   accentfarve fra site_client.py (CFG["brand_color"]), genereret af
   build.py i /assets/css/theme.css, som indlaeses efter denne fil
   og overskriver --accent/--accent-dark/--accent-soft via cascade.
   ============================================================ */

:root{
  /* Brand */
  --bg:#faf8f5;
  --surface:#ffffff;
  --surface-2:#f3efe9;
  --ink:#1d2129;
  --ink-soft:#414855;
  --muted:#6b7280;
  --line:#e8e2d9;
  --dark:#191c22;
  --dark-2:#23272f;
  --accent:#4a5a6a;        /* neutral, overskrives af theme.css pr. klient */
  --accent-dark:#384450;
  --accent-soft:#e4e6e9;
  --green:#3f8f5b;
  --star:#f0a429;

  --maxw:1180px;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 40px rgba(25,28,34,.10);
  --shadow-sm:0 4px 16px rgba(25,28,34,.08);
  --font-head:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.18;color:var(--ink);font-weight:800;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.5vw,3.25rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.015em}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:72px 0}
.lead{font-size:1.18rem;color:var(--ink-soft)}
.eyebrow{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:800;color:var(--accent)}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-head);font-weight:700;
  font-size:1rem;padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:.18s;text-decoration:none!important;line-height:1}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff;transform:translateY(-2px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- Top bar ---------- */
.topbar{background:var(--dark);color:#d7d2c8;font-size:.85rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:#d7d2c8}
.topbar .tb-left{display:flex;gap:22px;flex-wrap:wrap}
.topbar .tb-social a{margin-left:14px}
.topbar .tb-left span{display:inline-flex;align-items:center;gap:7px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none!important}
.brand .mark{width:42px;height:42px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu>li>a{display:block;padding:10px 14px;color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.97rem;border-radius:8px}
.menu>li>a:hover{background:var(--surface-2);text-decoration:none}
.menu>li.has-drop>a::after{content:"▾";margin-left:6px;font-size:.7em;color:var(--muted)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.16s;list-style:none;margin:0}
.menu>li.has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink-soft);font-size:.93rem}
.dropdown a:hover{background:var(--accent-soft);color:var(--accent-dark);text-decoration:none}
.dropdown .sub{padding-left:22px;font-size:.88rem;color:var(--muted)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-phone{font-family:var(--font-head);font-weight:800;color:var(--ink);white-space:nowrap}
.nav-phone:hover{color:var(--accent-dark);text-decoration:none}
/* Mindst 44 px. Det er den mest trykkede knap paa mobil, og den stod paa 35.
   E_HJEMMESIDE.md: "Knapper minimum 44 px hoeje". Rettet 24-08-2026. */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;background:none;border:0;cursor:pointer;padding:8px;
  min-width:44px;min-height:44px}
.burger span{width:26px;height:3px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero .hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.42}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,22,27,.92) 30%,rgba(20,22,27,.55) 100%)}
.hero .container{position:relative;z-index:2;padding:96px 24px;max-width:var(--maxw)}
.hero-inner{max-width:740px}
.hero h1{color:#fff}
.hero p{font-size:1.22rem;color:#e7e3db;max-width:620px}
.hero .hero-meta{margin-top:22px;color:#b9b3a8;font-size:.95rem}
.hero .btn-row{margin-top:28px}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--surface);border-bottom:1px solid var(--line)}
.trustbar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:22px;padding-bottom:22px}
.trustbar .ti{display:flex;align-items:center;gap:12px;padding:6px 14px}
.trustbar .ti .ic{font-size:1.5rem;flex:0 0 auto}
.trustbar .ti b{font-family:var(--font-head);font-size:.98rem;display:block;line-height:1.25}
.trustbar .ti span{font-size:.85rem;color:var(--muted)}

/* ---------- Generic blocks ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.split.rev .txt{order:2}
.media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2);aspect-ratio:4/3}
.media img{width:100%;height:100%;object-fit:cover}
.bg-soft{background:var(--surface-2)}
.bg-white{background:var(--surface)}

/* ---------- Service / project cards ---------- */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .card-img{aspect-ratio:3/2;background:var(--surface-2);overflow:hidden}
.card .card-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card-img img{transform:scale(1.05)}
.card .card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.4em}
.card h3 a{color:var(--ink)}
.card p{font-size:.96rem;color:var(--ink-soft);flex:1}
.card .more{font-family:var(--font-head);font-weight:700;color:var(--accent-dark);margin-top:6px;font-size:.93rem}

/* ---------- Section heads ---------- */
.shead{max-width:720px;margin:0 auto 44px;text-align:center}
.shead.left{margin-left:0;text-align:left}

/* ---------- CTA dark ---------- */
.cta-dark{background:var(--dark);color:#fff;border-radius:var(--radius);padding:54px;text-align:center}
.cta-dark h2{color:#fff}
.cta-dark p{color:#d7d2c8;max-width:620px;margin:0 auto 26px;font-size:1.12rem}
.cta-dark .btn-row{justify-content:center}
.section-dark{background:var(--dark);color:#fff}
.section-dark h2{color:#fff}
.section-dark p{color:#d2cdc4}

/* ---------- Checklist / why ---------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:1.03rem}
.checklist li::before{content:"✓";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-dark);display:grid;place-items:center;font-weight:800;font-size:.95rem;margin-top:2px}

/* ---------- Process steps ---------- */
.steps{counter-reset:step;display:grid;gap:18px}
.steps li{list-style:none;display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:18px 22px}
.steps li::before{counter-increment:step;content:counter(step);flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.steps li b{font-family:var(--font-head)}

/* ---------- Pills / area list ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.pills li a{display:inline-block;padding:9px 16px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.92rem}
.pills li a:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.88rem}
.breadcrumbs .container{padding-top:12px;padding-bottom:12px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs .sep{color:var(--line);margin:0 8px}
.breadcrumbs .cur{color:var(--ink-soft);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 24px;font-family:var(--font-head);
  font-weight:700;font-size:1.06rem;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq-q .pm{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);
  display:grid;place-items:center;font-size:1.3rem;transition:.2s}
.faq-item.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 24px}
.faq-a p{color:var(--ink-soft);font-size:1rem}
.faq-item.open .faq-a{padding-bottom:6px}

/* ---------- Prose ---------- */
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em;color:var(--ink)}
.prose ul{padding-left:20px}
.prose li{margin:.4em 0}
.prose .price-block{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius-sm);padding:6px 22px;margin:18px 0}

/* ---------- Contact form ---------- */
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px}
.form-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-head);font-weight:600;font-size:.9rem}
.field input,.field select,.field textarea{padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-body);font-size:1rem;background:var(--bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical}

/* ---------- Map ---------- */
.map-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);line-height:0}
.map-embed iframe{width:100%;height:420px;border:0;display:block}

/* ---------- Quote strip ---------- */
.quote-strip{background:var(--dark);color:#fff;text-align:center}
.quote-strip .container{padding:34px 24px}
.quote-strip p{font-family:var(--font-head);font-size:1.3rem;font-style:italic;color:#f0ece4;margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:#c3bdb2;font-size:.94rem;padding:64px 0 0}
.site-footer h4{color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.site-footer a{color:#c3bdb2}
.site-footer a:hover{color:#fff}
.footer-brand .brand{color:#fff;margin-bottom:14px}
.footer-brand .brand .mark{background:var(--accent)}
.footer-brand p{max-width:280px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.nap b{color:#fff}
.nap-line{margin:0 0 4px}
.social-row{display:flex;gap:12px;margin-top:16px}
.social-row a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:1.05rem}
.social-row a:hover{background:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding:22px 0;font-size:.85rem;color:#8d877c}
.footer-bottom .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom a{color:#8d877c}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:0;background:var(--dark);
  box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.mobile-cta a{flex:1;text-align:center;padding:15px 8px;color:#fff;font-family:var(--font-head);font-weight:700;font-size:.95rem}
.mobile-cta a:hover{text-decoration:none}
.mobile-cta a.call{background:var(--accent)}
.mobile-cta a+a{border-left:1px solid rgba(255,255,255,.12)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .trustbar .container{grid-template-columns:1fr 1fr;gap:14px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .menu,.nav-phone{display:none}
  .burger{display:flex}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:10px;gap:0;max-height:78vh;overflow:auto}
  .menu.open>li>a{padding:13px 14px;border-bottom:1px solid var(--line)}
  .menu.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0 0 8px 12px;display:none}
  .menu.open li.has-drop.exp .dropdown{display:block}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev .txt{order:0}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .cta-dark{padding:36px 24px}
  .form-grid{grid-template-columns:1fr}
  section{padding:52px 0}
  body{padding-bottom:60px}
  .mobile-cta{display:flex}
}
@media(max-width:520px){
  .trustbar .container{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .topbar .tb-left{gap:14px;font-size:.78rem}
}

/* ---- Fletning: hero-split + maalbar formular + checkmarks + reviews ---- */
.hero-split .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px 0}
.hero-split .hero-copy h1{margin:.2em 0 .3em}
.hero-bullets{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.hero-bullets li{display:flex;align-items:flex-start;gap:10px;color:#fff;font-weight:600}
.hero .chk,.checklist .chk{flex:0 0 20px;width:20px;height:20px;fill:var(--green)}
.hero-bullets .chk{fill:#fff}
.stars{color:var(--star);letter-spacing:2px}

.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 22px 18px}
.lead-card h3{font-family:var(--font-head);font-size:1.15rem;margin:0 0 2px}
.lc-sub{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.lead-card form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lead-card .full{grid-column:1/-1}
.lead-card input,.lead-card select,.lead-card textarea{width:100%;font:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px}
.lead-card input:focus,.lead-card select:focus,.lead-card textarea:focus{outline:none;border-color:var(--accent)}
.lead-card textarea{min-height:64px;resize:vertical}
.filelabel{grid-column:1/-1;display:flex;align-items:center;gap:8px;cursor:pointer;
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:10px 12px;color:var(--muted);font-size:.88rem}
.filelabel input[type=file]{display:none}
.lead-note{grid-column:1/-1;color:var(--muted);font-size:.8rem;margin:8px 0 0;text-align:center}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.review blockquote{margin:10px 0;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
.review figcaption{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.r-agg{color:var(--muted);margin:.4em 0 0}

@media(max-width:860px){
  .hero-split .hero-grid{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .lead-card form{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
}

/* ============================================================
   MOBIL-HÆRDNING — tilføjet 10. august 2026
   ------------------------------------------------------------
   Retter fejlen hvor siden kunne trækkes ud til siden på
   telefonen, så indholdet så forskudt og "udzoomet" ud.

   Årsagen var tre ting der spillede sammen:
     1. Footeren stod i to kolonner helt ned til 320px bredde
     2. Grid- og flex-børn har som standard min-width:auto og
        kan derfor ikke krympe under deres eget indhold. En lang
        e-mailadresse sprængte kolonnen udad
     3. Der var intet sikkerhedsnet mod vandret overløb

   Blokken er additiv. Ingen eksisterende regel er ændret eller
   fjernet, så designet ser ud præcis som før, bare uden overløb.
   Ruller tilbage med: git checkout -- <denne fil>
   ============================================================ */

/* 1) Sikkerhedsnet mod vandret scroll.
      Bevidst 'clip' og ikke 'hidden': hidden ville lave body om
      til en scroll-container og dermed brække den klæbende
      header (position:sticky) og den faste mobil-CTA i bunden.
      clip klipper uden at skabe scroll-container. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* 2) Lad grid- og flex-børn krympe.
      Uden min-width:0 kan et barn aldrig blive smallere end sit
      længste ubrydelige ord, og skubber så hele rækken udad. */
.footer-grid>*,
.split>*,
.grid>*,
.hero-v2-grid>*,
.trustbar .container>*,
.nav>*,
.nav-cta>*,
.brand,
.card,
.steps li,
.checklist li,
.form-grid>*,
.lead-grid>*{min-width:0}

/* 3) Bryd lange, ubrydelige strenge: e-mail, domæne, CVR-nummer.
      break-word bryder kun når ordet ellers ikke kan være der. */
.nap-line,
.nap-line a,
.fcol a,
.site-footer a,
.breadcrumbs a,
.prose a,
.contact-card a{overflow-wrap:break-word}

/* 4) Footeren skal være én kolonne på telefon.
      Den stod før i to kolonner hele vejen ned, og det var den
      største enkeltårsag til overløbet. */
@media(max-width:680px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-brand p{max-width:none}

  /* 🔴 Tilfoejet 30-08-2026. Footerens navigationslinks stod 21 px hoeje paa
     telefon, altsaa under det halve af de 44 px E_HJEMMESIDE.md kraever, og
     de sad saa taet at man rammer naboen. Maalt paa Flemmings forside:
     19 links under 44 px, alle sammen i footeren.
     Loesningen er luft omkring linket, ikke stoerre skrift: teksten skal
     blive ved med at vaere sekundaer, trykfeltet skal ikke. */
  .fcol a,
  .site-footer nav a{display:inline-block;padding:9px 0;line-height:1.3}

  /* 🔴 Tilfoejet 30-08-2026. Heroens 96 px topluft er rigtig paa en skaerm
     og forkert paa en telefon: maalt paa Flemmings forside ved 390 px laa
     der 390 px baggrund foer overskriften overhovedet begyndte, altsaa
     naesten en halv skaerm. Baggrunden er ikke tom, den viser billedet,
     men det foerste en kunde ser skal vaere hvad han laver og hvor. */
  .hero .container{padding:52px 20px 56px}
}

/* 🔴 Tilfoejet 30-08-2026. Firmanavnet i headeren braekkede til to linjer
   paa telefon, saa headeren voksede og skubbede hele heroen ned.
   Maalt ved 390 px: "Flemming Albæk" fyldte 89 px i hoejden i et felt paa
   169 px. Janniks navn er laengere og braekker ogsaa.
   Navnet skal blive paa én linje, og det gaelder alle klienter. */
@media(max-width:560px){
  .brand{font-size:1.08rem;gap:9px}
  .brand .mark{width:38px;height:38px;font-size:1.02rem}
  .brand>span,.brand>div{white-space:nowrap}
  .brand small{font-size:.6rem;letter-spacing:.09em}
}
@media(max-width:400px){
  .brand{font-size:.98rem}
  .brand small{display:none}
}

/* 5) Intet medie eller felt må bryde ud af sin ramme. */
img,svg,video,iframe,table{max-width:100%}
input,select,textarea{max-width:100%}

/* ============================================================
   FØR OG EFTER-SLIDER
   Tilføjet 24-08-2026 til motoren. Bygget på <input type=range>,
   så tastatur og touch virker uden ekstra kode, og så komponenten
   står på sin startværdi hvis JavaScript ikke kører.
   Kaldes fra site_content.py med g["before_after"](...).
   ============================================================ */
.ba{margin:0}
.ba-wrap{
  position:relative;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);background:var(--accent-soft);
  aspect-ratio:4/3;isolation:isolate;
}
.ba-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;
}
/* Venstre halvdel er "før". Klippes af den variabel JS'en skriver. */
.ba-clip{
  position:absolute;inset:0;overflow:hidden;
  width:var(--ba,50%);
  border-right:2px solid #fff;
}
.ba-clip .ba-img{width:100vw;max-width:none}
@supports (width:1cqw){
  .ba-wrap{container-type:inline-size}
  .ba-clip .ba-img{width:100cqw}
}
.ba-tag{
  position:absolute;bottom:14px;z-index:3;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(20,22,26,.78);color:#fff;
  padding:6px 12px;border-radius:999px;pointer-events:none;
}
.ba-l{left:14px}
.ba-r{right:14px}
.ba-handle{
  position:absolute;top:0;bottom:0;z-index:4;
  left:var(--ba,50%);transform:translateX(-50%);
  width:44px;display:grid;place-items:center;pointer-events:none;
}
.ba-handle span{
  width:44px;height:44px;border-radius:50%;
  background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.28);
  display:grid;place-items:center;
}
.ba-handle span::before{
  content:"\25C0\00a0\25B6";font-size:.7rem;color:var(--ink);letter-spacing:-1px;
}
/* Selve rækkevidde-feltet ligger usynligt oven på hele billedet.
   Det er det der gør komponenten tastaturbetjent uden ekstra ARIA. */
.ba-range{
  position:absolute;inset:0;z-index:5;
  width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.ba-range:focus-visible{opacity:.001;outline:none}
.ba-range:focus-visible ~ .ba-handle span{outline:3px solid var(--accent);outline-offset:3px}
.ba-cap{margin:12px 2px 0;color:var(--muted);font-size:.92rem}
@media(max-width:680px){
  .ba-wrap{aspect-ratio:3/2}
  .ba-tag{font-size:.7rem;padding:5px 10px;bottom:10px}
}

/* ============================================================
   PLADSHOLDER-FELT
   Bruges når klienten endnu ikke har leveret billeder. Skal se
   BEVIDST ud, ikke ødelagt. Feltet siger hvad der skal ind.
   ============================================================ */
.ph-note{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;text-align:center;padding:0 24px;max-width:88%;
  font-family:var(--font-head);font-weight:600;font-size:.86rem;
  letter-spacing:.03em;color:var(--ink-soft);pointer-events:none;
}
.ph-note b{display:block;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}

/* ============================================================
   AFKRYDSNINGSLISTE
   Bruges i "hvad ligger der i opgaven"-blokke. Tilføjet 24-08-2026.
   ============================================================ */
.ticks{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px}
.ticks li{display:flex;gap:12px;align-items:flex-start;
  color:var(--ink-soft);line-height:1.55}
.ticks .chk{flex:0 0 auto;width:22px;height:22px;margin-top:2px;fill:var(--accent)}
@media(max-width:760px){.ticks{grid-template-columns:1fr}}

/* ============================================================
   OMRÅDE-CHIPS
   Byer klienten dækker. De der har en egen side er links, resten
   er ren tekst, så vi ikke lover en side der ikke findes.
   ============================================================ */
.area-grid{display:flex;flex-wrap:wrap;gap:10px}
.area-chip{display:inline-flex;align-items:center;
  padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--font-head);font-weight:600;font-size:.95rem;
  color:var(--ink);text-decoration:none;transition:.18s}
a.area-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.area-chip.is-home{background:var(--accent);border-color:var(--accent);color:#fff}
.area-chip.is-plain{color:var(--muted);background:transparent}

/* ============================================================
   TO FØR-OG-EFTER VED SIDEN AF HINANDEN
   ============================================================ */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}}