/* LANudlejning — "Natten" Fotoet bærer siden. Sort ground, let sans med vidt tracking, næsten ingen UI. Bevidst enkelt-tema: siden er sort uanset brugerens systemindstilling. */ @font-face{ font-family:"LUVar"; src:url("../fonts/ubuntusans-var.woff2") format("woff2-variations"); font-weight:100 800; font-stretch:62.5% 100%; font-style:normal; font-display:swap; } /* ============================================================ TEMA Tre tilstande, ikke to: et eksplicit valg stempler data-theme på , mens standardindstillingen «system» ikke stempler noget — der afgør prefers-color-scheme alene. Derfor defineres den lyse palette på bar :root, og den mørke gentages to steder: i media-forespørgslen (så et eksplicit lysvalg slår et mørkt styresystem) og på [data-theme="dark"] (så knappen også vinder den anden vej). ============================================================ */ :root{ --bg:#f4f4f2; --surface:#ffffff; --surface-2:#eceae6; --ink:#17181c; --mute:#5b5e66; --line:#dcdbd6; --red:#b03a31; --glow:#0f5f78; --glow-soft:rgba(15,95,120,.35); --img-dim:none; --plan-filter:contrast(1.04); --logo:url("../img/logo-light.webp"); --pad:clamp(20px,4vw,56px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#06060a; --surface:#0b0b11; --surface-2:#101018; --ink:#f2f3f5; --mute:#a9acb4; --line:#252730; --red:#e8695f; --glow:#7fd6ec; --glow-soft:rgba(127,214,236,.35); --img-dim:brightness(.86); --plan-filter:invert(1) brightness(.92) contrast(1.06); --logo:url("../img/logo-dark.webp"); } } :root[data-theme="dark"]{ --bg:#06060a; --surface:#0b0b11; --surface-2:#101018; --ink:#f2f3f5; --mute:#a9acb4; --line:#252730; --red:#e8695f; --glow:#7fd6ec; --glow-soft:rgba(127,214,236,.35); --img-dim:brightness(.86); --plan-filter:invert(1) brightness(.92) contrast(1.06); --logo:url("../img/logo-dark.webp"); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:"LUVar","Helvetica Neue",Helvetica,Arial,sans-serif; font-stretch:100%; /* Fontens mellemrum er ~15 % smallere end Arials, og negativ letter-spacing på overskrifterne strammer dem yderligere. Uden dette klistrer ordene sammen: "Detviskal". */ word-spacing:.06em; -webkit-font-smoothing:antialiased; } /* Spærrede versal-labels: uden ekstra luft læses "DAG 2 AF 3" som ét ord. */ .hero .tiny,.hero .sub,.band .c1,.stats .k,.cta .k,.pagehead .kicker, .more .k,.more .go,.calc .lbl,.calc .out .k,.foot h2,.case .meta,.tail .btn, .nav ul,table.dt th,.gear .g .n,.calc .detail h3,.calc .cols2 h3,.reqs .k{ word-spacing:.16em; } /* Overskrifter har negativ letter-spacing og skal kun kompenseres let — mere end dette og linjerne brækker om unødigt. */ .hero h1,.pagehead h1,.sec > h2,.manifest p,.more h3,.case h3, .gear .g h3,.tail h2{ word-spacing:.08em; } img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--red);outline-offset:3px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .inner{max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* Springlink — synlig når den får fokus */ .skip{ position:absolute;left:-9999px;top:0;z-index:10; background:var(--red);color:#fff;padding:12px 18px;font-size:14px;text-decoration:none; } .skip:focus{left:0} /* Navigation */ .nav{display:flex;align-items:center;gap:32px;padding-top:22px;padding-bottom:22px;position:relative;z-index:3} .logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto} .logomark{ display:block;width:150px;height:26px; background:var(--logo) no-repeat left center;background-size:contain; } .nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase} .nav ul a{color:var(--mute);text-decoration:none;transition:color .15s} .nav ul a:hover{color:var(--ink)} .nav .spacer{margin-left:auto} .nav .tel{font-size:12px;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:3px;white-space:nowrap} /* Hero */ .hero{position:relative;min-height:min(76vh,660px);display:flex;align-items:flex-end;margin-top:-78px} .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%} /* Sløret må kun dække dér hvor teksten står. Dækkede man hele fladen, forsvandt hallen — og fotoet er hele pointen i den her retning. */ .hero .veil{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(6,6,10,.85) 0%,rgba(6,6,10,.15) 20%,rgba(6,6,10,.08) 38%,rgba(6,6,10,.5) 68%,rgba(6,6,10,.92) 100%), linear-gradient(90deg,rgba(6,6,10,.86) 0%,rgba(6,6,10,.62) 34%,rgba(6,6,10,.12) 62%,rgba(6,6,10,0) 78%); } .hero .cnt{position:relative;width:100%;padding-top:150px;padding-bottom:54px} .hero .tiny{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--glow);margin:0 0 26px} .hero h1{ margin:0 0 22px;font-weight:300; font-size:clamp(32px,5.4vw,66px);line-height:1.02;letter-spacing:-.02em; text-wrap:balance;max-width:22ch; } .hero h1 b{font-weight:700} .hero .sub{ margin:0;color:var(--mute);font-size:14px;letter-spacing:.2em;text-transform:uppercase; display:flex;gap:14px;flex-wrap:wrap;align-items:center; } .hero .sub i{font-style:normal;color:var(--line)} /* Billedbånd */ .band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)} .band figure{margin:0;background:var(--surface)} /* height:auto er nødvendig — width/height-attributterne på sætter ellers en eksplicit højde, og så ignoreres aspect-ratio helt. */ .band img{ width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:var(--img-dim); /* Båndet er fuld bredde, så 4/5 vokser uhæmmet: på en 3440px skærm blev hvert billede 1146x1433px — halvanden skærmhøjde stykket. Loftet holder dem nede, og object-fit beskærer i stedet for at strække. */ max-height:min(66vh,600px); } .band figcaption{padding:16px 18px 22px} .band .c1{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px} .band .c2{font-size:15.5px;letter-spacing:-.005em;margin-bottom:5px} .band .c3{font-size:12.5px;color:var(--mute);letter-spacing:.05em} /* Manifest */ .manifest{padding-top:96px;padding-bottom:96px;text-align:center} .manifest .rule{width:1px;height:64px;background:var(--line);margin:0 auto 44px} .manifest p{ margin:0 auto;max-width:30ch;font-weight:300; font-size:clamp(22px,3.2vw,36px);line-height:1.35;letter-spacing:-.018em;text-wrap:balance; } .manifest p b{font-weight:600;color:var(--glow)} .stats{display:flex;justify-content:center;gap:clamp(28px,6vw,80px);flex-wrap:wrap;margin-top:64px} .stats div{text-align:center} .stats .v{font-size:clamp(22px,2.8vw,32px);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stats .k{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--mute);margin-top:10px} /* Kontakt */ .cta{border-top:1px solid var(--line);padding-top:76px;padding-bottom:86px;text-align:center} .cta .k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 22px} .cta .tel{ display:inline-block;text-decoration:none; font-size:clamp(36px,6.6vw,74px);font-weight:300;letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums;border-bottom:1px solid var(--red);padding-bottom:12px; } .cta .n{margin:26px 0 0;color:var(--mute);font-size:13px;letter-spacing:.1em} /* Fod */ .foot{border-top:1px solid var(--line);padding-top:48px;padding-bottom:56px} .foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} .foot h2{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin:0 0 14px;font-weight:400} .foot p{margin:0;font-size:13px;line-height:1.75;color:var(--mute)} .foot p b{color:var(--ink);font-weight:400} .foot a{color:var(--mute);text-decoration:none} .foot a:hover{color:var(--ink)} .foot .legal{ margin-top:44px;padding-top:24px;border-top:1px solid var(--line); display:flex;gap:20px;flex-wrap:wrap;font-size:11.5px;color:var(--mute);letter-spacing:.05em; } .foot .legal .spacer{margin-left:auto} @media (max-width:900px){ .band{grid-template-columns:1fr} .band img{aspect-ratio:16/10} .nav ul{display:none} .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .foot .cols{grid-template-columns:1fr} } /* ============================================================ UNDERSIDER Forsiden er fotoet. Undersiderne er indholdet — samme sorte ground og samme lette sans, men strammere og mere tabelagtig. ============================================================ */ /* Sidehoved — en lav pendant til forsidens hero */ .pagehead{padding-top:64px;padding-bottom:56px;border-bottom:1px solid var(--line)} .pagehead .kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin:0 0 22px} .pagehead h1{ margin:0 0 20px;font-weight:300; font-size:clamp(30px,4.6vw,54px);line-height:1.04;letter-spacing:-.025em; text-wrap:balance;max-width:20ch; } .pagehead h1 b{font-weight:700} .pagehead .lede{margin:0;color:var(--mute);font-size:16.5px;line-height:1.62;max-width:62ch} /* Sider med langt indhold (guiden) må bruge hele bredden i overskriften — manchetten beholder sin læsebredde ligesom på resten af sitet */ .pagehead.bred h1{max-width:none} .pagehead .lede a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} /* Sektion */ .sec{padding-top:64px;padding-bottom:64px;border-bottom:1px solid var(--line)} .sec:last-of-type{border-bottom:0} .sec > h2{ margin:0 0 8px;font-weight:300; font-size:clamp(22px,2.6vw,30px);letter-spacing:-.022em; } .sec > h2 b{font-weight:600} .sec > .sub{margin:0 0 36px;color:var(--mute);font-size:14.5px;line-height:1.6;max-width:64ch} /* Casekort */ .cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .case{background:var(--surface);display:flex;flex-direction:column} .case > img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:var(--img-dim)} .case .bd{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1} .case .meta{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:12px} .case h3{margin:0 0 6px;font-weight:300;font-size:24px;letter-spacing:-.025em;line-height:1.1} .case .who{margin:0 0 18px;color:var(--mute);font-size:13.5px;line-height:1.55} .case .who b{color:var(--ink);font-weight:400} .case .facts{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--line);border:1px solid var(--line);margin-bottom:18px; } .case .facts div{background:var(--bg);padding:12px 14px} .case .facts .v{font-size:17px;font-weight:200;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .case .facts .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:6px} .case .did{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--mute)} .case .did b{color:var(--ink);font-weight:400} .case blockquote{ margin:0;padding:16px 0 0;border-top:1px solid var(--line); font-size:14px;line-height:1.6;color:var(--ink);font-weight:200; } .case blockquote cite{ display:block;margin-top:10px;font-style:normal; font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute); } .case .spacer{margin-top:auto} /* Chips — services på en case */ .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px} .chip{ font-size:11px;letter-spacing:.06em;color:var(--mute); border:1px solid var(--line);padding:5px 9px;white-space:nowrap; } .chip.on{color:var(--glow);border-color:var(--glow-soft)} /* Datatabel */ .tw{overflow-x:auto;-webkit-overflow-scrolling:touch} table.dt{width:100%;border-collapse:collapse;color:var(--ink);font-size:14.5px;min-width:560px} table.dt th{ text-align:left;font-weight:400;color:var(--mute); font-size:10px;letter-spacing:.16em;text-transform:uppercase; border-bottom:1px solid var(--line);padding:0 16px 12px 0; } table.dt td{ color:var(--ink);padding:15px 16px 15px 0; border-bottom:1px solid var(--line);line-height:1.5;vertical-align:top; } table.dt td.n{color:var(--mute);font-size:13.5px} table.dt td.r,table.dt th.r{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap} table.dt td.r{color:var(--glow)} table.dt tr:last-child td{border-bottom:0} /* Grejgrupper — 2×2, så der ikke står tomme celler tilbage på anden række */ .gear{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .gear .g{background:var(--surface);padding:26px 24px 28px} .gear .g .n{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .gear .g h3{margin:0 0 10px;font-weight:300;font-size:21px;letter-spacing:-.025em} .gear .g p{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--mute)} .gear .g ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.5} .gear .g li{padding:9px 0 9px 16px;border-top:1px solid var(--line);position:relative;color:var(--ink)} .gear .g li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:1px;background:var(--red)} .gear .g li span{display:block;color:var(--mute);font-size:12px;margin-top:3px} /* Priskort */ .price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .price .p{background:var(--surface);padding:30px 26px 32px} .price .p .v{font-size:clamp(30px,4vw,42px);font-weight:300;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums} .price .p .v small{font-size:.4em;letter-spacing:0;color:var(--mute);margin-left:6px} .price .p .k{font-size:13.5px;color:var(--mute);margin-top:14px;line-height:1.5} /* Notebox */ .note{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--red);padding:22px 24px;margin-top:36px} .note h3{margin:0 0 10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:400} .note p{margin:0 0 10px;font-size:14px;line-height:1.65;color:var(--mute)} .note p:last-child{margin-bottom:0} .note ul{margin:0;padding-left:18px;font-size:14px;line-height:1.75;color:var(--mute)} .note b{color:var(--ink);font-weight:400} /* Kontaktbånd nederst på undersider */ .tail{padding-top:60px;padding-bottom:72px;text-align:center;border-top:1px solid var(--line)} .tail h2{margin:0 0 18px;font-weight:300;font-size:clamp(22px,3vw,32px);letter-spacing:-.025em;text-wrap:balance} .tail p{margin:0 0 26px;color:var(--mute);font-size:14.5px;line-height:1.6} .tail .btn{ display:inline-block;text-decoration:none;color:var(--ink); border:1px solid var(--red);padding:15px 26px;font-size:13px; letter-spacing:.18em;text-transform:uppercase;transition:background .15s; } .tail .btn:hover{background:var(--red);color:#fff} /* Aktiv side i menuen */ .nav ul a.on{color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:3px} @media (max-width:900px){ .cases{grid-template-columns:1fr} .gear{grid-template-columns:1fr} .price{grid-template-columns:1fr} .pagehead{padding-top:40px;padding-bottom:40px} .sec{padding-top:44px;padding-bottom:44px} } /* Videre herfra — forsidens link til undersiderne. Ligger i .inner, så den flugter med resten af siden; kortene får derfor deres eget indhold rykket ind i stedet for at ligge klods mod kanten. */ .more{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--line);border:1px solid var(--line); padding-left:0;padding-right:0;margin-top:8px; } .more a{ background:var(--surface);padding:30px 26px 32px;text-decoration:none;display:block; transition:background .18s; } .more a:hover{background:var(--surface-2)} .more .k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .more h3{margin:0 0 10px;font-weight:300;font-size:23px;letter-spacing:-.028em} .more p{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--mute)} .more .go{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--glow)} @media (max-width:900px){.more{grid-template-columns:1fr}} /* Plantegning — originalen er sorte streger på hvidt papir, så den vendes om for at passe til den mørke side i stedet for at lyse den op. */ .plan{ width:100%;height:auto;border:1px solid var(--line); filter:var(--plan-filter); opacity:.82; } /* På mobil bliver tabellerne til blokke. Vandret scroll i en tabel med en lang beskrivelseskolonne er stort set ulæseligt på en telefon. */ @media (max-width:640px){ table.dt{min-width:0} table.dt thead{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap; } table.dt tr{display:block;padding:18px 0;border-bottom:1px solid var(--line)} table.dt tr:last-child{border-bottom:0} table.dt td{display:block;border:0;padding:0} table.dt td:first-child{font-size:16px;margin-bottom:6px} table.dt td.n{margin-bottom:10px} table.dt td.r{text-align:left;font-size:15px} } /* ============================================================ PRISBEREGNER ============================================================ */ .calc{border:1px solid var(--line);background:var(--surface)} .calc .ctrl{padding:28px var(--pad) 30px;border-bottom:1px solid var(--line)} .calc .lbl{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--mute);margin-bottom:16px} .calc .seats{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px} .calc .seats .big{font-size:clamp(34px,5vw,52px);font-weight:300;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums} .calc .seats .unit{font-size:14px;color:var(--mute)} .calc .seats .rows{margin-left:auto;font-size:12.5px;color:var(--mute);text-align:right;line-height:1.5} .calc .seats .rows b{color:var(--glow);font-weight:400;font-variant-numeric:tabular-nums} /* Slider — tegnet fra bunden, ellers arver den styresystemets blå */ .calc input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;background:transparent; margin:20px 0 8px;cursor:pointer; } .calc input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line)} .calc input[type=range]::-moz-range-track{height:2px;background:var(--line)} .calc input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%; background:var(--red);border:0;margin-top:-8px; } .calc input[type=range]::-moz-range-thumb{ width:18px;height:18px;border-radius:50%;background:var(--red);border:0; } .calc input[type=range]:focus-visible{outline:2px solid var(--red);outline-offset:6px} .calc .scale{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums} .calc .typerow{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center; justify-content:space-between;margin-top:26px} .calc .types{display:flex;gap:8px;flex-wrap:wrap} .calc .tilbud{ appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600; background:var(--red);color:#fff;border:1px solid var(--red); padding:11px 22px;transition:filter .15s; } .calc .tilbud:hover{filter:brightness(1.08)} .calc .types button{ appearance:none;cursor:pointer;font:inherit;font-size:13px; background:transparent;color:var(--mute);border:1px solid var(--line); padding:11px 18px;transition:border-color .15s,color .15s; } .calc .types button:hover{color:var(--ink)} .calc .types button[aria-pressed="true"]{color:var(--ink);border-color:var(--red)} .calc .out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)} .calc .out > div{background:var(--surface);padding:26px var(--pad) 28px} .calc .out .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px} .calc .out .v{font-size:clamp(28px,4vw,40px);font-weight:300;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums} .calc .out .per{margin-top:12px;font-size:13px;color:var(--glow);font-variant-numeric:tabular-nums} .calc .out .hint{margin-top:10px;font-size:12px;color:var(--mute);line-height:1.5} .calc .detail{padding:26px var(--pad) 30px;border-top:1px solid var(--line)} .calc .detail h3{ margin:0 0 16px;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--red);font-weight:400; } .bd-row{ display:flex;justify-content:space-between;gap:16px;align-items:baseline; padding:11px 0;border-bottom:1px solid var(--line);font-size:14px; } .bd-row:last-child{border-bottom:0} .bd-row span{color:var(--mute)} .bd-row b{font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap} .calc .cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)} .calc .cols2 > div{background:var(--surface);padding:26px var(--pad) 30px} #b-items{list-style:none;margin:0;padding:0;font-size:14px} #b-items li{ display:flex;gap:10px;align-items:baseline;flex-wrap:wrap; padding:10px 0;border-bottom:1px solid var(--line); } #b-items li:last-child{border-bottom:0} #b-items .c{color:var(--glow);font-variant-numeric:tabular-nums;min-width:44px} #b-items .nm{color:var(--ink)} #b-items .nt{color:var(--mute);font-size:12.5px} .reqs{display:flex;gap:32px;flex-wrap:wrap} .reqs .r .v{font-size:24px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .reqs .r .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:8px} /* Uden JavaScript vises fallback-tabellen i stedet for beregneren */ .calc .live{display:none} .calc.ready .live{display:block} .calc.ready .nojs{display:none} .calc .nojs{padding:26px var(--pad) 30px} @media (max-width:760px){ .calc .out{grid-template-columns:1fr} .calc .cols2{grid-template-columns:1fr} .calc .seats .rows{margin-left:0;width:100%;text-align:left} } /* Overskrift inde i beregnerens kolonner */ .calc .cols2 h3{ margin:0 0 16px;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--red);font-weight:400; } .reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 20px} .reqs .r[hidden]{display:none} .reqs-note{margin:26px 0 0;font-size:12.5px;line-height:1.65;color:var(--mute)} .reqs-note b{color:var(--ink);font-weight:400} /* Skillelinjer skal flugte med teksten, ikke med containerens padding-kant. Ellers står de og svæver ~56px uden for indholdet og ser tilfældige ud. */ .pagehead,.sec,.cta,.foot,.tail{border-top:0;border-bottom:0;position:relative} .pagehead::after,.sec::after,.cta::before,.foot::before,.tail::before{ content:"";position:absolute;left:var(--pad);right:var(--pad);height:1px; background:var(--line); } .pagehead::after,.sec::after{bottom:0} .cta::before,.foot::before,.tail::before{top:0} .sec:last-of-type::after{display:none} /* ============================================================ PRISSIDEN — variation i stedet for fem tabeller i træk ============================================================ */ /* Nøgletal under sidehovedet. Grid, ikke flex — med flex fik kolonnerne bredde efter indhold, og skillelinjerne stod og vippede uregelmæssigt hen over siden. */ .keyfigs{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:34px;border-top:1px solid var(--line); } .keyfigs > div{padding:22px 28px 0 0;border-right:1px solid var(--line)} .keyfigs > div:last-child{border-right:0} .keyfigs .v{font-size:clamp(24px,3vw,32px);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums} .keyfigs .v small{font-size:.42em;color:var(--mute);margin-left:6px;letter-spacing:0} .keyfigs .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:12px;word-spacing:.16em} /* Fuldbredde foto som pusterum mellem tunge sektioner */ .shot{position:relative;margin:0} .shot img{width:100%;height:auto;aspect-ratio:24/9;object-fit:cover;filter:brightness(.62) saturate(.92)} .shot figcaption{ position:absolute;left:0;right:0;bottom:0; padding:28px var(--pad); background:linear-gradient(180deg,rgba(6,6,10,0),rgba(6,6,10,.86)); } .shot .big{font-size:clamp(20px,2.6vw,30px);font-weight:300;letter-spacing:-.025em;line-height:1.2;text-wrap:balance;max-width:26ch;word-spacing:.08em} .shot .big b{font-weight:600} .shot .sm{margin-top:10px;font-size:13px;color:var(--mute);letter-spacing:.05em} /* Services som kort i stedet for tabelrækker */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .cards .c{background:var(--surface);padding:26px 24px 28px;display:flex;flex-direction:column} .cards .c h3{margin:0 0 10px;font-weight:300;font-size:20px;letter-spacing:-.028em;word-spacing:.08em} .cards .c p{margin:0 0 20px;font-size:13.5px;line-height:1.6;color:var(--mute)} .cards .c .tag{ margin-top:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--glow);word-spacing:.16em; } .cards .c .tag.q{color:var(--red)} /* Foreningsrabatten som ét stort tal, ikke en tabelrække */ .offer{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1px;background:var(--line);border:1px solid var(--line)} .offer .n{background:var(--surface);padding:38px 30px 40px;display:flex;flex-direction:column;justify-content:center} .offer .n .pct{font-size:clamp(64px,11vw,132px);font-weight:300;letter-spacing:-.06em;line-height:.86;color:var(--red)} .offer .n .t{margin-top:18px;font-size:16.5px;line-height:1.5;color:var(--ink);text-wrap:balance} .offer .n .s{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--mute)} .offer .terms{background:var(--surface);padding:30px} .offer .terms h3{ margin:0 0 6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--red);font-weight:400;word-spacing:.16em; } .offer .terms dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0} .offer .terms dt{ padding:14px 20px 14px 0;border-top:1px solid var(--line); font-size:14px;color:var(--ink);white-space:nowrap; } .offer .terms dd{ margin:0;padding:14px 0;border-top:1px solid var(--line); font-size:13.5px;line-height:1.55;color:var(--mute); } /* Vilkår — kompakt liste, ikke tabel */ .terms2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .terms2 div{background:var(--surface);padding:22px 24px 24px} .terms2 h3{ margin:0 0 8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);font-weight:400;word-spacing:.16em; } .terms2 p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)} .terms2 p b{font-weight:400;color:var(--glow)} @media (max-width:900px){ .cards{grid-template-columns:1fr} .offer{grid-template-columns:1fr} .terms2{grid-template-columns:1fr} .keyfigs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0} .keyfigs > div:nth-child(2){border-right:0} .keyfigs > div:nth-child(3),.keyfigs > div:nth-child(4){border-top:1px solid var(--line);margin-top:22px} .shot img{aspect-ratio:16/10} } /* ============================================================ FOTOZONER Hero og det brede prisfoto er mørke billeder med lys tekst hen over. De skal se ens ud i begge temaer — en hvid gradient over et natfoto ville hverken kunne læses eller ligne noget. Derfor får de deres eget tokensæt i stedet for at følge sidens. ============================================================ */ /* .hero-nav hører med: forsidens menu ligger oven på hero-fotoet, men er søskende til .hero — uden den blev logo, menu og telefonnummer mørk tekst på et mørkt billede i lyst tema. */ .hero,.shot,.hero-nav{ --ink:#f2f3f5; --mute:#b3b6bd; --glow:#7fd6ec; --line:#2a2c35; color:var(--ink); } .hero-nav{--logo:url("../img/logo-dark.webp")} .hero-nav .tel{color:#f2f3f5} /* Temaknap. Skjult indtil JS tænder den — uden JS kan den ikke gøre noget, og så skal den heller ikke stå og se klikbar ud. */ .themebtn{ appearance:none;cursor:pointer;font:inherit; background:transparent;color:var(--mute); border:1px solid var(--line);border-radius:50%; width:34px;height:34px;padding:0;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; transition:color .15s,border-color .15s; } .themebtn[hidden]{display:none} .themebtn:hover{color:var(--ink);border-color:var(--red)} .themebtn svg{width:17px;height:17px;fill:currentColor;display:block} /* I heroen ligger knappen over fotoet og skal kunne ses på det mørke billede */ .hero-nav .themebtn{color:#b3b6bd;border-color:rgba(255,255,255,.22)} .hero-nav .themebtn:hover{color:#fff;border-color:var(--red)} /* Grejgrupperne er tre — 2×2 efterlod en tom celle da den fjerde udgik */ .gear{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){.gear{grid-template-columns:1fr}} /* To rabattyper side om side */ .offer2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .offer2 .o{background:var(--surface);padding:30px 28px 32px} .offer2 .pct{font-size:clamp(44px,6vw,66px);font-weight:300;letter-spacing:-.05em;line-height:.9;color:var(--red)} .offer2 h3{margin:16px 0 6px;font-weight:300;font-size:23px;letter-spacing:-.03em;word-spacing:.08em} .offer2 .d{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--mute)} .offer2 dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0} .offer2 dt{padding:13px 18px 13px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);white-space:nowrap} .offer2 dd{margin:0;padding:13px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--mute)} @media (max-width:900px){ .offer2{grid-template-columns:1fr} .offer2 dl{grid-template-columns:1fr} .offer2 dt{padding-bottom:2px;border-top:1px solid var(--line)} .offer2 dd{padding-top:0;border-top:0} } /* Delbart link til den valgte pakkeløsning */ .share{padding:24px var(--pad) 28px;border-top:1px solid var(--line)} .share label{ display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);margin-bottom:14px;word-spacing:.16em; } .share .row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch} .share input{ flex:1 1 320px;min-width:0;font:inherit;font-size:13.5px; background:var(--bg);color:var(--ink); border:1px solid var(--line);padding:11px 13px; } .share input:focus-visible{outline:2px solid var(--red);outline-offset:2px} .share button{ appearance:none;cursor:pointer;font:inherit;font-size:13px; background:transparent;color:var(--ink);border:1px solid var(--red); padding:11px 20px;white-space:nowrap;transition:background .15s,color .15s; } .share button:hover{background:var(--red);color:#fff} .share .hint{margin:12px 0 0;font-size:12.5px;color:var(--mute);line-height:1.5} /* Bordtegning — 5200px bred, så den scroller vandret i stedet for at blive skaleret ned til en streg. Captionen ligger uden for scroll-området. */ .tablefig{margin:32px 0 0;border:1px solid var(--line);background:var(--surface)} .tablefig .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch} /* IKKE --plan-filter her: bordtegningen har meningsfulde farver (røde pladser), og invert gjorde dem turkise i mørkt tema. Den dæmpes bare som et foto. */ .tablefig img{height:230px;width:auto;max-width:none;display:block;filter:var(--img-dim)} .tablefig figcaption{ padding:14px 18px;border-top:1px solid var(--line); font-size:13px;line-height:1.55;color:var(--mute); } .tablefig figcaption b{color:var(--ink);font-weight:400} @media (max-width:700px){.tablefig img{height:180px}} /* Bemærk-bokse fra den gamle pakkeside — to advarsler side om side */ .notes2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px} .notes2 .nb{background:var(--surface);padding:24px 26px 26px;border-left:2px solid var(--red)} .notes2 h3{ margin:0 0 12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--red);font-weight:400;word-spacing:.16em; } .notes2 p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--mute)} .notes2 p:last-child{margin-bottom:0} .notes2 b{color:var(--ink);font-weight:400} .notes2 a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} @media (max-width:900px){.notes2{grid-template-columns:1fr}} /* ============================================================ TEKSTSIDER — FAQ, rabat, betingelser, persondatapolitik ============================================================ */ /* Spørgsmål og svar */ .qa{margin:0;border-top:1px solid var(--line)} .qa dt{ padding:22px 0 8px;font-size:17.5px;letter-spacing:-.015em; color:var(--ink);font-weight:400; } .qa dd{ margin:0;padding:0 0 22px;border-bottom:1px solid var(--line); font-size:15px;line-height:1.7;color:var(--mute);max-width:74ch; } .qa dd b{color:var(--ink);font-weight:400} .qa dd a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} .qa dd em{font-style:italic} /* Underoverskrift inde i en sektion */ .subhead{ margin:34px 0 16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--red);font-weight:400;word-spacing:.16em; } /* Juridiske dokumenter — smallere spalte, mere luft mellem punkter. Spaltebredden staar ét sted, og alt i dokumentet retter sig efter den: ellers loeb stregerne mellem punkterne videre end teksten og efterlod dokumentet skaevt i hoejre side. --ind er punktnummerets indrykning, som laegges til de blokke, der baerer den. */ .legal-doc{--spalte:700px;position:relative} .legal-doc > *{max-width:var(--spalte)} /* Skillestregen mellem afsnittene hoerer til dokumentet og skal stoppe, hvor teksten stopper. Sidens egen .sec-streg gaar helt ud til kanten. */ .legal-doc{border-bottom:0} .legal-doc::after{ content:"";position:absolute;left:var(--pad);bottom:0; width:min(var(--spalte), calc(100% - var(--pad) * 2)); border-bottom:1px solid var(--line); } .legal-doc:last-of-type::after{content:none} .legal-doc p{font-size:15px;line-height:1.72;color:var(--mute);margin:0 0 14px} .legal-doc p b{color:var(--ink);font-weight:400} .legal-doc p a,.legal-doc li a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} /* Prosasider (guiden): samme tekst- og linkfarver som resten af sitets brødtekst — dæmpet grå med fremhævninger i fuld styrke */ .prosa p,.prosa li{font-size:15px;line-height:1.7;color:var(--mute)} .prosa p b,.prosa li b{color:var(--ink);font-weight:400} .prosa p a,.prosa li a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} .legal-doc > h2{margin-bottom:18px} .legal-doc .addr{line-height:1.9} .legal-doc .rev{font-size:13px;margin-top:22px} .terms{margin:0;padding:0;counter-reset:t;list-style:none} .terms > li{ counter-increment:t;position:relative; padding:26px 0 26px 58px;border-top:1px solid var(--line); } .terms > li:first-child{border-top:0;padding-top:8px} .terms > li::before{ content:counter(t) ".";position:absolute;left:0;top:26px; font-size:14px;color:var(--red);font-variant-numeric:tabular-nums; } .terms > li:first-child::before{top:8px} .terms > li > p:last-child{margin-bottom:0} .terms ul{margin:12px 0 0;padding-left:20px;font-size:15px;line-height:1.72;color:var(--mute)} .terms ul li{margin-bottom:8px} .terms .tw{margin:12px 0 4px} table.dt.sm{min-width:0;font-size:14px} table.dt.sm th,table.dt.sm td{padding-top:9px;padding-bottom:9px} .rights{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.9;color:var(--mute)} @media (max-width:700px){ .terms > li{padding-left:38px} .terms > li::before{font-size:13px} } /* Links i bundlinjen ved siden af CVR */ .foot .legal a{color:var(--mute);text-decoration:none;border-bottom:1px solid transparent} .foot .legal a:hover{color:var(--ink);border-bottom-color:var(--red)} /* Link i en sektions underrubrik */ .sec > .sub a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft);white-space:nowrap} .note p a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} /* ============================================================ SAMTYKKE Bar i bunden, ikke en modal — den skal kunne ignoreres uden at spærre for indholdet, og siden skal stadig kunne læses bagved. ============================================================ */ .consent{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--surface);border-top:1px solid var(--line); box-shadow:0 -8px 28px rgba(0,0,0,.28); } .consent[hidden]{display:none} .cbody{ display:flex;gap:24px;align-items:center;flex-wrap:wrap; padding-top:18px;padding-bottom:18px; } .ctext{flex:1 1 420px;font-size:14px;line-height:1.6;color:var(--mute);max-width:78ch} .ctext b{color:var(--ink);font-weight:400} .ctext a{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--glow-soft)} .cbtns{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto} .consent button{ appearance:none;cursor:pointer;font:inherit;font-size:13.5px; padding:11px 20px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s; } .consent .cno{background:transparent;color:var(--ink);border:1px solid var(--line)} .consent .cno:hover{border-color:var(--mute)} .consent .cyes{background:var(--red);color:#fff;border:1px solid var(--red)} .consent .cyes:hover{filter:brightness(1.08)} /* Så baren ikke dækker det sidste af siden */ body.has-consent-bar{padding-bottom:118px} @media (max-width:700px){ .cbtns{margin-left:0;width:100%} .consent button{flex:1 1 auto} body.has-consent-bar{padding-bottom:190px} } /* Dokumenthoved på juridiske sider — version, dato, ophavsret */ .docmeta{margin-top:36px;border:1px solid var(--line);background:var(--surface);padding:24px 26px 26px} .docmeta dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0} .docmeta dt{padding:10px 20px 10px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute);white-space:nowrap} .docmeta dd{margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink)} .docmeta dl > dt:first-of-type,.docmeta dl > dd:first-of-type{border-top:0;padding-top:0} .docmeta code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--glow)} .docmeta .cr{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--mute)} @media (max-width:600px){ .docmeta dl{grid-template-columns:1fr} .docmeta dt{padding-bottom:2px} .docmeta dd{padding-top:0;border-top:0} } /* Print: PDF'en af lejebetingelserne genereres fra selve siden, så de to aldrig kan komme ud af trit. Skærm-krom ryger ud, farverne bliver til sort på hvidt, og punkterne må ikke brækkes midt over. */ @media print{ :root{ --bg:#fff;--surface:#fff;--surface-2:#fff;--ink:#000;--mute:#333; --line:#bbb;--red:#a3312a;--glow:#0f5f78;--glow-soft:#999; --img-dim:none;--plan-filter:none; } .nav,.tail,.foot,.consent,.themebtn,.skip{display:none!important} body{background:#fff;color:#000;padding-bottom:0!important} .pagehead{padding-top:0;padding-bottom:18px} .pagehead h1{font-size:24pt;font-weight:600} .pagehead .kicker{color:var(--red)} .sec{padding-top:14px;padding-bottom:14px} .sec::after,.pagehead::after{display:none} .legal-doc p,.terms ul{font-size:10pt;line-height:1.5;color:#000} .terms > li{break-inside:avoid;page-break-inside:avoid;padding:14px 0 14px 40px;border-top:1px solid var(--line)} .terms > li::before{top:14px;color:var(--red)} table.dt{font-size:9.5pt} table.dt td,table.dt th{color:#000} .note,.docmeta{break-inside:avoid;page-break-inside:avoid;border:1px solid var(--line)} a{color:#000;text-decoration:none;border:0!important} .inner{max-width:none;padding-left:0;padding-right:0} /* Diskret vandmærke på hver side, så et kopieret dokument bærer afsenderen */ @page{margin:18mm 16mm 20mm} } /* ---- Tilbudsanmodning på /priser/ ------------------------------------- */ /* Formularen låner beregnerens sprog: tynde linjer, skarpe hjørner og de samme små versal-etiketter. Den skal ikke ligne et fremmed element. */ .anmod{margin-top:34px;border:1px solid var(--line);background:var(--surface);padding:clamp(22px,4vw,38px)} .anmod .felter{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 26px} .anmod .f{margin:0} .anmod .f.fuld{margin-top:20px} .anmod label{ display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);margin-bottom:9px;word-spacing:.16em; } .anmod label span{letter-spacing:.1em;opacity:.7} .anmod input,.anmod select,.anmod textarea{ width:100%;font:inherit;font-size:14.5px; background:var(--bg);color:var(--ink); border:1px solid var(--line);padding:11px 13px;border-radius:0; } .anmod textarea{resize:vertical;line-height:1.6} .anmod select{appearance:none;cursor:pointer;padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .anmod input:focus-visible,.anmod select:focus-visible,.anmod textarea:focus-visible{ outline:2px solid var(--red);outline-offset:2px; } .anmod .f.bred{grid-column:1/-1} .anmod .tjekliste{ border:0;padding:0;margin:30px 0 0; display:grid;grid-template-columns:repeat(2,1fr);gap:13px 26px; } .anmod .tjekliste legend{ font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);word-spacing:.16em;padding:0;margin-bottom:16px; } .anmod .tjekliste label{ display:flex;gap:11px;align-items:flex-start;cursor:pointer; font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--ink); margin:0;word-spacing:normal; } .anmod .tjekliste input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--red)} /* Fælden: skjult for øjet, men ikke for en robot der læser markuppen */ .anmod .honning{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .anmod .send{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:28px} .anmod .send button{ appearance:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600; background:var(--red);color:#fff;border:1px solid var(--red); padding:14px 30px;transition:filter .15s; } .anmod .send button:hover{filter:brightness(1.08)} .anmod .send .smaat{font-size:12.5px;color:var(--mute);line-height:1.6;max-width:44ch} .anmod .send .smaat a{color:var(--red)} @media (max-width:720px){ .anmod .felter{grid-template-columns:1fr} .anmod .tjekliste{grid-template-columns:1fr} }