/* ==========================================================
   Growshop365 – SEO Manager Frontend Design v2.1
   Kategorien + Produkte, vollständig an Dark-Glass/Emerald angepasst.
   Diese zzz-Datei wird nach den bisherigen Stylesheets geladen.
   ========================================================== */

:root{
  --gs365-seo-bg:#020617;
  --gs365-seo-panel:rgba(15,23,42,.94);
  --gs365-seo-panel-soft:rgba(2,6,23,.52);
  --gs365-seo-panel-hover:rgba(20,83,45,.56);
  --gs365-seo-text:#f8fafc;
  --gs365-seo-body:#d7e0eb;
  --gs365-seo-muted:#aebdce;
  --gs365-seo-green:#22c55e;
  --gs365-seo-lime:#a3e635;
  --gs365-seo-border:rgba(148,163,184,.34);
  --gs365-seo-border-strong:rgba(190,242,100,.54);
  --gs365-seo-radius:18px;
  --gs365-seo-radius-sm:14px;
  --gs365-seo-shadow:0 8px 22px rgba(2,6,23,.38);
}

/* ----------------------------------------------------------
   Grundstruktur und Schutz vor Overflow
   ---------------------------------------------------------- */

.gr21-seo{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:18px 0;
  padding:0;
  color:var(--gs365-seo-body);
  font-family:inherit;
  overflow:visible;
}

.gr21-seo,
.gr21-seo *,
.gr21-seo *::before,
.gr21-seo *::after{
  box-sizing:border-box;
  min-width:0;
}

.gr21-seo img,
.gr21-seo video,
.gr21-seo iframe,
.gr21-seo svg,
.gr21-seo canvas{
  max-width:100%;
}

.gr21-seo p,
.gr21-seo li,
.gr21-seo span,
.gr21-seo strong,
.gr21-seo a,
.gr21-seo h1,
.gr21-seo h2,
.gr21-seo h3,
.gr21-seo h4{
  overflow-wrap:anywhere;
  word-break:normal;
}

.gr21-seo p,
.gr21-seo li{
  color:var(--gs365-seo-body);
  line-height:1.68;
}

.gr21-seo a{
  color:#bef264;
  text-underline-offset:3px;
}

.gr21-seo h2,
.gr21-seo h3,
.gr21-seo h4{
  color:var(--gs365-seo-text);
  font-weight:900;
  line-height:1.22;
  letter-spacing:-.01em;
}

.gr21-seo h2{
  font-size:clamp(1.35rem,2.2vw,2rem);
}

.gr21-seo h3{
  font-size:clamp(1.08rem,1.5vw,1.35rem);
}

/* ----------------------------------------------------------
   Wiederverwendbare Dark-Glass-Flächen
   ---------------------------------------------------------- */

.gr21-seo-intro,
.gr21-seo-top-html,
.gr21-seo-bottom-html,
.gr21-seo-section,
.gr21-seo-faq,
.gr21-seo-product-spotlights{
  width:100%;
  margin:0 0 16px;
  padding:clamp(16px,2.2vw,26px);
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.11),transparent 56%),
    linear-gradient(145deg,rgba(15,23,42,.97),rgba(2,6,23,.92));
  color:var(--gs365-seo-body);
  box-shadow:var(--gs365-seo-shadow);
}

/* Weiße Hintergründe aus im Editor eingefügtem HTML neutralisieren. */
.gr21-seo-intro > *,
.gr21-seo-top-html > *,
.gr21-seo-bottom-html > *,
.gr21-seo-section-body > *,
.gr21-seo-faq-answer > *{
  max-width:100%;
}

.gr21-seo-intro [style*="background"],
.gr21-seo-top-html [style*="background"],
.gr21-seo-bottom-html [style*="background"],
.gr21-seo-section-body [style*="background"]{
  background-color:transparent !important;
}

.gr21-seo-intro p:last-child,
.gr21-seo-top-html p:last-child,
.gr21-seo-bottom-html p:last-child,
.gr21-seo-section-body p:last-child{
  margin-bottom:0;
}

/* ----------------------------------------------------------
   Hero / Subheadline
   ---------------------------------------------------------- */

.gr21-seo-hero-image{
  width:100%;
  min-height:0;
  max-height:420px;
  margin:0 0 16px;
  padding:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.13),transparent 55%),
    rgba(2,6,23,.58);
  box-shadow:var(--gs365-seo-shadow);
}

.gr21-seo-hero-image .gr21-seo-hero-img{
  display:block;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:398px !important;
  margin:0 auto;
  object-position:center;
  border-radius:var(--gs365-seo-radius-sm);
}

.gr21-seo-subheadline{
  margin:0 0 16px;
  padding:16px 20px;
  border:1px solid var(--gs365-seo-border);
  border-left:4px solid var(--gs365-seo-green);
  border-radius:var(--gs365-seo-radius-sm);
  background:rgba(15,23,42,.88);
  color:var(--gs365-seo-text) !important;
  font-size:clamp(1.25rem,2.2vw,1.9rem);
  font-weight:950;
}

/* Auch freie Bilder aus Intro-/Top-/Bottom-HTML begrenzen. */
.gr21-seo-intro img,
.gr21-seo-top-html img,
.gr21-seo-bottom-html img,
.gr21-seo-section-body img{
  display:block;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:420px !important;
  margin:14px auto !important;
  object-fit:contain;
  object-position:center;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius-sm);
  background:rgba(2,6,23,.40);
}

/* ----------------------------------------------------------
   Einzelne SEO-Abschnitte
   ---------------------------------------------------------- */

.gr21-seo-section{
  overflow:hidden;
}

.gr21-seo-section-image{
  width:100%;
  max-height:340px;
  margin:0 0 18px;
  padding:8px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius-sm);
  background:rgba(2,6,23,.44);
}

.gr21-seo-section-image .gr21-seo-img{
  display:block;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:322px !important;
  margin:0 auto;
  object-position:center;
  border-radius:12px;
}

.gr21-seo-section-subheading{
  margin:-4px 0 14px;
  color:#d9f99d !important;
  font-size:1.02rem;
  font-weight:800;
}

/* ----------------------------------------------------------
   Mediengalerie
   ---------------------------------------------------------- */

.gr21-seo-media{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
  margin:0 0 16px;
}

.gr21-seo-media figure{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:10px;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.09),transparent 58%),
    var(--gs365-seo-panel);
  box-shadow:var(--gs365-seo-shadow);
}

.gr21-seo-media figure > a{
  display:grid;
  place-items:center;
  width:100%;
  min-height:0;
}

.gr21-seo-media .gr21-seo-img{
  display:block;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:280px !important;
  margin:0 auto;
  object-position:center;
  border-radius:12px;
}

.gr21-seo-media figcaption{
  margin-top:10px;
  padding:10px 4px 2px;
  color:var(--gs365-seo-muted);
  font-size:.9rem;
  line-height:1.5;
}

/* ----------------------------------------------------------
   Vorteile und Icons
   ---------------------------------------------------------- */

.gr21-seo-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
  margin:0 0 16px;
}

.gr21-seo-benefit-card{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:13px;
  min-width:0;
  padding:17px;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.13),transparent 58%),
    var(--gs365-seo-panel);
  box-shadow:var(--gs365-seo-shadow);
}

.gr21-seo-benefit-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px !important;
  height:46px !important;
  max-width:46px !important;
  padding:10px;
  overflow:hidden;
  border:1px solid #dcfce7;
  border-radius:14px;
  background:#86efac;
  color:#052e16 !important;
  box-shadow:0 6px 16px rgba(2,6,23,.35);
}

.gr21-seo-benefit-icon svg,
.gr21-seo-benefit-icon i{
  display:block;
  width:24px !important;
  height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
  color:#052e16 !important;
  font-size:22px !important;
  line-height:1 !important;
}

.gr21-seo-benefit-icon svg path,
.gr21-seo-benefit-icon svg circle,
.gr21-seo-benefit-icon svg line{
  stroke:currentColor;
}

.gr21-seo-benefit-copy{
  min-width:0;
}

.gr21-seo-benefit-copy > strong{
  display:block;
  margin:1px 0 5px;
  color:var(--gs365-seo-text);
  font-size:1rem;
  font-weight:900;
  line-height:1.35;
}

.gr21-seo-benefit-text,
.gr21-seo-benefit-text p{
  margin:0;
  color:var(--gs365-seo-muted) !important;
  font-size:.92rem;
  line-height:1.55;
}

/* ----------------------------------------------------------
   Interne Links
   ---------------------------------------------------------- */

.gr21-seo-internal-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
  margin:0 0 16px;
}

.gr21-seo-link-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:84px;
  padding:14px 16px;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius);
  background:
    radial-gradient(circle at 0 0,rgba(34,197,94,.11),transparent 58%),
    var(--gs365-seo-panel) !important;
  color:var(--gs365-seo-text) !important;
  text-decoration:none !important;
  box-shadow:var(--gs365-seo-shadow);
  transition:border-color .16s ease,background-color .16s ease;
}

.gr21-seo-link-card.has-image{
  grid-template-columns:82px minmax(0,1fr) auto;
}

.gr21-seo-link-card:hover,
.gr21-seo-link-card:focus{
  border-color:var(--gs365-seo-border-strong);
  background:
    radial-gradient(circle at 0 0,rgba(74,222,128,.18),transparent 58%),
    var(--gs365-seo-panel-hover) !important;
  color:#fff !important;
}

.gr21-seo-link-image{
  display:grid;
  place-items:center;
  width:82px;
  height:68px;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:12px;
  background:rgba(2,6,23,.50);
}

.gr21-seo-link-image img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-height:68px !important;
  object-fit:cover;
  object-position:center;
}

.gr21-seo-link-content{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.gr21-seo-link-title{
  color:var(--gs365-seo-text);
  font-weight:900;
  line-height:1.3;
}

.gr21-seo-link-desc{
  color:var(--gs365-seo-muted);
  font-size:.88rem;
  line-height:1.45;
}

.gr21-seo-link-arrow{
  color:#bef264;
  font-size:1.45rem;
  font-weight:900;
}

/* ----------------------------------------------------------
   Produkt-Spotlights
   ---------------------------------------------------------- */

.gr21-seo-product-spotlights-head{
  margin:0 0 16px;
}

.gr21-seo-product-spotlights-head h2{
  margin:0 0 5px;
}

.gr21-seo-product-spotlights-head p{
  margin:0;
  color:var(--gs365-seo-muted);
}

.gr21-seo-product-spotlight-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.gr21-seo-product-group{
  min-width:0;
  padding:14px;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius);
  background:rgba(2,6,23,.44);
}

.gr21-seo-product-group-head{
  margin:0 0 12px;
}

.gr21-seo-product-group-head h3{
  margin:0 0 3px;
  color:var(--gs365-seo-text);
}

.gr21-seo-product-group-head p{
  margin:0;
  color:var(--gs365-seo-muted);
  font-size:.88rem;
}

.gr21-seo-product-list{
  display:grid;
  gap:10px;
}

.gr21-seo-product-card{
  display:grid;
  grid-template-columns:94px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:104px;
  padding:10px;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius-sm);
  background:rgba(15,23,42,.90) !important;
  color:var(--gs365-seo-text) !important;
  text-decoration:none !important;
  box-shadow:0 5px 14px rgba(2,6,23,.30);
}

.gr21-seo-product-card:hover,
.gr21-seo-product-card:focus{
  border-color:var(--gs365-seo-border-strong);
  background:rgba(20,83,45,.46) !important;
}

.gr21-seo-product-image{
  display:grid;
  place-items:center;
  width:94px;
  height:82px;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:12px;
  background:#fff;
}

.gr21-seo-product-image img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:94px !important;
  max-height:82px !important;
  object-fit:contain !important;
  object-position:center;
}

.gr21-seo-product-image-placeholder{
  background:rgba(2,6,23,.58);
  color:#86efac;
  font-size:.82rem;
  font-weight:900;
}

.gr21-seo-product-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
}

.gr21-seo-product-badge{
  display:inline-flex;
  padding:4px 8px;
  border:1px solid rgba(190,242,100,.64);
  border-radius:999px;
  background:rgba(34,197,94,.18);
  color:#d9f99d;
  font-size:.7rem;
  font-weight:900;
  line-height:1;
}

.gr21-seo-product-name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:var(--gs365-seo-text);
  font-size:.91rem;
  font-weight:850;
  line-height:1.35;
}

.gr21-seo-product-price{
  color:#bef264;
  font-size:1rem;
  font-weight:950;
}

/* ----------------------------------------------------------
   FAQ
   ---------------------------------------------------------- */

.gr21-seo-faq > h2{
  margin-top:0;
}

.gr21-seo-faq-item{
  margin:0 0 9px;
  overflow:hidden;
  border:1px solid var(--gs365-seo-border);
  border-radius:var(--gs365-seo-radius-sm);
  background:rgba(2,6,23,.48);
}

.gr21-seo-faq-item:last-child{
  margin-bottom:0;
}

.gr21-seo-faq-item summary{
  position:relative;
  padding:15px 46px 15px 16px;
  color:var(--gs365-seo-text);
  font-weight:900;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}

.gr21-seo-faq-item summary::-webkit-details-marker{
  display:none;
}

.gr21-seo-faq-item summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  color:#a3e635;
  font-size:1.35rem;
  font-weight:900;
}

.gr21-seo-faq-item[open] summary::after{
  content:"−";
}

.gr21-seo-faq-answer{
  padding:0 16px 16px;
  color:var(--gs365-seo-muted);
}

/* ----------------------------------------------------------
   Tabellen und eingebettete Inhalte
   ---------------------------------------------------------- */

.gr21-seo table{
  display:block;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
}

.gr21-seo th,
.gr21-seo td{
  padding:10px;
  border:1px solid var(--gs365-seo-border);
  color:var(--gs365-seo-body);
  background:rgba(2,6,23,.36);
}

.gr21-seo blockquote{
  margin:14px 0;
  padding:14px 16px;
  border-left:4px solid var(--gs365-seo-green);
  border-radius:0 12px 12px 0;
  background:rgba(2,6,23,.42);
  color:var(--gs365-seo-muted);
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width:1199.98px){
  .gr21-seo-product-spotlight-groups{
    grid-template-columns:1fr;
  }

  .gr21-seo-product-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .gr21-seo-product-card{
    grid-template-columns:78px minmax(0,1fr);
  }

  .gr21-seo-product-image{
    width:78px;
    height:72px;
  }

  .gr21-seo-product-image img{
    max-width:78px !important;
    max-height:72px !important;
  }
}

@media (max-width:991.98px){
  .gr21-seo-benefits,
  .gr21-seo-internal-links,
  .gr21-seo-media{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gr21-seo-product-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gr21-seo-hero-image{
    max-height:340px;
  }

  .gr21-seo-hero-image .gr21-seo-hero-img{
    max-height:318px !important;
  }
}

@media (max-width:767.98px){
  .gr21-seo{
    margin:14px 0;
  }

  .gr21-seo-intro,
  .gr21-seo-top-html,
  .gr21-seo-bottom-html,
  .gr21-seo-section,
  .gr21-seo-faq,
  .gr21-seo-product-spotlights{
    padding:15px;
    border-radius:15px;
  }

  .gr21-seo-subheadline{
    padding:14px 15px;
    font-size:1.25rem;
  }

  .gr21-seo-benefits,
  .gr21-seo-internal-links,
  .gr21-seo-media,
  .gr21-seo-product-list{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }

  .gr21-seo-benefit-card{
    grid-template-columns:42px minmax(0,1fr);
    padding:14px;
  }

  .gr21-seo-benefit-icon{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    padding:9px;
  }

  .gr21-seo-benefit-icon svg,
  .gr21-seo-benefit-icon i{
    width:22px !important;
    height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
  }

  .gr21-seo-link-card.has-image{
    grid-template-columns:68px minmax(0,1fr) auto;
  }

  .gr21-seo-link-image{
    width:68px;
    height:60px;
  }

  .gr21-seo-product-card{
    grid-template-columns:82px minmax(0,1fr);
    min-height:96px;
  }

  .gr21-seo-product-image{
    width:82px;
    height:72px;
  }

  .gr21-seo-product-image img{
    max-width:82px !important;
    max-height:72px !important;
  }

  .gr21-seo-hero-image,
  .gr21-seo-section-image{
    max-height:280px;
  }

  .gr21-seo-hero-image .gr21-seo-hero-img,
  .gr21-seo-section-image .gr21-seo-img,
  .gr21-seo-intro img,
  .gr21-seo-top-html img,
  .gr21-seo-bottom-html img,
  .gr21-seo-section-body img{
    max-height:260px !important;
  }

  .gr21-seo-media .gr21-seo-img{
    max-height:240px !important;
  }
}

@media (max-width:420px){
  .gr21-seo-link-card,
  .gr21-seo-link-card.has-image{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .gr21-seo-link-image{
    display:none;
  }

  .gr21-seo-product-card{
    grid-template-columns:72px minmax(0,1fr);
    gap:9px;
    padding:9px;
  }

  .gr21-seo-product-image{
    width:72px;
    height:66px;
  }

  .gr21-seo-product-image img{
    max-width:72px !important;
    max-height:66px !important;
  }
}

/* Keine teuren Blur-Effekte; flüssigeres Scrollen. */
.gr21-seo,
.gr21-seo *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}