/* --------------------------------------------------------------------------- New Work Studio — Website-Basis Baut ausschliesslich auf den Tokens des Design-Systems auf (../design-system/styles.css). Hier stehen nur Bausteine, die es dort noch nicht als Komponente gibt: Nav, Hero-Panel, Sektions-Rhythmus, Footer. Keine neuen Farben, Radien oder Schriftgroessen erfinden. --------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-app); color: var(--text-heading); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; /* Gehoert zum randlosen Hero (PLAN 1ar): `100vw` zaehlt die Bildlaufleiste mit, ohne diese Zeile stuende die Seite rund 15 px zu weit rechts. `clip` und nicht `hidden` — `hidden` wuerde die klebende Navigation brechen. */ overflow-x: clip; } a { color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); } a:hover { opacity: .82; } :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; border-radius: var(--radius-xs); } .page { max-width: 1180px; margin: 0 auto; } .section { padding: 0 var(--gutter); } .section + .section { margin-top: var(--space-section); } /* Die Navigation klebt oben. Ohne diesen Abstand schiebt jeder Sprung (`#kontakt`, `#anwendungsfelder`, `#person`, `#faq`) die ersten Zeilen des Ziels darunter und man landet scheinbar mitten im Abschnitt. */ .section[id], .w-section[id], .cta-band[id], header[id] { scroll-margin-top: 92px; } /* ---- Typografie ---------------------------------------------------------- */ /* Display in der Serifenschrift, alles andere in Sora. Die Liste deckt beide Spuren ab: `.h1`/`.h2` auf Spur A, das nackte `h1` in den Spur-B-Heroes und `.w-cta h2`. Karten-Überschriften (`.h3`) bleiben bewusst Sans — sonst kippt die Seite ins Redaktionelle und der Kontrast zwischen Aussage und Detail geht verloren. */ .h1, .h2, h1, .w-cta h2, .stat-num, .stance p { font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: "opsz" var(--opsz-display); } .h1, h1, .stat-num, .stance p { letter-spacing: var(--tracking-display-serif); } .h2, .w-cta h2 { letter-spacing: var(--tracking-heading-serif); } /* Gewicht und Laufweite stehen bewusst oben im Display-Block und nicht hier: sonst überschreiben diese beiden Regeln ihn wieder (gleiche Spezifität, spätere Position). */ .h1 { margin: 0 0 22px; font-size: var(--fs-display); line-height: var(--lh-display); text-wrap: balance; } .h2 { margin: 0 0 var(--space-4); font-size: var(--fs-h2); line-height: var(--lh-heading); text-wrap: balance; } .h3 { margin: 0 0 10px; font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -.014em; /* Zweizeilige Kartentitel brachen vorher zufaellig — mal sieben Woerter oben und eines unten. `balance` verteilt sie gleichmaessig. Der Zeilenabstand bleibt bei den geerbten 1.6: ihn anzuruehren wuerde die Kartenhoehe und damit die Wirkung verschieben, und darum ging es hier nicht. */ text-wrap: balance; } .lead { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-body); } .lead-dark { color: var(--nws-on-dark); } .sig { color: var(--primary); } /* das eine Signalwort auf hell */ .sig-dark { color: var(--accent); } /* das eine Signalwort auf dunkel */ .muted { color: var(--text-label); } .mono { font-family: var(--font-mono); } .label { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-label); } .label-dark { color: var(--accent); } .section-head { max-width: 640px; margin-bottom: var(--space-8); } .section-head .label { display: block; margin-bottom: var(--space-3); } /* ---- Buttons (= Button-Primitive des DS) --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--space-11); padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--radius-pill); font-family: inherit; font-size: 14.5px; font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-lg { height: var(--space-13); padding: 0 26px; font-size: 15px; } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-button); } .btn-accent { background: var(--accent); color: var(--nws-lime-ink); font-weight: var(--fw-bold); } .btn-secondary { background: var(--nws-white); border-color: var(--nws-border-strong); color: var(--text-heading); } .btn-ghost-dark { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; } /* ---- Badges (= Badge-Primitive des DS) ----------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--fw-semibold); } .badge-eyebrow { background: rgba(198,242,78,.14); border: 1px solid rgba(198,242,78,.4); color: var(--accent); } .badge-neutral { background: var(--surface-tint); color: var(--primary); } .badge-dark { background: var(--nws-night); color: #fff; } .badge-dummy { padding: 2px 9px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); font-family: var(--font-mono); letter-spacing: .04em; background: rgba(217,158,38,.14); border: 1px solid rgba(217,158,38,.34); color: #a5741a; } .badge-dummy-dark { background: rgba(198,242,78,.16); border-color: transparent; color: var(--accent); } /* ---- Karten (= Card-Primitive des DS) ------------------------------------ */ /* Der Innenabstand ist unten zwei Pixel groesser als oben. Mathematisch gleiche Abstaende wirken unten zu knapp, weil unter der letzten Zeile nur die Unterlaengen stehen und darueber die volle Versalhoehe (PLAN.md 1ap, H7). */ .card { border-radius: var(--radius-card); padding: 30px 30px 32px; } .card-light { background: var(--surface-card); box-shadow: var(--shadow-card); border: 1px solid var(--border-card); border-bottom-color: var(--border-card-base); } /* Auf dem getoenten Band liegt die Kante dichter am Grund und braucht mehr Deckung, sonst verschwindet sie im Ton der Flaeche. */ .section.band .card-light { border-color: var(--border-card-tint); border-bottom-color: var(--border-card-tint-base); } .card-tint { background: var(--surface-tint); border: 1px solid #dedcfa; } /* Die gefuellten Karten tragen einen durchsichtigen Rahmen derselben Staerke. Ohne ihn sitzt ihr Inhalt gegenueber den hellen Nachbarn im selben Raster um einen Pixel versetzt — box-sizing rechnet den Rahmen in die Breite hinein. */ .card-indigo { background: var(--primary); color: #d5d4f5; position: relative; overflow: hidden; border: 1px solid transparent; } .card-night { background: var(--nws-night); color: var(--nws-on-dark); position: relative; overflow: hidden; border: 1px solid transparent; } .card-indigo .h3, .card-night .h3 { color: #fff; } /* `pretty` haelt einzelne Woerter davon ab, allein in der letzten Zeile zu stehen. Das Zeilenmass bleibt, wie es ist: in einer 350-px-Karte laeuft der Satz ohnehin bei rund 27 Zeichen um. */ .card p { margin: 0; color: var(--text-body); text-wrap: pretty; } .card-indigo p, .card-night p { color: inherit; } .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } /* Gemeinsame Grundlinie im Dreierraster. Ist ein Titel einzeilig und der daneben zweizeilig, starten die Fliesstexte auf verschiedenen Hoehen und die Reihe franst aus. Hier teilen sich die Karten die Zeilen des Rasters, also liegen Kennung, Titel und Text in allen Karten einer Reihe auf derselben Hoehe — unabhaengig davon, wieviele Zeilen ein Titel braucht. Eine feste Mindesthoehe fuer den Titel taete das auch, aber nur bei genau der Zeilenzahl, fuer die sie gerechnet ist: bei 901 px werden dieselben Titel dreizeilig, und zwei Zeilen Mindesthoehe richten dann nichts mehr aus (gemessen, PLAN.md 1ap). Vier Werte, die alle vier noetig sind: `repeat(5, auto)` — fuenf Zeilen als Obergrenze. Die laengste Karte im Auftritt hat vier Elemente im Fluss (Etikett, Titel, Text, Liste); leere Zeilen fallen auf 0 zusammen, kosten also nichts. Damit richten sich auch Raster mit ungleich langen Karten an ihren ersten Zeilen aus. `row-gap: 0` auf der Karte — die 20 px des Rasters gelten sonst auch zwischen den Zeilen *innerhalb* der Karte. Der Untergitter-Abstand schlaegt den des Rasters nur innen, aussen bleiben die 20 px zwischen zwei Kartenreihen stehen (gemessen). `:not(:has(> :not(.card)))` — nur Raster, in denen alle Kinder Karten sind. Steht ein Element ohne `.card` daneben, spannt es keine Zeilen und faende sich in einer einzigen wieder. Ab 901 px, solange die Karten nebeneinanderstehen. Darunter ist das Raster einspaltig und es gibt keine Nachbarn zum Ausrichten. Ohne `subgrid` oder ohne `:has()` (Browser vor 2023) faellt die Reihe auf das heutige Verhalten zurueck. */ @media (min-width: 901px) { .grid3:not(:has(> :not(.card))) { grid-template-rows: repeat(5, auto); } .grid3:not(:has(> :not(.card))) > .card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; } } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } /* Icon-Kachel — geometrische Linien-SVGs, thin stroke, Lime auf Indigo */ .ic { display: inline-flex; align-items: center; justify-content: center; width: var(--space-11); height: var(--space-11); border-radius: var(--radius-sm); background: var(--primary); margin-bottom: 18px; flex-shrink: 0; } .card-indigo .ic, .card-night .ic { background: rgba(255,255,255,.12); } /* Orbit-Ring — der Marken-Hintergrundmotiv-Baustein */ .ring { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; } .ring-lime { border: 1.5px solid rgba(198,242,78,.35); } .ring-white { border: 1.5px solid rgba(255,255,255,.14); } .ring-glow { background: radial-gradient(circle, rgba(79,70,229,.55), transparent 68%); } /* ---- Navigation ---------------------------------------------------------- */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); border-bottom: 1px solid var(--border-hairline); position: sticky; top: 0; z-index: 40; /* Derselbe Ton wie --nws-mist, nur durchscheinend — als rgba, weil die Leiste beim Scrollen den Inhalt darunter durchlaesst. Beim Aendern des Grundtons mitziehen: am 20.08.2026 stand hier noch der kuehle Mist, waehrend die Seite schon auf Papierton lief (PLAN 1aq). */ background: rgba(248,246,241,.92); backdrop-filter: saturate(140%) blur(8px); } .lockup { display: inline-flex; align-items: center; gap: var(--space-3); } .lockup-text { display: flex; flex-direction: column; line-height: 1; } .lockup-name { font-size: 19px; font-weight: var(--fw-black); letter-spacing: -.03em; color: var(--text-heading); } .lockup-name em { font-style: normal; font-weight: var(--fw-regular); color: #8a8ca6; } .lockup-by { margin-top: 6px; font-size: 9.5px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--primary); } .nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: var(--fw-medium); color: var(--nws-body); } /* Der Name im Hero-Eyebrow springt zum Personen-Abschnitt. Das Foto bleibt bewusst unten (Entscheidung 01.08.2026) — aber die Person soll ab der ersten Sekunde ansteuerbar sein, nicht erst nach vier Bildschirmen. */ .badge-eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: rgba(198,242,78,.45); text-underline-offset: 3px; } .badge-eyebrow a:hover { text-decoration-color: currentColor; } /* Der Menüknopf ist am Desktop nie zu sehen und erscheint auch auf dem Telefon erst, wenn `static/nav.js` gelaufen ist (dann trägt `.nav` ein `data-menu`). Ohne JavaScript bliebe er sonst als toter Knopf stehen. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: 14px; padding: 0; background: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); color: var(--text-heading); cursor: pointer; } .nav-burger, .nav-burger::before, .nav-burger::after { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; } .nav-burger { position: relative; } .nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 0; } .nav-burger::before { top: -6px; } .nav-burger::after { top: 6px; } .nav[data-menu="offen"] .nav-burger { background: transparent; } .nav[data-menu="offen"] .nav-burger::before { transform: translateY(6px) rotate(45deg); } .nav[data-menu="offen"] .nav-burger::after { transform: translateY(-6px) rotate(-45deg); } /* ---- Hero-Panel ---------------------------------------------------------- */ /* Randlos ueber die volle Fensterbreite statt als gerundetes Panel im Raster (PLAN 1ar). Vorher schwamm die Nachtflaeche mit 44 px Abstand im 1180er Raster und las sich als Karte; jetzt ist sie eine Flaeche. Der Ausbruch geht ueber `100vw` mit negativem Aussenabstand, weil der Hero im Auszeichnungstext in `.page` steht und `.page` bei 1180 px abschneidet. Dazu gehoert `overflow-x: clip` am `body` (siehe oben): `100vw` zaehlt die Bildlaufleiste mit und erzeugt sonst rund 15 px Ueberhang nach rechts. `clip` statt `hidden`, weil `hidden` einen Bildlaufbereich aufmacht und die klebende Navigation damit ihren Halt verliert. */ .hero { position: relative; overflow: hidden; background: var(--nws-night); width: 100vw; margin-left: calc(50% - 50vw); padding: 70px 0 64px; } .hero canvas { position: absolute; inset: 0; z-index: 1; } /* Der Inhalt bleibt im Raster der uebrigen Seite — dieselbe Breite und derselbe Seitenabstand wie `.page` plus `.section`. */ .hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); } .hero .h1 { color: #fff; max-width: 720px; } .hero .lead { max-width: 520px; } .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 30px; } /* ---- Trust-Zeile --------------------------------------------------------- */ .trustline { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); font-size: 13px; color: var(--nws-on-dark-muted); } .trustline span { display: inline-flex; align-items: center; gap: var(--space-2); } /* ---- Schritt-Zeile (Blick in die Maschine) ------------------------------- */ .steps { display: flex; flex-direction: column; gap: 11px; } .step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: var(--fw-medium); } .step-idle { opacity: .34; } .step-done { color: #e6e6f5; } .step-live { color: var(--accent); } .chk { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--accent); color: var(--nws-lime-ink); } .chk-idle { background: transparent; border: 2px solid rgba(255,255,255,.22); } .chk-live { background: transparent; border: 2px solid var(--accent); animation: pulse 1.4s infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } } .step .badge-dummy { margin-left: auto; } /* ---- CTA-Band ------------------------------------------------------------ */ .cta-band { position: relative; overflow: hidden; background: var(--nws-night); border-radius: var(--radius-panel); padding: 52px; margin: var(--space-section) var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; } .cta-band canvas { position: absolute; inset: 0; z-index: 1; } .cta-band .h2 { color: #fff; margin-bottom: 10px; } /* ---- Footer -------------------------------------------------------------- */ .footer { margin-top: var(--space-section); padding: var(--space-10) var(--gutter) var(--space-16); border-top: 1px solid var(--border-hairline); font-size: 13px; color: var(--text-label); } .footer-cols { display: flex; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; } .footer a { color: var(--nws-body); } /* ---- Variantenschild (nur lokal, nicht Teil der Marke) ------------------- */ .variant-flag { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--nws-night); color: #fff; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .04em; box-shadow: var(--shadow-float); } .variant-flag a { color: var(--accent); } /* ---- Responsiv ----------------------------------------------------------- */ @media (max-width: 900px) { :root { --gutter: 22px; --fs-display: 38px; --fs-h2: 26px; } /* Die Regeln der Navigation standen bis zum 08.08.2026 hier. Sie brauchen eine eigene, frühere Grenze als der Rest dieses Blocks und stehen deshalb darunter. */ /* Die Umbruchregel für `.stats` stand hier und lief ins Leere: `.stats` selbst wird erst weiter unten definiert und hat damit bei gleicher Spezifität das letzte Wort. Sie steht jetzt am Dateiende (08.08.2026). */ .stance { margin-top: var(--space-10); } /* Nur die Hoehe zurueck — der Ausbruch auf die volle Fensterbreite aus der Grundregel bleibt. Ein `margin`-Kurzschreiber stuende hier sonst gegen `margin-left: calc(50% - 50vw)` und rueckte den Hero wieder ein (gefunden beim Nachmessen bei 768 und 375 px, PLAN 1ar). Die seitlichen Abstaende kommen aus `.hero-inner` und damit aus `--gutter`. */ .hero { padding: 46px 0 40px; } .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } .card { padding: 24px; } .cta-band { padding: 34px 26px; } } /* Mobilmenü. `display: contents` löst `.nav-links` als Kasten auf, damit die Punkte direkte Flex-Kinder von `.nav` werden — nur so kann der CTA oben rechts stehen bleiben, während die Links darunter eine eigene Zeile bekommen. Ohne diesen Kniff müsste die Auszeichnung in zwölf Dateien umgebaut werden. Die Ruhelage ist „offen": fehlt `data-menu`, weil das Skript nicht lief, sieht der Besucher alle Punkte statt keiner. Die Grenze lag bis zum 08.08.2026 bei 900 px, und das war zu spät. Die Schreibtisch-Leiste braucht je nach Seite mehr: `/leistungen` 1084 px (fünf Punkte, dazu die lange Beschriftung „Angebots-Studio anfordern"), `/okr-app` 1031 px, `/ki-einfuehrung` 1027 px, die Wissensseiten rund 960 px. Zwischen 901 px und diesen Werten stand die Leiste unter Druck: auf `/leistungen` ragten die Punkte 29 px über den Innenrand hinaus und die Leiste wuchs auf 137 px, auf `/okr-app` schob sich die ganze Seite seitwärts. 1000 px ist die Grenze, ab der nichts mehr übersteht, und sie ist dieselbe, an der `.hero-split`, `.demo`, `.tier` und `.grid-praxis` ohnehin umbrechen. ACHTUNG: `static/nav.js` trägt dieselbe Grenze ein zweites Mal (`min-width: 1001px`, schließt das Menü beim Aufziehen des Fensters). Wer hier ändert, ändert dort mit. PLAN §1z. */ @media (max-width: 1000px) { .nav { flex-wrap: wrap; row-gap: 0; justify-content: flex-start; } .nav-links { display: contents; } .nav-links .btn { order: 2; margin-left: auto; } .nav-toggle { order: 3; } .nav-links a:not(.btn) { order: 4; width: 100%; padding: 13px 2px; border-top: 1px solid var(--border-hairline); } .nav-links a:not(.btn):first-of-type { margin-top: 16px; } .nav[data-menu] .nav-toggle { display: inline-flex; } .nav[data-menu="zu"] .nav-links a:not(.btn) { display: none; } } /* Auf dem Telefon passt der CTA neben der Wortmarke nicht mehr in die Zeile. Bis zum 08.08.2026 rutschte er dann von selbst nach unten und saß dort wegen `row-gap: 0` ohne jeden Abstand unter „by Peter von Aspern"; der Menüknopf wurde mitgezogen und stand neben ihm statt oben rechts. Der Nullabstand bleibt richtig — er sorgt dafür, dass die Menüpunkte im geöffneten Zustand bündig untereinander stehen. Er traf nur den Knopf mit. Jetzt ist die Zweizeiligkeit gewollt: Marke und Menüknopf oben, der CTA darunter über die volle Breite. Der Knopf bleibt damit dauerhaft sichtbar und wird leichter zu treffen; die Leiste wächst von 124 auf 143 px. 600 px ist gemessen, nicht geschätzt. Zwei Bänder liefen auseinander: Der CTA rutschte je nach Länge der Beschriftung ab 380 px (/lead-radar, „Zur Demo") bis 515 px (/leistungen, „Angebots-Studio anfordern") nach unten. Darüber gab es ein zweites Band bis 571 px, in dem stattdessen der Menüknopf allein in die zweite Zeile fiel — nur auf /leistungen, nur dort ist die Beschriftung lang genug. 600 px deckt beide ab und lässt Tablets unberührt. Wer eine längere Beschriftung einführt, misst nach und zieht die Grenze mit. PLAN §1z. */ @media (max-width: 600px) { .nav-toggle { order: 1; margin-left: auto; } .nav-links .btn { order: 2; flex-basis: 100%; margin: 12px 0 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* =========================================================================== Seiten-Bausteine Alles ab hier baut weiter auf den Tokens oben auf — keine neuen Farben. =========================================================================== */ /* ---- Demo „Blick in die Maschine" (Leistungen) --------------------------- */ .demo { display: grid; grid-template-columns: .95fr 1.25fr 1fr; gap: var(--space-4); align-items: start; } .demo-col { display: flex; flex-direction: column; } .demo .card { display: flex; flex-direction: column; height: 100%; } .anfrage-input { width: 100%; min-height: 205px; resize: vertical; padding: 14px; margin-bottom: var(--space-3); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: #f2f3fa; color: var(--text-body); font-family: var(--font-sans); font-size: 13.5px; line-height: var(--lh-body); } .anfrage-input:focus { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 1px; } .presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .preset { padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--nws-border-strong); background: var(--nws-white); font-family: inherit; font-size: 12px; font-weight: var(--fw-medium); color: var(--nws-body); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); } .preset:hover { border-color: var(--primary); color: var(--primary); } .preset[aria-pressed="true"] { background: var(--surface-tint); border-color: var(--primary); color: var(--primary); } .maschine { border: 1.5px solid var(--primary); } .maschine .steps { margin-top: var(--space-4); } .step-note { margin: 4px 0 0 30px; font-size: 12px; line-height: 1.5; color: var(--nws-on-dark-muted); max-width: 320px; } .progress { height: 3px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); overflow: hidden; margin-top: auto; } .progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s var(--ease-out); } .result { font-size: 13.5px; line-height: 1.7; color: var(--text-body); } .result h4 { margin: 18px 0 4px; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-label); font-weight: var(--fw-semibold); } .result h4:first-of-type { margin-top: 0; } .result ul { margin: 0; padding-left: 17px; } .result li { margin-bottom: 3px; } .result .cite { color: var(--primary); font-weight: var(--fw-medium); } .result-empty { color: var(--text-label); font-size: 13.5px; line-height: 1.7; margin: auto 0; } .fade { animation: fadein .45s var(--ease-out) both; } @keyframes fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } /* ---- Vorher / Nachher ---------------------------------------------------- */ .ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .ba .card p { font-size: 14.5px; } .ba-tag { display: block; margin-bottom: 10px; font-size: var(--fs-caption); font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } /* ---- Leistungstreppe ----------------------------------------------------- */ .tier { display: grid; grid-template-columns: 200px 1fr 250px; gap: var(--space-8); align-items: start; padding: 30px; border-radius: var(--radius-card); } .tier + .tier { margin-top: var(--space-3); } .tier-light { background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); } .tier-indigo { background: var(--primary); color: #d5d4f5; position: relative; overflow: hidden; } .tier-indigo .h3 { color: #fff; } .tier-indigo .label { color: var(--accent); } .tier-indigo li::marker { color: var(--accent); } .tier-dur { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -.01em; margin-top: 8px; color: var(--text-heading); } .tier-indigo .tier-dur { color: #fff; } .tier-sub { font-size: 12.5px; color: var(--text-label); margin-top: 4px; } .tier-indigo .tier-sub { color: rgba(255,255,255,.62); } .tier ul { margin: 0; padding-left: 17px; font-size: 13.5px; line-height: 1.65; color: var(--text-body); } .tier-indigo ul { color: inherit; } .tier li { margin-bottom: 5px; } .tier-col { position: relative; z-index: 2; } /* ---- Ablauf-Zeitstrahl --------------------------------------------------- */ .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .flow-item { position: relative; padding-top: 34px; } .flow-item::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 1.5px; background: var(--nws-border-strong); } .flow-item:last-child::before { right: 50%; } .flow-dot { position: absolute; top: 0; left: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--nws-white); border: 2.5px solid var(--primary); } .flow-item.is-first .flow-dot { background: var(--accent); border-color: var(--accent); } /* Zielpunkt der Treppe — der Schritt, auf den alles zuläuft, trägt Lime. */ .flow-item.is-goal .flow-dot { background: var(--accent); border-color: var(--accent); } .flow-item.is-goal h3 { color: var(--primary); } /* `block` statt inline: nur so lässt sich die Nummer beim Durchlaufen der Strecke mitbewegen — auf inline-Elemente wirkt `transform` nicht. Am Layout ändert es nichts, das Element stand ohnehin allein in seiner Zeile. */ .flow-n { display: block; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .08em; color: var(--text-label); } .flow h3 { margin: 6px 0 6px; font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -.01em; } .flow p { margin: 0; font-size: 13.5px; color: var(--text-body); } /* ---- Für wen ------------------------------------------------------------- */ .fit .card ul { margin: 12px 0 0; padding-left: 17px; font-size: 13.5px; color: var(--text-body); line-height: 1.65; } /* ---- Porträt ------------------------------------------------------------- */ .portrait-frame { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-float); } .portrait { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; } /* Auf der Startseite steht das Bild neben Text — dort ein ruhigerer Anschnitt statt des vollen Hochformats. */ .portrait-frame.is-tile { aspect-ratio: 4 / 5; } /* ---- Fließtext (Über mich, Rechtstexte) ---------------------------------- */ .prose { max-width: 680px; } .prose p { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-body); margin: 0 0 var(--space-4); } .prose h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--text-heading); } .prose ul { padding-left: 18px; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-body); } .prose li { margin-bottom: 6px; } .prose a { color: var(--primary); font-weight: var(--fw-medium); } /* ---- FAQ ------------------------------------------------------------------ */ /* `
`/`` statt eigener Klapp-Logik: funktioniert ohne JavaScript, ist von Haus aus per Tastatur bedienbar und wird von der Seitensuche des Browsers aufgeklappt. Kein Zustand, den wir pflegen müssen. */ .faq { max-width: 820px; border-top: 1px solid var(--border-hairline); } .faq details { border-bottom: 1px solid var(--border-hairline); } .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); padding: 20px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: var(--fw-semibold); color: var(--text-heading); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--font-mono); font-size: 18px; line-height: 1; color: var(--primary); } .faq details[open] summary::after { content: "–"; } .faq summary:hover { color: var(--primary); } .faq-a { margin: 0 0 22px; padding-right: 40px; font-size: 14.5px; line-height: 1.7; color: var(--text-body); } .faq-a + .faq-a { margin-top: -10px; } .faq-a a { color: var(--primary); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 2px; } /* ---- Micro-Animationen beim Scrollen -------------------------------------- */ /* Die Ruhelage `.rv` setzt ausschliesslich `static/reveal.js`. Steht sie nicht im HTML, kann auch nichts unsichtbar hängenbleiben, wenn das Skript nicht läuft — gleiche Bauart wie `is-bereit` bei den Diagrammen (PLAN §1d). `no-preference` statt einer Ausnahmeregel: wer Bewegung abbestellt hat, bekommt die Ruhelage gar nicht erst. */ @media (prefers-reduced-motion: no-preference) { .rv { opacity: 0; transform: translateY(18px); } .rv.rv-da { opacity: 1; transform: none; /* 0,8 s statt 0,55 — die erste Fassung wirkte hektisch. Der Weg ist gleichzeitig etwas länger (18 px), sonst sieht langsam nach zäh aus statt nach ruhig. */ transition: opacity .8s var(--ease-out, cubic-bezier(.2,.6,.2,1)), transform .8s var(--ease-out, cubic-bezier(.2,.6,.2,1)); transition-delay: var(--rv-d, 0ms); } } /* Die Ablaufstrecke blendet nicht als Block auf, sondern läuft einmal durch: Punkt, Strecke, Text — Schritt für Schritt von links nach rechts, in der Reihenfolge, in der ein Projekt sie durchläuft. Ausgelöst wird das von derselben Mechanik wie jeder andere Aufblender (`.rv` / `.rv-da` aus `reveal.js`); hier steckt nur die Choreografie, kein zweiter Codepfad. Läuft das Skript nicht, fehlt `.rv` — dann steht die Strecke fertig da (PLAN §1d). */ @media (prefers-reduced-motion: no-preference) { /* Der Rahmen selbst bleibt ruhig: eine Strecke, die von links nach rechts durchläuft, während der ganze Block gleichzeitig von unten hereinschiebt, wäre eine Bewegung zu viel. */ .flow.rv { opacity: 1; transform: none; } .flow.rv .flow-item::before { transform: scaleX(0); transform-origin: left center; } .flow.rv .flow-dot { opacity: 0; transform: scale(.4); } .flow.rv .flow-n, .flow.rv h3, .flow.rv p { opacity: 0; transform: translateY(8px); } /* Ein Schritt alle 420 ms — langsam genug, dass man dem Weg folgen kann, schnell genug, dass die vier Schritte in gut anderthalb Sekunden durch sind. Wer schon weiterscrollt, verpasst nichts Inhaltliches. */ .flow.rv .flow-item:nth-child(2) { --fl-d: 420ms; } .flow.rv .flow-item:nth-child(3) { --fl-d: 840ms; } .flow.rv .flow-item:nth-child(4) { --fl-d: 1260ms; } /* Reihenfolge je Schritt: erst der Punkt, dann wächst die Strecke aus ihm heraus zum nächsten Punkt, der Text kommt knapp dahinter mit. */ .flow.rv-da .flow-dot { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .42s cubic-bezier(.2,.8,.3,1.25); transition-delay: var(--fl-d, 0ms); } .flow.rv-da .flow-item::before { transform: scaleX(1); transition: transform .44s var(--ease-out, cubic-bezier(.2,.6,.2,1)); transition-delay: calc(var(--fl-d, 0ms) + 170ms); } .flow.rv-da .flow-n, .flow.rv-da h3, .flow.rv-da p { opacity: 1; transform: none; transition: opacity .5s var(--ease-out, cubic-bezier(.2,.6,.2,1)), transform .5s var(--ease-out, cubic-bezier(.2,.6,.2,1)); transition-delay: calc(var(--fl-d, 0ms) + 120ms); } } /* ---- Zahlenband ---------------------------------------------------------- */ /* Die Seite hatte bis zum 01.08.2026 keine einzige Zahl. Der Grundsatz aus §1 verbietet *erfundene* Zahlen — belegte Fremdzahlen verbietet er nicht. Deshalb trägt jede Zahl nicht nur ihre Quelle, sondern auch ihre Bezugsgruppe: Großunternehmen, international, Erklärmodell. Wer die Grenze der eigenen Belege mitliefert, macht dasselbe wie die Demo auf /leistungen. */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin: var(--space-10) 0 var(--space-6); } .stat { padding-top: var(--space-5); border-top: 2px solid var(--text-heading); } .stat-num { display: block; font-size: 46px; line-height: 1; font-weight: var(--fw-display); letter-spacing: var(--tracking-display-serif); color: var(--text-heading); } .stat-num span { color: var(--primary); } .stat-claim { margin: var(--space-4) 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); } .stat-src { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-label); } .stats-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-label); } /* ---- Der Satz mit Haltung ------------------------------------------------ */ /* Ein Satz, den man weitererzählen kann, gehört auf eine eigene Bühne und nicht ans Ende eines Kartentexts. „Abhängigkeit ist kein Geschäftsmodell" stand vorher in der dritten Prinzipienkarte und ging dort unter. */ .stance { margin: var(--space-16) 0 0; padding: 0 0 0 var(--space-6); border-left: 3px solid var(--accent); } .stance p { margin: 0; max-width: 18ch; font-size: var(--fs-h2); line-height: 1.15; font-weight: var(--fw-display); letter-spacing: var(--tracking-display-serif); color: var(--text-heading); } .stance cite { display: block; margin-top: var(--space-4); font-size: 13px; font-style: normal; color: var(--text-label); } /* ---- Farbrhythmus -------------------------------------------------------- */ /* Bis zum 01.08.2026 stand alles auf einem durchgehenden hellen Grund; Struktur entstand nur durch Kartenränder, und ab dem dritten Bildschirm las sich die Seite als Liste statt als Komposition. Ein Band färbt eine Sektion vollflächig ein und macht sichtbar, wo ein Kapitel anfängt und aufhört. Nur vorhandene Flächenfarben, kein neues Schema. Weiß ist bewusst nicht dabei: die Karten sind weiß und würden auf einem weißen Band verschwinden. */ .section.band { background: var(--surface-tint); /* Innen kommt der Abstand aus dem Padding, sonst reißt die Fläche auf. Außen braucht es trotzdem Luft: ohne den Außenabstand begann die Farbfläche direkt an der Unterkante der Karten darüber, und die Kante sah wie ein Fehler aus statt wie ein Kapitelwechsel (gemeldet 01.08.2026). */ margin-top: var(--space-16); padding-top: 84px; padding-bottom: 84px; } /* Die Sektion nach einem Band braucht keinen eigenen Außenabstand mehr, ihr inline `padding-top` reicht. */ .section.band + .section { margin-top: 0; } /* Zwei Bänder hintereinander sind ein Kapitel, keine zwei — Naht und Außenabstand dazwischen müssen weg. */ .section.band + .section.band { margin-top: 0; padding-top: 0; } /* ---- Aktive Navigation --------------------------------------------------- */ /* `page` = diese Seite. `true` = ein Sammelpunkt, unter den die Seite gehört (Spur B: „Angebote" auf den drei Anwendungsfeldern). Beide sehen gleich aus — der Unterschied ist für Vorleseprogramme, nicht fürs Auge. */ .nav-links a[aria-current] { color: var(--primary); font-weight: var(--fw-semibold); } @media (max-width: 1000px) { .demo { grid-template-columns: 1fr; } .tier { grid-template-columns: 1fr; gap: var(--space-5); } .flow { grid-template-columns: 1fr 1fr; } .ba { grid-template-columns: 1fr; } } @media (max-width: 640px) { .flow { grid-template-columns: 1fr; } .flow-item::before { display: none; } } /* Praxis-Panel auf der Startseite */ @media (max-width: 1000px) { .grid-praxis { grid-template-columns: 1fr !important; } } /* ---- Lead-Formular im CTA-Band ------------------------------------------ */ .cta-form { display: flex; flex-direction: column; gap: var(--space-3); /* Feste Spaltenbreite: sonst zieht der Hinweistext das Formular breit und es rutscht unter den Fliesstext statt daneben zu stehen. */ flex: 0 0 380px; max-width: 100%; } .cta-field { display: flex; flex-direction: column; gap: 6px; } .cta-field label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--nws-on-dark-muted); } .cta-input { height: var(--space-13); padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-family: var(--font-sans); font-size: 14.5px; } .cta-input::placeholder { color: rgba(255,255,255,.35); } .cta-input:focus { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 1px; border-color: var(--accent); } .cta-input[aria-invalid="true"] { border-color: #f0a0a0; } .cta-error { font-size: 12px; color: #f5b5b5; margin: 0; } .cta-note { font-size: 12px; line-height: 1.55; color: var(--nws-on-dark-muted); margin: 0; } .cta-note a { color: var(--accent); } /* Spam-Falle: für Menschen unsichtbar, für simple Bots ausfüllbar. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cta-done { display: flex; gap: var(--space-3); align-items: flex-start; max-width: 380px; } .cta-done .chk { margin-top: 3px; } .cta-done p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--nws-on-dark); } .cta-done strong { color: #fff; } @media (max-width: 820px) { .cta-form { flex-basis: 100%; } } /* ---- Terminwahl im Kontaktband (31.08.2026, PLAN §1be) ------------------ Der Kalender liegt eingeklappt hinter dem Knopf und wird erst auf Klick geladen (Begründung in `static/termin.js`). Das Panel ist ein eigenes Flex-Kind des Bandes mit `flex-basis: 100%` — dadurch fällt es beim Aufklappen unter Text und Knöpfe, statt die Spalten zu zerdrücken. */ .termin-panel { position: relative; z-index: 2; flex: 0 0 100%; width: 100%; margin-top: var(--space-6); } /* Wie weit das Panel unter 900 px aus der Innenpolsterung seines Bandes ausbricht. Der Wert ist die **schmale** Polsterung des jeweiligen Bandes; stand bis zum 09.09.2026 fest auf 26 px und war damit an `.cta-band` gefesselt. Seit die Terminbuchung auch im `.w-cta` der Wissensspur steht (Polsterung 44 px), setzt jedes Band seinen eigenen Wert. */ .cta-band { --termin-ausbruch: 26px; } .termin-panel[hidden] { display: none; } /* Helle Fläche unter dem Kalender: Calendly liefert einen hellen iframe, der ohne Träger als abgeschnittenes Rechteck im dunklen Band steht. Der Ton ist derselbe, den der Kalender selbst über `background_color` gesetzt bekommt (01.09.2026) — sonst steht eine weiße Kante um den Kalender, sobald er geladen ist, und während des Ladens springt die Fläche in der Farbe. */ .termin-buehne { background: #f7f8fc; border-radius: var(--radius-panel); overflow: hidden; min-width: 320px; /* Grundhöhe ist die Terminauswahl. Den zweiten Schritt — das Formular mit den vier Pflichtfeldern — meldet Calendly per postMessage; `termin.js` setzt dann `data-schritt`. Der Übergang läuft weich, sonst springt der Seiteninhalt unter dem Kalender. Zwei Sackgassen, beide im Test am 31.08.2026 gefunden und beide hier vermieden: · Die Höhe kam zuerst aus einer Variablen (`height: var(--termin-hoehe)`). Bei gesetztem `transition` rechnet der Browser den Wert dann nicht neu — die Fläche blieb auf 700 px stehen, obwohl die Variable schon 940 war. Deshalb stehen die Höhen direkt an den Regeln. · Danach stand hier ein weicher Übergang (`transition: height .25s`). Der läuft in einem verdeckten oder im Hintergrund liegenden Tab nicht weiter, und die Fläche bleibt auf der alten Höhe hängen — wer während der Buchung den Tab wechselt, käme auf ein beschnittenes Formular zurück. Der Sprung kostet nichts: er folgt unmittelbar auf einen Klick, den der Besucher gerade selbst gemacht hat. */ height: 700px; } .termin-buehne[data-schritt="formular"] { height: 940px; } /* Ladezustand: die Fläche steht sofort in voller Höhe, damit der Seiteninhalt beim Eintreffen des iframes nicht springt. */ .termin-buehne[data-laedt] { display: flex; align-items: center; justify-content: center; } .termin-buehne[data-laedt]::after { content: "Kalender wird geladen …"; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-label); color: var(--text-label); } .termin-fehler { margin: 0; padding: var(--space-8); font-size: 14px; line-height: 1.6; color: var(--text-body); } /* Der Datenschutzhinweis steht unter dem Kalender, nicht darüber: vor dem Klick gibt es nichts zu erklären, danach gehört er zur Fläche. */ .termin-hinweis { margin: var(--space-3) 0 0; font-size: 12px; line-height: 1.55; color: var(--nws-on-dark-muted); } .termin-hinweis a { color: var(--accent); } @media (max-width: 900px) { /* Zwei Korrekturen aus der Messung am 375-px-Telefon (31.08.2026): 1. Calendly braucht 320 px Breite. Im Band blieben davon nur 279 übrig (331 Bandbreite minus 2 × 26 px Polsterung), und weil `.cta-band` `overflow: hidden` trägt, wurde der rechte Rand des Kalenders still abgeschnitten — kein Scrollbalken, nur ein fehlendes Stück. Das Panel bricht deshalb aus der Innenpolsterung aus und nimmt die volle Bandbreite. `min-width: 0` gibt darunter (360-px-Geräte) das Nachgeben frei: eine etwas gedrängte Ansicht ist besser als eine beschnittene. 2. Schmal schaltet Calendly auf eine Spalte um und braucht mehr Höhe; 700 px schneiden dort die Zeitenliste ab. */ .termin-panel { flex-basis: calc(100% + 2 * var(--termin-ausbruch, 26px)); width: calc(100% + 2 * var(--termin-ausbruch, 26px)); margin-left: calc(-1 * var(--termin-ausbruch, 26px)); margin-right: calc(-1 * var(--termin-ausbruch, 26px)); } .termin-buehne { height: 1000px; min-width: 0; } .termin-buehne[data-schritt="formular"] { height: 1240px; } .termin-hinweis { padding-left: var(--termin-ausbruch, 26px); padding-right: var(--termin-ausbruch, 26px); } } /* ========================================================================= Konversionsstrecke der Landingpages (05.08.2026, PLAN §1y) Vier Bausteine, die auf allen vier Leistungsseiten in derselben Reihenfolge stehen: Beleg-Karte im Hero, Eckdatenband, Problemraster, Rechner. Sie liegen hier und nicht in einem `