/* ============================================================================ KanzleiSimple – Public Liquid Glass (Landing + öffentliche Seiten) ---------------------------------------------------------------------------- Eigenständig: die Landing lädt KEINE app-glass.css. Handgeschrieben, umgeht das non-JIT-Tailwind (backdrop-blur / bg-white\/80 sind dort nicht garantiert kompiliert). Grundsätze: - Glas nur auf Flächen mit HELLEM Hintergrund → dunkler Text bleibt lesbar (WCAG). - backdrop-filter steht in @supports → alte Browser bekommen solide Fallbacks. - Reveal-Animation NUR mit aktivem JS (.ks-js) → ohne JS bleibt alles sichtbar. - prefers-reduced-motion wird respektiert. ============================================================================ */ /* ---- Frosted Nav (fixe Topbar der Landing) -------------------------------- */ .ks-glass-nav { background-color: rgba(255, 255, 255, 0.92); } /* Fallback ohne Blur */ @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .ks-glass-nav { background-color: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05), 0 8px 30px -18px rgba(15, 23, 42, 0.35); } } /* ---- Sektions-Untergründe leicht tönen, damit das Glas etwas zum Brechen hat (höhere Spezifität als .bg-white → überschreibt ohne !important) ----------- */ .ks-landing #features { background: linear-gradient(180deg, #eef4fc 0%, #f6f9fd 100%); } .ks-landing #faq { background: linear-gradient(180deg, #f6f9fd 0%, #eef4fc 100%); } /* ---- Glas-Karten (Feature-Grid) ------------------------------------------ */ .ks-glass-card { background-color: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, /* Specular-Oberkante */ 0 18px 44px -20px rgba(15, 23, 42, 0.30); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease; } @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .ks-glass-card { -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); } } .ks-glass-card:hover { background-color: rgba(255, 255, 255, 0.72) !important; transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 26px 56px -22px rgba(15, 23, 42, 0.38); } /* ---- Glas-Füllung OHNE Schatten-Override ----------------------------------- Für Karten, die ihren eigenen Ring/Schatten behalten müssen (z.B. der hervorgehobene Preis-Plan mit ring-2 ring-primary-600). Nur Fläche + Blur. */ .ks-glass-fill { background-color: rgba(255, 255, 255, 0.62) !important; } @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { .ks-glass-fill { -webkit-backdrop-filter: blur(16px) saturate(175%); backdrop-filter: blur(16px) saturate(175%); } } /* ---- Getönte Sektion, damit Glas-Karten etwas zum Brechen haben (z.B. Blog- Liste). Höhere Spezifität als .bg-white, !important sichert es zusätzlich. */ .ks-glass-section { background: linear-gradient(180deg, #eef4fc 0%, #f6f9fd 100%) !important; } /* ---- Sanfter Seiten-Hintergrund (z.B. Rechtsseiten statt flachem bg-gray-50) */ .ks-public-bg { background: linear-gradient(180deg, #eef3fb 0%, #f6f9fd 45%, #eef3fb 100%) !important; background-attachment: fixed; } /* ---- Apple-Style Smooth-Reveal beim Scrollen ------------------------------ Nur aktiv, wenn JS lief (.ks-js auf ); sonst bleibt Inhalt sichtbar. */ .ks-js .ks-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .ks-js .ks-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ks-js .ks-reveal { opacity: 1; transform: none; transition: none; } .ks-glass-card, .ks-glass-card:hover { transition: none; transform: none; } }