/*
 * Ticketo for arrangører: fælles stylesheet til /organizer og søgesiderne.
 *
 * Siderne indlæser KUN denne fil, ikke dist/output.css og index.css.
 * index.css sætter font-family på * og har en .reveal-regel, der skjuler
 * indhold; begge dele har ødelagt organizer.html før.
 *
 * Formsprog, låst for alle siderne:
 *   Ét tema: lyst.
 *   Én accent: #6C63FF til store tal og fremhævede ord. Knapper bruger den
 *   mørkere #5A52D5, fordi hvid tekst på #6C63FF kun giver 4,3:1.
 *   Radier: fliser 24px, knapper og ikonfelter pille, felter 12px.
 *   Bevægelse: indhold er ALTID synligt som standard. Fade ind ved scroll
 *   findes kun, hvor browseren kan scroll-drevne animationer, og kun uden
 *   prefers-reduced-motion. Ingen scroll-listeners.
 *
 * Skriften er selvhostet (OFL, se /fonts/OFL.txt), så siden ikke kontakter
 * Google, før brugeren har givet samtykke.
 */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #fbfbfd;
    --bg-alt: #f5f5f7;
    --flade: #fefeff;
    --tekst: #1d1d1f;
    --tekst-2: #515154;
    --tekst-3: #6e6e73;
    --streg: rgba(29, 29, 31, .10);
    --streg-2: rgba(29, 29, 31, .16);
    --accent: #6C63FF;
    --knap: #5A52D5;
    --knap-hover: #4B44B8;
    --accent-tone: #f1f0ff;
    --moerk: #1d1d1f;
    --moerk-tekst: #f5f5f7;
    --moerk-tekst-2: #a1a1a6;

    --radius-flise: 24px;
    --radius-felt: 12px;
    --radius-pille: 999px;

    --skygge: 0 1px 2px rgba(29, 29, 31, .05), 0 18px 48px -22px rgba(64, 56, 170, .28);
    --skygge-lille: 0 1px 2px rgba(29, 29, 31, .06), 0 6px 18px -10px rgba(64, 56, 170, .25);

    --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bredde: 1160px;
    --kant: 20px;
    --nav-h: 64px;
    --blid: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 768px) {
    :root { --kant: 32px; }
}

/* Reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--tekst);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid rgba(90, 82, 213, .55);
    outline-offset: 3px;
}

.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;
}

.m-spring {
    position: absolute; left: 12px; top: -100px; z-index: 200;
    background: var(--tekst); color: var(--bg); padding: 10px 16px;
    border-radius: var(--radius-pille); font-weight: 700;
}
.m-spring:focus { top: 12px; }

/* Ikoner fra /ikoner.svg (lucide). Stregen styres her, ikke i sprite-filen. */
.ik {
    width: 1.25em; height: 1.25em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Cookiebanneret sætter sin egen skrift, som ikke indlæses på disse sider. */
.cookie-banner, .cookie-banner button { font-family: var(--font) !important; }

/* Layout ----------------------------------------------------------------- */

.m-wrap {
    width: 100%;
    max-width: calc(var(--bredde) + 2 * var(--kant));
    margin-inline: auto;
    padding-inline: var(--kant);
}

.m-smal { max-width: calc(820px + 2 * var(--kant)); }

.m-sek { padding-block: clamp(72px, 9vw, 128px); }
.m-sek--taet { padding-block: clamp(48px, 6vw, 80px); }
.m-sek--alt { background: var(--bg-alt); }

.m-midt { text-align: center; }
.m-midt .m-lead { margin-inline: auto; }

/* Typografi -------------------------------------------------------------- */

.m-h1 {
    font-size: clamp(2.5rem, 1.55rem + 3.7vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    text-wrap: balance;
}

.m-h2 {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem);
    line-height: 1.07;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-wrap: balance;
}

.m-h2--lille { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); }

.m-h3 {
    font-size: clamp(1.25rem, 1.12rem + .55vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 750;
}

.m-lead {
    font-size: clamp(1.125rem, 1.03rem + .42vw, 1.375rem);
    line-height: 1.5;
    color: var(--tekst-2);
    max-width: 36em;
    text-wrap: pretty;
}

.m-lead--efter { margin-top: 20px; }

.m-eyebrow {
    display: inline-block;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--knap);
}

.m-accent { color: var(--accent); }

/* Skriftens punktum har meget luft foran sig, når bogstaverne er rykket
   tæt sammen i store overskrifter. */
.m-p { margin-left: -0.08em; }

.m-billednote { margin-top: 14px; font-size: .8125rem; color: var(--tekst-3); }

.m-fodnoter {
    margin-top: 40px;
    display: grid;
    gap: 6px;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--tekst-3);
    max-width: 70em;
}

.m-fodnoter a { text-decoration: underline; text-underline-offset: 2px; }
.m-fodnoter a:hover { color: var(--tekst); }

sup.m-fn {
    font-size: .6em;
    line-height: 0;
    vertical-align: super;
    color: var(--tekst-3);
    font-weight: 700;
    margin-left: 1px;
}

.m-tal { font-variant-numeric: tabular-nums; }

/* Knapper og links -------------------------------------------------------- */

.m-knap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: 0 1.6rem;
    border-radius: var(--radius-pille);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .15s var(--blid);
}

.m-knap:active { transform: scale(.98); }

.m-knap--primaer {
    background: var(--knap);
    color: #fff;
    box-shadow: 0 10px 26px -12px rgba(90, 82, 213, .75);
}
.m-knap--primaer:hover { background: var(--knap-hover); }

.m-knap--sekundaer {
    color: var(--tekst);
    box-shadow: inset 0 0 0 1px var(--streg-2);
}
.m-knap--sekundaer:hover { background: rgba(29, 29, 31, .04); }

.m-knap--lille {
    min-height: 40px;
    padding: 0 1.1rem;
    font-size: .9375rem;
    box-shadow: none;
}

.m-knap .ik { width: 1.1em; height: 1.1em; transition: transform .2s var(--blid); }
.m-knap:hover .ik--pil { transform: translateX(3px); }

.m-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--knap);
    font-weight: 700;
}
.m-link .ik { width: 1.05em; height: 1.05em; transition: transform .2s var(--blid); }
.m-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.m-link:hover .ik { transform: translateX(3px); }

/* Navigation (delt, data-mk="nav") ---------------------------------------- */

.m-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--nav-h);
    background: rgba(251, 251, 253, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}

.m-nav.er-rullet { border-bottom-color: var(--streg); }

@media (prefers-reduced-transparency: reduce) {
    .m-nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.m-nav__ind {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.m-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.1875rem;
    letter-spacing: -0.025em;
}

.m-logo img { width: 30px; height: 30px; }

.m-nav__links,
.m-nav__hoejre { display: none; align-items: center; gap: 2px; }

.m-nav__links a,
.m-nav__login {
    padding: 8px 12px;
    border-radius: var(--radius-pille);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--tekst-2);
    transition: color .15s, background-color .15s;
}

.m-nav__links a:hover,
.m-nav__login:hover { color: var(--tekst); background: rgba(29, 29, 31, .05); }

.m-nav__links a[aria-current="page"] { color: var(--tekst); }

.m-nav__hoejre { gap: 8px; }

.m-nav__menuknap {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-pille);
    margin-right: -10px;
}
.m-nav__menuknap .ik { width: 24px; height: 24px; }
.m-nav__menuknap .ik--luk { display: none; }
.m-nav__menuknap[aria-expanded="true"] .ik--menu { display: none; }
.m-nav__menuknap[aria-expanded="true"] .ik--luk { display: block; }

@media (min-width: 1040px) {
    .m-nav__links, .m-nav__hoejre { display: flex; }
    .m-nav__menuknap { display: none; }
}

.m-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 59;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--streg);
    padding: 8px var(--kant) 24px;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s, transform .2s var(--blid), visibility 0s linear .2s;
}

.m-menu.er-aaben {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s, transform .2s var(--blid);
}

.m-menu a:not(.m-knap) {
    display: block;
    padding: 14px 2px;
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--streg);
}

.m-menu .m-knap { width: 100%; margin-top: 16px; }

@media (min-width: 1040px) { .m-menu { display: none; } }

/* Hero -------------------------------------------------------------------- */

.m-hero {
    padding-top: clamp(36px, 5.5vw, 88px);
    padding-bottom: clamp(48px, 6vw, 96px);
    overflow: hidden;
}

.m-hero__gitter {
    display: grid;
    gap: 44px;
    align-items: center;
}

@media (min-width: 1000px) {
    .m-hero__gitter {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 64px;
    }
}

.m-hero__tekst .m-h1 { margin-top: 14px; }
.m-hero__tekst .m-lead { margin-top: 22px; }

.m-hero__knapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

@media (max-width: 599px) {
    .m-hero__knapper .m-knap { flex: 1 1 100%; }
}

.m-hero__billede {
    border-radius: 20px;
    overflow: hidden;
    background: var(--flade);
    box-shadow: var(--skygge);
    outline: 1px solid var(--streg);
    outline-offset: -1px;
}

@media (max-width: 699px) {
    .m-hero__billede { max-width: 340px; margin-inline: auto; border-radius: 28px; }
}

@media (min-width: 1000px) {
    .m-hero__gitter .m-hero__billede { margin-right: calc(-1 * min(88px, 5vw)); }
}

/* Centreret hero (Apple-mønster): tekst øverst, stort produktbillede under. */
.m-hero__tekst--midt { text-align: center; max-width: 1000px; margin-inline: auto; }
.m-hero__tekst--midt .m-lead { margin-inline: auto; }
.m-hero__tekst--midt .m-hero__knapper { justify-content: center; }

.m-hero__billede--bred {
    max-width: 1040px;
    margin: clamp(40px, 5vw, 64px) auto 0;
}

.m-blok { display: block; }

@media (prefers-reduced-motion: no-preference) {
    .m-hero__tekst > * { animation: m-op .9s var(--blid) both; animation-delay: calc(var(--i, 0) * 70ms); }
    .m-hero__billede { animation: m-op 1.1s var(--blid) .12s both; }
}

/* Kun transform, ikke opacity: heroen maa aldrig vaere usynlig, og LCP
   maa ikke vente paa en animation. */
@keyframes m-op {
    from { transform: translateY(12px); }
    to { transform: none; }
}

/* Hero med telefonbillede (søgesiderne) ------------------------------------- */

.m-h1--side { font-size: clamp(2.4rem, 1.55rem + 3.1vw, 3.9rem); }

@media (min-width: 1000px) {
    .m-hero__gitter--telefon { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; }
    .m-hero__gitter--telefon .m-hero__billede { margin-right: 0; }
}

.m-hero__billede--telefon {
    width: 100%;
    max-width: 360px;
    justify-self: center;
    border-radius: 28px;
}

.m-hero__tekst .m-kruemme + .m-h1 { margin-top: 18px; }

/* Brødkrumme -------------------------------------------------------------- */

.m-kruemme {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    color: var(--tekst-3);
}
.m-kruemme a:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.m-kruemme .ik { width: 14px; height: 14px; }
.m-kruemme--midt { justify-content: center; }

.m-tabel-ramme--hero {
    max-width: 1000px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    box-shadow: var(--skygge), inset 0 0 0 1px var(--streg);
}

.m-tabel-ramme--hero + .m-fodnoter { max-width: 1000px; margin-inline: auto; margin-top: 20px; }

/* Strimmel med rigtige events ------------------------------------------- */

.m-strimmel {
    --gap: 2.25rem;
    border-top: 1px solid var(--streg);
    border-bottom: 1px solid var(--streg);
    display: flex;
    flex-direction: column;
}

.m-strimmel__label {
    flex: none;
    padding: 12px var(--kant) 0;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--tekst-3);
    white-space: nowrap;
}

.m-strimmel__vindue {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.m-strimmel__spor {
    display: flex;
    align-items: center;
    gap: var(--gap);
    width: max-content;
    height: 100%;
    padding-left: var(--kant);
}

.m-strimmel__spor.koerer {
    padding-left: 0;
    will-change: transform;
    animation: m-glid var(--dur, 120s) linear infinite;
}

.m-strimmel__vindue:hover .m-strimmel__spor.koerer,
.m-strimmel__vindue:focus-within .m-strimmel__spor.koerer { animation-play-state: paused; }

@keyframes m-glid {
    to { transform: translate3d(calc(-1 * var(--loop, 0px)), 0, 0); }
}

.m-strimmel__liste {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.m-strimmel__chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 56px;
    font-size: .9375rem;
    white-space: nowrap;
    color: var(--tekst);
}

.m-strimmel__chip img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-alt);
}

.m-strimmel__titel { font-weight: 650; transition: color .15s; }
.m-strimmel__chip:hover .m-strimmel__titel { color: var(--knap); }
.m-strimmel__by { color: var(--tekst-3); }
.m-strimmel__reserve { font-weight: 600; color: var(--tekst-2); white-space: nowrap; }

@media (min-width: 640px) {
    .m-strimmel { flex-direction: row; align-items: center; }
    .m-strimmel__label {
        padding: 0 20px 0 var(--kant);
        height: 56px;
        display: flex;
        align-items: center;
        border-right: 1px solid var(--streg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .m-strimmel__spor.koerer { animation: none; will-change: auto; padding-left: var(--kant); }
    .m-strimmel__vindue {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .m-strimmel__vindue::-webkit-scrollbar { display: none; }
}

/* Stort tal (gratis events) ---------------------------------------------- */

.m-udsagn {
    display: grid;
    gap: 28px;
    align-items: center;
}

@media (min-width: 1000px) {
    .m-udsagn { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 72px; }
}

.m-stort-tal {
    font-size: clamp(6.5rem, 3rem + 15vw, 15rem);
    line-height: .86;
    font-weight: 800;
    letter-spacing: -0.065em;
    color: var(--accent);
    white-space: nowrap;
}

.m-stort-tal span { font-size: .36em; letter-spacing: -0.03em; margin-left: .14em; }

.m-fakta {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.m-fakta li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 600;
}

.m-fakta .ik { color: var(--knap); margin-top: 2px; }

.m-regnestykke {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--radius-felt);
    background: var(--flade);
    box-shadow: inset 0 0 0 1px var(--streg);
    font-size: 1rem;
    color: var(--tekst-2);
}

.m-regnestykke strong { color: var(--tekst); }

.m-udsagn .m-link { margin-top: 24px; }

/* Bento ------------------------------------------------------------------- */

.m-bento {
    display: grid;
    gap: 16px;
    margin-top: 48px;
}

@media (min-width: 900px) {
    .m-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .m-flise--bred { grid-column: span 2; }
}

.m-flise {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    border-radius: var(--radius-flise);
    background: var(--bg-alt);
    overflow: hidden;
}

.m-flise__tekst { padding: 32px 32px 0; }
.m-flise__tekst p { margin-top: 10px; color: var(--tekst-2); max-width: 30em; }
.m-flise__tekst .m-fakta { margin-top: 20px; gap: 10px; font-size: .9375rem; }

.m-flise .m-flise__tal {
    margin-top: 0;
    font-size: clamp(3.5rem, 2.4rem + 3vw, 5.25rem);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--accent);
    margin-bottom: 14px;
}

.m-flise__billede { margin-top: auto; padding: 28px 32px 0; }

.m-flise__billede img {
    border-radius: 14px 14px 0 0;
    box-shadow: var(--skygge-lille);
}

/* Et bredt skærmbillede må ikke gøre rækken så høj, at nabofliserne står
   tomme. Toppen af billedet er den vigtige del. */
.m-flise--bred:not(.m-flise--side) .m-flise__billede img {
    max-height: 340px;
    width: 100%;
    object-fit: cover;
    object-position: top left;
}

.m-flise__billede--midt { display: flex; justify-content: center; }
.m-flise__billede--midt img { max-height: 300px; width: auto; }

.m-flise__billede--logoer { padding: 28px 32px 36px; }
.m-flise__billede--logoer img { box-shadow: none; border-radius: 0; height: 30px; width: auto; }

.m-flise__fod { margin-top: auto; padding: 24px 32px 32px; }
.m-flise__billede--logoer + .m-flise__fod { padding-top: 0; }
.m-flise__billede--logoer { margin-top: 0; }

.m-flise--tone { background: var(--accent-tone); }

.m-flise--moerk { background: var(--moerk); color: var(--moerk-tekst); }
.m-flise--moerk p { color: var(--moerk-tekst-2); }

@media (min-width: 900px) {
    .m-flise--side { flex-direction: row; align-items: stretch; }
    .m-flise--side .m-flise__tekst { flex: 1 1 50%; padding: 40px; align-self: center; }
    .m-flise--side .m-flise__billede { flex: 1 1 50%; margin-top: 0; padding: 32px 32px 0 0; display: flex; align-items: flex-end; justify-content: center; }
}

/* Alle funktioner --------------------------------------------------------- */

.m-alle { margin-top: 40px; }

.m-alle > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 1.3rem;
    border-radius: var(--radius-pille);
    box-shadow: inset 0 0 0 1px var(--streg-2);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background-color .2s;
}

.m-alle > summary::-webkit-details-marker { display: none; }
.m-alle > summary:hover { background: rgba(29, 29, 31, .04); }
.m-alle > summary .ik { transition: transform .2s var(--blid); }
.m-alle[open] > summary .ik { transform: rotate(180deg); }

.m-alle__gitter {
    display: grid;
    gap: 36px 32px;
    margin-top: 36px;
}

@media (min-width: 640px) { .m-alle__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .m-alle__gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.m-alle__gitter h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--streg);
    font-size: .9375rem;
    font-weight: 800;
}

.m-alle__gitter h3 .ik { color: var(--knap); width: 18px; height: 18px; }

.m-alle__gitter ul {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    font-size: .9375rem;
    color: var(--tekst-2);
    line-height: 1.5;
}

/* Pris og beregner -------------------------------------------------------- */

.m-pris {
    display: grid;
    gap: 44px;
}

@media (min-width: 1000px) {
    .m-pris { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: start; }
    .m-beregner { position: sticky; top: calc(var(--nav-h) + 24px); }
}

.m-satser { margin-top: 36px; }

.m-satser > div {
    display: grid;
    gap: 4px;
    padding: 16px 0;
}

.m-satser > div + div { border-top: 1px solid var(--streg); }

@media (min-width: 640px) {
    .m-satser > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; }
}

.m-satser dt { font-weight: 700; }
.m-satser dd { color: var(--tekst-2); }

.m-beregner {
    background: var(--flade);
    border-radius: var(--radius-flise);
    padding: 28px;
    box-shadow: var(--skygge);
    outline: 1px solid var(--streg);
    outline-offset: -1px;
}

@media (min-width: 480px) { .m-beregner { padding: 32px; } }

.m-beregner__titel { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }

.m-felt { margin-top: 22px; }

.m-felt label,
.m-felt .m-felt__label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--tekst-2);
    margin-bottom: 8px;
}

.m-input-kr { position: relative; }

.m-input {
    width: 100%;
    height: 56px;
    padding: 0 56px 0 16px;
    border-radius: var(--radius-felt);
    border: 1px solid var(--streg-2);
    background: var(--flade);
    font-size: 1.25rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color .15s, box-shadow .15s;
}

.m-input::-webkit-outer-spin-button,
.m-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.m-input:focus {
    outline: none;
    border-color: var(--knap);
    box-shadow: 0 0 0 4px rgba(90, 82, 213, .18);
}

.m-input-kr span {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--tekst-3);
    pointer-events: none;
}

.m-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.m-chip {
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pille);
    box-shadow: inset 0 0 0 1px var(--streg-2);
    font-size: .9375rem;
    font-weight: 650;
    transition: background-color .15s, color .15s;
}

.m-chip:hover { background: rgba(29, 29, 31, .04); }
.m-chip[aria-pressed="true"] { background: var(--tekst); color: var(--bg); box-shadow: none; }

.m-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: var(--radius-pille);
    background: var(--bg-alt);
}

.m-segment button {
    min-height: 40px;
    border-radius: var(--radius-pille);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--tekst-2);
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.m-segment button[aria-pressed="true"] {
    background: var(--flade);
    color: var(--tekst);
    box-shadow: 0 1px 3px rgba(29, 29, 31, .14);
}

.m-afkryds {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--tekst-2);
    cursor: pointer;
}

.m-afkryds input { width: 18px; height: 18px; accent-color: var(--knap); }

.m-resultat { margin-top: 24px; border-top: 1px solid var(--streg); }

.m-resultat > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
}

.m-resultat > div + div { border-top: 1px solid var(--streg); }
.m-resultat dt { color: var(--tekst-2); }
.m-resultat dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-resultat .m-stor { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.m-resultat .m-stor.m-accent { color: var(--knap); }

.m-billetto-linje {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-felt);
    background: var(--bg-alt);
    font-size: .9375rem;
    color: var(--tekst-2);
}

.m-billetto-linje strong { color: var(--tekst); font-variant-numeric: tabular-nums; }

.m-note {
    margin-top: 14px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--tekst-3);
}

.m-beregner .m-knap { width: 100%; margin-top: 22px; }

.m-betalingsmetoder { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--streg); }
.m-betalingsmetoder p { font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.m-betalingsmetoder img { margin-top: 10px; height: 26px; width: auto; }

/* Sammenligning (to kolonner) --------------------------------------------- */

.m-sammen {
    margin-top: 40px;
    border-radius: var(--radius-flise);
    background: var(--flade);
    box-shadow: inset 0 0 0 1px var(--streg);
    overflow: hidden;
}

.m-sammen table { width: 100%; font-size: .9375rem; }
.m-sammen caption { padding: 20px 22px 0; text-align: left; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }
.m-sammen th, .m-sammen td { padding: 14px 22px; text-align: left; vertical-align: top; }
.m-sammen thead th { font-size: .8125rem; font-weight: 700; color: var(--tekst-3); padding-top: 16px; padding-bottom: 8px; }
.m-sammen tbody tr { border-top: 1px solid var(--streg); }
.m-sammen tbody th { font-weight: 700; width: 30%; }
.m-sammen .m-os { font-weight: 700; color: var(--tekst); }
.m-sammen .m-dem { color: var(--tekst-2); }

@media (max-width: 639px) {
    .m-sammen thead { display: none; }
    .m-sammen tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
    .m-sammen tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 4px; }
    .m-sammen tbody td { padding-top: 4px; }
    .m-sammen tbody td::before {
        content: attr(data-hvem);
        display: block;
        font-size: .75rem;
        font-weight: 700;
        color: var(--tekst-3);
        margin-bottom: 2px;
    }
}

/* Fuld tabel over udbydere (sammenlign-siden) */
.m-tabel-ramme {
    margin-top: 32px;
    border-radius: var(--radius-flise);
    background: var(--flade);
    box-shadow: inset 0 0 0 1px var(--streg);
    overflow-x: auto;
}

.m-tabel { width: 100%; min-width: 560px; font-size: .9375rem; }
.m-tabel th, .m-tabel td { padding: 14px 20px; text-align: left; vertical-align: top; }
.m-tabel thead th { font-size: .8125rem; font-weight: 700; color: var(--tekst-3); }
.m-tabel tbody tr { border-top: 1px solid var(--streg); }
.m-tabel tbody th { font-weight: 700; }
.m-tabel td { color: var(--tekst-2); }
.m-tabel .m-tal { white-space: nowrap; }
.m-tabel a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--streg-2); }
.m-tabel a:hover { color: var(--knap); }
.m-tabel .m-os-raekke { background: var(--accent-tone); }
.m-tabel .m-os-raekke td { color: var(--tekst); font-weight: 650; }

/* To kolonner passer på en telefon uden at skulle scrolle sidelæns. */
.m-tabel--smal { min-width: 0; }

/* Flere kolonner stables på telefon: punktet på sin egen linje, værdierne
   side om side med en lille etiket fra data-hvem. */
@media (max-width: 639px) {
    .m-tabel--stak { min-width: 0; }
    .m-tabel--stak thead { display: none; }
    .m-tabel--stak tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .m-tabel--stak .m-tal { white-space: normal; }
    .m-tabel--stak tbody th { grid-column: 1 / -1; padding-bottom: 4px; }
    .m-tabel--stak tbody td { padding-top: 4px; }
    .m-tabel--stak tbody td::before {
        content: attr(data-hvem);
        display: block;
        font-size: .75rem;
        font-weight: 700;
        color: var(--tekst-3);
        margin-bottom: 2px;
    }
}

/* Liste med links (til din type event) ---------------------------------- */

.m-typer {
    display: grid;
    column-gap: 56px;
    margin-top: 40px;
}

@media (min-width: 800px) { .m-typer { grid-template-columns: 1fr 1fr; } }

.m-typer a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--streg);
}

.m-typer strong { display: block; font-weight: 750; font-size: 1.0625rem; letter-spacing: -0.01em; transition: color .15s; }
.m-typer small { display: block; margin-top: 2px; font-size: .9375rem; color: var(--tekst-2); }
.m-typer .ik--pil { color: var(--tekst-3); transition: transform .2s var(--blid), color .15s; }
.m-typer a:hover strong { color: var(--knap); }
.m-typer a:hover .ik--pil { transform: translateX(3px); color: var(--knap); }

.m-ikonfelt {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pille);
    background: var(--accent-tone);
    color: var(--knap);
}

.m-ikonfelt .ik { width: 22px; height: 22px; }

/* Funktioner på søgesiderne ------------------------------------------------- */

.m-funk {
    display: grid;
    gap: 32px 56px;
    margin-top: 44px;
}

@media (min-width: 800px) { .m-funk { grid-template-columns: 1fr 1fr; } }

.m-funk li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.m-funk h3 { font-size: 1.1875rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; margin-top: 10px; }
.m-funk p { margin-top: 6px; color: var(--tekst-2); }

/* Tekst og billede side om side -------------------------------------------- */

.m-split {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 1000px) {
    .m-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
    .m-split--omvendt > :first-child { order: 2; }
}

.m-split p + p { margin-top: 14px; }
.m-split .m-brod { color: var(--tekst-2); }

.m-billede-ramme {
    border-radius: var(--radius-flise);
    overflow: hidden;
    background: var(--bg-alt);
    box-shadow: var(--skygge);
    outline: 1px solid var(--streg);
    outline-offset: -1px;
}

.m-billede-ramme--telefon { max-width: 340px; margin-inline: auto; border-radius: 28px; }

/* Typiske events som piller ------------------------------------------------ */

.m-piller { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.m-piller li {
    padding: 10px 16px;
    border-radius: var(--radius-pille);
    background: var(--flade);
    box-shadow: inset 0 0 0 1px var(--streg);
    font-weight: 600;
    font-size: .9375rem;
}

/* Et regnestykke for en bestemt type event --------------------------------- */

.m-regnekort {
    background: var(--flade);
    border-radius: var(--radius-flise);
    padding: 28px;
    box-shadow: var(--skygge);
    outline: 1px solid var(--streg);
    outline-offset: -1px;
}

.m-regnekort__titel { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.015em; }
.m-regnekort .m-resultat { margin-top: 16px; }

/* Trin -------------------------------------------------------------------- */

.m-trin { margin-top: 40px; }

.m-trin li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid var(--streg);
}

.m-trin__nr {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pille);
    background: var(--tekst);
    color: var(--bg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.m-trin h3 { font-size: 1.1875rem; font-weight: 750; letter-spacing: -0.015em; margin-top: 6px; }
.m-trin p { margin-top: 6px; color: var(--tekst-2); }
.m-trin .m-trin__tid { margin-top: 10px; font-size: .875rem; font-weight: 650; color: var(--tekst-3); }

.m-trin-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding-top: 28px;
    border-top: 1px solid var(--streg);
}

.m-trin-cta p { font-weight: 700; }

/* Hvem står bag ------------------------------------------------------------- */

.m-bag {
    display: grid;
    gap: 36px;
}

@media (min-width: 1000px) {
    .m-bag { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
}

.m-bag p { margin-top: 16px; color: var(--tekst-2); max-width: 36em; }

.m-bag dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
}

.m-bag dt { font-size: .8125rem; font-weight: 650; color: var(--tekst-3); }
.m-bag dd { margin-top: 3px; font-weight: 700; }
.m-bag dd a { color: var(--knap); }
.m-bag dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Rigtige events ------------------------------------------------------------ */

.m-events {
    display: grid;
    gap: 20px;
    margin-top: 36px;
}

@media (min-width: 700px) { .m-events { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.m-event {
    display: block;
    border-radius: var(--radius-flise);
    overflow: hidden;
    background: var(--flade);
    outline: 1px solid var(--streg);
    outline-offset: -1px;
    transition: transform .25s var(--blid), box-shadow .25s;
}

.m-event img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--bg-alt);
}

.m-event div { padding: 16px 18px 20px; }
.m-event h3 { font-size: 1.0625rem; font-weight: 750; line-height: 1.3; letter-spacing: -0.01em; }
.m-event p { margin-top: 6px; font-size: .875rem; color: var(--tekst-3); }
.m-event:hover { transform: translateY(-2px); box-shadow: var(--skygge-lille); }

/* FAQ ------------------------------------------------------------------------ */

.m-faq { margin-top: 40px; }

.m-faq details { border-top: 1px solid var(--streg); }
.m-faq details:last-child { border-bottom: 1px solid var(--streg); }

.m-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}

.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary .ik { color: var(--tekst-3); transition: transform .2s var(--blid); }
.m-faq details[open] summary .ik { transform: rotate(180deg); }

.m-faq .m-svar { padding: 0 0 24px; color: var(--tekst-2); max-width: 65ch; }
.m-faq .m-svar p + p { margin-top: 10px; }

.m-faq .m-svar a,
.m-prosa a {
    color: var(--knap);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(90, 82, 213, .35);
}

/* CTA-bånd ------------------------------------------------------------------ */

.m-cta { text-align: center; }
.m-cta .m-lead { margin: 18px auto 0; }
.m-cta .m-knap { margin-top: 30px; }

/* Prosa (SEO-tekst) ----------------------------------------------------------- */

.m-prosa { max-width: 760px; }
.m-prosa h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.m-prosa h3 { font-size: 1.1875rem; font-weight: 750; margin-top: 28px; }
.m-prosa p { margin-top: 14px; color: var(--tekst-2); }
.m-prosa ul { margin-top: 14px; display: grid; gap: 8px; color: var(--tekst-2); }
.m-prosa ul li { padding-left: 20px; position: relative; }
.m-prosa ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--streg-2); }

/* Footer (delt, data-mk="footer") ---------------------------------------- */

.m-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--streg);
    padding: 56px 0 36px;
    font-size: .875rem;
    color: var(--tekst-2);
}

.m-footer__gitter {
    display: grid;
    gap: 36px 24px;
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 1000px) {
    .m-footer__gitter { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
}

.m-footer__brand { grid-column: 1 / -1; }
@media (min-width: 1000px) { .m-footer__brand { grid-column: auto; } }

.m-footer__brand p { margin-top: 12px; max-width: 24em; }
.m-footer__brand address { margin-top: 12px; font-style: normal; }

.m-footer__titel {
    font-size: .8125rem;
    font-weight: 800;
    color: var(--tekst);
    margin-bottom: 12px;
}

.m-footer li + li { margin-top: 9px; }

.m-footer a:hover,
.m-footer button:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }

.m-footer__bund {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid var(--streg);
    color: var(--tekst-3);
}

/* Fast knap i bunden på telefon ---------------------------------------------- */

#mobileCTA {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 12px var(--kant) calc(12px + env(safe-area-inset-bottom));
    background: rgba(251, 251, 253, .9);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--streg);
    transition: transform .25s var(--blid);
}

#mobileCTA .m-knap { width: 100%; }
#mobileCTA.cta-skjult { transform: translateY(110%); }

@media (prefers-reduced-transparency: reduce) {
    #mobileCTA { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (min-width: 768px) { #mobileCTA { display: none; } }
@media (max-width: 767px) { body.har-mobilcta { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* Diskret fade ind, kun hvor browseren kan scroll-drevne animationer.
   Uden understøttelse står alt bare fremme. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .m-vis {
            animation: m-ind linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }
    }
}

@keyframes m-ind {
    from { opacity: .001; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .m-knap, .m-knap .ik, .m-link .ik, .m-chip, .m-segment button, .m-event, .m-menu, .m-faq summary .ik,
    .m-alle > summary .ik, .m-typer .ik--pil, #mobileCTA { transition: none; }
    .m-knap:active { transform: none; }
    .m-event:hover { transform: none; }
}