/* ============================================================ History Labs — Design System 6 Basisfarben, alle weiteren Werte sind Ableitungen (color-mix) ============================================================ */ /* Die Tokens haengen an `body`, nicht an `:root`. Grund: Elementor legt seine globalen Variablen auf .elementor-kit-6 ab, und diese Klasse sitzt am . Von :root (dem ) aus waeren sie nicht sichtbar — die Bruecke unten liefe immer in den Fallback. */ body{ /* --- 1. Farben ------------------------------------------- Die sechs Grundfarben lesen aus Elementors globalen Farben. Wer in Elementor unter Website-Einstellungen an einer davon zieht, veraendert damit die ganze Seite — inklusive aller Linien, Tints und Hover-Flaechen, weil die per color-mix() aus genau diesen Tokens entstehen. Der Wert hinter dem Komma ist der Fallback und zugleich die Dokumentation des Sollwerts: Er greift, wenn das Kit-Stylesheet fehlt (Editor-Vorschau ohne Kit, exportiertes Markup, abgeschaltetes Elementor). Reihenfolge der Elementor-Slots: primary -> Indigo secondary -> Indigo dunkel text -> Slate accent -> Akzentgelb 98d6fd1d -> Canvas f6c8b8f4 -> Papier Die beiden Kuerzel sind die IDs der zwei eigenen Farben im Kit. */ --indigo: var(--e-global-color-primary, #283583); /* Primär */ --indigo-deep: var(--e-global-color-secondary, #161C4A); /* Dunkler Grund, Footer, Text */ --accent: var(--e-global-color-accent, #FFF374); /* Akzent (Textmarker) */ --paper: var(--e-global-color-f6c8b8f4, #FFFFFF); /* Karten, erhöhte Flächen */ --canvas: var(--e-global-color-98d6fd1d, #F1F2F7); /* Seitengrund, indigo-getönt */ --slate: var(--e-global-color-text, #515774); /* Fließtext sekundär (4.5:1 auch auf getönten Bändern) */ /* Ableitungen */ --indigo-08: color-mix(in srgb, var(--indigo) 8%, var(--paper)); --indigo-12: color-mix(in srgb, var(--indigo) 12%, var(--canvas)); --line: color-mix(in srgb, var(--indigo) 14%, transparent); /* Kartenkontur als Systemtoken. Vorher hat sich jede Sektion ihre eigene gemischt — die Leistungs-Karte lief auf Indigo 66 %, das Problem-Panel auf 34 %, also zwei verschiedene Kartenstriche auf derselben Seite. Ein Craft-Kritiker hat das gemessen (3,01:1 gegen 1,41:1). Ein Token, eine Kontur. */ --line-card: color-mix(in srgb, var(--indigo) 66%, var(--paper)); /* Trenner zwischen gleichrangigen Listeneintraegen — die untergeordnete der beiden Linienstufen. Vorher 8 %, was auf Weiss nur 1,15:1 ergab und damit unter der dokumentierten Stufe lag. Ein System-Kritiker hat im Vergleich dreier Sektionen drei verschiedene Werte fuer dieselbe Rolle gemessen: Problem 16 % (1,38:1), Relevanz 12 % (1,29:1), Referenz 8 % (1,15:1). 18 % ueber Weiss ergibt (216,219,233) und damit exakt den Wert der Problem-Sektion, die als erste durch alle drei Kritiker kam. Er gilt jetzt fuer alle. */ --line-soft: color-mix(in srgb, var(--indigo) 18%, transparent); --accent-dim: color-mix(in srgb, var(--accent) 55%, var(--paper)); --on-dark: color-mix(in srgb, var(--paper) 78%, var(--indigo)); /* --- 2. Typografie --------------------------------------- */ /* Umbenannt von --display: Elementor setzt auf jedem Container --display:flex fuer die CSS-Eigenschaft display und ueberschreibt den Namen damit fuer alles darin. Die Ueberschriften liefen dadurch auf "flex" statt Montserrat. */ /* Auch die beiden Schriftfamilien lesen aus Elementor. Die Schriftdateien selbst liegen lokal im Theme (assets/fonts.css) — Elementor liefert hier nur den Namen, nicht die Datei. Wer die Familie in Elementor tauscht, muss also die passenden @font-face-Regeln nachziehen. */ --font-display: var(--e-global-typography-primary-font-family, "Montserrat"), "Helvetica Neue", Arial, sans-serif; --body: var(--e-global-typography-text-font-family, "Instrument Sans"), "Segoe UI", Helvetica, Arial, sans-serif; --t-display: clamp(2.05rem, 1.1rem + 3.2vw, 3.9rem); --t-h2: clamp(1.75rem, 1.05rem + 2.4vw, 3.1rem); --t-h3: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); --t-lead: clamp(1.1rem, 1rem + .5vw, 1.32rem); --t-body: 1.0625rem; --t-small: .9375rem; --t-label: .78rem; /* --- 3. Raster & Form ------------------------------------ */ --max: 1200px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section: clamp(5rem, 9vw, 8.5rem); --r-card: 20px; --r-input: 12px; --r-pill: 999px; --shadow-card: 0 1px 2px color-mix(in srgb, var(--indigo) 6%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--indigo) 45%, transparent); --ease: cubic-bezier(.22,.61,.36,1); } /* ============================================================ Basis ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--canvas); color:var(--indigo-deep); font-family:var(--body); font-size:var(--t-body); line-height:1.62; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%} a{color:inherit} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.06; letter-spacing:-.028em; text-wrap:balance; overflow-wrap:break-word; hyphens:auto; margin:0; color:var(--indigo); } h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3); font-weight:700; letter-spacing:-.018em; line-height:1.24} p{margin:0} /* ol muss mit zurueckgesetzt werden: Der Browser gibt geordneten Listen 40px padding-inline-start. Die Prozess-Sektion stand dadurch als einzige Sektion der Seite 40px eingerueckt gegenueber ihrem eigenen Eyebrow und ihrer Headline. */ ul,ol{margin:0; padding:0; list-style:none} :focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; border-radius:4px; } /* ============================================================ Layout-Primitive ============================================================ */ .wrap{width:100%; max-width:var(--max); --measure:var(--max); margin-inline:auto; padding-inline:var(--gutter)} section{padding-block:var(--section)} .stack{display:flex; flex-direction:column} .gap-xs{gap:.5rem} .gap-s{gap:1rem} .gap-m{gap:1.5rem} .gap-l{gap:2.5rem} .gap-xl{gap:4rem} .head{max-width:56ch; --measure:56ch; display:flex; flex-direction:column; gap:1.5rem} .head p:not(:where(.label)){color:var(--slate); font-size:var(--t-lead); line-height:1.55; max-width:52ch} /* :not(:where(.label)) statt :not(.label): Der Element-Selektor (0,1,1) schlug .label (0,1,0) und blies jedes Eyebrow auf Lead-Größe auf — von zwei System-Kritikern unabhängig gemessen. Ein einfaches :not(.label) hätte die Spezifität auf (0,2,1) angehoben und dabei berechtigte Regeln in den Sektionen überstimmt; das ist bei der CTA-Sektion prompt passiert. :where() trägt keine Spezifität bei, der Selektor bleibt also exakt so stark wie zuvor und schließt nur das Label aus. */ .label{ font-family:var(--body); font-size:var(--t-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); display:flex; align-items:center; gap:.7rem; } .label::before{ content:""; width:26px; height:2px; background:var(--indigo); flex:none; } /* Textmarker — das eine gestalterische Signal der Marke */ /* Textmarker. Die Auszeichnung sitzt IMMER in der Überschrift der Sektion — nie auf einem Schlussclaim, nie im Fließtext, nie im Bild. Vorher stand sie an vier verschiedenen Sorten von Stellen, und dadurch hatte das eine Signal der Marke keine erkennbare Aufgabe. GEOMETRIE. Der Balken ist geschert, die Scherung greift an der linken Mittelachse an. Die Unterkante wandert dadurch um tan(14°)·h/2 nach links, und dieser Betrag wächst mit der Balkenhöhe. Über die Seite gemessen ergab das drei verschiedene Überstände: Hero 5px, Problem 6px, Ansatz 21px — bei drei verschiedenen Höhen. Steht das ausgezeichnete Wort am Zeilenanfang, ragt der Balken um genau diesen Betrag über die linke Satzkante hinaus. Der Versatz ist deshalb jetzt vorgehalten: `left` trägt die Scherung der jeweiligen Höhe als positiven Wert, sodass der linkeste gezeichnete Punkt auf dem Textursprung liegt — bei jeder Höhe gleich. Die vollflächige Variante bekommt zusätzlich eine flachere Scherung: bei 1,24em Höhe wäre der Versatz sonst so groß, dass die Vorhaltung den ersten Buchstaben oben anschneidet. */ .mark{position:relative; white-space:nowrap} .mark::before{ content:""; position:absolute; z-index:-1; /* .045em = tan(14°) · .36em/2 — die Scherung dieser Höhe, vorgehalten. */ left:.045em; right:-.165em; bottom:.02em; height:.36em; background:var(--accent); transform:skewX(-14deg) scaleX(var(--mark-scale,1)); transform-origin:left center; } /* h1 trägt einen flacheren Balken, also auch eine kleinere Vorhaltung. */ h1 .mark::before{height:.30em; bottom:.04em; left:.037em; right:-.157em} /* Vollflächige Variante: für Auszeichnungen auf dunklem Grund */ .mark--fill{color:var(--indigo-deep)} .mark--fill::before{ height:1.24em; bottom:-.16em; border-radius:3px; /* Scherung 5° statt 14°: tan(5°)·1,24em/2 = .054em. Mit 14° läge die Vorhaltung bei .155em und der erste Buchstabe stünde oben außerhalb. */ transform:skewX(-5deg) scaleX(var(--mark-scale,1)); left:.054em; right:-.29em; } /* ============================================================ Buttons ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--body); font-size:var(--t-body); font-weight:600; padding:.95rem 1.7rem; border-radius:var(--r-pill); border:1px solid transparent; text-decoration:none; cursor:pointer; transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn svg{transition:transform .25s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn--primary{background:var(--indigo); color:var(--paper)} .btn--primary:hover{background:var(--indigo-deep); transform:translateY(-2px)} .btn--accent{background:var(--accent); color:var(--indigo-deep)} .btn--accent:hover{background:var(--paper); transform:translateY(-2px)} .btn--ghost{background:transparent; color:var(--indigo); border-color:var(--line)} .btn--ghost:hover{border-color:var(--indigo); background:var(--indigo-08)} .btn--sm{padding:.65rem 1.25rem; font-size:var(--t-small)} .textlink{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; text-decoration:none; color:var(--indigo); border-bottom:2px solid var(--accent); padding-bottom:2px; width:fit-content; transition:gap .25s var(--ease), border-color .25s var(--ease); } .textlink:hover{gap:.85rem; border-color:var(--indigo)} /* ============================================================ Header ============================================================ */ .site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background-color .3s var(--ease); } .site-header[data-stuck="true"]{border-bottom-color:var(--line-soft)} .site-header .wrap{display:flex; align-items:center; gap:2rem; height:78px} .nav{display:flex; gap:2rem; margin-inline:auto; font-size:var(--t-small); font-weight:500} .nav a{text-decoration:none; color:var(--slate); position:relative; padding-block:.35rem; transition:color .2s var(--ease)} .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); } .nav a:hover{color:var(--indigo)} .nav a:hover::after{transform:scaleX(1)} /* Logo */ .logo{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none} .logo svg{height:34px; width:auto; display:block} .logo-type{ font-family:var(--font-display); font-weight:800; font-size:1.02rem; line-height:1.02; letter-spacing:-.02em; color:var(--indigo); display:flex; flex-direction:column; } .logo-type span:last-child{font-weight:700} /* ============================================================ Hero ============================================================ */ .hero{padding-block:clamp(3.5rem,7vw,6rem) var(--section); position:relative; overflow:hidden} .hero::after{ content:""; position:absolute; inset:auto -10% -40% 55%; height:520px; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%); pointer-events:none; z-index:-2; } .hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2.5rem,5vw,5rem); align-items:end} .hero h1{font-size:var(--t-display); letter-spacing:-.035em} .hero .lead{font-size:var(--t-lead); color:var(--slate); max-width:46ch; line-height:1.55} .hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:.5rem} .hero-note{font-size:var(--t-small); color:var(--slate)} /* Archivkarte — visueller Anker statt Stockfoto */ .archive{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:2rem; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:1.25rem; } .archive-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--slate); padding-bottom:1rem; border-bottom:1px solid var(--line-soft); } .tl{display:flex; flex-direction:column; gap:0} .tl-row{ display:grid; grid-template-columns:4.2rem 1fr; align-items:baseline; gap:1rem; padding-block:.85rem; border-bottom:1px solid var(--line-soft); } .tl-row:last-child{border-bottom:0; padding-bottom:0} .tl-year{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--indigo); font-variant-numeric:tabular-nums; letter-spacing:0; } .tl-text{font-size:var(--t-small); color:var(--slate); line-height:1.45} .tl-row[data-key="true"] .tl-text{color:var(--indigo-deep); font-weight:500} /* ============================================================ Karten & Raster ============================================================ */ .grid{display:grid; gap:1.25rem} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:2rem 1.75rem; display:flex; flex-direction:column; gap:.85rem; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card p{color:var(--slate); font-size:var(--t-small); line-height:1.6} .card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--indigo) 28%, transparent); box-shadow:var(--shadow-card)} .card--flat{background:transparent; border-color:var(--line-soft)} .card--flat:hover{background:var(--paper)} .card-index{ font-family:var(--font-display); font-weight:800; font-size:.82rem; letter-spacing:.06em; color:var(--indigo); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:var(--r-pill); background:var(--accent); flex:none; } /* Zielgruppen-Karten (Relevanz) */ .audience{border-radius:var(--r-card); padding:1.9rem 1.6rem; display:flex; flex-direction:column; gap:.75rem; background:var(--paper); border:1px solid var(--line)} .audience h3{font-size:1.15rem} .audience p{color:var(--slate); font-size:var(--t-small)} .audience[data-accent="true"]{background:var(--accent); border-color:transparent} .audience[data-accent="true"] p{color:color-mix(in srgb, var(--indigo-deep) 82%, transparent)} /* ============================================================ Ansatz (3 Schritte) ============================================================ */ .approach{background:var(--indigo); color:var(--on-dark)} .approach h2, .approach h3{color:var(--paper)} .approach .head p:not(:where(.label)){color:var(--on-dark)} .approach .label{color:color-mix(in srgb, var(--paper) 65%, var(--indigo))} .approach .label::before{background:var(--accent)} .step{ border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding-top:1.5rem; display:flex; flex-direction:column; gap:.8rem; } .step-no{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--accent); letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .step p{color:var(--on-dark); font-size:var(--t-small)} .approach-claim{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.45rem, 1rem + 1.8vw, 2.35rem); color:var(--paper); letter-spacing:-.02em; line-height:1.3; padding-top:2.5rem; border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); } /* ============================================================ Leistungen ============================================================ */ .service{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:2.25rem 2rem; display:flex; flex-direction:column; gap:1.4rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .service:hover{transform:translateY(-4px); box-shadow:var(--shadow-card)} .service h3{font-size:1.35rem} .service-for{color:var(--slate); font-size:var(--t-small); font-weight:500} .service-formats{display:flex; flex-wrap:wrap; gap:.45rem} .tag{ font-size:.82rem; font-weight:500; line-height:1; padding:.5rem .8rem; border-radius:var(--r-pill); background:var(--indigo-08); color:var(--indigo); border:1px solid var(--line-soft); } .service-value{ margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--line-soft); font-size:var(--t-small); color:var(--slate); } .service-value strong{ display:block; color:var(--indigo); font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.5rem; } .note{ margin-top:1.25rem; padding:1.5rem 1.75rem; border-radius:var(--r-card); background:var(--accent-dim); font-size:var(--t-small); color:var(--indigo-deep); font-weight:500; border:1px solid color-mix(in srgb, var(--accent) 70%, var(--indigo)); } /* ============================================================ Case ============================================================ */ .case{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(2rem,4vw,3.25rem); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,4vw,3.5rem); align-items:start; box-shadow:var(--shadow-card); } .case-meta{ font-family:var(--font-display); font-weight:700; font-size:var(--t-small); color:var(--indigo); letter-spacing:.02em; } .case p{color:var(--slate)} .case p strong{color:var(--indigo-deep)} .case-facts{display:flex; flex-direction:column; gap:0} .case-fact{padding-block:1.15rem; border-top:1px solid var(--line-soft)} .case-fact:first-child{border-top:0; padding-top:0} .case-fact h4{ font-family:var(--body); font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); margin-bottom:.35rem; } .case-fact p{color:var(--indigo-deep); font-size:var(--t-small)} /* ============================================================ Team ============================================================ */ .person{display:flex; flex-direction:column; gap:1rem} .person-avatar{ aspect-ratio:3/4; border-radius:var(--r-card); background:var(--indigo-12); border:1px solid var(--line); display:flex; align-items:flex-end; justify-content:flex-start; padding:1.25rem; overflow:hidden; position:relative; } .person-avatar span{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem,5vw,3.4rem); line-height:1; color:color-mix(in srgb, var(--indigo) 32%, transparent); letter-spacing:-.04em; } .person h3{font-size:1.2rem} .person p{color:var(--slate); font-size:var(--t-small)} /* ============================================================ Prozess ============================================================ */ .process{display:flex; flex-direction:column} .phase{ display:grid; grid-template-columns:8.5rem 1fr; gap:clamp(1.5rem,4vw,3.5rem); padding-block:2.25rem; border-top:1px solid var(--line); align-items:start; } .phase:last-child{border-bottom:1px solid var(--line)} .phase-no{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--font-display); font-weight:800; color:var(--indigo); font-variant-numeric:tabular-nums; } .phase-no b{font-size:2.1rem; line-height:1; letter-spacing:-.04em} .phase-no i{font-style:normal; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); font-family:var(--body); font-weight:600} .phase-body{display:flex; flex-direction:column; gap:.6rem; max-width:62ch; --measure:62ch} .phase p{color:var(--slate)} /* ============================================================ FAQ ============================================================ */ .faq{display:flex; flex-direction:column} .faq details{border-top:1px solid var(--line)} .faq details:last-of-type{border-bottom:1px solid var(--line)} .faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-block:1.5rem; font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:-.015em; color:var(--indigo); line-height:1.35; transition:color .2s var(--ease); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--indigo-deep)} .faq-icon{ flex:none; width:2rem; height:2rem; border-radius:var(--r-pill); background:var(--indigo-08); position:relative; transition:background-color .25s var(--ease), transform .3s var(--ease); } .faq-icon::before,.faq-icon::after{ content:""; position:absolute; inset:50% 28% auto; height:2px; margin-top:-1px; background:var(--indigo); transition:transform .3s var(--ease); } .faq-icon::after{transform:rotate(90deg)} .faq details[open] .faq-icon{background:var(--accent)} .faq details[open] .faq-icon::after{transform:rotate(0deg)} .faq-answer{padding-bottom:1.75rem; max-width:68ch; --measure:68ch; color:var(--slate)} /* ============================================================ Finaler CTA + Footer ============================================================ */ .final{background:var(--indigo-deep); color:var(--on-dark); position:relative; overflow:hidden} .final::before{ content:""; position:absolute; left:50%; top:-30%; width:60rem; height:60rem; transform:translateX(-50%); background:radial-gradient(closest-side, color-mix(in srgb, var(--indigo) 85%, transparent), transparent 70%); pointer-events:none; } .final .wrap{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.75rem} .final h2{color:var(--paper); max-width:20ch} .final p:not(:where(.label)){color:var(--on-dark); max-width:56ch; font-size:var(--t-lead); line-height:1.55} /* Zweiter Fall derselben Kollision wie bei .head p — Element-Selektor (0,1,1) schlägt .label (0,1,0). Zweimal unabhängig von Kritikern gemessen, hier an der Quelle behoben. */ .final .mark::before{background:var(--accent)} .site-footer{background:var(--indigo-deep); color:var(--on-dark); padding-block:3rem; border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent)} .site-footer .wrap{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center; justify-content:space-between} .site-footer .logo-type{color:var(--accent)} .footer-links{display:flex; flex-wrap:wrap; gap:1.5rem; font-size:var(--t-small)} .footer-links a{color:var(--on-dark); text-decoration:none; transition:color .2s var(--ease)} .footer-links a:hover{color:var(--accent)} .footer-legal{font-size:var(--t-small); color:color-mix(in srgb, var(--paper) 55%, var(--indigo-deep))} /* ============================================================ Bewegung ============================================================ */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)} .reveal.is-in{opacity:1; transform:none} .mark{--mark-scale:0} .mark.is-in::before, .no-motion .mark::before{--mark-scale:1} .mark::before{transition:transform .6s .15s var(--ease)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} html{scroll-behavior:auto} .reveal{opacity:1; transform:none} .mark{--mark-scale:1} } /* ============================================================ Responsive ============================================================ */ @media (max-width:1000px){ .hero-grid{grid-template-columns:1fr} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:1fr} .case{grid-template-columns:1fr} .nav{display:none} .hero::after{inset:auto -30% -30% 20%} } @media (max-width:640px){ .grid-2,.grid-4{grid-template-columns:1fr} .phase{grid-template-columns:1fr; gap:.9rem} .site-header .wrap{height:68px} .logo svg{height:28px} .btn{width:100%; justify-content:center} .site-header .btn{width:auto} .hero-cta{flex-direction:column; align-items:stretch} .hero-note{text-align:center} } /* ============================================================ Nachträge: Stacking, Skip-Link, Details ============================================================ */ .mark{isolation:isolate} .hero{z-index:0} .tl-text em{font-style:normal; font-weight:600; color:var(--indigo)} .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--indigo); color:var(--paper); padding:.75rem 1.25rem; border-radius:0 0 var(--r-input) 0; font-size:var(--t-small); font-weight:600; text-decoration:none; } .skip:focus{left:0} .final .label::before{background:var(--accent)} /* Silbentrennung in Ueberschriften: Deutsche Komposita brauchen sie, aber niemals einen Bruch OHNE Trennstrich. overflow-wrap:break-word (geerbt aus der Basisregel) erzeugt genau das, sobald hyphens abgeschaltet ist — im Ansatz brach die Headline dadurch als "Unternehmens/geschichte" und "Kommunikatio/nsstoff". Deshalb: H1 bleibt ungetrennt (der Hero hat Breite genug), H2 darf trennen, und beide brechen nie mitten im Wort ohne Trennstrich. */ h1{hyphens:manual} h1,h2{overflow-wrap:normal} /* ===== Aus dem Design Loop: relevanz ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* ============================================================ Relevanz — Register der Interessenlagen ============================================================ Drei Defekte der Vorfassung: (1) AKZENT. Die Karte „Für Mitarbeitende" war vollflächig gelb (44.432 px) — die größte gelbe Fläche der Seite, mehr als doppelt so groß wie der CTA-Button, und im selben Viewport stand zusätzlich der Headline-Marker. Zwei Akzente in einer Sektion, und der größere hob eine von vier gleichrangigen Zielgruppen ohne Grund hervor. Die Fläche ist ersatzlos weg; `.audience` entfällt aus styles.css. Das eine Gelb der Sektion ist der Marker unter „Startseite" — sonst kommt in dieser Sektion kein einziger Pixel --accent vor. (2) M4 — BÄNDERUNG. Die Sektion lag auf --canvas wie ihre Nachbarn. Über die ganze Seite gab es bisher nur drei Tonwechsel (canvas → indigo → indigo-deep), M4 verlangt mindestens vier. Diese Sektion steht jetzt auf --paper und erzeugt zwei weitere: canvas → paper (Problem → Relevanz) und paper → indigo (Relevanz → Ansatz). Der Sprung ins dunkle Ansatz-Band wird dadurch härter, nicht weicher. (3) M5 — KARTENRASTER OHNE BILDANTEIL. Vier Zielgruppen sind keine vier Bildmotive: Die Art Direction schließt Menschen und Symbolbilder aus, ein Foto für „Für Bewerber" wäre zwangsläufig beides. Statt vier erzwungener Motive eine andere Bauform — aus dem Vier-Karten-Raster wird ein Register: eine Spalte, vier Einträge, Haarlinien dazwischen, daneben der Kopf. Keine Kachel, kein Kartenrand, keine Reihe aus drei oder mehr Text-Karten mehr. Die Form kommt aus dem Material selbst — ein Registerblatt aus einem Archivordner. */ .relevance{background:var(--paper)} /* Zweispaltiger Satzspiegel: links die Einordnung, rechts das Register. Beide Spalten sind etwa gleich hoch, dadurch bleibt keine tote Fläche — das war der Preis der vorherigen kopflastigen Anordnung. */ .rel-grid{ display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1fr); column-gap:clamp(2.5rem,6vw,5.5rem); row-gap:clamp(2.5rem,4vw,3.5rem); align-items:start; } /* .head bringt max-width:56ch mit; in der schmalen Spalte ist das wirkungslos, .head p:not(:where(.label)) liefert weiterhin Lead-Größe und --slate. */ .rel-intro{max-width:none; --measure:100%; gap:1.5rem} .rel-intro h2{hyphens:manual} .rel-intro .rel-lead{max-width:42ch; --measure:42ch} /* Der Abschluss löst das Register ein und steht deshalb unter dem Kopf, nicht darüber. Wortlaut unverändert; ausgezeichnet ist nur die zweite Hälfte — dort steht die Aussage der Sektion. Auszeichnung über Farbe und Schnitt, nicht über Gelb: das eine Gelb ist vergeben. */ /* Der Strich lief auf --line (Indigo 14 %) und war damit der dritte Wert fuer Linien auf dieser Seite. Er trennt keine Hauptzonen, sondern zwei Absaetze derselben Spalte — das ist die untergeordnete Stufe. */ .rel-close{ margin-top:.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); max-width:42ch; --measure:42ch; text-wrap:pretty; } .rel-close strong{color:var(--indigo-deep); font-weight:600} /* Das Register. Jeder Eintrag ist eine volle Zeile mit eigener Kante, damit ein Leser die für ihn passende Interessenlage beim Überfliegen findet. */ .rel-list{display:flex; flex-direction:column} /* Die Zeilentrenner liefen auf --line (Indigo 14 %) und ergaben 1,29:1, waehrend dieselbe Rolle in der Problem-Sektion 1,38:1 misst. Ein System-Kritiker hat im Vergleich dreier Sektionen drei Werte fuer eine Rolle gefunden. Alle laufen jetzt auf --line-soft. */ .rel-row{ display:flex; flex-direction:column; gap:.5rem; padding-block:clamp(1.25rem,2vw,1.7rem); border-top:1px solid var(--line-soft); } .rel-row:first-child{padding-top:0; border-top:0} .rel-row h3{font-size:1.22rem; letter-spacing:-.02em} .rel-row p{color:var(--slate); font-size:var(--t-body); line-height:1.6; max-width:56ch} /* Das Artefakt der Sektion: das Register selbst, als Gegenstand. Ein einziges Bild für die ganze Sektion — vier Zielgruppen sind keine vier Motive, und ein Foto für „Für Bewerber" wäre zwangsläufig ein Mensch oder ein Symbolbild. Es bringt kein Gelb mit; der Marker bleibt die einzige Akzentfläche. */ .rel-wrap{display:flex; flex-direction:column; gap:clamp(2.5rem,4.5vw,4rem)} .rel-figure{margin:0} .rel-figure img{ display:block; width:100%; height:auto; aspect-ratio:33/14; object-fit:cover; border-radius:var(--r-card); /* Der helle, hart belichtete Grund des Motivs erreicht an der Oberkante rgb(234,238,241) und liefe dort in den --paper-Grund der Sektion aus. Eine 1px-Linie fasst die Fläche; kein Schatten — die sind laut System Hero-Panel und Case vorbehalten. */ border:1px solid var(--line); } @media (max-width:1000px){ .rel-grid{grid-template-columns:1fr} .rel-intro .rel-lead, .rel-close{max-width:56ch; --measure:56ch} } /* ===== Aus dem Design Loop: hero ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* ============================================================ Hero — Typografie links, Bildpanel rechts Entscheidung Runde 2: das Gelb lebt in der Typografie. Das Foto ist strikt monochrom (null gelbe Pixel), der Textmarker unter „mehr bleiben" ist damit die einzige gelbe Fläche im Fold. Der Marker bleibt ein Zeichen der Marke und nicht eine Eigenschaft einer Bilddatei. Entscheidung Runde 3: `hero.png` zeigt die Verwandlung in einem Bild — links loses Archivmaterial, rechts das fertige Produkt daraus. Beide Hälften müssen im Fold lesbar sein, deshalb ist das Panel jetzt quer statt hochkant. ============================================================ */ .hero{ padding-block:clamp(2rem,3.5vw,2.75rem) clamp(2.25rem,4vw,3rem); background:var(--canvas); isolation:isolate; } /* dekorativer gelber Radial-Schein entfällt — das Gelb sitzt im Marker */ .hero::after{display:none} /* Entscheidung zur Panelkante (Runde 3): bewusst über den Rand. Runde 2 endete bei x=1400 — 40px vor dem Viewportrand und 120px hinter der Rasterkante bei 1280. Das war weder das eine noch das andere. Jetzt läuft das Panel rechts aus dem Bild heraus: die rechten Ecken sind gerade, die rechte Linie entfällt, links bleiben Radius 20px, Linie und der eine erlaubte Schatten. Der Textspaltenanfang bleibt bündig mit dem Logo (x=160). Der Anschnitt ist auch die Bedingung für M1: ein Querformat neben einer lesbaren Textspalte erreicht die 35%-Fläche nur, wenn es den Gutter verlässt. */ .hero-grid{ max-width:none; --measure:100%; padding-left:max(var(--gutter), calc((100% - var(--max))/2 + var(--gutter))); padding-right:0; grid-template-columns:minmax(0,30rem) minmax(0,1fr); gap:1.5rem; align-items:center; } /* ---------- Typografie: vier Größen im Fold ---------- 12,5px Label · 15px Navigation/Notiz · 17px Lead und Button · 40px Headline. Der Lead liegt jetzt auf Body-Größe; seine Hierarchie trägt Gewicht und Farbe statt einer fünften Stufe. Die Headline steht in vier gesetzten Zeilen statt sechs, dadurch beginnt der Lead rund 160px weiter oben. */ .hero h1{ /* Entscheidung 03.09.2026 (08-Offene-Entscheidungen, Punkt 1): Die H1 lief mit einer Obergrenze von 2,28rem (36,5px) unter der H2-Stufe und drehte die typografische Hierarchie um. Sie laeuft jetzt auf derselben Stufe wie die Sektionsueberschriften. */ font-size:var(--t-h2); letter-spacing:-.032em; line-height:1.17; text-wrap:wrap; } /* ---------- Die eine große Akzentfläche (M3 „einmal groß") ---------- Runde 3 hatte Gelb nur als 22px hohe Unterstreichung; der Fold hatte damit keine Akzentfläche, während Harvest ein großes oranges Panel und Flowmapp eine große blaue Pille setzt. Die Regel des Designsystems lässt genau eine gelbe Stelle pro Sektion zu — zwei Flächen wären ein sicherer Durchfall. Also wird die vorhandene Stelle groß statt eine zweite aufgemacht. Warum nicht der Button: `.btn--accent` ist im System ausdrücklich „nur auf dunklem Grund" definiert; auf dem hellen Canvas verlieren #FFF374 und der Grund die Figur-Grund-Trennung. Und der Marker ist die Marke selbst — er taucht in Ansatz, Leistungen und CTA weiter auf. Er an der prominentesten Stelle der Seite wegzunehmen, um ihn zwei Bildschirme später wieder einzuführen, wäre ein Bruch, kein Muster. Aus der Unterstreichung wird deshalb das Feld, das das Wort trägt: die Systemvariante `.mark--fill`, hier auf Headline-Maß gebracht. Es bleibt eine einzige Bounding-Box, ein einziger gelber Bereich. Die Zeilenhöhe der Headline geht dafür von 1.06 auf 1.17 — das Feld ist 1.13em hoch und muss in seine Zeile passen, ohne die Nachbarzeilen zu berühren. */ /* Die Headline bleibt einfarbig --indigo. `.mark--fill` setzt den Text sonst auf --indigo-deep; gegen das Gelb erzeugt das Antialiasing dabei Pixel bis rgb(22,28,73) — einen Hauch unter --indigo-deep, und damit unnötig an der Grenze „kein Pixel dunkler als #161C4A außerhalb des Panels". --indigo auf #FFF374 trägt 9,4:1 und hält die Headline in einer Farbe. */ .hero h1 .mark{color:inherit} /* Skew 9 statt 14 Grad: bei 22px Strichhöhe war die Schräge ein Akzent, bei 41px Feldhöhe wäre sie ein Keil. Der Versatz ist wie in der Basiskomponente vorgehalten: tan(9°)·1,13em/2 = .0895em. „mehr bleiben" steht am Zeilenanfang, und ohne Vorhaltung lief die Unterkante des Feldes 5px über die linke Satzkante hinaus — gemessen an der Gesamtseite war das einer von drei verschiedenen Überständen. */ .hero h1 .mark::before{ height:1.13em; bottom:-.24em; left:.0895em; right:-.21em; border-radius:3px; transform:skewX(-9deg) scaleX(var(--mark-scale,1)); } .hero .lead{ font-size:var(--t-body); line-height:1.62; color:var(--slate); max-width:38ch; --measure:38ch; } .hero .lead strong{color:var(--indigo-deep); font-weight:600} .hero-cta{margin-top:.25rem} /* ---------- Bildpanel ---------- Gefasst wie Harvests Produkt-Panel: Radius 20px, 1px Linie, der eine erlaubte Schatten. Querformat, weil die Aussage des Bildes quer liegt: links das lose Archivmaterial, rechts das fertige Buch. Das Seitenverhältnis 62/50 (1,24) steht dicht am Bildformat 4:3 (1,34); `cover` beschneidet damit insgesamt 7,4% der Bildbreite — beide Hälften bleiben vollständig im Ausschnitt, wo der Schnitt genau liegt, entscheidet `object-position` unten. */ .hero-media{ position:relative; margin:0; aspect-ratio:62/50; border-radius:var(--r-card) 0 0 var(--r-card); border:1px solid var(--line); border-right:0; background:var(--canvas); box-shadow:var(--shadow-card); overflow:hidden; isolation:isolate; } /* ---------- Die Achse: links roh, rechts fertig ---------- Befund Runde 3: das Motiv trug die Aussage, die Bildbehandlung nicht. Eine Messung der Quelldatei bestätigt es — in acht senkrechten Streifen liegt der Mittelwert zwischen 123 und 137 von 255, also praktisch flach. Loses Archivmaterial und fertiges Produkt standen auf demselben Wert, und eine Rampe, die beide Hälften auf denselben Wert legt, löscht genau den Unterschied, den das Bild transportieren soll. Die Rampe bleibt, aber sie ist nicht mehr eine. Sie zerfällt in zwei, und der Sprung zwischen ihnen ist die Achse: #duotone-roh Schwarz → --indigo-deep, Weiß -> #9AA0BE. Der Weißpunkt ist gekappt: das lose Material hat keine Lichter. Papierweiss der Abzüge wird zu einem stumpfen Blaugrau, dazu contrast(.90) — ungeordnet, ungetrennt. #duotone-fertig Schwarz → --indigo-deep, Weiß -> --paper, also die volle Rampe aus Runde 2, dazu contrast(1.2) brightness(1.05). Nur hier gibt es echtes Weiß: die Buchseite, das Passepartout, der Posterbogen. Gemessen am Tischgrund (Quellwert 147) bedeutet das rgb(106,111,145) links gegen rgb(157,159,179) rechts — rund 50 Helligkeitsstufen Sprung. Die Überblendung läuft von 38% auf 50% der Panelbreite, also über gut 90px. Die Kante ist an der Lücke im Motiv ausgerichtet: der Fotostapel endet bei 40%, der Posterbogen beginnt bei 50%. Kein Gegenstand wird von der Überblendung halbiert, und trotzdem ist sie breit genug, um als einfallendes Licht zu lesen statt als Naht. Das Licht kommt von rechts, wie der Schlagschatten im Motiv es ohnehin verlangt. Beide Rampen behalten --indigo-deep als Boden. Kein Pixel wird gesättigt, keiner fällt unter --indigo-deep, und die Tiefen kippen weiter ins Indigo statt ins Neutralgrau (Art Direction, Regel 7). */ .hero-media img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; /* 78% statt 50%: `cover` schneidet bei diesem Seitenverhältnis 7,4% der Bildbreite weg. Mittig verteilt lag der Schnitt exakt auf der rechten Rahmenkante des gerahmten Prints (Bildkante bei 97,1%) — der Rahmen wurde mitten durch seine eigene Leiste getrennt. Bei 78% liegt der Ausschnitt bei 5,8%-98,4%: der Rahmen steht vollständig im Bild, nur sein Schlag- schatten läuft aus. Links bleiben 1,7% Luft vor dem Fotostapel. */ object-position:78% 50%; } .hero-img--roh{filter:grayscale(1) contrast(.90) url(#duotone-roh)} .hero-img--fertig{ filter:grayscale(1) contrast(1.2) brightness(1.05) url(#duotone-fertig); -webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 50%); mask-image:linear-gradient(90deg,transparent 38%,#000 50%); } .hero-filter{position:absolute; width:0; height:0; overflow:hidden} /* ============================================================ Belegband (M6) — Mechanik der grauen Logoleisten Runde 2 baute hier eine dreistufige Mini-Sektion mit eigener Bandhöhe. Runde 3 machte den Streifen flach, blieb aber bei drei Stufen: Eyebrow-Label, Satz, Reihe mit je zwei Zeilen. Harvest baut an derselben Stelle zwei Stufen — ein Satz, darunter eine Reihe gleich schwerer Marken auf einer Grundlinie. Runde 4 zieht auf diese zwei Stufen zusammen: das Eyebrow „In einem Team" entfällt (der Satz sagt dasselbe und sagt es genauer), und die Unterzeilen der drei Slots entfallen ebenfalls, damit die Reihe wie eine Logoreihe auf einer einzigen Grundlinie steht. Damit bleibt im Fold genau ein Versalien-Element übrig, das Hero-Label — es kommt keine zweite Versalstufe dazu, sie fällt weg. Das Band bleibt rein typografisch, weil es weder Logos noch Zahlen gibt, die wir erfinden dürften; die drei Einträge sind Disziplinen, keine Kunden, und der Satz darüber benennt sie ausdrücklich als solche. ============================================================ */ .proof{ background:var(--canvas); padding-block:clamp(1rem,2vw,1.5rem) clamp(1.25rem,2.4vw,1.75rem); /* Kein Trennstrich nach oben: der Streifen sitzt auf demselben Grund wie der Fold und trennt sich nur durch seine Enge — wie bei beiden Vorbildern. */ border-bottom:1px solid var(--line-soft); } .proof-wrap{ display:flex; flex-direction:column; align-items:center; gap:clamp(.9rem,1.6vw,1.15rem); text-align:center; } .proof-lead{ margin:0; font-size:var(--t-small); color:var(--slate); line-height:1.5; max-width:none; --measure:100%; } .proof-lead strong{color:var(--indigo-deep); font-weight:600} /* Der Slot. Sobald echte Kundenlogos vorliegen, bekommt die Liste die Klasse .proof-row--logos und die

nehmen auf — Raster, Slot-Höhe, Abstände und Graustufen-Behandlung bleiben unverändert. */ .proof-row{ list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; } /* Eine Grundlinie, ein Eintrag pro Slot — die Bauform einer Logoreihe. */ .proof-row li{ display:flex; align-items:center; justify-content:center; min-height:34px; } /* Alle drei Slots tragen dasselbe Gewicht — wie eine Logoreihe in Graustufen, in der kein Zeichen vor den anderen steht. */ .proof-row b{ font-family:var(--font-display); font-weight:700; font-size:var(--t-small); letter-spacing:-.012em; color:var(--slate); line-height:1.2; } .proof-logo{height:32px; width:auto; filter:grayscale(1); opacity:.62} /* ---------- Responsive ---------- */ /* Unterhalb der vollen Rasterbreite trägt die Spaltenteilung nicht mehr fest; ab hier bricht die Headline frei um, damit der gesetzte Zeilenfall nicht in eine zu enge Spalte gerät. */ @media (max-width:1240px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} .hero h1 br{display:none} } /* Gestapelt steht die Typografie zuerst, das Panel folgt. Der Anschnitt endet hier: das Panel sitzt wieder vollständig im Gutter, mit Radius und Linie auf allen vier Seiten, und zeigt das Bild in seinem eigenen Format 4:3 — beide Hälften bleiben nebeneinander lesbar. */ @media (max-width:1000px){ .hero-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,4vw,2.5rem); padding-right:var(--gutter); } .hero-media{ aspect-ratio:4/3; border-radius:var(--r-card); border-right:1px solid var(--line); } .hero .lead{max-width:56ch; --measure:56ch} } @media (max-width:640px){ .proof-row{grid-template-columns:minmax(0,1fr); gap:0} .proof-row li{padding-block:.5rem; min-height:0} } /* ===== Aus dem Design Loop: problem ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* ============================================================ M4 — eigenes Band Die Sektion lag auf --canvas, genau wie Hero, Belegstreifen und Relevanz darunter: über vier Bildschirmhöhen kein einziger Grundwechsel. Sie bekommt deshalb den hellsten Grund des Systems. Über die Seitenhöhe entsteht damit die Folge canvas (Hero/Beleg) → PAPIER (Problem) → canvas (Relevanz) → indigo (Ansatz) → indigo-12 (Leistungen): vier Wechsel. Keine neue Farbe, --paper ist bereits Kartengrund im System. Auf Weiß trägt --line (Indigo 14 % transparent) noch, --line-soft (8 %) nicht mehr. Die Konturen dieser Sektion laufen deshalb über zwei eigene Werte, beide aus den sechs Basisfarben gemischt: --edge Indigo 26 % auf Papier → Panelkontur, ~2,7:1 --rule Indigo 15 % auf Papier → Zeilentrenner im Panel ============================================================ */ .problem{ background: color-mix(in srgb, var(--indigo) 12%, var(--canvas)); --edge: var(--line-card); --rule: color-mix(in srgb, var(--indigo) 18%, var(--paper)); } /* Der Kopf trug bisher allein über 700px Höhe: Headline und zwei Leadabsätze in einer 52ch-Spalte untereinander, danach erst Inhalt. Zweispaltig gesetzt — wie in Ansatz und CTA — schließt er nach der halben Höhe, und der Befund steht im ersten Bildschirm. */ .problem .head{max-width:none; --measure:100%} .problem .head-text{display:flex; flex-direction:column; gap:1.15rem} .problem .head-text p{margin:0} @media (min-width:1001px){ .problem .head{ display:grid; grid-template-columns:1.18fr 1fr; column-gap:clamp(2.5rem,4vw,3.5rem); row-gap:1.35rem; align-items:start; } .problem .head .label{grid-column:1 / -1} .problem .head h2{ grid-column:1; margin:0; /* Entscheidung 03.09.2026 (Punkt 2, Variante A): vereinheitlicht auf --t-h2. Die eigene 44px-Stufe ist entfallen. */ hyphens: manual; } .problem .head .head-text{grid-column:2; padding-top:.35rem} .problem .head-text p{max-width:46ch} } /* ============================================================ M5 — kein Karten-Raster ohne Bildanteil Vorher: vier gleich große Karten in einer Reihe, jede aus Überschrift und Fließtext, sonst nichts — der Verstoß im Wortlaut des Mechanismus. Der Ausweg ist nicht „vier Fotos statt keiner": Die vier Punkte sind Abstraktionen (viele Erwartungen, wenig Zeit, verstreutes Material, unklare Richtung), und ein Bild dafür wäre zwangsläufig Uhr, Kalender oder Wegweiser — also genau die Metaphern, die Regel 1 der Art Direction ausschließt. Stattdessen wird die Reihe aufgelöst: EIN Befund-Panel, links das Artefakt (das Material, das noch keine Reihenfolge hat), rechts die vier Punkte als Zeilen eines Registers. Die Reihe aus vier Karten existiert nicht mehr — es gibt nur noch ein Objekt, und dieses Objekt hat Bildanteil. ============================================================ */ .finding{ display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,1fr); /* Eigene Fuellung: Ohne sie zeigte das Panel den Sektionsgrund durch und hing nur an der Haarlinie — auf Papierweiss war es dadurch eine weisse Karte auf weissem Grund. Auf dem getoenten Band traegt jetzt die Flaeche, wie bei den Leistungs-Karten (Weiss auf #D9DBE9 = 1,38:1). */ background:var(--paper); border:1px solid var(--edge); border-radius:var(--r-card); overflow:hidden; /* Schatten sind laut System den zwei schwebenden Elementen (Hero-Panel, Case) vorbehalten. Hier trägt die Kontur. */ } .finding-shot{ position:relative; margin:0; min-height:0; background:color-mix(in srgb, var(--indigo) 6%, var(--canvas)); border-right:1px solid var(--edge); } /* Die Bildhöhe folgt dem Register, nicht umgekehrt: kein Letterboxing und keine tote Fläche unter der letzten Zeile. Runde 2 — Motivwechsel. Der Slot trug bis hierher einen Hero-Verwurf: dieselben Fotostapel wie oben, dazu ein knappes Drittel leerer Grund. Jetzt steht dort `problem-bestaende.png`, eigens für diese Stelle erzeugt: fünf getrennte Materialinseln nebeneinander, jede in sich geordnet, keine mit der anderen verbunden. Das ist die Aussage der Sektion als Bild — nicht ein Haufen, sondern Bestände ohne Faden. Zum Beschnitt: Die Vorlage ist 4:3, der Slot rund 596×650 (die Höhe gibt das Register vor). Vertikal deckt sich beides exakt — kein einziges Objekt wird oben oder unten angeschnitten. Horizontal fehlen rund 30 % der Vorlagenbreite; die müssen irgendwo weg. Auf 50 % (zentriert) verlor der gebündelte Abzugstapel oben rechts seine Kante und die Werkschrift unten rechts ein Drittel. Auf 60 % liegt der Ausschnitt so, dass Stapel, Karteikarten und Werkschrift vollständig im Bild stehen; angeschnitten sind nur noch Ordner und Negativstreifen an der linken Kante — und die laufen schon in der Vorlage aus dem Format heraus, lesen also als Anschnitt, nicht als Verstümmelung. Alle fünf Inseln bleiben einzeln erkennbar. */ .finding-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%; } /* Register statt Kartenreihe. Vier Zeilen, ein Trennstrich dazwischen, dieselbe Nummernstufe wie die Prozessschritte im Ansatz — damit kommt keine zweite Versalien-Stufe ins System. */ .finding-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .finding-item{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:1.1rem; row-gap:.35rem; align-items:baseline; padding:clamp(1.35rem,2vw,1.7rem) clamp(1.5rem,2.4vw,2rem); border-top:1px solid var(--rule); } .finding-item:first-child{border-top:0} .finding-no{ font-family:var(--body); font-size:var(--t-label); font-weight:600; letter-spacing:.14em; font-variant-numeric:tabular-nums; /* Vorher Indigo 62 % auf Papierweiss = 3,71:1 und damit unter der Grenze fuer Normaltext. Das System kennt keine Kategorie "Text, der nicht lesbar sein muss". --slate traegt an derselben Stelle 7,08:1. */ color:var(--slate); grid-row:1; } .finding-item h3{ margin:0; grid-column:2; color:var(--indigo); } .finding-item p{ margin:0; grid-column:2; color:var(--slate); font-size:var(--t-small); line-height:1.6; max-width:48ch; } /* ============================================================ Akzentdisziplin: GENAU EIN Gelb in dieser Sektion. Es sitzt nicht in einem der vier Problempunkte — der Marker ist das Zeichen für die eine relevante Stelle, nicht für einen Mangel. Es sitzt im Schlusssatz, und der Schlusssatz ist der Satz, der aus dem freigegebenen zweiten Kopfabsatz an sein Ende gewandert ist: dort benennt er, was fehlt, und übergibt an den Ansatz. Wortlaut unverändert, nur umgruppiert und ausgezeichnet. Damit ist das Gelb zugleich das größte Akzentelement im Bildschirm (Art Direction Regel 6) — es gibt kein zweites. ============================================================ */ .problem-claim{ margin:0; max-width:24ch; --measure:24ch; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,.95rem + 1.7vw, 2.35rem); line-height:1.16; letter-spacing:-.026em; color:var(--indigo); } .problem-claim .mark::before{height:.34em; bottom:.03em} @media (max-width:1000px){ .finding{grid-template-columns:minmax(0,1fr)} .finding-shot{ position:static; border-right:0; border-bottom:1px solid var(--edge); aspect-ratio:16/10; } .finding-shot img{position:absolute} .problem-claim{max-width:none; --measure:100%} } @media (max-width:640px){ .finding-item{grid-template-columns:minmax(0,1fr); row-gap:.5rem} .finding-item h3,.finding-item p{grid-column:1} /* Der Marker steht per System auf nowrap; auf schmalem Satz muss der Schlusssatz umbrechen dürfen, sonst schiebt er den Grund auf. */ .problem-claim .mark{white-space:normal} } /* ===== Aus dem Design Loop: ansatz ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* M3: Gelb trägt in dieser Sektion genau zwei Stellen — den Marker im mittleren Bild (klein) und den Schlussclaim (groß). Der Marker-Strich am Label würde eine dritte Akzentfläche einziehen und wird deshalb neutral gesetzt. */ .approach .label::before{background: color-mix(in srgb, var(--paper) 48%, var(--indigo))} /* Der Kopf darf den Fold nicht mehr allein tragen: kürzerer Sektionsabstand, engerer Abstand zum Bildband. Der zweite Absatz ist ans Ende gewandert, wo er den Schlussclaim einleitet. */ .approach{padding-block: clamp(4rem, 6.4vw, 6rem)} .approach .wrap.gap-xl{gap: clamp(1.6rem, 2.4vw, 2.2rem)} /* EINE linke Kante. Vorher lag der Kopf auf dem 1200er-Satzspiegel der Seite, das Bildband aber vollflächig im Band — zwei Kanten mit 120px Versatz und ohne Grund. Das dunkle Band ist ein eigenes Kapitel und bekommt jetzt sein eigenes, breiteres Maß: Eyebrow, Headline, Bildreihe, Schrittexte und Schlussclaim starten alle auf derselben Gutter-Kante. */ /* Runde 6: zurueck auf den 1200er-Satzspiegel. Die gemeinsame linke Kante bleibt, sie liegt jetzt innen. Bildanteil ueber die Hoehe zurueckgeholt. */ /* Block statt Flex-Spalte: Ein Spalten-Flexcontainer exportiert keine verlaessliche erste Grundlinie, wodurch die Grundlinien-Ausrichtung im Grid auf "start" zurueckfaellt. Als Block traegt das Element die Grundlinie seiner ersten Zeile nach aussen. */ .head-text{display: block} .head-text p{margin: 0} .head-text p + p{margin-top: 1.15rem} @media (min-width:1001px){ .approach .head{ max-width: none; --measure:100%; display: grid; /* Der Kopf laeuft bewusst auf einem eigenen Textraster, nicht auf dem Dreier-Raster der Bildreihe. Der Versuch, ihn anzugleichen, ist gemessen gescheitert: Headline ueber Spalte 1-2 zwingt die Erlaeuterung in 352px Breite, sie wird dadurch zehn Zeilen hoch, die Bildreihe rutscht von y=445 auf 510 und der Bildanteil im Fold faellt von 37,1 % auf 31,8 % — unter die Schwelle von M1. Die einzige andere rasterkonforme Teilung gaebe der Headline 352px, zu schmal fuer 44px Display. */ grid-template-columns: 1.34fr 1fr; column-gap: clamp(2.5rem, 4vw, 3.5rem); /* 20px: der Schnitt zwischen Marke und Ueberschrift. 8px war zwar eine Stufe der Skala, aber die Stufe fuer Verbindungen innerhalb eines Elements — das Eyebrow sass dadurch rhythmisch wie eine weitere Headline-Zeile (53px Grundlinienabstand gegen 46,6px Eigenrhythmus der Headline). Die Hoehe wird jetzt nirgends gespart: dass die Bildreihe dadurch die 900px-Kante des Einzelrenders kreuzt, ist ein Artefakt der Stueckpruefung — auf der Seite beginnt diese Sektion bei y=3766, ihre Oberkante faellt nie mit einem Viewport-Anfang zusammen. */ row-gap: 1.25rem; /* first-baseline statt start: Headline und Erlaeuterung haben verschiedene Schriftgrade, ihre ersten Grundlinien lagen dadurch 7-9px versetzt. Der Craft-Kritiker hat das als einzigen verbliebenen Befund gemeldet. */ align-items: first baseline; } .approach .head .label{grid-column: 1 / -1} .approach .head h2{ grid-column: 1; margin: 0; /* Entscheidung 03.09.2026 (Punkt 2, Variante A): vereinheitlicht auf --t-h2. Auf der groesseren Stufe trennte "Unternehmensgeschichte" mit Bindestrich; die Pruefliste verbietet das in Ueberschriften. Wie bei .rel-intro h2 entscheidet hier die Hand ueber die Trennung, nicht der Browser. */ hyphens: manual; } /* Kein align-self mehr: Ein Kind mit eigenem align-self ueberstimmt das align-items des Grids — die Grundlinien-Ausrichtung war dadurch wirkungslos, und das padding-top war eine Naeherung von Hand. Beides raus. */ /* align-self und padding-top muessen explizit zurueckgesetzt werden: Eine spaetere Regel ersetzt die fruehere nicht, sie ueberschreibt nur genannte Eigenschaften. Das align-self: start aus styles.css hat die Grundlinien-Ausrichtung sonst weiter ausgehebelt, obwohl das Grid auf baseline steht. */ .approach .head .head-text{grid-column: 2; align-self: baseline; padding-top: 0} .approach .head-text p{max-width: 40ch} } /* Die drei Schritte sind eine Abfolge, keine Kartenreihe: Haufen → markierte Auswahl → Format. Der Verbinder führt den Blick. Die Reihe liegt auf demselben Maß wie Kopf und Schlussclaim. */ .flow{ --flow-gap: 2rem; gap: var(--flow-gap); align-items: start; list-style: none; margin: 0; padding: 0; } .approach .step{ border-top: 0; padding-top: 0; gap: 0; } /* Print-Passepartout: heller Grund als physisches Objekt auf dem Indigo. Schatten sind laut System den zwei schwebenden Elementen (Hero, Case) vorbehalten — hier trägt die Fläche eine 1px-Linie. Der echte Schatten liegt im Foto, nicht im CSS. */ .shot{ position: relative; margin: 0; padding: 8px; background: color-mix(in srgb, var(--paper) 90%, var(--indigo)); border: 1px solid color-mix(in srgb, var(--indigo) 22%, var(--paper)); border-radius: var(--r-card); } .shot img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-input); } /* Verbinder zwischen den Stationen. Vorher: eine dünne Linie plus ein aus zwei Rahmenkanten gebauter Haken — bei 1:1 vier Pixel breit, eingesetzt statt gestaltet. Jetzt ein einziges gezeichnetes Objekt (Knotenpunkt → Strich → volle Spitze), das exakt von Panelkante zu Panelkante spannt, wie die Verbindungen bei Flowmapp an ihren Karten ansetzen. Die Form steckt in einer Maske, die Farbe kommt aus einer Token-Mischung — kein zusätzlicher Farbwert, kein Gelb. */ .flow{ --connector: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'%3E%3Ccircle cx='3.4' cy='13' r='3.4' fill='white'/%3E%3Crect x='6.4' y='11.65' width='14.4' height='2.7' fill='white'/%3E%3Cpath d='M19.6 6.6 L32 13 L19.6 19.4 Z' fill='white'/%3E%3C/svg%3E"); } .step:not(:last-child) .shot::after{ content: ""; position: absolute; top: 50%; right: calc(-1 * var(--flow-gap)); width: var(--flow-gap); height: 26px; transform: translateY(-50%); pointer-events: none; background: color-mix(in srgb, var(--paper) 66%, var(--indigo)); -webkit-mask: var(--connector) center / 100% 100% no-repeat; mask: var(--connector) center / 100% 100% no-repeat; } .step-txt{ display: flex; flex-direction: column; gap: .5rem; padding-top: 1.15rem; } .approach .step-no{ display: flex; align-items: center; gap: .7rem; /* Eine einzige Versalien-Label-Stufe. Vorher .95rem = 11px Versalhöhe gegen 9px am Eyebrow — der System-Kritiker hat das als zweite, nicht existierende Label-Stufe gemessen. Jetzt derselbe Token und dasselbe Tracking wie .label. */ font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; /* 6,1:1 auf Indigo — Reserve statt Grenzwert. */ color: color-mix(in srgb, var(--paper) 70%, var(--indigo)); } .approach .step-no::after{ content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--paper) 24%, transparent); } .approach .step h3{margin: 0} /* Der Schrittext lief bei 38ch deutlich schmaler aus als das Bild darüber und brach dadurch in Spalte 01 in eine vierte Zeile, die unter den Nachbarn hing. Auf volle Spaltenbreite gesetzt teilt er die Kanten der Bildfläche und schließt in allen drei Spalten nach drei Zeilen. */ .approach .step p{margin: 0; max-width: none} /* Die drei Spalten laufen unterschiedlich lang aus (01 vierzeilig, 02/03 dreizeilig) — der Wortlaut ist freigegeben, Zeilenzahlen lassen sich nicht angleichen. Statt die Kanten auszufransen, schließt eine Abschlusslinie das Band unter der längsten Spalte. Sie spiegelt die drei Nummernlinien oben. */ .flow{ padding-bottom: clamp(1.6rem, 2.4vw, 2.2rem); /* 20% ergab auf Indigo #535D9B = 1,77:1 und damit die untergeordnete Trennerstufe. Dieser Strich schneidet aber zwei Hauptzonen (Schrittraster / Abschluss), und dafuer schreibt das Designsystem die 3:1-Stufe vor. 40% ergibt gemessen 3,10:1. Die schwache Stufe bleibt den Nummernstrichen. */ border-bottom: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); } /* Abschluss: der zweite Kopfabsatz führt direkt in den Schlussclaim. Damit ist der tote Block zwischen Kartentext und Claim gefüllt. */ /* Abschluss liegt auf derselben linken Achse wie Kopf, Nummern und Schrittexte. Zentriert brach er als einziges Element im Abschnitt die Achse (Craft R2). */ .outcome{ margin-top: clamp(.25rem, 1vw, 1rem); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.1rem, 1.8vw, 1.7rem); text-align: left; } .outcome-lead{ margin: 0; /* 60ch rendern in Instrument Sans rund 78 Zeichen — das ch-Mass rechnet mit der Ziffernbreite, die breiter ist als der Mittelwert der Kleinbuchstaben. Das Designsystem deckelt bei ~65 Zeichen; 50ch trifft das gemessen. */ max-width: 50ch; --measure: 50ch; color: var(--on-dark); font-size: var(--t-lead); line-height: 1.55; } .approach-claim{ border-top: 0; padding-top: 0; margin: 0; max-width: none; --measure:100%; text-align: left; font-weight: 800; font-size: clamp(1.8rem, .9rem + 3.1vw, 3.35rem); line-height: 1.14; letter-spacing: -.028em; } .claim-line{ display: block; color: color-mix(in srgb, var(--paper) 88%, var(--indigo)); } .approach-claim .mark--fill{ /* Kein margin-top: Die frueheren .34em stammten aus der Zeit, als der Balken asymmetrisch unter dem Text sass. Bei 53,6px Schrift sind .34em = 18,2px — exakt der Betrag, um den die dritte Claim-Grundlinie aus dem Raster fiel (61/61/79). Der Balken ist jetzt zentriert und braucht keinen Ausgleich. */ display: inline-block; line-height: inherit; } .approach-claim .mark--fill::before{ /* Vorher hoehe 1,16em / bottom -,12em: Der Balken sass unter dem Text statt um ihn herum — 3px ueber der Versalhoehe, 18px unter der Grundlinie, die Schrift stiess oben an und stand 29 % ausermittig. Genau diese Polsterung schob ausserdem die dritte Claim-Zeile aus der Zeilenfuehrung (61/61/79px). Jetzt symmetrisch. */ height: 1.16em; bottom: .02em; left: -.26em; right: -.26em; } @media (max-width:1000px){ .step:not(:last-child) .shot::after{display: none} .flow{--flow-gap: 2.75rem} .shot{max-width: 560px} .step-txt{max-width: 560px} .approach .step p{max-width: 52ch} .approach-claim{max-width: none; --measure:100%} } /* ===== Aus dem Design Loop: referenz ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* ============================================================ Referenz — der Fall mit Bild ============================================================ Drei Befunde der Vorfassung: (1) KEIN BILD. Die Sektion war eine weiße Karte auf hellem Grund, ohne jede Bildfläche — und sie ist ausgerechnet die Sektion, die zeigen soll, was aus Unternehmensgeschichte werden kann. Das Bild trägt genau das: eine gedruckte Doppelseite neben dem Rohmaterial, aus dem sie entstanden ist. (2) DIE EINZIGE TRENNENDE ÜBERSCHRIFT DER SEITE. „Unternehmensgeschichte" passte nicht in das Standardmaß .head (56ch = 571px) und brach als „Unterneh-mensgeschichte" — auf einer Seite, auf der sonst keine einzige Überschrift trennt. Der Kopf dieser Sektion bekommt deshalb 40rem: genug für das Kompositum in einer Zeile. (3) ZWEI GELB. Das Bild trägt den Markerstrich und ist damit das eine gelbe Element der Sektion (Art-Direction Regel 6). Der Link „Projekt ansehen" läuft deshalb auf `.textlink--quiet` — dem dafür vorgesehenen Systemzustand, nicht auf einem selbst gemischten Wert. ============================================================ */ #referenz{ --edge: var(--line-card) } .ref-head{ /* Volle Satzbreite statt 40rem. Erster Versuch war 40rem plus manuelle Trennung. Das beseitigte zwar den Trennstrich — die einzige Trennung der ganzen Seite —, tauschte ihn aber gegen den schlechtesten Flattersatz der Seite: Zeilen von 212 / 654 / 347px, die erste also auf 33 % Fuellung, waehrend „Unternehmensgeschichte" mit 654px das gesetzte Mass von 640px sogar ueberlief. Kein anderer Kopf der Seite faellt unter 93 %. Auf voller Breite (1120px) wurde es nicht besser, sondern anders schlecht: Zeile 1 nahm „Was aus Unternehmensgeschichte werden" (1085px, 97 %) und liess „kann." als Waise von 138px stehen — 12 %. text-wrap:pretty verhindert das in Chrome nicht zuverlaessig. 60rem = 960px erzwingt den Umbruch: „Was aus Unternehmensgeschichte" misst 882px und passt, „werden" mit weiteren 16+205px nicht mehr. Damit faellt der Bruch hinter dem Kompositum, und die Schlusszeile traegt „werden kann." */ max-width: 60rem; --measure: 60rem; } .ref-head h2{ /* hyphens:manual haelt das Kompositum zusammen; text-wrap:pretty statt balance, weil der Ausgleich die lange Zeile nach unten zoege und oben wieder einen Stummel liesse. */ hyphens: manual; /* Unter 480px ist "Unternehmensgeschichte" (371px bei 28px Montserrat 800) breiter als die Satzbreite (335px) — die Seite scrollte dadurch waagerecht. Die Basisregel erlaubt H2 die Trennung ausdruecklich; hier wird sie fuer die schmalen Breiten wieder eingeschaltet. */ text-wrap: wrap; /* nicht balance: der Ausgleich zieht „Unternehmensgeschichte" nach unten */ } @media (max-width:480px){ .ref-head h2{ hyphens: auto } } .ref-figure{ margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 7; } .ref-figure img{ width: 100%; height: 100%; /* 68% liess den Markerstrich 7px ueber der Bandunterkante enden — eine Tangente, die wie ein Zufall aussieht. 62% gibt ihm Luft nach unten. */ object-fit: cover; object-position: 50% 62%; display: block; } /* Die Fallueberschrift stand mit 35px Abstand zum ersten Absatz genauso weit wie die Absaetze untereinander — sie war allein durch den Schriftschnitt unterschieden, waehrend die rechte Spalte ihre Hierarchie raeumlich codiert (13px Label-Abstand gegen 105px Gruppenabstand). */ .case-meta{ margin-bottom: .55rem } .case{ background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-card); } /* Die Trenner zwischen den drei Fakten liefen auf dem alten --line-soft (Indigo 8 %) und ergaben 1,15:1 — unterhalb der dokumentierten schwachen Stufe. Das Token ist global auf 18 % korrigiert; hier steht nur der Hinweis, weil der Befund in dieser Sektion gemessen wurde. */ /* ===== Aus dem Design Loop: faq ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* ============================================================ FAQ — Kopf links, Antworten rechts ============================================================ Befund der Vorfassung: fünf geschlossene Zeilen gleicher Höhe zwischen Haarlinien, darüber eine zweiwortige Überschrift. Im Rendering war das die ereignisloseste Sektion der Seite — sie zeigte im Ruhezustand keine einzige Antwort und keinen einzigen Farbwert. Vier Änderungen: (1) BAND. Die Sektion lag auf dem Grundton wie ihre drei Vorgänger. Sie steht jetzt auf dem getönten Band. Zusammen mit Prozess (weiß) ergibt das zum Seitenende hin weiß → getönt → indigo-deep: eine Steigerung in den CTA, statt vier flacher Sektionen hintereinander. (2) ZWEISPALTIG. Kopf links, Fragen rechts. Der Kopf bleibt beim Scrollen stehen — das ist das Vokabular beider Referenzseiten für Frageblöcke und es füllt das Satzmaß, das eine einspaltige Akkordeonliste leer lässt. (3) DIE ERSTE ANTWORT IST OFFEN. Im Ruhezustand zeigt die Sektion damit eine Antwort statt fünf verschlossener Riegel. Das ist der eigentliche Fix für „kein Designereignis": Der Betrachter sieht sofort, was ihn erwartet. (4) EIN AKZENT, AUF DER AUSSAGE. Erster Versuch war ein gelbes Pluszeichen an der offenen Frage. Der System-Kritiker hat zwei Dinge daran gemessen: 778 gelbe Pixel — die kleinste Akzentfläche der ganzen Seite, gegen 4.566 in der Problem-Sektion und 20.280 im Ansatz — und, schwerer wiegend, es markierte einen Bedienzustand statt einer Aussage. Das Gelb sitzt jetzt als Textmarker auf „mindestens zwölf Monaten", also auf der einen konkreten Zahl, die diese Sektion zu geben hat. Der Umschalter läuft auf Indigo. Genau ein gelbes Element, und es trägt den Satz. ============================================================ */ #faq{ background: color-mix(in srgb, var(--indigo) 12%, var(--canvas)); --edge: var(--line-card); /* --line-soft ergab hier 1,15:1 zu Weiss. Die Problem-Sektion setzt dieselbe Rolle mit Indigo 18% in Papier auf 1,38:1 — das ist die dokumentierte schwache Stufe. Zwei Werte fuer dieselbe Rolle auf einer Seite war genau der Fehler, den das System nach dem Konturbefund abgestellt hat. */ --rule: color-mix(in srgb, var(--indigo) 18%, var(--paper)); } /* Kopf ueber der Karte, nicht daneben. Zwei Anlaeufe mit Kopf in der linken Spalte sind an derselben Stelle gescheitert: Der Kopf traegt 204px Inhalt in einer 569px hohen Spaltenflanke. Erst standen 347px Leerlauf unter dem Link, dann — nachdem ich den Link an die Kartenunterkante verankert hatte — 394px Loch in der Mitte. Der Leerraum war nicht zu fuellen, sondern falsch platziert: Harvests vergleichbare Spalte laesst 167px als Schluss unter einem oben gebuendelten Block stehen, unsere riss ihn zwischen zwei auseinandergezogene Fragmente. Die Problem-Sektion loest dasselbe Verhaeltnis mit einem Kopf ueber voller Breite und einer Karte darunter — und ist so durch alle drei Kritiker gekommen. Genau das steht hier jetzt. */ .faq-head{ max-width: 40ch; --measure: 40ch } .faq-head h2{ margin: 0 } /* Unter der zweizeiligen Ueberschrift stand ein leeres Feld von rund 384 x 400px. Es ist nicht mit erfundenem Text gefuellt, sondern mit dem Weg, den ein Leser nach dem Fragenblock sucht. Die Beschriftung ist die bereits zweimal auf der Seite verwendete — hier als Textlink, nicht als Knopf, damit sie dem echten CTA-Band rund 400px weiter unten nicht die Rolle streitig macht. */ .textlink--quiet{ /* Systemzustand, keine Sektionsausnahme. .textlink traegt eine gelbe Unterlinie. In einer Sektion, die ihr eines Gelb bereits vergeben hat (Art-Direction Regel 6), waere das ein zweiter Akzent. Der erste Versuch mischte hier freihaendig Indigo 45% und landete bei 2,25:1 — zwischen den beiden einzigen zugelassenen Linienstufen, also ein dritter Linienwert auf der Seite. Der Zustand laeuft jetzt auf --line-card, der dokumentierten starken Stufe (gemessen 3,00:1 auf getoentem Band). */ border-bottom-color: var(--line-card); } .textlink--quiet:hover{ border-bottom-color: var(--indigo) } .faq-link{ margin-top: .25rem } /* steht jetzt unter der Karte, nicht neben ihr */ /* Der Fragenblock ist eine Karte auf dem getönten Band — dieselbe Bauweise wie die Befundkarten in der Problem-Sektion: heller Grund, ein Konturstrich auf der starken Linienstufe, Listentrenner auf der schwachen. */ .faq{ display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-card); padding-inline: clamp(1.25rem, 2.4vw, 2.25rem); } .faq details{ border-top: 1px solid var(--rule) } .faq details:first-of-type{ border-top: 0 } .faq details:last-of-type{ border-bottom: 0 } .faq summary{ list-style: none; cursor: pointer; display: block; position: relative; padding-block: clamp(1.15rem, 1.8vw, 1.5rem); padding-right: 4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, .92rem + .28vw, 1.18rem); letter-spacing: -.015em; color: var(--indigo); line-height: 1.35; transition: color .2s var(--ease); } .faq summary::-webkit-details-marker{ display: none } .faq summary:hover{ color: var(--indigo-deep) } .faq .faq-icon{ /* Absolut gesetzt, damit das 32px-Symbol die Zeilenhoehe nicht diktiert: Vorher war eine einzeilige Frage 80px hoch und eine zweizeilige 99px, obwohl die zweite Zeile nur 25px kostet — das Symbol blies die einzeiligen Zeilen um 7px auf. Jetzt ist die Innenhoehe reiner Text plus Polster. */ position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .faq details[open] .faq-icon{ background: color-mix(in srgb, var(--indigo) 16%, var(--paper)) } /* Der Textmarker ist fuer Ueberschriften bemessen: .36em sind auf einer 50px-Headline rund 18px und wirken als Auszeichnung. Auf 15px-Fliesstext sind dieselben .36em nur 5px und lesen sich als duenner Unterstrich. Ueber Fliesstext braucht er die volle Zeilenhoehe, sonst markiert er nicht. */ .faq-answer .mark::before{ height: 1.05em; bottom: -.16em; left: -.16em; right: -.16em } .faq-answer{ padding-bottom: clamp(1.15rem, 1.8vw, 1.5rem); /* 58ch rendern 82 Zeichen; das ch-Mass rechnet mit der breiteren Ziffer. 46ch trifft die dokumentierten ~65 Zeichen. */ max-width: 46ch; --measure: 46ch; color: var(--slate); font-size: var(--t-small); } /* ===== Aus dem Design Loop: prozess ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* ============================================================ Prozess — der Weg als Zeitstrahl ============================================================ Befund der Vorfassung: fünf Textzeilen zwischen Haarlinien, keine Farbe, kein visuelles Ereignis. Die flachste Sektion der Seite — und zugleich die, deren Inhalt („Vom Archiv bis zur Bühne") von sich aus eine Bewegung ist. Drei Änderungen: (1) BAND. Die Sektion lag wie ihre drei Nachbarn auf dem Grundton. Nach den Leistungen liefen dadurch vier Sektionen ohne einen einzigen Tonwechsel durch — die längste flache Strecke der Seite. Prozess steht jetzt auf --paper, das folgende FAQ auf dem getönten Band. Damit endet die Seite auf weiß → getönt → indigo-deep, einer Steigerung in den CTA hinein. (2) RASTER STATT LISTE. Die waagerechten Haarlinien trennten fünf Zeilen, zeigten aber keine Richtung. An ihre Stelle tritt eine senkrechte Schiene durch die Ziffernspalte: eine 1px-Linie, von jedem Ziffernblock unterbrochen. Der Schritt liegt damit sichtbar AUF einem Weg, statt zwischen zwei Strichen zu stehen. Die Ziffern wachsen von 2,1rem auf 3,05rem und tragen die Spalte, statt sie nur zu beschriften. (3) EIN AKZENT, AM ZIEL. Schritt 05 ist der einzige gelb gefüllte Knoten der Sektion — das Ankommen. Genau eine Akzentfläche, konform zu M3, und sie sitzt auf der inhaltlich einzigen Stelle, die eine Hervorhebung verdient: dort, wo aus dem Jubiläum etwas bleibt. ============================================================ */ #prozess{ background: var(--paper); --rule: color-mix(in srgb, var(--indigo) 18%, var(--paper)); --rail: color-mix(in srgb, var(--indigo) 18%, var(--paper)); /* dokumentierte schwache Stufe, vorher 26% */ } /* Kopf ueber der Liste, nicht daneben. Der Kopf in der linken Spalte hat ein 447 x 557px grosses, vollstaendig tintenfreies Feld erzeugt — 23,4 % der Containerflaeche, gemessen vom Craft-Kritiker, und damit groesser als das Loch, das er ersetzen sollte (Faktor 1,75). Der Kopf steht jetzt oben, wie in fuenf der acht Sektionen dieser Seite. Der Streifen rechts der Schritttexte bleibt heute leer; das ist die Flaeche, die im vertagten Bilddurchgang belegt wird. */ .proc-head h2{ margin: 0; /* Der Marker sitzt auf „Buehne:", nicht auf „Jubilaeum". Zuerst stand er auf „Jubilaeum" — dem generischsten Wort des Satzes, das in vier weiteren Ueberschriften der Seite ebenfalls vorkommt. Die Aussage dieser Sektion ist die Strecke „Vom Archiv bis zur Buehne", und ihr Ziel ist die Buehne. Der Doppelpunkt gehoert mit in die Auszeichnung, sonst endet das gescherte rechte Ende mitten in ihm. Dass „Buehne:" am Zeilenanfang steht, ist seit der Korrektur der Markergeometrie kein Problem mehr — der Versatz ist vorgehalten. */ /* Auf 21rem Spaltenbreite trennte diese Ueberschrift als einzige der Seite („Vom Ar-chiv", „Bueh-ne"). 24rem tragen sie vierzeilig ohne Trennung; hyphens:manual schliesst aus, dass sie es bei anderen Schriftgroessen doch tut. */ hyphens: manual; } .process{ display: flex; flex-direction: column; position: relative; margin: 0; padding: 0; list-style: none; } /* Die Schiene. Sie beginnt in der Mitte des ersten Ziffernblocks und endet in der Mitte des letzten — sie läuft nicht ins Leere, sondern von Schritt 01 bis Schritt 05. */ /* Die Ziffernspalte ist 5,5rem breit, nicht 4,5rem: Der Marker auf „05" steht mit Ueberstand und Scherung rund 14px links der Ziffer. Bei 4,5rem ragte er ueber die linke Seitenkante des Containers hinaus. */ .process::before{ content: ""; position: absolute; /* Auf der Ziffernmitte, nicht auf einem Drittel davon: Vorher lief die Schiene mitten durch die Punze der Null (16px von der Ziffernkante, 7px von der Mitte). */ left: 1.63rem; /* gemessene Ziffernmitte */ top: 3.0rem; bottom: 3.0rem; width: 1px; background: var(--rail); } .phase{ display: grid; /* Zwei Spalten, nicht drei. Vorfassung war Ziffer | Titel | Text mit der Textspalte buendig an der rechten Satzkante. Das schloss zwar beide Aussenkanten, riss aber zwischen Titel und Text einen 157px breiten, ueber 906px durchgehenden Schacht ohne einen einzigen Tintenpixel auf — der Abstand Titel->Text schwankte je Zeile zwischen 207 und 438px, gegen konstante 50px von Ziffer zu Titel. Weder getharvest.com noch flowmapp.com hat eine durchgehende tintenfreie Spalte ueber 8px. Titel und Text stehen jetzt uebereinander in einer Spalte; die Luft liegt rechts als Rand, nicht innen als Loch. */ grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: clamp(1.25rem, 2.4vw, 2.5rem); padding-block: 1.9rem; border-top: 0; /* Haarlinien entfallen, siehe (2) */ align-items: start; } /* Bild rechts, Zeitstrahl links. Zwei Kritiker haben unabhaengig dieselbe Zahl gemeldet: Tintendeckung 4,5-5,9 % gegen 26-33 % in den bestandenen Sektionen — die rechte Haelfte der Sektion war leer. Kein Layout konnte das loesen, weil fuenf Schritttexte bei 65 Zeichen Zeilenmass 1120px Satzbreite nicht fuellen. Das Bild fuellt sie. Es ist strikt monochrom: Das eine Gelb der Sektion sitzt auf „Jubilaeum" in der Ueberschrift (Art-Direction Regel 6). */ .proc-body{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 4.4vw, 4rem); align-items: stretch; } .proc-figure{ margin: 0; position: relative } .proc-figure img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: var(--r-card); display: block; } /* Keine Zeilenlinien. Ein Versuch, die Zeilen ueber die volle Satzbreite zu fuehren, damit die Sektion die gemeinsame rechte Kante 1279 haelt: Er hat die Kante gehalten und dabei die leere rechte Haelfte eingerahmt, statt sie zu fuellen — das Loch wurde dadurch sichtbarer, nicht kleiner. Die Sektion endet heute bei x=770. Das ist kein Rasterfehler, sondern die Flaeche, die im vertagten Bilddurchgang belegt wird. */ .phase:first-child{ padding-top: 0 } .phase:last-child{ padding-bottom: 0; border-bottom: 0 } /* Der Knoten unterbricht die Schiene: eigener Grund, kein Rand, damit die Linie nicht angeschnitten wirkt, sondern hinter der Ziffer verschwindet. */ .phase-no{ /* Linksbuendig, nicht zentriert: Zentriert begannen die Ziffern bei x=174, waehrend Eyebrow und Headline auf 160 stehen — ein Versatz von 15px, der auf keinem Rasterwert liegt. */ position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; background: var(--paper); padding-block: .45rem; font-family: var(--font-display); font-weight: 800; color: var(--indigo); font-variant-numeric: tabular-nums; } .phase-no b{ /* 3,05rem ergaben 34px Versalhoehe gegen 35px der H2 — fuenf Listenmarken standen damit optisch auf der Stufe der einen Ueberschrift, die sie ordnen soll, und 3,05rem war zudem keine Stufe der dokumentierten Skala. 2,35rem liegt im H2-Band (28-50px) am unteren Ende und traegt die Spalte, ohne mit dem Kopf zu konkurrieren. */ font-size: 2.35rem; line-height: .88; letter-spacing: -.05em; display: block; } .phase-no i{ font-style: normal; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); font-family: var(--body); font-weight: 600; } /* Kein Marker mehr auf Schritt 05. Die Auszeichnung der Zielstufe hatte einen Kantenkonflikt, der sich nicht aufloesen liess: Entweder stehen die Ziffern buendig auf der Satzkante 160 und der Marker ragt mit seiner Scherung darueber hinaus, oder der Marker sitzt buendig und Schritt 05 bekommt eine andere linke Kante als 01-04 — beides haben Kritiker gemessen und beanstandet. Das eine Gelb der Sektion sitzt jetzt auf „Buehne" in der Ueberschrift: mitten in der Zeile, also ohne Kantenkonflikt, deutlich groesser, und es benennt das Ziel des Wegs, den die fuenf Schritte beschreiben. Dasselbe Muster traegt bereits die Relevanz- Sektion. */ .phase-body{ display: flex; flex-direction: column; gap: .5rem; padding-top: .42rem; /* Versalhoehe h3 auf Versalhoehe der Ziffer */ /* KEIN max-width in ch auf diesem Element. Die ch-Einheit rechnet mit der Schriftgroesse des Elements selbst — .phase-body erbt 17px, der Text darin laeuft aber auf 15px. 46ch ergaben deshalb 505px und 73 Zeichen statt der angepeilten 65. Das Mass gehoert an den Absatz, der die Schriftgroesse traegt. */ } .phase-body h3{ font-size: 1.2rem; letter-spacing: -.015em } .phase p{ color: var(--slate); font-size: var(--t-small); margin: 0; max-width: 28rem } /* ===== Aus dem Design Loop: cta ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* KOMPOSITION (Runde 3) Der Abschluss hat jetzt genau ein dominantes Objekt: ein gefasstes Foto-Panel über die volle Containerbreite, in dem die Karte als eingelegte „Tür" sitzt. Vorher waren es zwei gleichrangige Hälften auf einem einzigen Navy-Feld plus ein randloses Band, dessen Oberkante nichts motiviert hat. Kopf und Text stehen darüber, das Panel schließt die Sektion. */ /* Bandpolster. Vorher clamp(2rem, 2.6vw, 2.35rem) = 37,6px bei 1440. Gemessen an der gerenderten Seite tragen alle anderen Baender 97 bis 134px; das Schlussband sass damit als einziges gequetscht auf seinen eigenen Kanten, obwohl es das groesste Bild und die wichtigste Handlung der Seite traegt. --section ist clamp(5rem, 9vw, 8.5rem) = 129,6px. Das Schlussband laeuft auf knapp vier Fuenfteln davon: genug Luft, um im Rhythmus der Seite zu stehen, und weniger als eine Inhaltssektion, weil darunter kein Abstand zum naechsten Kapitel mehr noetig ist — es folgt der Fuss im selben Grund. */ .final{ padding-top:clamp(3.75rem,6.9vw,6.5rem); padding-bottom:clamp(3.25rem,5.6vw,5.25rem); } /* Kein Verlaufsschimmer: der Grund bleibt flach, das Panel trägt die Fläche. */ .final::before{content:none} .final .wrap{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); column-gap:clamp(2rem,3.4vw,3.25rem); /* Runde 4: mehr Luft zwischen Kopfzeile und Panel — der Tuschestrich lag mit 18px über der Panelkante zu knapp, um beiläufig zu wirken. */ /* Runde 8: der Abstand Kopf -> Panel war mit 44px kleiner als der Abstand zwischen Ueberschrift und Fliesstext in jeder anderen Sektion. Er traegt hier den Sprung von der Aussage zur Handlung und ist die groesste Zaesur der Sektion. */ row-gap:clamp(2.5rem,4.4vw,4rem); align-items:end; text-align:left; } /* Die handgezeichnete Doppellinie unter „etwas daraus machen." ist entfernt. Seit der Marker in der Ueberschrift sitzt, trug diese eine Zeile zwei Auszeichnungen gleichzeitig — einen gelben Balken und einen doppelten Tuschestrich. Das ist eine Auszeichnung zu viel fuer einen Satz. Folge fuer den Massstab: M7 verlangt genau ein sichtbar von Hand gesetztes Element auf der Seite, und der Slot lag hier. Er ist jetzt unbesetzt. */ .final-say{display:flex; flex-direction:column; align-items:flex-start; gap:.9rem} .final h2{max-width:none; --measure:100%; hyphens:manual; text-wrap:balance} /* Versalien: es gibt in diesem Abschnitt genau EINE Versalien-Stufe — die Label-Stufe (12,5px). `.final p` (0,1,1) hat vorher `.label` und `.talk-head` (0,1,0) geschlagen und beide auf Lead-Größe geblasen; die Selektoren unten sind (0,2,0) und stellen die Systemstufe wieder her. Die Ziffern 01/02/03 sind ersatzlos entfallen — sie waren die zweite Versalien-Stufe und zugleich drei überflüssige Ebenen. Runde 4: styles.css trägt inzwischen `.final p:not(.label)` (0,2,1) und schlug damit die Kartenregeln (0,2,0) wieder auf Lead-Größe. Die Kartenselektoren führen jetzt über `.talk` (0,3,0) — eine Stufe, die den Ort mitbenennt, statt `!important` zu setzen. */ .final .label{ font-size:var(--t-label); line-height:1.3; color:color-mix(in srgb, var(--paper) 62%, var(--indigo-deep)); } .final .label::before{background:color-mix(in srgb, var(--paper) 40%, transparent)} .final .final-lead{ font-size:var(--t-body); line-height:1.6; max-width:42ch; --measure:42ch; color:var(--on-dark); } /* M7 — das eine handgesetzte Element der Seite: ein Tuschestrich unter dem Satzteil, um den es geht. Zwei Züge, ungleich, mit Überschwung. Kein Gelb: das eine gelbe Ereignis der Sektion ist der Button. Runde 4: Der Strich lief vorher nur über die halbe Zeile, weil die prozentuale Breite in einer Inline-Box gemessen wurde. `inline-block` gibt dem Span eine definite Breite — der Zug läuft jetzt unter dem ganzen Satzteil durch und endet nicht mehr willkürlich auf halber Strecke. */ .ink{position:relative; display:inline-block; max-width:100%; white-space:normal} .ink svg{ position:absolute; left:-2%; bottom:-.42em; width:106%; height:.46em; overflow:visible; pointer-events:none; } .ink path{ fill:none; stroke:color-mix(in srgb, var(--paper) 60%, var(--indigo)); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:ink-draw 1s .35s var(--ease) forwards; } .ink path:nth-child(2){animation-delay:.62s; animation-duration:.5s} @keyframes ink-draw{to{stroke-dashoffset:0}} /* Ohne Bewegung muss das Strichmuster ganz verschwinden, nicht nur auf Offset 0 stehen: `pathLength` und `stroke-dasharray` rechnen in Nutzereinheiten, die gerenderte Länge ist knapp doppelt so groß — der Zug brach sonst auf halber Strecke ab. Genau das hat der Kritiker als „endet willkürlich bei x≈450" gesehen. */ .no-motion .ink path{stroke-dasharray:none; stroke-dashoffset:0; animation:none} /* Das Panel: das Material am Ende der Arbeit, gefasst wie Harvests Produktpanel — eigener Radius, eigene Kante, allseitig Luft. Keine angeschnittene Bandkante mehr, das Motiv steht vollständig im Bild. Runde 4 — der Einzug. Vorher gab die feste `aspect-ratio` dem Panel eine Höhe, die nichts mit der Karte zu tun hatte: die Karte stand mittig, also 58px von oben und unten, aber nur 36px von rechts. Zwei ineinander verschachtelte Rundungen, die den Rand knapp verfehlen. Jetzt bestimmt die Karte die Panelhöhe, und ein einziger Padding-Wert setzt oben, unten und rechts denselben Einzug. Links ist bewusst offen — dort liegt das Bild. */ .final-stage{ grid-column:1 / -1; position:relative; margin:0; border-radius:var(--r-card); overflow:hidden; border:1px solid color-mix(in srgb, var(--paper) 22%, transparent); display:flex; justify-content:flex-end; align-items:center; padding:clamp(1.75rem,3.3vw,3rem); } .final-stage img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:0% 50%; /* Näher heran: im Ausschnitt der Runde 3 lief das rechte Bilddrittel als leeres Grau aus. Der engere Ausschnitt schiebt Kartons, Abzüge und Mappe bis unter die Kartenkante — das Material läuft hinter die Tür, statt davor zu enden. */ transform:scale(1.075); transform-origin:16% 46%; } /* Die Tür: eine Karte, die im Panel liegt — dunkler als die Tischfläche, mit einer 1px-Kante statt Schatten. Sie liegt nicht mehr fast unsichtbar auf Navy, sondern als eigene Ebene auf dem Foto. */ .talk{ position:relative; z-index:1; width:min(25rem,100%); background:var(--indigo-deep); border:1px solid color-mix(in srgb, var(--paper) 34%, transparent); border-radius:var(--r-card); padding:clamp(1.35rem,1.9vw,1.6rem); display:flex; flex-direction:column; gap:.9rem; } .final .talk .talk-head{ font-family:var(--body); font-size:var(--t-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; color:color-mix(in srgb, var(--paper) 62%, var(--indigo-deep)); } /* Drei Punkte, drei Zeilen — keine Ziffern, keine Haarlinien, keine Kästen. Aus neun gestapelten Elementen sind fünf Ebenen geworden. */ .agenda{display:flex; flex-direction:column; gap:.5rem} .final .talk .agenda li{ font-size:var(--t-small); line-height:1.5; color:var(--on-dark); } .final .talk .agenda b{color:var(--paper); font-weight:600} /* Was auf das Gespräch folgt — nicht mehr, als aus dem Ablauf hervorgeht. */ .final .talk .after{ padding-top:.85rem; border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); font-size:var(--t-small); line-height:1.5; color:var(--on-dark); } .final .talk .after b{font-family:var(--body); font-weight:600; color:var(--paper)} /* CTA-Slot: heute mailto, später Buchungslink oder eingebettetes Formular. */ .cta-slot{display:flex; flex-direction:column; gap:.85rem} .cta-slot > .btn{ width:100%; justify-content:center; padding:1.05rem 1.1rem; font-size:1rem; font-weight:600; letter-spacing:-.005em; text-align:center; } .cta-slot > .btn:hover{transform:translateY(-2px)} /* Runde 4 — der Belegtext. Vorher war es ein Fließtextblock, der mit einem hängenden Mittelpunkt umbrach und die Mailzeile im selben Zeilenabstand mitschleppte. Jetzt drei geschlossene Häkchen-Einheiten wie bei Harvest unter dem E-Mail-Feld: jede trägt ihr eigenes Zeichen, es gibt keine Trennpunkte mehr, und ein Umbruch kann nichts abhängen lassen. Wortlaut unverändert. */ .final .talk .assure{ display:flex; flex-wrap:wrap; column-gap:.85rem; row-gap:.32rem; font-size:var(--t-small); line-height:1.45; color:color-mix(in srgb, var(--paper) 58%, var(--indigo-deep)); } .final .talk .assure li{ display:flex; align-items:center; gap:.32rem; white-space:nowrap; } .assure svg{flex:none} /* Der Direktweg ist kein Beleg, sondern ein zweiter Weg — heller, mit eigenem Abstand und unterstrichener Adresse, damit er nicht im Belegtext klebt. */ .final .talk .cta-direct{ font-size:var(--t-small); line-height:1.5; color:color-mix(in srgb, var(--paper) 72%, var(--indigo-deep)); } .cta-direct a{color:var(--paper); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--paper) 40%, transparent)} .cta-direct a:hover{border-bottom-color:var(--paper)} @media (max-width:1000px){ .final .wrap{grid-template-columns:1fr; align-items:start} .final-stage{ aspect-ratio:auto; display:block; padding:0; } .final-stage img{position:relative; height:auto; aspect-ratio:1000/430; transform:none} .talk{ width:auto; margin:-3.5rem clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem); } } @media (max-width:640px){ .talk{margin:-2.5rem 1rem 1rem; padding:1.35rem 1.15rem} .cta-slot > .btn{padding:1rem .75rem; font-size:.9rem; gap:.45rem} .ink svg{bottom:-.28em} .final-stage img{aspect-ratio:1000/560} } /* ===== Aus dem Design Loop: leistungen ===== */ /* --- Ergänzungen dieses Stücks. Beim Merge wandern sie nach styles.css. --- */ /* M4 — eigenes Band: die Sektion liegt zwischen zwei Flächen auf --canvas und bekommt deshalb einen eigenen, tieferen Grund (#D9DBE9). */ .services{ background:var(--indigo-12); /* Zwei Linienwerte, beide aus den sechs Basisfarben gemischt. --line (Indigo 14% transparent) erreicht auf diesem Grund nur 1,07:1 und ist damit keine Linie, sondern eine Behauptung. Schatten sind hier verboten, also muss die Kontur selbst tragen: --line-card = Indigo 66% auf Papier → ~3:1 gegen den Grund (Kartenkontur) --rule = Indigo 34% auf dem Grund → ~1,8:1 (Trennlinien im Band) */ --line-card: color-mix(in srgb, var(--indigo) 66%, var(--paper)); --rule: color-mix(in srgb, var(--indigo) 34%, var(--indigo-12)); } /* Die Sektion ist bewusst akzentfrei. Drei gleichrangige Karten vertragen kein Gelb: in einer Karte macht es aus dem Vergleich eine Empfehlung, verteilt auf alle drei sind es drei gleich schwere Akzente (der Fehler aus Runde 1). Die Bilder sind strikt monochrom und bleiben die größten Flächen; das Gelb trägt in dieser Seite der Hero und „Verdichten". */ /* Das Eyebrow rutschte auf den Lead-Grad, weil `.head p` (0,1,1) die Klasse `.label` (0,1,0) überstimmt — gerendert 21px statt 12,5px, also exakt die Versalhöhe des Absatzes darunter. Das System kennt genau eine Versalien-Stufe; hier wird sie zurückgeholt. */ .services .head .label{ font-size:var(--t-label); line-height:1.25; max-width:none; --measure:100%; } /* ------------------------------------------------------------------ KARTE — drei Ebenen, mehr nicht: 1 Bild 2 Überschrift + Zuordnungszeile („Für Unternehmen, die …") 3 Nutzensatz Die Formate sind aus der Karte heraus und stehen als eigenes Band darunter. Damit fallen die zwei Elemente weg, die den ungleichen Innenabstand erzeugt haben: der Innentrenner und die Chipreihe. Das Raster der Reihe führt VIER Zeilen — Bild, Überschrift, Zuordnungszeile, Nutzensatz —, und jede Karte ist Subgrid darüber. Damit ist nicht nur die Bildkante und der Kartenfuß in allen drei Karten gleich, sondern auch jede einzelne Textzeile: Die zweizeilige Überschrift von Karte 2 macht die Überschriftenzeile für alle drei Karten zwei Zeilen hoch, statt in Karte 2 alles Folgende um 25px nach unten zu schieben. Der Versatz kann strukturell nicht mehr entstehen; er hängt nicht mehr am Zufall der Textlänge. Der Textkasten ist dafür `display:contents` — er darf keine eigene Zeile bilden, sonst bricht die Kette. Die Polsterung wandert deshalb an die drei Textelemente selbst, für alle Karten gleich. ------------------------------------------------------------------ */ .services .grid-3{ grid-template-rows:repeat(4,auto); column-gap:1.25rem; row-gap:0; } .services .service{ grid-row:1 / span 4; display:grid; grid-template-rows:subgrid; row-gap:0; padding:0; gap:0; overflow:hidden; background:var(--paper); border:1px solid var(--line-card); transition:border-color .3s var(--ease); } /* Schatten sind in dieser Sektion nicht erlaubt — der Hover aus styles.css wird deshalb auf die Kontur umgelegt. */ .services .service:hover{ transform:none; box-shadow:none; border-color:var(--indigo); } /* Ebene 1 — Bild. Keine Trennlinie darunter: die Bildkante ist die Kante. */ .service-shot{ margin:0; display:block; min-height:0; min-width:0; overflow:hidden; background:color-mix(in srgb, var(--indigo) 6%, var(--canvas)); } .service-shot img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center 52%; } /* Ebene 2 + 3 — ein Textkörper mit genau zwei Schriftgraden: Überschrift und Fließtext. Zuordnungszeile und Nutzensatz liegen beide auf --t-small und unterscheiden sich durch Farbe und Schnitt, nicht durch 2px Grad. Damit endet das Gedränge dreier Stufen innerhalb von 3px Versalhöhe. */ .service-text{ display:contents } .services .service h3{ margin:0 0 .55rem; padding:1.75rem 1.6rem 0; font-size:1.3rem; line-height:1.24; color:var(--indigo); } .services .service-for{ margin:0 0 1.05rem; padding:0 1.6rem; color:var(--indigo-deep); font-size:var(--t-small); font-weight:600; line-height:1.55; } .services .service-value{ margin:0; border:0; padding:0 1.6rem 1.75rem; color:var(--slate); font-size:var(--t-small); font-weight:400; line-height:1.6; } /* ------------------------------------------------------------------ FORMATBAND — alle 20 Formate bleiben genannt, aber nicht mehr als Pillen. Zwanzig Pillen sind zwanzig Kästen mit zwanzig Konturen, die in drei Zeilen fließen und dabei zwangsläufig Waisen erzeugen: die Pille ist eine Form für Auszeichnung von Einzelnem, nicht für ein vollständiges Verzeichnis. Ein Verzeichnis ist eine Liste. Die Formate stehen deshalb als gesetzter Textlauf, ein Eintrag je Zeile — dann kann kein Eintrag umbrechen und keiner allein in eine zweite Reihe rutschen. Die Liste läuft in denselben drei Spalten wie die Karten darüber (dasselbe .grid-3, dieselbe Spaltenrinne). Damit steht jede Formatspalte exakt unter ihrer Karte, und die Verbindung Karte → Formate ist eine Ortsangabe, keine zusätzliche Informationsebene in der Karte. Der Spaltenkopf wiederholt die Kartenüberschrift, damit die Zuordnung auch beim Untereinanderfallen trägt; die zwei Kopfzeilen von Spalte 2 werden — wie in der Karte — per Subgrid ausgeglichen, sodass alle drei Listen auf derselben Höhe anfangen. Die Labelspalte, die vorher umbrach, gibt es nicht mehr. ------------------------------------------------------------------ */ .formats{ display:flex; flex-direction:column; gap:1.1rem } /* Das Band ist kein neuer Abschnitt, sondern der Anhang zu den drei Karten. Es behält die eine Versalien-Stufe des Systems, gibt aber den Indigo-Strich ab — der markiert den Sektionsanfang und darf hier nicht ein zweites Mal auftauchen. */ .formats > .label{ color:var(--slate) } .formats > .label::before{ display:none } .format-list{ margin:0; grid-template-rows:auto auto; column-gap:1.25rem; row-gap:0; } .format-col{ grid-row:1 / span 2; display:grid; grid-template-rows:subgrid; row-gap:0; border-top:1px solid var(--rule); } .format-area{ margin:0; padding:.9rem 0 .85rem; color:var(--indigo); font-size:var(--t-small); font-weight:600; line-height:1.45; } .format-names{ margin:0; padding:0 0 .2rem } .format-names ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.42rem; } .format-names li{ color:var(--slate); font-size:var(--t-small); font-weight:400; line-height:1.45; } /* ------------------------------------------------------------------ FUSS — die Fußnote und die eine beschriftete Handlungsaufforderung. In Runde 2 war der Pfeil hinter jeder Überschrift der einzige Weg weiter: unbeschriftet, nicht als Link erkennbar und bei Karte 2 als loses Zeichen in der zweiten Zeile. Die Überschriften sind jetzt Überschriften; der Weg weiter steht einmal, benannt, am Ende. ------------------------------------------------------------------ */ .services .note{ margin:0; padding:0; background:transparent; border:0; border-radius:0; max-width:62ch; --measure:62ch; color:var(--slate); font-size:var(--t-small); font-weight:400; line-height:1.6; } .services-foot{ display:flex; flex-direction:column; align-items:flex-start; gap:1.4rem; } /* Unter 1000px steht die Reihe untereinander (styles.css). Damit die Bilder dann nicht seitenbreit werden, legt sich jede Karte quer: Bild links, Text rechts. Das Subgrid wird dabei aufgelöst — untereinander gibt es nichts zu fluchten. */ @media (max-width:1000px){ .services .grid-3{ grid-template-rows:none; row-gap:1.25rem } .services .service{ grid-row:auto; grid-template-columns:38% minmax(0,1fr); grid-template-rows:auto; } .service-shot{ grid-column:1; align-self:stretch } .service-shot img{ height:100%; aspect-ratio:auto } /* Untereinander gibt es nichts zu fluchten: der Textkasten wird wieder ein Kasten, und die Polsterung geht von den Textelementen an ihn zurück. */ .service-text{ grid-column:2; display:flex; flex-direction:column; align-items:flex-start; padding:1.6rem; } .services .service h3, .services .service-for, .services .service-value{ padding:0 } .format-list{ grid-template-rows:none; row-gap:1.5rem } .format-col{ grid-row:auto; grid-template-rows:none } } @media (max-width:640px){ .services .service{ grid-template-columns:minmax(0,1fr) } .service-shot{ grid-column:1 } .service-shot img{ height:auto; aspect-ratio:3/2 } .service-text{ grid-column:1; padding:1.4rem 1.35rem } } /* ============================================================ Zeichen — die Bindung zwischen Karte und Formatspalte ============================================================ Die drei Leistungskarten und die drei Formatspalten darunter gehoeren paarweise zusammen, aber im Rendering zeigte das nichts: Die Spaltentitel wiederholen nur die Kartenueberschriften wortgleich. Ein Zeichen, das an beiden Stellen steht, bindet sie und macht die Wiederholung lesbar. Es sind bewusst KEINE Sinnbilder. Die Art Direction schliesst Lupen, Zahnraeder und Gluehbirnen aus, und ein Piktogramm fuer „Marke" waere genau das. Gezeichnet sind stattdessen die Gegenstaende, die auf dem Foto derselben Karte liegen: der Bildschirm mit der Chronik, die aufgeschlagene Doppelseite, der gerahmte Print an der Wand. Das Zeichen ist die Strichfassung des Fotos darueber, kein Symbol fuer einen Begriff. Ein Sprite, zwei Verwendungen: definiert wird jedes Zeichen einmal in , eingesetzt per . */ .ico{ width: 1.5rem; height: 1.5rem; flex: none; display: block; color: var(--indigo); /* Diese vier Eigenschaften stehen bewusst auf dem