/*
 * ============================================================
 * RESPONSIVE – Globales Fundament
 *
 * Kein Mobile-Figma → Reflow-Strategie: gleiche Inhalte,
 * gleiche Reihenfolge, stapeln statt zoomen.
 *
 * FÜNF UNABHÄNGIGE BREAKPOINT-ACHSEN:
 *
 *   1. CONTENT-Breakpoints (Sektions-Layouts, Grids, Paddings):
 *      Tablet   max-width: 1024px  (768–1024px)
 *      Mobile   max-width:  767px  (< 768px)
 *
 *   2. HEADER-Breakpoint (Hamburger vs. Desktop-Nav) – entkoppelt:
 *      Hamburger    max-width: 1439px  (≤ 1439px)
 *      Desktop-Nav                     ≥ 1440px
 *      → Bei 1025–1439px: Desktop-Content + Hamburger-Header.
 *
 *   3. HERO-BILD-Breakpoint (Backdrop vs. 2-Spalten-Bild) – entkoppelt:
 *      Backdrop     max-width: 1439px  (≤ 1439px, gleiche Range wie Header)
 *      Vollfläche                       ≥ 1440px
 *      → Bei 1025–1439px: Desktop-Content + Hamburger-Header + Backdrop.
 *
 *   4. HERO-LAYOUT-Breakpoint (Höhe) – nur Backdrop-Range + kurze Höhe:
 *      Landscape    min-width: 1025px AND max-width: 1439px AND max-height: 899px
 *                   → p + Buttons nebeneinander (Grid 1fr | auto)
 *      Normal       alle anderen Desktop-Kombinationen → vertikaler Stack
 *      Sonderfall   min-width: 1440px AND max-height: 899px (z.B. 1440×768):
 *                   hero-image sichtbar → normaler Stack, Buttons unterhalb Bild
 *
 *   5. CARD-GRID-Breakpoint – zwei getrennte Schwellen, entkoppelt:
 *      .cp-card-grid (#angebot):      2-Spalten 1025–1439px  /  4-Spalten ≥1440px
 *      .cp-usecase-grid (#einsatz):   2-Spalten 1025–1599px  /  4-Spalten ≥1600px
 *
 * Dieses File enthält ausschliesslich:
 *   1. Typografie-Token-Overrides
 *   2. Container / Gutter
 *   3. Section-Paddings
 *   4. Border-Radius-Scaling
 *   5. Hamburger-Menü (Base + Animation + Panel)
 *
 * Sektionsspezifische Stack-Layouts folgen in separatem Schritt.
 * ============================================================ */


/* ----------------------------------------------------------
   0. SCROLL-VERHALTEN
   scroll-behavior: smooth auf html (base.css) kann in Chrome
   DevTools Touch-Simulation dazu führen, dass der Browser die
   Scroll-Deceleration zu früh beendet und die Seite nicht mehr
   weiter scrollt. Für Tablet + Mobile auf auto setzen.
   Auf echten Geräten kaum merkbar; Anchor-Links scrollen
   direkt statt animiert.
   overscroll-behavior-x: contain auf dem Karussell-Track
   verhindert, dass der horizontale Scroll-Container den
   vertikalen Page-Scroll absorbiert.
---------------------------------------------------------- */

@media (max-width: 1024px) {
  html {
    scroll-behavior: auto;
  }

  .cp-carousel__track {
    overscroll-behavior-x: contain;
  }
}


/* ----------------------------------------------------------
   1. TYPOGRAFIE  –  Token-Overrides
   Feste Figurenpixel → skalierte Werte. Alle token-basierten
   Stellen im CSS übernehmen die Änderung automatisch.
---------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --text-display:    3.5rem;     /* 56px  (war 85px) */
    --text-h2:         2.5rem;     /* 40px  (war 57px) */
    --text-h2-banner:  2.25rem;    /* 36px  (war 44px) */
    --leading-display: 3.875rem;   /* 62px */
    --leading-h2:      2.875rem;   /* 46px */
  }
}

@media (max-width: 767px) {
  :root {
    --text-display:    2.25rem;    /* 36px */
    --text-h2:         1.875rem;   /* 30px */
    --text-h2-banner:  1.75rem;    /* 28px */
    --text-h3-event:   1.375rem;   /* 22px */
    --text-h3-card:    1.25rem;    /* 20px */
    --leading-display: 2.625rem;   /* 42px */
    --leading-h2:      2.25rem;    /* 36px */
  }
}


/* ----------------------------------------------------------
   2. CONTAINER / GUTTER
   clamp(1.25rem, 15.87vw, 18.75rem) ergibt bei 768px rund
   122px pro Seite – zu eng. Feste Werte für kleinere Viewports.
---------------------------------------------------------- */

@media (max-width: 1024px) {
  .container,
  .header-inner {
    padding-inline: clamp(1.5rem, 5vw, 3rem); /* 24–48px */
  }
}

@media (max-width: 767px) {
  .container,
  .header-inner {
    padding-inline: 1.25rem; /* 20px fix */
  }
}


/* ----------------------------------------------------------
   3. SECTION-PADDINGS
   --space-2xl (120px) → Tablet 80px → Mobile 56px.
   Nur Sektionen mit padding-block: var(--space-2xl).
   Banner-100 und CTA-Banner haben eigene fixe Höhen
   und werden separat behandelt.
---------------------------------------------------------- */

@media (max-width: 1024px) {
  #angebot,
  #qualitaet,
  #fuer-jeden-event,
  #sortiment,
  #einsatzbereiche,
  section#events {
    padding-block: 5rem; /* 80px */
  }

  /* Events: padding-bottom = Karten-Column-Gap (1.875rem = 30px) */
  section#events {
    padding-bottom: 1.875rem;
  }
}

@media (max-width: 767px) {
  #angebot,
  #qualitaet,
  #fuer-jeden-event,
  #sortiment,
  #einsatzbereiche,
  section#events {
    padding-block: 3.5rem; /* 56px */
  }

  /* Events: padding-bottom = Karten-Grid-Gap (2rem = 32px) */
  section#events {
    padding-bottom: 2rem;
  }
}


/* ----------------------------------------------------------
   4. BORDER-RADIUS SCALING
   Grosse Rundungen (30px) wirken auf Mobile überproportional.
---------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --radius-card:   1.125rem; /* 18px  (war 30px) */
    --radius-button: 1.0625rem;/* 17px  (war 27px) */
  }
}


/* ----------------------------------------------------------
   5. HAMBURGER-NAVIGATION
   Desktop: normal inline-Nav, kein Button sichtbar.
   Tablet/Mobile: Nav als Panel, Hamburger-Button sichtbar.

   Toggle-Logik via JS (IIFE am Body-Ende):
     - aria-expanded steuert Animation
     - .nav-is-open auf .site-header öffnet das Panel
     - Escape + Aussenklick schliessen
---------------------------------------------------------- */

/* --- Hamburger-Button Base (immer im DOM, Desktop: versteckt) --- */

.nav-toggle {
  display: none;       /* Desktop: unsichtbar */
  order: 3;            /* hinter Header-Actions in flex-row */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width:  2.5rem;      /* 40px – Mindest-Touch-Fläche */
  height: 2.5rem;
  padding: 0.375rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
}

.nav-toggle__line {
  display: block;
  width:  1.375rem;    /* 22px */
  height: 2px;
  background-color: var(--color-black);
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Linie 1 → oberer X-Arm */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

/* Linie 2 → unsichtbar */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

/* Linie 3 → unterer X-Arm */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --- Hamburger-Header (≤1439px) – entkoppelt vom Content-Breakpoint ---
   Content-Layouts (Grids, Sektionen) behalten ≤1024px / ≥1025px.
   Nur der Header schaltet hier auf Hamburger-Modus.
   Bei 1025–1439px: Desktop-Content-Layout + Hamburger-Header.
   Das Hero-padding-top (5rem) liegt im Hero-Backdrop-Block (≤1024px),
   nicht hier – dort ist es ans Content-Layout gebunden, nicht ans Header-Format.

   Brand-specific backgrounds (color, bg-image, bg-attachment) are set
   in each brand CSS file — not here. This block is structural only. */

@media (max-width: 1439px) {

  /* Header: switch to fixed positioning for hamburger layout.
     Background is set per-brand in brand CSS files. */
  .site-header {
    position: fixed;
    top: 0;
    padding-block: 1rem;
    box-shadow: none;
    z-index: 200;
  }

  /* Hamburger einblenden */
  .nav-toggle {
    display: flex;
  }

  /* CTA-Button im Header ausblenden */
  .header-actions > .cp-btn {
    display: none;
  }

  /* Nav: Desktop-Positionierung komplett zurücksetzen.
     Background is set per-brand in brand CSS files. */
  .site-header nav[aria-label="Hauptnavigation"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: none;               /* Desktop translateX entfernen */

    border-top: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Slide-Animation via max-height */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  /* Geöffneter Zustand */
  .site-header.nav-is-open nav[aria-label="Hauptnavigation"] {
    max-height: 25rem; /* grosszügig – mehr als genug für 4 Links */
  }

  /* Nav-Liste: vertikal stapeln */
  .site-header nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.5rem;
  }

  .site-header nav li {
    display: block;
  }

  /* Trennpunkte zwischen Items entfernen */
  .site-header nav li:not(:last-child)::after {
    display: none;
  }

  /* Links: grosse Touch-Flächen — color and border-bottom set per brand */
  .site-header nav a {
    display: block;
    padding: 0.875rem 0;
    font-size: 1.25rem;       /* 20px */
  }
}


/* ----------------------------------------------------------
   HERO FOTO-BACKDROP – Achse 3: ≤ 1439px (Hamburger-Range)
   Produktfoto aus dem Grid-Flow nehmen und als halbtransparenten
   Backdrop hinter den Content legen.
   Gilt für 0–1439px; bei 1025–1439px bleibt das 2-Spalten-Content-
   Layout bestehen (.hero-inner wird erst im ≤1024px-Block einspaltig).
   Stärke: 0.12 = dezent · 0.20 = sichtbar · 0.30 = kräftig
   Anker: #hero (position:relative); hero-inner ist hier noch statisch,
   daher füllt inset:0 die volle Sektionsfläche.
---------------------------------------------------------- */

@media (max-width: 1439px) {
  :root {
    --hero-photo-opacity: 0.18;
  }

  /* Content muss über dem Backdrop-Foto liegen */
  .hero-content {
    position: relative;
    z-index: 1;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .hero-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    object-fit: cover;
    object-position: center top;
    opacity: var(--hero-photo-opacity);
  }
}


/* ----------------------------------------------------------
   HERO CONTENT-LAYOUT – Tablet + Mobile (≤ 1024px)
   1-Spalten-Stack; Backdrop-Regeln kommen aus dem ≤1439px-Block.
   Ab hier wird .hero-inner zum neuen Anker (position:relative),
   das Backdrop-Foto füllt nun hero-inner statt #hero.
---------------------------------------------------------- */

@media (max-width: 1024px) {
  /* min-height aufheben – Hero bestimmt Höhe über Content */
  #hero {
    min-height: 0;
  }

  /* 1-Spalte: Product-Image fällt aus dem Grid-Flow.
     min-height: 0 → Desktop-820px-Minimum aufheben.
     padding-inline → Standard-Container-Padding statt Desktop-Panorama-Pad.
     position: relative → hero-inner wird neuer Backdrop-Anker. */
  .hero-inner {
    grid-template-columns: 1fr;
    position: relative;
    min-height: 0;
    padding-inline: clamp(1.5rem, 5vw, 3rem);
  }

  /* Content: volle Spaltenbreite, kein 706px-Cap aus dem 2-Spalten-Layout.
     padding-top: 5rem ersetzt den 180px-Desktopwert – 80px reichen,
     um den ~4.5rem fixen Header freizuhalten.
     position:relative + z-index:1 kommen aus dem ≤1439px-Block. */
  .hero-content {
    max-width: none;
    padding-top: 5rem;
  }

  /* Overline-Badge: Luft oben ≈ Luft unten.
     padding-top (5rem) − Header (~4rem) = ~16px visuell oben.
     margin-bottom der Badge (Desktop): 4.0625rem = 65px.
     +3rem bringt visuellen Abstand oben auf ~64px ≈ 65px. */
  .hero-content .overline-badge {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
  }
}


/* --- Mobile only --- */

@media (max-width: 767px) {

  /* Sprachauswahl ausblenden – spart Platz */
  .language-switcher {
    display: none;
  }

  /* Hero: padding-top explizit wiederholen – Mobile-Override auf 2.5rem padding-bottom.
     Der 5rem-Wert kommt aus dem Hero-Backdrop-Block (≤1024px); hier nur padding-bottom. */
  .hero-content {
    padding-top: 5rem;      /* 80px – gleich wie ≤1024px Hero-Backdrop-Block */
    padding-bottom: 2.5rem;
  }
}


/* ----------------------------------------------------------
   HERO LAYOUT – Achse 4: Höhen-Breakpoint (Desktop-Landscape)
   Gilt bei 1025–1439px Breite UND < 900px Höhe.
   Explizit NUR in der Backdrop-Range (≤1439px):
   → Bei ≥1440px bleibt der normale vertikale Stack (Buttons landen
     natürlich unterhalb des Hero-Bildes, da kein Backdrop aktiv ist).
   Typisch: 1197×798, 1280×720/800 – breite Laptops im Landscape-Format.

   Statt vertikalem Stack → Paragraph und Button-Gruppe
   nebeneinander (1fr | auto), Buttons bleiben vertikal gestapelt.
   Overline + H1 überspannen weiterhin die volle Breite.

   hero-inner auf 1-Spalte: hero-image ist position:absolute (Backdrop),
   rechte Grid-Spalte wäre sonst leer → hero-content bliebe auf ~50% der
   Innenbreite (~408px) stecken. 1-Spalte gibt ihm volle max-width: 706px.
---------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1439px) and (max-height: 899px) {

  /* hero-inner: rechte (leere) Backdrop-Spalte entfernen */
  .hero-inner {
    grid-template-columns: 1fr;
  }

  /* Flex-Column → CSS-Grid: Overline+H1 volle Breite, p | btn-group nebeneinander */
  .hero-content {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 2rem;
    align-items: start;  /* p und Button-Gruppe oben bündig zueinander */
  }

  /* Overline + H1: beide Spalten überspannen */
  .hero-content .overline-badge,
  .hero-content h1 {
    grid-column: 1 / -1;
  }

  /* Pille: Grid-Stretch verhindern – bleibt kompakt wie im Normalzustand */
  .hero-content .overline-badge {
    justify-self: start;
  }

  /* Paragraph: Grid-Spalte begrenzt die Breite → max-width aufheben.
     margin-bottom: 0, da der Paragraph nun neben, nicht über den Buttons steht. */
  .hero-content p {
    max-width: none;
    margin-bottom: 0;
  }

  /* Button-Gruppe: horizontal → vertikal stapeln */
  .hero-content .btn-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Sonderfall ≥1440px + kurze Höhe (z.B. 1440×768):
   hero-image ist als echte rechte Spalte sichtbar → normaler vertikaler Stack.
   Aber: die Figma-Abstände (180px padding-top, 107px h1-margin, 60px p-margin)
   wurden für Full-HD-Höhen (1080px) ausgelegt. Bei 768px Viewport drücken sie
   die Buttons aus dem sichtbaren Bereich. Abstände gezielt reduzieren,
   damit Buttons ohne Scrollen sichtbar sind (Ziel: Button-Ende ≤ ~700px). */
@media (min-width: 1440px) and (max-height: 899px) {
  .hero-content {
    padding-top: 8rem;           /* 128px – statt 11.25rem (180px); lässt 56px Luft unter Header */
  }
  .hero-content h1 {
    margin-bottom: 3rem;         /* 48px – statt 6.6875rem (107px) */
  }
  .hero-content p {
    margin-bottom: 2.5rem;       /* 40px – statt 3.75rem (60px) */
  }
}


/* ============================================================
   SEKTION: #qualitaet
   Desktop (≥1025px): fixe 540px-Spalte | Rest, 167px Gap (unverändert).
   Grosses Tablet (992–1024px): 2-Spalten prozentual (45% | 1fr),
     Zitat-Karte in Foto-Spalte gebunden.
   Kleines Tablet + Mobile (≤991.9px): 1-Spalte gestapelt –
     Sonderregel: gleiche Darstellung wie Mobile.
============================================================ */

/* 992–1024px: nebeneinander wie Desktop */
@media (min-width: 992px) and (max-width: 1024px) {
  .cp-media-block {
    grid-template-columns: 45% 1fr;
    column-gap: 2rem;
  }

  .cp-quote-card {
    left:   1rem;
    right:  1rem;
    width:  auto;
    bottom: 1rem;
    min-height: 0;
    padding: 1.5rem 1.25rem;
  }

  .cp-quote-card p {
    font-size:   1.125rem;
    line-height: 1.5rem;
  }

  .cp-media-block__content {
    padding-top: 2rem;
  }
}

/* ≤991.9px: gestapelt (kleines Tablet + Mobile) */
@media (max-width: 991.9px) {
  .cp-media-block {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .cp-quote-card {
    left:   1rem;
    right:  1rem;
    width:  auto;
    bottom: 1rem;
    min-height: 0;
    padding: 1.5rem 1.25rem;
  }

  .cp-quote-card p {
    font-size:   1.125rem;
    line-height: 1.5rem;
  }

  .cp-media-block__content {
    padding-top: 2rem;
  }

  .cp-media-block__image img {
    aspect-ratio: unset;
    height: auto;
    max-height: 50vh;
    width: auto;
    max-width: 100%;
    object-fit: unset;
    display: block;
    margin-inline: auto;
  }
}


/* ============================================================
   SEKTION: #fuer-jeden-event
   Overflow-Fix 1: Pills – white-space: nowrap entfernen, sonst
     läuft das längste Label auf Mobile über den Viewport.
   Overflow-Fix 2: Karussell-Pfeile – Desktop: -21px ausserhalb
     des Tracks. Auf Mobile (Wrap-Padding = 20px fix) ragt der
     Pfeil 1px über den Viewport → horizontaler Seitenschub.
     Lösung: Pfeile auf Mobile nach innen holen.
============================================================ */

@media (max-width: 767px) {
  .cp-pill-item {
    white-space: normal; /* langer Text darf innerhalb des Items umbrechen */
  }

  .cp-carousel__btn--prev { left:  0.5rem; }
  .cp-carousel__btn--next { right: 0.5rem; }
}


/* ============================================================
   SEKTION: #banner-100
   Desktop: 1790:758 Landscape-Box, Elemente absolut via %.
   Tablet (768–1024px): Mobile-Ansatz, grössere Mindesthöhe –
     Desktop-%-Positionen funktionieren ab ~830px nicht mehr
     (Content-Block bekommt zu wenig Restfläche).
     Aspect-Ratio aufheben, Content oben volle Breite, «100%» unten.
   Mobile (≤767px): Gleicher Ansatz, kürzere Mindesthöhe.
============================================================ */

@media (max-width: 1024px) {
  #banner-100 {
    padding-block: 5rem;
  }

  .banner-100__box {
    aspect-ratio: auto;
    min-height: 28rem; /* 448px – mehr Wucht auf Tablet als 352px Mobile */
  }

  /* SWAP: «100%» oben, Heading + CTA unten */
  .banner-100__number {
    top:    3rem;   /* line-height:0.297 → Glyph ragt ~41px über Line-Box; 3rem ≈ visuell 0.5rem Abstand */
    bottom: auto;
  }

  .banner-100__content {
    left:   1.5rem;
    right:  1.5rem;
    top:    auto;
    bottom: 1.5rem;
    width:  auto;
  }
}

@media (max-width: 767px) {
  #banner-100 {
    padding-block: 3.5rem;
    padding-bottom: 6rem;  /* Luft für Button der ~3rem unter die Box hängt */
  }

  /* overflow:visible damit der Button unter die Box herausragt.
     border-radius:0 + background:none auf der Box → die Ecken hinter
     dem Bild zeigen den Seiten-Hintergrund statt Fallback-Dunkelgrün. */
  .banner-100__box {
    min-height: 22rem;
    overflow: visible;
    border-radius: 0;
    background: none;
  }

  /* Bild: eigene Rundung, da Box nicht mehr clippt */
  .banner-100__bg {
    border-radius: var(--radius-card);
  }

  /* NUR der Button: unterhalb der Box, h2 bleibt absolut im Bild.
     top:100% = Content-Unterkante, +3rem = visueller Abstand zum Bild. */
  .banner-100__content .cp-btn--green {
    position: absolute;
    top: calc(100% + 3rem);
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ============================================================
   SEKTION: #sortiment
   Overflow-Fix: Sortiment-Header (Flex-Row klemmt bei ~830px –
     Lead ~411px + Tabs ~312px > Contentbreite bei 768px).
   Bild-Padding 70px → macht Produktbild auf 2-Spalten-Karte nur 70px
     breit. Auf Tablet/Mobile reduzieren.
   Desktop 3 Spalten → Tablet 2 Spalten → Mobile 1 Spalte.
============================================================ */

@media (max-width: 1023px) {
  /* Header: gestapelt – Lead oben, Tabs darunter */
  .sortiment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* Grid: 2 Spalten auf Tablet */
  .cp-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bild-Padding: 70px → 40px damit Produktbild atmen kann */
  .cp-product-card__image {
    padding-inline: 2.5rem;
  }
}

@media (max-width: 767px) {
  /* Grid: 1 Spalte auf Mobile */
  .cp-product-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Bild-Padding weiter reduziert */
  .cp-product-card__image {
    padding-inline: 2rem;
  }
}

@media (max-width: 1024px) {
  /* Padding creates space for the absolutely-positioned arrow buttons
     so they sit in the padding area rather than over the card content.
     Button width = 2.75rem; left/right offset = -1.3125rem;
     so button extends 1.4375rem inside the container → pad ≥ 1.5rem. */
  .cp-sortiment-slider {
    padding-inline: 2.5rem;
  }

  .cp-sortiment-slider .cp-carousel__btn {
    display: flex;
  }
}


/* ============================================================
   FOOTER (.site-footer)
   Padding direkt auf .site-footer (ausserhalb der globalen
   Sektions-Padding-Liste im Fundament).
   Grid: 4 Spalten → Tablet 2×2 (~448px/Spalte bei 1024px,
     ~329px/Spalte bei 768px) → Mobile 1 Spalte.
   Tablet: margin-bottom auf Grid reduziert (3.5rem → 2.5rem),
     passt zum reduzierten Padding-Kontext.
   Bottom-Zeile (Tagline + Social): bleibt auf Tablet nebeneinander
     (691px bei 768px genügt, kein Overflow-Risiko).
   Mobile: Tagline + Social gestapelt – bei 375px zu eng horizontal.
============================================================ */

@media (max-width: 1024px) {
  .site-footer {
    padding-top:    3.5rem;   /* 56px */
    padding-bottom: 2rem;     /* 32px */
  }

  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr;  /* linke Spalte ~60 %, rechte ~40 % */
    row-gap:       2.5rem;
    margin-bottom: 2.5rem;   /* Desktop 3.5rem → Tablet 2.5rem */
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-top:    2.5rem;   /* 40px */
    padding-bottom: 1.5rem;   /* 24px */
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin-bottom: 2rem;
  }

  /* max-width freigeben – in 1-Spalte nimmt der Text die volle Breite */
  .site-footer__about-text {
    max-width: none;
  }

  /* Tagline + Social: übereinander statt nebeneinander */
  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* --- Footer Accordion (Mobile) ---
     Summary: flex-row, Titel links / Pfeil rechts.
     h3 margin-bottom auf 0 – Spacing übernimmt padding-top der Liste.
     Trennlinie unter jedem Summary.
     Arrow: zeigt UNTEN (rotate 90°) → OBEN (rotate -90°) beim Öffnen.
     Inhalt: immer display:flex (override UA), max-height steuert Sichtbarkeit. */

  .footer-accordion__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
  }

  .footer-accordion__summary .site-footer__col-title {
    margin-bottom: 0;
  }

  .footer-accordion__arrow {
    display: block;
    width: 1rem;
    height: auto;
    flex-shrink: 0;
    transform: rotate(90deg);           /* Pfeil UNTEN = eingeklappt */
    transition: transform 0.4s ease-in-out;
  }

  details.footer-accordion[open] .footer-accordion__arrow {
    transform: rotate(-90deg);          /* Pfeil OBEN = ausgeklappt */
  }

  /* Inhalt per max-height ein-/ausblenden (UA display:none überschreiben) */
  details.footer-accordion > .site-footer__links {
    display: flex !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-top 0.3s ease;
    padding-top: 0;
  }

  details.footer-accordion[open] > .site-footer__links {
    max-height: 12rem;
    padding-top: 0.875rem;
  }
}


/* ============================================================
   SEKTION: #cta-banner
   Desktop (≥1440px): Flex-Row, fixe Höhe 249px, H2 + Aside nebeneinander.
   Tablet/narrow (≤1439px): Stapel-Layout, fixe Höhe aufheben,
     eigenes padding-block. Heading line-height lockern.
============================================================ */

@media (max-width: 1439px) {
  .cp-cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding-block: 2.5rem;
    gap: 1.25rem;
  }

  .cp-cta-banner__heading {
    line-height: 1.15;
  }

  .cp-cta-banner__aside {
    max-width: none;
  }
}


/* ============================================================
   SEKTION: #events
   Header: Flex-Row (H2 links, Button rechts) → Mobile gestapelt.
   Grid: 3 Spalten → Tablet 2 Spalten → Mobile 1 Spalte.
   Innere Ausrichtung (Titel/Datum/Strich/Beschreibung) via CSS Subgrid
   in events.css: Karten teilen Zeilentracks des Parent-Grids →
   gleiche Y-Position pro Element-Ebene über alle Karten einer Reihe.
   min-height auf __title entfällt (Subgrid übernimmt diese Aufgabe).
============================================================ */

@media (max-width: 1024px) {
  /* Header: Gap Header → Grid etwas enger als Desktop (50px → 32px) */
  .cp-events-header {
    margin-bottom: 2rem;
  }

  /* Grid: 2 Spalten, row-gap statt Subgrid-Tracks für Zeilenabstand */
  .cp-event-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.875rem;
  }

  /* Subgrid deaktivieren: Mit 2 Spalten + 3 Karten erzeugt der leere
     rechte Track der 2. Zeile einen riesigen Leerraum. Flex-Spalte
     gibt jeder Karte genau ihre Inhaltshöhe zurück. */
  .cp-event-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  /* Bild: Höhe proportional zur schmaleren 2-Spalten-Karte reduziert */
  .cp-event-card__media {
    height: 13rem; /* 208px */
  }

  /* Titel: kleinere Schrift für ~330–450px breite Karten.
     Subgrid ist auf 2-Spalten deaktiviert (Flex-Fallback) → min-height
     erzwingt 2-Zeilen-Höhe damit Datum-Zeile über Karten fluchtet. */
  .cp-event-card__title {
    font-size:   1.5rem;
    line-height: 2rem;
    min-height:  5.5rem; /* padding-top 1.25 + 2×line-height 2rem + padding-bottom 0.25 */
  }
}

@media (max-width: 767px) {
  /* Header: H2 oben, Button darunter, zentriert */
  .cp-events-header {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  /* Grid: 1 Spalte – kein Ausrichten zwischen Karten nötig */
  .cp-event-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Titel: Mobile-Token (1 Karte pro Zeile, Subgrid irrelevant).
     min-height zurücksetzen — Splide zeigt 1 Karte auf einmal,
     Flucht-Ausrichtung zwischen Karten entfällt. */
  .cp-event-card__title {
    font-size:   var(--text-h3-event); /* 1.375rem = 22px */
    line-height: 1.75rem;
    min-height:  0;
  }
}

/* Tablet: the container gutter is too narrow here for the desktop -3.5rem arrow
   offset, so inset the slider to open a lane beside the cards and push the
   prev/next buttons into it — clear of the card titles. */
@media (min-width: 768px) and (max-width: 1024px) {
  #events .cp-events-slider {
    margin-inline: 4rem;
  }

  #events .cp-carousel__btn--prev {
    left: -3.5rem;
  }

  #events .cp-carousel__btn--next {
    right: -3.5rem;
  }
}


/* ============================================================
   ACHSE 5: CARD-GRID-BREAKPOINT
   Zwei getrennte Grids, zwei verschiedene 4→2-Schwellen:

   .cp-card-grid (#angebot):
     ≥1440px:     4 Spalten (Figma-Standard, kein Override nötig)
     1025–1439px: 2 Spalten

   .cp-usecase-grid (#einsatzbereiche):
     ≥1600px:     4 Spalten (kein Override nötig)
     1025–1599px: 2 Spalten

   ≤1024px und ≤767px: beide Grids via Achse-1-Blocks weiter unten (2 → 1).
   Tile-Höhen-Angleichung (grid-weit): via JS-IIFE am Ende von index.html.
============================================================ */

@media (min-width: 1025px) and (max-width: 1439px) {
  .cp-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  .cp-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* min-height für gesamte Desktop-Range zurücksetzen (≥1025px, 2- und 4-Spalten).
   Beide Card-Typen: CSS-min-height war für schmale Figma-Spalten kalibriert
   (cp-feature-card: 339px, cp-usecase-card: 360px) und verfälscht die JS-Messung.
   JS-Equalizer misst echte Inhaltshöhe und setzt min-height selbst.
   Tablet (≤1024px) und Mobile (≤767px) haben eigene min-height-Werte weiter unten. */
@media (min-width: 1025px) {
  .cp-feature-card,
  .cp-usecase-card {
    min-height: 0;
  }
}


/* ============================================================
   SEKTION: #einsatzbereiche
   Grid: .cp-usecase-grid (eigenständige Klasse, s. einsatzbereiche.css).
   Section-Padding: im globalen Fundament enthalten.
   Tablet: min-height reduzieren – Karte ist 2-spaltig (~330px
     breit), Inhalt benötigt weniger Mindesthöhe als bei 4 schmal-
     en Desktop-Spalten (300px). 360px → 288px.
   Mobile: min-height ganz aufheben (natürliche Kartenhöhe).
============================================================ */

@media (max-width: 1024px) {
  .cp-usecase-card {
    min-height: 18rem; /* 288px – Tablet: breitere 2-Spalten-Karte */
  }
}

@media (max-width: 767px) {
  .cp-usecase-card {
    min-height: 0;
  }
}


/* ============================================================
   SEKTION: #angebot  +  #einsatzbereiche (gemeinsame Grid-Overrides)
   Desktop ≥1440px: 4 Spalten (Standard, kein Override).
   Tablet ≤1024px:  2 Spalten.
   Mobile ≤767px:   1 Spalte.
   Desktop 1025–1439px: via Achse 5 (Block weiter oben).
============================================================ */

@media (max-width: 1024px) {
  .cp-card-grid,
  .cp-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cp-card-grid,
  .cp-usecase-grid {
    grid-template-columns: 1fr;
    gap: 1rem; /* 16px – enger auf Mobile */
  }

  /* Natürliche Kartenhöhe – kein Mindest-339px auf schmalen Screens */
  .cp-feature-card {
    min-height: 0;
  }
}


/* ============================================================
   ANGEBOT SLIDER + EINSATZ SLIDER – nav buttons on tablet/mobile
============================================================ */

@media (max-width: 1024px) {
  .cp-benefit-list {
    padding-left: 0;
  }

  /* Padding creates space for the absolutely-positioned arrow buttons
     so they sit in the padding area rather than over the card content.
     Button width = 2.75rem; left/right offset = -1.3125rem;
     so button extends 1.4375rem inside the container → pad ≥ 1.5rem. */
  .cp-angebot-slider,
  .cp-einsatz-slider {
    padding-inline: 2.5rem;
  }

  .cp-angebot-slider .cp-carousel__btn,
  .cp-einsatz-slider .cp-carousel__btn {
    display: flex;
  }
}


/* ============================================================
   EVENTS SLIDER – nav buttons on mobile only
============================================================ */

@media (max-width: 767px) {
  .cp-events-slider {
    padding-inline: 3.5rem;
  }

  .cp-events-slider .cp-carousel__btn {
    display: flex;
    /* Vertically anchor buttons in the image area (cp-event-card__media = 18.125rem)
       rather than at 50% of the full card height which falls into the title. */
    top: 9.0625rem;
    transform: none;
  }

  .cp-events-slider .cp-carousel__btn:hover {
    transform: scale(1.05);
  }

  .cp-pill-row {
    justify-content: flex-start;
  }
}