/* ============================================================ Kartenstapel — die untere Karte schiebt sich vor die obere ============================================================ Vorbild: beam.ai/de/lp/hr-rpo-recruitment, Abschnitt „Jede offene Stelle schneller besetzen". GEMESSEN dort (25.08.2026): jede Karte ist `position:sticky; top:100px`, ALLE mit demselben top, 533 px hoch, 733 px von Kartenanfang zu Kartenanfang, Radius 15 px. Dass sich die naechste Karte VOR die vorherige schiebt, ist kein Skript und kein z-index: Geschwister malen in DOM-Reihenfolge, und die naechste Karte steht spaeter im DOM. Dieses Bauteil braucht deshalb KEIN JavaScript. ZWEI KLASSEN, SONST NICHTS. `stapel` an den Behaelter, `stapel-karte` an jedes Kind, das kleben soll, plus `style="--i:N"` fuer den Versatz. Kein Kind wird umbenannt, keine Struktur umgebaut. Der Bestand hat drei Kartenformen, und alle drei bleiben, wie sie sind: .mod-reveal mit .mod-grid darin (compliance) .mod-track mit .mod-reveal darin (workforce, Kernmodule) .ht-block im .howto-right (tender) ⚠ Genau so bleibt Regel 4 ruhig: die Klassenmengen der Sektionen wachsen um zwei Namen, die Struktur bleibt Wort fuer Wort gleich. GEMESSEN: `so-funktionierts` 0,136 -> 0,130 (Schwelle: -0,02), `kernfeatures-boxen` 1,000 -> 0,985. `kernmodule` gibt es nur einmal, dort greift Regel 4 ohnehin nicht. ⚠ WARUM ZENTRAL UND NICHT INS SEITEN-CSS. workforce, compliance und tender stehen alle drei in der Basislinie; dort ist Wachstum des Inline-CSS ein harter Fehler (Regel 2). Und die Regeln laegen sonst dreifach da — dieselbe Schuld, die `.mod-*` heute schon hat. Die Datei haengt im VOR dem Seiten-Style, deshalb ist jeder Selektor hier bewusst um eine Klasse spezifischer als der im Seiten-Style: `.stapel > .stapel-karte > .mod-reveal` schlaegt `.mod-reveal` unabhaengig von der Reihenfolge. ⚠ NUR AUF GROSSEN FENSTERN. Eine Karte, die hoeher ist als das Fenster, kann nicht kleben, ohne oben oder unten abgeschnitten zu sein — dann waere der Stapel ein Fehler und kein Effekt. GEMESSEN: compliance 682 px, tender 506-532 px, workforce 628 px. Ein Fenster von 760 px traegt die groesste davon mit 20 px Luft. Darunter bleibt alles beim Alten: normaler Fluss, untereinander, nichts klebt. Unter 1000 px Breite stehen die Karten ohnehin einspaltig und werden dabei hoeher als jedes Fenster (GEMESSEN bei 900 px: 854-880 px). ============================================================ */ @media (min-width:1000px) and (min-height:760px){ .stapel{ /* Die Klebelinie liegt unter der Kopfzeile (80 px) plus Luft. Der Versatz je Karte laesst vom Vorgaenger einen Streifen stehen — daran liest man, dass da ein Stapel ist. */ --stapel-linie:clamp(92px, 11vh, 122px); --stapel-versatz:10px; --stapel-luft:clamp(48px, 6vh, 80px); /* ⚠ AUSLAUF HINTER DER LETZTEN KARTE. Ohne ihn erreicht sie ihre Klebelinie NIE — gemessen am 25.08.2026: Karte 1 klebte 1320 px, Karte 2 640 px, Karte 3 **0 px**, ihre Linie wurde gar nicht erreicht. Grund: ein klebender Kasten kann nie ueber die Unterkante seines Behaelters hinausgeschoben werden, und der Behaelter endete direkt hinter der letzten Karte. Die Klebestrecke der letzten Karte ist genau so lang wie dieser Auslauf. */ --stapel-schwanz:clamp(280px, 34vh, 420px); } /* ⚠ DER AUSLAUF MUSS IN DEN INHALTSKASTEN DES BEHAELTERS, und das ist der Punkt, an dem zwei naheliegende Loesungen scheitern: · `padding-bottom` am Behaelter: die Sektion wird zwar 306 px hoeher, aber Chrome begrenzt eine klebende Karte am INHALTSkasten des Behaelters, nicht am Polsterkasten. GEMESSEN: die letzte Karte erreichte ihre Linie genau einen Messschritt lang und fiel dann wieder — Klebestrecke 0. · `margin-bottom` an der letzten Karte allein: kollabiert aus dem Behaelter heraus, solange der unten weder Polster noch Rahmen hat. GEMESSEN: Sektion blieb bei 3000 px. · `margin-bottom` an der letzten Karte PLUS `display:flow-root` am Behaelter: die Sektion waechst korrekt, die Karten davor kleben 300 px laenger — die letzte aber immer noch 0 px. Weil eine klebende Karte in ihrem Behaelter um ihre EIGENEN Aussenabstaende eingerueckt begrenzt wird: der Abstand, der die Strecke schafft, frisst sie im selben Zug wieder auf. Was bleibt: ein Auslauf, der WEDER Polster des Behaelters noch Abstand der Karte ist, sondern ein eigenes Kind. Genau dafuer ist ::after da — ein Block ohne Inhalt hinter der letzten Karte, in Hoehe des Auslaufs. */ .stapel::after{ content:""; display:block; height:var(--stapel-schwanz); } .stapel > .stapel-karte{ position:sticky; top:calc(var(--stapel-linie) + var(--i, 0) * var(--stapel-versatz)); } /* ---- Polster raus, Abstand als AUSSENabstand ------------------- ⚠ Im Bestand steht `padding:64px 0 70px` am .mod-reveal. Beides ist im Stapel falsch, aus zwei verschiedenen Gruenden: OBEN: als Teil des klebenden Kastens waeren die 64 px ein durchsichtiges Band ueber der Karte, durch das die Karte darunter zu sehen ist. Der Effekt lebt davon, dass die Kartenkante die Kante des klebenden Kastens IST. UNTEN: Innenabstand macht den klebenden Kasten HOEHER, und ein klebender Kasten kann nie ueber die Unterkante seines Behaelters hinaus — jeder Pixel Innenabstand ist also ein Pixel weniger Klebestrecke. GEMESSEN: mit 306 px Innenabstand hinter der letzten Karte wuchs deren Kasten von 628 auf 934 px, und ihre Klebestrecke blieb bei 0. Als AUSSENabstand verlaengert dieselbe Zahl den Behaelter und die Karte klebt 306 px. Genau daran lag Patricks Befund „die letzte Karte geht garnicht bis nach ganz oben". */ .stapel > .stapel-karte{ padding:0; margin:0 0 var(--stapel-luft); } .stapel > .stapel-karte:last-of-type{ margin-bottom:0; } /* ⚠ AUF tender.html GIBT ES DEN STAPEL NICHT MEHR. Er lief dort am 25.08.2026 kurz in `so-funktionierts` (die vier `.ht-block` in der rechten Spalte). Patrick: „auf der Tender seite kannst du den Karten teil wieder rueckgaengig machen, fand es davor besser." Die Seite steht wieder auf ihrer Schiene mit Punkt je Block; nur der Hero traegt die neuen Kaesten. Die Regeln fuer die Bauform `.ht-block` sind mitgegangen — dieselbe Datei soll nicht die Formen von morgen mitschleppen. Wieder gebraucht? Steht im Verlauf und ist in zehn Minuten zurueck. */ /* ---- Schatten nach oben --------------------------------------- Der Schatten des Bestands wirft nach UNTEN (--shadow-m). Beim Stapel schiebt sich die Karte aber nach oben ueber die vorherige — ohne Wurf nach oben liegt die Kante flach auf und der Effekt sieht nach Beschnitt aus statt nach Karte. Neutraler Ton, kein farbiger Schein (DESIGN.md §5). */ .stapel > .stapel-karte .mod-grid{ box-shadow:0 -14px 34px -16px rgba(8,48,43,.22), var(--shadow-m); } }