@charset "UTF-8";
/* ==========================================================================
	Shop-System (Integriert)
	========================================================================== */
/* H1 Headline System - Angepasst an Standard-Seiten Look */
.shop-headline-container {
  margin-bottom: 60px;
}
.shop-headline-container h1 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 3.4375rem !important;
  /* ~55px */
  font-weight: 600 !important;
  color: #1b1b1b !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: 40px !important;
}
/* Responsive Skalierung für H1 */
@media (max-width: 1024px) {
  .shop-headline-container h1 {
    font-size: 2.5rem !important;
  }
}
@media (max-width: 1024px) {
  .shop-headline-container h1 {
    font-size: 2rem !important;
    margin-bottom: 30px !important;
  }
  .shop-headline-container {
    margin-bottom: 0px !important;
  }
}
.shop-layout-grid {
  display: flex;
  gap: 50px;
}
.shop-sidebar-filters {
  width: 250px;
  flex-shrink: 0;
}
.shop-products-column {
  flex-grow: 1;
}
/* 3. Button-Animation */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt {
  position: relative !important;
  display: inline-block !important;
  font-family: "Jost", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 12px 35px !important;
  background: transparent !important;
  border: 1px solid #262b26 !important;
  color: #262b26 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.woocommerce a.button::before, .woocommerce button.button::before, .woocommerce input.button::before, .woocommerce #respond input#submit::before, .woocommerce a.button.alt::before, .woocommerce button.button.alt::before, .woocommerce input.button.alt::before, .woocommerce #respond input#submit.alt::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0 !important;
  background: #262b26 !important;
  z-index: -1 !important;
  transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover {
  color: #ffffff !important;
  border-color: #262b26 !important;
}
.woocommerce a.button:hover::before, .woocommerce button.button:hover::before, .woocommerce input.button:hover::before, .woocommerce #respond input#submit:hover::before, .woocommerce a.button.alt:hover::before, .woocommerce button.button.alt:hover::before, .woocommerce input.button.alt:hover::before, .woocommerce #respond input#submit.alt:hover::before {
  height: 100% !important;
}
@media (max-width: 1024px) {
  .woocommerce a.button, .woocommerce button.button {
    padding: 12px 25px !important;
  }
}
.woocommerce .cart-collaterals .checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
/* ==========================================================================
	SHOP-FORMULARE: Vereinheitlicht mit Border #bbbbbb
	========================================================================== */
/* Basis-Styling für alle Shop-Felder */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-checkout form .form-row input, .woocommerce-checkout form .form-row select, .woocommerce-cart table.cart td.actions .coupon input.input-text, .woocommerce-widget-layered-nav select, .woocommerce-ordering select {
  font-family: "Jost", sans-serif !important;
  font-size: 1rem !important;
  padding: 12px 15px !important;
  background: #ffffff !important;
  border: 1px solid #bbbbbb !important;
  /* Aktualisierte Border-Farbe */
  border-radius: 0 !important;
  color: #1b1b1b !important;
  outline: none !important;
  height: auto !important;
  transition: border-color 0.3s ease !important;
}
/* Fokus-Zustand: Wechselt auf das dunkle Schwarz beim Anklicken */
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce-checkout form .form-row input:focus, .woocommerce-cart table.cart td.actions .coupon input.input-text:focus {
  border-color: #1b1b1b !important;
  background: #fdfdfd !important;
}
/* Placeholder-Farben */
.woocommerce form .form-row input.input-text::placeholder {
  color: rgba(27, 27, 27, 0.5) !important;
}
/* Label-Abstände */
.woocommerce form .form-row label {
  font-family: "Jost", sans-serif !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block !important;
}
/* Dropdown-Pfeile */
.woocommerce-ordering select, .woocommerce-widget-layered-nav select {
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbbbbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}
/* ==========================================================================
	CHECKBOX: Checkout-Anpassung (Sauber & Quadratisch)
	========================================================================== */
/* Container für das Label */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  margin-bottom: 15px !important;
}
/* ==========================================================================
	CHECKBOX: Der "Anti-Deformation" Fix
	========================================================================== */
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  /* Absolute Erzwingung des Quadrats */
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  /* Überschreibt alles andere */
  max-width: 20px !important;
  max-height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  /* Layout-Reset */
  border: 1px solid #bbbbbb !important;
  background-color: #ffffff !important;
  margin-right: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  /* Übergang */
  transition: all 0.3s ease !important;
  outline: none !important;
}
/* Haken-Zustand */
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked {
  border-color: #1b1b1b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(27, 27, 27)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Wenn angeklickt: Schwarzer Rahmen und Haken-SVG */
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"]:checked {
  border-color: #1b1b1b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(27, 27, 27)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* ==========================================================================
	SHOP-TABELLE: Nur horizontale Linien (keine vertikalen Borders)
	========================================================================== */
.woocommerce table.shop_table {
  border: none !important;
  /* Äußere Umrandung komplett entfernen */
  margin: 0 0 24px 0;
  text-align: left;
  width: 100%;
  border-collapse: collapse;
  /* Wichtig für saubere Linien */
  border-spacing: 0;
  border-radius: 0 !important;
  background-color: #ffffff !important;
}
/* Alle Zellen: Nur horizontale Trennlinien */
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #bbbbbb !important;
  /* Nur horizontale Linie */
  padding: 12px !important;
}
/* Header-Zeile: Oft schöner mit etwas dickerer Linie oder gar keiner */
.woocommerce table.shop_table thead th {
  border-bottom: 1px solid #bbbbbb !important;
}
/* Falls noch ein Border am Tabellenende oder Anfang stört */
.woocommerce table.shop_table tr:first-child th, .woocommerce table.shop_table tr:first-child td {
  border-top: none !important;
}
/* Entfernung des grauen Hintergrunds im Checkout */
.woocommerce-checkout .shop_table {
  background-color: #ffffff !important;
}
/* ==========================================================================
	1. BUTTON BASIS (Gilt für alle Buttons)
	========================================================================== */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  border: 1px solid #333333 !important;
  color: #333333 !important;
  transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow: hidden !important;
}
/* ==========================================================================
	2. HOVER-ANIMATION (Nur für Buttons OHNE .added Klasse)
	========================================================================== */
.woocommerce a.button:not(.added)::before, .woocommerce button.button:not(.added)::before, .woocommerce input.button:not(.added)::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0 !important;
  background: #333333 !important;
  z-index: -1 !important;
  transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.woocommerce a.button:not(.added):hover {
  color: #ffffff !important;
}
.woocommerce a.button:not(.added):hover::before {
  height: 100% !important;
}
/* ==========================================================================
	STATISCHER ZUSTAND "WARENKORB ANSEHEN" (Ohne Flackern)
	========================================================================== */
/* 1. Strikte Überschreibung: .added Button verliert alle Animationseigenschaften */
.add_to_cart_button.added, .woocommerce a.button.added, .woocommerce button.button.added {
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
  /* Animation komplett killen */
  transition: none !important;
  -webkit-transition: none !important;
  /* Verhindert, dass Theme-Hover-Events das Styling manipulieren */
  pointer-events: auto !important;
}
/* 2. Hover-Effekt physisch unterdrücken */
.add_to_cart_button.added:hover, .woocommerce a.button.added:hover, .woocommerce button.button.added:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
  /* Sorgt dafür, dass sich beim Hovern nichts ändert */
  transform: none !important;
  box-shadow: none !important;
}
/* 3. Alle Pseudo-Elemente, die beim Hovern 'ausfahren' könnten, löschen */
.add_to_cart_button.added::before, .add_to_cart_button.added::after, .woocommerce a.button.added::before, .woocommerce a.button.added::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  width: 0 !important;
}
/* 4. Basis-Stil für noch nicht hinzugefügte Buttons (bleibt animiert) */
.woocommerce a.button:not(.added), .woocommerce button.button:not(.added) {
  background: transparent !important;
  border: 1px solid #333333 !important;
  color: #333333 !important;
}
/* Blendet den automatischen WooCommerce-Link aus, der nach dem Hinzufügen erscheint */
.woocommerce-message .wc-forward, .woocommerce-message .added_to_cart, .wc-forward, .added_to_cart {
  display: none !important;
}
/* Erzwungene Anzeige bei existierender Klasse .added */
.add_to_cart_button.added::after {
  content: "Warenkorb ansehen" !important;
}
/* Verstecke den Standard-Text, wenn die Klasse vorhanden ist */
.add_to_cart_button.added {
  font-size: 0 !important;
  /* Versteckt den alten Text */
}
.add_to_cart_button.added::after {
  font-size: 14px !important;
  /* Deine normale Schriftgröße */
  display: block !important;
}
.stock.in-stock {
  margin-bottom: 16px;
}
.feature-content .intro-content p {
  line-height: 1.6;
}
.product-single-page .wrapper .feature-content p {
  padding-bottom: 10px;
}
.product-single-page .feature-image .swiper-pagination .swiper-pagination-bullet {
  background: #1b1b1b !important;
  opacity: 0.4 !important;
}
.product-single-page .feature-image .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1 !important;
}
/* --- TITEL & PREIS SPEZIFIKATIONEN --- */
h2.woocommerce-loop-product__title, .product-title {
  font-size: 2rem !important;
  line-height: 1.3;
  padding-top: 0 !important;
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* Etwas Platz unter dem Titel */
  text-align: left;
}
@media (max-width: 1024px) {
  h2.woocommerce-loop-product__title, .product-title {
    font-size: 1.8rem !important;
  }
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price, .product-price {
  color: #333;
  /* Falls $black-soft nicht definiert ist, nutze diesen Hex-Wert */
  font-weight: bold !important;
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.linkinner {
  text-decoration: none;
  color: inherit;
  transition: text-decoration 0.2s;
  padding-top: 10px;
}
.linkinner:hover {
  text-decoration: underline !important;
}
/* --- GRID STRUKTUR (5 SPALTEN) --- */
ul.products::before, ul.products::after {
  display: none !important;
  content: none !important;
}
ul.products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.custom-product-item {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.custom-product-item > a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.product-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 10px 0;
}
.product-tax-info {
  font-size: 0.8rem;
  color: #1b1b1b;
  margin-bottom: 10px;
  line-height: 1.3;
}
.product-button-container {
  margin-top: auto;
  padding-top: 10px;
}
.shop-products-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* --- RESPONSIVE ANPASSUNGEN --- */
@media (max-width: 1440px) {
  ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Versteckt den Link zum Versandkosten-Rechner in den Blöcken */
.wc-block-cart__shipping-calculator, .wc-block-components-shipping-rates-control__description {
  display: none !important;
}
/* 1. Versteckt den "Versandkosten berechnen" Link dauerhaft */
.hide-shipping-calculator .woocommerce-shipping-calculator, .hide-shipping-calculator .shipping-calculator-button {
  display: none !important;
}
/* 2. Verhindert das Ruckeln beim Neuladen der Summe */
.woocommerce-cart-form {
  transition: opacity 0.2s ease;
}
.updating-cart .woocommerce-cart-form {
  opacity: 0.6;
}
/* Checkout-Felder verschönern */
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea {
  padding: 12px 15px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  /* Abgerundete Ecken */
  background-color: #fcfcfc !important;
  transition: all 0.3s ease !important;
}
/* Fokus-Effekt beim Anklicken */
.woocommerce-checkout .form-row input.input-text:focus {
  border-color: #000 !important;
  /* Schwarzer Rahmen bei Klick */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;
  outline: none;
}
/* Labels ein wenig hervorheben */
.woocommerce-checkout .form-row label {
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  color: #333 !important;
}
/* Abstand zwischen den Feldern vergrößern */
.woocommerce-checkout .form-row {
  margin-bottom: 20px !important;
}
.woocommerce-info {
  border-top-color: #1b1b1b !important;
}
.woocommerce-message {
  border-top-color: #1b1b1b !important;
}
.woocommerce-error {
  border-top-color: #1b1b1b !important;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
  font-family: WooCommerce;
  content: "";
  display: inline-block;
  position: absolute;
  top: 1em;
  left: 1.5em;
  color: #1b1b1b !important;
}
ins, .woocommerce-Price-amount, .woocommerce-Price-amount bdi {
  text-decoration: none !important;
  border-bottom: none !important;
}
/* Versteckt den Ergebnistext komplett */
.result-count {
  display: none !important;
}
/* Erzwingt den Pointer für das Dropdown-Element selbst */
.woocommerce-ordering select {
  cursor: pointer !important;
}
/* Optional: Stellt sicher, dass auch die hover-Interaktion den Pointer beibehält */
.woocommerce-ordering select:focus {
  cursor: pointer !important;
}
/* Optional: falls du den Text "Alle Ergebnisse" komplett loswerden willst */
.result-count {
  display: none !important;
}
.related-products-section .feature-content h2, .feature-grid .feature-content h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.related-products-section .feature-content ul, .feature-grid .feature-content ul {
  margin-bottom: 20px;
}
/* Der rote Kreis-Button */
.woocommerce-cart-form .product-remove a.remove {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background-color: #d9534f;
  /* Dein Rot */
  color: #fff !important;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}
.woocommerce-cart-form .product-remove a.remove:hover {
  background-color: #c9302c;
  /* Etwas dunkleres Rot beim Hover */
  transform: scale(1.1);
}
/* Die Ladeanimation (Spinner) */
.woocommerce-cart-form .product-remove a.remove.loading {
  background-color: #999 !important;
  /* Grau während des Ladens */
  pointer-events: none;
  /* Klicks deaktivieren während des Ladens */
  position: relative;
}
.woocommerce-cart-form .product-remove a.remove.loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}