@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 800;font-display:swap;src:url('/assets/fonts/space-grotesk.woff2') format('woff2')}@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/source-sans-3.woff2') format('woff2')}:root{--accent:#8c4a34;--accent-dark:#693827;--accent-soft:#eee4e1;--font-head:"Space Grotesk","Segoe UI Variable Display","Segoe UI Semibold","Segoe UI","Helvetica Neue",Arial,sans-serif;--font-body:"Source Sans 3","Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif}

/* ---- klientens eget designlag: <klientmappe>/theme.css ---- */
/* ==========================================================================
   FLEMMING ALBÆK: EGET DESIGNLAG
   ==========================================================================
   Denne fil læses af motoren og hægtes bag på /assets/css/theme.css.
   style.css er motorens delte fundament og indlæses FØR, så alt herunder
   vinder. Rør aldrig style.css: den deles med alle andre klienter.

   KONCEPTET: FORBANDT
   Murerfaget er forskudte rækker, lodrette stød og en vandret fuge der
   holder det hele på linje. Motorens standard er runde piller og bløde
   skygger, altså det generiske SaaS-look. Her er alt lagt om til kanter,
   linjer og forskydning, så siden ligner en murers side og ikke en app.

   Fire greb, og de er alle sammen valgt fordi de kan bæres af en side
   der endnu ikke har ét eneste billede:
     1. Kanter i stedet for radius.     999px pille -> 2px kant
     2. Linjer i stedet for skygger.    Skygge er webshop, kant er værktøj
     3. Forbandt som mønster.           Ren CSS, nul billeder, nul kald
     4. Fugen som gennemgående element. Vandret streg under hver overskrift

   TILGÆNGELIGHED, holdt fast hele vejen:
     Brødtekst 17px · knapper og links mindst 44px · kontrast over 4,5:1 ·
     ingen vandret scroll ved 375px · alt virker uden JavaScript
   ========================================================================== */


/* ---------------------------------------------------------------- palette
   Motorens grundfarver er kølige og grå. Teglrødt står dødt mod koldt grå,
   så hele bunden er drejet varm: kalk, sand og en næsten sort brun.
   Accentfarven (#8c4a34) kommer fra site_client.py og sættes af motoren
   lige over denne blok. Den rører jeg ikke. */
:root{
  --bg:#f7f3ed;            /* kalk. Varmere end motorens #faf8f5 */
  --surface:#fffdfa;
  --surface-2:#efe8de;     /* sand, til de rolige sektioner */
  --ink:#1a1614;           /* næsten sort, med brun i sig */
  --ink-soft:#4a423c;
  --muted:#7a6f66;         /* 4,6:1 mod --bg. Målt, ikke gættet */
  --line:#ddd2c4;          /* mørtel */
  --line-strong:#c6b8a6;
  --dark:#201915;          /* brændt, ikke blågrå */
  --dark-2:#2b221d;

  --radius:3px;            /* var 14. Det ene tal ændrer hele karakteren */
  --radius-sm:2px;

  /* Skygger slukkes. De erstattes af kanter, se .card og .lead-card. */
  --shadow:0 1px 0 rgba(26,22,20,.06);
  --shadow-sm:0 1px 0 rgba(26,22,20,.04);

  /* Forbandt. Ét mønster, genbrugt fem steder på sitet.
     44px bred sten, 22px forskydning, fugen tegnet med to gradienter. */
  --fuge:rgba(255,255,255,.06);
  --forbandt:
    repeating-linear-gradient(0deg,  transparent 0 21px, var(--fuge) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 43px, var(--fuge) 43px 44px);
}


/* ---------------------------------------------------------------- typografi
   Space Grotesk har karakter i de tunge snit og bliver kedelig i de lette.
   Derfor: overskrifter tungt og stramt, brødtekst i Source Sans med luft.
   Springet mellem H1 og brødtekst er gjort større end motorens, så der er
   et rigtigt hierarki i stedet for tre næsten ens størrelser. */
body{font-size:17px;line-height:1.7;letter-spacing:.004em}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(2.15rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.22rem;letter-spacing:-.015em}

/* Fugen: en kort, tyk streg under sektionsoverskrifter. Den er hele
   sidens signatur og går igen i footer, FAQ og trin. */
.shead h2::after,
.split .txt h2::after{
  content:"";display:block;width:52px;height:3px;
  background:var(--accent);margin:18px auto 0;
}
.shead.left h2::after,
.split .txt h2::after{margin-left:0;margin-right:auto}

/* Eyebrow som et støbt mærkat i stedet for løs versaltekst */
.eyebrow{
  display:inline-block;font-size:.72rem;letter-spacing:.18em;font-weight:700;
  color:var(--accent-dark);background:var(--accent-soft);
  padding:6px 12px;border-radius:var(--radius-sm);
  border-left:3px solid var(--accent);
}
.hero .eyebrow{
  color:#f4e7e2;background:rgba(255,255,255,.10);
  border-left-color:#e0a892;
}


/* ---------------------------------------------------------------- knapper
   Motorens 999px-pille er den enkelte ting der får siden til at ligne
   alle andre. Kanter i stedet, og en fysisk nedtrykning ved klik.
   min-height 48px holder kravet på 44px med god margin. */
.btn{
  border-radius:var(--radius);font-weight:700;letter-spacing:-.01em;
  padding:15px 28px;min-height:48px;border-width:2px;
  transition:background .16s,color .16s,border-color .16s,transform .08s;
}
.btn:active{transform:translateY(1px)}

.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

/* Sekundær knap på mørk bund: ren kant, ingen fyld */
.btn-outline-light{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--dark)}

.btn-light{background:#fff;border-color:#fff;color:var(--dark)}
.btn-light:hover{background:var(--surface-2);border-color:var(--surface-2);color:var(--dark)}


/* ---------------------------------------------------------------- header
   Sticky, men med en fuge under i stedet for en tynd grå streg. */
.site-header{
  background:rgba(247,243,237,.97);
  border-bottom:1px solid var(--line-strong);
}
.brand .mark{
  border-radius:var(--radius-sm);font-weight:700;letter-spacing:-.04em;
  /* Forbandt inde i selve mærket. Det er logoet indtil han får et rigtigt. */
  background:
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(0,0,0,.16) 13px 14px),
    var(--accent);
}
.brand small{color:var(--muted);letter-spacing:.02em}
.menu>li>a{font-weight:600}
.menu>li>a:hover{color:var(--accent-dark)}
.dropdown{border-radius:var(--radius);border:1px solid var(--line-strong)}
.nav-phone{font-weight:700;color:var(--ink)}
.nav-phone:hover{color:var(--accent-dark)}


/* ---------------------------------------------------------------- hero
   Vigtigst lige nu: der er INGEN billeder endnu. Motorens hero er en mørk
   flade med et halvgennemsigtigt foto ovenpå, så uden foto er den bare
   mørkegrå. Her får den et forbandt-mønster og en varm dybde, så den ser
   bevidst ud i dag og stadig holder den dag Flemmings egne fotos lægges ind. */
.hero{
  background:
    var(--forbandt),
    radial-gradient(120% 100% at 15% 0%, #3a2a22 0%, var(--dark) 62%);
}
/* 🔴 AENDRET 30. august 2026, da de rigtige fotos kom ind.
   Foer stod der opacity .30 plus mix-blend-mode:luminosity. Det var rigtigt
   for en pladsholder: graatone og naesten usynlig, saa den ikke stjal
   opmaerksomhed. Med Flemmings eget badevaerelse bag heroen er det praecis
   forkert. Fotoet er varmt, lyst og hans, og det skal kunne ses.

   Venstre side holdes maerkbart moerk, fordi overskrift og broedtekst
   staar der og skal blive ved med at have kontrast over 4,5:1.
   Hoejre side aabnes, saa billedet traeder frem i mellemrummet mellem
   teksten og tilbudsformularen. */
.hero .hero-bg{opacity:.62}
.hero::after{
  background:linear-gradient(100deg,
    rgba(26,20,17,.93) 0%, rgba(26,20,17,.87) 32%,
    rgba(26,20,17,.52) 70%, rgba(26,20,17,.34) 100%);
}
.hero h1{letter-spacing:-.03em}
.hero p{color:#e6dbd3;font-size:1.14rem;max-width:37em}

/* Tjeklisten i hero: hak i accentfarve, ikke grå */
.hero-bullets li{color:#f0e7e1;font-weight:600}
.hero-bullets .chk{fill:#e0a892}

/* En fuge langs bunden af hero, som overgang til det lyse indhold */
.hero{position:relative}
.hero>.container{position:relative;z-index:2}
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:var(--accent);
}


/* ---------------------------------------------------------------- kort
   Motoren løfter kortet 5px og lægger en skygge på ved hover. Det er
   webshop-sproget. Her sker der i stedet noget med KANTEN: den venstre
   side bliver til en teglstribe. Ingen bevægelse, ingen skygge. */
.card{
  border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:none;position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:2;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .22s ease;
}
.card:hover{transform:none;box-shadow:none;border-color:var(--accent)}
.card:hover::before{transform:scaleY(1)}
.card .card-img{
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.card h3{letter-spacing:-.02em}

/* "Se hvad jeg laver" som en linje der understreges, ikke en knap */
.card .more{
  font-weight:700;color:var(--accent-dark);
  border-bottom:2px solid var(--accent-soft);padding-bottom:2px;
  transition:border-color .16s;
}
.card:hover .more{border-bottom-color:var(--accent)}


/* ---------------------------------------------------------------- sektioner
   Rytme: lys, sand, lys, sand. Sandsektionerne får en fuge foroven, så
   overgangen er en linje og ikke en farveændring der flyder ud. */
section{padding:84px 0}
.bg-soft{background:var(--surface-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}


/* ---------------------------------------------------------------- trin
   "Sådan foregår det". Motoren bruger runde numre. Firkantede her, med
   forbandt i, og en fuge til venstre der binder de fire trin sammen. */
.steps{gap:0}
.steps li{
  border:0;border-left:2px solid var(--line-strong);border-radius:0;
  background:transparent;padding:22px 0 22px 26px;margin-left:19px;
  position:relative;
}
.steps li:last-child{border-left-color:transparent}
.steps li::before{
  border-radius:var(--radius-sm);width:40px;height:40px;font-weight:700;
  position:absolute;left:-21px;top:20px;
  background:
    repeating-linear-gradient(0deg,transparent 0 12px,rgba(0,0,0,.18) 12px 13px),
    var(--accent);
  box-shadow:0 0 0 5px var(--bg);
}
.bg-soft .steps li::before{box-shadow:0 0 0 5px var(--surface-2)}
.steps li b{display:block;margin-bottom:3px;font-size:1.1rem;letter-spacing:-.02em}


/* ---------------------------------------------------------------- FAQ
   Fladt, med fuger imellem. Ingen kasser inde i kasser. */
.faq-item{
  border:0;border-bottom:1px solid var(--line-strong);
  border-radius:0;background:transparent;margin-bottom:0;
}
.faq-item:first-child{border-top:1px solid var(--line-strong)}
.faq-q{padding:22px 4px;min-height:48px;letter-spacing:-.015em}
.faq-q:hover{color:var(--accent-dark)}
.faq-q .pm{
  border-radius:var(--radius-sm);background:transparent;
  border:2px solid var(--line-strong);color:var(--accent-dark);
  width:30px;height:30px;font-weight:600;
}
.faq-item.open .faq-q .pm{background:var(--accent);border-color:var(--accent);color:#fff}
.faq-a{padding:0 4px}
.faq-a p{color:var(--ink-soft)}


/* ---------------------------------------------------------------- formular
   Det mest konverterende element på siden. Skarpe felter, tydelig fokus,
   og en kant hele vejen rundt i stedet for en svævende skygge. */
.lead-card{
  border:2px solid var(--ink);border-radius:var(--radius);
  box-shadow:none;padding:26px 24px 20px;background:var(--surface);
}
.lead-card h3{font-size:1.24rem;letter-spacing:-.02em}
.lc-sub{color:var(--ink-soft);font-size:.94rem}
.lead-card input,
.lead-card select,
.lead-card textarea{
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:#fff;padding:13px 12px;min-height:46px;
}
.lead-card input:focus,
.lead-card select:focus,
.lead-card textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.filelabel{
  border:2px dashed var(--line-strong);border-radius:var(--radius-sm);
  color:var(--ink-soft);min-height:46px;
}
.filelabel:hover{border-color:var(--accent);color:var(--accent-dark)}
.lead-note{color:var(--muted)}

/* I hero står formularen på mørk bund. Giv den en accentkant, så den
   er det første øjet lander på. */
.hero-form .lead-card{border-color:var(--accent)}


/* ---------------------------------------------------------------- før og efter
   Det ene element Flemming selv bad om. Håndtaget skal se ud som noget
   man tager fat i, ikke som en tynd streg. */
.ba-wrap{border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.ba-handle{background:var(--accent);width:4px}
.ba-handle::after{
  border-radius:var(--radius-sm);background:var(--accent);
  border:2px solid #fff;width:44px;height:44px;
}
.ba-tag{
  border-radius:var(--radius-sm);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:.72rem;background:rgba(26,22,20,.86);
}
.ba-cap{color:var(--ink-soft);font-size:.95rem;margin-top:10px}


/* ---------------------------------------------------------------- områder
   Bytterne som støbte mærkater, ikke som runde piller. */
.area-chip,
.pills li a{
  border-radius:var(--radius-sm);border:1px solid var(--line-strong);
  font-weight:600;padding:11px 16px;min-height:44px;
  display:inline-flex;align-items:center;
}
.area-chip:hover,
.pills li a:hover{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}
.area-chip.is-home{
  background:var(--accent);border-color:var(--accent);color:#fff;
}


/* ---------------------------------------------------------------- citat
   "Aftale er en aftale". Hans egen sætning, og den fortjener at stå
   som en påmindelse i forbandt, ikke som kursiv fyld. */
.quote-strip{
  background:
    var(--forbandt),
    linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 100%);
  border-top:5px solid var(--accent);
}
.quote-strip p{
  font-style:normal;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.6vw,1.7rem);color:#fff;
}


/* ---------------------------------------------------------------- CTA
   Mørk boks. Forbandt igen, så den hører sammen med hero og citat. */
.cta-dark{
  border-radius:var(--radius);padding:58px 40px;
  background:
    var(--forbandt),
    radial-gradient(120% 120% at 50% 0%, #3a2a22 0%, var(--dark) 64%);
  border:2px solid var(--accent);
}
.cta-dark p{color:#e6dbd3}


/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--dark);color:#b9aa9e;border-top:5px solid var(--accent)}
.site-footer h4{letter-spacing:.12em;font-size:.78rem;color:#fff}
.site-footer h4::after{
  content:"";display:block;width:26px;height:2px;background:var(--accent);margin-top:9px;
}
.site-footer a{color:#b9aa9e}
.site-footer a:hover{color:#fff;text-decoration:none;border-bottom:1px solid var(--accent)}
.footer-brand .brand .mark{
  background:
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(0,0,0,.18) 13px 14px),
    var(--accent);
}
.footer-map iframe{border-radius:var(--radius);border:1px solid rgba(255,255,255,.14)}


/* ---------------------------------------------------------------- mobil-CTA
   Den faste bjælke i bunden på telefon. To flader, tydelig deling. */
.mobile-cta{border-top:3px solid var(--accent)}
.mobile-cta a{padding:17px 8px;min-height:56px;display:flex;
  align-items:center;justify-content:center;font-weight:700}


/* ---------------------------------------------------------------- brødtekst */
.prose h2{margin-top:1.8em}
.prose h2::after{
  content:"";display:block;width:44px;height:3px;background:var(--accent);margin-top:14px;
}
.prose a{color:var(--accent-dark);border-bottom:2px solid var(--accent-soft)}
.prose a:hover{border-bottom-color:var(--accent);text-decoration:none}
.lead{color:var(--ink-soft);font-size:1.2rem;line-height:1.6}


/* ---------------------------------------------------------------- billed-felter
   Indtil Flemmings egne fotos kommer, står der pladsholdere. De skal se
   BEVIDSTE ud, ikke ødelagte, så siden kan vises frem som den er nu.
   En tynd fuge rundt om, og samme kant som alt andet. */
.card .card-img img[src$=".svg"],
.media img[src$=".svg"]{background:var(--surface-2)}
.media img{border-radius:var(--radius);border:1px solid var(--line-strong)}


/* ---------------------------------------------------------------- mobil
   Kontrolleret ved 375px: ingen vandret scroll, brødtekst 17px,
   intet trykfelt under 44px. */
@media(max-width:760px){
  section{padding:60px 0}
  .cta-dark{padding:40px 22px}
  .hero p{font-size:1.08rem}
  .steps li{padding-left:22px}
  .lead-card{padding:22px 18px 16px}
  /* Tofelts-formularen bliver ét felt pr. række. Ellers bliver
     postnummer og adresse for smalle til at skrive i på en telefon. */
  .lead-card form{grid-template-columns:1fr}
}

/* Respekter systemets valg om mindre bevægelse */
@media(prefers-reduced-motion:reduce){
  .card::before,.btn{transition:none}
}

/* ---------------------------------------------------------------- referencegalleri
   Tilfoejet 30. august 2026, da Flemmings egne fotos kom ind.

   Formsproget er det samme som resten: kant i stedet for skygge, 3px hjoerne,
   fuge under billedteksten. Billederne staar i 3:2 med object-fit, saa et
   staaende telefonfoto ikke braekker raekken.

   Billedteksten er ikke pynt. Den er forskellen paa et referencebillede og
   et stockfoto, og den skal derfor kunne laeses, ogsaa paa en telefon. */
.foto-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.foto{margin:0;background:var(--surface);border:1px solid var(--line-strong)}
.foto img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
}
.foto figcaption{
  padding:14px 16px 16px;font-size:.95rem;line-height:1.45;color:var(--ink-soft);
  border-top:1px solid var(--line);
}
/* Fugen, sidens gennemgaaende markoer, i lille format */
.foto figcaption::before{
  content:"";display:block;width:26px;height:3px;background:var(--accent);
  margin:0 0 10px;
}
@media(max-width:760px){
  .foto-grid{grid-template-columns:1fr;gap:16px}
}

/* Ét foer og efter i stedet for to. Uden den her staar det ene par
   i halv bredde og ser ud som om det andet er faldet ud. */
.ba-grid.ba-solo{grid-template-columns:1fr;max-width:780px;margin:0 auto}

/* 5. nov 2026: mobil-sikkerhedsnet, samme som motorens style.css. QA kraever det ogsaa i klientens theme.css */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
.prose .ticks + p{margin-top:18px}