/* Theme Name: Werra Maler Theme URI: https://werramaler.de Author: Werra Malerfachbetrieb GmbH Author URI: https://werramaler.de Description: Premium WordPress Block Theme für Werra Malerfachbetrieb GmbH – elegant, professionell, rechtssicher. Mit Dark/Light Toggle, Berlin-SEO und Multi-Step Angebotsformular. Version: 1.5.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: GNU General Public License v3 License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: werra-maler Tags: block-theme, full-site-editing, business, german, custom-logo, custom-menu, one-column, two-columns, dark-mode */ /* ============================================================ CSS CUSTOM PROPERTIES – LIGHT MODE (DEFAULT) ============================================================ */ :root { /* Brand Colors */ --theme-primary: #1a3a6c; --theme-primary-hover: #14305a; --theme-primary-light: #2a5298; --theme-primary-text: #1a3a6c; --theme-accent: #2563eb; --theme-accent-hover: #1d4ed8; --theme-accent-light: #e8f0fe; /* Neutral */ --theme-bg: #ffffff; --theme-bg-alt: #f8fafc; --theme-muted: #f4f4f5; --theme-text: #1f2937; --theme-text-muted: #6b7280; --theme-border: #e5e7eb; --theme-border-dark: #d1d5db; --theme-white: #ffffff; /* Semantic */ --theme-success: #10b981; --theme-error: #ef4444; --theme-warning: #f59e0b; /* Typography */ --theme-font-heading: 'Raleway', system-ui, -apple-system, sans-serif; --theme-font-body: 'Open Sans', system-ui, -apple-system, sans-serif; /* Font Sizes */ --theme-text-xs: 0.75rem; --theme-text-sm: 0.875rem; --theme-text-base: 1rem; --theme-text-lg: 1.125rem; --theme-text-xl: 1.25rem; --theme-text-2xl: 1.5rem; --theme-text-3xl: 1.875rem; --theme-text-4xl: 2.25rem; --theme-text-5xl: 3rem; --theme-text-6xl: 3.75rem; /* Spacing */ --theme-space-1: 0.25rem; --theme-space-2: 0.5rem; --theme-space-3: 0.75rem; --theme-space-4: 1rem; --theme-space-6: 1.5rem; --theme-space-8: 2rem; --theme-space-10: 2.5rem; --theme-space-12: 3rem; --theme-space-16: 4rem; --theme-space-20: 5rem; --theme-space-24: 6rem; /* Layout */ --theme-container: 860px; --theme-container-wide: 1200px; --theme-header-height: 72px; /* Borders */ --theme-radius-sm: 4px; --theme-radius-md: 8px; --theme-radius-lg: 12px; --theme-radius-xl: 16px; --theme-radius-2xl: 20px; --theme-radius-full: 9999px; /* Shadows */ --theme-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --theme-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); --theme-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04); /* Transitions */ --theme-transition: 250ms ease; --theme-transition-fast: 150ms ease; --theme-transition-slow: 400ms ease; /* Z-Index */ --theme-z-nav: 100; --theme-z-sticky: 200; --theme-z-modal: 400; --theme-z-lightbox: 500; } /* ============================================================ DARK MODE html.theme-dark: greift sofort beim Inline-Script im (vor body) body.theme-dark: greift nach DOMContentLoaded (externer / DOMReady Handler) ============================================================ */ html.theme-dark, body.theme-dark { --theme-bg: #0b1220; --theme-bg-alt: #0f1929; --theme-muted: #111827; --theme-text: #e5e7eb; --theme-text-muted: #9ca3af; --theme-border: #1f2937; --theme-border-dark: #374151; --theme-accent: #60a5fa; --theme-accent-hover: #93c5fd; --theme-accent-light: #1e3a5f; --theme-primary: #1a3a6c; --theme-primary-hover: #24507c; --theme-primary-text: #93b4d8; } /* ============================================================ BASE RESET & GLOBAL STYLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--theme-font-body); font-size: var(--theme-text-base); line-height: 1.65; color: var(--theme-text); background: var(--theme-bg); transition: background var(--theme-transition), color var(--theme-transition); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; /* Keine Browser-Fake-Fonts */ text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--theme-font-heading); font-weight: 700; line-height: 1.2; color: var(--theme-text); } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } h4 { font-size: 1.25rem; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--theme-accent); text-decoration: none; transition: color var(--theme-transition-fast); } a:hover { color: var(--theme-accent-hover); } img { max-width: 100%; height: auto; display: block; } ul, ol { padding-left: 1.5rem; } /* ============================================================ UTILITY CLASSES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .container { max-width: var(--theme-container); margin-left: auto; margin-right: auto; padding-left: var(--theme-space-6); padding-right: var(--theme-space-6); } .section-padding { padding-top: var(--theme-space-20); padding-bottom: var(--theme-space-20); } .text-center { text-align: center; } .text-muted { color: var(--theme-text-muted); } /* ============================================================ CARD COMPONENT ============================================================ */ .is-card { background: var(--theme-muted); border: 1px solid var(--theme-border); border-radius: var(--theme-radius-xl); padding: var(--theme-space-6); transition: transform var(--theme-transition), box-shadow var(--theme-transition); } .is-card:hover { transform: translateY(-2px); box-shadow: var(--theme-shadow-lg); } /* ============================================================ BUTTON OVERRIDES (Gutenberg) ============================================================ */ .wp-element-button, .wp-block-button__link { font-family: var(--theme-font-heading); font-weight: 700; border-radius: var(--theme-radius-lg) !important; transition: all var(--theme-transition) !important; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary .wp-element-button, .btn-primary .wp-block-button__link { background: var(--theme-accent) !important; color: #fff !important; border: 2px solid var(--theme-accent) !important; padding: 0.85rem 1.5rem !important; } .btn-primary .wp-element-button:hover, .btn-primary .wp-block-button__link:hover { background: var(--theme-accent-hover) !important; border-color: var(--theme-accent-hover) !important; transform: translateY(-1px); } .btn-ghost .wp-element-button, .btn-ghost .wp-block-button__link { background: transparent !important; color: var(--theme-text) !important; border: 2px solid var(--theme-border) !important; padding: 0.85rem 1.5rem !important; } .btn-ghost .wp-element-button:hover, .btn-ghost .wp-block-button__link:hover { border-color: var(--theme-accent) !important; color: var(--theme-accent) !important; background: var(--theme-accent-light) !important; } /* Ghost Button im Hero (auf dunklem Hintergrund – immer weißer Rand) */ .btn-hero-ghost .wp-element-button, .btn-hero-ghost .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.6) !important; padding: 0.85rem 1.5rem !important; } .btn-hero-ghost .wp-element-button:hover, .btn-hero-ghost .wp-block-button__link:hover { background: rgba(255,255,255,0.15) !important; border-color: #fff !important; } /* ── Header CTA Button ───────────────────────────────────── */ .btn-header-cta .wp-element-button, .btn-header-cta .wp-block-button__link { background: var(--theme-accent) !important; color: #fff !important; border: 2px solid var(--theme-accent) !important; border-radius: var(--theme-radius-full) !important; padding: 0.5rem 1.2rem !important; font-size: 0.875rem !important; font-weight: 700 !important; white-space: nowrap !important; } .btn-header-cta .wp-element-button:hover, .btn-header-cta .wp-block-button__link:hover { background: var(--theme-accent-hover) !important; border-color: var(--theme-accent-hover) !important; transform: translateY(-1px); } /* ── Benefit Cards ("Warum Werra Maler?") ────────────────── */ .benefit-card { background: var(--theme-bg) !important; border: 1.5px solid var(--theme-border) !important; border-radius: var(--theme-radius-lg) !important; transition: border-color var(--theme-transition), box-shadow var(--theme-transition); } .benefit-card:hover { border-color: var(--theme-accent) !important; box-shadow: var(--theme-shadow-sm); } .benefit-icon { font-size: 1.3rem !important; line-height: 1 !important; flex-shrink: 0 !important; color: var(--theme-success) !important; } /* Hero Content Centered – garantiert Zentrierung */ .hero-content-centered { text-align: center; } .hero-content-centered .wp-block-buttons { justify-content: center !important; } .hero-content-centered .wp-block-group { justify-content: center !important; } /* ── Header Right Group ──────────────────────────────────── */ .header-right { flex-shrink: 0; display: flex; align-items: center; gap: var(--wp--preset--spacing--s, 0.5rem); } /* ── Section Warum Basis ─────────────────────────────────── */ .section-warum { background: var(--theme-bg); } /* ============================================================ CHIPS / TAXONOMY TAGS ============================================================ */ .chip, .wp-block-post-terms.chip { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; } .chip a, .wp-block-post-terms.chip a { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: var(--theme-radius-full); border: 1px solid var(--theme-border); background: var(--theme-bg); color: var(--theme-text); font-size: var(--theme-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: all var(--theme-transition-fast); text-decoration: none; } .chip a:hover, .wp-block-post-terms.chip a:hover { background: var(--theme-accent); border-color: var(--theme-accent); color: #fff; } /* Chips auf dunklem Hero */ .hero-home .chip a, .project-single-hero .chip a { border-color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.3); color: #fff; backdrop-filter: blur(4px); } /* ============================================================ TRUST PILLS ============================================================ */ .trust-pill, p.trust-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: var(--theme-radius-full); border: 1px solid var(--theme-border); background: color-mix(in srgb, var(--theme-muted) 85%, transparent); font-size: var(--theme-text-sm); font-weight: 600; color: var(--theme-text); margin: 0.25rem 0.25rem 0 0; } .hero-home .trust-pill, .hero-home p.trust-pill { border-color: rgba(255,255,255,0.25); background: rgba(0,0,0,0.3); color: #fff; backdrop-filter: blur(4px); } /* ============================================================ CARD IMAGES ============================================================ */ .card-image, .card-image img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--theme-radius-lg); display: block; } .service-card .wp-block-image, .service-card figure { margin: 0 0 var(--theme-space-4) 0; } .service-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--theme-radius-lg); } .project-card { padding: var(--theme-space-4); } .project-card .wp-block-post-featured-image { margin-bottom: var(--theme-space-3); } /* ============================================================ PROJECTS GRID ============================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--theme-space-4); } @media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .projects-grid { grid-template-columns: 1fr; } } .projects-grid-wrap .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--theme-space-4); list-style: none; padding: 0; margin: 0; } @media (max-width: 1024px) { .projects-grid-wrap .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .projects-grid-wrap .wp-block-post-template { grid-template-columns: 1fr; } } /* ============================================================ SITE HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--theme-z-sticky); background: color-mix(in srgb, var(--theme-bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--theme-border); transition: background var(--theme-transition), border-color var(--theme-transition); will-change: background; /* GPU-Compositing für Sticky-Scroll-Übergang */ contain: layout style; /* Layout-Containment → Browser muss Header-Änderungen nicht auf Rest des DOM auswirken */ } .site-header .wp-block-group.alignwide { padding: 0.75rem var(--theme-space-6); gap: var(--theme-space-3); align-items: center; } .site-header.is-scrolled { background: color-mix(in srgb, var(--theme-bg) 97%, transparent); box-shadow: var(--theme-shadow-md); } /* ── Site-Logo ── */ .site-header .wp-block-site-logo { flex-shrink: 0; } .site-header .wp-block-site-logo img, .site-header .wp-block-site-logo a img { height: 52px; width: auto; max-width: 200px; object-fit: contain; display: block; border-radius: 4px; } body.theme-dark .site-header .wp-block-site-logo img { background: #fff; padding: 3px 6px; border-radius: 6px; } /* ── Navigation: nimmt verfügbaren Platz, darf schrumpfen ── */ .site-header .wp-block-navigation { flex: 1 1 auto; min-width: 0; } /* ── Toggle: nie schrumpfen ── */ .site-header .btn-toggle { flex-shrink: 0; } /* ── Nav-Links (Desktop) ── */ .site-header .wp-block-navigation a { color: var(--theme-text) !important; text-decoration: none; font-weight: 600; font-size: 0.925rem; letter-spacing: 0.01em; padding: 0.35rem 0.1rem; transition: color var(--theme-transition-fast); position: relative; } .site-header .wp-block-navigation a:hover, .site-header .wp-block-navigation a:focus-visible { color: var(--theme-accent) !important; } /* Aktiver Link (current page) */ .site-header .wp-block-navigation .current-menu-item > a, .site-header .wp-block-navigation .current_page_item > a { color: var(--theme-accent) !important; } /* ── Submenu-Dropdown ── */ .site-header .wp-block-navigation-submenu__toggle { color: var(--theme-text) !important; font-weight: 600; font-size: 0.925rem; background: none; border: none; cursor: pointer; padding: 0.35rem 0.1rem; display: inline-flex; align-items: center; gap: 0.25rem; transition: color var(--theme-transition-fast); } .site-header .wp-block-navigation-submenu__toggle:hover { color: var(--theme-accent) !important; } /* Dropdown-Container */ .site-header .wp-block-navigation__submenu-container { background: var(--theme-bg) !important; border: 1px solid var(--theme-border) !important; border-radius: var(--theme-radius-lg) !important; box-shadow: var(--theme-shadow-lg) !important; padding: 0.5rem !important; min-width: 220px; top: calc(100% + 8px) !important; } .site-header .wp-block-navigation__submenu-container a { display: block; padding: 0.55rem 0.85rem !important; border-radius: var(--theme-radius-md) !important; font-size: 0.875rem !important; white-space: nowrap; transition: background var(--theme-transition-fast), color var(--theme-transition-fast); } .site-header .wp-block-navigation__submenu-container a:hover { background: var(--theme-accent-light) !important; color: var(--theme-accent) !important; } /* ── Mobile Overlay (Hamburger-Menü) ── */ .site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--theme-bg) !important; padding: 1.5rem !important; z-index: 9999; } /* Sicherstellen dass Overlay-Content nur Nav-Links enthält */ .site-header .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; gap: 0.25rem; } .site-header .wp-block-navigation__responsive-container-content a, .site-header .wp-block-navigation__responsive-container-content button { font-size: 1rem !important; font-weight: 600 !important; color: var(--theme-text) !important; padding: 0.65rem 0.5rem !important; border-bottom: 1px solid var(--theme-border); text-decoration: none; display: block; width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none; border-radius: 0; transition: color var(--theme-transition-fast); } .site-header .wp-block-navigation__responsive-container-content a:hover { color: var(--theme-accent) !important; } /* Schließen-Button im Mobile-Overlay */ .site-header .wp-block-navigation__responsive-container-close { background: none !important; border: 1px solid var(--theme-border) !important; border-radius: var(--theme-radius-full) !important; width: 40px !important; height: 40px !important; color: var(--theme-text) !important; } /* ============================================================ DARK/LIGHT TOGGLE BUTTON – Icon-Only ============================================================ */ .btn-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--theme-border); color: var(--theme-text); border-radius: var(--theme-radius-full); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: all var(--theme-transition-fast); } .btn-toggle:hover { border-color: var(--theme-accent); background: var(--theme-accent-light); } /* ── Hamburger-Nav ab ≤1100px ── */ @media (max-width: 1100px) { /* Hamburger-Button sichtbar */ .site-header .wp-block-navigation__responsive-container-open { display: flex !important; } /* Desktop-Nav verstecken wenn Overlay geschlossen */ .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; /* KEIN display:none → verhindert dass Block-Content aus dem Container "fällt" */ } /* Overlay wenn offen: sichtbar & fixed über allem */ .site-header .wp-block-navigation__responsive-container.is-menu-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; inset: 0 !important; z-index: 9999 !important; overflow-y: auto; } } /* ── Schmaler Header auf Mobilgeräten ── */ @media (max-width: 600px) { .site-header .wp-block-group.alignwide { padding: 0.6rem var(--theme-space-4); } } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { padding: var(--theme-space-16) 0 var(--theme-space-8); border-top: 1px solid var(--theme-border); background: var(--theme-bg-alt); color: var(--theme-text); } .footer-cta { padding: var(--theme-space-8); margin-bottom: var(--theme-space-12); background: var(--theme-primary); border-radius: var(--theme-radius-2xl); color: #fff; gap: var(--theme-space-6); } .footer-cta h3, .footer-cta p { color: #fff; } .footer-grid { margin-top: 0; } .footer-grid h4 { font-size: var(--theme-text-base); font-weight: 700; margin-bottom: var(--theme-space-4); color: var(--theme-text); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--theme-text-sm); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.6rem; } .footer-links a { color: var(--theme-text-muted); text-decoration: none; font-size: var(--theme-text-sm); transition: color var(--theme-transition-fast); } .footer-links a:hover { color: var(--theme-accent); } .footer-bottom { padding-top: var(--theme-space-6); border-top: 1px solid var(--theme-border); margin-top: var(--theme-space-10); gap: var(--theme-space-4); } .small-muted { color: var(--theme-text-muted); font-size: var(--theme-text-sm); } .footer-design-credit { font-size: 0.72rem; opacity: 0.65; } /* ── Footer Grid: 4-spaltig → 2-spaltig auf Tablet ── */ @media (max-width: 1024px) and (min-width: 783px) { .footer-grid.wp-block-columns { flex-wrap: wrap !important; } .footer-grid .wp-block-column { flex-basis: calc(50% - 1rem) !important; min-width: 200px; } } /* ── Footer Bottom: Stack auf mobil ── */ @media (max-width: 600px) { .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: var(--theme-space-3) !important; } } /* ============================================================ HERO SECTIONS ============================================================ */ .hero-home, .hero-page { position: relative; } .hero-home .wp-block-cover__inner-container, .hero-page .wp-block-cover__inner-container { padding: var(--theme-space-8) 0; } /* Proof card on hero */ .proof-card { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; backdrop-filter: blur(16px); color: #fff; } .proof-card h3, .proof-card h4, .proof-card p { color: #fff; } /* ============================================================ SCROLL REVEAL ANIMATIONS ============================================================ */ [data-animate] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; /* Browser-Hint → GPU-Layer vorab bereitstellen */ } [data-animate="fade-up"] { transform: translateY(30px); } [data-animate="fade-in"] { transform: none; } [data-animate="slide-right"] { transform: translateX(-30px); } [data-animate="scale-in"] { transform: scale(0.95); } [data-animate].is-visible { opacity: 1; transform: none; will-change: auto; /* nach Animation freigeben → Speicher sparen */ } @media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; transition: none; will-change: auto; } } /* ============================================================ MULTI-STEP FORM (BRIEFING) ============================================================ */ .wm-multistep-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--theme-space-8); } .wm-step-indicator { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; } .wm-step-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--theme-border); background: var(--theme-bg); color: var(--theme-text-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--theme-text-sm); transition: all var(--theme-transition); } .wm-step-indicator.is-active .wm-step-dot { background: var(--theme-accent); border-color: var(--theme-accent); color: #fff; } .wm-step-indicator.is-done .wm-step-dot { background: var(--theme-success); border-color: var(--theme-success); color: #fff; } .wm-step-label { font-size: var(--theme-text-xs); font-weight: 600; color: var(--theme-text-muted); } .wm-step-indicator.is-active .wm-step-label { color: var(--theme-accent); } .wm-step-line { width: 60px; height: 2px; background: var(--theme-border); margin: 0 4px; margin-bottom: 20px; transition: background var(--theme-transition); } .wm-step-line.is-done { background: var(--theme-success); } /* Form fields */ .wm-field { margin-bottom: var(--theme-space-4); } .wm-field label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: var(--theme-text-sm); } .wm-field input, .wm-field select, .wm-field textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--theme-border); border-radius: var(--theme-radius-md); background: var(--theme-bg); color: var(--theme-text); font-family: var(--theme-font-body); font-size: var(--theme-text-base); transition: border-color var(--theme-transition-fast); } .wm-field input:focus, .wm-field select:focus, .wm-field textarea:focus { outline: none; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-accent-light); } .wm-field.has-error input, .wm-field.has-error select, .wm-field.has-error textarea { border-color: var(--theme-error); } .wm-error-msg { color: var(--theme-error); font-size: var(--theme-text-sm); margin-top: 0.35rem; display: none; } .wm-field.has-error .wm-error-msg { display: block; } /* Checkbox cards */ .wm-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--theme-space-3); } .wm-checkbox-card { position: relative; } .wm-checkbox-card input[type="checkbox"], .wm-checkbox-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .wm-checkbox-card label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--theme-space-4); border: 2px solid var(--theme-border); border-radius: var(--theme-radius-lg); background: var(--theme-bg); cursor: pointer; text-align: center; font-weight: 600; font-size: var(--theme-text-sm); transition: all var(--theme-transition-fast); min-height: 90px; } .wm-checkbox-card label:hover { border-color: var(--theme-accent); background: var(--theme-accent-light); } .wm-checkbox-card input:checked + label { border-color: var(--theme-accent); background: var(--theme-accent-light); color: var(--theme-accent); } .wm-checkbox-card .icon { font-size: 1.5rem; } /* Form navigation buttons */ .wm-form-nav { display: flex; gap: var(--theme-space-3); justify-content: flex-end; margin-top: var(--theme-space-6); } /* Summary table */ .wm-summary-table { width: 100%; border-collapse: collapse; font-size: var(--theme-text-sm); } .wm-summary-table th, .wm-summary-table td { padding: 0.75rem 1rem; border: 1px solid var(--theme-border); text-align: left; } .wm-summary-table th { background: var(--theme-muted); font-weight: 700; width: 35%; } /* ============================================================ RESPONSIVE – MOBILE ============================================================ */ /* Projects Showcase: 30/70 columns → stack on tablet/mobile */ @media (max-width: 900px) { .projects-showcase .wp-block-columns { flex-direction: column !important; } .projects-showcase .wp-block-column[style*="flex-basis:30%"], .projects-showcase .wp-block-column[style*="flex-basis:70%"] { flex-basis: 100% !important; width: 100% !important; } /* Filter buttons horizontal on tablet */ .projects-showcase .wp-block-buttons[style*="flex-direction:column"] { flex-direction: row !important; flex-wrap: wrap !important; } } /* CTA Band: stack on mobile */ @media (max-width: 768px) { .section-cta-band .wp-block-group.alignwide { flex-direction: column !important; align-items: flex-start !important; } .section-padding { padding-top: var(--theme-space-12); padding-bottom: var(--theme-space-12); } .is-card { padding: var(--theme-space-4); } .footer-cta { flex-direction: column; align-items: flex-start; } .wm-checkbox-grid { grid-template-columns: repeat(2, 1fr); } /* About section: ensure image shows below text on mobile */ .section-about .wp-block-columns { flex-direction: column !important; } .section-about .wp-block-column[style*="flex-basis:55%"], .section-about .wp-block-column[style*="flex-basis:45%"] { flex-basis: 100% !important; width: 100% !important; } } @media (max-width: 480px) { .wm-checkbox-grid { grid-template-columns: 1fr 1fr; } .wm-form-nav { flex-direction: column; } /* Hero buttons: full width on very small screens */ .hero-home .wp-block-buttons { flex-direction: column !important; align-items: stretch !important; } .hero-home .wp-block-button { width: 100%; } .hero-home .wp-block-button__link { justify-content: center; width: 100%; } } /* ============================================================ GRAVITY FORMS OVERRIDES ============================================================ */ .gform_wrapper.gravity-theme .gfield input, .gform_wrapper.gravity-theme .gfield select, .gform_wrapper.gravity-theme .gfield textarea { background: var(--theme-bg) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; border-radius: var(--theme-radius-md) !important; } .gform_wrapper.gravity-theme .gform_footer .gform_button, .gform_wrapper.gravity-theme .gform_next_button { background: var(--theme-accent) !important; border-radius: var(--theme-radius-lg) !important; font-weight: 700 !important; } /* ============================================================ IMPRESSUM PAGE ============================================================ */ /* ── Hero ── */ .imp-hero { border-bottom: 1px solid rgba(255,255,255,0.08); } .imp-breadcrumb { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0 0 0.9rem 0; letter-spacing: 0.01em; } .imp-breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--theme-transition-fast); } .imp-breadcrumb a:hover { color: rgba(255,255,255,0.9); } .imp-breadcrumb span { margin: 0 0.4rem; opacity: 0.4; } /* ── Sidebar column: sticky ── */ .wp-block-column.imp-sidebar { position: sticky; top: calc(var(--theme-header-height) + 1.5rem); align-self: flex-start; flex-grow: 0 !important; flex-shrink: 0 !important; } /* ── Contact Card ── */ .imp-contact-card { background: var(--theme-primary); border-radius: var(--theme-radius-xl); padding: var(--theme-space-6); margin-bottom: var(--theme-space-4); } /* Firmen-Initial (der "W"-Buchstabe) */ p.imp-contact-initial { width: 44px; height: 44px; border-radius: var(--theme-radius-md); background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-family: var(--theme-font-heading); font-weight: 800; font-size: 1.3rem; color: #fff; margin: 0 0 var(--theme-space-4) 0; line-height: 1; } /* Firmenname */ h4.imp-contact-firm { color: #fff; font-size: 0.92rem; font-weight: 700; padding-bottom: var(--theme-space-3); border-bottom: 1px solid rgba(255,255,255,0.15); line-height: 1.3; } /* Kontaktzeilen */ p.imp-contact-row { font-size: 0.82rem; color: rgba(255,255,255,0.82); line-height: 1.5; margin: 0 0 0.4rem 0; } p.imp-contact-row a { color: #fff; text-decoration: none; font-weight: 600; transition: opacity var(--theme-transition-fast); } p.imp-contact-row a:hover { opacity: 0.75; text-decoration: underline; } /* CTA Button in der Card */ .imp-cta-btn .wp-element-button, .imp-cta-btn .wp-block-button__link { background: rgba(255,255,255,0.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: var(--theme-radius-md) !important; font-size: 0.82rem !important; font-weight: 700 !important; padding: 0.55rem 1rem !important; width: 100%; justify-content: center; transition: background var(--theme-transition-fast) !important; } .imp-cta-btn .wp-element-button:hover, .imp-cta-btn .wp-block-button__link:hover { background: rgba(255,255,255,0.26) !important; transform: none !important; } /* ── TOC ── */ .imp-toc { background: var(--theme-muted); border: 1px solid var(--theme-border); border-radius: var(--theme-radius-xl); padding: var(--theme-space-5); margin-bottom: var(--theme-space-4); } p.imp-toc-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; font-family: var(--theme-font-heading); color: var(--theme-text-muted); margin: 0 0 0.65rem 0; } .imp-toc-list.wp-block-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .imp-toc-list.wp-block-list li { border-bottom: 1px solid var(--theme-border); padding: 0; margin: 0; } .imp-toc-list.wp-block-list li:last-child { border-bottom: none; } .imp-toc-list.wp-block-list li a { display: block; font-size: 0.82rem; color: var(--theme-text-muted); text-decoration: none; padding: 0.42rem 0.2rem; transition: color var(--theme-transition-fast), padding-left var(--theme-transition-fast); } .imp-toc-list.wp-block-list li a:hover { color: var(--theme-accent); padding-left: 0.45rem; } /* ── Back Button ── */ .imp-back-btn .wp-element-button, .imp-back-btn .wp-block-button__link { background: transparent !important; border: 1px solid var(--theme-border) !important; color: var(--theme-text-muted) !important; border-radius: var(--theme-radius-md) !important; font-size: 0.82rem !important; font-weight: 600 !important; padding: 0.55rem 1rem !important; width: 100%; justify-content: center; transition: all var(--theme-transition-fast) !important; } .imp-back-btn .wp-element-button:hover, .imp-back-btn .wp-block-button__link:hover { border-color: var(--theme-accent) !important; color: var(--theme-accent) !important; background: var(--theme-accent-light) !important; transform: none !important; } /* ── Content area ── */ .imp-content h3.wp-block-heading { font-size: 1rem; font-weight: 700; color: var(--theme-primary-text); margin: 2.5rem 0 0.75rem 0; padding-left: 0.85rem; border-left: 3px solid var(--theme-accent); line-height: 1.3; } .imp-content h3.wp-block-heading:first-child { margin-top: 0; } .imp-content .wp-block-post-content p { font-size: 0.9rem; line-height: 1.8; color: var(--theme-text); margin: 0 0 0.75rem 0; } .imp-content .wp-block-post-content a { color: var(--theme-accent); font-weight: 600; text-decoration: none; } .imp-content .wp-block-post-content a:hover { text-decoration: underline; } .imp-content .wp-block-separator { border-color: var(--theme-border); opacity: 1; } /* ── Mobile: Content oben, Sidebar unten ── */ @media (max-width: 782px) { .wp-block-column.imp-sidebar { position: static; flex-basis: 100% !important; width: 100% !important; order: 2; } .wp-block-column.imp-content { order: 1; } } /* ============================================================ PERFORMANCE: RENDERING-OPTIMIERUNGEN ============================================================ */ /* content-visibility: auto → Browser überspringt Rendering von Off-Screen-Karten. contain-intrinsic-size gibt geschätzte Höhe an → verhindert Layout-Shift beim Scrollen. Nur auf Grid-Cards anwenden (nicht Hero, nicht Header). */ .project-card, .service-card, .is-card { content-visibility: auto; contain-intrinsic-size: 0 420px; /* Geschätzte Kartenhöhe (4:3 + Content) */ } /* Isoliert Styles/Layout innerhalb von FAQ-Items → schnelleres Repaint */ .faq-item { contain: layout style; } /* Google Fonts werden mit display=swap geladen (bereits im URL-Parameter gesetzt). */ /* ============================================================ CTA BAND – SOLID ACCENT BACKGROUND ============================================================ */ /* White button on blue background */ .btn-cta-white .wp-element-button, .btn-cta-white .wp-block-button__link { background: #ffffff !important; color: var(--theme-accent) !important; border: 2px solid #ffffff !important; border-radius: var(--theme-radius-lg) !important; font-weight: 700 !important; padding: 0.8rem 1.75rem !important; transition: background var(--theme-transition-fast), color var(--theme-transition-fast) !important; } .btn-cta-white .wp-element-button:hover, .btn-cta-white .wp-block-button__link:hover { background: rgba(255,255,255,0.9) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important; } /* Ghost button on blue background */ .btn-cta-ghost .wp-element-button, .btn-cta-ghost .wp-block-button__link { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,0.65) !important; border-radius: var(--theme-radius-lg) !important; font-weight: 600 !important; padding: 0.8rem 1.75rem !important; transition: border-color var(--theme-transition-fast), background var(--theme-transition-fast) !important; } .btn-cta-ghost .wp-element-button:hover, .btn-cta-ghost .wp-block-button__link:hover { border-color: #ffffff !important; background: rgba(255,255,255,0.12) !important; transform: translateY(-2px) !important; } /* ============================================================ ABOUT – STATS SECTION ============================================================ */ .section-about { background: var(--theme-accent-light) !important; } html.theme-dark .section-about, body.theme-dark .section-about { background: #0f1929 !important; } /* Stat numbers (20+, 500+, 100%) */ .stat-number { font-family: var(--theme-font-heading) !important; color: var(--theme-accent) !important; line-height: 1 !important; } /* About image: fill column, consistent crop */ .about-image figure, figure.about-image { margin: 0; border-radius: 12px; overflow: hidden; } .about-image img, figure.about-image img { width: 100% !important; height: 480px !important; object-fit: cover !important; border-radius: 12px !important; display: block; } @media (max-width: 768px) { .about-image img, figure.about-image img { height: 280px !important; } } /* ============================================================ STAGGER ANIMATION CONTAINER ============================================================ */ /* .wm-stagger: JS hook – kein display-Override nötig, nur overflow sicherstellen */ .wm-stagger { overflow: visible !important; } /* ============================================================ FOOTER CTA BUTTON ============================================================ */ .btn-footer-cta .wp-element-button, .btn-footer-cta .wp-block-button__link { background: #ffffff !important; color: var(--theme-primary) !important; border: 2px solid #ffffff !important; border-radius: var(--theme-radius-lg) !important; font-weight: 700 !important; padding: 0.7rem 1.4rem !important; transition: all var(--theme-transition-fast) !important; } .btn-footer-cta .wp-element-button:hover, .btn-footer-cta .wp-block-button__link:hover { background: rgba(255,255,255,0.9) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; } /* ============================================================ PRINT ============================================================ */ @media print { .site-header, .site-footer, .btn-toggle { display: none !important; } }