/* =========================================================================
   SNT-Subpages — Global Design System (v2 — reale JTL 5.8-Selektoren)
   Teil 1: Page Shell, Content, Breadcrumb, Pagination
   Teil 2: Kategorien
   Teil 3: Produkt-Grid, Productbox
   Teil 4: Product-Detail
   Teil 5: Formulare, Controls
   Teil 6: Tabellen, Account, Cart, Checkout (nicht 1:1 dokumentiert)
   Teil 7: Empty-States, Alerts, Suche
   Teil 8: Responsive
   ========================================================================= */

/* ---------- 1. PAGE SHELL & CONTENT ---------- */
#result-wrapper, .content-wrapper, main .container {
  max-width: var(--snt-container);
  padding-left: var(--snt-gutter);
  padding-right: var(--snt-gutter);
  margin-inline: auto;
}

/* ---------- TYPOGRAPHIE ---------- */
#result-wrapper h1,
.productlist h1, .content h1, .category h1,
.productdetails h1, .search-page h1 {
  font-family: var(--snt-font-head);
  font-size: var(--snt-fs-h2);
  font-weight: 700;
  line-height: var(--snt-lh-head);
  color: var(--snt-ink-800);
  margin: 0 0 var(--snt-s4);
}

#result-wrapper h2,
.content h2 {
  font-family: var(--snt-font-head);
  font-size: var(--snt-fs-h3);
  font-weight: 700;
  color: var(--snt-ink-700);
  margin: var(--snt-s8) 0 var(--snt-s4);
}

#result-wrapper h3 {
  font-size: var(--snt-fs-h4);
  font-weight: 600;
  color: var(--snt-ink-700);
  margin: var(--snt-s6) 0 var(--snt-s3);
}

/* Fliesstext-Links; Pagination (.page-link) hat eigene Zustaende (7. PAGINATION) und darf
   weder Unterstreichung noch Linkfarbe erben (sonst aktive Seite Blau auf Blau). */
#result-wrapper a:not(.btn):not(.snt-btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.productbox-title a) {
  color: var(--snt-accent-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#result-wrapper a:not(.btn):not(.page-link):hover { color: var(--snt-accent-700); }

/* ---------- 2. KATEGORIE-PAGES ---------- */
.content-categories .sub-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--snt-grid-gap);
  margin: var(--snt-s5) 0 var(--snt-s8);
}
.content-categories .sub-categories .sub-category {
  display: flex;
  flex-direction: column;
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-r-lg);
  overflow: hidden;
  box-shadow: var(--snt-e1);
  transition: transform var(--snt-dur-2), box-shadow var(--snt-dur-2), border-color var(--snt-dur-2);
}
.content-categories .sub-categories .sub-category:hover {
  transform: translateY(-3px);
  box-shadow: var(--snt-e2);
  border-color: var(--snt-accent-400);
}
.content-categories .sub-categories .sub-category .image-wrapper,
.content-categories .sub-categories .sub-category a[href] > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--snt-surface-2);
}
.content-categories .sub-categories .sub-category h3 {
  font-size: var(--snt-fs-h4);
  font-weight: 700;
  color: var(--snt-ink-800);
  margin: var(--snt-s3) var(--snt-s4) var(--snt-s4);
}
.content-categories .sub-categories .sub-category h3 a { color: inherit; text-decoration: none; }
.content-categories .sub-categories .sub-category h3 a:hover { color: var(--snt-accent-600); }

/* ---------- 3. PRODUKT-GRID & PRODUCTBOX ---------- */
.product-list .productbox.productbox-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 0 var(--snt-s4);
  padding: var(--snt-s4);
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-r-lg);
  box-shadow: var(--snt-e1);
  transition: transform var(--snt-dur-2), box-shadow var(--snt-dur-2), border-color var(--snt-dur-2);
}
.product-list .productbox.productbox-column:hover {
  transform: translateY(-3px);
  box-shadow: var(--snt-e2);
  border-color: var(--snt-accent-400);
}

/* Produktbild (Listing, Suche, Liste): der first-wrapper ist der quadratische Rahmen im Fluss,
   das Bild fuellt ihn per object-fit: contain. Kein translate-Zentrieren aus NOVA
   (.square-image .inner img), damit ein Hover-Scale die Zentrierung nicht ersetzt.
   Der second-wrapper liegt als transparentes Overlay darueber; der Bildwechsel laeuft
   allein ueber opacity (NOVA .list-gallery img.first/.second). */
.productbox .productbox-image .square {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  background: var(--snt-surface-1);
  border-radius: var(--snt-r-md);
  overflow: hidden;
}
.productbox .productbox-image .second-wrapper {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.productbox .productbox-image .square .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.productbox .productbox-image img {
  position: static;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  padding: var(--snt-s2);
}

/* Title + Price */
.productbox .productbox-title {
  margin: var(--snt-s3) 0 var(--snt-s2);
}
.productbox .productbox-title a {
  font-family: var(--snt-font-head);
  font-size: var(--snt-fs-body);
  font-weight: 600;
  line-height: var(--snt-lh-head);
  color: var(--snt-ink-800);
  text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.productbox .productbox-title a:hover { color: var(--snt-accent-600); }

.productbox .price, .productbox .item-list-price {
  font-size: var(--snt-fs-lead);
  font-weight: 700;
  color: var(--snt-ink-900);
}
.productbox .price .footnote-vat,
.productbox .item-list-price .footnote-vat {
  display: block;
  font-size: var(--snt-fs-xs);
  font-weight: 400;
  color: var(--snt-text-muted);
}

/* ---------- SUBPAGE TOOLBAR ---------- */
.productlist-header {
  padding: var(--snt-s4) 0 var(--snt-s5);
}
.btn-group .btn, .productlist-header .btn {
  border-radius: var(--snt-r-sm);
  min-height: 40px;
}
select.form-control {
  min-height: 44px;
}

/* ---------- 4. PRODUKT DETAIL ---------- */
.productdetails .product-gallery {
  background: var(--snt-surface-1);
  border: 1px solid var(--snt-line-soft);
  border-radius: var(--snt-r-lg);
  overflow: hidden;
}
.productdetails .product-gallery img,
.productdetails .gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
.productdetails .product-info,
.productdetails .product-detail {
  display: flex;
  flex-direction: column;
  gap: var(--snt-s3);
}
.productdetails .buy-box {
  padding: var(--snt-s4);
  border: 1px solid var(--snt-line-soft);
  border-radius: var(--snt-r-md);
  background: var(--snt-surface-1);
}
.productdetails .buy-box .price {
  font-size: var(--snt-fs-h2);
  font-weight: 700;
  color: var(--snt-ink-900);
}
.productdetails .variations select,
.productdetails .form-control {
  min-height: 44px;
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-r-sm);
  padding: var(--snt-s2) var(--snt-s3);
}
.productdetails .form-control:focus {
  border-color: var(--snt-accent-600);
  box-shadow: 0 0 0 3px rgba(0,102,204,.15);
  outline: none;
}
.productdetails .nav-tabs {
  border-bottom: 2px solid var(--snt-line-soft);
  gap: var(--snt-s4);
}
.productdetails .nav-tabs .nav-link {
  border: 0;
  color: var(--snt-text-muted);
  font-weight: 600;
  padding: var(--snt-s3) var(--snt-s4);
}
.productdetails .nav-tabs .nav-link:hover,
.productdetails .nav-tabs .nav-link.active {
  color: var(--snt-accent-600);
  background: transparent;
}
/* PDP-Tabs (NOVA nav.tab-navigation > #product-tabs): keine Unterstreichung.
   NOVA clear zeichnet eine animierte ::after-Linie (width-Transition),
   snt-v6 eine border-bottom — beides entfernt. Aktiv = Gewicht + SNT-Farbe.
   Scope nur Tab-Links; Listen in der Beschreibung bleiben unberuehrt. */
.tab-navigation .nav-tabs .nav-link,
.tab-navigation .nav-tabs .nav-link:hover,
.tab-navigation .nav-tabs .nav-link:focus,
.tab-navigation .nav-tabs .nav-link.active {
  border: 0;
  box-shadow: none;
  text-decoration: none;
  background: transparent;
}
.tab-navigation .nav-tabs .nav-link:not(.dropdown-toggle)::before,
.tab-navigation .nav-tabs .nav-link:not(.dropdown-toggle)::after {
  content: none;
  display: none;
}
.tab-navigation .nav-tabs .nav-link { color: var(--snt-text-muted); font-weight: 600; }
.tab-navigation .nav-tabs .nav-link:hover { color: var(--snt-brand-700); }
.tab-navigation .nav-tabs .nav-link.active { color: var(--snt-accent-600); font-weight: 700; }

/* ---------- 7. PAGINATION ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--snt-s2);
  padding: var(--snt-s5) 0;
}
.pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  padding: var(--snt-s2) var(--snt-s3);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-r-sm);
  background: var(--snt-surface-0);
  color: var(--snt-text);
  font-size: var(--snt-fs-sm); font-weight: 600;
  text-decoration: none;
  transition: border-color var(--snt-dur-1), background-color var(--snt-dur-1);
}
.pagination .page-link:hover {
  border-color: var(--snt-accent-600);
  background: var(--snt-accent-050);
  color: var(--snt-accent-700);
}
.pagination .page-item.active .page-link {
  background: var(--snt-accent-600);
  border-color: var(--snt-accent-600);
  color: #fff;
}

/* ---------- FORMULARE ---------- */
.form-control, .custom-select {
  min-height: 44px;
  padding: var(--snt-s2) var(--snt-s3);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-r-sm);
  background: var(--snt-surface-0);
  color: var(--snt-text);
  font-size: var(--snt-fs-body);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--snt-accent-600);
  box-shadow: 0 0 0 3px rgba(0,102,204,.15);
  outline: none;
}
label { font-weight: 600; color: var(--snt-ink-700); margin-bottom: var(--snt-s2); }
.btn-primary {
  background: var(--snt-accent-600);
  border-color: var(--snt-accent-600);
  color: #fff;
  border-radius: var(--snt-r-sm);
  padding: var(--snt-s2) var(--snt-s5);
  min-height: 44px;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--snt-accent-700);
  border-color: var(--snt-accent-700);
}
.btn-outline-primary {
  border: 1px solid var(--snt-accent-600);
  color: var(--snt-accent-600);
  border-radius: var(--snt-r-sm);
}
.btn-outline-primary:hover {
  background: var(--snt-accent-050);
  color: var(--snt-accent-700);
  border-color: var(--snt-accent-700);
}

/* ---------- TABELLEN ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { background: var(--snt-surface-1); font-weight: 700; color: var(--snt-ink-700); padding: var(--snt-s3) var(--snt-s4); border-bottom: 2px solid var(--snt-line); }
.table td { padding: var(--snt-s3) var(--snt-s4); border-bottom: 1px solid var(--snt-line-soft); }

/* ---------- EMPTY STATES ---------- */
.alert-danger { background: var(--snt-bad-050); border-color: var(--snt-bad-500); color: var(--snt-bad-500); }
.alert-success { background: var(--snt-ok-050); border-color: var(--snt-ok-500); color: var(--snt-ok-500); }
.alert-warning { background: var(--snt-warn-050); border-color: var(--snt-warn-500); color: var(--snt-warn-text); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .product-list .productbox.productbox-column { margin-bottom: var(--snt-s3); }
}
@media (max-width: 768px) {
  .product-list .productbox.productbox-column {
    padding: var(--snt-s3);
    border-radius: var(--snt-r-md);
  }
}
/* =========================================================================
   Teil 9 — SNT6.0-Rahmen fuer reale JTL-Unterseiten (Kategorie, Listing,
   PDP, Suche, Warenkorb, Konto, 404). Nur Praesentation auf NOVA-5.8-Markup;
   Filter/Sortierung/Pagination/Warenkorb-Logik bleiben NOVA/JTL.
   ========================================================================= */

/* ---------- 9.1 Seitenband (layout/header.tpl: layout-header-breadcrumb) ----------
   Gleiche Sprache wie der Startseiten-Hero: heller Marine-Tint + Technik-Raster,
   full-bleed ohne Layout-Verschiebung (box-shadow/clip-path statt negativer Margins). */
.snt-pageband {
  position: relative;
  background-color: var(--snt-hero-bg);
  background-image:
    linear-gradient(rgba(28,52,68,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,52,68,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: 0 0 0 100vmax var(--snt-hero-bg);
  clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--snt-line-soft);
  margin-bottom: var(--snt-s6);
}
.snt-pageband::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 72px; height: 2px; background: var(--snt-accent-600);
}
.snt-pageband .breadcrumb-container { padding-top: var(--snt-s4); padding-bottom: var(--snt-s4); }
.snt-pageband .breadcrumb-wrapper { margin: 0; }
.snt-pageband .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--snt-fs-sm); }

/* ---------- 9.2 Seitentitel (Kategorie, Suche, Content, Konto) ---------- */
.snt-pagehead { margin-bottom: var(--snt-s6); }
.snt-pagehead__title h1,
#content > h1, .index-heading-wrapper h1, #account h1, .basket h1 {
  font-family: var(--snt-font-head);
  font-weight: 700;
  letter-spacing: var(--snt-ls-head);
  color: var(--snt-text-strong);
}
.snt-pagehead__title h1::after,
.index-heading-wrapper h1::after {
  content: ""; display: block; width: 48px; height: 3px; margin-top: var(--snt-s3);
  background: var(--snt-accent-600); border-radius: var(--snt-r-pill);
}

/* ---------- 9.3 Filter-Sidebar (NOVA #sidepanel_left .box-filter-*) ---------- */
#sidepanel_left .box {
  background: var(--snt-surface-0);
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-card-radius, var(--snt-r-lg));
  padding: var(--snt-s2) var(--snt-s4);
  margin-bottom: var(--snt-s3);
  box-shadow: var(--snt-e1);
}
#sidepanel_left .box .btn-filter-box {
  font-family: var(--snt-font-head);
  font-weight: 700;
  font-size: var(--snt-fs-sm);
  color: var(--snt-text-strong);
  text-decoration: none;
  padding: var(--snt-s3) 0;
  min-height: 44px;
}
#sidepanel_left .box .btn-filter-box:hover { color: var(--snt-accent-600); }
#sidepanel_left .box-filter-hr { display: none; }
#sidepanel_left .box .nav-link,
#sidepanel_left .box .filter-item {
  border-radius: var(--snt-r-sm);
  color: var(--snt-text);
  transition: background-color var(--snt-dur-1), color var(--snt-dur-1);
}
#sidepanel_left .box .nav-link:hover,
#sidepanel_left .box .filter-item:hover { background: var(--snt-accent-050); color: var(--snt-accent-700); }
#sidepanel_left .box .active > .nav-link,
#sidepanel_left .box .filter-item.active { color: var(--snt-accent-700); font-weight: 600; }

/* Aktive Filter-Chips + Toolbar oberhalb des Listings */
.active-filters .btn, .productlist-filter-footer .btn, .snt-result-options .btn {
  border-radius: var(--snt-r-pill);
}
.active-filters .btn-outline-secondary,
.active-filters .btn-light {
  background: var(--snt-accent-050); border-color: transparent; color: var(--snt-accent-700);
}

/* ---------- 9.4 Produktkarte: Bild-Zoom + Fokus (Listing & Slider) ---------- */
.productbox .productbox-image img { transition: transform var(--snt-dur-4) var(--snt-ease-out), opacity var(--snt-dur-4) linear; }
.productbox:hover .productbox-image img { transform: scale(1.04); }
/* Ohne echtes Hover (Touch): kein haengender :hover-Zustand nach Tap, Erstbild bleibt sichtbar. */
@media (hover: none) {
  .productbox .list-gallery:hover img.first { opacity: 1; }
  .productbox .list-gallery:hover img.second { opacity: 0; }
  .productbox:hover .productbox-image img { transform: none; }
}
.productbox:focus-within { border-color: var(--snt-accent-600); }
.productbox .ribbon { border-radius: var(--snt-r-xs); font-family: var(--snt-font-tech); letter-spacing: .04em; }

/* ---------- 9.5 PDP: Galerie/Buybox als Karten ---------- */
.productdetails .product-actions .btn, #add-to-cart .btn { min-height: 48px; }
#add-to-cart .btn-primary { font-family: var(--snt-font-head); letter-spacing: .02em; }
.productdetails .product-offer { border-radius: var(--snt-card-radius, var(--snt-r-lg)); }

/* ---------- 9.6 Suche (Trefferliste nutzt Listing-Styles; Kopf + Leerzustand) ---------- */
.search-wrapper, .productlist-page-nav { margin-block: var(--snt-s4); }
.productlist-page-nav .productlist-item-info { color: var(--snt-text-muted); font-size: var(--snt-fs-sm); }

/* ---------- 9.7 Warenkorb / Konto: Karten-Flaechen ---------- */
.basket-summary, .cart-summary, #account .card, .account-data .card {
  border: 1px solid var(--snt-line);
  border-radius: var(--snt-card-radius, var(--snt-r-lg));
  box-shadow: var(--snt-e1);
  background: var(--snt-surface-0);
}
#account .card-header, .account-data .card-header {
  background: var(--snt-surface-1);
  border-bottom: 1px solid var(--snt-line-soft);
  font-family: var(--snt-font-head);
  font-weight: 700;
}

/* ---------- 9.8 Startseite: Bild-Leerzustaende (Haeufig angefragt / Fachbeitraege) ---------- */
.snt-prod-card__img { text-decoration: none; }
.snt-prod-card__img img { transition: transform var(--snt-dur-4) var(--snt-ease-out); }
.snt-prod-card:hover .snt-prod-card__img img { transform: scale(1.04); }
.snt-prod-card__img--empty { color: var(--snt-line-strong); }
.snt-card__media { display: block; }
.snt-card__ph { display: grid; place-items: center; width: 100%; height: 100%; }

/* ---------- 9.9 Motion-Guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .productbox .productbox-image img,
  .snt-prod-card__img img { transition: none; }
  .productbox:hover .productbox-image img,
  .snt-prod-card:hover .snt-prod-card__img img { transform: none; }
}

/* ---------- 9.10 Mobile (<= 575px / 375px-Ziel) ---------- */
@media (max-width: 575.98px) {
  .snt-pageband { margin-bottom: var(--snt-s4); }
  .snt-pageband .breadcrumb-container { padding-top: var(--snt-s3); padding-bottom: var(--snt-s3); }
  .snt-pagehead { margin-bottom: var(--snt-s4); }
  #sidepanel_left .box { padding: var(--snt-s1) var(--snt-s3); }
}