/* Sundhedsrengøring — hjemmesiden (okt. 2026, overtaget fra Lovable). Samme udtryk: Playfair Display + Inter, dyb teal. */
:root {
  --bg: #fcfdfd; --flade: #ffffff; --mint: #eef7f5; --mint2: #dcefea; --kant: #e3ebea; --tekst: #152228; --daempet: #5e6f78;
  --teal: #14545d; --teal2: #0f434a; --teal3: #2c9a8a; --gul: #f2c36b; --radius: 18px; --skygge: 0 1px 2px rgba(21,34,40,.04), 0 8px 24px rgba(21,34,40,.06);
  --serif: 'Playfair Display', Georgia, serif; --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
img { display: block; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; } .skip:focus { left: 12px; }
:focus-visible { outline: 2.5px solid var(--teal3); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.12; margin: 0; }
h2 { font-size: clamp(30px, 4.2vw, 46px); } h2 em, h1 em { font-style: italic; color: var(--teal3); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 600; color: var(--teal3); margin: 0 0 12px; }
.eyebrow.lys { color: #bfe7de; }
.sek { padding: 96px 0; } .sek-mint { background: linear-gradient(180deg, var(--mint), #f6fbfa); }
.sek-lead { color: var(--daempet); font-size: 17.5px; max-width: 640px; margin: 16px 0 0; }

/* Knapper */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 14.5px; text-decoration: none; border: 1.5px solid transparent; transition: background .15s, transform .15s, box-shadow .15s; white-space: nowrap; cursor: pointer; }
.knap svg { width: 16px; height: 16px; }
.knap.prim { background: var(--teal); color: #fff; box-shadow: 0 6px 16px rgba(20,84,93,.22); } .knap.prim:hover { background: var(--teal2); transform: translateY(-1px); }
.knap.lys { background: #fff; color: var(--tekst); border-color: var(--kant); } .knap.lys:hover { border-color: #c9d6d4; }
.knap.omrids { background: var(--mint); color: var(--teal); border-color: #bfe0d8; } .knap.omrids:hover { background: var(--mint2); }
.knap.hvid { background: #fff; color: var(--teal2); } .knap.hvid:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.knap.gennemsigtig { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); } .knap.gennemsigtig:hover { background: rgba(255,255,255,.14); }
.knap.stor { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; } .knap.fuld { width: 100%; }

/* Header */
.hoved { position: sticky; top: 0; z-index: 50; background: rgba(252,253,253,.88); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hoved.rullet { border-bottom-color: var(--kant); }
.hoved-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tekst); font-family: var(--serif); font-size: 20px; font-weight: 600; }
.brand.lys { color: #fff; }
.nav { display: flex; gap: 26px; margin: 0 auto; } .nav > a { color: #344650; text-decoration: none; font-size: 14.5px; font-weight: 500; } .nav > a:hover { color: var(--teal); }
.nav-mobil { display: none; }
.hoved-knapper { display: flex; align-items: center; gap: 8px; }
.tlf-link { display: inline-flex; align-items: center; gap: 6px; color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 14px; margin-right: 6px; } .tlf-link svg { width: 15px; height: 15px; }
.menuknap { display: none; width: 44px; height: 44px; border: 1px solid var(--kant); background: #fff; border-radius: 10px; margin-left: auto; padding: 12px 11px; flex-direction: column; justify-content: space-between; cursor: pointer; }
.menuknap span { display: block; height: 2px; background: var(--tekst); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menuknap[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menuknap[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menuknap[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Hero */
.hero { position: relative; color: #fff; background: radial-gradient(1200px 600px at 85% 10%, rgba(44,154,138,.55), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(8,40,45,.8), transparent 60%), linear-gradient(135deg, #0f434a, #14545d 45%, #1f6f6c); overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 88px 24px 96px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); margin: 0 0 22px; } .badge svg { width: 15px; height: 15px; }
.hero h1 { font-size: clamp(38px, 5.6vw, 66px); }
.lead { font-size: 18.5px; color: rgba(255,255,255,.88); max-width: 600px; margin: 22px 0 30px; }
.hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; }
.tal { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 34px; justify-content: start; }
.tal b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; } .tal span { font-size: 13.5px; color: rgba(255,255,255,.75); }

/* Mini-prisberegner */
.mini { background: #fff; color: var(--tekst); border-radius: 22px; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 14px; }
.mini-top { display: flex; gap: 12px; align-items: center; } .mini-top b { display: block; font-size: 17px; } .mini-top small { color: var(--daempet); font-size: 13px; }
.mini-ik { width: 44px; height: 44px; border-radius: 12px; background: var(--mint); color: var(--teal); display: flex; align-items: center; justify-content: center; } .mini-ik svg { width: 22px; height: 22px; }
.mini-type { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mini-type legend { font-size: 13px; font-weight: 600; color: var(--daempet); margin-bottom: 6px; padding: 0; }
.mini-type input { position: absolute; opacity: 0; pointer-events: none; }
.mini-type span { display: block; text-align: center; padding: 9px 8px; border-radius: 10px; border: 1.5px solid var(--kant); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.mini-type input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; } .mini-type input:focus-visible + span { outline: 2.5px solid var(--teal3); outline-offset: 2px; }
.mini-felt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--daempet); }
.mini-felt select { font: inherit; font-size: 15px; color: var(--tekst); padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--kant); background: #fff; }
.mini-areal { display: flex; align-items: center; gap: 12px; } .mini-areal input { flex: 1; accent-color: var(--teal); } .mini-areal output { font-size: 16px; font-weight: 700; color: var(--tekst); min-width: 70px; text-align: right; }
.mini-pris { background: var(--mint); border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mini-pris small { color: var(--teal); font-weight: 600; font-size: 13px; } .mini-pris b { font-size: 28px; color: var(--teal); letter-spacing: -.02em; transition: opacity .2s; } .mini-pris b.henter { opacity: .5; }
.mini-lille { margin: -4px 0 0; font-size: 12.5px; color: var(--daempet); text-align: center; }

/* Ydelser */
.kort-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.ydelse { background: var(--flade); border: 1px solid var(--kant); border-radius: var(--radius); padding: 26px; box-shadow: var(--skygge); transition: transform .2s, box-shadow .2s; }
.ydelse:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(21,34,40,.09); }
.ydelse h3 { font-size: 21px; margin: 18px 0 8px; } .ydelse p { margin: 0; color: var(--daempet); font-size: 15px; }
.ik { width: 44px; height: 44px; border-radius: 12px; background: var(--mint); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; flex: none; } .ik svg { width: 21px; height: 21px; }

/* Sådan virker det + telefon */
.saadan-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.punkter { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 14px; }
.punkter li { padding-left: 34px; position: relative; color: #33454d; } .punkter li b { color: var(--tekst); }
.punkter li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); }
.punkter li::after { content: ''; position: absolute; left: 8px; top: 8px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.tlf-ramme { display: flex; justify-content: center; }
.tlf { width: 330px; height: 660px; border-radius: 50px; background: #0f1f1b; padding: 12px; box-shadow: 0 40px 80px rgba(15,67,74,.35); position: relative; transform: rotate(3deg); }
.noetch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 100px; height: 26px; border-radius: 16px; background: #0f1f1b; z-index: 2; }
.skaerm { width: 100%; height: 100%; border-radius: 38px; background: #f4f7f6; overflow: hidden; position: relative; font-size: 13px; color: #17302b; }
.app-top { background: #fff; padding: 46px 16px 12px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #e1e8e6; } .app-top b { font-size: 14px; } .app-top small { display: block; color: #5f7470; font-size: 11px; }
.app-krop { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.akort { background: #fff; border: 1px solid #e1e8e6; border-radius: 14px; padding: 11px 12px; } .akort.mint { background: #e2f2ec; border-color: #c5e6d9; } .besked-fra { font-size: 11px; font-weight: 700; color: #1d5c4f; margin-bottom: 2px; }
.r { display: flex; align-items: center; gap: 8px; } .f1 { flex: 1; } .graa { color: #5f7470; font-size: 11.5px; }
.dato { width: 42px; text-align: center; background: #e2f2ec; color: #1d5c4f; border-radius: 10px; padding: 4px 0; font-weight: 800; font-size: 16px; line-height: 1.05; } .dato small { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #e4f5ea; color: #15803d; white-space: nowrap; }
.tjekliste { margin-top: 8px; } .tjekliste div { display: flex; gap: 7px; font-size: 11.5px; padding: 3px 0; align-items: flex-start; }
.tjekliste i { width: 16px; height: 16px; border-radius: 50%; background: #1d5c4f; flex: none; position: relative; margin-top: 1px; }
.tjekliste i::after { content: ''; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fotos { display: flex; gap: 6px; margin-top: 8px; } .foto { flex: 1; height: 70px; border-radius: 10px; position: relative; overflow: hidden; }
.foto span { position: absolute; left: 5px; bottom: 5px; background: rgba(0,0,0,.55); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.f-a { background: linear-gradient(160deg, #dfe9e6 0 40%, #c9d8d3 40% 100%); } .f-a::before { content: ''; position: absolute; left: 18%; top: 22%; width: 44%; height: 34%; background: #fff; border-radius: 5px; box-shadow: 0 2px 0 #b8c9c3; }
.f-b { background: linear-gradient(180deg, #eef3f1 0 55%, #d6e2de 55% 100%); } .f-b::before { content: ''; position: absolute; left: 30%; top: 18%; width: 40%; height: 46%; border-radius: 50% 50% 6px 6px; background: #fff; border: 2px solid #c3d3ce; }
.f-c { background: linear-gradient(135deg, #e7efec, #cfdcd8); } .f-c::before { content: ''; position: absolute; left: 12%; right: 12%; top: 30%; height: 20%; background: #fff; border-radius: 3px; }
.stjr { margin-top: 8px; } .stj { color: #f0b451; font-size: 15px; letter-spacing: 2px; }
.bundnav { position: absolute; bottom: 0; left: 0; right: 0; height: 58px; background: #fff; border-top: 1px solid #e1e8e6; display: flex; justify-content: space-around; align-items: center; padding-bottom: 6px; font-size: 9px; color: #5f7470; font-weight: 600; }
.bundnav div { display: flex; flex-direction: column; align-items: center; gap: 3px; } .bundnav i { width: 17px; height: 17px; border-radius: 5px; border: 1.8px solid currentColor; } .bundnav .a { color: #1d5c4f; }

/* Om os */
.om-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.om-kort { position: relative; min-height: 380px; border-radius: 28px; background: linear-gradient(150deg, var(--mint2), var(--mint) 60%, #fff); padding: 34px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ok { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--skygge); display: flex; gap: 12px; align-items: center; } .ok b { display: block; font-size: 15.5px; } .ok small { color: var(--daempet); font-size: 13.5px; }
.ok2 { display: block; margin-left: 40px; border-left: 4px solid var(--teal3); } .ok3 { display: block; margin-right: 40px; background: var(--teal); color: #fff; } .ok3 small { color: rgba(255,255,255,.8); }
.flueben { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.flueben li { display: flex; gap: 12px; align-items: flex-start; color: #33454d; }
.flueben li::before { content: '✓'; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--teal3); color: var(--teal3); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* Pris */
.pris-in { display: grid; grid-template-columns: 1fr; gap: 30px; justify-items: start; }
.trin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.trin li { background: #fff; border: 1px solid var(--kant); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.trin span { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.trin b { font-size: 16.5px; } .trin small { color: var(--daempet); font-size: 14px; }

/* Kontakt */
.kontakt-boks { border-radius: 28px; padding: 56px; color: #fff; background: radial-gradient(800px 400px at 100% 100%, rgba(63,180,160,.6), transparent 60%), linear-gradient(135deg, #14545d, #1f6f6c); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; box-shadow: 0 30px 60px rgba(15,67,74,.22); }
.kontakt-boks h2 { color: #fff; } .kontakt-boks p { color: rgba(255,255,255,.88); font-size: 17px; margin: 16px 0 26px; }
.kontakt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kontakt-liste li { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 14px 16px; }
.kontakt-liste .ik { background: rgba(255,255,255,.14); color: #fff; } .kontakt-liste small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); } .kontakt-liste a, .kontakt-liste span { color: #fff; font-weight: 600; text-decoration: none; }

/* Footer */
.fod { background: #0f434a; color: rgba(255,255,255,.82); padding: 64px 0 26px; font-size: 14.5px; }
.fod-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .fod p { max-width: 360px; }
.fod h4 { color: #fff; font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 4px 0 14px; } .fod ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fod a { color: rgba(255,255,255,.82); text-decoration: none; } .fod a:hover { color: #fff; }
.fod-bund { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.6); }

/* Privatlivspolitik */
.tekstside { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; } .tekstside h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 10px; }
.tekstside h2 { font-size: 24px; margin: 36px 0 10px; } .tekstside p, .tekstside li { color: #33454d; } .tekstside .opdateret { color: var(--daempet); font-size: 14px; }

/* Mobil */
@media (max-width: 1080px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column; gap: 0; padding: 10px 24px 20px; border-bottom: 1px solid var(--kant); box-shadow: 0 20px 40px rgba(21,34,40,.1); }
  .nav.aaben { display: flex; } .nav > a { padding: 13px 0; border-bottom: 1px solid var(--kant); font-size: 16px; }
  .nav-mobil { display: grid; gap: 8px; margin-top: 16px; } .nav-mobil .knap { padding: 12px; font-size: 15px; }
  .hoved-knapper .knap.lys, .hoved-knapper .knap.omrids, .tlf-link { display: none; } .hoved-knapper { margin-left: auto; } .menuknap { display: flex; margin-left: 0; }
  .hero-in, .saadan-in, .om-in, .kontakt-boks { grid-template-columns: 1fr; } .hero-in { padding: 56px 24px 64px; gap: 40px; } .kort-gitter { grid-template-columns: 1fr 1fr; }
  .fod-in { grid-template-columns: 1fr 1fr; } .fod-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; } .sek { padding: 64px 0; } .hero-in { padding: 44px 18px 52px; }
  .hoved-knapper .knap.prim { padding: 9px 13px; } .brand span { font-size: 18px; }
  .tal { grid-template-columns: 1fr 1fr; gap: 20px; } .kort-gitter, .trin { grid-template-columns: 1fr; }
  .kontakt-boks { padding: 32px 22px; border-radius: 22px; } .tlf { transform: none; width: 290px; height: 590px; } .om-kort { padding: 22px; min-height: 0; } .ok2 { margin-left: 18px; } .ok3 { margin-right: 18px; }
  .fod-in { grid-template-columns: 1fr; } .mini { padding: 20px; } .mini-pris b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media (max-width: 640px) {
  .hoved-in { gap: 10px; height: 64px; } .nav { top: 64px; } .brand { gap: 8px; } .brand img { width: 30px; height: 30px; } .brand span { font-size: 17px; }
  .hoved-knapper .knap.prim { padding: 8px 11px; font-size: 13.5px; } .menuknap { width: 42px; height: 42px; flex: none; }
  .mini-pris { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-width: 360px) { .brand span { display: none; } }