/* Paket P-C (WordPress-Theme): Kopie des abgenommenen v5-Seiten-CSS, Bildnamen jetzt .webp, Kommentare ohne lange Striche. Layout und Regeln unverändert, Ergänzungen stehen am Dateiende unter "Paket P-C". */ /* ============================================================ Seitenspezifisches CSS - Academy-Seite Nur Layout-Feinheiten + der auf dieser Seite vorgesehene Warmgold-Akzent (BAU-REGELN Abschnitt 2 / DESIGN.md Abschnitt 1: Text auf Ivory AUSSCHLIESSLICH über den Kernel-Token --academy-ink, Gold nie als Text auf der Academy-Bühne, keine neuen Farbwerte, keine Token-Overrides). Korrekturrunde 23.09.2026 (F32-F39, FEEDBACK-2026-09-23.md): Hero- Namenszeile, neue Zitat-Bild-Sektion, Ausrichtung der drei "Nicht versprechen"-Kartenköpfe. Korrekturschleife 29.09.2026 (PLAN.md Punkte 11 und 12, Paket P4): "Für wen" als 2×2-Raster ohne Typ-Labels mit Icon-Badges, "Was du bekommst" als Kernel-Academy-Bühne (Champagner, Bogenlinien) statt der Gelbton-Fläche, Zitat als Navy-Bühne mit Bogenrahmen und Pull-Quote. Korrekturrunde 02.10.2026 (Meeting Leila 01.10., Paket A, Entscheidung 4): Leila: "mehr weg von Blau, hin zu Orange, das darf was Eigenes sein". Die Academy ist jetzt eine eigene, warme Welt in Orange und Champagner, klar abgesetzt von der Navy-Vermittlung, aber erkennbar Oh Darling: Navy bleibt Schriftfarbe, Navbar und Footer. Umsetzung (alles nur in dieser Datei): Hero-Scrim in dunklem Espresso statt Navy; Zitat und Schluss-CTA als Orange-Flächen (--academy) mit Navy-Text; die drei Karten in "Was wir dir nicht versprechen" in Orange mit Navy-Text; Icon-Badges (Kernel) mit weißem Icon auf --academy-deep; primäre Buttons in Orange mit Navy-Schrift; Nummern, Plus-Zeichen und Textlinks auf Ivory in --academy-ink. Die Überschriften bleiben Navy. Kontrastwerte stehen im Log (log-A.md) und in den Kommentaren an den jeweiligen Regeln. ============================================================ */ /* Seiten-Hilfswerte der Korrekturrunde 02.10.2026. Der Orange-Ton der Badges und Buttons ist der Kernel-Token --academy-deep (#B5822F, gleicher Farbton wie --academy). Espresso ist der dunkle Bronzeton der Academy- Familie für den Hero-Scrim (Ivory darauf 13,89:1 im reinen Ton) und gilt nur auf dieser Seite, daher hier und nicht im Kernel. */ :root { --ac-espresso: #2E2110; --ac-espresso-rgb: 46, 33, 16; } /* ------------------------------------------------------------ SEKTION: Hero - Foto-Variante (Korrekturrunde 15.09.2026, Nicholas, 2. Durchgang - Foto neu zugeschnitten auf hero-academy-neu.webp 2400×1731 [Figur ganz, Kopf mit Luft nach oben, Beschnitt nur unten an den Beinen] + Mobil-Zuschnitt hero-academy-neu-mobil.webp 900×1350 [Figur zentriert, ganze Figur]. Frau im magentafarbenen Hosenanzug, Studio-Szene, sitzt bei ≈64% der Bildbreite. Kernel liefert Struktur/Geometrie (.hero-full--sub, style.css Abschnitt 22); hier nur die foto-eigenen Regeln: Scrim-Gradient, Bildausschnitt, Textspalten-Breite (H1 links halten, BAU-REGELN-Auftrag). Neutrales Grau-Studio-Foto -> Scrim-Gradient kräftig navy, passt zur dunklen Markenstimmung. Bildausschnitt (2400×1731 = 1,386 Seitenverhältnis) per Canvas-Sampling (Magenta-Anzug + Hautton) und visueller Gitternetz-Kontrolle vermessen: Kopf/Schulter-Cluster (oberstes Bilddrittel) beginnt links bei ≈49% Bildbreite, der ausgestreckte Fuß (unterstes Bildzehntel) reicht bis ≈19-20%. Weil dieses Foto SCHMALER ist als das vorherige (1,386 statt 1,778), ist bei JEDEM bisher geprüften Desktop-Seitenverhältnis (1024×768 = 1,534, 1440×900 = 1,811, 1920×1080 ≈ 2,0 - alle > 1,386) die Fläche BREITER als das Bild: object-fit:cover skaliert über die BREITE, object-position-X ist dort wirkungslos (kein horizontaler Bildüberschuss), NUR object-position-Y entscheidet, wie viel unten (Beine) weggeschnitten wird. Y=0% verankert die Bildoberkante an der Flächenoberkante - der Kopf kann dadurch auf KEINER Breite angeschnitten werden (Auftrag Nicholas), Beschnitt passiert ausschließlich unten (geprüft: bei 1440×900 werden die Füße bereits unterhalb der sichtbaren Fläche abgeschnitten, bei 1920×1080 ebenso - beides optisch geprüft, Kopf hat in beiden Fällen sichtbar Luft nach oben). Erst unterhalb des Bild-Seitenverhältnisses (< 1,386, z. B. 768×1024 Hochformat-Tablet = 0,75) kippt das Verhältnis: dort skaliert cover über die HÖHE (volle Bildhöhe sichtbar, Kopf so niemals angeschnitten) und object-position-X wird wirksam - hier entscheidet X, ob Kopf/Schulter neben oder hinter der H1-Spalte landet (H1 endet bei 30,7% der Fläche). Getestet (Frisch-Load, Gitternetz-Kontrolle auf realem Rendering): 64% (Standardwert) lässt das Kopf/Schulter-Cluster bei 768×1024 rechnerisch bei ≈39% landen (≈8 Prozentpunkte Abstand zur H1-Kante - spürbar knapper als beim breiten Foto), 58% vergrößert den Abstand auf ≈43% (≈12 Prozentpunkte) und wurde deshalb für das Hochformat-Segment gewählt; 64% bleibt für das (per Seitenverhältnis) unkritische Standard-Segment (1024-1920px breit, alle geprüft: H1/Lead/CTA klar vom Foto getrennt, siehe Screenshots). Mobil (≤560px, eigene Datei hero-academy-neu-mobil.webp, eigene Komposition „Figur zentriert") hat eine EIGENE Regel unten - H1 sitzt dort ohnehin oberhalb der Person (kein seitliches Überlapp-Risiko), 50%/20% zentriert die ganze Figur sauber im Hochformat-Crop. */ #hero .hero-bg img { object-position: 64% 0%; } /* Hochformat-Segment (Tablet-Hochformat u.ä., analog index.html, pages/index.css Zeile 63ff): object-fit:cover skaliert dort über die HÖHE statt die Breite, object-position-X wird dort erst wirksam. Schwelle max-aspect-ratio:3/2 (=1,5) unverändert aus dem Kernel-Muster übernommen (deckt die im DESIGN.md-Prüfraster genutzten Hochformat-Viewports zuverlässig ab). 58% statt des Standard-64% - Herleitung im Kommentar oben. */ @media (min-width: 721px) and (max-aspect-ratio: 3/2) { #hero .hero-bg img { object-position: 58% 0%; } } /* Mobil (≤560px): eigene Bilddatei (hero-academy-neu-mobil.webp, Figur zentriert/ganze Figur, siehe -Quelle im HTML), braucht deshalb eine eigene Position statt der Desktop-Werte oben - H1 sitzt hier ohnehin oberhalb der Person (.hero-top vor .hero-foot, kein Nebeneinander), object-position dient nur der sauberen Zentrierung der Figur im Hochformat-Crop, nicht der Kollisionsvermeidung. */ @media (max-width: 560px) { #hero .hero-bg img { object-position: 50% 20%; } } /* Korrekturrunde 02.10.2026 (Meeting Leila 01.10.): der Scrim ist kein Navy mehr, sondern ein sehr dunkler, warmer Bronzeton (Espresso, --ac-espresso) mit unveränderten Deckkraft-Stufen. Das Foto bekommt dadurch einen warmen statt kühlen Grundton, der Hero gehört zur Orange-Welt der Seite. Text (Ivory) liegt in der Zone links, dort ist der Scrim am dichtesten; die gemessenen Kontraste stehen in log-A.md. */ #hero .hero-scrim { background: linear-gradient(90deg, rgba(var(--ac-espresso-rgb), .92) 0%, rgba(var(--ac-espresso-rgb), .80) 38%, rgba(var(--ac-espresso-rgb), .55) 68%, rgba(var(--ac-espresso-rgb), .40) 100%); } /* Korrektur A-02/A-15 (Review 23.09.2026, Opus-Befund): Der Kommentar hier beschrieb bis zu dieser Korrektur noch das ALTE Foto (Seitenverhältnis 1,50, Personen-Kante bei ≈33% der Flächenbreite). Dieses Foto ist seit der Korrekturrunde 15.09.2026 ausgetauscht (siehe Kommentar oben bei .hero-bg img: aktuelles Foto 2400×1731 = 1,386, Standard-Crop 64%), der alte 29%-Wert blieb aber unangetastet stehen und begrenzte die H1 dadurch enger als nötig: Neue H1 (F32, 10 Wörter) brach bei 1440/1024/768 in 5 Zeilen, Hero bei 1440×900 auf 982px Höhe, CTA-Zeile bei 978 bis 1026px, also unter der Falz. Im H1-Höhenband (oberes Bilddrittel) beginnt die Person im NEUEN Foto tatsächlich erst bei ≈60% der Flächenbreite, nicht bei 33%. max-width entsprechend auf 44% angehoben (Sicherheitsabstand zur ≈60%-Kante eingerechnet). Nachgemessen (Frisch-Load, DOM-Messung nach Abschluss der Reveal-Animation, also im tatsächlichen Endzustand): 1440×900 → H1 3 Zeilen, Hero 847,9px, CTA-Zeile 843,9 bis 891,9px, also 8px Reserve zur Falz; 1024×768 → H1 3 Zeilen, CTA innerhalb des ersten Bildschirms; 768×1024 → H1 3 Zeilen. Restliches Muster (Prozent- statt Pixel-Breite, damit die Spalte auf jeder Desktop-Breite gleich sicher vor der Person endet) unverändert aus der Vorversion übernommen. Lead-Regel (30%, Kommentar unten) bewusst NICHT mitgeändert, andere Bildzone/Herleitung. */ @media (min-width: 721px) { #hero .hero-top .h1 { max-width: 44%; } } /* Lead-Spaltenbreite: eigene, engere Regel als die H1 (max-width:44% oben) - der Lead ist deutlich länger als die H1 und läuft bei der H1-Breite hörbar dichter an die Person heran. 30% ist der bis 1180px geprüfte sichere Wert (Herleitung: frühere Fotokomposition, seither mehrfach gegen das aktuelle Hero-Foto nachgemessen, unverändert sicher). R2-1-02-Fix (Runde 2, Opus-Review 23.09.2026, wichtig): 30% blieb bei Nicholas' CTA-Fix (siehe H1-Kommentar oben, max-width 44% statt 29%) UNVERÄNDERT stehen und war dadurch enger als nötig - der 10-Wörter-Lead brach bei 1280px auf 9 Zeilen und schob den Hero-CTA unter die Falz: 1280×800 → CTA 774 bis 822px (22px angeschnitten), 1280×720 → 771 bis 819px (komplett unter der Falz). Ab 1181px (Grenze der Merkliste-Pillen-Media-Query, oberhalb derer auf diesem Breiten- band ohnehin schon mehr Platz ist) auf 40% angehoben: 7 statt 9 Zeilen, CTA- Unterkante 1280×800 → 750px, 1440×900 → 828px, 1280×720 → 747px. Nachgemessen (injiziertes CSS): Lead-Spaltenkante bei 1280px = 524px, die Person beginnt im Lead-Höhenband dort erst bei ≈650px (Screenshot geprüft) - kein Überlapp. Unter 1181px bleibt es bei 30% (dort passt der CTA bereits ins erste Bildschirmfenster). */ @media (min-width: 721px) { #hero .hero-foot .lead { max-width: 30%; } } @media (min-width: 1181px) { #hero .hero-foot .lead { max-width: 40%; } } /* Kurze Querformat-Viewports (Handys quer, analog ueber-uns.css/index.css): die Lead-Spalte ist hier (Korrekturrunde fotos-ueber-academy: jetzt 30% statt 29%, siehe Kommentar oben) nur ~215-227px breit - beim UNVERÄNDERTEN --fs-lead (Bodenwert 19px) wirft das den ohnehin langen Lead-Absatz auf ~8-9 Zeilen und drückt Hero-Unterkante + CTA-Zeile weit unter die Kurzviewport-Höhe (gemessen VOR dieser Regel: 812×375 → Hero-Unterkante 573.9px/153%, 844×390 → 467.3px/120%). Kernel-Fallback `.hero-foot .lead{max-width:66ch}` (style.css Zeile 1006) kann hier NICHT greifen - unsere ID-Selektor-Regel oben hat höhere Spezifität und gewinnt unabhängig von der Media-Query-Reihenfolge; 66ch würde in den oberen 2-3 Lead-Zeilen zudem wieder in die Personen-Kante laufen (Kopf reicht dort bis y≈270px, Lead beginnt bei y≈206px - beide Zeilen liegen im Kopf-Höhenband). Kompromiss statt Vollkorrektur: Schriftgrad senken (Breite bleibt bei 30%, durch die Personen-Kante vorgegeben - siehe Korrekturrunde-Kommentar oben, der dieselbe Grenze für die Normalgröße bereits ausführlich hergeleitet hat) UND Zeilenhöhe/Gap straffen - spart spürbar Höhe, OHNE die BAU-REGELN-Pflicht „Fließtext ≥15px effektiv" zu unterschreiten (--fs-body-sm hat eine 15px-Untergrenze). Nachgemessen NACH dieser Regel: 812×375 → 415.8px/111%, 844×390 → 417.3px/107%, 721×360 → 471.6px/131% - deutlich verbessert gegenüber dem Zustand ohne diese Regel, aber NICHT vollständig unter 100% wie bei den anderen sieben Kernel-Referenzgrößen (dort bleibt der schmalere Lead-Textblock derselbe Engpass, unabhängig von der Viewportbreite). Ein Rest-Überhang bliebe nur durch Unterschreiten der 15px-Textpflicht ODER eine breitere Spalte (die dann wieder mit dem Kopf kollidiert, s.o.) zu schließen - beides ohne Nicholas-Freigabe nicht umgesetzt. Offener Punkt, analog zum bereits dokumentierten Werde-Darling-Seite-Kurzviewport-Rest (DESIGN.md, Abschnitt „Kurzviewport 844×390") UND dem Lead-Zeichen/Zeile-Rest bei Normalgröße (Kommentar oben, DESIGN.md Abschnitt 7 dokumentiert beides): CTA-Zeile liegt auf sehr kurzen Quer-Handys (≤~390px Höhe) knapp unter der Falz, bleibt aber per Scroll sofort erreichbar, kein Inhaltsverlust. */ @media (min-width: 721px) and (max-height: 480px) { #hero .hero-content { gap: 8px; } #hero .hero-top .h1 { font-size: clamp(20px, 2.2vw + 2px, 24px); } #hero .hero-foot .lead { font-size: var(--fs-body-sm); line-height: 1.3; } } #hero .eyebrow { color: var(--ivory); } /* F32: Namenszeile "Leila Vogler, Gründerin von Oh Darling" direkt unter der H1 - ohne sie bleibt offen, wer im Hero "ich" sagt. Eigenes Element (kein Kernel-Baustein), daher hier definiert statt im Kernel. Sitzt in .hero-top, also in derselben Scrim-Zone wie Eyebrow/H1 - Farbe deshalb bewusst reines --ivory statt einer gedämpften Stufe (--ivory-62 u.ä.): die Zone ist für Eyebrow/H1 bereits über alle Breakpoints hinweg auf AA geprüft (siehe Kommentare oben, Desktop- und Mobil-Scrim, schlechtester gemessener Wert 5,10:1 bei 320×568), eine transparente Stufe würde diese geprüfte Marge wieder unterschreiten. Abgrenzung zu Eyebrow/H1 läuft rein über die kleinere Schriftgröße, nicht über die Farbe. */ #hero .hero-name { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body-sm); color: var(--ivory); margin: -6px 0 0; } @media (max-width: 720px) { #hero .hero-top .h1 { max-width: 100%; } /* Korrekturrunde fotos-ueber-academy (Befund 3, 07.09.2026, Doku- Nachtrag - bewusste Muster-Abweichung, NICHT ändern): anders als das Referenz-Muster (index.css:164-170, waagerechte 90deg-Kurve) und die Schwesterseite ueber-uns.css:65-73 (dieselbe waagerechte Kurve unter 720px) fährt Academy-Seite hier eine SENKRECHTE 180deg-Kurve (dunkel oben / hell Mitte / dunkel unten). Grund: die Person im Mobil- Zuschnitt steht mittig im Bild, H1 sitzt oben und Lead/CTA unten - die senkrechte Kurve hält das Gesicht in der hellen Mittelzone frei, während Text durchgehend in den dunklen Zonen liegt. Gemessen (Frisch- Load, Range-basiertes Rastersampling je Zeilenbox, Schrittweite 3px, schlechteste Zone/Element je Viewport): 320x568 → 5,13:1 (H1), 375x812 → 5,93:1 (Lead), 560x750 → 5,10:1 (H1), 600x780 → 5,30:1 (Lead), 720x900 → 5,72:1 (Lead) - durchgehend über AA 4,5:1 (Eyebrow durchgehend ≥7:1). Siehe auch DESIGN.md Abschnitt 7, „Hero-Fotos" (Nachtrag Academy-Seite Mobil-Scrim). */ /* Korrekturrunde 02.10.2026: auch der Mobil-Scrim in Espresso statt Navy (gleiche Stufen .90 / .68 / .90, Messung siehe log-A.md). */ #hero .hero-scrim { background: linear-gradient(180deg, rgba(var(--ac-espresso-rgb), .90) 0%, rgba(var(--ac-espresso-rgb), .68) 42%, rgba(var(--ac-espresso-rgb), .90) 100%); } } /* Korrekturrunde 02.10.2026 (Meeting Leila 01.10.): Hero-Hauptbutton (und der Hauptbutton der Foto-Bühne am Seitenende) in Orange (--academy) mit Navy-Schrift, 5,54:1 (Schrift) auf dem dunklen Scrim klar abgesetzt. Hover: heller (20 % Weiß), Navy darauf 6,6:1. Der zweite Button (Outline) bleibt Ivory auf dunkel (Kernel). Spezifität: die Kernel-Regel .on-navy .btn-solid (0,2,0) wird per ID geschlagen. */ :is(#hero, #cta-kennenlernen) .btn-solid { background: var(--academy); color: var(--navy); } :is(#hero, #cta-kennenlernen) .btn-solid .copy-2 { color: var(--navy); } @media (hover: hover) and (pointer: fine) { :is(#hero, #cta-kennenlernen) .btn-solid:hover { background: color-mix(in srgb, var(--academy) 80%, var(--white)); } } /* Freistehende Übergangs-Absätze (.lead außerhalb von .section-head) auf Lesebreite begrenzen - sonst laufen sie über die volle Container-Breite. Gleicher Wert/gleiches Muster wie .lead-narrow auf ueber-uns.html; reiner Layout-Wert, kein Farb-/Font-Override. */ .lead-narrow { max-width: 640px; } /* ------------------------------------------------------------ SEKTION: Für wen (Punkt 11, Korrektur 29.09.2026) Vier Situationskarten im 2×2-Raster statt der schmalen Vierer-Reihe: mehr Zeilenbreite (Fließtext 45 bis 75 Zeichen je Zeile bei 1440), die vier Typ-Labels sind samt CSS entfernt, die Karten tragen oben ein Icon-Badge (Kernel K6; seit 02.10.2026 weißes Icon auf Orange statt Gold auf Navy) mit einem doppelten Ring aus der Bogenform des Logos. Kartentexte wortgleich zur Runde 23.09.2026. 2 Spalten ab 960px (dort haben die Karten etwa 48 Zeichen Textbreite, bei 880px sind es 40 bis 46, bei 768px nur 36), darunter 1 Spalte, Gap --gap-lg. Badge, H3 und Text laufen ab 960px als Subgrid über drei gemeinsame Zeilen je Kartenreihe: der Textbeginn steht in beiden Karten einer Reihe auf derselben Linie, egal wie lang H3 oder Text sind (Befund A-04 vom 23.09.2026 bleibt damit gelöst). Die H3 bekommt hyphens:auto (Kernel setzt h1 bis h3 auf manual, schmale Handys würden sonst roh umbrechen; lang="de" steht am ). ------------------------------------------------------------ */ #fuer-wen .fuer-wen-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); } #fuer-wen .fuer-wen-grid > .card { padding: clamp(28px, 3vw, 40px); gap: 16px; } /* Korrekturrunde 02.10.2026 (Zusatzfund A3 Z4, Paket A, Punkt 5): keine automatische Silbentrennung in den Karten von "Für wen" und "Was du bekommst" (vorher "Diskreti-on", "ge-schützt", "Bran-che" in schmalen Karten, weil der Kernel .card auf hyphens:auto setzt). manual trennt nur an eingetragenen ­, es gibt keine; die Wörter in den Karten sind kurz genug (längstes Wort 12 Zeichen, bei 320 px kein Überlauf gemessen). Ersetzt die frühere Regel hyphens:auto an der H3. text-wrap:pretty verhindert Einzelwort-Waisen in der letzten Zeile ohne Trennung. */ :is(#fuer-wen, #was-du-bekommst) .card, :is(#fuer-wen, #was-du-bekommst) .card :is(.h3, .card-desc) { hyphens: manual; } :is(#fuer-wen, #was-du-bekommst) .card .card-desc { text-wrap: pretty; } /* Lesebreite: 31em (16px = 496px) hält den Fließtext bei 1440px zwischen 45 und 75 Zeichen je Zeile (gemessen 62 bis 72), auch wenn die Karte breiter ist. */ #fuer-wen .fuer-wen-grid .card-desc { max-width: 31em; } @media (min-width: 960px) { #fuer-wen .fuer-wen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #fuer-wen .fuer-wen-grid > .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; align-content: start; } /* Fix-Runde 1 (Gate B, B14): die H3 steht oben in ihrer Subgrid-Zeile, also in beiden Karten einer Reihe im gleichen Abstand zum Badge. Vorher lag sie unten in der Zeile (align-self: end): neben einer zweizeiligen H3 sank die einzeilige rund 30px tiefer und der Abstand Badge zu H3 war ungleich. Die Zeilenhöhe der H3 bleibt die der längeren (Subgrid), der Text beginnt in beiden Karten weiter auf derselben Linie. */ #fuer-wen .fuer-wen-grid > .card .h3 { align-self: start; } } /* Übergangssatz unter den Karten: zentriert, Fließtextgröße, die Worte "was du bei uns konkret bekommst" führen per Anker zur nächsten Sektion (kein neuer Text). Den Link umgibt ein vergrößertes Trefferfeld: Padding am Inline-Element wirkt nicht auf den Zeilenfluss, bringt das Touch-Ziel aber auf mindestens 44px. Punkt 9 (15.09.2026): zentriert unter der Kartenreihe, Scope auf #fuer-wen, die Basis-Regel .lead-narrow oben bleibt für andere Stellen unangetastet. */ #fuer-wen .lead-narrow { text-align: center; margin-inline: auto; } #fuer-wen .fuer-wen-weiter { margin-top: var(--gap-lg); font-size: var(--fs-body); color: var(--navy); } #fuer-wen .fuer-wen-weiter a { font-weight: 500; padding-block: 14px; } /* Korrekturrunde 02.10.2026 (Paket A, Punkt 4): der Textlink in Bronze (--academy-ink) statt Navy. Auf Ivory 4,89:1 (Text 16 px, AA ab 4,5:1), unterstrichen wie alle redaktionellen Links. Nur auf Ivory zulässig: auf Sand (4,39:1) und Champagner (4,00:1) bleibt der Link Navy. */ #fuer-wen .fuer-wen-weiter a { color: var(--academy-ink); } /* Korrekturrunde 02.10.2026: Eyebrows auf den Ivory-Sektionen in Bronze (--academy-ink, 4,89:1 auf Ivory, Text 12 bis 13 px, AA erfüllt). Die Überschriften bleiben Navy (Entscheidung 4: nur Akzente werden orange). */ :is(#fuer-wen, #was-du-bekommst, #ablauf, #faq-academy) .eyebrow { color: var(--academy-ink); } /* Icon-Badge mit Bogenring (Punkte 11 und 12): Die Form des Logo-"O" als Signatur der Karten. Korrekturrunde 02.10.2026 (Meeting Leila 01.10., A4-12): Der Kreis ist jetzt Orange (--academy-deep, Kernel) mit weißem Icon (3,39:1, Icon 26 px und damit über der 3:1-Grenze für Grafiken) statt Gold auf Navy. Damit der Kreis nicht "doppelt" wirkt (voller orange Kreis plus kräftiger Goldring im gleichen Ton), sind beide Ringe jetzt blasse Tint-Linien: innen --academy-tint-strong, außen --academy-tint. Die Ringe sind Dekor (Linien, nie Text), sie liegen als box-shadow um den Kreis und stehen damit in keiner Layout-Rechnung. Die Abstandsringe haben die Kartenfarbe (Weiß), der äußerste Ring bleibt innerhalb des Kartenpaddings (mind. 28px, Ring 14px, Hover 18px). Hover weitet den äußeren Ring um 4px und färbt beide Ringe kräftiger (nur mit Maus, Transition am Grundelement); reduced-motion: kein Übergang. */ :is(#fuer-wen, #was-du-bekommst, #ehrlichkeit) .icon-badge--gold { box-shadow: 0 0 0 5px var(--surface-card), 0 0 0 6px var(--academy-tint-strong), 0 0 0 13px var(--surface-card), 0 0 0 14px var(--academy-tint); transition: box-shadow var(--dur-med) var(--ease-out); } @media (hover: hover) and (pointer: fine) { :is(#fuer-wen, #was-du-bekommst) .card:hover .icon-badge--gold { box-shadow: 0 0 0 5px var(--surface-card), 0 0 0 6px var(--academy), 0 0 0 17px var(--surface-card), 0 0 0 18px var(--academy-tint-strong); } } @media (prefers-reduced-motion: reduce) { :is(#fuer-wen, #was-du-bekommst, #ehrlichkeit) .icon-badge--gold { transition: none; } } /* ------------------------------------------------------------ SEKTION: Zitat (Korrektur 29.09.2026) F34 (23.09.2026): Foto in einer Spalte, Zitat in großer Geist-Schrift daneben, auf Navy (Rhythmus-Wechsel, "bewusster Rhythmus-Moment" nach BAU-REGELN Abschnitt 2). Neu: Kernel-Bühne .stage--navy (eingerückt, 30px Radius, zwei Bögen wie der Hero), damit die Fläche dieselbe Formensprache spricht wie der Hero darüber und die Academy-Bühne darunter (.stage + .stage: 10px Zwischenraum). Das Porträt steht im Kernel-Bogenrahmen (.arch--4x5, K5), das Zitat ist ein Kernel-Pull-Quote (K11). Der Bogen wird nicht am Kopf angeschnitten: Kopf bei 12 bis 40 % der Bildhöhe, links vom Bildmittelpunkt, der Halbkreis lässt dort noch die volle Breite. Das große „ ist hier Academy-Gold (auf Navy 5,54:1, nur Dekor, kein Text). Kontrast (gemessen 29.09.2026) Ivory-Zitat auf Navy 13,61:1, Namenszeile --ivory-62 auf Navy 6,04:1, beide über AA 4.5:1. Namenszeile unverändert (offene Frage an Leila: ist sie die Frau auf dem Foto?). ------------------------------------------------------------ */ /* Korrekturrunde 02.10.2026 (Meeting Leila 01.10., Korrektur Nicholas: "Dieses Orange kann man nicht als Hintergrundfarbe verwenden, das ist zu doll"): Das Zitat ist KEINE Navy-Bühne mehr und auch keine Orange-Fläche, sondern die Champagner-Bühne des Kernels (.stage--academy mit .stage--arcs, --academy-surface #EADABD, Bogenlinien in --academy mit geringer Deckkraft aus dem Kernel). Text durchgehend in vollem Navy (11,15:1 auf Champagner, auch die Namenszeile). Orange bleibt Akzent: das große „ in --academy-deep (Dekor, kein Text), der Rand um das Foto im Bogenrahmen in --academy (Linie, Dekor). Aufbau, Foto im Bogen, Pull-Quote und Maße bleiben unverändert (Nicholas: "gut, nicht ändern"). Das Markup trägt statt stage--navy/on-navy jetzt stage--academy; so steht auf der Seite nie Champagner direkt neben Champagner (die Sektion darunter ist Ivory). */ #zitat .arch { outline-color: var(--academy); } #zitat .zitat-grid { align-items: center; } #zitat .arch-frame { --arch-max: 440px; } #zitat .zitat-text.pullquote::before { color: var(--academy-deep); } #zitat .zitat-text figcaption { margin-top: clamp(18px, 2vw, 26px); } #zitat .zitat-text cite { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy); } /* Fix-Runde 1 (Gate B, B9): unter dem Zitat steht ein nächster Schritt (Textlink, Label und Ziel wie der Hero-Button). Er sitzt zusammen mit dem Pull-Quote in einer Spalte (.zitat-col), damit beide auf einer Achse und in der Grid-Zelle rechts vom Bild zusammen mittig stehen. Die Textlink- Höhe (44px) liefert der Kernel. Farbe: Navy (Standardfarbe .textlink) auf Champagner 11,15:1; die Sektion trägt kein .on-navy. */ #zitat .zitat-col { min-width: 0; } #zitat .zitat-weiter { margin: clamp(16px, 2vw, 24px) 0 0; } @media (max-width: 980px) { #zitat .arch-frame { width: 100%; margin-inline: auto; --arch-max: 360px; } /* A-13 (Review 23.09.2026): Bild (oben, zentriert) und Zitat (darunter) standen auf zwei verschiedenen Achsen. Zitat-Spalte auf eine Lesebreite eingrenzen und mittig setzen, damit beide Blöcke auf einer Achse stehen. */ #zitat .zitat-col { max-width: 560px; margin-inline: auto; width: 100%; } } /* ------------------------------------------------------------ SEKTION: Was du bekommst (Punkt 12, Korrektur 29.09.2026) Bis 02.10.2026 eine Academy-Bühne des Kernels (Champagner mit Bogenlinien). Korrektur Nicholas 02.10.2026: Das Zitat darüber ist jetzt die Champagner- Bühne, damit nie zwei Champagner-Flächen aufeinanderfolgen steht diese Sektion auf Ivory ohne Bühne (Markup: nur class="section"). Die Karten sind weiß mit Kernel-Linie und 4 px Radius, die Badges orange mit weißem Icon, der Eyebrow bronze wie in den anderen Ivory-Sektionen (--academy-ink auf Ivory 4,89:1, Regel bei "Für wen"), der Lead Navy-70 (5,53:1 auf Ivory, Kernel). Die fünf Karten, ihre Reihenfolge und die Bento-Anordnung (drei Karten oben, zwei Karten links neben dem Kolosseum-Bild) bleiben wie am 15.09.2026. ------------------------------------------------------------ */ /* Bento-Raster: Reihe 1 = Karten 1 bis 3, Spalte 1 / Reihe 2 und 3 = Karten 4 und 5, Spalte 2 bis 3 / Reihe 2 bis 3 = quadratisches Bildfeld (aspect-ratio:1/1; die beiden 1fr-Reihen teilen sich die Höhe des Quadrats zu gleichen Teilen, sodass Karte 4 und 5 als Quadrate neben dem Bild stehen). Das Bild liegt absolut im Container (kein eigener Beitrag zur Höhenrechnung), der Container trägt Radius, Clip-Reveal (K7) und Schutz gegen Layout-Sprung. Ab dem Breakpoint unten fasst das Raster auf 2 Spalten zusammen, darunter 1 Spalte (Details dort). */ #was-du-bekommst .grid-bekommst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr 1fr; gap: var(--gap-lg); } /* Das Kartenpadding bleibt beim Kernel (clamp 24 bis 34px): mehr Textbreite in den Bento-Karten. Lesebreite wie in "Für wen" gedeckelt (wirkt nur, wo die Karte breiter ist, also einspaltig auf Tablets). */ #was-du-bekommst .grid-bekommst > .card { gap: 16px; } #was-du-bekommst .grid-bekommst .card-desc { max-width: 31em; } /* Fix-Runde 1 (Gate B, B14): Karte 4 und 5 sind höher als ihr Text. Badge, H3 und Text stehen oben zusammen (gleicher Abstand Badge zu H3 wie in Reihe 1, die H3 der Karten 1 bis 3 liegt weiter auf einer Linie, A-11 vom 23.09.2026); die freie Fläche liegt unter dem Text. Vorher: H3 unten angedockt (margin-top: auto), das ergab rund 90px Leerraum zwischen Badge und H3. */ #was-du-bekommst .grid-bekommst > .card:nth-child(n+4) { justify-content: flex-start; } #was-du-bekommst .grid-bekommst .img-field { position: relative; overflow: hidden; grid-column: 2 / 4; grid-row: 2 / 4; align-self: center; width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: var(--ivory-dark); } #was-du-bekommst .grid-bekommst .img-field img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Primärziel am Ende der Sektion (Plan a, Punkt 7 "Führung"): gleicher Button wie im Hero und im Schluss-CTA, Navy auf Champagner 11,15:1. */ #was-du-bekommst .bekommst-cta { margin-top: var(--gap-lg); } /* Mittlere Breiten (unter 1400px): drei Spalten wären für die Kartentexte zu schmal (bei 1280px nur 39 bis 42, bei 1366px 42 bis 44 Zeichen je Zeile, gemessen; bei 1440px 46 bis 48). Das Raster fasst auf zwei Spalten zusammen: Karten 1 bis 4 paarweise, in der letzten Reihe Karte 5 neben dem Bild, das dort die Höhe der Reihe füllt (kein Quadrat, mindestens 320px). */ @media (max-width: 1399px) { #was-du-bekommst .grid-bekommst { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } #was-du-bekommst .grid-bekommst .img-field { grid-column: auto; grid-row: auto; align-self: stretch; aspect-ratio: auto; min-height: 320px; } /* Querformat-Ausschnitt aus dem quadratischen Foto: von oben ansetzen, damit Gesicht und Kolosseum im Bild bleiben (Mitte zeigte nur die Beine) */ #was-du-bekommst .grid-bekommst .img-field img { object-position: 50% 6%; } } /* Unter 960px: einspaltig (Kartentext wäre in zwei Spalten knapp unter 45 Zeichen breit), Bildfeld quadratisch in voller Breite NACH der Anmeldung- Karte (DOM-Reihenfolge, Bildfeld ist das letzte Grid-Kind). */ @media (max-width: 959px) { #was-du-bekommst .grid-bekommst { grid-template-columns: minmax(0, 1fr); } #was-du-bekommst .grid-bekommst .img-field { aspect-ratio: 1 / 1; min-height: 0; } #was-du-bekommst .grid-bekommst .img-field img { object-position: 50% 50%; } } /* Fix-Runde 1 (Gate B, B24): die Karten standen mit dem Kernel-Polster (clamp 24 bis 34px: 25px bei 390px, 24px bei 768px), der äußere Badge-Ring (14px) ließ nur 11px Luft bis zur Kartenkante. Mindestpolster 28px wie in "Für wen" ergibt mindestens 15px Luft auf jeder Breite, ab 1300px bleibt der Kernelwert (34px). Textbreite verliert höchstens 6px. */ #was-du-bekommst .grid-bekommst > .card { padding: clamp(28px, 2.6vw, 34px); } /* ------------------------------------------------------------ SEKTION: Ablauf, Bild links, Kopf und Schritte rechts (Fix-Runde 1, Gate B, B9, 29.09.2026) Gleicher Baustein wie der Ablauf auf der Startseite (index.css): Grid- Areas statt .two-col. Mobil stehen Kopf, Bild und Schritte untereinander; ab 981px steht das Bild links über die volle Höhe von Kopf, Akkordeon und Button (das Bild ist absolut positioniert, seine Höhe kommt aus dem Raster, nicht aus dem Bild). Bildcontainer mit Media-Reveal (Kernel K7), Radius --radius-media. Das Foto (academy-ablauf.webp, 4:5) ist ein Ganzkörper- Porträt: mobil 4:5 ganz, im Tablet-Band 4:3 mit Ansatz von oben (Kopf und Oberkörper bleiben im Bild), Desktop füllt es die Spalte. Kein Name, keine Bildunterschrift (offene Frage 1 an Leila). Ein Hover-Zoom gibt es nicht (das Bild ist keine Karte). ------------------------------------------------------------ */ #ablauf .ablauf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); grid-template-areas: "head" "media" "steps"; align-items: start; } #ablauf .ablauf-head { grid-area: head; } #ablauf .ablauf-media { grid-area: media; position: relative; overflow: hidden; border-radius: var(--radius-media); aspect-ratio: 4 / 5; background: var(--surface-card-alt); } #ablauf .ablauf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; } #ablauf .ablauf-steps { grid-area: steps; display: flex; flex-direction: column; gap: var(--gap-lg); min-width: 0; } @media (min-width: 561px) and (max-width: 980px) { #ablauf .ablauf-media { aspect-ratio: 4 / 3; } } @media (min-width: 981px) { #ablauf .ablauf-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "media head" "media steps"; column-gap: var(--gap-xl); row-gap: var(--gap-lg); align-items: stretch; } #ablauf .ablauf-media { aspect-ratio: auto; min-height: 420px; } #ablauf .ablauf-media img { object-position: 50% 30%; } #ablauf .ablauf-head { align-self: start; } #ablauf .ablauf-steps { align-self: start; } } /* Schritt-Nummer im Ablauf-Accordion trägt einen dezenten Zweitton statt eines zweiten, redundanten "Schritt N"-Labels im Panel. Abnahme-Korrektur (Runde 2, Opus-Prüfung 23.09.2026, Punkt 3): --academy-ink (#8A6120) war damals auf Navy-70 umgestellt worden, weil es auf Weiß/Ivory braun wirkte. Korrekturrunde 02.10.2026 (Meeting Leila 01.10., Paket A, Punkt 4): Die Seite geht ausdrücklich "weg von Blau, hin zu Orange", die Nummern 01 bis 04 stehen deshalb wieder in --academy-ink: auf der weißen Akkordeon-Karte 5,51:1, auf Ivory 4,89:1 (Text 12 bis 13 px, AA ab 4,5:1). Plus-Zeichen und Ring des Akkordeons (Ablauf und FAQ) ebenfalls in Bronze beziehungsweise Gold-Tint (Grafik, braucht 3:1: Plus --academy-ink auf Weiß 5,51:1). Der geöffnete Eintrag bekommt einen warmen Rand (--academy-tint-strong). Überschriften bleiben Navy. */ #ablauf .acc-trigger .acc-num { color: var(--academy-ink); } :is(#ablauf, #faq-academy) .acc-sign { border-color: var(--academy-tint-strong); } :is(#ablauf, #faq-academy) .acc-sign::before, :is(#ablauf, #faq-academy) .acc-sign::after { background: var(--academy-ink); } :is(#ablauf, #faq-academy) .acc-item { transition: border-color var(--dur-med) var(--ease-out); } :is(#ablauf, #faq-academy) .acc-item.is-open { border-color: var(--academy-tint-strong); } /* FAQ-Abschluss-Zeile: #faq-academy nutzt .section-inner.two-col (Grid- Container selbst, keine Wrapper-Zwischenebene wie auf Kontakt-Seite) - .section-cta ist hier ein dritter Grid-Item-Kind und würde ohne diese Regel als schmale zweite Zeile unter der linken Spalte landen statt als volle Zeile unter dem Accordion. Spannt beide Spalten. */ #faq-academy .section-cta.faq-closing { grid-column: 1 / -1; /* Korrekturrunde faq-ctas (Befund 1, SPERR): .section-cta ist hier Grid-Kind und erbt zusätzlich den row-gap der .two-col (--gap-xl, 64px @1280 / 40px @375) - dadurch stand die Zeile näher an #cta-kennenlernen als am eigenen FAQ-Accordion. Rechnet den geerbten row-gap aus dem margin-top heraus, damit nur der komponenteneigene Abstand wirkt - identisch zu Werde-Darling-Seite, wo .section-cta außerhalb von .two-col liegt und keinen row-gap erbt. */ margin-top: calc(clamp(28px, 3.4vw, 44px) - var(--gap-xl)); } /* F39: Die drei "Was wir dir nicht versprechen"-Karten auf einer Linie. Kernel-.score-card nutzt justify-content:space-between (style.css Abschnitt 10) - bei unterschiedlich langem Fließtext je Karte verteilt das den Rest-Raum ungleich auf die beiden Lücken (Icon↔H3, H3↔Text) und schiebt die H3 dadurch pro Karte unterschiedlich weit nach unten. flex-start allein reichte nicht aus: der Kernel-.grid-3 bricht schon bei 1180px auf 2 Spalten um (style.css Abschnitt 24), dort landet Karte 3 allein in einer zweiten Reihe statt weiter auf gleicher Höhe wie 1+2 (A-03, Befundbericht 23.09.2026). Koordinator-Entscheidung: Diese Sektion bleibt bis 900px dreispaltig (eigener Breakpoint, überschreibt den Kernel-Wert per ID-Selektor) und nutzt Subgrid, damit Icon/H3/Text der drei Karten UNABHÄNGIG von Textlänge exakt auf denselben drei Zeilen- linien stehen (nicht nur "gleich hoch", sondern H3-Oberkante identisch). Unter 900px: eine Spalte gestapelt. */ @media (min-width: 900px) { #ehrlichkeit .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #ehrlichkeit .score-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; align-content: start; } } @media (max-width: 899px) { #ehrlichkeit .grid-3 { grid-template-columns: minmax(0, 1fr); } } /* A-12 (Review 23.09.2026): Der Schluss-Absatz "Und noch etwas versprechen wir dir nicht ..." (Academy-Seite, unter dem .grid-3) stand bisher nur 20px unter den Karten, linksbündig, in kleiner Navy-70-Schrift wie eine Fußnote - Leilas Wunsch nach "mehr Inhalt" ging darin optisch unter. Mehr Abstand zu den Karten, Textgröße auf Fließtext-Standard (statt der kleineren .card-desc-Stufe), reines Navy statt der gedämpften 70%-Stufe, und dieselbe zentrierte Ausrichtung wie das analoge Element in "Für wen" weiter oben auf der Seite (Konsistenz-Vorgabe 20-Fehler-Checkliste Nr. 7). */ #ehrlichkeit .lead-narrow { margin-top: var(--gap-lg); font-size: var(--fs-body); color: var(--navy); text-align: center; margin-inline: auto; } /* Fix-Runde 1 (Gate B, B9): "Was wir dir nicht versprechen" ist eine Sand- Bühne (Kernel .stage--sand mit Bögen) und endet mit einem Textlink auf die FAQ-Sektion der Seite (Label wie deren H2, kein neuer Text). Zentriert unter dem zentrierten Schlussabsatz; Navy auf Sand 11,1:1, Trefferfeld 44px aus .textlink. Die Navy-Karten (.score-card) bleiben auf Sand kräftig lesbar, der Schlussabsatz steht in Navy auf Sand. */ #ehrlichkeit .ehrlich-weiter { margin: var(--gap-sm) 0 0; text-align: center; } /* ------------------------------------------------------------ Korrekturrunde 02.10.2026 (Meeting Leila 01.10., Paket A) und Korrektur Nicholas (02.10.): "Dieses Orange kann man nicht als Hintergrundfarbe verwenden, das ist zu doll. Auch nicht in den Cards." REGEL für diese Seite: Orange (--academy #C99136, --academy-deep #B5822F) ist NIE eine Fläche (weder Sektion, Bühne noch Karte). Orange steht nur als Akzent: Icon-Badges (kleine Kreise, weißes Icon), Buttons, feine Linien und Bögen, Anführungszeichen, Nummern, Plus-Zeichen, der kleine Punkt in der Eyebrow-Pille, Werte in der Glas-Karte, 3 px Linie oben an den Ehrlichkeits-Karten und der Rand um das Zitat-Foto. "Weg von Blau" tragen Champagner-Flächen, Ivory, Weiß, der warme Espresso-Hero und die dunkle Foto-Bühne am Seitenende. Reihenfolge: Hauptbuttons, Ehrlichkeits-Karten, Textlink, Schluss-CTA. ------------------------------------------------------------ */ /* Hauptbuttons im Inhalt (Hero und Foto-Bühne siehe oben): Orange (Kernel-Token --academy-deep, #B5822F) mit Navy-Schrift. Schrift Navy auf #B5822F 4,53:1 (Buttontext 15 bis 16 px, AA ab 4,5:1; bei Abweichung des Kernel-Tokens nachmessen). Hover heller auf --academy: Navy darauf 5,54:1. Betrifft .bekommst-cta (Ivory) und .ablauf-cta (Ivory); der Navbar-Button liegt außerhalb von main und bleibt Navy (global). Die Kontur des Buttons gegen den Grund (Ivory 3,01:1) ist nicht allein tragend, der Button ist über seinen Text (Navy, 4,53:1) erkennbar. */ main .btn-solid { background: var(--academy-deep); color: var(--navy); } main .btn-solid .copy-2 { color: var(--navy); } @media (hover: hover) and (pointer: fine) { main .btn-solid:hover { background: var(--academy); } } /* "Was wir dir nicht versprechen": drei weiße Karten (Kartenstandard: weiß, Kernel-Linie, 4 px) mit Navy-Text auf der Sand-Bühne. Navy-Überschrift 15,35:1, Fließtext Navy-70 5,85:1 (wie jede Karte). Statt der Fläche trägt jede Karte oben eine 3 px Akzentlinie in Orange (inset, die Kernel-Technik von .card--line-academy; die Karten haben keinen Hover, die Linie bleibt also immer). Der Minus-Kreis ist ein Orange-Icon-Badge (Kernel .icon-badge--gold: Kreis --academy-deep, weißes Zeichen 3,39:1) mit denselben Ringen wie in "Für wen" (Regel dort). Bogenlinien der Sand-Bühne in Gold-Tint. */ #ehrlichkeit.stage--arcs { --arc-color: var(--academy); --arc-o1: .45; --arc-o2: .30; } #ehrlichkeit .score-card { background: var(--surface-card); color: var(--navy); border: 1px solid var(--line-1); box-shadow: inset 0 3px 0 0 var(--academy); } #ehrlichkeit .score-card .h3 { color: var(--navy); } #ehrlichkeit .score-card p { color: var(--navy-70); } /* Textlink "Frage stellen" unter dem FAQ: Bronze (--academy-ink) statt Navy, auf Ivory 4,89:1 (Text 16 px, unterstrichen). */ #faq-academy .section-cta .textlink { color: var(--academy-ink); } /* ------------------------------------------------------------ SEKTION: Schluss-CTA als Foto-Bühne (Korrektur Nicholas 02.10.2026, Vorlage "Sektion mit Farbe und ein Bild von Leila dann im Hintergrund") Eine eingerückte Kernel-Bühne (.stage, 4 px Radius, Einzug wie die anderen Bühnen, 10 px Ivory-Streifen vor dem Footer) mit Foto im Hintergrund und einer Überlagerung in warmem Espresso (--ac-espresso, derselbe Ton wie der Hero-Scrim; kein Navy, keine Orange-Fläche). Ivory-Text (.on-navy). Links Eyebrow-Pille mit orangem Punkt, H2, Lead, Buttons (Orange mit Navy-Schrift, Ivory-Outline vom Kernel) und ein kleiner Hinweistext; rechts eine halbtransparente Glas-Karte mit drei Fakten (Wert in Orange, Zeile in Ivory). Alle Sätze stammen aus dem bisherigen Abschnitt. Foto academy-cta-leila.webp (Quelle: Academy Fotos 5.png, 2400 x 1142, Ausschnitt Kopf und Oberkörper, Gesicht bei 48 bis 57 % der Breite), Mobil academy-cta-leila-mobil.webp (900 x 1350). Desktop (ab 1100 px): Text links in höchstens 37 vw, Gesicht in der Mitte, Glas-Karte rechts; die Überlagerung läuft von links fast deckend nach rechts durchscheinend. Darunter (bis 1099 px): Foto oben (Höhe --cta-photo-h), Text und Karte gestapelt UNTER dem Gesicht (Padding oben), das Foto blendet per Maske in den Espresso-Grund aus; die Überlagerung ist dort senkrecht. Das Gesicht liegt nie hinter Text. ------------------------------------------------------------ */ #cta-kennenlernen { --cta-photo-h: 0px; background: var(--ac-espresso); color: var(--ivory); margin-bottom: var(--stage-inset); padding-block: clamp(56px, 7vw, 104px); } #cta-kennenlernen.stage--arcs { --arc-color: var(--academy); --arc-o1: .40; --arc-o2: .26; } #cta-kennenlernen .cta-bg { position: absolute; inset: 0; z-index: -2; margin: 0; } #cta-kennenlernen .cta-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; } #cta-kennenlernen .cta-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--ac-espresso-rgb), .95) 0%, rgba(var(--ac-espresso-rgb), .92) 33%, rgba(var(--ac-espresso-rgb), .60) 47%, rgba(var(--ac-espresso-rgb), .38) 58%, rgba(var(--ac-espresso-rgb), .38) 100%); } #cta-kennenlernen .cta-grid { display: grid; align-items: center; column-gap: var(--gap-lg); grid-template-columns: minmax(0, clamp(400px, 37vw, 560px)) minmax(0, 1fr) minmax(0, clamp(280px, 27vw, 360px)); } #cta-kennenlernen .cta-text { min-width: 0; gap: var(--gap-md); } #cta-kennenlernen .cta-glass { grid-column: 3; min-width: 0; } /* Eyebrow als Pille mit orangem Punkt (Punkt 8 px, Akzent, kein Text) */ #cta-kennenlernen .cta-pill { gap: 10px; padding: 9px 16px 9px 14px; border: 1px solid var(--ivory-25); border-radius: var(--radius-full); background: var(--ivory-08); color: var(--ivory); } #cta-kennenlernen .cta-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--academy); } #cta-kennenlernen .cta-text .row { margin-top: var(--gap-xs); } #cta-kennenlernen .cta-hint { margin: 0; max-width: 46ch; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ivory-82); } /* Glas-Karte: halbtransparenter Espresso (55 %) mit Weichzeichner, auf 68 % abgedunkeltem Hintergrund und feiner Ivory-Linie, 4 px (--radius-card). Die Abdunklung hält die orangen Werte (--academy) über 4,5:1, auch über hellen Stellen des Fotos (gemessen am hellsten Pixel ohne Weichzeichner, siehe log-A.md). Ohne backdrop-filter dichterer Grund (86 %). */ #cta-kennenlernen .cta-glass { padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--ivory-25); border-radius: var(--radius-card); background: rgba(var(--ac-espresso-rgb), .55); -webkit-backdrop-filter: blur(14px) saturate(1.1) brightness(.68); backdrop-filter: blur(14px) saturate(1.1) brightness(.68); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #cta-kennenlernen .cta-glass { background: rgba(var(--ac-espresso-rgb), .86); } } #cta-kennenlernen .cta-facts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } #cta-kennenlernen .cta-facts li { display: flex; flex-direction: column; gap: 6px; padding-block: 18px; } #cta-kennenlernen .cta-facts li:first-child { padding-top: 0; } #cta-kennenlernen .cta-facts li:last-child { padding-bottom: 0; } #cta-kennenlernen .cta-facts li + li { border-top: 1px solid var(--ivory-18); } #cta-kennenlernen .cta-fact-value { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-head); color: var(--academy); } #cta-kennenlernen .cta-fact-label { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ivory-82); } /* Unter 1100 px gestapelt: Foto oben mit Maske, Text und Karte darunter */ @media (max-width: 1099px) { #cta-kennenlernen { --cta-photo-h: 54vw; padding-top: calc(27vw + 32px); } #cta-kennenlernen .cta-bg { inset: 0 0 auto 0; height: var(--cta-photo-h); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); } #cta-kennenlernen .cta-bg img { object-position: 52% 0%; } #cta-kennenlernen .cta-scrim { inset: 0 0 auto 0; height: var(--cta-photo-h); background: linear-gradient(180deg, rgba(var(--ac-espresso-rgb), .30) 0%, rgba(var(--ac-espresso-rgb), .40) 45%, rgba(var(--ac-espresso-rgb), .90) 100%); } #cta-kennenlernen .cta-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-lg); align-items: start; } #cta-kennenlernen .cta-glass { grid-column: 1; max-width: 560px; } } @media (max-width: 720px) { #cta-kennenlernen { --cta-photo-h: 125vw; padding-top: calc(50vw + 24px); } #cta-kennenlernen .cta-bg img { object-position: 60% 0%; } #cta-kennenlernen .cta-scrim { background: linear-gradient(180deg, rgba(var(--ac-espresso-rgb), .12) 0%, rgba(var(--ac-espresso-rgb), .24) 28%, rgba(var(--ac-espresso-rgb), .90) 46%, rgba(var(--ac-espresso-rgb), .96) 100%); } #cta-kennenlernen .cta-glass { max-width: none; } } /* ------------------------------------------------------------ Runde 21.10.2026 (Paket Academy-Struktur): Sektion S05 Angebote, neue Struktur "So funktioniert es" (vier Schritte), darunter drei Tracks als Reiter (Darlinge, Independent Women, Gentlemen; FAQ-Reiter-Komponente, Kernel .faq-tabs, script.js §5). Je Track Einleitung, Modulkarten (Code, Titel, Zielgruppe, Beschreibung, Inhalte, Varianten als Chips, Preis, Buchen, Disclaimer) und Paketkarten. Sand-Bühne mit Bögen in Gold-Tint, Karten weiß. Orange nur als 3-px-Linie oben an den Karten und als Bogen, nie als Fläche. Die Sektion erscheint live nur ohne [PRÜFEN] (page-academy.php). Keine Texte über Fotos, kein horizontales Scrollen ab 360 px. ------------------------------------------------------------ */ #angebote.stage--arcs { --arc-color: var(--academy); --arc-o1: .45; --arc-o2: .30; } #angebote .faq-tabs { background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line-2); } #angebote .faq-panel:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: var(--radius-card); } #angebote .ac-sub { margin: 0 0 var(--gap-sm); color: var(--navy); } /* 1. So funktioniert es: 1 Spalte bis 767 px, 2 Spalten ab 768 px, 4 Spalten ab 1100 px. */ #angebote .ac-schritte-block { margin-bottom: var(--gap-xl, var(--gap-lg)); } #angebote .ac-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); } @media (min-width: 768px) { #angebote .ac-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { #angebote .ac-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } } #angebote .ac-schritt { gap: 10px; box-shadow: inset 0 3px 0 0 var(--academy); hyphens: manual; text-wrap: pretty; min-width: 0; } #angebote .ac-schritt .h3-sm { margin: 0; color: var(--navy); } #angebote .ac-nr { font-family: var(--font-head); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-eyebrow); color: var(--navy-ink-2); } /* 2. Track-Einleitung. */ #angebote .ac-intro { margin: 0 0 var(--gap-lg); max-width: 40em; color: var(--navy-70); text-wrap: pretty; hyphens: manual; } /* 3. Karten: 1 Spalte bis 767 px, 2 Spalten ab 768 px, 3 Spalten ab 1100 px (Pakete höchstens 2). */ #angebote .ac-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); margin-bottom: var(--gap-lg); } @media (min-width: 768px) { #angebote .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { #angebote .ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #angebote .ac-grid--pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #angebote .ac-panel > .ac-grid:last-child { margin-bottom: 0; } #angebote .ac-karte { gap: 14px; min-width: 0; box-shadow: inset 0 3px 0 0 var(--academy); hyphens: manual; text-wrap: pretty; overflow-wrap: break-word; } #angebote .ac-karte .h3-sm { margin: 0; color: var(--navy); } #angebote .ac-karte .tag { max-width: 100%; } /* Felder mit kleiner Beschriftung. */ #angebote .ac-feld { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; } #angebote .ac-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy-ink-2); } #angebote .ac-feld .card-desc { margin: 0; } #angebote .ac-liste { list-style: disc; margin: 0; padding: 0 0 0 1.15em; display: flex; flex-direction: column; gap: 4px; color: var(--navy-70); font-size: var(--fs-body-sm); } #angebote .ac-liste li::marker { color: var(--academy); } #angebote .ac-liste--module { list-style: none; padding-left: 0; } #angebote .ac-code { font-family: var(--font-head); font-weight: 600; color: var(--navy); } /* Varianten als Chips (nicht die Pillenform, sondern der Karten-Radius wie bisher). */ #angebote .ac-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } #angebote .ac-chips .chip { display: inline-block; max-width: 100%; border-radius: var(--radius-card); line-height: 1.35; hyphens: manual; overflow-wrap: break-word; } /* Preis und Buchen-Knopf stehen unten in der Karte. */ #angebote .ac-preis { margin-top: auto; padding-top: 4px; } #angebote .ac-preis-wert { font-family: var(--font-head); font-size: var(--fs-h3-sm); line-height: var(--lh-snug); font-weight: 600; color: var(--navy); } #angebote .ac-buchen { align-self: flex-start; max-width: 100%; } #angebote .ac-disclaimer { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--navy-70); text-wrap: pretty; } /* ============================================================ Runde 21.10.2026, Paket P7a, Fix 1: Handy, Medium oben, Text darunter (Regel von Nicholas) Unter 721 px liegt nirgends Text über Kopf oder Gesicht. Das Medium steht im Fluss über .hero-content (volle Breite der Fläche, Seitenverhältnis 4:5, object-fit: cover), ohne Scrim und ohne Verlauf. Der Text steht darunter auf Navy. Bildausschnitt: 78% 0% (Kopf oben im Bild; im Breitformat zwischen 561 und 720 px steht die Figur bei 62 % der Breite). Das Medium liegt über den Kreisbögen (z-index), die Bögen bleiben nur im Textbereich sichtbar. ============================================================ */ @media (max-width: 720px) { #hero.hero-full { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: auto; } #hero .hero-bg { position: relative; inset: auto; z-index: 3; grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; } #hero picture.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 0%; } #hero .hero-scrim { display: none; } #hero .hero-content { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: clamp(18px, 5vw, 24px); padding-top: clamp(24px, 6vw, 32px); } } /* ------------------------------------------------------------ Runde 21.10.2026, Paket P7a, Fix 1 (Teil Academy-CTA #cta-kennenlernen): Handy, Foto oben, Text darunter Unter 721 px steht das Foto im Fluss ganz oben in der Bühne (volle Breite, 4 / 5, object-fit: cover, keine Maske, kein Scrim), Gesicht und Kopf ganz im Bild (Ausschnitt 55 % 0 %). Text und Glas-Karte stehen darunter auf Espresso. Das Foto liegt über den Kreisbögen (z-index). ------------------------------------------------------------ */ @media (max-width: 720px) { #cta-kennenlernen { --cta-photo-h: 0px; padding-top: 0; } #cta-kennenlernen .cta-bg { position: relative; inset: auto; z-index: 1; display: block; height: auto; aspect-ratio: 4 / 5; margin-inline: calc(-1 * max(0px, calc(var(--section-pad-x) - var(--stage-inset)))); -webkit-mask-image: none; mask-image: none; } #cta-kennenlernen .cta-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 0%; } #cta-kennenlernen .cta-scrim { display: none; } #cta-kennenlernen .cta-grid { padding-top: clamp(24px, 6vw, 32px); } }