/* ========================================================================================== Kollektionstexte -- der redaktionelle Absatz einer Kollektion. Zwei Auftritte, EIN Stylesheet: .kt-intro auf /{locale}/collection/{slug}, zwischen Ueberschrift und Produktkacheln .kt-block auf /{locale}/product/{slug}, zwischen Titelblock und Produkttext WARUM EINE EIGENE DATEI UND NICHT collection.css collection.css und collectionDetail.css haben eine .scss-Quelle daneben. Wer dort etwas ergaenzt, muss beide pflegen -- und wer nur die .css aendert, verliert es beim naechsten Build. Eine eigene Datei hat diese Falle nicht, wird nur dort geladen, wo sie gebraucht wird, und faellt bei der Ruecknahme einfach weg, ohne Spur in einer fremden Datei. ⚠ Sie wird mit `?v=` geladen. nginx liefert assets mit 'Cache-Control: ... immutable' aus (MEMORY) -- ohne Kennung sieht ein Wiederkehrer ein Jahr lang die alte Fassung. Wer hier etwas aendert, zaehlt die Kennung in BEIDEN Vorlagen hoch: collection-detail.blade.php und product-detail.blade.php. ⚠ KEINE Regel greift auf .collectionBox, .product-gallery, .item oder .cont. Die Produktkacheln und die Bildergalerie kommen aus der API und bleiben unberuehrt -- Format, Anzahl, Anordnung. Der Text legt sich davor, er ordnet nichts um. ========================================================================================== */ /* ---------- Kollektionsseite: zwischen H1 und Kacheln ---------- DIE WERTE SIND NICHT GESETZT, SONDERN UEBERNOMMEN -- aus `.sto .sto-lead`, dem Einleitungssatz von Ueber uns, Wholesale, Designer und der Markenuebersicht. Anweisung des Auftraggebers vom 2026-08-19: "Ich will nicht, dass er anders aussieht als der Einleitungssatz auf Ueber uns oder der Verteilerseite." ⚠ 800px UND NICHT DIE 720px DES ENTWURFS. Dieselbe Breite wie `.sto-schmal` und `.vtl-narrow`. Der Grund steht seit dem 2026-08-06 in store-seite.css: Overpass laeuft rund 6,4 % breiter als das Jost der Entwuerfe, 720px im Entwurf sind auf der Seite etwa 766px. 720 zu nehmen haette der Website eine DRITTE Textbreite gegeben -- das Gegenteil dessen, was die Angleichung erreichen soll. Bewusste Abweichung vom Entwurf, am 2026-08-19 ausdruecklich bestaetigt; beim naechsten Entwurfsabgleich nicht zurueckstellen. ⚠ Die Schriftgroesse ist eine clamp()-Kurve, kein vw-Wert. Vorher stand hier 1.05vw -- bei 1440px sind das 15,1px, waehrend der Fliesstext der Seite auf 1.4vw = 20,2px steht. Der Absatz war also KLEINER als der Text um ihn herum und wirkte hineingesetzt statt gesetzt. */ .kt-intro { max-width: 800px; margin: 0; font-family: "Overpass-Light", sans-serif; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; color: #363636; } .kt-intro p { margin: 0; } /* ---------- Der Strich unter der Ueberschrift ---------- ER GEHOERT ZUR UEBERSCHRIFT, NICHT ZUM TEXT. Anweisung des Auftraggebers vom 2026-08-19: "Ohne Text verschwindet das Band vollstaendig -- dann folgen die Kacheln direkt auf den Strich. Der Strich bleibt." Deshalb haengt er an h1 und nicht am Band: das Band steht in einem @if, die Ueberschrift nicht. ⚠ ALS ::after AM h1 UND NICHT AM UMGEBENDEN .pageTitle. Auf dieser Seite traegt .pageTitle zusaetzlich .flexBar -- die Klasse hat hier keine Regel, weil weder appointment.css noch filter.css geladen werden. Kaeme eine der beiden je dazu, waere .pageTitle ein Flexcontainer und ein ::after an IHM wuerde zu einem dritten Flexkind: der Strich stuende dann NEBEN der Ueberschrift statt darunter. Im h1 kann das nicht passieren. ⚠ .kt-kopf ist eine eigene Klasse und nicht einfach .pageTitle. Dieses Stylesheet wird auch auf der Produktseite geladen; die hat heute kein .pageTitle, koennte aber eines bekommen -- und traege den Strich dann unbeabsichtigt mit. 40px ist der Wert, den die Website fuer dieses Mittel bereits kennt (startseite.css, der Strich unter dem Kopf einer Standortkachel). Eine zweite Strichlaenge einzufuehren waere das Gegenteil der Angleichung; wirkt er unter der 3,42vw grossen H1 zu kurz, ist das eine Entscheidung des Auftraggebers und keine Korrektur. */ .kt-kopf h1::after { content: ""; display: block; width: 40px; height: 1px; margin: .9rem 0 0; background: #363636; } /* ---------- Das Band auf Schalenfarbe ---------- #F4F2F0 ALS LITERAL. Es ist derselbe Wert wie --sto-shell, --vtl-shell, --kt-shell und --rt-shell -- aber jede dieser Variablen ist in einer Datei definiert, die auf der Kollektionsseite NICHT geladen wird. Eine var()-Schreibweise fiele auf den Anfangswert zurueck, das Band haette gar keine Flaeche. Dieselbe Ueberlegung wie bei .kt-block. DIE ABSTAENDE SIND DIE VON VORHER, NUR ANDERS VERTEILT. Vor dem Band trug .kt-intro `margin: 2rem 0 3rem`; jetzt traegt das Band diese beiden Werte und .kt-intro gar keinen. Die Seite steht damit an derselben Stelle wie zuvor, obwohl die Flaeche neu ist. ⚠ margin-top: 2rem UND .pageTitle mit margin-bottom: 1.5vw ERGEBEN NICHT 54px. Zwischen beiden liegt nur ein .container-fluid ohne senkrechte Polsterung, ohne Rahmen und ohne eigenen Formatierungskontext -- der untere Rand der Ueberschrift faellt durch ihn hindurch und faellt mit dem oberen Rand des Bandes zusammen. Es bleibt der groessere der beiden: 32px bei 1440px. Genau der Abstand, den .kt-intro vorher hatte. ⚠ OHNE TEXT FAELLT DIESE REGEL MIT DEM ELEMENT WEG. Dann treffen der untere Rand der Ueberschrift (1.5vw) und die Kacheln aufeinander, also 21,6px bei 1440px -- der Zustand von vor dem 2026-08-19. Es gibt keine zweite Stelle, an der ein Abstand haengen bliebe. */ .kt-band { background: #F4F2F0; margin-top: 2rem; margin-bottom: 3rem; padding: clamp(2.5rem, 4vw, 3.5rem) 0; } /* ---------- Produktseite: der Block unter dem Titelblock ---------- AM ENTWURF AUSGERICHTET (documentation/Entwurf-Kollektionstexte.html, `.kblock`). Vorher stand hier ein Kasten mit Flaeche und linkem Balken; der Auftraggeber am 2026-08-19: "Der Kasten ist zu schwer fuer eine Textspalte." Jetzt eine feine Oberlinie, sonst nichts. ⚠ FARBEN ALS LITERAL, NICHT ALS VARIABLE. #DDD9D5 und #6E6A66 sind exakt `--sto-line` und `--sto-muted` -- aber die sind in store-seite.css definiert, und die wird auf der Produktseite wie auf der Kollektionsseite NICHT geladen. Eine var()-Schreibweise fiele hier auf den Anfangswert zurueck, also auf gar keine Farbe. ⚠ Der Block steht an derselben Stelle wie `.kollektion-stillgelegt` und schliesst sich mit ihm aus (eine stillgelegte Kollektion hat keinen Text, eine ausgelieferte keinen Hinweis). Beide duerfen deshalb nicht unterschiedlich weit vom Titelblock abstehen. */ /* ⚠ margin-bottom IST NICHT KOSMETIK, SONDERN DER EINZIGE ABSTAND NACH UNTEN. Auftraggeber am 2026-08-19: "Unter dem Verweis ist zu wenig Abstand zur Teilen-Leiste." Grund: `.cont`, der Produkttext zwischen Block und `.share`, ist auf den Produktseiten LEER -- `content` kommt aus dem Ordersystem und ist dort nicht gepflegt. Ein leeres
ohne eigene Regel (in KEINER der fuenf geladenen CSS steht etwas zu `.cont`) ist 0px hoch, und `.share` bringt keinen margin-top mit (collectionDetail.css, Zeile 57). Ohne diese Zeile beruehrt die Unterlinie des Verweises die Symbolreihe. 2.4rem und nicht 1.5rem: derselbe Wert wie `margin-top` daruber, und im Entwurf steht genau diese Zahl zwischen Textspalte und Teilen-Leiste (`.bestand{margin-top:2.4rem}`). Der Hinweis auf eine stillgelegte Kollektion haelt an derselben Stelle 24px -- 2.4rem sind 38px, also mehr. Das ist gewollt: Die beiden Bloecke schliessen einander aus, sie stehen nie nebeneinander, und der Hinweis endet in einer Verweiszeile ohne Unterlinie. */ .kt-block { border-top: 1px solid #DDD9D5; margin-top: 2.4rem; padding-top: 1.6rem; margin-bottom: 2.4rem; } /* Heute ungenutzt: Ueberschrift und Kollektionsname sind am 2026-08-19 entfallen -- ueber dem Block steht bereits "Collection: ", das waere zweimal dieselbe Aussage. Die Regel bleibt, weil die Vorlage das Feld weiterhin zeichnen WUERDE, wenn es jemand fuellt; ohne sie erschiene dann eine unformatierte Ueberschrift. */ .kt-block h2 { margin: 0 0 .7rem; font-family: "Overpass-Light", sans-serif; font-size: 1.15rem; line-height: 1.3; color: #363636; } .kt-block p { margin: 0; font-family: "Overpass-Light", sans-serif; font-size: 1rem; line-height: 1.7; color: #6E6A66; } /* Overpass-Light wie im Entwurf (dort Jost 300). ⚠ Bei .72rem sind das rund 11,5px in Versalien mit .2em Laufweite -- die duennste Stelle der Seite. Faellt das im Augenschein auf, ist Overpass-Regular der naechste Schritt; die Groesse bliebe dann gleich. */ .kt-block a { display: inline-block; margin-top: 1.1rem; font-family: "Overpass-Light", sans-serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #363636; text-decoration: none; border-bottom: 1px solid #363636; padding-bottom: .2rem; transition: opacity .2s; } .kt-block a:hover { opacity: .6; }