/* Testboy Zusatzstile: Produktfinder, Vergleich, Anfrage, Video */

/* Produktfinder */
.productFilter { background: #f5f7fa; border: 1px solid #e3e8ee; border-radius: 8px; padding: 20px 24px; margin: 24px 0 40px; }
/* Selects bündig auf einer Linie, auch bei mehrzeiligen Merkmalsnamen */
.productFilter .row > [class*="col-"] { display: flex; flex-direction: column; justify-content: flex-end; }
.productFilter .filterHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
.productFilter .filterHead h4 { margin: 0; }
.productFilter .filterCount { color: #6c7a89; font-size: 0.9rem; }
.productFilter .form-label { font-size: 0.85rem; margin-bottom: 2px; font-weight: 600; }
.productFilter .filterActions { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.productFilter .filterReset { color: #6c7a89; text-decoration: underline; }
.product_content_area.isLoading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* Vergleich */
.compareCheck { display: block; margin-top: 8px; font-size: 0.85rem; color: #6c7a89; cursor: pointer; }
.compareCheck input { margin-right: 6px; }
.compareBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #1d2b36; color: #fff; padding: 14px 0; box-shadow: 0 -2px 12px rgba(0,0,0,.25); }
.compareBar .container { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.compareBar .compareClear { background: none; border: none; color: #b9c6d2; text-decoration: underline; cursor: pointer; }
.compareBar #compareStart:disabled { opacity: .5; cursor: not-allowed; }
.compareTable { table-layout: fixed; }
.compareTable th { vertical-align: bottom; }
.compareTable .compareHead { text-align: center; }
.compareTable .compareHead img { max-height: 120px; max-width: 100%; object-fit: contain; margin-bottom: 8px; }
.compareTable .compareHead .artNumber { color: #6c7a89; font-size: 0.85rem; }
.compareTable .compareHead p a { color: #009DE2; text-decoration: none; font-weight: 700; }
.compareTable .compareHead p a:hover { text-decoration: underline; }
/* Detailseiten-CSS setzt td auf display:flex – für die Vergleichstabelle echtes Tabellenlayout erzwingen */
.compareArea .table tr td { display: table-cell; vertical-align: middle; padding: 12px 16px; }
.compareArea .table tr td p { margin-left: 0; }
.compareTable td:first-child { font-weight: 400; width: 30%; }
.compareTable td:not(:first-child) { text-align: center; }
/* Unterschiede blau hervorheben (normale Schriftstärke) */
.compareTable tr.isDifferent { background: rgba(0, 157, 226, 0.07); }
.compareTable tr.isDifferent td:not(:first-child) { color: #009DE2; }
.compareTable tr.isDifferent td:first-child { color: #009DE2; }
/* Merkmale, die nur ein Gerät hat: eigene Tabelle mit Abstand */
.comparePartial { margin-top: 56px; }
.comparePartial .compareSubTitle { margin-bottom: 20px; font-size: 24px; }
.comparePartial .comparePartialHead { text-align: center; font-weight: 700; color: #009DE2; }
.compareHint { background: rgba(0, 157, 226, 0.08); border-left: 4px solid #009DE2; padding: 10px 14px; border-radius: 4px; display: inline-block; }
/* Vergleichs-Intro: kompakte Abstände statt der 80px-Absätze des Entwurfs */
.compareIntro .product_pages_intro_content p.text_20 { margin-bottom: 20px; }
.compareIntro .product_pages_intro_content p.compareHint { margin: 0 0 12px; }
.compareArea { padding-top: 0; }
.compareTable th { padding-bottom: 12px; }

/* Angebotsanfrage */
.inquiryArea { padding: 60px 0; background: #f5f7fa; }
.inquiryArea .secTitle { margin: 0 0 14px; }
.inquiryArea .row .col-lg-12 > p { margin: 0 0 12px; font-size: 16px; color: #46535F; }
.inquiryArea .inquiryForm { margin-top: 34px; }
.inquiryArea .inquiryForm { max-width: 820px; margin: 24px auto 0; }
.inquiryArea .inquiryPrivacy { font-size: 0.85rem; color: #6c7a89; }
.inquirySuccess, .inquiryError { max-width: 820px; margin: 24px auto 0; padding: 16px 20px; border-radius: 8px; text-align: center; }
.inquirySuccess { background: #e6f6ec; color: #1e7b45; }
.inquiryError { background: #fdecec; color: #b02a37; }
.tbq-web { position: absolute !important; left: -9999px !important; top: -9999px !important; }

/* Fallback: Kategorien ohne Intro-Text behalten den 80px-Auslauf des Entwurfs */
.product_pages_intro_content:not(:has(p)) { padding-bottom: 80px; }

/* Angebrochene Reihen linksbündig füllen statt space-between-Lücke in der Mitte */
.product_content_area { justify-content: flex-start; }

/* Produktkacheln: Bildfläche exakt wie im Entwurf (quadratisch, einheitlich) */
.single_product_items .product_picture { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.single_product_items .product_picture img { width: 100%; height: 100%; object-fit: contain; }
/* Entwurf reserviert drei Titelzeilen – Titel und Links stehen damit auf einer Linie */
.single_product_items .product_details h6 { min-height: 72px; }
/* Top-3-Vorteile aus dem PIM in der Kachel (Platz reserviert, damit nichts springt) */
.productAdvantages { list-style: none; margin: 0 0 10px; padding: 0; min-height: 69px; }
.productAdvantages li { font-size: 14px; line-height: 23px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 16px; position: relative; }
.productAdvantages li::before { content: '›'; position: absolute; left: 0; color: #009DE2; font-weight: 700; }

/* Startseiten-Kategoriekacheln: hochformatige Bildfläche (158×185),
   damit schlanke Geräte (Prüfstifte) die volle Höhe nutzen können */
.serThumb { height: 185px; display: flex; align-items: center; justify-content: center; }
.serThumb > img:first-child { width: 100%; height: 100%; object-fit: contain; }
/* Hover: nur Schlagschatten (kommt aus style.css) – Text, Bild und Link bleiben unverändert */
.serSingle:hover .serThumb > img:first-child,
.serSingle:hover img { opacity: 1; visibility: visible; }
.serSingle:hover .serFrontText { opacity: 1; visibility: visible; }
.serBakText, .serThumb .serBackImg { display: none; }
/* Teaser-Text: exakt maximal 4 Zeilen, alle Kacheln gleich hoch */
.serFrontText p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 24px; min-height: 96px; }
/* Titel: Platz für zwei Zeilen reservieren, damit keine Kachel springt */
.serFrontText h4 { min-height: 58px; }
/* Sehr lange Kategorienamen (3 Titelzeilen): Teaser auf 2 Zeilen kürzen */
.serLongTitle .serFrontText h4 { min-height: 87px; }
.serLongTitle .serFrontText p { -webkit-line-clamp: 2; min-height: 67px; }


/* Hauptmenü rechts ausrichten – Freiraum entsteht zwischen Logo und Produkte.
   Seit „Anwendungen" und „FAQ" dazugekommen sind, klappt das Menü erst ab
   1200 px auf (navbar-expand-xl) - darunter reicht der Platz nicht. */
@media (min-width: 992px) {
  /* Ohne rechten Abstand rueckt das jetzt kuerzere Menue naeher an die Suche. */
  .headerArea .navbar-collapse > .navbar-nav { margin-left: auto !important; }
}

/* Das Logo darf nicht schrumpfen. Ohne diese Regel drückten die beiden neuen
   Menüpunkte es auf 0 px zusammen - es war schlicht verschwunden. */
.headerArea .navbar-brand { flex: 0 0 auto; }
.headerArea .navbar-brand img { width: 200px; }

/* Im Burger-Modus hängt das Logo über dem Breadcrumb-Streifen. Der
   Überhang ist fix (-108 px), also muss das Logo kleiner werden, sonst
   deckt es den Pfad zu. */
/* (Zwischenbereich entfaellt - das Menue klappt wieder ab 992 px auf.) */


/* Header-Suchfeld: breiter (Original nur 150px – zeigt kaum 2 Zeichen) */
@media (min-width: 992px) { .navSearch { max-width: 240px; flex: 0 0 240px; } }

/* Direkt an der Aufklapp-Grenze ist es am engsten - dort Suche und
   Abstände zusätzlich straffen, sonst wird der Sprachumschalter
   abgeschnitten. */

/* Zwischen 1200 und 1399 px ist der Container schmaler als 1400 - dort
   muss die Suche weiter schrumpfen, sonst klebt der Sprachumschalter
   am rechten Rand. */


/* Katalog-Cover: als Print-Optik mit Schatten, Höhe begrenzen */
.unserImg img { max-height: 420px; width: auto; max-width: 100%; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); border-radius: 4px; }
.unserImg { text-align: center; }

/* News-Carousel: Bildfläche exakt wie im Entwurf (350×348), Bilder eingepasst.
   Weißer Hintergrund kommt wie im Entwurf erst beim Hover (style.css). */
.clientImg { display: flex; align-items: center; justify-content: flex-end; }
.clientImg img { width: 350px; height: 348px; object-fit: contain; }

/* Mega-Menü für Produkte (Dropdown mit Kategorie-Thumbnails, mehrspaltig).
   TYPO3 setzt das Bild als Geschwister vor den Link -> das <li> ist die Flex-Zeile. */
.megaThumb { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid #eef1f4; flex: 0 0 40px; cursor: pointer; }
.navbar-nav li.dropdown:has(.megaThumb) > .dropdown-menu > li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; }
.navbar-nav li.dropdown:has(.megaThumb) > .dropdown-menu > li:hover { background: rgba(0, 157, 226, 0.08); }
.navbar-nav li.dropdown:has(.megaThumb) > .dropdown-menu > li:hover .dropdown-item { color: #009DE2; }
.navbar-nav li.dropdown:has(.megaThumb) .dropdown-item { display: block; padding: 0; background: none; white-space: normal; line-height: 1.25; flex: 1; }
@media (min-width: 992px) {
  .navbar-nav li.dropdown:has(.megaThumb) > .dropdown-menu { width: 780px; max-width: calc(100vw - 60px); padding: 18px 20px; column-count: 3; column-gap: 10px; }
  .navbar-nav li.dropdown:has(.megaThumb) > .dropdown-menu > li { break-inside: avoid; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .navbar-nav li.dropdown:has(.megaThumb) > .dropdown-menu { width: 560px; column-count: 2; }
}

/* Seitenbanner auf Produkt-/Kategorieseiten: schmales Band statt Riesenbild */
.bannerArea02 { max-height: 220px; overflow: hidden; }
.bannerArea02 img { width: 100%; height: 220px; object-fit: cover; object-position: center; }
@media (max-width: 767px) {
  .bannerArea02, .bannerArea02 img { max-height: 130px; height: 130px; }
}

/* Hero-Slider Startseite */
.heroArea { padding: 0; position: relative; }
.heroSlide { padding: 150px 0 130px; min-height: 520px; display: flex !important; align-items: center; justify-content: center; }
.heroSlide--brand { background: linear-gradient(rgba(6, 33, 48, 0.35), rgba(6, 33, 48, 0.45)), url('/fileadmin/Public/images/banner.jpg') center center / cover no-repeat; position: relative; overflow: hidden; }
/* Hintergrund-Video Slide 1: füllt die Fläche, Text-Overlay bleibt darüber */
.heroVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.heroSlide--brand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(6, 33, 48, 0.30), rgba(6, 33, 48, 0.45)); z-index: 1; }
.heroSlide--brand .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .heroVideo { display: none; } }
.heroSlide--katalog { background: linear-gradient(rgba(0, 90, 130, 0.55), rgba(6, 33, 48, 0.6)), url('/fileadmin/Public/images/banner.jpg') center center / cover no-repeat; }
.heroSlide--emob { background: linear-gradient(rgba(0, 60, 30, 0.4), rgba(6, 33, 48, 0.6)), url('/fileadmin/Public/images/banner02.jpg') center center / cover no-repeat; }
.heroArea .bannerText h2 { font-size: clamp(40px, 6.5vw, 88px); line-height: 1.05; }
.heroKicker { color: #7fd4ff; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.heroSub { color: #ffffff; font-size: clamp(16px, 2vw, 22px); max-width: 680px; margin: 18px auto 26px; }
.heroCtas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.heroCtaGhost { background: transparent; border: 2px solid #fff; }
/* Gestaffelte Einblendung des aktiven Slides */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.heroSlider .slick-active .bannerText > * { opacity: 0; animation: heroFadeUp 600ms ease forwards; }
.heroSlider .slick-active .bannerText > *:nth-child(1) { animation-delay: 80ms; }
.heroSlider .slick-active .bannerText > *:nth-child(2) { animation-delay: 200ms; }
.heroSlider .slick-active .bannerText > *:nth-child(3) { animation-delay: 340ms; }
.heroSlider .slick-active .bannerText > *:nth-child(4) { animation-delay: 480ms; }
/* Slick-Dots im Testboy-Look */
.heroSlider .slick-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.heroSlider .slick-dots button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; font-size: 0; padding: 0; cursor: pointer; transition: all 200ms ease; }
.heroSlider .slick-dots .slick-active button { background: #009DE2; border-color: #009DE2; }
/* Zahlen-Leiste */
.heroStats { background: #062130; padding: 26px 0; }
.heroStatsRow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; text-align: center; }
.heroStat { flex: 1 1 180px; }
.heroStat .statNumber { display: block; color: #009DE2; font-size: 40px; font-weight: 700; line-height: 1.1; }
.heroStat .statLabel { display: block; color: #cfe3ee; font-size: 15px; text-wrap: balance; } /* balance: Mehrzeiler (5 Marken) gleichmaessig umbrechen */
@media (max-width: 767px) {
  .heroSlide { padding: 110px 0 100px; min-height: 420px; }
  .heroStat .statNumber { font-size: 30px; }
}

/* Suche */
.searchPageForm { display: flex; gap: 12px; margin: 20px 0 24px; max-width: 640px; flex-wrap: wrap; }
.searchPageForm input[type="search"] { flex: 1 1 320px; padding: 12px 16px; font-size: 16px; border: 2px solid #d7dee5; border-radius: 26px; }
.searchPageForm input[type="search"]:focus { outline: none; border-color: #009DE2; }
.single_product_items .searchArtNo { color: #6c7a89; font-size: 13px; margin: 4px 0 8px; }
.searchPagesArea .searchPageResults { list-style: none; margin: 0; padding: 0; }
.searchPagesArea .searchPageResults li { padding: 14px 0; border-bottom: 1px solid #e3e8ee; }
.searchPagesArea .searchPageResults a { color: #009DE2; font-size: 18px; font-weight: 700; }
.searchPagesArea .searchPageResults p { color: #555; margin-top: 4px; font-size: 14.5px; line-height: 1.5; }

/* Produktvideo */
.videoArea { padding: 60px 0; }
.videoArea .secTitle { text-align: center; margin-bottom: 30px; }
.videoEmbed { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; background: #1d2b36; border-radius: 8px; overflow: hidden; }
.videoEmbed iframe { width: 100%; height: 100%; border: 0; }
.videoEmbed .videoPlaceholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 20px; }
.videoEmbed .videoPlaceholder .fa-youtube { font-size: 3.5rem; color: #ff0000; margin-bottom: 12px; }
.videoEmbed .videoHint { font-size: 0.8rem; color: #b9c6d2; }


/* Such-Autovervollständigung */
.suggestBox { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; background: #fff; border: 1px solid #d7dee5; border-radius: 8px; box-shadow: 0 8px 24px rgba(6,33,48,.16); z-index: 1200; overflow: hidden; max-height: 420px; overflow-y: auto; }
.suggestItem { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; border-bottom: 1px solid #f0f3f6; }
.suggestItem img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 42px; background: #fff; }
.suggestItem .suggestName { flex: 1; color: #303030; font-size: 14px; line-height: 1.25; }
.suggestItem .suggestNo { color: #6c7a89; font-size: 12px; white-space: nowrap; }
.suggestItem:hover, .suggestItem.isActive { background: rgba(0,157,226,.08); }
.suggestItem:hover .suggestName, .suggestItem.isActive .suggestName { color: #009DE2; }
.suggestAll { display: block; padding: 10px 12px; text-align: center; font-size: 13px; font-weight: 600; color: #009DE2; text-decoration: none; background: #f7fafc; }
.suggestAll:hover { background: rgba(0,157,226,.12); }
.searchPageForm .suggestBox { max-width: 520px; }


/* Produktraster: gap-sichere Spaltenbreite.
   Entwurf rechnet 100%/3 - 20px bei gap:30px = exakt 100% -> dritte Kachel bricht bei
   Sub-Pixel-Rundung um. Abzug der tatsächlichen Gaps macht das Raster stabil. */
.product_content_area { align-items: stretch; }
.single_product_items { flex: 0 0 calc((100% - 60px) / 3); }
@media all and (max-width: 991px) {
  .single_product_items { flex: 0 0 calc((100% - 30px) / 2); }
}
@media all and (max-width: 575px) {
  .single_product_items { flex: 0 0 100%; }
}

/* Produktraster als CSS-Grid: feste Spaltenzahl, garantiert gleich hohe Reihen,
   kein Sub-Pixel-Umbruch möglich (Flex-Variante des Entwurfs war grenzwertig). */
.product_content_area { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.product_content_area > .single_product_items { flex: none; width: auto; }
@media all and (max-width: 991px) {
  .product_content_area { grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width: 575px) {
  .product_content_area { grid-template-columns: 1fr; gap: 20px; }
}

/* Lange Vorteils-Zeilen (white-space: nowrap) dürfen die Kachel nicht aufblähen:
   Grid-/Flex-Items brauchen min-width:0, sonst erzwingt der Textinhalt Mehrbreite. */
.single_product_items, .single_product_items .product_details { min-width: 0; }



/* Ganze Produktkachel klickbar (Stretched-Link über den "mehr erfahren"-Link).
   Die Vergleichen-Checkbox liegt darüber und bleibt bedienbar. */
.single_product_items { position: relative; }
.single_product_items .product_details > a { position: static; }
.single_product_items .product_details > a::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.single_product_items .compareCheck { position: relative; z-index: 2; }
.single_product_items:focus-within { box-shadow: 0 0 0 2px #009DE2; }

/* ══════════════════════════════════════════════════════════════════════
   Kategorien-Slider „Weitere Produktkategorien"
   (Kategorieseiten + Produktdetailseiten)

   Vorher: Die Beschriftung hatte eine feste Höhe von 96 px, weil die
   Kategorienamen zwischen einer und drei Zeilen lang sind. Kurze Namen
   („Multimeter") bekamen dadurch eine große leere Blaufläche, lange
   („Schimmeldetektor, Feuchtemessgerät & Anemometer") saßen gequetscht.

   Jetzt: Die Kachel ist eine Flex-Spalte über die volle Zeilenhöhe. Die
   Bildfläche ist flexibel und schluckt genau die Differenz, die 1-, 2-
   und 3-zeilige Titel erzeugen. Alle Beschriftungen enden dadurch bündig
   auf einer Linie – ohne feste Höhe und ohne tote Leerfläche.
   ══════════════════════════════════════════════════════════════════════ */

/* Slick gibt den Slides keine gleiche Hoehe - Flex-Track nachruesten. Wichtig:
   Slick haengt .slick-slide direkt an .sliderItem, es gibt keinen Wrapper. Die
   Clearfix-Pseudoelemente des Tracks wuerden im Flex-Kontext zu eigenen Flex-
   Items werden, deshalb abschalten. */
.slider01 .slick-track { display: flex; align-items: stretch; }
.slider01 .slick-track::before,
.slider01 .slick-track::after { display: none; }

/* Volle Containerbreite statt 1000 px: die langen deutschen Komposita
   brauchen den Platz, sonst brechen sie mitten im Wort um. */
.sliderArea .sliderWraper { max-width: 100%; }

/* Kachel */
.slider01 .sliderItem {
  position: relative;
  height: auto;
  margin: 0 9px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E3E8ED;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 260ms ease, border-color 260ms ease;
}
/* Signalbalken – fährt beim Hover von links ein */
.slider01 .sliderItem::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, #009DE2 0%, #1471A5 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms cubic-bezier(.2, .7, .3, 1);
}
.slider01 .sliderItem:hover {
  transform: translateY(-5px);
  border-color: #C6E5F7;
  box-shadow: 0 14px 30px rgba(6, 33, 48, .15);
}
.slider01 .sliderItem:hover::before { transform: scaleX(1); }

/* Bildfläche: flexibel – gleicht unterschiedlich hohe Beschriftungen aus.
   Weißer Grund, damit die freigestellten Produktbilder nahtlos sitzen.
   flex-basis MUSS 0 (Länge) sein, nicht 0%: ein Prozentwert fällt in einer
   Spalte mit unbestimmter Höhe auf height:auto zurück, und dann bestimmt
   wieder das Seitenverhältnis der Bilddatei die Kachelhöhe. */
.slider01 .sliderItem img {
  flex: 1 1 0;
  min-height: 170px;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 24px 24px 16px;
  background: #fff;
  transition: transform 380ms cubic-bezier(.2, .7, .3, 1);
}
.slider01 .sliderItem:hover img { transform: scale(1.045); }

/* Beschriftung: Blockfluss statt Flex, damit lange Komposita umbrechen und
   trennen dürfen. Der Pfeil sitzt absolut als Knopf auf der Kante zwischen
   Bild und Text – bei 1, 2 oder 3 Zeilen immer an derselben Stelle und
   ohne der Schrift Breite wegzunehmen. */
.slider01 .sliderItem a {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  background: #fff;
  color: #232B33;
  padding: 16px 14px 17px;
  border-top: 1px solid #EDF1F4;
  font-size: 15px;
  line-height: 1.34;
  font-weight: 700;
  text-align: left;
  overflow: visible;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  transition: color 220ms ease;
}
.slider01 .sliderItem a:hover { background: #fff; }
.slider01 .sliderItem a i {
  position: absolute;
  right: 12px;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #009DE2;
  color: #fff;
  box-shadow: 0 0 0 4px #fff;
  transition: all 240ms cubic-bezier(.2, .7, .3, 1);
}
.slider01 .sliderItem:hover a { color: #009DE2; }
.slider01 .sliderItem:hover a i { background: #1471A5; transform: scale(1.12); }

/* Pfeile neben die Überschrift: dort überlagern sie keine Kacheln und
   bleiben im Container (vorher ragten sie 50 px darüber hinaus).
   Ab 991 px blendet responsive.css sie ohnehin aus. */
.sliderArea .sliderArrow {
  top: -84px;
  bottom: auto;
  left: auto;
  right: 0;
  width: auto;
  margin: 0;
  gap: 10px;
}
.sliderArea .sliderArrow button.prevIcon,
.sliderArea .sliderArrow button.nextIcon { left: 0; right: 0; }
.sliderArea .sliderArrow button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 19px;
  color: #5A6672;
  background: #fff;
  border: 1px solid #E3E8ED;
  box-shadow: 0 2px 8px rgba(6, 33, 48, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.sliderArea .sliderArrow button:hover {
  background: #009DE2;
  border-color: #009DE2;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 157, 226, .35);
}

/* Punkte als Pille statt Balken */
.slider01 .slick-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CBD3DA;
  transition: all 220ms ease;
}
.slider01 .slick-dots .slick-active button { width: 26px; border-radius: 5px; background: #009DE2; }

@media all and (max-width: 450px) {
  .slider01 .sliderItem { margin: 0 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Produkt-Detailseite – Kopfbereich (Breadcrumb, Produktkopf, Beschreibung,
   Technische Daten)
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- Breadcrumb ----------
   Gilt für alle Unterseiten: kein Banner-Band mehr, der Pfad sitzt überall
   direkt unter dem Header. */
.pageBrackrumb {
  background: #F6F8FA;
  border-bottom: 1px solid #E6ECF1;
  padding: 13px 0;
}
.pagePath ul { justify-content: flex-start; gap: 6px; }
.pagePath ul li {
  font-size: 14px;
  line-height: 20px;
  color: #6B7885;
  font-weight: 400;
}
.pagePath ul li span { font-weight: 600; color: #46535F; }
.pagePath ul li a { color: #009DE2; font-weight: 500; text-decoration: none; }
.pagePath ul li a:hover { text-decoration: underline; }
/* Linke Kante exakt unter "Produkte" im Hauptmenü.
   Das Menü ist rechts ausgerichtet (margin-left:auto + 30px Abstand), sein
   linker Rand liegt deshalb konstant 913 px vor der rechten Containerkante -
   unabhängig von der Viewportbreite. 100% ist hier die Containerbreite,
   890 px richtet den Pfad am sichtbaren Text von "Produkte" aus, nicht an
   der Kante der Link-Box - die Nav-Links haben links Innenabstand.
   ACHTUNG: Ändert sich die Breite des rechten Header-Blocks (Menüpunkt dazu,
   anderes Suchfeld), muss dieser Wert mitgezogen werden. */
@media (min-width: 992px) {
  /* Der Einzug wird von testboy.js gemessen und als Variable gesetzt, damit
     er bei jeder Menüänderung stimmt. Der Startwert greift, bis das Script
     läuft, und wenn JavaScript aus ist. */
  .pagePath ul { padding-left: var(--crumbIndent, max(0px, calc(100% - 890px))); }
}

/* Das Logo ragt 108 px unter den Header, also rund 62 px unter den Streifen.
   Dieser Freiraum gilt jetzt für jede Unterseite - dadurch starten alle
   gleich, egal ob Produktdetail, Kategorie, Downloads oder Kontakt. */
.pageBrackrumb { margin-bottom: 64px; }
.product_pages_intro_content { margin-top: 0; }

/* ---------- Produktkopf ----------
   Oberer Abstand kommt aus .pageBrackrumb (siehe oben), nicht mehr von hier. */
.productArea { padding: 0; }
/* Bild oben bündig mit der Eyebrow statt unten bündig – sonst klafft
   über dem Bild eine große Lücke. */
.productArea .row.align-items-end { align-items: flex-start !important; }

.productImg {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #fff;
  border: 1px solid #E3E8ED;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(6, 33, 48, .07);
}
.productImg img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.productContent { padding-top: 4px; }
/* „Kategorie: …" als Eyebrow */
.productContent > p:first-child {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #009DE2;
  margin: 0 0 12px;
}
.productContent > p:first-child span { color: #9AA7B3; }
.productContent h2 {
  font-size: 42px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #1B2733;
  margin: 0 0 14px;
}
.productContent .artNumber {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #5A6672;
  background: #F0F3F6;
  border: 1px solid #E3E8ED;
  border-radius: 4px;
  padding: 5px 11px;
  margin: 0 0 28px;
}
/* „Vorteile:" als Label mit auslaufender Linie */
.productContent h4 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1B2733;
  margin: 0 0 16px;
}
.productContent h4::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #E3E8ED;
}

/* ---------- Vorteile ----------
   Die PIM-Beschreibung liefert die Punkte in zwei getrennten <ul>. Vorher
   standen die per fixem 150-px-Abstand und vertikaler Zentrierung weit
   auseinander – bei ungleich vielen Punkten sah das kaputt aus. */
.productList {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 44px;
  margin: 0 0 32px;
}
.productList ul {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.productList ul li {
  position: relative;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  color: #303030;
  margin: 0 0 11px;
}
/* Marker erst zeigen, wenn das Script das textliche „>" entfernt hat –
   sonst stünden Chevron und Zeichen doppelt. */
.productList.markersReady ul li { padding-left: 28px; }
.productList.markersReady ul li::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 157, 226, .12);
  color: #009DE2;
}

.productContent .inquiryCta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  box-shadow: 0 8px 20px rgba(0, 157, 226, .26);
  transition: all 220ms cubic-bezier(.2, .7, .3, 1);
}
.productContent .inquiryCta:hover {
  background: #1471A5;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(20, 113, 165, .32);
}

/* ---------- Download-Icons rechts ---------- */
.mediaNavigation {
  top: 0;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 6px;
}
.mediaNavigation ul {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
}
.mediaNavigation ul li { margin: 0 0 12px; border-radius: 0; }
.mediaNavigation ul li a {
  width: 44px;
  height: 44px;
  font-size: 16px;
  background: #009DE2;
  color: #fff;
  border: 0;
  box-shadow: 0 4px 12px rgba(0, 157, 226, .28);
  transition: all 200ms cubic-bezier(.2, .7, .3, 1);
}
.mediaNavigation ul li a:hover {
  background: #1471A5;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(20, 113, 165, .34);
}
.mediaNavigation ul li a .icon { line-height: 1; font-size: 16px; }
/* Tooltip nach links – rechts wäre er aus dem Container gelaufen. Blaue Pille wie im
   Entwurf (style.css), einzeilig ohne Breitengrenze: mit max-width lief
   "Konformitätserklärung RoHS / REACH" über den Rand (2026-09-29). */
.mediaNavigation ul li a .title {
  left: auto;
  right: calc(100% + 14px);
  top: 50%;
  width: max-content;
  max-width: none;
  transform: translateY(-50%) translateX(8px);
  background: #1471A5;
  color: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(20, 113, 165, .28);
}
.mediaNavigation ul li:hover a .title { transform: translateY(-50%) translateX(0); }

/* ---------- Beschreibung ---------- */
.productDesc { margin: 52px 0 0; }
.productDesc p {
  font-size: 17px;
  line-height: 1.65;
  color: #3B4753;
  margin: 0 0 24px;
}
.bodyBrand {
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid #E6ECF1;
}
.bodyBrand img { max-width: 54px; }

/* ---------- Technische Daten ----------
   Vorher lagen die Werte über feste margin-left-Werte (95/120 px) – bei
   unterschiedlich langen Bezeichnungen standen sie dadurch versetzt.
   Jetzt zwei echte Spalten. */
.tableArea { padding: 60px 0 100px; }
.tableArea .secTitle { font-size: 30px; margin: 0 0 24px; }
/* Nur die Technische-Daten-Tabelle: dort steckt Bezeichnung UND Wert in
   EINER Zelle. Die Vergleichstabelle hat drei echte Zellen je Zeile - ohne
   :only-child hätte dieses Raster deren Spalten zerlegt. */
.tableArea .table tr td:only-child {
  display: grid;
  grid-template-columns: minmax(200px, 34%) 1fr;
  gap: 6px 28px;
  align-items: baseline;
  padding: 15px 18px;
}
.tableArea .table tr td:only-child p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
}
.tableArea .table tr td:only-child p:first-child { margin: 0; color: #5A6672; font-weight: 600; }
.tableArea .table tr td:only-child p:last-child { margin: 0; color: #1B2733; font-weight: 500; }

/* ---------- Responsive ----------
   Unter 992 px wird aus der Icon-Leiste eine Reihe beschrifteter Buttons:
   der Hover-Tooltip ist auf Touch-Geraeten nicht erreichbar. Dafuer muessen
   die beiden Bootstrap-Spalten (col-*-11 / col-*-1) auf volle Breite,
   sonst quetscht sich alles in ein Zwoelftel. */
/* Der Einzug für 992-1199 px steht weiter oben; hier nur noch für Mobil auf 0. */
@media (max-width: 991px) {
  .pagePath ul { padding-left: 0; }
}

@media (max-width: 991px) {
  /* Unter 992 px hängt das Logo in den Streifen. responsive.css gab hier
     30 px oberen Abstand - meine 13 px hatten den Pfad unter die Logospitze
     geschoben. */
  .pageBrackrumb { padding: 30px 0 13px; margin-bottom: 30px; }
  .productArea { padding: 0; }
  .product_pages_intro_content { margin-top: 0; }
  .productImg { aspect-ratio: 4 / 3; margin: 0 0 28px; }
  .productContent h2 { font-size: 32px; }
  .productDesc { margin: 34px 0 0; }

  .productArea .col-md-11,
  .productArea .col-sm-11,
  .productArea .col-md-1,
  .productArea .col-sm-1 { flex: 0 0 auto; width: 100%; }

  .mediaNavigation {
    display: block;
    top: 0;
    padding-top: 0;
    margin: 4px 0 0;
  }
  .mediaNavigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .mediaNavigation ul li { margin: 0; }
  .mediaNavigation ul li a {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 30px;
    background: #fff;
    color: #009DE2;
    border: 1px solid #009DE2;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
  }
  .mediaNavigation ul li a:hover {
    background: #009DE2;
    color: #fff;
    transform: none;
    box-shadow: none;
  }
  .mediaNavigation ul li a .icon { font-size: 14px; line-height: 1; }
  .mediaNavigation ul li a .title {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    border-radius: 0;
    white-space: normal;
    font-size: 14px;
    font-weight: 600;
  }
  /* Das Icon steht schon links im Button */
  .mediaNavigation ul li a .title i { display: none; }
}
@media (max-width: 575px) {
  .productContent h2 { font-size: 27px; }
  .productList { gap: 0; }
  /* an den Inhalt angepasst, damit die Sekundaer-Buttons nicht breiter
     wirken als der primaere CTA darueber */
  .mediaNavigation ul { flex-direction: column; align-items: flex-start; }
  .mediaNavigation ul li a { justify-content: flex-start; }
  .tableArea .table tr td:only-child { grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; }
  .tableArea { padding: 40px 0 70px; }
}

/* Aktuelle Seite ist kein Link mehr, sondern ruhiger Text. */
.pagePath ul li.active { color: #6B7885; font-weight: 400; }

/* ══════════════════════════════════════════════════════════════════════
   Downloads-Seite
   Vorher: 16 aneinandergereihte Tabellen mit ~110 Zeilen, ohne Suche und
   ohne Orientierung. Jetzt: Suchfeld, Sprungmarken und Karten je Kategorie.
   ══════════════════════════════════════════════════════════════════════ */
.dlIntro p { margin: 18px 0 0; }
.downloadsArea { padding: 40px 0 100px; }

/* Dokumente fuer alle Produkte (RoHS-/REACH-Erklaerung) - einmal oberhalb der Liste */
.dlGeneral {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: #EEF7FC;
  border: 1px solid #CFE7F6;
  border-radius: 8px;
}
.dlGeneralText { margin: 0; font-size: 16px; font-weight: 700; color: #1B2733; }
.dlGeneralText i { color: #009DE2; margin-right: 6px; }

/* Suchzeile */
.dlToolbar {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.dlSearch { position: relative; flex: 1 1 340px; max-width: 440px; }
.dlSearch > i {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: #9AA7B3;
  font-size: 14px;
  pointer-events: none;
}
.dlSearch input {
  width: 100%;
  padding: 12px 44px;
  font-size: 15px;
  color: #1B2733;
  background: #fff;
  border: 1px solid #D7DEE5;
  border-radius: 26px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dlSearch input:focus {
  outline: 0;
  border-color: #009DE2;
  box-shadow: 0 0 0 3px rgba(0, 157, 226, .15);
}
.dlSearch input::-webkit-search-cancel-button { display: none; }
.dlClear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #EEF2F6;
  color: #5A6672;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 160ms ease;
}
.dlClear[hidden] { display: none; }
.dlClear:hover { background: #009DE2; color: #fff; }
.dlCount { margin: 0; font-size: 14px; color: #6B7885; }
.dlCount strong { color: #1B2733; font-weight: 700; }

/* Sprungmarken */
.dlJump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 34px;
  padding: 0 0 26px;
  border-bottom: 1px solid #E6ECF1;
}
.dlJump[hidden] { display: none; }
.dlJump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid #E3E8ED;
  border-radius: 30px;
  background: #fff;
  color: #46535F;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 180ms ease;
}
.dlJump a span {
  font-size: 11.5px;
  font-weight: 700;
  color: #6B7885;
  background: #F0F3F6;
  border-radius: 20px;
  padding: 1px 8px;
}
.dlJump a:hover { border-color: #009DE2; color: #009DE2; }
.dlJump a:hover span { background: rgba(0, 157, 226, .12); color: #009DE2; }

/* Kategorie */
.dlGroup { margin: 0 0 34px; scroll-margin-top: 90px; }
.dlGroup[hidden] { display: none; }
.dlGroupTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #1B2733;
}
.dlBadge {
  font-size: 12px;
  font-weight: 700;
  color: #009DE2;
  background: rgba(0, 157, 226, .10);
  border-radius: 20px;
  padding: 3px 10px;
}

.dlList {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #E3E8ED;
  border-radius: 8px;
  overflow: hidden;
}
.dlRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 14px 18px;
  border-top: 1px solid #EDF1F4;
  transition: background 160ms ease;
}
/* .dlRow ist flex - ohne diese Regel wuerde das hidden-Attribut nicht greifen */
.dlRow[hidden] { display: none; }
.dlRow:first-child { border-top: 0; }
.dlRow:hover { background: #F8FAFC; }

.dlItem { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.dlName { font-size: 16px; font-weight: 700; color: #1B2733; text-decoration: none; }
.dlName:hover { color: #009DE2; text-decoration: underline; }
.dlNumber { font-size: 12.5px; font-weight: 600; color: #8593A0; }

.dlDocs { display: flex; flex-wrap: wrap; gap: 8px; }
.dlDoc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid #CFE7F6;
  border-radius: 30px;
  background: #fff;
  color: #009DE2;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: all 180ms ease;
}
.dlDoc:hover {
  background: #009DE2;
  border-color: #009DE2;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 157, 226, .28);
}

.dlEmpty { margin: 26px 0 0; font-size: 16px; color: #6B7885; }
.dlEmpty[hidden] { display: none; }

@media (max-width: 767px) {
  .downloadsArea { padding: 24px 0 70px; }
  .dlSearch { max-width: none; }
  /* 17 Sprungmarken wuerden umbrochen den halben ersten Bildschirm fuellen -
     deshalb eine Zeile zum seitlichen Wischen. */
  .dlJump {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
    margin-bottom: 26px;
  }
  .dlJump::-webkit-scrollbar { display: none; }
  .dlJump a { flex: 0 0 auto; }
  .dlGroupTitle { font-size: 19px; }
  .dlRow { align-items: flex-start; padding: 14px 15px; }
  .dlDoc { font-size: 12.5px; padding: 6px 13px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Kontaktkarten (.infoSingle)
   Gilt für die Kontaktseite und den Ansprechpartner-Block am Fuß der
   Produkt- und Kategorieseiten - beide nutzen dasselbe Markup.
   ══════════════════════════════════════════════════════════════════════ */
.infoSingle {
  position: relative;
  height: 100%;
  /* unten etwas knapper: die 26-px-Icon-Chips reichen unter die Textlinie,
     sonst wirkt die Karte unten schwerer als oben */
  padding: 22px 22px 14px;
  background: #fff;
  border: 1px solid #E3E8ED;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 220ms ease, border-color 220ms ease;
}
/* Der alte Akzentbalken ragte 7 px links und 8 px rechts aus der Karte
   heraus (left:-7px, width:100%+15px). Jetzt bündig als Kante oben. */
.infoSingle::after {
  left: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #009DE2 0%, #1471A5 100%);
}
.infoSingle:hover {
  transform: translateY(-3px);
  border-color: #C6E5F7;
  box-shadow: 0 12px 26px rgba(6, 33, 48, .12);
}
.infoSingle h4 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #1B2733;
  margin: 0 0 6px;
}
.infoSingle h6 {
  font-size: 15px;
  font-weight: 500;
  color: #6B7885;
  margin: 0 0 15px;
  min-height: 0;
}
.infoSingle p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  margin: 0 0 9px;
}
.infoSingle p:last-child { margin-bottom: 0; }
.infoSingle p i {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 157, 226, .10);
  color: #009DE2;
  font-size: 11px;
}
.infoSingle p a { color: #303030; text-decoration: none; word-break: break-word; }
.infoSingle p a:hover { color: #009DE2; text-decoration: underline; }
.infoSingle p:last-child a { color: #009DE2; }
/* Gleiche Höhe je Reihe + vertikaler Abstand zwischen den Reihen */
.infoWraper .row { row-gap: 24px; }

/* ---------- Nur Kontaktseite ----------
   Dort stehen drei HTML-Inhaltselemente untereinander, jedes mit einer
   eigenen .infoArea. Bei 120 px Innenabstand oben und unten klafften
   zwischen den Blöcken 240 px Leerraum. */
.frame .infoArea { padding: 52px 0 44px; }
.frame + .frame .infoArea { padding-top: 0; }
.frame:last-of-type .infoArea { padding-bottom: 96px; }

.frame .infoArea .secTitle { margin: 0 auto 16px; }
/* Adresse und Telefonzeile im Kopf */
.frame .infoArea > .container > .row p { font-size: 16px; color: #46535F; margin: 0 0 6px; }
.frame .infoArea > .container > .row p i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border-radius: 50%;
  background: rgba(0, 157, 226, .10);
  color: #009DE2;
  font-size: 11px;
  vertical-align: middle;
}
.frame .infoArea > .container > .row p a { color: #009DE2; text-decoration: none; }
.frame .infoArea > .container > .row p a:hover { text-decoration: underline; }

/* Abschnittsüberschriften: Geschäftsführung / Vertrieb / Service */
.frame .infoWraper h3 {
  margin: 44px 0 8px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: #1B2733;
}
.frame + .frame .infoWraper h3 { margin-top: 0; }
.frame .infoWraper h3 + p { font-size: 15px; color: #6B7885; margin: 0; }
.frame .infoWraper .row:first-child { margin-bottom: 22px; row-gap: 0; }

@media (max-width: 767px) {
  .frame .infoArea { padding: 34px 0 30px; }
  .frame:last-of-type .infoArea { padding-bottom: 60px; }
  .frame .infoWraper h3 { margin-top: 30px; font-size: 22px; }
  .infoSingle { padding: 18px 18px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Sicherheitsseite
   Fünf Abschnitte mit eigenen Klassen. Angeglichen an das Kartenbild der
   übrigen Seiten: Haarlinie statt Schlagschatten, Radius, blaue Kante oben.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- Einleitung ---------- */
/* Oberer Abstand kommt aus .pageBrackrumb, nicht doppelt hier */
.safety_intro_area { padding: 0 0 64px; }

/* .eyebrow ist bisher nur unter .company_intro_content gestylt und stand
   hier als unformatierter Kleintext über der Überschrift */
.safety_intro_text .eyebrow {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #009DE2;
  margin: 0 0 12px;
}
.safety_intro_text h1 {
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #1B2733;
  margin: 0 0 20px;
}
.safety_intro_text p.text_20 {
  font-size: 17px;
  line-height: 1.65;
  color: #3B4753;
  margin: 0 0 14px;
}
.safety_intro_text p.text_20:last-child { margin-bottom: 0; }
.safety_intro_image {
  margin-top: 40px;
  padding: 24px;
  background: #fff;
  border: 1px solid #E3E8ED;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(6, 33, 48, .07);
}

/* ---------- Fließtext-Abschnitt ---------- */
.safety_text_area { padding: 70px 0; }
.safety_text_block { max-width: 74ch; }
.safety_text_area .secTitle { font-size: 32px; line-height: 1.15; margin: 0 0 20px; }
.safety_text_block p {
  font-size: 17px;
  line-height: 1.65;
  color: #3B4753;
  margin: 0 0 18px;
}
.safety_text_block p:last-child { margin-bottom: 0; }

/* ---------- Messkategorien ---------- */
.safety_test_area { padding: 70px 0; }
/* Als einziger Abschnitt zentriert - das brach die Leserichtung der Seite */
.safety_test_area .text-center { text-align: left !important; }
.safety_test_area .secTitle { font-size: 32px; line-height: 1.15; margin: 0; }
.safety_test_grid { gap: 20px; margin-top: 28px; }
.safety_test_item {
  position: relative;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #E3E8ED;
  border-left: 1px solid #E3E8ED;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 220ms ease, border-color 220ms ease;
}
.safety_test_item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #009DE2 0%, #1471A5 100%);
}
.safety_test_item:hover {
  transform: translateY(-3px);
  border-color: #C6E5F7;
  box-shadow: 0 12px 26px rgba(6, 33, 48, .12);
}
.safety_test_item strong { font-size: 20px; line-height: 26px; margin-bottom: 5px; }
.safety_test_item p { margin: 0; font-size: 15px; line-height: 1.5; color: #5A6672; }

/* ---------- Einsatzbereiche ---------- */
.safety_category_area { padding: 70px 0; }
.safety_category_area .secTitle { font-size: 32px; line-height: 1.15; margin: 0 0 12px; }
.safety_category_area .text_20 { font-size: 17px; line-height: 1.6; color: #3B4753; margin: 0; }
.safety_category_table {
  margin-top: 28px;
  border: 1px solid #E3E8ED;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}
.safety_category_row { grid-template-columns: 138px 1fr; border-bottom-color: #EDF1F4; }
.safety_category_label {
  justify-content: center;
  padding: 22px 18px;
  font-size: 22px;
  letter-spacing: .01em;
}
.safety_category_content { padding: 20px 26px; }
.safety_category_content p {
  position: relative;
  padding-left: 20px;
  margin: 0 0 9px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #3B4753;
}
.safety_category_content p:last-child { margin-bottom: 0; }
.safety_category_content p::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #009DE2;
}

/* ---------- Geprüfte Sicherheit ---------- */
.safety_cert_area { padding: 70px 0 100px; }
.safety_cert_box {
  padding: 44px 48px;
  background: linear-gradient(120deg, #009DE2 0%, #1471A5 100%);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 157, 226, .22);
}
.safety_cert_box .secTitle { font-size: 30px; line-height: 1.15; margin: 0 0 16px; }
.safety_cert_box p {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 14px;
  max-width: 68ch;
}
.safety_cert_box p:last-child { margin-bottom: 0; }
/* Der Button war blau auf blau und damit praktisch unsichtbar */
.safety_cert_box .linkButton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #fff;
  color: #0B7FBB;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(6, 33, 48, .18);
  transition: all 200ms cubic-bezier(.2, .7, .3, 1);
}
.safety_cert_box .linkButton:hover {
  background: #F0F8FD;
  color: #0B7FBB;
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .safety_intro_area { padding: 0 0 44px; }
  .safety_text_area,
  .safety_test_area,
  .safety_category_area { padding: 46px 0; }
  .safety_cert_area { padding: 46px 0 70px; }
  .safety_intro_text h1 { font-size: 32px; }
  .safety_text_area .secTitle,
  .safety_test_area .secTitle,
  .safety_category_area .secTitle { font-size: 26px; }
  /* Label sitzt jetzt über dem Text statt daneben */
  .safety_category_label { justify-content: flex-start; }
  .safety_cert_box { padding: 30px 26px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Produktvergleich
   Die Tabelle stand ohne Rahmen zwischen zwei kräftigen blauen Linien und
   wirkte dadurch unfertig. Jetzt eine Karte wie auf den übrigen Seiten.
   ══════════════════════════════════════════════════════════════════════ */
.compareArea .table-responsive {
  background: #fff;
  border: 1px solid #E3E8ED;
  border-radius: 10px;
}
.compareArea .compareTable {
  margin-bottom: 0;
  /* darunter werden die Spalten unlesbar - dann lieber seitlich scrollen */
  min-width: 620px;
}

/* Kopfzeile: Produktkarten sitzen jetzt sichtbar in der Tabelle */
.compareArea .compareTable thead th {
  background: #F6F8FA;
  padding: 24px 16px 20px;
  border-bottom: 0;
}
.compareArea .compareTable .compareFeatureHead {
  vertical-align: bottom;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8593A0;
  padding-bottom: 24px;
}
.compareTable .compareHead img { max-height: 128px; margin-bottom: 12px; }
.compareTable .compareHead p { margin: 0 0 2px; }
.compareTable .compareHead p a { font-size: 16px; }
.compareTable .compareHead .linkButton { margin-top: 12px; font-weight: 700; }

/* Der 5-px-Balken war zu laut für eine Tabelle mit teils nur einer Zeile */
.compareArea .table .table-group-divider {
  border-top: 2px solid #009DE2;
  border-bottom: 0;
}

/* Feine Spaltentrenner führen den Blick über die Zeile */
.compareArea .compareTable th + th,
.compareArea .compareTable td + td { border-left: 1px solid #EDF1F4; }

.compareArea .compareTable tbody td {
  padding: 14px 18px;
  font-size: 15.5px;
  line-height: 1.45;
}
.compareArea .compareTable tbody td:first-child { color: #46535F; font-weight: 600; }
.compareArea .compareTable tbody td:not(:first-child) { color: #1B2733; font-weight: 500; }
/* „–" bedeutet: Merkmal beim Gerät nicht vorhanden */
.compareArea .compareTable tbody td.isEmptyValue { color: #B4BFC9; font-weight: 400; }

/* Unterschiede blau hervorheben - so kündigt es der Einleitungstext an.
   Muss gezielt höher gewichtet sein als die Textfarben oben (gleiche
   Spezifität, stehen aber davor) und als die Streifen von .table-striped,
   die Bootstrap über einen inset-box-shadow zeichnet. */
.compareArea .compareTable tbody tr.isDifferent > td {
  color: #009DE2;
  font-weight: 600;
  box-shadow: inset 0 0 0 9999px rgba(0, 157, 226, .08);
}

/* Zweite Tabelle: Merkmale, die nur einzelne Geräte haben */
.comparePartial { margin-top: 48px; }
.comparePartial .compareSubTitle { font-size: 22px; font-weight: 700; color: #1B2733; margin: 0 0 16px; }
.comparePartial .comparePartialHead { padding: 16px; font-size: 16px; }

.compareArea > .container > p:last-child { margin: 34px 0 0; }
.compareArea .linkButton { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 767px) {
  .compareArea .compareTable thead th { padding: 18px 12px 14px; }
  .compareTable .compareHead img { max-height: 96px; }
  .compareArea .compareTable tbody td { padding: 12px 14px; font-size: 14.5px; }
  .comparePartial { margin-top: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Einheitlicher Seitenkopf
   Muster wie auf Downloads und den Produktseiten: Seitenname in Blau,
   dunkler Subheader, kurzer erklärender Text.
   „Über uns" und „Sicherheit" tragen dieselben drei Bausteine, nur mit
   umgekehrter Gewichtung (kleiner blauer Kicker über großer Überschrift) -
   sie werden hier auf dieselbe Hierarchie gebracht.
   ══════════════════════════════════════════════════════════════════════ */
/* Kopfbereich nutzt die volle Containerbreite. new.css begrenzt
   .company_intro_content auf 980 px und .safety_intro_text auf 920 px -
   beides hier aufgehoben. */
.product_pages_intro_content,
.company_intro_content,
.safety_intro_text { max-width: none; }

/* 1 – Seitenname, blau */
.product_pages_intro_content .heading2,
.company_intro_content .eyebrow,
.safety_intro_text .eyebrow {
  margin: 0 0 8px;
  font-size: 48px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #009DE2;
}

/* 2 – Subheader, dunkel */
.product_pages_intro_content .heading3,
.company_intro_content h1,
.safety_intro_text h1 {
  margin: 0 0 20px;
  font-size: 39px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0;
  color: #181818;
}

/* 3 – Erklärender Text */
.product_pages_intro_content p.text_20,
.company_intro_content p.text_20,
.safety_intro_text p.text_20 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.6;
  color: #3B4753;
}
.product_pages_intro_content p.text_20:last-child,
.company_intro_content p.text_20:last-child,
.safety_intro_text p.text_20:last-child { margin-bottom: 0; }

/* Farbwechsel braucht Luft: ohne diesen Abstand beginnt der graue Block
   direkt an der letzten Textzeile des Kopfbereichs. */
.product_pages_intro + .infoArea { margin-top: 56px; }
/* Kategorieseiten: der graue Produktbereich begann direkt an der letzten
   Textzeile. Der Weißraum wandert vor den Farbwechsel, der graue
   Innenabstand wird im Gegenzug reduziert - Summe bleibt gleich. */
.product_pages_intro + .product_main_area { margin-top: 52px; }
.product_pages_intro + .product_main_area.section_padding { padding-top: 90px; }
@media (max-width: 991px) {
  .product_pages_intro + .infoArea { margin-top: 34px; }
  .product_pages_intro + .product_main_area { margin-top: 32px; }
  .product_pages_intro + .product_main_area.section_padding { padding-top: 60px; }
}

/* „Über uns": Kopf vor das Bild ziehen, damit die Seite wie alle anderen
   mit Name, Subheader und Text beginnt. */
.company_intro_area { padding: 0 0 64px; }
.company_intro_area .container { display: flex; flex-direction: column; }
.company_intro_content { order: -1; }
.company_hero_image { margin: 34px 0 0; }
.company_hero_image img { border-radius: 10px; }

@media (max-width: 991px) {
  .product_pages_intro_content .heading2,
  .company_intro_content .eyebrow,
  .safety_intro_text .eyebrow { font-size: 34px; line-height: 38px; }
  .product_pages_intro_content .heading3,
  .company_intro_content h1,
  .safety_intro_text h1 { font-size: 27px; line-height: 31px; }
  .company_intro_area { padding: 0 0 40px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Text-/Rechtsseiten (.legalArea): Karriere, Impressum, Datenschutz, AGB
   Für diese Sektion gab es bisher überhaupt kein CSS - Überschriften und
   Fließtext standen ungestaltet über die volle Containerbreite.
   ══════════════════════════════════════════════════════════════════════ */
.legalArea { padding: 0 0 90px !important; }
/* Folgt der Seitenkopf davor, braucht der Fließtext Abstand - sonst liest er
   sich als Fortsetzung des Einleitungssatzes. */
.product_pages_intro + .legalArea { padding-top: 34px !important; }
.legalArea .container > * { max-width: 74ch; }
.legalArea h1 {
  margin: 0 0 20px;
  font-size: 39px;
  line-height: 43px;
  font-weight: 700;
  color: #181818;
}
.legalArea h2 {
  margin: 40px 0 12px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: #1B2733;
}
.legalArea h3 {
  margin: 28px 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: #1B2733;
}
.legalArea p,
.legalArea li {
  font-size: 17px;
  line-height: 1.65;
  color: #3B4753;
}
.legalArea p { margin: 0 0 16px; }
.legalArea ul,
.legalArea ol { margin: 0 0 16px; padding-left: 22px; }
.legalArea li { margin: 0 0 8px; }
.legalArea a { color: #009DE2; }
.legalArea a:hover { text-decoration: underline; }

@media (max-width: 991px) {
  .legalArea { padding: 0 0 60px !important; }
  .legalArea h1 { font-size: 28px; line-height: 32px; }
  .legalArea h2 { font-size: 22px; margin-top: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ- und Anwendungsseiten
   Aus einer parallelen Sitzung übernommen und hier wieder eingefügt,
   nachdem diese Datei versehentlich auf einen alten Stand zurückgesetzt
   worden war.
   ══════════════════════════════════════════════════════════════════════ */
.faqArea { padding: 60px 0 90px; }
.faqArea h1.secTitle { margin-bottom: 18px; }
.faqArea .text_20 { max-width: 900px; margin-bottom: 10px; }
.faqGroupTitle { font-size: 26px; margin: 46px 0 18px; color: #303030; }
.faqAccordion .accordion-item { border: 1px solid #e3e8ee; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.faqAccordion .accordion-button { font-size: 17px; font-weight: 700; color: #303030; padding: 16px 20px; background: #f7fafc; }
.faqAccordion .accordion-button:not(.collapsed) { background: rgba(0,157,226,.08); color: #009DE2; box-shadow: none; }
.faqAccordion .accordion-button:focus { box-shadow: none; border-color: #009DE2; }
.faqAccordion .accordion-body { padding: 18px 20px; line-height: 1.65; }
.faqAccordion .accordion-body ul { margin: 10px 0 10px 18px; }
.faqAccordion .accordion-body li { margin-bottom: 6px; }
.faqAccordion a, .anwendungList a, .infoSingle h4 a { color: #009DE2; }
.faqOutro { margin: 40px 0 16px; font-size: 17px; }
.anwendungList { margin: 14px 0 0 18px; line-height: 1.7; }
.anwendungList li { margin-bottom: 10px; }
.anwendungHinweis { background: #f5f7fa; border-left: 4px solid #009DE2; padding: 16px 20px; border-radius: 4px; margin: 40px 0 0; }
.anwendungHinweis p { margin: 0; font-size: 14.5px; color: #555; }
.faqArea .infoWraper { margin-top: 6px; }
.faqArea .infoSingle { height: 100%; }
.faqArea .infoSingle h4 a { text-decoration: none; }
.faqArea .infoSingle h4 a:hover { text-decoration: underline; }

/* FAQ- und Anwendungsseiten haben jetzt den einheitlichen Kopfbereich davor -
   der eigene obere Innenabstand entfaellt dadurch. */
.product_pages_intro + .faqArea { padding-top: 0; }

/* ==========================================================================
   Service-Formulare: Kalibrierung und Reparatur/Retoure
   Ablaufschritte, Formularbausteine, Bestaetigung
   ========================================================================== */

/* --- Ablauf in Schritten --------------------------------------------------- */
.tbStepArea {
    padding: 70px 0 0;
}

.tbStepArea h3 {
    margin-bottom: 34px;
}

.tbSteps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    counter-reset: tbStep;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbSteps li {
    position: relative;
    counter-increment: tbStep;
    padding-top: 56px;
}

/* Die Nummer sitzt ueber der Ueberschrift, damit auch dreizeilige Titel passen. */
.tbSteps li::before {
    content: counter(tbStep);
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #009DE2;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
}

/* Verbindungslinie zwischen den Schritten */
.tbSteps li::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 52px;
    right: -30px;
    height: 2px;
    background: #D9E3EC;
}

.tbSteps li:last-child::after {
    display: none;
}

.tbSteps h4 {
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 25px;
    color: #181818;
}

.tbSteps p {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: #46535F;
}

/* Zwei Zeilen Platz, damit die Absaetze aller vier Schritte auf einer Hoehe
   beginnen - die Titel sind unterschiedlich lang. */
@media (min-width: 992px) {
    .tbSteps h4 {
        min-height: 50px;
    }
}

/* --- Hinweiskasten --------------------------------------------------------- */
.tbNote {
    display: flex;
    gap: 16px;
    margin-top: 46px;
    padding: 20px 24px;
    border: 1px solid #FFE0A8;
    border-left: 4px solid #F5A623;
    border-radius: 4px;
    background: #FFF9EE;
}

.tbNote i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 18px;
    color: #D98908;
}

.tbNote strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    color: #181818;
}

.tbNote p {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: #46535F;
}

/* --- Formularbereich ------------------------------------------------------- */
.tbFormArea {
    padding: 74px 0 90px;
}

.tbFormArea h3 {
    margin-bottom: 10px;
}

.tbFormLead {
    margin-bottom: 18px;
    font-size: 16px;
    color: #46535F;
}

.tbReq {
    color: #009DE2;
    font-weight: 700;
}

/* Deutlicher Hinweis, dass hier noch nichts uebertragen wird. */
.tbFormDemo {
    position: relative;
    margin-bottom: 34px;
    padding: 14px 18px 14px 46px;
    border: 1px solid #BEE4F8;
    border-radius: 4px;
    background: #EFF9FE;
    font-size: 15px;
    line-height: 24px;
    color: #17607F;
}

.tbFormDemo i {
    position: absolute;
    top: 17px;
    left: 19px;
    color: #009DE2;
}

.tbForm {
    max-width: 980px;
}

.tbFieldset {
    margin: 0 0 26px;
    padding: 26px 30px 30px;
    border: 1px solid #E6ECF1;
    border-radius: 4px;
    background: #fff;
}

.tbFieldset > legend {
    float: none;
    width: auto;
    margin: 0 0 20px;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: #181818;
}

.tbFieldsetHint {
    margin: -12px 0 20px;
    font-size: 15px;
    color: #6B7A88;
}

/* Felder nebeneinander, brechen bei Bedarf um */
.tbRow {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}

.tbRow:last-child {
    margin-bottom: 0;
}

.tbField {
    flex: 1 1 190px;
    min-width: 0;
}

.tbField--wide {
    flex: 2 1 300px;
}

.tbField--narrow {
    flex: 0 1 130px;
}

.tbField--full {
    flex: 1 1 100%;
    margin-bottom: 18px;
}

.tbField label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #2A3742;
}

.tbField input,
.tbField select,
.tbField textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #CBD6E0;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    color: #181818;
    transition: border-color .15s, box-shadow .15s;
}

.tbField textarea {
    resize: vertical;
}

.tbField input:focus,
.tbField select:focus,
.tbField textarea:focus {
    outline: none;
    border-color: #009DE2;
    box-shadow: 0 0 0 3px rgba(0, 157, 226, .16);
}

.tbField input:disabled {
    background: #F2F5F8;
    color: #8A97A3;
}

.tbFieldHint {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    color: #6B7A88;
}

/* Fehlerzustand */
.tbField.isInvalid input,
.tbField.isInvalid select,
.tbField.isInvalid textarea {
    border-color: #D0342C;
    background: #FEF6F5;
}

.tbCheck.isInvalid {
    color: #D0342C;
}

.tbCheck.isInvalid input {
    outline: 2px solid #D0342C;
    outline-offset: 2px;
}

.tbFieldError {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #D0342C;
}

/* --- Auswahlkacheln (Radios) ---------------------------------------------- */
.tbChoiceGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.tbChoiceGrid--four {
    grid-template-columns: repeat(4, 1fr);
}

.tbChoice {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #CBD6E0;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.tbChoice:hover {
    border-color: #9FC4DA;
}

.tbChoice input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #009DE2;
}

.tbChoiceBody {
    display: block;
}

.tbChoiceTitle {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: #181818;
}

.tbChoiceHint {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 21px;
    color: #6B7A88;
}

.tbChoice:has(input:checked) {
    border-color: #009DE2;
    background: #F2FAFE;
}

.tbChoice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(0, 157, 226, .16);
}

/* --- Ankreuzfelder --------------------------------------------------------- */
.tbCheckList {
    display: grid;
    gap: 10px;
}

.tbCheck {
    display: flex;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #2A3742;
    cursor: pointer;
}

.tbCheck input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #009DE2;
}

.tbCheck a {
    color: #009DE2;
    text-decoration: underline;
}

.tbCheckGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 22px;
    margin-top: 22px;
}

.tbCheckGridTitle {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 600;
    color: #2A3742;
}

/* --- Schaltflaechen -------------------------------------------------------- */
.tbAddBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px dashed #9FC4DA;
    border-radius: 4px;
    background: #F6FBFE;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #0080BB;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.tbAddBtn:hover {
    border-color: #009DE2;
    background: #EAF6FD;
}

.tbSubmitRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}

.tbSubmit {
    padding: 14px 34px;
    border: none;
    border-radius: 4px;
    background: #009DE2;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}

.tbSubmit:hover {
    background: #0080BB;
}

.tbSubmit:focus-visible {
    outline: 3px solid rgba(0, 157, 226, .35);
    outline-offset: 2px;
}

.tbSubmitHint {
    font-size: 15px;
    color: #6B7A88;
}

/* Geraetezeile, die per Schaltflaeche ergaenzt wurde */
.tbDevice + .tbDevice {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #EDF1F5;
}

.tbDeviceList {
    margin-bottom: 18px;
}

.tbDeviceRemove {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: #8A97A3;
    cursor: pointer;
}

.tbDeviceRemove:hover {
    color: #D0342C;
}

/* --- Bestaetigung ---------------------------------------------------------- */
.tbFormDone {
    max-width: 980px;
    padding: 40px;
    border: 1px solid #BEE4F8;
    border-radius: 4px;
    background: #F2FAFE;
    text-align: center;
}

.tbDoneIcon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #009DE2;
    font-size: 24px;
    line-height: 58px;
    color: #fff;
}

.tbFormDone h4 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #181818;
}

.tbFormDone p {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 27px;
    color: #46535F;
}

.tbTicket {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #BEE4F8;
    font-size: 19px;
    letter-spacing: .5px;
    color: #0080BB;
}

.tbFormDone .tbFormDemo {
    display: block;
    max-width: 640px;
    margin: 18px auto 22px;
    text-align: left;
}

/* --- Schmalere Ansichten --------------------------------------------------- */
@media (max-width: 1199px) {
    .tbSteps {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 30px;
    }

    /* Bei zwei Spalten wuerde die Linie ins Leere laufen. */
    .tbSteps li::after {
        display: none;
    }

    .tbChoiceGrid--four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .tbStepArea {
        padding-top: 44px;
    }

    .tbSteps {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .tbSteps li {
        padding: 4px 0 0 56px;
    }

    .tbFormArea {
        padding: 48px 0 60px;
    }

    .tbFieldset {
        padding: 22px 18px 24px;
    }

    .tbChoiceGrid,
    .tbChoiceGrid--four {
        grid-template-columns: 1fr;
    }

    .tbCheckGrid {
        grid-template-columns: 1fr 1fr;
    }

    .tbSubmit {
        width: 100%;
    }

    .tbFormDone {
        padding: 30px 20px;
    }
}

/* ==========================================================================
   Startseite: Ludwig mit Schild
   Die Schildflaeche liegt in der Grafik bei 37,46 % / 31,47 % / 60,80 % /
   67,10 % (ausgemessen am Rahmen x 977-2689, y 476-1475 im Original).
   Ueberschrift und Erklaertext sitzen als zwei getrennte Kaesten in der
   oberen und unteren Haelfte dieser Flaeche - so bleiben sie auch dann an
   ihrem Platz, wenn der Text auf schmalen Bildschirmen unter das Bild rueckt.
   Die Buehne umfasst nur das Bild; ihre Hoehe ist damit die Bezugsgroesse
   fuer die Prozentwerte.
   ========================================================================== */
.cta01Board {
    position: relative;
    container-type: inline-size;
}

.cta01BoardStage {
    position: relative;
}

.cta01BoardStage > img {
    display: block;
    width: 100%;
    height: auto;
}

.cta01BoardTitle,
.cta01BoardLead {
    position: absolute;
    left: 37.46%;
    width: 60.8%;
    height: 33.55%;
    margin: 0;
    padding: 0 3.4cqw;
    display: flex;
    text-align: left;
}

/* Obere Haelfte, am unteren Rand ausgerichtet: sitzt direkt ueber der Mitte */
.cta01BoardTitle {
    top: 31.47%;
    align-items: flex-end;
}

/* Untere Haelfte, am oberen Rand ausgerichtet */
.cta01BoardLead {
    top: 65.02%;
    align-items: flex-start;
}

/* Feste Werte als Rueckfall fuer Browser ohne Container-Einheiten */
.cta01Board .cta01BoardTitle {
    font-size: 26px;
    line-height: 1.12;
    max-width: none;
}

.cta01Board .cta01BoardLead {
    font-size: 14px;
    line-height: 1.55;
    padding-top: 10px;
}

@supports (font-size: 1cqw) {
    .cta01Board .cta01BoardTitle {
        font-size: max(3.7cqw, 26px);
    }

    .cta01Board .cta01BoardLead {
        font-size: max(1.62cqw, 14px);
        padding-top: max(1.1cqw, 8px);
    }
}

/* Schmale Bildschirme: fuer beide Textteile ist das Schild zu klein. Die
   Ueberschrift bleibt darin - sonst stuende das Schild leer -, der
   Erklaertext rueckt unter das Bild. */
@media (max-width: 767px) {
    .cta01Board .cta01BoardTitle {
        top: 31.47%;
        height: 67.1%;
        align-items: center;
        justify-content: center;
        padding: 0 3.5cqw;
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
    }

    .cta01Board .cta01BoardLead {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin-top: 20px;
        font-size: 17px;
        line-height: 27px;
        display: block;
    }
}

@supports (font-size: 1cqw) {
    @media (max-width: 767px) {
        .cta01Board .cta01BoardTitle {
            font-size: max(5.2cqw, 16px);
        }
    }
}

/* ==========================================================================
   Ueber uns: Kontakt-Kasten
   Gleiches Muster wie der Zertifikats-Kasten auf /sicherheit/. Vorher stand
   "Kundenservice" dunkelgrau auf Blau (h3-Grundfarbe #303030 aus style.css),
   und der Button war blau auf blau und damit praktisch unsichtbar.
   ========================================================================== */
.company_contact_box {
    padding: 44px 48px;
    background: linear-gradient(120deg, #009DE2 0%, #1471A5 100%);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 157, 226, .22);
}

.company_contact_box .secTitle {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.15;
    color: #fff;
}

.company_contact_box h3 {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.company_contact_box p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.5;
}

.company_contact_box p:last-child {
    margin-bottom: 0;
}

.company_contact_box p i {
    width: 18px;
    text-align: center;
    opacity: .85;
}

.company_contact_box p a {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: 3px;
}

.company_contact_box p a:hover {
    text-decoration-color: #fff;
}

.company_contact_box .linkButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #fff;
    color: #0B7FBB;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(6, 33, 48, .18);
    transition: all 200ms cubic-bezier(.2, .7, .3, 1);
}

.company_contact_box .linkButton i {
    color: #0B7FBB;
}

.company_contact_box .linkButton:hover {
    background: #F0F8FD;
    color: #0B7FBB;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .company_contact_box {
        padding: 30px 26px;
    }

    .company_contact_box .col-md-5 {
        margin-top: 24px;
    }
}

/* ==========================================================================
   News: Uebersicht und Detailseite
   Vorlage fuer die Templates von EXT:news. Alle Klassen tragen das Praefix
   tbNews, damit nichts mit den Standardklassen der Extension (.news,
   .article, .news-list-view ...) kollidiert.
   ========================================================================== */

/* --- Gemeinsame Bausteine ------------------------------------------------ */
.tbNewsMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    color: #6B7A88;
}

.tbNewsMeta time {
    font-weight: 600;
    color: #46535F;
}

.tbNewsTag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    background: #E8F5FC;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0080BB;
}

.tbNewsMore {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #009DE2;
}

.tbNewsMore i {
    font-size: 12px;
    transition: transform .15s;
}

/* Hochformatige Motive wie Katalogtitel ganz zeigen statt beschneiden */
.tbNewsMedia--contain {
    background: linear-gradient(160deg, #EEF4F8 0%, #DCE7EF 100%);
}

.tbNewsMedia--contain img {
    padding: 22px;
    object-fit: contain !important;
}

.tbNewsSectionHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 30px;
}

.tbNewsSectionHead h2 {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    color: #181818;
}

/* --- Uebersicht ---------------------------------------------------------- */
.tbNewsArea {
    padding: 56px 0 96px;
    background: #F2F2F2;
}

/* Kategorie-Filter */
.tbNewsFilter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}

.tbNewsFilter a {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #D9E3EC;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    color: #2A3742;
    transition: border-color .15s, color .15s, background .15s;
}

.tbNewsFilter a:hover {
    border-color: #009DE2;
    color: #009DE2;
}

.tbNewsFilter a.isActive,
.tbNewsFilter a[aria-current="page"] {
    border-color: #009DE2;
    background: #009DE2;
    color: #fff;
}

/* Aufmacher: die neueste bzw. als Top-Meldung markierte Meldung */
.tbNewsLead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    margin: 0 0 32px;
    overflow: hidden;
    border: 1px solid #E6ECF1;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow .2s;
}

.tbNewsLead:hover {
    box-shadow: 0 16px 36px rgba(11, 74, 123, .12);
}

.tbNewsLeadMedia {
    position: relative;
    min-height: 340px;
    background: #E9EEF3;
}

.tbNewsLeadMedia img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tbNewsLeadBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 48px;
}

.tbNewsLead h2 {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 38px;
    color: #181818;
}

.tbNewsLead h2 a {
    color: inherit;
    transition: color .15s;
}

/* Die ganze Kachel ist klickbar, der Link bleibt aber nur einer (der Titel) */
.tbNewsLead h2 a::after,
.tbNewsCard h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tbNewsLead:hover h2 a {
    color: #009DE2;
}

.tbNewsLead p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 28px;
    color: #46535F;
}

/* Kachelraster */
.tbNewsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.tbNewsCard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E6ECF1;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}

.tbNewsCard:hover {
    box-shadow: 0 14px 30px rgba(11, 74, 123, .12);
    transform: translateY(-3px);
}

.tbNewsCardMedia {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #E9EEF3;
}

.tbNewsCardMedia img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Meldung ohne Bild: Markenflaeche statt leerem Kasten */
.tbNewsCardMedia--none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #009DE2 0%, #1471A5 100%);
}

.tbNewsCardMedia--none i {
    font-size: 42px;
    color: rgba(255, 255, 255, .85);
}

.tbNewsCardBody {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px 26px 26px;
}

.tbNewsCard h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 27px;
    color: #181818;
}

.tbNewsCard h3 a {
    color: inherit;
    transition: color .15s;
}

.tbNewsCard:hover h3 a {
    color: #009DE2;
}

.tbNewsCard p {
    display: -webkit-box;
    margin: 0 0 18px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 16px;
    line-height: 25px;
    color: #46535F;
}

/* "Weiterlesen" sitzt unten, egal wie lang Titel und Teaser sind */
.tbNewsCardBody .tbNewsMore {
    margin-top: auto;
}

.tbNewsCard:hover .tbNewsMore i,
.tbNewsLead:hover .tbNewsMore i {
    transform: translateX(3px);
}

/* Seitennavigation */
.tbNewsPager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.tbNewsPager li > a,
.tbNewsPager li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #D9E3EC;
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: #2A3742;
    transition: border-color .15s, color .15s;
}

.tbNewsPager li > a:hover {
    border-color: #009DE2;
    color: #009DE2;
}

.tbNewsPager [aria-current="page"] {
    border-color: #009DE2;
    background: #009DE2;
    color: #fff;
}

.tbNewsPager .isDisabled {
    background: #F6F8FA;
    color: #AEB8C1;
}

/* Keine Meldungen gefunden */
.tbNewsEmpty {
    padding: 60px 30px;
    border: 1px dashed #C9D6E1;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 17px;
    color: #46535F;
}

/* --- Detailseite --------------------------------------------------------- */
.product_pages_intro_content .tbNewsMeta {
    margin: 16px 0 18px;
    font-size: 15px;
}

.tbNewsDetail {
    padding: 44px 0 90px;
}

.tbNewsDetailGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}

.tbNewsBack {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-size: 15px;
    font-weight: 700;
    color: #009DE2;
}

.tbNewsBack i {
    font-size: 12px;
    transition: transform .15s;
}

.tbNewsBack:hover i {
    transform: translateX(-3px);
}

/* Hauptbild */
.tbNewsHero {
    margin: 0 0 36px;
}

.tbNewsHero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.tbNewsHero figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 21px;
    color: #6B7A88;
}

.tbNewsCopyright {
    color: #8A97A3;
}

/* Hochformat im Hauptbild (z. B. Katalogtitel) */
.tbNewsHero.tbNewsMedia--contain {
    padding: 36px;
    border-radius: 8px;
}

.tbNewsHero.tbNewsMedia--contain img {
    width: auto;
    max-width: 100%;
    max-height: 540px;
    margin: 0 auto;
    padding: 0;
    border-radius: 2px;
    box-shadow: 0 18px 40px rgba(11, 74, 123, .2);
}

.tbNewsHero.tbNewsMedia--contain figcaption {
    margin-top: 22px;
}

/* Fliesstext aus dem Rich-Text-Editor */
.tbNewsBody {
    font-size: 18px;
    line-height: 30px;
    color: #2A3742;
}

.tbNewsBody > * + * {
    margin-top: 20px;
}

.tbNewsBody > :first-child {
    margin-top: 0;
}

.tbNewsBody h2 {
    margin-top: 44px;
    font-size: 28px;
    line-height: 34px;
    color: #181818;
}

.tbNewsBody h3 {
    margin-top: 34px;
    font-size: 22px;
    line-height: 29px;
    color: #181818;
}

.tbNewsBody h2 + *,
.tbNewsBody h3 + * {
    margin-top: 12px;
}

.tbNewsBody a {
    color: #0080BB;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tbNewsBody a:hover {
    color: #009DE2;
}

.tbNewsBody ul,
.tbNewsBody ol {
    padding: 0;
    list-style: none;
}

.tbNewsBody li + li {
    margin-top: 8px;
}

.tbNewsBody ul li {
    position: relative;
    padding-left: 26px;
}

.tbNewsBody ul li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #009DE2;
}

.tbNewsBody ol {
    counter-reset: tbNewsOl;
}

.tbNewsBody ol li {
    position: relative;
    padding-left: 36px;
    counter-increment: tbNewsOl;
}

.tbNewsBody ol li::before {
    content: counter(tbNewsOl);
    position: absolute;
    top: 3px;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E8F5FC;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #0080BB;
}

.tbNewsBody blockquote {
    margin: 34px 0 0;
    padding: 4px 0 4px 26px;
    border-left: 4px solid #009DE2;
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: #181818;
}

.tbNewsBody blockquote p {
    margin: 0;
}

.tbNewsBody blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    color: #6B7A88;
}

.tbNewsBody figure {
    margin: 34px 0 0;
}

.tbNewsBody figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.tbNewsBody figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 21px;
    color: #6B7A88;
}

/* Breite Tabellen scrollen in ihrem Kasten, nicht die ganze Seite */
.tbNewsTable {
    overflow-x: auto;
}

.tbNewsBody table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 24px;
}

.tbNewsBody th,
.tbNewsBody td {
    padding: 10px 14px;
    border-bottom: 1px solid #E6ECF1;
    text-align: left;
}

.tbNewsBody thead th {
    background: #F6F8FA;
    font-weight: 700;
    color: #181818;
}

/* Weitere Bilder */
.tbNewsGallery {
    margin: 48px 0 0;
}

.tbNewsGallery h2 {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 29px;
    color: #181818;
}

.tbNewsGalleryGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tbNewsGalleryGrid a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #E9EEF3;
}

.tbNewsGalleryGrid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.tbNewsGalleryGrid a:hover img {
    transform: scale(1.04);
}

/* Teilen - reine Links, kein Tracking bis zum Klick */
.tbNewsShare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 44px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #E6ECF1;
}

.tbNewsShare > span {
    margin-right: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #46535F;
}

.tbNewsShare a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #D9E3EC;
    border-radius: 50%;
    background: #fff;
    color: #2A3742;
    transition: all .15s;
}

.tbNewsShare a:hover {
    border-color: #009DE2;
    background: #009DE2;
    color: #fff;
}

/* Seitenleiste */
.tbNewsAside {
    display: grid;
    gap: 20px;
}

.tbNewsBox {
    padding: 24px 24px 22px;
    border: 1px solid #E6ECF1;
    border-radius: 8px;
    background: #fff;
}

.tbNewsBox h2 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7A88;
}

.tbNewsFiles,
.tbNewsLinks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbNewsFiles li + li,
.tbNewsLinks li + li {
    border-top: 1px solid #EDF1F5;
}

.tbNewsFiles a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    color: #181818;
}

.tbNewsFiles i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 22px;
    color: #D0342C;
}

.tbNewsFiles strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    transition: color .15s;
}

.tbNewsFiles small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    color: #6B7A88;
}

.tbNewsFiles a:hover strong {
    color: #009DE2;
}

.tbNewsLinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    color: #181818;
    transition: color .15s;
}

.tbNewsLinks a:hover {
    color: #009DE2;
}

.tbNewsLinks i {
    font-size: 12px;
    color: #009DE2;
}

/* Ansprechpartner - gleiches Muster wie die blauen Kaesten auf
   /sicherheit/ und /unternehmen/ueber-uns/ */
.tbNewsBox--contact {
    border: 0;
    background: linear-gradient(120deg, #009DE2 0%, #1471A5 100%);
    box-shadow: 0 18px 40px rgba(0, 157, 226, .22);
    color: #fff;
}

.tbNewsBox--contact h2 {
    color: rgba(255, 255, 255, .78);
}

.tbNewsBox--contact p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 25px;
}

.tbNewsBox--contact .linkButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #fff;
    color: #0B7FBB;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(6, 33, 48, .18);
}

.tbNewsBox--contact .linkButton:hover {
    background: #F0F8FD;
    color: #0B7FBB;
}

/* Vorherige und naechste Meldung */
.tbNewsPrevNext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 64px 0 0;
}

.tbNewsPrevNext a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    border: 1px solid #E6ECF1;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.tbNewsPrevNext a:hover {
    border-color: #009DE2;
    box-shadow: 0 10px 24px rgba(11, 74, 123, .10);
}

.tbNewsPrevNext small {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #009DE2;
}

.tbNewsPrevNext strong {
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    color: #181818;
}

.tbNewsPrevNext .tbNewsNext {
    grid-column: 2;
    text-align: right;
}

.tbNewsPrevNext .tbNewsNext small {
    justify-content: flex-end;
}

/* Weitere Meldungen unter dem Artikel */
.tbNewsRelated {
    padding: 72px 0 96px;
    background: #F2F2F2;
}

/* --- Schmalere Ansichten ------------------------------------------------- */
@media (max-width: 1199px) {
    .tbNewsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tbNewsDetailGrid {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 40px;
    }
}

@media (max-width: 991px) {
    .tbNewsLead {
        grid-template-columns: 1fr;
    }

    .tbNewsLeadMedia {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .tbNewsLeadBody {
        padding: 30px 28px;
    }

    .tbNewsLead h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .tbNewsDetailGrid {
        grid-template-columns: 1fr;
    }

    .tbNewsAside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .tbNewsArea {
        padding: 36px 0 64px;
    }

    /* Filter auf dem Handy seitlich wischbar statt mehrzeilig */
    .tbNewsFilter {
        flex-wrap: nowrap;
        margin: 0 -12px 26px;
        padding: 0 12px 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tbNewsFilter::-webkit-scrollbar {
        display: none;
    }

    .tbNewsFilter li {
        flex: 0 0 auto;
    }

    .tbNewsGrid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tbNewsSectionHead h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .tbNewsHero.tbNewsMedia--contain {
        padding: 22px;
    }

    .tbNewsBody {
        font-size: 17px;
        line-height: 28px;
    }

    .tbNewsBody h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .tbNewsBody blockquote {
        font-size: 19px;
        line-height: 29px;
    }

    .tbNewsGalleryGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tbNewsAside {
        grid-template-columns: 1fr;
    }

    .tbNewsPrevNext {
        grid-template-columns: 1fr;
    }

    .tbNewsPrevNext .tbNewsNext {
        grid-column: auto;
    }

    .tbNewsRelated {
        padding: 48px 0 64px;
    }

    .tbNewsDetail {
        padding-top: 28px;
    }
}

/* --- News in TYPO3: Kategorie-Menue als eigenes Plugin -------------------
   Das Menue sitzt in einem eigenen Inhaltselement direkt ueber der Liste.
   Beide bekommen dieselbe graue Flaeche und wirken dadurch wie ein Block. */
.tbNewsFilterArea {
    padding: 56px 0 0;
    background: #F2F2F2;
}

.tbNewsFilterArea .tbNewsFilter {
    margin-bottom: 0;
}

.frame:has(.tbNewsFilterArea) + .frame .tbNewsArea {
    padding-top: 36px;
}

/* Videos aus den Medien einer Meldung */
.tbNewsVideo {
    margin: 40px 0 0;
}

.tbNewsVideo iframe,
.tbNewsVideo video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .tbNewsFilterArea {
        padding-top: 36px;
    }

    .frame:has(.tbNewsFilterArea) + .frame .tbNewsArea {
        padding-top: 24px;
    }
}

/* ==========================================================================
   Produktdetail: Bild vergroessern (Lightbox)
   Das Produktbild verlinkt auf eine 2000-px-Fassung des BMEcat-Druckbildes.
   testboy.js oeffnet sie in einem nativen <dialog>; ohne JavaScript bleibt
   es ein normaler Link auf das grosse Bild.
   ========================================================================== */
.productZoom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.productZoom img {
    transition: transform .3s ease;
}

.productZoom:hover img {
    transform: scale(1.03);
}

.productZoom:focus-visible {
    outline: 3px solid rgba(0, 157, 226, .45);
    outline-offset: 8px;
    border-radius: 6px;
}

.productZoomHint {
    position: absolute;
    right: -14px;
    bottom: -14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(24, 24, 24, .74);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}

.productZoom:hover .productZoomHint,
.productZoom:focus-visible .productZoomHint {
    opacity: 1;
    transform: none;
}

/* Auf Touch-Geraeten gibt es kein Hover - dort steht der Hinweis dauerhaft */
@media (hover: none) {
    .productZoomHint {
        opacity: 1;
        transform: none;
    }
}

/* --- Dialog ---------------------------------------------------------------- */
.tbZoom {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
}

.tbZoom::backdrop {
    background: rgba(12, 20, 28, .92);
}

.tbZoomStage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 24px 56px;
    overflow: auto;
}

.tbZoomStage img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    cursor: zoom-in;
    transition: opacity .2s;
}

/* Volle Aufloesung: Bild in Originalgroesse, die Buehne scrollt */
.tbZoom.isFull .tbZoomStage {
    align-items: flex-start;
    justify-content: flex-start;
}

.tbZoom.isFull .tbZoomStage img {
    max-width: none;
    max-height: none;
    margin: auto;
    cursor: zoom-out;
}

.tbZoomBar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    color: #fff;
}

.tbZoomTitle {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbZoomClose {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}

.tbZoomClose:hover,
.tbZoomClose:focus-visible {
    background: #009DE2;
    outline: none;
}

.tbZoomHelp {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    margin: 0;
    font-size: 13px;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    pointer-events: none;
}

/* Ladezustand, solange das grosse Bild noch unterwegs ist */
.tbZoom.isLoading .tbZoomStage img {
    opacity: 0;
}

.tbZoom.isLoading .tbZoomStage::after {
    content: "";
    position: absolute;
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbZoomDreh .8s linear infinite;
}

@keyframes tbZoomDreh {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .productZoom img,
    .productZoomHint,
    .tbZoomStage img {
        transition: none;
    }
}

@media (max-width: 767px) {
    .productZoomHint {
        right: -8px;
        bottom: -8px;
    }

    .tbZoomStage {
        padding: 64px 10px 48px;
    }
}

/* ==========================================================================
   Newsletter: Anmeldung (femanager) und Abmeldung (Luxletter)
   Baut auf den Formular-Bausteinen der Service-Seiten auf (tbForm, tbField,
   tbCheck, tbFormDone). Vorlagen unter fileadmin/Private/.../femanager/ und
   .../luxletter/.
   ========================================================================== */
.tbNewsletter {
    padding-top: 40px;
}

.tbNewsletterGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}

.tbNewsletterForm {
    max-width: none;
}

.tbNewsletterForm .tbFieldset {
    margin-bottom: 0;
}

.tbNewsletterFields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.tbNewsletterFields .tbField {
    flex: 1 1 calc(50% - 9px);
}

.tbNewsletterFields .tbField--full,
.tbNewsletterConsent {
    flex: 1 1 100%;
    margin-bottom: 0;
}

.tbNewsletterConsent {
    margin-top: 4px;
}

.tbNewsletterConsent .tbCheck {
    font-size: 15px;
    line-height: 23px;
}

.tbOptional {
    font-weight: 400;
    color: #8A97A3;
}

/* --- Rechte Spalte --------------------------------------------------------- */
.tbNewsletterAside {
    padding: 28px 30px 30px;
    border: 1px solid #BEE4F8;
    border-radius: 4px;
    background: #F2FAFE;
}

.tbNewsletterAside h4 {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 26px;
    color: #181818;
}

.tbNewsletterTopics {
    display: grid;
    gap: 16px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.tbNewsletterTopics li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    line-height: 22px;
    color: #46535F;
}

.tbNewsletterTopics i {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    background: #009DE2;
    font-size: 15px;
    line-height: 38px;
    text-align: center;
    color: #fff;
}

.tbNewsletterTopics strong {
    display: block;
    font-size: 16px;
    color: #181818;
}

.tbNewsletterSteps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tbNlSchritt;
}

.tbNewsletterSteps li {
    position: relative;
    padding-left: 38px;
    font-size: 15px;
    line-height: 23px;
    color: #46535F;
    counter-increment: tbNlSchritt;
}

.tbNewsletterSteps li::before {
    content: counter(tbNlSchritt);
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #009DE2;
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: #009DE2;
}

/* --- Hinweise ueber dem Formular ------------------------------------------- */
.tbNotice {
    position: relative;
    margin: 0 0 22px;
    padding: 14px 18px 14px 46px;
    border: 1px solid #BEE4F8;
    border-radius: 4px;
    background: #EFF9FE;
    font-size: 15px;
    line-height: 24px;
    color: #17607F;
}

.tbNotice > i {
    position: absolute;
    top: 18px;
    left: 19px;
    color: #009DE2;
}

.tbNotice--error {
    border-color: #F1C3BF;
    background: #FEF6F5;
    color: #8F231D;
}

.tbNotice--error > i {
    color: #D0342C;
}

.tbNotice ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.tbNotice a {
    color: inherit;
    text-decoration: underline;
}

/* --- Rueckmeldungen -------------------------------------------------------- */
.tbNewsletter .tbFormDone {
    margin: 0 auto;
}

.tbFormDone .tbDoneMessage {
    max-width: 640px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 30px;
    color: #181818;
}

.tbFormDoneLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.tbFormDone--error {
    border-color: #F1C3BF;
    background: #FEF6F5;
}

.tbFormDone--error .tbDoneIcon {
    background: #D0342C;
}

@media (max-width: 991px) {
    .tbNewsletterGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
}

@media (max-width: 575px) {
    .tbNewsletter {
        padding-top: 24px;
    }

    .tbNewsletterFields .tbField {
        flex-basis: 100%;
    }

    .tbNewsletterAside {
        padding: 22px 18px 24px;
    }

    .tbFormDone .tbDoneMessage {
        font-size: 18px;
        line-height: 27px;
    }
}

/* ==========================================================================
   Footer (Variante B, dunkelblau)
   Kopfzeile mit Logo und Newsletter-Hinweis, darunter drei Spalten:
   Kontakt | Produktkategorien (zweispaltig, automatisch aus dem Seitenbaum
   per lib.footerKategorien) | Service und Unternehmen.
   Markup: fileadmin/Private/Partials/Footer.html
   ========================================================================== */
.tbFooter {
    --tbF-bg: #0B2D42;
    --tbF-glanz: rgba(0, 157, 226, .2);
    --tbF-text: rgba(255, 255, 255, .78);
    --tbF-link: rgba(255, 255, 255, .86);
    --tbF-linie: rgba(255, 255, 255, .12);
    --tbF-akzent: #009DE2;
    --tbF-flaeche: rgba(255, 255, 255, .08);
    padding: 48px 0 18px;
    background: radial-gradient(circle at 85% 0%, var(--tbF-glanz), transparent 45%), var(--tbF-bg);
}

.tbFooter + .copyright {
    background: #071F2E;
}

/* --- Kopfzeile ------------------------------------------------------------- */
.tbFooterTop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 42px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--tbF-linie);
}

.tbFooterLogo {
    display: block;
    flex: 0 0 auto;
}

.tbFooterLogo img {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
}

.tbFooterNewsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.tbFooterNewsletter p {
    max-width: 400px;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--tbF-text);
}

.tbFooterNewsletter strong {
    display: block;
    margin-bottom: 2px;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
}

.tbFooterBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 4px;
    background: #009DE2;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s;
}

.tbFooterBtn:hover,
.tbFooterBtn:focus-visible {
    background: #0089C6;
    color: #fff;
}

.tbFooterBtn i {
    font-size: 13px;
    transition: transform .15s;
}

.tbFooterBtn:hover i {
    transform: translateX(3px);
}

/* --- Spalten --------------------------------------------------------------- */
.tbFooterMain > [class*="col-"] {
    margin-bottom: 30px;
}

.tbFooterTitle {
    position: relative;
    min-height: 0;
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
}

.tbFooterTitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--tbF-akzent);
}

.tbFooterGruppe + .tbFooterGruppe {
    margin-top: 30px;
}

.tbFooterAddress {
    margin: 0 0 16px;
    font-size: 15px;
    font-style: normal;
    line-height: 24px;
    color: var(--tbF-text);
}

.tbFooterContact {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.tbFooterContact li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 22px;
}

.tbFooterContact i {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 50%;
    background: var(--tbF-flaeche);
    font-size: 13px;
    color: #fff;
}

.tbFooterContact a {
    color: #fff;
    text-decoration: none;
}

.tbFooterContact a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tbFooterSocial {
    display: flex;
    gap: 10px;
}

.tbFooterSocial a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tbF-flaeche);
    font-size: 16px;
    color: #fff;
    transition: background .15s;
}

.tbFooterSocial a:hover,
.tbFooterSocial a:focus-visible {
    background: #009DE2;
    color: #fff;
}

.tbFooterLinks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbFooterLinks li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 16px;
    font-size: 15px;
    line-height: 22px;
    break-inside: avoid;
}

.tbFooterLinks li::before {
    content: "\f105";
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
    line-height: 22px;
    color: var(--tbF-akzent);
    transition: transform .15s;
}

.tbFooterLinks a {
    color: var(--tbF-link);
    text-decoration: none;
    transition: color .15s;
}

.tbFooterLinks a:hover,
.tbFooterLinks a:focus-visible,
.tbFooterLinks a[aria-current="page"] {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tbFooterLinks li:hover::before {
    transform: translateX(3px);
}

.tbFooterLinks--spalten {
    columns: 2;
    column-gap: 32px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .tbFooterLinks--spalten {
        columns: 3;
    }
}

@media (max-width: 575px) {
    .tbFooter {
        padding-top: 36px;
    }

    .tbFooterTop {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 32px;
        padding-bottom: 28px;
    }

    .tbFooterLinks--spalten {
        column-gap: 20px;
    }

    .tbFooterLinks li {
        font-size: 14px;
    }

    /* Service und Unternehmen nebeneinander statt einer langen Liste */
    .tbFooterGruppen {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    .tbFooterGruppe + .tbFooterGruppe {
        margin-top: 0;
    }
}

/* ==========================================================================
   Ueber uns: Video- und News-Teaser
   News-Plugin mit Template-Layout "teaser" (Templates/news/News/List.html,
   Abschnitt "Teaser"). Rechts stehen automatisch die neuesten drei
   Meldungen, links verlinkt die Videokarte auf den YouTube-Kanal.
   ========================================================================== */
.tbTeaserCard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 45, 66, .08);
}

.tbTeaserVisual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background:
        radial-gradient(circle at 78% 18%, rgba(0, 157, 226, .38), transparent 55%),
        linear-gradient(135deg, #0B2D42 0%, #134463 100%);
    color: #fff;
    text-decoration: none;
}

.tbTeaserPlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding-left: 5px;
    border-radius: 50%;
    background: #009DE2;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 0 0 10px rgba(0, 157, 226, .2);
    transition: transform .2s, box-shadow .2s;
}

.tbTeaserVisual:hover .tbTeaserPlay,
.tbTeaserVisual:focus-visible .tbTeaserPlay {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(0, 157, 226, .26);
}

.tbTeaserVisualLabel {
    position: absolute;
    bottom: 18px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
}

.tbTeaserVisualLabel i {
    font-size: 18px;
    color: #fff;
}

.tbTeaserBody {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 30px 32px 32px;
}

.tbTeaserKicker {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #009DE2;
}

.tbTeaserCard h3 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 30px;
    color: #181818;
}

.tbTeaserBody > p:not(.tbTeaserKicker) {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 26px;
    color: #46535F;
}

.tbTeaserBody .linkButton {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 22px;
}

.tbTeaserNews {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.tbTeaserNews li {
    border-top: 1px solid #E6ECF1;
}

.tbTeaserNews li:last-child {
    border-bottom: 1px solid #E6ECF1;
}

.tbTeaserNews a {
    position: relative;
    display: block;
    padding: 14px 32px 14px 0;
    color: #181818;
    text-decoration: none;
}

.tbTeaserNews a::after {
    content: "\f105";
    position: absolute;
    top: 50%;
    right: 6px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #009DE2;
    transform: translateY(-50%);
    transition: transform .15s;
}

.tbTeaserNews a:hover::after,
.tbTeaserNews a:focus-visible::after {
    transform: translate(3px, -50%);
}

.tbTeaserNews .tbNewsMeta {
    margin: 0;
}

.tbTeaserNewsTitle {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    transition: color .15s;
}

.tbTeaserNews a:hover .tbTeaserNewsTitle,
.tbTeaserNews a:focus-visible .tbTeaserNewsTitle {
    color: #009DE2;
}

@media (max-width: 575px) {
    .tbTeaserVisual {
        min-height: 180px;
        padding-bottom: 24px;
    }

    .tbTeaserBody {
        padding: 24px 20px 26px;
    }

    .tbTeaserCard h3 {
        font-size: 22px;
        line-height: 28px;
    }
}

/* ==========================================================================
   Startseite: Aktuelles und Neues (News-Karussell)
   News-Plugin mit Template-Layout "startseite" (Templates/news/News/List.html,
   Abschnitt "Startseite"). Aufbau wie im Entwurf (clientArea + Bootstrap-
   Karussell), aber jede Meldung als Karte mit sichtbarem Weiterlesen-Link -
   im Entwurf erschien der Link nur bei Mausberuehrung, auf dem Handy nie.
   ========================================================================== */

/* style.css setzt .clientArea .row auf width: 100% und max-width: 1000px.
   Zusammen mit den negativen Bootstrap-Raendern verschiebt das die Spalten;
   hier gilt wieder die normale Zeilenbreite. */
.tbHomeNews > .container > .row,
.tbHomeNews .slientItem > .row {
    width: auto;
    max-width: none;
}

.tbHomeNews .slientItem > .row {
    --bs-gutter-x: 40px;
}

.tbHomeNews .clientSocial {
    gap: 18px;
}

.tbHomeNews .clientSocial .tbHomeNewsAll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #009DE2;
}

.tbHomeNews .clientSocial .tbHomeNewsAll:hover {
    color: #1471A5;
}

.tbHomeNews .clientWraper {
    margin-top: 36px;
}

/* Platz fuer den Kartenschatten innerhalb von overflow: hidden */
.tbHomeNews .carousel-item {
    padding: 6px 14px 34px;
}

.tbHomeNews .slientItem,
.tbHomeNews .slientItem:hover {
    padding: 28px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(11, 45, 66, .08);
}

.tbHomeNews .clientImg {
    display: block;
    text-align: left;
}

.tbHomeNews .tbHomeNewsImg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #E6ECF1;
}

.tbHomeNews .clientImg img {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 18px;
    object-fit: contain;
    transition: transform .35s ease;
}

.tbHomeNews .clientImg img.tbHomeNewsPlatzhalter {
    padding: 0;
    object-fit: cover;
}

.tbHomeNews .slientItem:hover .clientImg img {
    transform: scale(1.03);
}

.tbHomeNews .clientContent {
    margin: 0;
    padding: 6px 6px 6px 0;
    text-align: left;
}

.tbHomeNews .clientContent .tbNewsMeta {
    margin-bottom: 12px;
}

.tbHomeNews .clientContent h2 {
    display: -webkit-box;
    margin: 0 0 14px;
    overflow: hidden;
    font-size: 26px;
    line-height: 34px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tbHomeNews .clientContent h2 a {
    display: inline;
    padding: 0;
    background: none;
    color: #181818;
    text-decoration: none;
    transition: color .15s;
}

.tbHomeNews .clientContent h2 a:hover {
    color: #009DE2;
}

.tbHomeNews .clientContent p {
    display: -webkit-box;
    max-width: none;
    margin: 0 0 24px;
    overflow: hidden;
    font-size: 17px;
    line-height: 28px;
    color: #46535F;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tbHomeNews .clientContent .tbHomeNewsMore,
.tbHomeNews .slientItem:hover .clientContent .tbHomeNewsMore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #009DE2;
    color: #fff;
}

.tbHomeNews .clientContent .tbHomeNewsMore:hover {
    background: #1471A5;
    color: #fff;
}

/* style.css nimmt den linken Rand weg - dann sitzen die Punkte nicht mittig */
.tbHomeNews .clientWraper .carousel-indicators {
    bottom: -40px;
    margin-right: 0;
    margin-left: 0;
}

@media (max-width: 767px) {
    .tbHomeNews .clientSocial {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tbHomeNews .carousel-item {
        padding: 4px 4px 28px;
    }

    .tbHomeNews .slientItem,
    .tbHomeNews .slientItem:hover {
        padding: 16px 16px 22px;
        box-shadow: 0 6px 16px rgba(11, 45, 66, .08);
    }

    .tbHomeNews .tbHomeNewsImg {
        height: 220px;
        margin-bottom: 18px;
    }

    .tbHomeNews .clientContent {
        min-height: 250px;
        padding: 0;
    }

    .tbHomeNews .clientContent h2 {
        font-size: 21px;
        line-height: 28px;
    }

    .tbHomeNews .clientContent p {
        font-size: 16px;
        line-height: 25px;
    }

    /* Auf dem Handy wird gewischt; die Pfeile lagen dort ueber der Ueberschrift */
    .tbHomeNews .clientWraper .carousel-control-prev,
    .tbHomeNews .clientWraper .carousel-control-next {
        display: none;
    }
}

/* ==========================================================================
   Kopfbereich: Telefonnummer und Sprach-Dropdown (Wunsch Vertrieb, 2026-09-16)
   Desktop: Telefon (Icon + zwei Zeilen) links neben der Suche, Sprache als
   Dropdown ganz rechts. Bei 1200-1399 px entfaellt die Zeile "Direkt
   erreichbar", bei 992-1199 px bleibt nur das Telefon-Icon. Unter 992 px
   sitzt ein Anruf-Knopf neben dem Menue-Symbol, im aufgeklappten Menue
   steht die Nummer ausgeschrieben. Markup: Partials/Header.html.
   ========================================================================== */
.navPhone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 18px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.navPhone:hover,
.navPhone:focus-visible {
    color: #fff;
}

.navPhoneIcon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 14px;
    transition: background .15s;
}

.navPhone:hover .navPhoneIcon {
    background: #fff;
    color: #009DE2;
}

.navPhoneText {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.navPhoneLabel {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.navPhoneNumber {
    font-size: 15px;
    font-weight: 700;
}

.navPhoneBar {
    display: none;
}

/* --- Sprach-Dropdown -------------------------------------------------------- */
.navLang {
    position: relative;
    margin-left: 14px;
}

.navLangToggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 19px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.navLangToggle:hover,
.navLangToggle:focus-visible,
.navLangToggle[aria-expanded="true"] {
    border-color: #fff;
    background: rgba(255, 255, 255, .14);
    outline: none;
}

.navLangCaret {
    font-size: 12px;
    transition: transform .15s;
}

.navLangToggle[aria-expanded="true"] .navLangCaret {
    transform: rotate(180deg);
}

.navLangMenu {
    min-width: 200px;
    margin-top: 8px;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
}

.navLangMenu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #181818;
}

.navLangMenu .dropdown-item.active {
    background: rgba(0, 157, 226, .1);
    color: #009DE2;
}

.navLangMenu .dropdown-item.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
}

.navLangMenu .dropdown-item.disabled {
    color: #8A97A3;
    background: none;
}

.navLangMenu .dropdown-item small {
    font-size: 12px;
    font-weight: 400;
}

@media (min-width: 992px) {
    /* style.css haelt 130 px Abstand hinter dem Menue frei - den braucht jetzt die Telefonnummer */
    .headerArea .navbar-nav {
        margin-right: 22px;
    }

    .header_right .navSearch {
        margin-right: 0;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .navPhoneLabel {
        display: none;
    }

    .navSearch {
        max-width: 200px;
        flex: 0 0 200px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navPhoneText {
        display: none;
    }

    .navPhone {
        margin-right: 12px;
    }

    .navSearch {
        max-width: 170px;
        flex: 0 0 170px;
    }

    .headerArea .navbar-nav .nav-link {
        margin-left: 10px;
    }
}

@media (max-width: 991px) {
    /* Anruf-Knopf in der Leiste, links neben dem Menue-Symbol */
    .navPhoneBar {
        position: absolute;
        top: 50%;
        right: 62px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .18);
        font-size: 16px;
        color: #fff;
        transform: translateY(-50%);
        z-index: 10;
    }

    .navPhoneBar:hover,
    .navPhoneBar:focus-visible {
        background: #fff;
        color: #009DE2;
    }

    /* Im aufgeklappten Menue: Nummer ausgeschrieben, Suche, Sprache */
    .header_right {
        gap: 14px;
        padding-top: 6px;
    }

    .navPhone {
        margin: 0;
    }

    .navLang {
        margin-left: 0;
    }

    .navLangMenu {
        position: static !important;
        transform: none !important;
        margin-top: 6px;
    }
}

/* ==========================================================================
   Startseite: Hero-Slide Newsletter (ersetzt den E-Mobilitaets-Slide)
   Bild: fileadmin/Public/images/hero-newsletter.jpg (Higgsfield, 2026-09-16)
   ========================================================================== */
.heroSlide--newsletter {
    background: linear-gradient(rgba(6, 33, 48, .5), rgba(6, 33, 48, .66)), url('/fileadmin/Public/images/hero-newsletter.jpg') center center / cover no-repeat;
}

/* ==========================================================================
   Produktdetail: Haendler finden (ersetzt "Angebot anfordern" - kein Direktvertrieb)
   Der Knopf oeffnet das Panel #haendler unter dem Produktkopf; Postleitzahl
   eingeben, die fuenf naechstgelegenen Haendler erscheinen. Ohne JavaScript
   ist das Panel sichtbar und das Formular schickt per POST an dieselbe Seite.
   Demo-Daten: Resources/Private/Data/haendler-demo.json in testboy_products.
   ========================================================================== */
.productContent .inquiryCta.dealerCta i {
    font-size: 15px;
}

.dealerPanel {
    margin: 34px 0 6px;
    padding: 30px 34px 26px;
    border: 1px solid #E3E8ED;
    border-radius: 12px;
    background: #F6FAFD;
    scroll-margin-top: 110px;
}

.dealerPanelHead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 30px;
    margin-bottom: 20px;
}

.dealerPanelHead h3 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 30px;
    color: #181818;
}

.dealerPanelHead p {
    max-width: 640px;
    margin: 0;
    font-size: 16px;
    line-height: 25px;
    color: #46535F;
}

.dealerPhone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E3E8ED;
    font-size: 15px;
    color: #46535F;
    text-decoration: none;
}

.dealerPhone i {
    color: #009DE2;
}

.dealerPhone strong {
    color: #181818;
}

.dealerPhone:hover strong {
    color: #009DE2;
}

.dealerForm {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    max-width: 640px;
}

.dealerForm label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2A3742;
}

.dealerForm select,
.dealerForm input {
    height: 48px;
    padding: 0 14px;
    border: 1px solid #CBD6E0;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: #181818;
}

.dealerForm select:focus,
.dealerForm input:focus {
    outline: none;
    border-color: #009DE2;
    box-shadow: 0 0 0 3px rgba(0, 157, 226, .16);
}

.dealerFormLand {
    flex: 0 0 auto;
}

.dealerFormLand select {
    width: 96px;
}

.dealerFormPlz {
    flex: 0 1 200px;
}

.dealerFormPlz input {
    width: 100%;
}

.dealerForm .tbSubmit {
    height: 48px;
    padding: 0 26px;
    font-size: 16px;
}

.dealerResults {
    margin-top: 22px;
}

.dealerResultsHead {
    margin: 0 0 14px;
    font-size: 16px;
    color: #46535F;
}

.dealerResultsHead strong {
    color: #181818;
}

.dealerError {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #F1C3BF;
    border-radius: 4px;
    background: #FEF6F5;
    font-size: 15px;
    color: #8F231D;
}

.dealerList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dealer;
}

.dealerCard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px 58px;
    border: 1px solid #E3E8ED;
    border-radius: 10px;
    background: #fff;
    counter-increment: dealer;
}

.dealerCard::before {
    content: counter(dealer);
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #009DE2;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.dealerCard:first-child {
    border-color: #009DE2;
    box-shadow: 0 8px 22px rgba(0, 157, 226, .12);
}

.dealerName {
    margin: 0;
    padding-right: 104px;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    color: #181818;
}

.dealerDistance {
    position: absolute;
    top: 18px;
    right: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #EAF6FD;
    font-size: 13px;
    font-weight: 700;
    color: #0080BB;
    white-space: nowrap;
}

.dealerAddress {
    margin: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 22px;
    color: #46535F;
}

.dealerLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 6px;
    font-size: 14px;
}

.dealerLinks a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #009DE2;
    text-decoration: none;
}

.dealerLinks a:hover {
    text-decoration: underline;
}

.dealerNote {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: #8A97A3;
}

.dealerPanel.isLoading .dealerResults {
    opacity: .45;
}

@media (max-width: 767px) {
    .dealerPanel {
        margin-top: 26px;
        padding: 22px 18px 20px;
    }

    .dealerPanelHead h3 {
        font-size: 21px;
        line-height: 27px;
    }

    .dealerFormPlz {
        flex: 1 1 140px;
    }

    .dealerForm .tbSubmit {
        flex: 1 1 100%;
    }

    .dealerList {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Produktdetail: "Haendler finden" rechtsbuendig unter den Download-Icons
   (Wunsch Vertrieb, 2026-09-16). Der Knopf steht in einer eigenen vollbreiten
   Zeile der Kopf-Reihe; die Icons enden 12 px vor dem Spaltenrand, genau wie
   der Inhalt einer col-12 - damit liegen beide rechte Kanten uebereinander.
   Auf dem Handy steht der Knopf links unter dem Text, vor den Downloads.
   ========================================================================== */
.dealerCtaRow {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.dealerCtaRow .dealerCta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 157, 226, .26);
    transition: all 220ms cubic-bezier(.2, .7, .3, 1);
}

.dealerCtaRow .dealerCta i {
    font-size: 15px;
}

.dealerCtaRow .dealerCta:hover {
    background: #1471A5;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 113, 165, .32);
}

@media (max-width: 991px) {
    .dealerCtaRow {
        justify-content: flex-start;
        margin: 18px 0 4px;
    }
}

/* ==========================================================================
   Produktdetail: "Haendler finden" als drittes Element der Download-Liste
   (Wunsch Vertrieb, 2026-09-16). Desktop: Icon-Spalte 3/12 breit, Liste
   rechtsbuendig, der Knopf als Pille mit sichtbarem Titel direkt unter den
   beiden Icons. Unter 992 px steht er als dritter Button unter den
   Downloads, gefuellt statt umrandet. Die aeltere .dealerCtaRow-Zeile ist
   damit ohne Verwendung.
   ========================================================================== */
@media (min-width: 992px) {
    .mediaNavigation ul li {
        display: flex;
        justify-content: flex-end;
    }

    .mediaNavigation ul li.dealerItem {
        margin-top: 4px;
    }

    .mediaNavigation ul li.dealerItem a {
        width: auto;
        height: 44px;
        gap: 10px;
        padding: 0 20px 0 16px;
        border-radius: 22px;
        white-space: nowrap;
    }

    .mediaNavigation ul li.dealerItem a:hover {
        transform: translateY(-2px);
    }

    .mediaNavigation ul li.dealerItem a .icon {
        font-size: 15px;
    }

    .mediaNavigation ul li.dealerItem a .title,
    .mediaNavigation ul li.dealerItem:hover a .title {
        position: static;
        width: auto;
        max-width: none;
        padding: 0;
        background: none;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .mediaNavigation ul li.dealerItem a,
    .mediaNavigation ul li.dealerItem a .title,
    .mediaNavigation ul li.dealerItem a .icon {
        background: #009DE2;
        border-color: #009DE2;
        color: #fff;
    }

    .mediaNavigation ul li.dealerItem a:hover,
    .mediaNavigation ul li.dealerItem a:hover .title,
    .mediaNavigation ul li.dealerItem a:hover .icon {
        background: #1471A5;
        border-color: #1471A5;
        color: #fff;
    }
}

/* Zertifikate-Seite: PDF-Links in den Karten immer blau. Die Karten faerben sonst nur den letzten
   Link (gedacht fuer Telefon schwarz / E-Mail blau) - die PPWR-Karte hat zwei Dokument-Links. */
.infoSingle p a[href$=".pdf"] { color: #009DE2; }

/* ==========================================================================
   Rechtstexte: AGB (Allgemeine Lieferbedingungen) und Garantiebedingungen
   (2026-09-28). Stand-Zeile, Inhaltsverzeichnis, Absatznummern mit
   haengendem Einzug - die Nummern stehen im Text (kopierbar, zitierbar).
   ========================================================================== */
.legalArea .legalStand {
    margin: -8px 0 28px;
    font-size: 15px;
    color: #6B7A88;
}

.legalArea .legalToc {
    margin: 0 0 12px;
    padding: 20px 24px;
    border-radius: 8px;
    background: #F4F7FA;
}

.legalArea .legalToc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 32px;
}

.legalArea .legalToc li {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.45;
    break-inside: avoid;
}

.legalArea .legalToc a {
    color: #1D2B38;
    text-decoration: none;
}

.legalArea .legalToc a:hover {
    color: #009DE2;
    text-decoration: underline;
}

.legalArea .legalAbs {
    position: relative;
    padding-left: 46px;
}

.legalArea .legalNr {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: #1D2B38;
}

.legalArea .legalListe,
.legalArea .legalListe > li {
    list-style: disc;
}

.legalArea .legalListe {
    margin-left: 46px;
}

/* Sprungziele nicht unter dem Seitenkopf verstecken */
.legalArea [id] {
    scroll-margin-top: 120px;
}

@media (max-width: 767px) {
    .legalArea .legalToc ol { columns: 1; }
    .legalArea .legalAbs { padding-left: 38px; }
    .legalArea .legalListe { margin-left: 22px; }
}

/* ==========================================================================
   Kontakt: hervorgehobene Hinweise unter den Bereichsueberschriften
   (Bestellungen an order@, Rechnungen an rechnung@) - Aenderungsliste
   2026-09-28: "farblich hervorheben, sind leicht zu uebersehen".
   Markup: p.tbHinweis in tt_content 28/29 (DE) und 114/115 (EN).
   Schlaegt ".frame .infoWraper h3 + p" (grau, 15 px) per Spezifitaet.
   ========================================================================== */
.frame .infoWraper .tbHinweis {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    padding: 10px 20px;
    border: 1px solid rgba(0, 157, 226, .35);
    border-radius: 999px;
    background: #E6F5FC;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #1D2B38;
}

.frame .infoWraper .tbHinweis i {
    color: #009DE2;
    font-size: 18px;
}

.frame .infoWraper .tbHinweis a {
    color: #009DE2;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 575px) {
    .frame .infoWraper .tbHinweis {
        align-items: flex-start;
        border-radius: 12px;
        text-align: left;
    }
}

/* ==========================================================================
   Service-Formulare: Geraeteauswahl, drei Kalibrierarten, Fussnote Kaufbeleg
   (Aenderungsliste Service, 2026-09-28). Logik: testboy.js "Geraeteauswahl".
   ========================================================================== */
.tbChoiceGrid--three {
    grid-template-columns: repeat(3, 1fr);
}

.tbGeraetFrei {
    margin-top: 8px;
}

.tbField input[readonly] {
    background: #F4F7FA;
    color: #46535F;
}

.tbFootnote {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7A88;
}

.tbFootnote + .tbNote {
    margin-top: 14px;
}

@media (max-width: 991px) {
    .tbChoiceGrid--three {
        grid-template-columns: 1fr;
    }
}

/* Rechtstexte: hervorgehobener Hinweis ueber dem Text (Garantie-Stichtag, 2026-09-28) */
.legalArea .legalHinweis {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 28px;
    padding: 14px 20px;
    border: 1px solid rgba(0, 157, 226, .35);
    border-radius: 10px;
    background: #E6F5FC;
    color: #1D2B38;
    font-weight: 600;
}

.legalArea .legalHinweis i {
    margin-top: 4px;
    color: #009DE2;
    font-size: 18px;
}

/* ==========================================================================
   Cookie-Consent (consent.js, 2026-10-01): Einwilligung fuer Matomo. Beide Knoepfe
   gleichwertig (kein hervorgehobenes "Akzeptieren"), unten fixiert, mobil volle Breite.
   ========================================================================== */
.tbConsent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000; /* ueber dem Nach-oben-Knopf (.scroll-top, 999991) */
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  pointer-events: none;
}
.tbConsent[hidden] { display: none; }
.tbConsentBox {
  pointer-events: auto;
  width: 100%;
  max-width: 760px;
  background: #fff;
  color: #1B2733;
  border-top: 4px solid #009DE2;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(6, 33, 48, .28);
  padding: 20px 24px;
}
.tbConsentTitel { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #1B2733; }
.tbConsentText { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: #3B4753; }
.tbConsentText a { color: #009DE2; text-decoration: underline; }
.tbConsentKnoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tbConsentKnopf {
  flex: 0 1 auto;
  min-width: 190px;
  padding: 11px 22px;
  border: 2px solid #009DE2;
  border-radius: 26px;
  background: #fff;
  color: #009DE2;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.tbConsentKnopf:hover,
.tbConsentKnopf:focus-visible { background: #009DE2; color: #fff; outline: none; }
@media (max-width: 575px) {
  .tbConsent { padding: 0 8px 8px; }
  .tbConsentBox { padding: 16px 16px 14px; }
  .tbConsentKnopf { flex: 1 1 100%; min-width: 0; }
}