/*
Theme Name: divi child
Version: 1.0
Description: A child theme of Divi
Template: Divi
Author: Administrator
Text Domain:  divi-child
*/

/*** !!! LISTEN-STYLINGs, die schon mal erstellt wurden und aktuell nicht genutzt werden, sind in der alten css style-alt.css - diese sind bereits mit KI optimiert!!! ***/

/****** --- Allgemeine Farbpalette und Variablen --- ******/
:root {
    --color-white-off: #fffdfc; /* Seitenhintergrundfarbe */
    --color-dark-grey: #3d3d3d;
    --color-light-grey: #a9a9a9;
    --color-lightlight-grey: #f0f0f0;
    --color-dark-lila: #483d89; /* dunkelpurple, dunkelblau */
    --color-grell-lila: #ba84fe;
    --color-light-lila: #f3eafd;
    --color-light-lila-2: #f7f2fd; /*etwas heller als light-lila*/
    --color-dark-pink: #e8609a; /* Highlight Farbe */   
    --color-light-pink: #e8609a; /* Akzent und H1 Überschrift */ 
    --color-dark-gruen: #51a8a1;
    --color-light-gruen: #edf6f5;
    --color-gold-accent: #d9ac08;
    --color-gold-light: #faf5e1;
    --color-light-rose: #fcf2f9;
    --color-light-rose-2: #fceff8; /*etwas dunkler als light-rose*/
    --color-light-blau: #c0d3f4;
    --color-light-blau-d: #b1c8f2; /*etwas dunkler als light-blau*/
    --color-light-blau-2: #e7eefb; /*etwas heller als light-blau*/
    --color-light-blau-3: #eef3fc; /*etwas heller als light-blau-2*/
    --color-scroll-top-bg-initial: #5a5094;
}

/****** --- Schriftarten einbinden --- ******/
/****** !! Raleway Medium und Raleway Bold werden als critical CSS geladen !! ******/
@font-face {
    font-family: "Raleway-Regular";
    font-display: swap;
    font-weight: 400; /* oder 400 */
    font-style: normal;
    src: url("/wp-content/uploads/et-fonts/Raleway-Regular.woff2") format("woff2"),
         url("/wp-content/uploads/et-fonts/Raleway-Regular.woff") format("woff");
}

@font-face {
    font-family: "Raleway-SemiBold";
    font-display: swap;
    font-weight: 600; /* oder 600 */
    font-style: normal;
    src: url("/wp-content/uploads/et-fonts/Raleway-SemiBold.woff2") format("woff2"),
         url("/wp-content/uploads/et-fonts/Raleway-SemiBold.woff") format("woff");
}

#main-header { min-height: 67px !important;}

#main-header {
    position: relative;
    background-color: #fffdfc !important; /* Weißer Hintergrund */
    margin: 0;
    padding: 0;
    width: 100% !important;
    background-image: url('/wp-content/uploads/2023/11/background5.png');
    background-repeat: repeat-x;
    background-position: top left;
    background-size: auto;
}

#page-container {
    padding-top: 80px !important;
}

/* Goldener Streifen oben am Rand und Hintergrundfarbe */
.header-background {
    width: 100%;
    height: 67px;
    border-top: 8px solid var(--color-light-lila);
    border-image: url('/wp-content/uploads/2023/11/golden-strip-new.svg') 25% round;
    background-color: var(--color-light-lila);
    border-color: var(--color-light-lila); /* Fallback border color */
    transform: skewY(-1deg);
    transform-origin: top right;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-background-clip: content-box;
    background-clip: content-box;
    -webkit-transform-style: preserve-3d;
    will-change: transform; /* Hint für Browser, dass sich diese Eigenschaft ändert */
}

#logo {
    margin-bottom: 10px !important;
}

/* NAVI */

#top-menu-nav li a {
    font-weight: 700 !important; /* Explizit als fett definieren */
}

/* Styling NAVI link hover - außer current link */
#top-menu-nav li a {
    opacity: 1 !important;
    position: relative;
    padding-bottom: 10px !important;
}

.nav li ul {
    border-color: var(--color-dark-lila) !important;
}

.et_header_style_left #et-top-navigation {
    padding-top: 21px !important;
}

.et_header_style_left #et-top-navigation nav > ul > li > a {
    padding-bottom: 10px !important;
}

/* Current link NAVI andere Schriftfarbe */
#main-header #top-menu li.current-menu-item > a {
    color: var(--color-gold-accent) !important;
}

#top-menu-nav li a:after {
    content: '';
    display: block;
    border-bottom: 3px solid var(--color-gold-accent);
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#top-menu-nav li:hover a:not(.current-menu-item)::after,
#top-menu-nav li a:focus:not(.current-menu-item)::after,
#top-menu-nav li a:active:not(.current-menu-item)::after {
    transform: scaleX(1);
}

/* Entfernt Header Bottom Bar */
#main-header.et-fixed-header,
#main-header {
    box-shadow: none !important;
}

/* --- Media Queries für Header --- */
@media (max-width: 980px) {
    #main-header {
        max-height: 60px !important;
    }
    .et_header_style_left #et-top-navigation {
        padding-top: 15px !important;
    }
    .et_header_style_left .logo_container {
        padding-top: 0 !important;
        margin-top: -8px !important;
    }
     .et_pb_column .et_pb_row_inner, .et_pb_row_0 {
      padding: 10px 0 30px 0;
  }
}

@media (min-width: 1900px) {
    .et_header_style_left #et-top-navigation {
        padding-top: 25px !important;
    }
    .et_header_style_left .logo_container {
        padding-top: 3px !important;
    }
}

@media (min-width: 2100px) {
    .header-background {
        min-height: 90px !important;
    }
}

@media (min-width: 3000px) {
    .header-background {
        min-height: 95px !important;
    }
}

@media (min-width: 4000px) {
    .header-background {
        min-height: 100px !important;
    }
}

/****** ANFANG MOBILES MENÜ ******/
@media (max-width: 980px) {
    .mobile_menu_bar::before {
        color: var(--color-dark-lila) !important;
    }
    #main-header .et_mobile_menu,
    .et_mobile_menu {
        background-color: #fffdfc !important;
        border-top: 0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
        z-index: 100 !important;
    }

    /* Menü volle Breite */
    .container.et_menu_container {
        width: calc(100% - 60px);
    }
    .et_mobile_menu {
        margin-left: -30px;
        padding: 5%;
        width: calc(100% + 60px);
    }

    /* Menü volle Höhe - Animation entfernen, um Delay zu verhindern */
    .mobile_nav.opened .et_mobile_menu {
        display: block !important;
    }

    /* Zentrieren der li und Stylen */
    .et_mobile_menu li {
        text-align: center !important;
        border-radius: 100px;
        overflow: hidden;
        margin-bottom: 15px !important;
    }
    .et_mobile_menu li li,
    .et_mobile_menu li ul {
        padding-left: 0 !important;
    }
    .et_mobile_menu li a {
        border-bottom: 0 !important;
        font-size: 16px;
    }

    /* Wort "MENÜ" anzeigen, wenn Menü geschlossen ist */
    .mobile_menu_bar:after {
        content: "MENÜ";
        position: relative;
        color: var(--color-dark-lila) !important;
        cursor: pointer;
        font-size: 16px;
        vertical-align: text-top;
    }

    /* 3 Striche ausblenden, wenn Menü geschlossen ist */
    .mobile_menu_bar:before {
        opacity: 0;
    }

    /* Kreuz anzeigen, wenn Menü geöffnet ist */
    .mobile_nav.opened .mobile_menu_bar:before {
        content: '\4d';
        color: var(--color-gold-accent) !important;
        opacity: 1;
    }

    /* Wort "MENÜ" wird nicht angezeigt, wenn Menü geöffnet ist */
    .mobile_nav.opened .mobile_menu_bar:after {
        opacity: 0;
    }

    /* Schrift in gross und Branding Farbe */
    ul#mobile_menu.et_mobile_menu a,
    ul#top-menu a {
        text-transform: uppercase;
        color: var(--color-dark-lila) !important; /* Nutzt CSS-Variable */
    }

    /* Aktueller Link andere Schriftfarbe */
    .mobile_nav ul#mobile_menu .current_page_item > a {
        color: var(--color-gold-accent) !important; /* Nutzt CSS-Variable */
    }

    /* Hintergrundfarbe Links */
    .et_mobile_menu li a {
        background-color: var(--color-light-lila) !important; /* Nutzt CSS-Variable */
    }
    /* Header oben fixieren */
    .et_fixed_nav #main-header {
        position: fixed !important;
        top: 0 !important;
    }
    .et_fixed_nav #page-container {
        padding-top: 80px !important; 
    }
}
/****** ENDE MOBILES MENÜ ******/

/****** ANFANG ALLGEMEINES ******/
/* Hintergrundfarbe im Content-Bereich */
body,
#main-content,
.page.et_pb_pagebuilder_layout #main-content,
.et_pb_section {
    background-color: #fffdfc;
}

/* Abstand beginnender Text zur Navi */
body:not(.et-tb) #main-content .container,
body:not(.et-tb-has-header) #main-content .container {
    padding-top: 34px !important;
}

/* Page-Builder-Seiten: Abstand beginnender Text zur Navi anpassen an das Layout von NICHT-Page-Builder-Seiten und im Footer*/
body.et_pb_pagebuilder_layout #main-content {margin-top: 0 !important;}
body.et_pb_pagebuilder_layout #main-content {margin-bottom: 35px !important;}

@media (max-width: 980px) {
    .et_pb_row_inner, .et_pb_row_0 {
        padding: 10px 0 30px 0;
    }
    body:not(.et-tb) #main-content .container,
    body:not(.et-tb-has-header) #main-content .container {
        padding-top: 21px !important;
    }
}

@media (max-width: 767px) {
    body:not(.et-tb) #main-content .container,
    body:not(.et-tb-has-header) #main-content .container {
        padding-top: 12px !important;
    }
}

.ulohnepadding ul {padding: 0 0 0 0;
}

ul li:not(:last-child) {
    margin-bottom: 12px; /* Oder dein gewünschter Wert */
}

/* Texte kleiner */
.txtkleiner p {
  font-size: 14px !important;
}

/****** ENDE ALLGEMEINES ******/

/**** SALES PAGE ****/
.sales-page-text-klein p {
    font-size: 14px !important;
    line-height: 1.6em;
}
.sales-page-text-klein p a {
    color: #3d3d3d !important;
}

.sales-page-text-link p a {
    color: #3d3d3d !important;
}

/* Header wegmachen */
.page-id-279183  #page-container, .page-id-280200 #page-container, .page-id-280877 #page-container, .page-id-281093 #page-container, .page-id-282337 #page-container, .page-id-282992 #page-container {  padding-top:  0  !important;  }

@media (max-width: 980px) {
  .page-id-279183 .et_pb_row_0 {  padding-top:  0  !important;  }
  .page-id-279183 .et_pb_section_0 .et_pb_column { margin-bottom: 5px;} 
}

@media only screen and (max-width: 767px) {
  .page-id-279183 .et_pb_section_1.et_pb_section {
    padding-top: 34px !important;
  }
}

/****** ENDE SALES PAGE ******/

/****** ANFANG BREADCRUMB NAVI ******/
.breadcrumb {
  font-size: 15px !important;
  line-height: 1.5em;
  margin-top: 10px !important;
}
.breadcrumb-post {
  font-size: 15px !important;
  line-height: 1.5em;
}
.breadcrumb a,
.breadcrumb-post a {
  color: var(--color-dark-grey);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .breadcrumb {
    margin-top: 0 !important;
  }
}
@media (max-width: 400px) {
  .abstandueberseite {
    padding-left: 16px !important;
  }
}

@media (min-width: 2100px) {
  .breadcrumb {
    margin-top: 40px !important;
  }
  .breadcrumb-post {
    margin-top: 37px !important;
  }
}
/****** ENDE BREADCRUMB NAVI ******/

/****** ANFANG HEADER ******/

/****** !!! ALLE ANDEREN HEADER ANGABEN WERDEN ALS CRITICAL CSS GELADEN !!! ******/

/* Abstand oben für Admin-Bar */
.admin-bar #main-header {
    top: 32px !important;
}
#wpadminbar {
    z-index: 999999 !important; /* Hoher Wert, um Überlappungen zu vermeiden */
}
/****** ENDE HEADER ******/

/****** ANFANG MOBILES MENÜ ******/

/****** !!! WIRD ALS CRITICAL CSS GELADEN !!! ******/

/****** ENDE MOBILES MENÜ ******/

/****** ANFANG BREADCRUMB NAVI ******/

/****** !!! WIRD ALS CRITICAL CSS GELADEN !!! ******/

/****** ENDE BREADCRUMB NAVI ******/

/****** FOOTER ******/
/* Footer goldenes Images */
#main-footer {
     border-image-source: url('/wp-content/uploads/2023/11/golden-strip-new.svg');
     border-image-slice: 1;  /* Geeignet für ein einzelnes Bild, das über die Breite gestreckt wird */
     border-image-repeat: repeat; /* Sicherstellen, dass es wiederholt wird */
     border-top: 8px solid transparent;
     background-color: transparent; /* Keine Hintergrundfarbe, die es verdecken könnte */
   }

#footer-info a:hover {
    opacity: 1.0;
}

/* Footer alle Spalten Styling */
.footer-widget .et_pb_widget {
    float: none !important;
}

/* Footer Text Copyright, Datenschutz etc. kleiner */
#footer-info {
    font-size: 13px !important;
}
#footer-info a {
    text-decoration: none;
}

/* Abstand zwischen Widget 2 und 3 */
#block-16 {
    margin-bottom: 15px !important;
}

/* Maskottchen Ausrichtung zentriert */
#block-10 .aligncenter,
#block-10 > img.image {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important; /* Falls Text im Bildcontainer */
    float: none; /* Überschreibt mögliche Floats */
}
#block-10 > img.image {
    width: 300px; /* Nur hier, wenn es um die Bildgröße geht */
}

/* Footer Widget Texte anpassen */
#block-17 p,
#block-16 p {
    color: #d9ac08 !important;
    text-align: center;
     max-width: 600px !important;
      display: block !important;
    margin: 0 auto !important;
}
#block-16 p {
    font-size: 24px !important;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.7em !important;
}

/* --- Media Queries für Footer --- */
@media (max-width: 767px) {
    #footer-widgets .footer-widget .fwidget,
    #footer-widgets .footer-widget:nth-child(1) {
        margin-bottom: 15px !important;
    }
    #footer-widgets .footer-widget:nth-child(2) {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 479px) {
    #footer-widgets .footer-widget:nth-child(n),
    .footer-widget .fwidget {
        margin-bottom: 0 !important;
    }
    #block-10 .wp-block-image img {
        margin-bottom: 20px !important;
    }
}
/****** ENDE FOOTER ******/

/****** ANFANG LINKS ******/
/* focus + active stylen für Keyboardnutzung (Accessibility) und auf mobilen Geräten */
a:focus:not(.et_pb_button),
a:active:not(.et_pb_button) {
  background-color: var(--color-light-lila) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}


/* Umbruch der Links */
a {
    overflow-wrap: break-word; /* Modern */
    word-wrap: break-word;     /* Fallback */
    word-break: normal;        /* Sicherstellen, dass es kein 'break-all' ist */
}
/* Links im Contentbereich */
.single .entry-content a,
.page .entry-content a,
.search-results .et-boc a {
  text-decoration: underline;
}
/* Links in der Breadcrumb im Contentbereich */
.single .entry-content .breadcrumb a,
.page .entry-content .breadcrumb a {
  text-decoration: underline; /* Dies überschreibt die vorherige Regel für Breadcrumb-Links */
}
/****** ENDE LINKS ******/

/****** ALLGEMEINES ******/

/********* DAS WIRD ALLES ALS CIRTICAL CSS GELADEN ********/
/* Hintergrundfarbe im Content-Bereich */
/* Abstand beginnender Text zur Navi */
/* Page-Builder-Seiten: Abstand beginnender Text zur Navi anpassen an das Layout von NICHT-Page-Builder-Seiten und im Footer*/
/*@media (max-width: 980px) 
/*@media (max-width: 767px) 
/*.main_title
/* macht normalen Text größer und fetter und andersfarbig - NUR AUF DER ÜBER-SEITE: .bigger-45-rosa, .bigger-26-purple, .bigger-26-rosa
*/
/********* ENDE: DAS WIRD ALLES ALS CIRTICAL CSS GELADEN ********/

#main-content {
    margin-bottom: 35px !important;
}

/* Outdated Browser Meldung */
.outdatedbr {
    max-width: 300px !important;
    background-color: #f44336;
}
.outdatedbr p {
    color: white;
    padding: 7px 7px 3px 7px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1.2em !important;
}

/* macht normalen Text größer und fetter oder/und andersfarbig */

.bigger-23-gold p {
  color: var(--color-gold-accent) !important;
  font-size: 23px !important;
  font-weight: 600;
}
.bigger-20-gold p {
  color: var(--color-gold-accent) !important;
  font-size: 20px !important;
  font-weight: 600;
}
.bigger-23-rosa p {
  color: var(--color-light-pink) !important;
  font-size: 23px !important;
  font-weight: 600;
}
.bigger-23-purple p {
  color: var(--color-dark-lila) !important;
  font-size: 23px !important;
  font-weight: 600;
}
.bigger-26-gold p {
  color: var(--color-gold-accent) !important;
  font-size: 26px !important;
  font-weight: 600;
}
.bigger-26-rosa p {
  color: var(--color-light-pink) !important;
  font-size: 26px !important;
  font-weight: 600;
}

.fett26 p {font-weight: 600; font-size: 26px !important;}

.highlight-gold {
  color: var(--color-gold-accent) !important;
  font-size: 23px !important;
  font-weight: 600;
}

.h1-purple h1 {
  color: var(--color-dark-lila) !important;
  font-size: 28px !important;
  font-weight: 600;
}

/* Schriftart für Pre-Tags */
pre {
    font-weight: 500 !important;
}

/* Button */
.et_pb_button, .et_pb_button:hover {
    font-weight: 700 !important;
    font-size: 18px !important;
    border-radius: 8px !important;
}
.et_pb_button:hover {
  background-color: #b89207 !important; /* Hier die dunklere Farbe für den Hover */
}

.button_textlink {
  display: inline-block;
  text-align: center;
}

/* Bold/Strong Text Shadow */
strong,
b {
    text-shadow: 0.5px 0;
    letter-spacing: 0.5px;
}

/* Border-Color für Search Form, Pricing List, Blockquote */
.et-search-form,
.et_pb_pricing li::before,
blockquote {
    border-color: var(--color-dark-lila) !important; /* Nutzt CSS-Variable */
}

/* Div mit runden Ecken oben */
.div_top_round {
    border-radius: 50% 50% 2px 2px; /* Top-right, Top-left, Bottom-right, Bottom-left */
    border-top: 35px solid var(--color-light-lila); /* Nutzt CSS-Variable */
}

/* Text Highlight mit gepunkteter Linie */
.text-highlight-dotted {
    border-bottom: 4px dotted var(--color-dark-grey);
    padding-bottom: 6px;
}

/* Bild drehen */
.wp-image-274791 {
    transform: rotate(3deg);
}

/* Text Hintergrund Farbe (für Markierungen) */
mark.hellgold,
mark.hellblau,
mark.hellflieder {
    padding: 3px 5px !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -o-box-decoration-break: clone;
}
mark.hellgold {
    background-color: #faf5e1;
}
mark.hellblau {
    background-color: #e7eefb;
}
mark.hellflieder {
    background-color: #f7f2fd;
}

/* Markieren von Text beim draufklicken auf den Text*/
::selection {
    background-color: var(--color-light-gruen) !important;
}
::-moz-selection { /* Firefox spezifisch */
    background-color: var(--color-light-gruen) !important;
}
::-webkit-selection { /* Für ältere WebKit-Browser und Safari */
  background-color: var(--color-light-gruen) !important;
}

/*** ANFANG Handgemalte Umrandung Text Highlight ***/
.circle-sketch-highlight {
    position: relative;
    color: var(--color-dark-grey);
    padding-right: 10px;
    margin-right: 5px;
    padding-left: 10px;
    margin-left: 15px; 
}
.circle-sketch-highlight:before,
.circle-sketch-highlight:after {
    content: "";
    z-index: -1;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-dark-pink);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    border-radius: 50%;
    padding: 0.1em 0.25em;
}
.circle-sketch-highlight:before {
    left: -0.5em;
    top: -0.1em;
    border-right-color: transparent;
    transform: rotate(2deg);
}
.circle-sketch-highlight:after {
    left: -0.5em;
    top: 0.1em;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(-1deg);
}
/*** ENDE handgemalter Umrandung Text Highlight ***/

/* Leere <p> werden nicht angezeigt */
p:empty {
    display: none;
}

/* Goldenen Streifen Image als Border für WP Block/Divi Builder */
#borderimg {
    border: 4px solid transparent;
    padding: 15px;
    border-image: url('/wp-content/uploads/2023/11/golden-strip-new.svg') 30 round;
}

/* Icon vor p mit zwei Klassen */
.iconvorp:before {
    content: ''; /* Inhalt wird von .hakenpink/.hakengruen überschrieben */
    display: inline-block;
    padding-right: 23px;
    font-family: 'ETmodules';
    font-size: 1.2em;
    vertical-align: middle;
}
.hakenpink:before {
    content: '\4e';
    color: var(--color-dark-pink);
}
.hakengruen:before {
    content: '\4e';
    color: var(--color-dark-gruen);
}

/* Icon vor Listenpunkten */
.hakenpinkul ul, .hakengruenul ul, .hakenpurpleul ul, .hakengoldul ul { list-style: none; padding-left: 0;}
.hakenpinkul li, .hakengruenul li, .hakenpurpleul li, .hakengoldul li {position: relative; padding-left: 30px;}
.hakenpinkul li::before {content: '\4e'; font-family: 'ETmodules'; color: var(--color-dark-pink); position: absolute; left: 0;}
.hakengruenul li::before {content: '\4e'; font-family: 'ETmodules'; color: var(--color-dark-gruen); position: absolute; left: 0;}
.hakenpurpleul li::before {content: '\4e'; font-family: 'ETmodules'; color: var(--color-dark-lila); position: absolute; left: 0;}
.hakengoldul li::before {content: '\4e'; font-family: 'ETmodules'; color: var(--color-gold-accent); position: absolute; left: 0;}

/* Gedankenstrich vor Listenpunkten */
.strichul ul { list-style: none; padding-left: 0;}
.strichul li {position: relative; padding-left: 30px;}
.strichul li::before { content: "–"; position: absolute; left: 0;}

/* Affiliate Links Sternchen */
a[href*="/go/"]:after {
    content: " *";
}

/* Removing the Divi Sidebar Dividing Line */
#main-content .container:before {
  width: 0;
}

/* Farbverlauf hintergrund */
.farbverlauf-1 {
    /* Erzeugt einen kreisförmigen Verlauf von der Mitte nach außen */
    background: radial-gradient(circle, rgba(177, 200, 242, 0.4) 0%, rgba(177, 200, 242, 0) 80%) !important;
}

/******** ENDE ALLGEMEINES ******/

/****** ANFANG FORMULARE ******/
/* Alle Formularfelder Styling entfernen - diese werden dann gestylt mit den Classes */
button,
fieldset,
input,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

input,
input.text,
input.title,
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"],
select,
textarea {
  border: 1px solid var(--color-dark-grey); /* Variable für #3d3d3d */
  background-color: #fff;
  border-radius: 0.25rem;
}
/****** ENDE FORMULARE ******/

/****** ANFANG BUTTON "BACK TO TOP" STYLEN ******/
.et_pb_scroll_top.et-pb-icon {
    right: 30px;
    bottom: 30px;
    padding: 8px;
    border-radius: 30px;
    background: var(--color-scroll-top-bg-initial);
    font-size: 32px;
    transition: all .1s ease-in-out;
}
/* Button Mouseover */
.et_pb_scroll_top.et-pb-icon:hover {
    bottom: 32px;
    background: var(--color-dark-lila);
    transition: all .1s ease-in-out;
    box-shadow: 0 10px 15px var(--color-dark-grey);
}
/* Animation tweaks */
.et_pb_scroll_top.et-visible {
    animation: fadeInBottom 1s 1 cubic-bezier(.50, 0, .160, 1);
}
.et_pb_scroll_top.et-hidden {
    opacity: 0;
    animation: fadeOutBottom 1s 1 cubic-bezier(.77, 0, .175, 1);
}
/****** ENDE BUTTON "BACK TO TOP" STYLEN ******/

/****** ANFANG KONTAKT-SEITE ******/
/* Button Abstand */
body.page-id-65 #post-65 .et_contact_bottom_container {
  margin-top: 15px;
  margin-bottom: 15px;
}
/****** ENDE KONTAKT-SEITE ******/

/****** ANFANG ANFRAGE-SEITE ******/
/* Button Abstand */
body.page-id-278721 #post-278721 .et_contact_bottom_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

.page-id-278721 .et_pb_contact_field_1 .et_pb_contact_field_options_list,
.page-id-278721 .et_pb_contact_field_1 .et_pb_contact_field_options_title {
  display: none !important;
}

.page-id-278721 .et_pb_contact_field_1 .et_pb_contact_form_label {
  display: inline-block !important;
  font-weight: 700 !important;
}
.page-id-278721 .et_pb_contact_submit {
  line-height: 1.3 !important;
}

/****** ENDE ANFRAGE-SEITE ******/

/****** ANFANG INHALTE-MELDEN-SEITE ******/
/* Texte kleiner */
body.page-id-277320 #post-277320 .et_pb_contact_field_6.et_pb_contact_field .et_pb_contact_field_options_title,
body.page-id-277320 #post-277320 .et_pb_contact_form_0.et_pb_contact_form_container .input[type="checkbox"] + label,
body.page-id-277320 #post-277320 .et_pb_contact_field_options_title {
  font-size: 14px !important; /* Beibehalten, da spezifisch */
  letter-spacing: 0;
}
/****** ENDE INHALTE-MELDEN-SEITE ******/

/****** ANFANG 404 SEITE ******/
.error404 .et_pb_button {
    margin-bottom: 15px !important;
}

@media only screen and (min-width: 981px) {
    .error404 .et_pb_section {
        padding: 10px 0 0 0;
    }
}

@media (max-width: 980px) {
    .error404 .et_pb_row {
        padding: 10px 0 0 0;
    }
    .error404 .et_pb_button {
        margin-bottom: 40px !important;
    }
}

@media (max-width: 767px) {
    .error404 .breadcrumb {
        padding-top: 7px;
    }
}
/****** ENDE 404 SEITE ******/

/****** ANFANG SUCHERGEBNIS-SEITE ******/
.search-no-results .entry {
    margin-bottom: 40px !important;
}

@media only screen and (min-width: 981px) {
    .search-no-results .et_pb_section,
    .search-results .et_pb_section {
        padding: 10px 0 0 0;
    }
}

@media (max-width: 980px) {
    .search-no-results .et_pb_row,
    .search-results .et_pb_row {
        padding: 10px 0 0 0;
    }
    .search-no-results .et_pb_section,
    .search-results .et_pb_section {
        padding: 10px 0 15px 0;
    }
}

@media (max-width: 767px) {
    .search-no-results .breadcrumb,
    .search-results .breadcrumb {
        padding-top: 7px;
    }
}

/* Wenn in der Suche nichts gefunden wurde, wird eine Textmessage angezeigt */
.search-no-results .entry {
  text-align: center;
}

.search-no-results .entry p {
  color: #fd80ad;
}
/****** ENDE SUCHERGEBNIS-SEITE ******/

/****** ANFANG Cookie Banner stylen ******/
.cc_div {
    --cc-font-family: "Raleway", Arial,sans-serif;
    /* Optional: Schriftgröße anpassen */
    --cc-font-size: 16px; */
    /* Optional: Textfarbe anpassen (wenn du möchtest) */
    /* --cc-text: #333; */
}

#cm h2#c-ttl {
    font-size: 21px !important;
    text-transform: uppercase;
}

/* Die Links unterhalb der Button: immer unterstrichen und mit Standardfarbe */
#c-bns-custom-links-container a {
    margin: 0 8px;
    color: inherit; /* Erbt Farbe vom Bannertext */
    text-decoration: underline !important; /* **Immer unterstrichen** */
    transition: color 0.2s ease; /* Sanfter Übergang nur für die Textfarbe */
    font-family: var(--cc-font-family) !important; /* Sicherstellen, dass die Links die Schriftart haben */
}
/* Hover-Effekt für Links unterhalb der Button: Farbe ändert sich, Unterstreichung bleibt */
#c-bns-custom-links-container a:hover {
    color: var(--cc-btn-primary-bg) !important; /* Ändere zu einer gewünschten Hover-Farbe, z.B. die Primärfarbe des Akzeptieren-Buttons */
    text-decoration: underline !important; /* **Unterstreichung bleibt auch bei Hover erhalten** */
}
/* Entfernt die unerwünschte border-bottom des Plugins */
.cc_div a {
    border-bottom: none !important;
}

/* Dies stellt sicher, dass alle Buttons im Container #c-bns die gleiche Breite haben und sich wie Block-Elemente verhalten. */
#cc_div #cm #c-inr #c-bns button.c-bn {
    width: 100% !important; /* Volle Breite innerhalb des Containers */
    margin: 0 !important;   /* Keine äußeren Abstände, die das Layout stören könnten */
    float: none !important; /* Floats deaktivieren, falls vom Plugin gesetzt */
    display: block !important; /* Sicherstellen, dass sie sich wie Block-Elemente verhalten */
    box-sizing: border-box !important; /* Paddings und Borders in die Breite einbeziehen */
    text-align: center !important; /* Text innerhalb des Buttons zentrieren */
    /* Füge hier weitere allgemeine Button-Stile hinzu, die du möchtest (z.B. padding, border-radius, font-size) */
}

/* den Button "Einstellungen individuell festlegen" stylen, da dieser zusätzlich hinzugefügt wurde. */
#cc_div #cm #c-inr #c-bns #my-custom-settings-btn {
    border-radius: var(--cc-btn-border-radius, 3px);
    background-color: var(--cc-btn-secondary-bg, #6c757d); /* Oder primary, je nach gewünschter Farbe */
    color: var(--cc-btn-secondary-text, #ffffff);
}

/* Wichtige Layout-Anpassungen für den Button-Container (#c-bns) */
/* Dies ist entscheidend, damit die Buttons wirklich untereinander erscheinen,
   falls das Plugin hier ein abweichendes Flexbox-Verhalten definiert hat oder kein Flexbox nutzt. */
#cc_div #cm #c-inr #c-bns {
    display: flex !important;
    flex-direction: column !important; /* Stapelt die Buttons vertikal */
    gap: 10px !important; /* Abstand zwischen den Buttons */
    justify-content: center !important; /* Zentriert die Buttons horizontal, wenn sie nicht 100% breit sind */
    align-items: center !important; /* Auch wichtig für horizontale Zentrierung */
    width: 100% !important; /* Container soll volle Breite haben */
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 15px !important;
}
@media (max-width: 480px) { /* Wende diese Regeln auf Bildschirme bis 480px Breite an */
    #c-txt {
        max-height: 120px !important; /* Feste Pixel-Höhe für Smartphones */
        /* Passe den Wert 200px an: Teste, was auf deinem Handy gut aussieht.
           Das lässt oben und unten noch Platz. */
    }
}

/* Übergeordnete Container, falls sie ein Flexbox-Layout für die Hauptbestandteile beeinflussen */
/* Sicherstellen, dass der innere Bereich des Banners (#c-inr) und der Informationsbereich (#c-inr-i)
   ihre Inhalte ebenfalls vertikal anordnen. Dies ist oft standardmäßig so, aber zur Sicherheit. */
#cc_div #cm #c-inr,
#cc_div #cm #c-inr #c-inr-i {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Optional: Anpassungen für den Cloud-Modus, falls hier separate Layout-Probleme auftreten */
#cm.cloud #c-inr,
#cm.cloud #c-inr-i,
#cm.cloud #c-bns {
    flex-direction: column !important;
    padding-right: 0 !important;
}

/* Höhe definieren für den Textbereich und Scrollfunktion einbauen */
#c-inr-i { /* Dies ist der innere Container, der #c-txt und #c-bns umschließt */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt den verfügbaren Platz */
    height: 100%; /* Wichtig, damit Flexbox den Platz nutzen kann */
    /* **WICHTIG: Padding für den Gesamtinhalt des Banners** */
    /* Dies sollte den Abstand zum Rand des Banners definieren, ohne den Scroll-Inhalt zu stören */
    padding: 20px 25px !important; /* Beispielwerte: Oben/Unten 20px, Links/Rechts 25px */
    /* Du kannst diese Werte anpassen, um den optimalen Abstand zu finden. */
}

#c-txt {
     max-height: 45vh; /* **Änderung hier: Nutze 60% der Viewport-Höhe** */
    /* Du kannst diesen Wert zwischen 50vh und 80vh testen.
       60vh lässt oft genug Platz für die Buttons darunter und einen kleinen Blick auf die Seite. */
    overflow-y: auto;
     /* Zusätzliche Anpassungen, um den Anfang sichtbar zu machen */
    padding-top: 0 !important; /* Entfernt eventuelles Padding oben, das den Text nach unten drückt */
    margin-top: 0 !important; /* Entfernt eventuellen Margin oben */
    
    padding-left: 15px !important; /* Standard-Padding links */
    padding-right: 15px !important; /* Platz für den Scrollbalken rechts */
    padding-bottom: 0 !important; /* Entfernt eventuelles Padding unten */

    /* Stellt sicher, dass das Element den verfügbaren Platz nutzt */
    flex-grow: 1; /* Erlaubt dem Textbereich, den verfügbaren Platz einzunehmen */
    flex-shrink: 1; /* Erlaubt ihm zu schrumpfen, wenn nötig */
    
    /* Füge etwas Abstand zu den Buttons darunter ein (kann auch am Button-Container sein) */
    margin-bottom: 15px; 
}

/* Blendet das Cookie-Banner auf spezifischen Seiten aus : Impressum, Datenschutz und Cookie*/
.page-id-276844 #cm, /* Cookie-Seite */
.page-id-63 #cm, /* Impressum-Seite */
.page-id-3 #cm { /* Datenschutzerklärung-Seite */
    display: none !important; /* Verbirgt das gesamte Cookie-Banner */
    visibility: hidden !important; /* Stellt sicher, dass es auch wirklich weg ist */
    pointer-events: none !important; /* Verhindert Interaktion, falls es doch sichtbar wäre */
    opacity: 0 !important; /* Macht es unsichtbar */
}
/****** ENDE Cookie Banner stylen ******/