/* ========================================================================== WEGEKARTE – die Karte am Fuß einer Seite, die weiterführt ZUSAMMENGEZOGEN in Runde 62 aus drei deckungsgleichen Kopien: .unweg pages/unternehmen.css (/unternehmen/ und die drei Seiten des Zweigs) .heweg__karte pages/herstellung.css (/herstellung/) .pukarte pages/produkte.css (/produkte/) GEMESSEN vor dem Zusammenziehen: alle acht Rollen – Karte, Hover, Titel, Text, Pfeilzeile, Pfeilzeichen und die beiden Hover-Regeln der Pfeilzeile – trugen in allen drei Dateien dieselben Deklarationen. Nicht ähnliche, sondern gleiche. Das war der Grund für den Zusammenzug: der Gold-Hover hatte in zwei der drei Kopien gefehlt und musste dreimal nachgetragen werden. NICHT HIER, weil andere Bauform, nicht nur andere Klasse: .stkarte components/stellenliste.css – zweispaltig, mit Meta-Zeile .kaweg pages/karriere.css – mit Bildfläche und eigenem Körper Die Sektionshülle gehört NICHT zum Bauteil. Grundfarbe, Innenabstand und Rasterspalten bleiben in der jeweiligen Seitendatei, weil sie sich je Seite unterscheiden. ACF/Theme: die Karte ist ein mit drei – Titel, Text, Pfeilzeile. Ein Wiederholungsfeld (ziel, titel, text) genügt. ========================================================================== */ .wegkarte { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-karte); text-decoration: none; transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); } .wegkarte:hover, .wegkarte:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); } .wegkarte__titel { font-size: var(--fs-500); font-weight: 700; color: var(--toem-blau); } .wegkarte__text { font-size: var(--fs-300); color: var(--text-muted); } .wegkarte__pfeil { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-200); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--toem-blau); transition: color var(--dur-hover) var(--ease-hover); } /* Der Goldwechsel. Er hat in zwei der drei Kopien gefehlt - hier steht er einmal und gilt damit für jede Wegekarte im Projekt. */ .wegkarte:hover .wegkarte__pfeil, .wegkarte:focus-visible .wegkarte__pfeil { color: var(--toem-gold); } .wegkarte__pfeil svg { flex: none; width: var(--zeichen-inline); height: var(--zeichen-inline); transition: translate var(--dur-hover) var(--ease-hover); } .wegkarte:hover .wegkarte__pfeil svg { translate: var(--sp-2) 0; } /* --- Variante mit Bild --------------------------------------------------- Kundenwunsch vom 02.09.2026, Folie 4: "Koennen wir hier (optional) Bilder oder Icons ergaenzen, damit etwas emotionaler? z. B. wieder Rezeptbild und Oelregal aus LEH?" Und weiter: "analog hier auch mit Bildern (Herstellung, Blog, Unternehmen)". ALS VARIANTE, NICHT ALS AENDERUNG AM BAUTEIL - und das ist hier keine Vorsicht, sondern gemessen: die Wegekarte steht 34 Mal auf 15 Seiten, auf allen acht Blogbeitraegen, vier Unternehmensseiten, Herstellung, Produktuebersicht und der Fehlerseite. Ein Bildbereich im Bauteil selbst waere auf 14 Seiten ein leerer Kasten, weil dort kein Material liegt. Mit der Variante bekommt jede Seite Bilder, sobald welche da sind - genau der schrittweise Weg, den der Kunde mit "optional" beschreibt. DAS POLSTER WANDERT AN DEN KOERPER. Ohne Bild traegt die Karte selbst das Polster; mit Bild muss es weg, sonst stuende das Bild in einem weissen Rahmen. Deshalb padding: 0 an der Karte und das Polster an .wegkarte__body. Ein zusaetzliches Element ist der Preis dafuer - dieselbe Bauform wie bei .prod__card, die es genauso macht. overflow: hidden, damit das Bild die Rundung der Karte annimmt. Es liegt in der oberen Ecke, also genuegt die Rundung der Karte selbst; eine eigene border-radius am Bild waere eine zweite Zahl, die man nachziehen muesste. */ /* BILD LINKS, TEXT RECHTS - damit die Karte im Querformat bleibt. ZWEITER ANLAUF: erst stand das Bild oben mit 4:3, und die Karte wurde dadurch hochkant (gemessen 588 x 614 px, also fast quadratisch bis hochkant). Wunsch vom 04.09.2026: das Querformat der Karte erhalten. Bild links loest das, weil die Hoehe dann vom Text kommt und nicht vom Bild - gemessen wird die Karte damit rund 240 px hoch bei 588 px Breite. 2 zu 3: das Bild bekommt 40 Prozent. Weniger, und das Motiv verschwindet; mehr, und der Text bricht bei "Bio-Sonnenblumenkernoel" um. align-content: stretch hebt das start des Bauteils auf - die Bildspalte muss auf die ganze Kartenhoehe laufen, sonst bleibt darunter Weiss. */ .wegkarte--bild { padding: 0; overflow: hidden; gap: 0; grid-template-columns: 2fr 3fr; align-content: stretch; } /* KEIN aspect-ratio mehr: die Bildspalte nimmt die Hoehe der Karte, und die kommt vom Text. Ein Seitenverhaeltnis hier waere ein zweiter Deckel, der mit dem ersten streiten wuerde. min-height, damit die Karte nicht flach wird, wenn ein Text nur zwei Zeilen hat - dann waere das Bild ein Streifen. cover, weil der Ausschnitt zaehlt und nicht die Vollstaendigkeit: ein Regal darf beschnitten sein, eine Flasche nicht. */ .wegkarte--bild .wegkarte__media { display: block; min-height: 11rem; overflow: hidden; background: var(--bg-platzhalter); } .wegkarte--bild .wegkarte__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-media) var(--ease-media); } /* Dieselbe leichte Vergroesserung wie an den Produkt- und Rezeptkarten, damit sich alle Karten der Website gleich anfuehlen. */ .wegkarte--bild:hover .wegkarte__media img, .wegkarte--bild:focus-visible .wegkarte__media img { transform: scale(var(--zoom-media)); } .wegkarte--bild .wegkarte__body { display: grid; gap: var(--sp-2); align-content: center; padding: var(--sp-5); /* min-width: 0, sonst kann die Textspalte nicht unter ihre min-content-Breite - und "Bio-Sonnenblumenkernoel" ist breiter als die Spalte. Derselbe Fall wie an .puwofuer__body. */ min-width: 0; } /* --- Hoechstens zwei Spalten, sobald Bilder im Spiel sind ---------------- Wunsch vom 04.09.2026: "bei 4 cards in einer Reihe jetzt mit Bild, dass die Anordnung 2x2 wird. So ist der Aufbau der Cards immer identisch." Der Grund ist gerechnet: bei 1440 px Fensterbreite stehen im Wrap 1320 px. Zwei Karten sind damit 588 px breit und ihre Bildflaeche 588 x 441 px - gemessen auf /produkte/. Vier Karten waeren 306 px breit, die Bildflaeche also 306 x 230 px. Ein Regal voller Flaschen auf 230 px Hoehe ist kein Motiv mehr, sondern ein Muster. Und der zweite Grund ist der wichtigere: mit 2x2 sehen alle Wegekarten der Website gleich aus, egal ob eine Seite zwei oder vier fuehrt. HIER, NICHT IN DEN SEITENDATEIEN, und das ist die eine Ausnahme von der Regel im Kopf dieser Datei ("Die Sektionshuelle gehoert NICHT zum Bauteil"): die Spaltenzahl haengt hier nicht von der Seite ab, sondern davon, ob die VARIANTE benutzt wird. Fuenfmal dieselbe Regel in fuenf Seitendateien waere genau die Vervielfachung, gegen die dieses Bauteil in Runde 62 zusammengezogen wurde. :has() statt einer Klasse am Raster: sonst muesste man beim Einsetzen eines Bildes an ZWEI Stellen denken, und die zweite wird vergessen. Browser ohne :has() (vor Chrome 105, Safari 15.4) zeigen weiter vier Spalten - das ist der heutige Zustand, also kein Rueckschritt. */ .unwege__grid:has(.wegkarte--bild), .fewege__grid:has(.wegkarte--bild), .hewege__grid:has(.wegkarte--bild), .blwege__grid:has(.wegkarte--bild), .puwege__grid:has(.wegkarte--bild) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Unter 30rem ist die Karte so schmal, dass 40 Prozent Bildspalte weder Motiv noch lesbaren Text ergeben. Dann Bild oben, Text darunter - und dafuer braucht das Bild sein Seitenverhaeltnis zurueck. */ @media (max-width: 30rem) { .wegkarte--bild { grid-template-columns: minmax(0, 1fr); } .wegkarte--bild .wegkarte__media { aspect-ratio: 16 / 9; min-height: 0; } } @media (max-width: 44rem) { .unwege__grid:has(.wegkarte--bild), .fewege__grid:has(.wegkarte--bild), .hewege__grid:has(.wegkarte--bild), .blwege__grid:has(.wegkarte--bild), .puwege__grid:has(.wegkarte--bild) { grid-template-columns: minmax(0, 1fr); } }