/**
 * Theme Name:     Ratgeber Tierbedarf
 * Author:         Benjamin
 * Template:       hello-elementor
 * Text Domain:	   ratgeber-tierbedarf
 * Description:    Childtheme für Ratgeber Tierbedarf
 */

.wp-singular .wp-block-woocommerce-product-button,
.wc-block-components-product-sale-badge{
	display: none !important;
}
.purpletext,
.schema-faq-question{
	color: #AC0752;
}

.compHighlight{
	color: #699794;
}

.single-product h2,
.wp-singular h2{
	color: #AC0752;
	font-size: 1.5rem;
	font-weight: 400;
}

.single-product h3,
.wp-singular h3{
	color: #AC0752;
	font-size: 1.2rem;
	font-weight: 400;
}


.schema-faq-answer{
	padding: 20px;
}

/* Styling für den gesamten FAQ-Block (optional, falls benötigt) */
.schema-faq.wp-block-yoast-faq-block {
    /* border: 1px solid #ddd; */ /* Beispiel für einen Rahmen */
}

/* Styling für jede einzelne Frage-Antwort-Sektion */
.schema-faq-section {
    border-bottom: 1px solid #eee; /* Trennlinie zwischen FAQs */
}
.schema-faq-section:last-child {
    border-bottom: none; /* Keine Trennlinie bei der letzten FAQ */
}

/* Styling für die klickbare Frage */
.schema-faq-question {
    display: flex; /* Ermöglicht Flexbox-Layout für Text und Icon */
    justify-content: space-between; /* Text links, Icon rechts */
    align-items: center; /* Vertikale Zentrierung von Text und Icon */
    width: 100%; /* Volle Breite einnehmen */
    padding: 15px 10px; /* Innenabstand (oben/unten, rechts/links) */
    background-color: #f0f0f0; /* Hintergrundfarbe für die Frage */
	border-radius: 10px;
    cursor: pointer;
    font-weight: bold; /* Stellt sicher, dass der Fragetext fett ist, auch wenn Yoast ein inneres strong hat */
    box-sizing: border-box; /* Padding und Border werden in die Breite eingerechnet */
    margin: 0 0 10px 0; /* Entfernt Standard-Margin vom strong-Tag, falls vorhanden */
}

/* Wenn Yoast ein <strong> im <strong> hat, wollen wir nur das äußere für das Layout */
.schema-faq-question > strong {
    font-weight: inherit; /* Erbt die Schriftstärke vom Elternelement (unser gestyltes .schema-faq-question) */
    /* Falls der Text nicht die volle Breite nehmen soll und das Icon stört: */
    flex-grow: 1; /* Lässt den Text den verfügbaren Platz einnehmen */
    margin-right: 10px; /* Abstand zum Icon */
}

/* Stil für das Toggle-Icon */
.faq-toggle-icon {
    font-weight: bold;
    font-size: 1.2em; /* Etwas größer für bessere Sichtbarkeit */
    min-width: 1em; /* Mindestbreite, um Springen zu vermeiden */
    text-align: center;
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft, wenn der Text lang ist */
}

/* Styling für die Antwort */
.schema-faq-answer {
    padding: 15px 20px; /* Innenabstand für die Antwort */
    background-color: #f9f9f9; /* Leicht andere Hintergrundfarbe für die Antwort (optional) */
}


.products .product-category  {
  transition: transform 0.3s ease; /* sanfter Übergang */
}

.products .product-category:hover  {
  transform: scale(1.07); /* Bild wird um 5% größer */
}

.products .product-category h2.woocommerce-loop-category__title {
	color: white;
	background-color: #699794;
	margin-top: -16px !important;
	border-radius: 0 0 10px 10px;
}
.products .product-category h2.woocommerce-loop-category__title > mark{
	display: none;
}

ul{margin-bottom: 16px !important;}


.faq h3 {
    background-color: #f0f0f0;
    cursor: pointer;
    padding: 10px;
    position: relative;
}

.faq h3 .icon {
    position: absolute;
    right: 10px;
    font-weight: bold;
}

.faq p {
    display: none; /* Initially hidden */
    padding: 10px;
    border: 1px solid #ddd;
    margin: 0;
	transition: max-height 0.3s ease; /* Sanfter Übergang */
}

.woocommerce-product-attributes th{
	text-align: left;
}
.woocommerce-product-attributes td{
	text-align: right;
}
.woocommerce-product-attributes td p{
	padding-right: 8px !important;
}

.wp-block-quote{
	background-color: #6997944d;
    padding: 29px;
    color: black;
    margin: 30px 0 30px 0;
	border-radius: 20px;
}



@media (min-width: 1024px) {
  #toccontainer.sticky {
    position: sticky;
    top: 20px; /* Abstand vom oberen Rand */
    z-index: 1000;
  }

  /* Vermeide dass Eltern sticky blockieren */
  .elementor-widget-container {
    overflow: visible;
  }
}