/* Almindelige sider (issue 6): sideoverskrift, tekstsider, kontakt, åbningstider, formularer. */
.page-hero{padding:56px 0 40px;background:linear-gradient(180deg,var(--sky-50),#fff)}
.page-hero .wrap{max-width:1280px}   /* samme bredde og venstrekant som resten af siden og headeren */
.crumbs ol{list-style:none;display:flex;gap:.6em;margin:0 0 22px;padding:0;font-size:.95rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.6em;color:#9fb0c6}
.crumbs a{color:var(--navy)}
.page-hero h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:.98}
.page-hero .hl{margin:.04em 0 .06em -.04em}
.page-hero .lead{margin-top:20px;max-width:46ch}
/* Hero med billede: teksten til venstre, billedet helt ude ved heroens højre kant og flugtende med bunden (som raketten på forsiden).
   Billedet er skåret i bunden og til højre, så det må ikke have ramme, skygge eller luft dér. Højden følger skærmhøjden (vh, svh). */
.page-hero--bild{--hero-pad:40px;position:relative;overflow:hidden;display:flex;align-items:center;padding-bottom:0;
  min-height:clamp(300px,40vh,440px);min-height:clamp(300px,40svh,440px)}
.page-hero--bild .wrap{width:100%;padding-top:0;padding-bottom:40px}
/* Teksten flugter med sidens øvrige indhold og logoet, og er sat, så den ikke når ind under billedet */
.page-hero--bild .wrap{max-width:1280px}
.page-hero--bild h1{font-size:clamp(2rem,4.2vw,3.8rem)}
.page-hero__billede{position:absolute;right:calc((100% - min(100%, var(--wrap))) / 2 + var(--hero-pad));bottom:0;height:min(100%,34vw);width:auto;max-width:none;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 82%,transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 82%,transparent 100%)}   /* højre kant flugter med indholdets højre kant, og den skårne kant toner ud */
.sektion{padding:46px 0}
.sektion[id]{scroll-margin-top:110px}   /* ankre må ikke ende bag den klæbende header */
.sektion.sidste{padding-bottom:70px}
.sektion:focus-within{z-index:30}   /* forslagslisten under et felt må ikke males over af næste sektion */
/* Smalle sektioner: indholdet står i samme venstrekant som resten af siden og har en behagelig linjelængde */
.wrap.smal{max-width:1280px}
.wrap.smal>*{max-width:860px}
.sek-titel{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--navy);font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.01em;line-height:1.05;margin:0 0 22px}
.under-titel{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--navy);margin:30px 0 10px}

/* kontaktkort */
.kort-raekke{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:18px}
.kontakt-kort{display:flex;gap:16px;align-items:center;background:var(--sky-50);border-radius:var(--r-md);padding:22px 24px;text-decoration:none;color:var(--navy)}
a.kontakt-kort:hover{background:var(--sky-100)}
.kontakt-kort .ci{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--navy);flex:none}
.kontakt-kort .ico{width:24px;height:24px;stroke-width:2}
.kontakt-kort small{display:block;font-family:var(--label);font-size:1.15rem;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.kontakt-kort b{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.25}

/* åbningstider */
.aaben-nu{margin:0 0 18px;font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--navy)}
.aaben-nu:empty{display:none}
.aaben-nu::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:10px;background:var(--muted)}
.aaben-nu[data-tilstand="aaben"]::before{background:var(--green);box-shadow:0 0 0 4px rgba(141,198,63,.3)}
.aaben-nu[data-tilstand="lukket"]::before{background:var(--orange-strong)}
.tider{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.tider th,.tider td{padding:16px 22px;text-align:left;border-bottom:1.5px solid var(--line)}
.tider tr:last-child th,.tider tr:last-child td{border-bottom:0}
.tider th{font-family:var(--display);font-weight:700;color:var(--navy)}
.tider td{text-align:right;font-weight:600}
.kommende{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kommende li{display:flex;justify-content:space-between;gap:20px;border-bottom:1.5px solid var(--line);padding:8px 2px}

/* formular */
.advarsel{background:var(--orange-50);border-left:5px solid var(--orange-strong);border-radius:12px;padding:16px 20px;margin:0 0 24px;color:var(--ink);font-weight:600}
.fejlboks{background:#fff3f0;border:2px solid var(--orange-strong);border-radius:14px;padding:16px 20px;margin:0 0 24px;color:var(--ink)}
.fejlboks p{margin:0;font-weight:700}
.fejlboks ul{margin:8px 0 0;padding-left:1.2em}
.kontakt-form{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.felt{display:grid;gap:6px}
.felt label{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--navy)}
.felt input,.felt select,.felt textarea{font:inherit;color:var(--ink);background:#fff;border:2px solid #b8c6d8;border-radius:14px;padding:14px 16px;width:100%}
.felt textarea{resize:vertical;min-height:150px}
.felt input:focus-visible,.felt select:focus-visible,.felt textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.felt.har-fejl input,.felt.har-fejl select,.felt.har-fejl textarea{border-color:var(--orange-strong)}
.kontakt-form .btn{justify-self:start}
/* "Mente du ...?" */
.mentedu{background:var(--sky-50);border:2px solid var(--navy);border-radius:14px;padding:16px 20px}
.mentedu p{margin:0 0 12px;font-weight:700;color:var(--navy)}
.mentedu-knapper{display:flex;flex-wrap:wrap;gap:12px}
.mentedu .btn{padding:.8em 1.2em;font-size:.95rem;overflow-wrap:anywhere;text-align:left}
/* Skjult felt til robotter: uden for skærmen, men ikke display:none (så robotter stadig udfylder det) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* pladsholdere (kun dev-web) */
.ph{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-size:.88rem;font-style:italic;color:#6b5a1f;background:#fff6d6;border:1.5px dashed #c9a93a;border-radius:8px;padding:.2em .7em}

@media (max-width:900px){
  .page-hero--bild{display:block;min-height:0;padding-bottom:0}
  .page-hero--bild .wrap{padding-bottom:6px}
  .page-hero--bild h1{font-size:clamp(1.7rem,8.6vw,2.6rem)}
  .page-hero__billede{position:relative;right:auto;display:block;margin:6px var(--hero-pad) 0 auto;height:auto;width:min(52vw,250px)}
  .kort-raekke{grid-template-columns:1fr}
  .page-hero{padding:36px 0 28px}
  .page-hero--bild{padding-bottom:0}
  .sektion{padding:34px 0}
}
@media (max-width:640px){
  .page-hero h1{font-size:clamp(1.7rem,8.6vw,2.6rem)}
}

/* ---------- Hastigheder og tekstsider (trin 2) ---------- */
.brug-raekke{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.brug-kort{background:var(--sky-50);border-radius:var(--r-md);padding:28px 28px 24px}
.brug-kort h3{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--navy);margin:0 0 14px}
.brug-kort ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.brug-kort li{display:flex;gap:10px;align-items:flex-start}
.brug-kort li .ico{flex:none;width:22px;height:22px;stroke:var(--green-700);stroke-width:2.2;margin-top:2px}
.addr-lys{margin-top:22px;max-width:640px;border:2px solid #b8c6d8;box-shadow:none}
.tekstside p{max-width:68ch}
.tekstside .sek-titel{margin-top:34px}
.cookie-tabel th,.cookie-tabel td{font-size:.98rem}
.cookie-tabel thead th{background:var(--sky-50);font-family:var(--label);font-weight:400;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cookie-tabel td{text-align:left}
@media (max-width:900px){
  .brug-raekke{grid-template-columns:1fr}
  .cookie-tabel,.cookie-tabel tbody,.cookie-tabel tr,.cookie-tabel th,.cookie-tabel td{display:block}
  .cookie-tabel thead{position:absolute;left:-9999px}
  .cookie-tabel tr{padding:12px 4px;border-bottom:1.5px solid var(--line)}
  .cookie-tabel th,.cookie-tabel td{border:0;padding:4px 18px}
  .cookie-tabel td::before{content:attr(data-label) ": ";font-weight:700;color:var(--navy)}
}

/* ---------- Om Skywire, Sommerhus, tekstsider (trin 3 og 4) ---------- */
.tidslinje{list-style:none;margin:0 0 24px;padding:0 0 0 0;display:grid;gap:0;border-left:3px solid var(--sky-100)}
.tidslinje li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:6px 0 26px 26px;position:relative}
.tidslinje li::before{content:"";position:absolute;left:-10px;top:12px;width:17px;height:17px;border-radius:50%;background:var(--orange-strong);box-shadow:0 0 0 4px #fff}
.tl-aar{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--navy)}
.tidslinje h3{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--navy);margin:0 0 6px}
.tidslinje p{margin:0;max-width:60ch}
.brug-raekke.fire{grid-template-columns:repeat(4,1fr)}
.ikon-rund{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--navy);margin-bottom:14px}
.ikon-rund .ico{width:28px;height:28px;stroke-width:1.8}
.brug-kort p{margin:0;color:var(--muted)}
.knaprakke{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.knaprakke .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}   /* den lange tekst "Bestil med betalingsforpligtelse" skal kunne ombrydes på 320 px */
.trin-liste{list-style:none;margin:24px 0;padding:0;display:grid;gap:14px}
.trin-liste li{display:flex;gap:18px;align-items:center;background:var(--sky-50);border-radius:var(--r-md);padding:18px 22px}
.trin-liste .n{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--navy);font-family:var(--display);font-weight:900;font-size:1.2rem;display:grid;place-items:center}
.trin-liste li:last-child .n{background:var(--orange-strong);color:#fff}
.trin-liste b{display:block;font-family:var(--display);font-weight:800;color:var(--navy)}
.trin-liste span{color:var(--muted)}
.opbevaring{background:var(--sky-50);border-radius:12px;padding:12px 16px;max-width:68ch}
@media (max-width:1100px){.brug-raekke.fire{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.brug-raekke.fire{grid-template-columns:1fr}.tidslinje li{grid-template-columns:1fr;gap:4px}}

/* ---------- Adressetjek (issue 8) ---------- */
.valg{margin-top:34px}
.adresseliste{list-style:none;margin:16px 0;padding:0;display:grid;gap:10px;max-width:640px}
.adresseliste a{display:flex;gap:14px;align-items:center;background:var(--sky-50);border-radius:var(--r-md);padding:16px 20px;text-decoration:none;color:var(--navy);font-family:var(--display);font-weight:700}
.adresseliste a:hover,.adresseliste a:focus-visible{background:var(--sky-100)}
.opgang-etage{margin:28px 0 10px;font-size:1.1rem}
.opgang-liste{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.opgang-valg{display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--sky-50);border-radius:var(--r-md);padding:12px;text-decoration:none;color:var(--navy);font-family:var(--display);font-weight:700;text-align:center}
.opgang-valg:hover,.opgang-valg:focus-visible{background:var(--sky-100)}
.adresseliste .ico{flex:none;width:22px;height:22px;stroke:var(--sky);stroke-width:2}
.fiberlinje{font-size:1.15rem;color:var(--navy);margin:0 0 6px}
.produktraekke{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin:26px 0}
.produkt{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:30px 28px 28px;display:flex;flex-direction:column;gap:12px}
.produkt h2{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--navy);margin:0}
.produkt .hast{font-family:var(--display);font-weight:900;font-size:2.2rem;color:var(--navy);line-height:1}
.produkt .hast small,.produkt .maanedspris small{font-size:.9rem;font-weight:700;color:var(--navy-700)}
.produkt .maanedspris{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--orange-strong)}
.produkt ul{list-style:none;margin:0;padding:12px 0 0;border-top:1.5px solid var(--line);display:grid;gap:8px}
.produkt li{display:flex;gap:10px;align-items:flex-start}
.produkt li .ico{flex:none;width:20px;height:20px;stroke:var(--green-700);stroke-width:2.2;margin-top:2px}
.produkt .mindstepris{margin:0;color:var(--muted);font-size:.98rem}
.produkt .btn{margin-top:auto;width:100%}
.kun-indfoering{margin:6px 0 24px}
.kun-indfoering a{color:var(--navy);font-weight:700}

/* ---------- Bestilling og tilmelding (issue 9) ---------- */
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset legend{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--navy);padding:0;margin-bottom:8px}
fieldset.gruppe{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px 20px;display:grid;gap:14px}
fieldset.gruppe legend{padding:0 8px}
.hjaelp{margin:0;color:var(--muted);font-size:.95rem}
.felt-fejl{margin:0;color:#a13a00;font-weight:700;font-size:.95rem}
.valg-linje{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-family:var(--body);font-weight:400;font-size:1rem;color:var(--ink);cursor:pointer}
.valg-linje input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--navy)}
.valg-linje small{color:var(--muted)}
.felt.afkryds{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.felt.afkryds .ikke-samtykke{display:none;flex:0 0 100%;margin:0;padding-left:34px;font-size:.95rem;color:var(--ink)}
.felt.afkryds input:not(:checked) ~ .ikke-samtykke{display:block}      /* uden samtykke: beskeden vises uden JavaScript */
.fortrydelse-note{margin:0 0 16px}
.felt.afkryds input{flex:none;width:22px;height:22px;padding:0;margin-top:3px;accent-color:var(--navy)}
.felt.afkryds label{font-family:var(--body);font-weight:400;font-size:1rem;color:var(--ink)}
.felt.afkryds a{color:var(--navy)}
.trinrude{list-style:none;margin:0 0 26px;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.trinrude li{display:flex;align-items:center;gap:8px;color:var(--muted);font-family:var(--display);font-weight:700;font-size:.9rem}
.trinrude .nr{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sky-100);color:var(--navy)}
.trinrude li[aria-current="step"]{color:var(--navy)}
.trinrude li[aria-current="step"] .nr{background:var(--navy);color:#fff}
.trinrude li.klar .nr{background:var(--green-700);color:#fff}
.valgt-produkt{background:var(--sky-50);border-radius:var(--r-md);padding:12px 16px;margin:0 0 18px;color:var(--navy)}
.opsummering{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:8px 22px;background:var(--sky-50);border-radius:var(--r-md);padding:20px 24px;margin:0 0 22px}
.opsummering dt{font-family:var(--display);font-weight:700;color:var(--navy)}
.opsummering dd{margin:0;overflow-wrap:anywhere}
.fortrydelse{color:var(--navy)}
.fortrydelse strong{font-weight:700}
.opsummering dt{overflow-wrap:anywhere}
@media (max-width:560px){.opsummering{grid-template-columns:minmax(0,1fr)}.opsummering dd{margin-bottom:8px}}
.adresseliste small{margin-left:auto;color:var(--muted);font-weight:400;font-family:var(--body)}

/* ---------- Deling (issue 10) ---------- */
.delingsbillede{margin:0 0 22px}
.delingsbillede img{display:block;width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--shadow)}
.deling{margin-top:42px;padding-top:30px;border-top:2px solid var(--line)}
.deling textarea{font:inherit;width:100%;min-height:110px;padding:14px 16px;border:2px solid #b8c6d8;border-radius:14px;background:#fff;color:var(--ink)}
.delingsknapper .btn{padding:.8em 1.2em;font-size:.95rem}
@media (scripting: enabled){.noscript-kun{display:none}}
.btn[hidden]{display:none}

/* Telefon med landekode (issue 17) og besked i første udgave (issue 16) */
.felt.telefon .telefon-raekke{display:flex;gap:10px}
.felt.telefon select{flex:0 0 11.5em;max-width:45%}
.felt.telefon input{flex:1 1 auto;min-width:0}
.foerste-besked{font-size:1.15rem;margin:0 0 28px}
.foerste-besked a{color:var(--navy);font-weight:700}
input[readonly]{background:#f3f6fa;color:var(--ink)}

/* Ejerens oplysninger (issue 9): felterne er synlige uden JavaScript og skjules kun, når kunden har valgt "ja" */
fieldset.ejer .ejer-felter{display:grid;gap:14px;margin-top:10px}
fieldset.ejer:has(input[name="ejer"][value="ja"]:checked) .ejer-felter{display:none}
.ejer-note{margin:12px 0}

/* Hero-billedets højre kant følger .wrap's sidepolstring (se site.css: 40, 28, 16 og 14 px) */
@media (max-width:1100px){.page-hero--bild{--hero-pad:28px}}
@media (max-width:640px){.page-hero--bild{--hero-pad:16px}}
@media (max-width:400px){.page-hero--bild{--hero-pad:14px}}