/* ===================================================================== Facettenfleck, Welle 2: Startseite (#ps-home-w6) wie Vorschau „v2-band“ (Mauritz 20.10.2026: V2 gewählt, Nacht-Bronze bleibt, „Fläche endet unter dem Einleitungstext … flächendeckend“; CI-Handbuch Fassung 1.3, ROADMAP § 74). Ersetzt auf der Startseite den Pixel-Tarnfleck (tarnfleck-punktuell.css/.js, tarnfleck-kachel.js lädt facettenfleck-start.php nicht mehr). Der Seiteninhalt bleibt unverändert; diese Datei stellt um: Kopf Nacht-Bronze als Band: Fläche endet --ff-luft unter dem Einleitungstext, Facettensaum zerfällt ins Weiß, Wegweiser und Moritz-Karte liegen halb darauf. Futter (Facettenfleck) unter dem Wegweiser. Warum weiß, Aufnäher mit dem Schild als Fundstück (facettenfleck-fund.js). Stimmen weiß; nur der Schlussblock darin bleibt Nacht-Bronze, über die ganze Breite, Saum oben ins Weiß und unten in den Seitenfuß. Ohne Skript, wie Welle 1: Flächen und Säume sind Pseudo-Elemente, Text steht nie auf dem Saum (Saum im Innenabstand). Nur Tokens aus tokens.css (Stilwache S-01 bis S-06); Bilder liegen neben dieser Datei in facettenfleck/. ===================================================================== */ #ps-home-w6.ps-home-tp { --tp-kante-h: 48px; /* startseite-neu.css rechnet Abstände damit (früher 4 Pixelblöcke aus tarnfleck-punktuell.css) */ --ff-h: 150px; /* Höhe des Saums */ --ff-kopf-oben: 40px; /* Luft zwischen Saum oben und erster Zeile */ --ff-luft: 32px; /* Fläche endet so weit unter dem Einleitungstext */ --ff-grund: var(--ps-farbe-dunkel-marke); --ff-saum-oben: url(facettenfleck/saum-nacht-bronze-oben.svg); --ff-saum-unten: url(facettenfleck/saum-nacht-bronze.svg); --ff-saum-fuss: url(facettenfleck/saum-nacht-bronze-fuss.svg); --ff-kachel: url(facettenfleck/kachel-wald.svg); --ff-aufnaeher: url(facettenfleck/aufnaeher.svg); --ff-schild: url(facettenfleck/schild-messing.svg); } @media (max-width: 700px) { #ps-home-w6.ps-home-tp { --ff-h: 92px; --ff-kopf-oben: 28px; --ff-luft: 20px; } } /* ---- Kopf: Band ---- Die Fläche hängt als Pseudo-Element am Einleitungstext (reicht nach oben bis zum Abschnittsrand, den overflow: clip abschneidet), der Saum oben am Abschnitt. Abschnitt = eigene Stapelebene (w6-dunkel: isolation), Fläche z −2, Säume und Futter z −1, also hinter Wegweiser und Moritz-Karte. */ #ps-home-w6.ps-home-tp .w6-kopf { overflow: clip; padding-block: calc(var(--ff-h) + var(--ff-kopf-oben)) 56px; background: var(--ps-farbe-flaeche); } #ps-home-w6.ps-home-tp .w6-kopf::after { position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: var(--ff-h); background: var(--ff-saum-oben) top center / auto var(--ff-h) repeat-x, linear-gradient(to top, transparent 6px, var(--ps-white) 6px); content: ""; pointer-events: none; } #ps-home-w6.ps-home-tp .w6-kopf .w6-lead { position: relative; } #ps-home-w6.ps-home-tp .w6-kopf .w6-lead::before { position: absolute; z-index: -2; top: -3000px; right: -100vw; bottom: calc(-1 * var(--ff-luft) - 8px); left: -100vw; background: var(--ff-grund); content: ""; pointer-events: none; } #ps-home-w6.ps-home-tp .w6-kopf .w6-lead::after { position: absolute; z-index: -1; top: calc(100% + var(--ff-luft)); right: -100vw; left: -100vw; height: var(--ff-h); background: var(--ff-saum-unten) top center / auto var(--ff-h) repeat-x, linear-gradient(to bottom, transparent 6px, var(--ps-white) 6px); content: ""; pointer-events: none; } /* unter dem Band auf Weiß */ #ps-home-w6.ps-home-tp .w6-kopf .w6-staerken { color: var(--ps-farbe-leise); } /* Futter: Facettenfleck-Platte unter dem Wegweiser (ersetzt dessen Schattenkante) */ #ps-home-w6.ps-home-tp .w6-kopf .w6-ww { box-shadow: none; } #ps-home-w6.ps-home-tp .w6-kopf .w6-ww::before { position: absolute; z-index: -1; top: 16px; right: -16px; bottom: -16px; left: 16px; border-radius: var(--ps-radius-lg); background: var(--ff-kachel) 0 0 / 420px 420px repeat; content: ""; pointer-events: none; } @media (max-width: 700px) { #ps-home-w6.ps-home-tp .w6-kopf { padding-bottom: 40px; } #ps-home-w6.ps-home-tp .w6-kopf .w6-ww::before { top: 10px; right: -10px; bottom: -10px; left: 10px; } } /* ---- Warum und Stimmen: weiß (vorher Nacht-Bronze) ---- Im Inhalt tragen beide noch w6-dunkel; die Regeln dafür (wegweiser-startseite.css) werden hier zurückgenommen. */ #ps-home-w6.ps-home-tp .n-warum, #ps-home-w6.ps-home-tp .w6-stimmen { background: var(--ps-farbe-flaeche); color: var(--ps-farbe-text); } #ps-home-w6.ps-home-tp .n-warum h2, #ps-home-w6.ps-home-tp .n-warum h3, #ps-home-w6.ps-home-tp .w6-stimmen .w6-kopfzeile h2 { color: var(--ps-farbe-kopf); } #ps-home-w6.ps-home-tp .n-warum p, #ps-home-w6.ps-home-tp .n-warum li, #ps-home-w6.ps-home-tp .n-warum .w6-ablauf li p, #ps-home-w6.ps-home-tp .w6-stimmen .w6-kopfzeile p { color: var(--ps-farbe-leise); } #ps-home-w6.ps-home-tp .n-warum a:not(.w6-knopf) { color: var(--ps-farbe-link); } #ps-home-w6.ps-home-tp .n-warum a:not(.w6-knopf):hover { color: var(--ps-farbe-link-hover); } #ps-home-w6.ps-home-tp .n-warum .w6-haken-liste li::after { background-image: var(--w6-haken); } #ps-home-w6.ps-home-tp .n-warum .w6-zahl { border-color: var(--ps-grau-300); background: var(--ps-farbe-flaeche); } #ps-home-w6.ps-home-tp .n-warum .w6-zahl strong { color: var(--ps-farbe-text); } #ps-home-w6.ps-home-tp .n-warum .w6-zahl span { color: var(--ps-farbe-leise); } /* Hinweis zu den Bewertungen: Knopf und Text standen weiß auf Nacht-Bronze (in der Vorschau weiß auf Weiß) */ #ps-home-w6.ps-home-tp .w6-stimmen .w6-stimmen__hinweis, #ps-home-w6.ps-home-tp .w6-stimmen .w6-stimmen__hinweis .w6-infoknopf { color: var(--ps-farbe-leise); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-stimmen__hinweis .w6-infoknopf:hover { color: var(--ps-farbe-text); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-infotext { background: var(--ps-farbe-flaeche-marke); color: var(--ps-farbe-text); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-infotext a { color: var(--ps-farbe-link); } /* Bewertungen enden ohne Abstand im Schlussblock, dessen Saum direkt in den Seitenfuß zerfällt */ #ps-home-w6.ps-home-tp .w6-stimmen { padding-bottom: 0; } /* ---- Schlussblock: Nacht-Bronze über die ganze Breite, Saum oben ins Weiß, unten in den Seitenfuß ---- */ #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss { position: relative; isolation: isolate; margin-top: var(--ps-a-8); padding-block: calc(var(--ff-h) + 40px) calc(var(--ff-h) + 44px); color: var(--ps-farbe-auf-dunkel); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss::before { position: absolute; z-index: -2; top: calc(var(--ff-h) - 8px); right: -100vw; bottom: calc(var(--ff-h) - 8px); left: -100vw; background: var(--ff-grund); content: ""; pointer-events: none; } #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss::after { position: absolute; z-index: -1; top: 0; right: -100vw; bottom: 0; left: -100vw; background: var(--ff-saum-oben) top center / auto var(--ff-h) repeat-x, var(--ff-saum-fuss) bottom center / auto var(--ff-h) repeat-x, linear-gradient(to top, transparent 6px, var(--ps-white) 6px) top / 100% var(--ff-h) no-repeat; content: ""; pointer-events: none; } #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss h2 { color: var(--ps-farbe-auf-dunkel); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss p { color: var(--ps-bronze-100); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss a:not(.w6-knopf) { color: var(--ps-messing-licht); } #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss a:not(.w6-knopf):hover { color: var(--ps-farbe-auf-dunkel); } @media (max-width: 700px) { #ps-home-w6.ps-home-tp .w6-stimmen .w6-schluss { padding-block: calc(var(--ff-h) + 28px) calc(var(--ff-h) + 32px); } } /* ---- Aufnäher mit dem Schild als Fundstück (facettenfleck-fund.js legt den Knopf über den Schild) ---- Schild im Bild bei 112/52, 44 × 48 von 176 × 152 (ci-neu/skripte/facettenfleck.py aufnaeher). */ #ps-home-w6.ps-home-tp .tp-abzeichen { position: relative; width: 176px; height: auto; aspect-ratio: 176 / 152; background: var(--ff-aufnaeher) center / 100% 100% no-repeat; z-index: 2; /* Meldung liegt über den Zahlen darunter */ filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--ps-navy) 25%, transparent)); } @media (max-width: 600px) { #ps-home-w6.ps-home-tp .tp-abzeichen { width: 144px; height: auto; } } #ps-home-w6.ps-home-tp .ff-fund { position: absolute; top: 34.21%; left: 63.64%; width: 25%; height: 31.58%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; } #ps-home-w6.ps-home-tp .tp-abzeichen.ist-gefunden .ff-fund { background: var(--ff-schild) center / 100% 100% no-repeat; image-rendering: pixelated; } #ps-home-w6.ps-home-tp .ff-fund:focus-visible { outline: 3px solid var(--ps-farbe-fokus); outline-offset: 2px; } #ps-home-w6.ps-home-tp .ff-fund__meldung { position: absolute; z-index: 4; top: calc(100% + 8px); left: 0; width: min(280px, calc(100vw - 40px)); /* rechte Spalte ab 1.440 px: Aufnäher bei x 949, Inhalt endet 1.260 */ margin: 0; padding: 12px 16px; border-radius: var(--ps-radius); background: var(--ps-white); box-shadow: var(--ps-merke-schatten); color: var(--ps-farbe-text); font-size: var(--ps-gr-klein); line-height: var(--ps-zeile-klein); } #ps-home-w6.ps-home-tp .ff-fund__meldung[hidden] { display: none; }