/* =========================================================
   LEERBECK SOLUTIONS – LIGHT THEME
   Drop-in lys variant, samme classes som eksisterende CSS.
   ---------------------------------------------------------
   Brug:
   - Erstat din styles.css med denne,
   - eller link den EFTER din nuværende fil som overrides,
   - eller wrap alt i body.theme-light {} hvis du vil kunne toggl’e.
   ========================================================= */

/* ---------- Farve-variabler (basis + LS-hero) ---------- */
:root{
  /* Basis palette (lys) */
  --bg: #f4f1ec;
  --card: #ffffff;
  --muted: #5c6d7d;
  --text: #253241;
  --accent: #4f6478;
  --accent-2: #7d92a6;
  --brand: #41576a;

  /* LS-hero komponent-variabler */
  --ls-bg: #f6f3ef;
  --ls-fg: #253241;
  --ls-fg-dim: #5c6d7d;
  --ls-accent: #4f6478;
  --ls-accent-2: #7d92a6;
  --ls-card: #ffffff;
  --ls-border: rgba(37,50,65,.12);
  --ls-shadow: 0 14px 32px rgba(37,50,65,.08);
  --ls-radius: 18px;
  --ls-radius-sm: 12px;

  /* Global billed/tekst-ratio (kan justeres ét sted) */
  --section-media-ratio: 35%;
}

/* ---------- Reset/grundopsætning ---------- */
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
}
html{ scroll-behavior:smooth; }
img{ max-width:100%; display:block; }
a, p, li, label, input, textarea, button {
  letter-spacing: .01em;
}

h1, h2, h3, .brand-name, .ls-brand{
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  letter-spacing:.01em;
}

a{ color: var(--accent); }
.container{ max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.hidden{ display:none; }
.muted{ color: var(--muted); }
.accent{ color: var(--accent); }

/* ---------- Header / navigation ---------- */
.site-header{
  position: sticky; top:0;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(244,241,236,.90);
  border-bottom: 1px solid rgba(37,50,65,.12);
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; z-index:50;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-logo{ height:34px; width:auto; }
.brand-name{ font-weight:600; font-size:2rem; color: var(--text); }
.nav{ display:flex; align-items:center; gap:.5rem; }
.nav a{
  text-decoration:none;
  color: var(--text);
  opacity:.95;
  font-weight:500;
  padding:.35rem .6rem;
  border-radius:999px;
  transition:background-color .2s ease, color .2s ease;
}
.nav a:hover{
  background: rgba(79,100,120,.12);
  color:#344556;
}
.nav a.active{
  background: rgba(79,100,120,.18);
  color:#344556;
}
.nav-link-cta{
  background: var(--accent);
  color:#fff !important;
  padding:.45rem .8rem !important;
}
.nav-link-cta:hover{
  background:#415467 !important;
  color:#fff !important;
}
.nav-link-cta.active{
  background:#415467 !important;
  color:#fff !important;
}
.nav-toggle{
  display:none; background:none;
  border:1px solid rgba(2,6,23,.12);
  color: var(--text); border-radius:6px; padding:.25rem .5rem;
}

/* ---------- Hero (generisk) ---------- */
.hero{
  scroll-margin-top:5.5rem;
  padding:5rem 0 3rem;
  background:
    radial-gradient(60% 60% at 70% 0%, rgba(125,146,166,.2), transparent 60%),
    radial-gradient(30% 30% at 10% 20%, rgba(79,100,120,.13), transparent 60%),
    #f6f3ef;
  border-bottom: 1px solid rgba(37,50,65,.08);
}
.hero-inner{ max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.hero-layout{ display:grid; grid-template-columns:minmax(220px,var(--section-media-ratio)) minmax(0,1fr); gap:2rem; align-items:stretch; }
.hero-illustration{ display:flex; }
.hero-illustration img{ width:100%; height:100%; max-height:clamp(280px,45vw,520px); object-fit:contain; display:block; }
.hero-content{ display:flex; flex-direction:column; justify-content:center; gap:.85rem; }
.hero-bullets-compact{ margin:.25rem 0 1.25rem; }
.hero-note{ margin:0; color:#475569; }
.hero h1{ font-size:clamp(1.9rem,3.2vw,3rem); line-height:1.15; margin:.5rem 0 1rem; }
.lead{ font-size:1.125rem; color:#4e5f70; line-height:1.6; }



/* ---------- Ens ratio i indholdssektioner (undtagen kontakt) ---------- */
.section:not(#contact) .container{
  display:grid;
  grid-template-columns:minmax(220px,var(--section-media-ratio)) minmax(0,1fr);
  gap:2rem;
  align-items:start;
}
.section-media img{ width:100%; height:auto; max-height:clamp(220px,32vw,420px); object-fit:contain; }
.section-body{ min-width:0; }

/* ---------- Pakker: større illustration og mindre tomrum i venstre kolonne ---------- */
#pricing .container{
  grid-template-columns:minmax(280px,42%) minmax(0,1fr);
}
#pricing .section-media img{
  max-height:clamp(300px,40vw,560px);
}


/* ---------- Lister/sektioner/kort ---------- */
.bullets{ list-style:none; padding:0; margin:1rem 0 2rem; display:grid; gap:.4rem; }
.list{ padding-left:1.25rem; margin:1rem 0; line-height:1.7; }
.list li + li{ margin-top:.55rem; }
.section{ padding:3.5rem 0; background:#ffffff; scroll-margin-top:5.5rem; }
.section.alt{ background: linear-gradient(180deg, #f7f4f0 0%, #ece7df 100%); }
.section h2{ font-size:1.6rem; margin-top:0; }

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem; margin-top:1rem;
}
.card{
  background:#ffffff;
  border:1px solid rgba(37,50,65,.1);
  border-radius:14px;
  padding:1rem;
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
}


/* ---------- Pris-dropdowns ---------- */
.pricing-cards{ align-items:start; grid-template-columns:1fr; }
.pricing-dropdown{ padding:0; overflow:hidden; }
.pricing-dropdown summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
}
.pricing-dropdown summary::-webkit-details-marker{ display:none; }
.pricing-dropdown-title{ font-weight:700; font-size:1.05rem; color:var(--text); }
.pricing-dropdown summary::after{
  content:'▾';
  font-size:1.1rem;
  color:var(--accent);
  transition:transform .2s ease;
}
.pricing-dropdown[open] summary::after{ transform:rotate(180deg); }
.pricing-dropdown-content{
  border-top:1px solid rgba(2,6,23,.08);
  padding:0 1.1rem 1rem;
}
.pricing-dropdown-content .list{ margin-bottom:.2rem; }

/* ---------- Trin-liste ---------- */
.steps{ counter-reset:step; list-style:none; padding:0; margin:1rem 0; display:grid; gap:.75rem; }
.steps li{ position:relative; padding-left:2.5rem; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:.1rem;
  width:1.6rem; height:1.6rem; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center; color:#ffffff; font-weight:700;
  box-shadow: 0 6px 16px rgba(31,94,255,.25);
}

/* ---------- Proces-sektion: justér trin i højde med illustration ---------- */
#how{
  --how-track-height: clamp(260px, 30vw, 360px);
}
#how .container{ align-items:start; }
#how .section-media{ display:flex; flex-direction:column; justify-content:flex-start; }
#how .section-media .ghost-heading{
  margin:0 0 .85rem;
  font-size:1.6rem;
  line-height:1.2;
  visibility:hidden;
}
#how .section-media img{
  height:var(--how-track-height);
  width:auto;
  max-width:100%;
  object-fit:contain;
}
#how .section-body{ display:grid; grid-template-rows:auto 1fr; }
#how .steps{
  height:var(--how-track-height);
  margin:0;
  padding-top:2.5rem;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:0;
}
#how .steps li{ display:flex; align-items:flex-start; gap:.35rem; }
#how .steps li::before{
  top:.1rem;
}
#how .steps li strong{ margin-right:0; }
@media (max-width:740px){
  #how{
    --how-track-height:auto;
  }
  #how .section-media .ghost-heading{ display:none; }
  #how .steps{
    height:auto;
    margin:1rem 0;
    padding-top:0;
    gap:.75rem;
    grid-template-rows:none;
  }
}

/* ---------- Knapper ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid transparent; border-radius:10px;
  padding:.75rem 1rem; text-decoration:none; font-weight:600;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .06s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#ffffff;
  box-shadow: 0 10px 26px rgba(79,100,120,.25);
}
.btn-primary:hover{ filter: brightness(0.98); transform: translateY(-1px); }
.btn-ghost{
  border-color: rgba(2,6,23,.18);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover{ background: rgba(2,6,23,.04); }

/* ---------- CTA-gruppe ---------- */
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* ---------- Formular ---------- */
.contact-form{ margin-top:1rem; }
.contact-form .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.contact-form label{ display:grid; gap:.4rem; font-weight:600; color:#0b1020; }
.contact-form input,
.contact-form textarea{
  width:100%; padding:.75rem; border-radius:10px;
  border:1px solid rgba(2,6,23,.15);
  background:#ffffff; color:#0b1020;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid #9db6ff; outline-offset:2px;
  border-color:#9db6ff;
}
.contact-form .full{ grid-column:1/-1; }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(37,50,65,.12);
  padding:2rem 0; background:#f4f1ec; margin-top:2rem; color:#4e5f70;
}
.footer-grid{ display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; }
.footer-logo{ height:38px; }

/* ---------- Responsiv navigation ---------- */
@media (max-width:740px){
  .nav{ display:none; }
  .nav.open{
    display:flex; flex-direction:column;
    align-items:stretch;
    position:absolute; right:1rem; top:3.2rem;
    background:#f7f3ee;
    border:1px solid rgba(2,6,23,.12);
    border-radius:10px; padding:.5rem 1rem;
    box-shadow: 0 12px 28px rgba(2,6,23,.12);
  }
  .nav.open a{ border-radius:8px; }
  .nav-toggle{ display:block; }
  .contact-form .grid{ grid-template-columns:1fr; }
  .hero-layout{ grid-template-columns:1fr; gap:1.25rem; }
  .hero-illustration{ max-width:300px; margin:0 auto; }
  .hero-content{ gap:.65rem; }
  .section:not(#contact) .container{ grid-template-columns:1fr; }
  .section-media{ max-width:300px; margin:0 auto; }
  #pricing .section-media{ max-width:380px; }
}

/* =========================================================
   LS-HERO – samme komponentclasses som i din fil
   ========================================================= */
.ls-hero{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(79,100,120,.16), transparent),
    radial-gradient(900px 500px at -10% 110%, rgba(125,146,166,.16), transparent),
    var(--ls-bg);
  color: var(--ls-fg);
  padding: clamp(48px, 6vw, 96px) 20px;
  border-bottom: 1px solid var(--ls-border);
}
.ls-hero__inner{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:minmax(220px,var(--section-media-ratio)) minmax(0,1fr);
  gap: clamp(24px, 4vw, 56px); align-items:center;
}
@media (max-width:900px){ .ls-hero__inner{ grid-template-columns:1fr; } }
.ls-hero__media{ order:1; display:flex; justify-content:center; }
@media (max-width:900px){ .ls-hero__media{ order:2; } }

.ls-hero__photo{
  width:clamp(220px, 30vw, 320px);
  height:clamp(220px, 30vw, 320px);
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--ls-border);
  box-shadow: var(--ls-shadow);
  display:block; background:#f1f5f9;
}

.ls-hero__content{ order:2; }
@media (max-width:900px){ .ls-hero__content{ order:1; } }

.ls-hero__logo{
  display:block;
  width:auto;
  height: clamp(160px, 5.8vw, 272px);
  max-width: min(100%, 760px);
  margin: 0 0 0px;
}

.ls-hero__title{
  font-size: clamp(28px, 4vw, 44px);
  line-height:1.12; margin:0 0 10px; letter-spacing:.2px;
}

.ls-brand{
  background: linear-gradient(90deg, #4f6478, #7d92a6);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:800;
}

.ls-hero__subtitle{
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--ls-fg-dim);
  margin: 0 0 18px;
}

.ls-hero__cta{
  display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 18px;
}

.ls-btn{
  --pad-y: 12px; --pad-x: 18px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px; text-decoration:none; font-weight:650;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  border: 1px solid var(--ls-border);
  display:inline-flex; align-items:center; gap:8px;
}
.ls-btn:focus{ outline:2px solid #9db6ff; outline-offset:2px; }
.ls-btn:active{ transform: translateY(1px); }

.ls-btn--primary{
  background: var(--ls-accent);
  color:#ffffff;
  box-shadow: 0 8px 24px rgba(79,100,120,.28);
}
.ls-btn--primary:hover{ background:#415467; }
.ls-btn--ghost{
  background: transparent; color: var(--ls-fg);
}
.ls-btn--ghost:hover{ background: rgba(2,6,23,.05); }

.ls-hero__points{
  list-style:none; padding:0; margin:10px 0 14px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  color: var(--ls-fg); font-size:15px;
}
@media (max-width:680px){ .ls-hero__points{ grid-template-columns:1fr; } }
.ls-hero__points li{
  background: var(--ls-card);
  border:1px solid var(--ls-border);
  border-radius: var(--ls-radius-sm);
  padding:10px 12px;
  box-shadow: var(--ls-shadow);
}

.ls-hero__meta{
  display:flex; align-items:center; gap:10px;
  color: var(--ls-fg-dim); font-size:14px; margin-top:6px;
}
.ls-chip{
  background: #ffffff;
  border:1px solid var(--ls-border);
  padding:6px 10px; border-radius:999px;
}
.ls-sep{ opacity:.45; }