/* hejbuddy.dk (13-11-2026). Samme sprog som appen: isblå bund, hvide flader uden kanter, kobolt, marine tekst,
   solgul kun når der fejres. Buddy og talebobler bærer siden; resten holder sig i ro.
   Skrifterne ligger her på serveren, så forsiden ikke sender de besøgendes IP-adresse til Google. */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/BricolageGrotesque-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("/fonts/InstrumentSans-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --is: #eef4ff;
    --hvid: #ffffff;
    --kobolt: #1f5bff;
    --kobolt-moerk: #1748d4;
    --marine: #0b1f4d;
    --graa: #4a5a85;
    --dis: #dfe9ff;
    --isblaa: #a9c6ff;
    --sol: #ffc94a;
    --skrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --skrift: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --bredde: 1180px;
    --kant: clamp(16px, 4vw, 40px);
    --luft: clamp(4.5rem, 9vw, 8.5rem);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--is);
    color: var(--marine);
    font: 400 1.0625rem/1.55 var(--skrift);
    overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--skrift-titel); margin: 0; color: var(--marine); }
p { margin: 0; }
a { color: var(--kobolt); }
button { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--kobolt); outline-offset: 3px; border-radius: 10px; }
.skjult, .faelde {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.spring { position: absolute; left: 12px; top: -60px; background: var(--marine); color: #fff; padding: 10px 14px; border-radius: 12px; z-index: 20; }
.spring:focus { top: 12px; }

/* ------------------------------------------------------------------ top */
.top {
    max-width: var(--bredde); margin: 0 auto; padding: 18px var(--kant);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ordmaerke {
    font: 800 1.5rem/1 var(--skrift-titel); letter-spacing: -0.03em;
    color: var(--marine); text-decoration: none;
}
.ordmaerke-hej { color: var(--kobolt); }
.ordmaerke-lille { font-size: 1.25rem; }
.top-nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); }
.top-link { color: var(--marine); text-decoration: none; font-weight: 500; }
.top-link:hover { color: var(--kobolt); }
@media (max-width: 560px) { .top-link[href="#faner"] { display: none; } }

.knap {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
    background: var(--kobolt); color: #fff; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.knap:hover { background: var(--kobolt-moerk); }
.knap:active { transform: scale(.97); }
.knap-lille { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.knap[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------- Buddy */
.buddy svg { width: 100%; height: auto; overflow: visible; }
.buddy .pupil { transition: transform .12s ease-out; }
.buddy-lille { width: 64px; flex: none; }
.buddy-mini { width: 40px; flex: none; }
.gulv {
    width: 62%; height: 22px; margin: -6px auto 0; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(11, 31, 77, .16), rgba(11, 31, 77, 0));
}

/* ----------------------------------------------------------- bobler */
.boble {
    position: relative; background: var(--hvid); border-radius: 26px;
    padding: 18px 22px; max-width: 34rem; width: fit-content;
    font-family: var(--skrift-titel); font-weight: 600; font-size: 1.25rem; line-height: 1.32;
}
.boble-buddy { border-bottom-left-radius: 8px; }
.boble-mig {
    margin-left: auto; background: var(--kobolt); color: #fff;
    border-bottom-left-radius: 26px; border-bottom-right-radius: 8px;
    font-family: var(--skrift); font-weight: 600; font-size: 1.0625rem;
}
.boble-start { padding: 22px 28px 26px; }
.boble-start h1 {
    font-weight: 800; font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);
    line-height: .96; letter-spacing: -0.035em;
}
.boble-kort { font-size: 1.0625rem; padding: 14px 18px; }
.skriver { display: inline-flex; gap: 6px; padding: 20px 22px; }
.skriver i { width: 9px; height: 9px; border-radius: 50%; background: var(--isblaa); animation: prik 1s infinite ease-in-out; }
.skriver i:nth-child(2) { animation-delay: .15s; }
.skriver i:nth-child(3) { animation-delay: .3s; }
@keyframes prik { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------------------------------------------------------- samtale */
.samtale {
    max-width: var(--bredde); margin: 0 auto; padding: clamp(1rem, 4vw, 3.5rem) var(--kant) var(--luft);
    display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.samtale-figur { width: clamp(150px, 42vw, 220px); }
.samtale-traad { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.traad { display: flex; flex-direction: column; gap: 12px; }
.traad:empty { display: none; }
.svar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.svar-chip {
    border: 0; background: var(--dis); color: var(--marine); border-radius: 999px;
    min-height: 46px; padding: 0 18px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.svar-chip:hover { background: var(--kobolt); color: #fff; }
.svar-chip:active { transform: scale(.97); }
.ny { animation: ind .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ind { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
    /* Toppen af samtalen står fast, og Buddy følger med ned, når den vokser: centreret lodret hoppede han
       ned for hver ny boble. */
    .samtale { grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; padding-top: clamp(2rem, 6vh, 4.5rem); min-height: min(78vh, 760px); }
    .samtale-figur { width: 100%; position: sticky; top: 24px; }
}

/* ----------------------------------------------------- sektionshoved */
.sektion-hoved { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sektion-hoved h2 {
    font-weight: 800; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem);
    line-height: 1; letter-spacing: -0.03em; margin-bottom: 14px;
}
.sektion-hoved p { color: var(--graa); font-size: 1.125rem; }

/* -------------------------------------------------------- hvem (ny / øvet) */
.hvem { max-width: var(--bredde); margin: 0 auto; padding: 0 var(--kant) var(--luft); }
.hvem-gitter { display: grid; gap: 16px; }
@media (min-width: 760px) { .hvem-gitter { grid-template-columns: 1fr 1fr; gap: 20px; } }
.hvem-flade { background: var(--hvid); border-radius: 32px; padding: clamp(22px, 3vw, 34px); }
.hvem-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hvem-top h3 { font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.1; }

/* -------------------------------------------------------------- plan */
.plan, .faner { max-width: var(--bredde); margin: 0 auto; padding: 0 var(--kant) var(--luft); }
.plan-gitter { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 900px) { .plan-gitter { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.plan-valg { display: flex; flex-direction: column; gap: 28px; }
.trin { border: 0; margin: 0; padding: 0; min-width: 0; }
.trin legend {
    display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 14px;
    font: 700 1.25rem/1.2 var(--skrift-titel);
}
.trin-nr {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--marine); color: #fff; font-size: .9375rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    border: 0; background: var(--hvid); color: var(--marine); border-radius: 999px;
    min-height: 48px; min-width: 56px; padding: 0 20px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.chip:hover { background: var(--dis); }
.chip[aria-pressed="true"] { background: var(--kobolt); color: #fff; }

.plan-resultat { background: var(--hvid); border-radius: 32px; padding: clamp(20px, 3vw, 32px); }
.plan-buddy { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 22px; }
.plan-buddy .boble { background: var(--is); max-width: none; }
.uge {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
}
.uge li {
    border-radius: 20px; background: var(--is); padding: 12px 4px 14px; min-height: 132px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    transition: background .2s ease, color .2s ease;
}
.uge .ugedag { font-size: .8125rem; font-weight: 600; color: var(--graa); margin-bottom: 4px; }
.uge .pas { font: 700 .9375rem/1.1 var(--skrift-titel); hyphens: manual; }
.uge .pas-info { font-size: .75rem; line-height: 1.2; opacity: .85; }
.uge li.traen { background: var(--kobolt); color: #fff; }
.uge li.traen .ugedag { color: var(--isblaa); }
.uge li.let { background: var(--dis); }
/* Hviledagene er stille: ingen flade, bare dagen og en lille prik, så træningsdagene bærer ugen. */
.uge li.hvil { background: transparent; justify-content: flex-start; }
.uge .pas-hvil { margin-top: auto; margin-bottom: auto; font-size: .8125rem; color: #8a98bd; font-weight: 500; }
.uge .pas-hvil::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--dis); margin: 0 auto 8px; }
/* Mærket: bogstavet i "Helkrop A" eller et ikon for pas uden bogstav. */
.pas-maerke {
    width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--hvid); color: var(--kobolt);
}
.pas-maerke b { font: 800 1rem/1 var(--skrift-titel); }
.pas-maerke svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.let .pas-maerke { background: var(--hvid); color: var(--marine); }
.uge li.traen .pas-maerke { background: rgba(255, 255, 255, .96); }

.uge-mobil { display: none; }
@media (max-width: 560px) {
    /* Listen bliver for skærmlæsere; øjnene får striben og kortene. */
    .uge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .uge-mobil { display: flex; flex-direction: column; gap: 8px; }
    .uge-stribe {
        display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px;
        background: var(--is); border-radius: 18px; padding: 10px 8px;
    }
    .uge-stribe span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--graa); }
    .uge-stribe i { width: 12px; height: 12px; border-radius: 50%; background: var(--dis); }
    .uge-stribe .traen i { background: var(--kobolt); }
    .uge-stribe .let i { background: var(--isblaa); }
    .uge-stribe .traen { color: var(--marine); }
    .uge-kort {
        display: flex; align-items: center; gap: 14px; border-radius: 20px; padding: 12px 16px 12px 12px;
        background: var(--kobolt); color: #fff;
    }
    .uge-kort.let { background: var(--dis); color: var(--marine); }
    .uge-kort-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .uge-kort-tekst small { font-size: .8125rem; font-weight: 600; opacity: .8; }
    .uge-kort-tekst b { font: 700 1.0625rem/1.2 var(--skrift-titel); }
    .uge-kort .pas-info { font-size: .8125rem; opacity: .9; white-space: nowrap; }
}
.mad-linje { margin-top: 18px; display: grid; gap: 8px; }
.mad-linje p { display: flex; gap: 10px; align-items: baseline; }
.mad-linje b { font-family: var(--skrift-titel); min-width: 3.6em; }
.fodnote { margin-top: 18px; font-size: .875rem; color: var(--graa); }

/* ------------------------------------------------------- telefonen */
.faner-gitter { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .faner-gitter { grid-template-columns: auto minmax(0, 1fr); } }
.telefon {
    width: min(320px, 86vw); margin: 0 auto; padding: 12px; border-radius: 52px;
    background: var(--marine); box-shadow: 0 40px 80px -40px rgba(11, 31, 77, .55);
}
.telefon-skaerm {
    position: relative; height: 620px; border-radius: 41px; overflow: hidden;
    background: var(--is); display: flex; flex-direction: column;
}
.telefon-oe { width: 96px; height: 28px; border-radius: 20px; background: var(--marine); margin: 10px auto 4px; flex: none; }
.skaerm { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 12px; font-size: .875rem; line-height: 1.35; }
.skaerm::-webkit-scrollbar { display: none; }
/* Hjælpelinjen nederst på hver skærm: siger hvad man kan trykke på, for folk der ikke gætter det selv. */
.sk-hint { margin-top: auto; text-align: center; font-size: .75rem; font-weight: 600; color: var(--kobolt); opacity: .85; padding-top: 4px; }
.sk-hint + .sk-knap { margin-top: 8px; }

/* Telefonen kan trykkes på (13-11-2026): Buddy siger det, fanelinjen pulserer til man har prøvet, og en prik
   trykker selv én gang, når telefonen kommer frem. */
.telefon-kolonne { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.proev {
    position: relative; display: inline-flex; align-items: center; gap: 10px; background: var(--hvid);
    border-radius: 999px; padding: 8px 18px 8px 8px; font-family: var(--skrift-titel); font-weight: 700; font-size: 1.0625rem;
}
.proev::after {
    content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px; background: var(--hvid);
    transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
.proev .buddy-mini { width: 36px; }
.telefon { position: relative; }
.tryk-prik {
    position: absolute; z-index: 5; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
    background: rgba(11, 31, 77, .22); box-shadow: 0 0 0 6px rgba(11, 31, 77, .08);
    transform: translate(-50%, -50%) scale(.5); opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.tryk-prik.vis { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tryk-prik.tryk { transform: translate(-50%, -50%) scale(.72); background: rgba(31, 91, 255, .4); }
.telefon:not(.proevet) .telefon-faner { animation: fanepuls 2.4s ease-in-out infinite; }
@keyframes fanepuls { 0%, 100% { background: var(--hvid); } 50% { background: #e3ecff; } }

.fane-valg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.fane-valg button {
    border: 0; background: var(--hvid); color: var(--marine); border-radius: 999px; min-height: 44px; padding: 0 18px;
    font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.fane-valg button:hover { background: var(--dis); }
.fane-valg button[aria-pressed="true"] { background: var(--kobolt); color: #fff; }
@media (max-width: 899px) { .faner-tekst { width: 100%; } }
.skaerm[hidden] { display: none; }
.sk-titel { font: 800 1.5rem/1 var(--skrift-titel); letter-spacing: -0.02em; margin: 4px 2px 2px; }
.sk-hilsen { display: flex; align-items: flex-end; gap: 8px; }
.sk-boble { background: var(--hvid); border-radius: 18px 18px 18px 6px; padding: 10px 12px; font-weight: 600; }
.sk-liste, .sk-uge, .sk-oevelser, .sk-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-punkt, .sk-oevelse {
    width: 100%; border: 0; background: var(--hvid); border-radius: 18px; padding: 12px;
    display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; flex-wrap: wrap;
}
.sk-punkt b, .sk-oevelse b, .sk-feed b { display: block; font-weight: 700; }
.sk-punkt span:not([class]), .sk-oevelse > span:first-child { color: var(--graa); flex: 1; min-width: 0; }
.sk-punkt b, .sk-oevelse b { color: var(--marine); }
.sk-flueben {
    width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--dis);
    display: grid; place-items: center; transition: background .15s ease;
}
.sk-punkt[aria-pressed="true"] .sk-flueben { background: var(--kobolt); }
.sk-punkt[aria-pressed="true"] .sk-flueben::after {
    content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg);
}
.sk-maaler { flex-basis: 100%; height: 6px; border-radius: 3px; background: var(--dis); overflow: hidden; }
.sk-maaler i { display: block; height: 100%; background: var(--kobolt); border-radius: 3px; transition: width .4s ease; }
.sk-ret {
    width: 100%; border: 0; background: var(--hvid); border-radius: 16px; padding: 11px 12px; cursor: pointer;
    display: grid; grid-template-columns: 2.4em 1fr auto; gap: 8px; text-align: left; color: var(--marine);
}
.sk-dag { font-weight: 700; color: var(--kobolt); }
.sk-tal { color: var(--graa); white-space: nowrap; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chip { border: 0; background: var(--dis); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: .8125rem; cursor: default; }
button.sk-chip { cursor: pointer; }
button.sk-chip[aria-pressed="true"] { background: var(--kobolt); color: #fff; }
.sk-forslag { background: var(--dis); color: var(--kobolt); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: .75rem; white-space: nowrap; }
.sk-tip { background: var(--dis); border-radius: 0 0 16px 16px; margin: -14px 0 0; padding: 18px 12px 10px; font-size: .8125rem; }
.sk-knap { margin-top: auto; background: var(--kobolt); color: #fff; border-radius: 999px; text-align: center; padding: 13px; font-weight: 700; }
.sk-feed li { display: flex; align-items: center; gap: 10px; background: var(--hvid); border-radius: 16px; padding: 10px; }
.sk-feed li > span:nth-child(2) { flex: 1; min-width: 0; color: var(--graa); }
.sk-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--f); color: var(--t, var(--marine)); font-weight: 800; }
.sk-staerk { border: 0; background: var(--dis); border-radius: 999px; padding: 6px 10px; font-weight: 700; font-size: .75rem; cursor: pointer; white-space: nowrap; }
.sk-staerk i { font-style: normal; }
.sk-staerk[aria-pressed="true"] { background: var(--sol); }
.sk-udfordring { background: var(--hvid); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.sk-udfordring span { color: var(--graa); }
.sk-kurve { background: var(--hvid); border-radius: 18px; padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sk-kurve svg { width: 100%; height: auto; }
.sk-kurve b { font-family: var(--skrift-titel); font-size: 1.125rem; }
.sk-garderobe { background: var(--hvid); border-radius: 18px; padding: 12px; display: flex; gap: 12px; align-items: center; }
.sk-garderobe .buddy-mini { width: 76px; }
.sk-garderobe b { display: block; margin-bottom: 8px; }

.telefon-faner {
    flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--hvid);
    padding: 8px 6px 18px;
}
.telefon-faner button {
    border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 0; font-size: .6875rem; font-weight: 600; color: var(--graa); cursor: pointer; border-radius: 12px;
}
.telefon-faner svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.telefon-faner button[aria-selected="true"] { color: var(--kobolt); }
.telefon-faner button[aria-selected="true"] svg { stroke-width: 2.4; }

.faner-tekst { min-width: 0; }
.fane-tekst h3 { font-weight: 800; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.025em; margin-bottom: 10px; }
.fane-tekst > p { font-size: 1.125rem; color: var(--graa); max-width: 34rem; margin-bottom: 22px; }
.punkter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 36rem; }
.punkter li { position: relative; padding-left: 30px; }
.punkter li::before {
    content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
    background: var(--kobolt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* --------------------------------------------------------- venteliste */
.venteliste {
    max-width: var(--bredde); margin: 0 auto var(--luft); padding: clamp(28px, 5vw, 64px) var(--kant);
    display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    background: var(--hvid); border-radius: clamp(28px, 4vw, 48px);
    width: calc(100% - 2 * var(--kant));
}
/* Isblå skive bag Buddy: på den hvide flade forsvandt den hvide knude på hans pandebånd. */
.vente-figur { width: clamp(130px, 36vw, 200px); position: relative; }
.vente-figur::before { content: ""; position: absolute; inset: 2% -4% 8%; border-radius: 50%; background: var(--is); }
.vente-figur > * { position: relative; }
@media (min-width: 900px) {
    .venteliste { grid-template-columns: minmax(200px, 300px) 1fr; }
    .vente-figur { width: 100%; }
}
.kommer {
    display: inline-flex; align-items: center; gap: 8px; background: var(--marine); color: #fff;
    border-radius: 999px; padding: 8px 16px 8px 12px; font-weight: 600; font-size: .9375rem; margin-bottom: 18px;
}
.kommer svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.vente-indhold h2 {
    font-weight: 800; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 14px;
}
.vente-indhold > p:not(.kommer):not(.lille):not(.vente-svar) { font-size: 1.125rem; color: var(--graa); max-width: 32rem; }
.vente-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; max-width: 32rem; }
.vente-form input[type="email"] {
    flex: 1 1 220px; min-height: 52px; border: 0; border-radius: 999px; padding: 0 22px;
    background: var(--is); color: var(--marine); font: inherit; font-size: 1.0625rem;
}
.vente-form input[type="email"]::placeholder { color: #7f8db3; }
.vente-form input[type="email"]:focus-visible { outline: 3px solid var(--kobolt); outline-offset: 0; }
.vente-form .knap { flex: 0 0 auto; }
@media (max-width: 420px) { .vente-form .knap { flex: 1 1 100%; } }
.vente-svar { min-height: 1.55em; font-weight: 600; }
.vente-svar.fejl { color: #b42318; }
.vente-svar.ok { color: var(--marine); }
.lille { font-size: .875rem; color: var(--graa); max-width: 32rem; }
.lille + .lille { margin-top: 8px; }
.invitation { margin-top: 18px !important; }

/* konfetti, kun når man har skrevet sig op */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.konfetti i {
    position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 3px;
    animation: fald var(--t, 1.6s) cubic-bezier(.3, .6, .4, 1) forwards;
}
@keyframes fald { to { transform: translate(var(--x, 0), 105vh) rotate(var(--r, 540deg)); opacity: .9; } }

/* -------------------------------------------------------------- bund */
.bund {
    max-width: var(--bredde); margin: 0 auto; padding: 0 var(--kant) 48px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.bund nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.bund nav a { color: var(--graa); text-decoration: none; font-weight: 500; }
.bund nav a:hover { color: var(--kobolt); }

/* ------------------------------------------------------ undersider */
.papir { max-width: 46rem; margin: 0 auto; padding: 8px var(--kant) var(--luft); }
.papir h1 { font-weight: 800; font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem); letter-spacing: -0.03em; line-height: 1; margin: 18px 0 24px; }
.papir h2 { font-weight: 700; font-size: 1.5rem; margin: 36px 0 10px; }
.papir p + p { margin-top: 12px; }
.papir-flade { background: var(--hvid); border-radius: 28px; padding: clamp(20px, 4vw, 36px); }
.papir-hilsen { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 28px; }
.papir-hilsen .buddy { width: 84px; flex: none; }
.spoergsmaal { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.spoergsmaal details { background: var(--is); border-radius: 18px; padding: 0 18px; }
.spoergsmaal summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.spoergsmaal summary::-webkit-details-marker { display: none; }
.spoergsmaal summary::after { content: "+"; font: 700 1.375rem/1 var(--skrift-titel); color: var(--kobolt); }
.spoergsmaal details[open] summary::after { content: "–"; }
.spoergsmaal details p { padding-bottom: 16px; color: var(--graa); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}