/* ===== FENSTER BASSUM ? BLUE THEME ===== */ /* Design inspiriert von der Original-Optik (blau/skyblue) */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} :root{ --primary:#0f1b2a;--primary-light:#192837;--primary-dark:#06101c; --accent:#52c6f8;--accent-hover:#21b3ed;--accent-dark:#1479b0; --warm:#f5b75b;--warm-ink:#042234; /* Marken-Farben als TEXT. Im Dunkelmodus identisch zu --accent/--warm, im Hellmodus dunkler, weil helles Blau/Orange auf hellem Grund nicht lesbar ist (gemessen 1,6-2,0:1 statt der noetigen 4,5:1). */ --accent-text:var(--accent);--warm-text:var(--warm); --bg:#0f1b2a;--surface:#192837;--surface-raised:#213242;--white:#fff; --text:#ebeff4;--text-muted:#abb9c7; --gray-100:#192837;--gray-200:#2b3c4e;--gray-400:#8496a9;--gray-600:#abb9c7; --font-display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --max-w:1400px;--radius-card:14px;--radius-btn:8px; --shadow-card:0 4px 20px rgba(0,0,0,0.3);--shadow-hover:0 12px 40px rgba(0,0,0,0.45); --transition:0.3s cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.25,1,0.5,1) } @supports(color:oklch(50% 0 0)){ :root{ --primary:oklch(22% .033 252);--primary-light:oklch(27% .035 250);--primary-dark:oklch(17% .03 253); --accent:oklch(78% .125 230);--accent-hover:oklch(72% .14 232);--accent-dark:oklch(55% .12 240); --warm:oklch(82% .13 75); --bg:oklch(22% .033 252);--surface:oklch(27% .035 250);--surface-raised:oklch(31% .036 248); --text:oklch(95% .008 250);--text-muted:oklch(78% .025 245) } } @font-face{ font-family:'Bricolage Grotesque'; src:url('../fonts/bricolage-grotesque-var.woff2') format('woff2'); font-weight:600 800;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+20AC; } .container{max-width:var(--max-w);margin:0 auto;padding:0 24px} .section{padding:100px 0} .section-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:var(--white);text-align:center;margin-bottom:12px} .section-sub{text-align:center;color:var(--gray-400);font-size:1.1rem;max-width:680px;margin:0 auto 48px} .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:var(--radius-btn);font-weight:600;font-size:1rem;cursor:pointer;border:none;transition:var(--transition);white-space:nowrap} .btn-primary{background:var(--accent);color:var(--white)}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(56,189,248,0.35)} .btn-outline{background:transparent;color:var(--white);border:2px solid var(--white)}.btn-outline:hover{background:var(--white);color:var(--primary-dark)} .btn-outline-accent{background:transparent;color:var(--accent-text);border:2px solid var(--accent)}.btn-outline-accent:hover{background:var(--accent);color:var(--warm-ink)} /* Sichtbar per Default — Animation nur wenn (JS + kein reduced-motion) */ .reveal{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} html.fbx-anim .reveal{opacity:0;transform:translateY(24px)} html.fbx-anim .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.3s}.reveal-delay-4{transition-delay:0.4s}.reveal-delay-5{transition-delay:0.5s} /* ===== HEADER ===== */ .header{position:sticky;top:0;z-index:1000;background:rgba(15,23,42,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.08)} .header .container{display:flex;align-items:center;justify-content:space-between;height:68px} .header-logo{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;color:var(--white);white-space:nowrap} .header-logo img{width:60px;height:60px;flex-shrink:0;border-radius:10px} .header-logo small{font-size:.7rem;font-weight:400;color:rgba(255,255,255,0.5);display:block} .header-actions{display:flex;align-items:center;gap:12px} .header-actions .phone-link{color:var(--white);font-weight:600;font-size:0.95rem;display:none} .header-actions .phone-link:hover{color:var(--accent-text)} .header-actions .wa-link{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#25D366;transition:var(--transition)} .header-actions .wa-link:hover{transform:scale(1.1);box-shadow:0 4px 16px rgba(37,211,102,0.4)} .header-actions .chat-link{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(56,189,248,0.2);border:1px solid rgba(56,189,248,0.3);color:var(--white);cursor:pointer;transition:var(--transition)} .header-actions .chat-link:hover{transform:scale(1.1);box-shadow:0 4px 16px rgba(56,189,248,0.4);color:var(--accent-text)} .nav{display:none;gap:28px}.nav a{color:rgba(255,255,255,0.8);font-size:0.95rem;font-weight:500;transition:var(--transition)}.nav a:hover,.nav a.active{color:var(--accent-text)} .hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}.hamburger span{display:block;width:26px;height:2.5px;background:var(--white);border-radius:2px;transition:var(--transition)} /* ===== MOBILE MENU ===== */ .mobile-menu{position:fixed;top:68px;left:0;right:0;bottom:0;background:rgba(15,23,42,0.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:var(--transition);z-index:999} .mobile-menu.open{opacity:1;pointer-events:auto} .mobile-menu a{color:var(--white);font-size:1.3rem;font-weight:600;transition:var(--transition)}.mobile-menu a:hover{color:var(--accent-text)} .mobile-menu .phone-link{color:var(--white);font-size:1.1rem;margin-top:16px} /* Service icon animations */ @keyframes iconPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.85; } } @keyframes windowShine { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } } @keyframes handleGlow { 0%, 100% { stroke: var(--accent); } 50% { stroke: #7dd3fc; } } @keyframes shutterMove { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-3px); opacity: 1; } } /* Window: glass reflection + handle animation */ .service-card:nth-child(1) .icon svg path:last-child { animation: windowShine 2.5s ease-in-out infinite; } .service-card:nth-child(1) .icon svg rect:nth-child(4) { animation: handleGlow 2.5s ease-in-out infinite; } /* Door: handle pulse */ .service-card:nth-child(2) .icon svg circle { animation: iconPulse 2s ease-in-out infinite; transform-origin: center; } /* Shutter: slats sliding */ .service-card:nth-child(3) .icon svg rect:nth-child(2), .service-card:nth-child(3) .icon svg rect:nth-child(3), .service-card:nth-child(3) .icon svg rect:nth-child(4), .service-card:nth-child(3) .icon svg rect:nth-child(5) { animation: shutterMove 3s ease-in-out infinite; } .service-card:nth-child(3) .icon svg rect:nth-child(3) { animation-delay: 0.15s; } .service-card:nth-child(3) .icon svg rect:nth-child(4) { animation-delay: 0.3s; } .service-card:nth-child(3) .icon svg rect:nth-child(5) { animation-delay: 0.45s; } /* Hover: icon background glow */ .service-card:hover .icon { background: rgba(56, 189, 248, 0.2); box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); transition: all 0.3s ease; } /* Guide cards */ .guide-card { scroll-margin-top: 88px; display: flex; gap: 20px; background: var(--surface); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-card); padding: 28px 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); transition: var(--transition); } .guide-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .guide-card-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: rgba(56,189,248,0.1); color:var(--accent-text); display: flex; align-items: center; justify-content: center; } .guide-card-icon svg { width: 28px; height: 28px; } .guide-card-body { flex: 1; min-width: 0; } .guide-card-body h2 { font-size: 1.2rem; color:var(--accent-text); margin: 0 0 6px; padding-top: 0; } .guide-card-summary { font-size: 0.9rem; color: var(--white); opacity: 0.6; margin: 0 0 12px; font-weight: 500; } .guide-card-body p { font-size: 0.92rem; color: var(--gray-400); line-height: 1.65; margin: 0 0 10px; } .guide-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.88rem; font-weight: 600; color:var(--accent-text); text-decoration: none; transition: var(--transition); } .guide-card-link:hover { gap: 10px; color: var(--accent-hover); } /* FAQ items */ .faq-item { background: rgba(15,23,42,0.4); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; border-left: 3px solid var(--accent); } .faq-q { font-weight: 700; color: var(--white); font-size: 0.92rem; margin: 0 0 4px; } .faq-a { font-size: 0.88rem; color: var(--gray-400); margin: 0; line-height: 1.6; } /* Guide toc nav */ .guide-toc nav { display: flex; flex-direction: column; gap: 2px; } .guide-toc nav a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--gray-400); font-size: 0.88rem; text-decoration: none; border-radius: 8px; transition: var(--transition); } .guide-toc nav a:hover { background: rgba(56,189,248,0.08); color:var(--accent-text); padding-left: 14px; } @media (max-width: 640px) { .guide-card { flex-direction: column; padding: 20px 16px; } .guide-card-icon { width: 44px; height: 44px; } .guide-card-icon svg { width: 24px; height: 24px; } } @media(min-width:900px){ .header-actions .phone-link{display:inline} .nav{display:flex;align-items:center} .hamburger{display:none} } /* ===== HERO ===== */ .hero{position:relative;min-height:85vh;min-height:85dvh;display:flex;align-items:center;background:linear-gradient(135deg,var(--primary)0%,#0f2448 50%,var(--primary-light)100%);overflow:hidden;margin-top:-68px;padding-top:68px} .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(56,189,248,0.08)0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(56,189,248,0.05)0%,transparent 50%)} .hero .container{position:relative;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding-top:40px;padding-bottom:60px} .hero-content{text-align:center} .hero-content h1{font-size:clamp(1.85rem,5vw,3.35rem);font-weight:800;color:var(--white);line-height:1.1;margin-bottom:14px;letter-spacing:-.02em} .hero-content .hero-tagline{display:inline-block;background:rgba(56,189,248,0.15);color:var(--accent-text);padding:6px 16px;border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:20px;border:1px solid rgba(56,189,248,0.25)} .hero-content p{font-size:clamp(1rem,2vw,1.15rem);color:rgba(255,255,255,0.7);max-width:560px;line-height:1.65;margin:0 auto 24px} .hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin-bottom:32px;font-size:.85rem;color:rgba(255,255,255,0.5)} .hero-trust span{display:inline-flex;align-items:center;gap:6px} .hero-trust span svg{width:16px;height:16px;stroke:var(--accent)} .hero-ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} .hero-visual{display:flex;justify-content:center;align-items:center} .hero-visual img{width:100%;max-width:400px;height:auto;opacity:0.9} @media(min-width:768px){ .hero .container{grid-template-columns:1fr 1fr;padding-top:60px;padding-bottom:80px} .hero-content{text-align:left} .hero-content p{margin:0 0 28px} .hero-trust{justify-content:flex-start} .hero-ctas{justify-content:flex-start} } /* ===== PARTNER STRIP ===== */ .partner-strip{background:var(--surface);padding:48px 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)} .partner-strip .container{text-align:center} .partner-strip .partner-label{font-size:.75rem;font-weight:600;color:var(--gray-400);letter-spacing:2px;text-transform:uppercase;margin-bottom:24px} .partner-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 48px} .partner-item{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0.5;transition:var(--transition)} .partner-item:hover{opacity:1;transform:translateY(-2px)} .partner-item { position: relative; cursor: pointer; } .partner-item:hover::after { content: attr(title); position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(15, 23, 42, 0.9); color: #f8fafc; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.02em; pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.2); border: 1px solid rgba(56,189,248,0.2); } .partner-item:hover::before { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: rgba(15, 23, 42, 0.9); pointer-events: none; z-index: 10; } .partner-item img{height:75px;width:auto} .partner-item span{font-size:.75rem;color:var(--gray-400);font-weight:600;letter-spacing:1px} /* ===== SERVICES ===== */ .services{background:var(--bg)} .services-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:16px} .service-card{background:var(--surface);border-radius:var(--radius-card);padding:40px 32px;box-shadow:var(--shadow-card);transition:var(--transition);text-align:center;display:flex;flex-direction:column;align-items:center} .service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)} .service-card .icon{background:rgba(56,189,248,0.12);background:rgba(56,189,248,0.15);margin-bottom:20px;display:inline-block;width:64px;height:64px;border-radius:16px;background:rgba(56,189,248,0.1);display:flex;align-items:center;justify-content:center} .service-card .icon svg{width:32px;height:32px;stroke:var(--accent)} .service-card h3{font-size:1.4rem;font-weight:700;color:var(--primary);margin-bottom:8px} .service-card .sub{font-size:.85rem;color:var(--accent-text);font-weight:600;margin-bottom:12px} .service-card p{color:var(--text-muted);font-size:.95rem;line-height:1.7;margin-bottom:auto;padding-bottom:20px} .service-card .card-link{color:var(--accent-text);font-weight:600;font-size:.9rem;transition:var(--transition)} .service-card .card-link:hover{color:var(--accent-hover);gap:12px} @media(min-width:768px){.services-grid{grid-template-columns:repeat(3,1fr)}} /* ===== USP SECTION ===== */ .usp-section{background:var(--bg)} .usp-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:16px} .usp-item{background:var(--surface);border:1px solid rgba(255,255,255,.06);padding:32px 24px;border-radius:var(--radius-card);background:var(--gray-100);transition:var(--transition);text-align:center} .usp-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)} .usp-item .emoji{font-size:2rem;margin-bottom:12px;display:block} .usp-item h3{font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:8px} .usp-item p{font-size:.9rem;color:var(--text-muted);line-height:1.6} @media(min-width:768px){.usp-grid{grid-template-columns:repeat(2,1fr)}} /* ===== PROCESS ===== */ .process{background:var(--bg)} .process-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:800px;margin:0 auto} .process-step{display:flex;align-items:flex-start;gap:20px;padding:24px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:var(--transition)} .process-step:hover{transform:translateX(6px);box-shadow:var(--shadow-hover)} .process-step .number{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--primary-dark);font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center} .process-step h4{color:var(--white);font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:4px} .process-step p{font-size:.9rem;color:var(--text-muted);line-height:1.5} @media(min-width:768px){.process-grid{grid-template-columns:1fr 1fr}.process-step:last-child:nth-child(odd){grid-column:1/-1;max-width:50%;margin:0 auto}} /* ===== GALLERY ===== */ .gallery{background:var(--bg)} .gallery-grid{display:grid;grid-template-columns:1fr;gap:16px} .gallery-item{position:relative;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:4/3;cursor:pointer;transition:var(--transition)} .gallery-item:hover{transform:scale(1.02);box-shadow:var(--shadow-hover)} .gallery-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition)} .gallery-item:hover img{transform:scale(1.08)} .gallery-item .overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:linear-gradient(transparent,rgba(15,23,42,0.85));color:var(--white);font-size:.85rem;font-weight:500;pointer-events:none} .gallery-cta{text-align:center;margin-top:40px} @media(min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}} /* ===== CTA BAR ===== */ .cta-bar{background:linear-gradient(135deg,var(--primary),var(--primary-light));padding:48px 0;text-align:center} .cta-bar .container{display:flex;flex-direction:column;align-items:center;gap:16px} .cta-bar p{color:rgba(255,255,255,0.85);font-size:1.15rem;font-weight:500} .cta-bar .btn{background:var(--accent);color:var(--warm-ink)} .cta-bar .btn:hover{background:var(--accent-hover);box-shadow:0 8px 24px rgba(56,189,248,0.35)} /* ===== CONTACT ===== */ .contact-cta{background:var(--bg);text-align:center} .contact-cta .ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px} .contact-info{color:var(--gray-400);display:flex;flex-wrap:wrap;justify-content:center;gap:20px 32px;margin-top:32px;font-size:.9rem;color:var(--text-muted)} .contact-info span{display:inline-flex;align-items:center;gap:8px;color:var(--gray-400)} .contact-info a{color:var(--accent-text);font-weight:500} .response-note{display:inline-block;color:var(--accent-text);font-size:.9rem;margin-top:16px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.35);padding:9px 20px;border-radius:999px;font-weight:600} /* ===== FOOTER ===== */ .footer{background:var(--primary);color:rgba(255,255,255,0.7);padding:64px 0 0} .footer-grid{display:grid;grid-template-columns:1fr;gap:40px} .footer-brand .logo-wrap{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:12px} .footer-brand .logo-wrap img{width:36px;height:36px} .footer-brand p{font-size:.9rem;line-height:1.7;max-width:360px} .footer-brand .tagline{color:var(--accent-text);font-weight:600;font-size:.85rem;margin-top:12px;letter-spacing:1px} .footer h4{color:var(--white);font-size:.95rem;font-weight:700;margin-bottom:16px;letter-spacing:1px;text-transform:uppercase} .footer ul li{margin-bottom:10px} .footer a{color:rgba(255,255,255,0.6);font-size:.9rem;transition:var(--transition)} .footer a:hover{color:var(--accent-text)} .footer-bottom{margin-top:48px;padding:20px 0;border-top:1px solid rgba(255,255,255,0.08);font-size:.82rem;text-align:center;color:rgba(255,255,255,0.4)} @media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}} /* ===== WHATSAPP FLOAT ===== */ .whatsapp-float{position:fixed;right:90px;bottom:20px;z-index:9999;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.45);transition:transform .2s ease,box-shadow .2s ease;animation:whatsappPulse 2.5s ease-in-out infinite} .whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.6)} @keyframes whatsappPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45)}50%{box-shadow:0 4px 30px rgba(37,211,102,.75)}} /* ===== PAGE HERO (SUBPAGES) ===== */ .page-hero{background:linear-gradient(135deg,var(--primary)0%,var(--primary-light)50%,#1a3a6a 100%);padding:80px 0 60px;text-align:center;position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(56,189,248,0.12)0%,transparent 70%)} .page-hero h1{color:var(--white);font-size:clamp(2rem,5vw,3rem);margin-bottom:12px} .page-hero .eyebrow{display:inline-block;color:var(--accent-text);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:16px} .page-hero .lead{color:rgba(255,255,255,0.65);font-size:1.05rem;max-width:640px;margin:0 auto;line-height:1.7} /* ===== FEATURE GRID (LEISTUNGEN) ===== */ .feature-grid{display:grid;grid-template-columns:1fr;gap:24px} .feature{padding:32px 24px;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:var(--transition)} .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)} .feature span{font-size:2.5rem;font-weight:800;color:var(--accent-text);opacity:0.3;display:block;margin-bottom:8px;line-height:1} .feature h3{font-size:1.2rem;font-weight:700;color:var(--primary);margin-bottom:8px} .feature p{color:var(--text-muted);line-height:1.6;font-size:.95rem} @media(min-width:768px){.feature-grid{grid-template-columns:repeat(2,1fr)}} /* ===== SPLIT LAYOUT ===== */ .split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center} .split h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:16px} .split p{line-height:1.7;font-size:.95rem} .stats{display:grid;grid-template-columns:1fr;gap:20px} .stats div{padding:24px;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)} .stats strong{display:block;color:var(--accent-text);font-size:1.2rem;margin-bottom:4px} .stats span{color:rgba(255,255,255,0.6);font-size:.9rem} @media(min-width:768px){.split{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr 1fr}} /* ===== PRODUCT LAYOUT ===== */ .product-layout{display:grid;grid-template-columns:1fr;gap:28px} .product-intro h2{color:var(--white);font-size:clamp(1.4rem,3vw,2rem);color:var(--primary);margin-bottom:8px} .product-intro p{color:var(--text-muted);line-height:1.7} .product-cards{display:grid;grid-template-columns:1fr;gap:20px} .product-card{padding:28px 24px;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:var(--transition)} .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)} .product-card img{height:40px;width:auto;margin-bottom:16px} .product-card h3{font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:12px} .product-card ul{list-style:disc;padding-left:20px} .product-card li{color:var(--text-muted);font-size:.88rem;margin-bottom:6px;line-height:1.5} @media(min-width:768px){.product-cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.product-layout{grid-template-columns:1fr 2fr}} /* ===== CATALOG CARDS ===== */ .catalog-grid{display:grid;grid-template-columns:1fr;gap:20px} .catalog-card{background:var(--surface);padding:28px 24px;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:var(--transition);display:flex;flex-direction:column} .catalog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)} .catalog-card h3{font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:8px} .catalog-card p{font-size:.88rem;color:var(--text-muted);line-height:1.6;margin-bottom:16px;flex:1} .catalog-card .btn{background:var(--accent);color:var(--primary);padding:10px 20px;font-size:.85rem;align-self:flex-start} .catalog-card .btn:hover{background:var(--accent-hover)} @media(min-width:640px){.catalog-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.catalog-grid{grid-template-columns:repeat(3,1fr)}} /* ===== GUIDE / RATGEBER ===== */ .guide-grid{display:grid;grid-template-columns:1fr;gap:28px} .guide-toc{position:sticky;top:80px;background:var(--surface);border-radius:var(--radius-card);padding:24px;box-shadow:var(--shadow-card);align-self:start} .guide-toc h3{font-size:1rem;font-weight:700;color:var(--accent-text);margin-bottom:12px} .guide-toc a{display:block;padding:6px 0;color:var(--gray-400);font-size:.9rem;transition:var(--transition)} .guide-content h2{font-size:clamp(1.3rem,3vw,1.8rem);color:var(--accent-text);margin-bottom:16px;padding-top:24px} .guide-content h3{font-size:1.1rem;color:var(--white);margin-bottom:12px;margin-top:24px} .guide-content p{color:var(--gray-400);line-height:1.7;margin-bottom:16px} .guide-content ul{padding-left:20px;margin-bottom:16px} .guide-content li{color:var(--gray-400);margin-bottom:8px;line-height:1.6} @media(min-width:768px){.guide-grid{grid-template-columns:260px 1fr;gap:40px}} /* ===== PARTNER CONTACT ===== */ .partner-contact-grid{display:grid;grid-template-columns:1fr;gap:28px} .contact-card{padding:32px;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-card)} .contact-card h3{font-size:1.15rem;font-weight:700;color:var(--primary);margin-bottom:12px} .contact-card p{color:var(--text-muted);font-size:.9rem;line-height:1.7;margin-bottom:6px} .contact-card .contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .contact-card .contact-actions .btn{font-size:.85rem;padding:10px 20px} @media(min-width:768px){.partner-contact-grid{grid-template-columns:1fr 1fr}} /* ===== COOKIE / DATENSCHUTZ ===== */ .cookie-box{position:fixed;bottom:0;left:0;right:0;background:var(--primary);color:var(--white);padding:20px 24px;z-index:9998;display:none;box-shadow:0 -4px 20px rgba(0,0,0,0.2)} .cookie-box .container{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between} .cookie-box p{font-size:.85rem;color:rgba(255,255,255,0.8);max-width:600px} .cookie-btns{display:flex;gap:10px} .cookie-btns .btn{font-size:.82rem;padding:8px 16px} .cookie-btns .btn-primary{background:var(--accent);color:var(--warm-ink)} /* ===== BACK TO TOP ===== */ .back-top{position:fixed;right:20px;bottom:84px;z-index:999;width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--white);display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.2);transition:var(--transition);cursor:pointer;border:none} .back-top:hover{background:var(--accent);transform:translateY(-3px)} .back-top.visible{display:flex} /* ===== LEGAL PAGES ===== */ .legal-content{max-width:760px;margin:0 auto} .legal-content h2{color:var(--white);color:var(--primary);font-size:clamp(1.2rem,2.5vw,1.6rem);margin-bottom:16px;margin-top:32px} .legal-content h3{color:var(--white);color:var(--primary);font-size:1.05rem;margin-bottom:12px;margin-top:24px} .legal-content p{color:var(--text-muted);line-height:1.7;margin-bottom:16px} .legal-content ul{padding-left:20px;margin-bottom:16px} .legal-content li{color:var(--text-muted);margin-bottom:8px} /* ===== MOTION ANIMATIONS ===== */ .hero-visual-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; justify-items: center; position: relative; padding: 1.5rem; max-width: 480px; margin: 0 auto; } .motion-demo { position: relative; width: 130px; height: 155px; background: rgba(15, 23, 42, 0.03); border: 2px solid rgba(56, 189, 248, 0.25); border-radius: 0.5rem; overflow: hidden; } /* --- Window Animation (Dreh-Kipp-Fenster oeffnet sich) --- */ .motion-window { background: linear-gradient(160deg, #e2e8f0, #f8fafc); border-color: #94a3b8; } .motion-window i { position: absolute; border-radius: 2px; } .motion-window i:nth-child(1) { /* Blendrahmen (fest, Einzelfenster) */ top: 6%; left: 6%; width: 88%; height: 88%; border: 3px solid #64748b; background: transparent; z-index: 3; } .motion-window i:nth-child(2) { /* Fluegel - kippt nach vorn auf (Kipp-Stellung) */ top: 12%; left: 12%; width: 76%; height: 76%; background: linear-gradient(160deg, rgba(186,230,253,0.6), rgba(224,242,254,0.35)); border: 3px solid #475569; transform-origin: bottom center; animation: windowOpen 4.5s ease-in-out infinite; will-change: transform; box-shadow: 0 -6px 10px rgba(15,23,42,0.18); z-index: 2; } .motion-window i:nth-child(2)::before { /* Glasreflexion */ content: ''; position: absolute; top: 8%; left: 12%; width: 20%; height: 55%; background: linear-gradient(160deg, rgba(255,255,255,0.6), transparent 60%); border-radius: 3px; animation: glassShine 4.5s ease-in-out infinite; } .motion-window i:nth-child(2)::after { /* Fenstergriff, Kipp-Stellung (senkrecht) */ content: ''; position: absolute; top: -14px; left: 50%; width: 6px; height: 16px; border-radius: 2px; background: #1e293b; transform: translateX(-50%); } .motion-window i:nth-child(3) { /* Scharnier unten - Fluegel kippt hier */ bottom: 8%; left: 14%; width: 72%; height: 4%; background: #334155; border-radius: 1px; z-index: 3; } .motion-window i:nth-child(4) { /* Schattenspalt oben - erscheint beim Kippen */ top: 10%; left: 12%; width: 76%; height: 12%; background: linear-gradient(180deg, rgba(15,23,42,0.4), transparent); border-radius: 2px 2px 0 0; opacity: 0; animation: gapShadow 4.5s ease-in-out infinite; z-index: 1; } /* --- Door Animation (Haustuer schwingt auf, warmes Licht dahinter) --- */ .motion-door { background: radial-gradient(circle at 28% 42%, rgba(251,191,36,0.4), rgba(15,23,42,0.05) 68%); } .motion-door i { position: absolute; } .motion-door i:nth-child(1) { /* Tuerzarge */ top: 4%; left: 8%; width: 84%; height: 92%; border: 3px solid #475569; border-radius: 0.3rem; background: rgba(71,85,105,0.08); } .motion-door i:nth-child(2) { /* Tuerblatt - schwingt auf */ top: 4%; left: 8%; width: 84%; height: 92%; background: linear-gradient(160deg, #334155, #1e293b); border-radius: 0.3rem; border: 2px solid #0f172a; box-shadow: 4px 6px 14px rgba(15,23,42,0.4); transform-origin: left center; animation: doorSwing 4.8s ease-in-out infinite; will-change: transform; } .motion-door i:nth-child(2)::before { /* Glaseinsatz - macht die Tuer als Tuer erkennbar (Durchblick) */ content: ''; position: absolute; top: 14%; left: 28%; right: 28%; height: 30%; background: linear-gradient(160deg, rgba(251,191,36,0.4), rgba(224,242,254,0.45)); border: 2px solid rgba(15,23,42,0.5); border-radius: 3px; box-shadow: inset 0 0 6px rgba(255,255,255,0.3); } .motion-door i:nth-child(2)::after { /* Tuerdruecker */ content: ''; position: absolute; right: 10%; top: 47%; width: 20px; height: 6px; border-radius: 3px; background: #cbd5e1; } /* --- Shutter Animation (Rolladen faehrt in den Rolladenkasten) --- */ .motion-shutter { background: linear-gradient(180deg, rgba(186,230,253,0.35), rgba(224,242,254,0.5)); border-color: rgba(100,116,139,0.4); padding: 0; } .motion-shutter i { position: absolute; left: 0; width: 100%; } .motion-shutter i:nth-child(1) { /* Rolladenkasten */ top: 0; height: 14%; background: linear-gradient(180deg, #64748b, #475569); border-bottom: 2px solid #334155; box-shadow: 0 3px 6px rgba(15,23,42,0.25); z-index: 2; } .motion-shutter i:nth-child(2) { /* Rolladenpanzer faehrt in den Kasten */ top: 14%; height: 86%; background: repeating-linear-gradient(180deg, #cbd5e1 0px 6px, #94a3b8 6px 8px); transform-origin: top center; animation: shutterSlide 5s ease-in-out infinite; will-change: transform; z-index: 1; } .motion-shutter i:nth-child(2)::after { /* Schlussleiste unten */ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 8%; background: #475569; box-shadow: 0 -2px 4px rgba(15,23,42,0.3); } /* Badge card */ .hero-badge-card { grid-column: 1 / -1; background: linear-gradient(135deg, #0f172a, #1e293b); color: #f8fafc; padding: 0.8rem 1.6rem; border-radius: 0.75rem; text-align: center; border: 1px solid rgba(56, 189, 248, 0.2); box-shadow: 0 4px 20px rgba(56, 189, 248, 0.15); } .hero-badge-card strong { display: block; font-size: 1rem; color: #38bdf8; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.15rem; } .hero-badge-card span { display: block; font-size: 0.85rem; opacity: 0.8; } /* --- Keyframes --- */ @keyframes windowOpen { 0%, 15% { transform: perspective(260px) rotateX(0deg); } 50%, 65% { transform: perspective(260px) rotateX(-22deg); } 100% { transform: perspective(260px) rotateX(0deg); } } @keyframes gapShadow { 0%, 15% { opacity: 0; } 50%, 65% { opacity: 1; } 100% { opacity: 0; } } @keyframes glassShine { 0%, 100% { opacity: 0.3; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(5px); } } @keyframes doorSwing { 0%, 100% { transform: perspective(280px) rotateY(0deg); } 50% { transform: perspective(280px) rotateY(-25deg); } } @keyframes shutterSlide { 0%, 15% { transform: scaleY(1); } 50%, 65% { transform: scaleY(0.12); } 100% { transform: scaleY(1); } } /* Responsive */ @media (max-width: 640px) { .hero-visual-panel { grid-template-columns: 1fr; max-width: 280px; } .motion-demo { width: 100px; height: 120px; } } /* ===== Custom UI upgrades ===== */ .usp-item .emoji{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:rgba(56,189,248,.14);color:var(--accent-text);font-size:1.2rem;font-weight:800;margin-bottom:12px;line-height:1} button.gallery-item{border:0;background:none;padding:0;cursor:pointer;display:block;width:100%;text-align:left;appearance:none} button.gallery-item:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-card)} @media(min-width:1280px){.gallery-grid{grid-template-columns:repeat(5,1fr)}} body.lightbox-open{overflow:hidden} .lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.92);backdrop-filter:blur(8px)} .lightbox[hidden]{display:none} .lightbox-backdrop{position:absolute;inset:0} .lightbox-panel{position:relative;z-index:1;width:min(1200px,95vw);display:grid;gap:12px;justify-items:center} .lightbox-image{width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius-card);background:#0b1220;box-shadow:0 24px 80px rgba(0,0,0,.45)} .lightbox-caption{color:var(--white);font-weight:600;text-align:center} .lightbox-close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;border:0;border-radius:999px;background:var(--accent);color:var(--primary);font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-card)} .gallery-item .overlay{font-size:.88rem} .service-showcase{display:grid;gap:12px} .service-card{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:stretch;background:var(--surface);color:var(--white);padding:12px;border-radius:var(--radius-card);box-shadow:var(--shadow-card)} .service-card img{width:100px;height:100%;object-fit:cover;border-radius:12px} .service-card h3{margin:4px 0 8px;color:var(--white)} .service-card p{margin:0;color:var(--gray-400);line-height:1.5} .service-card ul{margin:10px 0 0;padding-left:18px;color:var(--gray-400)} .service-card li{margin:4px 0} @media(max-width:720px){.service-card{grid-template-columns:1fr}.service-card img{width:100%;height:180px}} .catalog-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px} .catalog-brand img{height:34px;width:auto;display:block;object-fit:contain} .catalog-card h3{margin-top:0} .catalog-card .btn{margin-top:12px} .contact-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px} .contact-logo{width:58px;height:58px;object-fit:contain;flex:none} .contact-logo-wide{width:180px;height:auto} .contact-kicker{margin:0 0 2px;color:var(--accent-text);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .contact-brand h3{margin:0;color:var(--white)} @media(max-width:720px){.contact-brand{align-items:flex-start}.contact-logo-wide{width:min(240px,100%)}} /* ===== Polish upgrades ===== */ .usp-item{background:var(--surface);border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden} .usp-item::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),rgba(56,189,248,.15));opacity:.95} .usp-item .emoji{width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(56,189,248,.05));display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--accent-text);box-shadow:0 8px 20px rgba(56,189,248,.12)} .usp-item .emoji svg{display:block} .contact-card{position:relative;isolation:isolate;background:var(--surface);border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 50px rgba(0,0,0,.25)} .contact-card::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--radius-card) var(--radius-card) 0 0;background:linear-gradient(90deg,var(--accent),#7dd3fc)} .contact-card:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(0,0,0,.35)} .contact-brand{padding-top:6px} .contact-logo{width:64px;height:64px;padding:8px;background:rgba(255,255,255,.05);border-radius:16px;border:1px solid rgba(255,255,255,.08)} .contact-logo-wide{width:min(260px,100%);height:auto;padding:6px} .contact-kicker{letter-spacing:.12em} .contact-card p{font-size:.95rem} .contact-card .contact-actions{margin-top:22px} .contact-card .contact-actions .btn{flex:1;justify-content:center} .gallery-item .overlay{font-size:.82rem;letter-spacing:.02em} .lightbox-caption{font-size:1rem;letter-spacing:.02em} .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border:0;border-radius:999px;background:rgba(56,189,248,.95);color:var(--primary);font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 35px rgba(0,0,0,.25)} .lightbox-nav:hover{background:#7dd3fc} .lightbox-prev{left:-10px} .lightbox-next{right:-10px} @media(max-width:720px){.lightbox-nav{width:42px;height:42px;font-size:1.7rem}.lightbox-prev{left:6px}.lightbox-next{right:6px}} /* ===== Mobile / gallery polish ===== */ .gallery-item[href]{text-decoration:none;color:inherit} .gallery-item{display:block} @media (max-width: 640px){ .site-header, .header{position:sticky;top:0;z-index:100} .mobile-menu{max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px} .hero-clean, .hero{min-height:auto !important;padding-top:28px;padding-bottom:32px} .hero-clean-grid, .hero > .container{gap:18px} .hero-visual-panel{transform:scale(.88);transform-origin:center top;max-width:240px} .hero-actions, .hero-ctas, .ctas{display:flex;flex-direction:column;gap:10px} .hero-actions .btn, .hero-ctas .btn, .ctas .btn, .gallery-cta .btn{width:100%;justify-content:center} .section, .section-pad{padding-top:32px;padding-bottom:32px} .section-title{font-size:clamp(1.45rem,6vw,2rem)} .section-sub, .lead{font-size:1rem;line-height:1.6} .gallery-grid{grid-template-columns:repeat(2,1fr)} .lightbox-panel{width:min(100vw - 24px, 1000px)} /* Auf dem Handy ragte das Schliessen-Kreuz (right:-12px) ueber den rechten Bildrand hinaus und war nur zur Haelfte antippbar. Innen setzen. */ .lightbox-close{top:6px;right:6px} .lightbox-image{max-height:68vh} .lightbox-caption{font-size:.95rem} .lightbox-nav{bottom:12px;top:auto;transform:none} } @media (max-width: 420px){ .hero-visual-panel{transform:scale(.74)} .gallery-grid{grid-template-columns:1fr} .lightbox-nav{width:40px;height:40px} } .gallery-teaser{background:var(--bg)} .gallery-teaser-grid{align-items:center;gap:28px} .gallery-teaser-card{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-card);padding:24px;box-shadow:var(--shadow-card)} .gallery-teaser-card h3{margin:0 0 14px;color:var(--white);font-size:1.18rem} .gallery-teaser-card ul{margin:0;padding-left:20px;color:var(--gray-400);line-height:1.65} .gallery-teaser-card li{margin:7px 0} @media(max-width:640px){ .gallery-teaser-grid{gap:18px} .gallery-teaser-card{padding:20px} } @media (max-width: 640px){ .hero{padding-top:22px;padding-bottom:22px} .hero-content h1{font-size:clamp(1.45rem,7.2vw,1.95rem);line-height:1.08;margin-bottom:12px} .hero-content .hero-tagline{font-size:.74rem;padding:4px 10px;margin-bottom:14px} .hero-content p{font-size:.96rem;line-height:1.55;margin-bottom:16px;max-width:100%} .hero-trust{gap:8px 10px;margin-bottom:18px;font-size:.74rem} .hero-ctas{gap:10px;margin-bottom:4px} .hero-ctas .btn{width:100%} .hero-visual-panel{transform:scale(.62);transform-origin:center top;max-width:210px;margin-top:-4px} .section{padding-top:30px;padding-bottom:30px} .section-title{font-size:clamp(1.34rem,5.8vw,1.9rem);margin-bottom:10px} .section-sub, .lead{font-size:.98rem;line-height:1.55;margin-bottom:28px} .gallery-teaser-grid{gap:16px} .gallery-teaser-card{padding:18px} .gallery-teaser-card h3{font-size:1.02rem} .gallery-teaser-card ul{line-height:1.5} .gallery-item .overlay{font-size:.76rem} } @media (max-width: 420px){ .hero{padding-top:18px;padding-bottom:18px} .hero-content h1{font-size:clamp(1.35rem,7vw,1.75rem)} .hero-visual-panel{transform:scale(.54);max-width:185px} .hero-trust{font-size:.7rem} .gallery-grid{grid-template-columns:1fr} .lightbox-nav{width:40px;height:40px} } .contact-logo-wide{width:min(260px,100%);height:auto;padding:6px;object-fit:contain} .contact-brand img.contact-logo-wide{display:block;max-width:100%;height:auto;object-fit:contain} .contact-logo-wide{width:min(320px,100%);height:auto;object-fit:contain;background:transparent;border:0;padding:0;display:block} .contact-brand{align-items:center} .contact-brand img.contact-logo-wide{display:block;max-width:100%;height:auto;object-fit:contain;background:transparent;border:0;padding:0;width:min(262px,100%);} /* ===== TRUST STATS (Hero) ===== */ .hero-stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:28px} .hero-stat{display:flex;flex-direction:column;align-items:flex-start} .hero-stat .stat-val{font-size:1.45rem;font-weight:800;color:var(--accent-text);line-height:1} .hero-stat .stat-lbl{font-size:.72rem;color:rgba(255,255,255,.5);font-weight:500;margin-top:2px} @media(max-width:767px){.hero-stats{justify-content:center}.hero-stat{align-items:center}} /* ===== GALLERY PREVIEW GRID (Teaser) ===== */ .gallery-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .gallery-preview-item{display:block;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;transition:var(--transition)} .gallery-preview-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)} .gallery-preview-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition)} .gallery-preview-item:hover img{transform:scale(1.06)} .gallery-preview-item span{position:absolute;bottom:0;left:0;right:0;padding:6px 10px;background:linear-gradient(transparent,rgba(15,23,42,.8));color:var(--white);font-size:.78rem;font-weight:600} @media(max-width:640px){.gallery-preview-grid{grid-template-columns:1fr 1fr}.gallery-preview-item:last-child{display:none}} /* ===== HERO IMAGE OVERLAY ===== */ .hero::after{content:"";position:absolute;inset:0;background:url(../images/fenster_montage_aussen_04.jpg) center/cover no-repeat;opacity:.07;pointer-events:none} /* Nav-Dropdown "Mehr" */ .nav-more{position:relative;display:inline-block} .nav-more-btn{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:8px 12px;display:inline-flex;align-items:center;gap:4px} .nav-more-btn:hover{opacity:.75} .nav-more-menu{display:none;position:absolute;top:100%;right:0;background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:160px;padding:6px 0;z-index:100;flex-direction:column} .nav-more.open .nav-more-menu{display:flex} .nav-more-menu a{display:block;padding:10px 16px;color:#0f172a;text-decoration:none;white-space:nowrap} .nav-more-menu a:hover{background:rgba(15,23,42,.05)} @media(max-width:900px){.nav-more{display:none}} /* logo-badge-rounding */ .header-logo img,.footer-brand .logo-wrap img,.contact-logo{border-radius:8px} /* logo-groesser-2 */ .footer-brand .logo-wrap img{width:56px !important;height:56px !important} .contact-logo{width:150px !important;height:150px !important} /* contact-cta-text */ .contact-cta h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:14px} .contact-cta > .container > p{color:var(--text-muted);font-size:1.05rem;max-width:700px;margin:0 auto;line-height:1.6} /* ============ FBX DEMO-KOMPONENTEN ============ */ /* Trust-Marquee (Markenpartner endlos scrollend) */ .fbx-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .fbx-marquee-track{display:flex;gap:56px;width:max-content;align-items:center;animation:fbxMarquee 26s linear infinite} .fbx-marquee:hover .fbx-marquee-track{animation-play-state:paused} .fbx-marquee-track .partner-item{display:flex;align-items:center;gap:12px;white-space:nowrap;opacity:.85;transition:opacity .3s ease} .fbx-marquee-track .partner-item:hover{opacity:1} .fbx-marquee-track .partner-item img{height:34px;width:auto} .fbx-marquee-track .partner-item span{font-weight:700;font-size:1.05rem;color:var(--text)} @keyframes fbxMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Expanding Hover Menu */ .fbx-quicknav-wrap{padding:34px 0;background:var(--bg)} .fbx-hover-menu{display:flex;align-items:center;gap:6px;background:rgba(30,41,59,.55);border:1px solid rgba(56,189,248,.18);backdrop-filter:blur(10px);padding:8px;border-radius:999px;box-shadow:0 8px 32px rgba(0,0,0,.35);flex-wrap:wrap;justify-content:center} .fbx-menu-item{width:54px;height:54px;display:flex;align-items:center;gap:.6rem;padding:0 16px;overflow:hidden;border-radius:999px;color:var(--text);text-decoration:none;transition:width .45s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease} .fbx-menu-item svg{flex:0 0 22px;width:22px;height:22px} .fbx-menu-item:hover,.fbx-menu-item:focus-visible{width:172px;background:rgba(255,255,255,.10);box-shadow:0 0 28px rgba(56,189,248,.35);outline:none} .fbx-menu-label{opacity:0;max-width:0;white-space:nowrap;font-size:.92rem;font-weight:600;transform:translateX(-8px);transition:opacity .25s ease,max-width .45s ease,transform .35s ease} .fbx-menu-item:hover .fbx-menu-label,.fbx-menu-item:focus-visible .fbx-menu-label{opacity:1;max-width:130px;transform:translateX(0)} @media(max-width:520px){.fbx-menu-item{width:auto}.fbx-menu-label{opacity:1;max-width:130px;transform:none}} /* Modern Social Icons */ .fbx-social{display:flex;gap:12px;margin-top:18px} .fbx-social-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease} .fbx-social-icon svg{width:22px;height:22px} .fbx-social-icon:hover{transform:translateY(-5px) scale(1.06);filter:brightness(1.1)} .fbx-s-fb{background:linear-gradient(135deg,#1877f2,#0d5bcf)} .fbx-s-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)} .fbx-s-yt{background:linear-gradient(135deg,#ff4b4b,#c4302b)} .fbx-s-wa{background:linear-gradient(135deg,#25d366,#128c4a)} /* Galaxy Spiral Slider */ .fbx-galaxy-scene{height:340px;display:flex;align-items:center;justify-content:center;perspective:1100px} .fbx-galaxy{position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:fbxGalaxySpin 30s linear infinite} .fbx-galaxy-scene:hover .fbx-galaxy{animation-play-state:paused} @keyframes fbxGalaxySpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}} .fbx-galaxy-item{position:absolute;top:-70px;left:-95px;width:190px;height:140px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 30px rgba(56,189,248,.3)} .fbx-galaxy-item img{width:100%;height:100%;object-fit:cover;display:block} .fbx-kenburns-scene{display:none;position:relative;height:340px;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 30px rgba(56,189,248,.24);background:var(--surface)} .fbx-kenburns-image{width:100%;height:100%;display:block;object-fit:cover;transform-origin:center;animation:fbxKenBurns 36s ease-in-out infinite alternate} @keyframes fbxKenBurns{from{transform:scale(1.04) translate3d(-1.5%,-1%,0)}to{transform:scale(1.16) translate3d(2.5%,1.5%,0)}} html.fbx-hero-galaxy .fbx-galaxy-scene{display:flex} html.fbx-hero-galaxy .fbx-kenburns-scene{display:none} html.fbx-hero-kenburns .fbx-galaxy-scene{display:none} html.fbx-hero-kenburns .fbx-kenburns-scene{display:block} /* Spotlight-Reveal auf Karten */ .fbx-spotlight{position:relative;overflow:hidden} .fbx-spotlight::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s ease;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.18),transparent 60%);pointer-events:none} .fbx-spotlight.fbx-glow::after{opacity:1} /* Modern Login/Register UI */ .fbx-auth-card{width:360px;max-width:100%;background:var(--surface);border-radius:20px;border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.4)} .fbx-auth-tabs{display:flex;gap:6px;padding:14px 14px 0} .fbx-auth-tab{flex:1;padding:10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-muted);font-weight:600;cursor:pointer;font-size:.9rem;transition:all .25s ease} .fbx-auth-tab.active{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.55);color:#fff} .fbx-auth-panel{padding:22px 26px 26px} .fbx-auth-panel h3{margin:6px 0 18px;font-size:1.2rem;color:var(--white)} .fbx-auth-label{display:block;font-size:.78rem;color:var(--accent-text);margin-bottom:6px;font-weight:600} .fbx-auth-input{width:100%;padding:12px 14px;margin-bottom:16px;background:var(--bg);border:1px solid var(--gray-200);border-radius:10px;color:#fff;font-size:.95rem;outline:none;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease} .fbx-auth-input:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px rgba(56,189,248,.15)} .fbx-auth-submit{display:block;width:100%;text-align:center;padding:13px;border:none;border-radius:10px;background:linear-gradient(90deg,#38bdf8,#0ea5e9);color:#04202e;font-weight:800;font-size:.98rem;cursor:pointer;text-decoration:none;transition:filter .2s ease,transform .2s ease} .fbx-auth-submit:hover{filter:brightness(1.08);transform:translateY(-1px)} .fbx-auth-switch{display:block;text-align:center;margin-top:14px;color:var(--text-muted);font-size:.85rem;text-decoration:none;cursor:pointer} .fbx-auth-switch:hover{color:var(--accent-text)} /* Header: Text-Nav durch Expanding Hover Menu ersetzt */ .nav.fbx-hover-menu{padding:6px;gap:4px;flex-wrap:nowrap} .nav.fbx-hover-menu .fbx-menu-item{width:46px;height:46px;padding:0 12px;color:var(--text)} .nav.fbx-hover-menu .fbx-menu-item svg{flex:0 0 20px;width:20px;height:20px} .nav.fbx-hover-menu .fbx-menu-item:hover,.nav.fbx-hover-menu .fbx-menu-item:focus-visible{width:auto;padding-right:18px} .fbx-menu-login{color:var(--accent-text) !important} .fbx-menu-login:hover{box-shadow:0 0 28px rgba(56,189,248,.5) !important} @media(max-width:520px){.nav.fbx-hover-menu .fbx-menu-item{width:46px}.nav.fbx-hover-menu .fbx-menu-label{opacity:0;max-width:0}} /* ============ FAQ-ASSISTENT ============ */ .fbbot-fab{position:fixed;right:24px;bottom:24px;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;z-index:9998;color:#04202e;background:linear-gradient(135deg,#38bdf8,#0ea5e9);box-shadow:0 10px 30px rgba(56,189,248,.45);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,opacity .2s ease} .fbbot-fab:hover{transform:scale(1.08)} .fbbot-fab.hide{opacity:0;pointer-events:none;transform:scale(.7)} .fbbot-fab::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(56,189,248,.5);animation:fbbotPulse 2.4s infinite} @keyframes fbbotPulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.45)}70%{box-shadow:0 0 0 16px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}} #backTop{bottom:96px !important} .fbbot-panel{position:fixed;right:24px;bottom:24px;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:#0f172a;border:1px solid rgba(56,189,248,.25);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.55);z-index:9999;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(.96);pointer-events:none;transition:opacity .25s ease,transform .25s ease} .fbbot-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .fbbot-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#04202e} .fbbot-head strong{display:block;font-size:1.05rem} .fbbot-head span{font-size:.72rem;opacity:.8} .fbbot-close{background:rgba(0,0,0,.12);border:none;color:#04202e;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.9rem;font-weight:700} .fbbot-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px} .fbbot-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.45;word-wrap:break-word} .fbbot-bot{align-self:flex-start;background:#1e293b;color:#e2e8f0;border-bottom-left-radius:4px} .fbbot-user{align-self:flex-end;background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#04202e;font-weight:600;border-bottom-right-radius:4px} .fbbot-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%} .fbbot-chip{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.35);color:#7dd3fc;padding:7px 12px;border-radius:999px;font-size:.8rem;cursor:pointer;transition:background .2s ease;font-family:inherit} .fbbot-chip:hover{background:rgba(56,189,248,.22)} .fbbot-actions{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start} .fbbot-action{background:#1e293b;border:1px solid rgba(255,255,255,.12);color:#fff;padding:9px 14px;border-radius:10px;font-size:.82rem;text-decoration:none;font-weight:600;transition:background .2s ease} .fbbot-action:hover{background:#334155} .fbbot-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08);background:#0b1220} .fbbot-input input{flex:1;background:#1e293b;border:1px solid var(--gray-200);border-radius:10px;padding:11px 14px;color:#fff;font-size:.9rem;outline:none;font-family:inherit} .fbbot-input input:focus{border-color:#38bdf8} .fbbot-input button{background:linear-gradient(135deg,#38bdf8,#0ea5e9);border:none;color:#04202e;width:44px;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:700} .fbbot-dots{display:inline-flex;gap:4px} .fbbot-dots i{width:7px;height:7px;border-radius:50%;background:#64748b;animation:fbbotBlink 1.2s infinite} .fbbot-dots i:nth-child(2){animation-delay:.2s} .fbbot-dots i:nth-child(3){animation-delay:.4s} @keyframes fbbotBlink{0%,60%,100%{opacity:.3}30%{opacity:1}} /* ============ LOGO: groesser + Watermark ============ */ .header-logo img{width:80px !important;height:80px !important;border-radius:14px !important} .header{padding:14px 0} /* Watermark: Logo durchschimmernd auf jeder Seite (nur Desktop, damit Mobile schnell bleibt) */ body{position:relative} body::before{ content:""; position:fixed; inset:0; z-index:0; background:url("../brand/logo-watermark.png") no-repeat center center; background-size:min(60vw,720px) auto; opacity:.06; pointer-events:none; filter:blur(.3px); } /* Alle Inhalte oberhalb der Wasserzeichen-Ebene */ .header,main,.footer,.cookie-box{position:relative;z-index:1} .header{z-index:20} .fbbot-fab,.fbbot-panel{z-index:9998} .fbbot-panel.open{z-index:9999} @media(max-width:720px){ body::before{background-size:min(90vw,480px) auto;opacity:.05} .header-logo img{width:60px !important;height:60px !important} } /* ============ RUNDE 4: HEADER-ICONS + HOVER-STABILITÄT + AGENT-FIXES ============ */ /* Header-Icons oben rechts (5 Icons statt Phone-Text/WA/Chat) */ .header-actions.fbx-header-icons{display:flex;align-items:center;gap:10px} .fbx-hicon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,filter .25s ease} .fbx-hicon svg{width:18px;height:18px} .fbx-hicon:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.12)} .fbx-hicon.fbx-s-fb{background:linear-gradient(135deg,#1877f2,#0d5bcf)} .fbx-hicon.fbx-s-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)} .fbx-hicon.fbx-s-yt{background:linear-gradient(135deg,#ff4b4b,#c4302b)} .fbx-hicon.fbx-s-wa{background:linear-gradient(135deg,#25d366,#128c4a)} .fbx-hicon.fbx-s-bot{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#04202e} .fbx-header-icons .hamburger{margin-left:6px} /* Alte Phone-Link/WA-Link/Chat-Link (falls Reste im DOM sind, nichts zeigen) */ .phone-link,.wa-link,.chat-link{display:none !important} /* FAB unten rechts ausblenden — Bot wird jetzt oben getriggert */ .fbbot-fab{display:none !important} #backTop{bottom:24px !important} /* Header-Hover-Menü: Sichtbarkeit stabilisieren */ .nav.fbx-hover-menu{position:relative;overflow:visible} .nav.fbx-hover-menu .fbx-menu-item{position:relative;transition:width .35s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease;will-change:width;overflow:visible} .nav.fbx-hover-menu .fbx-menu-item:hover,.nav.fbx-hover-menu .fbx-menu-item:focus-visible{width:auto !important;padding-right:22px !important;z-index:5} .nav.fbx-hover-menu .fbx-menu-item:hover .fbx-menu-label,.nav.fbx-hover-menu .fbx-menu-item:focus-visible .fbx-menu-label{opacity:1 !important;max-width:200px !important;transform:translateX(0) !important;transition-delay:.05s} /* Beim Rausbewegen: Text bleibt kurz sichtbar, damit man ihn lesen kann */ .nav.fbx-hover-menu .fbx-menu-item .fbx-menu-label{transition:opacity .35s ease,max-width .4s ease,transform .35s ease;transition-delay:.15s} /* Letztes Item (Mitarbeiter Login) klappt nach LINKS auf, nicht nach rechts */ .nav.fbx-hover-menu .fbx-menu-login .fbx-menu-label{order:-1} .nav.fbx-hover-menu .fbx-menu-login:hover,.nav.fbx-hover-menu .fbx-menu-login:focus-visible{padding-right:12px !important;padding-left:22px !important} /* Kontakt-Icon: kein Abschneiden am Header-Rand */ .header .container{overflow:visible} /* ============ AGENT-FIXES ============ */ /* Fix 1: .section-sub lesbarer */ .section-sub{color:var(--text-muted) !important;font-size:1.1rem} /* Fix 2: .feature Karten dunkel statt weiß */ .feature{background:var(--surface) !important;color:var(--white);border:1px solid rgba(255,255,255,.06)} .feature h3{color:var(--white)} .feature p{color:var(--text-muted)} /* Fix 3: .guide-card-summary Kontrast */ .guide-card-summary{color:var(--text-muted) !important;opacity:1 !important} /* Fix 4: contact-card Telefon-Chip */ .contact-actions span[style*="color:var(--primary)"]{color:var(--accent-text) !important;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);border-radius:8px} /* Fix 6: .contact-cta h2 etwas größer */ .contact-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px} /* Fix 7: Alte .nav-more Dropdown komplett aus */ .nav-more,.nav-more-menu,.nav-more-btn{display:none !important} /* Fix 8: Watermark dezenter */ body::before{opacity:.045 !important} @media(max-width:720px){body::before{opacity:.025 !important}} /* Weitere product-card / catalog-card / contact-card dark-mode-Anpassung */ .product-card,.catalog-card,.contact-card{background:var(--surface) !important;color:var(--white);border:1px solid rgba(255,255,255,.06)} .product-card p,.catalog-card p,.contact-card p{color:var(--text-muted)} .product-card h3,.catalog-card h3,.contact-card h3{color:var(--white)} /* Sicherheits-Reset: ganze weisse Sektionen killen */ .section[style*="background:var(--surface)"],.section[style*="background:#fff"]{background:var(--bg) !important} /* Mobile: Icons kleiner, Menü zusammenklappen */ /* ---- Tippflaechen auf dem Handy vergroessern ---- Die Kopf-Symbole sind sichtbar 34x34 px und liegen damit unter der empfohlenen Mindestgroesse von 44x44 px. Die Symbole selbst duerfen nicht groesser werden, sonst laeuft die Kopfleiste wieder ueber den Rand. Deshalb wird nur die unsichtbare Trefferflaeche erweitert - senkrecht auf volle 44 px, waagerecht nur um 2 px je Seite, damit benachbarte Flaechen sich bei 6 px Abstand nicht ueberlappen. Am Layout aendert sich nichts. */ @media(max-width:720px){ .fbx-hicon{position:relative} .fbx-hicon::after{content:"";position:absolute;inset:-5px -2px;border-radius:12px} /* Fusszeilen-Links waren nur 20 px hoch - hier ist Platz fuer echte Hoehe */ .footer ul li a{display:inline-block;padding:12px 0} } @media(max-width:720px){ .fbx-hicon{width:34px;height:34px} .fbx-hicon svg{width:16px;height:16px} .header-actions.fbx-header-icons{gap:6px} .nav.fbx-hover-menu{display:none} .fbx-header-icons .hamburger{display:flex} /* Auf dem Handy passen neun Symbole nicht nebeneinander - die Zeile lief ueber den rechten Rand hinaus und schob das Hamburger-Menue aus dem Bild. Die drei Social-Symbole sind derzeit ohnehin Platzhalter ("folgt in Kuerze") und stehen zusaetzlich in der Fusszeile; erreichbar bleiben WhatsApp, Chat, Login, Hell/Dunkel, Sprache und das Menue. */ .fbx-header-icons .fbx-s-fb, .fbx-header-icons .fbx-s-ig, .fbx-header-icons .fbx-s-yt{display:none} } @media(min-width:721px){ .fbx-header-icons .hamburger{display:none} } /* ============ GALERIE REDESIGN ============ */ .fbx-gal-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 32px;padding:10px;background:rgba(30,41,59,.55);border:1px solid rgba(56,189,248,.18);border-radius:999px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,.35);max-width:fit-content} .fbx-gal-tab{background:transparent;border:1px solid transparent;color:var(--text-muted);font-weight:600;padding:10px 20px;border-radius:999px;font-size:.92rem;cursor:pointer;font-family:inherit;transition:all .25s ease} .fbx-gal-tab:hover{color:#fff;background:rgba(56,189,248,.08)} .fbx-gal-tab.active{background:linear-gradient(90deg,#38bdf8,#0ea5e9);color:#04202e;border-color:transparent;box-shadow:0 4px 16px rgba(56,189,248,.35)} .fbx-gal-status{min-height:1.5em;margin:-16px 0 16px;text-align:center;color:var(--text-muted);font-size:.9rem} .fbx-gal-status:empty{visibility:hidden} .fbx-gal-status.is-error{color:var(--text-muted)} .fbx-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px;grid-auto-flow:dense} .fbx-gal-item{position:relative;grid-column:span 1;grid-row:span 1;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid rgba(255,255,255,.06);text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;display:block;cursor:zoom-in} .fbx-gal-item.fbx-gal-large{grid-column:span 2;grid-row:span 2} .fbx-gal-item.fbx-gal-wide{grid-column:span 2} .fbx-gal-item.fbx-gal-tall{grid-row:span 2} .fbx-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1);filter:saturate(1.05)} .fbx-gal-item:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.5),0 0 0 2px rgba(56,189,248,.5)} .fbx-gal-item:hover img{transform:scale(1.08)} .fbx-gal-label{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-weight:700;font-size:.92rem;text-shadow:0 2px 12px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));padding:20px 12px 8px;border-radius:0 0 12px 12px;pointer-events:none} .fbx-gal-item::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5) 100%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1} .fbx-gal-item:hover::before,.fbx-gal-item:hover .fbx-gal-label{opacity:1;transform:translateY(0)} .fbx-gal-item.fbx-hidden{display:none} /* Zoom-Icon in Ecke */ .fbx-gal-item::after{content:"⛶";position:absolute;top:12px;right:12px;width:34px;height:34px;background:rgba(15,23,42,.7);backdrop-filter:blur(6px);border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s ease;z-index:2} .fbx-gal-item:hover::after{opacity:1;transform:scale(1)} /* Responsive */ @media(max-width:960px){ .fbx-gal-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px} .fbx-gal-item.fbx-gal-large{grid-column:span 2;grid-row:span 2} .fbx-gal-item.fbx-gal-wide{grid-column:span 3} } @media(max-width:640px){ .fbx-gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:10px} .fbx-gal-item,.fbx-gal-item.fbx-gal-large,.fbx-gal-item.fbx-gal-wide,.fbx-gal-item.fbx-gal-tall{grid-column:span 1 !important;grid-row:span 1 !important} .fbx-gal-tab{padding:8px 14px;font-size:.82rem} .fbx-gal-label{opacity:1;transform:translateY(0);font-size:.8rem} .fbx-gal-item::before{opacity:.7} } /* ============ RUNDE 5: LOGO/WATERMARK/HOVER-FIX ============ */ /* Logo deutlich groesser */ .header-logo img{width:110px !important;height:110px !important;border-radius:16px !important} @media(max-width:720px){.header-logo img{width:74px !important;height:74px !important}} .header{padding:18px 0} /* Watermark deutlich sichtbarer */ body::before{ opacity:.14 !important; background-size:min(72vw,900px) auto !important; filter:none !important; } @media(max-width:720px){body::before{opacity:.10 !important;background-size:min(95vw,540px) auto !important}} /* Hover-Menue: Text sichtbar halten bis Maus weg vom NEUEN Icon */ .nav.fbx-hover-menu{overflow:visible !important;flex-wrap:nowrap !important;position:static} .nav.fbx-hover-menu .fbx-menu-item{transition:width .28s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease} .nav.fbx-hover-menu .fbx-menu-item .fbx-menu-label{transition:opacity .2s ease .05s,max-width .28s ease .05s,transform .28s ease .05s} /* Beim Ausblenden schneller (nicht kleben) */ .nav.fbx-hover-menu .fbx-menu-item:not(:hover):not(:focus-visible) .fbx-menu-label{transition-delay:0s;transition-duration:.15s} .nav.fbx-hover-menu .fbx-menu-item:hover,.nav.fbx-hover-menu .fbx-menu-item:focus-visible{width:auto !important;padding-right:22px !important;background:rgba(255,255,255,.10);box-shadow:0 0 28px rgba(56,189,248,.35);z-index:10} /* Login-Item nach LINKS aufklappen bleibt */ .nav.fbx-hover-menu .fbx-menu-login:hover,.nav.fbx-hover-menu .fbx-menu-login:focus-visible{padding-right:12px !important;padding-left:22px !important} .nav.fbx-hover-menu .fbx-menu-login .fbx-menu-label{order:-1} /* Header-Layout: mehr Luft, kein Abschneiden */ .header .container{overflow:visible;flex-wrap:wrap;row-gap:12px} @media(max-width:900px){.nav.fbx-hover-menu{order:3;flex-basis:100%;justify-content:center}} /* ============ PERPETUAL DRAW BORDER (endlose animierte Umrandung) ============ */ .catalog-card,.usp-item{position:relative;isolation:isolate;overflow:hidden} .catalog-card::before,.usp-item::before{ content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:0;pointer-events:none; background:conic-gradient(from 0deg,transparent 0deg 240deg,#38bdf8 300deg,#a78bfa 335deg,#38bdf8 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:fbxPerpetualDraw 4s linear infinite; } .catalog-card > *,.usp-item > *{position:relative;z-index:1} @keyframes fbxPerpetualDraw{to{transform:rotate(360deg)}} /* Rundungs-Erhaltung */ .catalog-card{border-radius:var(--radius-card,14px)} .usp-item{border-radius:var(--radius-card,14px)} /* Kleine Delay-Verschiebung damit nicht alle gleichzeitig laufen */ .catalog-card:nth-child(2n)::before,.usp-item:nth-child(2n)::before{animation-delay:-1s} .catalog-card:nth-child(3n)::before,.usp-item:nth-child(3n)::before{animation-delay:-2s} .catalog-card:nth-child(4n)::before,.usp-item:nth-child(4n)::before{animation-delay:-3s} /* ============ SERVICES 2x2-LAYOUT ============ */ .services-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:24px; max-width:960px; margin:0 auto; } @media(max-width:640px){ .services-grid{grid-template-columns:1fr !important} } /* ============ BEWERTUNGEN — HINTERGRUND-ANIMATION ============ */ /* Aktiv nur auf bewertungen.html via body[data-page="reviews"] */ body[data-page="reviews"] .fbx-stars-bg{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; } body[data-page="reviews"] .fbx-stars-bg::before, body[data-page="reviews"] .fbx-stars-bg::after{ content:"";position:absolute;inset:-50%;width:200%;height:200%; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fbbf24 50%, transparent), radial-gradient(1px 1px at 40% 70%, #38bdf8 50%, transparent), radial-gradient(1.5px 1.5px at 60% 20%, #fbbf24 50%, transparent), radial-gradient(1px 1px at 80% 60%, #a78bfa 50%, transparent), radial-gradient(1.5px 1.5px at 10% 80%, #38bdf8 50%, transparent), radial-gradient(1px 1px at 90% 40%, #fbbf24 50%, transparent), radial-gradient(2px 2px at 30% 50%, #fbbf24 50%, transparent), radial-gradient(1px 1px at 50% 10%, #38bdf8 50%, transparent), radial-gradient(1.5px 1.5px at 70% 90%, #a78bfa 50%, transparent), radial-gradient(1px 1px at 15% 55%, #fbbf24 50%, transparent), radial-gradient(2px 2px at 85% 15%, #38bdf8 50%, transparent), radial-gradient(1px 1px at 45% 85%, #fbbf24 50%, transparent); background-size:400px 400px; animation:fbxStarsFall 60s linear infinite; opacity:.55; } body[data-page="reviews"] .fbx-stars-bg::after{ animation-duration:90s;animation-direction:reverse;opacity:.35; background-size:600px 600px;filter:blur(.5px); } @keyframes fbxStarsFall{ from{transform:translate(0,0)} to{transform:translate(-400px,400px)} } /* Floating Gradient-Blobs im Hintergrund */ body[data-page="reviews"] .fbx-stars-bg .fbx-blob{ position:absolute;border-radius:50%;filter:blur(80px);opacity:.20; animation:fbxBlobFloat 18s ease-in-out infinite; } body[data-page="reviews"] .fbx-stars-bg .fbx-blob.b1{width:340px;height:340px;background:#fbbf24;top:8%;left:6%} body[data-page="reviews"] .fbx-stars-bg .fbx-blob.b2{width:300px;height:300px;background:#38bdf8;bottom:12%;right:8%;animation-delay:-6s} body[data-page="reviews"] .fbx-stars-bg .fbx-blob.b3{width:260px;height:260px;background:#a78bfa;top:45%;left:55%;animation-delay:-12s} @keyframes fbxBlobFloat{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.08)} 66%{transform:translate(-30px,30px) scale(.94)} } /* Content muss über den animierten Hintergrund */ body[data-page="reviews"] .header, body[data-page="reviews"] main, body[data-page="reviews"] .footer{position:relative;z-index:2} /* Bewertungskarten: Perpetual Draw (passend zum Stil der anderen Seiten) */ .review-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card,14px)} .review-card::before{ content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:0;pointer-events:none; background:conic-gradient(from 0deg,transparent 0deg 240deg,#fbbf24 300deg,#38bdf8 335deg,#fbbf24 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:fbxPerpetualDraw 4s linear infinite; } .review-card > *{position:relative;z-index:1} .review-card:nth-child(2n)::before{animation-delay:-1s} .review-card:nth-child(3n)::before{animation-delay:-2s} /* Sterne funkeln (individuelle SVG-Sterne) */ .review-stars,.testi-stars{animation:fbxStarsPulse 3.5s ease-in-out infinite} .review-card:nth-child(2n) .review-stars{animation-delay:-1.2s} .review-card:nth-child(3n) .review-stars{animation-delay:-2.4s} @keyframes fbxStarsPulse{ 0%,100%{filter:drop-shadow(0 0 4px rgba(251,191,36,.35))} 50%{filter:drop-shadow(0 0 12px rgba(251,191,36,.75))} } /* Reduce Motion respektieren */ @media(prefers-reduced-motion:reduce){ body[data-page="reviews"] .fbx-stars-bg::before, body[data-page="reviews"] .fbx-stars-bg::after, body[data-page="reviews"] .fbx-stars-bg .fbx-blob, .review-card::before,.review-stars,.testi-stars{animation:none !important} } /* ============ NEUE NAV: klar, kompakt, alles sichtbar (v3) ============ */ /* Alten Hover-Menue-Stil deaktivieren */ .nav.fbx-hover-menu{ background:transparent !important;border:none !important;box-shadow:none !important; padding:0 !important;border-radius:0 !important;overflow:visible; display:flex;align-items:center;gap:4px;flex-wrap:nowrap !important; } /* Menue-Items = kompakte Buttons mit Icon + Text IMMER sichtbar */ .nav.fbx-hover-menu .fbx-menu-item{ width:auto !important;height:auto !important;padding:8px 12px !important; display:inline-flex;align-items:center;gap:8px; border-radius:10px;color:var(--text,#f1f5f9);text-decoration:none; font-size:.88rem;font-weight:600;line-height:1;white-space:nowrap; transition:background .18s ease,color .18s ease,transform .18s ease; background:transparent;box-shadow:none !important; } .nav.fbx-hover-menu .fbx-menu-item svg{ width:18px !important;height:18px !important;flex:0 0 18px;opacity:.85; } .nav.fbx-hover-menu .fbx-menu-label{ opacity:1 !important;max-width:none !important;transform:none !important; transition:none !important;color:inherit;font-weight:inherit; } /* Hover: dezent, kein Springen, kein Aufklappen */ .nav.fbx-hover-menu .fbx-menu-item:hover, .nav.fbx-hover-menu .fbx-menu-item:focus-visible{ background:rgba(56,189,248,.10) !important; color:#38bdf8; box-shadow:none !important; outline:none; } .nav.fbx-hover-menu .fbx-menu-item:hover svg{opacity:1} /* Aktive Seite hervorheben (per JS Klasse .active) */ .nav.fbx-hover-menu .fbx-menu-item.active{ background:linear-gradient(90deg,rgba(56,189,248,.15),rgba(167,139,250,.15)); color:#38bdf8; } .nav.fbx-hover-menu .fbx-menu-item.active::before{ content:"";position:absolute;bottom:-8px;left:12px;right:12px;height:2px; background:linear-gradient(90deg,#38bdf8,#a78bfa);border-radius:2px; } .nav.fbx-hover-menu .fbx-menu-item{position:relative} /* Login-Button hebt sich ab (grüner Akzent) */ .nav.fbx-hover-menu .fbx-menu-login{ margin-left:6px;background:rgba(56,189,248,.14) !important; border:1px solid rgba(56,189,248,.35); } .nav.fbx-hover-menu .fbx-menu-login:hover{ background:linear-gradient(90deg,#38bdf8,#0ea5e9) !important;color:#04202e !important; } .nav.fbx-hover-menu .fbx-menu-login:hover svg{color:#04202e} /* Login-Label doch nach LINKS aufklappen bleibt weg — alles sichtbar */ .nav.fbx-hover-menu .fbx-menu-login .fbx-menu-label{order:0} /* ---------- MOBILE: Burger-Menu ---------- */ @media(max-width:960px){ .nav.fbx-hover-menu{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:2px; background:rgba(11,17,32,.98);backdrop-filter:blur(12px); padding:12px !important;border-top:1px solid rgba(56,189,248,.2); box-shadow:0 20px 40px rgba(0,0,0,.5) !important; } .nav.fbx-hover-menu.open{display:flex} .nav.fbx-hover-menu .fbx-menu-item{ padding:14px 16px !important;font-size:1rem; border-radius:10px; } .nav.fbx-hover-menu .fbx-menu-item.active::before{display:none} .nav.fbx-hover-menu .fbx-menu-item.active{border-left:3px solid #38bdf8;padding-left:13px !important} } @media(min-width:961px){ .fbx-header-icons .hamburger{display:none !important} } @media(max-width:960px){ .fbx-header-icons .hamburger{display:flex !important} } /* ============ NEUER 2-ZEILEN-HEADER (v4) ============ */ /* Zeile 1: Logo mittig (groß) + Social-Icons rechts | Zeile 2: Nav zentriert */ .header{padding:14px 0 0 !important;background:rgba(11,17,32,.7);backdrop-filter:blur(14px);border-bottom:1px solid rgba(56,189,248,.18);overflow:visible !important} .header .container{ display:grid !important; grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; grid-template-areas: "spacer logo icons" "nav nav nav"; align-items:center; gap:8px 16px; overflow:visible !important; max-width:1300px; } /* Logo mittig + groß */ .header-logo{grid-area:logo;justify-self:center} .header-logo img{width:100px !important;height:100px !important;border-radius:14px !important;display:block} @media(max-width:720px){.header-logo img{width:72px !important;height:72px !important}} /* Social-Icons rechts */ .header-actions.fbx-header-icons{ grid-area:icons;justify-self:end; display:flex;align-items:center;gap:8px; } /* Nav zweite Zeile, zentriert */ .nav.fbx-hover-menu{ grid-area:nav;justify-self:center; padding:8px 0 12px !important; gap:2px !important;flex-wrap:nowrap; } /* Kompakte Menu-Items */ .nav.fbx-hover-menu .fbx-menu-item{ padding:9px 14px !important;font-size:.9rem;font-weight:600; border-radius:10px;transition:background .18s ease,color .18s ease; gap:8px;color:var(--text,#f1f5f9) !important; } .nav.fbx-hover-menu .fbx-menu-item svg{width:16px !important;height:16px !important;opacity:.75} .nav.fbx-hover-menu .fbx-menu-item:hover{background:rgba(56,189,248,.12) !important;color:#38bdf8 !important} .nav.fbx-hover-menu .fbx-menu-item:hover svg{opacity:1} .nav.fbx-hover-menu .fbx-menu-item.active{background:rgba(56,189,248,.15) !important;color:#38bdf8 !important} .nav.fbx-hover-menu .fbx-menu-item.active::before{ content:"";position:absolute;bottom:-8px;left:14px;right:14px;height:2px; background:linear-gradient(90deg,#38bdf8,#a78bfa);border-radius:2px; } .nav.fbx-hover-menu .fbx-menu-item{position:relative} /* Mitarbeiter-Login als Akzent-Button */ .nav.fbx-hover-menu .fbx-menu-login{ margin-left:8px;background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(129,140,248,.18)) !important; border:1px solid rgba(56,189,248,.4);color:#38bdf8 !important; } .nav.fbx-hover-menu .fbx-menu-login:hover{background:linear-gradient(90deg,#38bdf8,#0ea5e9) !important;color:#04202e !important} .nav.fbx-hover-menu .fbx-menu-login:hover svg{color:#04202e;opacity:1} /* Social-Icons (Facebook, IG, YT, WA, Bot) */ .fbx-hicon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .2s ease,filter .2s ease} .fbx-hicon svg{width:18px;height:18px} .fbx-hicon:hover{transform:translateY(-3px);filter:brightness(1.12)} /* ---------- MOBILE ---------- */ @media(max-width:960px){ .header .container{grid-template-columns:auto 1fr auto;grid-template-areas:"logo spacer icons" "nav nav nav" !important;gap:6px 8px} .header-logo{justify-self:start;grid-area:logo} .header-actions.fbx-header-icons{gap:6px} .fbx-hicon{width:34px;height:34px} .fbx-hicon svg{width:15px;height:15px} .nav.fbx-hover-menu{ display:none;flex-direction:column;align-items:stretch; background:rgba(11,17,32,.98);backdrop-filter:blur(12px); padding:12px !important;gap:2px !important; border-top:1px solid rgba(56,189,248,.2); } .nav.fbx-hover-menu.open{display:flex} .nav.fbx-hover-menu .fbx-menu-item{padding:14px 16px !important;font-size:1rem} .nav.fbx-hover-menu .fbx-menu-item.active::before{display:none} .nav.fbx-hover-menu .fbx-menu-item.active{border-left:3px solid #38bdf8;padding-left:13px !important} .fbx-header-icons .hamburger{display:flex !important;background:none;border:none;flex-direction:column;gap:4px;padding:6px;cursor:pointer} .fbx-header-icons .hamburger span{display:block;width:22px;height:2px;background:#38bdf8} } @media(min-width:961px){.fbx-header-icons .hamburger{display:none !important}} /* Kein Text mehr neben dem Logo (nur Bild) */ .header-logo span,.header-logo strong{display:none !important} /* ============ RUNDE 6: FINALE FIXES (autoritativ, ueberschreibt Altlasten) ============ */ /* --- Logo 200px (Test) --- */ .header-logo img{width:200px !important;height:200px !important;border-radius:18px !important} @media(max-width:720px){.header-logo img{width:120px !important;height:120px !important}} /* --- NAV-SHIFT-BUG: alte 46px/54px Pill-Breite entgueltig neutralisieren --- */ .nav.fbx-hover-menu .fbx-menu-item, .nav.fbx-hover-menu .fbx-menu-item:hover, .nav.fbx-hover-menu .fbx-menu-item:focus-visible{ width:auto !important;height:auto !important; padding:10px 14px !important; transition:background .18s ease,color .18s ease !important; } .nav.fbx-hover-menu .fbx-menu-label{ opacity:1 !important;max-width:none !important;transform:none !important; transition:none !important; } /* Zweizeiliges Label fuer Aufmaß-Menuepunkt */ .nav.fbx-hover-menu .fbx-menu-item[href="aufmass.html"] .fbx-menu-label{ display:inline-flex;flex-direction:column;line-height:1.15;text-align:left; } .nav.fbx-hover-menu .fbx-menu-item[href="aufmass.html"] .fbx-menu-label .fbx-label-line2{ font-size:.82em;opacity:.85; } /* --- SPACING-BUG: alter Fixed-Header-Trick (margin-top:-68px) entfernen --- */ /* .header ist position:sticky -> reserviert eigenen Platz, negative margin war fuer alten Fixed-Header gedacht */ .hero{margin-top:0 !important;padding-top:56px !important} .page-hero{padding-top:64px !important} /* ============ BEWERTUNGEN: NEU + KOMPAKT + LESBAR ============ */ .review-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;max-width:1100px;margin:0 auto; } .review-card{ background:var(--surface,#1e293b) !important; border:1px solid rgba(255,255,255,.08); padding:20px 22px !important; display:flex;flex-direction:column;gap:8px; } .review-card .review-stars{font-size:.95rem;color:var(--stars-color,#fbbf24);letter-spacing:1px} .review-card .review-date{font-size:.72rem;color:var(--text-muted,#94a3b8);order:3;margin-top:2px} .review-card blockquote{margin:0;order:2} .review-card blockquote p{ color:var(--text,#f1f5f9) !important;font-size:.88rem;line-height:1.55;margin:0; } .review-card .review-author{order:4;margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px} .review-card .review-author strong{color:var(--accent-text) !important;font-size:.85rem} .review-card .review-author span{color:var(--text-muted,#94a3b8) !important;font-size:.74rem} /* ============ HEADER: ENDGUELTIGE KONSOLIDIERTE FASSUNG (Runde 7) ============ */ /* Uebersteuert ALLE Altlasten (alte height:68px Flex-Regel, alte Pill-Nav etc.) */ .header{ position:sticky !important;top:0 !important;z-index:1000 !important; background:rgba(11,17,32,.85) !important; backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important; border-bottom:1px solid rgba(56,189,248,.18) !important; padding:4px 0 !important; height:auto !important;min-height:0 !important;max-height:none !important; overflow:visible !important; } .header .container{ display:grid !important; grid-template-columns:auto 1fr !important; grid-template-rows:auto auto !important; grid-template-areas:"icons icons" "logo nav" !important; align-items:center !important; gap:2px 14px !important; height:auto !important;min-height:0 !important;max-height:none !important; overflow:visible !important; max-width:1400px; } /* Icon-Zeile (Facebook…Chatbot) oben, mittig */ .header-actions.fbx-header-icons{ grid-area:icons !important;justify-self:center !important; display:flex !important;align-items:center !important;gap:8px !important; height:auto !important; } /* Logo unten links, direkt vor der Navigation */ .header-logo{grid-area:logo !important;justify-self:start !important;height:auto !important} .header-logo img{ width:180px !important;height:180px !important; border-radius:20px !important;display:block !important; } .nav.fbx-hover-menu{ grid-area:nav !important;justify-self:start !important; display:flex !important;align-items:center !important;flex-wrap:wrap !important; justify-content:flex-start !important; gap:4px !important;padding:2px 0 0 !important; width:100% !important;height:auto !important; position:static !important; } /* Genug Platz unterm Header, damit Hero/Page-Hero garantiert nicht ueberlappt */ main{padding-top:8px} @media(max-width:960px){ .header-logo img{width:52px !important;height:52px !important} .header .container{ grid-template-columns:auto 1fr auto !important; grid-template-areas:"logo spacer icons" "nav nav nav" !important; gap:6px !important; } .header-logo{justify-self:start !important} .nav.fbx-hover-menu{ display:none !important; } .nav.fbx-hover-menu.open{ display:flex !important;flex-direction:column !important;align-items:stretch !important; position:absolute !important;top:100% !important;left:0 !important;right:0 !important; background:rgba(11,17,32,.98) !important;backdrop-filter:blur(12px) !important; padding:12px !important;border-top:1px solid rgba(56,189,248,.2) !important; box-shadow:0 20px 40px rgba(0,0,0,.5) !important; } } @media(min-width:961px){ .fbx-header-icons .hamburger{display:none !important} } /* ===== Runde 8: Logo-Groessen Footer + Kontaktseite (finale Ueberschreibung) ===== */ .footer-brand .logo-wrap img{width:180px !important;height:180px !important} .contact-logo:not(.contact-logo-wide){width:156px !important;height:156px !important} /* ================================================================ DESIGN V2 — Veredelung (Tokens in :root oben) Typo Bricolage · Rhythmus · Warm-Akzent · Motion · States ================================================================ */ /* ---------- Typografie ---------- */ h1,h2,h3,.section-title,.page-hero h1,.hero-content h1,.contact-cta h2{ font-family:var(--font-display);letter-spacing:-.02em; } h1,h2,h3{text-wrap:balance} p{text-wrap:pretty} .section-title{font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.025em} .hero-content h1{letter-spacing:-.028em} ::selection{background:rgba(82,198,248,.35);color:#fff} /* ---------- Sektions-Rhythmus ---------- */ .section{padding:clamp(56px,8.5vw,104px) 0} .section-sub{margin-bottom:clamp(36px,5vw,54px)} section[id],[id]{scroll-margin-top:140px} /* ---------- Kontrast-Bugfixes (Titel waren primary auf dunkel) ---------- */ .process-step h4{color:var(--text)} .legal-content h2,.legal-content h3{color:var(--text)} .service-card h3{color:var(--text)} .product-intro h2{color:var(--text)} /* ---------- Buttons: lesbarer Text, 44px Targets ---------- */ .btn{min-height:44px} .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--warm-ink);font-weight:700} .btn-primary:hover{background:linear-gradient(135deg,var(--accent-hover),var(--accent-dark));color:var(--warm-ink);box-shadow:0 8px 24px rgba(82,198,248,.32)} .btn-outline-accent:hover{color:var(--warm-ink)} /* ---------- Fokus + Formular-States ---------- */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px; } input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px} input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,textarea:focus,select:focus{ border-color:var(--accent-text) !important;box-shadow:0 0 0 3px rgba(82,198,248,.16); } input,textarea,select{accent-color:var(--accent-text);caret-color:var(--accent-text)} /* ---------- Hero: warmes Licht hinterm Fenster ---------- */ .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(44% 58% at 82% 16%,rgba(245,183,91,.10) 0%,transparent 70%), radial-gradient(52% 68% at 12% 86%,rgba(82,198,248,.11) 0%,transparent 68%); } .hl-warm{color:var(--warm-text)} .hero-rating{ display:inline-flex;align-items:center;gap:10px;margin-bottom:30px; padding:9px 18px;border-radius:999px;min-height:44px; background:rgba(245,183,91,.07);border:1px solid rgba(245,183,91,.32); color:var(--text);font-weight:600;font-size:.9rem; transition:border-color .2s ease,background .2s ease; } .hero-rating:hover{border-color:var(--warm-text);background:rgba(245,183,91,.13)} .hero-rating{flex-wrap:wrap;row-gap:2px} .hero-rating .stars{color:var(--warm-text);letter-spacing:2px;font-size:.95rem} .hero-rating .score{white-space:nowrap} .hero-rating .sub{color:var(--text-muted);font-weight:500} /* Das Startbild bleibt auch im Hellmodus bewusst dunkel ("dunkle Insel"), deshalb muss die Bewertungs-Pille dort hell bleiben. Mit var(--text) kippte die Schrift im Hellmodus auf Dunkelblau und verschwand im dunklen Verlauf. */ :root[data-theme="light"] .hero-rating{color:#f1f5f9} :root[data-theme="light"] .hero-rating .sub{color:rgba(241,245,249,.82)} @media(max-width:1100px){.hero-rating .sub{display:none}} @media(max-width:767px){.hero-rating{margin-left:auto;margin-right:auto}} /* ---------- USP: Checkliste statt Karten-Grid ---------- */ .usp-item::before{display:none !important;animation:none !important} .usp-grid{grid-template-columns:1fr;gap:8px 44px;max-width:960px;margin:16px auto 0} @media(min-width:768px){.usp-grid{grid-template-columns:1fr 1fr}} .usp-item{ background:transparent !important;border:none !important;box-shadow:none !important; overflow:visible;padding:16px 0 !important;text-align:left; display:grid;grid-template-columns:46px 1fr;gap:2px 18px;align-items:start; transform:none !important; } .usp-item .icon,.usp-item .emoji{ grid-row:1/span 2;width:46px;height:46px;border-radius:13px;margin:0; background:rgba(245,183,91,.09);border:1px solid rgba(245,183,91,.28); display:flex;align-items:center;justify-content:center;font-size:1.3rem; } .usp-item .icon svg{width:22px;height:22px;stroke:var(--warm)} .usp-item h3{font-size:1.08rem;margin:0;align-self:center} .usp-item p{margin:0;font-size:.93rem} /* ---------- Prozess: echte Sequenz mit Verbindungslinie ---------- */ .process-grid{grid-template-columns:1fr !important;gap:0;max-width:680px} .process-step{ background:transparent !important;border:none !important;box-shadow:none !important; padding:0 0 30px !important;position:relative;grid-column:auto !important;max-width:none !important;margin:0 !important; display:grid;grid-template-columns:52px 1fr;gap:2px 22px;align-items:start; } .process-step:hover{transform:none !important;box-shadow:none !important} .process-step:last-child{padding-bottom:0 !important} .process-step::after{ content:"";position:absolute;left:25px;top:56px;bottom:6px;width:2px; background:linear-gradient(180deg,rgba(82,198,248,.45),rgba(82,198,248,.10)); } .process-step:last-child::after{display:none} .process-step .number{ grid-row:1/span 2;width:52px;height:52px;font-size:1.15rem; background:var(--surface);border:1px solid rgba(82,198,248,.45);color:var(--accent-text); font-family:var(--font-display);font-weight:700;position:relative;z-index:1; } .process-step h4{font-size:1.1rem;align-self:center} .process-step p{grid-column:2;font-size:.92rem} /* ---------- Eyebrows: Brandvoice statt Uppercase-Tracking ---------- */ .eyebrow,.page-hero .eyebrow{ text-transform:none !important;letter-spacing:0 !important; font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--warm-text) !important; } /* ---------- FAQ: Side-Stripe weg ---------- */ .faq-item{border-left:none !important;border:1px solid rgba(255,255,255,.08);background:var(--surface)} /* ---------- Contact-Card Top-Stripe weg ---------- */ .contact-card::before{display:none !important} /* ---------- Partner-Marquee ruhiger ---------- */ .fbx-marquee-track{animation-duration:38s} /* ---------- Perpetual-Draw: Markenfarben statt Lila, langsamer ---------- */ .catalog-card::before{ background:conic-gradient(from 0deg,transparent 0deg 252deg,rgba(82,198,248,.85) 310deg,rgba(245,183,91,.85) 336deg,rgba(82,198,248,.85) 360deg); animation-duration:7s; } .review-card::before{ background:conic-gradient(from 0deg,transparent 0deg 252deg,rgba(245,183,91,.85) 310deg,rgba(82,198,248,.85) 336deg,rgba(245,183,91,.85) 360deg); animation-duration:7s; } /* ---------- Nav: aktive Unterstreichung blau→warm ---------- */ .nav.fbx-hover-menu .fbx-menu-item.active::before{background:linear-gradient(90deg,var(--accent),var(--warm))} .nav.fbx-hover-menu .fbx-menu-item:hover,.nav.fbx-hover-menu .fbx-menu-item.active{color:var(--accent-text) !important} /* ---------- CTA-Bar Trust-Zeile ---------- */ .cta-trust{margin-top:16px;font-size:.9rem;color:rgba(255,255,255,.88)} .cta-trust .stars{color:var(--warm-text);letter-spacing:2px;margin-right:6px} /* ---------- Touch-Targets Header-Icons ---------- */ @media(min-width:721px){.fbx-hicon{width:44px;height:44px}} /* ---------- Reduced Motion: gezielt statt Global-Kill ---------- Handys mit Energiesparmodus melden "reduce" — die Marken-Deko (Marquee/Galaxy) soll dann weiterlaufen, nur ruhiger. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .fbx-marquee-track{animation-duration:55s !important} .fbx-galaxy{animation-duration:70s !important} .fbx-kenburns-image{animation-duration:70s !important} .catalog-card::before,.review-card::before{animation:none !important} } /* ---------- Mobil: Marquee größer, Galaxy in den Viewport ---------- */ @media(max-width:720px){ .fbx-marquee-track{gap:38px} .fbx-marquee-track .partner-item img{height:48px} .fbx-marquee-track .partner-item span{font-size:1.12rem} .gallery-teaser{overflow-x:clip} .fbx-galaxy-scene{scale:.62;height:220px} .fbx-kenburns-scene{height:220px} } /* ---------- Kontakt: Formular + Karten mobil in den Viewport ---------- */ .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} #contactForm label{min-width:0} #contactForm input:not([type=checkbox]),#contactForm select,#contactForm textarea{min-width:0;width:100%;box-sizing:border-box} @media(max-width:560px){ .form-row-2{grid-template-columns:1fr} .contact-card{padding:24px 18px} .contact-brand{flex-wrap:wrap} .contact-logo{width:120px !important;height:120px !important} .contact-card h3,.contact-card p{overflow-wrap:anywhere} .contact-card .contact-actions{gap:10px} } /* ---------- Header-Icons: Chatbot heraushebe, WhatsApp-Glyph nachschaerfen ---------- */ .fbx-hicon.fbx-s-wa svg{width:19px !important;height:19px !important} /* Chat-Button als Pille mit Text statt reinem Icon-Quadrat — hebt sich bewusst von den Social-Icons ab, damit sofort klar ist: das ist der Chat-Assistent. */ .fbx-hicon.fbx-s-bot{ width:auto !important; padding:0 14px 0 10px !important; gap:6px; border-radius:999px !important; background:linear-gradient(135deg,var(--warm),#e08a2e) !important; color:var(--warm-ink) !important; box-shadow:0 4px 14px rgba(245,183,91,.55) !important; animation:fbxBotPulse 2.6s ease-in-out infinite; } .fbx-hicon.fbx-s-bot svg{flex-shrink:0} .fbx-bot-label{font-size:.8rem;font-weight:700;white-space:nowrap;letter-spacing:.01em} .fbx-hicon.fbx-s-bot:hover{animation-play-state:paused} @keyframes fbxBotPulse{ 0%,100%{box-shadow:0 4px 14px rgba(245,183,91,.55)} 50%{box-shadow:0 4px 22px rgba(245,183,91,.9)} } @media(max-width:480px){ .fbx-hicon.fbx-s-bot{width:38px !important;padding:0 !important} .fbx-bot-label{display:none} } /* ---------- Kontaktkarten: einheitlicher Logo-Rahmen (beide Partner gleich) ---------- */ .contact-logo,.contact-logo-wide{ width:156px !important;height:156px !important; object-fit:contain !important; background:rgba(255,255,255,.94) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:16px !important; padding:14px !important; box-sizing:border-box !important; } @media(max-width:560px){ .contact-logo,.contact-logo-wide{width:96px !important;height:96px !important;padding:10px !important} } /* Checkbox-Label: Text als EIN Flex-Item, sonst zerlegt Flexbox jeden Textknoten zwischen den Inline-Elementen (Link) in eigene, schmale Zeilen. */ #contactForm label span{flex:1 1 auto;min-width:0} #contactForm label input[type=checkbox]{ width:22px !important;height:22px !important; flex:0 0 22px !important; margin-top:0 !important; cursor:pointer; accent-color:var(--accent-text); } #contactForm label:has(input[type=checkbox]){gap:12px} @media(prefers-reduced-motion:reduce){ .fbx-hicon.fbx-s-bot{animation-duration:6s} } /* ---------- Mitarbeiter-Login als Header-Icon (statt Nav-Eintrag) ---------- */ .fbx-hicon.fbx-s-login{background:linear-gradient(135deg,var(--accent),var(--accent-hover))} /* ---------- Rand-Glow: fuellt die leeren Seitenraender auf breiten Monitoren ---------- Ergaenzt das bestehende Wasserzeichen (body::before) um zwei dezente Farbflaechen (Marken-Blau + Warm-Akzent) links/rechts ausserhalb des Inhaltsbereichs. Rein CSS, keine neuen DOM-Elemente noetig — nur auf breiten Bildschirmen sichtbar. */ @media(min-width:1500px){ body::before{ background-image: url("../brand/logo-watermark.png"), radial-gradient(38% 42% at 2% 20%,rgba(82,198,248,.62) 0%,transparent 72%), radial-gradient(34% 38% at 6% 84%,rgba(245,183,91,.5) 0%,transparent 72%), radial-gradient(38% 42% at 98% 26%,rgba(245,183,91,.55) 0%,transparent 72%), radial-gradient(34% 38% at 94% 90%,rgba(82,198,248,.62) 0%,transparent 72%) !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:min(72vw,900px) auto,100% 100%,100% 100%,100% 100%,100% 100% !important; } } /* ---------- Promo-Popup (Test, nur Startseite) ---------- Gleiches Overlay-Pattern wie .lightbox (fixed/inset/blur), Panel als .service-card-artiger Kasten mit warmem Akzent-Rahmen (Promo = kurzzeitig erlaubter hoeherer Warm-Anteil trotz DESIGN.md-Regel "warm <=10%", weil zeitlich begrenzt und einzelnes Element, keine Flaechenfarbe). */ body.promo-popup-open{overflow:hidden} .promo-popup{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.86);backdrop-filter:blur(8px)} .promo-popup[hidden]{display:none} .promo-popup-backdrop{position:absolute;inset:0} .promo-popup-panel{position:relative;z-index:1;width:min(420px,92vw);background:var(--surface-raised,var(--surface));border:1px solid var(--warm);border-radius:var(--radius-card);padding:36px 32px 32px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:promoPopIn .4s var(--ease-out,cubic-bezier(.25,1,.5,1))} @keyframes promoPopIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .promo-popup-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border:0;border-radius:999px;background:var(--accent);color:var(--primary);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-card)} .promo-popup-close:hover{background:var(--accent-hover)} .promo-popup-panel .eyebrow{display:block;margin-bottom:6px} .promo-popup-panel h3{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--white);margin:0 0 12px;text-wrap:balance} .promo-popup-panel h3 .hl-warm{color:var(--warm-text)} .promo-popup-panel p{color:var(--text-muted);font-size:.95rem;margin:0 0 22px} .promo-popup-panel .btn{width:100%;justify-content:center} .promo-popup-countdown{font-size:.72rem;color:var(--text-muted);margin-top:14px;text-align:center} .promo-popup-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.08);border-radius:0 0 var(--radius-card) var(--radius-card);overflow:hidden} .promo-popup-bar span{display:block;height:100%;width:100%;background:var(--warm);transform-origin:left;animation:promoCountdown 20s linear forwards} @keyframes promoCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}} /* ---- Saisonale Popup-Animationen (FX-Layer hinter dem Text, z-index:-1 im Panel-Stacking-Context; Panel hat position:relative + z-index:1). ---- */ .promo-popup-fx{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius-card);pointer-events:none;z-index:-1} .promo-popup-fx span{position:absolute;display:block;border-radius:50%} /* Winter: fallende Schneeflocken + kuehler Glow von oben */ .promo-popup-fx-snow{background:radial-gradient(130% 90% at 50% 0%,rgba(82,198,248,.16),transparent 62%)} .promo-popup-fx-snow span{top:-12%;background:radial-gradient(circle at 35% 35%,#fff,rgba(255,255,255,.5));box-shadow:0 0 5px rgba(255,255,255,.7);animation:promoSnowFall linear infinite} @keyframes promoSnowFall{0%{transform:translate(0,-12%);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translate(var(--drift,0),820%);opacity:0}} /* Sommer: aufsteigende warme Funken + pulsierender Sonnen-Glow */ .promo-popup-fx-sun{background:linear-gradient(180deg,rgba(245,183,91,.28),rgba(245,183,91,.04) 55%,transparent 80%)} .promo-popup-fx-sun::before{content:"";position:absolute;top:-58px;left:50%;width:190px;height:190px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,210,130,.55),rgba(245,183,91,.25) 45%,transparent 70%);animation:promoSunGlow 4.5s ease-in-out infinite} .promo-popup-sunrays{position:absolute;top:-70px;left:50%;width:280px;height:280px;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg,rgba(255,214,140,.35) 0deg 4deg,transparent 4deg 18deg);border-radius:50%;animation:promoSunSpin 22s linear infinite;opacity:.55} .promo-popup-fx-sun span{bottom:-12%;background:radial-gradient(circle at 40% 40%,#fff4d6,var(--warm));box-shadow:0 0 8px rgba(245,183,91,.85);animation:promoSparkRise linear infinite} @keyframes promoSunSpin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}} @keyframes promoSparkRise{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:.9}80%{opacity:.7}100%{transform:translate(var(--drift,0),-820%) scale(.4);opacity:0}} @keyframes promoSunGlow{0%,100%{opacity:.45;transform:translateX(-50%) scale(1)}50%{opacity:.8;transform:translateX(-50%) scale(1.18)}} @media(prefers-reduced-motion:reduce){ .promo-popup-panel{animation:none} .promo-popup-bar span{animation-duration:20s} .promo-popup-fx{display:none} } /* ================================================================ HELLMODUS / LIGHT THEME (v1, 2026-07) Wird per aktiviert (Umschalt-Button, main.js). STANDARD BLEIBT DUNKEL: ohne data-theme greift NICHTS aus diesem Block. Der Wert wird in localStorage('fb-theme') gemerkt. Spezifitaet-Hinweis: :root[data-theme="light"] (0,3,0) schlaegt sowohl den normalen :root-Block als auch den @supports(oklch)-:root-Block (beide 0,1,0). Marken-Akzent (--accent, blau) und --warm (orange) bleiben UNVERAENDERT. Bewusst DUNKEL belassen (Design-Inseln, nutzen --primary/--primary-light, die hier dunkel bleiben): Hero (.hero), Unterseiten-Hero (.page-hero), Footer (.footer), CTA-Bar (.cta-bar), Cookie-Box, Back-to-Top, Chat-Widget (.fbbot-*), Lightbox-Overlay, Foto-Overlays der Galerie. Deren weisse Schrift bleibt dort lesbar — daher werden diese Stellen NICHT auf dunkel umgestellt. ================================================================ */ :root[data-theme="light"]{ /* Grundflaechen invertiert: dunkel -> hell */ --bg:#ffffff; --surface:#f1f5f9; --surface-raised:#e6edf5; --white:#fff; /* bleibt weiss — z.B. Button-Schrift auf blau/accent */ --text:#0f1b2a; /* dunkle Schrift */ --text-muted:#475569; --gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-400:#64748b;--gray-600:#475569; --primary:#0f1b2a; /* DUNKEL BEHALTEN: Hero/Footer/CTA bleiben dunkle Inseln */ /* Schatten abschwaechen — dunkle Schatten wirken auf hell sonst zu hart */ --shadow-card:0 4px 20px rgba(0,0,0,.08); --shadow-hover:0 12px 40px rgba(0,0,0,.15); } /* ---- Vordergrund: fest verdrahtetes WEISS, das jetzt auf HELLEM Grund stuende (weiss auf weiss = unsichtbar), gezielt auf dunkle Schrift stellen. NICHT global --white drehen — Buttons brauchen weiterhin weisse Schrift! ---- */ :root[data-theme="light"] .section-title, :root[data-theme="light"] .faq-q, :root[data-theme="light"] .usp-item h3, :root[data-theme="light"] .guide-content h3, :root[data-theme="light"] .service-card, :root[data-theme="light"] .service-card h3, :root[data-theme="light"] .contact-brand h3, :root[data-theme="light"] .gallery-teaser-card h3, :root[data-theme="light"] .contact-cta h2, :root[data-theme="light"] .fbx-auth-panel h3, :root[data-theme="light"] .feature, :root[data-theme="light"] .feature h3, :root[data-theme="light"] .product-card, :root[data-theme="light"] .catalog-card, :root[data-theme="light"] .contact-card, :root[data-theme="light"] .product-card h3, :root[data-theme="light"] .catalog-card h3, :root[data-theme="light"] .contact-card h3, :root[data-theme="light"] .promo-popup-panel h3, :root[data-theme="light"] .header-logo{ color:var(--text) !important; } /* .header-logo small (dezenter Zusatz, falls vorhanden) */ :root[data-theme="light"] .header-logo small{color:var(--text-muted)} /* ---- Fest verdrahtete DUNKEL-Hintergruende/Rahmen sichtbarer Panels -> hell ---- */ /* Header: heller, halbtransparenter Hintergrund + dezenter Rahmen. (Uebersteuert die autoritative Runde-7-Regel mit hoeherer Spezifitaet + !important.) */ :root[data-theme="light"] .header{ background:rgba(255,255,255,.85) !important; border-bottom:1px solid rgba(0,0,0,.08) !important; } /* Mobile-Navigation (aufgeklapptes Hover-Menu) hell statt dunkel. Die Menue-Eintraege nutzen color:var(--text) -> werden automatisch dunkel/lesbar. */ :root[data-theme="light"] .nav.fbx-hover-menu.open{ background:rgba(255,255,255,.98) !important; border-top-color:rgba(0,0,0,.08) !important; box-shadow:0 20px 40px rgba(0,0,0,.15) !important; } /* Standalone Hover-Menu-Pille (Demo) — nur falls ausserhalb .nav genutzt */ :root[data-theme="light"] .fbx-hover-menu{background:rgba(255,255,255,.6)} /* Alte .mobile-menu-Variante (Legacy, auf einigen Seiten noch im DOM) */ :root[data-theme="light"] .mobile-menu{background:rgba(255,255,255,.98)} :root[data-theme="light"] .mobile-menu a, :root[data-theme="light"] .mobile-menu .phone-link{color:var(--text)} /* Galerie-Filter-Pille (gallery.html): dunkle Pille -> hell, Hover lesbar */ :root[data-theme="light"] .fbx-gal-filter{ background:rgba(255,255,255,.7); border-color:rgba(56,189,248,.28); box-shadow:0 8px 32px rgba(0,0,0,.10); } :root[data-theme="light"] .fbx-gal-tab:hover{color:var(--accent-dark);background:rgba(56,189,248,.10)} /* ================================================================ Marken-Farben als TEXT im Hellmodus --accent (#52c6f8) und --warm (#f5b75b) sind helle Farben. Als Flaeche (Knopf, Kachel, Symbol) bleiben sie unveraendert - das ist die Marke. Als SCHRIFT auf hellem Grund ergaben sie nur 1,6-2,0:1 statt der noetigen 4,5:1; Links, Ziffern, Namen und Rubriken waren praktisch nicht lesbar. Deshalb gibt es --accent-text / --warm-text: im Dunkelmodus identisch zur Markenfarbe, im Hellmodus dunkler, aber erkennbar dieselbe Farbfamilie. ================================================================ */ :root[data-theme="light"]{ --accent-text:#10658f; /* auf Weiss 6,4:1, auf --surface 5,8:1 */ --warm-text:#8a5a10; /* auf Weiss 5,9:1, auf --surface 5,3:1 */ } /* In den bewusst DUNKEL bleibenden Bereichen gilt weiter die helle Markenfarbe - dort waere dunkelblauer Text auf dunklem Grund genauso unlesbar. Die Variable wird einfach lokal zurueckgesetzt und vererbt sich an alles darunter. */ :root[data-theme="light"] .hero, :root[data-theme="light"] .page-hero, :root[data-theme="light"] .footer, :root[data-theme="light"] .cta-bar, :root[data-theme="light"] .cookie-box, :root[data-theme="light"] #cookieBox, :root[data-theme="light"] .fbbot-panel, :root[data-theme="light"] .fbbot-fab, :root[data-theme="light"] .lightbox, :root[data-theme="light"] .back-to-top, :root[data-theme="light"] .fbx-gal-label, :root[data-theme="light"] .gallery-item .overlay{ --accent-text:var(--accent); --warm-text:var(--warm); } /* Stellen mit !important brauchen keine Sonderbehandlung: dort steht jetzt ebenfalls die Variable, die sich je Erscheinungsbild selbst aufloest. Sterne: Gold (#fbbf24) auf hellem Grund ergab nur 1,5:1. Dunkleres Bernstein bleibt als Bewertungsstern erkennbar und ist lesbar. In den dunklen Bereichen (Startbild, Fusszeile) wird die Variable oben ohnehin zurueckgesetzt. */ :root[data-theme="light"]{--stars-color:#b45309} :root[data-theme="light"] .hero, :root[data-theme="light"] .page-hero, :root[data-theme="light"] .footer, :root[data-theme="light"] .cta-bar{--stars-color:#fbbf24} /* ---- Nachtrag: Stellen, die es erst betrifft, seit der Hellmodus auf ALLEN Seiten laeuft (vorher nur Startseite und Bewertungen). Alle drei waren im Hellmodus praktisch unlesbar. ---- */ /* Schlichte Kopfnavigation (404.html): weiss auf weiss, Kontrast 1:1 */ :root[data-theme="light"] .nav a{color:var(--text)} :root[data-theme="light"] .nav a:hover, :root[data-theme="light"] .nav a.active{color:var(--accent-dark)} /* Aufmass-Assistent: Ueberschrift und Kachel-Beschriftungen standen auf var(--white), die Karten darunter werden im Hellmodus aber hell. */ :root[data-theme="light"] .wizard-title, :root[data-theme="light"] .type-card .tc-label{color:var(--text)} /* Ratgeber-Karten: Akzentblau (#52c6f8) auf heller Karte ergibt nur 1,8:1. Die dunklere Variante des Markenblaus bleibt erkennbar blau und ist lesbar. */ :root[data-theme="light"] .guide-card-body h2, :root[data-theme="light"] .guide-card-link{color:var(--accent-dark)} /* Fliesstext in Karten lag bei 4,34:1, knapp unter der Anforderung von 4,5:1 */ :root[data-theme="light"] .guide-card-body p{color:var(--text)} /* Inhaltsverzeichnis am Rand: gleiches Problem, ebenfalls 4,34:1 */ :root[data-theme="light"] .guide-toc a, :root[data-theme="light"] .guide-toc nav a{color:var(--text)} /* Auth-Demo-Karte (eine Demo-Seite): Rahmen/Feldfarben fuer hell */ :root[data-theme="light"] .fbx-auth-card{border-color:rgba(0,0,0,.10)} :root[data-theme="light"] .fbx-auth-input{background:#fff;color:var(--text)} /* ---- Umschalt-Button (Sonne/Mond) — Groesse/Form wie die anderen .fbx-hicon ---- */ .fbx-hicon.fbx-s-theme{background:linear-gradient(135deg,#334155,#1e293b);color:#fff} .fbx-hicon.fbx-s-theme svg{stroke:currentColor;fill:none} :root[data-theme="light"] .fbx-hicon.fbx-s-theme{ background:linear-gradient(135deg,var(--warm),#e08a2e); color:var(--warm-ink); } /* ================================================================ DESIGN V2 — Vorher/Nachher-Bildvergleich ================================================================ */ .fbx-before-after-intro{text-align:center} .fbx-before-after-figure{width:min(100%,960px);margin:0 auto} .fbx-before-after{ --position:50%; position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10; border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-card); background:var(--surface);box-shadow:var(--shadow-card); cursor:ew-resize;touch-action:none;user-select:none; } .fbx-before-after-image{ position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;pointer-events:none; } .fbx-before-after-before{z-index:1} .fbx-before-after-after{ z-index:2;clip-path:inset(0 0 0 var(--position)); } .fbx-before-after-label{ position:absolute;top:16px;z-index:4;padding:7px 12px;border-radius:var(--radius-btn); background:rgba(6,16,28,.78);color:#fff;font-size:.82rem;font-weight:700; line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none; } .fbx-before-after-label-before{left:16px} .fbx-before-after-label-after{right:16px} .fbx-before-after-handle{ position:absolute;top:0;bottom:0;left:var(--position);z-index:5;width:44px; display:flex;align-items:center;justify-content:center;transform:translateX(-50%); color:var(--warm-ink);outline:none; } .fbx-before-after-handle::before{ content:"";position:absolute;top:0;bottom:0;left:50%;width:3px; transform:translateX(-50%);background:var(--accent); box-shadow:0 0 0 1px rgba(6,16,28,.35),0 0 18px rgba(82,198,248,.45); } .fbx-before-after-handle span{ position:relative;display:grid;place-items:center;width:44px;height:44px; border:2px solid #fff;border-radius:50%;background:var(--accent); box-shadow:var(--shadow-card);font-size:1.25rem;font-weight:800;line-height:1; } .fbx-before-after-handle:focus-visible span{ outline:3px solid var(--warm);outline-offset:4px; } .fbx-before-after-figure figcaption{ margin-top:14px;color:var(--text-muted);font-size:.92rem;text-align:center; } :root[data-theme="light"] .fbx-before-after{ border-color:rgba(15,27,42,.12); } @media(max-width:720px){ .fbx-before-after{aspect-ratio:4/3} .fbx-before-after-label{top:10px;padding:6px 9px;font-size:.76rem} .fbx-before-after-label-before{left:10px} .fbx-before-after-label-after{right:10px} }