/* Global Box-Sizing Reset */
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Device Detection CSS Variables */
html[data-device="mobile"] {
    --current-device: mobile;
}

html[data-device="desktop"] {
    --current-device: desktop;
}

/* Breakpoint CSS Variables */
html[data-breakpoint="mobile-small"] {
    --current-breakpoint: 426px;
}

html[data-breakpoint="mobile"] {
    --current-breakpoint: 699px;
}

html[data-breakpoint="tablet-small"] {
    --current-breakpoint: 880px;
}

html[data-breakpoint="tablet"] {
    --current-breakpoint: 1280px;
}

html[data-breakpoint="desktop"] {
    --current-breakpoint: 1920px;
}

/* Datum mittig anzeigen */
.date-center {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    display: block;
    color: var(--background-color-light)
}
/* Event Card Styles */
.event-card {
    background: var(--background-color-light);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(38,59,29,0.12);
    padding: 32px;
    margin: 32px auto;
    max-width: 600px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.event-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(38,59,29,0.10);
}

.event-details {
    flex: 1;
}

.event-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--SRLB-green2);
    margin-bottom: 12px;
}

.event-date, .event-location, .event-organizer, .event-tags, .event-participants, .event-contact {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--SRLB-green);
}

.event-description {
    margin-bottom: 16px;
    color: #333;
}

.event-link {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 18px;
    background: var(--background-srlb-dark-green);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s;
}
.event-link:hover {
    background: var(--SRLB-green2);
}

a {
    color: var(--SRLB-green2);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

/*
a:after {
    content: "»";
    text-decoration: none;
    vertical-align: bottom;
    font-size: 0.6em;
    margin-left: -8px;
}
*/

/* Gargle-Fonts einbinden */
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Bd.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Bd It.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Cd Bd.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Cd Bd It.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Cd It.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Cd Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Ex Bd.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Ex Bd It.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Ex It.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Ex Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gargle';
    src: url('gargle/Gargle Rg It.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
    /* Schriftart pagkaki-regular einbinden */
    @font-face {
        font-family: 'Pagkaki';
        src: url('pagkaki-regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Grandstander';
        src: url('Grandstander-clean.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
    }

    @font-face{
    font-family: "Assembler";
    src: url("Assembler/7e715d320197f7cd469d2b931ec6d916.eot");
    src: url("Assembler/7e715d320197f7cd469d2b931ec6d916.eot?#iefix")format("embedded-opentype"),
        url("Assembler/7e715d320197f7cd469d2b931ec6d916.woff")format("woff"),
        url("Assembler/7e715d320197f7cd469d2b931ec6d916.woff2")format("woff2"),
        url("Assembler/7e715d320197f7cd469d2b931ec6d916.ttf")format("truetype"),
        url("Assembler/7e715d320197f7cd469d2b931ec6d916.svg#Assembler W00 Regular")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
   }

   @font-face {
    font-family: 'SomeTimeLater';
    src: url('Some_Time_Later.otf') format('opentype');
   }


h1, h2, h3, h4, h5, h6 {
    color: var(--SRLB-green2);
    font-family: 'SomeTimeLater', 'Roboto', sans-serif;
    font-weight: bold;
    margin: 20px 0;
    text-transform: uppercase;
}

body {
    font-family: 'Futura', 'Roboto', sans-serif;
}

.footer-icon {
    color: var(--background-color-light); /* Facebook-Blau */
    transition: color 0.2s;
    vertical-align: middle;
}
.footnav-link:hover .footer-icon {
    color: var(--background-srlb-dark-green);
}
main, header, footer {
    max-width: 2050px;
    min-width: 300px;
}
/* Footer Navigation horizontal */
#footnavi {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
}

#footnavi-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#footnavi-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.footnav-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
  /*  padding: 4px 8px; */
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}
:root {
    --background-color: #c39406cc;
    --background-color-light: #fff8dc;
    --background-srlb-yellow: #ffd862;
    --background-srlb-yellow-websicheraberanders: #ffcc66;
    --background-srlb-trumpet-yellow: #cc9900;
    --background-srlb-dark-green: #263b1d;
    --background-srlb-very-dark-green: #191f0bcc;
    --SRLB-green: #263b1d;
    --SRLB-green2: #2f3f1f;
    --SRLB-red-org: #e24332;
    --SRLB-green-org-notpic: #51803b;
    --SRLB-green-org: #4f7e2f;

}

body {
    background-color: var(--background-srlb-very-dark-green);
    font-size: 14pt;
    line-height: 2em;
    color: #111;
    margin: auto;
    padding: 0;
    max-width: 2050px;
    min-width: 300px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

}


nav {
    margin: 0;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
}

nav a:hover {
    color: var(--background-srlb-very-dark-green);
}

.srlb-icon:hover {
    filter: brightness(1) drop-shadow(0 0 8px var(--SRLB-green2));
    transform: scale(1.08) rotate(-5deg);
    transition: all 0.2s;
    cursor: pointer;

}

.navbar-list {
    display: flex;
    justify-content: left;
    align-items: center;
    /* gap: 2rem; */
    padding: 0rem 2em 8em 2em;
    margin: 0;
    list-style: none;
}

/* Hero Section Styles ausgelagert */
.hero-section {
    position: relative;
    min-height: 60vw;
    overflow: hidden;
}
.hero-schriftzug {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 60vw;
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 120px;

}

.hero-image-img {
    width: 100%;
}

.countdown-container {
    background: rgba(0,0,0,0.6);
    border-radius: 16px;
    padding: 2rem 3rem;
    margin-bottom: 2rem;
/*    box-shadow: 0 4px 24px rgba(0,0,0,0.2); */
    color: #fff;
}
.countdown-container h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
    line-height: 1.0em;
}

.ticket-container h2 {
    font-size: 3rem;
    margin-bottom: 0rem;
    line-height: 0.4em;
}

.countdown-container h2  {
    font-size: 3rem;
    margin-bottom: 0rem;
    color: var(--background-srlb-yellow);

}

.left-info a {
    color: var(--background-srlb-yellow);
}
.left-info a:hover {
    color: var(--background-srlb-trumpet-yellow);
}


#countdown {
    font-size: 2.5rem;
    font-family: 'Eras Bd',sans-serif;
    letter-spacing: 2px;
}
.countdown-date {
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

.date-day, .date-month {
    font-size: 2em;
}

.date-year {
font-size: 2.3em;
line-height: 0.5em;
}

.ticket-container {
/*     background: rgba(0,0,0,0.6); */
    border-radius: 16px;
/*    padding: 2rem 3rem;
    margin-bottom: 2rem;
    */
/*     box-shadow: 0 4px 24px rgba(0,0,0,0.2); */
    color: #fff;
}

.ticket-container:hover,
.ticket-container:focus-within {
   filter: brightness(1) drop-shadow(0 0 8px var(--SRLB-green2));
    transform: scale(1.08) rotate(0deg);
    transition: all 0.2s;
    cursor: pointer;

}

.cdright {
    position: absolute;
    bottom: 15px;
/*    left: calc(70vw + 100px); */
    right: calc(25vw - 320px);

    transform: rotate(6deg);
    -webkit-transform: rotate( 6deg);
    z-index: 20;
/*    padding: calc(60px + 2rem) 50px 40px 35px; */
}


.tickets-btn {
    /* display: inline-block; */
    background: rgba(0,0,0,0.6);
    /* background: var(--background-srlb-trumpet-yellow); */
    color: var(--background-srlb-dark-green);
    font-size: 2rem;
    padding: 3rem 3rem;
    border-radius: 32px;
    text-decoration: none;
   /* box-shadow: 0 32px 42px rgba(0,0,0,0.6); */
    display: inline-block;
    /* transition: all 0.3s ease; */
    transition: background 0.2s;
    background: url('../images/Ticket_gelb.svg') no-repeat center/contain;
    width: 100%;
}

.tickets-btn:hover {
    transform: scale(1.05);
}

/* Kalender-Icons klein untereinander */
.calendar-options-small {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.calendar-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--background-srlb-yellow);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.calendar-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.calendar-icon::after {
    content: attr(data-label);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--background-srlb-yellow);
    color: #000;
    padding: 5px 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-weight: 600;
    z-index: 1000;
    line-height: 1em;
}

.calendar-icon:hover {
    background: var(--background-srlb-yellow);
    color: var(--background-srlb-dark-green);
    transform: scale(1.1);
}

.calendar-icon:hover::after {
    opacity: 1;
}

.tickets-btn:hover {
    color: var(--SRLB-red-org);
}

.cd {
    position: absolute;
    bottom: 10px;
    left: calc(0vw);
    transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    z-index: 20;
   /* padding: calc(60px + 2rem) 50px 40px 35px; */
   width: 300px;
   overflow: hidden;
}

.cd:hover {
   filter: brightness(1) drop-shadow(0 0 8px var(--SRLB-green2));
    transform: scale(1.08) rotate(0deg);
    transition: all 0.2s;
    cursor: pointer;
    width: 1200px
}

/* left-info und right-info nebeneinander */
.row {
    width: 1200px;
    overflow: hidden;
    white-space: nowrap;
}
.left-info, .right-info {
    display: inline-block;
    vertical-align: top;
    width: 320px;
    min-width: 0;
    white-space: normal;
    padding-left: 20px;
}
.right-info {
    overflow: hidden;
    line-height: 1.5em;
}

.navbar-row, .footer-row {
    display: flex;
    justify-content: right;
    gap: 2rem;
    margin: 0;
    list-style: none;
}  
.navbar-row {
    align-items: center;
}  

.navbar-left, .footer-left {
    display: block;
    justify-content: left;
    align-items: center;
    gap: 2rem;
    margin: 0px auto 0px 0px;
    list-style: none;
}
.navbar-right, .footer-right {
    display: block;
    justify-content: right;
    align-items: center;
    gap: 2rem;
    margin: 0;
    list-style: none;
}.navbar-row, .footer-row {
    display: flex;
    justify-content: right;
    gap: 2rem;
    margin: 0;
    list-style: none;
}

.navbar-row {
    align-items: center;
}

.footer-left, .footer-right {
    padding-top: 6rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 30%;
    font-size: 1.2rem;
    color: var(--background-color-light);
    list-style-type: none;
    text-align: left;
}

.footer-left ul, .footer-right ul {
    list-style-type: none;
}

.band-liste {
    font-size: 2rem;
    list-style-type: none;
    padding-left: 20px;
    margin: 0;
    color: var(--background-color-light);
}

.event-address, .event-time, .event-email {
    font-size: 1.5rem;
    color: var(--background-color-light);
}

.band-liste a {
    color: var(--background-color-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.band-liste a:hover {
    color: var(--background-srlb-trumpet-yellow);
}

.date-btn {
    background: rgba(0,0,0,0.4);

   /* background: var(--background-srlb-trumpet-yellow); */
    color: #111;
    font-size: 2rem;
    padding: 0.5rem 0.0rem 1rem 4rem;
    border-radius: 32px;
    text-decoration: none;
   /* box-shadow: 0 32px 42px rgba(0,0,0,0.6); */
    margin-bottom: 0.7rem;
    transition: background 0.2s;
/*    background: url('../images/date_ph_green.svg') no-repeat center/cover; */
    width: 360px;
}

.location-details {
    line-height: 2.5rem;
}

.location-details a {
    color: var(--background-srlb-yellow);
    font-weight: 500;
    transition: color 0.2s;
}

.location-details a:hover {
    color: var(--background-srlb-trumpet-yellow);
    text-decoration: none;
}

.hero-image-bg {
    position: absolute;
    top: 3em;
    left: 0;
/*    width: 100vw; */
    width: 100%;
/*    height: 100%; */
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    background: none;
}

.hero-video {
    width: 100vw;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
 /*   min-height: 60vh; */
/*    background: #000;*/
}

.container {
    margin: auto;
    overflow: hidden;
}

header {
    color: #ffffff;
    text-align: center;
}

main, header, footer {
    background: var(--background-srlb-yellow);
}
main {
    margin-top: -10px;
    margin-bottom: -10px;
}

main .content {
    padding: 50px;
}

footer {
    background: var(--background-srlb-yellow);
    color: #ffffff;
    text-align: center;
    position: relative;
    bottom: 0;
}

footer .hero-text {
    font-size: small;
    color: var(--background-srlb-dark-green);
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    font-weight: normal;
}

.hero-image
{
    background-image: url('../images/Oben.svg');
    height: 300px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.footer-hero-image
{
   /* background-image: url('../images/footer-hero.png'); */
    background-image: url('../images/UntenKanten2050.svg');
    height: 320px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.palme {
    width: 7%;
    font-size: 50px;
    color: white;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -5%);
    max-width: 300px;
}

.nach_palme {
    font-size: 50px;
    color: white;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -5%);
    width: 100%;
    max-width: 580px;
}
 #weblogo::before {
   content: url('../images/web.svg'); 
     filter: brightness(1);
     margin-top: 1rem;
 }

 #twitterlogo::before {
   content: url('../images/twitter.svg'); 
     filter: brightness(1);
 }

 #fblogo::before {
  content: url('../images/fb.svg'); 
    filter: brightness(1);
 }

 #youtubelogo::before {
  content: url('../images/YouTube.svg');
    filter: brightness(1);
 }

 #maillogo::before {
  content: url('../images/email2.svg');
    filter: brightness(1);
 }

#presselogo::before {
  content: url('../images/Presseinfo.svg');
    filter: brightness(1);
}

#instagramlogo::before {
   content: url('../images/instagram.svg');
     filter: brightness(1);
 }

#twitterlogo::before,
#fblogo::before,
#youtubelogo::before,
#maillogo::before,
#presselogo::before,
#instagramlogo::before {
    display: inline-block;
    height: 24px;
    width: auto;
    vertical-align: baseline;
    margin-right: 4px;
    margin-bottom: 2px;
    object-fit: contain;   
}

#twitterlogo:hover::before,
#fblogo:hover::before,
#youtubelogo:hover::before,
#maillogo:hover::before,
#presselogo:hover::before,
#instagramlogo:hover::before,
.footnav-link:hover {
    filter: brightness(0.2);
}

 main .content, .band-carousel, .zwei-button-likedivs {
/*
    background-color: var(--background-color-light);
    margin: 70px;
    border-radius: 50px;
    */
    margin: 30px auto;
    width: 80%;
    max-width: 1800px;
    padding: 50px;
    background-color: var(--background-color-light);
    border-radius: 10px;
    box-shadow: 5px 8px 32px rgba(38,59,29,0.30);
} 

.zwei-button-likedivs {
    background-color: var(--background-srlb-dark-green); 
}

section {
    background-color: var(--background-srlb-yellow);
}

.palme-icon {
    height: 70px;
    margin: 10px 0px;
}

.srlb-icon {
    height: 50px;
    margin-top: 2em;
}

.ticket-container:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding-bottom: 57%;
    z-index: -1;
}


@media (min-width: 1800px) {
/*     main, header, footer, section {
        width: 71%;
        margin: -1px auto;
    }
 */
}

/* Responsive CSS werden in separaten Dateien geladen: tablet.css, mobile.css, responsive.css */

.zero-height-separator {
    height: 0px;
    margin: 0;
    padding: 0;
}

.hero-section {
    line-height: 3em;
}

.burger-menu-btn {
    display: none;
}
#mobileMenu {
    display: none;
}

/* Mobile/Tablet Navigation */
.navbar, .hero-image-bg-mobile {
    display: none;
}

/* Desktop Navigation */
.navbar-top {
    position: fixed;
    width: 100%;
    height: 300px;
    z-index: 998;
    background-image: url('../images/ObenKanten2050.svg');
    background-repeat: repeat-x;
    background-position: center top;
    background-size: cover;
    max-width: 2050px;
    margin: 0px auto;
    pointer-events: none;
}

.navbar-top .navbar-row,
.navbar-top .navbar-list,
.navbar-top a,
.navbar-top button {
    pointer-events: auto;
}