/* --- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { letter-spacing: var(--ls-body); margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-300); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } /* --- Der Fuss bleibt unten, auch wenn die Seite kurz ist ----------------- */ /* GEMESSEN am 10.09.2026: im Prototyp fiel das nie auf, weil alle 60 Seiten laenger sind als das Fenster - die kuerzeste (/404/) misst 2194 px bei 1000 px Fensterhoehe. In WordPress stand die erste Seite ohne Inhalt da, und der Fuss endete bei 727 px: darunter 273 px Weiss. Betrifft spaeter jede kurze Seite, etwa Impressum oder eine Danke-Seite. ZWEI EBENEN, weil WordPress anders verschachtelt: im Prototyp sind header, main und footer Kinder des body, in einem Block-Theme liegen sie in div.wp-site-blocks. Beide Faelle sind hier abgedeckt, und die Regel stoert nicht, wenn es die Huelle nicht gibt. .skip-link steht absolut und ist damit aus dem Fluss - sie wird kein Flex-Element und nimmt keine Hoehe. Skripte auch nicht. */ body { min-height: 100svh; display: flex; flex-direction: column; } .wp-site-blocks { flex: 1 0 auto; display: flex; flex-direction: column; } /* Der Inhalt dehnt sich, nicht der Fuss: flex-basis auto und kein Schrumpfen, sonst zieht ein langer main die Seite zusammen. */ main { flex: 1 0 auto; } img, svg, video { display: block; max-width: 100%; height: auto; } /* GRUNDGROESSE FUER ZEICHEN. Absichtlich auf dem Typselektor, also mit der niedrigsten Spezifitaet: jede Rollenregel und jede Komponente schlaegt sie. Grund fuer die Regel: ein Dutzend Zeichen hatte keine Groessenangabe und landete bei 14 bis 16 px, weil ein SVG mit viewBox als Flexitem seine Hoehe aus dem Zeilenkasten schaetzt. Das ist kein Entwurf, das ist Zufall. Logo und Bogen sind nicht betroffen: .logo und .schwung svg tragen eigene Klassenregeln mit width und schlagen diese hier. Geprueft. */ svg { width: var(--zeichen-inline); height: var(--zeichen-inline); } /* KEINE UNTERSTRICHE AN TEXTLINKS, Projektregel vom 28.08.2026. Links werden ueber SCHRIFTDICKE und FARBE gekennzeichnet, nicht ueber eine Linie: Gewicht 600 gegen 400 im Fliesstext, Markenblau als Farbe, Gold beim Hover. Wo ein Link am Satz- oder Blockende steht, darf der Pfeil aus den uebrigen Bausteinen dazukommen - dasselbe SVG wie bei .rez__all und .rzoel__mehr. AUSNAHME KEINE. Auch nicht bei kleinen Hinweiszeilen; dort traegt statt dessen Gewicht 600, weil die Farbe bei 13 px allein zu wenig ist. Der Fokusring bleibt davon unberuehrt - er kommt aus :focus-visible und ist die Tastaturkennzeichnung, keine Leseauszeichnung. */ a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } /* Ueberschriften: Grundschnitt ohne Versalien. Versalien sind eine Entscheidung pro Sektion und werden dort gesetzt, nicht global - sonst muss jede neue Sektion sie einzeln zuruecknehmen. */ h1, h2, h3 { font-family: var(--font-body); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; } /* NICHTS DARF ÜBER DEN RAND (Livetag 08.10.2026). Am Handy schob „Anwendungsmöglichkeiten“ in der Schreibschrift auf /produkte/ die ganze Seite nach rechts, auf „Über uns“ die EcoVadis-Adresse im Text. overflow-wrap bricht nur, was sonst nicht passt - an allen anderen Stellen ändert sich nichts. Überschriften trennen am Handy lange Wörter mit Trennstrich, und zwar erst ab 12 Buchstaben mit mindestens 5 je Seite. */ h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption { overflow-wrap: break-word; } @media (max-width: 48rem) { h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } } /* LINKS IM FLIESSTEXT, die die Redaktion mit [Text](Adresse) setzt (inc/seitentexte.php gibt ihnen die Klasse). Gemeldet am 08.10.2026: „hier" zu EcoVadis auf „Über uns" war nicht als Link zu erkennen, weil a oben nur die Farbe erbt. Dasselbe Muster wie die Links der Rechtstexte (pages/rechtstext.css): Markenblau, feine goldene Linie, im Hover wechselt nur die Farbe. Lange Adressen duerfen umbrechen. */ .textlink { color: var(--toem-blau); text-decoration: underline; text-decoration-color: var(--toem-gold); text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; transition: color .15s ease; } .textlink:hover, .textlink:focus-visible { color: var(--c-schwarz); } /* AUF DUNKLEN FLAECHEN verschwaende Blau. Dort behaelt der Link die helle Schrift der Umgebung, die Goldlinie zeigt ihn. Die Liste stammt aus einem Lauf ueber alle Seiten am 08.10.2026: Absaetze mit heller Schrift. */ :is(.prod__action__text, .usp__text, .hiheute__text, .heschael__sub, .heschael__text, .bildband__sub, .bildband__text, .pukern__text, .kaabbinder__text, .pbio__text) .textlink { color: inherit; } :is(.prod__action__text, .usp__text, .hiheute__text, .heschael__sub, .heschael__text, .bildband__sub, .bildband__text, .pukern__text, .kaabbinder__text, .pbio__text) .textlink:is(:hover, :focus-visible) { color: var(--toem-gold); } /* Fokusring NICHT in Gold. Ein Fokusring muss sich mit mindestens 3:1 von seiner Umgebung abheben, sonst finden Tastaturnutzer die Stelle nicht mehr. TOEM-Gold haelt auf den hellen Bahnen nur 1.79 und 1.57 - der Ring waere praktisch unsichtbar. Markenblau haelt dort 13.20 und ist ebenfalls eine Hausfarbe, also kein Bruch mit dem Styleguide. Auf blauen Flaechen wird der Ring gezielt auf Gold umgestellt, siehe .masthead und .usp__item. */ :focus-visible { outline: 2px solid var(--toem-blau); outline-offset: 3px; border-radius: var(--r-sm); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--toem-blau); color: var(--text-on-dark); border-radius: var(--r-md); transform: translateY(-200%); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translateY(0); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-100); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; } /* ========================================================================== ANKERSPRUENGE - weich, und nicht unter die Kopfleiste Am 29.08.2026 global geloest. In pages/faq.css stand seit Runde 23 die Notiz, ein globales scroll-padding-top waere die saubere Loesung, greife aber in jede Seite ein - deshalb dort erst einmal nur oertlich. Der Kunde hat jetzt weiches Scrollen fuer die Ankerlinks gewuenscht, und damit ist der Anlass da, es an einer Stelle richtig zu machen. scroll-padding-top gehoert an den SCROLL-CONTAINER, scroll-margin-top an das ZIEL. Beide addieren sich - deshalb sind die oertlichen scroll-margin-top-Regeln in pages/faq.css und pages/historie.css entfernt worden. Blieben sie stehen, landete das Ziel 136 px statt 68 px tief. Der Wert ist die KOMPAKTE Kopfhoehe: der Kopf faehrt beim Scrollen genau darauf zusammen, und beim Anspringen ist er immer im kompakten Zustand. ========================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: var(--h-nav-compact); } @media (prefers-reduced-motion: reduce) { /* Weiches Scrollen ist Bewegung und faellt hier weg; das Polster bleibt, sonst landet das Ziel wieder unter dem Kopf. */ html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Der Block darueber setzt nur die Dauer auf 0,01ms. Bildzoom und Anheben waeren damit weiterhin da, nur als Sprung statt als Bewegung - genau das, was hier vermieden werden soll. Beides haengt an je einem Token, deshalb genuegt es, die Tokens neutral zu setzen. Der Schatten bleibt: er ist Rueckmeldung, keine Bewegung. */ :root { --zoom-media: 1; --lift: 0px; } } /* Auf Touch-Geraeten bleibt :hover nach dem Antippen haengen - ein gezoomtes Bild oder eine angehobene Karte stehen dann dauerhaft so da. Dieselben zwei Tokens neutralisieren das. Der Schatten darf bleiben, er stoert im Standzustand nicht. */ @media (hover: none) { :root { --zoom-media: 1; --lift: 0px; } } /* ========================================================================== EINE STRICHSTAERKE FUER ALLE ZEICHEN, festgelegt am 28.08.2026 Der Anlass: Thorsten hat gemeldet, dass die Zeichen der Website keine einheitliche Sprache sprechen. Gemessen an den gerenderten Pixeln traf das zu - die Strichstaerke lag zwischen 1,13 px und 2,8 px, in ACHT verschiedenen Werten: hakopf__zurueck viewBox 16, Attribut 1.5, Anzeige 12 px -> 1,13 px stkarte__pfeil viewBox 16, Attribut 1.5, Anzeige 14 px -> 1,31 px kontakt__way viewBox 32, Attribut 1.6, Anzeige 32 px -> 1,60 px dldok__typ viewBox 32, Attribut 2.0, Anzeige 29 px -> 1,80 px gbart__bild viewBox 32, Attribut 1.6, Anzeige 56 px -> 2,80 px DAS ATTRIBUT WAR NIE DAS PROBLEM. stroke-width wird in Nutzereinheiten des viewBox gerechnet und skaliert mit der Anzeigegroesse mit: dieselbe 1.5 wird bei 12 px Anzeige zu 1,13 px und bei 18 px zu 1,69 px. Ein einheitlicher Attributwert haette die Spanne nur verschoben, nicht geschlossen. vector-effect: non-scaling-stroke rechnet die Strichstaerke dagegen im Bildschirmraum. Damit gilt stroke-width: 1.5px UEBERALL als 1,5 px - bei jedem viewBox und jeder Groesse. Eine Regel statt einer Rechnung je Zeichen. SEIT DEM 28.08.2026 KOMMEN DIE ZEICHEN AUS LUCIDE (ISC, v1.35.0). Lucide zeichnet auf 2 von 24 Nutzereinheiten; das Attribut am svg traegt deshalb ueberall 2 und dokumentiert die Herkunft. Was ANKOMMT, entscheidet diese Regel: --strich-zeichen, gemessen 1,75 px an allen 252 Zeichenstellen. AUSNAHMEN, bewusst: - .logo ist eine Flaechengrafik ohne Kontur. - .schwung sind gefuellte Pfade (Bogenflaeche und Goldband), keine Konturen. Bei gefuellten Formen hat stroke-width keine Wirkung; die Ausschluesse sind Dokumentation, nicht Notwendigkeit. ========================================================================== */ /* Die Staerke steht AN DEN FORMEN, nicht nur am svg. Grund: einige Zeichen tragen stroke-width als Praesentationsattribut am Kind (die sozialen Netze mit 1.75), und ein Attribut am Kind schlaegt den vom svg geerbten Wert. Am Kind gesetzt gewinnt CSS. Gemessen vorher: 25 von 27 Stellen auf 1,5 px, zwei auf 1,75. */ /* .fetropfen svg IST AM 04.09.2026 DAZUGEKOMMEN, aus demselben Grund wie .schwung svg: die Flasche der Fehlerseite ist eine ILLUSTRATION, kein Zeichen. Ihre Strichbreite gehoert zur Zeichnung und richtet sich nach der Groesse der Flasche, nicht nach der Zeichenstaffel. WARUM DAS NOETIG WAR: diese Regel setzt stroke-width DIREKT AN DEN PFADEN, und ein direkt gesetzter Wert schlaegt jede Vererbung von der Gruppe - unabhaengig von der Spezifitaet. pages/fehler.css setzte den Wert an .fetropfen__flasche, also an der Gruppe; er kam nie an. Gemessen: die Kontur lief auf 1,75 px, obwohl dort seit dem 02.09.2026 "3" stand und seit heute "4,5". Der Kommentar dort hat also zwei Tage etwas behauptet, was nicht stimmte. */ svg:not(.logo):not(.schwung svg):not(.fetropfen svg) :is(path, circle, rect, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; stroke-width: var(--strich-zeichen); } svg:not(.logo) { stroke-width: var(--strich-zeichen); } /* ========================================================================== OPTISCHER AUSGLEICH DER ZEICHEN Lucide zeichnet jedes Zeichen so gross, wie seine Form es zulaesst. Eine Uhr ist ein Kreis und fuellt das Quadrat; ein Geldschein ist flach und fuellt nur die Breite. Bei gleichem Kasten sieht das UNGLEICH GROSS aus - und genau das ist gemeldet worden ("siehe Uhr und Sparschwein"). Gemessen an der Tinte (getBBox) bei 40 px Kasten. Die Breite ist bei Lucide fast immer 33,3 px, die HOEHE schwankt: chevron-down 10,0 px banknote 20,0 px graduation-cap 23,3 px piggy-bank 28,3 px crown, factory 30,0 px leaf, store, warehouse 31,7 px clock, apple, bean 33,3 px Spanne 20,0 bis 33,3 px, also Faktor 1,67 bei identischem Kasten. DER AUSGLEICH ZIELT AUF EINE TINTENHOEHE VON RUND 70 PROZENT DES KASTENS und ist nach oben durch die Kastenbreite begrenzt - sonst waechst ein flaches Zeichen aus seinem Platz heraus. Drei Stufen genuegen; die Unterschiede innerhalb einer Stufe (0,84 zu 0,88) sind nicht sichtbar. PFEILE UND CHEVRONS BEKOMMEN KEINEN FAKTOR. Ihre Groessen sind gegen den Text abgestimmt, an dem sie stehen, nicht gegeneinander. Ein Chevron auf Faktor 2,0 zu ziehen waere rechnerisch richtig und gestalterisch falsch. scale und nicht transform: die Pfeile tragen auf transform ihre Hoverbewegung, und die beiden Eigenschaften wuerden sich ueberschreiben. ========================================================================== */ [data-icon="apple"], [data-icon="badge-check"], [data-icon="bean"], [data-icon="clock"], [data-icon="container"], [data-icon="cooking-pot"], [data-icon="file-text"], [data-icon="flame"], [data-icon="leaf"], [data-icon="map-pin"], [data-icon="milk"], [data-icon="package"], [data-icon="phone"], [data-icon="send"], [data-icon="sparkles"], [data-icon="store"], [data-icon="utensils"], [data-icon="warehouse"] { --zeichen-ausgleich: 0.85; } [data-icon="chart-no-axes-column"], [data-icon="crown"], [data-icon="download"], [data-icon="factory"], [data-icon="image"], [data-icon="kanister"], [data-icon="piggy-bank"], [data-icon="users"] { --zeichen-ausgleich: 0.94; } [data-icon="banknote"], [data-icon="credit-card"], [data-icon="graduation-cap"], [data-icon="list"] { --zeichen-ausgleich: 1.2; } /* WER DEN AUSGLEICH VERBRAUCHT: nur FREISTEHENDE Zeichen, die in einer Reihe gegeneinander stehen. Dort vergleicht das Auge sie untereinander. NICHT die Zeichen im Textfluss. Deren Groesse ist gegen den Text abgestimmt, an dem sie stehen - ein Telefonzeichen in der Fusszeile steht neben einer Rufnummer, nicht neben einem Geldschein. Erste Fassung liess den Ausgleich auf ALLE Zeichen wirken: gemessen schrumpften die Fusszeilenzeichen dadurch von 18 auf 15,3 px, also genau gegen den Auftrag "Icons groesser". DIESE LISTE IST EINE WARTUNGSFALLE. Kommt eine neue Sektion mit freistehenden Zeichen dazu, muss sie hier eingetragen werden - sonst stehen ihre Zeichen ungleich gross in der Reihe. PRUEFEN: Tintenhoehe (getBBox) je Reihe vergleichen, Spanne unter 1,2. */ .kavorteil__icon svg, .haargument__icon svg, .hazgkarte__icon svg, .b2b__icon svg, .kontakt__way__icon svg, .gbart__bild svg, .kabereich__platz svg, .kaweg__media svg, .kainiti__mail svg, .rzoel__usp svg, .pkopf__usp svg { scale: var(--zeichen-ausgleich, 1); } /* --- KI-Kennzeichnung (inc/ki-kennzeichnung.php, 05.10.2026) --------------- Klein in der oberen rechten Ecke des Bildes. OBEN, nicht unten: unten liegt bei den Köpfen der Bogen über dem Bild und hätte den Hinweis verdeckt. Hat das Element um Bild und Hinweis keine Position, bekommt es sie in js/main.js. Dunkelblau mit 72 % Deckung: auf hellen wie dunklen Bildern lesbar, ohne ein zweites Gold. */ /* UNTEN RECHTS UND KLEINER seit 06.10.2026 (Meike). In den Seitenköpfen oben rechts: dort läuft unten der Goldbogen durch die Ecke. Auf den Vorschaubildern der Galerie gar nicht, das große Bild darüber trägt ihn; auf 104 px breiten Bildchen verdeckte er fast die Hälfte. */ .ki-hinweis { position: absolute; bottom: var(--sp-2); right: var(--sp-2); z-index: 2; padding: 0.0625rem 0.375rem; border-radius: var(--r-sm); background: rgba(12, 36, 62, 0.72); color: #fff; font-size: 0.625rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; pointer-events: none; } .hero__media .ki-hinweis, .bogenhero__media .ki-hinweis, .pukopf__media .ki-hinweis, .rzkopf__media .ki-hinweis { top: var(--sp-2); bottom: auto; } .galerie__minilink .ki-hinweis { display: none; }