/* ============================================================
   Baukästen – Layout + Scroll-Lock
   ============================================================ */

.baukaesten {
  background-color: transparent;
  min-height: 0;
  margin-top: -9vw;
  overflow: visible;
}

.baukaesten-sticky {
  position: sticky;
  /* Tiles sitzen vertikal in der Viewport-Mitte.
     25vh = grober Startwert (Tile-Höhe ~37vw, also ~25vh auf
     einem 16:10-Monitor). Im Browser feinjustieren. */
  top: 25vh;
  overflow: visible;
}

.baukaesten-row {
  display: flex;
  align-items: flex-start;
  gap: calc(30 / 1440 * 100vw);
  will-change: transform;
}

.baukaesten-row .baukaesten-tile {
  flex: 0 0 calc(685 / 1440 * 100%);
  aspect-ratio: 685 / 544;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 10%;
  font-family: var(--font-body);
  /* Staffel-Versatz -15.85% (Mica-Runde 2026-08-31, live justiert): war
     -15.25%. Jede Karte wird pro tile-index etwas staerker nach oben
     gezogen -> Treppe minimal steiler, alle Karten hoeher. Intro-Karte
     (index 0) unveraendert (x0). ROLLBACK: zurueck auf -15.25%. */
  transform: translateY(calc(var(--tile-index) * -15.85%));
}

/* Intro-Karte (erstes Tile) auf Geschwisterhoehe ziehen: Die Produkt-
   Karten (Titel+Preis+Beschreibung) haben mehr Text und werden dadurch
   ueber die aspect-ratio-Hoehe hinaus gestreckt (~579px), die Intro-Karte
   mit weniger Text blieb auf der reinen aspect-ratio-Hoehe (~517px) -
   dadurch war sie sichtbar kuerzer (Chrome; Firefox rundet minimal
   anders, faellt aber weniger auf). align-self:stretch zieht NUR diese
   eine Karte auf die volle Row-Hoehe, ohne die row-weite align-items:
   flex-start (und damit die translateY-Staffel-Geometrie) anzutasten. */
.baukaesten-row .baukaesten-tile:first-child {
  align-self: stretch;
}

/* ── Leeres Preisfeld (Kundenwunsch 2026-09-23: keine Preise) ──
   Das Template gibt .baukaesten-preis immer aus, auch leer. Das leere div
   hatte keine Hoehe, aber sein margin-top (var(--space-m)) -> doppelter
   Abstand Titel -> Lauftext. Loesung: leeres Preisfeld ausblenden und die
   32px NICHT streichen, sondern ueber das RAUM-Label verschieben. Dadurch
   bleibt die Karten-Inhaltshoehe exakt gleich (live gemessen), nur der
   Lauftext rueckt an die Headline. Gilt Desktop + Mobil. Traegt der Kunde
   wieder einen Preis ein, greift die Regel nicht mehr.
   ROLLBACK: beide Regeln loeschen. */
.baukaesten-tile:has(.baukaesten-preis:empty) .baukaesten-preis {
  display: none;
}

.baukaesten-tile:has(.baukaesten-preis:empty) .baukaesten-fuss {
  padding-top: var(--space-m);
}

/* ── Gleich hohe Karten + Textblock hoeher (Kundenwunsch 2026-09-23) ──
   1) align-items: stretch statt flex-start: alle Karten so hoch wie die
      laengste. Vorher wuchs jede Karte einzeln mit ihrem Text (Hoehen z.B.
      560-710px bei 1267px Viewport). Die Staffel (translateY in % der
      eigenen Hoehe) wird dadurch gleichmaessig. Kuerzere Texte bleiben oben,
      das RAUM-Label sitzt per margin-top:auto unten.
   2) Produktkarten: padding-top 30px kleiner -> Headline + Lauftext sitzen
      hoeher, die gemeinsame Hoehe sinkt um 30px. Intro-Karte behaelt ihr
      Padding (bleibt vertikal zentriert).
      Gemessen: 1047px -> alle 723 | 1267px -> alle 680 | 1794px -> alle 672.
   3) Intro-Text auf Groesse des Produkt-Lauftexts (20px / 1.5 statt
      24px / 1.45 aus main.css).
   Nur Desktop - Mobil hat eigenes Karussell-Layout (siehe unten).
   Die Regel .baukaesten-tile:first-child { align-self: stretch } oben ist
   damit redundant, bleibt aber unschaedlich stehen.
   ROLLBACK: diesen @media-Block loeschen. */
@media (min-width: 1025px) {
  .baukaesten-row {
    align-items: stretch;
  }

  .baukaesten-row .baukaesten-tile:not(:first-child) {
    padding-top: calc(8% - 30px);
  }

  .baukaesten-row .baukaesten-intro-text {
    font-size: 20px;
    line-height: 1.5;
  }
}

/* ============================================================
   Baukaesten Mobile/Tablet (≤ 1024px) - Swipe-Karussell
   Analog Waende: die Desktop-Parallelogramme (schraeg, gestaffelt,
   Scroll-Lock) werden zu aufrechten Rechteck-Karten, horizontal
   wischbar mit Snap. Grüne Intro-Karte ist die erste Karte im
   Karussell (kommt aus dem Template als erstes .baukaesten-tile).

   Diese Regeln stehen hier (nicht in main.css), weil baukaesten-new.css
   spaeter geladen wird und sonst die main.css-Regeln bei gleicher
   Spezifitaet ueberschreibt. */
@media (max-width: 1024px) {

  .baukaesten {
    margin-top: 0;
    overflow-x: clip;
  }

  .baukaesten-sticky {
    position: static;
    top: auto;
    overflow-x: clip;
  }

  .baukaesten-row {
    /* horizontales Swipe-Karussell */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* synchron mit padding-left halten - sonst snappt der Browser auf den
       Content-Rand ohne das visuelle Padding zu beruecksichtigen und die
       erste Karte rutscht unter den Rand (gleiche Mechanik wie bei
       .waende-grid). */
    scroll-padding-inline: 20px;
    align-items: stretch;
    gap: var(--space-s, 16px);
    /* Abstaende reduziert (Kundenwunsch Mica 2026-09-04, live in DevTools
       justiert): frueher padding: var(--space-m, 24px) rundum. Oben/unten
       0 - die Karten sollen direkt an die Nachbarsektionen anschliessen,
       der Abstand kommt allein aus den Schraegen. Links 20px als schmaler
       Anschlag (der lange offene Punkt "Baukaesten Swipe-Karussell mobil -
       kleiner Seitenrand gewuenscht"). Rechts bewusst 0, damit die naechste
       Karte als Anschnitt sichtbar bleibt.
       ROLLBACK: padding: var(--space-m, 24px); scroll-padding-inline:
       var(--space-m, 24px); */
    padding: 0 0 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .baukaesten-row::-webkit-scrollbar {
    display: none;
  }

  .baukaesten-row .baukaesten-tile {
    /* Parallelogramm-Clip weg, dann Schraege pro Karte: von links UNTEN
       nach rechts OBEN (linke ob. Ecke tiefer, rechte ob. Ecke oben).
       Versatz clamp(20px,2.5vw,40px) = exakt dieselbe flache Steigung wie
       die Sektions-Trennungen (data-diagonal, z.B. Elefanten-Sektion) -
       konsistent ueber die ganze mobile Seite. NICHT prozentual zur
       Kartenhoehe (das war mit 15.25% viel zu steil). !important, weil
       der urspruengliche Clip inline am Element sitzt.

       UNTERKANTE ↘ (Kundenwunsch Mica 2026-07-22): linke un. Ecke hoch,
       rechte un. Ecke tief - GLEICHER Versatz/Winkel wie die Kontakt-
       Oberkante darunter (kontakt-new.css .kontakt-tile--links, ebenfalls
       clamp(20px,2.5vw,40px)), damit die letzte Karte parallel an die
       Kontakt-Sektion anschliesst. Alle Karten bekommen die ↘-Unterkante
       (Kundenvorgabe: alle gleich). Oberkante ↗ bleibt -> Trapez, kein
       Parallelogramm. ROLLBACK: Unterkante zurueck auf 100% 100%, 0% 100%
       (gerade).
       WINKEL-KORREKTUR (2026-09-04): der Versatz ist nicht mehr der volle
       clamp(20px,2.5vw,40px), sondern 0.76 davon. Grund: ein ABSOLUTER
       px-Versatz ergibt nur dann denselben WINKEL, wenn er ueber dieselbe
       BREITE laeuft. Die Nachbarkanten (Logo-Loop-Video darueber, alle
       data-diagonal-Sektionstrennungen) liegen vollbreit ueber 100vw, die
       Karte dagegen ueber flex-basis 80% minus dem 20px-padding-left des
       Rows - bei 430px Viewport also ~328px. Gleiche 20px auf 328px statt
       430px = spuerbar STEILER (3.5 deg statt 2.7 deg), die Karten fielen
       aus der Flucht.

         Faktor 0.76 = 328 / 430

       Naeherung, kein exakter Wert: das feste 20px-Padding faellt bei
       breiteren Viewports relativ weniger ins Gewicht (bei 768px waeren es
       ~0.78). Fuer den optischen Abgleich ausreichend; eine exakte Loesung
       muesste die Kartenbreite per calc aus dem Viewport ableiten.
       ROLLBACK: Faktor entfernen -> voller clamp-Wert (zu steil).

       transform (Staffel-Versatz) zuruecksetzen. */
    clip-path: polygon(0% calc(clamp(20px, 2.5vw, 40px) * 0.76), 100% 0%, 100% 100%, 0% calc(100% - clamp(20px, 2.5vw, 40px) * 0.76)) !important;
    transform: none;
    /* aspect-ratio raus: Karten-Hoehe richtet sich nach Inhalt, alle
       gleich hoch durch align-items:stretch. Feste Swipe-Breite. */
    aspect-ratio: auto;
    flex: 0 0 80%;
    scroll-snap-align: start;
    /* padding-top haelt den Text frei von der oberen Schraege. Da die
       Schraege jetzt flach ist (max 40px) UND links tiefer liegt, reicht
       ein moderater oberer Abstand. */
    padding: var(--space-l, 40px) var(--space-m, 24px) var(--space-m, 24px);
    border-radius: 2px;
  }

  /* Fliesstext in den Karten kleiner (Kundenwunsch 2026-07-22). Die
     Desktop-Regel in main.css ist faktisch fix 20px (clamp mit Min=Max),
     das war auf dem Handy deutlich zu gross - bei ~390px Viewport passen
     nur noch 3-4 Woerter pro Zeile.

     Referenz 390px (Standard-Phone-Viewport) statt der sonst ueblichen
     1440: bei /1440 kaeme auf Mobile rechnerisch ~3.8px raus, der Min
     wuerde immer gewinnen und der calc waere wieder funktionslos - genau
     der Fehler der Desktop-Regel. Mit /390 greift die Mitte echt:
     390px -> 14px, ab ~557px -> Max 20px. Heisst: nur echte Phones
     bekommen 14px, ab Mobile-Landscape/Tablet steht wieder der
     Desktop-Wert. Betrifft NUR .baukaesten-desc - Headline, Preis und
     RAUM-Label bleiben unveraendert.

     Der Selektor ist bewusst .baukaesten-row .baukaesten-desc (zwei
     Klassen) - die main.css-Regel hat nur eine, dadurch gewinnt diese
     hier unabhaengig von der Ladereihenfolge. */
  .baukaesten-row .baukaesten-desc {
    font-size: clamp(14px, calc(14 / 390 * 100vw), 20px);
  }

  /* Intro-Karte (gruene erste Karte) analog zum Fliesstext der Produkt-
     Karten - gleiche Referenz, gleiches Verhalten. Desktop-Regel in
     main.css ist clamp(20px, 20/1440*100vw, 24px), auf Mobile also
     ebenfalls fix 20px. */
  .baukaesten-row .baukaesten-intro-text {
    font-size: clamp(14px, calc(14 / 390 * 100vw), 20px);
  }

  /* ── Raum-Effekt beim Swipen (Kundenwunsch Mica 2026-07-22) ──
     Karten verkleinern sich beim Rausgleiten nach LINKS -> Tiefen-/Raum-
     Eindruck. NUR links (exit-Phase), rechts reinkommende Karten bleiben
     voll gross. Rein CSS via scroll-driven animation (animation-timeline:
     view(inline)) - kein JS, die Desktop-Scroll-Mechanik (baukaesten-
     scroll.js, >1024px) bleibt voellig unangetastet.

     @supports-Gate: laeuft in Chromium (Android Chrome, Desktop Chrome/
     Edge) und Safari iOS 17.4+. Firefox (hinter Flag) und aeltere iPhones
     bekommen KEINEN Effekt - die Karten bleiben statisch, das native
     Swipe funktioniert normal weiter (kein Bruch, sauberer Fallback).

     animation-range: exit = Animation laeuft nur, waehrend die Karte den
     Container an der linken Kante verlaesst. entry (rechts rein) bleibt
     unberuehrt -> Effekt ausschliesslich links. transform-origin:left
     zieht die schrumpfende Karte zur Verschwinde-Kante (raeumlicher als
     zentriert). scale 1 -> 0.7 = deutlich (Kundenwunsch). Nur transform,
     GPU-beschleunigt, kein Layout-Thrash.

     ROLLBACK: diesen gesamten @supports-Block loeschen -> zurueck zum
     reinen Swipe ohne Verkleinerung. */
  @supports (animation-timeline: view(inline)) {
    .baukaesten-row .baukaesten-tile {
      transform-origin: left center;
      animation: baukaesten-raum-schrumpf linear both;
      animation-timeline: view(inline);
      animation-range: exit 0% exit 100%;
    }

    @keyframes baukaesten-raum-schrumpf {
      /* Start (Karte noch voll im Blick, beginnt links zu verschwinden) */
      from { transform: scale(1); opacity: 1; }
      /* Ende (Karte links raus) - deutlich verkleinert */
      to   { transform: scale(0.7); opacity: 0.85; }
    }

    @media (prefers-reduced-motion: reduce) {
      .baukaesten-row .baukaesten-tile {
        animation: none;
      }
    }
  }
}