/* -------------------------------------------------------------------------- Sektion 3: Produkte DYNAMISCH - Query auf CPT 'produkt'. Einstieg, kein Katalog. Mapping: template-parts/produkte.php ACF pro Produkt: sorte (text), claim (text), anwendung (text), bio (true/false), flasche (image), farbe_deckel (color) Das Grid traegt variable Anzahl (auto-fit) - der Kunde legt Produkte selbst an, es duerfen also auch 4 oder 8 sein. Nicht auf 5 festlegen. -------------------------------------------------------------------------- */ /* WEISS SEIT 25.09.2026: die Sektion steht jetzt direkt unter der Hero, deren Wellenfront in --bg-page auslaeuft (siehe usp.css). Die Karten tragen Rand und Schatten und stehen auch auf Weiss. */ .prod { background: var(--bg-page); padding-block: var(--sp-sektion); } .prod__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5); margin-bottom: clamp(var(--sp-7), 5vw, var(--sp-8)); } .prod__intro { max-width: 40rem; } /* Textlink statt Button: die Sektion ist Einstieg, der Katalog liegt dahinter */ .prod__all { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.03em; color: var(--toem-blau); padding: var(--sp-3) 0; min-height: 2.75rem; white-space: nowrap; transition: color var(--dur) var(--ease); } /* Textlinks mit Pfeil tragen ohne Unterstrich - der Pfeil markiert sie ausreichend. Beim Hover wandert er, das ersetzt die Linie als Signal. */ .prod__all:hover, .prod__all:focus-visible { color: var(--toem-gold); } .prod__all svg { transition: transform var(--dur-hover) var(--ease-hover); } .prod__all:hover svg, .prod__all:focus-visible svg { transform: translateX(3px); } .prod__all svg { width: var(--zeichen-inline); height: var(--zeichen-inline); } .prod__grid { display: grid; /* Drei Spalten: Imagebilder brauchen Flaeche, damit die Szene lesbar bleibt. auto-fit haelt das Layout bei abweichender Produktanzahl stabil - der Kunde pflegt die Produkte selbst. */ grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); /* Gleiche Reihenhoehen: sonst wird die zweite Reihe kuerzer, weil die Claims dort weniger Zeilen brauchen. */ grid-auto-rows: 1fr; gap: clamp(var(--sp-5), 3vw, var(--sp-6)); } /* Karte: Imagebild oben, Text darunter. Ganzflaechig verlinkt. Der Sortenstreifen oben traegt die Farbe der Verpackung - Wiedererkennung ohne Erklaerung. Farbe kommt aus ACF, Fallback ist Markenblau. */ .prod__card { position: relative; display: flex; flex-direction: column; background: var(--surface); /* Kante zurueck. In V3 lag die Karte weiss auf Grau und der Schatten genuegte; auf weissem Grund verschwindet sie ohne Rahmen. Der Keil in den Rundungen, der frueher gegen einen Rahmen sprach, tritt nicht mehr auf: die Sortenfarbe liegt seit dem Umbau als border-top am Textblock mitten in der Karte und nicht mehr an einer gerundeten Ecke. */ border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-karte); transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); } /* Die Sortenfarbe sitzt jetzt ZWISCHEN Bild und Text, nicht mehr als Band an der Kartenoberkante. Uebernommen aus der zweiten Designlinie: dort liest sich die Linie als Abschluss des Bildes und als Auftakt der Bildunterschrift, waehrend sie oben auf der Karte nur ein Farbstreifen war. Als border-top am Textblock ist das unproblematisch, weil die Linie mitten in der Karte liegt und keine Rundung beruehrt - genau dort war der frueher noetige Umweg ueber ein Pseudo-Element begruendet. --sorte kommt als Inline-Custom-Property vom Element. */ .prod__card:hover, .prod__card:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-2); } .prod__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-platzhalter); } .prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-media) var(--ease-media); } .prod__card:hover .prod__media img, .prod__card:focus-visible .prod__media img { transform: scale(var(--zoom-media)); } /* ========================================================================== Packshot-Variante der Karte ========================================================================== Kundenwunsch vom 02.09.2026, Folien 2 und 11: "Nicht die Moodbilder, sondern nur Packshots, damit Produkte mehr im Vordergrund" und "Nur die Packshots nebeneinander, damit Produkt im Fokus". ALS MODIFIKATOR, nicht als Aenderung am Bauteil: die Startseite zeigt weiter die Lifestyle-Aufnahmen. Dort hat der Kunde nichts geaendert gewuenscht, und ein Packshot-Raster als Einstieg waere ein Katalog. DREI DINGE MUESSEN ANDERS SEIN als beim Moodbild: 1. HOCHKANT statt 4:3. Die Packshots sind 1086x1448, also 3:4. In einem Querformat mit object-fit: cover wuerde die Flasche oben und unten abgeschnitten - genau das Gegenteil von "Produkt im Fokus". 2. contain statt cover. Eine Flasche darf nicht beschnitten werden. 3. WEISSER GRUND statt --bg-platzhalter. Die Packshots sind auf Weiss freigestellt; ein grauer Kasten darum ergaebe eine sichtbare Kante. Sie tragen keine Transparenz, deshalb muss der Grund passen. */ .prod__grid--pack .prod__media { aspect-ratio: 3 / 4; background: var(--surface); } .prod__grid--pack .prod__media img { object-fit: contain; /* Etwas Luft, damit die Flasche nicht an der Kante klebt. */ padding: var(--sp-4); box-sizing: border-box; } .prod__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); border-top: 3px solid var(--sorte, var(--toem-blau)); } /* Dreistufige Bildunterschrift aus der zweiten Designlinie: kleine Versalzeile in Gold, darunter der Name deutlich groesser, darunter der Claim kleiner und gedaempft. Vorher lagen Name und Claim nur eine Stufe auseinander, dadurch las sich der Block als Aufzaehlung. */ .prod__use { font-size: var(--fs-100); /* Die zweite Linie hatte hier 600. Von Ofelia Text liegen 300, 400, 500 und 700 im Dokument; 600 wuerde der Browser auf 700 hochziehen und die Zeile zu schwer machen. 500 kommt der Wirkung naeher. */ font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; /* SORTENFARBE, nicht Gold. Wunsch vom 04.09.2026: "Die Farbigkeit der Anwendungen aus dem Dropdown uebernehmen" - dort traegt dieselbe Zeile schon die Sortenfarbe (components/header.css, .navprod__use). GEMESSEN IST DAS AUCH LESBARER, in jedem einzelnen Fall. Kontrast auf Weiss: Gold 2,00:1, Markenblau 15,70:1, Braten 10,20:1, Bio 7,98:1, Butter 3,24:1. Die schwaechste Sortenfarbe liegt also ueber dem bisherigen Gold, und drei von vier erfuellen AA fuer Kleintext. OFFEN, in der Checkliste vermerkt: Butter (#b8862a) haelt 3,24:1 und bleibt damit unter den 4,5:1, die WCAG fuer Text dieser Groesse fordert. #996f23 - derselbe Farbton, 12 Prozent dunkler - erreicht 4,51:1. Das ist eine Aenderung an der Sortenpalette und keine am Gold, deshalb fragen wir sie beim Kunden nach statt sie zu setzen. Rueckfall Gold, falls eine Karte kein --sorte traegt: dann sieht die Zeile aus wie zuvor und verschwindet nicht. */ color: var(--sorte, var(--toem-gold)); margin: 0 0 var(--sp-3); /* ZWEI ZEILEN RESERVIERT, wie im Dropdown. Bricht die Anwendungszeile zweizeilig, rutschen Name und Subline dieser einen Karte nach unten und die Reihe steht nicht mehr auf einer Linie. GEMESSEN auf der Startseite bei 1024 px: die Namen einer Reihe standen bei 280 und 302 px, weil "Backen, braten & verfeinern" dort umbrach. Der Kunde hat genau das im Dropdown beanstandet; hier liegt es unter dem Bild und faellt schwaecher auf, ist aber derselbe Fehler. KOSTET EINE ZEILE LUFT bei den einzeiligen Karten. Das ist der Preis dafuer, dass die Reihe auf jeder Breite haelt - und Luft unter dem Packshot stoert weniger als eine verrutschte Reihe. lh ist die genaue Einheit, die em-Zeile darueber der Rueckfall. */ min-height: 2.7em; min-height: calc(2 * 1lh); } /* SILBENTRENNUNG. Gemessen am 03.09.2026, als die Uebersicht auf fuenf Spalten ging: bei 216 px Kartenbreite bleiben 168 px fuer den Namen, und "Buttergeschmack" braucht 195 px - 29 px liefen aus der Karte heraus. Die Seite fuehrt lang="de", der Browser trennt also nach deutschen Regeln ("Butter-geschmack"). overflow-wrap faengt den Fall ab, in dem kein Trennpunkt passt. Greift nur, wenn es eng wird: auf der Startseite mit breiteren Karten aendert sich dadurch nichts. Deshalb am Bauteil und nicht am Modifikator - das Problem kann an jeder engen Stelle wiederkommen. */ .prod__name { hyphens: auto; overflow-wrap: break-word; /* 24px. Der Wert stand in V3 auf 22px, weil Ofelia rund 25 % breiter lief als die Vorlage und die Rasterkarten nur 374px breit sind. Mit Figtree faellt dieser Aufschlag weg, deshalb seit V4 wieder 24px. Gemessen bleibt "Buttergeschmack" damit einzeilig. Denselben Wert traegt seit der Umstellung auch .prod__action__title - beide Kacheln lesen damit gleich. */ font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--toem-blau); margin: 0 0 var(--sp-2); } /* NAME UND VARIANTE IN ZWEI ZEILEN. Kundentexte vom 04.09.2026: die Produkte heissen vollstaendig "Rapskernoel nussig-fein", "Bio-Sonnenblumenkernoel heiss braten". In einer Zeile trennt der Browser sie an der bequemsten Stelle - GEMESSEN wurde daraus "Butterge-schmack" und "Bio-Rapskern-oel", also "oel" allein in einer Zeile. Die fette Zeile traegt den Namen, die zweite und leichtere die Variante. DAS DROPDOWN MACHT DAS SEIT LANGEM SO (.navprod__name span in components/header.css) - dieselbe Aufteilung, und der Kunde kennt sie. Am Bauteil und nicht an einer Seite, weil alle Produktkarten dieselben Texte tragen: Startseite, Uebersicht, und die vier weiteren Sorten auf der Produktdetailseite. */ .prod__name span { display: block; font-size: var(--fs-400); font-weight: 400; } .prod__claim { font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--text-muted); margin: 0; } /* Aktionskarte an letzter Position. Fuellt bei fuenf Produkten die Luecke der zweiten Reihe und macht daraus einen Weiterweg statt Leerraum. Gefuellt in Markenblau, damit sie sich als Aktion von den Produkten abhebt. Gold traegt hier als Akzent - auf dunklem Blau 7.4:1. */ /* Gleicher Aufbau wie die Produktkarten: Bild oben, Textblock darunter. Nur der Block ist blau statt weiss, das unterscheidet die Aktion vom Produkt. justify-content: center ist entfallen - der Text sitzt jetzt oben im Block, sonst haengt er bei gleicher Kartenhoehe in der Luft. */ .prod__action { display: flex; flex-direction: column; background: var(--toem-blau); border-radius: var(--r-card); overflow: hidden; color: var(--on-blau-1); box-shadow: var(--shadow-karte-dunkel); transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); } /* Der Textblock. Goldene Trennlinie statt einer Sortenfarbe, weil die Karte kein Produkt ist. flex: 1 haelt sie auf Kartenhoehe. */ /* SPALTE, damit die CTA nach unten kann. Kundenwunsch vom 10.09.2026: "Vielleicht das 'Rezepte entdecken' und Pfeil in die rechte untere Ecke, damit der Pfeil immer die gleiche Groesse und Position hat?" Der Body stand auf display: block, dort ist margin-top: auto wirkungslos - dieselbe Sache wie bei .usp__body. */ .prod__action__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5) var(--sp-6); border-top: 3px solid var(--toem-gold); } /* Flacheres Bild als bei den Produkten. Der Grund ist gerechnet, nicht gestalterisch: der Textblock hier traegt vier Zeilen statt drei und ist gemessen 82px hoeher als der der Produktkarten. Weil alle Kacheln im Raster gleich hoch werden, stand dieser Betrag bei den Produktkarten als Leerraum unter dem Claim. Nimmt man dem Bild der Aktionskarte dieselben 82px, gleicht sich das aus: 381px Breite zu 204px Hoehe, also 16:9. Bei geaendertem Text muss dieses Verhaeltnis nachgerechnet werden. */ .prod__action .prod__media { aspect-ratio: 16 / 9; background: var(--toem-blau); } /* Frueher dunkelte die Flaeche beim Hover ab. Mit nur einem Blau ist das nicht mehr moeglich - Schatten und Anheben tragen die Reaktion allein. Dieselbe Sprache wie bei den weissen Karten, nur in der kraeftigeren Schattenstufe: unter einer dunklen Flaeche ist die leichte nicht zu sehen. */ /* PFEIL BEWEGT SICH BEIM HOVER, nachgezogen am 10.09.2026 auf Kundenhinweis: "Bei dieser Card sollte sich der Pfeil beim Hover auch bewegen wie bei den anderen Cards!" Gemessen war die Aktionskarte eine von nur zwei Stellen im Projekt, deren Pfeil stillstand. Dieselben 3 px wie ueberall. Der Pfeil steckt im CTA der Karte, deshalb greift der Selektor an der Karte und trifft jedes arrow-right darin. */ .prod__action svg[data-icon="arrow-right"] { transition: transform var(--dur-hover) var(--ease-hover); } .prod__action:hover svg[data-icon="arrow-right"], .prod__action:focus-visible svg[data-icon="arrow-right"] { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .prod__action svg[data-icon="arrow-right"] { transition: none; } .prod__action:hover svg[data-icon="arrow-right"], .prod__action:focus-visible svg[data-icon="arrow-right"] { transform: none; } } .prod__action:hover, .prod__action:focus-visible { transform: translateY(var(--lift)); box-shadow: var(--shadow-3); } /* Die Abstaende standen vorher als gap am Flexcontainer. Mit dem Bild darueber traegt sie jetzt der Textblock selbst - sonst kleben die vier Zeilen aneinander. */ .prod__action__label { font-size: var(--fs-100); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--toem-gold); margin: 0 0 var(--sp-3); } /* Auf Kundenwunsch Figtree statt Grafolita: dieselbe Schrift wie .prod__name auf den Produktkarten, damit beide Kacheln in einer Reihe gleich lesen. Werte deshalb 1:1 von .prod__name uebernommen - 24px, 700, Zeilenhoehe 1,15. Die Laufweite bleibt geerbt wie dort, das ausdrueckliche letter-spacing: 0 galt nur der Schreibschrift. Das padding-block ist mit weg: es fing Ober- und Unterlaengen von Grafolita ab, Figtree braucht das nicht. Farbe bleibt Weiss - sie kommt von .prod__action und traegt auf TOEM-Blau 15.7:1. */ .prod__action__title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: 0 0 var(--sp-3); } .prod__action__text { font-size: var(--fs-200); line-height: var(--lh-snug); color: var(--on-blau-2); margin: 0 0 var(--sp-4); } /* IN DIE RECHTE UNTERE ECKE, 10.09.2026, damit der Pfeil an derselben Stelle und in derselben Groesse steht wie auf allen anderen Karten. Gemessen war er vorher 18 px gross, 193 px von der rechten und 123 px von der unteren Kante; der Kartenpfeil der Sortenkarten misst 22 px bei 25 und 33 px Abstand. margin-top: auto schiebt die Zeile auf die Grundlinie, align-self: flex-end an die rechte Innenkante. Die Beschriftung bleibt - der Kunde will beides dort haben, nicht nur den Pfeil. */ .prod__action__more { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; align-self: flex-end; font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.03em; color: var(--toem-gold); } /* --zeichen-klein wie der Kartenpfeil, nicht --zeichen-inline: der Pfeil steht hier nicht mehr in einer Textzeile mitten im Absatz, sondern an derselben Stelle wie auf jeder anderen Karte. Gleiche Rolle, gleiche Groesse. */ .prod__action__more svg { width: var(--zeichen-klein); height: var(--zeichen-klein); } /* Fokusring: das dunkle Gold ist auf Blau zu schwach. */ .prod__action:focus-visible { outline-color: var(--toem-gold); } /* Der gruene Bio-Stoerer (.prod__badge) ueber dem Produktbild ist auf Kundenwunsch entfallen. ACHTUNG, das widerspricht dem Projektwissen ("Bio-Badge sichtbar") - die Zeile dort muss nachgezogen werden. Die Kennzeichnung bleibt trotzdem lesbar: beide Produkte heissen "Bio ...", und der Sortenstreifen ueber dem Textblock traegt den gruenen Deckelton. */ @media (max-width: 60rem) { .prod__head { align-items: start; } .prod__grid { gap: var(--sp-4); } } /* EINSPALTIG AB 37.5rem, Kundenkorrektur vom 10.09.2026: "Ich habe schon gesehen, dass auf Mobile auf der Startseite die Card zu den Produkten noch 2-spaltig sind. Die sollten doch einspaltig sein!" HIER STANDEN ZWEI SPALTEN, UND ZWAR ABSICHTLICH - die Begruendung war die Seitenlaenge. Sie war richtig gerechnet und trotzdem die falsche Abwaegung, und das zeigt erst die Messung der TEXTZEILE: Kachel Sektion Zeichen je Claimzeile Namenszeilen 390 px, 2 Spalten 169 1703 px 14 bis 16 3 bis 5 390 px, 1 Spalte 350 3313 px 28 bis 43 3 360 px, 2 Spalten 154 1726 px 11 bis 15 3 bis 5 360 px, 1 Spalte 320 3283 px 22 bis 32 3 14 Zeichen je Zeile ist kein Lesen mehr, das ist Wortstapeln - und ein Produktname ueber FUENF Zeilen ist keine Kachel mehr. Der Gewinn an Seitenlaenge war echt (1610 px, rund 15 Prozent der Seite), aber Scrollen kostet auf dem Telefon wenig und unlesbarer Text kostet viel. EINE DRITTE VARIANTE IST GEPRUEFT UND VERWORFEN: einspaltig im Querformat, Bild links auf 38 Prozent, Text rechts. Sie spart Hoehe (2101 statt 3313 px), loest aber das eigentliche Problem nicht - der Textspalte bleiben dann 217 px, gemessen wieder nur 14 bis 22 Zeichen je Zeile. DIE SCHRIFTVERKLEINERUNGEN SIND MIT RAUS. Sie gab es nur, weil die Kachel 169 px breit war; bei 350 px traegt die Karte die normalen Groessen. Die Polsterung bleibt kleiner, das ist eine Frage des Randes und nicht der Kachelbreite. Damit liest die Startseite sich wie die Produktuebersicht, die unter 30rem ohnehin einspaltig ist (U1). */ @media (max-width: 37.5rem) { .prod__grid { grid-template-columns: 1fr; gap: var(--sp-4); } .prod__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); } .prod__action__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); } } /* Unter 24rem passt die laengste Zeile bei keiner lesbaren Schriftgroesse in eine Zeile. Dort geben wir die festen Umbrueche frei und lassen den Satz normal fliessen - lesbar schlaegt formtreu. */ /* -------------------------------------------------------------------------- Sektion 4: Herstellung STATISCH. Staerkster Differenzierer, deshalb die dunkle Markenflaeche - sie setzt zugleich einen Ruhepunkt zwischen Produkten und Rezepten. Mapping: template-parts/herstellung.php Inhalte in ACF-Options (nicht pro Post), da einmalig auf der Startseite. -------------------------------------------------------------------------- */