/* Aylo Portal - samme cyan/navy brand-palet som Aylo.Display, se dets Colors.xaml. */

:root {
    /* SIDENS BREDDE (11. okt 2026 - ejerens ønske: brug mere af skærmen på en pc). Var 1180 px
       skrevet ind i hver sektion for sig; nu er det ét tal. Topbjælken er dette + sin padding,
       og de sektioner, der før var 1100, er 80 px smallere end dette. */
    --page-max: 1320px;
    --bg: #07091A;
    --bg-panel: #0D1525;
    --border: #1E2E50;
    --text: #E8EDF5;
    --text-muted: #8A9AB8;
    --accent: #00C2E0;
    --error: #D45F5F;

    /* ── STATUSFARVERNE ER NU VARIABLE ────────────────────────────────────────────
       De stod som raa vaerdier (#3ACB6E, #E8A040, #E85050) dér, hvor de blev brugt. Det holdt,
       saa laenge hele sitet var moerkt - men et groent #3ACB6E paa hvid bund er ikke til at
       laese, og den indloggede portal er lys nu. Vaerdierne her er de samme som foer, saa alt
       ser ud praecis som hidtil; den lyse portal saetter sine egne laengere nede. */
    --ok: #3ACB6E;
    --warn: #E8A040;
    --danger: #E85050;

    /* ── TEKST PÅ EN CYAN FLADE ───────────────────────────────────────────────────
       Knapper og mærker med cyan bund havde blækket skrevet ind som #0D1525 - næsten sort.
       Det var rigtigt mod den lyse brandcyan på det mørke site, og det blev forkert i samme
       øjeblik portalen fik sin mørkere cyan: mørk tekst på mørk cyan er ikke til at læse.

       Standardværdien er den, der var, så det offentlige site og loginsiden ser ud som hidtil.
       .app-body sætter den til hvid. */
    --on-accent: #0D1525;

    /* Messing - PRODUKTETS EGEN ACCENT. Aylo.Display bruger #C8A96E (se dets Colors.xaml,
       Dark_Accent) overalt: pauseskærmens bådnavn, instrumentkortenes fremhævninger, lys-knapper.
       Sitet kørte udelukkende på cyan, så app og hjemmeside lignede to forskellige produkter.
       De to farver har nu hver sin opgave, og det er dét der giver siden dybde:
         cyan   = det FUNKTIONELLE - knapper, links, dataikoner, "live"
         messing = det REDAKTIONELLE - sektionsmærker, hårfine streger, det rolige og dyre
       Blandes de vilkårligt, forsvinder pointen - så hold rollerne. */
    --accent-warm: #C8A96E;

    /* Kortflade, en anelse lysere end panel-baggrunden. Uden den forskel kunne kort kun ses på
       deres kant, og hele siden blev til flader med streger imellem. */
    --surface: #111B31;

    /* Hårfin lysstribe langs kortenes overkant - det der får en mørk flade til at ligne et
       fysisk objekt med lys ovenfra i stedet for et hul i baggrunden. */
    --surface-hi: rgba(255, 255, 255, 0.055);

    /* ── Typografisk skala ──────────────────────────────────────────────────────
       Otte trin, og ikke ét mere. Forsiden havde tidligere femten forskellige størrelser
       (42, 34, 28, 26, 22, 19, 17, 16, 15, 14, 13, 12, 11 …) sat enkeltvis dér hvor de
       skulle bruges. Det er dét, der får en side til at se "næsten rigtig" ud uden at man
       kan pege på hvorfor: to overskrifter der er 2px fra hinanden læses ikke som to
       niveauer, bare som en fejl.

       De to største er flydende (clamp), så de skalerer med vinduet i stedet for at skulle
       overskrives i en media query - der er derfor heller ingen h1-undtagelse for mobil
       længere nede.

       De fire brødtekst-trin har været op og ned nogle gange, før de landede her. Undervejs
       blev de delt i to sæt - et større til PC og et mindre til tablet - fordi teksten så
       for lille ud på en skærm og for stor på en iPad. Det blev rullet tilbage igen: forskellen
       viste sig at være en browserindstilling på den ene maskine og ikke noget ved designet.
       Ét sæt værdier, der gælder alle vegne, er nemmere at holde rigtigt end to.

       Alt er sat HER og ikke i de enkelte sektioner, netop for at de følges ad. Skal der
       skrues igen, så skru her - og husk at overskrifterne har deres egne clamp-værdier
       ovenfor, som IKKE følger med, fordi de skalerer med vinduet i forvejen. */

    --fs-display: clamp(34px, 4.4vw, 50px);
    --fs-h2: clamp(25px, 2.9vw, 33px);
    --fs-h3: 18px;
    --fs-lede: 17px;
    --fs-body: 15px;
    --fs-sm: 15px;
    --fs-xs: 13px;
    --fs-label: 11px;

    --lh-display: 1.08;
    --lh-heading: 1.22;
    --lh-body: 1.65;

    /* Læselængde. Brødtekst bliver træls at læse over ca. 70 tegn - øjet mister linjen på
       vej tilbage til venstremargen. */
    --measure: 62ch;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Overskrifterne kører nu på Inter, ikke Space Grotesk.

   Space Grotesk er en geometrisk grotesk med meget runde bogstavformer og en bred aftegning. I
   store størrelser blev overskrifterne derfor både tunge og bløde - de fyldte mere end de sagde.
   Inter har smallere former og skarpere hjørner og står tydeligere ved samme størrelse.

   Space Grotesk indlæses stadig: logoet (se _HorizontalLogo.cshtml) er tegnet i den, og det er
   dér, den hører hjemme - som brandmærke, ikke som brødoverskrift. */
h1,
h2,
h3,
.section-title {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    /* 500 (11. okt 2026 - før 600, og før det 700): hele sitet er gjort lettere, se "LETTERE
       TYPOGRAFI" sidst i filen. */
    font-weight: 500;
}

/* Forsidens sektionstitler.
   Den globale h2-regel længere nede (versaler, dæmpet farve, 16px) er skrevet til overskrifter
   INDE i portalen, hvor de fungerer som små etiketter over en tabel. På forsiden arvede de
   samme stil, og resultatet var udvaskede gråblå versaler der lignede deaktiveret tekst frem
   for overskrifter - og lange danske titler blev nærmest ulæselige i store bogstaver.
   Her er de i stedet nær-hvide, store og i almindelig sætningsform. */
.section-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    /* Strammere tracking end før (-0,022 mod -0,015). Inter har smallere bogstavformer, og de
       store overskrifter står skarpere når ordene holdes tættere sammen. */
    letter-spacing: -0.022em;
    text-transform: none;
    color: var(--text);
    font-weight: 500;
    text-align: center;
    margin: 0 0 40px;
    /* Fordeler ordene jævnt over linjerne, så en overskrift ikke ender med ét enligt ord på
       sidste linje. Browsere der ikke kender den, ignorerer den lydløst. */
    text-wrap: balance;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── App-shell (sidebar + indhold) - se _Layout.cshtml ─────────────────────
   Erstatter en tidligere vandret topbar. Layoutet stammer fra et Figma-udkast
   kunden fik lavet (se Dashboard.cshtml's dokumentation for detaljer/afvigelser). */

/* ── DEN INDLOGGEDE PORTAL ER LYS ─────────────────────────────────────────────────
   Sitet er moerkt, og det bliver det ved med at vaere: det er brandet, og forsiden er bygget
   til at ses som et produktbillede. Men en arbejdsflade er noget andet end en forside. Man
   sidder i den, laeser tal i den og bliver i den - og dér er en naesten sort flade tung at se
   paa i laengden.

   HELE SKIFTET LIGGER HER. Den indloggede del bruger naesten udelukkende variablerne fra
   :root (121 opslag mod 33 skrevne farver), saa temaet er de tolv linjer nedenfor og ikke en
   gennemskrivning af stilarket. Klassen sidder paa <body> i _Layout.cshtml, altsaa kun naar
   man er logget ind - _PublicLayout.cshtml har den ikke og er urort.

   Farverne er ikke bare vendt om. Cyan er gjort moerkere (#00768A mod #00C2E0), fordi den lyse
   brandcyan paa hvid bund har for lidt kontrast til at vaere tekst - og accenten ER tekst her:
   links, det aktive menupunkt og initialerne i sidebjaelken. Det samme gaelder messing og de
   tre statusfarver. */
.app-body {
    margin: 0;

    --bg: #F4F6FA;
    --bg-panel: #FFFFFF;
    --surface: #FFFFFF;
    --surface-hi: rgba(15, 26, 46, 0.045);
    --border: #E3E8F1;
    --text: #101A2E;
    --text-muted: #5C6880;
    --accent: #00768A;
    --accent-warm: #7A6231;
    --error: #C0392F;

    --ok: #1E8E4A;
    --warn: #A96A12;
    --danger: #C0392F;

    /* Logoet i sidebjaelken - se .brand-logo. Blaekket er tekstfarven, saa ordmaerket staar med
       samme vaegt som resten af menuen, og undertitlen er daempet paa samme maade som den var
       paa moerk bund. */
    --logo-ink: #101A2E;
    --logo-accent: #00768A;
    --logo-tagline: rgba(16, 26, 46, 0.42);

    /* Hvid, ikke naesten-sort: knappernes cyan er moerkere her end paa det offentlige site. */
    --on-accent: #FFFFFF;
}


.brand-logo {
    display: block;
    height: 40px;
    width: auto;
}

/* ── LOGOET FOELGER BUNDEN, DET LIGGER PAA ────────────────────────────────────────
   Logoet er tegnet ind i siden som SVG (se _HorizontalLogo.cshtml) og var hvidt, fordi alt bag
   det var moerkt. Den indloggede portal er lys nu, og et hvidt logo paa hvid bund er ingenting.

   Farverne slaas derfor op i --logo-ink og --logo-accent. Uden dem er svaret hvidt og
   brandcyan, altsaa praecis som foer - det offentlige site, loginsiden og alle Account-siderne
   er urorte. Kun .app-body saetter dem om.

   Cyan gaar OGSAA moerkere paa lys bund. #00C2E0 paa hvidt er ikke et ordmaerke, det er en
   antydning af et - og det er selve navnet, halvdelen af den farve staar i. */
.brand-logo .logo-ring,
.brand-logo .logo-divider { stroke: var(--logo-ink, #FFFFFF); }

.brand-logo .logo-star,
.brand-logo .logo-word { fill: var(--logo-ink, #FFFFFF); }

.brand-logo .logo-arc { stroke: var(--logo-accent, #00C8E0); }

.brand-logo .logo-dot,
.brand-logo .logo-word-accent { fill: var(--logo-accent, #00C8E0); }

.brand-logo .logo-tagline { fill: var(--logo-tagline, rgba(232, 244, 255, 0.32)); }

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-top {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-logo {
    display: block;
}

/* ── LOGOET MAA GERNE FYLDE ──────────────────────────────────────────────────────
   34 punkter var sat, dengang logoet var lyst paa moerk bund og laante vaegt af kontrasten.
   Paa hvidt staar det spinklere, og det er det foerste, man ser paa siden.

   46 er valgt ud fra bredden og ikke ud fra hoejden: maerket er 310 x 90, altsaa 3,44 gange
   saa bredt som hoejt, saa 46 punkter bliver 158 bredt. Sidebjaelken er 220 med 16 i polstring
   i hver side, altsaa 188 til raadighed - der er 30 tilbage. Skrues der op herfra, er det
   bredden, der loeber toer foerst, ikke hoejden. */
.sidebar-logo .brand-logo {
    height: 46px;
}

.sidebar-boat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
}

.sidebar-boat-card:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.sidebar-boat-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.sidebar-boat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sidebar-boat-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-boat-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar-boat-arrow {
    color: var(--text-muted);
    font-size: 13px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 0 10px 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.sidebar-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar-nav a:hover {
    color: var(--text);
    background: var(--surface-hi);
    text-decoration: none;
}

.sidebar-nav a.active {
    color: var(--accent);
    background: rgba(0, 194, 224, 0.10);
}

.sidebar-bottom {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 194, 224, 0.15);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-form button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}

.sidebar-logout-form button:hover {
    border-color: var(--error);
    color: var(--error);
}

.app-main {
    flex: 1;
    min-width: 0;
}

.help-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    z-index: 20;
}

.help-fab:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* ── Indhold ────────────────────────────────────────────────────────────── */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px 64px;
}

h1 {
    margin: 0 0 8px;
    font-size: 26px;
}

h2 {
    margin: 32px 0 12px;
    font-size: 16px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mt {
    margin-top: 24px;
}

.muted {
    color: var(--text-muted);
}

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Stat-grid (nøgletal) ───────────────────────────────────────────────── */

.stat-grid {
    display: grid;
    /* 200 og ikke 180: en licensnoegle, et tidspunkt med baade dato og klokkeslaet og et
       hardware-id kunne ikke staa paa én linje i 180, og saa braekkede de midt i sig selv. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.stat {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat .label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── ET NOEGLETAL SKAL STAA PAA ÉN LINJE ─────────────────────────────────────────
   18 punkter var for meget til kassernes bredde: "12. mar 2026 14:32" og en licensnoegle
   braekkede i to, og en kasse med to linjer i ligner en fejl ved siden af en med én.
   15 er stadig tydeligt stoerre end etiketten over det, og det er dét, forskellen skal vise. */
.stat .value {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* ── Bådens "hero" (navn + status) ──────────────────────────────────────── */

.boat-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
}

.boat-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.boat-hero-text h1 {
    margin: 0;
}

.boat-updated {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
}

.boat-updated-none {
    color: var(--error);
}

/* ── Gauges (fart/motor) ────────────────────────────────────────────────── */

.gauge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 8px;
}

.gauge-with-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gauge-caption {
    font-size: 12px;
    color: var(--text-muted);
}

.gauge {
    position: relative;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-svg {
    width: 100%;
    height: auto;
}

.gauge-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
    stroke-linecap: round;
}

.gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: d 0.3s;
}

.gauge-tick {
    stroke: var(--border);
    stroke-width: 1.5;
}

.gauge-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 18px;
}

.gauge-value {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 34px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1;
}

.gauge-unit {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.gauge-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: -6px;
}

/* ── Tank-gauges ────────────────────────────────────────────────────────── */

.tank-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tank-body {
    position: relative;
    width: 56px;
    height: 120px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.tank-fill {
    width: 100%;
    transition: height 0.3s;
}

.tank-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tank-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Panel (indramning af gauges/tanke/slider - se Index.cshtml) ──────────── */

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.panel h2 {
    margin-top: 0;
}

/* ── Dashboard-header ───────────────────────────────────────────────────── */

.content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.content-header h1 {
    margin: 0 0 4px;
}

.content-header-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    display: inline-block;
}

.content-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-badge {
    background: rgba(58, 203, 110, 0.12);
    color: var(--ok);
    border: 1px solid rgba(58, 203, 110, 0.35);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
}

/* ── Nøgletal-kort ──────────────────────────────────────────────────────── */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.metric-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}

.metric-card-head {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.metric-card-value {
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.metric-unit {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 4px;
    font-weight: 400;
}

.metric-card-caption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Dashboard-rækker ───────────────────────────────────────────────────── */

.dash-row-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
}

.dash-row-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.panel-head h2 {
    margin: 0;
}

/* ── ALARM-OVERSIGTEN PAA OVERBLIKKET ─────────────────────────────────────────────
   Tre spalter: navn, tilstand, antal. Navnet tager den plads, der er til overs, saa de to
   sidste staar lodret under hinanden fra raekke til raekke - det er dét, der goer en liste til
   noget, man kan loebe ned ad frem for noget, man skal laese.

   Antallet staar til hoejre med tabular-nums, saa cifrene flugter. */
.alarm-overview {
    display: flex;
    flex-direction: column;
}

.alarm-overview-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.alarm-overview-row:last-child {
    border-bottom: none;
}

.alarm-overview-name {
    font-size: 14px;
}

.alarm-overview-count {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 90px;
}

/* En alarm, der HAR vaeret i gang, skal kunne ses paa en liste, hvor de fleste linjer siger
   "Ikke gaaet". Ikke roed - det er ikke en fejl, at alarmen virkede - men heller ikke daempet. */
.alarm-overview-count.has-fired {
    color: var(--text);
    font-weight: 500;
}

.dash-alarms-link {
    font-size: 13px;
    color: var(--accent);
    white-space: nowrap;
}

/* Paa en smal skaerm faar navnet sin egen linje - tre spalter paa 360 px klemmer baade maerket
   og antallet ud over kanten. */
@media (max-width: 560px) {
    .alarm-overview-row {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .alarm-overview-name {
        grid-column: 1 / -1;
    }
}

/* ── ER ALARMEN TAENDT ELLER EJ ───────────────────────────────────────────────────
   Sandheden stod i et afkrydsningsfelt nede i formularen, og med fire paneler under hinanden
   skulle man ind i hver af dem for at finde ud af, hvad der egentlig var slaaet til. Maerket
   sidder derfor i overskriften, hvor man loeber ned ad siden.

   FARVEN ER IKKE ALENE OM AT SIGE DET. Der staar ogsaa "Slaaet til" eller "Slaaet fra" med ord,
   og fluebenet og krydset kan kendes fra hinanden i graatoner - hver ottende mand ser roedt og
   groent som den samme farve. */
.alarm-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.alarm-state::before {
    font-size: 13px;
    line-height: 1;
}

.alarm-state-on {
    background: rgba(58, 203, 110, 0.12);
    color: var(--ok);
    border-color: rgba(58, 203, 110, 0.35);
}

.alarm-state-on::before {
    content: "\2713";   /* flueben, U+2713 */
}

.alarm-state-off {
    background: rgba(232, 80, 80, 0.10);
    color: var(--danger);
    border-color: rgba(232, 80, 80, 0.32);
}

.alarm-state-off::before {
    content: "\2715";   /* kryds, U+2715 */
}

.badge-running,
.badge-idle {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 5px;
}

.badge-running {
    background: rgba(58, 203, 110, 0.12);
    color: var(--ok);
    border: 1px solid rgba(58, 203, 110, 0.35);
}

.badge-idle {
    background: rgba(138, 154, 184, 0.10);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ── Kompas ─────────────────────────────────────────────────────────────── */

.compass {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}

.compass-svg {
    width: 168px;
    height: 168px;
}

.position-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.position-stat-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.position-stat-row {
    display: flex;
    gap: 24px;
}

.position-stat-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Batteri-liste ──────────────────────────────────────────────────────── */

.battery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.battery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

.battery-row .label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.battery-row .value {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.battery-soc {
    font-size: 14px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Tidsrejse (fuld bredde nederst) ────────────────────────────────────── */

.panel-slider {
    margin-top: 16px;
}

/* ── Afspilningskontroller (TripDetail - genspil af en historisk tur) ─────── */

.playback-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-btn:hover {
    background: rgba(0, 194, 224, 0.12);
}

.speed-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.speed-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.speed-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.speed-btn.active {
    background: rgba(0, 194, 224, 0.12);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
}

/* ── Profil-formular ────────────────────────────────────────────────────── */

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 520px;
}

.profile-form label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 16px;
}

.profile-form input,
.profile-form textarea,
.profile-form select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 13px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}

.profile-form textarea {
    resize: vertical;
}

.profile-form input:focus,
.profile-form textarea:focus,
.profile-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.profile-form input:disabled {
    color: var(--text-muted);
    opacity: 0.7;
}

.profile-form-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.profile-form-checkline label {
    margin-top: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
}

/* ── Alarm-opsætning (Pages/Alarms.cshtml) ─────────────────────────────────── */

.status-banner {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.status-banner.status-pending {
    border-color: var(--warn);
    color: var(--warn);
}

.status-banner.status-applied {
    border-color: var(--ok);
    color: var(--ok);
}

.status-banner.status-rejected {
    border-color: var(--danger);
    color: var(--danger);
}

.status-banner.status-neutral {
    color: var(--text-muted);
}

.alarm-rule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.alarm-rule-row:last-child {
    border-bottom: none;
}

/* Gem-knappen i en regelraekke stod som browserens egen graa knap midt mellem portalens egne.
   Samme knap som alle andre steder, man gemmer - se .profile-form button.

   Slet-knappen rammes ikke: den ligger i sin egen formular UDEN FOR raekken (se Alarms.cshtml)
   og har sin egen roede stil, .trip-delete-btn. */
.alarm-rule-row button {
    background: var(--accent);
    border: none;
    color: var(--on-accent);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.alarm-rule-row button:hover {
    filter: brightness(1.08);
}

.alarm-rule-row select,
.alarm-rule-row input[type="number"] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    width: auto;
}

.alarm-rule-row label {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-form-row {
    display: flex;
    gap: 12px;
}

.profile-form-row > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-form button {
    margin-top: 20px;
    background: var(--accent);
    border: none;
    color: var(--on-accent);
    font-weight: 500;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: fit-content;
    padding-left: 24px;
    padding-right: 24px;
}

.profile-form button:hover {
    filter: brightness(1.08);
}

/* ── Tidsslider ─────────────────────────────────────────────────────────── */

.date-form input[type="date"] {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 6px;
}

.history-time {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

.panel input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Ture ───────────────────────────────────────────────────────────────── */

.trip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.trip-row {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trip-row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text);
    text-decoration: none;
    flex: 1;
    min-width: 220px;
}

.trip-row-main:hover {
    text-decoration: none;
}

.trip-row-main:hover .trip-row-name {
    color: var(--accent);
}

.trip-row-name {
    font-size: 15px;
    font-weight: 500;
}

.trip-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    vertical-align: middle;
}

.trip-row-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}

.trip-row-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.trip-rename-form {
    display: flex;
    gap: 8px;
}

.trip-rename-form input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    width: 160px;
}

.trip-rename-form button,
/* ── AFSLUT TUREN ────────────────────────────────────────────────────────────────────
   Staar kun paa en tur, der er blevet haengende som "i gang". Samme form som de oevrige
   raekkeknapper, men i cyan og ikke i graat: den goer noget ved turen, modsat "slet", som er den
   samme knap med en anden og farligere hensigt - og de to maa ikke ligne hinanden saa meget, at
   man kommer til at ramme forkert. */
.trip-end-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}

.trip-end-btn:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.trip-delete-btn {

    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.trip-rename-form button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.trip-delete-btn:hover {
    border-color: var(--error);
    color: var(--error);
}

#tripMap {
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

#dashMap {
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0 4px;
}

/* ── Login ──────────────────────────────────────────────────────────────── */

.login-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 32px;
    width: 100%;
    max-width: 460px;
}

.login-card .brand-logo {
    height: 84px;
    margin: 0 auto 4px;
}

.login-subtitle {
    color: var(--text-muted);
    text-align: center;
    margin: 4px 0 24px;
    font-size: 13px;
}

.login-error {
    background: rgba(212, 95, 95, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-card label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.login-card input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.login-card button {
    margin-top: 20px;
    background: var(--accent);
    border: none;
    color: #0D1525;
    font-weight: 500;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.login-card button:hover {
    filter: brightness(1.08);
}

.login-footer-link {
    text-align: center;
    font-size: 13px;
    margin: 12px 0 0;
}

.login-footer-link a {
    color: var(--text-muted);
}

.login-footer-link a:hover {
    color: var(--accent);
}

/* ── Offentligt site (forside/support) - se _PublicLayout.cshtml ──────────── */

.public-body {
    margin: 0;
}

.btn-solid,
.btn-ghost {
    display: inline-block;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

.btn-solid {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
}

.btn-solid:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.btn-lg {
    padding: 14px 26px;
    font-size: 15px;
}

/* ── Rulning til sektionerne ────────────────────────────────────────────────────

   Genvejene i menuen ruller blødt i stedet for at hoppe. Det er browserens egen rulning
   og ikke et script: den følger med, hvis brugeren griber ind undervejs, og den koster
   ingenting.

   scroll-margin-top er ikke pynt. Bjælken er fastlåst hen over indholdet, så uden den
   ville browseren stille sektionens top præcis dér, hvor bjælken dækker - og man ville
   lande på en overskrift, man ikke kan se. 96 px er den lave bjælkes højde plus lidt luft. */
html {
    scroll-behavior: smooth;
}

#marina,
#logbook,
#analysis,
#smart,
#ais {
    scroll-margin-top: 96px;
}

/* Har brugeren bedt styresystemet om mindre bevægelse, hopper vi i stedet. En side, der
   ruller af sig selv, er præcis dét, den indstilling findes for at slippe for. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── Header ─────────────────────────────────────────────────────────────── */


.public-header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Ligger transparent HEN OVER hero-billedet i stedet for at støde op til det - se
   Index.cshtml (ViewData["TransparentHeader"]) og _PublicLayout.cshtml.

   fixed og ikke absolute: absolute ruller bjælken væk sammen med heroen, og så er menuen
   borte resten af siden. fixed tager den også ud af flowet, så heroen stadig starter helt
   oppe i toppen bag den - det er dét, absolute blev brugt til. */
.public-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    border-bottom: none;
    transition: background-color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

/* Rullet forbi toppen: bjælken får bund og bliver lavere. Uden bundfarven ville menuen stå
   oven på hvad som helst, der kom rullende op nedefra - og de lyse sektioner ville gøre den
   hvide tekst ulæselig. Sløringen er en pyntedetalje; falder den bort i en gammel browser,
   er baggrunden alligevel 94 % dækkende. */
.public-header--overlay.is-stuck {
    background: rgba(9, 15, 30, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30);
}

.public-header--overlay .public-header-inner,
.public-header--overlay .brand-logo {
    transition: padding 260ms ease, height 260ms ease;
}

/* 68 px logo plus 28 px luft er 96 px bjælke. Det er fint hen over heroen, hvor der ikke er
   andet, men for meget at slæbe rundt på resten af siden - derfor den lavere udgave. */
.public-header--overlay.is-stuck .public-header-inner {
    padding-top: 6px;
    padding-bottom: 6px;
}

.public-header--overlay.is-stuck .brand-logo {
    height: 44px;
}

/* --border er for mørk/lav-kontrast til at ses hen over foto-baggrunden - lidt lysere/synlig
   kant her, kun i overlay-tilstand. */
.public-header--overlay .btn-ghost {
    border-color: rgba(232, 237, 245, 0.35);
}

.public-header--overlay .btn-ghost:hover {
    border-color: var(--accent);
}

/* Bredden følger sektionerne nedenfor (--page-max + padding) og ikke sin egen værdi. Tallene
   herunder er fra dengang siden var 1180 - nu er der 140 px mere at gøre godt med.

   REGNESTYKKET, fordi det er dét, der er gået galt to gange: bjælken har 1180 px minus 48 px
   padding = 1132 px at gøre godt med, og fire ting skal ind i dem - logoet, seks menupunkter,
   landevælgeren og to knapper. Logoet er 440x90, så ved 68 px højde fylder det alene 332 px.
   Sammen med resten var det 60 px for meget, og resultatet var en menu, der brød til to linjer
   - men KUN øverst på siden, hvor logoet er stort. Rullede man forbi videoen, skrumpede det til
   44 px, og så var der pludselig plads igen. Derfor så det ud som om det var videoen, der var
   noget galt med.

   Det er lukket tre steder: logoet er 60 px i stedet for 68, mellemrummet 20 i stedet for 28,
   og landevælgeren viser kun sit flag heroppe (se .country-picker--compact). Tilsammen godt
   130 px, altså plads til overs frem for plads, der lige akkurat rækker. */
.public-header-inner {
    max-width: calc(var(--page-max) + 48px);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.public-brand {
    display: flex;
    align-items: center;
}

.public-brand .brand-logo {
    height: 60px;
    width: auto;
}

/* Menuen bærer nu seks links og ikke to.

   nowrap OG IKKE wrap. Det var wrap før, som "sikkerhedsnet" - men et net, der griber, ved at
   bjælken bliver fyrre pixel højere og skubber hele siden ned, er ikke et net. Under 1060 px
   er der en burger, og dét er svaret på for lidt plads; derimellem skal punkterne blive på
   deres linje. */
.public-nav {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 18px;
    flex: 1;
}

/* Under 1200 px rækker bredden ikke længere til det store logo. Det skrumper her i stedet for
   at lade menuen bryde - en menu på to linjer gør bjælken 40 px højere og flytter alt indhold
   ned, hver gang vinduet er en anelse for smalt. Ved 44 px, samme højde som den rullede
   tilstand, holder de seks punkter på én linje ned til omkring 1000 px. Derunder bryder de,
   og det er med vilje: alternativet er at gøre teksten så lille, at menuen ikke kan læses. */
@media (max-width: 1200px) {
    .public-brand .brand-logo {
        height: 44px;
    }
}

.public-nav a {
    color: var(--text-muted);
    font-size: 15px;
}

.public-nav a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── Funktioner-undermenuen (10. okt 2026) ───────────────────────────────────────
   Åbner ved klik (.is-open, sat af scriptet i _PublicLayout) og ved mus over på store skærme.
   Panelet har sin egen mørke bund, så det kan læses hen over både heroen og de lyse sektioner. */
.public-nav { align-items: center; }

.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.is-open .nav-dropdown-toggle { color: var(--accent); }
.nav-dropdown-toggle svg { transition: transform 160ms ease; }
.nav-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: -16px;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(9, 15, 30, 0.97);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    z-index: 60;
}
/* Usynlig bro over mellemrummet, så musen kan nå panelet uden at det lukker. */
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }

/* ── MEGAMENUEN (Funktioner) ──────────────────────────────────────────────────────
   Et bredt, lyst panel under HELE bjælken (i stil med telerik.com): grupper af punkter med
   ikon, navn og én linje, og en fremhævet boks til højre. Panelet placeres mod headeren og ikke
   mod knappen - .nav-mega er derfor static, så headeren (sticky/fixed) bliver dens ramme. */
.nav-mega { position: static; }

.mega-panel {
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #E3E8F0;
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: 0 24px 48px rgba(4, 10, 24, 0.28);
}
.mega-panel::before { display: none; }

.mega-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 28px 24px 30px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 36px;
}

.mega-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px 28px;
    align-content: start;
}

.mega-group-title {
    margin: 0 0 8px;
    padding: 0 12px 10px;
    border-bottom: 1px solid #E8ECF3;
    color: #6B7A90;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-nav .mega-panel .mega-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #0B1220;
    white-space: normal;
}
.public-nav .mega-panel .mega-item:hover {
    background: #F2F6FB;
    color: #0B1220;
}

.mega-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.mega-icon--cool { background: rgba(0, 170, 200, 0.12); color: #007C93; }
.mega-icon--warm { background: rgba(200, 169, 110, 0.20); color: #8A6A12; }

.mega-text { display: flex; flex-direction: column; gap: 2px; }
.mega-title { font-size: 15px; font-weight: 500; color: #0B1220; }
.public-nav .mega-panel .mega-item:hover .mega-title { color: #007C93; }
.mega-desc { font-size: 13px; line-height: 1.45; color: #5A6678; }

/* Den fremhævede boks i højre side. */
.public-nav .mega-panel .mega-feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #EEF3F9;
    color: #0B1220;
    white-space: normal;
}
.mega-feature img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center 30%;
}
.mega-feature-text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.mega-feature-title { font-size: 16px; font-weight: 600; }
.mega-feature-body { font-size: 13.5px; line-height: 1.5; color: #5A6678; }
.mega-feature-cta { margin-top: 4px; font-size: 14px; font-weight: 500; color: #007C93; }
.public-nav .mega-panel .mega-feature:hover { background: #E4EDF7; color: #0B1220; }

.public-nav .nav-dropdown-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
}
.public-nav .nav-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}
.nav-dropdown-sep {
    display: block;
    height: 1px;
    margin: 6px 8px;
    background: var(--border);
}

.public-header-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Burger ─────────────────────────────────────────────────────────────────────
   Grænsen på 1060 px er målt og ikke rund for syns skyld: med seks menupunkter (470 px),
   logoet og de to knapper er der 63 px luft ved 1060 og kun 3 px ved 1000. Under 1060 er
   der altså ikke plads til én linje, og to linjer gør bjælken 40 px højere hver gang
   vinduet er en anelse for smalt. Så hellere en burger. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(232, 237, 245, 0.22);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--accent);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--text);
    transition: transform 200ms ease, opacity 200ms ease;
}

/* Åben: de tre streger bliver til et kryds. Stregerne står 7 px fra midten (2 px høje med
   5 px imellem), så de skal flyttes ind FØR de drejes - ellers mødes de ikke. */
.public-header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.public-header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.public-header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1060px) {
    .public-header-inner {
        flex-wrap: wrap;
        gap: 14px 16px;
    }

    /* Skubber burgeren helt ud til højre. flex-grow og ikke margin-left:auto, for margin
       ville også gælde over 1060, hvor knappen er skjult og logoet skal stå normalt. */
    .public-brand {
        flex: 1;
    }

    .nav-toggle {
        display: flex;
    }

    /* Panelet er ikke et element for sig: de to brydes ned under logoet af den flex-wrap,
       der lige er sat. Bjælken er position:fixed, så den vokser ned OVER indholdet i stedet
       for at skubbe siden.

       flex: 0 0 100% og IKKE width: 100%. Navigationen har flex: 1 i sin grundregel, og det
       er kort for flex: 1 1 0% - en flex-basis på nul, der slår enhver width ihjel. Med
       width alene blev menuen stående ved siden af logoet i stedet for under det. */
    .public-nav,
    .public-header-cta {
        display: none;
        flex: 0 0 100%;
    }

    .public-header.is-open .public-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }

    .public-header.is-open .public-nav a {
        padding: 11px 2px;
        font-size: 16px;
    }

    /* I burgermenuen står Funktioner foldet ud: overskriften og punkterne under den, rykket
       lidt ind - ingen menu i menuen at ramme med en finger. */
    .public-header.is-open .nav-dropdown-toggle {
        padding: 11px 2px 4px;
        font-size: 16px;
        cursor: default;
        pointer-events: none;
    }
    .public-header.is-open .nav-dropdown-toggle svg { display: none; }
    .public-header.is-open .nav-dropdown-menu {
        display: block;
        position: static;
        min-width: 0;
        padding: 0 0 4px 14px;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .public-header.is-open .nav-dropdown-menu::before { display: none; }

    /* Megamenuen i burgermenuen: kun grupper og navne, på den mørke bund. */
    .public-header.is-open .mega-panel { box-shadow: none; border-top: 0; }
    .public-header.is-open .mega-inner { display: block; padding: 0; }
    .public-header.is-open .mega-groups { display: block; }
    .public-header.is-open .mega-group-title {
        margin: 8px 0 0;
        padding: 0 0 4px;
        border: 0;
        color: var(--text-muted);
    }
    .public-header.is-open .public-nav .mega-panel .mega-item { padding: 8px 2px; gap: 10px; align-items: center; }
    .public-header.is-open .mega-title { color: var(--text); font-weight: 500; font-size: 16px; }
    .public-header.is-open .mega-desc,
    .public-header.is-open .public-nav .mega-panel .mega-feature { display: none; }
    .public-header.is-open .public-nav .mega-panel .mega-item:hover .mega-title { color: var(--accent); }
    .public-header.is-open .mega-icon { width: 30px; height: 30px; }
    .public-header.is-open .public-nav .nav-dropdown-menu a { padding: 9px 2px; }
    .public-header.is-open .public-nav .nav-dropdown-menu a:hover { background: none; }

    .public-header.is-open .public-header-cta {
        display: flex;
        padding-bottom: 6px;
    }

    /* Uden bund ville en åben menu stå oven på hero-videoen med hvid tekst i vandet. */
    .public-header--overlay.is-open {
        background: rgba(9, 15, 30, 0.97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
    }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    background: radial-gradient(ellipse at top right, rgba(0, 194, 224, 0.10), transparent 60%), var(--bg);
    padding: 64px 24px;
}

/* Rent fuldt-bredt, næsten-fuld-skærm billede (à la starlink.com) - INGEN tekst ovenpå
   længere (den sad dumt oven på fotoet, se samtalen "teksten hen over billedet skal helt
   væk") - kun navigationen ligger transparent hen over den øverste del (se
   .public-header--overlay). To lette scrims: én foroven så nav-logo/links forbliver
   læselige mod himlen, én forneden så overgangen til næste sektion ikke bliver en hård kant. */
.hero--photo {
    position: relative;
    min-height: 60vh;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(4, 7, 15, 0.55) 0%, rgba(4, 7, 15, 0) 20%, rgba(4, 7, 15, 0) 74%, rgba(4, 7, 15, 0.94) 100%),
        url("/images/hero-ocean.png") center / cover no-repeat;
}

/* ── Video i heroen ───────────────────────────────────────────────────────────
   Videoen lægger sig OVEN PÅ baggrundsbilledet i stedet for at erstatte det. Dermed er fotoet
   automatisk reserve: mangler filen, fejler den, eller er browseren sat til at spare data, ser
   man præcis den hero der var før. Ingen tom sort flade under nogen omstændigheder.

   z-index 0 og scrim'en ovenpå i z-index 1: uden det ville videoen dække de to gradienter, og
   navigationen øverst ville stå direkte på et lyst himmelbillede. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Toner op når den første frame er klar (se .is-ready) - ellers blinker der et sort felt
       mellem fotoet og videoens start. */
    opacity: 0;
    transition: opacity 900ms ease;
}

.hero-video.is-ready {
    opacity: 1;
}

/* Samme to scrims som fotoet har, gentaget oven på videoen: én foroven så navigationen kan
   læses mod himlen, én forneden så overgangen til næste sektion ikke bliver en hård kant. */
.hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Den nederste mørkning starter ved 74 %. Den lå oprindeligt på 72 og fyldte for meget; sat
       op til 84 blev den til en stribe, og logo, undertitel og knap stod nærmest oven på selve
       videoen. 74 er mellemvejen: nok mørke til at bære teksten, uden at æde motivet.

       Den ØVERSTE mørkning er derimod gjort en anelse kraftigere. Navigationen ligger oven på
       videoen, og et lyst billede - skum, himmel - gjorde "Forside" og "Support" næsten
       ulæselige. De to ender af gradienten løser hver sin opgave og skal ikke justeres samlet. */
    background: linear-gradient(180deg,
        rgba(4, 7, 15, 0.55) 0%,
        rgba(4, 7, 15, 0) 20%,
        rgba(4, 7, 15, 0) 74%,
        rgba(4, 7, 15, 0.94) 100%);
}

/* Har brugeren bedt systemet om mindre bevægelse, skal en autospillende baggrundsvideo ikke
   køre. Fotoet nedenunder træder i stedet - og det er en fuldgyldig hero, ikke en nødløsning. */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* ── Heroens indhold: logo, produktløfte og bestil-knap ───────────────────────────
   Forankret i BUNDEN og ikke midt i billedet: videoens motiv - båden, kølvandet - ligger i den
   øverste to tredjedele, og en centreret blok ville lægge sig oven i det. Nederst falder den
   desuden sammen med den mørkning, der i forvejen er der, så teksten kan læses uden at der skal
   lægges en ekstra plade bag den.

   z-index 2, altså over begge scrims (z-index 1). Under dem ville den nederste mørkning tage
   præcis den kontrast, teksten lever af. */
.hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 24px 28px;
    text-align: center;
    pointer-events: none;
}

/* Kun knappen skal kunne trykkes. Blokken dækker hele bunden af videoen, og uden dette ville
   den opsluge klik på alt, der måtte ligge under den. */
.hero-overlay .btn-solid {
    pointer-events: auto;
}

.hero-overlay .brand-logo {
    width: 300px;
    max-width: 72vw;
    height: auto;
    /* Skygge frem for en plade bagved: logoet skal kunne læses mod både lyst skum og mørkt vand,
       uden at der lægges en firkant hen over videoen. */
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.75));
}

.hero-tagline {
    margin: 0;
    font-family: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8F4FF;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.hero-order {
    pointer-events: auto;
    min-width: 190px;
}

/* Telefon: logoet og linjen skæres ned, og blokken rykker tættere på bunden. En 393 dp skærm har
   ikke plads til de 300 px logo plus en spatieret linje uden at det fylder halvdelen af heroen. */
@media (max-width: 640px) {
    .hero-overlay {
        gap: 14px;
        padding: 0 18px 22px;
    }

    .hero-overlay .brand-logo {
        width: 220px;
    }

    .hero-tagline {
        font-size: 14px;
        letter-spacing: 0.1em;
    }
}


/* ── Produktløftet på mørk bund (se section1.png i designmaterialet) ──────────────
   Baggrunden er IKKE en flad farve. To gløder oven på den mørke bund: én bred og køligt blå
   oppe bag overskriften, og én svagere varm nede bag enhederne. Det er dem, der gør fladen til
   et rum med lys i stedet for et rektangel med tekst på - og de er grunden til, at montagen kan
   stå frit uden ramme. */
.intro-dark {
    position: relative;
    padding: 96px 24px 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(23, 60, 105, 0.55) 0%, rgba(9, 14, 30, 0) 62%),
        radial-gradient(80% 55% at 50% 92%, rgba(200, 169, 110, 0.10) 0%, rgba(9, 14, 30, 0) 70%),
        #070B18;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
}

.intro-dark-inner {
    max-width: var(--page-max);
    margin: 0 auto;
}

.intro-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 22px;
}

/* Overskriften er TUNGERE end sidens øvrige (700 mod 600). Det er sidens ene store udsagn, og
   det er dét, designet viser - resten af overskrifterne blev med vilje lettere, se h1/h2/h3
   længere oppe. */
.intro-headline {
    margin: 0;
    font-size: clamp(38px, 6vw, 66px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

/* Guldet er lysere end brandets --accent-warm (#C8A96E). Den messing er sat til hårfine streger
   og små etiketter; ved 66 px på mørk bund bliver den grumset og ligner mest af alt beige. Her
   skal linjen lyse, som den gør i designet. Ét sted at rette, hvis den skal tilbage til messing. */
.intro-headline-gold {
    display: block;
    color: #D9B54F;
}

.intro-sub {
    margin: 22px auto 0;
    max-width: 620px;
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: #8FA3C0;
    text-wrap: pretty;
}

/* Montagen må gerne være bredere end teksten - den er sektionens billede, ikke en illustration
   inde i en spalte.

   Bredden følger skærmen (min-udtrykket) og er ikke låst til ét tal. På en 2560 px skærm stod
   den ellers som en lille ø midt i en meget bred flade.

   Selve PNG'en er beskåret til motivet. Den kom med 25 % gennemsigtig kant foroven og 23 %
   forneden, og de tomme kanter skubbede enhederne langt væk fra underrubrikken. Det er rettet i
   filen frem for med negative margener her - et billede, der opfører sig som alle andre
   billeder, er nemmere at flytte rundt på senere. */
.intro-shot {
    margin: 40px auto 0;
    max-width: min(1240px, 92vw);
}

.intro-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── De fem punkter under montagen ────────────────────────────────────────────────
   Sektionen er midterstillet - overskriften, underrubrikken og billedet skal stå i midten. Men
   BRØDTEKST skal ikke: en midterstillet tekstblok har en ny startkant for hver linje, og øjet
   skal lede efter begyndelsen hver eneste gang. Derfor text-align: left her, og kun her.

   Selve listen er stadig centreret på siden (margin: auto) - det er linjerne INDE i den, der
   står til venstre. */
.intro-points {
    margin: 52px auto 0;
    padding: 0;
    max-width: 820px;
    list-style: none;
    text-align: left;
    counter-reset: intro-point;
}

.intro-points li {
    position: relative;
    counter-increment: intro-point;

    /* Plads til tallet i venstre side. Teksten flugter i én kant hele vejen ned, uanset om
       tallet er ét eller to cifre. */
    padding: 0 0 0 92px;
    min-height: 64px;
    margin-bottom: 34px;

    color: #94A6C2;
    font-size: var(--fs-lede);
    line-height: 1.62;
    text-wrap: pretty;
}

.intro-points li:last-child {
    margin-bottom: 0;
}

/* TALLET. Stort, i guld, og halvt gennemsigtigt: det skal kunne ses på afstand og tælles uden
   at blive læst som en del af sætningen. En ren CSS-tæller frem for tal i teksten - så står de
   ikke også i oversættelsesfilerne, hvor de ville skulle rettes fem steder, hver gang et punkt
   flyttede plads, og hvor en skærmlæser ville sige dem to gange. */
.intro-points li::before {
    content: counter(intro-point);
    position: absolute;
    left: 0;
    top: -12px;

    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #D9B54F;
    opacity: 0.85;

    /* Den hårfine streg under tallet binder det til linjen ved siden af. Uden den svæver
       tallene i deres egen kolonne uden at høre til noget. */
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(217, 181, 79, 0.35);
}

@media (max-width: 640px) {
    .intro-points {
        margin-top: 34px;
    }

    /* På en telefon er der ikke 92 px at give væk i venstre side. Tallet flytter op OVER
       teksten i stedet - stadig stort, stadig til at tælle, men uden at æde spalten. */
    .intro-points li {
        padding: 0;
        min-height: 0;
        margin-bottom: 28px;
    }

    /* BLOCK OG IKKE INLINE-BLOCK. Hensigten ovenfor er, at tallet flytter op OVER teksten -
       men inline-block lader det flyde med i linjen, så teksten begynder lige efter cifret uden
       så meget som et mellemrum. margin-bottom gjorde ingen forskel, fordi der ikke var nogen
       linje at skubbe ned. Som block får tallet sin egen linje, og afstanden virker. */
    .intro-points li::before {
        position: static;
        display: block;
        width: fit-content;
        margin-bottom: 10px;
        font-size: 44px;
    }
}

/* Brødtekst og knapper under montagen. De står ikke i designudsnittet, men hører til sektionen -
   derfor deres egen luft, så de ikke klistrer op ad billedet. */
.intro-dark .hero-lede {
    margin: 8px auto 0;
    max-width: 640px;
}

.intro-dark .hero-cta {
    margin-top: 28px;
    padding-bottom: 84px;
}

@media (max-width: 640px) {
    .intro-dark {
        padding: 60px 18px 0;
    }

    .intro-eyebrow {
        letter-spacing: 0.24em;
        margin-bottom: 16px;
    }

    .intro-shot {
        margin-top: 32px;
    }

    .intro-dark .hero-cta {
        padding-bottom: 52px;
    }
}

/* ── LYS UDGAVE  (11. okt 2026 - ejerens ønske) ─────────────────────────────────────
   Sektionen står nu på lys bund med produktopstillingen (den sorte AYLO-boks står bedre på
   lyst). En anelse mørkere end den hvide sektion ovenover, så de to stadig kan skelnes.
   Fjern klassen intro-dark--light i Index.cshtml for at få den mørke tilbage. */
.intro-dark--light {
    /* ÉN neutral flade og ingen gløder (11. okt 2026, efter getorca.com). Gløderne og det blå
       skær gjorde fladen "designet"; en ren, let grå bund lader produktet være det eneste, der
       har farve. Grå og ikke blågrå - den kølige tone kæmpede med søkortenes blå på skærmene. */
    padding-top: 120px;
    background: #F5F5F4;
    border-top: 1px solid #E7E7E5;
    border-bottom: 1px solid #E7E7E5;
}

/* Typografien er rolig: én farve, ikke to. Det guldfarvede, store, fede udsagn råbte - her
   bærer overskriften sig selv, og anden linje er bare en tone lysere. */
.intro-dark--light .intro-eyebrow {
    color: #8A8F98;
    letter-spacing: 0.28em;
}

/* AYLO-mærket over overskriften (11. okt 2026): større end en almindelig eyebrow og med en
   rolig "vejrtrækning" - farven går fra grå mod den mørke tekstfarve og tilbage over 3,6 s, med
   et svagt skær, og ordet vokser 8 % og trækker sig sammen igen. transform rykker ikke noget
   andet på siden, så overskriften under står stille. Det skal ligne et instrument, der er tændt, ikke en knap der vil have et klik.
   Ingen bevægelse for dem, der har slået animationer fra i styresystemet. */
.intro-dark--light .intro-eyebrow {
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.36em;
    margin-right: -0.36em; /* bogstavafstanden lægger luft efter sidste bogstav - centrér uden den */
    animation: intro-eyebrow-puls 3.6s ease-in-out infinite;
}

@keyframes intro-eyebrow-puls {
    0%, 100% {
        color: #8A8F98;
        text-shadow: 0 0 0 rgba(217, 165, 33, 0);
        transform: scale(1);
    }
    50% {
        color: #3A3F47;
        text-shadow: 0 0 14px rgba(217, 165, 33, 0.35);
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-dark--light .intro-eyebrow {
        animation: none;
    }
}

@media (max-width: 640px) {
    .intro-dark--light .intro-eyebrow {
        font-size: 15px;
        letter-spacing: 0.3em;
        margin-right: -0.3em;
    }
}

/* TYNDERE SKRIFT (11. okt 2026, efter getorca.com): overskriften i 500 og brødteksten i 300.
   Inter er en variabel skrift, så vægt 300 ligger i den samme fil (se fonts.css). De fede
   indledninger i punkterne er 600 og ikke 700 - de skal kunne ses, ikke råbe. */
.intro-dark--light .intro-headline {
    font-weight: 500;
    letter-spacing: -0.025em;
    color: rgba(0, 0, 0, 0.86);
}

.intro-dark--light .intro-headline-gold {
    color: rgba(0, 0, 0, 0.42);
}

.intro-dark--light .intro-sub {
    font-weight: 300;
    color: rgba(0, 0, 0, 0.66);
}

/* Produktet STÅR på fladen i stedet for at svæve: en blød skygge under, som et foto taget
   på et bord. drop-shadow og ikke box-shadow - den følger PNG'ens egen form, ikke rektanglet. */
.intro-dark--light .intro-shot {
    margin-top: 56px;
    /* Mindre end den mørke udgaves 1240 px: på lys bund fyldte billedet hele synsfeltet, og
       produktet skal have luft omkring sig for at se ud af noget. */
    max-width: min(900px, 92vw);
}

.intro-dark--light .intro-shot img {
    filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.16)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.08));
}

/* Punkterne: små, rolige tal i stedet for 64 px guld. Teksten er den samme mørke tone som
   overskriften, bare lettere - og fed starten af et punkt er sort, som Orcas "Plan your trips". */
.intro-dark--light .intro-points {
    margin-top: 72px;
    max-width: 760px;
}

.intro-dark--light .intro-points li {
    padding-left: 56px;
    min-height: 0;
    margin-bottom: 26px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.74);
}

.intro-dark--light .intro-points li b {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.88);
}

.intro-dark--light .intro-points li::before {
    top: 2px;
    font-size: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.32);
    opacity: 1;
    padding-bottom: 0;
    border-bottom: none;
}

@media (max-width: 640px) {
    .intro-dark--light {
        padding-top: 80px;
    }

    .intro-dark--light .intro-points li {
        padding-left: 0;
    }

    .intro-dark--light .intro-points li::before {
        font-size: 20px;
        margin-bottom: 4px;
    }
}

.intro-dark--light .btn-ghost {
    color: rgba(0, 0, 0, 0.86);
    border-color: rgba(0, 0, 0, 0.18);
}

.intro-dark--light .btn-ghost:hover {
    color: #0092AA;
    border-color: #0092AA;
}

/* ── Havneguiden: telefon til venstre, tekst til højre ────────────────────────────
   Samme flade som kort-sektionen nedenunder (--bg-panel), så de to mørke sektioner hænger
   sammen og adskiller sig fra den næsten sorte intro ovenover. */
.marina-guide {
    padding: 84px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

/* Telefonen er den smalle spalte. Teksten får resten - fire punkter med to linjer hver har brug
   for bredden, mens en telefon ikke bliver bedre af at blive større. */
.marina-guide-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 64px;
    align-items: center;
}



.marina-guide-headline {
    margin: 14px 0 0;
    /* Portalens globale h2 er versaler og dæmpet - den er skrevet til små etiketter over en
       tabel inde i appen. Her er det en rigtig overskrift og skal stå som den er skrevet. */
    text-transform: none;
    text-align: left;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #FFFFFF;
    text-wrap: balance;
}

.marina-guide-lede {
    margin: 22px 0 0;
    max-width: 54ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #8FA3C0;
    text-wrap: pretty;
}

/* Tallet fremhæves, fordi det er sætningens påstand. Lysere frem for federe: fed skrift midt i
   et afsnit larmer, en lysere farve løfter uden at bryde linjen. */
.marina-guide-lede strong {
    font-weight: 500;
    color: #DCE6F4;
}

.point-list {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 22px;
}

.point-list li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    align-items: start;
}

/* Ikonet i en tonet flise. Farven kommer fra selve flisen og ikke fra et ikon-bibliotek: emoji
   tegnes af styresystemet og har deres egne farver, så flisen er det eneste sted, vi kan give
   dem en fælles form og en rolig baggrund at stå på. */
.point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
}

.point-icon--blue {
    background: #14294D;
    border: 1px solid #1E3A6B;
}

.point-icon--rose {
    background: #3A1B27;
    border: 1px solid #5C2A3C;
}

.point-icon--gold {
    background: #2E2413;
    border: 1px solid #4A3A1C;
}

.point-text {
    display: block;
    color: #8FA3C0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.point-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: 500;
}

/* Under 900 px stables de to spalter. Telefonen får et loft, så den ikke fylder hele skærmen
   på en tablet i højformat, hvor spalten ellers bliver meget bred. */
/* ── Split-sektionerne på en tablet ─────────────────────────────────────────────────
   Havneguide, logbog og analyse er alle "billede i den ene spalte, tekst i den anden", og
   alle tre gav billedet en maksimalbredde beregnet til en stor skærm. Mellem 900 og 1180 px
   blev det til en klemt tekstspalte - værst i analysen, hvor tablet-rammen tog 560 px og
   efterlod 337 px til teksten på en tablet i højformat på 1024.

   Loftet over billedspalten sænkes derfor i hele det bånd. Teksten skal have flertallet af
   bredden; billedet er illustration til den og ikke omvendt.

   De tre regler står ikke samlet, men hver for sig lige efter sin egen sektions grundregel.
   En media query giver ikke ekstra specificitet: står grundreglen senere i filen, vinder
   den, uanset at den anden står i en media query. Samlet ét sted virkede kun for
   havneguiden, hvis grundregel tilfældigvis står først. */

@media (max-width: 1180px) {
    .marina-guide-inner {
        grid-template-columns: minmax(180px, 270px) 1fr;
        gap: 40px;
    }
}

/* På en iPad i højformat (768 px) er der stadig plads til telefonen VED SIDEN AF teksten -
   den skal bare være mindre. Det er pointen i sektionen: man skal kunne se app'en og læse
   om den samtidig. Først under 700 px giver det op og stabler. */
@media (max-width: 1000px) {
    .marina-guide {
        padding: 64px 20px;
    }

    .marina-guide-inner {
        grid-template-columns: minmax(170px, 250px) 1fr;
        gap: 32px;
    }
}

@media (max-width: 700px) {
    .marina-guide {
        padding: 56px 20px;
    }

    .marina-guide-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        justify-items: center;
        text-align: left;
    }

    .phone {
        max-width: 280px;
    }
}


/* ── Telefonen: skærmbillede bagved, ramme ovenpå ─────────────────────────────────
   Rammen (phone-frame.png) har en GENNEMSIGTIG skærmflade. Skærmbilledet ligger derfor bagved
   og skinner igennem, i stedet for at være brændt ind i et færdigt montagebillede. Det er
   forskellen på at skifte én fil og at skulle have lavet en ny montage, hver gang appen ændrer
   sig.

   Tallene herunder er MÅLT på rammen, ikke gættet: åbningen er x 36..603 og y 80..1209 af
   640x1280. Ændres rammen, skal de fire procenter måles igen. */
.phone {
    position: relative;
    width: 100%;
}

.phone-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.phone-screen {
    position: absolute;
    left: 5.63%;
    top: 6.25%;
    width: 88.75%;
    height: 88.28%;
    overflow: hidden;
    /* Appens egen baggrundsfarve. Ses kun hvis skærmbilledet ikke helt udfylder åbningen -
       så er hullet mørkt som resten af appen frem for gennemsigtigt ned til sektionen. */
    background: #0B1020;
    /* Følger rammens indvendige hjørner, så skærmbilledet ikke stikker ud i kanterne. */
    border-radius: 6% / 3%;
}

/* Skærmbilledet fylder åbningens BREDDE og forankres i toppen - det beskæres ikke i siderne.

   Formaterne passer nemlig ikke sammen: åbningen er 0,50 (en høj, moderne telefon), mens
   skærmbilledet er 0,625. Fyldte vi hele åbningen med "cover", ville der ryge 12 % af hver
   side - målt, ikke gættet - og det skærer ind i kortene i appen.

   I stedet står appens egen baggrundsfarve nedenunder, så billedet glider over i en tom side
   frem for at slutte med en kant. Skærmbilledets status- og navigationsbjælke er klippet væk;
   telefonens eget ur og app-dock hører ikke hjemme i en produktvisning. */
.phone-screen img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Systemanalyse: tekst til venstre, skærm til højre ────────────────────────────
   Spejlvendt af havneguiden ovenfor, så de to sektioner ikke står som gentagelser af hinanden.
   Lidt mørkere flade end havneguiden, så øjet kan se, at det er en ny sektion. */
.analysis {
    padding: 84px 24px;
    background: #0A1020;
    border-bottom: 1px solid var(--border);
}

.analysis-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px);
    gap: 64px;
    align-items: center;
}

/* Guld her, cyan i havneguiden. De to sektioner ligger lige efter hinanden, og øjenbrynet er
   det første, man læser - to forskellige farver siger "nyt emne" hurtigere end en overskrift. */
.analysis-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #D9B54F;
}

.analysis-headline {
    margin: 16px 0 0;
    text-transform: none;
    text-align: left;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #FFFFFF;
    text-wrap: balance;
}

/* Anden linje i cyan. Guldet er brugt på øjenbrynet i denne sektion, og to guldflader lige over
   hinanden ville gøre det uklart, hvad der er etiket og hvad der er overskrift. */
.analysis-headline-accent {
    display: block;
    color: #4FA6DC;
}

.analysis-lede {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #8FA3C0;
    text-wrap: pretty;
}

.analysis-lede strong {
    font-weight: 500;
    color: #DCE6F4;
}

/* ── VIDERE TIL BATTERISIDEN ─────────────────────────────────────────────────────────
   Sektionen er den eneste på forsiden med en mørk bund, så linket kan ikke bare arve
   kortenes farve (--essentials-ink er sat til lys bund). Det tager i stedet sektionens
   egen accent - den samme, overskriftens anden linje står i.

   inline-block og margin foroven: det står under punktlisten som en afslutning, ikke som
   et femte punkt. */
.analysis-more {
    display: inline-block;
    margin: 28px 0 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #4FA6DC;
    text-decoration: none;
}

.analysis-more:hover,
.analysis-more:focus-visible {
    text-decoration: underline;
}

.analysis-text .point-list {
    margin-top: 34px;
}

/* ── Tabletten: skærmbillede bagved, ramme ovenpå ─────────────────────────────────
   Samme princip som .phone. Tallene er MÅLT på tablet-frame.png: åbningen er x 24..999 og
   y 48..655 af 1024x720. Skiftes rammen, skal de måles igen. */
.tablet {
    position: relative;
    width: 100%;
}

.tablet-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.tablet-screen {
    position: absolute;
    left: 2.34%;
    top: 6.67%;
    width: 95.31%;
    height: 84.44%;
    overflow: hidden;
    background: #0B1020;
    border-radius: 1.5% / 2%;
}

.tablet-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ── Alarmkort ────────────────────────────────────────────────────────────────────
   Bygget som markup og ikke klippet ud af et skærmbillede: teksten kan rettes, den kan læses
   højt af en skærmlæser, og den bliver ikke uskarp på en stor skærm. */
.alert-card {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #0E1526;
    border: 1px solid #1B2540;
}

.alert-card-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0B1020;
}

.alert-card--warn .alert-card-dot {
    background: #E0A82E;
}

.alert-card--ok .alert-card-dot {
    background: #4FBF7B;
}

.alert-card-body {
    display: block;
    min-width: 0;
}

.alert-card-head {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text);
}

.alert-card-time {
    font-weight: 400;
    color: var(--text-muted);
}

.alert-card-text {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: #8FA3C0;
}

.alert-card--warn .alert-card-text strong {
    color: #E0A82E;
    font-weight: 500;
}

.alert-card-value {
    color: #E0A82E;
    font-weight: 500;
}

/* Se forklaringen ved havneguidens tilsvarende regel. */
@media (max-width: 1180px) {
    .analysis-inner {
        grid-template-columns: 1fr minmax(280px, 400px);
        gap: 44px;
    }
}

/* Under 900 px stables spalterne. Skærmen lægges ØVERST, fordi den er sektionens blikfang -

   en liste med fire punkter er en dårlig start på et afsnit, man ikke har set billedet til. */
@media (max-width: 900px) {

    .analysis {
        padding: 56px 20px;
    }

    .analysis-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .analysis-visual {
        order: -1;
    }
}

/* ── Logbog: lys sektion med et togt-kort ─────────────────────────────────────────
   Den eneste lyse sektion i den lange mørke stribe fra intro'en og ned. Det er med vilje:
   fire mørke sektioner i træk løber sammen, og et hvidt brud her giver øjet et hvil, inden
   analyse, smart kontrol og AIS tager over igen. Overskriften nulstiller den globale h2-regel,
   der ellers gør alle h2'er små, versale og dæmpede. */
.logbook {
    padding: 96px 24px;
    background: #FFFFFF;
}

.logbook-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 460px);
    gap: 72px;
    align-items: center;
}

.logbook-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #3E86B5;
}

.logbook-headline {
    margin: 16px 0 0;
    text-transform: none;
    text-align: left;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #0B1220;
    text-wrap: balance;
}

.logbook-headline-accent {
    display: block;
    color: #3E86B5;
}

.logbook-lede {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #4A5568;
    text-wrap: pretty;
}

.logbook-lede strong {
    color: #0B1220;
    font-weight: 500;
}

/* Punktlisten deles med havneguiden og analysen, men de står på mørk bund. Her vendes kun
   farverne - form, mål og afstande bliver, hvor de er, så de tre lister ligner hinanden. */
.point-list--light .point-icon--light {
    background: #EAF3FA;
    border: 1px solid #D3E5F3;
}

.point-list--light .point-text {
    color: #6B7C90;
}

.point-list--light .point-text strong {
    color: #0B1220;
}

/* Togt-kortet. Kvadratisk, fordi fotoet er kvadratisk: så er der ingen tvivl om, hvor meget
   af billedet der er synligt, og panelet lander samme sted uanset skærmbredde. */
.logbook-visual {
    display: flex;
    justify-content: center;
}

.voyage-card {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: hidden;
    background: #0B1220;
    box-shadow: 0 18px 44px rgba(15, 26, 46, 0.18);
}

.voyage-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Panelet er næsten uigennemsigtigt og ikke gennemsigtigt med sløring: vandet under det er
   uroligt, og små hvide tal på et uroligt billede bliver svære at læse. */
.voyage-stats {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 16px 18px 18px;
    border-radius: 14px;
    background: rgba(9, 19, 34, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.voyage-stats-head {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6FB0DA;
}

.voyage-grid {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

/* min-width: 0 - ellers nægter en gitterspalte at blive smallere end sit længste ord, og
   "Roskilde → Kalundborg" ville skubbe de to andre spalter sammen. */
.voyage-grid > div {
    min-width: 0;
}

.voyage-grid dt {
    font-size: 12px;
    font-weight: 500;
    color: #8296AD;
}

.voyage-grid dd {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: #FFFFFF;
}

/* Under 900 px stables de to spalter, og kortet får et loft, så det ikke fylder hele skærmen
   på en tablet i højformat. Samme greb som i havneguiden. */
/* Se forklaringen ved havneguidens tilsvarende regel. */
@media (max-width: 1180px) {
    .logbook-inner {
        grid-template-columns: 1fr minmax(220px, 320px);
        gap: 40px;
    }
}

/* Samme som havneguiden: togt-kortet bliver ved med at stå til højre for teksten på en iPad
   i højformat, bare mindre. Kortet er kvadratisk, så det koster ikke meget bredde. */

@media (max-width: 1000px) {
    .logbook {
        padding: 64px 20px;
    }

    .logbook-inner {
        grid-template-columns: 1fr minmax(200px, 280px);
        gap: 32px;
    }

    /* Kortet er nu 320 px, og tre statistik-spalter deri bliver 85 px - dér brækker både
       "SW 12 kn" og rutenavnene midt over. To spalter, og ruten får hele bredden, fordi
       den er den eneste værdi med to stednavne i sig. */
    .voyage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voyage-grid > div:last-child {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {
    .logbook {
        padding: 56px 20px;
    }

    .logbook-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        justify-items: center;
    }

    .logbook-text {
        max-width: 620px;
    }

    .voyage-card {
        max-width: 380px;
    }
}


/* På en telefon bliver tre spalter til to: 11 px etiketter i tre spalter på 320 px bliver til
   ét ord pr. linje, og panelet vokser sig højere end fotoet over det. */
@media (max-width: 480px) {
    .voyage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voyage-stats {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px 14px 16px;
    }
}

/* ── Smart kontrol: tekst oven på en baggrundsvideo ───────────────────────────────
   Samme konstruktion som heroen øverst: video i bunden, en mørkning ovenpå, indholdet øverst.
   Rækkefølgen i z-index er dét, der gør teksten læselig - uden mørkningen imellem ville hvid
   tekst forsvinde i skum og himmel, hver gang klippet nåede et lyst billede. */
.smart {
    position: relative;
    overflow: hidden;
    padding: 110px 24px;
    background: #0A1020;
    border-bottom: 1px solid var(--border);
}

.smart-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Toner frem, når første billede er klar - ellers blinker der en sort flade mellem
       posterbilledet og videoens start. Se scriptet ved sektionen. */
    opacity: 0;
    transition: opacity 900ms ease;
}

.smart-video.is-ready {
    opacity: 1;
}

/* Mørkningen er KRAFTIGST TIL VENSTRE, hvor teksten står, og lettere til højre, så man stadig
   kan se, hvad videoen viser. En ensartet mørkning ville enten skjule videoen eller efterlade
   teksten ulæselig - den kan ikke gøre begge dele.

   Tallene er ikke valgt på øjemål. Klippet er målt: bag teksten har det middel-luma 84 og en
   lyseste pixel på 144 af 255. Regnet på den lyseste pixel - altså det værst tænkelige sted -
   giver mørkningen herunder 6,4:1 for den gyldne etiket og 5,5:1 for manchetten, som er de to
   svageste tekstfarver i sektionen. Begge ligger over WCAG's 4,5:1. Skifter I klippet ud med
   et lysere et, så mål det igen, før I letter mere:
     ffmpeg -i klip.mp4 -vf "crop=iw*0.45:ih:0:0,fps=1,signalstats,metadata=print" -f null - */
.smart::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 10, 22, 0.72) 0%, rgba(6, 10, 22, 0.55) 42%, rgba(6, 10, 22, 0.15) 100%),
        linear-gradient(180deg, rgba(6, 10, 22, 0.35) 0%, rgba(6, 10, 22, 0) 30%);
}

.smart-inner {
    position: relative;
    z-index: 2;
    max-width: var(--page-max);
    margin: 0 auto;
}

.smart-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #D9B54F;
}

.smart-headline {
    margin: 18px 0 0;
    max-width: 15ch;
    text-transform: none;
    text-align: left;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

/* Guldet begynder MIDT i sætningen og ikke på en ny linje - det er sådan, designet gør det, og
   det binder de to halvdele sammen i stedet for at dele overskriften i to. */
.smart-headline-accent {
    color: #D9B54F;
}

.smart-lede {
    margin: 26px 0 0;
    max-width: 48ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #C6D2E4;
}

.smart-lede strong {
    font-weight: 500;
    color: #FFFFFF;
}

/* Chips. En liste og ikke bare tekst: det ER en opremsning, og en skærmlæser skal kunne sige
   hvor mange der er. Punkttegnene er slået fra, formen kommer fra rammen. */
.smart-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.smart-chips li {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    color: #E8EDF5;
    font-size: var(--fs-sm);
    /* Glasagtig flade, så chippen hører til videoen bagved i stedet for at ligge som en
       udklippet knap oven på den. */
    backdrop-filter: blur(6px);
}

.smart-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 0;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid rgba(217, 181, 79, 0.45);
    background: rgba(217, 181, 79, 0.10);
    color: #D9B54F;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.smart-note-icon {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 640px) {
    .smart {
        padding: 64px 18px;
    }

    .smart-headline {
        max-width: none;
    }

    .smart-note {
        display: flex;
    }
}

/* Har brugeren bedt om mindre bevægelse, står posterbilledet i stedet - samme valg som heroen. */
@media (prefers-reduced-motion: reduce) {
    .smart-video {
        display: none;
    }
}

/* ── AIS: centreret tekst og fire kort over et baggrundsfoto ──────────────────────
   Fotoet ligger som baggrund på selve sektionen og ikke som et <img>: det er dekoration, ikke
   indhold, og et billede uden betydning skal ikke fylde i en skærmlæsers oplæsning af siden.

   Mørkningen er lagt oven på i samme erklæring. To lag: en kølig blå tone over hele fladen, så
   fotoet hører til sitets farveholdning frem for at være et fremmedlegeme, og en lodret
   gradient, der er tungest i midten, hvor teksten står. */
.ais-data {
    position: relative;
    padding: 96px 24px;
    background:
        linear-gradient(180deg, rgba(8, 14, 28, 0.92) 0%, rgba(8, 14, 28, 0.86) 50%, rgba(8, 14, 28, 0.94) 100%),
        linear-gradient(180deg, rgba(20, 48, 92, 0.45) 0%, rgba(20, 48, 92, 0.45) 100%),
        url("/img/ais-bg.jpg") center / cover no-repeat;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.ais-data-inner {
    max-width: var(--page-max);
    margin: 0 auto;
}

.ais-data-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #6FC7E8;
}

.ais-data-headline {
    margin: 18px auto 0;
    max-width: 20ch;
    text-transform: none;
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-wrap: balance;
}

.ais-data-headline-accent {
    display: block;
    color: #6FC7E8;
}

.ais-data-lede {
    margin: 22px auto 0;
    max-width: 62ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #C6D2E4;
    text-wrap: pretty;
}

.ais-data-lede strong {
    font-weight: 500;
    color: #6FC7E8;
}

/* auto-fit frem for fire faste spalter: fjerner eller tilføjer man et kort, fordeler gitteret
   sig selv i stedet for at efterlade et hul. */
/* auto-fit gav 3 spalter på en iPad i højformat, og så stod det fjerde kort alene på
   linjen nedenunder. Fire på én linje ville kræve spalter på 165 px, hvor overskrifterne
   brækker midt i et ord - derfor 2x2 dernede i stedet. Det er også pænere: kortene får
   samme proportion som resten af sektionen. */
.ais-data-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ais-data-cards li {
    padding: 24px 22px;
    border-radius: 14px;
    /* Halvgennemsigtig frem for massiv: fotoet skal anes gennem kortene, ellers ligger de som
       fire udklippede firkanter oven på et billede, de ikke hører sammen med. */
    background: rgba(10, 17, 34, 0.72);
    border: 1px solid rgba(120, 160, 210, 0.20);
    backdrop-filter: blur(4px);
}

.ais-data-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #14294D;
    border: 1px solid #1E3A6B;
    font-size: 19px;
    line-height: 1;
}

.ais-data-cards h3 {
    margin: 18px 0 8px;
    font-size: var(--fs-h3);
    font-weight: 500;
    color: #FFFFFF;
    text-transform: none;
}

.ais-data-cards p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: #8FA3C0;
}

.ais-data-footnote {
    margin: 40px auto 0;
    max-width: 70ch;
    font-size: var(--fs-xs);
    font-style: italic;
    line-height: 1.6;
    color: #7C8CA6;
}

@media (max-width: 900px) {
    .ais-data-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ais-data {
        padding: 60px 18px;
    }

    .ais-data-cards {
        margin-top: 32px;
    }
}

/* To spalter er rigtigt på en tablet, men på en telefon bliver de 157 px brede, og så står
   der to ord pr. linje i brødteksten. Én spalte hele vejen ned. */
@media (max-width: 560px) {
    .ais-data-cards {
        grid-template-columns: 1fr;
    }
}

/* ── Lys sektion ──────────────────────────────────────────────────────────────────
   Sektionen under heroen er hvid i stedet for mørkeblå. Farverne sættes som en modifikator på
   selve sektionen og ikke ved at rette :root: resten af sitet - dashboard, alarmer, konto - er
   stadig mørkt, og en ændring i rodvariablerne ville følge med derover.

   Alt der står på en mørk flade i forvejen, skal have en modpart her. Uden det ville
   overskrifter og brødtekst stå lyse på hvidt og være usynlige - og det er præcis den slags,
   der først opdages, når nogen kigger på siden. */
.features--light {
    background: #FFFFFF;
}

.features--light .features-intro h1,
.features--light .section-title,
.features--light .feature-card h3 {
    color: #0B1220;
}

.features--light .hero-lede,
.features--light .feature-card p {
    color: #4A5568;
}

/* Kortene vender om: mørk flade med skygge nedad bliver til en lys flade med en tydelig kant.
   Skyggen dæmpes kraftigt - den samme sorte skygge, der giver dybde på mørkt, ser ud som snavs
   på hvidt. */
.features--light .feature-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
    border-color: #E2E8F2;
    box-shadow: 0 6px 18px rgba(15, 26, 46, 0.07);
}

/* Lysstriben langs overkanten antyder lys ovenfra på en mørk flade. På en hvid flade er der
   intet at lyse op, og striben ville bare gøre kanten uskarp. */
.features--light .feature-card::before {
    display: none;
}

.features--light .feature-card:hover {
    border-color: #C9D6E8;
    box-shadow: 0 12px 26px rgba(15, 26, 46, 0.11);
}

/* Overskrift/pitch/CTA flyttet ned i selve "Alt hvad du skal bruge"-sektionen (sektion 2) i
   stedet for at ligge hen over fotoet - se Index.cshtml. */
.features-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.features-intro h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    /* Kraftigere negativ tracking end h2: jo større graden er, jo mere luft har Space Grotesk
       mellem bogstaverne, og på 58px falder ordene fra hinanden uden den her. */
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    text-wrap: balance;
}

.hero-lede {
    color: var(--text-muted);
    font-size: var(--fs-lede);
    line-height: var(--lh-body);
    margin: 0 auto 30px;
    max-width: 52ch;
    /* Undgår ét enligt ord på sidste linje i et centreret afsnit, hvor det er mest synligt. */
    text-wrap: pretty;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Features ───────────────────────────────────────────────────────────── */

/* .section-title er samlet ét sted øverst i filen. Den stod tidligere OGSÅ her med font-size:
   28px, og da den her kom sidst i filen, vandt den - så titlerne var 28px selvom reglen ovenfor
   sagde noget andet. Præcis den slags kollision er umulig at få øje på i browseren, fordi
   resultatet ser "næsten rigtigt" ud. Lad den blive ét sted. */

.features {
    padding: 72px 24px;
}

.features-inner {
    max-width: calc(var(--page-max) - 80px);
    margin: 0 auto;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
}

.feature-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
}

.feature-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

/* Brødtekst i kort. Orddeling er sat til fordi dansk har lange sammensatte ord -
   "farvandsafmærkning", "gæstesejlerpriser" - som i en smal spalte efterlader store huller i
   højremargen når de springer til næste linje. lang="da" er sat i _PublicLayout, så browseren
   ved hvor den må dele. */
.feature-card p,
.ais-card p,
.beta-point p,
.marina-points li {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
    hyphens: auto;
    /* Kun ORD PÅ 12 TEGN OG DEROVER må deles, med mindst 5 tegn før og 4 efter.
       Uden grænsen delte browseren også korte ord - "di-stance", "automa-tisk" - og fire brud i
       et lille afsnit larmer mere, end den ujævne højremargen gjorde. Med grænsen rammer den
       kun de lange sammensatte ord, som er dem der reelt laver huller: "brændstofforbrug",
       "farvandsafmærkning", "batterispænding". */
    hyphenate-limit-chars: 12 5 4;
    text-wrap: pretty;
}

/* ── Indtoning ved scroll ─────────────────────────────────────────────────────
   Klassen .reveal sættes af JAVASCRIPT (se bunden af Index.cshtml), ikke i markup'en. Det er
   bevidst: uden JavaScript bliver den aldrig sat, og så står alt synligt som normalt. Skrev vi
   den direkte i HTML'en, ville en fejl i scriptet - eller en browser med JS slået fra - efterlade
   en helt tom side.

   Kun opacity og transform animeres. De to kan browseren flytte uden at lægge siden om igen;
   animerer man fx højde eller margin, hakker det på en telefon. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Respekterer systemets indstilling. Bevægelse er pynt her - indholdet skal frem uanset hvad. */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Forsidens kort: fælles materiale ─────────────────────────────────────────────
   Alle kortagtige flader på forsiden deler ét udtryk, så siden hænger sammen. Tre greb, og de
   virker kun sammen:
     1) en svag lodret gradient, så fladen har en top og en bund i stedet for at være ensfarvet
     2) en blød skygge nedad, så kortet ligger OVEN PÅ baggrunden frem for i den
     3) en hårfin lysstribe langs overkanten (::before), som antyder lys ovenfra
   Uden dem var kortene bare baggrund med en streg omkring. */

.feature-card,
.ais-card,
.beta-point {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-panel) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    /* Bevægelsen ligger på transform+box-shadow, ikke på fx margin/top: de to kan browseren
       animere uden at lægge siden om igen. */
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.feature-card::before,
.ais-card::before,
.beta-point::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    /* Toner ud mod siderne - en streg i fuld bredde ville læses som en kant, ikke som lys. */
    background: linear-gradient(90deg, transparent, var(--surface-hi), transparent);
}

.feature-card:hover,
.ais-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.42);
    border-color: #2A3E68;
}

/* ── Nautiske kort ────────────────────────────────────────────────────────────── */

.charts {
    padding: 84px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.charts-inner {
    max-width: calc(var(--page-max) - 80px);
    margin: 0 auto;
}

/* Messing, samme redaktionelle rolle som sektionsmærket. */
.charts-subhead {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-warm);
}

/* Landene som "chips" frem for en punktopstilling: det er en dækningsliste man SKIMMER for at
   se om ens eget farvand er med, ikke noget man læser linje for linje. */
.chart-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.chart-countries li {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.charts-points li:last-child {
    padding-bottom: 0;
}

/* Forbeholdet står som en selvstændig, læsbar linje under sektionen - ikke som mikroskopisk
   fodnote. Det er en sikkerhedsoplysning, og et kort der bliver forvekslet med et godkendt
   søkort er præcis den fejl der gør skade. */
.charts-disclaimer {
    max-width: 760px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* ── AIS ──────────────────────────────────────────────────────────────────────── */

.ais {
    padding: 84px 24px;
    /* Samme baggrund som selve siden, ikke .bg-panel som .steps bruger - de to sektioner ligger
       lige efter hinanden, og to panel-flader i træk ville flyde sammen til én stor kasse. */
    background: var(--bg);
}

.ais-inner {
    max-width: calc(var(--page-max) - 80px);
    margin: 0 auto;
}

.ais-intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

/* Sektionsmærket er REDAKTIONELT - derfor messing og ikke cyan. Det er også dét, der bryder
   monokromien: uden en anden farve end den cyan der i forvejen sidder på ikoner, knapper og
   links, får øjet intet at hvile på ned gennem siden. */
.ais-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 14px;
    border: 1px solid rgba(200, 169, 110, 0.42);
    border-radius: 999px;
    background: rgba(200, 169, 110, 0.07);
    color: var(--accent-warm);
    font-size: 11px;
    font-weight: 500;
    /* Bredere sperring end brødteksten: mærket skal læses som en etiket, ikke som en sætning. */
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ais-lede {
    margin: 18px auto 0;
    max-width: var(--measure);
    color: var(--text-muted);
    font-size: var(--fs-lede);
    line-height: var(--lh-body);
    text-wrap: pretty;
}

.ais-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ais-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
}

.ais-card h3,
.feature-card h3 {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.ais-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Pladser til skærmbilleder. Rammerne har et fast billedformat, så siden IKKE hopper når de
   rigtige billeder sættes ind - og så hullerne er synlige og lige store imens. Udskift
   .ais-shot-empty med et <img>; aspect-ratio og ramme sidder på figuren. */
/* Ulige spalter: det liggende tablet-billede får mest plads, det stående telefon-billede mindre.
   Med to lige spalter fik telefon-billedet et bredt tomt felt på hver side. */
.ais-shots {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.ais-shot {
    margin: 0;
}

/* Skærmbillede-ramme med FAST HØJDE og object-fit: contain.
   Grunden er at billederne kommer i to former: liggende fra tabletten om bord (16:10) og stående
   fra telefonen (10:16). Med et fast BILLEDFORMAT ville et stående skærmbillede blive skåret
   midt over i en liggende ramme - og et brugerfladebillede tåler ikke beskæring, så er pointen
   væk. Med fast HØJDE i stedet står de i stedet side om side i samme størrelse, som en tablet
   ved siden af en telefon, og intet klippes bort. */
.shot-frame,
.ais-shot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-panel);
    overflow: hidden;
}

/* Rammen er tegnet som en ENHED, ikke som et billedudsnit: mørkt kabinet, smal ramme hele vejen
   rundt, og en dyb skygge der løfter den fra siden. Forskellen er stor - et skærmbillede uden
   kabinet ligner dokumentation, det samme billede i et kabinet ligner et produktfoto. Kabinettet
   er tegnet i CSS og ikke et billede, så det skalerer og skifter tema med resten. */
.shot-frame {
    padding: 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, #16202F 0%, #0A121D 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.45),
        /* Hårfin lyskant øverst indeni - kanten på et rigtigt kabinet fanger lys. */
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shot-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Mindre radius end kabinettet - som på en rigtig skærm, hvor glasset sidder inden for kanten. */
    border-radius: 10px;
}

/* Den brede variant: ét billede i fuld sektionsbredde, til det skærmbillede der bærer sektionen.
   Her sættes højden IKKE - billedet fylder bredden og bestemmer selv højden. Med en fast højde
   ville et liggende billede få sorte bjælker i siderne, og hele pointen med et hero-billede er
   at det fylder. */
.shot-frame--wide {
    height: auto;
    margin-bottom: 40px;
    /* Bredere kant og kraftigere skygge: kabinettet er større, så rammen skal følge med, ellers
       ser den for tynd ud i forhold til fladen. */
    padding: 16px;
    border-radius: 26px;
    box-shadow:
        0 44px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shot-frame--wide img {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 12px;
}

.ais-shot-empty {
    padding: 16px;
    border-style: dashed;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.ais-shot figcaption {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.ais-callout {
    margin-top: 40px;
    padding: 28px 32px;
    background: var(--bg-panel);
    /* Accent-kant i venstre side frem for hele rammen - markerer at det her er sektionens
       egentlige pointe, uden at gøre det til endnu et kort i rækken ovenfor. */
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
}

.ais-callout h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.ais-callout p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* Forbeholdet skal kunne LÆSES - det er en sikkerhedsoplysning, ikke jura der gemmes væk.
   Mindre og dæmpet, men ikke usynlig. */
.ais-smallprint {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px !important;
}

/* ── Marina-databasen ─────────────────────────────────────────────────────────── */

.marinas-promo {
    padding: 84px 24px;
    /* Panel-flade, så den skiller sig fra AIS-sektionen lige over og "sådan kommer du i gang"
       lige under - tre sektioner i træk på samme baggrund flyder sammen til én lang væg. */
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.marinas-promo-inner {
    max-width: calc(var(--page-max) - 80px);
    margin: 0 auto;
}

.marina-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Skifter side på hver anden split-sektion (kort → marinaer → logbog → lys), så øjet ikke
   møder den samme spalteopdeling seks gange i træk ned gennem siden. Kun rækkefølgen ændres -
   markup'en beholder teksten først, hvilket er dét mobilvisningen og skærmlæsere følger. */
.marina-split--reverse .marina-split-text {
    order: 2;
}

.marina-split--reverse .ais-shot {
    order: 1;
}

.marina-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.marina-points li {
    padding: 0 0 20px 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Skillelinjen toner ud mod højre i stedet for at stoppe brat - en streg i fuld styrke hele
   vejen tegner et gitter, og punkterne skal læses som en liste, ikke som en tabel. */
.marina-points li:not(:last-child) {
    margin-bottom: 20px;
    border-bottom: none;
    background: linear-gradient(90deg, var(--border) 0%, transparent 92%) bottom left / 100% 1px no-repeat;
}

/* Overskriften i hver punkt står på sin egen linje - en <strong> midt i brødteksten ville
   drukne, og punkterne skal kunne skimmes. */
.marina-points strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 15px;
}

/* Rammerne har fast højde (se .shot-frame) - intet billedformat at sætte her længere. */

/* ── Lysstyring ───────────────────────────────────────────────────────────────── */

/* Forsiden veksler mellem sidebaggrund og panel hele vejen ned - kort(panel), AIS(bg),
   marinaer(panel), logbog(bg), lys(panel), alarmer(bg) - så sektionerne kan skelnes fra
   hinanden uden skillelinjer. Indsætter du en ny sektion, så bryd ikke rækkefølgen. */
.lights {
    padding: 84px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── Overvågning og alarmer ───────────────────────────────────────────────────── */

.watch {
    padding: 84px 24px;
    background: var(--bg);
}

/* ── Beta-rekruttering ────────────────────────────────────────────────────────── */

.beta {
    padding: 84px 24px;
    /* Svag accent-tone i stedet for panel/baggrund-vekslen ovenfor - sektionen SKAL skille sig
       ud fra funktionsafsnittene, ellers læses tilbuddet som endnu en feature. Holdt dæmpet:
       en fuld cyan flade ville skrige, og resten af siden er mørk og rolig. */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 194, 224, 0.13), transparent 62%),
        var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.beta-inner {
    max-width: 860px;
    margin: 0 auto;
}

.beta-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--accent);
    /* Mørk tekst på den lyse accent - cyan på cyan ville være ulæseligt. */
    color: #05233A;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.beta h2 {
    margin: 0 0 18px;
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    text-wrap: balance;
    color: var(--text);
    /* Nulstiller de globale h2-regler (versaler, dæmpet farve, lille skrift), som er skrevet
       til overskrifter INDE i portalen - ikke til en forside-sektion. */
    text-transform: none;
    letter-spacing: normal;
}

.beta-lede {
    max-width: var(--measure);
    margin: 0 auto;
    color: var(--text-muted);
    font-size: var(--fs-lede);
    line-height: var(--lh-body);
    text-wrap: pretty;
}

.beta-lede strong {
    color: var(--text);
}

.beta-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
    text-align: left;
}

.beta-point {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 20px;
}

.beta-point h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.beta-point p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* .hero-cta er centreret via flex i forvejen - her skal knapperne bare have luft over sig. */
.beta .hero-cta {
    justify-content: center;
}

.watch-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* start og ikke center: billed-spalten er to skærmbilleder høj, og en lodret centreret
       tekst ville få et stort tomt felt over overskriften. */
    align-items: start;
    margin-top: 48px;
}

.watch-split-text h3,
.ais-callout h3 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: var(--lh-heading);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.watch-split-text p,
.ais-callout p {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: var(--measure);
    text-wrap: pretty;
}

.watch-split-text p:last-child {
    margin-bottom: 0;
}

.watch-split-text strong {
    color: var(--text);
}

/* Ligger allerede i en spalte - de to skærmbilleder stables derfor, i stedet for at blive
   presset ned i to meget smalle kolonner. */
.watch-shots {
    grid-template-columns: 1fr;
    margin-top: 0;
}

/* ── Sådan virker det ───────────────────────────────────────────────────── */

.steps {
    padding: 72px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Samme baggrundsbillede som heroen, bare med en tungere ensfarvet scrim ovenpå (mere tekst
   at holde læsbart her end i selve heroen) - se .hero--photo. */
.steps--photo {
    background:
        linear-gradient(rgba(5, 9, 20, 0.88), rgba(5, 9, 20, 0.88)),
        url("/images/hero-ocean.png") center / cover no-repeat;
    border-top-color: rgba(30, 46, 80, 0.6);
    border-bottom-color: rgba(30, 46, 80, 0.6);
}

.steps-inner {
    max-width: calc(var(--page-max) - 80px);
    margin: 0 auto;
}

.step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.step {
    text-align: center;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 194, 224, 0.12);
    color: var(--accent);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 14px;
}

.step h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.step p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 32ch;
    margin-inline: auto;
}

/* ── Kom i gang / køb ───────────────────────────────────────────────────────────
   Sidens sidste argument og dens eneste prisliste. Lys bund som logbogen, men en anelse
   køligere end det hvide, så de tre hvide trinkort og det hvide abonnementskort kan ses som
   kort og ikke bare som tekst på en flade. */
.getstarted {
    padding: 96px 24px;
    background: #F2F5FA;
}

.getstarted-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    text-align: center;
}

.getstarted-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    /* --accent (#00C2E0) er sat til mørk bund og bliver for lys her: den ville stå på 2,1:1
       mod den lyse flade. Denne er den samme kulør, kørt ned til 4,7:1. */
    color: #1B7FA6;
}

.getstarted-headline {
    margin: 16px 0 0;
    text-transform: none;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #0B1220;
    text-wrap: balance;
}

.getstarted-headline-accent {
    color: var(--accent-warm);
}

.getstarted-lede {
    margin: 20px auto 0;
    max-width: 56ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #4A5568;
    text-wrap: pretty;
}

/* ── De tre trin ────────────────────────────────────────────────────────────────
   En <ol>, fordi rækkefølgen ér indholdet: man kan ikke montere før man har bestilt. Numrene
   kommer fra en tæller og ikke fra tre håndskrevne 1/2/3 - så bliver de aldrig forkerte, hvis
   der bliver skudt et trin ind i midten. */
.step-cards {
    counter-reset: step;
    list-style: none;
    margin: 52px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.step-cards li {
    padding: 30px 28px 32px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E4EAF3;
    box-shadow: 0 6px 18px rgba(15, 26, 46, 0.06);
}

.step-cards li::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border-radius: 13px;
    background: #14213D;
    color: var(--accent-warm);
    font-size: 17px;
    font-weight: 600;
}

.step-cards h3 {
    margin: 0;
    text-transform: none;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: #0B1220;
}

.step-cards p {
    margin: 14px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: #6B7C90;
}

/* ── De to priskort ─────────────────────────────────────────────────────────────
   Kun to kort, og de skal stå midt på siden og ikke spænde over hele bredden - en pris i en
   spalte på 560 px læses som en pris, den samme pris strakt over 1180 px læses som en tabel. */
.plans {
    margin: 34px auto 0;
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Tre rækker, som begge kort deler (subgrid): indhold, knap, fodnote. Den højeste krop
       bestemmer første række, så knapperne lander i samme højde - også selv om kun det lyse
       kort har en fodnote under sin knap. */
    grid-template-rows: auto auto auto;
    column-gap: 24px;
    row-gap: 0;
    text-align: left;
}

.plan {
    /* Ankeret for tilbudsmærkatet - se .plan-badge. Uden den ville mærkatet lægge sig i
       forhold til det nærmeste positionerede element længere oppe og lande et andet sted. */
    position: relative;
    padding: 32px 30px 34px;
    border-radius: 18px;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
}

.plan-body {
    display: flex;
    flex-direction: column;
}

.plan--package {
    background: linear-gradient(160deg, #142744 0%, #0C1830 100%);
    box-shadow: 0 18px 40px rgba(12, 24, 48, 0.28);
}

.plan--sub {
    background: #FFFFFF;
    border: 1px solid #E4EAF3;
    box-shadow: 0 6px 18px rgba(15, 26, 46, 0.06);
}

.plan-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.plan--package .plan-eyebrow {
    color: #4FB6DC;
}

.plan--sub .plan-eyebrow {
    color: #1B7FA6;
}

/* Tallet og enheden står på samme linje med forskellig vægt: det er tallet, øjet skal ramme,
   og "DKK/mo." må ikke konkurrere med det. */
.plan-price {
    margin: 14px 0 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.plan-price strong {
    font-size: clamp(38px, 4.4vw, 52px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.plan-unit {
    font-size: var(--fs-lede);
    font-weight: 500;
}

.plan--package .plan-price strong { color: #FFFFFF; }
.plan--package .plan-unit         { color: #93A6C2; }
.plan--sub .plan-price strong     { color: #0B1220; }
.plan--sub .plan-unit             { color: #6B7C90; }

.plan-note {
    margin: 12px 0 0;
    padding-bottom: 22px;
    font-size: var(--fs-sm);
}

/* Stregen hører til noten og er ikke et element for sig: så kan et punkt tilføjes eller
   fjernes uden at nogen skal huske at flytte en <hr> med. */
.plan--package .plan-note {
    color: #93A6C2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.plan--sub .plan-note {
    color: #6B7C90;
    border-bottom: 1px solid #E4EAF3;
}

.plan-list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 16px;
    /* Ingen flex: 1 her. Listen blev strakt til kortets højde, og så delte grid'en den ekstra
       plads ud MELLEM punkterne - derfor stod det mørke korts punkter langt fra hinanden. */
    align-content: start;
}

.plan-list li {
    position: relative;
    padding-left: 26px;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.plan-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
}

.plan--package .plan-list li          { color: #D7E0EE; }
.plan--package .plan-list li::before   { color: var(--accent-warm); }
.plan--sub .plan-list li              { color: #3E4A5C; }
.plan--sub .plan-list li::before       { color: #1B7FA6; }

/* Knappen fylder hele kortets bredde. Den er sidens hovedhandling, og et kort med én knap i
   bunden læses hurtigere, når knappen ikke skal findes - den ér bunden. */
.plan-buy {
    margin-top: 28px;
    padding: 16px 24px;
    border-radius: 10px;
    background: var(--accent-warm);
    color: #14213D;
    /* Ét trin over brødteksten og derfor sat fast: knappen er sidens hovedhandling, og den
       skal ikke skrumpe sammen med den tekst, den står under. */
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: background-color 160ms ease, transform 160ms ease;
}

.plan-buy:hover {
    background: #D9BC7F;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Tilføjelsen om tabletten. Står efter listen og før knappen, adskilt af sin egen streg,
   så den ikke læses som endnu et punkt i det, pakken indeholder. */
.plan-addon {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: #93A6C2;
}

.plan-addon strong {
    color: #FFFFFF;
    font-weight: 500;
}

.plan-footnote {
    margin: 24px 0 0;
    font-size: var(--fs-xs);
    font-style: italic;
    line-height: 1.5;
    color: #8A97A8;
}

/* Under 900 px bliver tre trin til én spalte og de to priskort ligeså. Tre kort ved siden af
   hinanden på en telefon giver spalter på 100 px, hvor hvert ord får sin egen linje. */
/* Trinene stod som tre kort i fuld bredde og 110 px høje - en meget bred, meget tom kasse.
   Tre spalter giver 224 px hver på en iPad i højformat, og det er nok til fire linjers
   tekst. Priskortene kan også være ved siden af hinanden dernede (348 px hver). */
@media (max-width: 1000px) {
    .getstarted {
        padding: 64px 20px;
    }

    .step-cards {
        margin-top: 36px;
        gap: 16px;
    }

    .step-cards li {
        padding: 24px 20px 26px;
    }

    .step-cards li::before {
        width: 40px;
        height: 40px;
        margin-bottom: 18px;
    }

    .plans {
        max-width: none;
        gap: 16px;
    }

    .plan {
        padding: 26px 22px 28px;
    }
}

@media (max-width: 700px) {
    .getstarted {
        padding: 56px 20px;
    }

    .step-cards,
    .plans {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .plans {
        max-width: 460px;
    }
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.public-footer {
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
}

/* Var flex med space-between og flex-wrap. Så snart der ikke var plads til begge blokke på
   én linje, faldt linkene ned under brandet og efterlod en tom højreside i halvdelen af
   fodens højde. Et gitter med to spalter holder dem side om side helt ned til 700 px, hvor
   der faktisk ikke er plads mere - og bredden følger nu resten af siden (1180, ikke 1100). */
.public-footer-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 40px;
    align-items: start;
}


.public-footer-brand {
    max-width: 320px;
}

.public-footer-brand .brand-logo {
    height: 30px;
    margin-bottom: 12px;
}

.public-footer-brand p {
    font-size: 13px;
    line-height: 1.6;
}

/* max-content på spalterne, så de er præcis så brede som deres længste link og ikke
   strækkes ud af gitteret. "Help" har kun ét punkt, efter support-siden røg ud. */
.public-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, max-content));
    gap: 48px;
}

/* HER STOD 700 PX, og begrundelsen var, at "på en iPad i højformat (768) er der rigeligt".
   Det passede ikke. Regn spalterne sammen: brandet skal mindst have 240, mellemrummet tager 40,
   og de tre link-spalter mindst 120 + 120 + 200 med to mellemrum på 48 = 536. Plus 48 i
   sidepolstring bliver det 864 px, før noget som helst kan stå på én linje.

   På en 768 px skærm manglede der altså knap hundrede pixels, og de blev til en side, der var
   bredere end skærmen: man kunne rulle sidelæns, og mailadressen i kontaktspalten stak ud over
   kanten. 900 giver luft over de 864 og rammer stadig først EFTER en iPad i højformat. */
@media (max-width: 900px) {
    .public-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}



.public-footer-links h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.public-footer-links a {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.public-footer-links a:hover {
    color: var(--accent);
}

.public-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    text-align: center;
    font-size: 12px;
}

/* ── Support-side ───────────────────────────────────────────────────────── */

.support-hero {
    padding: 56px 24px 24px;
    text-align: center;
}

.support-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

.support-hero h1 {
    font-size: 34px;
    margin: 0 0 12px;
}

.support-body {
    padding: 24px 24px 72px;
}

.support-grid {
    max-width: calc(var(--page-max) - 80px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 32px;
    align-items: start;
}

.support-contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.contact-hours {
    font-size: 12px;
}

.support-form-panel {
    margin-top: 0;
}

/* ── Responsivt (offentligt site) ───────────────────────────────────────── */

@media (max-width: 900px) {
    .hero--photo {
        min-height: 36vh;
    }

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

    /* AIS-kortene går til én kolonne allerede her, ikke to som .feature-grid: teksten i dem er
       et par linjer længere, og to smalle spalter blev til høje, tynde søjler. */
    .ais-grid {
        grid-template-columns: 1fr;
    }

    .ais-shots {
        grid-template-columns: 1fr;
    }

    /* Lavere rammer på små skærme - 420px fylder næsten en hel telefonskærm i højden. */
    .shot-frame,
    .ais-shot-empty {
        height: 320px;
    }

    /* Den brede har allerede height:auto - kun bundmargenen strammes på små skærme. */
    .shot-frame--wide {
        margin-bottom: 28px;
    }

    /* Begge split-visninger til én spalte: teksten skal stå FØR billedet, hvilket den gør af
       sig selv når gitteret falder sammen, da tekst-blokken står først i markup'en. */
    .marina-split,
    .watch-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* I én spalte skal teksten ALTID stå først - ombytningen ovenfor er en ren
       skrivebords-variation og giver ingen mening når alt ligger under hinanden. */
    .marina-split--reverse .marina-split-text {
        order: 1;
    }

    .marina-split--reverse .ais-shot {
        order: 2;
    }

    .beta-points {
        grid-template-columns: 1fr;
    }



    .step-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {
    /* Ingen h1-undtagelse laengere - --fs-display er flydende og skalerer selv. */

    .ais,
    .charts,
    .marinas-promo,
    .lights,
    .watch,
    .beta {
        padding: 56px 20px;
    }

    .ais-callout {
        padding: 22px 20px;
    }

    .hero--photo {
        min-height: 26vh;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* Tre spalter kræver 3 x 120 px plus to mellemrum - 424 px, før polstringen er talt med.
       En telefon på 390 px har ikke dem, og resultatet var en side, man kunne rulle sidelæns i.
       auto-fit lader spalterne brydes ned i stedet: to og én, eller én og én, alt efter plads. */
    .public-footer-links {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 28px 24px;
    }
}

/* ── Responsivt (sidebar/dashboard) ─────────────────────────────────────── */

@media (max-width: 900px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    .sidebar-top {
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
        gap: 16px;
    }

    .sidebar-boat-card {
        display: none;
    }

    .sidebar-nav {
        flex-direction: row;
    }

    .sidebar-nav-label {
        display: none;
    }

    .sidebar-bottom {
        border-top: none;
        border-left: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
    }

    .sidebar-user-email {
        display: none;
    }

    .sidebar-logout-form button {
        width: auto;
    }

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

    .dash-row-2,
    .dash-row-3 {
        grid-template-columns: 1fr;
    }

    .help-fab {
        display: none;
    }
}

@media (max-width: 520px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .content-header {
        flex-direction: column;
    }

    .page {
        padding: 20px 16px 48px;
    }
}

/* ── Butikken: kurv, checkout, betaling, kvittering ─────────────────────────────────
   Siderne bruger _PublicLayout, som er mørk - modsat de lyse sektioner på forsiden. Farverne
   herunder er derfor det mørke sæt og ikke en gentagelse af købssektionens. */
.shop {
    /* 132 px foroven og ikke 88: topbjælken er position:fixed og ligger hen over indholdet, så
       uden det ville overskriften starte bag menuen. */
    padding: 132px 24px 88px;
    background: var(--bg);
    min-height: 70vh;

    /* ── Butikkens egen skriftstørrelse, ét hak under resten af sitet ──────────────
       Forsiden skal sælge og må gerne tale højt; kurven og checkout er en formular, man skal
       igennem, og der er mange linjer på skærmen på én gang. Et hak ned gør siden roligere og
       giver plads til, at felterne kan stå med luft omkring sig.

       Sat som VARIABLER og ikke som font-size på hver enkelt regel: alt herinde læser dem i
       forvejen, så det er ét sted at rette - og reglerne kan blive ved med at stå ét sted,
       uanset hvor mange sider butikken får. */
    --fs-h3: 17px;
    --fs-lede: 16px;
    --fs-body: 14px;
    --fs-sm: 14px;
}

.shop-inner {
    max-width: var(--page-max);
    margin: 0 auto;
}

.shop-inner--narrow {
    max-width: 720px;
}

.shop-title {
    margin: 0 0 8px;
    text-transform: none;
    text-align: left;
    /* Følger med et hak ned, som resten af butikken - se variablerne i .shop. En overskrift på
       40 px over en formular med 14 px felter er to forskellige sider. */
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.026em;
    color: var(--text);
}

.shop-lede {
    margin: 0 0 32px;
    font-size: var(--fs-lede);
    color: var(--text-muted);
}

.shop-empty {
    margin-top: 24px;
    font-size: var(--fs-lede);
    color: var(--text-muted);
}

/* ── Kurven ────────────────────────────────────────────────────────────────────── */
.basket {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 40px;
    align-items: start;
}

.basket-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.basket-line h2 {
    margin: 0;
    text-transform: none;
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0;
}

.basket-line-desc {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Forklaringen på en linje, kunden ikke selv har lagt i. Gul og ikke rød: det er en oplysning,
   ikke en fejl. */
.basket-line-locked {
    margin: 10px 0 0;
    font-size: var(--fs-sm);
    color: #D9B54F;
}

.basket-line-qty .qty-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.basket-line-qty input {
    width: 68px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
}

.basket-line-qty-fixed {
    display: inline-block;
    padding: 8px 14px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.basket-line-price {
    text-align: right;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.basket-remove {
    display: block;
    margin: 8px 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

.basket-remove:hover {
    color: var(--error);
}

.basket-summary {
    padding: 26px 24px 28px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.basket-summary h2,
.checkout-summary h2 {
    margin: 0 0 18px;
    text-transform: none;
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0;
}

.basket-totals {
    margin: 0;
    display: grid;
    gap: 12px;
}

.basket-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.basket-totals dt {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.basket-totals dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-sm);
}

.basket-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.basket-total dt,
.basket-total dd {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--text);
}

.basket-vat {
    margin: 14px 0 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.basket-checkout {
    display: block;
    margin-top: 22px;
    text-align: center;
}

.basket-suggest {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.basket-suggest h2 {
    margin: 0 0 16px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: var(--text);
    letter-spacing: 0;
}

.basket-suggest ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.basket-suggest li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.basket-suggest-name {
    flex: 1;
    color: var(--text);
    font-size: var(--fs-sm);
}

.basket-suggest-price {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ── Checkout ──────────────────────────────────────────────────────────────────── */
.checkout {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 40px;
    align-items: start;
}

.checkout-step {
    margin: 0 0 26px;
    padding: 24px 24px 26px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* Trinnummeret er et tal i en cirkel og ikke bare "1." - det gør det til en rækkefølge, man
   kan se sig igennem, frem for tre kasser der tilfældigvis står under hinanden. */
.checkout-step legend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--text);
}

.checkout-step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #06121A;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.checkout-step-note {
    margin: 0 0 18px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

.checkout-step label {
    display: block;
    margin: 16px 0 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.checkout-step input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text);
    font-size: var(--fs-body);
}

.checkout-step input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.checkout-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

.checkout-summary {
    padding: 26px 24px 28px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    position: sticky;
    top: 96px;
}

.checkout-lines {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.checkout-lines li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--fs-sm);
    color: var(--text);
}

.checkout-line-qty {
    color: var(--text-muted);
}

.checkout-line-price {
    white-space: nowrap;
    color: var(--text-muted);
}

.checkout-back {
    display: inline-block;
    margin-top: 18px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Betaling og kvittering ────────────────────────────────────────────────────── */
.pay-pending {
    margin: 28px 0;
    padding: 24px 26px;
    border-radius: 14px;
    background: rgba(217, 181, 79, 0.10);
    border: 1px solid rgba(217, 181, 79, 0.35);
}

.pay-pending h2 {
    margin: 0 0 10px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: #D9B54F;
    letter-spacing: 0;
}

.pay-pending p {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.pay-pending-note {
    font-weight: 500;
}

/* Udviklingsværktøjet skal SE ud som et udviklingsværktøj. Stribet baggrund og stiplet kant, så
   ingen kan tage fejl af det og en rigtig betalingsknap - heller ikke på et skærmbillede i en
   supportsag. */
.pay-dev {
    margin: 28px 0;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px dashed var(--error);
    background: repeating-linear-gradient(
        45deg,
        rgba(212, 95, 95, 0.06),
        rgba(212, 95, 95, 0.06) 10px,
        transparent 10px,
        transparent 20px);
}

.pay-dev h2 {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-xs);
    color: var(--error);
}

.pay-dev p {
    margin: 0 0 14px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.receipt-license {
    margin: 28px 0;
    padding: 24px 26px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--accent);
}

.receipt-license h2 {
    margin: 0 0 12px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: var(--text);
    letter-spacing: 0;
}

.receipt-license-note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.receipt-address {
    margin: 28px 0;
}

.receipt-address h2 {
    margin: 0 0 8px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: var(--text);
    letter-spacing: 0;
}

.receipt-address p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-muted);
}

/* ── Kurv i topbjælken ─────────────────────────────────────────────────────────── */
/* Kompakt: 40x40 og ikke en knap med tekst. Se kommentaren ved markuppen i _PublicLayout -
   bredden her er det, der afgør, om menuen kan stå på én linje. */
.basket-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text);
}

.basket-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* Tallet ligger OVEN PÅ ikonet i stedet for ved siden af - ellers ville det brede knappen ud
   igen, og det var netop dét, der var problemet. */
.basket-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #06121A;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* "Buy now" er en button i en form nu og ikke et link - knappen arver ikke browserens
   standardudseende, og formularen må ikke lægge afstand ind under kortet. */
.plan-buy-form {
    margin: 0;
    display: block;
}

button.plan-buy {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.btn-sm {
    padding: 8px 14px;
    font-size: var(--fs-sm);
}

/* Etiketter kun til skærmlæsere. Ikke display:none - det ville også skjule dem for
   skærmlæseren, og så var etiketten der lige så godt ikke. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Butikkens sidemargen ─────────────────────────────────────────────────────────
   Indholdet er 1180 px bredt, og siden havde 24 px luft i siderne hele vejen ned til 900 px og
   20 px derunder. På en tablet betød det, at kort, felter og knapper stod helt ude ved kanten -
   der er ikke plads til at holde om skærmen uden at røre ved noget.

   Margenen vokser derfor, når skærmen bliver smallere end indholdet, og først på en telefon
   bliver den lille igen: dér ér 40 px i hver side en tiendedel af skærmen, som teksten mangler. */
@media (max-width: 1240px) {
    .shop {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 900px) {
    .shop {
        padding: 108px 32px 64px;
    }

    .basket,
    .checkout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .checkout-summary {
        position: static;
    }

    .basket-line {
        grid-template-columns: 1fr auto;
        gap: 12px 16px;
    }

    .basket-line-main {
        grid-column: 1 / -1;
    }
}

/* Telefon: margenen ned igen. 32 px i hver side er en sjettedel af en 375 px skærm, og det er
   plads, teksten har mere brug for end kanten har. */
@media (max-width: 560px) {
    .shop {
        padding: 100px 18px 56px;
    }
}

/* Kontaktblokken i footeren. Adressen skal kunne læses som en adresse - altså med linjeskift
   og ikke som en sætning - og telefon/mail skal kunne trykkes på en telefon. */
.contact-details {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--text-muted);

    /* En mailadresse har ingen steder, en browser må dele den - der er hverken mellemrum eller
       bindestreg i "kontakt@aylomarine.com". Uden dette bliver den ét ubrydeligt ord, der gør
       spalten bredere end den plads, den har fået, og skubber hele siden ud i bredden.
       anywhere frem for break-word: break-word deler kun, hvis ordet står alene på linjen. */
    overflow-wrap: anywhere;
}

.contact-details strong {
    color: var(--text);
    font-weight: 500;
}

.contact-details a {
    color: var(--text-muted);
}

.contact-details a:hover {
    color: var(--accent);
}

/* min-width og ikke width: spalten skal have plads til en adresse på flere linjer, men den må
   ikke kunne kræve mere, end der er. 200 px var det, der sammen med de to andre spalter gjorde
   footeren bredere end en tablet - se skærmskiftet ved 900 px ovenfor. Nu er den et ØNSKE
   (min-content som gulv), så gitteret kan trykke den sammen frem for at skubbe siden ud. */
.public-footer-contact {
    min-width: min(200px, 100%);
}

/* ── Handelsbetingelser ─────────────────────────────────────────────────────────── */
.legal {
    padding: 132px 24px 88px;
    background: var(--bg);
}

.legal-inner {
    max-width: 760px;
    margin: 0 auto;
}

.legal-meta {
    margin: 0 0 36px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Nulstiller den globale h2-regel, der gør alle h2'er små, versale og dæmpede - i et
   juridisk dokument skal overskrifterne kunne skimmes for at finde det rigtige afsnit. */
.legal-inner h2 {
    margin: 40px 0 12px;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--text);
}

.legal-inner p {
    margin: 0 0 14px;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 68ch;
}

.legal-inner strong {
    color: var(--text);
}

.legal-inner .contact-details {
    margin-bottom: 18px;
}

/* Lister i et juridisk dokument. Arver ikke fra p-reglen ovenfor, så farve, linjeafstand og
   bredde skal sættes igen - ellers står punkterne mørkere og tættere end brødteksten lige over
   dem, og afsnittet falder fra hinanden at se på. */
.legal-inner ul {
    margin: 0 0 14px;
    padding-left: 22px;
    max-width: 68ch;
}

.legal-inner li {
    margin: 0 0 8px;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-muted);
}

/* Cookie-tabellen (afsnit 9). Rulles vandret på en telefon frem for at presse kolonnerne,
   for cookienavnene kan ikke brydes. */
.legal-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 6px 0 18px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.legal-table th,
.legal-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    color: var(--text-muted);
    line-height: 1.55;
}
.legal-table th { color: var(--text); font-weight: 500; }
.legal-table code { color: var(--text); white-space: nowrap; font-size: 0.92em; }

/* De vigtigste tal samlet i én kasse øverst. En indløser og en kunde leder efter det samme -
   hvad koster det, hvor tit trækkes der, hvordan siger man op - og skal kunne finde det uden at
   læse ti afsnit først. */
.legal-facts {
    margin: 0 0 36px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.legal-facts h2 {
    margin-top: 0 !important;
}

.legal-facts dl {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 10px 24px;
    margin: 0;
}

.legal-facts dt {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.legal-facts dd {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--text);
}

@media (max-width: 560px) {
    .legal-facts dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .legal-facts dd {
        margin-bottom: 12px;
    }
}

/* ── Betalingsmidler ────────────────────────────────────────────────────────────── */
.pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

/* Hvid bund på hver mærkat, uanset hvor rækken står - se _PaymentMethods for hvorfor: Visas
   mærke er mørkeblåt og ville forsvinde i den mørke sidefod, og kortselskabernes egne
   retningslinjer kræver alligevel en rolig, lys baggrund med luft omkring mærket. */
.pay-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid #D8E0EC;
}

/* HØJDEN styres her og bredden følger med af sig selv. Filerne er tegnet i vidt forskellige
   størrelser - Visa er 426x137, de tre andre 24 px høje - og lod man dem bestemme selv, ville
   Visa stå tre gange for stort ved siden af de andre.

   max-width holder det bredeste mærke (MobilePay, 90x24) fra at skubbe rækken ud på en
   telefon; det skrumper så en anelse frem for at bryde linjen. */
.pay-mark img {
    display: block;
    height: 18px;
    width: auto;
    max-width: 74px;
    object-fit: contain;
}

@media (max-width: 900px) {
    .legal {
        padding: 108px 20px 64px;
    }
}

/* Accept-fluebenet. Hele linjen er klikbar (label om både felt og tekst), fordi et 13x13
   afkrydsningsfelt er svært at ramme på en telefon. */
.checkout-accept {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 24px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    cursor: pointer;
}

.checkout-accept input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.checkout-accept span {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

.checkout-accept a {
    color: var(--accent);
    text-decoration: underline;
}

/* ── Fornyelse: valg af installation i checkout ───────────────────────────────────
   Radioknapper og ikke en dropdown - hvert valg har to linjer, bådens navn og hvornår licensen
   udløber, og det er netop udløbsdatoen, der afgør hvilken båd man er ved at forlænge. Se
   Checkout.cshtml. */
.install-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}

/* Den valgte skal kunne ses uden at man skal lede efter en lille prik. :has() kan læses af alle
   browsere, der er i drift i dag; kan den ikke, står rammen bare ens, og radioknappen selv viser
   stadig valget - der går ikke noget i stykker. */
.install-choice:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

.install-choice > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.install-choice .muted {
    font-size: var(--fs-sm);
}

/* Forlæng-knappen på profilsiden. Streget af fra abonnementstallene ovenfor, så den ikke ser ud
   som endnu en oplysning om det, der allerede er købt. */
.install-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.install-actions .muted {
    margin-top: 8px;
    font-size: var(--fs-sm);
}

/* ── Landevælgeren i footeren ─────────────────────────────────────────────────────
   Etiket og vælger på én linje, centreret over ophavsretslinjen. Den, der er rullet hele vejen
   ned og først dér opdager, at prisen står i den forkerte valuta, skal ikke rulle op igen. */
.public-footer-prefs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px 0;
    border-top: 1px solid var(--border);
    margin-top: 28px;
}

.pref-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Knappen er KUN til browsere uden JavaScript - onchange på <select> indsender allerede
   formularen. Den skjules derfor for alle andre, men den skal blive i markup'en: en vælger, der
   kun virker med JavaScript, er en vælger, der ikke virker for alle. */
.pref-apply {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

/* Klassen sættes af scriptet i _PublicLayout - står den i CSS'en alene, ville knappen være
   skjult, også når JavaScript ikke kører. */
.js .pref-apply {
    display: none;
}

/* ── Tilbudsmærkat og førpris ─────────────────────────────────────────────────────
   Mærkatet ligger absolut i toppen af priskortet og HALVT uden for det (top: -14px), så det
   ser påklistret ud frem for indbygget - det er dét, der får øjet til at læse det som et
   mærkat og ikke som endnu en overskrift.

   .plan har position: relative netop for det - uden den ville mærkatet lægge sig i forhold til
   det nærmeste positionerede element længere oppe og lande et helt andet sted på siden. */
.plan-badge {
    position: absolute;
    top: -14px;
    left: 24px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: #06121F;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* Kampagnen er en gave og ikke en rabat, og den har derfor sin egen farve. Guld frem for
   accentfarven: det er den farve, resten af siden bruger til dét, der er værd at lægge mærke
   til, og to mærkater i samme farve ville se ud som om de sagde det samme. */
.plan-badge--gift {
    background: #D9B54F;
    color: #1A1206;
}

/* Førprisen. Dæmpet og mindre end prisen - den er en oplysning, ikke et tilbud, og må ikke
   kunne forveksles med det tal, kunden skal betale. */
.plan-was {
    margin-left: 10px;
    color: var(--text-muted);
    font-size: var(--fs-body);
    font-weight: 500;
    text-decoration-thickness: 1.5px;
}

.plan-gift {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(217, 181, 79, 0.10);
    border: 1px solid rgba(217, 181, 79, 0.28);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* Kurven: samme mærkat i det små ved linjeprisen, og "Gratis" frem for 0,00 på en
   kampagnelinje - et nul i en priskolonne ligner en fejl. */
.basket-line-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #06121F;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.basket-line-free {
    color: #D9B54F;
    font-weight: 500;
}

/* ── Landevælgeren ────────────────────────────────────────────────────────────────
   Bygget som en knap, vi selv tegner, med browserens egen <select> liggende usynlig hen over.
   Se _CountryPicker.cshtml for hvorfor: feltet skal kunne vise et flag, og det kan en <select>
   ikke - men alt det, en <select> kan (tastatur, skærmlæser, telefonens hjulvælger, og den
   virker uden JavaScript), skal blive, hvor det er.

   DEN MÅ GERNE SES. Den forrige udgave stod uden ramme og uden baggrund, med valutakoden som
   eneste tekst, og resultatet var, at ingen fandt den. En ramme, et flag og en pil koster
   plads i bjælken - den plads kom fra, at sprogvælgeren blev sløjfet, se StoreCountries. */
.country-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Ansigtet: dét man ser. pointer-events er slået fra, så klikket går IGENNEM til feltet
   nedenunder - ellers ville knappen fange klikket, og listen ville aldrig åbne. */
.country-picker-face {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Flaget har en hårfin kant. Uden den flyder et flag med hvid kant - Danmarks, Norges - ud i en
   lys baggrund og ser ud som om halvdelen mangler. */
.country-flag {
    display: block;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.country-picker-currency {
    color: var(--text-muted);
    font-weight: 500;
}

.country-picker-caret {
    color: var(--text-muted);
}

/* Selve feltet. Usynligt, men PÅ PLADS oven på ansigtet - ikke flyttet ud af skærmen: det er
   det, der gør, at et klik rammer, at fokus-rammen står det rigtige sted, og at telefonen
   åbner sin vælger ud for knappen. */
.country-picker-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    cursor: pointer;
    font: inherit;
}

.country-picker-select:hover + .country-picker-face,
.country-picker:hover .country-picker-face {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
}

/* Feltet er gennemsigtigt, så dets egen fokus-ramme kan ikke ses. Rammen tegnes derfor på
   ansigtet - ellers ville den, der tabber sig gennem siden, miste vælgeren af syne. */
.country-picker-select:focus-visible + .country-picker-face {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Optionerne tegnes af styresystemet og arver IKKE farverne ovenfor. Uden dette står sort
   tekst på sort baggrund i en mørk browser, altså en liste, der ser tom ud. */
.country-picker-select option {
    background: #0E1526;
    color: #E7EEF7;
}

.header-prefs {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* I TOPBJÆLKEN VISES KUN FLAGET, ved alle bredder.

   Ikke en smagssag: bjælken er 1180 px bred uanset hvor stor skærmen er, og der er ikke plads
   til et landenavn ved siden af logoet, seks menupunkter og to knapper - se regnestykket ved
   .public-header-inner. "United Kingdom" skrevet helt ud var netop dét, der brækkede menuen til
   to linjer.

   Flaget alene er stadig til at få øje på og til at forstå: det har en ramme og en pil, altså
   formen på noget, man kan trykke på. Landets navn står i title (musen) og i etiketten
   (skærmlæseren), og i sidefoden står vælgeren skrevet helt ud. */
.country-picker--compact .country-picker-name,
.country-picker--compact .country-picker-currency {
    display: none;
}

.country-picker--compact .country-picker-face {
    gap: 6px;
    padding: 6px 8px;
}

/* Under 1060 px brækker bjælken alligevel, og vælgeren skal ikke være dét, der skubber den om
   på anden linje - den flyttes ned til burgeren i stedet for at stå ved siden af logoet. */
@media (max-width: 1060px) {
    .header-prefs {
        order: 3;
        margin-left: 0;
        margin-right: 8px;
    }
}

/* ══ 3D-karrusellen øverst på forsiden ═══════════════════════════════════════════════
   Tallene - 620 px mellem kortene, 28 graders drejning, kurven på overgangen - står i
   scriptet i Index.cshtml, fordi de skal regnes pr. kort. Her står kun det, der ikke afhænger
   af, hvilken plads kortet har.

   UDEN JAVASCRIPT er der intet perspektiv og ingen absolut placering: kortene falder ned som
   en almindelig lodret liste, og siden er stadig hel. Klassen is-live sættes af scriptet, og
   den er dét, der tænder karrusellen. Se kommentaren i Index.cshtml. */

.features-eyebrow {
    display: block;
    margin-bottom: 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.features--light .section-title {
    text-align: center;
    letter-spacing: -0.03em;
}

.feature-carousel {
    margin-top: 56px;
    /* Fokusrammen om hele karrusellen ville tegne en kasse rundt om noget, der stikker ud over
       sine egne kanter. Den enkelte prik og det aktive kort har deres egen. */
    outline: none;
}

/* Kortene i yderkanten rager MED VILJE ud over sektionen - det er dét, der viser, at der er
   flere. Men de må ikke kunne trække en vandret rullebjælke ud på hele siden; med fem kort
   var scenen bredere end vinduet, og man kunne rulle sidelæns i hele forsiden.

   TO ERKLÆRINGER, og rækkefølgen er hele pointen. clip er det rigtige - hidden gør elementet
   til en rullebeholder og slår position:sticky fra for alt indeni - men clip kom først i Safari
   16, og en iPad, der ikke er opdateret, springer linjen over uden at sige noget. Så står
   hidden tilbage, og siden ruller i det mindste ikke sidelæns. Browsere, der kan clip,
   overskriver med den næste linje.

   Se også .feature-carousel.is-live nedenfor: på en tablet skrumper kortene, men scenen er
   stadig bredere end skærmen - det er MENINGEN, og det er dét, der klippes her. */
.features {
    overflow-x: hidden;
    overflow-x: clip;
}

.feature-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.carousel-card {
    width: min(560px, 92vw);
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ── Tændt: kortene lægges oven på hinanden i et perspektiv ──────────────────────── */
/*
   KORTETS MÅL STÅR ÉT STED, som to variabler. De bruges af kortet, af sporets højde og - via
   kortets faktiske bredde - af afstanden mellem kortene i scriptet. Sættes de om ved et
   skærmskift, følger alt tre med af sig selv; stod tallene skrevet ud hvert sted, ville et nyt
   skærmskift skulle rettes tre steder, og det tredje ville blive glemt.
*/
.feature-carousel.is-live {
    /* FLYDENDE OG IKKE TRIN. Der stod først faste mål med tre skærmskift, men et skærmskift
       rammer kun de bredder, man har tænkt på: en iPad i landskab (1024-1366 px) landede
       stadig på 460-560 px, altså halvdelen af skærmen.

       42vw holder kortet på omtrent den samme andel af skærmen hele vejen ned - det er den
       andel, 560 px har på en almindelig bærbar. Loftet på 560 gør, at et skrivebord ikke får
       et kort, der vokser i det uendelige; gulvet på 280 gør, at en telefon stadig har noget at
       læse i.

       Højden vokser LANGSOMMERE end bredden (26vw mod 42vw). Teksten under billedet fylder de
       samme ord uanset bredden, så et smalt kort skal bruge forholdsvis mere højde; blev højden
       skaleret med det samme forhold, ville de sidste linjer blive skåret af. */
    --card-w: clamp(280px, 42vw, 560px);
    --card-h: clamp(380px, 26vw + 160px, 460px);
}

.feature-carousel.is-live .feature-track {
    display: block;
    position: relative;
    /* Luft over og under, så skyggen under det forreste kort ikke bliver klippet. */
    height: calc(var(--card-h) + 60px);
    perspective: 1600px;
    perspective-origin: 50% 48%;
    cursor: grab;
    user-select: none;
    /* Kortene ude i siderne skal kunne stikke ud over sektionen. */
    overflow: visible;
    touch-action: pan-y;
}

.feature-carousel.is-live .feature-track:active {
    cursor: grabbing;
}

.feature-carousel.is-live .carousel-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-w);
    height: var(--card-h);
    /* Centreringen sker i selve transform'en - translate(-50%, -50%) står forrest i den
       streng, scriptet sætter. Negative margener ville skulle være halvdelen af målene, og så
       skulle de rettes hver gang kortet skifter størrelse; med procenter følger de med. */
    transform-origin: center center;
    /* Kurven svinger en anelse forbi og tilbage - det er dét, der får kortene til at føles
       som noget, der har vægt, frem for noget der bare flytter sig. */
    transition: transform 0.58s cubic-bezier(0.34, 1.14, 0.64, 1), opacity 0.4s ease,
                box-shadow 0.4s ease;
    cursor: pointer;
}

.feature-carousel.is-live .carousel-card.is-active {
    cursor: grab;
    box-shadow: 0 32px 72px rgba(0, 50, 70, 0.18), 0 4px 16px rgba(0, 0, 0, 0.07);
}

/* Trækket må ikke gribe fat i selve billedet - browseren ville starte sit eget billedtræk,
   og karrusellen ville slippe markøren midt i bevægelsen. */
.feature-carousel.is-live .carousel-card img {
    -webkit-user-drag: none;
    user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
    .feature-carousel.is-live .carousel-card {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   TELEFON: ALMINDELIG SLIDER I STEDET FOR 3D-STAKKEN

   Stakken bygger på, at der er plads til et kort i midten OG et stykke af naboerne på
   hver side. Den plads findes på en iPad; på en telefon gør den ikke. Kortene endte
   oven i hinanden, det forreste dækkede naboernes overskrifter, og drejningen gjorde
   teksten på siderne ulæselig - man kunne se, at der var noget, men ikke hvad.

   Her er det i stedet ét kort ad gangen, der scroller vandret og hugger fast. Det er
   den bevægelse, en telefon i forvejen kan: fingeren bestemmer farten, browseren står
   for inertien, og der er ingen transformationer at tage fejl af.

   SCRIPTET SÆTTER KLASSEN, ikke et skærmskift i CSS'en alene. Både stakken og
   slideren har logik i scriptet (prikker, dialog), og to sæt regler, der skiftede
   uafhængigt af hinanden, ville før eller siden være uenige om, hvilken visning der
   var i brug.
   ══════════════════════════════════════════════════════════════════════════════════ */
.feature-carousel.is-swipe .feature-track {
    display: flex;
    gap: 16px;
    padding: 4px 20px 20px;
    margin: 0 -20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Fingeren skal kunne trække vandret; lodret scroll hører til siden. */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.feature-carousel.is-swipe .feature-track::-webkit-scrollbar {
    display: none;
}

.feature-carousel.is-swipe .carousel-card {
    position: static;
    /* 86% og ikke 100%: kanten af det næste kort skal kunne ses, ellers er der intet,
       der fortæller, at der ER mere at bladre til. Prikkerne siger det, men kanten
       siger det uden at skulle læses. */
    flex: 0 0 86%;
    max-width: 420px;
    height: auto;
    transform: none;
    opacity: 1;
    scroll-snap-align: center;
    transition: none;
}

/* ── Kortets indhold ─────────────────────────────────────────────────────────────── */
.carousel-card-media {
    position: relative;
    margin: 0;
    height: 58%;
    overflow: hidden;
}

.carousel-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Billedet toner ud i kortets egen hvide flade, så der ikke er en hård kant mellem
   skærmbilledet og teksten. Skærmbillederne er mørke, og overgangen er dét, der binder de to
   halvdele sammen til ét kort. */
.carousel-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(255, 255, 255, 0.97) 100%);
    pointer-events: none;
}

.carousel-card-pill {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    padding: 5px 13px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #0099BB;
}

.carousel-card-body {
    padding: 22px 32px 30px;
}

.carousel-card-body h3 {
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #0B1C25;
}

.carousel-card-body p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.68;
    color: #5A7A8A;
}

/* ── Prikkerne ───────────────────────────────────────────────────────────────────── */
.feature-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.feature-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #CCE2EA;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.26, 0.64, 1);
}

/* Den aktive prik strækkes til en streg frem for at skifte farve alene - formen kan ses af
   den, der ikke skelner de to blå fra hinanden. */
.feature-dot.is-active {
    width: 24px;
    background: #0099BB;
}

/* Uden JavaScript er prikkerne tomme knapper, der ikke gør noget. */
.feature-carousel:not(.is-live) .feature-dots {
    display: none;
}

/* ── Modalvinduet ──────────────────────────────────────────────────────────────────
   Stort med vilje. Kortet i karrusellen skal fange øjet på to sekunder; det her skal kunne
   læses. Derfor er der plads til en indledning, en punktliste og to skærmbilleder i fuld
   udgave - se data-detail på kortene i Index.cshtml.

   ÅBNINGEN OG LUKNINGEN ER ANIMERET, og det kræver tre ting af et <dialog>, som ikke er
   indlysende:

     1) display skifter fra none til block, når dialogen åbner, og en overgang kan ikke
        starte i samme øjeblik, elementet dukker op. Derfor sættes klassen is-open først i
        næste billede - se openModal i Index.cshtml.
     2) close() fjerner dialogen med det samme. Udtoningen ville derfor aldrig blive set, så
        der ventes på transitionend, før der lukkes.
     3) ::backdrop er sit eget element og arver ingenting - den skal have sin egen overgang. */

.feature-modal {
    /* CENTRERET EKSPLICIT, og de tre linjer skal alle tre være der.

       Browserens egen regel for <dialog> er "inset: 0; margin: auto" - det er dén, der normalt
       centrerer et modalvindue. Sætter man så selv left: 50 % uden at rydde op, står boksen med
       BÅDE en venstrekant på 50 % OG en højrekant på 0 OG automatiske margener. Så er den
       overbestemt, og browseren fordeler resten ud i margenerne: vinduet lå 214 px til højre for
       midten, målt. Netop dét, der sås på en tablet, hvor der er mindre plads at fordele.

       inset: auto rydder browserens kanter, margin: 0 rydder dens margener, og så er top/left
       på 50 % plus translate(-50%, -50%) i transform'en det eneste, der bestemmer placeringen -
       og transform'en er også dén, der animeres. */
    position: fixed;
    inset: auto;
    margin: 0;
    top: 50%;
    left: 50%;
    width: min(1100px, 94vw);
    max-height: 88vh;
    padding: 0;
    border: none;
    border-radius: 26px;
    background: #FFFFFF;
    color: #0B1C25;
    box-shadow: 0 40px 90px rgba(0, 40, 60, 0.32);

    /* SELVE DIALOGEN RULLER IKKE - det gør tekstdelen nedenfor. To grunde: billedet i toppen
       bliver stående som en overskrift i stedet for at forsvinde ved første rul, og lukkeknappen
       bliver, hvor den er.
       Knappen er i øvrigt position: absolute og ikke fixed, netop fordi transform'en nedenfor
       gør dialogen til udgangspunkt for begge dele - en fixed knap ville altså alligevel ikke
       stå fast i vinduet, men rulle med. */
    overflow: hidden;

    /* Udgangspunktet, som der tones FRA ved åbning og TIL ved lukning. Centreringen står
       FORREST og skal med i BEGGE tilstande - glider den ud af den ene, springer vinduet ned i
       hjørnet i samme øjeblik, animationen begynder. */
    opacity: 0;
    transform: translate(-50%, -50%) translateY(18px) scale(0.96);
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.34, 1.14, 0.64, 1);
}

/*
   HER LÅ EN display: flex I REGLEN OVENFOR, og den var en alvorlig fejl.

   Browserens egen regel er "dialog:not([open]) { display: none }". Forfatterens erklæringer slår
   browserens, uanset hvor specifikke de er - så et display i grundreglen gjorde, at det LUKKEDE
   vindue også blev tegnet. Det stod dermed hele tiden midt på skærmen: usynligt (opacity 0),
   1.100 px bredt og 88 % af skærmens højde - og et usynligt element tager stadig imod
   berøringer.

   Symptomerne passede præcis: man kunne kun rulle helt ude i siderne, midt på siden skete der
   ingenting, og karrusellen holdt op med at reagere. At kortene alligevel virkede en del af
   tiden, var held - de har z-index op til 10, og dialogen havde auto, så de lå ovenpå. Derfor
   virkede det "kun nogle gange", alt efter hvor man rørte.

   display sættes derfor KUN, når vinduet faktisk er åbent. [open] kommer på i samme øjeblik
   showModal() kaldes, altså før klassen is-open, så bevægelsen har et udgangspunkt at tone fra.
*/
.feature-modal[open] {
    display: flex;
    flex-direction: column;
}

.feature-modal.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.feature-modal::backdrop {
    background: rgba(6, 18, 31, 0.66);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.26s ease;
}

.feature-modal.is-open::backdrop {
    opacity: 1;
}

/* Har brugeren bedt styresystemet om mindre bevægelse, står vinduet bare dér. Scriptets
   sikkerhedsnet på 320 ms sørger for, at lukningen stadig sker - se closeModal. */
@media (prefers-reduced-motion: reduce) {
    .feature-modal,
    .feature-modal::backdrop {
        transition: none;
    }
}

.feature-modal-image {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    /* Beskåret til et bredt bånd i toppen. Hele skærmbilledet står længere nede i galleriet;
       her er det en overskrift i billedform, ikke noget man skal læse. */
    aspect-ratio: 1120 / 420;
    object-fit: cover;
    object-position: top center;
}

.feature-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 44px 44px;
}

.feature-modal-pill {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #0099BB;
}

.feature-modal-body h3 {
    margin: 0 0 18px;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.feature-modal-lead {
    margin: 0 0 22px;
    max-width: 68ch;
    font-size: 17px;
    line-height: 1.7;
    color: #3E5A69;
}

/* Punkterne. Egen prik i stedet for listens egen, så farven kan følge accenten og afstanden
   til teksten er den samme, uanset hvor lang linjen er. */
.feature-modal-points {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 34px;
}

.feature-modal-points li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.6;
    color: #5A7A8A;
}

.feature-modal-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0099BB;
}

/* Galleriet. To skærmbilleder side om side; de er enten liggende (1600x1000) eller stående
   (1000x1600), og contain frem for cover, fordi et skærmbillede ikke må beskæres - så
   forsvinder netop det hjørne, billedet er med for at vise. */
.feature-modal-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.feature-modal-gallery img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 14px;
    background: #0B1020;
    border: 1px solid #E2E8F2;
}

.feature-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #0B1C25;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

@media (max-width: 720px) {
    .feature-modal-body {
        padding: 22px 22px 30px;
    }

    .feature-modal-body h3 {
        font-size: 25px;
    }

    /* Én spalte. To spalter på en telefon giver linjer på fire ord. */
    .feature-modal-points,
    .feature-modal-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Mindre skærme ───────────────────────────────────────────────────────────────── */
/*
   KORTET SKRUMPER, SCENEN GØR IKKE. Hele opbygningen bliver ved med at være den samme - tre
   kort synlige, det midterste forrest - og det er kun målene, der ændrer sig. Afstanden mellem
   kortene regnes af kortets faktiske bredde i scriptet, så den følger med af sig selv.

   Der var ét skærmskift før, ved 720 px, og imellem 721 og 1400 px fik alle det fulde
   560 px-kort. På en tablet i portræt (768-834 px) fyldte det forreste kort altså tre
   fjerdedele af skærmen, og nabokortene lå helt uden for. Derfor de to skridt undervejs.

   Kortet bliver også RELATIVT højere, jo smallere det bliver: teksten under billedet fylder de
   samme ord på færre tegn pr. linje, og et kort, der blot blev skaleret, ville skære den af. */

/* Kun SKRIFTEN trappes ned. Målene er flydende og klarer sig selv - se .feature-carousel
   .is-live ovenfor. Skriften kan derimod ikke skaleres med kortet: 14 px er 14 px, uanset hvor
   bredt kortet er, og på et smalt kort skal der bare være færre af dem pr. linje. */

/* Tablet i portræt. */
@media (max-width: 900px) {
    .carousel-card-body {
        padding: 20px 24px 24px;
    }

    .carousel-card-body h3 {
        font-size: 21px;
    }

    .carousel-card-body p {
        font-size: 14px;
    }
}

/* Telefon. */
@media (max-width: 620px) {
    .carousel-card-body {
        padding: 18px 20px 22px;
    }

    .carousel-card-body h3 {
        font-size: 19px;
    }

    .carousel-card-body p {
        font-size: 13.5px;
    }
}

/* ── Abonnementet på profilsiden ────────────────────────────────────────────────── */

/* En besked, kunden skal læse, men som ikke er en fejl - fx bekræftelsen på en opsigelse.
   Egen klasse frem for .muted: den her SKAL ses, og dæmpet grå bliver sprunget over. */
.notice {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--bg-panel);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
    max-width: 68ch;
}

/* Det, der kræver handling nu - et afvist kort. Kun farven skifter: en kasse, der både er rød,
   større og fed, råber ad kunden for noget, der ofte bare er et kort, der er blevet fornyet. */
.notice-alert {
    border-left-color: #E5484D;
}

/* Opsigelsen. Foldet sammen som udgangspunkt, fordi den ikke skal være det, øjet falder på, når
   man kommer ind for at rette sit telefonnummer - men den skal kunne findes uden at skrive til
   support, og den skal kunne findes af nogen, der leder efter den. */
.cancel-sub {
    margin-top: 22px;
    max-width: 68ch;
}

.cancel-sub > summary {
    cursor: pointer;
    display: inline-block;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cancel-sub > summary:hover {
    color: var(--text);
}

.cancel-sub-body {
    margin-top: 10px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-panel);
}

.cancel-sub-body p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.cancel-sub-body p.muted {
    color: var(--text-muted);
}

/* Rød KUN på den knap, der rent faktisk gør noget uigenkaldeligt. Bruges ét sted i hele
   portalen, og det er meningen - farven mister sin betydning, hvis den også sidder på "Gem". */
.btn-danger {
    background: #E5484D;
    border: 1px solid #E5484D;
    color: #FFFFFF;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-danger:hover {
    background: #C93B40;
    border-color: #C93B40;
}

/* ── Installationer på profilsiden ──────────────────────────────────────────────── */

/* Én kasse pr. installation. Rammen er ikke pynt: har kunden to både, skal det være
   umiddelbart tydeligt, hvor den ene slutter og den anden begynder - ellers læses to sæt
   nøgler og datoer som ét rod. */
.install {
    margin: 18px 0 0;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-panel);
}

.install-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

/* Baadens navn stod som sidens tungeste tekst - stoerre end overskriften over den og paa
   hoejde med tallene under. Det er en etiket paa en kasse, ikke en overskrift for siden. */
.install-head h3 {
    margin: 0;
    font-size: 15px;
    color: var(--text);
}

/* Aktiveringsmærket. Farven bærer betydningen, men ordet står der også - et grønt punkt
   alene siger ingenting til den, der ikke kender koden, eller ikke ser farver. */
.badge {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.badge-on {
    color: var(--on-accent);
    background: var(--accent);
}

.badge-off {
    color: var(--text-muted);
    border-color: var(--border);
}

/* Hardware-id'et er en lang hexstreng. Med proportional skrift bliver den umulig at
   sammenligne med den, der står på klistermærket bag på enheden. */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    word-break: break-all;
}

.install .stat-grid + .stat-grid {
    margin-top: 12px;
}

/* ── Skift mellem installationer i sidebjælken ──────────────────────────────────── */

/* Lukket som udgangspunkt og vises kun ved mere end én båd (se _Layout). Den skal kunne findes,
   men den skal ikke fylde for de mange, der aldrig har brug for den. */
.sidebar-switch {
    margin: 8px 0 0;
}

.sidebar-switch > summary {
    cursor: pointer;
    list-style: none;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sidebar-switch > summary::-webkit-details-marker { display: none; }

.sidebar-switch > summary:hover {
    color: var(--text);
    border-color: var(--accent);
}

.sidebar-switch-body {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Hver båd er sin egen lille formular - derfor nulstilles knappens udseende her, så den ser ud
   som et menupunkt og ikke som en knap i en række af knapper. */
.sidebar-switch-body button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.sidebar-switch-body button:hover:not(:disabled) {
    background: var(--surface-hi, rgba(255, 255, 255, 0.055));
    border-color: var(--border);
}

/* Den, man allerede er på, er slået fra - et valg, der ikke fører nogen steder hen, skal ikke
   se ud som om det gør. */
.sidebar-switch-body button.current {
    color: var(--accent);
    cursor: default;
}

.sidebar-switch-body button small {
    font-size: 11px;
    color: var(--text-muted);
}

/* ══ Kontaktformularen ═══════════════════════════════════════════════════════════════
   Samme felt-udseende som checkout - det er den samme slags side, og to formularer, der ser
   forskellige ud, ligner to forskellige sites. Reglerne er skrevet her frem for at hænge
   .checkout-step på markup'en: klassen hedder noget om et trin i en betaling, og det er dette
   ikke. */
.contact-form {
    margin-bottom: 56px;
}

.contact-form label {
    display: block;
    margin: 18px 0 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input:not([type]),
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-body);
}

.contact-form textarea {
    line-height: 1.6;
    resize: vertical;
    min-height: 160px;
}

/* Navn og mail side om side, i lige spalter. Under 560 px falder de under hinanden - to felter
   på en telefonbredde bliver til to felter, der begge er for smalle til det, de skal indeholde. */
.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .contact-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Browserens egen pil på en <select> tegnes af styresystemet og er lys på lys i mørk tilstand.
   Feltet får derfor sin egen, tegnet som et baggrundsbillede, og systemets slås fra. */
.contact-select {
    appearance: none;
    background-image:
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%238FA3C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 38px;
}

/* Optionerne tegnes af styresystemet og arver ikke farverne ovenfor - uden dette står sort
   tekst på sort baggrund i en mørk browser. Samme grund som ved landevælgeren. */
.contact-select option {
    background: #0E1526;
    color: #E7EEF7;
}

/* Filfeltet kan ikke stiles indefra - knappen inde i det tegnes af browseren, og hver browser
   har sin egen. Rammen udenom er dét, der kan gøres, og den er nok: feltet skal ligne de andre
   felter, ikke være en knap i sig selv. */
.contact-files {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.contact-files::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.contact-files::file-selector-button:hover {
    border-color: var(--accent);
}

.contact-hint {
    margin: 8px 0 26px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.contact-form button[type="submit"] {
    margin-top: 8px;
}

/* Adressen under formularen. Streget af, så den læses som "eller skriv selv" og ikke som endnu
   et felt, der mangler at blive udfyldt. */
.contact-direct {
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.contact-direct h2 {
    margin: 0 0 12px;
    font-size: var(--fs-h3);
    text-transform: none;
    letter-spacing: normal;
}

/* ══ Videoguides ═════════════════════════════════════════════════════════════════════ */

/* Striben på forsiden, der peger videre til /guides. To spalter på en skærm, under hinanden på
   en telefon - teksten skal have plads, og knappen skal ikke klemmes sammen til to linjer. */
.guides-band {
    padding: 64px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.guides-band-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.guides-band-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
}

.guides-band-text h2 {
    margin: 0 0 10px;
    font-size: clamp(24px, 3vw, 34px);
    text-transform: none;
    letter-spacing: -0.02em;
}

.guides-band-text p {
    margin: 0;
    max-width: 620px;
    font-size: var(--fs-lede);
    color: var(--text-muted);
}

.guides-band-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Selve guide-siden.

   ── KOLONNERNE ER SMALLE, FORDI VIDEOERNE STÅR OP ────────────────────────────────────
   Videoerne er optaget på en skærm i stående format (1080x1728, se VideoGuides). En kolonne på
   320 px ville derfor blive 512 px høj, og fire af dem fylder en hel skærm i højden hver. 260 px
   giver en ramme på godt 415 px - en telefon i naturlig størrelse.

   auto-fill og ikke auto-fit: med auto-fit strækker ÉN video sig over hele bredden, når der kun
   er én tilbage på sidste række, og en stående video på 1100 px er ikke til at se på. */
.guide-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px 28px;
}

.guide-card {
    display: flex;
    flex-direction: column;
}

/* Rammen om videoen. 5:8 er videoernes eget forhold (1080x1728), så billedet fylder rammen ud
   uden sorte kanter - og pladsen er reserveret, FØR stillbilledet er hentet, så gitteret ikke
   hopper, når de fire billeder lander et efter et.

   ── contain OG IKKE cover ────────────────────────────────────────────────────────────
   I selve gitteret er de to det samme: rammen har præcis videoens eget forhold, så der er
   ingenting at hverken beskære eller fylde ud.

   FULDSKÆRM ARVER DEN HER. Og dér er de IKKE det samme. En pc-skærm ligger ned, videoen står op,
   og fuldskærms-reglen i browserens egen stilark sætter ganske vist object-fit: contain - men
   uden !important, så vores egen regel vandt over den. Med cover blev videoen skaleret op, til
   den fyldte den brede skærm, og så var toppen og bunden skåret af. Sorte kanter i siderne er
   det rigtige svar: det er hele billedet. */
.guide-media {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 8;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #0E1526;
    object-fit: contain;
}

/* Kanten og de runde hjørner hører til på kortet i gitteret, ikke om en video, der fylder hele
   skærmen - dér ville de stå som en tynd streg langs skærmkanten. Kanterne bliver sorte og ikke
   mørkeblå: det er den farve, en fuldskærm har uden om sig i forvejen.

   TRE REGLER OG IKKE ÉN MED KOMMAER IMELLEM. Kender browseren ikke det ene af de tre navne,
   smider den hele listen væk - og så virker reglen ingen steder. Hver for sig springer den kun
   den over, den ikke forstår. */
.guide-media:fullscreen {
    border: 0;
    border-radius: 0;
    background: #000;
}

.guide-media:-webkit-full-screen {
    border: 0;
    border-radius: 0;
    background: #000;
}

.guide-media:-moz-full-screen {
    border: 0;
    border-radius: 0;
    background: #000;
}

.guide-media:hover {
    border-color: var(--accent);
}

.guide-media:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.guide-title {
    margin: 14px 0 2px;
    font-size: var(--fs-h3);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.35;
}

/* Længden står under titlen frem for i et hjørne af billedet. Afspilleren lægger selv sin egen
   bjælke hen over videoens underkant, så snart man rører den, og et mærke dér ville enten
   forsvinde under den eller ligge oven på den. */
.guide-duration-text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.guide-help {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-lede);
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .guides-band {
        padding: 44px 18px;
    }

    .guide-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* Logoet på login-siden er nu et link til forsiden - se Login.cshtml. Uden dette arver det
   link-farven og får en understregning ved museover, hvilket får et logo til at ligne en
   trykfejl. */
.login-logo,
.login-logo:hover {
    display: inline-block;
    text-decoration: none;
}

/* ── Leveringsvalget i kassen ─────────────────────────────────────────────────────
   Skilt fra adressefelterne med en streg, fordi det ér et andet spørgsmål: adressen er, hvem
   pakken er til, leveringsmåden er, hvor den skal stilles. Genbruger .install-choice til selve
   valgene - det er den samme slags valg som installationen, og to næsten ens udseender ville
   kun være noget at holde ved lige to steder. */
.delivery-choice {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.delivery-actions {
    margin-top: 12px;
}

/* Listen af pakkeshops kan blive lang. Den får sin egen rulning frem for at skubbe knappen
   "Fortsæt til betaling" så langt ned, at kunden tror, siden er slut. */
.shop-list {
    margin-top: 14px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}


/* ── MARINA GUIDE ────────────────────────────────────────────────────────────────────
   Søgningen og listen er en spalte for sig selv, lagt uden på portalens egen menu - samme greb
   som ruteoversigten (se .route-side i Routes.cshtml), bare bredere, fordi en havnerække skal
   have plads til både navn, by og en stribe facilitets-ikoner.

   Havnen fylder resten. Den ligger ikke hen over noget: man skal kunne løbe listen igennem og
   sammenligne to havne uden at det, man lige kiggede på, bliver dækket.

   Sidens almindelige ramme (.page) har en maksimal bredde og god luft omkring sig. Det er rigtigt
   for en artikel og forkert for to spalter, der skal fylde skærmen - så den slås fra her. Klassen
   sættes på body fra siden selv, så resten af portalen er urørt. */
.guide-page .page { max-width: none; padding: 0; }

.mg-layout { display: flex; align-items: stretch; height: 100vh; }

.mg-intro {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.mg-felt { margin-bottom: 14px; }

.mg-felt > label,
.mg-felt-titel {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mg-felt > input[type="search"],
.mg-felt > select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}

.mg-felt > input[type="search"]:focus,
.mg-felt > select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Faciliteterne fylder treogtredive chips. De kan foldes sammen, saa listen bliver ved med at
   vaere det, spalten handler om - men de staar aabne til at begynde med, for de er grunden til,
   at siden findes. */
.mg-fac-felt > summary {
    cursor: pointer;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    list-style: none;
}
.mg-fac-felt > summary::-webkit-details-marker { display: none; }
.mg-fac-felt > summary::before { content: "▾ "; }
.mg-fac-felt:not([open]) > summary::before { content: "▸ "; }

.mg-valgt-tal {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
}

.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* Fluebenet er skjult, og hele chippen er klikfladen: et flueben er fire gange fire pixels at
   ramme, chippen er hele ordet. */
.mg-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-size: 12.5px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.mg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mg-chip:hover { border-color: #C9D6E4; }

.mg-chip:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* :has() er nyt nok til, at en aeldre browser kan mangle det - og uden en markering ved man ikke,
   hvad man har valgt. Fed skrift virker overalt. */
.mg-chip input:checked + span { font-weight: 600; }

.mg-ryd {
    align-self: flex-start;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.mg-ryd:hover { color: var(--text); border-color: #C9D6E4; }

.mg-status {
    margin: 0 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

.mg-liste { list-style: none; margin: 0; padding: 0; }

.mg-rk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}
.mg-rk + .mg-rk { margin-top: 7px; }
.mg-rk:hover { border-color: #C9D6E4; }
.mg-rk.valgt { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* Navnet klippes af med prikker frem for at braekke over tre linjer. "Juelsminde Havn og Marina"
   er langt, spalten er fast, og en raekke, der vokser i hoejden, oedelaegger listen som liste -
   man skal kunne loebe tyve havne igennem med oejnene. Hele navnet staar i title. */
.mg-rk-hoved { flex: 1 1 auto; min-width: 140px; }

.mg-rk-navn {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-rk-sted {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ikonerne giver plads, foer navnet goer. En raekke, hvor der staar "Juelsmind..." ved siden af
   seks ikoner, har byttet det vigtige for det pyntelige: man leder efter en havn ved navn, og
   ikonerne er en bekraeftelse af filteret, ikke det man laeser. */
.mg-rk-ikoner {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.mg-rk-ikon { font-size: 14px; }

.mg-rk-pris {
    margin-left: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-hi);
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── HAVNEN ──────────────────────────────────────────────────────────────────────── */
.mg-flade { flex: 1 1 auto; min-width: 0; height: 100vh; overflow-y: auto; }

.mg-d-foto { width: 100%; height: 260px; object-fit: cover; display: block; background: #EDF1F7; }
.mg-d-fotokilde { padding: 7px 26px 0; font-size: 11px; color: var(--text-muted); }
.mg-d-fotokilde a { color: var(--text-muted); }

/* Havnen set oppefra, naar der ikke er et godkendt foto: felterne ligger absolut inde i en kasse,
   der klipper kanterne af - se tegnLuftfoto for regnestykket. */
.mg-luft {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 260px;
    background: #DCE4EE;
}
.mg-luft img { position: absolute; width: 256px; height: 256px; display: block; }

.mg-d-hoved { padding: 26px 26px 6px; }
.mg-d-navn { font-size: 26px; font-weight: 600; line-height: 1.2; }
.mg-d-sted { margin-top: 6px; font-size: 14.5px; color: var(--text-muted); }

/* ── SØKORTET TIL VENSTRE, OPLYSNINGERNE TIL HØJRE ──────────────────────────────────
   To forskellige spørgsmål - "hvordan ser indsejlingen ud" og "hvad koster det" - og man stiller
   dem på én gang, når man overvejer en havn, man ikke har været i før.

   Kortet bliver stående, mens man ruller i oplysningerne: det er et referencebillede, ikke noget
   man læser forfra. */
.mg-d-spalter {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
}

.mg-d-venstre { position: sticky; top: 0; padding: 16px 0 34px 26px; }

.mg-soekort {
    width: 100%;
    height: 280px;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: #DCE4EE;
}
.mg-soekort .maplibregl-canvas { border-radius: 10px; }

/* En ring og ikke en prik: en fyldt prik ville daekke netop dét bassin, den peger paa. */
.mg-soekort-maerke {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid #00768A;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.mg-d-krop { padding: 16px 26px 40px 22px; }

/* ── HVERT AFSNIT ER ET KORT ─────────────────────────────────────────────────────────
   Afsnittene var adskilt af en tynd streg. Det holdt, da havnen stod i et panel på 440 punkter,
   hvor en streg er hele bredden og øjet ikke kan komme på afveje. På en flade, der er tre gange
   så bred, flyder de sammen: en pris, en facilitet og en åbningstid står i samme kolonne med
   samme afstand, og stregen er væk i den venstre ende, længe før blikket når den højre.

   En ramme om hvert afsnit siger, hvor det begynder og slutter, uanset hvor bredt der er. */
/* ── HVORFOR CONTAINER QUERIES OG IKKE @media ─────────────────────────────────────
   Afsnittene skal lægge sig om efter, hvor bredt SELVE PANELET er - ikke hvor bred skærmen
   er. De to følges ikke ad: søkortet tager 340 px til venstre, marina-listen tager sin del,
   og portalens menu sin. Samme skærmbredde giver derfor vidt forskellig plads til
   oplysningerne, alt efter hvad der ellers står. En @media-regel ville gætte.

   Selve gitteret ligger i et lag inden i (.mg-d-gitter), fordi en container query ikke kan
   style sin egen container - kun dens indhold. */
.mg-d-krop { container-type: inline-size; }

/* align-items: stretch - to afsnit, der deler en række, får SAMME HØJDE, bestemt af det
   længste. Her stod der før "start", så hvert kort kun var så højt som sit eget indhold.
   Det gav to rammer, der sluttede i hver sin højde, og med en ramme om hvert afsnit ligner
   det en fejl frem for et valg - to kasser ved siden af hinanden læses som et par.

   Prisen er tom plads i bunden af det korte kort. Det er den rigtige pris: en havn har
   typisk tre-fire linjer adresse og to-tre linjer kontakt, så forskellen er lille, og en
   ujævn underkant koster mere på øjet end et par tomme linjer gør. */
.mg-d-gitter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.mg-d-afsnit {
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

/* ── HVIDT PÅ HVIDT ──────────────────────────────────────────────────────────────
   I lys tilstand er kortet #FFFFFF og siden bagved #F4F6FA. Det er en kontrast på 1,08 -
   altså praktisk talt ingen - og kanten på #E3E8F1 giver 1,23. Afsnittene flød sammen til
   én stor hvid flade, hvor man ikke kunne se, hvor et kort holdt op og det næste begyndte.
   Det er værre her end andre steder i portalen, fordi hele siden ER kort ved siden af og
   under hinanden.

   En skygge frem for en kraftigere kant alene: kortene skal LØFTES fra papiret, ikke
   streges op. To lag - en tæt, smal skygge der giver kanten en fysisk underkant, og en
   blødere der giver dybden. Kanten strammes samtidig et hak, så formen holder, også hvor
   skygger slås fra (udskrift, høj kontrast).

   KUN i lys tilstand. I mørk tilstand er kortet #111B31 mod #07091A, og dér er forskellen
   rigelig i forvejen - en sort skygge på mørk bund ville ikke kunne ses, og en lys ville
   ligne en fejl. .app-body er lys-temaet, se farveblokken øverst i filen. */
.app-body .mg-d-afsnit {
    border-color: #D7DEEA;
    box-shadow: 0 1px 2px rgba(16, 26, 46, 0.06), 0 3px 10px rgba(16, 26, 46, 0.05);
}

/* Hele bredden er STANDARD - også for de afsnit, der KAN dele en række. Er der ikke plads,
   skal de stables, og ikke presses smallere og smallere. Før lå afsnittene to og to, så mange
   som bredden tillod, og resultatet var et tilfældigt mønster: åbningstider ved siden af
   webcams, takstkortet halvt nede i en kolonne. */
.mg-d-afsnit { grid-column: 1 / -1; }

/* ── FØRSTE TÆRSKEL: ADRESSE OG KONTAKT ──────────────────────────────────────────
   De to er korte og læses på én gang, så de er de første, der må dele en række. 620 px
   giver dem godt 300 px hver, og derunder er en adresse begyndt at knække grimt - så er det
   bedre at lægge dem under hinanden. */
@container (min-width: 620px) {
    .mg-d-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mg-d-halv { grid-column: auto; }
}

/* ── ANDEN TÆRSKEL: INDKØB OG SEVÆRDIGHEDER ──────────────────────────────────────
   De venter til 1000 px, fordi hver af dem SELV er et gitter af steder (.mg-steder, 230 px
   pr. sted). Ved siden af hinanden i en halv kolonne under det ville hvert sted stå i en
   kolonne alene med navnet klemt sammen - og så er to spalter en ulempe, ikke en hjælp. */
@container (min-width: 1000px) {
    .mg-d-par { grid-column: auto; }
}

/* ── HVER SEKTION SIN KULØR ──────────────────────────────────────────────────────────
   Siden er udelukkende hvide kort under og ved siden af hinanden, og med hvid bund bag
   dem flød de sammen. En skygge alene var ikke nok - den giver en kant, ikke et
   holdepunkt. Her får hvert afsnit sin egen farve i overskriftsbjælken, så man finder
   priserne eller indkøbene på farven i stedet for at læse sig frem hver gang.

   FARVEN ER IDENTITET, IKKE STATUS. Derfor er portalens --ok/--warn/--danger bevidst IKKE
   brugt: grøn ville komme til at betyde "i orden" og gul "pas på", og det er ikke det, en
   overskrift siger. Kulørerne står for sig og er dæmpede - det er en havneguide, ikke en
   farvelade.

   TO TABELLER, FORDI EN KULØR IKKE KAN BEGGE DELE. Nøjagtig samme grund som --accent
   længere oppe i filen: den lyse cyan på hvid bund har for lidt kontrast til at være
   tekst. Hver kulør findes derfor i en lys og en mørk udgave, valgt så den kan læses på
   sin egen bund - se målingerne i de to blokke nedenfor.

   Selve tonen bag teksten regnes ud af kuløren med color-mix, så en ny sektion kun kræver
   ÉN farve, ikke tre. Forstår browseren ikke color-mix, falder den tilbage på den rene
   kortbaggrund fra linjen over - bjælken bliver farveløs, men intet går i stykker. */
:root {
    /* Til mørk bund (#111B31) - lysere udgaver. */
    --sek-adresse: #35C6DC;
    --sek-kontakt: #7FA8F0;
    --sek-ur: #B49BE8;
    --sek-faciliteter: #5FC98C;
    --sek-pris: #D8B872;
    --sek-kurv: #F0A26A;
    --sek-oeje: #E39BC4;
    --sek-kamera: #9FBBD4;
    --sek-anker: #4FC9BA;
    --sek-billeder: #C9A7E8;
}

.app-body {
    /* Til hvid bund - mørkere udgaver, så 11px fed tekst stadig kan læses. */
    --sek-adresse: #00687A;
    --sek-kontakt: #2A5CAA;
    --sek-ur: #6B4FA0;
    --sek-faciliteter: #276B46;
    --sek-pris: #7A6231;
    --sek-kurv: #9A4A16;
    --sek-oeje: #964A72;
    --sek-kamera: #47657D;
    --sek-anker: #0F6E63;
    --sek-billeder: #6A4B8C;
}

/* Kobler sektionens klasse til dens kulør. Klassen sættes af afsnit() ud fra ikonets navn,
   så de to ikke kan komme fra hinanden - se MarinaGuide.cshtml. */
.mg-t-adresse     { --sek: var(--sek-adresse); }
.mg-t-kontakt     { --sek: var(--sek-kontakt); }
.mg-t-ur          { --sek: var(--sek-ur); }
.mg-t-faciliteter { --sek: var(--sek-faciliteter); }
.mg-t-pris        { --sek: var(--sek-pris); }
.mg-t-kurv        { --sek: var(--sek-kurv); }
.mg-t-oeje        { --sek: var(--sek-oeje); }
.mg-t-kamera      { --sek: var(--sek-kamera); }
.mg-t-anker       { --sek: var(--sek-anker); }
.mg-t-billeder    { --sek: var(--sek-billeder); }

/* ── HAVNENS GALLERI ─────────────────────────────────────────────────────────────
   auto-fill og ikke et fast antal spalter: afsnittet kan stå i halv bredde ved siden af
   et andet eller i fuld bredde, og billederne skal lægge sig efter det uden en egen
   tærskel. 150 px er stort nok til at se, hvad man kigger på, og lille nok til at fire
   kan stå ved siden af hinanden i fuld bredde.

   Fast højde og object-fit: cover - telefonbilleder kommer både stående og liggende, og
   uden dem ville rækken hoppe op og ned efter, hvordan folk holdt telefonen. */
.mg-galleri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.mg-galleri-felt { margin: 0; }

/* Feltet er en KNAP, fordi et tryk gør noget - det åbner billedet i stor størrelse. En div med
   en klik-lytter kan ikke nås med tastaturet og siger ingenting til en skærmlæser.

   Knappens egen udseende nulstilles: den skal se ud som billedet, ikke som en knap. */
.mg-galleri-knap {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    border-radius: 8px;
}

.mg-galleri-knap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.mg-galleri-felt img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    background: var(--surface-hi);
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   GALLERIET I STOR STØRRELSE
   ══════════════════════════════════════════════════════════════════════════════════════
   Se <dialog id="mgLys"> i MarinaGuide.cshtml. Samme familie som kortmodalen på søkortsiden,
   men med pile og billedtekst - og til forskel fra kortet fylder dialogen HELE skærmen, så
   pilene har en kant at sidde ved og fingeren har plads at stryge på. */
.mg-lys {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

.mg-lys::backdrop {
    background: rgba(4, 6, 16, 0.92);
}

.mg-lys-ramme {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 56px 16px 20px;
    box-sizing: border-box;
}

/* Billedet skaleres ALDRIG op. Et telefonbillede strukket ud over en 27-tommers skærm er ikke
   mere at se på - det er det samme at se på, bare grødet. */
.mg-lys-billede {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 150px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.mg-lys-tekst {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    max-width: 680px;
    text-align: center;
    color: #E8EDF5;
    font-size: 13px;
    line-height: 1.5;
}

/* Tælleren står øverst og småt: den er en position, ikke en oplysning om havnen. */
.mg-lys-tael {
    font-size: 12px;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.mg-lys-kilde { font-size: 11px; opacity: 0.8; }

.mg-lys-luk {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: rgba(7, 9, 26, 0.72);
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.mg-lys-luk:hover { background: rgba(7, 9, 26, 0.95); }

/* Pilene sidder ved skærmkanten og ikke ved billedet: billedets bredde skifter med hvert foto,
   og pile, der flyttede sig for hvert tryk, kan man ikke ramme to gange i træk. */
.mg-lys-pil {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 64px;
    border: none;
    border-radius: 10px;
    background: rgba(7, 9, 26, 0.6);
    color: #FFFFFF;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.mg-lys-pil:hover { background: rgba(7, 9, 26, 0.9); }

.mg-lys-pil[hidden] { display: none; }

.mg-lys-forrige { left: 10px; }
.mg-lys-naeste { right: 10px; }

.mg-lys-luk:focus-visible,
.mg-lys-pil:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* På en telefon er der ikke plads til pile OVEN PÅ billedet - de dækker en fjerdedel af det.
   Dér bladrer man med fingeren (se touchend i MarinaGuide.cshtml), og tælleren siger, at der
   er mere. */
@media (max-width: 560px) {
    .mg-lys-pil { display: none; }
    .mg-lys-ramme { padding: 52px 8px 16px; }
    .mg-lys-billede { max-height: calc(100dvh - 140px); }
}

.mg-galleri-felt figcaption {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Krediteringen på sin egen linje: den hører til billedet, men den er ikke det, man læser
   billedteksten for. */
.mg-galleri-kilde { display: block; font-size: 11px; opacity: 0.85; }

.mg-d-overskrift {
    display: flex;
    align-items: center;
    gap: 8px;

    /* Negative margener trækker bjælken ud til kortets kanter, så den bliver en bjælke og
       ikke en understreget linje midt i et hvidt felt. Radius i toppen er kortets 12 minus
       kantens 1, ellers stikker et farvet hjørne ud uden for rammen. */
    margin: -20px -22px 16px;
    padding: 13px 22px 12px;
    border-radius: 11px 11px 0 0;
    background: var(--surface);
    background: color-mix(in srgb, var(--sek, var(--accent)) 12%, var(--surface));
    border-bottom: 1px solid var(--border);
    border-bottom-color: color-mix(in srgb, var(--sek, var(--accent)) 35%, var(--surface));
    color: var(--sek, var(--accent));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Ikonet arver overskriftens farve (currentColor i svg'en), så de to aldrig kan komme til at
   stå i hver sin nuance. flex-shrink: 0 - teksten må gerne ombrydes i en smal spalte, men
   ikonet skal ikke mases sammen på vejen. line-height: 0 fjerner svg'ens linje-efterslæb, så
   det står på midten af teksten og ikke en anelse for lavt. */
.mg-d-overskrift-ikon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    opacity: 0.85;
}

.mg-d-linje { font-size: 15px; line-height: 1.6; }
.mg-d-linje + .mg-d-linje { margin-top: 7px; }
.mg-d-pos { font-family: "DM Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }

.mg-d-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mg-d-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.25;
}
.mg-d-chip-ikon { font-size: 16px; }

/* ── TAKSTKORTET ─────────────────────────────────────────────────────────────────────
   Hvad det gaelder til venstre, beloebet til hoejre. Beloebene staar under hinanden i samme kant,
   saa de kan laeses lodret - man leder efter sin egen baadlaengde, ikke efter en saetning. */
.mg-takster {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 14.5px;
    line-height: 1.5;
}

.mg-takster dt,
.mg-takster dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--border); }

.mg-takster dt:first-child,
.mg-takster dt:first-child + dd { border-top: none; padding-top: 0; }

.mg-takster dt { color: var(--text-muted); padding-right: 14px; }
.mg-takster dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* En linje uden beloeb - fx "Betaling ved automat" - fylder begge spalter. */
.mg-takster .mg-takst-fuld { grid-column: 1 / -1; color: var(--text); padding-right: 0; }

/* Samme kortraekke som havnepanelets kameraer paa soekortet. */
a.mg-d-webcam {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}
a.mg-d-webcam + a.mg-d-webcam { margin-top: 10px; }
a.mg-d-webcam:hover { border-color: #C9D6E4; }
.mg-d-webcam-ikon { font-size: 19px; }
.mg-d-webcam-navn { font-size: 15px; }

/* ── HAVNE I NÆRHEDEN ────────────────────────────────────────────────────────────── */
.mg-naboer { list-style: none; margin: 0; padding: 0; }

.mg-naboer li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    font-size: 14.5px;
}
.mg-naboer li + li { margin-top: 7px; }
.mg-naboer li:hover { border-color: #C9D6E4; }

.mg-nabo-navn { flex: none; }
.mg-nabo-by { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
.mg-nabo-afstand { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); }

/* -- OMKRING HAVNEN: BUTIKKER OG SEVÆRDIGHEDER ----------------------------------- */
/*
   Samme kortform som nabohavnene ovenfor, men med højde: et sted har åbningstider under
   navnet og en gårute nederst, hvor naboen kun har en afstand at vise. Derfor en blok og
   ikke en linje.
*/
/* Så mange kolonner der er plads til, og aldrig smallere end en butik kan læses i.
   auto-fill og ikke auto-fit: står der én butik tilbage på en bred skærm, skal den blive
   i sin egen bredde og ikke strække sig ud over hele kassen. */
.mg-steder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

/* Skarpe hjørner, som faciliteterne ovenfor. */
.mg-sted {
    padding: 13px 15px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.mg-sted-hoved { display: flex; align-items: baseline; gap: 12px; }
.mg-sted-navn { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }

.mg-sted-afstand {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--text-muted);
}

.mg-sted-tid { margin-top: 7px; font-size: 14px; line-height: 1.55; }

/* Datoen er dæmpet med vilje: den er påstandens ALDER og ikke selve oplysningen. Står den
   lige så kraftigt som åbningstiden, læses den som en del af den. */
.mg-sted-stempel { margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }

.mg-sted-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }

a.mg-sted-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}
a.mg-sted-link:hover { text-decoration: underline; }
.mg-sted-link svg { flex: none; }

.mg-noget { font-size: 14px; color: var(--text-muted); }


.mg-d-forbehold {
    /* Forbeholdet er ikke et afsnit med ramme om, men det står i det samme gitter og skal
       under begge kolonner - ikke ved siden af det sidste afsnit. */
    grid-column: 1 / -1;
    margin-top: 20px;
    padding: 0 22px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

.mg-d-linje a,
.mg-d-fotokilde a { color: var(--accent); text-decoration: none; }
.mg-d-linje a:hover { text-decoration: underline; }
.mg-daempet { color: var(--text-muted); }

@media (max-width: 1250px) {
    .mg-d-spalter { grid-template-columns: minmax(0, 1fr); }
    .mg-d-venstre { position: static; padding: 16px 26px 0; }
    .mg-d-krop { padding-left: 26px; }
}

/* ── TRE NIVEAUER ────────────────────────────────────────────────────────────────────
   Søgningen, havnene den fandt, og havnen man valgte. Søgekriterierne og resultatet er to
   forskellige ting, man bruger på to forskellige tidspunkter - lå de i samme spalte, ville
   treogtredive facilitets-chips skubbe listen ned under skærmkanten netop dér, hvor man skal
   bruge den. */
.mg-panel {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 24px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--bg-panel);
}

.mg-filtre { flex: 0 0 300px; width: 300px; }
.mg-resultater { flex: 0 0 360px; width: 360px; }

/* [hidden] taber til display:flex - se den samme faelde paa .route-side i Routes.cshtml. */
.mg-panel[hidden],
.mg-rail[hidden] { display: none !important; }

.mg-panel-hoved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.mg-panel-titel { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }

/* ── FOLD SAMMEN ─────────────────────────────────────────────────────────────────────
   Knappen i hovedet folder spalten sammen; skinnen folder den ud igen. Spalten forsvinder ikke -
   den bliver til en kant paa 34 punkter med navnet paa langs, som en vaerktoejsrude i Visual
   Studio. Havnen faar pladsen imens.

   Ingen animation paa bredden: soekortet tegner sig selv om ved hvert skridt i en overgang, og et
   skift er hurtigere at forstaa end en glidning, der hakker. */
.mg-panel-fold,
.mg-rail {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

.mg-panel-fold {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 14px;
    padding: 0;
}

.mg-panel-fold:hover,
.mg-rail:hover { color: var(--text); border-color: var(--accent); }

/* Skinnen fylder hele hoejden, saa den er nem at ramme - som fanen paa en skjult rude. */
.mg-rail {
    flex: 0 0 34px;
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: var(--bg-panel);
}

/* Navnet paa langs. vertical-rl laeser oppefra og ned, altsaa samme vej som en fane paa en rude,
   der er docket i venstre side. */
.mg-rail-tekst {
    writing-mode: vertical-rl;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(100vh - 90px);
}

.mg-rail-ikon { font-size: 14px; line-height: 1; }

/* ── OVERSIGTSKORTET ─────────────────────────────────────────────────────────────────
   Fladen, naar der ikke er valgt en havn. Kortet viser dét, soegningen fandt - saetter man
   flueben ved mastekran, tegnes havnene med mastekran. Samme svar som listen, laest paa den
   anden maade. */
.mg-oversigt { width: 100%; height: 100%; }

/* ── HAVNENS MÆRKE PÅ OVERSIGTEN ─────────────────────────────────────────────────────
   Samme mærke som marina-kortet i AYLO-appen (se .marina-marker i maps-app/marinas.html): en
   dråbe i mørk marineblå med guldkant og et anker i midten. De to flader viser de samme havne,
   og de skal se ens ud - en sejler, der kender mærket fra tabletten, skal kunne genkende det her.

   ABSOLUT PLACERET, ikke relativ. MapLibre giver selv markøren .maplibregl-marker, som er
   position: absolute, og placerer den med en transform. Vores eget stilark kommer senere i
   dokumentet, så et "position: relative" her ville vinde - og så ville mærkerne ligge i normalt
   flow og hoppe rundt ved hver panorering. Præcis den fælde, både appens kort og søkortets
   info-ikoner har siddet fast i. */
.marina-marker {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.marina-pin {
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background: #14203A;
    border: 1.5px solid #C8A96E;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ankeret roteres tilbage, saa selve tegnet staar op, mens draabeformen omkring det peger nedad. */
.marina-pin span {
    transform: rotate(45deg);
    font-size: 13px;
    line-height: 1;
}

.marina-marker:hover .marina-pin { border-color: #F0DDB0; }

/* Navnet under maerket. Vises fra zoom 9 og styres fra tegnMarkoerer - ikke herfra: udvalget af
   maerker afhaenger af, om navnene er der, saa de to beslutninger skal traeffes samme sted. */
.marina-name {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: #123A5E;
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.95),
        0 0 4px rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

/* Tilbage til dér, man kom fra. Staar oeverst i havnen, over billedet, hvor oejet begynder -
   og ikke nederst, hvor man skulle rulle hele havnen igennem for at komme ud af den igen. */
.mg-tilbage {
    display: inline-flex;
    align-items: center;
    margin: 16px 0 0 26px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.mg-tilbage:hover { color: var(--accent); border-color: var(--accent); }

/* ── KONTAKTLINJERNE ─────────────────────────────────────────────────────────────────
   Ikonet i venstre kant, teksten ved siden af. baseline og ikke center: et telefonnummer og et
   ikon paa sytten punkter skal staa paa samme skriftlinje, ellers ser raekken skaev ud ved siden
   af den naeste. */
.mg-d-kontakt {
    display: flex;
    align-items: baseline;
    gap: 11px;
    font-size: 15px;
    line-height: 1.6;
}
.mg-d-kontakt + .mg-d-kontakt { margin-top: 9px; }

/* Ikonet foelger IKKE linjens farve helt: et telefonnummer er et link og dermed cyan, men fire
   cyan ikoner under hinanden ville trække mere opmaerksomhed end teksten. Daempet, saa ikonet
   peger paa linjen frem for at konkurrere med den. */
.mg-d-kontakt-ikon {
    flex: none;
    display: flex;
    align-self: center;
    color: var(--text-muted);
}

.mg-d-kontakt-tekst { min-width: 0; word-break: break-word; }

/* Til soekortet. Staar under positionen i adresse-afsnittet - dér, hvor man sidder og taenker
   "ja, men hvor ligger den saa". */
a.mg-d-kortlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 14px;
    text-decoration: none;
}

a.mg-d-kortlink:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }

/* ── HAVNEGUIDEN PÅ EN TELEFON ───────────────────────────────────────────────────────
   Under denne bredde er der ikke plads til tre spalter ved siden af portalens egen menu.
   Panelerne lægger sig over hinanden, og man vælger sig frem som på en telefon.

   BLOKKEN SKAL STÅ HER, EFTER .mg-filtre OG .mg-resultater. Den stod før dem, og media
   queries tilføjer ikke specificitet - så `.mg-filtre { width: 300px }` vandt over mobilens
   `width: auto`, fordi den bare kom senere i filen. Resultatet på en telefon var to paneler
   låst på 300 og 360 px, venstrestillet på en 390 px skærm: søgefeltet gik ikke ud til
   kanten, resultatlisten var bredere end filtrene, og `border-right` kom tilbage som en
   løsrevet streg ned midt på skærmen. */
@media (max-width: 900px) {
    .mg-layout { flex-direction: column; height: auto; }
    .mg-flade { height: auto; }
    .mg-rail { display: none !important; }

    /* Bredden overskrives eksplicit for begge paneler. `width: auto` alene ville ikke være
       nok, for flex-basis i `flex: 0 0 300px` sætter også en bredde. */
    .mg-panel,
    .mg-filtre,
    .mg-resultater {
        flex: none;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Højden må ikke være låst, når panelerne står over hinanden: et panel med egen
       rulning inde i en side, der også ruller, er svært at komme igennem med en finger -
       man rammer det forkerte lag. Lad siden om at rulle. */
    .mg-panel { max-height: none; overflow-y: visible; }

    /* Søgefelt og landevælger i fuld bredde. De arver ellers en bredde fra et 300 px panel,
       der ikke findes længere, og stod som to korte felter med tom plads til højre. */
    .mg-felt > input[type="search"],
    .mg-felt > select { width: 100%; box-sizing: border-box; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   SEKTION 2: "DIN BÅD. UNDER KONTROL."
   ══════════════════════════════════════════════════════════════════════════════════════
   Afløser 3D-karrusellen (.features/.feature-carousel, som stadig står i stilarket og i
   Index.cshtml bag et flag). Alt herunder er markup og CSS - ingen JavaScript, intet
   perspektiv, ingen tilstand. Se kommentaren over sektionen i Index.cshtml.

   HVID BUND MIDT I ET MØRKT SITE. Sektionen står som en lys plade mellem hero'en og den
   mørke "intro-dark" nedenfor, præcis som karrusellen gjorde - derfor skrives farverne her
   som faste værdier og ikke som var(--text)/var(--bg). Variablerne er sat til det mørke
   site, og at overskrive dem lokalt ville flytte dem for alt, hvad der måtte blive lagt
   ind i sektionen senere. */
.essentials {
    background: #FFFFFF;
    padding: 84px 24px 92px;
}

.essentials-inner {
    max-width: var(--page-max);
    margin: 0 auto;
}

/* ── MÆRKATET ──────────────────────────────────────────────────────────────────────
   Et <p> og ikke et <span>: det er sin egen linje over overskriften, og som inline-element
   skulle det have en display-regel alligevel for at kunne centreres. */
.essentials-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 26px;
    padding: 7px 16px 7px 13px;
    border: 1px solid rgba(0, 194, 224, 0.28);
    border-radius: 999px;
    background: rgba(0, 194, 224, 0.07);
    color: #0092AA;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Prikken er et element og ikke et "•" i teksten: et punktum-tegn står forskelligt fra font
   til font og ville flytte sig, hvis mærkatet en dag blev oversat til et sprog med en anden
   fallback-skrift. */
.essentials-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

/* ── OVERSKRIFTEN ──────────────────────────────────────────────────────────────────
   To linjer, hver sin farve. Linjerne er block-elementer, så de brydes hvor de skal og ikke
   hvor der tilfældigvis er plads - "DIN BÅD." og "UNDER KONTROL." er to udsagn, og et ord,
   der glider op eller ned, ødelægger dem begge.

   VÆGT 800 OG IKKE 700. Den er tilføjet til Inter-hentningen i _PublicLayout.cshtml. Resten
   af sitets overskrifter står med 600 (se .section-title) - det er med vilje den roligere
   vægt til løbende overskrifter, mens denne ene er sidens anslag. */
.essentials-title {
    margin: 0 0 22px;
    text-align: center;
    font-weight: 600;
    font-size: clamp(38px, 5.6vw, 66px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #0B1220;
}

.essentials-title-line {
    display: block;
}

.essentials-title-line--accent {
    color: var(--accent);
}

.essentials-lede {
    max-width: 44ch;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.55;
    color: #5A6678;
    text-wrap: balance;
}

/* ── KORTENE ───────────────────────────────────────────────────────────────────────
   auto-fit og et minimum frem for et fast repeat(4, 1fr): fire kort i bredden på en skærm,
   to på en tablet og ét på en telefon uden en eneste media query - og bliver der en dag et
   femte kort, retter rækken sig selv.

   align-items: stretch (arvet) er det, der gør, at alle fire kort er lige høje, selv om
   teksterne er forskelligt lange. Uden det ville stregen under overskrifterne stå i fire
   forskellige højder, og det er netop den slags, der får en række til at se rodet ud. */
.essentials-grid {
    list-style: none;
    margin: 58px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 22px;
}

.essentials-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 32px;
    border: 1px solid #E4E9F1;
    border-radius: 14px;
    background: linear-gradient(180deg, #FBFCFE 0%, #F6F8FB 100%);
    /* Dæmpet skygge. Den samme sorte skygge, der giver dybde på mørk bund, ser ud som snavs
       på hvidt - samme afvejning som .features--light .feature-card. */
    box-shadow: 0 4px 14px rgba(15, 26, 46, 0.05);
    overflow: hidden;
}

/* Stregen langs overkanten toner ud i begge ender. Den er kortets eneste farve i fuld
   styrke, og det er dén, der gør de fire kort til to par. */
.essentials-card-edge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--essentials-tone) 22%, var(--essentials-tone) 78%, transparent 100%);
}

/* Tonen sættes ÉT sted pr. kort og bruges af både stregen, ikonfladen og mærkatet. Stod
   farven tre steder, ville et nyt kort i en tredje farve kræve tre rettelser - og den tredje
   ville blive glemt. */
.essentials-card--cool {
    --essentials-tone: #00C2E0;
    --essentials-ink: #0092AA;
}

.essentials-card--warm {
    --essentials-tone: #C8A96E;
    --essentials-ink: #8A6D33;
}

.essentials-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 26px;
    border-radius: 11px;
    /* color-mix frem for en fjerde og femte håndskrevet farve pr. tone. Browsere uden den
       falder tilbage på baggrunden fra den foregående regel, og ikonet står da på kortets
       egen flade - mindre tydeligt, men ikke i stykker. */
    background: #EDF3F7;
    background: color-mix(in srgb, var(--essentials-tone) 13%, #FFFFFF);
    color: var(--essentials-ink);
}

.essentials-card-eyebrow {
    margin: 0 0 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--essentials-ink);
}

/* Overskriften har stregen under sig som en ::after og ikke som en border-bottom: den skal
   stå i fast bredde og ikke følge teksten, og den skal blive, hvor den er, uanset om
   overskriften fylder to eller tre linjer. margin-top: auto er IKKE sat - overskriften skal
   stå op under ikonet, og det er brødteksten, der skubbes ned. */
.essentials-card-title {
    margin: 0 0 22px;
    padding-bottom: 22px;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    color: #0B1220;
    border-bottom: 1px solid #E4E9F1;
}

/* margin-top: auto trykker brødteksten ned mod bunden, så de fire kort får bund i samme
   højde, selv når overskrifterne er to og tre linjer lange. */
.essentials-card-body {
    margin: auto 0 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: #5A6678;
}

/* Kortene er ikke links og har ikke noget at åbne - derfor ingen hover-tilstand, der lover
   et klik. Sektionerne nedenfor på forsiden er den lange udgave af de samme fire emner. */

@media (max-width: 620px) {
    .essentials {
        padding: 56px 20px 62px;
    }

    .essentials-grid {
        margin-top: 40px;
        gap: 16px;
    }

    .essentials-card {
        padding: 26px 22px 28px;
    }

    /* Overskriften er sidens største tekst og den første, der bliver for stor på en telefon.
       clamp'en ovenfor holder den nede, men den nedre grænse på 38px er sat til en skærm i
       bredden - her er der 20px luft i hver side at tage hensyn til. */
    .essentials-title {
        font-size: clamp(30px, 9vw, 40px);
    }

    .essentials-lede {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   FUNKTIONS-DETALJESIDERNE (/funktioner/*)
   ══════════════════════════════════════════════════════════════════════════════════════
   Forsidens fire kort er teasere; hver af dem har sin egen side her. Opbygningen er den samme
   på alle: et LYST anslag med kortets egen overskrift, derefter uddybende sektioner, og
   nederst den fælles køb-sektion.

   ANSLAGET ER LYST og ikke mørkt som hero'en på forsiden. Forsiden skal fange; en detaljeside
   skal læses. Et mørkt anslag her ville desuden betyde, at man kom fra en hvid sektion (kortet)
   og landede i en mørk - og så ser det ud som om man forlod sitet. */
.feature-hero {
    background: #FFFFFF;
    padding: 92px 24px 72px;
}

.feature-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

/* Vejen tilbage til netop det sted, man kom fra - #essentials og ikke bare forsidens top.
   Lander man øverst, skal man rulle ned og finde kortet igen for at prøve det næste. */
.feature-back {
    display: inline-block;
    margin-bottom: 26px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #5A6678;
    text-decoration: none;
}

.feature-back:hover {
    color: var(--accent);
    text-decoration: none;
}

.feature-hero-title {
    margin: 22px 0 20px;
    font-weight: 600;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-transform: uppercase;
    color: #0B1220;
    text-wrap: balance;
}

.feature-hero-lede {
    max-width: 46ch;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    color: #5A6678;
    text-wrap: balance;
}

/* ── UDDYBNINGEN ─────────────────────────────────────────────────────────────────────
   Tekst og figur ved siden af hinanden. En anelse gråtonet bund, så sektionen kan ses som
   sin egen uden en streg imellem. */
.feature-section {
    background: #F6F8FB;
    padding: 76px 24px;
    border-top: 1px solid #E8ECF3;
}

.feature-split {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    /* minmax(0, ...) og ikke bare 1fr: uden nul-minimummet nægter en grid-kolonne at blive
       smallere end sit indhold, og SVG-figuren tvinger så hele spalten bredere end skærmen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

/* ── ET AFSNIT UDEN BILLEDE VED SIDEN AF ─────────────────────────────────────────────
   De første funktionssider havde altid et skærmbillede i den anden spalte, så .feature-split
   rakte. Batterisiden har fire afsnit og ét billede: resten er ren tekst, og lagt i
   to-kolonne-gitteret ville de stå halvt så brede som siden med et tomt felt ved siden af.

   760 px og ikke hele bredden: en tekstlinje på tolv hundrede punkter er noget, øjet taber
   tråden i, når det springer tilbage til næste linje. */
.feature-copy--wide {
    max-width: 760px;
    margin: 0 auto;
}

/* Skiftevis bund. Fire afsnit i træk på samme farve smelter sammen til én lang flade, og så
   kan man ikke se, hvor det ene emne holder op. Hvid er den samme, forbeholdet nederst
   bruger (se .feature-note), så der kommer ikke en tredje tone ind på siden. */
.feature-section--alt {
    background: #FFFFFF;
}

.feature-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0092AA;
}

.feature-heading {
    margin: 0 0 22px;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.018em;
    text-transform: uppercase;
    color: #0B1220;
}

.feature-copy p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #4A5568;
}

.feature-points {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.feature-points li {
    position: relative;
    padding: 0 0 0 26px;
    margin-bottom: 12px;
    font-size: 15.5px;
    line-height: 1.55;
    color: #3C4656;
}

/* Flueben tegnet med to streger frem for et tegn fra fonten: et hak-tegn står forskelligt i
   hver fallback-skrift og flytter sig, når systemfonten skifter. */
.feature-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 6px;
    height: 10px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── AIS-KREDSLØBET ──────────────────────────────────────────────────────────────────
   Figuren er ét SVG, og farverne står HER frem for i markup-filen: så kan de rettes sammen
   med resten af sitets farver, og de arver automatisk, hvis temaet en dag laves om. */
.ais-loop {
    margin: 0;
}

.ais-loop svg {
    display: block;
    width: 100%;
    height: auto;
}

.ais-loop figcaption {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7688;
}

.ais-cloud ellipse {
    fill: #E3F1F7;
    stroke: #9FC6D6;
    stroke-width: 1.5;
}

.ais-vessel path,
.ais-vessel rect {
    fill: #C6D2DF;
    stroke: #8496A8;
    stroke-width: 1.5;
}

/* Udsendelsen fra de andre skibe. Buerne toner op og ud efter hinanden, så det ses som noget,
   der SENDES og ikke som tre streger, der bare står der. */
.ais-waves path {
    fill: none;
    stroke: #00A8C4;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    animation: ais-ping 3.2s ease-out infinite;
}

.ais-waves path:nth-child(2) { animation-delay: 0.22s; }
.ais-waves path:nth-child(3) { animation-delay: 0.44s; }

.ais-vessel--right .ais-waves path { animation-delay: 0.6s; }
.ais-vessel--right .ais-waves path:nth-child(2) { animation-delay: 0.82s; }
.ais-vessel--right .ais-waves path:nth-child(3) { animation-delay: 1.04s; }

@keyframes ais-ping {
    0%   { opacity: 0; }
    12%  { opacity: 0.95; }
    45%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ── AYLO-ENHEDEN ER EN KASSE ────────────────────────────────────────────────────────
   Den var tegnet med skærm før, og det var forkert: enheden sidder i et skab og har ingen
   skærm. Skærmen er appen nedenfor, og hele pointen med en repeater er, at de to ikke er
   det samme - enheden modtager og sender VIDERE til begge. */

.ais-unit-vents rect {
    fill: #23334A;
}

/* Statuslampen blinker, når målingen går igennem kassen - altså på samme tid som prikken
   lander (1,3 s inde i de 4 s, plus den tid den er om at nå frem). */
.ais-unit-led {
    fill: #00C2E0;
    animation: ais-led 4s ease-out infinite;
}

@keyframes ais-led {
    0%, 42%   { opacity: 0.25; }
    50%       { opacity: 1; }
    64%, 100% { opacity: 0.25; }
}

/* ── AYLO-SKÆRMEN ────────────────────────────────────────────────────────────────────
   Appen på tablet eller telefon. Samme mørke som enheden, så man kan se at de to hører
   sammen - plotteren ved siden af er lys, fordi den er en anden leverandørs kasse. */

.ais-screen-face {
    fill: #06202C;
    stroke: #0092AA;
    stroke-width: 1.5;
}

.ais-screen-rows rect {
    fill: #00C2E0;
    opacity: 0.25;
    animation: ais-row 4s ease-in-out infinite;
}

.ais-screen-rows rect:nth-child(2) { animation-delay: 0.18s; }
.ais-screen-rows rect:nth-child(3) { animation-delay: 0.36s; }

/* Rækkerne lyser, når prikken fra enheden lander - derfor forskydningen, der svarer til
   animateMotion-forsinkelsen i markup-filen. Er de to ude af trit, ser det ud som om
   skærmen tændte, før dataene kom. */
@keyframes ais-row {
    0%, 78%   { opacity: 0.18; }
    88%       { opacity: 1; }
    97%, 100% { opacity: 0.35; }
}

/* Plotterens spor tegner sig i samme øjeblik som skærmens rækker - de to modtager
   SAMTIDIG, og en figur, hvor den ene reagerer før den anden, ville sige noget forkert. */
/* ── SPORET TEGNES IKKE FORFRA, DET LYSER OP ─────────────────────────────────────────
   Første forsøg lod sporet tegne sig ind med stroke-dashoffset, hver gang prikken landede.
   Det så rigtigt ud i teorien og forkert på skærmen: plotteren stod TOM i tre fjerdedele af
   cyklussen, og en tom plotter ligner en fejl, ikke en, der venter på data.

   En plotter har et kort på sig hele tiden. Det, der sker, når målet kommer, er at det bliver
   opdateret - og dét siges bedre med et glimt end med en tegning fra bunden. Samme greb som
   skærmens rækker ved siden af, så de to reagerer ens på det samme øjeblik. */
.ais-plotter-track {
    fill: none;
    stroke: #0092AA;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
    animation: ais-track 4s ease-in-out infinite;
}

@keyframes ais-track {
    0%, 78%   { opacity: 0.4; stroke-width: 2; }
    88%       { opacity: 1; stroke-width: 2.6; }
    97%, 100% { opacity: 0.55; stroke-width: 2; }
}

/* Prikken til skærmen har produktets cyan, den til plotteren messing - samme skel som i
   resten af figuren: cyan er AYLO, messing er det, der sendes videre til en anden. */
.ais-dot--screen {
    fill: #00C2E0;
}

@media (prefers-reduced-motion: reduce) {
    .ais-unit-led,
    .ais-screen-rows rect,
    .ais-plotter-track {
        animation: none;
    }

    .ais-screen-rows rect { opacity: 0.5; }
    .ais-plotter-track { opacity: 0.6; }
}


.ais-plotter-screen {
    fill: #F2F6FA;
    stroke: #A9B8C7;
    stroke-width: 1.2;
}


/* Stregerne mellem delene. Stiplede og svage: de er vejen, ikke indholdet - det er prikkerne
   ovenpå, der bærer bevægelsen. */
.ais-links use {
    fill: none;
    stroke: #AFC2D2;
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

.ais-dot {
    fill: #00C2E0;
}

.ais-dot--down {
    fill: #0092AA;
}

.ais-dot--onward {
    fill: #C8A96E;
}

/* ── DEN DIREKTE VEJ OVER VHF  (11. okt 2026) ───────────────────────────────────────
   Grøn for radioen fra skibene tæt på til den indbyggede modtager - så den kan skelnes fra
   AYLO online (cyan) i både figuren og signaturen nedenunder. */
.ais-links--radio use {
    stroke: #6CCB9C;
}

.ais-dot--radio {
    fill: #22A56A;
}

.ais-label--radio {
    font-size: 10px;
    fill: #22A56A;
}

.ais-unit-antenna line {
    stroke: #23334A;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.ais-unit-antenna circle {
    fill: #22A56A;
}

.ais-legend-text {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    fill: #5A6678;
}

.ais-label {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-anchor: middle;
    fill: #5A6678;
    text-transform: uppercase;
}

.ais-label--strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    fill: #0B1220;
}

/* ── BEVÆGELSEN ER EN TILFØJELSE, IKKE FORTÆLLINGEN ──────────────────────────────────
   Står alt stille, er figuren stadig hel: skibene, skyen, enheden og plotteren er der, og
   stregerne imellem dem viser vejen. Buerne og skærmrækkerne står tonet frem for at
   forsvinde, så kredsløbet stadig kan læses uden en eneste bevægelse. */
@media (prefers-reduced-motion: reduce) {
    .ais-waves path {
        opacity: 0.5;
        animation: none;
    }


    .ais-dots {
        display: none;
    }
}

@media (max-width: 900px) {
    /* Én spalte. Teksten står FØRST i markup-filen, så den også kommer først her - man skal
       vide, hvad figuren handler om, før man ser den. */
    .feature-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .ais-loop {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 620px) {
    .feature-hero {
        padding: 64px 20px 52px;
    }

    .feature-hero-title {
        font-size: clamp(26px, 8vw, 34px);
    }

    .feature-hero-lede {
        font-size: 16px;
    }

    .feature-section {
        padding: 52px 20px;
    }
}

/* ── ET KORT, DER FØRER VIDERE ───────────────────────────────────────────────────────
   Linket dækker HELE kortet og ikke kun "Læs mere"-linjen: et link på fjorten pixels højde
   er ikke til at ramme med en finger i søgang, og hele kortet handler alligevel om det samme
   ene emne.

   ── FØRSTE FORSØG LAGDE FLADEN UNDER INDHOLDET ───────────────────────────────────
   Tanken var, at teksten så stadig kunne markeres. Men et klik midt på kortet ramte da
   brødteksten i stedet for linket, og der skete ingenting - kun de få pixels margin uden om
   teksten virkede. Et kort, der ser klikbart ud og kun er det i kanten, er værre end et, der
   ikke ser klikbart ud.

   Fladen ligger derfor ØVERST. Prisen er, at teasertekstens ord ikke kan markeres med musen;
   det er en teaser på tre linjer, og den byttehandel er nem. Skærmlæsere er upåvirkede -
   indholdet står uændret i markup-filen, og linket har sin egen tekst. */
.essentials-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 0 26px 18px;
    text-decoration: none;
}

.essentials-card-link:hover {
    text-decoration: none;
}

/* Selve teksten skal kunne ses, så kortet ikke ligner en blindgyde. Den står i kortets egen
   tone, så et cyan og et messingfarvet kort ikke pludselig peger videre i samme farve. */
.essentials-card-more {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--essentials-ink);
    transition: transform 0.18s ease;
}

/* Kortet får plads i bunden til linjen - ellers ville den lægge sig oven på brødteksten. */
.essentials-card:has(.essentials-card-link) {
    padding-bottom: 54px;
}

/* Hele kortet løfter sig, ikke kun linket. Det er kortet, man trykker på, og en hover-effekt,
   der kun rammer fjorten pixels, får resten til at se død ud. */
.essentials-card:has(.essentials-card-link):hover {
    border-color: #C9D6E8;
    box-shadow: 0 10px 24px rgba(15, 26, 46, 0.09);
}

.essentials-card:has(.essentials-card-link):hover .essentials-card-more {
    transform: translateX(3px);
}

/* Indholdet ligger under linkfladen. Det skal stadig stå over kortets kant-gradient, derfor
   z-index 1 - ellers ville stregen langs overkanten kunne lægge sig hen over ikonet. */
.essentials-card-eyebrow,
.essentials-card-title,
.essentials-card-body,
.essentials-card-icon {
    position: relative;
    z-index: 1;
}

/* Tastaturet skal kunne se, hvor det er. Rammen tegnes om HELE kortet og ikke om den usynlige
   flade, som ellers ville give en ramme uden indhold i. */
.essentials-card-link:focus-visible {
    outline: none;
}

.essentials-card:has(.essentials-card-link:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LYS-KREDSLØBET (/funktioner/lys)
   ══════════════════════════════════════════════════════════════════════════════════════
   Samme opbygning som AIS-sidens figur, men den fortæller den modsatte vej: dér kommer data
   indefra og ud, her går en beslutning udefra og ind i båden.

   HELE TIDSLINJEN ER 6 SEKUNDER og hænger sammen med animateMotion-forsinkelserne i
   Lys.cshtml. Rettes den ene ende, skal den anden med:
     0,2 s   kontakten i appen vippes
     0,4 s   prikken op i skyen
     1,4 s   prikken ned til enheden
     2,4 s   prikkerne ud til de tre lamper
     3,0 s   lyset tænder
     5,0 s   slukkes igen, og forfra */
.lys-loop {
    margin: 0;
}

.lys-loop svg {
    display: block;
    width: 100%;
    height: auto;
}

.lys-loop figcaption {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7688;
}

/* ── TELEFONEN ───────────────────────────────────────────────────────────────────────
   Mørk som AYLO-enheden og AYLO-skærmen på AIS-siden: det er alt sammen vores. */

.lys-phone-face {
    fill: #06202C;
    stroke: #0092AA;
    stroke-width: 1.5;
}

.lys-phone-row {
    fill: #23334A;
}

/* Kontakten. Sporet skifter farve og knappen glider - de to skal ske SAMTIDIG, ellers ser
   det ud som om knappen flytter sig af sig selv og farven følger bagefter. */
.lys-phone-track {
    fill: #23334A;
    animation: lys-track 6s ease-in-out infinite;
}

.lys-phone-knob {
    fill: #F2F6FA;
    animation: lys-knob 6s ease-in-out infinite;
}

@keyframes lys-track {
    0%, 2%    { fill: #23334A; }
    6%, 82%   { fill: #00C2E0; }
    88%, 100% { fill: #23334A; }
}

@keyframes lys-knob {
    0%, 2%    { transform: translateX(0); }
    6%, 82%   { transform: translateX(20px); }
    88%, 100% { transform: translateX(0); }
}

/* ── SKYEN OG ENHEDEN ────────────────────────────────────────────────────────────────
   Tegnet som på AIS-siden. Gentaget frem for delt, fordi de to figurer skal kunne rettes
   hver for sig - en fælles klasse ville binde dem sammen, og så kan den ene ikke ændres
   uden at den anden følger med. */
.lys-cloud ellipse {
    fill: #E3F1F7;
    stroke: #9FC6D6;
    stroke-width: 1.5;
}


.lys-unit-vents rect {
    fill: #23334A;
}

/* Lampen på enheden blinker, når kommandoen går igennem - altså lige før lamperne tænder. */
.lys-unit-led {
    fill: #00C2E0;
    animation: lys-led 6s ease-out infinite;
}

@keyframes lys-led {
    0%, 36%   { opacity: 0.25; }
    42%       { opacity: 1; }
    54%, 100% { opacity: 0.25; }
}

.lys-links use {
    fill: none;
    stroke: #AFC2D2;
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

.lys-dot--cmd {
    fill: #00C2E0;
}

/* Prikkerne ud til relæerne er varme, fordi det er lys, de tænder - ikke data, de bærer. */
.lys-dot--out {
    fill: #E8B44A;
}

/* ── LAMPERNE ────────────────────────────────────────────────────────────────────────
   Skæret er en cirkel bag lampen. Den er slukket som udgangspunkt og tændes af sin egen
   animation, så en browser uden CSS-animationer viser slukkede lamper frem for tændte -
   en slukket lampe er ikke en fejl, en lampe der lyser uden grund er. */
.lys-cord {
    stroke: #8496A8;
    stroke-width: 1.5;
}

.lys-shade {
    fill: #C6D2DF;
    stroke: #8496A8;
    stroke-width: 1.5;
}

.lys-bulb {
    fill: #C6D2DF;
    animation: lys-bulb 6s steps(1, end) infinite;
}

.lys-glow {
    fill: #F5C65A;
    opacity: 0;
}

/* KONTAKTERNE SNAPPER. Et relæ har to tilstande og ingenting derimellem, og steps(1) er
   præcis dét: ingen overgang, bare til og fra. En blød indtoning ville få de to første
   lamper til at ligne dæmpere - og så var hele forskellen til den tredje væk. */
.lys-lamp--switch .lys-glow {
    animation: lys-switch 6s steps(1, end) infinite;
}

/* Cockpitlampen et hak efter kabyssen. Ikke fordi relæerne sættes i rækkefølge - det gør de
   ikke - men fordi to lamper, der tænder på nøjagtig samme frame, ser ud som én. */
.lys-lamp--delayed .lys-glow,
.lys-lamp--delayed .lys-bulb {
    animation-delay: 0.12s;
}

@keyframes lys-switch {
    0%, 49%   { opacity: 0; }
    50%, 82%  { opacity: 0.85; }
    83%, 100% { opacity: 0; }
}

@keyframes lys-bulb {
    0%, 49%   { fill: #C6D2DF; }
    50%, 82%  { fill: #FFE9A8; }
    83%, 100% { fill: #C6D2DF; }
}

/* ── DÆMPEREN ────────────────────────────────────────────────────────────────────────
   GLIDER, hvor de to andre snapper. Det er hele pointen i afsnittet ved siden af: en dæmper
   er ikke en kontakt, og figuren skal kunne ses at sige det samme som teksten.

   Den stopper desuden på 70 % og ikke på fuldt lys - en dæmper, der kører helt op, gør jo
   netop det, man bruger en kontakt til. Salonen sættes ned til aftenlys. */
.lys-lamp--dimmer .lys-glow {
    animation: lys-dim 6s ease-in-out infinite;
}

@keyframes lys-dim {
    0%, 49%   { opacity: 0; }
    62%, 82%  { opacity: 0.42; }
    92%, 100% { opacity: 0; }
}

.lys-lamp--dimmer .lys-bulb {
    fill: #C6D2DF;
    animation: lys-dim-bulb 6s ease-in-out infinite;
}

@keyframes lys-dim-bulb {
    0%, 49%   { fill: #C6D2DF; }
    62%, 82%  { fill: #FFDC8A; }
    92%, 100% { fill: #C6D2DF; }
}

.lys-slider-track {
    fill: #D8E0EA;
    stroke: #A9B8C7;
    stroke-width: 1;
}

/* Udfyldningen vokser med knappen. transform-origin på venstre kant, så den strækker sig
   fra den ende, knappen kommer fra - ellers ville den vokse ud til begge sider. */
.lys-slider-fill {
    fill: #E8B44A;
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: lys-slider-fill 6s ease-in-out infinite;
}

.lys-slider-knob {
    fill: #FFFFFF;
    stroke: #A9782A;
    stroke-width: 1.5;
    animation: lys-slider-knob 6s ease-in-out infinite;
}

@keyframes lys-slider-fill {
    0%, 49%   { transform: scaleX(0); }
    62%, 82%  { transform: scaleX(0.7); }
    92%, 100% { transform: scaleX(0); }
}

@keyframes lys-slider-knob {
    0%, 49%   { transform: translateX(0); }
    62%, 82%  { transform: translateX(34px); }
    92%, 100% { transform: translateX(0); }
}

.lys-label {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-anchor: middle;
    fill: #5A6678;
    text-transform: uppercase;
}

.lys-label--strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    fill: #0B1220;
}

/* ── UDEN BEVÆGELSE ──────────────────────────────────────────────────────────────────
   Figuren parkeres i TÆNDT tilstand og ikke i slukket. Står alt stille, er det lyset, der
   er pointen - en tegning af tre slukkede lamper fortæller ingenting om, hvad produktet
   gør. Dæmperen står på sine 70 %, så forskellen til de to kontakter stadig kan ses. */
@media (prefers-reduced-motion: reduce) {
    .lys-phone-track,
    .lys-phone-knob,
    .lys-unit-led,
    .lys-glow,
    .lys-bulb,
    .lys-slider-fill,
    .lys-slider-knob {
        animation: none;
    }

    .lys-phone-track { fill: #00C2E0; }
    .lys-phone-knob { transform: translateX(20px); }

    .lys-lamp--switch .lys-glow { opacity: 0.85; }
    .lys-lamp--switch .lys-bulb { fill: #FFE9A8; }

    .lys-lamp--dimmer .lys-glow { opacity: 0.42; }
    .lys-lamp--dimmer .lys-bulb { fill: #FFDC8A; }

    .lys-slider-fill { transform: scaleX(0.7); }
    .lys-slider-knob { transform: translateX(34px); }

    .lys-dots { display: none; }
}

@media (max-width: 900px) {
    .lys-loop {
        max-width: 420px;
        margin: 0 auto;
    }
}

/* ── AYLO-SKÆRMEN OM BORD ────────────────────────────────────────────────────────────
   Mørk som telefonen og enheden - det er alt sammen vores. Den er en INDGANG i figuren og
   ikke et sted, data lander; se kommentaren i Lys.cshtml. */

.lys-screen-face {
    fill: #06202C;
    stroke: #0092AA;
    stroke-width: 1.5;
}

.lys-screen-row {
    fill: #23334A;
}

/* Den øverste kontakt vipper i takt med telefonens: appen viser den tilstand, relæet faktisk
   står i, uanset hvem der satte det. Samme keyframes som telefonens, så de to ikke kan komme
   ud af trit ved en rettelse. */
.lys-screen-track {
    fill: #23334A;
    animation: lys-track 6s ease-in-out infinite;
}

.lys-screen-knob {
    fill: #F2F6FA;
    animation: lys-screen-knob 6s ease-in-out infinite;
}

/* Kortere vej end telefonens knap - sporet er 30 px og ikke 38. */
@keyframes lys-screen-knob {
    0%, 2%    { transform: translateX(0); }
    6%, 82%   { transform: translateX(16px); }
    88%, 100% { transform: translateX(0); }
}

/* Den nederste står fast tændt og animeres ikke. En skærm, hvor alt vipper samtidig, ligner
   en hovedafbryder og ikke en liste over grupper. */
.lys-screen-track--on {
    fill: #00C2E0;
    animation: none;
}

.lys-screen-knob--on {
    animation: none;
}

/* ── VIDEO-ANSLAGET ──────────────────────────────────────────────────────────────────
   Fuldbredde-video med teksten ovenpå. Højden er fast i vh frem for at følge videoens eget
   format: klippet skiftes ud senere, og en sektion, der ændrer højde med filen, ville flytte
   alt nedenunder den dag videoen bliver en anden. */
.feature-video {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 24px;
    background: #07091A;
}

/* Videoen dækker fladen og beskæres, frem for at blive strakt. object-fit: cover er hele
   grunden til, at et vilkårligt klip kan lægges ind uden at se forvredet ud. */
.feature-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* To lag: en jævn mørkning, så teksten kan læses uanset hvilket billede klippet står på, og
   en gradient fra bunden, så knappen har noget at stå på. */
.feature-video-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(7, 9, 26, 0.55) 0%, rgba(7, 9, 26, 0.72) 100%);
}

.feature-video-inner {
    position: relative;
    z-index: 2;
    max-width: 680px;
    text-align: center;
}

.feature-video-heading {
    margin: 0 0 16px;
    font-weight: 600;
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-wrap: balance;
}

.feature-video-lede {
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.6;
    color: #C6D2E0;
    text-wrap: balance;
}

.feature-video-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Afspilningstrekanten tegnes med en border frem for et tegn fra fonten - et ▶ står
   forskelligt i hver fallback-skrift og sidder sjældent på linjen. */
.feature-video-cta::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

.feature-video-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 194, 224, 0.28);
}

.feature-video-cta:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* ── POPUP'EN ────────────────────────────────────────────────────────────────────────
   <dialog> giver fokusfælde, Escape og baggrundslag gratis. Her sættes kun målene og
   farverne - resten er browserens. */
.video-modal {
    width: min(92vw, 960px);
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #0D1525;
    overflow: hidden;
}

.video-modal::backdrop {
    background: rgba(4, 6, 16, 0.82);
}

.video-modal-player {
    display: block;
    width: 100%;
    /* Fast 16:9 frem for videoens egne mål: dialogen skal have sin størrelse, FØR filen er
       hentet (preload="none"), ellers springer den i størrelse, når metadataene lander. */
    aspect-ratio: 16 / 9;
    background: #000000;
}

.video-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 19px;
    background: rgba(7, 9, 26, 0.72);
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.video-modal-close:hover {
    background: rgba(7, 9, 26, 0.92);
}

.video-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lys-screen-track,
    .lys-screen-knob {
        animation: none;
    }

    .lys-screen-track { fill: #00C2E0; }
    .lys-screen-knob { transform: translateX(16px); }

    .feature-video-cta {
        transition: none;
    }

    /* Baggrundsvideoen er dekoration. Kører den for en, der har bedt om mindre bevægelse, er
       det netop den slags, indstillingen findes for. Plakatbilledet står tilbage. */
    .feature-video-bg {
        display: none;
    }
}

@media (max-width: 620px) {
    .feature-video {
        min-height: 340px;
        padding: 56px 20px;
    }
}

/* ── SKALLEN OM EN KASSE I FIGURERNE ─────────────────────────────────────────────────
   Telefonen, AYLO-enheden, AYLO-skærmen og plotteren har alle en ydre kasse og et indhold.
   Den ydre stod før som ".lys-screen > rect" og ".ais-screen > rect".

   DET VAR EN FÆLDE, og den kostede en fejl. En klasse plus et element (0,1,1) vejer tungere
   end en klasse alene (0,1,0) - uanset rækkefølgen i filen. ".lys-screen-face" og
   ".lys-screen-track--on" tabte derfor mod skallen, og skærmen inde i kassen blev tegnet i
   kassens egen farve: den cyan-kantede skærm forsvandt, og den tændte kontakt så slukket ud.
   Det blev først fanget ved at måle den beregnede farve i browseren, for det så "næsten
   rigtigt" ud.

   Nu har skallen sin egen klasse. Alt inde i kassen har samme specificitet som den, og så
   afgør rækkefølgen - som man tror den gør. */
.fig-shell {
    fill: #0D1525;
    stroke: #23334A;
    stroke-width: 1.5;
}

/* Plotteren er en anden leverandørs kasse og skal ses at være det. */
.fig-shell--light {
    fill: #D8E0EA;
    stroke: #8496A8;
}

/* ── KORTUDSNITTET (/funktioner/soekort) ─────────────────────────────────────────────
   Et rigtigt skærmbillede frem for en tegning - se kommentaren i Soekort.cshtml for hvorfor
   netop denne side viser produktet i stedet for at forklare det.

   AFRUNDEDE HJØRNER OG EN SKYGGE. Billedet er et skærmbillede med skarpe kanter og en mørk
   statuslinje øverst; lagt råt ind på en lys sektion ser det ud som et vedhæftet filnavn og
   ikke som en skærm. Hjørnerne og skyggen gør det til en GENSTAND på siden - og de er det
   eneste, der skal til.

   Kanten er en anelse mørkere end sektionens bund, så billedets egen hvide himmel og øresund
   ikke flyder sammen med baggrunden. */
.kort-shot {
    margin: 0;
}

.kort-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid #DCE3EC;
    box-shadow: 0 16px 40px rgba(15, 26, 46, 0.14);
}

/* ── INGEN BESKÆRING LÆNGERE ─────────────────────────────────────────────────────────
   Her stod et højdeloft med object-fit: cover. Det var skrevet til det første billede - en
   høj telefonskærm, der ellers fyldte hele spalten og efterlod fire linjer tekst ved siden
   af en lang søjle.

   Det nye udsnit er liggende og i samme format som spalten. En beskæring ville nu skære
   kortet af i bunden uden grund - og det er netop det fulde udsnit, der er pointen: man skal
   kunne se lyssektorerne, færgeruterne og dybdebåndene i ét billede. */

.kort-shot figcaption {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7688;
}

/* ── BILLEDET ER EN KNAP ─────────────────────────────────────────────────────────────
   En <button> kommer med browserens egen baggrund, kant og polstring. Alt det væk igen,
   så knappen er usynlig og billedet står, som det stod - kun markøren og et
   forstørrelsesglas i hjørnet fortæller, at der kan trykkes.

   zoom-in er den ærlige markør her. En hånd ville love en ny side; zoom-in siger, at det
   samme billede bliver større, og det er netop det, der sker. */
.kort-shot-zoom {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    /* Radius på knappen OG på billedet: ellers følger fokusringen et firkantet felt om
       et billede med runde hjørner. */
    border-radius: 16px;
    cursor: zoom-in;
}

.kort-shot-zoom:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* ── FORSTØRRELSESGLASSET ────────────────────────────────────────────────────────────
   Nederste højre hjørne og ikke midt på billedet: midt på ville dække kortet, og hjørnet er
   der, hvor man leder efter den slags. Det ligger over åbent vand i dette udsnit, så det
   skjuler ingen detaljer.

   Ingen bevægelse ved hover - kun en mørkere plade. Så er der ingenting at slå fra igen ved
   prefers-reduced-motion. */
.kort-shot-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: rgba(8, 18, 34, 0.68);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(8, 18, 34, 0.3);
}

.kort-shot-zoom:hover .kort-shot-hint,
.kort-shot-zoom:focus-visible .kort-shot-hint {
    background: rgba(8, 18, 34, 0.92);
}

/* ── TO UDSNIT MED HVER SIT MÆRKE  (11. okt 2026) ───────────────────────────────────
   Orienteringskortet og det officielle ENC under hinanden. Mærket står øverst til venstre
   PÅ billedet, så det følger med, hvis nogen tager et skærmbillede af siden - en
   billedtekst under ville blive skåret fra.

   Guld til ENC'et, samme farve som "Officielt søkort"-mærket på kortet i appen; det gratis
   kort får en neutral mørk plade. */
.kort-shots {
    display: grid;
    gap: 34px;
}

/* Samme højde på de to (ejerens ønske, 11. okt 2026): begge står i ENC-billedets format, og
   orienteringskortet beskæres fra midten. Kun i spalten - dialogen viser hele billedet. */
.kort-shots .kort-shot img {
    aspect-ratio: 1600 / 865;
    object-fit: cover;
    object-position: center;
}

.kort-shot-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    box-shadow: 0 2px 10px rgba(8, 18, 34, 0.25);
    pointer-events: none;
}

/* I fuld størrelse: over rullerammen, en anelse større. */
.kort-modal .kort-shot-badge {
    z-index: 2;
    left: 16px;
    top: 16px;
    font-size: 14px;
}

.kort-modal .kort-shot-badge[hidden] {
    display: none;
}

.kort-shot-badge--free {
    background: rgba(8, 18, 34, 0.82);
    color: #FFFFFF;
}

.kort-shot-badge--enc {
    background: #D9A521;
    color: #1B1300;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   KORTET I FULD STØRRELSE
   ══════════════════════════════════════════════════════════════════════════════════════
   Se kommentaren ved <dialog> i Soekort.cshtml for hvorfor rammen kan rulles, og hvorfor
   det er en ramme for sig og ikke dialogen selv.

   width: fit-content, så dialogen bliver præcis så stor som billedet inde i den - hverken
   en sort kant til venstre på en bred skærm eller en fast bredde, der beskærer. */
.kort-modal {
    width: fit-content;
    max-width: 96vw;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #0D1525;
    overflow: hidden;
}

.kort-modal::backdrop {
    background: rgba(4, 6, 16, 0.86);
}

.kort-modal-frame {
    /* Loftet står HER og ikke på dialogen: rullepanelet skal høre til rammen, så et klik på
       baggrunden kan kendes fra et fat i panelet. */
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    background: #0D1525;
    /* Rulning med fingeren skal ikke trække siden bag dialogen med. */
    overscroll-behavior: contain;
}

.kort-modal-billede {
    display: block;
    /* ── KUN HØJDEN BEGRÆNSES ────────────────────────────────────────────────────────
       Højden holdes inden for skærmen, så kortet altid kan ses i sin fulde højde. Bredden
       får lov at blive, hvad den bliver: på en skærm er der plads, og på en telefon bliver
       billedet bredere end rammen - og så kan man trække sig hen over det. Det er hele
       grunden til, at popup'en er der.

       max-width på billedets egne 1295 px, så det aldrig skaleres OP. Opskaleret bliver
       lodskud og fyrkarakteristik udflydende, og så er der intet vundet ved at åbne det. */
    width: auto;
    height: auto;
    max-width: 1295px;
    max-height: 92vh;
}

.kort-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 19px;
    background: rgba(7, 9, 26, 0.72);
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.kort-modal-close:hover {
    background: rgba(7, 9, 26, 0.92);
}

.kort-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── HVAD KORTET ER ──────────────────────────────────────────────────────────────────
   Egen sektion på hvid bund, så den ikke ligner en fodnote til afsnittet ovenfor. Den er
   ikke småt med vilje: den siger, hvad man køber, og det skal kunne læses før man betaler.
   Se kommentaren i Soekort.cshtml om licensbetingelsen. */
.feature-note {
    background: #FFFFFF;
    padding: 64px 24px;
    border-top: 1px solid #E8ECF3;
}

.feature-note-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.feature-note-heading {
    margin: 0 0 14px;
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: #0B1220;
}

.feature-note-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #5A6678;
    text-wrap: balance;
}

@media (max-width: 900px) {
    /* Bredere end det gamle loft på 380 px, som var sat til en høj telefonskærm. Det nye
       udsnit er liggende, og på én spalte skal det have den plads, der er - ellers bliver
       lodskud og fyrkarakteristik for små til at kunne læses, og så er det bare et pænt
       blåt billede. */
    .kort-shot {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 620px) {
    .feature-note {
        padding: 48px 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   "PÅ VEJ"-SEKTIONEN
   ══════════════════════════════════════════════════════════════════════════════════════
   Bruges på AIS-siden til den indbyggede VHF-modtager - se kommentaren i Ais.cshtml for
   hvorfor den er mærket så tydeligt.

   ── DEN SKAL SE ANDERLEDES UD END RESTEN AF SIDEN ─────────────────────────────────
   Alt andet står på hvid eller lys bund. Den her står på en dæmpet blågrå flade med en
   stiplet kant. Det er ikke pynt: en besøgende, der scroller forbi uden at læse, skal kunne
   SE, at dette afsnit ikke er som de andre. Gør den ikke det, er statusmærkatet bare fem ord
   blandt tre hundrede. */
.feature-coming {
    background: #EEF3F9;
    padding: 56px 24px;
    border-top: 1px solid #E8ECF3;
}

.feature-coming-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 28px;
    background: #FFFFFF;
    /* Stiplet og ikke fuld streg - den visuelle konvention for "ikke færdig". */
    border: 1px dashed #A9BDD4;
    border-radius: 14px;
    text-align: center;
}

/* Statusmærkatet. Først i kilden OG først på skærmen, så det læses før overskriften. */
.feature-coming-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #FFF3E0;
    color: #A35A07;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.feature-coming-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E8890C;
}

.feature-coming-heading {
    margin: 0 0 16px;
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #0B1220;
}

.feature-coming-body {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: #5A6678;
    text-align: left;
}

/* Forbeholdet. Mindre end brødteksten, men IKKE gråere - det skal kunne læses, ikke
   overses. En finskrift, ingen kan se, er værre end ingen finskrift: den ligner et forsøg
   på at gemme noget. */
.feature-coming-caveat {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #E8ECF3;
    font-size: 14px;
    line-height: 1.65;
    color: #5A6678;
    text-align: left;
}

/* Samme kort, men for noget der FINDES (AIS-modtageren, 10. okt 2026): fuld kant i stedet for
   stiplet, og et grønt mærkat i stedet for det orange "under udvikling". */
.feature-coming--live .feature-coming-inner { border-style: solid; border-color: #D5E0EC; }
.feature-coming--live .feature-coming-status { background: #E6F4EC; color: #1E7B4D; }
.feature-coming--live .feature-coming-dot { background: #1E7B4D; }

@media (max-width: 620px) {
    .feature-coming {
        padding: 44px 18px;
    }

    .feature-coming-inner {
        padding: 26px 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   BATTERIALARMEN  (/funktioner/batteri)
   ══════════════════════════════════════════════════════════════════════════════════════
   Figuren viser hele alarmen i ét forløb: spændingen falder, krydser den grænse man selv
   har sat, AYLO-enheden fanger det, og beskeden lander på telefonen.

   ── TIDSLINJEN DELES AF ALLE DELE ────────────────────────────────────────────────────
   7 sekunder, og rækkefølgen er hele pointen. Kurven skal have KRYDSET grænsen, før lampen
   tænder, og lampen skal have tændt, før beskeden går af sted. Derfor står procenterne
   nedenfor i forhold til den samme 7-sekunders runde og ikke hver for sig:

       0 - 45 %   kurven tegner sig frem, aflæsningen tæller ned
          45 %    krydset - her er grænsen brudt
      46 - 58 %   lampen på enheden lyser
      52 - 66 %   beskeden løber fra enheden til telefonen
      62 - 100 %  sms'en står på skærmen

   Retter man ét tal, skal naboerne følge med - ellers tænder lampen, før der er noget at
   tænde for. */

.bat-loop {
    margin: 0;
}

.bat-loop svg {
    width: 100%;
    height: auto;
    display: block;
}

.bat-loop figcaption {
    margin: 14px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5B6B84;
}

/* ── SPÆNDINGSKURVEN ───────────────────────────────────────────────────────────────── */

/* Grænsen er STIPLET, fordi den er en indstilling og ikke en måling. Den fuldt optrukne
   linje er det, batteriet faktisk gjorde. */
.bat-graense {
    stroke: #C2762A;
    stroke-width: 1.6;
    stroke-dasharray: 6 5;
    opacity: 0.75;
}

/* Kurven tegner sig frem med stroke-dashoffset. 620 er lidt mere end stiens egen længde -
   et for lille tal ville efterlade en stump, der aldrig blev tegnet. */
.bat-kurve {
    fill: none;
    stroke: #1F6FA8;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: bat-tegn 7s linear infinite;
}

@keyframes bat-tegn {
    0%        { stroke-dashoffset: 620; }
    45%       { stroke-dashoffset: 0; }
    100%      { stroke-dashoffset: 0; }
}

/* De tre aflæsninger ligger oven i hinanden og skiftes til at være synlige. Den sidste er
   rød og bliver stående resten af runden - det er dén, alarmen handler om. */
.bat-vaerdi {
    font-size: 19px;
    font-weight: 600;
    fill: #1F6FA8;
    opacity: 0;
    font-variant-numeric: tabular-nums;
}

.bat-vaerdi:nth-child(1) { animation: bat-tal-1 7s linear infinite; }
.bat-vaerdi:nth-child(2) { animation: bat-tal-2 7s linear infinite; }
.bat-vaerdi--lav         { fill: #C2362A; animation: bat-tal-3 7s linear infinite; }

@keyframes bat-tal-1 { 0%, 20% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes bat-tal-2 { 0%, 20% { opacity: 0; } 24%, 41% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes bat-tal-3 { 0%, 41% { opacity: 0; } 45%, 100% { opacity: 1; } }

/* Krydset. Det popper frem præcis dér, hvor kurven skærer grænsen. */
.bat-kryds {
    fill: #C2362A;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: bat-kryds 7s ease-out infinite;
}

@keyframes bat-kryds {
    0%, 43%   { opacity: 0; transform: scale(0.4); }
    47%       { opacity: 1; transform: scale(1.35); }
    52%, 100% { opacity: 1; transform: scale(1); }
}

/* ── AYLO-ENHEDEN ──────────────────────────────────────────────────────────────────── */

.bat-enhed rect {
    fill: #17283C;
}

.bat-riller rect {
    fill: #23334A;
}

/* Lampen tænder FØRST når grænsen er brudt - se tidslinjen øverst. */
.bat-led {
    fill: #C2362A;
    opacity: 0.25;
    animation: bat-led 7s ease-out infinite;
}

@keyframes bat-led {
    0%, 45%   { opacity: 0.25; }
    48%       { opacity: 1; }
    58%       { opacity: 1; }
    62%, 100% { opacity: 0.35; }
}

/* Beskeden på vej. Stregen "løber" mod telefonen ved at flytte sin egen stiplings-forskydning. */
.bat-signal {
    stroke: #C2762A;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 7 9;
    opacity: 0;
    animation: bat-signal 7s linear infinite;
}

@keyframes bat-signal {
    0%, 51%   { opacity: 0; stroke-dashoffset: 32; }
    54%       { opacity: 1; }
    66%       { opacity: 1; stroke-dashoffset: -32; }
    69%, 100% { opacity: 0; stroke-dashoffset: -32; }
}

/* ── TELEFONEN ─────────────────────────────────────────────────────────────────────── */

.bat-telefon-krop {
    fill: #0E1A2A;
    stroke: #2B4056;
    stroke-width: 1.5;
}

.bat-sms {
    opacity: 0;
    animation: bat-sms 7s ease-out infinite;
}

@keyframes bat-sms {
    0%, 60%   { opacity: 0; transform: translateY(8px); }
    66%       { opacity: 1; transform: translateY(0); }
    100%      { opacity: 1; transform: translateY(0); }
}

.bat-sms-boble { fill: #16243A; }
.bat-sms-titel { font-size: 10px; font-weight: 600; fill: #F0B36B; }
.bat-sms-tekst { font-size: 8.6px; fill: #C6D4E6; }

.bat-label {
    font-size: 11px;
    fill: #5B6B84;
}

.bat-label--strong { font-weight: 600; fill: #17283C; }
.bat-label--graense { fill: #C2762A; font-weight: 500; }

/* ── FODNOTEN ────────────────────────────────────────────────────────────────────────
   Betingelsen for alarmen. Den sad først inde i figuren, hvor den var let at overse -
   en betingelse, man først opdager EFTER købet, er ikke en fodnote, det er en fælde.

   Nu står den sidst på siden, lige før prisen: dér hvor man alligevel læser det med småt.
   Stregen foroven er det, der gør den til en fodnote og ikke til et afsnit mere. */
.feature-fodnote {
    background: #F6F8FB;
    padding: 0 24px 46px;
}

.feature-fodnote-inner {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 22px;
    border-top: 1px solid #DDE4EE;
}

.feature-fodnote p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #75839A;
}

.feature-fodnote strong {
    font-weight: 500;
    color: #47566E;
}

/* ── BESKEDEN I FULD STØRRELSE ─────────────────────────────────────────────────────── */
/* Den samme sms, men som tekst man kan læse - ordlyden er enhedens egen. */
.bat-besked {
    margin: 26px 0;
    max-width: 440px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #16243A;
    color: #DCE6F4;
}

.bat-besked-afsender {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7D91AD;
}

.bat-besked-krop {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #F2F6FC;
}

.bat-besked-tid {
    margin: 12px 0 0;
    font-size: 13px;
    color: #8FA3C0;
}

/* Skærmbilledet står i et afsnit i fuld bredde her og ikke i en spalte ved siden af. */
.kort-shot--wide {
    margin: 30px 0 0;
}

/* ── BEVÆGELSE SLÅET FRA ───────────────────────────────────────────────────────────── */
/* Har man bedt om mindre bevægelse, står figuren stille på SLUTBILLEDET: kurven tegnet
   hele vejen, krydset markeret, lampen tændt og beskeden på skærmen. Den fortæller det
   samme - den fortæller det bare på én gang. */
@media (prefers-reduced-motion: reduce) {
    .bat-kurve,
    .bat-vaerdi,
    .bat-kryds,
    .bat-led,
    .bat-signal,
    .bat-sms {
        animation: none;
    }

    .bat-kurve { stroke-dashoffset: 0; }
    .bat-vaerdi:nth-child(1), .bat-vaerdi:nth-child(2) { opacity: 0; }
    .bat-vaerdi--lav { opacity: 1; }
    .bat-kryds { opacity: 1; }
    .bat-led { opacity: 1; }
    .bat-signal { opacity: 0.8; }
    .bat-sms { opacity: 1; }
}

/* ── WEBSHOPPEN (9. okt 2026) ─────────────────────────────────────────────────────────
   Tilbehør, produktsiderne og kortpakkerne - se Pages/Shop/Index, Product og ChartPacks.

   LYS BAGGRUND (ejerens ønske): "mere indbydende og lyst". .shop--light sætter de samme lyse
   værdier som den indloggede portal (.app-body), så alt, der bygger på variablerne - knapper,
   tekst, kanter - følger med. Topbjælken og bunden af sitet er stadig mørke.

   KATEGORIERNE STÅR I VENSTRE SIDE (.shop-cats) og lægger sig som en vandret række over varerne
   på en smal skærm. */
.shop--light {
    --bg: #F4F6FA;
    --bg-panel: #FFFFFF;
    --surface: #FFFFFF;
    --border: #E3E8F1;
    --text: #101A2E;
    --text-muted: #5C6880;
    --accent: #00768A;
    --accent-warm: #7A6231;
    --on-accent: #FFFFFF;
    background: var(--bg);
    color: var(--text);
}

.shop--light .shop-title { color: var(--text); }
.shop--light a:not(.btn-solid):not(.btn-ghost) { color: var(--accent); }

.shop-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.shop-main--narrow { max-width: 720px; }

.shop-cats {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-cats-title {
    margin: 6px 0 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-muted);
}

.shop--light .shop-cats a {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.shop--light .shop-cats a:hover { background: rgba(15, 26, 46, 0.05); }

.shop--light .shop-cats a.active {
    background: rgba(0, 118, 138, 0.10);
    color: var(--accent);
    font-weight: 500;
}

/* ── Varekortene: ALLE LIGE STORE ─────────────────────────────────────────────────────
   Billedfeltet har et fast format (1:1) med billedet indpasset (contain), og navn og tekst er
   afkortet til et fast antal linjer med en fast minimumshøjde. Kortene i en række strækkes til
   samme højde, og prisen og knappen står nederst. */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* Fire varer pr. række på en pc (11. okt 2026 - ejerens ønske). Sat fast og ikke med
   auto-fill, så rækken ikke bliver til fem smalle kort på en stor skærm. */
/* 1240 og ikke 1280: en skærm på 1280 px har en rullebjælke, så siden er ~1265 px bred. */
@media (min-width: 1240px) {
    .shop-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.shop-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.shop-card:hover {
    box-shadow: 0 10px 28px rgba(16, 26, 46, 0.10);
    transform: translateY(-2px);
}

.shop--light .shop-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--text);
    text-decoration: none;
}

.shop-card-media {
    aspect-ratio: 1 / 1;
    padding: 18px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
}

.shop-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-card-body {
    flex: 1;
    padding: 16px 18px 0;
}

.shop-card-body h2 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.35;
    text-transform: none;
    text-align: left;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
}

.shop-card-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.5em);
}

/* Lagerstatus (10. okt 2026): "På lager" grøn, "På fjernlager" ravgul - aldrig "udsolgt", varen
   kan stadig købes. Se ShopProductInfo.StockKey. */
.shop-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 500;
}
.shop-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.shop-stock--in { color: #1E7B4D; }
.shop-stock--remote { color: #9A6200; }
.product-buy .shop-stock { margin: 0 0 16px; }

.shop-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 18px;
}

.shop-card-price {
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
}

.shop-card-price .muted { font-size: var(--fs-sm); font-weight: 400; }

/* Produktbillede på vej - se _ProductImagePlaceholder. */
.shop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg, #F4F6FA 0 12px, #EEF1F6 12px 24px);
    color: #8B97AB;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* ── Produktsiden ────────────────────────────────────────────────────────────────── */
.shop-crumbs {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.shop-crumbs span[aria-hidden] { margin: 0 6px; }

.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.product-gallery > input { position: absolute; opacity: 0; pointer-events: none; }

.product-stage {
    display: none;
    aspect-ratio: 1 / 1;
    padding: 28px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #FFFFFF;
}

.product-gallery > .product-stage:only-child,
.product-gallery > input:checked + .product-stage { display: block; }

.product-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.product-thumbs label {
    width: 72px;
    height: 72px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #FFFFFF;
    cursor: pointer;
}

.product-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.product-lede {
    margin: 0 0 24px;
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--text-muted);
}

.product-buy {
    padding: 20px 22px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
}

.product-price s { font-size: 16px; font-weight: 400; }

.product-vat { margin: 2px 0 16px; font-size: 13px; }

.product-details {
    margin: 26px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
}

.product-specs-title {
    margin: 28px 0 10px;
    font-size: 16px;
    text-transform: none;
    text-align: left;
    color: var(--text);
}

.product-specs { margin: 0; border-top: 1px solid var(--border); }

.product-specs > div {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.product-specs dt { color: var(--text-muted); }
.product-specs dd { margin: 0; color: var(--text); }

/* ── Kortpakkerne ────────────────────────────────────────────────────────────────── */
.chartpack-list { display: grid; gap: 22px; }

.chartpack {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 26px;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    scroll-margin-top: 110px;
}

.chartpack-map { margin: 0; }

.chartpack-map img,
.chartpack-buy-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.chartpack-buy-map { margin: 8px 0 24px; }

.chartpack-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Samme udtryk som kortets ramme: sort kant, svag tone indeni - se coverage_svg.py. */
.chartpack-swatch {
    width: 16px;
    height: 12px;
    border: 2px solid #111111;
    background: rgba(17, 17, 17, 0.08);
}

/* Teksten foroven, prisen og knappen NEDERST - margin-top: auto på foden. */
.chartpack-body {
    display: flex;
    flex-direction: column;
}

.chartpack-body h2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 20px;
    text-transform: none;
    text-align: left;
    color: var(--text);
}

.chartpack-body p { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text); }

.chartpack-body .chartpack-source { color: var(--accent-warm); font-weight: 500; }

.chartpack-soon {
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF1F6;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.chartpack-facts {
    margin: 0 0 20px;
    padding-left: 18px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.7;
}

.chartpack-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.chartpack-disclaimer {
    margin: 32px 0 8px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.chartpack-terms { font-size: 13px; }

@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; gap: 20px; }
    .shop-cats { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .shop-cats-title { display: none; }
    .shop--light .shop-cats a { border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; }
    .product { grid-template-columns: 1fr; gap: 24px; }
    .chartpack { grid-template-columns: 1fr; padding: 16px; }
}

/* Førpris på varekortet og abonnementsnoten på AYLO's produktside (9. okt 2026). */
.shop-card-was {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.product-note {
    margin: -6px 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 118, 138, 0.07);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

/* Grønt flueben ved en kortpakke, kontoens båd allerede har (9. okt 2026) - se ChartPacksModel. */
.chartpack-owned {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(30, 142, 74, 0.12);
    color: #1E8E4A;
    font-size: 12px;
    font-weight: 500;
}

/* "Læg i kurv" på ÉN linje på alle varekort (9. okt 2026) - AYLO-kortet med førpris brækkede
   knappen. Knappen må ikke ombrydes, og en førpris lægger sig under prisen i stedet for ved siden af. */
.shop-card-foot .btn-solid,
.chartpack-foot .btn-solid { white-space: nowrap; flex-shrink: 0; }

.shop-card-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.shop-card-was { margin-left: 0; }

/* ── KURV, CHECKOUT, BETALING OG KVITTERING I LYST DESIGN (9. okt 2026) ──────────────────
   Sektionerne har .shop--light, så alt, der bygger på variablerne, er lyst af sig selv. Her
   rettes de få steder, der havde mørk-tilstandens farver skrevet direkte: guldteksten (#D9B54F)
   er ulæselig på hvid bund, trinnummeret havde mørk tekst på den nu mørkere cyan, og den valgte
   installation var markeret med en hvid tone, der ikke ses på hvidt. */
.shop--light .basket-line-locked,
.shop--light .basket-line-free,
.shop--light .pay-pending h2 { color: #8A6A12; }

.shop--light .pay-pending {
    background: #FFF8E6;
    border-color: #EBCF86;
}

.shop--light .checkout-step-no,
.shop--light .basket-line-badge { color: var(--on-accent); }

.shop--light .install-choice:has(input:checked) { background: rgba(0, 118, 138, 0.06); }

.shop--light .checkout-step input,
.shop--light .checkout-step select,
.shop--light .basket-line-qty input { background: #FFFFFF; }

.shop--light .notice { background: #FFFFFF; }

/* "Køb for X mere, så er fragten gratis" under fragtlinjen (9. okt 2026). */
.basket-freeship {
    margin: -4px 0 6px;
    font-size: 13px;
    color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   DEN INDBYGGEDE AIS-MODTAGER  (/funktioner/ais, 10. okt 2026)
   ══════════════════════════════════════════════════════════════════════════════════════
   En hel, mørk hero-sektion med AYLO-boksen til højre - samme mørke bund som forsidens
   produktløfte (.intro-dark), så den føles som en af sitets store sektioner og ikke en boks.
   Billedet står frit med et cyan skær bag sig; med en gennemsigtig PNG ser boksen ud til at
   svæve over fladen. */
.ais-receiver {
    position: relative;
    overflow: hidden;
    padding: 104px 24px;
    background:
        radial-gradient(70% 90% at 78% 50%, rgba(0, 194, 224, 0.14) 0%, rgba(7, 11, 24, 0) 60%),
        radial-gradient(60% 70% at 10% 0%, rgba(23, 60, 105, 0.55) 0%, rgba(7, 11, 24, 0) 65%),
        #070B18;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ais-receiver-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: center;
}

.ais-receiver-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px 16px 7px 13px;
    border: 1px solid rgba(58, 203, 110, 0.35);
    border-radius: 999px;
    background: rgba(58, 203, 110, 0.10);
    color: #5FD98C;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ais-receiver-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(58, 203, 110, 0.18);
}

.ais-receiver-title {
    margin: 0 0 18px;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-transform: none;
    text-align: left;
    color: var(--text);
}

.ais-receiver-lede {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.65;
    color: #C3CEDF;
    max-width: 58ch;
}

.ais-receiver-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.ais-receiver-chips li {
    padding: 8px 14px;
    border: 1px solid rgba(0, 194, 224, 0.30);
    border-radius: 999px;
    background: rgba(0, 194, 224, 0.08);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}

.ais-receiver-body {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 60ch;
}

.ais-receiver-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Billedet er STORT og går ud over sektionens højre kant (negativ margen), og tones ud mod
   højre med en maske. Masken lægges på billedet EFTER skyggefilteret, så skyggen tones ud
   sammen med boksen i stedet for at blive skåret af ved billedets kant - det var dét, der så
   "klippet" ud. Ingen drop-shadow-skygge nedad mere: renderingen har sin egen. */
.ais-receiver-media {
    position: relative;
    margin: 0 -240px 0 -30px;
    display: grid;
    place-items: center;
}
.ais-receiver-glow {
    position: absolute;
    inset: 8% 14% 8% 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 194, 224, 0.26), rgba(0, 194, 224, 0));
    filter: blur(24px);
}
.ais-receiver-media img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1040px;
    height: auto;
    /* To masker, der skæres sammen: ud mod højre OG ud forneden. Skyggen i selve PNG-filen går
       helt ud til de to kanter, så det er dér, den ellers så afskåret ud. */
    -webkit-mask-image:
        linear-gradient(to right, #000 55%, rgba(0, 0, 0, 0.5) 80%, transparent 100%),
        linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to right, #000 55%, rgba(0, 0, 0, 0.5) 80%, transparent 100%),
        linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-composite: intersect;
}

/* Mellemstore skærme (tablet på langs, små bærbare): to spalter endnu, men billedet går kun
   lidt ud over kanten, så boksen ikke forsvinder i fadet. */
@media (max-width: 1100px) {
    .ais-receiver-media { margin: 0 -60px 0 0; }
}

/* Tablet på højkant og telefon (ejerens ønske, 10. okt 2026): én spalte med billedet øverst,
   MINDRE og centreret. Fadet mod højre slås fra - i én spalte står boksen midt i billedet og ville
   ellers blive tonet halvt væk - og kun den bløde kant forneden beholdes. */
@media (max-width: 900px) {
    .ais-receiver { padding: 64px 18px 72px; }
    .ais-receiver-inner { grid-template-columns: 1fr; gap: 28px; }
    .ais-receiver-media { order: -1; margin: 0; }
    .ais-receiver-media img {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    }
    .ais-receiver-glow { inset: 10% 10%; }
}
@media (max-width: 520px) {
    .ais-receiver-media img { max-width: 340px; }
}

/* ── KORTPAKKE: LINKS OG EGEN SIDE (10. okt 2026) ─────────────────────────────────────
   Navnet og kortet i listen fører til pakkens egen side (/shop/charts/{land}), og foden har
   "Se detaljer" ved siden af "Læg i kurv". Se ChartPackModel. */
.chartpack-name { color: inherit; }
.chartpack-name:hover { color: var(--accent); text-decoration: none; }
.chartpack-map a { display: block; }
.chartpack-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chartpack-actions a { white-space: nowrap; }

.chartpack-detail { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.chartpack-detail-map { margin: 0; }
.chartpack-detail-map img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #FFFFFF;
}
.chartpack-detail .chartpack-owned { margin: 0 0 12px; }
.chartpack-detail .chartpack-source { margin: 0 0 10px; color: var(--accent-warm); font-weight: 500; font-size: var(--fs-sm); }
.chartpack-detail .chartpack-per { font-size: 15px; font-weight: 400; }
.chartpack-detail .chartpack-facts { margin-top: 22px; }
.chartpack-detail .chartpack-disclaimer { margin-top: 18px; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   KORTPAKKERNE PÅ SØKORTSIDEN  (/funktioner/soekort#kortpakker, 10. okt 2026)
   ══════════════════════════════════════════════════════════════════════════════════════
   En lille webshop for søkortet: ét varekort pr. land med dækningskort, pris, købsknap og
   "Se detaljer". Hvid bund efter den lysegrå forklaring, så de to sektioner kan skelnes. */
.kort-packs {
    background: #FFFFFF;
    padding: 76px 24px 84px;
    border-top: 1px solid #E8ECF3;
}
.kort-packs-inner { max-width: var(--page-max); margin: 0 auto; }
.kort-packs-lede {
    margin: -8px 0 32px;
    max-width: 70ch;
    font-size: 16px;
    line-height: 1.7;
    color: #5A6678;
}

/* Fire på en række (ejerens ønske, 10. okt 2026) - tre, to og én på smallere skærme. */
.kort-packs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1100px) { .kort-packs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .kort-packs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .kort-packs-grid { grid-template-columns: 1fr; } }

.kort-pack {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E3E8F0;
    border-radius: 16px;
    background: #FFFFFF;
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.kort-pack:hover { box-shadow: 0 14px 32px rgba(11, 18, 32, 0.10); transform: translateY(-2px); }

.kort-pack-map { display: block; background: #F6F8FB; border-bottom: 1px solid #E8ECF3; }
.kort-pack-map img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

.kort-pack-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.kort-pack-body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; text-transform: none; text-align: left; }
.kort-pack-body h3 a { color: #0B1220; }
.kort-pack-body h3 a:hover { color: #007C93; text-decoration: none; }
.kort-pack-source {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #7A6231;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kort-pack-owned,
.kort-pack-soon {
    width: fit-content;
    margin: 0 0 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.kort-pack-owned { background: rgba(30, 142, 74, 0.12); color: #1E8E4A; }
.kort-pack-soon { background: #EEF1F6; color: #6B7A90; }

.kort-pack-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #EEF1F6;
}
.kort-pack-price { font-size: 16px; font-weight: 600; color: #0B1220; }
.kort-pack-price span { font-size: 13px; font-weight: 400; color: #6B7A90; }
.kort-pack-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kort-pack-actions .btn-solid { white-space: nowrap; }
.kort-pack-more { font-size: 13px; font-weight: 500; color: #007C93; white-space: nowrap; }

/* Tilbage-knappen på kortpakkens egen side. */
.chartpack-back {
    display: inline-block;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}
.chartpack-back:hover { color: var(--accent); text-decoration: none; }

.kort-packs-note {
    margin: 28px 0 6px;
    max-width: 80ch;
    font-size: 14px;
    line-height: 1.6;
    color: #5A6678;
}
.kort-packs-all a { font-weight: 500; color: #007C93; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   BILLEDET I STOR UDGAVE  (10. okt 2026) - se Pages/Shared/_ImageZoom.cshtml
   ══════════════════════════════════════════════════════════════════════════════════════ */
img.is-zoomable { cursor: zoom-in; }
img.is-zoomable:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.img-zoom {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.img-zoom[open] { display: grid; place-items: center; }
.img-zoom::backdrop { background: rgba(4, 8, 18, 0.88); }

.img-zoom-img {
    max-width: min(92vw, 1400px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.img-zoom-close,
.img-zoom-nav {
    position: fixed;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(13, 21, 37, 0.75);
    color: #FFFFFF;
    cursor: pointer;
    line-height: 1;
    transition: background 150ms ease, border-color 150ms ease;
}
.img-zoom-close:hover,
.img-zoom-nav:hover { background: rgba(0, 194, 224, 0.85); border-color: transparent; }

.img-zoom-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 28px; }
.img-zoom-nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; font-size: 34px; padding-bottom: 4px; }
.img-zoom-prev { left: 18px; }
.img-zoom-next { right: 18px; }
.img-zoom.is-single .img-zoom-nav { display: none; }

.img-zoom-count {
    position: fixed;
    bottom: 18px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

@media (max-width: 620px) {
    .img-zoom-nav { width: 42px; height: 42px; margin-top: -21px; font-size: 28px; }
    .img-zoom-prev { left: 8px; }
    .img-zoom-next { right: 8px; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════
   LETTERE TYPOGRAFI  (11. okt 2026 - ejerens ønske, efter getorca.com)
   ══════════════════════════════════════════════════════════════════════════════════════
   Hele sitet er gjort ét trin lettere: 800 og 700 blev til 600, og 600 blev til 500 - en
   mekanisk omskrivning af hver font-weight i denne fil, så forholdet mellem tingene er det
   samme, bare tyndere. Inter er variabel (se fonts.css), så alle vægte kommer fra den samme fil.

   Brødteksten på de offentlige sider står i 350: mellem let og normal. 300 blev for tyndt i de
   små grå tekster på kortene; 400 så tungt ud ved siden af de lettere overskrifter.

   <b> og <strong> er 600 og ikke browserens 700, ellers stikker de fede ord ud af den lette
   tekst omkring dem. */
.public-body,
.login-body {
    font-weight: 350;
}

b,
strong {
    font-weight: 600;
}