/* Alekos Rejsekalender — glas over himmel (samme familie som media.alekos.dk og Rejsetesten).
   Kortene er solide hvide, så datoer og priser altid står skarpt. Fonte hostes selv (GDPR).
   Kortene bruger Alekos' varme designsystem (espresso, cognac, messing, creme + Poppins), så de føles
   eksklusive — ikke som tilbudsskilte (Caspers feedback 02.10.2026). Status vises i varme toner. */

@font-face { font-family: "Alekos Poppins"; src: url(../fonts/poppins-latin-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Alekos Poppins"; src: url(../fonts/poppins-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alekos Poppins"; src: url(../fonts/poppins-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alekos Poppins"; src: url(../fonts/poppins-latin-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Alekos Script"; src: url(../fonts/dancing-script-latin-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #0f2742;
  --ink-soft: #52677e;
  --line: #e6e9ee;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.18);
  --glass-edge: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 18px 60px rgba(8, 28, 56, 0.28);
  --dark: rgba(12, 32, 56, .82);
  --gold: #e9b872;
  /* varme kort (Alekos Rejser Design System) */
  --cocoa: #341e12;
  --cognac: #4a3220;
  --espresso: #2a1b11;
  --messing: #b68a4e;
  --karamel: #9a6e3a;
  --cream: #fbf6ee;
  --porcelain: #f4ecdd;
  --warm-soft: #8a7a66;
  --warm-line: #efe6d8;
  --roed: #a3302e;        /* "lækker rød" til udsolgt (Casper 02.10.2026) */
  --roed-dyb: #8c2725;
  --serif-ish: "Alekos Poppins", var(--font);
  --gold-deep: #b9802f;
  --red: #e5222b;
  --yellow: #ffc233;
  --yellow-ink: #6b4a00;
  --ok: #22b07d;
  --blur: blur(24px) saturate(165%);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overflow-x: clip; scroll-behavior: smooth; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--white); background: #46638a; -webkit-font-smoothing: antialiased; min-height: 100vh; }
:where(.akr) button, :where(.akr) input { font: inherit; color: inherit; }
:where(.akr) img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.akr) svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- himmel */
.sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #46638a url("../media/solnedgang.jpg") center / cover; }
.sky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--ease); }
.sky video.klar { opacity: 1; }
.sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 28, 56, .28), rgba(8, 28, 56, .05) 30%, rgba(8, 28, 56, .32) 75%, rgba(8, 28, 56, .55)); }
/* ---------------------------------------------------------------- betaling (diskret: én linje i toppen + lille link pr. afgang) */
/* "Sådan betaler du" i filterbjælkens øverste højre hjørne (Caspers ønske 02.10.2026) */
.betal-knap { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .25s, border-color .25s; }
.betal-knap:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.betal-knap svg { width: 16px; height: 16px; stroke-width: 1.8; }
.filtre.lille .betal-knap { align-self: center; }
.planlink { justify-self: end; border: 0; background: none; padding: 0; margin-top: -8px; font-family: var(--serif-ish); font-size: 12px; color: var(--warm-soft);
  text-decoration: underline; text-decoration-color: #e3d6c2; text-underline-offset: 3px; cursor: pointer; transition: color .2s; }
.planlink:hover { color: var(--cognac); text-decoration-color: currentColor; }

.plan { width: min(480px, calc(100% - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 28px; padding: 28px 28px 22px; background: var(--cream);
  color: var(--cocoa); font-family: var(--serif-ish); box-shadow: 0 30px 80px rgba(42, 27, 17, .4); }
.plan[open] { animation: aabne .4s var(--ease); }
.plan::backdrop { background: rgba(42, 27, 17, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.plan-luk { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--porcelain); color: var(--cognac);
  font-size: 22px; line-height: 1; cursor: pointer; }
.plan-over { margin: 0; font-family: "Alekos Script", var(--serif-ish); font-size: 22px; font-weight: 600; color: var(--karamel); line-height: 1; }
.plan h2 { margin: 6px 40px 0 0; font-size: 21px; font-weight: 500; line-height: 1.28; letter-spacing: -.012em; color: var(--cocoa); }
.plan-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--warm-soft); }
.plan-trin { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.plan-trin li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0 11px 28px; border-top: 1px solid var(--warm-line); }
.plan-trin li:first-child { border-top: 0; }
.plan-trin li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); border: 2px solid var(--messing); }
.plan-trin li:first-child::before { background: var(--messing); }
.plan-trin li::after { content: ""; position: absolute; left: 7.5px; top: 29px; bottom: -16px; width: 1px; background: #e6d6bc; }
.plan-trin li:last-child::after { display: none; }
.plan-trin b { display: block; font-size: 14px; font-weight: 500; }
.plan-trin small { display: block; margin-top: 2px; font-size: 12px; color: var(--warm-soft); }
.plan-trin em { flex: none; font-style: normal; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cocoa); }
.plan-note { margin: 14px 0 0; padding: 11px 14px; border-radius: 14px; background: var(--porcelain); font-size: 12px; line-height: 1.55; color: var(--warm-soft); }
@media (max-width: 760px) {
  .planlink { justify-self: start; margin-top: 0; }
  .betal-knap { position: absolute; top: 12px; right: 12px; height: 30px; font-size: 12px; padding: 0 11px 0 9px; }
  .filtre > .frad:first-child .lbl { line-height: 30px; }
  .filtre.lille .betal-knap { display: none; }
  .plan { padding: 24px 20px 18px; }
}

@media (prefers-reduced-motion: reduce) { .sky video { display: none; } }

/* ---------------------------------------------------------------- glas */
.glass { background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(15, 39, 66, .82); } }

/* ---------------------------------------------------------------- topbar */
.top { position: fixed; top: 14px; left: 0; right: 0; margin: 0 auto; z-index: 40; width: min(1180px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 9px 9px 20px; border-radius: 999px;
  animation: ned 1s var(--ease) both; transition: background .35s var(--ease), border-color .35s; }
.top.lille { background: var(--dark); border-color: rgba(255, 255, 255, .22); }
@keyframes ned { from { opacity: 0; transform: translateY(-24px); } }
.top .logo { height: 30px; width: auto; filter: drop-shadow(0 2px 8px rgba(8, 28, 56, .35)); }
.visning { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(8, 28, 56, .18); }
.vis { border: 0; background: transparent; padding: 8px 16px; border-radius: 99px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background .3s var(--ease), color .3s; }
.vis.on { background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(8, 28, 56, .2); }

/* ---------------------------------------------------------------- hero */
.hero { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: clamp(112px, 15vh, 150px) 0 30px; }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.hero h1 { margin: 0; font-weight: 300; letter-spacing: -.04em; line-height: .98; font-size: clamp(42px, 6.2vw, 84px); text-shadow: 0 4px 40px rgba(8, 28, 56, .3); }
.hero h1 span { display: block; }
.hero h1 span + span { opacity: .82; }
.ind { opacity: 0; transform: translateY(26px); filter: blur(6px); animation: indglid 1.1s var(--ease) var(--d, 0s) forwards; }
@keyframes indglid { to { opacity: 1; transform: none; filter: none; } }

/* ---------------------------------------------------------------- filtre */
.vagt { height: 1px; margin-bottom: -1px; }
.afstand { height: 0; }
.filtre { position: relative; z-index: 30; width: min(1180px, calc(100% - 32px)); margin: 0 auto; border-radius: 28px; padding: 16px 18px;
  display: grid; gap: 14px; opacity: 0; animation: indglid 1.1s var(--ease) .4s forwards; transition: background .35s var(--ease), border-color .35s; }
.filtre.lille { position: fixed; top: 76px; left: 0; right: 0; padding: 10px 14px; gap: 10px; border-radius: 22px; background: var(--dark); border-color: rgba(255, 255, 255, .22);
  opacity: 1; animation: glidned .45s var(--ease) both; }
@keyframes glidned { from { opacity: 0; transform: translateY(-14px); } }
.filtre.lille .frad.tre { display: none; }
.frad { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; min-width: 0; }
.frad:first-child { flex-wrap: nowrap; }
.frad:first-child .felt { flex: 1 1 0; }
.felt { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.lbl { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* månedsbjælke med lille søjle pr. måned (antal afgange) */
.maaneder { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; padding: 2px;
  mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.maaneder::-webkit-scrollbar { display: none; }
.mdr { flex: none; display: grid; justify-items: center; gap: 4px; min-width: 54px; padding: 7px 8px 6px; border-radius: 16px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .1); cursor: pointer; transition: background .25s, border-color .25s, transform .35s var(--spring); }
.mdr:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.mdr .soejle { width: 22px; height: 26px; display: flex; align-items: flex-end; overflow: hidden; }
.mdr .soejle i { display: block; width: 100%; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .55)); transform-origin: bottom; animation: vokse 1s var(--spring) calc(.5s + var(--i) * .04s) both; }
@keyframes vokse { from { transform: scaleY(0); } }
.mdr .m { font-size: 13px; font-weight: 600; line-height: 1; }
.mdr .aa { font-size: 11px; opacity: .75; line-height: 1; }
.mdr.on { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 6px 18px rgba(8, 28, 56, .22); }
.mdr.on .soejle i { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.mdr.ingen { opacity: .38; cursor: default; }
.mdr.ingen:hover { transform: none; background: rgba(255, 255, 255, .1); }
.aarskifte { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; opacity: .7;
  writing-mode: vertical-rl; transform: rotate(180deg); }
.filtre.lille .mdr { padding: 6px 7px; min-width: 48px; }
.filtre.lille .mdr .soejle { height: 0; }

/* destination: én knap, der åbner en liste */
.vaelg { position: relative; }
.vaelg-knap { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .25s; }
.vaelg-knap:hover { background: rgba(255, 255, 255, .26); }
.vaelg-knap svg { width: 17px; height: 17px; }
.vaelg-knap .pil-ned { width: 15px; height: 15px; opacity: .8; transition: transform .35s var(--ease); }
.vaelg-knap[aria-expanded="true"] .pil-ned { transform: rotate(180deg); }
.vaelg.valgt .vaelg-knap { background: #fff; color: var(--ink); border-color: #fff; }
.vaelg-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; width: min(440px, calc(100vw - 32px)); padding: 10px; border-radius: 22px;
  background: #11294a; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 24px 60px rgba(8, 28, 56, .45);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; transform-origin: top left; animation: aabne .35s var(--ease); }
@keyframes aabne { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.land { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; text-align: left; padding: 10px 12px;
  border-radius: 12px; cursor: pointer; font-size: 14px; transition: background .2s; }
.land:hover { background: rgba(255, 255, 255, .1); }
.land small { opacity: .55; font-variant-numeric: tabular-nums; }
.land.on { background: #fff; color: var(--ink); }
.land.alle { grid-column: 1 / -1; font-weight: 600; }

.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 99px; background: rgba(8, 28, 56, .18); }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 99px; cursor: pointer; font-size: 14px; transition: background .3s var(--ease), color .3s; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(8, 28, 56, .2); }

.kontakt { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; user-select: none; margin-left: auto; }
.kontakt input { position: absolute; opacity: 0; pointer-events: none; }
.spor { width: 42px; height: 24px; border-radius: 99px; background: rgba(8, 28, 56, .28); border: 1px solid rgba(255, 255, 255, .4); position: relative; transition: background .3s; }
.spor i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .4s var(--spring); }
.kontakt input:checked + .spor { background: var(--ok); }
.kontakt input:checked + .spor i { transform: translateX(18px); }
.kontakt input:focus-visible + .spor { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------- afgangstavle */
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 60px; }
.maaned { padding-top: 34px; }
.mhead { margin: 0 0 14px; padding: 0 4px; }
.mhead h2 { margin: 0; font-weight: 300; letter-spacing: -.035em; font-size: clamp(32px, 4.2vw, 50px); line-height: 1; text-shadow: 0 2px 24px rgba(8, 28, 56, .3); }
.mhead h2 span { opacity: .62; }

.tavle { background: #fff; color: var(--cocoa); font-family: var(--serif-ish); border-radius: 26px; overflow: hidden; box-shadow: 0 18px 50px rgba(8, 28, 56, .2); }

.raekke { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 330px 222px; column-gap: 26px; align-items: center; padding: 20px 28px; min-height: 126px; /* samme størrelse som før (Casper) */
  opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease), background .25s; }
.raekke + .raekke { border-top: 1px solid var(--warm-line); }
.raekke.vist { opacity: 1; transform: none; }
.raekke:hover { background: #fdfaf5; }
.raekke::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; }
.raekke.faa::before { background: var(--messing); }
.raekke.udsolgt::before { background: var(--roed); }

.thumb { width: 76px; height: 76px; border-radius: 16px; overflow: hidden; background: #dfe5eb; display: block; }
.thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.thumb img.klar { opacity: 1; }
.raekke:hover .thumb img { transform: scale(1.12); }
.raekke.udsolgt .thumb img { filter: saturate(.55); }
.raekke.udsolgt .stop, .raekke.udsolgt .pris b { color: var(--warm-soft); }

.midt { min-width: 0; }
/* landene: det største på rækken */
.stop { display: block; color: var(--cocoa); text-decoration: none; font-size: 21px; font-weight: 500; letter-spacing: -.012em; line-height: 1.28; text-wrap: balance; }
.stop:hover { color: var(--cognac); }
.under-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
.tema { font-family: "Alekos Script", var(--serif-ish); font-size: 19px; color: var(--karamel); font-weight: 600; line-height: 1; }
/* status-badges i varme toner; udsolgt = dyb, lækker rød (Casper 02.10.2026) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: #edf1e8; color: #55704c; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: #7d9b72; }
.chip.faa { background: #f3e4c8; color: #7a5420; }
.chip.udsolgt { background: var(--roed); color: var(--cream); }

/* billetstumpen med perforeret kant */
.stump { position: relative; align-self: stretch; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  margin: -20px 0; padding: 20px 8px 20px 34px; border-left: 2px dashed #eadfce; }
.dato { display: grid; line-height: 1.1; }
.dato small { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--warm-soft); text-transform: uppercase; }
.dato b { font-size: 22px; font-weight: 500; letter-spacing: -.015em; white-space: nowrap; }
.dato em { font-style: normal; font-size: 13px; color: var(--warm-soft); margin-top: 2px; }
.dato.hjem { text-align: right; }
.fly { display: grid; justify-items: center; gap: 4px; color: var(--messing); position: relative; }
.fly::before { content: ""; position: absolute; top: 11px; left: 4px; right: 4px; border-top: 1.5px dotted #dccdb6; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 19px), transparent calc(50% - 19px), transparent calc(50% + 19px), #000 calc(50% + 19px));
  mask-image: linear-gradient(90deg, #000 calc(50% - 19px), transparent calc(50% - 19px), transparent calc(50% + 19px), #000 calc(50% + 19px)); }
.fly svg { position: relative; z-index: 1; width: 22px; height: 22px; padding: 0 4px; background: transparent; box-sizing: content-box; fill: currentColor; stroke: none; transform: rotate(45deg); transition: transform .6s var(--spring); }
.raekke:hover .fly svg { transform: rotate(45deg) translate(3px, -3px); }
.fly span { font-size: 12px; font-weight: 500; color: var(--warm-soft); white-space: nowrap; }
.raekke.udsolgt .fly { color: #cbbca8; }

.hoejre { display: grid; justify-items: end; gap: 12px; }
/* prisen: rolig og elegant — ingen overstreget "før-pris" */
.pris { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; line-height: 1.2; }
.pris b { display: block; font-size: 23px; font-weight: 500; letter-spacing: -.015em; color: var(--cocoa); font-variant-numeric: tabular-nums; }
.pris .pp { display: none; }
.pris s { font-size: 14px; color: var(--warm-soft); text-decoration-color: rgba(138, 122, 102, .7); font-variant-numeric: tabular-nums; }
.knapper { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 99px; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, gap .35s var(--spring); }
.btn svg { width: 15px; height: 15px; stroke-width: 2.2; }
.btn.info { color: var(--cognac); background: #faf5ed; box-shadow: inset 0 0 0 1px #ecdfcb; }
.btn.info:hover { background: var(--porcelain); box-shadow: inset 0 0 0 1px #e2d1b7; }
.btn.book { min-width: 112px; color: var(--cream); background: var(--cognac); box-shadow: 0 6px 16px -8px rgba(42, 27, 17, .55); }
.btn.book:hover { gap: 11px; background: var(--espresso); }
.btn.udsolgt { min-width: 112px; color: var(--cream); background: var(--roed); cursor: default; box-shadow: 0 6px 16px -8px rgba(140, 39, 37, .55); }

/* ---------------------------------------------------------------- tidslinje */
.tidslinje { border-radius: 28px; padding: 22px 0 16px; margin-top: 30px; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(8, 28, 56, .22); overflow: hidden; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 22px 14px; flex-wrap: wrap; }
.tl-head h2 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.forklaring { display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
.forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.forklaring i { width: 14px; height: 8px; border-radius: 4px; }
.tl-rul { overflow-x: auto; overscroll-behavior-x: contain; }
.tl { --kol: 92px; position: relative; display: grid; grid-template-columns: 250px 1fr; min-width: calc(250px + var(--n) * var(--kol)); }
.tl-mdr { display: grid; grid-template-columns: repeat(var(--n), var(--kol)); }
.tl-mdr div { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 0 8px 8px; border-left: 1px solid var(--line); }
.tl-mdr div b { display: block; color: var(--ink); font-size: 13px; }
.tl-navn { position: sticky; left: 0; z-index: 2; background: #fff; padding: 10px 14px 10px 22px; font-size: 14px; font-weight: 600; line-height: 1.25; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; }
.tl-navn img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: none; }
.tl-spor { position: relative; border-top: 1px solid var(--line); background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: var(--kol) 100%; min-height: 54px; }
.bar { position: absolute; top: 50%; height: 26px; margin-top: -13px; border-radius: 99px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-decoration: none; background: linear-gradient(90deg, #22b07d, #34c38f); box-shadow: 0 4px 12px rgba(8, 28, 56, .18);
  transform-origin: left; animation: tlind .9s var(--ease) calc(var(--i) * .02s) both; transition: transform .3s var(--spring), box-shadow .3s; }
.bar:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8, 28, 56, .28); z-index: 3; }
.bar.faa { background: var(--yellow); color: var(--yellow-ink); }
.bar.udsolgt { background: var(--red); }
@keyframes tlind { from { transform: scaleX(0); opacity: 0; } }
.tl-tip { font-size: 13px; color: var(--ink-soft); padding: 12px 22px 0; margin: 0; }

/* ---------------------------------------------------------------- tom + bund */
.tom { width: min(640px, calc(100% - 32px)); margin: 30px auto 80px; padding: 34px; border-radius: 28px; text-align: center; }
.tom h2 { margin: 0; font-weight: 300; font-size: 34px; letter-spacing: -.02em; }
.tom p { margin: 10px 0 20px; opacity: .92; }
.knap { border: 0; background: #fff; color: var(--ink); font-weight: 600; padding: 13px 22px; border-radius: 99px; cursor: pointer; box-shadow: 0 8px 24px rgba(8, 28, 56, .25); transition: transform .35s var(--spring); }
.knap:hover { transform: translateY(-2px); }
.bund { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 40px; font-size: 13px; opacity: .85; text-align: center; }

/* ---------------------------------------------------------------- mellemstørrelse */
@media (max-width: 1180px) {
  .raekke { grid-template-columns: 104px minmax(0, 1fr) 270px; row-gap: 18px; min-height: 0; }
  .thumb { width: 104px; height: 104px; grid-row: 1 / 3; align-self: start; }
  .stump { margin: 0; padding: 0 0 0 24px; }
  .hoejre { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .pris { text-align: left; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- mobil */
@media (max-width: 760px) {
  .top { padding-left: 16px; }
  .top .logo { height: 26px; }
  .vis { padding: 7px 12px; font-size: 13px; }
  .filtre { padding: 12px; border-radius: 22px; gap: 10px; }
  .felt { flex-direction: column; align-items: stretch; gap: 6px; }
  .lbl { font-size: 11px; }
  .maaneder { margin: 0 -12px; padding: 2px 12px; }
  /* "Alle destinationer" og "Skjul udsolgte" på samme linje, længderne under */
  .frad.tre { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "vaelg kontakt" "seg seg"; gap: 10px 12px; align-items: center; }
  .frad.tre .vaelg { grid-area: vaelg; min-width: 0; }
  .frad.tre .seg { grid-area: seg; }
  .frad.tre .kontakt { grid-area: kontakt; gap: 8px; font-size: 13px; white-space: nowrap; }
  .vaelg-knap span { overflow: hidden; text-overflow: ellipsis; }
  .vaelg, .vaelg-knap { width: 100%; }
  .vaelg-knap .pil-ned { margin-left: auto; }
  .vaelg-panel { width: 100%; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 7px 6px; font-size: 13px; }
  .kontakt { margin-left: 0; }
  .filtre.lille { top: 70px; gap: 0; padding: 8px 10px; }
  .filtre.lille .lbl, .filtre.lille .frad.tre { display: none; }
  .tavle { border-radius: 22px; }
  /* mobil: samme design, bare stablet — billede + navn, billetten, pris + begge knapper */
  .raekke { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumb midt" "stump stump" "hoejre hoejre";
    column-gap: 12px; row-gap: 10px; padding: 14px; min-height: 0; }
  .thumb { grid-area: thumb; display: block; width: 64px; height: 64px; border-radius: 14px; align-self: start; }
  .midt { grid-area: midt; align-self: center; }
  .stop { font-size: 18px; line-height: 1.25; }
  .under-stop { margin-top: 6px; }
  .stump { grid-area: stump; margin: 0; padding: 8px 14px; border: 0; border-radius: 14px; background: var(--cream); }
  .dato b { font-size: 17px; }
  .dato em { font-size: 11px; }
  /* pris til venstre (overstreget pris over, betalingsplan under), små knapper til højre på samme højde */
  .hoejre { grid-area: hoejre; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
    justify-content: stretch; column-gap: 10px; row-gap: 2px; width: auto; }
  .hoejre .pris { grid-column: 1; grid-row: 1; display: grid; justify-items: start; justify-self: start; gap: 0; }
  /* "Pris pr. pers." og den overstregede pris på én lille linje over prisen */
  .hoejre .pris { grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; }
  .pris .pp { display: block; grid-column: 1; grid-row: 1; font-size: 11px; color: var(--warm-soft); line-height: 1.2; }
  .pris s { grid-column: 2; grid-row: 1; font-size: 11px; line-height: 1.2; }
  .pris b { grid-column: 1 / -1; grid-row: 2; }
  .pris b { font-size: 20px; line-height: 1.15; }
  .planlink { grid-column: 1; grid-row: 2; justify-self: start; margin: 2px 0 0; }
  .knapper { grid-column: 2; grid-row: 1 / 3; width: auto; gap: 6px; }
  .knapper .btn { flex: none; height: 36px; min-width: 0; padding: 0 13px; font-size: 13px; gap: 5px; }
  .knapper .btn svg { width: 13px; height: 13px; }
  .btn.book, .btn.udsolgt { min-width: 0; }
  .tl { --kol: 70px; grid-template-columns: 150px 1fr; min-width: calc(150px + var(--n) * var(--kol)); }
  .tl-navn { padding-left: 14px; font-size: 12px; }
  .tl-navn img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ind, .filtre, .raekke { opacity: 1 !important; transform: none !important; filter: none !important; }
  .thumb img { opacity: 1; }
}

/* de mindste telefoner: længdeknapperne skal kunne være på én linje */
@media (max-width: 400px) {
  .seg button { padding: 7px 4px; font-size: 12px; }
  .knapper .btn { padding: 0 10px; font-size: 12px; }
  .knapper .btn svg { display: none; }
}
@media (max-width: 345px) {
  .seg button { padding: 7px 2px; font-size: 11px; letter-spacing: -.01em; }
}

/* ---- på alekos.dk: sitets egen header ligger oven på toppen (snippet'en sætter den ind i .akr-header) ---- */
.akr-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; }
.akr { font-family: var(--font); color: var(--white); }
.hero { position: relative; }
.hero .visning { position: absolute; right: 0; top: clamp(112px, 15vh, 150px); }
.filtre.lille { top: 14px; }
.nede { margin: 40px auto; max-width: 560px; padding: 22px 26px; border-radius: 22px; background: rgba(12, 32, 56, .8); text-align: center; line-height: 1.5; }
@media (max-width: 760px) {
  .hero .visning { position: static; margin: 0 0 18px; width: max-content; }
  .filtre.lille { top: 10px; }
}