/* ==========================================================================
   BeluTec main.css – reorganized & cleaned
   Date: 2025-08-13
   Author: SaM
   ========================================================================== */

/* ==============================
   TABLE OF CONTENTS
   1) GLOBAL (Base, Fonts, Utilities, Spacing, Layout, Background)
   2) HEADER (Header, Top-Navigation, Sticky)
   3) MAIN NAVIGATION (Desktop) – main-menu, sub-menu, subnav
      3.1) Mobile variants (within @media)
      3.2) Desktop variants (within @media >=769, >=992)
   4) MOBILE NAVIGATION (Slide-in, overlay, buttons)
   5) SLIDER (Swiper)
   6) CONTENT & HELPERS (contentcontainer, captions, hide-on-mobile, specific grids)
   7) FOOTER (footer, bottom nav, awards, copyright)
   8) COOKIES (cookie banner + consent manager)
   9) CONTENT-ID BASED STYLES (e.g., .c246)
   ============================== */


/* ==================== GLOBAL ==================== */

body {
  font-size: 17px;
  margin: 0;
  padding: 0;
  color: #575757 !important;
  background: #dedede;
}

main a {
  color: #575757 !important; /* Standardfarbe */
}

main a:hover,
main a:focus {
  color: #ffd500 !important; /* Hoverfarbe */
}

main a:visited {
  color: #575757 !important; /* Besuchte Links */
}

/* -------------------- Format CI Overkill um alle Schriftfamilien etc. aus anderen CSS Datein (Bootstrap etc.) zu überschreiben -------------------- */

/* Seitenelemente */

.contentcontainer{
  gap: 0px !important;
}

.textmedia, .textpic {
    gap: 10px  !important;
}


/* ------------------------------
   CI: Zentrale Font-Definition
------------------------------ */
:root {
  --font-base: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'Avenir Next Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-code: 'Courier New', Courier, monospace;
}

/* ------------------------------
   Global Font-Anwendung
------------------------------ */
body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]) {
  font-family: var(--font-base) !important;
}

code, pre {
  font-family: var(--font-code);
}

/* ------------------------------
   Utility-Klassen
------------------------------ */
.font-base {
  font-family: var(--font-base) !important;
}

.font-headline {
  font-family: var(--font-headline) !important;
}

.font-code {
  font-family: var(--font-code) !important;
}

.gallery-item a,
.gallery-item a:focus,
.gallery-item a:focus-visible,
.gallery-item a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  color: inherit;
  text-decoration: none;
}


/* ------------------------------------- Generelles ---------------------------------------------------------- */

/* Überschriften */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 { font-size: 3rem !important; }     /* 48px */
h2 { font-size: 2rem !important; }     /* 32px */
h3 { font-size: 1.75rem !important; }  /* 28px */
h4 { font-size: 1.5rem !important; }   /* 24px */
h5 { font-size: 1.1rem !important; } /* 18px */
h6 { font-size: 0.875rem !important; } /* 14px */

@media (max-width: 768px) {

  h1 { font-size: 1.75rem !important; }     
  h2 { font-size: 1.5rem !important; }     
  h3 { font-size: 1.25rem !important; }  
  h4 { font-size: 1.125rem !important; }   
  h5 { font-size: 1rem !important; } 
  h6 { font-size: 0.875rem !important; } 

}

.ce-headline-left{
  text-align: left !important;
}

.ce-headline-center{
  text-align: center !important;
}

.ce-headline-right{
  text-align: right !important;
}

/* Subheader Klassen */

.h1 { font-size: 1.75rem !important; }     
.h2 { font-size: 1.5rem !important; }     
.h3 { font-size: 1.25rem !important; }  
.h4 { font-size: 1.125rem !important; }   
.h5 { font-size: 1rem !important; } 
.h6 { font-size: 0.875rem !important; } 

/* Schriftschnitte */

.fw-100  { font-weight: 100 !important; }
.fw-200  { font-weight: 200 !important; }
.fw-300  { font-weight: 300 !important; }
.fw-400  { font-weight: 400 !important; }
.fw-500  { font-weight: 500 !important; }
.fw-600  { font-weight: 600 !important; }
.fw-700  { font-weight: 700 !important; }
.fw-800  { font-weight: 800 !important; }
.fw-900  { font-weight: 900 !important; }


/* Format Blöcke */

.text-justify {
  text-align:justify !important;
}


/* Abstände Desktop View */

.frame-space-before-extra-small { margin-top: 10px !important; }
.frame-space-after-extra-small { margin-bottom: 10px !important; }
.frame-space-before-small { margin-top: 20px !important; }
.frame-space-after-small { margin-bottom: 20px !important; }
.frame-space-before-medium { margin-top: 35px !important; }
.frame-space-after-medium { margin-bottom: 35px !important; }
.frame-space-before-large { margin-top: 80px !important; }
.frame-space-after-large { margin-bottom: 80px !important; }
.frame-space-before-extra-large{ margin-top: 100px !important; }
.frame-space-after-extra-large { margin-bottom: 100px !important; }

/* Abstände Mobile View */

@media (max-width: 768px) {

  .frame-space-before-extra-small { margin-top: 10px !important; }
  .frame-space-after-extra-small { margin-bottom: 10px !important; }
  .frame-space-before-small { margin-top: 15px !important; }
  .frame-space-after-small { margin-bottom: 15px !important; }
  .frame-space-before-medium { margin-top: 20px !important; }
  .frame-space-after-medium { margin-bottom: 20px !important; }
  .frame-space-before-large { margin-top: 30px !important; }
  .frame-space-after-large { margin-bottom: 30px !important; }
  .frame-space-before-extra-large{ margin-top: 40px !important; }
  .frame-space-after-extra-large { margin-bottom: 40px !important; }

}


/* Generelle Hypen wenn Justify formatiert */

[class*="justify"],
.justify,
[style*="text-align: justify"] {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* ----------------------------------------------------------------------------------------------- */

/* Seiteninhalt zentriert und max. 1000px breit */

.main_container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px;
  background: #ffffff;
}

main{
  padding: 0 20px 0 20px;
  background: #fff;
}


/* Header */

header {
  height: 80px;
  background: #fff;
  padding: 0 20px 0 20px;
}

/* HauptNavigationContainer */

#nav-wrapper {
  position: fixed;
  z-index: 900;
}

/* Top-Navigation */

/* Sticky Bereich beim scrollen */

#sticky_logo {
  width: 100%;
  justify-content: space-between;
  align-items: center; /* vertikal zentriert */
  gap: 1rem;            /* Abstand zwischen Bild und Text */
  display: none;   /* initial versteckt */
  margin: 5px 0 5px 0;
}

#sticky_logo img {
  height: 32px; 
  width: auto;
}

#sticky_text,
#sticky_text a {
  font-size: 12px;
  color: #575757;
}

#sticky_text {
  padding: 0 ;
}

#sticky_text a {
  text-decoration: none;
}

#sticky_text a:hover {
  text-decoration: none;
  color:#ffcc00;
}

/* top Navigation - sictbar wenn Sticky nicht aktiv */

.top-navigation > .ce-element {
  display: flex;
  justify-content: flex-end;
}

.top-logo {
  padding: 10px 30px 0 0 !important;
}

.top-logo img {
    max-width: 230px !important;
}

.top-navigation {
  display: flex;
  justify-content: flex-end;
}

.top-navigation {
  font-weight: bold;
  color: #575757;
  font-size: 14px;
  padding: 0 !important;
}

.top-navigation ul {
  list-style: none;        /* entfernt die Bulletpoints */
  margin: 0;
  padding: 0;
  display: flex;           /* zeigt die <li> nebeneinander */
  gap: 0.5rem;             /* Abstand zwischen den Punkten */
}

.top-navigation li {
  margin: 0;
  padding: 0;
}

.top-navigation a {
  text-decoration: none;   /* entfernt Unterstreichung */
  color: #575757;         /* erbt die Schriftfarbe */
  padding: 0.5rem 0;
  display: block;
}

.top-navigation a:hover {
  color: #ffd500; 
}

.top-navigation li.active a {
  font-weight: bold;
  border-bottom: 2px solid currentColor;
}


/* Hauptnavigation - Liste der Seiten und Unterseiten aus dem Backend */

.hauptnavigation {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 1000;
  padding: 0 20px 0 20px;
  background: #fff;
  
  transition: 
  top 0.3s ease,
  border-radius 0.3s ease,
  box-shadow 0.3s ease,
  background-color 0.3s ease;
}

.hauptnavigation li {
  height: 40px;
  line-height: 30px;
  display: inline-block; /* für horizontale Anordnung */
  white-space: nowrap; /* optional: Text nicht umbrechen */
}

.hauptnavigation li:last-child {
  border-right: none;
}

/* Beim Sticky-Zustand: fixed */

.hauptnavigation.sticky {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.2);
}

nav > .main-menu {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  position: relative;
}

nav img:not(.ausnahme) {
  width: auto;
  height: 17px;
  margin-left: 9px;
  margin-right: 9px;
}

.main-menu {

  font-size: 14px;
  font-weight: 300;
  text-transform: none;
  padding: 0px !important;
}

nav ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
}

.main-menu > li {
  flex: 1 1 0;
  position: relative; /* wichtig für das absolut positionierte Submenü */
  margin: 0;
  padding: 5px;
  text-align: center;
  white-space: nowrap;      /* verhindert Zeilenumbruch im Text */
  border-right: 1px solid #d2d6d2;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.main-menu > li:first-child {
  flex: 0 0 auto; /* nimmt nur so viel Platz wie nötig ein */
  padding: 5px;   /* explizit gesetzt, optional */
  text-align: left; /* optional: Text links statt mittig */
}

.main-menu li:last-child {
  border-right: none;
}

.main-menu > li:hover {
  background-color: #ffd500;
  color: #575757;
}

.main-menu > li {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-menu > li:hover > a {
    color: #575757;
}

.main-menu > li:hover {
  background-color: #ffd500;
  color: #575757; 
}

.main-menu a {
  text-decoration: none;
  display: block;
  color: #575757;
}

.main-menu a:hover {
  color: #ffd500; 
}

.main-menu li.active a {
  font-weight: bold;
  border-bottom: 2px solid #ffd500;
}

.has-sub > a::after {
  content: " ▼";
  font-size: 0.7em;
}

.main-menu > li:first-child.active a {
  font-weight: normal !important;
  border-bottom: none !important;
}

img[src$=".svg"] { /* setzt grafische SVG aus Iconpack etc. auf annähernd #575757 */
  filter: brightness(0) saturate(100%) invert(33%) sepia(2%) saturate(0%) hue-rotate(163deg) brightness(92%) contrast(84%);
}

/* Sub-Menü (Ebene 2) Im Hauptmenü*/

.main-menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  text-align: left !important;
  background-color: #ffcc00 !important;
  z-index: 1000;
  min-width: 220px;
  padding: 0;
  flex-direction: column;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.2);
}

ul.sub-menu li:last-child a,
ul.sub-menu li:last-child a:hover {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

ul.sub-menu li:last-child a:hover {
  background-color: #f3de88 !important;
}

.sub-menu li a{
  font-weight: normal !important;
}

/* Untermenü in der Seite */

.subnav-nav {
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: block !important;
}

/* RESET der bootstrap CSS definitionen */

ul.subnav-nav li.active > .subnav-link,
.subnav-nav li.active > .subnav-link,
body .subnav-item.active,
body .sub-menu li.active > a {
  color: #575757 !important;
  font-weight: bold !important;
  border-bottom: none !important;
}

/* UND nochmals überschreiben */

.sub-menu li.active > a,
.subnav-item.active,
.active > .subnav-link {
  position: relative; /* wichtig für ::after */
  color: #575757 !important;
  font-weight: bold;
  border-bottom: none; /* echten border entfernen */
}



ul.subnav-nav li .subnav-link {
  display: flex;
  align-items: center;
  padding: 10px 1rem;
  color: #575757;
  border: none;
  background: none;
  text-decoration: none;
  gap: 0.5rem;
}

ul.subnav-nav li .subnav-link:hover {
  background-color: #ffcc00;
  color: #575757;
  border-radius: 6px;
}

/* Haupmenüpunkt im Sub-Menü */

#submenu-content{
  display: block;
  font-weight: 300;
  white-space: nowrap;
}

.subnav-backlink {
  margin: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  text-decoration: none;
  color: #575757;
}

.subnav-backlink:hover {
  background-color: #ffcc00;
  color: #575757;
  border-radius: 6px;
}


/* "Hamburger" Mobile Button --------------------------------------------- */

#menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
}

#menu-toggle .hamburger {
  width: 24px;
  height: 3px;
  background-color: #333;
  display: block;
  transition: 0.3s;
}

/* Slide-In Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100vh;
  width: 80vw;
  max-width: 300px;
  background-color: #fff;
  padding: 2rem;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.mobile-nav.open {
  left: 0;
}

.only-on-mobile{
  display: none;
}

/* ===========================================================================================
   Mobile Styling – angepasst an bestehende Struktur
=========================================================================================== */
@media (max-width: 768px) {

  header {
    position: sticky;
    top: 0;
    z-index: 999; /* über Inhaltselementen */
    background-color: #fff; /* oder deine Menüfarbe */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* optional leichter Schatten */
    height: 65px;
  }

  .main-menu > li {
    text-align: left;
  }

  a.lightbox:focus {
    outline: none;
  }

  a.lightbox:focus-visible {
    outline: 2px solid #ffd500; /* oder was du willst für Tastatur-Fokus */
  }

  .only-on-mobile{
    display: block ;
  }


  footer .table {
    --bs-table-bg: initial;
    --bs-table-color: initial;
  }

  footer table {
    border-collapse: separate;
    width: 100%;
    border-spacing: 5px 0; /* horizontal 10px, vertikal 0 */
  }

  .copyright,
  .footer-adresse {
    font-size: 12px !important;
  }

  footer .group-logos .gallery-item {
    text-align: center;
  }

  footer .group-logos .gallery-item figure {
    display: inline-block;
    margin: 0 auto; /* optional, zur Sicherheit */
  }

  footer .gallery-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0; /* oder z. B. 1rem, wenn gewünscht */
  }

  footer .gallery-row figure {
    flex: 0 0 33.3333vw; /* = 3 Elemente pro Zeile → 100 / 3 */
    max-width: 33.3333vw;
    box-sizing: border-box;
    text-align: center;
    padding: 0.5rem;
  }

  .cookie-info-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ffcc00;
    padding: 2px;
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .cookie-info-box.hidden {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none; /* verhindert versehentliche Klicks im Offscreen */
  }

  /* Mobile Navigation – Scrollverhalten */
  #mobile-nav {
    overflow-x: hidden;
    overflow-y: auto;
  }

  #mobile-nav .nav-inner { /* dehnt sich mit Content */
  position: relative;
  }

  /* Innerer Schatteneffekt */
  #mobile-nav .nav-inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px; /* Breite des Schatteneffekts */
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
    z-index: 5;
  }

  /* Erstes (Dummy-)LI-Element im Menü ausblenden */
  #mobile-nav .main-menu > li:first-child {
    display: none;
  }

  /* Grundstyling */
  .mobile-nav {
    background-color: #f7f7f7;
    padding: 0;
    font-family: 'Raleway', sans-serif;
  }

  .mobile-nav-footer ul li > a {
    font-size: 13px !important;
  }

  .mobile-nav .main-menu,
  .mobile-nav .mobile-submenu,
  .mobile-nav .mobile-footer-submenu,
  .mobile-nav .sub-menu { /* Submenu übernehmen */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-nav .main-menu > li,
  .mobile-nav .mobile-submenu > li,
  .mobile-nav .mobile-footer-submenu > li,
  .mobile-nav .sub-menu > li {
    border-bottom: 1px solid #ccc;
  }

  .mobile-nav .main-menu a,
  .mobile-nav .mobile-submenu a,
  .mobile-nav .mobile-footer-submenu a,
  .mobile-nav .sub-menu a,
  .subnav-backlink {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    font-size: 1rem;
    color: #575757;
  }

  .mobile-submenu,
  .mobile-footer-submenu {
    display: block !important;
  }

  .mobile-submenu li,
  .mobile-footer-submenu li,
  .mobile-nav .sub-menu li {
    display: block;
    width: 100%;
  }

  .mobile-nav .main-menu li.active,
  .mobile-nav .main-menu li.active > a {
    background-color: #ffd500;
    color: #575757;
    font-weight: bold;
  }

  .mobile-nav .main-menu li.has-sub > a::after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    content: "\f0da";
    float: right;
    font-size: 20px !important;
    color: #575757;
  }

  .mobile-submenu a,
  .footer-subnav-link,
  .mobile-nav .sub-menu a,
  .subnav-backlink {
    font-size: 0.95rem;
    padding-left: 1rem;
  }

  .mobile-submenu i,
  .footer-subnav-link i,
  .mobile-nav .sub-menu i {
    margin-right: 0.5rem;
  }

  .mobile-footer-submenu li:last-child {
    border-bottom: none;
  }

  .mobile-nav .sub-menu li:hover,
  .mobile-submenu a:hover,
  .footer-subnav-link:hover,
  .subnav-backlink:hover {
    background-color: #ffd500;
    color: #000;
  }

  .mobile-nav .main-menu {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  /* Overlay hinter dem geöffneten Menü */
  .mobile-nav.open ~ .menu-overlay {
    display: block;
  }

  .menu-overlay,
  #menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    z-index: 900;
  }

  #menu-overlay.visible {
    display: block;
  }

  /* Submenu Panel – Seiten-Slide */
  .submenu-panel {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: left 0.3s ease;
    padding: 2rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1001;
  }

  .submenu-panel.open {
    left: 0;
  }

  #submenu-back {
    background: none;
    border: none;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    color: #575757;
    padding: 0.5rem 1rem;
    text-align: left;
    width: 100%;
  }

  #submenu-back::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    content: "\f0d9";
    float: left;
    font-size: 20px !important;
    color: #575757;
    margin-right: 0.3rem;
    margin-top: -3px;
  }

  #submenu-content {
    padding-top: 0.5rem;
  }

  .mobile-nav .sub-menu {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-top: 0.3rem;
  }

  .mobile-nav .sub-menu li {
    margin: 0;
    padding: 0.4rem 0.8rem;
    transition: background-color 0.2s ease;
  }

  .mobile-nav .sub-menu a {
    display: block;
    font-size: 1rem;
    color: #333;
    text-decoration: none;
  }

}


/* ---------------------------------------------- Mobile Navigation Ende -------------------


/* Slider */


/* Background-Slider */

#background-slideshow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.bg-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.4); /* dunkle Tönung */
  z-index: 1;
}

/* Content-Slider */

.swiper {
  width: 100%;
  aspect-ratio: 2 / 1; /* 1000 Breite : 500 Höhe */
  position: relative;
  overflow: hidden;
}

.swiper-wrapper,
.swiper-slide {
  height: 100%;
}

.swiper img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.swiper-button-prev, 
.swiper-button-next {
  color: #575757 !important;
}

.swiper-pagination-bullet-active {
  background:#ffcc00 !important;
}


/* Inhaltscontainer */

main .caption {
  text-align: center;
  font-size: 12px !important;
}

.js-click-card { cursor: pointer; }
/* optional: sichtbarer Fokusrahmen für Tastatur-Nutzer
.js-click-card:focus { outline: 2px solid currentColor; outline-offset: 2px; }
 */

.textteaser-teaser p {
  font-weight: bold;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.gallery-item img { border-radius: 5px; }
.no_round_corner img { border-radius: 0 !important; } /* etwas spezifischer, überschreibt sicher */


@media (min-width: 768px) {
    .textteaser {
        gap: 20px !important;
    }
}

.c-superheadline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 12px;
  line-height: 1.2;
  color: #A0A0A0;
  margin-bottom: .25rem;
  text-decoration: none;
}

.c-superheadline-text{
  font-size: 12px;
  line-height: 1.2;
}

.c-superheadline:hover {
  color: #ffcc00 !important;
  text-decoration: underline;
  color: #A0A0A0;
  margin-bottom: .25rem;
}

.c-superheadline i { display: inline-block; font-size: 1em; }


@media (min-width: 769px) {

  main .contentcontainer-column[data-container-column="left"],
  main .contentcontainer-column[data-container-column="middle"] {
      padding: 0 10px 0 0 !important;
  }

  .copyright{
    padding: 10px 0 0 20px;
  }

}

@media (max-width: 768px) {
  .contentcontainer {
    flex-direction: column !important; /* von nebeneinander zu untereinander */
  }

  .contentcontainer-column {
    width: 100%; /* volle Breite nutzen */
  }

  .copyright{
    padding: 0 10px 0 0;
  }

}


/* Footer */

footer {
  font-size: 14px;
  background: #ffcc00;
}

footer img {
  width: auto !important;
}

footer .contentcontainer[data-container-identifier="container_2_columns_left"] {
    grid-template-columns: 3fr 2fr;
}

.footer-adresse {
  color: #ffffff;
  padding: 0px;
}

footer figure img, figure picture {
    display: unset !important; 
    height: auto !important;
    max-width: 100% !important;
    margin: 0;
}

footer .gallery-row {
  width: 100%;
  margin-top: 10px;
}

main .gallery-item img, .gallery-item picture {
    width: unset;
    height: auto;
}

@media (min-width: 769px) {

  footer .contentcontainer[data-container-identifier="container_3_columns"] {
    background-color: #575757;
  }

}
@media (max-width: 768px) {

  .gallery-item-size-2 {
      --gallery-columns: unset !important;
      width: unset !important;
  }

}


footer .contentcontainer[data-container-identifier="container_3_columns"] {
  grid-template-columns: 1fr 1fr 2fr;
  padding: 20px;
}

footer .gallery-item.gallery-item-size-2 {
    display: flex;
    justify-content: center; /* horizontal zentrieren */
    align-items: center;     /* vertikal zentrieren */
    text-align: center;      /* falls Text enthalten ist */
}


/* Bottom Navigation etc. */

.footer-adresse a {
  color: #ffcc00 !important;
  text-decoration: none !important;
}

.bottom-navigation {
  padding: 0 20px 0 20px;
  font-size: 12px;
}

.bottom-navigation ul {
  list-style: none;         /* Keine Bulletpoints */
  margin: 0;
  padding: 0;
}

.bottom-navigation li {
  border-bottom: 1px solid white;  /* Trennlinie */
    padding: 0.5em 1em;
}

.bottom-navigation a {
  display: block;
  color: white ;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
}

.bottom-navigation li:hover,
.bottom-navigation li a:hover {
  background-color: #ffd500;
  color: #575757 !important;
}

.bottom-awards{
  padding: 0 0 0 40px;
}

.bottom-awards .caption {
  color: white !important;
  text-align: center;
  font-size: 10px !important;
}

.caption{
  margin: 0 0 10px 0;
}

.bottom-awards img {
  width: 85% !important;
}

.copyright{
  font-size: 12px;
  margin-top: 10px;
}

/* Cookie Banner / Info Seite*/

.cm-powered-by{
  display:none !important;
}


.cn-body {
  border: 2px solid;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.9) !important;
  background-image: url('/fileadmin/Template_Daten/Cookie.png') !important;
  background-repeat: no-repeat !important;
  background-position: left 20px top 25px !important;
  background-size: 20% auto !important;
}

.cn-body p{
  margin-left: 90px !important;
}

.cm-btn{
  font-weight: bold;
  border: 2px solid #ffd500 !important;
}

.cm-btn-danger{
  color: #575757 !important;
  border: 2px solid #ffd500 !important;
}

.cm-link{
  color: #575757 !important;
  font-weight: bold !important;
}

.cm-link:hover{
  color: #ffd500 !important;
}

.cm-btn-success{
  color: #575757 !important;
  background-color: #ffd500 !important;
}

.cm-list-label .slider::before{
  background-color: #575757 !important;
}

.cm-list-input:checked + .cm-list-label .slider::before{
  background-color: #ffd500 !important;
}

.cookie-info-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #ffcc00;
  padding: 2px;
  border-radius: 5px;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cookie-info-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.cookie-info-box img {
  width: 50px;
  height: 50px;
}

.cookie-info-box:hover {
  background-color: #ffd700;
}

/* === Media Query: max-width: 768px (Mobile) === */
@media (max-width: 768px) {

  main{
    padding: 0 12px 0 12px ;
  }

  .hide-on-mobile {
    display: none;
  }

  .sub-menu li.active > a::after,
  .subnav-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ffd500;
  }
  
  .top-logo img {
    max-width: 150px !important;
  }
  
  #mainNav.hauptnavigation,
  .top-navigation {
    display: none;
  }

  #menu-toggle {
    display: flex;
  }

  a::after, a::before {
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  .swiper-button-next, .swiper-button-prev {
    display: none !important;
  }

  .bottom-awards {
     padding: 0; 
  }

  footer .contentcontainer {
    background-color: #575757;
    padding: 10px 10px 10px 10px;
  }

  footer .contentcontainer[data-container-identifier="container_2_columns_left"] {
    background-color: #ffd500;
  }
}


/* === Media Query: min-width: 769px (Desktop) === */
@media (min-width: 769px) {

  .main-menu li:hover > ul.sub-menu {
    display: flex;
  }

  .main-menu li ul.sub-menu li {
    display: block;
    white-space: nowrap;
    line-height: 20px;
  }

  .main-menu li ul.sub-menu li a {
    display: block;
    padding: 10px 15px;
    color: #575757;
    text-decoration: none;
    background-color: #ffcc00 !important;
  }

  .main-menu li ul.sub-menu li a:hover {
    background-color: #f3de88 !important;
  }
}

/* === Media Query: min-width: 992px (Large Desktop)=== */
/* --- Readmore: Mobile Clamping + Toggle --- */
@media (max-width: 768px) {

  /* Zielcontainer: bekannte Text-Wrapper + Fallback: der Readmore-Wrapper selbst */
  .ce-element.readmore .textteaser-item.textteaser-text,
  .ce-element.readmore .textpic-item.textpic-text,
  .ce-element.readmore .ce-bodytext,
  .ce-element.readmore .ce-text,
  .ce-element.readmore .rte,
  .ce-element.readmore {
    --rm-lines: 5;              /* Default-Zeilenzahl */
    --rm-bg: #fff;              /* ggf. an Hintergrund anpassen */
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rm-lines);
    line-clamp: var(--rm-lines);
    overflow: hidden;

    /* weiche Animation für Auf-/Zuklappen */
    transition: max-height var(--rm-dur, .35s) var(--rm-ease, ease);
    will-change: max-height;
  }

  /* Helferklassen: Zeilenzahl (jetzt auch für den Wrapper selbst) */

  .readmore-1  .textteaser-item.textteaser-text,
  .readmore-1  .textpic-item.textpic-text,
  .readmore-1  .ce-bodytext,
  .readmore-1  .ce-text,
  .readmore-1  .rte,
  .ce-element.readmore.readmore-1  { --rm-lines: 1 !important; }

  .readmore-2  .textteaser-item.textteaser-text,
  .readmore-2  .textpic-item.textpic-text,
  .readmore-2  .ce-bodytext,
  .readmore-2  .ce-text,
  .readmore-2  .rte,
  .ce-element.readmore.readmore-2  { --rm-lines: 2 !important; }

  .readmore-3  .textteaser-item.textteaser-text,
  .readmore-3  .textpic-item.textpic-text,
  .readmore-3  .ce-bodytext,
  .readmore-3  .ce-text,
  .readmore-3  .rte,
  .ce-element.readmore.readmore-3  { --rm-lines: 3 !important; }

  .readmore-4  .textteaser-item.textteaser-text,
  .readmore-4  .textpic-item.textpic-text,
  .readmore-4  .ce-bodytext,
  .readmore-4  .ce-text,
  .readmore-4  .rte,
  .ce-element.readmore.readmore-4  { --rm-lines: 4 !important; }

  .readmore-5  .textteaser-item.textteaser-text,
  .readmore-5  .textpic-item.textpic-text,
  .readmore-5  .ce-bodytext,
  .readmore-5  .ce-text,
  .readmore-5  .rte,
  .ce-element.readmore.readmore-5  { --rm-lines: 5 !important; }

  .readmore-6  .textteaser-item.textteaser-text,
  .readmore-6  .textpic-item.textpic-text,
  .readmore-6  .ce-bodytext,
  .readmore-6  .ce-text,
  .readmore-6  .rte,
  .ce-element.readmore.readmore-6  { --rm-lines: 6 !important; }

  .readmore-7  .textteaser-item.textteaser-text,
  .readmore-7  .textpic-item.textpic-text,
  .readmore-7  .ce-bodytext,
  .readmore-7  .ce-text,
  .readmore-7  .rte,
  .ce-element.readmore.readmore-7  { --rm-lines: 7 !important; }

  .readmore-8  .textteaser-item.textteaser-text,
  .readmore-8  .textpic-item.textpic-text,
  .readmore-8  .ce-bodytext,
  .readmore-8  .ce-text,
  .readmore-8  .rte,
  .ce-element.readmore.readmore-8  { --rm-lines: 8 !important; }

  .readmore-9  .textteaser-item.textteaser-text,
  .readmore-9  .textpic-item.textpic-text,
  .readmore-9  .ce-bodytext,
  .readmore-9  .ce-text,
  .readmore-9  .rte,
  .ce-element.readmore.readmore-9  { --rm-lines: 9 !important; }

  .readmore-10 .textteaser-item.textteaser-text,
  .readmore-10 .textpic-item.textpic-text,
  .readmore-10 .ce-bodytext,
  .readmore-10 .ce-text,
  .readmore-10 .rte,
  .ce-element.readmore.readmore-10 { --rm-lines: 10 !important; }

  /* Fade nur, wenn wirklich gekürzt wird */
  .ce-element.readmore .textteaser-item.textteaser-text::after,
  .ce-element.readmore .textpic-item.textpic-text::after,
  .ce-element.readmore .ce-bodytext::after,
  .ce-element.readmore .ce-text::after,
  .ce-element.readmore .rte::after,
  .ce-element.readmore::after {
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height: 3em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--rm-bg));
    pointer-events:none;
    opacity: 0;                 /* default: unsichtbar */
    transition: opacity .2s;
  }
  .ce-element.readmore .textteaser-item.textteaser-text.is-clamped::after,
  .ce-element.readmore .textpic-item.textpic-text.is-clamped::after,
  .ce-element.readmore .ce-bodytext.is-clamped::after,
  .ce-element.readmore .ce-text.is-clamped::after,
  .ce-element.readmore .rte.is-clamped::after,
  .ce-element.readmore.is-clamped::after { opacity: 1; }

  /* Erweiterter Zustand: keine Zeilenbegrenzung & kein Fade */
  .ce-element.readmore .textteaser-item.textteaser-text.is-expanded,
  .ce-element.readmore .textpic-item.textpic-text.is-expanded,
  .ce-element.readmore .ce-bodytext.is-expanded,
  .ce-element.readmore .ce-text.is-expanded,
  .ce-element.readmore .rte.is-expanded,
  .ce-element.readmore.is-expanded {
    display:block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }

  /* Während der Messung/Animation Clamp aufheben, sauber clippen */
  .ce-element.readmore .textteaser-item.textteaser-text.is-animating,
  .ce-element.readmore .textpic-item.textpic-text.is-animating,
  .ce-element.readmore .ce-bodytext.is-animating,
  .ce-element.readmore .ce-text.is-animating,
  .ce-element.readmore .rte.is-animating,
  .ce-element.readmore.is-animating {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: hidden;
  }

  /* Button-Stil (unverändert) */
  .readmore-toggle{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: .35rem;
    margin-top: .5rem;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    color: var(--link-color, #575757);
    text-transform: none !important;
    font-variant-caps: normal;
    letter-spacing: normal;
  }
  .readmore-toggle .fa{ line-height: 1; }
}




/* INHALTS basierte STYLES abhängig von der item ID */

.c246{
  background-color: #ffd500 !important;
}

.c298 figure {
    flex: unset !important;
    max-width: unset !important;
}

@media (min-width: 769px) {

  .c313 .contentcontainer-column[data-container-column="middle"] {
    padding: 0 10px 0 10px !important;
  }

  .c329 .contentcontainer-column[data-container-column="middle"] {
    padding: 0 0 0 10px !important;
  }

  .c329 .contentcontainer-column[data-container-column="right"] {
    padding: 0 0 0 15px !important;
  }

  .c329 .contentcontainer-column[data-container-column="right"] h5 {
    padding: 0 0 5px 0 !important;
  }

  .c329 .contentcontainer-column[data-container-column="right"] li {
    padding: 5px 0 5px 0 !important;
  }

}