diff --git a/assets/css/main.css b/assets/css/main.css index c6d454a..f84236c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -897,6 +897,38 @@ footer.site-footer { Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und der Rand sauber in die Seitenfarbe ausläuft. ========================================================================== */ +/* ---- 1) Das Motiv trägt die GANZE Seite ---- + Liegt fest hinter allem (position:fixed), leicht weichgezeichnet und + abgedunkelt. Dadurch ist das Bild beim Scrollen überall präsent, ohne + dass Texte und Karten darunter leiden. */ +body.mit-hintergrund { background-color: transparent; } +body.mit-hintergrund::before { + content: ""; + position: fixed; + inset: -2%; + z-index: -3; + background-image: var(--page-bg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + filter: blur(3px) saturate(1.05); +} +/* Abdunkelung für den Seitenkörper — stark genug für gute Lesbarkeit, + aber so, dass das Motiv deutlich durchkommt. */ +body.mit-hintergrund::after { + content: ""; + position: fixed; + inset: 0; + z-index: -2; + pointer-events: none; + background: linear-gradient(to bottom, + color-mix(in srgb, var(--bg) 62%, transparent) 0%, + color-mix(in srgb, var(--bg) 84%, transparent) 45%, + color-mix(in srgb, var(--bg) 90%, transparent) 100%); +} + +/* ---- 2) Im Kopfbereich zeigt sich das Motiv gestochen scharf ---- + Hier darf es wirken: kaum abgedunkelt, volle Schärfe. */ .page-bg { position: relative; isolation: isolate; @@ -918,21 +950,38 @@ footer.site-footer { inset: 0; z-index: -1; background: - radial-gradient(ellipse 115% 85% at 50% 45%, - rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .66) 66%, rgba(0, 0, 0, .88) 100%), + /* nur ganz leichte Vignette, damit die Ränder nicht hart abbrechen */ + radial-gradient(ellipse 125% 95% at 50% 45%, + rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .26) 72%, rgba(0, 0, 0, .46) 100%), + /* oben etwas dunkler für die Navigation, unten weicher Übergang */ linear-gradient(to bottom, - rgba(0, 0, 0, .62) 0%, - rgba(0, 0, 0, .34) 30%, - rgba(0, 0, 0, .48) 72%, - var(--bg) 100%); + rgba(0, 0, 0, .42) 0%, + rgba(0, 0, 0, .06) 26%, + rgba(0, 0, 0, .14) 66%, + color-mix(in srgb, var(--bg) 88%, transparent) 100%); } -/* Text auf Bildhintergrund immer mit weicher Abschattung */ -.page-bg h1, .page-bg h2, .page-bg .lead, .page-bg .eyebrow { - text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9); +/* Damit die Schrift auf jedem Bildausschnitt sicher lesbar bleibt, bekommt + sie eine kräftige Abschattung statt das Bild abzudunkeln. */ +.page-bg h1, +.page-bg h2, +.page-bg .lead, +.page-bg .eyebrow { + text-shadow: + 0 2px 4px rgba(0, 0, 0, .95), + 0 4px 22px rgba(0, 0, 0, .85), + 0 0 42px rgba(0, 0, 0, .7); } -.page-bg.hero { padding: clamp(4.5rem, 11vw, 7.5rem) 0; } +.page-bg.hero { + padding: clamp(5rem, 13vw, 9rem) 0; + min-height: clamp(340px, 46vh, 520px); + display: flex; + align-items: center; +} +.page-bg.hero > .container { width: 100%; } + @media (max-width: 760px) { - .page-bg::before { background-image: var(--page-bg-mobile, var(--page-bg)); } + .page-bg::before, + body.mit-hintergrund::before { background-image: var(--page-bg-mobile, var(--page-bg)); } } /* ========================================================================== diff --git a/assets/js/forms.js b/assets/js/forms.js index d1ae4e2..b2eb007 100644 --- a/assets/js/forms.js +++ b/assets/js/forms.js @@ -118,11 +118,11 @@ const TAB_HINTERGRUENDE = { }; function setzeTabHintergrund(tabId) { - const hero = document.querySelector(".hero.page-bg"); const basis = TAB_HINTERGRUENDE[tabId]; - if (!hero || !basis) return; - hero.style.setProperty("--page-bg", `url('assets/img/${basis}.jpg')`); - hero.style.setProperty("--page-bg-mobile", `url('assets/img/${basis}-mobile.jpg')`); + if (!basis) return; + // Die Bildvariablen hängen am — das Motiv trägt die ganze Seite. + document.body.style.setProperty("--page-bg", `url('assets/img/${basis}.jpg')`); + document.body.style.setProperty("--page-bg-mobile", `url('assets/img/${basis}-mobile.jpg')`); } function setupTabs() { diff --git a/assets/js/main.js b/assets/js/main.js index b7966d5..94b72ed 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -360,6 +360,16 @@ alterInhalt.replaceWith(neuerInhalt); + // Seitenmotiv mitnehmen: Die Bildvariablen hängen am , damit das + // Motiv die ganze Seite trägt — beim Wechsel also mit übernehmen. + const bodyNeu = dok.body; + document.body.classList.toggle("mit-hintergrund", bodyNeu.classList.contains("mit-hintergrund")); + ["--page-bg", "--page-bg-mobile"].forEach((v) => { + const wert = bodyNeu.style.getPropertyValue(v); + if (wert) document.body.style.setProperty(v, wert); + else document.body.style.removeProperty(v); + }); + // Kopf der Seite mitziehen: Titel, Farbwelt, Beschreibung document.title = dok.title; const themaNeu = dok.documentElement.getAttribute("data-theme"); diff --git a/bewerben.html b/bewerben.html index cef0804..0e05b06 100644 --- a/bewerben.html +++ b/bewerben.html @@ -22,11 +22,11 @@ - +
-
+
Manager Dogfather

Werde Teil vom Team

diff --git a/casper.html b/casper.html index 89f71fd..72a044e 100644 --- a/casper.html +++ b/casper.html @@ -22,11 +22,11 @@ - +
-
+
Welt 2 — HasiDog

Casper 🐾

diff --git a/community.html b/community.html index 270dbd9..8104649 100644 --- a/community.html +++ b/community.html @@ -22,11 +22,11 @@ - +
-
+
Welt 2 — HasiDog

Die Community

diff --git a/creator.html b/creator.html index c53993d..faffc27 100644 --- a/creator.html +++ b/creator.html @@ -22,11 +22,11 @@ - +
-
+
Manager Dogfather — Team

Creator im Team

diff --git a/dogfather.html b/dogfather.html index 4c75d88..624a1eb 100644 --- a/dogfather.html +++ b/dogfather.html @@ -22,11 +22,11 @@ - +
-
+
Welt 1 — Dogfather

Die Person hinter Dogfather

diff --git a/hasidog.html b/hasidog.html index 03bcae9..ae28508 100644 --- a/hasidog.html +++ b/hasidog.html @@ -22,11 +22,11 @@ - +
-
+
Welt 2 — HasiDog

Willkommen in der HasiDog-Welt

diff --git a/manager.html b/manager.html index f486866..6ed6108 100644 --- a/manager.html +++ b/manager.html @@ -22,11 +22,11 @@ - +
-
+
Welt 3 — Manager Dogfather

Manager Dogfather bei Spicy Media

diff --git a/stimmen.html b/stimmen.html index 3bbef4a..d901939 100644 --- a/stimmen.html +++ b/stimmen.html @@ -22,11 +22,11 @@ - +
-
+
Welt 2 — HasiDog

Stimmen über Dogfather

diff --git a/streamplan.html b/streamplan.html index e7eaf5b..572b7b8 100644 --- a/streamplan.html +++ b/streamplan.html @@ -22,11 +22,11 @@ - +
-
+
Welt 1 — Dogfather

Streamplan & Livebereich

diff --git a/team-modis.html b/team-modis.html index beba487..f2509bd 100644 --- a/team-modis.html +++ b/team-modis.html @@ -22,11 +22,11 @@ - +
-
+
🩵 Team Dogi

Das Modi-Team

diff --git a/team-scouts.html b/team-scouts.html index 32c6d6a..2296424 100644 --- a/team-scouts.html +++ b/team-scouts.html @@ -22,11 +22,11 @@ - +
-
+
Manager Dogfather — Spicy Media

Unser Scout-Team

diff --git a/vanvan.html b/vanvan.html index f525e9d..10558d2 100644 --- a/vanvan.html +++ b/vanvan.html @@ -22,11 +22,11 @@ - +
-
+
🩵 Exklusive Seite

VanVan

diff --git a/werte.html b/werte.html index 1c46393..2519d7d 100644 --- a/werte.html +++ b/werte.html @@ -22,11 +22,11 @@ - +
-
+
Welt 3 — Manager Dogfather

Werte als Manager

diff --git a/zeitreise.html b/zeitreise.html index 4b1d905..43b66f4 100644 --- a/zeitreise.html +++ b/zeitreise.html @@ -22,11 +22,11 @@ - +
-
+
Welt 1 — Dogfather

Zeitreise