/** * Magazin-Vorlage "Rezept mit Banner" (Vorlagen-Schluessel rezeptseite) - statische CSS, kein theme:compile. * * Eingebunden NUR auf Beitraegen mit dieser Vorlage, aus der Theme-Vorlage * views/storefront/element/cms-element-blog-detail.html.twig (Block wesentlich_blog_detail_rezept_stylesheet). * Die Datei liegt auf dem Server an zwei Orten mit gleichem Inhalt: * custom/plugins/WesentlichTheme/src/Resources/public/css/magazin-rezeptseite.css (Quelle fuer assets:install) * public/bundles/wesentlichtheme/css/magazin-rezeptseite.css (das liefert der Webserver aus) * * Fassung vom 14.10.2026 ("in Seitenbreite"), nach der Rueckmeldung des Betreibers: Schrift zu gross, Hintergrundfarbe * ueber die ganze Seite, Bannerbild viel zu breit. Leitgedanke: die Rezeptseite steht in der SEITENBREITE des Shops - * dieselbe linke und rechte Kante wie Kopfzeile, Logo und Titelbild der uebrigen Beitraege (Bootstrap-Container, * hoechstens 1400 px samt Rinne). Nichts bricht aus, nichts haengt an der Fensterbreite: in dieser Datei steht keine * Fenster-Einheit (vw, vh). Schrift, Ueberschriften und Knopfstil kommen aus dem Theme; diese Datei stellt nur Banner, * Flaeche und Spalten. * * Regeln fuer diese Datei (geprueft in tests/test_css.py des Patch-Ordners patch-2026-10-14-rezeptseite-rahmen): * - JEDER Selektor traegt .magazin-rezeptseite oder .magazin-rezept-banner - keine Regel kann eine andere Seite * treffen. Die zwei :has()-Regeln am Ende greifen an Elementen oberhalb des Geruests, aber nur, wenn sie es enthalten. * - JEDER Stellwert (Mass, Farbe, Dauer, Deckkraft) steht genau EINMAL: als benannte Variable im Kopf * (.magazin-rezeptseite). In den Regeln darunter stehen nur var(...), 0 und 100 % - dazu, was Aufbau ist und kein * Stellwert: Rasterlinien und Spaltenzahl (1, 2, span 3, 1fr), die Schicht (z-index) und die Teiler der Auslauf-Strecke * des Verlaufs (1/4, 1/2, 3/4). Wer etwas verstellen will, aendert nur den Kopf. * - Umbruchpunkte wie Bootstrap im Shop: 768, 992, 1200 px (in @media sind keine Variablen moeglich). * - Nichts steht doppelt: was Bootstrap und das Theme fuer jede Seite regeln (box-sizing: border-box fuer alle Elemente, * Abstand von Absaetzen und Listen, Bilder im Beitrag nie breiter als die Spalte), wiederholt diese Datei nicht. * - Kein Gruen. Nur ASCII (die Datei wird ohne Zeichensatz-Angabe ausgeliefert). * * Aufbau des Geruests (Markup aus der Theme-Vorlage, unveraendert): * .magazin-rezeptseite Geruest: Spalte col-12 im Container des Shops - ihre Rinne (15 px je Seite) * IST die Seitenkante; die Klasse col-12 muss an diesem Element bleiben * .magazin-rezept-banner Banner: Titelbild, Ueberschrift, Knopf * .magazin-rezept-banner__inhalt Textblock; der dunkle Verlauf haengt an IHM, nicht am ganzen Bild * .magazin-rezeptseite__spalten Raster (die Kennklasse --mit-kaesten der Vorlage braucht diese Datei nicht mehr) * .magazin-rezeptseite__kopf farbige Flaeche: Brotkrume, Titel (h1), Meta-Zeile * .magazin-rezeptseite__inhalt farbige Flaeche: Beitragsinhalt (beitragseigene Erlebniswelt) * .magazin-rezeptseite__abschluss weiss: grosser Bundle-Link nach dem Inhalt * .magazin-rezeptseite__seite weiss: Seitenspalte mit den Kaesten (Aussehen unveraendert aus dem Theme) * * Reihenfolge (bei jeder Breite die des HTML - nichts wird umgeordnet, Tastatur und Vorleser folgen dem Bild): * ab 992 px zwei Spalten: links Kopf, Inhalt, Abschluss - rechts die Seitenspalte, ihr erster Kasten auf Hoehe des Titels * unter 992 px eine Spalte wie im normalen Beitrag des Shops: Kopf (Titel) - Inhalt - Abschluss - dann die Seitenkaesten * (Infobox, Zutaten, Hilfsmittel, "Passende Produkte", "Magazin"). Kopf und Inhalt sind EINE Flaeche. * Tablet: Kaesten zweispaltig. * * Spalten nach dem Bootstrap-Raster des Shops (Rinne 30 px): ab 992 px 8 : 4 wie col-lg-8 / col-lg-4 des normalen * Beitrags. Der normale Beitrag geht ab 1200 px auf 9 : 3; hier bleibt es bei 8 : 4 - die Flaeche behaelt rund zwei * Drittel wie im Entwurf des Betreibers (62 %). Bei Seitenbreite 1370 px: Flaeche 903 px, Seitenkaesten 437 px. * * Herkunft der Zahlen: "gemessen" heisst im kopflosen Chrome an den Arbeitskopien vom 13.10.2026 (Ordner schnappschuss/ * des Patch-Ordners; Startseite, normaler Beitrag, Rezeptseiten), Werte in notizen/erhebung-shop/ und notizen/bau/. */ /* ---------- Stellwerte (der einzige Ort fuer Masse, Farben und Dauern) ---------- */ .magazin-rezeptseite { /* --- Farben --- */ /* Flaechenfarbe: Vorgabe aus dem Entwurf des Betreibers. Die Theme-Vorlage ueberschreibt sie als Inline-Variable am Geruest, wenn am Beitrag (Zusatzfeld) oder in den Plugin-Einstellungen des Editors eine gueltige Hex-Farbe steht. */ --magazin-rezept-flaeche: #f2f1e9; /* Zutaten-Tabelle der Erlebniswelt: weisse Karte auf der Flaeche (ihr eigener Grund aus dem Theme, #f6f3ef, ist von der Flaechenfarbe kaum zu unterscheiden). Innenabstand 16 px, ab 768 px 24 px (wie im Plugin). */ --magazin-rezept-karte-grund: #ffffff; --magazin-rezept-karte-innen: 1rem; /* Banner ohne Titelbild: ruhiges Braun aus der Sand-Familie des Magazins (Weiss darauf 6,5 : 1). */ --magazin-rezept-banner-grund: #6f5a49; --magazin-rezept-banner-schrift: #ffffff; --magazin-rezept-banner-hell: #ffffff; /* Schwarz des Banners: als Farbe (Knopf beim Ueberfahren, Fokusring) und als Farbanteile fuer alle halbdurchsichtigen Schichten (Verlauf, Knopfgrund, Textschatten). Beide Zeilen meinen dieselbe Farbe. */ --magazin-rezept-banner-dunkel: #000000; --magazin-rezept-banner-dunkel-rgb: 0, 0, 0; /* --- Banner: Abdunklung --- */ /* Deckkraft des Verlaufs hinter dem Textblock in den drei Stufen der Einstellung rezeptseiteBannerAbdunklung des Editors. Es gilt "mittel", solange die Theme-Vorlage keine Kennklasse am Banner setzt (siehe unter dem Kopf). Gemessen an den Pixeln unter der Schrift, ohne den Textschatten: leicht das Bild bleibt hell wie im Entwurf - auf einem dunklen Foto reicht das (Volumen-Spray 8,9 : 1), auf einem hellen NICHT (reinweiss: Ueberschrift 2,0 : 1, Knopf 3,1 : 1; helles Foto der Lippenpflege 2,1 : 1) mittel Vorgabe; reinweiss 3,3 : 1 fuer die Ueberschrift (grosse Schrift braucht 3 : 1); im Knopf liegen zusaetzlich 20 % Schwarz (zusammen 56 %), die Beschriftung erreicht 4,9 : 1 (normale Schrift braucht 4,5 : 1) stark Ueberschrift 5,3 : 1 und Knopf 7,3 : 1 auch auf einem reinweissen Bild Jedes echte Foto ist dunkler als Weiss, der Kontrast also hoeher. */ --magazin-rezept-banner-abdunklung-leicht: .28; --magazin-rezept-banner-abdunklung-mittel: .45; --magazin-rezept-banner-abdunklung-stark: .58; --magazin-rezept-banner-abdunklung: var(--magazin-rezept-banner-abdunklung-mittel); --magazin-rezept-banner-knopf-grund: .2; /* Der Verlauf laeuft ueber eine Strecke weich aus: am Handy nach oben im Polster ueber der Ueberschrift, ab 768 px nach rechts neben dem Textblock (12rem = 192 px). Drei Zwischenstufen der Deckkraft bei 1/4, 1/2 und 3/4 der Strecke formen die Kurve (Bestand vom 13.10.2026). */ --magazin-rezept-banner-verlauf-richtung: to top; --magazin-rezept-banner-verlauf-strecke: var(--magazin-rezept-banner-oben); --magazin-rezept-banner-auslauf: 12rem; --magazin-rezept-banner-verlauf-stufe-a: .72; --magazin-rezept-banner-verlauf-stufe-b: .4; --magazin-rezept-banner-verlauf-stufe-c: .14; /* Banner ohne Bild: etwas Tiefe von links (22 % Schwarz, laeuft bis 85 % der Breite aus). */ --magazin-rezept-banner-leer-tiefe: .22; --magazin-rezept-banner-leer-weite: 85%; /* --- Banner: Form und Hoehe --- */ /* Ecken wie Titelbild und Seitenkarten des Shops (Theme: 0 25px 0 25px = oben rechts und unten links). Das Banner traegt die Ecke oben rechts, die Flaeche die Ecke unten links - zusammen eine Form, dazwischen fugenlos. */ --magazin-rezept-ecke: 25px; /* Mindesthoehe (das Banner waechst, wenn Ueberschrift und Knopf mehr brauchen): 300 / 320 / 352 / 400 px. Bei 1370 px Seitenbreite 3,4 : 1 - zwischen Titelbild der Beitraege (1370 x 240) und Hero der Startseite (1370 x 514). Damit endet der Titel des Beitrags auf 1440 x 900 und 1920 x 1080 bei 723 px, also im ersten Bildschirm. */ --magazin-rezept-banner-hoehe: 300px; /* Polster ueber der Ueberschrift (in ihm laeuft der Verlauf am Handy aus) und unter dem Knopf: 24 / 40 / 48 px. */ --magazin-rezept-banner-oben: 3rem; --magazin-rezept-banner-unten: 1.5rem; --magazin-rezept-banner-bildposition: center center; /* --- Banner: Ueberschrift --- */ /* Feste Stufen, nie mit dem Fenster wachsend: 28 / 36 / 44 px (Hero der Startseite 28 / 48 / 60, Standard-h1 des Shops 36, Titel des Beitrags 28). Normaler Schnitt und leicht eng wie im Entwurf, hoechstens 14 Gevierte breit. */ --magazin-rezept-banner-titel: 1.75rem; --magazin-rezept-banner-titel-zeile: 1.2; --magazin-rezept-banner-titel-gewicht: 400; --magazin-rezept-banner-titel-sperrung: -.02em; --magazin-rezept-banner-titel-breite: 14em; --magazin-rezept-banner-titel-schatten: 0 1px .125rem rgba(var(--magazin-rezept-banner-dunkel-rgb), .35), 0 0 1.25rem rgba(var(--magazin-rezept-banner-dunkel-rgb), .45); /* Silbentrennung am Handy nur fuer Woerter ab 12 Zeichen, mindestens 5 vor und 5 nach dem Trennstrich. */ --magazin-rezept-banner-titel-trennung: 12 5 5; /* --- Banner: Knopf --- */ /* Wie .btn-outline-light.btn-lg auf dem Banner der Startseite (dort gemessen): 16 px, Gewicht 600, 1 px Sperrung, 1 px Rand, 46 px hoch, 5 px Polster oben und unten. Mindestbreite 192 px, ab 768 px 240 px; seitliches Polster 24 px. Abstand zur Ueberschrift 20 px, ab 768 px 24 px. */ --magazin-rezept-banner-knopf-abstand: 1.25rem; --magazin-rezept-banner-knopf-schrift: 1rem; --magazin-rezept-banner-knopf-gewicht: 600; --magazin-rezept-banner-knopf-zeile: 1.25; --magazin-rezept-banner-knopf-sperrung: 1px; --magazin-rezept-banner-knopf-rand: 1px; --magazin-rezept-banner-knopf-hoehe: 2.875rem; --magazin-rezept-banner-knopf-breite: 12rem; --magazin-rezept-banner-knopf-polster: 1.5rem; --magazin-rezept-banner-knopf-polster-hoch: .3125rem; /* Farbwechsel beim Ueberfahren (wie die Knoepfe des Shops: .15 s). */ --magazin-rezept-banner-knopf-wechsel: .15s; /* Fokus: weisser Ring (2 px, 2 px Abstand) und dahinter ein schwarzer Hof (6 px) - auf hellem und dunklem Bild sichtbar. */ --magazin-rezept-banner-fokus-ring: 2px; --magazin-rezept-banner-fokus-hof: 6px; /* --- Flaeche und Text --- */ /* Seitlicher Einzug: Bannertext, Brotkrume, Titel und Text stehen auf EINER Kante (wie im Entwurf); rechts derselbe Innenabstand. 20 / 56 / 80 px (Textblock im Hero der Startseite, gemessen: 30 / 55 / 80). */ --magazin-rezept-rand: 1.25rem; --magazin-rezept-rand-rechts: var(--magazin-rezept-rand); /* Text wie im normalen Beitrag des Shops (dort bei allen Breiten gemessen): 0,875 rem = 14 px, Zeilenhoehe 1,5 = 21 px. Das Theme gibt dieselben Werte vor; sie stehen hier als Stellwert, weil aus ihnen die Hoehe der Brotkrumen-Zeile rechnet (siehe Raster). Abstand wie zwischen Absaetzen (16 px): fuer Bilder, die am Handy in eigener Zeile stehen. */ --magazin-rezept-schrift: .875rem; --magazin-rezept-zeile: 1.5; --magazin-rezept-absatz: 1rem; /* Polster der Flaeche oben 24 / 32 / 40 px, unten 32 / 40 / 48 px. */ --magazin-rezept-flaeche-oben: 1.5rem; --magazin-rezept-flaeche-unten: 2rem; /* Lesebreite von Text, Tabelle und Schritten (die Farbe fuellt trotzdem die ganze Spalte). 40rem = 640 px, gemessen 94 bis 98 Zeichen je Zeile ab 1280 px (der normale Beitrag hat rund 150). Abwaegung: mit 35rem waeren es rund 82 Zeichen, aber ein Drittel der Flaeche bliebe rechts leer (263 statt 183 px bei 80 px Einzug links). */ --magazin-rezept-textbreite: 40rem; /* Titel -> Text 20 px (so viel wie Brotkrume -> Titel); Zwischenueberschrift 28 px Abstand nach oben; die Meta-Zeile (Autor, Kategorie - nur wenn im Element eingeschaltet) rueckt 8 px an den Titel heran. */ --magazin-rezept-titel-abstand: 1.25rem; --magazin-rezept-abschnitt-abstand: 1.75rem; --magazin-rezept-meta-zug: -.5rem; /* Bilder, die im Text schweben (aus der Migration: style="float: right; margin: 20px", Breite 480): hoechstens so breit - sonst bleibt neben ihnen kaum Platz fuer Text. */ --magazin-rezept-schwebebild-breite: 42%; /* Bilder im Schritte-Element: hoechstens 480 px hoch. Ein Hochformat-Foto in voller Textbreite waere sonst rund 1000 px hoch und haette allein einen ganzen Bildschirm; Querformate betrifft das nicht. "none" hebt die Grenze auf. */ --magazin-rezept-schrittbild-hoehe: 30rem; /* --- Raster --- */ /* Rinne des Shops (Bootstrap: 30 px) und Anteil der Seitenspalte in Zwoelfteln (4 von 12 wie col-lg-4). */ --magazin-rezept-rinne: 30px; --magazin-rezept-seite-anteil: 4; --magazin-rezept-raster-teile: 12; /* Brotkrumen-Zeile ueber dem Titel: ab 992 px genau EINE Textzeile hoch (Schrift x Zeilenhoehe = 21 px), darunter 20 px Abstand. Aus beidem rechnet sich der Versatz der Seitenspalte - ihr erster Kasten beginnt auf Hoehe des Titels (Vorgabe des Betreibers vom 13.10.2026). */ --magazin-rezept-brotkrume-hoehe: calc(var(--magazin-rezept-schrift) * var(--magazin-rezept-zeile)); --magazin-rezept-brotkrume-abstand: 1.25rem; /* Unter 992 px stehen die Kaesten unter dem Text: 40 px Abstand zur Flaeche bzw. zum Knopf des Sets und zwischen den Kaesten (so viel wie der Abstand der Karten im Theme). */ --magazin-rezept-kasten-abstand: 2.5rem; /* Unter der Flaeche: 32 px bis zum Knopf des Sets; Abstand des ganzen Aufbaus zum Seitenfuss 48 px, ab 992 px 64 px. */ --magazin-rezept-abschluss-abstand: 2rem; --magazin-rezept-spalten-unten: 3rem; } @media (min-width: 768px) { .magazin-rezeptseite { --magazin-rezept-banner-hoehe: 320px; --magazin-rezept-banner-unten: 2.5rem; --magazin-rezept-banner-verlauf-richtung: to right; --magazin-rezept-banner-verlauf-strecke: var(--magazin-rezept-banner-auslauf); --magazin-rezept-banner-titel: 2.25rem; --magazin-rezept-banner-titel-sperrung: -.03em; --magazin-rezept-banner-knopf-abstand: 1.5rem; --magazin-rezept-banner-knopf-breite: 15rem; --magazin-rezept-karte-innen: 1.5rem; --magazin-rezept-rand: 3.5rem; --magazin-rezept-flaeche-oben: 2rem; --magazin-rezept-flaeche-unten: 2.5rem; } } @media (min-width: 992px) { .magazin-rezeptseite { --magazin-rezept-banner-hoehe: 352px; --magazin-rezept-flaeche-oben: 2.5rem; --magazin-rezept-flaeche-unten: 3rem; --magazin-rezept-spalten-unten: 4rem; } } @media (min-width: 1200px) { .magazin-rezeptseite { --magazin-rezept-banner-hoehe: 400px; --magazin-rezept-banner-unten: 3rem; --magazin-rezept-banner-titel: 2.75rem; --magazin-rezept-rand: 5rem; } } /* Stufen der Abdunklung: die Theme-Vorlage setzt fuer "leicht" und "stark" eine Kennklasse am Banner (Einstellung des Betreibers), ohne Kennklasse gilt "mittel". Die Werte der Stufen stehen im Kopf. */ .magazin-rezept-banner--abdunklung-leicht { --magazin-rezept-banner-abdunklung: var(--magazin-rezept-banner-abdunklung-leicht); } .magazin-rezept-banner--abdunklung-stark { --magazin-rezept-banner-abdunklung: var(--magazin-rezept-banner-abdunklung-stark); } /* ---------- Banner ---------- */ /* Das Banner steht in der Seitenbreite (die Spalte col-12 des Geruests traegt die Rinne des Shops) und hat eine Mindesthoehe - kein Seitenverhaeltnis, nichts haengt am Fenster. Ecke oben rechts wie beim Titelbild der Beitraege; unten bleibt es eckig, dort schliesst die Flaeche buendig an. */ .magazin-rezept-banner { position: relative; display: flex; align-items: flex-end; min-height: var(--magazin-rezept-banner-hoehe); overflow: hidden; border-radius: 0 var(--magazin-rezept-ecke) 0 0; background-color: var(--magazin-rezept-banner-grund); } /* Ohne Titelbild: die ruhige Flaeche braucht keine Abdunklung, nur etwas Tiefe von links. */ .magazin-rezept-banner--ohne-bild { background-image: linear-gradient(to right, rgba(var(--magazin-rezept-banner-dunkel-rgb), var(--magazin-rezept-banner-leer-tiefe)) 0, rgba(var(--magazin-rezept-banner-dunkel-rgb), 0) var(--magazin-rezept-banner-leer-weite)); } /* Titelbild: echtes (sw_thumbnails), fuellt die Flaeche, beschnitten. */ .magazin-rezept-banner .magazin-rezept-banner__bild { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--magazin-rezept-banner-bildposition); } /* Lesbarkeit: der Verlauf haengt am TEXTBLOCK, nicht an festen Anteilen des Banners - wo kein Text steht, bleibt das Bild, wie es ist. Er ist eine eigene Schicht hinter dem Text (::before): Schwarz, dessen Deckkraft die Stufe der Abdunklung ist. Volle Staerke bis zum Beginn der Auslauf-Strecke, dann in drei Zwischenstufen auf null. Handy: der Textblock steht unten ueber die volle Breite; der Verlauf laeuft nach oben im Polster ueber der Ueberschrift aus. Das Bild darueber bleibt unberuehrt. (Richtung und Strecke sind Stellwerte, ab 768 px andere.) */ .magazin-rezept-banner__inhalt { position: relative; z-index: 1; width: 100%; padding: var(--magazin-rezept-banner-oben) var(--magazin-rezept-rand-rechts) var(--magazin-rezept-banner-unten) var(--magazin-rezept-rand); } .magazin-rezept-banner__inhalt::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(var(--magazin-rezept-banner-verlauf-richtung), rgb(var(--magazin-rezept-banner-dunkel-rgb)) 0, rgb(var(--magazin-rezept-banner-dunkel-rgb)) calc(100% - var(--magazin-rezept-banner-verlauf-strecke)), rgba(var(--magazin-rezept-banner-dunkel-rgb), var(--magazin-rezept-banner-verlauf-stufe-a)) calc(100% - var(--magazin-rezept-banner-verlauf-strecke) * .75), rgba(var(--magazin-rezept-banner-dunkel-rgb), var(--magazin-rezept-banner-verlauf-stufe-b)) calc(100% - var(--magazin-rezept-banner-verlauf-strecke) * .5), rgba(var(--magazin-rezept-banner-dunkel-rgb), var(--magazin-rezept-banner-verlauf-stufe-c)) calc(100% - var(--magazin-rezept-banner-verlauf-strecke) * .25), rgba(var(--magazin-rezept-banner-dunkel-rgb), 0) 100%); opacity: var(--magazin-rezept-banner-abdunklung); } .magazin-rezept-banner--ohne-bild .magazin-rezept-banner__inhalt::before { content: none; } /* Ueberschrift: zurueckgenommen - normaler Schnitt und leicht eng gesetzt wie im Entwurf, in der Groesse aber eine feste Stufe (28 / 36 / 44 px). Handy: Silbentrennung an, damit lange Woerter nicht ueberlaufen - aber nur fuer lange Woerter (wo der Browser die Grenze kennt). Ab 768 px ohne automatische Trennung. */ .magazin-rezept-banner .magazin-rezept-banner__titel { max-width: var(--magazin-rezept-banner-titel-breite); margin: 0; color: var(--magazin-rezept-banner-schrift); font-size: var(--magazin-rezept-banner-titel); font-weight: var(--magazin-rezept-banner-titel-gewicht); line-height: var(--magazin-rezept-banner-titel-zeile); letter-spacing: var(--magazin-rezept-banner-titel-sperrung); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: var(--magazin-rezept-banner-titel-trennung); text-shadow: var(--magazin-rezept-banner-titel-schatten); } /* Auf der ruhigen Flaeche ohne Bild braucht die Ueberschrift keinen Schatten (er saehe dort wie ein Hof aus). */ .magazin-rezept-banner--ohne-bild .magazin-rezept-banner__titel { text-shadow: none; } /* Knopf: weisser Rahmen, eckig, Versalien, gesperrt - wie "ZUM SHOP" im Entwurf und wie der Knopf auf dem Banner der Startseite (.btn-outline-light.btn-lg). Sein Grund traegt 20 % Schwarz: zusammen mit dem Verlauf dahinter erreicht die Beschriftung auch auf einem weissen Bild 4,5 : 1, ohne dass der Verlauf fuer das ganze Bild staerker werden muss. Auf einem Foto ist die Toenung kaum zu sehen. */ .magazin-rezept-banner .magazin-rezept-banner__knopf { display: inline-flex; align-items: center; justify-content: center; min-width: var(--magazin-rezept-banner-knopf-breite); max-width: 100%; min-height: var(--magazin-rezept-banner-knopf-hoehe); margin-top: var(--magazin-rezept-banner-knopf-abstand); padding: var(--magazin-rezept-banner-knopf-polster-hoch) var(--magazin-rezept-banner-knopf-polster); border: var(--magazin-rezept-banner-knopf-rand) solid var(--magazin-rezept-banner-hell); background-color: rgba(var(--magazin-rezept-banner-dunkel-rgb), var(--magazin-rezept-banner-knopf-grund)); color: var(--magazin-rezept-banner-hell); font-size: var(--magazin-rezept-banner-knopf-schrift); font-weight: var(--magazin-rezept-banner-knopf-gewicht); line-height: var(--magazin-rezept-banner-knopf-zeile); letter-spacing: var(--magazin-rezept-banner-knopf-sperrung); text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color var(--magazin-rezept-banner-knopf-wechsel) ease-in-out, color var(--magazin-rezept-banner-knopf-wechsel) ease-in-out; } .magazin-rezept-banner .magazin-rezept-banner__knopf:hover, .magazin-rezept-banner .magazin-rezept-banner__knopf:active { background-color: var(--magazin-rezept-banner-hell); color: var(--magazin-rezept-banner-dunkel); text-decoration: none; } /* Doppelter Ring: auf hellem und auf dunklem Bild sichtbar. */ .magazin-rezept-banner .magazin-rezept-banner__knopf:focus-visible { outline: var(--magazin-rezept-banner-fokus-ring) solid var(--magazin-rezept-banner-hell); outline-offset: var(--magazin-rezept-banner-fokus-ring); box-shadow: 0 0 0 var(--magazin-rezept-banner-fokus-hof) var(--magazin-rezept-banner-dunkel); } @media (prefers-reduced-motion: reduce) { .magazin-rezept-banner .magazin-rezept-banner__knopf { transition: none; } } @media (min-width: 768px) { .magazin-rezept-banner { align-items: stretch; } /* Der Textblock ist so breit wie sein Text (Ueberschrift hoechstens 14 Gevierte, Knopf) und so hoch wie das Banner; der Text steht unten links. */ .magazin-rezept-banner__inhalt { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; width: auto; max-width: 100%; padding-right: 0; } /* Verlauf von links ueber die ganze Bannerhoehe: volle Staerke bis zum rechten Rand des Textblocks - also bis hinter das Ende der laengsten Zeile -, erst danach laeuft er ueber die Auslauf-Strecke weich aus. Eine kurze Ueberschrift dunkelt entsprechend weniger Bild ab. */ .magazin-rezept-banner__inhalt::before { right: calc(-1 * var(--magazin-rezept-banner-auslauf)); } .magazin-rezept-banner .magazin-rezept-banner__titel { -webkit-hyphens: manual; hyphens: manual; } } /* ---------- Raster: farbige Textflaeche, Seitenspalte ---------- */ .magazin-rezeptseite .magazin-rezeptseite__spalten { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--magazin-rezept-spalten-unten); } /* Die farbige Flaeche besteht aus zwei Rasterzellen, die fugenlos aneinander anschliessen: Kopf (Brotkrume, Titel) und Inhalt. So kann die Seitenspalte auf dem Desktop auf Hoehe des Titels beginnen. Lange Woerter brechen um, statt ueber den Rand zu laufen. */ .magazin-rezeptseite .magazin-rezeptseite__kopf, .magazin-rezeptseite .magazin-rezeptseite__inhalt { padding-right: var(--magazin-rezept-rand-rechts); padding-left: var(--magazin-rezept-rand); background-color: var(--magazin-rezept-flaeche); font-size: var(--magazin-rezept-schrift); line-height: var(--magazin-rezept-zeile); overflow-wrap: break-word; } .magazin-rezeptseite .magazin-rezeptseite__kopf { padding-top: var(--magazin-rezept-flaeche-oben); } /* Unten links die Ecke des Shops - zusammen mit der Ecke oben rechts am Banner die Form des Titelbilds. */ .magazin-rezeptseite .magazin-rezeptseite__inhalt { padding-bottom: var(--magazin-rezept-flaeche-unten); border-bottom-left-radius: var(--magazin-rezept-ecke); } /* Lesebreite - die Farbe fuellt trotzdem die ganze Spalte. */ .magazin-rezeptseite .magazin-rezeptseite__kopf > *, .magazin-rezeptseite .magazin-rezeptseite__inhalt > * { max-width: var(--magazin-rezept-textbreite); } /* Knopf des Sets unter der Flaeche: bei jeder Breite buendig mit dem Text (derselbe Einzug wie die Flaeche). Der Knopf selbst bleibt der des Themes. Ohne Set ist die Zelle leer und nimmt keinen Platz ein. */ .magazin-rezeptseite .magazin-rezeptseite__abschluss { padding-right: var(--magazin-rezept-rand-rechts); padding-left: var(--magazin-rezept-rand); } .magazin-rezeptseite .magazin-rezeptseite__abschluss .magazin-bundle-cta { margin-top: var(--magazin-rezept-abschluss-abstand); } /* ---------- Text in der Flaeche ---------- */ .magazin-rezeptseite .magazin-breadcrumb { margin-bottom: var(--magazin-rezept-brotkrume-abstand); font-size: var(--magazin-rezept-schrift); line-height: var(--magazin-rezept-zeile); } /* Die Liste selbst ohne eigenen Abstand nach unten - sonst entschiede bei kleinem Stellwert ihr Abstand, nicht der Stellwert. */ .magazin-rezeptseite .magazin-breadcrumb .breadcrumb { margin-bottom: 0; } /* Titel (h1): Groesse, Schnitt und Zeilenhoehe kommen von der Klasse .h2 des Themes (28 px / 34 px ab 1200 px, darunter fliessend) - genau wie beim Titel der uebrigen Beitraege. Hier nur der Abstand zum Text. */ .magazin-rezeptseite .magazin-rezeptseite__kopf .werkl-blog-detail-title { margin: 0 0 var(--magazin-rezept-titel-abstand); } .magazin-rezeptseite .magazin-rezeptseite__kopf .werkl-blog-detail-article-meta { margin: var(--magazin-rezept-meta-zug) 0 var(--magazin-rezept-titel-abstand); font-size: var(--magazin-rezept-schrift); } /* Die folgenden Regeln gelten nur fuer TEXT: das Text-Element der Erlebniswelt (.cms-element-text) und den Rueckfall- Inhalt ohne eigene Erlebniswelt (.werkl-blog-detail-article). Andere Bausteine, die ein Redakteur in eine Rezeptseite setzt (Produkt-Slider, Galerie), behalten die Abstaende des Shops. Ueberschriften behalten Groesse und Schnitt des Shops (h2 28 px, h3 24 px, h4 20 px), Absaetze und Listen ihren Abstand von 16 px - das alles kommt aus dem Theme, genau wie im normalen Beitrag. Hier steht nur, was die Flaeche zusaetzlich braucht: kein Abstand unter dem letzten Absatz eines Bausteins und der Abstand ueber einer Zwischenueberschrift. */ .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text p:last-child, .magazin-rezeptseite .magazin-rezeptseite__inhalt .werkl-blog-detail-article p:last-child { margin-bottom: 0; } .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text * + h2, .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text * + .h2, .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text * + h3, .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text * + .h3, .magazin-rezeptseite .magazin-rezeptseite__inhalt .werkl-blog-detail-article * + h2, .magazin-rezeptseite .magazin-rezeptseite__inhalt .werkl-blog-detail-article * + .h2, .magazin-rezeptseite .magazin-rezeptseite__inhalt .werkl-blog-detail-article * + h3, .magazin-rezeptseite .magazin-rezeptseite__inhalt .werkl-blog-detail-article * + .h3 { margin-top: var(--magazin-rezept-abschnitt-abstand); } /* Wirklich leere Absaetze und Ueberschriften reissen kein Loch. Mehr geht mit CSS nicht: ein Element, das nur einen Zeilenumbruch enthaelt (


), ist von einem mit Text UND Zeilenumbruch nicht zu unterscheiden - eine Regel mit :has(> br:only-child) wuerde auch "Text
" ausblenden. Solche Reste gehoeren im Beitrag entfernt. */ .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text p:empty, .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text h2:empty, .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text h3:empty { display: none; } /* Bilder im Text sind nie breiter als die Spalte und behalten ihr Seitenverhaeltnis - das regelt das Theme fuer jeden Beitrag (.werkl-blog-detail-cms img). Hier nur: schwebende Bilder (Inline-Stil float aus der Migration) nehmen hoechstens einen Teil der Spalte ein, damit daneben Text Platz hat. */ .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text img[style*="float"] { max-width: var(--magazin-rezept-schwebebild-breite); } /* Handy: schwebende Bilder stehen in eigener Zeile in der Spalte. Der Inline-Stil (float, margin) ist nur mit !important zu ueberstimmen. */ @media (max-width: 767.98px) { .magazin-rezeptseite .magazin-rezeptseite__inhalt .cms-element-text img[style*="float"] { float: none !important; display: block; max-width: 100%; margin: var(--magazin-rezept-absatz) 0 !important; } } /* Zutaten-Tabelle der Erlebniswelt: weisse Karte auf der Flaeche. Die Menge bleibt in einer Zeile ("1 Tropfen"). */ .magazin-rezeptseite .magazin-rezeptseite__inhalt .netmitte-recipe-ingredients { padding: var(--magazin-rezept-karte-innen); background-color: var(--magazin-rezept-karte-grund); } .magazin-rezeptseite .magazin-rezeptseite__inhalt .netmitte-recipe-ingredients__amount { white-space: nowrap; } /* Schritte-Element der Erlebniswelt: das Bild eines Schritts bleibt im Seitenverhaeltnis, wird aber nicht hoeher als der Stellwert oben. width: auto steht hier gegen eine Breitenangabe im Markup (): mit ihr bliebe die Breite stehen, waehrend die Hoehe begrenzt wird - das Bild waere gestaucht. */ .magazin-rezeptseite .magazin-rezeptseite__inhalt .netmitte-recipe-steps__image { width: auto; max-height: var(--magazin-rezept-schrittbild-hoehe); } /* Handy: Silbentrennung nur fuer den Titel (die Seite traegt lang="de-DE") - in der grossen Schrift passt ein langes Wort sonst nicht in die Zeile und braeche mitten im Wort um. Der Fliesstext trennt nicht automatisch, wie im normalen Beitrag des Shops. */ @media (max-width: 767.98px) { .magazin-rezeptseite .magazin-rezeptseite__kopf .werkl-blog-detail-title { -webkit-hyphens: auto; hyphens: auto; } } /* ---------- Unter 992 px: eine Spalte ---------- */ /* Reihenfolge wie im HTML und wie im normalen Beitrag des Shops: Kopf (Titel) - Inhalt - Abschluss - Seitenkaesten. Die Kaesten folgen auf Weiss unter der Flaeche bzw. dem Knopf des Sets. Ihr Abstand untereinander kommt hier aus dem Raster der Seitenspalte, nicht aus dem Rand der Karte (Theme: 40 px nach unten) - so bleibt hinter der letzten Karte kein ueberzaehliger Abstand vor dem Seitenfuss, auch nicht in einer Zeile mit zwei Karten. */ @media (max-width: 991.98px) { .magazin-rezeptseite .magazin-rezeptseite__seite { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--magazin-rezept-kasten-abstand); column-gap: var(--magazin-rezept-rinne); padding-top: var(--magazin-rezept-kasten-abstand); } .magazin-rezeptseite .magazin-rezeptseite__seite > .magazin-sidebar-card { margin-bottom: 0; } } /* Tablet hochkant: Kaesten zweispaltig, je Zeile gleich hoch. */ @media (min-width: 768px) and (max-width: 991.98px) { .magazin-rezeptseite .magazin-rezeptseite__seite { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Ab 992 px: zwei Spalten (Raster des Shops) ---------- */ @media (min-width: 992px) { .magazin-rezeptseite .magazin-rezeptseite__spalten { /* Seitenspalte wie col-lg-4 im normalen Beitrag: (Breite + Rinne) x Anteil / 12 - Rinne. */ grid-template-columns: minmax(0, 1fr) calc((100% + var(--magazin-rezept-rinne)) * var(--magazin-rezept-seite-anteil) / var(--magazin-rezept-raster-teile) - var(--magazin-rezept-rinne)); /* Drei Zeilen: Kopf und Inhalt so hoch wie ihr Inhalt, die dritte (Abschluss) nimmt den Rest. Ist die Seitenspalte hoeher als ein kurzer Beitrag, waechst so nur die weisse Zeile unter der Flaeche - ohne diese Angabe verteilte das Raster die Mehrhoehe auf alle drei Zeilen und risse ein Loch zwischen Titel und Text. */ grid-template-rows: auto auto 1fr; column-gap: var(--magazin-rezept-rinne); } .magazin-rezeptseite .magazin-rezeptseite__kopf { grid-row: 1; grid-column: 1; } .magazin-rezeptseite .magazin-rezeptseite__inhalt { grid-row: 2; grid-column: 1; } .magazin-rezeptseite .magazin-rezeptseite__abschluss { grid-row: 3; grid-column: 1; } /* Die Brotkrume bleibt hier genau eine Zeile hoch: nur so ist der Versatz der Seitenspalte verlaesslich. Ein sehr langer Kategoriepfad wird mit Auslassungspunkten gekuerzt - an den Links selbst, nicht an der Zeile: ein abgeschnittener Behaelter wuerde den Fokusrahmen der Links (Theme: box-shadow) mit abschneiden. Unter 992 px darf die Brotkrume umbrechen. */ .magazin-rezeptseite .magazin-rezeptseite__kopf .magazin-breadcrumb { height: var(--magazin-rezept-brotkrume-hoehe); white-space: nowrap; } .magazin-rezeptseite .magazin-rezeptseite__kopf .magazin-breadcrumb .breadcrumb { flex-wrap: nowrap; } .magazin-rezeptseite .magazin-rezeptseite__kopf .magazin-breadcrumb .breadcrumb-item { min-width: 0; } .magazin-rezeptseite .magazin-rezeptseite__kopf .magazin-breadcrumb .breadcrumb-link { display: block; overflow: hidden; text-overflow: ellipsis; } /* Seitenspalte beginnt auf Hoehe des Titels: Vorgabe des Betreibers vom 13.10.2026 ("Ueberschrift auf einer Linie mit dem ersten Block rechts"), so wie bei den uebrigen Beitraegen. Der Versatz ist das Polster der Flaeche plus die Brotkrumen-Zeile samt Abstand (alle drei als Stellwerte oben). */ .magazin-rezeptseite .magazin-rezeptseite__seite { grid-row: 1 / span 3; grid-column: 2; padding-top: calc(var(--magazin-rezept-flaeche-oben) + var(--magazin-rezept-brotkrume-hoehe) + var(--magazin-rezept-brotkrume-abstand)); } } /* ---------- Was :has() braucht ---------- */ /* Ab 992 px, Beitrag OHNE Brotkrume (keine Kategorie gepflegt): der Titel ist dann das erste Element der Flaeche, der Versatz der Seitenspalte ist nur noch das Polster der Flaeche - sonst stuende der erste Kasten 41 px unter dem Titel. Ohne :has() bleibt es in diesem seltenen Fall bei den 41 px; der Abschnitt gilt deshalb nur, wo der Browser :has() kennt (ein Selektor mit :has() wuerde sonst die ganze Regel ungueltig machen). */ @supports selector(:has(*)) { @media (min-width: 992px) { .magazin-rezeptseite .magazin-rezeptseite__spalten:not(:has(.magazin-rezeptseite__kopf .magazin-breadcrumb)) .magazin-rezeptseite__seite { padding-top: var(--magazin-rezept-flaeche-oben); } } } /* ---------- Schichten oberhalb des Geruests (nur wenn sie es enthalten) ---------- */ /* Banner direkt unter dem Seitenkopf: Abstand ueber der Beitragsseite entfernen. Im Shop setzt das Theme ihn bereits auf 0 (.is-ctl-blog.is-act-detailaction), in der Vorschau des Editors (anderer Controller) nicht. */ .container-main:has(.magazin-rezeptseite) { padding-top: 0; } /* Der Blockbehaelter der globalen Detailseite kann einen inline gesetzten Abstand tragen - nur mit !important erreichbar. */ .cms-block-container:has(.magazin-rezeptseite) { padding-top: 0 !important; }