/* FARBAUDIT 21.08.2026 (Sitzung FARBEN, Auftrag Yunus "farbliche Uebereinstimmung"): verbotene Flaechentoene auf die Systemflaeche #f6f5f3 gezogen. Aenderungen unten je Datei benannt; Rueckbau ueber .bak-farbaudit-20260821. Struktur/Selektoren unberuehrt. */ /* Geaendert: #f7f6f9 -> #f6f5f3 (Token --fs-grund-weich (derzeit ungenutzt)) */ /* ============================================================================ fs-start.css — die neue Startseite, von Null aufgebaut ---------------------------------------------------------------------------- Angelegt 19.08.2026 auf Anweisung Yunus: "wir ziehen es von 0 auf", "was Nick gemacht hat, nicht beachten". WARUM EINE EIGENE DATEI und nicht fs-redesign.css: 1. Auf fs-redesign.css arbeitet parallel eine zweite Sitzung. Zwei Read-modify-write-Zugriffe auf dieselbe Datei loeschen sich gegenseitig. 2. Rueckrollen = diese Datei loeschen. Kein Suchen nach Abschnittsgrenzen. GELTUNGSBEREICH: ausschliesslich die Startseite. Anker ist #content:has(#fs-geschmacksfinder) — den Container rendert nur page/index.tpl. Die uebrigen 368 OPC-Seiten bleiben unberuehrt. WAS WEITER GILT (nicht aufgehoben): - Regel Null: die Seite muss danach funktionieren. - Linkmenge eingefroren: kein Link kommt, keiner faellt weg, kein Ziel aendert sich. Anordnung ist frei. - Kein itemprop/itemtype verlieren, keine Ueberschriftenebene aendern. - Farbenblindheit: kein Zustand nur ueber Magenta erkennbar. Stand: Geruest. Noch keine sichtbare Regel. ============================================================================ */ /* ============================================================================ 1 — GRUNDLAGEN ---------------------------------------------------------------------------- Die Werte, auf die sich jeder folgende Block bezieht. Wer hier etwas aendert, aendert die ganze Seite — genau dafuer stehen sie an einer Stelle. Farben: Magenta gibt es zweimal. #e5169f fuer FLAECHEN (Knopf, Balken), #c90f88 fuer TEXT auf Weiss — die helle Fassung erreicht auf Weiss nur 4,24:1 und liegt damit unter dem Mindestwert 4,5:1 (Befund F26). ============================================================================ */ #content:has(#fs-geschmacksfinder) { --fs-ink: #111114; /* Ueberschriften, harte Kanten */ --fs-ink-soft: var(--brand-grau-tief); /* Fliesstext */ --fs-line: #e6e3ea; /* Hairlines, Trenner */ --fs-flaeche: #e5169f; /* Magenta als Flaeche */ --fs-schrift: #c90f88; /* Magenta als Text auf Weiss, 5,37:1 */ --fs-grund: #ffffff; --fs-grund-weich:#f6f5f3; /* Vertikaler Rhythmus. Ein Wert, drei Groessen — waechst mit dem Fenster. */ --fs-luft: clamp(56px, 6.5vw, 104px); /* zwischen Abschnitten */ --fs-luft-s: clamp(28px, 3.2vw, 48px); /* innerhalb eines Abschnitts */ } /* --------------------------------------------------------------------------- 2 — ABSCHNITTSRHYTHMUS Gemessen vor dem Eingriff: die Abschnitte standen mit 30 / 0 / 0 px aneinander — die Seite wirkte abgerissen, nicht aufgeraeumt. Der Abstand kommt auf den oberen Rand jedes Abschnitts ausser dem ersten, damit kein doppelter Abstand entsteht, wo Bloecke eigene Innenraender haben. --------------------------------------------------------------------------- */ #content:has(#fs-geschmacksfinder) > div, #content:has(#fs-geschmacksfinder) > section { margin-top: var(--fs-luft); } /* Der erste sichtbare Abschnitt braucht Abstand zum Header, keinen Rhythmus. */ #content:has(#fs-geschmacksfinder) > div:first-of-type { margin-top: var(--fs-luft-s); } /* Luft vor dem Footer, sonst klebt der letzte Block daran. */ #content:has(#fs-geschmacksfinder) > *:last-child { margin-bottom: var(--fs-luft); } /* Verborgene Abschnitte duerfen keinen Rhythmus erzeugen — display:none nimmt zwar keinen Platz, der Nachbar bekaeme aber den Abstand des ersten sichtbaren Elements falsch zugeteilt. */ #content:has(#fs-geschmacksfinder) > [style*="display: none"] { margin: 0; } /* ============================================================================ 3 — BLOCK 1: TEXTABSCHNITT UND FAQ ---------------------------------------------------------------------------- Der einzige Inhaltsblock, der nach dem Abraeumen stehen geblieben ist. Drei gemessene Maengel, alle rein optisch behoben — kein DOM-Eingriff, keine Ueberschriftenebene angefasst, kein Link beruehrt. 1. Blocksatz bei 325 px Spaltenbreite. Erzeugt Loecher zwischen den Woertern ("Dein Dampfer-Shop fuer Vapes"). Linksbuendig plus automatische Silbentrennung liest sich in schmalen Spalten deutlich ruhiger. 2. Fliesstext 14,06 px / 21,09 px. Zu klein und zu eng fuer laengeren Text. 3. Die FAQ-Schaltflaechen stehen auf white-space:nowrap. "Welche Zahlungsmethoden werden akzeptiert?" braucht 397 px in einem 353 px breiten Kasten und wird abgeschnitten. Gemessen, nicht vermutet. ============================================================================ */ /* --- 1. Blocksatz raus, Silbentrennung rein --- Der Blocksatz steht als INLINE-STYLE im OPC-Inhalt selbst (style="text-align: justify;" an jedem Absatz). Gegen ein Inline-Attribut hilft keine Spezifitaet — nur !important. Deshalb hier eine bewusste, auf EINE Eigenschaft begrenzte Ausnahme. hyphens braucht sie nicht. Sauberer waere es, den Inline-Style im OPC zu loeschen — das braucht Backend-Zugang und ist nicht rueckrollbar. */ #content:has(#fs-geschmacksfinder) .container-inner > .row.mt-5 :is(p, h1, h2, h3, h4, li) { text-align: left !important; hyphens: auto; -webkit-hyphens: auto; } /* --- 2. Lesegroesse --- */ #content:has(#fs-geschmacksfinder) .container-inner > .row.mt-5 :is(p, li) { font-size: 16px; line-height: 1.65; color: var(--fs-ink-soft); } #content:has(#fs-geschmacksfinder) .container-inner > .row.mt-5 li + li { margin-top: 6px; } /* Ueberschriften: Groesse und Abstand, NICHT die Ebene. Die Ebenen (H1 -> H3, FAQ H3 -> H2) sind bestehender Bestand und SEO-Tabuzone — sie werden hier ausdruecklich nicht angeruehrt. */ #content:has(#fs-geschmacksfinder) .container-inner > .row.mt-5 :is(h1, h2, h3, h4) { color: var(--fs-ink); letter-spacing: -.01em; } #content:has(#fs-geschmacksfinder) .container-inner > .row.mt-5 :is(h2, h3, h4):not(.card-header *) { margin-top: var(--fs-luft-s); } /* --- 3. FAQ-Zeilen duerfen umbrechen --- */ #content:has(#fs-geschmacksfinder) .container-inner > .row.mt-5 .opc-Accordion-head { white-space: normal; text-align: left; line-height: 1.4; } /* ============================================================================ T - TAKT DER STARTSEITE (Sitzung GUSS, 21.08.2026) ---------------------------------------------------------------------------- ANLASS (Yunus): "wirkt nicht aus einem Guss, sondern wie verschiedene Bauteile nacheinander gelegt". Gemessen war der Abstand zwischen den sechs Abschnitten jedes Mal ein anderer: 34 / 46 / 124 / 164 / 164 / 124 px. Das Auge liest Abstand als Zugehoerigkeit - fuenf verschiedene Abstaende sagen "diese Bloecke gehoeren nicht zusammen". Gewaehlt hat Yunus 32 px ("so eng wie moeglich, aber nicht gepresst"). Ergebnis: alle sechs Uebergaenge exakt 32, Seite 438 px kuerzer. NUR AB 992px. Anweisung Yunus 21.08.: "Mobil vorerst nicht anfassen." Die Formensprache (fs-kanon.css) gilt dagegen auf allen Breiten - das hat er ausdruecklich nachgereicht. EIN LEVER: Alle Abstaende laufen ueber --fs-takt. Wer den Wert aendert, aendert den ganzen Takt. Die Abschnitte tragen kein eigenes Polster mehr, ausser sie haben eine Flaeche (Staffel) - eine Flaeche ohne Innenabstand klebt an ihrem Inhalt. ============================================================================ */ @media (min-width:992px){ #content:has(#fs-geschmacksfinder){ --fs-takt:32px; --fs-polster:26px; } #content:has(#fs-geschmacksfinder) > .container.opc-Container.container-badge-desktop, #content:has(#fs-geschmacksfinder) > section.container.fs-campaign-mosaic, #content:has(#fs-geschmacksfinder) > .container.fs-gf-wrapper, #content:has(#fs-geschmacksfinder) > #fs-most-wanted, #content:has(#fs-geschmacksfinder) > #fs-staffel, #content:has(#fs-geschmacksfinder) > section.index-news-wrapper, #content:has(#fs-geschmacksfinder) > div:has(> #fs-info){ margin-top:var(--fs-takt); margin-bottom:0; padding-top:0; padding-bottom:0; } /* Der erste Abschnitt hat keinen Vorgaenger, also auch keinen Vorlauf. */ #content:has(#fs-geschmacksfinder) > .container.opc-Container.container-badge-desktop{ margin-top:0; } /* Abschnitte mit Flaeche brauchen Innenpolster, sonst klebt der Inhalt an der Kante. */ #content:has(#fs-geschmacksfinder) > #fs-staffel{ padding:var(--fs-polster) 0; } /* #fs-info bringt eigene 48px Rand und 56px Polster mit. Der RAND legt sich ueber den Takt - gemessen kamen dadurch 48 statt 32 heraus, der wird hier genullt. KORREKTUR 21.08. (Sitzung STAFFEL, Anweisung Yunus "da ist keine freie Flaeche ueber der Ueberschrift"): das POLSTER wurde hier mitgenullt, und das war falsch. Innenpolster wirkt INNERHALB der Flaeche und traegt zum Abstand zwischen den Abschnitten nichts bei - genullt klebte die Eyebrow mit 14px an der Oberkante, waehrend unten 68px leer standen. Das eigene Polster aus fs-seotext.css gilt jetzt wieder. */ #content:has(#fs-geschmacksfinder) #fs-info{ margin-top:0; } /* ---- Kopfleiter: gleicher Rang, gleiche Groesse ---- Vorher: Blog 49px, Most Wanted 46px, Staffel 36px - drei Groessen fuer dieselbe Ebene. Das Gewicht 400 erzwingt fs-kanon.css shopweit. */ #content:has(#fs-geschmacksfinder) #fs-mw-titel, #content:has(#fs-geschmacksfinder) #fs-st-titel, #content:has(#fs-geschmacksfinder) #fog-story-wall-title{ font-size:40px; letter-spacing:.5px; line-height:1.02; margin:0 0 16px; } } /* ============================================================================ M - TAKT DER STARTSEITE, MOBIL (Sitzung SECTION-MOBIL, 23.08.2026) ---------------------------------------------------------------------------- ANLASS (Yunus, 23.08.): "die Abstaende zwischen den SECTIONS auf der Landingpage muessen wir vereinheitlichen und verkleinern". Damit ist die Ausnahme aus Abschnitt T ("Mobil vorerst nicht anfassen", 21.08.) aufgehoben. GEMESSEN VORHER bei 390px - sechs Uebergaenge, vier verschiedene Abstaende: Rail -> Mosaik 31 px Mosaik -> Geschmacksfinder 40 px Finder -> Most Wanted 84 px Most Wanted -> Staffel 112 px Staffel -> Blog 112 px Blog -> Info/SEO 84 px (+56 px aus einem unsichtbaren Container) DREI URSACHEN, alle hier behoben: 1. Der Grundrhythmus aus Abschnitt 2 (--fs-luft, 56px) laeuft mobil ungebremst durch. 2. Die Abschnitte bringen zusaetzlich je 28px Innenpolster oben UND unten mit: 56 + 28 + 28 = 112. Polster gehoert aber nur dorthin, wo eine FLAECHE ist (Staffel, Info) - sonst polstert es gegen nichts. 3. Drei Container mit Hoehe 0 stehen zwischen den Abschnitten und schieben mit eigenen Raendern: .link-content (14px), ein leerer opc-Container, und .newsletter-login (56px, direkt vor dem Info-Block). Unsichtbar, aber platzwirksam - deshalb der Reset auf ALLE direkten Kinder, bevor der Takt gezielt wieder vergeben wird. GEWAEHLT HAT YUNUS 24px (Vorschlag angenommen 23.08.). Warum nicht die 32 vom Desktop: mobil laeuft jeder Abschnitt ueber die volle Fensterbreite, die Trennung leisten Flaeche und Ueberschrift bereits. Luft muss nur noch "neuer Block" sagen, nicht trennen. Ergebnis gemessen: alle sechs Uebergaenge exakt 24, Seite 5243 -> 4936 px. EIN LEVER: alles laeuft ueber --fs-takt-m / --fs-polster-m. RUECKBAU: diesen Abschnitt loeschen - Abschnitt 2 uebernimmt dann wieder. ============================================================================ */ @media (max-width:991.98px){ #content:has(#fs-geschmacksfinder){ --fs-takt-m:24px; --fs-polster-m:20px; } /* Reset zuerst: auch die Container mit Hoehe 0 verlieren ihre Raender. div und section stehen hier EINZELN, nicht als "> *" - Abschnitt 2 setzt seinen Rhythmus ueber Typ-Selektoren, und ein Typ schlaegt den Universal- selektor bei gleicher Id-Zahl. Mit "> *" behielt der unsichtbare .newsletter-login seine 56px und der letzte Uebergang blieb bei 56 statt 24 (gemessen 23.08.). */ #content:has(#fs-geschmacksfinder) > *, #content:has(#fs-geschmacksfinder) > div, #content:has(#fs-geschmacksfinder) > section{ margin-top:0; margin-bottom:0; } /* Takt danach, gezielt auf die sieben sichtbaren Abschnitte. */ #content:has(#fs-geschmacksfinder) > .container.opc-Container, #content:has(#fs-geschmacksfinder) > section.container.fs-campaign-mosaic, #content:has(#fs-geschmacksfinder) > .container.fs-gf-wrapper, #content:has(#fs-geschmacksfinder) > #fs-most-wanted, #content:has(#fs-geschmacksfinder) > #fs-staffel, #content:has(#fs-geschmacksfinder) > section.index-news-wrapper, #content:has(#fs-geschmacksfinder) > div:has(> #fs-info){ margin-top:var(--fs-takt-m); margin-bottom:0; padding-top:0; padding-bottom:0; } /* Der erste Abschnitt hat keinen Vorgaenger, also auch keinen Vorlauf. */ #content:has(#fs-geschmacksfinder) > .container.opc-Container{ margin-top:0; } /* Die Staffel bekommt hier KEIN Polster - anders als im Desktop-Takt. Gemessen 23.08.: die graue Flaeche ist nicht die section selbst, sondern das Kind .fs-st-wrapper, und das bringt eigene 18px mit. Polster auf der section liegt also AUSSERHALB der Flaeche und wirkt als zusaetzlicher Abstand - der Uebergang Most Wanted -> Staffel mass dadurch optisch 44 statt 24 px. --fs-polster-m bleibt als Stellschraube stehen, falls ein Abschnitt ohne eigenes Innenpolster dazukommt. */ #content:has(#fs-geschmacksfinder) > #fs-staffel{ padding:0; } /* Der Blog-Block traegt eine WEISSE Flaeche auf weissem Grund - sie ist nicht zu sehen, ihre 28px Polster oben und unten sind aber zu spueren: sie kamen zum Takt hinzu (24 + 28 = 52 optisch). Auf einer unsichtbaren Flaeche polstert nichts, also weg damit. Die GRAUEN Flaechen (Staffel, Info) behalten ihr Polster - dort trennt es Kante von Inhalt. */ #content:has(#fs-geschmacksfinder) .fog-story-wall{ padding-top:0; padding-bottom:0; } /* #fs-info bringt aus fs-seotext.css eigenen Rand (32px) UND eigenes Polster mit. Der RAND legt sich auf den Takt und ergaebe 56 statt 24 - er wird genullt. Das POLSTER bleibt: es wirkt INNERHALB der grauen Flaeche und traegt zum Abstand zwischen den Abschnitten nichts bei (dieselbe Korrektur wie im Desktop-Takt, Abschnitt T). */ #content:has(#fs-geschmacksfinder) #fs-info{ margin-top:0; } /* Luft vor dem Footer bleibt erhalten - Abschnitt 2 setzt sie auf dem letzten Kind, der Reset oben haette sie sonst mitgenommen. */ #content:has(#fs-geschmacksfinder) > *:last-child{ margin-bottom:var(--fs-takt-m); } /* AUSNAHME Rail -> Banner (Anweisung Yunus 27.08.2026, Sitzung GESCHMACKSFINDER): das Kampagnen-Mosaik rueckt mobil 8px naeher ans Kategoriekarussell (24 -> 16px Takt NUR auf diesem Uebergang, gemessen vorher/nachher bei 390px). Steht bewusst NACH der Takt-Vergabe oben - gleicher Selektor, spaeter im Kaskadenlauf gewinnt. */ #content:has(#fs-geschmacksfinder) > section.container.fs-campaign-mosaic{ margin-top:calc(var(--fs-takt-m) - 8px); } }