/*
 * Leopold Alarm- und Sicherheitstechnik: Basis und Komponenten
 * Praefix ds-, Schreibweise BEM (block__element--modifikator), Zustaende is-*.
 * Mobil zuerst. Breakpoints: 36em (576), 48em (768), 64em (1024), 80em (1280).
 * Setzt tokens.css voraus.
 */

/* 1. Basis */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ds-kopf-h-klein) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ds-flaeche);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-w-normal);
  line-height: var(--ds-lh-text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* In WordPress gelten die Resets nur im neuen Markup. Beaver-Builder-Altinhalte (.ds-bb), der
   Borlabs-Dialog und die Admin-Leiste behalten ihre Regeln. Das :not(:where(...)) hält die
   Spezifität beim Element (0,0,1), damit die Resets die gleich starken Regeln aus Page Builder
   Framework (h1 bis h6, p, ul mit margin-bottom 20px) schlagen, Komponentenklassen aber nicht. */
img:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
svg:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
video:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) { display: block; max-width: 100%; }

img { height: auto; }

h1:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
h2:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
h3:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
h4:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
p:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
ul:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
ol:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
dl:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
dd:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
figure:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)),
blockquote:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) { margin: 0; }

blockquote:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) { padding: 0; border: 0; font-style: normal; }

:where(ul[class], ol[class]):not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) { padding: 0; list-style: none; }

/* PBF: ul ul { margin: 5px 0 } und ul ul li { list-style: outside } (Spezifität 0,0,2 und 0,0,3) */
:is(ul, ol) :is(ul, ol):not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) { margin: 0; }
:is(ul, ol)[class]:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) > li { list-style: none; }

/* PBF und die Customizer-Inline-CSS setzen Helvetica bzw. Open Sans auf Überschriften und Felder */
body, button, input, optgroup, select, textarea, h1, h2, h3, h4, h5, h6 { font-family: var(--ds-font); }

h1, h2, h3, h4 {
  color: var(--ds-ueberschrift);
  font-weight: var(--ds-w-fett);
  line-height: var(--ds-lh-titel);
  letter-spacing: var(--ds-track-titel);
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}

h1 { font-size: var(--ds-h1); line-height: var(--ds-lh-eng); }
h2 { font-size: var(--ds-h2); line-height: 1.12; }
h3 { font-size: var(--ds-h3); }
h4 { font-size: var(--ds-h4); }

p, li, dd { text-wrap: pretty; }

a { color: var(--ds-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
/* PBF nimmt Links global die Unterstreichung, im neuen Markup gilt wieder der Browser-Standard */
a:not(:where(.ds-bb *, .brlbs-cmpnt-container *, #BorlabsCookieBox *, #wpadminbar *)) { text-decoration-line: underline; }
a:hover { color: var(--ds-link-hover); text-decoration-thickness: 2px; }

strong, b { font-weight: var(--ds-w-fett); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ds-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.ds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ds-sprung {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--ds-z-sprung);
  padding: 0.75rem 1.25rem;
  background: var(--ds-navy);
  color: var(--ds-weiss);
  font-weight: var(--ds-w-fett);
  border-radius: var(--ds-r-m);
  transform: translateY(-200%);
}
.ds-sprung:focus { transform: none; color: var(--ds-weiss); }

.ds-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.ds-scroll-gesperrt,
html.ds-scroll-gesperrt body { overflow: hidden; }

/* 2. Layout */

.ds-container {
  width: 100%;
  max-width: calc(var(--ds-breite) + 2 * var(--ds-rand));
  margin-inline: auto;
  padding-inline: var(--ds-rand);
}

.ds-container--schmal { max-width: calc(var(--ds-breite-schmal) + 2 * var(--ds-rand)); }

.ds-abschnitt { padding-block: var(--ds-abschnitt); }
.ds-abschnitt--eng { padding-block: var(--ds-abschnitt-klein); }
.ds-abschnitt--alt { background: var(--ds-flaeche-alt); }
.ds-abschnitt--navy { background: var(--ds-navy); color: var(--ds-text); }
.ds-abschnitt + .ds-abschnitt--fortsetzung { padding-top: 0; }

.ds-kopfzeile {
  display: grid;
  gap: var(--ds-s-4);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.ds-kopfzeile p { color: var(--ds-text-leise); font-size: var(--ds-text-lg); line-height: 1.5; }

.ds-kopfzeile--mit-link { max-width: none; }

@media (min-width: 48em) {
  .ds-kopfzeile--mit-link {
    grid-template-columns: minmax(0, 46rem) auto;
    justify-content: space-between;
    align-items: end;
  }
  .ds-kopfzeile--mit-link > :last-child { justify-self: end; }
}

.ds-lead { font-size: var(--ds-text-lg); line-height: 1.5; color: var(--ds-text-leise); }
.ds-klein { font-size: var(--ds-text-sm); }
.ds-nowrap { white-space: nowrap; }
.ds-mt-4 { margin-top: var(--ds-s-4); }
.ds-mt-6 { margin-top: var(--ds-s-6); }
.ds-mt-8 { margin-top: var(--ds-s-8); }

/* 3. Buttons und Links */

.ds-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.7em 1.35em;
  border: 2px solid transparent;
  border-radius: var(--ds-r-m);
  font-family: var(--ds-font);
  font-size: 1.0625rem;
  font-weight: var(--ds-w-fett);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--ds-t-2) var(--ds-ease), color var(--ds-t-2) var(--ds-ease), border-color var(--ds-t-2) var(--ds-ease);
}
.ds-knopf:hover { text-decoration: none; }
.ds-knopf .ds-icon { width: 1.2em; height: 1.2em; stroke-width: 2; }

.ds-knopf--rot { background: var(--ds-rot); color: var(--ds-weiss); }
.ds-knopf--rot:hover { background: var(--ds-rot-700); color: var(--ds-weiss); }

.ds-knopf--navy { background: var(--ds-navy); color: var(--ds-weiss); }
.ds-knopf--navy:hover { background: var(--ds-navy-800); color: var(--ds-weiss); }

.ds-knopf--umriss { background: transparent; border-color: currentColor; color: var(--ds-navy); }
.ds-knopf--umriss:hover { background: var(--ds-navy-50); color: var(--ds-navy); }
.ds-dunkel .ds-knopf--umriss { color: var(--ds-weiss); border-color: rgba(255, 255, 255, 0.7); }
.ds-dunkel .ds-knopf--umriss:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--ds-weiss); color: var(--ds-weiss); }

.ds-knopf--weiss { background: var(--ds-weiss); color: var(--ds-navy); }
.ds-knopf--weiss:hover { background: var(--ds-navy-100); color: var(--ds-navy); }

.ds-knopf--klein { min-height: var(--ds-tap); padding: 0.5em 1.1em; font-size: 1rem; }

.ds-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--ds-s-3); }

@media (max-width: 35.99em) {
  .ds-knopfreihe > .ds-knopf { flex: 1 1 100%; }
}

.ds-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: var(--ds-tap);
  font-weight: var(--ds-w-fett);
  color: var(--ds-link);
  text-decoration: underline;
  text-decoration-color: var(--ds-rot);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.ds-textlink:hover { color: var(--ds-link-hover); text-decoration-thickness: 3px; }
.ds-textlink .ds-icon { width: 1.1em; height: 1.1em; stroke-width: 2.25; transition: transform var(--ds-t-2) var(--ds-ease); }
.ds-textlink:hover .ds-icon { transform: translateX(3px); }

/* 4. Kopf und Navigation */

.ds-kopf {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-kopf);
  background: var(--ds-weiss);
  transition: transform var(--ds-t-3) var(--ds-ease), box-shadow var(--ds-t-3) var(--ds-ease);
}

.ds-kopf.is-geschrumpft { box-shadow: var(--ds-schatten-kopf); }

.ds-kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--ds-s-3);
  height: var(--ds-kopf-h);
  max-width: calc(var(--ds-breite-weit) + 2 * var(--ds-rand));
  margin-inline: auto;
  padding-inline: var(--ds-rand);
  transition: transform var(--ds-t-3) var(--ds-ease);
}

.ds-kopf__logo {
  display: block;
  flex: none;
  width: var(--ds-logo-b);
  border-radius: var(--ds-r-s);
  transform-origin: left center;
  transition: transform var(--ds-t-3) var(--ds-ease);
}
.ds-kopf__logo img { width: 100%; }

.ds-kopf__aktionen {
  display: flex;
  align-items: center;
  gap: var(--ds-s-2);
  margin-left: auto;
}

.ds-kopf__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: var(--ds-tap);
  min-height: var(--ds-tap);
  padding: 0 0.6rem;
  border-radius: var(--ds-r-m);
  color: var(--ds-navy);
  font-weight: var(--ds-w-fett);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.ds-kopf__tel:hover { background: var(--ds-navy-50); color: var(--ds-navy); }
.ds-kopf__tel .ds-icon { width: 1.35rem; height: 1.35rem; color: var(--ds-rot); stroke-width: 2; }
.ds-kopf__tel-nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ds-kopf__kontakt { display: none; }

.ds-kopf__menue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: var(--ds-tap);
  min-height: var(--ds-tap);
  padding: 0 0.7rem;
  border: 1.5px solid var(--ds-linie);
  border-radius: var(--ds-r-m);
  background: var(--ds-weiss);
  color: var(--ds-navy);
  font-weight: var(--ds-w-fett);
  cursor: pointer;
}
.ds-kopf__menue .ds-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2; }

/* Navigation: mobil als Vollbild-Panel */
.ds-nav {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-mobilnav);
  display: flex;
  flex-direction: column;
  background: var(--ds-weiss);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--ds-t-3) var(--ds-ease), visibility 0s linear var(--ds-t-3);
}

.ds-nav.is-offen {
  visibility: visible;
  transform: none;
  transition: transform var(--ds-t-3) var(--ds-ease), visibility 0s linear 0s;
}

.ds-nav__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s-4);
  min-height: var(--ds-kopf-h);
  padding-inline: var(--ds-rand);
  border-bottom: 1px solid var(--ds-linie);
}
.ds-nav__kopf img { width: var(--ds-logo-b); }

.ds-nav__zu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: var(--ds-tap);
  min-height: var(--ds-tap);
  padding: 0 0.7rem;
  border: 1.5px solid var(--ds-linie);
  border-radius: var(--ds-r-m);
  background: var(--ds-weiss);
  color: var(--ds-navy);
  font-weight: var(--ds-w-fett);
  cursor: pointer;
}
.ds-nav__zu .ds-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2; }

.ds-nav__koerper {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ds-s-2) var(--ds-rand) var(--ds-s-8);
}

.ds-nav__punkt { border-bottom: 1px solid var(--ds-linie); }

.ds-nav__link,
.ds-nav__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s-2);
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  color: var(--ds-navy);
  font-family: var(--ds-font);
  font-size: 1.25rem;
  font-weight: var(--ds-w-fett);
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
  .ds-nav__link:hover,
  .ds-nav__knopf:hover { color: var(--ds-rot-700); }
}

.ds-nav__pfeil {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2;
  transition: transform var(--ds-t-2) var(--ds-ease);
}
.ds-nav__knopf[aria-expanded="true"] .ds-nav__pfeil { transform: rotate(180deg); }

.ds-nav__info {
  display: flex;
  align-items: center;
  gap: var(--ds-s-4);
  margin-top: var(--ds-s-8);
  color: var(--ds-schiefer);
  font-size: var(--ds-text-sm);
  line-height: 1.5;
}
.ds-nav__info .ds-siegel { --siegel-b: 4.5rem; box-shadow: none; }
.ds-nav__info strong { display: block; color: var(--ds-navy); }

.ds-nav__fuss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-s-3);
  padding: var(--ds-s-3) var(--ds-rand) calc(var(--ds-s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ds-linie);
  background: var(--ds-weiss);
  box-shadow: 0 -8px 20px -14px rgba(0, 31, 63, 0.35);
}
.ds-nav__fuss .ds-knopf { padding-inline: 0.75rem; }

/* Panels (Mega-Menue und Untermenue), mobil als Akkordeon */
.ds-mega:not([hidden]),
.ds-unter:not([hidden]) { animation: ds-einblenden var(--ds-t-2) var(--ds-ease); }

@keyframes ds-einblenden {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.ds-mega__innen { display: grid; gap: var(--ds-s-4); padding: 0 0 var(--ds-s-5); }

.ds-mega__titel {
  margin: var(--ds-s-2) 0 var(--ds-s-1);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-w-fett);
  color: var(--ds-schiefer);
}
.ds-mega__titel a { display: inline-flex; align-items: center; min-height: var(--ds-tap); color: inherit; text-decoration: none; }
.ds-mega__titel a:hover { color: var(--ds-rot-700); text-decoration: underline; }

.ds-mega__link,
.ds-unter__link {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: var(--ds-tap);
  padding: 0.5rem 0.5rem;
  border-radius: var(--ds-r-m);
  color: var(--ds-tinte);
  text-decoration: none;
}
.ds-mega__link:hover,
.ds-unter__link:hover { background: var(--ds-navy-50); color: var(--ds-tinte); }
.ds-mega__link[aria-current="page"] .ds-mega__name { color: var(--ds-rot-700); }

.ds-mega__icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: var(--ds-r-m);
  background: var(--ds-navy-50);
  color: var(--ds-navy);
  stroke-width: 1.6;
}
.ds-mega__link:hover .ds-mega__icon { background: var(--ds-weiss); color: var(--ds-rot); }

.ds-mega__name { display: block; font-weight: var(--ds-w-fett); color: var(--ds-navy); line-height: 1.3; }
.ds-mega__info { display: none; font-size: var(--ds-text-sm); color: var(--ds-schiefer); line-height: 1.4; }

.ds-mega__teaser { display: none; }

.ds-unter__link { grid-template-columns: minmax(0, 1fr); font-weight: var(--ds-w-fett); color: var(--ds-navy); }
.ds-unter { padding-bottom: var(--ds-s-4); }
.ds-unter ul { margin: 0; padding: 0; list-style: none; }

/* Desktop ab 64em */
@media (min-width: 64em) {
  .ds-kopf.is-geschrumpft { transform: translateY(calc(var(--ds-kopf-h-klein) - var(--ds-kopf-h))); }
  /* Geschrumpft ist der Innenbereich so hoch wie der sichtbare Kopf, der Rest steht als margin-bottom
     (Kopfhöhe bleibt, kein Layoutsprung). Vorher ragte er 10 px unter den Kopf: unsichtbarer Klickstreifen
     und Lücke über dem Mega-Menü, das am Innenbereich hängt (QA Technik M1, QA UX N1). */
  .ds-kopf__innen { transition: transform var(--ds-t-3) var(--ds-ease), height var(--ds-t-3) var(--ds-ease), margin-bottom var(--ds-t-3) var(--ds-ease); }
  .ds-kopf.is-geschrumpft .ds-kopf__innen {
    height: var(--ds-kopf-h-klein);
    margin-bottom: calc(var(--ds-kopf-h) - var(--ds-kopf-h-klein));
    transform: translateY(calc(var(--ds-kopf-h) - var(--ds-kopf-h-klein)));
  }
  .ds-kopf.is-geschrumpft .ds-kopf__logo { transform: scale(0.8); }

  .ds-kopf__innen { gap: var(--ds-s-6); }
  .ds-kopf__menue { display: none; }
  .ds-kopf__kontakt { display: inline-flex; }
  .ds-kopf__aktionen { margin-left: 0; gap: var(--ds-s-3); }

  .ds-nav {
    position: static;
    display: block;
    margin-left: auto;
    background: none;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .ds-nav__kopf,
  .ds-nav__fuss,
  .ds-nav__info { display: none; }
  .ds-mega__titel a { min-height: 0; }
  .ds-nav__koerper { overflow: visible; padding: 0; }

  .ds-nav__liste { display: flex; align-items: center; gap: 0.125rem; }
  .ds-nav__punkt { position: relative; border: 0; }
  .ds-nav__punkt--mega { position: static; }
  .ds-nav__punkt--mobil { display: none; }

  .ds-nav__link,
  .ds-nav__knopf {
    position: relative;
    width: auto;
    min-height: var(--ds-tap);
    padding: 0.5rem 0.8rem;
    border-radius: var(--ds-r-m);
    color: var(--ds-tinte);
    font-size: 1.0625rem;
    font-weight: var(--ds-w-mittel);
    gap: 0.3rem;
  }
  .ds-nav__link::after,
  .ds-nav__knopf::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.3rem;
    height: 2px;
    background: var(--ds-rot);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ds-t-2) var(--ds-ease);
  }
  .ds-nav__link:hover,
  .ds-nav__knopf:hover { color: var(--ds-navy); }
  .ds-nav__link:hover::after,
  .ds-nav__knopf:hover::after,
  .ds-nav__knopf[aria-expanded="true"]::after,
  .ds-nav__link[aria-current="page"]::after,
  .ds-nav__knopf.is-aktiv::after { transform: scaleX(1); }
  .ds-nav__knopf[aria-expanded="true"] { color: var(--ds-navy); }
  .ds-nav__pfeil { width: 1.1rem; height: 1.1rem; }

  /* Mega-Menue */
  .ds-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--ds-z-mega);
    background: var(--ds-weiss);
    border-top: 1px solid var(--ds-linie);
    box-shadow: var(--ds-schatten-3);
  }
  .ds-mega__innen {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(17rem, 1.05fr);
    gap: var(--ds-s-6);
    max-width: calc(var(--ds-breite-weit) + 2 * var(--ds-rand));
    margin-inline: auto;
    padding: var(--ds-s-8) var(--ds-rand) var(--ds-s-10);
  }
  .ds-mega__titel {
    margin: 0 0 var(--ds-s-2);
    padding: 0 0.5rem var(--ds-s-3);
    border-bottom: 1px solid var(--ds-linie);
    font-size: 1.125rem;
    color: var(--ds-navy);
  }
  .ds-mega__liste { display: grid; gap: 0.125rem; }
  .ds-mega__link { align-items: start; padding: 0.6rem 0.5rem; }
  .ds-mega__info { display: block; margin-top: 0.15rem; }

  .ds-mega__teaser {
    display: flex;
    flex-direction: column;
    gap: var(--ds-s-4);
    padding: var(--ds-s-6);
    border-radius: var(--ds-r-l);
    background: var(--ds-navy);
    color: var(--ds-weiss);
  }
  .ds-mega__teaser-kopf { display: flex; align-items: center; gap: var(--ds-s-4); }
  .ds-mega__teaser .ds-siegel { --siegel-b: 5.25rem; box-shadow: 0 0 0 3px var(--ds-weiss); }
  .ds-mega__teaser p { color: var(--ds-navy-200); font-size: var(--ds-text-sm); line-height: 1.5; }
  .ds-mega__teaser strong { display: block; color: var(--ds-weiss); font-size: 1.125rem; line-height: 1.3; }
  .ds-mega__teaser-tel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ds-weiss);
    font-size: 1.375rem;
    font-weight: var(--ds-w-fett);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .ds-mega__teaser-tel:hover { color: var(--ds-navy-200); }
  .ds-mega__teaser-tel .ds-icon { color: var(--ds-weiss); stroke-width: 2; }
  .ds-mega__teaser .ds-knopf { margin-top: auto; }

  /* Untermenue Unternehmen */
  .ds-unter {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: var(--ds-z-mega);
    min-width: 17rem;
    padding: 0.5rem;
    border: 1px solid var(--ds-linie);
    border-radius: var(--ds-r-l);
    background: var(--ds-weiss);
    box-shadow: var(--ds-schatten-3);
  }
  .ds-unter__link { padding: 0.6rem 0.75rem; font-weight: var(--ds-w-mittel); color: var(--ds-tinte); }
  .ds-unter__link:hover { color: var(--ds-navy); }
}

@media (min-width: 64em) and (max-width: 79.99em) {
  .ds-kopf__kontakt { padding-inline: 1rem; }
  .ds-nav__link,
  .ds-nav__knopf { padding-inline: 0.6rem; }
  .ds-nav__link::after,
  .ds-nav__knopf::after { left: 0.6rem; right: 0.6rem; }
}

@media (min-width: 80em) {
  .ds-kopf__tel { padding-inline: 0.75rem; }
  .ds-kopf__tel-nr { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* 5. Siegel 40 Jahre */

.ds-siegel {
  --siegel-b: 8.5rem;
  display: block;
  flex: none;
  width: var(--siegel-b);
  height: var(--siegel-b);
  border-radius: 50%;
  line-height: 0;
  box-shadow: 0 0 0 4px var(--ds-weiss), 0 14px 30px -12px rgba(0, 31, 63, 0.45);
  transition: transform var(--ds-t-3) var(--ds-ease);
}
a.ds-siegel:hover { transform: scale(1.04); }
.ds-siegel svg { width: 100%; height: 100%; }
a.ds-siegel:focus-visible { outline-offset: 7px; border-radius: 50%; }

/* 6. Hero Startseite und Seitenkopf */

.ds-held,
.ds-seitenkopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ds-navy);
  color: var(--ds-text);
}

/* Planraster: feines Gitter wie auf Planpapier */
.ds-held::before,
.ds-seitenkopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 78% 30%, #000 25%, transparent 78%);
}

.ds-held__innen {
  display: grid;
  gap: var(--ds-s-10);
  padding-block: clamp(2.25rem, 1.2rem + 4.5vw, 5.5rem) clamp(3rem, 2rem + 4.5vw, 6.5rem);
  align-items: center;
}

.ds-held__titel {
  max-width: 15ch;
  color: var(--ds-weiss);
  font-size: var(--ds-display);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.ds-held__lead {
  max-width: 34rem;
  margin-top: var(--ds-s-5);
  color: var(--ds-navy-200);
  font-size: var(--ds-text-lg);
  line-height: 1.5;
}

.ds-held__aktionen { margin-top: var(--ds-s-8); }
.ds-held__aktionen .ds-knopf { flex: 1 1 13rem; }

.ds-held__belege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s-2) var(--ds-s-5);
  margin-top: var(--ds-s-8);
  padding-top: var(--ds-s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ds-navy-200);
  font-size: var(--ds-text-sm);
}
.ds-held__belege li { display: flex; align-items: center; gap: 0.45rem; }
.ds-held__belege .ds-icon { width: 1.15rem; height: 1.15rem; color: var(--ds-weiss); stroke-width: 2.25; }

.ds-held__bild { position: relative; margin-inline: -0.25rem; }
.ds-held__bild .ds-szene { width: 100%; }
.ds-held__siegel { position: absolute; top: 0; left: 0; }
.ds-held__siegel .ds-siegel { --siegel-b: 6rem; }

@media (min-width: 36em) {
  .ds-held__aktionen .ds-knopf { flex: 0 1 auto; }
  .ds-held__siegel .ds-siegel { --siegel-b: 7.5rem; }
}

@media (min-width: 36em) and (max-width: 59.99em) {
  .ds-held__bild { width: 100%; max-width: 32rem; margin-inline: auto; }
}

@media (min-width: 60em) {
  .ds-held__innen { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--ds-s-12); }
  .ds-held__bild { margin: 0; }
  .ds-held__siegel { top: 0.5rem; }
  .ds-held__siegel .ds-siegel { --siegel-b: 8.75rem; }
}

/* Seitenkopf fuer Unterseiten */
.ds-seitenkopf__innen {
  display: grid;
  gap: var(--ds-s-8);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  align-items: center;
}
.ds-seitenkopf h1 { color: var(--ds-weiss); max-width: 20ch; margin-top: var(--ds-s-6); }
.ds-seitenkopf__lead { max-width: 38rem; margin-top: var(--ds-s-4); color: var(--ds-navy-200); font-size: var(--ds-text-lg); line-height: 1.5; }
.ds-seitenkopf .ds-knopfreihe { margin-top: var(--ds-s-6); }
.ds-seitenkopf__bild .ds-szene { width: 100%; max-width: 32rem; margin-inline: auto; }

.ds-seitenkopf--schlicht .ds-seitenkopf__innen { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

@media (min-width: 60em) {
  .ds-seitenkopf__innen--mit-bild { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* Brotkrumen */
.ds-brotkrumen ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0; font-size: var(--ds-text-sm); }
.ds-brotkrumen li { display: inline-flex; align-items: center; color: var(--ds-text-leise); }
.ds-brotkrumen li + li::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline: 0.55em 0.75em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.ds-brotkrumen a {
  display: inline-flex;
  align-items: center;
  /* Tap-Ziel 44 px (Briefing), die negativen Ränder halten die Zeile bei 2rem: die Optik bleibt */
  min-height: var(--ds-tap);
  margin-block: calc((2rem - var(--ds-tap)) / 2);
  color: var(--ds-text-leise);
  text-decoration: underline;
  text-decoration-color: transparent;
}
.ds-brotkrumen a:hover { color: var(--ds-link); text-decoration-color: currentColor; }
.ds-brotkrumen [aria-current="page"] { color: var(--ds-text); font-weight: var(--ds-w-mittel); }

/* 7. Zertifikatsleiste */

.ds-zert { border-bottom: 1px solid var(--ds-linie); background: var(--ds-weiss); }

.ds-zert__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0;
}

.ds-zert__eintrag {
  display: flex;
  align-items: center;
  gap: var(--ds-s-4);
  padding: var(--ds-s-5) 0;
  border-bottom: 1px solid var(--ds-linie);
}
.ds-zert__eintrag:last-child { border-bottom: 0; }

.ds-zert__marke {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--ds-navy-50);
  color: var(--ds-navy);
}
.ds-zert__marke .ds-icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.6; }
.ds-zert__marke--logo { background: none; border-radius: var(--ds-r-s); }
.ds-zert__marke--logo img { width: 3.25rem; height: auto; }

.ds-zert__text { font-size: var(--ds-text-sm); line-height: 1.4; color: var(--ds-schiefer); }
.ds-zert__text strong { display: block; color: var(--ds-navy); font-size: 1.0625rem; }

@media (min-width: 48em) {
  .ds-zert__eintrag { padding: var(--ds-s-6) var(--ds-s-5); border-bottom: 0; border-left: 1px solid var(--ds-linie); }
  .ds-zert__eintrag:first-child { border-left: 0; padding-left: 0; }
}

@media (min-width: 48em) and (max-width: 79.99em) {
  .ds-zert__liste { grid-template-columns: 1fr 1fr; }
  .ds-zert__eintrag:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ds-zert__eintrag:nth-child(-n+2) { border-bottom: 1px solid var(--ds-linie); }
}

@media (min-width: 80em) {
  .ds-zert__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 8. Leistungen: Bereiche und Verzeichnis */

.ds-bereiche { display: grid; gap: var(--ds-spalt); }

@media (min-width: 48em) {
  .ds-bereiche { grid-template-columns: 1fr 1fr; }
}

.ds-bereich {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ds-r-xl);
  background: var(--ds-navy-50);
}

.ds-bereich__bild {
  position: relative;
  border-bottom: 1px solid var(--ds-linie);
  background: var(--ds-navy-50);
}
.ds-bereich__bild { aspect-ratio: 15 / 8; }
.ds-bereich__bild .ds-szene,
.ds-bereich__bild .ds-szene svg { width: 100%; height: 100%; }

.ds-bereich__inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ds-s-4);
  padding: var(--ds-s-6) var(--ds-s-5) var(--ds-s-6);
}
.ds-bereich__inhalt > p { color: var(--ds-schiefer); }

.ds-bereich__titel { display: flex; align-items: center; gap: var(--ds-s-3); font-size: var(--ds-h3); }
.ds-bereich__titel .ds-icon { width: 2rem; height: 2rem; color: var(--ds-rot); stroke-width: 1.6; }

.ds-bereich__links { border-top: 1px solid var(--ds-linie); }
.ds-bereich__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s-3);
  min-height: 3.25rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ds-linie);
  color: var(--ds-navy);
  font-weight: var(--ds-w-fett);
  text-decoration: none;
}
.ds-bereich__links a:hover { color: var(--ds-rot-700); }
.ds-bereich__links small { display: block; color: var(--ds-schiefer); font-weight: var(--ds-w-normal); font-size: var(--ds-text-sm); }
.ds-bereich__links .ds-icon { color: var(--ds-rot); stroke-width: 2.25; transition: transform var(--ds-t-2) var(--ds-ease); }
.ds-bereich__links a:hover .ds-icon { transform: translateX(3px); }
.ds-bereich__inhalt .ds-textlink { margin-top: auto; align-self: flex-start; }

@media (min-width: 64em) {
  .ds-bereich__inhalt { padding: var(--ds-s-8) var(--ds-s-8) var(--ds-s-8); }
}

.ds-verzeichnis {
  display: grid;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 2px solid var(--ds-navy);
}

.ds-verzeichnis__eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--ds-s-4);
  padding: var(--ds-s-6) 0;
  border-bottom: 1px solid var(--ds-linie);
}
.ds-verzeichnis__eintrag .ds-icon { width: 2.75rem; height: 2.75rem; padding: 0.55rem; border-radius: 50%; background: var(--ds-navy-50); color: var(--ds-navy); stroke-width: 1.6; }
.ds-verzeichnis__eintrag h3 { font-size: var(--ds-h4); margin-bottom: var(--ds-s-2); }
.ds-verzeichnis__eintrag h3 a { color: var(--ds-navy); text-decoration: none; }
.ds-verzeichnis__eintrag h3 a::after { content: ""; position: absolute; inset: 0; }
.ds-verzeichnis__eintrag p { color: var(--ds-schiefer); font-size: var(--ds-text-sm); line-height: 1.55; }
.ds-verzeichnis__eintrag:hover h3 a { color: var(--ds-rot-700); text-decoration: underline; text-decoration-thickness: 2px; }
.ds-abschnitt--alt .ds-verzeichnis__eintrag .ds-icon { background: var(--ds-weiss); }
.ds-verzeichnis__eintrag:hover .ds-icon { background: var(--ds-rot); color: var(--ds-weiss); }
.ds-verzeichnis__eintrag:focus-within { outline: 3px solid var(--ds-fokus); outline-offset: 2px; border-radius: var(--ds-r-s); }
.ds-verzeichnis__eintrag h3 a:focus-visible { outline: none; }

@media (min-width: 48em) {
  .ds-verzeichnis { grid-template-columns: 1fr 1fr; column-gap: var(--ds-s-10); }
}

@media (min-width: 72em) {
  .ds-verzeichnis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Direkt nach einer Kopfzeile steht deren Abstand schon darüber */
.ds-kopfzeile + .ds-verzeichnis { margin-top: 0; }

/* Keine Lücke in der letzten Zeile (QA UX SP1, G5): zweispaltig nimmt ein einzelner letzter Eintrag die
   ganze Breite, dreispaltig füllen ein oder zwei Einträge die Zeile. Sechs Spuren mit span 2 ergeben
   dieselben Breiten und Kanten wie drei Spalten. Nicht für .ds-verzeichnis--zwei (2 oder 4 Einträge). */
@media (min-width: 48em) and (max-width: 71.99em) {
  .ds-verzeichnis:not(.ds-verzeichnis--zwei) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 72em) {
  .ds-verzeichnis:not(.ds-verzeichnis--zwei) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ds-verzeichnis:not(.ds-verzeichnis--zwei) > li { grid-column: span 2; }
  .ds-verzeichnis:not(.ds-verzeichnis--zwei) > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .ds-verzeichnis:not(.ds-verzeichnis--zwei) > li:nth-last-child(2):nth-child(3n+1),
  .ds-verzeichnis:not(.ds-verzeichnis--zwei) > li:last-child:nth-child(3n+2) { grid-column: span 3; }
}

/* 9. Vorteile */

.ds-vorteile { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center; }

.ds-vorteile__bild { position: relative; }
.ds-vorteile__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ds-r-xl); }
.ds-vorteile__bild figcaption { margin-top: var(--ds-s-3); color: var(--ds-schiefer); font-size: var(--ds-text-sm); }

.ds-vorteile__liste { display: grid; gap: var(--ds-s-8) var(--ds-s-8); margin-top: var(--ds-s-8); }
.ds-vorteile__liste li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--ds-s-4); }
.ds-vorteile__liste .ds-icon { width: 3rem; height: 3rem; padding: 0.65rem; border-radius: var(--ds-r-m); background: var(--ds-navy); color: var(--ds-weiss); stroke-width: 1.6; }
.ds-vorteile__liste h3 { font-size: var(--ds-h4); margin-bottom: var(--ds-s-1); }
.ds-vorteile__liste p { color: var(--ds-schiefer); font-size: var(--ds-text-sm); line-height: 1.55; }

@media (min-width: 40em) {
  .ds-vorteile__liste { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) and (max-width: 79.99em) {
  .ds-vorteile__liste { grid-template-columns: 1fr; gap: var(--ds-s-6); }
}

@media (min-width: 64em) {
  .ds-vorteile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ds-vorteile__bild img { aspect-ratio: 4 / 5; }
}

/* 10. Ablauf in Schritten: Ringleitung */

.ds-ablauf { position: relative; display: grid; gap: var(--ds-s-8); counter-reset: ds-schritt; }

.ds-ablauf::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ds-navy) 0 10px, transparent 10px 16px);
  opacity: 0.35;
}

.ds-ablauf__schritt { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-content: start; gap: var(--ds-s-5); }

.ds-ablauf__nr {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--ds-navy);
  border-radius: 50%;
  background: var(--ds-flaeche);
  color: var(--ds-navy);
  font-size: 1.25rem;
  font-weight: var(--ds-w-fett);
  font-variant-numeric: tabular-nums;
}
.ds-abschnitt--alt .ds-ablauf__nr { background: var(--ds-navy-50); }
.ds-ablauf__nr::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--ds-weiss);
  border-radius: 50%;
  background: var(--ds-rot);
}

.ds-ablauf__schritt h3 { font-size: var(--ds-h4); margin: 0.6rem 0 var(--ds-s-2); }
.ds-ablauf__schritt p { color: var(--ds-schiefer); }

@media (min-width: 60em) {
  .ds-ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s-8); }
  .ds-ablauf::before {
    top: 1.5rem;
    bottom: auto;
    left: 1.5rem;
    right: calc((100% - 3 * var(--ds-s-8)) / 4 - 1.5rem);
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--ds-navy) 0 10px, transparent 10px 16px);
  }
  .ds-ablauf__schritt { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-4); }
  .ds-ablauf__schritt h3 { margin-top: var(--ds-s-2); }
}

/* 11. Einsatzgebiet */

.ds-gebiet { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }

.ds-gebiet__karte {
  overflow: hidden;
  border: 1px solid var(--ds-linie);
  border-radius: var(--ds-r-xl);
  background: var(--ds-weiss);
}

.ds-gebiet__orte { display: flex; flex-wrap: wrap; gap: var(--ds-s-2); margin-top: var(--ds-s-6); }
.ds-gebiet__orte li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--ds-linie);
  border-radius: var(--ds-r-rund);
  background: var(--ds-weiss);
  color: var(--ds-navy);
  font-size: var(--ds-text-sm);
}
.ds-gebiet__orte .is-sitz { border-color: var(--ds-rot); color: var(--ds-rot-700); font-weight: var(--ds-w-fett); }

.ds-adresse {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--ds-s-2) var(--ds-s-3);
  margin-top: var(--ds-s-6);
  font-style: normal;
}
.ds-adresse .ds-icon { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--ds-rot); }

@media (min-width: 60em) {
  .ds-gebiet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* 12. Referenzen */

.ds-referenzen { display: grid; gap: var(--ds-spalt); }

@media (min-width: 40em) {
  .ds-referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .ds-referenzen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ds-referenz { display: flex; flex-direction: column; gap: var(--ds-s-4); }
.ds-referenz__bild { overflow: hidden; border-radius: var(--ds-r-l); background: var(--ds-navy-100); }
.ds-referenz__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ds-referenz h3 { font-size: var(--ds-h4); }
.ds-referenz p { color: var(--ds-schiefer); font-size: var(--ds-text-sm); line-height: 1.55; }

.ds-daten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  border-top: 1px solid var(--ds-linie);
}
.ds-daten div { padding: var(--ds-s-3) var(--ds-s-2) 0 0; }
.ds-daten div + div { padding-left: var(--ds-s-3); border-left: 1px solid var(--ds-linie); }
.ds-daten dt { order: 2; color: var(--ds-schiefer); font-size: var(--ds-text-xs); line-height: 1.3; }
.ds-daten dd { color: var(--ds-navy); font-size: 1.25rem; font-weight: var(--ds-w-fett); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ds-daten div { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 0.15rem; }

/* 13. Jubilaeum und Zeitleiste */

.ds-jubilaeum { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }

.ds-jubilaeum__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-6); margin-bottom: var(--ds-s-6); }
.ds-jubilaeum__kopf .ds-siegel { --siegel-b: 7rem; }
.ds-jubilaeum__kopf h2 { flex: 1 1 14rem; }
.ds-jubilaeum__text p + p { margin-top: var(--ds-s-4); }
.ds-jubilaeum__text .ds-textlink { margin-top: var(--ds-s-5); }

.ds-jubilaeum__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--ds-r-xl); }
.ds-jubilaeum__bild figcaption { margin-top: var(--ds-s-3); color: var(--ds-schiefer); font-size: var(--ds-text-sm); }

@media (min-width: 60em) {
  .ds-jubilaeum { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .ds-jubilaeum__kopf .ds-siegel { --siegel-b: 8.5rem; }
}

.ds-zeitleiste {
  position: relative;
  display: grid;
  gap: var(--ds-s-5);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-left: 1.75rem;
}
.ds-zeitleiste::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.4rem;
  width: 2px;
  background: var(--ds-navy);
  opacity: 0.25;
}
.ds-zeitleiste li { position: relative; }
.ds-zeitleiste li::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: -1.75rem;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid var(--ds-navy);
  border-radius: 50%;
  background: var(--ds-flaeche-alt);
}
.ds-zeitleiste li:last-child::before { border-color: var(--ds-rot); background: var(--ds-rot); }
.ds-zeitleiste time { display: block; color: var(--ds-navy); font-size: 1.25rem; font-weight: var(--ds-w-fett); line-height: 1.4; font-variant-numeric: tabular-nums; }
.ds-zeitleiste p { color: var(--ds-schiefer); font-size: var(--ds-text-sm); line-height: 1.5; }

@media (min-width: 64em) {
  .ds-zeitleiste { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ds-s-6); padding: 1.75rem 0 0; }
  .ds-zeitleiste::before { top: 0.4rem; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .ds-zeitleiste li::before { top: -1.75rem; left: 0; }
}

/* 14. Partner */

.ds-partner {
  display: grid;
  gap: var(--ds-s-6);
  align-items: center;
}
.ds-partner h2 { font-size: var(--ds-h4); color: var(--ds-schiefer); font-weight: var(--ds-w-mittel); }
.ds-partner__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-4); }
.ds-partner__liste li {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  padding: var(--ds-s-4);
  border: 1px solid var(--ds-linie);
  border-radius: var(--ds-r-l);
  background: var(--ds-weiss);
}
.ds-partner__liste img { width: auto; max-height: 2.75rem; filter: grayscale(1); opacity: 0.8; transition: filter var(--ds-t-3), opacity var(--ds-t-3); }
.ds-partner__liste li:hover img { filter: none; opacity: 1; }

@media (min-width: 48em) {
  .ds-partner__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .ds-partner { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--ds-s-10); }
}

/* 15. Jobs */

.ds-jobs {
  display: grid;
  overflow: hidden;
  border-radius: var(--ds-r-xl);
  background: var(--ds-navy);
  color: var(--ds-text);
}
.ds-jobs__bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 40%; }
.ds-jobs__inhalt { padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); }
.ds-jobs__inhalt h2 { color: var(--ds-weiss); font-size: var(--ds-h3); }
.ds-jobs__inhalt > p { margin-top: var(--ds-s-4); color: var(--ds-navy-200); }
.ds-jobs__liste { display: grid; gap: var(--ds-s-3); margin-top: var(--ds-s-6); }
.ds-jobs__liste li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--ds-s-3); color: var(--ds-weiss); }
.ds-jobs__liste .ds-icon { width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; color: var(--ds-weiss); stroke-width: 2.25; }
.ds-jobs .ds-knopfreihe { margin-top: var(--ds-s-8); }

@media (min-width: 60em) {
  .ds-jobs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  /* Das Bild füllt die Spalte, die Textspalte bestimmt die Höhe. Ein Lazy-Bild ohne Seitenverhältnis
     (sizes="auto", contain-intrinsic-size 3000px 1500px) würde sonst 1500 px hoch. */
  .ds-jobs__bild { position: relative; min-height: 24rem; }
  .ds-jobs__bild img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; }
}

/* 16. FAQ */

.ds-faq-bereich { display: grid; gap: var(--ds-s-8); }

@media (min-width: 64em) {
  .ds-faq-bereich { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--ds-s-16); }
  .ds-faq-bereich__kopf { position: sticky; top: calc(var(--ds-kopf-h-klein) + 2rem); align-self: start; }
}

.ds-faq { border-top: 2px solid var(--ds-navy); }
.ds-faq__eintrag { border-bottom: 1px solid var(--ds-linie); }
.ds-faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s-4);
  min-height: 3.75rem;
  padding: var(--ds-s-4) 0;
  color: var(--ds-navy);
  font-size: var(--ds-h4);
  font-weight: var(--ds-w-fett);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.ds-faq__frage::-webkit-details-marker { display: none; }
.ds-faq__frage:hover { color: var(--ds-rot-700); }
.ds-faq__zeichen {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--ds-linie-stark);
  border-radius: 50%;
}
.ds-faq__zeichen::before,
.ds-faq__zeichen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 2px;
  margin: -1px 0 0 -0.4rem;
  background: currentColor;
  transition: transform var(--ds-t-2) var(--ds-ease);
}
.ds-faq__zeichen::after { transform: rotate(90deg); }
.ds-faq__eintrag[open] .ds-faq__zeichen { border-color: var(--ds-rot); background: var(--ds-rot); color: var(--ds-weiss); }
.ds-faq__eintrag[open] .ds-faq__zeichen::after { transform: rotate(0deg); }
.ds-faq__antwort { padding: 0 3rem var(--ds-s-6) 0; color: var(--ds-schiefer); }
.ds-faq__antwort p + p { margin-top: var(--ds-s-3); }

/* 17. CTA-Band */

.ds-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ds-navy);
  color: var(--ds-text);
}
.ds-cta__innen { display: grid; gap: var(--ds-s-6); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.ds-cta h2 { max-width: 20ch; color: var(--ds-weiss); }
.ds-cta p { max-width: 36rem; color: var(--ds-navy-200); font-size: var(--ds-text-lg); line-height: 1.5; }
.ds-cta__wellen {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: clamp(7rem, 4rem + 12vw, 15rem);
  fill: none;
  stroke: var(--ds-rot);
  stroke-linecap: round;
  stroke-width: 14;
}

@media (min-width: 64em) {
  .ds-cta__innen { grid-template-columns: minmax(0, 1.3fr) auto; align-items: end; column-gap: var(--ds-s-16); }
  .ds-cta .ds-knopfreihe { justify-content: flex-end; }
}

/* 18. Fuss: Footer-Sitemap mit Marke und Kontakt, allen Unterseiten, Siegelleiste und Rechtlichem */

.ds-fuss { background: var(--ds-navy-900); color: var(--ds-text); font-size: var(--ds-text-sm); }
.ds-fuss__innen { display: grid; gap: var(--ds-s-10); padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--ds-s-10); }
.ds-fuss h2 { margin: 0 0 var(--ds-s-2); color: var(--ds-weiss); font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; }

/* Marke mit Kontakt */
.ds-fuss__marke { display: grid; align-content: start; justify-items: start; gap: var(--ds-s-5); }
.ds-fuss__marke > img { width: 12rem; height: auto; }
.ds-fuss__marke p { max-width: 24rem; margin: 0; color: var(--ds-navy-200); line-height: 1.55; }

.ds-fuss__kontakt { display: grid; gap: 0; font-style: normal; color: var(--ds-navy-200); line-height: 1.55; }
.ds-fuss__kontakt > span:first-child { margin-bottom: var(--ds-s-2); }
.ds-fuss__kontakt a,
.ds-fuss__kontakt .ds-fuss__fax {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--ds-tap);
  font-variant-numeric: tabular-nums;
}
.ds-fuss__kontakt a { color: var(--ds-weiss); text-decoration: none; }
.ds-fuss__kontakt a:hover { color: var(--ds-weiss); text-decoration: underline; }
.ds-fuss__kontakt .ds-icon { flex: none; width: 1.15rem; height: 1.15rem; color: var(--ds-navy-200); }

/* Sitemap: alle Unterseiten in sechs Gruppen, auf dem Handy zwei Spalten. Die Reihenfolge der
   Gruppen (ds_fuss_navigation) hält die Zeilen gleich lang: 3|2, 3|3, 6|7 */
.ds-fuss__sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-8) var(--ds-s-6); align-content: start; }
.ds-fuss__liste { display: grid; margin: 0; padding: 0; list-style: none; }
.ds-fuss__liste a {
  display: flex;
  align-items: center;
  min-height: var(--ds-tap);
  padding-block: 0.35rem;
  color: var(--ds-navy-200);
  line-height: 1.3;
  text-decoration: none;
  hyphens: auto;
}
.ds-fuss__liste a:hover,
.ds-fuss__liste a[aria-current="page"] { color: var(--ds-weiss); text-decoration: underline; }

/* Siegelleiste: Jubiläum und Zertifizierungen, nur Normen ohne Datum und ohne Fremdlogos */
.ds-fuss__nachweise { padding-block: var(--ds-s-8); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ds-fuss__siegelleiste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-3); margin: 0; padding: 0; list-style: none; }
.ds-fuss__nachweis {
  display: flex;
  align-items: center;
  gap: var(--ds-s-4);
  height: 100%;
  padding: var(--ds-s-3) var(--ds-s-4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ds-r-l);
  color: var(--ds-navy-200);
  line-height: 1.35;
  text-decoration: none;
  transition: border-color var(--ds-t-2) var(--ds-ease), background-color var(--ds-t-2) var(--ds-ease);
}
.ds-fuss__nachweis:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.04); color: var(--ds-navy-200); text-decoration: none; }
.ds-fuss__nachweis > span:last-child { text-wrap: balance; }
.ds-fuss__nachweis strong { display: block; color: var(--ds-weiss); font-size: 1rem; font-weight: var(--ds-w-fett); }
.ds-fuss__nachweis .ds-siegel { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.ds-fuss__zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: var(--ds-weiss);
}
.ds-fuss__zeichen .ds-icon { width: 1.6rem; height: 1.6rem; }

/* Fußleiste */
.ds-fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--ds-s-8);
  padding-block: var(--ds-s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ds-navy-200);
  font-size: var(--ds-text-xs);
}
.ds-fuss__unten > span { padding-block: 0.65rem; }
.ds-fuss__recht { display: flex; flex-wrap: wrap; gap: 0 var(--ds-s-6); margin: 0; padding: 0; list-style: none; }
.ds-fuss__recht a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-tap);
  color: var(--ds-navy-200);
  font-size: var(--ds-text-xs);
  text-decoration: none;
}
.ds-fuss__recht a:hover,
.ds-fuss__recht a[aria-current="page"] { color: var(--ds-weiss); text-decoration: underline; }
/* Borlabs rendert in den Auslöser ein a[role=button] */
.ds-fuss__cookie .borlabs-cookie-open-dialog-preferences { display: inline-flex; }

@media (min-width: 36em) {
  .ds-fuss__sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-fuss__siegelleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-fuss__siegelleiste > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Tablet: Logo, Satz und Knopf links, Anschrift rechts */
@media (min-width: 48em) and (max-width: 63.99em) {
  .ds-fuss__marke { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "logo kontakt" "text kontakt" "knopf kontakt"; column-gap: var(--ds-s-8); }
  .ds-fuss__marke > img { grid-area: logo; }
  .ds-fuss__marke p { grid-area: text; }
  .ds-fuss__marke .ds-knopf { grid-area: knopf; align-self: start; }
  .ds-fuss__kontakt { grid-area: kontakt; align-self: start; }
}

/* Ab 64em: Marke links, Sitemap rechts, Siegelleiste in einer Zeile (drei oder nach der Erneuerung vier Einträge) */
@media (min-width: 64em) {
  .ds-fuss__innen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--ds-s-12); }
  .ds-fuss__siegelleiste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ds-fuss__siegelleiste > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* Bis 75em kompaktere Kacheln, damit bei vier Einträgen auch „Qualitätsmanagement“ ohne Trennung passt */
@media (min-width: 64em) and (max-width: 74.99em) {
  .ds-fuss__nachweis { gap: var(--ds-s-3); padding-inline: var(--ds-s-3); }
  .ds-fuss__zeichen,
  .ds-fuss__nachweis .ds-siegel { width: 3rem; height: 3rem; }
}

/* Druck: Kontakt und Rechtliches schwarz, Sitemap und Siegelleiste weglassen */
@media print {
  .ds-fuss { --ds-weiss: #000; --ds-navy-200: #333; }
  .ds-fuss__sitemap,
  .ds-fuss__nachweise,
  .ds-fuss__marke .ds-knopf { display: none !important; }
}

/* 19. Inhaltsseiten und Fliesstext (auch Beaver-Builder-Altinhalte) */

.ds-prosa { max-width: var(--ds-zeile); }
.ds-prosa > * + * { margin-top: var(--ds-s-4); }
.ds-prosa > :first-child { margin-top: 0; }
.ds-prosa h2 { margin-top: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem); font-size: var(--ds-h3); }
.ds-prosa h3 { margin-top: var(--ds-s-8); font-size: var(--ds-h4); }
.ds-prosa h4 { margin-top: var(--ds-s-6); font-size: 1.0625rem; }
.ds-prosa h2 + *,
.ds-prosa h3 + *,
.ds-prosa h4 + * { margin-top: var(--ds-s-3); }
.ds-prosa ul:not([class]),
.ds-prosa ol:not([class]) { padding-left: 1.4rem; }
.ds-prosa ul:not([class]) { list-style: none; padding-left: 1.4rem; }
.ds-prosa ul:not([class]) > li { position: relative; }
.ds-prosa ul:not([class]) > li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: -1.15rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  background: var(--ds-rot);
}
.ds-prosa li + li { margin-top: var(--ds-s-2); }
.ds-prosa ol:not([class]) > li::marker { color: var(--ds-navy); font-weight: var(--ds-w-fett); }
.ds-prosa a { font-weight: var(--ds-w-mittel); }
.ds-prosa blockquote {
  padding: var(--ds-s-4) var(--ds-s-6);
  border-left: 3px solid var(--ds-rot);
  background: var(--ds-navy-50);
  color: var(--ds-navy);
  font-size: var(--ds-text-lg);
  line-height: 1.5;
}
.ds-prosa figure img { border-radius: var(--ds-r-l); }
.ds-prosa figcaption { margin-top: var(--ds-s-2); color: var(--ds-schiefer); font-size: var(--ds-text-sm); }
.ds-prosa table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); }
.ds-prosa th,
.ds-prosa td { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--ds-linie); text-align: left; vertical-align: top; }
.ds-prosa th { color: var(--ds-navy); font-weight: var(--ds-w-fett); }
.ds-prosa hr { height: 1px; margin-block: var(--ds-s-8); border: 0; background: var(--ds-linie); }
.ds-tabelle-rahmen { overflow-x: auto; }

.ds-stand { color: var(--ds-schiefer); font-size: var(--ds-text-sm); }

/* Inhaltsverzeichnis fuer lange Rechtstexte */
.ds-inhaltsseite { display: grid; gap: var(--ds-s-10); }
.ds-toc { padding: var(--ds-s-5); border: 1px solid var(--ds-linie); border-radius: var(--ds-r-l); background: var(--ds-navy-50); font-size: var(--ds-text-sm); }
.ds-toc h2 { margin-bottom: var(--ds-s-3); font-size: 1.0625rem; }
.ds-toc ol { display: grid; gap: 0.1rem; margin: 0; padding-left: 1.25rem; }
.ds-toc li::marker { color: var(--ds-schiefer); }
.ds-toc a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ds-navy); text-decoration: none; }
.ds-toc a:hover { color: var(--ds-rot-700); text-decoration: underline; }

@media (min-width: 64em) {
  .ds-inhaltsseite { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--ds-s-16); }
  .ds-inhaltsseite .ds-toc { position: sticky; top: calc(var(--ds-kopf-h-klein) + 1.5rem); order: 2; align-self: start; }
}

/* Beaver Builder: globaler Restyle fuer Seiten ohne _ds_vorlage steht in Abschnitt 26 */

/* 20. Leistungsseite */

.ds-artikel { display: grid; gap: var(--ds-s-10); }

@media (min-width: 64em) {
  .ds-artikel { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--ds-s-16); align-items: start; }
  .ds-artikel__seite { position: sticky; top: calc(var(--ds-kopf-h-klein) + 1.5rem); }
}

.ds-kontaktkarte {
  padding: var(--ds-s-6);
  border: 1px solid var(--ds-linie);
  border-radius: var(--ds-r-l);
  background: var(--ds-weiss);
  box-shadow: var(--ds-schatten-2);
}
.ds-kontaktkarte h2 { font-size: var(--ds-h4); }
.ds-kontaktkarte > p { margin-top: var(--ds-s-2); color: var(--ds-schiefer); font-size: var(--ds-text-sm); }
.ds-kontaktkarte__tel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--ds-tap);
  margin-top: var(--ds-s-5);
  color: var(--ds-navy);
  font-size: 1.5rem;
  font-weight: var(--ds-w-fett);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.ds-kontaktkarte__tel .ds-icon { width: 1.5rem; height: 1.5rem; color: var(--ds-rot); stroke-width: 2; }
.ds-kontaktkarte__tel:hover { color: var(--ds-rot-700); }
.ds-kontaktkarte__mail { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--ds-tap); overflow-wrap: anywhere; }
.ds-kontaktkarte__mail .ds-icon { color: var(--ds-rot); }
.ds-kontaktkarte .ds-knopf { width: 100%; margin-top: var(--ds-s-5); }
.ds-kontaktkarte__hinweis { margin-top: var(--ds-s-4); padding-top: var(--ds-s-4); border-top: 1px solid var(--ds-linie); color: var(--ds-schiefer); font-size: var(--ds-text-xs); line-height: 1.5; }

.ds-hinweis {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--ds-s-4);
  padding: var(--ds-s-5) var(--ds-s-6);
  border-radius: var(--ds-r-l);
  background: var(--ds-navy-50);
}
.ds-hinweis > .ds-icon { width: 2.5rem; height: 2.5rem; color: var(--ds-navy); stroke-width: 1.5; }
.ds-hinweis h3 { margin: 0 0 var(--ds-s-2); font-size: var(--ds-h4); }
.ds-hinweis dl { display: grid; gap: var(--ds-s-3); margin-top: var(--ds-s-3); }
.ds-hinweis dt { color: var(--ds-navy); font-weight: var(--ds-w-fett); }
.ds-hinweis dd { color: var(--ds-schiefer); font-size: var(--ds-text-sm); line-height: 1.5; }

.ds-liste-haken { display: grid; gap: var(--ds-s-3); }
.ds-liste-haken li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--ds-s-3); }
.ds-liste-haken .ds-icon { width: 1.6rem; height: 1.6rem; padding: 0.2rem; border-radius: 50%; background: var(--ds-navy); color: var(--ds-weiss); stroke-width: 2.5; margin-top: 0.05rem; }

.ds-prosa .ds-liste-haken,
.ds-prosa .ds-hinweis { margin-top: var(--ds-s-6); }

.ds-zertifikate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr)); gap: var(--ds-spalt); }
.ds-zertifikate figure { display: grid; gap: var(--ds-s-3); }
.ds-zertifikate img { width: 100%; aspect-ratio: 718 / 1024; object-fit: cover; border: 1px solid var(--ds-linie); border-radius: var(--ds-r-m); box-shadow: var(--ds-schatten-2); background: var(--ds-weiss); }
.ds-zertifikate figcaption { color: var(--ds-navy); font-size: var(--ds-text-sm); font-weight: var(--ds-w-fett); line-height: 1.4; }
.ds-zertifikate figcaption span { display: block; color: var(--ds-schiefer); font-weight: var(--ds-w-normal); }

/* Funktionsblock mit Szene, z. B. Wartung */
.ds-funktion { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.ds-funktion__bild { overflow: hidden; border: 1px solid var(--ds-linie); border-radius: var(--ds-r-xl); background: var(--ds-navy-50); }
.ds-funktion .ds-liste-haken { margin-top: var(--ds-s-6); }
.ds-funktion .ds-knopfreihe { margin-top: var(--ds-s-8); }

@media (min-width: 60em) {
  .ds-funktion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-funktion--gespiegelt .ds-funktion__bild { order: 2; }
}

/* 21. Kontaktseite */

.ds-kontakt { display: grid; gap: var(--ds-s-10); grid-template-areas: "daten" "formular" "karte"; }
.ds-kontakt__daten { grid-area: daten; }
.ds-kontakt .ds-formular-box { grid-area: formular; }
.ds-kontakt__karte { grid-area: karte; display: grid; gap: var(--ds-s-6); }

@media (min-width: 64em) {
  .ds-kontakt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "daten formular" "karte formular";
    gap: var(--ds-s-10) var(--ds-s-16);
    align-items: start;
  }
}

.ds-kontakt__daten { display: grid; gap: var(--ds-s-6); }
.ds-kontakt__liste { display: grid; gap: var(--ds-s-2); }
.ds-kontakt__liste li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--ds-s-3); align-items: center; }
.ds-kontakt__liste .ds-icon { width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: var(--ds-navy-50); color: var(--ds-navy); }
.ds-kontakt__liste a { display: inline-flex; align-items: center; min-height: var(--ds-tap); color: var(--ds-navy); font-weight: var(--ds-w-fett); text-decoration: none; overflow-wrap: anywhere; }
.ds-kontakt__liste a:hover { color: var(--ds-rot-700); text-decoration: underline; }
.ds-kontakt__wert { color: var(--ds-navy); font-weight: var(--ds-w-fett); }
.ds-kontakt__liste small { display: block; color: var(--ds-schiefer); font-size: var(--ds-text-xs); line-height: 1.2; }

.ds-karte-platzhalter {
  display: grid;
  gap: var(--ds-s-3);
  padding: var(--ds-s-6);
  border: 1px dashed var(--ds-linie-stark);
  border-radius: var(--ds-r-l);
  background: var(--ds-navy-50);
  font-size: var(--ds-text-sm);
  color: var(--ds-schiefer);
}
.ds-karte-platzhalter strong { color: var(--ds-navy); font-size: 1.0625rem; }
.ds-karte-platzhalter .ds-knopf { justify-self: start; }

.ds-formular-box {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border: 1px solid var(--ds-linie);
  border-radius: var(--ds-r-l);
  background: var(--ds-weiss);
  box-shadow: var(--ds-schatten-2);
}
.ds-formular-box > h2 { font-size: var(--ds-h3); }
.ds-formular-box > p { margin-top: var(--ds-s-2); color: var(--ds-schiefer); }

/* 22. Formulare: WPForms (Formular 88) und eigene Felder */

.ds-formular { margin-top: var(--ds-s-6); }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container { margin: 0; }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-field-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-s-5) var(--ds-s-4);
}

@media (min-width: 36em) {
  .ds-redesign :is(.ds-formular, .ds-bb) .wpforms-field-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-redesign :is(.ds-formular, .ds-bb) .wpforms-field { grid-column: 1 / -1; }
  .ds-redesign :is(.ds-formular, .ds-bb) .wpforms-field.wpforms-one-half { grid-column: auto; }
}

.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-field {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-field-label {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--ds-navy);
  font-size: 0.9375rem;
  font-weight: var(--ds-w-fett);
  line-height: 1.3;
}

.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-required-label { color: var(--ds-rot-700); font-weight: var(--ds-w-fett); }

.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input[type="text"],
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input[type="email"],
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input[type="tel"],
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container select,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container textarea {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 3rem;
  height: auto;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--ds-linie-stark);
  border-radius: var(--ds-r-m);
  background: var(--ds-weiss);
  box-shadow: none;
  color: var(--ds-tinte);
  font-family: var(--ds-font);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color var(--ds-t-2) var(--ds-ease), box-shadow var(--ds-t-2) var(--ds-ease);
}
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container textarea { min-height: 9.5rem; resize: vertical; }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input::placeholder,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container textarea::placeholder { color: #66758A; opacity: 1; }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input:hover,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container textarea:hover { border-color: var(--ds-navy); }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input:focus,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container textarea:focus {
  border-color: var(--ds-navy);
  outline: 3px solid var(--ds-fokus);
  outline-offset: 2px;
  box-shadow: none;
}

.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-field-checkbox ul { margin: 0; padding: 0; list-style: none; }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-field-checkbox li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; margin: 0; padding: 0; }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input[type="checkbox"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.1rem 0 0;
  accent-color: var(--ds-navy);
  cursor: pointer;
}
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-field-label-inline {
  display: block;
  color: var(--ds-schiefer);
  font-size: var(--ds-text-sm);
  line-height: 1.5;
  cursor: pointer;
}

.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-submit-container { margin-top: var(--ds-s-6); padding: 0; }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container button[type="submit"],
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75em 1.75em;
  border: 2px solid transparent;
  border-radius: var(--ds-r-m);
  background: var(--ds-rot);
  color: var(--ds-weiss);
  font-family: var(--ds-font);
  font-size: 1.0625rem;
  font-weight: var(--ds-w-fett);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--ds-t-2) var(--ds-ease);
}
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container button[type="submit"]:hover { background: var(--ds-rot-700); }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container button[type="submit"]:focus-visible { outline: 3px solid var(--ds-navy); outline-offset: 3px; }

@media (min-width: 36em) {
  .ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container button[type="submit"] { width: auto; }
}

/* Fehler und Bestaetigung (Klassen, die WPForms setzt) */
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container label.wpforms-error,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container em.wpforms-error {
  display: block;
  margin-top: 0.4rem;
  color: var(--ds-rot-700);
  font-size: var(--ds-text-sm);
  font-style: normal;
  font-weight: var(--ds-w-mittel);
}
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container input.wpforms-error,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-container textarea.wpforms-error { border-color: var(--ds-rot-700); background: var(--ds-rot-100); }
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-confirmation-container-full,
.ds-redesign :is(.ds-formular, .ds-bb) .wpforms-confirmation-container {
  padding: var(--ds-s-5);
  border: 1.5px solid var(--ds-erfolg);
  border-radius: var(--ds-r-m);
  background: #EAF5EF;
  color: var(--ds-tinte);
}

/* Honigtopf-Felder von WPForms und WP Armour nie anzeigen */
.ds-redesign :is(.ds-formular, .ds-bb) #wpforms-88-field_6-container,
.ds-redesign :is(.ds-formular, .ds-bb) .altEmail_container,
.ds-redesign :is(.ds-formular, .ds-bb) .wpa_hidden_field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

.ds-formular__pflicht { margin-top: var(--ds-s-4); color: var(--ds-schiefer); font-size: var(--ds-text-xs); }

/* 23. Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
  .ds-kopf,
  .ds-kopf__innen,
  .ds-kopf__logo,
  .ds-nav,
  .ds-siegel,
  .ds-textlink .ds-icon,
  .ds-bereich__links .ds-icon { transition: none; }
  a.ds-siegel:hover { transform: none; }
  .ds-mega:not([hidden]),
  .ds-unter:not([hidden]) { animation: none; }
}

/* 24. Druck */

@media print {
  .ds-kopf,
  .ds-nav,
  .ds-cta,
  .ds-szene,
  .ds-sprung { display: none !important; }
  .ds-held,
  .ds-seitenkopf,
  .ds-fuss { background: none; color: #000; }
  .ds-dunkel { --ds-text: #000; --ds-ueberschrift: #000; --ds-text-leise: #333; }
}

/* 25. WordPress-Integration (Theme-Fundament, Phase 2) */

/* Sichtbarkeit je Breakpoint (Menüeinträge, die es nur mobil oder nur auf dem Desktop gibt) */
@media (max-width: 63.99em) {
  .ds-nur-desktop { display: none !important; }
}
@media (min-width: 64em) {
  .ds-nur-mobil { display: none !important; }
}

/* Sprunglink: PBF gibt a.skip-link fest in header.php aus (Ziel #content), er bekommt die Optik von .ds-sprung */
.ds-redesign .skip-link.screen-reader-text:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--ds-z-sprung);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  clip: auto !important;
  clip-path: none;
  border-radius: var(--ds-r-m);
  background: var(--ds-navy);
  color: var(--ds-weiss);
  font-family: var(--ds-font);
  font-size: 1rem;
  font-weight: var(--ds-w-fett);
  line-height: 1.2;
  text-decoration: none;
  outline: 3px solid var(--ds-rot);
  outline-offset: 2px;
}

/* Admin-Leiste für eingeloggte Nutzer */
.admin-bar .ds-kopf { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) {
  .admin-bar .ds-kopf { top: 0; }
}

/* Offenes Handy-Menü liegt über allem, was im Inhalt einen eigenen z-index hat */
html.ds-scroll-gesperrt .ds-kopf { z-index: 99990; }
html.ds-scroll-gesperrt #BorlabsCookieWidget { display: none !important; }

/* Kopf zwischen 1024 und 1279 px: fünf Hauptpunkte, Telefon-Icon und Button müssen passen */
@media (min-width: 64em) and (max-width: 79.99em) {
  .ds-kopf__innen { gap: var(--ds-s-4); }
  .ds-kopf__logo { width: 9.75rem; }
  .ds-nav__liste { gap: 0; }
  .ds-nav__link,
  .ds-nav__knopf { padding-inline: 0.55rem; font-size: 1rem; }
  .ds-nav__link::after,
  .ds-nav__knopf::after { left: 0.55rem; right: 0.55rem; }
  .ds-kopf__aktionen { gap: var(--ds-s-2); }
  .ds-kopf__kontakt { padding-inline: 0.9rem; }

  /* Mega-Menü: kleinere Icons und schmalerer Teaser, damit „Einbruchmeldeanlage“ in die Spalte passt (QA UX N2) */
  .ds-mega__innen { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(13rem, 0.75fr); gap: var(--ds-s-4); }
  .ds-mega__link { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem; padding-inline: 0.375rem; }
  .ds-mega__icon { width: 2rem; height: 2rem; padding: 0.375rem; }
  .ds-mega__teaser-tel { font-size: 1.125rem; white-space: nowrap; }
}

/* Aktiver Hauptpunkt */
@media (min-width: 64em) {
  .ds-nav__link.is-aktiv::after { transform: scaleX(1); }
  .ds-nav__link[aria-current="page"],
  .ds-nav__link.is-aktiv,
  .ds-nav__knopf.is-aktiv { color: var(--ds-navy); }
}
@media (max-width: 63.99em) {
  .ds-nav__link[aria-current="page"],
  .ds-nav__link.is-aktiv,
  .ds-nav__knopf.is-aktiv { box-shadow: inset 3px 0 0 var(--ds-rot); padding-left: 0.9rem; }
  .ds-mega__link[aria-current="page"] { background: var(--ds-navy-50); }
}

/* Spaltentitel im Mega-Menü sind Text, kein Link */
@media (max-width: 63.99em) {
  .ds-mega__titel { display: flex; align-items: center; min-height: 2rem; margin: var(--ds-s-3) 0 0; padding-inline: 0.5rem; }
  .ds-mega__innen { gap: var(--ds-s-1); }
}

/* Teaser im Mega-Menü */
.ds-mega__teaser .ds-mega__teaser-titel { color: var(--ds-weiss); font-size: 1.25rem; font-weight: var(--ds-w-fett); line-height: 1.25; }
@media (min-width: 64em) {
  .ds-mega__teaser { gap: var(--ds-s-3); }
  .ds-mega__teaser .ds-knopf { align-self: flex-start; margin-top: var(--ds-s-2); }
  .ds-mega__teaser-fuss {
    display: flex;
    align-items: center;
    gap: var(--ds-s-3);
    margin-top: auto;
    padding-top: var(--ds-s-4);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--ds-navy-200);
    font-size: var(--ds-text-sm);
  }
  .ds-mega__teaser .ds-mega__teaser-fuss .ds-siegel { box-shadow: 0 0 0 2px var(--ds-weiss); }

  .ds-mega--klein .ds-mega__innen {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(17rem, 1fr);
    max-width: calc(66rem + 2 * var(--ds-rand));
  }
  .ds-mega__teaser--bild { padding: 0 0 var(--ds-s-6); overflow: hidden; }
  .ds-mega__teaser--bild > :not(.ds-mega__foto) { margin-inline: var(--ds-s-6); }
  .ds-mega__foto { position: relative; margin-bottom: var(--ds-s-4); }
  .ds-mega__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 12%; }
  .ds-mega__teaser .ds-mega__foto-siegel { position: absolute; right: var(--ds-s-4); bottom: calc(-1 * var(--ds-s-6)); box-shadow: 0 0 0 3px var(--ds-weiss); }
  .ds-mega__teaser--bild .ds-textlink { align-self: flex-start; min-height: var(--ds-tap); }
}

/* Mobiles Menü: Anrufen mit Nummer, darunter oder daneben Anfrage */
.ds-nav__fuss { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36em) {
  .ds-nav__fuss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tabellen im neuen Fließtext: PBF zieht Rahmen auf alle Seiten */
.ds-prosa table { margin: 0; border: 0; }
.ds-prosa th,
.ds-prosa td { border: 0; border-bottom: 1px solid var(--ds-linie); background: none; }

/* 26. Beaver-Builder-Restyle für Seiten ohne Vorlage (.ds-bb)
   Layout (Zeilenbreite, Spalten, Abstände) bleibt so, wie Beaver Builder es je Seite festlegt.
   Der Restyle ändert Schrift, Überschriftenfarbe, Links, Buttons und Formulare. Beaver Builder
   schreibt Farben und Schriften je Modul mit hoher Spezifität, deshalb dort !important. */

/* Eine Schrift für alles. Icon-Schriften (Font Awesome, PowerPack, Beaver Builder) sind ausgenommen. */
.ds-redesign .ds-bb :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, label, input, select, textarea, button, blockquote, figcaption, a, span, strong, em, b, small, div):not([class*="fa-"]):not([class*="icon"]):not([class*="dashicons"]) {
  font-family: var(--ds-font) !important;
}
.ds-redesign .ds-bb :is(h1, h2, h3, h4, h5, h6) { letter-spacing: var(--ds-track-titel); text-wrap: balance; }
.ds-redesign .ds-bb .fl-rich-text a:not([class]):not(:is(h1, h2, h3, h4, h5, h6) a) { text-decoration: underline; text-underline-offset: 0.18em; }
.ds-redesign .ds-bb .fl-row-fixed-width,
.ds-redesign .ds-bb .fl-row-content-wrap .fl-row-content.fl-row-fixed-width { max-width: var(--ds-breite); }
.ds-redesign .ds-bb .fl-photo-img { border-radius: var(--ds-r-l); }
.ds-redesign .ds-bb .fl-separator { border-top-color: var(--ds-linie); }

/* Buttons: Navy, Telefon in Signalrot */
.ds-redesign .ds-bb :is(a.fl-button, a.pp-button) {
  min-height: var(--ds-tap);
  border-color: var(--ds-navy) !important;
  border-radius: var(--ds-r-m) !important;
  background: var(--ds-navy) !important;
  color: var(--ds-weiss) !important;
  font-weight: var(--ds-w-fett) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color var(--ds-t-2) var(--ds-ease), border-color var(--ds-t-2) var(--ds-ease);
}
.ds-redesign .ds-bb :is(a.fl-button, a.pp-button) * { color: inherit !important; }
.ds-redesign .ds-bb :is(a.fl-button, a.pp-button):is(:hover, :focus-visible) { border-color: var(--ds-navy-800) !important; background: var(--ds-navy-800) !important; color: var(--ds-weiss) !important; }
.ds-redesign .ds-bb :is(a.fl-button, a.pp-button)[href^="tel:"] { border-color: var(--ds-rot) !important; background: var(--ds-rot) !important; }
.ds-redesign .ds-bb :is(a.fl-button, a.pp-button)[href^="tel:"]:is(:hover, :focus-visible) { border-color: var(--ds-rot-700) !important; background: var(--ds-rot-700) !important; }

/* WPForms im Altinhalt: Beschriftungen übernehmen die Textfarbe der Zeile (auch auf dunklen Flächen),
   Absenden in Signalrot. Die Seiten-CSS von Beaver Builder setzt den Knopf mit !important auf Weiß. */
.ds-redesign .ds-bb .wpforms-container :is(.wpforms-field-label, .wpforms-field-label-inline, .wpforms-required-label) { color: inherit; }
.ds-redesign .ds-bb .wpforms-container .wpforms-field-label-inline { opacity: 0.92; }
.ds-redesign .ds-bb .wpforms-container .wpforms-field-label-inline a { color: inherit; text-decoration: underline; }
.ds-redesign .ds-bb .wpforms-container :is(button[type="submit"], .wpforms-submit) {
  border-color: var(--ds-rot) !important;
  background-color: var(--ds-rot) !important;
  color: var(--ds-weiss) !important;
}
.ds-redesign .ds-bb .wpforms-container :is(button[type="submit"], .wpforms-submit):hover { border-color: var(--ds-rot-700) !important; background-color: var(--ds-rot-700) !important; }

/* Beaver-Builder-Kontaktformular (Landingpage) */
.ds-redesign .ds-bb .fl-contact-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--ds-linie-stark) !important;
  border-radius: var(--ds-r-m) !important;
  background: var(--ds-weiss) !important;
  box-shadow: none !important;
  color: var(--ds-tinte) !important;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.ds-redesign .ds-bb .fl-contact-form textarea { min-height: 9.5rem; }
.ds-redesign .ds-bb .fl-contact-form :is(input, textarea):hover { border-color: var(--ds-navy) !important; }
.ds-redesign .ds-bb .fl-contact-form :is(input, textarea):focus { border-color: var(--ds-navy) !important; outline: 3px solid var(--ds-fokus); outline-offset: 2px; }
.ds-redesign .ds-bb .fl-contact-form :is(input, textarea)::placeholder { color: #66758A; opacity: 1; }
.ds-redesign .ds-bb .fl-contact-form label { font-weight: var(--ds-w-fett); }
.ds-redesign .ds-bb .fl-contact-form a.fl-button { border-color: var(--ds-rot) !important; background: var(--ds-rot) !important; }
.ds-redesign .ds-bb .fl-contact-form a.fl-button:is(:hover, :focus-visible) { border-color: var(--ds-rot-700) !important; background: var(--ds-rot-700) !important; }
.ds-redesign .ds-bb .fl-contact-form :is(.fl-contact-error, .fl-contact-form-error) { color: var(--ds-rot-700); }

/* Google-Maps-Platzhalter (Borlabs): Die Borlabs-CSS legt ihn absolut über ein .fl-map ohne Höhe,
   dann ragt er auf dem Desktop in den Fuß. Im Restyle nimmt er seine eigene Höhe ein. */
.ds-redesign .ds-bb .fl-module-map .fl-map:has(> .brlbs-cmpnt-content-blocker) { height: auto; padding-bottom: 0; overflow: visible; line-height: normal; }
.ds-redesign .ds-bb .fl-map div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker { position: relative; height: auto; min-height: 22rem; }
.ds-redesign .ds-bb .fl-map .brlbs-cmpnt-cb-preset-b { min-height: 22rem; padding-block: var(--ds-s-10); }
.ds-redesign .ds-bb .brlbs-cmpnt-content-blocker .brlbs-cmpnt-cb-preset-b .brlbs-cmpnt-cb-main { max-width: 40rem; margin-inline: auto; border-radius: var(--ds-r-l); }

/* Referenz-Beiträge (Einzelansicht von PBF, bis die Vorlage referenz steht): ohne Autor und Datum */
.ds-redesign .ds-bb .wpbf-article-meta,
.ds-redesign .ds-bb .article-meta,
.ds-redesign .ds-bb .wpbf-article-footer,
.ds-redesign .ds-bb .post-links { display: none; }
.ds-redesign .ds-bb .wpbf-post-image { border-radius: var(--ds-r-l); }
.ds-redesign .ds-bb .article-meta,
.ds-redesign .ds-bb .article-footer { display: none; }
.ds-redesign.single-post .ds-bb .wpbf-main-grid {
  display: block;
  max-width: calc(var(--ds-breite-schmal) + 2 * var(--ds-rand));
  margin: 0 auto;
  padding: var(--ds-abschnitt-klein) var(--ds-rand) var(--ds-abschnitt);
}
.ds-redesign.single-post .ds-bb .wpbf-main { width: 100%; max-width: none; padding: 0; float: none; }
.ds-redesign.single-post .ds-bb .entry-title { margin: 0 0 var(--ds-s-8); font-size: var(--ds-h1); }
.ds-redesign.single-post .ds-bb .wpbf-post-image { width: 100%; border-radius: var(--ds-r-xl); }
.ds-redesign.single-post .ds-bb .entry-content { margin-top: var(--ds-s-8); font-size: var(--ds-text-lg); line-height: 1.55; }

/* Lange Wörter in Altinhalten trennen statt mitten im Wort umzubrechen (lang="de") */
.ds-redesign .ds-bb :is(h1, h2, h3, h4, h5, h6) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }

/* Landingpage 1919 und Danke-Seite 1946: Die Spaltengruppen stapeln dort auf dem Handy nicht und
   haben feste Versätze (margin-left, negatives margin-bottom). Bis zur Vorlage landingpage stapeln. */
@media (max-width: 48em) {
  .ds-redesign:is(.page-id-1919, .page-id-1946) .ds-bb .fl-col-group:not(.fl-col-group-nested) { display: block; }
  .ds-redesign:is(.page-id-1919, .page-id-1946) .ds-bb .fl-col-group:not(.fl-col-group-nested) > .fl-col { width: 100% !important; max-width: none !important; }
  .ds-redesign:is(.page-id-1919, .page-id-1946) .ds-bb .fl-col-group:not(.fl-col-group-nested) > .fl-col > .fl-col-content { margin: 0 !important; }
}

/* Kurze Seiten (z. B. Partner): Fuß sitzt unten, kein weißer Streifen darunter.
   #container ist der PBF-Rahmen um Kopf, Inhalt (#content) und Fuß. */
.ds-redesign #container { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.ds-redesign #container > #content { flex: 1 0 auto; }

/* Landingpage 1919: eigene HTML-Kästen (.icon-box-long) mit geschützten Bindestrichen im Titel
   ragten bei 360 px 1 px über den Rand */
@media (max-width: 36em) {
  .ds-redesign.page-id-1919 .ds-bb .icon-box-long { align-items: flex-start; }
  .ds-redesign.page-id-1919 .ds-bb .icon-box-long-icon i { padding: 0.35em 0.45em 0 0; font-size: 2.25em; }
  .ds-redesign.page-id-1919 .ds-bb .icon-box-long-textbox { min-width: 0; }
  .ds-redesign.page-id-1919 .ds-bb .icon-box-long h4 { font-size: 1.5em; overflow-wrap: anywhere; }
}

/* 27. Seitenkopf für Beaver-Builder-Seiten ohne Vorlage: Impressum (73), Datenschutzerklärung (69),
   Kontakt-Danke (217). ds_bb_rahmen_auf() setzt davor ein Navy-Band mit Brotkrumen, die erste BB-Zeile
   mit der H1 setzt es fort (statt grauem Altband mit Navy-H1, QA UX KD1, I1, D1). Raster wie im Seitenkopf. */
.ds-bb-kopf {
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 2rem 2rem;
}
.ds-bb-kopf::before { content: none; }
.ds-bb-kopf .ds-container { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ds-redesign .ds-bb :is(.fl-node-5c10e799389df, .fl-node-5c10e7d5313f9, .fl-node-5c09204c7035a) > .fl-row-content-wrap {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.25rem) !important;
  background-color: var(--ds-navy) !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 2rem 2rem;
}
.ds-redesign .ds-bb-kopf + .ds-bb :is(.fl-node-5c10e799389df, .fl-node-5c10e7d5313f9, .fl-node-5c09204c7035a) > .fl-row-content-wrap { padding-top: var(--ds-s-6) !important; }
.ds-redesign .ds-bb :is(.fl-node-5c10e799389df, .fl-node-5c10e7d5313f9, .fl-node-5c09204c7035a) h1.fl-callout-title { padding: 0; color: var(--ds-weiss); }

/* Linke Kante wie auf den Vorlagen (Brotkrumen und Text bündig) */
@media (min-width: 48.01em) {
  .ds-redesign:is(.page-id-73, .page-id-69, .page-id-217) .ds-bb .fl-row-content-wrap { padding-inline: var(--ds-rand) !important; }
  .ds-redesign:is(.page-id-73, .page-id-69, .page-id-217) .ds-bb .fl-module-content { margin-inline: 0 !important; }
}

/* Rechtstexte Impressum (73) und Datenschutzerklärung (69): Lesespalte von etwa 70 bis 75 Zeichen,
   Überschriften aus der Typo-Skala statt der Abschnittsgrößen (QA UX F3, Endabnahme E14) */
.ds-redesign:is(.page-id-73, .page-id-69) .ds-bb .fl-rich-text { max-width: 40rem; }
.ds-redesign:is(.page-id-73, .page-id-69) .ds-bb .fl-rich-text h2 { margin: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem) 0 var(--ds-s-3); font-size: var(--ds-h3); }
.ds-redesign:is(.page-id-73, .page-id-69) .ds-bb .fl-rich-text h3 { margin: var(--ds-s-8) 0 var(--ds-s-3); font-size: var(--ds-h4); }
.ds-redesign:is(.page-id-73, .page-id-69) .ds-bb .fl-rich-text > :first-child { margin-top: 0; }

/* Danke-Seite 217: Block „Wie geht es weiter?“ aus ds_bb_rahmen_zu() (QA UX KD2) */
.ds-weiter .ds-kopfzeile { margin-bottom: var(--ds-s-6); }

/* 28. Borlabs-Dialog im CI (Endabnahme E5). Nur Aussehen über die CSS-Variablen von Borlabs, die auf
   dem Dialog statt auf :root gesetzt werden und deshalb unabhängig von der Ladereihenfolge gelten.
   Knöpfe Navy (Weiß auf Navy 11:1), Links Navy bzw. Schiefer (ab 7:1), Text 14 px, Knöpfe 16 px und
   48 px hoch, Schließen und Fußlinks 44 px. Verhalten, Kategorien und Texte bleiben in Borlabs. */
#BorlabsCookieBox,
.brlbs-cmpnt-container {
  --dialog-font-size: 16px;
  --dialog-text-color: var(--ds-tinte);
  --dialog-footer-text-color: var(--ds-schiefer);
  --dialog-button-accept-all-color: var(--ds-navy);
  --dialog-button-accept-all-color-hover: var(--ds-navy-800);
  --dialog-button-accept-only-essential-color: var(--ds-navy);
  --dialog-button-accept-only-essential-color-hover: var(--ds-navy-800);
  --dialog-button-preferences-color: var(--ds-navy);
  --dialog-button-preferences-color-hover: var(--ds-navy-800);
  --dialog-button-save-consent-color: var(--ds-navy);
  --dialog-button-save-consent-color-hover: var(--ds-navy-800);
  --dialog-button-selection-text-color: var(--ds-tinte);
  --dialog-button-close-text-color: var(--ds-tinte);
  --dialog-control-element-color: var(--ds-navy);
  --dialog-control-element-color-hover: var(--ds-rot-700);
  --dialog-link-primary-color: var(--ds-navy);
  --dialog-link-primary-color-hover: var(--ds-rot-700);
  --dialog-link-secondary-color: var(--ds-schiefer);
  --dialog-link-secondary-color-hover: var(--ds-navy);
  --dialog-card-control-element-color: var(--ds-navy);
  --dialog-card-control-element-color-hover: var(--ds-rot-700);
  --dialog-card-separator-color: var(--ds-linie);
  --dialog-card-text-color: var(--ds-tinte);
  --dialog-list-item-control-element-color: var(--ds-navy);
  --dialog-list-item-control-element-color-hover: var(--ds-rot-700);
  --dialog-list-item-separator-color: var(--ds-linie);
  --dialog-list-item-text-color-even: var(--ds-tinte);
  --dialog-list-item-text-color-odd: var(--ds-tinte);
  --dialog-table-row-text-color-even: var(--ds-tinte);
  --dialog-table-row-text-color-odd: var(--ds-tinte);
  --dialog-separator-color: var(--ds-linie);
  --dialog-checkbox-background-color-active: var(--ds-navy);
  --dialog-checkbox-border-color-active: var(--ds-navy);
  --dialog-checkbox-border-color-inactive: var(--ds-linie-stark);
  --dialog-switch-button-background-color-active: var(--ds-navy);
  --dialog-switch-button-background-color-inactive: var(--ds-linie-stark);
  --dialog-search-bar-input-border-color-default: var(--ds-linie-stark);
  --dialog-search-bar-input-border-color-focus: var(--ds-navy);
  --dialog-search-bar-input-text-color: var(--ds-tinte);
  --dialog-tab-bar-tab-background-color-active: var(--ds-navy);
  --dialog-tab-bar-tab-border-color-top-active: var(--ds-navy);
  --dialog-tab-bar-tab-border-color-right-active: var(--ds-navy);
  --dialog-tab-bar-tab-border-color-bottom-active: var(--ds-navy);
  --dialog-tab-bar-tab-border-color-left-active: var(--ds-navy);
  --dialog-tab-bar-tab-border-color-bottom-inactive: var(--ds-linie);
  --dialog-tab-bar-tab-text-color-inactive: var(--ds-tinte);
  --dialog-border-radius-top-left: var(--ds-r-l);
  --dialog-border-radius-top-right: var(--ds-r-l);
  --dialog-border-radius-bottom-left: var(--ds-r-l);
  --dialog-border-radius-bottom-right: var(--ds-r-l);
  --dialog-button-border-radius-top-left: var(--ds-r-m);
  --dialog-button-border-radius-top-right: var(--ds-r-m);
  --dialog-button-border-radius-bottom-left: var(--ds-r-m);
  --dialog-button-border-radius-bottom-right: var(--ds-r-m);
}
#BorlabsCookieBox .brlbs-cmpnt-dialog .brlbs-cmpnt-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-tap);
  min-height: var(--ds-tap);
}
/* Fußlinks (Cookie-Details, Datenschutzerklärung, Impressum): 44 px über das Innenmaß, so stehen Knopf und Links auf einer Linie */
#BorlabsCookieBox .brlbs-cmpnt-dialog .brlbs-cmpnt-link:not(.brlbs-cmpnt-btn):not(.brlbs-cmpnt-back-button) {
  padding-block: calc((var(--ds-tap) - var(--dialog-font-size) * 0.875 * 1.25) / 2);
}
/* Kleine Knöpfe der Detailansicht (Alle auswählen, Alle abwählen) und „Zurück“ ebenfalls 44 px */
#BorlabsCookieBox .brlbs-cmpnt-dialog .brlbs-cmpnt-btn.brlbs-cmpnt-btn-sm { padding-block: calc((var(--ds-tap) - var(--dialog-font-size) * 0.875 * 1.25) / 2); }
#BorlabsCookieBox .brlbs-cmpnt-dialog .brlbs-cmpnt-link.brlbs-cmpnt-back-button { padding-block: calc((var(--ds-tap) - var(--dialog-font-size) * 0.875 * 1.25) / 2); }
/* Überschrift neben dem Logo: bei 390 px sonst abgeschnitten */
#BorlabsCookieBox .brlbs-cmpnt-dialog :is(.brlbs-cmpnt-dialog-entrance-headline, h2.brlbs-text-2xl) { font-size: 1.125rem; line-height: 1.25; }
@media (min-width: 40em) {
  #BorlabsCookieBox .brlbs-cmpnt-dialog :is(.brlbs-cmpnt-dialog-entrance-headline, h2.brlbs-text-2xl) { font-size: 1.375rem; }
}