/* ========================================================================================== Wholesale-Seite -- Ergaenzungen zu store-seite.css Grundlage: documentation/Entwurf-Wholesale.html und documentation/Wholesale-Seite-Konzept.md REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .wh ------------------------------------------------------------------------------------------ Das Element
traegt beide Klassen. `.sto` bringt Gestaltungswerte, Ruecksetzungen, Kopfzeilenausgleich und alle Bausteine mit, die der Entwurf ohnehin zeichnet -- Titelbereich, Kennzahlen, Merkkasten, Zweispalter, Ablauf mit selbst nummerierten Schritten, Fragen und das dunkle Abschlussband. Hier steht nur, was neu ist. store-seite.css WIRD NICHT GEAENDERT. 24 Store-Seiten haengen daran. Wo die Wholesale-Seite abweicht, steht die Abweichung hier und gewinnt ueber die zusaetzliche Klasse `.wh` (0,2,0 gegen 0,1,0) -- nicht ueber !important und nicht ueber die Reihenfolge. SCHRIFT UND GROESSEN kommen aus store-seite.css: Overpass, Fliesstext 1.0625rem = 17px. Die Gestaltungswerte (--sto-ink, --sto-line, --sto-shell, --sto-muted, --sto-pad) sind an `.sto` deklariert und hier ohne Weiteres benutzbar. GEMESSEN, NICHT GESCHAETZT (2026-08-12, aus Overpass-Medium.ttf, Werkzeug: der TrueType-Leser aus documentation/tools/md2pdf.py): "Anfrage senden" 198.3px + "Der Ablauf" 155.7px + 1rem Luecke = 370.0px. Die Textspalte des Titelbereichs ist bei 1180px Fensterbreite 549px breit (Teilung 1fr .8fr) -- 179px Rest. In Jost waeren es 347.7px gewesen; die 22px Unterschied sind hier ohne Belang. Bei den Store-Seiten war es knapp (467.7 von 494px), deshalb die Messung. ========================================================================================== */ /* ---------- Fettung im Fliesstext ---------- Gilt fuer beides: das , das die Vorlage aus `**...**` erzeugt, und das vor einem Voraussetzungspunkt. Sichtbar sind sie dasselbe; der Unterschied ist ausschliesslich semantisch und in template-wholesale.blade.php begruendet. ⚠ DER ENTWURF SCHREIBT HIER `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 (store-seite.css, u. a. .sto-zeiten dt). 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. Deshalb hier die Familie statt des Gewichts, wie ueberall sonst in diesem Projekt. `font-weight: normal` gehoert dazu und ist kein Beiwerk: Browser stellen und von sich aus auf 700. Overpass-Medium ist mit 500 deklariert (designer.css); bliebe die 700 stehen, legte der Browser ueber den Medium-Schnitt zusaetzlich eine synthetische Fettung. Dasselbe Paar steht aus demselben Grund an sechs Stellen in store-seite.css. ⚠ WARUM `p` UND `li` IM SELEKTOR STEHEN UND NICHT NUR `.wh b`: Die Kennzahlenreihe benutzt ebenfalls ein (.sto-zahl b, store-seite.css:444) -- die grossen Zahlen 90+, 30, seit 2011, 400+ in Overpass-THIN. `.wh b` laege bei (0,1,1) und damit GLEICHAUF mit `.sto-zahl b`; bei Gleichstand entscheidet die Ladereihenfolge, und wholesale.css wird nach store-seite.css geladen. Die Zahlen waeren also von Thin auf Medium gesprungen -- ein Schaden an einer Stelle, die mit der Fettung nichts zu tun hat. Mit `p` und `li` liegt die Regel bei (0,1,2), gewinnt dort, wo sie soll, und erreicht die Zahlen nicht: Die stehen in einem
, nicht in einem Absatz. Entschieden ueber die Spezifitaet, nicht ueber die Reihenfolge -- dieselbe Hausregel wie oben. */ .wh p b, .wh p strong, .wh li b, .wh li strong { font-family: "Overpass-Medium", sans-serif; font-weight: normal; } /* ---------- Titelbereich: schmalere Bildspalte ---------- Der Entwurf teilt 1fr .8fr statt 1fr 1fr -- der Text traegt die Seite, das Bild begleitet sie nur. Der Haltepunkt bleibt bei 1024px wie in store-seite.css. */ @media (min-width: 1024px) { .wh .sto-hero-grid { grid-template-columns: 1fr 0.8fr; } } /* ---------- Kennzahlen schliessen direkt an den Titelbereich an ---------- Ohne diese Regel stuenden zwischen Titelbereich und Kennzahlen zwei volle Abschnittspolster (bis zu 7rem), und die Zahlenreihe verlore den Bezug nach oben. */ .wh .wh-zahlen-abschnitt { padding-top: 0; } /* ---------- Punkte ohne Kasten ---------- Der Entwurf zeichnet bei der B2B-Plattform dieselben Striche wie im Merkkasten, aber ohne Rahmen und ohne Polster. .sto-kasten bringt beides mit -- hier wird es zurueckgenommen. */ .wh .wh-liste { border: 0; padding: 0; margin-top: 2rem; } /* ---------- Vorteile ---------- Zwei Spalten ab Tablet, Trennlinien wie im Entwurf. Die Nummer entsteht aus einem CSS-Zaehler und nicht aus einem Feld: Beim Umsortieren im Panel stimmt sie damit von selbst. Derselbe Weg, den .sto-schritt fuer den Ablauf geht. */ .wh-vorteile { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--sto-line); margin-top: 2.5rem; counter-reset: wh-vorteil; } .wh-vorteil { padding: 2rem 0; border-bottom: 1px solid var(--sto-line); } .wh-vorteil::before { counter-increment: wh-vorteil; content: counter(wh-vorteil, decimal-leading-zero); display: block; margin-bottom: 0.9rem; font-family: "Overpass-Medium", sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--sto-muted); } .wh-vorteil p { font-size: 0.95rem; color: var(--sto-muted); line-height: 1.7; } @media (min-width: 760px) { .wh-vorteile { grid-template-columns: 1fr 1fr; } /* Die senkrechte Trennlinie steht zwischen den Spalten, nicht am Rand. */ .wh-vorteil:nth-child(odd) { border-right: 1px solid var(--sto-line); padding-right: 3rem; } .wh-vorteil:nth-child(even) { padding-left: 3rem; } } /* ---------- Ablauf: fuenf Schritte statt vier ---------- store-seite.css schaltet .sto-ablauf ab 1024px auf vier Spalten -- die Store-Seiten haben vier Schritte. Dieser Ablauf hat fuenf. Ohne diese Regel stuende der fuenfte allein in einer zweiten Zeile. */ @media (min-width: 1024px) { .wh .wh-ablauf-fuenf { grid-template-columns: repeat(5, 1fr); } } /* ---------- Konditionen ---------- Eine echte Tabelle: Es sind Wertepaare, und sagt sie als solche an. Auf dem Telefon bleiben die Spalten nebeneinander -- bei 375px sind das rund 120px fuer die Bezeichnung und 175px fuer den Wert, beides lesbar, und ein Umbruch in Bloecke waere hier schwerer zu erfassen als die Tabelle. */ .wh-kond { width: 100%; border-collapse: collapse; margin-top: 2rem; } .wh-kond th, .wh-kond td { text-align: left; padding: 1.1rem 1.4rem 1.1rem 0; border-bottom: 1px solid var(--sto-line); vertical-align: top; } .wh-kond th { width: 38%; font-family: "Overpass-Medium", sans-serif; font-size: 0.72rem; font-weight: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sto-muted); line-height: 1.7; } /* ---------- Fragen: Linie oben ---------- .sto-frage traegt nur eine Linie unten. Der Entwurf setzt eine Linie ueber die erste Frage, damit die Liste als Block beginnt. */ .wh-fragen { margin-top: 2rem; border-top: 1px solid var(--sto-line); } /* ========================================================================================== Formular Gestaltet wird hier und nicht ueber form.css: page.css und form.css gehoeren zur alten Seitengestaltung und braechten eine zweite Formenwelt auf diese Seite. Aus Bootstrap bleiben nur `needs-validation` und `invalid-feedback` in Gebrauch -- an ihnen haengt die Rueckmeldung, sie brauchen kein `form-control`. ========================================================================================== */ .wh-formular { background: var(--sto-shell); padding: clamp(1.6rem, 4vw, 2.6rem); margin-top: 2rem; } .wh-feld { margin-bottom: 1.4rem; } .wh-feld:last-of-type { margin-bottom: 0; } .wh-feld label { display: block; margin-bottom: 0.6rem; font-family: "Overpass-Medium", sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sto-muted); } /* Schriftgroesse 1rem und nicht kleiner: Unter 16px zoomt iOS beim Antippen eines Feldes. Dieselbe Ueberlegung wie beim Fliesstext in store-seite.css. */ .wh-feld input[type="text"], .wh-feld input[type="email"], .wh-feld select, .wh-feld textarea { width: 100%; min-height: 2.75rem; padding: 0.85rem 1rem; border: 1px solid var(--sto-line); background: var(--sto-paper); color: var(--sto-ink); font-family: "Overpass-Light", sans-serif; font-size: 1rem; line-height: 1.5; } .wh-feld textarea { min-height: 7rem; resize: vertical; } .wh-feld input:focus, .wh-feld select:focus, .wh-feld textarea:focus { outline: 0; border-color: var(--sto-ink); } .wh-feld-duo { display: grid; grid-template-columns: 1fr; gap: 0 1.4rem; } @media (min-width: 700px) { .wh-feld-duo { grid-template-columns: 1fr 1fr; } } /* intlTelInput schiebt einen eigenen Behaelter um das Feld. Ohne diese Zeile steht das Telefonfeld schmaler als die uebrigen. */ .wh-feld-telefon .iti { width: 100%; } /* ---------- Einwilligung ---------- */ .wh-haken { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; margin-top: 1.8rem; } /* Die Meldung des Einwilligungshakens muss ueber BEIDE Rasterspalten laufen (P-92, 18.08.2026). Ohne diese Zeile landet sie als drittes Kind in Zeile 2, Spalte 1 -- also unter dem Kaestchen und 0,8rem schmal. Der Block traegt `wh-feld` bereits mit, deshalb greift die :has()-Regel weiter oben ohne Zutun. */ .wh-haken .invalid-feedback { grid-column: 1 / -1; } .wh-haken input { width: 1.1rem; height: 1.1rem; margin-top: 0.35rem; } /* Diese Beschriftung ist Fliesstext mit einem Verweis, keine Feldbezeichnung -- deshalb nimmt sie die Werte des Fliesstextes zurueck. */ .wh-haken label { margin-bottom: 0; font-family: "Overpass-Light", sans-serif; font-size: 0.95rem; letter-spacing: normal; text-transform: none; color: var(--sto-ink); line-height: 1.6; } .wh-haken a { text-decoration: underline; } /* ---------- reCAPTCHA ---------- */ .wh-captcha { margin-top: 1.8rem; } .wh-captcha .g-recaptcha { display: flex; justify-content: center; } /* ---------- Meldungen ---------- NEUGESTALTUNG VOM 2026-08-14 (Weisung des Auftraggebers): voller Rahmen statt des senkrechten Strichs, hellgraue Flaeche, mehr Innenabstand, erste Zeile groesser und halbfett. Die Meldung war zu unauffaellig -- sie steht im ELFTEN von zwoelf Abschnitten, und der Browser landet nach dem POST oben (P-51). Der Sprung dorthin steht in anfrage.blade.php; sichtbar sein muss sie trotzdem, wenn man dort ankommt. KEIN GRUEN. Das fruehere #2E6B3E an der Erfolgsmeldung ist entfallen -- die Seite traegt Schwarz, Weiss und Grau (Weisung vom 2026-08-14). Die Erfolgsmeldung braucht keine Farbe: Sie erscheint nur, wenn etwas geklappt hat, und sagt das im Text. DAS ROT DER FEHLERMELDUNG BLEIBT (#A33A2A, Weisung vom 2026-08-14, nachdem es zwischendurch entfallen war). Eine Fehlermeldung muss man auf einen Blick von einer Bestaetigung unterscheiden koennen -- das ist der eine Fall, in dem die Farbe arbeitet und nicht nur schmueckt. Der Rahmen ist 1px, nicht 2px: Auf hellgrauem Grund traegt schon die Flaeche, und ein 2px-Rahmen um einen gefuellten Kasten wirkt wie ein Warnschild -- genau das soll die Erfolgsmeldung nicht sein. */ .wh-meldung { margin-bottom: 1.6rem; padding: clamp(1.25rem, 3vw, 1.8rem); border: 1px solid var(--sto-ink); background: var(--sto-shell); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; } /* Erste Zeile: groesser und halbfett. `Overpass-Medium` IST der halbfette Schnitt dieser Familie -- `font-weight` bleibt deshalb auf normal, sonst rechnet der Browser eine zweite, kuenstliche Fettung obendrauf. ⚠ SCHRIFT UND GEWICHT KOMMEN HIER ZWEIMAL: `.wh p b` weiter oben ist mit (0,1,2) SPEZIFISCHER als diese Klasse (0,1,0) und setzt beide Eigenschaften bereits -- auf dieselben Werte, deshalb faellt es heute nicht auf. Sie stehen hier trotzdem ausgeschrieben, damit die Meldung nicht still ihr Aussehen aendert, wenn jemand `.wh p b` anfasst. Wer sie hier aendert und keine Wirkung sieht, hat genau diese Regel vor sich: dann muss der Selektor auf `.wh .wh-meldung-kopf` (0,2,0) hoch. Nur `font-size` und `display` gehoeren dieser Klasse allein. */ .wh-meldung-kopf { display: block; margin-bottom: 0.5rem; font-family: "Overpass-Medium", sans-serif; font-weight: normal; font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.35; } /* Zweite Zeile in der bisherigen Groesse -- die erbt sie von .wh-meldung, hier steht nur der Umbruch. Ohne `display: block` staende sie hinter der ersten Zeile in derselben. */ .wh-meldung-text { display: block; } /* Die Fehlermeldung traegt denselben Kasten in Rot und mit kraeftigerem Rahmen. BEIDES, NICHT NUR DIE FARBE: Wer Rot nicht von Schwarz unterscheidet -- rund jeder zwoelfte Mann -- sieht dann immer noch den staerkeren Rahmen. Die Aussage darf nicht an der Farbe allein haengen (WCAG 1.4.1); dritter Traeger ist role="alert". */ .wh-meldung-schlecht { border-width: 2px; border-color: #A33A2A; } /* Die Liste der Validierungsmeldungen im Fehlerkasten (S-13, 18.08.2026). Sie steht BEWUSST OHNE UEBERSCHRIFT im Kasten -- ein eigener Schluessel dafuer waere neu und erschiene auf fuenf von sechs Sprachfassungen englisch (P-78), ausgerechnet ueber Meldungen, die selbst uebersetzt sind. Traeger der Aussage sind der rote Rahmen aus .wh-meldung-schlecht, role="alert" und die Saetze selbst. Kein `list-style: none`: Die Aufzaehlungszeichen sind hier die Information -- sie zeigen, dass es MEHRERE Beanstandungen sind. Bei genau einer faellt der Punkt nicht auf. */ .wh-fehlerliste { margin: 0; padding-left: 1.3rem; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.5; } .wh-fehlerliste li + li { margin-top: 0.4rem; } /* ---------- Beanstandete Felder ---------- Nachtrag vom 18.08.2026, P-92. ZWEI LUECKEN, beide vom Auftraggeber am Telefonfeld bemerkt und dann als groesser erwiesen. 1. DIE MELDUNG ERSCHIEN AM TELEFONFELD NIE. Bootstrap blendet sie ueber genau eine Regel ein (alle sieben geladenen Stylesheets durchsucht, es gibt keine zweite): .is-invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-feedback { display: block } Beide Zweige brauchen den GESCHWISTER-Bezug. intlTelInput zerstoert ihn zur Laufzeit -- es setzt einen
vor das Feld und zieht das Feld dann hinein (`insertBefore(b, this.a)` gefolgt von `b.appendChild(this.a)`). Danach liegt das Feld eine Ebene tiefer und ist kein Geschwister der Meldung mehr; sie bleibt auf display:none. Die Regel unten kommt ohne Geschwisterbezug aus und deckt damit JEDES Feld ab, gleich wie tief es verschachtelt ist -- auch ein kuenftiges, das ein anderes Werkzeug umbaut. Bootstraps Regel bleibt daneben stehen: wo sie heute greift, greift sie weiter. ⚠ `:has()` gibt es seit Chrome 105, Safari 15.4 und Firefox 121 (alle 2022/2023). Wo es fehlt, bleibt es beim bisherigen Verhalten -- es faellt nichts zurueck. 2. KEIN FELD DIESES FORMULARS WIRD ROT UMRANDET, und das war nie eine Frage des Telefons: Bootstraps Rahmenregel haengt an `.form-control`, und diese Vorlage vergibt die Klasse an KEINEM Feld -- sie bringt ihre Gestaltung selbst mit. Sichtbar war deshalb nur der rote MELDUNGSTEXT, nie ein rotes Feld. ⚠ NICHT MIT `form-control` GELOEST. Die Klasse an das Telefonfeld zu haengen -- der erste Vorschlag -- haette genau ein Feld mit Bootstraps Innenabstand und Warnsymbol versehen und es damit zum Sonderling zwischen seinen Nachbarn gemacht. Richtig ist eine eigene Regel fuer alle. */ .was-validated .wh-feld:has(:invalid) .invalid-feedback { display: block; } .was-validated .wh-feld:has(:invalid) input[type="text"], .was-validated .wh-feld:has(:invalid) input[type="email"], .was-validated .wh-feld:has(:invalid) select, .was-validated .wh-feld:has(:invalid) textarea { border-color: #A33A2A; } /* Die Farbe ist die des Fehlerkastens (.wh-meldung-schlecht), nicht Bootstraps #dc3545 -- zwei Rottoene auf einer Seite waeren ein Versehen. Und wie dort haengt die Aussage nicht an der Farbe allein: die Meldung darunter steht als Text da (WCAG 1.4.1). */ /* Bootstraps .invalid-feedback ist rot und wird erst nach dem ersten Absendeversuch eingeblendet (.was-validated :invalid ~ .invalid-feedback). Hier nur die Schriftwahl, damit sie nicht aus der Seite faellt. */ .wh-formular .invalid-feedback { font-family: "Overpass-Light", sans-serif; font-size: 0.85rem; margin-left: 0; } /* ---------- Absenden ---------- .sto-btn bringt Aussehen und Mindesthoehe mit. Ein