/* ========================================================================================== Designer-Seite ("Silva Erkoç") -- Ergaenzungen zu store-seite.css Grundlage: documentation/Entwurf-Designer.html REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .dg ------------------------------------------------------------------------------------------ Das Element
traegt beide Klassen. `.sto` bringt Gestaltungswerte, Ruecksetzungen, Kopfzeilenausgleich und alle Bausteine mit, die der Entwurf zeichnet -- Brotkrume, Titelbereich, schmaler Rahmen, hervorgehobener Satz, Schaltflaechen, Bildrahmen, Bildplatzhalter und das dunkle Abschlussband. Hier steht nur, was neu ist. SIEBEN REGELN. Derselbe Zuschnitt wie ueber-uns.css, aus demselben Grund: Der Entwurf zu dieser Seite benutzt fast ausschliesslich Bausteine, die es schon gibt. WARUM NICHT ueber-uns.css MITLADEN, DREI REGELN STEHEN DORT WORTGLEICH Weil beide Seiten damit aneinandergebunden waeren: Wer "Ueber uns" umgestaltet, aenderte ungefragt die Designer-Seite mit. Dieselbe Begruendung, mit der ueber-uns.css seinerzeit wholesale.css nicht mitgeladen hat. Drei Regeln zu wiederholen ist der billigere Preis. store-seite.css WIRD NICHT GEAENDERT. 24 Store-Seiten, die Wholesale-Seite und "Ueber uns" haengen daran. ⚠ CACHEKENNUNG: nginx liefert /assets/* mit 'Cache-Control: public, max-age=31536000, immutable' aus. Jede Aenderung an dieser Datei MUSS die `?v=`-Kennung in template-designer_seite.blade.php hochzaehlen -- sonst behaelt jeder wiederkehrende Besucher bis zu einem Jahr die alte Fassung. ========================================================================================== */ /* ---------- 1. Fettung im Fliesstext ---------- Erzeugt aus `**...**` in den Redaktionsfeldern, siehe template-designer_seite.blade.php. ⚠ DER ENTWURF SCHREIBT `strong{font-weight:500}`, UND DAS WAERE FALSCH UEBERNOMMEN. Der Entwurf benutzt Jost, eine Familie mit echten Gewichten. Dieses Projekt bindet je Schnitt eine EIGENE FAMILIE ein -- "Overpass-Light" fuer den Fliesstext, "Overpass-Medium" fuer alles Hervorgehobene. Ein `font-weight: 500` auf Overpass-Light fuehrt zu keiner anderen Datei: Die Familie hat genau einen Schnitt, der Browser nimmt ihn und rechnet die Fettung selbst hoch -- eine kuenstlich verbreiterte Light. `font-weight: normal` gehoert dazu und ist kein Beiwerk: Browser stellen von sich aus auf 700. Overpass-Medium ist mit 500 deklariert; bliebe die 700 stehen, legte der Browser ueber den Medium-Schnitt zusaetzlich eine synthetische Fettung. `p` und `li` stehen im Selektor, damit die Regel bei (0,1,2) liegt. Diese Seite fuehrt zwar keine Kennzahlenreihe mit wie "Ueber uns", aber der Zuschnitt bleibt gleich: Wer hier spaeter eine ergaenzt, laeuft sonst in dieselbe Falle -- `.dg b` laege gleichauf mit `.sto-zahl b`, und diese Datei wird nach store-seite.css geladen. */ .dg p b, .dg p strong, .dg li b, .dg li strong { font-family: "Overpass-Medium", sans-serif; font-weight: normal; } /* ---------- 2. Titelbereich: schmalere Bildspalte, Fussausrichtung ---------- Der Entwurf teilt 1fr .78fr statt der 1fr 1fr aus store-seite.css -- der Name traegt die Seite, das Portraet begleitet sie. Uebernommen wird 0.8fr, der Wert der Seite "Ueber uns": Der Unterschied zu .78fr betraegt bei 1052px Rahmenbreite rund 5px, und zwei verschiedene Werte fuer dieselbe Sache waeren eine Pflegefalle ohne sichtbaren Gegenwert. `align-items: center` wie in store-seite.css. Der Entwurf setzt an .kopf `end`, und das uebernahm diese Datei zunaechst: Links stehen nur drei kurze Zeilen (Vorzeile, Name, Rolle), rechts ein hohes Portraet -- unten ausgerichtet stehen Name und Bildfuss auf einer Linie. Am gelieferten 2:3-Portraet kippt die Rechnung: Der Textblock sitzt dann am unteren Bildrand und darueber bleibt auf zwei Dritteln der Bildhoehe eine leere Flaeche. Mittig ausgerichtet stehen Name und Rolle auf halber Bildhoehe, und der Rest verteilt sich gleichmaessig. Der Fliesstext ist davon nicht betroffen -- er steht als eigener Abschnitt unter dem Titelbereich in schmaler Spalte, nicht in dessen linker Spalte. Der Haltepunkt bleibt bei 1024px wie in store-seite.css. */ @media (min-width: 1024px) { .dg .sto-hero-grid { grid-template-columns: 1fr 0.8fr; align-items: center; } } /* ---------- 3. Die Rolle als Unterzeile ---------- NICHT .sto-lead, OBWOHL DIE UEBER-UNS-SEITE IHRE UNTERZEILE DAMIT SETZT. Dort ist die Unterzeile eine Hervorhebung -- groesser als der Fliesstext, in voller Textfarbe. Hier ist sie eine Rollenangabe unter einem Namen: Der Entwurf zeichnet sie kleiner als die Hervorhebung und in der gedaempften Farbe, damit der Name allein traegt. Die Werte folgen dem Entwurf (clamp(1rem,1.6vw,1.2rem), muted, 1rem Abstand nach oben). Das Sperren von .02em bleibt weg: Der Entwurf braucht es fuer Jost, Overpass laeuft ohnehin breiter -- dieselbe Ueberlegung wie beim Deckel der Aussage weiter unten. */ .dg .dg-rolle { margin-top: 1rem; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--sto-muted); } /* ---------- 4. Titelbereich ohne Bild ---------- Faellt das Portraet weg -- Feld leer und Bildstelle abgeschaltet --, bleibt im Raster eine einzige Spalte ueber die vollen 1052px des Rahmens. Der Deckel entspricht .sto-schmal. Die Klasse setzt die Vorlage nur dann, wenn wirklich keine Bildstelle ausgegeben wird. */ .dg .dg-hero-allein > * { max-width: 800px; } /* ---------- 5. Das Portraet steht im Hochformat 2:3 ---------- EIGENE KLASSE STATT EINER UEBERSCHREIBUNG VON .sto-bild-hoch. Die vorhandene Klasse ist 3:4 und wird von den Store-Seiten, der Wholesale-Seite und "Ueber uns" benutzt; sie hier auf 2:3 zu ziehen hiesse, eine gemeinsame Klasse seitenweise verschieden zu belegen. Die Vorlage reicht `dg-portraet` als $form an den Bildbaustein durch, `.sto-bild` bleibt daneben stehen und bringt Hintergrund, Anschnitt und die img-Regeln mit. 2:3 ist die Vorgabe des Entwurfs und die Form des deutschen Portraets (Medium 80, 1023 x 1537 = 0.666). Die fuenf uebrigen Sprachen fuehren Medium 49 mit 1080 x 1350 (4:5); dort schneidet object-fit oben und unten je rund 11 % weg. Auf Weisung des Auftraggebers vom 2026-08-16 bleibt es zunaechst dabei -- ein einheitliches Portraet ist als offener Punkt vermerkt und eine Bildfrage, keine Umbaufrage. */ .dg .dg-portraet { aspect-ratio: 2 / 3; } /* ---------- 6. Der Fliesstext schliesst naeher an den Titelbereich an ---------- Zwischen Titelbereich und Text stuenden sonst zwei volle Abschnittspolster (bis zu 7rem), und der Text verlore den Bezug zum Namen darueber. Der Entwurf setzt an dieser Stelle `padding-top:clamp(2rem,4vw,3rem)`; uebernommen wird der Gedanke, nicht die Zahl -- die Werte hier sind auf die Polsterstaffel von store-seite.css bezogen. Das Polster nach UNTEN bleibt unangetastet: Darunter beginnt der farbige Anspruchsblock. */ .dg .dg-text-abschnitt { padding-top: clamp(1.5rem, 3vw, 2.5rem); } /* ---------- 7. Der Anspruch: groessere Aussage, Signatur darunter ---------- .sto-aussage steht auf anderen Seiten als ein hervorgehobener Satz INNERHALB eines Abschnitts. Hier ist der Satz der Abschnitt -- er traegt die Kernaussage der Seite, sonst steht nichts darin. Der Entwurf gibt ihm dafuer clamp(1.25rem,2.2vw,1.65rem). GEMESSEN, NICHT GESCHAETZT (Overpass-Light.ttf, documentation/tools/ttfmess.py): Der deutsche Satz (99 Zeichen) belegt bei 24.8px = 1.55rem im Rahmen von 800px abzueglich der 1.6rem Einrueckung, also 774.4px, genau ZWEI Zeilen -- dieselbe Zeilenzahl wie bei den 20.8px der Grundregel. Die Vergroesserung kostet also keine zusaetzliche Zeile. Der Deckel liegt unter dem Entwurfswert (1.65rem), weil Overpass rund 6 % breiter laeuft als das dort verwendete Jost. .dg-quelle ist die Signatur unter der Aussage: Name und, in der zweiten Zeile, die Rolle. Die Einrueckung von 1.6rem ist dieselbe wie bei .sto-aussage -- so steht die Signatur buendig unter dem Satz und nicht unter dem senkrechten Strich. */ .dg .dg-anspruch .sto-aussage { font-size: clamp(1.2rem, 2.4vw, 1.55rem); } .dg .dg-quelle { margin-top: 1.1rem; padding-left: 1.6rem; font-family: "Overpass-Medium", sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sto-muted); line-height: 1.9; } /* Die Rolle steht als zweite Zeile derselben Signatur -- ein eigenes Element, damit sie ohne Namen nicht ausgegeben wird und die Zeile umbrechen kann, ohne den Namen mitzuziehen. */ .dg .dg-quelle span { display: block; }