.body { width:100vw!important; overflow-x:hidden; }
@font-face {
    font-family: 'FuturaBT';
    src: url('../fonts/FuturaBT-Book.woff2') format('woff2'),
         url('../fonts/FuturaBT-Book.woff') format('woff'),
         url('../fonts/FuturaBT-Book.ttf') format('truetype');
    font-weight: 400; /* normal */
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBT';
    src: url('../fonts/FuturaBT-Heavy.woff2') format('woff2'),
         url('../fonts/FuturaBT-Heavy.woff') format('woff'),
         url('../fonts/FuturaBT-Heavy.ttf') format('truetype');
    font-weight: 700; /* bold */
    font-style: normal;
}

body {
    font-family: 'FuturaBT', Arial, Helvetica;
}
@media only screen and (min-width: 1920px) {
  .mod_article.fullwidth-padding-both > .container, .mod_article:not(.fullwidth) > .container  {
    max-width: 1920px;
    padding-left: var(--contentPaddingLeftRight);
    padding-right: var(--contentPaddingLeftRight);
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font_headline  {
    font-family: 'FuturaBT', Arial, Helvetica;
    font-weight: bold; /* greift automatisch Heavy (700) */
    text-transform: uppercase;
  
}

h1, h2, h3 { text-transform:uppercase;}

h4, .h4, .h4 p {
  padding-bottom: 4px;
}

.mainmenu ul li a {font-family: 'FuturaBT',Arial, Helvetica; font-weight: bold; text-transform:uppercase }


.mainmenu ul {
  margin-top: 50px;
}


.mainmenu ul ul {
    margin-top: -6px;
}



:root { --submenuFontSize: 17px; }

/* Untermenü Schriftgröße global */
.mainmenu ul ul li a,
.mainmenu ul ul li a span {
  font-size: var(--submenuFontSize);
}

@media (min-width: 768px) {

  #stickyheader .header.cloned .inside {
    display: flex;
    align-items: center;
  }

  #stickyheader .header.cloned .mainmenu {
    margin-left: auto;
  }

  #stickyheader .header.cloned .mainmenu > ul {
    margin-top: 0;
  }

  #stickyheader .header.cloned {
    line-height: 30px;
  }

  /* Submenü-Abstand im Sticky */
  #stickyheader .header.cloned .mainmenu li.submenu {
    position: relative;
  }

  #stickyheader .header.cloned .mainmenu li.submenu > ul.vlist.level_2 {
    position: absolute !important;
    top: calc(100% + 55px) !important;  /* <- Abstand hier */
    margin-top: 0 !important;
  }
  
    /* Hover-Brücke: füllt den Abstand zwischen Menüpunkt und Submenü */
  #stickyheader .header.cloned .mainmenu li.submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 55px;            /* MUSS >= deinem Abstand (40px) sein */
    background: transparent;
  }


  /* Untermenü-Schriftgröße im Sticky nochmal „hart“ spiegeln */
  #stickyheader .header.cloned .mainmenu ul ul li a,
  #stickyheader .header.cloned .mainmenu ul ul li a span {
    font-size: var(--submenuFontSize);
  }
}

:root{
  --menu-highlight-padding-lr-sticky: var(--menu-highlight-padding-lr);
}

/* ========== HIGHLIGHT BUTTONS: EINHEITLICHE GEOMETRIE ========== */
.header .mainmenu ul li a.highlight,
#stickyheader .header.cloned .mainmenu ul li a.highlight{
  display: flex;
  align-items: center;
  line-height: 1;
}

.header .mainmenu ul li a.highlight > span,
#stickyheader .header.cloned .mainmenu ul li a.highlight > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 8px 18px 10px !important;
  border-radius: 999px;
  border: 0 !important;
  outline: 0 !important;
  margin: 0;
  transform: none;
}



/* PAPSTAR/ALLG: Menüposition wie früher – nur Level 1 */
@media (min-width: 768px){
  .header.original .mainmenu > ul{
    margin-top: 50px;   
  }
}





.flower {display:none}
@media only screen and (min-width: 769px) {
  .home .flower {display:block}
}
.green {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 2.1rem;
    max-width: 2100px;
    width:100vw;
}

.flower {
    position: absolute;
    z-index: -1;
    top:58em;
    right: -20em;
    max-width: 1980px;
    text-align: right;
    width:100vw;
    
  
}
.flower img {
  height:64em;
  
}

.header.original { background: url(../img/papstar_bg.svgs);
            background-repeat: no-repeat;
            background-position: top left;
            background-size: 360px 360px;
            margin-left: 0px;
            height:175px;
}

#contentwrapper {
    background: transparent;
}

#top-wrapper { max-width:2174px;}

.header.original .logo a {
    width: 220px;
    height: 260px;
    margin-top: -94px;
    margin-left: -28px;
}

@media only screen and (min-width: 1361px)and (max-width: 1400px) {
  .header.original .logo a { margin-left: -24px; margin-top: 16px; }
}


@media only screen and (min-width: 1400px) {
  .header.original .logo a {
    margin-left: -58px; }
  
}
@media only screen and (max-width: 1400px) {
  .header.original { margin-left: -38px; }
}

.mmenu_trigger .label {
    color: #000;
}

.mmenu_trigger .burger.transform .burger_lines, .mmenu_trigger .burger.transform .burger_lines:after, .mmenu_trigger .burger.transform .burger_lines:before {
    background: #000;
}

.header .inside {
    margin-left:50px;    
}


@media only screen and (max-width: 768px) {
    .header .inside { margin-left:32px;}
}

@media only screen and (max-width: 767px) {
    .header .logo {
        height: 80px;
    }
    .header.original .logo a {
    margin-top:20px; 
    }
    .green {
        right: auto;
        width: 900px;
    }
    .header.original {
    background-size: 240px 240px;
    height: 120px;
    }
    .header.original .logo a {
        width: 120px;
        margin-top: -54px;
        margin-left: 5px;
    }
    .stickyheader .logo a {
        margin-top: 2px;
        margin-left: -34px;
    }
    .header.original .mmenu_trigger {
        right: -10px;
        top: 32px;
    }
    
        #stickyheader .mmenu_trigger {
        right: 30px;  /* Anpassen - probieren Sie verschiedene Werte */
        top: 38px;
    }
}

#top .inside.topbar .autogrid_row {
  margin-left: -125px;
    margin-right: 34px;
}




.ce_youtube .ce_youtube_inner  {
    padding-bottom: 68%;
    margin-top: 8px;
    border-radius: 30px;
    overflow: hidden; /* sorgt dafür, dass auch der Inhalt (z. B. das Video) die Rundung übernimmt */
}

#hintergrund-border-30  {
    border-radius: 30px;
    overflow: hidden; /* sorgt dafür, dass auch der Inhalt (z. B. das Video) die Rundung übernimmt */
}

/* runde Kanten für das komplette Hintergrund-Element */
.hintergrund-border-30 {
  border-radius: 30px;
  overflow: hidden;            /* schneidet das Bg/Overlays sauber ab */
}

/* 
 * @change:    Setzt für .hintergrund-border-30 im Mobile-Breakpoint eine feste Mindesthöhe von 360px
 * @page:      alle Ansprechpartner
 * @module:    
 * @date:      2026-03-03
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {
  #hintergrund-border-30 {
    height: 380px;
  }
}

.ce_icon_text_234[data-icon-pos="before"] .icon {
  margin-top: 2px;
  margin-left: 20px;
}
#top .inside.topbar .ce_icon_text[data-icon-pos="before"] .icon { margin-right: 12px !important; }
#top .inside.topbar .ce_icon_text[data-icon-pos="after"]  .icon { margin-left: 12px !important; }

.ce_icon_text_285[data-icon-pos="before"] .icon {
  margin-top: 4px;
}

/* 1) Die ganze Topbar-Reihe vertikal mittig ausrichten */
#top .inside.topbar .autogrid_row {
  align-items: center;            /* Container ist bereits flex → jetzt mittig */
}

/* 2) Alle Icon-Text-Boxen (Telefon/Mail) mittig ziehen und Offsets neutralisieren */
#top .inside.topbar .ce_icon_text .attributes {
  display: flex;                  /* falls nicht schon so */
  align-items: center;            /* Icon + Text vertikal mittig */
  gap: 12px;                      /* sauberer Abstand statt margin-hacks */
}
#top .inside.topbar .ce_icon_text .icon {
  margin-top: 0 !important;       /* überschreibt die 2px-Top-Margin aus dem Icon-Reset */
  line-height: 1;
  display: flex; align-items: center;
}
#top .inside.topbar .ce_icon_text .text {
  line-height: 1;                 /* verhindert, dass Text „höher“ wirkt */
  display: flex; align-items: center;
}

/* 3) Menü-Texte + Button in dieselbe Höhe holen */
#top .inside.topbar .ce_text_extended,
#top .inside.topbar .ce_hyperlink.ce_hyperlink-extended {
  display: flex;
  align-items: center;            /* vertikale Mitte */
  line-height: 1;                 /* gleiche optische Höhe wie links */
  height: 45px;
  border-radius: 50px;
    margin-top:2px;
}

/* Optional: Button leicht nach unten „entknicken“, falls nötig */
#top .inside.topbar .ce_hyperlink.ce_hyperlink-extended .hyperlink_txt,
#top .inside.topbar .ce_hyperlink.ce_hyperlink-extended a {
    margin-top: 14px;
}

#top .ce_hyperlink a, a.btn {
  font-size: 21px;
}

.fa-external-link::before {
    margin-right: 10px;
}

/* Footer: Textlinks im Normalzustand ohne Linie, Hover-Linie in #365e1c */
#footer .ce_textlink[data-style="style1"] a {
  text-decoration: none;                 /* sicherheitshalber */
  position: relative;
}

/* Linie ausblenden + Farbe setzen */
#footer .ce_textlink[data-style="style1"] a::after {
  transform: scaleX(0);                  /* unsichtbar im Idle */
  transform-origin: left;
  background-color: #365e1c !important;  /* gewünschtes Grün */
}

/* Beim Hover von links „einblenden“ */
#footer .ce_textlink[data-style="style1"] a:hover::after {
  animation: footerLinkGrow .45s cubic-bezier(.25,1,.33,1) forwards;
}

@keyframes footerLinkGrow {
  0%   { transform-origin: left;  transform: scaleX(0); }
  100% { transform-origin: left;  transform: scaleX(1); }
}
/* Mehr Abstand zwischen Text und Linie + etwas dicker (optional) */
#footer .ce_textlink[data-style="style1"] a::after {
  bottom: -4px;     /* Abstand zur Schrift (vorher 0) */
  height: 1px;      /* optional: 1px → 2px für bessere Sichtbarkeit */
}

/* Langsameres Einblenden der Linie */
#footer .ce_textlink[data-style="style1"] a:hover::after {
  animation: footerLinkGrow .75s cubic-bezier(.25,1,.33,1) forwards; /* vorher .45s */
}

.ce_iconbox.version2 .ce_iconbox_icon {
  flex: 0 0 120px;
}
.ce_iconbox.version2 .image_container img {
  width: 90px;
}


.ce_iconbox .link::before {
    font-weight: 700;
  color: #365e1c;
}
.ce_iconbox .link {
  font-weight: 700;
  color: #365e1c;
}



/* Iconbox auf dunklem Grund */
.ce_iconbox.on-dark { color:#fff; }
.ce_iconbox.on-dark .headline { color:#fff; }

/* Text + Links in der Box explizit weiß setzen */
.ce_iconbox.on-dark .content p,
.ce_iconbox.on-dark .content a,
.ce_iconbox.on-dark .content li { color:#fff; }

/* Link immer dunkelgrün – unabhängig von geerbter Weißfärbung */
.ce_iconbox.on-dark a.link,
.ce_iconbox.on-dark a.link span,
.ce_iconbox.on-dark a.link::before {
  color: #365e1c !important;
}

/* Hover optional ebenfalls grün lassen (kein „Aufblitzen“) */
.ce_iconbox.on-dark a.link:hover,
.ce_iconbox.on-dark a.link:hover::before {
  color: #365e1c !important;
}
/* Iconbox-Link wie fancylink.style3 – auf dunklem Grund (on-dark) */
.ce_iconbox.on-dark a.link {
  position: relative;
  display: inline-block;
  color: #365e1c !important;          /* Textfarbe */
  text-decoration: none;
}

/* vorhandenes Pfeil-Icon der Iconbox entfernen */
.ce_iconbox.on-dark a.link::before {
  content: none !important;
}

/* animierte Linie wie style3 */
.ce_iconbox.on-dark a.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;     /* Abstand zur Schrift anpassen */
  width: 100%;
  height: 2px;
  background: #365e1c;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .75s cubic-bezier(.25,1,.33,1); /* etwas langsamer/geschmeidiger */
}

/* Hover-Effekt: Linie „wegziehen“ wie bei style3 */
.ce_iconbox.on-dark a.link:hover::after {
  transform: scaleX(0);
}

/* Größen-Optionen (falls du variieren willst) */
.ce_iconbox.on-dark a.link.size_small   { font-size: .9rem;  }
.ce_iconbox.on-dark a.link.size_medium  { font-size: 1.2rem; }
.ce_iconbox.on-dark a.link.size_large   { font-size: 1.8rem; }
.ce_iconbox.on-dark a.link.size_large::after { bottom: -4px; }



/* Parameter: Abstand zwischen den Items */
:root { --gal-gap: 40px; }           /* vorher z. B. 32px */

/* 6-Spalten-Galerie mit rechnerischem Platz für die Gaps */
.ce_gallery .flex-gallery.cols_6 {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gal-gap);
  row-gap: 24px;
}

.ce_gallery .flex-gallery.cols_6 > li {
  /* 100% minus 5 Zwischenräume, geteilt durch 6 Spalten */
  flex: 0 0 calc((100% - (5 * var(--gal-gap))) / 6);
  max-width: calc((100% - (5 * var(--gal-gap))) / 6);
  margin: 0;
}

/* Bilder etwas kleiner innerhalb ihres Tiles */
.ce_gallery .flex-gallery.cols_6 img {
  width: 80%;              /* vorher 100% → kleiner wirken lassen */
  height: auto;
  display: block;
  margin: 0 auto;          /* schön mittig */
}


.ce_bgimage.img-rightside-33 .ce_bgimage-image {
  margin-left: 58%;
}

.ce_bgimage.img-rightside-33 .ce_bgimage-outer {
  margin-right: 42%;
}

.ce_bgimage.img-leftside-33 .ce_bgimage-image, .ce_bgimage.img-leftside-50 .ce_bgimage-image {
  width: 42%;
}

.ce_bgimage.img-leftside-33 .ce_bgimage-outer {
  margin-left: 42%;
}

.ce_bgimage.img-rightside-33 .ce_bgimage-inside, .ce_bgimage.img-rightside-50 .ce_bgimage-inside {
  padding: 60px;
}

/* fancylink.style3: Hover-Linie kommt von links */
.ce_fancylink.style3 a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Grundzustand: Linie unsichtbar, Startpunkt links */
.ce_fancylink.style3 a::after {
  content: "";
  position: absolute;
  left: 0;                /* Start links */
  right: 0;
  bottom: -3px;           /* ggf. anpassen */
  height: 2px;
  width: 100%;
  background: currentColor !important;        /* Farbe = Textfarbe */
  transform: scaleX(0) !important;            /* unsichtbar */
  transform-origin: left center !important;   /* von links aus animieren */
  transition: transform .75s cubic-bezier(.25,1,.33,1);
}

/* Hover: Linie wächst von links auf 100 % */
.ce_fancylink.style3 a:hover::after,
.ce_fancylink.style3 a:focus-visible::after {
  transform: scaleX(1) !important;
}

.ce_fancybox.style2 {
  padding: 5%;
}

.ce_fancybox.style2 .overlay {
  height: 55%;
  background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.9) 100%);
}

.ce_fancybox.style2 .text {
  width: 60%;
  padding-left: 3px;
}

.ce_fancybox.style2 h1 {
  margin-bottom: 10px;
}

/* Utility: Hintergrundbild immer zentriert und flächig */
.bg-center,
.ce_fancybg,
.ce_fancybg.style2,
.ce_bigimage .ce_bigimage-inside {
  background-position: 50% 50% !important;  /* mittig */
  background-size: cover !important;        /* füllt Container */
  background-repeat: no-repeat !important;
}

.ce_image_extended img{border-radius:30px}
.bildhoehe-340 img{width:100%!important;height:340px;object-fit:cover}

.ce_image_extended img{border-radius:30px}
.bildhoehe-225 img{width:100%!important;height:225px;object-fit:cover}

/* 
 * @change:    Mobile Anpassung der Bildhöhen und einheitlicher Border-Radius für erweiterte Bilder
 * @page:      
 * @module:    ce_image_extended
 * @date:      2026-01-29
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {

  /* Einheitlicher Border-Radius für alle erweiterten Bilder */
  .ce_image_extended img {
    border-radius: 30px;
  }

  /* Bildhöhe 340px – mobile Fixierung mit sauberem Zuschnitt */
  .bildhoehe-340 img {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }

  /* Bildhöhe 225px – mobile Fixierung mit sauberem Zuschnitt */
  .bildhoehe-225 img {
    width: 100%;
    height: 165px;
    object-fit: cover;
  }

}



/* Bild zentrieren + Zoom sauber clippen */
.ce_image_text_box_v2 .image_container{border-radius:30px;overflow:hidden}
.ce_image_text_box_v2 .image_container img{
  width:100%;height:270px;object-fit:cover;object-position:center;
  transform-origin:center;border-radius:inherit
}
/* Image-Text-Box: Unterstreichung 2px */
.ce_image_text_box_v2 a .headline{background-size:0 2px!important;}
.ce_image_text_box_v2 a:hover .headline{background-size:100% 2px!important;}

.margin-top-minus {
    margin-top: -90px;
  }
  
  /* 
 * @change:    Fügt der Klasse .margin-top-minus im Mobile-Breakpoint einen unteren Abstand von 30px hinzu
 * @page:      
 * @module:    
 * @date:      2026-03-03
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {
    .margin-top-minus {
        margin-bottom: 40px;
    }
}
  
.topbar_metanavi {display: block; min-width: 164px;}
#top .inside {padding-right: 0px;}

@media only screen and (max-width: 1300px) {
    #top {
        display: none;
    }
    .smartmenu {
        display: block;
    }
    .mainmenu {
        display: none;
    }
    .header.original .logo {
        margin-top: 85px;
    }
    
}

@media only screen and (max-width: 767px) {
    .mmenu_trigger {
        display: flex;
    }
    .smartmenu {
        display: none;
    }
}
@media only screen and (min-width: 768px) {
    .header.original {
        line-height: 80px;
    }
}





.ce_text_extented ul {
  list-style: none;
  margin-left: 0; /* Kein Einzug */
  padding-left: 0;
}

.ce_text_extented ul li {
  position: relative;
  padding-left: 28px; /* Platz für den SVG-Pfeil */
}

.ce_text_extented ul li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-image: url('/files/icons/bulletpoint.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 768px) {
.ce_text_extented ul li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 8px;
  height: 8px;
  display: inline-block;
  background-image: url('/files/icons/bulletpoint.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  }
}

/* .header .mod_search {
  margin-left: 0px;
  margin-top: 10px;
  opacity: 1;
  padding-right: 15px;
  position: relative;
  top: 14px;
}

.header .ce_search_label i {
    font-size: 28px;
    line-height: 28px;
    top: 13px;
    position: absolute;
    left: 19px;
}
.ce_search_label {
  border-radius: 50px;
  width:50px;
  height:50px;
  text-align: center;
  transition: background-color 0.8s ease;
}
.ce_search_label:hover {
    background-color: white;
}
.ce_search_label:hover i {
    color: #000;
}
*/

.mod_langswitcher {
    position: relative;
    border-radius: 40px;
    width: 70px;
    height: 38px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    background-color: #86a159;
}

.mod_langswitcher:after { content: ""; position: absolute; background-color: #86a159; height: 100%; width: 100%; left: 0; top: 0; border-radius: 40px; opacity: .15; }


.mod_langswitcher span {
    display: block;
}

.mod_langswitcher .mod_langswitcher_inside {
  line-height: 0.8;
}

.mod_langswitcher .lang-icon {
  top: 6px !important;
}


li.mlist.regular.float_right.sibling.highlight.level_1.page_6 {
    margin-left: -12px;
}


.ce_image_extended.news-fixed-600 figure.image_container{
  height: 600px;
  overflow: hidden;
  border-radius: 30px; /* falls gewünscht */
}

/* Container fix auf 500 px, Überschuss abschneiden */
.ce_image_extended.fixed-500 figure.image_container{
  height: 500px;
  overflow: hidden;
  border-radius: 30px; /* falls gewünscht */
}

/* Bild mittig, ohne Verzerrung – Theme-Height überschreiben */
.ce_image_extended.fixed-500 figure.image_container > img{
  display: block;
  width: 100%;
  height: 100% !important;   /* schlägt height:auto vom Theme */
  object-fit: cover;          /* füllt den Container, schneidet sauber */
  object-position: center;    /* mittig ausgerichtet */
  border-radius: inherit;
}

/* Container fix auf 400 px, Überschuss abschneiden */
.ce_image_extended.fixed-400 figure.image_container{
  height: 400px;
  overflow: hidden;
  border-radius: 30px; /* falls gewünscht */
}

/* Bild mittig, ohne Verzerrung – Theme-Height überschreiben */
.ce_image_extended.fixed-400 figure.image_container > img{
  display: block;
  width: 100%;
  height: 100% !important;   /* schlägt height:auto vom Theme */
  object-fit: cover;          /* füllt den Container, schneidet sauber */
  object-position: center;    /* mittig ausgerichtet */
  border-radius: inherit;
}


/* 
 * @change:    Reduzierte Fixhöhen für ce_image_extended Varianten in der mobilen Ansicht
 * @page:      
 * @module:    ce_image_extended
 * @date:      2026-01-29
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {

  /* News-Bild: 600px → 360px mobil */
  .ce_image_extended.news-fixed-600 figure.image_container {
    height: auto;
  }

  /* Fix-500: 500px → 300px mobil */
  .ce_image_extended.fixed-500 figure.image_container {
    height: auto;
  }

  .ce_image_extended.fixed-500 figure.image_container > img {
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }

  /* Fix-400: 400px → 240px mobil */
  .ce_image_extended.fixed-400 figure.image_container {
    height: auto;
  }

  .ce_image_extended.fixed-400 figure.image_container > img {
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }

}



.ce_iconbox h3 {
	font-size: 1.526rem;
	letter-spacing: 0px;
	line-height: 1.2;
	padding-bottom: 10px;
	padding-top: 20px;
}

/* Iconbox-Link schwarz mit Fancylink Style 3 Effekt */
.ce_iconbox .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #000;               /* fester Schwarzton */
}

/* Linie unter dem Link */
.ce_iconbox .link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  width: 100%;
  background: #000;          /* auch schwarz */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.25,.1,.25,1);
}

/* beim Hover Linie einblenden */
.ce_iconbox .link:hover::after,
.ce_iconbox:hover .link::after {
  transform: scaleX(1);
}

/* falls du das FontAwesome-Pfeilchen nicht willst */
.ce_iconbox .link::before {
  display: none;
}

.ce_iconbox.headline-color-dunkelgruen .headline{color:#618f31; margin-top: 7px;}
.ce_iconbox.version2.headline-color-dunkelgruen .ce_iconbox_icon{flex:0 0 140px;}
.ce_iconbox.version2.headline-color-dunkelgruen .image_container img{width:120px;}




.ce_text.headline-color-dunkelgruen-zertifikate.headline_style_h4.block h3{ 
  color:#618f31 !important;
  line-height: 1.2em;
}




/* greift, egal ob die Klasse an der Iconbox oder einem Elternteil hängt */
.ce_iconbox.berichte-downloads .image_container img,
.ce_iconbox.berichte-downloads-ohne-icon .image_container img{
  width: 250px !important;
  height: auto;
  display: block;
  margin: 0 auto;
  padding-bottom: 15px;
}



/* nur für diese Box */
.ce_iconbox.berichte-downloads .link,
.ce_iconbox.berichte-downloads-ohne-icon .link{
  color:#618f31;
}

/* eventuell zuvor global ausgeblendetes :before wieder aktivieren
   und als Download-Icon setzen */
.ce_iconbox.berichte-downloads .link::before{
  content:"\f019";                 /* fa-download */
  font-family: FontAwesome;        /* bei FA6 ggf.: "Font Awesome 6 Free" */
  font-weight: normal;             /* bei FA6: 900 */
  display:inline-block;
  margin-right:15px;
  margin-top:3px;
  line-height:1;
  color: #618f31;             /* bleibt schwarz */
}

.ce_iconbox.berichte-downloads .link::after,
.ce_iconbox.berichte-downloads-ohne-icon .link::after{
  background: #618f31;     
}

.ce_iconbox.berichte-downloads .content p:last-child{margin-bottom:0;}
.ce_iconbox.berichte-downloads-ohne-icon .content p:last-child{margin-bottom:0;}


.ce_iconbox_v2.style3 .ce_iconbox_outside {
  padding: 30px;
  background: #efefef;
  border-radius: 30px;
  border: 0px solid ;
  height: 100%;
}
.ce_iconbox_v2.style3 .headline {
  font-size: 1.316em;
  line-height: 1.2;
  text-transform: none;
  hyphens: none;
  word-wrap: break-word; /* falls ein sehr langes Wort kommt */
}



.ce_iconbox_v2.style3 a.link::before {
  font-family: "FontAwesome";
  content: "\f019";
  display: inline-block;
  margin-right: 10px;
  transition: All 0.1s ease;
  -webkit-transition: All 0.1s ease;
  color: #92b429;
  margin-top: 3px;
}



.ce_iconbox_v2.style3 .image_container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.ce_iconbox_v2.style3 .image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}



/* Iconbox-Link schwarz mit Fancylink Style 3 Effekt */
.ce_iconbox_v2 .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  color: #92b429;              
}

/* Linie unter dem Link */
.ce_iconbox_v2 .link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  width: 100%;
  background: #92b429;         
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.25,.1,.25,1);
}

/* beim Hover Linie einblenden */
.ce_iconbox_v2 .link:hover::after,
.ce_iconbox_v2:hover .link::after {
  transform: scaleX(1);
}

.footerLinks .ce_icon_text {
    display: flex;
    align-items: center;
    float: left;
    margin-right: 28px;
}

.footerLinks .ce_text_extented {
    float: left;
    margin-right: 25px;
    min-width: 14px;
}
.footerLinks a {
  text-decoration: none!important;
}

#bottom .inside a:hover {
    border-bottom: 0px solid;
}

.bottomLinks a {
  position: relative;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.bottomLinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 0;                 
  height: 1px;              
  background-color: #000;  
  transition: width 0.3s ease; 
}

.bottomLinks a:hover::after {
  width: 100%;              
}

.mod_breadcrumb {
    border:none;
}


.mod_breadcrumb_inside ul li {
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 7px 26px 9px;
    background-color: #95b752;
    border-right: 2px solid #84aa2b;
    margin-right: -25px;
    z-index:120;
    position: relative;
      font-weight: bold;
}


.mod_breadcrumb li:before {
    content: "";
}

.mod_breadcrumb_inside ul li a { color:#fff;}

.mod_breadcrumb_inside ul li:nth-child(1) {
      z-index:121!important;
      background-image: url(/files/icons/breadcrump_bluete.svg);
      background-size: 14px 14px;
      background-position: 10px 8px;
      font-weight: normal;
}
.mod_breadcrumb_inside ul li:nth-child(2) {
      z-index:120!important;
}
.mod_breadcrumb_inside ul li:nth-child(3) {
      z-index:119!important;
}
.mod_breadcrumb_inside ul li:nth-child(4) {
      z-index:118!important;
}



.mod_langswitcher_inside ul {
    width: 260px!important;
    right:-20px;
    left:auto;
    border-radius:20px;
    padding:24px;
    text-align: left;
    margin-top: 20px;
}

#top .mod_langswitcher ul {
  border: none !important;
}


#top .mod_langswitcher ul li a {
    text-align: left;
    border:none;
}

#top .mod_langswitcher ul p { font-size:16px;}
  
.mod_langswitcher_inside ul::before {
    width: 0px;
    height: 0px;
    content: "";
    pointer-events: none;
    border: none !important;
    position: absolute;
    left: 85%;
    bottom: 100%;
    z-index: 99999;
    border-width: 0px 10px 10px;
}

.ce_accordionSingle.style1.ce_accordion .toggler {
  font-size: 19px !important;
  text-transform: none !important;   /* entfernt das Uppercase */
}

.ce_accordionSingle .ui-accordion-content ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.ce_accordionSingle .ui-accordion-content ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 6px;
}

/* Punkt auf Höhe der ersten Zeile fixieren */
.ce_accordionSingle .ui-accordion-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;          /* Höhe der ersten Zeile */
  width: 12px;
  height: 12px;
  background: #6fb13b;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* alle Tabellen in diesem Bereich einheitlich stylen */
.ce_accordionSingle table {
  width: 100%;
  border-collapse: collapse;   /* damit die Linien sauber sind */
}

/* Zellen: untere Linie */
.ce_accordionSingle table td {
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

/* Abstand zwischen den beiden Spalten */
.ce_accordionSingle table td:first-child {
  padding-right: 30px;         /* dein gewünschter Abstand in der Mitte */
}




.ce_accordion .toggler { 
  font-family: FuturaBT, Arial, sans-serif; /* Schriftart hinzufügen */ 
  font-weight: bold; 
  text-transform: uppercase;
  padding: 10px 5px 15px 0px; /* Ersetzt das ursprüngliche Padding */ 
  line-height: 1.3em; 
  font-size: 25px; 
}

.ce_accordion .toggler.ui-state-active {
	border-bottom: 0px;
}

.ce_accordion {
	margin-bottom: 1px;
	border: none;

}
/* Spezielle Anpassung für das Icon */
.ce_accordion .toggler::before {
    display: inline-block;
    margin-top: 5px; /* Setze das Icon 10px tiefer */
    content: "\f107";
    color: #000 !important;

} 
/* Mobile Darstellung */
@media (max-width: 768px) {
    .ce_accordion {
        font-size: 20px; /* oder jede gewünschte Größe */
    }
}
.ce_accordion .accordion {
  padding-left:2px;
}

.ce_accordion .toggler:hover {
  color: #000 !important;
}

/* Nur die Akkordeon-Headline einfärben */
.ce_accordion .ui-accordion-header {
  color: #000; /* dein Rot */
}

.widget label {
    display: block;

    margin-left: 5px;
    color: #4e4d44;
    font-size: 17px;
}

form span.mandatory {
  color: #4e4d44;
  margin-left: 3px;
}


/* alles in eine Zeile */
.ce_form .radio_container.radio-inline {
  display: flex;
  align-items: center;
  gap: 1.5rem;              /* Abstand zwischen "Anrede *" und den Optionen */
  border: 0;
  padding: 0;
  margin: 0 0 20px 0;
  white-space: nowrap;
}

/* "Anrede *" */
.ce_form .radio_container.radio-inline .radio-label {
  font-weight: 300;
  color: #4e4d44;
  font-size: 18px;
  margin-left: 5px;
}

/* Optionen nebeneinander */
.ce_form .radio_container.radio-inline .radio-inline-group {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* jede Option klickbar */
.ce_form .radio-inline-option {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  color: #4e4d44;
}

/* echtes Radio verstecken */
.ce_form .radio-inline-option .radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* grauer Kreis */
.ce_form .radio-inline-option .radio-circle {
  width: 34px;
  height: 34px;
  border: 2px solid #efefef;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

/* aktiver Zustand */
.ce_form .radio-inline-option .radio-input:checked + .radio-circle {
  border-color: #222;
  position: relative;
}

.ce_form .radio-inline-option .radio-input:checked + .radio-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #222;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


.ce_form .widget-submit .submit {
  background: #f18100;          
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 18px 60px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 1rem;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}

.ce_form .widget-submit .submit:hover {
  background: #e78e28;
}

.fullwidth-boxed-medium .container,
.mod_article.fullwidth-boxed-medium .container {
  max-width: 1240px;   
  margin-left: auto;
  margin-right: auto;
}


.ce_teambox_simple .image_container {
  border-radius: 30px;
  overflow: hidden;     
}


.ce_teambox_simple .image_container img {
  display: block;
  width: 100%;
}


.ce_teambox_simple:hover .image_container {
  border-radius: 30px;
}


.ce_image_extended.teamfoto .image_container img {
  width: 100% !important;        
  max-width: 150px;              
  aspect-ratio: 1 / 1;           
  height: auto !important;       
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 
 * @change:    Startseiten teaser-Modul 
 * @page:      	Suche
 * @module:     mod_search
 * @date:      	2026-11-10
 * @author:    	Thomas Cramer
 */
 
.startTeaser h2 { color:#fff;}


.teaser-flex-wrapper {
  display: flex;
  width: 100%;
  height: 620px;           
  overflow: hidden;
  box-sizing: border-box;
  gap: 0;
  border-radius: 45px;
}


.teaser-flex-wrapper .ce_image_text_box {
  flex: 1 1 0%;
  height: 100%;
  position: relative;
  transition: flex-basis 420ms ease, flex 420ms ease;
  overflow: hidden;
  min-width: 0;            
  box-sizing: border-box;
}

.teaser-flex-wrapper > *:not(:first-child) {
    border-left: 1px solid #fff;
}

.teaser-flex-wrapper .ce_image_text_box_inside:nth-child(1) {
  border:none;
}

.teaser-flex-wrapper .ce_image_text_box_image,
.teaser-flex-wrapper .ce_image_text_box_image figure {
  height: 620px;
  width: 1200px;
  margin: 0;
  display: block;
}

.teaser-flex-wrapper .ce_image_text_box_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      
  max-width: none;        
  transition: transform 420ms ease;
}


.teaser-flex-wrapper .ce_image_text_box_content_outside {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  box-sizing: border-box;
  color: #fff;
  pointer-events: none;
  transform: translateY(8px);
}

.teaser-flex-wrapper .ce_image_text_box:hover .ce_image_text_box_content_outside {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ce_image_text_box_content_outside .ce_image_text_box_content {
  margin-bottom: 36px;
}


.ce_image_text_box_content_outside .ce_image_text_box_content { 
  padding-right:50%;
  max-height:48px;
  transition: max-height 0.5s cubic-bezier(0.2, 0, 0.4, 1);
}
.ce_image_text_box_content_outside:hover .ce_image_text_box_content {
  max-height:500px;
  
}

.teaser-flex-wrapper:hover .ce_image_text_box {
  flex: 0 1 10%;    
}


.teaser-flex-wrapper .ce_image_text_box:hover {
  flex: 0 1 80%;    
}


.ce_image_text_box_content_outside p {
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

.teaser-flex-wrapper .ce_image_text_box:hover .ce_image_text_box_content_outside p {
    opacity: 1;
}

.ce_image_text_box_content_outside p {
    display: block;      
}

.teaser-flex-wrapper .ce_image_text_box:hover .ce_image_text_box_content_outside p {
    width: 100%;
}

.teaser-flex-wrapper .ce_image_text_box_image {
    position: relative;
}

.teaser-flex-wrapper .ce_image_text_box_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ce_image_text_box_image::after {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    pointer-events: none; /* klickbar bleibt das Bild */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
}


.overlay-blocker {
    position: absolute;
    background: red;
    z-index: 9999;
    pointer-events: auto; /* blockiert Hover darunter */
}


.ce_image.fixed-600 figure.image_container {
  height: 600px;
  max-height: 600px;
  overflow: hidden;    /* damit nichts übersteht */
  border-radius: inherit;
}

.ce_image.fixed-600 figure.image_container > img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.ce_image.fixed-700 figure.image_container {
  height: 610px;
  max-height: 700px;
  overflow: hidden;    /* damit nichts übersteht */
  border-radius: inherit;
}

.ce_image.fixed-700 figure.image_container > img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
.mb-xxs.small {
  margin-bottom: 10px !important;
}


.footerLinks .ce_icon_text {
    margin-top: 6px;
}
.footerLinks .ce_text_extented {
    margin-top: 8px;
}

.ce_icon_text_309[data-icon-pos='before'] .icon {
    margin-top: 8px;
}
.ce_icon_text_310[data-icon-pos='before'] .icon {
    margin-right: 8px;
}



.footerLogosX {background:#fff;}





@media only screen and (max-width: 767px) {
    .header.original .logo a {
        margin-top: -124px;
    }
    #slider {
      margin-top: 0px;
    }
}
/* Schriftgröße 21px für Links im Mega-Menü */
.font-21,
.font-21 a {
    font-size: 21px !important;
    line-height: 1.3;
}


form fieldset {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  padding-left: 20px;
}

/* Langswitcher Bugfix (tc) */
.mod_langswitcher .mod_langswitcher_inside:after {
    content: "";
}

.mod_langswitcher .lang-icon {
  position: absolute;
    background-image: none;
    fill: #fff;
    top: 4px;
    left: 8px;
    height: 18px;
    width: 18px;
}

.mod_langswitcher .dropdown-arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    fill: #fff;
    right: 10px;
    padding-left: 2px;
    top: 0px;
}

.mod_langswitcher .mod_langswitcher_inside {
  margin-left:12px;
}
.mod_langswitcher {
  padding-right: 4px; /* vorher faktisch zu klein */
}



/* Anpassungen Header */
.topbar .btn-accent a { background:#000; border: 0px transparent solid; padding:2px 21px 4px 21px;}


.storyteller .header .logo {
  margin-top:112px;
}



.topbar_mail {border-right: 1px #ffffff3b solid; padding-right: 28px; }

/*.cloned .mod_search {display:none;}
/*.cloned li .mod_search {display: block;}
li.search {margin-left: -4px !important; margin-right: -4px !important;}*/

a.hyperlink_txt {transition: background-color 0.8s ease;}

/* PAPSTAR Button – nur der Menüpunkt mit der Klasse */
.header .mainmenu ul li.papstar-external > a > span{
  background-color:#92b429 !important;
  color:#fff !important;
  border:0 !important;
  outline:0 !important;

  /* falls er sich wie „Button“ verhalten soll */
  display:inline-block;
  padding:6px 18px 7px;
  border-radius:999px;
}

/* Hover */
.header .mainmenu ul li.papstar-external > a:hover > span{
  background-color:#000 !important;
  color:#fff !important;
}


.onlineshop span {transition: background-color 0.8s ease;}
.onlineshop:hover span { background-color:#fff!important; color:#f18100 !important; }

.onlineshop span::after {
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 10px;
  font-size: 0.95em;
  position: relative;
  top: 1px;
}

/* STORYTELLER-Menüpunkt als Button (nur Navigation) */
.header .mainmenu ul li.storyteller > a > span,
#stickyheader .header.cloned .mainmenu ul li.storyteller > a > span{
  background:#000 !important;
  color:#fff !important;
  border:0 !important;
  outline:0 !important;
  display:inline-flex;
  align-items:center;
  padding:6px 18px 7px;
  border-radius:999px;
  margin-left:15px; /* falls du den Abstand wirklich brauchst */
}

/* Hover */
.header .mainmenu ul li.storyteller > a:hover > span,
#stickyheader .header.cloned .mainmenu ul li.storyteller > a:hover > span{
  background:#fff !important;
  color:#000 !important;
}

/* Extern-Icon nur im Mainmenu, nur an Linktext */
.header .mainmenu a[target="_blank"] > span::after,
#stickyheader .header.cloned .mainmenu a[target="_blank"] > span::after{
  content: "\f08e";
  font-family: "FontAwesome";
  margin-left: 10px;
  font-size: 0.95em;
  position: relative;
  top: 2px;
}



/* nur im Mainmenu, nur externe Links, Icon an den Text-Span */
.header .mainmenu a[target="_blank"] > span::after{
  content: "\f08e";
  font-family: "FontAwesome";
  margin-left: 10px;
  font-size: 0.95em;
  position: relative;
  top: 2px;
}

.header .mainmenu ul li a.highlight span {border:0!important; outline:0!important; }
  

.accessibility_widget_trigger,.accessibility_widget_trigger:hover  {background: transparent;}
.accessibility_widget_trigger i {
    background-image: url('/files/icons/acc_widget.svg');
}
body.acc_show .accessibility_widget_trigger {
     border-radius:0 0 0 0;
     border: 0;
     margin-top: 0px; 
}
.mod_langswitcher {
  min-width: 65px;
}

.topbar .text a:hover {
    text-decoration: underline !important;
}
.accessibility_widget_trigger {
    bottom: 21px !important;
    border:0px transparent solid;
}

.mod_portfoliolist_demos .item figure,
.mod_portfoliolist_demos .item .overlay,
.mod_portfoliolist_demos .item img {
  border-radius: 50px;
  border: 0;
}

.mod_portfoliolist_demos .item .image_container {
  border: 0;
}

.mod_portfoliolist_demos .title,
.mod_portfoliolist_demos .title a,
.mod_portfoliolist_demos .title h5 {
  text-transform: none !important;
  line-height: 1.4 !important;
}

/* Karte */
.mod_portfoliolist_demos .item .content {
  padding: 22px;
}

/* Floats deaktivieren + Info-Block */
.mod_portfoliolist_demos .item .info,
.mod_portfoliolist_demos .item .info * {
  float: none !important;
}

.mod_portfoliolist_demos .item .info {
  overflow: visible;
  padding: 0;
}

/* Linkblock */
.mod_portfoliolist_demos .item .info a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Subline als grünes Badge */
.mod_portfoliolist_demos .item .subline {
  display: inline-block;
  background: #92b429;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  margin: 10px 0 20px 0;
  text-transform: none;
  border: 0;
}

/* Headline */
.mod_portfoliolist_demos .item .title.h5 {
  display: block;
  margin: 0 0 18px 0;
  line-height: 1.15;
}

/* Footerbereich */
.mod_portfoliolist_demos .item .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgb(220,220,220);
  padding-top: 14px;
  margin-top: 14px;
}

/* Datum */
.mod_portfoliolist_demos .item .meta .date {
  margin: 0;
  font-size: 0.95rem;
  color: rgb(120,120,120);
}

/* Weiterlesen */
.mod_portfoliolist_demos .item .meta .readmore {
  color: #92b429;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  padding-right: 22px;
}

/* Pfeil */
.mod_portfoliolist_demos .item .meta .readmore::after {
  content: "";
  position: absolute;
  margin-top: 2px;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.mod_portfoliolist_demos .item {
  border: 15px solid transparent;
}

/* Overlay unsichtbar, aber klickbar */
.mod_portfoliolist_demos .item .overlay{
  opacity: 0 !important;
  background: none !important;
}

.mod_portfoliolist_demos .item .overlay i{
  display: none !important;
}


/* Basis: sauberes Clipping */
.mod_portfoliolist_demos .item .image_container{
  overflow: hidden;
}

/* Bild vorbereiten */
.mod_portfoliolist_demos .item .image_container_img img{
  transition: transform 0.4s ease;
  transform: scale(1);
}

/* Hover-Zoom */
.mod_portfoliolist_demos .item:hover .image_container_img img{
  transform: scale(1.06);
}

.ce_download_default a {
  background: #efefef;
  color: #000;
  padding: 35px;
  border-radius: 30px;
  position: relative;
  display: block;
}
.ce_download a::after {
  content: "";
}
.ce_download a::before {
  font-family: "FontAwesome";
  content: "\f019";
  position: absolute;
  right: 97px;
  transform: translateY(-50%);
  font-size: 20px;
  color: #618f31;
}
.ce_download a::after {
  content: "PDF";
  position: absolute;
  right: 45px;
  transform: translateY(-50%);
  font-family: inherit;        /* WICHTIG */
  font-size: 19px;
  font-weight: 700;
  color: #618f31;
}


.ce_download a span.size {
  display: inline-block;
  margin-left: 6px;
  color: rgba(0,0,0,0.2);
}

.ce_download a::before {
  top: calc(68% - 16px);
}

.ce_download a::after {
  top: calc(68% + 16px);
}

#top-wrapper #top .inside {
  padding-top: 55px;
  padding-bottom: 9px;
}

.mainmenu ul ul {
  border-radius: 30px;
  padding: 35px 20px 35px 20px;
}

.mainmenu ul ul li a {
  line-height: 42px !important;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
}

.ce_hyperlink.ce_hyperlink-extended.btn-black.btn-size-small a.hyperlink_txt { padding: 9px 18px 10px; border-radius: 40px; line-height: 1; display: inline-flex; align-items: center; margin-top: 3px; font-size: 20px; background-color: #000; color: #fff; border-color: transparent; outline: 0; transition: background-color .5s ease, color .5s ease; } .ce_hyperlink.ce_hyperlink-extended.btn-black.btn-size-small a.hyperlink_txt:hover { background-color: #fff; color: #000; } .ce_hyperlink.ce_hyperlink-extended.btn-black.btn-size-small a.hyperlink_txt i.fa::before{ position: relative; top: 1px; color: #fff !important; } .ce_hyperlink.ce_hyperlink-extended.btn-black.btn-size-small a.hyperlink_txt:hover i.fa::before{ color: #000 !important; } /* btn-black: Textfarbe beim Hover explizit festlegen */ .ce_hyperlink.ce_hyperlink-extended.btn-black a.hyperlink_txt:hover, .ce_hyperlink.ce_hyperlink-extended.btn-black a.hyperlink_txt:hover span { color: #000; }



.ce_hyperlink a,
.ce_hyperlink a:hover,
.ce_hyperlink a:focus,
.ce_hyperlink a:active,
.ce_hyperlink a:focus-visible {
  border: 0;
}

.ce_hyperlink.btn-second a.hyperlink_txt{
  position:relative;
}

.ce_hyperlink.btn-second a.hyperlink_txt::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.ce_hyperlink.btn-second a.hyperlink_txt:hover::after{
  opacity:.2;
}

/* Hover-Brücke für Language Switcher */
.mod_langswitcher {
  position: relative;
}

/* Unsichtbare Hover-Fläche unter dem Button */
.mod_langswitcher::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;          /* Abstand zwischen Button und Dropdown */
  background: transparent;
}

/* Dropdown sichtbar halten, solange Hover auf Button ODER Brücke */
.mod_langswitcher:hover .mod_langswitcher_inside {
  display: block;
}




#stickyheader .header.cloned .mod_search {
  order: 1;
}

#stickyheader .header.cloned .mod_socials {
  order: 2;
}

#stickyheader .header.cloned .papstar-link {
  order: 3;
}



/* 
 * @change:    Anpassung Abstände / responsives Verhalten Logo (verschobenes MainMenue), Burger Menue früher einblenden
 * @page:      	Top-Navigation
 * @module:     mainmainue, smartmenue, header
 * @date:      	2026-01-20
 * @author:    	Thomas Cramer
 */
 
 /* 1. Abstände Menues verringern */
.mainmenu ul li {
    margin-left: 10px;
    margin-right: 10px;
}
.mlist.storyteller, .mlist.onlineshop {
  margin:0px;
}

/* 2. Breite Platzhalter Logo anpassen/ Position Logo responsiv */
.logo {
    width: 40px;
}


/* 3. Burger Menue früher anzeigen */
@media only screen and (max-width: 1360px) {
    .mainmenu { display: none; }
    .smartmenu { display: block; }
    #top { display: none; }
    .header.original .logo { margin-top: 110px; }
    .header.original .logo a { width: 150px; height: 180px; margin-top: -100px;}

}

/* 
 * @change:    Suche konfigurieren
 * @page:      	Suche
 * @module:     mod_search
 * @date:      	2026-01-20
 * @author:    	Thomas Cramer
 */

.mod_search .info {
  display: none;
}

.mod_search .title {
    background: #e2e2e2;
    padding: 4px 4px 4px 12px;
    text-align: left;
    font-weight: bold;
}
.mod_search .url, .mod_search .context {
    text-align: left;
}
.mod_search .url {
  font-weight: bold;
}

.mod_search .title::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3C/svg%3E");
  
  background-repeat: no-repeat;
  background-size: contain;
}

*:focus-visible {
  outline: 1px solid #92b429 !important;
}





/* 
 * @change:    Suchergebnisse stylen
 * @page:      	Suche
 * @module:     mod_search
 * @date:      	2026-01-21
 * @author:    	Thomas Cramer
 */

.tx-indexedsearch-browsebox {
  /* 1. Entfernt die Aufzählungspunkte */
  list-style-type: none;
  
  /* 2. Entfernt Standard-Abstände des Browsers */
  padding: 0;
  margin: 0;
  
  /* 3. Richtet die Kinder (li) horizontal aus */
  display: flex;
  gap: 10px; /* Optional: Erzeugt Abstand zwischen den Zahlen */
}

/* Optional: Styling für die Links, damit sie schöner aussehen */
.tx-indexedsearch-browsebox li a {
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ccc;
  display: inline-block;
}

/* Markierung für die aktuelle Seite */
.tx-indexedsearch-browselist-currentPage strong a {
  background-color: #eee;
  font-weight: bold;
}


/* 
 * @change:    Fügt hinter Links mit der Klasse "storyteller-external-icon" ein externes Link-Icon (Font Awesome) ein
 * @page:      
 * @module:    ce_fancylink
 * @date:      2026-01-22
 * @author:    Steffi Petschnik
 */

.storyteller-external-icon::after {
  content: "\f08e";
  font-family: "FontAwesome";
  display: inline-block;
  margin-left: 0.4em;
  font-size: 1.0em;
  color: #92b429;
  position: relative;
  top: 1px;
}

/* 
 * @change:    Überschreibt Theme-Utility-Klassen (z.B. .font-size-0/.font-size-xxxs), die Fließtext auf Mobile auf 1rem/1.5 setzen, und vereinheitlicht Fließtext auf 16px/1.4 im Contentbereich
 * @page:      
 * @module:    Typo-Utilities / Fließtext in Inhaltselementen
 * @date:      2026-01-29
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {
    .body,
    .font-size-1 p,
    .font-size-0,
    .font-size-0 p {
  font-size: 1.0rem !important;
  line-height: 1.3 !important;
}
}

/* 
 * @change:    Reduziert den unteren Abstand von Elementen mit der Klasse .mb-xxs-m im Footer auf mobilen Geräten
 * @page:      
 * @module:    Textlink
 * @date:      2026-01-29
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {
  #footer .mb-xxs-m {
    margin-bottom: 6px !important;
  }
}

/* 
 * @change:    Setzt Schriftfarbe im mobilen Menü auf Schwarz mit Hover- und Active-Farbe in Grün
 * @page:      
 * @module:    mod_navigation (mobile_vertical)
 * @date:      2026-01-29
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {

  /* Standard-Linkfarbe im mobilen Menü */
  nav.mod_navigation.mobile_vertical a {
    color: #000;
    font-weight: 700;
  }

  /* Hover- und Active-Zustand */
  nav.mod_navigation.mobile_vertical a:hover,
  nav.mod_navigation.mobile_vertical li.active > a,
  nav.mod_navigation.mobile_vertical li.selected > a {
    color: #365e1c;
  }

}
/* 
 * @change:    Sildermodul Position genauso wie die Folgeseiten
 * @page:      Startseite
 * @module:    mod_article
 * @date:      2026-02-11
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {
  body.home .mod_article.start-buehne:not(.fullwidth) > .container {
    padding-top: 32px;
  }
}

/* 
 * @change:    Bild soll auf Mobile immer vor Text stehen
 * @page:      z.B. Über uns
 * @module:    
 * @date:      2026-02-11
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {
  .it-pair {
    display: flex;
    flex-direction: column;
  }

  .it-pair .it-img { order: 1; }
  .it-pair .it-txt { order: 2; }
}

/* 
 * @change:    Mobile Darstellung aller Iconboxen: Icon links oben, Text darunter auf voller Breite des Grid-Containers
 * @page:      
 * @module:    ce_iconbox
 * @date:      2026-02-11
 * @author:    Steffi Petschnik
 */

/* Mobile Optimierung aller Iconboxen */
@media (max-width: 767px) {

  /* Iconbox vertikal aufbauen */
  .ce_iconbox_inside {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Icon immer links oben positionieren */
  .ce_iconbox_icon {
    margin-bottom: 0;
  }

  /* Textbereich über gesamte Breite ziehen */
  .ce_iconbox_wrapper {
    width: 100%;
  }
}

/* 
 * @change:    Zentriert bei ausgewählten Iconboxen mobil ausschließlich das Icon über Zusatzklasse "iconbox--center-mobile"
 * @page:      z.B. Unternehmen/Spotlights
 * @module:    ce_iconbox
 * @date:      2026-02-12
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {

  .ce_iconbox.iconbox--center-mobile .ce_iconbox_icon {
    width: 100%;
    display: flex;
    justify-content: center;
  }

}



/* 
 * @change:    Dockt Bilder mit Klasse img--half-mobile in der mobilen Darstellung links unten im Inhaltselement an
 * @page:      
 * @module:    Contao Inhaltselement ce_image
 * @date:      2026-02-11
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {

  .ce_image.img--half-mobile {
    height: 100%;
    display: flex;
    justify-content: flex-start; /* links */
    align-items: flex-end;       /* unten */

  }

  .ce_image.img--half-mobile .image_container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .ce_image.img--half-mobile .image_container img {
    width: 100%;
    height: auto;
  }

}


/* 
 * @change:    Mobile Ansicht/Reihenfolge von Bild/Text
 * @page:      Historie
 * @module:    
 * @date:      2026-02-12
 * @author:    Steffi Petschnik
 */
@media (max-width: 767px) {

  /* Parent als Flex "Spalten untereinander" */
  .page_13 .autogrid_row_gutter,
  .page_13 .autogrid_row {
    display: flex;
    flex-direction: column;
  }

  /* Spalten anhand ihres Inhalts sortieren */
  .page_13 .column:has(.ce_image_extended) { order: 1; }
  .page_13 .column:has(.ce_headline_extended),
  .page_13 .column:has(.ce_headline) { order: 2; }
  .page_13 .column:has(.ce_text_extented),
  .page_13 .column:has(.ce_text) { order: 3; }
}
/* Bilder horizontal zentrieren */
.page_13 .ce_image_extended .image_container {
  text-align: center;
}

.page_13 .ce_image_extended img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* 
 * @change:    Mobile Feinjustierung: Download-Icon (::before) und "PDF"-Label (::after) innerhalb .ce_download vertikal etwas tiefer positioniert
 * @page:      
 * @module:    ce_download
 * @date:      2026-02-12
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {

  /* 
   * Beide Pseudoelemente werden über top positioniert.
   * Durch leichte Erhöhung des Prozentwertes rutschen Icon und PDF-Label
   * gemeinsam etwas nach unten, ohne Desktop zu beeinflussen.
   */

  .ce_download a::before {
    top: calc(75% - 16px);
  }

  .ce_download a::after {
    top: calc(75% + 16px);
  }

}
/* 
 * @change:    Mobile: Überlappungen verhindern, indem rechts im Download-Link Platz für Icon + "PDF" reserviert wird; Dateigröße bricht sauber in eigene Zeile um
 * @page:      
 * @module:    ce_download
 * @date:      2026-02-12
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {

  /* Rechts genug Luft lassen, damit Text nicht unter Icon/"PDF" laufen kann */
  .ce_download_default a {
    padding-right: 110px; /* ggf. nach Bedarf feinjustieren */
    box-sizing: border-box;
  }

  /* Dateigröße nicht inline neben dem Titel, sondern darunter */
  .ce_download_default a .size {
    display: block;
    margin-top: 6px;
  }

}

/* 
 * @change:    Mobile News-Detail: Full-Width-Artikel erhält seitlichen Innenabstand über den Newsreader-Kontext; Bild skaliert proportional mit
 * @page:      News-Detailseite
 * @module:    mod_newsreader
 * @date:      2026-02-12
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {

  /* Container innerhalb des Newsreaders einrücken (betrifft alle Inhalte in diesem Artikel) */
  .mod_newsreader.block {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* Bild proportional (wird automatisch mit eingerückt) */
  .mod_newsreader .news-image img {
    width: 100%;
    height: auto;
    display: block;
  }

}



/* 
 * @change:    Entfernt den Border-Radius der Bildbox (.image_container) ausschließlich auf der Unterseite /storyteller-to-go + keine feste Höhe
 * @page:      /storyteller-to-go
 * @module:    ce_image_text_box_v2
 * @date:      2026-03-02
 * @author:    Steffi Petschnik
 */

body.page-id-66 .ce_image_text_box_v2 figure.image_container,
body.page-66 .ce_image_text_box_v2 figure.image_container,
body.page_66 .ce_image_text_box_v2 figure.image_container,
html body.page-id-66 .ce_image_text_box_v2 figure.image_container,
html body.page-66 .ce_image_text_box_v2 figure.image_container,
html body.page_66 .ce_image_text_box_v2 figure.image_container {
  border-radius: 0 !important;
}
/* Container darf sich in der Höhe nach dem Bild richten */
html body.page-id-66 .ce_image_text_box_v2 .image_container {
  height: auto;
  max-height: none;
}

body.page-id-66 .ce_image_text_box_v2 .image_container img,
body.page-66 .ce_image_text_box_v2 .image_container img,
body.page_66 .ce_image_text_box_v2 .image_container img {
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 
 * @change:    Zentriert Icon in ce_iconbox auf mobilen Geräten, wenn die Klasse am äußeren Element gesetzt ist
 * @page:      
 * @module:    ce_iconbox
 * @date:      2026-03-02
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {

  /* Klasse sitzt am äußeren Content-Element (.ce_iconbox …) */
  .ce_iconbox.icon-mobile-center .ce_iconbox_inside {
    justify-content: center;
  }

  /* Falls das Icon-Element selbst „festklemmt“: zusätzlich ausrichten */
  .ce_iconbox.icon-mobile-center .ce_iconbox_icon {
    align-self: center;
  }

  /* Bild/Inline-Grafik sauber mittig */
  .ce_iconbox.icon-mobile-center .ce_iconbox_icon img,
  .ce_iconbox.icon-mobile-center .ce_iconbox_icon svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

}

/* 
 * @change:    Zentriert den Button (.link) innerhalb einer ce_iconbox auf mobilen Geräten
 * @page:      Startseite Logistik
 * @module:    ce_iconbox
 * @date:      2026-03-02
 * @author:    Steffi Petschnik
 */

@media (max-width: 767px) {

  /* Klasse am äußeren Element setzen: .ce_iconbox.btn-mobile-center */
  .ce_iconbox.btn-mobile-center a.link {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }

}

/* 
 * @change:    Reduziert den vertikalen Abstand vor und nach Artikeln mit der Klasse .testimonial um jeweils 30px
 * @page:      
 * @module:    mod_article (Artikel mit Zusatzklasse testimonial)
 * @date:      2026-03-03
 * @author:    Steffi Petschnik
 */

.mod_article.testimonial {
  margin-top: -30px;
  margin-bottom: -50px;
}


/* 
 * @change:    Hover-Farbe des Menüs mobil
 * @page:      Menü mobil
 * @module:    
 * @date:      2026-03-10
 * @author:    Steffi Petschnik
 */

@media only screen and (max-width: 767px) {
  nav.mod_navigation.mobile_vertical a:hover {
    color: #92b429;
  }
  
}

.mt-m { margin-top:0px!important; }