/* PL-FOTO — Glas- und Tiefensystem Utility-Klassen für Layer, Glas, Kanten und Schatten. Setzt tokens.css voraus. Reihenfolge: reset → tokens → glass → components → pages Grundregeln, die dieser Datei zugrunde liegen: 1. Das Foto gewinnt. Glas liegt neben, unter oder am Rand von Bildern. Der einzige erlaubte Fall über einem Bild ist .glass-caption. 2. Echtes backdrop-filter nur, wo tatsächlich Bild durchscheint. Für alles andere .glass-flat — optisch nahezu identisch, kostenlos. 3. Maximal drei gleichzeitig sichtbare .glass-* Flächen pro Bildschirm. */ /* ============================================================ 1 — EBENEN z-index und Schattenstaffel. Eine Klasse setzt beides, damit Ebene und Tiefenwirkung nicht auseinanderlaufen können. ============================================================ */ .layer-0 { position: relative; z-index: var(--z-base); } .layer-1 { position: relative; z-index: var(--z-content); background: var(--c-surface); box-shadow: var(--shadow-l1); } .layer-2 { position: relative; z-index: var(--z-glass); } .layer-3 { position: relative; z-index: var(--z-float); } /* Schatten einzeln, falls eine Ebene ohne Fläche auskommt */ .elevation-0 { box-shadow: none; } .elevation-1 { box-shadow: var(--shadow-l1); } .elevation-2 { box-shadow: var(--shadow-l2); } .elevation-3 { box-shadow: var(--shadow-l3); } /* ============================================================ 2 — GLAS Drei Stufen. Jede setzt: Füllung, Blur+Sättigung, Kante, Schatten. Rechtwinklig — Radien wären hier falsch (siehe tokens.css). ============================================================ */ .glass-1, .glass-2, .glass-3, .glass-flat, .glass-caption { position: relative; border-radius: var(--radius-0); color: var(--c-text); } .glass-1 { background: var(--glass-fill-1); -webkit-backdrop-filter: blur(var(--blur-1)) saturate(var(--sat-1)); backdrop-filter: blur(var(--blur-1)) saturate(var(--sat-1)); box-shadow: var(--glass-edge-1), var(--shadow-l1); } .glass-2 { background: var(--glass-fill-2); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--sat-2)); backdrop-filter: blur(var(--blur-2)) saturate(var(--sat-2)); box-shadow: var(--glass-edge-2), var(--shadow-l2); } .glass-3 { background: var(--glass-fill-3); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--sat-3)); backdrop-filter: blur(var(--blur-3)) saturate(var(--sat-3)); box-shadow: var(--glass-edge-3), var(--shadow-l3); } /* Glas-Imitat ohne backdrop-filter: für Flächen, hinter denen ohnehin kein Bild liegt (Leistungskarten, Formular, Footer-Blöcke). Der Verlauf ersetzt die Lichtbrechung, Kante und Schatten bleiben. */ .glass-flat { background: linear-gradient(160deg, rgb(255 255 255 / .055) 0%, rgb(255 255 255 / .022) 46%, rgb(255 255 255 / .035) 100%), var(--c-bg-2); box-shadow: var(--glass-edge-2), var(--shadow-l2); } /* Der EINZIGE erlaubte Fall von Glas über einem Foto: Unterkante mit Bildtitel. Deckung .72 statt .62 — darunter fällt der Kontrast über hellen Bildstellen unter 4,5:1. Nicht verringern. */ .glass-caption { background: var(--glass-fill-on-image); -webkit-backdrop-filter: blur(var(--blur-1)) saturate(var(--sat-1)); backdrop-filter: blur(var(--blur-1)) saturate(var(--sat-1)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .10); } /* Fallback: ohne backdrop-filter werden alle Glasflächen deckend. Getestet wird auf blur(1px), weil Safari-Altversionen sonst fälschlich Unterstützung melden. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass-1 { background: var(--glass-solid-1); } .glass-2 { background: var(--glass-solid-2); } .glass-3 { background: var(--glass-solid-3); } .glass-caption{ background: var(--glass-solid-3); } } /* ============================================================ 3 — KANTEN UND PASSERMARKEN Die Bauweise aus dem Design-System: Haarlinie statt Kasten, Passerkreuz an den vier Ecken. Auf dunklem Grund wird daraus von selbst die Glaskante. ============================================================ */ .frame { border: 1px solid var(--c-line); } .frame-strong { border: 1px solid var(--c-line-strong); } /* Passermarken ohne zusätzliche Elemente: acht Verläufe in einem Pseudo-Element, je zwei bilden ein Kreuz an einer Ecke. */ .marks { position: relative; } .marks::before { content: ""; position: absolute; inset: 0; pointer-events: none; --m: 11px; background: linear-gradient(var(--c-line-accent) 0 0) 0 calc(var(--m) / 2) / var(--m) 1px no-repeat, linear-gradient(var(--c-line-accent) 0 0) calc(var(--m) / 2) 0 / 1px var(--m) no-repeat, linear-gradient(var(--c-line-accent) 0 0) 100% calc(var(--m) / 2) / var(--m) 1px no-repeat, linear-gradient(var(--c-line-accent) 0 0) calc(100% - var(--m) / 2) 0 / 1px var(--m) no-repeat, linear-gradient(var(--c-line-accent) 0 0) 0 calc(100% - var(--m) / 2) / var(--m) 1px no-repeat, linear-gradient(var(--c-line-accent) 0 0) calc(var(--m) / 2) 100% / 1px var(--m) no-repeat, linear-gradient(var(--c-line-accent) 0 0) 100% calc(100% - var(--m) / 2) / var(--m) 1px no-repeat, linear-gradient(var(--c-line-accent) 0 0) calc(100% - var(--m) / 2) 100% / 1px var(--m) no-repeat; } /* Marken in Textfarbe statt Akzent — für Flächen, auf denen der Akzent schon anderweitig vergeben ist */ .marks-neutral::before { --c-line-accent: var(--c-line-strong); } /* ============================================================ 4 — BILDFLÄCHEN Layer 1. Opak, Haarlinie innen statt Rahmen außen, damit das Bild nicht optisch schrumpft. ============================================================ */ .media { position: relative; z-index: var(--z-content); overflow: hidden; background: var(--c-surface); box-shadow: var(--shadow-inset-image), var(--shadow-l1); } .media > img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* Verlaufskeil für Text NEBEN dem Motiv — ersetzt Glas über dem Bild. Richtung per --keil-dir umstellbar. */ .media-scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( var(--keil-dir, 100deg), rgb(11 14 24 / .88) 0%, rgb(11 14 24 / .62) 34%, rgb(11 14 24 / .08) 68%, transparent 100%); } /* ============================================================ 5 — BEWEGUNG 150–300 ms, ease-out. will-change nur während der Interaktion, sonst belegt jede Kachel dauerhaft eine GPU-Ebene. ============================================================ */ .hover-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hover-lift:hover, .hover-lift:focus-visible { transform: scale(var(--hover-lift)); box-shadow: var(--shadow-l2); will-change: transform; } /* Parallaxe: nur eine Bildebene, per transform. Den Wert setzt JS über --py; ohne JS passiert nichts. */ .parallax { transform: translate3d(0, var(--py, 0), 0); } @media (prefers-reduced-motion: reduce) { .hover-lift:hover, .hover-lift:focus-visible { transform: none; } .parallax { transform: none; } }