/* ========================================================================== Baustein: Angebots-Stapel mit Ansprechpartner-Zeile (Sektion 5, Was tun wir?) Datei: css/bausteine/angebots-stapel.css Gebraucht auf: index.html Bauvorschrift: DESIGN.md, Bausteine "Angebots-Stapel" und "Ansprechpartner-Zeile", Flächen nach D16 Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten, Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert. ========================================================================== */ /* Präfix: .stapel-* Stand 2026-09-09, dritte Fassung nach den Reviews mit Christian Hansmann. Zwei Betriebsarten: 1. Ohne JavaScript: jede Karte klebt per position: sticky bei 24px, die Karten folgen mit 24px Abstand im Fluss. Braucht kein Skript, bewegt nichts selbst. 2. Mit JavaScript (.stapel.is-pinned): das Deck klebt als Ganzes bei 24px, die Karten liegen absolut übereinander und werden von js/bausteine/angebots-stapel.js per transform gleitend nach oben gezogen, wie in der Referenz aus DESIGN.md. Die Höhe der Laufstrecke setzt das Skript inline auf .stapel. Bilder: je Karte eine Fotoszene mit echtem oder selbst gebautem Bildschirminhalt, das Bild ist größer als die Karte und wird von ihr beschnitten, die linke Kante blendet per Maske in die Kartenfarbe (.stapel-card--szene, .stapel-card--geraet), Feinlagen je Karte über .stapel-card--handy und .stapel-card--kpi. Abweichungen von DESIGN.md, alle Vorgaben Christian Hansmann 2026-09-08 und 2026-09-09, Nachtrag in Phase 4 offen: - top 24px statt 98px: die Kopfzeile klebt nicht (Offene Punkte in DESIGN.md). - Erledigt mit D20 (2026-09-14): der Stapel steht in .container, eine Breite für alle Sektionen. - Flächen Carbon, Karte, Blau, Karte, Carbon statt der fünf Flächen aus D16, --lav und --pink sind mit D17 entfallen. - Fotoszenen statt Kunstflächen nach D11, Absatz in lead statt body-l, Stichwort-Pillen, Kennzahlenzeile, kein sichtbarer Sektionskopf, keine Ziffern, Porträt in der Ansprechpartner-Zeile, keine Haarlinie darüber. */ .stapel { --stapel-h: 700px; /* Kartenhöhe, auch ab 980px, siehe unten */ --stapel-top: 24px; /* Klebekante unter der nicht klebenden Kopfzeile */ --stapel-gap: 24px; /* Abstand zwischen den Karten */ margin: 0; } /* Überschrift nur für Screenreader, der sichtbare Sektionskopf ist gestrichen */ .stapel-heading-sr, .stapel-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .stapel-deck { list-style: none; margin: 0; padding: 0; } /* Karte, Betriebsart 1: klebt selbst */ .stapel-card { position: sticky; top: var(--stapel-top); height: var(--stapel-h); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; padding: 42px 50px 46px; transform-origin: 50% 0; } .stapel-card + .stapel-card { margin-top: var(--stapel-gap); } /* z-index 1 bis 5 aufsteigend, jede Karte deckt die vorige */ .stapel-card:nth-child(1) { z-index: 1; } .stapel-card:nth-child(2) { z-index: 2; } .stapel-card:nth-child(3) { z-index: 3; } .stapel-card:nth-child(4) { z-index: 4; } .stapel-card:nth-child(5) { z-index: 5; } /* Betriebsart 2: Deck klebt, Karten liegen absolut übereinander, das Skript bewegt sie */ .stapel.is-pinned .stapel-deck { position: sticky; top: var(--stapel-top); height: var(--stapel-h); } .stapel.is-pinned .stapel-card { position: absolute; top: 0; left: 0; width: 100%; margin: 0; will-change: transform; } /* Textblock links: Ziffer, Titel, Absatz. Fuß darunter am unteren Kartenrand. */ .stapel-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; min-height: 0; max-width: min(580px, 50%); } /* Trennung nur an gesetzten ­, damit overflow-wrap aus style.css nicht mitten im Wort bricht */ .stapel-title { hyphens: manual; } /* Zweizeilige Ueberschriften ab 981 px (Weisung 2026-09-29: "alle Ueberschriften der Karten auf zwei Zeilen beschraenken", ausdruecklich ohne die Texte zu kuerzen). Da der Text bleibt, kann nur die Schriftgroesse das leisten. Gemessen am selben Tag, noetige Groesse fuer zwei Zeilen als Anteil der heutigen: 1024 px Karte 4 braucht 83 % (39 statt 47 px) 1440 px Karte 4 braucht 87 % (58 statt 66 px) 1920 px Karte 4 braucht 85 % (60 statt 70 px) Die Klammer unten liegt an jeder dieser Breiten unter dem noetigen Wert: 1024 -> 38 px, 1440 -> 53 px, 1920 -> 58 px. Karte 4 ("Formulare, die zu Ihrem Prozess passen") ist der enge Fall, weil ihre Textspalte mit 46 Prozent die schmalste der fuenf ist. Abweichung von D6: die Rolle display-3 steht auf clamp(46px, 4.6vw, 70px), hier gilt eine eigene Groesse. Dasselbe Muster wie im Hero, wo .hero-title die Zeilenhoehe und die Laufweite der Rolle ueberschreibt. Nachtrag Phase 4 offen. Unter 981 px bleibt die Rolle unveraendert, siehe README: zwei Zeilen sind dort mit diesem Text nicht zu haben. */ @media (min-width: 981px) { .stapel-title { font-size: clamp(38px, 3.7vw, 58px); } } /* Eine Ueberschrift einzeilig: Karte 5 (Weisung 2026-10-07, "Der Text 'Abkuerzung in die BTP-Welt' soll in einer Zeile ohne Umbruch dargestellt werden"). Gilt nur fuer diese eine Karte, deshalb eine eigene Klasse am h3 und nicht am Kartentyp. Der Satz braucht einzeilig rund das 10,8-fache der Schriftgroesse an Breite (498 px bei 46 px, gemessen 2026-10-07). Daraus folgt, was die Spalte hergibt: Fenster Spalte noetige Groesse 981 px 370 px 34 px 1024 px 388 px 36 px 1280 px 499 px 46 px 1440 px 569 px 53 px 1920 px 580 px 54 px (Spalte durch max-width: min(580px, 50%) gedeckelt) Die Klammer unten liegt an jeder dieser Breiten darunter, mit Luft: 981 -> 32 px, 1024 -> 34 px, 1280 -> 42 px, 1440 -> 48 px, ab 1576 -> 52 px. Zwischen 641 und 980 px ist die Karte einspaltig, die Spalte also breit, und der Satz passt schon bei der Rollengroesse. Nur ganz unten wird es knapp: bei 641 px misst die Spalte 502 px und der Satz 498 px, vier Pixel Rest. Mit white-space: nowrap waere das ein Ueberlauf, sobald eine Schrift eine Spur breiter laeuft, deshalb nimmt min() die Groesse dort etwas zurueck. Unter 641 px bleibt alles wie bisher, der Titel bricht dort auf zwei Zeilen (Weisung: nicht auf dem Handy erzwingen). Einzeilig waeren dort 25 px noetig, knapp die Haelfte, und der Titel dieser Karte waere sichtbar kleiner als der der anderen vier. Preis dieser Loesung: Die Ueberschrift ist ab 981 px kleiner als die der vier anderen Karten, bei 1920 px 52 statt 58 px. Anders ist eine Zeile mit diesem Text nicht zu haben, und der Text soll bleiben. */ @media (min-width: 641px) { .stapel-title--einzeilig { white-space: nowrap; } } @media (min-width: 641px) and (max-width: 980px) { .stapel-title--einzeilig { font-size: min(46px, 7vw); } } @media (min-width: 981px) { .stapel-title--einzeilig { font-size: clamp(32px, 3.3vw, 52px); } } /* Kleine Überschrift über dem Titel (2026-09-28, Weisung mit Screenshot). Sie benennt das Angebot, während der Titel die Aussage trägt. Bewusst nicht die Rolle .label aus style.css: die setzt text-transform: uppercase, im Screenshot steht der Text gemischt ("SAP Softwareentwicklung", nicht "SAP SOFTWAREENTWICKLUNG"). Zweite Weisung vom selben Tag: die erste Fassung war in 13 px und --muted-dark gesetzt und damit auf den dunklen Karten schlecht zu lesen. Der Kicker trägt jetzt die Rolle lead im Markup und hängt für die Farbe an denselben Regeln wie .stapel-text. Damit sind Größe, Gewicht, Zeilenhöhe und Farbe dieselben wie beim Absatz unter dem Titel, und es gibt nur noch eine Stelle, an der sich das je Karte einstellen lässt. Kein Eyebrow im Sinne von D20: der gilt für Sektionsköpfe, nicht für Karten. */ .stapel-kicker { margin: 0 0 16px; } /* Kleine Überschrift über dem Titel (2026-09-28, Weisung mit Screenshot). Sie benennt das Angebot, während der Titel die Aussage trägt. Bewusst nicht die Rolle .label aus style.css: die setzt text-transform: uppercase, im Screenshot steht der Text gemischt ("SAP Softwareentwicklung", nicht "SAP SOFTWAREENTWICKLUNG"). Zweite Weisung vom selben Tag: die erste Fassung war in 13 px und --muted-dark gesetzt und damit auf den dunklen Karten schlecht zu lesen. Der Kicker trägt jetzt die Rolle lead im Markup und hängt für die Farbe an denselben Regeln wie .stapel-text. Damit sind Größe, Gewicht, Zeilenhöhe und Farbe dieselben wie beim Absatz unter dem Titel, und es gibt nur noch eine Stelle, an der sich das je Karte einstellen lässt. Kein Eyebrow im Sinne von D20: der gilt für Sektionsköpfe, nicht für Karten. */ .stapel-kicker { margin: 0 0 16px; } /* Absatz in der Rolle lead (21px), höchstens drei Zeilen, Vorgabe 2026-09-08 */ .stapel-text { margin-top: 24px; } /* Stichwort-Pillen, abgeleitet aus der Anker-Tagleiste in DESIGN.md, hier ohne Link: 34px hoch, Rahmen in der Haarlinie der Kartenfläche, --r-pill, body-s in Gewicht 700 */ .stapel-tags { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .stapel-tag { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-body-s); font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; } /* Kartenfuß: nur noch die Ansprechpartner-Zeile, der Kartenlink sitzt seit 2026-09-15 als Button oben rechts (.stapel-cta, unten) */ .stapel-foot { margin-top: 32px; } .stapel-person { display: flex; align-items: center; gap: 16px; padding: 8px 0 0; } /* Wort über Name, das Porträt steht links davon */ .stapel-person-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .stapel-person-label { font-size: var(--fs-body-s); letter-spacing: .12em; } /* overflow-wrap fängt Doppelnamen auf schmalen Karten */ .stapel-person-name { font-weight: 700; overflow-wrap: anywhere; } /* Porträt nach D13: quadratisch, --r-md, Rahmen --line-card, kein Filter. Vorgabe Christian Hansmann, 2026-09-08: vorhandene Porträts zeigen, 64px. */ .stapel-portrait { width: 64px; height: 64px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line-card); object-fit: cover; } .stapel-card--carbon .stapel-portrait { border-color: rgba(255,255,255,.18); } .stapel-card--blue .stapel-portrait { border-color: rgba(255,255,255,.30); } /* Genau ein Link je Karte, seit 2026-09-15 (Weisung Christian Hansmann) als Button oben rechts über dem Bild statt als Textlink im Fuß. .button aus style.css (48 px, --r-sm, Pfeil als .icon-pfeil, seit 2026-10-12), die Farbe je Kartenfläche steht unten bei den Flächen. Liegt über Bild (z 1) und Textblock (z 2). Zweite Weisung am selben Tag: keine sichtbare Beschriftung, nur der Pfeil, damit alle fünf gleich groß sind: 48 x 48 px, Pfeil in --fs-lead. Das Ziel steht als aria-label am Link (Brand Voice: Sekundär-Links benennen das Ziel). Ab 980 px steht der Button im Fluss als erstes Kind der Karte, rechtsbündig über dem Titel. */ .stapel-cta { position: absolute; z-index: 3; top: 42px; right: 50px; /* Innenabstand der Karte */ width: 48px; padding: 0; gap: 0; font-size: var(--fs-lead); line-height: 1; } /* Ausgeblendete Absprung-Buttons (2026-10-28, Weisung: "alle Buttons ausblenden, welche ins Leere führen ... Ausblenden, nicht löschen"). Betroffen sind vier der fünf Karten. Drei zeigen auf Seiten, die es noch nicht gibt (individualentwicklung.html, formulare.html), der vierte auf btp-festpreis.html, die es gibt, auf Weisung trotzdem aus. Nur die Work-Zone-Karte behält ihren Button. display: none und nicht nur unsichtbar: Ein Button, der nur optisch verschwindet, bleibt in der Tabreihenfolge und im Screenreader. Man landete dann mit der Tastatur auf einem Link zu einer Seite, die es nicht gibt. Das ist schlechter als kein Link. Die Markierung sitzt am Element und nicht an der Karte, damit beim Nachbauen der Seiten nur die Klasse im Markup wegfällt und hier nichts anzufassen ist. Gelistet in README.md unter "Offene Punkte". */ .stapel-cta--aus { display: none; } /* Preisstempel der BTP-Karte, dritte Fassung (2026-10-08, Weisung "der Sticker soll prominenter werden"). Erste Fassung war eine Pille von 34 px nach dem Vorbild der damaligen .kpi-pille aus den Kennzahlen (seit dem 2026-10-29 entfallen), zu leise. Zweite war ein zweizeiliger Stempel, absolut unten rechts, gedreht. Die lag zu 100 Prozent auf dem Laptop-Screenshot, und genau das war das Problem: Ein 40-px-Ring um den Stempel mittelt dort auf #5a5e65, Gelb steht darauf mit 3,23:1, auf der dunklen Kartenflaeche mit 9,38:1. Sieben Prozent dieses Umfelds waren sogar heller als das Gelb. Dazu lag der Stempel 399 px neben der Textspalte, also ausserhalb des Lesewegs. Drei Hebel, in der Reihenfolge ihrer Wirkung: 1. Lage. Der Stempel steht jetzt im Fuss der Textspalte neben dem Ansprechpartner, auf der dunklen Flaeche und im Lesefluss. Das allein verdreifacht den Kontrast gegen sein Umfeld, ohne ein Pixel groesser zu werden. 2. Groesse. Der Preis war 27 px bei Schriftstaerke 400 und damit leichter als jede Ueberschrift der Karte. Jetzt clamp(32px, 2.4vw, 42px) bei 700. Der Stempel waechst damit von 170 x 88 auf rund 215 x 118, also von 1,7 auf 2,9 Prozent der Karte. 3. Auftritt. Einmalig beim Hereinscrollen, nicht in Schleife: Alles ueber fuenf Sekunden braucht nach WCAG 2.2.2 einen Anhalter, und davon stehen schon zwei Faelle im README. Farbe unveraendert: Gelbe Flaeche mit Ink-Text ist nach D17 der eine erlaubte Einsatz von Gelb und zugleich der staerkste Akzent der Palette. Dort war nichts mehr zu holen. Form unveraendert: gedrehte Platte mit --r-md. Ein runder Stoerer waere lauter, fuehrt aber eine Form ein, die es sonst nirgends auf der Site gibt. Warum zwei Elemente: Der Absatz traegt .reveal aus css/style.css, das beim Einblenden transform: none setzt. Die Drehung muss deshalb auf das innere Blatt, sonst loeschen sich die beiden gegenseitig. Dasselbe Muster wie im Hero, wo .js den Ausgangszustand setzt und die Klasse aus main.js ihn aufhebt. .stapel-preis-wert traegt bewusst keine Rolle aus css/style.css mehr (vorher heading-l, 27 px): Die Groesse hier ist groesser als jede Rolle und wuerde sie ueberschreiben, was docs/entwicklung.md Regel 4 verbietet. Eigene Groesse statt ueberschriebener Rolle. .stapel-preis-kopf benutzt .label unveraendert. */ /* Der Stempel steht direkt neben dem Ansprechpartner, nicht am rechten Spaltenrand (Weisung 2026-10-08). Grund: Die Kunstflaeche der Karte beginnt innerhalb der Textspalte, und am Spaltenrand lag der Stempel mit einem Teil darauf. Viel ist dabei nicht zu holen, Person und Stempel fuellen die Spalte fast aus, der Weg nach links betraegt nur die Restbreite. */ .stapel-foot--preis { display: flex; align-items: center; justify-content: flex-start; gap: 24px; flex-wrap: wrap; } /* Ab 1340 px steht der Anhaenger neben dem Ansprechpartner und nicht darunter (Weisung 2026-10-08). flex-wrap: wrap allein genuegt dafuer nicht: Der Umbruch wird an den Wunschbreiten entschieden, geschrumpft wird erst danach. Mit nowrap teilen sich die zwei den Platz, der Name geht dabei auf zwei Zeilen. Der Anhaenger schrumpft nicht, er traegt flex: none. Kein min-width: 0 auf der Person. Das war am 2026-10-08 kurz drin und war falsch: Es nimmt dem Block den Schutz durch seine Mindestbreite, bei 1200 px wurde der Textkasten auf 103 px gedrueckt und "ANSPRECHPARTNER" (152 px) lief heraus. Ohne die Angabe schrumpft die Person nur bis zu ihrer Mindestbreite von rund 220 px. Gemessen am 2026-10-08, Spalte gegen Bedarf (Person, 24 px Luecke, Anhaenger): 1920 px 580 gegen 570 1440 px 569 gegen 552 1340 px 525 gegen 513 1300 px 508 gegen 513, fuenf Pixel zu wenig Die Grenze liegt deshalb bei 1340 und nicht bei 1300. Darunter bleibt es beim Umbruch, der Anhaenger steht dann unter der Person und liegt dort ohnehin vollstaendig auf der dunklen Flaeche. */ @media (min-width: 1340px) { .stapel-foot--preis { flex-wrap: nowrap; } } .stapel-preis { margin: 0; flex: none; } /* Form des Anhaengers (2026-10-08, Weisung mit Vorlage: "Mir gefaellt die Form und das kleine Loch sowie den boarder", die Vorlage um 90 Grad nach links gedreht). Quer statt hochkant: Das verjuengte Ende mit dem Loch sitzt links, der Inhalt rechts davon. Drei Ebenen, weil ein border einer clip-path nicht folgt: aussen die gelbe Kontur mit 2 px, darin der Spalt in der Kartenfarbe mit 5 px, darin das gelbe Schild. Alle drei bekommen dieselbe clip-path, jede greift auf ihren eigenen, kleineren Kasten. Dadurch sind Kontur und Spalt an den Schraegen eine Spur breiter als an den geraden Kanten, was bei diesen Staerken nicht auffaellt und zum Eindruck eines gestanzten Anhaengers passt. Die Verjuengung --preis-spitze ist in px angegeben und waechst deshalb nicht mit, sie beginnt auf jeder Ebene an derselben Stelle ihres eigenen Kastens. --preis-spitze ist die Tiefe der Verjuengung. Die Schraegen laufen auf eine kurze senkrechte Kante zu, nicht auf eine Spitze, wie in der Vorlage. border-radius und clip-path schneiden beide, das Ergebnis ist die Schnittmenge: rechts rund nach --r-md (D8, Rolle Karten), links gestanzt. Das Loch ist kein echtes Loch, sondern eine Scheibe in der Kartenfarbe. Ein echtes braeuchte clip-path mit evenodd und einer path()-Angabe, und die Karte darunter ist ohnehin durchgehend --ink, das Ergebnis ist dasselbe. Steht die Karte einmal auf einer anderen Flaeche, muss diese Farbe mit. */ .stapel-preis-blatt { --preis-spitze: 34px; display: block; padding: 2px; background: var(--yellow); border-radius: 0 var(--r-md) var(--r-md) 0; clip-path: polygon(var(--preis-spitze) 0, 100% 0, 100% 100%, var(--preis-spitze) 100%, 0 74%, 0 26%); transform: rotate(-4deg); } /* Der Spalt zwischen Kontur und Schild (Weisung 2026-10-08: "Label in gelb, transparenter boarder und auf der aeussersten ebene nochmal ein gelber boarder"). Er traegt die Kartenfarbe und nicht transparent: Ein echtes Loch in einer clip-path-Form braucht path() mit evenodd oder eine Maske, und eine Maske arbeitet auf Rechtecken, die Aussparung haette an der Verjuengung also eine Ecke statt der Schraege. Auf der dunklen Karte ist das Ergebnis dasselbe. Nur dort, wo der Anhaenger die Kunstflaeche beruehrt, zeigt der Spalt Ink statt des Fotos. Steht die Karte je auf einer anderen Flaeche, muss diese Farbe mit, genau wie beim Loch. */ .stapel-preis-spalt { display: block; padding: 5px; background: var(--ink); border-radius: 0 var(--r-md) var(--r-md) 0; clip-path: polygon(var(--preis-spitze) 0, 100% 0, 100% 100%, var(--preis-spitze) 100%, 0 74%, 0 26%); } .stapel-preis-flaeche { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 24px 18px 60px; /* rechts und links je 4 bzw. 2 px knapper, damit die Fusszeile bei 1920 und 1340 px nicht auf 0 px genau aufgeht, siehe Messung unten */ background: var(--yellow); color: var(--ink); border-radius: 0 var(--r-md) var(--r-md) 0; clip-path: polygon(var(--preis-spitze) 0, 100% 0, 100% 100%, var(--preis-spitze) 100%, 0 74%, 0 26%); } .stapel-preis-loch { position: absolute; left: 19px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: var(--r-pill); background: var(--ink); } /* Ausgangszustand nur mit Skript, sonst stuende der Stempel ohne JavaScript schief und klein. */ .js .stapel-preis .stapel-preis-blatt { transform: rotate(-11deg) scale(.86); transition: transform .55s var(--ease-reveal); } .js .stapel-preis.is-visible .stapel-preis-blatt { transform: rotate(-4deg) scale(1); } .stapel-preis-kopf { display: block; } .stapel-preis-wert { display: block; font-size: clamp(32px, 2.4vw, 38px); /* 42 px sprengten bei 1920 px die Fusszeile */ font-weight: 700; line-height: 1.05; } /* Kunstfläche: freigestellte Illustration auf der Kartenfläche (D11, D12), keine Bildkante. Die SVG-Dateien haben keinen Hintergrund, die Kartenfarbe ist der Bildgrund. */ .stapel-art { position: absolute; top: 7%; right: 4%; bottom: 7%; width: 44%; z-index: 1; } .stapel-art img { width: 100%; height: 100%; object-fit: contain; } /* Gerätebild (Vorgabe Christian Hansmann, 2026-09-09, Layout V2, Korrektur 2026-09-16): Fotoszene mit MacBook und echtem Screenshot, nicht freigestellt. Die Bildfläche beginnt an der Oberkante der Karte und endet an ihrer Unterkante, das Bild füllt sie deckend mit Anker rechts oben. Die Karte beschneidet das Bild rechts und unten. Nur die linke Bildkante blendet per Maske in die Kartenfarbe aus, der Text liegt über dem ausgeblendeten Teil. Keine Ausblendung nach oben und keine Bildkante in der Karte: beides hatte einen dunklen Schleier über dem Gerät erzeugt. Gilt für .stapel-card--geraet. */ .stapel-card--geraet .stapel-art { top: 0; right: min(-133px, calc(100% - 1387px)); bottom: 0; width: 78%; -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 20%); mask-image: linear-gradient(to right, transparent 4%, #000 20%); } /* right: Das Bild (3:2) wird auf die Kartenhöhe 700 px skaliert und ist dann 1050 px breit, die rechte Displaykante liegt 12,7 % vom rechten Bildrand, also 133 px, die linke Laptopkante 767 px. Mit -133px endet das Display genau an der Kartenkante. Unter 1254 px Kartenbreite rückt das Bild weiter nach rechts (100 % minus 1387 px), damit der Laptop nicht unter die Textspalte läuft, die Displaykante wird dann um bis zu 54 px beschnitten. Gilt nur über 980 px, darunter ist die Bildfläche statisch. */ /* Bei schmalen Karten bleibt die rechte Bildhälfte mit dem Gerät sichtbar, die linke wandert unter die Maske. */ .stapel-card--geraet .stapel-art img { object-fit: cover; object-position: right top; } /* Szenenbild (2026-09-09): Fotoszene mit dem Motiv in den rechten zwei Dritteln, Bildgrund in der Kartenfarbe. Karte 3 Work Zone (Glas-Board auf Blau) und Karte 4 Formulare (Rechnung auf Holz). Gleiche Technik wie das Gerätebild: die Karte beschneidet das Bild oben, rechts und unten, die linke Bildkante blendet in die Kartenfarbe aus. Gilt für .stapel-card--szene. */ .stapel-card--szene .stapel-art { top: -4%; right: -8%; bottom: auto; width: 90%; aspect-ratio: 3 / 2; -webkit-mask-image: linear-gradient(to right, transparent 16%, #000 40%); mask-image: linear-gradient(to right, transparent 16%, #000 40%); } .stapel-card--szene .stapel-art img { object-fit: contain; } /* Karte 1 Individualentwicklung: das iPhone beginnt knapp unter der Kartenoberkante, deshalb sitzt das Bild tiefer als die anderen Szenen und wird nur rechts und unten beschnitten */ .stapel-card--handy .stapel-art { top: 6%; } /* Kennzahlen (2026-09-09, Karte 2 KI-Prozesse): echter Text über dem Bild. Steht im Textblock nach den Pillen, wird am Desktop über das Bild gestellt. Werte aus .agents/product-marketing.md, immer beide Werte, nie der Faktor allein. Seit 2026-09-15 (Weisung Christian Hansmann) mittig über dem Bild: der Block hängt an der Karte statt am Textblock (.stapel-body der KI-Karte ohne position, siehe unten) und spannt genau die Bildbox auf (left 44 %, right -4 %, wie .stapel-card--kpi .stapel-art), Inhalt zentriert. top 114 px: Kartenpolster 42 plus Button 48 plus 24 Abstand, wie vorher 72 px ab Textblock. */ .stapel-kpis { position: absolute; z-index: 2; top: 114px; left: 44%; right: -4%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .stapel-kpi-list { display: flex; gap: 56px; margin: 0; } /* Zahl oben, Beschriftung darunter */ .stapel-kpi { margin: 0; display: flex; flex-direction: column-reverse; align-items: center; } .stapel-kpi-label { font-size: var(--fs-body-s); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-top: 10px; } .stapel-kpi-value { margin: 0; font-weight: 500; line-height: 1; color: var(--ink); white-space: nowrap; } /* Zähler (2026-09-15): während des Hochzählens hält die Zahl die Breite des Endwerts (min-width setzt das Skript gemessen inline), Ziffern in Tabellenbreite, rechtsbündig, damit nichts springt */ .stapel-count.is-counting { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; } .stapel-kpi-note { color: var(--muted); margin: 6px 0 0; max-width: 420px; } /* Bild rechts neben dem Text, Display beginnt unter den Kennzahlen, Bildgrund gleich Kartenfarbe. top 40 statt 36 Prozent seit 2026-09-15: die Kennzahlen sitzen 72 px tiefer (Button oben rechts), bei 36 Prozent lief die Hinweiszeile in die Bildoberkante. */ .stapel-card--kpi .stapel-art { top: 40%; right: -4%; width: 60%; z-index: -1; /* unter dem Textfluss der Karte, weil .stapel-body hier nicht positioniert ist */ -webkit-mask-image: none; mask-image: none; } /* Textblock der KI-Karte ohne eigene Positionierung, damit .stapel-kpis an der Karte hängt und sich an der Bildbox ausrichten kann. Die Karte ist Stapelkontext (position plus z-index), das Bild liegt mit z-index -1 unter dem Fließtext. */ .stapel-card--kpi .stapel-body { position: static; } /* Fotokarte (2026-09-15, Weisung Christian Hansmann, Karte 3 Werkbank): das Foto füllt die ganze Karte, keine Kartenfarbe, keine Maske. Motiv rechts (Etagentafel), linke Bildhälfte nur Betonwand, darauf steht der Text in Ink. Bild als Hintergrund unter Text (z 2) und Button (z 3), object-fit cover mit Anker rechts, damit die Tafel bei jedem Kartenformat im Bild bleibt. Der Bildgrund ist mittleres Grau (Mittelwert der linken 55 Prozent #989da2), Kontrast Ink darauf 6.91, auf dem dunkelsten 20-px-Block der Zone 5.66, auf dem hellsten 7.76 (gemessen 2026-09-15, PIL). --muted erreicht 1.90 und fällt aus, alle Textrollen in Ink. Weiß erreicht 2.73 und fällt aus. Abweichung von D11, D17 und dem Baustein Angebots-Stapel, Nachtrag Phase 4. */ .stapel-card--foto .stapel-art { position: absolute; inset: 0; width: auto; height: auto; z-index: 1; -webkit-mask-image: none; mask-image: none; } .stapel-card--foto .stapel-art img { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; /* Tafel rückt nach rechts, Aufzugrahmen wird angeschnitten */ } /* Textblock schmaler als auf den Farbkarten, damit der Absatz vor der Tafel endet (bei 1440 px liegt die Tafelkante nach dem Anker 80 % bei etwa 770 px, der Text endet bei 665 px) */ @media (min-width: 981px) { .stapel-card--foto .stapel-body { max-width: min(520px, 44%); } } /* Bildkarte (2026-09-16, Weisung Christian Hansmann, Karte 4 Formulare): Foto mit eigenem Grund (Warenanhänger nach VDA 4902 am Behälter, Lager in Blau und Stahl) in der rechten Kartenhälfte, volle Kartenhöhe, rechte Ecken im Kartenradius. Die linke Bildkante blendet weich in die Kartenfläche aus, wie beim Szenen- und Gerätebild, der Verlauf ist wegen des dunklen Fotos länger (0 bis 34 % der Bildbox). Kartenfläche #FBFBF9 wie die KI-Karte (Weisung 2026-09-16), Text links, Button über dem Foto. Ersetzt für diese Karte das Szenenbild (Rechnung auf Holz), formulare.webp bleibt für einen Rücktausch. Abweichung vom Baustein, Nachtrag Phase 4. */ .stapel-card--bild .stapel-art { top: 0; right: 0; bottom: 0; width: 60%; z-index: 1; border-radius: 0 var(--r-lg) var(--r-lg) 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%); mask-image: linear-gradient(to right, transparent 0, #000 34%); } .stapel-card--bild .stapel-art img { object-fit: cover; object-position: center; } /* Textblock endet vor der Fotokante (Foto ab 52 % der Kartenbreite, Polster 50 px) */ @media (min-width: 981px) { .stapel-card--bild .stapel-body { max-width: min(540px, 46%); } } /* -------------------------------------------------------------------------- Flächen und Textfarben je Karte, D17 (Ink, Weiß, Blau, Weiß, Ink). Die Klassen heißen weiter --carbon und --card, sie meinen --ink und --white. Haarlinien der Ansprechpartner-Zeile nach DESIGN.md, Baustein "Ansprechpartner-Zeile", die rgba-Werte stehen dort. -------------------------------------------------------------------------- */ /* Ink: Karte 1 Individualentwicklung und Karte 5 BTP-Setup, Focus-Ring weiß über .on-ink */ .stapel-card--carbon { background: var(--ink); color: #fff; } .stapel-card--carbon .stapel-person-label { color: var(--muted-dark); } .stapel-card--carbon .stapel-text, .stapel-card--carbon .stapel-kicker { color: var(--body-dark); } .stapel-card--carbon .stapel-person strong { color: #fff; } /* Button auf Ink: weiß nach D9 (.button-white ohne dessen Hover, der invertiert auf Ink und verschwände auf der Ink-Karte), Hover-Ziel Blau wie beim dunklen Button (D5) */ .stapel-card--carbon .stapel-cta { background: #fff; color: var(--ink); border-color: #fff; } .stapel-card--carbon .stapel-cta:hover { background: var(--blue); color: #fff; border-color: var(--blue); } .stapel-card--carbon .stapel-tag { border-color: rgba(255,255,255,.30); } /* Weiß: Karte 2 KI-Prozesse und Karte 4 Formulare (beide seit 2026-09-15/16 auf #FBFBF9, siehe unten), Regeln wie auf Papier, --line-card als Kante */ .stapel-card--card { background: var(--white); color: var(--ink); border: 1px solid var(--line-card); } /* Karte 2 KI-Prozesse (2026-09-15, Weisung Christian Hansmann): Kartenfläche #FBFBF9 statt Weiß, damit die Karte den Bildgrund von ki-prozesse.webp trifft (gemessen #fafbf8 an den Rändern, PIL) und das Bild ohne Kante in der Karte aufgeht. Abweichung von D17 (Weiß), Nachtrag Phase 4. */ .stapel-card--kpi { background: #FBFBF9; } /* Karte 4 Formulare (2026-09-16, Weisung Christian Hansmann): dieselbe Fläche #FBFBF9, damit der weiche Übergang des Fotos auf denselben Grund läuft wie bei der KI-Karte. */ .stapel-card--bild { background: #FBFBF9; } .stapel-card--card .stapel-person-label { color: var(--muted); } .stapel-card--card .stapel-person strong { color: var(--ink); } /* Button auf Weiß: dunkel nach D5, Hover-Ziel Blau */ .stapel-card--card .stapel-cta { background: var(--ink); color: #fff; border-color: var(--ink); } .stapel-card--card .stapel-cta:hover { background: var(--blue); border-color: var(--blue); } /* Bildkarte (2026-09-16, Weisung Christian Hansmann): der Button liegt über dem dunklen Foto, deshalb Weiß mit Pfeil in Ink wie auf den Ink-Karten, Hover Blau. Unter 980 px liegt er auf der Kartenfläche, dort wieder dunkel (siehe Breakpoint 980). */ .stapel-card--bild .stapel-cta { background: #fff; color: var(--ink); border-color: #fff; } .stapel-card--bild .stapel-cta:hover { background: var(--blue); color: #fff; border-color: var(--blue); } /* Blau: Karte 3 Work Zone, Focus-Ring weiß über .on-blue aus style.css */ .stapel-card--blue { background: var(--blue); color: #fff; } .stapel-card--blue .stapel-text, .stapel-card--blue .stapel-kicker { color: var(--paper); } /* D17: Absatz auf Blau in --paper, 7.40 */ .stapel-card--blue .stapel-person, .stapel-card--blue .stapel-person strong { color: #fff; } /* Button auf Blau: weiß, Hover invertiert auf Ink (D9, Button weiß) */ .stapel-card--blue .stapel-cta { background: #fff; color: var(--ink); border-color: #fff; } .stapel-card--blue .stapel-cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .stapel-card--blue .stapel-tag { border-color: rgba(255,255,255,.46); } /* Foto: Karte 3 Werkbank seit 2026-09-15, Text in Ink auf der Betonwand des Bildes. Die Klasse --blue bleibt an keiner Karte mehr, die Regeln oben stehen für einen Rücktausch. */ .stapel-card--foto { background: var(--paper); color: var(--ink); border: 1px solid var(--line-card); } .stapel-card--foto .stapel-text, .stapel-card--foto .stapel-kicker, .stapel-card--foto .stapel-person-label, .stapel-card--foto .stapel-person strong { color: var(--ink); } /* Button auf dem Foto: dunkel nach D5, Hover-Ziel Blau, wie auf Weiß */ .stapel-card--foto .stapel-cta { background: var(--ink); color: #fff; border-color: var(--ink); } .stapel-card--foto .stapel-cta:hover { background: var(--blue); border-color: var(--blue); } /* Pillen: kräftigere Kante als --line-strong, damit sie auf der Betonkörnung stehen */ .stapel-card--foto .stapel-tag { border-color: rgba(16,17,19,.62); } .stapel-card--foto .stapel-portrait { border-color: rgba(16,17,19,.30); } /* Dunkle Fotokarte (2026-09-16, Weisung Christian Hansmann, Motiv der Geschäftsführung): Übergabe einer Akte über die Trennwand im Gegenlicht, assets/leistungen/werkbank-uebergabe.webp. Das Bild ist dunkel (Mittelwert der Textzone #293335), Text deshalb weiß wie auf Ink, Button weiß mit Hover Blau wie auf der Ink-Karte, Focus-Ring weiß über .on-ink am li. Ein Scrim in Ink liegt von links über der Textzone, weil die Fensterflecken im Glas Weiß sonst unter 4,5 drücken. Gemessen am Bild bei 1440 px (Textblock 520 px, PIL, 2026-09-16): Weiß gegen das 95. Perzentil der Hintergrundhelligkeit 5.42, gegen das 99. Perzentil 3.76, gegen den hellsten Fleck 3.53. Ohne Scrim 2.88 / 1.71 / 1.55. Die hellsten zwei Prozent liegen am rechten Rand des Textblocks oben (Fensterkante), Punkt für den Phase-6-Review. Unter 980 px trägt die Karte die Fläche --ink, das Foto wird das Band, der Scrim entfällt. */ .stapel-card--foto-dunkel { background: var(--ink); color: #fff; border: 0; } /* Lead in Weiss statt --body-dark, Weisung vom 2026-09-25. Grund ist die breitere Textspalte unten: an ihrer neuen rechten Kante ist der Scrim duenner und das Foto dort fast weiss. --body-dark erreicht dort nur 1.59, Weiss traegt. Abweichung vom Muster der uebrigen Karten, die den Lead auf dunklem Grund in --body-dark setzen. */ .stapel-card--foto-dunkel .stapel-text, .stapel-card--foto-dunkel .stapel-kicker { color: #fff; } .stapel-card--foto-dunkel .stapel-person-label { color: var(--muted-dark); } .stapel-card--foto-dunkel .stapel-person strong { color: #fff; } .stapel-card--foto-dunkel .stapel-cta { background: #fff; color: var(--ink); border-color: #fff; } .stapel-card--foto-dunkel .stapel-cta:hover { background: var(--blue); color: #fff; border-color: var(--blue); } .stapel-card--foto-dunkel .stapel-tag { border-color: rgba(255,255,255,.46); } .stapel-card--foto-dunkel .stapel-portrait { border-color: rgba(255,255,255,.30); } .stapel-card--foto-dunkel .stapel-art::after { content: ""; position: absolute; inset: 0; /* Auslauf 88 % statt 74 %, Weisung vom 2026-09-25, gemessen am selben Tag. Die Textspalte endet seit der Verbreiterung bei 56 % statt 44 %. Dort lag der alte Verlauf nur noch bei Alpha 0.51, und das Foto zeigt an dieser Stelle seine hellste Partie (255,250,239). Weiss kam damit auf 3.79 und verfehlte die 4.5. Mit dem Auslauf bei 88 % sind es Alpha 0.58 und 4.75. Anfangs- und Mittelwert bleiben, die rechten 12 Prozent der Karte zeigen das Foto weiter ungetruebt. */ background: linear-gradient(to right, rgba(16,17,19,.75) 0, rgba(16,17,19,.70) 50%, rgba(16,17,19,0) 88%); pointer-events: none; } @media (min-width: 981px) { /* 676 px statt 520, Weisung vom 2026-09-25: die laengere Headline brauchte sechs Zeilen und schob den Fuss mit dem Portraet unter die Kartenkante, bei jeder Breite ueber 980 px. Mit 57 % passt sie auf vier Zeilen. Der Pixel-Deckel ist der bindende Wert, nicht das Prozent: bei 1920 px lag die Spalte vorher auf den 520 px fest, deshalb war die breiteste Aufloesung schlechter dran als 1440. Achtung, der Scrim daruber laeuft bei 74 % auf null. Die Textkante liegt jetzt bei 57 % statt 44 %, dort traegt die Abdunklung nur noch rund 0.50 statt 0.71. Deshalb steht der Lead hier in Weiss, siehe oben. */ .stapel-card--foto-dunkel .stapel-body { max-width: min(676px, 57%); } } /* -------------------------------------------------------------------------- Breakpoint 980: Karte 620px hoch, Kunstfläche rückt als Band hinter den Text und wird auf 40 Prozent der Kartenhöhe beschnitten -------------------------------------------------------------------------- */ @media (max-width: 980px) { /* 700px statt 620px aus DESIGN.md: Absatz in lead und Stichwort-Pillen brauchen die Höhe. Text nimmt seine natürliche Höhe, das Bild bekommt den Rest der Karte als Band, mindestens 140px. So kann der Kartenfuß nicht in das Bild laufen. */ .stapel { --stapel-h: 700px; } .stapel-card { padding: 34px 28px 0; } /* Button im Fluss, rechtsbündig über dem Titel, weiter 48 x 48 px */ .stapel-cta { position: static; align-self: flex-end; order: -1; margin-bottom: 20px; } .stapel-body { max-width: none; flex: 0 0 auto; } .stapel-foot { margin-top: 20px; } /* Kennzahlen kompakt: zwei Spalten nebeneinander, kleinere Ziffern, Hinweiszeile erst wieder unter 640 px */ .stapel-kpis { position: static; width: auto; top: auto; align-items: flex-start; text-align: left; margin-top: 20px; } .stapel-kpi-list { flex-wrap: nowrap; gap: 24px; width: 100%; } .stapel-kpi { flex: 1 1 0; align-items: flex-start; } .stapel-kpi-value { font-size: 27px; } /* Größe der Rolle heading-l */ .stapel-kpi-label { margin-top: 6px; } .stapel-kpi-note { display: none; } .stapel-card--kpi .stapel-tags { margin-top: 16px; } .stapel-card--kpi .stapel-kpis { margin-top: 14px; } .stapel-card--kpi .stapel-foot { margin-top: 12px; } .stapel-card--kpi .stapel-art { min-height: 100px; } .stapel-card--kpi .stapel-art img { object-fit: cover; object-position: center 40%; } .stapel-art, .stapel-card--geraet .stapel-art, .stapel-card--szene .stapel-art, .stapel-card--foto .stapel-art { position: static; flex: 1 1 auto; min-height: 140px; width: auto; margin: 12px 0 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; } /* Fotokarte unter 980 px: Band unter dem Text, der Ausschnitt zeigt die Tafel (Anker rechts), die Karte trägt hier ihre Fläche --paper statt des Betons hinter dem Text */ .stapel-card--foto .stapel-art { inset: auto; height: auto; } /* Gerätekarte unter 980 px: das Band zeigt Display und Tastaturkante, nicht den Fuß der Szene */ .stapel-card--geraet .stapel-art img { object-position: center 34%; } .stapel-card--foto .stapel-art img { object-fit: cover; object-position: right center; } .stapel-card--foto-dunkel .stapel-art::after { display: none; } /* Bildkarte unter 980 px: Foto als Band unter dem Text mit kleinem Radius, Ausschnitt mittig auf dem Etikett */ .stapel-card--bild .stapel-art { position: static; inset: auto; width: auto; min-height: 220px; border-radius: var(--r-md); margin: 12px 0 0; -webkit-mask-image: none; mask-image: none; } .stapel-card--bild .stapel-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; } /* 58 %: das Etikett liegt in der unteren Bildhälfte und soll im Band ganz zu sehen sein */ /* Bildkarte unter 980 px: Button auf der Kartenfläche statt auf dem Foto, deshalb dunkel wie auf den hellen Karten */ .stapel-card--bild .stapel-cta { background: var(--ink); color: #fff; border-color: var(--ink); } .stapel-card--bild .stapel-cta:hover { background: var(--blue); border-color: var(--blue); } } /* -------------------------------------------------------------------------- Breakpoint 640: kein Stapel. Karten untereinander mit 10px Abstand, Höhe nach Inhalt, Kunstfläche im Fluss unter dem Text. Das Skript schaltet hier ab, die Regeln für .is-pinned greifen nicht. -------------------------------------------------------------------------- */ @media (max-width: 640px) { .stapel-deck { display: grid; gap: var(--gap); } .stapel-card { position: static; height: auto; margin: 0; padding: 28px 22px 0; } .stapel-card { padding: 28px 22px 24px; } /* Der Stempel steht seit dem 2026-10-08 im Fuss der Textspalte und damit ohnehin im Fluss. Die frueheren Regeln fuer den absoluten Stempel sind damit entfallen. Hier bricht der Fuss nur noch um, wenn Person und Stempel nebeneinander nicht mehr passen. */ .stapel-foot--preis { gap: 16px; } /* Der Anhaenger haengt auf dem Handy an der Untergrenze seiner clamp (32 px) und belegte damit 85 % der nutzbaren Kartenbreite (234 von 275 px) bei 124 px Hoehe. Die clamp ist fuer den Monitor gerechnet, dort ist die Untergrenze die kleine Groesse. Hier bekommt er eigene, kleinere Werte (DEV-1669, Weisung "Die Position sowie die Groesse vom Preislabel gefaellt mir auch nicht ganz"). Die Kerbe --preis-spitze steht in px und waechst nicht mit: Auf dem schmalen Anhaenger frass sie 15 % der Breite statt 6 % wie bei 1920 px. Sie geht deshalb mit herunter, ebenso das Loch und die Innenabstaende, sonst sitzt der Wert nicht mehr mittig zwischen Kerbe und rechter Kante. */ .stapel-preis-blatt { --preis-spitze: 24px; } /* Fliessend statt fest: Die Breite des Anhaengers haengt am Inhalt, nicht an einem Prozentwert. Mit festen 24 px belegte er bei 320 px wieder 89 % der Kartenbreite. 6.4vw trifft bei 375 px genau die 24 px und geht bei 320 px auf 20,5 px herunter. */ .stapel-preis-wert { font-size: clamp(19px, 6.4vw, 24px); } .stapel-preis-flaeche { padding: 11px 18px 13px 44px; } .stapel-preis-loch { left: 14px; width: 11px; height: 11px; margin-top: -5.5px; } .stapel-kpi-note { display: block; } .stapel-kpi-list { flex-wrap: wrap; } .stapel-card--kpi .stapel-art img { object-fit: contain; object-position: center; } .stapel-art { flex: none; aspect-ratio: 4 / 3; margin: 16px 0 0; } /* Fotokarte: Band im Format 16:10 statt der Bildproportion 21:9, damit die Tafel groß genug bleibt */ .stapel-card--foto .stapel-art { aspect-ratio: 16 / 10; } } @media (prefers-reduced-motion: reduce) { /* Kein Auftritt: Der Stempel steht sofort in seiner Endlage (D10). css/style.css stellt .reveal hier bereits auf sichtbar, die Drehung muss hier nachgezogen werden. */ .js .stapel-preis .stapel-preis-blatt { transform: rotate(-4deg); transition: none; } }