@font-face{font-family:'Bitter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/bitter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/karla-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Karla'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/karla-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/karla-latin-700-normal.woff2') format('woff2');}

/* Opbygning (fra redesign-forslag B). Farver og typografi følger nedenfor. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--tekst); font-family:var(--font-tekst); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-titel); font-weight:var(--titel-vaegt); line-height:1.1; margin:0 0 .45em; text-wrap:balance;}
p{margin:0 0 1em; text-wrap:pretty;}
a{color:inherit;}
ul,ol{margin:0; padding:0; list-style:none;}
figure{margin:0;}
:focus-visible{outline:3px solid var(--fokus); outline-offset:3px;}
section[id]{scroll-margin-top:120px;}
.ramme{max-width:1160px; margin:0 auto; padding:0 24px;}

/* Top */
.top{position:sticky; top:0; z-index:20; background:var(--top-bg); border-bottom:1px solid var(--kant);}
.top-raekke{display:flex; align-items:center; gap:28px; min-height:68px;}
.logo{font-family:var(--font-titel); font-weight:var(--titel-vaegt); font-size:21px; text-decoration:none; margin:0; color:var(--top-tekst);}
.logo span{color:var(--logo-accent);}
.menu{display:flex; gap:22px; margin-left:auto;}
.menu a{text-decoration:none; font-size:15.5px; color:var(--top-tekst); opacity:.85;}
.menu a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px;}

/* Knapper */
.knap{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 26px; font:600 16.5px/1.2 var(--font-tekst);
  text-decoration:none; border:2px solid transparent; border-radius:var(--radius-knap); cursor:pointer;}
.knap-primaer{background:var(--accent); color:var(--accent-tekst);}
.knap-primaer:hover{filter:brightness(.94);}
.knap-sekundaer{background:transparent; border-color:currentColor;}
.knap-lille{min-height:40px; padding:8px 18px; font-size:15px;}
.knapper{display:flex; flex-wrap:wrap; gap:12px;}

/* Helt */
.helt{padding:64px 0;}
.helt-gitter{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.helt h1{font-size:clamp(40px,5.4vw,68px);}
.indledning{font-size:20px; max-width:34em; margin-bottom:28px;}
.overlinje{font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; color:var(--overlinje);}

/* Fotopladser */
.foto-plads{aspect-ratio:4/3; border-radius:var(--radius-foto); display:flex; align-items:flex-end; padding:16px;
  background:repeating-linear-gradient(135deg, var(--foto-a) 0 14px, var(--foto-b) 14px 28px); color:var(--foto-tekst); font-size:13.5px; line-height:1.4;}
.foto-plads span{background:var(--foto-label); padding:6px 10px; border-radius:4px; max-width:34em;}
.helt-foto .foto-plads{aspect-ratio:5/4;}

/* Fakta */
.fakta{padding:0 0 56px;}
.fakta-liste{display:grid; grid-template-columns:repeat(5,1fr); margin:0; border-top:2px solid var(--tekst);}
.fakta-liste > div{padding:16px 18px 4px 0;}
.fakta-liste dt{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--daempet); margin-bottom:4px;}
.fakta-liste dd{margin:0; font-size:17px; font-weight:600; line-height:1.35;}

/* Veje */
.veje{padding:0 0 88px;}
.sektion-titel{font-size:clamp(30px,3.4vw,44px);}
.veje .sektion-titel{font-size:clamp(24px,2.4vw,30px);}
.veje-gitter{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.vej{border-radius:var(--radius-kort); padding:26px; display:flex; flex-direction:column;}
.vej-hvem{font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;}
.vej h3{font-size:22px; margin-bottom:18px;}
.vej ul{margin-top:auto;}
.vej li a{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--vej-kant); text-decoration:none; font-weight:600;}
.vej li a::after{content:"\2192";}
.vej li a:hover{text-decoration:underline;}

/* Sektioner */
.sektion{padding:96px 0;}
.sektion-skift{background:var(--flade);}
.sektion-moerk{background:var(--moerk); color:var(--moerk-tekst);}
.sektion-moerk .overlinje{color:var(--moerk-overlinje);}
.sektion-hoved{max-width:40em; margin-bottom:44px;}
.sektion-hoved p:last-child{color:var(--daempet);}
.sektion-moerk .sektion-hoved p:last-child{color:inherit;}
.to-spalter{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}

/* Afdelinger */
.afd-gitter{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.afd .foto-plads{aspect-ratio:1/1; margin-bottom:16px;}
.afd h3{font-size:21px;}
.afd p{font-size:16px; color:var(--daempet);}

/* Skema */
.skema-rul{overflow-x:auto; margin-bottom:48px; border:1px solid var(--kant); border-radius:var(--radius-kort); background:var(--bg);}
.skema{border-collapse:collapse; width:100%; min-width:720px; font-size:15.5px;}
.skema th,.skema td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--kant); vertical-align:top;}
.skema thead th{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--daempet);}
.skema tbody th{white-space:nowrap; color:var(--daempet); font-weight:600;}
.skema tr:last-child th,.skema tr:last-child td{border-bottom:none;}
.skema .praktik{font-weight:700; background:var(--praktik-bg);}
.under-titel{font-size:22px; margin-bottom:18px;}
.fag{display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px;}
.fag li{padding:14px 0; border-top:1px solid var(--kant); font-size:16px; color:var(--daempet);}
.fag b{display:block; color:var(--tekst); font-size:17px;}

/* Passer */
.passer-gitter{display:grid; grid-template-columns:1.3fr 1fr; gap:22px;}
.passer{border-radius:var(--radius-kort); padding:28px;}
.passer h3{font-size:21px; margin-bottom:14px;}
.passer li{padding:10px 0 10px 30px; position:relative; border-top:1px solid var(--kant);}
.passer-ja li::before{content:"\2713"; position:absolute; left:0; font-weight:700; color:var(--ja);}
.passer-nej li::before{content:"\2715"; position:absolute; left:0; font-weight:700; color:var(--nej);}

/* Metode */
.metode{counter-reset:m;}
.metode li{counter-increment:m; display:grid; grid-template-columns:44px 1fr; gap:12px; padding:16px 0; border-top:1px solid var(--moerk-kant);}
.metode li::before{content:counter(m, decimal-leading-zero); font-family:var(--font-titel); font-weight:var(--titel-vaegt); color:var(--moerk-overlinje);}
.sektion-moerk .knap{margin-top:12px;}

/* Forældre */
.tjek{margin:4px 0 28px;}
.tjek li{padding:10px 0 10px 30px; position:relative; border-top:1px solid var(--kant);}
.tjek li::before{content:"\2713"; position:absolute; left:0; font-weight:700; color:var(--ja);}

/* Ejere */
.ejere{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:40px;}
.ejer{display:grid; grid-template-columns:64px 1fr; gap:18px; background:var(--bg); border-radius:var(--radius-kort); padding:26px;}
.ejer-billede{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--moerk); color:var(--moerk-tekst); font:var(--titel-vaegt) 24px var(--font-titel);}
.ejer h3{font-size:21px; margin-bottom:2px;}
.ejer-rolle{font-size:14.5px; font-weight:700; color:var(--overlinje); margin-bottom:10px;}
.ejer p:last-child{font-size:16px; color:var(--daempet); margin:0;}
.tal{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:0;}
.tal div{display:flex; flex-direction:column-reverse; border-top:2px solid var(--tekst); padding-top:14px;}
.tal dd{margin:0; font-family:var(--font-titel); font-weight:var(--titel-vaegt); font-size:44px; line-height:1;}
.tal dt{font-size:15px; color:var(--daempet); margin-top:6px;}

/* Spørgsmål */
.spoerg details{border-top:1px solid var(--kant);}
.spoerg details:last-child{border-bottom:1px solid var(--kant);}
.spoerg summary{cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative; font-family:var(--font-titel); font-weight:var(--titel-vaegt); font-size:20px;}
.spoerg summary::-webkit-details-marker{display:none;}
.spoerg summary::after{content:"+"; position:absolute; right:6px; top:16px; font-size:26px; font-family:var(--font-tekst); font-weight:400;}
.spoerg details[open] summary::after{content:"\2013";}
.spoerg details p{color:var(--daempet); padding-bottom:12px; max-width:36em;}

/* Kontakt */
.sektion-kontakt{background:var(--flade);}
.direkte li{display:grid; grid-template-columns:90px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--kant);}
.direkte span:first-child{font-size:14px; color:var(--daempet);}
.formular{background:var(--bg); border-radius:var(--radius-kort); padding:30px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--kant);}
.roller{border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.roller legend{font-weight:700; font-size:15px; margin-bottom:8px; padding:0;}
.roller label{display:flex; align-items:center; gap:8px; padding:9px 14px; border:1.5px solid var(--kant); border-radius:var(--radius-knap); font-size:15.5px; cursor:pointer;}
.roller label:has(input:checked){border-color:var(--tekst); background:var(--flade); font-weight:700;}
.felt{display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:15px;}
.felt i{font-weight:400; font-style:normal; color:var(--daempet);}
.felt input,.felt textarea{font:400 17px var(--font-tekst); color:var(--tekst); background:var(--bg); padding:12px 14px; border:1.5px solid var(--kant); border-radius:var(--radius-input); width:100%;}
.flueben{display:flex; gap:10px; align-items:center; font-size:16px;}
.flueben input{width:20px; height:20px;}
.formular .knap{align-self:flex-start;}
.lille{font-size:14px; color:var(--daempet); margin:0;}

/* Bund */
.bund{background:var(--moerk); color:var(--moerk-tekst); padding:40px 0; font-size:15px;}
.bund .logo{color:var(--moerk-tekst); margin-bottom:6px;}
.bund-raekke{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.bund p{margin:0;}

/* Mobil */
@media (max-width:980px){
  .menu{display:none;}
  .top-raekke{justify-content:space-between;}
  .helt-gitter,.to-spalter,.passer-gitter{grid-template-columns:1fr;}
  .afd-gitter{grid-template-columns:1fr 1fr;}
  .fakta-liste{grid-template-columns:1fr 1fr;}
  .veje-gitter,.ejere{grid-template-columns:1fr;}
  .fag{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  body{font-size:17px;}
  .helt{padding:36px 0 44px;}
  .sektion{padding:64px 0;}
  .afd-gitter,.fag,.tal{grid-template-columns:1fr;}
  .fakta-liste{grid-template-columns:1fr;}
  .ejer{grid-template-columns:1fr;}
  .formular{padding:20px;}
}

/* Farver og typografi: prototypens palet (mel, skorpe, mølle-grøn, kobber), Bitter + Karla. */
:root{
  --bg:#FBF8F1; --flade:#F3ECDE; --tekst:#241D17; --daempet:#544738; --kant:#E3D6BC;
  --fokus:#98591E;
  --moerk:#33473A; --moerk-tekst:#FBF8F1; --moerk-overlinje:#EBB57D; --moerk-kant:rgba(251,248,241,.22);
  --overlinje:#98591E; --logo-accent:#B5702E;
  --top-bg:#FBF8F1; --top-tekst:#4A2E1E;
  --radius-kort:6px; --radius-knap:4px; --radius-foto:4px; --radius-input:4px;
  --font-titel:'Bitter',serif; --font-tekst:'Karla',sans-serif; --titel-vaegt:700;
  --foto-a:#EAE0CC; --foto-b:#F3ECDE; --foto-tekst:#241D17; --foto-label:rgba(251,248,241,.9);
  --vej-kant:rgba(36,29,23,.2); --praktik-bg:#F3ECDE; --ja:#33473A; --nej:#A3412A;
  /* Lyse flader afledt af de tre hovedfarver, til veje og tal */
  --tone-groen:#D9E2D7; --tone-kobber:#F1DEC8; --tone-linned:#E3D6BC;

  /* Knapfarve K2 dyb kobber: 5,2:1 mod lys tekst. Prototypens #B5702E giver kun 3,7:1. */
  --accent:#98591E; --accent-tekst:#FBF8F1; --accent-hover:#7E4915;
  --accent-moerk:#E0A060; --accent-moerk-tekst:#241D17; --accent-moerk-hover:#EBB57D;
}

h1,h2,h3{color:#4A2E1E;}
.knap-primaer{background:var(--accent); color:var(--accent-tekst);}
.knap-primaer:hover{filter:none; background:var(--accent-hover);}

/* Helt: delt. Tekst på mølle-grønt panel, foto ved siden af */
.helt{padding:24px 0 56px;}
.helt-gitter{gap:0; align-items:stretch;}
.helt-tekst{background:var(--moerk); color:var(--moerk-tekst); padding:56px 48px; border-radius:6px 0 0 6px; display:flex; flex-direction:column; justify-content:center;}
.helt-tekst h1{color:var(--moerk-tekst);}
.helt-tekst .overlinje{color:var(--moerk-overlinje);}
.helt h1{font-size:clamp(40px,5.2vw,70px); line-height:1.02;}
.helt-foto .foto-plads{height:100%; aspect-ratio:auto; min-height:360px; border-radius:0 6px 6px 0;}
/* Uden foto fylder panelet hele bredden */
.helt-gitter:not(:has(.helt-foto)){grid-template-columns:1fr;}
.helt-gitter:not(:has(.helt-foto)) .helt-tekst{border-radius:6px;}

/* På mørke flader bruges den lyse knapvariant, så knappen ikke forsvinder i det grønne */
.helt-tekst .knap-primaer,.sektion-moerk .knap-primaer{background:var(--accent-moerk); color:var(--accent-moerk-tekst);}
.helt-tekst .knap-primaer:hover,.sektion-moerk .knap-primaer:hover{background:var(--accent-moerk-hover);}
.sektion-moerk h2,.sektion-moerk h3{color:var(--moerk-tekst);}

.fakta-liste{border-top:2px solid #4A2E1E;}

/* Tre veje i hver sin tone */
.vej-1{background:var(--tone-groen);}
.vej-2{background:var(--tone-kobber);}
.vej-3{background:var(--tone-linned);}
.vej-hvem{color:#4A2E1E;}

.passer{background:var(--flade);}
.passer-nej{background:#EFE9DF;}
.ejer{border:1px solid var(--kant);}

/* Tallene som stablede tonekort */
.tal div{border-top:none; border-radius:6px; padding:20px;}
.tal div:nth-child(1){background:var(--tone-groen);}
.tal div:nth-child(2){background:var(--tone-kobber);}
.tal div:nth-child(3){background:var(--tone-linned);}
.tal dd{color:#4A2E1E;}
.tal dt{color:var(--tekst);}

.bund .logo span{color:#E0A060;}

@media (max-width:980px){
  .helt-tekst{border-radius:6px 6px 0 0; padding:36px 24px;}
  .helt-foto .foto-plads{border-radius:0 0 6px 6px; min-height:240px;}
}

/* Mobilmenu */
.burger{display:none; background:none; border:none; cursor:pointer; padding:10px 6px; margin-left:auto;}
.burger span{display:block; width:24px; height:2.5px; background:var(--top-tekst); margin:5px 0;}
.top-raekke{position:relative;}

/* Pladsholdere for indhold chefen mangler at levere. Gate før go-live: grep -ci "indsæt\|bekræft" = 0 */
.mangler{display:inline-block; font:700 11px/1.4 system-ui,sans-serif; letter-spacing:.03em; text-transform:uppercase; background:#ffe14d; color:#222; padding:1px 6px; border-radius:3px; vertical-align:middle;}

/* Formular */
/* hidden skal vinde over display:flex på .formular, ellers forsvinder formularen ikke efter afsendelse */
[hidden]{display:none !important;}
.honning{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.fejl{margin:0; color:var(--nej); font-weight:700; font-size:15.5px;}
.fejl:empty{display:none;}
.tak{justify-content:center; min-height:240px;}
.tak:focus{outline:none;}
.lille a{color:inherit;}
.knap[disabled]{opacity:.7; cursor:progress;}
.bund a{color:inherit;}

/* Privatlivsside */
.top-raekke .knap-lille.til-hoejre{margin-left:auto;}
.tekstside{max-width:44em; padding:64px 0 96px;}
.tekstside h1{font-size:clamp(34px,4.4vw,52px);}
.tekstside h2{font-size:24px; margin-top:1.6em;}
.tekstside ul{list-style:disc; padding-left:1.3em; margin:0 0 1em;}
.tekstside li{margin-bottom:.3em;}

@media (max-width:980px){
  .burger{display:block;}
  .top-raekke .knap-lille{margin-left:8px;}
  .menu.aaben{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--top-bg); border-bottom:1px solid var(--kant); padding:8px 24px 16px;}
  .menu.aaben a{padding:12px 0; font-size:18px; border-top:1px solid var(--kant);}
}
@media (max-width:380px){
  .top-raekke{gap:10px;}
  .top .logo{font-size:18px; white-space:nowrap;}
  .top-raekke .knap-lille{padding:8px 10px; font-size:14px; white-space:nowrap; margin-left:0;}
  .burger{padding:10px 4px;}
}