/* TITELFLAECHE — AUS PRODS style.css AUSGESCHNITTEN.
   Gemessen 2026-09-10 durch Vergleich ALLER geladenen Stylesheets beider Baeume:
   prod hat in seiner style.css eine Regel mit min-height:var(--title-area-height)
   und line-height:var(--title-line-height) auf .products .wd-entities-title
   (plus die :root-Variablen dazu). dev hatte diese Regel NICHT - dort stand nur die
   Produktkarten-Variante, die auf Kategoriekacheln nicht greift.
   Genau deshalb funktioniert prods Zaehler-Offset (translateY(-10px) u.a.) dort und
   hier nicht: der Zaehler ruecht auf prod in reservierten Leerraum, auf dev in den Titel.
   Bloecke unveraendert im Wortlaut von prod, inklusive !important. */

:root {
  /* Textfarben */
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #cccccc;
  --dark-text-muted: #888888;

  /* Akzent‐Grün für Preise + Buttons */
  --accent-green-primary: #00cc66;    /* Kräftiges, klares Grün */
  --accent-green-light:   #00cc66;    /* Gleiches Grün für Einheitspreis + Seed‐Count */

  /* Steuer‐Hinweis („inkl. MwSt.“) in Grau */
  --tax-note-color: #888888;

  /* Abstände */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;

  /* Border‐Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* Schatten */
  --shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-glow:  0 0 8px rgba(0, 204, 102, 0.5);

  /* Transitionen */
  --transition-fast:   0.15s ease;
  --transition-medium: 0.25s ease;

  /* ================================
     LAYOUT:
     Wir reservieren eine Fläche von genau 4 Titelzeilen.
     Bei font-size:1rem + line-height:1.2 → 1.2rem pro Zeile → 4 * 1.2rem = 4.8rem
     ================================ */
  --title-area-lines: 4;
  --title-line-height: 1.2rem;
  --title-area-height: calc(var(--title-area-lines) * var(--title-line-height));
}

.products .woocommerce-loop-product__title,
.products .wd-entities-title,
.products .wd-entities-title a,
.products .product-title,
.products .product-title a,
ul.products li.product .wd-product-header h3.woocommerce-loop-product__title,
ul.products li.product .wd-product-header h3.woocommerce-loop-product__title a,
ul.products li.product .wd-entities-title,
ul.products li.product .wd-entities-title a,
ul.products li.product a.product-title-link {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  min-height: var(--title-area-height) !important;
  max-height: none !important;
  white-space: normal !important;       /* Umbruch an Leerzeichen erlauben */
  overflow-wrap: normal !important;     /* Kein erzwungener Umbruch mitten im Wort */
  word-break: keep-all !important;      /* Nie mitten im Wort umbrechen */
  hyphens: none !important;             /* Keine Silbentrennung */
  line-height: var(--title-line-height) !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;          /* Abstand unter der Titelfläche auf 0 reduzieren */
  color: var(--dark-text-primary) !important;  /* Weiß */
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-direction: normal !important;
}

ul.products li.product h3.wd-entities-title,
ul.products li.product h3.wd-entities-title a {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  min-height: var(--title-area-height) !important;
  max-height: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  line-height: var(--title-line-height) !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;          /* Abstand unter der Titelfläche auf 0 reduzieren */
  color: var(--dark-text-primary) !important;
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-direction: normal !important;
}

/* ≥1200 px — AUS PRODS style.css AUSGESCHNITTEN (umz26) */
/* Desktop (≥ 1200px) – 4 Spalten */
@media (min-width: 1200px) {
  .products.wd-grid-g {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px 20px !important; /* Zeilen‐ und Spalten‐Gap */
  }
}

@media (max-width: 1199px) {
  .products.wd-grid-g {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px 15px !important;
  }
  .wd-product-image,
  .wd-product-img-wrap {
    max-width: 195px !important;
  }
  .woocommerce-loop-product__title,
  .wd-entities-title,
  .wd-entities-title a {
    font-size: 0.8rem !important;
  }
  /* Titelfläche anpassen bei kleinerer Schrift: */
  :root {
    --title-line-height: 1.1rem;
    --title-area-height: calc(var(--title-area-lines) * var(--title-line-height));
  }
}

@media (max-width: 1023px) {
  .products.wd-grid-g {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px 12px !important;
  }
  .wd-product-image,
  .wd-product-img-wrap {
    max-width: 165px !important;
  }
  .woocommerce-loop-product__title,
  .wd-entities-title,
  .wd-entities-title a {
    font-size: 0.75rem !important;
  }
  /* Titelfläche anpassen: */
  :root {
    --title-line-height: 1rem;
    --title-area-height: calc(var(--title-area-lines) * var(--title-line-height));
  }
}

@media (max-width: 767px) {
  :root {
    --spacing-sm: 0.75rem;
    --spacing-md: 1.25rem;
    --spacing-lg: 1.75rem;
    --title-line-height: 0.9rem;
    --title-area-height: calc(var(--title-area-lines) * var(--title-line-height));
  }
  .products.wd-grid-g {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 10px !important;
  }
  .wd-product-image,
  .wd-product-img-wrap {
    max-width: 150px !important;
  }
  .main-content {
    padding-bottom: 40px !important;
  }
  .woocommerce-loop-product__title,
  .wd-entities-title,
  .wd-entities-title a {
    font-size: 0.8rem !important;
  }
}

/* ≤480 px — AUS PRODS style.css AUSGESCHNITTEN (umz26) */
/* Mobile Portrait (≤ 480px) – 1 Spalte */
@media (max-width: 480px) {
  .products.wd-grid-g {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .wd-product-header {
    min-height: auto !important;
    height: auto !important;
  }
  .wd-product-image,
  .wd-product-img-wrap {
    max-width: 180px !important;
    height: auto !important;
  }
  .woocommerce-loop-product__title,
  .wd-entities-title,
  .wd-entities-title a {
    font-size: 0.8rem !important;
  }
  /* Single Product Mobile Layout */
  .single-product .cart {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .single_add_to_cart_button {
    width: 100% !important;
    height: 48px !important;
  }
  .single-product .quantity input {
    width: 100% !important;
    height: 48px !important;
  }
}

/* KACHEL-REGELN — AUS PRODS style.css AUSGESCHNITTEN, NICHT NACHGEBAUT.
   Uebernommen wurde jeder Block, dessen Selektor eine Kachel-Klasse traegt
   (wd-cat-*, product-category, category-image, term-zuechter/breeders, category-grid-item),
   im Wortlaut von prod, inklusive der dortigen !important und Selektor-Treppen.
   Draussen geblieben: Produktkarten, Suche, Newsletter, Footer, Widgets.
   Alles, was auf dev vorher dieselben Klassen anfasste, ist entfernt - zwei konkurrierende
   Regelsaetze auf denselben Selektoren waren die Ursache der Ueberlappungen.
   Uebernommen: 39 Bloecke aus prod.  Entfernt: 30 dev-eigene Bloecke. */

.wd-cat-thumb.category-image-wrapp a.category-image {
    display: flex;                             /* Flexbox zur Bildzentrierung */
    align-items: center;
    justify-content: center;
    width: 150px !important;                   /* ✅ Rahmenbreite (Desktop) */
    height: 200px !important;                  /* ✅ Rahmenhöhe (Desktop) */
    border: 1px solid rgb(131, 183, 53) !important;  /* Grüner Rahmen */
    border-radius: 8px;                        /* Abgerundete Ecken */
    box-shadow: 0 0 8px rgba(131, 183, 53, 0.3);/* Grüner Schimmer */
    margin: 0 auto;                            /* Zentrierung im Grid */
    overflow: hidden;                          /* Bild nicht über Rahmen hinaus */
    background: transparent;
    transition: none !important;               /* Kein Hover-Effekt */
    transform: none !important;
}

.wd-cat-thumb.category-image-wrapp a.category-image > img {
    max-width: 65% !important;                 /* ✅ Bildgröße (50 % vom Rahmen) */
    height: auto !important;                   /* Automatische Proportionen */
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    display: block;
}

.wd-cat-thumb.category-image-wrapp a.category-image:hover,
.wd-cat-thumb.category-image-wrapp a.category-image > img:hover {
    border: 2px solid rgb(131, 183, 53) !important;
    box-shadow: 0 0 8px rgba(131, 183, 53, 0.3) !important;
    transform: none !important;
}

.wd-cat-thumb.category-image-wrapp {
    margin: 30px 20px !important;              /* ✅ Abstand: oben/unten 30px, seitlich 20px */
}

@media (max-width: 1024px) {
    .wd-cat-thumb.category-image-wrapp a.category-image {
        width: 220px !important;               /* ✅ Rahmenbreite Tablet */
        height: 300px !important;              /* ✅ Rahmenhöhe Tablet */
    }
    .wd-cat-thumb.category-image-wrapp a.category-image > img {
        max-width: 65% !important;             /* ✅ Bildgröße Tablet */
    }
}

@media (max-width: 768px) {
    .wd-cat-thumb.category-image-wrapp a.category-image {
        width: 180px !important;
        height: 250px !important;
    }
    .wd-cat-thumb.category-image-wrapp a.category-image > img {
        max-width: 65% !important;
    }
}

@media (max-width: 480px) {
    .wd-cat-thumb.category-image-wrapp a.category-image {
        width: 140px !important;
        height: 200px !important;
    }
    .wd-cat-thumb.category-image-wrapp a.category-image > img {
        max-width: 65% !important;
    }
}

body.term-zuechter .category-image,
body.term-breeders .category-image {
    background-size: contain !important;         /* GANZ anzeigen */
    background-position: center center !important;
    background-repeat: no-repeat !important;

    height: 140px !important;                    /* Bildbox-Höhe anpassbar */
    width: 100% !important;
    border-radius: 8px;
    background-color: #111;                      /* für transparente Logos */
}

.woocommerce ul.products li.product-category .wd-cat-content.hover-mask {
  padding: 0 !important;
  display: block !important;        /* kein Flex mehr, damit wir margin nutzen können */
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product-category .wd-cat-content.hover-mask h3.wd-entities-title {
  margin: 0 0 0.2em 0 !important;    /* kleiner vertikaler Abstand */
}

.woocommerce ul.products li.product-category .wd-cat-content.hover-mask .wd-cat-count.more-products {
  margin: -0.4em 0 0 0 !important;    /* zieht den Zähler eine Zeile nach oben */
  font-size: 0.8em !important;        /* deine Wunschgröße */
  line-height: 1.2 !important;
  padding: 0 !important;              /* killt alte Paddingreste */
}

.wd-cat-content,
body .wd-cat-content,
html body .wd-cat-content {
    padding: 0px !important;
    margin-top: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
}

.wd-cat-count.more-products,
body .wd-cat-count.more-products,
html body .wd-cat-count.more-products {
    margin: 0px !important;
    margin-top: -8px !important;
    padding: 0px !important;
    position: relative !important;
    top: -2px !important;
    transform: translateY(-10px) !important;
    color: #cccccc !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    line-height: 1 !important;
}

.wd-cat-count.more-products a,
body .wd-cat-count.more-products a,
html body .wd-cat-count.more-products a {
    color: #cccccc !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.wd-cat-count.more-products a:hover,
body .wd-cat-count.more-products a:hover,
html body .wd-cat-count.more-products a:hover {
    color: rgb(131, 183, 53) !important;
    text-decoration: underline !important;
}

.wd-cat-count.more-products.ultra-tight {
    margin-top: -20px !important;
    top: -5px !important;
    transform: translateY(-15px) !important;
}

.product-category {
    border-radius: var(--box-radius) !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
    position: relative !important;
    /* Basis-Box-Shadow (optional, für subtilen Standard-Effekt) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.product-category:hover {
    transform: translateY(-4px) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 20px var(--bunker-glow-hover),
        0 0 40px var(--bunker-glow),
        0 0 60px var(--bunker-glow) !important;
}

body.term-zuechter .product-category,
body.term-breeders .product-category {
    border-radius: var(--box-radius) !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body.term-zuechter .product-category:hover,
body.term-breeders .product-category:hover {
    transform: translateY(-4px) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 20px var(--bunker-glow-hover),
        0 0 40px var(--bunker-glow),
        0 0 60px var(--bunker-glow) !important;
}

.wd-cat-image.category-image:hover {
    /* Überschreibt den bestehenden Logo-Hover, da jetzt der ganze Container den Effekt hat */
    transform: none !important;
    box-shadow: none !important;
}

.product-category.strong-glow:hover {
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.2),
        0 0 30px var(--bunker-glow-strong),
        0 0 50px var(--bunker-glow-hover),
        0 0 80px var(--bunker-glow) !important;
}

@media (max-width: 768px) {
    .product-category:hover,
    .products li.product:hover {
        transform: translateY(-2px) !important; /* Weniger Bewegung auf Mobile */
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.12),
            0 0 15px var(--bunker-glow-hover),
            0 0 30px var(--bunker-glow) !important;
    }
}

body.term-zuechter a.wd-cat-image.category-image img,
body.term-breeders a.wd-cat-image.category-image img {
    display: none !important;
}

body.term-zuechter a.wd-cat-image.category-image,
body.term-breeders a.wd-cat-image.category-image {
    width: 240px !important;
    height: 240px !important;
    min-width: 240px !important;
    min-height: 240px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 8px !important;
    background: #1a1a1a !important;
    border: 1px solid rgb(131, 183, 53) !important;
    box-shadow: none !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    position: relative !important;
}

body.term-zuechter a.wd-cat-image.category-image:hover,
body.term-breeders a.wd-cat-image.category-image:hover {
    border: 1px solid rgb(131, 183, 53) !important;
    box-shadow: 0 0 15px rgba(131, 183, 53, 0.4) !important;
    transform: translateY(-2px) !important;
}

body.term-zuechter a.wd-cat-image.category-image::before,
body.term-breeders a.wd-cat-image.category-image::before {
    content: '' !important;
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 1 !important;
    /* URL wird dynamisch via Custom Property gesetzt */
    background-image: var(--breeder-logo-url) !important;
}

body.term-zuechter a.wd-cat-image.category-image:not([style*="--breeder-logo-url"])::before,
body.term-breeders a.wd-cat-image.category-image:not([style*="--breeder-logo-url"])::before {
    display: none;
}

body.term-zuechter .wd-cat-thumb.category-image-wrapp,
body.term-breeders .wd-cat-thumb.category-image-wrapp {
    width: auto !important;
    height: auto !important;
    min-width: 240px !important;
    min-height: 240px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto 15px !important;
    background: transparent !important;
    border: none !important;
}

body.term-zuechter .wd-cat-inner.wrapp-category,
body.term-breeders .wd-cat-inner.wrapp-category {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.term-zuechter .product-category,
body.term-breeders .product-category {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    min-height: 360px !important;
    overflow: visible !important;
    background: transparent !important;
}

body.term-zuechter .wd-cat-content,
body.term-breeders .wd-cat-content {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin-top: 15px !important;
    overflow: visible !important;
}

body.term-zuechter .wd-cat-content h1,
body.term-zuechter .wd-cat-content h2,
body.term-zuechter .wd-cat-content h3,
body.term-zuechter .wd-cat-content h4,
body.term-zuechter .wd-cat-content h5,
body.term-zuechter .wd-cat-content h6,
body.term-zuechter .wd-cat-content .wd-entities-title,
body.term-breeders .wd-cat-content h1,
body.term-breeders .wd-cat-content h2,
body.term-breeders .wd-cat-content h3,
body.term-breeders .wd-cat-content h4,
body.term-breeders .wd-cat-content h5,
body.term-breeders .wd-cat-content h6,
body.term-breeders .wd-cat-content .wd-entities-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 10px 0 5px 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    padding: 0 !important;
}

body.term-zuechter .wd-cat-content a,
body.term-breeders .wd-cat-content a {
    color: inherit !important;
    text-decoration: none !important;
}

body.term-zuechter .wd-cat-content a:hover,
body.term-breeders .wd-cat-content a:hover {
    color: rgb(131, 183, 53) !important;
    text-decoration: underline !important;
}

body.term-zuechter .woocommerce ul.products,
body.term-zuechter .products,
body.term-breeders .woocommerce ul.products,
body.term-breeders .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 40px 30px !important;
    justify-items: center !important;
    align-items: start !important;
    padding: 20px !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    body.term-zuechter a.wd-cat-image.category-image,
    body.term-breeders a.wd-cat-image.category-image {
        width: 210px !important;
        height: 210px !important;
        min-width: 210px !important;
        min-height: 210px !important;
        padding: 18px !important;
    }
    
    body.term-zuechter a.wd-cat-image.category-image::before,
    body.term-breeders a.wd-cat-image.category-image::before {
        top: 18px !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
    }
    
    body.term-zuechter .wd-cat-thumb.category-image-wrapp,
    body.term-breeders .wd-cat-thumb.category-image-wrapp {
        min-width: 210px !important;
        min-height: 210px !important;
    }
    
    body.term-zuechter .woocommerce ul.products,
    body.term-zuechter .products,
    body.term-breeders .woocommerce ul.products,
    body.term-breeders .products {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 30px 25px !important;
    }
}

@media (max-width: 768px) {
    body.term-zuechter a.wd-cat-image.category-image,
    body.term-breeders a.wd-cat-image.category-image {
        width: 180px !important;
        height: 180px !important;
        min-width: 180px !important;
        min-height: 180px !important;
        padding: 15px !important;
    }
    
    body.term-zuechter a.wd-cat-image.category-image::before,
    body.term-breeders a.wd-cat-image.category-image::before {
        top: 15px !important;
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;
    }
    
    body.term-zuechter .wd-cat-thumb.category-image-wrapp,
    body.term-breeders .wd-cat-thumb.category-image-wrapp {
        min-width: 180px !important;
        min-height: 180px !important;
    }
    
    body.term-zuechter .product-category,
    body.term-breeders .product-category {
        min-height: 290px !important;
        padding: 15px !important;
    }
    
    body.term-zuechter .woocommerce ul.products,
    body.term-zuechter .products,
    body.term-breeders .woocommerce ul.products,
    body.term-breeders .products {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 25px 20px !important;
    }
}

@media (max-width: 480px) {
    body.term-zuechter a.wd-cat-image.category-image,
    body.term-breeders a.wd-cat-image.category-image {
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
        min-height: 150px !important;
        padding: 12px !important;
    }
    
    body.term-zuechter a.wd-cat-image.category-image::before,
    body.term-breeders a.wd-cat-image.category-image::before {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }
    
    body.term-zuechter .wd-cat-thumb.category-image-wrapp,
    body.term-breeders .wd-cat-thumb.category-image-wrapp {
        min-width: 150px !important;
        min-height: 150px !important;
    }
    
    body.term-zuechter .product-category,
    body.term-breeders .product-category {
        min-height: 250px !important;
        padding: 12px !important;
    }
    
    body.term-zuechter .woocommerce ul.products,
    body.term-zuechter .products,
    body.term-breeders .woocommerce ul.products,
    body.term-breeders .products {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
        gap: 20px 15px !important;
        padding: 15px !important;
    }
}

/* ---- dev-eigene Regeln OHNE Kachel-Bezug ---- */
/* card-grid.css — Karten-Design.
   ENTSCHEID 2026-09-10: Kategoriekacheln sehen aus wie auf prod, Hover eingeschlossen.
   Die Vorgaengerfassung hat prods ZUECHTER-Geometrie (240x240-Rahmen, min-height 360px,
   Flex, Padding) ueber den gemeinsamen Nenner .product-category auf ALLE Kacheln gelegt.
   prod macht das nicht: dort traegt .product-category global nur Radius/Transition/Schatten
   plus Hover-Glow (style.css 1365-1382), und die massive Geometrie steht ausschliesslich
   unter body.term-zuechter / body.term-breeders (style.css 1469-1633).
   Diese Datei zieht dieselbe Trennlinie. Zeilennummern = prods style.css.
   Prio 11500 => normale Spezifitaet reicht, KEIN !important. */

/* ==========================================================================
   1 · KATEGORIEKACHEL — global, exakt prods Umfang
   ========================================================================== */

/* prod 1365-1372 */


/* prod 1375-1382 */


/* prod 1448-1457 */


/* Bildrahmen der Kategoriekachel — prod 705-719: 150x200, NICHT quadratisch */


/* prod 722-730 */


/* prod 733-738: Rahmen wird beim Hover dicker, sonst nichts */


/* prod 1425-1429: den Glow traegt der Container, nicht das Logo */


/* prod 743-745 */


/* prod 752-782 */













/* Textblock — prod 1298-1352 */
/* ZAEHLER + TITEL — prods Block 1:1 (style.css 1298-1352).
   prod erzwingt ihn mit !important und der Selektor-Treppe .x / body .x / html body .x,
   weil Woodmart eigene Regeln auf dieselben Klassen setzt (woo-categories-loop.css u.a.).
   VORHER STAND HIER NUR DIE HAELFTE: der negative Zaehler-Offset ohne prods
   .wd-cat-content-Flexbox und ohne die margin-Nullung am Titel. Der Zaehler ruecht dann
   nach oben, der Titel gibt seinen Platz aber nicht frei - bei mehrzeiligen Titeln laufen
   beide ineinander, bei einzeiligen faellt es nicht auf.
   Ebenfalls entfernt: eine selbstgebaute Titelflaechen-Reservierung (--title-area-*), die
   prod nicht hat und die ohne !important gegen Woodmart ohnehin verlor. */


.wd-entities-title,
body .wd-entities-title,
html body .wd-entities-title {
	margin: 0px !important;
	padding: 0px !important;
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
}











/* prod 1093-1110: Titel und Zaehler eng, wenn die Hover-Maske greift */




/* Kein Umbruch mitten im Wort — prod erreicht Kategorietitel ueber
   .products .wd-entities-title (style.css 179-204, dort mit !important).
   Hier ohne, weil diese Datei spaeter laedt. */


/* Kategorie-Nav: Dropdowns aus (prod-Verhalten) */
.wd-nav.wd-nav-product-cat > li .sub-menu,
.wd-nav.wd-nav-product-cat > li .children,
.wd-nav.wd-nav-product-cat > li .menu-dropdown,
.wd-nav.wd-nav-product-cat > li:hover .sub-menu,
.wd-nav.wd-nav-product-cat > li:hover .children,
.wd-nav.wd-nav-product-cat > li.wd-event-hover:hover .menu-dropdown {
	display: none;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Raster zentrieren, wenn weniger Kacheln als Spalten da sind. */
.woocommerce .products.wd-cats,
.woocommerce ul.products,
.products.wd-cats {
	justify-content: center;
}

/* ==========================================================================
   2 · MARKEN-/ZUECHTERKACHEL — quadratisch, NUR im Markenraster
   prod 1469-1633 (dort body.term-zuechter / body.term-breeders). dev traegt zusaetzlich
   den eigenen Container .bcm-brand-grid; alle drei Traeger sind aufgefuehrt, damit die
   Regeln greifen, egal welcher im Markup steht. Tiefere Spezifitaet schlaegt Abschnitt 1.
   ========================================================================== */

.bcm-brand-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px 30px;
	justify-items: center;
	align-items: start;
	padding: 20px;
	margin: 0;
	justify-content: center;
}

/* prod 1562-1573 */


/* prod 1550-1559 */


/* prod 1533-1546 */


/* prod 1475-1494 */


/* prod 1497-1502 */




/* prod 1577-1619 */






/* prod 1639-1749 */




/* ==========================================================================
   3 · PRODUKTKARTEN — UNVERAENDERT aus der Vorgaengerfassung uebernommen.
   Kein Gegenstand dieses Entscheids.
   ========================================================================== */

.products .product-grid-item,
.products .wd-product {
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: var(--radius-sm, 6px);
	background: rgba(255, 255, 255, .02);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: all .25s ease;
	overflow: visible;
	height: auto;
	min-height: auto;
}
.products .product-grid-item:hover,
.products .wd-product:hover {
	border-color: rgb(131, 183, 53);
	box-shadow: 0 0 8px rgba(131, 183, 53, .3);
	transform: translateY(-1px);
	outline: none;
}
.products .wd-product img,
.products .product-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .25s ease;
}
.products .wd-product .wd-entities-title,
.products .product-grid-item .wd-entities-title {
	display: block;
	overflow: visible;
	height: auto;
	min-height: 4.8rem;
	max-height: none;
	white-space: normal;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	line-height: 1.2rem;
	font-size: 1rem;
	margin-bottom: 0;
	color: #fff;
}
.products .wd-product .wd-entities-title a:hover,
.products .product-grid-item .wd-entities-title a:hover {
	color: rgb(198, 198, 198);
	text-decoration: underline;
}
.products .price,
.woocommerce ul.products li.product .price {
	color: rgb(131, 183, 53);
	font-size: 1rem;
	margin: 0;
	line-height: 1.2;
	padding: 0;
}
.products .child-tax-note {
	display: block;
	color: #888;
	font-size: .75em;
	margin: .05rem 0 0;
	line-height: 1.2;
}
.products .child-unit-price,
.products .child-seed-count {
	display: block;
	color: rgb(131, 183, 53);
	font-size: .85em;
	margin: .05rem 0 0;
	line-height: 1.2;
}
.products .add_to_cart_button,
.products .product_type_simple,
.products .product_type_variable,
.woocommerce ul.products li.product .button {
	background-color: rgb(131, 183, 53);
	color: #000;
	border: none;
	border-radius: var(--radius-sm, 6px);
	padding: 6px 12px;
	font-size: .75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .25s ease;
	cursor: pointer;
	margin-top: auto;
}
.products .add_to_cart_button:hover,
.products .product_type_simple:hover,
.products .product_type_variable:hover,
.woocommerce ul.products li.product .button:hover {
	background-color: rgb(131, 183, 53);
	transform: translateY(-1px);
	box-shadow: 0 0 8px rgba(131, 183, 53, .3);
}
@media (max-width: 1199px) {
	.products .wd-product .wd-entities-title,
	.products .product-grid-item .wd-entities-title { font-size: .8rem; line-height: 1.1rem; min-height: 4.4rem; }
}
@media (max-width: 1023px) {
	.products .wd-product .wd-entities-title,
	.products .product-grid-item .wd-entities-title { font-size: .75rem; line-height: 1rem; min-height: 4rem; }
}
@media (max-width: 767px) {
	.products .wd-product .wd-entities-title,
	.products .product-grid-item .wd-entities-title { font-size: .8rem; line-height: .9rem; min-height: 3.6rem; }
}

/* LOGO-WEG: dev zeigt das <img>, prod ein ::before.
   Gemessen 2026-09-10: prod speichert die Logo-URL im Term-Meta 'breeder_logo' (23 Terme)
   und setzt sie per JS in wp_footer als --breeder-logo-url an den Link; das CSS malt sie
   ins ::before und blendet dafuer das <img> aus. dev speichert eine Attachment-ID in
   'thumbnail_id' (23 Terme), und das Child-Template gibt daraus direkt ein <img> aus -
   den ::before-Weg gibt es hier nicht.
   Deshalb wird prods img-Ausblendung fuer dev zurueckgenommen. Ohne diese Zeile bleiben
   die Rahmen leer, sobald body.term-zuechter greift. Kein JS, kein zweites Logo-Meta. */
body.term-zuechter a.wd-cat-image.category-image img,
body.term-breeders a.wd-cat-image.category-image img {
	display: block !important;
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

/* Kein Rahmen auf dem Logo beim Hover.
   prods style.css 733-738 setzt border:2px auch auf `a.category-image > img:hover`.
   Auf prod ist das tot, weil dort unter body.term-zuechter das <img> ausgeblendet ist
   (Logo kommt per ::before). Auf dev ist das <img> der Logo-Weg und sichtbar - damit wird
   die Regel lebendig und malt einen zweiten, inneren Rahmen um das Logo.
   Den Hover traegt der Container (240x240) wie auf prod, das Bild bleibt unberuehrt. */
body.term-zuechter a.wd-cat-image.category-image > img:hover,
body.term-breeders a.wd-cat-image.category-image > img:hover,
body.term-zuechter a.wd-cat-image.category-image:hover > img,
body.term-breeders a.wd-cat-image.category-image:hover > img {
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
}

/* EOF-card-grid-imghover */

/* Fusszeile mobil (2 Spalten) und Desktop — AUS PRODS style.css AUSGESCHNITTEN (umz38) */
/* ==========================================
   RESPONSIVE FOOTER - MIT GLOW-EFFEKT
   ========================================== */

@media (max-width: 768px) {
    .main-footer table,
    .main-footer tbody,
    .main-footer tr,
    .main-footer td {
        display: block !important;
        width: 100% !important;
    }
    
    .main-footer {
        padding: 20px 15px !important;
    }
    
    .main-footer td {
        display: inline-block !important;
        width: 48% !important;
        margin: 1% !important;
        vertical-align: top !important;
    }
    
    .main-footer a {
        display: block !important;
        padding: 10px 8px !important;
        color: #cccccc !important;
        text-decoration: none !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        text-align: center !important;
        font-size: 0.85rem !important;
        transition: all 0.3s ease !important;
    }
    
    .main-footer a:hover {
        color: rgb(131,183,53) !important;
        background: rgba(131,183,53,0.1) !important;
        border-color: rgb(131,183,53) !important;
        box-shadow: 0 0 8px rgba(131,183,53, 0.3) !important;
        transform: translateY(-1px) !important;
    }
}

/* ==========================================
   DESKTOP FOOTER - MIT GLOW-EFFEKT
   ========================================== */

@media (min-width: 769px) {
    .main-footer a {
        transition: all 0.3s ease !important;
        color: #cccccc !important;
        text-decoration: none !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        display: inline-block !important;
    }
    
    .main-footer a:hover {
        color: rgb(131,183,53) !important;
        text-decoration: none !important;
        box-shadow: 0 0 8px rgba(131,183,53, 0.3) !important;
        transform: translateY(-1px) !important;
        background: rgba(131,183,53,0.1) !important;
    }
}

/* dev: die Fusszeilen-Tabelle traegt Zeilenumbrueche zwischen den Zellen; als inline-block brachen sie jede Zelle in eine eigene Zeile. Flex ignoriert sie. */
@media (max-width: 768px) {
    .main-footer tr {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* YouTube-Box und Lexikon-Vorschau mit Glow — AUS PRODS style.css AUSGESCHNITTEN (umz49c) */
/* === YOUTUBE-BOX: identischer starker Glow === */
.youtube-embed-box {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--box-radius);
  background-color: #1a1a1a;
  box-shadow: 0 0 40px var(--bunker-glow);
  max-width: 100%;
  width: 100%;
  margin: 0 auto 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.youtube-embed-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px var(--bunker-glow-hover);
}

.youtube-embed-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--box-radius);
}

/* YouTube Subscribe Button - identischer starker Glow */
.youtube-subscribe {
  text-align: center;
  padding: 0.75rem 1.5rem;
  background-color: #111;
  border-radius: var(--box-radius);
  box-shadow: 0 0 40px var(--bunker-glow);
  width: fit-content;
  margin: 0 auto 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.youtube-subscribe:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px var(--bunker-glow-hover);
}

.youtube-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f5f5f5;
  text-shadow: 0 0 8px var(--bunker-glow);
}

/* === LEXIKON-VORSCHAU: identischer starker Glow === */
.lexikon-preview-box {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--box-radius);
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 0 40px var(--bunker-glow);
  width: 100%;
  max-width: 100%;
  margin: 0 auto 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lexikon-preview-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px var(--bunker-glow-hover);
}

.lexikon-image-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-bottom: 1px solid #333;
}

.lexikon-image-wrapper video {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  background: #000;
  border-radius: var(--box-radius) var(--box-radius) 0 0;
  transform: translateZ(0);
  border-bottom: 1px solid #333;
}

.lexikon-text {
  padding: 1rem;
  text-align: center;
}

.lexikon-text h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #f5f5f5;
}

.lexikon-text p {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #ccc;
}

.lexikon-text small {
  color: #888;
}