/*################################################################## FONTS */
/*### FONTS ###*/

/*     
@font-face {

  DO NOT FORGET TO ADD:
  font-display: swap;

}
*/



/*################################################################## DRUPAL */


































/*################################################################## BREITEN */
/*### BREITEN ###*/


.secCont .wrpBox {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}




/*### GRID ALL ###*/
.grd {
    display: grid;
    gap: 60px;
}



/*### GRID DETAILS ###*/
/* .grd.rHead {
    grid-template-columns: 1fr 3fr;
} */

/*  Headline    */
.block-plugin-page_title_block {
    padding-left: 60px;
    padding-right: 60px;
}



/*  Paragraphs   */
.pgLay {
    background-color: #efefef;
}
/*  Bei Verschachtelung nur erstes Objekt   */
.pgLay > .grd:first-of-type  {
    padding-left: 60px;
    padding-right: 60px;
}



/*  Padding inside fixed   */
.pgLay > .grd:first-of-type  {
    padding-top: 120px;
    padding-bottom: 120px;
}
.pgLay.noPadTop {
    padding-top: 0;
}
.pgLay.noPadBot {
    padding-bottom: 0;
}
.pgLay.noPadAll {
    padding-top: 0;
    padding-bottom: 0;
}



/*  Margin outside fixed  */
.pgLay .grd {
    margin-top: 120px;
    margin-bottom: 120px;
}
.pgLay.noMarTop {
    margin-top: 0;
}
.pgLay.noMarBot {
    margin-bottom: 0;
}
.pgLay.noMarAll {
    margin-top: 0;
    margin-bottom: 0;
}






/*### FLEX ###*/

/* .layout__region--first,
.layout__region--second,
.layout__region--third,
.layout__region--fourth,
.layout__region--fifth,
.layout__region--sixth,
.page-node-type-page .field--name-body {
    padding-left: 15px;
    padding-right: 15px;
    
    min-width: 0; 
}
.paragraph--type--txt-2 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.page-header {
    text-align: center;
} */




/* 
.layout-paragraph {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */





/*################################################################## GLOBALS */
/*### GLOBALS ###*/

.tabs--primary.nav.nav-tabs {
    margin-bottom: 30px;
}
html {
    scroll-behavior: smooth;
}
body {
    padding: 0;
    margin: 0;
    
    font-family: "Segoe UI", Tahoma, Geneva, Arial, Verdana, sans-serif;
}

.txtWht {
    color: #fff;
}
.txtBlk {
    color:#000;
}
.imgRes {
    width: 100%;
    height: auto;
}






/*################################################################## GLOBALS */
/*### FONT SIZES ###*/







/*################################################################## HEADER */
/*### HEADER ###*/

.rHead {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.block-plugin-system_branding_block img {
    width: 200px;
    height: auto;
}



/*################################################################## MENU */
/*### MENU ###*/

/*  Main Menu    */
.block-plugin-system_menu_block-main li,
.menTop li {
    list-style-type: none;
    display: inline;
}



/*  MOBILE MENU   */
.navbar-nav {
    margin: 0 18px;
}
.region-navigation-collapsible {
    margin-top: 20px;
}
.container > .navbar-header, 
.container-fluid > .navbar-header, 
.container > .navbar-collapse, 
.container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}
.region-navigation-collapsible .nav > li > a {
    display: inline-block;
}



/*  BURGER BUTTON   */
.navbar-toggle {
  position: relative;
  width: 40px;
  height: 30px;
  padding: 5px;
  border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: transparent;
}
.navbar-toggle .icon-bar {
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background-color: #000;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  left: 0;
}
.navbar-toggle .icon-bar:nth-child(2) {
  top: 6px;
}
.navbar-toggle .icon-bar:nth-child(3) {
  top: 12px;
}
.navbar-toggle .icon-bar:nth-child(4) {
  top: 22px;
}
/* Animation to X */
.navbar-toggle.is-active .icon-bar:nth-child(2) {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 13px;
}
.navbar-toggle.is-active .icon-bar:nth-child(3) {
  opacity: 0;
}
.navbar-toggle.is-active .icon-bar:nth-child(4) {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 9px;
}





/*### CONTENT MENUS  ###*/
/*     */












/*################################################################## PRÄ CONTENT */
/*### PRÄ CONTENT ###*/






/*################################################################## CONTENT */
/*### CONTENT ###*/

/*  Headline    */
.block-plugin-page_title_block {
    padding-left: 60px;
    padding-right: 60px;
}
















/*################################################################## POST CONTENT */
/*### POST CONTENT ###*/






/*################################################################## FOOTER */
/*### FOOTER ###*/








/*################################################################## FOOTER */
/*### MODULES & DRUPAL OVERRIDES ###*/

/*### DRUPAL ###*/
/*  AOS.js scrollbars horizontally   */
html,
body {
    overflow-x: clip;
}
.maintenance-page .dialog-off-canvas-main-canvas {
    padding: 30px;
}
.maintenance-page .dialog-off-canvas-main-canvas {
    margin-top: 60px;
}
.maintenance-page .dialog-off-canvas-main-canvas h1 {
    text-align: center;
}



/*### Edit Menu  ###*/


.block-plugin-local_tasks_block {
    display: block;
    height: 80px;
    margin: 20px;
}
.block-plugin-local_tasks_block ul {
    padding-left: 0;
    padding-bottom: 8px;
}
.block-plugin-local_tasks_block li {
    list-style-type: none;
    display: inline-block;
}
.block-plugin-local_tasks_block a {
    padding: 10px 20px;
    text-decoration: none;
    color: #777 !important;
    background-color: #ffec00;
    border: 1px solid #ffec00;
    text-transform: uppercase;
    transition: all ease 0.25s;
}
.block-plugin-local_tasks_block a:hover{
    color: #ef7e20 !important;
    border: 1px solid #ef7e20;
    text-transform: uppercase;
    transition: all ease 0.25s;
} 
.block-plugin-local_tasks_block a.is-active {
    background-color: #ffec00;
}



/*### System Messages  ###*/
/* Basis-Container für alle Meldungen */
.messages {
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.4;
}
/* Status-Nachrichten (Erfolg / Info) */
.messages--status {
  background-color: #f3faf2;   /* leichtes Grün */
  border: 1px solid #c9e2c5;
  color: #2f6627;
}
/* Warnmeldungen */
.messages--warning {
  background-color: #fff8e5;   /* helles Gelb */
  border: 1px solid #ffe8a1;
  color: #7d5912;
}
/*  Fehlermeldungen */
.messages--error {
  background-color: #fcebea;   /* helles Rot */
  border: 1px solid #f5c6cb;
  color: #842029;
}
/* Optional: Symbol-Icon links simulieren */
.messages::before {
  content: "ℹ️ ";
  font-size: 1.2rem;
  vertical-align: middle;
}
.messages--warning::before {
  content: "⚠️ ";
}
.messages--error::before {
  content: "❌ ";
}



/*### IMAGE RESPONSIVE  ###*/
.field--name-field-pa-i-1 img {
    width: 100%;
    height: auto;
}



/*### ACCORDION  ###*/

.paragraph--type--acc-sec {
    margin-bottom: 60px;
}
.field--name-field-acc-sec-head {
    font-size: 2rem;
}
.field--name-field-acc-cnt-head {
    cursor: pointer;
/*    border-bottom: 1px solid gray;*/
}
.field--name-field-acc-sec-head {
    font-size: 23px;
    color: #000;
    margin-bottom: 10px;
}
.flxWraB {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.flxItAg.flx1 {
    -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
}
.flxItAg.flx2 {
    -ms-flex-preferred-size: 80%;
        flex-basis: 80%;
}
.wrapAgDet .flx1,
.wrapAgDet .flx2 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
}
.agTxt,
.agTim {
    margin-bottom: 30px;
}
.field--name-field-acc-sec-ref .heading {
    border-top: 1px solid #B2B2B2;
    line-height: 45px;
    color: #000;
    padding-left: 45px;
}
/*  opened content   */
.field--name-field-acc-sec-ref .heading.expanded{
/*    border-top: 1px solid #000;*/
}
/*  double Line because bottom ha a double to   */
.heading.expanded > .field--name-field-acc-cnt-head {
    border-top: none;    
}
.field--name-field-acc-cnt-ref {
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
}
/*  last item line   */
.field--name-field-acc-sec-ref > .field--item:last-of-type {
    border-bottom: 1px solid #B2B2B2;
}
/*  Acc Headline   */
.field--name-field-head {
    color: #000;
    margin: 30px 0 15px 0;
}
/*  Acc Ref Field hide on start   */
.field--name-field-acc-cnt-ref {
    display: none;
}
/*  Arrows   */
/* Basis für beide Zustände */
.expander{
  position: relative;
}

/* Pseudo-Element zeichnet den Pfeil */
.expander::before{
  content: "";
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;

  /* Pfeil-Grafik nur 1x (z.B. "Up" oder "Chevron") */
  -webkit-mask: url("../img/btnAccUp.svg") no-repeat center / contain;
          mask: url("../img/btnAccUp.svg") no-repeat center / contain;

  background-color: #f5c6cb; /* Pfeil nimmt Textfarbe an (oder setz hier fix #000) */

  transform: rotate(0deg);
  transition: transform .33s ease-in-out;
  will-change: transform;
}
.expander.down-arrow::before{
  transform: rotate(180deg);
}

/* optional: altes BG-Bild entfernen, falls noch gesetzt */
.expander,
.expander.down-arrow {
  background: none !important;
}


/* OLD version
.expander {
    background: url(../img/btnAccUp.svg) no-repeat;
    background-position: top 19px left 15px;
    background-size: 20px;
    -webkit-transition: all 0.33s ease-in-out;
    -o-transition: all 0.33s ease-in-out;
    transition: all 0.33s ease-in-out;
}
.expander.down-arrow {
    background: url(../img/btnAccDo.svg) no-repeat;
    background-position: top 19px left 15px;
    background-size: 20px;
    -webkit-transition: all 0.33s ease-in-out;
    -o-transition: all 0.33s ease-in-out;
    transition: all 0.33s ease-in-out;
}
*/


/*### ACCORDION CKEditor strip  ###*/

.ckeditor-accordion-container > dl {
    border: none;
}
.ckeditor-accordion-container > dl dt > a, 
.ckeditor-accordion-container > dl dt > a:not(.button) {
    padding: 10px 15px 10px 50px;
    background-color: transparent;
    color: #000;
    -webkit-transition: background 300ms;
    transition: background 300ms;
    border-bottom: 1px solid #000;
}
.ckeditor-accordion-container > dl dt > a:hover, 
.ckeditor-accordion-container > dl dt > a:not(.button):hover {
    background-color: #efefef;
    color: red;
}
.ckeditor-accordion-container > dl dt.active > a {
    border-bottom: transparent;
    color: #fad500;
} 
.ckeditor-accordion-container > dl dd.active {
    border-bottom: 1px solid #000;
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle::before, 
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle::after {
    background: #000;
    height: 1px;
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle {
    padding-left: 0;
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle::before {
    left: 0;
}
a.ckeditor-accordion-toggler {
    font-weight: normal; 
}
/*   Padding to inner div ... this jumps...  */
.ckeditor-accordion-container > dl dd,
.ckeditor-accordion-container > dl dd.active {
/*    padding: 15px 0 30px 0;*/
}
/*   Alternative padding on paragraph  */
dd.active p:first-of-type {
    margin-top: 15px;
}
dd.active p:last-of-type {
    margin-bottom: 30px;
}


/*### COLORBOX  ###*/
/*  On page rendering for Colorbox - with autoplay - images flexbox   */
/*  Added downlaod link via js   */
.lnkColBox {
    text-align: right;
    float: right;
}
/*  Rahmen BAckground-Color - same as Modal Color  */
#cboxWrapper {
    background: rgba(0,0,0, 0.85);
    border-radius: 0;
}
/*  BG bottom line   */
#cboxContent {
    background: rgba(0,0,0, 0.85);
}
#cboxClose {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(../img/controls.png) no-repeat -25px 0px;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
}


/*### Flexslider Paragraph  ###*/
/*  Flexslider Paragraph   */
.paragraph--type--slider .flexslider {
    border: none;
}
/* Flexslider Arrows Line-Heigt  */
.flex-direction-nav a {
	height: 60px;
	line-height: 48px;
}
/*  Arrows immer einblenden  */
.flexslider .flex-direction-nav a,
.flexslider .flex-direction-nav a {
	display: block; /* I added this line */
}
.flex-direction-nav .flex-next {
	 right: 0 !important; 
	 margin-right: 3%; 
	 opacity: 1 !important; 
}
.flex-direction-nav .flex-prev { 
	left: 0 !important; 
	opacity: 1 !important; 
	margin-left: 3%; 
}
.flex-direction-nav a::before {
    color: rgba(255,255,255,0.8);         
}


/*### VIDEO iframe   ###*/
/*    */
.field--name-field-media-oembed-video {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: 100vh;
}
.field--name-field-media-oembed-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
    border-radius: 0;
}



/*### COOKIE KLARO   ###*/
/*  display: flex -> flex making trouble on mobile   */
.klaro .context-notice {    
    display: block;
}
/*  link color in all places   */
.klaro .cookie-modal a, 
.klaro .context-notice a, 
.klaro .cookie-notice a,
.klaro .context-notice p a {
    color: red;
}
/*  keep all buttons the same color   */
.klaro .cookie-modal .cm-btn, 
.klaro .context-notice .cm-btn, 
.klaro .cookie-notice .cm-btn,
.klaro.learn-more-as-button .cookie-notice:not(.cookie-modal-notice) a.cm-link.cn-learn-more,
.klaro .cookie-modal .cm-btn.cm-btn-success, 
.klaro .context-notice .cm-btn.cm-btn-success, 
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success-var {
    background-color: #6a6a6a;
    color: #fff;
}
.klaro .context-notice {
    height: auto;
}









/*################################################################## RESPONSIVE */
/*### RESPONSIVE ###*/

/*################################################################## 420 */
@media screen and (min-width: 420px) {
  
    
    
} /* /420    */
/*################################################################## 600 */
@media screen and (min-width: 600px) {
  
    
    
} /* /600    */
/*################################################################## 769 */
@media screen and (min-width: 769px) {

   
    
} /* /769    */
/*################################################################## 800 */
@media screen and (min-width: 800px) {
    
    
    
    
    
} /* /800    */
/*################################################################## 992 */
@media screen and (min-width: 992px) {
    
    

    
    
} /* /992    */
/*################################################################## 1300 */
@media screen and (min-width: 1300px) {
    

    
    
    
} /* /1300    */
/*################################################################## 1480 */
@media screen and (min-width: 1480px) {
    

    
    
    
} /* /1480    */
/*################################################################## 1921 */
@media screen and (min-width: 1921px) {
    

    
    
    
} /* /1921    */