Höhe an Breite gekoppelt -> konstanter Bildausschnitt UND konstante Textposition. Pfad root-relativ (/assets/…) — url() löst relativ zu dieser Datei (src/styles/) auf, `assets/…` würde fehlschlagen. */ .cta-photo { min-height: max(520px, 40vw); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; /* Langform statt Shorthand: die Seite setzt background-image INLINE (Overlay + url seitenrelativ) — url() in einer var() würde relativ zu DIESER Datei aufgelöst (src/styles/…, Chrome-Verhalten) und 404en. var(--foto,none) bleibt als Alternativ-Weg (dann root-relativ + HTTP). */ background-color: var(--green-900, #08302B); /* Fallback-Fläche, falls Bild fehlt */ background-image: linear-gradient(rgba(8,48,43,.5), rgba(8,48,43,.74)), var(--foto, none); background-position: center var(--foto-y, 50%); background-size: cover; background-repeat: no-repeat; } /* CTA-Abschluss-Band, Verlaufs-Fassung — Schwester von .cta-photo oben. ENTSCHEIDUNG Patrick 29.07.2026 nach Durchsicht von mockup-final-cta.html: Variante B (Verlauf statt Vollton), aber REGELKONFORM. Der Mockup hatte linear-gradient(162deg, --green-800, #08302B) — 162 Grad und hell -> dunkel. DESIGN.md §1 verlangt seit 27.07. (Antonio) 135 Grad, beginnend mit der DUNKLEREN Farbe. Die regelkonforme Fassung ist genau `--grad-dark`, also der Token, den DESIGN.md §4 fuers CTA-Band ohnehin vorschreibt und den vorher KEINE der 44 Seiten per var() referenziert hat. Ersetzt 83 seiteneigene Regeln auf 21 Seiten. Vorher gemessen: 23 Baender in 15 verschiedenen Zustaenden, darunter zwei verschiedene Marken-Gruens (#0E7A5F = Token und #0E7C60 = abgedriftet) und sechs Hintergrund-Rezepte. Aufbau:

…

Das .wrap der SEITE bleibt bewusst stehen — dadurch haelt die Box die Inhaltsbreite ihrer Seite. Ein eigenes max-width hier wuerde die Box auf den 14 Seiten mit .wrap{max-width:1400px} schmaler machen als den Inhalt darueber. */ .cta-box{ position:relative; overflow:hidden; text-align:center; color:#fff; background:var(--grad-dark); border-radius:var(--r-xl); padding:76px 32px; box-shadow:var(--shadow-cta); } .cta-box::after{ /* Mint-Schimmer oben rechts (Variante B des Mockups) */ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 120% at 85% 0, rgba(82,239,186,.26), transparent 58%); } .cta-box > *{position:relative} /* Inhalt ueber den Schimmer */ .cta-box .eyebrow{color:var(--tech); justify-content:center} .cta-box h2{font-weight:600; font-size:clamp(1.8rem,3.6vw,2.7rem); letter-spacing:-.03em; margin:0 0 12px; color:#fff; text-wrap:balance} .cta-box h2 em{font-style:normal; color:var(--tech)} /* aus karriere: mintfarbene Hervorhebung */ /* .9 statt der .8 aus dem Mockup — GEMESSEN, nicht geschmackssache: Am hellsten Punkt der Box (helles Verlaufsende #0A4E47 plus Mint-Schimmer .26 = #1D7865) ergibt .8 nur 4,05:1 und liegt damit unter der AA-Schwelle 4,5:1 fuer normalen Text. Mit .9 sind es 4,68:1. Der Schimmer bleibt bei .26, also das gewaehlte Aussehen. Zum Vergleich: der ALTE Zustand (Vollton #0E7A5F, p bei .85) lag bei 4,3:1 — das Problem ist also aelter als diese Komponente, wird hier aber mit erledigt. Die Ueberschrift ist reines Weiss und liegt bei 5,35:1. */ .cta-box p{color:rgba(255,255,255,.9); font-size:1.06rem; margin:0 auto 28px; max-width:52ch} .cta-box .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} /* ⚠ EIN LANGES KNOPFWORT SPRENGTE DIE BOX. `.btn` ist `white-space:nowrap` (base.css:43) und als Flex-Element so breit wie sein Inhalt: gemessen auf compliance.html war „Als Personaldienstleister anfragen" 315px breit, in der Box blieben bei 390px Fenster 298px — der Knopf lief 17px unter das `overflow:hidden` der Box und war rechts abgeschnitten. `flex-wrap` half nicht, es umbricht die REIHE, nicht den Knopf. Unter 520px darf die Beschriftung deshalb umbrechen und der Knopf nicht breiter werden als die Box. Kein anderer CTA-Knopf im Baum ist lang genug, dass sich dadurch etwas aendert — geprueft, es sind 16 Sektionen. ⚠ Gilt fuer JEDEN `.btn` in der Box, nicht nur fuer `.cta-row .btn`: `abschluss`, `kein-konto` und die Initiativbewerbungs-Box auf `karriere` setzen den Knopf ohne `.cta-row`-Wrapper direkt in die `.cta-box`. Dort war „Initiativbewerbung senden" mit `white-space:nowrap` 276px breit, der Innenraum bei 375px Fenster nur 251px — der Knopf lief 25px rechts ueber und wurde von `text-align:center` linksbuendig gedrueckt (nicht zentrierbar, weil breiter als der Container). Darum hier ohne `.cta-row` im Selektor. */ /* ⚠ HIER STAND `white-space:nowrap` (bis 10.09.2026). Das half dem kurzen „Initiativbewerbung senden", scheiterte aber an langen Labels: auf pax-ai ist „Datensicherheit und KI-Governance" einzeilig 304px breit, der Innenraum bei 375px Fenster nur 251px — der Ghost-Knopf lief 53px ueber die Karte hinaus und stand versetzt unter dem Hauptknopf (Karoline: „Auch hier passen die Buttons noch nicht"). Statt am Umbruch zu drehen jetzt dieselbe Geste wie bei den Hero-Chips: untereinander, volle Breite, dadurch alle gleich lang und nichts kann ueberlaufen. Gemessen bei 375px: beide Knoepfe 251px statt 232 und 304. */ @media (max-width:640px){ .cta-box .cta-row{flex-direction:column; align-items:stretch} .cta-box .btn{display:flex; width:100%; justify-content:center; white-space:normal; text-align:center; padding-inline:16px} /* Nur ohne `.cta-row`-Wrapper — dort macht dessen `gap:12px` den Abstand. Knopf direkt in der Box haben `abschluss`, `kein-konto`, die Initiativbewerbungs-Box auf karriere und der Abschluss auf pax-ai. */ .cta-box > .btn + .btn{margin-top:10px} } /* Mobil: 76px Innenabstand sind auf kleinen Schirmen zu viel. Ersetzt die `.final{padding:32px 22px}`-Regeln, die drei Seiten dafuer einzeln hatten. */ @media (max-width:640px){.cta-box{padding:40px 22px; border-radius:var(--r-lg)}} /* ---- 11. Geometrie zentral (DESIGN.md §2a, Entscheidung Patrick 27.07.2026) ---- „Rundung, Schatten und Randstaerke kommen zentral; die Seite setzt nur Groesse und Layout." Diese Datei laedt als LETZTE (pactos:shared am Body-Ende) und gewinnt daher gegen die Seiten-