/** Theme Name: lebensklang Author: Brainstorm Force Author URI: http://wpastra.com/about/ Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme! Version: 1.3.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lebensklang Template: astra */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --gold: #E8A830; --gold-warm: #D4922A; --gold-light: #F5D68A; --gold-pale: #FBE9B8; --gold-glow: rgba(232, 168, 48, 0.14); --cream: #FFF8ED; --cream-deep: #FEF0D8; --cream-border: rgba(232, 168, 48, 0.18); --blue: #2B6CB0; --text: #2E2A25; --text-mid: #5A5248; --text-light: #8A7F72; --white: #FFFFFF; --footer-bg: #1E2B38; --footer-mid: #2B3A4A; --footer-text: #B8CEDF; --footer-dim: rgba(184, 206, 223, 0.5); --shadow-xs: 0 1px 4px rgba(43, 58, 74, 0.05); --shadow-sm: 0 2px 10px rgba(43, 58, 74, 0.07); --shadow-md: 0 6px 24px rgba(43, 58, 74, 0.09); --shadow-lg: 0 12px 48px rgba(43, 58, 74, 0.11); --shadow-xl: 0 24px 72px rgba(43, 58, 74, 0.14); --shadow-gold: 0 6px 28px rgba(212, 146, 42, 0.25); --shadow-gold-lg: 0 12px 48px rgba(212, 146, 42, 0.35); --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 40px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.18s var(--ease); --t-base: 0.3s var(--ease); --t-slow: 0.6s var(--ease-out); } /* ============================================================ ANIMATED WAVE BACKGROUND ============================================================ */ .lk-global-waves { position: fixed; bottom: 0; left: 0; right: 0; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.42; } .lk-global-waves svg { position: absolute; bottom: 0; left: 0; width: 200%; min-width: 1400px; height: auto; } .lk-wave-1 { animation: lkWave1 13s ease-in-out infinite; } .lk-wave-2 { animation: lkWave2 10s ease-in-out infinite; } .lk-wave-3 { animation: lkWave3 16s ease-in-out infinite; } .lk-glow { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(1px); } .lk-glow-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(245, 214, 138, 0.22) 0%, transparent 68%); bottom: -200px; right: -120px; animation: lkGlow1 9s ease-in-out infinite; } .lk-glow-2 { width: 450px; height: 450px; background: radial-gradient(circle, rgba(232, 168, 48, 0.1) 0%, transparent 70%); bottom: 60px; left: -100px; animation: lkGlow2 11s ease-in-out infinite; } .lk-glow-3 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(245, 214, 138, 0.13) 0%, transparent 70%); top: 8%; right: 12%; animation: lkGlow3 14s ease-in-out infinite; } @keyframes lkWave1 { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-11%)} } @keyframes lkWave2 { 0%,100%{transform:translateX(-4%)} 50%{transform:translateX(-17%)} } @keyframes lkWave3 { 0%,100%{transform:translateX(-7%)} 50%{transform:translateX(-21%)} } @keyframes lkGlow1 { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.9; transform:scale(1.14)} } @keyframes lkGlow2 { 0%,100%{opacity:.35;transform:scale(1) translate(0,0)} 50%{opacity:.65;transform:scale(1.1) translate(18px,-8px)} } @keyframes lkGlow3 { 0%,100%{opacity:.28;transform:scale(1)} 50%{opacity:.55;transform:scale(1.18)} } /* Shimmer effect on hover */ .wp-block-button__link::after, .wp-element-button::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); transform: skewX(-20deg); transition: left 0.5s ease; pointer-events: none; } .wp-block-button__link:hover::after, .wp-element-button:hover::after { left: 150%; } /* Primary filled */ .wp-block-button:not(.is-style-outline) .wp-block-button__link, .wp-block-button.is-style-fill .wp-block-button__link { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%) !important; color: var(--white) !important; border: none !important; box-shadow: var(--shadow-gold) !important; } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .wp-block-button.is-style-fill .wp-block-button__link:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-gold-lg) !important; color: var(--white) !important; background: linear-gradient(135deg, #EDB53A 0%, var(--gold-warm) 100%) !important; } /* Outline */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--text-mid) !important; border: 1.5px solid rgba(46, 42, 37, 0.22) !important; } .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--gold) !important; color: var(--gold-warm) !important; background: var(--gold-glow) !important; } /* ── Globale Wellen auf allen Unterseiten sichtbar machen ── Astra-Wrapper und Artikel-Container transparent setzen, damit der animierte Wellenhintergrund (position:fixed) auf allen Seiten durchscheint. Einzelne Karten/Blöcke behalten ihre eigenen Hintergrundfarben. */ #content, .site-content, #primary, .content-area, .site-main, .ast-layout-container, .ast-container:not(.ast-menu-toggle-link), article.page, article.hentry, .hentry, .entry-content { background: transparent !important; } /* ============================================================ ABOUT / PORTRAIT IMAGE ============================================================ */ /* Circular image in about section — add golden ring */ .wp-block-image.size-large[style*="border-radius:50%"] img, .wp-block-image[style*="border-radius:50%"] img { border-radius: 50% !important; object-fit: cover !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85), 0 0 0 10px rgba(232, 168, 48, 0.22), 0 20px 64px rgba(43, 58, 74, 0.14) !important; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .wp-block-image.size-large[style*="border-radius:50%"]:hover img, .wp-block-image[style*="border-radius:50%"]:hover img { transform: scale(1.025); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 0 12px rgba(232, 168, 48, 0.32), 0 28px 72px rgba(43, 58, 74, 0.18) !important; } /* Image-only flex group: no card style, just clean centering */ .entry-content .wp-block-columns .wp-block-column > .wp-block-group.is-layout-flex, .entry-content .wp-block-columns .wp-block-column > .wp-block-group:has(> .wp-block-image) { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Cream sections: better padding and visual rhythm */ .wp-block-group[style*="padding-top:4rem"], .wp-block-group[style*="padding-top: 4rem"] { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 6vw, 5rem) !important; } /* Stats row: large gold numbers in paragraph with inline style (e.g. 30+, ∞, 2016) Target only paragraphs that explicitly set font-size to ~2.8rem via inline style */ .entry-content .wp-block-column p[style*="font-size:2.8rem"], .entry-content .wp-block-column p[style*="font-size: 2.8rem"] { font-family: var(--font-display) !important; font-size: 2.8rem !important; font-weight: 700 !important; color: var(--gold-warm) !important; line-height: 1 !important; } /* ============================================================ SCROLL REVEAL ============================================================ */ .lk-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); } .lk-reveal.lk-visible { opacity: 1; transform: translateY(0); } /* Auto-reveal classes for JS targeting */ .lk-auto-reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform; } .lk-auto-reveal.lk-in { opacity: 1; transform: translateY(0); } @media (max-width: 900px) { .wp-block-cover.alignfull { min-height: 75vh !important; } .wp-block-cover__inner-container { padding: 48px 20px; } } @media (max-width: 768px) { .lk-glow-1, .lk-glow-2, .lk-glow-3 { opacity: 0; } .wp-block-cover.alignfull { min-height: 68vh !important; } .entry-content .wp-block-columns .wp-block-column > .wp-block-group { padding: 24px 20px; } body { overflow-x: hidden; } } @media (max-width: 540px) { .wp-block-buttons { flex-direction: column !important; } .wp-block-button { width: 100% !important; } .wp-block-button__link { width: 100% !important; justify-content: center !important; } } @media (prefers-reduced-motion: reduce) { .lk-wave-1, .lk-wave-2, .lk-wave-3, .lk-glow-1, .lk-glow-2, .lk-glow-3 { animation: none !important; } .lk-reveal, .lk-auto-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }