/* ============================================================ Klaus' Garage – Style v4 Dark industrial / motorsport theme ============================================================ */ :root { --bg: #0d0d0d; --bg-rgb: 13,13,13; --surface: #161618; --border: #242426; --fg: #f0f0f0; --heading: #ffffff; --muted: #666; --primary: #e63946; --primary-hover: #ff4455; --primary-rgb: 230,57,70; --on-primary: #ffffff; --secondary: #4a90c2; --on-secondary: #ffffff; --radius: 0px; --radius-sm: 0px; --shadow: none; --logo-scale: 1; --font-head: 'Bebas Neue', Impact, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } /* ── Light Theme (Petrol) ───────────────────────────────────── Activated via , set globally by the admin in Einstellungen. All colors below override the dark defaults. */ html[data-theme="light"] { --radius: 0px; --radius-sm: 0px; --shadow: none; --secondary: #1f6f9c; --on-secondary: #ffffff; --bg: #f4f7f8; --bg-rgb: 244,247,248; --surface: #ffffff; --border: #dde4e6; --fg: #1d2b30; --heading: #102a33; --muted: #6b7c82; --primary: #0e7c86; --primary-hover: #0a99a6; --primary-rgb: 14,124,134; --on-primary: #ffffff; } html[data-theme="light"] body { background: var(--bg); } /* Hero / pillar background images are darker photos – keep a dark veil so light text inside hero/pillar sections stays readable */ html[data-theme="light"] .hero .veil { background: linear-gradient(160deg, rgba(16,42,51,.82) 0%, rgba(16,42,51,.55) 60%, rgba(16,42,51,.82) 100%); } html[data-theme="light"] .pillar-veil { background: linear-gradient(135deg, rgba(16,42,51,.78) 0%, rgba(16,42,51,.45) 50%, rgba(16,42,51,.7) 100%); } html[data-theme="light"] .hero .huge, html[data-theme="light"] .pillar h2, html[data-theme="light"] .pillar p { color: #ffffff; } html[data-theme="light"] .pillar p { color: rgba(255,255,255,.82); } /* Preloader stays dark/dramatic regardless of site theme */ html[data-theme="light"] #kg-preloader, html[data-theme="light"] #kg-preloader * { color-scheme: dark; } /* Stripes / grid background patterns: lighten on light theme */ html[data-theme="light"] .hero .stripes, html[data-theme="light"] .cta-box .stripes { opacity: .02; } /* Marquee logos: don't grayscale-invert on light bg */ html[data-theme="light"] .marquee-logo { filter: grayscale(1) opacity(.55); } html[data-theme="light"] .marquee-item:hover .marquee-logo { filter: grayscale(0) opacity(1); } /* Shadows look better softer on light backgrounds */ html[data-theme="light"] .listing:hover, html[data-theme="light"] .service:hover { box-shadow: 0 4px 16px rgba(14,124,134,.08); } /* ── Racing Theme (Yellow / Cream) ────────────────────────────── Activated via , set globally by the admin in Einstellungen. Warm cream base with the bold racing yellow from the Klaus Garage logo as the accent. Rounded corners + soft shadows for a friendlier, more modern feel. */ html[data-theme="racing"] { --secondary: #2e247b; --secondary-hover: #423292; --on-secondary: #ffffff; --bg: #fbf6ec; --bg-rgb: 251,246,236; --surface: #ffffff; --border: #ecdfc4; --fg: #2c2620; --heading: #1a1611; --muted: #8a7e6c; --primary: #ffcc00; --primary-hover: #ffd633; --primary-rgb: 255,204,0; --on-primary: #1a1611; --radius: 20px; --radius-sm: 10px; --shadow: 0 8px 24px rgba(44,38,32,.10); } html[data-theme="racing"] body { background: var(--bg); } /* Hero / pillar background images: warm dark-brown veil instead of red/petrol tint */ html[data-theme="racing"] .hero .veil { background: linear-gradient(160deg, rgba(26,22,17,.84) 0%, rgba(26,22,17,.55) 60%, rgba(26,22,17,.84) 100%); } html[data-theme="racing"] .pillar-veil { background: linear-gradient(135deg, rgba(26,22,17,.8) 0%, rgba(26,22,17,.45) 50%, rgba(26,22,17,.72) 100%); } html[data-theme="racing"] .hero .huge, html[data-theme="racing"] .pillar h2, html[data-theme="racing"] .pillar p { color: #fffaf0; } html[data-theme="racing"] .pillar p { color: rgba(255,250,240,.85); } /* Links use the logo-blue (secondary) for proper contrast against cream; yellow primary is reserved for buttons/CTAs with dark text */ html[data-theme="racing"] a { color: var(--secondary); } html[data-theme="racing"] a:hover { color: var(--secondary-hover); } /* USP icons and inline icons also use logo-blue for consistency */ html[data-theme="racing"] .usp-icon, html[data-theme="racing"] .ico { color: var(--secondary); } /* Pillar "more" links sit on dark photo backgrounds - keep cream/yellow there */ html[data-theme="racing"] .pillar .more { color: #fffaf0; border-color: rgba(255,250,240,.4); } html[data-theme="racing"] .pillar .more:hover { color: var(--primary); border-color: var(--primary); } html[data-theme="racing"] .hero .stripes, html[data-theme="racing"] .cta-box .stripes { opacity: .025; } /* Marquee logos: subtle on cream, full color on hover */ html[data-theme="racing"] .marquee-logo { filter: grayscale(1) opacity(.5); } html[data-theme="racing"] .marquee-item:hover .marquee-logo { filter: grayscale(0) opacity(1); } /* Soft warm shadows on hover */ html[data-theme="racing"] .listing:hover, html[data-theme="racing"] .service:hover { box-shadow: var(--shadow); } /* Rounded site header + nav pill look */ html[data-theme="racing"] .nav a.active, html[data-theme="racing"] .nav a:hover { border-radius: var(--radius-sm); background: rgba(var(--primary-rgb),.12); } /* Stat cells get a touch more breathing room with rounded corners */ html[data-theme="racing"] .stats { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } html[data-theme="racing"] .cell { border-radius: 0; } /* Preloader stays dark/dramatic regardless of site theme */ html[data-theme="racing"] #kg-preloader, html[data-theme="racing"] #kg-preloader * { color-scheme: dark; } /* ── Garage Theme (Yellow + Blue, dark base) ──────────────────── Activated via , set globally by the admin in Einstellungen. Dark base like Theme 1, with the two brand colors from the Klaus Garage logo used side-by-side: yellow for primary actions/buttons, blue for links, icons and secondary accents. */ html[data-theme="garage"] { --bg: #0d0d0d; --bg-rgb: 13,13,13; --surface: #161618; --border: #242426; --fg: #f0f0f0; --heading: #ffffff; --muted: #666; --primary: #ffcc00; --primary-hover: #ffd633; --primary-rgb: 255,204,0; --on-primary: #1a1611; --secondary: #7c6ee0; --secondary-hover: #9b90ec; --secondary-deep: #2e247b; --on-secondary: #ffffff; --radius: 0px; --radius-sm: 0px; --shadow: none; --logo-scale: 1.2; } html[data-theme="garage"] body { background: var(--bg); } /* Links, USP icons and inline icons use the blue secondary accent instead of the yellow primary, so both brand colors appear together */ html[data-theme="garage"] a { color: var(--secondary); } html[data-theme="garage"] a:hover { color: var(--secondary-hover); } html[data-theme="garage"] .usp-icon, html[data-theme="garage"] .ico { color: var(--secondary); } html[data-theme="garage"] .usp { border-left-color: var(--secondary-deep); } /* Pillar "more" links: blue accent, yellow on hover */ html[data-theme="garage"] .pillar .more { border-color: var(--secondary); color: var(--secondary); } html[data-theme="garage"] .pillar .more:hover { border-color: var(--primary); color: var(--primary-hover); } /* Marquee logos stay as in the dark theme */ html[data-theme="garage"] .marquee-logo { filter: grayscale(1) brightness(1.6) opacity(.65); } html[data-theme="garage"] .marquee-item:hover .marquee-logo { filter: grayscale(0) brightness(1) opacity(1); } /* Listing prices use the blue accent for contrast against yellow buttons */ html[data-theme="garage"] .listing .price { color: var(--secondary); } /* Preloader stays dark/dramatic regardless of site theme */ html[data-theme="garage"] #kg-preloader, html[data-theme="garage"] #kg-preloader * { color-scheme: dark; } /* ── Pure Theme (White base, Yellow + Blue) ───────────────────── Activated via , set globally by the admin in Einstellungen. Clean white background with both logo colors used side-by-side, like the Garage theme: yellow for primary actions/ buttons, blue (logo-indigo) for links, icons and secondary accents. Sharp edges, classic look like Theme 1/2. */ html[data-theme="pure"] { --bg: #ffffff; --bg-rgb: 255,255,255; --surface: #f7f7f8; --border: #e2e2e6; --fg: #1d1d20; --heading: #0d0d0f; --muted: #74747c; --primary: #ffcc00; --primary-hover: #ffd633; --primary-rgb: 255,204,0; --on-primary: #1a1611; --secondary: #2e247b; --secondary-hover: #423292; --on-secondary: #ffffff; --radius: 0px; --radius-sm: 0px; --shadow: none; --logo-scale: 1; } html[data-theme="pure"] body { background: var(--bg); } /* Hero / pillar background images: neutral dark veil for clean contrast */ html[data-theme="pure"] .hero .veil { background: linear-gradient(160deg, rgba(13,13,15,.82) 0%, rgba(13,13,15,.55) 60%, rgba(13,13,15,.82) 100%); } html[data-theme="pure"] .pillar-veil { background: linear-gradient(135deg, rgba(13,13,15,.78) 0%, rgba(13,13,15,.45) 50%, rgba(13,13,15,.7) 100%); } html[data-theme="pure"] .hero .huge, html[data-theme="pure"] .pillar h2, html[data-theme="pure"] .pillar p { color: #ffffff; } html[data-theme="pure"] .pillar p { color: rgba(255,255,255,.82); } html[data-theme="pure"] .hero .stripes, html[data-theme="pure"] .cta-box .stripes { opacity: .02; } /* Links use logo-blue for contrast on white; yellow stays reserved for buttons */ html[data-theme="pure"] a { color: var(--secondary); } html[data-theme="pure"] a:hover { color: var(--secondary-hover); } html[data-theme="pure"] .usp-icon, html[data-theme="pure"] .ico { color: var(--secondary); } html[data-theme="pure"] .usp { border-left-color: var(--secondary); } /* Pillar "more" links sit on dark photo backgrounds - keep white/yellow there */ html[data-theme="pure"] .pillar .more { color: #ffffff; border-color: rgba(255,255,255,.4); } html[data-theme="pure"] .pillar .more:hover { color: var(--primary); border-color: var(--primary); } /* Marquee logos: subtle on white, full color on hover */ html[data-theme="pure"] .marquee-logo { filter: grayscale(1) opacity(.5); } html[data-theme="pure"] .marquee-item:hover .marquee-logo { filter: grayscale(0) opacity(1); } /* Listing prices use logo-blue for contrast against yellow buttons */ html[data-theme="pure"] .listing .price { color: var(--secondary); } /* Soft shadow on hover for a touch of depth on the white surface */ html[data-theme="pure"] .listing:hover, html[data-theme="pure"] .service:hover { box-shadow: 0 4px 16px rgba(13,13,15,.07); } /* Preloader stays dark/dramatic regardless of site theme */ html[data-theme="pure"] #kg-preloader, html[data-theme="pure"] #kg-preloader * { color-scheme: dark; } /* ── Blueprint Theme (Dark base + technical drawing hero bg) ──── Activated via , set globally by the admin in Einstellungen. Identical color scheme to Theme 1 (dark default) - only the hero background image changes to a dark, inverted motorcycle blueprint/wireframe technical drawing. */ html[data-theme="blueprint"] { --bg: #0d0d0d; --bg-rgb: 13,13,13; --surface: #161618; --border: #242426; --fg: #f0f0f0; --heading: #ffffff; --muted: #666; --primary: #e63946; --primary-hover: #ff4455; --primary-rgb: 230,57,70; --on-primary: #ffffff; --secondary: #4a90c2; --on-secondary: #ffffff; --radius: 0px; --radius-sm: 0px; --shadow: none; --logo-scale: 1; } html[data-theme="blueprint"] body { background: var(--bg); } /* The blueprint drawing is dense/detailed, so it needs slightly higher opacity than the default .hero .bg (18%) to read clearly without overpowering the text - the veil gradient still keeps text readable. */ html[data-theme="blueprint"] .hero .bg { opacity: .3; } html[data-theme="blueprint"] #kg-preloader, html[data-theme="blueprint"] #kg-preloader * { color-scheme: dark; } /* ── Model3D Theme (Dark base + 3D wireframe enduro) ──────────── Activated via , set globally by the admin in Einstellungen. Same dark base as Theme 1, plus an interactive drag-to-rotate wireframe motorcycle placed beside the hero text. */ html[data-theme="model3d"] { --bg: #0d0d0d; --bg-rgb: 13,13,13; --surface: #161618; --border: #242426; --fg: #f0f0f0; --heading: #ffffff; --muted: #666; --primary: #e63946; --primary-hover: #ff4455; --primary-rgb: 230,57,70; --on-primary: #ffffff; --secondary: #ffc700; --secondary-hover: #ffd633; --on-secondary: #1a1611; --radius: 0px; --radius-sm: 0px; --shadow: none; --logo-scale: 1; } html[data-theme="model3d"] body { background: var(--bg); } /* Preloader stays dark/dramatic regardless of site theme */ html[data-theme="model3d"] #kg-preloader, html[data-theme="model3d"] #kg-preloader * { color-scheme: dark; } /* 3D viewer container placed beside the hero text */ .bike3d-wrap { position: relative; width: 100%; min-width: 200px; height: 340px; min-height: 280px; } .bike3d-wrap canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; /* V48: Das Hero-Video wird per JS auf dieses Canvas kopiert (Browser rendern