/* ==========================================================================
   Farben, Settings
   ========================================================================== */

:root {
/*  --hellblau: #2891c1;*/
  --hellblau: #0b6c99;
  --dunkelblau: #003c58;
  --gelb: #fdc400;
  --gruen: #247e48;
  --beige: #e6e8d0;
  --rotbraun: #b03600;
}

.text-hellblau {color: var(--hellblau);}
.bg-hellblau {background-color: var(--hellblau);}
.text-dunkelblau {color: var(--dunkelblau);}
.bg-dunkelblau {background-color: var(--dunkelblau);}
.text-gelb {color: var(--gelb);}
.bg-gelb {background-color: var(--gelb);}
.text-gruen {color: var(--gruen);}
.bg-gruen {background-color: var(--gruen);}
.text-rotbraun {color: var(--rotbraun);}
.bg-rotbraun {background-color: var(--rotbraun);}

@media (min-width: 2200px) {
  .container-fluid {
    max-width: 2000px;
  }
}

@media screen and (max-width: 4000px) {
  .container-fluid {
      padding-right: 200px;
      padding-left: 200px;
  }
}

@media screen and (max-width: 1680px) {
  .container-fluid {
      padding-right: 76px;
      padding-left: 76px;
  }
}

@media screen and (max-width: 1280px) {
  .container-fluid {
      padding-right: 26px;
      padding-left: 26px;
  }
}

/* ==========================================================================
   Schriften
   ========================================================================== */

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bebas-neue-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* protest-strike-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Protest Strike';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/protest-strike-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-sans-3-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-3-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/source-sans-3-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/source-sans-3-v18-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* source-serif-4-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-serif-4-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-serif-4-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-serif-4-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-serif-4-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/source-serif-4-v13-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/source-serif-4-v13-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* oswald-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/oswald-v56-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v56-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/oswald-v56-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/oswald-v56-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oswald-v56-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
    url('../fonts/Font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   Standards
   ========================================================================== */

html {
     background: 
        linear-gradient(to bottom, 
          var(--beige) 30%,
          var(--gelb) 30%
        );
    height: 100%;
}

body {
    background: 
    linear-gradient(to bottom, 
      var(--beige) 80%, /* Rot für die ersten 80% */
      var(--gelb) 30%  /* Blau für die letzten 20% */
    );
  background-repeat: no-repeat; /* Verhindert Wiederholung des Hintergrunds */
  background-size: 100% 100%; /* Deckt die gesamte Höhe und Breite ab */
   font-family: "Source Sans 3", sans-serif;
}

/*@media (min-width: 1800px) {
  p {font-size: 1.1em;}
}*/

h1,h2,h3,h4,h5,h6 {
    font-family: "Oswald", sans-serif;
	color: var(--dunkelblau);
}

p,ul,table {
    /*font-family: "Source Serif 4", serif;*/
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

p {
	color: #000;
}

p.lead {
    font-weight: bold;
    color: var(--dunkelblau);
}

/* ----------- LINKS ------------- */

a {
	color: var(--dunkelblau);
	transition: all 0.4s; /* explorer 10 */
    -webkit-transition: all 0.4s; /* chrome & safari */
    -moz-transition: all 0.4s; /* firefox */
    -o-transition: all 0.4s; /* opera */
    text-decoration: none;
}

a:hover {color: var(--gelb);}
.bg-gelb a:hover {color: var(--hellblau);}

a:focus {
  	outline: none;
  	outline: 0px auto -webkit-focus-ring-color;
}

::selection {
  	background: var(--gelb); /* WebKit/Blink Browsers */
  	color: var(--dunkelblau);
}

::-moz-selection {
  	background: var(--gelb); /* Gecko Browsers */
  	color: var(--dunkelblau);
}

.breadcrumb {margin:0;}

.downloads a {text-decoration: none !important;}

ul.pagination li a {text-decoration: none !important;}

.page-item .active li a {
    background-color: var(--dunkelblau) !important;
}

.active > .page-link, .page-link.active {
  color: #fff !important;
  background-color: var(--dunkelblau);
  border-color: var(--dunkelblau);
}

a.page-link {color: var(--hellblau) !important;}


/* ----------- LIST BULLETS -> FONT AWESOME ------------- */

/*li:before {    
font-family: 'FontAwesome';
font-family: 'Font Awesome\ 5 Free';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}*/

blockquote {
  font-size: 1.4em;
  width:60%;
  margin:50px auto;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid #78C0A8 ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

blockquote::before {
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after {
  content: '';
}

blockquote span {
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* noch zu sortieren */

.main-menu-content .dropdown-item.list-group-item.list-group-item-action.dropdown-link-colored {padding:2px 0 !important}

@media screen and (orientation: landscape) and (max-height: 600px) {
    .main-menu-content .dropdown-item.list-group-item.list-group-item-action.dropdown-link-colored {padding:0px 0 !important}
}

/* ==========================================================================
   Mega Menü
   ========================================================================== */


.nav-link {
    font-family: "Oswald", sans-serif;
    font-size: 1.4em;
    display: block;
/*    color: var(--dunkelblau);*/
    color: #fff;
    letter-spacing: 0.01em;
    padding: 20px 40px;
}

@media screen and (orientation: landscape) and (max-width: 1680px) {
    .nav-link {
        font-size: 1.2em;
        padding: 20px 20px;
    }
}

@media screen and (orientation: landscape) and (max-width: 1280px) {
    .nav-link {
        font-size: 1.1em;
        padding: 20px 20px;
    }
}

.dropdown-menu {
    font-family: "Source Sans 3", sans-serif !important;
    line-height: 1.1em !important;
}

.dropdown-menu .active {
    margin-bottom: 6px;
    line-height: 1.2em
}


.main-menu-item {
        position: static;
}

    .main-menu-item .dropdown-menu {
/*        width: 136% !important;*/
width: 100%;
        left: 0;
        right: 0;
        bottom: 100%;
        margin-bottom: 0.5rem;
        display: none;
        border: none;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        z-index: 1030!important; /* Hoher z-index, um über anderen Elementen zu erscheinen */
        margin: 0 auto;
    }


@media (min-width: 2200px) {
    .main-menu-item .dropdown-menu {
        width: 1800px;
        margin-left: -120px !important;
    }
}



    .main-menu-item .dropdown-menu.show {
        display: block;
    }

   
    .menu-category-title {
        color: #0056b3;
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .menu-category-list {
        list-style-type: none;
        padding-left: 0;
    }

    .menu-category-item {
        margin-bottom: 0.25rem;
    }

    .menu-category-link:hover {
        color: #0056b3;

    }

    @media (max-width: 1199px) {
        .main-menu-item .dropdown-menu {
            display: none !important;
        }
            }



    /* Dropdown-Links */
    .dropdown-item {
        display: block;
        width: 100%;
        padding: 0.5rem 1rem;
        color: #333;
        text-decoration: none;
        background-color: transparent;
        border: 0;
    }

    .dropdown-item:hover {
        background-color: #f8f9fa;
    }


.menu-category-title {
    color: #006eb7;
    font-weight: 600;
/*    text-transform: uppercase;*/
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #006eb7;
}

.menu-category-link i {
    opacity: 0.5;
    margin-right: 10px;
    transition: opacity 0.3s ease;
}

.menu-category-link:hover i {
    opacity: 1;
    -webkit-transition: all 0.4s;
}

@media (max-width: 768px) {
    .menu-category-link {
        padding: 0.5rem 1rem;
    }
}


.main-menu-item .dropdown-menu.show {
/*    transform: translate(-229px, -229px) !important;*/
    transform: translate(0, -229px) !important;
}


/*@media (min-width: 1200px) and (max-width: 1280px) {
    .main-menu-item .dropdown-menu.show {
        transform: translate(0px, -260px) !important;
    }
}*/

@media (max-width: 1200px) {
    .main-menu-item .dropdown-menu.show {
        transform: translate(0px, -200px) !important;
    }
}


 .dropdown-menu-custom {
      display: none; /* Verhindert, dass das Dropdown-Menü standardmäßig sichtbar ist */
      position: absolute;
      z-index: 1000;
      left: 0;
      right: 0;
      top: 100%;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s, opacity 0.5s linear;
    }

    /* Dropdown sichtbar machen, wenn es aktiviert wird */
    .dropdown-menu-custom.show {
      display: block; /* Zeigt das Dropdown-Menü */
      visibility: visible;
      opacity: 1;
      transition: opacity 0.3s ease-out;
    }

    /* Dropup-Stil: Zeigt das Dropdown-Menü nach oben */
    .dropup .dropdown-menu-custom {
      bottom: 100%;
      top: auto;
    }


    .dropdown-item:hover {
        background-color: #f8f9fa!important; /* Heller Hintergrund beim Hover */
        color: #2891c1!important; /* Blaue Farbe beim Hover */
    }

    .list-group-item.list-group-item-action.active:hover {
color: #fff!important;
background-color: var(--dunkelblau)!important;
border: none;

}


.dropdown-item {
white-space: wrap!important;
}

.main-menu-item .dropdown-menu {
border: none !important;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
}


.dropdown-item.list-group-item.list-group-item-action.dropdown-link-colored {
/*    font-family: "Source Serif 4", serif;*/
 font-family: "Source Sans 3", sans-serif;
font-size: 1rem;
color: #000;
}


    /* Styling für die Links im Dropdown */
    .dropdown-menu-custom a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
      font-size: 16px;
/*       font-family: "Source Sans 3", sans-serif;*/
    }

    /* Hover-Effekt für die Links */
    .dropdown-menu-custom a:hover {
      background-color: #f8f9fa;
      color: #007bff;
    }

    /* Optionale Anpassung der Dropdown-Menügröße */
    .width-dropdown {
      width: 100%;
    }

  /*  .container {
      padding-left: 0;
      padding-right: 0;
    }*/

    .row {
      margin-left: 0;
      margin-right: 0;
    }

    /* Layout der Spalten im Dropdown-Menü */
    .dropdown-menu-custom .row > .col-md-3 {
      padding: 5px;
    }

    /* Responsives Design: Wenn auf kleineren Bildschirmen das Dropdown eine vollständige Breite einnimmt */
    @media (max-width: 767px) {
      .dropdown-menu-custom .col-md-3 {
        width: 100%;
      }
    }

.navbar-nav .dropdown-menu {
  position: absolute;
  top: 100%;
left:14.5%;
  background-color: #fff;
box-shadow: 0 17px 14px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  display: none;
}

 @media (max-width: 2000px) {
      .navbar-nav .dropdown-menu {
              left:0;
              width: 100%;
            }
    }


/*  @media (min-width: 2200px) {
      .navbar-nav .dropdown-menu {
              left:14.5%;
            }
    }*/


.dropdown-menu.mt-0.width-dropdown {
  /*width: 1800px !important;*/
  width: 100% !important;
}

@media (min-width: 1920px) {
    .dropdown-menu.mt-0.width-dropdown {
      width: 1800px !important;
    }
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #fff;
  border-color: none;
}

.navbar-nav > li > a {
  color: #fff;
/*  text-transform: uppercase;*/
}


@media (min-width: 767px) {
  /*.fixed {
    height: 70px;
    width: calc(100% - 26px);
  }*/
  .fixed {
    height: 70px;
    position: fixed; 
    top: -1px; 
    z-index: 2;
  }
}


@media (min-width: 767px) {
  nav.fixed .navbar-nav > li > a {
    font-size: 0.9em;
    line-height: 1.1em;
    padding: 10px;
  }


  nav.fixed .mega-dropdown {
    background: #fff;
    border-top: none;
    border-left: 1px solid #e8e8e8;
  /*  border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;*/
    width: 285px;
  }

  nav.fixed .mega-dropdown-menu {
    margin-top: -22px;
  }

  nav.fixed .mega-dropdown:first-child {
    border-left: none;
  }

  nav.fixed .mega-dropdown a {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
  }

  nav.fixed .mega-dropdown-menu a {
    transition: all 0.4s; /* explorer 10 */
    -webkit-transition: all 0.4s; /* chrome & safari */
    -moz-transition: all 0.4s; /* firefox */
    -o-transition: all 0.4s; /* opera */
  }
}


 .offcanvas-header {
    background-color: #2c3e50; /* Dunkles Blau für den Header */
    color: #ecf0f1; /* Helles Grau für den Text */
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.09); /* Etwas dunklerer Rand */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offcanvas-header h5 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color:#fff;
}


.offcanvas-body .dropdown-item {
  padding: 6px 0 6px 0 !important;
}


/* Letztes Submenü kleiner darstellen */
.offcanvas-body .submenu .submenu {
    font-size: 0.85rem;  /* Kleinerer Text */
    padding: 6px 0 6px 0 !important;
}

.offcanvas-body .submenu .submenu .nav-link {
    font-size: 0.85rem;
    padding: 6px 20px !important;
/*     font-family: 'Arial', sans-serif !important;*/
        font-family: "Source Sans 3", sans-serif !important;
     background-color: #001c29;
}

.offcanvas-body .submenu .nav-link {
    font-size: 1.2em;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}




/*.list-unstyled a {
padding-left: 40px !important;
}*/
.list-unstyled .dropdown-menu.show a {
padding-left: 40px!Important;
}


.offcancas-body .nav-item-dropdown .dropdown-menu {
  border-bottom: 1px solid rgba(255,255,255,0.09);
  margin: 0;
}


/* Helle, zarte Trennlinie zwischen den Listenelementen */
.offcanvas-body .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

/* Abstände am unteren Rand der letzten Listenelemente entfernen */
 .offcanvas-body .nav-item:last-child {
    border-bottom: none;
}

/* Helle Trennlinie zwischen den Dropdown-Elementen */
.offcanvas-body .list-unstyled.ps-3 li {
    border-bottom: 1px solid rgba(255,255,255,0.09); /* Sehr helle Trennlinie */
}

.offcanvas-body .list-unstyled.ps-3 li:last-child {
    border-bottom: none;
}

.offcanvas-body .submenu .dropdown-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.09); /* Sehr helle Trennlinie */
}

.offcanvas-body .submenu .dropdown-menu li:last-child {
    border-bottom: none;
}


.submenu .dropdown-menu.show {
  background-color: #001c29;
}

.submenu {
background-color: #012d42;
}


.dropdown-menu.show {
  border-radius: 0px;
}

.navbar-toggler-icon {
  color:#fff;
  border: none;
}

.navbar-toggler .fas.fa-bars {
  color: #fff;
}



.navbar-toggler.px-0:active {
  border: none;
  box-shadow: none;
  outline: none;
}




.main-menu-item .dropdown-item.active {
    color: var(--gelb);
    -webkit-transition: all 0.4s;
    transition: all 0.4s; /* Für nicht-webkit-Browser */
}

button:focus:not(:focus-visible) {
  outline: none;
}


@media (max-width: 991px) {
  .navbar {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
  }
}



/* Schöner Übergang für das ganze Menü */
.offcanvas {
    transition: transform 0.4s ease-in-out;
}


.navbar {
            background-color: #003c58;
        }

        .navbar .navbar-nav .nav-link {
            color: white;
        }

        

        /* Stil für Offcanvas-Menü */
        .offcanvas {
            background-color: #003c58; /* Dunkelblauer Hintergrund */
            color: white; /* Weiße Schriftfarbe */
            z-index: 10000; /* Höherer Z-Index, um sicherzustellen, dass es ganz oben liegt */
        }
        .offcanvas .navbar-nav .nav-link {
            color: white;
        }

        .offcanvas .navbar-nav .nav-link:hover {
            background-color: #02508f;
        }

        .offcanvas-header {
            background-color: #003c58;
        }

        .offcanvas-body {
            padding: 1.5rem 1rem;
        }

        .offcanvas .btn-close {
            color: white;
        }

       




/*Navbar Dropdown Mainnav öffnen on Hover */
@media (min-width: 767px) {
 #navbarExampleOnHover .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.dropdown-menu.dropdown-menu-arrow-1.show, 
.dropdown-menu.dropdown-menu-arrow-2.show, 
.dropdown-menu.dropdown-menu-arrow-3.show, 
.dropdown-menu.dropdown-menu-arrow-4.show {border-bottom: 20px solid var(--gelb) !important;}


.dropdown-menu-arrow-1::before, 
.dropdown-menu-arrow-2::before,
.dropdown-menu-arrow-3::before,
.dropdown-menu-arrow-4::before {
  content: '';
  position: absolute;
  border-width: 35px;
  border-style: solid;
  z-index: 1;
}

/* Dropdown 1: Pfeil an der gewünschten Position */
.dropdown-menu-arrow-1::before {
  top: 100%; /* Pfeil nach unten, unterhalb des Menüs */
  left: 20%; /* Anpassen je nach gewünschter Position */
  border-color: var(--gelb) transparent transparent transparent; /* Weißer Pfeil nach unten */
}

@media (max-width: 1400px) {
    .dropdown-menu-arrow-1::before {
      left: 10%; /* Anpassen je nach gewünschter Position */
    }
}

/*
@media (min-width: 1907px) {
  .dropdown-menu-arrow-1::before {
    top: 100%;
    left: 331px;
  }
}

@media (min-width: 2107px) {
  .dropdown-menu-arrow-1::before {
    top: 100%;
    left: 451px;
  }
}

@media (min-width: 2207px) {
  .dropdown-menu-arrow-1::before {
    top: 100%;
    left: 471px;
  }
}
*/

/* Dropdown 2: Pfeil an der gewünschten Position */
.dropdown-menu-arrow-2::before {
  top: 100%; /* Pfeil nach unten, unterhalb des Menüs */
  left: 34%; /* Zentrieren oder anpassen */
  border-color: var(--gelb) transparent transparent transparent; /* Weißer Pfeil nach unten */
}

.dropdown-menu-arrow-3::before {
  top: 100%; /* Pfeil nach unten, unterhalb des Menüs */
  left: 49%; /* Zentrieren oder anpassen */
  border-color: var(--gelb) transparent transparent transparent; /* Weißer Pfeil nach unten */
}


.dropdown-menu-arrow-4::before {
  top: 100%; /* Pfeil nach unten, unterhalb des Menüs */
  left: 64%; /* Zentrieren oder anpassen */
  border-color: var(--gelb) transparent transparent transparent; /* Weißer Pfeil nach unten */
}


/* Navbar initial state */
   .navbar {
      position: fixed;
      top: -100px; /* Hide navbar initially */
      z-index: 9999;
      transition: top 0.3s ease-in-out;
      padding: 0;
      width:100%;
    }

    .navbar.scrolled {
      top: 0; /* Slide navbar down */
    }

    .mega-dropdown-menu-buergerservice {
          margin-left: 30px;
        }

   
    .dropdown:hover .dropdown-menu {
      opacity: 1; /* Sichtbar */
    }

    .dropdown-menu.mt-0.width-dropdown {
border: none;
border-radius: 0;
}


.mega-dropdown-menu > li {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}

.mega-dropdown-menu > li > ul > li {
  list-style: none;
  display: block;
}

.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 3px 5px;
}

/* Optional: Um die Spaltenbreite zu begrenzen */
.mega-dropdown-menu > li > ul > li {
  width: 23%; /* Oder eine andere Breite, je nach Bedarf */
}

/* Wenn du einen Abstand zwischen den Spalten haben möchtest */
.mega-dropdown-menu > li > ul > li:not(:last-child) {
  margin-right: 10px;
}


.logo {max-width: 320px; z-index:3; position: relative;}

@media (min-height: 1220px) {
    .main-menu {margin-top: 60px;}
}

@media (max-width: 768px) {
    .main-menu {margin-top: 40px;}
}

.main-menu .icon {
    margin: 0 auto;
    max-height: 60px;
    display: block;
}

@media (max-width: 576px) {
    .main-menu .icon {max-height: 40px; max-width: 40px;}
}

.main-menu a {
    font-family: "Oswald", sans-serif;
    font-size: 1.6em;
    line-height: 1.2em;
    letter-spacing: 0.02em;
    transition: none; /* explorer 10 */
    -webkit-transition: none; /* chrome & safari */
    -moz-transition: none; /* firefox */
    -o-transition: none; /* opera */
}

@media (max-width: 1280px) {
    .main-menu a {font-size: 1.4em;}
}

@media (max-width: 576px) {
    .main-menu a {font-size: 1.1em;}
}

.main-menu-link.show {
  filter: brightness(0) 
  saturate(100%) 
  invert(86%) 
  sepia(37%) 
  saturate(4276%) 
  hue-rotate(356deg) 
  brightness(100%) 
  contrast(110%);


}

.offcanvas .dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
  right: auto; /* Überschreibt das Standardverhalten */
}

.offcanvas ul.show {
  position: unset!important;
  inset: auto!important;
  transform: none!important;
}


#btn-back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: none;
  z-index: 100000;
  background-color: white;
  color: black;
  border: none;
  padding: 15px 20px;
  border-radius: 0px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#btn-back-to-top:hover {
  background-color: #003c58; 
  color: white;
}

.dropdown-item.list-group-item.list-group-item-action.dropdown-link-colored {
transition: all 0.2s ease-in;
}

.nav-icons a:hover img,
.main-menu-link:hover  {filter: brightness(0) saturate(100%) invert(86%) sepia(37%) saturate(4276%) hue-rotate(356deg) brightness(100%) contrast(110%);}

.nav-icons {position: relative; z-index: 3;}
.nav-icons img {max-width: 60px;}


.main-menu-link {
  position: relative;
  display: block; /* Der gesamte Bereich wird anklickbar */
  text-decoration: none;
  color: inherit; /* Textfarbe bleibt erhalten */
}

.main-menu-link img {
  display: block;
  margin: 0 auto; /* Bild wird zentriert */
}

@media screen and (orientation: landscape) and (max-height: 1000px) {
    .main-menu-link img {height: 50px; width: auto;}
}

.dropdown-menu-arrow-1 {
  /* Optional: Style für Dropdown mit Pfeil */
/*  border: 1px solid #ddd;*/
/*  border-radius: 5px;*/
/*  padding: 10px;*/
}


/* Scrollbar in Mobile Nav entfernen */
.navbar-collapse.in {
    overflow: hidden;
    max-height: none !important;
    height: auto !important;
}

/* Mobile Nav scrollbar machen */
@media (max-width: 576px){
  nav.navbar{
   max-height: 100vh;
   overflow: auto;
  -webkit-overflow-scrolling: touch;
  }
}

.navbar-toggler {border: none;}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler:hover i {
    color:var(--gelb) !important;
}

.nav-item {
  padding: 0.5rem 0xp;
}

.nav-item:hover > .nav-link, .nav-item:hover > .nav-link:active {
  background-color: #fff!important;
  color: var(--dunkelblau)!important;
}


.dropdown.is-open .dropdown-toggle::after {
  transform: rotate(180deg); /* Dreht den Pfeil */
}

.offcanvas .dropdown-menu {
  background-color: transparent;
  box-shadow: none;
  border: none;
  color: white !important;
  text-align: center;
}

.offcanvas .dropdown-item {
  color: #fff;
  text-align:left;
}

.dropdown-toggle::after {
    transition: transform 0.3s ease;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.nav-link {
    padding: 20px !important;
}


.list-group-item.list-group-item-action.active {
font-family: "Oswald", sans-serif;
font-size: 1.4em;
display: block;
color: var(--dunkelblau);
background-color: #fff;
border: none;
}

@media screen and (orientation: landscape) and (max-width: 1280px) {
    .list-group-item.list-group-item-action.active {
        font-size: 1.2em;
    }
}

.list-group-item.list-group-item-action.active:hover {
color: #fff;
background-color: var(--dunkelblau);
}

.dropdown-menu.show {
  display: block;
}

.stretched-link::after {
position: relative;
}


/* ==========================================================================
   Dropdown / Megamenü
   ========================================================================== */



/* ==========================================================================
   Submenu / Sidebarmenu
   ========================================================================== */

.list-group-item {
    position: relative;
    display: block;
/*    padding: .25rem 1rem;*/
    padding: .25rem 0rem;
    background-color: #fff;
    text-decoration: none !important; 
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #006eb7;
    border-color: #006eb7;
}

.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.list-group-item-action:focus, .list-group-item-action:hover {
    z-index: 1;
    color: #2891c1;
    text-decoration: none;
    background-color: #f8f9fa;
}

/*a.list-group-item:hover {padding-left: 20px;}*/

a.list-group-item i {opacity: 0.3;}
a.list-group-item:hover i {opacity: 0.8;}

/* ==========================================================================
   Sections
   ========================================================================== */

section,
footer {
    /* min-height: 400px;*/
    padding: 120px 0;
}

.skew {transform: skewY(-3deg);} /* Kippung Diagonale*/
.unskew {transform: skewY(3deg);} /* Rückwärts-Kippung des Inhalts, um Text gerade darzustellen */

@media (max-width: 767px) {
  header {
    background-attachment: scroll !important; /*mobile fix, Iphone/Safari "background-attachment: fixed" nicht möglich*/
  }
}

header {
    background-color: var(--dunkelblau);
    position: relative;
    width: 100%;
    height: 75vh;
    z-index: 1;
    transition: height 0.3s ease-in-out; /* Weiche Animation */
}

/*@media screen and (orientation: landscape) and (max-width: 1280px) {
    header {height:100vh;}
}*/

header.expanded {
    height: 100vh; /* Neue Höhe nach Klick */
}

@media screen and (orientation: landscape) and (max-height: 1000px) {
   header.expanded {
    min-height: 1000px; /* Neue Höhe nach Klick */
    }
}

header video {
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    opacity: 0.7;
/*    clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);*/
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* verhindert Interaktion */
}

/* Overlay für das Video */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 60, 88, 0.5); /* Deine Wunschfarbe mit 50% Transparenz */
    z-index: 2;
/*    clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%); /* Passend zum Video */
}

/* Text, der über dem Overlay liegt */
.header-content {
    position: relative;
    z-index: 3;
    color: white;
    padding-top: 120px;
    transition: height 0.3s ease-in-out; /* Weiche Animation */
}

header.expanded .header-content {
    transition: height 0.3s ease-in-out; /* Weiche Animation */
     padding-top: 360px;
     /*padding-top: 420px;*/
}

.header-content h1 {
    font-family: 'Protest Strike', sans-serif;
    color:#fff;
    font-size: 7em;
/*    font-weight: bold;*/
    line-height: 1em;
}

/*.header-content-small h1 {font-size: 5em;}*/
.header-content-small h1 {font-size: 4em !important;}

@media (max-width: 1680px) {
    .header-content-small h1 {font-size: 3em !important;}
}

.header-content span.h2 {
    font-family: 'Arial';
    font-weight: 900;
}

.header-content h1 span {margin-left:290px;}
.header-content span.h2 {margin-left:250px;}

@media (max-width: 1280px) {
    .header-content h1 span {margin-left:140px;}
    .header-content span.h2 {margin-left:100px;}
}

@media (max-width: 768px) {
    .header-content h1 {font-size: 5em;}
    .header-content-small h1 {font-size: 2em !important;}
    .header-content h1 span {margin-left:0;}
    .header-content span.h2 {margin-left:0;}
}

@media (max-width: 576px) {
    .header-content h1 {font-size: 3em;}
    .header-content h1 span {margin-left:0; font-size: 0.8em;}
}

.header-content a {color: #fff;}

@media (max-height: 1220px) {
    .header-content h1 {font-size: 5em;}
    .header-content {padding-top: 60px;}
}

@media (max-height: 980px) {
    .header-content h1 {font-size: 4em;}
    .header-content {padding-top: 40px;}
}

@media (max-height: 880px) {
    .header-content h1 {font-size: 3em;}
    .header-content {padding-top: 10px;}
}

@media screen and (orientation: landscape) and (max-height: 780px) {
    .header-content h1 {font-size: 2em;}
    .header-content {padding-top: 8px;}
    .header-content h1 span {margin-left:80px;}
    .header-content span.h2 {margin-left:40px;}
}

@media (max-height: 680px) {
    .header-caption {display:none; visibility:hidden;}
    .header-small .header-caption {display:block !important; visibility:visible !important;}
}

/*@media (max-height: 680px) {
    .header-caption {display:none; visibility:hidden;}
}*/


.header-big {min-height: 600px !important;}
.header-small {min-height: 400px !important;}


.striped-section {
    position: relative;
    margin-top: -80px;
    padding: 160px 0 40px 0 !important;
    background: linear-gradient(
/*        176deg, */
        rgba(0, 60, 88, 1) 0%, /* Erster Farbton */
        rgba(0, 60, 88, 1) 10%, /* Erster Farbton */
        rgba(254, 196, 0, 1) 10.2%, /* Zweiter Farbton */
        rgba(254, 196, 0, 1) 33%, /* Zweiter Farbton */
        rgba(230, 232, 208, 1) 33%, /* Dritter Farbton */
        rgba(230, 232, 208, 1) 100% /* Dritter Farbton */
    );
/*    clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);*/
    z-index: 200
}

@media screen and (orientation: landscape) and (max-height: 900px) {
   .striped-section {
        padding: 60px 0 !important;
        margin-top: -50px;
    }
}

@media (max-width: 767px) {
    .striped-section {
        padding: 60px 0 !important;
        margin-top: -20px;
    }
}

 /* Stil für die Boxen */
.box {
    position: relative;
    overflow: hidden;
    height: 540px; /* Höhe der Boxen */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Stil für das Hintergrundbild der Boxen */
.box-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

/* Stil für die Caption */
.box-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%; /* Höhe der Caption */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: right;
    padding: 30px 40px 40px 40px;
    box-sizing: border-box;
    transition: transform 0.3s ease, height 0.3s ease;
    transform: translateY(0);
    overflow: hidden; /* Verhindert, dass der Inhalt außerhalb der Caption sichtbar ist */
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
}

.box-title {
    font-family: 'Protest Strike', sans-serif;
    font-size: 2.6em;
    margin: 0;
}

.box-subtitle {
    font-size: 1em;
    margin: 0;
    opacity: 0; /* Untertitel zunächst unsichtbar */
    transition: opacity 0.3s ease;
    max-width: 50%;
    float: right;
    margin-top: 16px;
    font-weight: bold;
}

.box .stretched-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Höher als andere Elemente */
    display: block; /* Sicherstellen, dass es eine Fläche bekommt */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .box {height: 340px;}
    .box-caption {height: 30%;}
}

/* Stil für den Hover-Effekt */
.box:hover .box-image {
    transform: scale(1.1); /* Bild vergrößern */
}        

.box:hover .box-caption {
    height: 40%; /* Caption auf volle Höhe der Box erweitern */
    transform: translateY(-0%); /* Bewegt die Caption nach oben */
}

.box:hover .box-subtitle {
    opacity: 1; /* Untertitel sichtbar beim Hover */
}

/* Verschiedene Farben für die Captions */
.box-caption-blau {background: rgba(0, 77, 136, 0.8);}
.box:hover .box-caption-blau {background: rgba(0, 77, 136, 0.9);}
.box-caption-rotbraun {background: rgba(176, 54, 0, 0.8);}
.box:hover .box-caption-rotbraun {background: rgba(176, 54, 0, 0.9);}
.box-caption-gruen {background: rgba(12, 119, 14, 0.8);}
.box:hover .box-caption-gruen {background: rgba(12, 119, 14, 0.9);}
.box-caption-gelb {background: rgba(255, 186, 0, 0.8);}
.box:hover .box-caption-gelb {background: rgba(255, 186, 0, 0.9);}

section#content a {text-decoration: underline; color:var(--hellblau);}
section#content a:hover {color: var(--dunkelblau);}
section#content a.btn-outline-primary {text-decoration: none; color:var(--dunkelblau);}
section#content a.btn-outline-primary:hover {color: #fff;}

section#Features {
    position: relative;
    z-index: 3000
}

section#Links {
    font-family: "Oswald", sans-serif;
    font-size: 2em;
}

section#Links i {
    font-size: 1.8em;
}

@media (max-width: 768px) {
    section#Links a {font-size: 0.8em;}
}


/* ----------- Footer ------------- */

footer,
.footer-title,
footer p,
footer a {color: #fff;}

.footer-title {font-size: 1.8em;}

.copyright {padding: 20px 0 0 0 !important;}

.wappen {margin-top: -80px;}

/* ----------- RGB Overlay ------------- */

section#overlay {
	background: 
    linear-gradient(
      rgba(40, 0, 0, 0.55), 
      rgba(40, 0, 0, 0.55)
    ),
    /* bottom, image */
    /*url(../img/bg.jpg);
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;*/
}

/* ----------- PNG Overlay (für Muster z.B.) ------------- */

section#png-overlay {
  position: relative;
  background: url(../img/bg.jpg) center center;
  background-attachment: fixed;
}

section#png-overlay:before,
section#png-overlay:after {
    content: ''; /* you have to define that to make the pseudo elements work */
    position: absolute;
    top: 0;
}

section#png-overlay:before {
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/dots.png) repeat;
    opacity: 0.8;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
}

.btn {
    font-family: "Oswald", sans-serif;
    font-size: 1.6em;
    text-decoration: none !important;
}

.btn-outline-primary {
    border-radius: 50px;
    border-color: var(--dunkelblau);
    color: var(--dunkelblau);
    border-width: 2px;
}

.btn-outline-primary:hover {
    border-color: var(--dunkelblau);
    background-color: var(--dunkelblau);
    color: #fff;
}

 .btn-primary {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
 }

.back-to-top {
   background: #004286;
   background: rgba(11,47,85,0.6);
   position: fixed;
   color: #fff;
   bottom: 20px;
   right: 20px;
   padding: 10px 20px 10px 20px;
   transition: all 1s; /* explorer 10 */
  -webkit-transition: all 1s; /* chrome & safari */
  -moz-transition: all 1s; /* firefox */
  -o-transition: all 1s; /* opera */
  font-size: 1.9em;
}

.back-to-top:hover {
  background: #004286;
  background: rgba(11,47,85,1);
}

.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus {color:#fff;}

.btn-down  {
  background: #fff;
  width: 88px; 
  height: 88px; 
  border-radius: 50%;
  margin: 0 auto; 
  display: block; 
  position: absolute; 
  right: 0;
  left: 0; 
  margin-top: -55px;
  padding: 30px 0 0 0;
}

.btn-down a {color: #717070;}
.btn-down a:hover {color: #9f9f9f;}

/* ==========================================================================
   Carousel / Slider
   ========================================================================== */

.carousel-item {
  height: 75vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media (max-width: 768px) {
 .carousel-item {
    height: 40vh;
    min-height: 250px;
  }
}

.carousel-control-next, .carousel-control-prev {
    color: #fff;
    text-align: center;
    font-size: 2.8em;
}

.carousel-control-next, .carousel-control-prev {
    width: 10%;
}

.carousel-caption-title {
    font-size: 3.4em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2em;
}

.carousel-caption-info p {
    font-size: 1.6em;
    color: #fff;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 15%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: left;
}

/* ==========================================================================
   Akkordeon
   ========================================================================== */

.accordion-item {
            border-radius: 0 !important;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .accordion-header {font-family: Arial, sans-serif;}

        .accordion-button {
            background-color: var(--dunkelblau);
            color: #ffffff;
            border-radius: 0 !important;
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--dunkelblau);
            color: #ffffff;
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: none;
        }

        .accordion-button:hover {
            background-color: #004080; /* Etwas helleres Dunkelblau für Hover */
        }

        .accordion-body {
            background-color: #ffffff;
            color: #000000;
        }

        /* Pfeile (Icons) in Weiß */
        .accordion-button::after {
            filter: invert(1); /* Macht die Pfeile weiß */
        }


/* ==========================================================================
   Tabellen, Tables
   ========================================================================== */

.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: var(--dunkelblau);
  --bs-table-border-color: #fff;
}

 @media (max-width: 768px) {
    .table tbody, 
    .table tr {
      display: block;
    }
    .table td {
      display: flex;
    }
    .table td::before {
      content: attr(data-label);
    }
  }


/* ==========================================================================
   Cards, News, Boxen etc.
   ========================================================================== */

/* Karten ohne abgerundete Ecken und Rahmen, dafür mit Schatten */
.card {
    border: none; /* Kein Rahmen */
    border-radius: 0; /* Keine abgerundeten Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für die Karten */
    transition: box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Bild mit schräger Unterkante */
.card-img-top {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%); /* Schräger Abschluss am unteren Rand */
    object-fit: cover;
    border-radius: 0;
    max-height: 280px;
    transition: transform 0.3s ease-in-out;
}

/* Optional: Hover-Effekt für die Karten */
.card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Verstärkter Schatten bei Hover */
    transition: box-shadow 0.3s ease-in-out;
/*            background: var(--gelb);*/
}

/*.card a:hover .card-img-top {
    transform: scale(1.1);
}*/

.card:hover .card-img-top {
    transform: scale(1.1);
}

.card-title {
    font-family: "Oswald", sans-serif;
    color: var(--dunkelblau);
    font-size: 1.6em;
}

/*@media (max-width: 1680px) {
    .card-title {font-size: 1.6em;}
}*/

.card.bg-dunkelblau p {color:#fff;}


/* ==========================================================================
   Firmen und Vereinsregister
   ========================================================================== */

.organisation i {width: 20px;}

.organisation h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
}

.organisation a {text-decoration: none !important;}
.organisation a:hover {text-decoration: underline !important;}

/* ==========================================================================
   Galerie
   ========================================================================== */

.thumb-box {
  display: inline-block !important;
  position: relative !important; 
  overflow: hidden;
}

.thumb-box-overlay {
  visibility:hidden;
  opacity:0;
}

.thumb-box a{
  color: transparent;
}

.thumb-box a:hover .thumb-box-overlay {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  text-align: center;
  position: absolute;
  background-color: rgba(46, 85, 75, 0.8);
  color: #fff;
  width: 100%;
  height: 100%;  
}

.thumb-box-overlay span {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

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

/*// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }*/


/* ==========================================================================
   Cookie Consent
   ========================================================================== */

/* Cookie Hinweis */
/*.cc-message {font-size: 0.8em;}*/

a.cc-dismiss{
  transition: all .25s;
}

a.cc-dismiss:hover{
  color: #ffffff;
  background-color: #b1d60a;
  transition: all 0.5s;
}


/* ==========================================================================
   Modal Center
   ========================================================================== */

 .modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
@media(max-width: 768px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

/* ==========================================================================
   Animationen
   ========================================================================== */

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}


/* ==========================================================================
   IE Fixes
   ========================================================================== */

/* SVG correct size */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}