/* ========================================================================================== Markenuebersicht -- Ergaenzungen zu store-seite.css Grundlage: documentation/Entwurf-Marken.html REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .mk ------------------------------------------------------------------------------------------ Das Element
traegt beide Klassen. `.sto` bringt die Gestaltungswerte, die Ruecksetzungen, den Ausgleich fuer die feste Kopfzeile, Titelbereich, Fliesstext, Vorzeile, Schaltflaechen, Bildrahmen und das dunkle Abschlussband mit. Hier steht nur, was der Entwurf zusaetzlich verlangt: die Markenreihe. store-seite.css WIRD NICHT GEAENDERT. 24 Store-Seiten sowie die Wholesale-, Ueber-uns- und Designer-Vorlage haengen daran; sie ist ab heute von fuenf Vorlagen geteilt. ⚠ CACHEKENNUNG: nginx liefert /assets/* mit 'Cache-Control: public, max-age=31536000, immutable' aus. Jede Aenderung an dieser Datei MUSS die `?v=`-Kennung in brands.blade.php hochzaehlen -- sonst behaelt jeder wiederkehrende Besucher bis zu einem Jahr die alte Fassung. ========================================================================================== */ /* ---------- Die Markenreihe ---------- Trennlinien statt Kacheln: Der Entwurf setzt die drei Marken untereinander, jede durch eine feine Linie abgesetzt. Die letzte bekommt zusaetzlich eine Linie darunter, damit die Reihe nach unten abschliesst und nicht ins Abschlussband ausfranst. Die Reihe traegt oben keinen eigenen Abstand: Der Titelbereich darueber bringt seinen eigenen mit (.sto section), zwei zusammen ergaeben ein Loch. */ .mk .mk-marken { padding-top: 0; } .mk-marke { border-top: 1px solid var(--sto-line); padding: clamp(2.4rem, 5vw, 3.6rem) 0; } .mk-marke:last-of-type { border-bottom: 1px solid var(--sto-line); } /* ---------- Marke mit Bild ---------- Der Entwurf gibt .82fr 1fr -- das Bild etwas schmaler als der Text, damit das Hochformat nicht die Seite dominiert. Erst ab 900px; darunter steht das Bild ueber dem Text, in beiden Faellen in DOM-Reihenfolge. */ .mk-marke-duo { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 2.6rem); align-items: center; } @media (min-width: 900px) { .mk-marke-duo { grid-template-columns: 0.82fr 1fr; gap: clamp(2.5rem, 6vw, 4rem); } /* ---------- Der Wechsel links/rechts/links ---------- Bild nach rechts bei jeder zweiten Marke -- das gibt der Reihe ihren Rhythmus (Entwurf, "Die Bilder wechseln die Seite"). Erst ab 900px: auf dem Telefon stehen alle Bilder oben, ein Wechsel waere dort nicht als Rhythmus lesbar, sondern als Unordnung. :nth-of-type ZAEHLT DIE MARKEN, NICHT DIE BILDER. Die Regel steht damit unabhaengig davon, ob ein Markenbild gepflegt ist: Solange keines da ist, gibt es kein .sto-bild und die Regel greift ins Leere; mit dem ersten gepflegten Bild wirkt sie ohne weiteres Zutun. Eine Marke ohne Bild verbraucht ihren Platz in der Zaehlung trotzdem -- der Rhythmus der uebrigen bleibt dadurch, wie er ist. Gezaehlt werden alle
der Reihe; andere Element-Typen stehen dort nicht, .mk-marke ist nur zur Lesbarkeit mit angegeben. */ .mk-marke:nth-of-type(even) > .sto-bild { order: 2; } /* ⚠ UND DIE SPALTEN MUESSEN MITWANDERN. `order` bewegt nur die Reihenfolge, nicht die Breiten: Ohne diese Zeile bekaeme das Bild in der getauschten Zeile die 1fr-Spalte und der Text die 0.82fr -- also genau die Verteilung, die der Grund fuer 0.82fr 1fr war ("das Bild etwas schmaler als der Text"), nur andersherum. Das Bild bliebe dann in jeder zweiten Zeile das breitere Element. Der Entwurf hat diese Zeile nicht; dort faellt es nicht auf, weil seine Bildkaesten leer sind und keine Groesse vergleichbar machen. */ .mk-marke:nth-of-type(even).mk-marke-duo { grid-template-columns: 1fr 0.82fr; } } /* Hochformat 4:5. Die uebrigen Verhaeltnisse liegen in store-seite.css; dieses kommt hier dazu, weil es dort keines gibt und die Datei nicht geaendert wird. ⚠ DER AUSSCHNITT HAENGT OBEN, NICHT IN DER MITTE -- und das ist kein Geschmack, sondern nachgemessen. `.sto-bild img` traegt `object-fit: cover`; die drei am 18.08.2026 gepflegten Bilder stehen in 2:3 (1080x1620, 1080x1619) und 5:7 (1080x1512), sind also HOEHER als 4:5. Der 4:5-Kasten schneidet deshalb 16,7 % bzw. 10,7 % der Bildhoehe weg. Mittig verteilt waeren das bei zwei der drei je rund 135 px oben -- und bei `khloe-2-gross-1` liegt der Kopf 35 px unter der Oberkante: Der Ausschnitt haette ihr den Scheitel abgeschnitten. Nachgesehen wurde an allen drei Bildern, nicht an einem. Oben verankert bleibt der Kopf in jedem der drei Bilder vollstaendig, und der Schnitt faellt an den Saum -- die Stelle, an der eine Brautaufnahme am wenigsten verliert. Wer hier ein neues Bild einpflegt, prueft genau das: Was oben steht, bleibt; was unten steht, kann gehen. */ .mk-bild-vier-fuenf { aspect-ratio: 4 / 5; } .mk-bild-vier-fuenf img { object-position: top; } /* ---------- Der Markenname ueber dem Claim ---------- Kleiner als die Ueberschrift und gesperrt: Er benennt die Marke, die Ueberschrift darunter sagt, wofuer sie steht. Andersherum -- Name als h2 -- haette die Seite drei Ueberschriften ohne Aussage. Hier stand am 18.08.2026 einen Tag lang das Markenlogo aus der API (.mk-logo). Es ist auf Weisung des Auftraggebers wieder entfallen; mit ihm ist P-93 gegenstandslos. */ .mk-name { display: block; font-family: "Overpass-Medium", sans-serif; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sto-muted); margin-bottom: 0.9rem; } /* ---------- Kollektionsliste ---------- Sie steht nur noch im Block "Kollektionen ohne Marke". Bei den Marken selbst ist sie einer einzigen Schaltflaeche gewichen (.mk-verweis): Auf dieser Seite geht es um die Marke, die Kollektionen sind der Weg weiter, nicht der Inhalt -- als Bildkacheln stehen sie eine Ebene tiefer, auf /brand/{slug}. Die Regel bleibt trotzdem allgemein gehalten, .mk-rest ergaenzt nur die Linienfarbe. Semantisch bleibt es eine ul -- fuer die Vorlesesoftware ist "Liste mit 3 Eintraegen" die Auskunft, die zaehlt. list-style und Einzug setzt store-seite.css nicht zurueck, weil dort keine Listen dieser Art vorkommen; deshalb hier. */ .mk-kollektionen { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; } .mk-kollektionen a { color: var(--sto-muted); text-decoration: none; border-bottom: 1px solid var(--sto-line); padding-bottom: 0.15rem; font-size: 0.95rem; } .mk-kollektionen a:hover, .mk-kollektionen a:focus-visible { color: var(--sto-ink); border-bottom-color: var(--sto-ink); } /* ---------- Verweis auf die Markenseite ---------- Seit dem Wegfall der Kollektionsaufzaehlung der einzige Weg von einer Marke weiter. Er bleibt als Textverweis mit Unterlinie gestaltet, nicht als gefuellte Schaltflaeche (.sto-btn): Die gefuellte gehoert dem Abschlussband, wo die eine Handlung der Seite steht. Drei davon in der Markenreihe wuerden mit ihr um dieselbe Aufmerksamkeit streiten -- der Entwurf haelt es mit `.marke-link` ebenso. */ .mk-verweis { display: inline-block; margin-top: 1.7rem; font-family: "Overpass-Medium", sans-serif; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sto-ink); text-decoration: none; border-bottom: 1px solid var(--sto-ink); padding-bottom: 0.25rem; } /* ---------- Kollektionen ohne Marke ---------- Der Block ist im Normalfall nicht da (BrandController liefert dann einen leeren Rest). Er bekommt trotzdem eine eigene Regel: Er steht auf dem hellen Band, wo die Linienfarbe der Kollektionsverweise zu schwach traegt. Wer ihn zu sehen bekommt, soll ihn lesen koennen -- das ist der ganze Zweck des Blocks. */ .mk-rest .mk-kollektionen a { border-bottom-color: var(--sto-muted); }