/* ============================================================ HINTERGRUNDBILD "Schwimmhalle" — body.bg-pool (eigene Datei) ------------------------------------------------------------ WARUM EIGENE DATEI: Die Regeln galten früher nur in app.css — die Zeitmessungs-Seiten (zeiterfassung/base.html) laden app.css aber NICHT, nur style.css + zt-v3.css. Ihr body.bg-pool blieb deshalb wirkungslos. Diese Datei wird von BEIDEN Basen verlinkt: templates/base.html (Haupt-App) zeiterfassung/templates/zeiterfassung/base.html (Zeitmessung) Es gibt genau EINE Quelle für diese Regeln — nicht zurück nach app.css kopieren. Verwendung (setzt der Template-Teil, NICHT dieses CSS): auf /home und den Zeitmessungs-Seiten. Bilddatei: static/img/pool-bg.jpg Aufbau — zwei fixierte Vollbild-Layer hinter dem Inhalt: ::before z-index -2 das Foto (formatfüllend, leicht unscharf) ::after z-index -1 deckende Tönung in der Grundfarbe --bg Der Inhalt selbst liegt im normalen Fluss und damit über beiden. SPEZIFITÄT: app.css setzt body::before/::after content:none !important und html/body background var(--bg) !important (Alt-CSS-Entrümpelung); die zeiterfassung-Stacks Ähnliches ohne bg-pool-Bezug. body.bg-pool(::before) hat mit (0,1,1)/(0,1,2) die höhere Spezifität und gewinnt auch unter !important — die Regeln funktionieren daher in beiden CSS-Welten und unabhängig von der Ladereihenfolge. KEIN background-attachment: fixed. Der Layer ist selbst position: fixed und steht dadurch ohnehin still; die fixed-Variante ist auf iOS-Safari unzuverlässig (Bild springt/verschwindet beim Scrollen) und teuer im Repaint. FEHLENDE BILDDATEI: background-image scheitert still. Übrig bleibt ein transparenter Layer, darüber die Tönung in exakt --bg — also genau der gewohnte Hintergrund. Kein grauer Kasten, kein Rand, kein Layout-Sprung. TÖNUNGS-FALLBACK: color-mix() mit var(--bg) — ist --bg auf einer Seite kein einfacher Farbwert (zt-v3 nutzt teils Gradienten) oder der Browser alt, greift die rgba-Literal-Zeile davor. ============================================================ */ body.bg-pool { background: transparent !important; } body.bg-pool::before { content: '' !important; position: fixed; /* -14px statt 0: filter: blur() franst an den Kanten aus (Streuung ≈ 3× Radius). Der Layer ragt über den Viewport hinaus, die weichen Ränder liegen außerhalb. */ inset: -14px; z-index: -2; background-image: url('/static/img/pool-bg.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; filter: blur(3px); pointer-events: none; } body.bg-pool::after { content: '' !important; position: fixed; inset: 0; z-index: -1; /* Tönung in der Grundfarbe: hell 78 % deckend → 22 % Foto bleiben sichtbar (R8: Nutzerwunsch "kräftiger" — vorher 86/14). Fallback zuerst für Browser ohne color-mix(); Wert = --bg im hellen Theme. */ background: rgba(242,245,249,.78); background: color-mix(in srgb, var(--bg) 78%, transparent); pointer-events: none; } /* Dark: etwas stärker (82 %) — auf dunklem Grund tritt ein helles Hallenfoto optisch mehr hervor und würde sonst unruhig wirken. Beide Theme-Pfade bedient: data-theme (Boot-Skript) und die reine Media-Query. */ :root[data-theme="dark"] body.bg-pool::after { background: rgba(19,26,38,.82); background: color-mix(in srgb, var(--bg) 82%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.bg-pool::after { background: rgba(19,26,38,.82); background: color-mix(in srgb, var(--bg) 82%, transparent); } } /* Lesbarkeit absichern. Kacheln, Karten und die Bottom-Nav sind deckend bzw. haben eigenen Blur — kritisch sind nur die frei auf dem Grund stehenden Texte: Seitenüberschrift, Unterzeile und die kleine Fußzeile. Die 14 % Rest-Foto sind Textur, kein Farbwechsel, aber gerade die 0.58–0.66rem große Fußzeile (--ink-mute) hat schon ohne Bild wenig Reserve. Maßnahme: schmaler Halo in der Hintergrundfarbe (hebt den Text von der Struktur ab, ist auf einfarbigem Grund unsichtbar) + die Fußzeile läuft auf .bg-pool mit voller Deckkraft statt 0.8. (Auf Zeitmessungs-Seiten ohne .page-head/.site-foot greifen die Selektoren schlicht nicht.) */ body.bg-pool .page-head h1, body.bg-pool .page-head .sub, body.bg-pool .site-foot { text-shadow: 0 1px 2px var(--bg), 0 0 6px var(--bg); } body.bg-pool .site-foot { opacity: 1; } /* Bewegungsempfindlichkeit: ein stehender Layer unter scrollendem Inhalt liest sich als Parallaxe. Bei prefers-reduced-motion die Unschärfe raus und die Tönung auf 90/92 % — das Foto bleibt als Andeutung erhalten, erzeugt aber keine wandernde Struktur mehr. */ @media (prefers-reduced-motion: reduce) { body.bg-pool::before { filter: none; inset: 0; } body.bg-pool::after { background: rgba(242,245,249,.90); background: color-mix(in srgb, var(--bg) 90%, transparent); } /* Muss die Dark-Regel oben (Spezifität 0,3,2) explizit schlagen — eine einfache body.bg-pool::after-Regel (0,1,2) käme dagegen nicht an. */ :root[data-theme="dark"] body.bg-pool::after { background: rgba(19,26,38,.92); background: color-mix(in srgb, var(--bg) 92%, transparent); } } /* Gleiches für den Media-Query-Pfad (JS aus → kein data-theme gesetzt). Bewusst als kombinierte Query, NICHT als eigenständiger Selektor: :root:not([data-theme="light"]) trifft sonst auch ein helles System. */ @media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.bg-pool::after { background: rgba(19,26,38,.92); background: color-mix(in srgb, var(--bg) 92%, transparent); } }