:root {
    --kf-blue: #1951c2;
    --kf-red: #e30b0b;
    --kf-dark: #0b1224;
    --kf-light: #f5f7ff;
    --gap: 20px;
    --badge: #e9eefc;
    --badge-text: #183469
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0b1224;
    background: #fff
}

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

iframe {
    max-width: 100%;
    display: block
}

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

a:hover {
    opacity: .9
}

.container {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 18px)
}

/* ================= Header & nav (mobilmenu på ALLE enheder) ================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #e9eefc
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 12px;
    flex-wrap: wrap
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0
}

.brand img {
    height: 54px;
    width: auto
}

.brand h1 {
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1;
    margin: 0;
    font-weight: 800;
    color: var(--kf-blue);
    white-space: nowrap
}

/* YOUTUBE DATA */
.video-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 700;
    color: #183469
}

.video-stats .chip {
    background: #eef3ff;
    border: 1px solid #dfe7ff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px
}

.video-stats .chip em {
    font-style: normal;
    opacity: .75;
    margin-left: 6px;
    font-weight: 600
}

/* Grid som før */
.related-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width:1100px) {
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.related-card {
    border: 1px solid #e9eefc;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}



.play-badge {
    position: absolute;
    inset: auto 12px 12px auto;
    background: #fff;
    color: var(--kf-blue);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.related-card h4 {
    margin: 10px 12px 12px;
    font-size: 16px;
    color: #183469;
}

/* Stats i små blå pill-badges, centreret */
.related-stats {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 0 30px 80px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    color: var(--kf-red);
}

.pill {
    display: inline-block;
    background: #eef2ff;
    color: #183469;
    border: 1px solid #e9eefc;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .8rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pill--soft {
    background: #f5f8ff;
}

.related-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #eef2ff;
    overflow: hidden;
    display: block;
}

.related-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* MENUEN */
/* Flydende "Menu" knap */
#quick-nav {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    background: var(--kf-blue);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 16px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    cursor: pointer;
}

#quick-nav:hover {
    opacity: .95
}

/* Panel */
#quick-panel {
    position: fixed;
    right: 12px;
    bottom: 70px;
    width: min(360px, 92vw);
    max-height: min(70vh, 520px);
    overflow: auto;
    background: #fff;
    border: 1px solid #e9eefc;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(11, 18, 36, .16);
    padding: 10px 10px 12px;
    z-index: 1200;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

#quick-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.qp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 8px 6px;
    border-bottom: 1px solid #eef2ff;
}

.qp-head strong {
    color: #183469;
    font-size: 16px;
}

#quick-close {
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #183469;
}

.qp-links {
    display: grid;
    gap: 8px;
    padding: 10px 6px 4px;
}

.qp-links a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    color: #0b1224;
    background: #f7f9ff;
}

.qp-links a:hover {
    background: #eef3ff;
}

/* Scroll-spy markering */
.qp-links a.active {
    background: var(--kf-blue);
    color: #fff;
}

/* Til top knap */
#to-top {
    position: fixed;
    right: 18px;
    bottom: 70px;
    z-index: 1190;
    display: none;
    background: #fff;
    color: var(--kf-blue);
    border: 1px solid #e9eefc;
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

#to-top.show {
    display: inline-block;
}

/* Giv lidt ekstra plads til første sektion når man hopper */
section {
    scroll-margin-top: 80px;
}



/* Gammel mobil-css som skjulte menuen – FJERNET! (ingen display:none på ul) */
/* Kontakt – SoMe ikoner */
.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    width: 64px;
    height: 64px;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.social-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.social-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

/* Farve-hints */
.social-icon.yt:hover {
    background: #ff0000;
}

.social-icon.fb:hover {
    background: #1877f2;
}

.social-icon.ig:hover {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.social-icon.tt:hover {
    background: #000;
}

.social-icon:hover img {
    filter: brightness(0) invert(1);
}

/* NU TOP DESKTOP NAVIGATION */
/* Kun desktop */
/* --- TOPNAV - DESKTOP --- */
.topnav {
    display: none;
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid #e9eefc;
    padding: 8px 0;
}

@media (min-width: 900px) {
    .topnav {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #quick-nav {
        display: none;
    }

    /* skjul mobil-menu */
}

.topnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topnav__item {
    position: relative;
}

/* LINKS */
.topnav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    color: #0b1224;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

/* HOVER / FOCUS */
.topnav__link:hover,
.topnav__item:focus-within>.topnav__link {
    background: #f4f6ff;
    color: var(--kf-blue, #183469);
    transform: rotate(-3deg);
}

/* Fjern den gamle underline-effekt */
.topnav__link::after {
    content: none !important;
}

/* Dropdown caret */
.has-sub>.topnav__link {
    position: relative;
    padding-right: 22px;
}

.has-sub>.topnav__link::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.has-sub:hover>.topnav__link::before,
.has-sub:focus-within>.topnav__link::before {
    opacity: 0.85;
}

/* Dropdown-panel */
.topnav__submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e9eefc;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 26, 54, 0.08);
    padding: 8px;
    margin-top: 8px;
    list-style: none;
    display: none;
}

.topnav__submenu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #0b1224;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}

.topnav__submenu a:hover {
    background: #f5f8ff;
}

/* Hover/focus viser submenu */
.has-sub:hover>.topnav__submenu,
.has-sub:focus-within>.topnav__submenu {
    display: block;
}

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

/* Søer – rating & pris */
.lake-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}

.rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f5a623;
    /* gul/orange stjernefarve */
    font-size: 18px;
    line-height: 1;
}

.star.half::after {
    content: "★";
    position: absolute;
    margin-left: -1em;
    width: 0.5em;
    overflow: hidden;
    color: #f5a623;
}

.star.empty {
    color: #ccd6f6;
}

.rating-number {
    color: #333;
    font-size: 14px;
    margin-left: 4px;
}

.price {
    color: #183469;
    font-weight: 600;
    font-size: 15px;
}

/* Søer – stjerner for featured søer */
.card[style*="border:2px solid var(--kf-red)"] .rating-stars .star.full,
.card[style*="border:2px solid var(--kf-red)"] .rating-stars .star.half {
    color: var(--kf-red);
    text-shadow: 0 0 4px rgba(227, 11, 11, 0.3);
}

.card[style*="border:2px solid var(--kf-red)"] .rating-stars .rating-number {
    color: var(--kf-red);
    font-weight: 700;
}

/* Søer – layout for header og stjerner */
.lake-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.lake-header h4 {
    margin: 0;
    font-size: 18px;
    color: #183469;
    flex-grow: 1;
}

.rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f5a623;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
}

.star.empty {
    color: #ccd6f6;
}

.rating-number {
    color: #444;
    font-size: 14px;
    margin-left: 3px;
}

.lake-price {
    color: #183469;
    font-weight: 600;
    margin: 4px 0 10px;
    font-size: 15px;
}

/* Søer – Fangstbegrænsning indikator */
/* Meta under titel: pris på første linje, fangstbegrænsning på linjen under */
.lake-meta {
    display: flex;
    flex-direction: column;
    /* læg rækkerne under hinanden */
    gap: 6px;
    margin: 6px 0 10px;
}

.price {
    font-size: 15px;
    color: #183469;
}

.fangst-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #183469;
}

.fangst-icon {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.fangst-icon.red {
    color: var(--kf-red);
}

.fangst-icon.green {
    color: #28a745;
}


.fangst {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #183469;
}



.fangst-icon.red {
    color: var(--kf-red);
}

.fangst-icon.green {
    color: #28a745;
    /* grøn nuance */
}

/* Tip-liste */
.tip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 600px;
    overflow-y: auto;
}

.tip-list li {
    border: 1px solid #e9eefc;
    background: #f9fbff;
    border-radius: 10px;
    padding: 10px 12px;
}

.tip-list li strong {
    color: var(--kf-blue);
    display: block;
    margin-bottom: 4px;
}

.tip-list li small {
    color: #667;
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.tip-list li p {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.4;
}

/* Formular layout */
.form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
}

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

label {
    font-weight: 700;
    color: #183469;
    margin: 6px 0 4px;
    display: block;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccd6f6;
    border-radius: 12px;
    font-size: 16px;
}

/* ================= Hero & knapper ================= */

/* Baggrunds billede toppen */
/* Hero sektionen med baggrundsbillede */
.hero {
    position: relative;
    color: #fff;
    background: var(--kf-hero-image, url('../images/hero-bg2-optimized.jpg')) center center / cover no-repeat;
    padding: 80px 0;
    text-align: left;
    overflow: hidden;
    /* sikrer at overlay ikke flyder ud */
}

.hero::after {
    /* Mørk overlay for bedre læsbarhed */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    /* <- vigtigt: gør overlay’et lavere end teksten */
}

.hero .hero-inner {
    position: relative;
    /* gør indholdet til eget lag */
    z-index: 2;
    /* <- højere end overlay’et */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.hero h2 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
}

.hero p {
    max-width: 600px;
    color: #f5f7ff;
    font-size: 17px;
    line-height: 1.5;
}

.hero .btn,
.hero .btn.alt {
    background: var(--kf-blue);
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 18px;
}

.hero .btn.alt {
    background: var(--kf-blue);
}

.hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, white);
}

@media(max-width:900px) {
    .hero-inner {
        grid-template-columns: 1fr
    }
}

.btn {
    display: inline-block;
    background: #fff;
    color: var(--kf-blue);
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 800
}

.btn.alt {
    background: var(--kf-blue);
    color: #fff
}

@media(max-width:500px) {

    .btn,
    .cta {
        display: block;
        width: 100%;
        text-align: center
    }
}

section {
    padding: 36px 0
}

h3 {
    font-size: clamp(20px, 3vw, 26px);
    margin: 0 0 14px;
    font-weight: 800
}

/* ================= Grids & cards ================= */
.grid {
    display: grid;
    gap: var(--gap)
}

.two {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media(max-width:900px) {

    .two,
    .three {
        grid-template-columns: 1fr
    }
}

.card {
    border: 1px solid #e9eefc;
    border-radius: 16px;
    overflow: hidden;
    background: #fff
}

.card h4 {
    margin: 14px 14px 8px;
    font-size: 18px;
    color: #3d4665
}

.card p {
    margin: 0 14px 16px;
    color: #3d4665
}

.card .pad {
    padding: 14px
}

.social-card header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2ff;
    background: var(--kf-light)
}

.social-card img {
    width: 22px;
    height: 22px
}

.social-actions {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid #eef2ff
}

.pill {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #183469;
    font-size: 12px;
    font-weight: 700
}

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center
}

.partner-logos img {
    height: 42px;
    filter: grayscale(1);
    opacity: .9
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px
}

.filter-btn {
    border: 1px solid #ccd6f6;
    background: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700
}

.filter-btn.active {
    background: var(--kf-blue);
    color: #fff;
    border-color: var(--kf-blue)
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--badge);
    color: var(--badge-text);
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px
}

.partner-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(max-width:900px) {
    .partner-grid {
        grid-template-columns: 1fr
    }
}

form {
    display: grid;
    gap: 12px
}

input,
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccd6f6;
    border-radius: 12px;
    font-size: 16px
}

button {
    cursor: pointer
}

footer {
    background: #0f1a36;
    color: #c7d2ff;
    padding: 28px 0;
    margin-top: 10px
}

footer a {
    color: #c7d2ff
}

/* ================= Gear-sektioner ================= */
.gear-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(max-width:900px) {
    .gear-grid {
        grid-template-columns: 1fr
    }
}

.gear-cat {
    border: 1px solid #e9eefc;
    border-radius: 18px;
    background: #fff;
    overflow: hidden
}

.gear-cat header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--kf-light);
    border-bottom: 1px solid #eef2ff
}

.gear-cat h4 {
    margin: 0;
    font-size: 18px;
    color: #183469
}

.gear-list {
    padding: 10px 16px
}

.gear-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e5ecff
}

.gear-item:last-child {
    border-bottom: 0
}

.gear-item .meta {
    color: #3d4665
}

.gear-item .meta strong {
    display: block;
    color: #0b1224
}

.badge-link {
    display: inline-block;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    white-space: nowrap
}

/* ================= Annoncer ================= */
/* Ads */
.ad-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
    /* ÉN kolonne som default = stort banner */
}

/* Skjul evt. ekstra bannere på store skærme, så kun det første vises */
@media (min-width:901px) {
    .ad-card:not(:first-child) {
        display: none;
    }
}

/* På tablet/mindre kan du vælge at vise 1 eller 2 under hinanden – her holder vi 1 for ro */
@media (max-width:1100px) {
    .ad-grid {
        grid-template-columns: 1fr;
    }
}

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

.ad-card {
    border: 1px solid #e9eefc;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    padding: 10px;
}

.ad-card .banner {
    display: block;
    line-height: 0;
    border-radius: 12px;
    overflow: hidden
}

.ad-card img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto
}

.ad-disclaimer {
    color: #3d4665;
    margin-top: 8px;
    text-align: center
}

.ad-disclaimer {
    color: #3d4665;
    margin-top: 8px;
    text-align: center
}

/* Giv forankringer lidt offset ift. sticky header */
section[id] {
    scroll-margin-top: 90px
}

/* Relaterede videoer */
/* Relaterede videoer – 19:9 thumbs og stabile kolonner */
.related-grid {
    display: grid;
    gap: 16px;
    /* Default: 1 kolonne (mobil) */
    grid-template-columns: 1fr;
}

/* ≥ 700px: 2 kolonner */
@media (min-width: 700px) {
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ≥ 1100px: 3 kolonner */
@media (min-width: 1100px) {
    .related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.related-card {
    border: 1px solid #e9eefc;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    width: 100%;
    height: 75%;
    transition: transform .2s ease, box-shadow .2s ease;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.play-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #fff;
    color: var(--kf-blue);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.related-card h4 {
    margin: 8px 10px 12px;
    font-size: 15px;
    color: #183469;
    line-height: 1.3;
}

/* NYHEDER */
.news-item {
    display: grid;
    gap: var(--gap);
    align-items: center;
    background: #fff;
    border: 1px solid #e9eefc;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 20px
}

/* Med billede: to kolonner */
.news-item.has-image {
    grid-template-columns: 1.2fr 0.8fr;
}

/* Uden billede: fylder hele bredden */
.news-item.full {
    grid-template-columns: 1fr;
}

/* Resten som før */
.news-body {
    padding: 16px;
}

.news-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    color: #3d4665;
    font-size: 14px;
}

.news-meta .dot {
    width: 6px;
    height: 6px;
    background: #c9d5ff;
    border-radius: 999px;
    display: inline-block;
}

.news-item h4 {
    margin: 4px 0 8px;
    font-size: 18px;
    color: #183469;
}

.news-item p {
    margin: 0 0 10px;
    color: #3d4665;
}

.news-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.news-actions .btn {
    background: #fff;
    border: 1px solid #ccd6f6;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
}

.news-actions .btn:hover {
    background: #f5f8ff;
}

.news {
    background: var(--kf-light);
    padding: 50px 0;
}

.news-media {
    position: relative;
    aspect-ratio: 16/9;
    background: #eef2ff;
}

.news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .news-item.has-image {
        grid-template-columns: 1fr;
    }

    .news-media {
        order: 2;
    }
}

/* Media håndtering */
.news-item.has-media {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
}

.news-item.full {
    display: grid;
    grid-template-columns: 1fr;
}

/* Mediaområde – billede eller video */
.news-media {
    position: relative;
    aspect-ratio: 16/9;
    background: #eef2ff;
    overflow: hidden;
    border-radius: 0 16px 16px 0;
}

.news-media img,
.news-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-media iframe {
    border: none;
}

/* På mobil: media under tekst */
@media (max-width: 900px) {
    .news-item.has-media {
        grid-template-columns: 1fr;
    }

    .news-media {
        order: 2;
        border-radius: 0 0 16px 16px;
    }
}

/* ------------- INTERAKTIVT KORT OVER SØER ----------------- */
.map-wrap {
    display: grid;
    gap: 16px;
    grid-template-columns: 1.2fr .8fr
}

@media (max-width:1000px) {
    .map-wrap {
        grid-template-columns: 1fr
    }
}

#lake-map {
    width: 100%;
    height: 420px;
    border: 1px solid #e9eefc;
    border-radius: 16px;
    overflow: hidden;
    background: #eef2ff
}

.map-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 14px
}

.map-tools input,
.map-tools select {
    padding: 10px 12px;
    border: 1px solid #ccd6f6;
    border-radius: 12px
}

.lake-list .card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px
}

.star {
    color: #ffb703
}

/* stjerner */
.lim-ok {
    color: #12a150;
    font-weight: 800
}

.lim-yes {
    color: #ce1f1f;
    font-weight: 800
}

/* ------------------ FAQ ------------------- */
/* Lidt luft så anker-scroll ikke rammer under header */
section:first-of-type {
    scroll-margin-top: 90px;
}

/* Accordion (details/summary) */
.faq-list details {
    border: 1px solid #e9eefc;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.faq-list details+details {
    margin-top: 12px;
}

.faq-list summary {
    cursor: pointer;
    font-weight: 800;
    color: #183469;
    padding: 14px 16px;
    list-style: none;
    outline: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list .faq-answer {
    padding: 0 16px 14px;
    color: #3d4665;
}

/* pil */
.faq-list summary::before {
    content: "▸";
    display: inline-block;
    transform: translateY(1px);
    opacity: .7;
}

.faq-list details[open] summary::before {
    content: "▾";
    opacity: 1;
}

/* Tip-kort */
.tips-grid {
    display: grid;
    gap: var(--gap, 20px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width:1100px) {
    .tips-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

.tip-card {
    border: 1px solid #e9eefc;
    border-radius: 16px;
    background: #fff;
    padding: 14px;
    display: flex;
    gap: 10px;
}

.tip-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--kf-blue, #1951c2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

.tip-text {
    color: #0b1224;
}

/* OM MIG */


section {
    padding: 36px 0
}

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

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

.kv .card {
    padding: 16px;
    text-align: center
}

.kv .big {
    font-weight: 800;
    font-size: 22px;
    color: #183469
}

.about-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1.1fr .9fr
}

@media(max-width:900px) {
    .about-grid {
        grid-template-columns: 1fr
    }
}

.about-photo {
    display: flex;
    align-items: center;
    justify-content: center
}

.about-photo img {
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
}

.timeline {
    border-left: 3px solid #e5ecff;
    margin-left: 8px;
    padding-left: 18px
}

.timeline .item {
    margin: 12px 0
}

blockquote {
    margin: 5;
    padding: 20px 20px;
    background: #f7f9ff;
    border-left: 4px solid var(--kf-blue);
    border-radius: 10px;
    color: #183469
}

/* ------------------ INSTALERE SOM APP ------------------- */
.pwa-install {
    position: fixed;
    inset: auto 12px 12px 12px;
    background: #0f1a36;
    color: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    display: none;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.pwa-install.show {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pwa-install p {
    margin: 0;
    flex: 1 1 auto;
    font-size: 15px;
}

.pwa-install button {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
}

.pwa-install .accept {
    background: #1951c2;
    color: #fff;
}

.pwa-install .close {
    background: #e30b0b;
    color: #fff;
}

/* KONKURRENCE */
/* Layout for tilmelding */
.tilmelding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 24px 0;
    align-items: start;
}

.tilmelding-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.tilmelding-card.full {
    grid-column: 1 / -1;
    /* Fuld bredde */
}

/* Radio-knapper – Chrome fix */
.radio-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
}

.radio-line input[type="radio"] {
    accent-color: var(--kf-blue);
    /* Chrome 97+ understøtter dette */
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    /* Chrome fix mod lodret forskydning */
    transform: translateY(1px);
    /* Sørger for center alignment */
}

.radio-line span {
    flex: 1;
    color: #0b1224;
    user-select: none;
}

/* Knappen */
.tilmelding-card .btn.alt {
    margin-top: 12px;
}

/* Responsivt */
@media (max-width: 700px) {
    .tilmelding-grid {
        grid-template-columns: 1fr;
    }
}

/* Chrome visual polish */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type="radio"] {
        -webkit-appearance: auto;
        appearance: auto;
    }
}

/* YT SUBS I HEADER */
.subs-btn {
    background: var(--kf-red);
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: none;
}



.subs-count {
    font-size: 16px;
}

/* Små, pæne thumbs – samme stil overalt */
.thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2ff;
    border: 1px solid #e9eefc;
}

.thumb img {
    width: 100%;
    height: 150px;
    /* hold den lille */
    object-fit: cover;
    /* beskær pænt */
    display: block;
}

/* er det fiske vejr */
/* Valgfrit: farvelæg badge afhængigt af vurdering */

#fishwx-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#fishwx-badge {
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 999px;
}

#fishwx-when {
    margin-top: 4px;
}

.pill--good {
    background: #eafff0;
    color: #0a7a3f;
    border: 2px solid #b3f1cc;
    margin-top: 15px;
    margin-bottom: 15px;
}

.pill--bad {
    background: #fff1f1;
    color: #b01515;
    border: 2px solid #ffd0d0;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* cookie settings */
/* Kompakt cookie-banner nederst til højre */
.cookie-banner {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    width: min(92vw, 360px);
    padding: 14px;
    background: #fff;
    border: 1px solid #e9eefc;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}

.cookie-banner .cb-title {
    margin: 0 0 6px;
    font-size: 16px;
    color: #183469;
}

.cookie-banner .cb-text {
    margin: 0 0 10px;
    color: #3d4665;
    font-size: 14px;
    line-height: 1.4;
}

.cookie-banner .cb-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cookie-banner .cb-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #183469;
}

.cookie-banner .cb-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cookie-banner .cb-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #1951c2;
    text-decoration: none;
}

.cookie-banner .cb-link:hover {
    opacity: .9;
}

/* Lille flydende indstillingsknap (kan gemmes, hvis du ikke vil have den) */
/* Kompakt cookie-banner nederst til højre */
.cookie-banner {
    position: fixed;
    inset: auto 16px calc(16px + env(safe-area-inset-bottom, 0px)) auto;
    /* brug safe-area */
    z-index: 2147483647;
    /* over ALT */
    width: min(92vw, 380px);
    padding: 14px;
    background: #fff;
    border: 1px solid #e9eefc;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}

.cookie-banner[hidden] {
    display: none;
}

/* så hidden virkelig skjuler den */
.cookie-banner .cb-title {
    margin: 0 0 6px;
    font-size: 16px;
    color: #183469;
}

.cookie-banner .cb-text {
    margin: 0 0 10px;
    color: #3d4665;
    font-size: 14px;
    line-height: 1.4;
}

.cookie-banner .cb-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cookie-banner .cb-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #183469;
}

.cookie-banner .cb-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cookie-banner .cb-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #1951c2;
    text-decoration: none;
}

.cookie-banner .cb-link:hover {
    opacity: .9;
}

/* Flydende “Indstillinger”-knap */
.cookie-manage {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483646;
    background: #f5f8ff;
    color: #183469;
    border: 1px solid #ccd6f6;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Når banneret er åbent, skub knappen op så de ikke overlapper */
.banner-open .cookie-manage {
    bottom: calc(16px + 180px);
    /* ca. bannerhøjde – justér hvis nødvendigt */
}

@media (max-width:480px) {
    .cookie-banner {
        right: 12px;
        left: 12px;
        width: auto;
    }

    .banner-open .cookie-manage {
        bottom: calc(16px + 200px);
    }
}

/* Standard placering (desktop) – cookie-knap i bunden til højre */
#cookie-fab,
.cookie-fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60;
    /* under menu-paneler men over indhold */
}

/* Quick-nav og til-top-knap – reserver lidt plads mellem dem */
#quick-nav {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(86px, env(safe-area-inset-bottom));
    /* 70px + margin */
    z-index: 65;
}

#to-top {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(156px, env(safe-area-inset-bottom));
    /* lidt over quick-nav */
    z-index: 55;
}

/* MOBIL: flyt cookie-FAB til venstre, så den ikke dækker quick-nav/menu */
@media (max-width: 700px) {

    #cookie-fab,
    .cookie-fab {
        left: max(16px, env(safe-area-inset-left));
        right: auto;
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    /* Quick-nav bevares nederst højre */
    #quick-nav {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(86px, env(safe-area-inset-bottom));
    }

    #to-top {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(156px, env(safe-area-inset-bottom));
    }
}

/* Hvis du har en fixeret top-header: løft cookie-FAB hvis du vil placere den øverst på mobil (alternativ layout) */
@media (max-width: 700px) {
    .cookie-fab--top {
        top: calc(60px + 8px);
        /* headerhøjde + margin */
        bottom: auto;
    }
}

/* ----------------------------------------------------------------------------------- FANGST -------- */
.fangst-list {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    /* <- tving alt på én linje */
    white-space: nowrap;
    /* <- undgå brydning inde i pill-tekster */
    overflow-x: auto;
    /* <- scroll hvis det bliver for langt */
    -webkit-overflow-scrolling: touch;
}

.fangst-item img {
    border-radius: 16px 16px 0 0;
}

.fangst-item .pill {
    background: #eef4ff;
    color: #1e40af;
    font-weight: 600;
    font-size: 0.75rem;
}

.chips--inline {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    /* <- tving alt på én linje */
    white-space: nowrap;
    /* <- undgå brydning inde i pill-tekster */
    overflow-x: auto;
    /* <- scroll hvis det bliver for langt */
    -webkit-overflow-scrolling: touch;
}

.chips--inline .pill {
    display: flex;
    gap: 8px;
    /* afstand mellem elementerne */
    flex-wrap: wrap;
    /* hvis du vil tillade linjeskift ved små skærme */
}

.chipsfr {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* WARNINGS - FORSKELLIGE TUPER */
/* Advarsels-span */
.span-warning {
    display: inline-block;
    background: rgb(238, 206, 206);
    /* svag rød tone */
    color: #000000;
    /* mørkerød tekst */
    border: 1px solid rgb(240, 166, 166);
    padding: 4px 10px;
    border-radius: 10px;
    /* pill-style runding */
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 10px;
}

.span-note {
    display: inline-block;
    background: rgb(227, 255, 243);
    /* svag rød tone */
    color: #000000;
    /* mørkerød tekst */
    border: 1px solid rgb(166, 255, 196);
    padding: 4px 10px;
    border-radius: 10px;
    /* pill-style runding */
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 10px;
}

.pill--warn {
    background: rgb(238, 206, 206);
    color: #000000;
    border: 1px solid rgb(240, 166, 166);
    display: inline-block;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .8rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pill--note {
    background: rgb(227, 255, 243);
    color: #000000;
    border: 1px solid rgb(166, 255, 196);
    display: inline-block;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .8rem;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Reaktioner */
#fr-reactions .pill.active {
    background: #dbeafe;
    /* svag blå */
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}

#fr-reactions .pill[disabled] {
    opacity: .75;
    cursor: default;
}

#nearby-lakes .lake-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    text-align: center;
}

#nearby-lakes .lake-card {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#nearby-lakes .lake-card p {
    max-width: 80%;
}

@media (max-width: 768px) {
    #nearby-lakes .lake-grid {
        flex-direction: column;
        align-items: center;
    }

    #nearby-lakes .lake-card {
        width: 100%;
        max-width: 600px;
    }
}

.reactions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.price-box {
    display: flex;
    gap: 8px;
    align-items: center;
}

.before-price {
    text-decoration: line-through;
    opacity: 0.6;
    background: #ccc;
}

.offer-price {
    background: #e63946;
    color: #fff;
    font-weight: bold;
}

.fish-week{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.fish-day{
  padding:14px;
  border-radius:14px;
  width:120px;
  text-align:center;
  font-size:0.95rem;
  transition:0.2s;
  color:#111827;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.fish-day.good{
  background:#16a34a;
  color:white;
}

.fish-day.medium{
  background:#facc15;
}

.fish-day.bad{
  background:#dc2626;
  color:white;
}

.fish-day-name{
  font-weight:600;
  margin-bottom:6px;
  text-transform:capitalize;
}

.fish-status{
  font-weight:700;
  font-size:1rem;
  margin:6px 0;
}

.fish-percent{
  font-size:1.2rem;
  font-weight:bold;
  margin-bottom:6px;
}

.fish-small{
  font-size:0.8rem;
  opacity:0.9;
}