/* Sektions-Hintergründe — Varianten für das Grunddesign ------------------------------------------------------ Aktivierung: (oder technik | licht | mix) Ohne data-bg-Attribut ändert diese Datei nichts — die Flächen bleiben wie bisher. Mechanik pro Sektion: ::before = Bildebene (background-image, cover, gedeckelte Deckkraft) ::after = Scrim in der Grundfarbe der Sektion, damit Text lesbar bleibt > * = Inhalt liegt über beiden Ebenen Bilder: /img/bg/*.webp (2400px, generiert mit Grok Image + Nano Banana 2/Pro, Quell-PNGs in /assets-src/bg/). */ [data-bg] .assist, [data-bg] .config-teaser, [data-bg] .foerder-section, [data-bg] .gebiet-section { position: relative; overflow: hidden; isolation: isolate; } [data-bg] .assist > *, [data-bg] .config-teaser > *, [data-bg] .foerder-section > *, [data-bg] .gebiet-section > * { position: relative; z-index: 2; } [data-bg] .assist::before, [data-bg] .config-teaser::before, [data-bg] .foerder-section::before, [data-bg] .gebiet-section::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--bg-op, .4); filter: var(--bg-filter, none); mix-blend-mode: var(--bg-blend, normal); pointer-events: none; } [data-bg] .assist::after, [data-bg] .config-teaser::after, [data-bg] .foerder-section::after, [data-bg] .gebiet-section::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Scrims — an die Grundfarbe der jeweiligen Sektion gebunden, nicht an die Variante */ [data-bg] .assist::after { background: linear-gradient(100deg, var(--blue) 0%, rgba(28, 63, 151, .93) 40%, rgba(28, 63, 151, .5) 100%); } [data-bg] .config-teaser::after { background: linear-gradient(100deg, var(--ink) 0%, rgba(20, 24, 31, .92) 42%, rgba(20, 24, 31, .5) 100%); } [data-bg] .foerder-section::after { background: linear-gradient(100deg, var(--soft) 0%, rgba(245, 247, 250, .86) 46%, rgba(245, 247, 250, .55) 100%); } [data-bg] .gebiet-section::after { background: linear-gradient(100deg, var(--blue) 0%, rgba(28, 63, 151, .9) 44%, rgba(28, 63, 151, .55) 100%); } /* ---------------------------------------------------------------- Variante A — Material-Makro */ [data-bg="makro"] .assist::before { background-image: url("/img/bg/a-makro-anfrage.webp"); --bg-op: .6; } [data-bg="makro"] .config-teaser::before { background-image: url("/img/bg/a-makro-dark.webp"); --bg-op: .55; } [data-bg="makro"] .foerder-section::before { background-image: url("/img/bg/a-makro-hell.webp"); --bg-op: .5; } [data-bg="makro"] .gebiet-section::before { background-image: url("/img/bg/a-makro-gebiet.webp"); --bg-op: .4; } /* ------------------------------------------------------------ Variante B — Technische Zeichnung */ [data-bg="technik"] .assist::before { background-image: url("/img/bg/b-technik-anfrage.webp"); --bg-op: .3; } [data-bg="technik"] .config-teaser::before { background-image: url("/img/bg/b-technik-dark.webp"); --bg-op: .55; } [data-bg="technik"] .foerder-section::before { background-image: url("/img/bg/b-technik-hell.webp"); --bg-op: .6; } /* Karte ist dunkle Linie auf hellem Papier — invertiert und additiv wird daraus weiße Höhenlinie auf Blau, ohne dass die Papierfläche das Blau aufhellt. */ [data-bg="technik"] .gebiet-section::before { background-image: url("/img/bg/b-technik-gebiet.webp"); --bg-op: .5; --bg-filter: invert(1) grayscale(1) contrast(1.15); --bg-blend: screen; } /* -------------------------------------------------------------- Variante C — Licht und Schatten */ [data-bg="licht"] .assist::before { background-image: url("/img/bg/c-licht-anfrage.webp"); --bg-op: .75; } [data-bg="licht"] .config-teaser::before { background-image: url("/img/bg/c-licht-dark.webp"); --bg-op: .6; } [data-bg="licht"] .foerder-section::before { background-image: url("/img/bg/c-licht-hell.webp"); --bg-op: .65; } [data-bg="licht"] .gebiet-section::before { background-image: url("/img/bg/c-licht-gebiet.webp"); --bg-op: .45; } /* ------------------------------------------------------- Variante Mix — Empfehlung fürs Grunddesign */ [data-bg="mix"] .assist::before { background-image: url("/img/bg/c-licht-anfrage.webp"); --bg-op: .7; } [data-bg="mix"] .config-teaser::before { background-image: url("/img/bg/a-makro-dark.webp"); --bg-op: .55; } [data-bg="mix"] .foerder-section::before { background-image: url("/img/bg/b-technik-hell.webp"); --bg-op: .55; } [data-bg="mix"] .gebiet-section::before { background-image: url("/img/bg/b-technik-gebiet.webp"); --bg-op: .5; --bg-filter: invert(1) grayscale(1) contrast(1.15); --bg-blend: screen; } /* Auf schmalen Viewports steht die Textspalte über dem Bild — Bild zurücknehmen */ @media (max-width: 900px) { [data-bg] .assist::before, [data-bg] .config-teaser::before, [data-bg] .foerder-section::before, [data-bg] .gebiet-section::before { opacity: calc(var(--bg-op, .4) * .55); } [data-bg] .assist::after { background: linear-gradient(180deg, rgba(28, 63, 151, .88), var(--blue) 70%); } [data-bg] .config-teaser::after { background: linear-gradient(180deg, rgba(20, 24, 31, .88), var(--ink) 70%); } [data-bg] .foerder-section::after { background: linear-gradient(180deg, rgba(245, 247, 250, .82), var(--soft) 70%); } [data-bg] .gebiet-section::after { background: linear-gradient(180deg, rgba(28, 63, 151, .88), var(--blue) 70%); } } /* ------------------------------------------------------------------------ Footer — Nachtaufnahme Eine Bildebene für alle Varianten: dunkle Abendfassade mit warm beleuchteten Fenstern. Linkes Drittel ist leer und dunkel, dort steht der Firmenblock. */ [data-bg] .site-footer { position: relative; overflow: hidden; isolation: isolate; } [data-bg] .site-footer > * { position: relative; z-index: 2; } [data-bg] .site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("/img/bg/d-nacht-footer.webp"); background-size: cover; background-position: center right; background-repeat: no-repeat; opacity: .55; pointer-events: none; } [data-bg] .site-footer::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, var(--ink) 0%, rgba(20, 24, 31, .94) 36%, rgba(20, 24, 31, .82) 100%); } @media (max-width: 900px) { [data-bg] .site-footer::before { opacity: .35; } [data-bg] .site-footer::after { background: linear-gradient(180deg, rgba(20, 24, 31, .9), var(--ink) 70%); } }