/* =========================================================================
   Vognfest — global styles
   "Studenterplakat": fladt, højkontrast plakat-system til studerende.
   Display: Archivo (variable wdth) · Body: Familjen Grotesk · Mono: DM Mono
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
    /* Papir — hvid og en anelse grøntonet lys, aldrig kold grå */
    --cream-50:   #FFFFFF;
    --cream-100:  #F4F8F5;
    --cream-200:  #E7EFE9;
    --cream-300:  #CBD8CF;
    --cream-400:  #93A39A;

    /* Blæk — dyb grøn-sort, blødere at se på end ren sort */
    --ink-900:    #0F1F18;
    --ink-700:    #2B3B33;
    --ink-500:    #5E6E66;
    --ink-300:    #90A098;
    --ink-100:    #D8E2DB;

    /* Miljøgrøn — bærende farve.
       Den dybe bruges hvor der står tekst på eller i den: hvid tekst på
       --accent giver 5,2:1 og klarer dermed AA. Den friske er KUN til
       store dekorative flader, hvor kontrastkravet ikke gælder. */
    --accent:       #0B7C4D;
    --accent-2:     #07693F;
    --accent-3:     #05512F;
    --accent-bright:#19B877;
    --accent-soft:  #E3F5EC;
    --accent-tint:  #F1FAF5;

    /* Kobolt — sekundær info */
    --cobalt:     #1F4BFF;
    --cobalt-2:   #0F35D6;
    --cobalt-soft:#E6ECFF;

    /* Status. Rødt er nu reserveret til fejl — ikke til brand. */
    --moss:       #0B7C4D;
    --moss-soft:  #E3F5EC;
    --amber:      #A96800;
    --amber-soft: #FFF2DB;
    --danger:     #D1373D;
    --danger-soft:#FDE8E9;

    /* Semantik */
    --bg:           var(--cream-100);
    --surface:      var(--cream-50);
    --surface-2:    var(--cream-100);
    --surface-elev: #FFFFFF;
    --border:       var(--cream-200);
    /* Feltkant: 3,45:1 mod hvid og 3,21:1 mod den lyse flade. Lysere end
       dette og feltets afgrænsning falder under kravet til komponenter. */
    --field-border: #7E8E85;
    --border-strong:var(--cream-300);
    --text:         var(--ink-900);
    --text-muted:   var(--ink-500);
    --brand:        var(--accent);
    --brand-2:      var(--accent-2);

    /* Navigationsbåndets højde: 14px polstring i top og bund + kapslens
       60px. Kapslen har derfor en min-height, så tallet holder, uanset hvad
       der står i menuen — heroerne regner deres egen polstring ud fra det. */
    --nav-h: 88px;

    /* Containere */
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1240px;
    --container-xl: 1400px;
    --gutter:       clamp(20px, 4vw, 32px);

    /* Radius — rundt og blødt hele vejen igennem */
    --radius-sm:  8px;
    --radius:     14px;
    --radius-lg:  22px;
    --radius-xl:  32px;
    --radius-pill: 999px;

    /* Skygger — bløde og lave. Kort skal svæve, ikke være rammet ind:
       adskillelsen kommer fra skygge og flade, ikke fra en tyk kant. */
    --shadow-sm:   0 1px 2px rgba(15,31,24,.04), 0 2px 6px -2px rgba(15,31,24,.06);
    --shadow:      0 2px 4px rgba(15,31,24,.03), 0 10px 26px -10px rgba(15,31,24,.12);
    --shadow-lg:   0 4px 10px rgba(15,31,24,.04), 0 26px 52px -18px rgba(15,31,24,.16);
    --shadow-warm: 0 12px 28px -12px rgba(11,124,77,.45);
    --shadow-ink:  0 20px 44px -18px rgba(15,31,24,.30);

    /* Kanter: tynde og lyse. De må aldrig bære adskillelsen alene. */
    --line:        1px;
    --line-bold:   1px;

    /* Motion — lidt længere og blødere end det flade design */
    --ease-out:    cubic-bezier(.22, .9, .3, 1);
    --ease-in-out: cubic-bezier(.65, .05, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast:    150ms;
    --dur:         260ms;
    --dur-slow:    520ms;

    /* Type */
    --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-sans:    "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: normal;
}

body {
    overflow-x: hidden;
    position: relative;
}

/* Subtle paper grain overlay on body */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-3); }

::selection { background: var(--accent); color: var(--cream-50); }

/* -------------------------------------------------------------------------
   3. Typografi
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--ink-900);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin: 0 0 .5em;
    font-weight: 700;
    font-variation-settings: "wdth" 108;
}

h1 {
    font-size: clamp(2.3rem, 5vw, 4.3rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .95;
    font-variation-settings: "wdth" 112;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.02;
    font-variation-settings: "wdth" 108;
    text-wrap: balance;
}

h3 {
    font-size: 1.22rem;
    font-weight: 700;
    font-variation-settings: "wdth" 100;
    letter-spacing: -.02em;
    line-height: 1.2;
}

h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1em; color: var(--ink-700); }

.lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    color: var(--ink-700);
    max-width: 52ch;
}

em, .italic { font-style: italic; }

/* I overskrifter er fremhævning ikke kursiv, men studenterhuens røde. */
h1 em, h2 em, h3 em,
h1 .italic, h2 .italic {
    font-style: normal;
    color: var(--accent);
}

/* Ordet der skal huskes: sat i en massiv rød blok. */
.display-italic {
    font-family: var(--font-display);
    font-style: normal;
    font-variation-settings: "wdth" 112;
    font-weight: 800;
    background: var(--accent);
    color: #FFFFFF;
    padding: .02em .2em;
    border-radius: .16em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--ink-500);
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--ink-300);
}

code, kbd, .mono {
    font-family: var(--font-mono);
    font-size: .88em;
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    word-break: break-all;
}

.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.block { display: block; }
.w-100 { width: 100%; }

/* Utility spacing (4px grid) */
.mt-4  { margin-top: 4px;  }
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }

/* -------------------------------------------------------------------------
   4. Containers & sections
   ------------------------------------------------------------------------- */
.container,
.container-lg {
    width: 100%;
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 2;
}
.container-sm { max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.container-md { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.container-xl { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

/* Kun lodret polstring: .section og .container sidder ofte på SAMME element,
   og en samlet padding-genvej nulstillede containerens sidemargen — teksten
   løb ud til skærmkanten på mobil. */
.section { padding-top: clamp(72px, 12vw, 120px); padding-bottom: clamp(72px, 12vw, 120px); position: relative; z-index: 2; }
.section.narrow { max-width: var(--container-sm); margin: 0 auto; }
.section.tight { padding-top: clamp(48px, 8vw, 80px); padding-bottom: clamp(48px, 8vw, 80px); }

.section-head { margin-bottom: clamp(36px, 6vw, 64px); max-width: 720px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--text-muted); font-size: 1.05rem; max-width: 56ch; }
.section-head.center p { margin-left: auto; margin-right: auto; }

.flex-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   5. Reveal / scroll animations (progressive enhancement)
   .reveal viser fuldt indhold som standard. Først når <html> får klassen
   .has-js (sat tidligt af app.js) bliver de skjult og afventer
   IntersectionObserver — så no-JS-brugere ser ALT.
   ------------------------------------------------------------------------- */
html.has-js .reveal {
    opacity: 0;
    /* Lidt op og en anelse ned i størrelse. Skalaen er bevidst minimal —
       0,97 mærkes, 0,90 ser ud som en fejl. */
    transform: translateY(26px) scale(.97);
    transition:
        opacity 620ms var(--ease-out),
        transform 720ms cubic-bezier(.16, .84, .32, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
}
html.has-js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Kort må gerne komme lidt længere nedefra — de er tunge elementer. */
html.has-js .card.reveal,
html.has-js .reveal .card {
    transform: translateY(34px) scale(.975);
}

/* Overskrifter glider ind fra siden i stedet for nedefra, så et afsnit ikke
   bevæger sig ensartet i blok. */
html.has-js .section-head.reveal,
html.has-js .reveal > .eyebrow {
    transform: translateY(18px);
}

/* Automatisk forskydning i grupper: hvert barn starter lidt efter det forrige,
   uden at markup'en skal sætte --i manuelt. */
html.has-js .reveal-group > * {
    opacity: 0;
    transform: translateY(24px) scale(.98);
    transition:
        opacity 560ms var(--ease-out),
        transform 660ms cubic-bezier(.16, .84, .32, 1);
}
html.has-js .reveal-group.is-visible > * { opacity: 1; transform: none; }
html.has-js .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.has-js .reveal-group.is-visible > *:nth-child(2) { transition-delay: 90ms; }
html.has-js .reveal-group.is-visible > *:nth-child(3) { transition-delay: 180ms; }
html.has-js .reveal-group.is-visible > *:nth-child(4) { transition-delay: 270ms; }
html.has-js .reveal-group.is-visible > *:nth-child(5) { transition-delay: 360ms; }
html.has-js .reveal-group.is-visible > *:nth-child(n+6) { transition-delay: 450ms; }

/* Tal der tæller: fremhævede nøgletal må gerne lande lidt senere end
   teksten omkring dem. */
html.has-js .trust-row.reveal > li { transition-delay: calc(var(--n, 0) * 70ms); }

/* De grønne former i heroen driver langsomt, mens man scroller. Ren CSS —
   ingen scroll-lytter, så det koster ikke noget på hovedtråden. */
@media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: hero-drift 26s ease-in-out infinite alternate; }
    .hero::after  { animation: hero-drift-2 32s ease-in-out infinite alternate; }
}
@keyframes hero-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-22px, 26px, 0) scale(1.06); }
}
@keyframes hero-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(18px, -20px, 0) scale(1.08); }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}
@keyframes blob-drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(40px, -30px, 0) scale(1.1); }
    100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes blob-drift-2 {
    0%   { transform: translate3d(0,0,0) scale(.95); }
    50%  { transform: translate3d(-30px, 30px, 0) scale(1.05); }
    100% { transform: translate3d(0,0,0) scale(.95); }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------------
   6. Nav
   ------------------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 14px 0;
    background: transparent;
    transition: padding var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
/* Kapslen bliver ved med at svæve, også når man scroller. Båndet omkring
   forbliver gennemsigtigt — kun skyggen under kapslen løftes en anelse, så
   den stadig kan skelnes fra indholdet, der glider forbi under den. */
.site-nav.is-scrolled {
    padding: 14px 0;
    background: transparent;
    box-shadow: none;
}

.nav-shell { position: relative; }

.nav-capsule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* Låser --nav-h fast. Uden den svinger båndets højde med menuens indhold
       (mobilens hamburger er en anelse højere end logoet), og heroens
       udligning nedenfor rammer så et par pixel forkert. */
    min-height: 60px;
    padding: 9px 10px 9px 20px;
    background: var(--cream-50);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow);
    transition: box-shadow var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
}
.site-nav.is-scrolled .nav-capsule {
    box-shadow: var(--shadow-lg);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    color: var(--ink-900);
    letter-spacing: -.02em;
    flex: none;
}
.brand:hover { color: var(--ink-900); text-decoration: none; }

/* Ordmærket er tekst, ikke billede: så følger det altid sidens typografi
   og gengives ens overalt — en SVG i <img> kan ikke hente webfonte. */
.brand-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wdth" 104;
    font-size: 1.22rem;
    letter-spacing: -.035em;
    line-height: 1;
}
.brand-name em { font-style: normal; color: var(--accent); }

.brand-logo {
    width: 34px;
    height: 34px;
    display: block;
    flex: none;
    transition: transform var(--dur) var(--ease-spring);
}
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Links er pilleformede felter frem for understregede ord: det gør den
   aktive side tydelig uden en ekstra streg i et i forvejen rundt design. */
.nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--radius-pill);
    color: var(--ink-700);
    font-size: .93rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-links .nav-link:hover {
    background: var(--accent-tint);
    color: var(--ink-900);
    text-decoration: none;
}
.nav-links .nav-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-2);
    font-weight: 600;
}

.nav-links .link-admin { color: var(--accent); font-weight: 600; }
.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
    flex: none;
}

.nav-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 6px;
    flex: none;
}

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--ink-700);
    padding: 0 4px 0 0;
    white-space: nowrap;
}
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
    flex: none;
}

.nav-drawer-title { display: none; }

.nav-toggle {
    display: none;
    background: var(--cream-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: background var(--dur-fast) var(--ease-out);
    position: relative;
    z-index: 70;
}
.nav-toggle:hover { background: var(--accent-tint); }
.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-900);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    border-radius: var(--radius-pill);
    border: var(--line) solid transparent;
    background: transparent;
    color: var(--ink-900);
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
    font-variation-settings: "wdth" 104;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }

.btn-primary {
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: none;
}
.btn-primary:hover {
    background: var(--accent);
    color: var(--cream-50);
    transform: none;
    box-shadow: none;
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--ink-900);
}
.btn-secondary:hover {
    background: var(--ink-900);
    color: var(--cream-50);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-700);
    padding: 8px 14px;
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink-900);
}

.btn-danger {
    background: var(--danger);
    color: var(--cream-50);
}
.btn-danger:hover {
    background: #A62A2F;
    transform: translateY(-1px);
}

.btn-icon {
    position: relative;
    padding-right: 36px;
}
.btn-icon::after {
    content: "→";
    position: absolute;
    right: 18px;
    transition: transform var(--dur) var(--ease-out);
}
.btn-icon:hover::after { transform: translateX(4px); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding: clamp(60px, 9vw, 100px) 0 clamp(72px, 12vw, 140px);
    overflow: hidden;
    isolation: isolate;
    background: var(--accent-soft);
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
/* Bløde grønne former bag indholdet. Runde, massive flader — ingen
   hårde bånd og ingen sløring. */
.hero::before {
    width: clamp(200px, 26vw, 360px);
    height: clamp(200px, 26vw, 360px);
    border-radius: 50%;
    background: var(--accent-bright);
    opacity: .28;
    top: clamp(-40px, -2vw, 0px);
    right: clamp(-90px, -5vw, -40px);
}
.hero::after {
    width: clamp(120px, 16vw, 210px);
    height: clamp(120px, 16vw, 210px);
    border-radius: 50%;
    background: var(--accent);
    opacity: .10;
    bottom: -60px;
    left: -50px;
}
/* De grønne former er lave i styrke og må gerne blive på mobil — men den
   store skal trækkes ud af vejen for overskriften. */
@media (max-width: 860px) {
    .hero::before { top: -80px; right: -120px; opacity: .22; }
    .hero::after { display: none; }
}

/* Navigationsbåndet er gennemsigtigt og skal svæve OVEN PÅ heroen. Men det
   er `position: sticky` og fylder derfor 88px i flowet — resultatet var en
   stribe bar sidebaggrund over den grønne flade, som lignede en fejl.
   Heroen trækkes op under båndet og får den samme højde lagt til sin egen
   polstring, så indholdet bliver stående præcis hvor det stod.

   `:first-child` er ikke pynt: ligger der en flash-besked øverst i <main>,
   skal heroen BLIVE under den i stedet for at lægge sig hen over den. */
.main > .hero:first-child,
.main > .landing-hero:first-child {
    margin-top: calc(-1 * var(--nav-h));
}
.main > .hero:first-child { padding-top: calc(clamp(60px, 9vw, 100px) + var(--nav-h)); }
.main > .landing-hero:first-child { padding-top: calc(clamp(28px, 4vw, 48px) + var(--nav-h)); }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-text { max-width: 640px; }
.hero-text .eyebrow { margin-bottom: 24px; animation: fade-in var(--dur-slow) var(--ease-out) both; }

.hero-text h1 {
    margin-bottom: 24px;
    animation: fade-up var(--dur-slow) var(--ease-out) 120ms both;
}
.hero-text h1 em { color: var(--accent); }
.hero-text h1 .display-italic { color: #FFFFFF; }

.hero-text .lead {
    margin-bottom: 0;
    animation: fade-up var(--dur-slow) var(--ease-out) 240ms both;
}

.hero-text .cta-row { animation: fade-up var(--dur-slow) var(--ease-out) 360ms both; }

.trust-row {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    flex-wrap: wrap;
    animation: fade-up var(--dur-slow) var(--ease-out) 480ms both;
}
.trust-row li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .85rem;
    color: var(--ink-500);
    padding-left: 16px;
    border-left: 2px solid var(--cream-300);
}
.trust-row li strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 104;
    font-size: 1.6rem;
    color: var(--ink-900);
    letter-spacing: -.02em;
    line-height: 1;
}

.hero-card-wrap {
    display: flex;
    justify-content: center;
    animation: fade-up var(--dur-slow) var(--ease-out) 400ms both;
}
.hero-card {
    background: var(--surface-elev);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    padding: 32px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-lg);
    transform: rotate(1.5deg);
    transition: transform var(--dur-slow) var(--ease-out);
    position: relative;
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(11, 11, 15,.04);
    pointer-events: none;
}
.hero-card:hover { transform: rotate(0deg) translateY(-4px); }

.hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-strong);
}

.hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}
.hero-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-stats .muted {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-500);
}
.hero-stats strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 100;
    font-size: 1.2rem;
    color: var(--ink-900);
    letter-spacing: -.015em;
}

.hero-progress {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.hero-progress small { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; }

/* -------------------------------------------------------------------------
   9. Grids
   ------------------------------------------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 32px);
}
.grid-2-7-5 {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

/* -------------------------------------------------------------------------
   10. Cards
   ------------------------------------------------------------------------- */
.card {
    background: var(--surface-elev);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
    position: relative;
}
.card.card-elevated { box-shadow: var(--shadow); }
.card.card-highlight {
    border-color: var(--accent);
    background: var(--accent-tint);
    box-shadow: var(--shadow);
}
.card.card-quiet {
    background: var(--surface-2);
    border-color: transparent;
    box-shadow: none;
}
.card-feature:hover,
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.card h3 { margin-bottom: 8px; }
.card > p:last-child { margin-bottom: 0; }

.card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .88rem;
}
.card-meta .muted {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .12em;
}
.card-meta strong { font-weight: 600; }

/* Feature card with icon */
.feature { padding: 28px; }
.feature .feature-icon { margin-bottom: 20px; }

/* -------------------------------------------------------------------------
   11. Steps
   ------------------------------------------------------------------------- */
.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
    position: relative;
    counter-reset: step;
}
.steps::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 8%;
    right: 8%;
    height: 1px;
    background-image: linear-gradient(to right, var(--cream-300) 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    z-index: 0;
}
.steps li {
    position: relative;
    text-align: left;
    z-index: 1;
}
.step-icon {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-pill);
    background: var(--cream-50);
    border: 1px solid var(--border);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform var(--dur) var(--ease-spring),
                border-color var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
}
.steps li:hover .step-icon {
    transform: rotate(-6deg) scale(1.05);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.step-icon svg { width: 30px; height: 30px; stroke-width: 1.75; }

.step-num {
    display: inline-block;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "wdth" 108;
    font-weight: 400;
    font-size: 2.2rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -.04em;
}

.steps li h3 { margin-bottom: 6px; font-size: 1.05rem; }
.steps li p { color: var(--ink-500); font-size: .92rem; margin: 0; }

/* -------------------------------------------------------------------------
   12. Price cards
   ------------------------------------------------------------------------- */
.price-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.price-card.highlight {
    background: var(--ink-900);
    color: var(--cream-50);
    border-color: var(--ink-900);
    box-shadow: var(--shadow-ink);
}
.price-card.highlight h3,
.price-card.highlight .price { color: var(--cream-50); }
.price-card.highlight .muted { color: var(--cream-300); }
.price-card.highlight .badge { background: var(--accent); color: var(--cream-50); }

.price-head { margin-bottom: 24px; }
.price-body { display: flex; flex-direction: column; gap: 8px; }
.price-body h3 { margin: 0; font-size: 1.1rem; }
.price-body .muted { font-size: .9rem; }
.price {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 112;
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    line-height: 1;
    color: var(--ink-900);
    letter-spacing: -.03em;
    margin: 8px 0 4px;
}

/* -------------------------------------------------------------------------
   13. Showcase grid (bento)
   ------------------------------------------------------------------------- */
.showcase-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    grid-template-rows: 220px 220px;
    gap: clamp(16px, 2vw, 24px);
}
.showcase-grid > * { grid-column: span 1; grid-row: span 1; }
.showcase-grid > *:nth-child(1) { grid-column: span 2; }
.showcase-grid > *:nth-child(4) { grid-column: span 2; }

.img-placeholder {
    background: var(--cream-100);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-300);
    overflow: hidden;
    position: relative;
    transition: transform var(--dur) var(--ease-out);
}
.img-placeholder svg { width: 40%; height: 40%; max-width: 80px; max-height: 80px; }
.img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur) var(--ease-out);
}
.img-placeholder:hover { transform: scale(1.01); }
.img-placeholder:hover img { transform: scale(1.03); }
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease-out);
}
.feature-icon svg { width: 26px; height: 26px; stroke-width: 1.75; }
.card-feature:hover .feature-icon {
    transform: scale(1.06) rotate(-4deg);
    background: var(--accent-bright);
}

/* -------------------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------------------- */
.faq {
    max-width: var(--container-md);
    margin: 0 auto;
}
.faq details {
    border-bottom: 1px solid var(--border-strong);
    padding: 24px 0;
    position: relative;
}
.faq details:first-of-type { border-top: 1px solid var(--border-strong); }
.faq summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 104;
    font-size: 1.25rem;
    color: var(--ink-900);
    letter-spacing: -.015em;
    padding-right: 48px;
    position: relative;
    transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 16px no-repeat;
    transition: transform var(--dur) var(--ease-spring);
    transform: translateY(-50%);
}
.faq details[open] summary { color: var(--accent); }
.faq details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat;
}
.faq details p {
    margin: 16px 0 0;
    color: var(--ink-700);
    max-width: 60ch;
    animation: fade-up var(--dur) var(--ease-out);
}

/* -------------------------------------------------------------------------
   15. CTA banner
   ------------------------------------------------------------------------- */
.cta-banner {
    background: var(--ink-900);
    color: var(--cream-50);
    border-radius: var(--radius-xl);
    padding: clamp(40px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-ink);
    isolation: isolate;
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--accent), var(--accent)) 100% 0 / 38% 100% no-repeat;
    z-index: -1;
}
.cta-banner h2 { color: var(--cream-50); margin-bottom: 8px; }
.cta-banner h2 em { color: var(--accent); }
.cta-banner h2 .display-italic { background: var(--accent-bright); color: var(--ink-900); }
.cta-banner p { color: var(--cream-200); margin: 0; font-size: 1.05rem; max-width: 44ch; }
.cta-banner .cta-row { margin-top: 0; justify-content: flex-end; }
.cta-banner .btn-primary { background: var(--cream-50); color: var(--ink-900); }
.cta-banner .btn-primary:hover { background: var(--accent); color: var(--cream-50); }
.cta-banner .btn-secondary { border-color: var(--cream-200); color: var(--cream-50); }
.cta-banner .btn-secondary:hover { background: var(--cream-50); color: var(--ink-900); }

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
/* Footeren er en mørkegrøn bundplade med rundede topjørner — den spejler
   heroens rundede bund og lukker siden af som ét sammenhængende element. */
.site-footer {
    background: var(--ink-900);
    color: var(--cream-200);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: clamp(64px, 9vw, 120px);
    padding: clamp(56px, 7vw, 88px) 0 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
/* Tynd lysende kant i toppen, så pladen får en afslutning mod siden over. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--accent-bright);
    opacity: .65;
    border-radius: 2px;
}

.footer-inner { position: relative; z-index: 2; }

.footer-top {
    display: grid;
    /* Fem linkkolonner kræver plads: brandblokken holdes smallere, så lange
       ord som "Handelsbetingelser" ikke presses ind i nabokolonnen. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
    gap: clamp(32px, 4vw, 56px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

.footer-brand .brand { margin-bottom: 22px; }
.footer-brand .brand,
.footer-brand .brand:hover { color: #FFFFFF; }

.footer-claim {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wdth" 106;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #FFFFFF;
    margin: 0 0 14px;
}
.footer-claim em {
    font-style: normal;
    background: var(--accent-bright);
    color: var(--ink-900);
    padding: .02em .2em;
    border-radius: .16em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.footer-sub {
    color: var(--ink-300);
    font-size: .95rem;
    line-height: 1.6;
    max-width: 44ch;
    margin: 0 0 26px;
}

.footer-cta { align-self: flex-start; }

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--accent-bright);
    font-weight: 500;
    margin-bottom: 18px;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer-col a {
    color: var(--ink-100);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.footer-col a::after {
    content: "→";
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-col a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
.footer-col a:hover::after { opacity: .7; transform: translateX(0); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 22px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ink-300);
}

/* Kontaktkolonnen skal ikke have hover-pilen — det er oplysninger, ikke navigation. */
.footer-contact a::after { content: none; }
.footer-contact a { font-variant-numeric: tabular-nums; }

/* Seks grupper: Studenterkørsel, Områder, Produkt, Support, Kontakt, Juridisk.
   Kontolinkene er lagt ind under Support, så de to nye grupper med
   landingssiderne kunne få plads.

   De står i TO RÆKKER á tre og ikke i seks smalle spalter: seks spalter gav
   114 px hver, og så knækker "Handelsbetingelser" og "Lej studentervogn"
   midt over. Tre spalter giver plads til det længste link på én linje. */
.footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }

.footer-legal { line-height: 1.7; }

/* Navnet i stort format, klippet af pladens underkant. Rent dekorativt —
   derfor aria-hidden i markup'en. */
.footer-wordmark {
    position: absolute;
    left: 50%;
    bottom: clamp(-96px, -7vw, -52px);
    transform: translateX(-50%);
    width: max-content;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wdth" 112;
    font-size: clamp(4.5rem, 17vw, 16rem);
    line-height: .8;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .10);
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   17. Forms
   ------------------------------------------------------------------------- */
.form-card {
    background: var(--surface-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 48px);
    max-width: 540px;
    margin: 0 auto;
    box-shadow: var(--shadow);
}
.form-card h1, .form-card h2 { margin-bottom: 8px; }

.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row.two-col {
    flex-direction: row;
    gap: 16px;
}
.form-row.two-col > * { flex: 1; }
.form-row label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-700);
}

/* Universal input styling — gælder alle inputs, ikke kun .form-row */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="tel"],
input[type="search"],
select,
textarea {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--cream-100);
    color: var(--ink-900);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-elev);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea { min-height: 96px; resize: vertical; }

/* Select pil */
select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235E6E66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Label-wrapped inputs (uden .form-row) */
.form-card label,
form > label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-700);
    margin-bottom: 18px;
}
.form-card label > input,
.form-card label > select,
.form-card label > textarea,
form > label > input,
form > label > select,
form > label > textarea {
    margin-top: 6px;
}

/* Checkbox- og radio-labels skal ikke gøres block */
.form-card label.checkbox,
form > label.checkbox { display: inline-flex; margin-bottom: 8px; }

.form-row .error,
.field-error,
.form-error {
    color: var(--danger);
    font-size: .85rem;
    margin: 4px 0 0;
}

.form-hint { font-size: .82rem; color: var(--ink-500); margin: 0; }

/* -------------------------------------------------------------------------
   18. Badges
   ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--cream-200);
    color: var(--ink-700);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}
.badge.no-dot::before { display: none; }

.badge-violet { background: var(--accent-soft); color: var(--accent); }
.badge-blue   { background: var(--cobalt-soft); color: var(--cobalt); }
.badge-green  { background: var(--moss-soft); color: var(--moss); }
.badge-amber  { background: var(--amber-soft); color: var(--amber); }
.badge-red    { background: var(--danger-soft); color: var(--danger); }
.badge-gray   { background: var(--cream-200); color: var(--ink-700); }
.badge-ink    { background: var(--ink-900); color: var(--cream-50); }

/* -------------------------------------------------------------------------
   19. Progress
   ------------------------------------------------------------------------- */
.progress {
    height: 8px;
    background: var(--cream-200);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}
.progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
    transition: width var(--dur-slow) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    list-style: none;
    padding: 0;
}
.progress-steps li {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-500);
}
.progress-steps li.active { color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------------------
   20. Tabs
   ------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    color: var(--ink-500);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    margin-bottom: -1px;
}
.tab:hover { color: var(--ink-900); text-decoration: none; }
.tab.active {
    color: var(--ink-900);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   21. Trip cards / dashboards
   ------------------------------------------------------------------------- */
.trip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.trip-card { padding: 28px; }
.trip-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.trip-card h3 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    font-variation-settings: "wdth" 104;
}
.trip-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.trip-card-meta > div { display: flex; flex-direction: column; gap: 4px; }
.trip-card-meta .muted {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-500);
}
.trip-card-meta strong { font-weight: 600; color: var(--ink-900); }

.trip-card-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   22. Tables / lists
   ------------------------------------------------------------------------- */
table, .table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
table th, .table th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-500);
    font-weight: 500;
    background: var(--surface-2);
}
table td, .table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table tbody tr:hover, .table tbody tr:hover { background: var(--surface-2); }

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }

/* -------------------------------------------------------------------------
   23. Flash messages
   ------------------------------------------------------------------------- */
.flash {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: .95rem;
    border: 1px solid transparent;
    animation: fade-up var(--dur) var(--ease-out);
}
.flash-success { background: var(--moss-soft); color: var(--moss); border-color: rgba(15, 138, 70,.2); }
.flash-error,
.flash-danger  { background: var(--danger-soft); color: var(--danger); border-color: rgba(224, 27, 36,.2); }
.flash-info    { background: var(--cobalt-soft); color: var(--cobalt); border-color: rgba(31, 75, 255,.2); }
.flash-warning { background: var(--amber-soft); color: var(--amber); border-color: rgba(184, 110, 0,.2); }

/* -------------------------------------------------------------------------
   24. Empty states
   ------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-strong);
}
.empty-state h2,
.empty-state h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "wdth" 108;
    color: var(--ink-900);
}
.empty-state p { color: var(--ink-500); max-width: 42ch; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------------
   25. Scroll progress bar
   ------------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 100;
    pointer-events: none;
}
.scroll-progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 80ms linear;
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   26. Misc — copy toast, divider
   ------------------------------------------------------------------------- */
.copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink-900);
    color: var(--cream-50);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: .85rem;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    z-index: 100;
    box-shadow: var(--shadow-lg);
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.divider {
    height: 1px;
    background: var(--border);
    margin: 32px 0;
    border: 0;
}

/* -------------------------------------------------------------------------
   26b. Page hero / page-specific patterns
   ------------------------------------------------------------------------- */
.page-hero { padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 7vw, 80px); }
.page-hero .section-head h1,
.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 8px;
}
.page-hero .muted { font-size: 1.02rem; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-500);
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 24px;
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.back-link:hover {
    color: var(--accent);
    transform: translateX(-3px);
    text-decoration: none;
}

/* Trip header */
.trip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.trip-header h1 {
    margin: 12px 0 8px;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.trip-header .muted { margin: 0; }
.trip-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Trip progress strip */
.trip-progress {
    background: var(--surface-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 32px;
}
.trip-progress .progress-steps {
    margin-top: 16px;
}
.progress-steps li.done { color: var(--accent); font-weight: 600; }
.progress-steps li.done::before {
    content: "✓ ";
}

/* Trip card progress */
.trip-card-progress {
    margin: 16px 0;
}
.trip-card-progress .progress { margin-bottom: 6px; }
.trip-card-progress small { display: block; font-family: var(--font-mono); font-size: .72rem; }

/* Tab panel content */
.tab-panel { display: block; }

/* Definition list (trip details) */
.trip-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 16px;
    margin: 16px 0 0;
}
.trip-dl dt {
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-500);
}
.trip-dl dd {
    margin: 0;
    color: var(--ink-900);
    font-weight: 500;
}

/* Vertical stack */
.stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card head with title + action */
.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.card-head h2,
.card-head h3 { margin: 0; }

/* Copy row */
.copy-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 16px 0 12px;
}
.copy-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink-900);
    font-family: var(--font-mono);
    font-size: .85rem;
}
.qr-fallback {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 12px;
    font-size: .85rem;
}
.qr-fallback code {
    display: block;
    margin-top: 6px;
    word-break: break-all;
    background: transparent;
    padding: 0;
}

/* Key-value list */
.kv {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kv li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.kv li:last-child { border-bottom: 0; }
.kv li span {
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-500);
}
.kv li strong {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 100;
    font-size: 1.1rem;
    color: var(--ink-900);
    letter-spacing: -.015em;
}
.kv-wide li strong { font-size: 1.25rem; }

/* Table wrapper for responsive scroll */
.table-wrap {
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

/* Stops list */
.stops-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: stop;
}
.stops-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0 16px 36px;
    border-bottom: 1px solid var(--border);
    position: relative;
    counter-increment: stop;
}
.stops-list li::before {
    content: counter(stop);
    position: absolute;
    left: 0;
    top: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stops-list li:last-child { border-bottom: 0; }

/* Message list */
.msg-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.msg {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 14px 16px;
    border-left: 3px solid var(--cream-300);
}
.msg-admin { border-left-color: var(--accent); }
.msg-organizer { border-left-color: var(--cobalt); }
.msg header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.msg p { margin: 0; }

/* Badge small variant */
.badge-sm { padding: 2px 8px; font-size: .65rem; }

/* Flash wrap container */
.flash-wrap { padding-top: 16px; }

/* Form wide variant */
.form-card.form-wide { max-width: 760px; }

/* Form actions row */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    flex-wrap: wrap;
}
.form-actions .btn { min-width: 120px; }

/* Checkbox row */
.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
    font-size: .95rem;
    color: var(--ink-700);
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    margin: 2px 0 0;
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   27. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .hero-card { transform: rotate(0deg); max-width: 100%; }
    .steps { grid-template-columns: repeat(3, 1fr); }
    .steps::before { display: none; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-2-7-5 { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
    .showcase-grid > *:nth-child(1),
    .showcase-grid > *:nth-child(4) { grid-column: span 1; }
    .cta-banner { grid-template-columns: 1fr; }
    .cta-banner .cta-row { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; }

    /* MÅ IKKE FJERNES. .nav-shell bærer også klassen .container, og .container
       sætter `position: relative; z-index: 2`. Det skaber en STAKKONTEKST, og
       dermed bliver skuffens `z-index: 55` regnet ud INDEN I den — ikke mod
       mørklægningslaget udenfor. Resultatet var, at hele navigationen (kapsel
       OG skuffe) konkurrerede som "2" mod sløret på "54": skuffen gled pænt
       ind, men blev malet UNDER sløret, og hvert klik ramte sløret i stedet
       for menupunkterne. Menuen så ud til at være et mørkt lag hen over alt.
       Her løftes hele skallen op over sløret igen. */
    .site-nav .nav-shell { z-index: 55; }

    /* Drawer backdrop */
    .site-nav::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(11, 11, 15, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
        z-index: 54;
    }
    .site-nav:has(.nav-links.is-open)::before,
    .site-nav:has(.nav-links.open)::before {
        opacity: 1;
        visibility: visible;
    }

    /* Kapslen holder kun logo og knap på mobil */
    .nav-capsule { padding: 8px 8px 8px 16px; }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88%, 420px);
        background: var(--surface-elev);
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        padding: 96px 24px 32px;
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease-out);
        box-shadow: -30px 0 70px -30px rgba(15,31,24,.45);
        z-index: 55;
        overflow-y: auto;
    }
    .nav-links.is-open,
    .nav-links.open { transform: translateX(0); }

    .nav-drawer-title {
        display: block;
        font-family: var(--font-mono);
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .18em;
        color: var(--ink-300);
        margin-bottom: 10px;
    }

    /* Store, rolige rækker frem for en tætpakket liste — der er plads nok. */
    .nav-links .nav-link {
        width: 100%;
        padding: 15px 18px;
        font-family: var(--font-display);
        font-weight: 700;
        font-variation-settings: "wdth" 102;
        font-size: 1.25rem;
        letter-spacing: -.02em;
        border-radius: var(--radius-lg);
    }

    /* Punkterne glider ind efter hinanden, når skuffen åbner. */
    .nav-links.is-open .nav-link,
    .nav-links.open .nav-link {
        animation: nav-item-in var(--dur) var(--ease-out) both;
    }
    .nav-links .nav-link:nth-of-type(1) { animation-delay: 60ms; }
    .nav-links .nav-link:nth-of-type(2) { animation-delay: 100ms; }
    .nav-links .nav-link:nth-of-type(3) { animation-delay: 140ms; }
    .nav-links .nav-link:nth-of-type(4) { animation-delay: 180ms; }
    .nav-links .nav-link:nth-of-type(5) { animation-delay: 220ms; }

    .nav-sep {
        width: 100%;
        height: 1px;
        margin: 14px 0 6px;
    }
    .nav-links .btn {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .nav-user {
        padding: 10px 18px;
        gap: 12px;
    }
    .nav-avatar { width: 34px; height: 34px; font-size: .95rem; }
    .body-no-scroll { overflow: hidden; }

    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, 1fr); }

    .trip-grid { grid-template-columns: 1fr; }
    .trip-card-meta { grid-template-columns: 1fr; }

    .form-row.two-col { flex-direction: column; }

    table th, .table th { display: none; }
    table td, .table td {
        display: block;
        padding: 8px 0;
        border-bottom: 0;
    }
    table tbody tr, .table tbody tr {
        display: block;
        padding: 16px;
        border-bottom: 1px solid var(--border);
    }

    .cta-banner { padding: 40px 28px; text-align: left; }

    .trip-header { flex-direction: column; gap: 16px; }
    .trip-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .trip-dl dt { margin-top: 12px; }
    .trip-dl dd { padding-bottom: 4px; border-bottom: 1px solid var(--border); }
    .trip-dl dd:last-child { border-bottom: 0; }
    .copy-row { flex-direction: column; }
}

@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr; grid-template-rows: 180px 180px 180px 180px; }
    .showcase-grid > * { grid-column: span 1 !important; }
    .footer-brand { grid-column: span 1; }
    .trust-row { gap: 18px; }
    .trust-row li { padding-left: 12px; }
    .trust-row li strong { font-size: 1.4rem; }
    .hero-stats { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   27b. Kundeservice (hub, artikler, kontakt)
   ------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-500);
}
.breadcrumb a {
    color: var(--ink-500);
    transition: color var(--dur-fast) var(--ease-out);
}
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb-current { color: var(--ink-700); }

/* Hub-grid med kategori-kort */
.kundeservice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
}
.support-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.support-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.support-category h3 {
    margin: 0;
    font-size: 1.25rem;
}
.support-category > p {
    margin: 0;
    color: var(--text-muted);
}
.support-article-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--border);
}
.support-article-list li {
    border-bottom: 1px solid var(--border);
}
.support-article-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    color: var(--ink-900);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
.support-article-list a:hover {
    color: var(--accent);
    padding-left: 8px;
    text-decoration: none;
}
.support-article-list a .arrow {
    color: var(--ink-300);
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.support-article-list a:hover .arrow {
    color: var(--accent);
    transform: translateX(4px);
}

/* Artikel-indhold (long-form prose) */
.article-meta {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.article-content {
    max-width: 70ch;
    color: var(--ink-700);
    font-size: 1.02rem;
    line-height: 1.75;
}
.article-content > .lead {
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--ink-900);
    margin-bottom: 32px;
}
.article-content h2 {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    color: var(--ink-900);
}
.article-content h2:first-child { margin-top: 0; }
.article-content h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 1.15rem;
    color: var(--ink-900);
}
.article-content p { margin: 0 0 18px; }
.article-content ul,
.article-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
}
.article-content li {
    margin-bottom: 8px;
    padding-left: 4px;
}
.article-content li::marker { color: var(--accent); }
.article-content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.article-content a:hover { text-decoration-color: var(--accent); }
.article-content strong { color: var(--ink-900); font-weight: 600; }

.article-related {
    margin-top: 56px;
    padding: 24px 28px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.article-related h3 {
    margin: 0 0 12px;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-500);
    font-family: var(--font-mono);
}
.article-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.article-related a {
    color: var(--ink-900);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
}
.article-related a:hover { color: var(--accent); text-decoration: none; }
.article-related a::before {
    content: "→";
    color: var(--accent);
    margin-right: 8px;
}

.article-cta {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.article-cta .cta-row {
    justify-content: center;
    margin-top: 16px;
}

/* Kontakt-kort */
.contact-card {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    padding: clamp(28px, 4vw, 48px);
}
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.contact-info-block .eyebrow { margin-bottom: 8px; }
.contact-info-block p { margin: 0 0 4px; }
.contact-info-block p.muted { font-size: .92rem; }
.contact-link {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink-900);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
}
.contact-link:hover { color: var(--accent); text-decoration: none; }

.contact-form h3 {
    margin: 0 0 20px;
    font-size: 1.2rem;
}
.contact-form .btn { width: 100%; }

.field-error {
    display: block;
    color: var(--danger);
    font-size: .85rem;
    margin-top: 4px;
}

/* Honeypot — skjul fra brugere, synlig for bots */
.honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 860px) {
    .kundeservice-grid { grid-template-columns: 1fr; }
    .contact-card { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   28. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero::before, .hero::after { animation: none; }
    .progress-bar::after { display: none; }
}

/* -------------------------------------------------------------------------
   Gymnasium-picker (søgbar dropdown)
   ------------------------------------------------------------------------- */
.gym-picker {
    position: relative;
    margin-top: 6px;
}
.gym-picker-search {
    width: 100%;
}
.gym-picker-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-elev);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4px;
}
.gym-picker-item {
    padding: 10px 12px;
    border-radius: calc(var(--radius) - 4px);
    font-size: .95rem;
    color: var(--ink-900);
    cursor: pointer;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gym-picker-item:hover,
.gym-picker-item.is-active {
    background: var(--accent-soft);
    color: var(--ink-900);
}
.gym-picker-name {
    font-weight: 500;
}
.gym-picker-meta {
    font-size: .82rem;
    color: var(--ink-500);
}
.gym-picker-item.is-active .gym-picker-meta {
    color: var(--ink-700);
}
.gym-picker-empty {
    padding: 12px;
    font-size: .9rem;
    color: var(--ink-500);
    text-align: center;
}
mark.gym-hl {
    background: rgba(255, 43, 52, 0.18);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Prisberegner-wizard
   ------------------------------------------------------------------------- */
.wizard {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}
.wizard-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.wizard-progress-track {
    flex: 1;
    height: 6px;
    background: var(--cream-300);
    border-radius: 999px;
    overflow: hidden;
}
.wizard-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .35s cubic-bezier(.4,.0,.2,1);
    width: 0%;
}
.wizard-progress-label {
    font-size: .82rem;
    color: var(--ink-500);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wizard-step {
    border: 0;
    padding: 0;
    margin: 0;
    animation: wizardFadeIn .35s ease-out;
}
.wizard-step[hidden] {
    display: none !important;
}
@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.wizard-question {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink-900);
    margin: 0 0 8px;
}
.wizard-help {
    color: var(--ink-500);
    margin: 0 0 20px;
    font-size: .95rem;
    line-height: 1.5;
}
.wizard-field {
    margin-bottom: 18px;
}
.wizard-field input[type="number"],
.wizard-field input[type="date"],
.wizard-field input[type="time"],
.wizard-field input[type="text"],
.wizard-field input[type="email"],
.wizard-field input[type="tel"] {
    font-size: 1.1rem;
    padding: 14px 14px;
}
.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
.wizard-actions .btn {
    min-width: 110px;
}
.wizard-prev {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--ink-700);
}
.wizard-prev:hover {
    background: var(--cream-200);
}
.wizard-step[data-kind="contact"] .wizard-field + .wizard-field {
    margin-top: 0;
}
.wizard-error-banner {
    background: rgba(255, 43, 52, 0.08);
    border: 1px solid rgba(255, 43, 52, 0.3);
    color: var(--accent);
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    font-size: .9rem;
}
.wizard-step-error {
    color: var(--accent);
    font-size: .85rem;
    margin-top: 6px;
}
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* -------------------------------------------------------------------------
   Result page (bid-mod-budget)
   ------------------------------------------------------------------------- */
.bid-hero {
    text-align: center;
    padding: 32px 0 24px;
}
.bid-amount {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1;
    margin: 8px 0 6px;
}
.bid-perperson {
    color: var(--ink-500);
    font-size: 1rem;
}
.bid-banner {
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 24px 0;
    border: 1px solid;
}
.bid-banner h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-family: var(--font-sans, 'Geist', sans-serif);
    font-weight: 600;
}
.bid-banner p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
}
.bid-banner.tone-success {
    background: rgba(15, 138, 70, 0.08);
    border-color: rgba(15, 138, 70, 0.3);
    color: var(--ink-900);
}
.bid-banner.tone-warning {
    background: rgba(184, 110, 0, 0.08);
    border-color: rgba(184, 110, 0, 0.4);
    color: var(--ink-900);
}
.bid-banner.tone-info {
    background: rgba(31, 75, 255, 0.06);
    border-color: rgba(31, 75, 255, 0.25);
    color: var(--ink-900);
}

/* -------------------------------------------------------------------------
   DAWA-autocomplete dropdown
   ------------------------------------------------------------------------- */
.dawa-results {
    position: absolute;
    z-index: 50;
    background: var(--surface-elev, #fff);
    border: 1px solid var(--border-strong, #CBD8CF);
    border-radius: 8px;
    box-shadow: none;
    max-height: 260px;
    overflow-y: auto;
    min-width: 100%;
    margin-top: 4px;
    font-size: .92rem;
}
.dawa-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--cream-100, #F4F8F5);
}
.dawa-item:last-child { border-bottom: 0; }
.dawa-item.is-active,
.dawa-item:hover {
    background: var(--cobalt-soft, #E6ECFF);
    color: var(--cobalt, #1F4BFF);
}
.dawa-empty {
    padding: 10px 12px;
    color: var(--ink-300, #90A098);
    font-style: italic;
    font-size: .9rem;
}
input[data-dawa] { position: relative; }
input[data-dawa].dawa-valid {
    border-color: var(--moss, #0B7C4D);
    background-image: linear-gradient(transparent, transparent);
}
input[data-dawa].dawa-invalid {
    border-color: var(--amber, #A96800);
}
label:has(input[data-dawa]) { position: relative; }

/* -------------------------------------------------------------------------
   Følg-side (forældrelink) — stop-status badges, kort, ETA
   ------------------------------------------------------------------------- */
.follow-page {
    background: var(--surface-2, #F4F8F5);
    min-height: 100vh;
}
.follow-hero {
    text-align: center;
    padding: 32px 16px 16px;
}
.follow-hero h1 { margin: 0 0 4px; font-size: 1.6rem; }
.follow-hero .muted { font-size: .95rem; }
.follow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px 32px;
}
@media (min-width: 880px) {
    .follow-grid { grid-template-columns: 1fr 1fr; }
}
#follow-map {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    border: 1px solid var(--border-strong, #CBD8CF);
    background: var(--cream-100);
}
.stop-list { list-style: none; padding: 0; margin: 0; }
.stop-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cream-200, #E7EFE9);
}
.stop-row:last-child { border-bottom: 0; }
.stop-icon {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: var(--cream-200);
    color: var(--ink-500);
}
.stop-row.status-done .stop-icon { background: var(--moss-soft, #E3F5EC); color: var(--moss, #0B7C4D); }
.stop-row.status-current .stop-icon {
    background: var(--accent-soft, #E3F5EC);
    color: var(--accent, #0B7C4D);
    animation: stop-pulse 1.6s ease-in-out infinite;
}
.stop-row.status-next .stop-icon { background: var(--cobalt-soft, #E6ECFF); color: var(--cobalt, #1F4BFF); }
.stop-row.status-upcoming .stop-icon { background: var(--cream-200); color: var(--ink-300); }
.stop-body { flex: 1 1 auto; min-width: 0; }
.stop-name { font-weight: 600; margin: 0 0 2px; }
.stop-meta { font-size: .85rem; color: var(--ink-500, #5E6E66); }
.stop-eta { font-size: .9rem; font-weight: 600; color: var(--cobalt, #1F4BFF); margin-top: 2px; }
.stop-row.status-done .stop-eta { color: var(--moss, #0B7C4D); }
.stop-row.status-current .stop-eta { color: var(--accent, #0B7C4D); }
@keyframes stop-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: .85; }
}

/* Tracking-link kort på trip-route.php */
.tracking-card .token-link {
    display: flex;
    gap: 6px;
    align-items: center;
    background: var(--cream-100);
    border: 1px solid var(--cream-200);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--font-mono, monospace);
    font-size: .82rem;
    margin: 6px 0;
    overflow: hidden;
}
.tracking-card .token-link input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--ink-700);
    min-width: 0;
}
.tracking-card .badge-live {
    display: inline-block;
    background: var(--moss-soft, #E3F5EC);
    color: var(--moss, #0B7C4D);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.tracking-card .badge-off {
    display: inline-block;
    background: var(--cream-200);
    color: var(--ink-500);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

/* Chauffør-side (drive.php) */
.drive-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 16px;
    text-align: center;
}
.drive-hero h1 { font-size: 1.4rem; margin-bottom: 4px; }
.drive-status {
    margin: 24px 0;
    padding: 16px;
    background: var(--cream-100);
    border: 1px solid var(--cream-200);
    border-radius: 10px;
    font-size: .95rem;
}
.drive-status.is-active {
    background: var(--moss-soft, #E3F5EC);
    border-color: rgba(15, 138, 70, 0.3);
    color: var(--ink-900);
}
.drive-status.is-error {
    background: var(--danger-soft, #FFE3E4);
    border-color: rgba(224, 27, 36, 0.3);
    color: var(--danger, #D1373D);
}
.drive-btn-big {
    width: 100%;
    padding: 20px;
    font-size: 1.05rem;
    font-weight: 600;
}
.drive-coords {
    font-family: var(--font-mono, monospace);
    font-size: .8rem;
    color: var(--ink-500);
    margin-top: 8px;
}


/* -------------------------------------------------------------------------
   Juridiske sider
   Lange tekstsider: læsbarhedslinje frem for fuld kortbredde.
   ------------------------------------------------------------------------- */
.legal-page .card { padding: clamp(28px, 4vw, 48px); }
.legal-section + .legal-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}
.legal-section h2 {
    font-size: 1.25rem;
    font-variation-settings: "wdth" 102;
    margin-bottom: 14px;
}
.legal-section p,
.legal-section li { max-width: 68ch; color: var(--ink-700); }
.legal-section ul { padding-left: 20px; margin: 0 0 1em; }
.legal-section li { margin-bottom: 8px; }
.legal-missing {
    background: var(--danger-soft);
    color: var(--danger);
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: .85em;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Tilbud på klassens egen side
   ------------------------------------------------------------------------- */
.quote-offer-figure {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}
.quote-offer-figure > div {
    flex: 1 1 140px;
    background: var(--accent-tint);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.quote-offer-figure strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wdth" 104;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    margin-top: 4px;
}

/* Dashboard-agtige sider har mange kort med hver sin overskrift; forsidens
   plakatskala bliver for larmende dér. */
.quote-dashboard-page .card h2,
.dashboard-page .card h2,
.trip-page .card h2 {
    font-size: 1.3rem;
    letter-spacing: -.02em;
    font-variation-settings: "wdth" 102;
}


@keyframes nav-item-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Footeren på mobil: én kolonne til brandet, to til linkene. */
@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr; gap: 44px; }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 520px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-wordmark { font-size: 22vw; bottom: -28px; }
}

/* Respektér brugere der har bedt om mindre bevægelse. */
@media (prefers-reduced-motion: reduce) {
    .nav-links .nav-link { animation: none !important; }
    .brand:hover .brand-logo { transform: none; }
}

/* -------------------------------------------------------------------------
   Prisvisning i beregneren
   ------------------------------------------------------------------------- */
/* display:flex vinder over hidden-attributten, hvis man ikke siger fra —
   og så står der en tom grå kasse, indtil der er en pris. */
.price-preview[hidden] { display: none; }
.price-preview {
    margin-top: 20px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.price-preview[data-state="over"] { background: var(--amber-soft); }
.price-preview-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-500);
}
.price-preview-range {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wdth" 106;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--ink-900);
}
.price-preview-note { font-size: .85rem; color: var(--ink-500); }

/* -------------------------------------------------------------------------
   Cookie-besked
   Samme formsprog som resten: rundet, blød skygge, grøn handling.
   ------------------------------------------------------------------------- */
.cookie-notice {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 80;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.cookie-notice-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 680px;
    width: 100%;
    padding: 18px 20px;
    background: var(--surface-elev);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    /* Starttilstand: lige under kanten, så den glider op */
    transform: translateY(24px);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.cookie-notice.is-visible .cookie-notice-inner {
    transform: translateY(0);
    opacity: 1;
}
.cookie-notice-text strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 3px;
}
.cookie-notice-text p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink-500);
}
.cookie-notice-text a { color: var(--accent); text-decoration: underline; }
.cookie-notice .btn { flex: none; }

@media (max-width: 620px) {
    .cookie-notice-inner { flex-direction: column; align-items: stretch; gap: 14px; }
    .cookie-notice .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-notice-inner { transition: none; transform: none; }
}

/* -------------------------------------------------------------------------
   Hero med baggrundsfoto
   Billedet skal antyde stemningen, ikke konkurrere med overskriften. Derfor
   ligger det bag et kraftigt mint-slør, og teksten beholder sin kontrast.
   ------------------------------------------------------------------------- */
.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    /* Diskret: billedet er kun svagt synligt og trukket mod sidens grønne. */
    opacity: .32;
    filter: saturate(.8);
    transform-origin: 55% 45%;
}
/* Sløret over billedet — uden det falder teksten under kontrastkravet. */
.hero.has-photo::before,
.hero.has-photo::after { z-index: 1; }
.hero.has-photo .hero-grid { position: relative; z-index: 2; }
.hero.has-photo {
    background: var(--accent-soft);
}
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Kraftigst i venstre side, hvor overskriften står — svagest til højre,
       hvor der er plads til at se vognen. */
    background: linear-gradient(
        to right,
        rgba(227, 245, 236, .94) 0%,
        rgba(227, 245, 236, .86) 34%,
        rgba(227, 245, 236, .52) 68%,
        rgba(227, 245, 236, .34) 100%
    );
}

/* Rolig zoom ind og ud. 34 sekunder frem og tilbage — langsomt nok til at
   man ikke ser det ske, kun at billedet lever. */
@media (prefers-reduced-motion: no-preference) {
    .hero-photo img { animation: hero-zoom 34s ease-in-out infinite alternate; }
}
@keyframes hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}

/* -------------------------------------------------------------------------
   Prisberegner i heroen
   ------------------------------------------------------------------------- */
.hero-quote {
    background: var(--surface-elev);
    border-radius: var(--radius-xl);
    padding: clamp(24px, 3vw, 32px);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hero-quote-head h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    margin: 6px 0 0;
    letter-spacing: -.03em;
}
.hero-quote-field { display: flex; flex-direction: column; gap: 7px; }
.hero-quote-field > span {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-500);
}
.hero-quote .price-preview { margin-top: 2px; }
.hero-quote-note {
    text-align: center;
    font-size: .8rem;
    color: var(--ink-300);
}

/* -------------------------------------------------------------------------
   Handlingsknap i navigationen
   Den er der ikke, før man har scrollet: øverst på forsiden står heroens egen
   prisberegner, og en knap der peger på det samme ville være støj.
   ------------------------------------------------------------------------- */
.nav-cta {
    /* Skjult uden at tage plads — og uden at kunne tabbes til. */
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    transition:
        opacity var(--dur) var(--ease-out),
        visibility var(--dur),
        max-width var(--dur-slow) var(--ease-out),
        padding var(--dur) var(--ease-out),
        margin var(--dur) var(--ease-out);
}
.site-nav.is-scrolled .nav-cta {
    opacity: 1;
    visibility: visible;
    max-width: 220px;
    padding-left: 18px;
    /* Plads til pilen. Uden dette overskriver .nav-cta btn-icon's egen
       højrepolstring, og teksten løber ind under pilen ved hover. */
    padding-right: 38px;
    margin-left: 8px;
}

/* I mobilskuffen er der ingen scroll-tilstand — dér skal knappen bare være der. */
@media (max-width: 768px) {
    .nav-cta,
    .site-nav.is-scrolled .nav-cta {
        opacity: 1;
        visibility: visible;
        max-width: none;
        padding-left: 24px;
        padding-right: 42px;
        margin-left: 0;
    }
}

/* I heroens smallere kort skal beløbet kunne stå på én linje. */
.hero-quote .price-preview-range {
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    text-wrap: balance;
}

/* På smalle skærme fylder teksten hele bredden, så et vandret slør rammer
   forkert: overskrift og nøgletal ville lande på den svageste del. Dér skal
   sløret være jævnt og kraftigt — billedet må hellere være svagt end teksten
   svær at læse. */
@media (max-width: 900px) {
    .hero-photo img { opacity: .22; object-position: center 38%; }
    .hero-photo::after {
        background: linear-gradient(
            to bottom,
            rgba(227, 245, 236, .90) 0%,
            rgba(227, 245, 236, .93) 55%,
            rgba(227, 245, 236, .97) 100%
        );
    }
}

/* =========================================================================
   Landingssider
   -------------------------------------------------------------------------
   Sider man lander på fra en søgning. De skal svare på spørgsmålet med det
   samme — derfor er heroen lavere end forsidens, og prisfeltet står ved
   siden af overskriften i stedet for under den.

   Formsproget er det samme som resten af sitet: mint flade med rundet bund,
   bløde skygger frem for kanter, pilleformede knapper. Intet herunder må
   sætte tekst på --accent-bright: den er dekoration, ikke tekstbund.
   ========================================================================= */

.landing-hero {
    position: relative;
    padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 8vw, 88px);
    overflow: hidden;
    isolation: isolate;
    background: var(--accent-soft);
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}
.landing-hero-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.landing-shape { position: absolute; border-radius: 50%; display: block; }
.landing-shape-a {
    width: clamp(180px, 22vw, 320px);
    height: clamp(180px, 22vw, 320px);
    background: var(--accent-bright);
    opacity: .24;
    top: -70px;
    right: clamp(-80px, -4vw, -30px);
}
.landing-shape-b {
    width: clamp(110px, 14vw, 190px);
    height: clamp(110px, 14vw, 190px);
    background: var(--accent);
    opacity: .09;
    bottom: -70px;
    left: -60px;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    position: relative;
    z-index: 2;
}
.landing-hero-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: var(--container-md); }

.landing-hero-text { max-width: 640px; }
.landing-hero-text .breadcrumb { margin-bottom: 20px; }
.landing-hero-text .eyebrow { margin-bottom: 16px; }
.landing-hero-text h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    margin-bottom: 20px;
}
/* RØR IKKE .display-italic her. Den er en MASSIV accent-flade med hvid tekst
   (se tokens-afsnittet), så en "rettelse" af tekstfarven til grøn gør ordet
   usynligt — grønt på grønt. Den almindelige <em> er allerede accent-farvet
   af h1-reglen og har rigelig kontrast mod mintfladen. */
.landing-hero-text .lead { margin-bottom: 28px; }
.landing-hero-text .trust-row { margin-top: 32px; }

/* -------------------------------------------------------------------------
   Nøgletalsbånd — fakta der besvarer søgningen på ét blik
   ------------------------------------------------------------------------- */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    list-style: none;
    padding: 0;
    margin: 0;
}
.stat-band li {
    background: var(--surface-elev);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px 24px 22px;
}
.stat-band strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 104;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink-900);
    margin-bottom: 8px;
}
.stat-band span { display: block; color: var(--ink-500); font-size: .92rem; }

/* -------------------------------------------------------------------------
   Todelt indhold med klæbende sidespalte
   ------------------------------------------------------------------------- */
.landing-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}
.landing-rail {
    position: sticky;
    top: 104px;
    background: var(--surface-elev);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 28px 26px;
}
.landing-rail h3 { font-size: 1.15rem; margin-bottom: 10px; }
.landing-rail p { color: var(--ink-500); font-size: .95rem; }
.landing-rail .btn { width: 100%; justify-content: center; }
.landing-rail ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.landing-rail ul li {
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: .93rem;
    color: var(--ink-700);
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.landing-rail ul li:last-child { border-bottom: 0; }
.landing-rail ul li strong { color: var(--ink-900); white-space: nowrap; }

/* -------------------------------------------------------------------------
   Pristabel — bygget af de rigtige prisområder, ikke af tal i en skabelon
   ------------------------------------------------------------------------- */
.price-table {
    width: 100%;
    /* Uden en min-width klemmer browseren de fire spalter ned i ingenting på
       smalle skærme. Over 768 px scroller tabellen i stedet vandret inde i
       .table-wrap; under 768 px overtager stakken herunder, og dér nulstilles
       min-width igen — ellers ville den skubbe siden ud over kanten. */
    min-width: 520px;
    border-collapse: collapse;
    font-size: .95rem;
    background: var(--surface-elev);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.price-table caption {
    caption-side: bottom;
    text-align: left;
    /* Sidepolstringen er ikke pynt: .table-wrap trækkes 8px ud til hver side
       for at kunne scrolle vandret, og uden den her blev captionens første
       bogstav klippet af. */
    padding: 14px 20px 0;
    color: var(--ink-500);
    font-size: .85rem;
}
.price-table th,
.price-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.price-table thead th {
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-500);
    background: var(--accent-tint);
    font-weight: 400;
    white-space: nowrap;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody th {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink-900);
    /* Basisreglen for `table th` giver enhver th en grå flade. Den er tænkt
       til kolonneoverskrifter; på en rækkeoverskrift bliver den til et
       halvbredt bånd midt i kortet. */
    background: transparent;
}
.price-table td.num {
    font-family: var(--font-mono);
    white-space: nowrap;
    color: var(--ink-900);
}

/* -------------------------------------------------------------------------
   Faktakort: vogntyper, prisdrivere, tjeklister
   ------------------------------------------------------------------------- */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(18px, 2.2vw, 28px);
}
.spec-card {
    background: var(--surface-elev);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.spec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.spec-card h3 { font-size: 1.12rem; margin: 0; }
.spec-card p { margin: 0; color: var(--ink-500); font-size: .95rem; }
.spec-card .badge { align-self: flex-start; }
.spec-card dl {
    margin: 6px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: .88rem;
}
.spec-card dt {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-500);
    align-self: center;
}
.spec-card dd { margin: 0; color: var(--ink-900); }

/* -------------------------------------------------------------------------
   Regelliste — nummererede rækker med et krav pr. linje
   ------------------------------------------------------------------------- */
.rule-list { list-style: none; padding: 0; margin: 0; counter-reset: regel; }
.rule-list > li {
    counter-increment: regel;
    position: relative;
    padding: 26px 0 26px 66px;
    border-bottom: 1px solid var(--border);
}
.rule-list > li:first-child { border-top: 1px solid var(--border); }
.rule-list > li::before {
    content: counter(regel, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 26px;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
    padding: 7px 12px;
}
.rule-list h3 { font-size: 1.1rem; margin-bottom: 6px; }
.rule-list p { margin: 0; color: var(--ink-700); max-width: 68ch; }
.rule-list p + p { margin-top: 8px; }

/* Tjekliste med grønne flueben */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li {
    position: relative;
    padding-left: 34px;
    color: var(--ink-700);
    line-height: 1.55;
}
.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
}
.checklist li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    width: 8px;
    height: 4px;
    border-left: 1.8px solid var(--accent);
    border-bottom: 1.8px solid var(--accent);
    transform: rotate(-45deg);
}

/* Kildeangivelse — små, tydelige henvisninger under et fagligt afsnit */
.source-note {
    margin-top: 28px;
    padding: 18px 22px;
    background: var(--accent-tint);
    border-radius: var(--radius-lg);
    font-size: .88rem;
    color: var(--ink-700);
}
.source-note strong { color: var(--ink-900); }
.source-note ul { margin: 8px 0 0; padding-left: 18px; }
.source-note li { margin-bottom: 4px; }

/* -------------------------------------------------------------------------
   Skoleliste på områdesiderne
   ------------------------------------------------------------------------- */
.school-columns {
    columns: 3 220px;
    column-gap: clamp(24px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.school-columns li {
    break-inside: avoid;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: .93rem;
    color: var(--ink-700);
}
.school-columns li span {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--ink-500);
    text-transform: uppercase;
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Krydslinks mellem landingssiderne
   ------------------------------------------------------------------------- */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
.related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 56px 26px 26px;
    background: var(--surface-elev);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink-900);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.related-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wdth" 104;
    font-size: 1.1rem;
    letter-spacing: -.015em;
}
.related-blurb { color: var(--ink-500); font-size: .92rem; line-height: 1.5; }
.related-arrow {
    position: absolute;
    right: 24px;
    top: 26px;
    color: var(--accent);
    transition: transform var(--dur) var(--ease-out);
}
.related-card:hover .related-arrow { transform: translateX(4px); }

/* Brødtekst i landingssidernes afsnit */
.prose { max-width: 68ch; }
.prose h3 { margin-top: 32px; margin-bottom: 8px; }
.prose ul { padding-left: 20px; color: var(--ink-700); }
.prose li { margin-bottom: 8px; }
.faq-answer p:first-child { margin-top: 16px; }
.faq-answer ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-700); max-width: 60ch; }
.faq-answer li { margin-bottom: 6px; }

/* -------------------------------------------------------------------------
   Responsivt
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .landing-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .landing-hero-text { max-width: none; }
    .landing-split { grid-template-columns: minmax(0, 1fr); }
    .landing-rail { position: static; }
}
@media (max-width: 860px) {
    .landing-shape-a { top: -90px; right: -110px; opacity: .2; }
    .landing-shape-b { display: none; }
    .school-columns { columns: 2 180px; }
}
@media (max-width: 560px) {
    .school-columns { columns: 1; }
    .rule-list > li { padding-left: 0; padding-top: 62px; }
    .rule-list > li::before { top: 24px; }
    .price-table th, .price-table td { padding: 12px 14px; }
}

/* -------------------------------------------------------------------------
   Pristabellen på mobil
   -------------------------------------------------------------------------
   Stylesheetet har en generel regel (afsnit 2121), der på smalle skærme
   stakker ALLE tabeller og skjuler enhver <th> — også rækkens egen. Den er
   lavet til admin-tabellerne, og på pristabellen tog den både kolonne-
   overskrifterne OG områdets navn med sig: tilbage stod tre løse tal uden
   at man kunne se, hvad de betød.

   Her stakkes tabellen derfor bevidst: områdets navn er overskriften på
   hvert kort, og hver celle bærer sin egen etiket via data-label. Det er
   både kortere og mere læsbart end en vandret scrollende tabel på en telefon.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Nulstil min-width, ellers skubber den stakkede tabel siden ud over kanten. */
    .price-table { min-width: 0; }
    .price-table thead { display: none; }

    .price-table tbody tr {
        display: block;
        padding: 18px 20px;
        border-bottom: 1px solid var(--border);
    }
    .price-table tbody tr:last-child { border-bottom: 0; }

    /* Områdets navn SKAL frem igen — det er kortets overskrift. */
    .price-table tbody th {
        display: block;
        padding: 0 0 10px;
        border-bottom: 0;
        font-size: 1.05rem;
    }
    .price-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 5px 0;
        border-bottom: 0;
        white-space: normal;
    }
    .price-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: .66rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--ink-500);
        flex: none;
    }
    .price-table caption { padding: 14px 20px 18px; }
}
/* =========================================================================
   Mobil-gennemgang
   -------------------------------------------------------------------------
   Sitet var bygget desktop-først, og det gav tre slags fejl på en telefon:
   berøringsmål på 23-24 px, sektionsluft der var sat til en 27-tommer skærm,
   og ankerlinks der landede bag den svævende navigationskapsel.

   Rækkefølgen herunder er bevidst: først det der gør siden BRUGBAR med en
   tommelfinger, derefter rytmen, og til sidst det kosmetiske.
   ========================================================================= */

/* --- 1. Intet må lande bag den klæbende kapsel ---------------------------
   Navigationen svæver over indholdet. Uden scroll-margin lander en
   ankeroverskrift ("Sådan virker det", "Galleri", "Kontakt") lige under
   kapslen og ser ud til at mangle. Gælder alle skærme — også desktop. */
:target,
[id]:not(body):not(html) {
    scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* --- 2. Berøringsmål ----------------------------------------------------
   Apple og Google anbefaler begge ~44 px. Footerens links målte 24 px og
   kontaktlinkene 23 px — de kunne rammes med en mus, ikke med en tommel. */
@media (max-width: 768px) {
    .footer-col ul li { margin-bottom: 0; }
    .footer-col ul li a,
    .footer-contact li a,
    .contact-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* Listerne må ikke blive dobbelt så lange af den grund: den luft, der før
       lå som margin MELLEM punkterne, ligger nu inde i selve målet. */
    .footer-col ul { display: flex; flex-direction: column; }
}

/* --- 3. Lodret rytme ----------------------------------------------------
   clamp(72px, 12vw, 120px) rammer sit MINIMUM på en telefon: 12vw er kun
   45 px ved 375 px bredde, så hver eneste sektion fik 72 px i begge ender.
   Det er en halv skærm luft pr. overgang. Her sættes et lavere gulv på små
   skærme; desktop er urørt. */
@media (max-width: 600px) {
    .section { padding-top: 56px; padding-bottom: 56px; }
    .section-head { margin-bottom: 28px; }
    .page-hero { padding-top: 40px; padding-bottom: 40px; }

    /* Kortgitre: mindre luft mellem kort, når de alligevel ligger over
       hinanden i én kolonne. */
    .grid-3, .grid-2, .grid-4,
    .spec-grid, .related-grid, .showcase-grid { gap: 16px; }

    /* Trinlisten på forsiden står to og to; 32 px mellem dem er rigeligt. */
    .steps { gap: 24px 16px; }
}

/* --- 4. Læsbarhed -------------------------------------------------------
   11,5 px versaler med bogstavafstand er i underkanten på en telefon. */
@media (max-width: 600px) {
    .eyebrow { font-size: .75rem; }
    .footer-legal { font-size: .75rem; line-height: 1.6; }
}

/* --- 5. Cookie-beskeden må ikke æde den første skærm --------------------
   Den er en OPLYSNING, ikke en samtykkeport, men den fyldte 173 px forneden
   og lagde sig hen over heroens nøgletal. På en telefon strammes den op. */
@media (max-width: 600px) {
    .cookie-notice { left: 12px; right: 12px; bottom: 12px; }
    .cookie-notice-inner { padding: 16px 18px; gap: 12px; }
    .cookie-notice-text { font-size: .82rem; line-height: 1.5; }
    .cookie-notice h4, .cookie-notice strong { font-size: .95rem; }
}

/* --- 6. Overskrifter må ikke knække grimt ------------------------------- */
@media (max-width: 600px) {
    h1, h2 { text-wrap: balance; hyphens: none; }
    .landing-hero-text h1,
    .hero-text h1 { overflow-wrap: break-word; }
}

/* --- 7. Resten af berøringsmålene + footerens længde --------------------
   44 px-reglen gjorde footerens links tappebare, men den gjorde også
   footeren ~350 px længere. Luften omkring dem strammes derfor tilsvarende,
   så nettoresultatet er en footer i nogenlunde samme længde — bare med mål,
   man kan ramme. */
@media (max-width: 768px) {
    .brand { min-height: 44px; }
    .cookie-notice .btn { min-height: 46px; }
}
@media (max-width: 600px) {
    .site-footer { padding-top: 44px; }
    .footer-top { gap: 32px; padding-bottom: 32px; }
    .footer-cols { gap: 22px; }
    .footer-col h4 { margin-bottom: 10px; }
    .footer-claim { margin-bottom: 10px; }
    .footer-sub { margin-bottom: 20px; }
    .footer-bottom { padding: 18px 0 22px; }
}

/* --- 8. De sidste to ting der så rodede ud ------------------------------ */
@media (max-width: 600px) {
    /* Nøgletalsbåndet er en flex-wrap med tre punkter i hver sin bredde, så
       den knækkede skævt: ét tal alene på første række, to på næste. Et
       gitter med faste spalter stiller dem op under hinanden i stedet. */
    .trust-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 14px;
        margin-top: 28px;
    }
    .trust-row li strong { font-size: 1.45rem; }

    /* Beregneren havde 32 px polstring hele vejen rundt på en 375 px skærm —
       det efterlod 271 px til selve felterne. */
    .wizard { padding: 22px 20px; }
    /* Frem/tilbage deler rækken ligeligt i stedet for at klumpe i hver sin
       ende med et hul i midten. */
    .wizard-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* --- 9. Åbne vælgerlister må hænge ud over det, der kommer efter --------
   Tredje gang samme fælde: `.container` sætter `position: relative` og
   `z-index: 2` og laver dermed en STAKKONTEKST. Skolevælgerens liste har
   `z-index: 30`, men det tal gælder kun INDEN I sektionen — udadtil
   konkurrerer hele sektionen som "2". Footeren er også "2" og ligger senere i
   DOM'en, så den vandt, og de nederste forslag forsvandt bag den mørkegrønne
   plade.

   Løsningen er at løfte den sektion, der lige nu HAR en åben liste — ikke at
   skrue på footeren, som deler niveau med papirkornet på body::before.
   `:has()` er understøttet i alle nuværende browsere (efterprøvet med
   CSS.supports i den browser sitet blev testet i); i en browser uden den
   opfører listen sig som før, altså stadig brugbar. */
.container:has(.gym-picker-results:not([hidden])),
.container:has(.dawa-results:not([hidden])),
.hero:has(.gym-picker-results:not([hidden])),
.landing-hero:has(.gym-picker-results:not([hidden])) {
    z-index: 40;
}