: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('/images/hero.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     filter: blur(10px) 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.6);
    /* 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 */
}
 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: 2em 0;
}
 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 */
}
 .nav-links li {
     position: relative;
}
 .nav-links a, .nav-links .language-switcher {
     color: #e0e0e0;
     padding: 0.5rem;
     font-weight: 500;
     display: flex;
}
 .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-block {
     display: none;
    /* Skjul alle .lang-blocks som udgangspunkt */
     opacity: 0;
     visibility: hidden;
     height: 0;
     overflow: hidden;
     transition: opacity 0.3s ease;
    /* outline: 2px dashed red;
    /* Debug */
}
 .lang-block.grid-layout {
     display: grid;
}
 html[lang="da"] .lang-block[lang="da"], html[lang="en"] .lang-block[lang="en"] {
     display: flex;
    /* eller block, afhængig af element */
     opacity: 1;
     visibility: visible;
     height: auto;
     overflow: visible;
}
 html[lang="da"] .lang-block[lang="en"], html[lang="en"] .lang-block[lang="da"] {
     display: none;
}
 .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: 950px) {
     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: 0;
         display: block;
         transition: max-height 0.4s ease-in-out;
         flex-direction: column;
         width: 100%;
        /*background-color: #1f1f1f;
        */
        /*margin-top: 1rem;
        */
         height: 520px;
         gap: 0;
         visibility: hidden;
    }
     .nav-links.show {
         max-height: 1000px;
        /* Nok til at vise hele menuen */
         opacity: 1;
         visibility: visible;
    }
     .nav-links li {
         width: 100%;
         display: block;
    }
     .nav-links a {
         display: block;
    }
     .dropdown a {
         padding-left: 2rem;
    }
     .dropdown {
         position: static;
         background-color: transparent;
         box-shadow: none;
         border: none;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out;
    }
     .has-dropdown.open .dropdown {
         max-height: 1000px;
         padding: 0 !important;
         opacity: 1;
         visibility: visible;
         display: block;
         margin-top: -12px;
    }
     .has-dropdown .dropdown {
         display: none;
         padding-left: 1rem;
    }
     .nav-links .has-dropdown.open ul {
         display: flex;
    }
     .item {
         flex-direction: column;
         align-items: center;
        /*text-align: center;
        */
         gap: 0 !important;
         margin-bottom: 2em !important;
    }
     .item-image img {
         max-width: 100%;
    }
     .item-text h3 {
         line-height: 1.4rem;
    }
     #global-player {
         padding: 0.7rem 0 !important;
    }
}
/* Desktop dropdown-åbning ved hover */
 @media (min-width: 950px) {
     .has-dropdown:hover .dropdown {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
         transform: translateY(0);
    }
     div#body-container {
         padding-top: max(110px, 8%);
    }
     .dropdown {
         position: absolute;
         top: calc(100% + 4px);
         left: 0;
         background-color: rgba(18, 16, 27, 0.5);
         -webkit-backdrop-filter: blur(5px);
         filter: blur(10px) 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;
    }
}
/* 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(218, 218, 218, 1);
    /* matcher dine GAFFA-styles */
}
 .section-description {
     font-size: 1.3rem;
     line-height: 1.6;
     color: rgba(180, 180, 180, 1);
     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;
}
 .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;
}
 .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: 2rem 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;
}
 main ul li {
     list-style: none;
    /* Remove default bullets */
}
 main ul li p {
     display: block;
}
 main p {
     margin-bottom: 1.5em;
}
 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;
     margin-top: 2em;
}
 #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%;
}