/* =========================================================
   AnhängerTeileSpezi – CUSTOM CSS (NOVAChild)
   - Basisfarben & Typo
   - Buttons/Badges/Cards
   - CMS-/Well-Container neutralisieren
   - Details/Summary (einklappbar, ohne Rahmen)
   - Suchfeld-Optik
   - Logo größer NUR auf Desktop (ultra-spezifisch)
   ========================================================= */
/* JTL-Kategorietitel im Result-Wrapper ausblenden */
#result-wrapper .title > h1.h2 {
  display: none !important;
}
/* Farben & Variablen */
:root{
  --ats-blue:#0051ff;
  --ats-blue-dark:#003dcc;
  --ats-text:#1f2937;
  --ats-muted:#6b7280;
  --ats-border:#e5e7eb;
}

/* Grundschrift & Links */
body{color:var(--ats-text);}
a{color:var(--ats-blue);text-decoration:none;}
a:hover,a:focus{color:var(--ats-blue-dark);text-decoration:underline;}

/* Buttons (NOVA/Bootstrap) */
.btn-primary,
button.btn-primary{
  background:var(--ats-blue);
  border-color:var(--ats-blue);
  color:#ffffff;          /* weiße Schrift im Button */
  font-weight:600;
}
.btn-primary:hover,
button.btn-primary:hover{
  background:var(--ats-blue-dark);
  border-color:var(--ats-blue-dark);
  color:#ffffff;          /* auch beim Hover weiß lassen */
}

/* Badges/Labels */
.badge,.label{background:var(--ats-blue);color:#fff;}

/* Cards */
.card{border-color:var(--ats-border);}
.card-title a{color:var(--ats-text);}
.card-title a:hover{color:var(--ats-blue-dark);}

/* ---------------------------------------------------------
   CMS-/Well-Blöcke neutralisieren
   --------------------------------------------------------- */
.well,
.link-content,
.link-content .well{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.link-content{margin-top:1rem;margin-bottom:2rem;}

/* ---------------------------------------------------------
   Details/Summary – einklappbare Boxen ohne Rahmen
   --------------------------------------------------------- */
.link-content details,
.container details,
details,
details[open]{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:.25rem 0 !important;
  padding:0 !important;
  outline:none !important;
}

/* Kopfzeile der Klappbox */
summary{
  display:block;
  font-weight:600;
  cursor:pointer;
  padding:4px 0 !important;
  background:transparent !important;
  border:none !important;
  color:var(--ats-blue);
}

/* Standard-Pfeil entfernen + eigenen Pfeil anzeigen */
summary::-webkit-details-marker{display:none;}
summary::before{
  content:"▸";
  color:var(--ats-blue);
  margin-right:6px;
  transition:transform .2s ease;
}
details[open] summary{color:#222;}
details[open] summary::before{transform:rotate(90deg);}

/* Fallback gegen doppelte Marker */
summary{list-style:none !important;}
details summary{list-style-type:none !important;}
details summary::-webkit-details-marker,
details summary::marker{display:none !important;content:none !important;}

/* ---------------------------------------------------------
   Suchfeld-Optik (nur Styling – keine Positionslogik)
   --------------------------------------------------------- */
@media (min-width:992px){
  /* Breite/Look des Formulars (greift für Standard-Suche) */
  .header-search,
  .search-wrapper,
  form[name="suche"],
  form[action*="suche"]{
    width:520px !important;
    max-width:40vw;
  }

  .header-search input[type="text"],
  .search-wrapper input[type="text"],
  form[name="suche"] input[type="text"],
  form[action*="suche"] input[type="text"]{
    height:44px;
    border-radius:999px;
    padding:0 14px;
    border:1px solid var(--ats-border);
    box-shadow:none;
  }

  .header-search button,
  .search-wrapper button,
  form[name="suche"] button,
  form[action*="suche"] button{
    height:44px;
    border-radius:999px;
    padding:0 16px;
    border:1px solid var(--ats-blue);
    background:var(--ats-blue);
    color:#fff;
  }

  .header-search input[type="text"]:focus,
  .search-wrapper input[type="text"]:focus,
  form[name="suche"] input[type="text"]:focus,
  form[action*="suche"] input[type="text"]:focus{
    outline:none;
    border-color:var(--ats-blue);
    box-shadow:0 0 0 3px rgba(0,81,255,.12);
  }

  .header-search button:hover,
  .search-wrapper button:hover,
  form[name="suche"] button:hover,
  form[action*="suche"] button:hover{
    background:var(--ats-blue-dark);
    border-color:var(--ats-blue-dark);
  }
}

/* Placeholder etwas dezenter */
.header-search input::placeholder,
.search-wrapper input::placeholder,
form[name="suche"] input::placeholder{color:var(--ats-muted);}

/* ---------------------------------------------------------
   Logo größer NUR auf Desktop (ultra-spezifisch für NOVA)
   Greift dein <img id="shop-logo"> und überstimmt 49px-Regeln.
   --------------------------------------------------------- */
@media (min-width:992px){
  /* Bild selbst */
  #jtl-nav-wrapper .toggler-logo-wrapper a.navbar-brand > img#shop-logo,
  #jtl-nav-wrapper #logo a.navbar-brand > img#shop-logo,
  header#jtl-nav-wrapper a.navbar-brand > img#shop-logo{
    height:96px !important;       /* <- Wunschhöhe: 88/96/100 anpassen */
    max-height:96px !important;
    width:auto !important;
    object-fit:contain;
    display:block;
  }

  /* Brand-Container nimmt die Höhe auf und richtet mittig aus */
  #jtl-nav-wrapper a.navbar-brand{
    display:flex !important;
    align-items:center !important;
    min-height:96px !important;   /* gleich der Logo-Höhe */
    line-height:1 !important;
    padding:8px 0 !important;
  }
}

/* =========================================================
   Mobile & Tablet Header-Optimierung – Logo links neben Menü
   ========================================================= */
@media (max-width: 991.98px) {
  /* Logo etwas kleiner halten */
  #jtl-nav-wrapper img#shop-logo,
  header img#shop-logo {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain;
    display: block;
  }

  /* Logo links ausrichten statt zentrieren */
  #jtl-nav-wrapper .navbar-brand,
  header .navbar-brand {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 6px 0 !important;
    margin-left: 0 !important;
  }

  /* Suchleiste unten mit etwas Abstand */
  .header-search,
  .search-wrapper,
  form[name="suche"],
  form[action*="suche"] {
    margin-top: 0.5rem;
  }
}

/* Sidebar-Kategorien */
.sidebar .nav .active > a,
.sidebar .category-nav .active > a {
  font-weight: 600;
  text-decoration: none;
}
.sidebar .category-nav a:hover {
  text-decoration: underline;
}
.sidebar .category-nav .nav .nav .nav-link { padding-left: 1.25rem; }
.sidebar .category-nav .nav .nav .nav .nav-link { padding-left: 1.75rem; }

/* Footer-Links */
.footer-links li,
.footer-contacts li { margin: .4rem 0; }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a:focus { text-decoration: underline; }

#footer .btn-outline-secondary { width: 2rem; height: 2rem; padding: 0; }
#footer .btn-outline-secondary i { line-height: 2rem; }

/* Hinweis-Banner */
.banner-hinweis {
  background-color: #ffeb3b;
  color: #000;
  text-align: center;
  padding: 12px 15px;
  font-size: 16px;
  font-weight: bold;
  z-index: 9999;
}
@media (max-width: 768px) {
  .banner-hinweis {
    font-size: 14px;
    padding: 10px 12px;
  }
}
/* Button-Text im Kategorie-Text wirklich weiß erzwingen */
a.btn.btn-primary,
a.btn.btn-primary:link,
a.btn.btn-primary:visited,
a.btn.btn-primary:hover,
a.btn.btn-primary:active,
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active {
  color: #ffffff !important;
}
/* JTL-Kategorietitel (grau) im Result-Wrapper ausblenden */
#result-wrapper .title > h1.h2 {
  display: none !important;
}
/* Kategorie-Überschriften ATS-Style */
.ats-category-title{
  color:var(--ats-blue);
  font-size:clamp(1.5rem, 2vw, 1.9rem);
  margin:0 0 .75rem 0;
  font-weight:700;
}

.ats-category-intro{
  margin:0 0 .75rem 0;
  font-size:0.98rem;
}

/* Einklapp-Menüs (Accordion) in ATS-Optik */
details.ats-accordion{
  border-top:1px solid var(--ats-border);
  padding:.35rem 0;
  margin:0;
}

details.ats-accordion:last-of-type{
  border-bottom:1px solid var(--ats-border);
}

details.ats-accordion summary{
  list-style:none;
  cursor:pointer;
  font-weight:600;
  font-size:0.98rem;
  color:var(--ats-blue);
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.15rem 0;
}

details.ats-accordion summary::-webkit-details-marker{
  display:none;
}

details.ats-accordion[open] summary{
  color:var(--ats-blue-dark);
}

.ats-accordion-content{
  padding:.25rem 0 .3rem 1.2rem;
  font-size:0.95rem;
}

.ats-accordion-content p{
  margin:0 0 .4rem 0;
}

.ats-accordion-content ul{
  margin:0 0 .4rem 1.1rem;
  padding:0;
}
/* Einheitliche Landwirtschaft-Pfeile für alle ATS-Accordions */
details.ats-accordion summary::before{
    content: "▸";   /* geschlossener Pfeil */
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    margin-right: .25rem;
}

/* geöffnetes Accordion */
details.ats-accordion[open] summary::before{
    content: "▾";   /* Pfeil nach unten */
}
/* Oberen Abstand beim ersten Accordion entfernen */
.ats-category-title + details.ats-accordion {
    margin-top: 0 !important;
    padding-top: 0 !important;
}