/* ========================================================================== Teutoburger Ölmühle – Fundament Farben: Styleguide 260723 (TÖM-blau / -gold / -grau). Verläufe bewusst ungenutzt. SCHRIFTEN Primaer : Grafolita Script Bold - lizenzpflichtig, selbst gehostet (@font-face). Sekundaer: Figtree Variable - SIL OFL, selbst gehostet (@font-face oben). Beide Schriften liegen im Dokument. Die Seite laedt nichts von Dritten, also braucht sie fuer Schriften auch keine Einwilligung. Alle Marken-Werte hier. Später 1:1 nach theme/assets/css/base.css ========================================================================== */ :root { /* --- Hausfarben laut Styleguide (260723) --------------------------- */ /* TÖM-blau Pantone 280 C */ /* Angeglichen an die bestehende Website teutoburger-oelmuehle.de. Der Styleguide nennt #002169 (Pantone 280 C), im Web setzt die Marke aber diesen dunkleren, deutlich weniger bunten Ton ein. Abstand der beiden: dE76 = 32.6, also zwei klar verschiedene Farben. Alle Kontraste verbessern sich dadurch, weil der neue Ton dunkler ist: Weiss darauf 15.70 statt 14.77, Gold 7.85 statt 7.39, und als Schrift auf der hellen Bahn 14.02 statt 13.20. Die Deckkraftstufen von --on-blau-2/-3 bleiben unveraendert, nachgerechnet tragen sie darauf 10.23 und 5.60. */ --toem-blau: #0c243e; /* TÖM-gold Pantone 871 C – Flächen-, Logo- und Akzentfarbe. Kontrast auf Hell nur 2.0:1 → NICHT für Text auf hellem Grund. GENAU EIN GOLDTON, keine Abstufungen. Am 03.09.2026 bestätigt, als ein dunkleres Gold zur Kontrastrettung vorgeschlagen und abgelehnt wurde. Kontrastprobleme mit Gold über die ROLLE lösen, nicht über den Ton: Gold als Fläche, Markenblau als Schrift darauf (7,85:1). ZWEI BEKANNTE ABWEICHUNGEN von dieser Regel, beide auf Kundenwunsch: die Ziffernkreise auf /herstellung/ und – seit dem 03.09.2026 – die auf der Startseite tragen eine goldene Ziffer auf hellem Grund, also 2,0:1. Der Kunde hat die Form ausdrücklich gelobt und die Abweichung am 03.09.2026 zweimal bestätigt, nachdem sie mit Messwerten vorgelegt wurde. ENTSCHIEDEN, NICHT OFFEN - hier nichts "korrigieren". Entlastend: die Ziffer ist Zierde, die Reihenfolge steht als
    im Markup. Begruendung und die verworfenen Alternativen stehen in ../checkliste-korrekturen.md unter "Entschieden: die goldene Ziffer bleibt". */ --toem-gold: #d7b35f; /* TÖM-grau */ --toem-grau: #f2f2f2; /* Der Styleguide kennt genau ein Blau. Die frueheren Abstufungen (--c-blau-900 / 700 / 400) sind auf Kundenwunsch entfallen - es gibt keine zweite Blaustufe mehr, auch nicht fuer Hover oder Kanten. Wo bisher eine dunklere Stufe die Reaktion trug, tragen sie jetzt Schatten und Anheben oder Gold: siehe .prod__action, .btn--primary und .mainnav__sub. Text auf Blau kommt aus derselben Palette: Weiss fuer Ueberschriften, TOEM-Grau gedaempft fuer Lauftext. Gedaempft heisst Deckkraft, nicht ein neuer Farbwert - die Mischung entsteht aus Grau und dem Blau darunter und bleibt damit innerhalb der drei Hausfarben. Gemessen auf #0c243e: Weiss 15.7, Grau bei 0.84 ergibt 10.2, Grau bei 0.58 ergibt 5.6. Damit halten alle drei Stufen AA. */ --on-blau-1: #ffffff; --on-blau-2: rgba(242, 242, 242, 0.84); --on-blau-3: rgba(242, 242, 242, 0.58); --c-gold-500: var(--toem-gold); /* Die frueheren Goldabstufungen --c-gold-300 und --c-gold-100 sind entfallen. Der Styleguide kennt ein Gold; wo bisher eine hellere Stufe stand, arbeitet jetzt Deckkraft mit demselben Wert. */ /* Es gibt genau EIN Gold: --toem-gold. Die frueheren dunkleren Textvarianten (--c-gold-text #7d5c21, --c-gold-text-dark und --c-gold-line #96722a) sind auf Kundenwunsch entfallen. Sie existierten, weil reines TOEM-Gold als Schrift auf hellem Grund nur 1.79:1 (helle Bahn) bzw. 1.57:1 (dunkle Bahn) haelt. Diese Werte gelten weiter: alle goldenen Label und Hover-Zustaende auf hellen Flaechen liegen damit unter der AA-Schwelle von 4.5:1. Auf Blau traegt dasselbe Gold 7.39:1, dort ist es unproblematisch. */ /* Bahnen. Laut Kundenkorrektur ist TOEM-Grau der Grundton; die Sektionen wechseln davon aus hell/dunkel wie zuvor mit den Beigetoenen. Der Abstand der Bahnen liegt bei 1.136 und damit praktisch auf dem alten Beigepaar (1.139) - der Rhythmus bleibt gleich sichtbar, nur in Grau. */ /* Goldton der Schreibschriftzeile in den Sektionsueberschriften. Auf Kundenwunsch reines TOEM-Gold. GEMESSEN haelt es dort aber nur 1.79:1 auf der hellen und 1.57:1 auf der dunklen Bahn. Selbst die gelockerte Schwelle fuer Grossschrift verlangt 3:1 - eine Ueberschrift ist also nicht bloss knapp, sondern deutlich zu schwach. Auf Blau (Herstellung) traegt dasselbe Gold 7.39:1, deshalb setzt .herst__title em dort ausdruecklich --toem-gold und nicht dieses Token. Auf Kundenwunsch steht hier reines TOEM-Gold, obwohl es die Schwelle reisst. Zum Zurueckdrehen genuegt ein dunklerer Wert an dieser Stelle; #7d5c21 brachte gemessen 5.48 / 4.82. */ --sec-gold: var(--toem-gold); --c-grau-100: var(--toem-grau); /* #f2f2f2, helle Bahn */ --c-grau-200: #e4e4e4; /* dunkle Bahn */ /* Eine dritte, tiefere Bahn waere #d6d6d6: Abstand 1.143 zur dunklen Bahn und damit auf dem Standardschritt. Derzeit ungenutzt - die Herstellung steht stattdessen auf Weiss. */ --c-grau-300: #d6d6d6; /* Linien und Kartenkanten */ /* --c-schwarz: reines Schwarz, angelegt am 10.09.2026 beim Aufraeumen der Neutraltoene. EINE EINZIGE VERWENDUNG, und die ist begruendet: die Buehne hinter einem Video in der Galerie. Ein Video im 16:9-Rahmen laesst Balken stehen, und reines Schwarz macht sie zur Absicht statt zum Fehler - jeder Grauton wuerde dort wie ein Fehler aussehen. ES IST KEIN TEXTTON. Fliesstext ist --c-ink (#1d1d1b), und das bleibt so: reines Schwarz auf Weiss ist 21:1 und dadurch harter zu lesen als der Hausschwarzton. Wer diesen Token fuer Schrift benutzt, hat ihn falsch verstanden. */ --c-schwarz: #000000; /* Sortenfarben - abgeleitet von den Verpackungsdeckeln. Nur Blau ist Hausfarbe; die anderen drei kennzeichnen die Sorte so, wie der Kunde sie im Regal wiedererkennt. Alle >= 3:1 gegen die Karte. Gold wurde dafuer von #c9942f auf #b8862a abgedunkelt (2.6 -> 3.1). */ --c-sorte-raps: var(--toem-blau); --c-sorte-braten: #7a1f2b; --c-sorte-butter: #b8862a; --c-sorte-bio: #1d5c33; /* --c-bio ist entfallen. Es trug ausschliesslich die beiden Bio-Stoerer (Produktkarte und Dropdown), die auf Kundenwunsch weg sind. Das Gruen selbst bleibt als Sortenfarbe der beiden Bio-Deckel in Gebrauch. */ --c-ink: #1d1d1b; --c-ink-soft: #45454a; /* dunkel genug fuer Lead-Text auf dem Hero-Bild */ /* --c-fehler: Rot fuer Formularfehler, angelegt am 29.09.2026. Stand vorher nur als Rueckfallwert in pages/bewerbung.css und components/formular.css (var(--c-fehler, #a3242f)) - jetzt ein Token, denn auch /gold/ zeigt Fehler rot (Wunsch des Kunden). 7,1:1 auf Weiss. */ --c-fehler: #a3242f; /* --- Semantisch ------------------------------------------------------ */ /* Zwei Bahnen, im Wechsel: Weiss und TOEM-Grau. Der Kunde wollte die Themenbloecke wieder unterscheidbar haben, aber mit einem helleren Grau als zuvor und im Wechsel mit weissen Bloecken. GEMESSEN: Weiss gegen #f2f2f2 steht bei 1.12. Das alte Graupaar (#f2f2f2 gegen #e4e4e4) lag bei 1.136, das Beigepaar bei 1.139 - die Kante ist also schwaecher als in beiden Vorgaengern und damit genau der weichere Uebergang, den der Kunde beschreibt. WICHTIG: Weiss ist zugleich die Kartenfarbe (--surface). Auf den weissen Bahnen traegt die Karte deshalb weiter eine Kante - siehe .prod__card und .karr__jobs. Auf Grau setzt sie sich mit 1.12 auch ohne Kante ab, die Kante schadet dort aber nicht. */ --bg-page: #ffffff; --bg-soft: var(--toem-grau); /* Ton hinter Bildern, solange sie laden. Muss auf BEIDEN Bahnen sichtbar sein, deshalb die dunklere Graustufe: --c-grau-100 waere auf der grauen Bahn unsichtbar. */ --bg-platzhalter: var(--c-grau-200); /* Knoepfe, die auf einem Motiv liegen - die Steuerung des Startbilds. Sie brauchen eine eigene Flaeche: der Grund im Hero laeuft gemessen von rgb(92) bis rgb(249), darauf haelt keine Schriftfarbe. Nicht ganz deckend, damit das Motiv durchscheint und der Knopf nicht wie ein aufgeklebtes Kaestchen wirkt. */ --auf-motiv: rgb(255 255 255 / 92%); --auf-motiv-leise: rgb(255 255 255 / 72%); --auf-motiv-linie: rgb(12 36 62 / 18%); /* Kopf steht in Markenblau, das Logo darin in Gold. */ --bg-nav: var(--toem-blau); /* Karten in Weiss. Auf der grauen Bahn setzen sie sich mit 1.12 von selbst ab; auf der weissen Bahn tut das allein die Kante (--line) zusammen mit --shadow-1. Deshalb tragen .prod__card und .karr__jobs beide einen Rahmen - er ist auf der weissen Bahn zwingend. */ --surface: #ffffff; --text-body: var(--c-ink); --text-muted: var(--c-ink-soft); --text-on-dark: #ffffff; --accent: var(--toem-gold); --line: var(--c-grau-300); /* --- Typografie ------------------------------------------------------ */ /* Primaerschrift: Grafolita Script Bold, lokal via @font-face oben. */ --font-accent: "Grafolita Script", "Brush Script MT", cursive; /* Sekundaerschrift: Figtree Variable. */ --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Schreibmaschinenschrift fuer Codes. NUR FUER DEN GEWINNCODE auf /gold/, nachgetragen am 16.09.2026. WARUM UEBERHAUPT: ein Code aus sieben Stellen wird Zeichen fuer Zeichen gelesen und in sieben Kaestchen eingetragen. Das geht nur, wenn jedes Zeichen gleich breit ist - in Figtree ist ein I halb so breit wie ein W, und die Zeichen saessen neben ihren Kaestchen statt darin. KEINE NEUE SCHRIFTDATEI. Das sind die Systemschriften; es gibt keinen zusaetzlichen Request und nichts Selbstgehostetes dazu. */ --font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Alle Groessen gegenueber V3 angehoben, weil Figtree eine kleinere x-Hoehe (0,500 statt 0,545) und Versalhoehe (0,700 statt 0,750) hat. Ohne Anhebung saehe die Seite eine halbe Stufe kleiner aus als die freigegebene V3. Faktor 1,090 wo Kleinbuchstaben das Bild bestimmen, 1,071 bei Versalien - dort zaehlt die Versalhoehe, nicht die x-Hoehe. Label 12 -> 13px (Versalien) Klein 14 -> 15px Lauftext 15 -> 16px Leads 17 -> 18px --fs-500 war entfallen: es trug nur die Schreibschrift der Aktionskarte, und seit deren Titel in Figtree steht, hatte es keinen Nutzer mehr. WIEDER EINGEFUEHRT am 28.08.2026 mit neuem Zweck und neuem Wert - fuer Ueberschriften INNERHALB einer Sektion. Der Wert ist nicht erfunden, sondern der, den .pverw__titel schon benutzte; der Token macht ihn teilbar, damit die Rezeptdetailseite dieselbe Stufe trifft. Die Luecke in der Nummerierung ist damit geschlossen, ohne dass etwas nachrutscht - alle anderen Namen bleiben unveraendert. */ --fs-100: 0.8125rem; --fs-200: 0.9375rem; --fs-300: 1rem; --fs-400: 1.125rem; /* --fs-450: 20 px. NEUE STUFE, angelegt am 04.09.2026 fuer den Einleitungstext der Blogbeitraege ("immer etwas groesser und etwas dicker anzeigen"). WARUM EINE NEUE STUFE und nicht die naechste vorhandene: zwischen --fs-400 (18 px, fest) und --fs-500 (22 bis 28 px, fliessend) liegt nichts. --fs-500 traegt die Abschnittsueberschriften und laeuft bei 1440 px auf 28 px - ein Vorspann in Ueberschriftgroesse waere keine Einleitung mehr, sondern eine zweite Ueberschrift. Dieselbe Luecke gab es schon einmal zwischen 500 und 600, dort steht seit dem 29.08.2026 --fs-sektion. Fest und nicht fliessend, wie alle Stufen bis 400: ein Vorspann von zwei bis drei Zeilen braucht keine Skalierung mit der Fensterbreite. */ --fs-450: 1.25rem; /* 22px bis 28px. Traegt Ueberschriften innerhalb einer Sektion: .pverw__titel auf der Produktseite, .rzinhalt__titel auf der Rezeptdetailseite. Immer mit font-weight: 700 - die H3-Familie der Website laeuft durchgehend auf 700. */ --fs-500: clamp(1.375rem, 1rem + 1.2vw, 1.75rem); /* 44 -> 48px bei 1440. ACHTUNG: die Schreibschriftzeile der Sektionsueberschriften haengt als em an diesem Wert. Damit sie NICHT mitwaechst - Grafolita wechselt ja nicht -, ist ihr Faktor von 1,75 auf 1,60em gesenkt. 48 x 1,60 = 77px, genau wie in V3. */ /* --fs-550: 27,2 bis 40 px. NEUE STUFE, angelegt am 10.09.2026 fuer die Sortenzeile im Produktkopf (.pkopf__variante). Kundenwunsch: "Kann die Subline heiss braten usw. kleiner!" WARUM EINE NEUE STUFE UND KEIN BESTEHENDER TOKEN: die Zeile stand auf --fs-600, also 48 px. Der naechste Token nach unten ist --fs-500 mit 28 px - und 28 px ist genau die Groesse des Claims, der direkt darunter steht. Die zweite Zeile des Produktnamens haette damit ausgesehen wie der Claim, und die Rangfolge der Ueberschriften waere verschwunden. Gemessen ist die Staffel im Kopf jetzt 92 / 40 / 28 / 15 px: Name, Sorte, Claim, USP. DIE CLAMP WAECHST IM SELBEN VIEWPORTBAND WIE DIE NACHBARN, von 393 bis 954 px - sonst ueberholt eine Stufe die andere bei mittleren Breiten. Nachgerechnet: 27,2 px bei 390, 35,8 px bei 768, 40 px ab 1024. */ --fs-550: clamp(1.7rem, 1.14rem + 2.28vw, 2.5rem); --fs-600: clamp(2rem, 1.3rem + 2.85vw, 3rem); /* SEKTIONSTITEL, eine Stufe unter dem Seitentitel. Bis zum 31.08.2026 liefen beide mit --fs-600, also pixelgleich - GEMESSEN auf /herstellung/ waren 4 von 5 h2 exakt so gross wie das h1, Schwungzeile eingeschlossen. Bei durchschnittlich 4,2 Sektionen je Seite (auf manchen sieben) hatte der Seitentitel damit keinen Vorrang, und die Schwungschrift wiederholte sich bis zu siebenmal in 77 px. Die Stufe fehlte in der Staffel: zwischen --fs-500 (22-28) und --fs-600 (32-48) lag eine Luecke. 28-38 px schliesst sie. NICHT den Hero vergroessert, sondern die Sektionen verkleinert: der Hero hat Eyebrow, Vorspann, Motiv und Bogen und braucht die Groesse nicht - und jede Schwungzeile haette neu vermessen werden muessen. */ --fs-sektion: clamp(1.75rem, 1.15rem + 2.1vw, 2.375rem); --fs-700: clamp(2.4rem, 1.3rem + 4.36vw, 4.35rem); --fs-800: clamp(3.1rem, 1.6rem + 5.8vw, 5.75rem); --lh-tight: 1.06; --lh-snug: 1.25; --lh-body: 1.65; /* Laufweiten, auf Figtree abgestimmt. In V3 stand hier negative Sperrung, weil Ofelias Seitenraender zu weit waren. Figtree braucht das nicht: seine Seitenraender messen 0,1115 em gegen Ofelias 0,1537 em, es ist also von Haus aus 27 % enger gesetzt. Der Lauftext steht deshalb auf null - die Schrift bringt die engere Anmutung mit, die der Kunde wollte, ohne dass man sie zusammenzieht. Versalien brauchen umgekehrt WIEDER mehr: bei Figtree stehen die Grossbuchstaben enger beieinander, ohne Sperrung kleben sie. Grafolita bleibt ausgenommen - eine Schreibschrift verbindet ihre Buchstaben, jede Aenderung laesst die Striche kollidieren. */ --ls-wide: 0.12em; /* Versalien-Labels, in V3 0.09em */ --ls-caps: 0.06em; /* Versalien in Navigation, in V3 0.04em */ --ls-normal: 0; --ls-body: 0; /* Lauftext, in V3 -0.01em */ --ls-tight: -0.015em; /* Ueberschriften, in V3 -0.02em */ /* --- Raum ------------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Sektionsabstand. In V3 trennten die Grautoene die Sektionen; auf Weiss muss das der Abstand allein leisten. Von clamp(4rem, 8vw, 6rem) auf clamp(5.5rem, 10vw, 9rem) angehoben - bei 1440px sind das 144px statt 96px, also die Haelfte mehr. Weniger trennt nicht sichtbar, mehr zerreisst den Zusammenhang der Seite. */ --sp-sektion: clamp(5.5rem, 10vw, 9rem); /* ========================================================================== SEKTIONSABSTAND: --sp-sektion, wie auf der Startseite. Gemeldet am 28.08.2026, und die Messung war eindeutig: die Startseite laeuft auf DURCHGEHEND 144 px oben und unten, die Unterseiten standen auf 64 px (--sp-8) und 96 px (--sp-9). Zwischen zwei Sektionen addieren sich die Polster - auf der Startseite ergaben das 288 px Luft, auf den Unterseiten 128 px. Also weniger als die Haelfte, und untereinander drei verschiedene Werte fuer dieselbe Rolle. NICHT ANGEFASST, weil bewusst anders: - Seitenkoepfe: 144 px oben, unten weniger. Der Inhalt folgt direkt. - Letzte Sektion vor dem Footer: unten volle 144 px. - Wiederholte Bloecke INNERHALB einer Liste (.dlgruppe, .stdinhalt) mit 48 px - das sind keine Sektionen. - .pschael auf der Produktseite mit 96 px. Die Produktseiten sind freigegeben; die Abweichung ist gemeldet, nicht korrigiert. ========================================================================== */ --wrap: 82.5rem; --wrap-pad: clamp(1.25rem, 4vw, 3.5rem); /* --- Sonstiges ------------------------------------------------------- */ --r-sm: 3px; --r-md: 6px; /* Karten, Panels und Bildflaechen. 8px ist bewusst zurueckhaltend: bei rechteckigen Bildkarten kippt eine groessere Rundung schnell ins Verspielte. Sie raeumt aber einen Widerspruch auf, der vorher drin steckte - der Hero-Button ist eine volle Pille, die Karten waren messerscharf. Zwei Sprachen in einem Layout. */ --r-card: 8px; /* Kleinteile wie das Bio-Zeichen oder das Oel-Badge. Derselbe Radius wie bei den Karten waere an einem 20px hohen Element zu viel. */ --r-badge: 4px; --r-pill: 999px; /* STRICHSTAERKE DER ZEICHEN, gerendert. Die Zeichen kommen aus Lucide (ISC, v1.35.0) und sind auf 2 von 24 Nutzereinheiten gezeichnet. Wir rechnen die Staerke ueber non-scaling-stroke im Bildschirmraum, damit ein Zeichen bei 12 px und eines bei 40 px denselben Strich zeigt - Regel in base.css. WARUM 1,75 UND NICHT LUCIDES 2: gemessen an den drei vorkommenden Groessen. Bei 28 px auf Gold traegt 1,5 px nicht, das Zeichen wird blass. Bei 12 px - die Pfeile in den Textlinks - wird 2 px zum Klumpen, die Pfeilspitze laeuft zu. 1,75 px haelt beide Enden. */ --strich-zeichen: 1.75px; /* ANZEIGEGROESSEN DER ZEICHEN, nach ROLLE benannt und nicht nach Zahl. Vorher gemessen: DREIZEHN verschiedene Groessen zwischen 12 und 48 px, und ein Dutzend Zeichen ohne jede Groessenangabe - die landeten bei 14 bis 16 px, weil base.css nur height:auto setzt und ein SVG als Flexitem dann seine eigene Hoehe schaetzt. Die Groessen waren also nie entschieden, sie sind entstanden. Diese Staffel entscheidet sie. */ --zeichen-mini: 1rem; /* 14 – Navi-Klappe. Steht neben 15px-Text und darf ihn nicht ueberragen. */ --zeichen-inline: 1.125rem; /* 16 – Pfeile IM TEXTFLUSS, neben Linktext. Traegt die Zeile mit, statt an ihr zu haengen. */ --zeichen-klein: 1.375rem; /* 20 – eigenstaendig, aber klein: Download- pfeil in der Liste, Slidersteuerung. */ --zeichen-kreis: 2rem; /* 28 – GLYPH INNERHALB EINER KREISFLAECHE, klein: Rezeptfakten. Kreis wird 44. */ --zeichen-kreis-xl: 2.25rem; /* 32 – Glyph im Kreis, gross: USP-Listen auf Produkt- und Rezeptseite. Kreis wird 48. EIGENES TOKEN und nicht --zeichen-gross: sonst waechst der Kreis auf 52 px mit und wird zum lautesten Element der Hero. */ --zeichen-gross: 2.75rem; /* 40 – freistehend ueber einer Aufzaehlungs- zeile. Haeufigster Fall. DIE GANZE STAFFEL IST AM 28.08.2026 EINE STUFE HOEHER GESETZT, auf Wunsch des Kunden. Mein eigener Messvorschlag war 36: gegen 32 und 40 bei voller Seitenbreite gestellt, wirkte 40 dort als lautestes Element der Spalte. Der Kunde hat 40 danach ausdruecklich gewaehlt - das ist seine Entscheidung, und sie steht. Nicht erneut zur Diskussion. */ --zeichen-xl: 3rem; /* 44 – Zeichen als eigenes Element mit Abstand darunter. Muss ueber --zeichen-gross liegen, sonst kippt die Hierarchie. */ --zeichen-marke: 1.5rem; /* 24 – Markenzeichen. AUSSERHALB der Staffel: Instagram, Facebook und LinkedIn sind Logos, keine Bedienzeichen. Ihre Groesse folgt der Konvention der Netze und dem 44px-Tapziel, nicht unserer Rollenlogik. */ --zeichen-flaeche: 4rem; /* 56 – Bildplatzhalter in einer Flaeche. */ /* BEI KREISZEICHEN BESTIMMT DAS PADDING DIE ZEICHENGROESSE, nicht die Breite. Gemessen vorher bei .rzfakten: 36px Kreis minus 2 x 7,2px padding = 21,6px Zeichen - deutlich kleiner als die 28px daneben auf anderen Seiten. Deshalb steht dort jetzt box-sizing: content-box: dann IST width die Zeichengroesse und das padding legt den Kreis darum. */ /* DIE ARBEITSTEILUNG DER BEIDEN FAMILIEN, festgeschrieben am 28.08.2026, nachdem sie in der Praxis verrutscht war: --dur / --ease FARBEN und Kleinteile. 220ms, vorne staerker gewichtet, soll schnell sein. --dur-hover / --ease-hover BEWEGUNGEN VON FLAECHEN: Anheben, Schatten, und JEDES transform, das zu einem Hover gehoert - auch die 3px-Pfeilbewegung in Karten und CTA-Links. 300ms mit reiner Ausklingkurve. Der Anlass: zehn Pfeilbewegungen liefen auf --dur/--ease, waehrend die Karte darunter auf --dur-hover/--ease-hover hob. In einer Interaktion liefen damit zwei Dauern und zwei Kurven gleichzeitig, und genau das beschreibt der Kommentar bei --ease-hover als Ruck. Die Haendlerkacheln haben keinen Pfeil - deshalb fuehlte sich ihr Hover als einziger rund an, was am 28.08.2026 gemeldet wurde. MERKSATZ: bewegt sich eine Position oder eine Flaeche, ist es --dur-hover. Aendert sich nur eine Farbe, ist es --dur. */ --dur: 220ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Schatten und Bildzoom ------------------------------------------- Drei Stufen: Ruhe, Hover, und eine kraeftigere fuer dunkle Karten. Frueher waren die Schatten in Markenblau eingefaerbt. Der Blaustich war zu deutlich, deshalb jetzt neutral in --c-ink (#1d1d1b) - dem Textton der Seite, also ein Dunkelgrau aus der bestehenden Palette und kein zusaetzlicher Farbwert. Die Deckkraftwerte bleiben unveraendert. Nachgerechnet ergibt derselbe Alphawert mit #1d1d1b praktisch dieselbe Abdunklung wie vorher mit dem frueheren Markenblau - der Unterschied liegt bei ein bis zwei Prozent, weil beide Toene ohnehin fast gleich dunkel sind. Es aendert sich also nur der Farbton, nicht die Staerke. Wer sie senken will, dreht hier an den Alphawerten; das ist die einzige Stelle. Die Ruhestufe ist absichtlich schwach: sie soll die Karte von der Grauflaeche loesen, nicht schweben lassen. Der Sprung zur Hoverstufe traegt die Reaktion. Bildzoom mit eigener, laengerer Dauer: 220ms wirken bei einer Skalierung wie ein Ruck, die Flaeche braucht mehr Weg. */ /* RUHESTUFEN MIT DER GEOMETRIE DER HOVERSTUFE, angelegt am 28.08.2026. Der Anlass: Thorsten hat dreimal gemeldet, dass der Hover der Haendlerkacheln runder laeuft als der der Karten. Gemessen ist der Grund die GEOMETRIE, nicht Dauer, Kurve oder Hubhoehe. --shadow-1 hat 1px und 2px Versatz, --shadow-2 hat 6px und 18px. Beim Uebergang wandert der Schwerpunkt des Schattens also 16 px nach UNTEN, waehrend die Karte 4 px nach OBEN geht - zwei Bewegungen in Gegenrichtung, die groessere davon im Schatten. Das liest sich als Herausrutschen. Die Haendlerkacheln haben keinen Ruheschatten, dort waechst er aus 0px 0px 0px, und deshalb wirkt es dort rund. Diese Stufen haben dieselben Versaetze und Radien wie --shadow-2 und --shadow-3, nur eine geringere Deckkraft. Damit aendert der Uebergang NUR die Deckkraft - eine reine Ueberblendung, ohne Verformung. Warum nicht ein Pseudoelement mit opacity: alle sieben Kartenklassen tragen overflow: hidden, weil sie Bilder auf die Kartenrundung beschneiden. Ein Schatten auf einem Kind wird davon mitbeschnitten und waere unsichtbar - das war der erste Ansatz und er haette sechs Karten ihren Hoverschatten genommen. --shadow-1 bleibt, wo es nicht um Hover geht. */ --shadow-karte: 0 6px 14px rgba(29, 29, 27, 0.035), 0 18px 36px rgba(29, 29, 27, 0.04); --shadow-karte-dunkel: 0 8px 18px rgba(29, 29, 27, 0.085), 0 22px 44px rgba(29, 29, 27, 0.1); --shadow-1: 0 1px 2px rgba(29, 29, 27, 0.05), 0 2px 6px rgba(29, 29, 27, 0.05); --shadow-2: 0 6px 14px rgba(29, 29, 27, 0.09), 0 18px 36px rgba(29, 29, 27, 0.11); /* Fuer Karten mit dunkler Flaeche: derselbe Sprung, aber kraeftiger, weil ein schwacher Schatten unter einem blauen Block nicht sichtbar ist. Hiess vorher --shadow-2-blau; der Name passt nicht mehr, seit der Schatten neutral ist. */ --shadow-3: 0 8px 18px rgba(29, 29, 27, 0.22), 0 22px 44px rgba(29, 29, 27, 0.26); /* Eigene Dauer und Kurve fuer den Karten-Hover, getrennt von --dur. --dur (220ms) traegt Farbwechsel an Links und in der Navigation; dort soll es schnell sein. Anheben, Schatten und Bildzoom sind Bewegungen von Flaechen und brauchen mehr Weg. Von 420 auf 300ms zurueckgenommen. Die 420 waren zu traege - was den Hover vorher hart wirken liess, war ohnehin nicht die Dauer, sondern dass Anheben und Schatten gar keinen Uebergang hatten (siehe die Regel bei .js-reveal). Seit der behoben ist, traegt die Kurve das Weiche und die Dauer darf kuerzer sein. --ease-hover ist eine reine Ausklingkurve (easeOutCubic): schneller Beginn, langes Ausrollen, kein Nachschwingen. Die globale --ease ist vorne staerker gewichtet, das liest sich bei einer Flaechenbewegung als Ruck. */ --dur-hover: 300ms; --ease-hover: cubic-bezier(0.33, 1, 0.68, 1); /* Der Bildzoom laeuft weiterhin etwa doppelt so lang wie das Anheben: die Flaeche legt den groessten Weg zurueck und darf nachlaufen, nicht mitspringen. Mit 900ms wirkte er zaeh, 600 halten das Verhaeltnis. */ --dur-media: 600ms; --ease-media: var(--ease-hover); --zoom-media: 1.06; --lift: -4px; --h-nav: 6.5rem; /* Kompakte Hoehe nach dem Scrollen, siehe .masthead.is-compact */ --h-nav-compact: 4.25rem; /* Abstand Linkunterkante -> Header-Unterkante, siehe .mainnav__sub */ --nav-drop: 1.6875rem; --nav-drop-compact: 0.5625rem; /* Das Panel liegt ein Stueck AUF der blauen Flaeche statt darunter zu beginnen. Der Wert muss unter --nav-drop bleiben, sonst schiebt sich die Panelkante in die Schrift des Menuepunkts. Die engere Grenze ist der kompakte Kopf: dort ist --nav-drop-compact nur 9px, das Panel rueckt also naeher an die Schrift als im normalen Zustand. Bei 14px bleiben dort noch rund 11px Blau zwischen Schrift und Panelkante. */ --nav-overlap: 0.875rem; /* Logo. Angegeben wird die Breite - so denkt man beim Gestalten. Die Hoehe wird daraus abgeleitet, weil sie beim Uebergang die gemeinsame Groesse ist: Wort- und Bildmarke stecken in einem einzigen SVG, und die Bildmarke belegt darin exakt die linken 280,01 von 775,031 Einheiten bei voller Hoehe. 775,031 / 222,288 = 3,48661 (Seitenverhaeltnis der Wortmarke) 280,010 / 222,288 = 1,25969 (Seitenverhaeltnis der Bildmarke) */ /* UM 15 PROZENT VERKLEINERT AM 10.09.2026, Vorschlag des Kunden: "Wir koennten das komplette Logo etwas verkleinern, aber die Navbar-Hoehe so lassen, dann hat es etwas mehr Luft oben und unten! Und man gewinnt Platz in der Breite!" Der Anlass war der fuenfte Navipunkt (Karriere). GEMESSEN, und der Vorschlag greift an zwei verschiedenen Breiten je einmal: bei 1440 px war die LUFT SENKRECHT am engsten - Logo 245x70 in einer 104 px hohen Leiste, also nur 17 px oben und unten; bei 1024 bis 1180 px war der Abstand LOGO ZU NAVIGATION am engsten, gemessen 32 px. Ein Wert behebt beides, jeweils dort, wo es klemmt. Die Leistenhoehe bleibt bei 104 px, wie verlangt - verkleinert wird nur das Logo. Alle drei Werte der Clamp mit demselben Faktor 0,85, damit die Kurve dieselbe Form behaelt: 12 -> 10.2rem, 17 -> 14.45vw, 16.5 -> 14.025rem. Gewinn in der Breite: 37 px bei 1440, 29 px bei 1024. */ --logo-w: clamp(10.2rem, 14.45vw, 14.025rem); --logo-w-compact: 2.75rem; /* Im Markup liegt immer die ganze Wortmarke. Kompakt ist sie nur so weit herunterskaliert, dass die Muehle darin --logo-w-compact breit ist; der Rest steht ausserhalb der Blende. 775,031 / 280,010 = 2,767871 */ --logo-svg-w: var(--logo-w); --logo-svg-w-compact: calc(var(--logo-w-compact) * 2.767871); /* Eigene Dauer und eigene Kurve fuer den Kopf. 220ms wirken gehetzt, weil sich Balkenhoehe, Blende und Logogroesse gleichzeitig bewegen. Und die globale Kurve ist stark vorne gewichtet - bei einer Groessenaenderung liest sich das als Ruck. Eine symmetrische Kurve verteilt die Bewegung gleichmaessig. */ --dur-nav: 300ms; --ease-nav: cubic-bezier(0.4, 0, 0.2, 1); /* Ebenenwechsel im Mobilmenue. Laenger und staerker ausklingend als --dur-nav: hier bewegt sich die ganze Flaeche, nicht nur ein Panel. Dieselbe Kurve wie beim Reveal - sie kommt am Ende zur Ruhe, statt anzuhalten. */ /* FALLKURVE. --ease und --ease-hover klingen beide AUS, und genau das war der Fehler in der ersten Fassung der 404-Animation: der Tropfen bremste kurz ueber der Lache ab und sah aus, als bliebe er stehen. Ein fallender Tropfen beschleunigt. */ --ease-fall: cubic-bezier(0.45, 0.05, 0.75, 0.35); --dur-ebene: 420ms; --ease-ebene: cubic-bezier(0.16, 1, 0.3, 1); /* Reveal beim Scrollen. Eigene Kurve: stark ausklingend, damit die Bewegung am Ende zur Ruhe kommt statt anzuhalten. */ --dur-reveal: 700ms; --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); --reveal-shift: 1.5rem; --reveal-step: 80ms; /* --- Motiv ueber Text am Telefon --------------------------------------- Beide Werte gelten ueberall dort, wo ein Motiv oben steht und der Text darunter folgt: im Startbild-Karussell und in den Bogen-Koepfen der Unterseiten. Eine Zahl, eine Stelle. DIE HOEHE kommt vom Video-Slide der Startseite, damit sich dort nichts aendert: bei 390 x 844 sind es 460 px. DER VERLAUF ist oben weich und unten dicht. Weich, weil die Kante sonst zu sehen ist; dicht, weil im unteren Teil die Steuerung des Karussells liegt und dort gemessen 3:1 halten muss. */ --motiv-hoehe: min(118vw, 58svh); --motiv-hoehe-min: 18rem; /* NIEDRIGER AUF DEN UNTERSEITEN, Zuruf vom 21.09.2026: der Kopf einer Unterseite soll sich vom Startbild unterscheiden, damit man am Telefon sofort sieht, wo man ist. Bei 390 x 844 sind es 312 px gegen 460 - zwei Drittel, deutlich genug, ohne dass das Motiv zum Streifen wird. */ --motiv-hoehe-unter: min(80vw, 40svh); --motiv-hoehe-unter-min: 13rem; /* --motiv-schleier: der Weissverlauf links ueber Motiv und Video am Rechner, EINER fuer alle Koepfe (29.09.2026, Zuruf von Thorsten: „mehr Video bzw. Bild sehen", und „bei Bildern staerker als beim Video"). Bis dahin vier Fassungen: das Video der Startseite lief bei 66 % aus, die Bogen-Koepfe deckten bis zum rechten Rand noch zu 30 %. AN DER TEXTSPALTE AUSGERICHTET, nicht an der Bildbreite: Prozent-Stufen lagen auf einem 1920er Schirm weit rechts vom Text und auf einem 1024er knapp daneben. --schleier-ab ist die linke Kante des Textes (Rand der Satzbreite plus Seitenabstand). Unter dem Vorspann (bis 30rem) deckt er noch zu 70 %, bei 66rem ist er fort. */ --schleier-ab: calc(max(0px, (100% - var(--wrap)) / 2) + var(--wrap-pad)); /* WEICHER AUSLAUFEN, Nachtrag vom selben Tag: hinter dem Text in sechs Stufen ueber 36rem statt in zwei ueber 22rem - eine Kurve, die flach endet, statt einer Rampe mit sichtbarer Kante. */ --motiv-schleier: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.84) calc(var(--schleier-ab) + 18rem), rgba(255, 255, 255, 0.70) calc(var(--schleier-ab) + 30rem), rgba(255, 255, 255, 0.50) calc(var(--schleier-ab) + 36rem), rgba(255, 255, 255, 0.31) calc(var(--schleier-ab) + 42rem), rgba(255, 255, 255, 0.16) calc(var(--schleier-ab) + 49rem), rgba(255, 255, 255, 0.06) calc(var(--schleier-ab) + 57rem), rgba(255, 255, 255, 0) calc(var(--schleier-ab) + 66rem)); --motiv-verlauf: linear-gradient(180deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0.30) 62%, rgba(255, 255, 255, 0.55) 74%, rgba(255, 255, 255, 0.82) 84%, rgba(255, 255, 255, 0.95) 90%, rgba(255, 255, 255, 0.99) 95%, var(--bg-page) 100%); } /* --- Das Tablet-Band ------------------------------------------------------ ZURUF VOM 22.09.2026: auf dem Tablet stand das Motiv der Unterseiten zu hoch. GEMESSEN auf /herstellung/: am Telefon deckelt 80vw die Hoehe, ab etwa 600 px uebernimmt 40svh - und 40 % eines hohen Tablets sind viel. Die Ueberschrift begann bei 768 x 1024 erst nach 575 px, also nach 56 % der Fensterhoehe; am Telefon sind es zwar anteilig aehnlich viele Prozent, aber dort ist der Bildausschnitt fast quadratisch und traegt die Hoehe. 44vw und 30svh bringen die Ueberschrift auf rund 45 % der Fensterhoehe, ohne Telefon oder Rechner anzufassen. NUR DIE UNTERSEITEN: --motiv-hoehe der Startseite bleibt, wie sie ist - dort ist der Kopf die Hauptsache. */ @media (min-width: 34.001rem) and (max-width: 59.999rem) { :root { --motiv-hoehe-unter: min(44vw, 30svh); --motiv-hoehe-unter-min: 12rem; /* AUCH DAS STARTBILD IST HIER ZU HOCH, Zuruf vom 22.09.2026. 58svh sind auf einem hohen Tablet gemessen 594 px bei 768 x 1024 und tragen die Sektion auf 1141 px. 42svh bringen das Motiv auf 430 px und lassen dem Karussell trotzdem mehr Raum als einer Unterseite (30svh). */ --motiv-hoehe: min(76vw, 42svh); } } /* ========================================================================== UMBRUCHPUNKTE – Konvention, kein Token Custom Properties funktionieren in @media nicht. Die Werte stehen deshalb in den Regeln selbst; hier steht, welcher wofuer gilt, damit nicht bei jedem neuen Raster ein neuer erfunden wird. 68rem 1088 px Tablet quer: das fuenfspaltige Produktpanel wird drei- 64rem 1024 px Mobilmenue uebernimmt (bis 25.09.2026 bei 60rem, siehe components/header.css) 56rem 896 px ZWEISPALTIG WIRD EINSPALTIG bei grossen Paaren (Bild + Text, Karte + Formular) 38rem 608 px ZWEISPALTIG WIRD EINSPALTIG bei kleinen Paaren (Listen, Datenzeilen, schmale Karten) 30rem 480 px Handy: Schriftgrade und Produktpanel auf zwei Spalten 24rem 384 px sehr schmal, nur Feinschliff an Schriftgraden REGEL FUER NEUE RASTER Jedes Raster mit mehr als einer Spalte braucht einen Umbruchpunkt, es sei denn es ist absichtlich bis 360 px mehrspaltig - dann gehoert ein Satz in den Kommentar, warum. Elf Raster sind das heute, etwa .dldok (Zeichen | Text | Download) oder .form__einwilligung. WARUM ES DAFUER KEINE PAUSCHALE REGEL GIBT Naheliegend waere, unterhalb 38rem jedes Raster einspaltig zu setzen. GEMESSEN am 30.08.2026 wuerde das genau jene elf absichtlich mehrspaltigen Raster zerlegen. Die Absicherung ist deshalb eine Messung: ../werkzeug/querscroll.js prueft alle Seiten auf allen Breiten und gibt 1 zurueck, wenn irgendwo etwas hinauslaeuft. Vor jedem Push laufen lassen. ========================================================================== */