body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
form.move_labels .widget,.move_labels form .widget{position:relative;padding-top:var(--form_gap, 10px)}form.move_labels .widget:not(.widget-checkbox, .widget-radio) input,form.move_labels .widget:not(.widget-checkbox, .widget-radio) textarea,form.move_labels .widget:not(.widget-checkbox, .widget-radio) select,.move_labels form .widget:not(.widget-checkbox, .widget-radio) input,.move_labels form .widget:not(.widget-checkbox, .widget-radio) textarea,.move_labels form .widget:not(.widget-checkbox, .widget-radio) select{width:100%;padding:var(--form_input_padding, 6px);line-height:1.469}form.move_labels .widget-text label,form.move_labels .widget-textarea label,form.move_labels .widget-password label,.move_labels form .widget-text label,.move_labels form .widget-textarea label,.move_labels form .widget-password label{color:var(--font_color, #444);position:absolute;top:var(--form_gap, 10px);left:0;padding:var(--form_input_padding, 6px);transform-origin:left;border:1px solid transparent;line-height:1.469;transition-property:top, left, width, background, border-radius, padding, line-height, font-size;transition-duration:0.25s;transition-timing-function:ease-in-out}form.move_labels .widget-text label.select,form.move_labels .widget-textarea label.select,form.move_labels .widget-password label.select,.move_labels form .widget-text label.select,.move_labels form .widget-textarea label.select,.move_labels form .widget-password label.select{display:none}form.move_labels .widget-text.active label,form.move_labels .widget-textarea.active label,form.move_labels .widget-password.active label,.move_labels form .widget-text.active label,.move_labels form .widget-textarea.active label,.move_labels form .widget-password.active label{top:calc(var(--form_gap) - 13px);left:6px;font-size:13px;width:auto;background:#fff;border-radius:3px;padding:0 2px;line-height:1}
@font-face {
    font-family: 'Satoshi-Variable';
    src: url('../../files/layout/fonts/Satoshi-Variable.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Variable.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Variable.ttf') format('truetype');
         font-weight: 300 900;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-VariableItalic';
    src: url('../../files/layout/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-VariableItalic.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-VariableItalic.ttf') format('truetype');
         font-weight: 300 900;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Light';
    src: url('../../files/layout/fonts/Satoshi-Light.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Light.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Light.ttf') format('truetype');
         font-weight: 300;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-LightItalic';
    src: url('../../files/layout/fonts/Satoshi-LightItalic.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-LightItalic.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-LightItalic.ttf') format('truetype');
         font-weight: 300;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Regular';
    src: url('../../files/layout/fonts/Satoshi-Regular.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Regular.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Regular.ttf') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Italic';
    src: url('../../files/layout/fonts/Satoshi-Italic.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Italic.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Italic.ttf') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Medium';
    src: url('../../files/layout/fonts/Satoshi-Medium.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Medium.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Medium.ttf') format('truetype');
         font-weight: 500;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-MediumItalic';
    src: url('../../files/layout/fonts/Satoshi-MediumItalic.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-MediumItalic.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-MediumItalic.ttf') format('truetype');
         font-weight: 500;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Bold';
    src: url('../../files/layout/fonts/Satoshi-Bold.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Bold.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Bold.ttf') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-BoldItalic';
    src: url('../../files/layout/fonts/Satoshi-BoldItalic.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-BoldItalic.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-BoldItalic.ttf') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: italic;
  }
  
  
  @font-face {
    font-family: 'Satoshi-Black';
    src: url('../../files/layout/fonts/Satoshi-Black.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-Black.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-Black.ttf') format('truetype');
         font-weight: 900;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'Satoshi-BlackItalic';
    src: url('../../files/layout/fonts/Satoshi-BlackItalic.woff2') format('woff2'),
         url('../../files/layout/fonts/Satoshi-BlackItalic.woff') format('woff'),
         url('../../files/layout/fonts/Satoshi-BlackItalic.ttf') format('truetype');
         font-weight: 900;
         font-display: swap;
         font-style: italic;
  }
  
  

html {
  scroll-behavior: smooth !important;
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-only:focus,
.screen-reader-only:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    padding: 0.5rem 1rem;
    background: #000;
    color: #fff;
    z-index: 9999;
}


body {
  font:1.5rem Satoshi,sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  position: relative;
  background: #f0fdf7;

}

/* Hintergrundbild */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100svh;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeInBg 5s ease-in forwards;
}

/* Hintergrundbild-Fade-In Animation */
@keyframes fadeInBg {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.content-text ul{
  list-style: none;
  padding-left:20px;
  margin-top:20px;
  margin-bottom:20px;
}

.content-text ul li{
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 40px;
}

.content-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.25em;
  height: 1.25em;
  background-image: url('/files/layout/icons/icon-list.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ===================== Blendet Elemente optisch aus ist aber für Barreirefreiheit lesbar ======================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================= H1 Animation ======================================= */
h1 {
  position: absolute;
  top: 44svh;
  left: 40px;
  font-weight: 900;
  line-height: 8.5rem;
  font-size: 700%;
  color: #000;
  text-align: left;
  font-variant: small-caps;
  letter-spacing: -5px;
  margin:0;
  padding:0;
}

.typed-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.1em solid #000;
  opacity: 0;
  max-width: 0ch;
  animation: typing 4s steps(26, end) 1s forwards, 
            hideCaret 0s linear 2.5s forwards;
}

@keyframes typing {
  0% {
    max-width: 0ch;
    opacity: 1;
  }
  100% {
    max-width: 26ch;
    opacity: 1;
  }
}

@keyframes hideCaret {
  100% {
    border-right: none; 
  }
}

.subline {
  display: block;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  animation-delay: 2s;
  font-size: 2.25rem;
  line-height: 2.25rem;
  letter-spacing: 0;
  padding-left:12px;
  font-variant-caps: normal;
  max-width: fit-content;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.home .subline{
  padding-left:35px;
}

h2,
.cta-eyebrow{
  width:100%;
  max-width: 1024px;
  font-weight: 1000;
  font-size: 5rem;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-align: center;
  margin:0;
  padding:0;
}

h3 {
  font-size: 275%;
  font-weight: 400;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 1.5rem;
  line-height: 3.75rem;
  letter-spacing: -0.03em;
}

.content-accordion h3{
  font-size: 120%;
  font-weight:400;
}

h4 {
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.rte a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  background: rgba(56,177,102,.08);
  border-radius: 999px;
  color: #217847;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rte a:hover,
.rte a:focus-visible{
  background: rgba(80,180,100,.2);
}

/* ================================= TopLink ======================================= */

#toplink-container {
  position: fixed;
  top: 90%;
  right: 0;
  transform: translateY(-50%);
  background-color: whitesmoke;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 10px 10px rgba(68, 68, 68, 0.2);
  opacity: 0;
  visibility: hidden;
  z-index: 101;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.scrolled #toplink-container {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}

#toplink {
  position: relative;
  z-index: 102;
}

#toplink a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 32px 20px 24px 20px;
  border-radius: 10px 0 0 10px;
  outline: none;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

#toplink a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #00BA5D;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0 100%);
  z-index: -1;
  transition: clip-path 0.6s ease;
}

#toplink a:hover::before,
#toplink a:focus-visible::before {
  clip-path: polygon(0% 100%, 100% 100%, 100% 0, 0 0);
}

#toplink .arrow {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-top: 2.5px solid black;
  border-right: 2.5px solid black;
  transform: rotate(-45deg);
  transition: border-color 0.3s ease;
}

#toplink a:hover .arrow,
#toplink a:focus-visible .arrow {
  border-color: #333;
}

/* ======================= Akkordeons ======================= */
.content-accordion {
    margin: 5rem auto;
}

.content-accordion h2 {
    text-align: center;
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: 3rem;
}

.content-accordion .handorgel__header {
    margin: 0 0 1rem 0;
}

.content-accordion .handorgel__header__button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.content-accordion .handorgel__header__button:hover {
    transform: translateX(4px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.06);
}

.content-accordion .handorgel__header__button:focus-visible {
    outline: 3px solid #3caf65;
    outline-offset: 3px;
}

.content-accordion .handorgel__header--open .handorgel__header__button {
    border-left-color: #3caf65;

    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.06);
}

.content-accordion .handorgel__content {
    overflow: hidden;
}

.content-accordion .handorgel__content__inner {
    padding-top: .75rem;
}

.content-accordion .content-text {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 1rem auto;
    background: #fff;
    border-left: 4px solid #3caf65;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow:
        0 10px 35px rgba(0,0,0,.05);
}

.content-accordion .rte > *:first-child {
    margin-top: 0;
}

.content-accordion .rte > *:last-child {
    margin-bottom: 0;
}

.content-accordion ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-accordion li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: .9rem;
}

.content-accordion li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #3caf65;
    font-weight: 700;
}

.handorgel__header__button {
    position: relative;
    padding-right: 4rem;
}

.handorgel__header__button::after {
    content: "+";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #38b166;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    transition: all .2s ease;
}

.handorgel__header--open .handorgel__header__button::after,
.handorgel__header--opened .handorgel__header__button::after {
    content: "−";
}

/* ======================= Akkordeons ======================= 
.content-accordion h3:first-of-type{
  margin-top:40px;
}

.content-accordion .content-text{
  margin:0px;
  width:91.75%;
  border-radius: 0 0 1.25rem 1.25rem;
  border-top:0px;
  box-shadow:none;
}

.handorgel__content__inner{
  padding:0px;
}
*/
@media (prefers-reduced-motion: reduce) {

  #toplink a::before {
    transition: none !important;
    clip-path: none !important;
    background-color: #00BA5D;
  }

  #toplink a:hover,
  #toplink a:focus-visible {
    animation: none !important;
  }
}

/* ======================= Cookiebar ======================= */
.contao-cookiebar p,
.contao-cookiebar a {

    color: var(--ccb-text, #000000);
}

.cc-detail-btn, .cc-detail-btn-detail{
      color: var(--ccb-detail-clr, #000000);
}

.contao-cookiebar .highlight .success {
    --ccb-btn-bg: #008744;
    --ccb-btn-bg-hvr: #00753b;
    --ccb-btn-bdr: #008744;
    --ccb-btn-clr: #fff;
}
 
.contao-cookiebar .cc-btn:focus, .contao-cookiebar .cc-btn:hover {
    background: #ececec;
    background: var(--ccb-btn-bg-hvr, #ececec);
}

.cc-info>a+a:before {
    content: "|";
}
    
/* ================================= Queries ======================================= */
@media (prefers-reduced-motion: reduce) {
  #vanta-bg {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  h1 {
    top: 40svh;
    left: 40px;
    line-height: 3.5rem;
    font-size: 320%;
  }
  .sec {
    padding-left: 6px;
    line-height: 5rem;
  }
  .subline {
      padding-bottom: 10px;
      font-size: 1.25rem;
      margin-top: -22px;
      padding-left: 22px;
  }
}
@media (max-width: 768px) {
  h1 {
    left: 20px;
    line-height: 3rem;
    font-size: 225%;
    letter-spacing: -2px;
  }  

  .sec{
    padding-left: 2px;
    line-height: 3rem;
  }
  .subline {
    line-height: 1.5rem;
    font-size: 1.5rem;
    margin-top: 0px;
    padding-left: 0px;
  }
  .home .subline {
    line-height: 1.5rem;
    font-size: 1.5rem;
    margin-top: 0px;
    padding-left: 11px;
  }
  h2 {
    font-size: 160%;
     line-height: 2.5rem;
     letter-spacing: -2px;
  }
  
  h3 {
    font-size: 125%;
    margin-top: 10px;
    margin-bottom: 1rem;
    line-height: 2.25rem;
    letter-spacing: -2px;
  }
  
  #toplink-container {
  display: none;
  }
  
  .content-text ul {
    padding-left: 0;
  }

  .content-text ul li {
    padding: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
    border-radius: 0.75rem;

  background-color: #f9f9f9;
  }

  .content-text ul li::before {
    position: relative;
    display: block;
    margin: 0 auto 0.5rem auto;
    width: 1.75em;
    height: 1.75em;
  }
  
  .content-accordion .handorgel__header__button {
    padding: 1.25rem;
    font-size: 1.05rem;
  }

  .content-accordion .content-text {
    padding: 1.5rem;
    width: 90%;
  }
  
  .handorgel__content__inner {
    padding: 20px 4px;
  }
  
}
/* ===================== Header ====================== */
#header {
  height: 100px;
  width: 100%;
  position: fixed;
  left: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: height 0.4s ease, top 0.6s ease-out;
  animation: headerPopIn 0.8s ease forwards;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(241, 241, 241, 0.5));
  z-index: 1000;
}

.scrolled #header {
  height: 70px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(241, 241, 241, 0.95));
}

#header .inside {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 0.4s ease;
}

/* Einblen-Animation mit Scale-Effekt */
@keyframes headerPopIn {
  0% {
    top: -120px;
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    top: 0;
    opacity: 1;
    transform: scale(1);
  }
}

/* ====================== Logo ====================== */
#logo {
  display: flex;
  align-items: center;
}

#logo img {
  max-height: 100%;
  vertical-align: middle;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 0 10px rgba(150, 180, 255, 0.3));
  transform: scale(1);
  will-change: transform, filter;
}

#logo a:hover img {
  filter: grayscale(100%) contrast(100%) brightness(50%);
  transform: scale(1) rotate(360deg);
  transition: transform 1.5s ease, filter 1.5s ease;
}

body.scrolled #logo img {
  transform: scale(0.7);
}

body.scrolled #logo a:hover img {
  transform: scale(0.7) rotate(360deg);
}

/* ==================== Queries ==================== */
@media (max-width: 768px) {
  #header {
    width: 98%;
    height: 70px;
    padding: 0 2% 0 0;
  }

  .scrolled #header {
    height: 70px;
  }

  #header .inside {
    width: 100%;
    padding: 0;
  }

  #logo img {
    width: 186px;
    margin-top:6px;
    height: auto;
    transform: scale(0.9);
  }
  body.scrolled #logo img {
    transform: scale(0.9);
  }
  
}
/* ========== Navigation ========== */
.mod_navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
  z-index: 10;
  max-width: 1200px;
  width: 100%;
}

/* ========== Mobile Button ausblenden ========== */
.mod_navigation .submenu_toggle {
  display: none;
}

/* =========================================================
   EBENE 1 – HAUPTNAVIGATION (horizontale Darstellung)
   ========================================================= */

.mod_navigation ul.level_1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
}

.scrolled .mod_navigation ul.level_1 {
  margin-top: -9px;
}

.mod_navigation ul.level_1 > li {
  flex: 0 0 auto;
  position: relative;
}

.mod_navigation ul.level_1 > li > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  padding: 2.2rem 0.74rem;
  transition: color 0.3s ease;
}

.scrolled .mod_navigation ul.level_1 > li > a {
  padding: 2.1rem 0.75rem 1.2rem 0.75rem;
}

.mod_navigation ul.level_1 > li.active > a,
.mod_navigation ul.level_1 > li > a:hover {
  color: #00BA5D;
}

.mod_navigation ul.level_1 > li > a .nav-text {
  display: inline-flex !important;
  flex-direction: row !important;
  white-space: nowrap;
  margin-left: 0;
}

.mod_navigation ul.level_1 > li > a .nav-desc {
  display: none !important;
}

/* =========================================================
   EBENE 2 – FLYOUT (dein Originalcode, unverändert)
   ========================================================= */

.mod_navigation .nav-text {
  display: flex;
  flex-direction: column;
  margin-left: 0.6rem;
}

.mod_navigation .nav-title {
  font-weight: 500;
  order: 1;
}

.mod_navigation .nav-desc {
  color: #888;
  line-height: 1.4;
  margin-top: 0.2rem;
  transition: color 0.3s ease;
  font-size: 80%;
  order: 2;
}

.mod_navigation ul.level_1 > li > a:hover .nav-desc {
  color: #00BA5D;
}

.mod_navigation ul.level_1 > li:hover > ul.level_2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mod_navigation ul.level_2 > li {
  margin: 0;
  padding: 0;
  position: relative;
}

.mod_navigation ul.level_2 > li > a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.2rem;
  color: #333;
  text-decoration: none;
  position: relative;
  font-size: 20px;
  font-weight: 200;
}

.mod_navigation ul.level_2 > li > a::before,
.mod_navigation ul.level_2 > li > a.active::before {
  content: "\2192";
  margin-right: 0.5rem;
  color: #00BA5D;
  opacity: 0;
  transform: translateX(-6px);
}

.mod_navigation ul.level_2 > li > a:hover,
.mod_navigation ul.level_2 > li > a.active,
.mod_navigation ul.level_2 > li.active > a{
  background: #FFF;
  color: #00BA5D;
}

.mod_navigation ul.level_2 > li > a:hover::before,
.mod_navigation ul.level_2 > li > a.active::before {
  opacity: 1;
  transform: translateX(0);
}

.mod_navigation ul.level_2 {
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.95),
    rgba(241, 241, 241, 0.95)
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
  border-radius: 0 0 12px 12px;
  min-width: 330px;
  transition: transform 0.4s ease,
              opacity 0.4s ease,
              visibility 0.4s ease;
  z-index: 100;
}



/* =========================================================
   Ankernavigation
   ========================================================= */


.agb-nav {
    position: sticky;
    top: 90px; /* Höhe deines Headers */
    z-index: 100;
    background: #fff;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.agb-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.agb-nav a {
    color: #376b12;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease;
}

.agb-nav a:hover,
.agb-nav a:focus-visible {
    color: #23450b;
    text-decoration: underline;
}


















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

@media screen and (max-width: 1024px) {
  body.open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* =========================================================
     BURGER ICON
     ========================================================= */
  .mobile_navigation_wrapper .navicon_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    position: fixed;
    top: 24px;
    right: 20px;
    cursor: pointer;
    z-index: 1100;
    transition: top 0.25s ease-out;
    overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  }

  .scrolled .mobile_navigation_wrapper .navicon_wrapper {
    top: 24px;
  }

  .mobile_navigation_wrapper .navicon_wrapper .lines {
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition:
    transform 0.3s ease,
    opacity 0.2s ease,
    background-color 0.3s ease;
  }
/* =============================================
   BURGER → X BEI GEÖFFNETEM MENÜ
   ============================================= */

  .mobile_navigation_wrapper
  .navicon_wrapper[aria-expanded="true"]
  .lines:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }

  .mobile_navigation_wrapper
  .navicon_wrapper[aria-expanded="true"]
  .lines:nth-child(2) {
    opacity: 0;
  }

  .mobile_navigation_wrapper
  .navicon_wrapper[aria-expanded="true"]
  .lines:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }

  .mobile_navigation_wrapper .navicon_wrapper {
    overflow: visible !important;
  }

  .mobile_navigation_wrapper .nav-desc {
    color: #000;
    font-size: 90%;
    font-weight:400;
  }
  /* =========================================================
     LEVEL 1 – MOBILE MENU WRAPPER
     ========================================================= */
  .mobile_navigation_wrapper ul.level_1 {
    position: fixed;
    inset: 0;
    display: none;
    min-height: 100svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding-top: 60px;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    z-index: 1050;
  }
  
  body.scrolled .mod_navigation ul.level_1 {
      margin: 0px;
  }
  
  .mobile_navigation_wrapper ul.level_1.open {
    display: block;
  }

  .mobile_navigation_wrapper ul.level_1::after {
    content: "";
    display: block;
    height: 84px;
    pointer-events: none;
  }

  .mobile_navigation_wrapper ul.level_1 > li {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-right: 1.5rem;
    position: relative;
    width: 100%;
  }

  .mobile_navigation_wrapper ul.level_1 > li > a {
    flex: 1;
    padding: 1rem 1rem;
    display: flex;
    font-size: 1.1rem;
    color: #333;
    text-decoration: none;
    order: 1;
  }
  .mobile_navigation_wrapper ul.level_1 > li.active > a {
    color: #00BA5D;
  }

  /* =========================================================
     TOGGLE BUTTON (RIGHT SIDE)
     ========================================================= */
  .mobile_navigation_wrapper .submenu_toggle {
    order: 2;
    margin-left: 1rem;
    margin-right: 1.25rem;
    display: block;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #00BA5D;
    transition: color 0.2s;
  }

  .mobile_navigation_wrapper .submenu_toggle::before {
    content: "+";
  }

  .mobile_navigation_wrapper li.open > .submenu_toggle,
  .mobile_navigation_wrapper li.trail > .submenu_toggle{
    color: #FF3B30;
  }

  .mobile_navigation_wrapper li.open > .submenu_toggle::before,
  .mobile_navigation_wrapper li.trail > .submenu_toggle::before{
    content: "×";
  }
  
  /* =========================================================
     LEVEL 2 – DESKTOP-FLYOUT VOLLSTÄNDIG DEAKTIVIEREN
     ========================================================= */
  .mod_navigation ul.level_2,
  nav .level_2 {
    position: static !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: #f9f9f9 !important;
    border-left: 3px solid #00BA5D !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* =========================================================
     LEVEL 2 – MOBILE ACCORDION (CLOSED STATE)
     ========================================================= */
  .mobile_navigation_wrapper ul.level_2 {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    background: #F3F4F6;
    padding-left: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      transform 0.25s ease,
      padding 0.25s ease;
      order:3;
      width: 100%;
  }

  /* =========================================================
     LEVEL 2 – MOBILE ACCORDION (OPEN STATE)
     ========================================================= */
  .mobile_navigation_wrapper li.open > ul.level_2,
  .mobile_navigation_wrapper li.trail > ul.level_2 {
    max-height: 1000px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .mobile_navigation_wrapper li.user-closed > ul.level_2 {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    overflow: hidden !important;
  }

  .mobile_navigation_wrapper li.user-closed > .submenu_toggle {
    color: #00BA5D;
  }
  
  .mobile_navigation_wrapper li.user-closed > .submenu_toggle::before {
    content: "+";
  }

  /* =========================================================
     LEVEL 2 LINKS
     ========================================================= */
  .mobile_navigation_wrapper ul.level_2 li > a {
    display: block;
    padding: 0.6rem 0;
    font-size: 1rem;
    color: #333;
    text-decoration: none;
    padding-left:16px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  .mobile_navigation_wrapper ul.level_2 li > a::before {
    content: "→";
    opacity: 1;
    transform: none;
    color: currentColor; /* WICHTIG */
    flex-shrink: 0;
    font-size:20px;
    margin-top: -6px;
  }

  .mobile_navigation_wrapper ul.level_2 li > a:hover,
  .mobile_navigation_wrapper ul.level_2 li.active > a::before,
  .mobile_navigation_wrapper ul.level_2 li.active a .nav-title{
    color: #00BA5D;
  }
  .mobile_navigation_wrapper ul.level_2 li.active{
    background-color: #FFF;
  }
}
/* ==================== Positionierung 2. Artikel ==================== */
.mod_article:nth-of-type(2){
  margin-top: 100svh;
  width: 100%;
  display: block;
  position: relative;
  color: black;
  z-index: 1;
  
}
section,
.content-text,
.content-gallery,
.ce_form,
.content-accordion{
  width: 80%;
  max-width: 1024px;
  margin: 40px auto 0 auto;
  padding:5% 4%;
  display: block;
  position: relative;
  border-radius:18px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(241, 241, 241, 0.8));
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* ======================= Cards/Kacheln ======================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-block: 2rem;
  text-align: center;
  margin-top:50px;
}

.card {
  background-color: #f9f9f9;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1.25rem;
   box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.card h4 {
  font-size: 1.75rem;
  margin: 0 0 0.25rem 0;
  color: #111;
  /* Damit Titel oben fix bleibt */
  flex-shrink: 0;
}

.card-icon {
  font-size: 2.5rem;
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-body p {
  font-size: 1.25rem;
  margin: 0 0 0.25rem 0;
  color: #333;
  text-align: center;
  flex-grow: 0;
}

.card-body a {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background-color: #008744;
  color: #fff;
  font-size: 85%;
  font-weight: 400;
  text-decoration: none;
  border-radius: 2.5rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 1.5rem;
  flex-shrink: 0;
}

.card-body a:hover,
.card-body a:focus {
  background-color: #006e36;
  transform: translateY(-3px);
  outline: none;
}

.card:hover,
.card:focus-within {
  box-shadow:
    0 10px 15px rgba(0, 0, 0, 0.15),
    0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-6px);
}

.card-body a:active {
  background-color: #006e36;
  transform: translateY(0);
}

.nolink .card-body {
  flex-grow: 0;
  justify-content: flex-start;
}

/* ======================= CTA-Button - Startseite ======================= */

.cta-section {
 background: linear-gradient(
    135deg,
    #0f9d58 0%,
    #00ba5d 100%
  );
}

.cta-wrapper {
  color: #fff;
  width: 100%;
  text-align: center;
}

.cta-eyebrow {
  text-transform: uppercase;
  padding-bottom: 20px!important;
  font-size:3.5rem!important;
}

.cta-text {
  width:80%;
  text-align: center;
  margin:0 auto;
  padding-bottom: 40px!important;
}

.cta-button {
  background: #fff;
  color: #000;
  font-weight: 400;
  margin:16px 0 80px 0;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  outline: none;
}

.cta-double {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 6rem;
}

/* ======================= CTA-Button zwei nebeneinander ======================= */

.cta-double .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  min-height: 42px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  border-radius: 2.5rem;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cta-double .btn:hover,
.cta-double .btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.cta-double .btn-primary {
  background-color: #008744;
  color: #ffffff;
}

.cta-double .btn-primary:hover,
.cta-double .btn-primary:focus-visible {
  background-color: #00753b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.cta-double .btn-secondary {
  background-color: transparent;
  color: #008744;
  border: 2px solid #008744;
}

.cta-double .btn-secondary:hover,
.cta-double .btn-secondary:focus-visible {
  background-color: #008744;
  color: #ffffff;
}

/* ====================== Referenzen ======================== */

.referenzenslider {
  overflow:hidden;
}

#splide{
  margin-top:5%;
}

.splide__track {
  padding: 1rem 0.5rem 0rem 0.5rem;
}

.testimonial-card {
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5)
}

.author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #444;
  margin-top: -24px;
}

.author div {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.4rem;
}

.author p {
  margin: 0;
  padding: 0;
}

.author strong {
  font-weight: 600;
  font-size: 1.25rem;
  display: block;
  color: #111;
  margin-bottom: 0.25rem;
}

.stars {
  color: #f5a623;
  font-size: 1.25rem;
}

.quote {
  font-size: 1.25rem;
  font-style: italic;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: #222;
  line-height: 1.5rem;
  word-break: break-word;
  flex-shrink: 0;
}

.quote span {
  font-weight:800;
}

.reference-tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
}

.reference-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.reference-tags li {
  background-color: #555;
  color:#FFF;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 200;
  white-space: nowrap;
}

.splide__arrow {
  background-color: #f0f0f0;
  border: none;
  width: 3em!important;
  height: 3em!important;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  top: 50%;
  transform: translateY(-50%);
}
/* ====================== So läuft's bei uns ======================== */

.prozess-step-liste {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.prozess-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  text-align: left;
}

.prozess-kreis {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  background-color: #008744;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:0.25rem;
  font-size: 200%;
}

li.prozess-step:hover .prozess-kreis{
  background-color: #FFF;
  color:#008744;
}

/* ====================== Über Publitiv - Geschichte ======================== */
.timeline {
  position: relative;
  margin-left: 50px;
  margin-top:50px;
  padding-left: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px; /* Dicke der Linie */
  height: 100%;
  background-color: #333; /* Farbe der Linie */
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px; /* Position des Punktes auf der Linie */
  top: 5px;
  width: 12px; /* Größe des Punktes */
  height: 12px;
  background-color: #fff; /* Punktfarbe */
  border: 4px solid #333; /* Punktumrandung */
  border-radius: 50%;
}

.timeline-year {
  font-weight: bold;
  margin-bottom: 5px;
}

.timeline-content {
  margin-left: 0;
}
/* ====================== Über Publitiv - Mitglied ======================== */
.memberships {
  display: flex;
  flex-wrap: wrap;           /* Zeilenumbruch bei kleineren Bildschirmen */
  gap: 30px;                 /* Abstand zwischen den Logos */
  justify-content: center;   /* Logos mittig ausrichten */
  align-items: center;
  margin-top: 80px;
  margin-bottom: 40px;
}

/* Einzelne Logos */
.memberships .content-hyperlink {
  flex: 1 1 180px;           /* flexibel, mindestens 180px breit */
  max-width: 250px;          /* maximal 250px breit */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover-Effekt für Logos */
.memberships .content-hyperlink:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Bilder */
.memberships .content-hyperlink img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;        /* optional: Abrundung */
  filter: grayscale(30%);    /* leicht entsättigt für modernen Look */
  transition: filter 0.3s ease;
}

.memberships .content-hyperlink:hover img {
  filter: grayscale(0%);     /* Farbe bei Hover */
}
/* ====================== Logo-Galerie ======================== */

ul.logogalerie {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  gap: 0.5rem;
  padding: 0!important;
  margin: 40px 0 0 0!important;
  list-style: none;
}
ul.logogalerie.smal {
  grid-template-columns: repeat(10, 1fr); 
}
ul.logogalerie li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
  to bottom,
  rgba(200, 200, 200, 0.4),
  rgba(200, 200, 200, 0.2),
  rgba(200, 200, 200, 0.4)
  );
  border-radius: 8px;
  min-height: 120px;
  padding:0!important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom:0!important;
}
ul.logogalerie.smal li {
  min-height: 90px;
}
ul.logogalerie li:hover {
  background: linear-gradient(
  to bottom,
  rgba(200, 200, 200, 0.4), 
  rgba(160, 160, 160, 0.8), 
  rgba(200, 200, 200, 0.4)
  );
}
ul.logogalerie li::before{
  display:none!important;
}
ul.logogalerie li figure {
  margin: 0;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.logogalerie li img {
  max-width: 80%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  max-height: 100px;
}
ul.logogalerie li:hover img {
  filter: grayscale(0%);
}

ul.logogalerie li:hover img {
  transform: scale(1.05);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ====================== Kontakt ====================== */
.kontakt-layout {
  display: flex;
  gap: 3rem;
  align-items: stretch; /* gleiche Höhe */
  margin-top: 2rem;
}

.kontakt-layout > .fifty {
  flex: 1;
  background: none;
  box-shadow:none;
  padding:0;
}
p.OhneAbstand{
  margin-bottom: 0rem;
}

.kontakt-layout .contact {
  margin-right: 0.5rem;
  opacity: 0.7;
}


/* ====================== PubliTeam ====================== */
.cards-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.cards-publiteam {
    display: flex;
    flex-direction: column;
}
.team-image {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    margin: 0;
    box-shadow:
        0 4px 12px rgba(0,0,0,.08),
        0 10px 30px rgba(0,0,0,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}
.cards-publiteam:hover .team-image,
.cards-publiteam:focus-within .team-image {
    transform: translateY(-4px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.12),
        0 20px 40px rgba(0,0,0,.08);
}
.team-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.team-skills {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(
            to top,
            rgba(5,15,30,.92),
            rgba(5,15,30,.78)
        );
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}
.cards-publiteam:hover .team-skills,
.cards-publiteam:focus-within .team-skills {
    opacity: 1;
    visibility: visible;
}
.team-skills h3 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    color: #fff;
}
.team-skills li {
    margin-bottom: 0!important;
    font-size: 1.25rem;
}
.team-name {
    margin: 1rem 0 .25rem .25rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}
.team-role {
    margin: 0 0 0 .25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}
@media (hover: none) {
    .team-skills {
        position: static;
        opacity: 1;
        visibility: visible;
        background: #f5f7f8;
        color: #222;
        padding: 1rem;
    }
    .team-skills h3 {
        color: inherit;
    }
    .team-image {
        overflow: visible;
    }
}

/* ====================== Queris ======================== */
/* ====================== Max. 1024px ======================== */
@media (max-width: 1024px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ====================== Max. 768px ======================== */
@media (max-width: 768px) {
  .mod_article:nth-of-type(2){
    margin-top: 90vh;
  }
  
  section,
  .content-text,
  .content-gallery,
  .ce_form,
  .referenzenslider,
  .content-accordion{
    width: 86%;
    padding:40px 5%!important;
    text-align: center;
  }

  .testimonial-card{
    padding:1.25rem;
  }
  
  .author div{
    font-size: 1rem;
  }
  
  .cta-wrapper{
    max-width:100%;
  }
  
  .cta-button{
    display: block;
    font-size:1.25rem;
    margin: 0px 0 8px 0;
  }
  
  .cta-double {
    flex-direction: column;
    align-items: stretch;
    margin-top: 3rem;
  }

  .cta-double .btn {
    width: 86%;
    text-align: center;
  }

  .cta-double .btn-primary {
    border: 2px solid #008744;
  }

  ul.logogalerie {
    grid-template-columns: repeat(2, 1fr); 
    margin: 0;
  }
  
  ul.logogalerie.smal {
    grid-template-columns: repeat(2, 1fr); 
  }
  
  ul.logogalerie li{
    min-height: 80px;
  }

  ul.logogalerie li img{
    max-height: 56px;
  }
  
  .prozess-step-liste {
    gap: 3rem;
  }

  li.prozess-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center!important;
    gap: 1rem;
  }

  .prozess-kreis {
    margin: 0;
  }

  .prozess-text {
    text-align: center;
  }
  .kontakt-layout{
    flex-direction: column;
  }
  .cards-container {
    grid-template-columns: 1fr;
  }
}
/* ----------- Footer ----------- */
footer {
    width:100%;
    position: relative;
    background-color:#4a4a4a;
    margin-top:40px;
    margin-bottom:-20px;
    z-index:100;
    display: block;
}
footer .inside {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem; /* optional: Abstand zwischen den Boxen */
    padding: 2rem 1rem 0.25rem 1rem;
}
/* Footer-Boxen 3-spaltig */
.footerbox {
    flex: 1 1 280px;
    max-width:32%;
    height:auto;
    float:none;
    display:inline-block;
    margin-right:auto;
    margin-left:auto;
    padding-right:1%;
    padding-left:1%;
    vertical-align:top;
}
.footerbox h2 {
    font-size:3rem;
    color: #fff;
    font-weight: 400;
    margin-bottom:2.5rem;
}
.footerbox ul {
    padding-left:0;
    list-style-type:none;
}
.footerbox ul li {
    margin-bottom:10px;
}
.footerbox ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}
.footerbox ul li:hover a,
.footerbox ul li:hover span.linkinfo {
    color: #fff;
}
.footerbox ul li span.linkinfo {
    display:block;
    font-size:1.1rem;
    color:#c9c9c9;
    font-weight: 200;

}
.footerbox.kleinigkeiten,
.footerbox.kleinigkeiten h2{
    text-align:right;
}
.footerbox.wie-und-was {
    text-align:center;
    color: #e0e0e0;
}
.footerbox.stark,
.footerbox.stark h2{
    text-align:left;
}
.tabulator_kurz {
    min-width:100px;
    display:inline-block;
}


/* --- Unterster Footer --- */
.footerinfos {
    width:100%;
    margin-top:0;
}
.copyright {
    width:100%;
    padding-top:30px;
    font-size:1rem;
    text-align: center;
    color: #FFF;
}


/* ===================== Queries ===================== */
/* ===================== Max. 768px ===================== */

@media screen and (max-width: 768px) {
    footer .inside {
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 1rem;
        gap: 0rem;
    }

  .footerbox {
        max-width: 100%;
        text-align: center !important;
        border-top: 1px dotted #555;
        padding: 1rem 1rem 0rem 1rem;
    }
  
    .footerbox::after {
        content: "";
        display: block;
        width: 60%;
        height: 1px;
        background-color: #ffffff;
        margin: 4rem auto 2rem auto;
        opacity: 0.6;
    }

    .footerbox ul li a {
        color: #fafafa;
        text-decoration: none;
        font-weight: 500;
    }

    .footerbox.kleinigkeiten,
    .footerbox.kleinigkeiten h2,
    .footerbox.stark,
    .footerbox.stark h2 {
        text-align: center;
    }
    
    .copyright{
        padding-top:0px;
    }

}
/* =========================================================
   BASIS
   ========================================================= */

.ce_form {
  background: none !important;
  box-shadow: none !important;
  padding: 20px 0 0 0 !important;
  margin: 20px 0 0 0 !important;
  width: 100% !important;
}

.ce_form .widget {
  position: relative;
  margin-bottom: 1rem;
}

.ce_form .widget-textarea {

  margin-bottom: 0rem;
}

/* =========================================================
   INPUTS / TEXTAREA / SELECT
   ========================================================= */

.ce_form input,
.ce_form textarea {
  width: 93.5%;
  padding: 1.25rem 0.9rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid #ccc;
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ce_form select{
  width:96.6%;
  padding: 1rem 0.9rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 0.4rem;
  border: 1px solid #ccc;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ce_form input:focus,
.ce_form textarea:focus,
.ce_form select:focus {
  outline: none;
  border-color: #00BA5D;
}

/* =========================================================
   LABEL – GRUNDZUSTAND
   ========================================================= */

.ce_form label {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  pointer-events: none;
  background: #fff;
  padding: 0 0.25rem;
  transition: all 0.2s ease;
}

/* =========================================================
   TEXTAREA – eigener Grundzustand (höher!)
   ========================================================= */

.ce_form .widget-textarea label {
  top: 1rem;
  transform: none;
}

/* =========================================================
   FLOATING STATE (Fokus ODER Inhalt)
   ========================================================= */

.ce_form .widget:focus-within label,
.ce_form .widget:has(input:not(:placeholder-shown)) label,
.ce_form .widget:has(textarea:not(:placeholder-shown)) label {
  top: 0.35rem;
  font-size: 0.75rem;
}

/* =========================================================
   PLACEHOLDER UNSICHTBAR
   ========================================================= */

.ce_form input::placeholder,
.ce_form textarea::placeholder {
  color: transparent;
}

/* =========================================================
   SELECT – Floating Label deaktiviert
   ========================================================= */

.ce_form .widget-select label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   ALTCHA – Label ausblenden & Layout
   ========================================================= */

.ce_form .widget-altcha > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


.widget-altcha .altcha-label {
  position: static;
  transform: none;
  font-size: 0.95rem!important;
  line-height: 1.2;
  background:none;
}

.widget-altcha {
  margin-bottom: 1.5rem;
}

.widget-altcha .altcha-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



/* =========================================================
   SUBMIT
   ========================================================= */

.ce_form .submit {
  background: #008744;
  color: #fff;
  border: none;
  padding: 0.9rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.ce_form .submit:hover {
  background: #000;
}

.ce_form .submit:active {
  transform: translateY(1px);
}

/* =========================================================
   Queries
   ========================================================= */
@media (max-width: 768px) {
  .ce_form input,
  .ce_form textarea {
    width: 93%;
  }
  .ce_form select {
    width:100%;
  }
  
  
}