/* ==========================================================
   LÆSEGUIDE (tilføjet – ingen regler er ændret, kun kommentarer)
   - Til højre for hver linje står en kort forklaring af, hvad linjen ændrer.
   - Opbygning: vælger { egenskab: værdi; } – vælgeren siger HVEM, egenskaben HVAD.
   - 1rem = browserens grundstørrelse, normalt 16 px (6.5rem = 104 px).
   - var(--navn) henter en værdi (fx en farve) fra :root-blokken øverst.
   - Står to regler på samme element med lige stor vægt, vinder den, der står SIDST i filen.
   - @media (max-width: 600px) gælder kun på skærme op til 600 px bredde (mobil).
   ========================================================== */

/* ==========================================================
   SwingerSiden.dk - fælles stilark for ALLE sider
   Ændringer her slår igennem på hele sitet.
   ========================================================== */

:root {  /* :root = hele siden. Her samles variabler, så farver kun skal rettes ét sted */
    --bg-color: #121212;  /* variabel: sidens grundfarve, meget mørk grå (bruges bag billedet) */
    --card-bg: #1e1e1e;  /* variabel: baggrund til kort og bokse, en anelse lysere end siden */
    --text-main: #e0e0e0;  /* variabel: almindelig tekst, blød brækket hvid */
    --text-muted: #aaaaaa;  /* variabel: dæmpet tekst, lysegrå */
    --accent-burgundy: #5e0b13;  /* variabel: dyb vinrød, bruges som knapfarve */
    --accent-gold: #ff9900;  /* variabel: orange-guld, bruges til streger, menumarkering og accenter */
    --accent-burgundy-hover: #a30029;  /* variabel: lysere rød, vises når musen er over en knap */
}  /* slut på :root */

* {  /* * = alle elementer på siden */
    box-sizing: border-box;  /* bredde og højde regnes inkl. luft og ramme, så bokse ikke vokser ud over deres bredde */
    margin: 0;  /* fjerner browserens standardafstand udenom alle elementer */
    padding: 0;  /* fjerner browserens standardluft indeni alle elementer */
}  /* slut på reglen */

body {  /* body = hele den synlige side */
    background-image: url('header.png');  /* baggrundsbillede: filen header.png i samme mappe som siden */
    background-size: cover;  /* billedet skaleres, så det dækker hele vinduet (kanter kan blive beskåret) */
    background-position: top center;  /* billedet placeres med toppen og midten i vinduet */ /* Sørg for at billedet starter præcis i toppen */
    background-attachment: fixed;  /* billedet står stille, når man scroller */ /* Gør at billedet står stille, når man scroller */
    background-color: var(--bg-color);  /* reservefarve bag billedet, hvis det ikke kan indlæses */
    color: var(--text-main);  /* standardfarve til al tekst: brækket hvid */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;  /* skrifttype: første på listen, der findes på enheden, bruges */
    line-height: 1.6;  /* linjehøjde 1,6 gange skriftstørrelsen = luftig, læsevenlig tekst */
    padding-bottom: 40px;  /* 40 px luft nederst på siden */
}  /* slut på reglen */

/* ---------- HEADER (scroller væk) ---------- */
header {  /* header = toppen med logoet (scroller med siden) */
    padding: 60px 20px 0;  /* luft indeni: 60 px foroven, 20 px i siderne, 0 forneden */
    text-align: center;  /* centrerer indholdet (logoet) vandret */
}  /* slut på reglen */

header .logo {  /* logoteksten SwingerSiden.dk (div med klassen logo i headeren) */
    font-family: 'Playball', cursive;  /* skrifttypen Playball (hentes fra Google Fonts), ellers en standard-skrivskrift */
    font-size: 6.5rem;  /* meget stor tekst: 6,5 x 16 px = 104 px */
    font-weight: normal;  /* ingen fed skrift (Playball findes kun i én tykkelse) */
    line-height: 1;  /* linjehøjden er lig skriftstørrelsen, så logoet ikke får ekstra luft */
    margin-bottom: 20px;  /* 20 px afstand under logoet, før menuen */
    position: relative;  /* gør, at z-index nedenfor virker */
    z-index: 2;  /* lægger logoet foran andre elementer (højere tal = længere fremme) */

    background: linear-gradient(135deg, #8c3a14 0%, #ffb300 50%, #7a2e12 100%);  /* farveforløb på skrå (135°): mørk kobber, gul i midten, mørk rødbrun */
    -webkit-background-clip: text;  /* klipper baggrunden til bogstavernes form (Safari/Chrome) */
    background-clip: text;  /* samme som ovenfor, standardudgaven */
    -webkit-text-fill-color: transparent;  /* gør selve teksten gennemsigtig, så farveforløbet ses gennem bogstaverne */

    -webkit-text-stroke: 2px #6b2a10;  /* mørk brun kontur på 2 px rundt om bogstaverne */

    filter: drop-shadow(0 0 10px rgba(160, 70, 20, 0.55))  /* glød 1: ingen forskydning, 10 px sløring, brun-orange, 55 % dækkende */
            drop-shadow(0 0 35px rgba(120, 40, 10, 0.3));  /* glød 2: bredere (35 px), mørkere og svagere (30 %) */
    opacity: 0.92;  /* hele logoet er 92 % dækkende, så det sidder lidt mere i billedet */
}  /* slut på reglen */

/* ---------- MENU (bliver stående i toppen) ---------- */
.nav-wrap {  /* båndet rundt om menuen, ligger udenfor headeren så det kan blive hængende */
    position: sticky;  /* scroller med siden, indtil toppen nås, og bliver så hængende */
    top: 0;  /* hænger fast 0 px fra vinduets top */
    z-index: 100;  /* ligger foran alt indhold, når siden scroller forbi */
    padding: 12px 20px 16px;  /* luft indeni: 12 px foroven, 20 px i siderne, 16 px forneden */
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.2) 0%, rgba(18, 18, 18, 0.0) 100%);  /* mørkt forløb oppefra og ned: 20 % dækkende i toppen, 0 % i bunden */
    backdrop-filter: blur(0px);  /* sløret baggrund bag båndet (6 px), så indhold ikke forstyrrer */
    border-bottom: 2px solid var(--accent-gold);  /* guldstreg på 2 px nederst på båndet */
}  /* slut på reglen */

nav {  /* selve menuen (den afrundede pille med knapperne) */
    display: flex;  /* lægger menupunkterne ved siden af hinanden i en række */
    justify-content: center;  /* centrerer punkterne i pillen */
    gap: 15px;  /* 15 px mellemrum mellem menupunkterne */
    background-color: rgba(10, 10, 10, 0.80);  /* næsten sort baggrund, 60 % dækkende */
    padding: 10px 20px;  /* luft indeni pillen: 10 px op/ned, 20 px i siderne */
    border-radius: 50px;  /* meget runde hjørner = pilleform */
    max-width: fit-content;  /* pillen er kun så bred som indholdet kræver */
    margin: 0 auto;  /* 0 op/ned og automatisk i siderne = pillen centreres på siden */
    border: 1px solid rgba(212, 175, 55, 0.2);  /* tynd guldramme på 1 px, meget svag (20 %) */
    backdrop-filter: blur(5px);  /* let sløret baggrund bag pillen (5 px) */
}  /* slut på reglen */

nav a {  /* de enkelte menulinks */
    color: #ffffff;  /* hvid tekst */
    font-weight: 600;  /* halvfed skrift */
    text-decoration: none;  /* fjerner understregningen på links */
    text-transform: uppercase;  /* gør teksten til STORE BOGSTAVER */
    font-size: 0.85rem;  /* lille tekst: 0,85 x 16 px = ca. 14 px */
    letter-spacing: 1.5px;  /* 1,5 px ekstra afstand mellem bogstaverne */
    padding: 8px 16px;  /* luft indeni knappen: 8 px op/ned, 16 px i siderne */
    border-radius: 20px;  /* runde hjørner på knappen */
    position: relative;  /* gør knappen til referencepunkt for evt. placerede elementer inde i den */
    transition: all 0.3s ease;  /* alle ændringer (fx ved hover) sker glidende over 0,3 sekunder */
}  /* slut på reglen */

nav a:hover {  /* menulink når musen er over det */
    color: #121212;  /* teksten bliver næsten sort */
    background-color: var(--accent-gold);  /* knappen bliver solid orange-guld */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);  /* guldglød omkring knappen: 15 px sløring, 50 % dækkende */
}  /* slut på reglen */

nav a.active {  /* det menupunkt, der svarer til den side, man er på */
    color: var(--accent-gold);  /* orange-guld tekst */
    background-color: rgba(212, 175, 55, 0.1);  /* svag guldtoning bag teksten (10 %) */
    border: 1px solid var(--accent-gold);  /* tynd orange-guld ramme rundt om knappen */
}  /* slut på reglen */

/* ---------- INDHOLD ---------- */
.container {  /* indholdskolonnen på forside og oversigtssider */
    max-width: 1000px;  /* indholdet er højst 1000 px bredt */
    margin: 40px auto;  /* 40 px afstand op/ned, automatisk i siderne = centreret */
    padding: 0 20px;  /* 20 px luft i siderne, så indholdet ikke rammer skærmkanten */
}  /* slut på reglen */

.intro-box {  /* velkomstboksen øverst på forside og oversigtssider */
    background-color: var(--card-bg);  /* mørkegrå kortfarve (massiv, ikke gennemsigtig) */
    border-left: 4px solid var(--accent-gold);  /* tyk orange-guld streg i venstre side */
    padding: 25px;  /* 25 px luft indeni på alle sider */
    border-radius: 4px;  /* let afrundede hjørner */
    margin-bottom: 40px;  /* 40 px afstand under boksen */
}  /* slut på reglen */

.intro-box h1, .intro-box h2 {  /* overskrifterne (h1 og h2) inde i velkomstboksen */
    color: var(--accent-gold);  /* orange-guld tekst (overstyres senere af #ffaa00, se lidt længere nede) */
    margin-bottom: 10px;  /* 10 px afstand under overskriften */
}  /* slut på reglen */

/* Sørg for at h1'eren i velkomsten ikke arver den store Playball-skrifttype fra artiklerne */
.intro-box h1 {  /* kun h1 i velkomstboksen */
    font-size: 1.5rem; /* Matcher den oprindelige størrelse for dit design her */  /* størrelse 1,5 x 16 px = 24 px */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;  /* almindelig sans-serif i stedet for Playball */
}  /* slut på reglen */

/* Opdater denne linje så skyggerne bevares på den nye h1 */
.intro-box h1, .intro-box h2, .card h3 {  /* h1 og h2 i velkomstboksen samt h3 i kortene */
    color: #ffaa00;  /* varm orange-gul tekst; overstyrer guldfarven fra reglen ovenfor, fordi denne står senere */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);  /* mørk skygge: 1 px til højre, 1 px ned, 2 px sløring, 90 % dækkende – giver læsbarhed på billedet */
}  /* slut på reglen */


.section-title {  /* sektionsoverskrifter som "Seneste klubanmeldelser" og "Klubber i Danmark" */
    color: #ff9900;  /* orange-guld tekst */
    font-size: 1.5rem;  /* størrelse 24 px */
    margin-bottom: 20px;  /* 20 px afstand under overskriften */
    text-transform: uppercase;  /* STORE BOGSTAVER */
    letter-spacing: 1px;  /* 1 px ekstra afstand mellem bogstaverne */
    border-bottom: 1px solid #3a1a12;  /* tynd mørk kobberstreg under overskriften */
    padding-bottom: 5px;  /* 5 px luft mellem teksten og stregen */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);  /* mørk skygge bag teksten, 80 % dækkende */
}  /* slut på reglen */

.intro-box h2, .card h3 {  /* h2 i velkomstboksen og h3 i kortene */
    color: #ffaa00;  /* varm orange-gul tekst (dublet: samme som reglen ovenfor, gør ingen forskel) */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);  /* mørk skygge (dublet af reglen ovenfor) */
}  /* slut på reglen */

/* ---------- KORT ---------- */
.grid {  /* rammen om alle kortene */
    display: grid;  /* lægger kortene i et gitter af rækker og kolonner */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  /* så mange kolonner som der er plads til, hver mindst 300 px og lige brede */
    gap: 30px;  /* 30 px mellemrum mellem kortene, både lodret og vandret */
}  /* slut på reglen */

.card {  /* ét kort (flise) */
    background-color: rgba(30, 30, 30, 0.5);  /* mørkegrå kortfarve (#1e1e1e), nu 50 % gennemsigtig (lavere tal = mere gennemsigtigt) */
    backdrop-filter: blur(4px);  /* slører baggrundsbilledet bag kortet (4 px), så teksten stadig er til at læse */
    border-radius: 8px;  /* afrundede hjørner */
    overflow: hidden;  /* skjuler alt, der stikker ud over de runde hjørner (fx billedfeltet) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);  /* skygge under kortet: 4 px ned, 15 px sløring, 50 % sort */
    display: flex;  /* indholdet ordnes med flexbox */
    flex-direction: column;  /* indholdet stables lodret: billedfelt øverst, tekst under */
    border: 1px solid #2a2a2a;  /* tynd mørk ramme */
    transition: transform 0.3s, border-color 0.3s;  /* bevægelse og rammefarve ændres glidende over 0,3 sekunder */
}  /* slut på reglen */

.card:hover {  /* kortet når musen er over det */
    transform: translateY(-5px);  /* løfter kortet 5 px opad */
    border-color: var(--accent-gold);  /* rammen skifter til orange-guld */
}  /* slut på reglen */

.card-img-placeholder {  /* billedfeltet øverst i kortet (pladsholder til foto/logo) */
    background: linear-gradient(135deg, rgba(44, 26, 29, 0.5) 0%, rgba(26, 26, 36, 0.5) 100%);  /* diskret forløb på skrå fra mørk rødlig (#2c1a1d) til mørk blålig (#1a1a24), nu 50 % gennemsigtigt */
    height: 180px;  /* fast højde på 180 px, så alle kort har lige højt billedfelt */
    display: flex;  /* bruger flexbox til at placere teksten inde i feltet */
    align-items: center;  /* centrerer teksten lodret */
    justify-content: center;  /* centrerer teksten vandret */
    color: var(--text-muted);  /* dæmpet gråtekst */
    font-size: 0.9rem;  /* lille tekst: ca. 14 px */
    border-bottom: 1px solid #2a2a2a;  /* tynd streg mellem billedfelt og tekst */
}  /* slut på reglen */

.card-content {  /* tekstdelen i kortet under billedfeltet */
    padding: 20px;  /* 20 px luft indeni på alle sider */
    display: flex;  /* flexbox */
    flex-direction: column;  /* elementerne stables lodret */
    flex-grow: 1;  /* fylder al ledig højde i kortet, så knapperne kan ligge nederst */
}  /* slut på reglen */

.card-tags {  /* linjen med land og by øverst i teksten, fx "Tyskland • München" */
    font-size: 0.75rem;  /* meget lille tekst: 12 px */
    color: var(--accent-gold);  /* orange-guld */
    text-transform: uppercase;  /* STORE BOGSTAVER */
    letter-spacing: 1px;  /* 1 px ekstra afstand mellem bogstaverne */
    margin-bottom: 5px;  /* 5 px afstand under */
}  /* slut på reglen */

.card h3 {  /* klubbens navn i kortet */
    margin-bottom: 10px;  /* 10 px afstand under navnet */
    font-size: 1.3rem;  /* størrelse ca. 21 px (farve og skygge kommer fra reglerne længere oppe) */
}  /* slut på reglen */

.card-meta {  /* linjen "Besøgt: dato" */
    font-size: 0.85rem;  /* lille tekst: ca. 14 px */
    color: var(--text-muted);  /* dæmpet gråtekst */
    margin-bottom: 15px;  /* 15 px afstand under */
}  /* slut på reglen */

.rating {  /* stjernerne i kortet */
    color: var(--accent-gold);  /* orange-guld (påvirker kun ☆-tegn; ⭐-emojis har egen farve) */
    margin-bottom: 15px;  /* 15 px afstand under */
    font-size: 1.1rem;  /* lidt større tekst: ca. 18 px */
}  /* slut på reglen */

.rating-num {  /* tallet i parentes efter stjernerne, fx (4/5) */
    font-size: 0.8rem;  /* meget lille tekst: ca. 13 px */
    color: #aaa;  /* lysegrå (samme som #aaaaaa) */
}  /* slut på reglen */

.card p {  /* beskrivelsesteksten i kortet */
    color: var(--text-muted);  /* dæmpet gråtekst */
    font-size: 0.95rem;  /* lidt mindre end normalt: ca. 15 px */
    margin-bottom: 20px;  /* 20 px afstand ned til knappen */
    flex-grow: 1;  /* fylder ledig plads, så knappen skubbes ned i bunden af kortet */
}  /* slut på reglen */

.btn {  /* knapperne ("Læs anmeldelse" osv.) */
    background-color: var(--accent-burgundy);  /* vinrød baggrund */
    color: white;  /* hvid tekst */
    text-align: center;  /* teksten centreres i knappen */
    padding: 10px 15px;  /* luft indeni: 10 px op/ned, 15 px i siderne */
    text-decoration: none;  /* ingen understregning */
    border-radius: 4px;  /* let afrundede hjørner */
    font-weight: 600;  /* halvfed skrift */
    font-size: 0.9rem;  /* lille tekst: ca. 14 px */
    text-transform: uppercase;  /* STORE BOGSTAVER */
    letter-spacing: 1px;  /* 1 px ekstra afstand mellem bogstaverne */
    transition: background-color 0.3s;  /* baggrundsfarven skifter glidende over 0,3 sekunder */
}  /* slut på reglen */

.btn:hover {  /* knappen når musen er over den */
    background-color: var(--accent-burgundy-hover);  /* skifter til den lysere røde farve */
}  /* slut på reglen */

/* ---------- FOOTER ---------- */
footer {  /* bundlinjen nederst på siden */
    text-align: center;  /* centreret tekst */
    padding: 30px;  /* 30 px luft indeni på alle sider */
    color: var(--text-muted);  /* dæmpet gråtekst */
    font-size: 0.85rem;  /* lille tekst: ca. 14 px */
    border-top: 1px solid #2a2a2a;  /* tynd mørk streg øverst */
    margin-top: 60px;  /* 60 px afstand op til indholdet */
}  /* slut på reglen */

/* ---------- MOBIL ---------- */
@media (max-width: 600px) {  /* reglerne herunder gælder kun på skærme op til 600 px bredde */
    header .logo {  /* logoet på mobil */
        font-size: 2rem;  /* meget mindre logo: 32 px i stedet for 104 px */
        letter-spacing: 2px;  /* 2 px ekstra afstand mellem bogstaverne */
    }  /* slut på reglen */
    nav {  /* menuen på mobil */
        flex-wrap: wrap;  /* menupunkterne må ombrydes til flere rækker */
        border-radius: 10px;  /* mindre runde hjørner end pillen på computer (50 px) */
        gap: 5px;  /* 5 px mellemrum (overstyres af 10 px i næste blok nedenfor, fordi den står senere) */
    }  /* slut på reglen */
    nav a {  /* menulinks på mobil */
        font-size: 0.75rem;  /* mindre tekst: 12 px */
        padding: 6px 10px;  /* mindre luft indeni: 6 px op/ned, 10 px i siderne */
    }  /* slut på reglen */
}  /* slut på mediaquery */

@media (max-width: 600px) {  /* endnu en blok for mobil (en dublet af mediaqueryen ovenfor, virker fint) */
    header h1 { font-size: 1.8rem; }  /* rammer kun en h1 i headeren, fx på tyskland-hemmungslos1.html; logoet er ellers en div.logo, så den gør ingen forskel */
    nav { flex-wrap: wrap; gap: 10px; }  /* menupunkter må ombrydes; 10 px mellemrum (vinder over 5 px ovenfor) */
    .grid { grid-template-columns: 1fr; }  /* kortene ligger i én kolonne på mobil */
}  /* slut på mediaquery */

/* ==========================================================
   ANMELDELSESSIDER (bruges af alle klubanmeldelser)
   ========================================================== */
.article { max-width: 800px; margin: 40px auto; padding: 0 20px; }  /* artikelkolonnen: højst 800 px bred; 40 px op/ned og centreret; 20 px luft i siderne */

.breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 15px; }  /* brødkrummen øverst (fx Udlandet / Tyskland / Klub): lille tekst (ca. 14 px), dæmpet grå, 15 px afstand under */
.breadcrumb a { color: var(--text-muted); }  /* links i brødkrummen er dæmpet grå som resten */
.breadcrumb a:hover { color: var(--accent-gold); }  /* links i brødkrummen bliver orange-guld, når musen er over dem */

.article h1 {  /* hovedoverskriften på en anmeldelse, fx "Angel of Fantasy – München" */
    font-family: 'Playball', cursive;  /* samme skrivskrift som logoet */
    font-weight: normal;  /* ingen fed skrift */
    font-size: 3.2rem;  /* stor overskrift: ca. 51 px */
    line-height: 1.15;  /* tæt linjehøjde, så en overskrift på to linjer ikke får for meget luft */
    color: #ffaa00;  /* varm orange-gul */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);  /* mørk skygge bag teksten (3 px sløring) for læsbarhed */
    margin-bottom: 20px;  /* 20 px afstand under */
}  /* slut på reglen */

.disclaimer {  /* forbeholdsboksen under titlen og etikette-noten */
    background-color: var(--card-bg);  /* mørkegrå kortfarve (massiv) */
    border: 1px solid #2a2a2a;  /* tynd mørk ramme */
    border-radius: 6px;  /* afrundede hjørner */
    padding: 14px 18px;  /* luft indeni: 14 px op/ned, 18 px i siderne */
    margin-bottom: 25px;  /* 25 px afstand under */
    color: var(--text-muted);  /* dæmpet gråtekst */
    font-size: 0.9rem;  /* lille tekst: ca. 14 px */
    font-style: italic;  /* kursiv */
}  /* slut på reglen */

/* Hurtige fakta */
.facts {  /* boksen "Hurtige fakta" */
    background-color: var(--card-bg);  /* mørkegrå kortfarve (massiv) */
    border: 1px solid #2a2a2a;  /* tynd mørk ramme hele vejen rundt */
    border-top: 3px solid var(--accent-gold);  /* tykkere orange-guld streg øverst (overstyrer den tynde ramme foroven) */
    border-radius: 8px;  /* afrundede hjørner */
    padding: 22px 25px;  /* luft indeni: 22 px op/ned, 25 px i siderne */
    margin-bottom: 40px;  /* 40 px afstand under boksen */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);  /* skygge under boksen: 4 px ned, 15 px sløring, 50 % sort */
}  /* slut på reglen */
.facts h2 { font-size: 1.3rem; margin: 0 0 15px; padding: 0; border: 0; }  /* overskriften "Hurtige fakta": ment som lille (1,3rem), 15 px under, ingen luft og ingen streg. OBS: overstyres delvist af .article h2 længere nede (samme vægt, senere vinder), så den får stadig stor skrift, luft over og streg under */
.facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; }  /* listen med fakta lægges i to lige brede kolonner; 16 px mellemrum lodret, 30 px vandret */
.facts dt { color: var(--text-muted); font-size: 0.85rem; }  /* faktaets navn (fx "Parkering"): dæmpet grå og lille (ca. 14 px) */
.facts dd { font-weight: 600; }  /* faktaets værdi: halvfed skrift */
.facts .verdict {  /* rækken med "Samlet dom" nederst i boksen */
    grid-column: 1 / -1;  /* strækker sig over begge kolonner, fra første til sidste kolonnelinje */
    padding-top: 16px;  /* 16 px luft over indholdet */
    border-top: 1px solid #2a2a2a;  /* tynd skillestreg øverst */
}  /* slut på reglen */
.facts .verdict dd { font-size: 1.2rem; color: var(--accent-gold); }  /* værdien i dommen (stjernerne): større (ca. 19 px) og orange-guld */

/* Artikeltekst */
.article h2 {  /* sektionsoverskrifter i anmeldelsen (Beliggenhed, Generelt osv.) */
    color: #ffaa00;  /* varm orange-gul */
    font-size: 2rem;  /* stor overskrift: 32 px */
    line-height: 1.2;  /* tæt linjehøjde */
    margin: 45px 0 15px;  /* 45 px afstand over, 0 i siderne, 15 px under */
    padding-bottom: 6px;  /* 6 px luft mellem teksten og stregen */
    border-bottom: 1px solid #3a1a12;  /* tynd mørk kobberstreg under overskriften */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);  /* mørk skygge bag teksten for læsbarhed */
}  /* slut på reglen */
.article h3 {  /* underoverskrifter i anmeldelsen (fx Ground floor, Kælderen) */
    color: #e0b060;  /* dæmpet guldfarve, lidt mere afdæmpet end h2 */
    font-size: 1.25rem;  /* størrelse 20 px */
    margin: 28px 0 8px;  /* 28 px afstand over, 0 i siderne, 8 px under */
}  /* slut på reglen */
.article section p, .article section li { font-size: 1.05rem; line-height: 1.8; }  /* brødtekst og listepunkter i artiklen: lidt større tekst (ca. 17 px) og meget luftig linjehøjde (1,8) */
.article section p { margin-bottom: 16px; }  /* 16 px afstand under hvert afsnit */
.article section ul { margin: 0 0 16px 22px; }  /* lister: 0 over, 0 til højre, 16 px under og 22 px indrykning til venstre */

.conclusion {  /* konklusionsboksen nederst i anmeldelsen (også "Kommende arrangementer" på Sanana) */
    background-color: rgba(30, 30, 30, 0.5);  /* mørkegrå baggrund, 50 % gennemsigtig, så panelet og baggrunden skinner igennem */
    border: 1px solid #2a2a2a;  /* tynd mørk ramme hele vejen rundt */
    border-left: 4px solid var(--accent-burgundy-hover);  /* tyk lys rød streg i venstre side (overstyrer den tynde ramme dér) */
    border-radius: 6px;  /* afrundede hjørner */
    padding: 22px 25px;  /* luft indeni: 22 px op/ned, 25 px i siderne */
}  /* slut på reglen */
.signature { color: var(--accent-gold); font-weight: 600; margin-top: 5px; }  /* underskriften "M&V": orange-guld, halvfed og 5 px afstand over */
.article .btn { display: inline-block; margin-top: 20px; }  /* knapper i anmeldelsen: opfører sig som en blok i teksten med bredde efter indhold; 20 px afstand over */

@media (max-width: 600px) {  /* reglerne herunder gælder kun på mobil (op til 600 px bredde) */
    .article h1 { font-size: 2.3rem; }  /* mindre hovedoverskrift: ca. 37 px i stedet for 51 px */
    .article h2 { font-size: 1.6rem; }  /* mindre sektionsoverskrifter: ca. 26 px i stedet for 32 px */
    .facts dl { grid-template-columns: 1fr; }  /* fakta lægges i én kolonne i stedet for to */
}  /* slut på mediaquery */

/* ---------- Læsepanel: hele artiklen ligger på en næsten massiv flade ---------- */
.article article {  /* læsepanelet: selve artiklen, der ligger oven på baggrundsbilledet */
    background-color: rgba(14, 14, 14, 0.50);  /* næsten sort baggrund, 50 % gennemsigtig (højere tal = mere dækkende og roligere at læse på) */
    backdrop-filter: blur(4px);  /* sløret baggrundsbillede bag panelet (4 px) */
    border: 1px solid #2a2a2a;  /* tynd mørk ramme */
    border-radius: 8px;  /* afrundede hjørner */
    padding: 35px 40px;  /* luft indeni: 35 px op/ned, 40 px i siderne */
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);  /* skygge omkring panelet: 4 px ned, 25 px sløring, 60 % sort */
}  /* slut på reglen */

.breadcrumb {  /* brødkrummen igen (tilføjer til reglen længere oppe; egenskaberne lægges sammen) */
    display: inline-block;  /* kun så bred som teksten, så baggrunden bliver en lille pille */
    background-color: rgba(14, 14, 14, 0.50);  /* mørk baggrund bag brødkrummen, 50 % gennemsigtig */
    padding: 6px 14px;  /* luft indeni: 6 px op/ned, 14 px i siderne */
    border-radius: 20px;  /* helt runde hjørner = pille */
}  /* slut på reglen */

@media (max-width: 600px) {  /* reglen herunder gælder kun på mobil */
    .article article { padding: 22px 18px; }  /* mindre luft i læsepanelet på mobil: 22 px op/ned, 18 px i siderne */
}  /* slut på mediaquery */

/* ---------- DRIKKEPENGE BOKS ---------- */
.tips-box {
    background-color: var(--card-bg);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 20px;
    margin: 30px 0;
    text-align: center;
}

.tips-box p {
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Særlig MobilePay-knap, der bygger oven på din eksisterende .btn-stil */
.btn-mp {
    display: inline-block;
    background-color: #5a78ff !important; /* !important tvinger farven igennem på mobilen */
    color: #ffffff !important;           /* Tvinger teksten til at forblive hvid */
    padding: 12px 25px;
    border-radius: 50px;
    transition: background-color 0.3s, box-shadow 0.3s;
    text-decoration: none;
    
    /* DISSE LINJER FJERNER MOBILENS EGET DESIGN: */
    -webkit-appearance: none;            /* Fjerner Apple/Safari standard styling */
    -moz-appearance: none;               /* Fjerner Firefox standard styling */
    appearance: none;                    /* Generel nulstilling af mobil-styling */
}

.btn-mp:hover {
    background-color: #445fdb !important;
    box-shadow: 0 0 15px rgba(90, 120, 255, 0.4);
    display: none !important;
}

/* ---------- Støtteboks: QR-kode og MobilePay-knap ---------- */
.qr-wrap { text-align: center; margin-bottom: 15px; }   /* centrerer QR-koden i boksen */
.qr-wrap img {
    display: block;          /* gør billedet til en blok, så det kan centreres */
    margin: 0 auto;          /* centrerer billedet */
    width: 100%;             /* fylder op til max-width */
    max-width: 280px;        /* størrelsen på QR-koden: ret tallet efter smag */
    height: auto;
    border-radius: 8px;
}

@media (min-width: 601px) {                     /* computer og tablet */
    .article .conclusion .btn-mp { display: none; }   /* skjuler knappen */
}

@media (max-width: 600px) {                     /* mobil */
    .qr-wrap { display: none; }                 /* skjuler QR-koden */
}