:root {
     --global-padding: 1em;
}
/* Reset og basis */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 html, body {
    /* Footer kommer ikke højere end bunden af skærmen */
     height: 100%;
     margin: 0;
    /*padding: 0;
    */
     font-size: 18px;
    /* min-height: 100%;
    */
}
/* Selve baggrunden */
 .background-blur {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-image: url('/assets/images/assorted/background.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     filter: blur(15px) saturate(100%);
    /* Slør baggrunden */
     z-index: -2;
}
/* Et mørkt lag ovenpå for kontrast */
 .background-blur::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.4);
    /* Justér gennemsigtighed */
     z-index: -1;
}
 body {
     font-family: 'Arial', sans-serif;
     background-color: #121212;
     color: #e0e0e0;
     line-height: 1.6;
     min-height: 100vh;
    /*min-width: 450px;
    */
    /*padding-top: 80px;
    /* Højde på navbar */
     display: flex;
     flex-direction: column;
    /*padding-bottom: 120px;
    /* højde på afspiller */
}

body.menu-open {
  overflow: hidden;
  height: 100vh; /* for at undgå scroll på mobile Safari */
}


 div#body-container {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}
 main.content {
    /* Key part: Eat the remaining space! */
     flex-grow: 1;
}
 main .home-image {
     max-width: 800px;
     margin-bottom: 2em;
}
 div#body-container footer {
    /*flex-basis: 100px;
    */
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
}
 .column {
     display: flex;
     flex-direction: column;
}
 .page-wrapper {
    /*flex: 1;
    /* Gør at main+footer fylder al vertikal plads */
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}
 body.audio-enabled {
     padding-bottom: 120px;
    /* or whatever the player height is */
}
/* Prevent footer from being hidden behind player */
/* body::after {
     content: '';
     display: block;
     height: 100px;
    /* Same height as audio player 
}
*/
/* Main */
 main {
     max-width: 1300px;
    /*max-width: 960px;
    */
    /*margin: 0 auto;
    */
    /*padding: 2rem 1rem;
    */
    /*padding-bottom: 100px;
    /* Leave room for the fixed player */
     flex: 1;
    /* Footer kommer ikke højere end bunden af skærmen */
}
 .main-content {
    /* max-width: 900px;
     */
     width: 100%;
     margin: 0 auto;
    /*padding: 3rem 1rem;
    */
    /* padding: 0 27px;
    */
     flex: 1 0 auto;
     margin-bottom: 4em;
     padding-left: var(--global-padding);
     padding-right: var(--global-padding);
}
 main, .main-content {
     display: flex;
     flex-direction: column;
    /*text-shadow: 1px 1px 2px black;
     */
}
 .menu-toggle {
     display: none;
    /* Skjul som standard (desktop) */
}
/* Links */
 a {
     color: #facc15;
     text-decoration: none;
     transition: color 0.2s;
}
 a:hover {
     color: #fcd34d;
}
/* Navbar generelt */
 .navbar {
     padding-left: var(--global-padding);
     padding-right: var(--global-padding);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
    /*background-color: blue !important;
    */
    /*background-color: #1f1f1f;
    */
    /*rgba(11, 10, 24, 1)*/
    /*border-bottom: 1px solid #333;
    */
     display: flex;
     justify-content: space-evenly;
     text-transform: uppercase;
    /*background: rgba(9, 9, 9, 0.6);
    */
     background-color: rgba(23,21,28,0.6);
     -webkit-backdrop-filter: blur(20px);
     transition: transform 0.3s ease-in-out;
}
 .navbar.hide {
     transform: translateY(-100%);
     transition: transform 0.3s ease-in-out;
}
 .navbar-inner {
     justify-content: space between;
     width: 100%;
    /*max-width: 960px;
    */
    /*margin: 0 auto;
    */
     padding: 1rem 0rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
    /*flex-wrap: wrap;
    */
}
 .brand {
    /*background-color: green;
    */
}
 .navbar .brand .logo {
     font-size: 1.5rem;
     font-weight: bold;
     color: #e0e0e0;
    /*margin-right: 5em;
    */
}
 .nav-links {
     display: flex;
     list-style: none;
     gap: 2rem;
    /*background-color: blueviolet;
    */
     margin-left: auto;
    /* Right align */
    align-items: center;
}
 .nav-links li {
     position: relative;
}
 .nav-links a, .nav-links .language-switcher {
     color: #e0e0e0;
     
     font-weight: 500;
     display: flex;
}

 .nav-links a, .nav-links {
	padding: 0.5rem;
 }



 .nav-links a:hover, .nav-links a.active, .language-switcher button:hover {
     color: #facc15;
}
 .nav-links .dropdown {
    /*position: absolute;
    */
     top: 100%;
     left: 0;
     opacity: 0;
     visibility: hidden;
    /* pointer-events: none;
    */
     transform: translateY(10px);
     transition: all 0.3s ease;
     flex-direction: column;
     padding: 0.5rem;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     border-radius: 4px;
     z-index: 100;
}
 .has-dropdown > a::after {
     content: " ▾";
     font-size: 0.8em;
     margin-left: 0.3em;
     color: #aaa;
}
/* Sprog-knap og layout */
 .language-switcher {
    /*position: fixed;
     top: 10px;
     right: 10px;
    */
     z-index: 2000;
    /*background-color: yellow;
    */
     display: flex;
     align-items: center;
     height: 100%;
}
 .language-switcher img {
     height: 25px;
}
 .language-switcher button {
    /*margin-left: 0.5rem;
    */
     font-weight: bold;
     font-size: 16px;
     border: none;
     cursor: pointer;
     color: #e0e0e0;
     background-color: initial;
}
 .language-switcher button:hover {
    /*background-color: #444;
    */
}



 .lang-button.active {
     font-weight: bold;
     border: none;
}
/* Dropdown generelt */
 .dropdown {
    /* position: absolute;
    */
     top: calc(100% + 4px);
     left: 0;
     background-color: #1f1f1f;
     box-shadow: 0 4px 6px rgba(0,0,0,0.5);
     border-radius: 4px;
     min-width: 160px;
     padding: 0;
     display: block;
     z-index: 1000;
     list-style: none;
}
 .dropdown li {
     list-style: none;
}
 .dropdown a {
     display: block;
     padding: 0.5rem 1rem;
     margin: 0;
     color: #e0e0e0;
}
 .dropdown a:hover {
     background-color: #2a2a2a;
     color: #facc15;
}
/* Mobil-styles */
 @media (max-width: 1150px) {
     html[lang="da"] .nav-links, html[lang="en"] .nav-links {
         /* overflow: hidden !important;*/
    }
     .navbar {
        /*padding-bottom: 1em;
        */
    }
     div#body-container {
         padding-top: 130px;
    }
     .navbar, .navbar-inner {
         flex-direction: column;
         align-items: flex-start;
    }
     .menu-toggle {
         display: block;
         font-size: 1.5rem;
         background: none;
         border: none;
         color: #e0e0e0;
         cursor: pointer;
    }
     .nav-links {
         max-height: auto !important;
         overflow: hidden;
         max-height: 0;
         display: block;
         text-align: left;
         margin: 0;            /* nulstil margin */
    padding: 0;
         transition: max-height 0.35s ease;
         visibility: hidden;
    }
     .nav-links.show {
         visibility: visible;
    	 /* max-height sættes inline af JS, så ingen fast værdi her */
    }
     .nav-links li {
         width: 100%;
         display: block;
    }
     .nav-links a {
         display: block;
    }
     .dropdown a {
         padding-left: 2rem;
    }
     .dropdown {
         position: static;
         background: transparent;
         box-shadow: none;
         border: 0;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.35s ease;
         padding: 0;                       /* undgå padding der “hopper” */
         /* margin-bottom: 10px;*/
    }
     .has-dropdown.open .dropdown {
         max-height: 1000px;
         padding: 0 !important;
         opacity: 1;
         visibility: visible;
         /*display: block;*/
         margin-top: -11px;
         margin-bottom: 10px;
    }
     .has-dropdown .dropdown {
         /*display: none;*/
         padding-left: 1rem;
    }
     /* Lad JS styre max-height – ingen display:flex her */
    .nav-links .has-dropdown.open ul {
         display: block !important;        /* sikrer normal flow */
     }
     .item {
         flex-direction: column;
         align-items: center;
        /*text-align: center;
        */
         gap: 0 !important;
         margin-bottom: 2.5em !important;
    }
     .item-image img {
         max-width: 100%;
    }
     .item-text h3 {
         line-height: 1.4rem;
    }
     #global-player {
         padding: 0.7rem 0 !important;
    }
    
    .lightbox__nav {
    	display: none;
    }
    
    .lightbox__close {
        display: none;
    }
    
    .lightbox__img {
      max-height: calc(100vh - 100px); /* mindre luft til caption */
    }
    
    .lightbox__stage {
	height: calc(100vh - 180px) !important;
	width: calc(100% - 50px) !important;
    }
    
    main .home-image {
	margin: 0 0 1.5em 0;
    }
    
     .item h3 {
        margin-bottom: 0.4rem;
    }
    
    main.main-content:first-child .section-description {
	margin-bottom: 0 !important;
    }
    
    .item-text h3 {
    	margin-top: 0.5em;
    }
    
    main p {
    	margin-bottom: 0 !important;
    }
    
    .headline {
    	margin-bottom: 2em !important;
    }
    
    .lightbox__nav { 
    	font-size: 36px; 
    	left: 8px; 
    	right: 8px; 
    }

    .lightbox__close { 
    	font-size: 28px; 
    	top: 12px; 
    	right: 12px; 
    }

    h1 {
	font-size: 2rem;
    }
    
    .grid-container {
	/*padding-left: 1.5rem;
        padding-right: 1.5rem;*/
    }
    
    header {
	padding-left: 1.5rem !important;
    }
    
    footer {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
    }
    
    .has-dropdown ul {
      max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    
    .has-dropdown.open ul {
      max-height: 500px; /* Større end den højeste menu */
    }
    
    .nav-links .dropdown {
      padding: 0;
    }
    
    .section-title {
    	font-size: 1.5rem !important;
    }
    


}
/* Desktop dropdown-åbning ved hover */
 @media (min-width: 1150px) {
     .has-dropdown:hover .dropdown {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
         transform: translateY(0);
    }
     div#body-container {
         padding-top: max(110px, 6%);
    }
     .dropdown {
         position: absolute;
         top: calc(100% + 4px);
         left: 0;
         background-color: rgba(18, 16, 27, 0.5);
         backdrop-filter: blur(5px);
    	 box-shadow: 0 4px 6px rgba(0,0,0,0.5);
         border-radius: 4px;
         min-width: 160px;
         padding: 0.5rem 0;
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
         transform: translateY(10px);
         transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
         z-index: 1000;
    }
     .navbar {
         gap: 60px;
         box-shadow: 2px 2px 15px 2px #000;
         height: 82px;
         overflow: visible;
         transition: max-height 0.3s ease;
    }
}
/* Footer */
 .site-footer {
     width: 100%;
     color: #aaa;
     padding: 1.5rem 1rem;
     text-align: center;
     border-top: 1px solid #333;
     font-size: 0.9rem;
    /* margin-top: 4rem;
    */
     position: relative;
    /* or sticky if you want */
     background-color: rgba(31, 27, 46, 0.5);
     margin-top: auto;
}
 .site-footer a {
     color: #c2c2c2;
}
 .site-footer a:hover {
     text-decoration: underline;
}
 #footer-placeholder {
     width: 100%;
}
 .footer-content {
     flex-direction: column;
}
 body.audio-enabled #footer-placeholder {
    /*padding-bottom: 146px;
    /* or whatever height the fixed audioplayer is */
}
/* === Sektion med overskrift, beskrivelse og items === */
 .section-title {
     font-size: 2.5rem;
     text-transform: uppercase;
     font-weight: bold;
    /*margin-bottom: 1rem;
    */
     color: rgba(224, 224, 224, 1);
    /* matcher dine GAFFA-styles */
}
 .section-description {
     /*font-size: 1.3rem;
     line-height: 1.6;*/
     color: rgba(224, 224, 224, 1) !important;
     text-align: left;
}
 main.main-content:first-child .section-description {
     /* margin-bottom: 2.5rem;*/
}
 .item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 2rem;
     gap: 1.5rem;
    /* gap: 1.5rem;
     flex-direction: column;
     */
}
 .item-image {
    /*display: flex;
    */
     position: relative;
     width: 130px;
     height: 130px;
     margin-bottom: 0.5rem;
    /* space mellem cover og titel */
}
 .item .item-image[data-tracks] {
     cursor: pointer;
}
 .item-image img.placeholder {
     border-style: dashed;
}
 .item-image img {
    /* max-width: 100px;
     border-radius: 6px;
     object-fit: contain;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    */
    /*min-height: 100px;
    */
     width: 130px;
     height: 130px;
     object-fit: cover;
     display: block;
     border-radius: 4px;
     z-index: 1 
}
 .item-image:hover img {
    /*opacity: 0.5;
    */
}
 .item-image:hover .overlay {
     opacity: 1;
}
 .item-image .overlay{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
    /*transition: opacity 0.3s ease;
    */
     z-index: 2;
}
 .play-icon {
     color: white;
     font-size: 2rem;
     pointer-events: none;
    /* so the click passes through to .cover-wrapper */
}
 .item-image.bg-black img {
    /*background-color: black;
    */
}
 .item h3 {
     font-size: 1.3rem;
     font-weight: 600;
    /* margin-bottom: 0.4rem;
     */
     color: rgba(218, 218, 218, 1);
}
 .item-text {
     flex-direction: column;
}
 .headline {
     flex-direction: column;
     margin-bottom: 2em;
}
 .role {
    /* font-style: italic;
     */
     margin-bottom: 0.2em;
     text-transform: uppercase;
     font-size: 0.9rem !important;
     color: rgba(218, 218, 218, 1) !important;
     margin-bottom: 0.6em !important;
     display: block;
}
 .item-text h3 {
     font-size: 1.3rem;
     font-weight: 600;
    /* margin-bottom: 0.4rem;
     */
     color: rgba(218, 218, 218, 1);
}
 .item p {
     font-size: 1.1rem;
     line-height: 1.5;
     color: rgba(180, 180, 180, 1);
}
 .item-text p {
     font-size: 1.1rem;
     line-height: 1.5;
     color: rgba(180, 180, 180, 1);
}
 .video-item {
    /* display: flex */
    ;
     align-items: flex-start;
     gap: 2rem;
     margin-bottom: 3rem;
     flex-wrap: wrap;
}
 .video-item .item-image {
    /* width: 250px;
     */
    /*height: auto;
    */
     border-radius: 6px;
     flex-shrink: 0;
}
 .video-item .item-text {
     flex: 1;
     min-width: 280px;
}
 .video-link {
     display: inline-block;
     margin-top: 1rem;
     background-color: #facc15;
     color: #121212;
     font-weight: bold;
     padding: 0.5rem 1rem;
     border-radius: 4px;
     transition: background-color 0.2s;
     width: fit-content;
}
 .video-link:hover {
     background-color: #fcd34d;
}
 .fancybox__container {
     max-width: 90vw !important;
     max-height: 90vh !important;
}
 .fancybox__content {
     max-width: 90vw !important;
     max-height: 90vh !important;
     width: 50vw !important;
     height: 50vw !important;
    /* eller juster efter behov */
}
 .fancybox__iframe {
     width: 100% !important;
     height: 100% !important;
}
 .audio-player {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: #111;
     color: #fff;
     border-top: 1px solid #333;
     padding: 1rem;
     z-index: 1000;
     box-shadow: 0 -2px 10px rgba(0,0,0,0.4);
}
 #global-player {
     -webkit-backdrop-filter: blur(20px);
     background-color: rgba(23,21,28,0.6);
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100vw;
    /* full viewport width */
    /*height: 260px;
    /* example */
    /*background-color: #111;
    /* dark bg */
    /*background-color: #1d2645;
    */
    /*box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
    */
     box-shadow: 2px -2px 15px 2px #000;
     z-index: 1000;
     padding: 1.5rem 0;
}
 #global-player .player-content {
     max-width: 800px;
    /* match your page content max width */
     margin: 0 auto;
    /* center horizontally */
     padding: 0 1rem;
    /* horizontal padding */
     display: flex;
    /*align-items: center;
    */
    /*gap: 4rem;
    */
     color: #eee;
     font-family: sans-serif;
     justify-content: center;
     flex-direction: column;
}
/* ----------- Styles fra gammel website ------------ */
 main ul.styled li::before {
     content: "\2022";
    /* Add content: \2022 is the CSS Code/unicode for a bullet */
     color: red;
    /* Change the color */
     font-weight: bold;
    /* If you want it to be bold */
     display: inline-block;
    /* Needed to add space between the bullet and the text */
     width: 0.5em;
    /* Also needed for space (tweak if needed) */
     margin-left: -0.75em;
    /* Also needed for space (tweak if needed) */
     font-size: 130%;
}
 main .li-header {
     /*font-size: 20px;*/
     display: unset;
}
 main p, .li-header {
     font-family: 'Abel', sans-serif;
    /*max-width: 1000px;
    */
     color: white;
     display: inline-block;
}
 main ul {
     margin-left: 2em;
     margin-top: 0.5em;
}
 main ul li {
     list-style: none;
    /* Remove default bullets */
}
 main ul li p {
     display: block;
}
 main p {
     /* margin-bottom: 1.5em; Har disablet den, fordi den lavede bottom afstand under headlinens description */
}
 main .item {
     margin-bottom: 1.5em;
}
 html.page-releases main p {
     margin-bottom: 0;
}
/* ACCORDIONS */
 .accordion {
     list-style: none;
     padding: 0;
}
 .accordion .toggle {
     width: 100%;
     text-align: left;
     background-color: unset;
     padding: 0.5rem;
     border: none;
     cursor: pointer;
     outline: none;
}
 .accordion .content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease, padding 0.3s ease;
     padding: 0 0.5rem;
}
 .accordion .content.open {
    /*padding: 0.5rem;
    */
}
/* ANIMATIONER */
 .wiggle {
     animation: wiggle 2.5s infinite;
     animation-iteration-count: 1;
}
 .bounceLeft {
     animation: bounceLeft 4s ease-in-out;
     animation-iteration-count: 1;
}
 .bounceRight {
     animation: bounceRight 4s ease-in-out;
     animation-iteration-count: 1;
}
 @keyframes wiggle {
     0% {
         transform: rotate(0deg);
    }
     80% {
         transform: rotate(0deg);
    }
     85% {
         transform: rotate(5deg);
    }
     95% {
         transform: rotate(-5deg);
    }
     100% {
         transform: rotate(0deg);
    }
}
 @keyframes bounceLeft {
     0%, 20%, 50%, 80%, 100% {
         transform: translateX(0);
    }
     40% {
         transform: translateX(-30px);
    }
     60% {
         transform: translateX(-15px);
    }
}
 @keyframes bounceRight {
     0%, 20%, 50%, 80%, 100% {
         transform: translateX(0);
    }
     40% {
         transform: translateX(30px);
    }
     60% {
         transform: translateX(15px);
    }
}
 .fadeInOut {
     opacity: 0;
     animation: fadeFx 5s linear;
}
 @keyframes fadeFx {
    0% { opacity: 0 }
    20% { opacity: 0 }
    30% { opacity: 0 }
    40% { opacity: 0 }
    50% { opacity: 1 }
    60% { opacity: 1 }
    70% { opacity: 0 }
    80% { opacity: 0 }
    90% { opacity: 0 }
    100% { opacity: 0 }

}
 #sync-frankly-screenshot {
     max-width: 320px;
}
 .track-position {
     font-size: 0.85rem;
     color: #aaa;
     margin-bottom: 4px;
     white-space: nowrap;
}
 .progress-wrapper {
     position: relative;
     width: 100%;
     height: 8px;
     background: #eee;
     border-radius: 4px;
     overflow: hidden;
     margin: 4px 0;
}
 .progress-bar-fill {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 0%;
     background-color: #3b82f6;
     transition: width 0.2s ease;
     pointer-events: none;
     z-index: 1;
}
 .seek-bar {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 8px;
     background: transparent;
     position: relative;
     z-index: 2;
     cursor: pointer;
     display: flex;
}
 .seek-bar::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 12px;
     height: 12px;
     background: transparent;
     border: none;
     cursor: pointer;
     margin-top: -4px;
    /* justér for centreret klik */
}
 .seek-bar::-moz-range-thumb {
     width: 12px;
     height: 12px;
     background: transparent;
     border: none;
     cursor: pointer;
}
 #contact-form {
     display: flex;
     flex-direction: column;
     max-width: 400px;
}
 #contact-form textarea {
     margin-bottom: 1em;
}
 #contact-form input, #contact-form textarea, #contact-form button {
     margin-bottom: 1em;
     font-size: 18px;
     border-radius: 5px;
     border-style: none;
     background-color: rgba(218, 218, 218, 1);
}

 #contact-form input, #contact-form textarea {
	padding: 10px;
}

 #contact-form button {
     height: 2em;
     max-width: 100px;
     color: #666;
     cursor: pointer;
}
 #pos-custom-sound-film-1 {
    /* Sidste Time */
     object-position: 0 62%;
}
 #pos-custom-sound-film-2 {
    /* Sneblind */
     object-position: 90% 0;
}
 #pos-custom-sound-film-3 {
    /* Psykologens Dagbog */
     object-position: 21% 0;
}
 #pos-custom-sound-film-4 {
    /* Gasbeholderen */
     object-position: 44% 0;
}
 #pos-custom-sound-film-5 {
    /* Maskespil */
     object-position: 0 20%;
}
 #pos-custom-music-film-1 {
    /* Girls */
     object-position: 0 43%;
}
 #pos-custom-music-film-2 {
    /* Pusher */
     object-position: 0 16%;
}
 #pos-custom-music-film-3 {
    /* Constance */
     object-position: 0 0;
}
 #pos-custom-music-film-4 {
    /* Maskespil */
     object-position: 0 20%;
}

.grid-item .portfolio-logo-1, .grid-item .portfolio-logo-2 {
	position: absolute;
	height: auto;
	object-fit: contain;
	right: 20px;
	bottom: 20px;
	filter: drop-shadow(2px 2px 2px #444) brightness(0.85);
}

.grid-item .portfolio-logo-1 {
	width: 110px;
}

.grid-item .portfolio-logo-2 {
	width: 40px;	
}






/* ---------   GALLERY ----------- */


.photo-gallery { 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
}
.photo-gallery .thumb { 
  cursor:pointer; 
  max-width:200px; 
  height:auto; 
  object-fit:cover; 
  border-radius:4px; 
}

/* Lightbox */
.lightbox {
  position: fixed; /* holder den på hele skærmen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20,20,20,1); /* mørk baggrund */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* sørger for at den ligger øverst */
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  /*background-color: green;*/
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}


.lightbox__stage {
  max-width: 100vw;
  /*max-height: 100vh;*/
  display: flex;
  flex-direction: column; /* caption under billedet */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /*background-color: red;*/
  height: calc(100vh - 170px);
  padding: 0 !important;
  width: calc(100% - 170px);
  position: relative;
  padding: 0px !important;
}

.lightbox__img {
  /* max-width: 100%; */
  /* max-height: calc(100vh - 170px); /* luft til caption */
  /* height: auto;
  width: auto;*/
  object-fit: contain;
  opacity: 0; /* skjult fra start */
  transition: opacity 0.4s ease; /* fade ind */
  height: 100%;
  width: 100%;
}

.lightbox__img.loaded {
  opacity: 1; /* vis efter load */
}

.lightbox__caption {
  margin-top: 12px;
  color: #656565;
  text-align: center;
  font-size: 0.95rem;
  max-width: 90%;
  opacity: 0; /* skjult fra start */
  transition: opacity 0.4s ease 0.2s; /* fade ind lidt forsinket */
  position: absolute;
  bottom: -40px;
  /*background-color: cornflowerblue;*/
}

.lightbox__caption.visible {
  opacity: 1;
}

/* Close button */
.lightbox__close {
  position:absolute;
  top:18px;
  right:18px;
  background:transparent;
  border:0;
  color:#fff;
  font-size:32px;
  cursor:pointer;
  padding:6px 10px;
  line-height:1;
}

/* Nav buttons */
.lightbox__nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  color:#fff;
  font-size:48px;
  cursor:pointer;
  padding:8px 12px;
  user-select:none;
}
.lightbox__nav--prev { left:20px; }
.lightbox__nav--next { right:20px; }

.lightbox__img,
.lightbox__caption {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lightbox__img.visible,
.lightbox__caption.visible {
  opacity: 1;
}
 
 
 /* ----------- GAFFA ---------- */
 
 
 /* Global styling */
 
 
 
 
 /*
 .header-container {
   max-width: 1200px;
   margin: 0 auto;
   color: #f5f5f7;
 }
 
 .header-container h1 {
   font-weight: 700;
   font-size: 2.5rem;
   margin: 0;
   letter-spacing: 0.03em;
 }
 
 
 h1 {
   font-weight: 700;
   font-size: 2.5rem;
   margin: 0;
   letter-spacing: 0.03em;
   color: rgba(218, 218, 218, 1);
 }*/
 
 /* Grid layout */
 .grid-container {
   /*max-width: 1200px;
   margin: 30px auto;
   padding: 0 20px;*/
   width: 100%; 
   display: grid;
   /* Define Auto Row size */
   /*grid-auto-rows: 100px; */
   /*Define our columns */
   grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); 
   grid-gap: 1em;
 }
 
 .grid-container.active {
     padding: 2rem 1rem 4rem 1rem;
 }
 
 /* Grid item (projekt) */
 .grid-item {
   /*background-color: #171b26;*/
   border-radius: 0;
   overflow: hidden;
   /*box-shadow: 0 4px 12px rgb(0 0 0 / 0.7);*/
   text-decoration: none;
   color: #f5f5f7;
   transition: transform 0.25s ease;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   position: relative;
 }
 
 .grid-item:hover,
 .grid-item:focus-visible {
   /*transform: translateY(-2px);*/
   outline: none;
 }
 
 /* Billed-wrapper for fast kvadratisk form */
 .image-wrapper {
   aspect-ratio: 1 / 1;
   width: 100%;
   overflow: hidden;
   position: relative;
   background-color: #000;
 }
 
 .image-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
 
 
 /* Custom positioning of album images inside frame */
 .pos-custom-1 {
     /* Lael Neale */
   object-position: 39% 0;
 }
 
 .pos-custom-2 {
     /* CocoRosie */
   object-position: 63% 0;
 }
 
 .pos-custom-3 {
     /* Garbage */
   object-position: 63% 0;
 }
 
 
 
 /* Zoom-effekt på billedet */
 .grid-item:hover .image-wrapper img,
 .grid-item:focus-visible .image-wrapper img {
   transform: scale(1.05);
 }
 
 /* Tekst under billedet (bruges ikke pt.) */
 .caption {
   padding: 1rem 1.25rem;
   font-size: 1rem;
   font-weight: 500;
   color: #d1d5db;
   flex-grow: 1;
 }
  
 /* Tekst under billedet */
 .text-content {
   padding: 1rem 0 1.4rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
 .text-content h2 {
   font-size: 1.4rem;
   font-weight: 600;
   margin: 0;
   color: rgba(218, 218, 218, 1);
   line-height: 1.8rem;
 }
 
 .text-content p {
   margin: 0;
   font-size: 1.1rem;
   color: rgba(180, 180, 180, 1);
   line-height: 1.4;
 }
 
 .text-content span {
     font-style: italic;
 }
 
  .text-content .publication {
    margin-bottom: -9px;
 }
 
 .text-content .publication, .text-content small {
   font-size: 0.85rem;
   color: #888;
 }