/* ============================================================ Seitenspezifisches CSS: events.html Neuaufbau Korrekturschleife 29.09.2026 (Paket P3, Plan Abschnitt d): Bildseite mit festem Wortbudget. Rhythmus N I S I S N: Hero (Navy) · Anlässe (Ivory, vier Bildkarten) · Werttreiber (Sand-Bühne, Bögen) · Concierge (Ivory, zwei Bildkarten) · Ablauf (Sand-Bühne, Bild + Zeitleiste) · CTA (Navy). Alle Farben, Radien, Schriftgrößen kommen aus den :root-Tokens in assets/style.css. Die Bausteine (Bühnen, Bildkarten, Häkchenliste, Zeitleiste, „Mehr lesen“, Icon-Badge, Reveal, Hebung) liefert der Kernel; diese Datei ergänzt nur das Seiten-Layout. ============================================================ */ /* ------------------------------------------------------------ SEKTION: Hero, Foto-Variante (Fix-Runde 2, C2-02, Gate C, 29./30.09.2026). Foto hero-events-v2.jpg (iStock 1091397706, nicht gespiegelt): Restaurant, die Frau im roten Kleid blickt über die Schulter und steht bei 66 bis 85 % der Breite, der Gast links ist eine dunkle Fläche unter dem Scrim. (Vorher: Dinner-Serie der Startseite, die auch der Werde-Darling-Hero zeigt.) Der Scrim ist gerichtet: dicht nur hinter der Textspalte (bis ca. 46 %), danach läuft er aus, sodass Gesicht und Schulter frei stehen. Kontrast der Texte gegen das echte Foto: siehe review-gateC-teil2.md, Fix-Runde 2. Mobil (bis 720 px) eigener Zuschnitt hero-events-v2-mobil.jpg (900×1560): Frau mittig, oberhalb eine dunkle Kopfzone (Fortsetzung des Bildrands), damit die H1 nicht über dem Gesicht steht; per . */ #hero .hero-bg img { object-position: 50% 30%; } /* Textspalte bleibt in der linken Bildhälfte: H1 in drei Zeilen (12em), Lead höchstens 520 px, die Frau rechts bleibt frei. */ #hero .hero-top .h1 { max-width: 12em; } #hero .hero-foot .lead { max-width: min(520px, 46vw); } /* Hohes Flächen-Regime (Tablet-Hochformat u. ä., Hero schmaler/höher als das Bild): object-fit:cover skaliert über die HÖHE, horizontaler Spielraum ist da, object-position-X wirkt. Nach rechts, damit die Frau im schmalen Ausschnitt bleibt. */ @media (min-width: 721px) and (max-aspect-ratio: 3/2) { #hero .hero-bg img { object-position: 78% 28%; } } /* Scrim (Desktop): links deckend unter Eyebrow, H1 und Lead, ab ca. 46 % Übergang, ab 68 % nichts mehr über dem Gesicht. */ #hero .hero-scrim { background: linear-gradient(90deg, rgba(var(--navy-rgb), .96) 0%, rgba(var(--navy-rgb), .93) 40%, rgba(var(--navy-rgb), .84) 50%, rgba(var(--navy-rgb), .70) 58%, rgba(var(--navy-rgb), .32) 64%, rgba(var(--navy-rgb), .08) 70%, rgba(var(--navy-rgb), 0) 80%); } /* Eyebrow hero-lokal aufgehellt: .on-navy .eyebrow (Kernel, ivory-62) fällt gegen den hellen Fenster-/Himmelhintergrund des Fotos unter 4.5:1, volles Ivory besteht überall ≥ 6:1 (analog index.css). */ #hero .eyebrow { color: var(--ivory); } /* Button plus Textlink „Darlinge ansehen“ in einer Reihe */ #hero .hero-foot > .row { column-gap: var(--gap-lg); row-gap: var(--gap-xs); } /* Mobil (≤ 720 px): Hochformat-Zuschnitt, Gesicht der Frau zwischen H1 (oben) und Lead/Button (unten). Senkrechter Scrim statt waagerecht: oben und unten dunkel für den Text, in der Mitte bleibt das Gesicht frei. Die dunklen Zonen sind in Pixeln statt in Prozent gesetzt (Fix-Runde 2, gemessen an 320 bis 720 px Breite und 568 bis 1000 px Höhe): H1 und Lead haben feste Höhen, die Heldenhöhe schwankt. --zt = Unterkante der H1 (von oben), --zb = Abstand der Lead-Oberkante zur Heldenunterkante (Werte gemessen, jeweils einige Pixel Reserve). */ @media (max-width: 720px) { #hero .hero-bg img { object-position: 50% 30%; } #hero .hero-scrim { --zt: 134px; --zb: 210px; background: linear-gradient(180deg, rgba(var(--navy-rgb), .92) 0, rgba(var(--navy-rgb), .90) var(--zt), rgba(var(--navy-rgb), .10) calc(var(--zt) + 40px), rgba(var(--navy-rgb), .10) calc(100% - var(--zb) - 44px), rgba(var(--navy-rgb), .86) calc(100% - var(--zb)), rgba(var(--navy-rgb), .95) 100%); } #hero .hero-top .h1, #hero .hero-foot .lead { max-width: none; } } @media (max-width: 560px) { #hero .hero-scrim { --zt: 166px; --zb: 268px; } } @media (max-width: 430px) { #hero .hero-scrim { --zt: 168px; --zb: 292px; } } @media (max-width: 420px) { #hero .hero-scrim { --zt: 204px; --zb: 314px; } } @media (max-width: 370px) { #hero .hero-scrim { --zt: 230px; --zb: 314px; } } @media (max-width: 335px) { #hero .hero-scrim { --zt: 230px; --zb: 336px; } } /* Kurze Handys (Höhe bis 730 px, z. B. 375×667, 360×640, 320×568): H1 und Lead stoßen fast aneinander, das freie Band für das Gesicht schrumpft auf unter 100 px. Statt einer harten Kante quer durchs Foto liegt hier ein gleichmäßig dichter Scrim, das Gesicht bleibt als ruhige Fläche dahinter (Kontrast der Zeilen gemessen, siehe Log). */ @media (max-width: 720px) and (max-height: 730px) { #hero .hero-scrim { background: linear-gradient(180deg, rgba(var(--navy-rgb), .92) 0, rgba(var(--navy-rgb), .80) 45%, rgba(var(--navy-rgb), .84) 65%, rgba(var(--navy-rgb), .95) 100%); } } /* Neue H1 (F25, Event-Fokus): clamp() statt eines --fs-*-Tokens ist als bewusste Abweichung in DESIGN.md Abschnitt 7 dokumentiert. Bei sehr schmalen Viewports (≤420px) greift sonst der Kernel-Mindestwert --fs-h1-split zu spät und die Zeile bricht unschön; hier lokal ein niedrigerer Mindestwert nur für diesen Headline-Text. Untergrenze 31px (= --fs-h1-split-Mindestwert des Kernels, über den 30px der H2): 390px → 31,1px, 375px → 31px, höchstens 4 Zeilen, keine Einzelwort-Waise. */ @media (max-width: 420px) { #hero .h1 { font-size: clamp(31px, 5.4vw + 10px, 34px); } } /* Hero-Buttonreihe: unter 560px zieht der Kernel den Button auf 100 % der Row, die Row selbst auf volle Spaltenbreite (wie auf index/academy). */ @media (max-width: 560px) { #hero .hero-foot > .row { align-self: stretch; } } /* Kernel-98vh-Korrektur bei sehr flachen Viewports (Querformat Handy): Hero-Fläche bleibt sonst minimal höher als innerHeight. */ @media (min-width: 721px) and (max-height: 480px) { #hero .hero-foot { gap: clamp(14px, 1.8vh, 20px); } } /* Redaktionelle Inline-Links (Zeitleiste, Hinweiszeile, Academy-Zeile): sichtbar unterstrichen. Die Trefferfläche ≥ 44px (vertikales Padding an der Inline-Box) kommt seit Fix-Runde 1 (B2-27) aus dem Kernel (style.css, `:is(p, …, .text-links) a`). */ .text-links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Nächster Schritt am Sektionsende (B2-03): Textlink unter Anlässen und Werttreibern */ .next-step { margin: clamp(28px, 3.4vw, 44px) 0 0; } .lead-narrow { max-width: 640px; } /* Sektionsköpfe: bricht der Lead unter die H2 (bei etwa 1181 bis 1300px per Flex-Wrap, darunter stapelt der Kernel), gilt der engere Zeilenabstand statt des 64px-Spaltenabstands; Lead auf lesbare Zeilenlänge */ main .section-head { row-gap: var(--gap-md); } @media (max-width: 1180px) { main .section-head .lead { max-width: 560px; } } /* ------------------------------------------------------------ SEKTION: Anlässe (Ivory, vier Bildkarten) Kopf: H2 in zwei Zeilen bei 1440 (breite Kopfspalte, schmalere Lead- Spalte). Raster: 4 Spalten ab 1280px (Plan: 1200px; darunter bliebe die Textspalte unter 200px und „Investorenabende“ bräche mitten im Wort), 2 Spalten 720 bis 1279px, darunter eine Spalte mit flacherem Bildausschnitt (kürzere Seite, Gesichter im oberen Drittel bleiben durch object-position sichtbar). */ #anlaesse .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: var(--gap-xl); row-gap: var(--gap-md); align-items: end; } #anlaesse .section-head .head-left { max-width: none; } #anlaesse .section-head .lead { max-width: 420px; } @media (max-width: 1180px) { #anlaesse .section-head { grid-template-columns: minmax(0, 1fr); } #anlaesse .section-head .lead { max-width: 480px; } } .anlass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); } /* Schmale Kartentexte ohne automatische Silbentrennung (kein „Geschäftli-che“), erst auf einer Spalte mit voller Breite wieder erlaubt. Innenabstand in den vier schmalen Spalten etwas kleiner als der Kernel-Standard. */ .anlass-grid .media-card-body { hyphens: manual; padding: clamp(20px, 2vw, 30px); } .anlass-grid .card-desc { text-wrap: pretty; } @media (max-width: 1279px) { .anlass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md); } .anlass-grid .media-card-body { padding: clamp(22px, 2.4vw, 32px); } /* zwei breite Spalten: quadratischer Ausschnitt statt 4:5 (sonst 600px hohe Bilder) */ .anlass-grid .media-card-img { aspect-ratio: 1 / 1; } .anlass-grid .media-card-img img { object-position: 50% 32%; } } @media (max-width: 719px) { .anlass-grid { grid-template-columns: minmax(0, 1fr); } .anlass-grid .media-card-img { aspect-ratio: 16 / 11; } .anlass-grid .media-card-img img { object-position: 50% 24%; } .anlass-grid .media-card-body { hyphens: auto; } } /* ------------------------------------------------------------ SEKTION: Werttreiber (Sand-Bühne, Bögen) Vier offene Spalten statt Karten (Karten tragen Anlässe und Concierge): Haarlinie oben, darunter die Icon-Kachel, dann Überschrift und Text. Keine Ziffern (Fix-Runde 1, B2-01: nur Icons, wie auf Über uns). ≤ 1199px 2×2, ≤ 719px eine Spalte. */ .wert-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-lg); margin: 0; padding: 0; list-style: none; } .wert { display: flex; flex-direction: column; gap: 12px; min-width: 0; hyphens: manual; padding-top: clamp(20px, 2.2vw, 30px); border-top: 1px solid var(--line-strong); } .wert .icon-badge { margin-bottom: 8px; } /* 2×2 schon ab 1199px (Plan: 1023px): bei 1024 bis 1199 wären die Spalten nur 205 bis 245px breit, die H3 bräche in vier bis fünf kurze Zeilen. */ @media (max-width: 1199px) { .wert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--gap-xl); } } @media (max-width: 719px) { .wert-list { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); } } /* ------------------------------------------------------------ SEKTION: Concierge (Ivory, zwei Bildkarten) align-items:start: öffnet sich der Volltext einer Karte, wächst nur diese. Die Premium-Karte trägt ein gefülltes Label (Navy), die Basis ein neutrales. Volltext-Absätze bleiben Leilas Wortlaut; auf breiten Karten ohne Silbentrennung (ruhiger Flattersatz), auf schmalen mit. */ .concierge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg); align-items: start; } @media (max-width: 980px) { .concierge-grid { grid-template-columns: minmax(0, 1fr); } } .concierge-card .media-card-body { gap: 14px; } .concierge-card .check-list { margin-top: 2px; } .concierge-card .readmore { margin-top: 2px; } /* Fix-Runde 2 (C2-18): Leilas Volltext auch auf dem Handy ohne automatische Trennung (390 px: vorher 20 durch Trennung geteilte Wörter, u. a. „Sui-ten“). Umbruch nur an Wortgrenzen, overflow-wrap des Bodys fängt Ausreißer ab. */ .concierge-card .readmore-body { hyphens: manual; } .concierge-card .readmore-body .card-desc { text-wrap: pretty; } .tag--solid { background: var(--navy); border-color: var(--navy); color: var(--ivory); } .concierge-foot { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--line-1); font-size: var(--fs-caption); line-height: 1.45; color: var(--navy-70); } /* Übergangssatz + Button: Kernel-Modifier `.section-cta--lead` (Fix-Runde 1, B2-12); die frühere seitenlokale Regel `.section-cta.concierge-cta` entfällt. */ /* ------------------------------------------------------------ SEKTION: Ablauf (Sand-Bühne, Text + Zeitleiste links, Bild rechts) Desktop: zwei Spalten, das Bild (4:5) bleibt beim Lesen der Schritte stehen (sticky). ≤ 900px: eine Spalte, Reihenfolge Kopf, Bild (flacher Ausschnitt), Schritte. Das gelingt ohne doppeltes Markup: .ablauf-text wird zu display:contents, seine Kinder sortieren sich per order. */ /* Zwischen der Sand-Bühne und der randlosen Navy-CTA bleibt der Bühnen-Einzug als Ivory-Streifen stehen (sonst zeigen die runden Ecken Ivory-Keile) */ #ablauf { margin-bottom: var(--stage-inset); } .ablauf-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-xl); align-items: start; } .ablauf-text { display: flex; flex-direction: column; gap: clamp(28px, 3.6vw, 48px); min-width: 0; } .ablauf-head { display: flex; flex-direction: column; gap: 14px; } .ablauf-head .lead { font-size: var(--fs-lead-head); max-width: 480px; text-wrap: pretty; } .ablauf-body { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); } /* keine Silbentrennung in Zeitleiste und Hinweiskarte (sonst „Insta-gram“, „Bu-chungsformular“) */ .ablauf-grid :is(.timeline-step, .ablauf-note) { hyphens: manual; } .ablauf-grid :is(.timeline-step, .ablauf-note) p { text-wrap: pretty; } /* E-Mail-Adresse nie am Bindestrich umbrechen */ .ablauf-grid a[href^="mailto:"]:not(.btn) { white-space: nowrap; } .ablauf-note { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px); background: var(--surface-card); border: 1px solid var(--line-1); border-radius: var(--radius-card); } .ablauf-note p:first-child { font-size: var(--fs-body-sm); line-height: var(--lh-body); } .ablauf-media { margin: 0; position: sticky; top: calc(var(--nav-h) + 24px); min-width: 0; } .ablauf-media-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-media); background: var(--surface-card); } .ablauf-media-img img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .ablauf-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-lg); } .ablauf-text { display: contents; } .ablauf-head { order: 1; } .ablauf-media { order: 2; position: static; } .ablauf-body { order: 3; } .ablauf-media-img { aspect-ratio: 3 / 2; } .ablauf-media-img img { object-position: 50% 28%; } } /* ------------------------------------------------------------ SEKTION: CTA (Navy). Kreisbögen wie im Hero (Kernel-Klasse stage--arcs, hier auf einer Randlos-Fläche), Inhalt über den Bögen. Der Academy-Verweis ist eine ruhige Zeile unter den Buttons. */ #cta { isolation: isolate; overflow: clip; --arc-color: var(--ivory); --arc-o1: .10; --arc-o2: .07; } #cta > .section-inner { position: relative; z-index: 1; } .cta-academy { margin-top: var(--gap-md); padding-top: 20px; border-top: 1px solid var(--ivory-18); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--ivory-82); } /* ============================================================ 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: 50% 30% (Gesicht der Frau bei etwa 25 bis 45 % der Bildhöhe, ganz im Bild). 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: 50% 30%; } #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); } }