/* iTS Shop – Gestaltung der Shop-Übersicht und Produktseiten (mu-plugin its-shop.php). Farben aus den Enfold-Einstellungen:
   Rot #e30615, Linien #e1e1e1, Flächen #f8f8f8, Überschriften #3d3d3d. Varianten über Body-Klassen its-shop-s1..3 / its-produkt-p1..3. */

/* Band „Prüfanlage konfigurieren“ (Übersicht, Kategorien), auf Wunsch mit Einstieg über die Prüfung */
.its-band { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; background: #f8f8f8;
  border: 1px solid #e1e1e1; border-left: 4px solid #e30615; padding: 18px 22px; margin: 0 0 28px; }
.its-band-text { flex: 1 1 340px; min-width: 0; }
.its-band h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.its-band p { margin: 0; }
#top .its-band-knopf { display: inline-block; background: #e30615; color: #fff; padding: 11px 22px; border-radius: 3px; font-weight: 600; text-decoration: none; white-space: nowrap; }
#top .its-band-knopf:hover { background: #b80511; color: #fff; }
.its-pruefwahl-kopf { flex-basis: 100%; font-weight: 600; color: #3d3d3d; border-top: 1px solid #e1e1e1; padding-top: 12px; }
.its-pruefwahl { list-style: none; margin: 0; padding: 0; flex-basis: 100%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.its-pruefwahl li, .its-sprung li, .its-familien-nav li { margin: 0; padding: 0; list-style: none; } /* Enfold setzt sonst Aufzählungspunkte */
.its-pruefwahl li::before, .its-sprung li::before, .its-familien-nav li::before { display: none; content: none; }
#top .its-pruefwahl a { display: grid; gap: 2px; background: #fff; border: 1px solid #e1e1e1; border-radius: 3px; padding: 8px 10px; text-decoration: none; color: #3d3d3d; height: 100%; box-sizing: border-box; }
#top .its-pruefwahl a:hover { border-color: #e30615; }
.its-pruefwahl b { color: #e30615; font-size: 14px; white-space: nowrap; }
.its-pruefwahl span { font-size: 12.5px; line-height: 1.3; }

/* Karten im Katalog: blasse Enfold-Links „Weiterlesen/Zeige Details“ aus, Knöpfe des mu-plugins iTS Anfrage bleiben */
#top .products .product .avia_cart_buttons { text-align: center; opacity: 1; padding: 10px 0; }
#top .products .product .avia_cart_buttons .button { opacity: 1; float: none; display: inline-block; width: auto; font-size: 13px; padding: 8px 16px; line-height: 1.3; }
#top .products .product .avia_cart_buttons .button.show_details_button { display: none; }
/* Enfold setzt ein Warenkorb-Symbol in jeden Knopf – passt nicht zu „Konfigurieren“ / „Anfragen“ */
#top .its-anfrage-konfig .avia-svg-icon, #top .its-anfrage-plus .avia-svg-icon { display: none; }

/* S2: nach Familien – Navigator links (mitlaufend), Katalog mit Seitenzahlen und Enfold-Seitenleiste aus */
.its-shop-s2 .its-familien ~ ul.products, .its-shop-s2 .pagination, .its-shop-s2 .product-sorting, .its-shop-s2 .woocommerce-result-count,
.its-shop-s2 .woocommerce-pagination { display: none !important; }
.its-shop-s2 .sidebar { display: none !important; }
.its-shop-s2 .content.units { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; }
.its-familien { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0 36px; align-items: start; }
/* Enfold setzt overflow: hidden auf body und #wrap_all – damit kann position: sticky nicht greifen (die Leiste lief weg,
   Markus 11.10.). „clip“ schneidet genauso ab, macht aber keinen eigenen Scrollbereich; nur auf der Shop-Übersicht. */
#top.its-shop-s2 { overflow-x: clip; overflow-y: visible; }
#top.its-shop-s2 #wrap_all { overflow: clip; }
.its-familien-nav { position: sticky; top: 100px; border-right: 1px solid #e1e1e1; padding-right: 18px; max-height: calc(100vh - 120px); overflow: auto; }
.its-familien-nav-titel { font-weight: 600; font-size: 15px; color: #3d3d3d; margin: 0 0 8px; }
.its-familien-nav ul { margin: 0; padding: 0; }
.its-familien-nav ul ul { margin: 2px 0 6px 12px; border-left: 2px solid #e1e1e1; padding-left: 8px; }
#top .its-familien-nav a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; text-decoration: none; color: #3d3d3d; font-size: 13.5px; line-height: 1.3; }
#top .its-familien-nav ul ul a { font-size: 12.5px; color: #666; padding: 3px 0; }
#top .its-familien-nav a:hover { color: #e30615; }
.its-familien-nav a span { color: #999; font-size: 12px; }
/* Prüfzeichen und Kurzzeile je Familie: nur in den Varianten n2–n4 (Vorschlag 11.10.), in n1 unsichtbar */
.its-nav-symbol, .its-nav-titel small { display: none; }
#top .its-familien-nav .image-overlay { display: none !important; } /* Enfold hängt an Links mit Bild eine Überblendung an */
#top .its-nav-titel { font-weight: inherit; font-style: normal; color: inherit; min-width: 0; hyphens: auto; -webkit-hyphens: auto; } /* Enfold färbt fette Schrift in Links sonst rot */

@media (min-width: 990px) {
  /* N2 – Karten: jede Familie ein eigener Kasten, Anzahl als rote Marke */
  .its-nav-n2 .its-familien-nav { border-right: 0; padding-right: 0; }
  .its-nav-n2 .its-familien-nav-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #888; }
  .its-nav-n2 .its-familien-nav > ul > li { background: #f8f8f8; border: 1px solid #e1e1e1; border-radius: 4px; margin: 0 0 6px; overflow: hidden; }
  #top.its-nav-n2 .its-familien-nav > ul > li > a { align-items: center; padding: 9px 10px 9px 11px; font-weight: 600; font-size: 13.5px; border-left: 3px solid transparent; }
  #top.its-nav-n2 .its-familien-nav > ul > li > a:hover { border-left-color: #e30615; background: #fff; color: #e30615; }
  .its-nav-n2 .its-familien-nav > ul > li > a span { background: #e30615; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; line-height: 18px; font-weight: 600; align-self: center; flex: 0 0 auto; }
  .its-nav-n2 .its-familien-nav ul ul { margin: 0; border-left: 0; padding: 4px 10px 8px 14px; background: #fff; border-top: 1px solid #e1e1e1; }
  #top.its-nav-n2 .its-familien-nav ul ul a { padding: 4px 0; }
  /* lange Namen („Druckwasserstrahlkammern“) trennen statt unter die Anzahl laufen lassen */
  .its-nav-n2 .its-nav-titel { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  /* Kürzel vor dem Familiennamen (Markus 12.10.: Stil 1 „passt“ – nach Prüfzeichen, Produktbild, Linien-, Flächen- und
     Piktogramm-Symbolen): dunkle Kachel mit weißer Schrift, beim Überfahren rot; Untergruppen bündig unter dem Namen */
  .its-nav-n2.its-nav-m7 .its-nav-symbol { display: grid; place-items: center; width: 36px; height: 30px; flex: 0 0 36px; background: #3d3d3d; color: #fff; border-radius: 4px;
    font: 700 11.5px/1 inherit; font-style: normal; letter-spacing: .02em; transition: background .15s; }
  #top.its-nav-n2.its-nav-m7 .its-familien-nav > ul > li > a:hover .its-nav-symbol { background: #e30615; }
  #top.its-nav-n2.its-nav-m7 .its-familien-nav > ul > li > a { justify-content: flex-start; gap: 10px; }
  .its-nav-n2.its-nav-m7 .its-nav-titel { flex: 1; font-weight: 600; text-align: left; }
  .its-nav-n2.its-nav-m7 .its-familien-nav ul ul { padding-left: 57px; }

  /* N3 – Prüfzeichen: Symbol der Hauptprüfung, Name fett, darunter die Norm; Untergruppen eingerückt */
  .its-nav-n3 .its-familien { grid-template-columns: 280px minmax(0, 1fr); }
  .its-nav-n3 .its-familien-nav { border-right: 1px solid #e1e1e1; }
  .its-nav-n3 .its-nav-symbol { display: block; width: 46px; height: 46px; flex: 0 0 46px; }
  .its-nav-n3 .its-nav-symbol img { width: 46px; height: 46px; display: block; }
  #top.its-nav-n3 .its-familien-nav > ul > li > a { justify-content: flex-start; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eee; }
  #top.its-nav-n3 .its-nav-titel { flex: 1; font-weight: 600; font-size: 13px; line-height: 1.25; color: inherit; text-align: left; }
  #top.its-nav-n3 .its-familien-nav a:hover .its-nav-titel { color: #e30615; }
  .its-nav-n3 .its-nav-titel small { display: block; font-weight: 400; font-size: 11.5px; color: #888; margin-top: 1px; }
  .its-nav-n3 .its-familien-nav ul ul { margin: 2px 0 6px 56px; border-left: 0; padding-left: 0; }
  #top.its-nav-n3 .its-familien-nav ul ul a { padding: 3px 0; justify-content: flex-start; gap: 4px; }
  #top.its-nav-n3 .its-familien-nav ul ul a span { margin-left: auto; }
  #top.its-nav-n3 .its-familien-nav ul ul a::before { content: "– "; color: #e30615; }

  /* N4 – Dunkle Leiste: Fläche in Enfold-Dunkelgrau, weiße Schrift, Anzahl in Rot */
  .its-nav-n4 .its-familien-nav { background: #3d3d3d; border-right: 0; padding: 16px 14px; border-radius: 4px; }
  .its-nav-n4 .its-familien-nav-titel { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; border-bottom: 2px solid #e30615; padding-bottom: 8px; margin-bottom: 10px; }
  #top.its-nav-n4 .its-familien-nav a, #top.its-nav-n4 .its-nav-titel { color: #fff; }
  #top.its-nav-n4 .its-familien-nav > ul > li > a { font-weight: 600; padding: 7px 6px; border-radius: 3px; }
  #top.its-nav-n4 .its-familien-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  #top.its-nav-n4 .its-familien-nav ul ul a { color: #c9c9c9; padding: 3px 6px; }
  .its-nav-n4 .its-familien-nav a span { color: #fff; background: #e30615; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 600; align-self: center; }
  .its-nav-n4 .its-familien-nav ul ul a span { background: transparent; color: #9a9a9a; }
  .its-nav-n4 .its-familien-nav ul ul { border-left-color: rgba(255, 255, 255, .18); }
}
.its-familie { margin: 0 0 44px; scroll-margin-top: 110px; }
.its-familie::after { content: ""; display: table; clear: both; } /* Enfold-Karten sind gefloatet */
.its-familie ul.products { float: none; overflow: hidden; margin-bottom: 8px; }
.its-familie-kopf { border-bottom: 2px solid #e30615; margin: 0 0 18px; padding: 0 0 8px; display: grid; gap: 4px; }
.its-familie-kopf h2 { margin: 0; font-size: 24px; }
.its-familie-kopf p { margin: 0; }
.its-familie-kopf a { white-space: nowrap; }
.its-untergruppe { font-size: 17px; margin: 22px 0 12px; padding-left: 10px; border-left: 3px solid #e30615; scroll-margin-top: 110px; clear: both; }

/* Kennwerte unter den Knöpfen */
.its-kennwerte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #e1e1e1; border: 1px solid #e1e1e1; margin: 18px 0; }
.its-kennwerte div { background: #f8f8f8; padding: 9px 12px; }
#top .its-kennwerte dt { display: block; float: none; width: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin: 0; padding: 0; }
#top .its-kennwerte dd { display: block; float: none; margin: 2px 0 0; padding: 0; font-weight: 600; color: #3d3d3d; }

/* P3: alles untereinander – jeder Bereich ein eigener, klar abgegrenzter Kasten mit Kopfleiste; Sprungleiste läuft mit */
.its-sprung, .its-abschnitte { clear: both; } /* unter Galerie und Kurzbeschreibung, nicht daneben */
.its-sprung { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 2px solid #e30615; margin: 34px 0 0; }
.html_header_sticky .its-sprung { top: 88px; }
.its-sprung ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
#top .its-sprung a { display: block; padding: 12px 16px; text-decoration: none; color: #3d3d3d; font-weight: 600; }
#top .its-sprung a:hover { color: #e30615; background: #f8f8f8; }
.its-abschnitte { display: grid; gap: 26px; margin: 26px 0 10px; }
.its-abschnitt { border: 1px solid #e1e1e1; border-radius: 4px; background: #fff; scroll-margin-top: 150px; overflow: hidden; }
#top .its-abschnitt-titel { margin: 0; font-size: 20px; padding: 12px 20px; background: #f8f8f8; border-bottom: 1px solid #e1e1e1; border-left: 4px solid #e30615; }
.its-abschnitt-inhalt { padding: 18px 20px 6px; }
.its-produkt-p3 .its-abschnitt .woocommerce-Tabs-panel > h2:first-child { display: none; }
/* Unterabschnitte im Überblick (### aus dem Artikelblatt) durch Linien trennen */
#top .its-abschnitt-description .its-abschnitt-inhalt h2 { font-size: 17px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid #e1e1e1; }
#top .its-abschnitt-description .its-abschnitt-inhalt h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Passendes Zubehör (Child-Theme gibt Titel + Bild in voller Größe aus) → kleine Kacheln */
#top .its-abschnitt-zubehoer_tab ul, #top .woocommerce-Tabs-panel--zubehoer_tab ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
#top .its-abschnitt-zubehoer_tab li, #top .woocommerce-Tabs-panel--zubehoer_tab li { margin: 0; padding: 10px; border: 1px solid #e1e1e1; border-radius: 4px; display: flex; flex-direction: column-reverse; gap: 8px; text-align: center; }
#top .its-abschnitt-zubehoer_tab li::before, #top .woocommerce-Tabs-panel--zubehoer_tab li::before { display: none; }
#top .its-abschnitt-zubehoer_tab li img, #top .woocommerce-Tabs-panel--zubehoer_tab li img { width: 100%; max-width: 150px; height: 110px; object-fit: contain; margin: 0 auto; }
#top .its-abschnitt-zubehoer_tab li a, #top .woocommerce-Tabs-panel--zubehoer_tab li a { font-weight: 600; font-size: 13px; line-height: 1.3; }

@media (max-width: 989px) {
  .its-pruefwahl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .its-familien { grid-template-columns: minmax(0, 1fr); }
  /* Handy/Tablet: Navigator als waagerechte Leiste oben, Untergruppen ausgeblendet */
  .its-familien-nav { position: sticky; top: 0; z-index: 15; background: #fff; border-right: 0; border-bottom: 1px solid #e1e1e1; padding: 6px 0; margin-bottom: 18px; max-height: none; }
  .its-familien-nav-titel, .its-familien-nav ul ul { display: none; }
  .its-familien-nav > ul { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #top .its-familien-nav > ul > li > a { white-space: nowrap; border: 1px solid #e1e1e1; border-radius: 16px; padding: 4px 12px; }
}
@media (max-width: 767px) {
  .its-pruefwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .its-band { padding: 14px 16px; }
  .its-kennwerte { grid-template-columns: minmax(0, 1fr); }
  .html_header_sticky .its-sprung { top: 0; }
  #top .its-sprung a { padding: 10px 10px; }
  #top .its-abschnitt-titel { padding: 10px 14px; font-size: 18px; }
  .its-abschnitt-inhalt { padding: 14px 14px 4px; }
}

/* Tabellen in den Artikeltexten (aus den Artikelblättern content/shop/*.md, Hülle .its-tabelle): schlicht wie die Website,
   feine Linien, Kopfzeile hinterlegt, keine wechselnd grauen Zeilen; auf dem Handy passend verkleinert. */
.its-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4em; max-width: 100%; }
.its-tabelle table { width: 100%; border-collapse: collapse; margin: 0; font-size: .95em; line-height: 1.45; background: transparent; }
.its-tabelle th, .its-tabelle td { border: 1px solid #e1e1e1; padding: 7px 10px; text-align: left; vertical-align: top; }
.its-tabelle th { background: #f4f4f4; font-weight: 600; color: inherit; }
.its-tabelle tr:nth-child(even) td, .its-tabelle tr:nth-child(odd) td { background: transparent; color: inherit; } /* Enfold-Zebra aus */
.its-tabelle td:first-child { font-weight: 600; min-width: 9em; }
@media (max-width: 600px) {
  .its-tabelle table { font-size: .88em; }
  .its-tabelle th, .its-tabelle td { padding: 5px 6px; }
  .its-tabelle td:first-child { min-width: 0; hyphens: auto; }
}

/* Listen und Absätze in den Abschnitten (Markus 10.10.: „das wirkt zu unruhig“). Die Abschnitte (P3) liegen außerhalb von
   Enfolds .entry-content-wrapper – dort setzt Enfold weder Aufzählungspunkte noch Abstände. L2: Punkte wie in der
   Kurzbeschreibung; L3: kleine rote Quadrate. Beide mit gleichmäßigem Abstand und einheitlicher Einrückung. */
.its-liste-l2 .its-abschnitt-inhalt p, .its-liste-l3 .its-abschnitt-inhalt p { margin: 0 0 12px; }
.its-liste-l2 .its-abschnitt-inhalt ul, .its-liste-l3 .its-abschnitt-inhalt ul { margin: 0 0 14px; padding: 0; }
.its-liste-l2 .its-abschnitt-inhalt li, .its-liste-l3 .its-abschnitt-inhalt li { margin: 0 0 6px; line-height: 1.55; }
.its-liste-l2 .its-abschnitt-inhalt ul { list-style: disc outside; margin-left: 20px; }
.its-liste-l2 .its-abschnitt-inhalt li { padding-left: 2px; }
.its-liste-l3 .its-abschnitt-inhalt ul { list-style: none; }
.its-liste-l3 .its-abschnitt-inhalt li { position: relative; padding-left: 18px; }
.its-liste-l3 .its-abschnitt-inhalt li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: #e30615; }
.its-liste-l2 .its-abschnitt-inhalt ul ul, .its-liste-l3 .its-abschnitt-inhalt ul ul { margin-top: 6px; margin-bottom: 4px; }

/* Zurück-Link zur Gruppe auf Produktseiten (17.10.) */
.its-zurueck { margin: 0 0 14px; font-size: 15px; }
.its-zurueck a { font-weight: 600; text-decoration: none; }
.its-zurueck a:hover, .its-zurueck a:focus-visible { text-decoration: underline; }

/* Kammerkategorien und Nachrüstungen für die SPK (17.10., Abnahme Nr. 3) */
.its-kategorie-hinweis { font-size: 16px; margin: 0 0 18px; }
.its-nachruest { background: #f4f6f8; border-left: 3px solid #d50000; padding: 14px 18px; margin: 10px 0 28px; }
.its-nachruest .its-untergruppe { margin-top: 0; }
.its-nachruest p { margin: 0 0 10px; }
.its-nachruest-link { font-weight: 600; text-decoration: none; }
.its-nachruest-link:hover, .its-nachruest-link:focus-visible { text-decoration: underline; }
/* Shop-Navigator in der Seitenleiste der Produktseiten (Abnahme Nr. 5) */
.its-seiten-nav ul { list-style: none; margin: 0; padding: 0; }
.its-seiten-nav li { margin: 0; padding: 4px 0; }
.its-seiten-nav li ul { padding-left: 14px; }
.its-seiten-nav li ul li { padding: 2px 0; font-size: 0.95em; }
.its-seiten-nav .its-hier > a { font-weight: 700; }