.catalog-page {
  min-width: 0;
}

.catalog-page__main {
  min-width: 0;
  padding-top: 5.5rem;
}

.catalog-page .site-header[data-appearance='solid'] {
  color: var(--color-ink);
  background: rgb(255 255 255 / 66%);
  border-bottom: 1px solid rgb(255 255 255 / 55%);
  box-shadow: 0 0.35rem 1.75rem rgb(3 19 36 / 10%);
  backdrop-filter: blur(1.25rem) saturate(1.7);
}

.catalog-page .site-header[data-appearance='solid'] .brand__inverse {
  opacity: 0;
}

.catalog-page .site-header[data-appearance='solid'] .brand__original {
  opacity: 1;
}

.catalog-page .site-header[data-appearance='solid'] .mobile-trigger {
  border-color: rgb(0 72 153 / 32%);
}

.catalog-content {
  width: min(100%, var(--content-width));
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.catalog-intro {
  overflow: hidden;
  border-bottom: 1px solid rgb(0 72 153 / 12%);
  background:
    linear-gradient(120deg, rgb(0 72 153 / 7%), transparent 52%),
    var(--color-white);
}

.catalog-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 1rem 0 0;
  color: rgb(17 24 32 / 72%);
  font-size: 0.88rem;
  list-style: none;
}

.catalog-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.catalog-breadcrumbs li:not(:last-child)::after {
  margin-inline-start: 0.6rem;
  color: var(--color-blue);
  content: '/';
}

.catalog-breadcrumbs a,
.catalog-breadcrumbs span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.catalog-breadcrumbs a {
  font-weight: 600;
  text-underline-offset: 0.18em;
}

.catalog-intro__copy {
  max-width: 56rem;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.75rem);
}

.catalog-eyebrow {
  margin: 0 0 0.65rem;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.catalog-intro h1,
.catalog-section__heading h2 {
  margin: 0;
  color: var(--color-ink);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.catalog-intro h1 {
  font-size: min(clamp(3rem, 7vw, 5.4rem), 8.5vw);
}

.catalog-intro__description,
.catalog-intro__introduction {
  max-width: 52rem;
  margin: 1.25rem 0 0;
  color: rgb(17 24 32 / 78%);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
}

.catalog-intro__introduction {
  margin-top: 0.75rem;
}

.catalog-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1.75rem;
}

.catalog-jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.catalog-line-highlights {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--color-paper);
}

.catalog-line-highlights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.catalog-line-highlights article {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 0.2rem solid var(--color-blue);
}

.catalog-line-highlights h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.1;
}

.catalog-line-highlights p {
  margin: 0.8rem 0 0;
  color: rgb(17 24 32 / 72%);
  line-height: 1.55;
}

.catalog-section--downloads {
  border-top: 1px solid rgb(0 72 153 / 12%);
  background: var(--color-paper);
}

.catalog-section--consulting {
  color: var(--color-white);
  background: var(--color-ink);
}

.catalog-line-download,
.catalog-line-consulting {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.catalog-line-download .catalog-section__heading,
.catalog-line-consulting .catalog-section__heading {
  margin-bottom: 0;
}

.catalog-line-consulting .catalog-eyebrow,
.catalog-line-consulting .catalog-section__heading h2 {
  color: var(--color-white);
}

.catalog-line-consulting .catalog-section__heading > p:last-child {
  color: rgb(255 255 255 / 74%);
}

.catalog-line-download > .button,
.catalog-line-consulting > .button {
  flex: 0 0 auto;
}

.catalog-section {
  min-width: 0;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.catalog-section--lines {
  background: var(--color-paper);
}

.catalog-section--families {
  border-top: 1px solid rgb(0 72 153 / 12%);
  background: var(--color-white);
}

.catalog-section--products {
  border-top: 1px solid rgb(0 72 153 / 12%);
  background: var(--color-white);
}

.catalog-section__heading {
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.catalog-section__heading h2 {
  font-size: clamp(2.25rem, 4vw, 3.8rem);
}

.catalog-section__heading > p:last-child,
.catalog-section__heading--products > p {
  margin: 0.85rem 0 0;
  color: rgb(17 24 32 / 70%);
  line-height: 1.5;
}

.catalog-section__heading--products {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
}

.catalog-section__heading--products > p {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
}

.catalog-line-grid,
.catalog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  min-width: 0;
}

.catalog-family-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
}

.catalog-family-groups {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}

.catalog-family-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line, #dfe4e8);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.catalog-family-group__count {
  color: var(--muted, #5d6b76);
  font-size: 0.75rem;
  font-weight: 500;
}

.catalog-family-overview {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.catalog-family-preview {
  display: none;
  position: sticky;
  top: 6rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgb(0 72 153 / 18%);
  background: var(--color-white);
}

.catalog-family-preview__item {
  display: grid;
  gap: 0.6rem;
}

.catalog-family-preview__item .catalog-picture {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #f1f3f4;
}

.catalog-family-preview__item .catalog-picture img {
  display: block;
  width: var(--motiv-breite, 100%);
  height: var(--motiv-hoehe, 100%);
  object-fit: contain;
}

.catalog-family-preview__title {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 750;
}

.catalog-family-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(0 72 153 / 25%);
  color: var(--color-ink);
  background: var(--color-white);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.catalog-family-card:hover,
.catalog-family-card:focus-visible {
  border-color: var(--color-blue);
  background: rgb(0 72 153 / 5%);
  outline: 3px solid #f5c400;
  outline-offset: 3px;
}

.catalog-family-card__title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.catalog-family-card__count {
  flex: 0 0 auto;
  color: rgb(17 24 32 / 64%);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.catalog-controls {
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.catalog-controls__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
  gap: 1rem;
  align-items: end;
}

.catalog-controls__toolbar--single {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-search,
.catalog-sort {
  display: grid;
  gap: 0.45rem;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
}

.catalog-search input,
.catalog-sort select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgb(0 72 153 / 28%);
  border-radius: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font: inherit;
}

.catalog-search input:focus-visible,
.catalog-sort select:focus-visible,
.catalog-facet input:focus-visible + span,
.catalog-chip:focus-visible,
.catalog-reset:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.catalog-results-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 1rem;
}

.catalog-result-count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
}

.catalog-chips {
  display: flex;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.catalog-chip,
.catalog-reset {
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgb(0 72 153 / 24%);
  color: var(--color-blue);
  background: rgb(0 72 153 / 5%);
  font: inherit;
  font-weight: 650;
}

.catalog-reset {
  margin-inline-start: auto;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.catalog-reset:disabled,
.catalog-reset[aria-disabled='true'] {
  color: rgb(17 24 32 / 45%);
  cursor: default;
  text-decoration: none;
}

.catalog-facet {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.catalog-facet__options {
  display: grid;
  gap: 0.25rem;
  max-height: 10.5rem;
  overflow: auto;
  padding: 0.1rem 0.25rem 0.1rem 0.1rem;

  /* Scroll-Schatten: zeigt an, dass die Liste weiterscrollbar ist. */
  background:
    linear-gradient(var(--color-white) 30%, rgb(255 255 255 / 0%)),
    linear-gradient(rgb(255 255 255 / 0%), var(--color-white) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgb(3 19 36 / 20%), rgb(3 19 36 / 0%)),
    radial-gradient(farthest-side at 50% 100%, rgb(3 19 36 / 20%), rgb(3 19 36 / 0%)) 0 100%;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
  background-size: 100% 2.25rem, 100% 2.25rem, 100% 0.8rem, 100% 0.8rem;
}

.catalog-facet label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  line-height: 1.35;
}

.catalog-facet label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.catalog-facet input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.05rem 0 0;
  accent-color: var(--color-blue);
}

.catalog-facet small {
  color: rgb(17 24 32 / 64%);
  font-size: 0.72rem;
  white-space: nowrap;
}

.catalog-facet label:has(input:disabled) {
  color: rgb(17 24 32 / 38%);
}

.catalog-facet label:has(input:disabled) small {
  color: rgb(17 24 32 / 38%);
}

.catalog-no-results {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgb(0 72 153 / 14%);
  color: rgb(17 24 32 / 70%);
  background: var(--color-paper);
  text-align: center;
}

.catalog-no-results strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.catalog-filter-cta__inner {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.catalog-filter-cta__inner .catalog-section__heading {
  margin-bottom: 0;
}

.catalog-filter-cta__button {
  min-height: 3.4rem;
  padding: 1rem 2.4rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.catalog-explorer--sidebar {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.catalog-mobile-filter-bar,
.catalog-sidebar__mobile-header,
.catalog-sidebar__mobile-footer,
.catalog-filter-backdrop {
  display: none;
}

.catalog-filter-shell {
  display: contents;
}

.catalog-explorer__results {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.catalog-explorer__results .catalog-controls {
  margin-bottom: 0;
}

.catalog-sidebar {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-width: 0;
}

.catalog-sidebar__group {
  border: 1px solid rgb(0 72 153 / 25%);
  background: var(--color-white);
}

.catalog-sidebar__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.9rem;
  padding: 0.6rem 0.9rem;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.catalog-sidebar__group summary::-webkit-details-marker {
  display: none;
}

.catalog-sidebar__group summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.catalog-sidebar__group[open] summary::after {
  margin-top: 0.2rem;
  transform: rotate(225deg);
}

.catalog-sidebar__group summary:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: -3px;
}

.catalog-sidebar__group .catalog-facet {
  padding: 0 0.9rem 0.75rem;
}

.catalog-sidebar__group .catalog-facet__options {
  max-height: 14rem;
}

.company-list {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.company-list li {
  min-width: 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 0.2rem solid var(--color-blue);
  color: rgb(17 24 32 / 80%);
  line-height: 1.5;
}

.company-list li strong {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-display);
}

.company-list__detail {
  font-size: 0.88rem;
}

.company-feature {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-top: 0.2rem solid var(--color-yellow);
  background: var(--color-paper);
}

.company-feature p:last-child {
  margin: 0.5rem 0 0;
  line-height: 1.55;
}

/* Karriere nach Vorlage: geteilter Hero mit Foto, kompakte Stellenkarten,
   dann je Anzeige ein Rettungszeichen-Leuchtkasten mit dem Stellentitel. */
.career-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  background: var(--color-paper);
}

.career-hero__copy {
  align-self: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem)
    clamp(2.5rem, 5vw, 4.5rem) max(clamp(1.25rem, 4vw, 4rem), calc((100vw - 80rem) / 2));
}

.career-hero h1 {
  margin: 0.6rem 0 0;
  font-size: clamp(2.3rem, 4.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.career-hero__lead {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  color: #495460;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}

.career-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

.career-hero__actions .text-link {
  margin-top: 0;
}

.career-hero__count {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
  color: #495460;
  font-size: 0.94rem;
}

.career-hero__count svg {
  width: 1.25rem;
  color: var(--color-blue);
}

.career-hero__media {
  position: relative;
  min-height: clamp(18rem, 32vw, 28rem);
  overflow: hidden;
}

.career-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-hero__mark {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: clamp(5rem, 9vw, 8.5rem);
  opacity: 0.92;
}

@media (max-width: 56rem) {
  .career-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .career-hero__media {
    order: -1;
    min-height: 15rem;
  }
}

/* Stellenkarten: Bereich, Titel, Ort, Kurzmerkmale, Pfeil. */
/* Standortwahl vor der Stellenliste: zwei große Ziele, die auch am Handy
   nebeneinander lesbar bleiben – untereinander, sobald es eng wird. */
.career-locations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0 0 clamp(2.25rem, 4.5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.career-location {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgb(0 72 153 / 18%);
  border-top: 0.3rem solid var(--color-yellow);
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 180ms ease, translate 180ms ease;
}

.career-location:hover {
  box-shadow: 0 0.7rem 1.6rem rgb(18 30 42 / 14%);
  translate: 0 -0.2rem;
}

.career-location:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.career-location__region {
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.career-location__name {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.career-location__company {
  color: #5b6570;
  font-size: 0.92rem;
}

.career-location__text {
  margin-top: 0.35rem;
  line-height: 1.55;
}

.career-location__jobs {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(0 72 153 / 14%);
  color: var(--color-ink);
  font-size: 0.92rem;
}

.career-location__jobs span::before {
  content: '– ';
}

.career-location__go {
  margin-top: 0.9rem;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Vorteile je Standort. */
.job-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-benefits li {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  border-left: 0.25rem solid var(--color-yellow);
  background: var(--color-white);
}

.job-benefits strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.job-benefits span {
  line-height: 1.55;
}

.job-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0 0 clamp(2.25rem, 4.5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.job-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 100%;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid rgb(0 72 153 / 18%);
  border-left: 0.25rem solid var(--color-blue);
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 180ms ease, translate 180ms ease;
}

.job-card:hover {
  box-shadow: 0 0.6rem 1.4rem rgb(18 30 42 / 12%);
  translate: 0 -0.15rem;
}

.job-card:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.job-card__body {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.job-card__category {
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.job-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  hyphens: auto;
  overflow-wrap: break-word;
}

.job-card:hover .job-card__title {
  color: var(--color-blue);
}

.job-card__place {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  color: #5b6570;
  font-size: 0.88rem;
}

.job-card__place svg {
  width: 0.95rem;
  color: var(--color-blue);
}

.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.job-card__tags span {
  padding: 0.2rem 0.6rem;
  border: 1px solid rgb(17 24 32 / 16%);
  border-radius: 999px;
  color: #495460;
  font-size: 0.78rem;
}

.job-card__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border: 2px solid var(--color-blue);
  border-radius: 50%;
  color: var(--color-blue);
  transition: background 160ms ease, color 160ms ease;
}

.job-card__go svg {
  width: 1.15rem;
}

.job-card:hover .job-card__go {
  color: var(--color-white);
  background: var(--color-blue);
}

/* Rettungszeichen-Leuchtkasten: Metallgehäuse mit Endkappen, grünes
   Leuchtfeld mit innerem Lichtrahmen, Zuleitung mit grünem Energieglühen.

   Farbe #007a33 liegt nahe der Sicherheitsfarbe nach ISO 3864 und hält mit
   Weiß 5,5:1. Das Anlaufen hat drei Hell-Dunkel-Wechsel auf 1,4 s — unter
   der Drei-Blitze-Grenze von WCAG 2.3.1 — und entfällt bei reduzierter
   Bewegung vollständig. */
.job-sign {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-inline: clamp(0rem, 2vw, 1.5rem);
}

.job-sign__cable {
  position: absolute;
  top: 50%;
  right: 100%;
  width: clamp(1.5rem, 6vw, 6rem);
  height: 3px;
  background: linear-gradient(90deg, rgb(0 150 64 / 0%), #9fb3a8);
  translate: 0 -50%;
}

.job-sign__cable::after {
  position: absolute;
  inset: -4px 0;
  background: linear-gradient(90deg, rgb(57 214 124 / 0%), rgb(57 214 124 / 70%));
  filter: blur(4px);
  content: '';
}

.job-sign__cap {
  flex: none;
  width: 0.8rem;
  border: 1px solid rgb(17 24 32 / 25%);
  background: linear-gradient(#e8ecef, #aeb9c2 55%, #d5dbe0);
}

.job-sign__cap--left {
  border-radius: 0.45rem 0 0 0.45rem;
  border-right: 0;
}

.job-sign__cap--right {
  border-radius: 0 0.45rem 0.45rem 0;
  border-left: 0;
}

.job-sign__panel {
  display: flex;
  flex: 1;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.9rem);
  border: 1px solid rgb(17 24 32 / 30%);
  color: var(--color-white);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 20%), transparent 55%),
    #007a33;
  box-shadow:
    inset 0 0 0 3px rgb(190 255 214 / 45%),
    inset 0 0 0 5px rgb(0 60 25 / 35%),
    0 0 1.4rem rgb(0 168 72 / 55%),
    0 0 3.5rem rgb(0 168 72 / 30%),
    0 0.4rem 1.1rem rgb(18 30 42 / 25%);
}

.job-sign__pictogram {
  flex: none;
  width: clamp(3.6rem, 6.5vw, 4.8rem);
}

.job-sign__arrow {
  flex: none;
  width: clamp(1.7rem, 2.8vw, 2.2rem);
  margin-left: auto;
}

.job-sign__panel h3 {
  min-width: 0;
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  hyphens: auto;
  overflow-wrap: break-word;
  text-shadow: 0 0 0.9rem rgb(255 255 255 / 35%);
  text-wrap: balance;
}

@media (max-width: 34rem) {
  .job-sign__pictogram {
    width: 3rem;
  }

  .job-sign__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .job-sign__panel {
    animation: notlicht-anlauf 1.4s steps(1, end) 1 both;
  }

  /* Leicht versetzt, damit nie alle Schilder gleichzeitig blitzen. */
  .job:nth-child(2) .job-sign__panel { animation-delay: 0.18s; }
  .job:nth-child(3) .job-sign__panel { animation-delay: 0.36s; }
  .job:nth-child(4) .job-sign__panel { animation-delay: 0.54s; }
}

@keyframes notlicht-anlauf {
  0%, 18% { opacity: 0.12; }
  22%, 30% { opacity: 1; }
  34%, 52% { opacity: 0.18; }
  56%, 68% { opacity: 1; }
  72%, 80% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Die Anzeigen darunter. */
.job-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.job {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgb(0 72 153 / 18%);
  background: var(--color-white);
  scroll-margin-top: 6rem;
}

.job__header .catalog-eyebrow {
  margin-top: 1.1rem;
}

.job__intro {
  max-width: 62ch;
  margin: 0.6rem 0 0;
  color: rgb(17 24 32 / 80%);
  line-height: 1.55;
}

.job__sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgb(0 72 153 / 14%);
}

.job__section {
  min-width: 0;
}

.job__section h4 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 1rem;
}

.job__section h4 svg {
  flex: none;
  width: 1.2rem;
}

.job__section p {
  margin: 0.4rem 0 0;
  color: rgb(17 24 32 / 80%);
  line-height: 1.55;
}

.job-checklist {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.job-checklist li {
  display: flex;
  gap: 0.55rem;
  min-width: 0;
  color: rgb(17 24 32 / 80%);
  line-height: 1.5;
}

.job-checklist svg {
  flex: none;
  width: 1.05rem;
  margin-top: 0.2rem;
  color: var(--color-blue);
}

.job__closing {
  max-width: 62ch;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  color: rgb(17 24 32 / 80%);
  line-height: 1.55;
}

.job__apply {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem clamp(1.25rem, 2.5vw, 2rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid rgb(0 72 153 / 14%);
}

.job__apply-hint {
  margin: 0;
  color: #5b6570;
  font-size: 0.9rem;
  font-weight: 600;
}

.job__contact {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 0 auto;
  color: #5b6570;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: right;
}

.job__contact a {
  display: inline-block;
  margin-block: -0.75rem;
  padding-block: 0.75rem;
  color: var(--color-blue);
  font-weight: 600;
  text-underline-offset: 0.16em;
}

.job-privacy {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  color: #5b6570;
  font-size: 0.9rem;
}

.job-privacy a {
  display: inline-block;
  margin-block: -0.75rem;
  padding-block: 0.75rem;
  color: inherit;
  text-underline-offset: 0.16em;
}

.job-privacy a:hover {
  color: var(--color-blue);
}

@media (max-width: 64rem) {
  .job__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .career-locations,
  .job-cards,
  .job__sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .job__contact {
    margin-left: 0;
    text-align: left;
  }
}

.company-documents,
.company-locations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.company-document,
.company-location {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgb(0 72 153 / 18%);
  background: var(--color-white);
}

.company-document h3,
.company-location h3 {
  margin: 0.3rem 0 0.6rem;
  color: var(--color-ink);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.2;
}

.company-document p,
.company-location p {
  margin: 0.35rem 0 0;
  color: rgb(17 24 32 / 80%);
  line-height: 1.55;
}

.company-document .button {
  margin-top: 1.1rem;
}

.company-document--with-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.company-document--with-cover > div {
  min-width: 0;
}

@media (min-width: 30rem) {
  .company-document--with-cover {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.company-document__cover {
  width: 8.15rem;
  height: auto;
  border: 1px solid rgb(0 72 153 / 14%);
}

.company-feature__media {
  margin: 0 0 1rem;
}

.company-feature__media img {
  display: block;
  width: 100%;
  max-width: 38rem;
  height: auto;
}

.company-feature__media figcaption {
  margin-top: 0.4rem;
  color: rgb(17 24 32 / 72%);
  font-size: 0.78rem;
}

.company-location dl {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0 0;
}

.company-location dl > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
}

.company-location dt {
  color: rgb(17 24 32 / 60%);
  font-weight: 650;
}

.company-location dd {
  margin: 0;
}

.company-legal {
  max-width: 52rem;
}

.company-legal h2:not(.visually-hidden) {
  margin: 0 0 1rem;
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}

.company-legal h3 {
  margin: 2rem 0 0.5rem;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.company-legal p {
  margin: 0.5rem 0 0;
  color: rgb(17 24 32 / 80%);
  line-height: 1.6;
}

.company-legal a {
  color: var(--color-blue);
  overflow-wrap: anywhere;
}

.catalog-line-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 13rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgb(0 72 153 / 14%);
  color: var(--color-ink);
  background: var(--color-white);
  box-shadow: 0 0.5rem 1.5rem rgb(3 19 36 / 5%);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.catalog-line-card:hover,
.catalog-line-card:focus-visible {
  border-color: var(--color-blue);
  box-shadow: 0 0.9rem 2rem rgb(3 19 36 / 10%);
  transform: translateY(-0.15rem);
}

.catalog-line-groups {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  min-width: 0;
}

.catalog-line-group__title {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line, #dfe4e8);
  color: var(--color-blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.catalog-line-card__group,
.catalog-card__line {
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.catalog-line-card h4 {
  margin: 0.65rem 0 0;
  font-size: clamp(1.25rem, 1.55vw, 1.55rem);
  hyphens: auto;
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: normal;
}

.catalog-line-card p {
  margin: 0.8rem 0 1.25rem;
  color: rgb(17 24 32 / 70%);
  line-height: 1.45;
}

.catalog-line-card__count {
  margin-top: auto;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-weight: 700;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
  border: 1px solid rgb(0 72 153 / 14%);
  color: var(--color-ink);
  background: var(--color-white);
  box-shadow: 0 0.45rem 1.4rem rgb(3 19 36 / 6%);
  text-decoration: none;
  content-visibility: visible;
  contain-intrinsic-size: auto 31rem;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.catalog-card[href]:hover,
.catalog-card[href]:focus-visible {
  border-color: var(--color-blue);
  box-shadow: 0 0.85rem 2rem rgb(3 19 36 / 11%);
  transform: translateY(-0.15rem);
}


/* Das picture-Element enthält neben dem Bild auch source-Elemente. Sie sind nicht
   display:none, belegen im Grid also eigene Zeilen und drücken das Bild nach
   unten – genau der Versatz, der in den Kacheln als "nicht zentriert" auffiel.
   Alle Kinder teilen sich deshalb dieselbe Zelle. */
.catalog-picture > *,
.product-gallery__slide > picture > * {
  grid-area: 1 / 1;
}

/* Jedes Motiv bekommt dieselbe optische Fläche statt derselben Bounding-Box –
   die Prozentwerte liefert pictureFootprint() je Bild. object-fit: contain
   bleibt die Sicherung: Beschnitten wird nie, auch bei abweichendem Rahmen. */
.catalog-picture {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f3f4;
}

.catalog-picture img {
  display: block;
  width: var(--motiv-breite, 100%);
  height: var(--motiv-hoehe, 100%);
  object-fit: contain;
}

.catalog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
}

.catalog-card__line {
  margin: 0;
}

.catalog-card h2,
.catalog-card h3 {
  margin: 0.55rem 0 0;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.catalog-card__meta {
  display: grid;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.15rem;
}

.catalog-card__documents {
  color: rgb(17 24 32 / 62%);
  font-size: 0.78rem;
}

.catalog-card__document-links {
  display: grid;
  gap: 0.45rem;
}

.catalog-card__document-link {
  align-items: center;
  color: var(--color-blue);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
}

.product-summary__description {
  margin: 1rem 0 0;
  color: rgb(17 24 32 / 78%);
  line-height: 1.6;
}

.catalog-card__action {
  color: var(--color-blue);
  font-family: var(--font-display);
  font-weight: 700;
}

.catalog-card__consultation-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2.75rem;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-weight: 700;
}

.product-detail__breadcrumbs {
  border-bottom: 1px solid rgb(0 72 153 / 12%);
}

.product-detail__breadcrumbs .catalog-breadcrumbs ol {
  padding-block: 0.6rem;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: clamp(1.5rem, 4vw, 3.5rem) 0;
}

.product-variant-switcher {
  min-width: 0;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.product-variant-switcher__list {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0.5rem 0.5rem 0.75rem;
  list-style: none;
}

.product-variant-switcher__list > li {
  flex: 0 0 11rem;
  min-width: 0;
}

.product-variant-switcher__card {
  display: grid;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(0 72 153 / 18%);
  color: var(--color-ink);
  background: var(--color-white);
  text-align: left;
  text-decoration: none;
}

.product-variant-switcher__card .catalog-picture {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  min-width: 0;
  background: #f1f3f4;
}

.product-variant-switcher__card .catalog-picture img {
  display: block;
  width: var(--motiv-breite, 100%);
  height: var(--motiv-hoehe, 100%);
  object-fit: contain;
}

.product-variant-switcher__body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.7rem 0.8rem 0.8rem;
}

.product-variant-switcher__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.product-variant-switcher__action {
  color: var(--color-blue);
  font-size: 0.75rem;
  font-weight: 700;
}

.product-variant-switcher__card--current {
  border-color: var(--color-yellow);
  box-shadow: inset 0 0 0 2px var(--color-yellow);
  background: color-mix(in srgb, var(--color-yellow) 14%, var(--color-white));
}

.product-gallery,
.product-summary,
.product-detail__section {
  min-width: 0;
}

.product-gallery {
  align-self: start;
}

.product-gallery__stage {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(0 72 153 / 12%);
  background: #f1f3f4;
}

.product-gallery__slide {
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  aspect-ratio: 4 / 3;
  max-height: 22rem;
  min-width: 0;
  margin: 0;
  /* Deckelt max-height die 4:3-Kachel, wird sie schmaler als die Bühne.
     Ein Grid-Element mit Seitenverhältnis richtet sich bei "normal" am
     Start aus – ohne Zentrierung klebt der ganze Slide dann links. */
  place-self: center;
}

.product-gallery__slide picture {
  display: grid;
  width: var(--motiv-breite, 100%);
  height: var(--motiv-hoehe, 100%);
}

.product-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-gallery__thumbnails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.product-gallery__thumbnails button {
  position: relative;
  min-width: 0;
  min-height: 4.5rem;
  padding: 0.6rem;
  overflow: hidden;
  border: 1px solid rgb(0 72 153 / 22%);
  color: var(--color-blue);
  background:
    linear-gradient(rgb(255 255 255 / 74%), rgb(255 255 255 / 74%)),
    var(--product-thumbnail) center / contain no-repeat,
    var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
}

.product-gallery__thumbnails button[aria-pressed='true'] {
  border-color: var(--color-blue);
  box-shadow: inset 0 0 0 0.12rem var(--color-blue);
}

.product-gallery__thumbnails button span {
  position: absolute;
  right: 0.35rem;
  bottom: 0.3rem;
  padding: 0.12rem 0.28rem;
  color: var(--color-white);
  background: rgb(0 72 153 / 88%);
  font-size: 0.7rem;
}

.product-gallery__thumbnails button:focus-visible,
.product-downloads a:focus-visible,
.product-relation-card:focus-visible,
.product-variant-switcher__card:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.product-summary {
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* Kennwert-Plaketten über dem Produktnamen. Eigene Handschrift statt der
   Vorlage: Pfrommer-Gelb, quadratische Ecken wie überall auf der Seite, und
   die kleine Versalzeile über dem Wert wie bei den Eyebrows. */
.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.8rem 0 1rem;
  padding: 0;
  list-style: none;
}

/* Quadratische Kacheln wie beim Hersteller: alle gleich groß, nur der Wert.
   Die Erklärung erscheint als Tooltip und steht für Screenreader davor. */
.product-badges li {
  display: grid;
  place-content: center;
  box-sizing: border-box;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.2rem;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 750;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: help;
}

/* Lange Werte („ballwurfsicher“, „4 × 3,5 W LED“) rücken eine Stufe kleiner,
   statt die Kachel zu sprengen. */
.product-badges li[data-laenge='kurz'] { font-size: 0.95rem; }
.product-badges li[data-laenge='mittel'] { font-size: 0.8rem; }
.product-badges li[data-laenge='lang'] { font-size: 0.62rem; }

.product-badge__symbol {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--color-ink);
}

.catalog-eyebrow a {
  /* Innenabstand nach oben und unten zieht die Trefferfläche auf die 44 px,
     die eine Fingerspitze braucht; der negative Außenabstand hebt ihn für das
     Layout wieder auf, damit die Zeile nicht auseinanderrückt. */
  display: inline-block;
  padding-block: 0.9rem;
  margin-block: -0.9rem;
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}

.product-summary h1 {
  max-width: 26ch;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.product-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.75rem;
  align-items: center;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.product-summary__actions .button {
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
}

.product-summary__actions .text-link {
  margin-top: 0;
}

.product-detail__section {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgb(0 72 153 / 13%);
}

.product-detail__section-heading {
  max-width: 48rem;
  margin-bottom: clamp(0.9rem, 2vw, 1.4rem);
}

.product-detail__section-heading h2,
.inquiry-cta h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.product-technical-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 5rem);
}

.product-technical-zone > * {
  min-width: 0;
}

.product-technical-zone .product-detail__section-heading {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.product-technical-zone .product-detail__section-heading h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.product-specifications dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid rgb(0 72 153 / 18%);
}

.product-specifications dl > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 3rem);
  min-width: 0;
  padding-block: 1rem;
  border-bottom: 1px solid rgb(0 72 153 / 12%);
}

.product-specifications dt {
  color: rgb(17 24 32 / 65%);
}

.product-specifications dd {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.product-downloads__groups {
  border-top: 1px solid rgb(0 72 153 / 18%);
}

.product-download-group {
  border-bottom: 1px solid rgb(0 72 153 / 15%);
  interpolate-size: allow-keywords;
}

.product-download-group::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 280ms ease, content-visibility 280ms allow-discrete;
}

.product-download-group[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .product-download-group::details-content {
    transition: none;
  }
}

.product-download-group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.25rem;
  color: rgb(17 24 32 / 78%);
  cursor: pointer;
  list-style: none;
}

.product-download-group summary::-webkit-details-marker {
  display: none;
}

.product-download-group__label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.product-download-group summary small {
  /* 66 %: darunter reißt der Kontrast auf dem hellen Abschnittsgrund die
     4,5:1 aus WCAG AA. */
  color: rgb(17 24 32 / 66%);
  font-size: 0.75rem;
  white-space: nowrap;
}

.product-download-group__icon {
  position: relative;
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  color: rgb(17 24 32 / 55%);
}

.product-download-group__icon::before,
.product-download-group__icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  content: '';
  transform: translateY(-50%);
}

.product-download-group__icon::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 160ms ease;
}

.product-download-group[open] .product-download-group__icon::after {
  transform: translateY(-50%) rotate(90deg) scaleX(0);
}

.product-download-group summary:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
}

.product-downloads__list,
.product-relations__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-downloads__list {
  padding: 0 0 0.8rem;
}

.product-downloads__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 1rem;
  align-items: center;
  min-width: 0;
  min-height: 4.75rem;
  padding: 0.9rem 0.85rem;
  border-top: 1px solid rgb(0 72 153 / 10%);
  color: var(--color-ink);
  background: rgb(255 255 255 / 45%);
  text-decoration: none;
}

.product-download__title {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.product-download__meta {
  display: flex;
  grid-column: 1;
  gap: 0.4rem;
  color: rgb(17 24 32 / 62%);
  font-size: 0.78rem;
}

.product-download__extension {
  color: var(--color-blue);
  font-weight: 750;
}

.product-download__action {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-weight: 700;
}

.product-relations__list {
  gap: 0.9rem;
}

.product-relation-card {
  display: grid;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(0 72 153 / 16%);
  color: var(--color-ink);
  background: var(--color-white);
  text-decoration: none;
}

.product-relation-card .catalog-picture {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  background: #f1f3f4;
}

.product-relation-card .catalog-picture img {
  display: block;
  width: var(--motiv-breite, 100%);
  height: var(--motiv-hoehe, 100%);
  object-fit: contain;
}

.product-relation-card__body {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  min-width: 0;
  padding: 0.9rem 1rem 1.05rem;
}

.product-relation-card__body small {
  color: var(--color-blue);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.product-relation-card__body strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.inquiry-cta {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  color: var(--color-white);
  background: var(--color-ink);
}

.inquiry-cta .catalog-eyebrow,
.inquiry-cta h2 {
  color: var(--color-white);
}

.inquiry-cta p:last-child {
  max-width: 42rem;
  margin: 1rem 0 0;
  color: rgb(255 255 255 / 74%);
  line-height: 1.55;
}

.inquiry-cta .button {
  align-self: start;
}

[hidden] {
  display: none !important;
}

@media (min-width: 42rem) {
  .catalog-line-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .product-variant-switcher {
    overflow: visible;
  }

  .product-variant-switcher__list {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  .product-variant-switcher__list > li {
    min-width: 0;
  }
}

@media (min-width: 30rem) {
  .catalog-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .catalog-family-overview {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .catalog-family-preview {
    display: block;
  }
}

@media (min-width: 75rem) {
  .catalog-family-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .catalog-line-grid,
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-detail {
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }

  .product-summary {
    align-self: center;
    padding-block: 0;
  }

  .product-detail__section {
    grid-column: 1 / -1;
  }

  .product-variant-switcher {
    grid-column: 1 / -1;
  }

  .product-technical-zone:not(.product-technical-zone--specifications-only):not(.product-technical-zone--downloads-only) {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  }

  .product-technical-zone--specifications-only,
  .product-technical-zone--downloads-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-relations__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .inquiry-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 80rem) {
  .catalog-line-grid,
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .company-list--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .catalog-filter-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .catalog-explorer--sidebar {
    grid-template-columns: 19rem minmax(0, 1fr);
  }

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

@media (min-width: 80rem) {
  .catalog-explorer--sidebar .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .catalog-page__main {
    padding-top: 4.75rem;
  }

  .catalog-page .site-header[data-appearance='solid'] {
    background: rgb(255 255 255 / 94%);
    backdrop-filter: none;
  }

  body.catalog-filter-open {
    overflow: hidden;
  }

  .catalog-mobile-filter-bar {
    display: flex;
    position: sticky;
    z-index: 20;
    top: 4.75rem;
    margin-bottom: 1rem;
    padding-block: 0.65rem;
    background: var(--color-white);
  }

  .catalog-mobile-filter-bar button {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    border: 0;
    color: var(--color-white);
    background: var(--color-blue);
    font: 700 1rem/1.1 var(--font-display);
    cursor: pointer;
  }

  .catalog-filter-shell {
    display: block;
    position: fixed;
    z-index: 120;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .catalog-filter-shell.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .catalog-filter-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    opacity: 0;
    background: rgb(3 19 36 / 62%);
    transition: opacity 180ms ease;
  }

  .catalog-filter-shell.is-open .catalog-filter-backdrop {
    opacity: 1;
  }

  .catalog-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    position: absolute;
    inset: 0 auto 0 0;
    width: min(92vw, 27rem);
    max-width: 100%;
    gap: 0;
    background: var(--color-white);
    box-shadow: 1rem 0 2.5rem rgb(3 19 36 / 24%);
    transform: translateX(-102%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .catalog-filter-shell.is-open .catalog-sidebar {
    transform: none;
  }

  .catalog-sidebar__mobile-header,
  .catalog-sidebar__mobile-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
    border-bottom: 1px solid rgb(0 72 153 / 18%);
  }

  .catalog-sidebar__mobile-header {
    justify-content: space-between;
  }

  .catalog-sidebar__mobile-header strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
  }

  .catalog-sidebar__mobile-header button {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(0 72 153 / 28%);
    background: var(--color-white);
    cursor: pointer;
  }

  .catalog-sidebar__mobile-header button::before,
  .catalog-sidebar__mobile-header button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15rem;
    height: 2px;
    background: var(--color-blue);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .catalog-sidebar__mobile-header button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .catalog-sidebar__groups {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    min-height: 0;
    padding: 0.75rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .catalog-sidebar__mobile-footer {
    padding: 0.85rem 1rem max(0.85rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgb(0 72 153 / 18%);
    border-bottom: 0;
  }

  .catalog-sidebar__mobile-footer button {
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    background: var(--color-white);
    font: 700 0.9rem/1.1 var(--font-display);
    cursor: pointer;
  }

  .catalog-sidebar__mobile-footer button:last-child {
    flex: 1;
    color: var(--color-white);
    background: var(--color-blue);
  }

  .catalog-sidebar__mobile-header button:focus-visible,
  .catalog-sidebar__mobile-footer button:focus-visible,
  .catalog-mobile-filter-bar button:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 2px;
  }
}

@media (max-width: 41.999rem) {
  .catalog-section__heading--products {
    display: block;
  }

  .product-specifications dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .product-summary__actions .button,
  .inquiry-cta .button {
    width: 100%;
  }

  .product-summary dd a {
    display: inline-flex;
    align-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .product-detail__breadcrumbs .catalog-breadcrumbs a {
    justify-content: center;
    min-width: 2.75rem;
  }

  .product-downloads__list a {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-download__action {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 47.999rem) {
  .catalog-line-highlights__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-line-download,
  .catalog-line-consulting {
    display: grid;
    align-items: start;
  }

  .catalog-line-download > .button,
  .catalog-line-consulting > .button {
    width: 100%;
  }

  .catalog-controls__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-results-bar {
    align-items: flex-start;
  }

  .catalog-result-count {
    padding-top: 0.65rem;
  }

  .catalog-reset {
    margin-inline-start: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .catalog-page,
  .catalog-page::before,
  .catalog-page::after,
  .catalog-page *,
  .catalog-page *::before,
  .catalog-page *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* Redaktionelle Abschnitte der Linienseite (DALI-Schaubilder, Visualisierung …) */
.line-sections {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  min-width: 0;
}

.line-section h3 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.2;
}

.line-section__text {
  display: grid;
  gap: 0.6rem;
  max-width: 62ch;
}

.line-section__text p {
  margin: 0;
  color: rgb(17 24 32 / 78%);
  line-height: 1.6;
}

.line-section__images {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  align-items: flex-start;
}

/* Die Schaubilder sind teils nur 450 px breit – nie über ihre echte Größe
   hinaus skalieren, sonst werden sie unscharf und wirken riesig. */
.line-section__images img {
  width: auto;
  max-width: min(100%, 30rem);
  height: auto;
  max-height: 26rem;
  border: 1px solid var(--line, #dfe4e8);
  border-radius: 10px;
  background: var(--color-white, #fff);
  object-fit: contain;
}

.line-section__documents {
  display: grid;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  list-style: none;
}

.line-section__documents a {
  display: block;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line, #dfe4e8);
  border-radius: 8px;
  background: var(--color-white, #fff);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.catalog-category-overview {
  display: none;
}

@media (max-width: 64rem) {
  .catalog-category-overview {
    display: block;
    padding-block: 2rem 2.25rem;
    border-bottom: 1px solid rgb(0 72 153 / 15%);
    background: var(--color-paper);
  }

  .catalog-category-overview h2 {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.1;
  }

  .catalog-category-overview__groups {
    border-top: 1px solid rgb(0 72 153 / 22%);
  }

  .catalog-category-overview details {
    border-bottom: 1px solid rgb(0 72 153 / 22%);
  }

  .catalog-category-overview summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding-block: 0.75rem;
    color: var(--color-blue);
    font: 700 1.05rem/1.25 var(--font-display);
    cursor: pointer;
    list-style: none;
  }

  .catalog-category-overview summary::-webkit-details-marker {
    display: none;
  }

  .catalog-category-overview summary::after {
    content: '';
    flex: 0 0 0.55rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
  }

  .catalog-category-overview details[open] summary::after {
    transform: translateY(0.15rem) rotate(225deg);
  }

  .catalog-category-overview summary:focus-visible,
  .catalog-category-overview a:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 3px;
  }

  .catalog-category-overview ul {
    margin: 0;
    padding: 0 0 0.75rem;
    list-style: none;
  }

  .catalog-category-overview a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.65rem 0.25rem;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration-color: rgb(0 72 153 / 45%);
    text-underline-offset: 0.2em;
  }

  .catalog-category-overview li + li a {
    border-top: 1px solid rgb(0 72 153 / 10%);
  }
}