/* ============================================================================ NEST — Web-Übersetzung des Design-Systems Quelle: nest-website/site/assets/css/site.css (Layout, Typo, Flächen, Linien) plus die CI-Farbe #ffd640; nest-assets/design.md ist für das Design abgelöst (Spec §3). Regel: Die Vorlage gewinnt. Kein Verlauf, kein Schatten, keine Rundung, nie Weiß auf Gelb. Flächen: nicht mehr „höchstens eine gelbe Fläche pro Seite“ als Daumenregel, sondern der ausdrückliche Flächen-Vertrag in §10 — genau ein `gelb` pro Seite (der Titelblock), und zwei benachbarte Abschnitte tragen nie dieselbe Fläche. Sichtbar im Admin als `surface`-Eigenschaft der Blöcke. ========================================================================== */ @layer tokens, base, layout, components, utilities; /* ---------------------------------------------------------------- tokens --- */ @layer tokens { :root { /* Farbe (aus tokens.css). Gelb ist EINE Vollfläche pro Seite. */ --nest-yellow: #ffd640; --ink: #231f20; --paper: #ffffff; --grey-200: #dcddde; --grey-300: #d1d3d4; --grey-400: #a7a9ac; --grey-500: #888888; --grey-700: #737477; /* Flächen jenseits von Weiß und Ink (Spec §10). `--grund` kommt aus der Referenz (`site.css:--grund`) und ist der hellste Ton, der sich von `--paper` noch abhebt — ohne ihn wäre „grund“ einfach Weiß. `--anthrazit` ist der Referenzwert und wird seit §8 gebraucht: der Abschnitt `projekte` (Nr. 6) trägt ihn. Zu wissen, was er leistet: unsere CI-Schwarz ist `--ink: #231f20`, der Referenzwert liegt nur rund 5 % darüber. In der Referenz tragen die beiden Dunkeltöne `--schwarz: #0F0F10` und `--anthrazit: #282A2C` einen sichtbaren Stufenunterschied; bei uns ist der Schritt von `dunkel` auf `anthrazit` ein leiser. Der Flächen-Vertrag (Spec §10) prüft Namen, nicht Helligkeiten — die Nachbarschaft `massstaebe` (dunkel) → `projekte` (anthrazit) erfüllt ihn also, auch wenn die Kante nicht auffällt. Sie fällt dort auch nicht nötig: `projekte` hebt sich durch die gelbe Tafel ab, nicht durch seinen Grund. */ --grund: #f2f2ef; --anthrazit: #282a2c; --statement: var(--nest-yellow); --rule: var(--ink); /* Schrift */ --font-sans: "Apercu", "Helvetica Neue", Arial, sans-serif; --font-mono: "Apercu Mono", ui-monospace, Menlo, monospace; /* Linien */ --rule-heavy: 8px; --rule-light: 3px; --rule-hair: 2px; /* Raster & Abstände. Die Maße kommen von der Referenz (`nest-website`), die ihre Inhalte in `.wrap` auf 1680px und ihren Rand auf 16–64px begrenzt. Die erste Fassung stand bei 1152px/85px: auf einem 3440px breiten Schirm war die Seite damit ein schmaler Streifen in der Mitte. */ --measure: 105rem; /* 1680px — wie `.wrap` der Referenz */ --prose: 62ch; /* Lesemaß des Fließtexts — wie `p{max-width:62ch}` */ /* φ-Raster von strongroots.at. Dort gemessen: step-1 1rem, step-2 1.618rem, step-3 2.618rem, step-5 4.236rem, step-8 6.854rem. Die Grenzen der fluiden Werte kommen aus dieser Skala; das Abschnittspolster liegt damit bei 67,8–109,7px statt bei 72–168px. */ --step-1: 1rem; --step-2: 1.618rem; /* 25,888px */ --step-3: 2.618rem; /* 41,888px */ --step-5: 4.236rem; /* 67,776px */ --step-8: 6.854rem; /* 109,664px */ --gutter: clamp(var(--step-1), 3vw, var(--step-2)); --margin: clamp(var(--step-2), 4.4vw, var(--step-5)); --space-section: clamp(var(--step-5), 7vw, var(--step-8)); --space-inset: var(--step-2); /* Fluide Typo-Skala. Der Fuß jeder Klammer ist der Mobilwert — die Referenz setzt ihre Startseiten-h1 auf 32px (`--hero-h1`), nicht auf die 40px der ersten Fassung. Bei 390px sind 40px Versalschrift zu breit: „Leerstandsmanagement.“ misst darin 507px und passt in keine Telefonbreite. h1/h2 folgen jetzt sketches `--hero-h1`/`--h2` (5.2vw, max 80px). */ --text-cover-title: clamp(2rem, 5.2vw, 5rem); /* 32 → 80px */ --text-heading: clamp(2.125rem, 5.2vw, 5rem); /* 34 → 80px */ --text-statement: clamp(1.625rem, 3.3vw, 3.25rem); /* 26 → 52px — wie `.aussage` */ --text-subhead: 1.125rem; /* 18px */ /* Fließtext wächst mit dem Schirm — 17–20px wie die Referenz. Fest bei 16px wirkte er auf einem großen Schirm wie ein Beipackzettel. */ --text-body: clamp(1.0625rem, 1.25vw, 1.25rem); /* 17 → 20px */ --leading-body: 1.618; /* strongroots: 29,124px bei 18px */ --text-meta: 1.25rem; /* 20px */ --text-footer: 0.875rem; /* 14px */ /* Bewegung. Kurve wie nest-website (dort `--ease`); die Dauern kommen von strongroots.at (`--dur-s .618s`, `--dur-m 1s`, `--dur-l 1.618s`, `--dur-xl 2.618s`, Micro-Interaktion .15s). */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-ui: cubic-bezier(.4, 0, .2, 1); --dur-fast: .15s; --dur-s: .618s; --dur-m: 1s; --dur-l: 1.618s; --dur-xl: 2.618s; } /* Schriften selbst hosten — nie Inter/Roboto als Ersatz (design.md §3). WOFF2 statt OpenType (2026-10-20): gleiche neun Schnitte, 628 KB → 249 KB. Konvertiert mit fontTools 4.67 (`ttLib.woff2 compress`); die OTF-Quellen liegen nicht mehr im Repo — wer einen Schnitt ändert, konvertiert neu. */ @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Light-a7lUkck.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-LightItalic-uZ5De4R.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Regular-E080sLq.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Italic-sICypeE.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Medium-Dnnku2V.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-MediumItalic-H-UCtGm.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-Bold-POIzrwr.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Apercu"; src: url("../fonts/Apercu-BoldItalic-ZMF6NnG.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Apercu Mono"; src: url("../fonts/Apercu-Mono-8T7NRhn.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } } /* ------------------------------------------------------------------ base --- */ @layer base { *, *::before, *::after { box-sizing: border-box; } /* Der stehende Kopf (siehe `.nest-header-sticky`) deckt sonst die Sprungziele zu, sobald die Navigation auf `#methode`, `#projekte` und die übrigen Abschnitte verweist. Die Höhe ist geschätzt: Marke plus Innenabstand des Kopfes; ein paar Pixel Luft bleiben. */ html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: 5.5rem; } html:focus-within { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); font-weight: 300; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Lesemaß global — wie `p{max-width:62ch}` der Referenz. Einzelne Bausteine dürfen enger bleiben; `max-width:none` hebt die Grenze bewusst auf. Die Trennung steht ebenfalls global: die Referenztexte bringen weiche Trennstellen mit, die Sulu-Inhalte nicht — ohne `hyphens: auto` bliebe ein deutsches Kompositum im schmalen Kasten ungetrennt. */ p { max-width: var(--prose); hyphens: auto; } /* Sichtbarer Fokus — Pflicht, nicht optional. */ :focus-visible { outline: var(--rule-light) solid var(--ink); outline-offset: 3px; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; } a:hover { text-decoration-thickness: 2px; } img, svg, video { display: block; max-width: 100%; height: auto; } /* Bilder sind eckig und randlos (design.md §5). */ figure { margin: 0; } figcaption { margin-top: .75rem; font-style: italic; } /* Titelzeilen und Kapitelüberschriften tragen rule-heavy (design.md §4). Satz wie die Referenz: enge Zeilenhöhe (1.02), negatives Tracking (−.025em) und ausbalancierte Umbrüche. */ .nest-title, .nest-heading { font-weight: 700; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; margin: 0; } /* Alle Überschriften tragen denselben Satz wie die Referenz, auch wenn ein Baustein nur seine Größe setzt (etwa `.nest-partner h2` oder die Kartentitel). Ohne diese Basis erbten sie die 1.618-Zeilenhöhe des Fließtexts und liefen auseinander. */ h1, h2, h3 { font-weight: 700; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; } /* Deutsche Komposita („Leerstandsmanagement“, „Zwischennutzung“) sind als EIN Wort breiter als ein Telefonschirm. Ohne Bruchstelle schiebt ein solches Wort seinen ganzen Container auf: gemessen bei 390px war das Dokument 555px breit, der Titelblock allein 507px. `hyphens: auto` trennt an der Sprachgrenze (`` steht im Grundgerüst), `overflow-wrap: anywhere` fängt den Rest (Namen, Kürzel, URLs). `anywhere` und nicht `break-word`, und das ist der springende Punkt: nur `anywhere` senkt die min-content-Breite eines Kastens. Mit `break-word` bleibt der Container so breit wie das ganze Wort — der Text würde dann nicht umbrochen, sondern an der Kante abgeschnitten. Die Referenz verlässt sich an dieser Stelle auf `overflow-x: clip` und schneidet „Leerstandsmanagement.“ auf dem Telefon ab (bei 32px sind es 405px). Hier soll das Wort lesbar bleiben. */ .nest-title, .nest-heading, .nest-subhead, .nest-eyebrow, .nest-statement, .nest-claim__text, .nest-titleblock__title, .nest-titleblock__claim, .nest-body h2, .nest-body h3, figcaption, .nest-meta, .nest-caption { hyphens: auto; overflow-wrap: anywhere; } .nest-title { font-size: var(--text-cover-title); text-transform: uppercase; } .nest-heading { font-size: var(--text-heading); } .nest-title > span, .nest-heading > span { display: block; border-bottom: var(--rule-heavy) solid var(--rule); padding-bottom: .12em; margin-bottom: .22em; } .nest-title > span:last-child, .nest-heading > span:last-child { margin-bottom: 0; } .nest-subhead { font-size: var(--text-subhead); font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .34em; margin: 0 0 .625rem; } /* Das Lesemaß begrenzt die Zeile, nicht die Spalte: Überschriften und Raster dürfen über die volle Bandbreite laufen, Fließtext nicht. Ohne diese Grenze wären Absätze auf einem breiten Schirm über 100 Zeichen lang. */ .nest-body p { margin: 0 0 1.1em; text-align: start; text-wrap: pretty; hyphens: auto; max-width: var(--prose); } .nest-caption { font-style: italic; } .nest-meta { font-size: var(--text-meta); font-weight: 500; line-height: 1.2; } } /* ---------------------------------------------------------------- layout --- */ @layer layout { .nest-shell { max-width: var(--measure); margin-inline: auto; padding-inline: var(--margin); } /* Startseite: Bänder laufen Rand zu Rand. Der Fluss zwischen den Kindern entspricht `.nest-flow`; ein Band bringt seinen eigenen Abstand mit und setzt ihn deshalb zurück. Die Spalte steht ausdrücklich auf `minmax(0, 1fr)`: eine implizite `auto`-Spalte wird nach ihrem min-content bemessen, also nach dem längsten unteilbaren Wort der Seite — und dieses eine Wort bestimmt dann die Breite ALLER Bänder. Mit `minmax(0, 1fr)` bleibt die Spalte am Viewport und ein zu breites Wort bleibt eine Angelegenheit seines eigenen Bandes. */ .nest-page { display: grid; grid-template-columns: minmax(0, 1fr); } .nest-page > * + * { margin-block-start: calc(var(--gutter) * 2); } .nest-page > .nest-full { margin-block-start: 0; } .nest-full { width: 100%; } /* Flächen-Vertrag (Spec §10). Jeder abschnittstragende Block trägt genau eine Fläche; sie entscheidet Hintergrund, Linien- UND Fokusfarbe, weil beide sonst auf dunklem Grund unsichtbar wären (Spec §12 Nr. 7: Fokusring gelb auf dunklen Flächen, schwarz auf hellen). `weiss` ist die Vorgabe und entspricht dem Zustand vor diesem Vertrag: `.nest-full` hatte nie einen Hintergrund, die Bänder standen also auf dem Seitengrund. Die Fläche ist damit rückwärtskompatibel — ein Block ohne `surface` sieht aus wie bisher. `--ink` bleibt als Klassenname erhalten: `homepage-contact.html.twig` und die Button-Regel weiter unten hängen daran. Es ist die alte Schreibweise für `dunkel`. */ .nest-full--weiss { background: var(--paper); color: var(--ink); --rule: var(--ink); } .nest-full--grund { background: var(--grund); color: var(--ink); --rule: var(--ink); } .nest-full--gelb { background: var(--nest-yellow); color: var(--ink); --rule: var(--ink); } /* Rollentrennung der Dunkeltöne (Wunsch 2026-10-20, Variante B): die eigenständigen dunklen Flächen — Datenblatt, Cookie-Leiste, Planrahmen, Lightbox, Band „Ausgewählte Projekte“ — stehen auf `--anthrazit`; die Bänder `ink`/`dunkel` behalten `--ink`. Grund: auf der Startseite liegen `scale` (dunkel) und `projekte` (anthrazit) direkt nebeneinander; mit gleicher Füllfarbe wären zwei Bänder eins, mit `--ink` an der Nahtstelle bleibt die Stufe sichtbar (auch wenn sie mit 1,09:1 leise ist). Die Klassen heißen weiter `ink`/`dunkel` — Templates und die davon abhängigen Regeln (Fokusring, Knöpfe, Weg) hängen an den Namen, nicht an der Füllfarbe. */ .nest-full--ink, .nest-full--dunkel { background: var(--ink); color: var(--paper); --rule: var(--paper); } .nest-full--anthrazit { background: var(--anthrazit); color: var(--paper); --rule: var(--paper); } /* Der Fokusring ist im Rest der Datei `var(--ink)`. Auf einer dunklen Fläche wäre er damit 1:1 und unsichtbar, deshalb wird er dort auf Gelb gedreht (Spec §12 Nr. 7). Nur die Farbe überschreiben, damit Breite und Offset unverändert bleiben. */ .nest-full--ink :focus-visible, .nest-full--dunkel :focus-visible, .nest-full--anthrazit :focus-visible { outline-color: var(--nest-yellow); } .nest-section { padding-block: var(--space-section); } /* 12-Spalten-Raster; die linke Spalte bleibt für Infobox/Bild/Beschriftung. */ .nest-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--gutter); } .nest-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: var(--gutter); } @media (min-width: 60rem) { .nest-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Ein Raster- oder Flex-Kind hat `min-width: auto`, also min-content. Ein einzelnes zu breites Kind (ein langes Wort, eine Tabelle, ein langes Kürzel) reicht das nach oben durch, bis der Container über seine Spalte hinaus wächst — die Spalte bleibt dabei richtig, das Kind nicht. `min-width: 0` nimmt dem Kind das Recht, seinen Container aufzublähen; umbrechen muss es dann selbst, und dafür sorgen die Bruchstellen oben. */ .nest-page > *, .nest-flow > *, .nest-grid > *, .nest-two-col > *, .nest-cols-2 > *, .nest-cols-3 > * { min-width: 0; } } /* ------------------------------------------------------------ components --- */ @layer components { /* Titelblock — immer gelb, auch auf Foto, 1–4 Versalzeilen (design.md §9). */ .nest-titleblock { background: var(--nest-yellow); color: var(--ink); padding: clamp(1.5rem, 4vw, 2.75rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; } .nest-titleblock__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); } .nest-titleblock__logo { width: clamp(11rem, 24vw, 17.25rem); } .nest-titleblock--photo { position: relative; isolation: isolate; } .nest-titleblock--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) grayscale(1); z-index: -1; } /* Infobox — gelb, mit
, Innenabstand space-inset. */ .nest-infobox { background: var(--nest-yellow); color: var(--ink); padding: var(--space-inset); } /* Variante OHNE Gelb — zu verwenden, wenn die Seite bereits eine gelbe Fläche trägt (Titelblock, Statement, Claim). Flächen-Vertrag: genau ein `gelb` pro Seite (Spec §10). */ .nest-infobox--paper { background: var(--paper); border-top: var(--rule-heavy) solid var(--rule); padding: var(--space-inset) 0 0; } .nest-infobox__label { font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .3em; margin: 0 0 .625rem; } .nest-infobox dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1rem; margin: 0; } .nest-infobox dt { font-weight: 400; } .nest-infobox dd { margin: 0; font-weight: 700; } /* Die Labels stehen auf `max-content`, damit sie eine ruhige Kante bilden — auf einem Telefon geht das nicht auf: das längste dt („Aktivierungs- und Transformationsprojekte über 50“) bestimmt dann die Breite der ganzen Liste und schiebt die Belege über den Rand (gemessen bei 390px: 397px Liste in einer 356px Zeile). Unter 40rem stehen Label und Wert untereinander; `column-gap` wird zu `row-gap`, weil dazwischen nichts mehr nebeneinander liegt. */ @media (max-width: 39.99rem) { .nest-infobox dl { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .nest-infobox dt:not(:first-child) { margin-top: .75rem; } } /* Statement — eine gelbe Zeile, die einzige Ausnahme in der Farbregel. */ .nest-statement { font-size: var(--text-statement); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--statement); max-width: 15ch; margin: 0; } /* Am Screen für Kerninhalte besser ink auf nest-yellow (Kontrast). */ .nest-statement--solid { color: var(--ink); background: var(--nest-yellow); padding: var(--space-inset); max-width: none; } /* Figure — eckig, randlos, Platzhalter grey-200. */ .nest-figure__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-200); } /* Callout (Diagramm) */ .nest-callout { border-top: var(--rule-hair) solid var(--rule); padding-top: .4em; } .nest-callout__label { display: block; font-weight: 700; text-transform: uppercase; } /* Kontaktblock */ .nest-contact__label { font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .3em; margin: 0 0 .625rem; } .nest-contact__name { font-size: var(--text-meta); line-height: 1.5; font-weight: 700; margin: 0; } .nest-contact__lines { font-size: 1.125rem; font-style: normal; } .nest-contact__fine { margin-top: 1.75rem; font-size: var(--text-footer); line-height: 1.2; font-weight: 300; } /* Fußzeile */ .nest-footer { display: flex; justify-content: space-between; gap: var(--gutter); font-size: var(--text-footer); font-weight: 500; } /* Claim — gelbe Fläche, www unten rechts. */ /* Der Innenabstand wächst mit dem Schirm (wie `.aussage` der Referenz): feste 28px fressen auf einem 390px-Telefon 56px der 356px Zeile. */ .nest-claim { background: var(--nest-yellow); color: var(--ink); padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 1.5rem; } .nest-claim__text { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; font-weight: 700; margin: 0; } .nest-claim__url { align-self: flex-end; font-size: var(--text-footer); font-weight: 700; margin: 0; } .nest-claim--ink { background: var(--anthrazit); color: var(--nest-yellow); } .nest-claim--paper { background: var(--paper); } /* Projektkarte für Übersichten — bewusst kein Schatten, keine Rundung. */ .nest-card-project { display: grid; gap: .75rem; text-decoration: none; } .nest-card-project__scale { font-weight: 700; text-transform: uppercase; border-bottom: var(--rule-light) solid var(--rule); padding-bottom: .3em; } .nest-card-project__media { aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-200); } } /* -------------------------------------------------------------- utilities --- */ @layer utilities { .nest-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nest-skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 100; background: var(--nest-yellow); color: var(--ink); padding: .5rem .75rem; } } /* ============================================================================ NEST — Website-Komponenten (Rollout 2026) Ergänzt tokens/base/layout/components/utilities oben. Alle Regeln folgen dem Markengesetz: kein border-radius, kein box-shadow, kein Verlauf, nie Weiß auf Gelb, genau ein `gelb` pro Seite (Spec §10). Neue Klassen sind additiv. ========================================================================== */ /* ------------------------------------------------------------------ base --- */ @layer base { /* Kein horizontales Scrollen: die Seite bleibt eine einzige Spalte. Die Regel steht auf BEIDEN Elementen, und das ist Absicht: `overflow` auf `body` wird auf das Viewport übertragen, solange `html` `visible` ist — dann rechnet `body` selbst wieder mit `visible` und schneidet gar nichts ab. Gemessen bei 390px: das Dokument war 555px breit, jedes Band ragte 165px über den Rand hinaus und war nicht erreichbar. Mit `clip` auch auf `html` bleibt `body`s Regel wirksam. `clip` statt `hidden`, weil nur `clip` keinen Scroll-Container erzeugt: `position: sticky` (Kreislauf, Fußleiste) arbeitet unverändert weiter. */ html, body { max-width: 100%; } html { overflow-x: clip; } body { overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } /* Redaktioneller Text (text_editor) erbt Satzregeln aus `.nest-body`. */ .nest-body > :first-child { margin-top: 0; } .nest-body > :last-child { margin-bottom: 0; } .nest-body ul, .nest-body ol { padding-left: 1.25em; } .nest-body h2, .nest-body h3 { font-weight: 700; line-height: 1.02; letter-spacing: -.025em; margin: 1.5em 0 .5em; } .nest-body h2 { font-size: 1.75rem; } .nest-body h3 { font-size: 1.25rem; line-height: 1.12; letter-spacing: -.015em; } .nest-body blockquote { margin: 1.5em 0; padding-left: 1rem; border-left: var(--rule-light) solid var(--rule); } .nest-eyebrow { margin: 0 0 .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } } /* ---------------------------------------------------------------- layout --- */ @layer layout { /* Standard-Fluss der Blöcke innerhalb einer Seite. */ /* Dieselbe Vorsichtsmaßnahme wie bei `.nest-page`: ohne `minmax(0, 1fr)` bemisst sich die implizite Spalte am min-content des breitesten Kindes. */ .nest-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--gutter) * 2); } /* Asymmetrisches Raster: linke Spalte für Infobox/Bild/Beschriftung. */ .nest-two-col { display: grid; gap: var(--gutter); } @media (min-width: 60rem) { .nest-two-col { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; } .nest-two-col--wide { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); } } .nest-grid__right { grid-column: 4 / -1; } .nest-grid__left { grid-column: 1 / 4; } @media (max-width: 59.99rem) { .nest-grid__right, .nest-grid__left { grid-column: 1 / -1; } } /* Kopf- und Fußbereiche tragen dieselbe Satzbreite wie der Inhalt. */ .nest-band { border-top: var(--rule-heavy) solid var(--rule); } } /* ------------------------------------------------------------ components --- */ @layer components { /* --- Header ----------------------------------------------------------- */ /* Der Kopf ist ein ruhiger weißer Streifen — die Vorlage (sketch.nest.dnb.network) führt ihn ohne Trennlinie, die Navigation selbst ist die Kontur. */ .nest-header { background: var(--paper); } /* Der Kopf steht still, während die Seite fährt (Wunsch 2026-10-20): die Vorlage legt ihre Kopfzeile fest über die Seite (`site.css:.kopf{position: fixed}`); hier ist es `sticky`, weil der Kopf im Fluss bleibt und damit kein Inhaltsabstand nachgerechnet werden muss. Die volle Fensterbreite braucht der weiße Streifen, sonst liefen die Bänder neben dem Lesemaß sichtbar vorbei — `.nest-header__inner` setzt das Lesemaß wieder. */ .nest-header-sticky { position: sticky; inset-block-start: 0; z-index: 50; max-width: none; padding-inline: 0; background: var(--paper); transition: background-color var(--dur-fast) var(--ease-ui); } .nest-header-sticky .nest-header__inner { max-width: var(--measure); margin-inline: auto; padding-inline: var(--margin); } .nest-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .875rem; } .nest-brand { display: inline-flex; transition: opacity var(--dur-fast) var(--ease-ui), visibility 0s; } .nest-brand img { width: clamp(7rem, 14vw, 10.5rem); height: auto; } /* Beim Fahren tritt der Kopf zurück (Wunsch 2026-10-20): der weiße Streifen wird durchsichtig, die Wortmarke blendet aus, die Navigationskiste bleibt stehen. Sie bringt ihren weißen Grund und die 1px-Kontur selbst mit und ist damit auf jedem Untergrund lesbar — der Streifen braucht dafür keine Fläche mehr. Die Klasse setzt `assets/app.js` (Abschnitt 9). `pointer-events`: ein durchsichtiger Streifen dürfte keine Klicks schlucken, die dem Inhalt dahinter gelten; die Navigation holt sich ihre Zeigerereignisse ausdrücklich zurück. `visibility` folgt der Ausblendung mit Verzögerung, damit die Wortmarke nicht schon unsichtbar wird, während sie noch ausblendet — und beim Zurückfahren sofort wieder da ist. */ .nest-header { transition: background-color var(--dur-fast) var(--ease-ui); } .nest-header-sticky--gescrollt { background: transparent; pointer-events: none; } .nest-header-sticky--gescrollt .nest-header { background: transparent; } .nest-header-sticky--gescrollt .nest-brand { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-ui), visibility 0s var(--dur-fast); } .nest-header-sticky--gescrollt .nest-nav { pointer-events: auto; } /* --- Navigation ------------------------------------------------------- */ /* Die Leiste der Vorlage (site.css:.nav): weiße Kiste mit 1px Kontur, leichte 15px-Links, Sprachwahl in Mono und „Anfragen“ als schwarze Taste mit gelber Schrift. Kein Großbuchstaben-Satz, keine fette Grundschrift — das war der frühere Eigenbau. */ .nest-nav { display: flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--ink); padding: 4px 4px 4px 14px; font-size: 15px; font-weight: 300; } .nest-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .nest-nav__item { position: relative; } .nest-nav__link { display: block; padding: 8px 10px; font-weight: 300; text-transform: none; text-decoration: none; } .nest-nav__link:hover, .nest-nav__link:focus-visible { text-decoration: underline; } .nest-nav__link[aria-current="page"] { text-decoration: underline; } /* „Anfragen“ steht als Taste im selben Kasten (site.css:.nav .anfragen). */ .nest-nav__link--contact { margin-left: 6px; padding: 9px 14px; background: var(--ink); color: var(--nest-yellow); font-weight: 700; } .nest-nav__link--contact:hover, .nest-nav__link--contact:focus-visible { background: var(--nest-yellow); color: var(--ink); text-decoration: none; } /* Die Unterliste der Sprungmarken (neueste Projekte bzw. Pressebeiträge). Sie öffnet bei Zeigerkontakt und bei Tastaturfokus — `:focus-within` deckt den Weg über Tab ab, ohne dass ein Knopf den Zustand hält. */ /* Kein Untermenü-Aufklapper an Projekte/Presse (Wunsch 2026-10-20). */ .nest-nav__toggle { display: none; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 13px; font-weight: 400; text-transform: none; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 9px 12px; cursor: pointer; } .nest-nav__bars { display: inline-block; width: 1.25rem; height: 2px; background: var(--ink); position: relative; } .nest-nav__bars::before, .nest-nav__bars::after { content: ""; position: absolute; left: 0; width: 1.25rem; height: 2px; background: var(--ink); } .nest-nav__bars::before { top: -6px; } .nest-nav__bars::after { top: 6px; } .nest-nav__toggle[aria-expanded="true"] .nest-nav__bars { background: transparent; } .nest-nav__toggle[aria-expanded="true"] .nest-nav__bars::before { top: 0; } .nest-nav__toggle[aria-expanded="true"] .nest-nav__bars::after { top: 0; } /* Sprachwahl: Mono, 13px, im selben Kasten (site.css:.nav .sprache). */ .nest-lang { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; font-weight: 400; text-transform: uppercase; } .nest-lang__link { display: block; padding: 8px; text-decoration: none; } .nest-lang__link:hover, .nest-lang__link:focus-visible { text-decoration: underline; } .nest-lang__link[aria-current="true"] { text-decoration: underline; } @media (max-width: 52rem) { .nest-nav__toggle { display: inline-flex; } .nest-nav__list { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; flex-direction: column; gap: 0; background: var(--paper); border-top: var(--rule-heavy) solid var(--rule); border-bottom: var(--rule-heavy) solid var(--rule); padding: .5rem var(--margin) 1rem; } .nest-nav__list.is-open { display: flex; } .nest-nav__list li { border-bottom: var(--rule-hair) solid var(--rule); } .nest-nav__list li:last-child { border-bottom: 0; } .nest-nav__link { display: block; padding: .75rem 0; } .nest-header__inner { flex-wrap: wrap; } .nest-brand { order: 1; } /* Mobil bleibt die Leiste eine Kiste neben der Wortmarke; die Links liegen im Aufklapper, „Anfragen“ mit ihnen (site.css blendet dort ebenfalls alles außer der Taste aus — hier teilt der Aufklapper den Zustand mit dem Knopf). */ .nest-nav { order: 2; margin-left: auto; padding: 4px; } } /* --- Titelblock (mit optionalem, abgedunkeltem Vollbild-Foto) --------- */ .nest-titleblock__title { margin: 0; } .nest-titleblock__date { font-size: var(--text-meta); font-weight: 500; } .nest-titleblock__claim { margin: 1rem 0 0; max-width: 34ch; font-size: 1.25rem; line-height: 1.3; font-weight: 700; } .nest-titleblock--photo { position: relative; isolation: isolate; } .nest-titleblock--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) grayscale(1); z-index: -1; } @media (min-width: 60rem) { .nest-titleblock--photo .nest-titleblock { max-width: 52rem; } } /* --- Statement-Varianten --------------------------------------------- */ .nest-statement--paper { background: none; padding: 0; } .nest-statement__source { display: block; margin-top: 1rem; font-size: var(--text-body); font-weight: 400; } /* --- Figure / Galerie ------------------------------------------------- */ .nest-figure--column { max-width: 34rem; } .nest-figure__media--thumb { aspect-ratio: 4 / 3; } .nest-gallery__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .nest-gallery figcaption { margin-top: .75rem; } /* --- Callout ---------------------------------------------------------- */ .nest-callout__text { margin: .35rem 0 0; } .nest-callout a { font-weight: 700; } /* --- Projektskala ----------------------------------------------------- */ .nest-scale { list-style: none; margin: 0; padding: 0; } .nest-scale__item { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--gutter); align-items: baseline; border-bottom: var(--rule-light) solid var(--rule); padding: 1rem 0 .75rem; } .nest-scale__key { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; } .nest-scale__desc { font-size: 1.125rem; } .nest-scale__item--active { border-bottom-width: var(--rule-heavy); } .nest-scale__item--active .nest-scale__key { text-decoration: underline; text-decoration-thickness: var(--rule-light); text-underline-offset: .15em; } /* --- Kreislaufgrafik -------------------------------------------------- Zwischennutzung → Planung → Verwaltung, so wie die Pfeile der Grafik laufen. Vorgabe ist der ENDZUSTAND: ohne Skript und bei reduzierter Bewegung steht die vollständige Grafik (alle drei Flächen hell, alle Pfeile gezogen, alle 32 Buchstaben da). Erst die Klasse `nest-kreislauf--animiert` — die `assets/app.js` setzt — dimmt und versteckt. Ein Skriptfehler führt damit nicht zu einer leeren Grafik, sondern zu einer stillstehenden, vollständigen (Spezifikation Kreislauf §5.4). Der Vertrag ist die Klasse, nicht der Elementtyp: `[data-station]` sitzt einmal an einer Gruppe und zweimal an einem Pfad, `.kr-pfeil`/`.kr-spitze` an Pfeilpfaden. Umgefärbt wird nie — Dimmung ist die einzige Technik, die das leistet (§5.2). */ .nest-kreislauf { --kreislauf-scroll: 240vh; /* eine Bühne, drei Schritte à 80vh */ --kreislauf-dimm: .28; /* die nicht besprochenen Stationen */ display: grid; gap: var(--gutter); } .nest-kreislauf__buehne { position: relative; } .nest-kreislauf__haft { display: grid; gap: var(--gutter); } @media (min-width: 60rem) { .nest-kreislauf__haft { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .nest-kreislauf__figure { width: 100%; height: auto; } .nest-kreislauf__figure svg { width: 100%; height: auto; display: block; } .nest-kreislauf__captions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .nest-kreislauf__caption { border-top: var(--rule-hair) solid var(--rule); padding-top: .4em; transition: border-top-width var(--dur-fast) var(--ease-ui), opacity var(--dur-fast) var(--ease-ui); } .nest-kreislauf__caption--active { border-top-width: var(--rule-heavy); } .nest-kreislauf__caption--active .nest-callout__label { text-decoration: underline; text-underline-offset: .15em; } .nest-kreislauf__hint { margin-top: 1rem; font-size: var(--text-footer); } /* Die Bühne wird zum Scrollweg, das Blatt darin bleibt stehen: nur so sind Grafik und Beschriftung gleichzeitig zu sehen, während der Schritt läuft. */ .nest-kreislauf--animiert .nest-kreislauf__buehne { height: var(--kreislauf-scroll); } .nest-kreislauf--animiert .nest-kreislauf__haft { position: sticky; top: 0; min-height: 100vh; align-content: center; padding-block: var(--space-inset); } @media (min-width: 60rem) { .nest-kreislauf--animiert .nest-kreislauf__haft { align-items: center; } } /* Die besprochene Station tritt hervor, die anderen treten zurück. */ .nest-kreislauf--animiert .kr-segment { opacity: var(--kreislauf-dimm); transition: opacity var(--dur-s) var(--ease); } .nest-kreislauf--animiert .kr-segment.kr-dran { opacity: 1; } /* Die Buchstaben treten gestaffelt hervor und bleiben stehen. */ .nest-kreislauf--animiert .kr-buchstabe { opacity: 0; transition: opacity var(--dur-fast) var(--ease-ui); } .nest-kreislauf--animiert .kr-buchstabe.kr-dran { opacity: 1; } /* Der abgehende Pfeil zeichnet sich über seine Strichlänge: `--kr-len` ist die Länge aus `getTotalLength()`, `--kr-p` der Stand von 0 bis 1. Fehlt die Länge, ist der Versatz 0 und der Pfeil steht vollständig — lieber voll als leer. Das Haus bewegt sich nie; es ist die Aussage der Grafik. */ .nest-kreislauf--animiert .kr-pfeil { stroke-dasharray: var(--kr-len, 0); stroke-dashoffset: calc(var(--kr-len, 0) * (1 - var(--kr-p, 0))); } .nest-kreislauf--animiert .kr-spitze { opacity: 0; transition: opacity var(--dur-fast) var(--ease-ui); } .nest-kreislauf--animiert .kr-spitze.kr-dran { opacity: 1; } /* Wird die reduzierte Bewegung erst im Betrieb eingeschaltet, greift der Zuhörer in `app.js` erst beim nächsten Scrollen. Bis dahin hält diese Zusicherung Bühne und Grafik im Endzustand (§5.4). */ @media (prefers-reduced-motion: reduce) { .nest-kreislauf__buehne { height: auto !important; } .nest-kreislauf__haft { position: static !important; min-height: 0; padding-block: 0; } .nest-kreislauf .kr-segment, .nest-kreislauf .kr-buchstabe, .nest-kreislauf .kr-spitze { opacity: 1 !important; } .nest-kreislauf .kr-pfeil { stroke-dasharray: none !important; } .nest-kreislauf__caption { transition: none !important; } } /* --- FAQ -------------------------------------------------------------- */ .nest-faq { border-top: var(--rule-heavy) solid var(--rule); } .nest-faq__item { border-bottom: var(--rule-light) solid var(--rule); } .nest-faq__q { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1rem 0; font-weight: 700; cursor: pointer; list-style: none; } .nest-faq__q::-webkit-details-marker { display: none; } .nest-faq__q::after { content: "+"; font-weight: 700; } .nest-faq__item[open] .nest-faq__q::after { content: "\2013"; } .nest-faq__a { padding-bottom: 1.25rem; } /* --- Linkliste / CTA -------------------------------------------------- */ .nest-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .nest-linklist__link { font-size: 1.125rem; font-weight: 700; } /* --- Projekt-, Presse-, Team-Karten ----------------------------------- */ .nest-projects { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .nest-card-project__title { font-size: 1.25rem; font-weight: 700; margin: 0; } .nest-card-project__summary { margin: 0; } .nest-card-project__media { width: 100%; } .nest-press__list { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .nest-card-press { display: grid; gap: .5rem; text-decoration: none; border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; } .nest-card-press__outlet { font-weight: 700; text-transform: uppercase; } .nest-card-press__date { font-size: var(--text-footer); font-weight: 500; } .nest-card-press__logo { max-height: 3rem; width: auto; background: var(--grey-200); } .nest-card-press__excerpt { margin: 0; } .nest-team { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .nest-card-team { display: grid; gap: .5rem; align-content: start; } .nest-card-team__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--grey-200); } .nest-card-team__name { font-size: 1.25rem; font-weight: 700; margin: 0; } .nest-card-team__role { font-weight: 700; text-transform: uppercase; margin: 0; } .nest-card-team__lines { margin: 0; font-style: normal; } .nest-card-team__bio { margin: 0; } /* --- Team-Seite ------------------------------------------------------- */ /* Die Seite führt das Team in Worten ein (Vorspann), zeigt dann die Porträts größer als im Block auf der Startseite und schließt mit dem Weg zur Anfrage. Der Vorspann läuft nicht über die volle Satzbreite: er ist ein Absatz, keine Behauptung. */ .nest-team-intro { display: grid; gap: 1rem; justify-items: start; } .nest-team-intro .nest-heading { max-width: 18ch; } .nest-team-intro .nest-lead { max-width: var(--prose); } .nest-team--portraits { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: calc(var(--gutter) * 1.5) var(--gutter); } .nest-team--portraits .nest-card-team { gap: .75rem; } .nest-team--portraits .nest-card-team__name { font-size: clamp(1.25rem, 1.6vw, 1.5rem); } .nest-team-outro { border-top: var(--rule-heavy) solid var(--rule); padding-top: var(--gutter); } .nest-team-outro .nest-lead { max-width: var(--prose); } /* Interessen, Werdegang, Publikationen je Person. Sie stehen zugeklappt in der Karte, damit das Porträt-Raster in gleichen Höhen bleibt; die Zusammenfassung ist die Überschrift, die der Inhalt verdient. */ .nest-card-team__more { border-top: var(--rule-light) solid var(--rule); padding-top: .5rem; } .nest-card-team__more summary { cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: var(--text-footer); } .nest-card-team__tags { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; } .nest-card-team__tags li { border: var(--rule-light) solid var(--rule); padding: 0 .4rem; } .nest-card-team__career, .nest-card-team__publications { margin: .5rem 0 0; padding-left: 1rem; display: grid; gap: .5rem; } .nest-card-team__period { display: block; font-weight: 700; font-size: var(--text-footer); } .nest-card-team__place, .nest-card-team__venue { display: block; font-size: var(--text-footer); } /* --- News ------------------------------------------------------------- */ .nest-news { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .nest-news__item { display: grid; gap: .5rem; border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; align-content: start; } .nest-news__date { font-weight: 500; font-size: var(--text-footer); } .nest-news__title { font-size: 1.25rem; font-weight: 700; margin: 0; } .nest-news__teaser { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-200); } .nest-news__summary { margin: 0; } /* --- Artikel / Beitrag ------------------------------------------------ */ .nest-article__head { display: grid; gap: 1rem; } .nest-article__date { font-size: var(--text-meta); font-weight: 500; } .nest-article__teaser { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-200); } /* --- Kontakt ---------------------------------------------------------- */ .nest-contact-page { display: grid; gap: calc(var(--gutter) * 2); } @media (min-width: 60rem) { .nest-contact-page { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; } } /* --- Formulare -------------------------------------------------------- */ /* Die Form der Vorlage (site.css:.formular/.field): Labels in Mono 13px, Felder als hellgraue Flächen mit 2px Unterkante statt Vollrahmen, zweispaltige Reihen für Name/E-Mail und Telefon/Quelle. */ .nest-form { display: grid; gap: 1.125rem; max-width: 42rem; } .nest-form__row { display: grid; gap: 1.125rem; } @media (min-width: 36rem) { .nest-form__row { grid-template-columns: 1fr 1fr; } } .nest-field { display: grid; gap: .375rem; position: relative; } .nest-field__label { font-family: var(--font-mono); font-size: 13px; font-weight: 400; } .nest-field__input, .nest-field__select, .nest-field__textarea { width: 100%; font: inherit; color: var(--ink); background: var(--grund); border: 0; border-bottom: var(--rule-hair) solid var(--ink); padding: 13px 12px; min-height: 50px; border-radius: 0; } .nest-field__select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } .nest-field__textarea { min-height: 130px; resize: vertical; } .nest-field__input:focus, .nest-field__select:focus, .nest-field__textarea:focus { background-color: var(--paper); outline: 3px solid var(--ink); outline-offset: 0; } .nest-field--check { display: flex; gap: .75rem; align-items: flex-start; } .nest-field--check .nest-field__label { font-family: var(--font-sans); font-size: 1rem; } .nest-field--check .nest-field__input { width: 22px; height: 22px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--ink); } .nest-field__error { font-weight: 700; color: #a10000; font-size: 15px; } .nest-field__hint { font-size: .875rem; color: var(--nest-muted); margin: 0; } .nest-form__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .nest-form__note { font-size: .875rem; color: var(--nest-muted); max-width: 42rem; } .nest-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Buttons ---------------------------------------------------------- */ .nest-button { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 1.02rem; font-weight: 700; text-transform: uppercase; text-decoration: none; cursor: pointer; min-height: 52px; padding: .8em 1.4em; border: var(--rule-light) solid var(--ink); background: var(--paper); color: var(--ink); transition: background var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui); } .nest-button:hover, .nest-button:focus-visible { text-decoration: underline; } .nest-button--primary { background: var(--ink); color: var(--paper); } .nest-button--yellow { background: var(--nest-yellow); color: var(--ink); } /* Raum-Szene (Spec §6.8). Flach, randlos, ohne Radius und ohne Verlauf. Seit der Planfassung (2026-10-15) ist das Band die Bühne der Startseite: der Plan füllt den Schirm, die Kopfzeile trägt Namen und Maßstab wie ein Plan, die beiden Sätze erscheinen nacheinander als Planangabe über dem Blatt, und darunter steht der Einstiegskasten mit Überschrift, Vorspann und Tasten. Gelesen wird von oben nach unten, auch ohne JavaScript: die hohe, klebrige Bühne entsteht erst mit `data-scene-live` (und nur in einem Fenster, das hoch genug dafür ist) — sonst steht hier ein Blatt mit Text darunter. Der Unterschied ist die Fahrt, nie der Inhalt. Die Kästen tragen dieselbe Haarlinie wie die Planangaben der Vorlage. */ .nest-scene { --scene-stage: 320vh; /* die Strecke der Fahrt, drei Schirme */ --scene-inset: var(--margin); /* Rand der Planangaben, wie `.nest-shell` */ --scene-oben: clamp(.875rem, 2.6vh, 1.75rem); /* Rand oben, wie die Kopfzeile der Vorlage */ --scene-hud: calc(var(--scene-oben) + 4.375rem); /* Satzoberkante: 70px unter der Kopfzeile, wie dort */ position: relative; } .nest-scene__buehne, .nest-scene__klebrig, .nest-scene__blatt { position: relative; } .nest-scene__frame { position: relative; aspect-ratio: 16 / 9; max-block-size: 88svh; overflow: hidden; background: var(--paper); } .nest-scene__still, .nest-scene__still img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Die Leinwand erbt die Größe des Standbilds — beim Umschalten kann deshalb kein Größenwechsel stattfinden. */ .nest-scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Die Kopfzeile des Plans: Name links, Maßstab rechts, beides in Weiß über dem Blatt — wie die Planangaben der Vorlage. Sie steht auch ohne Skript da: das Blatt ist ein Plan, und seine Kopfzeile gehört dazu. `aria-hidden`: die Maßstabszahl ändert sich beim Fahren, und der Name steht schon in der Kopfzeile der Seite. Vorgelesen wird die Bildunterschrift. */ .nest-scene__hud { position: absolute; z-index: 2; inset-block-start: var(--scene-oben); inset-inline: var(--scene-inset); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 0; font: 400 13px/1.3 var(--font-mono); pointer-events: none; } /* Die beiden Sätze. Ohne Skript stehen sie im Fluss unter dem Blatt: sie sind Inhalt und dürfen nicht verschwinden, weil JavaScript fehlt. Erst die lebende Bühne legt sie als Planangabe über das Blatt und blendet sie nacheinander ein. `min-height` hält beide Kästen gleich hoch — der zweite Satz ist viel kürzer als der erste. */ .nest-scene__saetze { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding-inline: var(--scene-inset); margin-block-start: var(--gutter); } .nest-scene__satz, .nest-scene__marke, .nest-scene__massstab { background: var(--paper); border: var(--rule-hair) solid var(--ink); padding: 6px 10px; } .nest-scene__satz { min-height: 2.4em; /* beide Kästen gleich hoch — der zweite Satz ist viel kürzer */ margin: 0; max-width: min(34ch, 100%); font: 400 clamp(13px, 1.1vw, 15px)/1.25 var(--font-mono); } /* Auf schmalen Schirmen fällt der Zusatz am Namen weg, damit die Kopfzeile einzeilig bleibt — wie in der Vorlage. Der Name selbst bleibt. */ @media (max-width: 43.75rem) { .nest-scene__zusatz { display: none; } .nest-scene { --scene-hud: calc(var(--scene-oben) + 3.875rem); } } /* Der Hinweis auf die Fahrt. Er steht nur, wenn es etwas zu fahren gibt — ohne Skript wäre er eine Aufforderung ohne Folge. */ .nest-scene__hinweis { display: none; } /* Der Einstiegskasten unter dem Blatt: die Inhalte, die vorher im gelben Titelblock standen. Er liegt NICHT auf dem Plan — unten links stehen die Treppen, der Vorplatz und die Menschen, und die gehören sichtbar. Weiß auf Weiß braucht eine Kante, deshalb trägt der Plankopf einen Rahmen. */ .nest-scene__einstieg { padding-block: clamp(1rem, 2.4vw, 1.75rem); padding-inline: var(--scene-inset); } /* Der Plankopf nach DIN EN ISO 7200 (Wunsch 2026-10-20). Die Norm beschreibt den Schriftfeldkasten am Rand einer technischen Zeichnung: ein Rahmen, darin ein Raster aus beschrifteten Feldern. Der Kasten der Bühne ist jetzt genau das — links die Benennung (Feldname, `h1`, Vorspann, Tasten), rechts das Raster der Pflichtangaben. Die Zellenlinien entstehen aus dem Raster selbst: der Container ist ink, die Zellen sind Papier, und der 1px-Spalt dazwischen ist die Linie. So gibt es keine doppelten Ränder, egal wie viele Felder in einer Zeile stehen. */ .nest-plankopf { max-width: var(--measure); margin-inline: auto; display: grid; background: var(--paper); border: var(--rule-light) solid var(--ink); } .nest-plankopf__benennung { padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); align-content: start; } /* Breit stehen Benennung und Datenfelder nebeneinander: der Kasten bleibt flach, und das Blatt behält den größeren Teil des Fensters. Die Datenfelder bekommen nur so viel Breite, wie die Werte brauchen — die Benennung trägt die Überschrift und braucht den Rest. */ @media (min-width: 60rem) { .nest-plankopf { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); } } /* Die Feldnamen. Klein, in der Mono-Schrift und gesperrt — so beschriftet die Norm die Felder, und so lesen sie sich als Beschriftung, nicht als Prosa. Der Wert steht darunter in derselben Schrift wie die Planbeschriftung (`M 1:1000`). */ .nest-plankopf__label, .nest-plankopf__feld dt { margin: 0; font: 400 11px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--nest-muted); } .nest-plankopf__daten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; gap: var(--rule-hair); background: var(--ink); border-block-start: var(--rule-hair) solid var(--ink); } @media (min-width: 60rem) { .nest-plankopf__daten { border-block-start: 0; border-inline-start: var(--rule-hair) solid var(--ink); } } .nest-plankopf__feld { background: var(--paper); padding: .5rem .75rem .625rem; display: grid; gap: .125rem; align-content: start; } /* Rechtsinhaber und Kennung brauchen die ganze Breite: der Firmenname bricht sonst in drei Zeilen. */ .nest-plankopf__feld--breit { grid-column: 1 / -1; } .nest-plankopf__feld dd { margin: 0; font: 400 13px/1.35 var(--font-mono); overflow-wrap: anywhere; } @media (max-width: 23.99rem) { .nest-plankopf__daten { grid-template-columns: 1fr; } } .nest-scene__titel { margin: 0; } .nest-scene__lead { margin: clamp(.75rem, 1.4vw, 1.125rem) 0 0; max-width: 46ch; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); line-height: 1.4; } .nest-scene__tasten { display: flex; flex-wrap: wrap; gap: 12px; } /* Die Fahrt. Ein klebriger Kasten, der höher wäre als das Fenster, könnte seinen Inhalt nicht zeigen — auf einem Telefon im Querformat (und in jeder anderen flachen Ansicht) bleibt es deshalb beim Blatt mit dem Einstieg darunter. `prefers-reduced-motion` nimmt dieselbe Abkürzung; die setzt `assets/app.js` schon beim Laden. */ @media (min-height: 40rem) and (prefers-reduced-motion: no-preference) { [data-scene-live] .nest-scene__buehne { block-size: var(--scene-stage); } [data-scene-live] .nest-scene__klebrig { position: sticky; inset-block-start: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; block-size: 100svh; overflow: hidden; } /* Das Blatt füllt seine Zeile. Nicht `cover`: das Seitenverhältnis der Zeile ist nicht das des Standbilds, und `cover` schnitte den Plan an. `contain` stellt dasselbe frei, was die Kamera rahmt. */ [data-scene-live] .nest-scene__frame { position: absolute; inset: 0; aspect-ratio: auto; max-block-size: none; } [data-scene-live] .nest-scene__still, [data-scene-live] .nest-scene__still img { object-fit: contain; } /* Der Einstieg wird während der Fahrt zur Planbeschriftung: eine flache Leiste unter dem Blatt statt eines Kastens mit Riesenlettern. Ohne diese Verdichtung frisst er zwei Drittel des Fensters (gemessen bei 1440×900: 624px von 900), und der Plan — die Hauptsache der Bühne — schrumpfte auf einen 276px hohen Streifen, aus dem die Kamera nur noch einen Ausschnitt zeigte. Die Vorlage nimmt dieselbe Abkürzung (`.einstieg-text.kompakt`); sie blendet den Vorspann dabei aus, hier bleibt er stehen — kleiner, aber lesbar, denn er ist Inhalt und nicht Schmuck. Die Überschrift bleibt die `h1` der Seite; sie wird nur kleiner gesetzt und läuft so in EINER Zeile je Titelzeile durch. Die Polster sind oben knapp und unten großzügig, und das hat einen zweiten Grund: die Kopfzeile der Seite steht im Fluss (gemessen 2026-10-20: 80px), die klebrige Bühne beginnt also erst darunter. Auf dem ersten Schirm (nichts gescrollt) liegt die Unterkante des Fensters deshalb um die Höhe der Kopfzeile über der Unterkante der Bühne, und weil der Plankopf am Fuß der Bühne hängt, fiele sein unterer Rand unter den Falz. Früher war das zu verschmerzen — der Einstieg war eine flache Leiste, und was abgeschnitten wurde, war Polster. Seit er ein Schriftfeld mit Tasten ist, steht dort Inhalt. Das untere Polster ist deshalb so groß wie die Kopfzeile: es hebt den ganzen Plankopf über den Falz. Beim Festschreiben der Bühne bleibt es als Rand unter dem Kasten stehen — derselbe Rand, den die Seite oben führt. */ [data-scene-live] .nest-scene__einstieg { padding-block: clamp(.25rem, .8vh, .5rem) max(4rem, 11vh); } /* Der Plankopf wird während der Fahrt dichter gesetzt, aber nicht abgeschafft: die Felder bleiben beschriftet und lesbar, nur enger. */ [data-scene-live] .nest-plankopf__benennung { padding: clamp(.625rem, 1.1vw, .875rem) clamp(1rem, 2vw, 1.5rem) clamp(.5rem, 1vw, .75rem); gap: clamp(.5rem, 1.1vw, .75rem); } [data-scene-live] .nest-plankopf__feld { padding: .25rem .5rem .375rem; } [data-scene-live] .nest-plankopf__label, [data-scene-live] .nest-plankopf__feld dt { font-size: 10px; } [data-scene-live] .nest-plankopf__feld dd { font-size: 12px; } /* Wie `.einstieg-text.kompakt h1` der Referenz: 62 % der Hero-Größe. Bei 1440px sind das 46,43px statt der bisherigen 27,36px. */ [data-scene-live] .nest-scene__titel { font-size: calc(clamp(2rem, 5.2vw, 5rem) * .62); } [data-scene-live] .nest-scene__lead { margin-block-start: clamp(.375rem, .7vw, .625rem); max-width: 52ch; font-size: clamp(.9375rem, 1.05vw, 1.0625rem); } [data-scene-live] .nest-scene__saetze { position: absolute; inset-block-start: 0; inset-inline: 0; margin-block-start: 0; pointer-events: none; } /* Die Sätze stehen rechts unter dem Maßstab — wie die Planangaben, deren Fenster sie sind. Sie enden auf DERSELBEN Kante wie der Maßstab (`--scene-inset`), deshalb steht hier der Rand und nicht `0`: die Hülle ist absolut gesetzt und hat keinen Innenabstand mehr, an dem ein `0` hängen könnte. */ [data-scene-live] .nest-scene__saetze { padding-inline: 0; } [data-scene-live] .nest-scene__satz { position: absolute; inset-block-start: var(--scene-hud); inset-inline-end: var(--scene-inset); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); } .nest-scene[data-scene-live] .nest-scene__satz--an { opacity: 1; transform: none; } [data-scene-live] .nest-scene__hinweis { position: absolute; z-index: 2; display: block; inset-block-end: var(--scene-oben); inset-inline-start: 50%; margin: 0; font: 400 13px/1.3 var(--font-mono); background: var(--paper); padding: 2px 8px; transform: translateX(-50%); transition: opacity var(--dur-s) var(--ease); } /* Sobald gefahren wird, hat der Hinweis seinen Dienst getan. */ [data-scene-live][data-scene-gestartet] .nest-scene__hinweis { opacity: 0; } } @media (max-aspect-ratio: 1/1) { .nest-scene:not([data-scene-live]) .nest-scene__frame { aspect-ratio: 4 / 5; } } /* Die Bildunterschrift der Bühne (§8 Nr. 0). Sie liegt unter dem Rahmen, auf derselben Fläche wie die Bühne selbst — also ohne `--nest-muted`, das nur auf den fünf Flächen der Abschnitte gesetzt wird. */ .nest-scene__caption { margin: 0; padding-block: clamp(.75rem, 1.4vw, 1.25rem); font-size: var(--text-footer); color: var(--grey-700); } /* --- Suche ------------------------------------------------------------ */ .nest-search { display: grid; gap: var(--gutter); } .nest-search__form { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 42rem; } .nest-search__input { flex: 1 1 14rem; } .nest-search__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .nest-search__result { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; } .nest-search__result a { font-weight: 700; } .nest-search__empty { margin: 0; } /* --- Breadcrumb ------------------------------------------------------- */ .nest-breadcrumb { font-size: var(--text-footer); } .nest-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .nest-breadcrumb__item { display: flex; gap: .5rem; } .nest-breadcrumb__item + .nest-breadcrumb__item::before { content: "/"; } /* --- Cookie-Hinweis (Anthrazit-Fläche, gelbe Oberkante) --------------- */ .nest-cookie { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--anthrazit); color: var(--paper); border-top: var(--rule-heavy) solid var(--nest-yellow); } .nest-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; } .nest-cookie__text { margin: 0; max-width: 62ch; } .nest-cookie__text a { color: var(--paper); } .nest-cookie__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .nest-cookie .nest-button { border-color: var(--paper); background: transparent; color: var(--paper); } .nest-cookie .nest-button--yellow { border-color: var(--nest-yellow); background: var(--nest-yellow); color: var(--ink); } /* Trenner auf der Ink-Fläche: `--grey-500` war der einzige Grauton auf Ink und verschwand darin. Auf Ink ist `--paper` das Gegenstück zu `--rule` auf Papier. */ .nest-cookie__details { flex-basis: 100%; margin: .25rem 0 0; padding-top: .75rem; border-top: var(--rule-hair) solid var(--paper); } .nest-cookie__details p { margin: 0 0 .5rem; } .nest-cookie[hidden] { display: none; } /* --- Footer ----------------------------------------------------------- */ .nest-footer-band { border-top: var(--rule-heavy) solid var(--rule); margin-top: var(--space-section); } .nest-footer__inner { display: grid; gap: calc(var(--gutter) * 1.5); padding-block: var(--gutter); } @media (min-width: 60rem) { .nest-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; } } .nest-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; } .nest-footer__nav a { font-weight: 700; text-transform: uppercase; text-decoration: none; } .nest-footer__nav a:hover, .nest-footer__nav a:focus-visible { text-decoration: underline; } .nest-footer__fine { font-size: var(--text-footer); font-weight: 300; margin: 0; } .nest-footer__page { font-size: var(--text-footer); font-weight: 500; } } /* -------------------------------------------------------------- utilities --- */ @layer utilities { .nest-nowrap { white-space: nowrap; } .nest-block { display: block; } .nest-stack-sm { display: grid; gap: .5rem; } .nest-back { font-weight: 700; } .nest-empty { font-style: italic; } } /* ============================================================================ NEST — Ergänzungen Rollout 2026 (Übersichten, Filter, Mehrspaltentext, Formularmeldungen, Footer-Raster). Additiv, gleiche Regeln wie oben. ========================================================================== */ /* ------------------------------------------------------------ components --- */ @layer components { /* Infobox-Notiz */ .nest-infobox__note { margin: .875rem 0 0; } /* Mehrspaltiger Fließtext (Block `text`, columns 1|2|3) */ .nest-columns-2 { column-count: 2; column-gap: var(--gutter); } .nest-columns-3 { column-count: 3; column-gap: var(--gutter); } @media (max-width: 59.99rem) { .nest-columns-2, .nest-columns-3 { column-count: 1; } } /* Dritte Spalte für `.nest-cols-*`-Raster */ .nest-cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: var(--gutter); } @media (min-width: 60rem) { .nest-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Projektkarten-Meta */ .nest-card-project__meta { margin: 0; } .nest-card-press__title { font-size: 1.25rem; font-weight: 700; margin: 0; } /* Filter (Projektübersicht, Skala als Achse) */ .nest-filters { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; } .nest-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } .nest-filters__link { font-weight: 700; text-transform: uppercase; text-decoration: none; } .nest-filters__link:hover, .nest-filters__link:focus-visible { text-decoration: underline; } .nest-filters__link.is-active { border-bottom: var(--rule-light) solid var(--rule); } /* Die Archivachse ist ein Umschalter zwischen zwei Auswahlen, keine dritte Filterzeile: sie steht deshalb für sich, mit Abstand und einem Hinweis, der sagt, was das Archiv ist. */ .nest-filters--schicht { margin-top: 1.25rem; } .nest-filters__hinweis { margin: .75rem 0 0; font-size: var(--text-footer); color: var(--nest-muted); max-width: 62ch; } /* Die Gruppe gliedert die Übersicht; der Abstand trennt die Listen, ohne eine Linie zu ziehen (die Zeilen des Registers haben schon eine). */ .nest-projects__gruppe + .nest-projects__gruppe { margin-top: clamp(2rem, 4vw, 3.5rem); } /* Übersichts-Kopf und Suche-Trefferzahl */ .nest-overview__head { display: grid; gap: .75rem; } .nest-search__count { margin: 0; font-weight: 700; } /* Artikel: verwandte Beiträge */ .nest-article__related { border-top: var(--rule-heavy) solid var(--rule); padding-top: var(--gutter); } .nest-project__press { border-top: var(--rule-light) solid var(--rule); padding-top: var(--gutter); } /* Partner und Auftraggeber (Projektseite). Die Liste kommt aus den Sulu-Kontakten, nicht aus einer Abschrift am Projekt: Name immer, Logo nur, wenn im Kontakt eines hinterlegt ist. Deshalb keine feste Kachel — ein Eintrag ohne Logo ist trotzdem ein vollwertiger Eintrag. Die Unterstreichung des Verweises bleibt stehen (a, Zeile 154): sie ist hier das einzige Zeichen, dass ein Name anklickbar ist. */ .nest-project__partners { border-top: var(--rule-light) solid var(--rule); padding-top: var(--gutter); } .nest-partners { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--gutter) * .75) var(--gutter); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .nest-partners__item { min-width: 0; display: grid; gap: .5rem; align-content: start; } .nest-partners__logo { display: block; width: auto; max-width: 9rem; height: 3rem; object-fit: contain; } .nest-partners__link, .nest-partners__name { font-weight: 700; overflow-wrap: anywhere; } /* Formularmeldungen */ .nest-form__errors { margin: 0; padding: .75rem 1rem; border: var(--rule-light) solid var(--ink); font-weight: 700; } .nest-form__success { margin: 0; padding: .75rem 1rem; background: var(--nest-yellow); color: var(--ink); font-weight: 700; } /* Footer-Raster */ .nest-footer__left { display: grid; gap: .75rem; align-content: start; } .nest-footer__contact { max-width: 24rem; } /* --- Zahlen (Startseite, design.md §9) -------------------------------- */ .nest-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); } @media (min-width: 40rem) { .nest-figures { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } } .nest-stat { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; min-width: 0; } .nest-stat__value { display: block; font-size: clamp(2rem, 4.6vw, 4.25rem); font-weight: 700; line-height: 1; overflow-wrap: anywhere; } .nest-stat__label { display: block; margin-top: .5rem; font-size: var(--text-footer); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; overflow-wrap: anywhere; } .nest-figures__note { margin: 1rem 0 0; font-size: var(--text-footer); font-style: italic; overflow-wrap: anywhere; } /* --- Leistungen (Startseite, design.md §9) ---------------------------- */ .nest-services { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--gutter) * 1.5); } @media (min-width: 48rem) { .nest-services { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } } .nest-service { border-top: var(--rule-light) solid var(--rule); padding-top: .75rem; min-width: 0; } .nest-service__number { display: block; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1; overflow-wrap: anywhere; } .nest-service__heading { font-size: var(--text-subhead); font-weight: 700; text-transform: uppercase; margin: .75rem 0 .375rem; overflow-wrap: anywhere; } .nest-service__body { margin: 0; max-width: 46ch; overflow-wrap: anywhere; } /* --- Stimmen (Startseite, design.md §9) ------------------------------- */ .nest-testimonials { display: grid; gap: calc(var(--gutter) * 1.5); } @media (min-width: 48rem) { .nest-testimonials { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } } .nest-testimonial { margin: 0; border-top: var(--rule-light) solid var(--rule); padding-top: 1rem; min-width: 0; } .nest-testimonial__quote { margin: 0 0 .875rem; font-size: clamp(1rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; } .nest-testimonial__name { font-weight: 700; overflow-wrap: anywhere; } .nest-testimonial__role { display: block; overflow-wrap: anywhere; } /* --- Netzwerk (Startseite, design.md §9) ------------------------------ */ .nest-network { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem 2rem; } .nest-network__item { min-width: 0; } /* Kein Kästchen um die Wortmarke: die Organisationen liefern Dateien mit transparentem Grund und sehr verschiedenen Seitenverhältnissen. Ein grauer 3:2-Kasten mit 60-%-Bild wäre ringsum Rand — und bei den breiten Wortmarken ein sichtbar verkleinertes Logo. Die feste Mindesthöhe hält nur die Namen der Zeile auf einer Linie; die Breite folgt dem Motiv, damit keine Wortmarke in ein fremdes Format gezwängt wird. */ .nest-network__logo { display: flex; align-items: center; min-height: 3.5rem; } .nest-network__logo img { max-height: 3.5rem; max-width: 12rem; width: auto; height: auto; object-fit: contain; } /* Die Verankerung umschließt Kästchen und Namen. Ohne diese Zeilen färbte der Browser den Namen blau ein und unterstriche ihn — beides gegen die Markenregeln (nur Ink auf Paper, keine Zierlinien). */ .nest-network__link { display: block; color: inherit; text-decoration: none; } .nest-network__name { display: block; margin-top: .5rem; font-size: var(--text-footer); overflow-wrap: anywhere; } .nest-network__note { margin: 1rem 0 0; font-size: var(--text-footer); font-style: italic; overflow-wrap: anywhere; } /* --- Das laufende Band der Auftraggeber ------------------------------- */ /* Wunsch 2026-10-20: die 22 Wortmarken liefen in vier Reihen über 300 px Höhe. Als Band stehen sie in einer Reihe und wandern langsam nach links. Die Bewegung ist Beiwerk: sie läuft nur, solange niemand etwas anfasst, und bei `prefers-reduced-motion` steht die Reihe still (siehe unten). Das Band schneidet nicht in Wortmarken: an beiden Rändern läuft es über eine Maske aus. Ohne die Maske erschiene ein halbes Logo als Fehler. */ .nest-network__band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); } /* Der Zug trägt die Kopien nebeneinander. Er ist so breit wie sein Inhalt, damit die Prozentangabe im Keyframe genau eine Kopie bedeutet. */ .nest-network__track { display: flex; width: max-content; animation: nest-network-lauf 60s linear infinite; will-change: transform; } /* Wer lesen oder klicken will, hält das Band an — ein Link, der unter dem Zeiger weiterwandert, ist nicht zu treffen. */ .nest-network__band:hover .nest-network__track, .nest-network__band:focus-within .nest-network__track { animation-play-state: paused; } @keyframes nest-network-lauf { from { transform: translateX(0); } to { transform: translateX(var(--nest-network-schritt, -50%)); } } /* Im Band stehen die Zeilen nebeneinander statt umbrochen. Der Abstand gehört in die Kopie (padding-right), sonst entstünde an der Nahtstelle zwischen zwei Kopien nur ein halber Abstand. `flex: 0 0 auto` hält die Kopie in ihrer Breite: ohne das schrumpfte sie im Zug auf die Breite des Bandes, und die Nahtstelle läge mitten in einer Wortmarke. */ .nest-network__band .nest-network { flex: 0 0 auto; flex-wrap: nowrap; padding-right: 2rem; } /* Jede Zeile bekommt eine feste Zelle, so breit wie die breiteste Wortmarke (12rem, das Maximum von `.nest-network__logo img`). Ohne feste Breite hinge die Breite des Zuges an den geladenen Bildern: `loading="lazy"` lädt sie erst kurz vor dem Band, und jede nachgeladene Wortmarke machte den Zug breiter — bei `translateX(-50%)` versetzte das laufende Band bei jedem Bild um den halben Zuwachs. Die feste Zelle hält den Zug still und gibt der Reihe zugleich den gleichmäßigen Takt eines Maßbands. */ .nest-network__band .nest-network__item { flex: 0 0 auto; width: 12rem; } /* Ohne Bewegung ist das Band wieder die stehende Liste: umbrochen, ohne Maske, und die Kopien fallen weg — sie wären nur doppelter Inhalt. */ @media (prefers-reduced-motion: reduce) { .nest-network__band { overflow: visible; -webkit-mask-image: none; mask-image: none; } .nest-network__track { animation: none; width: auto; } /* `flex: 1 1 auto` nimmt der Kopie ihre feste Breite aus dem Band: sonst bliebe sie so breit wie ihr Inhalt und liefe in einer Zeile über den Rand hinaus, statt zu umbrechen. */ .nest-network__band .nest-network { flex: 1 1 auto; width: auto; flex-wrap: wrap; padding-right: 0; } .nest-network__band .nest-network__item { width: auto; } .nest-network--klon { display: none; } } /* --- Kontaktband (Startseite) ----------------------------------------- */ /* Die Anlage der Vorlage (`#kontakt` in sketch.nest.dnb.network): links Überschrift, Vorspann und Anschrift, rechts die Maßkette „Ihr Objekt“ und die weiße Formularkarte. Überschrift und Maßstab kommen aus `Nest:SectionBand`; darum setzt das Raster seine vier Kinder ausdrücklich an ihren Platz, statt sich auf die Reihenfolge zu verlassen. */ .nest-kontakt__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 7rem); align-items: start; } .nest-kontakt__links { display: grid; gap: 1.25rem; align-content: start; } /* Trennstellen nur an den weichen Trennzeichen des Textes (wie die Vorlage: `.kontakt h2{hyphens:manual}`) — sonst zerlegt `hyphens:auto` das Wort an einer beliebigen Silbe. */ .nest-kontakt .nest-heading { font-size: clamp(1.75rem, 3vw, 2.875rem); margin: 0; hyphens: manual; } .nest-kontakt__links .nest-lead { margin: 0; } .nest-kontakt__rechts { display: grid; gap: 12px; align-content: start; } .nest-direct { margin-top: clamp(.5rem, 1.5vw, 1.25rem); display: grid; gap: .25rem; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; } .nest-direct a { font-weight: 700; } .nest-formular { background: var(--paper); color: var(--ink); padding: clamp(1.375rem, 3vw, 2.75rem); border: var(--rule-hair) solid var(--ink); } .nest-formular .nest-form { max-width: none; } /* Die Taste der Vorlage: Ink-Fläche mit gelber Schrift, beim Überfahren invertiert (site.css:.btn auf Weiß). */ .nest-formular .nest-button--primary { background: var(--ink); color: var(--nest-yellow); border-color: var(--ink); } .nest-formular .nest-button--primary:hover, .nest-formular .nest-button--primary:focus-visible { background: var(--nest-yellow); color: var(--ink); border-color: var(--ink); } @media (max-width: 59.99rem) { .nest-kontakt__raster { grid-template-columns: 1fr; row-gap: 2rem; } } /* Weiß auf Gelb ist verboten, Gelb auf Ink dagegen zulässig (Markenregel). Die Taste selbst steht weiter unten im §8-Block: dort gilt die Regel für alle drei dunklen Flächen (`ink`, `dunkel`, `anthrazit`), und die Umriss-Taste ist dort ausgenommen — sie lebt von ihrer Kontur und bekäme als gelbe Fläche dieselbe Füllung wie die gefüllte Taste daneben. */ } /* -------------------------------------------------------------- utilities --- */ @layer utilities { /* Skip-Link: `.nest-visually-hidden` versteckt ihn; im Fokus muss der Beschnitt aufgehoben werden, sonst bleibt er 1px klein. */ .nest-skip-link:focus { clip: auto; width: auto; height: auto; margin: 0; overflow: visible; white-space: normal; } } /* ============================================================================ NEST — Startseite, Abschnittsarchitektur (Spec §8). Die 13 Abschnitte der neuen Website, Abschnitt für Abschnitt aus der Vorlage `nest-website` in unsere Tokens übersetzt. Aufbau: jeder Abschnitt ist ein `
` mit einem `.nest-shell` darin. Die Vorlage legt ihren Satzspiegel (`.wrap`) JE ABSCHNITT anders aus — 5fr/7fr, 7fr/5fr, 6fr/6fr —, und genau das steht hier: die Regeln greifen auf `.nest- .nest-shell` und ordnen `.nest-kopfzeile` (Maßstab + Überschrift) und den Abschnittsinhalt in dieses Raster. Ohne sie stünden alle Abschnitte als eine Spalte untereinander, und die Abschnitte sähen alle gleich aus. Warum die Vorlage ihr Raster pro Abschnitt stellt und nicht das Band: die Überschrift steht mal links und der Text rechts (`warum`, `faq`, `ueber`, `kontakt`), mal umgekehrt (`methode`, `massstaebe`, `belege`), mal gar nicht (`fuer-wen`, `werkzeuge`, `projekte`, `presse`). Das ist eine Aussage der Gestalt über jeden Abschnitt einzeln und keine Eigenschaft, die ein Band sinnvoll vererben könnte. Alle Maße sind die der Vorlage (`site/assets/css/site.css`); wo die CI abweicht, gewinnt die CI: Gelb ist `--nest-yellow` (#ffd640) statt #FFD630, Schwarz ist `--ink` (#231f20) statt #0F0F10. Für Text auf dunklem Grund gibt es in der Vorlage `--text-leise-dunkel` (#d0d3d6) und `--text-leise` (#4a4d50); hier treten dafür `--grey-300` und `--grey-700` ein, damit die Zahl der Farbtoken nicht wächst. Beide werden über `--nest-muted` angesprochen und richten sich nach der Fläche des Bandes — ein fester Grauton wäre auf der einen oder der anderen Fläche unsichtbar. ========================================================================== */ /* ---------------------------------------------------------------- tokens --- */ @layer layout { /* Der gedämpfte Ton je Fläche. Ein Abschnitt, der ihn braucht (Bildunterschrift, Belegzahlen, Registerorte), spricht `--nest-muted` an und muss seine Fläche nicht kennen. */ .nest-full--weiss, .nest-full--grund, .nest-full--gelb { --nest-muted: var(--grey-700); } .nest-full--ink, .nest-full--dunkel, .nest-full--anthrazit { --nest-muted: var(--grey-300); } } /* ---------------------------------------------------------------- layout --- */ @layer layout { /* Die Kopfzeile aller Abschnitte: Maßstab über Überschrift, gestapelt. Die Vorlage setzt den Maßstab nicht in die Kopfzeile, sondern als feste Anzeige an den Bildrand (`.hud`); bei uns gehört er zur Überschrift, damit `aria-labelledby` auf demselben Element liegt wie der Maßstab und die Überschrift den Anker trägt (Spec §5.1). */ .nest-kopfzeile { display: grid; gap: .75rem; } .nest-massstab { margin: 0; font-family: var(--font-mono); font-size: var(--text-footer); font-weight: 400; letter-spacing: .04em; color: var(--nest-muted); /* Der Maßstab ist Zierrat und darf in der Kopfzeile nicht die Zeile bestimmen, in der die Überschrift steht. */ line-height: 1; } /* Das „M“ vor der Zahl. Es steht in einem eigenen ``, damit das Markenzeichen adressierbar ist, ohne die Zeichenfolge im Template zu zerlegen; hier trägt es nur den Abstand zur Zahl. */ .nest-massstab__m { margin-right: .35em; } /* --- 1 warum: Überschrift links (stehend), Aussage rechts ------------- */ .nest-warum .nest-shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); } /* Die Überschrift bleibt beim Scrollen stehen, solange ihr Abschnitt läuft: die Vorlage setzt den Abschnitt auf `position:sticky;top:96px`. */ .nest-warum .nest-kopfzeile { grid-column: 1; position: sticky; top: 6rem; align-self: start; } .nest-warum__body { grid-column: 2; min-width: 0; } @media (max-width: 59.99rem) { .nest-warum .nest-shell { grid-template-columns: minmax(0, 1fr); } .nest-warum .nest-kopfzeile { grid-column: 1; position: static; } .nest-warum__body { grid-column: 1; } } /* --- 2 fuer-wen: Überschrift oben, drei Räume darunter ---------------- */ .nest-fuer-wen .nest-kopfzeile { margin-bottom: clamp(2.25rem, 5vw, 4.5rem); } .nest-plan-raeume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(10px, 1.2vw, 18px); /* Der Rahmen um die drei Räume ist der dunkle Grund, der zwischen ihnen stehen bleibt — kein `gap` auf weißem Papier. Anthrazit, nicht Ink: Fläche ist Anthrazit, Schrift ist Ink (2026-10-20). */ background: var(--anthrazit); padding: clamp(10px, 1.2vw, 18px); } /* `breit` ist die Spur, die wächst. Die Vorlage gibt sie dem mittleren Raum (Gemeinden und Verwaltung), weil dessen Beispielliste länger ist; bei uns entscheidet die Redaktion über `width`, und deshalb wächst die Spur, in der der breite Raum steht — nicht immer die zweite. Ohne `:has()` stehen die drei Räume gleich breit; das ist die richtige Rückfallposition, denn dann hat die Redaktion nichts Breiteres verlangt. */ .nest-plan-raeume:has(> .nest-raum--breit:first-child) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); } .nest-plan-raeume:has(> .nest-raum--breit:nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); } .nest-plan-raeume:has(> .nest-raum--breit:nth-child(3)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr); } /* Die `:has()`-Regeln oben sind spezifischer als eine einfache Klassenregel; deshalb stehen die Varianten hier noch einmal, sonst bliebe das Raster auf dem Telefon dreispaltig (gemessen: 84px je Raum, Seite 494px breit). */ @media (max-width: 59.99rem) { .nest-plan-raeume, .nest-plan-raeume:has(> .nest-raum--breit:first-child), .nest-plan-raeume:has(> .nest-raum--breit:nth-child(2)), .nest-plan-raeume:has(> .nest-raum--breit:nth-child(3)) { grid-template-columns: minmax(0, 1fr); } } /* --- 3 methode: Überschrift links, Vorspann rechts, Weg darunter ------ */ .nest-methode .nest-shell, .nest-massstaebe .nest-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 5vw, 6rem); } .nest-methode .nest-kopfzeile, .nest-massstaebe .nest-kopfzeile { grid-column: 1; } .nest-methode .nest-lead, .nest-massstaebe .nest-lead { grid-column: 2; align-self: end; margin: 0; } .nest-methode .nest-weg, .nest-methode .nest-kreislauf { grid-column: 1 / -1; } .nest-methode .nest-weg { margin-top: clamp(3rem, 6vw, 6rem); } .nest-methode .nest-kreislauf { margin-top: clamp(2.25rem, 4vw, 4rem); } .nest-massstaebe .nest-stufen { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 5rem); } @media (max-width: 59.99rem) { .nest-methode .nest-shell, .nest-massstaebe .nest-shell { grid-template-columns: minmax(0, 1fr); } .nest-methode .nest-kopfzeile, .nest-methode .nest-lead, .nest-massstaebe .nest-kopfzeile, .nest-massstaebe .nest-lead { grid-column: 1; } .nest-methode .nest-lead, .nest-massstaebe .nest-lead { align-self: start; } } /* --- 4 werkzeuge: Überschrift oben, vier Aufklapper darunter ---------- */ .nest-werkzeuge .nest-kopfzeile { margin-bottom: clamp(2rem, 4vw, 4rem); } .nest-werkzeuge .nest-heading { max-width: 20ch; } /* --- 5 projekte: Überschrift oben, Tafel, Register, Verzeichnis ------- */ .nest-projekte .nest-kopfzeile { margin-bottom: clamp(2.25rem, 5vw, 4.5rem); } /* --- 7 phase-null: links Überschrift und leerer Plan, rechts der Text - */ .nest-phase-null .nest-shell { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; } .nest-phase-null .nest-kopfzeile { grid-column: 1; grid-row: 1; } .nest-phase-null .nest-leerplan { grid-column: 1; grid-row: 2; } .nest-phase-null__text { grid-column: 2; grid-row: 1 / span 2; min-width: 0; } @media (max-width: 59.99rem) { .nest-phase-null .nest-shell { grid-template-columns: minmax(0, 1fr); } .nest-phase-null .nest-kopfzeile { grid-column: 1; grid-row: 1; } .nest-phase-null .nest-leerplan { grid-column: 1; grid-row: 2; } .nest-phase-null__text { grid-column: 1; grid-row: 3; } } /* --- 8 belege: Zitat links, Legende rechts, Partner über beide -------- */ .nest-belege .nest-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); } .nest-belege__zitat { grid-column: 1; } .nest-legende { grid-column: 2; align-self: end; } .nest-partner { grid-column: 1 / -1; } @media (max-width: 59.99rem) { .nest-belege .nest-shell { grid-template-columns: minmax(0, 1fr); } .nest-belege__zitat, .nest-legende, .nest-partner { grid-column: 1; } .nest-legende { align-self: start; } } /* --- 10 faq: Überschrift links (stehend), Fragen rechts -------------- */ .nest-faq .nest-shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); } .nest-faq .nest-kopfzeile { grid-column: 1; position: sticky; top: 6rem; align-self: start; } .nest-faq .nest-heading { font-size: clamp(1.75rem, 3.1vw, 3rem); } .nest-faq__liste { grid-column: 2; min-width: 0; } @media (max-width: 59.99rem) { .nest-faq .nest-shell { grid-template-columns: minmax(0, 1fr); } .nest-faq .nest-kopfzeile { position: static; } .nest-faq__liste { grid-column: 1; } } /* --- 11 ueber: Überschrift links, Text rechts ------------------------ */ .nest-ueber .nest-shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); } .nest-ueber__text { grid-column: 2; min-width: 0; } @media (max-width: 59.99rem) { .nest-ueber .nest-shell { grid-template-columns: minmax(0, 1fr); } .nest-ueber__text { grid-column: 1; } } /* --- 12 kontakt ------------------------------------------------------- */ /* Die Vorlage (`sketch.nest.dnb.network`, `#kontakt`) setzt das Band zweispaltig: links Überschrift, Vorspann und Anschrift, rechts die Maßkette und die weiße Formularkarte. Weil die Überschrift in der linken Spalte steht und nicht über dem Band, trägt kein `Nest:SectionBand`- Kopfzeilenraster hier — die Komponente liefert nur Fläche und Satzspiegel, das Raster steht im Inhalt (`.nest-kontakt__raster`). Das Formular ist dasselbe Teil-Partial wie auf /kontakt. */ } /* ------------------------------------------------------------ components --- */ @layer components { /* --- Gemeinsame Bausteine der Abschnitte ------------------------------ */ /* Ziffernschrift für Jahre, Maßstäbe, Kürzel und Belegzahlen. Die Vorlage setzt dafür durchweg `.mono`. */ .nest-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: .01em; } /* Vorspann eines Abschnitts: größer als der Fließtext, aber kein Titel. */ .nest-lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; max-width: var(--prose); margin: 0; } /* Pfeil in einer Taste. Die Vorlage zeichnet ihn als Linie mit einer um 45° gedrehten Ecke — keine Bilddatei, keine Schrift. */ .nest-pfeil { display: inline-block; width: 1.1em; height: 1px; margin-left: .6em; background: currentColor; position: relative; vertical-align: middle; } .nest-pfeil::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: var(--rule-hair) solid currentColor; border-right: var(--rule-hair) solid currentColor; transform: rotate(45deg); } /* Die zweite Taste: nur Umriss. Auf dunkler Fläche erbt sie die Schriftfarbe, damit sie nicht als gelbe Fläche neben der gefüllten Taste steht. */ .nest-button--zweit { background: transparent; color: inherit; border-color: currentColor; } /* Tasten auf dunklem Grund: gefüllt gelb, sonst wären sie unsichtbar. Die Umriss-Taste bleibt ausgenommen — sie lebt von der Kontur. Gilt für alle drei dunklen Flächen, nicht nur für `ink`. */ .nest-full--ink .nest-button:not(.nest-button--zweit), .nest-full--dunkel .nest-button:not(.nest-button--zweit), .nest-full--anthrazit .nest-button:not(.nest-button--zweit) { background: var(--nest-yellow); color: var(--ink); border-color: var(--nest-yellow); } /* --- Titelblock: Vorspann und Tasten der Bühne ------------------------ */ /* Sie liegen am Titelblock und nicht in einem eigenen Band: die Bühne der Vorlage trägt Überschrift, Vorspann und Tasten auf DERSELBEN Fläche, und zwei gelbe Bänder nebeneinander verstießen gegen den Flächen-Vertrag (Spec §10). */ .nest-titleblock__lead { font-size: clamp(1.0625rem, 1.45vw, 1.375rem); line-height: 1.4; max-width: 36ch; margin: clamp(.75rem, 1.4vw, 1.125rem) 0 0; } .nest-titleblock__tasten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(.875rem, 1.6vw, 1.375rem); } /* --- 1 warum ---------------------------------------------------------- */ /* Die Aussage: der Satz, der den Abschnitt trägt. `text_editor` liefert ihn mit `

`; die Typografie hängt deshalb an der Hülle und der Absatz darin wird auf `margin: 0` gesetzt (sonst stünde ein Absatzabstand in einem Element, das nur diesen einen Absatz enthält). */ .nest-aussage { font-weight: 700; font-size: clamp(1.625rem, 3.3vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; max-width: 22ch; } .nest-aussage p { margin: 0; max-width: none; } /* Hervorhebung als TEXT, nicht als Fläche: die eine gelbe FLÄCHE der Seite ist der Titelblock (Spec §10). */ .nest-aussage mark { background: none; color: var(--nest-yellow); } /* Die weiße Platte in der dunklen Fläche — dieselbe Setzung wie in der Vorlage: die Maßkette und die drei Rollen stehen auf Papier, weil das Maßband eine Zeichnung ist und auf Schwarz nicht läse. */ .nest-raum-weiss { margin-top: clamp(2rem, 4vw, 3.5rem); background: var(--paper); color: var(--ink); padding: clamp(18px, 2.6vw, 36px); } .nest-masskette { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-footer); margin-bottom: 12px; } .nest-masskette i { flex: 1; height: 1px; background: currentColor; position: relative; } .nest-masskette i::before, .nest-masskette i:last-child::after { content: ""; position: absolute; top: -6px; height: 13px; width: 1px; background: currentColor; } .nest-masskette i::before { left: 0; } .nest-masskette i:last-child::after { right: 0; } .nest-masskette i:last-child::before { display: none; } .nest-rollen { display: grid; border-top: var(--rule-hair) solid var(--ink); } .nest-rollen p { display: grid; grid-template-columns: 56px minmax(0, 12ch) minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: 16px 0; margin: 0; border-bottom: var(--rule-hair) solid var(--ink); max-width: none; font-size: clamp(1.125rem, 1.6vw, 1.5rem); text-align: left; hyphens: auto; } .nest-moebel { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.3; } .nest-rollen b { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-footer); overflow-wrap: anywhere; } /* Unterhalb von 60rem steht das Möbelzeichen neben zwei Zeilen statt neben dreien: das Zeichen wächst nicht mit und darf die Namen nicht quetschen. */ @media (max-width: 59.99rem) { .nest-rollen p { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; } .nest-rollen p .nest-moebel { grid-row: 1 / 3; } } .nest-warum__schluss { margin-top: clamp(1.75rem, 4vw, 3.5rem); color: var(--nest-muted); max-width: 46ch; } .nest-warum__schluss p { margin: 0; max-width: none; } /* --- 2 fuer-wen ------------------------------------------------------ */ .nest-raum { position: relative; min-width: 0; background: var(--paper); color: var(--ink); padding: clamp(22px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 18px; transition: background var(--dur-fast) var(--ease-ui); } /* Der ganze Raum ist die Fläche, nicht nur die Taste: Wer mit der Maus oder mit der Tastatur hineinfährt, sieht, dass hier eine Anfrage steht. */ .nest-raum:hover, .nest-raum:focus-within { background: var(--nest-yellow); } .nest-raum__kopf { font-size: clamp(1.625rem, 2.6vw, 2.5rem); margin: 0; line-height: 1.05; } .nest-raum__text p { max-width: 34ch; margin: 0; } .nest-raum__text p + p { margin-top: 1.1em; } /* Die Taste sitzt am Fuß des Raums, damit die drei Räume trotz unterschiedlich langer Listen auf einer Linie abschließen. */ .nest-raum .nest-button { margin-top: auto; align-self: flex-start; } /* Der breite Raum nutzt seine Spur auch: sonst bliebe er eine schmale Spalte mit leerem Rand daneben, und der Beispielliste wäre die Breite genommen, um deretwillen sie breiter gestellt wurde. */ .nest-raum--breit .nest-raum__text p { max-width: 44ch; } .nest-beispiele { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--ink); } .nest-beispiele li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: var(--rule-hair) solid var(--ink); font-size: .97rem; line-height: 1.3; } .nest-beispiele li span:last-child { font-family: var(--font-mono); font-size: var(--text-footer); white-space: nowrap; } /* --- 3 methode: der Weg durch den Plan ------------------------------- */ /* Der Fortschritt ist Zusatz, keine Bedingung: `--p` ist ohne Skript 0, und bei 0 steht die ganze Linie in der Farbe des noch nicht Gegangenen. Die Vorlage zeichnet die Spur als Verlauf; hier tragen die beiden Farben den Zustand, den `assets/app.js` setzt. Die Hintergrundfarbe der Bögen kommt aus `--nest-weg-bg` und nicht aus `--grund`: der Bogen muss die Linie DAHINTER verdecken, und welche Farbe das ist, entscheidet die Fläche des Bandes — die Redaktion kann sie ändern. */ .nest-full--weiss .nest-weg, .nest-full--gelb .nest-weg { --nest-weg-bg: var(--paper); } .nest-full--grund .nest-weg { --nest-weg-bg: var(--grund); } .nest-full--ink .nest-weg, .nest-full--dunkel .nest-weg, .nest-full--anthrazit .nest-weg { --nest-weg-bg: var(--ink); } .nest-weg { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.5rem); --p: 0; } .nest-weg::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: var(--rule-hair); background: linear-gradient(to right, var(--rule) 0 calc(var(--p) * 100%), var(--grey-300) calc(var(--p) * 100%) 100%); } .nest-weg li { position: relative; padding-top: 64px; } .nest-knoten { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border: var(--rule-hair) solid var(--rule); background: var(--nest-weg-bg, var(--grund)); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-footer); transition: background var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui); } /* Der erreichte Schritt: der Knoten färbt sich. `app.js` setzt die Klasse; ohne Skript bleibt sie aus und der Weg steht vollständig und ruhig. */ .nest-weg li.nest-erreicht .nest-knoten { background: var(--nest-yellow); color: var(--ink); border-color: var(--nest-yellow); } /* Die Bögen zwischen den Schritten: der Weg läuft nicht gerade, er führt um die Ecke — die Zeichnung der Vorlage. `--nest-weg-bg` verdeckt dabei die gerade Linie unter dem Bogen; die Maske liegt als zweites Pseudo-Element über der Linie und unter dem Bogen. */ .nest-weg li:not(:last-child)::before { content: ""; position: absolute; top: 19px; right: calc(clamp(1rem, 2.4vw, 2.5rem) / -2 - 23px); width: 46px; height: var(--rule-hair); background: var(--nest-weg-bg, var(--grund)); } .nest-weg li:not(:last-child)::after { content: ""; position: absolute; top: -4px; right: calc(clamp(1rem, 2.4vw, 2.5rem) / -2 - 23px); width: 46px; height: 46px; border-top: var(--rule-hair) dashed var(--rule); border-right: var(--rule-hair) dashed var(--rule); border-left: var(--rule-hair) solid var(--rule); border-top-right-radius: 100%; background: var(--nest-weg-bg, var(--grund)); pointer-events: none; } .nest-weg__kopf { font-size: clamp(1.75rem, 3vw, 2.875rem); margin: 0 0 14px; line-height: 1.05; } .nest-weg__text p { font-size: clamp(1rem, 1.2vw, 1.1875rem); max-width: 30ch; margin: 0; text-align: left; } .nest-weg__text p + p { margin-top: 1.1em; } /* Auf schmalen Schirmen läuft der Weg senkrecht: vier Spalten à 30ch passen nicht nebeneinander. Die Bögen entfallen dann — sie zeichnen eine Kurve zwischen zwei SPALTEN, und die gibt es nicht mehr. */ @media (max-width: 59.99rem) { .nest-weg { grid-template-columns: minmax(0, 1fr); gap: 0; } .nest-weg::before { left: 19px; right: auto; top: 0; bottom: 0; width: var(--rule-hair); height: auto; background: linear-gradient(to bottom, var(--rule) 0 calc(var(--p) * 100%), var(--grey-300) calc(var(--p) * 100%) 100%); } .nest-weg li { padding: 0 0 40px 64px; } .nest-weg li:not(:last-child)::before, .nest-weg li:not(:last-child)::after { display: none; } } /* --- 4 werkzeuge ------------------------------------------------------ */ /* Der Aufklapper ist ein gemeinsamer Baustein: dieselbe Mechanik trägt die vier Werkzeuge, die häufigen Fragen und das Projektverzeichnis. Was hier steht, ist nur, was allen dreien gemeinsam ist — die Ausprägung folgt je Abschnitt. */ .nest-aufklapper { border-top: var(--rule-hair) solid var(--rule); } .nest-aufklapper:last-of-type { border-bottom: var(--rule-hair) solid var(--rule); } .nest-aufklapper__kopf { list-style: none; cursor: pointer; display: grid; align-items: baseline; gap: clamp(12px, 2vw, 32px); } .nest-aufklapper__kopf::-webkit-details-marker { display: none; } /* Das Kreuz: zwei Striche, von denen einer beim Öffnen wegklappt. Kein Zeichen aus einer Schrift — die Vorlage zeichnet es, und ein „+“ aus der Textschrift säße nicht auf derselben Achse. */ .nest-aufklapper__plus { position: relative; width: 28px; height: 28px; justify-self: end; align-self: center; } .nest-aufklapper__plus::before, .nest-aufklapper__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: var(--rule-hair); background: currentColor; transition: transform var(--dur-fast) var(--ease-ui); } .nest-aufklapper__plus::after { transform: rotate(90deg); } .nest-aufklapper[open] .nest-aufklapper__plus::after { transform: rotate(0); } .nest-aufklapper__inhalt > div > p:first-child { margin-top: 0; } .nest-aufklapper__inhalt > div > p:last-child { margin-bottom: 0; } /* Die vier Werkzeuge: Kürzel, Titel, Kreuz. Das Kürzel steht im geöffneten Werkzeug auf Gelb — das ist die einzige Stelle, an der der Abschnitt Farbe zeigt, und sie zeigt sie als Markierung der offenen Zeile, nicht als Fläche des Abschnitts. */ .nest-aufklapper--werkzeug .nest-aufklapper__kopf { grid-template-columns: minmax(0, 7ch) minmax(0, 1fr) 40px; padding: clamp(18px, 2.2vw, 32px) 0; } .nest-aufklapper__kurz { font-family: var(--font-mono); font-size: clamp(1.75rem, 3.4vw, 3.25rem); font-weight: 400; letter-spacing: -.02em; } .nest-aufklapper__titel { font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; } .nest-aufklapper__kopf:hover .nest-aufklapper__titel { text-decoration: underline; text-decoration-thickness: var(--rule-hair); } .nest-aufklapper--werkzeug .nest-aufklapper__inhalt { display: grid; grid-template-columns: minmax(0, 7ch) minmax(0, 1fr) 40px; gap: clamp(12px, 2vw, 32px); padding-bottom: clamp(24px, 3vw, 48px); } /* Der Textkörper hält die Lesebreite, der 3D-Scan nicht: ein `