/* page.css — styles for this page only.
   Rules: rem only (16px = 1rem) · kit tokens only: var(--color-…), var(--radius…), var(--space-…), var(--shadow-…)
   · no hover lift / translate / scale · mobile-first, main breakpoint 48rem.
   Container, sections, typography, breadcrumbs, cards and grids come from css/kit-base.css;
   components and sections listed in kit.json come from css/kit-components.css. Don't redefine them here.

   Prefixes: hub- = shared by all three samples · kb- = Muster B (Wissensseite) · pc- = Muster C (Produkt-Center)
   · sw- = sample switcher (review only, not part of the page). */

/* ============================================================ PAGE HEAD */
.hub-head { padding-bottom: 1.5rem; }
.hub-head .page-title { margin-bottom: 0.5rem; }
.hub-lead { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.55; color: var(--color-graphite-700); }

/* ============================================================ SEARCH (shared) */
.hub-search { position: relative; width: 100%; }
.hub-search__field {
  display: flex; align-items: center; gap: 0.75rem;
  height: 3.5rem; padding: 0 0.375rem 0 1rem;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-graphite-300);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hub-search__field:focus-within { border-color: var(--color-teal); box-shadow: 0 0 0 0.1875rem var(--color-teal-100); }
.hub-search__icon { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--color-graphite-600); }
.hub-search__input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: none; outline: none; background: none;
  font-family: var(--font-family); font-size: 1rem; color: var(--color-graphite-800);
}
.hub-search__input::placeholder { color: var(--color-graphite-500); }
.hub-search__input::-webkit-search-cancel-button { display: none; }
.hub-search__btn { flex: 0 0 auto; }

/* Suggestions dropdown */
/* Search dropdown — stages: Häufig gesucht · Suchvorschläge · grouped results · Meinten Sie · no dead end (js/page.js SEARCH STAGES) */
.hub-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.375rem); z-index: 20;
  max-height: min(34rem, 70vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0.5rem; list-style: none; text-align: left;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-graphite-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}
.hub-suggest[hidden] { display: none; }
.hub-suggest__group { padding: 0.75rem 0.75rem 0.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-graphite-600); }
.hub-suggest__group:first-child { padding-top: 0.375rem; }
.hub-suggest__group + .hub-suggest__item, .hub-suggest__group + .hub-suggest__chips { margin-top: 0; }
.hub-suggest__item + .hub-suggest__group, .hub-suggest__chips + .hub-suggest__group { margin-top: 0.375rem; border-top: 0.0625rem solid var(--color-graphite-100); }
.hub-suggest__row {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 1rem; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: var(--radius);
  color: var(--color-digital-black); text-decoration: none;
}
a.hub-suggest__row:hover, a.hub-suggest__row.is-active { background: var(--color-teal-50); }
.hub-suggest__row > svg { width: 1.25rem; height: 1.25rem; color: var(--color-teal); }
.hub-suggest__row > svg:last-child { width: 1rem; height: 1rem; color: var(--color-graphite-500); }
a.hub-suggest__row:hover > svg:last-child, a.hub-suggest__row.is-active > svg:last-child { color: var(--color-teal); }
.hub-suggest__item--multi .hub-suggest__row { grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; }
.hub-suggest__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.hub-suggest__q { font-size: var(--text-body-size); font-weight: 500; line-height: 1.35; }
.hub-suggest__q mark { background: var(--color-teal-50); color: inherit; border-radius: var(--radius-sm); }
a.hub-suggest__row:hover .hub-suggest__q mark, a.hub-suggest__row.is-active .hub-suggest__q mark { background: var(--color-teal-100); }
.hub-suggest__meta { font-size: var(--text-body-sm-size); line-height: 1.35; color: var(--color-graphite-600); }
.hub-suggest__sys { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.hub-suggest__sys a { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.625rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius); font-size: var(--text-body-sm-size); font-weight: 700; color: var(--color-teal); text-decoration: none; }
.hub-suggest__sys a:hover, .hub-suggest__sys a.is-active { border-color: var(--color-teal); background: var(--color-teal-50); }
.hub-suggest__term { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: var(--text-body-size); color: var(--color-graphite-700); text-decoration: none; }
.hub-suggest__term svg { flex: none; width: 1rem; height: 1rem; color: var(--color-graphite-500); }
.hub-suggest__term b { font-weight: 700; color: var(--color-digital-black); }
.hub-suggest__term:hover, .hub-suggest__term.is-active { background: var(--color-teal-50); }
.hub-suggest__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0.75rem 0.5rem; }
.hub-suggest__chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; color: var(--color-digital-black); text-decoration: none; }
.hub-suggest__chip svg { width: 0.875rem; height: 0.875rem; color: var(--color-graphite-500); }
.hub-suggest__chip:hover, .hub-suggest__chip.is-active { border-color: var(--color-teal); background: var(--color-teal-50); }
.hub-suggest__fix { padding: 0.625rem 0.75rem; margin-bottom: 0.25rem; border-radius: var(--radius); background: var(--color-paper); font-size: 0.875rem; color: var(--color-graphite-700); }
.hub-suggest__fixlink { font-weight: 700; color: var(--color-teal); text-decoration: underline; text-underline-offset: 0.15em; }
.hub-suggest__fixlink.is-active { background: var(--color-teal-50); }
.hub-suggest__nohit { padding: 0.5rem 0.75rem 0.25rem; font-size: var(--text-body-size); font-weight: 700; color: var(--color-digital-black); }
.hub-suggest__note { padding: 0 0.75rem 0.25rem; font-size: 0.875rem; color: var(--color-graphite-700); }
.hub-suggest__help { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin-top: 0.375rem; padding: 0.75rem; border-top: 0.0625rem solid var(--color-graphite-100); font-size: var(--text-body-sm-size); color: var(--color-graphite-600); }
.hub-suggest__help span { flex: 1 1 100%; }
.hub-suggest__help a { font-weight: 700; color: var(--color-teal); text-decoration: none; border-radius: var(--radius-sm); }
.hub-suggest__help a:hover, .hub-suggest__help a.is-active { text-decoration: underline; text-underline-offset: 0.15em; }

/* Chips under the search (kit Filter Chip look, used as quick links) */
.hub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.hub-chips__label { font-size: 0.875rem; font-weight: 700; color: var(--color-graphite-700); margin-right: 0.25rem; }
.hub-chip {
  display: inline-flex; align-items: center; height: 2.125rem; padding: 0 0.75rem;
  background: var(--color-white); color: var(--color-teal);
  border: 0.0625rem solid var(--color-teal-100); border-radius: var(--radius);
  font-family: var(--font-family); font-size: 0.875rem; font-weight: 700;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.hub-chip:hover { border-color: var(--color-teal); background: var(--color-teal-50); }

/* ============================================================ SECTION HEAD (shared) */
.hub-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.hub-sechead h2 { margin: 0; }
.hub-sechead .overline { margin: 0 0 0.5rem; }
.hub-sechead p:not(.overline) { margin: 0.5rem 0 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--color-graphite-700); }
.hub-sechead h2 { font-size: var(--text-h2-size); }
.hub-more {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 700; color: var(--color-teal); text-decoration: none; white-space: nowrap;
}
.hub-more svg { width: 1rem; height: 1rem; }
.hub-more:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ============================================================ PRODUCT TILES (A) */
.hub-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.hub-prod {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 1.25rem; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg);
  color: var(--color-graphite-800); text-decoration: none;
  transition: border-color 0.15s;
}
.hub-prod:hover { border-color: var(--color-teal); }
.hub-prod img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.hub-prod__name { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--color-digital-black); }
.hub-prod__subs { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.4; color: var(--color-graphite-700); }
.hub-prod > svg { width: 1.25rem; height: 1.25rem; color: var(--color-graphite-600); }
.hub-prod:hover > svg { color: var(--color-teal); }

/* ============================================================ TOPIC CARDS (A + C) */
.hub-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.hub-topic {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.5rem;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg);
  color: var(--color-graphite-800); text-decoration: none;
  transition: border-color 0.15s;
}
.hub-topic:hover { border-color: var(--color-teal); }
.hub-topic h3 { margin: 0; }
.hub-topic p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-graphite-700); }
.hub-topic__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; padding-top: 0.25rem; }
.hub-topic__tags span {
  padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--color-paper); font-size: 0.75rem; font-weight: 700; color: var(--color-graphite-700);
}
.hub-topic--compact { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.hub-topic--compact h3 { font-size: 1rem; margin: 0 0 0.125rem; }
.hub-topic--compact p { font-size: var(--text-body-sm-size); }

/* ============================================================ PRODUCT PICKER (A) — category list left, mega-menu style tiles right (also used by picker-varianten.html) */
.pk--split { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.pk-index { margin: 0; padding: 0; list-style: none; border-top: 0.0625rem solid var(--color-graphite-200); }
.pk-index li { border-bottom: 0.0625rem solid var(--color-graphite-200); }
.pk-cat {
  position: relative; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.875rem 0 0.875rem 1rem; background: none; border: none;
  font-family: var(--font-family); font-size: 1.125rem; font-weight: 500; color: var(--color-graphite-800); text-align: left; cursor: pointer;
  transition: color 0.15s;
}
.pk-cat::before { content: ""; position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem; width: 0.1875rem; border-radius: var(--radius-sm); background: var(--color-teal); opacity: 0; transition: opacity 0.15s; }
.pk-cat:hover { color: var(--color-digital-black); }
.pk-cat.is-active { font-weight: 700; color: var(--color-digital-black); }
.pk-cat.is-active::before { opacity: 1; }
.pk-count { font-size: 0.875rem; font-weight: 700; color: var(--color-graphite-600); }
.pk-cat.is-active .pk-count { color: var(--color-teal); }
.pk-panel { animation: pk-in 0.3s ease; }
.pk .pk-panel[hidden] { display: none; }
@keyframes pk-in { from { opacity: 0; } to { opacity: 1; } }
.pk-head { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1.25rem; }
.pk-head b { font-size: var(--text-h1-size); letter-spacing: -0.01em; color: var(--color-digital-black); }
.pk-head span { font-size: 1rem; color: var(--color-graphite-700); }
.pk-head .hub-more { margin-left: auto; }

/* ---- tiles: card + hover 1:1 from the live category page (.sc-w .subtile, edelstahl-tuerklingel.de/briefkasten, 04.11.2026) */
.pk7__index .pk7__cat { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding-left: 0.75rem; }
.pk7__cat img { width: 2.25rem; height: 2.25rem; object-fit: contain; mix-blend-mode: multiply; }
/* Start page category list as a contained sidebar section (same look as the model-page sidebar) */
.pk7__index { position: sticky; top: 6rem; padding: 1rem; border-top: none; border-radius: var(--radius-lg); background: var(--color-paper); }
.pk7__index li { border-bottom: none; }
.pk7__index li + li { margin-top: 0.25rem; }
.pk7__index-title { margin: 0 0 0.5rem; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-graphite-600); }
.pk7__index .pk7__cat { padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: var(--radius); font-size: 1rem; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.pk7__index .pk7__cat img { width: 2.5rem; height: 2.5rem; padding: 0.25rem; border-radius: var(--radius); background: var(--color-white); mix-blend-mode: normal; }
.pk7__index .pk7__cat::before { left: 0; top: 0.75rem; bottom: 0.75rem; }
.pk7__index .pk7__cat:hover { background: var(--color-white); }
.pk7__index .pk7__cat.is-active { background: var(--color-white); color: var(--color-teal); box-shadow: none; }
.pk7__index .pk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.5rem; padding: 0 0.375rem; border-radius: var(--radius-pill); background: var(--color-white); font-size: 0.75rem; color: var(--color-graphite-700); }
.pk7__index .pk7__cat.is-active .pk-count { background: var(--color-teal); color: var(--color-white); }
/* ---- category list: compact rows (own look, related to the kit category menu but not a copy) */
.pk--menu { grid-template-columns: 19rem minmax(0, 1fr); gap: 3rem; }
.pk7__index--menu { display: grid; gap: 0.125rem; padding: 0.375rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg); background: var(--color-white); }
.pk7__index--menu li { position: relative; }
.pk7__index--menu li + li { margin-top: 0; }
.pk7__index--menu .pk7__cat { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.75rem 0.375rem 0.375rem; border-radius: var(--radius); font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--color-digital-black); transition: background 0.15s, color 0.15s; }
.pk7__index--menu .pk7__cat::before { display: none; }
.pk7__index--menu .pk7__cat:hover { background: var(--color-paper); }
.pk7__index--menu .pk7__cat.is-active { background: var(--color-teal-50); color: var(--color-teal); box-shadow: none; }
.pk7__index--menu .pk7__cat:focus-visible { outline: 0.125rem solid var(--color-teal); outline-offset: 0.125rem; }
.pk7__thumb { flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: var(--radius); background: var(--color-paper); transition: background 0.15s; }
.pk7__index--menu .pk7__thumb img { display: block; width: 100%; height: 100%; padding: 0.25rem; object-fit: contain; border-radius: 0; background: none; mix-blend-mode: multiply; }
.pk7__index--menu .pk7__cat:hover .pk7__thumb, .pk7__index--menu .pk7__cat.is-active .pk7__thumb { background: var(--color-white); }
.pk7__name { flex: 1; min-width: 0; }
.pk7__arrow { flex: none; width: 1.125rem; height: 1.125rem; color: var(--color-teal); opacity: 0; transition: opacity 0.15s, transform 0.2s; }
.pk7__index--menu .pk7__cat:hover .pk7__arrow { opacity: 1; }
.pk7__index--menu .pk7__cat.is-active .pk7__arrow { opacity: 1; color: var(--color-teal); }
.pk7__index--menu .pk-panels[hidden] { display: none; }
.pk-panels.is-moved .pk-panel { animation: none; }
.pk-bar { display: none; align-items: center; justify-content: space-between; gap: 1rem; }
.pk-bar__label { margin: 0; font-size: var(--text-body-sm-size); font-weight: 700; color: var(--color-digital-black); }
.pk-bar__label span { font-weight: 400; color: var(--color-graphite-600); }
.pk-bar__nav { display: flex; flex: none; gap: 0.375rem; }
.pk-bar__nav[hidden] { display: none; }
.pk7__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pk7__tile {
  display: flex; flex-direction: column; padding: 0.625rem; text-align: center; text-decoration: none;
  background: var(--color-white); border: 0.0625rem solid var(--color-graphite-100); border-radius: var(--radius-lg);
  box-shadow: none;
  transition: box-shadow 0.22s, border-color 0.22s;
}
.pk7__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 0.75rem; padding: 0.75rem; overflow: hidden; border-radius: var(--radius); background: var(--color-white); }
.pk7__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pk7__label { display: flex; align-items: center; justify-content: center; min-height: 1.5em; font-size: var(--text-body-sm-size); font-weight: 600; line-height: 1.3; color: var(--color-digital-black); transition: color 0.22s; }
.pk7__tile:hover { border-color: color-mix(in srgb, var(--color-teal) 30%, transparent); box-shadow: var(--shadow-hover); }
.pk7__tile:hover .pk7__label { color: var(--color-teal); }
.pk7__tile { padding: 1rem 1rem 1.25rem; }
.pk7__sub { display: block; margin-top: 0.25rem; font-size: var(--text-caption-size); font-weight: 600; line-height: 1.4; color: var(--color-graphite-600); }   /* = live .subtile__count */
.pk7__tile:focus-visible { outline: 0.125rem solid var(--color-teal); outline-offset: 0.125rem; }

/* ============================================================ MODEL + PRODUCT PAGES (level 2 + 3) — mp- */
/* Inside pages: white head (no dark band) — kit breadcrumb colours, dark text, paper photo box */
.hub-band.mp-band { background: var(--color-white); color: var(--color-graphite-800); border-bottom: 0.0625rem solid var(--color-graphite-200); }
.mp-band .hub-hero__kicker { color: var(--color-teal); }
.mp-band .mp-hero__title { color: var(--color-graphite-850); }
.mp-band .mp-hero__lead { color: var(--color-graphite-700); opacity: 1; }
.mp-band .mp-facts li { border-color: var(--color-graphite-300); color: var(--color-graphite-800); }
.mp-band .mp-hero__img { background: var(--color-paper); }
.mp-band .mp-hero__img img { mix-blend-mode: multiply; }

.mp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: center; padding: 1.5rem 0 2.5rem; }
.mp-hero__title { margin: 0 0 0.5rem; font-size: 1.7rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.0125rem; color: var(--color-white); }   /* = kit .page-title (live shop H1) */
.mp-hero__title--sm { font-size: 1.7rem; }
.mp-hero__lead { margin: 0 0 1.5rem; max-width: 46rem; font-size: 1rem; line-height: 1.55; color: var(--color-white); opacity: 0.8; }
.mp-hero__img { display: flex; justify-content: center; align-items: center; height: 15rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--color-white); }
.mp-hero__img img { max-height: 100%; width: auto; object-fit: contain; }
.mp-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mp-facts li { padding: 0.375rem 0.75rem; border: 0.0625rem solid color-mix(in srgb, var(--color-white) 22%, transparent); border-radius: var(--radius); font-size: 0.875rem; color: var(--color-white); }
.mp-facts b { font-weight: 700; }

/* Switch to another version (kit select look on dark) */

/* Model page structure: compact head (photo + name + stats), then versions left and a sticky "Für alle …" sidebar right */
.hub-band.mp-band--model { border-bottom: none; }
.mp-mhead { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 1rem 0 2.5rem; }
.mp-mhead__img { display: flex; align-items: center; justify-content: center; height: 11rem; padding: 0.75rem; border-radius: var(--radius-lg); background: var(--color-paper); }
.mp-mhead__img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.mp-mhead .mp-hero__lead { margin-bottom: 1.25rem; }

.mp-model { padding-top: 0; }
.mp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; padding-top: 2.5rem; border-top: 0.0625rem solid var(--color-graphite-200); }
.mp-blockhead { margin-bottom: 1.5rem; }
.mp-blockhead h2 { margin: 0 0 0.375rem; font-size: var(--text-h2-size); }
.mp-blockhead p { margin: 0; font-size: 1rem; color: var(--color-graphite-700); }
.mp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Model family page: overview only — text left, large device photo right, separator, then all devices full width
   (no sidebar; FAQ, PDFs, firmware and videos live on the device page) */
.mp-family { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: center; padding: 1rem 0 2.5rem; }
.mp-family .mp-hero__lead { margin-bottom: 1.25rem; }
.mp-family__img { display: flex; align-items: center; justify-content: center; height: 15rem; padding: 1rem; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 60%, var(--color-white) 0%, var(--color-paper) 70%); }
.mp-family__img img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mp-family__stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mp-family__stats li { padding: 0.3125rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-teal-50); font-size: var(--text-body-sm-size); color: var(--color-graphite-700); }
.mp-family__stats b { color: var(--color-teal); }
.mp-sep { height: 0.0625rem; margin: 0 0 2.5rem; border: 0; background: linear-gradient(90deg, var(--color-teal) 0 3rem, var(--color-graphite-200) 3rem 100%); }
.mp-band--model + .mp-model { padding-top: 0.5rem; }
.mp-grid.mp-grid--family { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Model page: version tiles (same card + live hover as the picker) */
.mp-group { margin: 1.5rem 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-graphite-600); }
.mp-group:first-of-type { margin-top: 0; }
/* group label with count + one-line hint (Maxior: XDM10 / PRO / Set / Innenstation) */
.mp-group--split { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-top: 2.5rem; color: var(--color-digital-black); }
.mp-group__count { color: var(--color-teal); }
.mp-group__note { font-size: var(--text-body-sm-size); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-graphite-600); }
@media (min-width: 75.0625rem) { .mp-grid.mp-grid--family.mp-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-tile__meta { margin-top: 0.375rem; font-size: var(--text-caption-size); font-weight: 600; line-height: 1.4; color: var(--color-graphite-600); }

/* Product page: in-page tabs (kit Tabs), sticky below the compact header */

/* sticky bar with the live PDP CTA „Termin vereinbaren“ on the right */

.mp-gap { height: 1.5rem; }
.mp-sec { scroll-margin-top: 8rem; }
.mp-split { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.mp-split__head .overline { margin: 0 0 0.5rem; }
.mp-split__head h2 { margin: 0 0 0.5rem; }
.mp-split__head p:not(.overline) { margin: 0; font-size: var(--text-body-size); color: var(--color-graphite-700); }

/* Video card (device pages): bordered like the download cards, big play button, plays in the kit Modal (.mp-vm) */
.mp-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1rem; }
.mp-video { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; background: var(--color-white); border: 0.0625rem solid var(--color-graphite-300); border-radius: var(--radius-lg); transition: border-color 0.2s, box-shadow 0.25s; }
.mp-video:hover, .mp-video:focus-visible { border-color: var(--color-teal); box-shadow: var(--shadow-hover); text-decoration: none; }
.mp-video:focus-visible { outline: 0.125rem solid var(--color-teal); outline-offset: 0.1875rem; }
.mp-video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-digital-black); }
.mp-video__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-video__thumb::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-digital-black) 18%, transparent); transition: background 0.2s; }
.mp-video__play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-white); color: var(--color-teal); box-shadow: var(--shadow-tooltip); transition: background 0.2s, color 0.2s; }
.mp-video__play svg { width: 1.5rem; height: 1.5rem; margin-left: 0.125rem; }
.mp-video__body { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem 1.125rem; }
.mp-video b { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--color-digital-black); }
.mp-video small { font-size: 0.75rem; line-height: 1.45; color: var(--color-graphite-700); }
.mp-video__cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 0.5rem; font-size: var(--text-body-sm-size); font-weight: 700; color: var(--color-teal); }
.mp-video__cta svg { width: 1rem; height: 1rem; }
.mp-video:hover .mp-video__play { background: var(--color-teal); color: var(--color-white); }
.mp-video:hover .mp-video__thumb::after { background: color-mix(in srgb, var(--color-digital-black) 8%, transparent); }
/* video modal = kit Modal (XL) with a 16:9 player */
.mp-vm[hidden] { display: none; }
.mp-vm .modal-header { gap: 1rem; }
.mp-vm__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--color-digital-black); }
.mp-vm__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-vm__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1rem; }
.mp-vm__desc { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-graphite-700); }

.mp-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.mp-colors li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.875rem; align-items: center; padding: 0.625rem; background: var(--color-white); border: 0.0625rem solid var(--color-graphite-100); border-radius: var(--radius-lg); }
.mp-colors img { width: 3rem; height: 3rem; object-fit: contain; }
.mp-colors b { display: block; font-size: 0.875rem; color: var(--color-digital-black); }
.mp-colors small { display: block; font-size: 0.75rem; color: var(--color-graphite-600); }

/* ============================================================ TOPIC CARDS (A) — white cards, icon tile, live shop card hover */
.hub-topics-sec { padding-bottom: 2rem; }
.hub-themes { display: block; }
.hub-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.hub-index li { display: flex; }
.hub-index__row {
  flex: 1; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.5rem;
  background: var(--color-white); border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--color-graphite-800); text-decoration: none; transition: border-color 0.22s, box-shadow 0.22s;
}
.hub-index__icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; padding: 0.625rem; border-radius: var(--radius-lg); background: var(--color-teal-50); color: var(--color-digital-black); transition: background 0.22s; }
.hub-index__icon svg { display: block; width: 100%; height: 100%; }
.hub-index__icon .ac { stroke: var(--color-teal); }
.hub-index__text { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; padding-top: 0.125rem; }
.hub-index__title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: var(--text-body-size); font-weight: 700; line-height: 1.3; color: var(--color-digital-black); transition: color 0.22s; }
.hub-index__go { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-teal); }
.hub-index__desc { font-size: var(--text-body-sm-size); line-height: 1.5; color: var(--color-graphite-700); }
.hub-index__row:hover { border-color: color-mix(in srgb, var(--color-teal) 30%, transparent); box-shadow: var(--shadow-hover); }
.hub-index__row:hover .hub-index__title { color: var(--color-teal); }
.hub-index__row:hover .hub-index__icon { background: var(--color-teal-100); }
.hub-index__row:focus-visible { outline: 0.125rem solid var(--color-teal); outline-offset: 0.125rem; }

/* ============================================================ DOWNLOADS (A) */
.hub-dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.hub-dl-grid .file-download { width: 100%; min-width: 0; text-decoration: none; }
.file-download__title, .file-download__meta { display: block; }
.hub-dl-grid .file-download__title { white-space: normal; line-height: 1.3; }
.file-download__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-download__icon svg { width: 1.25rem; height: 1.25rem; color: var(--color-white); }
.file-download__btn svg { width: 1rem; height: 1rem; }
.hub-dl-note { margin-bottom: 1.25rem; }

/* ============================================================ ANSWERS (shared) */
.hub-answer { padding: 0 1.5rem 1.75rem; max-width: 46rem; }
.hub-answer p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.7; color: var(--color-graphite-700); }
.hub-answer p:last-child { margin-bottom: 0; }
.hub-answer ul, .hub-answer ol { margin: 0 0 0.75rem; padding-left: 1.25rem; color: var(--color-graphite-700); line-height: 1.7; }
.hub-answer a { color: var(--color-teal); font-weight: 700; text-underline-offset: 0.2em; }
/* answer structure: kit Lists inside answers, small bold lead-in before a list, UI labels bold */
.hub-answer p.hub-answer__lead { margin: 1rem 0 0.25rem; font-weight: 700; color: var(--color-digital-black); }
.hub-answer p.hub-answer__lead:first-child { margin-top: 0; }
.hub-answer .list-metzler-ordered, .hub-answer .list-metzler { margin: 0 0 0.75rem; padding: 0; color: var(--color-graphite-700); }
.hub-answer .list-metzler-ordered > li, .hub-answer .list-metzler > li { align-items: baseline; line-height: 1.6; }
.hub-answer .list-metzler-ordered > li + li { border-top: 0.0625rem solid var(--color-graphite-100); }
.hub-answer b { font-weight: 700; color: var(--color-digital-black); }
.hub-answer .alert { margin-top: 0.75rem; }
.fza-body-inner .hub-answer { padding: 0 1.25rem 1.5rem; }
@media (max-width: 35rem) { .hub-answer { padding: 0 1.125rem 1.5rem; } }

/* ============================================================ MUSTER A — support hero */
/* Calm dark stage: one soft kit glow (#01696A = the kit's shared ambient glow, glows only), deep teal, hairlines, typographic details */
.hub-band {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 40% 80% at 50% 0%, color-mix(in srgb, var(--color-mint) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-teal) 0%, var(--color-teal-700) 100%);
  color: var(--color-white);
}
/* Breadcrumb inside the dark band (kit .abt-crumb colours: white 65 % / current white) */
/* Breadcrumbs: kit FOR-CLAUDE §8 sizes and spacing everywhere; on the dark start band only the colours are inverted */
.hub-crumb .breadcrumb { padding: 1rem 0 0.8rem; }
.hub-band:not(.mp-band) .hub-crumb .breadcrumb-item a { color: color-mix(in srgb, var(--color-white) 70%, transparent); }
.hub-band:not(.mp-band) .hub-crumb .breadcrumb-item a:hover { color: var(--color-white); }
.hub-band:not(.mp-band) .hub-crumb .breadcrumb-item.active { color: var(--color-white); }
.hub-hero {
  position: relative; z-index: 1;
  padding: 2rem 0 4rem; text-align: center;
}
.hub-hero__main { max-width: 40rem; margin: 0 auto; }
.hub-hero .hub-chips { justify-content: center; }
.hub-hero .hub-suggest { text-align: left; }

.hub-hero__kicker { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-mint); }
.hub-hero__title { margin: 0 0 1.75rem; font-size: var(--display-5-size); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--color-white); }
.hub-hero__title span { color: inherit; }

/* Classic hero (kit Section 13 About Hero pattern): digital-black band, copy left, Metzler HQ photo right, fades into the band */
.hub-band--classic { background: var(--color-digital-black); }
.hub-band--classic .container, .hub-band--center .container { position: relative; z-index: 1; }
.hub-band--classic { background: radial-gradient(ellipse 50% 90% at 85% 50%, color-mix(in srgb, var(--color-teal) 55%, transparent) 0%, transparent 70%), var(--color-digital-black); }
.hub-band--classic .hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); gap: 4rem; align-items: center; padding: 2.5rem 0 3.5rem; text-align: left; }
.hub-band--classic .hub-hero__main { max-width: 36rem; margin: 0; }
.hub-band--classic .hub-hero__title { margin: 0 0 0.75rem; font-size: var(--display-3-size); line-height: 1.05; letter-spacing: -0.03em; }
.hub-hero__sub { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.5; color: var(--color-white); opacity: 0.85; }
.hub-band--classic .hub-hero .hub-chips { justify-content: flex-start; }

/* Centred support hero (reference: big centred question, white search, light chips) — kit teal with soft round light areas */
/* the open search dropdown may hang below the band: clip only sideways and stay above the next section */
.hub-band--center {
  overflow: visible; overflow-x: clip; z-index: 2;
  background:
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--color-mint) 22%, transparent) 0%, transparent 32%),
    radial-gradient(circle at 78% 40%, var(--color-teal) 0%, transparent 45%),
    radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--color-teal) 90%, transparent) 0%, transparent 40%),
    linear-gradient(180deg, var(--color-teal-700) 0%, var(--color-teal-900) 100%);
}
.hub-band--center .hub-hero { display: block; padding: 2.5rem 0 4.5rem; text-align: center; }
.hub-band--center .hub-hero__main { max-width: 64rem; margin: 0 auto; }
.hub-band--center .hub-hero__title { margin: 0 0 0.75rem; font-size: var(--display-4-size); line-height: 1.05; letter-spacing: -0.03em; }
.hub-band--center .hub-hero__sub { margin: 0 auto 2rem; max-width: none; text-wrap: balance; }
/* search bar and chip row share one width; chips stretch to fill it exactly */
.hub-band--center .hub-hero__search { max-width: 62rem; margin: 0 auto; }
.hub-band--center .hub-hero__search .hub-search__field { background: var(--color-white); border-color: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); }
.hub-band--center .hub-hero .hub-chips { max-width: 62rem; margin: 1.75rem auto 0; flex-wrap: nowrap; justify-content: center; }
.hub-band--center .hub-hero .hub-chips .hub-chip { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.hub-band--center .hub-hero .hub-chip { height: 2.125rem; padding: 0 0.875rem; background: color-mix(in srgb, var(--color-white) 8%, transparent); border-color: color-mix(in srgb, var(--color-white) 22%, transparent); font-size: 0.875rem; font-weight: 500; color: var(--color-white); }
.hub-band--center .hub-hero .hub-chip:hover { background: color-mix(in srgb, var(--color-white) 16%, transparent); border-color: color-mix(in srgb, var(--color-white) 55%, transparent); color: var(--color-white); }

/* Search as the kit header searchbar (header/preview.html .hdr-searchbar): paper fill, Graphite 300 line, small radius, grey icon, teal focus ring */
.hub-hero__search .hub-search__field {
  height: 3.25rem; gap: 0.75rem; padding: 0 0.375rem 0 1rem;
  background: var(--color-paper); border: 0.0625rem solid var(--color-graphite-300); border-radius: var(--radius);
  box-shadow: none;
}
.hub-hero__search .hub-search__field:focus-within { border-color: var(--color-teal); box-shadow: 0 0 0 0.1875rem var(--color-teal-100); }
.hub-hero__search .hub-search__icon { width: 1rem; height: 1rem; color: var(--color-graphite-500); }
.hub-hero__search .hub-search__input { font-size: 1rem; color: var(--color-graphite-850); }
.hub-hero__search .hub-search__btn { height: 2.5rem; }

/* Popular searches as kit Filter Chips (white, Teal 100 line, teal bold label) */
.hub-hero .hub-chips { gap: 0.5rem; margin-top: 1rem; }
.hub-hero .hub-chips__label { margin-right: 0.25rem; font-size: 0.875rem; font-weight: 400; color: var(--color-white); opacity: 0.8; }
/* Quick searches on the dark hero: quiet outline chips, brighter on hover */
.hub-hero .hub-chip {
  height: 2rem; padding: 0 0.75rem; background: transparent;
  border: 0.0625rem solid color-mix(in srgb, var(--color-white) 18%, transparent);
  font-size: var(--text-body-sm-size); font-weight: 500; color: color-mix(in srgb, var(--color-white) 72%, transparent);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hub-hero .hub-chip:hover { background: color-mix(in srgb, var(--color-white) 6%, transparent); border-color: color-mix(in srgb, var(--color-white) 45%, transparent); color: var(--color-white); }

/* Playful illustrations (flat, kit colours only) — left mailbox, right door station + parcel box */
.ill-blink { transform-box: fill-box; transform-origin: center; animation: ill-blink 5s infinite; }
@keyframes ill-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.ill-float { animation: ill-float 4s ease-in-out infinite; }
.ill-float--late { animation-delay: -2s; }
@keyframes ill-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.25rem); } }
@media (prefers-reduced-motion: reduce) { .ill-blink, .ill-float { animation: none; } }
.hub-hero__kicker { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-mint); }
.hub-hero__title { margin: 0 0 1.75rem; font-size: var(--display-5-size); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--color-white); }
.hub-hero__title span { color: inherit; }

/* Kit FAQ (04) inside the page: no extra top line, the section already separates */
.hub-faq .faq-stage { border-top: none; padding-top: 0; }

/* Kontakt (shared on all FAQ pages): compact bar — heading + hours left, three channels in one row */
.section.hub-contact { padding-top: 0; }
.hub-contact__bar { display: flex; align-items: center; gap: 2rem; padding: 1.25rem 1.5rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg); }
.hub-contact__head { display: flex; flex-direction: column; gap: 0.375rem; flex: none; padding-right: 2rem; border-right: 0.0625rem solid var(--color-graphite-200); }
.hub-contact__title { margin: 0; font-size: var(--text-h4-size); color: var(--color-digital-black); }
.hub-contact__hours { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-caption-size); font-weight: 500; color: var(--color-graphite-700); }
.hub-contact__hours svg { width: 1.125rem; height: 1.125rem; color: var(--color-teal); }
.hub-contact__list { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hub-contact__item { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.5rem; border-radius: var(--radius); text-decoration: none; transition: background 0.2s; }
.hub-contact__item:hover { background: var(--color-teal-50); }
.hub-contact__item:focus-visible { outline: 0.125rem solid var(--color-teal); outline-offset: 0.125rem; }
.hub-contact__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-teal-50); color: var(--color-teal); }
.hub-contact__icon svg { width: 1.125rem; height: 1.125rem; }
.hub-contact__text { min-width: 0; }
.hub-contact__text small { display: block; font-size: 0.75rem; color: var(--color-graphite-600); }
.hub-contact__text b { display: block; font-size: var(--text-body-size); color: var(--color-digital-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* style „Akzent-Kante“ (chosen 05.11.2026 from kontakt-leiste-varianten.html): teal edge left, solid teal icon squares, teal labels, arrow on hover */
.hub-contact__bar { position: relative; padding-left: 1.75rem; overflow: hidden; }
.hub-contact__bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem; background: var(--color-teal); }
.hub-contact__head { border-right-style: dashed; }
.hub-contact__icon { border-radius: var(--radius); background: var(--color-teal-50); color: var(--color-teal); }
.hub-contact__icon svg { width: 1.25rem; height: 1.25rem; }
.hub-contact__item:hover .hub-contact__icon { background: var(--color-white); }
.hub-contact__text b { font-size: var(--text-body-size); }
.hub-contact__text .hub-contact__desc { display: block; margin-top: 0.125rem; font-size: var(--text-caption-size); color: var(--color-graphite-600); }
.hub-contact__icon { width: 2.75rem; height: 2.75rem; }
.hub-contact__icon svg { width: 1.375rem; height: 1.375rem; }
.hub-contact__text { flex: 1; }
.hub-contact__text small { font-weight: 700; color: var(--color-teal); }
.hub-contact__item { padding-right: 0.75rem; }
.hub-contact__go { flex: none; width: 1.125rem; height: 1.125rem; color: var(--color-teal); opacity: 0; transition: opacity 0.2s; }
.hub-contact__item:hover .hub-contact__go { opacity: 1; }

/* ============================================================ MUSTER B — Wissensseite */
.kb-search { padding: 2rem; background: var(--color-paper); border-radius: var(--radius-lg); }
.kb-search h2 { margin: 0 0 1rem; }

.kb { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.kb-index { position: sticky; top: 6rem; }
.kb-index__title { margin: 0 0 0.75rem; }
.kb-index ol { list-style: none; margin: 0; padding: 0; border-left: 0.0625rem solid var(--color-graphite-200); }
.kb-index ol a {
  display: flex; justify-content: space-between; gap: 0.75rem;
  margin-left: -0.0625rem; padding: 0.5rem 0 0.5rem 1rem;
  border-left: 0.1875rem solid transparent;
  font-size: 0.875rem; color: var(--color-graphite-700); text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.kb-index ol a:hover { color: var(--color-teal); }
.kb-index ol a.is-active { color: var(--color-teal); font-weight: 700; border-left-color: var(--color-teal); }
.kb-index__n { font-size: 0.75rem; font-weight: 700; color: var(--color-graphite-600); }
.kb-index__help { margin-top: 1.5rem; padding: 1rem; background: var(--color-paper); border-radius: var(--radius-lg); }
.kb-index__help p { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--color-digital-black); }
.kb-index__help a { display: block; font-size: 1rem; font-weight: 700; color: var(--color-teal); text-decoration: none; }
.kb-index__help span { font-size: 0.75rem; color: var(--color-graphite-600); }

.kb-group { scroll-margin-top: 6rem; }
.kb-group + .kb-group { margin-top: 3.5rem; }
.kb-group .overline { margin: 0 0 0.5rem; }
.kb-group h2 { margin: 0 0 0.375rem; }
.kb-group__intro { margin: 0 0 1.25rem; color: var(--color-graphite-700); }

.kb-mounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.kb-mount { border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); }
.kb-mount img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--color-paper); }
.kb-mount__body { padding: 1.25rem; }
.kb-mount h3 { font-size: 1.125rem; margin: 0 0 0.375rem; }
.kb-mount p { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--color-graphite-700); }
.kb-mount ol { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-graphite-800); }
.kb-mount .alert { margin-top: 0.75rem; }

/* ============================================================ MUSTER C — Produkt-Center */
.pc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 3rem; align-items: end; }
.pc-step { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1rem; }
.pc-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius);
  background: var(--color-teal); color: var(--color-white); font-size: 0.875rem; font-weight: 700;
}
.pc-step h2 { margin: 0; font-size: var(--text-h3-size); }

.pc-tabs-track { overflow-x: auto; scrollbar-width: none; margin-bottom: 1.5rem; }
.pc-tabs-track::-webkit-scrollbar { display: none; }
.pc-tabs-track .tabs__bar { min-width: max-content; }
.pc-tabs-track .tabs__tab { font-family: var(--font-family); white-space: nowrap; padding: 0.625rem 1.125rem; }

.pc-models { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.pc-model {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.875rem 0.75rem 1rem;
  background: var(--color-white);
  border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg);
  font-family: var(--font-family); text-align: center; color: var(--color-graphite-800); text-decoration: none;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.pc-model:hover { border-color: var(--color-teal); }
.pc-model.is-active { border-color: var(--color-teal); background: var(--color-teal-50); box-shadow: inset 0 0 0 0.0625rem var(--color-teal); }
.pc-model img { width: 5.5rem; height: 5.5rem; object-fit: contain; mix-blend-mode: multiply; }
.pc-model__name { font-size: 1rem; font-weight: 700; color: var(--color-digital-black); line-height: 1.25; }
.pc-model__sys { font-size: 0.75rem; line-height: 1.35; color: var(--color-graphite-600); }
.pc-model__check {
  position: absolute; top: 0.5rem; right: 0.5rem; display: none;
  width: 1.25rem; height: 1.25rem; border-radius: var(--radius-sm);
  background: var(--color-teal); color: var(--color-white);
  align-items: center; justify-content: center;
}
.pc-model__check svg { width: 0.875rem; height: 0.875rem; }
.pc-model.is-active .pc-model__check { display: inline-flex; }

.pc-panel {
  margin-top: 2rem; background: var(--color-white);
  border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg);
  scroll-margin-top: 6rem;
}
.pc-panel__head { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.5rem 1.5rem 0; }
.pc-panel__head img { width: 6rem; height: 6rem; object-fit: contain; }
.pc-panel__head .overline { margin: 0 0 0.25rem; }
.pc-panel__head h2 { margin: 0 0 0.375rem; }
.pc-facts { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--color-graphite-700); }
.pc-facts li { display: inline-flex; align-items: center; gap: 0.375rem; }
.pc-facts svg { width: 1rem; height: 1rem; color: var(--color-teal); }
.pc-panel__actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.pc-panel .tabs { padding: 1rem 1.5rem 0; }
.pc-panel .tabs__tab { font-family: var(--font-family); }
.pc-pane { padding: 1.5rem; }
.pc-pane[hidden] { display: none; }

.pc-filter { max-width: 24rem; margin-bottom: 1rem; }
.pc-filter .hub-search__field { height: 2.75rem; }
.pc-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.pc-doc a {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem; align-items: center; gap: 0.875rem;
  padding: 0.875rem 0.25rem; border-bottom: 0.0625rem solid var(--color-graphite-200);
  color: var(--color-graphite-800); text-decoration: none; font-size: 1rem; line-height: 1.4;
}
.pc-doc a:hover { color: var(--color-teal); }
.pc-doc svg { width: 1.5rem; height: 1.5rem; }
.pc-doc a > svg:last-child { width: 1.25rem; height: 1.25rem; color: var(--color-teal); }
.pc-doc--top a { font-weight: 700; }
.pc-docs__empty { grid-column: 1 / -1; padding: 1rem 0; color: var(--color-graphite-700); font-size: 0.875rem; }
.pc-docs__group { grid-column: 1 / -1; margin: 1.25rem 0 0.25rem; }
.pc-docs__group:first-child { margin-top: 0; }

.pc-fw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem; margin-top: 1rem; }
.pc-fw__card { padding: 1.25rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 0.75rem; }
.pc-fw__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pc-fw__top h3 { margin: 0; font-size: 1.125rem; }
.pc-fw__ver { padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-teal-100); color: var(--color-teal); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.pc-fw__date { margin: 0; font-size: var(--text-caption-size); color: var(--color-graphite-600); }
.pc-fw__card ul { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-graphite-800); }
.pc-fw__card .btn { align-self: flex-start; margin-top: auto; }
.pc-fw__card .btn svg { width: 1.125rem; height: 1.125rem; }
.pc-fw-alerts { display: grid; gap: 0.75rem; }
.pc-fw-guide { margin-top: 1rem; }

.pc-help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.pc-help__card { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg); }
.pc-help__card h3 { margin: 0; font-size: 1.125rem; }
.pc-help__card p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-graphite-700); }
.pc-help__card ul { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-graphite-800); }
.pc-help__card .btn { align-self: flex-start; margin-top: auto; }
.pc-help__card .btn svg { width: 1.125rem; height: 1.125rem; }
.pc-help__price { font-size: 1.25rem; font-weight: 700; color: var(--color-graphite-900); }
.pc-help__price small { font-size: 0.75rem; font-weight: 400; color: var(--color-graphite-600); }
.pc-help__tel { font-size: 1.25rem; font-weight: 700; color: var(--color-teal); text-decoration: none; }
.pc-help__tel:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.pc-subs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.pc-subs .pc-model img { width: 5rem; height: 5rem; }
.pc-other { margin-top: 2rem; padding: 1.5rem; background: var(--color-white); border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius-lg); }
.pc-other h3 { margin: 0 0 1rem; }

.pc-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
.pc-contact .support-card-desc { max-width: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 75rem) {
  .mp-grid.mp-grid--family { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-contact__bar { flex-direction: column; align-items: stretch; gap: 1rem; }
  .hub-contact__head { flex-direction: row; justify-content: space-between; align-items: center; padding: 0 0 1rem; border-right: none; border-bottom: 0.0625rem dashed var(--color-graphite-200); }
  .hub-contact__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pk7__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  .mp-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-prods, .hub-topics, .hub-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-models { grid-template-columns: repeat(4, 1fr); }
  .pc-help { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 64rem) {
  .mp-grid.mp-grid--family { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-family { grid-template-columns: minmax(0, 1fr) 14rem; gap: 2rem; }
  .mp-family__img { height: 12rem; }
  .hub-band--center .hub-hero .hub-chips .hub-chip { padding: 0 0.5rem; font-size: var(--text-body-sm-size); }
  .hub-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .mp-layout { grid-template-columns: 1fr; gap: 2rem; }
  
  .hub-band--classic .hub-hero { grid-template-columns: 1fr; }
  .hub-band--classic .hub-hero { padding: 1.5rem 0 3rem; }
  .mp-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .mp-hero { grid-template-columns: minmax(0, 1fr) 12rem; gap: 2rem; }
  .mp-hero__img { height: 11rem; }
  
  .pk--split { grid-template-columns: 1fr; gap: 1.5rem; }
  .pk-index { display: flex; overflow-x: auto; scrollbar-width: none; gap: 0.5rem; margin: 0 calc(var(--page-inset) * -1); padding: 0 var(--page-inset); border-top: none; }
  .pk-index::-webkit-scrollbar { display: none; }
  .pk-index li { flex: none; border-bottom: none; }
  .pk-cat { width: auto; gap: 0.5rem; padding: 0.5rem 0.875rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius); white-space: nowrap; }
  .pk-cat::before { display: none; }
  .pk-cat.is-active { border-color: var(--color-teal); background: var(--color-teal-50); color: var(--color-teal); }
  .pk7__index { position: static; padding: 0 var(--page-inset); border-radius: 0; background: none; }
  .pk7__index-title { display: none; }
  .pk7__index li + li { margin-top: 0; }
  .pk7__index .pk7__cat { border: 0.0625rem solid var(--color-graphite-200); box-shadow: none; }
  .pk7__index .pk7__cat.is-active { border-color: var(--color-teal); background: var(--color-teal-50); box-shadow: none; }
  /* Product picker on tablet/phone: categories = swipeable chip row (edge to edge), models = grid right below.
     Same chip language as the „Ihre Ausführung“ tiles on the device pages; text = live .subtile__label. */
  .pk--menu { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .pk--menu > .pk7__index--menu {
    display: flex; gap: 0.5rem; margin: 0; padding: 0.125rem 0 0.25rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    border: 0; border-radius: 0; background: none;
  }
  .pk--menu > .pk7__index--menu::-webkit-scrollbar { display: none; }
  .pk-bar { display: flex; }
  .pk--menu > .pk7__index--menu li { flex: 0 0 calc((100% - 2.5rem) / 6); scroll-snap-align: start; }   /* tablet: 6 whole chips per view */
  .pk--menu .pk7__cat {
    flex-direction: column; justify-content: flex-start; gap: 0.375rem; width: 100%; height: 100%; padding: 0.625rem 0.375rem 0.75rem;
    border: 0.0625rem solid var(--color-graphite-300); border-radius: var(--radius-lg); background: var(--color-white);
    font-size: var(--text-caption-size); font-weight: 600; line-height: 1.25; text-align: center; white-space: normal; hyphens: auto;
  }
  .pk--menu .pk7__cat:hover { background: var(--color-white); border-color: color-mix(in srgb, var(--color-teal) 30%, transparent); }
  .pk--menu .pk7__cat.is-active { border-color: var(--color-teal); box-shadow: inset 0 0 0 0.0625rem var(--color-teal); background: var(--color-teal-50); color: var(--color-teal); }
  .pk--menu .pk7__cat .pk7__thumb { width: 3rem; height: 3rem; background: var(--color-paper); }
  .pk--menu .pk7__cat.is-active .pk7__thumb { background: var(--color-white); }
  .pk--menu .pk7__arrow { display: none; }
  .pk--menu .pk7__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .hub-hero { padding: 1.5rem 0 3rem; }
  .kb { grid-template-columns: 1fr; gap: 2rem; }
  .kb-index { position: static; }
  .kb-index ol { display: flex; flex-wrap: wrap; gap: 0.5rem; border-left: none; }
  .kb-index ol a { margin: 0; padding: 0.375rem 0.75rem; border: 0.0625rem solid var(--color-graphite-200); border-radius: var(--radius); }
  .kb-index ol a.is-active { border-color: var(--color-teal); }
  .kb-index__help { display: none; }
  .kb-tasks, .kb-mounts { grid-template-columns: 1fr 1fr; }
  .pc-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .pc-panel__head { grid-template-columns: 5rem minmax(0, 1fr); }
  .pc-panel__head img { width: 5rem; height: 5rem; }
  .pc-panel__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pc-docs, .pc-fw { grid-template-columns: 1fr; }
  .pc-subs { grid-template-columns: repeat(3, 1fr); }
  .pc-contact { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .pk--menu .pk7__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk--menu > .pk7__index--menu li { flex-basis: calc((100% - 1rem) / 3); }   /* phone: 3 whole chips per view */
  .pk--menu .pk7__tile { padding: 0.75rem 0.5rem 0.875rem; }
  .pk--menu .pk7__img { aspect-ratio: 4 / 3; margin-bottom: 0.5rem; padding: 0.25rem; }
  .mp-grid.mp-grid--family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-family { grid-template-columns: 1fr; gap: 1.25rem; padding-bottom: 2rem; }
  .mp-family__img { order: -1; height: 11rem; }
  .mp-sep { margin-bottom: 2rem; }
  .hub-chip--desk { display: none; }
  .hub-band--center .hub-hero .hub-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .hub-band--center .hub-hero .hub-chip { justify-content: center; padding: 0 0.5rem; font-size: var(--text-body-sm-size); white-space: nowrap; }
  .hub-contact__list { grid-template-columns: 1fr; gap: 0.25rem; }
  .hub-contact__go { opacity: 1; }
  .hub-contact__head { flex-direction: column; align-items: flex-start; }
  .hub-index { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .hub-index__row { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem; }
  .hub-index__icon { width: 3rem; height: 3rem; padding: 0.5rem; }
  .mp-mhead { grid-template-columns: 1fr; gap: 1.25rem; padding-bottom: 1.5rem; }
  .mp-mhead__img { height: 9rem; }
  
  
  .mp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-layout { padding-top: 1.75rem; }
  .hub-crumb .breadcrumb { padding: 0.8rem 0; }
  .hub-crumb .breadcrumb-item a, .hub-crumb .breadcrumb-item.active { font-size: 0.75rem; }
  .hub-band--center .hub-hero { padding: 1.5rem 0 3rem; }
  .hub-band--center .hub-hero__title { font-size: var(--text-h1-size); }
  .hub-band--classic .hub-hero__title { font-size: var(--text-h1-size); }
  .mp-hero { grid-template-columns: 1fr; gap: 1.25rem; padding: 1rem 0 2rem; }
  .mp-hero__img { order: -1; height: 10rem; }
  .mp-hero__title, .mp-hero__title--sm { font-size: 1.15rem; line-height: 1.3; }   /* = kit .page-title on phones */
  
  .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-shorts, .mp-colors { grid-template-columns: 1fr; }
  
  
  .pk-head { flex-wrap: wrap; }
  .pk-head b { font-size: var(--text-h3-size); }
  .pk7__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
  .hub-head { padding-bottom: 1rem; }
  .hub-prods, .hub-topics, .hub-dl-grid, .kb-tasks, .kb-mounts, .pc-help { grid-template-columns: minmax(0, 1fr); }
  .hub-sechead { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .hub-hero { padding: 1.75rem 0 2.5rem; }
  .hub-hero__title { font-size: var(--text-h1-size); }
  .hub-search__field { height: 3.25rem; }
  .hub-search__btn { display: none; }
  .kb-search { padding: 1.5rem 1.25rem; margin: 0 calc(var(--page-inset) * -1); border-radius: 0; }
  
  .kb-mount { display: grid; grid-template-columns: 7rem minmax(0, 1fr); }
  .kb-mount img { width: 6rem; height: 6rem; margin: 1rem 0 0 1rem; border-radius: var(--radius); }
  .kb-mount__body { padding: 1rem; }
  .pc-models { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--page-inset); gap: 0.625rem; margin: 0 calc(var(--page-inset) * -1); padding: 0 var(--page-inset) 0.25rem; scrollbar-width: none; }
  .pc-models::-webkit-scrollbar { display: none; }
  .pc-models .pc-model { flex: 0 0 8.5rem; scroll-snap-align: start; }
  .pc-subs { grid-template-columns: 1fr 1fr; }
  .pc-panel__head { padding: 1.25rem 1.25rem 0; gap: 1rem; }
  .pc-panel .tabs { padding: 0.75rem 0 0; }
  .pc-panel .tabs__bar { overflow-x: auto; scrollbar-width: none; }
  .pc-panel .tabs__tab { padding: 0.625rem 1rem; white-space: nowrap; }
  .pc-pane { padding: 1.25rem; }
  .pc-panel__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 62rem) {
  .hub-band--center .hub-hero .hub-chips { flex-wrap: wrap; }
  .hub-band--center .hub-hero .hub-chips .hub-chip { flex: 0 1 auto; }
}
@media (max-width: 23rem) {
  .hub-band--center .hub-hero .hub-chip { font-size: 0.75rem; }
}