/* =============================================================
   CMTLAB — site.css
   Ported from joyn / joyn-child WordPress theme (Swift Ideas).
   Self-hosted fonts: Lato (body), Open Sans (alt), Source Sans Pro (display).
   Design tokens: cyan-blue accent from live cmtlab.de customizer.
   Typography: exact joyn sizes (14px base, h1=30px … h5=14px).
   ============================================================= */

/* =============================================================
   0. SELF-HOSTED FONTS
   ============================================================= */

/* Lato — body font */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
  src: url('../fonts/lato/lato-normal-latin-ext-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('../fonts/lato/lato-normal-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
  src: url('../fonts/lato/lato-normal-latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('../fonts/lato/lato-normal-latin-700.woff2') format('woff2');
}

/* Open Sans — navigation / UI */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
  src: url('../fonts/open-sans/open-sans-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('../fonts/open-sans/open-sans-normal-latin.woff2') format('woff2');
}

/* Source Sans Pro — display headings */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
  src: url('../fonts/source-sans-pro/source-sans-pro-normal-latin-ext-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('../fonts/source-sans-pro/source-sans-pro-normal-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url('../fonts/source-sans-pro/source-sans-pro-normal-latin-700.woff2') format('woff2');
}

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
  /* Colors — from live cmtlab.de customizer + redux config */
  --c-bg:           #ffffff;
  --c-text:         #0d2340;   /* dark navy, NOT #1a1a1a */
  --c-muted:        #444444;   /* darker than old #666 */
  --c-accent:       #0d99ca;   /* primary cyan-blue */
  --c-accent-dark:  #0d2340;   /* nav/button hover, dark navy */
  --c-accent-2:     #0e9f8a;   /* teal accent */
  --c-turkis:       #78bec2;   /* the claim band on live cmtlab.de */
  --c-turkis-bar:   #52cebe;   /* the contact bar above the footer */
  --c-navy:         #1a3f6f;   /* deeper blue for some headings */
  --c-accent-light: #1ab6e8;
  --c-line:         #e3e3e3;
  --c-soft:         #f5f5f5;
  --c-nav-bg:       #ffffff;
  --c-footer-bg:    #252525;   /* live cmtlab.de footer, near-black not navy */
  --c-footer-text:  #b8c8d8;

  /* Layout */
  --max-width:  1180px;
  --gap:        1.25rem;
  --radius:     3px;

  /* Typography */
  /*
   * The roles live cmtlab.de gives them: Source Sans Pro carries the copy,
   * Lato the structural headings, Open Sans the loud ones. The first two were
   * the other way round here, which is why the pages read differently.
   */
  --font-body:    'Source Sans Pro', 'Lato', system-ui, -apple-system,
                  "Segoe UI", sans-serif;
  --font-display: 'Lato', 'Source Sans Pro', system-ui, sans-serif;
  --font-nav:     'Open Sans', 'Lato', system-ui, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "Source Code Pro",
                  Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;           /* live cmtlab.de sets 16px for body copy */
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  outline: none;
}

a:hover {
  color: var(--c-accent-dark);
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/*
 * Copy is 16px on the live site. body was already set to 16px here, but this
 * rule overrode it, so every paragraph on every page rendered at 14px.
 */
p {
  font-size: 16px;
  line-height: 170%;
  color: var(--c-muted);
  margin: 0 0 24px;
}

/* Content lists read as copy too */
.section-produkt-detail li,
.section-zubehoer li,
.section-engineering-leistungen li,
.product-card-body li {
  font-size: 16px;
  color: var(--c-muted);
}

p:empty { display: none; }
p:last-child { margin-bottom: 0; }

/* joyn heading scale — exact sizes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-text);
  margin-top: 0;
}

h1 {
  font-size: 24px;      /* live: 24px Lato 400 — the model name is the small one */
  line-height: 32px;
  margin-bottom: 18px;
  font-weight: 400;
}

h2 {
  font-size: 20px;      /* live: 20px Lato 400 */
  line-height: 28px;
  margin-bottom: 20px;
  font-weight: 400;
}

h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: normal;   /* joyn: h3/h4/h5 are normal weight */
  margin-bottom: 15px;
}

h4 {
  font-size: 16px;
  line-height: 20px;
  font-weight: normal;
  margin-bottom: 15px;
}

h5 {
  font-size: 14px;
  line-height: 18px;
  font-weight: normal;
  margin-bottom: 15px;
}

h6 {
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}

ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  line-height: 160%;
}

ol {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  line-height: 160%;
}

ul > li > ul,
ol > li > ol {
  margin-left: 20px;
  padding-left: 0;
}

/* =============================================================
   3. ACCESSIBILITY
   ============================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: .5rem 1rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   4. LAYOUT — CONTAINER
   ============================================================= */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.container.narrow {
  max-width: 760px;
}

/* =============================================================
   5. STICKY HEADER / NAV WRAPPER
   ============================================================= */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--c-nav-bg);
  /* header-shadow: subtle drop shadow matching joyn .header-shadow class */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  transition: background .25s, box-shadow .25s;
}

/*
 * On the home page the header floats over the hero, as it does on live
 * cmtlab.de, and turns solid once the hero is scrolled past (site.js adds
 * .is-solid). Everywhere else it stays the plain white bar.
 *
 * An opened mobile menu counts as solid too: the entries drop into the bar,
 * and over a transparent bar they float on top of the hero unreadably.
 */
.page-home .sticky-top {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  box-shadow: none;
}

.page-home .sticky-top.is-solid,
.page-home .sticky-top.menu-open {
  position: sticky;
  background: var(--c-nav-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
}

/* Logo swap: white over the hero, blue once the bar is solid. */
.nav-logo-light {
  display: none;
}

.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-logo-dark { display: none; }
.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-logo-light { display: inline; }

.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-menu > li > a,
.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-menu > li > button,
.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-toggle span:not(.visually-hidden) {
  color: #fff;
  background-color: transparent;
}

.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-toggle span:not(.visually-hidden) {
  background: #fff;
}

.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-menu > li > a:hover,
.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-menu > li > button:hover {
  background-color: rgba(255, 255, 255, .14);
}

.page-home .sticky-top:not(.is-solid):not(.menu-open) .nav-menu > li > a[aria-current="page"] {
  color: #fff;
  border-bottom-color: #fff;
}

/* =============================================================
   6. NAVIGATION
   ============================================================= */
.site-nav {
  padding: 0;
}

.nav-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;   /* joyn header height roughly 70px */
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo img {
  height: 30px;  /* live cmtlab.de renders the 791x109 logo at 30px */
  width: auto;
}

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}

.nav-toggle span:not(.visually-hidden) {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: background .15s;
}

.nav-toggle:hover span:not(.visually-hidden) {
  background: var(--c-accent);
}

/* Menu list */
.nav-menu {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a,
.nav-menu > li > button {
  color: var(--c-text);
  text-decoration: none;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 0 18px;
  height: 70px;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.nav-menu > li > a:hover,
.nav-menu > li > button:hover {
  color: var(--c-accent);
  background: rgba(13, 153, 202, .05);
  text-decoration: none;
}

.nav-menu > li > a[aria-current="page"] {
  color: var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
}

/* Dropdown (sub-menu) */
.has-sub > ul {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  display: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  z-index: 300;
}

.has-sub:hover > ul,
.has-sub:focus-within > ul {
  display: block;
}

/* Keyboard and touch: the button's own state opens the sub-menu. */
.has-sub > button[aria-expanded="true"] + ul {
  display: block;
}

.has-sub > ul li a {
  display: block;
  padding: 9px 18px;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 400;
  transition: background .15s, color .15s;
}

.has-sub > ul li a:hover {
  background: var(--c-soft);
  color: var(--c-accent);
}

/* =============================================================
   7. HERO SLIDER
   ============================================================= */
/*
 * Two presentations of the same slide.
 *
 * From 721px up the original WordPress slide graphic is the background
 * (--hero-img, set inline per slide) and the whole slide is one link, exactly
 * as the live site has always looked. That graphic carries its headline baked
 * in and is unreadable at phone width, so below the breakpoint the graphic is
 * dropped for a brand-tinted gradient (--hero-a/--hero-b, sampled from those
 * graphics) and the same copy appears as markup over a cut-out product shot.
 *
 * The background lives in a min-width query on purpose: a phone never
 * downloads the large graphic.
 */
.hero-slider {
  position: relative;
  overflow: hidden;
  min-height: min(100svh, 860px);
  background: var(--c-accent-dark);
}

.hero-slides {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  min-height: inherit;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease-in-out, visibility 0s linear .8s;
  background: linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
}

.hero-slide[data-hero="fmu-lab"]   { --hero-a: #1d4c66; --hero-b: #5c8a9c; }
.hero-slide[data-hero="fmu-serie"] { --hero-a: #052f5c; --hero-b: #12629e; }
.hero-slide[data-hero="96mu"]      { --hero-a: #6f5720; --hero-b: #b5973f; }
.hero-slide[data-hero="mrp"]       { --hero-a: #0b4d6b; --hero-b: #0d99ca; }

/* The zigzag mark, oversized and faint, in place of the old giant lettering. */
.hero-slide::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -4%;
  width: 62%;
  aspect-ratio: 332 / 109;
  transform: translateY(-50%);
  background: url('../img/logo/mark-light.png') no-repeat center / contain;
  opacity: .07;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity .8s ease-in-out, visibility 0s;
}

/* Covers the slide on the desktop; hidden once the markup takes over. */
.hero-slide-link {
  display: none;
}

.hero-slide-inner {
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  padding-top: 70px;   /* clears the floating header */
  padding-bottom: 56px;
}

.hero-slide-text {
  max-width: 34rem;
  color: #fff;
}

.hero-slide-eyebrow {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 153, 202, .85);
  padding: 7px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.hero-slide-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 16px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  /* explicit, not inherited from .hero-slide-text: this is a <p>, and the
     global p{color} rule beats an inherited value, which left the title
     near-black on the dark slide on phones */
  color: #fff;
}

.hero-slide-lead {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

.hero-slide-shot {
  flex: 0 0 auto;
  width: auto;
  max-height: min(58vh, 460px);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .35));
}

.btn-hero {
  background: #fff;
  color: var(--c-accent-dark);
}

.btn-hero:hover {
  background: var(--c-accent);
  color: #fff;
}

/*
 * Desktop presentation. This has to sit AFTER the base .hero-slide-inner and
 * ::before rules: the selectors tie on specificity, so source order decides,
 * and placed earlier the display:none below was simply overridden.
 */
@media (min-width: 721px) {
  .hero-slide {
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /* The graphic already says everything, so the markup would duplicate it. */
  .hero-slide-inner,
  .hero-slide::before {
    display: none;
  }

  .hero-slide-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
  }
}

/* Dot navigation */
.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.hero-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s;
}

.hero-dot.is-active {
  background: #fff;
  border-color: #fff;
}

.hero-dot:hover {
  background: rgba(255, 255, 255, .6);
}

/* Static hero fallback (used if no slider class) */
.hero:not(.hero-slider) {
  background: var(--c-soft);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--c-line);
}

.hero:not(.hero-slider) h1 {
  color: var(--c-text);
  margin-bottom: 16px;
}

.hero:not(.hero-slider) p {
  max-width: 56ch;
  color: var(--c-muted);
  margin-bottom: 24px;
}

/* Hero CTA button group */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* =============================================================
   8. GENERIC SECTION
   ============================================================= */
.section {
  padding: 70px 0;
}

.section + .section {
  /* No border between sections — use background alternation like joyn */
}

.section h2 {
  margin-bottom: 24px;
}

.section-placeholder {
  color: var(--c-muted);
  font-style: italic;
  padding: 2rem 0;
}

/* Section label — small uppercase brand-color label above h2 */
.section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------
   8b. ELECTRODE OVERVIEW — hero, group bands, product rows
   ------------------------------------------------------------- */
.sensor-hero {
  background: var(--c-turkis);
  color: #fff;
  padding: 56px 0;
}

.sensor-hero-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  justify-content: space-between;
}

.sensor-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sensor-hero h1 {
  color: #fff;
  margin: 0 0 14px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
}

.sensor-hero p {
  margin: 0;
  max-width: 42ch;
  color: rgba(255, 255, 255, .94);
  font-size: 17px;
}

/* Jump marks to the four families */
.sensor-hero-jump ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 250px;
}

.sensor-hero-jump a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 11px 16px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}

.sensor-hero-jump a:hover {
  background: rgba(255, 255, 255, .28);
  color: #fff;
  text-decoration: none;
}

.sensor-hero-jump span {
  opacity: .75;
  font-size: 13px;
}

/* Coloured band per family, with the zigzag mark as a watermark */
/*
 * White text only clears 4.5:1 on the navy band (15.8:1); on the blue,
 * teal and turquoise bands it sits at 3.3, 1.9 and 2.1, so those carry the
 * dark navy instead. --band-fg and --band-mark are set per tone below.
 */
.group-head {
  position: relative;
  overflow: hidden;
  color: var(--band-fg);
  scroll-margin-top: 80px;
}

.group-head::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2%;
  width: 30%;
  aspect-ratio: 332 / 109;
  transform: translateY(-50%);
  background: var(--band-mark) no-repeat center / contain;
  opacity: .16;
  pointer-events: none;
}

.group-head-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2.5rem;
  align-items: baseline;
  justify-content: space-between;
  /* padding-block only: the shorthand would wipe .container's side padding */
  /* live cmtlab.de: the title band measures 152px */
  padding-top: 55px;
  padding-bottom: 55px;
}

.group-head h1,
.group-head h2 {
  color: var(--band-fg);
  margin: 0;
  /* live cmtlab.de: 42px Open Sans in the light weight; below ~700px the
     screen is too narrow for it, so it shrinks with the viewport */
  font-family: var(--font-nav);
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 300;
  line-height: 1;
}

.group-head p {
  margin: 0;
  max-width: 46ch;
  color: var(--band-fg);
  opacity: .88;
}

.group-eyebrow {
  display: block;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--band-fg);
  opacity: .8;
  margin-bottom: 6px;
}

/* Dark to light down the page */
.tone-navy {
  background: var(--c-accent-dark);
  --band-fg: #fff;
  --band-mark: url('../img/logo/mark-light.png');
}

.tone-blau {
  background: var(--c-accent);
  --band-fg: var(--c-accent-dark);
  --band-mark: url('../img/logo/mark-blue.png');
}

.tone-teal {
  background: var(--c-turkis-bar);
  --band-fg: #fff;
  --band-mark: url('../img/logo/mark-blue.png');
}

.tone-turkis {
  background: var(--c-turkis);
  --band-fg: #fff;
  --band-mark: url('../img/logo/mark-blue.png');
}

/* One row per sensor */
.sensor-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 26px;
  padding-bottom: 34px;
}

.sensor-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.sensor-row:hover {
  border-color: var(--c-accent);
  box-shadow: 0 6px 18px rgba(13, 35, 64, .10);
  transform: translateX(3px);
  color: var(--c-text);
  text-decoration: none;
}

/*
 * Fixed height, not aspect-ratio: a percentage height on the image cannot
 * resolve against a ratio-derived box, and the tall LF photos then overflow.
 */
.sensor-row-img {
  display: block;
  height: 78px;
  overflow: hidden;
}

.sensor-row-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sensor-row-text {
  display: block;
}

.sensor-row-text h3 {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}

.sensor-row-sub {
  margin: 3px 0 7px;
  font-size: 14px;
  color: var(--c-muted);
}

.sensor-row .app-icons {
  margin: 0;
  gap: .3rem;
}

.sensor-row .app-icons img {
  width: 24px;
  height: 24px;
}

.sensor-row-buy {
  text-align: right;
  white-space: nowrap;
}

.sensor-price {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-accent);
}

.sensor-row-go {
  font-size: 13px;
  color: var(--c-muted);
}

/* -------------------------------------------------------------
   8a. HOME — claim band, tiles, photo row, contact bar
   These reproduce the blocks the live WordPress home page has.
   ------------------------------------------------------------- */
.section-claim {
  background: var(--c-turkis);
  color: #fff;
  padding: 80px 0;
}

/*
 * Measured off the live page: both blocks are 36px Open Sans with a 36px
 * line height, the statement at 700 and the sentence under it at 300. Same
 * size, different weight — that is what makes the band read as one voice.
 */
.claim {
  font-family: var(--font-nav);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.0;
  color: #fff;
  margin: 0 0 14px;
}

.claim-sub {
  font-family: var(--font-nav);
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 300;
  line-height: 1.0;
  text-transform: uppercase;   /* as live */
  color: #fff;
  max-width: 44rem;
  margin: 0;
}

.claim-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

/* Lower half of the claim band, after the photo row splits it */
.section-claim-tiles {
  padding-top: 56px;
}

/* Tiles — two per row, icon in a circle beside the copy */
.tile-grid {
  display: grid;
  gap: 40px 48px;
}

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

.tile {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.tile-mark {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--c-accent);
}

.section-claim .tile-mark {
  color: var(--c-turkis);
}

.tile-icon {
  width: 26px;
  height: 26px;
}

.tile-body {
  min-width: 0;
}

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

.tile h2,
.tile h3 {
  font-family: var(--font-nav);
  font-size: 24px;      /* live cmtlab.de: 24px Open Sans 800 */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.section-claim .tile h2 {
  color: #fff;
}

.tile p {
  margin: 0;
  color: var(--c-muted);
}

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

.tile-list li {
  padding: 2px 0;
}

.section-claim .tile-list li {
  color: rgba(255, 255, 255, .94);
}

/* Wir über uns — zigzag mark beside the copy */
.about-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.about-mark {
  flex: 0 0 auto;
  margin-top: 6px;
}

.about-body {
  min-width: 0;
}

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

/* Four photos, edge to edge, as on the live home page */
.photo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.photo-row img {
  display: block;
  width: 100%;
  height: clamp(180px, 18vw, 260px);
  object-fit: cover;
}

/* Contact bar above the footer */
.contact-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 34px 20px;
  background: var(--c-turkis-bar);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  text-decoration: none;
  transition: background .2s;
}

.contact-band:hover {
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
}

.contact-band svg {
  transition: transform .2s;
}

.contact-band:hover svg {
  transform: translateX(5px);
}

/* Alternating backgrounds: white / light-gray / dark navy */
.section-warm {
  background: var(--c-soft);
}

.section-dark {
  background: var(--c-accent-dark);
  color: #c8d8e8;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #ffffff;
}

.section-dark .section-label {
  color: var(--c-accent);
}

.section-dark .btn-outline {
  border-color: #fff;
  color: #fff;
}

.section-dark .btn-outline:hover {
  background: #fff;
  color: var(--c-accent-dark);
}

/* Two-column layout helper (used on inner pages) */
.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* =============================================================
   9. PRODUCT CARDS
   ============================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}

.product-card {
  display: block;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-text);
  overflow: hidden;
  background: #fff;
  /* product-shadows class on body: slight shadow on cards */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
  text-decoration: none;
  color: var(--c-text);
}

/* Non-clickable variant */
.product-card--nolink { cursor: default; }
.product-card--nolink:hover { transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }


/*
 * The global `img { height: auto }` beats the element's height attribute, so
 * the badge needs its size here — without this it renders at its natural
 * 167x86, both on the cards and on the sensor detail pages.
 */
.amazon-badge {
  width: 70px;
  height: 36px;
}

/* Lead paragraph */
/*
 * On the live product and sensor pages the description, not the model name,
 * is the large element: 42px Open Sans in the light weight.
 */
.lead {
  font-family: var(--font-nav);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 300;
  line-height: 1.12;
  color: var(--c-text);
  margin: 0 0 22px;
}

.product-card-img {
  /* block, because the model overviews use an <a> here: an inline box
     ignores aspect-ratio, the image then took its natural height and the
     card's overflow:hidden clipped the whole body away */
  display: block;
  aspect-ratio: 4 / 3;
  /* a row with one or two cards stretches them wide, and 4:3 of a full
     container is an 885px tall image box; cap it */
  max-height: 260px;
  overflow: hidden;
  /* white, not --c-soft: some product photos have a white backdrop baked in
     and showed as a bright rectangle on the grey tile */
  background: #fff;
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .5rem;
}

.product-card-body {
  padding: 14px 16px 18px;
  border-top: 1px solid var(--c-line);
}

.product-card-body h3 {
  margin: 0 0 6px;
  font-size: 16px;       /* joyn card headings ~16px */
  font-weight: 600;
  line-height: 1.3;
}

.product-card-body p {
  margin: 0;
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* =============================================================
   10. BUTTONS
   ============================================================= */
.btn {
  display: inline-block;
  /* live cmtlab.de: 12px Open Sans 700, square, in mixed case */
  padding: 14px 26px;
  border-radius: 0;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .2s ease-in-out, color .2s ease-in-out,
              border-color .2s ease-in-out;
  line-height: 1.4;
}

.btn-primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

.btn-primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: #fff;
  text-decoration: none;
}

/* live uses a white, outlined button for "Mehr Informationen" */
.btn-ghost {
  background: #fff;
  color: #252525;
  border-color: #d8d8d8;
}

.btn-ghost:hover {
  background: #f3f3f3;
  border-color: #c4c4c4;
  color: #252525;
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.btn-outline:hover {
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
}

/* =============================================================
   11. FOOTER — dark footer matching joyn dark sections
   ============================================================= */
.site-footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  padding: 40px 0 0;
  margin-top: 0;
  font-size: 13px;
}

.footer-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 30px;
}

.footer-brand img {
  height: 22px;
  width: auto;
  margin-bottom: 12px;
  opacity: .9;
}

.footer-brand p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-footer-text);
}

/* Postal address and phone, as the live footer carries them */
.footer-brand address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.footer-contact a:hover {
  color: var(--c-accent);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  color: var(--c-footer-text);
  font-size: 13px;
  text-decoration: none;
  transition: color .15s;
}

.footer-nav a:hover {
  color: var(--c-accent);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 15px 0;
  font-size: 12px;
  color: rgba(184, 200, 216, .7);
}

.footer-bottom p {
  margin: 0;
}

/* =============================================================
   12. UTILITY CLASSES
   ============================================================= */
.text-muted   { color: var(--c-muted); }
.text-accent  { color: var(--c-accent); }
.text-small   { font-size: 12px; }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-1  { margin-top: 1rem; }
.mb-1  { margin-bottom: 1rem; }
.mt-2  { margin-top: 2rem; }
.mb-2  { margin-bottom: 2rem; }

/* =============================================================
   13. CONTACT FORM
   ============================================================= */
.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--c-muted);
  margin-bottom: 4px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  /* live: white, square, a hairline border, 36px tall */
  padding: 7px 10px;
  margin-top: 4px;
  border: 1px solid #e4e4e4;
  border-radius: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text);
  background: #fff;
  transition: border-color .15s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(13, 153, 202, .15);
}

.contact-form .form-actions {
  text-align: right;
}

.contact-form button {
  padding: 14px 22px;
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

.contact-form button:hover {
  background: var(--c-accent-dark);
}

.form-flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 14px;
}

.form-flash-success {
  background: #e7f5ec;
  color: #14532d;
  border: 1px solid #86efac;
}

.form-flash-error {
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}

/* iOS Safari zooms the page when a focused field is under 16px, which throws
   the layout off mid-entry. Keep the fields at 16px on phones. */
@media (max-width: 720px) {
  .contact-form input,
  .contact-form textarea {
    font-size: 16px;
  }
}

/* =============================================================
   14. RESPONSIVE — TABLET (≤ 960px)
   ============================================================= */
@media (max-width: 960px) {
  .section {
    padding: 50px 0;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .section-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-slide-inner {
    gap: 2rem;
  }

  .hero-slide-shot {
    max-height: min(46vh, 360px);
  }
}

/* =============================================================
   15. RESPONSIVE — MOBILE (≤ 720px)
   ============================================================= */
@media (max-width: 720px) {
  .section {
    padding: 40px 0;
  }

  /* Show hamburger, hide menu by default */
  .nav-toggle {
    display: inline-flex;
  }

  .nav-inner {
    flex-wrap: wrap;
    min-height: 56px;
  }

  .nav-logo img {
    height: 26px;
  }

  .nav-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .5rem 0 1rem;
  }

  /* Opened by the hamburger, which carries the state on aria-expanded. */
  .nav-toggle[aria-expanded="true"] + .nav-menu {
    display: flex;
  }

  .nav-menu > li > a,
  .nav-menu > li > button {
    height: auto;
    padding: 10px 0;
    font-size: 14px;
  }

  /* Dropdown goes static on mobile and opens on tap, never on hover */
  .has-sub > ul {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--c-line);
    padding: .25rem 0 .25rem 1rem;
    margin-left: .5rem;
    display: none;
  }

  .has-sub:hover > ul {
    display: none;
  }

  .has-sub > button {
    width: 100%;
    justify-content: space-between;
  }

  .has-sub > button::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
  }

  .has-sub > button[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* Hero stacks: copy first, product shot under it. */
  .hero-slider {
    min-height: 0;
  }

  .hero-slides {
    min-height: 0;
  }

  .hero-slide {
    position: relative;
    inset: auto;
    display: none;
  }

  .hero-slide.is-active {
    display: grid;
  }

  .hero-slide-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 84px;
    padding-bottom: 64px;
  }

  .hero-slide-text {
    max-width: none;
  }

  .hero-slide-shot {
    align-self: center;
    max-height: 46vh;
  }

  .hero-slide::before {
    width: 100%;
    right: -20%;
  }

  .section-claim {
    padding: 56px 0;
  }

  .claim-sub {
    margin-bottom: 36px;
  }

  .tile-grid-2 {
    grid-template-columns: 1fr;
  }

  .about-inner {
    flex-direction: column;
    gap: 1.25rem;
  }

  .photo-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Electrode overview: hero stacks, rows drop the price column */
  .sensor-hero {
    padding: 36px 0;
  }

  .sensor-hero-inner {
    flex-direction: column;
    gap: 1.75rem;
  }

  .sensor-hero-jump ul {
    min-width: 0;
  }

  .group-head-inner {
    flex-direction: column;
    gap: .6rem;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .group-head::after {
    width: 55%;
    right: -14%;
  }

  .sensor-row {
    grid-template-columns: 84px minmax(0, 1fr);
    row-gap: 10px;
  }

  .sensor-row-img {
    height: 64px;
  }

  .sensor-row-buy {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
  }

  .footer-inner {
    flex-direction: column;
    gap: 1.25rem;
  }

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

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

/* =============================================================
   16. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Slider: keep is-active visible, no fade */
  .hero-slide {
    transition: none !important;
  }
}

/* ---- Product detail building blocks ---- */
.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; align-items: start; }

/*
 * The sensor photos are roughly 1:4.2, so capping the width leaves them
 * towering over the text column. Capping the height instead keeps the whole
 * electrode visible and ends it about level with the copy beside it.
 */
.sensor-photo img { width: auto; max-width: 100%; max-height: 600px; margin: 0 auto; }
@media (max-width: 800px) { .sensor-photo img { max-height: 420px; } }
@media (max-width: 800px) { .product-detail-grid { grid-template-columns: 1fr; } }
.app-icons { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .5rem 0 1rem; padding: 0; }
.app-icons img { width: 48px; height: 48px; }
/* The live pages keep their specifications narrow, under the copy column,
   rather than letting them run the full width of the page. */
.spec-table { width: 100%; max-width: 46rem; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: .4rem .6rem; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.spec-table th[scope="rowgroup"] { padding-top: 1.2rem; font-size: 1rem; }
.spec-table th[scope="row"] { width: 40%; font-weight: normal; color: #666; }
.price { margin: 1rem 0 0; font-size: 1.6rem; font-weight: 700; }
.price small { display: block; font-size: .85rem; font-weight: normal; }

/* -------------------------------------------------------------
   16. PRODUCT PAGE BUILDING BLOCKS
   ------------------------------------------------------------- */
/*
 * Content lists. `ul { list-style: none }` at the top of this file strips the
 * marker from every list, which is right for the nav and the component lists
 * but left the feature lists on the product pages as loose lines. Component
 * lists all carry a class, so the marker comes back only for the unclassed
 * ones inside the content areas.
 */
.section-produkt-detail ul:not([class]),
.section-zubehoer ul:not([class]),
.product-card-body ul:not([class]) {
  margin: 0 0 20px;
}

.section-produkt-detail ul:not([class]) li,
.section-zubehoer ul:not([class]) li,
.product-card-body ul:not([class]) li {
  position: relative;
  padding-left: 1.45em;
  margin-bottom: .25em;
}

.section-produkt-detail ul:not([class]) li::before,
.section-zubehoer ul:not([class]) li::before,
.product-card-body ul:not([class]) li::before {
  content: '';
  position: absolute;
  left: .25em;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-muted);
}

/* Photo column on a detail page: one large image, the rest as a thumb row */
.detail-images img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
}

.detail-images img + img {
  display: inline-block;
  width: calc(50% - 5px);
  margin-top: 10px;
}

.detail-images img + img + img {
  margin-left: 6px;
}

/* Downloads as a block rather than a bare arrow list */
/* live marks every download with the PDF glyph and keeps the label in the
   body colour — no frame, no list markers */
.download-list {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
}

.download-list li {
  margin: 0 0 10px;
}

.download-list a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: 16px;
  color: var(--c-muted);
  text-decoration: none;
}

.download-list a:hover {
  text-decoration: underline;
}

.download-list a::before {
  content: '';
  flex: none;
  width: 25px;
  height: 25px;
  background: url('../img/icons/pdf.png') no-repeat center / contain;
}

/* Certification badges sit on their own strip */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin: 1.25rem 0;
  padding: 12px 16px;
  background: var(--c-soft);
  border-radius: var(--radius);
}

.badges img {
  height: 34px;
  width: auto;
}

/* Price and the order call to action, as on the sensor pages */
.buy-line {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin: 1.5rem 0;
}

.buy-line .price {
  margin: 0;
}

/*
 * A band supplies its own breathing room, so the section on either side of it
 * does not need a full 70px as well. :has() only tightens the gap; where it is
 * unsupported the page simply keeps the larger spacing.
 */
.group-head + .section,
.group-head + .sensor-rows {
  padding-top: 34px;
}

.section:has(+ .group-head) {
  padding-bottom: 34px;
}

.section-produkte-intro {
  padding-bottom: 0;
}

/*
 * Band with a photo behind it. The tone goes over the image as a wash rather
 * than being replaced by it, so the text keeps the contrast the plain bands
 * were measured for, and the band grows tall enough to read as a hero.
 */
.group-head-photo {
  background-image: linear-gradient(rgba(13, 35, 64, .74), rgba(13, 35, 64, .74)), var(--band-photo);
  background-size: cover;
  background-position: center;
  --band-fg: #fff;
  --band-mark: url('../img/logo/mark-light.png');
}

.group-head-photo .group-head-inner {
  padding-top: 68px;
  padding-bottom: 68px;
}

@media (max-width: 720px) {
  .group-head-photo .group-head-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/*
 * Composed banner rather than a photograph: the image already carries the
 * family's colour, so it gets no wash. It is scaled to the band's height and
 * pinned right, which keeps the device whole at any width -- the flat colour
 * to its left is the tone class's own background showing through.
 */
.group-head-banner {
  background-image: var(--band-photo);
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

/* The device occupies the right, so the text stacks on the left instead of
   sitting opposite it, and the band's own zigzag would double the banner. */
.group-head-banner .group-head-inner {
  display: block;
  padding-top: 46px;
  padding-bottom: 46px;
}

.group-head-banner .group-head-inner p {
  max-width: 34ch;
  margin-top: 10px;
}

.group-head-banner::after {
  content: none;
}

@media (max-width: 720px) {
  /* The device drops below the copy rather than beside it: a fixed height,
     pinned bottom right, with room reserved underneath. */
  .group-head-banner {
    background-size: auto 118px;
    background-position: right bottom;
  }

  .group-head-banner .group-head-inner {
    padding-bottom: 130px;
  }

  .group-head-banner .group-head-inner p {
    max-width: none;
  }
}

/* Engineering: the service lists live in tiles, which need the marker too */
.section-engineering-leistungen ul:not([class]) li {
  position: relative;
  padding-left: 1.45em;
  margin-bottom: .25em;
}

.section-engineering-leistungen ul:not([class]) li::before {
  content: '';
  position: absolute;
  left: .25em;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-muted);
}

/* Contact: form beside the address instead of a form alone on a white page */
/* Kontakt, in the plain shape the live page has: a light title strip with
   the breadcrumb, then the address and the form on a warm grey. */
.page-heading {
  background: #f7f7f7;
  padding: 18px 0 26px;
}

.page-heading .crumbs {
  margin: 0 0 14px;
  font-size: 12px;
  color: #8a8a8a;
}

.page-heading .crumbs a {
  color: #8a8a8a;
}

.page-heading .crumbs span {
  margin: 0 .35em;
}

.page-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: #252525;
}

.section-kontakt {
  background: #ddddda;
  padding: 40px 0 48px;
}

.section-kontakt address {
  font-style: normal;
  line-height: 1.55;
  margin: 0 0 16px;
}

.section-kontakt address::first-line {
  font-weight: 700;
}

.section-kontakt .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  line-height: 1.55;
  color: var(--c-muted);
}

.section-kontakt .footer-contact a {
  color: inherit;
  text-decoration: none;
}

.section-kontakt h2 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 14px;
}

/* Accessories, in the live layout: three open columns on white, photo on
   top, the part number large and light, no frame around any of it. */
.section-zubehoer {
  padding: 10px 0 44px;
}

/* same weight as the other section headings on the live pages */
.section-zubehoer > .container > h2 {
  font-family: var(--font-nav);
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  color: #252525;
  margin-bottom: 20px;
}

/* the block that names the accessories is closed off by a rule */
.section-familie:has(+ .section-zubehoer) .container {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 18px;
}

.section-zubehoer .product-grid,
.product-grid--offen {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  column-gap: 2.5rem;
  row-gap: 2.5rem;
}

.section-zubehoer .product-card,
.section-zubehoer .product-card--nolink:hover,
.product-grid--offen .product-card,
.product-grid--offen .product-card--nolink:hover {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.section-zubehoer .product-card-img,
.product-grid--offen .product-card-img {
  max-height: 225px;
}

.section-zubehoer .product-card-img img,
.product-grid--offen .product-card-img img {
  padding: 0;
}

.section-zubehoer .product-card-body,
.product-grid--offen .product-card-body {
  padding: 14px 0 0;
  border-top: 0;
}

.section-zubehoer .product-card-body h3,
.product-grid--offen .product-card-body h3 {
  font-family: var(--font-nav);
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 300;
  line-height: 1.1;
  color: #252525;
  margin: 0 0 8px;
}

/* the part number is a link here, but live shows it in the text colour */
.section-zubehoer .product-card-body h3 a,
.product-grid--offen .product-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.section-zubehoer .product-card-body p,
.product-grid--offen .product-card-body p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.section-zubehoer .product-card-body p:last-of-type,
.product-grid--offen .product-card-body p:last-of-type {
  margin-bottom: 0;
}


/* "WIR ÜBER UNS" on the live page: 30px, regular weight, in the accent blue */
.section-ueber-uns h2 {
  font-family: var(--font-nav);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--c-accent);
  margin-bottom: 18px;
}

/* Price table on the buffer solutions page */
.preis-tabelle {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin: 1rem 0 .5rem;
  font-size: 15px;
}

.preis-tabelle th,
.preis-tabelle td {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--c-line);
}

.preis-tabelle thead th {
  font-family: var(--font-nav);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
}

.preis-tabelle tbody th {
  font-weight: 600;
  color: var(--c-muted);
}

/* Labelled feature list, as the FMU overview has on the live page */
.merkmale {
  margin: 1rem 0 0;
}

.merkmale dt {
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-top: 1rem;
}

.merkmale dd {
  margin: .2rem 0 0;
  color: var(--c-muted);
}

/* The two statements the old engineering slider carried */
/* Engineering, in the live shape: a photo hero carrying the claim, then the
   disciplines beside their photos and a gallery of project pictures. */
.eng-hero {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 42vw, 560px);
}

.eng-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* one slide on top of the next; the script moves .is-active along */
.eng-slides .hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--hero-img) no-repeat center / cover;
  opacity: 0;
  transition: opacity .6s ease-in-out;
  pointer-events: none;
}

.eng-slides .hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .eng-slides .hero-slide {
    transition: none;
  }
}

.eng-hero-text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* the photo is busy; a soft shade keeps the words legible */
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.eng-claim {
  font-family: var(--font-nav);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 .5rem;
}

.eng-sub {
  font-family: var(--font-nav);
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.eng-leistung {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.eng-leistung > img {
  width: 100%;
  height: auto;
}

.eng-leistung h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  color: #252525;
  margin-bottom: 14px;
}

.eng-galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* live sets these tiles flush against each other */
  gap: 0;
}

.eng-galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 620px) {
  .eng-galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .eng-leistung {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Sensor detail: photo, copy and the buy block side by side, as live */
.sensor-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) 170px;
  gap: 2rem;
  align-items: start;
}

.sensor-buy {
  text-align: left;
}

.sensor-buy .price {
  margin: 0 0 14px;
}

.sensor-buy .btn {
  display: inline-block;
}

.sensor-buy-amazon {
  display: inline-block;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .sensor-grid-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .sensor-buy {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .sensor-buy .price,
  .sensor-buy-amazon {
    margin: 0;
  }
}

@media (max-width: 620px) {
  .sensor-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Pufferloesungen, in the live arrangement: the offers on a mint block with
   three price columns, then the label graphics with their data sheets. */
.section-angebote {
  background: #cce8e2;
  padding: 44px 0 48px;
}

.section-angebote h3 {
  font-family: var(--font-nav);
  font-size: 24px;
  font-weight: 800;
  color: #252525;
  margin: 0 0 28px;
}

.angebote-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 252px) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

.angebote-inhalt > img {
  width: 100%;
  height: auto;
}

.angebot h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: #252525;
  margin: 0 0 14px;
}

.angebot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--c-muted);
  line-height: 1.9;
}

.angebot li span {
  display: inline-block;
  min-width: 5.2em;
}

.section-loesungen h2 {
  font-family: var(--font-nav);
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  color: #252525;
  margin-bottom: 12px;
}

.loesungen-lead {
  font-size: 20px;
  color: #252525;
  margin-bottom: 28px;
}

.etiketten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.etiketten .etikett img {
  width: 100%;
  max-width: 187px;
  height: auto;
}

.etiketten .etikett h3 {
  font-family: var(--font-nav);
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 300;
  line-height: 1.1;
  color: #252525;
  margin: 16px 0 6px;
}

@media (max-width: 860px) {
  .angebote-inhalt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .angebote-inhalt {
    grid-template-columns: 1fr;
  }
}

/* live sets these overview headings at the same scale as a page title */
.uebersicht-titel {
  font-family: var(--font-nav);
  font-size: clamp(26px, 5.6vw, 42px);
  font-weight: 300;
  line-height: 1.1;
  color: #252525;
  margin: 10px 0 24px;
}

/* Messtechnik overview: one section per family, device beside its figures */
.section-familie h2 {
  font-family: var(--font-nav);
  font-size: clamp(26px, 5vw, 36px);   /* live: 36px Open Sans 800 */
  line-height: 1.15;
  font-weight: 800;
  color: #252525;
  margin-bottom: 14px;
}

/* On this page the badges sit on the page itself, closed off by a rule */
.section-familie .badges {
  background: none;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 0;
  gap: 2rem;
}

.section-familie .badges img {
  height: 50px;
}

/* Live sets these intro lines as separate paragraphs, set tight. */
.familie-intro p,
.familie-lead p {
  margin: 0;
  line-height: 1.45;
}

.familie-intro {
  margin-bottom: 18px;
}

.familie-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 165px);
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.familie-inhalt:not(:has(.familie-aside)) {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}

.familie-aside img {
  width: 100%;
  height: auto;
}

.familie-bild {
  display: block;
}

.familie-bild img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

.familie-text h3 {
  font-family: var(--font-nav);
  font-size: clamp(26px, 5vw, 36px);   /* live: 36px Open Sans, light */
  line-height: 1.1;
  font-weight: 300;
  color: #252525;
  margin: 0 0 10px;
}

.familie-lead {
  margin: 0 0 14px;
}

.familie-text ul {
  margin-bottom: 22px;
}

.familie-text li {
  position: relative;
  padding-left: 1.2em;
  font-size: 16px;
  color: var(--c-muted);
}

.familie-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-muted);
}

@media (max-width: 760px) {
  .familie-inhalt,
  .familie-inhalt:not(:has(.familie-aside)) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .familie-aside {
    max-width: 165px;
  }

  .familie-bild {
    height: 220px;
  }
}