/* ==========================================================================
   custom-styles.css (projektabhängig)
   - Basisflächen, Medien, Boxen, Buttons, Komponenten
   - ohne Grid-Layouts und ohne Navigation
   ========================================================================== */

/* Base (nur Farben/Flächen, keine Font-Regeln) */
body {
  background: var(--c-bg-light);
  color: var(--c-text-on-light);
}

/* Container */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
	  padding-top: var(--mod-pt, 0);
  padding-bottom: var(--mod-pb, 0);
}
.highlight {
    text-decoration-thickness: var(--link-underline);
    text-underline-offset: var(--link-underline-offset);
	color: var(--c-neon)
}
/* ==========================================================================
   Sections
   ========================================================================== */

.section{
  width: 100%;
  padding-top:    var(--sec-pt, var(--sp-1));
  padding-bottom: var(--sec-pb, var(--sp-1));
}

.mod{
  padding-top:    var(--mod-pt, 0);
  padding-bottom: var(--mod-pb, 0);
}

/* Wenn zwei gleichfarbige Grid-Sections direkt aufeinandertreffen:
   kein doppelter Abstand oben */
.section--light:has(.grid) + .section--light:has(.grid),
.section--dark:has(.grid) + .section--dark:has(.grid){
  padding-top: 0;
}

/* Section skins + Default Box colors */
.section--light{
  background: var(--c-bg-light);
  color: var(--c-text-on-light);

  /* Box: dunkel auf hell (Default) */
  --box-bg: var(--c-bg-dark);
  --box-fg: var(--c-text-on-dark);
}

.section--dark{
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);

  /* Box: hell auf dunkel */
  --box-bg: var(--c-bg-light);
  --box-fg: var(--c-text-on-light);
}

/* Footer */
.site-footer {
  width: 100%;
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
  padding-block: var(--space-footer-y);
}

/* ==========================================================================
   Vollbild
   ========================================================================== */

.section--imgFull .media__img{
  height: clamp(320px, 35vw, 720px);
}

/* Bilder im Container (base.css macht display/max-width schon) */
.container img {
  height: auto;
  border-radius: var(--r-1);
}

/* ==========================================================================
   Media (Basis)
   ========================================================================== */

.media {
  width: 100%;
  display: block;
  margin: 0;
}

.media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.section--ImgContainerWide .media__img{
  aspect-ratio: var(--ar-1);
}

/* ==========================================================================
   Boxen
   ========================================================================== */

.box {
  background: var(--box-bg, var(--c-marine));
  color: var(--box-fg, var(--c-text-on-dark));
  padding: var(--s-2);
  border-radius: var(--r-1);

  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Box-Heading: entspricht dem Standard h3 (Größe/LH/LS) + Semibold */
.box h3 {
  padding-bottom: 2em;
}

/* Inhalt am Box-Ende „ankern“ */
.box__body {
  margin-top: auto;
  display: grid;
  gap: var(--s-1);
}

/* Nur normale Links in Boxen erben die Box-Farbe – Buttons nicht */
.box a:not(.btn) {
  color: inherit;
}

/* ==========================================================================
   Box – Neon Variante (für grid_643… untere Textbox)
   ========================================================================== */

.box--neon{
  background: var(--c-neon);
  color: var(--c-marine);
}

/* Falls du innerhalb der Box Links hast */
.box--neon a:not(.btn){
  color: inherit;
}

/* --------------------------------------------------------------------------
   Box-Link (ISO / Zertifikate) – Outline-Variante
   -------------------------------------------------------------------------- */

.box--link,
a.box--link{
  background: var(--c-neon);
  color: var(--c-marine);

  border-radius: var(--r-1);
  padding: var(--s-2);

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  text-decoration:none;
  text-transform:uppercase;

  font-weight:var(--fw-semibold);
  font-size:clamp(1.4rem,2.2vw,2rem);
  line-height:var(--lh-tight);

  transition:
    background-color .2s ease,
    color .2s ease;
}


/* Hover / Focus */
.box--link:hover,
.box--link:focus-visible {
    background: var(--c-marine);
    color: var(--c-gray);
}


/* Inhalt in Linkbox immer zentrieren (überschreibt .box__body { margin-top:auto; }) */
.box--link .box__body{
  margin-top: 0;
  width: 100%;
  display: grid;
  place-items: center;
  gap: var(--s-1);
}
.box--link .box__body > *{ margin: 0; }


/* Optional: wenn Listen in Boxen vorkommen */
.box ul,
.box ol {
  margin: 0;
  padding-left: 1.2em;
}

.box li + li {
  margin-top: 0.35em;
}

/* ==========================================================================
   Box – Background Media (Bild als Inhaltsbild, kein inline style)
   ========================================================================== */

.box--bg{
  position: relative;
  overflow: hidden;
  color: var(--c-text-on-dark);
}

/* Bild liegt vollflächig im Hintergrund */
.box--bg .media--bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.box--bg .media--bg picture{
  display: block;
  width: 100%;
  height: 100%;
}
.media--col picture{
  display: block;
  width: 100%;
  height: 100%;
}
.box--bg .media--bg .media__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inhalt über Bild + Overlay */
.box--bg > *:not(.media--bg){
  position: relative;
  z-index: 2;
}

/* h3 in dieser Box ohne globales padding-bottom */
.box--bg h3{
  padding-bottom: 0;
}

/* Button unten „ankern“ */
.box--bg .box__body{
  margin-top: auto;
  padding-top: var(--g-2);
}
/* ==========================================================================
   BG-Box – Mobile 20/9
   ========================================================================== */

@media (max-width: 959.98px){

  .box--bg{
    aspect-ratio: 20 / 9;
  }

  .box--bg .media--bg{
    position: absolute;
    inset: 0;
  }

  .box--bg .media__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

}
/* ==========================================================================
   Button – Arrow Down (schräg ↓, Hover senkrecht ↓)
   ========================================================================== */

.btn--down{
  --btn-icon-mask: var(--icon-arrow-right);
  --btn-arrow-rotate-start: 0deg;
  --btn-arrow-rotate-hover: 90deg;
}

/* ==========================================================================
   Media – Produkt- & Partnerbilder
   ========================================================================== */

.box--media{
  background: var(--c-media-bg);

  padding: 0;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

@media (max-width: 959.98px){
  .box--media{ aspect-ratio: var(--ar-1); }
}

@media (min-width: 960px) {
  .box--media{ aspect-ratio: auto; }
}

.box--media .media {
  width: 100%;
  height: 100%;
  margin: 0;
}

.box--media .media__img {
  width: 100%;
  height: 100%;
  max-width: 100%;

  object-fit: contain;
  object-position: center;

  display: block;
}

/* ==========================================================================
   Produktbild (box--media) – vollständig sichtbar & zentriert
   ========================================================================== */

.box--media .media{
  display: flex;
  justify-content: center;
}

.box--media .media__img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* vollständige Darstellung */
  object-position: center;  /* zentriert in beide Richtungen */
}
/* ==========================================================================
   Grid 644v4 – Produktbild (Tablet)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1219.98px){

  .grid--644v4 .box--media .media{
    aspect-ratio: 20 / 9;
  }

  .grid--644v4 .box--media .media__img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

}
/* ==========================================================================
   Box Menu List (Untermenü in Box)
   ========================================================================== */

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

.box .menuList__item{
  margin: 0;
}

.box .menuList__item:not(:last-child){
  border-bottom: 1px solid currentColor;
}

.box .menuList__link{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-2);

  padding-block: 0.1em;
  text-decoration: none;

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-regular);

  transition: background-color 180ms ease-out, color 180ms ease-out;
}

.box .menuList__arrow{
  flex: 0 0 auto;
  width: 2.25em;
  height: 2.25em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow-right);
          mask-image: var(--icon-arrow-right);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform: rotate(var(--btn-arrow-rotate-start));
  transition: transform var(--btn-transition);
}

.box .menuList__link:hover,
.box .menuList__link:focus-visible{
  font-weight: var(--fw-medium);
}

.box .menuList__link:hover .menuList__arrow,
.box .menuList__link:focus-visible .menuList__arrow{
  transform: rotate(var(--btn-arrow-rotate-hover));
}

@media (hover: none){
  .box .menuList__link:hover{
    background: transparent;
    color: inherit;
  }
}

.box .menuList__link:active{
  background: var(--c-neon);
  color: var(--c-marine);
}

.box .menuList__link:active .menuList__arrow{
  transform: rotate(var(--btn-arrow-rotate-hover));
}

/* ==========================================================================
   Box Media – Foto (cover statt contain)
   ========================================================================== */

.box--mediaPhoto .media__img{
  object-fit: cover;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  width: fit-content;

  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  font-weight: var(--fw-bold);

  height: var(--btn-size);

  border: 0;
  border-radius: var(--btn-radius);
  overflow: hidden;

  text-decoration: none;

  color: var(--btn-text);
  padding-inline: var(--btn-text-pad-x);

  background: var(--btn-bg);

  transition:
    background-color var(--btn-transition),
    transform var(--btn-transition);
}

.btn:not(.btn--neon):not(.btn--arrow):hover,
.btn:not(.btn--neon):not(.btn--arrow):focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline, 0.08em);
  text-underline-offset: var(--link-underline-offset, 0.18em);
}

.btn:active {
  transform: scale(0.98);
}

.btn--arrow:hover,
.btn--arrow:focus-visible,
.btn--neon:hover,
.btn--neon:focus-visible {
  text-decoration: none;
  transform: none;
}

@supports (background: color-mix(in srgb, #000 50%, transparent)) {
  .btn {
    background: color-mix(
      in srgb,
      var(--btn-bg) var(--btn-bg-alpha),
      transparent
    );
  }

  .btn:hover,
  .btn:focus-visible {
    background: var(--btn-bg);
  }
}

.btn__icon {
  display: none;

  width: var(--btn-size);
  height: var(--btn-size);

  place-items: center;

  background: var(--btn-bg);
  color: var(--btn-text);

  border-radius: 50%;
  margin-right: var(--btn-icon-gap);
}

.btn__icon::before {
  content: "";
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);

  background-color: currentColor;

  -webkit-mask-image: var(--btn-icon-mask);
          mask-image: var(--btn-icon-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  transform: rotate(0deg);
  transition: transform var(--btn-transition);
}

.btn__text {
  white-space: nowrap;
}

.btn--arrow {
  --btn-icon-mask: var(--icon-arrow-right);
  padding-left: 0;
}

.btn--arrow .btn__icon {
  display: grid;
}

.btn--arrow .btn__icon::before {
  transform: rotate(var(--btn-arrow-rotate-start));
}

.btn--arrow:hover .btn__icon::before,
.btn--arrow:focus-visible .btn__icon::before {
  transform: rotate(var(--btn-arrow-rotate-hover));
}

.btn--neon {
  --btn-bg: var(--c-btn-bg);
  --btn-text: var(--c-marine);
  --btn-bg-alpha: 80%;
}

@media (hover: none) {
  .btn:hover {
    transform: none;
    text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn__icon::before {
    transition: none;
  }

  .btn--arrow .btn__icon::before,
  .btn--arrow:hover .btn__icon::before,
  .btn--arrow:focus-visible .btn__icon::before {
    transform: rotate(0deg);
  }
}


/* ==========================================================================
   RTE Buttons (ohne innere Spans)
   Emuliert .btn__icon + Pfeil über ::before/::after
   ========================================================================== */

.btn.btn--rte{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* wie .btn--arrow: padding links weg, Platz für Icon-Kreis schaffen */
.btn.btn--rte.btn--arrow{
  padding-left: 0;
  padding-right: var(--btn-text-pad-x);
  padding-inline: 0 var(--btn-text-pad-x);
  padding-left: 0;
  padding-left: 0; /* bewusst: links kommt der Kreis */
  padding-left: 0;
  /* Text startet nach Kreis + Gap */
  padding-left: calc(var(--btn-size) + var(--btn-icon-gap));
}

/* Icon-Kreis (entspricht .btn__icon) */
.btn.btn--rte.btn--arrow::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;

  width: var(--btn-size);
  height: var(--btn-size);

  border-radius: 50%;
  background: var(--btn-bg);
}

/* Pfeil (entspricht .btn__icon::before) */
.btn.btn--rte.btn--arrow::after{
  content: "";
  position: absolute;
  left: calc((var(--btn-size) - var(--btn-arrow-size)) / 2);
  top: 50%;
  translate: 0 -50%;

  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);

  /* volle Pfeilfarbe wie im System */
  background-color: var(--btn-text);

  -webkit-mask-image: var(--btn-icon-mask);
  mask-image: var(--btn-icon-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  transform: rotate(var(--btn-arrow-rotate-start));
  transition: transform var(--btn-transition);
}

/* Hover/Focus Rotation */
.btn.btn--rte.btn--arrow:hover::after,
.btn.btn--rte.btn--arrow:focus-visible::after{
  transform: rotate(var(--btn-arrow-rotate-hover));
}




/* ==========================================================================
   Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================== */
/* Header – Accessibility / Skip link                                          */
/* ========================================================================== */

/* Fixed nur wenn wrapper-content die Klasse header-fixed hat */
@media (min-width: 500px){
  .header-fixed .content-header{
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
  }
}

/* Skip link – nur sichtbar bei Tastaturfokus */
.skip-to-content{
  position: absolute;
  top: var(--g-2);
  left: var(--g-2);
  z-index: 1000;

  /* außerhalb des Viewports verstecken */
  transform: translateY(-140%);
  transition: transform 0.25s ease;

  display: inline-flex;
  align-items: center;
  padding: 0.75em 1em;
  border-radius: var(--r-1);

  background: var(--c-bg-light);
  color: var(--c-text-on-light);
  text-decoration: none;

  outline: none;
}

/* bei Fokus einblenden */
.skip-to-content:focus,
.skip-to-content:focus-visible{
  transform: translateY(0);
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ==========================================================================
   CTA – gemeinsam (zentriert + links)
   - gemeinsame Eyebrow-Typo
   - RTE-Margins in Headlines neutralisieren
   ========================================================================== */

.ctaBlock,
.ctaBlock2{
  color: var(--c-text-accent);
}

/* Dark-Section: Schriftfarbe grau (für beide) */
.section--dark :is(.ctaBlock, .ctaBlock2){
  color: var(--c-text-on-dark);
}

/* Eyebrow – identisch in beiden Varianten */
:is(.ctaBlock__eyebrow, .ctaBlock2__eyebrow){
  margin: 0;
  max-width: none;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
}

/* Headline – RTE-Margins neutralisieren (beide) */
:is(.ctaBlock__headline, .ctaBlock2__headline) > :first-child{ margin-top: 0; }
:is(.ctaBlock__headline, .ctaBlock2__headline) > :last-child{ margin-bottom: 0; }

/* ==========================================================================
   CTA Block – zentriert (Leitsatz)
   ========================================================================== */

.ctaBlock{
  text-align: center;
}

.ctaBlock__inner{
  max-width: 800px;
  margin-inline: auto;
}

:is(.ctaBlock__eyebrow){
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

.ctaBlock__headline{
  margin: 1rem 0 2.5rem;
  font-size: var(--cta-headline-size);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   CTA Block 2 – linksbündig
   ========================================================================== */

.ctaBlock2__headline{
  margin: 0;
  font-size: var(--cta2-headline-size);
  font-weight: var(--fw-semibold);
  line-height: var(--cta2-lh);
  letter-spacing: var(--cta2-letter-spacing);
  max-width: var(--cta2-max);
  margin-bottom: 2rem;
}

:is(.ctaBlock2__eyebrow){
  font-size: var(--cta2-eyebrow-size);
  line-height: var(--cta2-eyebrow-lh);
}

/* Optional: falls du später doch mal Text darunter nutzt */
.ctaBlock2__text{
  margin: 0;
  max-width: var(--cta2-max);
}

/* ==========================================================================
   IconList (Icon + Text)
   ========================================================================== */

.iconList__grid {
  display: grid;
  gap: var(--g-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  .iconList__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1224px) {
  .iconList__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1610px) {
    .iconList__grid {
        padding: 0 6rem;
    }
}
.iconList__grid > li {
  display: flex;
  align-items: center;
  gap: var(--s-1);

  min-width: 0;
  min-height: 0;

  max-width: none;
  margin-top: 0;

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
}

.iconList__icon {
  flex: 0 0 auto;

  inline-size: 2.3em;
  block-size: 2.3em;

  border-radius: 999px;
  background: var(--iconList-bg);

  display: inline-grid;
  place-items: center;
}

.iconList__icon::before {
  content: "";
  inline-size: var(--iconList-glyph-scale);
  block-size: var(--iconList-glyph-scale);

  background-color: var(--iconList-fg);

  -webkit-mask-image: var(--iconList-glyph);
          mask-image: var(--iconList-glyph);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.iconList__text {
  min-width: 0;
  text-align: left;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Varianten: über Section-Hintergrund (statt iconList--light/dark)
   -------------------------------------------------------------------------- */

.section--light.section--IconList {
  color: var(--c-blue);
  --iconList-bg: var(--c-blue);
  --iconList-fg: var(--c-gray);
}

.section--dark.section--IconList {
  /* Textfarbe für die Listeneinträge (falls ihr das nicht sowieso über section--dark setzt) */
  /* color: var(--c-text-on-dark); */

  --iconList-bg: var(--c-gray);
  --iconList-fg: var(--c-marine);
}

/* Optionaler Glyph-Variant-Hook auf Section-Ebene (da li ohne Klassen) */
.section--IconList.section--IconList--cross {
  --iconList-glyph: var(--icon-cross);
}



/* ==========================================================================
   MediaList – Bild/Ziffer links + Text rechts
   ========================================================================== */

.mediaList__grid{
  display: grid;
  gap: var(--mediaList-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px){
  .mediaList__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1224px){
  .mediaList__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mediaList__grid > li{
  display: grid;
  grid-template-columns: var(--mediaList-thumb) 1fr;
  gap: var(--mediaList-item-gap);
  align-items: start;
  max-width: none;
  margin-top: 0;
  min-width: 0;
}

.mediaList__media{
  width: var(--mediaList-thumb);
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-1);
}

.mediaList__media picture{
  display: block;
  width: 100%;
  height: 100%;
}

.mediaList__media .mediaList__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mediaList__body{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mediaList__label{ margin: 0; }

.mediaList__headline{
  margin: 0;
  font-size: calc(var(--fs-h3) * 0.9);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
a.mediaList__headline:hover{ text-decoration: underline; }

.mediaList__body > .btn{ margin-top: var(--mediaList-text-btn-gap); }

/* Fallback-Ziffer statt Bild (füllt exakt die Media-Fläche) */
.mediaList__num{
  width: 100%;
  height: 100%;
  border-radius: var(--r-1);
  background: var(--c-marine);
  color: var(--c-text-on-dark);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mediaList__numText{
  font-size: clamp(5rem, 9vw, 6rem);
  line-height: 1;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h2, 0);
  transform: translateY(-0.03em); /* optisch mittiger */
}

/* Mobile: Gap um ca. 50% reduzieren */
@media (max-width: 959.98px){
  .mediaList__grid{
    gap: 2.5rem;
  }

}


/* ==========================================================================
   MediaListNumText – Ziffer + Text
   ========================================================================== */

.section--mediaListNumText{

  /* Schriftgröße (16–17px) */
  --mediaListNumText-fs: clamp(1rem, 1.4vw, 1.0625rem);

}

/* Grid-Items dürfen volle Höhe nutzen */
.section--mediaListNumText .mediaList__grid > li{
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Zahlenbox – immer quadratisch, nicht mitstrecken
   -------------------------------------------------------------------------- */

.section--mediaListNumText .mediaList__media{
  width: var(--mediaList-thumb);
  aspect-ratio: 1 / 1;
  align-self: start;        /* verhindert vertikales Stretch */
}

/* Box selbst */
.section--mediaListNumText .mediaList__num{
  width: 100%;
  height: 100%;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
}
/* --------------------------------------------------------------------------
   Zahlenbox
   -------------------------------------------------------------------------- */

/* Default (helle Section): dunkle Box */
.section--mediaListNumText .mediaList__num{
  background: var(--c-marine);
  color: var(--c-text-on-dark);
}

/* Dark Section: helle Box */
.section--dark.section--mediaListNumText .mediaList__num{
  background: var(--c-gray);
  color: var(--c-marine);
}


/* --------------------------------------------------------------------------
   Textblock
   -------------------------------------------------------------------------- */

.section--mediaListNumText .mediaList__body--split{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* Label oben */
.section--mediaListNumText .mediaList__label{
  margin: 0;
  padding-bottom: 1em;
  font-size: var(--mediaListNumText-fs);
}

/* Headline + Text unten */
.section--mediaListNumText .mediaList__bottom{
  margin-top: auto;
}

/* Headline */
.section--mediaListNumText .mediaList__headline{
  margin: 0;
  font-size: var(--mediaListNumText-fs);
  font-weight: var(--fw-semibold);
}

/* Fließtext */
.section--mediaListNumText .mediaList__text{
  font-size: var(--mediaListNumText-fs);
}

/* saubere RTE-Abstände */
.section--mediaListNumText .mediaList__text > *:first-child{
  margin-top: 0;
}

.section--mediaListNumText .mediaList__text > *:last-child{
  margin-bottom: 0;
}



/* ==========================================================================
   FAQ Accordion – auf Basis von .box + .menuList
   - Sonderfall: section--dark soll optisch wie light wirken (Box + Hintergrund marine)
   ========================================================================== */

/* Headline-Abstand (eigene Variable) */
.container.faqAcc .box > h2{
  margin: 0;
  padding-bottom: var(--faqAcc-head-gap);
}

/* Trennlinien */
.container.faqAcc .box .menuList__item{
  border-bottom: 1px solid currentColor;
}

/* Summary */
.container.faqAcc .box summary.menuList__link{
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-regular);
}

/* Panel-Abstand */
.container.faqAcc .box .menuList__panel{
  padding-bottom: var(--g-2);
}

/* Marker entfernen */
.container.faqAcc .box summary.menuList__link::-webkit-details-marker{
  display: none;
}

.container.faqAcc .box summary.menuList__link::marker{
  content: "";
}

/* Kein aktiver/öffnen Hintergrund, ruhiges Schriftverhalten */
.container.faqAcc .box summary.menuList__link:active{
  background: transparent;
}

.container.faqAcc .box summary.menuList__link:hover,
.container.faqAcc .box summary.menuList__link:focus-visible,
.container.faqAcc .box details[open] > summary.menuList__link{
  background: transparent;
  color: inherit;
  -webkit-text-stroke: 0.03em currentColor;
}

/* Textbreite */
.container.faqAcc .box .menuList__panel p{
  margin: 0;
  max-width: var(--measure);
}

/* Open-State Icon (Plus -> Kreuz) */
.container.faqAcc .box details[open] .menuList__arrow{
  -webkit-mask-image: var(--icon-cross);
          mask-image: var(--icon-cross);
  transform: rotate(0deg);
}

.faq__cta{
  margin-top: var(--g-3);
}

/* --------------------------------------------------------------------------
   Sonderfall: section--dark → Hintergrund + Box sollen "marine" sein
   (Optik wie light, nur auf marine statt hell)
   -------------------------------------------------------------------------- */

.section--dark .container.faqAcc{
  background: var(--c-marine);
}

/* Falls .box im Dark-Theme sonst transparent/anders ist: hier explizit setzen */
.section--dark .container.faqAcc .box{
  background: var(--c-marine);
  color: var(--c-text-on-dark);
}

/* Linien/Farbe sollen zur Box passen */
.section--dark .container.faqAcc .box .menuList__item{
  border-bottom-color: currentColor;
}



/* ==========================================================================
   Zeitstrahl (Geschichte) – FINAL
   ========================================================================== */

.timeline__headline{
  margin: 0;
  padding-bottom: 2em;
}

@media (min-width: 960px){
  .grid--timeline{
    grid-template-columns: 1fr 1fr;
    gap: var(--g-3);
    align-items: stretch;
  }
}

.timeline__mediaCol{
  display: grid;
  gap: var(--g-2);
}

/* Mobile: sicher < 960px (robust gegen Rundung) */
@media (max-width: 959.98px){
  /* nur echte Medien-Figures zählen */
  .timeline__mediaCol > figure.timeline__media:nth-of-type(n + 2){
    display: none;
  }

  /* Mobile-AR fürs erste Bild */
  .timeline__mediaCol > figure.timeline__media:first-of-type .media__img{
    aspect-ratio: var(--ar-1);
    height: auto;
  }
}

@media (min-width: 960px){
  .timeline__mediaCol{
    height: 100%;
    grid-template-rows: repeat(3, 1fr);
    min-height: 0;
  }

  .timeline__media{
    margin: 0;
    border-radius: var(--r-1);
    overflow: hidden;
    position: relative;
    min-height: 0;
  }

  .timeline__media .media__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
  }
}

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

.timeline__list li + li{
  margin-top: 0;
}

.timeline__item{
  display: grid;
  grid-template-columns: auto 1.6em 1fr;
  column-gap: var(--g-2);
  align-items: stretch;
  min-width: 0;
}

.timeline__year{
  margin: 0;
  align-self: start;

  font-size: var(--grid555-number);
  line-height: 1;
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: currentColor;
}

.timeline__text{
  margin: 0;
  align-self: start;
  max-width: var(--measure);
  padding-bottom: var(--g-3);
}

.timeline__item:last-child .timeline__text{
  padding-bottom: 0;
}

.timeline__marker{
  position: relative;
  align-self: stretch;
  min-height: 0;
}

.timeline__marker::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: currentColor;
}

.timeline__marker::before{
  content: "";
  position: absolute;
  top: 0.25em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.9em;
  height: 0.9em;
  border-radius: 999px;
  background: currentColor;
  z-index: 1;
}

.timeline__item:first-child .timeline__marker::after{
  top: calc(0.25em + 0.45em);
}

.timeline__item:last-child .timeline__marker::after{
  bottom: auto;
  height: calc(0.25em + 0.45em);
}

.timeline__mediaMobile{ display: block; }
.timeline__mediaMulti{ display: none; }

@media (min-width: 960px){
  .timeline__mediaMobile{ display: none; }
  .timeline__mediaMulti{ display: block; }
}

@media (min-width: 960px){
  .timeline__mediaGrid{
    display: grid;
    gap: var(--g-3);
  }
}
@media (min-width: 960px){
  .timeline__mediaCol > figure.timeline__media:first-of-type{
    display: none;
  }
}
/* ==========================================================================
   Downloads – Buttonliste
   ========================================================================== */

/* Buttonliste */
.downloads__list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-2);
  align-items: flex-start;
  max-width: 900px;
}

/* Buttons sollen nicht auf volle Breite wachsen */
.downloads__list .btn{
  flex: 0 0 auto;
  height: auto;
  line-height: 1.5;
}

.downloads__list .btn__text{
  white-space: normal;
  overflow-wrap: break-word;
}



.section--legal{
  padding-top: clamp(12rem, 25vw, 20rem);
  padding-bottom: 0;
}

.legalContent__h1{
  padding: 0 0 2.5rem;
}



.textContent__h2{
    font-size: var(--fs-body);
    padding: 0;
}

.textContent__body h3{
  margin: 2.5rem 0 0.3rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.textContent__body h4{
  margin: 2.5rem 0 0.3rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);

}
.textContent__body h3+h4{
  margin: 2.5rem 0 0.3rem;
}

.textContent__body p{
  margin: 0 0 1rem;
  max-width: var(--measure);
}

.textContent__body ul,
.textContent__body ol{
  margin: 1rem 0 1.5rem 1.25rem;
}

.textContent__body li + li{
  margin-top: 0.35rem;
}



/* ==========================================================================
   Slider – Base (Klick, 1 Slide im Viewport, Loop per JS)
   ========================================================================== */

.section--sliderRefs {
    background: #fff;
}

.section--sliderBase .slider{
  --slider-nav-gap: 0.75rem;
  --slider-nav-size: var(--btn-size);
  --slider-nav-icon: var(--btn-arrow-size);

  position: relative;
}

.section--sliderBase .slider__viewport{
  position: relative;
  overflow: hidden;
}

.section--sliderBase .slider__track{
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
  will-change: transform;
}

.section--sliderBase .slider__slide{
  flex: 0 0 100%;
  width: 100%;
}

/* Nav */
.section--sliderBase .slider__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--slider-nav-size);
  height: var(--slider-nav-size);

  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;

  display: grid;
  place-items: center;

  background: var(--c-gray);
  color: var(--c-marine);

  transition: background-color var(--btn-transition);
}

.section--sliderBase .slider__nav:hover,
.section--sliderBase .slider__nav:focus-visible{
  background: var(--c-btn-bg);
}

.section--sliderBase .slider__nav::before{
  content: "";
  width: var(--slider-nav-icon);
  height: var(--slider-nav-icon);
  background-color: currentColor;

  -webkit-mask-image: var(--icon-arrow-right);
          mask-image: var(--icon-arrow-right);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.section--sliderBase .slider__nav--prev::before{
  transform: rotate(180deg);
}

.section--sliderBase .slider__nav--prev{ left: var(--slider-nav-gap); }
.section--sliderBase .slider__nav--next{ right: var(--slider-nav-gap); }

/* Position */
@media (min-width: 960px){
  .section--sliderBase .slider__nav{
    top: calc(50% - 0.5rem);
  }
}
@media (max-width: 959.98px){
  .section--sliderBase .slider__nav{
    top: 33%;
  }
}

/* Nav nur bei >1 Slide */
.section--sliderBase .slider[data-slides="1"] .slider__nav{
  display: none;
}


/* ==========================================================================
   Referenzen – Marquee (Auto, Endlosschleife)
   - nutzt data-speed="slow|normal|fast"
   - optional Pause bei Hover: .refsMarquee--pause
   ========================================================================== */

.section--sliderRefs .refsMarquee{
  /* Stellschrauben */
  --refs-gap: var(--g-3);
  --refs-pad-y: var(--s-1);
  --refs-logo-h: clamp(4.8rem, 8vw, 8rem);;          /* Logo-Höhe */
  --refs-speed: 60s;            /* Default (normal) */

  width: 100%;
}

.section--sliderRefs .refsMarquee[data-speed="slow"]{ --refs-speed: 45s; }
.section--sliderRefs .refsMarquee[data-speed="normal"]{ --refs-speed: 30s; }
.section--sliderRefs .refsMarquee[data-speed="fast"]{ --refs-speed: 18s; }

.section--sliderRefs .refsMarquee__viewport{
  overflow: hidden;
  width: 100%;
  padding-block: var(--refs-pad-y);
}

.section--sliderRefs .refsMarquee__track{
  display: flex;
  width: max-content;
  animation: refs-marquee var(--refs-speed) linear infinite;
  will-change: transform;
}

/* Zwei identische Reihen hintereinander */
.section--sliderRefs .refsMarquee__row{
  display: inline-flex;
  align-items: center;
  gap: var(--refs-gap);
  padding-right: var(--refs-gap); /* kleine Pufferlücke */
}

.section--sliderRefs .refsMarquee__item{
  flex: 0 0 auto;
}

.section--sliderRefs .refsMarquee__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

/* Logos: einheitliche Höhe, Breite automatisch */
.section--sliderRefs .refsMarquee__img{
  height: var(--refs-logo-h);
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--r-1);
}

/* Pause bei Hover */
.section--sliderRefs .refsMarquee--pause:hover .refsMarquee__track{
  animation-play-state: paused;
}

/* Optional: Fokus auch pausieren (für Tastatur) */
.section--sliderRefs .refsMarquee--pause:focus-within .refsMarquee__track{
  animation-play-state: paused;
}

/* Animation: Track läuft um die Breite von Reihe A nach links
   -> da A und B identisch hintereinander liegen, ist das nahtlos */
@keyframes refs-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Mobile: etwas kleinere Logos */
@media (max-width: 959.98px){
  .section--sliderRefs .refsMarquee{
    --refs-gap: var(--g-2);
  }
}




/* ==========================================================================
   Baukasten – Callouts + CTA
   Section: .section--baukastenCallouts
   - Mobile: Textbox ~70vw, min-height 200px, Bild überlappt von rechts
   - >=960px: Layout wie Foto, Textboxen gleiche Größe, Slot-Offsets + Bild-Auskragungen
   ========================================================================== */

.section--baukastenCallouts{
  --bc-gap: var(--g-3);
  --bc-gap-sm: var(--g-2);

  /* Farben (Fallbacks) */
  --bc-marine: var(--c-marine, #0a1e3c);
  --bc-on-marine: var(--c-text-on-dark, #ededed);

  /* MOBILE Textbox */
  --bc-mob-box-w: 70vw;         /* ca. 70% Viewport */
  --bc-mob-box-minh: 200px;     /* Mindesthöhe */
  --bc-mob-box-pr: 7.5rem;      /* rechter Innenabstand als "Textschutz" (Bild überdeckt nicht) */
  --bc-mob-img-w: clamp(300px, 51vw, 500px);
  --bc-mob-img-overlap-y: clamp(22px, 9vw, 80px); /* Bild liegt etwas unterhalb der Box */
  --bc-mob-img-overlap-x: 0px;  /* am Containerrand rechts */

  /* DESKTOP/Tablet Textbox – alle gleich */
  --bc-box-w: clamp(320px, 26vw, 470px);
  --bc-box-h: clamp(250px, 19vw, 350px);
  --bc-box-pr: 8.5rem;          /* Textschutz rechts (auch Desktop sinnvoll) */

  /* DESKTOP Bilder */
  --bc-img-w: clamp(500px, 39vw, 700px);
  --bc-img-drop: 70px;          /* nach unten auskragen */

  /* Slot-Offsets (Textbox leicht nach innen vom Containerrand) */
  --bc-c1-shift-x: 3rem;         /* c1 analog zur Handy-Ausgabe */
  --bc-c2-shift-x: 3rem;        /* links unten leicht nach innen */
  --bc-c3-shift-x: -3rem;       /* rechts unten leicht nach innen (negativ = nach links) */
}

/* --------------------------------------------------------------------------
   GRID: Mobile stacked | Desktop 8/6, stage full, 6/8
   -------------------------------------------------------------------------- */

.baukastenCalloutsGrid{
  display: grid;
  gap: var(--bc-gap);

  grid-template-areas:
    "cta"
    "stage"
    "c1"
    "c2"
    "c3";
}

.baukastenCalloutsGrid__cta{ grid-area: cta; min-width: 0; }
.baukastenCalloutsGrid__stage{ grid-area: stage; min-width: 0; }
.baukastenCalloutsGrid__c1{ grid-area: c1; min-width: 0; width: 100%; }
.baukastenCalloutsGrid__c2{ grid-area: c2; min-width: 0; width: 100%; }
.baukastenCalloutsGrid__c3{ grid-area: c3; min-width: 0; width: 100%; }

@media (min-width: 960px){
  .baukastenCalloutsGrid{
    grid-template-columns: 8fr 6fr;
    grid-template-areas:
      "c1    cta"
      "stage stage"
      "c2    c3";
    align-items: start;
  }
}

/* CTA */
.baukastenCallouts__header h2{ margin: 0; padding: 0; }
.baukastenCallouts__header .t-regular{ display: block; }
.baukastenCalloutsGrid__cta > .btn{ margin-top: var(--g-2); }

/* Stage: NICHT croppen */
.baukastenCallouts__stageMedia{
  margin: 0;
  position: static;
  height: auto;
  min-height: 0;
  overflow: visible;
  aspect-ratio: auto;
}
.baukastenCallouts__stageMedia .media__img{
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   CALLOUT – Basis: Überlagerung statt "nebeneinander"
   -------------------------------------------------------------------------- */

.baukastenCallouts__callout{
  position: relative;
  width: 100%;
  min-width: 0;

  /* Platz nach unten, weil Bild unten auskragt */
  padding-bottom: calc(var(--bc-mob-img-overlap-y) + 24px);
}

/* Text-Wrapper volle Breite, aber innerer Block hat definierte Breite */
.baukastenCallouts__calloutText{
  width: 100%;
  min-width: 0;
}

/* BLAUE BOX (Block) */
.baukastenCallouts__calloutTextInner{
  background: var(--bc-marine);
  color: var(--bc-on-marine);
  border-radius: var(--r-1);
  padding: var(--s-2);

  /* Mobile Default */
  width: var(--bc-mob-box-w);
  min-height: var(--bc-mob-box-minh);

  display: flex;
  align-items: flex-start;
}

.baukastenCallouts__calloutTextInner h3{ margin: 0; }
.baukastenCallouts__calloutTextInner .t-regular{ display: block; }

/* PRODUKTBILD (PNG) – absolut über der Box */
.baukastenCallouts__prodMedia{
  margin: 0;
  position: absolute;
  right: var(--bc-mob-img-overlap-x);
  bottom: calc(var(--bc-mob-img-overlap-y) * -.5);

  width: var(--bc-mob-img-w);
  max-width: var(--bc-mob-img-w);

  z-index: 2; /* über der Box */
}

.baukastenCallouts__prodImg{
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   MOBILE Feinschliff: sehr schmale Geräte
   -------------------------------------------------------------------------- */

@media (max-width: 479.98px){
  .baukastenCallouts__calloutTextInner{
    width: min(88vw, var(--bc-mob-box-w));
    padding-right: clamp(5rem, 20vw, var(--bc-mob-box-pr));
	min-height: 160px;
  }

  .baukastenCallouts__prodMedia{
    width: clamp(200px, 50vw, 300px);;
    bottom: -20px;
  }
	.baukastenCalloutsGrid {
		gap: 2rem;
	}
}

/* --------------------------------------------------------------------------
   >=960px: Foto-Layout (Textboxen gleich groß + Slot-spezifische Bildposition)
   -------------------------------------------------------------------------- */

@media (min-width: 960px){

  .baukastenCallouts__callout{
    padding-bottom: calc(var(--bc-img-drop) + 12px);
  }

  /* alle Textboxen gleich groß */
  .baukastenCallouts__calloutTextInner{
    width: var(--bc-box-w);
    min-height: var(--bc-box-h);
  }

  /* Standard Bildgröße Desktop */
  .baukastenCallouts__prodMedia{
    width: var(--bc-img-w);
    max-width: var(--bc-img-w);
	right: 0;
    bottom: calc(var(--bc-img-drop) * -1);
  }

  /* --- Slot 1 (oben links) – analog Mobile: Box links, Bild rechts am Containerrand, leicht tiefer --- */
  .baukastenCalloutsGrid__c1 .baukastenCallouts__calloutTextInner{
    transform: translateX(var(--bc-c1-shift-x));
  }

  /* --- Slot 2 (unten links) – Bild nach links bis Containerrand, kragt nach unten aus --- */
  .baukastenCalloutsGrid__c2 .baukastenCallouts__calloutTextInner{
    transform: translateX(var(--bc-c2-shift-x));
  }

  .baukastenCalloutsGrid__c2 .baukastenCallouts__prodMedia{
    left: 0;
    right: auto;
    bottom: calc(var(--bc-img-drop) * -1.7);
    transform: translateX(-7%); /* leicht nach links über den Rand (Feintuning) */
  }

  /* --- Slot 3 (unten rechts) – Bild sitzt links unten, ragt ~50% nach links raus + nach unten --- */
  .baukastenCalloutsGrid__c3{
    /* wir wollen hier "rechts" stehen, aber die Box etwas nach innen schieben */
    display: flex;
    justify-content: flex-end;
  }

  .baukastenCalloutsGrid__c3 .baukastenCallouts__callout{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .baukastenCalloutsGrid__c3 .baukastenCallouts__calloutTextInner{
    transform: translateX(var(--bc-c3-shift-x));
  }

  .baukastenCalloutsGrid__c3 .baukastenCallouts__prodMedia{
    left: 0;
    bottom: calc(var(--bc-img-drop) * -1.5);
    transform: translateX(-25%);
  }
}


@media (min-width: 1224px){
  .baukastenCalloutsGrid__c3 .baukastenCallouts__prodMedia{
    bottom: calc(var(--bc-img-drop) * -2);
    transform: translateX(-45%);
  }	

}



/* ==========================================================================
   CONNECTORS – Punkt am gegenüberliegenden Linienende
   - marine
   - nur ab 960px
   - Linie bleibt "am Pin", Punkt sitzt am anderen Ende (Pin ± Länge)
   ========================================================================== */

@media (min-width: 960px){

  .section--baukastenCallouts{
    --bc-line-c: var(--c-marine, #0a1e3c);
    --bc-line-w: 1px;
    --bc-dot: 10px;

    /* Linienlänge (fluid) */
    --bc-line-l1: 140px;
    --bc-line-l2: 100px;
    --bc-line-l3: 100px;	
	  
    /* Pins (wie bei dir/uns vorher): in % innerhalb des Slot-Elements */
    --bc-c1-pin-x: 75%;
    --bc-c1-pin-y: 87%;
    --bc-c2-pin-x: 40%;
    --bc-c2-pin-y: 0%;
    --bc-c3-pin-x: 32%;
    --bc-c3-pin-y: 0%;
  }

  .baukastenCalloutsGrid__c1,
  .baukastenCalloutsGrid__c2,
  .baukastenCalloutsGrid__c3{
    position: relative;
  }

  /* LINE */
  .baukastenCalloutsGrid__c1::after,
  .baukastenCalloutsGrid__c2::after,
  .baukastenCalloutsGrid__c3::after{
    content:"";
    position:absolute;
    width: var(--bc-line-w);
    background: var(--bc-line-c);
    z-index: 1;
    transform: translateX(-50%);
  }

  /* DOT (am gegenüberliegenden Linienende) */
  .baukastenCalloutsGrid__c1::before,
  .baukastenCalloutsGrid__c2::before,
  .baukastenCalloutsGrid__c3::before{
    content:"";
    position:absolute;
    width: var(--bc-dot);
    height: var(--bc-dot);
    border-radius: 999px;
    background: var(--bc-line-c);
    z-index: 5;
    transform: translate(-50%, -50%);
  }

  /* --------------------------------------------------
     c1: Linie startet am Pin und geht NACH UNTEN
         Punkt sitzt UNTEN am Linienende
     -------------------------------------------------- */

  .baukastenCalloutsGrid__c1::after{
    left: var(--bc-c1-pin-x);
    top: var(--bc-c1-pin-y);
    height: var(--bc-line-l1);
  }

  .baukastenCalloutsGrid__c1::before{
    left: var(--bc-c1-pin-x);
    top: calc(var(--bc-c1-pin-y) + var(--bc-line-l1));
  }

  /* --------------------------------------------------
     c2: Linie startet am Pin und geht NACH OBEN
         Punkt sitzt OBEN am Linienende
     -------------------------------------------------- */

  .baukastenCalloutsGrid__c2::after{
    left: var(--bc-c2-pin-x);
    top: var(--bc-c2-pin-y);
    height: var(--bc-line-l2);
    transform: translate(-50%, -100%); /* Linie nach oben */
  }

  .baukastenCalloutsGrid__c2::before{
    left: var(--bc-c2-pin-x);
    top: calc(var(--bc-c2-pin-y) - var(--bc-line-l2));
  }

  /* --------------------------------------------------
     c3: Linie startet am Pin und geht NACH OBEN
         Punkt sitzt OBEN am Linienende
     -------------------------------------------------- */

  .baukastenCalloutsGrid__c3::after{
    left: var(--bc-c3-pin-x);
    top: var(--bc-c3-pin-y);
    height: var(--bc-line-l3);
    transform: translate(-50%, -100%);
  }

  .baukastenCalloutsGrid__c3::before{
    left: var(--bc-c3-pin-x);
    top: calc(var(--bc-c3-pin-y) - var(--bc-line-l3));
  }
}



/* ==========================================================================
   Glossary
   ========================================================================== */


/* --------------------------------------------------------------------------
   A–Z Navigation
   -------------------------------------------------------------------------- */

.glossaryAz{
  margin-top: var(--s-3);
  margin-bottom: var(--s-5);
}

.container.glossaryAcc .glossaryAz__list{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
}

.glossaryAz__item{
  margin: 0;
}

.glossaryAz__link{
  display: inline-block;
  text-decoration: none;
  font-weight: var(--fw-regular);
}

.glossaryAz__link:hover,
.glossaryAz__link.is-active{
  -webkit-text-stroke: 0.06em currentColor;
}

.glossaryAz__link.is-disabled{
  opacity: .35;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Buchstaben-Gruppen
   -------------------------------------------------------------------------- */

.glossaryGroup{
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  scroll-margin-top: 7rem;
}

.glossaryGroup:first-of-type{
  margin-top: 0;
  padding-top: var(--s-4);
}

.glossaryGroup__letter{
  margin: 0 0 var(--s-4);
  font-size: clamp(6rem, 10vw, 15rem);
  line-height: 1;
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
}

.box h3.glossaryGroup__letter{
  padding-top: .8em;
  padding-bottom: .4em;
}


/* --------------------------------------------------------------------------
   Accordion (menuList)
   -------------------------------------------------------------------------- */

.container.glossaryAcc .box > h2{
  margin: 0;
  padding-bottom: 0;
}

.container.glossaryAcc .box .menuList__item{
  border-bottom: 1px solid currentColor;
}

.container.glossaryAcc .box summary.menuList__link{
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-regular);
}

.container.glossaryAcc .box summary.menuList__link::-webkit-details-marker{
  display: none;
}

.container.glossaryAcc .box summary.menuList__link::marker{
  content: "";
}

.container.glossaryAcc .box summary.menuList__link:hover,
.container.glossaryAcc .box summary.menuList__link:focus-visible,
.container.glossaryAcc .box details[open] > summary.menuList__link{
  background: transparent;
  color: inherit;
  -webkit-text-stroke: 0.03em currentColor;
}

.container.glossaryAcc .box details[open] .menuList__arrow{
  -webkit-mask-image: var(--icon-cross);
          mask-image: var(--icon-cross);
  transform: rotate(0deg);
}


/* --------------------------------------------------------------------------
   Permalink
   -------------------------------------------------------------------------- */

.glossary__permalink{
  grid-column: 2;
  justify-self: end;
  align-self: end;
  width: auto;
  margin: 0;
  transform: translate(-1.125em, -.4em);
}

.glossary__permalinkLink{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: .5;
  transition: opacity .2s ease;
}

.glossary__permalinkLink:hover,
.glossary__permalinkLink:focus-visible,
.glossary__permalinkLink.is-copied{
  opacity: 1;
}

.glossary__permalinkIcon{
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-color: currentColor;

  -webkit-mask-image: var(--icon-link);
          mask-image: var(--icon-link);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.glossary__permalinkMsg{
  position: absolute;
  right: 100%;
  margin-right: .5rem;
  white-space: nowrap;

  font-size: .8rem;
  line-height: 1;

  padding: .25rem .5rem;
  border-radius: 4px;

  background: var(--c-marine);
  color: var(--c-text-on-dark);

  box-shadow: 0 2px 6px rgba(0,0,0,.15);

  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;

  pointer-events: none;
  z-index: 2;
}

.glossary__permalinkLink.is-copied .glossary__permalinkMsg{
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Scroll / Fokus
   -------------------------------------------------------------------------- */

.glossary .menuList__item{
  scroll-margin-top: 1.5rem;
}

.glossary .menuList__item:focus,
.glossary .menuList__item:focus-visible{
  outline: none;
}


/* --------------------------------------------------------------------------
   Dark
   -------------------------------------------------------------------------- */

.section--dark .container.glossaryAcc{
  background: var(--c-marine);
}

.section--dark .container.glossaryAcc .box{
  background: var(--c-marine);
  color: var(--c-text-on-dark);
}


/* --------------------------------------------------------------------------
   Sticky A–Z Navigation
   -------------------------------------------------------------------------- */

@media (max-width: 499.99px){
  .container.glossaryAcc .box > h2{
    padding-bottom: var(--glossaryAcc-head-gap);
  }

  .glossary .menuList__item{
    scroll-margin-top: 1.5rem;
  }
}

@media (min-width: 500px){
  .section--glossary .glossaryAz{
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .section--light .glossaryAz, 
  .section--dark .glossaryAz{
    background: var(--c-marine);
  }
}

@media (min-width: 500px) and (max-width: 959.99px){
  .section--glossary .glossaryAz{
    padding-top: 100px;
  }

  .glossary .menuList__item{
    scroll-margin-top: 190px;
  }
}

@media (min-width: 960px) and (max-width: 1473.99px){
  .section--glossary .glossaryAz{
    padding-top: 220px;
  }

  .glossary .menuList__item{
    scroll-margin-top: 270px;
  }
}

@media (min-width: 1474px){
  .section--glossary .glossaryAz{
    padding-top: 200px;
  }

  .glossary .menuList__item{
    scroll-margin-top: 250px;
  }

  .box h3.glossaryGroup__letter{
    padding-top: .6em;
    padding-bottom: .3em;
  }
}



/* Section Außen oben */
.sec-pt-0{ --sec-pt: var(--sp-0); }
.sec-pt-1{ --sec-pt: var(--sp-1); }
.sec-pt-2{ --sec-pt: var(--sp-2); }
.sec-pt-3{ --sec-pt: var(--sp-3); }
.sec-pt-4{ --sec-pt: var(--sp-4); }
.sec-pt-5{ --sec-pt: var(--sp-5); }
.sec-pt-6{ --sec-pt: var(--sp-6); }
.sec-pt-7{ --sec-pt: var(--sp-7); }
.sec-pt-8{ --sec-pt: var(--sp-8); }
.sec-pt-9{ --sec-pt: var(--sp-9); }

/* Section Außen unten */
.sec-pb-0{ --sec-pb: var(--sp-0); }
.sec-pb-1{ --sec-pb: var(--sp-1); }
.sec-pb-2{ --sec-pb: var(--sp-2); }
.sec-pb-3{ --sec-pb: var(--sp-3); }
.sec-pb-4{ --sec-pb: var(--sp-4); }
.sec-pb-5{ --sec-pb: var(--sp-5); }
.sec-pb-6{ --sec-pb: var(--sp-6); }
.sec-pb-7{ --sec-pb: var(--sp-7); }
.sec-pb-8{ --sec-pb: var(--sp-8); }
.sec-pb-9{ --sec-pb: var(--sp-9); }

/* Modul Innen oben */
.mod-pt-0{ --mod-pt: var(--sp-0); }
.mod-pt-1{ --mod-pt: var(--sp-1); }
.mod-pt-2{ --mod-pt: var(--sp-2); }
.mod-pt-3{ --mod-pt: var(--sp-3); }
.mod-pt-4{ --mod-pt: var(--sp-4); }
.mod-pt-5{ --mod-pt: var(--sp-5); }
.mod-pt-6{ --mod-pt: var(--sp-6); }
.mod-pt-7{ --mod-pt: var(--sp-7); }
.mod-pt-8{ --mod-pt: var(--sp-8); }
.mod-pt-9{ --mod-pt: var(--sp-9); }

/* Modul Innen unten */
.mod-pb-0{ --mod-pb: var(--sp-0); }
.mod-pb-1{ --mod-pb: var(--sp-1); }
.mod-pb-2{ --mod-pb: var(--sp-2); }
.mod-pb-3{ --mod-pb: var(--sp-3); }
.mod-pb-4{ --mod-pb: var(--sp-4); }
.mod-pb-5{ --mod-pb: var(--sp-5); }
.mod-pb-6{ --mod-pb: var(--sp-6); }
.mod-pb-7{ --mod-pb: var(--sp-7); }
.mod-pb-8{ --mod-pb: var(--sp-8); }
.mod-pb-9{ --mod-pb: var(--sp-9); }

@media (min-width: 960px){

  /* Header liegt über Content, Hintergrund kommt von der Section darunter */
  .content-header{
    background: transparent;
	/* Versatz für Theme-Erkennung (wird von JS als px gelesen) */
    --header-theme-offset: -30px;
  }

  /* Zustand: Header steht über dunkler Section */
  .content-header.header--on-dark{
    --header-color: var(--c-gray);
  }

  /* Zustand: Header steht über heller Section */
  .content-header.header--on-light{
    --header-color: var(--c-marine);
  }

  /* Logo-Farbe per Filter umschalten (ohne zweites Asset) */
  .content-header.header--on-dark .brand__img{
    filter: brightness(0) invert(1);
  }

  .content-header.header--on-light .brand__img{
    filter: none;
  }
}


/* ==========================================================================
   Footer (GLÜCK)
   - Außenhülle: komplett marine, Schrift grau
   - Struktur: Container + Grid
   - Inhalte: Service-Menü (horizontal), Social Icons
   ========================================================================== */

/* --------------------------------------------------------------------------
   Basis (Wrapper)
   -------------------------------------------------------------------------- */

.wrapper-footer{
	font-size: var(--fs-footer);
	line-height: var(--lh-footer);
	letter-spacing: var(--ls-footer);
}

.wrapper-footer a:not(.btn){
  color: inherit;
}

.wrapper-footer > section,
.wrapper-footer > footer{
  background: transparent;
}

.wrapper-footer > section{ padding-top: var(--sp-3); }
.wrapper-footer > footer{  padding-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   Grid / Spalten
   -------------------------------------------------------------------------- */

.siteFooter__grid{
  display: grid;
  gap: var(--g-2);
}

@media (min-width: 960px){
  .siteFooter__grid{
    grid-template-columns: 426fr 716fr 374fr;
    align-items: start;
    min-width: 0; /* verhindert Überbreite durch Inhalte */
  }

  .siteFooter__col--left{
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }
  .siteFooter__col--mid{
    grid-column: 2;
    justify-self: start;
    min-width: 0;
  }
  .siteFooter__col--right{
    grid-column: 3;
    justify-self: end;
    text-align: right;
    min-width: 0;
  }
}

.siteFooter__row--bottom .siteFooter__col--left{
	font-weight: var(--fw-semibold);
}
.siteFooter__row--bottom nav{
	font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Zeilen / Abstände
   -------------------------------------------------------------------------- */

.siteFooter__row--top{
  padding-bottom: var(--sp-4);
}

/* Abstand zwischen Block 2 und Block 3 (FooterMenuGlueck separat gerendert) */
.siteFooter__part--meta{
  padding-top: var(--g-3);
}

/* Listen neutralisieren (Bullets + globale li+li Abstände) */
.wrapper-footer .siteFooter__menu,
.wrapper-footer .siteFooter__social{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrapper-footer .siteFooter__menu li + li,
.wrapper-footer .siteFooter__social li + li{
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Brand/Logo (über Header-Logik)
   -------------------------------------------------------------------------- */

.wrapper-footer.header--on-dark .brand__img{
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Zeile 3: Service-Menü
   -------------------------------------------------------------------------- */

.wrapper-footer .siteFooter__menu{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
  align-items: center;
}

.wrapper-footer .siteFooter__menu li{ margin: 0; }

.wrapper-footer .siteFooter__menu a{
  text-decoration: none;
}

.wrapper-footer .siteFooter__menu a:hover,
.wrapper-footer .siteFooter__menu a:focus-visible{
  text-decoration: underline;
}

.wrapper-footer .siteFooter__menu li.active a{
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Zeile 3: Social Media
   -------------------------------------------------------------------------- */

.wrapper-footer .siteFooter__social{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  align-items: center;
  justify-content: flex-end;
}

.wrapper-footer .siteFooter__socialLink{
  display: inline-grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
}

.wrapper-footer .siteFooter__socialLink:hover,
.wrapper-footer .siteFooter__socialLink:focus-visible{
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.wrapper-footer .siteFooter__socialIcon{
  inline-size: 1.4rem;
  block-size: 1.4rem;
  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* UID → Icon Mapping */
.wrapper-footer .siteFooter__socialLink--uid76 .siteFooter__socialIcon{
  -webkit-mask-image: var(--icon-facebook);
          mask-image: var(--icon-facebook);
}
.wrapper-footer .siteFooter__socialLink--uid80 .siteFooter__socialIcon{
  -webkit-mask-image: var(--icon-linkedin);
          mask-image: var(--icon-linkedin);
}
.wrapper-footer .siteFooter__socialLink--uid81 .siteFooter__socialIcon{
  -webkit-mask-image: var(--icon-youtube);
          mask-image: var(--icon-youtube);
}
.wrapper-footer .siteFooter__socialLink--uid75 .siteFooter__socialIcon{
  -webkit-mask-image: var(--icon-instagram);
          mask-image: var(--icon-instagram);
}

/* --------------------------------------------------------------------------
   Mobile Anpassungen
   -------------------------------------------------------------------------- */

@media (max-width: 959.98px){

  .siteFooter__row--top{
    padding-bottom: var(--sp-2);
  }

  /* Reihenfolge in Zeile 3 ändern */
  .siteFooter__row--bottom .siteFooter__col--left{  order: 3; } /* Copyright */
  .siteFooter__row--bottom .siteFooter__col--mid{   order: 2; } /* Service */
  .siteFooter__row--bottom .siteFooter__col--right{ order: 1; } /* Social */

  .wrapper-footer .siteFooter__social{
    justify-content: flex-start;
  }
}

section.boxed {
    border-radius: 12px !important;
    background: red !important;

}


/* ==========================================================
   Footer Post-It
   ========================================================== */

.footerPostIt{
  height:0;
}

/* Container als Referenz */
.footerPostIt__container{
  position:relative;
}

.footerPostIt__img{
  position:absolute;
  right:28%;
  transform:translateY(var(--sp-3)) rotate(15deg);
  width:clamp(160px,14vw,250px);
  display:block;
  z-index:20;
}

.footerPostIt__link{
  display:inline-block;
}

@media (max-width:959.98px){

  .footerPostIt__img{
    right:var(--container-pad);
    width:clamp(90px,28vw,150px);
  }

}
@media (max-width:499.98px){
  .footerPostIt__img{
    right:var(--container-pad);
    transform:translateY(-80%) rotate(15deg);
  }

}