/* ============================================================ Seitenspezifisches CSS - index.html (Startseite) Nur Layout-Feinheiten, die dieser Seite vorbehalten sind - keine Farben/Radius-Werte (kommen ausschließlich aus den :root-Tokens im Kernel, assets/style.css). Jede font-size hier ausschließlich über bestehende --fs-*-Tokens bzw. clamp(). ============================================================ */ /* ------------------------------------------------------------ SEKTION: Hero - Foto-Variante der Kernel-Hero-Komponente (assets/style.css Abschnitt 22, `.hero-full`). Geometrie, Bogen-Deko, Innenabstand und die space-between-Verteilung sind jetzt Kernel-Norm für JEDE Hero-Instanz - hier bleiben ausschließlich die Regeln, die NUR dieser eine Foto-Hero zusätzlich braucht: der Scrim-Gradient auf dem Foto, der Bild-Bildausschnitt, die H1-Breitenbegrenzung (damit die Headline vor der Frau im Foto endet) und der hero-exklusive Display-Schriftgrad. ------------------------------------------------------------ */ :root { /* Hero-Display-Größe - größer als --fs-h1/--fs-h1-split, nur dieser Foto-Hero (Nicholas-Vorgabe Referenz-Screenshot). Hero-exklusives Seiten-Token außerhalb der Kernel-Skala, siehe DESIGN.md Abschnitt 7 „Bekannte, bewusste Abweichungen" - Kernel ist nach dem Kernel-Bau gesperrt (BAU-REGELN Abschnitt 1), daher clamp() hier statt in style.css. Max von 108px auf 92px gesenkt (Korrekturrunde 07.09.2026), damit H1+Lead+Buttons unter der Navbar in den ersten Viewport passen. */ --fs-hero-display: clamp(38px, 5.2vw, 92px); } /* Korrekturrunde-Befund (SPERR, 07.09.2026): der X-Anteil von object-position ist auf jedem gängigen Desktop-Seitenverhältnis wirkungslos - object-fit: cover skaliert dort über die BREITE (Flächenhöhe/-breite ≈0,50-0,56, also < 0,5625), nicht über die Höhe; es bleibt kein horizontaler Übertrag zum Verschieben. Gemessen (object-fit-Formel + Canvas-Warmton-Sampling der Personen-Kante im H1-Höhenband): offX = 0 bei 1366×768, 1440×900, 1920×1080 - die vorherigen 72 % haben dort nie etwas bewegt, der Kommentar „weiter nach rechts verschoben“ war falsch. Der Y-Anteil (55 %) bleibt überall, weil er der auf Desktop-Seitenverhältnissen eigentlich wirksame Anteil ist. KORREKTUR der Korrekturrunde (07.09.2026 abends, Restbefund KERNEL-1): die vorherige Fassung setzte den X-Anteil für JEDES Viewport ≥721px pauschal auf 50 % (neutral) - das war falsch für das hohe Flächen-Regime (Tablet-Hochformat: Flächenhöhe/-breite > 1,5, siehe Media Query unten). Dort SKALIERT object-fit:cover über die HÖHE (nicht die Breite), es bleibt sehr wohl horizontaler Spielraum, der X-Anteil ist dort wirksam - die Neutralisierung wurde ungeprüft vom Desktop-Fall auf dieses Regime mitgezogen und hat dort die H1-Person-Überlappung mitverursacht (gemessen −7.0px @721×1024 … −1.8px @900×1200 bei 50 %). Fix: eigene Media Query für das hohe Flächen-Regime, X-Anteil dort auf 32 % (Canvas-Warmton-Sampling nachgemessen, alle Lücken deutlich positiv: +135.7px @721×1024, +136.5px @768×1024, +157.9px @820×1180, +161.7px @900×1200, +184.4px @1024×1366). Visuell gegengeprüft (768×1024, 1024×1366): rechts bleibt die Yacht klar sichtbar, kein zu starker Bildverlust. Auf breiten/flachen Desktop-Flächen (max-aspect-ratio 3/2 trifft NICHT zu) bleibt es bei 50 % neutral, weil der X-Anteil dort wirkungslos ist (offX=0, s.o.). */ #hero .hero-bg img { object-position: 72% 55%; } /* Fix-Runde 2 (Gate C, C4, 30.09.2026): Video und Poster zeigen die Frau bei 46 % bis 61 % der Bildbreite (Gesicht x 47 bis 60 %, Ohrring bei 57 %, Stirn y 20 %, Kinn y 42 %). Der frühere Wert 72 % 55 % war auf das Yacht-Standbild abgestimmt und schnitt mobil das Gesicht weg (nur Ohr und Ohrring blieben). Mit 50 % steht das ganze Gesicht bis 720 px im Band zwischen H1 und Lead (gemessen 375 bis 430 px: mindestens 47 px Rand rechts, keine Überdeckung durch H1 oder Lead). Unter 375 px bricht die H1 in drei Zeilen und reicht mit der letzten Zeile bis x 211: dort 46 %, das schiebt das Gesicht nach rechts (6 px Rand, Wange bleibt im Bild, H1 berührt es nicht). Y wirkt nur im Querformat (Hochformat skaliert über die Höhe, kein vertikaler Spielraum), dort 40 %, damit die Stirn nicht abgeschnitten wird. Das im Video-Fallback (Yacht) behält seinen eigenen Wert. */ #hero video.hero-bg, #hero .hero-bg--poster { object-position: 50% 40%; } @media (max-width: 374px) { #hero video.hero-bg, #hero .hero-bg--poster { object-position: 46% 40%; } } @media (min-width: 721px) { #hero .hero-bg img, #hero video.hero-bg, #hero .hero-bg--poster { object-position: 50% 55%; } } /* Hohes Flächen-Regime (Tablet-Hochformat u. ä.): Flächenseitenverhältnis Breite/Höhe fällt unter das Bildseitenverhältnis (hero-abend.jpg ist 16:9 ≈1,778) - object-fit:cover skaliert dann über die Höhe, es entsteht horizontaler Bildüberschuss, den object-position:X tatsächlich verschieben kann (anders als auf breiten Desktop-Flächen, siehe Kommentar oben). Als Näherung für „Flächenseitenverhältnis < 16:9“ dient das VIEWPORT-Seiten- verhältnis max-aspect-ratio:3/2 (=1,5) - deckt nachgemessen exakt die geforderte Prüfmenge ab (721×1024, 768×1024, 820×1180, 900×1200, 1024×1366, jeweils Viewport-Verhältnis ≤0,75) und lässt alle Desktop- Breiten (1366×768 u.ä., Verhältnis ≥1,778) unberührt. */ @media (min-width: 721px) and (max-aspect-ratio: 3/2) { #hero .hero-bg img, #hero video.hero-bg, #hero .hero-bg--poster { object-position: 32% 55%; } } /* Video-Hero (Nicholas 15.09.2026, umgebaut in Runde 21.10.2026, P7a Fix 2): Der Kernel stylt nur .hero-bg IMG (style.css Abschnitt 22). Poster-Bild und Video sind hier selbst .hero-bg und bekommen dieselbe Sizing-Regel seitenspezifisch. Das Poster () ist immer vorhanden und sichtbar, es ist das LCP-Bild. Das Video steht im HTML danach (liegt darüber), bleibt unsichtbar (opacity 0), bis assets/js/hero-video.js eine Quelle gesetzt hat und das Video spielt (Klasse is-playing), dann blendet es in höchstens 300 ms über das Poster. Ohne JavaScript und bei reduzierter Bewegung bleibt nur das Poster. */ #hero video.hero-bg, #hero .hero-bg--poster { width: 100%; height: 100%; object-fit: cover; } #hero .hero-bg--poster { display: block; } #hero video.hero-bg { display: block; opacity: 0; transition: opacity .3s ease; } #hero video.hero-bg.is-playing { opacity: 1; } /* prefers-reduced-motion: Das Kernel-Sicherheitsnetz (style.css Abschnitt 2) deaktiviert nur CSS-Animationen und -Übergänge, kein Video-Abspielen. hero-video.js lädt dann nichts; hier ist das Video zusätzlich aus. */ @media (prefers-reduced-motion: reduce) { #hero video.hero-bg { display: none; } } /* Scrim: Links-Rechts-Gradient statt gleichmäßiger Navy-Fläche über dem gesamten Foto (Screenshot-Befund) - links (Textzone) nahezu deckend Navy für sicheren AA-Kontrast, nach rechts abfallend, damit das Foto dort spürbar sichtbar bleibt. Stopp 1 (.95) liegt rechnerisch gleichwertig zu einer soliden Navy-Fläche (BAU-REGELN Abschnitt 2: „im Zweifel dunkler statt heller"). */ #hero .hero-scrim { background: linear-gradient(90deg, rgba(var(--navy-rgb), .95) 0%, rgba(var(--navy-rgb), .8) 32%, rgba(var(--navy-rgb), .58) 58%, rgba(var(--navy-rgb), .42) 100%); } /* Eyebrow hier hero-lokal aufgehellt: --ivory-62 (Kernel-Wert für volles Navy, .on-navy .eyebrow) fällt gegen den hellen Bildhintergrund unter 4.5:1 (WCAG AA). --ivory besteht überall ≥6.3:1. Die .eyebrow-mark- Umrandung erbt über currentColor mit. */ #hero .eyebrow { color: var(--ivory); } /* Korrekturrunde-Befund (SPERR, 07.09.2026): max-width:58% lief messbar über die Frau im Foto - H1-Textkante (DOM-Range) vs. Personen-Linkskante (Canvas-Warmton-Sampling im H1-Höhenband) ergab 276-306px Überlappung bei 1366/1440/1920. Ursache: object-position kann den Bildausschnitt auf diesen Seitenverhältnissen nicht verschieben (siehe Kommentar bei .hero-bg img oben) - die H1-Breite ist deshalb jetzt direkt an die tatsächlich freie Zone gebunden statt an einen Pauschalwert. 31% der Content-Innenbreite entspricht rechnerisch der frei gemessenen Zone (≈0,348 × Flächenbreite − Seiten-Padding) minus Sicherheitsabstand - prozentual, damit es bei jeder Viewportbreite automatisch mitskaliert. Nachgemessen (dieselbe Warmton-Methode): Lücke H1-Kante→Person 25px @1366, 61px @1440, 47px @1920 - durchgehend > 0. */ #hero .hero-h1 { font-size: var(--fs-hero-display); line-height: 1.03; max-width: 31%; } /* Display-Schriftgröße für die jetzt schmalere Textzone (>720px) - eigene, kleinere Skala nur hier; --fs-hero-display bleibt für Mobil (≤720px, max-width dort 100%, siehe @media max-width:720 unten) unverändert. Korrekturrunde W5 (23.09.2026, Opus-Review): die für die alte, siebenwörtige H1 kalibrierte Größe (24-66px) war für die neue, dreiwörtige H1 „Begleitung, modern vermittelt." zu klein - H1 lag bei 1440/1024/768 unter --fs-h2 (49,5 vs. 58px / 35,2 vs. 43px / 26,4 vs. 32,3px), obwohl BAU-REGELN/20-Fehler #3 verlangt, dass die H1 typografisch klar die größte Überschrift der Seite bleibt. Angehoben auf 32-76px, gemessen als größtmögliche Größe, bei der „Begleitung," (das längste Wort) noch in die 31%-Spalte passt (Spalte bei 1440 ≈404px, „Begleitung," bei 72px ≈382px). Geprüft 721/768/1024/1280/1440: H1 bleibt durchgehend größer als --fs-h2 (kleinste Reserve ~6px @768), 3 Zeilen, keine Überlappung mit der Person, Buttons bleiben im ersten Viewport. */ @media (min-width: 721px) { #hero .hero-h1 { font-size: clamp(32px, 5vw, 76px); } } /* Kurze Querformat-Viewports (Handys quer) - Innenabstand/Gap dafür bereits im Kernel (Abschnitt 22, style.css, unverändert ausreichend knapp); hier nur die hero-exklusive Display-Schriftgröße nachgeführt (überschreibt die Regel direkt oberhalb, kommt im Cascade danach). Nachgemessen (nur dieser Block, ohne die schmalere Zusatzregel unten): 812×375 (Button-Unterkante 358px) und 844×390 (370px) sauber, 3 Zeilen, keine Überlappung - 851×393 ebenfalls (373px). */ @media (min-width: 721px) and (max-height: 480px) { #hero .hero-h1 { font-size: clamp(28px, 3.4vw, 44px); } } /* Korrekturrunde-Restbefund (KERNEL-2, SPERR, 07.09.2026 abends): im Band 721-780px Breite × ≤480px Höhe klemmt der obige Schriftgrad an seiner 28px-Untergrenze (3.4vw erreicht 28px erst bei 824px), während max-width:31% dort nur noch ≈205px Innenbreite freigibt - „Begleitung, die“ passt nicht mehr in eine Zeile, die H1 reißt auf 4 Zeilen mit zwei Einzelwort-Waisen („Begleitung,“/„Ausbildung,“ je allein auf ihrer Zeile) und schiebt die CTA-Reihe unter die Falz (gemessen 740×360: Button-Unterkante 385px bei 360px Viewporthöhe). Naheliegender Fix wäre `max-width:100%` gewesen (Person „steht im breiten Ausschnitt ohnehin weit rechts“) - empirisch widerlegt: bei 100%-Breite läuft die einzeilige H1 bei 740×360 bis x≈572px und damit direkt durch Kopf/Schulter der Person (Canvas-Sample im H1-Höhenband, Bug per Screenshot bestätigt). Stattdessen die zweite, im Befund genannte Alternative: Schriftgrad in genau diesem schmalen Band weiter senken, max-width:31% bleibt unangetastet (H1 bleibt links verankert, keine Überlappungsgefahr). Nachgemessen 721/740/760/780×360: durchgehend 3 Zeilen ohne Einzelwort-Waise, Button-Unterkante 340-344px ≤ Viewporthöhe 360px. */ @media (min-width: 721px) and (max-width: 780px) and (max-height: 480px) { #hero .hero-h1 { font-size: clamp(22px, 3.2vw, 24px); } } @media (max-width: 720px) { #hero .hero-h1 { max-width: 100%; } /* Mobil läuft die H1 (max-width:100%, siehe oben) bis fast an den rechten Rand - der Desktop-Gradient fällt dort schon auf .42 ab und unterschreitet 4.5:1 (gemessen 4.06:1 bei 375px). Eigene, insgesamt dunklere Kurve nur für schmale Viewports: Text bleibt über die volle Breite sicher lesbar, das Foto ist trotzdem noch klar als Foto erkennbar (kein Flat-Navy). */ #hero .hero-scrim { background: linear-gradient(90deg, rgba(var(--navy-rgb), .95) 0%, rgba(var(--navy-rgb), .88) 45%, rgba(var(--navy-rgb), .76) 75%, rgba(var(--navy-rgb), .64) 100%); } } /* Sehr schmale Geräte (iPhone SE u. ä., 320-359px): H1 lief bei der 38px-Untergrenze auf 4 Zeilen mit zwei Einwort-Waisen („Begleitung,“ / „Ausbildung,“ allein auf ihrer Zeile) - BAU-REGELN Abschnitt 3 verbietet Einzelwort-Waisen. Eigene, engere Untergrenze nur für dieses schmale Fenster; ab 360px greift wieder --fs-hero-display (schon 3 saubere Zeilen ohne Waise). */ @media (max-width: 359px) { #hero .hero-h1 { font-size: clamp(32px, 10vw, 38px); } } /* ------------------------------------------------------------ SEKTION: Positionierung, PUNKT 1 (Nicholas, 29.09.2026) Die fünf Haken-Werte stehen untereinander, auf JEDER Breite einspaltig. Optik, Häkchen-Kreis, Trennlinien und die Ausrichtung des Kreises an der ersten Zeile liefert der Kernel-Baustein .check-list (K11). Die frühere seitenlokale 2-Spalten-Regel (.value-list ab 721px) und das svg.value-icon sind ersatzlos entfallen. Hier nur der Abstand zum Absatz darüber und der Textlink am Sektionsende. ------------------------------------------------------------ */ #positionierung .check-list { margin-top: 10px; } /* Textlink am Sektionsende (Plan a, Punkt 7 „Führung“): in der Flex-Spalte (.stack) nicht auf volle Breite ziehen */ #positionierung .positionierung-next { align-self: flex-start; margin-top: 8px; } /* Textlinks am Ende einer Sektion (Städte, Unterschied, Qualität): der Zweitweg der Sektion, Abstand zum Inhalt darüber. */ .section-next { margin-top: var(--gap-lg); } #staedte .section-next { margin-top: var(--gap-md); } /* PUNKT 5 (Nicholas, 15.09.2026): .diff-pair ist im Kernel Standard 1-spaltig (display:flex;flex-direction:column) - hier seitenspezifisch auf Grid umgestellt, weil der Kartenkopf jetzt eigenständig über beiden Karten steht (.section-head statt .two-col, siehe HTML) und die Karten selbst laut Auftrag "2 Spalten ab 721px, gleiche Höhe, gleiche Breite" sein sollen - Kernels eigenes .grid-2 schaltet erst bei 980px um, deshalb kein Rückgriff darauf. Grid-Stretch (Default) sorgt für gleiche Höhe, repeat(2,minmax(0,1fr)) für gleiche Breite. */ #unterschied .diff-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); } @media (min-width: 721px) { #unterschied .diff-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Slot 7 „Unterschied": jede .diff-card-Zeile trägt hier zusätzlich einen eigenen Zeilentitel (H3) + Fließtext statt nur eines einzeiligen Labels - Icon deshalb oben ausgerichtet statt vertikal zentriert, etwas mehr Row-Abstand für die zweizeiligen Einträge. */ #unterschied .diff-card li { align-items: flex-start; } #unterschied .diff-card li svg { margin-top: 4px; } #unterschied .diff-card li > div { display: flex; flex-direction: column; gap: 2px; } /* Korrekturrunde 02.10.2026 (Meeting Leila 01.10., A1-08): kein Zebra mehr (abwechselnd weiß/beige „erinnert mich an Excel“), alle Zeilen stehen auf dem Kartengrund. Damit die vier Zeilen nicht verschwimmen, trennt sie eine feine Linie (--line-1, wie im Kernel `.diff-card li + li`). Zeilenabstand deshalb nur noch als Zeilen-Padding, kein Gap; Zeilen ohne eigene Fläche und ohne Radius, damit die Linie gerade durchläuft. */ #unterschied .diff-card ul { gap: 0; } #unterschied .diff-card li { padding-block: 14px; border-radius: 0; } #unterschied .diff-card li + li { border-top: 1px solid var(--line-1); } /* PUNKT 6 (Nicholas, 15.09.2026) / Korrekturschleife 29.09.2026: das Icon über der H3 ist jetzt der Kernel-Baustein .icon-badge--navy (56-px-Kreis, Icon 46 %), Größe und Farben kommen komplett aus dem Kernel. Hier nur der Abstand Badge→H3 (14 px Karten-Gap plus 4 px). Die Karten heben sich per .card--lift (Kernel K8). */ #qualitaet .card .icon-badge { margin-bottom: 4px; } /* ------------------------------------------------------------ SEKTION: Qualität, Kopf mit Foto (Fix-Runde 1, Gate-B-Befund B6, Plan a.3; Fix-Runde 2, Gate-C-Befund C6, 30.09.2026) Unterschied, Qualität und FAQ waren rund 3 100 px ohne Foto. Der Kopf ist ein eigenes Raster: mobil Überschrift, darunter das Foto; ab 981 px Überschrift links, Foto rechts. Das Foto steht rechts, weil #ablauf sein Foto links trägt. Seit Fix-Runde 2 ist es Leilas Porträt im Bogenrahmen (Kernel K5, `--arch-max` am Element): karriere-shooting.jpg stand zugleich auf karriere.html. Korrekturschleife 30.09.2026 (Punkt 1): statt des Nahporträts jetzt das Sitzfoto leila-startseite.jpg (1200×1500) im Bogen `.arch--4x5` wie Academy `#zitat`. Der Bogen begleitet die Überschrift und dominiert sie nicht: Rahmen höchstens 340 px (Bild 312×390 px, samt Namenszeile rund 460 px hoch, das Nahporträt war 525 px hoch), mobil 260 px, mittig; die Media-Reveal-Klasse sitzt auf dem inneren .arch-photo, damit die Bogenlinie nicht mit abgeschnitten wird (wie ueber-uns.html). Die Kartenreihe darunter (.quality-grid) bleibt Kernel. KORREKTURRUNDE 02.10.2026 (Meeting Leila 01.10., A2-05, Skizze `_projekt/korrektur-2026-10-01/screens/A2-05_0941.jpg`): Aufbau nach Leilas Skizze. Ab 981 px ist `#qualitaet .section-inner` ein Raster mit zwei Spalten (Text | Bogenfoto) und drei Zeilen (Kopf | Karten | Textlink). `.qualitaet-intro` ist dort `display: contents`, damit Kopf und Foto direkt Rasterzellen sind. Das Foto steht rechts in Spalte 2 und läuft über die Zeilen 1 und 2 (`grid-row: 1 / span 2`), seine Oberkante liegt auf Höhe der Eyebrow (Rahmen-Padding 14 px per negativem Rand ausgeglichen). Die Karten (Zeile 2, über beide Spalten) liegen per z-index VOR dem Foto, behalten den weißen Kartengrund und bekommen einen deutlicheren Schatten, damit die Überschneidung als Tiefe lesbar ist. Die Überlappung ergibt sich aus der Rasterstruktur: die Karten beginnen unter dem Textblock, das Foto reicht daneben weiter nach unten (Messwerte im Log S). Rahmen des Bogens (vorher fest 340 px, Bogen 4:5 unverändert): 981 bis 1439 px 40 vw, 400 bis 540 px; ab 1440 px 41 vw, bis 600 px (siehe Block unten). Rechte Spalte mit `clamp()`, damit bei 1024 px der Text nicht gequetscht wird. Das Foto läuft über die Zeilen 1 und 2, die Karten über die Zeile 2: so reicht der Bogen automatisch hinter die Karten, und die Oberkante der Karten liegt bei 50 bis 63 % der Bogenhöhe (1440 px: 51 %, 1280 px: 56 %, 1024 px: 63 %). Unter 981 px: Text, Foto, Karten gestapelt; die Karten ziehen per negativem Rand um 48 px in das Foto (z-index vor dem Foto). Die Bildunterschrift steht dafür als Signatur unter dem Lead (siehe HTML), weil ein Text unter dem Bogen von den Karten verdeckt würde. */ #qualitaet .qualitaet-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); } #qualitaet .qualitaet-head { margin-bottom: 0; } #qualitaet .qualitaet-signatur { margin-top: 6px; font-weight: 500; } #qualitaet .qualitaet-figure { --arch-max: 380px; --arch-max-mobile: 260px; margin: 0 auto; width: 100%; min-width: 0; } #qualitaet .arch-photo { display: block; width: 100%; height: 100%; } /* Karten vor dem Foto: eigene Ebene über dem Bogen, weißer Grund bleibt (Kernel .card), Schatten für die Tiefe */ #qualitaet .quality-grid { position: relative; z-index: 1; margin-top: -62px; /* 48 px Überlappung mit dem Foto plus 14 px Rahmen-Padding */ } #qualitaet .quality-grid .card { box-shadow: 0 22px 48px -22px rgba(var(--navy-rgb), .38); } @media (hover: hover) and (pointer: fine) { #qualitaet .quality-grid .card:hover, #qualitaet .quality-grid .card.reveal.is-revealed:hover { box-shadow: 0 30px 56px -24px rgba(var(--navy-rgb), .46); } } /* ÄNDERUNGSRUNDE 15.10.2026 (Meeting Leila, Punkt 2): Das Foto schloss rechts genau mit der dritten Karte ab, das störte Leila. Jetzt steht es breiter und mittig über der dritten Karte und ragt links und rechts sichtbar über sie hinaus; der Bogenrahmen wandert mit. Ab 981 px ist `#qualitaet .section-inner` ein Raster aus drei gleichen Spalten mit demselben Abstand wie `.quality-grid` (gap-md). Dadurch liegt Spalte 3 exakt über Karte 3. Die Figur ist Spalte 3 plus Überstand je Seite (`--q-ueberstand`), gedeckelt, damit sie nie aus dem Seitenrand läuft (Seitenpolster minus 8 px). Die Karten liegen per z-index vor dem Foto. Der untere Bogenrand liegt entweder ganz hinter Karte 3 oder ragt deutlich darunter hervor (Messung in pruefung/runde-1015/p1_start.py). Bis 980 px bleibt der Aufbau wie vorher (Kopf, Foto mittig, Karten mit Überlappung nach oben). */ @media (min-width: 981px) { #qualitaet .section-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--gap-md); align-items: start; } #qualitaet .qualitaet-intro { display: contents; } #qualitaet .qualitaet-head { grid-column: 1 / span 2; grid-row: 1; } #qualitaet .qualitaet-head .lead { max-width: 640px; } #qualitaet .qualitaet-figure { --q-ueberstand: min(clamp(24px, 3.2vw, 56px), calc(var(--section-pad-x) - 8px)); grid-column: 3; grid-row: 1 / span 2; justify-self: center; margin-top: -14px; width: calc(100% + 2 * var(--q-ueberstand)); max-width: none; margin-inline: calc(-1 * var(--q-ueberstand)); } #qualitaet .quality-grid { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: clamp(20px, 1.8vw, 28px); gap: var(--gap-md); } #qualitaet .quality-grid .card { padding: clamp(24px, 2.2vw, 30px); } #qualitaet .section-next { grid-column: 1 / -1; grid-row: 3; justify-self: start; } } /* Ab 1440 px wäre das Foto höher als Kopf plus Karten und ragte nur wenige Pixel unter Karte 3 hervor (gemessen 16 px bei 1920 px, das wirkt wie ein Versehen). Mehr Abstand über den Karten schiebt sie tiefer, sodass der Bogenfuss ganz hinter Karte 3 liegt. */ @media (min-width: 1440px) { #qualitaet .quality-grid { margin-top: 46px; } } /* Abstand vom Textlink "Zu den häufigen Fragen" zur FAQ-Bühne: 40 bis 72 px (vorher der volle Sektionsabstand). */ #qualitaet { padding-bottom: var(--section-pad-y-sm); } /* FAQ als Sand-Bühne (Änderungsrunde 15.10.2026, Punkt 3): Reiter-Leiste auf Ivory mit feiner Kante, damit sie sich vom Sand abhebt (Kernel: Sand auf Sand). Aktive Pille bleibt weiß (Kernel), inaktive Reiter navy-70 auf Ivory. Die Akkordeon-Karten sind schon weiß mit Linie (Kernel .acc-item). */ #faq .faq-tabs { background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line-2); } /* PUNKT 8 (Nicholas, 15.09.2026): der frühere seitenspezifische Behelf hier (#footer-contact > .section-inner { padding-left/right: var(--section-pad-x) }) ist entfallen - der Kernel-Fix ist jetzt in assets/style.css selbst (.footer > .section-inner), gilt automatisch site-weit, keine Seiten- Dopplung mehr nötig. Siehe style.css Abschnitt 8 „FOOTER". */ /* FAQ-Abschluss-Zeile: Korrekturschleife 30.09.2026 (Nachtrag): Kopf und Tabs stehen jetzt in einem eigenen Raster `.two-col.faq-grid`, die Abschlusszeile liegt darunter außerhalb (Muster karriere.html). Damit endet der mitklebende Kopf mit den Antworten und rutscht nicht mehr in die Zeile „Deine Frage war nicht dabei?“. Die frühere Regel (grid-column 1 / -1 und herausgerechneter row-gap) entfällt, es gilt der Kernel-Abstand von .section-cta. */ /* Fix-Runde 1 (Gate-B-Befund B13): die Kopfspalte (Überschrift und Lead) klebt ab 981 px beim Lesen der Antworten mit, wie `.faq-head` auf karriere.html. Darunter ist .two-col einspaltig, dort bleibt der Kopf im Fluss. */ @media (min-width: 981px) { #faq .faq-head { position: sticky; top: calc(var(--nav-h) + 24px); } } /* ------------------------------------------------------------ SEKTION: Anlässe - horizontales Akkordion (nur Startseite) Hook [data-accordion="services"], Mechanik in assets/script.js Abschnitt 14. Muster: 5 Kacheln (.anlass-item) in einer Flex-Reihe. Default-Breite jeder Kachel kommt aus `width` (Rail-Wert unten) - script.js überschreibt das inline mit einem exakt gemessenen px-Wert für die animierte aktive Breite, aber schon ohne JS ergibt `flex-grow` auf `.is-active` eine funktionierende Breitenverteilung (CSS-Fallback, siehe Kommentar dort). Rail = vertikaler Nummer/Name-Text (writing-mode), aktives Panel = Bild + Text als absolute Vollflächen-Overlays, die per opacity ein-/ausgeblendet werden. K3 (Korrekturschleife 29.09.2026): KEIN Panel scrollt mehr. Die Panelhöhe folgt dem längsten Inhalt (script.js misst bei fester Inhaltsbreite --anlass-open-w und setzt --anlass-need; die Höhe ist max(--anlass-min-h, --anlass-need), --anlass-min-h ist der frühere feste Wert 520/620/660 px und zugleich der Fallback ohne JS). Panels sind overflow:hidden, keine Tab-Stopps, inaktive Panels zusätzlich visibility:hidden (nur unter .is-enhanced, das setzt script.js). Bild bewusst RECHTS (Text/Nummer links) - konsistent mit dem Hero-Muster dieser Seite (Text linksbündig, Foto sichtbar rechts). Bis 1199px gestapelt (Fix-Runde 1, Gate B B4; vorher bis 900px): Rails werden zu kompakten horizontalen Kopfzeilen, das Panel klappt darunter per gemessener max-height auf. Grund: bei 901 bis 1199px war die aktive Kachel nur 526px (1024) breit, Text 267px, Bild 170px, Silbentrennketten; die gestapelte Fassung nutzt die volle Breite (721 bis 1199px: Text links, Bild rechts, bis 720px: Bild über dem Text). Grundzustand vor JS-Start: die im Markup aktive Kachel ist offen; der vollständige No-JS-Fallback (alle fünf Panels gestapelt sichtbar) liegt als eigener noscript-Block im von index.html. */ /* --anlass-rail-w ist die EINZIGE Quelle für die Breite der schmalen Rails: CSS nutzt sie als Grundbreite, script.js liest sie per getComputedStyle (kein DOM-Messen an Elementen, deren width gerade animiert - Fehler vom 15.09.2026, bei dem alle Kacheln auf „aktiv"-Breite sprangen). */ #anlaesse .anlass-accordion { --anlass-rail-w: 80px; --anlass-min-h: 520px; display: flex; gap: var(--gap-sm); padding: 10px; height: max(var(--anlass-min-h), var(--anlass-need, 0px)); } #anlaesse .anlass-item { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-card-alt); min-width: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: var(--anlass-rail-w); transition: width var(--dur-slow) var(--ease-swift), background-color var(--dur-fast) ease; } /* flex-grow:1 auf der aktiven Kachel ist der Grundzustand VOR dem JS-Start (kein Layout-Sprung beim ersten Paint): der Flexbox-Algorithmus verteilt die Restbreite allein auf die eine Kachel mit Wachstumsfaktor - script.js setzt dann eine exakte px-Breite (siehe oben), die als flex-basis greift und denselben Effekt erzeugt, nur präzise animierbar. Der eigentliche No-JS-Fallback ist der noscript-Block im von index.html. */ #anlaesse .anlass-item.is-active { flex-grow: 1; flex-shrink: 1; background: var(--surface-card); } #anlaesse .anlass-rail { position: absolute; inset: 0; text-align: left; } #anlaesse .anlass-rail-number { writing-mode: vertical-rl; position: absolute; bottom: 26px; left: 30px; font-size: var(--fs-caption); color: var(--warm-grey-ink); font-variant-numeric: tabular-nums; transition: opacity var(--dur-fast) ease; } #anlaesse .anlass-rail-name { writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; top: 26px; right: 30px; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3-sm); letter-spacing: var(--ls-head); color: var(--navy); transition: opacity var(--dur-fast) ease; } #anlaesse .anlass-item.is-active .anlass-rail-number, #anlaesse .anlass-item.is-active .anlass-rail-name { opacity: 0; pointer-events: none; } /* K3: Das Panel scrollt NIE (overflow:hidden, kein overscroll-behavior, kein tabindex): die Höhe des Akkordeons passt sich dem längsten Inhalt an (script.js). Es clippt nur die feste Inhaltsbreite (`.anlass-panel-inner`, siehe unten) an der animierten Kachelkante - der Inhalt wird wie ein Vorhang freigelegt, bricht beim Wechsel aber nicht um. Inaktive Panels sind opacity 0 UND (sobald JS läuft, .is-enhanced) visibility:hidden mit verzögertem Umschalten (sichtbar bleibt es beim Ausblenden bis die Opazität 0 erreicht hat), damit sie weder treffbar noch fokussierbar sind. Ohne JS greift diese Regel nicht, der noscript-Block im von index.html zeigt alle Panels gestapelt. */ #anlaesse .anlass-panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity var(--dur-med) var(--ease-swift); } #anlaesse .anlass-item.is-active .anlass-panel { opacity: 1; pointer-events: auto; transition-delay: .2s; } #anlaesse .anlass-accordion.is-enhanced .anlass-panel { visibility: hidden; transition: opacity var(--dur-med) var(--ease-swift), visibility 0s linear var(--dur-med); } #anlaesse .anlass-accordion.is-enhanced .anlass-item.is-active .anlass-panel { visibility: visible; transition: opacity var(--dur-med) var(--ease-swift) .2s, visibility 0s linear 0s; } /* Das Kernel-Sicherheitsnetz (style.css Abschnitt 2) kürzt nur Dauern, keine Verzögerungen - ohne diese Regel bliebe bei reduzierter Bewegung 200 ms lang eine leere Kachel stehen. */ @media (prefers-reduced-motion: reduce) { #anlaesse .anlass-panel, #anlaesse .anlass-accordion.is-enhanced .anlass-panel, #anlaesse .anlass-accordion.is-enhanced .anlass-item.is-active .anlass-panel, #anlaesse .anlass-item.is-active .anlass-panel { transition-delay: 0s; } } /* Bild und Text stehen über margin-block:auto mittig, solange Platz ist. Die Panelhöhe passt sich seit K3 dem längsten Inhalt an (script.js), der Inhalt kann also nie höher werden als sein Panel. hyphens:auto wie bei .acc-panel-inner im Kernel (BAU-REGELN Abschnitt 5: Silbentrennung nur in Karteninhalten). Ab 1200 px hat der Inhalt die FESTE Breite der aktiven Kachel (--anlass-open-w, von script.js gesetzt; ohne JS 100 %). */ #anlaesse .anlass-panel-inner { display: flex; flex-direction: row; align-items: stretch; gap: var(--gap-lg); width: 100%; min-height: 100%; padding: clamp(22px, 2.6vw, 32px); hyphens: auto; } @media (min-width: 1200px) { #anlaesse .anlass-panel-inner { width: var(--anlass-open-w, 100%); } } #anlaesse .anlass-media { flex: 0 0 42%; min-width: 0; aspect-ratio: 1 / 1; order: 2; margin-block: auto; border-radius: var(--radius-media); overflow: hidden; } #anlaesse .anlass-media img { width: 100%; height: 100%; object-fit: cover; display: block; } #anlaesse .anlass-body { flex: 1 1 auto; min-width: 0; order: 1; margin-block: auto; } /* Tastaturfokus auf dem Desktop: Der Rail-Button füllt die Kachel (inset:0), ein Außen-Ring am Button würde vom overflow:hidden der Kachel geklippt, und auf der aktiven Kachel liegt zudem das Panel über dem Rail - deshalb zeichnet die KACHEL den Ring (für alle fünf), der Button-Ring des Kernels wird hier abgeschaltet (sonst doppelter Ring auf inaktiven Kacheln). Browser ohne :has() bekommen als Ersatz den Innen-Ring am Button. Nur ≥1200px - im gestapelten Layout gilt der Innen-Ring aus dem Mobil-Block. */ @media (min-width: 1200px) { #anlaesse .anlass-item:has(> .anlass-rail:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; } #anlaesse .anlass-rail:focus-visible { outline: none; } @supports not (selector(:has(a))) { #anlaesse .anlass-rail:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; } } } /* Die früheren Sonderhöhen und das schmalere Bild für 901 bis 1199px (Panel 620/660px, Bild 36 %) entfallen seit Fix-Runde 1 (B4): dort gilt jetzt die gestapelte Fassung. */ /* Plus-Zeichen (Kernel .acc-sign) nur in der gestapelten Variante als Aufklapp-Hinweis - auf dem Desktop tragen die vertikalen Rails ihn nicht. */ #anlaesse .anlass-rail-sign { display: none; } #anlaesse .anlass-number { font-size: var(--fs-caption); color: var(--warm-grey-ink); margin-bottom: 12px; font-variant-numeric: tabular-nums; } #anlaesse .anlass-body h3 { margin-bottom: 14px; } #anlaesse .anlass-body .card-desc { margin-bottom: 24px; } #anlaesse .anlass-offer-label { font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--warm-grey-ink); margin-bottom: 14px; } #anlaesse .anlass-offer-list { display: flex; flex-direction: column; gap: 12px; } /* Icon an der ERSTEN Textzeile ausgerichtet (wie .value-list, Nicholas-Punkt 2 vom 15.09.2026) - vertikal zentriert rutschte der Ring bei zweizeiligen Punkten zwischen die Zeilen. */ #anlaesse .anlass-offer-list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-body-sm); color: var(--navy); } #anlaesse .anlass-offer-list li .eyebrow-mark { flex-shrink: 0; margin-top: 2px; } @media (hover: hover) and (pointer: fine) { #anlaesse .anlass-item:not(.is-active):hover { background: var(--ivory-darker); } } @media (max-width: 1199px) { #anlaesse .anlass-accordion { flex-direction: column; height: auto; padding: 0; gap: var(--gap-sm); } #anlaesse .anlass-item { width: 100%; flex-grow: 0; flex-shrink: 0; transition: background-color var(--dur-fast) ease; } #anlaesse .anlass-rail { position: static; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 14px 20px; } #anlaesse .anlass-rail-number, #anlaesse .anlass-rail-name { writing-mode: horizontal-tb; transform: none; position: static; } #anlaesse .anlass-item.is-active .anlass-rail-number, #anlaesse .anlass-item.is-active .anlass-rail-name { opacity: 1; pointer-events: auto; } #anlaesse .anlass-rail-number { width: 26px; flex-shrink: 0; } #anlaesse .anlass-rail-name { flex: 1; min-width: 0; } #anlaesse .anlass-panel { position: static; opacity: 1; pointer-events: auto; display: block; max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-swift); } /* Grundzustand vor JS-Start: die laut Markup aktive Kachel zeigt ihren Inhalt sofort vollständig. script.js überschreibt max-height inline mit einem gemessenen px-Wert (identischer visueller Zustand), sobald es läuft - nur dadurch lässt sich ein SPÄTERER Kachel-Wechsel weich animieren. overflow bleibt hidden, sonst läge der Inhalt während der max-height- Animation in voller Höhe über dem Sektions-CTA. Vollständiger No-JS- Fallback: noscript-Block im von index.html. */ #anlaesse .anlass-item.is-active .anlass-panel { max-height: none; } /* Gestapelt animiert die Höhe (max-height), nicht die Opazität: die visibility-Umschaltung der Desktop-Regeln oben hängt sich an dieselbe Dauer (zuklappend erst nach der Animation, aufklappend sofort). */ #anlaesse .anlass-accordion.is-enhanced .anlass-panel { transition: max-height var(--dur-slow) var(--ease-swift), visibility 0s linear var(--dur-slow); } #anlaesse .anlass-accordion.is-enhanced .anlass-item.is-active .anlass-panel { transition: max-height var(--dur-slow) var(--ease-swift), visibility 0s linear 0s; } #anlaesse .anlass-panel-inner { flex-direction: column; align-items: stretch; height: auto; gap: var(--gap-md); padding: 4px clamp(18px, 4vw, 26px) 24px; } #anlaesse .anlass-media { flex: 0 0 auto; width: 100%; order: 1; margin-block: 0; } #anlaesse .anlass-body { order: 2; margin-block: 0; } /* Gestapelt steht die Nummer schon in der Kopfzeile - im Panel wäre sie doppelt. */ #anlaesse .anlass-number { display: none; } #anlaesse .anlass-rail-sign { display: block; margin-left: auto; } #anlaesse .anlass-item.is-active .anlass-rail-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } /* Gestapelt liegt der Rail-Button innerhalb der overflow:hidden-Kachel - der Kernel-Fokusring (outline-offset 3px) würde abgeschnitten, deshalb für ALLE fünf Rails (auch das geöffnete) ein Innen-Ring. Die Desktop-Regeln oben sind auf ≥1200px begrenzt und funken hier nicht dazwischen. */ #anlaesse .anlass-rail:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; } } /* Fix-Runde 1 (B4): 721 bis 1199px ist die gestapelte Kachel 650 bis 1100px breit. Das Bild würde hier als Quadrat in voller Breite über dem Text stehen (bis 1100px hoch), deshalb Text links und Bild rechts wie auf dem Desktop, das Bild 40 % breit. Unter 721px bleibt es bei Bild über Text (volle Breite, wie gehabt). */ @media (min-width: 721px) and (max-width: 1199px) { #anlaesse .anlass-panel-inner { flex-direction: row; align-items: center; gap: var(--gap-lg); padding: 8px 32px 32px; hyphens: manual; /* Textspalte 350 bis 570 px: keine Trennungen („Rah-men“) nötig */ } #anlaesse .anlass-media { flex: 0 0 40%; width: auto; order: 2; margin-block: 0; } #anlaesse .anlass-body { flex: 1 1 auto; order: 1; } } /* ------------------------------------------------------------ SEKTION: Anlässe, Abschluss-Zeile (Fix-Runde 1, Gate-B-Befund B23) Steht bewusst außerhalb des Blocks „Anlässe“ oben. Mobil (Sektions-CTAs sonst 350 px breit) steckten die beiden Buttons in einem .row, das in der Flex-Spalte des .section-cta nur so breit wurde wie der breitere Button (307 px). Volle Breite wie alle anderen mobilen Sektions-Buttons. ------------------------------------------------------------ */ @media (max-width: 560px) { #anlaesse .section-cta .row { width: 100%; } } /* Fable-Fixes nach Opus-Review r2 */ /* CTA auf gemeinsamer Fußlinie (20-Fehler #19) - #linien entfernt (Punkt 3, 15.09.2026, Sektion ersatzlos entfernt, siehe HTML-Kommentar an ihrer alten Stelle in index.html). */ #wege .card > .btn, #wege .card > .row { margin-top: auto; } /* ------------------------------------------------------------ SEKTION: Darlinge-Teaser (Sand-Bühne), Punkt 3 (29.09.2026) Die Sedcards sind Kernel-Komponenten: rund (--radius-card, 22 px), weiß, Hebung und Bildzoom beim Hover kommen aus dem Kernel (K1/K8), die Bühne aus .stage--sand. Seitenlokal bleibt nur das mobile Raster. Der frühere Behelf für den Foto-Platzhalter (.ph in Sand-Bühne: Ivory statt Sand, Kontur, AA-Textfarben) ist entfallen: das regelt jetzt der Kernel (style.css Abschnitt 22b, `.stage--sand .ph`), gemessen identisch. ------------------------------------------------------------ */ @media (max-width: 560px) { /* Darlinge-Teaser bleibt 2-spaltig, 4 leere Platzhalter untereinander kosten den Lesefluss */ #darlings .sedcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* In den schmalen 2-Spalten-Karten (rund 165 px) lief der mehrzeilige Motivtext (.ph::after, am unteren Rand) in das zentrierte Maß (.ph::before) hinein. Das Maß „800×1200“ bleibt sichtbar (BAU-REGELN Abschnitt 6), der Motivtext entfällt hier mobil, er steht weiter im data-motiv des HTML. */ #darlings .sedcard-media .ph::after { display: none; } } /* Fix-Runde 1 (Gate-B-Befund B7): der Kernel stellt .sedcard-grid von 981 bis 1180 px auf drei Spalten, die vierte der vier Teaser-Karten stand allein in Reihe 2 (Waise). Hier vier Spalten (Karten rund 200 bis 215 px), der Motivtext des Platzhalters entfällt wie mobil (das Maß „800×1200“ bleibt sichtbar), das Karten-Polster wird etwas enger. Ab 1181 px hat der Kernel schon vier Spalten, bis 980 px zwei. */ @media (min-width: 981px) and (max-width: 1180px) { #darlings .sedcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #darlings .sedcard-media .ph::after { display: none; } #darlings .sedcard-body { padding: 14px 14px 16px; } } /* ------------------------------------------------------------ SEKTION: Städte - F17-Neuaufbau (Feedbackrunde 23.09.2026) 4 statische Hauptstadt-Karten (city-grid, Kernel-Komponente .city-card wiederverwendet, bislang nur für die Marquee gebaut) + Text-Laufband darunter (Variante .marquee--text). Punkt 4 (29.09.2026): die Karten sind rund wie alle Karten, der Radius (--radius-card, 22 px) kommt aus dem Kernel, der frühere eckige Seiten-Override ist gelöscht. Das Bild in der Karte behält Radius 0, die Karte clippt per overflow:hidden. ------------------------------------------------------------ */ #staedte .city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); } @media (max-width: 980px) { /* F17-Vorgabe "Mobil: Karten 2×2" - gilt hier schon ab Tablet, die Karten sind mit Bild+Zeile zu inhaltsreich für 4 sehr schmale Spalten. */ #staedte .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* F2 (Review R1-D, Wichtig 1): Das Raster folgt der Kartenzahl. Live stehen nur die Städte mit Foto als Karte (Hamburg, Rostock), Berlin und Lüneburg laufen im Text-Laufband. Ohne Sonderregel stünden 2 Karten links im 4er-Raster und die rechte Hälfte bliebe leer. Reine CSS-Zählung per :has(), damit jede Kartenzahl (1 bis 4) ohne PHP-Klasse sauber steht. 4 Karten: unverändert (4 Spalten ab 981 px, 2×2 darunter). 1 Karte: schmal und mittig. 2 Karten: zwei Spalten, mittig, Kartenbreite wie im 4er-Raster auf rund das Doppelte begrenzt (sonst werden die Hochformat-Bilder riesig). 3 Karten: drei Spalten über die volle Breite, mobil die dritte mittig unter den zwei ersten. */ #staedte .city-grid:empty { display: none; } #staedte .city-grid:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); max-width: min(100%, 420px); margin-inline: auto; } #staedte .city-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(100%, 860px); margin-inline: auto; } #staedte .city-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { #staedte .city-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #staedte .city-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :last-child { grid-column: 1 / -1; width: calc(50% - var(--gap-md) / 2); justify-self: center; } } @media (max-width: 420px) { /* 1 Karte auf dem Handy: volle Breite statt 420-px-Deckel */ #staedte .city-grid:not(:has(> :nth-child(2))) { max-width: 100%; } } /* .city-card ist im Kernel für die Marquee gebaut (feste Breite 260px) - im statischen Raster füllt die Karte stattdessen ihre Grid-Spalte. */ #staedte .city-grid .city-card { width: 100%; } /* W3-Fix (Opus-Review 23.09.2026): Kernel .city-card img { height:100% } zieht die Bildhöhe auf die volle (flex-shrink-abhängige) Kartenhöhe, die je nach Textzeilen- zahl im Label/Teaser variiert (Rostock 2-zeilig vs. 1-zeilig bei den anderen drei) - dadurch wurden die Bildflächen unterschiedlich hoch und die Labels standen versetzt (Rostock 25px tiefer bei 1440). Höhe stattdessen aus dem Bild-Seitenverhältnis (Kernel-aspect-ratio 620/760) ableiten, nicht aus der Restkartenhöhe - dann sind alle vier Bildflächen bei gleicher Spaltenbreite gleich hoch, Labels fluchten. */ #staedte .city-grid .city-card img { height: auto; flex: none; } /* min-height als Sicherheitsnetz: bei 2 Spalten auf sehr schmalen Screens (375px) wird die Karte laut aspect-ratio 620/760 zu niedrig, dann überlappt der zentrierte Maß-Text (.ph::before) mit dem am unteren Rand verankerten Motiv-Text (.ph::after, 4 Zeilen). Ab ~560px greift die aspect-ratio ohnehin schon höher als 250px (kein Effekt mehr). Nachtrag W3 (23.09.2026): dasselbe Sicherheitsnetz jetzt auch auf die Foto-Karten (Hamburg/Rostock), sonst floort nur .ph auf 250px und die Foto-Karten bleiben bei ihrer kleineren aspect-ratio-Höhe (gemessen 375px: Platzhalter 250px vs. Foto 193px, derselbe Versatz-Fehler wie vor dem Fix, nur zwischen Foto- statt Text-Karten). */ #staedte .city-card .ph, #staedte .city-grid .city-card img { border-radius: 0; min-height: 250px; } /* K6/Kontrast-Fix (Opus-Review 23.09.2026): Kernel .ph--dark::after (Motivtext) liegt hier auf der Navy-Kartenfläche (.city-card background:navy) nur bei 3,98:1 - unter AA 4,5:1. Nur an dieser Stelle (Berlin-/Lüneburg-Platzhalter) auf --ivory-65 angehoben (wie ::before, dort bereits 5,62:1); .ph--dark bleibt seitenübergreifend Kernel-Sache, hier nur ein index.css-lokaler Override, keine Kernel-Änderung. */ #staedte .ph--dark::after { color: var(--ivory-65); } #staedte .city-card-line { padding: 0 18px 18px; margin-top: -8px; font-size: var(--fs-body-sm); color: var(--ivory-82); } /* Text-Laufband: der Kernel bringt .marquee--text inzwischen selbst mit (style.css Abschnitt 15, als ruhige Textzeile: width:auto/flex-direction:row/border:none/ ::after als EINZIGER Trenner zwischen den Einträgen) - hier nur noch die Abweichungen von der Kernel-Variante, keine Wiederholung der bereits identischen Werte mehr (Korrekturrunde W2, Opus-Review 23.09.2026). W1-Fix: Abstand zur Kartenreihe folgt jetzt dem Sektions-Rhythmus (--gap-lg) statt 0px; K1-Fix: padding-left:0, weil das Laufband jetzt in einem eigenen .section-inner steckt (siehe index.html) und dort mit dem Karten-Raster fluchtet, statt wie zuvor randlos mit eigenem Kernel-padding-left zu laufen (max. 1320px statt Versatz zum Raster auf sehr breiten Screens). */ #staedte .marquee-wrap { margin-top: var(--gap-lg); padding-left: 0; } /* R2-1-01-Fix (Runde 2, Opus-Review 23.09.2026, wichtig): der eigene border-right dieser Regel plus der neue Kernel-::after-Trenner (style.css, seit der Kernel-Neufassung von .marquee--text) erzeugten zusammen ZWEI Trennstriche je Eintrag mit ungleichen Abständen - Regression des ursprünglichen W2-Fixes. Eigener Rahmen komplett entfernt, der Kernel-::after bleibt der einzige Trenner. Der Kernel setzt inzwischen selbst `gap:0` auf `.marquee--text .city-card` (Global-Fix parallel zu diesem, R2-1-01 Kernel-Seite) - hier deshalb keine Wiederholung mehr, nur noch die seitenspezifische, responsive Abstandsbreite (statt des Kernel-Fixwerts --gap-md) zwischen Eintrag und Trenner UND zwischen Trenner und nächstem Eintrag (::after margin-left + Track-gap, symmetrisch). Nachgemessen (live, 1440px): je Eintrag genau ein Strich, Abstände beidseitig 34/34px; 1024px 26,62/26,62px; 390px 20/20px. */ #staedte .marquee-wrap.marquee--text .city-card::after { margin-left: clamp(20px, 2.6vw, 34px); } #staedte .marquee-wrap.marquee--text .marquee-track { gap: clamp(20px, 2.6vw, 34px); } #staedte .marquee-wrap.marquee--text .city-card .label { gap: 10px; font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h3-sm); color: var(--navy); white-space: nowrap; } #staedte .marquee-wrap.marquee--text .city-card .label svg { color: var(--warm-grey-ink); width: 15px; height: 15px; } /* R2-1-04-Fix (Runde 2, klein): bei "Bewegung reduzieren" blendet der Kernel das Laufband aus und zeigt stattdessen die Quellliste (.marquee-source) - die Liste steht hier in einem EIGENEN .section-inner statt als Nachfahre von .marquee--text (siehe HTML-Kommentar bei der Quellliste), der Kernel-Abstand W1 (--gap-lg, oben auf .marquee-wrap) greift für sie deshalb nicht automatisch. Seitenlokal nachgeführt, damit die Liste denselben Abstand zur Kartenreihe hält wie das animierte Laufband. */ @media (prefers-reduced-motion: reduce) { #staedte [data-marquee-source] { margin-top: var(--gap-lg); } } /* ------------------------------------------------------------ SEKTION: Concierge-Teaser - Navy-Bühne mit Bildkarten (29.09.2026) Bühne (.stage--navy + .on-navy, Ivory-Kreisbögen) und Bildkarte (.media-card--landscape, 3:2, Media-Reveal, Hebung, Bildzoom) sind Kernel-Bausteine. Die zwei Karten bleiben WEISS auf Navy. Den Oberflächen- Reset für helle Karten in Navy-Flächen (Kartentext, Textlink, Buttons, Fokusring) liefert seit dem Kernel-Nachtrag 29.09.2026 der Kernel (style.css Abschnitt 22g); die früheren Seitenregeln `#concierge .media-card .card-desc` und `… :focus-visible` sowie die Textfarbe des Karten-Links sind entfallen (gemessen identisch). Kontraste (rechnerisch, WCAG-Formel): Navy auf Weiß 15,4:1, --navy-70 auf Weiß 5,9:1, --navy-ink-2 auf Weiß 5,1:1. Das Label „Die Basis“ / „Die Premium-Variante“ ist ein Event-Tag (Kernel .tag--event, Warm Grey markiert die Event-Linie). ------------------------------------------------------------ */ /* Kurze Kartentexte in breiten Karten ohne automatische Silbentrennung („reser-vieren“, „ein-fach“ am Zeilenende wirken unruhig); mobil bleibt die Kernel-Trennung, dort sind die Zeilen schmal. */ @media (min-width: 721px) { #concierge .media-card .card-desc { hyphens: manual; } } /* Der zweite Weg der Karte (Textlink) steht am Kartenfuß: beide Karten enden auf einer Linie, auch wenn der Text unterschiedlich lang ist. */ #concierge .media-card-link { margin-top: auto; align-self: flex-start; } /* ------------------------------------------------------------ SEKTION: Ablauf - Bild links, Kopf und Schritte rechts (29.09.2026) Grid-Areas statt .two-col: mobil Kopf, Bild, Schritte untereinander; ab 981px steht das Bild links über die volle Höhe von Kopf und Schritten (das Bild ist absolut positioniert, seine Höhe kommt aus dem Raster, nicht aus dem Bild). Das Bild ist ein Bildcontainer mit Media-Reveal (Kernel K7), Radius --radius-media. ------------------------------------------------------------ */ #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: 3 / 2; background: var(--surface-card-alt); } /* Fix-Runde 2 (Gate C, C3): Bild ist events-anlass-reise.jpg (4:5). Gesicht bei x 55 bis 78 %, y 17 bis 35 %, Haaransatz bei y 9 %. 62 % 14 % hält das Gesicht auf allen Breiten ganz im Bild (gemessen 1440 bis 390: Gesicht innen, Haaransatz sichtbar, nur windgewehte Haare rechts laufen aus dem Rahmen). */ #ablauf .ablauf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 14%; } #ablauf .ablauf-steps { grid-area: steps; display: flex; flex-direction: column; gap: var(--gap-lg); min-width: 0; } @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-head { align-self: start; } #ablauf .ablauf-steps { align-self: start; } } /* ------------------------------------------------------------ SEKTION: Unterschied - F21 (Feedbackrunde 23.09.2026), Sand-Bühne seit Korrekturschleife 29.09.2026 Beide Karten haben dieselbe Flächenfarbe (kein Navy/Ivory-Wechsel). Seit der Sand-Bühne (Kernel .stage--sand, Fläche --ivory-dark) sind sie WEISS, sonst stünde Sand auf Sand. Für die „Ohne“-Karte liefert das der Kernel (style.css Abschnitt 22b: `.stage--sand .diff-card.without` weiß mit Linie, Zebra-Zeilen Ivory), die frühere Seitenregel dafür ist entfallen (gemessen identisch). Hier bleibt die „Mit“-Karte, die im Kernel Navy ist und auf dieser Seite bewusst ebenfalls weiß steht. Der Unterschied kommt über Icon (Minus/ Haken im Kartenkopf, Kernel-Klasse .card-icon-ring), Überschrift und eine Navy-Akzentlinie auf der "Mit Oh Darling"-Karte (box-shadow inset statt Flächenfüll). Kontrast (rechnerisch, WCAG-Formel): Navy auf Weiß 15,4:1, Navy auf Ivory 13,6:1, beide deutlich über AA. Die Hebung beim Hover kommt aus .card--lift (Kernel K8); weil die Akzentlinie ein box-shadow ist, wird sie im Hover-Zustand der "Mit"-Karte mit dem Kernel-Schatten kombiniert. Korrekturrunde 02.10.2026 (Meeting Leila 01.10., A1-06 bis A1-08): „Mit Oh Darling“ steht jetzt links (HTML-Reihenfolge getauscht), „Auf eigene Faust“ rechts und zurückgenommen (opacity .78, Hover zurück auf 1). Das Zebra der „Mit“-Karte ist entfallen (die Seitenregel `li:nth-child(even)` ist gelöscht, der Kernel hat seine Zebra-Regeln ebenfalls entfernt), die Zeilen trennt eine feine Linie (siehe Block „Slot 7“ oben). ------------------------------------------------------------ */ #unterschied .diff-card-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px 10px; } #unterschied .diff-card-head .h3 { padding: 0; } #unterschied .diff-card.with { background: var(--surface-card); color: var(--navy); border: 1px solid var(--line-1); } #unterschied .diff-card.with { box-shadow: inset 0 3px 0 0 var(--navy), 0 0 0 0 transparent; } #unterschied .diff-card.with li svg { color: var(--navy); } #unterschied .diff-card.with .card-icon-ring { background: var(--navy); border-color: var(--navy); color: var(--ivory); } /* „Auf eigene Faust“ (rechts) wirkt dezent zurückgenommen (A1-07, Nicholas: „ein bisschen weniger Deckkraft“), die „Mit“-Karte bleibt voll. Wert .78: Navy-Text bleibt über AA (Messwerte im Log S). Opacity steht in der Transition des Grundelements, damit der Hover-Wechsel weich läuft. */ #unterschied .diff-card.without { opacity: .78; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); } @media (hover: hover) and (pointer: fine) { #unterschied .diff-card.with:hover { box-shadow: inset 0 3px 0 0 var(--navy), var(--shadow-soft); } #unterschied .diff-card.without:hover { opacity: 1; } } /* ------------------------------------------------------------ SEKTION: Schluss-CTA (ein Weg für Gäste) Launch 13.10.2026: Die Spalte „Darling werden“ entfällt, es bleibt eine Karte (Anfrage plus E-Mail) mit dem Abendfoto daneben. Ab 981px zweispaltig (Karte | Bild), darunter gestapelt. .grid-2 bleibt als Basis-Klasse im Markup (display:grid + Gap-Token), hier nur die Spaltenzahl überschrieben. Ursprung: F28 (Feedbackrunde 23.09.2026). ------------------------------------------------------------ */ #wege .wege-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 981px) { #wege .wege-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; } } #wege .wege-media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 9 / 10; } #wege .wege-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* S1-Fix (SPERR, Opus-Review 23.09.2026): aspect-ratio:9/10 gewinnt im 3-Spalten-Grid gegen align-items:stretch (CSS-Spezifikation: eine transferred size aus aspect-ratio + definiter Spaltenbreite schlägt stretch) - die berechnete Breite folgt dann dem Seitenverhältnis statt der Spalte und überlappt die rechte Karte (60-70px bei 981/1024, ungleiche Lücken bei 1280). Ab 981px das Seitenverhältnis aufheben, Höhe kommt jetzt aus der Zeile (stretch), Breite aus der Spalte; object-fit:cover bleibt. Gemessen 981/1024/1280/1440: Bildbreite = mittlere Spaltenbreite, keine Überlappung, beide Lücken gleich. */ @media (min-width: 981px) { #wege .wege-media { aspect-ratio: auto; min-width: 0; } } /* K4-Fix: unter 981px (gestapeltes Layout) füllte das 9:10-Hochformat bei voller Spaltenbreite fast eine ganze Bildschirmhöhe (768: 691×768px) - eigenes Querformat nur im gestapelten Zustand, Bildausschnitt so gewählt, dass Frau und Glas (Vorgabe J) im Ausschnitt bleiben. */ @media (max-width: 980px) { #wege .wege-media { aspect-ratio: 3 / 2; } #wege .wege-media img { object-position: 45% 40%; } } /* K3-Fix: der einzelne .btn der rechten Karte (Flex-Column-Default: align-items stretch) stand bislang auf voller Kartenbreite (364px @1440), während die beiden .btn in .row der linken Karte (row: align-items:center) nur ihre Inhaltsbreite behielten (173/184px) - sichtbar ungleiche Kanten. Einheitlich volle Breite: links stehen die zwei Buttons dann untereinander, rechts bleibt der eine Button wie gehabt volle Breite, beide Karten enden auf derselben Kante. */ #wege .card .btn { width: 100%; } /* Ruhiger Zweitweg unter den Buttons (Launch 13.10.2026): Textlink zur Bewerbung. */ #wege .wege-zweitweg { margin-top: var(--gap-sm); } /* ============================================================ 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. Poster und Video liegen im selben Rasterfeld (Video über Poster) im Fluss über .hero-content, volle Breite der Fläche, Seitenverhältnis 1 / 1, object-fit: cover, ohne Scrim und ohne Verlauf. Der Text steht darunter auf Navy. Seitenverhältnis 1 / 1 statt 4 / 5 (Plan 15.2): Bei 4 / 5 lag der SSIM der Mobilfassung im Handy-Ausschnitt bei 0,948 bis 0,954 (unter 0,95), bei 1 / 1 bei 0,953 bis 0,958, Messwerte im Log. Bildausschnitt 50 % 40 %: Das Gesicht der Frau liegt bei 47 bis 60 % der Bildbreite, im Hochformat- Ausschnitt (45 % der Breite sichtbar) bleibt es mit Rand ganz im Bild. Unter 375 px weiter 46 %. 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 video.hero-bg, #hero .hero-bg--poster { position: relative; inset: auto; z-index: 3; grid-column: 1; grid-row: 1; width: 100%; height: auto; margin: 0; aspect-ratio: 1 / 1; } #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); } }