/* ===================================================================== Facettenfleck, Welle 1: Kopfband Nacht-Bronze auf allen Seiten und Artikeln mit #ps-sub (Mauritz 20.10.2026: „Bei CI Nacht-Bronze bleiben, aber Fläche endet unter dem Einleitungstext. Das ist der Sweetspot. Bitte so flächendeckend anwenden.“ CI-Handbuch Fassung 1.3, ROADMAP § 74). Welle 3 (live 20.10.2026): Beratungsblock in Nacht-Bronze mit Saum, Abschnitt am Ende dieser Datei. Welle 4 (21.10.2026): derselbe Block auf der Ratgeber-Übersicht (facettenfleck.php lädt die Datei dort seitdem), Saum oben in Creme. Welle 5 (21.10.2026): Kopf der Scrollwelt auf der Ratgeber-Übersicht zerfällt mit Facettensaum ins Creme, Abschnitt am Ende. Welle 6 (21.10.2026): Seiten über die ganze Breite statt im Theme-Rahmen (Kopfband war seitlich abgeschnitten), Abschnitt am Ende. Welle 7 (21.10.2026): Creme als Seitengrund (--ff-grund-hell), Säume zerfallen ins Creme statt ins Weiß, Abschnitt am Ende. Ohne Skript: Die Fläche hängt als Pseudo-Element an der Kopfspalte und endet --ff-luft unter ihr, der Facettensaum zerfällt darunter ins Weiß. Karten, Werkzeuge und Bilder danach liegen halb darauf. #ps-sub ist eigene Stapelebene (isolation), Fläche z −2, Säume und Futter z −1, also hinter jedem Kasten und vor dem Seitengrund. Kopfspalte je Bauform: Leistungsseite = Textspalte neben „Die Lage in Kürze“; Rechner/Dienstgrad = ganze Zeile mit Kopfknöpfen; Baufinanzierung = Kopfzeile; Kontakt = Textspalte; Artikel = „Antwort zuerst“ (eigener Abschnitt). Nur Tokens aus tokens.css (Stilwache S-01 bis S-06); Bilder liegen neben dieser Datei in facettenfleck/. ===================================================================== */ #ps-sub { --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 der Kopfspalte */ --ff-antwort-oben: var(--ps-a-5); /* wie artikel.css, hier festgeschrieben, weil die Fläche davon abhängt */ --ff-grund: var(--ps-bronze-900); --ff-grund-hell: var(--ps-creme); /* Seitengrund, in den die Säume zerfallen (Welle 7, vorher Weiß) */ /* Säume als breite Bilder ohne Kachelung (Welle 3, welle3/baue_breit.py): Chrome zeichnet repeat-x auf Bruchteil-Pixel-Kanten eine Zeile zu weit und mischt die gegenüberliegende Bildkante hinein (graue Haarlinie am Saum, live auch im Kopfband). */ --ff-saum-oben: url(facettenfleck/saum-nacht-bronze-oben-breit.svg); --ff-saum-unten: url(facettenfleck/saum-nacht-bronze-breit.svg); --ff-saum-fuss: url(facettenfleck/saum-nacht-bronze-fuss-breit.svg); --ff-kachel: url(facettenfleck/kachel-wald.svg); --ff-aufnaeher: url(facettenfleck/aufnaeher.svg); } @media (max-width: 700px) { #ps-sub { --ff-h: 92px; --ff-kopf-oben: 28px; --ff-luft: 20px; } } @media (max-width: 600px) { #ps-sub { --ff-antwort-oben: var(--ps-a-3); } } #ps-sub:has(.ps-sub-hero) { isolation: isolate; overflow-x: clip; } /* ---- Kopf durchsichtig, oben Platz für den Saum ---- !important, weil Seiten eigene Kopfabstände im Inhalt setzen (Rechner/Dienstgrade: #ps-sub .ps-sub-hero.ps-sub-hero--kurz, Kontakt: #ps-sub.pal-kontakt .pal-k-hero); ohne Vorrang stünde die Überschrift auf dem Saum. */ #ps-sub section.ps-sub-hero { padding-top: calc(var(--ff-h) + var(--ff-kopf-oben)) !important; background: transparent !important; } #ps-sub section.ps-sub-hero + section:not(.ps-sec--off), #ps-sub section.ps-sec--antwort, #ps-sub section.ps-sec--antwort + section:not(.ps-sec--off) { background: transparent; } #ps-sub section.ps-sub-hero--artikel + section.ps-sec--antwort { padding-top: var(--ff-antwort-oben); } /* Saum oben: vom Weiß unter dem Seitenkopf in die Fläche */ #ps-sub section.ps-sub-hero::before { 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) no-repeat, linear-gradient(to top, transparent 6px, var(--ps-white) 6px); content: ""; pointer-events: none; } /* ---- Kopfspalte je Bauform: Fläche (::before) und Saum unten (::after) ---- */ #ps-sub .ps-sub-hero__inner:has(> .ps-facts) > :first-child, #ps-sub .ps-sub-hero__inner:not(:has(> .ps-facts)), #ps-sub .pal-bf-kopf__zeile, #ps-sub .pal-k-hero__text, #ps-sub .ps-sub-hero--artikel:not(:has(+ .ps-sec--antwort)) > .ps-container, #ps-sub .ps-sub-hero--artikel + .ps-sec--antwort .ps-prose--antwort { position: relative; } #ps-sub .ps-sub-hero__inner:has(> .ps-facts) > :first-child::before, #ps-sub .ps-sub-hero__inner:not(:has(> .ps-facts))::before, #ps-sub .pal-bf-kopf__zeile::before, #ps-sub .pal-k-hero__text::before, #ps-sub .ps-sub-hero--artikel:not(:has(+ .ps-sec--antwort)) > .ps-container::before, #ps-sub .ps-sub-hero--artikel + .ps-sec--antwort .ps-prose--antwort::before { position: absolute; z-index: -2; top: calc(-1 * var(--ff-kopf-oben) - 8px); right: -100vw; bottom: calc(-1 * var(--ff-luft) - 8px); left: -100vw; background: var(--ff-grund); content: ""; pointer-events: none; } /* Artikel: Fläche über den ganzen Kopf, die Antwort darunter setzt sie fort */ #ps-sub .ps-sub-hero--artikel:has(+ .ps-sec--antwort)::after { position: absolute; z-index: -2; top: calc(var(--ff-h) - 8px); right: 0; bottom: -2px; left: 0; background: var(--ff-grund); content: ""; pointer-events: none; } #ps-sub .ps-sub-hero--artikel + .ps-sec--antwort .ps-prose--antwort::before { top: calc(-1 * var(--ff-antwort-oben) - 2px); } #ps-sub .ps-sub-hero__inner:has(> .ps-facts) > :first-child::after, #ps-sub .ps-sub-hero__inner:not(:has(> .ps-facts))::after, #ps-sub .pal-bf-kopf__zeile::after, #ps-sub .pal-k-hero__text::after, #ps-sub .ps-sub-hero--artikel:not(:has(+ .ps-sec--antwort)) > .ps-container::after, #ps-sub .ps-sub-hero--artikel + .ps-sec--antwort .ps-prose--antwort::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) no-repeat, linear-gradient(to bottom, transparent 6px, var(--ff-grund-hell) 6px); content: ""; pointer-events: none; } /* ---- Schrift auf der Fläche (Karten im Kopf behalten ihre Farben) ---- */ #ps-sub .ps-sub-hero h1 { color: var(--ps-white); } #ps-sub .ps-sub-hero h1 span { color: var(--ps-bronze-300); } #ps-sub .ps-sub-hero .ps-eyebrow { color: var(--ps-bronze-300); } #ps-sub .ps-sub-hero .ps-eyebrow::before { background: var(--ps-bronze-300); } #ps-sub .ps-sub-hero .ps-sub-hero__lead, #ps-sub .ps-sub-hero .pal-k-hinweis, #ps-sub .ps-sec--antwort .ps-prose--antwort p, #ps-sub .ps-sec--antwort .ps-prose--antwort li { color: var(--ps-bronze-100); } #ps-sub .ps-sub-hero .ps-sub-hero__lead strong, #ps-sub .ps-sub-hero .pal-k-hinweis b, #ps-sub .ps-sec--antwort .ps-prose--antwort strong { color: var(--ps-white); } #ps-sub .ps-sub-hero .ps-sub-hero__note, #ps-sub .ps-sub-hero .ps-artikel__meta, #ps-sub .ps-sub-hero .ps-krume, #ps-sub .ps-sub-hero .ps-krume *, #ps-sub .ps-sub-hero .pal-k-mail { color: var(--ps-bronze-300); } #ps-sub .ps-sub-hero .ps-sub-hero__lead a, #ps-sub .ps-sub-hero .ps-sub-hero__note a, #ps-sub .ps-sub-hero .pal-k-hinweis a, #ps-sub .ps-sub-hero .pal-k-mail a, #ps-sub .ps-sec--antwort .ps-prose--antwort a { color: var(--ps-messing-licht); } #ps-sub .ps-sec--antwort .ps-prose--antwort li::before { background: var(--ps-bronze-300); } /* Kontakt: Seitenstil steht im Inhalt (#ps-sub.pal-kontakt …, nach dieser Datei) und braucht deshalb eine Stufe mehr */ #ps-sub.pal-kontakt .pal-k-hero .pal-k-mail { color: var(--ps-bronze-300); } #ps-sub.pal-kontakt .pal-k-hero .pal-k-mail a, #ps-sub.pal-kontakt .pal-k-hero .pal-k-hinweis a { color: var(--ps-messing-licht); } #ps-sub.pal-kontakt .pal-k-hero .pal-k-hinweis { border-color: var(--ps-bronze-700); background: transparent; color: var(--ps-bronze-100); } #ps-sub.pal-kontakt .pal-k-hero + .pal-k-form { border-top: 0; } /* ---- Futter: Facettenfleck-Platte unter „Die Lage in Kürze“ (Karte, auf der der Soldat steht) ---- */ #ps-sub .ps-sub-hero .ps-facts::before { position: absolute; z-index: -1; top: 16px; right: -16px; bottom: -16px; left: 16px; border-radius: var(--ps-radius); background: var(--ff-kachel) 0 0 / 420px 420px repeat; content: ""; pointer-events: none; } @media (max-width: 700px) { #ps-sub .ps-sub-hero .ps-facts::before { top: 10px; right: -10px; bottom: -10px; left: 10px; } } /* ---- Beratungsblock: Aufnäher neben der Überschrift (einmal je Seite) ---- */ #ps-sub .ps-cta .ps-cta__inner > div:first-child::before { float: left; width: 110px; height: 95px; margin: 2px var(--ps-a-5) var(--ps-a-3) 0; background: var(--ff-aufnaeher) center / contain no-repeat; content: ""; } @media (max-width: 640px) { #ps-sub .ps-cta .ps-cta__inner > div:first-child::before { display: block; float: none; margin: 0 0 var(--ps-a-4); } } /* ---- Partnerhinweis vor dem Termin-Knopf, Variante B (Mauritz 20.10.2026; Kooperation BDV und Green Warriors bestätigt) ---- */ #ps-sub .ps-cta .ps-cta__partner { display: flex; flex: 0 0 100%; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 var(--ps-a-3); color: var(--ps-grau-300); font-size: var(--ps-gr-label); line-height: var(--ps-zeile-klein); text-align: left; } #ps-sub .ps-cta .ps-cta__etikett { display: inline-block; padding: 2px 8px 3px; border: 1px dashed var(--ps-messing-licht); border-radius: var(--ps-radius-sm); color: var(--ps-white); font-size: var(--ps-gr-fein); font-weight: var(--ps-staerke-kopf); line-height: var(--ps-zeile-eng); } /* ---- Welle 3: Beratungsblock in Nacht-Bronze, Saum oben ins Weiß, unten in den Seitenfuß ---- Vorher Navy (style.css) mit harter Kante oben und unten (Strich-Wache: die letzten Kanten der Unterseiten, Nebenbefund 20.10.2026). tokens.css führt Nacht-Bronze als Hausfläche für den CTA; gebaut wie der Schlussblock der Startseite (facettenfleck-start.css): Säume liegen im Innenabstand, Text steht nie darauf, Fläche = Grundfarbe des Abschnitts (die Kontrastprüfung misst gegen --ff-grund). Folgt noch ein Abschnitt (Rechner, Dienstgrade, Ausland), zerfällt der Saum unten ins Weiß statt in den Seitenfuß. Grund über dem oberen Saum = Farbe des Abschnitts davor. */ #ps-sub section.ps-cta { --ff-cta-luft: clamp(48px, 5vw, 80px); --ff-cta-davor: var(--ff-grund-hell); position: relative; isolation: isolate; padding-block: calc(var(--ff-h) + var(--ff-cta-luft)); /* Fläche nur in der Mitte (8 px unter die Säume, deren Rand dort deckt): An der Blockkante zum Seitenfuß träfen sonst Fläche, Saum und Fuß auf derselben Bruchteil-Pixel-Zeile zusammen, die Kantenglättung ließe Nacht-Bronze durch. */ background: linear-gradient(var(--ff-grund), var(--ff-grund)) center / 100% calc(100% - 2 * var(--ff-h) + 16px) no-repeat; } #ps-sub section.ps-cta::after { position: absolute; z-index: -1; inset: -1px 0; /* 1 px über die Blockkante, damit dort keine Nacht-Bronze der Fläche durchscheint */ background: var(--ff-saum-oben) top center / auto var(--ff-h) no-repeat, linear-gradient(to top, transparent 6px, var(--ff-cta-davor) 6px) top / 100% var(--ff-h) no-repeat, var(--ff-saum-fuss) bottom center / auto var(--ff-h) no-repeat; content: ""; pointer-events: none; } #ps-sub section.ps-cta:has(~ section)::after { background: var(--ff-saum-oben) top center / auto var(--ff-h) no-repeat, linear-gradient(to top, transparent 6px, var(--ff-cta-davor) 6px) top / 100% var(--ff-h) no-repeat, var(--ff-saum-unten) bottom center / auto var(--ff-h) no-repeat, linear-gradient(to bottom, transparent 6px, var(--ff-grund-hell) 6px) bottom / 100% var(--ff-h) no-repeat; } /* Schrift wie im Schlussblock der Startseite (Nacht-Bronze statt Navy) */ #ps-sub .ps-cta p { color: var(--ps-bronze-100); } #ps-sub .ps-cta .ps-cta__note { color: var(--ps-bronze-300); } #ps-sub .ps-cta p a:not(.ps-btn) { color: var(--ps-messing-licht); } #ps-sub .ps-cta p a:not(.ps-btn):hover, #ps-sub .ps-cta p a:not(.ps-btn):focus-visible { color: var(--ps-white); } #ps-sub .ps-cta .ps-cta__partner { color: var(--ps-bronze-300); } /* ---- Welle 4: Ratgeber-Übersicht ---- Die Scrollwelt (#ptl) steht auf Creme (--ps-sand-100, laut tokens.css nur für die Pixelwelt „voll“, Körperklasse ps-pixel-voll), der Beratungsblock folgt direkt darauf: Der Saum oben zerfällt dort in Creme statt in Weiß, unten in den Seitenfuß wie bei den Beiträgen. Vorher Navy mit harter Kante oben und unten, dazu stand der Partnerhinweis ohne Etiketten (Datei lud dort nicht). */ body.ps-pixel-voll #ps-sub section.ps-cta { --ff-cta-davor: var(--ps-sand-100); } /* ---- Welle 4: Unterkante zum Seitenfuß ohne helle Zeile ---- Endet die Seite mit dem Beratungsblock, treffen an der Kante zum Seitenfuß zwei geglättete Bruchteil-Pixel-Kanten aufeinander (Block endet bei x,32, Seitenfuß beginnt bei x,36; der 1 px Überstand des Saums wird von #ps-sub abgeschnitten, style.css overflow: clip). Dazwischen scheint der hellgraue Seitengrund durch: helle 1-px-Zeile über die ganze Breite (238 statt 235, live seit Welle 3, z. B. Über uns 1440/390, Krankenversicherung 390). Der Seitenfuß rückt deshalb 1 px unter den Block; dort ist der Saum schon im Grau des Seitenfußes. Folgt noch ein Abschnitt (Rechner), bleibt alles wie es ist. */ body:has(#ps-sub > section.ps-cta:last-child) .nk-footer { margin-top: -1px; } /* ---- Welle 5: Kopf der Scrollwelt (Ratgeber-Übersicht) ---- Der dunkle Kopf (#ptl .ptl-kopf, ptl.css: Verlauf über dem Tarnbild) endete mit harter Kante im Creme der Scrollwelt (1440 y=435, 390 y=473; Mauritz 21.10.2026: „bauen bitte“). Wie das Kopfband der Unterseiten: Unter dem Inhalt geht das Tarnbild über --ff-ueber in Nacht-Bronze über, darunter zerfällt der Saum ins Creme. Beides liegt im Innenabstand, Text steht nie darauf; Station 1 rückt um --ff-h nach unten. Kein Stapelkontext am Kopf: Die Trefferliste der Suche (ptl.css z 30) ragt bis 420 px über Station 1 und muss über deren Figuren (z 2–7) bleiben. Der Saum ist deshalb ein Pseudo-Element ohne z-index, der Inhalt liegt auf der Ebene der Liste. */ body.ps-pixel-voll #ptl .ptl-kopf { --ff-h: 150px; --ff-ueber: 64px; padding-bottom: calc(26px + var(--ff-h)); } body.ps-pixel-voll #ptl .ptl-kopf > .ptl-kopf__raster { position: relative; z-index: 30; } body.ps-pixel-voll #ptl .ptl-kopf::after { position: absolute; right: 0; bottom: -1px; /* 1 px über die Kopfkante, damit dort kein Tarnbild durchscheint */ left: 0; height: calc(var(--ff-ueber) + var(--ff-h) + 1px); background: url(facettenfleck/saum-nacht-bronze-breit.svg) bottom center / auto var(--ff-h) no-repeat, linear-gradient(to bottom, transparent, var(--ps-bronze-900) var(--ff-ueber)) top / 100% calc(var(--ff-ueber) + 9px) no-repeat, linear-gradient(to bottom, transparent calc(var(--ff-ueber) + 7px), var(--ps-sand-100) calc(var(--ff-ueber) + 7px)); content: ""; pointer-events: none; } @media (max-width: 720px) { body.ps-pixel-voll #ptl .ptl-kopf { --ff-h: 92px; --ff-ueber: 40px; padding-bottom: calc(16px + var(--ff-h)); } } /* ---- Welle 6: Seiten über die ganze Breite ---- Mauritz 21.10.2026: Das Kopfband der Unterseiten „wird abgeschnitten … sieht überhaupt nicht gut aus“; Startseite und Ratgeber laufen über die ganze Breite. Ursache: Seiten (nicht Beiträge, die single.php ohne Rahmen ausgibt) stehen im Theme-Rahmen #primary.container (Bootstrap, max. 1140 px, 15 px Innenabstand), #ps-sub schneidet mit overflow: clip (style.css) alles darüber hinaus ab, daneben liegt der graue Seitengrund. Der Rahmen wird auf Seiten mit #ps-sub seitenbreit: #ps-sub und jede Abschnittsfläche (Kopfband, graue Abschnitte, Beratungsblock) reichen bis an den Rand, der Seitengrund verschwindet. Text und Karten bleiben genau so breit wie vorher, bündig zum Logo im Seitenkopf: --ff-rahmen ist die alte Breite von #ps-sub je Bootstrap-Stufe, .ps-container rechnet damit statt mit der Breite des Abschnitts. Rechtstexte (ohne #ps-sub) und die Ratgeber-Übersicht (#ps-sub außerhalb von #primary) bleiben. */ body:has(#primary #ps-sub) #primary.content-area { max-width: none; padding-inline: 0; } #primary #ps-sub { --ff-rahmen: calc(100% - 30px); } @media (min-width: 576px) { #primary #ps-sub { --ff-rahmen: 510px; } } @media (min-width: 768px) { #primary #ps-sub { --ff-rahmen: 690px; } } @media (min-width: 992px) { #primary #ps-sub { --ff-rahmen: 930px; } } @media (min-width: 1200px) { #primary #ps-sub { --ff-rahmen: 1110px; } } #primary #ps-sub .ps-container { width: min(var(--ps-container), calc(var(--ff-rahmen) - 40px)); } @media (max-width: 640px) { #primary #ps-sub .ps-container { width: min(var(--ff-rahmen) - 28px, var(--ps-container)); } } /* ---- Welle 7: Creme als Seitengrund ---- Mauritz 21.10.2026 zum Ratgeber: „Mir gefällt der Creme-Hintergrund extrem gut“, zur Startseite und den Unterseiten: „Überall, ja.“ Wie auf der Startseite (facettenfleck-start.css) und der Ratgeber-Übersicht steht die Seite auf Creme (--ff-grund-hell, oben bei #ps-sub), Karten, Tabellen, Fragen und Formulare behalten ihr Weiß und heben sich dadurch ab. Die grauen Wechselabschnitte gehen im Creme auf (kühles Grau neben warmem Creme), kühle Kästen direkt auf dem Grund werden weiß wie die Karten (nur die, die direkt auf dem Grund stehen: die Kundenstimme der Kontaktseite liegt in einer weißen Karte und bleibt grau, sonst verschwände sie). Der Saum oben am Kopfband bleibt weiß, er schließt an den weißen Seitenkopf an. CI-Handbuch Fassung 1.4. */ #ps-sub { background-color: var(--ff-grund-hell); } #ps-sub section.ps-sec--off { background: transparent; } /* Seiten- und Werkzeugstile stehen teils im Inhalt (nach dieser Datei, z. B. #ps-sub .pal-rechner), daher eine Stufe mehr */ #ps-sub nav.ps-inhalt, #ps-sub .ps-law, #ps-sub .pal-rechner.pal-rechner--oben, #ps-sub .pal-ueg-plan, #ps-sub .pal-bf-wache { background: var(--ps-white); }