/* Custom CSS for donob.de */


/* Font direkt laden */
@font-face {
    font-family: 'Audiowide';
    src: url('/wp-content/fonts/audiowide/audiowide-v16-latin-regular.woff2') format('woff2'),
         url('/wp-content/fonts/audiowide/audiowide-v16-latin-regular.woff') format('woff');
    font-display: swap; 
}


/* Zentrieren von Elementen im Footer */
.absolute-footer .container,
.footer-primary {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Zentrieren von Text auf Produktseiten */
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-tabs .entry-content {
  text-align: center;
}


/* Größe für H Überschriften */
h1 {
    font-size: 30px !important;
    font-weight: bold !important;
    opacity: 1 !important;
}
h2 {
    font-size: 26px !important;
    font-weight: bold !important;
    opacity: 1 !important; 
}
h3 {
    font-size: 21px !important; 
    font-weight: bold !important;
    opacity: 1 !important; 
}
h4 {
    font-size: 21px !important; 
    font-weight: bold !important;
    opacity: 1 !important; 
}
h5 {
    font-size: 16px !important; 
    font-weight: normal !important;
    opacity: 1 !important; 
}
h6 {
    font-size: 36px !important; 
    font-weight: bold !important;
    opacity: 1 !important; 
}

/* Stellt sicher, dass Überschriften und Links innerhalb weiß sind */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: white !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Konsistenter Hover-Effekt für Links in Überschriften */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #0bf20b !important;
}


/* Anpassung der Sprachumschaltung im Header */
.header-language-dropdown > a {
    font-size: 0 !important; 
    display: flex !important;
    align-items: center !important; 
}

/* Stellt die Anzeige der Flagge sicher */
.header-language-dropdown > a .image-icon {
    display: inline-block !important; 
}

/* Stellt die Größe der Flagge ein */
.header-language-dropdown > a .image-icon img {
    width: 24px !important; 
    height: auto !important; 
}

/* Blendet den Pfeil aus */
.header-language-dropdown > a .icon-angle-down {
    display: none !important;
}

/* System Nachrichten mittig anzeigen */
.message-container {
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    flex-direction: column !important; 
    text-align: center !important; 
}

/* System Nachrichten mittig anzeigen */
.message-container a.button.wc-forward {
    align-self: center; 
}


/* Ändert die Textfarbe des ausgewählten Elements im Select2-Dropdown zu Schwarz */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000 !important; /* Stellt die Textfarbe auf Schwarz ein */
}

/* Erzwingt die Textfarbe für Optionen im Dropdown */
.select2-container .select2-dropdown .select2-results__option {
    color: #000 !important; /* Schwarz */
}

/* Korrigiert die Position des Pfeils im Select2-Container für eine zentrierte Darstellung */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 50%;
    right: 1rem; /* Anpassen für eine zentrierte Position, falls nötig */
    transform: translateY(-50%);
}
/* 24.02.2024 */



.button.primary span {
    color: #000; /* Farbe des Textes */
    text-shadow: 
        -1.5px -1.5px 0 #fff,  
         1.5px -1.5px 0 #fff,
        -1.5px  1.5px 0 #fff,
         1.5px  1.5px 0 #fff; /* Kontur-Effekt */
}








/* Container für Buttons */
.buttons-container {
    display: flex !important; /* Nebeneinander-Anordnung */
    flex-wrap: nowrap !important; /* Kein Zeilenumbruch */
    justify-content: center !important; /* Zentrierung */
    align-items: center !important; /* Vertikale Zentrierung */
    gap: 20px !important; /* Abstand zwischen Buttons */
    margin: 0 auto !important; /* Zentrierung für alle Bildschirme */
}

/* Basis-Stile für Buttons */
.custom-button {
    display: inline-flex !important; /* Flexbox für Text */
    align-items: center !important; /* Text vertikal zentrieren */
    justify-content: center !important; /* Text horizontal zentrieren */
    background-color: #0b0bf2 !important; /* Hauptfarbe */
    color: #000 !important; /* Textfarbe */
    text-align: center !important;
    padding: 0 !important; /* Kein Padding */
    height: 50px !important; /* Feste Höhe */
    font-size: 20px !important; /* Schriftgröße */
    line-height: 50px !important; /* Standard-Zeilenhöhe */
    border-radius: 6px !important; /* Abgerundete Ecken */
    text-decoration: none !important; /* Kein Unterstrich */
    transition: background-color 0.3s, color 0.3s !important; /* Weiche Übergänge */
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff !important; /* Kontur */
    flex-shrink: 0 !important; /* Kein Schrumpfen */
}

/* Hover-Effekt */
.custom-button:hover {
    background-color: #0bf20b !important; /* Hover-Farbe */
    color: #000 !important; /* Textfarbe beim Hover */
    box-shadow: 0 0 0 2px #fff !important; /* Outline beim Hover */
}

/* Feste Breiten für Buttons */
.custom-button-170 {
    width: 170px !important; /* Breite erzwingen */
}
.custom-button-220 {
    width: 220px !important; /* Breite erzwingen */
}
.custom-button-300 {
    width: 300px !important;
}
.custom-button-390 {
    width: 390px !important;
}

/* Zusätzliche Fixes für Block-Ansicht */
.wp-block {
    margin: 0 auto !important; /* Zentrierung */
    width: 100% !important; /* Vollbild-Breite */
}












.svg-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease; /* Gleiche Übergangszeit wie für Icons */
}
.svg-link:hover {
    color: #000; /* Hier die Hover-Farbe des Textes anpassen */
}




/* donob Icon */

.svg-icon-donob-container {
    position: relative;
    width: 66px; /* Breite des Icons anpassen */
    height: 66px; /* Höhe des Icons anpassen */
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-icon-donob-container::before, .svg-icon-donob-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: opacity 0.3s ease; /* Gleiche Übergangszeit */
}

.svg-icon-donob-container::before {
    background-image: url('https://donob.de/wp-content/uploads/2024/02/donob_Logo_Icon_white_V12.svg');
}

.svg-icon-donob-container::after {
    background-image: url('https://donob.de/wp-content/uploads/2024/02/donob_Logo_Icon_gruen_V12.svg');
    opacity: 0;
}

.svg-link:hover .svg-icon-donob-container::after {
    opacity: 1;
}

.svg-link:hover .svg-icon-donob-container::before {
    opacity: 0;
}





/* Nur das Element mit dem Shortcode, nicht die ganze Seite */
.glossary-clean ul{list-style:none!important;margin:0!important;padding-left:0!important;}
.glossary-clean li::marker{content:""!important;}   /* Safari/Firefox */
.glossary-clean li:before{content:none!important;}   /* Flatsome setzt oft den Punkt via :before */
.glossary-clean li{margin-left:0!important;padding-left:0!important;background:none!important;}



/* Glossar-Links Standard */
a[class*="glossary"],
a[rel~="glossary"],
a[data-glossary],
a[data-glossary-id],
a[data-glossary-term],
a[data-term="glossary"],
.glossary-terms a,
.glossary-clean a {
  color: #ffffff; /* weiße Schrift */
  -webkit-text-stroke: 0.5px #0b0bf2; /* kräftigere blaue Kontur */
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: all 0.3s ease; /* sanfter Übergang */
  text-shadow:
    0 0 3px rgba(11, 11, 242, 0.9),
    0 0 6px rgba(11, 11, 242, 0.6),
    0 0 9px rgba(11, 11, 242, 0.3) !important;

}

/* Glossar-Links Hover */
a[class*="glossary"]:hover,
a[rel~="glossary"]:hover,
a[data-glossary]:hover,
a[data-glossary-id]:hover,
a[data-glossary-term]:hover,
a[data-term="glossary"]:hover,
.glossary-terms a:hover,
.glossary-clean a:hover {
  color: #0bf20b; /* dein Grün */
  -webkit-text-stroke: 0.5px #ffffff; /* weiße Kontur */
  text-shadow:
    0 0 3px rgba(11, 242, 11, 0.9),
    0 0 6px rgba(11, 242, 11, 0.6),
    0 0 9px rgba(11, 242, 11, 0.3) !important;

}






/* Container: alles mittig */
.wpcf7 form {
  text-align: center;
  color: #fff; /* weiße Schrift */
}

/* Labels sichtbar machen */
.wpcf7 form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #fff; /* weiß, damit sichtbar auf dunklem Hintergrund */
  text-align: center;
}

/* Eingabefelder */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 80%; /* zentrierte Breite, bei Bedarf anpassen */
  margin: 0 auto 16px auto;
  padding: 10px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #fff; /* Schriftfarbe */
  text-align: center; /* Text im Feld zentrieren */
}

/* Placeholder-Farbe anpassen */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #aaa; /* hellgrau als Platzhalter */
  opacity: 1;
  text-align: center;
}

/* Button-Styling */
.wpcf7 form input[type=submit] {
  display: block;
  margin: 20px auto;
  color: #ffffff;      /* Schriftfarbe */
  border: 2px solid #ffffff;
  padding: 10px 25px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.wpcf7 form input[type=submit]:hover {
  background-color: #0bf20b; /* dein Grünton */
  color: #000000;
  border-color: #ffffff;
}

/* Fehlermeldungen unter den Feldern */
.wpcf7 form .wpcf7-not-valid-tip {
  color: #0bf20b !important;   /* grün statt rot */
  background: #000000 !important; /* schwarz statt grau */
  font-size: 0.85em !important;   /* etwas kleiner */
  border-radius: 3px !important;
  padding: 2px 6px !important;
  margin-top: 3px !important;
  text-align: center !important;
}

/* Eingabefelder mit Fehler grün umrahmen */
.wpcf7 form .wpcf7-not-valid {
  border: 2px solid #0bf20b !important; /* grüner Rahmen */
  box-shadow: 0 0 5px #0bf20b; /* optional leichter Glow */
}

/* Entfernt den grauen Pfeil von den Fehlermeldungen */
.wpcf7-not-valid-tip::before,
.wpcf7-not-valid-tip::after {
  content: none !important;
  display: none !important;
}