/* ==========================================================================
   grids.css (projektabhängig)
   - Grid-System + Grid-Varianten + grid-bezogene Media/Layouts
   ========================================================================== */

/* ==========================================================================
   Grid – Basis
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--g-2);
  align-items: stretch !important;
}
.grid > * {
  min-height: 0;
  min-width: 0;
}

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

/* ==========================================================================
   Grid – Helper
   ========================================================================== */

.col {
  display: flex;
  flex-direction: column;
  gap: var(--g-2);
  min-height: 0;
}

.col__top,
.col__head {
  display: block;
  min-height: 0;
}

.col__top h2,
.col__head h2 {
  padding: var(--s-2);
}

.col__bottom {
  display: flex;
  flex: 1;
  min-height: 0;
}

.col__bottom > .box,
.col__bottom > .box--link,
.col__bottom > a.box--link {
  flex: 1;
  width: 100%;
  min-height: 100%;
}

.col__bottom > .stack,
.col__bottom > .colstack {
  flex: 1;
  min-height: 0;
}

.stack,
.colstack {
  display: grid;
  gap: var(--g-2);
  min-height: 0;
}

/* Typo-Helper (gewichtete Utilities bleiben hier ok) */
.t-regular { font-weight: var(--fw-light); }
.t-strong  { font-weight: var(--fw-semibold); }

/* ==========================================================================
   Grid – Layouts
   ========================================================================== */

/* grid--644 */
@media (min-width: 1224px) {
  .grid--644 { grid-template-columns: 664fr 426fr 426fr; }
}
@media (min-width: 960px) and (max-width: 1223px) {
  .grid--644 { grid-template-columns: repeat(2, 1fr); }
  .grid--644 > :nth-child(1) { grid-column: 1 / -1; }
}

/* grid--464 */
@media (min-width: 1224px) {
  .grid--464 { grid-template-columns: 426fr 664fr 426fr; }
}
@media (min-width: 960px) and (max-width: 1223px) {
  .grid--464 { grid-template-columns: repeat(2, 1fr); }
  .grid--464 > :nth-child(1) { grid-column: 1 / -1; }
}
@media (min-width: 1224px){
  .grid--464{
    align-items: stretch;
  }

  .grid--464 > .media--match{
    height: 100%;
  }

  .grid--464 > .media--match .media__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
/* grid--643 */
@media (min-width: 1224px) {
  .grid--643 { grid-template-columns: 664fr 480fr 372fr; }
}
@media (min-width: 960px) and (max-width: 1223px) {
  .grid--643 { grid-template-columns: repeat(2, 1fr); }
  .grid--643 > :nth-child(1) { grid-column: 1 / -1; }
}

/* grid--68 */
@media (min-width: 1224px) {
  .grid--68 { grid-template-columns: 664fr 872fr; }
}

@media (min-width: 960px) and (max-width: 1223px) {
  .grid--68 { grid-template-columns: repeat(2, 1fr); }
}

/* grid--3333 */
@media (min-width: 960px) {
  .grid--3333 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1224px) {
  .grid--3333 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Grid 3333 – H2 + Box | Box | Bild+Box | Box
   Listen mit Pfeil-Icon (nur dieses Element)
   ========================================================================== */

.section--3333-h2img{
  --list-arrow-size: 2em;      /* eigene Größe */
  --list-arrow-offset-y: -0.2em; /* vertikale Feinjustierung */
}

.section--3333-h2img .box__body ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.section--3333-h2img .box__body li{
  position: relative;
  padding-left: calc(var(--list-arrow-size) + 0.8rem);
  margin-bottom: 1em;
}

.section--3333-h2img .box__body li:last-child{
  margin-bottom: 0;
}

.section--3333-h2img .box__body li::before{
  content: "";
  position: absolute;
  left: 0;

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

  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;

  /* Zentrierung zur ersten Textzeile */
  top: var(--list-arrow-offset-y);
}
/* ==========================================================================
   Grid 3333 – Spalte 3: Bild wächst, Box bleibt kompakt
   (nur section--3333-h2img)
   ========================================================================== */

@media (min-width: 960px){
  .section--3333-h2img .grid--3333 > .col{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Bildbereich nimmt den verfügbaren Platz */
  .section--3333-h2img .grid--3333 > .col .col__top{
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .section--3333-h2img .grid--3333 > .col .col__top .media{
    width: 100%;
    height: 100%;
  }

  .section--3333-h2img .grid--3333 > .col .col__top .media__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Box unten soll NICHT unnötig wachsen */
  .section--3333-h2img .grid--3333 > .col .col__bottom{
    flex: 0 0 auto;
  }
}
/* ==========================================================================
   Grid 643 – Varianten
   ========================================================================== */

/* v2: Desktop, Bild fuellt Resthoehe ohne AR */
@media (min-width: 1224px) {
  .grid--643v2 .stack--media-fill {
    align-self: stretch;
    height: 100%;
    grid-template-rows: auto 1fr;
  }

  .grid--643v2 .stack--media-fill > .media {
    height: 100%;
    overflow: hidden;
    display: flex;
  }

  .grid--643v2 .stack--media-fill > .media .media__img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* v3: Pair-Flow (mobile + desktop untereinander) */
@media (max-width: 959.98px), (min-width: 1224px) {
  .grid--643v3 .pair,
  .grid--643v3 .pair__text {
    display: grid;
    gap: var(--g-2);
    min-height: 0;
  }
}

/* v3: Tablet, Item 1 intern zweispaltig (Text | Bild) */
@media (min-width: 960px) and (max-width: 1223px) {
  .grid--643v3 .pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-2);
    align-items: stretch;
    min-height: 0;
  }

  .grid--643v3 .pair > * { min-height: 0; }

  .grid--643v3 .pair__text {
    display: grid;
    gap: var(--g-2);
    align-content: start;
    min-height: 0;
  }
}


/* ==========================================================================
   Grid 68 v3 – Produktfläche (zentriert + contain)
   ========================================================================== */

/* Produkt-Box als Zentrier-Container */
.grid68v3Product .box--media{
  display: flex;
  align-items: center;     /* vertikal */
  justify-content: center; /* horizontal */
}

/* Figure darf mitwachsen */
.grid68v3Product .box--media .media{
  width: 100%;
  height: 100%;
}

/* Picture muss Fläche übernehmen */
.grid68v3Product .box--media picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* Produktbild */
.grid68v3Product .box--media .media__img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* wichtig */
  object-position: center;    /* zentriert in beide Richtungen */
}

/* ==========================================================================
   Grid 68 v3 – Bild füllend (cover)
   Gilt nur für das Mask-Element: .grid68v3imgfill
   ========================================================================== */

.grid68v3imgfill .box--mediaFill{
  height: 100%;
}

/* PictureResponsive (<picture>) muss die Höhe mitnehmen */
.grid68v3imgfill .box--mediaFill .media,
.grid68v3imgfill .box--mediaFill .media picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* Bild füllt die Fläche in beide Richtungen */
.grid68v3imgfill .box--mediaFill .media__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ==========================================================================
   Grid 68 – H2 + Boxen 6/8 (Repeater)
   ========================================================================== */

.section--grid68-h2boxes .grid--68r{
  display: grid;
  gap: var(--g-2);
}

@media (min-width: 960px){

  .section--grid68-h2boxes .grid--68r{
    grid-template-columns: repeat(14, 1fr);
    align-items: stretch;
  }

  .section--grid68-h2boxes .col--6{
    grid-column: span 6;
  }

  .section--grid68-h2boxes .col--8{
    grid-column: span 8;
  }
	
  .section--grid68-h2boxes .box{
    min-height: 18rem;
  }
}

/* ==========================================================================
   Media (gridbezogene Erweiterungen)
   ========================================================================== */

/* Mobile-first: Spaltenbilder mit AR */
.media--col .media__img {
  aspect-ratio: var(--ar-1);
  height: auto;
}

/* v3: Bilder duerfen ab 960px ohne AR wachsen (nur wenn media--v3grow gesetzt) */
@media (min-width: 960px) {
  .grid--643v3 .media--v3grow {
    overflow: hidden;
    display: flex;
  }

  .grid--643v3 .media--v3grow .media__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Optional: Ratio-Klasse */
.media--ar-1 .media__img { aspect-ratio: var(--ar-1); }

/* Match (nur wenn media--match im HTML genutzt) */
@media (max-width: 959.98px) {
  .media--match {
    position: static;
    height: auto;
    overflow: visible;
  }
  .media--match .media__img {
    position: static;
    height: auto;
  }
}

@media (min-width: 960px) {
  .media--match {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    aspect-ratio: var(--ar-1);
  }
  .media--match .media__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* grid--644: anderes AR in schmalen Spalten */
@media (min-width: 1224px) {
  .grid--644 .media--col .media__img { aspect-ratio: var(--ar-644); }
}


/* ==========================================================================
   Grid 644 – Text | Linkboxen | BG-Bild
   ========================================================================== */

.section--grid644Links .grid644Links__links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--g-2);
}

/* Mobile → Links untereinander */
@media (max-width:959.98px){
  .section--grid644Links .grid644Links__links{
    grid-template-columns:1fr;
  }
}

/* Desktop → untereinander + gleiche Höhe wie Textspalte */
@media (min-width:960px){

  .section--grid644Links .grid644Links__links{
    grid-template-columns:1fr;
    grid-template-rows:repeat(2,1fr);
    height:100%;
  }

}

/* ==========================================================================
   Linkboxen
   ========================================================================== */

/* globales margin-top der box überschreiben */
.section--grid644Links .box--link .box__body{
  margin-top:0;
  display:block;
}

/* Absatzabstände entfernen */
.section--grid644Links .box--link p{
  margin:0;
}


/* ==========================================================================
   ImgText 68 – Bild links + Text rechts
   ========================================================================== */

/* Mobile / 1-spaltig: 20/9 */
.imgText68 .media{
  aspect-ratio: var(--ar-1);   /* 20 / 9 */
  overflow: hidden;
}

/* picture übernimmt Containerhöhe */
.imgText68 .media picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* Bild füllt Container */
.imgText68 .media .media__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Desktop (2-spaltig): 4/3 */
@media (min-width: 960px){
  .imgText68 .media{
    aspect-ratio: var(--ar-43);   /* 4 / 3 */
  }
}

/* Textspalte */
.imgText68__text{
  padding: var(--s-2);
}

/* Zeilenlänge */
.imgText68__text p{
  max-width: var(--measure);
}

/* Abstand zum Button */
.imgText68__text > .btn{
  margin-top: var(--g-2);
}

/* ========================================================================== 
   Grid 644 – zwei Linkboxen nebeneinander
   ========================================================================== */

.col__bottom--links2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--g-2);
  min-width:0;
}

.col__bottom--links2 > .box--link{
  width:100%;
}

/* ==========================================================================
   Grid 555 – Drei gleichbreite Textspalten
   - transparente Box (Padding wie .box)
   - ab Tablet: h3-Block auf feste Höhe (4 Zeilen + 1 Zeile Luft)
   - Body startet überall gleich, Button unten
   - Button wie btn--neon vom Aufbau, Farben je Section
   ========================================================================== */

/* Grid Layout */
@media (min-width: 960px){
  .grid--555{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--g-3);
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Box – transparent (nutzt Box-Padding & Radius)
   -------------------------------------------------------------------------- */

.grid--555 .box--transparent{
  background: transparent;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Box-Inhalt – 3 Zonen
   -------------------------------------------------------------------------- */

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

/* Head (h3) */
.box .grid555__head{
  margin: 0;
  padding-bottom: 1em; 

  /* h3-Typo absichern */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.grid555__number{
  font-size: var(--grid555-number);
}
/* Ab Tablet: Head auf feste Höhe setzen (4 Zeilen Inhalt + 1 Zeile Luft) */
@media (min-width: 960px){
  .box .grid555__head{
    --grid555-head-lines: 5;
    --grid555-head-air: 1;
    height: calc(
      (var(--grid555-head-lines) + var(--grid555-head-air))
      * var(--lh-h3) * 1em
    );
    overflow: hidden; /* falls mal 6 Zeilen entstehen */
	padding-bottom: 2em;
  }
}

/* Body (RTE) */
.grid555__body{
  margin: 0;
}

/* kontrollierte Zeilenlänge im Fließtext */
.grid555__body p{
  max-width: var(--measure);
}

/* Footer (Button unten) */
.grid555__footer{
  margin-top: auto;
  padding-top: var(--g-2);
}

/* --------------------------------------------------------------------------
   Button – Grid 555
   - Aufbau wie Neon-Button (Icon links, Alpha-Fläche)
   - Farben abhängig von Section
   -------------------------------------------------------------------------- */

.btn--555{
  --btn-bg-alpha: 80%;
}

/* Light: marine Fläche, graue Schrift */
.section--light .btn--555{
  --btn-bg: var(--c-marine);
  --btn-text: var(--c-gray);
}

/* Dark: graue Fläche, marine Schrift */
.section--dark .btn--555{
  --btn-bg: var(--c-gray);
  --btn-text: var(--c-marine);
}

/* ==========================================================================
   Grid 77 – 2 Spalten (50/50), gleiche Start-/Endhöhe
   - Mobile: 1 Spalte im Textfluss
   - Tablet+: 2 gleichbreite Spalten
   - je Spalte: optional H2 oben (nur links), dann Logo-Box + Textbox
   ========================================================================== */

/* Tablet+ */
@media (min-width: 960px){
  .grid--77{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid77-gap);
    align-items: stretch;
  }
}

/* Spalten */
.grid--77 > .col{
  min-height: 0;
}

/* H2 nur links */
.grid77__h2{
  padding: var(--s-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Logo-Box
   -------------------------------------------------------------------------- */

.grid77__logoBox{
  color: var(--c-text-on-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PictureResponsive sauber einpassen */
.grid77__logoBox .media{
  width: 100%;
  height: 100%;
}

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

/* Logo immer vollständig sichtbar */
.grid77__logoBox .media__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Textbox
   -------------------------------------------------------------------------- */

.grid77__textBox h3{
  margin: 0;
  padding-bottom: 0; /* kein großer H3-Abstand */
}

/* Spacer für Höhenabgleich */
.grid77__spacer{
  height: var(--grid77-spacer);
}

/* Footer unten ausrichten */
.grid77__footer{
  margin-top: auto;
  display: grid;
  gap: var(--s-1);
}

.grid77__footer p{
  margin: 0;
  max-width: var(--measure);
}

/* ==========================================================================
   Grid 68 – Kontakt / Anfahrt (Contact68)
   - Links: Marine-Textbox (Adresse unten)
   - Rechts: DrDSGVO Map im Bild-Slot + Button-Overlay
   - Mobile: feste Mindesthöhe (damit Button nicht “rausläuft”)
   - ab Tablet: quadratisch (1/1)
   ========================================================================== */

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

/* Adresse unten in Box */
.contact68__addr{
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Karte rechts (DrDSGVO)
   -------------------------------------------------------------------------- */

/* Stellschraube */
:root{
  --contact68-map-min-h: 18rem; /* Mobile Mindesthöhe */
}

.contact68__map{
  position: relative;
  margin: 0;
}

/* Slot wie Bildplatzhalter */
.contact68__mapInner{
  position: relative;
  width: 100%;
  min-height: var(--contact68-map-min-h); /* verhindert Button-Overflow bei schmalen Screens */
  border-radius: var(--r-1);
  overflow: hidden;
}

/* Map füllt Slot */
.contact68__mapCanvas,
.contact68__mapInner > .drdsgvo_map{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Button unten links auf der Karte */
.contact68__mapBtn{
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  z-index: 2;
}

/* Optional: bessere Lesbarkeit auf “Bild/Map”-Untergrund */
@supports (background: color-mix(in srgb, #000 50%, transparent)){
  .contact68__mapBtn.btn--neon{
    --btn-bg-alpha: 90%;
  }
}

/* ab Tablet: quadratischer Slot (Höhe über aspect-ratio, min-height entfällt) */
@media (min-width: 960px){
  .contact68__mapInner{
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .contact68__mapBtn{
    left: var(--g-3);
    bottom: var(--g-3);
  }
}

/* ==========================================================================
   Grid 68 Match – Bild passt sich Boxhöhe an (PictureResponsive)
   ========================================================================== */

@media (min-width: 960px){
  /* bei match-height keine Ratio erzwingen */
  .grid68Match .media--match{
    aspect-ratio: auto;
  }
}

/* <picture> muss den Match-Container vollständig füllen */
.grid68Match .media--match picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* Bild füllt die Fläche (falls nicht schon global) */
.grid68Match .media--match .media__img{
  object-fit: cover;
  object-position: center;
}


/* ==========================================================================
   Grid 68 – Bildpaar + Text
   - links: 2 quadratische Bilder nebeneinander (immer)
   - rechts: Textbox (immer marine), normaler Dokumentenfluss
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bildpaar (linke Spalte)
   -------------------------------------------------------------------------- */

.mediaPair{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g-2);
  min-width: 0;
}

.mediaPair__media{
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-1);
}

.mediaPair__media .media__img{
  width: 100%;
  height: auto;

  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;

  display: block;
}

/* --------------------------------------------------------------------------
   Textbox (rechte Spalte)
   - immer marine, unabhängig von section
   - kein Höhen-Flex, normaler Flow
   -------------------------------------------------------------------------- */

.grid68What__box{
  background: var(--c-marine);
  color: var(--c-text-on-dark);
  padding: var(--s-2);
  border-radius: var(--r-1);
  display: block;
}

/* h2: Standard-Grid-Verhalten (kein Override für Mobile) */
.grid68What__box > h2,
.grid68What__box > h3{
  margin: 0;
  padding-bottom: var(--s-2);
}

/* Fließtext */
.grid68What__box p{
  margin: 0;
  max-width: var(--measure);
}

/* Button unter Text */
.grid68What__box > .btn{
  margin-top: var(--g-2);
}
@media (min-width: 960px){
  .section--dark .grid68What__box{
	  padding-top: 0;
	}
}

/* grid68what – Media nebeneinander */
.grid68What__media{
  display: grid;
  gap: var(--g-2);
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.grid68What__media .media{
  margin: 0;
  border-radius: var(--r-1);
  overflow: hidden;
}

/* ==========================================================================
   Page Intro – Typografie & Basis
   - h1 im Eyebrow-Stil
   - Headline wie ctaBlock2
   - keine eigenen Abstände (Layout steuert die Section)
   ========================================================================== */

.pageIntro{
  padding-block: 0;                 /* wichtig: keine Doppel-Abstände */
}

.section--light .pageIntro{
  color: var(--c-blue);
}

/* h1 = Eyebrow-Look (semantisch korrekt) */
.pageIntro__h1{
  margin: 0;

  text-transform: uppercase;
  letter-spacing: var(--ls-wide);

  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-semibold);
  color: inherit;
}

/* Headline: Größe wie ctaBlock2 */
.pageIntro__headline{
  margin: 1.25rem 0 2rem;

  max-width: var(--cta2-max);
  margin-inline: auto;

  font-size: var(--cta2-headline-size);
  letter-spacing: var(--cta2-letter-spacing);	
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: inherit;
}

/* Button – Default mittig (Center-Variante) */
.pageIntro .btn{
  margin-inline: auto;
}


/* ==========================================================================
   Page Intro – Shared Base (Full Viewport + Header-Offset)
   ========================================================================== */

.section--pageIntroFull{
  min-height: 100svh;
  display: flex;
  align-items: center;

  /* Header-Offset über Section-Variablen */
  --sec-pt: var(--mobHeader-h);
  --sec-pb: 0;
}

@media (min-width: 960px){
  .section--pageIntroFull{
    --sec-pt: var(--header-h-desktop);
  }
}

/* Alle PageIntro-Varianten: Container volle Breite */
.section--pageIntroFull > .container{
  width: 100%;
}


/* ==========================================================================
   Page Intro – Variante Center (zentriert, Full Viewport)
   ========================================================================== */

.section--pageIntroCenter > .container{
  display: flex;
  justify-content: center;
}

.section--pageIntroCenter .pageIntro{
  text-align: center;
  max-width: var(--pageIntro-max);
  margin-inline: auto;
}

.section--pageIntroCenter .pageIntro .btn{
  margin-inline: auto;
}


/* ==========================================================================
   Page Intro – Variante Bottom68 (Grid 68, Text rechts unten)
   ========================================================================== */

.section--pageIntroBottom68{
  align-items: flex-end;
  --sec-pb: var(--pageIntro-bottom-space);
}

/* Mobile: normaler Fluss (keine Zentrierung, kein Grid) */
.section--pageIntroBottom68 > .container{
  display: block;
}

/* Textblock */
.section--pageIntroBottom68 .pageIntro{
  text-align: left;
  max-width: var(--cta2-max);
  margin-inline: 0;
}

/* Button linksbündig */
.section--pageIntroBottom68 .pageIntro .btn{
  margin-inline: 0;
}

/* Desktop / Tablet: Grid 68 + Text rechts */
@media (min-width: 960px){
  .section--pageIntroBottom68 > .container{
    display: grid;
    grid-template-columns: 664fr 872fr;
    gap: var(--g-3);
    align-items: end;
  }

  .section--pageIntroBottom68 .pageIntro{
    grid-column: 2;
    align-self: end;
  }
}

/* ==========================================================================
   Page Intro – Variante 3 (Grid 68) – Layout
   ========================================================================== */

@media (min-width: 960px){
  .section--hero68{
    --sec-pt: var(--sp-2);
    --sec-pb: var(--sp-2);
  }

  .section--hero68 .pageIntro{
    display: grid;
    grid-template-columns: 664fr 872fr;
    gap: var(--g-3);
    align-items: start;
  }

  .content-header .container.header68{
    --mod-pt: var(--sp-2);
    --mod-pb: var(--sp-2);
  }
}

.section--hero68 .pageIntro68__text{
  text-align: left;
  padding-top: var(--pageIntro68-text-pad-top);
}

.section--hero68 .pageIntro68__text .pageIntro__headline,
.section--hero68 .pageIntro68__text .btn{
  margin-inline: 0;
}

/* Mobile: Text unten etwas Luft */
@media (max-width: 959.98px){
  .section--hero68 .pageIntro68__text{
    padding-bottom: var(--container-pad);
  }
}

/* Wrapper */
.section--hero68 .pageIntro{
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-1);
}

/* Media: AR am Container (stabil mit <picture>) */
.section--hero68 .pageIntro68__media.media{
  aspect-ratio: var(--ar-1); /* Mobile: 20/9 */
  overflow: hidden;
}

/* <picture> übernimmt Containergröße */
.section--hero68 .pageIntro68__media.media picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* Bild füllt Container */
.section--hero68 .pageIntro68__media.media .media__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Desktop/Tablet: quadratisch */
@media (min-width: 960px){
  .section--hero68 .pageIntro68__media.media{
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   Hero68 – PostIt Overlay
   ========================================================================== */

/* PostIt muss über dem Bild liegen + klickbar */
.pageIntro68__mediaWrap{
  position: relative;
  overflow: visible;
}

/* figure kann einen stacking context erzeugen -> z-index sauber setzen */
.pageIntro68__mediaWrap .pageIntro68__media{
  position: relative;
  z-index: 1;
}

/* Innen: Bild bleibt sauber geclippt */
.pageIntro68__media{
  overflow: hidden;
  border-radius: var(--r-1);
  margin: 0;
}

.pageIntro68__mediaWrap .hero68PostIt{
  position: absolute;
  z-index: 3;
  pointer-events: auto;      /* wichtig: klickbar */
  display: block;            /* verlässlich klickfläche */

  /* Mobile */
    top: clamp(-4rem, 20vw, -10rem);
    right: 2rem;

  width: clamp(120px, 20vw, 300px);

  transform: rotate(15deg);
  transition: transform 0.25s ease;
}

/* Nur dekorativ → nicht klickbar */
.pageIntro68__mediaWrap .hero68PostIt:not(.hero68PostIt--link){
  pointer-events: none;
}

.pageIntro68__mediaWrap .hero68PostIt__img{
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop */
@media (min-width: 960px){
  .pageIntro68__mediaWrap .hero68PostIt{
    top: 15%;
    left: -11rem;
    right: auto;
  }
}
@media (min-width: 960px) and (max-width: 1490px) {
    .pageIntro68__mediaWrap .hero68PostIt {
        top: 170px;
		left: -6vw;
		width: 200px;
    }
}
/* Hover nur wenn Link */
.pageIntro68__mediaWrap .hero68PostIt--link:hover,
.pageIntro68__mediaWrap .hero68PostIt--link:focus-visible{
  transform: rotate(10deg);
}

/* ==========================================================================
   Hero68 – Messeinfo Box (hero68Fair)
   - <1224px: im Fluss, weiß, 100% Breite, Logo bis 200px
   - >=1224px: Overlay über Bild, transparent, inline-grid, Logo max 144px
   ========================================================================== */

/* Anker für Overlay */
.pageIntro68__mediaWrap{
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* Grund: Box im Fluss */
.hero68Fair{
  margin-top: var(--g-2);
  position: relative;
  z-index: 2;
}

/* <1224px: 100% Breite, weiß, kein Border, kein Transparent */
.hero68Fair__inner{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2);
  background: #fff;
  border-radius: var(--r-1);
  color: var(--c-marine);
}

/* Inhalt darf in Grid schrumpfen (wichtig für Button) */
.hero68Fair__content{
  min-width: 0;
}

/* Logo <1224px: darf wachsen bis 200x200 */
.hero68Fair__logo{
  margin: 0;
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
}

.hero68Fair__logoImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero68Fair__text{
  margin: 0;
}

.hero68Fair__btn{
  margin-top: var(--g-2);
}

/* Button-Overflow Fix */
.hero68Fair .btn{
  min-width: 0;
  max-width: 100%;
}
.hero68Fair .btn__text{
  white-space: normal;
}

/* Ohne Logo: einspaltig */
.hero68Fair__inner:not(:has(.hero68Fair__logo)){
  grid-template-columns: 1fr;
}

/* >=1224px: Overlay + Transparenz + "wrap content" */
@media (min-width: 1224px){

  .hero68Fair{
    position: absolute;
    right: var(--s-3, 1.5rem);
    bottom: var(--s-3, 1.5rem);
    margin-top: 0;
    z-index: 10;
  }

  .hero68Fair__inner{
    display: inline-grid; /* umschließt Inhalt */
    width: auto;          /* nicht 100% */
    background: rgba(237, 237, 237, 0.88);
    padding: 1.2rem;
  }

  /* Logo wieder kleiner (max 144) */
  .hero68Fair__logo{
    width: 144px;
    height: 144px;
  }
}


/* ==========================================================================
   Grid 77 – Produktboxen
   ========================================================================== */

/* Grid */
.section--grid77Products .grid--products{
  display:grid;
  grid-template-columns:1fr;
}

@media (min-width:960px){
  .section--grid77Products .grid--products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
}


/* Box */
.section--grid77Products .box{
  display:flex;
  flex-direction:column;
  height:100%;
}

.section--grid77Products .box h3{
  margin:0;
  padding-bottom:var(--s-2);
}


/* Produktbild */
.section--grid77Products .productBox__media{
  margin:var(--g-2) 0 var(--g-3);
  text-align:center;
}

.section--grid77Products .productBox__img{
  display:block;
  max-width:450px;
  height:auto;
  margin-inline:auto;
}


/* Text */
.section--grid77Products .productBox__text{
  margin-top:auto;
  max-width:35ch;
}


/* Box-Farben */
.section--grid77Products .box--gray{
  background:var(--c-gray);
  color:var(--c-marine);
}

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

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

.section--grid77Products .box--marine a,
.section--grid77Products .box--neon a{
  color:inherit;
}