/* Company OS Homepage V9 — Komposition. Farb-, Material- und Statusrollen kommen aus ../design system/showcase-v2/runtime/showcase-tokens.css. Hier stehen nur Rhythmus, Typografie und Sectionformen. Grundsatz: neun Momente, neun unterschiedliche Formen. Die Pill-/Headline- Logik aus der Decode-IT-Markensprache bleibt erhalten, wird aber nicht zur Schablone. Nicht jedes Product Object bekommt eine Karte. */ *, *::before, *::after { box-sizing: border-box; } :root { /* Zwei Breitenklassen, eine gemeinsame Aussenhuelle. Text bleibt editorial begrenzt — nicht durch einen schmalen Container, sondern durch Zeilenlaengen in ch. Das Produkt bekommt denselben Rahmen mit deutlich kleinerem Rand und damit fast die volle Viewportbreite. Weil beide dieselbe Huelle teilen, bleiben Headline und Buehne auf jeder Aufloesung aneinander ausgerichtet. */ --shell: 1720px; --measure: 60ch; --gutter: clamp(20px, 3vw, 52px); /* Content */ --stage-gutter: clamp(14px, 1.4vw, 26px); /* Product */ --gap-s: clamp(28px, 3.4vh, 48px); --gap-m: clamp(44px, 5.4vh, 78px); --gap-l: clamp(56px, 7vh, 100px); --t-display: clamp(3rem, 8.4vw, 7.2rem); --t-h2: clamp(1.6rem, 2.6vw, 2.4rem); --t-h3: clamp(1.06rem, 1.35vw, 1.32rem); --t-lead: clamp(1rem, 1.1vw, 1.14rem); --t-body: clamp(0.95rem, 0.92vw, 1.02rem); --t-micro: 0.72rem; /* ── Section-Intro-Primitive ──────────────────────────────────── Ab Section 02 beginnt jeder Hauptabschnitt identisch: Pill, weisser Hauptsatz, grauer Erklaerungssatz, dann die Product Zone. Nur der Text unterscheidet sich — Geometrie und Typografie nie. */ --intro-top: clamp(20px, 2.8vh, 46px); --intro-pill-gap: clamp(16px, 2.2vh, 26px); --intro-title-gap: clamp(10px, 1.4vh, 16px); --intro-zone-gap: clamp(12px, 1.6vh, 26px); /* Ratifizierter Homepage-Contract (13.08.2026): zwischen der letzten sichtbaren Description-Zeile und dem ersten sichtbaren Showcase-Inhalt liegen VISUELL 56px — Referenzpunkt der V9-Story bei 1366×768. Der Wert ist ein visueller Contract, kein DOM-Abstand: konsumiert wird er ab 1000px in der Island-Formel unten, die das optische Eigen-Guthaben jedes Showcases (--island-lead) verrechnet. */ --intro-showcase-gap: 56px; /* Ratifizierter Homepage-Contract 2 (13.08.2026): zwischen der sichtbaren Showcase-Unterkante und der Pill der naechsten Section liegen VISUELL 80px — Referenz Evolution→Gemeinsamer Kontext bei 1366×768. Die Hierarchie ist gewollt: 56px = Aussage→Beweis INNERHALB der Section, 80px = Beweis abgeschlossen→neuer Story-Moment. Konsumiert ab 1000px als padding-bottom-Formel der Story-Sections unten. Wide-Desktop-Density (ratifiziert 13.08.2026, Modell B/Uniform): der Token IST der sichtbare Story-Gap und waechst mit der VIEWPORT- HOEHE — nicht der Breite — von 80px (768er-Referenzbuehne) linear auf das Maximum 112px (ab 1080er Hoehe). Faktor 0.1026 = 32px Wachstum ueber 312px Hoehendifferenz. Die fruehere Stage-Leftover-Spreizung (88-331px @1920) ist durch den Reserve-Deckel unten abgeloest. */ --showcase-section-gap: clamp(80px, calc(80px + (100svh - 768px) * 0.1026), 112px); --intro-title-size: clamp(1.7rem, 2.55vw, 2.45rem); --intro-title-lh: 1.1; --intro-title-weight: 600; --intro-title-track: -0.026em; --intro-title-w: min(24ch, 760px); --intro-support-size: var(--t-lead); --intro-support-lh: 1.5; --intro-support-w: min(58ch, 720px); --pill-size: 0.72rem; --pill-track: 0.18em; --pill-pad: 6px 14px; /* Story-Page-Hoehe = sichtbarer Viewport minus sticky Header. --top-h wird zur Laufzeit exakt gemessen (page.js). Ungedeckelt: im Story-Scroll fuellt jede Seite den Viewport — zusaetzliche Hoehe wird zu ruhigem Canvas, die Inhalte wachsen nicht mit. */ --top-h: 67px; --stage-h: calc(100svh - var(--top-h)); } /* Header-Kompensation hat genau EINE Authority: scroll-padding-top auf html. Sections tragen KEIN eigenes scroll-margin-top mehr — beides zusammen hatte Snap- und Anker-Ziele um eine volle Header-Hoehe (67px) doppelt nach unten versetzt. */ html { scroll-behavior: smooth; scroll-padding-top: var(--top-h); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Sanfte Scroll-Unterstuetzung auf Desktop: proximity laesst den naechsten Story-Moment oben einrasten, zwingt aber nicht — innerhalb hoher Sections bleibt freies Scrollen. Mobile bleibt komplett frei (Content First). (Story-Paging/mandatory folgt erst nach visueller Abnahme der wiederhergestellten Originalgroessen.) */ @media (min-width: 1000px) { html { scroll-snap-type: y proximity; } main > section { scroll-snap-align: start; } } body { margin: 0; background: var(--sc-bg); color: var(--sc-text); font-family: var(--sc-sans); font-size: var(--t-body); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } h1, h2, h3, p, ul, ol, figure { margin: 0; } /* Einblendung beim Eintritt — einmalig, danach Ruhe. */ .rise { opacity: 0; transform: translateY(12px); transition: opacity 640ms ease, transform 640ms cubic-bezier(.22,.61,.36,1); } .rise[data-shown="true"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------ Bausteine */ .wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* Gleiche Huelle, kleinerer Rand: das Product Object bekommt die Flaeche. */ .wrap--stage { padding-inline: var(--stage-gutter); } /* Pill — Markensprache aus V6, hier ohne Dauerbewegung. */ .pill { display: inline-block; font-family: var(--sc-mono); font-size: var(--pill-size); letter-spacing: var(--pill-track); text-transform: uppercase; /* Section Marker, kein Button: klare Kante, lesbarer Text, keine getoente Flaeche — die Flaechen-Hierarchie gehoert den Product Cards. */ color: color-mix(in srgb, var(--sc-text) 80%, transparent); background: none; border: 1px solid var(--sc-line); border-radius: 999px; padding: var(--pill-pad); } /* --------------------------------------------------------------- Header */ .top { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--sc-bg) 86%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 280ms ease; } .top[data-stuck="true"] { border-bottom-color: var(--sc-hair); } .top__in { display: flex; align-items: center; gap: 22px; min-height: 66px; } .brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--sc-text); font-weight: 600; letter-spacing: -0.018em; margin-right: auto; white-space: nowrap; } /* Logo-Zeichen wie auf der produktiven Website: zurueckhaltend getont, zentriert neben der baseline-ausgerichteten Wortmarke. Das Signet sitzt enger an der Wortmarke (7px) als die Wortmarke an der Herkunftsangabe (9px) — ein Lockup, keine drei Nachbarn. */ .brand__mark { width: 20px; height: 20px; flex: none; align-self: center; color: var(--sc-muted); margin-right: -2px; } .brand__by { font-family: var(--sc-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-micro); } /* Genau zwei Utility Controls. */ .utils { display: flex; gap: 6px; } .util { font: inherit; font-size: 0.78rem; font-family: var(--sc-mono); letter-spacing: 0.08em; min-width: 40px; height: 34px; padding: 0 9px; display: inline-grid; place-items: center; border: 1px solid var(--sc-hair); border-radius: 7px; background: transparent; color: var(--sc-muted); cursor: pointer; transition: color 180ms ease, border-color 180ms ease; } .util:hover { color: var(--sc-text); border-color: var(--sc-line); } .util svg { width: 16px; height: 16px; } .cta { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 7px; text-decoration: none; font-size: 0.92rem; font-weight: 500; white-space: nowrap; background: var(--sc-blue); color: #06131f; transition: filter 180ms ease; } .cta:hover { filter: brightness(1.08); color: #06131f; } /* ------------------------------------------------------------- 01 Hero */ /* ─────────────────────────────────────────────────────────── 01 Hero ── Nach dem Entwurf ausgemessen (Referenz 1600x970): linker Rand 4,5 % · Headline-Breite ~42 % · Orb-Mittelpunkt ~74 % Kompass ~20 % der Viewportbreite · Text und Company vertikal mittig. */ .hero__in { display: grid; /* Text 45 % / Visual 55 % — der Orb traegt Sockel und Glow und braucht etwas mehr optischen Raum. */ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 80px); align-items: center; } .hero__copy { display: grid; justify-items: start; gap: 0; } /* Hero-Pill: Kicker, keine Headline — eine Stufe kleiner und fester als die Section-Pills. */ .hero__copy .pill { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; line-height: 1; padding: 7px 13px; } .hero__h1 { margin-top: clamp(18px, 2.4vh, 24px); /* Volle Hero-Skala: ~71px @1366 · ~75px @1440 · Deckel ~78px. */ font-size: clamp(2.6rem, 5.2vw, 4.9rem); line-height: 1; letter-spacing: -0.03em; font-weight: 600; } .hero__claim { margin-top: clamp(12px, 1.6vh, 16px); color: var(--sc-blue); font-family: var(--sc-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .hero__lead { /* Brand-Statement und Produktbeschreibung bewusst getrennt. */ margin-top: clamp(26px, 3.2vh, 32px); max-width: 54ch; font-size: clamp(1.05rem, 1.32vw, 1.22rem); line-height: 1.58; color: color-mix(in srgb, var(--sc-text) 78%, transparent); } .hero__cta { margin-top: clamp(22px, 2.8vh, 28px); padding: 12px 20px; border-radius: 999px; font-size: 0.875rem; } /* Company steht frei rechts — keine Buehne, keine Karte, kein Rechteck. Der Hero benutzt bewusst NICHT die Product-Showcase-Container. */ .hero__presence { min-width: 0; justify-self: center; } /* Desktop-Komposition: Company rueckt naeher an den Text (eine Buehne, nicht zwei Haelften) und sitzt leicht ueber der Textmittellinie — das optische Zentrum liegt hoeher als das geometrische. */ @media (min-width: 1000px) { .hero__presence { justify-self: start; /* Optischer Bezugspunkt ist das Orb-Glas, nicht der Sockel: das Glaszentrum liegt zwischen H1-Mitte und Claim, der Sockel darf unter die Textmitte reichen. Leicht Richtung Text geschoben. */ margin-top: calc(-1 * clamp(24px, 6vh, 72px)); margin-left: clamp(24px, 3vw, 56px); } } .hero__presence .island { min-height: 0; display: block; } .hero__presence .cs { padding: 0; max-width: none; } .hero__presence .cs-stage { background: none; border-radius: 0; overflow: visible; min-height: 0; } /* +18 % gegenueber dem 400px-Stand; auf sehr grossen Screens gedeckelt. */ .hero__presence .cs-orb { width: min(472px, 36vw); } @media (min-width: 1800px) { .hero__presence .cs-orb { width: 440px; } } /* Hero zeigt nur Company selbst — der ATC-Scanner bleibt dem eigenstaendigen CompanyScanner-Showcase vorbehalten. */ .hero__presence .cs-atc { display: none; } @media (max-width: 1100px) { .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); column-gap: clamp(16px, 2.5vw, 36px); } .hero__presence .cs-orb { width: min(400px, 42vw); } } /* Erst hier wandert Company unter den Text. */ @media (max-width: 820px) { .hero__in { grid-template-columns: minmax(0, 1fr); row-gap: clamp(24px, 4vh, 44px); } .hero__presence { justify-self: center; } .hero__presence .cs-orb { width: min(280px, 72vw); } } /* --------------------------------------------- 02 Evolution Chapters */ /* Zwei eigenstaendige Sections nutzen dieselbe Intro- und Stage-Grammatik wie die uebrige Homepage. Die Chronologie liegt in den statischen Showcases; der Host fuegt keine lokale Timeline oder Umschaltung hinzu. */ /* ----------------------------------- 05 Gemeinsamer Kontext (V6 a03) */ /* Das alte two-col/obj-card-Visual (V6 a03) wurde durch das ContextObjects-Showcase abgeloest. */ /* ------------------------------------------------------- Product Stages */ /* Ein Product Moment ist eine Einheit: Kicker, Headline, ein Satz und das Product Object gehoeren zusammen. Deshalb ist der Abstand INNERHALB der Section deutlich kleiner als der Abstand ZWISCHEN zwei Sections. Genau dieses Verhaeltnis erzeugt die Lesbarkeit beim Scrollen. */ /* ── Section-Intro ─────────────────────────────────────────────── Genau eine Grammatik, keine Varianten. Pill, Titel und Erklaerung stehen in jeder Section auf derselben Achse, in derselben Breite und mit denselben Abstaenden. Die Section bestimmt nur, was danach kommt. */ .intro { display: grid; justify-items: start; text-align: left; } .intro__title { font-size: var(--intro-title-size); line-height: var(--intro-title-lh); letter-spacing: var(--intro-title-track); font-weight: var(--intro-title-weight); max-width: var(--intro-title-w); text-wrap: balance; margin-top: var(--intro-pill-gap); } .intro__support { font-size: var(--intro-support-size); line-height: var(--intro-support-lh); font-weight: 400; color: var(--sc-muted); max-width: var(--intro-support-w); margin-top: var(--intro-title-gap); } /* ── Raumgrammatik ──────────────────────────────────────────────── Jeder grosse Moment besitzt genau eine Buehne: die Flaeche unter dem sticky Header. Die Hoehe kommt aus der SECTION, nicht aus der Island — der Inhalt darin bleibt kompakt und wird bewusst vertikal komponiert. Kein scroll-snap: die Geometrie allein trennt die Abschnitte. */ .hero { min-height: var(--stage-h); display: grid; align-content: center; /* Asymmetrisches Padding hebt die Komposition auf ~44-46 % der verfuegbaren Hoehe: unten bleibt bewusst mehr Ruhe als oben. */ padding-block: clamp(20px, 3vh, 36px) clamp(110px, 18vh, 170px); } /* Ab Section 02: Intro immer auf demselben Y-Start, die Product Zone nimmt den verbleibenden Raum und zentriert sich darin. Dadurch ist der Einstieg ueberall identisch, ohne dass unten Leere entsteht. */ .frag, .objs, .sec, .close { min-height: var(--stage-h); display: grid; grid-template-rows: auto minmax(0, 1fr); padding-block: var(--intro-top) var(--intro-top); } /* Zweites Kind, nicht letztes: der Abschluss besteht nur aus dem Intro — :last-child haette dort das Intro selbst nach unten geschoben. */ .frag > :nth-child(2), .objs > :nth-child(2), .sec > :nth-child(2), .close > :nth-child(2) { display: grid; /* Start-Ausrichtung: Intro und Inhalt bleiben eine Komposition (12-24px Abstand); ueberschuessige Viewport-Hoehe wird zu ruhigem Canvas UNTER dem Inhalt, nie zu Leerraum zwischen Intro und Objekt. */ align-content: start; margin-top: var(--intro-zone-gap); } /* Marketing-Sections und Abschluss sind content-driven — die Story-Paging-Geometrie folgt erst nach Abnahme der Originalgroessen. */ .frag, .objs, .close { min-height: 0; } /* Story-Sections: unten bewusster kleiner Freiraum (die Seite atmet), erst danach beginnt der naechste Story-Moment. */ .frag, .objs { padding-bottom: clamp(24px, 3.4vh, 40px); } /* Story-Moment: auf Desktop fuellt der Wrapper mindestens den Story-Viewport (Stage unter dem realen Header). Ist der Inhalt groesser, bleibt die Hoehe auto — kein Cropping. Ueberschuss wird durch rows auto/1fr + align-content:start zu ruhigem Canvas UNTEN, der Top- Start der Pille bleibt unveraendert. Mobile bleibt content-driven. */ @media (min-width: 1000px) { .frag, .objs { min-height: var(--stage-h); } /* Intro, klarer Gap, dann der Beweis. Ueberschuss wird zu ruhigem Canvas UNTEN (align-content:start aus der Basisregel). */ } /* Buehne ohne Karte: die Komponenten bringen ihre eigene Flaeche mit. */ /* ── Embed-Contract: der Aussenraum gehoert der Section ────────────── Auf der Homepage tragen die Sections den Atem. Die Showcases sind gegen die Preview-Route gezeichnet und bringen dort ihr eigenes Aussenpadding mit — das gemeinsame Buehnen-Primitive `.sc-panel` 14/24/32px je Breakpoint, WorkIntent zusaetzlich 80px an der eigenen Wurzel. Dieses Padding liegt UNTER der letzten sichtbaren Tinte und ist damit Teil des Abstands zur naechsten Section — es gehoert aber der Section Boundary, nicht dem Showcase. Gemessen (Pixel-Scan 18.08.2026) trug es den gesamten Rhythmus-Drift: der sichtbare Uebergang lag auf jedem Breakpoint exakt um Panel-Padding + 1px Rahmen ueber dem Contract (390 +15 · 768 +25 · 1366/1920 +33). Die Wurzel jeder Insel gibt ihr Standalone-Aussenpadding unten deshalb ab. EINE Regel fuer alle Showcases, keine Namensliste, keine Magic Numbers: Padding einer Wurzel liegt per Definition ausserhalb aller Kinder — die innere Komposition bleibt unberuehrt, die Preview-Routen behalten ihre Originalwerte. Nur unten: das Aussenpadding oben gehoert zum Intro→Showcase-Contract (C1, --island-lead) und bleibt unangetastet. (Die frueheren --sc-pad-t/--sc-pad-b-Tokens standen hier ohne Konsumenten — die showcase-v2-Generation liest sie nicht.) */ .island > [data-island-host] > * { padding-bottom: 0; } /* Die vier am 14.08.2026 neu gestalteten Showcases sind gegen den Standalone-Kontext gezeichnet: dort erbt kein Element eine Fliesstext- Zeilenhoehe, unbeschriftete Zeilen (Meta, Status, Chips) stehen auf line-height: normal. Die Homepage vererbt dagegen 1,62 aus body und dehnt genau diese Zeilen um bis zu 60 % — auf schmalen Buehnen schiebt das den Status ueber die Kartennotiz. Hier steht deshalb wieder der Kontext, in dem die freigegebene Fassung gezeichnet wurde; jede bewusst gesetzte line-height der Komponenten bleibt unberuehrt. */ .island[data-island="intent"] .wi, .island[data-island="governance"] .gh, .island[data-island="knowledge"] .ck { line-height: normal; } /* Die neue Carousel-Generation ist content-driven (solo/peek/row) und braucht weder Buehnen-Deckel noch Skalierung — fruehere Overrides (--arc-stage-h, track-scale) zielten auf die Portrait-Generation. */ /* Company Knowledge rechnet auf einer festen Buehne von 1180 px und skaliert proportional mit der Containerbreite. Ein engerer Container ist deshalb der sauberste Weg zu einer kompakteren Hoehe — die Komposition bleibt intakt. */ /* Kein zusaetzlicher Deckel mehr — das Asset darf seine vorgesehene Breite von 1180 px nutzen. */ /* Ausfuehrungsstand: die frueheren Homepage-Paesse (Achsen-, Rail- und Payoff-Abstaende, Statusgroessen, die .ex-demo-Zeile und der Deckel auf die alte 1180er-Buehne) gehoerten zur vorherigen Generation. Die neue Fassung (14.08.2026) bringt Buehne, Skalierung und mobile Komposition selbst mit; ein .ex-demo-Element existiert dort nicht mehr. Der Breitendeckel bleibt als einziger Eingriff — er ist funktional, nicht gestalterisch: .wrap ist ein Grid-Container, und die 1704px-Buehne der Komponente treibt den Track auf max-content (gemessen: Insel 1752px bei 1366 Viewport). Die Komponente misst ihre eigene Box, um daraus die Skalierung abzuleiten — die Messung wird dadurch zirkulaer. Der Deckel setzt sie auf die Buehnenbreite zurueck, die jeder andere Showcase auch bekommt; die Skalierung der neuen Fassung bleibt unveraendert. 100vw enthaelt die Scrollbar, die 16px Reserve decken sie ab. */ .island[data-island="execution"] .ex-fit { max-width: min( calc(var(--shell) - 2 * var(--stage-gutter)), calc(100vw - 2 * var(--stage-gutter) - 16px) ); margin-inline: auto; } /* ── Gezielte Asset-Paesse: erst Information/Chrome, dann Abstaende, erst zuletzt Skalierung. Alle Overrides sind auf die Homepage begrenzt; die Preview-Routen bleiben unveraendert. ───────────── */ /* Governance — die frueheren Dichte-Paesse auf .gh-head/.gh-role/.gh-panel und die Phasenleiste sind mit dem Showcase-Redesign (14.08.2026) entfallen: die neue Fassung bringt Kopfzone, Rail und Entscheidungszone in ihrer freigegebenen Dichte mit. Homepage-Overrides wuerden sie verstellen. */ /* Work Intent und Runway steuern ihre Hoehe selbst — die frueheren Variablen-Overrides (--wi-stage-min, --fr-stage-h) existieren in der neuen Generation nicht mehr. Frueher gab es hier ausserdem eine .stage--framed-Huelle. Work Intent und Governance bringen mit .wi-stage bzw. .gh-window bereits ihre eigene Product Surface mit — pro Showcase genau EINE Surface. */ /* ── Desktop-Density ──────────────────────────────────────────────── Die Komponenten bringen grosszuegiges Preview-Aussenpadding mit; auf der Homepage traegt die Section den Aussenraum bereits (Intro, Section- Padding). Nur ab Laptop-Breite neutralisiert — Mobile behaelt die Komponentenwerte. Keine Skalierung, keine Eingriffe in die Product UI. */ @media (min-width: 1000px) { /* NUR echte Embed-Fixes: das Standalone-Aussenpadding der Komponenten wuerde auf der Homepage doppelt wirken (die Section traegt den Aussenraum bereits — nachgemessen in Phase 2: Intro→Objekt 12-24px). Die natuerlichen Product-Groessen (Buehnen, Canvas, Fits) bleiben unangetastet. */ /* Work Intent, Governance, Company Knowledge und Unternehmenswissen tragen seit dem Showcase-Redesign (14.08.2026) selbst ein knappes Aussenpadding (12-16px) — es wirkt auf der Homepage nicht mehr doppelt. Die frueheren Overrides verengten stattdessen die Buehne: Company Knowledge rechnet seine Desktop-Komposition auf der Containerbreite, 32px Seitenpolster kosteten dort 64px Kartenflaeche. */ /* ── Intro→Showcase-Contract (eine Authority, keine lokalen Margins) ── Sichtbarer Gap = --intro-zone-gap (Wrap) + Island-Margin + optisches Eigen-Guthaben des Showcases (Leading/Inset vor der ersten sichtbaren Tinte). Die Formel setzt den Island-Margin so, dass am 1366×768- Referenzpunkt (zone-gap an seinem 12px-Clamp-Minimum) visuell genau --intro-showcase-gap entsteht; auf hoeheren Viewports waechst der Gap moderat ueber den bestehenden zone-gap-Clamp mit — gewollt. --island-lead ist je Showcase GEMESSEN (Pixel-Scan 13.08.2026), analog zu den --reserve-Reservierungen unten. Aendert ein Showcase seine erste sichtbare Zeile, wird sein Lead neu gemessen — nicht die Formel. */ .frag .island, .objs .island, .sec .island { margin-top: calc(var(--intro-showcase-gap) - 12px - var(--island-lead, 0px)); } .island[data-island="evolution-history"], .island[data-island="evolution-next"] { --island-lead: 0px; } /* Frame-Kante */ .island[data-island="context"] { --island-lead: 1px; } /* Graph-Kante */ .island[data-island="intent"] { --island-lead: 9px; } /* Stage-Inset */ .island[data-island="board"] { --island-lead: 0px; } /* Frame-Kante */ /* Agent Runs bringt seine eigene Showcase-Headline mit 49px Eigen-Guthaben mit — mehr als der Contract vorsieht. Die Formel ergibt hier einen leicht negativen Margin (−5px), der die Island bis auf den Contract-Rhythmus heranzieht; dokumentierte Ausnahme, kein Eingriff ins Asset. */ .island[data-island="runs"] { --island-lead: 49px; } .island[data-island="execution"] { --island-lead: 3px; } /* Frame-Kante */ .island[data-island="governance"] { --island-lead: 2px; } /* Fenster-Kante */ .island[data-island="knowledge"] { --island-lead: 12px; } /* Kopfzeilen-Leading */ /* ── Showcase→Section-Contract (Contract 2, eine Authority) ───────── Sichtbarer Uebergang = padding-bottom (hier) + padding-top der Folgesection (--intro-top, bleibt Intro-Grammatik) + visueller Eigenraum unter der Showcase-Kante (--island-bottom-lead). Die Formel subtrahiert beide Anteile vom Token — der Token IST damit der sichtbare Story-Gap, auf jeder Viewporthoehe (Wide-Density siehe :root). Bottom-Leads sind GEMESSEN (Pixel-Scan 13.08.2026, Authority = Surface-/Frame-Kante der Layout-Root, Schattenauslaeufer zaehlen nicht); Leads ≤1px liegen unter der optischen Toleranz und bleiben ungesetzt. Hero→erste Story-Section ist ausgenommen (eigene Grammatik), .close behaelt seine eigene Abschlussgestaltung samt Trennlinie. */ .frag, .objs, .sec { --island-bottom-lead: 0px; padding-bottom: calc(var(--showcase-section-gap) - var(--intro-top) - var(--island-bottom-lead)); } /* ── Story-Paging-Reserve-Deckel (Wide-Density, hoehenbasiert) ────── Die Buehne reserviert hoechstens die 768er-Referenzhoehe. Bei 1366×768 ist min(...) exakt der bisherige Wert — nichts verschiebt sich. Auf hoeheren Viewports absorbiert die Section den Ueberschuss NICHT mehr als Leftover unter dem Showcase (frueher 88-331px @1920); das kontrollierte Breathing uebernimmt allein der wachsende --showcase-section-gap. Kein Breiten-Breakpoint: die Ursache ist Viewport-HOEHE (svh), 1366×900 verhaelt sich wie 1440×900. */ .frag, .objs, .sec { min-height: min(var(--stage-h), calc(768px - var(--top-h))); } /* Keine Showcase-Ausnahme mehr: der frueher hier stehende Runs-Wert (57px) war gegen die Vorgaenger-Generation gemessen. Seit dem Embed-Contract oben endet die Layout-Root jedes Showcases an seiner Komposition — der Uebergang folgt fuer alle demselben Token. */ /* Runway: Caption-Section — die Caption ist die Story-Unterkante (Lead 0); die stabile 20px-Fussluft des Assets wird stattdessen in der Caption-C3-Formel verrechnet (32 − 20 = 12px Margin). */ } /* ── Mobile-Rhythm-Contract (ratifiziert 13.08.2026, <768px) ─────────── Dritte Stufe derselben Host-Mechanik: Intro→Showcase 36px visuell, Showcase→naechste Pill 52px visuell — Referenzpunkt 390×844, EIN Band fuer ganz Mobile (die Asset-Grammatikwechsel bei 620/479 springen laut Audit nicht im Host-Rhythmus). min-height 0 beendet die hoehengetriebene .sec-Stage-Reserve, die auf Large Mobile 27-267px Zufalls-Leftover erzeugte (Board 267 / Runs 260 @744×1133). Leads sind MOBIL GEMESSEN (Pixel-Scan @390) — die Stacks tragen andere Eigenraeume als Tablet. */ @media (max-width: 767.98px) { :root { --intro-showcase-gap: 36px; --showcase-section-gap: 52px; } .frag, .objs, .sec { --island-bottom-lead: 0px; min-height: 0; padding-bottom: max(0px, calc(var(--showcase-section-gap) - var(--intro-top) - var(--island-bottom-lead))); } .frag .island, .objs .island, .sec .island { margin-top: calc(var(--intro-showcase-gap) - var(--intro-zone-gap) - var(--island-lead, 0px)); margin-bottom: min(0px, calc(var(--showcase-section-gap) - var(--intro-top) - var(--island-bottom-lead))); } /* Sichtbare Eigenraeume oberhalb der ersten Tinte (Pixel-Scan @390). */ .island[data-island="evolution-history"], .island[data-island="evolution-next"] { --island-lead: 0px; } .island[data-island="evolution-history"] .sev, .island[data-island="evolution-next"] .sev { width: 100%; } .island[data-island="evolution-history"] .sev-header, .island[data-island="evolution-next"] .sev-header { gap: 8px; } .island[data-island="intent"] { --island-lead: 24px; } .island[data-island="board"] { --island-lead: 0px; } /* Frame-Kante */ .island[data-island="runs"] { --island-lead: 24px; } .island[data-island="governance"] { --island-lead: 22px; } .island[data-island="knowledge"] { --island-lead: 12px; } /* Sichtbare Eigenraeume unter der letzten Tinte (Pixel-Scan @390); Execution malt seine Kante wie am Tablet 8px unter die Root. Runway ist Caption-Section: die Caption ist die Story-Unterkante (Lead 0); die minimale 13px-Fussluft des Assets wird in der Caption-C3-Formel verrechnet (32 − 13 = 19px Margin, Varianz 13-41 je Beat dokumentiert). */ /* Keine Showcase-Ausnahmen mehr (frueher Runs 24px, Execution −8px): beide waren gegen die Vorgaenger-Generation gemessen und werden vom Embed-Contract abgeloest. */ } /* Lead-Kompensationsstufe 620-767 (KEINE eigene Rhythmusstufe — der 36/52-Contract gilt unveraendert): WorkIntent, Board und AgentRuns stehen dort in ihrer 620er-Grammatik und tragen deren Eigenraeume — gemessen @767 identisch mit den Tablet-Werten dieser Grammatiken. */ @media (min-width: 620px) and (max-width: 767.98px) { .island[data-island="intent"] { --island-lead: 41px; } .island[data-island="board"] { --island-lead: 0px; } /* Frame-Kante */ .island[data-island="runs"] { --island-lead: 33px; } } /* ── Breitengestufte Leads (R6, Audit 13.08.2026) ────────────────────── Zwei Assets aendern unterhalb ~1140px ihre sichtbare Kanten-Geometrie, waehrend die Lead-Konstanten oben am 1366-Referenzpunkt gemessen sind: AgentRuns traegt dort 8px weniger Kopf- und Fussraum (Cards ruecken in der schmaleren Buehne an die Root), CompanyKnowledge skaliert seine 1180px-Buehne und malt die Unterkante 8px unter die Layout-Root. Gemessen @1024 und @1180: C1 runs 48-49 statt 56, C2 runs 72 statt 80 — die Verschiebung gilt in der gesamten Zone unterhalb der 1280er-Stufe des Assets (@1280 wieder 57/80). CompanyKnowledge zeigte in derselben Zone 72-90 — die Kante wandert beat-abhaengig mit der Spine-Animation; bewusst KEIN Step (eine Konstante wuerde Animations-Rauschen jagen, Root-Anker bleibt). */ @media (min-width: 1000px) and (max-width: 1279.98px) { .island[data-island="runs"] { --island-lead: 41px; } } /* ── Caption-Contract (ratifiziert 13.08.2026) ─────────────────────── Selektive editoriale Beweiszeile unter einem Showcase — sie schliesst den Beweis ab, beschreibt nicht das Bild. Aktuell ohne Consumer (Stand 14.08.2026), die Primitive bleibt als Baustein erhalten. Grammatik auf allen Viewports gleich: C3 = 32px visuell (Showcase-Unterkante → Caption), 15px Regular, --sc-muted, max. 72ch, Intro-Textachse, keine Dekoration. Die Caption ist die neue Story-Unterkante: die betroffenen Sections tragen --island-bottom-lead 0, damit der bestehende C2-Contract ab der Caption misst (80-112 / 64 / 52 — unveraendert). Kein globaler C3-Contract: Sections ohne Caption bleiben bei INTRO→C1→SHOWCASE→C2. */ .showcase-caption { margin: 32px 0 0; /* Horizontale Zuordnung (Korrektur 13.08.2026): die Caption gehoert geometrisch zu ihrem Showcase — ihre linke Kante fluchtet mit dessen Frame-Kante, NICHT mit der Intro-Achse. Im gemeinsamen Stage- Container ergibt sich die Kante aus der ratifizierten Width-Role (--caption-frame: CK-Fit 1178, Runway-Stage 1100), keine Magic- Pixel: left = (Containerbreite − Framebreite) / 2. Unterhalb 1000px uebernehmen die gemessenen, band-stabilen Frame-Insets der Assets (Media-Stufen unten). Text bleibt linksbuendig, max. 72ch. */ margin-left: max(0px, calc((100% - var(--caption-frame, 100%)) / 2)); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--sc-muted); max-width: 72ch; } /* Hinweis (14.08.2026): Beide Captions sind entfallen — Company Knowledge traegt seine Aussage jetzt ueber das Section-Primitive, der Abschnitt Unternehmenszustand wurde vollstaendig entfernt. Die Primitive bleibt fuer spaetere Beweiszeilen erhalten; ihre asset-spezifischen Frame-Insets und --caption-frame-Werte sind mit den Sections gegangen. */ .island { display: block; width: 100%; } .island[data-state="idle"], .island[data-state="loading"] { min-height: var(--reserve, 460px); display: grid; place-items: center; } .island__wait { font-family: var(--sc-mono); font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--sc-micro) 55%, transparent); } .island[data-state="live"] .island__wait { display: none; } /* Gemessene Reservierungen — verhindern Layout Shifts vor dem Mount. KOMPOSITION entscheidet der Capability-Contract, nicht die Breite: Mobile ist die Vorgabe und deckt Phone UND Tablet in jeder Breite und Orientierung; WIDE ist die Ausnahme und haengt an derselben Query wie der Renderpfad. Vorher entschieden reine Breitenbaender — ein Tablet fiel ins Basis-Band und bekam den Desktop-Wert, waehrend mobil gerendert wurde. Gemessene Spruenge beim Mount: bis 216px (Scanner), 191px (Zusammenarbeit), 152px (Evolution). DICHTE darf innerhalb einer Komposition weiter von Breite und Sprache abhaengen — beides bildet echte Inhaltshoehen ab, keine zweite Kompositionsentscheidung. Die `[lang="en"]`-Regel steht in JEDEM Band, auch wo sie mit der deutschen Hoehe uebereinstimmt: sie ist spezifischer und wuerde sonst aus einem anderen Band hineinwirken. Neu gemessen am 16.08.2026 ueber DE und EN. */ /* Mobile · Basis (breite Tablets ab 1280px) */ .island[data-island="scanner"] { --reserve: 531px; } [lang="en"] .island[data-island="scanner"] { --reserve: 531px; } .island[data-island="evolution-history"] { --reserve: 480px; } [lang="en"] .island[data-island="evolution-history"] { --reserve: 480px; } .island[data-island="evolution-next"] { --reserve: 525px; } [lang="en"] .island[data-island="evolution-next"] { --reserve: 525px; } .island[data-island="context"] { --reserve: 628px; } [lang="en"] .island[data-island="context"] { --reserve: 624px; } .island[data-island="intent"] { --reserve: 620px; } [lang="en"] .island[data-island="intent"] { --reserve: 620px; } .island[data-island="board"] { --reserve: 579px; } [lang="en"] .island[data-island="board"] { --reserve: 558px; } .island[data-island="execution"] { --reserve: 620px; } [lang="en"] .island[data-island="execution"] { --reserve: 620px; } .island[data-island="runs"] { --reserve: 547px; } [lang="en"] .island[data-island="runs"] { --reserve: 547px; } .island[data-island="governance"] { --reserve: 684px; } [lang="en"] .island[data-island="governance"] { --reserve: 657px; } .island[data-island="knowledge"] { --reserve: 594px; } [lang="en"] .island[data-island="knowledge"] { --reserve: 594px; } /* Mobile · Phone */ @media (max-width: 639.98px) { .island[data-island="scanner"] { --reserve: 315px; } [lang="en"] .island[data-island="scanner"] { --reserve: 315px; } .island[data-island="evolution-history"] { --reserve: 626px; } [lang="en"] .island[data-island="evolution-history"] { --reserve: 606px; } .island[data-island="evolution-next"] { --reserve: 631px; } [lang="en"] .island[data-island="evolution-next"] { --reserve: 631px; } .island[data-island="context"] { --reserve: 621px; } [lang="en"] .island[data-island="context"] { --reserve: 605px; } .island[data-island="intent"] { --reserve: 581px; } [lang="en"] .island[data-island="intent"] { --reserve: 581px; } .island[data-island="board"] { --reserve: 634px; } [lang="en"] .island[data-island="board"] { --reserve: 578px; } .island[data-island="execution"] { --reserve: 753px; } [lang="en"] .island[data-island="execution"] { --reserve: 713px; } .island[data-island="runs"] { --reserve: 527px; } [lang="en"] .island[data-island="runs"] { --reserve: 501px; } .island[data-island="governance"] { --reserve: 617px; } [lang="en"] .island[data-island="governance"] { --reserve: 617px; } .island[data-island="knowledge"] { --reserve: 578px; } [lang="en"] .island[data-island="knowledge"] { --reserve: 557px; } } /* Mobile · schmales Tablet */ @media (min-width: 640px) and (max-width: 1023.98px) { .island[data-island="scanner"] { --reserve: 315px; } [lang="en"] .island[data-island="scanner"] { --reserve: 315px; } .island[data-island="evolution-history"] { --reserve: 485px; } [lang="en"] .island[data-island="evolution-history"] { --reserve: 485px; } .island[data-island="evolution-next"] { --reserve: 530px; } [lang="en"] .island[data-island="evolution-next"] { --reserve: 530px; } .island[data-island="context"] { --reserve: 612px; } [lang="en"] .island[data-island="context"] { --reserve: 608px; } .island[data-island="intent"] { --reserve: 554px; } [lang="en"] .island[data-island="intent"] { --reserve: 554px; } .island[data-island="board"] { --reserve: 563px; } [lang="en"] .island[data-island="board"] { --reserve: 542px; } .island[data-island="execution"] { --reserve: 634px; } [lang="en"] .island[data-island="execution"] { --reserve: 634px; } .island[data-island="runs"] { --reserve: 559px; } [lang="en"] .island[data-island="runs"] { --reserve: 531px; } .island[data-island="governance"] { --reserve: 644px; } [lang="en"] .island[data-island="governance"] { --reserve: 617px; } .island[data-island="knowledge"] { --reserve: 594px; } [lang="en"] .island[data-island="knowledge"] { --reserve: 594px; } } /* Mobile · Tablet-Landscape-Band (der Scanner skaliert hier stufenlos mit) */ @media (min-width: 1024px) and (max-width: 1279.98px) { .island[data-island="scanner"] { --reserve: 478px; } [lang="en"] .island[data-island="scanner"] { --reserve: 478px; } .island[data-island="evolution-history"] { --reserve: 480px; } [lang="en"] .island[data-island="evolution-history"] { --reserve: 480px; } .island[data-island="evolution-next"] { --reserve: 525px; } [lang="en"] .island[data-island="evolution-next"] { --reserve: 525px; } .island[data-island="context"] { --reserve: 628px; } [lang="en"] .island[data-island="context"] { --reserve: 624px; } .island[data-island="intent"] { --reserve: 620px; } [lang="en"] .island[data-island="intent"] { --reserve: 620px; } .island[data-island="board"] { --reserve: 579px; } [lang="en"] .island[data-island="board"] { --reserve: 558px; } .island[data-island="execution"] { --reserve: 620px; } [lang="en"] .island[data-island="execution"] { --reserve: 620px; } .island[data-island="runs"] { --reserve: 547px; } [lang="en"] .island[data-island="runs"] { --reserve: 547px; } .island[data-island="governance"] { --reserve: 684px; } [lang="en"] .island[data-island="governance"] { --reserve: 657px; } .island[data-island="knowledge"] { --reserve: 594px; } [lang="en"] .island[data-island="knowledge"] { --reserve: 594px; } } /* Wide · nur mit dem Contract */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .island[data-island="scanner"] { --reserve: 531px; } [lang="en"] .island[data-island="scanner"] { --reserve: 531px; } .island[data-island="evolution-history"] { --reserve: 632px; } [lang="en"] .island[data-island="evolution-history"] { --reserve: 583px; } .island[data-island="evolution-next"] { --reserve: 617px; } [lang="en"] .island[data-island="evolution-next"] { --reserve: 596px; } .island[data-island="context"] { --reserve: 610px; } [lang="en"] .island[data-island="context"] { --reserve: 610px; } .island[data-island="intent"] { --reserve: 609px; } [lang="en"] .island[data-island="intent"] { --reserve: 609px; } .island[data-island="board"] { --reserve: 733px; } [lang="en"] .island[data-island="board"] { --reserve: 733px; } .island[data-island="execution"] { --reserve: 677px; } [lang="en"] .island[data-island="execution"] { --reserve: 653px; } .island[data-island="runs"] { --reserve: 602px; } [lang="en"] .island[data-island="runs"] { --reserve: 572px; } .island[data-island="governance"] { --reserve: 548px; } [lang="en"] .island[data-island="governance"] { --reserve: 548px; } .island[data-island="knowledge"] { --reserve: 572px; } [lang="en"] .island[data-island="knowledge"] { --reserve: 572px; } } /* ── Ausfuehrungsstand: eigene Kompositionsgrenze im Wide-Pfad ───────── Der Reserve-Contract waehlt die Komposition ueber die Capability-Query (ab 1024 mit Maus = WIDE). Das Asset selbst wechselt aber erst bei 1280: unterhalb davon loest `.ex-fit` seine skalierte Buehne auf (`height: auto`, `transform: none`) und stellt die Komposition ungeskaliert. Gemessen @1180: 1270px statt der 677px, die der Wide-Wert reserviert — 593px Sprung beim Mount. Die Reserve muss derselben Grenze folgen wie der Renderpfad des Assets; deshalb dieses Band NACH dem Wide-Block. Betrifft nur Execution — die uebrigen drei Showcases wechseln bei 1024. */ @media (min-width: 1024px) and (max-width: 1279.98px) and (hover: hover) and (pointer: fine) { .island[data-island="execution"] { --reserve: 1271px; } [lang="en"] .island[data-island="execution"] { --reserve: 1243px; } } /* Der fruehere .pan-Schiebebereich (min-width 880px) stammt aus der Desktop-fixen Showcase-Generation. Board und Company Knowledge sind inzwischen mobile-first bzw. loesen ihre Buehne auf schmalen Geraeten selbst auf — ein erzwungener Schiebebereich wuerde nur die Section aufweiten. */ /* ── Tablet-Rhythm-Contract (ratifiziert 13.08.2026, 768-999px) ──────── Dieselbe Mechanik wie die Desktop-Contracts, eine kompaktere Stufe: Intro→Showcase 44px visuell, Showcase→naechste Pill 64px visuell — Referenzpunkt 834×1112. Beide Formeln subtrahieren die variablen Grammatik-Anteile vollstaendig, der Token IST der sichtbare Abstand. Story-Paging ist in dieser Stufe content-driven (min-height 0): die Portrait-Buehne (bis 1059px) erzeugte sonst 52-258px Zufalls-Leftover unter den Showcases (Audit 13.08.). Mobile <768 bleibt unveraendert. Die --island-lead-Werte sind hier NEU GEMESSEN: unterhalb 1000px tragen die Assets ihr Standalone-Innenpadding (die Desktop-Density- Neutralisierung greift erst ab 1000), daher die grossen Eigenraeume. */ @media (min-width: 768px) and (max-width: 999.98px) { :root { --intro-showcase-gap: 44px; --showcase-section-gap: 64px; } .frag, .objs, .sec { --island-bottom-lead: 0px; min-height: 0; /* padding kann nicht negativ werden — grosse Asset-Eigenraeume (Standalone-Padding unter 1000px) brauchen den negativen Rest als Island-Margin unten: EINE Formel, zwei Klammern. */ padding-bottom: max(0px, calc(var(--showcase-section-gap) - var(--intro-top) - var(--island-bottom-lead))); } .frag .island, .objs .island, .sec .island { margin-top: calc(var(--intro-showcase-gap) - var(--intro-zone-gap) - var(--island-lead, 0px)); margin-bottom: min(0px, calc(var(--showcase-section-gap) - var(--intro-top) - var(--island-bottom-lead))); } /* Sichtbare Eigenraeume oberhalb der ersten Tinte (Pixel-Scan @834). */ .island[data-island="evolution-history"], .island[data-island="evolution-next"] { --island-lead: 0px; } .island[data-island="intent"] { --island-lead: 41px; } .island[data-island="board"] { --island-lead: 0px; } /* Frame-Kante */ .island[data-island="runs"] { --island-lead: 33px; } .island[data-island="governance"] { --island-lead: 50px; } .island[data-island="knowledge"] { --island-lead: 48px; } /* Sichtbare Eigenraeume unter der letzten Tinte (Pixel-Scan @834); Execution malt seine Kante 8px unter die Layout-Root (2×2-Frame). Runway bleibt bewusst am Layout-Root verankert (Lead 0): seine Unterkante wandert beat-abhaengig 215-304px (leerer Asset-Fuss der Tablet-Kompression) — eine Konstante wuerde nur Rauschen jagen. */ /* Keine Showcase-Ausnahmen mehr (frueher Runs 38px, Governance 6px, Execution −8px): alle drei waren gegen die Vorgaenger-Generation gemessen und werden vom Embed-Contract abgeloest. */ } /* 05 Agent Runs bringt eigene Headline mit — die Section stellt daneben keine zweite auf, nur die Pill. */ /* --------------------------------------------------------- 09 Abschluss */ /* Alte Parallelregel entfernt: das padding-block hat den Intro-Einstieg dieser Section 23 px tiefer gesetzt als in allen anderen. */ /* Die Trennlinie zaehlt zur Boxhoehe — ohne Ausgleich begaenne das Intro dieser Section genau einen Pixel tiefer als in allen anderen. */ .close { border-top: 1px solid var(--sc-hair); padding-top: calc(var(--intro-top) - 1px); } .close__out { display: grid; gap: clamp(20px, 3vh, 34px); justify-items: start; align-content: center; } .close__claim { font-family: var(--sc-mono); font-size: clamp(0.8rem, 1.4vw, 1rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-blue); } /* ------------------------------------------------------------- Footer */ .foot { border-top: 1px solid var(--sc-hair); padding-block: clamp(36px, 5vh, 58px) clamp(28px, 4vh, 42px); } .foot__row { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: baseline; } .foot__brand { display: flex; align-items: baseline; gap: 9px; font-weight: 600; letter-spacing: -0.018em; margin-right: auto; } .foot__mark { width: 16px; height: 16px; flex: none; align-self: center; color: var(--sc-micro); } .foot__links { display: flex; flex-wrap: wrap; gap: 22px; } .foot__links a { color: var(--sc-muted); text-decoration: none; font-size: 0.92rem; } .foot__links a:hover { color: var(--sc-text); } .foot__legal { margin-top: clamp(24px, 3.4vh, 38px); padding-top: 18px; border-top: 1px solid var(--sc-hair); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.82rem; color: var(--sc-micro); } /* ------------------------------------------------------------- Mobile */ @media (max-width: 860px) { :root { } .top__in { gap: 12px; min-height: 58px; } .brand__by { display: none; } } @media (max-width: 460px) { .cta { padding: 8px 14px; font-size: 0.88rem; } .util { min-width: 36px; height: 32px; } }