:root {
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 300 !important;
    --cassiopeia-font-weight-normal: 300 !important;
    --cassiopeia-color-primary:var(--dunkelblau);
    --link-color: var(--white);
    --link-hover-color: var(--kupfer);
    --body-font-size: 1.2rem;
    --body-font-weight: 300;
    --body-bg: #00000008;
    --dunkelblau: #121d23;
    --hellblau: #21333d;
    --kupfer:#C9A581;
    --text-grey: #b3b3b4;
    --text-hellgrau: #bfbfbf;
    --text-kupfer: var(--kupfer);
    --bg-grey: #f4ecec;
    --beige: var(--kupfer);
    --border-grey: #6e6c6c;
    --bg-primary:var(--dunkelblau) !important;
    
}
/* Vergrößert das Padding des Hauptinhaltsbereichs in Cassiopeia */
.container-component {
    /* Standardmäßig ist das Padding in Cassiopeia relativ gering */
    /* Hier erhöhen wir es beispielhaft auf 40 Pixel oben und unten, 30 Pixel links und rechts */
    padding-top: 60px;
    padding-bottom: 60px;
    
}

.bottom-h a{
--nav-link-color: var(--text-white) !important;}

/*overflow wackeln*/
/* verhindert JEDE mobile horizontale Bewegung */
body, html {overflow-x: hidden;}
body {
  color: var(--dunkelblau);
}
.hero-full {
    position: relative;
    width: 100%;
    min-height: 60vh;
    background-image: url('/images/content/hero.jpg'); /* absoluter Pfad vom Root */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52); /* Overlay optional */
}

.hero-full .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1rem;
}


.logo-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    object-fit: contain;
  }
/* Bilder dürfen niemals überlaufen */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/*modul aktuelle termine titel*/
.border-left{
  border-left: 4px solid var(--kupfer);
   }
.border-bot {
    border-bottom: 1px solid var(--border-grey) !important;
}
/* FontAwesome Icons manchmal größer → fix */
i.fa-solid {
  display: inline-block;
}
/*ausstellungen*/
       .timeline-date {
            color: var(--kupfer);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .timeline-text {
            margin: 0 0 0 28px; /* Einrückung unter dem Icon */
            color: var(--white);
        }
/*Service icons*/
.service-box {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
}

.service-icon-box {
    background-color: var(--hellblau);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kupfer);
    font-size: 38px;
    padding: 15px;
}

.service-text h3 {
    color: var(--kupfer);
    font-size: 1.4rem;
    margin: 0 0 8px 0;
    letter-spacing: 1px;
}

.service-text p {
    color: var(text-grey);
    margin: 0;
    line-height: 1.6;
    max-width: 550px;
}
/*Icons für Ausstellungen*/
.icon-box {
    background-color: var(--hellblau);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kupfer);
    font-size: 18px;
    padding: 6px;
}

.border-y{
  border-top: 1px solid var(--hellblau);
  border-bottom: 1px solid var(--hellblau);
}
.icon-kupfer{
  color:var(--kupfer);
}

.bg-dunkelblau {background-color:var(--dunkelblau);}
.bg-hellblau {background-color:var(--hellblau);}

.btn-primary {
    border: 2px solid var(--kupfer);
    padding: .5rem 1rem;
    font-weight: 300;
    background-color: var(--hellblau);
    color: var(--white); /* Verwenden Sie die Variable */
    text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--dunkelblau);
    border-color: var(--kupfer);
    color: var(--white); /* Verwenden Sie die Variable */
}

.btn-kupfer {
    border: 1px solid var(--dunkelblau);
    border-radius: .5rem;
    padding: .5rem 1rem;
    font-weight: 300;
    background-color: var(--kupfer);
    color: var(--white); /* Verwenden Sie die Variable */
    text-decoration: none;
}
.btn-kupfer:hover, .btn-kupfer:focus {
    background-color: var(--hellblau);
    border-color: var(--dunkelblau);
    color: var(--white); /* Verwenden Sie die Variable */
}

/*icons*/
.fa-solid.fa-paintbrush {
    color: var(--kupfer) !important;
}



/*typography....................................................typography*/
/* Dynamische Skalierung für H1 & H2 */
h1 {font-size: clamp(1.8rem, 5vw, 3rem); /* bleibt wie du hattest */}
h2 {font-size: clamp(1.6rem, 4.5vw, 2.4rem); /* sinnvoll kleiner als H1 */}
h3 {font-size: clamp(1.5rem, 4vw, 2.5rem); /* 40px max */}
h4 {font-size: clamp(1.3rem, 3.5vw, 2rem); /* 32px max */}
h5 {font-size: clamp(1.2rem, 3vw, 1.75rem); /* 28px max */}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--cassiopeia-font-family-headings);
    font-weight: var(--cassiopeia-font-weight-headings, 300) !important;
}

/*container-header..............................................container-header*/
.container-header {
    background-image: none !important;
    box-shadow: none !important;
    background-color:#121d23!important;
}


/*logo*/
.container-header .navbar-brand {
    margin: auto !important;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    display: inline-block;
    position: relative;
}
.metismenu.mod-menu .metismenu-item.active>a, 
.metismenu.mod-menu .metismenu-item.active>button,
.metismenu.mod-menu .metismenu-item>a:hover, 
.metismenu.mod-menu .metismenu-item>button:hover {
 text-decoration: none;
}
/*de-flagge weißen HG entfernt*/
div.mod-languages ul li.lang-active {
    background-color: transparent;
}


/* Modul Aktuelle Termine */
.termine-wrapper {padding: 10px;}
.termine-item {padding-top: 20px; padding-bottom: 20px; height: 100%; display:block;}
.termine-item h4 {margin: 0 0 5px; color: var(--kupfer); }
.termine-item p {margin: 0; color: var(--white);}

/* --- New positions -- */
.full-width-container-inner {
    max-width: 1400px; 
    margin-left: auto; 
    margin-right: auto;
    /*padding: 3rem 1rem;*/
}

/* --- Styling für die Module in bottom-c --- */
.module-flex-container {
    display: flex; /* Aktiviert das flexible Layout */
    flex-wrap: wrap; /* Erlaubt, dass Module in die nächste Zeile rutschen */
    gap: 1rem; /* Abstand zwischen den Modulen */
    justify-content: space-around; /* Zentriert die Module und verteilt den Platz gleichmäßig */
}

/* Optional: Stellt sicher, dass jedes Modul ungefähr gleich groß ist */
.module-flex-container > div {
    /* Flex-Basis von 0 erlaubt es, dass alle gleich groß werden */
    flex: 1 1 0px; 
    min-width: 250px; /* Mindestbreite, bevor sie in die nächste Zeile rutschen */
    padding-left: 20px;
    padding-right: 20px;
}

 .bottom-c {
  margin-top: 0px;
  margin-bottom: 0px;
  }






@supports (display: grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
    grid-template-areas: ". banner banner banner banner ."
                         ". top-a top-a top-a top-a ."
                         ". top-b top-b top-b top-b ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". side-l side-l side-l side-l ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b ."
                         ". bottom-c bottom-c bottom-c bottom-c ."
                         ". bottom-d bottom-d bottom-d bottom-d ."
                         ". bottom-e bottom-e bottom-e bottom-e ."
                         ". bottom-f bottom-f bottom-f bottom-f ."
                         ". bottom-g bottom-g bottom-g bottom-g ."
                         ". bottom-h bottom-h bottom-h bottom-h .";
    display: grid;
  }

  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }

  .site-grid > .full-width {
    grid-column: full-start / full-end;
  }

  @media (width >= 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ."
                           ". top-a top-a top-a top-a ."
                           ". top-b top-b top-b top-b ."
                           ". side-l comp comp side-r ."
                           ". bot-a bot-a bot-a bot-a ."
                           ". bot-b bot-b bot-b bot-b .";
    }
  }
}

.container-banner {
  grid-area: banner;
}

.container-top-a {
  grid-area: top-a;
}

.container-top-b {
  grid-area: top-b;
}

.container-component {
  grid-area: comp;
}

.container-sidebar-left {
  grid-area: side-l;
}

.container-sidebar-right {
  grid-area: side-r;
}

.container-main-top {
  grid-area: main-t;
}

.container-main-bottom {
  grid-area: main-b;
}

.container-breadcrumbs {
  grid-area: bread;
}

.container-bottom-a {
  grid-area: bot-a;
}

.container-bottom-b {
  grid-area: bot-b;
}