/* ========================================================================== Produktdetailseite Erste Unterseite im Designstandard der freigegebenen Startseite. Bahnenfolge wie dort: Kopf weiss, Beschreibung grau, Naehrwerte weiss, Rezepte grau (aus sections/rezepte.css), Footer blau. Alle Werte kommen aus Tokens. Kein Hexwert, kein px-Abstand. Die Sortenfarbe wird als --sorte am
gesetzt, genauso wie an den Produktkarten der Startseite, und traegt dort einen 3px-Streifen. ========================================================================== */ /* --- Brotkrumen -------------------------------------------------------- */ /* Eigene Navigation, nicht Teil der Hauptnavi: sie beschreibt den Ort in der Hierarchie. Kein Trennzeichen als Text, sondern als ::before am
  • - Screenreader lesen sonst "Schrägstrich" mit. */ /* Stehen seit der Kundenrunde vom 27.08.2026 UNTER der Hero, als erstes Element im Produktkopf. Der obere Abstand kommt von .pkopf. */ /* sp-9 (6rem) auf Kundenwunsch vom 27.08.2026, in zwei Schritten von sp-6 ueber sp-8. Der Inhalt stand zu dicht unter der Ortsangabe. */ /* AKTUELL UNGENUTZT: die Brotkrumen sind am 27.08.2026 aus der Produktseite genommen worden - bei drei Ebenen und einem Kopfmenue mit Produkt-Dropdown tragen sie nichts. Die Regeln bleiben stehen, weil tiefere Seiten (Rezeptdetails) sie voraussichtlich brauchen. */ .brotkrumen { margin-bottom: var(--sp-9); } .brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-100); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); } .brotkrumen li + li::before { content: ""; display: inline-block; width: 0.3125rem; height: 0.3125rem; margin-right: var(--sp-2); border-radius: var(--r-pill); background: var(--line); vertical-align: middle; } .brotkrumen a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .brotkrumen a:hover, .brotkrumen a:focus-visible { color: var(--toem-blau); border-bottom-color: var(--accent); } .brotkrumen [aria-current="page"] { color: var(--toem-blau); font-weight: 600; } /* --- Produktkopf ------------------------------------------------------- */ /* ========================================================================== Produktkopf - PRODUKTZUERST Keine gebogene Hero mit Stimmungsbild. Entscheidung vom 27.08.2026: die gebogene Hero ist den Imageseiten vorbehalten. Hier steht Text links, Packshot rechts, Goldbogen am Fuss. Oben ein voller --sp-sektion, weil der Block direkt unter dem Kopf beginnt; unten reicht --sp-6, den Rest traegt der Bogen. ========================================================================== */ .pkopf { position: relative; background: var(--bg-page); padding-block: var(--sp-sektion) var(--sp-6); /* Platz fuer den Bogen am Fuss. */ padding-bottom: calc(min(6.25vw, 6rem) + var(--sp-6)); overflow: hidden; } /* Der Bogen sitzt am Fuss des Blocks, nicht als Abschluss einer Hero. Die Flaeche traegt die Farbe der Sektion darunter - .pdaten ist weiss, also greift der Standard aus components/schwung.css. */ .pkopf > .schwung { position: absolute; left: 0; right: 0; bottom: -1px; } /* BILD LINKS, TEXT RECHTS, Kundenkorrektur vom 09.09.2026 (Folie 1). Oben BUENDIG: align-items: start, damit das Produkt auf derselben Kante wie die H1 beginnt und sofort zu sehen ist. 1,4 zu 1: das Bild ist das Wichtigste auf einer Produktseite und bekommt deshalb die deutlich groessere Spalte. Der Textblock verliert dadurch nichts - die Grafolita-Zeile braucht 391 px, und der lange Absatz steht seit dem 09.09. nicht mehr hier, sondern im Reiter "Beschreibung". DIE ZAHLEN SIND MIT DEM TAUSCH GEDREHT, und das war zuerst falsch: hier stand weiter "1fr 1.4fr", also die schmale Spur zuerst. Nach dem Tausch im Markup landete das Bild darin - GEMESSEN 477 px statt 667, waehrend der Text die breite Spur bekam. Spaltenbreiten wandern nicht mit dem Markup, sie haengen an der Position. */ .pkopf__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: start; } /* container-type, damit die Grafolita-Zeile ihre Groesse aus der BREITE DIESER SPALTE rechnen kann - siehe .pkopf__title em. Ohne einen Container haette 1cqw keinen Bezug. inline-size, nicht size: nur die Breite wird zur Bezugsgroesse, die Hoehe bleibt vom Inhalt bestimmt. size wuerde die Spalte auf 0 zusammenfallen lassen, weil ihre Hoehe dann nicht mehr aus dem Inhalt kommt. */ .pkopf__body { max-width: 34rem; container-type: inline-size; } /* Engpassband. Zweispaltig, aber die Seite ist noch schmal: bei 961 px blieben der Grafolita-Zeile nur 3 px Luft in ihrer Spalte - gemessen, nicht geschaetzt. "Rapskernoel" haelt das gerade, jeder laengere Sortenname bricht. Deshalb hier 1 zu 1, das gibt der Textspalte 73 px Luft zurueck. Die Schriftgroesse bleibt unangetastet, --fs-800 ist Vorgabe. */ @media (min-width: 60.0625rem) and (max-width: 75rem) { .pkopf__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 60rem) { .pkopf__grid { grid-template-columns: 1fr; } /* Packshot nach oben: auf dem Telefon zuerst das Produkt. */ .pkopf__media { order: -1; } .pkopf__body { max-width: none; } } /* Die H1 traegt den vollen Produktnamen: die Warengruppe in Grafolita OBEN, die Sorte in Figtree darunter. Damit faellt die frueher separate Eyebrow weg - sie sagte dasselbe wie die erste Zeile. Eine Stufe groesser als die Sektionsueberschriften (--fs-700 gegen --fs-600), damit die Hierarchie stimmt. Die em-Behandlung kommt aus components/sektionstitel.css, Groesse und Reihenfolge werden hier ueberschrieben. */ /* --fs-600 und Gewicht 400, nicht --fs-700 und 700: bei 70 px in Bold war die Sortenzeile dominanter als die Grafolita darunter und erschlug den Kopf. Jetzt genau wie die Sektionsueberschriften der Seite - 48 px, Gewicht 400, dieselbe Laufweite. Figtree ist variabel 300-900, der leichtere Schnitt kostet keine zweite Datei. Die H1 bleibt trotzdem das groesste Element der Seite, weil die Grafolita-Zeile darunter auf --fs-800 laeuft. */ .pkopf__title { font-family: var(--font-body); font-size: var(--fs-600); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--toem-blau); margin: 0 0 var(--sp-4); /* DER text-indent VON GESTERN IST HIER RAUS. Er galt der Sortenzeile, und zwar als ERSTER Zeile der H1 - text-indent trifft nur die erste. Seit der Drehung vom 10.09. ist die erste Zeile die Grafolita, und die Sorte ist ein eigenes Element (.pkopf__variante) mit eigenem Versatz. Der Wert war damit nicht falsch, sondern wirkungslos: das em setzt text-indent: 0, und ein leerer erster Zeilenkasten hat nichts zum Einruecken. Der optische Ausgleich der Sortenzeile ist mit der Treppe ohnehin erledigt - sie liegt nicht mehr an der linken Kante. */ } /* Die geteilte Komponente setzt 1,6em und stellt die Grafolita-Zeile UNTER den Namen. Hier steht sie darueber und in derselben Groesse wie die Grafolita in der Startseiten-Hero: --fs-800, also 92 px bei 1440 - deshalb der Token und kein em-Faktor, sonst waere es nur zufaellig gleich. Reihenfolge kommt aus dem Markup: die Sorte steht oben, die Grafolita darunter - Wunsch vom 27.08.2026. NICHT in die em-Gruppen von feinschliff.css eintragen: die stellen die geteilte Schwungzeile an zwei Breakpoints auf 1,5em bzw. 1,28em und wuerden diesen Token damit ueberschreiben. --fs-800 bringt seine eigene Clamp mit und skaliert von 92 px auf 49,6 px herunter. */ /* DIE GROESSE RECHNET SICH AUS DER LAENGE DES NAMENS. Problem vom 04.09.2026: "Bio Sonnenblumenkernoel" lief aus der Spalte heraus und wurde von der Galerie verdeckt. Der Kommentar oben hatte es vorhergesagt - "Rapskernoel" hielt gerade, jeder laengere Name bricht. GEMESSEN, NICHT GERATEN: die Grafolita belegt 0,43 em je Zeichen, und das ist ueber alle Namen hinweg stabil (0,417 bis 0,430 bei vier gemessenen Namen). Damit ist die groesste Schriftgroesse, die noch passt, eine Rechnung: Spaltenbreite geteilt durch Zeichen mal 0,44. Der Wert 0,44 statt 0,43 ist der Sicherheitsabstand. --zeichen KOMMT AUS DEM MARKUP und traegt die Laenge des LAENGSTEN WORTES, nicht des ganzen Namens: "Bio Rapskernoel" bricht am Leerzeichen, dort zaehlt also "Rapskernoel" mit 10. Der Erzeuger rechnet das aus dem Namen aus, im Theme rechnet es PHP - beides einzeilig. min(), also: auf breiten Schirmen gewinnt --fs-800 wie bisher, nur bei langen Namen greift die Rechnung. Kurze Namen sehen unveraendert aus. DREI EBENEN, damit die Zeile unter keinen Umstaenden ueberlaeuft: 1. die erste Zeile ist der Rueckfall fuer Browser ohne cqw (vor Chrome 105, Safari 16). Sie bekommen --fs-800 wie zuvor. 2. die Rechnung. 3. hyphens: manual als Netz - getrennt wird nur an den Stellen, die im Datensatz stehen: am echten Bindestrich und an ­. Genau der Vorschlag des Kunden vom 04.09., hier als letzte Ebene und nicht als erste: eine getrennte Schreibschriftzeile mit sichtbarem Trennstrich auf 92 px liest sich wie ein Fehler, solange es auch ohne geht. WAR "auto" BIS ZUM 04.09.2026. Mit der neuen Schreibweise "Bio-Rapskernoel" brach der Browser die Zeile GEMESSEN als "Bio-Raps-" / "kernoel" - zwei Trennstriche in einer Ueberschrift, weil auto die Zeile so weit fuellt, wie es geht. Mit manual bricht sie an der einen Stelle, die inhaltlich stimmt: "Bio-" / "Rapskernoel". Das ist auch der Umbruch, den der Kunde selbst geschickt hat. DIE RECHNUNG PASST DAZU: sie teilt den Namen an Leerzeichen, Bindestrich und ­ und nimmt das laengste Stueck. Mit auto durfte der Browser haeufiger trennen als die Rechnung annahm, mit manual genau so oft. Netz gegen Ueberlauf bleibt die Rechnung selbst, nicht die Trennung. */ /* DIE SORTENZEILE ALS ZWEITE STUFE, 10.09.2026. Kundenentwurf Folie 1 in kundenfeedback/Screeendesign_Produktdetailseiten_Feedback_260910.pdf: Produktname oben in der Schwungschrift, Variante darunter nach rechts versetzt und in die Unterlaenge hineingeschoben. DIE ZWEI WERTE SIND AUS DEM ENTWURF GEMESSEN, nicht geschaetzt. Die Folie bei 200 dpi abgetastet und Gold von Blau getrennt: Name "Rapskernoel" x 1410-2170, y 120-289 (breit 761, hoch 170) Sorte "heiss braten" x 1639-2231, y 256-355 (breit 593, hoch 100) Claim x 1381-2331, y 404-449 Daraus die beiden Verhaeltnisse: VERSATZ NACH RECHTS: 1639 - 1410 = 229 px, also 30 % der Namensbreite. Der Name fuellt im Entwurf rund drei Viertel der Textspalte (761 von geschaetzt 1000), 30 % davon sind rund 23 % der Spalte - daher der Prozentwert unten. PROZENT DER SPALTE, NICHT DER NAMENSBREITE: die Namensbreite wechselt je Sorte ("Rapskernoel" gegen "Bio-Sonnenblumenkernoel") und bei langen Namen bricht die Zeile. Ein Versatz an der Spalte bleibt in jedem Fall eine erkennbare Treppe; an der Namensbreite waere er bei jedem Produkt anders gross. VERSATZ NACH OBEN: die Sorte beginnt 33 px ueber der Unterkante des Namens, das ist ein Drittel ihrer eigenen Zeilenhoehe. Bei 48 px Schrift sind das rund 0,25em. Die Unterlaenge des Grafolita-"p" laesst genau diesen Platz - ohne das Hineinschieben klaffte eine Luecke, mit mehr kollidieren die Buchstaben. KEIN OPTISCHER AUSGLEICH: die Zeile liegt nicht an der linken Blockkante, dort gibt es nichts zum Anlegen. */ .pkopf__variante { display: block; /* KLEINER ALS DER RAHMEN DER H1, 10.09.2026: "Kann die Subline heiss braten usw. kleiner!" Die Zeile erbte --fs-600 (48 px) von .pkopf__title. Jetzt --fs-550, gemessen 40 px - eine eigens dafuer angelegte Stufe, weil der naechste vorhandene Token 28 px hat und damit genau die Groesse des Claims. Begruendung und Rechnung in tokens.css. */ font-size: var(--fs-550); /* VON 23 % AUF 30 %, 10.09.2026: "Die Subline zum Beispiel Nussig-fein noch etwas weiter nach rechts." Der Entwurf gab 30 % der NAMENSBREITE her, das waren bei 23 % der Spalte gemessen 28 %. Mit 30 % der Spalte sind es rund 37 % der Namensbreite - die Zeile beginnt jetzt etwa in der Mitte des Namens. */ margin-left: 30%; margin-top: -0.25em; } /* DIE EINE AUSNAHME, vom Kunden ausdruecklich benannt: "Nur EINE Ausnahme. Bei Bio-Sonnenblumenkernoel kann die Subline linksbuendig bleiben!" Der Grund ist sichtbar: dieser Name ist der einzige, der umbricht (gemessen 167 px hoch gegen 101 px bei den anderen). Die Treppe setzt einen einzeiligen Namen voraus - bei einem dreizeiligen Namen stuende die versetzte Sorte unter dem Wortende der letzten Zeile und die Staffel loest sich auf. Der Aufschlag nach oben faellt hier mit weg: die letzte Zeile "kernoel" hat keine Unterlaenge, in die die Sorte hineinrutschen koennte - gemessen klaffte dort 16,5 px Luecke statt der 12 px Ueberlappung der anderen Seiten. GESETZT, NICHT ABGELEITET: das Feld 'variante_links' steht im Datensatz. Am Umbruch liesse es sich nicht festmachen, den kennt CSS nicht. */ .pkopf__variante--links { margin-left: 0; margin-top: 0; } /* Einspaltig bleibt die Treppe, wird aber flacher: bei 390 px Breite waeren 23 % nur 80 px, und die Sorte stuende fast unter dem Namensanfang. Hier traegt der Versatz die Komposition, nicht die Spaltenbreite. */ @media (max-width: 40rem) { .pkopf__variante { margin-left: 14%; } } .pkopf__title em { font-size: var(--fs-800); font-size: min(var(--fs-800), calc(100cqw / (var(--zeichen, 10) * 0.44))); hyphens: manual; /* Negativ nach OBEN, weil die Zeile jetzt unter der Sorte steht: Grafolita hat hohe Oberlaengen, ohne das Zusammenziehen klaffte eine Luecke. NEGATIV NACH LINKS seit dem 09.09.2026 - optischer Ausgleich. Auftrag des Kunden: "Im hero der Produktdetailseite steht jetzt der Text rechts. Hier sieht es aus, als waere das nicht buendig!" Er hat recht, obwohl die Kastenkanten exakt uebereinanderliegen: Block, H1, em, Claim und USP-Liste beginnen alle bei 847,33 px. Sichtbar ist nicht die Kastenkante, sondern die Tinte. Per Pixelabtastung des Screenshots gemessen, je Bildzeile die linkeste Nicht-Weiss-Spalte: Claim und USP-Haken (Figtree) 2,50 px "Nussig-fein" (Figtree) 4,50 px Grafolita-Zeile 8,00 px Rapskernoel, Bio-Rapskernoel Grafolita-Zeile 6,50 px Bio-Sonnenblumenkernoel EIN WERT, KEINE TABELLE JE PRODUKT. Erst stand hier eine Tabelle nach Anfangsbuchstaben - falsch: "Bio-Rapskernoel" und "Bio-Sonnenblumenkernoel" beginnen beide mit B und messen doch 8,00 und 6,50 px. Der Grund ist die Umbruchstelle: beim langen Namen faengt eine der Folgezeilen mit einem Kleinbuchstaben an ("blumen-", "kernoel"), und der traegt weniger Vorbreite als das B. Welcher Buchstabe eine Zeile eroeffnet, haengt an der Spaltenbreite - in CSS nicht abfragbar. Erst stand hier der KLEINERE der gemessenen Ueberschuesse, 0.0435em - der Wert, bei dem keine Zeile links aus dem Block ragt. Bei den vier Seiten mit B und R blieben damit 1,5 px Rest, und der Kunde wollte am 09.09.2026 mehr: "Die Grafolita-Zeile in der Hero auf der Produktdetailseite kann ruhig noch etwas mehr nach links gerueckt werden!" JETZT DER VOLLE UEBERSCHUSS: 5,50 px bei 92 px = 0.0598em. Damit steht die Grafolita-Tinte auf vier von fuenf Seiten genau auf der Tintenkante des Claims, gemessen 2,00 px. Beim langen Namen ("Bio-Sonnenblumenkernoel") ragt die schmalste Zeile dadurch 1,5 px nach links heraus - und das ist typografisch richtiger als das Gegenteil: eine Schwungschrift darf ein wenig ueberhaengen, hineinhaengen sieht nach Versehen aus. IN EM, NICHT PX: Vorbreiten skalieren linear mit der Schriftgroesse, und diese Zeile rechnet ihre Groesse aus der Spaltenbreite (cqw). Ein px-Wert waere nur bei 1440 px richtig. NUR HIER, wie verlangt: .pkopf__title gibt es einmal, im Produktkopf. Die Grafolita-Zeilen der Sektionstitel bleiben unangetastet - sie stehen mittig, dort gibt es keine Kante zum Anlegen. */ margin: -0.08em 0 0 -0.0598em; /* Der text-indent der H1 gilt der Sortenzeile und darf sich hier nicht fortsetzen: 92 px statt 48 px waeren fast das Doppelte. */ text-indent: 0; padding-block: 0.04em 0.06em; } /* DER EINFUEHRUNGSTEXT, ein Absatz. Kundenkorrektur P7 vom 02.09.2026, Folie 5, in der vollen Fassung gesehen am 04.09. VON --fs-400 AUF --fs-300 heruntergesetzt, und das ist keine Kosmetik: die Zeile trug vorher zwei Saetze, jetzt sind es fuenf bis sieben und 460 bis 540 Zeichen. In Anrissgroesse waere das ein Block, den niemand liest. --text-body statt --text-muted aus demselben Grund: ein kurzer Anriss darf leiser sein, ein Absatz von sieben Zeilen braucht Kontrast. Worttrennung wie im Fliesstext der Produktuebersicht - die Spalte ist 512 px breit, und "Inhaltsstoffe" allein hat 13 Zeichen. */ .pkopf__lead { font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-body); margin: 0; max-width: 32rem; hyphens: auto; } /* --- USP-Punkte im Produktkopf ----------------------------------------- */ /* Drei Argumente unter dem Lead, mit Icon. Sie standen vorher in der Hero und sind beim Entfernen der .phero-Regeln mit verschwunden - die Icons rendern ohne Maszangabe mit 300x150 px, dadurch war der Block 1982 statt 600 px hoch. Deshalb gehoeren Breite und Hoehe hier zwingend hin. Die Icons sind aria-hidden, die Aussage steht im Text daneben. */ /* GOLDENE HAKEN STATT KREIS-ICONS, Wunsch vom 04.09.2026 - und der Grund ist nicht nur Optik: hier stand je USP ein eigenes Icon (Bohne, Flamme, Kartennadel) in einem 40 px hohen Kreis mit Goldschleier. Drei Zeilen brauchten damit 40 px Zeilenhoehe plus Abstand. Mit dem Haken bei 20 px ist der Block gemessen 76 px flacher, und das zaehlt im ersten Bildschirm. EIN ZEICHEN FUER ALLE DREI, und das ist die eigentliche Verbesserung: die Icons sahen aus wie Kategorien, waren aber nur Illustration - eine Bohne neben "Nur der geschaelte Kern" sagt nichts, was der Text nicht sagt. Ein Haken sagt etwas: das hier ist eine zugesagte Eigenschaft. GOLD ALS STRICH IST HIER ZULAESSIG, obwohl es auf Weiss nur 2,00:1 haelt: der Haken traegt keine Information, die nicht auch im Text steht. Er ist Auszeichnung, nicht Aussage - deshalb greift die 3:1-Regel nicht. Waere er die einzige Quelle fuer "erfuellt ja/nein", muesste er dunkler sein. Und es bleibt bei dem einen Goldton. align-items: start statt center, damit der Haken bei einer zweizeiligen Angabe an der ERSTEN Zeile sitzt und nicht in der Mitte zwischen beiden. Ein Haken auf halber Hoehe sieht aus wie ein Fehler. */ .pkopf__usp { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); } .pkopf__usp li { display: flex; align-items: start; gap: var(--sp-3); font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-body); } .pkopf__usp svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--toem-gold); /* Optisch auf die Grundlinie der ersten Zeile gesetzt: die Zeile ist 1,3 x 16 px hoch, das Zeichen 20 px - ohne die Verschiebung sitzt der Haken einen Hauch zu hoch. */ margin-top: 0.05em; } .pkopf__media { position: relative; display: grid; place-items: start center; } /* Kein max-height: die Spaltenbreite ist der Deckel. Der Altblock hatte hier 26rem stehen, dadurch war der Packshot auf 540 px Breite gekappt. NUR DAS DIREKTE KIND, seit hier am 04.09.2026 die Galerie steht. Vorher traf die Regel jedes img in der Spalte, also auch die Bilder in der Galeriebahn - und dort setzt components/galerie.css height: 100%, damit die quadratische Buehne traegt. Beide Selektoren haben dieselbe Spezifitaet (0,1,1), und galerie.css laedt vorher, also hatte height: auto gewonnen: die Buehne waere zusammengefallen. Mit > gilt die Regel weiter fuer ein Einzelbild ohne Galerie, greift aber nicht mehr in die Komponente hinein. Kein !important, keine Reihenfolge, auf die man sich verlassen muss. */ .pkopf__media > img { width: 100%; max-width: 100%; height: auto; display: block; } /* Die Galerie ist selbst das Kind der Spalte und braucht die Breite. */ .pkopf__media > .galerie { width: 100%; } /* ZURUECK AUF QUERFORMAT, Kundenkorrektur vom 10.09.2026: "du kannst das Hauptbild gerne wieder auf querformatig umstellen." Am 09.09. war es auf Wunsch quadratisch geworden (Feedback-PDF Folie 1: "Bild/Slider nach links wandern und quadratisch sein"), einen Tag spaeter zurueckgenommen. Der Block ist deshalb NICHT ersatzlos entfernt, sondern auf einen Kommentar zusammengeschrumpft - damit die Runde nachvollziehbar bleibt und beim naechsten Umschwenken klar ist, was zu tun ist. WIEDERHERSTELLEN, falls es zurueckkommt: es waren drei Zeilen - .pkopf__media .galerie__bild { aspect-ratio: 1 / 1; } .pkopf__media .galerie__minilink { aspect-ratio: 1 / 1; } .pkopf__media > .galerie { max-width: min(100%, calc(100svh - 24rem)); } Der Deckel MUSS zum Seitenverhaeltnis passen: components/galerie.css rechnet (100svh - 24rem) * 4/3, weil 4:3 das Verhaeltnis des Bauteils ist. Bei einem Quadrat ist der Faktor 1. Genau das war am 09.09. stehen geblieben und hat das Bild aus dem ersten Bildschirm ragen lassen. Jetzt gilt wieder der Wert aus dem Bauteil, hier steht nichts. */ /* GALERIE LINKS, SOBALD DIE HERO EINSPALTIG IST. Kundenkorrektur vom 09.09.2026: "Ab einem gewissen Breakpoint geht die Schrift bei der Hero unter den Slider und der Slider steht mittig. Den dann bitte links setzen!" GEMESSEN, wo es kippt: bei 961 px steht die Hero zweispaltig, die Galerie fuellt ihre 418-px-Spur, alles stimmt. Bei 960 px greift die Einspalter- Query - die Spur ist jetzt 883 px breit, die Galerie bleibt bei 516 px, weil der Deckel darueber sie auf 100svh - 24rem begrenzt. Die 367 px Ueberschuss teilte das center in zwei gleiche Raender: die Galerie stand 184 px rechts von der linken Kante der Ueberschrift. DIESE REGEL MUSS HINTER .pkopf__media STEHEN, nicht im Query weiter oben. Dort hatte sie zuerst gestanden und nichts getan: place-items in der Basisregel setzt justify-items mit, beide Selektoren haben dieselbe Spezifitaet (0,1,0), und eine Media Query erhoeht sie nicht. Es gewinnt, was spaeter in der Datei steht - gemessen blieb justify-items: center. Derselbe Fallstrick wie bei den Spaltenbreiten nach dem Bildtausch. */ @media (max-width: 60rem) { .pkopf__media { justify-items: start; } } /* --- Datensektion ------------------------------------------------------ */ /* Weisse Bahn wie der Produktkopf, getrennt durch den Bogen - dasselbe Muster wie Hero und USP auf der Startseite. Tabs und Geschmacksprofil liegen jetzt ueber die ganze Breite, der Packshot belegt hier keine Spalte mehr. */ /* Oben --sp-sektion statt --sp-8: zwischen Bogenunterkante und H2 lagen nur 63 px, der Datenblock klebte am Produktkopf. Beide Bahnen sind weiss, also gibt es keine Bahnkante, die die Trennung uebernimmt - der Abstand muss sie allein tragen. */ .pdaten { background: var(--bg-page); padding-block: var(--sp-sektion) var(--sp-sektion); } /* Die geteilte Sektionstitel-Komponente setzt an der Unterzeile margin: 0. Auf der Startseite tragen die Abstaende dort die umgebenden __head- und __intro-Container. Diese Seite hat die nicht, also braucht die Unterzeile hier selbst Luft - sonst klebt sie am Folgeblock. Nur lokal ueberschrieben, die Komponente bleibt unberuehrt. */ /* .pdaten__sub ist mit der Sektionsueberschrift entfallen (Folie 6). */ .pverw__sub, .psorten__sub, .pshops__sub { margin-bottom: var(--sp-6); } /* Die Sektion .pbesch ist am 27.08.2026 entfallen. Aus der ruhigen Textsektion wurde das blaue Bildband .pschael weiter unten - dieselben Absaetze, andere Buehne. */ /* Handelshinweis. Steht abgesetzt, weil es kein Produkttext ist, sondern eine Bezugsquelle. Goldband links wie an den Kontaktkarten. */ /* --- Datentabelle: traegt beide Tabs ---------------------------------- */ /* Die eigene Sektion .pnaehr ist entfallen, der Inhalt steht seit dem 27.08.2026 als zweiter Tab in der Datensektion. Die Regeln fuer Tabelle, Zutatenkarte und Fussnote bleiben unveraendert - sie beschreiben den Inhalt, nicht die Sektion. */ /* --- Reiter "Beschreibung" ------------------------------------------------ Kundenkorrektur vom 09.09.2026, Folie 2 und 3. Der Reiter hiess "Produktdaten" und trug nur die Tabelle; jetzt traegt er den Beschreibungstext, der aus dem Kopf gewandert ist, und die Tabelle daneben. ZWEI SPALTEN, UND DIE LINKE IST GEDECKELT. GEMESSEN: die Reiterflaeche ist 1208 px breit, ein Zeichen 7,43 px - ueber die ganze Breite waeren das 160 Zeichen je Zeile. Empfohlen sind 65 bis 75, das sind 483 bis 557 px. 32rem = 512 px liegt darin. Ohne die Deckelung waere der Text unlesbar, und die rechte Haelfte blieb leer, wie auf Folie 3 zu sehen. Die Tabelle steht deshalb rechts: sie fuellt den Platz, den die Deckelung ohnehin frei laesst, und der Kunde verliert keine Angabe. */ .pbeschr { display: grid; /* VON 28rem AUF 30rem, 10.09.2026. Der Kunde erlaubt mehr Breite ("Text kann auch weiter nach rechts laufen", Folie 2), die Lesbarkeit setzt aber die Grenze, nicht der Platz. Gemessen ist das Zeichen im Mittel 6,4 px breit: 28rem trugen 70 Zeichen je Zeile, 30rem tragen 75. Damit liegt die Zeile am OBEREN Ende des empfohlenen Bereichs von 65 bis 75 - die Erlaubnis ist genutzt, ohne sie zu ueberziehen. 32rem waren einmal gemessen und ergaben 80 Zeichen, das war zu viel. RECHTS STEHEN JETZT DIE ZEICHEN, wo bis zum 10.09. die Produktdatentabelle stand. Sie ist auf Kundenwunsch entfallen. */ grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(var(--sp-6), 5vw, var(--sp-9)); /* align-items: start - sonst streckt sich die zweite Spalte auf die Texthoehe und die Zeichen stehen mit riesigen Abstaenden auseinander. */ align-items: start; } /* DIE ZEICHEN IM RASTER: NEBENEINANDER. Kurz untereinander gestellt, weil der Entwurf des Kunden sie so zeigt - und sofort zurueckgenommen, weil er selbst widersprach: "Macht es nicht Sinn die Logos im Tab neben einander darzustellen?" Er hat recht, und es ist gemessen belegbar: die zweite Spalte ist 656 px breit, drei Zeichen brauchen zusammen rund 290 px. Untereinander blieben 366 px ungenutzt, und der Block wuchs von 211 auf 381 px Hoehe - eine leere Spalte neben einer zu hohen Saeule. Es bleibt also bei der Reihe aus dem Bauteil; hier faellt nur der eigene Aussenabstand weg, den traegt das Raster. */ .pbeschr .pzeichen__reihe { margin: 0; } .pbeschr__text { font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-body); hyphens: auto; /* WENIGER TRENNUNGEN (07.10.2026, Kundin): nur Wörter ab 12 Zeichen, mindestens 5 Buchstaben vor und nach dem Strich. „schonend" oder „wertvollen" bleiben ganz, lange Wörter wie „Inhaltsstoffe" dürfen weiter brechen. Safari kennt nur die -webkit-Angaben. */ hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } .pbeschr__text p { margin: 0; } /* Leerzeile im Feld = neuer Absatz (06.10.2026). */ .pbeschr__text p + p { margin-top: 0.75em; } /* .pbeschr__daten IST ENTFALLEN, 10.09.2026: die Produktdatentabelle im Reiter "Beschreibung" ist auf Kundenwunsch weg (Folie 2). Die Klasse steht nirgends mehr im Markup. Wiederherstellen waere eine Zeile: .pbeschr__daten { font-size: var(--fs-100); } - kleiner gesetzt, damit die Tabelle den Text nicht ueberstimmt. */ /* --- Die Zeichen unter dem Text --------------------------------------- Folie 3. Das Siegel "Raps aus Deutschland" zeichnet werkzeug/ produktseiten-bauen.py als Inline-SVG - deshalb traegt es die Farben der Seite und nicht die einer Bilddatei. Die Bio-Zeichen sind beschriftete Kaesten: das EU-Bio-Logo und das deutsche Bio-Siegel sind amtlich festgelegt, nachzeichnen waere falsch, und ihre Verwendung verlangt die Kontrollstellennummer. Der gestrichelte Rahmen sagt "hier fehlt noch etwas" - ein durchgezogener wuerde behaupten, es sei fertig. */ .pzeichen__reihe { display: flex; flex-wrap: wrap; /* START, NICHT CENTER, seit dem 09.09.2026. Vorher stand hier center, und das war richtig, solange alle Kacheln gleich hoch waren. Das EU-Logo traegt jetzt eine Zeile darunter ("Kontrollstellen-Nummer folgt") und ist dadurch hoeher - center haette es samt Logo nach oben geschoben, die Zeichen standen nicht mehr auf einer Linie. Die gemeinsame Linie macht jetzt jede Kachel selbst: eine feste erste Rasterzeile von 5.75rem, siehe .pzeichen. */ align-items: start; gap: var(--sp-5); margin: var(--sp-7) 0 0; padding: 0; list-style: none; } /* Erste Zeile 5.75rem hoch - die Hoehe des eigenen Rundsiegels, des groessten Zeichens. Darin sitzt jedes Zeichen mittig, egal ob rund, quer oder sechseckig. Zweite Zeile auto: sie traegt nur beim EU-Logo etwas. */ .pzeichen { flex: none; display: grid; grid-template-rows: 5.75rem auto; align-items: center; justify-items: start; } .pzeichen__grafik { width: 5.75rem; height: 5.75rem; display: block; } /* DIE AMTLICHEN BIO-LOGOS, eingebunden am 09.09.2026 (Kundenauftrag: "die EU-Bio-Logos auf der entsprechenden Seite suchen und einbinden"). HOEHE STATT BREITE ALS MASS: das EU-Logo ist querformatig (400:268), das deutsche Bio-Siegel fast quadratisch (744:623). Ueber die Breite gedeckelt wuerde das EU-Logo optisch kleiner wirken als das Sechseck daneben. Ueber eine gemeinsame Hoehe stehen beide auf einer Linie. 4.5rem = 72 px, gemessen. Die EU-Oeko-Verordnung schreibt fuer das EU-Logo eine Mindesthoehe von 9 mm vor, das sind rund 34 px - wir liegen deutlich darueber. Etwas kleiner als das eigene Rundsiegel (5.75rem): ein Rund wirkt bei gleicher Hoehe leichter als eine Flaeche. ASPECT-RATIO NICHT GESETZT: width/height stehen im Markup, der Browser rechnet das Verhaeltnis daraus. */ .pzeichen__bild { height: 4.5rem; width: auto; display: block; } /* DIE KONTROLLSTELLENNUMMER FEHLT NOCH. Nach der EU-Oeko-Verordnung muss sie unmittelbar unter dem EU-Logo stehen (Form DE-OEKO-000). Eine erfundene Nummer waere eine falsche Angabe auf einem Lebensmittel, deshalb steht hier der Hinweis - er haelt den Platz frei und sagt, dass etwas fehlt. max-width am Logo ausgerichtet: der Hinweis ist laenger als das Logo breit und darf die naechste Kachel nicht wegschieben. */ .pzeichen__code { display: block; max-width: 7rem; margin-top: var(--sp-2); font-size: var(--fs-100); line-height: var(--lh-snug); color: var(--text-muted); } /* NOCH IN GEBRAUCH? Nein - seit dem 09.09.2026 sind die Bio-Zeichen echte Dateien, und die Reihe erzeugt keine Platzhalter mehr. Die Regeln bleiben stehen, weil dasselbe Muster jederzeit wieder gebraucht wird, sobald ein Zeichen fehlt (dieselbe Rolle wie .pshops__platzhalter bei den Haendlern). */ .pzeichen--platzhalter { width: 5.75rem; height: 5.75rem; display: grid; place-items: center; border: 1px dashed var(--c-grau-300); border-radius: var(--r-sm); text-align: center; font-size: var(--fs-100); line-height: var(--lh-snug); color: var(--text-muted); } .pzeichen--platzhalter small { color: var(--c-grau-300); } /* --- Reiter "Zutaten & Nährwerte" ------------------------------------ Am 09.09.2026 aus zwei Reitern zusammengelegt (Folie 2 und 4). Das Beispiel auf Folie 4 ist eine fremde Verpackung. Uebernommen ist nur der AUFBAU - zwei Spalten, Zutaten links, Naehrwerte rechts, Lagerhinweis unter den Zutaten. Farben und Schriften bleiben unsere; das hat der Kunde ausdruecklich bestaetigt. 1fr 1fr, nicht auto: die Naehrwertetabelle hat mehr Zeilen als die Zutaten, und bei auto waere die linke Spalte schmal und die rechte breit - zwei Tabellen mit unterschiedlicher Zeilenbreite lesen sich schlecht nebeneinander. */ .pzn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--sp-6), 4vw, var(--sp-8)); align-items: start; } .pzn__titel { margin: 0 0 var(--sp-3); font-size: var(--fs-400); font-weight: 700; color: var(--toem-blau); } /* ZUTATEN ALS FLIESSTEXT, Kundenkorrektur vom 09.09.2026. Hier stand dieselbe .pdaten__table wie rechts; der Kunde will den Satz, wie auf Folie 4. --fs-300 wie der Beschreibungstext im ersten Reiter: es ist Fliesstext und soll auch so aussehen. Die Naehrwerte rechts bleiben --fs-100, also kleiner - eine Tabelle liest man spaltenweise, nicht Zeile fuer Zeile. Kein max-width: die Spalte ist gemessen 575 px breit und deckelt selbst. */ .pzn__zutaten { margin: 0; font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-body); } /* DIE FUSSNOTE BRAUCHT MEHR LUFT, seit die Tabelle weg ist: aus dem Abstand der Tabelle wurden 12 px, und Satz und Fussnote klebten aneinander. Die Fussnote ist eine andere Tonlage als der Zutatensatz und braucht die Trennung. (Die Zeile "Anzahl der Zutaten" stand hier bis zum 09.09. dazwischen und ist auf Wunsch des Kunden entfallen - der Abstand bleibt richtig.) Auf .pzn__spalte gescopet: dieselbe Klasse traegt die Fussnoten unter den Tabellen im Beschreibungsreiter, dort ist der Abstand richtig. */ .pzn__spalte > .pdaten__fussnote { margin-top: var(--sp-4); } /* Der Lagerhinweis steht unter den Zutaten, wie im Beispiel des Kunden. Leiser als die Tabelle: er ist ein Hinweis, keine Angabe zum Vergleichen. */ .pzn__lager { margin: var(--sp-5) 0 0; font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-muted); } @media (max-width: 56rem) { .pbeschr, .pzn { grid-template-columns: minmax(0, 1fr); } .pbeschr { gap: var(--sp-7); } } .pdaten__table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); } /* Die Caption ist am 27.08.2026 unsichtbar geworden (.visually-hidden im Markup): sichtbar wiederholte sie nur das Tab-Label darueber. Fuer Screenreader bleibt sie, jede Tabelle soll einen Namen haben. Keine eigenen Regeln mehr - .visually-hidden aus base.css traegt sie. */ /* Spaltenkopf. Traegt bei den Naehrwerten die Einheit "pro 100 ml". Dieselbe kleine Versalzeile wie die frueheren Captions, aber rechts ueber der Wertespalte, wo sie hingehoert. Die uebrigen zwei Tabellen haben keinen thead - sie brauchen keine Einheit, und eine leere Kopfzeile waere schlimmer als keine. Die Datenzeilen bleiben in allen drei identisch. */ .pdaten__table thead th { padding-block: var(--sp-2); border-bottom: 1px solid var(--line); font-size: var(--fs-100); font-weight: 400; letter-spacing: var(--ls-wide); text-transform: uppercase; text-align: right; color: var(--text-muted); } .pdaten__table thead td { border-bottom: 1px solid var(--line); } /* ZEILENPOLSTERUNG VON --sp-3 AUF --sp-2, Kundenkorrektur vom 09.09.2026: "Bekommt man es auch hin, bei der Naehrwerte-Tabelle die Abstaende etwas kleiner zu machen, damit die Tabelle nicht so hoch wird!" Gemessen war die Zeile 49,25 px hoch: 24,75 px Zeilenhoehe, 24 px Polster (12 oben, 12 unten) und die halbe Trennlinie. Bei elf Zeilen plus Kopf ergab das 586 px - fast ein Bildschirm nur fuer die Naehrwerte. Mit --sp-2 sind es 8 px je Seite, also 8 px weniger je Zeile. AM BAUTEIL, nicht in .pzn gescopet: dieselbe Klasse traegt auch die Produktdatentabelle im Reiter "Beschreibung". Zwei Zeilenrhythmen fuer dasselbe Bauteil waeren schlechter als ein einheitlicher - die beiden Tabellen stehen in verschiedenen Reitern und sind nie gleichzeitig zu sehen, aber im Theme ist es ein Bauteil. DIE ZEILENHOEHE BLEIBT. Sie waere der zweite Hebel (24,75 px kommen von --lh-body), aber "davon mehrfach ungesaettigte Fettsaeuren" bricht in schmalen Spalten auf zwei Zeilen, und dort ist Luft zwischen den Zeilen Lesbarkeit, nicht Verschwendung. Erst messen, wenn der Kunde noch weniger Hoehe will. */ .pdaten__table th, .pdaten__table td { padding-block: var(--sp-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; } .pdaten__table th { font-weight: 400; color: var(--text-muted); } /* Zahlen rechts und auf gleicher Ziffernbreite, sonst tanzen die Werte. font-variant-numeric statt eigener Schrift - Figtree bringt die Tabellen- ziffern mit. */ /* KEIN white-space: nowrap. Es stand hier, damit "819 kcal / 3.367 kJ" nicht bricht - gemessen braucht der Wert aber nur rund 140px in einer 400px breiten Spalte, der Schutz war unnoetig. Mit dem Zutatentab kam ein Wert dazu, der ein ganzer Satz ist; nowrap haette ihn aus der Tabelle laufen lassen. tabular-nums bleibt: die Zahlenspalte soll auf gleicher Ziffernbreite stehen. */ .pdaten__table td { text-align: right; font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; } /* Eingerueckte Unterzeilen ("davon gesaettigte Fettsaeuren"). */ .pdaten__table .ist-unterzeile th { padding-left: var(--sp-4); } .pdaten__fussnote { margin: var(--sp-3) 0 0; font-size: var(--fs-100); line-height: var(--lh-snug); color: var(--text-muted); } /* Die Bezugsquellen liegen jetzt in components/bezugsquellen.css - sie werden am Fuss der Rezeptliste ebenfalls gebraucht. Diese Seite laedt die Komponente im . */ /* ========================================================================== 1b. Bio - die gruene Bahn NUR AUF DEN ZWEI BIO-SEITEN. Erzeugt in werkzeug/produktseiten-bauen.py, wenn der Datensatz das Feld 'bio' hat. WARUM ES SIE GIBT: --sorte liegt auf den Bio-Seiten an, aber GEMESSEN war das Gruen auf der Seite selbst an keiner Stelle sichtbar - die vier Treffer lagen in der Navigation und im Abschluss-Teaser. Kopf, Anwendungskarten und Rezeptkarten zeichnen es nicht. Die beiden Bio-Seiten sahen deshalb aus wie die konventionellen. BAUFORM DER BLAUEN BAHN, uebernommen von .pukern in pages/produkte.css - dieselbe Polsterung, dieselbe Schwungzeile mit Gold, derselbe Weg mit Pfeil. Nur die Farbe wechselt. Das ist die fuenfte Kopie dieser Bauform (.pukern, .heschael, .kaabbinder, das gestrichene .pschael und diese); dass sie nach components/ gehoert, steht schon dreimal im Bestand. Hier ist sie erstmals NICHT blau - im Theme also eine Bahn mit Farbparameter, nicht zwei Bausteine. OHNE MOTIV, anders als die blauen Bahnen: es gibt kein Bio-Motiv im Bestand, und ein Rapsfeld auf der Sonnenblumenseite waere falsch. Die Bahn traegt die reine Sortenfarbe. Der Platz fuer ein Motiv ist da, die Bauform hat ihn. GEMESSEN, Kontrast auf #1d5c33: Weiss (--on-blau-1) 7.98 : 1 --on-blau-2, deckend gerechnet 5.57 : 1 Gold in der Schwungzeile 3.99 : 1 Gold im Weg (15 px, 600) 3.99 : 1 - ZU WENIG Auf Blau steht Gold bei 7.85, auf Gruen bei 3.99. Fuer die Schwungzeile reicht das: gemessen 60.8 px, und ab 24 px gilt 3:1. Fuer den Weg nicht - 15 px in 600 sind normale Schrift, dort gelten 4.5. GELOEST UEBER DIE ROLLE DES GOLDS, nicht ueber einen zweiten Goldton: der Wegtext laeuft auf dieser Bahn in Weiss (7.98), der Pfeil bleibt golden. Der Pfeil ist aria-hidden, also eine Grafik - fuer die gelten 3:1, und 3.99 reicht. Das Gold bleibt damit sichtbar, ohne dass Text darunter leidet. Auf den blauen Bahnen bleibt der Weg golden, dort steht er bei 7.85. DIE TOKENNAMEN --on-blau-* SIND JETZT ZU ENG. Sie bedeuten "Text auf dunkler Bahn" und tragen hier Gruen. Umbenennen wuerde 15 Dateien anfassen, kurz vor der Abgabe; steht als Punkt in theme-notizen.md. ========================================================================== */ .pbio { position: relative; overflow: hidden; background: var(--c-sorte-bio); padding-block: clamp(var(--sp-8), 9vw, var(--sp-9)); color: var(--on-blau-2); } /* Fokusring in Gold wie bei .kastimmen: der blaue Ring aus base.css stand hier bei 1,97:1 auf dem Bio-Gruen; Gold haelt dort gut 4:1 (gemessen 24.09.2026). */ .pbio :focus-visible { outline-color: var(--toem-gold); } /* Das Motiv liegt hinter der Bahn, nicht daneben - wie bei .pukern. Der Schleier darueber ist derselbe Verlauf, nur in Gruen statt Blau: links fast deckend, nach rechts offener, damit das Foto dort noch zu sehen ist. OHNE MOTIV faellt der Block weg, dann traegt die Bahn die reine Sortenfarbe. Nur das Bio-Rapskernoel hat eins. */ .pbio__media { position: absolute; inset: 0; } .pbio__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; } .pbio__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(29, 92, 51, 0.95) 0%, rgba(29, 92, 51, 0.92) 40%, rgba(29, 92, 51, 0.76) 62%, rgba(29, 92, 51, 0.58) 100%); } .pbio__inner { position: relative; } .pbio__title { max-width: 46rem; color: var(--on-blau-1); } .pbio__title em { color: var(--toem-gold); } .pbio__text { margin: var(--sp-5) 0 0; max-width: 46rem; font-size: var(--fs-300); line-height: var(--lh-body); } .pbio__aktion { margin: var(--sp-6) 0 0; } .pbio__weg { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-200); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--on-blau-1); text-decoration: none; } .pbio__weg svg { flex: none; color: var(--toem-gold); transition: translate var(--dur-hover) var(--ease-hover); } .pbio__weg:hover svg { translate: var(--sp-2) 0; } /* ========================================================================== 2. Kalt, warm und heiss Die Verwendungszeile des Etiketts als eigene Sektion. Drei Karten mit festem Seitenverhaeltnis, damit die unterschiedlich formatigen Motive gleich gross wirken. ========================================================================== */ .pverw { background: var(--bg-soft); padding-block: var(--sp-sektion); } /* SLIDER statt Dreispaltenraster. Kundenwunsch vom 27.08.2026: die Motive sollen breiter stehen. Breiter heisst bei drei Karten, dass sie nicht mehr nebeneinander passen - also eine waagerechte Bahn. Ohne Skript bleibt es ein normaler Scrollcontainer: Trackpad, Wischgeste und Umschalt+Rad funktionieren, und ueber die Links in den Karten kommt man per Tastatur hinein. Die Knoepfe schaltet js/slider.js frei. Die senkrechte Polsterung steht da, damit der Kartenschatten nicht an der Kante des Scrollcontainers abgeschnitten wird. */ .pverw__grid { display: flex; gap: clamp(var(--sp-4), 2.5vw, var(--sp-5)); margin-top: var(--sp-7); /* BEIDE Achsen deklarieren. Steht nur overflow-x, rechnet der Browser das verbliebene overflow-y von "visible" auf "auto" hoch - dann ist die Bahn auch senkrecht scrollbar, und ein Trackpad-Gesture haengt sich an ihr auf, statt die Seite zu scrollen. Gemessen: scrollTop liess sich auf 16 px setzen, obwohl der Inhalt bei 484 in einer 492 px hohen Bahn endet - die 16 px sind ein Chromium-Artefakt aus Flex plus scroll-snap, kein Inhalt. Deshalb schneidet hidden hier nichts weg. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-block: var(--sp-2); /* Die Bahn liegt in .wrap; ohne negativen Rand endete sie am Seitenraster und die letzte Karte wirkte abgeschnitten statt angeschnitten. */ scroll-padding-inline-start: 0; /* Scrollbalken ausblenden, Kundenwunsch vom 27.08.2026. Vertretbar, weil die Bahn zwei sichtbare Bedienungen hat, Punkte und Pfeile - der Balken ist hier nicht die einzige Anzeige, dass es weitergeht. Gescrollt werden kann weiter: Trackpad, Wischgeste, Umschalt+Rad und die Tastatur ueber die Links in den Folien. */ scrollbar-width: none; -ms-overflow-style: none; } .pverw__grid::-webkit-scrollbar { display: none; } .pverw__karte { /* EINE Folie pro Ansicht, volle Bahnbreite. Kundenwunsch vom 27.08.2026: man soll ein grosses Bild sehen und den Text daneben, dann zur naechsten Anwendung weiterschieben. Zwischenstufen waren erst drei Karten nebeneinander (Motive zu klein), dann 26rem und 30rem breite Karten (2,4 im Bild, nur 280 px Weg). Beides war nicht gemeint. */ flex: 0 0 100%; scroll-snap-align: start; /* Bild links, Text rechts. 1,05 zu 0,95: das Motiv traegt die Sektion, der Text sind drei Zeilen. */ display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; } @media (max-width: 56rem) { /* Gestapelt: nebeneinander bliebe fuer keines von beiden genug Platz. Der Streifen wandert zurueck nach oben. */ .pverw__karte { grid-template-columns: 1fr; } .pverw__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); } } /* Pfeile unten rechts. Sie stehen NACH der Bahn, nicht darueber: erst der Inhalt, dann die Bedienung. hidden im Markup, das Skript nimmt es weg - ein Knopf ohne Funktion soll nicht herumliegen. Das Skript versteckt sie auch wieder, wenn alle Karten ohnehin ins Bild passen. */ /* Eine Zeile unter der Bahn. Punkte MITTIG, Pfeile rechts - deshalb drei Spalten mit leerer erster: nur so liegt die Punktreihe wirklich in der Mitte der Sektion und nicht in der Mitte des Restplatzes. Die Punkte zeigen, wie viele Anwendungen es gibt und wo man steht; die Pfeile bedienen. */ .pverw__leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); } .pverw__leiste > .pverw__punkte { grid-column: 2; justify-self: center; } .pverw__leiste > .pverw__nav { grid-column: 3; justify-self: end; } @media (max-width: 40rem) { /* Auf schmalen Schirmen untereinander: nebeneinander wird die Zeile eng, und die Punkte rutschen aus der Mitte. */ .pverw__leiste { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-3); } .pverw__leiste > .pverw__punkte, .pverw__leiste > .pverw__nav { grid-column: 1; justify-self: center; } } .pverw__punkte { display: flex; /* Kein Abstand: die Polsterung der Knoepfe traegt die Luft. */ gap: 0; } .pverw__punkte[hidden] { display: none; } /* Kleiner und enger auf Kundenwunsch vom 27.08.2026: Kern von 10 auf 8 px, Trefferflaeche von 44x44 auf 28x44, Abstand auf null. Die Punktmitten liegen damit 28 statt 52 px auseinander, sichtbar bleiben 20 px Luft. ABWEICHUNG von der Projektregel "Tap-Targets ab 44 px", bewusst und nur in der Breite: senkrecht bleiben es 44 px. Drei Punkte mit je 44 px Breite standen so weit auseinander, dass sie nicht mehr als Reihe lasen. 28x44 liegt weiter deutlich ueber der WCAG-Mindestgroesse von 24x24. */ .pverw__punkt { appearance: none; border: 0; background: none; width: 1.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; cursor: pointer; } .pverw__punkt::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill); background: var(--c-grau-300); transition: background var(--dur) var(--ease), transform var(--dur-hover) var(--ease-hover); } .pverw__punkt:hover::before { background: var(--text-muted); } /* Der aktive Punkt traegt die Sortenfarbe der Sektion nicht - die wechselt je Folie. Markenblau ist der ruhigere Anker. */ .pverw__punkt[aria-current="true"]::before { background: var(--toem-blau); transform: scale(1.3); } .pverw__punkt:focus-visible { outline-offset: -6px; } .pverw__nav { display: flex; gap: var(--sp-2); } .pverw__nav[hidden] { display: none; } .pverw__pfeil { appearance: none; /* 44 px Trefferflaeche laut Projektregel. */ width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--toem-blau); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .pverw__pfeil svg { width: var(--zeichen-klein); height: var(--zeichen-klein); } .pverw__pfeil:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-1); } /* Deaktiviert: sichtbar, aber deutlich zurueckgenommen. Ausblenden waere schlechter - die Reihe wuerde springen, sobald ein Knopf verschwindet. */ .pverw__pfeil:disabled { color: var(--text-muted); opacity: 0.4; cursor: default; } .pverw__karte { background: var(--surface); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-1); } /* Das Verhaeltnis gibt die Zeilenhoehe vor; wird der Text laenger, waechst die Zeile und das Motiv fuellt mit cover nach. Die drei Motive liegen als 3:4 und 4:3 vor - erst durch das feste Verhaeltnis wirken sie gleich. */ .pverw__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-platzhalter); } .pverw__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-media) var(--ease-media); } .pverw__karte:hover .pverw__media img { transform: scale(var(--zoom-media)); } /* KEINE Trennlinie zwischen Bild und Text, Kundenwunsch vom 27.08.2026. Vorher lag hier ein 3px-Streifen in der Sortenfarbe, wie an den Produktkarten der Startseite. Bei einer ganzflaechigen Folie trennte er nichts, was die Bildkante nicht schon trennt - er zerschnitt die Folie. Die Sortenfarbe hat damit in dieser Sektion keine Rolle mehr; --sorte bleibt am Markup stehen, falls sie zurueckkommt. Mittig in der Hoehe, damit der Text nicht am Bildrand klebt. */ .pverw__body { padding: clamp(var(--sp-6), 3.5vw, var(--sp-8)); display: flex; flex-direction: column; justify-content: center; } .pverw__stufe { margin: 0 0 var(--sp-2); font-size: var(--fs-100); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); } /* Groesser als in der frueheren Kartenfassung: der Titel traegt jetzt eine ganze Folie, nicht ein Drittel einer Reihe. */ .pverw__titel { margin: 0 0 var(--sp-3); /* Der Rohwert ist am 28.08.2026 in --fs-500 gewandert, damit die Rezeptdetailseite dieselbe Stufe treffen kann. Reine Umlagerung, der Wert ist unveraendert. */ font-size: var(--fs-500); font-weight: 700; line-height: var(--lh-snug); color: var(--toem-blau); } .pverw__text { margin: 0; font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-muted); } /* ========================================================================== 4. Schaelverfahren - AM 02.09.2026 ENTFALLEN ========================================================================== Hier stand .pschael, das vollbreite Bildband "Vom Kern statt vom Korn". Vom Kunden gestrichen (Feedback-Folie 9): der Baustein waere auf allen fuenf Produktseiten wortgleich und die Seite wirkte kuenstlich befuellt. Das Markup ist mit entfernt. Falls es zurueckkommt: die Bauform steckt in components/bildband.css, das Band muss nicht neu gebaut werden. Was hier stand, war die vierte fast wortgleiche Kopie dieser Bauform - genau deshalb gibt es das Bauteil. ========================================================================== */ /* ========================================================================== 5. Die anderen Sorten Produktkarten der Startseite, unveraendert wiederverwendet - deshalb laedt die Seite jetzt auch sections/produkte.css. Vier Karten statt fuenf, das Raster der Startseite traegt variable Anzahl. ========================================================================== */ .psorten { background: var(--bg-page); padding-block: var(--sp-sektion); } .psorten .prod__grid { margin-top: var(--sp-7); } /* VIER SPALTEN, EINE REIHE. Kundenwunsch vom 02.09.2026, Feedback-Folie 11: "Nur die vier Packshots nebeneinander, damit Produkt im Fokus". Das ersetzt das 2x2-Raster vom 27.08.2026, das ebenfalls ein Kundenwunsch war. Damals stand der Text neben dem Bild, weil zwei Spalten viel Breite je Karte liessen. Bei vier Spalten sind es rund 320 px je Karte - da ist nebeneinander kein Platz mehr, und die Karte kehrt in die Bauform der Startseite zurueck: Bild oben, Text darunter. Deshalb entfallen hier alle Ueberschreibungen an .prod__card, .prod__media und .prod__body; das Bauteil traegt diese Form von sich aus. NOCH NICHT ERFUELLT: der Wunsch heisst "Packshots", also freigestellte Flaschen. Im Bestand liegt genau einer. Hier stehen weiter die Lifestyle-Aufnahmen mit Flasche im Bild - die Anordnung stimmt, das Motiv noch nicht. Gemeldet, siehe korrekturen-kunde-260902.md Abschnitt B. KEIN KARUSSELL, obwohl der Kunde danach fragt. Vier Karten passen nebeneinander, ab 64rem in zwei Reihen, darunter untereinander. Ein Karussell wuerde drei von vier Sorten verstecken und lohnt erst, wenn es mehr werden. Alles unter .psorten gescopet: die Karten der Startseite bleiben unberuehrt, dort gibt es kein .psorten. */ .psorten .prod__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 64rem) { .psorten .prod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 34rem) { .psorten .prod__grid { grid-template-columns: minmax(0, 1fr); } } /* Ken Burns in der Hero: am 27.08.2026 gebaut und auf Kundenwunsch am selben Tag wieder entfernt - die Bewegung passte nicht zu einem Standbild mit Produkt. Auf der Startseite bleibt sie, dort ist sie der Ersatz, wenn kein Videofile liegt. Die Hero der Unterseiten steht still. */ /* ========================================================================== HIER STANDEN DIE REGELN DES GESCHMACKSPROFILS - drei Achsen mit benannten Endpunkten (.pgesch, __titel, __liste, __achse, __was, __wert, __bahn, __bahn::before, __marke, __pole). Vom Kunden gestrichen, Folie 6, umgesetzt am 04.09.2026. Es war ein Agenturvorschlag vom 27.08.2026, und seine Einstufungen waren aus den Beschreibungstexten abgeleitet, nicht bestaetigt - ohne Bestaetigung war es ein Vergleichsmerkmal, das nichts vergleicht. RESTLOS ENTFALLEN, weil der Baustein keine zweite Verwendung hatte. Zwei Kopfkommentare sind mit heraus, der zweite hatte den ersten ohnehin ueberholt. Die Begruendung fuer den Aufbau steht in werkzeug/vorlage-ableiten.py, falls er zurueckkommt. ========================================================================== */ /* --- Fussnote im Produktkopf ------------------------------------------- Fuer Aussagen mit Stern. Heiss braten traegt "spritzt weniger*", und der Stern muss dort aufgeloest werden, wo die Aussage steht - nicht in einem Reiter, den man erst aufklappen muss. Auf dem Etikett steht die Fussnote ebenfalls direkt auf der Flasche. Kleiner und stiller als der Fliesstext: sie ist Pflichtangabe, nicht Verkaufsargument. Aber --text-muted, nicht heller - eine Fussnote, die man nicht lesen kann, erfuellt ihren Zweck nicht. Nur wo es etwas zu erklaeren gibt: der Erzeuger laesst das Element weg, wenn das Feld leer ist. Ein leerer Absatz waere sonst ein Loch im Raster. */ .pkopf__fussnote { max-width: 34rem; margin: var(--sp-4) 0 0; font-size: var(--fs-100); line-height: var(--lh-body); color: var(--text-muted); } /* --- Werbeueberschrift und Fliesstext im Produktkopf -------------------- Kundenkorrektur P7 vom 02.09.2026, Folie 5: der Kunde hat fuer nussig-fein eine Ueberschrift, einen Einfuehrungstext und drei Stichpunkte geliefert. .pkopf__claim ist eine H2, nicht die H1. Die H1 traegt weiter den Produktnamen - Entscheidung vom 27.08.2026, und sie gilt weiter: "Der kaltgepresste Allrounder" ist ein Versprechen, kein Name, und als H1 verschwaende es die wichtigste Ueberschrift der Seite. KEINE Grafolita: die Schreibschrift steht schon in der Zeile darueber. Zwei Schreibschriftzeilen uebereinander lesen sich als Ornament. HIER STAND EIN ZWEITER BAUSTEIN .pkopf__text fuer einen geteilten Text. Zurueckgenommen am 04.09.2026: die Folie zeigt EINEN durchlaufenden Absatz, und den traegt .pkopf__lead. Ein Baustein weniger. */ .pkopf__claim { font-family: var(--font-body); font-size: var(--fs-500); /* VON 700 AUF 400, 10.09.2026. Kundenwunsch zum Claim: "Dieser Text sollte etwas duenner sein!" GEMESSEN, NICHT GESCHAETZT: der Entwurf auf Folie 1 wurde bei 200 dpi abgetastet und das Verhaeltnis Stegbreite zu Tintenhoehe bestimmt - es ist unabhaengig von der Abbildungsgroesse und damit vergleichbar. Entwurf des Kunden 0,1087 (Steg 5 px, Tintenhoehe 46 px) unser Gewicht 400 0,1075 unser Gewicht 500 0,1170 unser Gewicht 600 0,1383 unser Gewicht 700 0,1684 <- der alte Wert 400 trifft den Entwurf auf ein Prozent. 500 ist bereits acht Prozent fetter als die Vorlage. Falls 400 im Satz zu leicht wirkt, ist 500 die Zwischenstufe - das ist eine Geschmacksfrage, keine Messfrage. */ font-weight: 400; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); /* NICHT MEHR MARKENBLAU, 10.09.2026. Kundenhinweis: "Kann diese nicht heller wie die Stichpunkte darunter, weil man keinen Unterschied zu nussig-fein erkennt!" GEMESSEN UND BESTAETIGT: die Sortenzeile darueber stand auf #0c243e bei 40 px und Gewicht 400, der Claim auf #0c243e bei 28 px und Gewicht 400 - gleiche Farbe, gleiches Gewicht, unterschieden nur durch die Groesse. Seit der Claim am selben Tag von 700 auf 400 heruntergesetzt wurde, trennt die beiden Zeilen nichts mehr ausser 12 px Schriftgroesse. JETZT --text-body, derselbe Ton wie die Stichpunkte darunter (#1d1d1b, 16,88:1). Damit endet die blaue Zone bei der Sorte, und der Claim gehoert sichtbar zur Textzone - was er inhaltlich auch ist, ein Versprechen und kein Namensteil. WIDERSPRUCH ZUR REGEL "jede Ueberschrift ist Markenblau", und der ist bewusst: der Claim ist die einzige Ueberschrift, die direkt unter einer zweiten Ueberschrift derselben Farbe steht. Am 10.09. hatte ich zunaechst "Blau lassen" empfohlen und die Frage auf das falsche Element bezogen. Siehe P24 in checkliste-korrekturen.md. */ color: var(--text-body); margin: 0 0 var(--sp-3); max-width: 32rem; text-wrap: balance; } /* --- Rezeptraster dieser Seite: ABSICHTLICH KEINE EIGENE REGEL ------------ */ /* Bis 10.09.2026 stellte css/components/bezugsquellen.css hier .rez__grid auf feste 24rem-Spalten um, mit der Begruendung: bei nur zwei Rezepten waere die dritte Spalte leer und der Block sae aus wie ein Fehler. GEMESSEN, und die Begruendung stimmt nicht. Zwei Karten a 384px in einem 1152px breiten Inhaltsbereich lassen rechts 411px frei - mit fester Spaltenbreite genauso wie mit dem gleichmaessigen fr-Raster der Sektion. Der Unterschied zwischen beiden Fassungen betraegt drei Pixel Kartenbreite, 384 gegen 387. Das Loch ist nicht die Folge des Rasters, sondern der Zahl der Rezepte. Dazu kam: die Regel lud auf dieser Seite an Position 12, die Sektion an 14 - sie hat hier also nie gewirkt. Was der Kunde auf den Produktseiten abgenommen hat, ist das fr-Raster der Sektion. Genau das steht jetzt hier, ohne Zutun. Falls das Loch bei zwei Rezepten stoeren soll, ist das eine Gestaltungsfrage und keine CSS-Frage: ein drittes Rezept verlinken, oder fuer diese Seiten bewusst zwei breitere Spalten beschliessen. Beides gehoert entschieden, nicht heimlich ueberschrieben. */