/* normalize css includeret i head file */
/*=========================
  :ROOT (STANDARD )
  ========================= */
:root {
    /* --- BAGGRUNDE (MØRKT TEMA) --- */
    --bg-primary: #242424;          
    --bg-secondary: #2a323d;        
    
    /* --- BRANDING & KNAPPER --- */
    --brand-color: #f8c008;         
    --btn-clr: #28a745;             
    --btn-clr-hover: #218838;       
    
    /* --- TEKST --- */
    --text-primary: #f0f0f0;        
    --text-secondary: #a0aab5;      
    
    /* --- MAPPER / IKONER --- */
    --folder-clr: #ffa726;          
    --folder-clr-hover: #f57c00;    

    /* --- STRUKTUR, RADIUS & AFSTAND --- */
    --site-margin: 20px;
    --site-padding: 15px;

    --space-xs: 0.25em;
    --space-sm: 0.5em;
    --space-md: 1em;
    --space-big: 1.5em;
    --space-lg: 2em;

    --radius-sm: 0.25em;
    --radius-md: 0.5em;
    --radius-lg: 1em;

  /* --- TYPOGRAFI --- */
      /* En topmoderne system-stack: Bruger altid den nyeste, flotteste sans-serif på enheden */
    --font-headings: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Typografi med clamp(min, lufthavn, max) */
    --fs-body: clamp(1rem, 1.5vw + 0.8rem, 1.2rem);
    --fs-h1: clamp(3.4rem, 4vw + 1rem, 4.6rem);
    --fs-h2: clamp(1.3rem, 3vw + 1rem, 2.2rem);
    /* Nye niveauer */
    --fs-h3: clamp(1.2rem, 2vw + 1.3em, 1.77rem);
    --fs-h4: clamp(1.1rem, 1.5vw + 1rem, 1.5rem);
    --fs-h5: clamp(1rem, 1vw + 1rem, 1.3rem);
    --fs-h6: clamp(0.9rem, 0.5vw + 1rem, 1.1rem);
    
   /* Font-weights - Strømlinet og læsevenligt */
    --fw-light: 300;   /* Bruges KUN til store H1/H2 overskrifter, hvis de skal være elegante */
    --fw-normal: 400;  /* Standard brødtekst - absolut vigtigst for læsbarheden */
    --fw-medium: 500;  /* Perfekt til menuer, knapper eller underoverskrifter (H3/H4) */
    --fw-bold: 700;    /* Til stærke overskrifter og **fed** tekst */

    --line-height:1.5;
    /* --- EFFEKTER (OPTIMERET TIL MØRK BAGGRUND) --- */
    --shadow-soft: 6px 6px 12px rgba(147, 145, 145, 0.8);
    --shadow-strong: 6px 6px 12px rgba(0, 0, 0, 0.5); /* Kulsort, dyb skygge */
    
    /* Gradient 1 er her tilpasset din nye natteblå, så den fader smukt ind */
    --gradient-1: linear-gradient(135deg, #1e242c, #2a323d, #3b4654);
    --gradient-2: linear-gradient(135deg, #b22222, #f1c40f); /* Kina vibe? 😉 */
    --gradient-3: linear-gradient(135deg, #0066cc, #00ccff); /* Grækenland vibe? 🇬🇷 */
}

/* ============================================
   2. GLOBAL RESET & BOX-SIZING (Fundamentet støbes)
   ======================================== */
html {
    font-size: 100%; 
    scroll-behavior: smooth;
    box-sizing: border-box; 
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    /* Fjern 'font: inherit;' herfra – det kan drille dine overskrifter og inputs! */
}
/* ===============================================
   3. BASE STYLES (Byggepladsen)
   ========================================= */
body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--line-height, 1.6);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    text-align: left;
    overflow-x: hidden; 
    overflow-wrap: break-word; 
}



/* NY SMART REGEL */
img, figure {
    max-width: 100%;
    display: block;
    margin: 0 auto; /* Nulstil som standard, så slideren er fri! */
    padding: 0;
    z-index: 0;
}

/* Giv KUN automatisk luft top/bund, når billedet optræder inde i en artikel/tekstside */
main p img, 
article img, 
.indhold img {
    margin: 1.5em auto; 
}

/* reset links og formularer */
a {
    text-decoration: none;
    color: inherit;
}

input,
button,
textarea,
select {
    font: inherit;
}

main {
    padding: 0 1em;
    margin: 0;

    /* NØGLEN: Brug Flexbox på forælderen til at centrere barnet */
    display: flex;
    flex-direction: column;
    /* stabler indholdet vertikalt */
    align-items: center;
    /* Centrerer indholdet (herunder .grid-section) horisontalt */
}

section {
    padding: var(--space-md) 0;
    margin: var(--space-md) 0;
}

/* ==========================================================================
   1. FÆLLES REGLER FOR ALLE HEADINGS (Nulstilling & Arv)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--text-primary);
    font-weight: var(--fw-normal);
    line-height: 1.2;
    margin: 0;
    padding: 0;
}
/* ==========================================================================
   2. INDIVIDUELLE HEADINGS (Dine specifikke scenarier)
   ========================================================================== */

/* SCENARIE 1: H1 (Står alene under top-header) */
h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-light);
    text-transform: uppercase;
    text-align: center;
    background-color: var(--color-white-off);
    opacity: 0.8;
    max-width: min(90vw, 1600px);
    margin: var(--space-md) auto; /* Lidt luft top og bund – centreret horizontalt */
}

/* SCENARIE 2: H2 (Øverst i en div - div'ens padding klarer toppen) */
h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-normal);
    color: var(--brand-color);
    text-align: center;
    margin-top: 0;       /* Ingen top-margin, */
    margin-bottom: 0.5em; /* Lidt luft i bunden */
}
h3 {
   font-size:var(--fs-h3) ;
     font-weight: var(--fw-normal);
    color: var(--color-text-primary);
    text-align: left;
    margin-top: 0;       /* Ingen top-margin, så den ikke slås med div'ens padding */
    margin-bottom: 0.4em; /* Lidt luft i bunden ned til teksten */
    padding-top:1em;
}
/* SCENARIE 3: H3, H4, H5, H6 (Midt inde i tekststykker) */


 h4 {
   font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-sm);
}

h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-light);
    padding:0 0;
    margin: 0 0;
}
/* ======
   LEHOLT MASKINRUM - MÅLRETTET BRØDTEKST (Vinder over globalt reset) MEN MARGIN-BOTTOM VIRKER IKKE ####
   ============================================== */
p {
    display: block !important;
    margin-bottom: 0 !important;
    margin-top: 1.25em !important; /* Tvinger browseren til at give en flot, proportional linjes afstand */
}
    
ol,
ul {
    margin-left: 0;

    line-height: var(--line-height);
}

ul li {
    list-style: square;
}

ol li,
ul li {
    margin: 0 0;
    padding-left: 0;
    font-size-adjust: inherit;

}

/* standard link m hoover ...*/
a {
    color: var(--color-text);
    word-break: break-all;
    text-decoration: underline;
}


/* Fjern almindelig hover-effekt fra dine specifikke menuklasser og knapper */
a:hover:not(.navbar-item a, .img-folder, .btn, .btn--cta, .site-title,prev, next)  {
    background-color: var(--brand-color);
    color: #222;
    text-decoration: underline;
}



a:hover img {
    box-shadow: 0.3em 0.3em 0.3em #999;
    scale: 1.05;
    /* bund , højre , blur */
}


/* standard botton (Placeres i Components afsnittet) */
.btn {
    /* Nu er dette REN STYLING - ALT det ovenstående er fjernet */
    display: block;
    width: 100%; 
    max-width: 400px;
    margin: 20px auto;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) auto;
    border-radius: var(--space-md);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;

    /* DEFINERER FARVER og BORDERS */
    border: 1px solid var(--color-neutral-accent);
    /* Standard Border */
    color: var(--color-text-primary);
    /* Standard Tekstfarve */
    background-color: var(--btn-clr);
    /* Standard Baggrundsfarve */
     
}

.btn:hover {
    background-color: var(--btn-clr-hover);
    /* Hover Baggrundsfarve */
    color: var(--color-text-dark);
    font-weight: 500;
    box-shadow: var(--shadow-soft);
     background-image:var(--gradient-2);
}

/* Placeret i dit Components-afsnit efter din .btn regel */

.btn.btn-form {
    /* Layout fra gamle linje 1767 - sikrer at den er centreret og har størrelse */
    display: block;
    width: min(300px, 400px);
    margin: 1em auto;
    /* Centrerer knappen */
    padding: 0.4em 2em;
    font-size: 1.1em;
    font-weight: bold;

    /* Farver og Styling (Nyt og Korrekt) */
    background-color: var(--color-brand-accent);
    /* Hvid/Lys baggrund */
    color: var(--color-text-dark);
    /* Mørk tekst */
    border: none;
    /* Fjerner border, som var i den gamle kode */
    border-radius: 2em;
    outline: none;
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn.btn-form:hover {
    background-color: var(--color-success);
    /* Bruger den grønne success farve */
    color: var(--color-text-dark);
    /* Sørger for, at teksten forbliver læsbar */
    transform: scale(1.05);
    box-shadow: var(--shadow-hover);
}


.btn:active {
    transform: translateY(0.1em);
    /* BRUG VARIABEL I STEDET FOR #00406c */
    background-color: var(--color-accent-primary);
    /* Alternativt en mørkere variant */
}

/* Placeres i dit Components afsnit, EFTER din .btn regel */
/* anvendes i heor sektion og på andre sider til call to action knapper */
.btn--cta {
    /* GENERELT UDSEENDE for ALLE CTA knapper */
    background-color: var(--color-brand-primary);
    /* DEN RØDE FARVE */
    color: var(--btn-text-cta);
    /* Sort tekst (husk at fjerne den gamle variabel!) */
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 600;
    border-color: var(--color-brand-primary);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) auto;
    border-radius: 25rem;
    /* Den runde kant */
    /* VIGTIGT: Tving understregningen fra */
    text-decoration: none;
    /* VIGTIGT: Fjern alle layout-egenskaber (display, margin, padding, font-size) herfra! */
    /* Hover-effekt */
    transition: background-color 0.3s ease-in-out,
        color 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;

    /* Fade-in flow */
    opacity: 0;
    animation: fadeIn 2.5s ease-in-out forwards;
    animation-delay: 2.5s;
    /* tredje trin */
}

.btn--cta:hover {
    background-color: var(--color-brand-accent);
    color: var(--color-text-contrast);
    /* Husk at rette tekstfarven her også */
    box-shadow: 0 12px 6px -6px #333;
}

.inline {
    display: inline-block;
    margin-right: var(--space-md);
    margin-top: var(--space-md);
}

/* Ny Utility: Sikrer at knapperne fungerer i et Flex-layout */
.flex-share {
    /* Tillader knappen at krympe ind i den tilgængelige plads */
    flex-shrink: 1;

    /* MAGIEN: Disse to linjer sikrer ligelig bredde! */
    flex-grow: 1;
    /* Giver knappen lov til at vokse og tage al resterende plads */
    flex-basis: 0;
    /* Fortæller Flexbox at starte med 0 bredde, så de vokser ligeligt */

    /* VIGTIGT: Fjerner standard browser-bredde som kan forhindre krympning */
    min-width: 0;
}

.inline-flex {
    display: inline-flex;

}

.inline-block {
    display: block;
    margin: 1.5em auto;
}


/* #########UTILITIES SMÅ BYGGEKLODSER ##################*/
/* ###      UTILITIES BOX ####*/
/* --- Det nye systems vigtigste utility-klasse --- */
.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

.text-center {
    text-align: center !important;
}
/* ### under hero section på default ###*/
.border-left-right {
    padding: var(--space-lg);
    border-left: var(--space-md) solid var(--color-brand-primary);
    border-right: var(--space-md) solid var(--color-brand-primary);

}

.border-me {
    border: solid 1px var(--text-primary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);

}

/* farve utilities til bokse og baggrunde */
/* Baggrunds-klasser */


/* Shadows */
.box-shadow,
.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.box-center,
.box-center-bred {
    width: min(90%, 40em);
    /* 90% min og max er 40rem */
    height: auto;
    padding: var(--space-lg);
    margin-inline: auto;
    margin-bottom: var(--margin-lg);
    background-color: var(--color-bg-surface);

}

.box-center-bred {
    width: min(100%, 60em);
}

/* ==========================================
   UNIVERSEL UTILITY: PDF LINK-LISTE 
   (Rører IKKE ved normale lister på sitet)
   ========================================== */

/* Vi rammer KUN lister der specifikt har klassen .pdf-links */
/* CONTAINEREN (ul) - Gør listen vandret og fjerner firkanten */
/* CONTAINEREN (ul) - Fjerner den stædige firkant og gør listen vandret */
/* CONTAINEREN - Gør listen vandret og fjerner firkanten */
ul.pdf-list {
    display: flex!important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 1.5em !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 1em 0 !important;
}

ul.pdf-list li {
    list-style: none !important;
    list-style-type: none !important;
}

/* SELVE LINKET */
ul.pdf-list li a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: var(--txt-clr, #fff) !important;
    padding: 0.5em 0.8em !important;
    background-color: var(--bg-secondary, #f4f4f4) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
}

/* STYLING AF FIL-IKONET (Gør det rødt som standard) */
ul.pdf-list li a i {
    color: #cc0000 !important; /* Rød klassisk PDF-farve */
    margin-right: 0.6em !important;
    font-size: 1.2em !important; /* Gør ikonet en smule større end teksten */
    transition: color 0.2s ease-in-out !important;
}

/* HOVER-EFFEKT (Skifter baggrund til din brand-farve) */
ul.pdf-list li a:hover {
    background-color: var(--brand-color, #cc0000) !important;
    color: #222 !important;
}

/* Tvinger ikonet til at blive hvidt, når vi hover over knappen */
ul.pdf-list li a:hover i {
    color: #ffffff !important;
}


/* ########### COMPONENTS LAYOUT - CONTAINER  ETC  ############### */
section {
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    margin-inline: auto;
    /* venstre - højre marig ? centrer men vi kan sætte top og bund seperat */
    border: solid 0px green;
}

/*  anvendes på Kina nyheder , booking form   */
.full-width-banner {
    width: 100%;
    max-width: 100vw;
    padding: 2em 0;
    box-sizing: border-box;
    z-index: 0;
    margin: 2em auto;
    overflow-x: hidden;
    background-color: var(--color-accent-secondary-value);
}

/* ==========================================================================
   STANDARD ARTIKEL GRID (Til Tekst + Slider i hver sin div)
   ========================================================================== */
/* Den fleksible artikelside - laver kolonner efter antallet af div'er! */
/* Den ægte, fleksible Leholt-container (Præcis som du kender den!) */
.grid-container,
.grid-section {
    display: grid;
    
    /* 1. DIN EGEN GENIALE FORMEL: Laver præcis de kolonner, du indsætter div'er til! */
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 25%, 500px), 1fr));
    
    /* 2. Sørger for, at tekst-kasser og slider-kasser IKKE strækker sig vertikalt */
    align-items: start; 
    
    /* 3. Nulstiller alle mærkelige rækkehøjder, så der ikke opstår tom luft */
    grid-auto-rows: min-content;
    
    /* Dine klassiske Leholt-variabler til luft og margin */
    gap: var(--space-lg);
    max-width: min(90vw, 1600px);
    margin: 2em auto;
    overflow: hidden; 
}
/* ==========================================================================
   MOBIL-OPTIMERING (Gør siden responsiv)
   ========================================================================== */
@media (max-width: 900px) {
    .grid-container,
    .grid-section {
        /* På mindre skærme (tablets/mobil) dumper slideren pænt ned under teksten */
        grid-template-columns: 1fr; 
        gap: var(--space-md);
    }
}

/*  fotoalbum */
.grid-photoalbum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 25%, 500px), 1fr));
    /* mere fleksibel */
    /*grid-auto-rows: auto;*/
    gap: var(--space-lg);
    /* lidt luft mellem bokse */
    max-width: min(90vw, 1600px);
    margin: 2em auto;
    overflow: hidden; /* Tvinger browseren til at beregne højderne korrekt (BFC) */
   
  
}

.grid-container > div { 
    padding: var(--space-md); 
}

/* NEDENSTÅENDE ER GEMINIS løsning på billeder hardcoded som ikke udfyldte diven ----Tvinger alle figurer i griddet til at slippe ALT indbygget browser-margin og padding */


/* Sørg for at billedet indeni også lystrer */
.grid-container figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.branding-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}


footer {
    position: relative;
    bottom: var(--space-md);
    padding: var(--space-md) 0;
    height: auto;
    font-size: clamp(0.8rem, 2vw, 1.0rem);
    /* min size , best and max)*/
    color: var(--text-secondary);
    text-align: center;
    margin-top: auto;
    /* to keep footer at bottom of page*/
}


/* || hero for MOBILE DEVICES - 
SE HERO FOR DESKTOP i media q */
.hero {
    position: relative;
    width: 100%;
    min-height: auto;
    overflow: hidden;
    
}

.hero-image {
    height: auto;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;  /* tilføj denne */
   
}

.hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0;     /* nulstil den globale margin */
    padding:0;
}

.hero-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #e7e6e6;
    padding: 0;
    z-index: 2;
}

/* DESKTOP - tekst i midten som nu */
@media (min-width: 768px) {
/* ------------------------------------------------------------------
   HERO SIKRING: ELIMINERER DEN SORTE KANT I TOPPEN
   ------------------------------------------------------------------ */
.hero {
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important; /* Dræber evt. sort baggrund bag containeren */
}

.hero-image {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; /* Dræber al tekst-luft i containeren */
}

.hero-image picture, .hero-image video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}
.hero-img {
    display: block !important; /* Tvinger billedet væk fra inline-tekst-mode */
    width: 100%;
    height: auto;
    margin-top: -1px !important; /* Trækker billedet 1px op for at lukke pixel-afrundingsfejl */
}
    .hero-text {
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.hero-text > h1 {
    font-size: clamp(2.2rem, 10vw, 8.0rem);
    color: rgba(255, 255, 255, 0.90);
    /* hvid med 85% opacitet */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9);
    font-weight: 700;
    background: none;
    /* sikrer ingen baggrund */
    border: none;
    margin-bottom: 0;
    min-width: 100vw;
    animation: fadeIn 2s ease-in-out;

    opacity: 0;
    animation: fadeIn 2.5s ease-in-out forwards;
    animation-delay: 0.5s;
}
/* under hero overskriften på forsiden */
.hero-text > p {
    font-size: clamp(1rem, 4vw, 2.6rem);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    /* Murerens præcise luft: Ingen top-margin, men 1.2em i bunden! */
    margin-top: 0 !important;
    margin-bottom: 1.2em !important;
    opacity: 0;
    animation: fadeIn 2.5s ease-in-out forwards;
    animation-delay: 1.5s;
    /* undertekst kommer senere */
}

/*pil under cta btn på hero sektion */
.scroll-cue {
    display: block;
    margin-top: 0;
    line-height: 0;
    /* afstand fra knappen */
    text-align: center;
    /* centrer under knappen */
    color: rgba(255, 255, 255, 0.9);
    font-size: 60px;
    /* gør pilen tydelig (20–32px) */
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 3s;
    /* kommer ind efter knappen */
}

.scroll-cue i {
    animation: bounce 2s infinite;
}

/* Definerer animationen: Knappen starter usynlig (opacity: 0) og glider lidt op */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ############## END HERO SECTION ############ */

/* Pil-ikoner og delingsikoner */
i.fa-angle-down,
i.fa-angle-up,
i.fas.fa-chevron-down,
i.fas.fa-chevron-up,
i.fas.fa-share-nodes {
    color:var(--text-primary);
    font-size: 1.0em;
}

/* Hover-effekt */
.fas:hover,
.fab:hover,
i:hover {
    color: var(--brand-color);
    transition: color 0.2s ease;
}



/* CHAPCHA error */
.captcha-error {
    width: 100%;
    height: 100vh;
    background: URL("https://images-assets.nasa.gov/image/PIA15985/PIA15985~large.jpg?w=768&h=707&fit=crop&crop=faces%2Cfocalpoint")top left no-repeat;
    background-color: #fff3f3;
    border: 2px solid #ff4d4d;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

.captcha-icon {
    width: 120px;
    margin-bottom: 10px;
    margin:0 auto;
}

.error-msg,
.fejltekst {
    color: #f20808;
    font-size: 2.4rem;
    font-weight: var(--fw-normal);
}

/* ########## end CHAPHTA #############*/


/* centrering af indhold i divs mv */
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
    /* min-height: 200px; */
    /* justér efter behov */
}



/* #### FOLDER IMG AND FILES  ###  */
.wrapper {
    /* indeholder hele fso og knapperne */
    height:auto;   /*afstand mellem btn og billederne */
    margin: 0 auto;
    padding: 0.5em;
    max-width: min(100vw, 1600px);
     border:solid 1px var(--color-secondary);
}
.wrapper-btn {
    display: flex;
    flex-wrap: wrap;       
    /* Så de hopper ned på næste linje på mobilen */
    justify-content: center; 
    /* Centrerer hele flokken af knapper */
    gap: 2em;             
    /* Her styrer du afstanden mellem dem! */
    margin: 2em 0;
    padding: 0;
}

/* holder tre btn samlet i photoalbum */
.btn.inline {
    display: inline-block;
    margin: 0; 
    /* Fjerner margin: auto fra den almindelige .btn */
    width:auto;
}

.selected-folder,
.selected {
    /* navn på den åbne img folder etc */
    text-transform: uppercase;
    font-weight:var(--fw-bold);
}

/* gør at mapperne ligger i række og wrapper - til ny linje */
.show-folders {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 0 0;
    gap: 0.6rem 1rem; /* Styring af luft: 0.6rem vertikalt (mobil-liste) og 1rem horisontalt */
}

a.img-folder {

    font-size: clamp(1.2rem, 4vw, 1.5rem);
    /*styrer størrelsen af mappen */
    padding: 0;
    text-decoration: none;
    font-weight:var(--fw-normal);
    /*margin: 0 0.6em 0.4em 0;*/
    white-space: nowrap; /* Ikon og tekst bliver ALTID på samme linje */
    gap: 0.4em; /* Luft mellem det gule ikon og mappenavnet */
}

a.img-folder:hover {
   text-decoration: none;
    color: var(--folder-clr-hover);
}

/* Fælles styling for ikonerne */
.img-folder i {
    font-size: 1.5em;
    /* Justér størrelsen */
    margin-right: 0.5em;
    vertical-align: middle;
    /* Farven på dit mørke tema (f.eks. grå) */
    color: var(--folder-clr);
}

/* 1. Standardtilstand: Vis kun det lukkede ikon */
.img-folder .icon-open {
    display: none;
}

/* 2. Hovertilstand: Skift ikoner */
.img-folder:hover .icon-closed {
    display: none;
    /* Skjul lukket ikon ved hover */
}

.img-folder:hover .icon-open {
    display: inline-block;
    /* Vis åbent ikon ved hover */
    /* Du kan tilføje en highlight-farve ved hover */
    color:var(--folder-clr-hover);
}

/* til go back btn img-slide , img browse  på china-photo.asp */
.flex-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    max-width: 500px;

}



.avatar-container {
    float: right;
    margin-left: 20px;
    margin-bottom: 15px;
    max-width: 200px;
    width: 30%;
}

.avatar-img {
    width: 100%;
    /* Sætter et jernhårdt 3:4 portræt-format (f.eks. 150px bred og 200px høj) */
    aspect-ratio: 3 / 4; 
    
    /* Tvinger billedet til at fylde rammen ud uden at blive strukket skævt */
    object-fit: cover;   
    
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* KODESIKKERHED: Nulstil float på efterfølgende elementer (f.eks. en footer eller ny sektion) */
.clearfix::after, 
main::after {
    content: "";
    clear: both;
    display: table;
}


/* ########## STYLE BILLEDER , EMBED, PICTURE etc ################ */


/* placed in foot.asp --- */
.youtube_link {
    display: flex;
    justify-content: center;
    max-width: 140px;
    border: solid 1px #333;
    border-radius: 1em;
    padding: 0.5em 1em;
}

/* photos i folders - photoalbum.asp  */

figcaption {

    font-size: clamp(0.6rem, 10vw, 1.0rem);
    line-height: 1.3;
    background-color: rgba(130, 129, 129, 0.6);
    color: #eeeded;
    font-weight:var(--fw-light);
    padding: 0.5em;
    margin:1em 0 0 0;
    height: auto;
}

figcaption.top-right {
    /* på store billeder */
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    font-size: calc(0.7rem + 1.2vw);
    line-height: 100%;
    background-color: rgba(147, 146, 146, 0.2);
    color: #fff;
}


figcaption.bottom-right {
    position: absolute;
    bottom: 20%;
    left: 0;
    right:10%;
    font-size: clamp(0.7em, 1vw, 2.0rem);
    text-align: right;
    background: rgba(204, 202, 202, 0.5);
    width: 100vw;
    color: #1e1e1e;
    font-weight: var(--fw-normal);
    padding: 0.8em;
    margin: 0 4em 0 0;
    transition: all 0.6s ease;

    height: auto;
    z-index: 100;
}

figcaption.bottom-left {
    position: relative;
    bottom: 0;
    left: 0;
    background: rgba(181, 181, 181, 0.5);
    max-width: 100%;
    color: rgb(74, 73, 73);
    font-weight: var(--fw-bold);
    padding: 0.8em;
    margin: 0 0;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    height: auto;
    z-index: 100;
}

/* ==========================================================================
   LEHOLT MASKINRUM - GO TO TOP TREKANT (100% HOVER-GARANTI)
   ========================================================================== */
.go-to-top {
    position: relative;
    top: 0;
    display: block;
    clear: both;
    margin: 1em auto;
    width: 0;
    height: 0;
    border-left: 1.2em solid transparent;
    border-right: 1.2em solid transparent;
    /* Grundfarven på trekanten */
    border-bottom: 1.6em solid var(--btn-clr); 
    cursor: pointer;
    transition: border-color 0.2s ease; 
    /* Gør farveskiftet dejlig blødt */
}

.go-to-top:hover {
    background: transparent !important;      
    /* Dræber spøgelses-firkanten! */
    background-color: transparent !important;
    /* Totalt gennemsigtig baggrund */
    
    /* Vi skifter KUN farve på selve rammebunden (trekanten) */
    border-bottom-color: var(--brand-color) !important;
/* ################ 6 ANIMATION KEYFRAMES ###########*/
}

/* ################ 6 ANIMATION KEYFRAMES ###########*/

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}



@keyframes slidedown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slidedown {
    animation: slidedown 0.8s ease-out;
}

@keyframes zoomin {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.zoomin {
    animation: zoomin 0.6s ease-out;
}

/* kher kombineret både slidedown og zoomin */
@keyframes zoomSlide {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.zoomslide {
    animation: zoomSlide 0.8s ease-out;
}


@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* fades for hero text oerskrift */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        /* subtil bevægelse op */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fading animation TIL HVAD ???????*/
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

/* ######### SLUT KEYFRAMES ########*/
/* ##############end animations ########### */



a.youtube-link {
    background: #fafaf9;
    background: URL("upload/grafik/youtube.svg") center left no-repeat;
    padding-left: 36px;
}

.youtube-player {
    position: relative;
    cursor: pointer;
    max-width: 560px;
    /* tilpas efter behov */
    margin: 1em 0;
}

.youtube-player img {
    width: 100%;
    display: block;
}

.youtube-player .play {
    height: 72px;
    width: 72px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/e/e4/YouTube_play_button_icon_%282013-2017%29.png') no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    /* halvdelen af bredden */
    margin-top: -36px;
    /* halvdelen af højden */
    pointer-events: none;
    /* så klik går igennem til div */
}

  
/* Slideshow  */

figure>ul>li {
    /* position:relative;  */
    /* top:1%;	 */
    display: block;
    list-style-type: none;
    background: #fff;
    width: 100%;
    padding: 0;
    margin: 0 0 0 0;
}




/* Knapperne */
.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.3em;
    font-size: 2.5em;
    font-weight: var(--fw-bold);
    color:var(--clr-primary);
    background-color: transparent;
    cursor: pointer;
    z-index: 10;
}

.prev {
    left: clamp(-1em, 4vw, 4em);
}

.next {
    right: clamp(-1em, 4vw, 4em);
}
.prev:hover,.next:hover{
       background: transparent !important;      
    /* Dræber spøgelses-firkanten! */
    background-color: transparent !important;
    /* Totalt gennemsigtig baggrund */
    
    /* Vi skifter KUN farve på selve rammebunden (trekanten) */
    border-bottom-color: var(--brand-color) !important;
/* ################ 6 ANIMATION KEYFRAMES ###########*/
}

.obs {
    background: var(--btn-bg);
    font-weight: var(--fw-normal);
    /*text-transform: uppercase;*/
    color: var(--color-text-primary);
    font-size: inherit;
}

.obs:hover {
    background: var(--btn-bg-hover);
    /*box-shadow: 5px 5px 10px rgba(183, 183, 181, 0.983);*/
    color: #fff;
}




/* nyt dec 2025 cookiemeddelelse  ligger i foot */
.cookie-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #222;
    color: #fff;
    padding: 0.5em 1em;
    display: none;
    z-index: 9999;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    height: 40px;
}

.cookie-container.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-container a {
    color: #f39c12;
    margin: 0 0.5em;
    text-decoration: underline;
}

.cookie-btn {
    margin-left: 0.8em;
    border: none;
    color: #fff;
    padding: 0.3em 0.8em;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
}

.cookie-btn.accept {
    background: #27ae60;
    /* grøn */
}

.cookie-btn.reject {
    background: #e84118;
    /* rød */
}

/* ############## contact-save.asp ################# */
/* POPUP BAGGRUND - Låst til skærmen og centreret */
.popup-overlay {
    position: fixed !important;  /* Låser boksen til selve skærmbilledet, IKKE dokumentet */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;     /* Bruger 100% af skærmens bredde (Viewport Width) */
    height: 100vh !important;    /* Bruger 100% af skærmens højde (Viewport Height) */
    background-color: rgba(0, 0, 0, 0.6) !important; /* Mørk gennemsigtig baggrund */
    z-index: 99999 !important;   /* Tvinger den foran ALT andet på siden (inkl. menuer og sliders) */
    
    /* Centrerings-magien via Flexbox */
    display: flex !important;
    align-items: center !important;     /* Lodret centrering */
    justify-content: center !important;  /* Vandret centrering */
}

/* SELVE POPUP BOKSEN (Sikrer at den ikke stikker af) */
.popup-box {
    background-color: var(--bg-primary, #ffffff) !important;
    padding: 2.5em !important;
    border-radius: 8px !important;
    max-width: 400px !important;
    width: 90% !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    position: relative !important; /* Holder indholdet på plads */
    animation: popupFadeIn 0.3s ease-out !important;
}
/* Hvis URL'en skifter væk fra status=tak, eller hvis popuppen måles mod et target, fjerner vi den */
.popup-overlay:target {
    display: none !important;
}
/* ============================= */
/* COMPONENTS                    */
/* ============================= */

/* FontAwesome generel styling */
i.fas,
i.fab {
    color: var(--color-accent);
    font-size: 1.2em;
    /* hold neutral størrelse */
    background: none;
}

/* Accordion-specifikke ikoner */
.accordion i.fas.fa-chevron-down,
.accordion i.fas.fa-chevron-up {
    color: #333;
    font-size: 1em;
}



/* END DEFAULT MOBILE FIRST STYLING */

/* === Tablet styles === */


@media (min-width: 768px) and (max-width: 2424px) {

    /* Responsiv justering */

    :root {
        --padding-lg: 3rem;
        --margin-lg: 3rem;
        --gap-lg: 3rem;
    }

  

    .branding-container {
        display: flex;
        align-items: center;
        gap: var(--gap-sm);

    }

    header .logo {
        max-width: 80px;
        margin-top: 1.0em;
        border: none;
    }

    header .logo:hover {
        transform: rotate(-15deg);
    }

    header .sitename {
        margin-top: 0;
        text-decoration: none;
    }

   

    main {
        padding: 0 1em;
        margin: 100px 0 0 0;
        /* NØGLEN: Brug Flexbox på forælderen til at centrere barnet */
        display: flex;
        flex-direction: column;
        /* stabler indholdet vertikalt */
        align-items: center;
        /* Centrerer indholdet (herunder .grid-section) horisontalt */
    }
}

/* Den universelle kasse - uændret og strækkende */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap:var(--space-lg);
    margin: 40px auto 0 auto;
    width:90%;
    max-width: 1800px;
    align-self: stretch;
    justify-content: center;
   
}

/* Det generiske kort - Nu sat op til intern centrering */
.card {
    flex: 1 1 calc(33.333% - 25px);
    min-width: 250px;
    max-width: 350px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color:#444;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;    /* NØGLE: Centrerer billedet horisontalt */
    padding: 10px;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow:var(--shadow-soft);
}

.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
}

/* Kortets krop - Nu en vertikal flexbox der centrerer teksten */
.card-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;    /* NØGLE: Centrerer h3, p og btn horisontalt */
    text-align: center;     /* NØGLE: Centrerer selve tekstlinjerne */
    flex-grow: 1;
    width: 100%;            /* Sikrer at kroppen fylder hele kortets bredde */
}

/* Bruger dine egne mursten: --fs-h3 */
.card-body h3 {
    
    font-size: var(--fs-h3); 
    color:#222;
}

.card-body p {
    margin: 0 0 15px 0;
    flex-grow: 1;
}

/* Sørger for at din eksisterende .btn står centreret i bunden */
.card .btn {
    margin-top: auto;       /* Skubber knappen i bunden hvis teksten varierer */
    align-self: center;     /* Tvinger knappen til at stå centreret */
    color: white;           /* Tvinger tekstfarven til hvid (eller hvad din normale knap-tekst er) */
    text-decoration: none;  /* Fjerner standard understregning */
}

@media (max-width: 800px) {
    .card {
        max-width: 100%;
    }
}