/* =====================================================================
   site.01.css
   Sitets egne regler: video, formularer, sidernes stil (.side), farverne (lys skin), top, bund, rettelser og bredt layout.
   Samlet af: video.03.css, bootstrap-kompat.02.css, danskejernbaner.09.css, artikel-faktaboks.02.css, site.72.css, lys_skin.03.css, top.01.css, fod.01.css, rettelser.01.css, layout-bred.01.css
   Ubrugte regler er fjernet 09.10.2026. Rækkefølgen er den samme som før, så kaskaden er uændret.
   ===================================================================== */

/* ===== fra video.03.css ===== */
.video-oversigt {
    margin: 0 auto;
}
.video-kort {
    background: #fff;
    border: 1px solid #cfcfcf;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.video-top {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.video-billede {
    position: relative;
    width: 320px;
    min-width: 280px;
    cursor: pointer;
    flex-shrink: 0;
}
.video-billede img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #bbb;
}
.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.video-billede:hover .play-overlay {
    background: rgba(0, 0, 0, 0.28);
}
.play-knap {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.play-knap:before {
    content: "";
    display: block;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 28px solid rgba(255, 255, 255, 0.95);
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
}
.video-info {
    flex: 1;
    min-width: 280px;
}
.video-linjer {
    margin-bottom: 10px;
}
.video-linje {
    display: flex;
    margin-bottom: 4px;
    line-height: 1.4;
}
.video-label {
    width: 150px;
    font-weight: bold;
    color: #333;
    flex-shrink: 0;
}
.video-vaerdi {
    color: #333;
    flex: 1;
}
.anbefaling {
    margin-top: 20px;
}
.anbefaling-overskrift {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}
.stjerner {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}
.stjerner input {
    display: none;
}
.stjerner label {
    font-size: 28px;
    color: #bbb;
    cursor: pointer;
    transition: color 0.2s ease;
}
.stjerner label:hover,
.stjerner label:hover ~ label,
.stjerner input:checked ~ label {
    color: #d4a300;
}
.beskrivelse-wrapper {
    padding: 0 20px 20px 20px;
}
.beskrivelse-felt {
    background: #fafafa;
    border: 1px solid #d6d6d6;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.beskrivelse-felt:hover {
    background: #f0f0f0;
}
.beskrivelse-overskrift {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333333;
}
.beskrivelse-kort {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    font-size: 14px;
    color: #535353;
}
.beskrivelse-fuld {
    display: none;
    line-height: 1.6;
    font-size: 14px;
    color: #333333;
}
.beskrivelse-felt.aktiv .beskrivelse-kort {
    display: none;
}
.beskrivelse-felt.aktiv .beskrivelse-fuld {
    display: block;
}
.beskrivelse-hint {
    margin-top: 10px;
    font-size: 16px;
    color: #232323;
}
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.video-modal.aktiv {
    display: flex;
}
.video-modal-indhold {
    position: relative;
    width: min(1200px, 95vw);
    background: #000;
}
.video-modal video {
    width: 100%;
    height: auto;
    max-height: 90vh;
    display: block;
    background: #000;
}
.video-luk {
    position: absolute;
    top: -42px;
    right: 0;
    background: #fff;
    color: #000;
    border: none;
    font-size: 16px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: bold;
}
.anbefaling-visning {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}
.stjerner-visning {
    position: relative;
    display: inline-block;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 2px;
}
.stjerner-visning-bag {
    color: #c7c7c7;
}
.stjerner-visning-for {
    color: #d4a300;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
}
.anbefaling-tal {
    font-size: 14px;
    color: #333;
}
.stjerner-afgiv {
    display: inline-flex;
    gap: 2px;
}
.stemme-stjerne {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #bcbcbc;
    transition: color 0.2s ease, transform 0.2s ease;
}
.stemme-stjerne:hover {
    transform: scale(1.05);
}
.stjerner-afgiv:hover .stemme-stjerne {
    color: #bcbcbc;
}
.stjerner-afgiv[data-hover="1"] .stemme-stjerne:nth-child(-n+1),
.stjerner-afgiv[data-hover="2"] .stemme-stjerne:nth-child(-n+2),
.stjerner-afgiv[data-hover="3"] .stemme-stjerne:nth-child(-n+3),
.stjerner-afgiv[data-hover="4"] .stemme-stjerne:nth-child(-n+4),
.stjerner-afgiv[data-hover="5"] .stemme-stjerne:nth-child(-n+5) {
    color: #d4a300;
}
.stjerner-afgiv.disabled {
    opacity: 0.55;
    pointer-events: none;
}
.anbefaling-status {
    font-size: 14px;
}
.anbefaling-status-stemt {
    color: #666;
}
.anbefaling-status-ok {
    color: #1b6b1b;
}
.anbefaling-status-fejl {
    color: #9f1d1d;
}
@media (max-width: 768px) {
    .video-top {
        flex-direction: column;
    }
    .video-billede {
        width: 100%;
    }
    .video-linje {
        flex-direction: column;
    }
    .video-label {
        width: auto;
        margin-bottom: 2px;
    }
}

/* ===== fra bootstrap-kompat.02.css ===== */
/* =====================================================================
   bootstrap-kompat.02.css (lyst design)
   Håndskrevne erstatninger for de Bootstrap 5-klasser, som PHP-koden
   stadig bruger, efter at Bootstrap er udskiftet med sitets egen CSS.
   Kun de klasser der faktisk bruges er med. Værdierne svarer til
   Bootstrap 5 (rem = 16px).
   Indlæses før danskejernbaner.NN.css, så sitets egne regler vinder.
   ===================================================================== */
/* ===== ALERT START ===== */
/* Bruges til fejl- og kvitteringsbeskeder (login, password, slet bruger m.fl.).
   Farver som Bootstrap 5 - samme palet som sitets .table-success/.table-danger */
.alert {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    box-sizing: border-box;
}
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
.alert a {
    color: inherit;
    font-weight: 700;
}
/* ===== ALERT SLUT ===== */
/* ===== AFSTAND START ===== */
.mb-3 {
    margin-bottom: 1rem !important;
}
/* ===== AFSTAND SLUT ===== */
/* ===== GRID START ===== */
/* Bruges direkte på input-felter (ikke i en .row), så felterne står side om side
   fra 576px. På smallere skærme fylder hvert felt hele bredden. */
/* ===== GRID SLUT ===== */

/* ===== fra danskejernbaner.09.css ===== */
@media screen and (min-width: 1250px) {
    .borderexample {
        border: 1px;
        border-style: solid;
        border-color: #e3e6e9;
        padding: 20px;
        margin-bottom: 0px;
    }
}
/* Sørg for at divider-LI ikke tager normal menuhøjde/padding */
.menu_container .dropdown-divider-menu {
    list-style: none;
    padding: 0 !important;
    margin: 6px 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
}
/* Selve stregen tegnes som pseudo-element */
.menu_container .dropdown-divider-menu::before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: #ffffff55; /* hvid nuance til mørk baggrund */
}
.DKJ-nowrap {
    white-space: nowrap;
}
.spaced {
    margin-bottom: 0.5em;
}
.collapsible {
    background-color: #8CC152;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}
.active, .collapsible:hover {
    background-color: #32aa27;
}
.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #F5F6F7;
    border: 1px solid #E3E6E9;
    border-top: none;
}
.text-justify-wide ul {
    margin: 0 0 16px 0;
    padding-left: 4em; /* pæn indrykning */
}
.text-justify-wide ul li {
    margin: 8px 0; /* luft mellem punkter */
    line-height: 1;
}
.text-justify-wide ul li::marker {
    padding: 1em 0;
    color: #8CC152; /* signaturgrøn bullet */
    content: "• "; /* kan skiftes til "–", "▪", "»" osv. */
    font-size: 1.1em; /* lidt skarpere bullet */
    font-weight: 700; /* gør bullet tydelig */
}
.DKJ-category {
    color: #477D1B; /* mørk signaturgrøn - læsbar på hvid */
    font-weight: 400;
}
.DKJ-date {
    color: #25282A;
    font-weight: 400;
}
.text-justify-wide strong,
.text-justify-wide b {
    color: #25282A;
}
.article-meta {
    /* JAL
    border: 1px;
    border-style: solid;
    border-color: #e3e6e9;
    JAL */

    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 2em;
}
/* ===== BILLED STYLING START ===== */
.DKJ_img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: crisp-edges;
}
.img-box-XL {
    display: flex;
    flex-direction: column;
}
.img-box-XL img {
    width: 100%;
    height: auto;
    display: block;
}
.img-title {
    margin-top: 0.2em;
}
.img-credit {
    margin-top: 0.2em;
    font-size: 14px;
    color: #777;
}
/* ===== BILLED STYLING SLUT ===== */
/* ===== BOOK STYLING START ===== */
.book-cover img {
    display: block;
    width: 120px;
    height: auto;
}
.book-label {
    width: 170px;
    font-weight: 600;
    vertical-align: top;
    white-space: nowrap;
    padding: 4px 10px 4px 0;
}
.book-value {
    padding: 4px 0;
}
@media (max-width: 700px) {
    .book-cover img {
        width: 90px;
    }
    .book-label {
        width: 120px;
        white-space: normal;
    }
}
/* ===== BOOK STYLING SLUT ===== */
/* ===== VIDEO STYLING START ===== */
.DKJ_video {
    width: 100%;
    height: auto;
    display: block;
}
/* ===== VIDEO STYLING SLUT ===== */
/* ===== KNAPPER STYLING START ===== */
.button-green-L {
    width: 200px;
    height: 46px;
    background-color: #8CC152;
    color: #ffffff;
    border: none;
    border-radius: 0; /* skarpe hjørner */
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 46px; /* lodret centrering */
    cursor: pointer;
    box-sizing: border-box;
}
.button-red-L {
    width: 200px;
    height: 46px;
    background-color: #C15252;
    color: #ffffff;
    border: none;
    border-radius: 0; /* skarpe hjørner */
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 46px; /* lodret centrering */
    cursor: pointer;
    box-sizing: border-box;
}
/* ===== KNAPPER STYLING SLUT ===== */
/* ===== RADIO STYLING SLUT ===== */
/* ===== RADIO STYLING SLUT ===== */
/* ===== CKEditor STYLING START ===== */
/* CKEditor 5: selve skrivefladen */
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-editor__editable_inline,
.ck-content {
    background: #FFFFFF !important;
}
/* CKEditor 5 – toolbar */
.ck.ck-toolbar {
    background-color: #F0F0F0 !important;
    border: none;
}
/* ===== CKEditor STYLING SLUT ===== */
/* ===== IKON STYLING START ===== */
.ikon-lille {
    height: 14px;
    width: auto;
}
/* ===== IKON STYLING SLUT ===== */
/* ===== INCIDENT STYLING START ===== */
.incident-bruger {
    background-color: #F5F6F7;
}
.incident-bruger-tak {
    background-color: #EAF4E0; /* lys signaturgrøn */
}
/* ===== INCIDENT STYLING SLUT ===== */
/* ===== TEXT STYLING START ===== */
.text-justify-wide {
    font-size: 16px;
}
/* Kun justify når skærmen er mindst 500px bred */
@media (min-width: 700px) {
    .text-justify-wide {
        text-align: justify;
        text-justify: inter-word;
    }
}
.DKJ-font-reed {
    color: #ff2a2b;
    font-weight: 500;
}
.DKJ-font-green {
    color: #477D1B;
    font-weight: 600;
}
.DKJ-font-bold-green {
    color: #477D1B;
    font-weight: bold;
}
.DKJ-noter {
    font-size: 0.8em;
    line-height: 1.3em;
    font-weight: 500;
}
.DKJ-note-green-center {
    font-size: 1.0rem;
    color: #477D1B;
    text-align: center;
    font-weight: 800;
}
.text-underline-hover {
    color: #477D1B; /* mørk signaturgrøn - læsbar på hvid */
    font-weight: 500;
    text-decoration: none;
}
.text-underline-hover:hover {
    color: #2F5512;
    font-weight: 400;
    text-decoration: underline;
}
/* ===== TEXT STYLING SLUT ===== */
/* ===== TABLE STYLING START ===== */
table.row-lines {
    border-collapse: collapse;
    width: 100%;
}
.row-lines th,
.row-lines td {
    padding: 8px 12px;
    text-align: left;
    font-size: 16px;
}
.row-lines thead th {
    border-bottom: 2px solid #8CC152; /* signaturgrøn linje under kolonneoverskrifter */
    background-color: #F0F0F0;
}
.row-lines tbody tr {
    border-bottom: 1px solid #E3E6E9;
}
/* Success (grøn – OK / gennemført) */
.table-success {
    background-color: #d1e7dd;
    color: #0f5132;
}
.table-success td,
.table-success th {
    border-color: #badbcc;
}
/* Warning (gul – opmærksomhed) */
.table-warning {
    background-color: #fff3cd;
    color: #664d03;
}
.table-warning td,
.table-warning th {
    border-color: #ffecb5;
}
/* Danger (rød – fejl / kritisk) */
.table-danger {
    background-color: #f8d7da;
    color: #842029;
}
.table-danger td,
.table-danger th {
    border-color: #f5c2c7;
}
/* Hover-effekt (valgfri – som Bootstrap) */
.table-success:hover,
.table-warning:hover,
.table-danger:hover {
    filter: brightness(0.96);
}
.table-scroll {
    width: 100%;
    overflow-x: auto; /* giver vandret scroll */
    -webkit-overflow-scrolling: touch; /* “smooth” inertial scroll på iOS */
}
.table-scroll table.row-lines {
    border-collapse: collapse;
    width: 100%; /* fylder wrapperen når der er plads */
}
/* ===== TABLE STYLING SLUT ===== */

/* ===== fra artikel-faktaboks.02.css ===== */
/* =====================================================================
   artikel-faktaboks.02.css
   Artikel med faktaboks: artikelteksten til venstre og en faktaboks
   (fx stamdata for en station) til højre. Bruges når print_artikel_start()
   får en faktaboks med (se GET_forloeb_faktaboks i funktioner.site.php).
   Lyst design med sitets grønne signaturfarve (#8CC152) som accent.
   ===================================================================== */
/* ===== LAYOUT START ===== */
.artikel-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 400px);
    gap: 30px;
    align-items: start;
}
.artikel-tekst {
    min-width: 0; /* lange ord/tabeller må ikke presse faktaboksen ud */
}
/* ===== LAYOUT SLUT ===== */
/* ===== FAKTABOKS START ===== */
.faktaboks {
    margin-top: 2em; /* samme top som artiklens første blok (.article-meta) */
    background-color: #FFFFFF;
    border: 1px solid #E3E6E9;
    border-top: 3px solid #8CC152;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 14px rgba(37, 40, 42, 0.08);
    overflow: hidden;

    /* Bliver stående ved siden af teksten, når man scroller ned i lange artikler */
    position: sticky;
    top: 60px; /* under den faste menu */
}
.faktaboks-hoved {
    padding: 18px 20px 14px;
    background-color: #F5F6F7;
    border-bottom: 1px solid #E3E6E9;
}
.faktaboks-etiket {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #477D1B; /* mørk signaturgrøn - læsbar på lys baggrund */
    margin-bottom: 4px;
}
.faktaboks .faktaboks-titel {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
    color: #25282A;
    margin: 0;
}
/* Statusmærker (I drift / Nedlagt / Nedrevet) */
.faktaboks-maerker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.faktaboks-maerke {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}
.faktaboks-maerke-aktiv {
    color: #2F6B12;
    background-color: #EAF4E0;
    border-color: #BFDDA3;
}
.faktaboks-maerke-nedlagt {
    color: #A12D2D;
    background-color: #FBECEC;
    border-color: #EBC0C0;
}
/* Oplysningerne */
.faktaboks-liste {
    margin: 0;
    padding: 6px 20px 12px;
}
.faktaboks-raekke {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #ECEEF0;
}
.faktaboks-raekke:last-child {
    border-bottom: none;
}
.faktaboks-liste dt {
    font-size: 13px;
    line-height: 1.4;
    color: #6B7178;
}
.faktaboks-liste dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #25282A;
    overflow-wrap: anywhere; /* lange GPS-koordinater og adresser */
}
/* Ikke udfyldte oplysninger ("---") nedtones */
.faktaboks-liste dd.faktaboks-tom {
    color: #A0A6AB;
}
/* ===== FAKTABOKS SLUT ===== */
/* ===== SMALLE SKÆRME START ===== */
/* Mobil (temaets mobil-breakpoint): én spalte med faktaboksen over teksten */
@media screen and (max-width: 767px) {
    .artikel-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .artikel-layout .faktaboks {
        order: -1;
        position: static;
    }
}
/* ===== SMALLE SKÆRME SLUT ===== */

/* ===== fra site.72.css ===== */
/* =====================================================================
   site.72.css
   Fælles layout for sitets indholdssider (funktioner.site.php) - første
   side: vis.station.php. Historien, data og billederne i fokus.
   Alt er afgrænset til .side, så sider uden den wrapper ikke påvirkes.
   Farver bygger på variablerne i lys_skin.NN.css.
   Opbygning: sidehoved -> stort foretrukket billede -> tekst + faktabokse
   -> galleri -> film -> kort gennem tiden -> tegninger -> banemærker
   -> litteratur -> flere data -> administration.
   ===================================================================== */
.side {
    --side-groen: var(--dkj-groen, #8CC152);
    --side-groen-tekst: var(--dkj-groen-tekst, #3A6816);
    --side-tekst: #2E3236;
    --side-overskrift: var(--dkj-overskrift, #25282A);
    --side-svag: #5F666D;
    --side-linje: var(--dkj-linje, #C9D0D6);
    --side-kort: var(--dkj-bg-kort, #F4F6F8);
    --side-flade: var(--dkj-bg-flade, #DCE1E6);
    --side-radius: 8px;
    --side-skygge: 0 2px 10px rgba(37, 40, 42, 0.08);
    padding-bottom: 24px;
}
/* Temaet giver alle afsnit padding: 1em 0 - her styres afstanden med margin */
.side p {
    padding: 0;
}
/* ===== SIDEHOVED START ===== */
.side-hoved {
    margin: 28px 0 22px;
}
.side-sti {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--side-svag);
    margin-bottom: 10px;
}
.side-sti a {
    color: var(--side-groen-tekst);
}
.side-sti a:hover {
    text-decoration: underline;
}
.side .side-titel {
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--side-overskrift);
    margin: 0;
}
.side-hoved-linje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 14px;
}
.side-maerker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.side .side-meta {
    margin: 0;
    font-size: 14px;
    color: var(--side-svag);
}
/* ===== SIDEHOVED SLUT ===== */
/* ===== FORETRUKKET BILLEDE (HERO) START ===== */
/* Billedet og billedteksten centreres */
.side-hero {
    margin: 0;
    text-align: center;
}
/* Kun selve billedet i dets eget format - ingen baggrund eller udfyldning.
   Rammen følger billedets størrelse; højden er begrænset som før. */
.side-hero-ramme {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    overflow: hidden;
    border-radius: var(--side-radius);
    cursor: zoom-in;
}
.side-hero-billede {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(210px, 48vh, 585px);
}
.side-forstoer {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s;
}
.side-hero-ramme:hover .side-forstoer,
.side-hero-ramme:focus-visible .side-forstoer {
    opacity: 1;
}
/* Billedet i venstre kolonne over teksten (side-indhold-med-billede):
   boksene til højre starter øverst ud for billedet */
.side-indhold-med-billede .side-hero {
    margin-bottom: 28px;
}
/* Billedtekst som i galleriet ("Billeder af ..."): venstrestillet under billedet,
   billedtekst, fotograf og "Download billede" på hver sin linje.
   Figuren er præcis så bred som billedet (fit-content), og billedteksten bidrager
   ikke til bredden (width: 0 + min-width: 100%), så den flugter med billedets kanter. */
.side .side-hero,
.side .side-artikel-figur {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.side-hero-tekst,
.side-artikel-figur figcaption,
.side-hero .side-rediger,
.side-artikel-figur .side-rediger {
    width: 0;
    min-width: 100%;
}
.side-hero-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
/* ===== FORETRUKKET BILLEDE (HERO) SLUT ===== */
/* ===== HISTORIE + FAKTABOKS START ===== */
/* Tekst til venstre (flugter med billedet), faktabokse til højre */
.side-indhold {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-areas: "tekst fakta";
    gap: 28px; /* afstand mellem teksten og boksene til højre */
    margin-top: 26px; /* afstand fra sidehovedet (overskriften) til teksten */
}
/* Meget brede skærme: lidt bredere faktabokse */
@media screen and (min-width: 1600px) {
    .side-indhold {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}
/* Venstre kolonne: historien og i forlængelse af den Administration og "Flere data" */
.side-tekst-kolonne {
    grid-area: tekst;
    min-width: 0;
}
.side-tekst {
    min-width: 0;
}
.side .side-flere-data,
.side .side-admin {
    margin-top: 40px;
}
/* Stamdata, andre stationer, jernbaner og "Læs og se mere" under hinanden */
.side-fakta {
    grid-area: fakta;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Rækker med ét felt over hele bredden: navn (link) øverst, detaljer nedenunder.
   Samme skillelinjer og skrifttyper som stamdata - blot stablet */
.side .faktaboks-raekke-stablet {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
}
.side .faktaboks-raekke-stablet dt {
    font-size: 14px;
    line-height: 1.4;
    color: var(--side-overskrift);
}
.side .faktaboks-raekke-stablet dt a {
    font-weight: 500;
}
.side .faktaboks-raekke-stablet dd {
    font-size: 13px;
    color: var(--side-svag);
}
.side .faktaboks-raekke-stablet form {
    margin-top: 6px;
}
/* Den aktuelle side i en liste (fx stationen selv i "Andre stationer") - fremhævet, ikke et link */
.side .faktaboks-raekke-aktuel dt {
    font-weight: 600;
}
/* Faktaboksen står i sidekolonnen og skal ikke følge med ved scroll her */
.side .faktaboks {
    position: static;
    margin-top: 0;
}
/* Historien: rolig typografi med lige margen i begge sider.
   Orddeling (dansk, <html lang='da'>) undgår store huller mellem ordene */
.side-tekst p,
.side-tekst li {
    font-size: 18px;
    line-height: 1.75;
    color: var(--side-tekst);
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.side-tekst p {
    margin: 0 0 1.15em;
}
.side-tekst > p:first-child {
    font-size: 20px;
    line-height: 1.65;
    color: var(--side-overskrift);
}
.side-tekst h2,
.side-tekst h3,
.side-tekst h4 {
    color: var(--side-overskrift);
    font-weight: 500;
    margin: 1.6em 0 0.5em;
}
.side-tekst h2 { font-size: 26px;
}
.side-tekst h3 { font-size: 22px;
}
.side-tekst h4 { font-size: 19px;
}
.side-tekst ul,
.side-tekst ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
}
.side-tekst li::marker {
    color: var(--side-groen);
}
.side-tekst a {
    color: var(--side-groen-tekst);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.side-tekst img {
    max-width: 100%;
    height: auto;
    border-radius: var(--side-radius);
}
.side-tom {
    color: var(--side-svag);
    font-style: italic;
}
/* ===== HISTORIE + FAKTABOKS SLUT ===== */
/* ===== SEKTIONER START ===== */
.side-sektion {
    margin-top: 64px;
}
.side-sektion-hoved {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px; /* afstand fra overskriften til indholdet */
    padding-left: 14px;
    border-left: 4px solid var(--side-groen); /* signaturgrøn markering som sitets bjælker */
}
.side .side-sektion-hoved h2 {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    color: var(--side-overskrift);
    margin: 0;
}
.side-antal {
    display: inline-block;
    min-width: 28px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--side-groen-tekst);
    background-color: #EAF4E0;
}
.side .side-note {
    margin: -8px 0 18px;
    font-size: 14px;
    color: var(--side-svag);
}
/* Knapper */
.side-knap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 11px 22px;
    border: 1px solid var(--side-groen);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    background-color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.side-knap:hover,
.side-knap:focus-visible {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side-vis-alle {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.side-knap-lille {
    padding: 4px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 12px;
    background: #FFFFFF;
    cursor: pointer;
}
.side-knap-slet {
    color: #A12D2D;
    border-color: #EBC0C0;
}
/* ===== SEKTIONER SLUT ===== */
/* ===== GALLERI START ===== */
.side-galleri {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (min-width: 900px) {
    .side-galleri {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}
@media (min-width: 2000px) {
    .side-galleri {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.side-billede {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.side-ekstra {
    display: none;
}
.side-billede-ramme {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--side-radius);
    background-color: var(--side-flade);
    cursor: zoom-in;
}
.side-billede-ramme img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.side-billede-ramme:hover img,
.side-billede-ramme:focus-visible img {
    transform: scale(1.04);
}
.side-billede-stjerne {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 13px;
    color: #FFD54A;
    background: rgba(0, 0, 0, 0.55);
}
.side-billede figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
.side-billede-titel {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--side-overskrift);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.side-billede-kredit {
    font-size: 13px;
    line-height: 1.4;
    color: var(--side-svag);
}
/* "Download billede" under billedet (billeder fra danskejernbaner.dk selv) */
.side-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
}
.side-download:hover,
.side-download:focus-visible {
    color: var(--dkj-groen-tekst-hover, #284A0F);
    text-decoration: underline;
}
.side-download .fa-download {
    font-size: 12px;
}
/* Redaktørværktøjer under hvert billede */
.side-rediger {
    margin-top: 8px;
    font-size: 13px;
}
.side-rediger summary {
    cursor: pointer;
    color: var(--side-groen-tekst);
    font-weight: 600;
}
.side-rediger summary i {
    margin-right: 4px;
    font-size: 11px;
}
/* ===== GALLERI SLUT ===== */
/* ===== FILM START ===== */
.side-film {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
    gap: 24px;
}
.side-film-element {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* YouTube i 16:9-ramme */
.side-film-ramme {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--side-radius);
    background-color: #1E2124;
}
.side-film-ramme iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.side-film-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--side-radius);
    background-color: #1E2124;
}
/* Indlejret HTML (FILM) - fx iframes fra filmarkiver */
.side-film-indlejret iframe,
.side-film-indlejret video {
    max-width: 100%;
    border-radius: var(--side-radius);
}
/* Billedtekst i samme stil som galleriet */
.side-film-element figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
.side-film-noter {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--side-svag);
}
/* ===== FILM SLUT ===== */
/* ===== KORT GENNEM TIDEN START ===== */
/* Fanebånd over hele bredden. Derunder kortet til venstre og infopanelet "Stedet"
   til højre - samme kolonner som historien og Stamdata øverst (.side-indhold),
   så kortet går helt ud til "Stedet", og "Stedet" flugter med Stamdata */
.side-kortservice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 28px;
    align-items: start;
}
@media screen and (min-width: 1600px) {
    .side-kortservice {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}
.side-kort-visninger {
    min-width: 0;
}
/* Fanebånd i to grupper: "Gennem tiden" og "Udforsk stedet" */
.side-kort-valg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.side-kort-gruppe {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
    margin-right: 2px;
}
/* Lidt luft før anden gruppe */
.side-kort-knap + .side-kort-gruppe {
    margin-left: 14px;
    padding-left: 16px;
    border-left: 1px solid var(--side-linje);
}
.side-kort-knap {
    padding: 7px 14px;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-tekst);
    background-color: #FFFFFF;
    cursor: pointer;
}
.side-kort-knap:hover {
    border-color: var(--side-groen);
}
.side-kort-knap.aktiv {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side-kort-figur {
    display: none;
    margin: 0;
}
.side-kort-figur.aktiv {
    display: block;
}
/* Fælles ramme for alle visninger - samme format, så intet hopper ved skift */
.side-kort-scene {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--side-radius);
    background-color: var(--side-flade);
    box-shadow: var(--side-skygge);
}
.side-kort-scene iframe,
.side-kort-billede,
.side-kort-billede img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.side-kort-billede {
    cursor: zoom-in;
}
.side-kort-billede img {
    object-fit: cover;
}
.side-kort-tekst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.side-kort-tekst-titel {
    font-size: 15px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-kort-tekst-kilde {
    font-size: 13px;
    color: var(--side-svag);
}
.side-kort-tekst-kilde a {
    color: var(--side-groen-tekst);
}
/* Sammenlign: historisk kort over luftfoto i dag, delt af en skyder */
.side-sammenlign {
    position: absolute;
    inset: 0;
}
.side-sammenlign img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}
.side-sammenlign-foer {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.side-sammenlign-linje {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    margin-left: -1.5px;
    background: #FFFFFF;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
/* Håndtag midt på linjen */
.side-sammenlign-linje::after {
    content: "\2039\00a0\203A"; /* ‹ › */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--side-groen-tekst);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.side-sammenlign-etiket {
    position: absolute;
    top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(37, 40, 42, 0.72);
    pointer-events: none;
}
.side-sammenlign-venstre {
    left: 10px;
}
.side-sammenlign-hoejre {
    right: 10px;
}
/* Skyderen dækker hele billedet (usynlig), så man kan trække overalt */
.side-sammenlign-skyder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}
.side-sammenlign:focus-within .side-sammenlign-linje::after {
    outline: 3px solid var(--side-groen);
    outline-offset: 2px;
}
/* Valg af år til sammenligningen */
.side-sammenlign-valg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--side-svag);
}
.side-sammenlign-aar {
    padding: 3px 12px;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-tekst);
    background: #FFFFFF;
    cursor: pointer;
}
.side-sammenlign-aar.aktiv {
    color: var(--side-groen-tekst);
    border-color: var(--side-groen);
    background: #EAF4E0;
}
/* Infopanel "Stedet" i faktaboks-stil */
.side .side-kort-info {
    margin-top: 0;
}
/* Tablet: som .side-indhold. Mobil: "Stedet" under kortet */
@media screen and (max-width: 1100px) {
    .side-kortservice {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        gap: 24px;
    }
}
@media screen and (max-width: 767px) {
    .side-kortservice {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Hele bredden: kortet fylder sidens fulde bredde (som sidehoved og fod),
   og "Stedet" lægges som en vandret bjælke under kortet */
.side-sektion-fuld .side-kortservice {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
.side .side-sektion-fuld .side-kort-info {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    align-items: center;
}
.side-sektion-fuld .side-kort-info .faktaboks-liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
}
.side-sektion-fuld .side-kort-info .faktaboks-raekke {
    border-bottom: 0;
}
@media screen and (max-width: 900px) {
    .side .side-sektion-fuld .side-kort-info,
    .side-sektion-fuld .side-kort-info .faktaboks-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Bredt kort må ikke blive højere end skærmen. width: 100% er nødvendig - ellers
   gør aspect-ratio max-height til en max-width, og kortet krymper mod venstre */
.side-sektion-fuld .side-kort-scene {
    width: 100%;
    max-height: 78vh;
}
/* Sammenlign: to interaktive kort med skillelinje */
.kortsammenlign {
    position: absolute;
    inset: 0;
    background-color: var(--side-flade);
}
.kortsammenlign-kort {
    position: absolute;
    inset: 0;
}
.kortsammenlign:fullscreen {
    width: 100%;
    height: 100%;
}
.kortsammenlign-skille {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 800;
    width: 44px;
    margin-left: -22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
}
/* Linjen */
.kortsammenlign-skille::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: #FFFFFF;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}
/* Håndtag nederst på linjen (midten er stationens markør) */
.kortsammenlign-skille::after {
    content: "\2039\00a0\203A"; /* ‹ › */
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--side-groen-tekst);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.kortsammenlign-skille:focus-visible {
    outline: none;
}
.kortsammenlign-skille:focus-visible::after {
    outline: 3px solid var(--side-groen);
    outline-offset: 2px;
}
.kortsammenlign-etiket {
    position: absolute;
    top: 10px;
    z-index: 700;
    max-width: 42%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(37, 40, 42, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* Til venstre for Leaflets zoomknapper */
.kortsammenlign-etiket-venstre {
    left: 56px;
}
.kortsammenlign-etiket-hoejre {
    right: 56px;
}
.kortsammenlign-fuld {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 800;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--side-tekst);
    cursor: pointer;
}
.kortsammenlign-fuld:hover {
    color: var(--side-groen-tekst);
}
/* Valg af de to kort under kortet */
.kortsammenlign-valg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-svag);
}
.kortsammenlign-valg label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.kortsammenlign-vaelg {
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-tekst);
    background-color: #FFFFFF;
}
.kortsammenlign-vaelg:focus {
    border-color: var(--side-groen);
    outline: 2px solid var(--side-groen);
    outline-offset: 0;
}
.kortsammenlign-byt {
    width: 34px;
    height: 34px;
    border: 1px solid var(--side-linje);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--side-groen-tekst);
    cursor: pointer;
}
.kortsammenlign-byt:hover {
    border-color: var(--side-groen);
}
/* Google Street View sidst i afsnittet, i fuld bredde */
.side-streetview {
    margin-top: 28px;
}
.side .side-streetview h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-streetview-figur {
    margin: 0 0 22px;
}
/* Samme bredde og margin som kortene i "Kort gennem tiden" */
.side-streetview-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 85vh;
    overflow: hidden;
    border-radius: var(--side-radius);
    background-color: var(--side-flade);
    box-shadow: var(--side-skygge);
}
.side-streetview-scene iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
@media screen and (max-width: 767px) {
    .kortsammenlign-valg label {
        width: 100%;
    }
    .kortsammenlign-vaelg {
        flex: 1 1 0;
        min-width: 0;
    }
    .side-kort-scene:has(.kortsammenlign) {
        aspect-ratio: 4 / 3;
    }
}
/* ===== KORT GENNEM TIDEN SLUT ===== */
/* ===== BANEMÆRKER START ===== */
/* Alle kort har samme bredde og højde (som b_gallery: 350 x 500 px).
   De øverste 80 % af kortet er billedfelt, de nederste 20 % tekst. Mærket står
   centreret (vandret og lodret) i billedfeltet; <img> får inline bredde fra
   funktioner.site.php (BANEMAERKE_BREDDE i mm * 6,5), så mærkerne har naturlig
   størrelse i forhold til hinanden. Kun mærker, der er større end feltet,
   skaleres ned. Teksten har fast højde (2 linjer titel, 1 linje arkiv). */
.side-banemaerker {
    display: grid;
    grid-template-columns: repeat(auto-fill, min(100%, 350px));
    grid-auto-rows: 500px;
    gap: 20px;
}
.side-banemaerke {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 500px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 12px 12px; /* toppen: billedfeltet har selv luft */
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.side-banemaerke:hover {
    border-color: var(--side-groen);
    box-shadow: var(--side-skygge);
}
/* Billedfeltet: de øverste 80 % af kortet - mærket centreres heri */
.side-banemaerke-billede {
    display: flex;
    flex: none;
    height: 80%;
    box-sizing: border-box;
    padding: 12px 0;
    align-items: center;
    justify-content: center;
}
.side-banemaerke-billede img {
    display: block;
    width: 100%; /* standard, hvis mærkets bredde ikke kendes */
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
/* Fast teksthøjde, så alle kort er ens */
.side-banemaerke .side-billede-titel {
    flex: none;
    min-height: calc(2 * 1.35em);
}
.side-banemaerke .side-billede-kredit {
    flex: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Banemærke-oversigten: et afsnit pr. jernbaneselskab med link i overskriften */
.side .side-sektion-hoved h2 a {
    color: inherit;
    text-decoration: none;
}
.side .side-sektion-hoved h2 a:hover {
    color: var(--side-groen-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.side-banemaerke-sektion,
.side-find {
    scroll-margin-top: 16px;
}
/* ===== BANEMÆRKER SLUT ===== */
/* ===== SØGNING OG INDEKS START ===== */
/* Elementer skjult af søgningen (js/site.NN.js) - også dem med display: flex */
.side [hidden] {
    display: none !important;
}
.side-soeg {
    margin-bottom: 18px;
}
.side-soeg-etiket {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side .side-soeg-felt {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 16px;
    color: var(--side-tekst);
    background-color: #FFFFFF;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.side .side-soeg-felt:focus {
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.25);
}
.side .side-soeg-status {
    min-height: 1.4em;
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--side-svag);
}
/* Indeks: genveje til hvert jernbaneselskab med antal */
.side-indeks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.side-indeks a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    text-decoration: none;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    transition: border-color 0.15s, background-color 0.15s;
}
.side-indeks a:hover,
.side-indeks a:focus-visible {
    border-color: var(--side-groen);
    background-color: #FFFFFF;
}
.side-indeks a span {
    font-weight: 400;
    color: var(--side-svag);
}
/* Resultat af serversøgning (Enter) under søgefeltet */
.side .side-soeg-resultat {
    margin: -6px 0 16px;
}
/* Bogstav-indeks: ens bredde, så bogstaverne står pænt i rækker */
.side-indeks-bogstaver a {
    min-width: 44px;
    justify-content: center;
}
/* ===== SØGNING OG INDEKS SLUT ===== */
/* ===== OVERSIGT EFTER FORBOGSTAV (STATIONER) START ===== */
/* Tættere afsnit på oversigten: fra boksene/forrige bogstav til næste bogstav */
.side-bogstav-sektion {
    scroll-margin-top: 16px;
}
/* (højere specificitet end .side-sektion, også i mobil-reglerne længere nede) */
.side .side-bogstav-sektion {
    margin-top: 32px;
}
/* "Find en station/et banemærke" tættere på teksten over */
.side-tekst-kolonne .side-find {
    margin-top: 28px;
}
.side-stationer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
}
/* Hver station som et lille kort: navn, status/årstal og starten af beskrivelsen */
.side-station {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    text-decoration: none;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-left: 3px solid var(--side-linje);
    border-radius: var(--side-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.side-station:hover,
.side-station:focus-visible {
    border-color: var(--side-groen);
    box-shadow: var(--side-skygge);
}
.side-station-navn {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--side-groen-tekst);
}
.side-station:hover .side-station-navn {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.side-station-foto {
    margin-left: 4px;
    font-size: 12px;
    color: var(--side-svag);
}
.side-station-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--side-svag);
}
/* Driftsstatus som lille mærke - grønt for i drift */
.side-station-status {
    padding: 1px 8px;
    font-weight: 600;
    color: var(--side-svag);
    background-color: var(--side-flade);
    border-radius: 999px;
}
.side-station-status.side-station-i-drift {
    color: var(--side-groen-tekst);
    background-color: rgba(140, 193, 82, 0.18);
}
.side-station-tekst {
    font-size: 13px;
    line-height: 1.45;
    color: var(--side-tekst);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Billedet vises kun i "Visning med billede" */
.side-station-billede {
    display: none;
}
/* --- Visning med billede - større kort med et lille billede til venstre --- */
.side-visning-billeder .side-stationer {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}
.side-visning-billeder .side-station {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: start;
    column-gap: 16px;
    row-gap: 6px;
    padding: 12px;
    min-height: 136px;
    box-sizing: border-box;
}
.side-visning-billeder .side-station-billede {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / 4;
    width: 150px;
    height: 112px; /* 4:3 */
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--side-flade);
    color: var(--side-linje);
    font-size: 30px;
}
.side-visning-billeder .side-station-billede img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Kamera-ikonet ("stedet er fotograferet") er overflødigt, når billedet vises -
   det bevares i lille visning og listevisning, hvor der ikke er billeder */
.side-visning-billeder .side-station-foto {
    display: none;
}
.side-visning-billeder .side-station-navn {
    font-size: 16px;
}
.side-visning-billeder .side-station-tekst {
    -webkit-line-clamp: 3;
    align-self: start; /* ellers strækkes feltet, og en 4. linje kan skimtes */
}
/* --- Visning: Liste - én linje pr. station --- */
.side-visning-liste .side-stationer {
    display: block;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
    overflow: hidden;
}
.side-visning-liste .side-station {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
    padding: 8px 14px;
    border: 0;
    border-bottom: 1px solid var(--side-linje);
    border-radius: 0;
    background-color: transparent;
}
.side-visning-liste .side-station:last-child {
    border-bottom: 0;
}
.side-visning-liste .side-station:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.45);
}
.side-visning-liste .side-station:hover,
.side-visning-liste .side-station:focus-visible {
    box-shadow: none;
    background-color: #FFFFFF;
}
.side-visning-liste .side-station-navn {
    font-size: 14px;
}
.side-visning-liste .side-station-meta {
    justify-content: flex-end;
}
.side-visning-liste .side-station-tekst {
    display: none;
}
/* Valg af visning (knapper under søgefeltet) */
.side-visning-valg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}
.side-visning-etiket {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side .side-visning-knap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-tekst);
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.side .side-visning-knap:hover {
    border-color: var(--side-groen);
}
.side .side-visning-knap.aktiv {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
@media screen and (max-width: 767px) {
    .side-visning-billeder .side-station {
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: 12px;
        min-height: 0;
    }
    .side-visning-billeder .side-station-billede {
        width: 104px;
        height: 78px;
        font-size: 22px;
    }
    .side-visning-billeder .side-station-tekst {
        -webkit-line-clamp: 2;
    }
    /* Listen: status og årstal under navnet */
    .side-visning-liste .side-station {
        grid-template-columns: minmax(0, 1fr);
    }
    .side-visning-liste .side-station-meta {
        justify-content: flex-start;
    }
}
/* ===== OVERSIGT EFTER FORBOGSTAV (STATIONER) SLUT ===== */
/* ===== LITTERATUR START ===== */
.side-boeger {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 18px;
}
.side-bog {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-bog-forside {
    flex: 0 0 84px;
}
.side-bog-forside img {
    display: block;
    width: 84px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.side-bog-tekst {
    min-width: 0;
}
.side .side-bog h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 4px;
}
.side-bog h3 a {
    color: var(--side-overskrift);
}
.side-bog h3 a:hover {
    color: var(--side-groen-tekst);
    text-decoration: underline;
}
.side .side-bog p {
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--side-svag);
}
.side .side-bog .side-bog-forfatter {
    color: var(--side-tekst);
    font-weight: 500;
}
/* "Omhandler 37 stationer · 2 baner" (bogoversigten) */
.side .side-bog .side-bog-omtaler {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
}
.side-bog-omtaler i {
    margin-right: 4px;
}
/* Kun for redaktører: om bogen findes i sitets samling */
.side-bog-i-samling {
    border-left: 4px solid #198754;
}
.side-bog-mangler {
    border-left: 4px solid #dc3545;
}
/* ===== LITTERATUR SLUT ===== */
/* ===== FLERE DATA (FOLDBARE PANELER) START ===== */
.side-data {
    margin-bottom: 10px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
    overflow: hidden;
}
.side-data summary {
    position: relative;
    padding: 14px 48px 14px 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--side-overskrift);
    cursor: pointer;
    list-style: none;
}
.side-data summary::-webkit-details-marker {
    display: none;
}
.side-data summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--side-groen-tekst);
}
.side-data[open] summary::after {
    content: "–";
}
.side-data summary:hover {
    background-color: var(--side-flade);
}
.side-data-indhold {
    padding: 4px 18px 16px;
    border-top: 1px solid var(--side-linje);
}
.side .side-data-kilde {
    margin: 12px 0;
    font-size: 13px;
    color: var(--side-svag);
}
/* ===== FLERE DATA SLUT ===== */
/* ===== ADMINISTRATION START ===== */
.side-admin {
    box-sizing: border-box; /* samme bredde som "Flere data" inkl. padding */
    padding: 20px;
    border: 1px dashed var(--side-linje);
    border-radius: var(--side-radius);
}
.side-admin-boks {
    margin-bottom: 16px;
}
/* Temaets knapper har faste bredder (op til 500 px) - må ikke gå ud over kolonnen */
.side-admin button {
    max-width: 100%;
}
/* ===== ADMINISTRATION SLUT ===== */
/* ===== FULDSKÆRMSVISNING (LYSBOKS) START ===== */
/* <dialog> oprettes af js/site.NN.js og ligger direkte i <body> */
.lysboks {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(12, 14, 16, 0.96);
    color: #FFFFFF;
    overflow: hidden;
}
.lysboks::backdrop {
    background: rgba(12, 14, 16, 0.96);
}
.lysboks-indhold {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.lysboks-billede {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 72px 12px;
}
.lysboks-billede img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
}
.lysboks-tekstfelt {
    flex: 0 0 auto;
    max-height: 30vh;
    overflow-y: auto;
    padding: 12px 24px 20px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: #D7DCE0;
}
.lysboks-tekstfelt strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
}
.lysboks-tekstfelt span {
    display: block;
}
.lysboks-tekstfelt a {
    color: var(--dkj-groen, #8CC152);
    text-decoration: underline;
}
.lysboks-noter {
    max-width: 70ch;
    margin: 10px auto 0;
    text-align: left;
    font-size: 14px;
    color: #B9C0C6;
}
.lysboks-taeller {
    position: absolute;
    top: 18px;
    left: 22px;
    font-size: 14px;
    color: #B9C0C6;
}
.lysboks-knap {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
}
.lysboks-knap:hover,
.lysboks-knap:focus-visible {
    background: var(--dkj-groen, #8CC152);
}
.lysboks-luk {
    top: 10px;
    right: 14px;
}
.lysboks-forrige,
.lysboks-naeste {
    top: 50%;
    transform: translateY(-50%);
}
.lysboks-forrige {
    left: 14px;
}
.lysboks-naeste {
    right: 14px;
}
body.lysboks-aaben {
    overflow: hidden;
}
/* ===== FULDSKÆRMSVISNING SLUT ===== */
/* ===== TABLET START ===== */
@media screen and (max-width: 1100px) {
    .side-indhold {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
        gap: 24px;
    }
}
/* ===== TABLET SLUT ===== */
/* ===== BANESIDEN (vis.bane.php) START ===== */
/* Strækningsdiagram: stationerne på en lodret linje med km fra første station */
.side-straekning-liste {
    list-style: none;
    margin: 0;
    padding: 10px 20px 16px;
}
.side-straekning-stop {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0 5px 24px;
    font-size: 14px;
    line-height: 1.35;
}
/* Linjen mellem stationerne */
.side-straekning-stop::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--side-groen);
}
.side-straekning-stop:first-child::after {
    top: 50%;
}
.side-straekning-stop:last-child::after {
    bottom: 50%;
}
/* Stationen som en prik på linjen */
.side-straekning-stop::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 3px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -6px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 3px solid var(--side-groen-tekst);
    border-radius: 50%;
}
/* Endestationerne: større, udfyldt prik og fed skrift */
.side-straekning-ende::before {
    left: 1px;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    background-color: var(--side-groen-tekst);
}
.side .side-straekning-ende a {
    font-weight: 700;
}
.side-straekning-km {
    margin-left: auto;
    padding-left: 10px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--side-svag);
}
/* ===== BANESIDEN (vis.bane.php) SLUT ===== */
/* ===== BANEOVERSIGT (vis.bane.oversigt.php) START ===== */
/* Genveje i adskilte grupper med en overskrift til venstre (Status / Landsdel / Banetype),
   adskilt af en tynd linje, så grupperne ikke flyder sammen */
.side-indeks-gruppe {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--side-linje);
}
.side-indeks-gruppe:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.side-indeks-etiket {
    padding-top: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
@media screen and (max-width: 767px) {
    .side-indeks-gruppe {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }
    .side-indeks-etiket {
        padding-top: 0;
    }
}
.side-indeks-status i {
    font-size: 9px;
}
/* Valg der giver 0 resultater: grået ud og ikke klikbart (print_side_valg_gruppe) */
.side-indeks .side-indeks-deaktiv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #9AA1A8;
    background-color: transparent;
    border: 1px dashed var(--side-linje);
    border-radius: 999px;
    cursor: not-allowed;
}
.side-indeks .side-indeks-deaktiv span,
.side-indeks .side-indeks-deaktiv i {
    color: #9AA1A8;
}
/* Det valgte i en valggruppe (fx "Alle", "I drift" eller "Vis hele landet") */
.side .side-indeks-valg a.aktiv {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side .side-indeks-valg a.aktiv span,
.side .side-indeks-valg a.aktiv i {
    color: #FFFFFF;
}
.side-indeks-prik-drift {
    color: var(--side-groen);
}
.side-indeks-prik-nedlagt {
    color: var(--side-svag);
}
/* Søjlediagram i en faktaboks (print_faktaboks_soejler) */
.side .side-soejle-raekke {
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    padding: 5px 0;
}
.side .side-soejle-raekke dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* Sporet fylder pladsen, så tallet altid har plads til højre */
.side-soejle-spor {
    flex: 1 1 auto;
    min-width: 0;
}
.side-soejle {
    display: block;
    height: 12px;
    width: var(--side-soejle, 0%);
    min-width: 3px;
    background-color: var(--side-groen);
    border-radius: 3px;
}
.side-soejle-tal {
    flex: none;
    min-width: 2.2em;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--side-tekst);
}
/* Kommende arrangementer hos veteranbanerne (kultunaut.dk) - et kort pr. bane */
.side-arrangementer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 16px;
    align-items: start;
}
.side-arrangement {
    padding: 16px 18px;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-top: 3px solid var(--side-groen);
    border-radius: var(--side-radius);
    overflow: hidden;
}
.side .side-arrangement-titel {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-arrangement-titel i {
    margin-right: 4px;
    color: var(--side-groen-tekst);
}
/* Kultunauts widget sætter selv sin bredde - hold den inden for kortet */
.side-arrangement-indhold,
.side-arrangement-indhold * {
    max-width: 100%;
}
/* ===== BANEOVERSIGT (vis.bane.oversigt.php) SLUT ===== */
/* ===== STATIONSKORT (vis.stations.kort.php) START ===== */
/* Værktøjslinje over kortet: kategorierne (til/fra), find station og fuld skærm */
.stationskort-vaerktoej {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 12px;
}
.side .stationskort-forklaring {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.stationskort-forklaring legend {
    float: left;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-svag);
}
/* Hver kategori er en knap med farve, navn og antal - klik slår den til og fra */
.stationskort-kategori {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-size: 14px;
    color: var(--side-tekst);
    cursor: pointer;
    user-select: none;
}
.stationskort-kategori:hover {
    border-color: var(--side-svag);
}
.stationskort-kategori input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.stationskort-kategori:focus-within {
    outline: 2px solid var(--side-groen-tekst);
    outline-offset: 2px;
}
/* Prik (station) og streg (strækning) i kategoriens farve - stiplet for nedlagte */
.stationskort-prik {
    width: 12px;
    height: 12px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background-color: var(--kat-farve);
    box-shadow: 0 0 0 1px var(--kat-farve);
}
.stationskort-streg {
    width: 22px;
    height: 0;
    border-top: 4px solid var(--kat-farve);
}
.stationskort-streg-nedlagt {
    border-top-style: dashed;
}
/* Under udførsel: lange streger (som på kortet) */
.stationskort-streg-udfoersel {
    border-top: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--kat-farve) 0 9px, transparent 9px 13px);
}
.stationskort-antal {
    font-size: 12px;
    color: var(--side-svag);
}
/* Slået fra: grå og gennemstreget */
.stationskort-kategori:has(input:not(:checked)) {
    background-color: transparent;
    color: var(--side-svag);
}
.stationskort-kategori:has(input:not(:checked)) .stationskort-navn {
    text-decoration: line-through;
}
.stationskort-kategori:has(input:not(:checked)) .stationskort-prik,
.stationskort-kategori:has(input:not(:checked)) .stationskort-streg {
    opacity: 0.3;
}
.stationskort-handlinger {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}
.stationskort-soeg label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-svag);
}
.side .stationskort-soeg input {
    width: 280px;
    max-width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 14px;
    background-color: #FFFFFF;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
}
.stationskort-knap {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--side-overskrift);
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    cursor: pointer;
}
.stationskort-knap:hover {
    border-color: var(--side-svag);
}
.stationskort-knap i {
    margin-right: 6px;
}
/* Selve kortet. isolation: Leaflets lag (z-index op til 1000) må ikke lægge sig over menuen */
.stationskort-kort {
    position: relative;
    isolation: isolate;
    height: max(520px, calc(100vh - 220px));
    background-color: #E8ECEF;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    overflow: hidden;
}
/* Det lyse baggrundskort: OpenStreetMap i gråtoner og lysere, så stationsfarverne træder frem */
.stationskort-kort .stationskort-lyst {
    filter: grayscale(1) brightness(1.08) contrast(0.85);
}
/* Noten under kortet: .side-note har negativ topmargin (til brug under overskrifter) - her skal der være luft */
.side .stationskort-note {
    margin: 14px 0 18px;
}
/* Fuld skærm: kortet og værktøjslinjen fylder hele vinduet */
.stationskort.stationskort-fuldskaerm {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background-color: var(--dkj-bg-side);
}
.stationskort-fuldskaerm .stationskort-kort {
    flex: 1 1 auto;
    height: auto;
}
.stationskort-fuldskaerm .stationskort-note {
    display: none;
}
body.stationskort-fuldskaerm-aaben {
    overflow: hidden;
}
/* Pop op på kortet */
.stationskort-pop {
    min-width: 180px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
}
.stationskort-pop strong {
    display: block;
    font-size: 15px;
    color: var(--side-overskrift);
}
.stationskort-pop span {
    display: block;
    color: var(--side-svag);
}
.stationskort-pop a {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    color: var(--side-groen-tekst);
}
/* Stationens billede øverst (fast højde, så boksen ikke hopper, når billedet er hentet) */
.stationskort-pop .stationskort-pop-billede {
    display: block;
    margin: 0 0 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--side-flade);
}
.stationskort-pop-billede img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
/* Type og kategori med kategoriens farve */
.stationskort-pop .stationskort-pop-type {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.stationskort-pop-type i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
/* Stamdata: overskrift til venstre, værdi til højre */
.stationskort-pop dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--dkj-linje-svag);
}
.stationskort-pop dt {
    font-weight: 600;
    color: var(--side-svag);
    white-space: nowrap;
}
.stationskort-pop dd {
    margin: 0;
    color: var(--side-tekst);
}
@media (max-width: 767px) {
    .stationskort-handlinger,
    .stationskort-soeg,
    .side .stationskort-soeg input {
        width: 100%;
    }
    .stationskort-kategori {
        padding: 5px 10px;
        font-size: 13px;
    }
    .stationskort-kort {
        height: 70vh;
        min-height: 420px;
    }
}
/* ===== STATIONSKORT (vis.stations.kort.php) SLUT ===== */
/* ===== ARTIKEL (vis.artikel.php) START ===== */
/* Billeder indsat i artiklens tekst - kan åbnes i fuld skærm.
   Centreret i eget format med samme højdebegrænsning som det øverste billede. */
.side-artikel-figur {
    margin: 1.8em 0;
    text-align: center;
}
.side-artikel-figur-ramme {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    overflow: hidden;
    border-radius: var(--side-radius);
    cursor: zoom-in;
}
.side-artikel-figur-ramme img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(210px, 60vh, 640px);
}
.side-artikel-figur-ramme:hover .side-forstoer,
.side-artikel-figur-ramme:focus-visible .side-forstoer {
    opacity: 1;
}
/* "Download billede" uden tekstens link-understregning - som i galleriet */
.side .side-tekst .side-download {
    text-decoration: none;
}
/* Billedtekst som i galleriet - se .side-hero-tekst ovenfor */
.side-artikel-figur figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
/* Forrige og næste artikel */
.side .side-artikel-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
}
.side-artikel-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    text-decoration: none;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.side-artikel-nav:hover,
.side-artikel-nav:focus-visible {
    border-color: var(--side-groen);
    box-shadow: var(--side-skygge);
}
.side-artikel-nav-naeste {
    text-align: right;
    align-items: flex-end;
}
.side-artikel-nav-retning {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
.side-artikel-nav-titel {
    font-size: 16px;
    font-weight: 600;
    color: var(--side-overskrift);
}
@media screen and (max-width: 767px) {
    .side .side-artikel-navigation {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ===== ARTIKEL (vis.artikel.php) SLUT ===== */
/* ===== FORSIDE (index.php) START ===== */
/* Hero: titel, kort intro med nøgletal og en stor søgning */
.side-forside-hero {
    margin: 28px 0 22px;
    padding: 28px 32px;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-top: 4px solid var(--side-groen);
    border-radius: var(--side-radius);
    box-shadow: var(--side-skygge);
}
.side .side-forside-hero .side-titel {
    margin: 0 0 10px;
}
.side .side-forside-intro {
    max-width: 900px;
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--side-tekst);
}
.side-forside-soeg-felt {
    display: flex;
    gap: 10px;
    max-width: 720px;
}
.side .side-forside-soeg-felt .side-soeg-felt {
    max-width: none;
    flex: 1 1 auto;
    font-size: 17px;
    padding: 12px 16px;
}
.side .side-knap-primaer {
    margin-top: 0;
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side .side-knap-primaer:hover,
.side .side-knap-primaer:focus-visible {
    background-color: var(--dkj-groen-tekst-hover, #284A0F);
    border-color: var(--dkj-groen-tekst-hover, #284A0F);
}
/* Genveje til hovedområderne som fliser */
.side-genveje {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.side-genvej {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
        "ikon navn antal"
        "ikon tekst tekst";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px 16px;
    text-decoration: none;
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.side-genvej:hover,
.side-genvej:focus-visible {
    border-color: var(--side-groen);
    box-shadow: var(--side-skygge);
    transform: translateY(-1px);
}
.side-genvej-ikon {
    grid-area: ikon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 19px;
    color: var(--side-groen-tekst);
    background-color: rgba(140, 193, 82, 0.18);
    border-radius: 50%;
}
.side-genvej-navn {
    grid-area: navn;
    font-size: 16px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-genvej-antal {
    grid-area: antal;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
}
.side-genvej-tekst {
    grid-area: tekst;
    font-size: 13px;
    color: var(--side-svag);
}
/* Midten af forsiden: ét gitter med fire felter
     "På denne dag"-overskriften over hele bredden
     kortene fra "På denne dag"  |  "Aktuelt" (samme højde som kortene)
     "Før og nu"                  |  "Seneste artikler"                  */
.side-forside-gitter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-areas:
        "hoved hoved"
        "dag aktuelt"
        "foer artikler";
    column-gap: 28px;
    align-items: start;
    margin-top: 32px;
}
@media screen and (min-width: 1600px) {
    .side-forside-gitter {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}
.side-forside-felt-hoved {
    grid-area: hoved;
}
.side-forside-felt-dag {
    grid-area: dag;
    min-width: 0;
}
/* "Aktuelt" strækkes til kortenes højde: boksen ligger absolut i feltet, så dens
   egen tekst ikke bestemmer højden. Teksten afkortes med en blød udtoning. */
.side-forside-felt-aktuelt {
    grid-area: aktuelt;
    align-self: stretch;
    position: relative;
    min-height: 540px; /* hoved, billede, ca. 8 linjer tekst og knappen */
}
.side .side-forside-felt-aktuelt > .faktaboks {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.side-forside-felt-aktuelt .faktaboks-hoved,
.side-forside-felt-aktuelt .side-artikel-aktuel-top {
    flex: none;
}
.side-forside-felt-aktuelt .side-artikel-aktuel-tekst {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.side .side-forside-felt-aktuelt .side-artikel-aktuel-tekst p {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.side-forside-felt-aktuelt .side-knap {
    flex: none;
    align-self: flex-start;
}
.side .side-forside-felt-foer {
    grid-area: foer;
    margin-top: 40px;
    min-width: 0;
}
.side-forside-felt-artikler {
    grid-area: artikler;
    margin-top: 40px;
}
.side .side-forside-felt-artikler > .faktaboks {
    margin-top: 0;
}
/* Er der intet "På denne dag", får "Aktuelt" sin naturlige højde */
.side-forside-uden-dag .side-forside-felt-aktuelt {
    min-height: 0;
}
.side .side-forside-uden-dag .side-forside-felt-aktuelt > .faktaboks {
    position: static;
}
/* Kort på forsiden: to pr. række i venstre kolonne, flere i fuld bredde */
.side-visning-billeder .side-stationer-forside {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
/* Ekstra mærke på et stationskort (fx "Åbnede for 152 år siden") */
.side-station-status.side-station-fremhaevet {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
}
/* Link til højre i en afsnitsoverskrift (fx "Vis andre", "Alle stationer") */
.side-sektion-link {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    text-decoration: none;
}
.side-sektion-link:hover {
    text-decoration: underline;
}
/* Når "På denne dag" er foldet ud, følger "Aktuelt" ikke længere kortenes højde
   (ellers bliver der tom plads under teksten) - den får sin naturlige højde */
.side-forside-gitter:has(.side-alle-vist) .side-forside-felt-aktuelt {
    align-self: start;
    min-height: 0;
}
.side .side-forside-gitter:has(.side-alle-vist) .side-forside-felt-aktuelt > .faktaboks {
    position: static;
}
.side .side-forside-gitter:has(.side-alle-vist) .side-forside-felt-aktuelt .side-artikel-aktuel-tekst p {
    -webkit-mask-image: none;
    mask-image: none;
}
/* Skjulte stationskort (foldes ud med "Vis alle") - stærkere end visningernes display */
.side .side-stationer .side-station.side-ekstra {
    display: none;
}
/* "+ N stationer mere har samme dato" - klikbar linje, der folder resten ud */
.side .side-forside-mere {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    background-color: var(--side-kort);
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.side .side-forside-mere:hover,
.side .side-forside-mere:focus-visible {
    border-color: var(--side-groen);
    background-color: #FFFFFF;
}
.side .side-forside-mere i {
    font-size: 12px;
}
/* Før og nu: samme skyder som i kortservicen */
.side-foer-nu {
    max-width: 1100px;
}
.side-foer-nu .side-kort-tekst-titel a {
    color: var(--side-groen-tekst);
    text-decoration: none;
}
.side-foer-nu .side-kort-tekst-titel a:hover {
    text-decoration: underline;
}
/* Kort gennem tiden på forsiden: kortservicen fra stationssiden i feltet "foer" -
   samme bredde som "Før og nu" havde, og "Stedet" under kortet (feltet er for smalt til to kolonner) */
.side-forside-felt-foer .side-sektion-hoved {
    flex-wrap: wrap;
}
.side-forside-felt-foer .side-kortviser,
.side-forside-felt-foer .side-streetview {
    max-width: 1100px;
}
.side-forside-felt-foer .side-kortservice {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
/* "Aktuelt": faktaboks-hoved øverst (som "Artikler"), derunder billedet med
   artiklens overskrift og dato oven på, og til sidst et længere uddrag */
.side-artikel-aktuel-top {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 160px;
    padding: 16px 20px 14px;
    background-color: #2E3236; /* bag billedet - og hvis der ikke er et billede */
    overflow: hidden;
}
/* Lag: billedet nederst, så udtoningen, så teksten */
.side-artikel-aktuel-billede {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-artikel-aktuel-top::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.82));
}
.side .side-artikel-aktuel-titel,
.side-artikel-aktuel-top .side-artikel-dato {
    position: relative;
    z-index: 2;
}
.side .side-artikel-aktuel-titel {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.side .side-artikel-aktuel-titel a {
    color: inherit;
    text-decoration: none;
}
.side .side-artikel-aktuel-titel a:hover {
    text-decoration: underline;
}
.side-artikel-dato {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--side-svag);
}
.side .side-artikel-aktuel-top .side-artikel-dato {
    color: rgba(255, 255, 255, 0.85);
}
.side-artikel-aktuel-tekst {
    padding: 14px 20px 20px;
}
.side .side-artikel-aktuel-tekst p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--side-tekst);
}
.side .side-knap-lille-rund {
    margin-top: 14px;
    padding: 8px 18px;
    font-size: 14px;
}
/* "Seneste artikler": lille billede til venstre for overskrift og dato */
.side .side-artikel-raekke {
    position: relative;
    min-height: 56px;
    padding-left: 88px;
}
.side-artikel-mini {
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 56px;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--side-flade);
    color: var(--side-linje);
    font-size: 20px;
}
.side-artikel-mini img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 767px) {
    .side-forside-hero {
        margin-top: 16px;
        padding: 20px 16px;
    }
    .side .side-forside-intro {
        font-size: 16px;
    }
    .side-forside-soeg-felt {
        flex-direction: column;
    }
    /* Én kolonne: kortene, "Aktuelt", "Seneste artikler" og til sidst "Før og nu" */
    .side-forside-gitter {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hoved"
            "dag"
            "aktuelt"
            "artikler"
            "foer";
        margin-top: 24px;
    }
    .side-forside-felt-aktuelt {
        min-height: 0;
        margin-top: 24px;
    }
    .side .side-forside-felt-aktuelt > .faktaboks {
        position: static;
    }
    .side .side-forside-felt-aktuelt .side-artikel-aktuel-tekst p {
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Højst 6 kort fra "På denne dag" på mobil - indtil der klikkes for at se alle */
    .side-forside-felt-dag:not(.side-alle-vist) .side-station:nth-child(n+7) {
        display: none;
    }
    .side-forside-felt-artikler {
        margin-top: 24px;
    }
    /* Genvejene kompakt: to pr. række, uden beskrivelse */
    .side-genveje {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .side-genvej {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-areas:
            "ikon navn"
            "ikon antal";
        padding: 10px 12px;
        column-gap: 10px;
    }
    .side-genvej-ikon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
    .side-genvej-navn {
        font-size: 14px;
    }
    .side-genvej-tekst {
        display: none;
    }
}
/* ===== FORSIDE (index.php) SLUT ===== */
/* ===== MOBIL START ===== */
@media screen and (max-width: 767px) {
    .side-hoved {
        margin: 18px 0 16px;
    }
    /* Billedet fylder spaltens bredde i sit eget format */
    .side-hero-billede {
        max-height: 70vh;
    }
    .side-forstoer {
        opacity: 1;
    }
    /* Én spalte: historien (med Administration og "Flere data"), derunder boksene */
    .side-indhold {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "tekst"
            "fakta";
        grid-template-rows: auto;
        gap: 24px;
        margin-top: 24px;
    }
    .side-tekst p,
    .side-tekst li {
        font-size: 17px;
        line-height: 1.7;
    }
    .side-tekst > p:first-child {
        font-size: 18px;
    }
    .side-sektion {
        margin-top: 44px;
    }
    .side-galleri {
        gap: 10px;
    }
    .side-billede-titel {
        font-size: 14px;
    }
    .side-billede-kredit {
        font-size: 12px;
    }
    .side-bog {
        padding: 12px;
    }
    .lysboks-billede {
        padding: 56px 8px 8px;
    }
    /* Mindre pile på mobil - man kan også swipe */
    .lysboks-forrige,
    .lysboks-naeste {
        width: 38px;
        height: 38px;
        font-size: 20px;
        background: rgba(0, 0, 0, 0.45);
    }
    .lysboks-forrige {
        left: 6px;
    }
    .lysboks-naeste {
        right: 6px;
    }
}
/* ===== MOBIL SLUT ===== */
/* ===== Anbefaling i sidehovedet (boganmeldelsens score) ===== */
.side-anbefaling {
    margin: 10px 0 0;
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.side-anbefaling-etiket {
    font-weight: 700;
    color: var(--side-groen-tekst);
}
.side-anbefaling-link {
    margin-left: 4px;
    font-size: 14px;
}
.side-lignende {
    margin-top: 24px;
}
/* ===== TABELLER (driftsdata, materiel) START ===== */
/* Tabellen ruller vandret på smalle skærme og lodret ved mange rækker - overskriften bliver stående */
.side-tabel-ramme {
    max-height: 640px;
    overflow: auto;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: #FFFFFF;
}
.side .side-tabel {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--side-tekst);
}
.side .side-tabel th,
.side .side-tabel td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--side-linje);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.side .side-tabel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
    background-color: var(--side-kort);
}
.side .side-tabel tbody th {
    font-weight: 600;
    color: var(--side-overskrift);
}
.side .side-tabel tbody tr:last-child th,
.side .side-tabel tbody tr:last-child td {
    border-bottom: 0;
}
.side .side-tabel tbody tr:hover {
    background-color: var(--side-kort);
}
.side .side-tabel a {
    font-weight: 500;
    color: var(--side-groen-tekst);
}
.side .side-tabel a:hover {
    text-decoration: underline;
}
.side .side-tabel .side-tabel-tal {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.side .side-tabel .side-tabel-tom {
    color: var(--side-svag);
}
.side .side-tabel .side-tabel-minus {
    color: #A12D2D;
}
/* ===== TABELLER SLUT ===== */
/* ===== EJENDOMSMÆRKE START ===== */
/* Jernbaneselskabets forkortelse (fx HVJ) er dets ejendomsmærke - vist som et
   mærke i sidehovedet og i stamdata, så det går igen på hele siden */
.side .side-ejendomsmaerke {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border: 2px solid var(--side-overskrift);
    border-radius: 4px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--side-overskrift);
    background-color: #FFFFFF;
    white-space: nowrap;
}
.side .side-ejendomsmaerke-lille {
    padding: 1px 8px;
    border-width: 1.5px;
    font-size: 14px;
}
/* På operatørkortene (oversigten, bogsiden m.fl.) */
.side .side-ejendomsmaerke-kort {
    padding: 0 6px;
    border-width: 1.5px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 0.06em;
}
/* ===== EJENDOMSMÆRKE SLUT ===== */
/* ===== ARKITEKTKORT START ===== */
/* Antal stationer og ombygninger fremhævet som mærker med store tal */
.side-arkitekt-tal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.side-arkitekt-tal-felt {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    background-color: #EAF4E0;
}
.side-arkitekt-tal-felt i {
    font-size: 12px;
}
.side-arkitekt-tal-felt strong {
    color: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}
/* Visning med billede: en ekstra række (navn, leveår, tal, tekst) ved siden af billedet */
.side-visning-billeder .side-arkitekt {
    grid-template-rows: auto auto auto 1fr;
}
.side-visning-billeder .side-arkitekt .side-station-billede {
    grid-row: 1 / 5;
}
/* Listevisning: navn, leveår og tal på én linje */
.side-visning-liste .side-arkitekt {
    grid-template-columns: minmax(0, 1fr) auto auto;
}
@media screen and (max-width: 767px) {
    .side-visning-liste .side-arkitekt {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ===== ARKITEKTKORT SLUT ===== */
/* ===== ORDBOGEN START ===== */
/* Ord med et billede: lille billede til venstre for ord og forklaring
   (i "Kort med forklaring" - listevisningen viser kun ordene) */
.side-visning-kort .side-station.side-ord-med-billede {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: start;
    column-gap: 12px;
    row-gap: 6px;
}
.side-visning-kort .side-ord-med-billede .side-station-billede {
    display: block;
    grid-row: 1 / 4;
    width: 96px;
    height: 72px; /* 4:3 */
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--side-flade);
}
.side-visning-kort .side-ord-med-billede .side-station-billede img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ===== ORDBOGEN SLUT ===== */
/* ===== STRÆKNINGEN: KRYDSENDE BANER START ===== */
/* Mellemstationer, der også betjener andre baner: et skråt, gråt spor krydser linjen
   ved stationen, og de andre baner står som links under stationens navn */
.side-straekning-kryds {
    flex-wrap: wrap;
}
/* Prikken og sporet ud for første linje (navnet), ikke midt på punktet */
.side-straekning-kryds::before {
    top: 15px;
    z-index: 2;
}
.side-straekning-kryds-spor {
    position: absolute;
    z-index: 1;
    left: -9px;
    top: 14px;
    width: 35px;
    height: 3px;
    border-radius: 2px;
    background-color: #6F7880;
    transform: rotate(-35deg);
}
.side-straekning-baner {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 1.4;
    color: var(--side-svag);
}
/* Én krydsende bane pr. linje med krydsningssymbolet til venstre - lange navne
   brydes under navnet, ikke under symbolet */
.side-straekning-baner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 1px;
}
.side-straekning-bane {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.side-straekning-bane i {
    flex: 0 0 auto;
    font-size: 11px;
}
.side .side-straekning-baner a {
    font-weight: 400;
}
/* Første og sidste station med krydsende baner: linjen starter/slutter ud for
   navnet (første linje) i stedet for midt på punktet */
.side-straekning-kryds:first-child::after {
    top: 15px;
}
.side-straekning-kryds:last-child::after {
    bottom: auto;
    height: 15px;
}
/* Tekst kun til skærmlæsere */
.side-skjult-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* ===== STRÆKNINGEN: KRYDSENDE BANER SLUT ===== */
/* ===== MATERIELOVERSIGT START ===== */
/* Enhedens tilnavn (fx »Valby«) efter litra og nummer */
.side .side-materiel-tilnavn {
    font-weight: 400;
    font-style: italic;
    color: var(--side-svag);
}
/* ===== MATERIELOVERSIGT SLUT ===== */
/* ===== MATERIELSIDEN (vis.materiel.php) START ===== */
/* Litra gennem tiden i sidehovedet: en kæde af litra med pile imellem */
.side .side-litra-kaede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 12px 0 0;
    font-size: 14px;
}
.side-litra-kaede-etiket {
    margin-right: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
.side-litra-kaede-led {
    padding: 2px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-weight: 600;
    color: var(--side-overskrift);
    background-color: #FFFFFF;
}
.side-litra-kaede i {
    font-size: 12px;
    color: var(--side-svag);
}
/* Nøgletal: de vigtigste tekniske data som fliser under billedet */
.side-noegletal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}
/* Luft mellem listen "Kunne ikke dannes" og nøgletallene under den (opdater.medier_webp.php) */
#kunne-ikke + .side-noegletal {
    margin-top: 48px;
}
.side-noegletal-flise {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "ikon vaerdi"
        "ikon etiket";
    align-items: center;
    column-gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--side-linje);
    border-left: 4px solid var(--side-groen);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
    box-shadow: var(--side-skygge);
}
.side-noegletal-flise i {
    grid-area: ikon;
    font-size: 22px;
    color: var(--side-groen-tekst);
}
.side-noegletal-vaerdi {
    grid-area: vaerdi;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--side-overskrift);
    font-variant-numeric: tabular-nums;
}
.side-noegletal-etiket {
    grid-area: etiket;
    font-size: 12px;
    color: var(--side-svag);
}
/* Lange værdier (fx "1.500 HK ved 835 o/min."): mindre skrift og flisen fylder to kolonner */
.side-noegletal-lang {
    grid-column: span 2;
}
.side-noegletal-lang .side-noegletal-vaerdi {
    font-size: 16px;
}
/* Meget lange værdier (fx en effekt med hjælpemaskiner): hele rækkens bredde */
.side-noegletal-meget-lang {
    grid-column: 1 / -1;
}
.side-noegletal-meget-lang .side-noegletal-vaerdi {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
/* Tekniske data: en overskrift pr. gruppe i faktaboksen */
.side .faktaboks-gruppe dt {
    padding-top: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
/* Livsløb: ejerskaberne som bjælker på en årsakse */
.side-livsloeb {
    padding: 16px 18px 10px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
/* Ét gitter for hele diagrammet: ejendomsmærke | litra | spor | periode - så litra
   står venstrejusteret ens uanset ejendomsmærkets bredde */
.side-livsloeb {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
}
.side-livsloeb-maerke {
    grid-column: 1;
    font-size: 14px;
}
.side-livsloeb-litra {
    grid-column: 2;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-overskrift);
    white-space: nowrap;
}
.side-livsloeb-spor {
    grid-column: 3;
}
.side-livsloeb-periode {
    grid-column: 4;
}
.side-livsloeb-spor {
    position: relative;
    height: 18px;
    border-radius: 9px;
    background: repeating-linear-gradient(90deg, var(--side-linje) 0, var(--side-linje) 1px, transparent 1px, transparent var(--side-livsloeb-trin, 10%));
}
.side-livsloeb-bjaelke {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 6px;
    border-radius: 9px;
}
.side-livsloeb-farve-0 { background-color: #3A6816;
}
.side-livsloeb-farve-1 { background-color: #8CC152;
}
.side-livsloeb-farve-2 { background-color: #3B7EA1;
}
.side-livsloeb-farve-3 { background-color: #C9862A;
}
.side-livsloeb-farve-4 { background-color: #7A5C99;
}
.side-livsloeb-farve-5 { background-color: #A14B4B;
}
/* Ukendt slutdato: bjælken toner ud */
.side-livsloeb-aaben {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
    mask-image: linear-gradient(90deg, #000 40%, transparent);
}
.side-livsloeb-periode {
    font-size: 12px;
    color: var(--side-svag);
    font-variant-numeric: tabular-nums;
}
.side-livsloeb-akse {
    grid-column: 3;
    position: relative;
    height: 20px;
    border-top: 1px solid var(--side-linje);
}
.side-livsloeb-akse span {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--side-svag);
}
/* Mobil: ejendomsmærke og litra på én linje, sporet og perioden under */
@media screen and (max-width: 767px) {
    .side-livsloeb {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 4px;
        padding: 12px;
    }
    .side-livsloeb-maerke {
        margin-top: 8px;
    }
    .side-livsloeb-litra {
        margin-top: 8px;
        white-space: normal;
    }
    .side-livsloeb-spor,
    .side-livsloeb-periode,
    .side-livsloeb-akse {
        grid-column: 1 / -1;
    }
}
/* Journalen som lodret tidslinje */
.side .side-tidslinje {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
.side-tidslinje-punkt {
    position: relative;
    padding: 0 0 22px 28px;
}
/* Linjen ned gennem punkterne */
.side-tidslinje-punkt::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: -6px;
    width: 3px;
    background-color: var(--side-groen);
}
.side-tidslinje-punkt:last-child::before {
    display: none;
}
/* Punktet */
.side-tidslinje-punkt::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 3px solid var(--side-groen-tekst);
    border-radius: 50%;
    background-color: #FFFFFF;
}
.side-tidslinje-hoved {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 4px;
}
.side-tidslinje-dato {
    font-weight: 700;
    color: var(--side-overskrift);
}
.side-tidslinje-litra {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--side-svag);
    background-color: var(--side-flade);
}
.side .side-tidslinje-tekst {
    max-width: 75ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--side-tekst);
}
/* Søsterenhederne: enheden selv fremhævet (ikke et link) */
.side .side-materiel-aktuel {
    border-color: var(--side-groen);
    box-shadow: 0 0 0 2px var(--side-groen) inset;
    cursor: default;
}
/* Selskaber, hvor "forkortelsen" er hele navnet (fx museer): navnet som almindeligt link */
.side .side-ejendomsmaerke-navn {
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
}
/* ===== MATERIELSIDEN (vis.materiel.php) SLUT ===== */
/* ===== PRODUCENTSIDEN (vis.materiel_firma.php) START ===== */
/* Farver for fremdrift og status - fælles for diagrammer og forklaringer */
.side-fremdrift-damp { background-color: #5F666D;
}
.side-fremdrift-diesel { background-color: #C9862A;
}
.side-fremdrift-el { background-color: #3B7EA1;
}
.side-fremdrift-andet { background-color: #8CC152;
}
.side-status-drift { background-color: #3A6816;
}
.side-status-veteran { background-color: #7A5C99;
}
.side-status-hensat { background-color: #8A939B;
}
.side-status-solgt { background-color: #C9862A;
}
.side-status-ophugget { background-color: #A14B4B;
}
.side-status-ukendt { background-color: #DCE1E6;
}
/* Forklaring under et diagram: farvefelt + tekst */
.side .side-forklaring {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--side-tekst);
}
.side-forklaring li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.side-forklaring-farve {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.side .side-forklaring-max {
    margin-left: auto;
    color: var(--side-svag);
}
.side-forklaring-pct {
    color: var(--side-svag);
}
/* Leverancer gennem tiden: stablede søjler på en lineær tidsakse */
.side-leverancer {
    padding: 18px 18px 14px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-leverancer-diagram {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 200px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--side-linje);
    background: repeating-linear-gradient(0deg, transparent 0, transparent 44px, rgba(201, 208, 214, 0.5) 44px, rgba(201, 208, 214, 0.5) 45px);
}
.side-leverancer-soejle {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.side-leverancer-stak {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}
.side-leverancer-stak span {
    flex-basis: 0;
    min-height: 2px;
}
.side-leverancer-soejle:hover .side-leverancer-stak {
    filter: brightness(1.15);
}
.side-leverancer-aar {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--side-svag);
    white-space: nowrap;
}
/* "Hvad blev der af dem?": én proportional bjælke */
.side-statusbjaelke {
    display: flex;
    height: 28px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: var(--side-skygge);
}
.side-statusbjaelke span {
    flex-basis: 0;
    min-width: 4px;
}
.side-statusbjaelke span + span {
    border-left: 2px solid #FFFFFF;
}
.side .side-forklaring-status strong {
    font-weight: 700;
}
/* Materielkort: ejerens navn, når forkortelsen er for lang til et ejendomsmærke */
.side .side-materiel-ejer-navn {
    font-weight: 600;
    color: var(--side-overskrift);
}
/* ===== PRODUCENTSIDEN (vis.materiel_firma.php) SLUT ===== */
/* ===== MATERIELTYPEN (vis.materiel_type.php) START ===== */
/* Flåden gennem tiden: antal enheder i brug pr. år som arealkurve */
.side-flaade {
    padding: 18px 18px 14px 44px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-flaade-diagram {
    position: relative;
    height: 220px;
    border-bottom: 1px solid var(--side-linje);
}
.side-flaade-diagram svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.side-flaade-gitter {
    stroke: var(--side-linje);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 3 4;
}
.side-flaade-flade {
    fill: rgba(140, 193, 82, 0.35);
}
.side-flaade-linje {
    fill: none;
    stroke: var(--side-groen-tekst);
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
/* Tal ved hjælpelinjerne - til venstre for diagrammet */
.side-flaade-y {
    position: absolute;
    left: -30px;
    width: 24px;
    transform: translateY(50%);
    font-size: 11px;
    text-align: right;
    color: var(--side-svag);
}
.side-flaade-akse {
    position: relative;
    height: 20px;
}
.side-flaade-akse span {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--side-svag);
}
.side .side-flaade-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--side-svag);
}
/* Leverancer: få år giver ellers meget brede søjler - søjlerne holdes smalle og centreres */
.side-leverancer-diagram {
    justify-content: center;
}
.side-leverancer-soejle {
    max-width: 56px;
}
/* ===== MATERIELTYPEN (vis.materiel_type.php) SLUT ===== */
/* ===== LOGIN (logon.main.login.php) START ===== */
.side-login {
    max-width: 460px;
    margin: 10px auto 40px;
}
.side-login-kort {
    padding: 32px 32px 24px;
    border: 1px solid var(--side-linje);
    border-top: 4px solid var(--side-groen);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
    box-shadow: var(--side-skygge);
}
.side-login-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 24px;
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
}
.side .side-login-titel {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    color: var(--side-overskrift);
}
.side .side-login-intro {
    margin: 6px 0 22px;
    font-size: 14px;
    text-align: center;
    color: var(--side-svag);
}
.side .side-login-fejl {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid #EBC0C0;
    border-radius: 6px;
    font-size: 14px;
    color: #A12D2D;
    background-color: #FBEDED;
}
.side-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.side-login-felt {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.side-login-felt label {
    font-size: 13px;
    font-weight: 700;
    color: var(--side-overskrift);
}
.side .side-login-felt input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 16px; /* 16px: ingen auto-zoom på iPhone */
    color: var(--side-tekst);
    background-color: #FFFFFF;
}
.side .side-login-felt input:focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
/* Password med "Vis"-knap inde i feltet */
.side-login-password {
    position: relative;
}
.side .side-login-password input {
    padding-right: 84px;
}
.side-login-vis {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    background: transparent;
    cursor: pointer;
}
.side-login-vis:hover,
.side-login-vis:focus-visible {
    background-color: var(--side-flade);
}
.side .side-login-knap {
    width: 100%;
    margin-top: 4px;
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side .side-login-knap:hover,
.side .side-login-knap:focus-visible {
    background-color: #2C5110;
}
.side .side-login-knap-sekundaer {
    width: 100%;
    margin-top: 0;
}
/* Glemt password: foldes ud under login */
.side-login-glemt {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--side-linje);
}
.side-login-glemt > summary {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--side-groen-tekst);
    cursor: pointer;
    list-style: none;
}
.side-login-glemt > summary::-webkit-details-marker {
    display: none;
}
.side-login-glemt > summary:hover {
    text-decoration: underline;
}
.side-login-glemt[open] > summary {
    margin-bottom: 14px;
}
.side .side-login-hjaelp {
    margin: 0;
    font-size: 14px;
    color: var(--side-svag);
}
/* Tryghed under kortet */
.side .side-login-tryghed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 4px 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--side-svag);
}
.side-login-tryghed li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.side-login-tryghed i {
    color: var(--side-groen-tekst);
}
@media screen and (max-width: 767px) {
    .side-login-kort {
        padding: 24px 18px 18px;
    }
}
/* ===== LOGIN (logon.main.login.php) SLUT ===== */
/* ===== DOKUMENTATION (vis.dokumentation.php) START ===== */
/* Valg af sektion og element - to felter side om side */
.side-dok-valg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px;
    margin: 6px 0 10px;
    padding: 18px 20px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-dok-felt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.side-dok-felt label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
.side .side-dok-felt select {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 15px;
    color: var(--side-tekst);
    background-color: #FFFFFF;
}
.side .side-dok-felt select:focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
/* Dokumenterne som kort: forhåndsvisning/filikon til venstre, tekst og knapper til højre */
.side-dok-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 14px;
}
.side-dok {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-dok-forside {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    overflow: hidden;
    border-radius: 6px;
    font-size: 44px;
    color: var(--side-groen-tekst);
    background-color: var(--side-flade);
}
.side-dok-forside img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-dok-forside[aria-disabled='true'] {
    pointer-events: none;
    color: var(--side-linje);
}
.side-dok-type {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.6);
}
.side-dok-tekst {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.side .side-dok-titel {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--side-overskrift);
}
.side .side-dok-meta {
    margin: 0;
    font-size: 12px;
    color: var(--side-svag);
    overflow-wrap: anywhere;
}
.side .side-dok-mangler {
    margin: 0;
    font-size: 12px;
    color: #A12D2D;
}
.side-dok-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
.side .side-dok-knapper .side-knap-lille-rund {
    margin-top: 6px;
    padding: 6px 14px;
    font-size: 13px;
}
@media screen and (max-width: 767px) {
    .side-dok-valg {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
    }
    .side-dok {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    .side-dok-forside {
        height: 88px;
        font-size: 32px;
    }
}
/* Dokumentationen i adminafsnittet på indholdssiderne: overskrift med antal og link */
.side .side-dok-overskrift {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 20px 0 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-dok-overskrift > i {
    color: var(--side-groen-tekst);
}
.side-dok-overskrift .side-sektion-link {
    margin-left: auto;
    font-size: 14px;
}
/* ===== DOKUMENTATION (vis.dokumentation.php) SLUT ===== */
/* ===== INDSÆT DOKUMENTATION (indsaet.dokumentation.php) START ===== */
/* Trin med nummer i overskriften */
.side-trin-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    vertical-align: 3px;
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
}
/* Beskeder (kvittering efter upload) */
.side .side-besked {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
}
.side .side-besked-ok {
    border: 1px solid #BFDDA3;
    color: var(--side-groen-tekst);
    background-color: #EEF7E5;
}
.side .side-besked-fejl {
    border: 1px solid #EBC0C0;
    color: #A12D2D;
    background-color: #FBEDED;
}
/* Søgefelt over en lang liste */
.side .side-dok-felt .side-dok-filter,
.side .side-dok-felt input[type=text],
.side .side-dok-felt input[type=url] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 15px;
    color: var(--side-tekst);
    background-color: #FFFFFF;
}
.side .side-dok-felt input:focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
.side .side-dok-felt small {
    font-size: 12px;
    color: var(--side-svag);
}
/* Upload: feltet til træk og slip */
.side-upload {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-upload-felt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 20px;
    border: 2px dashed var(--side-linje);
    border-radius: var(--side-radius);
    text-align: center;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
/* Det rigtige filvalg ligger usynligt over hele feltet (klik og tastatur virker) */
.side-upload-felt input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.side-upload-felt:hover,
.side-upload-felt:focus-within {
    border-color: var(--side-groen);
}
.side-upload-felt.side-upload-over {
    border-color: var(--side-groen-tekst);
    background-color: #EEF7E5;
}
.side-upload-felt > i {
    font-size: 40px;
    color: var(--side-groen-tekst);
}
.side-upload-titel {
    font-size: 18px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-upload-tekst {
    font-size: 14px;
    color: var(--side-svag);
}
.side-upload-vaelg {
    font-weight: 600;
    color: var(--side-groen-tekst);
    text-decoration: underline;
}
.side-upload-graense {
    margin-top: 4px;
    font-size: 12px;
    color: var(--side-svag);
}
.side-upload-har-filer {
    padding: 20px;
}
.side-upload-sender {
    opacity: 0.6;
    pointer-events: none;
}
/* De valgte filer */
.side .side-upload-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.side-upload-liste:empty {
    display: none;
}
.side-upload-fil {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 14px;
    background-color: #FFFFFF;
}
.side-upload-fil > i {
    font-size: 20px;
    color: var(--side-groen-tekst);
}
.side-upload-fil-navn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--side-overskrift);
}
.side-upload-fil-info {
    font-size: 12px;
    color: var(--side-svag);
    white-space: nowrap;
}
.side-upload-fil-fejl {
    border-color: #EBC0C0;
    background-color: #FBEDED;
}
.side-upload-fil-fejl > i,
.side-upload-fil-fejl .side-upload-fil-info {
    color: #A12D2D;
}
.side-upload-fjern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    color: var(--side-svag);
    background: transparent;
    cursor: pointer;
}
.side-upload-fjern:hover,
.side-upload-fjern:focus-visible {
    color: #A12D2D;
    background-color: #FBEDED;
}
.side .side-upload-fejl {
    margin: 0;
    font-size: 14px;
    color: #A12D2D;
}
.side-upload-felter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.side .side-upload-knap {
    align-self: flex-start;
    margin-top: 0;
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side .side-upload-knap:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
@media screen and (max-width: 767px) {
    .side-upload {
        padding: 14px;
    }
    .side-upload-felter {
        grid-template-columns: minmax(0, 1fr);
    }
    .side .side-upload-knap {
        align-self: stretch;
    }
}
/* ===== INDSÆT DOKUMENTATION (indsaet.dokumentation.php) SLUT ===== */
/* ===== REDAKTØRFORMULARER (indsaet.*.php, opdater.*.php) START ===== */
/* Formularen som et kort */
.side-formular {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 10px;
    padding: 20px 22px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
/* Felter i to kolonner - side-felt-bred fylder hele bredden */
.side-felt-gitter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}
.side-felt-bred {
    grid-column: 1 / -1;
}
.side-felt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.side-felt > label,
.side-felt > legend,
.side-felt-etiket {
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
.side .side-felt input[type=text],
.side .side-felt input[type=url],
.side .side-felt input[type=search],
.side .side-felt input[type=number],
.side .side-felt input[type=password],
.side .side-felt input[type=email],
.side .side-felt select,
.side .side-relation-tilfoej input[type=search],
.side .side-relation-tilfoej select {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 15px;
    color: var(--side-tekst);
    background-color: #FFFFFF;
}
.side .side-felt input:focus,
.side .side-felt select:focus,
.side .side-relation-tilfoej input:focus,
.side .side-relation-tilfoej select:focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
.side .side-felt small {
    font-size: 12px;
    color: var(--side-svag);
}
/* Søgefelt over en lang liste (lige over listen) */
.side .side-liste-filter {
    margin-bottom: -2px;
}
/* Ja/nej som to knapper side om side */
.side-ja-nej-valg {
    display: inline-flex;
    align-self: flex-start;
    overflow: hidden;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    background-color: #FFFFFF;
}
.side-ja-nej-valg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.side-ja-nej-valg label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-svag);
    cursor: pointer;
}
.side-ja-nej-valg input:checked + label {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
}
.side-ja-nej-valg input:focus-visible + label {
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.5) inset;
}
/* Editoren (CKEditor) */
.side-felt-editor .ck-editor__editable {
    min-height: 260px;
}
/* Grupper af felter (fx søgemaskiner) */
.side-felt-gruppe {
    margin: 0;
    padding: 16px 18px;
    border: 1px dashed var(--side-linje);
    border-radius: var(--side-radius);
}
.side-felt-gruppe > legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--side-overskrift);
}
.side .side-taeller-ok {
    color: var(--side-groen-tekst);
}
.side .side-taeller-fejl {
    color: #A12D2D;
}
/* Knapper under formularen */
.side-formular-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.side .side-formular-knapper .side-knap {
    margin-top: 0;
}
.side .side-knap-primaer {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side .side-knap-primaer:hover,
.side .side-knap-primaer:focus-visible {
    background-color: #2C5110;
}
/* Vælg det, der skal rettes */
.side-vaelg {
    margin-bottom: 24px;
}
/* Upload inde i en større formular: uden eget kort */
.side-formular .side-upload {
    padding: 0;
    border: 0;
    background: none;
    gap: 10px;
}
.side-upload-lille {
    padding: 16px 14px;
}
.side-upload-lille > i {
    font-size: 22px;
}
.side-upload-lille .side-upload-titel {
    font-size: 15px;
}
.side-upload-fil-billede {
    width: 40px;
    height: 54px;
    object-fit: cover;
    border-radius: 3px;
}
/* Bog: forsiden til venstre, felterne til højre */
.side-bog-formular {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px 24px;
    align-items: start;
}
.side-bog-formular > .side-felt-editor,
.side-bog-formular > .side-formular-knapper,
.side-bog-formular > input[type=hidden] {
    grid-column: 1 / -1;
}
.side-bog-forside-felt {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.side-bog-forside-felt .side-upload-felt:not(.side-upload-lille) {
    min-height: 260px;
    justify-content: center;
}
.side-bog-forside-nu {
    width: 100%;
    border-radius: 4px;
    box-shadow: var(--side-skygge);
}
/* Hvad bogen omhandler: et kort pr. relationstype */
.side .side-admin-overskrift {
    margin: 34px 0 14px;
    font-size: 24px;
    font-weight: 500;
    color: var(--side-overskrift);
}
.side-relationer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}
.side-relation {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
    scroll-margin-top: 90px;
}
.side .side-relation h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side-relation:target {
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.35);
}
.side-relation-tilfoej {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.side .side-relation-tilfoej .side-knap {
    align-self: flex-start;
    margin-top: 2px;
}
.side-afkryds {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--side-tekst);
}
.side .side-relation-liste {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--side-linje);
}
.side-relation-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--side-linje);
    font-size: 14px;
}
.side-relation-liste form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.side-relation-liste .side-afkryds {
    font-size: 12px;
    color: var(--side-svag);
}
.side-relation-fjern {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #EBC0C0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #A12D2D;
    background-color: #FFFFFF;
    cursor: pointer;
}
.side-relation-fjern:hover,
.side-relation-fjern:focus-visible {
    background-color: #FBEDED;
}
.side .side-relation-tom {
    margin: 0;
    font-size: 13px;
    color: var(--side-svag);
}
/* Artikel: billeder og videoer med billedkoden */
.side-medie-koder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 14px;
}
.side-medie-kode {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-medie-kode-billede {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    overflow: hidden;
    border-radius: 6px;
    font-size: 30px;
    color: var(--side-groen-tekst);
    background-color: var(--side-flade);
}
.side-medie-kode-billede img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-medie-kode-tekst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.side .side-medie-kode-titel {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-overskrift);
    overflow-wrap: anywhere;
}
.side-medie-kode code {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--side-overskrift);
    background-color: #FFFFFF;
    border: 1px solid var(--side-linje);
}
.side-medie-kode-knapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.side .side-medie-kode-knapper .side-knap-lille-rund {
    margin-top: 0;
    padding: 5px 12px;
    font-size: 13px;
}
.side-medie-kode-brugt {
    font-size: 12px;
    color: var(--side-groen-tekst);
}
.side-medie-kode-ubrugt {
    font-size: 12px;
    color: var(--side-svag);
}
@media screen and (max-width: 767px) {
    .side-formular {
        padding: 14px;
    }
    .side-felt-gitter,
    .side-bog-formular {
        grid-template-columns: minmax(0, 1fr);
    }
    .side-medie-kode {
        grid-template-columns: 88px minmax(0, 1fr);
    }
}
/* Almindeligt tekstområde (fx lovteksten) - CKEditor bruges ikke her */
.side .side-felt textarea:not(#editor) {
    width: 100%;
    min-height: 240px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    color: var(--side-tekst);
    background-color: #FFFFFF;
    resize: vertical;
}
.side .side-felt textarea:not(#editor):focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
/* ===== REDAKTØRFORMULARER (indsaet.*.php, opdater.*.php) SLUT ===== */
/* ===== JERNBANELOVE (vis.jernbanelove.oversigt.php) START ===== */
/* Tidslinjen: hver lov som et kort ved siden af linjen */
.side .side-lov-tidslinje .side-tidslinje-punkt {
    padding-bottom: 16px;
}
.side .side-lov-tidslinje .side-tidslinje-punkt::after {
    top: 18px;
}
.side .side-lov-tidslinje .side-tidslinje-punkt::before {
    top: 20px;
}
.side .side-lov-tidslinje .side-tidslinje-punkt > * {
    max-width: 920px;
}
.side-lov {
    position: relative;
}
.side-lov > .side-tidslinje-hoved,
.side-lov > .side-lov-navn,
.side-lov > .side-lov-uddrag,
.side-lov > .side-lov-baner {
    margin-left: 0;
}
.side .side-lov .side-tidslinje-hoved {
    padding-top: 12px;
}
.side .side-lov-navn {
    margin: 2px 0 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}
.side .side-lov-navn a {
    color: var(--side-groen-tekst);
}
.side .side-lov-uddrag {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--side-tekst);
}
/* Jernbanerne loven omfattede: små links */
.side .side-lov-baner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.side-lov-baner a,
.side-lov-flere {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-size: 12px;
    color: var(--side-groen-tekst);
    background-color: #FFFFFF;
}
.side-lov-baner a:hover,
.side-lov-baner a:focus-visible {
    border-color: var(--side-groen);
    background-color: #EEF7E5;
}
.side-lov-flere {
    font-weight: 700;
    cursor: pointer;
}
.side-lov-flere:hover,
.side-lov-flere:focus-visible {
    border-color: var(--side-groen);
}
/* Antal jernbaner i årtiet ved overskriften */
.side-lov-aarti-baner {
    margin-left: 6px;
    font-size: 13px;
    color: var(--side-svag);
}
/* ===== JERNBANELOVE (vis.jernbanelove.oversigt.php) SLUT ===== */
/* ===== JERNBANELOVEN (vis.jernbanelov.php) START ===== */
/* Lovens overskrift som indledning over baggrundsteksten */
.side .side-lov-overskrift {
    margin: 0 0 1em;
    padding-left: 14px;
    border-left: 3px solid var(--side-groen);
    font-size: 18px;
    font-style: italic;
    color: var(--side-overskrift);
}
.side .side-lov-tekst-sektion {
    margin-top: 32px;
}
/* Lovteksten kan foldes ud og sammen */
.side .side-lov-tekst > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 16px;
    border: 1px solid var(--side-groen);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    background-color: #FFFFFF;
    cursor: pointer;
    list-style: none;
}
.side .side-lov-tekst > summary::-webkit-details-marker {
    display: none;
}
.side .side-lov-tekst > summary:hover,
.side .side-lov-tekst > summary:focus-visible {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
    border-color: var(--side-groen-tekst);
}
.side .side-lov-tekst .side-lov-skjul,
.side .side-lov-tekst[open] .side-lov-vis {
    display: none;
}
.side .side-lov-tekst[open] .side-lov-skjul {
    display: inline;
}
/* Selve lovteksten som et dokument: hvid side med ramme og en klassisk skrift */
.side .side-lov-dokument {
    padding: 28px 32px;
    background-color: #FFFFFF;
    border: 1px solid var(--side-linje);
    border-left: 4px solid var(--side-groen);
    border-radius: 0 var(--side-radius) var(--side-radius) 0;
    box-shadow: var(--side-skygge);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--side-tekst);
    overflow-wrap: break-word;
}
.side .side-lov-dokument h2,
.side .side-lov-dokument h3,
.side .side-lov-dokument h4 {
    margin: 0 0 0.8em;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--side-overskrift);
}
.side .side-lov-dokument p {
    margin: 0 0 0.9em;
}
.side .side-lov-dokument > :last-child {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .side .side-lov-dokument {
        padding: 18px 16px;
        font-size: 15px;
    }
}
/* ===== JERNBANELOVEN (vis.jernbanelov.php) SLUT ===== */
/* ===== MATERIELFORMULARER (indsaet/opdater.materiel*.php) START ===== */
/* Felter i tre kolonner (fx materieltypens tekniske data) */
.side-felt-gitter-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Journalen og ejerskaberne: én formular pr. post */
.side-journal-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.side .side-journal-post {
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    scroll-margin-top: 90px;
}
.side .side-journal-ny {
    border: 1px dashed var(--side-groen);
    background-color: var(--side-flade);
}
.side-journal-felter {
    display: grid;
    grid-template-columns: 130px 130px minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 10px 12px;
}
.side-journal-felter-journal {
    grid-template-columns: 130px 130px 110px minmax(0, 1fr);
}
.side .side-journal-post .side-felt textarea:not(#editor) {
    min-height: 70px;
}
.side .side-journal-post .side-formular-knapper .side-knap {
    padding: 6px 14px;
    font-size: 13px;
}
.side .side-knap-fare {
    color: #A12D2D;
    border-color: #EBC0C0;
    background-color: #FFFFFF;
}
.side .side-knap-fare:hover,
.side .side-knap-fare:focus-visible {
    background-color: #FBEDED;
}
@media screen and (max-width: 1023px) {
    .side-felt-gitter-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .side-journal-felter,
    .side-journal-felter-journal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 767px) {
    .side-felt-gitter-3,
    .side-journal-felter,
    .side-journal-felter-journal {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ===== MATERIELFORMULARER SLUT ===== */
/* ===== BANEMÆRKER OG DRIFTSREGNSKAB (redaktørsider) START ===== */
/* Felter i fire kolonner (fx katalognummeret) */
.side-felt-gitter-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Banemærkebilleder som små kort */
.side .side-bm-billeder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.side-bm-billeder a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    font-size: 12px;
    color: var(--side-svag);
    background-color: #FFFFFF;
    text-decoration: none;
}
.side-bm-billeder a:hover,
.side-bm-billeder a:focus-visible {
    border-color: var(--side-groen);
}
.side-bm-billeder img {
    width: 100%;
    height: 110px;
    object-fit: contain;
}
.side .side-bm-aktuel a,
.side .side-relation-liste .side-bm-ny {
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.35);
}
.side .side-relation-liste .side-bm-ny {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
}
/* Ret banemærkebillede: billedet til venstre, formularen til højre */
.side-bmb {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.side .side-bmb-billede {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: var(--side-kort);
}
.side-bmb-billede img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    background-color: #FFFFFF;
}
.side-bmb-billede figcaption {
    font-size: 12px;
    color: var(--side-svag);
    text-align: center;
}
.side-bmb-blad {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.side .side-bmb-blad .side-knap-lille-rund {
    margin-top: 0;
}
/* Driftsregnskab: tabellen med felter */
.side .side-drift-ramme {
    max-height: none;
}
.side .side-drift-tabel th,
.side .side-drift-tabel td {
    padding: 6px 4px;
    vertical-align: middle;
}
.side .side-drift-tabel thead th {
    padding: 10px 6px;
    text-align: right;
}
.side .side-drift-tabel thead th:first-child {
    text-align: left;
}
.side .side-drift-tabel input {
    width: 100%;
    min-width: 76px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--side-tekst);
    background-color: transparent;
}
.side .side-drift-tabel th input {
    min-width: 104px;
    font-weight: 600;
    text-align: left;
}
.side .side-drift-tabel input:hover {
    border-color: var(--side-linje);
}
.side .side-drift-tabel input:focus {
    outline: none;
    border-color: var(--side-groen);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
.side .side-drift-tabel .side-drift-minus {
    color: #A12D2D;
}
.side .side-drift-tabel tr:target {
    background-color: #EEF6E5;
}
.side .side-drift-tabel .side-drift-ny {
    background-color: var(--side-flade);
}
.side .side-drift-tabel .side-drift-ny input {
    border-color: var(--side-linje);
    background-color: #FFFFFF;
}
.side-drift-knapper form {
    display: flex;
    gap: 6px;
    margin: 0;
}
.side .side-drift-knapper .side-knap {
    margin: 0;
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
}
@media screen and (max-width: 1023px) {
    .side-felt-gitter-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .side-bmb {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media screen and (max-width: 767px) {
    .side-felt-gitter-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ===== BANEMÆRKER OG DRIFTSREGNSKAB SLUT ===== */
/* ===== VÆRKTØJER OG FORLØB (redaktørsider) START ===== */
/* Lille statusmærke: ok, advarsel, fejl, ukendt */
.side .side-vaerktoej-maerke {
    display: inline-block;
    margin: 1px 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.side .side-vaerktoej-ok {
    color: #2C5110;
    background-color: #E3F0D6;
}
.side .side-vaerktoej-advarsel {
    color: #7A4E0E;
    background-color: #FBEBC8;
}
.side .side-vaerktoej-fejl {
    color: #A12D2D;
    background-color: #FBE3E3;
}
.side .side-vaerktoej-ukendt {
    color: var(--side-svag);
    background-color: var(--side-flade);
}
/* En handling over en liste (fx "Hent kort for de næste 10") */
.side .side-vaerktoej-handling {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 16px 0;
    padding: 14px 18px;
}
.side .side-vaerktoej-handling label {
    font-weight: 600;
    color: var(--side-overskrift);
}
.side .side-vaerktoej-handling select,
.side .side-vaerktoej-handling input[type=search] {
    padding: 8px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 15px;
    background-color: #FFFFFF;
}
.side .side-vaerktoej-handling input[type=search] {
    flex: 1 1 240px;
    min-width: 0;
}
.side .side-vaerktoej-handling .side-knap {
    margin-top: 0;
}
.side .side-vaerktoej-handling small {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--side-svag);
}
/* Tabeller med felter (Rejseplanen, Banebasen) */
.side .side-vaerktoej-ramme {
    max-height: none;
}
.side .side-vaerktoej-tabel th,
.side .side-vaerktoej-tabel td {
    vertical-align: middle;
    white-space: normal;
}
.side .side-vaerktoej-tabel tbody th small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--side-svag);
}
.side-vaerktoej-valg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 320px;
}
.side .side-vaerktoej-valg input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 14px;
    background-color: #FFFFFF;
}
.side .side-vaerktoej-valg input[type=text]:focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
.side .side-vaerktoej-valg .side-knap {
    margin-top: 0;
}
.side .side-vaerktoej-tabel tr:target,
.side .side-tabel .side-vaerktoej-aktuel {
    background-color: #EEF6E5;
}
.side .side-vaerktoej-tabel .side-vaerktoej-forslag {
    background-color: #FFF9EC;
}
/* Faner over en liste (Alle / Uden station) */
.side-vaerktoej-faner {
    display: inline-flex;
    margin: 16px 0 4px;
    overflow: hidden;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    background-color: #FFFFFF;
}
.side-vaerktoej-faner a {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--side-svag);
    text-decoration: none;
}
.side-vaerktoej-faner a[aria-current=page] {
    color: #FFFFFF;
    background-color: var(--side-groen-tekst);
}
/* Sideskift under en tabel */
.side-sideskift {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 14px;
    color: var(--side-svag);
}
.side .side-sideskift .side-knap {
    margin-top: 0;
}
/* Link under en feltgruppe (fx "Vis koordinaterne på et kort") */
.side .side-felt-link {
    margin: 10px 0 0;
    font-size: 13px;
}
.side .side-felt-link a {
    color: var(--side-groen-tekst);
}
/* Slet forløb: kort og data, advarslen og bekræftelsen */
.side-slet {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 16px;
}
.side-slet-kort {
    width: 100%;
    border-radius: var(--side-radius);
    border: 1px solid var(--side-linje);
}
.side .side-slet-data {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
}
.side .side-slet-data dt {
    font-weight: 700;
    color: var(--side-groen-tekst);
}
.side .side-slet-data dd {
    margin: 0;
}
.side .side-besked .side-slet-liste {
    margin: 6px 0;
    padding-left: 20px;
}
.side .side-besked p {
    margin: 0;
}
.side .side-slet-formular {
    margin-top: 16px;
    border-color: #EBC0C0;
}
@media screen and (max-width: 767px) {
    .side-slet {
        grid-template-columns: minmax(0, 1fr);
    }
    .side-vaerktoej-valg {
        min-width: 240px;
    }
}
/* En formular med kun en knap i en tabelcelle */
.side-vaerktoej-valg.side-vaerktoej-knap {
    min-width: 0;
    justify-content: flex-end;
}
/* En besked med flere afsnit og en liste */
.side .side-besked-blok {
    display: block;
}
/* Et felt over to kolonner i et gitter */
.side-felt-dobbelt {
    grid-column: span 2;
}
@media screen and (max-width: 767px) {
    .side-felt-dobbelt {
        grid-column: auto;
    }
}
/* ===== VÆRKTØJER OG FORLØB SLUT ===== */
/* ===== BANEBASEN: STATIONERNE MOD BANEBASEN START ===== */
.side .side-vaerktoej-valg select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    padding: 7px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 14px;
    background-color: #FFFFFF;
}
.side .side-vaerktoej-valg select:focus {
    outline: none;
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.3);
}
/* Det nuværende match: stedet, afstanden og Banebasens oplysninger */
.side .side-bb-nu + .side-bb-nu {
    margin-top: 6px;
}
.side .side-bb-nu small,
.side .side-bb-forslag {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--side-svag);
}
.side .side-bb-forslag {
    margin-top: 4px;
    color: #7A4E0E;
}
/* Liste, der kan foldes ud (fx navnematchene) */
.side .side-vaerktoej-detaljer {
    flex-basis: 100%;
    font-size: 13px;
}
.side .side-vaerktoej-detaljer summary {
    cursor: pointer;
    color: var(--side-groen-tekst);
    font-weight: 600;
}
.side .side-vaerktoej-detaljer ul {
    max-height: 260px;
    margin: 8px 0 0;
    padding-left: 20px;
    overflow: auto;
}
/* Afkrydsning pr. række og "Match markerede" */
.side .side-vaerktoej-tabel .side-bb-marker {
    width: 36px;
    padding-right: 0;
    text-align: center;
}
.side .side-bb-marker input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--side-groen-tekst);
}
.side-bb-samlet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 12px 0;
}
.side .side-bb-samlet .side-knap {
    margin-top: 0;
}
.side .side-bb-samlet .side-knap:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.side .side-bb-samlet small {
    font-size: 12px;
    color: var(--side-svag);
}
/* ===== BANEBASEN SLUT ===== */
/* ===== RÆKKE-TABELLER (Ret bane: banestykker, operatører, stationer) START ===== */
.side .side-raekke-tabel input,
.side .side-raekke-tabel th input {
    min-width: 110px;
    font-weight: 400;
    text-align: left;
}
.side .side-raekke-tabel thead th,
.side .side-raekke-tabel thead th:first-child {
    text-align: left;
}
.side .side-raekke-tabel select {
    width: 100%;
    min-width: 220px;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--side-linje);
    border-radius: 4px;
    font-size: 14px;
    background-color: #FFFFFF;
}
.side .side-raekke-tabel td {
    white-space: nowrap;
}
.side .side-raekke-tabel td:has(select),
.side .side-raekke-tabel .side-raekke-bred {
    width: 100%;
}
.side .side-raekke-tabel .side-raekke-bred input {
    width: calc(100% - 28px);
}
.side .side-raekke-tabel td > a {
    margin-left: 6px;
    color: var(--side-groen-tekst);
}
.side .side-raekke-tabel td > select + a {
    display: inline-block;
}
.side .side-raekke-tabel td:has(select + a) select {
    width: calc(100% - 28px);
}
.side .side-raekke-tabel small {
    font-size: 12px;
    color: var(--side-svag);
}
/* ===== RÆKKE-TABELLER SLUT ===== */
/* ===== SMAL SIDE (skift password, slet min bruger) START ===== */
.side.side-smal {
    max-width: 720px;
}
.side .side-smal-link {
    margin-top: 6px;
}
.side .side-smal-link a {
    color: #A12D2D;
}
.side .side-besked .side-slet-liste {
    list-style: disc;
}
.side .side-besked .side-slet-liste li {
    margin: 2px 0;
}
/* ===== SMAL SIDE SLUT ===== */
/* ===== STATISTIK MED GRAFER (statistik_grafer.php) START ===== */
.side-graf {
    position: relative;
    height: 340px;
    padding: 16px 18px 10px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: #FFFFFF;
}
.side .side-graf-tekst {
    margin: -4px 0 10px;
    font-size: 13px;
    color: var(--side-svag);
}
.side .side-stat-tabel tbody th {
    min-width: 260px;
    font-weight: 500;
}
.side .side-stat-tabel td,
.side .side-stat-tabel th {
    vertical-align: middle;
}
.side-stat-bjaelke {
    display: block;
    height: 4px;
    margin-top: 4px;
    border-radius: 2px;
    background-color: var(--side-groen);
}
@media screen and (max-width: 767px) {
    .side-graf {
        height: 260px;
        padding: 10px 8px 6px;
    }
}
/* ===== STATISTIK MED GRAFER SLUT ===== */
/* ===== ADMIN (statistik.php og værktøjerne) START ===== */
/* Datakvalitet: et kort pr. område, en linje pr. mål */
.side-kvalitet-gitter {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.side-kvalitet-kolonne {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.side-kvalitet {
    padding: 18px 22px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: #FFFFFF;
}
.side .side-kvalitet h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side .side-kvalitet h3 i {
    color: var(--side-groen-tekst);
}
.side .side-kvalitet h3 span {
    margin-left: auto;
    font-size: 15px;
    font-weight: 400;
    color: var(--side-svag);
}
.side .side-kvalitet ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.side-kvalitet li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 100px;
    grid-template-areas: "etiket tal maal" "bjaelke bjaelke bjaelke";
    gap: 5px 14px;
    align-items: baseline;
    padding: 10px 0 10px 14px;
    border-bottom: 1px solid var(--side-linje);
    border-left: 5px solid transparent;
    font-size: 17px;
}
.side-kvalitet li:last-child {
    border-bottom: 0;
}
.side-kvalitet-etiket {
    grid-area: etiket;
}
.side-kvalitet-tal {
    grid-area: tal;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.side-kvalitet-maal {
    grid-area: maal;
    font-size: 15px;
    text-align: right;
    color: var(--side-svag);
}
.side-kvalitet-bjaelke {
    grid-area: bjaelke;
    display: block;
    height: 6px;
    border-radius: 3px;
    background-color: var(--side-flade);
}
.side-kvalitet-bjaelke span {
    display: block;
    height: 100%;
    border-radius: 3px;
}
.side .side-kvalitet-forklaring {
    font-size: 16px;
}
.side-kvalitet-ok { border-left-color: #6FA83A;
}
.side-kvalitet-ok .side-kvalitet-bjaelke span { background-color: #6FA83A;
}
.side-kvalitet-advarsel { border-left-color: #D9A23C;
}
.side-kvalitet-advarsel .side-kvalitet-bjaelke span { background-color: #D9A23C;
}
.side-kvalitet-fejl { border-left-color: #C24747;
}
.side-kvalitet-fejl .side-kvalitet-tal { color: #A12D2D;
}
.side-kvalitet-fejl .side-kvalitet-bjaelke span { background-color: #C24747;
}
/* Værktøjer: links som kort */
.side .side-admin-gruppe {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-groen-tekst);
}
.side .side-admin-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.side-admin-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    color: var(--side-tekst);
    background-color: #FFFFFF;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.side-admin-links a:hover,
.side-admin-links a:focus-visible {
    border-color: var(--side-groen);
    box-shadow: 0 2px 8px rgba(58, 104, 22, 0.12);
}
.side-admin-links i {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 8px;
    line-height: 34px;
    text-align: center;
    color: var(--side-groen-tekst);
    background-color: #EEF6E5;
}
.side-admin-links strong {
    display: block;
    font-size: 15px;
    color: var(--side-overskrift);
}
.side-admin-links small {
    display: block;
    font-size: 12px;
    color: var(--side-svag);
}
/* Opdater cache: fremdrift og sektioner */
.side-cache-fremdrift {
    height: 10px;
    margin: 6px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--side-flade);
}
.side-cache-fremdrift span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--side-groen);
    transition: width 0.3s;
}
.side-cache-sektioner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px 14px;
}
.side .side-cache-output {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: pre-wrap;
    background-color: rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 1023px) {
    .side-kvalitet-gitter {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ===== ADMIN SLUT ===== */
/* ===== BRUGERE START ===== */
.side .side-smal-indhold {
    max-width: 860px;
}
/* Rollen som valgkort */
.side .side-rolle-kort {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.side .side-rolle-valg label {
    position: relative;
    display: block;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.side .side-rolle-valg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.side .side-rolle-valg label span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
    height: 100%;
    padding: 12px 14px;
    line-height: 1.4;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    font-size: 13px;
    color: var(--side-svag);
    background-color: #FFFFFF;
}
.side .side-rolle-valg label strong {
    font-size: 15px;
    color: var(--side-overskrift);
}
.side .side-rolle-valg input:checked + span {
    border-color: var(--side-groen-tekst);
    box-shadow: 0 0 0 1px var(--side-groen-tekst) inset;
    background-color: #F3F9EC;
}
.side .side-rolle-valg input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.5);
}
/* Adgang: send link, deaktiver, genaktiver */
.side .side-bruger-adgang {
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: #FFFFFF;
}
.side .side-bruger-handling {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px 20px;
}
.side .side-bruger-handling + .side-bruger-handling {
    border-top: 1px solid var(--side-linje);
}
.side .side-bruger-handling div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: var(--side-svag);
}
.side .side-bruger-handling strong {
    font-size: 15px;
    color: var(--side-overskrift);
}
.side .side-bruger-handling .side-knap {
    flex-shrink: 0;
}
/* Oversigten: faner, søgefelt og opret */
.side .side-bruger-vaerktoej {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 24px 0 12px;
}
.side .side-bruger-vaerktoej .side-vaerktoej-faner {
    margin: 0;
}
.side .side-bruger-soeg {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
    padding: 8px 12px;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-size: 14px;
}
.side .side-bruger-vaerktoej .side-knap-primaer {
    margin-left: auto;
}
@media (max-width: 700px) {
    .side .side-rolle-kort {
        grid-template-columns: minmax(0, 1fr);
    }
    .side .side-bruger-handling {
        flex-direction: column;
        align-items: stretch;
    }
    .side .side-bruger-vaerktoej .side-knap-primaer {
        margin-left: 0;
    }
}
/* ===== BRUGERE SLUT ===== */
/* ===== REDIGER MEDIE START ===== */
/* Redaktørknapperne under et billede (print_medie_admin_knapper) - bruges også uden for .side */
.medie-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}
.medie-admin-form {
    display: inline-flex;
    margin: 0;
}
.medie-admin .medie-admin-knap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 11px;
    border: 1px solid var(--dkj-linje, #C9D0D6);
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    color: var(--dkj-groen-tekst, #3A6816);
    background-color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.medie-admin .medie-admin-knap i {
    font-size: 11px;
}
.medie-admin .medie-admin-knap:hover,
.medie-admin .medie-admin-knap:focus-visible {
    border-color: var(--dkj-groen, #8CC152);
    background-color: #EEF6E5;
}
.medie-admin .medie-admin-valgt {
    border-color: var(--dkj-groen, #8CC152);
    background-color: #EEF6E5;
}
.medie-admin .medie-admin-fare {
    color: #A12D2D;
    border-color: #EBC0C0;
}
.medie-admin .medie-admin-fare:hover,
.medie-admin .medie-admin-fare:focus-visible {
    border-color: #C24747;
    background-color: #FBEDED;
}
/* ===== REDIGER MEDIE SLUT ===== */
/* ===== BILLEDSAMLING OG RET MEDIE START ===== */
.side .side-samling-vaerktoej {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 24px 0 16px;
}
.side .side-samling-vaerktoej .side-knap,
.side .side-samling-vaerktoej .side-vaerktoej-faner {
    margin: 0;
}
.side .side-samling-vaerktoej .side-knap {
    padding: 8px 16px;
    font-size: 14px;
}
.side .side-samling {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 18px;
}
.side .side-samling-kort {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0 0 12px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    overflow: hidden;
    background-color: #FFFFFF;
    scroll-margin-top: 120px;
}
.side .side-samling-kort:target {
    border-color: var(--side-groen);
    box-shadow: 0 0 0 3px rgba(140, 193, 82, 0.35);
}
.side .side-samling-billede {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--side-flade);
}
.side .side-samling-billede img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side .side-samling-ikon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--side-svag);
}
.side .side-samling-ikon i {
    font-size: 34px;
    opacity: 0.6;
}
.side .side-samling-kort figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 14px;
}
.side .side-samling-maerker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.side .side-samling-id {
    margin-left: auto;
    font-size: 12px;
    color: var(--side-svag);
}
.side .side-samling-titel {
    font-size: 15px;
    line-height: 1.35;
    color: var(--side-overskrift);
    overflow-wrap: anywhere;
}
.side .side-samling-kredit {
    font-size: 12px;
    color: var(--side-svag);
}
.side .side-samling-kort .medie-admin,
.side .side-samling-kort .side-rediger {
    margin: 0;
    padding: 0 14px;
}
.side .side-samling-kort .medie-admin {
    margin-top: auto;
}
/* Flyt eller kopiér til en anden station */
.side .side-medie-flyt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 640px;
    margin: 8px 0 0;
}
.side .side-medie-flyt label {
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--side-svag);
}
.side .side-medie-flyt input {
    flex: 1;
    min-width: 160px;
    padding: 6px 10px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    font-size: 13px;
}
/* Ret medie: mediet til venstre, felterne til højre */
.side .side-medie-ret {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}
.side .side-medie-forhaandsvisning {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.side .side-medie-forhaandsvisning img,
.side .side-medie-forhaandsvisning video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--side-radius);
    background-color: var(--side-flade);
}
.side .side-medie-forhaandsvisning .side-samling-ikon {
    aspect-ratio: 4 / 3;
    border-radius: var(--side-radius);
    background-color: var(--side-flade);
}
.side .side-medie-forhaandsvisning .side-formular {
    margin: 0;
}
.side .side-medie-fakta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: 13px;
}
.side .side-medie-fakta dt {
    font-weight: 600;
    color: var(--side-svag);
}
.side .side-medie-fakta dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.side .side-medie-forhaandsvisning .medie-admin {
    margin: 0;
}
@media (max-width: 900px) {
    .side .side-medie-ret {
        grid-template-columns: minmax(0, 1fr);
    }
    .side .side-medie-forhaandsvisning {
        position: static;
    }
}
/* ===== BILLEDSAMLING OG RET MEDIE SLUT ===== */
/* ===== SØG START ===== */
.side .side-soeg-side {
    margin-top: 24px;
}
.side .side-soeg-genveje {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}
.side .side-soeg-genveje a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--side-linje);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--side-groen-tekst);
    background-color: #FFFFFF;
    text-decoration: none;
}
.side .side-soeg-genveje a:hover,
.side .side-soeg-genveje a:focus-visible {
    border-color: var(--side-groen);
    background-color: #EEF6E5;
}
.side .side-soeg-genveje span {
    font-weight: 400;
    color: var(--side-svag);
}
.side .side-soeg-resultater {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    align-items: start;
}
.side .side-soeg-gruppe {
    padding: 14px 18px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: #FFFFFF;
    scroll-margin-top: 120px;
}
.side .side-soeg-gruppe h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--side-overskrift);
}
.side .side-soeg-gruppe h3 i {
    color: var(--side-groen-tekst);
}
.side .side-soeg-gruppe h3 span {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--side-svag);
}
.side .side-soeg-gruppe ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.side .side-soeg-gruppe li {
    border-top: 1px solid var(--side-linje);
}
.side .side-soeg-gruppe li a {
    display: block;
    padding: 7px 0;
    font-size: 15px;
    color: var(--side-tekst);
    text-decoration: none;
}
.side .side-soeg-gruppe li a:hover,
.side .side-soeg-gruppe li a:focus-visible {
    color: var(--side-groen-tekst);
    text-decoration: underline;
}
.side .side-soeg-gruppe mark {
    padding: 0 1px;
    border-radius: 2px;
    color: inherit;
    background-color: #E3F0D6;
}
.side .side-soeg-flere {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--side-svag);
}
/* Googles resultater: tilpas til sitet */
.side-soeg-google .gsc-control-cse {
    padding: 0;
    border: 0;
    font-family: inherit;
    background-color: transparent;
}
.side-soeg-google .gsc-webResult.gsc-result,
.side-soeg-google .gsc-results .gsc-imageResult {
    border: 0;
    border-bottom: 1px solid var(--side-linje);
    background-color: transparent;
}
.side-soeg-google .gs-title,
.side-soeg-google .gs-title b {
    color: var(--side-groen-tekst) !important;
}
/* ===== SØG SLUT ===== */
/* ===== BANEMÆRKE (VISNING) START ===== */
.side .side-banemaerke-stort {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0 0 28px;
}
.side .side-banemaerke-stort a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1px solid var(--side-linje);
    border-radius: var(--side-radius);
    background-color: #FFFFFF;
    cursor: zoom-in;
}
.side .side-banemaerke-stort img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.side .side-banemaerke-stort figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.side .side-banemaerke-flere {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
}
.side .side-banemaerke-flere .side-knap {
    margin: 0;
}
/* ===== BANEMÆRKE (VISNING) SLUT ===== */
/* ===== FAKTABOKS MED TEKST START ===== */
/* Almindelig tekst i en faktaboks (fx "Hjælp os" på Om-siden) */
.side .faktaboks-tekst {
    margin: 0;
    padding: 14px 20px 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--side-tekst);
}
/* ===== FAKTABOKS MED TEKST SLUT ===== */

/* ===== fra lys_skin.03.css ===== */
/* =====================================================================
   lys_skin.03.css
   Lyst, nedtonet udseende - erstatter dark_skin.NN.css og lys_skin.01.css.
   Indlæses EFTER sitets øvrige CSS-filer, så alle baggrunde og grønne
   tekstfarver styres samlet herfra.

   TONEN JUSTERES MED VARIABLERNE NEDENFOR:
   gør --dkj-bg-* mørkere eller lysere for hele sitet på én gang.

   Signaturfarven #8CC152 bruges uændret til flader, knapper og kanter.
   Til TEKST bruges en mørkere nuance af samme grøn, så den kan læses
   (#8CC152 på lys baggrund har kun kontrast ca. 2:1, krav: 4,5:1).
   ===================================================================== */
:root {
    /* Baggrunde - fra mørkest til lysest */
    --dkj-bg-yder: #CBD1D7;   /* yderst, uden om siden (brede skærme, under footer) */
    --dkj-bg-side: #E6E9ED;   /* sidens baggrund og menulinje */
    --dkj-bg-flade: #DCE1E6;  /* overskriftsbjælker, tabelhoveder, menu ved hover */
    --dkj-bg-kort: #F4F6F8;   /* bokse: faktaboks, fold-ud-paneler, galleri, incidents */
    --dkj-linje: #C9D0D6;     /* rammer og skillelinjer på sidens baggrund */
    --dkj-linje-svag: #DDE2E7;/* skillelinjer inde i bokse */
    --dkj-bg-ramme: #CFD5DB;  /* topbjælke (nyheder/søg) og footer - rammer siden ind */
    --dkj-bg-ramme-hover: #BEC6CD;
    --dkj-linje-ramme: #B5BDC5;

    /* Tekst */
    --dkj-tekst: #3E3E3E;             /* brødtekst */
    --dkj-overskrift: #25282A;        /* overskrifter og fremhævet tekst */
    --dkj-groen: #8CC152;             /* signaturfarve: flader, knapper, kanter */
    --dkj-groen-tekst: #3A6816;       /* grøn tekst - kontrast ca. 5:1 på alle lyse flader */
    --dkj-groen-tekst-hover: #284A0F; /* hover på grøn tekst */
    --dkj-groen-tekst-ramme: #2F5512; /* grøn tekst på topbjælke og footer (kontrast ca. 5,8:1) */
    --dkj-tekst-svag: #555C63;        /* sekundær tekst på topbjælke og footer */
}
/* ===== GRUNDLAG START ===== */
body {
    color: var(--dkj-tekst);
    background-color: var(--dkj-bg-yder);
}
.site_container {
    background-color: var(--dkj-bg-side);
}
/* ===== GRUNDLAG SLUT ===== */
/* ===== MENU START ===== */
.menu_container {
    background-color: var(--dkj-bg-side);
    border-top-color: var(--dkj-bg-flade);
    border-bottom-color: var(--dkj-linje); /* linje under hele menuen */
}
.sf-menu li,
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
    background: none var(--dkj-bg-side);
}
.sf-menu a:hover,
.sf-menu li:hover,
.sf-menu li.selected,
.sf-menu li.submenu:hover {
    background-color: var(--dkj-bg-flade);
}
.sf-menu li {
    border-top-color: var(--dkj-bg-flade);
    border-bottom-color: var(--dkj-linje);
}
.sf-menu li:hover,
.sf-menu li.selected,
.sf-menu li.submenu:hover {
    border-top-color: var(--dkj-groen);
    border-bottom-color: var(--dkj-bg-flade);
}
/* ===== MENU SLUT ===== */
/* ===== FLADER OG BOKSE START ===== */
.row-lines thead th {
    background-color: var(--dkj-bg-flade);
}
.row-lines tbody tr {
    border-bottom-color: var(--dkj-linje);
}
.borderexample {
    border-color: var(--dkj-linje);
}
.content {
    background-color: var(--dkj-bg-kort);
    border-color: var(--dkj-linje);
}
.incident-bruger {
    background-color: var(--dkj-bg-kort);
}
/* Faktaboks (artikel-faktaboks.NN.css) - den grønne toplinje bevares */
.faktaboks {
    background-color: var(--dkj-bg-kort);
    border-left-color: var(--dkj-linje);
    border-right-color: var(--dkj-linje);
    border-bottom-color: var(--dkj-linje);
}
.faktaboks-hoved {
    background-color: var(--dkj-bg-side);
    border-bottom-color: var(--dkj-linje-svag);
}
.faktaboks-raekke {
    border-bottom-color: var(--dkj-linje-svag);
}
/* ===== FLADER OG BOKSE SLUT ===== */
/* ===== GRØN TEKST START ===== */
p a,
.DKJ-category,
.DKJ-font-green,
.DKJ-font-bold-green,
.DKJ-note-green-center,
.text-underline-hover,
.faktaboks-etiket {
    color: var(--dkj-groen-tekst);
}
p a:hover,
.text-underline-hover:hover {
    color: var(--dkj-groen-tekst-hover);
}
/* ===== GRØN TEKST SLUT ===== */
/* ===== TOPBJÆLKE (SENEST NYT + SØG) START ===== */
/* Bjælken har klassen style_4 (funktioner.top.php), hvis mørke temaregler vægter
   tungere end en enkelt klasse - derfor .header_top_bar_container foran alle regler */
.header_top_bar_container.style_4,
.header_top_bar_container {
    color: var(--dkj-overskrift);
    background-color: var(--dkj-bg-ramme);
    border-bottom: 1px solid var(--dkj-linje-ramme);
}
.header_top_bar_container .latest_news_scrolling_list_container .category,
.header_top_bar_container .latest_news_scrolling_list_container .category a {
    color: var(--dkj-overskrift);
    border-color: var(--dkj-linje-ramme);
}
.header_top_bar_container .latest_news_scrolling_list_container li.left,
.header_top_bar_container .latest_news_scrolling_list_container li.right {
    border-color: var(--dkj-linje-ramme);
}
.header_top_bar_container .latest_news_scrolling_list_container li.left:hover,
.header_top_bar_container .latest_news_scrolling_list_container li.right:hover {
    background-color: var(--dkj-bg-ramme-hover);
}
/* Temaets mørke pile til lys baggrund (dark_bg/-varianterne er hvide) */
.header_top_bar_container .latest_news_scrolling_list_container .left a {
    background-image: url("../icon/navigation_latest_arrow_left.png");
}
.header_top_bar_container .latest_news_scrolling_list_container .right a {
    background-image: url("../icon/navigation_latest_arrow_right.png");
}
/* Ikonerne er mellemgrå - gøres mørkere, så de står tydeligt på den grå bjælke */
.header_top_bar_container .latest_news_scrolling_list_container .left a,
.header_top_bar_container .latest_news_scrolling_list_container .right a,
.header_top_bar_container .search .search_submit {
    filter: brightness(0.45);
}
.header_top_bar_container .latest_news_scrolling_list_container li.left:hover a,
.header_top_bar_container .latest_news_scrolling_list_container li.right:hover a {
    filter: brightness(0.2);
}
.header_top_bar_container .latest_news_scrolling_list_container li .latest_news_scrolling_list a {
    color: var(--dkj-overskrift);
}
.header_top_bar_container .latest_news_scrolling_list_container li .latest_news_scrolling_list a:hover {
    color: var(--dkj-groen-tekst-ramme);
}
.header_top_bar_container .latest_news_scrolling_list_container li .timeago {
    color: var(--dkj-tekst-svag);
}
/* Søgefelt */
.header_top_bar_container .search,
.header_top_bar_container .search .search_input {
    border-color: var(--dkj-linje-ramme);
}
.header_top_bar_container .search .search_input,
.header_top_bar_container .search .search_input.hint {
    color: var(--dkj-overskrift);
    background-color: transparent;
}
.header_top_bar_container .search .search_input::placeholder {
    color: var(--dkj-tekst-svag);
}
.header_top_bar_container .search .search_submit {
    background-image: url("../icon/header_search.png");
}
/* Ved hover bliver ikonet helt mørkt (en baggrundsfarve ville også blive mørk af filteret) */
.header_top_bar_container .search .search_submit:hover {
    background-color: transparent;
    filter: brightness(0.2);
}
/* ===== TOPBJÆLKE SLUT ===== */
/* ===== DROP-DOWN-MENUER START ===== */
/* Lyse menukort med skygge i stedet for temaets mørkegrå */
.sf-menu li.submenu ul {
    background-color: var(--dkj-bg-kort);
    border: 1px solid var(--dkj-linje);
    box-shadow: 0 8px 20px rgba(37, 40, 42, 0.15);
}
.menu_container .sf-menu li:hover ul a,
.menu_container .sf-menu li.submenu:hover ul a,
.menu_container .sf-menu li ul li a,
.menu_container .sf-menu li.submenu:hover ul li.selected ul li a,
.menu_container .sf-menu li.selected ul li a,
.menu_container .sf-menu li.submenu ul li a,
.menu_container .sf-menu li.submenu:hover ul li a,
.menu_container .sf-menu li:hover ul li a {
    color: var(--dkj-overskrift);
    background-color: var(--dkj-bg-kort);
}
.menu_container .sf-menu li ul li a:hover,
.menu_container .sf-menu li ul li.selected a,
.menu_container .sf-menu li.submenu ul li a:hover,
.menu_container .sf-menu li.submenu:hover ul li.selected a,
.menu_container .sf-menu li.submenu:hover ul li.selected ul li a:hover,
.menu_container .sf-menu li.submenu:hover ul li ul li.selected a,
.menu_container .sf-menu li.submenu:hover ul li.selected ul li.selected a,
.menu_container .sf-menu li:hover ul li.sfHover > a {
    color: var(--dkj-groen-tekst);
    background-color: var(--dkj-bg-flade);
}
/* Skillelinjer i menuerne (danskejernbaner.NN.css tegner dem hvide til mørk baggrund) */
.menu_container .dropdown-divider-menu::before {
    background: var(--dkj-linje);
}
/* ===== DROP-DOWN-MENUER SLUT ===== */
/* ===== FOOTER START ===== */
.footer_container {
    color: var(--dkj-tekst);
    background-color: var(--dkj-bg-ramme);
    border-top: 1px solid var(--dkj-linje-ramme);
}
.footer p,
.footer_container p,
.footer_container li,
.footer_container div {
    color: var(--dkj-tekst);
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.footer h1 a, .footer h2 a, .footer h3 a, .footer h4 a, .footer h5 a, .footer h6 a {
    color: var(--dkj-overskrift);
}
.footer a {
    color: var(--dkj-groen-tekst-ramme);
}
/* Grøn tekst i footeren (fx antal aktive brugere og mailadresse) */
.footer_container .DKJ-font-bold-green {
    color: var(--dkj-groen-tekst-ramme);
}
/* ===== FOOTER SLUT ===== */

/* ===== fra top.01.css ===== */
/* =====================================================================
   top.01.css
   Sidens top (funktioner.top.php og funktioner.menu.php):
   - "Gå til indhold"-link for tastatur og skærmlæser
   - Den brede menu (fra 768 px) bliver i toppen, når der scrolles - topbjælken
     med søg og senest nyt scroller væk (position: sticky i stedet for temaets
     position: fixed, så indholdet ikke hopper)
   - Menupunktet og undermenupunktet for den viste side er tydeligt markeret
   Farverne kommer fra lys_skin.NN.css. Indlæses efter lys_skin.NN.css.
   ===================================================================== */
/* ===== GÅ TIL INDHOLD START ===== */
.top-spring {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    padding: 10px 16px;
    font-weight: 700;
    color: #FFF;
    background: var(--dkj-groen-tekst, #3A6816);
    border-radius: 0 0 6px 6px;
    transition: top 0.15s;
}
.top-spring:focus {
    top: 0;
    color: #FFF;
}
/* ===== GÅ TIL INDHOLD SLUT ===== */
/* ===== SØG START ===== */
/* Ledeteksten læses af skærmlæsere, men vises ikke */
.top-skjult {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.header_top_bar_container .search .search_input:focus-visible {
    outline: 2px solid var(--dkj-groen, #8CC152);
    outline-offset: -2px;
}
/* Browserens eget "ryd"-kryds i søgefeltet passer ikke til temaet */
.header_top_bar_container .search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
/* ===== SØG SLUT ===== */
/* ===== MENU: HVOR ER MAN START ===== */
@media screen and (min-width: 768px) {
    /* Menupunktet: grøn streg over (temaet), fed tekst og grøn streg under */
    .menu_container .sf-menu > li.selected {
        border-top-color: var(--dkj-groen, #8CC152);
        background-color: var(--dkj-bg-flade, #DCE1E6);
        box-shadow: inset 0 -3px 0 var(--dkj-groen, #8CC152);
    }
    .menu_container .sf-menu > li.selected > a,
    .menu_container .sf-menu > li.selected > a:visited {
        font-weight: 700;
        color: var(--dkj-groen-tekst, #3A6816);
    }
    /* Undermenupunktet: grøn kant til venstre, fed grøn tekst - også når menuen er åben */
    .menu_container .sf-menu > li > ul > li.selected > a,
    .menu_container .sf-menu > li.submenu:hover > ul > li.selected > a,
    .menu_container .sf-menu > li.selected > ul > li.selected > a {
        font-weight: 700;
        color: var(--dkj-groen-tekst, #3A6816);
        background-color: var(--dkj-bg-flade, #DCE1E6);
        box-shadow: inset 4px 0 0 var(--dkj-groen, #8CC152);
    }
    /* Tastatur: undermenuen åbnes også, når fokus er i den */
    .menu_container .sf-menu li.submenu:focus-within > ul {
        display: block;
        visibility: visible;
    }
    .menu_container .sf-menu a:focus-visible {
        outline: 2px solid var(--dkj-groen, #8CC152);
        outline-offset: -2px;
    }
}
/* Mobilmenuen: samme markering */
.mobile-menu li.selected > a {
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--dkj-groen, #8CC152);
}
/* ===== MENU: HVOR ER MAN SLUT ===== */
/* ===== MENU I FULD BREDDE START ===== */
/* Menupunkterne bruger hele skærmens bredde - uden sidens margen (temaet: 1200px / 80% /
   layout-bred.01.css). .top-menu giver højere specificitet end de regler, så rækkefølgen er ligegyldig */
@media screen and (min-width: 768px) {
    .menu_container.top-menu .sf-menu {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}
/* ===== MENU I FULD BREDDE SLUT ===== */
/* ===== MENU I TOPPEN VED SCROLL START ===== */
@media screen and (min-width: 768px) {
    .menu_container.top-menu {
        position: sticky;
        top: 0;
        z-index: 1000; /* over kort og galleri - fuldskærm (dialog) og video ligger over */
        transition: box-shadow 0.2s;
    }
    /* Skygge, når menuen er "landet" i toppen (js/menu.01.js) */
    .menu_container.top-menu.er-fast {
        box-shadow: 0 2px 10px rgba(37, 40, 42, 0.14);
    }
    /* Ankre (fx #film) må ikke ende skjult under menuen */
    html {
        scroll-padding-top: 64px;
    }
}
/* ===== MENU I TOPPEN VED SCROLL SLUT ===== */

/* ===== fra fod.01.css ===== */
/* =====================================================================
   fod.01.css
   Sidens bund (funktioner.bund.php). Temaets ydre klasser .footer_container
   og .footer bevares, så bredden følger siden (style.06.css, responsive.06.css,
   layout-bred.01.css), og farverne kommer fra lys_skin.NN.css. Indlæses efter
   lys_skin.NN.css. Alt indhold er afgrænset til .fod.
   ===================================================================== */
.fod {
    padding-top: 36px;
    font-size: 15px;
    line-height: 1.55;
}
.fod .fod-indhold {
    padding-bottom: 24px;
}
.fod p {
    margin: 0;
    padding: 0;
}
/* hidden skal vinde over display: flex (statuslinjen vises af js/fod.01.js) */
.fod [hidden] {
    display: none !important;
}
.fod a {
    color: var(--dkj-groen-tekst-ramme, #2F5512);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}
.fod a:hover,
.fod a:focus-visible {
    color: var(--dkj-groen-tekst-ramme, #2F5512);
    text-decoration-color: currentColor;
}
/* ===== STATUSLINJER START ===== */
.fod .fod-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding: 12px 16px;
    margin-bottom: 32px;
    text-align: center;
    background: var(--dkj-bg-side, #E6E9ED);
    border-left: 4px solid var(--dkj-groen, #8CC152);
    border-radius: 6px;
}
.fod .fod-status p {
    color: var(--dkj-tekst, #3E3E3E);
}
.fod .fod-status strong {
    color: var(--dkj-groen-tekst-ramme, #2F5512);
    font-variant-numeric: tabular-nums;
}
.fod .fod-status .fod-teknik {
    color: var(--dkj-tekst-svag, #555C63);
    font-size: 13px;
}
.fod .fod-status i {
    margin-right: 6px;
    color: var(--dkj-groen-tekst-ramme, #2F5512);
}
/* ===== STATUSLINJER SLUT ===== */
/* ===== KOLONNER START ===== */
.fod .fod-kolonner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px 40px;
}
.fod .fod-kolonne h2 {
    margin: 0 0 12px;
    padding: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dkj-overskrift, #25282A);
    border-bottom: 2px solid var(--dkj-groen, #8CC152);
}
.fod .fod-kolonne p + p {
    margin-top: 10px;
}
.fod .fod-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
/* ===== KOLONNER SLUT ===== */
/* ===== NEDERSTE LINJE START ===== */
.fod .fod-bund {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--dkj-linje-ramme, #B5BDC5);
    font-size: 13px;
}
.fod .fod-bund p {
    color: var(--dkj-tekst-svag, #555C63);
}
.fod .fod-bund-tekst {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fod .fod-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-weight: 700;
    color: var(--dkj-overskrift, #25282A);
    background: var(--dkj-bg-side, #E6E9ED);
    border: 1px solid var(--dkj-linje-ramme, #B5BDC5);
    border-radius: 999px;
    text-decoration: none;
}
.fod .fod-top:hover,
.fod .fod-top:focus-visible {
    color: var(--dkj-overskrift, #25282A);
    background: var(--dkj-bg-ramme-hover, #BEC6CD);
}
.fod .fod-top i {
    color: var(--dkj-groen-tekst-ramme, #2F5512);
}
/* ===== NEDERSTE LINJE SLUT ===== */
/* ===== MOBIL START ===== */
@media screen and (max-width: 767px) {
    .fod {
        padding-top: 24px;
    }
    .fod .fod-bund {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ===== MOBIL SLUT ===== */

/* ===== fra rettelser.01.css ===== */
/* =====================================================================
   rettelser.01.css
   Rettelser og tilføjelser (funktioner.incident.php, js/rettelser.01.js):
   formularen nederst på indholdssiderne, "Jeg er ikke en robot" og
   journalen (sidens egen og vis.incident.php). Bygger på .side-klasserne
   i site.NN.css og farverne i lys_skin.NN.css.
   ===================================================================== */
.side .side-rettelser {
    margin-top: 48px;
}
/* Formularen fylder hele bredden - ligesom journalen */
.side .rettelser-formular {
    max-width: none;
}
/* Tekstfeltet "Hvad skal rettes eller tilføjes?" har en tykkere grøn ramme (i stedet for den tynde grå),
   så formularen er lettere at få øje på. Fokus beholder den grønne glød fra .side-felt textarea:focus */
.side .rettelser-formular .side-felt textarea:not(#editor) {
    border: 2px solid var(--side-groen);
}
.side .rettelser-afsender {
    margin: 0;
    font-size: 14px;
    color: var(--side-svag);
}
.side .rettelser-afsender i {
    margin-right: 6px;
    color: var(--side-groen-tekst);
}
/* ===== FÆLDE START ===== */
/* Feltet er til robotter - skjult for mennesker og skærmlæsere */
.rettelser-faelde {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* ===== FÆLDE SLUT ===== */
/* ===== JEG ER IKKE EN ROBOT START ===== */
.side .rettelser-robot {
    align-self: flex-start;
}
.side .rettelser-robot[hidden],
.side .rettelser-regn[hidden] {
    display: none;
}
.side .rettelser-robot-boks {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    padding: 14px 18px;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(37, 40, 42, 0.08);
    cursor: pointer;
    user-select: none;
}
/* Den rigtige afkrydsningsboks er usynlig - .rettelser-robot-felt tegner den */
.side .rettelser-robot-boks input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.side .rettelser-robot-felt {
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
    border: 2px solid #8A939B;
    border-radius: 4px;
    background: #FFFFFF;
    transition: border-color 0.15s, background-color 0.15s;
}
.side .rettelser-robot-boks input:focus-visible + .rettelser-robot-felt {
    outline: 2px solid var(--side-groen);
    outline-offset: 2px;
}
.side .rettelser-robot-tekst {
    font-size: 15px;
    color: var(--side-tekst);
}
.side .rettelser-robot-status {
    margin-left: auto;
    padding-left: 12px;
    font-size: 12px;
    color: var(--side-svag);
}
/* Regner: en lille snurrende ring i feltet */
.side .rettelser-robot.regner .rettelser-robot-felt {
    border-color: var(--side-linje);
    border-top-color: var(--side-groen);
    border-radius: 50%;
    animation: rettelser-snur 0.8s linear infinite;
}
@keyframes rettelser-snur {
    to {
        transform: rotate(360deg);
    }
}
/* Bekræftet: grønt flueben */
.side .rettelser-robot.er-bekraeftet .rettelser-robot-felt {
    border-color: var(--side-groen);
    background-color: var(--side-groen);
}
.side .rettelser-robot.er-bekraeftet .rettelser-robot-felt::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: solid #FFFFFF;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.side .rettelser-robot.er-bekraeftet .rettelser-robot-status {
    color: var(--side-groen-tekst);
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .side .rettelser-robot.regner .rettelser-robot-felt {
        animation: none;
    }
}
/* ===== JEG ER IKKE EN ROBOT SLUT ===== */
/* ===== JOURNAL START ===== */
.side .rettelser-journal {
    margin-top: 36px;
}
.side .rettelser-journal h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 18px;
}
.side .rettelser-alle {
    margin-left: auto;
    font-size: 14px;
    font-weight: 400;
}
.side .rettelser-filter {
    flex-direction: row;
    max-width: 360px;
    margin-top: 14px;
}
.side .rettelser-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.side .rettelser-kort {
    padding: 14px 16px;
    border: 1px solid var(--side-linje);
    border-left: 4px solid var(--side-groen);
    border-radius: 6px;
    background: var(--side-kort);
}
.side .rettelser-kort-lukket {
    border-left-color: #8A939B;
    background: #FFFFFF;
}
.side .rettelser-kort-hoved {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 8px;
}
.side .rettelser-status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--side-groen-tekst);
}
.side .rettelser-status-lukket {
    background: #8A939B;
}
.side .rettelser-maal {
    font-weight: 700;
}
.side .rettelser-maal small {
    margin-left: 4px;
    font-weight: 400;
    color: var(--side-svag);
}
.side .rettelser-dato {
    margin-left: auto;
    font-size: 12px;
    color: var(--side-svag);
}
.side .rettelser-fra {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--side-svag);
}
.side .rettelser-fra i {
    margin-right: 6px;
}
.side .rettelser-ret {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Tekstfeltet i journalen viser 6 linjer (14px x 1,5 x 6 + luft) */
.side .rettelser-ret textarea {
    width: 100%;
    min-height: 142px;
    padding: 8px 10px;
    box-sizing: border-box;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid var(--side-linje);
    border-radius: 6px;
    background: #FFFFFF;
    resize: vertical;
}
.side .rettelser-ret .side-knap-lille {
    align-self: flex-start;
}
.side .rettelser-tekst {
    font-size: 14px;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
}
.side .rettelser-handlinger {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.side .rettelser-handlinger form {
    margin: 0;
}
.side .rettelser-handlinger .side-knap-lille i,
.side .rettelser-ret .side-knap-lille i {
    margin-right: 4px;
}
.side .rettelser-lukkede {
    margin-top: 16px;
}
.side .rettelser-lukkede > summary {
    margin-bottom: 12px;
    font-weight: 700;
    cursor: pointer;
    color: var(--side-groen-tekst);
}
/* ===== JOURNAL SLUT ===== */
@media (max-width: 600px) {
    .side .rettelser-robot-boks {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .side .rettelser-dato {
        margin-left: 0;
    }
}

/* ===== JAVASCRIPT UDEN JQUERY START (js/site.01.js) ===== */
/* Ankre (#afsnit) og "Til toppen" ruller glat - undtagen ved "reducer bevægelse".
   scroll-padding-top (menuen i toppen) sørger for, at afsnittet lander under menuen */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* "Senest nyt": én station ad gangen (uden JavaScript den første) */
.latest_news_scrolling_list > li {
    display: none;
    float: none;
}

.latest_news_scrolling_list > li.aktiv,
.latest_news_scrolling_list:not(.klar) > li:first-child {
    display: block;
}

.latest_news_scrolling_list > li.aktiv {
    animation: nyhed-ind 0.45s ease both;
}

@keyframes nyhed-ind {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .latest_news_scrolling_list > li.aktiv {
        animation: none;
    }
}
/* ===== JAVASCRIPT UDEN JQUERY SLUT ===== */

/* ===== fra layout-bred.01.css ===== */
/* =====================================================================
   layout-bred.01.css
   Bredt desktop-layout: siden bruger hele skærmbredden på 16:9- og
   16:10-skærme i stedet for temaets faste 1200px. På skærme der er mere
   bredformat end 16:9 (fx 21:9 og 32:9) begrænses bredden, så der kommer
   spalter i siderne.

   Gælder kun fra 1251px - tablet- og mobillayoutet i responsive.06.css
   (max-width: 1250px) er uændret. Indlæses som den sidste CSS-fil.
   ===================================================================== */
@media screen and (min-width: 1251px) {
    :root {
        /* Luft mod skærmkanten i hver side */
        --dkj-side-luft: 20px;

        /* Maksimal indholdsbredde i forhold til vinduets højde.
           Faktoren 2.2 (ikke 16/9 = 1.78) fordi vinduet er lavere end skærmen
           (proceslinje, faner, adresselinje): et maksimeret browservindue på en
           16:9-skærm er typisk 2,0-2,15 gange så bredt som højt.
             1920x1080 (16:9)   -> hele bredden
             1920x1200 (16:10)  -> hele bredden
             2560x1440 (16:9)   -> hele bredden
             3440x1440 (21:9)   -> ca. 2880px, spalter i siderne
             5120x1440 (32:9)   -> ca. 2880px, brede spalter i siderne
           Aldrig smallere end temaets oprindelige 1200px. */
        --dkj-max-bredde: max(1200px, calc(100vh * 2.2));
    }
    /* ===== HOVEDCONTAINERE START ===== */
    .header_top_bar,
    .header,
    .menu_container .sf-menu,
    .footer,
    .page {
        width: calc(100% - 2 * var(--dkj-side-luft));
        max-width: var(--dkj-max-bredde);
    }
    /* ===== HOVEDCONTAINERE SLUT ===== */
    /* ===== SPALTER START ===== */
    /* Temaets spalter har faste pixelbredder (fx 790px + 30px + 380px = 1200px).
       Her beregnes de i procent, så de følger containerens bredde.
       Mellemrummet mellem spalter er uændret 30px (.column margin-left). */
    /* ===== SPALTER SLUT ===== */
    /* ===== HISTORISKE KORT START ===== */
    /* Kortene er 1000px brede. De vises højst i samme størrelse som i det
       gamle layout (1200px), så de ikke bliver slørede af opskalering. */
    img.DKJ_img[src*="/kort/"] {
        max-width: 1200px;
    }
    /* ===== HISTORISKE KORT SLUT ===== */
}