/* ==========================================================================
components/bezugsquellen.css
Die Haendlersektion. Herausgeloest aus pages/produkt.css am 28.08.2026, als
sie auch am Fuss der Rezeptliste gebraucht wurde - dieselbe Bewegung wie
vorher bei components/tabs.css. Vorgesehen ist sie ausserdem fuer
/produkte/ und /handel/.
ACHTUNG RECHTELAGE: assets/img/haendler/HERKUNFT.md. Die Logos sind fremde
Marken; die Dateien sind urheberrechtlich gemeinfrei, markenrechtlich aber
nicht freigegeben. Vor Livegang je Haendler klaeren. Der Block auf einer
zweiten Seite verdoppelt die Sichtbarkeit, nicht das Risiko - die Freigaben
braucht es ohnehin.
Die Logos liegen als ![]()
mit SVG-Quelle, nicht inline: so bleiben sie
austauschbar, wenn ein Haendler eine eigene Datei liefert.
BAHNFARBE: die Sektion steht auf --bg-soft. Wo sie auf eine Seite kommt,
deren vorherige Bahn schon grau ist, muss die Reihenfolge geprueft werden -
zwei graue Bahnen hintereinander verschlucken die Trennung.
========================================================================== */
/* GRAUE Bahn seit dem Ausbau am 27.08.2026. Bahnenfolge der Seite jetzt:
Hero weiss, Daten weiss (durch den Bogen getrennt, wie Hero und USP auf der
Startseite), Verwendung grau, Schaelverfahren als blaues Bildband,
Rezepte grau, Sorten weiss, Bezugsquellen grau, Footer blau. */
.pshops {
/* --bezug-grund ist der Regler fuer die Bahnfarbe, wie --schwung-grund beim
Goldbogen. Ohne Angabe bleibt es Grau, also genau das Verhalten der
Produktseite. Die Rezeptliste stellt auf Weiss um, weil die Liste
darueber schon auf Grau steht. */
background: var(--bezug-grund, var(--bg-soft));
padding-block: var(--sp-sektion);
}
.pshops__grid {
list-style: none;
margin: var(--sp-7) 0 0;
padding: 0;
display: grid;
/* auto-fit statt fester Spaltenzahl: der Kunde pflegt die Haendler selbst,
es duerfen also vier oder acht sein. */
grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
gap: var(--sp-4);
}
/* UNTER 26rem ZWEI SPALTEN STATT EINER. Mit der 11rem-Untergrenze faellt das
Raster dort auf eine Spalte zurueck, und GEMESSEN wird der Block dann
1808 px hoch - bei 414 px sind es 896. Zwoelf Kacheln untereinander, jede
280 bis 350 px breit fuer ein Logo von hoechstens 68 px Hoehe: das ist
fast zwei Bildschirmhoehen Wischweg fuer nichts.
Die Kachel wird dabei knapper gepolstert, sonst bliebe bei 132 px Breite
kaum Platz fuer das Logo. Dass ein breites Logo dort schmaler gedeckelt
wird, ist keine neue Eigenschaft: "Bos Food" ist 300x60 und wird schon bei
414 px von seiner Breite begrenzt, nicht von --logo-h. */
@media (max-width: 26rem) {
.pshops__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3);
}
.pshops__item {
min-height: 6.5rem;
padding: var(--sp-4);
}
}
.pshops__item {
background: var(--surface);
border-radius: var(--r-card);
border: 1px solid var(--line);
/* Muss das hoechste Logo plus Innenabstand tragen: Edeka steht auf
4,25rem, dazu zweimal --sp-5. */
min-height: 8.5rem;
display: grid;
place-items: center;
padding: var(--sp-5);
text-align: center;
transition: box-shadow var(--dur-hover) var(--ease-hover),
transform var(--dur-hover) var(--ease-hover),
border-color var(--dur-hover) var(--ease-hover);
}
/* Kachel ist ein Link, sobald ein Shopziel vorliegt. Ohne Ziel bleibt sie
eine reine Flaeche - ein Hover-Anheben ohne Klickziel waere eine Zusage,
die niemand einloest. Dieselbe Regel wie bei den USP-Karten. */
a.pshops__item:hover,
a.pshops__item:focus-visible {
box-shadow: var(--shadow-2);
transform: translateY(var(--lift));
border-color: transparent;
}
/* Feste Bildhoehe, Breite frei: die Logos haben voellig verschiedene
Seitenverhaeltnisse, von REWE 512x178 bis Kaufland 300x252. Nach Hoehe
normiert wirken sie ungleich gross, nach Flaeche waere es Handarbeit pro
Logo. Hoehe mit max-width als Deckel ist der Kompromiss. */
/* Die Hoehe steht je Logo im Markup, weil die Seitenverhaeltnisse zu weit
auseinanderliegen: REWE ist 512x178, Edeka 710x859. Nach einer gemeinsamen
Hoehe normiert wirkt das breite Logo riesig und das hochkante winzig.
Im Theme wird --logo-h ein ACF-Feld am Haendler-Repeater. */
/* PLATZHALTERKACHEL, 09.09.2026. Drei der sieben neuen Haendler haben kein
frei verwendbares Logo: Wasgau liegt nur unter CC BY-SA 4.0 vor, k+k und
kaes gar nicht. Siehe assets/img/haendler/HERKUNFT.md.
GESTRICHELT, nicht durchgezogen: ein gesetzter Schriftzug in einer
normalen Kachel wuerde behaupten, das sei das Logo. Der gestrichelte
Rahmen sagt, dass hier etwas fehlt - dieselbe Sprache wie bei den
Bio-Zeichen im Beschreibungsreiter.
KEIN Verweis und keine Hoverstufe: die Kachel ist ein , und die
Hoverregeln haengen an a.pshops__item. */
.pshops__platzhalter {
border-style: dashed;
border-color: var(--c-grau-300);
align-content: center;
gap: var(--sp-1);
font-size: var(--fs-400);
font-weight: 600;
color: var(--text-muted);
}
.pshops__platzhalter small {
display: block;
font-size: var(--fs-100);
font-weight: 400;
color: var(--c-grau-300);
}
.pshops__logo {
max-height: var(--logo-h, 2.75rem);
max-width: 100%;
width: auto;
height: auto;
display: block;
}
.pshops__fussnote {
margin: var(--sp-5) 0 0;
font-size: var(--fs-100);
line-height: var(--lh-snug);
color: var(--text-muted);
}
/* Die Regel fuer das Rezeptraster der Produktseite stand bis 10.09.2026
hier und ist nach css/pages/produkt.css umgezogen.
GRUND: sie hat .rez__grid gegriffen, eine Klasse aus
sections/rezepte.css, die in dieser Komponente gar nicht vorkommt -
gemessen liegt kein .rez__grid der Website innerhalb von .pshops. Diese
Datei laedt auf Produktseiten VOR sections/rezepte.css, dort wirkte die
Regel also nie; auf /rezepte/ laedt sie danach und wirkte auf die
Rezeptliste, fuer die sie nicht gedacht war. Genau verdreht.
Diese Datei stellt nur noch .pshops* - ihre eigenen Klassen. */
/* Die Tabs liegen jetzt in components/tabs.css - sie werden auf /kontakt/
ebenfalls gebraucht. Diese Seite laedt die Komponente im . */
/* --- Layout der Datensektion ------------------------------------------- */
/* Die Zutatenkarte .pdaten__zutaten ist entfallen: die Zutaten stehen seit
dem 27.08.2026 als dritter Tab, ebenfalls als .pdaten__table. Damit tragen
alle drei Tabs dieselbe Tabelle. */