/* B A U S T E I N E   A L S   K A R T E N S T A P E L   ( konzept.html )

   Alternative zum waagerechten Bausteine-Slider auf konzept.html: die zehn
   Doppelseiten liegen untereinander, jede ueber die volle Bildschirmbreite,
   Bild links, Text rechts. Beim Scrollen bleibt jede Karte unter dem Kopf
   haengen (position: sticky), die naechste schiebt sich von unten darueber.
   Keine Pfeile, kein Wischen: die Geste ist das normale Scrollen.

   Bewegung, rein in CSS ueber scroll-getriebene Animationen
   (animation-timeline: view()), ohne JavaScript:
   1. Beim Hereinfahren kommt das Bild voran, der Text hinkt nach und holt
      auf, bis die Karte oben einrastet.
   2. Die Karte, die gerade zugedeckt wird, tritt leicht zurueck.
   Browser ohne diese Technik zeigen den Stapel ohne beides - er selbst
   braucht nur sticky.

   Unter 1024px: Bild oben, Text unten. Unter 600px die Kurzfassung. */

.bausteine-stapel {
   --stapel-oben: var(--header-hoehe, 110px);
   /* 70% des Fensters statt der vollen Hoehe: die naechste Karte ist beim
      Scrollen schon zu sehen, bevor sie kommt, und der Weg durch alle zehn
      wird um ein Drittel kuerzer. Untergrenze 520px, damit der Text auf
      flachen Fenstern nicht aus der Karte faellt. */
   --karte-hoehe: max(520px, calc(70vh - var(--stapel-oben) * 0.7));
   /* Im Raster der Seite: <main> ist 96% breit, 2% Rand links und rechts. */
   width: 100%;
   margin-top: 0;
   margin-bottom: 4rem;
}

/* Die Ueberschrift ueber dem Stapel: Groesse kommt aus der gemeinsamen
   Leiter (css/abschnitts-headlines.css, seit September 2026 eine Stufe
   groesser); hier nur Raum und Breite - viel Luft darueber und darunter,
   linksbuendig im Raster auf drei Vierteln der Breite. Selektor mit
   doppelter Klasse (0,3,1), damit padding gegen h2.left (0,1,1) und
   .container-text-Regeln sicher gewinnt. */
.container-text h2.stapel-titel.stapel-titel {
   width: 75%;
   padding-top: 10rem;
   padding-bottom: 7rem;
   hyphens: none;
}

@media screen and (max-width: 1200px) {
   .container-text h2.stapel-titel.stapel-titel { padding-top: 8rem; padding-bottom: 5rem; }
}

@media screen and (max-width: 1023px) {
   .container-text h2.stapel-titel.stapel-titel {
      width: 100%;
      padding-top: 6rem;
      padding-bottom: 4rem;
   }
}

@media screen and (max-width: 600px) {
   .container-text h2.stapel-titel.stapel-titel {
      padding-top: 4rem;
      padding-bottom: 2.5rem;
   }
}

/* Die Karte: klebt unter dem Kopf, zwei Haelften, so hoch wie das Fenster
   unter dem Kopf. */
.stapel__karte {
   position: sticky;
   top: var(--stapel-oben);
   display: grid;
   grid-template-columns: 1fr 1fr;
   height: var(--karte-hoehe);
   /* Weiss, ohne Linie: die Karte darunter verschwindet hinter der
      deckenden Flaeche, die Kante macht allein das Bild. */
   background-color: #ffffff;
   /* clip, NICHT hidden: overflow: hidden macht die Karte zum Scroll-
      Container, und die scroll-getriebene Animation des Textes wuerde sich
      dann an der Karte messen statt am Fenster - der Text stuende immer
      "fertig". clip beschneidet nur. */
   overflow: clip;
   transform-origin: 50% 0;
}

/* Bild links, volle Hoehe der Karte, beschnitten statt verzerrt. */
.stapel__karte .baustein__bild {
   order: 1;
   position: relative;
   min-width: 0;
   height: 100%;
   overflow: clip;
}

.stapel__karte .baustein__bild picture,
.stapel__karte .baustein__bild img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: 0;
   padding: 0;
}

/* Bildausschnitt je Karte. Die Bildhaelfte ist am Desktop hochformatig
   (rund 690 x 790px bei 1440px), das 3:2-Bild wird also seitlich stark
   beschnitten; object-position sagt, welcher Streifen bleibt. Vorgabe ist
   die Mitte; wo das Motiv am Rand liegt, steht hier die Ausnahme. */
#bezugstherapeut .baustein__bild img { object-position: 22% 50%; }   /* Gespraechspartner links im Vordergrund bleibt im Bild */

/* Text rechts, senkrecht mittig, Lesebreite begrenzt. */
.stapel__karte .baustein__text {
   order: 2;
   display: flex;
   flex-direction: column;
   /* Der Textblock steht als Ganzes senkrecht mittig in der Karte; auch
      waagerecht mit etwas mehr Luft links, sodass er in der Haelfte
      mittiger sitzt. */
   justify-content: center;
   min-width: 0;
   padding: 5vh 6vw 5vh 7vw;
}

.stapel__karte .baustein__kopf {
   display: flex;
   flex-direction: column;
   margin-bottom: 1.25rem;
}

.stapel__karte .baustein__ziffer {
   font-family: var(--baskerville-font), serif;
   font-size: 3rem;
   line-height: 1;
   color: var(--jadegruen);
   margin-bottom: 1rem;
   font-variant-numeric: tabular-nums;
}

.stapel__karte h3 {
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 1.6rem;
   line-height: 1.2;
   font-weight: 500;
   color: var(--darkblue);
   margin: 0;
   padding: 0;
   max-width: 24ch;
   hyphens: manual;
}

.stapel__karte p {
   font-size: 0.95rem;          /* bleibt kleiner als die 17px-Leiter: die
                                   Karte ist 70vh hoch und schneidet ab */
   line-height: 1.6;
   font-weight: 500;            /* Fliesstext-Leiter 05.10.2026 */
   letter-spacing: 0.012em;
   color: rgb(134,134,139);
   margin: 0;
   max-width: 62ch;
}

/* Der erste Satz steht hier schon im Markup in <span class="light">: dunkel
   wie der erste Satz aller Absaetze (style.css .satz1), nicht mehr blau. */
.stapel__karte p .light { font-weight: 500; color: rgb(29,29,31); }
.stapel__karte p .card__read-more {
   /* css/style.css klappt .card__read-more mit opacity 0 / height 0 zu
      (alte Aufklapp-Mechanik). Hier steht der ganze Text. */
   display: inline;
   opacity: 1;
   height: auto;
}
.stapel__karte .baustein__kurz { display: none; }

/* --- Bewegung ------------------------------------------------------------ */
@supports (animation-timeline: view()) {

   /* 1. Der Text hinkt nach: waehrend die Karte von unten hereinfaehrt,
         steht der Text ein Stueck tiefer als das Bild und holt auf, bis die
         Karte oben angekommen ist (entry 0% -> 100%). Das Bild faehrt mit
         der Karte, der Text spaeter - das ist der Unterschied im Tempo. */
   .stapel__karte .baustein__text {
      animation: stapel-nachlauf cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      /* Laeuft laenger als das Hereinfahren der Karte (entry 100%): bis die
         Karte 40% des Sichtfensters bedeckt, holt der Text noch auf. Das
         ist der Tempounterschied zum Bild, das mit der Karte faehrt. */
      animation-range: entry 0% cover 40%;
   }

   @keyframes stapel-nachlauf {
      from { transform: translateY(70vh); opacity: 0; }
      50%  { opacity: 1; }
      to   { transform: translateY(0); opacity: 1; }
   }

   /* 2. Zuruecktreten der zugedeckten Karte: laeuft, waehrend die naechste
         sie ueberfaehrt (exit-Bereich). Die letzte Karte bleibt still. */
   .stapel__karte:not(:last-child) {
      animation: stapel-zuruecktreten linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
   }

   @keyframes stapel-zuruecktreten {
      to { transform: scale(0.96); }
   }

   @media (prefers-reduced-motion: reduce) {
      .stapel__karte,
      .stapel__karte .baustein__text {
         animation: none;
      }
   }
}

/* Unter 1024px: Bild oben (3:2), Text unten; Karte so hoch wie noetig,
   hoechstens Sichtfenster. */
@media screen and (max-width: 1023px) {
   .stapel__karte {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      /* Hoehe aus dem Inhalt, aber mindestens 75% des Fensters - so sind
         (fast) alle Karten gleich hoch und decken sich beim Stapeln, und
         nichts wird abgeschnitten, wenn ein Text laenger ist. */
      height: auto;
      min-height: calc(75vh - var(--stapel-oben));
      max-height: none;
   }
   .stapel__karte .baustein__bild { height: auto; aspect-ratio: 3 / 2; }
   /* Unten reichlich Luft: die Pill-Leiste liegt ueber dem unteren Rand,
      und die naechste Karte soll erst nach einer sichtbaren Pause ueber den
      Text fahren. */
   .stapel__karte .baustein__text { justify-content: flex-start; padding: 38px 32px 140px; }
   .stapel__karte .baustein__ziffer { font-size: 2.5rem; margin-bottom: .9rem; }
   .stapel__karte h3 { font-size: 1.35rem; }
   .stapel__karte p { font-size: .95rem; line-height: 1.6; }
}

@media screen and (max-width: 600px) {
   .bausteine-stapel { --stapel-oben: var(--header-hoehe, 90px); }
   /* Jede Karte fuellt das Fenster unter dem Kopf: die naechste Karte
      taucht erst an der Unterkante auf, nicht mitten im Weissraum. svh
      rechnet mit der kleinsten Fensterhoehe (Safari-Leisten eingeblendet),
      vh bleibt als Rueckfallebene stehen. */
   .stapel__karte {
      min-height: calc(100vh - var(--stapel-oben));
      min-height: calc(100svh - var(--stapel-oben));
   }
   /* Pause vor dem Ueberlagern: die Karte ist um gut ein Drittel Fenster
      hoeher als das Sichtfenster. Sie haengt oben fest, unter dem Text
      bleibt Weissraum, und erst nach diesem Stueck Scrollweg erscheint die
      naechste Karte an der Unterkante. Die letzte Karte braucht die Pause
      nicht, sonst entsteht nur Leerraum vor dem naechsten Abschnitt. */
   .stapel__karte:not(:last-child) {
      min-height: calc(135vh - var(--stapel-oben));
      min-height: calc(135svh - var(--stapel-oben));
   }
   /* Unten deutlich mehr Luft als oben: dort liegt die Pill-Leiste, und die
      naechste Karte schiebt sich von dort heran - der Text soll nie auf der
      Kante oder hinter der Pill stehen. */
   .stapel__karte .baustein__text { padding: 30px 22px calc(130px + env(safe-area-inset-bottom)); }
   .stapel__karte p:not(.baustein__kurz) { display: none; }
   .stapel__karte .baustein__kurz { display: block; }
   @supports (animation-timeline: view()) {
      .stapel__karte .baustein__text { animation: none; }
   }
}