/* ═══════════════════════════════════════════════════════════════ kleon better publishing — zentrales Stylesheet Diese Datei gilt für ALLE Seiten. Änderungen hier wirken überall. ═══════════════════════════════════════════════════════════════ */ /* ─── Switzer, selbst gehostet ───────────────────────────────── Kein fontshare mehr: Damit geht bei keinem Seitenaufruf mehr eine IP-Adresse an einen Dritten — das war der DSGVO-Grund. Nur die vier Schnitte, die die Seite wirklich benutzt (400/500/600/700), keine Kursiven. **Wer eine neue Stärke einsetzt, muss sie hier ergänzen und die .woff2 nach assets/fonts/ legen** — sonst rechnet der Browser sie sich krumm. woff2 genügt; jeder Browser, der die anderen Regeln dieser Datei versteht (color-mix, clip-path), kann auch woff2. */ @font-face{font-family:"Switzer";src:url("../fonts/Switzer-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Switzer";src:url("../fonts/Switzer-Medium.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Switzer";src:url("../fonts/Switzer-Semibold.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Switzer";src:url("../fonts/Switzer-Bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} /* ─── Markenfarben aus kleon_color_rgb.ase ───────────────────── Wenn sich eine Farbe ändert: nur hier anpassen. */ :root{ --forest:#17422D; --olive:#7B8863; --tea:#C9DEA6; --grey-1:#9A9999; --grey-2:#E6E4E7; --black:#000000; --white:#FFFFFF; --forest-dark:#0F2C1E; /* abgedunkelt, nur für Hover */ --text-soft:#4F6157; /* gedeckter Fließtext */ /* Olive um 10 % abgedunkelt, Farbton unverändert. **Nur für kleine Schrift auf hellem Grund** — dort erreicht das reine Olive nur 3,79:1 und damit nicht die geforderten 4,5:1; dieser Ton erreicht 4,56:1. Als Fläche, Linie, Punkt oder in großer Schrift bleibt --olive. */ --olive-text:#6F7A59; --f:"Switzer","Inter",system-ui,-apple-system,sans-serif; --s--1:clamp(.72rem,.68rem + .2vw,.82rem); --s-0:clamp(1rem,.95rem + .25vw,1.13rem); --s-1:clamp(1.25rem,1.05rem + .8vw,1.65rem); --s-2:clamp(1.8rem,1.3rem + 2.2vw,3rem); --s-3:clamp(2.4rem,1.5rem + 4.4vw,5rem); --s-4:clamp(3.2rem,.6rem + 12.5vw,11.5rem); --gutter:clamp(1.25rem,5vw,5rem); --maxw:1500px; --cols:12; --colgap:clamp(1rem,1.6vw,2rem); --rule:1px solid color-mix(in srgb,var(--forest) 18%,transparent); --ease:cubic-bezier(.16,1,.3,1); /* Höhe der fixierten Kopfzeile. Alles, was unter dem Kopf beginnt, rechnet mit diesem Wert — nicht durch feste Werte ersetzen. */ --headerh:4.5rem; /* Höhe des mitlaufenden Kontakt-Knopfes. Der Satzspiegel-Umschalter stapelt sich mobil darüber und rechnet mit diesem Wert. */ --stickyh:3.2rem; } /* Mobil ist das Raster vierspaltig. Der Wert steht hier und nicht in einzelnen Bausteinen, weil Layouts und Satzspiegel-Overlay dieselbe Variable lesen müssen — genau darauf beruht, dass das Overlay stimmt. Die Grenze liegt bei 560 px, weil ab dort jeder Rasterbaustein ohnehin über die volle Breite läuft (`1/-1`). Darüber gilt bei `.card` noch `span 6`, was in vier Spalten überliefe. **Wer die Grenze nach oben verschiebt, muss die grid-column-Angaben von .card (560), .aud (620) und .quotes figure (660) mitziehen.** */ @media(max-width:560px){ :root{--cols:4} /* Das Overlay bringt zwölf Streifen im HTML mit; bei vier Spalten brächen die übrigen acht in weitere Zeilen um. */ #grid i:nth-child(n+5){display:none} } /* ─── Grundlagen ─────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} /* Sprungziele nicht unter die fixierte Kopfzeile scrollen lassen */ html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--headerh) + 1.2rem)} /* Kein overflow-x:hidden auf body — das macht body zum Scroll-Container und bringt die klebende Kopfzeile auf iOS durcheinander. Der einzige Überstand kommt vom Masthead und wird dort beschnitten (.cover). */ body{margin:0;background:var(--white);color:var(--forest);font-family:var(--f); font-size:var(--s-0);line-height:1.62;-webkit-font-smoothing:antialiased} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.03; mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} h1,h2,h3,h4{font-family:var(--f);font-weight:700;line-height:1.04;letter-spacing:-.034em;margin:0;text-wrap:balance} p{margin:0 0 1.1em} a{color:inherit} /* height:auto gehoert zwingend zu den width/height-Attributen im HTML. Die Attribute geben dem Browser das Seitenverhaeltnis vor, damit er den Platz schon vor dem Laden freihaelt und die Seite beim Nachladen nicht springt. Ohne height:auto wirkt die Hoehe aber als feste Angabe und das Bild wird gestaucht, sobald max-width greift. Bausteine mit eigener Hoehe (.slide, .card, .quotes, .vergleich) stehen weiter unten und ueberschreiben das hier. */ img{max-width:100%;height:auto;display:block} button{font-family:inherit} :focus-visible{outline:3px solid var(--forest);outline-offset:4px;border-radius:3px} /* Auf dunklem Grund muss der Fokusrahmen aufhellen. **Diese Liste muss zur Konstante DARK in kleon.js passen.** Vorher stand hier nur `.dark` — auf .cover, .sheet und .starter war der Rahmen dadurch Forest auf Forest und damit unsichtbar (1,00:1, nachgemessen an 22 Elementen: die vier Coverlines, neun Projektkacheln, neun Knöpfe im Projekt-Starter). */ .dark :focus-visible,.cover :focus-visible,.sheet :focus-visible, .starter :focus-visible,.pagehead :focus-visible, .projekt-hero :focus-visible,.kolophon :focus-visible{outline-color:var(--tea)} .skip{position:absolute;left:-999px;top:0;z-index:10000;background:var(--forest); color:var(--white);padding:.9rem 1.4rem;font-size:var(--s--1)} .skip:focus{left:.5rem;top:.5rem} /* Nur für Screenreader — für Text, der als Zeichnung vorliegt */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} /* 12-Spalten-Raster: identisch zum Satzspiegel-Overlay */ .raster{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--colgap);row-gap:0} section{padding-block:clamp(4rem,10vw,9rem);position:relative} .dark{background:var(--forest);color:var(--white)} .dark p{color:color-mix(in srgb,var(--white) 72%,transparent)} .tag{font-size:var(--s--1);letter-spacing:.22em;text-transform:uppercase;font-weight:600; color:var(--forest);display:flex;align-items:center;gap:.75rem;margin:0} .tag::before{content:"";width:1.7rem;height:2px;background:currentColor;flex:none} /* **Liste muss zur Konstante DARK in kleon.js passen.** Vorher fehlten .sheet und .starter — „Selected work“ und „Let’s talk“ standen dadurch in Forest auf Forest, also unsichtbar (Kontrast 1,00:1, nachgemessen). Auch der Strich in .tag::before verschwand mit. */ .dark .tag,.sheet .tag,.starter .tag,.cover .tag, .pagehead .tag,.projekt-hero .tag,.kolophon .tag{color:var(--tea)} .page-no{position:absolute;top:clamp(1.5rem,4vw,3rem);right:var(--gutter); font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--text-soft)} /* Auf dunklem Grund wie .tag aufhellen — --text-soft läge sonst bei 1,7:1. */ .sheet .page-no,.dark .page-no{color:var(--tea)} /* ─── Scroll-Fortschritt ─────────────────────────────────────── */ .colorbar{position:fixed;top:0;right:0;width:5px;height:100vh;z-index:60; background:var(--grey-2);display:flex;flex-direction:column} .colorbar span{flex:1;transform:scaleY(0);transform-origin:top;transition:transform .1s linear} .colorbar span:nth-child(1){background:var(--tea)} .colorbar span:nth-child(2){background:var(--olive)} .colorbar span:nth-child(3){background:var(--forest)} .colorbar span:nth-child(4){background:var(--forest-dark)} /* ─── Satzspiegel-Overlay ────────────────────────────────────── */ #grid{position:fixed;top:0;bottom:0;left:0;right:0;z-index:9980;pointer-events:none;opacity:0; transition:opacity .35s;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr)); column-gap:var(--colgap);padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto} #grid.on{opacity:1} #grid i{background:color-mix(in srgb,var(--olive) 16%,transparent);height:100%} /* Der Umschalter steht im Markup in der Kopfzeile, schwebt am Schreibtisch aber weiterhin unten links als Textknopf — position:fixed nimmt ihn dort aus dem Fluss, die Kopfzeile merkt nichts davon. Das geht nur, solange der Kopf kein transform trägt (siehe Kommentar bei header). */ .gridbtn{position:fixed;left:1rem;bottom:1rem;z-index:9985;background:var(--white); border:1px solid var(--forest);color:var(--forest);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;font-weight:600;padding:.55rem .9rem;border-radius:99px;cursor:pointer; transition:background .3s,color .3s} .gridbtn[aria-pressed="true"],.gridbtn:hover{background:var(--forest);color:var(--white)} .gridbtn svg{display:none} /* Ab hier wird daraus ein Zeichen in der Kopfzeile, neben dem Menüknopf — kein mitschwebender Knopf mehr. Strichstärke und Tippfläche sind dieselben wie beim Burger, damit beide als ein Paar lesbar sind. **Die Grenze ist bewusst 900 px, dieselbe wie beim Burger.** Bei 760 klaffte dazwischen eine Lücke: Auf Tablets (z. B. iPad Air, 820 px) gab es den Burger UND die schwebende Pille, und die war nur 34 px hoch. */ @media(max-width:900px){ /* margin-left:auto schiebt beide Zeichen als Paar nach rechts. Ohne das verteilt justify-content:space-between sie über die halbe Kopfzeile. */ .gridbtn{position:static;z-index:auto; width:2.75rem;height:2.75rem;padding:0;margin-left:auto;margin-right:-.35rem; display:inline-flex;align-items:center;justify-content:center;flex:none; background:none;border:0;border-radius:0;color:inherit} .gridbtn:hover,.gridbtn[aria-pressed="true"]{background:none;color:inherit} .gridbtn svg{display:block;width:1.35rem;height:1.35rem} .gb-txt{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* Vier Striche = die vier Spalten, die das Overlay mobil zeichnet. Der Schrägstrich erscheint, sobald der Satzspiegel an ist: Das Zeichen sagt damit, was ein Tippen bewirkt — ausblenden. Dieselbe Logik wie Auge und durchgestrichenes Auge, nur auf ein Symbol angewandt. Den Zustand selbst meldet aria-pressed an Hilfstechnologien. */ .gb-strich{opacity:0;transition:opacity .25s var(--ease)} .gridbtn[aria-pressed="true"] .gb-strich{opacity:1} .gridbtn[aria-pressed="true"] .gb-raster{opacity:.55} } /* ─── Kopfzeile ──────────────────────────────────────────────── */ /* sticky statt fixed: iOS Safari verschiebt fixierte Elemente, während die Adresszeile ein- und ausfährt — der Kopf sprang dabei über bzw. unter die Leiste. Ein klebendes Element gehört zum Scroll-Container und macht diesen Sprung nicht mit. Der negative Außenabstand nimmt die Höhe wieder aus dem Fluss, damit der Inhalt weiterhin ganz oben beginnt. Kein transform auf dem Kopf: das würde einen Bezugsrahmen für das position:fixed des Mobilmenüs aufspannen und das Overlay auf Kopfhöhe zusammenschrumpfen. Deshalb blendet der Kopf über die Deckkraft ein. */ header{position:sticky;top:0;z-index:9970;padding:0 var(--gutter); margin-bottom:calc(-1 * var(--headerh));height:var(--headerh); display:flex;justify-content:space-between;align-items:center;gap:1.5rem; color:var(--forest); opacity:0;visibility:hidden; transition:opacity .4s var(--ease),visibility 0s linear .4s,color .3s var(--ease)} header.show,header.static,header.menu-open{opacity:1;visibility:visible; transition:opacity .4s var(--ease),visibility 0s linear 0s,color .3s var(--ease)} /* Der Kopf hat keine eigene Fläche. Liegt ein dunkler Abschnitt dahinter, dreht kleon.js die Farbe um — Marke statt Blendmodus, damit Kontrast und Farbwerte in jeder Kombination stimmen. */ header.on-dark,header.menu-open{color:var(--white)} header.on-dark .logo-txt,header.menu-open .logo-txt{color:color-mix(in srgb,var(--white) 78%,transparent)} header.on-dark nav a::after,header.menu-open nav a::after{background:var(--white)} header.on-dark .nav-cta{background:var(--white);color:var(--forest)} header.on-dark .nav-cta:hover{background:var(--tea)} .logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit;flex:none; position:relative;z-index:2} /* aspect-ratio + flex:none: sonst rechnet Safari die Breite des Inline-SVG falsch aus und die Bögen von b und p werden rechts abgeschnitten. Das Verhältnis muss zur viewBox in den HTML-Dateien passen. */ .logo svg{height:32px;width:auto;display:block;flex:none;aspect-ratio:398.3/516.2;overflow:visible} /* Im Kopf steht nur noch das Zeichen. Das Markup bleibt in den HTML-Dateien: Wer die Wortmarke zurückholen will, löscht allein das display:none. */ .logo-txt{display:none; font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase; font-weight:600;color:var(--text-soft)} header nav ul{display:flex;gap:clamp(.8rem,1.8vw,1.8rem);list-style:none;margin:0;padding:0;align-items:center} header nav a{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;font-weight:600; text-decoration:none;position:relative;padding-block:.3rem} header nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--forest); transform:scaleX(0);transform-origin:right;transition:transform .35s} header nav a:hover::after,header nav a:focus-visible::after,header nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .nav-cta{background:var(--forest);color:var(--white);padding:.55rem 1.1rem!important;border-radius:99px} .nav-cta::after{display:none} .nav-cta:hover{background:var(--olive)} /* ─── Menüknopf ──────────────────────────────────────────────── */ .burger{display:none;position:relative;z-index:2;flex:none; width:2.75rem;height:2.75rem;margin-right:-.7rem; background:none;border:0;padding:0;cursor:pointer;color:inherit} .burger i{position:absolute;left:.7rem;right:.7rem;height:2px;background:currentColor; transition:transform .45s var(--ease)} .burger i:nth-of-type(1){transform:translateY(-4px)} .burger i:nth-of-type(2){transform:translateY(4px)} header.menu-open .burger i:nth-of-type(1){transform:rotate(45deg)} header.menu-open .burger i:nth-of-type(2){transform:rotate(-45deg)} /* ─── Mobilmenü ──────────────────────────────────────────────── Alle Regeln hier hängen an `header nav`, nicht an `nav`. Ungebunden erwischten sie auch die