/* -------------------------------------------------------------------------- Sektion 5: Rezepte DYNAMISCH - Query auf CPT 'rezept', orderby date DESC, posts_per_page 3. Mapping: template-parts/rezepte.php ACF pro Rezept: bild, dauer (text), kategorie (text), passendes_oel (relation) Aufbau aus der zweiten Designlinie uebernommen: Text steht UNTER dem Bild, nicht darin. Damit faellt der blaue Schleier ueber dem Foto weg - die Motive sind wieder ganz zu sehen. Unterschied zu den Produktkarten bleibt: dort liegt der Text in einer weissen Kartenflaeche, hier direkt auf der Sektionsbahn. -------------------------------------------------------------------------- */ .rez { background: var(--bg-soft); padding-block: var(--sp-sektion); } .rez__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)); } .rez__intro { max-width: 40rem; } .rez__all { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: var(--sp-3) 0; font-size: var(--fs-200); font-weight: 500; letter-spacing: 0.03em; color: var(--toem-blau); white-space: nowrap; transition: color var(--dur) var(--ease); } .rez__all:hover, .rez__all:focus-visible { color: var(--toem-gold); } .rez__all svg { width: var(--zeichen-inline); height: var(--zeichen-inline); transition: transform var(--dur-hover) var(--ease-hover); } .rez__all:hover svg, .rez__all:focus-visible svg { transform: translateX(3px); } .rez__grid { display: grid; /* Feste Stufen 3 -> 2 -> 1. auto-fit wuerde bei vier Rezepten vier schmale Spalten ergeben; Rezeptbilder brauchen aber Flaeche. */ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(var(--sp-4), 2.5vw, var(--sp-5)); } @media (max-width: 56rem) { .rez__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 38rem) { .rez__grid { grid-template-columns: 1fr; } } /* Karte ohne eigene Flaeche: Bild oben, Text darunter direkt auf der Sektionsbahn. Der Schatten sitzt deshalb am Bild, nicht an der Karte - ein Schatten um den Text herum haette keinen Koerper, den er wirft. Angehoben wird die ganze Karte, damit Bild und Text zusammen reagieren. */ .rez__card { display: block; transition: transform var(--dur-hover) var(--ease-hover); } .rez__card:hover, .rez__card:focus-visible { transform: translateY(var(--lift)); } .rez__media { display: block; position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; background: var(--bg-platzhalter); box-shadow: var(--shadow-1); transition: box-shadow var(--dur-hover) var(--ease-hover); } .rez__card:hover .rez__media, .rez__card:focus-visible .rez__media { box-shadow: var(--shadow-2); } .rez__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-media) var(--ease-media); } .rez__card:hover .rez__media img, .rez__card:focus-visible .rez__media img { transform: scale(var(--zoom-media)); } /* .rez__body und .rez__meta sind . An einem Inline-Element wirkt senkrechter Innenabstand nicht - display muss deshalb gesetzt werden, sonst waere der Abstand zum Bild null, egal welcher Wert dasteht. */ .rez__body { display: block; padding-top: var(--sp-4); } .rez__meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-100); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; /* ACHTUNG: Gold stand vorher auf dem blauen Bildschleier und hielt dort 5.74. Auf der hellen Bahn sind es 1.79 - die Zeile ist damit deutlich schwerer zu lesen. Das ist die Folge der Entscheidung, ueberall reines TOEM-Gold zu verwenden. */ color: var(--toem-gold); margin: 0 0 var(--sp-2); } .rez__meta i { width: 1px; height: 0.75rem; background: rgba(215, 179, 95, 0.5); } .rez__name { /* Dieselben 22px wie die Produktnamen, damit die beiden Kartensorten eine Schriftgroesse teilen. */ font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--toem-blau); margin: 0; transition: color var(--dur) var(--ease); } .rez__card:hover .rez__name, .rez__card:focus-visible .rez__name { color: var(--toem-gold); } /* Das passende Oel. Frueher ein Badge im Bild, jetzt eine Textzeile unter dem Rezeptnamen - auf Kundenwunsch schlicht in Grau. "Passt zu" steht nur fuer Screenreader da: sichtbar wuerde es die Zeile fast verdoppeln, vorgelesen fehlt sonst der Bezug und es kaeme nur ein Produktname ohne Zusammenhang. */ .rez__oil { display: block; margin-top: var(--sp-2); font-size: var(--fs-200); color: var(--text-muted); } /* --- Motivhoehe, sobald die Karten einspaltig stehen ------------------- Kundenwunsch vom 10.09.2026: "Die Höhe der Rezeptbilder auf der Startseite auf Mobile auch reduzieren. Wir hatten doch schon eine Seite wo die Höhe der Rezeptbilder reduziert wurde? Aber nur auf Mobile!" DEN WERT GAB ES SCHON: pages/rezepte.css setzt fuer die Listenseite aspect-ratio: 3 / 2 statt 3 / 4, begruendet mit der Seitenlaenge bei zwanzig Rezepten. Hier ist es derselbe Wert aus demselben Grund - eine Quelle, ein Verhaeltnis. GEMESSEN, WIE GROSS DAS PROBLEM WAR. Das Hochformat 3:4 ist richtig, solange drei Karten nebeneinander stehen. Einspaltig wird daraus: 600 px Fenster Bild 552 x 736 px 480 px Bild 440 x 587 414 px Bild 374 x 499 390 px Bild 350 x 467 = 73 Prozent der ganzen Karte Ein 736 px hohes Motiv ist kein Teaser mehr, es ist eine Bildseite. Mit 3:2 sind es bei 390 px 233 statt 467 px - je Karte 234 px weniger, bei drei Karten rund 700 px. DIE GRENZE IST GEMESSEN UND NICHT GESETZT: bei 640 px stehen zwei Spalten, bei 600 px eine. Genau dort verliert das Hochformat seine Begruendung, und genau dort greift die Regel - 37.5rem sind 600 px. GILT AUCH FUER DIE PRODUKTSEITEN, wo derselbe Teaser steht und gemessen dieselben 350 x 467 px hatte. Der Grund ist identisch, deshalb dieselbe Regel und keine zweite. Die Listenseite bleibt unberuehrt, sie hat ihre eigene. */ @media (max-width: 37.5rem) { .rez__media { aspect-ratio: 3 / 2; } }