/* ========================================================================== /produkte/ - Produktuebersicht Angelegt am 29.08.2026. KEINE NEUE FORMENSPRACHE. Die Produktkarte kommt unveraendert aus sections/produkte.css, dieselbe wie auf der Startseite - nur ein Absatz mehr je Karte. Der Rest sind Ableitungen: .pukopf von .hekopf (/herstellung/) .pukern von .heschael (blaues Band mit gerichtetem Verlauf) .puwofuer von .hesicher (Kartenreihe) .puwege von .hewege ========================================================================== */ /* --- Kopf ---------------------------------------------------------------- */ .pukopf { position: relative; z-index: 0; overflow: hidden; background: var(--bg-page); /* Der Bogen traegt die Farbe der Sektion darunter - .pusicht ist weiss. */ --schwung-grund: var(--surface); } .pukopf__media { position: absolute; inset: 0; overflow: hidden; } .pukopf__media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 42%; display: block; } .pukopf__media::after { content: ""; position: absolute; inset: 0; /* Seit dem 29.09.2026 ein Verlauf fuer alle Koepfe, siehe tokens.css. */ background: var(--motiv-schleier); } .pukopf__inner { position: relative; display: grid; align-content: center; min-height: 34rem; padding-block: var(--sp-9) calc(var(--sp-9) + 2rem); } .pukopf__body { max-width: 34rem; } .pukopf__label { margin: 0 0 var(--sp-4); font-size: var(--fs-100); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } .pukopf__lead { max-width: 30rem; margin: var(--sp-5) 0 0; font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-body); } /* AM TELEFON WIE DIE ANDEREN UNTERSEITEN, Zuruf vom 29.09.2026: Motiv oben in fester Hoehe mit weichem Abschluss, Text darunter. Bis dahin lag der Text auch am Telefon auf dem Rapsfeld, lesbar nur ueber den seitlichen Schleier. .pukopf ist eine Kopie aus der Zeit vor dem Bauteil .bogenhero (components/bogenhero.css) und hatte dessen Regel vom 21.09.2026 nicht mitbekommen. Dieselben Werte und Masse wie dort; AM RECHNER BLEIBT ALLES, wie es abgenommen ist. */ @media (max-width: 59.999rem) { .pukopf__media { position: relative; height: var(--motiv-hoehe-unter); min-height: var(--motiv-hoehe-unter-min); inset: auto; } .pukopf__media::after { background: var(--motiv-verlauf); } .pukopf__body { max-width: none; } .pukopf__lead { max-width: 40rem; } .pukopf__inner { align-content: start; align-items: start; padding-top: var(--sp-7); min-height: 0; padding-bottom: calc(min(6.25vw, 6rem) + clamp(var(--sp-5), 6vw, var(--sp-8))); } } /* --- Die Sorten ---------------------------------------------------------- */ .pusicht { background: var(--surface); padding-block: var(--sp-sektion); } /* FUENF SPALTEN, EINE REIHE. Kundenwunsch vom 02.09.2026, Folie 2: "Kann man auf der Übersichtsseite auch alle 5 Produkte nebeneinander darstellen?" Vorher griff das auto-fit des Bauteils und ergab bei 1440 px drei Spalten - also eine Reihe mit drei und eine mit zwei Karten. Genau das Muster, das bei den vier Sorten auf der Produktseite schon als unruhig aufgefallen war. Bei 1208 px Inhaltsbreite bleiben je Karte rund 205 px. Das traegt einen Packshot und einen zweizeiligen Namen, mehr nicht - deshalb bricht es frueh: ab 75rem drei Spalten, ab 48rem zwei, darunter eine. Fuenf Spalten sind die Ausnahme fuer den grossen Bildschirm, nicht die Regel. */ /* FUENF SPALTEN SIND AM 04.09.2026 ENTFALLEN. Der Kunde hat unseren Einwand angenommen: "zu schmal darf es nicht sein". GEMESSEN blieben bei fuenf Spalten 166 px fuer den Namen, und die gelieferten Produktnamen brauchen mehr - "Bio-Sonnenblumenkernoel" allein 254 px. Bei drei Spalten sind es 331 px, und alle fuenf Namen stehen ungetrennt. Vergleich, alles bei 1440 px gemessen: 5 Spalten 216 px Karte 166 px Name Namenszeilen 2,2,2,2,3 4 Spalten 278 px Karte 228 px Name Namenszeilen 2,2,2,2,3 3 Spalten 381 px Karte 331 px Name Namenszeilen 2,2,2,2,2 Vier Spalten haetten also nichts geloest - der lange Name bricht dort weiter. Erst drei reichen. UNTER 48rem WIRD DAS RASTER EINE WISCHBAHN, ebenfalls Kundenwunsch. Fuenf Karten a 606 px uebereinander sind auf dem Telefon rund 3000 px Scrollweg; als Bahn ist es eine Wischgeste. Dasselbe Markup traegt beides, js/slider.js blendet Punkte und Pfeile selbst ein und aus. */ .pusicht .prod__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 75rem) { .pusicht .prod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 48rem) { .pusicht .prod__grid { /* Keine Spaltenvorgabe mehr, sonst rechnet das Raster weiter in Spalten statt in einer Bahn. */ grid-template-columns: none; grid-auto-flow: column; /* 82 Prozent: die naechste Karte lugt herein und zeigt, dass es weitergeht. Bei 100 Prozent sieht die Bahn aus wie eine Einzelkarte. */ grid-auto-columns: 82%; grid-auto-rows: auto; /* 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 eine Trackpad-Geste haengt sich an ihr auf, statt die Seite zu scrollen. Dieselbe Falle wie bei .pverw__grid, dort ist sie ausgemessen dokumentiert. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* Die Bahn liegt in .wrap; ohne den negativen Rand endete sie am Seitenraster und die letzte Karte wirkte abgeschnitten statt angeschnitten. */ margin-inline: calc(var(--wrap-pad) * -1); padding-inline: var(--wrap-pad); scroll-padding-inline-start: var(--wrap-pad); } .pusicht .prod__grid::-webkit-scrollbar { display: none; } .pusicht .prod__card { scroll-snap-align: start; } } .pusicht__ueber { margin-bottom: var(--sp-8); } /* Ein Absatz mehr als auf der Startseite: dort ist die Karte ein Anreisser, hier die Uebersicht. Groesse und Farbe wie .prod__claim, nur nicht fett. */ /* VIER ANPASSUNGEN AN DER PRODUKTUEBERSICHT, Kundenwunsch vom 03.09.2026. Alle vier nur hier gescopet - auf der Startseite stehen dieselben Karten breiter und in drei Spalten, dort tritt keines der Probleme auf. 1. ANWENDUNGSZEILE IMMER ZWEIZEILIG. "KALT, WARM & HEISS" passt in eine Zeile, "BACKEN & VERFEINERN" braucht zwei - dadurch begannen die Produktnamen auf verschiedenen Hoehen, gemessen 30 px Versatz. Eine Mindesthoehe von zwei Zeilen richtet sie aus, ohne die kurzen Zeilen umbrechen zu muessen. Zuerst hatte ich das gerechnet: 2 x --lh-snug x --fs-100 ergibt 33,8 px. Gemessen sind zwei Zeilen aber 43 px hoch - die Zeilenhoehe kommt hier nicht aus --lh-snug. Statt den Wert nachzurechnen nimmt die Regel jetzt die Einheit, die genau eine Zeilenhoehe IST: 2lh. Damit stimmt es auch, wenn sich Schriftgroesse oder Zeilenabstand spaeter aendern. Die calc-Zeile darueber bleibt als Rueckfall fuer Browser ohne lh - sie richtet nicht ganz aus, ist aber besser als nichts. */ .pusicht .prod__use { min-height: calc(2 * var(--lh-snug) * var(--fs-100)); min-height: 2lh; } /* 2. SUBLINE KRAEFTIGER. Sie stand auf 400 wie der Fliesstext darunter und war dadurch nicht als eigene Ebene erkennbar. 600 statt 700, weil 700 mit dem Produktnamen darueber konkurrieren wuerde. 3. MEHR ABSTAND ZUM FLIESSTEXT: der Abstand lag bei --sp-3 (12 px) und damit auf demselben Wert wie der Zeilenabstand im Text - die beiden Bloecke lasen als einer. DER FLIESSTEXT IST AM 04.09.2026 ENTFALLEN, Kundenwunsch: die Karte traegt nur noch Anwendung, Name und Subline. Der Kunde hat unseren Einwand zur Fuenfspaltigkeit angenommen und die Enge dadurch geloest, dass der Absatz wegfaellt - er war das Einzige, was bei 216 px Kartenbreite wirklich gelitten hat, mit Zeilen von rund 20 Zeichen. Die zugehoerige Regel ist geloescht, nicht auskommentiert. */ /* Die Variantenzeile ist am 04.09.2026 ins Bauteil gewandert (sections/produkte.css): seit die Kundentexte ueberall gelten, tragen alle Produktkarten Name und Variante - Startseite, Uebersicht und die vier weiteren Sorten auf der Detailseite. HIER BLEIBT NUR hyphens: manual. Die Trennstellen stehen als ­ im Markup, und in der Wischbahn braucht es sie: GEMESSEN sind die Karten dort bei 390 px Schirm 287 px breit, es bleiben 239 px fuer den Namen, und "Bio-Sonnenblumenkernoel" braucht 277. Ohne manual traennte der Browser zusaetzlich an eigenen Stellen. DIE 22-px-AUSNAHME IST ENTFALLEN. Sie stand hier, weil in der Fuenftelspalte nur 166 px fuer den Namen blieben und "Bio-Rapskernoel" 167 braucht. Mit drei Spalten sind es 331 px - der Grund ist weg, und die Karte liest wieder wie die auf der Startseite. */ .pusicht .prod__name { hyphens: manual; } .pusicht .prod__claim { font-weight: 600; color: var(--text-body); } /* --- Was hast Du vor ----------------------------------------------------- */ .puwofuer { background: var(--bg-soft); padding-block: var(--sp-sektion); } .puwofuer__ueber { margin-bottom: var(--sp-8); } /* POLSTER OBEN, damit die Flaschenhaelse aus der Karte laufen koennen. ZWEITER ANLAUF: erst hingen die Gruppenbilder nach LINKS ueber die Karte, wie auf Folie 3 gezeichnet. Am Bildschirm war das nicht gut - bei der dritten Karte mit nur einer Flasche stand die Flasche fast vollstaendig ausserhalb, und der Text wurde in eine schmale Spalte gedraengt. Jetzt steht das Bild OBEN, der Text darunter ueber die ganze Kartenbreite, und die Haelse ragen nach oben heraus. Wunsch vom 04.09.2026. Der Raum fuer den Ueberhang steht HIER am Raster, nicht als negativer Rand ohne Gegenstueck: so kann kein Bild aus der Sektion laufen, und der Abstand zur Ueberschrift bleibt derselbe wie vorher. */ .puwofuer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); /* DER ZEILENABSTAND MUSS DEN UEBERHANG TRAGEN. Das Gruppenbild ragt oben aus seiner Karte heraus - das ist Absicht, aber es ragt eben auch in den Abstand darueber. GEMESSEN am 21.09.2026 bei 390 px: die Flaschen der unteren Karte lagen 4 px auf der oberen, weil der Abstand 24 px betrug und das Bild 28 px hoch hinausragte. Bei 768 px waren es 24 px Ueberlappung. DIE RECHNUNG: sichtbare Luft = Zeilenabstand minus (Ueberhang minus Innenabstand der Karte). Mit dem Ueberhang als Zeilenabstand bleiben genau die 24 px Luft, die auch zwischen den Spalten stehen - und wer den Ueberhang aendert, aendert beides zugleich. */ --gruppe-hang: 4.5rem; column-gap: clamp(var(--sp-5), 3vw, var(--sp-6)); row-gap: var(--gruppe-hang); padding-top: 3rem; /* align-content: start - der Fehler, der in diesem Projekt viermal entstanden ist. */ align-content: start; } /* Bild oben, Text darunter. Einspaltig, also braucht es weder Flex noch Rasterspalten - der Umbau von links nach oben hat die Karte einfacher gemacht, nicht komplizierter. */ .puwofuer__fall { display: grid; /* 32 px zwischen Flasche und Ueberschrift, Wunsch vom 04.09.2026. Vorher 20 px, und da klebte die Ueberschrift am Flaschenfuss - der Packshot hat unten keine eigene Luft, weil er auf den Inhalt zugeschnitten ist. */ gap: var(--sp-6); align-content: start; padding: var(--sp-5); background: var(--surface); border-radius: var(--r-card); } /* Der Textblock, ueber die ganze Kartenbreite. */ .puwofuer__body { display: grid; gap: var(--sp-3); align-content: start; } /* DIE HOEHE IST DER DECKEL, die Breite folgt. Die drei Bilder sind auf gleiche Flaschenhoehe normiert (1331 px, siehe werkzeug/gruppenbilder-normieren.js), also sind bei gleicher CSS-Hoehe auch die Flaschen gleich gross - unabhaengig davon, ob eine oder zwei im Bild stehen. Der negative Rand ist genau das Polster des Rasters. */ /* DER HALS LAEUFT AUS DER KARTE. Das Bild ist 220 px hoch und wird um 72 px nach oben gezogen; die Flasche steht also mit rund einem Drittel ueber der Kartenkante, und das ist genau die Hoehe von Deckel und Hals. Gerechnet, nicht geraten: 72 px sind die 3rem Polster des Rasters plus die 24 px Kartenpolster - der Ueberhang endet damit genau an der Oberkante des Rasters und nicht irgendwo. width: auto, die Hoehe ist der Deckel: die drei Bilder sind auf gleiche Flaschenhoehe normiert (1331 px, siehe werkzeug/gruppenbilder-normieren.js), also stehen bei gleicher CSS-Hoehe auch die Flaschen gleich gross da - egal ob eine oder zwei im Bild sind. LINKSBUENDIG MIT DEM TEXT, Wunsch vom 04.09.2026. Zuerst stand die Flasche mittig - bei drei Karten mit einer, zwei und zwei Flaschen sassen die Gruppen dadurch an drei verschiedenen Stellen, und keine stand auf der Textkante. Links greift die Flasche die Kante von Ueberschrift, Text und Links auf, und die Karten wirken als Reihe. */ .puwofuer__gruppe { height: 13.75rem; width: auto; /* Eine Zahl, zwei Wirkungen: der Zug nach oben und der Zeilenabstand darueber, siehe --gruppe-hang am Raster. */ margin-top: calc(var(--gruppe-hang) * -1); justify-self: start; } /* Auf dem Telefon steht nur eine Karte je Reihe und die Flaschen wirken gross. Kleiner, und der Ueberhang entsprechend flacher. */ @media (max-width: 34rem) { .puwofuer__grid { padding-top: 2.25rem; --gruppe-hang: 3.25rem; } .puwofuer__gruppe { height: 10rem; } } /* HIER STANDEN DIE REGELN VON .puwofuer__zeichen - ein goldenes Icon je Karte (Blatt, Flamme, Topf). Vom Kunden gestrichen am 04.09.2026, als die Packshots nach oben kamen: mit dem Gruppenbild ueber dem Titel sagt die Karte schon, um welche Oele es geht, und das Icon war die dritte Aussage auf derselben Flaeche. */ .puwofuer__titel { margin: 0; font-size: var(--fs-400); font-weight: 700; color: var(--toem-blau); } .puwofuer__text { margin: 0; font-size: var(--fs-300); line-height: var(--lh-body); color: var(--text-muted); } /* PACKSHOT VOR DEM NAMEN. Kundenwunsch vom 02.09.2026, Folie 3: "Packshots ergänzen, damit klarer ist, welches Produkt gemeint ist." Die Liste nannte vorher nur Namen, und "Heiß Braten" sagt nicht, welche Flasche gemeint ist. Klein gehalten: 2,5rem hoch, also etwa Zeilenhoehe mal zwei. Die Flasche ist hier ein Erkennungszeichen neben dem Namen, nicht die Abbildung - die grossen Packshots stehen eine Sektion darueber. alt="" mit Absicht: der Name steht direkt daneben, das Bild wuerde ihn nur doppeln. */ /* DER PFEIL STEHT IM TEXTFLUSS, nicht als Flex-Geschwister. Vorher war er ein eigenes Kind des Links; bei einem umbrechenden Namen wie "Bio-Sonnenblumenkernöl heiß braten" blieb er dann am rechten Rand stehen und sah abgetrennt aus. display: inline MUSS dazu. Ohne diese Zeile landete der Pfeil im Span auf einer eigenen Zeile unter dem Namen - gemessen, und schlechter als der Zustand vorher. Woher der Blockcharakter kam, habe ich nicht abschliessend geklaert; base.css setzt an svg nur Breite und Hoehe. Die Regel behebt es zuverlaessig, die Ursachensuche waere hier Aufwand ohne Nutzen. */ .puwofuer__liste a svg { display: inline; vertical-align: -0.15em; margin-left: 0.25em; } /* HIER STAND .puwofuer__pack - kleine Packshots von 40 px vor jedem Produktnamen, Kundenwunsch vom 02.09.2026. Ersetzt am 04.09.2026 durch die Gruppenbilder links an der Karte: der Kunde hat Bilder geliefert, auf denen die Flaschen einer Gruppe zusammen stehen, und die loesen dieselbe Aufgabe besser - man sieht die Gruppe als Gruppe statt zwei Miniaturen. */ .puwofuer__liste { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); } .puwofuer__liste a { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-300); font-weight: 600; color: var(--toem-blau); text-decoration: none; } /* flex: none, sonst wird das Zeichen bei langen Sortennamen gestaucht - der Fall ist in pages/karriere.css bei .stdbewerb__mail dokumentiert. */ .puwofuer__liste svg { flex: none; width: var(--zeichen-inline); height: var(--zeichen-inline); } .puwofuer__liste a:hover svg, .puwofuer__liste a:focus-visible svg { translate: var(--sp-2) 0; } .puwofuer__liste svg { transition: translate var(--dur-hover) var(--ease-hover); } /* --- Der Kern ------------------------------------------------------------ */ /* Bauform von .heschael. DUPLIKAT, gemeldet: dieselbe Bauform steht jetzt in pages/produkt.css (.pschael), pages/karriere.css (.kaabbinder), pages/herstellung.css (.heschael) und hier. VIER Kopien - das gehoert nach components/, und zwar bald. */ .pukern { position: relative; overflow: hidden; background: var(--toem-blau); 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 1:1 auf Blau (gemessen 24.09.2026). */ .pukern :focus-visible { outline-color: var(--toem-gold); } .pukern__media { position: absolute; inset: 0; } .pukern__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; } .pukern__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(12, 36, 62, 0.95) 0%, rgba(12, 36, 62, 0.92) 40%, rgba(12, 36, 62, 0.76) 62%, rgba(12, 36, 62, 0.58) 100%); } .pukern__inner { position: relative; } .pukern__title { max-width: 46rem; color: var(--on-blau-1); } .pukern__title em { color: var(--toem-gold); } .pukern__text { margin: var(--sp-5) 0 0; max-width: 46rem; font-size: var(--fs-300); line-height: var(--lh-body); } .pukern__aktion { margin: var(--sp-6) 0 0; } .pukern__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(--toem-gold); text-decoration: none; } .pukern__weg svg { flex: none; transition: translate var(--dur-hover) var(--ease-hover); } .pukern__weg:hover svg { translate: var(--sp-2) 0; } /* --- Weiter -------------------------------------------------------------- */ .puwege { background: var(--bg-soft); padding-block: var(--sp-sektion); } .puwege__title { margin-bottom: var(--sp-8); } .puwege__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--sp-5), 3vw, var(--sp-6)); align-content: start; } @media (max-width: 56rem) { .puwege__grid { grid-template-columns: minmax(0, 1fr); } }