body{
    margin: 0;
    overflow-x: hidden;
    
}

html{
    scroll-behavior: smooth;
}

:root {
    --primary-color: #403088;
    --background-color: #f3f3f3;
    --secondary-color: #EDEBF5;
    --accent-color: #D5B56E;
    --white: #ffffff;
    --black: #1E1E1E;
    
    
    --border-radius: 5px;
    --box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
    
    --spacing-16: clamp(0.5em, 0.75em + 0.5vw, 1.25em);
    --spacing-4:  calc(0.25 * var(--spacing-16)); /*4px*/ 
    --spacing-8:   calc(0.5 * var(--spacing-16));  /*8px*/
    --spacing-12:   calc(0.75 * var(--spacing-16)); /*12px*/
    --spacing-24:   calc(1.5 * var(--spacing-16)); /*24px*/
    
    
    --spacing-32:   calc(2 * var(--spacing-16));    /*32px*/
    --spacing-48:   calc(3 * var(--spacing-16)); /*48px*/
    --spacing-72:  calc(4.5 * var(--spacing-16)); /*72px*/
    
    
       --p: clamp(0.9rem, 1vw + 0.5rem, 1rem);  /* min: 14px (~0.875rem), fluid: 1vw + 0.5rem, max: 1.5rem (~24px) */


    /* min: 0.75rem (~12px), fluid: 1vw + 0.5rem, max: 1.25rem (~20px) */                      /*16px*/ 
    --h6:  calc(1.25 * var(--p));   /*20px*/ 
    --h5:   calc(1.5 * var(--p));  /*24px*/
    --h4:   calc(2 * var(--p));  /*32px*/
    --h3:   calc(2.5 * var(--p));   /*40px*/
    --h2:   calc(3 * var(--p));     /*48px*/
    --h1:   calc(6 * var(--p));     /*64px*/


}

:target {
    scroll-margin-top: 144px; /* Ändere diesen Wert entsprechend deiner Bedürfnisse */
}





@font-face {
  font-family: 'Futura';

  src: local('FONT'),
        url('FONT/Futura/FuturaMedium.woff2') format('woff2'),
        url('FONT/Futura/FuturaMedium.woff') format('woff'),
        url('FONT/Futura/FuturaMedium.ttf') format('ttf'),
        url('FONT/Futura/FuturaMedium.eot') format('eot');
    
}

@font-face {
  font-family: 'Jost';

  src: local('FONT'),
        url('FONT/Jost/Jost-Light.woff2') format('woff2'),
        url('FONT/Jost/Jost-Light.woff') format('woff'),
        url('FONT/Jost/Jost-Light.ttf') format('ttf');

    
}



@font-face {
  font-family: 'Inter';
  src: local('FONT'),
        url('FONT/Inter/InterRegular.woff2') format('woff2'),
        url('FONT/Inter/InterRegular.woff') format('woff'),
        url('FONT/Inter/InterRegular.ttf') format('ttf'),
        url('FONT/Inter/InterRegular.eot') format('eot');
}

@font-face {
  font-family: 'Jadyn';
  src: local('FONT'),
        url('FONT/Jadyn/JadynMaria.woff2') format('woff2'),
        url('FONT/Jadyn/JadynMaria.woff') format('woff'),
        url('FONT/Jadyn/JadynMaria.ttf') format('ttf'),
        url('FONT/Jadyn/JadynMaria.eot') format('eot');
}

h1 {
    
    font-size: var(--h1);
    font-family: "jost", Helvetica, sans-serif;
    line-height: 1.2;
    margin-block-end: 0;
    margin-block-start: 0;
}


h2 {
    
    font-size: var(--h2);
    font-family: "jost", Helvetica, sans-serif;
    line-height: 1.2;
    margin-block-end: 0;
    margin-block-start: 0;

}

.caption{
  font-size: var(--h5);
    font-family: "inter";
    color: var(--black);
    font-weight: 100;
    
}

h3 {
    
    font-size: var(--h3);
    font-family: "jost", Helvetica, sans-serif;
    line-height: 1.2;
            margin-block-end: 0;
    margin-block-start: 0;
    margin-bottom: 0.5em;
    color: var(--primary-color);

}

h4 {
    
    font-size: var(--h4);
    font-family: "jost", Helvetica, sans-serif;
    line-height: 1.2;
            margin-block-end: 0;
    margin-block-start: 0;

}




h5 {
    
    font-size: var(--h5);
    font-family: "jost", Helvetica, sans-serif;
    line-height: 1.2;
    margin-block-end: 0;
    margin-block-start: 0;

}



h6 {
    
    font-size: var(--h6);
    font-family: "jost", Helvetica, sans-serif;
    line-height: 1.2;
    margin-block-end: 0;
    margin-block-start: 0;

}

p{
    
    font-size: var(--p);
    color: var(--black);
    font-family: "Inter", Helvetica, sans-serif;
    line-height: 1.8;
    margin-block-end: 0;
    margin-block-start: 0;
    
   } 
    
    
/* Header */   




.underline {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: var(--accent-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    white-space: nowrap;
}

.subline{
    font-family: inter;
    font-size: var(--h5);

    
}


.container {
  background-color: var(--white);
  font-size: var(--p);
  font-family: "Inter", Helvetica, sans-serif;
  height: 74px;
  width: 100%;
  z-index: 999;
  position: fixed;
  box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
}

.navbar {
  display: flex;
  align-items: center; /* Zentriert den Inhalt vertikal */
  justify-content: space-between; /* Logo und Hamburger-Menü trennen */
  height: 100%;
  width: 90%;
  margin: auto;
}

.IsabellaEdelMuseumLogo {
  height: 74px;
  margin-left: 0;
}

.IsabellaEdelMuseumLogo:hover {
  transform: scale(1.01);
  transition: 0.3s;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 24px;
  cursor: pointer;
  z-index: 1001;
}

.hamburger div {
  background-color: var(--primary-color);
  height: 4px;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active .line1 {
  transform: rotate(45deg) translate(5px, 9px);
}

.hamburger.active .line2 {
  opacity: 0;
}

.hamburger.active .line3 {
  transform: rotate(-45deg) translate(5px, -9px);
}

/* Fullscreen-Dropdown-Menü */
.navbar ul {
  display: none;
  flex-direction: column;
  justify-content: center; /* Vertikale Zentrierung der Menüpunkte */
  align-items: flex-end; /* Links ausgerichtet */
  position: fixed;
  top: 0;
  right: 0;
  width: 30vw;
  height: 100vh;
  background-color: var(--black);
  padding: 0;
  margin-top: 74px;
  box-shadow: var(--box-shadow);
  z-index: 1000;



}

.navbar ul.show {
  display: flex; /* Flexen, wenn das Hamburger-Menü aktiviert wird */
    
}

.navbar ul li {
  list-style: none;
  font-size: var(--p);
  
  text-align: right; /* Text linksbündig ausrichten */
    margin-right: 5vw;
    padding-bottom: var(--spacing-32);
        transform: translateY(-24px);

}

.navbar ul li a {
  text-decoration: none;
  color: var(--white);
}

.navbar ul li a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--accent-color); /* Hauptfarbe */
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.navbar a.active {
  text-decoration: underline;
  text-decoration-color: var(--accent-color); /* Hauptfarbe */
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  color: var(--accent-color); /* Optional: Farbe des aktiven Links */
}










/* Hero-Startseite Slider */ 

.body-grid-start {
    display: grid;
    grid-template-areas: 
        "header header header header header header"
        "hero hero hero hero hero hero"
                "kunst-slider kunst-slider kunst-slider kunst-slider kunst-slider kunst-slider"
        "teaser teaser teaser teaser teaser teaser"
        "section section section section section section"

        "footer footer footer footer footer footer";

}

.body-grid-content {
    display: grid;
    grid-template-areas: 
        "header header header header header header"
        "hero hero hero hero hero hero"

        "section-content section-content section-content section-content section-content section-content"
        "teaser teaser teaser teaser teaser teaser"
                "kunst-slider kunst-slider kunst-slider kunst-slider kunst-slider kunst-slider"


        "footer footer footer footer footer footer";

}

.body-grid-content-map {
    display: grid;
    grid-template-areas: 
        "header header header header header header"
        "hero hero hero hero hero hero"

        "section-content section-content section-content section-content section-content section-content"
        "interactive-map interactive-map interactive-map interactive-map interactive-map interactive-map"




        "footer footer footer footer footer footer";

}

.body-grid-content-ticket {
    display: grid;
    grid-template-areas: 
        "header header header header header header"
        "hero hero hero hero hero hero"

        "section-content section-content section-content section-content section-content section-content"
        "ticket ticket ticket ticket ticket ticket"
        "kunst-slider kunst-slider kunst-slider kunst-slider kunst-slider kunst-slider"


        "footer footer footer footer footer footer";

}

#hero {
    grid-area: hero;
    margin-top: 96px;

}


/* Endlos-Slider */

.carousel-container {
  position: relative;
  width: 100%; 
  overflow: hidden; 

}

.hero-section-container{
    position: relative;
  width: 100%; 
  overflow: hidden; 
    
}

.carousel {
  display: flex;
  transition: transform 0.3s ease-in-out; 
    margin-top: 60px;
}

.carousel a {
z-index: 9999;
width: 100%;

}

.hero-section {
    
display: flex;
  transition: transform 0.3s ease-in-out; 
    margin-top: 60px;
}

.carousel-slide1, .carousel-slide2, .carousel-slide3 {
  min-width: 100%;
  height: 75vh; 
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.hero-section-kuenstlerinnen-img{
    background-image: url(IMG/KuenstlerinnenHero.webp);
    min-width: 100%;
  height: 50vh; 
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
background-attachment: fixed;

}

.hero-section-gruenderin-img{
    background-image: url(IMG/StartseiteHeroSliderGruenderin.webp);
    min-width: 100%;
  height: 50vh;

  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
background-attachment: fixed;


}

.hero-section-impressum-img{
    background-image: url(IMG/ImpressumHero.webp);
    min-width: 100%;
  height: 50vh; 
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
background-attachment: fixed;

}

.hero-section-tickets-img{
    background-image: url(IMG/TicketsHero.webp);
    min-width: 100%;
  height: 50vh; 
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
background-attachment: fixed;

}

.hero-section-museumscafe-img{
    background-image: url(IMG/StartseiteHeroSliderMuseumscafe.webp);
    min-width: 100%;
  height: 50vh; 
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
background-attachment: fixed;

}

.hero-section-raeume-img{
    background-image: url(IMG/RaemeHero.webp);
    min-width: 100%;
  height: 50vh; 
  display: flex;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
background-attachment: fixed;
    background-position: right;

}


.carousel-slide1 {
background-image: url(IMG/StartseiteHeroSliderGruenderinSW.webp);
}

.carousel-slide1:hover {

    cursor: pointer;
    transition: 1s;
    transform: scale(1.01);
    background-image: url(IMG/StartseiteHeroSliderGruenderin.webp);
}

.carousel-slide2 {
  background-image: url('IMG/StartseiteHeroSliderRaeumeSW.webp');
}

.carousel-slide2:hover {

    cursor: pointer;
    transition: 1s;
    transform: scale(1.01);
    background-image: url('IMG/StartseiteHeroSliderRaeume.webp');
}

.carousel-slide3 {
  background-image: url('IMG/StartseiteHeroSliderMuseumscafeSW.webp');
}

.carousel-slide3:hover {

    cursor: pointer;
    transition: 1s;
    transform: scale(1.01);
    background-image: url('IMG/StartseiteHeroSliderMuseumscafe.webp');
}

.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-color);

  color: white;
  border: none;
  padding: var(--spacing-16);

}

.prev-btn:hover {
;
  background-color: var(--accent-color);
    transition: 0.3s;

  cursor: pointer;
}

.prev-btn {
  left: 0;
    border-radius: 0 5px 5px 0;
}

.next-btn {
  right: 0;
    border-radius: 5px 0 0 5px;
}

.next-btn:hover {
;
  background-color: var(--accent-color);
    transition: 0.3s;

  cursor: pointer;
}

/* Dot Navigation */
.dot-navigation {
    background-color: var(--background-color);
    padding: 8px;
  text-align: center;


}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--white);
    
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
}

.dot.active {
  background-color: var(--primary-color);
}





.heroheadline-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr;

color: var(--white);
    margin-top: -52px;


}

.heroheadline-box{
grid-area: 1 / 1 / 2 / 13;

}


.heroheadline {
    display: inline-block;
    background-color: var(--primary-color);
    padding-right: 5vw;
    padding-left: 5vw;
    white-space: nowrap;
    
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);   
}




.SlideLink {
display: block;
  width: 100%;
  height: 100%;
  text-decoration: none; 
  color: inherit; 
}

.teaser {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 24px;

    grid-area: teaser;
}

.ticket {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 24px;

    grid-area: ticket;
    margin-bottom: var(--spacing-72);
}

.teaser-bg {
grid-area: 1 / 1 / 2 / 13; 
background-color: var(--secondary-color);
}

.teaser-text-left{
    
    grid-area:  1 / 3 / 2 / 7;
    padding-top: var(--spacing-72);
    padding-bottom: var(--spacing-72);
    color: var(--primary-color);

}



.teaser-text-right {
    grid-area: 1 / 7 / 2 / 11;
    padding-top: var(--spacing-72);
    padding-bottom: var(--spacing-72);
}

.teaser-text-centre {
    grid-area: 1 / 5 / 2 / 9;
    padding-top: var(--spacing-72);
    padding-bottom: var(--spacing-72);
}

.teaser-text-24px {
    font-size: var(--h5);
    padding-top: 0.5em;
}

.signature {
        font-family: "Jadyn";
        font-size: var(--h2);
        color: var(--primary-color);
            

}

.section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 24px;

    grid-area: section;
    margin-bottom: var(--spacing-72);
    margin-top: var(--spacing-32);
}

.section-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 24px;
    grid-template-rows: auto auto;

    grid-area: section-content;
    margin-bottom: var(--spacing-72);
    margin-top: var(--spacing-72);

}

.section-content-top-only {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 24px;
    grid-template-rows: auto auto;

    grid-area: section-content;

    margin-top: var(--spacing-72);
    margin-bottom: var(--spacing-32);

}



.section-img {
    grid-area: 1 / 1 / 2 / 6; 
    background-image: url(IMG/StartseiteMacherinStattMuse.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: var(--spacing-16) solid;
    border-color: var(--primary-color);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}





.section-text-left {
    grid-area: 1 / 7 / 2 / 11; 
    padding-top: var(--spacing-72);
    padding-bottom: var(--spacing-72);
}









.kunst-slider {
    grid-area: kunst-slider;
    margin-top: var(--spacing-32);
    margin-bottom: var(--spacing-32);
  overflow: hidden;

  background: white;
  white-space: nowrap;
  position: relative;
}

.kunstSlide-img {
    height: 30vh;
    margin-left: 24px;
    border-radius: var(--border-radius);
}

@keyframes kunst-slide {
    from{
        transform: translateX(0);
    }
    
    to{
        transform: translateX(-100%)
    }
}

.kunst-items {
    display: inline-block;
    animation: 30s kunst-slide infinite linear;
}



.footer {
    grid-area: footer;
    background-color: var(--black);
    font-size: var(--p);
    box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75); 

}

.footer-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 2fr;
grid-column-gap: 24px;
grid-row-gap: 0px; 
    padding-top: var(--spacing-72);


}

.logo-footer {
grid-area: 2 / 1 / 2 / 5; 
    

}

.IsabellaEdelLogo-footer {
    height: auto;
    max-height: 200px;
    margin-left: 5vw;
}

.IsabellaEdelLogo-footer:hover {
transform: scale(1.02);
    transition: 0.3s;
}

.footer1 {
     grid-area: 12 / 5 / 2 / 8; 
    color: white;
    font-family: "inter", Helvetica, sans-serif;
    padding-bottom: var(--spacing-72);
    

}

.footer2{
    grid-area: 2 / 8 / 2 / 10;
    padding-bottom: var(--spacing-72);
    
    
}

.footer3 {
grid-area: 2 / 10 / 2 / 13; 
        padding-bottom: var(--spacing-72);

}

.footer-content a.active {
  color: var(--accent-color); /* Hauptfarbe für die Markierung */
  font-weight: bold;           /* Optional: Fettgedruckter Text */
  text-decoration: underline;  /* Unterstreichung */
  text-decoration-color: var(--accent-color);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.footer-content ul li {
    color: white;
    list-style: none;
    font-family: "inter", Helvetica, sans-serif;
        font-size: var(--p);
}

.footer-content ul li{
    padding-bottom: 48px;

    
}

.footer-content ul {

    margin: 0
}

.footer-content a {
    color: var(--white);
    text-decoration: none;
}

.footer-content a:hover{
    color: var(--white);
    text-decoration: underline;
    text-decoration-color: var(--accent-color); /* Hauptfarbe */
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;

        transition: text-decoration-color 300ms, text-underline-offset 300ms;
    
    
}
   


    


.footer-content a {
    color: var(--white);
}

.footer-expander {

grid-area: 1 / 1 / 3 / 13; 

    height: var(--spacing-32);
    background-color: var(--accent-color);

}

.footer1 table {
    text-align: left;


}



.section-content-text-top {
    grid-area: 1 / 3 / 2 / 11; 
    margin-bottom: var(--spacing-32);
    color: var(--primary-color);

}

.section-content-text-right {
    grid-area: 2 / 7 / 4 / 11; ; 


}

.section-content-text-left {
    grid-area: 2 / 3 / 4 / 7;
    padding-bottom: var(--spacing-16);


}

.section-content-text-left-only {
    grid-area: 1 / 3 / 4 / 11;
    font-family: inter;
    font-size: var(--p);
    color: var(--black);
    margin-bottom: var(--spacing-48);
 

}

.section-content-text-left-only-ticket {
    grid-area: 1 / 3 / 4 / 11;
    font-family: inter;
    font-size: var(--p);
    color: var(--black);

 

}

.headline-wrapper-left-align {
    margin-bottom: var(--spacing-32);
    color: var(--primary-color);
}

.ticket-bg {
    grid-area: 1 / 3 / 2 / 11; 
    background-color: var(--white);
        box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);

    border-radius: var(--border-radius);
}

/* Formular-Wrapper für Paare von Feldern */
.form-row {
  display: flex; /* Felder nebeneinander */
  gap: var(--spacing-24); /* Abstand zwischen den Feldern */
  width: 100%; /* Gesamte Breite nutzen */
}

/* Eingabefelder innerhalb der Paare */
.form-row .form-group {
  flex: 1; /* Felder gleichmäßig verteilen */
}







.btn-primary {
    background-color: var(--primary-color);
    border-style: none;
    padding: var(--spacing-16) var(--spacing-32) var(--spacing-16) var(--spacing-32);
    color: white;
    border-radius: var(--border-radius);
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    text-align: center;
    text-decoration: none;
}




.ticket .form-wrapper {
  width: 100%; 
  display: flex; 
  flex-direction: column; 
    margin-bottom: var(--spacing-48);
  gap: var(--spacing-24); 

}

/* Individuelle Felder */
.ticket .form-group {
  width: 100%; /* Die Gruppe (einschließlich Input und Label) */
}

.ticket .form-group input {
  width: 100%; /* Input-Feld nimmt die gesamte Breite ein */
  max-width: 100%; /* Begrenzung, falls Eltern-Container kleiner ist */
  padding: var(--spacing-16); /* Angemessene Innenabstände */
  font-size: var(--p); /* Einheitliche Schriftgröße */
  border: 1px solid #ccc; /* Dezente Rahmen */
  border-radius: var(--border-radius); /* Abgerundete Ecken */
  box-sizing: border-box; /* Padding und Rahmen in die Breite einberechnen */
}

/* Label */
.ticket .form-group label {
  font-size: var(--p); /* Etwas kleinere Schriftgröße */
  margin-bottom: 8px; /* Abstand zwischen Label und Input */
  display: block; /* Label auf voller Breite */
}

/* Buttons */
.ticket .form-group input[type="submit"] {
  width: 100%; /* Button nimmt die gesamte Breite ein */
  background-color: var(--primary-color);
  color: white; /* Textfarbe */
  padding: var(--spacing-16);
  font-size: var(--p);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.ticket .form-group input[type="submit"]:hover {
  background-color: var(--accent-color);
    transition: 0.3s;
}



.ticket-box-wrapper {
    padding: var(--spacing-32);
    font-family: inter;
    font-size: var(--p);
}





.warning-red {
    color: #EC6945;
}



.interactive-map {
        display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 24px;

    grid-area: interactive-map;
    background-color: pink;
    height: 100vh;

    margin-top: var(--spacing-72);
}

.map-wrapper {
background-color: var(--background-color);

display: flex;
min-height: 60vh;
    max-height: 80vh;

    padding-bottom: var(--spacing-32);
    padding-top: var(--spacing-32);
    padding-left: 10%;
    padding-right: 10%;
    
}

.map-wrapper-mobile {
background-color: var(--background-color);

display: none;
height: auto;



    padding-left: 5%;
    padding-right: 5%;
    
}



/* Styling für den Container der Tabs (Sidebar) */
.side-tabs-right {
    position: absolute;


    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* sorgt dafür, dass die Tabs am rechten Rand ausgerichtet sind */
    
    justify-content: space-around;
height: 60%;


    z-index: 1;
    transition: width 0.3s ease; /* Damit sich die Breite der Sidebar sanft ändert */

}





.side-tabs-right:hover {
    width: 100px;
}

/* Styling für die einzelnen Tabs */
.tab-right {
    width: 50px; /* Standardbreite */
    background-color: var(--primary-color);
    color: white;
    font-family: "jost", Helvetica, sans-serif;
    font-size: var(--h5);
    font-weight: bold;
    line-height: var(--h2);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    align-items: center;

    padding-left: 16px;
        -webkit-box-shadow: 0px 0px 54px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 54px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 54px 0px rgba(0,0,0,0.2);
    
}

.tab-right:hover {
    width: 400px; /* Breite bei Hover */

}

/* Zusätzliche Bezeichnung nach dem Buchstaben */
.tab-right::after {
    content: attr(data-full-text);
    padding-left: 32px;
    opacity: 0;
    transition: opacity 0.3s ease;
}



/* Text sichtbar beim Hover */
.tab-right:hover::after {
    opacity: 1;
}

.tab-right-2 {
    width: 50px; /* Standardbreite */
    background-color: var(--white);
    border-style: solid;
    border-width: 2px;
    border-right: none;
    color: var(--black);
    font-family: "jost", Helvetica, sans-serif;
    font-size: var(--h5);
    font-weight: bold;
    line-height: var(--h2);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    align-items: center;

    padding-left: 16px;
}

.tab-right-2:hover {
    width: 400px; /* Breite bei Hover */
    background-color: var(--background-color); /* Änderung der Hintergrundfarbe */
}

/* Zusätzliche Bezeichnung nach dem Buchstaben */
.tab-right-2::after {
    content: attr(data-full-text);
    padding-left: 32px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Text sichtbar beim Hover */
.tab-right-2:hover::after {
    opacity: 1;
}

.accordion-wrapper{
    
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-72);

}


.accordion {

  width: 100%;
    max-width: 900px;
    margin-left: 72px;
    margin-right: 72px;
    
}

.accordion-item svg {

  width: 100%;
    margin-top: var(--spacing-32);
   padding: var(--spacing-8);
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: white;

    
}

.back-to-top svg {

    color: white;

    
}

.accordion-item svg:hover {

transform: translateY(-8px);
    transition: 0.3s;
    
}

.accordion-item {
  background-color: white;
  color: var(--black);
  margin: var(--spacing-32) 0;

  border-radius: var(--border-radius);
box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);

}

.accordion-item:hover {

    transform: scale(1.02);
    transition: 0.3s;

}





.accordion-item-body {
  max-height: 0;
    
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
    
}

.accordion-item-body-content {
  padding: 0 16% var(--spacing-48);
  line-height: 1.8;

}

.accordion-item-header {
  padding: var(--spacing-32) 10% var(--spacing-32) 10%;
  min-height: 3.5rem;
  line-height: 1.8;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
    color: var(--primary-color);
    font-weight: 100;
}

.accordion-item-header::after {
  content: "\002B";
 color: var(--primary-color);
  font-size: var(--h2);
  position: absolute;
  right: 10%;

}

.accordion-item-header.active::after {
  content: "\2212";
}

.accordion-item-header-custom-img-1 {
    background-image: url(IMG/RaeumeAccordion_Renaissance.webp);
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.accordion-item-header-custom-img-2 {
    background-image: url(IMG/RaeumeAccordion_Klassizismus.webp);
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.accordion-item-header-custom-img-3 {
    background-image: url(IMG/RaeumeAccordion_20Jahrhundert.webp);
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.accordion-item-header-custom-img-4 {
    background-image: url(IMG/RaeumeAccordion_Gegenwart.webp);
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.back-to-top {
    background-color: var(--primary-color);
width: auto;
    padding: var(--spacing-8);
    padding-right: 200px;
    position: absolute;
    margin-top: -72px;
    margin-right: -160px;


    right: 0;
    display: flex;
margin-bottom: var(--spacing-72);
color: var(--white);
    font-family: "jost";
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    

}

.back-to-top a {
    
    color: white;
    text-decoration: none;
}

.back-to-top:hover{
transform: translateX(-24px);
    transition: 0.3s;

}

.bi-chevron-up {

    padding-right: var(--spacing-8);
    padding-left: var(--spacing-8);
    margin-bottom: -5px;


}



.R1:hover {
    transform: translateY(-24px);
    transition: 0.3s;

}

.R2:hover {
    transform: translateY(-24px);
    transition: 0.3s;
}

.R3:hover {
    transform: translateY(-24px);
    transition: 0.3s;
}

.R4:hover {
    transform: translateY(-24px);
    transition: 0.3s;
}





.map-legende-wrapper {
        
    display: none;
    justify-content: center;
    margin-bottom: var(--spacing-72);
    background-color: var(--background-color);

}

.legende{
    
    width: 100%;
    max-width: 900px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: var(--spacing-72);
}

.R1-legende {
    grid-area: 1 / 3 / 2 / 7; 
    background-color: pink;

}

.R2-legende {
    grid-area: 1 / 7 / 2 / 11;
    background-color: aqua;
}

.R3-legende {
    grid-area: 2 / 3 / 3 / 7;
    background-color: beige;
}

.R4-legende {
    grid-area: 2 / 7 / 3 / 11; 
    background-color: violet;
}

.legende-item {
      background-color: var(--primary-color);
  color: var(--black);
  margin: var(--spacing-16) 0;
    padding: var(--spacing-8);
    color: white;
    font-family: "jost";
    font-size: var(--h5);

  border-radius: var(--border-radius);
box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
}

.legende-item a{
    
    color: white;
    text-decoration: none;
    cursor: pointer;
    
}

.legende-item:hover{
    
    transform: scale(1.01);
    transition: 0.3s;
}



.legende-item-2 {
      background-color: var(--white);
  color: var(--black);
  margin: var(--spacing-16) 0;
    padding: var(--spacing-8);
    color: var(--black);
    font-family: "jost";
    font-size: var(--h5);
    border-style: solid;
    border-width: 2px;

  border-radius: var(--border-radius);
box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);
}


.map-img {
    width: 100%;
}




@media only screen and (min-width: 1400px) {
    
.teaser-text-left{
    
    grid-area: 1 / 4 / 2 / 7;


}

.teaser-text-right {
    grid-area: 1 / 7 / 2 / 10;

}
   
.section-text-left {
    grid-area: 1 / 7 / 2 / 10; 

}    
    
.section-content-text-top {
    grid-area: 1 / 4 / 2 / 10; 


}    
    
.section-content-text-left {
    grid-area: 2 / 4 / 4 / 7;

} 
    
.section-content-text-right {
    grid-area: 2 / 7 / 4 / 10; ; 


}
    
.section-content-text-left-only {
    grid-area: 1 / 4 / 2 / 10; 

}
  
    
  
    
} 








@media only screen and (max-width: 1000px) {
    
   .navbar ul {

  width: 50vw;
       height: 100vh;

} 
    
.navbar ul li {

    margin-right: 7vw;
    padding-bottom: var(--spacing-32);
        transform: translateY(-50px);

} 
    
h1 {
font-size: 60px;  
}
 
.teaser {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    grid-template-rows: auto auto;

    grid-column-gap: 24px;

    grid-area: teaser;
}
   
    .teaser-text-left{
    
    grid-area:  1 / 3 / 2 / 11;
        padding-bottom: var(--spacing-16);

}
    
    .teaser-text-right {
    grid-area: 2 / 3 / 3 / 11;
        padding-top: 0;

}
    
    .teaser-bg {
        grid-area: 1 / 1 / 3 / 13;   
        
}
    
    .section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);

    grid-column-gap: 24px;

}
    
   .section-img {
    grid-area: 1 / 1 / 2 / 13; 

} 
    .section-text-left {
    grid-area: 2 / 3 / 3 / 11;  
        padding-top: var(--spacing-72);
        margin-bottom: 0;

}
  
    .logo-footer {
    grid-area: 1 / 1 / 2 / 7; 
    

}
    
    .footer1 {
     grid-area: 1 / 7 / 2 / 13;
    

}
    
    .footer2{
    grid-area: 2 / 1 / 3 / 7; 
 
}
   
    .footer3{
    grid-area: 2 / 7 / 2 / 12; 
    
}
 
    .footer3 ul{
          padding-inline-start: 0;
   
}
    
    .section-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-template-rows: auto auto;
            margin-top: var(--spacing-48);

}
    
    .section-content-text-left {
    grid-area: 2 / 3 / 3 / 11;

}
    
    .section-content-text-right {
    grid-area: 3 / 3 / 4 / 11; 


}
    
    .teaser-text-centre {
    grid-area: 1 / 3 / 2 / 11; 

}
   
    
    
    
 

    
    
}


@media only screen and (max-width: 576px) {
    
        .map-legende-wrapper {
        
    display: flex;


}
  
    .side-tabs-right {
    display: none;

}
    
    .map-wrapper {
display: none;
    
}
    
      .map-wrapper-mobile {
display: flex;
          padding-top: var(--spacing-32);
    
} 
  .accordion {


    margin-left: 5%;
    margin-right: 5%;

    
}  
    
    .ticket-bg {
    grid-area: 1 / 1 / 2 / 13; 
    background-color: var(--white);
        box-shadow: 0px 0px 50px -30px rgba(0,0,0,0.75);

    border-radius: var(--border-radius);
        margin-right: 5%;
        margin-left: 5%;
}
    .section-content-text-left-only-ticket {
    grid-area: 1 / 1 / 4 / 13;
        margin-right: 5%;
        margin-left: 5%;
 

}
  
    
    .section-content-text-top {
    grid-area: 1 / 1 / 2 / 13; 
    margin-right: 5%;
    margin-left: 5%;

}
    .section-content-text-left {
    grid-area: 2 / 1 / 3 / 13;
    margin-right: 5%;
    margin-left: 5%;

}
    
    .section-content-text-right {
    grid-area: 3 / 1 / 3 / 13;
    margin-right: 5%;
    margin-left: 5%;
}
    
    .section-content-text-left-only {
    grid-area: 1 / 1 / 4 / 13;
    margin-right: 5%;
    margin-left: 5%;
 

}
    .teaser-text-centre {
    grid-area: 1 / 1 / 2 / 13; 
    margin-right: 5%;
    margin-left: 5%;
}
    
        .section-text-left {
    grid-area: 2 / 1 / 3 / 13;  
    margin-right: 5%;
    margin-left: 5%;

}
    
    .teaser-text-left{
    
    grid-area:  1 / 1 / 2 / 13;
    margin-right: 5%;
    margin-left: 5%;

}
    
    .teaser-text-right {
    grid-area: 2 / 1 / 3 / 13;
    margin-right: 5%;
    margin-left: 5%;

}
    
    .carousel-slide1, .carousel-slide2, .carousel-slide3 {
  min-width: 100%;
  height: 50vh; 
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}
    
    
.hero-section-kuenstlerinnen-img{
    background-image: url(IMG/KuenstlerinnenHero.webp);
  height: 20vh; 
background-attachment: scroll;
    

}
   
.hero-section-gruenderin-img{
    background-image: url(IMG/StartseiteHeroSliderGruenderin.webp);
  height: 20vh; 
background-attachment: scroll;
    

}   
    
    
.hero-section-museumscafe-img{
    background-image: url(IMG/StartseiteHeroSliderMuseumscafe.webp);
  height: 20vh; 
background-attachment: scroll;

    
}    
   
.hero-section-impressum-img{
    background-image: url(IMG/ImpressumHero.webp);
  height: 20vh; 
background-attachment: scroll;


}   
    
.hero-section-tickets-img{
    background-image: url(IMG/TicketsHero.webp);
  height: 20vh; 
background-attachment: scroll;

}    
    
.hero-section-raeume-img{
    background-image: url(IMG/RaemeHero.webp);
  height: 20vh; 
background-attachment: scroll;

}
    
    .kunstSlide-img {
    height: 20vh;

}
    
    .accordion-item-body-content {
  padding: 0 10% var(--spacing-48);
  line-height: 1.8;

}
  .accordion-item-header h4 {
width: 90%;
}  
    
}