/* ========================================================================== Sektionsueberschrift - EIN Bauteil fuer alle Sektionen Vorher trug jede Sektion eigene Regeln, mit abweichendem Gewicht und abweichenden Abstaenden. Die drei sachlichen Sektionen (Herstellung, Handel, Kontakt) hatten gar keine Schreibschriftzeile. Jetzt ist der Aufbau ueberall derselbe: Zeile 1 Ofelia Text Regular, Markenblau Zeile 2 Grafolita Script Bold, Gold, steht im Subline Ofelia Text Regular, Grau Groesse ist die der USP-Sektion: --fs-600 fuer die erste Zeile, davon 1,75em fuer die Schreibschrift. Diese Werte hatten schon vorher alle Sektionen - abgewichen sind sie nur in Gewicht (300 statt 400) und in der Farbe der zweiten Zeile. Die Schreibschrift laeuft optisch kleiner als die Sans, daher die 1,75em. Sie braucht ausserdem Padding: Ober- und Unterlaengen ragen aus der Box und wuerden sonst beschnitten oder in die Subline laufen. ========================================================================== */ /* ========================================================================== GEWICHTSREGEL FUER UEBERSCHRIFTEN, festgelegt am 28.08.2026 Eine Ueberschrift MIT Grafolita-Schwungzeile laeuft in Figtree auf Gewicht 400. Die Schreibschrift darunter traegt die Praesenz, die Figtree-Zeile ist ihr ruhiger Gegenpart. Eine Ueberschrift OHNE Schwungzeile laeuft auf Gewicht 600. Sie steht allein und muss die Praesenz selbst tragen; auf 400 wirkte sie im Hero verloren. Betroffen ist derzeit nur .rzkopf__title auf den Rezeptdetailseiten - ein Rezepttitel ist zu lang fuer die Schwungzeile. NICHT 700: das ist die Stufe der H3-Familie (.usp__heading, .rez__name, .pverw__titel, .rzinhalt__titel). Bei 48 px in Figtree laese 700 wie eine Zeitungsschlagzeile und waere lauter als der Markenton. Die Startseiten-H1 faellt aus der Regel: sie ist selbst Grafolita und traegt deren eigenen Fettschnitt auf 700. WELCHE SEKTIONSTITEL EINE SCHWUNGZEILE BEKOMMEN, ergaenzt am 28.08.2026: die auf STIMMUNGSSEITEN, nicht die auf FUNKTIONSSEITEN. Startseite, Produktseiten und die Karriere-Einstiegsseite werben - dort traegt jede Sektion ihre Schreibschrift. Auf FAQ, Stellenarchiv und Stellendetail arbeitet man, dort laeuft die H1 mit Schwungzeile und die Sektionstitel darunter in Figtree auf 600. Der Anlass war Thorstens Hinweis zur FAQ-Seite: eine Spitze je Seite, nicht drei. Fuer die Produktseiten und die Startseite gilt das NICHT rueckwirkend - die sind freigegeben. ========================================================================== */ /* ========================================================================== ES SIND VIER LISTEN FUER EINEN SEKTIONSTITEL. Am 29.08.2026 vollstaendig aufgeschrieben, nachdem ein neuer Titel dreimal nachgepflegt werden musste: 1. hier, Farbe und Groesse des Titels 2. hier weiter unten, die Grafolita-Zeile im 3. feinschliff.css @media (max-width: 30rem) -> em auf 1,5em 4. feinschliff.css @media (max-width: 24rem) -> em auf 1,28em Wer nur die ersten beiden pflegt, bekommt einen Titel, der auf dem Handy als einziger umbricht. Gemessen an .hekopf__title: bei 360 px brauchte die Schwungzeile 355 px in einer 320-px-Bahn, waehrend DIESELBE Zeile auf der Startseite nur 303 px brauchte - weil dort die Stufen 3 und 4 greifen. BEIM ANLEGEN EINES NEUEN SEKTIONSTITELS also VIER Stellen pflegen. ES SIND ZWEI LISTEN, NICHT EINE. Die erste setzt Groesse, Schnitt und Farbe des Titels, die zweite weiter unten die Grafolita-Zeile im . Wer nur die erste pflegt, bekommt einen Titel in richtiger Groesse mit einer Schwungzeile in Figtree - am 29.08.2026 passiert bei .kaabbinder__title. Die Listen sind bewusst verschieden lang: Titel ohne Schwungzeile stehen nur in der ersten. DIESE SELEKTORENLISTE IST EINE WARTUNGSFALLE. Sie wird von Hand gepflegt. Fehlt ein Titel darin, faellt er auf die Fliesstext-Tinte zurueck - und das sieht im Screenshot fast richtig aus. Am 28.08.2026 aufgefallen bei .kabereiche__title: Farbe rgb(29,29,27) statt Markenblau, Gewicht 700 statt 400. Es war der DRITTE Fall derselben Art im Projekt (.kakopf__title, .hiepoche__title). PRUEFEN mit gerenderten Pixeln, nicht mit dem Auge: jede h2 oder h3 mit __title oder __titel, deren Farbe nicht Markenblau ist (bzw. Weiss auf dunkler Bahn), ist verdaechtig. ========================================================================== */ /* SEITENTITEL. Nur diese drei - gemessen sitzen alle anderen Klassen dieser Liste an einem h2. Die uebrigen Seitenkoepfe (.rzkopf__title, .stdkopf__title und so weiter) stehen in ihren Seitendateien und laufen dort ebenfalls mit 48 px bei 1440. */ .bogenhero__title, .fekopf__title, .pukopf__title { font-family: var(--font-body); font-size: var(--fs-600); font-weight: 400; text-transform: none; letter-spacing: var(--ls-tight); line-height: 1.15; color: var(--toem-blau); margin: 0 0 var(--sp-4); } /* SEKTIONSTITEL, eine Stufe darunter. Siehe --fs-sektion in tokens.css. ENTFERNT wurden fuenf Klassen, die in keinem Markup mehr stehen: .b2b__title, .kontakt__title, .stiniti__title, .hkwege__title, .hkbereit__title. */ .usp__title, .prod__title, .herst__title, .rez__title, .karr__title, .pshops__title, .pdaten__title, .pverw__title, .pschael__title, .kaabbinder__title, .kaprakt__title, .pusicht__ueber, .puwofuer__ueber, .pukern__title, .pbio__title, .puwege__title, .unwege__ueber, .fewege__ueber, .blneu__ueber, .blliste__ueber, .blwege__ueber, .unsaeulen__ueber, .bildband__title, .hiheute__title, .heweg__ueber, .heschael__title, .hesicher__ueber, .hewege__title, .psorten__title, .faqg__title, .faqhilfe__title, .kabereiche__title, .kainiti__title, .kavorteile__title, .kastimmen__title, .kawege__title, .stliste__zahl, .stdbewerb__title, .stdweiter__title, .dlgruppe__title, .hazg__title, .haarg__title, .hawege__title, .gbliste__title, .gbpasst__title, /* Gewinnspielseite /gold/, 16.09.2026. Die Liste ist eine Wartungsfalle, siehe oben - fehlt ein Titel darin, faellt er auf die Fliesstext-Tinte zurueck und sieht im Screenshot fast richtig aus. Deshalb hier eingetragen, bevor die Seite gemessen wird. */ .goflaschen__title, .goschritte__title, .goform__title, .gofragen__title { font-family: var(--font-body); font-size: var(--fs-sektion); font-weight: 400; text-transform: none; letter-spacing: var(--ls-tight); line-height: 1.15; color: var(--toem-blau); margin: 0 0 var(--sp-4); } .usp__title em, .prod__title em, .herst__title em, .rez__title em, .karr__title em, .pshops__title em, .pdaten__title em, .pkopf__title em, .rezkopf__title em, .kkopf__title em, .kziel__title em, .kadr__title em, .rzoel__title em, .pverw__title em, .pschael__title em, .kaabbinder__title em, .kaprakt__title em, .pukopf__title em, .pusicht__ueber em, .puwofuer__ueber em, .pukern__title em, .pbio__title em, .puwege__title em, .bogenhero__title em, .unwege__ueber em, .fewege__ueber em, .fekopf__title em, .blneu__ueber em, .blliste__ueber em, .blwege__ueber em, .unsaeulen__ueber em, .bildband__title em, .hiheute__title em, .heweg__ueber em, .heschael__title em, .hesicher__ueber em, .hewege__title em, .psorten__title em, .fkopf__title em, .stkopf__title em, .kabereiche__title em, .kainiti__title em, .kavorteile__title em, .kastimmen__title em, .kawege__title em, .dlkopf__title em, .hakopf__title em, /* Gewinnspielseite /gold/: die drei Sektionsueberschriften stehen vollstaendig in der Schreibschrift, Wunsch vom 16.09.2026. Sie tragen deshalb nur ein und keine gerade Zeile davor - das Markup bleibt dasselbe wie auf /herstellung/ und /handel/, nur der erste Teil fehlt. */ .goflaschen__title em, .goschritte__title em, .goform__title em, .gofragen__title em { display: block; font-family: var(--font-accent); font-weight: 700; /* kippt normalerweise kursiv. Grafolita ist bereits eine Schreibschrift, eine zusaetzliche Neigung waere doppelt. */ font-style: normal; /* 1,60 statt 1,75em: --fs-600 ist von 44 auf 48px gestiegen, die Schreibschrift soll aber ihre 77px behalten. */ font-size: 1.6em; text-transform: none; letter-spacing: 0; line-height: 1.04; color: var(--sec-gold); padding-block: 0.05em 0.1em; margin-top: 0.02em; } /* --- Bindestrich in der Schreibschrift ----------------------------------- Grafolita Script laesst das "o" mit einem Auslauf enden, der ueber seinen Vorschub hinausragt. Ein folgender Bindestrich sitzt dann in diesem Auslauf; bei "Bio-Rapskernoel" beruehren sich beide. GEMESSEN mit einem Range: die Luecke zwischen "Bio" und dem Strich betraegt 0,0 px. Rechnerisch stimmt das, es sieht nur falsch aus - die Tinte reicht weiter als der Vorschub. Der Strich bekommt deshalb Luft nach links, ueber ein eigenes Element, das werkzeug/produktseiten-bauen.py setzt. Der Text bleibt ein Bindestrich, fuer Kopieren und Screenreader aendert sich nichts. Rechts KEINE Luft: dort folgt ein Grossbuchstabe mit Anlauf, da stimmt der Abstand. Betrifft sechs Stellen, alle mit "Bio": drei "Bio-Rapskernoel", zwei "in Bio-Qualitaet", ein "Bio-Sonnenblumenkernoel". */ .trennstrich { margin-left: 0.07em; } .usp__sub, .prod__sub, .herst__lead, .rez__sub, .karr__lead, .b2b__lead, .kontakt__lead, .pshops__sub, .pdaten__sub, .pverw__sub, .pschael__sub, .psorten__sub { font-size: var(--fs-400); color: var(--text-muted); margin: 0; } /* Herstellung stand als einzige Sektion auf Blau und brauchte dafuer drei Ausnahmen von der Regel oben. Seit sie auf Grau liegt, sind sie entfallen - das Bauteil gilt jetzt ausnahmslos fuer alle sieben Sektionen. */ /* Karriere: der Lead steht neben dem Bild und braucht eine Grenze, sonst laeuft er darunter. */ .karr__lead { max-width: 32rem; } /* -------------------------------------------------------------------------- Lange Woerter auf schmalen Schirmen, 15.09.2026 GEMESSEN bei 320 px: "Downloads für Geschäftspartner" brauchte 300 px in einer 280-px-Spalte, "Für Händler und Großverbraucher" ebenso. Der Titel lief also aus seiner Spalte - beide Male am zusammengesetzten Hauptwort. HYPHENS: AUTO NUR HIER UND NUR SCHMAL. Das Projekt trennt sonst von Hand (hyphens: manual mit ­), weil Produktnamen an bestimmten Stellen brechen sollen und sonst nirgends. Ein Seitentitel hat diese Ansprueche nicht: er soll passen. Der Attributselektor greift jede Klasse, die auf einen Seitenkopf zeigt - es sind ueber zwanzig, und die naechste soll nicht wieder vergessen werden. setzt WordPress, die Trennung folgt also deutschen Regeln. -------------------------------------------------------------- */ @media (max-width: 30rem) { [class*="kopf__title"] { hyphens: auto; } /* DIE SCHWUNGZEILE WIRD NICHT GETRENNT. Grafolita ist eine Schreibschrift; ein Trennstrich mitten im Wort liest sich dort nicht als Trennung, sondern als Fehler - "Geschäftspart-ner" auf /downloads/ war der Beleg. Sie wird stattdessen eine Stufe kleiner, sobald es eng wird. */ [class*="kopf__title"][class] em { hyphens: manual; } } /* UNTER 20,5rem EINE STUFE KLEINER. Bei 320 px steht --fs-800 auf seinem unteren Anschlag von 49,6 px; "Geschäftspartner" braucht damit GEMESSEN 300 px in einer 280-px-Spalte, "Großverbraucher" auf /handel/ genauso. --fs-700 sind dort 38,4 px, das Wort misst dann rund 232 px und steht in einer Zeile. Oberhalb dieser Breite aendert sich nichts - dort war noch nie zu wenig Platz. */ /* [class][class*=…] UND NICHT NUR [class*=…]. Beide Schreibweisen kommen auf (0,1,1) - genau so viel wie ".dlkopf__title em" in der Seitendatei, und die laedt SPAETER. GEMESSEN blieb die Schwungzeile deshalb bei 49,6 px, obwohl die Regel griff. Der doppelte Attributselektor hebt sie auf (0,2,1). Dieselbe Falle wie am selben Tag im Kopf-CSS, dort zweimal. */ @media (max-width: 20.5rem) { [class*="kopf__title"][class] em { font-size: var(--fs-700); } /* DIESELBE REGEL FUER DIE ABSCHNITTSUEBERSCHRIFTEN, seit dem 28.09.2026 (Responsive-Runde). GEMESSEN bei 320 px: „Initiativbewerbung" auf /karriere/ 317 px und „Sonnenblumenkernoel" im Oelblock eines Rezepts 346 px, je in einer 280-px-Spalte - die Seite liess sich 13 bis 17 px zur Seite schieben. 1,25em sind dort 35 px; das laengste der beiden Woerter misst dann rund 270 px. Die Seitenkoepfe behalten ihre Regel darueber. */ [class*="__title"]:not([class*="kopf__title"]) em, [class*="__ueber"] em { font-size: 1.25em; } }