/* Inhaltsseiten in neuer Gestaltung (2026-10-14): alle Seiten außer der Startseite (Body-Klasse sbp, PageRenderer::isModernPage).
   Gridbox-Inhalte bleiben (im Panel bearbeitbar); hier nur Form, Abstände, Typografie und Komponenten.
   Kopfband = erster Abschnitt (sbp-hero), Kontaktband = letzter Abschnitt mit Kontakt-Schaltfläche (sbp-cta), Textklassen aus public/js/pages.js. */
.sbp { --p-ink: #1a1e24; --p-text: #3d4652; --p-muted: #5b6573; --p-line: #e3e9ef; --p-soft: #f5f7fa; --p-dark: #121417; --p-dark2: #1b1f25; --p-yellow: #f7df03; --p-blue: #1e63b8; --p-r: var(--sb-radius, 8px); }

/* Deko: gelbe Schrägstreifen und das Made-in-Germany-Bild im Kopfband (dort als Kicker) */
.sbp .body .ba-item-image:has(img[src*="streifen-gelb"]) { display: none !important; }
.sbp .sbp-hero .ba-item-image:has(img[src*="made-in-germany"]) { display: none !important; }

/* ---- Kopfband ---- */
.sbp .sbp-hero { border-bottom: 1px solid var(--p-line); }
/* Titel: h1, sonst (Anwendungsseiten) die Absätze des ersten Textelements */
.sbp .sbp-hero :is(h1, .ba-overlay + .ba-item-text:not(:has(h1)) p), .sbp .sbp-hero :is(h1, .ba-overlay + .ba-item-text:not(:has(h1)) p) * { font-size: clamp(34px, 3.6vw, 54px) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; font-weight: 800 !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: auto; -webkit-hyphens: auto; }
.sbp .sbp-hero h1 { margin: 0 0 14px !important; color: var(--p-ink); }
.sbp .sbp-hero .ba-overlay + .ba-item-text:not(:has(h1)) p { margin: 0 !important; }
.sbp .sbp-hero .ba-item-image img { filter: drop-shadow(0 30px 40px rgba(16, 24, 40, .16)); }
.sbp .sbp-hero:has(img[src*="made-in-germany"]) .ba-grid-column > .ba-overlay + .ba-item-text .content-text::before {
  content: "Made in Germany"; display: inline-block; margin: 0 0 16px; padding: 7px 14px 7px 46px; border-radius: 999px;
  background: linear-gradient(90deg, #000 0 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%) 14px 50% / 22px 4px no-repeat, #fff;
  border: 1px solid var(--p-line); color: var(--p-ink); font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }

/* Gelbe Schrift auf hellem Grund ist schwer lesbar: dunkel mit gelber Markierung */
.sbp .body .ba-section:not(.sbp-cta) [style*="247, 223, 3"],
.sbp .body .ba-section:not(.sbp-cta) [style*="#f7df03" i],
.sbp .body .ba-section:not(.sbp-cta) [style*="var(--secondary)"] { color: var(--p-ink) !important; background: linear-gradient(transparent 60%, rgba(247, 223, 3, .65) 60%); padding: 0 .08em; }

/* ---- Text ---- */
.sbp .sbp-text :is(p, li) { line-height: 1.75 !important; }
.sbp .sbp-text :is(p, li):not([style*="color"]) { color: var(--p-text); }
.sbp .sbp-text strong, .sbp .sbp-text b { color: var(--p-ink); font-weight: 700; }
.sbp .sbp-text p.sbp-sub { margin-top: 1.4em !important; margin-bottom: .3em !important; font-size: 1.12em !important; line-height: 1.4 !important; }
.sbp .sbp-text p.sbp-sub:first-child { margin-top: 0 !important; }
.sbp .sbp-heading :is(h1, h2, h3, h4, h5, h6, p) { letter-spacing: -.018em !important; line-height: 1.15 !important; }
.sbp .sbp-heading :is(h1, h2, h3, h4, h5, h6, p) strong { font-weight: inherit; }

/* ---- Schaltflächen ---- */
.sbp .body .ba-item-button .ba-btn-transition { display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px !important;
  border-radius: var(--p-r) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .01em !important; text-transform: none !important; line-height: 1 !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease !important; }
.sbp .body .ba-item-button .ba-btn-transition:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .14); }
.sbp .body .ba-item-button .ba-btn-transition i { font-size: 16px !important; margin: 0 !important; order: 2; }
.sbp .body .ba-item-button .ba-btn-transition span { text-transform: none !important; letter-spacing: inherit !important; font: inherit !important; }

/* ---- Bilder ---- */
.sbp .body .ba-section:not(.sbp-hero) .ba-item-image img[src$=".jpg" i],
.sbp .body .ba-section:not(.sbp-hero) .ba-item-image img[src$=".jpeg" i],
.sbp .body .ba-section:not(.sbp-hero) .ba-item-image img[src$=".webp" i] { border-radius: 16px; }

/* ---- Reiter (Produktseiten: Merkmale / Technische Info / Download) ---- */
.sbp .ba-item-tabs .nav-tabs { border: 0 !important; gap: 6px; }
.sbp .ba-item-tabs .nav-tabs > li > a { border: 1px solid var(--p-line) !important; border-radius: 12px !important; background: #fff !important; color: var(--p-muted) !important; padding: 14px 18px !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; transition: background .2s, color .2s, border-color .2s; }
.sbp .ba-item-tabs .nav-tabs > li > a::before, .sbp .ba-item-tabs .nav-tabs > li > a::after { display: none !important; }
.sbp .ba-item-tabs .nav-tabs > li > a:hover { border-color: #c9d1db !important; color: var(--p-ink) !important; }
.sbp .ba-item-tabs .nav-tabs > li.active > a { background: var(--p-dark) !important; border-color: var(--p-dark) !important; color: #fff !important; }
.sbp .ba-item-tabs .nav-tabs > li > a * { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
.sbp .ba-item-tabs .nav-tabs > li > a i { margin-right: 8px; }
.sbp .ba-item-tabs .tab-content { border: 1px solid var(--p-line) !important; border-radius: 16px; background: #fff; }
.sbp .ba-item-tabs .nav-tabs > li > a, .sbp .ba-item-tabs .nav-tabs > li > a * { text-decoration: none !important; }
.sbp .ba-item-tabs .ba-tabs-wrapper { border: 0 !important; }

/* ---- Akkordeon ---- */
.sbp .ba-item-accordion .accordion-group { border: 1px solid var(--p-line) !important; border-radius: 14px !important; margin: 0 0 10px !important; overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .2s; }
.sbp .ba-item-accordion .accordion-group:hover { border-color: #c9d1db !important; }
.sbp .ba-item-accordion .accordion-heading a { text-align: left !important; padding: 18px 20px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
.sbp .ba-item-accordion .accordion-heading a * { letter-spacing: 0 !important; text-transform: none !important; }
.sbp .ba-item-accordion .accordion-body, .sbp .ba-item-accordion .accordion-inner { border: 0 !important; }

/* ---- Feature-Boxen, Symbol-Listen ---- */
.sbp .body .ba-feature-box { border: 1px solid var(--p-line); border-radius: 16px; background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sbp .body .ba-feature-box:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 24, 40, .1); border-color: #c9d1db; }
.sbp .ba-item-icon-list li { line-height: 1.6 !important; }

/* ---- Bildergalerien (Slideset/Karussell) ----
   Gridbox füllt jede Folie mit background-size: cover; bei freigestellten Produktbildern wird das Produkt oben und unten
   abgeschnitten und unscharf vergrößert. Hier: ganzes Bild sichtbar (contain) auf hellem Grund, kleine runde Pfeile, ruhige Punkte. */
.sbp .body :is(.ba-item-slideset, .ba-item-carousel) .ba-slideshow-img { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: transparent !important; }
.sbp .body :is(.ba-item-slideset, .ba-item-carousel) li.item { background: radial-gradient(closest-side, #f4f6f9 0%, #fff 100%); border-radius: 16px; }
.sbp .body :is(.ba-item-slideset, .ba-item-carousel) li.item .ba-slideshow-img { margin: 12px; width: calc(100% - 24px) !important; }
.sbp .body :is(.slideset-btn-prev, .slideset-btn-next, .slideshow-btn-prev, .slideshow-btn-next) {
  width: 44px !important; height: 44px !important; padding: 0 !important; display: grid !important; place-items: center; font-size: 15px !important; line-height: 1 !important;
  border-radius: 50% !important; background: #fff !important; color: var(--p-ink) !important; border: 1px solid var(--p-line) !important; box-shadow: 0 6px 16px rgba(16, 24, 40, .12) !important;
  transition: background .2s, color .2s, transform .2s !important; }
.sbp .body :is(.slideset-btn-prev, .slideset-btn-next, .slideshow-btn-prev, .slideshow-btn-next):hover { background: var(--p-dark) !important; color: #fff !important; border-color: var(--p-dark) !important; }
.sbp .body :is(.slideset-btn-prev, .slideset-btn-next, .slideshow-btn-prev, .slideshow-btn-next)::before { font-size: 15px !important; }
.sbp .body :is(.ba-slideset-dots, .ba-slideshow-dots) > div { font-size: 9px !important; width: 9px !important; height: 9px !important; margin: 0 4px !important; color: #c9d1db !important; transition: color .2s; }
.sbp .body :is(.ba-slideset-dots, .ba-slideshow-dots) > div.active, .sbp .body :is(.ba-slideset-dots, .ba-slideshow-dots) > div:hover { color: var(--p-ink) !important; }
/* Bildunterschriften in Galerien (z. B. „videoturm pro“) nicht über dem Produkt */
.sbp .body .ba-item-slideset .ba-slideshow-caption { display: none !important; }

/* ---- Kontaktband ---- */
.sbp .sbp-cta { background: var(--p-dark) !important; background-image: radial-gradient(900px 400px at 10% 0%, rgba(30, 99, 184, .18), transparent 60%) !important; }
.sbp .sbp-cta > .ba-overlay, .sbp .sbp-cta .ba-row > .ba-overlay, .sbp .sbp-cta .ba-grid-column > .ba-overlay { background: transparent !important; }
.sbp .sbp-cta .ba-row, .sbp .sbp-cta .ba-grid-column { background-color: transparent !important; box-shadow: none !important; border-color: rgba(255, 255, 255, .1) !important; }
.sbp .sbp-cta :is(p, h1, h2, h3, h4, h5, h6, span, strong, li) { color: #fff !important; }
.sbp .sbp-cta .sbp-text :is(p, li) { color: rgba(255, 255, 255, .72) !important; }
.sbp .sbp-cta .sbp-text strong { color: #fff !important; }

/* ---- Handy ---- */
@media (max-width: 767px) {
  .sbp .sbp-hero :is(h1, .ba-overlay + .ba-item-text:not(:has(h1)) p), .sbp .sbp-hero :is(h1, .ba-overlay + .ba-item-text:not(:has(h1)) p) * { font-size: clamp(30px, 8.5vw, 40px) !important; }
  .sbp .ba-item-tabs .nav-tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sbp .ba-item-tabs .nav-tabs > li { flex: 0 0 auto; }
  .sbp .body .ba-item-button .ba-btn-transition { width: 100%; box-sizing: border-box; }
  .sbp .body .sbp-card .ba-item-button .ba-btn-transition { width: auto; }
  /* verschachtelte Zeilen in Reitern/Akkordeons: keine doppelten Seitenränder auf dem Handy */
  .sbp :is(.ba-item-tabs .tab-content, .ba-item-accordion .accordion-body) :is(.ba-row, .ba-grid-column) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* „Weitere Anwendungen“: so viele Kacheln wie vorhanden, ohne Lücke */
.sbp .sbh-more .sbh-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 640px) { .sbp .sbh-more .sbh-tiles { display: flex; } }

/* Blocksatz mit großen Lücken: linksbündig (pages.js setzt sbp-left, wenn Gridbox text-align: justify gesetzt hat) */
.sbp .sbp-left, .sbp .sbp-left :is(p, li) { text-align: left !important; }
.sbp .ba-item-accordion .accordion-heading a * { text-align: left !important; }

/* ---- Karten in Übersichten (PageRenderer: sbp-card = Spalte mit Bild + Schaltfläche, sbp-series = Serien-Text daneben) ---- */
.sbp .sbp-card { background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: 16px !important; overflow: hidden; padding: 0 0 20px !important; height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sbp .sbp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 24, 40, .1); border-color: #c9d1db !important; }
.sbp .sbp-card .ba-overlay { background: transparent !important; }
.sbp .sbp-card :is(.ba-row, .ba-grid-column, .ba-section) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* Titel (bisher gelber Balken) */
.sbp .sbp-card .ba-item-text.sbp-heading :is(p, h1, h2, h3, h4) { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: var(--p-ink) !important; text-align: left !important; }
.sbp .sbp-card .ba-item { box-sizing: border-box !important; max-width: 100% !important; }
.sbp .sbp-card .ba-item-image + .ba-item-text { margin-top: 18px !important; }
.sbp .sbp-card .ba-item-button .ba-btn-transition, .sbp .sbp-card .ba-item-button .ba-btn-transition * { text-decoration: none !important; }
.sbp .sbp-card .ba-item-text { padding-left: 20px !important; padding-right: 20px !important; }
.sbp .sbp-card .ba-item-text.sbp-heading { padding-top: 18px !important; }
/* Bild auf hellem Grund */
.sbp .sbp-card .ba-item-image { margin: 0 !important; padding: 18px; background: linear-gradient(180deg, #fff, #f2f5f8); border-bottom: 1px solid var(--p-line); }
.sbp .sbp-card .ba-item-image .ba-image-wrapper { position: relative; display: block !important; width: 100% !important; height: 220px; overflow: hidden; }
.sbp .sbp-card .ba-item-image img { max-height: 210px; width: auto !important; margin: 0 auto; object-fit: contain; transition: transform .35s ease; }
.sbp .sbp-card:hover .ba-item-image img { transform: scale(1.04); }
/* Eckdaten */
.sbp .sbp-card .sbp-text :is(p, li) { font-size: 14px !important; line-height: 1.6 !important; text-align: left !important; color: var(--p-muted) !important; margin: 0 0 2px !important; }
/* „Produkt ansehen“ als Textlink */
.sbp .sbp-card .ba-item-button { padding: 14px 20px 0 !important; margin: 0 !important; text-align: left !important; }
.sbp .sbp-card .ba-item-button .ba-button-wrapper { text-align: left !important; }
.sbp .sbp-card .ba-item-button .ba-btn-transition { flex-direction: row !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; color: var(--p-blue) !important; border: 0 !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; }
.sbp .sbp-card .ba-item-button .ba-btn-transition::after { content: "→"; transition: transform .2s ease; }
.sbp .sbp-card:hover .ba-item-button .ba-btn-transition::after { transform: translateX(3px); }
.sbp .sbp-card .ba-item-button .ba-btn-transition:hover { transform: none; box-shadow: none; }
/* Serien-Spalte: Überschrift statt Rahmenbox */
.sbp .sbp-series { border: 0 !important; background: transparent !important; padding: 8px 8px 0 0 !important; }
.sbp .sbp-series .ba-overlay { background: transparent !important; }
.sbp .sbp-series .ba-overlay + .ba-item-text :is(p, h1, h2, h3) { font-size: clamp(26px, 2.2vw, 34px) !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: var(--p-ink) !important; }
.sbp .sbp-series .ba-item-text :is(p, li) { text-align: left !important; }
.sbp .sbp-series .ba-item-text + .ba-item-text :is(p, li) { font-size: 15px !important; line-height: 1.65 !important; color: var(--p-text) !important; }
.sbp .sbp-series .ba-overlay + .ba-item-text + .ba-item-text :is(p, span) { color: var(--p-blue) !important; font-weight: 700 !important; text-decoration: none !important; font-size: 15px !important; }

/* Gelbe Hintergrundflächen -> hellgrau (pages.js: sbp-was-yellow) */
.sbp .sbp-was-yellow { background-color: var(--p-soft) !important; }
.sbp .sbp-was-yellow > .ba-overlay { background: transparent !important; }
.sbp .ba-overlay.sbp-was-yellow { background: var(--p-soft) !important; background-color: var(--p-soft) !important; }

/* Absätze im Fließtext mit Luft (Gridbox setzt margin 0 -> Wand aus Text) */
.sbp .sbp-text p:not(:last-child) { margin-bottom: .85em !important; }
.sbp .sbp-text p:empty { display: none; }
/* Kontaktband: Hauptschaltflächen einheitlich gelb */
.sbp .sbp-cta .ba-item-button .ba-btn-transition { background: var(--p-yellow) !important; color: #111 !important; border: 0 !important; }
.sbp .sbp-cta .ba-item-button .ba-btn-transition * { color: #111 !important; }
.sbp .sbp-cta .ba-item-button .ba-btn-transition:hover { background: #ffe94a !important; }

/* Karten: nur ein Pfeil (Gridbox-Symbol im Link ausblenden) */
.sbp .sbp-card .ba-item-button .ba-btn-transition i { display: none !important; }
.sbp .sbp-card .ba-item-image:has(.sb-photo-box) { padding: 0 !important; border-bottom: 0; }
/* Gridbox-Seitenränder an Textelementen (25 px) verschieben Texte aus der Flucht und über die Spalte hinaus */
.sbp .body .ba-item:is(.ba-item-text, .ba-item-headline) { margin-left: 0 !important; margin-right: 0 !important; }
/* Karten: Schaltfläche immer unten (Karten einer Reihe sind gleich hoch, Textlängen verschieden) */
.sbp .sbp-card, .sbp .sbp-card :is(.ba-row-wrapper, .ba-row, .column-wrapper, .ba-grid-column-wrapper, .ba-grid-column) { display: flex !important; flex-direction: column !important; flex: 1 1 auto; }
.sbp .sbp-card :is(.ba-row-wrapper, .ba-row, .column-wrapper, .ba-grid-column-wrapper, .ba-grid-column) { width: 100%; }
.sbp .sbp-card .ba-item-button { margin-top: auto !important; }
/* lange Kartentitel nicht mitten im Wort abschneiden, sondern mit Trennstrich */
.sbp .sbp-card .ba-item-text.sbp-heading :is(p, h1, h2, h3, h4, span) { word-break: normal !important; overflow-wrap: normal !important; hyphens: auto !important; -webkit-hyphens: auto !important; }

/* Produktbilder (freigestellte PNGs) im Inhalt: beim Überfahren leicht anheben, vergrößern, weicher Schatten; Fotos zoomen im gerundeten Rahmen.
   Nur mit Maus, nicht bei reduzierter Bewegung; Karten, Logos und Kopfband-Abzeichen ausgenommen. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sbp .body .ba-section:not(.sbp-hero) .ba-item-image:not(.sbp-card .ba-item-image):not(:has(img[src*="logo" i])) img {
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .55s ease; transform-origin: 50% 80%;
  }
  .sbp .body .ba-section:not(.sbp-hero) .ba-item-image:not(.sbp-card .ba-item-image):not(:has(img[src*="logo" i])):hover img {
    transform: translateY(-8px) scale(1.035); filter: drop-shadow(0 26px 28px rgba(16, 24, 40, .2));
  }
  /* Fotos (jpg/webp): Zoom im Rahmen statt Schatten */
  .sbp .body .ba-section:not(.sbp-hero) .ba-item-image:not(.sbp-card .ba-item-image) .ba-image-wrapper:has(img:is([src$=".jpg" i], [src$=".jpeg" i], [src$=".webp" i])) { overflow: hidden; border-radius: 16px; }
  .sbp .body .ba-section:not(.sbp-hero) .ba-item-image:not(.sbp-card .ba-item-image):hover img:is([src$=".jpg" i], [src$=".jpeg" i], [src$=".webp" i]) { transform: scale(1.05); filter: none; }
}
/* Reiter links/rechts neben dem Inhalt: Abstand statt Anstoßen, Gridbox-Trennlinie (blaue Linie, ::before) aus */
.sbp .ba-item-tabs .ba-tabs-wrapper:is(.tabs-left, .tabs-right) { gap: 28px; }
.sbp .ba-item-tabs .nav-tabs::before, .sbp .ba-item-tabs .nav-tabs::after { display: none !important; }
@media (max-width: 767px) { .sbp .ba-item-tabs .ba-tabs-wrapper:is(.tabs-left, .tabs-right) { gap: 16px; } }
/* Reiter oben: Abstand zwischen Reiterleiste und Inhalt */
.sbp .ba-item-tabs .ba-tabs-wrapper.tabs-top > .tab-content { margin-top: 14px !important; }
/* Akkordeon-Titel: lesbar (Gridbox: 12 px, 40 % Deckkraft), nur ein Symbol (Pfeil rechts) */
.sbp .ba-item-accordion .accordion-heading a, .sbp .ba-item-accordion .accordion-heading a .accordion-title { color: var(--p-ink) !important; font-size: 15px !important; font-weight: 600 !important; opacity: 1 !important; }
.sbp .ba-item-accordion .accordion-heading a > span > i:not(.accordion-icon) { display: none !important; }
.sbp .ba-item-accordion .accordion-heading .accordion-icon { color: var(--p-text) !important; opacity: 1 !important; }