/*
 Theme Name:   Bad Wachter
 Author:       Life Design
 Template:     xinterio
 Version:      1.0.0
 Text Domain:  bad-wachter
*/

/* --- START: Header Anpassungen --- */

/* Menüpunkte "Aktuelles" und "Kontakt" ausblenden.
   KORRIGIERTE VERSION: Zielt auf die ID (für den normalen Header)
   UND die Klasse (für den Sticky Header). */
@media (min-width: 1201px) {
  #menu-item-4669,
  .menu-item-4669,
  #menu-item-4671,
  .menu-item-4671 {
    display: none !important;
  }
}

/* Flexbox-Verhalten für das Hauptmenü anpassen, um Umbruch zu verhindern.
   Dies gilt nur, solange das Desktop-Menü sichtbar ist. */
@media (min-width: 1201px) {
  .main-navigation .menu {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .main-navigation .menu > li {
    flex-shrink: 0 !important; /* Verhindert, dass Menüpunkte schrumpfen */
  }
}

/* Layout des Header-Containers anpassen, um Überlappung zu vermeiden */
@media (max-width: 1365px) and (min-width: 1201px) {
  .pbmit-header-content {
    justify-content: flex-start !important; /* Alle Elemente linksbündig starten */
  }

  .pbmit-menu-area {
    margin: 0 auto !important; /* Menü zentriert sich zwischen Logo und Button */
  }
}

/* Logo-Größen staffeln */

/* Standard-Logo-Größe für große Bildschirme */
.pbmit-logo img {
  width: 200px !important;
  height: auto !important;
  max-width: none !important;
}

/* Logo für mittelgroße Desktops etwas verkleinern, um Platz zu schaffen */
@media (max-width: 1300px) and (min-width: 1201px) {
  .pbmit-logo img {
    width: 160px !important;
  }
}

/* WICHTIG: Die Breite des Logos in der mobilen Ansicht (unter 1201px)
   sollte idealerweise vom Theme selbst oder einer spezifischeren Regel gesteuert werden.
   Der folgende Block wird zur Sicherheit beibehalten, könnte aber redundant sein. */
@media (max-width: 1200px) {
  .pbmit-logo img.pbmit-responsive-logo {
    width: 200px !important;
  }
}

/* --- ENDE: Header Anpassungen --- */


/*-----Footer Copyright-----*/

.pbmit-footer-menu {
    display: flex;
    justify-content: flex-end; /* Elemente am rechten Rand ausrichten */
    list-style: none;
    padding: 0;
}


/*------Top Bar Header--------*/

.pbmit-contact-info {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.pbmit-contact-info a {
    font-size: 16px !important;
    font-weight: 600 !important;
}


/* Alle Regeln nur für die Top-Bar (innerhalb von .pbmit-pre-header-wrapper) anwenden */

/* 1) Größere Kreise und mehr Abstand zum Text */
.pbmit-pre-header-wrapper .pbmit-contact-info li i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;            
  height: 30px !important;           
  border-radius: 50% !important;
  background-color: #ffffff !important;
  color: #0094d9 !important;
  text-align: center !important;
  margin-right: 8px !important;      
  font-size: 15px !important;        
}

/* 2) Baseline-Ausrichtung des Icons, damit nur der Kreis “tiefer” steht */
.pbmit-pre-header-wrapper .pbmit-contact-info li {
  display: inline-flex !important;
  align-items: baseline !important;
  margin-right: 16px !important;
}

/* —— Animierte Unterlinie bei Hover —— */
.pbmit-pre-header-wrapper .pbmit-contact-info li a {
  position: relative !important;
  text-decoration: none !important;
}

/* Pseudo-Element für die Linie (ausgangsbreite = 0) */
.pbmit-pre-header-wrapper .pbmit-contact-info li a::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 13px !important;               
  width: 0 !important;
  height: 1.5px !important;                
  background-color: #ffffff !important;  
  transition: width 0.3s ease !important;
}

/* Bei Hover wächst die Linie auf 100% */
.pbmit-pre-header-wrapper .pbmit-contact-info li a:hover::after {
  width: 100% !important;
}

/* Text beim Hover Weiß färben */
.pbmit-pre-header-wrapper .pbmit-contact-info li a:hover {
  color: #ffffff !important;
}



/*-------Service------Beschreibung Titel--------*/

.pbmit-heading-desc {
    color: #000000 !important;
}


/*----------------Listenpunkte bei Tabs Widget-----------------------*/

.pbmit-tab-content-wrapper ul li {
    padding-left: 0.8em; /* Minimaler Platz für das Häkchen */
    text-indent: -0.8em; /* Erste Zeile zurückziehen für bündige Ausrichtung */
}


/*----------------------Footer Anpassungen--------------------------------*/


/*----------------------Kontaktformular--------------------------------*/



.radio-group span.wpcf7-list-item {
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 10px 20px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.radio-group span.wpcf7-list-item:hover {
  border-color: #007bff;
  background-color: #f0f8ff;
}

.radio-group input[type="radio"]:checked + span {
  border-color: #0094d9;
  font-weight: bold;
}

.wpcf7-list-item {
    display: inline-block;
    margin: 0 20px 20px 0;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #00a0d2;
}

/*----------------------vorher-nacher Bilder--------------------------------*/

.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
    box-shadow: none !important;
}

/*----------------------faqs--------------------------------*/
.elementor-accordion .elementor-tab-content p {
    font-size: 20px !important;
    
}

a.elementor-accordion-title {
    font-size: 20px;
}