/* =======================
   LORA
   ======================= */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lora Regular'), local('Lora-Regular'), url('/fonts/lora-v36-latin-regular.woff2') format('woff2'), url('/fonts/lora-v36-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Lora Italic'), local('Lora-Italic'), url('/fonts/lora-v36-latin-italic.woff2') format('woff2'), url('/fonts/lora-v36-latin-italic.woff') format('woff');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lora Bold'), local('Lora-Bold'), url('/fonts/lora-v36-latin-700.woff2') format('woff2'), url('/fonts/lora-v36-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Lora Bold Italic'), local('Lora-BoldItalic'), url('/fonts/lora-v36-latin-700italic.woff2') format('woff2'), url('/fonts/lora-v36-latin-700italic.woff') format('woff');
}

/* =======================
   OSWALD
   ======================= */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url('/fonts/oswald-v56-latin-200.woff2') format('woff2'), url('/fonts/oswald-v56-latin-200.woff') format('woff');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Oswald Light'), local('Oswald-Light'), url('/fonts/oswald-v56-latin-300.woff2') format('woff2'), url('/fonts/oswald-v56-latin-300.woff') format('woff');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Oswald Regular'), local('Oswald-Regular'), url('/fonts/oswald-v56-latin-regular.woff2') format('woff2'), url('/fonts/oswald-v56-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Oswald Medium'), local('Oswald-Medium'), url('/fonts/oswald-v56-latin-500.woff2') format('woff2'), url('/fonts/oswald-v56-latin-500.woff') format('woff');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Oswald SemiBold'), local('Oswald-SemiBold'), url('/fonts/oswald-v56-latin-600.woff2') format('woff2'), url('/fonts/oswald-v56-latin-600.woff') format('woff');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Oswald Bold'), local('Oswald-Bold'), url('/fonts/oswald-v56-latin-700.woff2') format('woff2'), url('/fonts/oswald-v56-latin-700.woff') format('woff');
}

/* =======================
   LATO
   ======================= */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: local('Lato Thin'), local('Lato-Thin'), url('/fonts/lato-v24-latin-100.woff2') format('woff2'), url('/fonts/lato-v24-latin-100.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: local('Lato Thin Italic'), local('Lato-ThinItalic'), url('/fonts/lato-v24-latin-100italic.woff2') format('woff2'), url('/fonts/lato-v24-latin-100italic.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Lato Light'), local('Lato-Light'), url('/fonts/lato-v24-latin-300.woff2') format('woff2'), url('/fonts/lato-v24-latin-300.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local('Lato Light Italic'), local('Lato-LightItalic'), url('/fonts/lato-v24-latin-300italic.woff2') format('woff2'), url('/fonts/lato-v24-latin-300italic.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'), url('/fonts/lato-v24-latin-regular.woff2') format('woff2'), url('/fonts/lato-v24-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Italic'), local('Lato-Italic'), url('/fonts/lato-v24-latin-italic.woff2') format('woff2'), url('/fonts/lato-v24-latin-italic.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Lato Bold'), local('Lato-Bold'), url('/fonts/lato-v24-latin-700.woff2') format('woff2'), url('/fonts/lato-v24-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('/fonts/lato-v24-latin-700italic.woff2') format('woff2'), url('/fonts/lato-v24-latin-700italic.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Lato Black'), local('Lato-Black'), url('/fonts/lato-v24-latin-900.woff2') format('woff2'), url('/fonts/lato-v24-latin-900.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local('Lato Black Italic'), local('Lato-BlackItalic'), url('/fonts/lato-v24-latin-900italic.woff2') format('woff2'), url('/fonts/lato-v24-latin-900italic.woff') format('woff');
}

/* =======================
   HELVETICA NARROW (Custom)
   ======================= */
@font-face {
    font-family: 'Helvetica-Narrow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/5a4cd90b04b94bfd8c4e37368228a4dd.eot');
    src: url('/fonts/5a4cd90b04b94bfd8c4e37368228a4dd.eot?#iefix') format('embedded-opentype'), url('/fonts/5a4cd90b04b94bfd8c4e37368228a4dd.woff2') format('woff2'), url('/fonts/5a4cd90b04b94bfd8c4e37368228a4dd.woff') format('woff'), url('/fonts/5a4cd90b04b94bfd8c4e37368228a4dd.ttf') format('truetype'), url('/fonts/5a4cd90b04b94bfd8c4e37368228a4dd.svg#Helvetica-Narrow') format('svg');
}

/* =======================
   HELVETICA NEUE LT STD (Custom)
   ======================= */
@font-face {
    font-family: 'Helvetica Neue LT Std';
    font-style: oblique;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/HelveticaNeueLTStd-57CondensedOblique.woff2') format('woff2'), url('/fonts/HelveticaNeueLTStd-57CondensedOblique.woff') format('woff');
}

@font-face {
    font-family: 'Helvetica Neue LT Std';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/HelveticaNeueLTStd-67MediumCondensed.woff2') format('woff2'), url('/fonts/HelveticaNeueLTStd-67MediumCondensed.woff') format('woff');
}


/* irgendwo (am besten gleich im :root) */
:root {
    --header-height: 80px; /* reale Header-Höhe inkl. Border */
    --gap-fix: 0px; /* 1 px, falls du den Kanten-Gap brauchst */
}

/* ───── A) Übergänge erst nach Lade-Phase zulassen ───── */
.no-anim .site-header,
.no-anim .logo-link img {
    transition: none !important;
}

/* sobald alles geladen ist (s. JS unten) wieder erlauben */


/* Für 57 Condensed Oblique */
.oblique-class {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 400;
    font-style: oblique;
}

/* Für 67 Medium Condensed */
.medium-class {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-style: normal;
}


h1, .h1 {
  font-size: 35px; }

h2, .h2 {
  font-size: 23px; }

h3, .h3 {
  font-size: 25px; }

h4, .h4 {
  font-size: 20px; }

h5, .h5 {
  font-size: 18px; }

h6, .h6 {
  font-size: 15px; }

::selection {
    color: #000;
    background: #eeeeee;
}

/*==========Setting=========*/
body {
    font-family: "Lora", serif;
    min-width: 320px;
    font-size: 16px;
    line-height: 1.4;
    color: #4a4a4a;
    background-color: #f4f4f4; /* Hintergrundfarbe bleibt */
    --text-align: justify;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    overflow-x: hidden;
}
  body.layout-white {
    background-color: #fff; }
    body.layout-white .page-wrap {
      padding: 0px;
      border: none;
      margin: 0px auto; }
  body.layout-boxed {
    background-color: #fff; }
  body.background {
    --background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; }

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    --background: url('../images/bg.png') repeat center center;
    background-size: auto; /* Stellt sicher, dass das Bild in Originalgröße bleibt */
    z-index: -1; /* Hintergrund bleibt hinter allen anderen Elementen */
}



@media (max-width: 767px) { /* Passe die Breite nach Bedarf an */
    body {
        overflow-x: hidden;
    }
}

@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll !important; /* Safari-Workaround */
    }
}


dt, dd {
  line-height: 1.5; }

body, html {
  height: 100%; }

a:hover {
  text-decoration: none;
  color: inherit; }

a {
  color: inherit; 
}

a:active, a:focus {
  text-decoration: none;
  color: inherit; }

img {
  max-width: 100%; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.3;
    font: normal normal 600 24px/28px "Lato" !important;
    font-weight: 700;
}

iframe {
  width: 100%;
  border: none; }

/*==========Components=========*/
span.type {
  white-space: nowrap;
  overflow: hidden;
  width: 30em; }

@keyframes blink {
  to {
    opacity: .0; } }

.my-btn {
  display: inline-block;
  line-height: 40px;
  padding: 0px 30px;
  font-family: "Helvetica-Narrow", serif;
  color: #fff !important;
  background-color: #111;
  letter-spacing: 2px;
  margin: 0px 0px 0px 0px;
  text-transform: uppercase;
  border: none;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s; }
  .my-btn:hover {
    background-color: #ca2026;
    outline: none;
    color: #fff; }
  .my-btn.active {
    background-color: #ca2026;
    outline: none;
    color: #fff; }
    .my-btn.active:hover {
      opacity: 0.8; }

.my-btn-grey {
    display: inline-block;
    width: 300px;
    line-height: 40px;
    padding: 0px 30px;
    font-family: "Helvetica-Narrow", serif;
    color: #000 !important;
    background-color: #e4e4e4;
    letter-spacing: 2px;
    margin: 0px 0px 0px 0px;
    text-transform: uppercase;
    border: none;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

    .my-btn-grey:hover {
        background-color: #ca2026;
        outline: none;
        color: #fff !important;
    }

    .my-btn-grey.active {
        background-color: #ca2026;
        outline: none;
        color: #fff;
    }

        .my-btn-grey.active:hover {
            opacity: 0.8;
        }

.my-btn-grey-back {
    display: inline-block;
    line-height: 40px;
    padding: 0px 30px;
    font-family: "Helvetica-Narrow", serif;
    color: #000 !important;
    background-color: #e4e4e4;
    letter-spacing: 2px;
    margin: 0px 0px 0px 0px;
    text-transform: uppercase;
    border: none;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

    .my-btn-grey-back:hover {
        background-color: #ca2026;
        outline: none;
        color: #fff !important;
    }

    .my-btn-grey-back.active {
        background-color: #ca2026;
        outline: none;
        color: #fff;
    }

        .my-btn-grey-back.active:hover {
            opacity: 0.8;
        }

.row-fix {
  margin-left: -5px;
  margin-right: -5px; }
  .row-fix .col-fix {
    padding-left: 5px;
    padding-right: 5px; }

@media screen and (max-width: 767px) {
  .container {
    max-width: 390px; } }

#page-loader {
  width: 100%;
  height: 100%;
  background: #fff;
  color: #111;
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  z-index: 99999; }
  #page-loader .loading-wrapper {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle; }
    #page-loader .loading-wrapper p {
      text-align: center;
      text-transform: uppercase;
      margin: 0px;
      color: #111;
      font-size: 12px;
      opacity: 0.8;
      font-weight: 300;
      letter-spacing: 2px;
      font-family: "Helvetica-Narrow", serif; }
      #page-loader .loading-wrapper p span {
        font-size: 15px;
        animation-name: dots;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-fill-mode: both; }
      #page-loader .loading-wrapper p span:nth-child(2) {
        animation-delay: .2s; }
      #page-loader .loading-wrapper p span:nth-child(3) {
        animation-delay: .4s; }

@keyframes dots {
  0% {
    opacity: .2; }
  20% {
    opacity: 1; }
  100% {
    opacity: .2; } }

.wrapper {
  max-width: 1100px;
  padding: 0px 10px;
  margin: 0px auto; }

.wrap {
    max-width: 1100px;
    --min-height: 500px;
    --border: 2px solid #979595;
    --margin: 50px auto;
   --padding: 20px 40px;
    --background-color: #fff;
    -moz-transition: transform ease 0.5s;
    -o-transition: transform ease 0.5s;
    -webkit-transition: transform ease 0.5s;
    transition: transform ease 0.5s;
}
  @media screen and (max-width: 991px) {
    .wrap {
      --padding: 0px 15px;
      margin: 0px auto; 
      border: 0px;
    }

    .wrapper {
        padding: 0px 0px;
    }
  }
  .wrap:before {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    right: 20px;
    height: 15px;
    top: -16px;
    background-color: #fff;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    visibility: hidden;
    opacity: 0; }
  .wrap:after {
    content: "";
    display: block;
    position: absolute;
    left: 40px;
    right: 40px;
    height: 15px;
    top: -32px;
    background-color: #fff;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    visibility: hidden;
    opacity: 0; }

/*==========Header=========*/
/*.header {
  position: relative;
  z-index: 999;
  text-align: center;
  height: 200px;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  top: -200px;
  left: 0px;
  right: 0px;
  position: absolute; }
  .header .logo-wrap {
    height: 150px;
    padding: 50px 0px 0px 0px; }
  .header a.logo img {
    width: 300px; } */

@media screen and (min-width: 992px) {
  .open-menu {
    background-color: #111; }
    .open-menu .header {
      top: 0px; }
      .open-menu .header .menu-main {
        z-index: 1;
        opacity: 1; }
    .open-menu .wrap {
      transform: translate3d(0px, 400px, 0px) scale(0.98);
      border: 2px solid transparent; }
      .open-menu .wrap:before {
        content: "";
        display: block;
        position: absolute;
        left: 20px;
        right: 20px;
        height: 15px;
        top: -18px;
        background-color: #fff;
        visibility: visible;
        opacity: 1; }
      .open-menu .wrap:after {
        content: "";
        display: block;
        position: absolute;
        left: 40px;
        right: 40px;
        height: 15px;
        top: -34px;
        background-color: #fff;
        visibility: visible;
        opacity: 1; }
    .open-menu .footer {
      transform: translate3d(0px, 400px, 0px);
      color: #fff; }
      .open-menu .footer a.logo {
        background-color: #fff; }
      .open-menu .footer .social-footer {
        padding: 20px 0px;
        text-align: center; }
        .open-menu .footer .social-footer a {
          color: #fff; }
          .open-menu .footer .social-footer a i {
            transform: rotate(45deg); }
          .open-menu .footer .social-footer a:before {
            content: "";
            display: block;
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 1px solid #222;
            opacity: 1;
            -moz-transition: all ease 0.5s;
            -o-transition: all ease 0.5s;
            -webkit-transition: all ease 0.5s;
            transition: all ease 0.5s; }
          .open-menu .footer .social-footer a:hover {
            background-color: #ca2026; }
            .open-menu .footer .social-footer a:hover:before {
              -moz-transform: scale(1.1);
              -ms-transform: scale(1.1);
              -o-transform: scale(1.1);
              -webkit-transform: scale(1.1);
              transform: scale(1.1);
              opacity: 0; }
          .open-menu .footer .social-footer a.facebook {
            background-color: #3b5998; }
          .open-menu .footer .social-footer a.twitter {
            background-color: #3a92c8; }
          .open-menu .footer .social-footer a.google {
            background-color: #dd4b39; }
          .open-menu .footer .social-footer a.pinterest {
            background-color: #cb2027; }
          .open-menu .footer .social-footer a.youtube {
            background-color: #b00; } }

/*==========Menu=========*/
.menu-icon {
  position: fixed;
  top: 0px;
  right: 0px;
  background-color: #111;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  z-index: 9999;
  color: #fff;
  font-size: 20px;
  cursor: pointer; }
.search-icon {
    position: absolute;
    left: 10px; /* Abstand vom linken Rand            */
    top: 50%; /* vertikal mittig                    */
    transform: translateY(-50%); /* vertikal exakt zentrieren          */
    color: #8f8f8f; /* dezent grau – gern anpassen        */
    pointer-events: none; /* verhindert Klick-/Focus-Probleme   */
    font-size: 1rem; /* Größe der Font-Awesome-Icon        */
}



.txt-search {
    color: #fff;
}

    .txt-search::placeholder {
        color: white;
        opacity: 1; /* Firefox */
        padding-left: 10px;
    }

    .txt-search::-ms-input-placeholder { /* Edge 12 -18 */
        color: white;
        padding-left: 10px;
    }

.menu-main-inner {
    --display: inline-block;
    padding: 0px 49px 0px 0px;
    position: relative;
    min-height: 40px;
    --background-color: #c13832;
}
  .menu-main-inner > ul {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
  .menu-main-inner.show-search .search-box {
    z-index: 2;
    opacity: 1;
    visibility: visible; }
    .menu-main-inner.show-search .search-box ul li {
        display:block;
    }
  .menu-main-inner.show-search .search-icon i:before {
    content: "\f00d"; }
  .menu-main-inner.show-search > ul {
    opacity: 0;
    visibility: hidden; }

.menu-main {
    position: sticky;
    top: 0;
    z-index: 1000; /* Stellt sicher, dass die Menüleiste über anderen Elementen liegt */
    background-color: #E0E0E0; /* Beibehaltung des Hintergrunds für die Sichtbarkeit */
    color: black;
    width: 100%;
    padding: 10px 0;
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten für bessere Lesbarkeit */
    display: flex;
    align-items: center;
    justify-content: center;
}


.menu-main-inner {
    display: flex;
    justify-content: center; /* Zentriert das Menü */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%;
    max-width: 1100px; /* Optional: Maximale Breite für das Menü */
    position: relative;
}

    .menu-main ul {
        margin: 0;
        padding: 0;
        position: relative;
        height: auto;
    }

        .menu-main ul li {
            display: inline-block;
            position: relative;
            padding: 0 20px; /* Abstand zwischen den Einträgen */
            margin: 0;
            font-weight: 500;
            font-size: 16px;
        }

            .menu-main ul li:before {
                content: "";
            }

            .menu-main ul li.active > a {
                color: #ca2026; /* Rote Schrift für aktive Menüpunkte */
            }

            .menu-main ul li > a {
                display: block;
                line-height: 40px;
                --padding: 0 15px;
                color: black !important;
                font-family: 'Lato', sans-serif; /* Lato Schriftart einbinden */
                font-style: normal; /* Normaler Stil */
                font-weight: bold; /* Fettgedruckt */
                font-size: 15px; /* Schriftgröße */
                line-height: 18px; /* Zeilenhöhe */
                letter-spacing: 1.38px; /* Abstand zwischen Buchstaben */
                color: #383838; /* Textfarbe */
                text-align: left; /* Text linksbündig */
                text-transform: uppercase; /* Text in Großbuchstaben */
                opacity: 1; /* Volle Deckkraft */
            }

                .menu-main ul li > a span.normal-case {
                    text-transform: lowercase !important;
                    font-style:italic;
                }

                .menu-main ul li > a:hover {
                    color: #ca2026; /* Rote Schrift bei Hover */
                }

            .menu-main ul li:hover > .sub-menu {
                opacity: 1;
                visibility: visible;
                margin-top: 0;
            }

        /* Sub-Menü */
        .menu-main ul .sub-menu {
            position: absolute;
            top: calc(100% + 10px); /* oder +15px, +20px … */
            left: 0;
            width: 200px;
            background-color: white; /* Weißer Hintergrund */
            visibility: hidden;
            z-index: 9999;
            opacity: 0;
            padding: 10px 0;
            margin-top: 0px;
            padding-top: 0px; /* Visueller Abstand nach unten */
            pointer-events: auto;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
            transition: all ease 0.2s;
        }

            .menu-main ul .sub-menu li {
                display: block;
                padding: 0;
                border-bottom: 1px solid #eeeeee;
            }
        .menu-main ul li:hover::after {
            content: "";
            position: absolute;
            top: 100%;
            height: 20px; /* gleiche Höhe wie Versatz */
            width: 100%;
            left: 0;
            background: transparent;
            pointer-events: auto;
        }



                .menu-main ul .sub-menu li a {
                    display: block;
                    line-height: 35px;
                    text-align: left;
                    text-transform: none;
                    padding: 0 10px;
                    letter-spacing: 1px;
                    font-size: 15px;
                    font-family: "Lato", serif;
                    color: black; /* Schwarze Schrift */
                    font-weight: 400;
                    transition: color 0.3s ease;
                }

                    .menu-main ul .sub-menu li a:hover {
                        color: #ca2026; /* Rote Schrift bei Hover */
                        background-color: #f5f5f5; /* Hellgrauer Hintergrund */
                    }

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

                /* Sub-Sub-Menü */
                .menu-main ul .sub-menu li .sub-menu {
                    position: absolute;
                    top: 0; /* Gleiche Höhe wie Elternpunkt */
                    left: 100%; /* Rechts neben dem übergeordneten Menü */
                    background-color: white; /* Weißer Hintergrund */
                    visibility: hidden;
                    z-index: 9999;
                    opacity: 0;
                    padding: 10px 0;
                    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
                    transition: all ease 0.2s;
                }

                /* Zeige Sub-Sub-Menü beim Hover */
                .menu-main ul .sub-menu li:hover > .sub-menu {
                    opacity: 1;
                    visibility: visible;
                }

        /* Mega-Menü */
        .menu-main ul .mega-menu {
            position: absolute;
            background-color: white;
            z-index: 9999;
            top: 100%;
            opacity: 0;
            visibility: hidden;
            left: 0;
            right: 0;
            min-height: 100px;
            margin-top: 15px;
            transition: all ease 0.5s;
            border: 1px solid #999;
            padding: 20px;
        }

            .menu-main ul .mega-menu h3 {
                text-transform: uppercase;
                font-size: 20px;
                margin: 5px 0 15px;
            }

            .menu-main ul .mega-menu .mega-item p a {
                color: black;
                transition: color 0.3s ease;
                font-size: 15px;
            }

                .menu-main ul .mega-menu .mega-item p a:hover {
                    color: #ca2026;
                }

    /* Farbige Menüs */
    .menu-main.menu-color ul li.active > a {
        color: #ca2026;
    }

    .menu-main.menu-color ul li:hover > a {
        background-color: #fff;
        color: #ca2026;
    }


.menu-right-control {
  float: right;
  height: 46px; }
  .menu-right-control .ciz-widget {
    float: left; }
  .menu-right-control a {
    float: left;
    width: 40px;
    line-height: 46px;
    text-align: center;
    font-size: 20px;
    color: #111;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .menu-right-control a.twitter:hover {
      color: #3a92c8; }
    .menu-right-control a.facebook:hover {
      color: #3b5998; }
    .menu-right-control a.youtube:hover {
      color: #b00; }
  .menu-right-control .icon-search {
    cursor: pointer;
    float: left;
    width: 40px;
    line-height: 46px;
    text-align: center;
    font-size: 20px;
    color: #111;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .menu-right-control .icon-search.show-searchbox {
      color: #ca2026; }

.menu-visible .wrap {
  margin-top: 0px; }

.logo-show {
    text-align: center;
    padding: 0px 0px 0px 0px; /* Zusätzlicher Abstand für bessere Lesbarkeit */
    background-color: white; /* Weißer Hintergrund */
    width: 100%; /* Über die gesamte Breite */
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten für visuelle Abtrennung */
}

    .logo-show a {
        display: inline-block;
    }

        .logo-show a img {
            --max-width: 150px; /* Begrenze die Breite des Logos */
            height: auto; /* Verhältnis des Logos beibehalten */
        }

    .logo-show div {
        text-align: right;
        max-width: 1100px;
        margin: 0 auto; /* Zentriert den Inhalt innerhalb der Maximalbreite */
    }

@media screen and (max-width: 991px) {
    .logo-show {
        display: none; /* Sichtbar machen */
        padding: 5px 0; /* Weniger Abstand für kleine Bildschirme */
    }

        .logo-show div {
            text-align: center; /* Für mobile Geräte zentrieren */
        }
    .div_header {
        display: flex;
        background-color: white;
        --padding: 10px;
    }
}


.menu-show {
  text-align: center;
  visibility: visible;
  opacity: 1;
  --max-width: 1100px;
  z-index: 999;
  padding: 0px 10px;
  margin: 0px auto 20px auto; }
  .menu-show ul li > a {
    color: #fff; }
  .menu-show ul li:before {
    display: none; }
  .menu-show .search-icon {
    color: #fff; }
    .menu-show .search-box input {
        color: #fff !important;
        border-bottom: 4px solid #fff;
    }

@media screen and (max-width: 991px) {
    .mobile-bar {
        position: relative;
    }

        .mobile-bar.show-search-mobile .search-box-mobile {
            z-index: 99999;
            opacity: 1;
            visibility: visible;
        }

        .mobile-bar.show-search-mobile .search-icon-mobile i:before {
            content: "\f00d";
        }

        .mobile-bar.show-search-mobile .menu-icon-mobile {
            opacity: 0;
            visibility: hidden;
        }

    .menu-icon-mobile {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        color: #4a4a4a;
        font-weight: bold;
        cursor: pointer;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        margin: 0px 0px 0px 0px;
        font-family: "Helvetica-Narrow", serif;
        text-transform: uppercase;
    }

        .menu-icon-mobile i {
            font-size: 26px;
        }

        .menu-icon-mobile span {
            font-family: "Helvetica-Narrow", serif;
            text-transform: uppercase;
            font-weight: normal;
            letter-spacing: 2px;
            font-weight: 400;
            font-size: 16px;
        }

    .search-icon-mobile {
        height: 40px;
        width: 40px;
        position: absolute;
        top: 0px;
        right: 0px;
        line-height: 40px;
        font-size: 16px;
        color: #111;
        text-align: center;
        cursor: pointer;
    }

    .search-box-mobile {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 40px;
        height: 35px;
        opacity: 0;
        z-index: 999999;
        visibility: hidden;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
    }

        .search-box-mobile input {
            width: 100%;
            padding: 0px 0px;
            text-align: center;
            line-height: 35px;
            border: none;
            outline: none;
            text-align: left;
            text-transform: uppercase;
            font-family: "Helvetica-Narrow", serif;
            letter-spacing: 2px;
            font-size: 14px;
            background-color: transparent;
            color: #111;
        }

 /*   .menu-res {
        width: 280px;
        background-color: #e4e4e4;
        position: fixed;
        top: 0px;
        z-index: 999;
        overflow: auto;
        bottom: 0px;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        left: 0px;
        -moz-transform: translateX(-280px);
        -webkit-transform: translateX(-280px);
        -o-transform: translateX(-280px);
        -ms-transform: translateX(-280px);
        transform: translateX(-280px);
    } */

    .page {
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
    }

    .menu-res-inner {
        padding: 30px 20px 20px 20px;
    }

        .menu-res-inner ul {
            padding: 0px;
            list-style: none;
        }

            .menu-res-inner ul > li {
                border-bottom: 1px solid #111;
                position: relative;
            }

                .menu-res-inner ul > li .fa-home {
                    margin: 0px 5px 0px 0px;
                }

                .menu-res-inner ul > li a {
                    font-size: 13px;
                    text-transform: uppercase;
                    color: #4a4a4a;
                    display: block;
                    line-height: 40px;
                    font-family: "Helvetica-Narrow", serif;
                    -moz-transition: all ease 0.5s;
                    -o-transition: all ease 0.5s;
                    -webkit-transition: all ease 0.5s;
                    transition: all ease 0.5s;
                }

                    .menu-res-inner ul > li a:hover {
                        color: #c13832;
                    }

                .menu-res-inner ul > li.menu-item-has-children:before {
                    display: block;
                    content: "\f107";
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: 20px;
                    text-align: center;
                    cursor: pointer;
                    line-height: 40px;
                    color: #999;
                }

                .menu-res-inner ul > li.open-submenu-active:before {
                    content: "\f106";
                }

                .menu-res-inner ul > li > ul {
                    padding: 0px 0px 10px 10px;
                    display: none;
                }

                    .menu-res-inner ul > li > ul li {
                        border: none;
                        border-bottom: 1px solid #111;
                    }

                        .menu-res-inner ul > li > ul li:last-child {
                            border: none;
                        }

                        .menu-res-inner ul > li > ul li a {
                            display: block;
                            line-height: 35px;
                            text-transform: none;
                            color: #666;
                            padding: 0px 0px;
                            font-weight: 400;
                            font-family: "Helvetica-Narrow", serif;
                            -moz-transition: all ease 0.5s;
                            -o-transition: all ease 0.5s;
                            -webkit-transition: all ease 0.5s;
                            transition: all ease 0.5s;
                            text-transform: uppercase;
                        }

                            .menu-res-inner ul > li > ul li a:hover {
                                color: #c13832;
                            }

                        .menu-res-inner ul > li > ul li > ul {
                            padding: 0px 0px 0px 20px;
                        }

}

/*==========Home Page=========*/
.middle {
  min-height: 500px;
  padding: 100px 0px 0px 0px; }
  @media screen and (max-width: 767px) {
    .middle {
      padding: 50px 0px 0px 0px; } }

.ciz-post .post-title {
  border-bottom: 2px solid #111;
  padding: 5px 0px;
  margin-top: 0px; 
  text-align: left;
  hyphens: auto;
}

.post-title {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    margin-top: 0px;
    hyphens: auto;
}
  
  .post-title:hover {
    border-bottom: 2px solid #ca2026;
    color: #ca2026; }

/* styles.css */
.post-title-search {
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    transition: all ease 0.3s;
    margin-top: 0px;
    hyphens: auto;
    font-size: 18px;
    position: relative;
    color: #333; /* Grundfarbe des Textes */
    background-color: transparent; /* Grundfarbe des Hintergrunds */
    padding: 5px; /* Platz für den Hintergrundfarbwechsel */
    border-radius: 5px; /* Leichte Abrundung der Ecken */
}

    .post-title-search:hover {
        color: #368c2d; /* Neue Farbe */
        background-color: rgba(54, 140, 45, 0.1); /* Dezente Hintergrundfarbe beim Hovern */
        box-shadow: 0 4px 15px rgba(54, 140, 45, 0.2); /* Sanfter Schattierungseffekt */
    }

.post-thumbnail img {
  --webkit-filter: grayscale(70%);
  --filter: grayscale(70%);
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s; }

.post-thumbnail:hover img {
  --webkit-filter: grayscale(30%);
  --filter: grayscale(30%); }

.post-thumb {
  position: relative; }
  .post-thumb .post-format {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999; }
    .post-thumb .post-format i {
      display: block;
      text-align: center;
      line-height: 20px;
      width: 20px;
      height: 20px;
      position: absolute;
      top: 5px;
      right: 0px;
      text-align: center;
      color: #fff;
      font-size: 11px; }
    .post-thumb .post-format:before {
      content: "";
      display: block;
      width: 0px;
      height: 0px;
      border: 20px solid transparent;
      border-top-color: rgba(0, 0, 0, 0.9);
      border-right-color: rgba(0, 0, 0, 0.9);
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
  .post-thumb:hover .post-format:before {
    border-top-color: #ca2026;
    border-right-color: #ca2026; }
  .post-thumb img {
    --webkit-filter: grayscale(70%);
    --filter: grayscale(70%);
    --moz-transition: all ease 0.5s;
    --o-transition: all ease 0.5s;
    --webkit-transition: all ease 0.5s;
    --transition: all ease 0.5s; }
  .post-thumb:hover img {
    --webkit-filter: grayscale(30%);
    --filter: grayscale(30%); }

.post-thumbstartleft {
    background-color: #15C3A6;
    display: inline-block;
    width: 100%;
    position: relative;
    text-align: left;
}

    .post-thumbstartleft img {
        display: inline-block;
        vertical-align: middle;
    }

.text-overlay {
    position: absolute;
    top: 50%;
    right: 50px; /* Abstand vom rechten Rand */
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
    text-align: center;
    animation: fadeInOut 4s infinite;
}

/* Animation und Text nur auf Bildschirmen ab 768px Breite anzeigen */
@media (min-width: 768px) {
    .text-overlay {
        animation: fadeInOut 4s infinite;
        display: block;
    }
}

/* Kein Animationseffekt und Text auf kleinen Bildschirmen */
@media (max-width: 767px) {
    .text-overlay {
        display: none;
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}



.post-thumbstart {
    position: relative;
}
    .post-thumbstart .post-format {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 999;
    }
        .post-thumbstart .post-format i {
            display: block;
            text-align: center;
            line-height: 20px;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 5px;
            right: 0px;
            text-align: center;
            color: #fff;
            font-size: 11px;
        }
        .post-thumbstart .post-format:before {
            border-top-color: #ca2026;
            border-right-color: #ca2026;
        }
    .post-thumbstart:hover .post-format:before {
        border-top-color: #ca2026;
        border-right-color: #ca2026;
    }
    .post-thumbstart img {
        -webkit-filter: grayscale(30%);
        filter: grayscale(30%);
    }
    .post-thumbstart:hover img {
        -webkit-filter: grayscale(30%);
        filter: grayscale(30%);
    }

@media screen and (max-width: 991px) {
    .post-thumbstart {
        display: none;
    }
}

.post-meta {
    font-size: 22px;
    margin: 5px 0px 10px 0px;
    font-weight: 400;
    /*text-transform: uppercase;*/
    font-family: "Helvetica-Narrow", serif;
}

@media screen and (max-width: 991px) {
    .post-meta {
        font-size: 20px;
    }
}

  .post-meta a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px; }
    .post-meta a:hover {
      color: #ca2026; }
  .post-meta em {
    margin: 0px 6px;
    text-transform: none;
    font-style: normal; }
  .post-meta .post-category a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px; }
    .post-meta .post-category a:hover {
      text-decoration: underline;
      color: #111; }
    .post-meta .post-category-red {
        color: #c13832;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }
  .post-meta .post-author a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px; }
    .post-meta .post-author a:hover {
      text-decoration: underline;
      color: #111; }

.post-meta-free {
    font-size: 22px;
    margin: 5px 0px 10px 0px;
    font-weight: 400;
    /*text-transform: uppercase;*/
    font-family: "Helvetica-Narrow", serif;
    text-align: right;
}

.post-meta-free a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px;
}

    .post-meta-free a:hover {
        color: #ca2026;
    }

.post-meta-free em {
    margin: 0px 6px;
    text-transform: none;
    font-style: normal;
}

.post-meta-free .post-category a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px;
}

    .post-meta-free .post-category a:hover {
        text-decoration: underline;
        color: #111;
    }

.post-meta-free .post-category-red {
    color: #c13832;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px;
}

.post-meta-free .post-author a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    letter-spacing: 1px;
}

.post-meta-free .post-author a:hover {
    text-decoration: underline;
    color: #111;
}

.free {
    font-size: 14px !important;
    font-weight: 200;
    padding: 5px 10px;
    background-color: #368c2d;
    color: white;
    margin-left: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
}

    .free:hover {
        background-color: #45a049;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.post-meta-search {
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    font-weight: 400;
    /*text-transform: uppercase;*/
    font-family: "Helvetica-Narrow", serif;
    color: #000;
}

    .post-meta-search a {
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

        .post-meta-search a:hover {
            color: #ca2026;
        }

    .post-meta-search em {
        margin: 0px 6px;
        text-transform: none;
        font-style: normal;
    }

    .post-meta-search .post-category a {
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

        .post-meta-search .post-category a:hover {
            text-decoration: underline;
            color: #111;
        }

    .post-meta-search .post-category-red {
        color: #c13832;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

    .post-meta-search .post-author a {
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

        .post-meta-search .post-author a:hover {
            text-decoration: underline;
            color: #111;
        }

.post-meta-archiv {
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    font-weight: 400;
    /*text-transform: uppercase;*/
    font-family: "Helvetica-Narrow", serif;
}

    .post-meta-archiv a {
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

        .post-meta-archiv a:hover {
            color: #ca2026;
        }

    .post-meta-archiv em {
        margin: 0px 6px;
        text-transform: none;
        font-style: normal;
    }

    .post-meta-archiv .post-category a {
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

        .post-meta-archiv .post-category a:hover {
            text-decoration: underline;
            color: #111;
        }

    .post-meta-archiv .post-category-red {
        color: #c13832;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
        font-weight: bold;
    }

    .post-meta-archiv .post-author a {
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        letter-spacing: 1px;
    }

        .post-meta-archiv .post-author a:hover {
            text-decoration: underline;
            color: #111;
        }

.post-des p {
  font-size: 17px;
  margin: 10px 0px;
  color: #333; 
  text-align: justify;
}

.post-des a {
    --color: #f14c45 !important;
    border-bottom: 2px dotted #4a4a4a !important;
    border-bottom-color: blue !important;
}
  @media screen and (max-width: 767px) {
    .post-des p {
      font-size: 16px; } }
  .post-des p a {
    font-family: "Lora", serif; }

@media (min-width: 992px) {
    .cols {
        display: grid; /* Aktiviert CSS Grid */
        grid-template-columns: 1fr 330px; /* Linke Spalte flexibel, rechte Spalte fest */
        gap: 20px; /* Abstand zwischen den Spalten */
    }

        .cols .colleft {
            min-height: 500px; /* Mindesthöhe für Inhalte */
        }

        .cols .colright {
            display: flex; /* Aktiviert Flexbox für die rechte Spalte */
            flex-direction: column; /* Inhalte vertikal anordnen */
        }

            .cols .colright .right-top {
                flex-grow: 1; /* Oberer Bereich nimmt den verfügbaren Platz ein */
            }
}

@media (min-width:992px) { /* nur Desktop         */
    @supports (position:sticky) and (bottom:1px) { /* Chrome, Edge, Safari */
        .cols .colright .right-bottom {
            position: sticky;
            bottom: 40px; /* gleicher Abstand wie früher           */
            z-index: 10;
        }
    }
}

.feedback-placeholder {
    height: 0;
}


@media screen and (max-width: 768px) {
    .cols {
        gap: 0px;
    }
}

/* Responsive Styles */
@media screen and (max-width: 991px) {
    .cols {
        display: flex; /* Flexbox für vertikales Layout bei schmalen Bildschirmen */
        flex-direction: column; /* Inhalte untereinander anordnen */
        padding: 0; /* Keine zusätzlichen Abstände */
    }

        .cols .colleft,
        .cols .colright {
            display: flex;
            flex-direction: column;
        }

        .cols .colright {
            order: 2; /* Rechte Spalte unter der linken anzeigen */
        }

        .cols .colleft {
            order: 1; /* Linke Spalte bleibt oben */
        }

        .cols .colright .right-bottom {
            margin-top: 0px; /* Abstand nach oben für Feedback-Modul */
            padding-top: 0; /* Kein zusätzlicher Innenabstand */
        }
        /* right-top darf wachsen und drückt right-bottom nach unten */
        .cols .colright .right-top {
            flex: 1 1 auto;
        }
}

.sidebar-left .cols {
  padding: 0px 0px 0px 350px;
  position: relative; }
  .sidebar-left .cols:before {
    content: "";
    display: block;
    width: 10px;
    background-color: #eeeeee;
    top: 0px;
    position: absolute;
    bottom: 0px;
    right: auto;
    left: 320px; }
  .sidebar-left .cols .colleft {
    width: 100%;
    min-height: 500px;
    float: right; }
  .sidebar-left .cols .colright {
    width: 300px;
    float: left;
    margin: 0px 0px 0px -350px;
    padding: 0px 0px 0px 0px;
    min-height: 500px; }
  @media screen and (max-width: 991px) {
    .sidebar-left .cols {
      padding: 0px 0px 0px 0px; }
      .sidebar-left .cols:before {
        display: none; }
      .sidebar-left .cols .colleft {
        float: none; }
      .sidebar-left .cols .colright {
        width: 100%;
        float: none;
        margin: 0px; } }

.home-slider {
  overflow: hidden;
  z-index: 1;
  position: relative;
  margin: -20px -40px 0px -40px; }
  @media screen and (max-width: 991px) {
    .home-slider {
      margin: -20px -15px 0px -15px; } }
  .home-slider .swiper-wrapper {
    width: 100%; }
  .home-slider .swiper-slide {
    width: 100%; }
  .home-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 1px solid #111 !important;
    background-color: #111 !important; }
  .home-slider .swiper-prev {
    top: 300px; }
    @media screen and (max-width: 991px) {
      .home-slider .swiper-prev {
        top: 190px; } }
    @media screen and (max-width: 767px) {
      .home-slider .swiper-prev {
        display: none; } }
  .home-slider .swiper-next {
    top: 300px; }
    @media screen and (max-width: 991px) {
      .home-slider .swiper-next {
        top: 190px; } }
    @media screen and (max-width: 767px) {
      .home-slider .swiper-next {
        display: none; } }
  .home-slider .big-sticky-post {
    margin: 0px; }
  .home-slider .bx-controls-direction {
    display: none; }
  .home-slider .bx-pager {
    position: absolute;
    bottom: -10px;
    left: 0px;
    right: 0px;
    text-align: center;
    z-index: 99; }
    .home-slider .bx-pager .bx-pager-item {
      display: inline-block;
      margin: 0px 5px; }
      .home-slider .bx-pager .bx-pager-item a {
        display: block;
        width: 10px;
        height: 10px;
        border: 1px solid #111;
        border-radius: 0px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: #fff;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s; }
        .home-slider .bx-pager .bx-pager-item a.active {
          background-color: #111; }
  .home-slider ul {
    padding: 0px;
    margin: 0px;
    list-style: none; }

.big-sticky-post {
  --margin: -20px -40px 0px -40px;
  position: relative;
  text-align: center; }
  @media screen and (max-width: 991px) {
    .big-sticky-post {
      margin: 20px -15px 0px -15px; } }
.big-sticky-post .post-meta {
    position: absolute;
    top: 0px;
    font-weight: bold;
    font-size: 18px;
    left: 100px;
    margin: 0px;
    z-index: 10;
    color: #4a4a4a;
    padding: 5px 10px;
    text-align: center;
    --width: 110px;
    --height: 80px;
    --text-transform: uppercase;
    font-family: "Helvetica-Narrow", serif;
}
    @media screen and (max-width: 991px) {
        .big-sticky-post .post-meta {
            --display: none;
            margin: -40px 0px 0px -109px;
        } }
.big-sticky-post .post-meta .post-category {
    padding: 5px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    display: block;
    border-top: 1px solid #4a4a4a;
    font-size: 35px;
    font-weight: bold;
}
      .big-sticky-post .post-meta .post-category a:hover {
        color: #fff; }
  .big-sticky-post img {
    width: 100%; }
  .big-sticky-post h1 {
    text-align: center;
    font-size: 30px;
    margin: 20px 0px;
    padding: 5px 25px;
    display: inline-block;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    border-bottom: 2px solid #111; }
    .big-sticky-post h1:hover {
      color: #ca2026;
      border-bottom: 2px solid #ca2026; }
    @media screen and (max-width: 991px) {
      .big-sticky-post h1 {
        font-size: 35px;
        margin: 10px 0px; } }
    @media screen and (max-width: 767px) {
      .big-sticky-post h1 {
        font-size: 30px;
        margin: 20px 10px;
        hyphens: auto;
      } }
  .big-sticky-post .post-des {
    margin-bottom: 50px; }
    .big-sticky-post .post-des p {
      --margin: 10px 20px;
      color: #333;
      text-align: justify;
      font-size: 20px; }
      @media screen and (max-width: 767px) {
        .big-sticky-post .post-des p {
          font-size: 16px;
          margin: 10px 10px; } }

.box-category {
  margin-bottom: 50px; }
  .box-category.box-category-fix {
    margin-bottom: 0px; }

.category-mid-post .post-thumb {
  margin-bottom: 10px; }

.category-mid-post h2 {
    padding: 5px 0px;
    margin: 0px 0px 0px 0px;
    /*border-bottom: 2px solid #111;*/
}
  @media screen and (max-width: 991px) {
    .category-mid-post h2 {
      font-size: 25px; } }

.category-mid-post-two:hover {
    --background-color: #eeeeee;
    cursor: pointer;
}

.category-mid-post-two h2 {
    font-weight: 500;
    font-size: 20px;
    padding: 0px 0px;
    margin: 0px 0px 10px 0px;
    /*   border-bottom: 2px solid #111;*/
}
  @media screen and (max-width: 991px) {
    .category-mid-post-two h2 {
      font-size: 20px; } }

.category-list-post {
  padding: 0px; }
  @media screen and (max-width: 991px) {
    .category-list-post {
      margin-top: 10px; } }
  .category-list-post li {
    min-height: 110px;
    padding: 20px 0px;
    border-top: 1px dotted #111;
    list-style: none; }
    .category-list-post li:first-child {
      border: none;
      padding-top: 0px;
      min-height: 95px; }
    .category-list-post li .post-thumb {
      float: left;
      width: 100px;
      margin: 0px 15px 0px 0px; }
      .category-list-post li .post-thumb img {
        width: 100px;
        height: 70px; }
    .category-list-post li h3 {
      font-size: 20px;
      margin: 0px;
      font-weight: 400;
      min-height: 70px;
      align-content: center;
      align-items: center;
      display: flex;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .category-list-post li h3:hover {
        border: none !important; }
  .category-list-post.category-list-post-two {
    margin: 0px -15px; }
    .category-list-post.category-list-post-two li {
      border: none;
      float: left;
      width: 50%;
      padding: 0px 15px;
      min-height: 50px; }
      .category-list-post.category-list-post-two li > div {
        border-top: 1px dotted #111;
        padding: 20px 0px; }
      .category-list-post.category-list-post-two li:nth-child(2) > div {
        border: none; }
      .category-list-post.category-list-post-two li:nth-child(1) > div {
        border: none; }
      @media screen and (max-width: 767px) {
        .category-list-post.category-list-post-two li {
          float: none;
          width: 100%; }
          .category-list-post.category-list-post-two li:nth-child(2) > div {
            border-top: 1px dotted #111; } }

.category-big-post .post-thumb {
  margin-bottom: 10px; }

.category-big-post h2 {
  font-size: 25px;
  padding: 5px 0px;
  margin: 0px 0px 0px 0px;
  border-bottom: 2px solid #111; }
  @media screen and (max-width: 991px) {
    .category-big-post h2 {
      font-size: 25px; } }

.three-articles {
  margin: 30px 0px 10px 0px; }
  .three-articles h3 {
    font-size: 18px;
    margin: 0px;
    font-weight: 400;
    margin: 10px 0px 0px 0px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .three-articles h3:hover {
      color: #ca2026; }
  @media screen and (max-width: 767px) {
    .three-articles .three-item {
      min-height: 100px;
      border-top: 1px dotted #111;
      padding: 15px 0px; }
      .three-articles .three-item img {
        float: left;
        width: 100px;
        height: 70px;
        margin: 0px 15px 0px 0px; }
      .three-articles .three-item h3 {
        min-height: 70px;
        align-content: center;
        align-items: center;
        margin: 0px;
        display: flex; } }

.box-review {
  position: relative;
  margin-bottom: 70px; }
  .box-review .bx-prev {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #111;
    background-color: #fff;
    margin-top: -20px;
    text-align: center;
    border: 1px solid #fff;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .box-review .bx-prev:hover {
      background-color: transparent;
      color: #fff; }
  .box-review .bx-next {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #111;
    background-color: #fff;
    margin-top: -20px;
    text-align: center;
    border: 1px solid #fff;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .box-review .bx-next:hover {
      background-color: transparent;
      color: #fff; }
  .box-review .bx-pager {
    position: absolute;
    bottom: -40px;
    left: 0px;
    right: 0px;
    text-align: center;
    z-index: 99; }
    .box-review .bx-pager .bx-pager-item {
      display: inline-block;
      margin: 0px 5px; }
      .box-review .bx-pager .bx-pager-item a {
        display: block;
        width: 10px;
        height: 10px;
        border: 1px solid #111;
        border-radius: 0px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: #fff;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s; }
        .box-review .bx-pager .bx-pager-item a.active {
          background-color: #111; }

.swiper-review {
  position: relative;
  overflow: hidden; }
  .swiper-review .swiper-slide {
    width: 90%; }
  .swiper-review .review-item {
    position: relative; }
    .swiper-review .review-item img {
      width: 100%; }
    .swiper-review .review-item .review-des {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: 999;
      padding: 20px;
      color: #fff;
      background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, black 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 );
      /* IE6-9 */ }
      @media screen and (max-width: 767px) {
        .swiper-review .review-item .review-des {
          padding: 20px 10px 20px 10px; } }
    .swiper-review .review-item .post-category a:hover {
      color: #fff; }
    .swiper-review .review-item h2 {
      margin: 10px 0px; }
      @media screen and (max-width: 991px) {
        .swiper-review .review-item h2 {
          font-size: 25px; } }
      @media screen and (max-width: 767px) {
        .swiper-review .review-item h2 {
          font-size: 20px;
          font-weight: normal; } }
    @media screen and (max-width: 767px) {
      .swiper-review .review-item .post-meta {
        display: none; } }

.swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  background-color: #fff;
  width: 8px;
  height: 8px;
  margin: 0px 6px !important;
  border: 1px solid #111;
  border-radius: 0px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #fff;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s; }
  .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 1px solid #fff; }

/***other index*/
.big-page-caption {
    --border-bottom: 10px solid #eeeeee;
    position: relative;
    --padding: 10px 0px;
    text-align: center;
    --margin: 0px 0px 20px 0px;
    margin-bottom: 20px;
}
  @media screen and (max-width: 991px) {
    .big-page-caption {
        --border-bottom: 5px solid #4a4a4a;
        --margin: 0px 0px 30px 0px;
    } }
.big-page-caption p {
    font: normal normal 550 28px/23px "Lato" !important;
    color: grey;
}
    @media screen and (max-width: 1191px) {
      .big-page-caption p {
        font-size: 60px; } }
    @media screen and (max-width: 991px) {
      .big-page-caption p {
        font-size: 80px; } }
    @media screen and (max-width: 767px) {
      .big-page-caption p {
        font-size: 25px; } }

.grids-outer {
  overflow: hidden; }

.grids {
    --display: grid; /* Grid-Layout beibehalten */
  margin: 0px -20px;
  position: relative;
  --min-height: 500px; }
  .grids .post-thumb {
    margin-bottom: 10px; }
  .grids:before {
    content: "";
    display: block;
    top: 0px;
    position: absolute;
    width: 2px;
    bottom: 0px;
    background-color: #eeeeee;
    left: 33.33333%; }
    @media screen and (max-width: 767px) {
      .grids:before {
        display: none; } }
  .grids:after {
    content: "";
    display: block;
    top: 0px;
    position: absolute;
    width: 2px;
    bottom: 0px;
    background-color: #eeeeee;
    left: 66.66666%; }
    @media screen and (max-width: 767px) {
      .grids:after {
        display: none; } }
  .grids .grids-item {
    float: left;
    width: 33.333%;
    padding: 0px 20px 0px 20px;
    margin-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .grids .grids-item {
        float: none;
        width: 100%; } }
  .grids.grids-large:before {
    display: none; }
  .grids.grids-large:after {
    display: none; }
  .grids.grids-large .grids-item {
    float: left;
    width: 50%;
    padding: 0px 20px 0px 20px;
    margin-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .grids.grids-large .grids-item {
        float: none;
        width: 100%; } }
  .grids.grids-small:before {
    display: none; }
  .grids.grids-small:after {
    display: none; }
  .grids.grids-small .grids-item {
    float: left;
    width: 25%;
    padding: 0px 20px 0px 20px;
    margin-bottom: 30px; }
    @media screen and (max-width: 991px) {
      .grids.grids-small .grids-item {
        float: left;
        width: 50%; } }
    @media screen and (max-width: 767px) {
      .grids.grids-small .grids-item {
        float: none;
        width: 100%; } }

.colleft .grids:before {
  display: none; }

.colleft .grids:after {
  display: none; }

.colleft .grids .grids-item {
  float: left;
  width: 50%;
  padding: 0px 20px 0px 20px;
  margin-bottom: 30px; }
  @media screen and (max-width: 767px) {
    .colleft .grids .grids-item {
      float: none;
      width: 100%; } }

.paging-outer {
    text-align: center;
    margin: 20px 0;
    padding: 10px 0;
}

.paging a, .paging .prev, .paging .next {
    display: inline-block;
    padding: 6px 10px;
    font: normal normal medium 14px/20px "Lato", sans-serif;
    letter-spacing: 0px;
    color: #000000;
    text-decoration: none;
    background-color: transparent;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    opacity: 1;
}

/* Zusätzlicher Abstand vor und nach den Vor-/Zurück-Buttons */
.paging .prev {
    margin-right: 15px; /* Größerer Abstand zur ersten Seitenzahl */
}

.paging .next {
    margin-left: 15px; /* Größerer Abstand zur letzten Seitenzahl */
}

    .paging a:hover, .paging .prev:hover, .paging .next:hover {
        background-color: rgba(0, 0, 0, 0.1); /* Hintergrundfarbe beim Hover */
        border-radius: 50%; /* Runde Form beim Hover */
        padding: 6px 12px 6px 12px;
    }

.paging .paging-active {
    background-color: #15C3A6; /* Gewünschtes Grün für die aktive Seite */
    color: #000000; /* Schwarzer Text für die aktive Seite */
    font-weight: bold;
    border-radius: 50%; /* Perfekt runde Form */
    padding: 6px 12px 6px 12px;
}

/* Anpassungen für mobile Geräte */
@media (max-width: 767px) {
    .paging a, .paging .paging-active {
        padding: 6px;
        margin: 0 3px;
        font-size: 14px;
        padding: 6px 12px 6px 12px;
    }
}

.grid-masonry {
  margin: 50px 0px;
  border-top: 4px solid #111;
  padding: 50px 0px;
  position: relative; }
  .grid-masonry:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #111;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 2px; }

.grid-item {
  margin-bottom: 50px;
  float: left;
  width: 33.33%;
  padding: 0px 20px; }
  .grid-item .post-item-isotop {
    -moz-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
    transition: all ease 0.2s; }
  @media screen and (max-width: 991px) {
    .grid-item {
      width: 50%; } }
  @media screen and (max-width: 767px) {
    .grid-item {
      float: none;
      width: 100%; } }
  .grid-item.grid-item-large {
    width: 66.666%; }
    @media screen and (max-width: 991px) {
      .grid-item.grid-item-large {
        width: 100%;
        float: none; } }
    @media screen and (max-width: 767px) {
      .grid-item.grid-item-large {
        float: none;
        width: 100%; } }

    .grids-large .grid-item {
        margin-bottom: 10px;
        float: left;
        width: 50%;
        padding-right: 0px;
    }
  @media screen and (max-width: 767px) {
    .grids-large .grid-item {
      float: none;
      width: 100%; } }

.grids-small .grid-item {
  margin-bottom: 50px;
  float: left;
  width: 25%;
  padding: 0px 20px; }
  @media screen and (max-width: 991px) {
    .grids-small .grid-item {
      float: none;
      width: 50%; } }
  @media screen and (max-width: 767px) {
    .grids-small .grid-item {
      float: none;
      width: 100%; } }

/*==========Sidebar=========*/
.box-trending {
  padding: 0px;
  margin-bottom: 50px; }
  .box-trending .trending-item {
    margin-bottom: 10px; }
  .box-trending h3 {
    font-size: 20px;
    padding: 10px 0px;
    margin: 0px;
    font-weight: normal; }
    .box-trending h3 a {
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .box-trending h3 a:hover {
        color: #ca2026; }

.list-trending {
  padding: 0px; }
  .list-trending li {
    padding: 15px 0px;
    border-top: 1px dotted #111;
    list-style: none; }
    .list-trending li .post-thumb {
      float: left;
      width: 80px;
      margin: 0px 15px 0px 0px; }
      .list-trending li .post-thumb img {
        width: 80px;
        height: 55px; }
    .list-trending li h3 {
      font-size: 20px;
      margin: 0px;
      padding: 0px;
      font-weight: 400;
      min-height: 55px;
      align-content: center;
      align-items: center;
      display: flex;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .list-trending li h3:hover {
        border: none !important; }
  .list-trending.list-tab li {
    min-height: 85px;
    padding: 15px 0px;
    border-top: 1px dotted #111;
    list-style: none; }
    .list-trending.list-tab li .post-meta {
      margin: 5px 0px 5px 0px; }
    .list-trending.list-tab li:first-child {
      border: none; }
    .list-trending.list-tab li .post-thumb {
      float: left;
      width: 80px;
      margin: 0px 15px 0px 0px; }
      .list-trending.list-tab li .post-thumb img {
        width: 80px;
        height: 55px; }
    .list-trending.list-tab li h3 {
      font-size: 20px;
      margin: 0px;
      padding: 0px;
      font-weight: 400;
      min-height: 25px;
      display: block;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .list-trending.list-tab li h3:hover {
        border: none !important; }

.box-about {
  min-height: 600px;
  background-color: #111;
  margin-bottom: 50px; }

.box-search-sidebar {
  margin-bottom: 50px;
  height: 40px;
  position: relative;
  padding: 0px 79px 0px 0px; }
  .box-search-sidebar input[type="search"] {
    width: 100%;
    height: 40px;
    display: block;
    outline: none;
    padding: 0px 10px;
    border: 1px solid #111;
    font-family: "Helvetica-Narrow", serif;
    text-transform: uppercase; }
    .box-search-sidebar-button {
        height: 40px;
        width: 80px;
        text-align: center;
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: #4a4a4a;
        color: #fff;
        font-family: "Helvetica-Narrow", serif;
        border: none;
        outline: none;
        cursor: pointer;
        text-transform: uppercase;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        padding-top: 8px;
    }
    .box-search-sidebar-button:hover {
      background-color: #ca2026; 
      color: #fff;
    }

.box-social {
    background-color: transparent; /* Entferne den grauen Hintergrund */
    padding: 15px;
    border: 1px solid #e0e0e0; /* Leichter Rahmen */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    margin-bottom: 25px; /* Beibehaltung des Abstands */
}

    .box-social a {
        margin: 3px;
        padding: 2px 4px;
        text-decoration: none;
        display: inline-block;
        border-radius: 3px;
        transition: transform 0.2s ease;
    }

        .box-social a:hover {
            transform: scale(1.1);
            background-color: #e3e3e3;
        }


.dropdown-page {
    background-color: #fff;
    padding: 0px 10px;
    text-align: center;
    font-family: "Helvetica-Narrow", serif;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0px 0px 20px 0px;
    width: auto;
}

.social {
  text-align: center;
  padding: 0px 0px 0px 0px;
  min-height: 35px; }
  .social a {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    width: 35px;
    margin: 0px 9px 10px 9px;
    text-align: center;
    font-size: 15px;
    color: #222;
    position: relative;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    @media screen and (max-width: 767px) {
      .social a {
        margin: 0px 5px 10px 5px; } }
    .social a:before {
      content: "";
      display: block;
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border: 2px solid #222;
      opacity: 1;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
    .social a:hover {
      background-color: #ca2026;
      color: #fff; }
      .social a:hover:before {
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0; }
    .social a.facebook:hover {
      background-color: #3b5998; }
    .social a.twitter:hover {
      background-color: #3a92c8; }
    .social a.google:hover {
      background-color: #dd4b39; }
    .social a.pinterest:hover {
      background-color: #cb2027; }
    .social a.youtube:hover {
      background-color: #b00; }

.social-network {
  overflow: hidden; 
  text-align: center;
}
  .social-network .sn-row {
    margin: 0px 0px; }
    .social-network .sn-row .sn-col {
      float: left;
      width: 50%;
      padding: 0px 5px; }

.sn-item {
    padding: 2px 2px 2px 67px;
    height: 50px;
    margin: 0px 0px 10px 0px;
    cursor: pointer;
    background-color: #4a4a4a;
}
    .sn-item .sn-icon {
        float: left;
        margin: 0px 0px 0px -65px;
        height: 46px;
        width: 46px;
        color: #4a4a4a;
        text-align: center;
        font-size: 20px;
        line-height: 46px;
        background-color: #fff;
    }
    .sn-item .sn-icon i {
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
  .sn-item p {
    margin: 0px;
    font-family: "Helvetica-Narrow", serif;
    text-transform: uppercase;
    color: #fff;
    padding: 0px 0px 0px 0px;
    font-size: 22px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
  .sn-item span {
    display: block;
    margin: 0px;
    font-size: 11px;
    color: #eee;
    font-family: "Helvetica-Narrow", serif;
    letter-spacing: 1px; }
  .sn-item:hover p {
    color: #3b5998; }
  .sn-item:hover .sn-icon {
    color: #3b5998; }
  .sn-item.twitter:hover p {
    color: #3a92c8; }
  .sn-item.twitter:hover .sn-icon {
    color: #3a92c8; }
  .sn-item.pinterest:hover p {
    color: #cb2027; }
  .sn-item.pinterest:hover .sn-icon {
    color: #cb2027; }
  .sn-item.youtube:hover p {
    color: #b00; }
  .sn-item.youtube:hover .sn-icon {
    color: #b00; }

.subcribe-box {
    margin-bottom: 30px;
    text-align: center;
    padding: 30px;
    --border: 2px solid #ddd;
    background-color: #15C3A6;
    --border-radius: 10px;
    --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    .subcribe-box h3 {
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: bold;
        margin: 0 0 20px 0;
        background-color: transparent;
        font-size: 20px;
        color: #333;
    }

    .subcribe-box p {
        font-size: 16px;
        margin: 0 0 20px 0;
        color: #666;
    }

        .subcribe-box p label {
            display: none;
        }

    .subcribe-box input[type="email"] {
        width: 100%;
        height: 45px;
        padding: 0 15px;
        line-height: 45px;
        background-color: #fff;
        margin: 20px 0;
        display: block;
        color: #333;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .subcribe-box input[type="email"]:focus {
            border-color: #999;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }

    .subcribe-box input[type="submit"] {
        height: 45px;
        background-color: #4a4a4a;
        cursor: pointer;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-family: "Helvetica-Narrow", serif;
        width: 100%;
        border: none;
        border-radius: 5px;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

        .subcribe-box input[type="submit"]:hover {
            background-color: #ca2026;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

.box-facebook {
  margin-bottom: 50px; }

.box-ads {
  margin-bottom: 50px;
  text-align: center; }
  .box-ads img {
    max-width: 100%; }

.box-scroll-fix {
  position: relative; }

.box-tab {
  margin-bottom: 50px; }

.tab-caption {
    height: 22px;
    background-color: #4a4a4a;
}
  .tab-caption ul {
    list-style: none;
    padding: 0px;
    margin: 0px; }
    .tab-caption ul li {
      float: left;
      width: 33.33333333%;
      text-align: center;
      height: 22px; }
      .tab-caption ul li a {
        display: block;
        font-family: "Helvetica-Narrow", serif;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 0px 10px; }
      .tab-caption ul li.active a {
        background-color: #ca2026; }

@media screen and (min-width: 992px) and (min-height: 620px) {
  .affix {
    position: fixed !important;
    top: 20px;
    width: 300px; } }

.box-news-by-tags {
  margin-bottom: 50px; }
  .box-news-by-tags ul {
    list-style: none;
    padding: 0px; }
    .box-news-by-tags ul li {
      border-bottom: 1px dotted #111;
      padding: 10px 0px 10px 20px;
      position: relative; }
      .box-news-by-tags ul li:before {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        position: absolute;
        top: 20px;
        left: 4px;
        background-color: #111; }
      .box-news-by-tags ul li:last-child {
        border: none; }
    .box-news-by-tags ul p {
      margin: 0px;
      font-size: 18px; }
      .box-news-by-tags ul p a {
        font-family: "Helvetica-Narrow", serif;
        font-weight: 400;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s; }
        .box-news-by-tags ul p a:hover {
          color: #ca2026; }

/*==========Bottom=========*/
.bottom {
    margin: 50px 0px 20px 0px;
    border-top: 10px solid #e4e4e4;
    padding: 50px 0px 0px 0px;
    position: relative;
    min-height: 100px;
    overflow: hidden;
}
  .bottom .bottom-inner {
    margin: 0px -20px; }
  .bottom .bottom-col {
    float: left;
    width: 33.333%;
    min-height: 100px;
    padding: 0px 20px; }
    @media screen and (max-width: 991px) {
      .bottom .bottom-col {
        float: none;
        width: 100%;
        margin-bottom: 20px; }
        .bottom .bottom-col:nth-child(2) {
          border: none !important; } }
    .bottom .bottom-col:nth-child(2) {
      border-left: 2px solid #e4e4e4;
      border-right: 2px solid #e4e4e4; }

.col-caption {
    background-color: #15C3A6;
    padding: 0px 10px;
    text-align: center;
    font-family: "Lato", serif;
    color: #fff;
    --text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0px 0px 10px 0px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.col-caption-grey {
    background-color: #eeeeee;
    padding: 0px 10px;
    text-align: center;
    font-family: "Lato", serif;
    color: #000;
    --text-transform: uppercase;
    letter-spacing: 2px; 
    margin: 0px 0px 20px 0px;
    cursor: pointer;
}

.col-caption-white {
    background-color: #ffffff;
    padding: 0px 10px;
    text-align: left;
    font-family: "Lato", serif;
    font-weight: bold;
    color: #140606;
    --text-transform: uppercase; /* Text in Großbuchstaben */
    letter-spacing: 2px;
    margin: 0px 0px 20px 0px;
    cursor: pointer;
    position: relative; /* Für den Pfeil notwendig */
    border-bottom: 1px solid #ccc; /* Graue durchgezogene Linie unten */
    font: normal normal 600 20px/23px "Lato" !important;
}

    .col-caption-white::after {
        content: "\276F"; /* Unicode für ">" */
        font-size: 14px; /* Größe des Pfeils */
        position: absolute;
        right: 10px; /* Abstand vom rechten Rand */
        top: 50%; /* Vertikale Zentrierung */
        transform: translateY(-50%) rotate(90deg); /* Pfeil nach unten drehen */
        color: #000; /* Farbe des Pfeils */
    }


col-caption a {
    color: white !important;
}

.col-filter {
    background-color: #15C3A6;
    padding: 0px 10px;
    text-align: center;
    font-family: "Lato", serif;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0px 0px 20px 0px;
}

.col-mainsearch {
    --background-color: #4a4a4a;
    --padding: 0px 10px;
    text-align: left;
    font-family: "Lato", serif;
    font-size: 22px;
    color: #000;
    letter-spacing: 2px;
    --margin: 0px 0px 20px 0px;
}

.recent-post {
  counter-reset: count;
  list-style: none;
  padding: 0px; }
  .recent-post li {
    border-bottom: 1px dotted #111;
    padding: 20px 20px 20px 30px;
    position: relative; }
    .recent-post li:before {
      display: block;
      --content: counter(count);
      counter-increment: count;
      position: absolute;
      top: 50%;
      text-align: center;
      height: 25px;
      width: 20px;
      font-size: 25px;
      line-height: 25px;
      margin-top: -13px;
      left: 0;
      font-style: italic;
      font-family: serif; }
    .recent-post li:first-child {
      padding-top: 0px; }
    .recent-post li:last-child {
      border: none; }
  .recent-post p {
      padding-right: 10px;
      hyphens:auto;
    margin: 0px; }
    .recent-post p a {
      font-family: "Lato", serif;
      font-weight: 400; }
      .recent-post p a:hover {
        text-decoration: underline; }

.list-tags {
    padding-top: 15px; /* Fügt zusätzlichen Abstand oberhalb der Ergebnisse hinzu */
    position: relative;
    z-index: 2;
}

    .list-tags a {
        font-size: 14px;
        padding: 5px 10px;
        background-color: #f3f3f3;
        color: #333;
        border-radius: 3px;
        text-decoration: none;
    }

        .list-tags a:hover {
            background-color: #d0d0d0; /* Hover-Effekt */
        }

.similar-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Optional: Abstand zwischen den Tags */
}

    .similar-tags a {
        display: inline-block;
        text-align: center;
        line-height: 30px;
        padding: 5px 15px;
        font-family: "Lora", serif;
        margin: 5px;
        --text-transform: uppercase;
        background-color: #eeeeee;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

        .similar-tags a:hover {
            background-color: #15C3A6;
            color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }


.instagram-pics {
  margin: 0px -5px;
  list-style: none;
  padding: 0px; }
  .instagram-pics li {
    float: left;
    width: 33.333%;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    padding: 5px 5px; }
    .instagram-pics li:hover {
      opacity: 0.8; }
    .instagram-pics li img {
      display: block;
      margin: 0px;
      width: 100%; }

/*==========Footer=========*/
.footer {
  text-align: center;
  padding: 50px 0px 50px 0px;
  margin: 0px 15px 0px 15px;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s; }
  .footer a.logo {
    display: inline-block;
    max-width: 300px;
    padding: 10px 10px; }
  .footer .footer-bar {
    padding: 10px 15px; }
  .footer .allright {
    text-align: center;
    padding: 20px 0px; }
    .footer .allright p {
      margin: 0px;
      --text-transform: uppercase;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 2px; }
  .footer .social-footer {
    padding: 20px 0px;
    text-align: center; }
    .footer .social-footer a {
      display: inline-block;
      height: 35px;
      line-height: 35px;
      width: 35px;
      margin: 0px 9px 0px 9px;
      text-align: center;
      font-size: 15px;
      transform: rotate(-45deg);
      color: #222;
      position: relative;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .footer .social-footer a i {
        transform: rotate(45deg); }
      .footer .social-footer a:before {
        content: "";
        display: block;
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 1px solid #222;
        opacity: 1;
        -moz-transition: all ease 0.5s;
        -o-transition: all ease 0.5s;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s; }
      .footer .social-footer a:hover {
        background-color: #ca2026;
        color: #fff; }
        .footer .social-footer a:hover:before {
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -o-transform: scale(1.1);
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
          opacity: 0; }
      .footer .social-footer a.facebook:hover {
        background-color: #3b5998; }
      .footer .social-footer a.twitter:hover {
        background-color: #3a92c8; }
      .footer .social-footer a.google:hover {
        background-color: #dd4b39; }
      .footer .social-footer a.pinterest:hover {
        background-color: #cb2027; }
      .footer .social-footer a.youtube:hover {
        background-color: #b00; }

.totop {
    position: fixed;
    right: calc((100% - 1100px)/2 - 20px);
    --border: 2px solid #111;
    width: 65px;
    height: 55px;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    padding: 5px 0;
    font-size: 13px;
    line-height: 20px;
    background-color: darkgrey;
    color: #fff;
    cursor: pointer;
    transition: all ease 0.5s;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
}

    .totop i {
        font-size: 32px;
    }



/* Spezielle Position nur auf wir.aspx */
.startseite .totop {
    right: calc(20px + 20%);
}

    /* Pfeil-Styling mit dem alten Look */
    .totop em {
        font-style: normal;
        display: block;
        font-weight: 700;
        font-size: 28px; /* Pfeil etwas größer für bessere Lesbarkeit */
        line-height: 50px;
    }

    /* Wenn der Button sichtbar wird */
.totop.show {
    bottom: 0px;
    opacity: 1;
    pointer-events: auto;
    transition: bottom 0.3s ease, opacity 0.3s ease;
}


/*==========Page Category=========*/
.sitemap {
  text-align: center;
  --border-bottom: 1px solid #111;
  padding: 0px 0px 10px 0px;
  text-align: center;
  --text-transform: uppercase;
  font-family: "Helvetica-Narrow", serif; }
  .sitemap .sitemap-inner {
    display: inline-block;
    --width: 1000px !important;
  }
  .sitemap a {
    display: inline-block;
    line-height: 1.4;
    float: left; }
    .sitemap a:hover {
      text-decoration: underline; }
    .sitemap a i {
      margin: 0px 5px 0px 0px;
      font-size: 20px; }
      @media screen and (max-width: 991px) {
        .sitemap a i {
          font-size: 12px; } }
    @media screen and (max-width: 991px) {
      .sitemap a {
        font-size: 12px; } }
  .sitemap span {
    margin: 0px 15px;
    display: inline-block;
    line-height: 1.2;
    float: left; }
    @media screen and (max-width: 991px) {
      .sitemap span {
        font-size: 12px;
        margin: 0px 6px; } }

.category-item {
    padding: 5px 0px;
    /*border-bottom: 1px solid #111; */
}
  @media screen and (max-width: 991px) {
    .category-item {
      padding: 5px 0px;
      border: none; } }
  .category-item:last-child {
    border: none; }
  @media screen and (min-width: 992px) {
    .category-item .post-thumb {
      margin-bottom: 0px; } }

.category-small-item {
    padding: 0px 0px;
    /*border-bottom: 1px solid #111;*/
}
  @media screen and (max-width: 991px) {
    .category-small-item {
      padding: 5px 0px; } }
  .category-small-item .post-thumb {
    margin: 5px 0px 0px 0px; }
    .category-small-item .post-thumb img {
      min-height: 40px; }
  .category-small-item .category-mid-post-two h2 {
    border-bottom: none !important; }
    .category-small-item .category-mid-post-two h2:hover {
      border-bottom: none !important; }
  @media screen and (max-width: 600px) {
    .category-small-item .category-mid-post-two h2 {
      font-size: 18px;
      border-bottom: none !important; }
      .category-small-item .category-mid-post-two h2:hover {
        border-bottom: none !important; }
    .category-small-item .post-thumb {
      margin: 10px -15px 0px 0px; } }

.list-item-category .category-item:first-child {
  padding-top: 0px; }

.list-item-category .category-item:last-child {
  border-top: none; }

.list-item-category {
    margin-top: 10px;
}

list-item-category-glossar {
    margin-top: 0px;
}
/*==========Page Detail=========*/
.detail-page {
    --margin: 10px 0px 0px 0px;
    --background-color: white;
}
  @media screen and (max-width: 991px) {
    .detail-page {
      --margin: 20px 0px 0px 0px; 
      --background-color: white;
    } }

.detail-title {
  position: relative;
  padding: 10px 0px;
  text-align: center;
  margin: 0px 0px 0px 0px; }
  .detail-title h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: center;
    margin: 0px;
    padding: 10px 0px;
    font-family: "Helvetica-Narrow", serif;
    color: #4a4a4a;
    border-bottom: 3px solid #111;
    display: inline-block; }
    @media screen and (max-width: 767px) {
      .detail-title h1 {
        font-size: 25px; } }

.detail-title-kurz {
    position: relative;
    padding: 10px 0px;
    text-align: center;
    margin: 0px 0px 0px 0px;
}

    .detail-title-kurz h1 {
        font-size: 50px;
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: 2px;
        text-align: center;
        margin: 0px;
        padding: 10px 0px;
        font-family: "Helvetica-Narrow", serif;
        color: grey;
        border-bottom: 3px solid #111;
        display: inline-block;
    }

@media screen and (max-width: 767px) {
    .detail-title-kurz h1 {
        font-size: 25px;
    }
}

.detail-meta {
  text-align: center;
  --margin-bottom: -32px; }
  @media screen and (max-width: 991px) {
    .detail-meta {
      margin-bottom: 0px; } }
  .detail-meta .post-meta {
    display: inline-block;
    margin: 0px; }
  .detail-meta .detai-social {
    display: inline-block; }
    .detail-meta .detai-social a {
      cursor: pointer;
      display: inline-block;
      margin: 0px 2px;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .detail-meta .detai-social a.facebook:hover {
        color: #3b5998; }
      .detail-meta .detai-social a.twitter:hover {
        color: #3a92c8; }
      .detail-meta .detai-social a.google:hover {
        color: #dd4b39; }
      .detail-meta .detai-social a.pinterest:hover {
        color: #cb2027; }
  .detail-meta .post-dot {
    display: inline-block;
    padding: 0px 10px; }

.post-thumbnail {
  margin-bottom: 20px; }
  .post-thumbnail.post-thumbnail-large {
    margin-bottom: 30px; }
  .post-thumbnail img {
    width: 100%; }

.detail.detail-three-col {
  -moz-columns: 3;
  -webkit-columns: 3;
  columns: 3;
  margin: 20px 0px 0px 0px;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  color: #222; }
  @media screen and (max-width: 767px) {
    .detail.detail-three-col {
      -moz-columns: 1;
      -webkit-columns: 1;
      columns: 1;
      text-align: left; } }

.detail {
    --display: flex; /* Bringt Elemente in eine Zeile */
    justify-content: center; /* Zentriert die Gruppe horizontal */
    align-items: center; /* Vertikale Ausrichtung */
    gap: 15px; /* Abstand zwischen Eingabefeld und Button */
    margin-top: 20px; /* Optional: Abstand nach oben */
}

    .detail p {
  margin: 0px 0px 20px 0px; }

.detail > p:first-child:first-letter {
  font-size: 60px;
  line-height: 40px;
  font-weight: 500;
  text-align: center;
  width: 40px;
  height: 40px;
  font-weight: 900;
  text-transform: uppercase;
  float: left;
  margin: 10px 10px 0px 5px;
  color: #111;
  display: block; }
  @media screen and (max-width: 767px) {
    .detail > p:first-child:first-letter {
      font-size: 40px;
      line-height: 30px;
      width: 30px;
      height: 30px; } }

.detail a {
  color: #ca2026; }
  .detail a:hover {
    text-decoration: underline; }

/**formast*/
blockquote {
  padding: 70px 20px 20px 20px;
  position: relative;
  border: none;
  margin: 20px auto; }
  blockquote:before {
    display: block;
    width: 50px;
    height: 50px;
    content: "\201C";
    background-color: #111;
    border-radius: 50%;
    color: #fff;
    line-height: 50px;
    position: absolute;
    padding: 20px 0px 0px 0px;
    top: 10px;
    left: 50%;
    font-size: 80px;
    text-align: center;
    font-family: georgia,serif;
    margin: 0px 0px 0px -15px; }
  blockquote p {
    margin: 15px 0px;
    font-style: italic;
    font-weight: 300;
    color: #000;
    font-size: 18px; }
    blockquote p cite {
      display: block;
      margin: 10px 0px;
      color: #333;
      font-size: 14px; }

.detail-bottom {
  border-top: 5px solid #111;
  margin: 50px 0px 0px 0px;
  position: relative;
  padding: 20px 0px 0px 0px; }
  .detail-bottom:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background-color: #111; }

.single-info {
  border: 1px solid #eeeeee;
  position: relative;
  padding: 20px 20px;
  margin: 50px 0px 0px 0px; }
  .single-info .caption {
    font-family: "Helvetica-Narrow", serif;
    padding: 2px 10px;
    position: absolute;
    top: 0px;
    right: 0px;
    line-height: 30px;
    margin: 0px;
    top: -20px;
    text-align: center;
    width: 100%; }
    .single-info .caption span {
      display: inline-block;
      line-height: 30px;
      letter-spacing: 2px;
      padding: 0px 10px;
      text-transform: uppercase;
      background-color: #fff; }

.tags {
    text-align: center;
}

    .tags a {
        display: inline-block;
        line-height: 25px;
        padding: 3px 10px;
        font-family: "Lora", serif;
        margin: 3px 5px 10px 5px;
        --text-transform: uppercase;
        font-size: 12px;
        font-weight: 300;
        background-color: #e4e4e4;
        color: #000;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

        .tags a:hover {
            opacity: 0.8;
            background-color: #d4d4d4;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }


.single-rating {
  height: 60px;
  position: relative; }
  .single-rating:before {
    content: "";
    display: block;
    width: 1px;
    height: 60px;
    position: absolute;
    top: 0px;
    left: 50%;
    border-left: 1px solid #eeeeee; }
  .single-rating .rating-item {
    float: left;
    text-align: center;
    width: 50%; }
    .single-rating .rating-item strong {
      font-weight: 600;
      font-family: "Helvetica-Narrow", serif;
      font-size: 25px;
      display: block;
      text-align: center; }
    .single-rating .rating-item span {
      font-family: "Helvetica-Narrow", serif;
      font-weight: 300;
      font-family: 12px; }

.single-share {
  --height: 60px;
  text-align: center;
  --padding: 15px 0px 0px 0px; }
  .single-share a {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    width: 30px;
    margin: 0px 0px;
    font-size: 20px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .single-share a.facebook:hover {
      color: #3b5998; }
    .single-share a.google:hover {
      color: #dd4b39; }
    .single-share a.twitter:hover {
      color: #3a92c8; }
    .single-share a.pinterest:hover {
      color: #cb2027; }
    .single-share a.youtube:hover {
      color: #b00; }

.single-star {
  height: 140px;
  text-align: center;
  padding: 55px 0px 0px 0px; }
  .single-star a {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    width: auto;
    margin: 0px 0px;
    font-size: 20px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .single-star a.facebook:hover {
      color: #3b5998; }
    .single-star a.google:hover {
      color: #dd4b39; }
    .single-star a.twitter:hover {
      color: #3a92c8; }
    .single-star a.pinterest:hover {
      color: #cb2027; }
    .single-star a.youtube:hover {
        color: #b00;
    }

.related-post {
  margin: 50px 0px 0px 0px; }
  .related-post .post-title {
    font-size: 20px; }

.box-detail-caption {
  border-top: 2px solid #111;
  text-align: center;
  padding: 10px 0px 20px 0px;
  margin-bottom: 20px;
  font-size: 25px; }
  @media screen and (max-width: 991px) {
    .box-detail-caption {
      font-size: 18px; } }
  .box-detail-caption span {
    font-family: "Helvetica-Narrow", serif;
    letter-spacing: 2px;
    text-transform: uppercase; }

.author-single {
  margin-top: 50px;
  padding: 15px;
  background-color: #eeeeee; }
  .author-single .author-single-inner {
    border: 1px solid #111;
    padding: 20px 0px 20px 180px; }
    @media screen and (max-width: 767px) {
      .author-single .author-single-inner {
        padding: 20px 0px 20px 100px; } }
  .author-single img {
    float: left;
    margin: 0px 0px 0px -160px;
    width: 140px;
    height: 140px; }
    @media screen and (max-width: 767px) {
      .author-single img {
        margin: 0px 0px 0px -80px;
        width: 60px;
        height: 60px; } }
  .author-single h3 {
    font-family: "Lato", serif;
    font-size: 18px;
    margin: 0px 0px 15px 0px;
    font-weight: 600; }
  .author-single p {
    font-size: 16px;
    margin: 0px; }

.author-start {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .author-start:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        border-color: #4CAF50;
    }

.author-start-inner h3 {
    color: #333;
    font-size: 20px;
    margin-bottom: 10px;
}

.author-start-inner p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.author-start-inner a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

    .author-start-inner a:hover {
        color: #388E3C;
    }

.author-start-inner i {
    color: #4CAF50;
    transition: color 0.3s ease;
}

    .author-start-inner i:hover {
        color: #388E3C;
    }


.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

@media screen and (max-width: 767px) {
    .author-start .author-start-inner {
    }
}
.author-start img {
    float: left;
    margin: 0px 0px 0px -160px;
    width: 140px;
    height: 140px;
}
@media screen and (max-width: 767px) {
    .author-start img {
        margin: 0px 0px 0px -80px;
        width: 60px;
        height: 60px;
    }
}
.author-start h3 {
    font-family: "Helvetica-Narrow", serif;
    font-size: 18px;
    margin: 0px 0px 15px 0px;
    font-weight: 600;
}
.author-start p {
    font-size: 16px;
    margin: 0px;
}

.social-author {
  padding: 10px 0px; }
  .social-author a {
    display: inline-block;
    line-height: 25px;
    width: 20px;
    height: 25px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    border-radius: 50%;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .social-author a:hover {
        color: #c13832;
    }

.box-comment {
  margin-top: 50px; }

.comments-area {
  margin-top: 50px; }
  .comments-area .detail-caption {
    border-top: 2px solid #111;
    text-align: center;
    padding: 10px 0px 20px 0px;
    font-size: 25px; }
    @media screen and (max-width: 991px) {
      .comments-area .detail-caption {
        font-size: 18px; } }
    .comments-area .detail-caption span {
      font-family: "Helvetica-Narrow", serif;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 25px; }

.comment-reply-title {
  text-align: center;
  font-family: "Helvetica-Narrow", serif;
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 50px 0px 0px 0px; }

.author-info {
  padding: 10px 0px 10px 70px;
  margin: 10px 0px;
  border-bottom: 1px dashed #eeeeee; }
  .author-info .author-avatar {
    width: 50px;
    height: 50px;
    float: left;
    margin: 0px 0px 0px -70px; }
    .author-info .author-avatar img {
      width: 50px;
      height: 50px;
      border: 1px solid #111; }
  .author-info .author-text .author-text-inner {
    padding: 0px 15px;
    font-family: "Helvetica-Narrow", serif;
    border-left: 2px solid #eeeeee; }
  .author-info .author-text h3 {
    margin: 0px;
    font-size: 15px; }
    .author-info .author-text h3 a {
      font-weight: bold;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s;
      color: #111; }
      .author-info .author-text h3 a:hover {
        color: #ca2026; }
    .author-info .author-text h3 span {
      display: block;
      font-size: 12px;
      color: #999;
      font-family: "Lora", serif;
      margin: 5px 0px 10px 0px; }
  .author-info .author-text p {
    margin: 0px 0px 0px 0px;
    font-size: 13px; }
    .author-info .author-text p a {
      color: #999;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s;
      margin-left: 10px; }
      .author-info .author-text p a:hover {
        color: #ca2026;
        text-decoration: underline; }

.reply-wrap {
  margin-top: 10px; }
  .reply-wrap .author-info {
    border: none; }

.comment-list {
  padding: 0px;
  margin: 0px;
  list-style: none; }
  .comment-list .comment {
    list-style: none;
    padding: 10px 0px 10px 70px;
    margin: 10px 0px;
    border-bottom: 1px dashed #eeeeee; }
    @media screen and (max-width: 1199px) {
      .comment-list .comment .comment {
        padding: 10px 0px 10px 0px;
        margin-left: -20px; } }
    .comment-list .comment .comment-body {
      border-left: 4px solid #eeeeee;
      padding: 0px 0px 0px 15px; }
  .comment-list .children .comment {
    border: none; }
  .comment-list .comment-author img {
    width: 50px;
    height: 50px;
    float: left;
    margin: 0px 0px 0px -85px;
    border: 1px solid #111; }
  .comment-list .comment-author .fn {
    font-size: 15px;
    font-weight: 400;
    font-family: "Helvetica-Narrow", serif; }
    .comment-list .comment-author .fn a {
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .comment-list .comment-author .fn a:hover {
        color: #ca2026; }
  .comment-list .comment-author .says {
    display: none; }
  .comment-list .comment-metadata {
    margin: 0px 0px 10px 0px;
    font-size: 12px;
    color: #999;
    font-family: "Helvetica-Narrow", serif;
    font-weight: 300; }
    .comment-list .comment-metadata time {
      text-transform: uppercase;
      font-family: "Helvetica-Narrow", serif; }
  .comment-list p.comment-awaiting-moderation {
    color: #999;
    font-style: italic;
    margin: 0px; }
  .comment-list .comment-reply-link {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    font-family: "Helvetica-Narrow", serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
    background-color: #111;
    padding: 0px 10px; }
    .comment-list .comment-reply-link:hover {
      background-color: #ca2026; }
  .comment-list .comment-content {
    display: inline;
    color: #222; }
    .comment-list .comment-content p {
      display: inline-block;
      font-size: 15px; }
  .comment-list .reply {
    display: inline;
    padding: 0px 0px 0px 0px;
    font-weight: 300; }

.form-submit {
  margin-top: 10px; }

.field-item {
  margin: 10px 0px; }
  .field-item .field-caption {
    font-family: "Helvetica-Narrow", serif;
  color: #111;
  font-weight: 300;
  z-index: 999;
  font-family: "Helvetica-Narrow", serif;
  letter-spacing: 0px;
 --text-transform: uppercase;
  text-align: center;
  position: absolute;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  cursor: pointer;
  top: 50%;
  left: 10px;
  margin-top: -13px;
  --text-transform: uppercase;
    font-family: "Helvetica-Narrow", serif;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    border: 1px solid #111; }
    .field-item input:hover {
        --border: 1px solid #111; }
  .field-item textarea {
    --text-transform: uppercase;
    font-family: "Helvetica-Narrow", serif;
    width: 100%;
    height: 150px;
    padding: 10px 10px;
    font-size: 15px;
    display: block;
    margin: 0px;
    color: #222;
    outline: none;
    border: 1px solid #666;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .field-item textarea:hover {
      border: 1px solid #111; }

.wpcf7-form p {
  margin: 10px 0px; }
  .wpcf7-form p input {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    color: #222;
    font-size: 15px;
    outline: none;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    border: 1px solid #777; }
    .wpcf7-form p input:hover {
      border: 1px solid #111; }
  .wpcf7-form p textarea {
    width: 100%;
    height: 120px;
    padding: 10px 10px;
    font-size: 15px;
    color: #222;
    outline: none;
    border: 1px solid #777;
    display: block;
    margin: 0px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .wpcf7-form p textarea:hover {
      border: 1px solid #111; }

.wpcf7-form .wpcf7-submit {
  height: 40px;
  padding: 0px 20px;
  line-height: 40px;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  border: none !important;
  background-color: #ca2026;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  width: auto;
  background-color: #111; }
  .wpcf7-form .wpcf7-submit:focus {
    outline: none;
    color: #fff; }
  .wpcf7-form .wpcf7-submit:hover {
    background-color: #ca2026; }

/**gallery format*/
.swiper-prev {
  width: 25px;
  text-align: center;
  height: 25px;
  background-color: #eeeeee;
  color: #111;
  font-weight: 600 !important;
  z-index: 999;
  font-family: "Helvetica-Narrow", serif;
  letter-spacing: 0px;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  cursor: pointer;
  top: 50%;
  left: 10px;
  margin-top: -13px;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s; }
  .swiper-prev:hover {
    background-color: #111;
    color: #fff; }

.swiper-next {
  width: 25px;
  text-align: center;
  height: 25px;
  background-color: #eeeeee;
  color: #111;
  font-weight: 600 !important;
  z-index: 999;
  font-family: "Helvetica-Narrow", serif;
  letter-spacing: 0px;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  cursor: pointer;
  top: 50%;
  right: 10px;
  margin-top: -13px;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s; }
  .swiper-next:hover {
    background-color: #111;
    color: #fff; }

.swiper-gallery {
  overflow: hidden;
  position: relative; }
  .swiper-gallery .swiper-slide {
    width: 80%; }
  .swiper-gallery.swiper-gallery1 .swiper-slide {
    width: 100%; }

/**video format*/
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%; }

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/***detail news*/
.article-bar {
  border-bottom: 1px solid #111;
  min-height: 40px;
  padding: 5px 0px 5px 0px;
  margin-bottom: 50px; }
  @media screen and (max-width: 991px) {
    .article-bar {
      margin-top: -15px; } }
  .article-bar span {
    float: left;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Helvetica-Narrow", serif; }
    @media screen and (max-width: 991px) {
      .article-bar span {
        font-size: 14px; } }
  .article-bar .detai-social {
    float: right; }
    .article-bar .detai-social a {
      line-height: 30px;
      float: left;
      margin: 0px 0px 0px 10px;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .article-bar .detai-social a:hover {
        color: #ca2026; }

.article-fullpage {
  margin-bottom: 30px; }
  .article-fullpage h1 {
    font-size: 100px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0px 0px 20px 0px;
    padding: 0px; }
    @media screen and (max-width: 991px) {
      .article-fullpage h1 {
        font-size: 50px; } }
    @media screen and (max-width: 767px) {
      .article-fullpage h1 {
        font-size: 30px; } }
  .article-fullpage .sapo p {
    text-align: center;
    font-size: 25px;
    font-style: italic;
    max-width: 900px;
    margin: 0px auto;
    font-weight: 300; }
    @media screen and (max-width: 991px) {
      .article-fullpage .sapo p {
        font-size: 18px;
        margin: 10px auto; } }
  .article-fullpage .post-content {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    margin: 80px 0px 50px 0px;
    -moz-column-gap: 60px;
    -webkit-column-gap: 60px;
    column-gap: 60px;
    color: #222;
    position: relative; }
    @media screen and (max-width: 991px) {
      .article-fullpage .post-content {
        margin: 30px 0px 30px 0px; } }
    .article-fullpage .post-content:first-letter {
      font-size: 60px;
      line-height: 40px;
      font-weight: 500;
      text-align: center;
      width: 40px;
      height: 40px;
      font-weight: 900;
      text-transform: uppercase;
      float: left;
      margin: 10px 10px 0px 5px;
      color: #111;
      display: block; }
      @media screen and (max-width: 767px) {
        .article-fullpage .post-content:first-letter {
          font-size: 40px;
          line-height: 30px;
          width: 30px;
          height: 30px; } }
    .article-fullpage .post-content:before {
      content: "";
      display: block;
      position: absolute;
      bottom: 0px;
      top: 0px;
      left: 50%;
      width: 1px;
      background-color: #eeeeee; }
      @media screen and (max-width: 767px) {
        .article-fullpage .post-content:before {
          display: block;
          left: 0px;
          width: 0px; } }
    .article-fullpage .post-content p {
      font-size: 20px;
      margin: 0px 0px 30px 0px; }
      @media screen and (max-width: 991px) {
        .article-fullpage .post-content p {
          font-size: 16px; } }
    .article-fullpage .post-content img {
      margin-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .article-fullpage .post-content {
        -moz-columns: 1;
        -webkit-columns: 1;
        columns: 1;
        text-align: left; } }

/*****related*/
.related {
  padding: 0px 0px 30px 0px; }
  .related .related-caption {
    border-top: 5px solid #111;
    border-bottom: 1px dashed #eeeeee;
    text-align: center;
    padding: 10px 0px;
    font-size: 35px;
    font-family: "Helvetica-Narrow", serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 30px;
    letter-spacing: 2px;
    position: relative; }
    .related .related-caption:before {
      display: block;
      width: 100%;
      position: absolute;
      top: 5px;
      left: 0px;
      right: 0px;
      height: 1px;
      background-color: #111; }
  .related .col-md-4:nth-child(2) .related-item:before {
    content: "";
    width: 1px;
    position: absolute;
    top: 50%;
    height: 60px;
    margin-top: -10px;
    left: -15px;
    background-color: #eeeeee;
    display: block; }
  .related .col-md-4:nth-child(2) .related-item:after {
    content: "";
    width: 1px;
    position: absolute;
    top: 50%;
    height: 60px;
    margin-top: -10px;
    right: -15px;
    background-color: #eeeeee;
    display: block; }

.related-item {
  text-align: center;
  padding: 0px 10px;
  position: relative; }
  .related-item .post-category {
    display: block;
    text-align: center; }
    .related-item .post-category a {
      color: #999; }
  .related-item h3 {
    margin: 0px 0px 10px 0px;
    text-transform: uppercase; }
  .related-item p {
    text-align: center; }

.tag-news-caption {
  border-top: 10px solid #eeeeee;
  position: relative;
  padding: 30px 0px;
  margin: 40px 0px; }
  @media screen and (max-width: 991px) {
    .tag-news-caption {
      border-top: 5px solid #111;
      margin: 20px 0px; } }
.tag-news-caption p {
    font-size: 70px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 2px;
    text-align: center;
    margin: 0px;
    font-family: "Helvetica-Narrow", serif;
    color: #4a4a4a;
    text-transform: uppercase;
}
    @media screen and (max-width: 1191px) {
      .tag-news-caption p {
        font-size: 80px; } }
    @media screen and (max-width: 991px) {
      .tag-news-caption p {
        font-size: 40px; } }
    @media screen and (max-width: 767px) {
      .tag-news-caption p {
        font-size: 25px; } }

.tags-three {
  padding: 0px 0px 20px 0px;
  margin-bottom: 20px; }
  .tags-three .post-thumb {
    margin-bottom: 10px; }
  .tags-three .three-item {
    margin-bottom: 20px; }

/*==========Page 404=========*/
.bottom-fix {
  border: none !important; }

.page-404 {
  text-align: center;
  padding: 100px 0px; }
  @media screen and (max-width: 1400px) {
    .page-404 {
      padding: 50px 0px; } }
  @media screen and (max-width: 991px) {
    .page-404 {
      padding: 20px 0px; } }
  .page-404 h1 {
    font-size: 200px;
    letter-spacing: 2px;
    margin: 0px;
    font-weight: 700; }
    @media screen and (max-width: 1400px) {
      .page-404 h1 {
        font-size: 150px; } }
    @media screen and (max-width: 991px) {
      .page-404 h1 {
        font-size: 100px; } }
  .page-404 h3 {
    text-transform: uppercase;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0px; }
    @media screen and (max-width: 1400px) {
      .page-404 h3 {
        font-size: 35px; } }
    @media screen and (max-width: 991px) {
      .page-404 h3 {
        font-size: 25px; } }
  .page-404 p {
    font-size: 18px;
    margin: 30px 0px; }
  .page-404 .my-btn {
    text-transform: uppercase;
    letter-spacing: 2px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .page-404 .my-btn:hover {
      background-color: #111;
      color: #fff;
      opacity: 0.8; }

/*==========Page Gallery=========*/
.gallery-page {
  margin: 50px 0px 0px 0px; }

.gallery-album {
    margin-bottom: 30px;
    background-color: #c13832;
}
  .gallery-album h3 {
    margin: 0px;
    text-align: center;
    padding: 10px 5px;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase; }
  .gallery-album img {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .gallery-album img:hover {
      opacity: 0.8; }

/*==========Page About =========*/
.about-me {
  text-align: center; }
  .about-me .about-img {
    margin: -20px -40px 0px -40px; }
    @media screen and (max-width: 991px) {
      .about-me .about-img {
        margin: -20px -15px 0px -15px; } }
  .about-me h2 {
    font-family: "Helvetica-Narrow", serif;
    font-size: 30px;
    margin: 20px auto;
    letter-spacing: 2px;
    font-weight: normal; }

.about-social {
  margin: 20px 0px 100px 0px; }
  .about-social a {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: #eeeeee;
    line-height: 35px;
    margin: 10px 3px;
    line-height: 35px;
    font-size: 15px;
    color: #111;
    border-radius: 50%;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .about-social a:hover {
      background-color: #111;
      color: #fff; }

/*==========Page Shop =========*/
.shop-item {
  position: relative;
  margin-bottom: 40px; }
  .shop-item .shop-img {
    position: relative;
    overflow: hidden; }
    .shop-item .shop-img img {
      width: 100%; }
    .shop-item .shop-img .sale {
      position: absolute;
      top: 10px;
      left: 0px;
      display: inline-block;
      padding: 1px 10px;
      z-index: 9;
      background-color: #ca2026;
      color: #fff;
      text-align: center;
      font-size: 17px;
      font-family: "Helvetica-Narrow", serif;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 300;
      line-height: 20px; }
    .shop-item .shop-img .add-to-cart {
      position: absolute;
      bottom: -40px;
      left: 0px;
      right: 0px;
      line-height: 40px;
      font-size: 12px;
      letter-spacing: 3px;
      z-index: 9;
      background-color: #111;
      color: #fff;
      text-align: center;
      font-family: "Helvetica-Narrow", serif;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .shop-item .shop-img .add-to-cart:hover {
        background-color: #ca2026; }
    .shop-item .shop-img .like {
      position: absolute;
      top: 10px;
      right: 10px;
      line-height: 40px;
      font-size: 12px;
      width: 30px;
      height: 30px;
      -moz-transform: scale(0.2);
      -ms-transform: scale(0.2);
      -o-transform: scale(0.2);
      -webkit-transform: scale(0.2);
      transform: scale(0.2);
      opacity: 0;
      z-index: 9;
      color: #111;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      font-family: "Helvetica-Narrow", serif;
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .shop-item .shop-img .like:hover {
        color: #c0392b;
        cursor: pointer; }
        .shop-item .shop-img .like:hover i:before {
          content: "\f004"; }
    .shop-item .shop-img:hover .add-to-cart {
      bottom: 0px; }
    .shop-item .shop-img:hover .like {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1; }
  .shop-item h3 {
    margin: 10px 0px;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px; }
    .shop-item h3 a {
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .shop-item h3 a:hover {
        color: #ca2026; }
  .shop-item .price {
    margin: 5px 0px; }
    .shop-item .price span {
      font-family: "Helvetica-Narrow", serif;
      margin: 0px 20px 0px 0px;
      color: #ca2026;
      font-size: 16px; }
      .shop-item .price span.old {
        color: #666;
        text-decoration: line-through; }
  .shop-item .votes i {
    font-size: 13px;
    margin: 0px 3px 0px 0px;
    color: #f1c40f; }

.loadmore-prouduct {
  text-align: center;
  margin: 0px 0px 50px 0px; }
  .loadmore-prouduct a {
    font-family: "Helvetica-Narrow", serif;
    letter-spacing: 2px;
    font-size: 14px;
    border: 1px solid #111;
    line-height: 35px;
    text-transform: uppercase;
    display: inline-block;
    padding: 0px 30px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .loadmore-prouduct a:hover {
      background-color: #111;
      color: #fff; }

.shopbar {
  margin: 0px 0px 20px 0px; }
  .shopbar h3 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    float: left;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    line-height: 25px; }
    @media screen and (max-width: 991px) {
      .shopbar h3 {
        float: none; } }
  .shopbar .sortby {
    float: right;
    position: relative;
    border: 1px solid #111; }
    @media screen and (max-width: 991px) {
      .shopbar .sortby {
        float: none;
        width: 100%; } }
    .shopbar .sortby p {
      font-family: "Helvetica-Narrow", serif;
      font-size: 14px;
      text-transform: uppercase;
      padding: 0px 10px;
      line-height: 25px;
      margin: 0px; }
      .shopbar .sortby p i {
        float: right;
        line-height: 25px;
        margin: 0px 0px 0px 5px; }
    .shopbar .sortby .dropdown-menu {
      border: none;
      border-radius: 0px;
      left: auto;
      right: -1px;
      background-color: #111;
      padding: 0px; }
      .shopbar .sortby .dropdown-menu li {
        border-bottom: 1px solid #333; }
        .shopbar .sortby .dropdown-menu li a {
          display: block;
          color: #fff;
          font-family: "Helvetica-Narrow", serif;
          font-size: 13px;
          color: #fff;
          text-transform: uppercase;
          font-weight: 300;
          padding: 5px 10px;
          text-align: right; }
          .shopbar .sortby .dropdown-menu li a:hover {
            background-color: #333; }
        .shopbar .sortby .dropdown-menu li.current a {
          color: #ca2026; }

.list-popular-product {
  margin-bottom: 50px; }

.pp-item {
  padding: 15px 0px;
  border-bottom: 1px dotted #111;
  min-height: 110px; }
  .pp-item:first-child {
    padding-top: 0px;
    min-height: 95px; }
  .pp-item .shop-img {
    float: left;
    width: 70px;
    border: 1px solid #111;
    padding: 3px;
    margin: 0px 15px 0px 0px; }
  .pp-item h3 {
    margin: 0px;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 10px 0px 0px 0px; }
    .pp-item h3 a {
      -moz-transition: all ease 0.5s;
      -o-transition: all ease 0.5s;
      -webkit-transition: all ease 0.5s;
      transition: all ease 0.5s; }
      .pp-item h3 a:hover {
        color: #ca2026; }
  .pp-item .price {
    margin: 5px 0px; }
    .pp-item .price span {
      font-family: "Helvetica-Narrow", serif;
      margin: 0px 20px 0px 0px;
      color: #ca2026;
      font-size: 16px; }
      .pp-item .price span.old {
        color: #666;
        text-decoration: line-through; }

.box-shopping-cart {
  margin-bottom: 50px;
  border: 1px solid #111;
  min-height: 100px;
  padding: 0px 20px 20px 20px; }
  .box-shopping-cart .sc-item {
    padding: 20px 0px;
    border-bottom: 1px dotted #111; }
    .box-shopping-cart .sc-item h4 {
      font-size: 16px;
      font-weight: 400;
      text-transform: uppercase;
      margin: 0px; }
    .box-shopping-cart .sc-item p {
      color: #666;
      font-family: "Helvetica-Narrow", serif;
      text-transform: uppercase;
      margin: 5px 0px 0px 0px;
      font-size: 13px; }
  .box-shopping-cart h5 {
    margin: 20px 0px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px; }
    .box-shopping-cart h5 span {
      color: #ca2026; }
  .box-shopping-cart .my-btn {
    display: block;
    width: 100%;
    text-transform: uppercase;
    margin: 10px 0px 0px 0px;
    background-color: #ca2026;
    text-align: center; }
    .box-shopping-cart .my-btn:hover {
      background-color: #ca2026;
      color: #fff;
      opacity: 0.8; }
    .box-shopping-cart .my-btn.btn-view-cart {
      border: 1px solid #111;
      color: #111;
      background-color: transparent; }
      .box-shopping-cart .my-btn.btn-view-cart:hover {
        background-color: #ca2026;
        color: #fff;
        border: 1px solid #ca2026; }

.box-filter {
  margin-bottom: 50px; }
  .box-filter .slider-budget {
    margin: 30px 0px 0px 0px; }
    .box-filter .slider-budget .slider.slider-horizontal {
      width: 100%; }
    .box-filter .slider-budget .slider-track {
      height: 5px;
      background-color: #eeeeee;
      background-image: none !important;
      border-radius: 0px !important;
      box-shadow: none !important; }
    .box-filter .slider-budget .slider-selection {
      background-color: #111 !important;
      background-image: none !important; }
  .box-filter .slider-handle {
    border: 2px solid #fff !important;
    cursor: pointer;
    margin-top: -2px; }
  .box-filter p {
    margin: 10px 0px;
    font-family: "Helvetica-Narrow", serif;
    text-transform: uppercase; }
    .box-filter p span {
      margin: 0px 5px;
      color: #ca2026; }
      .box-filter p span em {
        font-style: normal;
        color: #ca2026; }

.swiper-product {
  overflow: hidden;
  position: relative; }
  .swiper-product .swiper-slide {
    width: 100%; }

.product-des h1 {
  margin: 10px 0px;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 1px; }
  .product-des h1 a {
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s; }
    .product-des h1 a:hover {
      color: #ca2026; }

.product-des .price {
  margin: 5px 0px; }
  .product-des .price span {
    font-family: "Helvetica-Narrow", serif;
    margin: 0px 20px 0px 0px;
    color: #ca2026;
    font-size: 16px; }
    .product-des .price span.old {
      color: #666;
      text-decoration: line-through; }

.product-des .votes i {
  font-size: 13px;
  margin: 0px 3px 0px 0px;
  color: #f1c40f; }

.product-des .product-sapo {
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px;
  border-top: 2px solid #111; }

.product-des .my-btn {
  margin-top: 25px; }

.quantity {
  margin-top: 19px;
  width: 90px;
  height: 30px; }
  .quantity input[type="button"] {
    float: left;
    width: 30px;
    height: 30px;
    background-color: #111;
    color: #fff;
    line-height: 25px;
    font-size: 15px;
    outline: none;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    font-family: "Helvetica-Narrow", serif;
    font-size: 20px;
    border: none; }
    .quantity input[type="button"]:hover {
      background-color: #ca2026; }
  .quantity input[type="text"] {
    font-family: "Helvetica-Narrow", serif;
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: none;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    font-size: 15px;
    outline: none; }

.shop-tab {
  margin-top: 30px;
  border: 1px solid #111; }
  .shop-tab .shop-tab-caption ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    height: 40px;
    border-bottom: 1px solid #111; }
    .shop-tab .shop-tab-caption ul li {
      float: left; }
      .shop-tab .shop-tab-caption ul li a {
        display: block;
        line-height: 40px;
        font-family: "Helvetica-Narrow", serif;
        font-size: 14px;
        padding: 0px 20px; }
      .shop-tab .shop-tab-caption ul li.active a {
        background-color: #111;
        color: #fff; }
  .shop-tab .tab-content {
    padding: 20px; }
    .shop-tab .tab-content .table tr {
      border: none; }
      .shop-tab .tab-content .table tr td {
        border: none; }
      .shop-tab .tab-content .table tr:nth-child(odd) {
        background-color: #eeeeee; }

.cart-table {
  border: 1px solid #111;
  min-width: 767px; }
  .cart-table thead tr {
    background-color: #111;
    border: none !important; }
    .cart-table thead tr th {
      border: none !important;
      color: #fff;
      font-family: "Helvetica-Narrow", serif;
      text-transform: uppercase;
      font-weight: 400;
      padding: 10px !important; }
  .cart-table tr {
    border-bottom: 1px solid #111 !important; }
    .cart-table tr td {
      border: none !important;
      padding: 10px !important;
      vertical-align: middle !important;
      font-family: "Helvetica-Narrow", serif;
      text-transform: uppercase; }
      .cart-table tr td .quantity {
        margin: 0px !important; }
      .cart-table tr td .amount {
        color: #ca2026; }
      .cart-table tr td .total {
        color: #ca2026; }

.cart-tab-wrap {
  overflow: auto;
  margin-bottom: 20px; }

.cart-totals {
  margin: 30px 0px 30px 0px; }
  .cart-totals table tr td {
    border: 1px solid #111;
    font-family: "Helvetica-Narrow", serif;
    text-transform: uppercase;
    padding: 10px;
    font-weight: 400; }
    .cart-totals table tr td strong {
      color: #ca2026; }
  .cart-totals table tr th {
    border: 1px solid #111;
    font-family: "Helvetica-Narrow", serif;
    text-transform: uppercase;
    padding: 10px;
    font-weight: 400;
    background-color: #eeeeee; }

/*==========Page Contact =========*/
.page-contact h3 {
  font-family: "Helvetica-Narrow", serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 2px;
  margin: 10px 0px 20px 0px; }

.page-contact .my-btn {
  margin-top: 15px; }

#map {
  width: 100%;
  height: 400px;
  border: 1px solid #111;
  margin: 30px 0px 0px 0px; }

.list-infomation {
  padding: 20px 0px;
  list-style: none; }
  .list-infomation li {
    margin: 10px 0px; }
    .list-infomation li i {
      float: left;
      width: 30px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      color: #555;
      margin: -2px 0px 0px 0px; }

.archiv {
    color: #ca2026;
    --padding-bottom: 10px;
}

.nav-buttons {
    display: inline-block; /* Buttons nebeneinander */
    min-width: 120px; /* Feste Mindestbreite für Konsistenz */
    text-align: center; /* Zentriere den Inhalt */
    color: black; /* Textfarbe */
    background-color: transparent; /* Kein Hintergrund */
    border: none; /* Kein Rahmen */
    font-size: 16px; /* Schriftgröße */
    font-weight: bold;
    cursor: pointer; /* Zeiger bei Hover */
    transition: opacity 0.3s ease; /* Weicher Übergang */
    font: normal normal 600 14px / 17px "Lato" !important;
}

    .nav-buttons[style*="visibility: hidden"] {
        pointer-events: none; /* Klicks deaktivieren */
        opacity: 0; /* Unsichtbar, aber Platz bleibt erhalten */
    }

    .nav-buttons .arrow {
        margin-right: 1rem; /* Abstand zwischen dem Pfeil und dem Text */
    }

    .nav-buttons .arrowr {
        margin-left: 1rem; /* Abstand zwischen dem Pfeil und dem Text */
    }

    .nav-buttons .text {
        display: inline-block; /* Sicherstellen, dass der Text neben dem Pfeil bleibt */
    }


.navdiv {
    padding-left: 500px;
}

@media screen and (max-width: 991px) {
    .navdiv {
        padding-left: 0px;
        --margin-top: -10px;
    }
}

@media screen and (max-width: 991px) {
    .nav-buttons {
        font-size: 11px;
        padding: 0px 0px 0px 10px;
    }
    .nav-buttons mobile {
        display: none;
    }
}


.nav-buttons-tab {
    height: 40px;
    padding: 10px 20px;
    background-color: #e4e4e4;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Helvetica-Narrow", serif;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    .nav-buttons-tab:hover {
        background-color: #c13832;
        color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }


@media screen and (max-width: 991px) {
    .nav-buttons-tab {
        font-size: 12px;
    }
}


/* .artikel-detail a, */
.artikel p, .artikel table,
.artikel-detail p, .artikel-detail table {
    font-family: "Lora", serif;
    text-align: justify;
}

.artikel-detail a {
    --color: #f14c45;
    --border-bottom: 1px dotted #4a4a4a;
    border-bottom: 1px solid #4a4a4a !important;
    border-bottom-color: #FFC501 !important;
    --font-weight: 500;
}

a.invlink {
    border-bottom: none !important;
    --animation: blinkEffect 10s infinite;
}

@keyframes blinkEffect {
    0% {
        color: #000; /* Startfarbe */
    }

    20% {
        color: #cd9f01; /* Aufblenden zu einer anderen Farbe */
    }

    40% {
        color: #cd9f01; /* Zurück zur Startfarbe */
    }

    100% {
        color: #000; /* Endet wieder in der Startfarbe */
    }
}

img.img-fluid.float-start {
    margin-top: .4rem;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

img.img-fluid.float-end {
    margin-top: .4rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.artikel h1 a,
.artikel h2 a,
.artikel h3 a,
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 10px;
    margin-bottom: .5rem;
    font-weight: 700 !important;
    --font-size: 25px;
    line-height: 1.1;
    font: normal normal 600 20px / 23px "Lato" !important;
}

.artikel h3 {
    /*  text-transform: uppercase; */
}

.artikel h4 a,
.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.2;
    font: normal normal 600 24px/28px "Lato" !important;
}

.img, .artikel img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

p img, p svg,
h1 img, h1 svg,
h2 img, h2 svg,
h3 img, h3 svg {
    vertical-align: baseline;
}

.caption {
    font-size: 80%
}

.artikel-detail h1 {
    margin-bottom: 1.5rem;
    --font-size: 32px !important;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 991px) {
    .artikel-detail h1 {
        font-size: 22px !important;
        hyphens: auto;
        text-align: left;
    }
}

/* Artikel-Detail Tabellen */
.artikel-detail table:first-of-type {
    font-size: 16px !important;
    width: 100%;
    margin-bottom: 1rem;
    color: #333;
    vertical-align: top;
    border: 0px solid #ccc;
}

.artikel-detail th:first-of-type {
    padding: 5px 10px;
    font-weight: 400 !important;
    border-bottom: 0px solid #ccc;
}

.artikel-detail thead:first-of-type {
    background: #fff;
    color: #ccc;
    border-bottom: 0px solid #ccc;
    padding: 5px 10px;
}

.artikel-detail thead th:first-of-type {
    font-weight: 600 !important;
    border-bottom: 0px solid #ccc;
    padding: 5px 10px;
}

.artikel-detail tbody td:first-of-type, .artikel-detail tfoot td:first-of-type {
    font-size: 14px !important;
    border-bottom: 0px solid #ccc;
    padding: 5px 10px;
}

table.grau {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333;
    vertical-align: top;
    border: 1px solid #e9e9ec;
    background-color: #F0F1F0 !important;
}

    table.grau th {
        padding: 5px 10px;
        border-bottom: 1px solid #e9e9ec;
    }

    table.grau thead {
        background: #fff;
        color: #e9e9ec;
        border-bottom: 1px solid #e9e9ec;
        padding: 5px 10px;
    }

        table.grau thead th {
            font-size: 16px;
            font-weight: 600 !important;
            border-bottom: 1px solid #e9e9ec;
            padding: 5px 10px;
        }

    table.grau tbody td, table.grau tfoot td {
        border-bottom: 1px solid #e9e9ec;
        padding: 5px 10px;
        font-size: 16px !important;
        font-weight: 400 !important;
    }
    table.grau tfoot {
        background-color: #e9e9ec;
    }

span.fett {
    font-weight: bold;
}

p.klein {
    font-size: 0.9em;
    line-height: 1.3em;
    hyphens: auto;
}

.korr {
    color: #0000FF;
}

.artikel-detail img {
    max-width: 100%;
    height: auto;
}

.artikel-detail img, .artikel-detail svg {
    vertical-align: baseline;
}

td.re {
    text-align: right;
    vertical-align: top;
    padding-right: 0.5em;
}

td.li {
    text-align: left;
    vertical-align: top;
    padding-right: 0.5em;
    --word-break: break-all;
    overflow: hidden;
}

div.kasten {
    border: thin solid;
    padding: 0.7em 0.7em 0em 0.7em;
    margin-top: 1.3em;
    margin-bottom: 1em;
}

div.kastenrosa {
    padding: 0.7em 0.7em 0.1em 0.7em;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: #FFD2D2;
}

div.kastengrau {
    padding: 0.7em 0.7em 0.1em 0.7em;
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: #F0F0F0;
}

div.zitat {
    border: 12px solid;
    padding: 0px 1em 0em 1em;
    border-top: none;
    border-bottom: none;
    border-color: #ccc;
}

b.at { /* arznei-telegramm-Schriftzug formatieren */
    color: #C13832;
    font-weight: bold;
    font-family: Helvetica,Arial,sans-serif;
}

b.tele { /* arznei-telegramm-Schriftzug formatieren */
    color: #000000;
    font-weight: bold;
    font-family: Helvetica,Arial,sans-serif;
}

.r { /* ® formatieren */
    font-size: 0.6em;
    font-family: Arial, Helvetica, sans-serif;
    --vertical-align: super;
    font-weight: bold;
}

.eat { /* "e" für e a-t-Zitat formatieren */
    color: #C13832;
    font-style: italic;
}

ol {
    text-align: justify;
}

    ol.ebene1 {
        font-size: 1.1em;
    }

    ol.ebene2 {
        font-size: 1em;
    }

p.oabs {
    margin-bottom: 0em;
}

ul {
    --text-align: justify;
}

    ul.ebene1 {
        font-size: 1.1em;
        margin-top: 0em;
    }

    ul.ebene2 {
        padding-left: 2em;
    }

ol {
    font-family: "Times New Roman", Times, serif;
    text-align: justify;
}

    ol.ebene1 {
        font-size: 1.1em;
    }

    ol.ebene2 {
        font-size: 1em;
    }

.header-wrapper {
    visibility:hidden;
    height: 0px;
}

@media screen and (max-width: 991px) {
    .header-wrapper {
        visibility:visible;
        position: sticky;
        top: 0;
        transform: none;
        will-change: height;
        z-index: 888;
        background-color: #e4e4e4;
        height: auto;
    }
}

    .header {
        display: flex;
        justify-content: center;
        max-width: 100%;
        padding: 0;
        position: relative;
        width: 100%;
    }

@media screen and (max-width: 991px) {
    .header {
        background-color: white !important;
    }
}


    .header__content {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        width: 100%;
    }

    .header__logo-wrapper {
        margin: 0;
        max-width: 15rem;
        opacity: 1;
        width: 100%;
        padding-top: 9px;
    }

    .main-navigation {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        margin: 0;
        width: 100%;
    }

    .main-navigation__item {
        align-self: center;
        cursor: pointer;
        height: 100%;
        list-style: none;
        margin: 0;
        opacity: 1;
        padding: 0;
        color: #4a4a4a;
    }

    .main-navigation__link {
        cursor: pointer;
        height: 100%;
        justify-content: center;
    }

    .main-navigation__link--top-nav {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
        text-decoration: none;
    }

.main-navigation__link-text {
    font-weight: bold;
    white-space: nowrap;
    display: block;
    float: left;
    line-height: 40px;
    color: #000;
    padding: 0px 2px 0px 2px;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    --text-transform: uppercase;
    position: relative;
    font-family: "Helvetica-Narrow", serif;
    letter-spacing: 2px;
    font-size: 18px;
    text-decoration: none; /* Standard-Unterstreichung deaktivieren */
}

    /* Unterstreichung immer sichtbar */
    .main-navigation__link-text::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 9px; /* Erhöhe diesen Wert für mehr Abstand */
        width: 100%;
        height: 2px; /* Dicke der Unterstreichung */
        background-color: currentColor; /* Gleiche Farbe wie der Text */
    }



    .user-status__item {
        display: flex;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .user-status__item--login {
        width: -moz-max-content;
        width: max-content;
    }

    .header__button {
        background: 0;
        border: 0;
        bottom: 0;
        cursor: pointer;
        height: 1.5rem;
        margin: 0;
        opacity: 1;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1.5rem;
    }

.mobile-search {
    display: none;
    border: 0px;
}
@media screen and (max-width: 991px) {
    .mobile-search {
        border-bottom: 1px solid #4a4a4a !important;
        transition: all ease 0.5s;
        width: 100%;
        padding: 0px 10px;
        margin: 0px auto 10px auto;
        display: block;
        height: 40px;
        position: relative;
        z-index: 99999;
        opacity: 1;
        visibility: visible;
    }
        .mobile-search input {
            width: 100%;
            padding: 0px 0px;
            text-align: center;
            line-height: 35px;
            border: none;
            outline: none;
            text-align: left;
            text-transform: uppercase;
            font-family: "Lora", serif;
            letter-spacing: 2px;
            font-size: 14px;
            background-color: transparent;
            color: #fff;
        }
}

/* ganz ans Ende von main.css anhängen */
.mobile-search-box {
    display: none; /* Default: aus */
}

@media (max-width: 991px) { /* gleiche Grenze wie übrige Mobile-Styles */
    .mobile-search-box {
        display: block;
    }
}


.autocomplete_completionListElement {
    visibility: hidden;
    margin: 0px !important;
    padding-left: 0px !important;
    background-color: #ffffff;
    color: #fff;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    border-color: #4a4a4a;
    --overflow: auto;
    height: auto;
    text-align: left;
    list-style-type: none;
    font-family: "Lora", serif;
    font-weight: 500;
    z-index: 99999 !important;
}

.autocomplete_highlightedListItem {
    background-color: #15C3A6;
    color: white;
    padding: 1px;
}

.autocomplete_listItem {
    background-color: #fff;
    color: #4a4a4a;
    padding: 1px;
    font-family: "Lora", serif;
}

.user_desktop {
    color: #000;
    display: block;
    text-align: right;
    max-width: 1100px;
    padding: 0px 10px;
    margin: 0px auto 0px auto;
    font-family: "Helvetica-Narrow", serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all ease 0.5s;
    padding: 0px 20px;
}

@media screen and (max-width: 991px) {
    .user_desktop {
        display: none;
    }
}

.div_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 20px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.div_header_inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.div_header_left, .div_header_right {
    flex: 1;
    display: flex;
    align-items: center;
}

.logo-show {
    flex: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.div_header_center {
    position: absolute;
    left: 80%;
    transform: translateX(-57%) translateY(13%); /* Leicht nach oben verschoben */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.button-center {
    display: inline-block;
    background-color: #FFC501; /* Gelber Hintergrund */
    color: #140606; /* Schwarzer Text */
    font-size: 17px; /* Textgröße */
    font-weight: 600; /* Dickere Schrift */
    padding: 11px 25px; /* Polsterung */
    border: none;
    border-radius: 50px; /* Abgerundeter Button */
    text-decoration: none; /* Kein Unterstreichen */
    text-align: center;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .button-center:hover {
        background-color: #FAD453;
        color: #000;
    }

@media (max-width: 991px) {
    .button-center {
        display: none;
    }
}

.div_header_right {
    position: relative; /* Falls du eine spezifische Position brauchst */
    top: 18px; /* Falls erforderlich */
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end; /* Sorgt dafür, dass der Inhalt nach rechts rückt */
}



@media (max-width: 991px) {
    .div_header {
        flex-direction: column;
        align-items: center;
        display: none;
    }
    .div_header_inner {
        flex-direction: column;
    }
    .logo-show {
        position: relative;
        left: auto;
        transform: none;
        margin: 10px 0;
    }
    .div_header_left,
    .div_header_right {
        justify-content: center;
        flex-direction: column;
        display: none;
    }
}


.loginfield {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    background-color: #fff;
    margin: 20px 0px 20px 0px;
    display: block;
    color: #222;
    border: 1px solid #999;
    outline: none;
}

/*Toolbar*/
.articleTools {
    margin: 10px;
    padding: 10px;
}

    .articleTools a {
        margin-right: 15px;
        color: #0058B3;
        font-style: italic;
        float: right;
        text-decoration: underline;
    }

.socialBarMainContainer {
    text-align: center;
    height: 100%;
    font-size: 16px;
    padding-top: 5px;
}

.socialBarCenter {
    margin-top: 15px;
}

.mainWrap {
    margin: auto;
    width: 597px;
    padding: 50px;
    background-image: linear-gradient(bottom, #F5F9FF 19%, #C9D3E0 51%);
    background-color: #F5F9FF;
    border-radius: 5px;
    box-shadow: 0 3px 29px rgba(0, 0, 0, 0.99);
}

._Telerik_IE9 .mainWrap {
    filter: none;
}

.qsfDark .mainWrap, .qsfOfficeDark .mainWrap {
    color: #000;
}

.mainWrap p {
    padding: 10px 0 0 0;
}

.mainWrap h1, .mainWrap h2 {
    color: #1E90FF;
    text-align: center;
    font-weight: normal;
    font-size: 24px;
    padding: 5px;
    margin: 0;
}

.mainWrap h2 {
    font-size: 14px;
    font-style: italic;
}

#commentsContainer {
    margin-top: 30px;
}

.commentWrapper {
    border: 1px dotted #666;
    padding: 10px;
    background-color: #eee;
    margin-bottom: 20px;
}

    .commentWrapper:hover, .commentWrapper.oddRow:hover {
        background-color: #f5efc9;
    }

    .commentWrapper.oddRow {
        background-color: #ccc;
    }

    .commentWrapper img {
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 10px;
    }

.fromContent {
    font-size: 14px;
}

    .fromContent strong {
        padding-right: 10px;
    }

.commentContent {
    padding-top: 10px;
}

.closeButton {
    position: absolute;
    right: 10px;
    top: 10px;
    background: url(../../images/close.png) no-repeat;
    width: 32px;
    height: 32px;
    display: block;
}

.commentForm {
    padding: 10px;
}

#commentField {
    width: 100%;
}

.RadForm.rfdTextbox .commentForm input[type="text"], .RadForm.rfdTextbox .commentForm input[type="password"] {
    vertical-align: middle;
}

* + html #ShareBarNotification {
    z-index: 31000;
}

.higherZindex {
    z-index: 99999 !important;
}

/*Ende Toolbar*/

.searchinput {
    width: 100%;
    height: 40px;
    display: block;
    outline: none;
    padding: 0px 10px;
    border: 1px solid #111;
    font-family: "Helvetica-Narrow", serif;
    --text-transform: uppercase;
}

.newletterinput {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    background-color: #fff;
    margin: 20px 0px 20px 0px;
    display: block;
    color: #222;
    border: 1px solid #999;
    outline: none;
}

/* Tooltips*/
a.at-tooltip {
    color: #000 !important;
    border-bottom: 1px dotted #000;
    text-decoration: none;
}

.at-tooltip {
    border-radius: 0% !important;
}

.tooltip-inner {
    text-align: left;
    background-color: #000;
    box-shadow: 0px 0px 4px black;
    opacity: 1 !important;
    min-width: 300px;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #000 !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #000 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #000 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #000 !important;
}

.h2_archiv {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 350;
    font-size: 20px;
    line-height: 1.2;
    font-family: "Helvetica-Narrow", serif !important;
}

.text-white {
    color: white !important;
    font-weight: normal !important;
}

.policy-banner {
    padding: 20px 10px 20px 10px;
    text-align: center;
    height: auto;
    color: #000;
    background-color: #e4e4e4;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index:999999999999999999999999999;
}

.input-kurz {
    width: 900px; /* Breite angepasst */
    padding: 15px; /* Großzügiger Innenabstand */
    font-size: 16px; /* Einheitliche Schriftgröße */
    border: 2px solid #15C3A6; /* Rahmenfarbe */
    border-radius: 4px; /* Abgerundete Ecken */
    outline: none; /* Kein Fokusrahmen */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Weicher Übergang */
}

    .input-kurz:focus {
        border-color: #15C3A6; /* Rahmenfarbe beim Fokus */
        box-shadow: 0 0 5px rgba(21, 195, 166, 0.5); /* Leichter Schatteneffekt */
    }

.dd-titel {
    color: #000; /* Textfarbe */
    --margin-bottom: 20px; /* Abstand */
    --box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Schattenwurf */
    margin-top: 8px;
    padding: 10px; /* Innenabstand */
    background-color: #fff; /* Hintergrundfarbe */
    border-radius: 4px !important; /* Abgerundete Ecken */
    border: 1px solid #ddd; /* Rahmen */
    display: inline-block; /* Verhindert, dass die Box die volle Breite einnimmt */
    min-width: max-content; /* Breite basierend auf dem längsten Inhalt */
    max-width: 100%; /* Optional: Verhindert Überschreiten des Containers */
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-decoration: none;
}

    .dd-titel select {
        width: 100%; /* Die Dropdown-Liste passt sich der Elternbreite an */
        overflow: hidden; /* Keine überstehenden Inhalte */
        text-overflow: ellipsis; /* Fügt „...“ hinzu, wenn der Text abgeschnitten wird */
        white-space: nowrap; /* Verhindert Zeilenumbrüche */
    }


.sidebar-box {
    max-height: 250px;
    position: relative;
    overflow: hidden;
}

    .sidebar-box .read-more {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 30px 0;
        background-image: linear-gradient(to bottom, transparent, white);
    }

td {
    padding: 3px;
} 
.highlight {
    --border: 1px solid red !important;
    font-weight: bold !important;
}  

.error {
    position: relative;
    background: #d5bb73;
    border: 4px solid #d5bb73;
    margin: 11px;
}

    .error:after, .error:before {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .error:after {
        border-color: rgba(213, 66, 30, 0);
        border-right-color: #d5bb73;
        border-width: 12px;
        margin-top: -14px;
    }

@media print {
    body, html {
        margin: 0;
        padding: 0;
        font-size: 16px !important;
    }

    h1, h2, h3 {
        font-size: 20px !important;
    }

    p, li, td {
        font-size: 14px !important;
    }

    main, .container, .wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    a[href]:after {
        content: none !important;
    }

    h1 {
        font-size: 20px;
    }

    p {
        font-size: 16px;
    }

    .grau {
        font-size: 12px !important;
    }

    .klein {
        font-size: 14px !important;
    }

    .lieig strong {
        font-size: 12px !important;
    }

    .lieig a {
        font-size: 12px !important;
    }

    .artikel-detail table:first-of-type,
    .artikel-detail tfoot td:first-of-type {
        font-size: 12px !important;
    }

    table.grau tbody td,
    table.grau tfoot td {
        font-size: 12px !important;
    }

    at span {
        font-size: 12px !important;
    }

    nav,
    gotop,
    rechts,
    .colright,
    printbuttons,
    unten,
    fuss,
    .nav-buttons,
    .big-sticky-post,
    .div_header_left,
    tools,
    pager,
    .bottom,
    .print-buttons,
    .atd-mobile-link,
    .search-container,
    .button-separator,
    .mobile-bar,
    .utility-area {
        display: none !important;
    }

    .logo-show {
        text-align: left;
    }

        .logo-show img {
            width: 60%;
            height: 60%;
            text-align: left;
        }

        .logo-show a {
            text-align: left;
        }

    .col-caption {
        text-align: left;
        color: black;
        margin-right: 10px;
    }

    .text-white {
        text-align: left !important;
        color: black !important;
        margin-left: -10px !important;
    }

    .artikel-detail {
        text-align: left !important;
    }

    .detail-title {
        text-align: left !important;
    }

    footer {
        display: none !important;
    }
    .sondervariante_box {
        display: none !important;
    }
    .fab-container {
        display: none !important;
    }
    .site-header-wrap {
        display: none !important;
    }
    .search-container {
        display: none !important;
    }
}

@page {
    size: auto;
    margin: 2cm;
}

@media print {
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        --overflow: hidden !important;
        font-size: 16px !important;
    }

    h1, h2, h3 {
        font-size: 20px !important;
    }

    p, li, td {
        font-size: 14px !important;
    }

    .cols {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .colleft, .artikel-detail {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .logo-normal {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        height: 55px !important;
        width: auto !important;
    }

    .site-header {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .logo-link {
        display: block !important;
        margin: 0 !important;
        text-align: left !important;
    }
}

@page {
    size: auto;
    margin: 1cm; 
}


#PrintDiv {
    position: relative; 
    z-index: 200; 
}

printbuttons {
    position: relative;
    z-index: 200;
}

/* Rating */
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url(../images/FilledStar.png);
}

.emptyRatingStar {
    background-image: url(../images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(../images/SavedStar.png);
}

infobox {
    display: block;
    --padding-lefT: 30px;
}

alternativbox {
    display: block;
}

inside {
   display: none;
}

@media screen and (max-width: 767px) {
    infobox {
        display: block;
        padding-lefT: 0px;
    }
}

.abstand {
    padding-left: 30px;
}

@media screen and (max-width: 767px) {
    .abstand {
        padding-left: 0px;
    }
}

/* Modal Popup CSS*/
.mpBg {
    background-color: #3753fc;
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.mp {
    background-color: white;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
}

.mpHd {
    background-color: #616cae;
    border-color: White;
    border-width: 1px;
    color: White;
    font-weight: bold;
    width: 100%;
    height: 25px;
}

.mpClose {
    text-align: center;
    width: 100%;
}

.mpCloseButton {
    position: absolute;
    right: 4px;
    width: 17px;
    height: 18px;
}

.fontarchiv {
    font-weight: bold;
}

@media screen and (max-width: 991px) {
    zitat {
        display: block;
    }

    .quote-placeholder {
        border-left: none !important;
    }
}

.galerie {
    margin-left: auto;
    margin-right: auto;
}

select {
    border-radius: 0px !important;
}

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.image-container:hover .image {
    mix-blend-mode: multiply;
    filter: brightness(0.8);
}

/* Mobile Optionen */
/* Stylings für den rechten Container */
.rightContainer {
    padding: 5px;
    display: block; /* Standardmäßig sichtbar im Desktop-Layout */
}

/* Stylings für den Toggle-Button */
.toggle-button {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 24px;
    text-align: center;
    line-height: 50px; /* Vertikal zentriert das Pluszeichen */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
    z-index: 1000;
}

    .toggle-button:hover {
        background-color: darkred;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

/* Media Query für Bildschirmbreiten bis maximal 768px (typischerweise mobile Geräte) */
@media (max-width: 768px) {
    .rightContainer {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background-color: white;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        visibility: hidden; /* Unsichtbar */
        opacity: 0; /* Unsichtbar */
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Übergang für den Fade-In-Effekt */
        z-index: 9999999;
    }

        .rightContainer.open {
            visibility: visible; /* Sichtbar */
            opacity: 1; /* Sichtbar mit Fade-In */
            display: block; /* Sichtbar */
        }

    .toggle-button {
        display: block;
    }
}

/* Artikelcss.css alte Klassen */

article p.klein { /* Leserbriefe im Artikel formatieren */
    font-size: 0.9em; /* artikelcss.css */
}

article a.hel {
    font-size: 0.8em; /* artikelcss.css */
    line-height: 1.2em; /* artikelcss.css */
    font-family: Helvetica, Arial, sans-serif; /* artikelcss.css */
}

article p.hel {
    font-size: 1.1em; /* artikelcss.css */
    line-height: 1.2em; /* artikelcss.css */
    font-family: Helvetica, Arial, sans-serif; /* artikelcss.css */
}

article p.urh { /* Urheberrechtshinweis unten im Artikel formatieren */
    font-size: 0.75em; /* artikelcss.css */
    line-height: 1.2em; /* artikelcss.css */
    font-family: Helvetica, Arial, sans-serif; /* artikelcss.css */
}

article span.fett {
    font-size: 0.95em; /* artikelcss.css */
    font-weight: bold; /* artikelcss.css */
    font-family: Arial, Helvetica, sans-serif; /* artikelcss.css */
}

article span.faz {
    margin-right: 0.5em; /* artikelcss.css */
    font-size: 1.4em; /* artikelcss.css */
}

article span.dr {
    margin-right: 0px; /* artikelcss.css */
}

article .nobr {
    white-space: nowrap; /* artikelcss.css */
}

article table {
    margin-bottom: 1.2em; /* artikelcss.css */
}

    article table.grau {
        background-color: #F0F0F0; /* artikelcss.css */
        margin-bottom: 0.5em; /* artikelcss.css */
        padding: 0.2em; /* artikelcss.css */
    }

    article table.rosa {
        background-color: #FFD2D2; /* artikelcss.css */
        margin-bottom: 0.5em; /* artikelcss.css */
        padding: 0.2em; /* artikelcss.css */
    }

article td.re {
    text-align: right; /* artikelcss.css */
    vertical-align: top; /* artikelcss.css */
    padding-right: 0.5em; /* artikelcss.css */
    font-size: 14px;
}

article .li {
    text-align: left; /* artikelcss.css */
    vertical-align: top; /* artikelcss.css */
    padding-right: 0.5em; /* artikelcss.css */
    font-size: 14px;
}

article td.lieig {
    text-align: left; /* artikelcss.css */
    vertical-align: top; /* artikelcss.css */
    padding-right: 0.4em; /* artikelcss.css */
    width: 25%; /* artikelcss.css */
    padding-right: 0.5em; /* artikelcss.css */
}

article td.block {
    text-align: left; /* artikelcss.css */
    vertical-align: top; /* artikelcss.css */
    text-align: justify; /* artikelcss.css */
}

article td.normblock {
    text-align: justify; /* artikelcss.css */
}

article td.normre {
    text-align: right; /* artikelcss.css */
    padding-right: 1em; /* artikelcss.css */
}

article td.normli {
    text-align: left; /* artikelcss.css */
    padding-right: 1em; /* artikelcss.css */
}

article table.verz td {
    padding-bottom: 10px; /* artikelcss.css */
    padding-left: 0px; /* artikelcss.css */
}

article div.kasten {
    border: thin solid; /* artikelcss.css */
    padding: 0.7em 0.7em 0em 0.7em; /* artikelcss.css */
    margin-top: 1.3em; /* artikelcss.css */
    margin-bottom: 1em; /* artikelcss.css */
}

article div.kastenrosa {
    padding: 0.1em 0.7em 0.6em 0.7em; /* artikelcss.css */
    margin-top: 1em; /* artikelcss.css */
    margin-bottom: 1em; /* artikelcss.css */
    background-color: #FFD2D2; /* artikelcss.css */
}

article div.kastengrau {
    padding: 0.7em 0.7em 0.1em 0.7em; /* artikelcss.css */
    margin-top: 1em; /* artikelcss.css */
    margin-bottom: 1em; /* artikelcss.css */
    background-color: #F0F0F0; /* artikelcss.css */
}

article div.zitat {
    border: 12px solid; /* artikelcss.css */
    padding: 0px 1em 0em 1em; /* artikelcss.css */
    border-top: none; /* artikelcss.css */
    border-bottom: none; /* artikelcss.css */
    border-color: #ccc; /* artikelcss.css */
}

article h2.kasten {
    margin-top: 0em; /* artikelcss.css */
}

article .korr {
    color: #0000FF; /* artikelcss.css */
}

article h1 b.at { /* arznei-telegramm-Schriftzug formatieren */
    color: #C13832; /* artikelcss.css */
    font-family: Helvetica,Arial,sans-serif; /* artikelcss.css */
}

article h1 b.tele { /* arznei-telegramm-Schriftzug formatieren */
    color: #000000; /* artikelcss.css */
    font-family: Helvetica,Arial,sans-serif; /* artikelcss.css */
}

article b.at { /* arznei-telegramm-Schriftzug formatieren */
    color: #C13832; /* artikelcss.css */
    font-weight: bold; /* artikelcss.css */
    font-family: Helvetica,Arial,sans-serif; /* artikelcss.css */
    font-size: 0.9em; /* artikelcss.css */
}

article b.tele { /* arznei-telegramm-Schriftzug formatieren */
    color: #000000; /* artikelcss.css */
    font-weight: bold; /* artikelcss.css */
    font-family: Helvetica,Arial,sans-serif; /* artikelcss.css */
    font-size: 0.9em; /* artikelcss.css */
}

article .r { /* ® formatieren */
    font-size: 0.6em; /* artikelcss.css */
    font-family: Arial, Helvetica, sans-serif; /* artikelcss.css */
    vertical-align: super; /* artikelcss.css */
    font-weight: bold; /* artikelcss.css */
}

article .eat { /* "e" für e a-t-Zitat formatieren */
    color: #C13832; /* artikelcss.css */
    font-style: italic; /* artikelcss.css */
}

article ol {
    text-align: justify; /* artikelcss.css */
}

    article ol.ebene1 {
        font-size: 1.1em; /* artikelcss.css */
    }

    article ol.ebene2 {
        font-size: 1em; /* artikelcss.css */
    }

article p.oabs {
    margin-bottom: 0em; /* artikelcss.css */
}

article ul {
    text-align: justify; /* artikelcss.css */
}

    article ul.ebene1 {
        font-size: 1.1em; /* artikelcss.css */
        margin-top: 0em; /* artikelcss.css */
    }

    article ul.ebene2 {
        padding-left: 2em; /* artikelcss.css */
    }

article .img, article img { /* Bild im Artikel formatieren */
    max-width: 100%; /* artikelcss.css */
    height: auto; /* artikelcss.css */
    width: auto !important;
}

    article img.li {
        float: left; /* artikelcss.css */
        padding: 10px 10px 10px 0px; /* artikelcss.css */
    }

    article img.re {
        float: right; /* artikelcss.css */
        padding: 10px 0px 10px 10px; /* artikelcss.css */
    }

article .li18 {
    float: left; /* artikelcss.css */
    padding: 10px 10px 10px 0px; /* artikelcss.css */
    width: 18%; /* artikelcss.css */
}

article .re18 {
    float: right; /* artikelcss.css */
    padding: 10px 0px 10px 10px; /* artikelcss.css */
    width: 18%; /* artikelcss.css */
}

article .li25 {
    float: left; /* artikelcss.css */
    padding: 10px 10px 10px 0px; /* artikelcss.css */
    width: 25%; /* artikelcss.css */
}

article .re25 {
    float: right; /* artikelcss.css */
    padding: 10px 0px 10px 10px; /* artikelcss.css */
    width: 25%; /* artikelcss.css */
}

article .li33 {
    float: left; /* artikelcss.css */
    padding: 10px 10px 10px 0px; /* artikelcss.css */
    width: 33%; /* artikelcss.css */
}

article .re33 {
    float: right; /* artikelcss.css */
    padding: 10px 0px 10px 10px; /* artikelcss.css */
    width: 33%; /* artikelcss.css */
}

article .re50 {
    float: right; /* artikelcss.css */
    padding: 10px 0px 10px 10px; /* artikelcss.css */
    width: 50%; /* artikelcss.css */
}

article .re50m {
    float: right; /* artikelcss.css */
    padding: 10px 0px 10px 10px; /* artikelcss.css */
    --width: 50%; /* artikelcss.css */
}

@media screen and (min-width: 421px) {
    article .li50 {
        float: left; /* artikelcss.css */
        padding: 10px 10px 10px 0px; /* artikelcss.css */
        width: 50%; /* artikelcss.css */
    }

    article .li50m {
        float: left; /* artikelcss.css */
        padding: 10px 10px 10px 0px; /* artikelcss.css */
        --width: 50%; /* artikelcss.css */
    }
}

@media screen and (max-width: 420px) {
    article .li50 {
        width: 100%; /* artikelcss.css */
    }
}

article img.imgat {
    height: 0.73em; /* artikelcss.css */
}

article img, article svg {
    --vertical-align: baseline; /* artikelcss.css */
}

.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.language-selector {
    font-size: 14px;
    font-weight: bold;
    color: #368c2d;
    background-color: #fff;
    border: 2px solid #368c2d;
    border-radius: 5px;
    padding: 2px 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

    .language-selector i {
        margin-right: 5px;
    }

    .language-selector:hover {
        background-color: #368c2d;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.link-container {
    position: relative;
    display: inline-block;
}

.hover-link {
    position: relative;
    cursor: pointer;
    text-decoration: none; /* Unterstreichung deaktivieren */
    border-bottom: 2px dotted #FFC501; /* stabile gepunktete Linie */
    padding-bottom: 1px; /* optionaler Abstand */
}

.hover-content {
    display: none;
    position: absolute;
    width: 200px;
    padding: 10px;
    background-color: #fff; /* Weißer Hintergrund */
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
    border-radius: 0 10px 10px 0; /* Abrundungen: nur oben rechts, unten links und unten rechts */
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    bottom: 110%;
    overflow: hidden; /* Keine Scrollbalken */
}

.link-container:hover .hover-content {
    display: block;
}

.custom-hover-content {
    display: none;
    position: absolute;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    max-width: 300px;
    word-wrap: break-word;
    visibility: hidden;
}

.link-container:hover .custom-hover-content {
    display: block;
    visibility: visible;
}

@media (max-width: 767px) {
    .custom-hover-content {
        position: fixed;
        left: 5%;
        right: 5%;
        width: 90%; 
        max-width: none; 
        top: 100%;
        border-radius: 10px;
        text-align: center;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        overflow-wrap: break-word;
    }

    .link-container:hover .custom-hover-content {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}

.business-style {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    max-width: 800px;
    margin: auto;
}

.business-caption p {
    font-size: 28px;
    color: #2c3e50;
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 10px;
    text-align: center;
}

.business-meta .post-meta {
    font-size: 16px;
    color: #7f8c8d;
    margin-top: 20px;
    text-align: center;
}

.download-section {
    text-align: center;
    margin-top: 20px;
}

.form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.form-label {
    font-size: 16px;
    width: 80px; /* Festgelegte Breite für alle Labels */
    text-align: right;
    margin-right: 10px;
}

.business-dropdown {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    width: 250px;
    box-sizing: border-box;
}

.business-btn {
    display: inline-block;
    line-height: 35px;
    background-color: #eeeeee;
    color: #333 !important;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 250px;
}

    .business-btn:hover {
        background-color: #c13832;
        color: #fff !important;
    }

    .business-btn:active, .business-btn:focus {
        background-color: #dddddd;
        color: #333 !important;
        outline: none;
    }


#survey-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 216px; /* 10% kleiner als vorher (240px -> 216px) */
    padding: 20px;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    display: none;
    animation: slide-up 0.5s forwards;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionaler Schatten für einen dezenteren Look */
    border-radius: 8px; /* Optional, um die Ecken abzurunden */
}

    #survey-popup a {
        color: #007bff; /* Passe die Linkfarbe an */
        text-decoration: underline;
    }

    #survey-popup button {
        background-color: #c13832;
        color: #fff;
        border: none;
        padding: 10px 15px;
        margin-top: 10px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

        #survey-popup button:hover {
            background-color: #000; /* Farbe beim Hovern */
        }

@keyframes slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Neues CSS für das Kontaktformular */
.contact-form-container {
    background-color: #fff;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 40px auto;
}

.contact-form-field {
    margin-bottom: 20px;
}

    .contact-form-field label {
        display: block;
        font-weight: bold;
        margin-bottom: 8px;
        color: #4a4a4a;
    }

    .contact-form-field input,
    .contact-form-field textarea,
    .contact-form-field select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-family: "Helvetica-Narrow", sans-serif;
        font-size: 16px;
        color: #333;
    }

    .contact-form-field textarea {
        height: 120px;
    }

.contact-form-btn {
    display: inline-block;
    padding: 12px 20px;
    font-family: "Helvetica-Narrow", sans-serif;
    font-size: 16px;
    color: #fff !important;
    background-color: #111;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color 0.5s ease;
}

    .contact-form-btn:hover {
        background-color: #ca2026;
    }

/* Responsive Anpassungen */
@media (max-width: 767px) {
    .contact-form-container {
        padding: 20px;
        margin: 20px;
    }

    .contact-form-field input,
    .contact-form-field textarea,
    .contact-form-field select {
        font-size: 14px;
    }

    .contact-form-btn {
        font-size: 14px;
    }
}


/* Neues CSS für das Bestellformular */
.order-form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: auto;
}

.order-form-field {
    margin-bottom: 15px;
}

    .order-form-field input,
    .order-form-field textarea,
    .order-form-field select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-family: "Helvetica-Narrow", sans-serif;
    }

    .order-form-field textarea {
        height: 100px;
    }

.order-form-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: "Helvetica-Narrow", sans-serif;
    color: #fff !important;
    background-color: #111;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

    .order-form-btn:hover {
        background-color: #ca2026;
    }

.order-form-header {
    text-align: center;
    font-family: "Helvetica-Narrow", sans-serif;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Neues CSS für den AnonymousTemplate-Bereich */
.customer-login-container {
    text-align: center;
    margin: auto;
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.customer-heading {
    font-family: "Helvetica-Narrow", sans-serif;
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.customer-info-text {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.customer-login-prompt {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
}

.customer-field-item {
    margin-bottom: 20px;
    text-align: left;
}

.customer-form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: "Helvetica-Narrow", sans-serif;
    margin-bottom: 15px;
}

.customer-form-check {
    margin-bottom: 15px;
    text-align: left;
}

.customer-form-check-input {
    margin-right: 10px;
}

.customer-form-check-label {
    font-size: 14px;
    color: #333;
}

.customer-btn {
    display: inline-block;
    padding: 12px 25px;
    font-family: "Helvetica-Narrow", sans-serif;
    color: #fff !important;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: auto;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.customer-btn:hover {
    background-color: #0056b3;
}

.customer-text-right {
    text-align: right;
    padding-right: 0;
    margin-top: 20px;
}
.custom-login-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
}

.custom-login-form {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    width: 600px; /* Fixed width for the form */
}

.custom-login-info {
    margin: 0 10px;
    font-size: 16px;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent shrinking */
}

.custom-login-input {
    flex: 1;
    margin: 0 5px;
    padding: 5px;
    min-width: 150px; /* Ensure the input fields have a minimum width */
}

.custom-checkbox-container {
    display: flex;
    align-items: center;
    margin: 0 5px;
    flex-shrink: 0; /* Prevent shrinking */
}

.custom-login-checkbox {
    margin: 0;
}

.custom-login-label {
    margin-left: 5px;
    white-space: nowrap;
}

.custom-login-button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 250px; /* Fixed width for the button */
}

    .custom-login-button i {
        margin-right: 5px;
    }

    .custom-login-button:hover {
        background-color: #c13832;
    }

/* Dashboard-Buttons in der mobilen Ansicht zentrieren */
.dashboard-grid {
    display: flex;
    flex-wrap: wrap; /* Buttons umbrechen lassen, wenn der Platz nicht ausreicht */
    justify-content: center; /* Zentriert die Buttons horizontal */
    gap: 10px; /* Abstand zwischen den Buttons */
}

    .dashboard-grid a, .dashboard-grid .my-btn-grey {
        flex: 1 1 calc(50% - 20px); /* Buttons nehmen die Hälfte der Breite minus den Abstand ein */
        max-width: 100%; /* Maximalbreite auf 100% setzen */
        text-align: center; /* Text innerhalb der Buttons zentrieren */
    }

/* Mobile Ansicht: Buttons auf die gesamte Breite zentrieren */
@media screen and (max-width: 767px) {
    .dashboard-grid a, .dashboard-grid .my-btn-grey {
        flex: 1 1 100%; /* Buttons über die gesamte Breite */
    }
}

.custom-sitemap {
    margin-bottom: 20px;
}

.custom-navigation-back {
    text-align: left;
    margin-bottom: 20px;
}

.custom-detail-page {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-detail-title h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.custom-detail-meta .post-meta {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.custom-search-history {
    text-align: center;
    margin-bottom: 20px;
}

.custom-delete-history {
    text-align: right;
    margin-top: 20px;
}

.my-btn-grey-back {
    display: inline-block;
    line-height: 40px;
    padding: 0px 30px;
    font-family: "Helvetica-Narrow", serif;
    color: #000 !important;
    background-color: #e4e4e4;
    letter-spacing: 2px;
    margin: 0px 0px 0px 0px;
    text-transform: uppercase;
    border: none;
    transition: all ease 0.5s;
}

    .my-btn-grey-back:hover {
        background-color: #ca2026;
        outline: none;
        color: #fff !important;
    }

.permissions-section {
    padding-bottom: 30px;
    font-size: 1em;
    line-height: 1.5;
    color: #333;
    text-align: center; /* Center text */
}

.button-container {
    text-align: center; /* Center button */
    margin-top: 20px;
}

/* Neue CSS für die angepasste Box */
.subscribe-box-new {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    max-width: 400px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

    .subscribe-box-new:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

.subscribe-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.subscribe-description {
    font-size: 18px;
    color: #555;
    margin-bottom: 15px;
}

.subscribe-info {
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
}

.subscribe-button {
    display: inline-block;
    background-color: #ca2026;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

    .subscribe-button:hover {
        background-color: #a81b22;
        color: #ffdddd; /* Hellerer Schriftfarbe beim Hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Neue CSS für das Login-Fenster */
.about-me-new {
    text-align: center;
    margin-bottom: 20px;
}

.message-container {
    text-align: center;
    margin-bottom: 20px;
}

.login-container {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-inner {
    padding: 20px;
}

.login-image {
    max-width: 100px;
    margin-bottom: 20px;
}

.field-item-new {
    margin-bottom: 15px;
}

    .field-item-new input {
        width: calc(100% - 20px);
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

.login-options {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

    .login-options a {
        color: #ca2026;
        text-decoration: none;
    }

        .login-options a:hover {
            text-decoration: underline;
        }

.login-button-container {
    text-align: right;
    padding-right: 20px;
}

.login-btn {
    display: inline-block;
    background-color: #ca2026;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: none;
    cursor: pointer;
}

    .login-btn:hover {
        background-color: #a81b22;
        color: #ffdddd;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* Neue CSS für den professionellen Stil */
.author-start-new {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.author-start-inner-new {
    padding: 20px;
}

.plus-list-new {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

    .plus-list-new li {
        margin-bottom: 10px;
        font-size: 16px;
        color: #555;
    }

.account-info h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.account-info p {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.field-item-new {
    margin-bottom: 15px;
}

    .field-item-new input {
        width: calc(100% - 20px);
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

.login-options {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

.login-button-container {
    text-align: right;
    padding-right: 20px;
}

.login-btn {
    display: inline-block;
    background-color: #ca2026;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: none;
    cursor: pointer;
}

    .login-btn:hover {
        background-color: #a81b22;
        color: #ffdddd;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* Neue CSS für den Gallery-Slider */
.post-thumbnail-large-new {
    position: relative;
    max-width: 800px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    min-width: 100%;
    transition: transform 0.3s ease-in-out;
}

    .swiper-slide img {
        width: 100%;
        border-radius: 10px;
        transition: transform 0.3s ease-in-out;
    }

    .swiper-slide:hover img {
        transform: scale(1.05);
    }

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease-in-out;
}

.swiper-button-next {
    right: 10px;
}

.swiper-button-prev {
    left: 10px;
}

    .swiper-button-next:hover, .swiper-button-prev:hover {
        background: rgba(0, 0, 0, 0.8);
    }

.cookie-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 16px 0 24px;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-weight: 600;
    color: #4CAF50; /* grün wie der Haken */
}

    .cookie-switch .label-text {
        color: #666;
        font-size: 14px;
    }

.checkmark i {
    font-size: 20px;
    color: #4CAF50;
}

/* Aufzählung innerhalb des Cookie-Banners hübscher darstellen */
.cookie-content ul {
    list-style: none; /* Standard-Bullets entfernen */
    padding-left: 0; /* linken Einzug zurücksetzen */
    margin: 12px 0; /* etwas Luft darüber/darunter */
}

.cookie-content li {
    position: relative;
    padding-left: 32px; /* Platz für eigenes Icon */
    margin-bottom: 8px;
    font-family: 'Lato', sans-serif;
}

    /* Gelber Punkt (oder Häkchen) vor jedem List-Item */
    .cookie-content li::before {
        content: ''; /* leeren Inhalt erzeugen */
        position: absolute;
        left: 0;
        top: 4px; /* vertikal zentrieren */
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #FFC501; /* CI-Gelb */
        box-shadow: 0 0 0 2px #fff inset; /* weißer Rand für Kontrast */
    }

    /* Optional: Häkchen statt Punkt */
    .cookie-content li::after {
        content: '\f00c'; /* Font-Awesome-Häkchen (Unicode) */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 3px; /* etwas nach rechts, damit es mittig sitzt */
        top: 1px;
        font-size: 12px;
        color: #140606; /* dunkles CI-Schwarz */
        pointer-events: none;
    }

/* Alternative ohne Font Awesome – einfach den Punkt stehen lassen:
   -> die ::after-Regel oben auskommentieren oder entfernen */



.policy-banner {
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 24px;
    --border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    max-width: 820px;
    margin: 24px auto;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #140606;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}

.cookie-content p {
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.cookie-content .link {
    color: #c13832;
    text-decoration: underline;
}

.cookie-switch {
    margin: 12px 0 20px;
}

.cookie-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-weight: 600;
    color: #666;
    opacity: 0.6;
    cursor: not-allowed;
    user-select: none;
}

    .cookie-toggle .label-text {
        font-size: 14px;
    }

.toggle-switch {
    width: 42px;
    height: 22px;
    background-color: #ccc;
    border-radius: 11px;
    position: relative;
    flex-shrink: 0;
}

    .toggle-switch .circle {
        width: 18px;
        height: 18px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
    }

.cookie-buttons {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    background-color: #FFC501;
    color: #140606;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-style: italic;
    border: none;
    padding: 12px 24px;
    border-radius: 28px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

    .cookie-btn:hover {
        background-color: #FFA500;
    }

    .cookie-btn.reject {
        background-color: #e5e5e5;
        color: #333;
        font-style: normal;
    }

        .cookie-btn.reject:hover {
            background-color: #ccc;
        }

@media (max-width: 600px) {
    .cookie-buttons {
        justify-content: center;
    }

    .cookie-btn {
        width: 100%;
        max-width: 300px;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Hintergrundfarbe und Padding für den Header */
.header-wrapper {
    background-color: #f8f9fa; /* Heller Hintergrund */
    --padding: 10px 20px; /* Padding um den Header */
    --border-bottom: 1px solid #e0e0e0; /* Subtile untere Linie */
}

/* Logo-Styling */
.header__logo-wrapper img {
    max-width: 200px; /* Größe des Logos anpassen */
    height: auto;
    display: block;
    --margin: 0 auto; /* Logo zentrieren */
    margin-top: 9px;
}

/* Navigation Menü Styling */
.main-navigation {
    display: flex;
    justify-content: right; /* Navigationselemente zentrieren */
    align-items: center;
    margin-top: 10px;
}

.main-navigation__item {
    margin: 0 11px; /* Abstand zwischen Navigationselementen */
}

.main-navigation__link {
    font-size: 16px;
    color: #333; /* Dunklere Farbe für bessere Lesbarkeit */
    --text-transform: uppercase; /* Text großschreiben */
    font-weight: bold;
}

    .main-navigation__link:hover {
        color: #c13832; /* Rote Farbe beim Hover */
        text-decoration: underline; /* Unterstreichung beim Hover */
    }

/* Mobile Menü-Icon Styling */
.menu-icon-mobile {
    font-size: 24px; /* Icon-Größe erhöhen */
    color: #333;
    padding: 4px;
    background-color: #fff; /* Hintergrund für das Icon hinzufügen */
    --border-radius: 5px; /* Ecken abrunden */
    --box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtiler Schatten */
}

    .menu-icon-mobile:hover {
        background-color: #c13832; /* Hintergrundfarbe beim Hover ändern zu Rot */
        color: #fff; /* Icon-Farbe bleibt weiß beim Hover */
    }

/* Mobile Suchfeld Verbesserungen */
#pnl_mobile_search {
    --margin-top: 10px;
    padding-top: 10px;
    background-color: #15D0B1;
    --border-radius: 5px;
}

.mobile-search {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

    .mobile-search::placeholder {
        color: #aaa;
    }

/* Entfernen des Such-Buttons in der mobilen Ansicht */
#btn_suche_mobile {
    display: none;
}

/* Aufgeklapptes Menü im mobilen Bereich */
.menu-res {
    background-color: #f8f9fa; /* Heller Hintergrund für das Menü */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtiler Schatten für das Menü */
}

.menu-res-inner ul > li {
    border-bottom: 1px solid #c13832; /* Roter unterer Rand für die Listelemente */
}

    .menu-res-inner ul > li a {
        font-size: 14px;
        color: #c13832; /* Rote Textfarbe */
        text-transform: uppercase;
        font-weight: bold;
        padding: 10px 15px;
    }

        .menu-res-inner ul > li a:hover {
            background-color: #c13832; /* Hintergrundfarbe beim Hover ändern */
            color: #fff; /* Textfarbe beim Hover zu weiß ändern */
        }

    .menu-res-inner ul > li.menu-item-has-children:before {
        color: #c13832; /* Farbe für das Pfeil-Symbol */
    }

    .menu-res-inner ul > li.open-submenu-active:before {
        color: #a12c28; /* Dunkleres Rot für aktives Untermenü */
    }

    .menu-res-inner ul > li > ul li a {
        color: #c13832; /* Farbe für Untermenüelemente */
    }

        .menu-res-inner ul > li > ul li a:hover {
            background-color: #c13832; /* Hintergrundfarbe beim Hover ändern */
            color: #fff; /* Textfarbe beim Hover zu weiß ändern */
        }

/*BESTELLFORM*/
/* Hauptcontainer für die Abos */
.subscription-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Hover-Effekt für die Aboboxen */
.subscription-box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    width: 30%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .subscription-box:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        background: linear-gradient(135deg, #d13832 0%, #a82d28 100%);
        color: white;
    }

    .subscription-box h2,
    .subscription-box p,
    .subscription-box ul {
        transition: color 0.3s ease;
    }

    .subscription-box:hover h2,
    .subscription-box:hover p,
    .subscription-box:hover ul {
        color: white;
    }

.abo-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.subscription-box:hover .abo-image {
    transform: scale(1.05);
}

.custom-submit {
    background-color: #d13832;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .custom-submit:hover {
        background-color: #a82d28;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }


/* Mobile Ansicht */
@media screen and (max-width: 767px) {
    .subscription-box {
        width: 100%;
    }
}

.custom-dropdown {
    width: 250px;
    padding: 10px;
    font-size: 16px;
    margin: 10px 0;
}

/* Zentrieren der Dropdown-Container */
.dropdown-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.dropdown-item {
    margin: 0 10px;
}

/* Subscription-Boxen */
.subscription-box {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px auto;
    width: 80%;
    background-color: #f9f9f9;
}

/* Aktualisierte CSS-Klassen für schlanke und responsive Buttons */
.nav-button-custom {
    display: inline-block;
    padding: 8px 20px; /* Etwas großzügigere Polsterung für bessere Zugänglichkeit */
    margin: 5px; /* Gleichmäßiger Abstand */
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 400; /* Konsistentes Gewicht */
    font-size: 14px; /* Gut lesbare Schriftgröße */
    line-height: 20px;
    letter-spacing: 0;
    text-decoration: none;
    color: #383838; /* Dezente schwarze Textfarbe */
    background-color: transparent; /* Transparenter Hintergrund */
    border: 1px solid #383838; /* Schwarze Umrandung */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none; /* Minimalistischer Look */
    text-align: center;
    z-index:100;
    margin-bottom: 19px;
}

    /* Hover-Zustand */
    .nav-button-custom:hover {
        background-color: rgba(56, 56, 56, 0.1); /* Dezentes Highlight beim Hover */
        color: #140606;
        text-decoration: none;
        box-shadow: none; /* Kein Schatten, um das schlichte Design beizubehalten */
    }

    /* Aktiver Zustand */
    .nav-button-custom.active {
        background-color: #15C3A6; /* Grünes Highlight für aktiven Zustand */
        color: #140606; /* Weißer Text für Kontrast */
        border-color: #15C3A6;
    }

    /* Inaktiver Zustand */
    .nav-button-custom.inactive {
        background-color: transparent;
        color: #140606; /* Konsistente schwarze Textfarbe */
        border-color: #383838;
    }

.search-controls-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alle Elemente linksbündig */
    max-width: 600px;
    margin: 0; /* Kein Auto-Margin, um nicht zu zentrieren */
    --padding: 0 10px;
    box-sizing: border-box;
}

    .search-controls-container .dropdown-container {
        flex: 0 0 auto;
    }

    .search-controls-container .buttons-container {
        display: flex;
        --gap: 10px;
        --margin-left: 20px;
    }

.nav-button-custom {
    flex: 0 0 auto;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

/* Mobile Layout */
@media screen and (max-width: 767px) {
    .search-controls-container {
        flex-direction: column;
        align-items: stretch;
        padding: 0 10px;
    }

    .dropdown-container {
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .dd-titel {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    .buttons-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        box-sizing: border-box;
    }

    .nav-button-custom {
        flex: 1;
        text-align: center;
        padding: 10px;
        box-sizing: border-box;
    }
}


.search-results-container {
    background-color: transparent; /* Komplett transparenter Hintergrund */
    border: none; /* Keine Umrandung */
    padding: 0; /* Kein Innenabstand */
    border-radius: 0; /* Keine Rundung */
    box-shadow: none; /* Kein Schatten */
    margin-bottom: 0; /* Kein zusätzlicher Abstand nach unten */
}


/* Stil für jeden Eintrag in der Trefferliste */
.search-item {
    padding: 10px; /* Innenabstand für jeden Treffer */
    margin-bottom: 10px; /* Abstand zwischen den Treffern */
    background-color: #ffffff; /* Weißer Hintergrund für Lesbarkeit */
    border: 1px solid #eaeaea; /* Leichte Umrandung für jeden Treffer */
    border-radius: 4px; /* Dezente Rundung */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .search-item:hover {
        background-color: #f1f1f1; /* Dezente Hervorhebung beim Hover */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Leichter Schatten beim Hover */
    }

/* Stil für Überschriften und Kategorien */
.search-item-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #333333; /* Dunklere Schriftfarbe für bessere Lesbarkeit */
    margin-bottom: 5px;
}

/* Stil für den Kategorienamen in Rot */
.category-name {
    color: #c13832; /* Passendes Rot */
    font-weight: bold;
}

/* Stil für das Zitat und den Querstrich in Grau */
.category-quote {
    color: #777777; /* Dezentes Grau */
}


/* Dezente Darstellung der Suchbeschreibung */
.search-item-description {
    font-size: 0.85em; /* Leicht verkleinerte Schriftgröße */
    color: #999999; /* Helleres Grau für dezente Darstellung */
    line-height: 1.3; /* Reduzierte Zeilenhöhe für kompakteren Look */
    margin-top: 5px; /* Kleiner Abstand nach oben */
}

/* Stil für den Container der Seitenauswahl */
.page-size-container {
    display: inline-block;
    margin-left: 15px; /* Abstand zum Pager */
    font-size: 0.9em; /* Etwas kleinere Schrift */
    color: #333333;
}

.page-size-select {
    padding: 4px 6px; /* Dezente Polsterung */
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333333;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

    .page-size-select:hover {
        border-color: #999999; /* Leichte Umrandung beim Hover */
    }

.tag-cloud {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.zufallsthemen-container {
    position: relative; /* Erforderlich für das Positionieren des Hintergrunds */
    padding: 20px;
    background-color: #15C3A6;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Verhindert, dass das Hintergrundbild übersteht */
    margin-top: 10px;
}

.zufallsthemen-background {
    position: absolute;
    top: 0;
    right: 0; /* Im rechten Teil positionieren */
    width: 150px; /* Größe des SVG-Bildes */
    height: auto;
    opacity: 0.5; /* Leicht transparent für subtile Wirkung */
    pointer-events: none; /* Verhindert, dass das Bild anklickbar ist */
    z-index: 0; /* Hintergrundebene */
}

.zufallsthemen-content {
    position: relative; /* Inhalte vor dem Hintergrund platzieren */
    z-index: 1;
    display: flex; /* Flexbox-Layout für die Tags */
    flex-wrap: wrap; /* Umbrüche bei Platzmangel */
    gap: 10px; /* Abstand zwischen den Tags */
    list-style: none;
    padding: 0;
    margin: 0;
}

.tag-item {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f0f0f0;
    color: #333;
    font-size: 14px;
    --font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    --border: 1px solid #ddd;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .tag-item a {
        text-decoration: none;
        color: inherit;
    }

    .tag-item:hover {
        background-color: #e0e0e0;
        color: #000;
        --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }




.combined-articles {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen den beiden Artikeln */
}

/* Setze den ersten Artikel auf volle Breite */
.grids-large .grid-item.full-width-article {
    width: 100%;
    padding: 0px 20px; /* Behalte das Padding bei */
    float: none; /* Entfernt das Floaten, damit der Artikel die gesamte Breite einnimmt */
}

/* Artikelbox */
.article-box {
    background-color: #fff;
    padding: 0px 30px 20px 20px; /* Allgemeiner Rand der Box */
    margin-bottom: 20px; /* Abstand zur nächsten Box */
    --border: 1px solid #ddd; /* Um die Box sichtbarer zu machen */
    position: relative; /* Für den roten Strich notwendig */
}

.category-container {
    display: flex;
    align-items: center;
    margin-top: -10px;
}

@media (max-width: 767px) {
    .category-container {
        margin-top: -10px;
    }  
}

/* Kategoriename mit minimalem Rand */
.article-category-name {
    font-style: oblique;
    font-weight: normal !important;
    font-size: 14px;
    line-height: 17px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.53px;
    color: #C03932;
    text-align: left;
    opacity: 1;
    margin-right: 10px; /* Abstand zum Strich */
    --margin-top: -20px;
    display: inline-block;
    white-space: nowrap; /* Verhindert Umbruch */
}

.article-category-black {
    font-style: oblique;
    font-weight: normal !important;
    font-size: 14px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.53px;
    color: #000;
    text-align: left;
    opacity: 1;
    margin-right: 10px; /* Abstand zum Strich */
    --margin-top: -20px;
    display: inline-block;
    white-space: nowrap; /* Verhindert Umbruch */
}

.article-category {
    font-style: oblique;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.53px;
    color: #000000;
    opacity: 1;
    padding-left: 8px; /* Abstand nach dem Strich */
    border-left: 2px solid #000000; /* Vertikaler Strich */
    white-space: nowrap; /* Verhindert Umbruch */
}


/* Roter Strich links oben */
.article-box::before {
    content: "";
    position: absolute;
    top: 0px; /* Höhe des Strichs anpassen, um direkt neben dem Kategorienamen zu erscheinen */
    left: 0;
    width: 4px; /* Breite des Strichs */
    height: 30px; /* Gleiche Höhe wie der Kategoriename */
    background-color: #C03932; /* Rote Farbe */
}

@media (max-width: 767px) {
    .article-box::before {
        left: 5px;
    }
}

/* Überschrift */
.article-title {
    font: normal normal 600 20px/23px "Lato" !important;
    color: #383838;
    margin-top: 15px; /* Deutlicher Abstand zur Kategorie */
    --border-bottom: 2px solid #111;
    padding-bottom: 5px;
    text-align: left;
    word-wrap: break-word; /* Für ältere Browser */
    overflow-wrap: break-word; /* Für moderne Browser */
    hyphens: auto; /* Optional, um Wörter mit Bindestrichen umzubrechen */
}

.article-title-most {
    font: normal normal 600 21px/28px "Lato" !important;
    color: #383838;
    margin-top: 15px; /* Deutlicher Abstand zur Kategorie */
    --border-bottom: 2px solid #111;
    padding-bottom: 5px;
    text-align: left;
    word-wrap: break-word; /* Für ältere Browser */
    overflow-wrap: break-word; /* Für moderne Browser */
    hyphens: auto; /* Optional, um Wörter mit Bindestrichen umzubrechen */
}

/* Zitat */
.article-meta em {
    color: #B7B7B7;
    display: flex;
    align-items: center; /* Vertikale Ausrichtung in der Mitte */
}

/* Description */
.article-description {
    color: #140606;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 15px;
    hyphens: auto;
    --font-size: 18px;
    font: normal normal 17px/22px "Lora" !important;
    text-align: justify !important;
}

    .article-description p {
        margin-bottom: 10px !important; /* Abstand unterhalb des Absatzes hinzufügen */
        font: normal normal 17px / 22px "Lora" !important;
    }

    .article-description .read-more {
        margin-top: 10px !important; /* Verwendet !important, um andere Regeln zu überschreiben */
        display: inline-block;
    }

.read-more a {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    font-style: italic;
    letter-spacing: 0.53px;
    color: #000000;
    text-align: left;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: #cccccc; /* helles Grau */
}

    .read-more a:hover {
        text-decoration: underline; /* Optionale Unterstreichung beim Hover */
    }


/* Newsletter-Box */
.newsletter-box {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 40px auto;
    background-color: #15C3A6;
    --max-width: 700px;
    --border-radius: 5px;
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.newsletter-content {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Linke Seite */
.newsletter-text {
    flex: 1;
    background-color: #fff;
    position: relative; /* Für das SVG und die schräge Linie */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Text linksbündig ausrichten */
    padding: 40px 20px;
    text-align: left; /* Sicherstellen, dass der Text linksbündig ist */
}

    .newsletter-text p {
        margin: 0;
        padding-left: 110px; /* Abstand von der linken Seite des Containers */
        font-family: "Lato", sans-serif;
        font-size: 36px; /* Größere Schrift */
        font-weight: bold;
        font-style: italic;
        z-index: 2; /* Text über der schrägen Linie */
    }

.text-black {
    color: #000;
}

.text-red {
    color: #CA2026;
}

/* Schräge Linie */
.newsletter-text::after {
    content: "";
    position: absolute;
    top: 0;
    right: -80px;
    bottom: -2px;
    width: 100px;
    background-color: #ffffff;
    transform: skewX(-10deg);
    transform-origin: top right;
    z-index: 1; /* Hinter dem Text */
}

/* SVG auf der linken Seite */
.svg-left {
    position: absolute;
    left: -26%; /* Verschiebt das SVG um die Hälfte seiner Breite */
    top: 50%; /* Positioniert es mittig */
    transform: translateY(-50%);
    width: 151px; /* Größe des SVGs anpassen */
    z-index: 0; /* Hinter dem Text */
}

/* Rechte Seite */
.newsletter-form {
    flex: 2;
    padding: 20px;
    padding-left: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #15C3A6;
}

.newsletter-input {
    padding: 15px 10px;
    border: 1px solid #fff;
    border-radius: 0;
    margin-bottom: 20px;
    width: 70%;
    box-sizing: border-box;
    font-size: 16px;
    font: normal normal 600 17px / 23px "Lato" !important;
}

.newsletter-button {
    width: 250px;
    height: 56px;
    background: #FFC501;
    color: #140606;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    text-align: center;
    letter-spacing: 0px;
    opacity: 1;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    padding: 17px 25px;
}

    .newsletter-button:hover {
        background: #FAD453;
        color: #000;
    }

    .newsletter-button::after {
        content: '';
        display: inline-block;
        width: 16px; /* Breite der SVG */
        height: 16px; /* Höhe der SVG */
        margin-left: 10px; /* Abstand zum Text */
        background-image: url('/images/pfeilbutton.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        top: 2px; /* leicht nach unten verschieben */
    }



/* Styling für den Probeheft-Button */
.download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    --width: 218px;
    height: 56px;
    background: #FFC501;
    color: #000;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    text-align: center;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .download-button:hover {
        background-color: #FAD453;
    }

    .download-button .arrow-icon {
        margin-left: 10px;
        font-size: 14px;
    }

    .download-button::after {
        content: '';
        display: inline-block;
        width: 16px; /* Breite der SVG */
        height: 16px; /* Höhe der SVG */
        margin-left: 10px; /* Abstand zum Text */
        background-image: url('/images/pfeilbutton.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        top: 2px; /* leicht nach unten verschieben */
    }



.grids-large.three-column-grid .grid-item {
    width: 32.75%; /* Breite für größere Bildschirme */
    float: left;
    margin-right: 0.6%; /* Setze einen kleineren Abstand zwischen den Spalten */
    box-sizing: border-box;
}

    .grids-large.three-column-grid .grid-item:nth-child(3n) {
        margin-right: 0; /* Entfernt den Abstand nach der dritten Spalte */
    }

/* Anpassungen für mobile Ansichten */
@media (max-width: 767px) {
    .grids-large.three-column-grid .grid-item {
        width: 100%; /* Setze die Breite auf 100%, um die Boxen untereinander anzuordnen */
        float: none; /* Entferne das Floaten, damit die Elemente gestapelt werden */
        margin-right: 0; /* Kein zusätzlicher Abstand rechts */
        margin-bottom: 20px; /* Optionaler Abstand zwischen den Boxen */
    }
}

.article-category-indicator {
    display: inline-block;
    width: 5px; /* Breite des Strichs */
    height: 20px; /* Höhe des Strichs */
    background-color: #c0392b; /* Farbe des Strichs */
    margin-right: 8px; /* Abstand zur Kategorie */
}


.bottom-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.bottom-link-item {
    color: #c0392b;
    font-size: 21px;
    font-weight: bold;
    width: 33%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

    .bottom-link-item span {
        display: inline-block;
        width: 100%; /* Maximiert die Breite für den Text */
        text-align: left;
        padding-bottom: 0; /* Entfernt den Abstand zur Linie */
    }

        /* Entfernen Sie das Pseudo-Element für den Pfeil */
        .bottom-link-item span::after {
            content: ''; /* Entfernt den Pfeil */
        }

        .bottom-link-item span::before {
            content: none; /* Entfernt das rote Element */
        }


.most-read-item {
    width: 100%; /* Artikel nimmt die volle Spaltenbreite ein */
    padding: 10px 0; /* Optionaler Abstand zwischen Artikeln */
    box-sizing: border-box; /* Sorgt dafür, dass Padding und Border innerhalb der Breite bleiben */
}


.top-spacing {
    padding-top: 10px; /* Abstand zur oberen Kante */
}


/* Anpassungen für die mobile Ansicht */
@media (max-width: 767px) {
    .bottom-link-item span::after {
        content: ''; /* Entfernt den Pfeil in der mobilen Ansicht */
    }

    .bottom-link-item {
        font-size: 4vw; /* Schriftgröße passt sich dynamisch an die Breite des Bildschirms an */
    }

        .bottom-link-item::before {
            width: 100%; /* Unterstreicht den gesamten Text */
        }

        .bottom-link-item span {
            text-align: center; /* Zentriert den Text über der Linie */
        }
}

.install-text {
    font-style: oblique;
    font-weight: bold;
    font-size: 14px !important;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0px;
    color: #000 !important;
    text-align: center;
    opacity: 1;
}


.app-store-logos {
    display: flex;
    justify-content: center; /* Zentriere die Logos */
    gap: 10px; /* Abstand zwischen den Logos */
    margin-top: 10px; /* Abstand zum Text "oder App installieren" */
}

.app-logo {
    width: 120px; /* Größe der Logos anpassen */
    height: auto;
}

.info-box-svg {
    width: 250px; /* Vergrößert das SVG für die gewünschte Optik */
    height: auto;
    --opacity: 0.6; /* Optionale Transparenz für ein dezenteres Aussehen */
}

/* Stellt sicher, dass das SVG im Hintergrund bleibt und das Bild überlagert */
.svg-background-container {
    position: absolute;
    top: -100px; /* An den oberen Rand der info-box setzen */
    left: 15%; /* Horizontal in der Mitte ausrichten */
    transform: translateX(-50%); /* Zentriert das SVG in der Box */
    z-index: 0; /* Hintergrund-Ebene */
    width: 150px; /* Breite des SVG anpassen */
    height: auto;
}

/* Beibehaltung der bereits definierten Regeln */
.info-box {
    background-color: #15D0B1;
    padding: 20px;
    padding-bottom: 60px;
    margin-top: 226px;
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 1200px;
    --border-radius: 8px;
}

.info-box-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 1; /* Überlagert das SVG */
}

.floating-image {
    position: absolute;
    top: -211%;
    left: 5%;
    width: auto;
    height: auto;
    max-height: 380px; /* kleiner als vorher (z. B. 320 statt 462) */
    z-index: 1;
    object-fit: contain;
}

.floating-image-nogift {
    position: absolute;
    top: -79%;
    left: 4%;
    width: auto;
    height: auto;
    max-height: 380px; /* kleiner als vorher (z. B. 320 statt 462) */
    z-index: 1;
    object-fit: contain;
}

.floating-image-mobile {
    width: auto;
    height: auto;
    max-height: 380px; /* kleiner als vorher (z. B. 320 statt 462) */
    z-index: 1;
    object-fit: contain;
    padding-bottom: 20px;
}

.text-container {
    margin-left: 40%; /* Startet den Text bei 40% der Box */
    position: absolute;
    top: -70%; /* Platzieren Sie den Text oberhalb der Box */
    z-index: 2; /* Sorgt dafür, dass der Text vor dem Hintergrund angezeigt wird */
}

/* Stil für "unabhängig. kritisch. anzeigenfrei." */
.main-text {
    font-style: oblique;
    font-weight: bold;
    font-size: 29px;
    line-height: 35px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0px;
    color: #383838;
    text-align: left;
    opacity: 1;
}


.sub-text {
    font-style: oblique;
    font-weight: bold;
    font-size: 29px;
    line-height: 35px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0px;
    color: #c03932;
    text-align: left;
    opacity: 1;
}

.info-text {
    margin-left: 40%;
    color: #333;
    z-index: 2;
}

    .info-text p {
        font-size: 16px;
        line-height: 1.5;
    }

/* Stil für den "arznei-telegramm®"-Text – jetzt Lora Bold */
.info-text-bold-start {
    font-family: "Lora", serif;
    font-weight: 700; /* Lora Bold */
    font-size: 15px;
    line-height: 20px;
    color: #000;
    font-style: normal;
}

/* Stil für den mittleren Text – Lora Regular */
.info-text-regular {
    font-family: "Lora", serif;
    font-weight: 400; /* Lora Regular */
    font-size: 15px;
    line-height: 20px;
    color: #000;
}

/* Stil für den letzten Teil des Textes – Lora Bold */
.info-text-bold-end {
    font-family: "Lora", serif;
    font-weight: 700; /* Lora Bold */
    font-size: 15px;
    line-height: 20px;
    color: #000;
}

.subscribe-normalbutton {
    width: 250px;
    height: 56px;
    background: #FFC501;
    color: #140606;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 17px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0px;
    opacity: 1;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}



    .subscribe-normalbutton:hover {
        background-color: #FAD453;
        color: #000;
    }

.button-and-logos {
    display: flex;
    align-items: center; /* Zentriert den Button und die Logos vertikal */
    gap: 10px; /* Abstand zwischen Button und Logos */
    margin-top: 10px;
}

.app-store-logos {
    display: flex;
    gap: 10px; /* Abstand zwischen den Logos */
    align-items: center; /* Vertikale Ausrichtung der Logos */
}

.app-logo {
    width: 120px; /* Größe der Logos */
    height: auto;
}

.current-issue {
    color: #ffffff; /* Weißer Text */
    font-size: 14px; /* Schriftgröße anpassen */
    font-weight: bold;
    margin-top: 10px; /* Abstand zum Bild */
    text-align: left; /* Text linksbündig */
    position: absolute;
    left: 24%; /* Gleiche Ausrichtung wie das Bild */
    top: 80%; /* Abstand vom Bild nach unten */
}

@media (max-width: 767px) {
    /* Versteckt das Bild und den "Aktuelle Ausgabe"-Text in der mobilen Ansicht */
    .floating-image,
    .current-issue {
        display: none;
    }

    .main-text,
    .sub-text {
        font-size: 18px;
        margin-bottom: 0; /* Entfernt den Abstand zwischen den Texten */
        line-height: 1.1; /* Verringert die Zeilenhöhe, um den Text näher zusammenzubringen */
    }

    /* Zentriert den info-text innerhalb des grünen Bereichs */
    .info-text {
        text-align: center;
        margin: 2px 0; /* Weiter reduzierter Abstand zum Textcontainer */
        padding: 0 10px; /* Optionaler innerer Abstand für bessere Lesbarkeit */
    }

    /* Passt die Darstellung der Button und Logos an */
    .button-and-logos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px; /* Geringerer Abstand zwischen Button und Logos */
        margin: 0 auto;
        width: 100%; /* Nimmt die gesamte Breite ein */
        text-align: center; /* Zentriert den Inhalt */
    }

    .app-store-logos {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .app-logo {
        width: 120px;
        height: auto;
    }
}

.custom-footer {
    position: relative; /* oder absolute/fixed */
    --z-index: 9999; /* hoher Wert, damit es über anderen Elementen liegt */
    background: #246B5C;
    width: 100%;
    padding: 100px 0;
    text-align: center;
}


    .custom-footer p {
        font: normal normal normal 14px/20px Lora; /* Schriftart und Größe */
        letter-spacing: 0px;
        color: #FFFFFF; /* Weiße Schriftfarbe */
        margin: 0; /* Entfernt Standardabstände */
    }

    .custom-footer a {
        color: #FFFFFF; /* Verlinkungen ebenfalls in Weiß */
        text-decoration: none; /* Entfernt die Unterstreichung */
        margin: 0 5px; /* Abstand zwischen den Links */
    }

        .custom-footer a:hover {
            text-decoration: underline; /* Unterstreichung beim Hover */
        }

.right-box-with-bg {
    background-color: white; /* Weißer Hintergrund */
    padding: 20px; /* Optional: Abstand zum Rand */
    border-radius: 5px; /* Optional: Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Schatten für etwas Tiefe */
}

.selected-info {
    font-size: 16px;
    color: #333;
    line-height: 1.6; /* Zeilenabstand */
}

    .selected-info .product-name {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 5px;
    }

    .selected-info .nutzer-typ,
    .selected-info .preis {
        margin-bottom: 3px;
        font-size: 15px;
    }

.product-overview-box {
    background-color: #f9f9f9; /* Leichter Hintergrund */
    border: 1px solid #e0e0e0; /* Dezenter Rand */
    padding: 20px;
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    transition: all 0.3s ease; /* Weiche Übergänge */
}

    .product-overview-box h2 {
        font-size: 20px;
        color: #333;
        margin-bottom: 15px;
        font-weight: bold;
        text-align: left;
    }

    /* Textformatierung für den Inhalt */
    .product-overview-box .selected-info {
        font-size: 16px;
        color: #333;
    }

        .product-overview-box .selected-info .product-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .product-overview-box .selected-info .nutzer-typ,
        .product-overview-box .selected-info .preis {
            font-size: 15px;
            margin-bottom: 5px;
        }

    /* Entfernen eines etwaigen Hover-Effekts */
    .product-overview-box:hover {
        box-shadow: none;
        transform: none;
    }

/* Animation für das Schweben */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(-2deg); /* Ausgangsposition mit Schräge */
    }

    50% {
        transform: translateY(-5px) rotate(-2deg); /* Schwebt leicht nach oben, behält die Schräge */
    }

    100% {
        transform: translateY(0px) rotate(-2deg); /* Zurück zur Ausgangsposition mit Schräge */
    }
}

/* Standard-Notizzettel mit Schwebe-Effekt und Schräge */
.postit-note {
    background-color: #FFEB3B;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    transform: rotate(-2deg); /* Schräge bleibt erhalten */
    position: relative;
    margin-bottom: 20px;
    font-family: 'Caveat', cursive;
    color: #4a4a4a;
    animation: float 3s ease-in-out infinite; /* Sanfte Schwebe-Animation */
}


    /* Für Überschrift */
    .postit-note h2 {
        font-size: 22px; /* Größere Überschrift für Lesbarkeit */
        color: #333;
        margin-bottom: 10px;
        text-align: left;
        font-family: 'Caveat', cursive; /* Handschriftliche Schrift */
    }

    /* Textformatierung für den Inhalt */
    .postit-note .selected-info {
        font-size: 18px;
        color: #4a4a4a; /* Passende dunkle Textfarbe */
    }

    /* Optional: Eine kleine "Pinnnadel" darstellen */
    .postit-note::before {
        content: '';
        width: 20px;
        height: 20px;
        background-color: #e57373; /* Pinnnadel-Farbe */
        border-radius: 50%;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

.custom-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Sorgt für eine mittige Ausrichtung */
    gap: 20px; /* Abstand zwischen den Bildern */
}

.custom-gallery-item {
    width: calc(50% - 20px); /* Zweispaltige Anordnung */
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

    .custom-gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .custom-gallery-item img {
        width: 100%;
        height: 200px; /* Einheitliche Höhe */
        object-fit: cover; /* Schneidet das Bild so zu, dass es die Box ausfüllt */
        border-bottom: 1px solid #e0e0e0;
        border-radius: 8px 8px 0 0;
    }

.custom-gallery-desc {
    text-align: center;
    font-size: 14px;
    color: #555;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

/* Modal Hintergrund */
.modal {
    display: none;
    position: fixed;
    top: 0; /* Wird durch JavaScript aktualisiert */
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8); /* Ein halbtransparenter Hintergrund */
    z-index: 9999;
}


.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

    .modal-content img {
        width: 100%;
        height: auto;
        display: block;
    }


/* Schließen-Button */
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10;
}

.txt-search {
    width: 100%;
    box-sizing: border-box;
}

/* Allgemeine Styles für Ergebnislisten */
#resultList, #mobileResultList {
    display: block;
    background-color: #ffffff;
    max-height: 400px;
    overflow-y: auto; /* Scrollbar bei Überlauf */
    list-style: none; /* Entfernt Aufzählungszeichen */
    padding: 0;
    --border: 1px solid #ccc;
    margin-top: -9px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 25px;
    height: auto; /* Automatische Anpassung an die Anzahl der Ergebnisse */
    z-index: 1000000;
    -webkit-overflow-scrolling: touch;
}

    /* Styles für Listeneinträge */
    #resultList li, #mobileResultList li {
        pointer-events: auto; /* Sicherstellen, dass Klicks verarbeitet werden */
        cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass die Elemente klickbar sind */
        padding: 5px 10px;
        line-height: 20px;
        text-align: left; /* Text linksbündig */
        transition: background-color 0.2s;
        list-style: none; /* Sicherstellen, dass keine Aufzählungszeichen angezeigt werden */
    }

        /* Styles für ausgewählte Listeneinträge */
        #resultList li.selected, #mobileResultList li.selected {
            background-color: #40E0D0 !important; /* Türkis für ausgewählte Einträge */
            color: #ffffff !important; /* Weißer Text auf Türkis */
        }

        #mobileResultList li.active {
            background-color: #15C3A6;
            color: #fff;
        }

        /* Hover-Effekt für Listeneinträge */
        #resultList li:hover, #mobileResultList li:hover {
            background-color: #40E0D0; /* Türkis bei Hover */
            color: #ffffff; /* Weißer Text bei Hover */
        }

/* Allgemeine Styles für ausgewählte Einträge */
.selected {
    background-color: #5bc0be !important; /* Dezentes Türkis */
    color: white !important;
}

/* Styles für hervorgehobenen Text */
.highlight {
    --background-color: #e0f7fa !important; /* Leichtes Türkis für Markierungen */
    --color: #004d40 !important; /* Dunklerer Text für Kontrast */
    --padding: 0 2px;
    --border-radius: 2px;
}


.loading .loading-icon, .loading .loading-icon-mobile {
    display: block;
    border: 6px solid #e0e0e0; /* Leichte Randfarbe für den Loader */
    border-top: 6px solid #40E0D0; /* Türkisfarbene obere Grenze */
    border-radius: 50%;
    width: 40px; /* Größerer Durchmesser */
    height: 40px; /* Größerer Durchmesser */
    animation: spin 0.8s linear infinite;
    box-shadow: 0px 0px 15px rgba(64, 224, 208, 0.7); /* Stärkerer türkiser Schatten */
    margin: 0 auto; /* Zentriere das Symbol */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Allgemeiner Stil für alle subscribe-boxen */
.subscribe-box {
    background: #f9f9f9;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Stil für infobox in subscribe-box */
.subcribe-box.infobox {
    background-color: #15C3A6;
    font-family: "Lora", sans-serif; 
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

    /* Weiße Überschrift für besseren Kontrast */
    .subcribe-box.infobox h3 {
        color: #333;
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    /* Weißer oder hellgrauer Text für Lesbarkeit */
    .subcribe-box.infobox p,
    .subcribe-box.infobox ul li {
        color: #000;
        font-weight: 600;
        margin-top: 10px;
        --font-size: 0.9em;
        --display: flex;
        justify-content: center;
    }

/* Bildstil im post-thumb */
.subcribe-box .post-thumb img {
    margin-bottom: 15px;
    max-width: 80%;
    --border-radius: 5px;
}

/* Zentrierter Stil für Formfelder */
.mc4wp-form-fields {
    text-align: center;
}

/* SVG-Positionen für linke obere und rechte untere Positionen */
.svg-top-left,
.svg-bottom-right {
    position: absolute;
    width: 150px; /* Erhöhte Breite für größere SVGs */
    height: auto;
    z-index: 0; /* Hintergrund-Ebene */
}

/* SVG links oben positionieren */
.svg-top-left {
    top: -20px; /* Position etwas anpassen, damit es halb herausschaut */
    left: -15px;
}

/* SVG unten rechts positionieren */
.svg-bottom-right {
    bottom: -50px;
    right: -20px;
}

/* Bild und Button über den SVGs anzeigen */
.post-thumb img,
.download-button {
    position: relative;
    z-index: 1; /* Vordergrund-Ebene */
}


.install-text {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

.app-store-logos .app-logo {
    width: 100px;
    margin: 10px;
}

/* Zusätzliche Stile für spezifische Boxen, falls erforderlich */
.infobox h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 15px;
}

.infobox ul {
    text-align: left;
    padding-left: 20px;
    margin: 15px 0;
}

    .infobox ul li {
        font-size: 0.9em;
        color: #444;
    }

.arrow-button-custom {
    display: inline-block;
    min-width: 40px; /* Einheitliche Breite für Buttons */
    text-align: center;
    color: white; /* Farbe der Pfeile */
    background-color: transparent; /* Kein Hintergrund */
    border: none; /* Kein Rahmen */
    font-size: 18px; /* Schriftgröße */
    cursor: pointer; /* Zeiger bei Hover */
    transition: opacity 0.3s ease; /* Weicher Übergang */
}

    .arrow-button-custom[style*="visibility: hidden"] {
        pointer-events: none; /* Klicks deaktivieren */
        opacity: 0; /* Unsichtbar, aber Platz bleibt erhalten */
    }



.about-box {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd; /* Optional: Rahmen für die Box */
    border-radius: 5px;
    background-color: #f9f9f9; /* Optional: Hintergrundfarbe */
}

    .about-box h3 {
        margin-top: 0;
        font-size: 1.2em;
        color: #333;
    }

    .about-box p {
        margin: 5px 0 0;
        color: #666;
    }

.article-box-no-border {
    padding: 25px; /* Erhöhtes Padding für mehr Abstand zum Rand */
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 15px; /* Abstand zwischen den Boxen */
}

    .article-box-no-border:last-child {
        margin-bottom: 0; /* Entfernt unteren Abstand bei der letzten Box */
    }

/* Stellt sicher, dass alle Boxen in jeder Spalte das gleiche obere Padding haben */
.grid-item .most-read-item.article-box-no-border {
    padding-top: 20px; /* Erhöht den Abstand zur Oberkante */
}

    /* Entfernt eventuelle Abstände speziell für die erste Box */
    .grid-item .most-read-item.article-box-no-border:first-child {
        padding-top: 20px; /* Sicherstellen, dass die erste Box das gleiche Padding hat */
        margin-top: 15px; /* Entfernt eventuelle obere Ränder */
    }

.full-width-image {
    width: 100%;
    height: auto;
    display: block;
}

.menu-main-inner.menu-always-visible > ul {
    opacity: 1 !important;
    visibility: visible !important;
}

.custom-search-popup {
    display: none;
    position: absolute;
    --top: 200px;
    width: calc(100% + 40px);
    max-width: 1100px;
    margin: 0 auto;
    left: -20px;
    right: -20px;
    background: #FFFFFF;
    box-shadow: 0px 3px 26px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 10000000;
    border-radius: 30px; /* Hier wird die Rundung definiert */
}


    /* Zeigt das Suchfeld an, wenn die Klasse 'show' hinzugefügt ist */
    .custom-search-popup.show {
        display: block;
    }

/* Sichtbar unterhalb des Menüs auf 'suche.aspx' */
.custom-search-container-visible {
    display: block;
    position: relative;
    width: 100%;
    padding: 10px 20px;
    background-color: transparent;
}


/* Sichtbare Such-Pop-up-Klasse */
body.show-custom-search .custom-search-popup {
    opacity: 1;
    visibility: visible;
}

.custom-search-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Stellt sicher, dass die Breite des Containers nicht beschränkt wird */
    box-sizing: border-box; /* Berücksichtigt Padding in der Breite */
    border-bottom: 2px solid #000; /* Linie für gesamten Container */
}

.custom-search-input {
    flex-grow: 1; /* Füllt den verbleibenden Platz zwischen Button und X */
    padding: 10px;
    font-size: 24px;
    font-family: 'Lato', sans-serif !important;
    font-style: italic;
    font-weight: bold;
    color: #666666;
    border: none;
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
}

.custom-search-button {
    margin-left: 10px; /* Abstand zum Eingabefeld */
    cursor: pointer;
    background: none;
    border: none;
    font-weight: normal;
    font-size: 14px !important; /* Gleiche Größe wie Eingabefeld */
    font-family: 'Lato', sans-serif;
    font-style: normal;
    color: black !important;
}


/* Style für den Platzhaltertext */
.custom-search-input::placeholder {
    font-style: italic;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0px; /* Kein zusätzlicher Buchstabenabstand */
    color: #B7B7B7; /* Farbe des Platzhalters */
    text-align: left; /* Textausrichtung */
    opacity: 1; /* Volle Sichtbarkeit */
}

/* Anpassungen für das Suchfeld auf der suche.aspx */
.suche-custom-search {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    color: black;
    padding: 10px;
    font-size: 16px;
}

    .suche-custom-search::placeholder {
        color: black;
        opacity: 0.7;
    }

.close-search {
    margin-left: 10px; /* Abstand zum Eingabefeld */
    cursor: pointer;
    font-size: 52px;
    line-height: 1;
}

/* Button „suchen >“ */
.custom-search-button {
    white-space: nowrap; /* Verhindert das Umbrechen von „suchen >“ */
    font-style: oblique;
    font-weight: 500; /* Medium Gewicht */
    font-size: 24px;
    line-height: 34px;
    font-family: "Lato", sans-serif;
    color: #B7B7B7;
    background: none; /* Optional: keine Hintergrundfarbe */
    border: none; /* Optional: keine Rahmenlinie */
    cursor: pointer;
}


.custom-loading-icon {
    display: none; /* Standardmäßig ausgeblendet */
    width: 24px;
    height: 24px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000; /* Farbe des Ladekreises */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto; /* Zentriert das Symbol */
}

/* Animation für den Ladekreis */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#resultList {
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: none; /* Entfernt Schatten bei leerer Liste */
    border: none; /* Entfernt Umrandung */
}

.full-width-article-box {
    background-color: #ffffff; /* Weißer Hintergrund */
    width: 100%; /* Volle Breite */
    padding-top: 20px; /* Innenabstand */
    padding-left: 15px; /* Abstand des Inhalts zum roten Balken */
    margin-bottom: 5px; /* Abstand zum nächsten Element */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    --border: 1px solid #e0e0e0; /* Grauer Rand */
    border-radius: 0; /* Keine Rundungen */
    position: relative; /* Erforderlich für das Pseudo-Element */
}

    .full-width-article-box::before {
        content: "";
        position: absolute;
        top: 0; /* Entfernt den Abstand nach oben */
        left: 0;
        height: 24px; /* Höhe des roten Balkens, um nur die Kategorie abzudecken */
        width: 4px; /* Breite des roten Balkens */
        background-color: #C03932; /* Roter Balken */
    }

    @media (max-width: 767px) {
        .full-width-article-box::before {
            left: 5px;
        }
    }

    .full-width-article-box .article-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.9em;
        color: #555;
        --margin-bottom: 10px;
    }

    .full-width-article-box .category-container {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        --padding-left: 10px;
        margin-top: -15px !important
    }

.full-width-article-box .article-category-name {
    font-weight: bold;
    color: #C03932; /* Rote Farbe für Kategorie */
    margin-right: 10px;
}

    .full-width-article-box .article-category {
        font-style: italic;
        color: #000;
    }

    .full-width-article-box .article-title {
        font-size: 1.5em;
        margin-top: 0;
        margin-bottom: 7px;
        color: #333;
    }

    .full-width-article-box .article-description {
        font-size: 1em;
        color: #333;
    }

    .full-width-article-box .read-more a {
        color: #007bff;
        text-decoration: none;
    }

        .full-width-article-box .read-more a:hover {
            text-decoration: underline;
        }


/* Positionierung des SVG-Bildes */
.svg-container {
    position: absolute;
    top: -30px; /* SVG höher platzieren */
    left: -60px; /* Weiter nach links schieben */
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 0; /* Niedrigster z-index-Wert, damit es im Hintergrund bleibt */
}

.suggestion-svg {
    width: 150px; /* Vergrößert das SVG um 50% */
    height: auto;
}

/* Spezielle Mindesthöhe nur für diesen Bereich */
.min-height-box {
    min-height: 150px; /* Festgelegte Mindesthöhe nur für diesen Bereich */
}


/* Hauptcontainer für den gesamten Abschnitt */
.similar-tags-container {
    position: relative; /* Setzt einen neuen Kontext */
    background-color: #15C3A6;
    padding: 20px;
    border-radius: 0px;
    margin: 20px 0;
    z-index: 1; /* Höher als SVG */
    margin-top: 60px; /* Schiebt die grüne Box noch weiter nach unten */
}

.svg-bottom-container {
    position: absolute;
    bottom: -10%; /* Setzt das SVG am unteren Rand */
    left: 73%; /* Zentriert das SVG */
    transform: translateX(-50%); /* Genau zentrieren */
    width: 150px; /* Breite des SVG */
    height: auto;
    opacity: 1
}

/* Container für das SVG */
.svg-container {
    position: absolute;
    top: -40px;
    left: 77px; /* Verschiebt das SVG weiter nach links */
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 0; /* Niedriger als alle anderen Elemente */
}

@media (max-width: 768px) {
    .svg-container {
        display: none;
    }
}


.suggestion-svg {
    width: 150px;
    height: auto;
}

/* Stil für den Titel des grünen Kastens */
.similar-tags-title {
    font: normal normal 600 20px/25px "Lato", sans-serif;
    color: #140606;
    text-align: left;
    margin-bottom: 15px;
    margin-top: 10px;
    position: relative; /* Z-index wird nur mit `position: relative` aktiviert */
    z-index: 2; /* Sicherstellen, dass der Titel über dem SVG liegt */
    z-index: 2; /* Sicherstellen, dass der Titel über dem SVG liegt */
}

/* Flexbox für die Tags */
.similar-tags-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative; /* Z-index wird nur mit `position: relative` aktiviert */
    z-index: 2;
    margin-top: 20px;
}

/* Stil für jedes Tag-Element */
.similar-item {
    --background-color: #f3f3f3;
    --padding: 10px;
    border-radius: 4px;
    display: inline-block;
    background-color: var(--background-color); /* Hinzufügen des Hintergrunds direkt zum Container */
    padding: var(--padding);
}

    /* Stil für den Link innerhalb des Tag-Elements */
    .similar-item a {
        font: normal normal normal 14px/18px Lora, serif;
        color: #383838;
        text-decoration: none;
        display: block; /* Füllt den gesamten Tag-Bereich */
        border-radius: inherit; /* Übernimmt die Abrundung vom Container */
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

        .similar-item a:hover {
            background-color: #e0e0e0; /* Etwas dunklerer Hintergrund bei Hover */
            --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Sanfter Schatten bei Hover */
            --text-decoration: underline;
        }

.similar-item,
.similar-item-o {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f0f0f0;
    color: #333;
    font-family: Lora, serif;
    font-size: 14px;
    --font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    --border: 1px solid #ddd;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    .similar-item a,
    .similar-item-o a {
        display: block;
        text-decoration: none;
        color: inherit;
        border-radius: inherit;
    }

    .similar-item:hover,
    .similar-item-o:hover {
        background-color: #e0e0e0;
        color: #000;
        --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }



/* Stil für die Nachricht bei keinen Ergebnissen */
.no-results {
    color: #383838;
    font: normal normal normal 14px/18px Lora, serif;
    padding: 10px;
}

.treffer-label-wrapper {
    width: 80%;
    display: flex;
    justify-content: flex-end;
}

.treffer-anzahl-label {
    font-size: 28px;
    font-family: 'Lora', serif;
    font-weight: bold;
    letter-spacing: 0px;
    color: #383838;
    text-align: right;
    opacity: 1;
    margin-top: 10px;
}



.section-heading {
    font: normal normal 600 20px/25px "Lato", sans-serif;
    color: #140606;
    text-align: left;
    margin-bottom: 25px; /* Abstand zum nächsten Element */
    margin-top: 40px;
    position: relative;
    z-index: 2;
}



.search-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1100px; /* oder eine andere Breite des Inhaltsbereichs */
    margin: 0 auto;
}

@media (max-width: 991px) {
    .search-wrapper {
        display: none;
    }
}


.transparent-search {
    background-color: white;
    border-radius: 24px; /* Gleiche Rundung für den Hauptcontainer */
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); /* Etwas stärkerer Schatten */
    padding: 15px; /* Etwas mehr Abstand für ein luftigeres Design */
}

    .transparent-search .custom-search-container {
        display: flex;
        align-items: center;
        border-radius: 24px; /* Gleiche Rundung wie der Hauptcontainer */
        overflow: hidden; /* Überstehende Inhalte abschneiden */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten für den Container */
        background-color: white;
    }

    .transparent-search .custom-search-input {
        flex-grow: 1; /* Platzfüllend */
        padding: 15px; /* Etwas mehr Abstand für bessere Lesbarkeit */
        font-size: 16px;
        border: none; /* Kein Rahmen für das Eingabefeld */
        outline: none; /* Entfernt den Standardfokusrahmen */
        border-radius: 24px 0 0 24px; /* Runde Ecken nur links */
        background-color: transparent; /* Transparent, da es im Container liegt */
    }

    .transparent-search .custom-search-button {
        padding: 15px 20px; /* Mehr Abstand für größere Buttons */
        border: none;
        background-color: #007BFF; /* Beispiel: Blau für den Button */
        color: white;
        cursor: pointer;
        border-radius: 0 24px 24px 0; /* Runde Ecken nur rechts */
        font-size: 16px; /* Schriftgröße anpassen */
    }

    .transparent-search #resultList {
        position: absolute; /* Absolut positioniert, damit es unter der Suchmaske angezeigt wird */
        z-index: 1000; /* Über anderen Elementen */
        width: 100%; /* Gleiche Breite wie die Suchmaske */
        max-height: 300px; /* Maximale Höhe der Ergebnisliste */
        overflow-y: auto; /* Scrollbar bei Überlauf */
        background-color: white; /* Hintergrundfarbe */
        box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1); /* Optional: Schatten */
        border-radius: 0 0 24px 24px; /* Nur die unteren Ecken abrunden */
        top: 100%; /* Startet direkt unter dem Eingabefeld */
        left: 0;
    }

        /* Scrollbar anpassen */
        .transparent-search #resultList::-webkit-scrollbar {
            width: 8px; /* Breite der Scrollbar */
            height: 8px; /* Höhe der horizontalen Scrollbar, falls erforderlich */
        }

        .transparent-search #resultList::-webkit-scrollbar-thumb {
            background-color: #ccc; /* Farbe des Scrollbalkens */
            border-radius: 8px; /* Runde Scrollbalken */
        }

            .transparent-search #resultList::-webkit-scrollbar-thumb:hover {
                background-color: #999; /* Scrollbalken bei Hover */
            }

        .transparent-search #resultList::-webkit-scrollbar-track {
            background-color: #f9f9f9; /* Hintergrund der Scrollleiste */
            border-radius: 8px; /* Runde Scrollbar-Umrandung */
        }

        /* Verbesserte Listeneinträge */
        .transparent-search #resultList li {
            pointer-events: auto; /* Sicherstellen, dass Klicks verarbeitet werden */
            cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass die Elemente klickbar sind */
            padding: 10px 15px; /* Mehr Abstand für bessere Lesbarkeit */
            line-height: 20px;
            text-align: left; /* Text linksbündig */
            transition: background-color 0.2s;
            list-style: none; /* Entfernt Aufzählungszeichen */
            border-bottom: 1px solid #e6e6e6; /* Optionale Trennlinie zwischen Einträgen */
        }

            .transparent-search #resultList li:last-child {
                border-bottom: none; /* Letzter Eintrag ohne Trennlinie */
            }

            .transparent-search #resultList li.selected {
                background-color: #40E0D0; /* Türkis für ausgewählte Einträge */
                color: #ffffff; /* Weißer Text auf Türkis */
            }

            .transparent-search #resultList li:hover {
                background-color: #40E0D0; /* Türkis bei Hover */
                color: #ffffff; /* Weißer Text bei Hover */
            }


.custom-search-container.transparent-search .custom-search-input {
    width: calc(100% - 30px); /* 30px ist die ungefähre Breite des "x" zum Schließen */
}


/* Entfernt Hintergrund, Rahmen und Schatten nur für die gewählten Abschnitte */
.grid-item.no-background .bottom-link-item,
.grid-item.no-background .most-read-item {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    margin-top: 10px !important;
}

/* Stellt die Inhalte als Liste dar */
/* Weißer Kasten nur um die Listen */
.grid-item.no-background ul.recent-post {
    background-color: #ffffff; /* Weißer Hintergrund für die Liste */
    --border: 1px solid #e0e0e0; /* Dezenter Rahmen */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    padding: 1px 15px 15px 15px; /* Innenabstand für die Liste */
    --border-radius: 5px; /* Abgerundete Ecken, optional */
    margin-top: 10px; /* Abstand zur Überschrift */
}

.grid-item.no-background .most-read-item {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

/* Passt die Artikelüberschriften und -texte an, um wie Listeneinträge auszusehen */
.grid-item.no-background .article-title {
    font-weight: normal;
    font-size: inherit;
    display: list-item;
    margin: 0;
}

.grid-item.no-background .article-description {
    display: inline;
    font-size: inherit;
    color: inherit;
}

.article-content-container {
    position: relative;
    padding-top: 20px; /* Oberer Abstand, falls gewünscht */
    --overflow: hidden; /* Blendet den überflüssigen Text unten aus */
    --max-height: 250px;
    hyphens: auto;
    font-size: 17px;
}

    .article-content-container.with-max-height {
        max-height: 250px; /* Nur im AnonymousTemplate */
        overflow: hidden; /* Überflüssigen Text ausblenden */
    }
.article-content-container-no-max-height {
    /* Andere Stile, aber ohne max-height */
    overflow: hidden;
}

@media (max-width: 768px) {
    .article-content-container.with-max-height {
        max-height: 400px; /* Für mobile Geräte */
    }
}

.fadeout-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%; /* Höhe des Fadeout-Bereichs anpassen */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none; /* Klicks durchlassen */
    --opacity: 0; /* Komplett unsichtbar */
    --visibility: hidden; /* Komplett deaktiviert */
    z-index: 0; /* Unter allen anderen Elementen */
}


.article-box .category-quote-container {
    display: flex;
    flex-wrap: wrap; /* Zeilenumbruch bei zu wenig Platz */
    align-items: center;
    justify-content: space-between; /* Trennung von links und rechts */
    margin-top: -14px;
    padding-top: 0;
    gap: 1rem; /* Optionale Lücke zwischen Zitat und Buttons */
}

.article-box .category-quote-container-second {
    display: flex;
    flex-wrap: wrap; /* Zeilenumbruch bei zu wenig Platz */
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding-top: 7px;
    margin-bottom: 10px;
    margin-top: -20px;
}

.article-box.article-content-container.with-max-height .category-quote-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex;
    flex-wrap: wrap; /* Zeilenumbruch bei zu wenig Platz */
    align-items: center;
    justify-content: space-between;
    margin-top: -10px !important;
}

.category-placeholder {
    font-style: oblique;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.53px;
    color: #C03932;
    text-align: left;
    opacity: 1;
    margin-right: 10px; /* Abstand zum Strich */
    display: inline-block;
    white-space: nowrap; /* Verhindert Umbruch */
}

.quote-placeholder {
    font-style: oblique;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.53px;
    color: #000000;
    opacity: 1;
    padding-left: 8px; /* Abstand nach dem Strich */
    border-left: 2px solid #000000; /* Vertikaler Strich */
    white-space: nowrap; /* Verhindert Umbruch */
    flex-grow: 1; /* Zitat nimmt maximal verfügbaren Platz */
    overflow: hidden; /* Verhindert Überlaufen */
    text-overflow: ellipsis; /* Fügt Ellipse hinzu, falls zu lang */
}

.artikel-detail .print-buttons {
    display: flex; /* Flexbox für horizontale Anordnung der Buttons */
    align-items: center; /* Vertikale Zentrierung */
    gap: 1rem; /* Abstand zwischen den Buttons */
    margin-left: auto; /* Schiebt die Buttons nach rechts */
    font: normal normal 400 14px / 25px "Lato" !important;
}

    .artikel-detail .print-buttons a,
    .artikel-detail .print-buttons a:hover,
    .artikel-detail .print-buttons a:focus,
    .artikel-detail .print-buttons a:active {
        text-decoration: none !important; /* Entfernt Unterstreichung für Links */
        border: none !important; /* Falls ein Rand die Unterstreichung verursacht */
        outline: none !important; /* Verhindert visuelle Effekte bei Fokus */
        color: inherit !important; /* Beibehaltung der Farbe */
    }

        .artikel-detail .print-buttons a i,
        .artikel-detail .print-buttons a strong {
            text-decoration: none !important; /* Entfernt Unterstreichung von verschachtelten Elementen */
        }

        .artikel-detail .print-buttons a * {
            text-decoration: none !important; /* Schließt alle Kind-Elemente ein */
        }



.diagonal-split-container {
    position: relative;
    height: 400px; /* Höhe des Containers */
    display: flex;
    width: 100%;
    overflow: hidden;
}

.left-content {
    width: 48%; /* Linke Seite nimmt etwas mehr Platz ein, um die rechte Seite zu überlagern */
    background-color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* Zentriert den Text horizontal */
    position: relative;
    z-index: 2;
}

.right-image {
    width: 52%; /* Rechte Seite nimmt den restlichen Platz ein */
    background: url("../images/start1.svg") center center / cover no-repeat;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Diagonale Linie als Pseudo-Element auf der linken Seite */
.left-content::after {
    content: "";
    position: absolute;
    top: -10px; /* Leichte Verschiebung nach oben */
    right: -30px; /* Verschiebt die Linie leicht über die Mitte hinaus */
    width: 60px; /* Breiter, um die Schräge stärker erscheinen zu lassen */
    height: 110%; /* Höher, um die Linie vollständig zu decken */
    background-color: white; /* Gleiche Farbe wie der linke Bereich */
    transform: rotate(8deg); /* Stärkere diagonale Schräge */
    z-index: 3;
}

.text-content {
    font-family: "Lato", sans-serif !important; /* Schriftart */
    font-weight: 600; /* Einheitlich für den gesamten Text */
    font-size: 24px; /* Schriftgröße */
    line-height: 1.5; /* Zeilenhöhe, in relativen Einheiten */
    font-style: italic; /* Kursiv */
    text-align: center; /* Zentriert den Text horizontal */
    color: black;
}

.highlighted-text {
    color: red; /* Hebt "nicht namentlich" hervor */
    font-weight: 600; /* Gleiche Gewichtung wie der restliche Text */
}

    .text-content span {
        font-weight: 900; /* Extra dick für den roten Text */
    }

/* SVG oben links - Zeigt die untere Hälfte des Bildes */
.svg-top {
    position: absolute;
    top: -100px; /* Verschiebt das Bild weiter nach oben */
    left: -20px; /* Passt den linken Versatz an */
    width: 150px; /* Erhöht die Breite des SVG-Bilds */
    height: 150px; /* Erhöht die Höhe des SVG-Bilds */
    clip-path: inset(50% 0 0 0); /* Zeigt nur die untere Hälfte des SVGs */
    z-index: 4;
}

/* SVG unten links - Zeigt die obere Hälfte des Bildes */
.svg-bottom {
    position: absolute;
    bottom: -100px; /* Verschiebt das Bild weiter nach unten */
    left: -20px; /* Passt den linken Versatz an */
    width: 150px; /* Erhöht die Breite des SVG-Bilds */
    height: 150px; /* Erhöht die Höhe des SVG-Bilds */
    clip-path: inset(0 0 50% 0); /* Zeigt nur die obere Hälfte des SVGs */
    z-index: 4;
}

/* Styling für den Suchbutton */
.search-button {
    display: inline-block; /* Block-Button */
    background-color: #ffc501; /* Primärfarbe */
    color: white; /* Schriftfarbe */
    padding: 15px 30px; /* Innenabstand */
    border: 2px solid #15C3A6; /* Rahmenfarbe */
    border-radius: 4px; /* Abgerundete Ecken */
    font-size: 16px; /* Einheitliche Schriftgröße */
    text-transform: uppercase; /* Großbuchstaben */
    cursor: pointer; /* Zeiger beim Hover */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Weiche Übergänge */
}

    .search-button:hover {
        background-color: #ffa500; /* Leicht dunklere Farbe beim Hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
    }
    .search-button svg {
        margin-right: 10px; /* Abstand zwischen Icon und Text */
        fill: white; /* Farbe des Icons passend zum Button */
        vertical-align: middle; /* Zentrierung */
    }

@media (max-width: 768px) {
    /* Zentriere die Elemente und passe die Breite an */
    .detail {
        flex-direction: column; /* Stapelt Eingabefeld und Button */
        gap: 10px; /* Weniger Abstand zwischen den Elementen */
    }

    .input-kurz {
        width: 100%; /* Eingabefeld nutzt die volle Breite */
        padding: 12px; /* Angemessene Größe für Mobilgeräte */
        font-size: 14px; /* Leicht kleinere Schriftgröße */
    }

    .search-button {
        width: 100%; /* Button nutzt die volle Breite */
        padding: 12px; /* Konsistenter Innenabstand */
        font-size: 14px; /* Leicht kleinere Schriftgröße */
        text-align: center; /* Zentrierter Text */
    }

        .search-button svg {
            margin-right: 5px; /* Weniger Abstand zwischen Icon und Text */
        }
}

/* Flex-Container für 50/50-Aufteilung */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Zeilenumbruch bei kleinen Bildschirmen */
    gap: 20px; /* Abstand zwischen den Spalten */
}

/* Linke und rechte Spalte */
.flex-left, .flex-right {
    flex: 1; /* Beide Spalten teilen sich den Platz */
    max-width: 50%; /* Maximale Breite: 50% */
    box-sizing: border-box; /* Padding und Border in die Breite einrechnen */
    padding: 20px; /* Innenabstand */
}

/* Responsive Design */
@media (max-width: 768px) {
    .flex-left, .flex-right {
        max-width: 100%; /* Auf mobilen Geräten nehmen die Spalten 100% Breite ein */
    }
}

.confirmation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Zentriert den Inhalt vertikal */
    background-color: #f9f9f9; /* Heller Hintergrund */
    padding: 20px;
}

.confirmation-inner {
    text-align: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schattierung für mehr Tiefe */
    padding: 30px;
    max-width: 600px;
    width: 100%;
}

.confirmation-message {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

.success-message {
    color: green;
    font-weight: bold;
    margin-bottom: 15px;
}

.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
}

.status-message {
    display: block;
}

.frequently-searched {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-style: italic;
    font-weight: normal;
    font-size: 14px;
    font: "Lato", sans-serif;
    letter-spacing: 0px;
    color: #B7B7B7; /* Textfarbe */
    text-align: left;
    opacity: 1;
}

.icon-arrow {
    display: inline-block;
    width: 16px; /* Breite des Symbols */
    height: 16px; /* Höhe des Symbols */
    background: url('../images/stock.png') no-repeat center center;
    background-size: contain;
    margin-right: 8px; /* Abstand zum Text */
}

.breadcrumb-navigation {
    font-size: 14px;
    margin-bottom: 1rem; /* Abstand unter der Navigation */
    background-color: transparent; /* Hintergrund transparent */
}

.breadcrumbx {
    list-style: none; /* Entfernt die Standardpunkte der Liste */
    padding: 0;
    margin: 0;
    display: flex; /* Macht die Liste horizontal */
    gap: 0.5rem; /* Abstand zwischen den Elementen */
    font: normal normal 550 15px/23px "Lato" !important;
    text-decoration: underline; 
}

.breadcrumb-item {
    display: inline;
    color: #000;
}

    .breadcrumb-item a {
        text-decoration: none; /* Entfernt Unterstreichung */
        color: #000000; /* Immer schwarze Schriftfarbe */
    }

    .breadcrumb-item.active {
        color: #000000; /* Schwarze Schriftfarbe für die aktive Seite */
        text-decoration: none; /* Kein Unterstreichen für die aktive Seite */
        font-weight: bold; /* Optional: Hervorhebung der aktiven Seite */
    }

    .breadcrumb-item + .breadcrumb-item:before {
        content: "›"; /* Pfeiltrenner zwischen den Breadcrumbs */
        margin: 0 0.5rem; /* Abstand um den Pfeil */
        color: #000000; /* Immer schwarze Farbe für den Trenner */
    }

/* Gesamte Feedback-Komponente */
.feedback_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Abstand zwischen Box und Button */
    --margin: 18rem auto; /* Zentrierung und Abstand */
}

.ff-fixed {
    position: fixed;
    bottom: 40px;
    z-index: 10;
}

/* Fallback-Klasse, die wir nur per JS einschalten */
.fixed-feedback {
    position: fixed;
    bottom: 40px; /* gleicher Abstand wie vorher */
    z-index: 99999; /* liegt über allem, blockiert aber nichts */
    will-change: top,left; /* kleine GPU-Optimierung */
}

/* Weiße Box */
.feedback_box {
    background-color: #ffffff; /* Weißer Hintergrund */
    border-radius: 25px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    padding: 1rem; /* Innenabstand */
    width: 100%;
    max-width: 400px; /* Maximale Breite */
    text-align: center; /* Zentrierter Inhalt */
}

/* Sterne */
.feedback_stars {
    display: flex;
    justify-content: center;
    gap: 0.5rem; /* Abstand zwischen Sternen */
    font-size: 24px; /* Größere Sterne */
    color: #FFD700; /* Goldene Farbe für Sterne */
    cursor: pointer; /* Zeigt an, dass die Sterne anklickbar sind */
}

.feedback_star:hover,
.feedback_star.selected {
    color: #FFC107; /* Helle Goldfarbe für Hover und ausgewählte Sterne */
}

.feedback_input {
    margin-top: 1rem;
    width: 100%;
    padding: 0.5rem;
    font-size: 16px; /* Normale Schriftgröße für eingegebenen Text */
    border: 1px solid #fff;
    border-radius: 4px;
    resize: none; /* Deaktiviert Größenanpassung */
    box-sizing: border-box; /* Beinhaltet Padding in der Breite */
    text-align: center; /* Horizontale Zentrierung */
    display: flex; /* Für vertikale Zentrierung */
    align-items: center; /* Zentriert den Text vertikal */
    justify-content: center; /* Zentriert den Text horizontal */
}

    /* Größerer Platzhaltertext */
    .feedback_input::placeholder {
        font-size: 18px; /* Größere Schriftgröße für den Platzhalter */
        font-style: italic; /* Optional: Kursiv für den Platzhalter */
        color: #999; /* Optional: Eine hellere Farbe für den Platzhalter */
        text-align: center; /* Zentriert den Platzhaltertext horizontal */
    }


.feedback_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 218px;
    height: 56px;
    background: #FFC501;
    color: #000;
    font-style: oblique;
    font-weight: 900;
    font-size: 14px;
    line-height: 20px;
    font-family: 'Lato', sans-serif;
    text-align: center;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .feedback_button:hover {
        background-color: #FAD453;
    }

    .feedback_button .arrow-icon {
        margin-left: 10px;
        font-size: 16px;
    }

.right-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Stellt sicher, dass die Höhe des Containers voll genutzt wird */
}

.feedback-container {
    display: flex;
    flex-direction: column; /* Elemente vertikal anordnen */
    flex-grow: 1; /* Nimmt den verfügbaren Platz im Container ein */
    padding: 1rem; /* Optional: Innenabstand für ästhetische Gestaltung */
    background-color: #f9f9f9; /* Heller Hintergrund für bessere Lesbarkeit */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.feedback-bottom {
    margin-top: auto; /* Schiebt den Feedback-Bereich an das Ende des Containers */
    padding-top: 1rem; /* Abstand zwischen oberen und unteren Bereichen */
    background-color: #fff; /* Optional: Weißer Hintergrund für den unteren Bereich */
    border-top: 1px solid #ddd; /* Dünne Linie zur Trennung */
    border-radius: 0 0 8px 8px; /* Abgerundete Ecken nur unten */
    text-align: center; /* Zentriert den Inhalt im Feedback-Bereich */
    padding: 1rem; /* Zusätzlicher Innenabstand */
}

.feedback_error {
    color: red;
    font-size: 14px;
    margin-top: 1rem;
}

.feedback_box p {
    font-size: 16px;
    color: #333;
    margin: 1rem 0;
}

.feedback_box a {
    text-decoration: none;
    font-weight: bold;
}

.feedback_char_count {
    margin-top: 0.5rem;
    font-size: 12px;
    color: #666;
    text-align: right;
}

/* Navigation-Container */
.navigation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%; /* Volle Breite */
}

/* Auswahl-Box für Jahr und Monat */
.selection-box {
    background-color: #ffffff;
    padding: 4px 8px 5px 8px;
    border-radius: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --display: grid;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    gap: 15px; /* Abstand zwischen den Elementen */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Zentriert die Box innerhalb des Containers */
}


/* Aktuelle Auswahl-Anzeige */
.current-selection {
    position: relative; /* Ermöglicht absolute Positionierung von Buttons */
    display: flex; /* Flexbox für die horizontale Anordnung */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Navigation wirklich zentrieren */
    width: 100%; /* Volle Breite */
    margin-bottom: 10px;
}



/* Styling für lblCurrent */
.current-display {
    font: normal normal bold 20px/28px Lato; /* Schriftstil laut Vorgabe */
    letter-spacing: 0px;
    color: #383838;
    opacity: 1;
    text-align: left; /* Linksbündige Ausrichtung */
    position: relative; /* Für die Unterstreichung */
}

    .current-display::after {
        content: ""; /* Pseudo-Element für die Linie */
        display: block;
        width: 100%;
        height: 2px;
        background-color: #15C3A6; /* Türkis */
        position: absolute;
        bottom: -5px; /* Abstand zur Schrift */
        left: 0;
    }

/* Navigationspfeile */
.nav-arrow {
    background-color: transparent; /* Transparenter Hintergrund */
    color: #000000; /* Schwarzer Text */
    border: none; /* Keine Umrandung */
    font-size: 20px; /* Größere Schriftgröße */
    cursor: pointer;
    transition: color 0.3s ease; /* Sanfter Hover-Effekt */
    padding: 5px 10px;
}

    .nav-arrow:hover {
        color: #15C3A6; /* Türkis beim Hover */
    }

/* Jahr-Selector */
.year-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Abstand zwischen Navigation und Jahren */
    background: #E5E5E5 0% 0% no-repeat padding-box; /* Grauer Hintergrund */
    border-radius: 30px; /* Gleiche Rundung */
    padding: 2px; /* Innenabstand */
    width: 100%; /* Volle Breite */
}

/* Jahr-Liste */
.year-list {
    display: flex;
    gap: 12px; /* Abstand zwischen Jahren */
    justify-content: center;
    flex-grow: 1; /* Flexibles Verhalten */
}

/* Jahr-Items */
.year-item {
    padding: 3px 20px;
    border-radius: 30px; /* Gleiche Rundung */
    font: normal normal bold 20px/28px Lato;
    background: #E5E5E5 0% 0% no-repeat padding-box; /* Grauer Hintergrund */
    color: #333333;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

    .year-item:hover {
        background: #D6D6D6 0% 0% no-repeat padding-box;
        color: #000000;
    }

    .year-item.active {
        background: #FFFFFF 0% 0% no-repeat padding-box; /* Weißer Hintergrund */
        box-shadow: 0px 3px 6px #0000001D;
        border-radius: 70px;
        color: #000000;
    }

/* Monat-Selector */
.month-selector {
    background: #E5E5E5 0% 0% no-repeat padding-box; /* Grauer Hintergrund */
    border-radius: 30px; /* Gleiche Rundung */
    padding: 3px; /* Innenabstand */
    width: 100%; /* Volle Breite */
    display: flex;
    flex-direction: column; /* Zwei Reihen */
    gap: 15px; /* Abstand zwischen den Reihen */
}

/* Monat-Reihen */
.month-row {
    display: flex;
    gap: 15px; /* Abstand zwischen Monaten */
    justify-content: space-between; /* Gleichmäßige Verteilung */
    width: 100%; /* Volle Breite */
}

/* Monat-Items */
.month-item {
    flex: 1 1 calc(16.6% - 10px); /* Flexibler Platz für 6 Monate pro Reihe */
    max-width: calc(16.6% - 10px); /* Maximal 16.6% Breite pro Monat */
    text-align: center;
    padding: 3px;
    border-radius: 30px; /* Runde Ecken */
    font: normal normal bold 14px/28px Lato; /* Schriftstil laut Designerin */
    letter-spacing: 0px;
    color: #383838;
    background-color: transparent; /* Transparent im Normalzustand */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Weicher Übergang */
}

    .month-item:hover {
        background-color: #D6D6D6; /* Mittelgrau beim Hover */
        color: #000000;
    }

    .month-item.active {
        background-color: #FFFFFF; /* Weißer Hintergrund für aktive Auswahl */
        box-shadow: 0px 3px 6px #0000001D; /* Leichter Schatten */
        color: #000000;
    }

    .month-item.inactive {
        color: #A0A0A0;
        cursor: default; /* kein Mauszeiger bei inaktiven Monaten */
    }

    /* Platzhalter-Monate */
    .month-item.placeholder {
        background-color: #f0f0f0; /* Hellgrauer Hintergrund */
        color: #A0A0A0; /* Hellgrauer Text */
        cursor: default; /* Kein Pointer-Cursor */
        pointer-events: none; /* Keine Interaktion */
    }

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .month-row {
        flex-wrap: wrap; /* Zeilenumbruch bei kleinen Bildschirmen */
        gap: 10px;
    }

    .month-item {
        flex: 1 1 calc(33.3% - 10px); /* 3 Items pro Zeile bei kleinen Bildschirmen */
        max-width: calc(33.3% - 10px);
        font-size: 12px; /* Kleinere Schriftgröße */
    }
}

/* Optional: Fokuszustand für Barrierefreiheit */
.year-item:focus,
.month-item:focus {
    outline: none;
    outline-offset: 2px;
}

/* Navigationspfeile */
.nav-arrow {
    background-color: transparent;
    color: #000000;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
    z-index:999999;
}

    .nav-arrow:hover {
        color: #15C3A6; /* Türkis beim Hover */
    }

    /* Deaktivierte Navigationspfeile */
    .nav-arrow.disabled {
        pointer-events: none; /* Keine Klicks */
        color: #A0A0A0; /* Ausgegrauter Stil */
        cursor: default; /* Kein Zeiger */
    }

/* Entferne Links bei deaktivierten Pfeilen */
.no-link {
    pointer-events: none; /* Keine Interaktion */
    text-decoration: none; /* Kein Unterstrich */
}

.custom-login-diagonal {
    display: flex;
    position: relative;
    height: 300px; /* Höhe der Box */
    overflow: hidden;
    border: 9px solid #FFB902; /* Gelber Rand */
}

.login-left, .login-right {
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    align-items: flex-start;
    padding: 20px;
    position: relative;
}

.svg-bottom-right-anmeldung {
    position: absolute;
    bottom: -49%; /* Hälfte der SVG-Grafik nach unten verschieben */
    right: -18%; /* Hälfte der SVG-Grafik nach rechts verschieben */
    width: 50%; /* Vergrößerung, um die Sichtbarkeit zu kontrollieren */
    height: auto; /* Proportionale Höhe */
    z-index: 1; /* SVG hinter den Text schieben */
    pointer-events: none; /* SVG nicht interaktiv */
    transform: rotate(90deg);
}

.login-right {
    position: relative; /* Ermöglicht absolute Positionierung innerhalb */
    overflow: hidden; /* Verhindert, dass das SVG außerhalb der Box sichtbar ist */
    flex: 7; /* Rechte Seite bleibt größer */
    background-color: #15C3A6;
    color: white;
    font-family: 'Lato', sans-serif;
    text-align: left;
    padding: 20px;
}


.login-left {
    flex: 3; /* Linke Seite etwas kleiner */
    background-color: #f9f9f9;
    font-family: 'Lato', sans-serif;
    text-align: left;
    font-style: italic;
    justify-content: space-between; /* Platz zwischen den Elementen */
}

    .login-text-black {
        font-size: 24px; /* Größere Schrift */
        font-weight: 800; /* Dickere Schrift */
        margin-bottom: 5px; /* Weniger Abstand zwischen den Zeilen */
        color: #000;
    }

    .login-text-red {
        font-size: 24px; /* Gleiche Schriftgröße wie der Rest */
        font-weight: 800; /* Dickere Schrift */
        color: #ca2026; /* Rote Farbe */
        margin-bottom: 5px; /* Weniger Abstand zwischen den Zeilen */
    }

.login-or {
    font-size: 14px;
    color: #a9a9a9;
    text-align: left;
    align-self: left; /* Zentrierung in der Spalte */
    margin: 10px 0; /* Abstand zu den umgebenden Elementen */
}

.login-action {
    margin-top: auto; /* Positioniert "Login" am unteren Rand */
    text-align: center;
}

    .login-action a {
        font-size: 14px; /* Schriftgröße für den Login-Link */
        color: #ca2026; /* Rot für den Link */
        text-decoration: none; /* Kein Unterstreichen */
    }

        .login-action a:hover {
            text-decoration: underline; /* Unterstreichen beim Hover */
        }

.login-right {
    flex: 7; /* Rechte Seite bleibt größer */
    background-color: #15C3A6;
    color: white;
    font-family: 'Helvetica-Narrow', sans-serif;
    text-align: left;
    position: relative;
    padding: 20px;
}

.login-right-content {
    z-index: 2; /* Text bleibt sichtbar über der Schräge */
    position: relative;
}

/* Progressiver margin-left für die Vorteile */
.login-benefit:nth-child(1) {
    margin-left: 12%; /* Erste Zeile */
}

.login-benefit:nth-child(2) {
    margin-left: 9%; /* Zweite Zeile */
}

.login-benefit:nth-child(3) {
    margin-left: 6%; /* Dritte Zeile */
}

.login-benefit:nth-child(4) {
    margin-left: 3%; /* Vierte Zeile */
}

.login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFB902; /* Gelber Hintergrund */
    color: white; /* Weißes Symbol */
    font-size: 16px; /* Größe des Symbols */
    font-weight: bold; /* Fettes Symbol */
    width: 24px; /* Breite des Kreises */
    height: 24px; /* Höhe des Kreises */
    border-radius: 50%; /* Macht es rund */
    flex-shrink: 0; /* Verhindert Schrumpfen bei langen Zeilen */
    margin-right: 10px; /* Abstand zum Text */
}

.login-benefit {
    font-size: 16px; /* Standardgröße für die Vorteile */
    margin-bottom: 15px; /* Abstand zwischen den Vorteilen */
    font-weight: 550; /* Normale Schrift */
    color: #140606; /* Weiße Schrift auf grünem Hintergrund */
    display: flex; /* Ermöglicht Icon und Text nebeneinander */
    align-items: center; /* Vertikale Ausrichtung */
    line-height: 1.4; /* Standard-Zeilenhöhe */
    font: normal normal 600 14px/17px "Lato" !important;
}

.login-button {
    display: inline-block;
    background-color: #FFB902; /* Gelber Hintergrund */
    color: #000; /* Schwarzer Text */
    font-size: 16px; /* Textgröße */
    font-weight: bold; /* Dickere Schrift */
    padding: 10px 20px; /* Polsterung */
    border: none;
    border-radius: 25px; /* Abgerundeter Button */
    text-decoration: none; /* Kein Unterstreichen */
    text-align: center;
    margin-top: 20px; /* Abstand zum letzten Vorteil */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .login-button:hover {
        background-color: #FFD700; /* Etwas dunkleres Gelb beim Hover */
        color: #000; /* Schwarzer Text bleibt beim Hover */
    }

    .login-button:focus,
    .login-button:active {
        background-color: #e5c400; /* Etwas dunkleres Gelb beim Klick */
        color: #000; /* Text bleibt schwarz beim Fokus oder Klick */
        outline: none; /* Entfernt den Standard-Fokusrahmen */
    }


/* Diagonale Trennung */
.custom-login-diagonal:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30%; /* Schräge beginnt bei 30% */
    width: 70%; /* Restliche Breite für die Schräge */
    background-color: #15C3A6;
    transform: skewX(-20deg);
    z-index: 1;
    transform-origin: left;
}

.login-left:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 25%; /* Breite der linken Schräge */
    background-color: #f9f9f9;
    transform: skewX(-20deg);
    z-index: 1;
    transform-origin: right;
}

@media (max-width: 670px) {

    .custom-login-diagonal {
        flex-direction: column; /* Spalten untereinander */
        height: auto;
        border-width: 6px;
    }

    .login-left, .login-right {
        flex: none;
        width: 100%;
        padding: 20px;
        text-align: center;
    }

        /* Neuer Stil für zusammenhängenden Satz */
        .login-left .login-text-container {
            display: block; /* Block-Element für volle Breite */
            width: 100%; /* Volle Breite */
            max-width: 100%; /* Sicherheitshalber Begrenzung */
            text-align: center; /* Text zentriert */
            font-size: 28px;
        }

        .login-left > .login-text-black,
        .login-left > .login-text-red {
            display: inline; /* Fließtext */
            margin: 0; /* Entfernt Abstand */
            padding-right: 5px; /* Kleiner Abstand zur besseren Lesbarkeit */
        }

        .login-left .login-action {
            text-align: center;
            margin-top: 10px;
        }

    .login-right {
        padding-top: 30px;
    }

    .login-benefit {
        margin-left: 0;
        text-align: left;
    }

    .login-button {
        width: 100%;
        max-width: 300px;
        margin: 20px auto;
    }

    .svg-bottom-right-anmeldung {
        display: none;
    }

    .custom-login-diagonal:before,
    .login-left:after {
        display: none;
    }
    .login-or {
        text-align: center;
    } 
    .login-action a {
        font-size: 25px;
    }
}

.smallfooter_info-box {
    background-color: #15C3A6;
    padding: 20px;
    padding-bottom: 60px;
    margin-top: 180px;
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 1200px;
    border-radius: 8px;
}

.smallfooter_info-box-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 1; /* Überlagert das SVG */
}

.smallfooter_floating-image {
    position: absolute;
    top: -138%;
    left: 9%;
    width: auto;
    height: auto;
    max-height: 263px;
    z-index: 1;
    object-fit: contain;
}

.smallfooter_info-text {
    margin-left: 44%;
    color: #333;
    z-index: 2;
}

    .smallfooter_info-text p {
        font-size: 16px;
        line-height: 1.5;
    }

.smallfooter_info-text-bold-start {
    font-family: "Lora", sans-serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    font-style: normal;
}

.smallfooter_info-text-regular {
    font-family: "Lato", serif;
    font-weight: bold; /* Fetter */
    font-size: 12px; /* Kleiner */
    line-height: 20px;
    color: #140606;
    font-style: italic;
    text-align: center; /* Zentriert */
    margin-top: 10px;
}

.smallfooter_info-text-bold-end {
    font-family: "Lora", serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

.smallfooter_subscribe-button {
    display: inline-block;
    background-color: #FFD700;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .smallfooter_subscribe-button:hover {
        background-color: #e5c400;
    }

.smallfooter_svg-background-container {
    position: absolute;
    top: -145px;
    left: 15%;
    transform: translateX(-50%);
    z-index: 0;
    width: 150px;
    height: auto;
}

.smallfooter_info-box-svg {
    width: 250px;
    height: auto;
    opacity: 0.6;
}

.smallfooter_svg-right {
    position: absolute;
    bottom: -67px; /* Positioniert das SVG unten */
    right: -24px; /* Positioniert das SVG rechts */
    width: 130px; /* Breite des SVGs */
    height: auto;
    z-index: 0; /* Hinter den Inhalten */
}

.smallfooter_app-store-logos {
    display: flex;
    justify-content: center; /* Zentriert die Logos horizontal */
    gap: 15px; /* Abstand zwischen den Logos */
    margin-top: 10px;
}

.smallfooter_app-logo {
    width: 100px; /* Etwas größere Logos */
    height: auto;
    display: block;
}

.smallfooter_text-container {
    margin-left: 40%; /* Startet den Text bei 40% der Box */
    position: absolute;
    top: -66%; /* Platzieren Sie den Text oberhalb der Box */
    z-index: 2; /* Sorgt dafür, dass der Text vor dem Hintergrund angezeigt wird */
}

.smallfooter_main-text {
    font-style: oblique;
    font-weight: bold;
    font-size: 29px;
    line-height: 35px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0px;
    color: #383838;
    text-align: left;
    display: flex; /* Macht die beiden Wörter nebeneinander */
    gap: 10px; /* Abstand zwischen "noch" und "unentschlossen?" */
    opacity: 1;
}

.smallfooter_sub-text {
    font-style: oblique;
    font-weight: bold;
    font-size: 29px;
    line-height: 35px;
    font-family: "Lato", sans-serif;
    color: #c03932;
}

@media (max-width: 768px) {

    /* Info-Box mobil zentrieren */
    .smallfooter_info-box {
        padding: 20px;
        margin-top: 60px; /* Weniger Abstand für Mobil */
        border-radius: 8px;
        width: 100%; /* Verhindert unnötiges Scrollen */
    }

    /* Inhalt anpassen */
    .smallfooter_info-box-content {
        flex-direction: column; /* Elemente untereinander */
        align-items: center; /* Zentrierte Inhalte */
        text-align: center;
    }

    /* Floating-Image anpassen */
    .smallfooter_floating-image {
        position: static; /* Absolute Positionierung entfernen */
        width: 70%; /* Größe anpassen */
        max-width: 200px;
        margin-bottom: 20px; /* Abstand nach unten */
    }

    /* Text-Container */
    .smallfooter_text-container {
        position: static; /* Entfernt absolute Position */
        margin-left: 0; /* Entfernt unnötige Verschiebung */
        text-align: center;
        margin-top: 10px;
    }

    .smallfooter_main-text,
    .smallfooter_sub-text {
        font-size: 24px; /* Kleinere Schrift für Mobil */
        text-align: center;
    }

    /* Info-Text */
    .smallfooter_info-text {
        margin-left: 0; /* Verhindert Text-Überlauf */
        text-align: center;
    }

    /* Button und Logos */
    .smallfooter_button-and-logos {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .smallfooter_subscribe-button {
        width: 100%; /* Breite flexibel */
        max-width: 300px; /* Begrenzung */
    }

    /* SVGs mobil ausblenden (falls optisch störend) */
    .smallfooter_svg-background-container,
    .smallfooter_svg-right {
        display: none;
    }

    /* App-Store Logos */
    .smallfooter_app-store-logos {
        display: flex;
        flex-direction: row; /* Auf kleinen Geräten nebeneinander */
        gap: 10px;
    }

    .smallfooter_app-logo {
        width: 80px; /* Kleinere Logos auf Mobil */
    }
}


.custom-grid {
    display: flex; /* Stellt die Elemente nebeneinander */
    flex-wrap: wrap; /* Ermöglicht den Umbruch bei Platzmangel */
    gap: 20px; /* Abstand zwischen den Artikeln */
}

.custom-grid-item {
    flex: 1 1 calc(50% - 20px); /* Zwei Artikel nebeneinander */
    box-sizing: border-box; /* Padding und Border berücksichtigen */
    margin: 10px 0; /* Optionaler Abstand nach unten */
}

.article-box {
    position: relative;
    --border: 1px solid #ddd;
    padding: 15px;
    padding-right: 30px;
    --border-radius: 5px;
    background: #fff;
}

.free-flag {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FFC501;
    color: black;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    padding: 5px 20px;
    line-height: 1.2;
    border-bottom-left-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.free-flag-en {
    position: absolute;
    top: 0;
    right: 0;
    background-color: yellow;
    color: black;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    padding: 5px 8px;
    line-height: 1.2;
    border-bottom-left-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.grid-title {
    color: #c0392b;
    font-size: 21px;
    font-weight: bold;
    width: 33%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin-top: 30px;
}

.weiterlesen-button {
    position: absolute;
    bottom: 10px;
    left: 70%;
    transform: none;
    z-index: 999999999;
    background-color: #FFC501;
    color: #140606;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 14px;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

    .weiterlesen-button i {
        font-size: 14px; /* Gleiche Größe wie der Text */
    }

    .weiterlesen-button:active {
        background-color: #e0b800; /* Noch dunkleres Gelb bei Klick */
        transform: scale(0.95); /* Schrumpft leicht beim Klicken */
    }

@media (max-width: 670px) {
    .weiterlesen-button {
        position: absolute;
        bottom: 10px;
        right: 10px;
        left: auto;
        transform: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: auto;
        max-width: calc(100% - 20px);
        white-space: nowrap;
        padding: 8px 16px;
        background-color: #FFC501;
        color: #140606;
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        font-weight: 900;
        font-style: italic;
        border-radius: 20px;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
        z-index: 999999999;
    }

        .weiterlesen-button i {
            font-size: 14px;
        }

        .weiterlesen-button:active {
            background-color: #d4b200;
            transform: scale(0.95);
        }
}



.suggestion-svg-bottom {
    width: 100%; /* Passt die Breite des SVG an */
    opacity: 1; /* Optional, um das SVG weniger auffällig zu machen */
}

.teaser-image {
    width: 100%; /* Bild nimmt die gesamte Breite des Containers ein */
    height: auto; /* Automatische Höhe entsprechend der Breite */
}

.teaser-container {
    background-color: #15C3A6; /* Grüner Hintergrund */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box; /* Padding wird in die Größe einberechnet */
    width: 100%;
    overflow: hidden; /* Verhindert Überlappen */
    position: relative; /* Wichtig für den Schattenwurf */
    z-index: 1; /* Standard-Z-Index */
    box-shadow: none; /* Kein Schatten im Standardzustand */
    --border-radius: 5px; /* Leicht abgerundete Ecken */
    margin-bottom: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergänge für Schatten und Schweben */
}

    .teaser-container.expanded {
        z-index: 10;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.3); /* Tieferer Schatten */
        transform: translateY(-8px); /* Leichtes Schweben */
        border-radius: 10px; /* Etwas abgerundetere Ecken */
        background-color: #15C3A6; /* Hintergrund bleibt konstant */
        transition: transform 0.4s ease, box-shadow 0.4s ease; /* Glattere Übergänge */
    }

        .teaser-container.expanded:hover {
            transform: translateY(-12px); /* Leichtes Schweben bei Hover */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 255, 255, 0.4); /* Intensiverer Schatten bei Hover */
        }

.teaser-text {
    font-style: italic;
    font-weight: 900;
    font-size: 29px;
    line-height: 35px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0px;
    color: #140606; /* Text bleibt weiß */
    text-align: left;
    opacity: 1;
    padding: 20px; /* Padding nur für den Text */
    background-color: transparent; /* Kein Hintergrund für den Text */
}

.teaser-smalltext {
    font-style: italic;
    font-weight: 900;
    font-size: 29px;
    line-height: 35px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0px;
    color: #140606; /* Text bleibt weiß */
    text-align: left;
    opacity: 1;
    padding: 20px; /* Padding nur für den Text */
    background-color: transparent; /* Kein Hintergrund für den Text */
}

.read-more-link {
    color: #140606 !important; /* Link bleibt immer weiß */
    text-decoration: underline; /* Unterstreichung des Links */
    font-style: italic;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    outline: none; /* Entfernt die gestrichelte Linie */
    padding: 20px; /* Gleiche Padding-Werte wie der Text darüber */
    transition: color 0.3s ease, transform 0.3s ease; /* Für weiche Farb- und Bewegungseffekte */
}

    /* Sicherstellen, dass Icons innerhalb des Links auch weiß bleiben */
    .read-more-link i {
        font-size: 20px; /* Größe des Icons */
        margin-right: 8px; /* Abstand zwischen Pfeil und Text */
        animation: bounce 1.5s infinite ease-in-out; /* Hüpfen */
        transition: transform 0.3s ease, color 0.3s ease; /* Für Farb- und Pfeilwechsel */
        color: #140606; /* Farbe des Icons */
    }

    /* Link beim Hover- und Fokuszustand */
    .read-more-link:hover,
    .read-more-link:focus {
        color: #140606; /* Farbe bleibt weiß */
    }

    /* Sicherstellen, dass der Link nach dem Klicken immer weiß bleibt */
    .read-more-link:visited {
        color: #140606; /* Farbe bleibt nach dem Klicken weiß */
    }

/* Duplikat mit Präfix small_ */

/* Anpassung der Textfarbe auf Schwarz */
.small-read-more-link {
    color: #140606 !important; /* Link immer schwarz */
    text-decoration: underline; /* Unterstreichung des Links */
    font-style: italic;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    outline: none; /* Entfernt die gestrichelte Linie */
    padding: 20px; /* Gleiche Padding-Werte wie der Text darüber */
    transition: color 0.3s ease, transform 0.3s ease; /* Weiche Farb- und Bewegungseffekte */
    text-align: left; /* Links ausgerichtet */
}

    /* Sicherstellen, dass Icons innerhalb des Links auch schwarz bleiben */
    .small-read-more-link i {
        font-size: 20px; /* Größe des Icons */
        margin-right: 8px; /* Abstand zwischen Pfeil und Text */
        animation: bounce 1.5s infinite ease-in-out; /* Hüpfen */
        transition: transform 0.3s ease, color 0.3s ease; /* Für Farb- und Pfeilwechsel */
        color: #140606; /* Farbe des Icons auf Schwarz setzen */
    }

    /* Link beim Hover- und Fokuszustand */
    .small-read-more-link:hover,
    .small-read-more-link:focus {
        color: #140606; /* Farbe bleibt schwarz */
    }

    /* Sicherstellen, dass der Link nach dem Klicken immer schwarz bleibt */
    .small-read-more-link:visited {
        color: #140606; /* Farbe bleibt nach dem Klicken schwarz */
    }


/* Zustand für ausgeklapptes Menü (Doppelpfeil nach oben) */
.teaser-container.expanded .read-more-link i {
    animation: none; /* Animation stoppen */
    transform: rotate(180deg); /* Pfeil nach oben drehen */
}

.teaser-content {
    text-align: left !important; /* Stellt sicher, dass der Inhalt links ausgerichtet ist */
}


.hidden-text {
    max-height: 0; /* Versteckt die Box initial */
    overflow: hidden; /* Verhindert, dass der Text außerhalb angezeigt wird */
    background-color: #15C3A6; /* Grüner Hintergrund */
    color: #000; /* schwarzer Text */
    padding: 0; /* Padding initial auf 0 setzen */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Weiche Übergänge für Höhe, Padding und Sichtbarkeit */
    opacity: 0; /* Unsichtbar initial */
}

    .hidden-text.visible {
        max-height: 500px; /* Maximale Höhe für den ausgeklappten Zustand */
        padding: 10px; /* Padding hinzufügen, wenn ausgeklappt */
        opacity: 1; /* Text sichtbar machen */
    }

.small-hidden-text {
    max-height: 0; /* Versteckt die Box initial */
    overflow: hidden; /* Verhindert, dass der Text außerhalb angezeigt wird */
    background-color: #15C3A6; /* Grüner Hintergrund */
    color: #140606; /* Weißer Text */
    padding: 0; /* Padding initial auf 0 setzen */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Weiche Übergänge für Höhe, Padding und Sichtbarkeit */
    opacity: 0; /* Unsichtbar initial */
}

    .small-hidden-text.visible {
        max-height: 500px; /* Maximale Höhe für den ausgeklappten Zustand */
        padding: 10px; /* Padding hinzufügen, wenn ausgeklappt */
        opacity: 1; /* Text sichtbar machen */
    }

.toggle-button-container {
    position: absolute; /* Absolute Positionierung */
    left: 0; /* Ganz links */
    top: 50%; /* Vertikal in der Mitte */
    transform: translateY(-50%); /* Vertikale Zentrierung durch Transform */
}

.download-button-container {
    position: absolute; /* Absolute Positionierung */
    right: 0; /* Ganz rechts */
    top: 50%; /* Vertikal in der Mitte */
    transform: translateY(-50%); /* Vertikale Zentrierung durch Transform */
}



.round-toggle-button {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    display: inline-block;
}


    .round-toggle-button:hover {
        background-color: #e0e0e0;
    }

.collapsibleContainer {
    display: grid;
    gap: 10px; /* Abstand zwischen allen Kind-Elementen */
}

.navigation-buttons {
    display: flex; /* Flexbox für die Buttons */
    align-items: center; /* Vertikal zentrieren */
    gap: 10px; /* Abstand zwischen den Buttons */
}

/* Download-Button */
.btn-download {
    --background-color: #ffffff; /* Weißer Hintergrund */
    color: #000; /* Grüner Text */
    border: 2px solid #15C3A6; /* Grüner dünner Rand */
    border-radius: 30px; /* Abgerundete Ecken */
    padding: 10px 20px; /* Innenabstand */
    font-size: 13px; /* Schriftgröße */
    font-weight: bold; /* Fett */
    cursor: pointer; /* Zeiger-Cursor bei Hover */
    text-decoration: none; /* Keine Unterstreichung */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    /* Hover-Effekt für den Button */
    .btn-download:hover {
        background-color: #15C3A6; /* Grüner Hintergrund beim Hover */
        color: #ffffff; /* Weißer Text beim Hover */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    }

.artikel-full-width-article-box {
    background-color: #ffffff; /* Weißer Hintergrund */
    width: 100%; /* Volle Breite */
    padding: 6px 0px 2px 15px; /* Innenabstand */
    --margin-bottom: 5px; /* Abstand zum nächsten Element */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    border: 1px solid #e0e0e0; /* Grauer Rand */
    border-radius: 0; /* Keine Rundungen */
    position: relative; /* Erforderlich für das Pseudo-Element */
}

.favorite-article-box {
    background-color: #ffffff; /* Weißer Hintergrund */
    width: 100%; /* Volle Breite */
    padding: 6px 0px 2px 15px; /* Innenabstand */
    margin-bottom: 5px; /* Abstand zum nächsten Element */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    border: 1px solid #e0e0e0; /* Grauer Rand */
    border-radius: 0; /* Keine Rundungen */
    position: relative; /* Erforderlich für das Pseudo-Element */
}

.red-stripe {
    width: 4px; /* Breite des roten Balkens */
    height: 30px; /* Volle Höhe des Containers */
    background-color: #C03932; /* Rote Farbe */
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 991px) {
    .red-stripe {
        left: 10px;
    }
}

.artikel-article-meta {
    font-size: 16px;
    --margin-bottom: 10px;
    color: #555;
    display: flex;
    justify-content: space-between;
}

.artikel-category-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.artikel-article-category-name {
    font-style: oblique;
    font-weight: normal !important;
    font-size: 14px;
    line-height: 20px;
    font-family: "Lato", sans-serif;
    letter-spacing: 0.53px;
    color: #C03932;
    text-align: left;
    opacity: 1;
    margin-right: 10px; /* Abstand zum Strich */
    --margin-top: -20px;
    display: inline-block;
    white-space: nowrap; /* Verhindert Umbruch */
}

@media screen and (max-width: 991px) {
    .artikel-article-category-name {
        margin-left: 10px;
    }
}

.artikel-article-title {
    font-size: 1.5em;
    margin-top: 0;
    --margin-bottom: 10px;
    color: #333;
    text-align: left;
}

/* 95 % Breite, sobald die Box „has-free“ trägt */
.has-free {
    max-width: 90%;
}


.enartikel-article-title {
    --font-size: 1.5em;
    margin-top: 0;
    --margin-bottom: 10px;
    color: #797979;
    text-align: left;
}

    .enartikel-article-title.has-en {
        max-width: 90%;
    }

.artikel-article-description {
    font-size: 1em;
    color: #333;
}

.teaser-headline {
    color: #000 !important;
}

.artikel-read-more a {
    color: #007bff;
    text-decoration: none;
}

    .artikel-read-more a:hover {
        text-decoration: underline;
    }

.artikel-category-separator {
    margin: 0 5px; /* Abstand um den Separator */
    color: #999; /* Farbe des Separators */
    --margin-top: -16px;
}

.artikel-zitat {
    font-style: italic; /* Zitat kursiv darstellen */
    color: #666; /* Farbe des Zitats */
    --margin-top: -16px;
}

/* Container für die Geschenkbox */
.gift-container {
    --display: flex;
    --justify-content: flex-end; /* Positioniert die Box rechts */
    padding-right: 20px; /* Abstand zur rechten Seite */
    margin-top: 100px; /* Genügend Abstand vom Menü */
    position: relative; /* Positionierung für überlappende Inhalte */
    z-index: 0; /* Keine Überlagerung mit dem Menü */
}

.gift-container-cme {
    --display: flex;
    --justify-content: flex-end; /* Positioniert die Box rechts */
    padding-right: 20px; /* Abstand zur rechten Seite */
    margin-top: 270px; /* Genügend Abstand vom Menü */
    position: relative; /* Positionierung für überlappende Inhalte */
    z-index: 0; /* Keine Überlagerung mit dem Menü */
}

/* Geschenkbox-Stil */
.gift-subscribe-box {
    position: relative;
    background-color: #15C3A6; /* Hintergrundfarbe */
    padding: 20px;
    border-radius: 0; /* Keine Abrundungen */
    text-align: center;
    --max-width: 300px; /* Begrenzte Breite */
    overflow: visible; /* Inhalte dürfen hinausragen */
    color: #ffffff; /* Weißer Text */
    --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten für bessere Sichtbarkeit */
}

/* Geschenkbild */
.gift-image {
    position: absolute;
    top: -130px; /* Überlappt die Box leicht */
    left: 47%;
    transform: translateX(-50%);
    max-width: 261px; /* Angepasste Größe */
    height: auto;
    z-index: 2; /* Über der Box */
}

.gift-image-cme {
    position: absolute;
    top: -240px; /* Überlappt die Box leicht */
    left: 47%;
    transform: translateX(-50%);
    max-width: 261px; /* Angepasste Größe */
    height: auto;
    z-index: 2; /* Über der Box */
}

/* SVG-Positionen */
.xsvg-top-left {
    position: relative !important;
    top: -70px !important;
    left: -86px !important;
    z-index: 1 !important;
}

.xsvg-bottom-right {
    position: relative !important;
    bottom: 127px !important;
    right: -62px !important;
    z-index: 1 !important;
}

.xsvg-bottom-right-app {
    position: relative !important;
    bottom: 64px !important;
    right: -53px !important;
    z-index: 1 !important;
}

.xsvg-bottom-right-cme {
    position: relative !important;
    bottom: -279px !important;
    right: -80px !important;
    z-index: 1 !important;
}

.cme-box p {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 6px;
    color: #000;
    max-width: 240px; /* begrenzt die Textbreite */
    margin: 13px auto;
}


.svg-overlay-app {
    max-width: 130px; /* Größe der SVGs */
    height: auto;
}

.svg-overlay {
    max-width: 115px; /* Größe der SVGs */
    height: auto;
}

.svg-overlay-cme {
    max-width: 150px; /* Größe der SVGs */
    height: auto;
}

/* Geschenktext */
.gift-text {
    font: normal 900 20px/35px 'Lato', sans-serif;
    color: #140606; /* Weißer Text */
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
    margin-top: -120px;
    position: relative;
    z-index: 1;
}

    .gift-text span {
        display: inline-block;
        line-height: 35px;
        font-size: 20px;
    }


.gift-text-app {
    font: normal 900 20px/35px 'Lato', sans-serif;
    color: #140606; /* Weißer Text */
    font-style:italic;
    text-align: center;
    margin-bottom: 20px;
    margin-top: -9px;
    position: relative;
    z-index: 1;
}

.gift-text-cme {
    font: normal 900 29px/35px 'Lato', sans-serif;
    color: #140606; /* Weißer Text */
    text-align: center;
    margin-bottom: 20px;
    margin-top: -90px;
    position: relative;
    z-index: 1;
}

/* Download-Button */
.download-button {
    display: inline-block;
    padding: 17px 25px;
    background-color: #FFC501; /* Gelber Hintergrund */
    color: #140606; /* Dunkler Text für Kontrast */
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 17px;
    border-radius: 50px; /* Runde Ecken */
    --border: 2px solid #FFD700; /* Gelbe Umrandung */
    transition: all 0.3s ease-in-out;
}

    .download-button:hover {
        background-color: #FAD453; /* Etwas dunkleres Gelb beim Hover */
        color: #000; /* Weißer Text beim Hover */
    }

/* Download-Button */
.en-download-button {
    display: inline-block;
    padding: 17px 25px;
    background-color: #FFC501; /* Gelber Hintergrund */
    color: #140606; /* Dunkler Text für Kontrast */
    text-decoration: none;
    font-weight: bold;
    font-size: 17px;
    border-radius: 50px; /* Runde Ecken */
    border: 2px solid #FFD700; /* Gelbe Umrandung */
    transition: all 0.3s ease-in-out;
}

    .en-download-button:hover {
        background-color: #FFC107; /* Etwas dunkleres Gelb beim Hover */
        color: #000; /* Weißer Text beim Hover */
        border-color: #FFC107; /* Passende Hover-Farbe für die Umrandung */
    }

/* Textstyling */
.kurzurl-highlighted-text {
    font-size: 18px; /* Größere Schriftgröße */
    --font-weight: bold; /* Fettschrift */
    margin-bottom: 20px;
}

    .kurzurl-highlighted-text .kurzurl-turquoise-text {
        color: #15C3A6; /* Türkisgrün */
    }

/* Container für die Suchbox */
.kurzurl-search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 0 10px; /* damit auf kleinen Bildschirmen seitlich Platz bleibt */
}


.kurzurl-search-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 5px 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    overflow: hidden; /* verhindert, dass etwas rausragt */
}


@media (max-width: 400px) {
    .kurzurl-static-text {
        font-size: 16px;
    }

    .kurzurl-input {
        font-size: 16px;
    }
}


@media (max-width: 360px) {
    .kurzurl-search-button {
        font-size: 14px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Statischer Text vor der Eingabe */
.kurzurl-static-text {
    font-size: 18px;
    color: #000;
    margin-right: 5px;
}

.kurzurl-input {
    border: none;
    outline: none;
    flex: 1 1 auto; /* Input nimmt flexiblen Platz ein */
    min-width: 0; /* WICHTIG: verhindert Überlauf */
    font-size: 18px;
    color: #333333;
    padding: 5px;
}

.kurzurl-search-button {
    background-color: transparent;
    border: none;
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    /* margin-left: auto;  <== ENTFERNEN */
    padding-left: 10px;
    padding-right: 10px;
    flex-shrink: 0; /* Verhindert, dass Button schrumpft */
}

/* Autocomplete Completion List */
.kurzurl-autocomplete-completionlist {
    background-color: #ffffff;
    border: 1px solid #ccc;
    font-size: 14px;
    color: #333333;
    z-index: 1000;
    position: absolute;
    list-style-type: none; /* Entfernt Aufzählungspunkte */
    padding: 0; /* Entfernt Standardabstand */
    margin: 0; /* Entfernt Standardabstand */
}

/* Autocomplete List Items */
.kurzurl-autocomplete-listitem {
    white-space: normal !important; /* mehrzeilig */
    word-break: break-all; /* bei Bedarf mitten im Wort umbrechen */
    overflow-wrap: break-word; /* Bricht sehr lange Strings um */
    max-width: 300px; /* oder passe die Breite deinem Layout an */
}

/* Highlighted Item in Autocomplete */
.kurzurl-autocomplete-highlighteditem {
    background-color: #15C3A6; /* Türkisgrün */
    color: #ffffff;
}

/* Flexbox-Container für 3 Spalten */
.flex-container-3cols {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* Spalten */
.glossar-flex-left,
.glossar-flex-center,
.glossar-flex-right {
    flex: 1;
}


/* Türkisfarbene Überschrift mit Abrundung */
.turquoise-header {
    background-color: #15C3A6; /* Türkisgrün */
    color: #140606; /* Weiße Schrift */
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    margin-bottom: 0;
    min-height: 70px;
    font: normal normal 600 20px/25px "Lato" !important;
}

.turquoise-header-black {
    background-color: #15C3A6; /* Türkisgrün */
    color: #383838; /* Weiße Schrift */
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-weight: bold;
    text-align: left;
    font-size: 18px;
    margin-bottom: 0;
    font: normal normal 600 20px/25px "Lato" !important;
}

/* Weiße Überschrift ohne Abrundung */
.white-header {
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #000000; /* Schwarze Schrift */
    padding: 10px;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    margin-bottom: 0;
}

/* Weißer Hintergrund für Inhalte */
.background-white {
    background-color: #ffffff;
    color: #000000; /* Schwarzer Text */
    --padding: 8px;
    --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

.post-category-black {
    color: #000000; /* Schwarzer Text */
    font-weight: 100; /* Optionale Anpassung */
    margin-left: 5px; /* Leichter Abstand nach links */
}

.sonder_artikel-full-width-article-box {
    background-color: #ffffff; /* Weißer Hintergrund */
    width: 100%; /* Volle Breite */
    padding: 6px 7px 7px 10px;
    margin-bottom: 5px; /* Abstand zum nächsten Element */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    --border: 1px solid #e0e0e0; /* Grauer Rand */
    border-radius: 0; /* Keine Rundungen */
    position: relative; /* Erforderlich für das Pseudo-Element */
    text-align: left;
}

.sonder_red-stripe {
    width: 4px; /* Breite des roten Balkens */
    height: 30px; /* Volle Höhe des Containers */
    background-color: #C03932; /* Rote Farbe */
    position: absolute;
    top: 0;
    left: 0;
}

.sonder_artikel-article-meta {
    font-size: 16px;
    margin-bottom: 10px;
    color: #555;
    display: flex;
    justify-content: space-between;
}

.sonder_artikel-category-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sonder_artikel-article-category-name {
    font-weight: bold;
    color: #e1261c; /* Rote Farbe für Kategorie */
    margin-right: 10px;
    --margin-top: -17px;
}

.sonder_artikel-article-title {
    font-size: 1.5em;
    margin-top: 0;
    --margin-bottom: 10px;
    color: #333;
}

.sonder_artikel-article-description {
    font-size: 1em;
    color: #333;
}

.sonder_artikel-read-more a {
    color: #007bff;
    text-decoration: none;
}

    .sonder_artikel-read-more a:hover {
        text-decoration: underline;
    }

.sonder_artikel-category-separator {
    margin: 0 5px; /* Abstand um den Separator */
    color: #999; /* Farbe des Separators */
    --margin-top: -16px;
}

.sonder_artikel-zitat {
    font-style: italic; /* Zitat kursiv darstellen */
    color: #666; /* Farbe des Zitats */
    --margin-top: -16px;
}

.rubrik-item {
    position: relative;
    padding-left: 10px; /* Platz für den Pfeil */
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d3d3d3; /* Hellgraue Trennlinie */
    font-weight: bold;
    color: #383838;
    font: normal normal 600 20px/23px "Lato" !important;
}

    .rubrik-item .rubrik-arrow {
        position: absolute;
        right: 10px; /* Abstand vom rechten Rand */
        top: 50%;
        transform: translateY(-50%);
        color: #000; /* Farbe des Pfeils */
        font-weight: bold;
    }

/* Sticky-Logo Styling */
.sticky-logo {
    display: none; /* Standardmäßig ausgeblendet */
    position: absolute; /* Absolut positioniert */
    top: 50%; /* Vertikal zentriert im Menü */
    transform: translateY(-50%);
    left: 10px; /* Abstand zum linken Rand */
    width: 50px; /* Breite des Logos */
    height: auto; /* Höhe proportional zur Breite */
    z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */
}


.menu-main {
    --position: sticky;
    /* +1 px verhindert das „Ruckeln“ beim Überblenden                       */
    --top: calc(var(--header-height) + var(--gap-fix));
    z-index: 999999999;
}

.advanced-search-link {
    position: absolute;
    bottom: -20px; /* Leicht unterhalb der Suchbox */
    right: 10px; /* Am rechten Rand der Suchbox */
    font-size: 14px; /* Etwas größere Schrift für bessere Lesbarkeit */
    font-weight: bold;
    color: #ca2026; /* Rotes Highlight für bessere Sichtbarkeit */
    transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; /* Sanfter Hover- und Sichtbarkeitseffekt */
}

    .advanced-search-link a {
        text-decoration: none;
        color: #ca2026; /* Hauptfarbe */
        padding: 6px 12px; /* Etwas mehr Abstand für eine komfortablere Größe */
        border-radius: 20px; /* Abgerundete Ecken für modernen Look */
        background-color: #fff; /* Weißer Hintergrund für Kontrast */
        box-shadow: 0 2px 6px rgba(202, 32, 38, 0.1); /* Weicher Schatten */
        display: inline-block;
        font-size: 14px;
        transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Sanfter Übergang */
    }

        .advanced-search-link a:hover {
            background-color: rgba(202, 32, 38, 0.1); /* Leichtes rotes Highlight beim Hover */
            box-shadow: 0 4px 15px rgba(202, 32, 38, 0.2); /* Stärkerer Schatten für Hover */
            transform: translateY(-5px); /* Etwas stärkeres Anheben für mehr Interaktivität */
        }

        .advanced-search-link a:active {
            transform: translateY(0); /* Rückkehr zum normalen Zustand beim Klicken */
        }

        .advanced-search-link a:focus {
            outline: none;
            box-shadow: 0 0 10px rgba(202, 32, 38, 0.3); /* Fokus-Effekt mit stärkerem Schatten */
        }

.advanced-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.custom-search-container {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px;
    --border: 1px solid #ccc;
    --border-radius: 5px;
    width: 100%;
    position: relative;
}

.custom-search-input {
    flex-grow: 1;
    padding: 8px 12px;
    border: none;
    outline: none;
    font-size: 16px;
}

/* Der Suchen-Button bleibt optisch gleich */
.custom-search-button {
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    --background-color: #0073e6;
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 5px;
}

/* Erweiterte Suche direkt rechts */
.advanced-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px;
}

/* Checkbox für erweiterte Suche */
.chk-advanced {
    cursor: pointer;
    font-size: 14px;
}

/* Button für erweiterte Suche */
.subscribe-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Button für erweiterte Suche ausblenden, falls nicht auf der Suchseite */
body:not(.suche-seite) .subscribe-button {
    display: none;
}

.search-highlight {
    background-color: #15C3A6;
    font-weight: bold;
}

.switch {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 32px;
    cursor: pointer;
    top: -3px;
    right: -12px;
}

@media (max-width: 991px) {
    .switch {
        top: 0;
        right: 0;
    }
}

.hidden-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    top: 49%;
    left: 0;
    right: 0;
    transform: translate(-1%, -35%);
    background-color: #ccc;
    transition: background-color 0.4s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
    height: 120%;
    padding: 0 10px;
    --box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

    .slider::before {
        content: "einfache Suche";
        position: absolute;
        right: 12px;
        transition: right 0.4s ease-in-out, left 0.4s ease-in-out;
        font: normal normal 600 14px/23px "Lato" !important;
    }

.switch.active .slider {
    background-color: #FFD700;
}

    .switch.active .slider::before {
        content: "erweiterte Suche";
        right: auto;
        left: 12px;
        font: normal normal 600 14px/23px "Lato" !important;
    }

.slider:after {
    content: "";
    position: absolute;
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 50%;
    transform: translateY(50%);
    background-color: white;
    transition: transform 0.4s ease-in-out;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.switch.active .slider:after {
    transform: translate(118px, 50%);
}

.switch:not(.active) .slider:before {
    transition: right 0.4s ease-in-out, left 0.4s ease-in-out;
}

.switch:not(.active) .slider:after {
    transition: transform 0.4s ease-in-out;
}


.login-link {
    color: #C03932;
    text-decoration: none; /* Standard-Unterstreichung entfernen */
    display: table;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon, Text und Pfeil */
    font-weight: bold; /* Für bessere Lesbarkeit */
    position: relative; /* Ermöglicht eine benutzerdefinierte Unterstreichung */
    font-family: "Lato", serif !important;
}

    .login-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px; /* Abstand zur Schrift */
        width: 100%;
        height: 2px;
        background-color: #C03932; /* Farbe der Unterstreichung */
    }

    .login-link i {
        margin-right: 5px; /* Abstand zwischen Icon und Text */
    }

    .login-link .arrow {
        font-weight: bold; /* Kräftigeres ">" */
        margin-left: 8px; /* Abstand zwischen Login-Text und Pfeil */
    }

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    --background-color: #15D0B1;
    padding-top: 7px;
    padding-right: 7px;
    padding-left: 7px;
    border-radius: 10px;
}

.search-iconmobile {
    position: absolute;
    left: 18px;
    top: 19px;
    font-size: 17px;
    color: #000;
    z-index: 200000;
}

.mobile-search {
    width: 100%;
    padding: 10px 10px 10px 40px; /* Platz für die Lupe */
    border-radius: 20px;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: white;
    color: black;
}


/* === Pop-up Menü Grundstruktur === */
.menu-popup {
    position: fixed;
    top: 50px; /* Dynamisch unter dem Hamburger-Menü */
    left: 10px;
    background-color: white;
    width: 90%;
    max-width: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    display: none;
    z-index: 9999999999;
    animation: fadeIn 0.3s ease-in-out;
}

    /* Pfeil über dem Menü */
    .menu-popup::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 20px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent white transparent;
        z-index: 1000;
    }

    /* Menü sichtbar machen */
    .menu-popup.active {
        display: block !important;
    }

/* === Menü Inhalt === */
.menu-popup-content {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
}

/* === Menü schließen Button === */
.menu-popup-close {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    float: right;
    cursor: pointer;
}

.menu-popup-back {
    display: none; /* Anfangs versteckt */
    background: none;
    border: none;
    font-size: 13pt; /* Schriftgröße */
    font-family: 'Lato', sans-serif; /* Schriftart */
    font-weight: 500; /* Bold */
    font-style: italic; /* Italic */
    color: #B7B7B7; /* Grauer Farbton */
    cursor: pointer;
    padding: 12px 15px; /* Mehr Innenabstand */
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #ddd;
    transition: color 0.3s ease;
    --display: flex;
    align-items: center;
    gap: 12px; /* Abstand zwischen Symbol und Text */
}

    /* Sichtbarer Button, wenn aktiv */
    .menu-popup-back.active {
        display: flex;
    }

    /* Hover-Effekt */
    .menu-popup-back:hover {
        color: #8A8A8A; /* Leicht dunklerer Grauton bei Hover */
    }


/* === Menü Liste === */
.menu-popup-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .menu-popup-list li {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

        .menu-popup-list li a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
            display: block;
        }

            .menu-popup-list li a:hover {
                color: #ca2026;
            }

.submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .submenu.hidden {
        display: none !important;
    }

/* === Overlay Hintergrund === */
.menu-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Leicht dunkler Hintergrund */
    display: none;
    cursor: pointer;
}

/* === Fade-in Animation === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.menu-popup-subscribe {
    display: block; /* Volle Breite */
    width: 100%; /* Über die gesamte Breite des Popups */
    background-color: #FFC501; /* Gelber Hintergrund */
    color: #140606; /* Schwarzer Text */
    font-size: 16px; /* Textgröße */
    font-weight: bold; /* Dickere Schrift */
    font-family: 'Lato', sans-serif; /* Einheitliche Schriftart */
    padding: 12px 0; /* Vertikale Polsterung für bessere Optik */
    border: none;
    border-radius: 25px; /* Kein abgerundeter Rand, da volle Breite */
    text-decoration: none; /* Kein Unterstreichen */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Hover-Effekt */
    .menu-popup-subscribe:hover {
        background-color: #FAD453; /* Etwas dunklerer Gelbton */
    }

.custom-icon {
    font-size: 24px; /* Größe anpassen */
}

.flex-container-3cols {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.colleft, .colcenter, .colright {
    flex: 1;
}

@media screen and (max-width: 991px) {
    .flex-container-3cols {
        flex-direction: column;
        align-items: center;
    }

    .colleft, .colcenter, .colright {
        width: 100%;
        text-align: left;
    }
}

.lblalternativ {
    margin-top: 10px;
    --padding: 10px;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    text-decoration: none;
}

/* Standard: Desktop = .desktop-only sichtbar, .mobile-only unsichtbar */
.desktop-only {
    display: inline-block;
}

.mobile-only {
    display: none;
}

/* Beispiel: Mobile bei max-width: 768px */
@media screen and (max-width: 768px) {

    /* Alles, was nur am Desktop sichtbar sein soll, verstecken */
    .desktop-only {
        display: none !important;
    }

    /* Mobile-Elemente einblenden */
    .mobile-only {
        display: inline-block !important;
    }

    /* Unteren Bereich komplett unsichtbar machen */
    .collapsibleContainer {
        display: none !important;
    }

    .mobile-dropdown {
        /* Rahmen + abgerundete Ecken */
        border: 1px solid #15D0B1;
        border-radius: 25px !important;
        padding: 4px 8px;
        /* Text- und Hintergrundfarbe */
        color: #333;
        background-color: #fff;
        /* ---- Firefox-spezifisch ---- */
        /* thumb und track-Farben */
        scrollbar-color: #15D0B1 #fff;
        /* 'auto', 'thin' oder 'none' */
        scrollbar-width: thin;
        /* ----- iOS-Smooth-Scrolling (optional) ----- */
        -webkit-overflow-scrolling: touch;
        font-size: 17px;
        font-weight: 600;
    }

        /* ---- WebKit-spezifisch: Chrome, Safari, Edge, Opera ---- */
        .mobile-dropdown::-webkit-scrollbar {
            width: 8px; /* Breite des Scrollbalkens */
        }

        .mobile-dropdown::-webkit-scrollbar-track {
            background: #fff; /* Hintergrund der Bahn */
        }

        .mobile-dropdown::-webkit-scrollbar-thumb {
            background-color: #15D0B1; /* Griff-Farbe */
            border-radius: 4px;
        }

    .mobile-at-text {
        margin-right: 8px;
        font-size: 20px;
    }

    .navigation-buttons {
        /* Visuell nach unten verschieben, ohne die äußeren Abstände zu vergrößern */
        transform: translateY(8px);
        position: relative;
    }

    /* Container relativ positionieren */
    .navigation-container {
        position: relative;
        padding-top: 2.5rem; /* Platz nach oben, damit der Button nicht überlappt */
    }

    .download-button-container {
        /* Absolut platzieren, oben rechts in der .navigation-container */
        position: absolute;
        top: -3.5rem; /* etwas Abstand vom oberen Rand */
        right: 1rem; /* etwas Abstand vom rechten Rand */
        z-index: 999;
    }
}

@media (max-width: 767px) {
    /* Bilder und SVG-Grafiken ausblenden */
    .subcribe-box .post-thumb,
    .subcribe-box .svg-top-left,
    .subcribe-box .svg-bottom-right {
        display: none !important;
    }

    /* Den Absatz mit "oder zum Inhaltsverzeichnis" ausblenden */
    .subcribe-box .install-text {
        display: none !important;
    }

    /* Den Container selbst ggf. so gestalten, dass er als 'grüne Box' sichtbar bleibt */
    .subcribe-box {
        background-color: #15C3A6; /* Beispiel: grüner Hintergrund */
        padding: 20px; /* etwas Innenabstand */
        text-align: center; /* Button mittig platzieren */
    }

        /* Download-Button soll sichtbar und ggf. zentriert bleiben */
        .subcribe-box .download-button {
            display: inline-block;
            /* weitere Button-Stile nach Wunsch */
        }
}

/* Standardmäßig: Desktop zeigt den Inhaltsverzeichnis-Wrapper, Mobile-Wrapper ausgeblendet */
#desktopInhaltsverzeichnisWrapper {
    display: block;
}

#mobileInhaltsverzeichnisWrapper {
    display: none !important;
}

/* Für mobile Auflösungen bis 767px z.B. */
@media (max-width: 767px) {
    #desktopInhaltsverzeichnisWrapper {
        display: none; /* Desktop-Inhaltsverzeichnis ausblenden */
    }

    #mobileInhaltsverzeichnisWrapper {
        display: block !important; /* Mobile-Ansicht mit ListView4 einblenden */
    }
}

/* Standard bleibt wie gehabt */
.newsletter-box {
    /* ggf. Desktop-Styles hier */
}

/* Mobil-Styles */
@media (max-width: 767px) {
    /* Gesamter Container soll automatisch die volle Breite nutzen */
    .newsletter-box,
    .newsletter-content {
        float: none; /* Falls irgendwo float gesetzt sein sollte */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentrierung */
        margin: 0 auto; /* Falls irgendwo eine margin dazwischen funkt */
        box-sizing: border-box; /* Sicherheitshalber, damit Padding richtig gezählt wird */
    }

        /* Alles außer den reinen Formularfeldern verstecken */
        .newsletter-box .newsletter-text,
        .newsletter-box .svg-left,
        .newsletter-box .col-caption,
        .newsletter-box .subscribe-box-new {
            display: none !important;
        }

        /* Optional: zentrierter Formularbereich */
        .newsletter-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    /* Nur das Formular */
    .newsletter-form {
        width: 90%; /* 90% der Gerätebreite */
        max-width: 400px; /* Optional ein Max-Limit */
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentriert Eingabefeld & Button */
        margin: 0 auto; /* Zentriert den Block, falls nötig */
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* Eingabefeld */
    .newsletter-input {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Button ggf. nach Wunsch stylen */
    .newsletter-button,
    .subscribe-button {
        margin: 0 auto;
    }
}



.enhanced-search-btn {
    display: flex;
    align-items: center;
    background-color: #ffc501;
    color: #000;
    padding: 3px 7px;
    --border-radius: 20px;
    --font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    margin-top: 12px;
}

    .enhanced-search-btn:hover {
        background-color: #e0b800;
    }

.download-disabled {
    opacity: 0.5; 
    cursor: not-allowed; 
}

.selectedTagsMobile {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block !important;
}

@media (min-width: 991px) {
    .selectedTagsMobile {
        display: none !important;
    }
}


@media (max-width: 991px) {
    #selectedTags {
        display: none !important;
    }
}


@media (min-width: 992px) {
    #selectedTagsMobile {
        display: none !important;
    }
}


.footermobile_info-box {
    width: 100%;
}

.footermobile_yellow-section {
    background-color: #ffc501; /* Gelber Bereich */
    color: #000; /* Schwarzer Text */
    text-align: center;
    padding: 20px 0;
    font-weight: bold;
    font-size: 22px;
}

.footermobile_green-section {
    background-color: #15D0B1; /* Grüner Bereich */
    color: #000; /* Schwarzer Text */
    text-align: center;
    padding: 40px 20px;
}

.footermobile_info-text p {
    margin-bottom: 20px;
    font-size: 18px;
}

.footermobile_subscribe-button {
    width: 300px;
    height: 56px;
    background: #FFC501;
    color: #140606;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    letter-spacing: 0;
    opacity: 1;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    margin: 0 auto; 
}



    .footermobile_subscribe-button:hover {
        background-color: #FAD453;
    }


.footer-mobile {
    display: none;
}

.footer-desktop {
    display: block;
}

@media (max-width: 1055px) {
    .footer-mobile {
        display: block; 
    }

    .button-and-logos {
        display: block;
    }

    .footer-desktop {
        display: none; 
    }
}

.search-result-item {
    transition: opacity 0.2s ease-in-out;
}

.slider.round {
    cursor: pointer; 
    user-select: none; 
}

#glossar-mobile-buttons {
    display: none;
}

@media screen and (max-width: 991px) {
    #glossar-mobile-buttons {
        position: relative;
        top: -33px;
        left: 0;
        right: 0;
        margin-bottom: -50px;
        background-color: #fff;
        padding: 10px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, opacity 0.3s ease;
        --z-index: 9999; 
        display:block;
    }

    .btn-glossar {
        display: block;
        width: 90%;
        max-width: 300px;
        margin: 0 auto 10px auto; 
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        border-radius: 9999px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .btn-white-border {
        background-color: #fff;
        color: #000;
        border: 2px solid #15D0B1;
    }

        .btn-white-border:hover {
            background-color: #15D0B1;
            color: #000; 
        }

    .btn-green-full {
        background-color: #15D0B1;
        color: #000;
        border: 2px solid #15D0B1;
    }

        .btn-green-full:hover {
            filter: brightness(90%); 
        }

    .big-page-caption-glossar {
        display: none;
    }
}

.big-page-caption-glossar {
    text-align: center;
    margin: 0px;
    font: normal normal 550 28px/23px "Lato" !important;
    color: grey;
}

.anchor-offset {
    display: block;
    height: 100px; 
    margin-top: -100px; 
    visibility: hidden;
}

.my-btn-yellow {
    display: inline-block;
    line-height: 40px;
    padding: 0px 30px;
    font-family: "Helvetica-Narrow", serif;
    color: #000 !important;
    background-color: #fedd00; 
    letter-spacing: 2px;
    margin: 0 10px 20px 0;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none; 
}

    .my-btn-yellow:hover {
        background-color: #ffdf32; 
        color: #111 !important;
        text-decoration: none;
    }

.cme-image-fix {
    top: -128%;
}

@media (max-width: 1055px) {

    .cme-image-fix {
        top: 0;
    }
}

.search-area {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    --margin-left: -200px !important;
}

.search-box {
    position: relative;
    width: 100%; 
    max-width: none; 
    display: flex;
    align-items: center;
    overflow: visible;
}

.search-input {
    flex: 1 1 450px; 
    min-width: 450px; 
    width: 100%; 
    padding: 10px 120px 10px 40px; 
    border: 1px solid #ccc;
    border-radius: 32px;
    font-size: 17px;
    background: #fff;
}


.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    font-size: 18px;
}

.advanced-controls {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .search-area {
        display: none;
    }
}
.detailsuche-results,
#resultList {
    position:absolute;             
    top:100%;                         
    left:0;  width:100%;
    --max-height:300px;          
    background:#fff;
    --border:1px solid #ccc;
    border-top:0;                    
    border-radius:0 0 3px 3px;  
    box-shadow:0 4px 8px rgba(0,0,0,.1); 
    overflow-y:auto;                 
    z-index:1000;   
}



/* Logo-Bild bekommt eine Maximalbreite, darf aber schrumpfen */
.logo-area img {
    height: auto; /* Seitenverhältnis beibehalten      */
    max-width: 300px; /* Ausgangsbreite (Desktop)          */
    width: 100%; /* … aber darf bis 100 % schrumpfen  */
}

/* Unter 620 px Viewport kleineres Limit setzen */
@media (max-width:620px) {
    .logo-area img {
        max-width: 200px; /* oder 180 px – nach Geschmack      */
    }
}

.atd-link {
    display: inline-block;
    background-color: #FFC501;
    border: none;
    color: #000;
    padding: 10px 10px;
    --margin-left: 8px;
    border-radius: 50px;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 17px;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .atd-link:hover {
        background-color: #FAD453;
    }

    .atd-link.active {
        background-color: #15C3A6;
        color: #fff;
        box-shadow: inset 0 0 0 2px #c4a300;
    }

@media (min-width: 992px) {
    .atd-link {
        background: none;
        color: #272727;
        font-weight: 600;
        font-style: normal;
        font-size: 20px;
        padding: 2px 6px;
        border-radius: 0;
        margin-left: 0;
        transition: none;
    }

        .atd-link:hover {
            background: none;
            color: #272727;
        }

        .atd-link.active {
            background: none;
            box-shadow: none;
            color: #272727;
        }
}

@media (max-width: 365px) {
    .atd-link {
        display: none !important; /* schlägt eventuell andere Display-Angaben */
    }
}

@media (max-width: 991px) {

    /* ► Container an den rechten Rand schieben */
    .atd-mobile-link,
    .utility-area {
        margin-left: auto; /* nimmt den verbleibenden Platz ein → rechts */
        display: flex;
        align-items: center;
    }

        /* ► etwas Abstand zwischen atd und Login */
        .utility-area .login-link {
            --margin-left: 12px;
        }

    /* ► Desktop-Abo-Button verstecken (falls noch sichtbar) */
    .subscribe-desktop {
        display: none !important;
    }
}

@media (max-width: 515px) {

    /* Haupt-Logo im Header */
    .logo-area .logo-link img {
        content: url('/images/logo.svg');
        height: 46px;
    }
}

.menu-main-inner {
    max-width: 1100px; /* bleibt, damit alles zentriert ist        */
    width: 100%; /* 👉 volle Breite nutzen                    */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo links / Menü rechts            */
    gap: 24px; /* Abstand Logo ↔ Menü                      */
}

    /* UL selbst als Flex-Container                                                    */
    .menu-main-inner > ul {
        flex: 1 1 0; /* nimmt allen restlichen Platz ein          */
        display: flex;
        justify-content: space-between; /* Punkte gleichmäßig verteilen         */
        align-items: center;
        padding: 0;
        margin: 0;
    }

        /* Verhindert, dass sehr lange Menübezeichnungen umbrechen                    */
        .menu-main-inner > ul > li {
            white-space: nowrap;
        }

/* Option: Bei sehr schmalen Desktops (≤1100 px) etwas zusammenrücken        */
@media (max-width:1120px) {
    .menu-main-inner {
        gap: 16px;
    }

        .menu-main-inner > ul {
            gap: 8px;
        }
}
/* ───────── 1) Grundzustand ───────── */
.logo-link img {
    width: auto; /* Seiten­verhältnis bleibt erhalten      */
    height: auto;
    max-height: 56px; /* Deckel für Desktop-Header              */
    margin-left: 10px;
}

/* kompaktes Logo erst einmal ausblenden */
.logo-sticky {
    display: none;
    width: 289px !important;
    height: 36px !important;
}

@media (max-width:991px){
    .logo-sticky {
        width: auto !important;
        height: auto !important;
    }
}


/* ───────── 2) Sticky-Modus ───────── */
.is-scrolled .logo-normal {
    display: none;
}
/* großes Logo ausblenden  */
.is-scrolled .logo-sticky {
    display: block;
}
/* kleines Logo zeigen     */

.is-scrolled .logo-link img {
    max-height: 40px; /* Logo im klebenden Header etwas kleiner */
}

/* ───────── 3) Responsive Kappen ───── */
@media (max-width:991px) { /* Tablet / kleines NB     */
    .logo-link img {
        max-height: 48px;
    }
}

@media (max-width:575px) { /* Phones                  */
    .logo-link img {
        max-height: 42px;
    }
}

/* (optional, falls PNG mit Freifläche genutzt wird)
.logo-link img{object-fit:contain;}
*/

.sondervariante_box {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding-top: 40px;
    margin-top: 175px;
    border-radius: 10px;
    max-width: 1100px;
    position: relative;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto; /* wichtig: behält Platz */
}

    /* Wenn ausgeblendet */
    .sondervariante_box.hide {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* height bleibt erhalten! */
    }

    .sondervariante_box.placeholder {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.sondervariante_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 70px;
}

.sondervariante_image {
    max-width: 220px;
    height: auto;
    transform: rotate(-5deg);
}

.sondervariante_textblock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 500px;
}

.sondervariante_headline {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.sondervariante_subline {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.sondervariante_paragraph {
    font-size: 16px;
    line-height: 1.5;
    max-width: 500px;
}

.sondervariante_boldstart,
.sondervariante_boldend {
    font-weight: bold;
}

.sondervariante_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.sondervariante_button {
    display: inline-block;
    padding: 17px 25px;
    background-color: #FFC501; /* Gelber Hintergrund */
    color: #140606; /* Dunkler Text */
    text-decoration: none;
    font-family: 'Lato', sans-serif; /* Schriftart */
    font-weight: 900; /* Black (Heavy) */
    font-style: italic; /* Italic-Stil */
    font-size: 17px;
    border-radius: 50px; /* Runde Ecken */
    --border: 2px solid #FFD700; /* Gelbe Umrandung */
    transition: all 0.3s ease-in-out; /* Sanfte Animation */
    margin-bottom: 30px; /* Position unverändert */
}


    .sondervariante_button:hover {
        background-color: #FAD453;
        color: #000;
    }

.sondervariante_app-logo {
    height: 29px;
    width: auto;
    margin-bottom: 29px;
}

.sondervariante_image-wrapper {
    align-self: flex-end; /* Bild wird unten im flex-container ausgerichtet */
}

.sondervariante_image {
    transform: rotate(-5deg) translateY(5px); /* leicht nach unten drücken */
}

.sondervariante_close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s ease;
}

    .sondervariante_close:hover {
        color: #000;
    }

input[id$="edt_suche"]:focus,
.search-input:focus  {
    outline: none !important; 
}

    input[id$="edt_suche"]:focus:not(:focus-visible) {
        outline: none !important; 
    }

input[id$="edt_suche"]:focus-visible {
    outline: 2px solid #15C3A6;
    outline-offset: 2px;
}

/* ─── Glossar-Accordion: Inhalt zähmen ───────────────────────── */
.accordion-content {
    max-width: 100%; /* nie breiter als die Spalte     */
    overflow-wrap: anywhere; /* bricht *jede* lange Zeichenkette */
    word-break: break-word; /* Fallback für ältere Browser    */
    hyphens: auto; /* Silbentrennung, falls möglich  */
}

    .accordion-content img,
    .accordion-content table {
        max-width: 100%; /* zu große Bilder / Tabellen skalieren */
        height: auto; /* Seitenverhältnis erhalten            */
    }

    .accordion-content pre {
        white-space: pre-wrap; /* Code-Blöcke dürfen umbrechen         */
    }

    .accordion-content p, h1 {
        padding-left:10px;
        padding-right: 10px;
    }

    .accordionContent p, h1 {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* -------- Accordion-Header: Grundlinie durchgehend -------- */
    .accordionHeader,
    .accordionHeaderSelected {
        --border-bottom: 1px solid #d3d3d3; /* Linie GANZ durch */
        margin: 0; /* evtl. Defaults neutralisieren   */
        padding: 0; /* wir padden nur das Innere div   */
    }

/* -------- Überschrift + Pfeil -------- */
.accordionHeader   .col-caption-white,
.accordionHeaderSelected .col-caption-white{
    position:relative;
    display:block;                     /* füllt 100 % der Headerbreite     */
    padding:10px 40px 10px 10px;       /* rechts Platz für Pfeil-Icon      */
    background:#fff;                   /* bleibt weiß                     */
    font:600 20px/23px "Lato",sans-serif;
    color:#140606;
    letter-spacing:2px;
    margin:0;                          /* das alte 20 px-Loch entfernen    */
}

/* Pfeil zu / aufgeklappt */
.accordionHeader   .col-caption-white::after,
.accordionHeaderSelected .col-caption-white::after{
    content:"\276F";
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%) rotate(90deg);   /* zu = runter */
    font-size:14px;
    color:#000;
    font-weight:bold;
}
.accordionHeaderSelected .col-caption-white::after{
    transform:translateY(-50%) rotate(-90deg);  /* offen = hoch */
}

.glossar-2col-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 20px;
    padding-left: 35px;
}

    .glossar-2col-header h2 {
        grid-column: 1 / 3;
        justify-self: center;
        text-align: center;
        margin: 0;
        font: normal normal 550 28px/23px "Lato", sans-serif !important;
        color: grey;
    }

@media screen and (max-width: 991px) {
    .glossar-2col-header {
        display: none;
    }
}

.rubriken-2col-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 20px;
}

    .rubriken-2col-header h2 {
        grid-column: 1 / 3;
        justify-self: center;
        text-align: center;
        margin: 0;
        font: normal normal 550 28px/23px "Lato", sans-serif !important;
        color: grey;
    }

@media screen and (max-width: 991px) {
    .rubriken-2col-header {
        display: none;
    }
}

.pdf-link-btn {
    background: none;
    border: none;
    color: #2979ff;
    text-decoration: underline;
    padding: 0;
    font-size: 1em;
    cursor: pointer;
    display: inline;
}

    .pdf-link-btn i {
        margin-left: 5px;
        font-size: 1em;
    }

.share-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}

    .share-modal.active {
        display: flex !important;
    }

.share-modal-content {
    background: #fff;
    padding: 28px 32px 18px 32px;
    border-radius: 12px;
    box-shadow: 0 2px 28px 0 rgba(0,0,0,0.18);
    min-width: 260px;
    min-height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

    .share-modal-content button {
        background: #15C3A6;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 8px 0;
        font-size: 1.1em;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background 0.2s;
    }

        .share-modal-content button#close-share {
            background: transparent;
            color: #222;
            border: none;
            position: absolute;
            right: 12px;
            top: 8px;
            font-size: 1.6em;
            margin-bottom: 0;
            cursor: pointer;
            box-shadow: none;
        }

@media (max-width: 500px) {
    .share-modal-content {
        width: 96vw;
        min-width: unset;
    }
}


.share-btn {
    background: #fff;
    border: 0px;
}

.fab {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFC501;
    color: #000;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform .15s;
}

    .fab:active {
        transform: scale(0.92);
    }

.fab-container,
#offcanvas {
    display: none;
}

@media (max-width: 991px) {

    .colright > .right-top,
    .colright > .right-bottom {
        display: none !important;
    }

    .fab-container {
        display: flex !important;
        position: fixed !important;
        right: 1.2rem;
        bottom: 1.2rem;
        flex-direction: column;
        gap: .9rem;
        z-index: 99999999999;
    }

    #offcanvas {
        display: block !important;
        position: fixed !important;
        top: 0;
        right: 0;
        width: 80vw;
        max-width: 330px;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 8px rgba(0,0,0,.25);
        transform: translateX(100%);
        transition: transform .35s ease;
        overflow-y: auto;
        z-index: 99999999999;
    }

        #offcanvas.open {
            transform: translateX(0);
        }
}

@media (min-width: 992px) {
    .fab-container,
    #offcanvas {
        display: none !important;
    }
}

.infoboxsuche {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-left: 5px solid #007ACC;
    background-color: #E6F4FF;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    color: #333;
    margin: 1em 0;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease, padding 0.2s ease;
}

    .infoboxsuche:hover {
        background-color: #D0EBFF;
    }

.infoboxsuche-icon {
    font-size: 1.4rem;
    margin-right: 0.75rem;
    color: #007ACC;
    flex-shrink: 0;
}

.infoboxsuche-text {
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.infoboxsuche-toggle {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.2rem;
    height: 1.2rem;
    background: none;
    border: none;
    cursor: pointer;
    pointer-events: auto;
}

    .infoboxsuche-toggle::before {
        content: "▲";
        display: block;
        font-size: 1.2rem;
        color: #007ACC;
        line-height: 1;
    }

.infoboxsuche.collapsed {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    overflow: hidden;
    cursor: pointer;
}

    .infoboxsuche.collapsed .infoboxsuche-text,
    .infoboxsuche.collapsed .infoboxsuche-toggle {
        display: none !important;
    }

    .infoboxsuche.collapsed .infoboxsuche-icon {
        margin: 0 !important;
    }

@media (max-width: 767px) {
    #lbl_adv_mobil .infoboxsuche {
        padding: 8px 10px;
        margin: 6px 0;
    }

        #lbl_adv_mobil .infoboxsuche.collapsed {
            padding: 0 !important;
            margin: 0 !important;
        }
}


@media (max-width: 767px) {
    .utility-area .login-link {
        width: 40px;
        overflow: hidden;
        text-indent: -9999px;
        position: relative;
        display: inline-block;
    }

        .utility-area .login-link i {
            text-indent: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
        }

        .utility-area .login-link span.login-arrow {
            display: none;
        }
}

#selectedTags,
#selectedTagsMobile { /* Default */
    display: none;
}

body.suche-tags #selectedTags,
body.suche-tags #selectedTagsMobile {
    display: flex; /* wenn Tags aktiv */
}

/* Mini-Enter-Button nur auf Desktop */
@media (min-width: 992px) {
    .search-box {
        position: relative;
    }

        .search-box .enter-hint {
            position: absolute;
            right: 44px; /* vor dem Advanced-Switch */
            top: 50%;
            transform: translateY(-50%);
            height: 26px;
            min-width: 26px;
            padding: 0 6px;
            border-radius: 6px;
            border: 1px solid #d9d9d9;
            background: #FFC501;
            font: 600 12px/1 "Lato", sans-serif;
            color: #444;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            box-shadow: 0 1px 1px rgba(0,0,0,.04);
            transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
            z-index: 2;
        }

            .search-box .enter-hint:hover {
                background: #f7f7f7;
                border-color: #cfcfcf;
            }

            .search-box .enter-hint:active {
                transform: translateY(-50%) scale(.98);
            }

            .search-box .enter-hint[hidden] {
                display: none !important;
            }
}

/* Auf kleineren Screens: Button nie zeigen */
@media (max-width: 991.98px) {
    .search-box .enter-hint {
        display: none !important;
    }
}

/* === Fix: Rechte Spalte mit sticky Feedback ohne Überlappung === */
@media (min-width: 992px) {
    /* Falls irgendwo overflow versteckt war: für sticky sichtbar lassen */
    .cols, .colright {
        overflow: visible !important;
    }

        /* Rechte Spalte als Spalte organisieren */
        .cols .colright {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important; /* Abstand zwischen right-top und right-bottom */
        }

            /* Feedback-Box: echtes Sticky von OBEN, nicht von unten */
            .cols .colright .right-bottom {
                position: sticky !important;
                top: 16px !important; /* Abstand unter Header / Navbar anpassen */
                bottom: auto !important; /* alte bottom-Variante deaktivieren */
                z-index: auto !important; /* keine Überlagerung über right-top */
                align-self: stretch !important; /* volle Spaltenbreite */
                width: 100% !important;
            }

                /* Inhalt der Feedback-Box auf Spaltenbreite, nicht schmaler */
                .cols .colright .right-bottom .feedback_container,
                .cols .colright .right-bottom .feedback_box {
                    max-width: none !important; /* nicht auf 400px begrenzen */
                    width: 100% !important;
                }
}

/* Mobile: kein sticky – das Offcanvas übernimmt */
@media (max-width: 991.98px) {
    .cols .colright .right-bottom {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }
}

/* Safety: alte "fixed"-Fallback-Klassen neutralisieren, falls noch irgendwo gesetzt */
.ff-fixed,
.fixed-feedback {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
}

/* --- Rechte Spalte: Sticky-Feedback mit internem Scroll --- */
@media (min-width: 992px) {
    .cols, .colright {
        overflow: visible !important; /* nötig für sticky */
    }

        .cols .colright {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
        }

            /* Die Feedback-Box klebt oben */
            .cols .colright .right-bottom {
                position: sticky !important;
                top: var(--sticky-offset, 16px) !important;
                bottom: auto !important;
                align-self: stretch !important;
                width: 100% !important;
                z-index: 0 !important; /* keine Überdeckung über right-top */
            }

                /* WICHTIG: Box selbst darf höher sein, aber intern scrollen */
                .cols .colright .right-bottom .feedback_container {
                    max-height: calc(100vh - var(--sticky-offset, 16px) - 16px) !important;
                    overflow: auto !important;
                    box-sizing: border-box;
                }

                /* Falls Unterboxen eigene Breitenbegrenzungen hatten */
                .cols .colright .right-bottom .feedback_box {
                    max-width: none !important;
                    width: 100% !important;
                }
}

/* Mobile: kein sticky (Offcanvas übernimmt) */
@media (max-width: 991.98px) {
    .cols .colright .right-bottom {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }
}

/* === Rechte Spalte: Nur die Feedback-Box ist sticky und klebt am Menü === */
@media (min-width: 992px) {
    .cols, .colright {
        overflow: visible !important; /* nötig für sticky */
    }

        /* rechte Spalte soll volle Breite behalten */
        .cols .colright {
            position: relative;
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
            /* wird via JS auf linke Spaltenhöhe gestreckt: */
            min-height: var(--right-min-height, auto) !important;
        }

            /* die erste (grüne) Box bleibt NICHT sticky */
            .cols .colright .right-top {
                position: static !important;
            }

            /* Feedback-Panel: sticky oben, volle Breite, kein Überlappen */
            .cols .colright .right-bottom {
                position: sticky !important;
                top: var(--sticky-offset, 16px) !important; /* Abstand unter Menüleiste */
                bottom: auto !important;
                align-self: stretch !important;
                width: 100% !important;
                z-index: 0 !important; /* nicht über right-top legen */
            }

                /* Langer Inhalt: nur INNEN scrollen, Box selbst bleibt kleben */
                .cols .colright .right-bottom .feedback_container {
                    max-height: calc(100vh - var(--sticky-offset, 16px) - 16px) !important;
                    overflow: auto !important;
                    box-sizing: border-box;
                }
}

/* Mobile: kein sticky (Offcanvas übernimmt) */
@media (max-width: 991.98px) {
    .cols .colright .right-bottom {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }
}

/* Eventuelle alte Fix/Fallback-Klassen neutralisieren */
.ff-fixed,
.fixed-feedback {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}
/* === Rechter Sticky-Feedback-Fix (Desktop) === */
@media (min-width: 992px) {

    /* 1) Container dürfen sticky nicht abschneiden */
    .cols, .colright {
        overflow: visible !important;
    }

        /* 2) right-top darf NICHT wachsen (sonst drückt er right-bottom nach unten) */
        .cols .colright .right-top {
            flex: 0 0 auto !important;
        }

        /* 3) right-bottom klebt OBEN unterm Menü, nie unten */
        .cols .colright .right-bottom {
            position: sticky !important;
            top: var(--sticky-offset, 16px) !important;
            bottom: auto !important; /* Bottom-Sticky neutralisieren */
            z-index: 1 !important;
            align-self: stretch !important;
            width: 100% !important;
        }

            /* 4) Lange Inhalte: innen scrollen, Box bleibt kleben */
            .cols .colright .right-bottom .feedback_container {
                max-height: calc(100vh - var(--sticky-offset, 16px) - 16px) !important;
                overflow: auto !important;
                box-sizing: border-box;
            }

            /* 5) Box nicht schmal machen */
            .cols .colright .right-bottom .feedback_box {
                max-width: none !important; /* überschreibt 400px */
                width: 100% !important;
            }

        /* 6) Rechte Spalte auf Höhe der linken strecken (per JS-Variable) */
        .cols .colright {
            min-height: var(--right-min-height, auto) !important;
        }
}

/* 7) Alte Fixed-Fallbacks endgültig neutralisieren */
.ff-fixed,
.fixed-feedback {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
}

:root {
    /* Fallback: 1vh, wird per JS mit --vh überschrieben */
    --vh: 1vh;
    --header-offset: 0px;
    --footer-h: 0px;
}

/* Die ganze Seite (alles zwischen Header und Footer) soll mind. die Resthöhe einnehmen */
.page {
    min-height: calc((var(--vh) * 100) - var(--header-offset) - var(--footer-h));
}

/* Der eigentliche Inhaltsbereich soll die Resthöhe abzüglich des Footers bekommen */
.wrapper {
    min-height: calc(100vh - var(--header-offset) - var(--footer-h));
}

/* Sicherheitshalber keine Sonder-Margins am Footer */
.custom-footer {
    margin-top: 0;
}

/* 1) Verhindere, dass die letzte Section unten extra Abstand produziert */
.wrapper > .wrap > :last-child,
.wrapper > :last-child {
    margin-bottom: 0 !important;
}

/* 2) Verhindere Margin-Collapse im Inhaltscontainer (ohne Layout-Umbau) */
.wrapper, .wrap {
    display: flow-root; /* block formatting context -> keine zusammenfallenden Außenabstände */
    box-sizing: border-box;
}

/* 3) Optional: winziger Innenabstand statt Außenabstand am Ende, damit es nie "klebt" */
.wrap {
    --padding-bottom: 8px;
}

/* 4) Nutze dvh (falls unterstützt) statt 100vh für mobile Browser, die die URL-Leiste einrechnen */
@supports (height: 100dvh) {
    .page {
        min-height: calc(100dvh - var(--header-offset));
    }

    .wrapper {
        min-height: calc(100dvh - var(--header-offset) - var(--footer-h));
    }
}

/* 1) Neutrale Basis für Inputs (Login + Profile) */
.form-field,
.form-input {
    background: #fff; /* kein hellblau */
    color: #111;
    caret-color: #111; /* gut sichtbarer Cursor */
}

    /* 2) Sichtbare Text-Markierung (Selection) */
    .form-field::selection,
    .form-input::selection,
    input::selection,
    textarea::selection {
        background: #15C3A6; /* deine Brand-Farbe */
        color: #fff;
    }

    .form-field::-moz-selection,
    .form-input::-moz-selection,
    input::-moz-selection,
    textarea::-moz-selection {
        background: #15C3A6;
        color: #fff;
    }

    /* 3) Fokus soll NICHT die Fläche einfärben */
    .form-field:focus,
    .form-input:focus {
        background-color: #fff !important;
    }

/* 4) Chrome/Edge: Autofill-Hintergrund überschreiben */
input.form-field:-webkit-autofill,
input.form-field:-webkit-autofill:hover,
input.form-field:-webkit-autofill:focus,
textarea.form-field:-webkit-autofill,
textarea.form-field:-webkit-autofill:hover,
textarea.form-field:-webkit-autofill:focus,
input.form-input:-webkit-autofill,
input.form-input:-webkit-autofill:hover,
input.form-input:-webkit-autofill:focus,
textarea.form-input:-webkit-autofill,
textarea.form-input:-webkit-autofill:hover,
textarea.form-input:-webkit-autofill:focus {
    /* weißes “Repaint” über die Autofill-Fläche legen */
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #111 !important;
    caret-color: #111 !important;
    transition: background-color 9999s ease-out 0s; /* verhindert Flash */
}

/* 5) Für dunkle Inputs (falls irgendwo nötig) – Auswahl bleibt kontrastreich */
input[disabled],
textarea[disabled] {
    -webkit-text-fill-color: #666 !important;
}

/* Keine Lücke zwischen Info-Box und Footer */
.info-box {
    margin-bottom: 0 !important;
}

.custom-footer {
    margin-top: 0 !important;
}

/* Sicherheit: keine Margen-Kollision davor/danach */
.info-box, .custom-footer {
    display: block;
}


.offcanvas-close {
    position: absolute; /* bei Bedarf anpassen, z.B. relativ zum Offcanvas-Container */
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFC501; /* wie .atd-link */
    border: none;
    color: #000;
    border-radius: 50px; /* pill / rund wie .atd-link */
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 0 0 transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

    .offcanvas-close:hover,
    .offcanvas-close:focus-visible {
        background-color: #ffd84a; /* leicht heller beim Hover */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
        outline: none;
        transform: scale(1.03);
    }

    .offcanvas-close:active {
        transform: scale(0.96);
    }

.menu-main ul > li.menu-item-has-children > a {
    position: relative;
    padding-right: 14px; 
}

    .menu-main ul > li.menu-item-has-children > a::after {
        content: "▾"; 
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        opacity: 0.6; 
        pointer-events: none;
    }