/* =================================================================== FHM Parts GmbH – Shared Stylesheet (v2) Light = Standard, Dark via =================================================================== */ :root{ /* Brand (theme-unabhängig) */ --red:#b5202d;--red-dark:#931a25;--red-soft:#ff8a93; --navy:#2d3e50;--navy-deep:#1c2733; /* LIGHT THEME tokens */ --bg:#ffffff; --bg-alt:#f4f7fa; --bg-blue:#eaf0f6; --surface:#ffffff; --ink:#1f2a35; --heading:#2d3e50; --muted:#5d6b78; --line:#e2e7ec; --header-bg:#ffffff; --footer-bg:#1c2733; --footer-ink:#aeb9c4; --shadow:0 8px 34px rgba(28,39,51,.14); --shadow-sm:0 2px 10px rgba(28,39,51,.08); --logo-opacity:1; --radius:6px;--maxw:1180px; } html[data-theme="dark"]{ --bg:#10171e; --bg-alt:#161f29; --bg-blue:#1d2935; --surface:#19232e; --ink:#d7dee5; --heading:#ffffff; --muted:#9aa7b3; --line:#2a3744; --header-bg:#131b23; --footer-bg:#0c1116; --footer-ink:#9aa7b3; --shadow:0 8px 34px rgba(0,0,0,.45); --shadow-sm:0 2px 10px rgba(0,0,0,.4); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden; transition:background .35s ease,color .35s ease} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;padding:.85rem 1.7rem;border-radius:var(--radius);transition:.25s;cursor:pointer;border:2px solid transparent;min-height:44px;text-align:center} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(181,32,45,.35)} .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff} .btn-ghost:hover{background:#fff;color:var(--navy)} .btn-outline{border-color:var(--red);color:var(--red)} .btn-outline:hover{background:var(--red);color:#fff} .btn-white{background:#fff;color:var(--red)}.btn-white:hover{background:var(--navy);color:#fff} .btn-line{border-color:#fff;color:#fff}.btn-line:hover{background:rgba(255,255,255,.15)} /* topbar */ .topbar{background:var(--navy-deep);color:#cfd8e0;font-size:.82rem} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;flex-wrap:wrap;gap:1rem} .topbar a{color:#cfd8e0;transition:.2s}.topbar a:hover{color:#fff} .topbar .tb-left span{margin-right:1.4rem;white-space:nowrap} .topbar i{color:var(--red);font-style:normal;margin-right:.4rem;font-weight:700} /* header */ header.site{position:sticky;top:0;z-index:60;background:var(--header-bg);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .35s,border-color .35s} header.site.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.10)} .site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:86px;gap:1.5rem} .brand{display:flex;align-items:center} .brand img{height:52px;transition:opacity .35s} .brand .logo-light{display:block} .brand .logo-dark{display:none} html[data-theme="dark"] .brand .logo-light{display:none} html[data-theme="dark"] .brand .logo-dark{display:block} nav.main ul{display:flex;list-style:none;gap:2rem;align-items:center} nav.main a{font-weight:600;font-size:.97rem;color:var(--heading);padding:.4rem 0;position:relative} nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:.25s} nav.main a:hover::after,nav.main a.active::after{width:100%} .nav-cta{display:flex;align-items:center;gap:1.1rem} /* ===== Theme toggle (Schiebeschalter, nur Icons) ===== */ .theme-toggle{position:relative;width:60px;height:30px;border-radius:30px;border:1px solid var(--line); background:var(--bg-blue);cursor:pointer;padding:0;flex:none;transition:background .35s,border-color .35s} .theme-toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%; background:var(--red);box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.4,1.3,.5,1); display:flex;align-items:center;justify-content:center;color:#fff} html[data-theme="dark"] .theme-toggle .knob{transform:translateX(30px)} .theme-toggle .knob svg{width:14px;height:14px} .theme-toggle .icon-sun,.theme-toggle .icon-moon{display:none} .theme-toggle .icon-sun{display:block} /* light aktiv -> Sonne im Knob */ html[data-theme="dark"] .theme-toggle .icon-sun{display:none} html[data-theme="dark"] .theme-toggle .icon-moon{display:block} /* statische Hintergrund-Icons links/rechts */ .theme-toggle .bg-ic{position:absolute;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--muted);opacity:.6} .theme-toggle .bg-sun{left:7px}.theme-toggle .bg-moon{right:7px} .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px} .burger span{width:26px;height:3px;background:var(--heading);border-radius:2px;transition:.3s} /* sections */ section{padding:5.5rem 0} .sec-head{max-width:42rem;margin-bottom:3rem} .sec-head.center{margin:0 auto 3rem;text-align:center} .kicker{color:var(--red);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:.8rem} h2.sec{font-size:2.25rem;font-weight:800;color:var(--heading);letter-spacing:-.5px;line-height:1.15} .sec-head p{color:var(--muted);font-size:1.08rem;margin-top:1rem} /* reveal */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* footer */ footer.site{background:var(--footer-bg);color:var(--footer-ink);padding:4rem 0 0;transition:background .35s} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem} footer .flogo{height:46px;margin-bottom:1.2rem} footer p{font-size:.92rem;line-height:1.7} footer h4{color:#fff;font-size:1rem;margin-bottom:1.2rem;font-weight:700} footer ul{list-style:none;display:grid;gap:.7rem} footer ul a{font-size:.92rem;transition:.2s}footer ul a:hover{color:#fff;padding-left:4px} .fbar{border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;align-items:center} .fbar a:hover{color:#fff} .powered{display:flex;align-items:center;gap:.55rem;font-size:.8rem;color:var(--footer-ink)} .powered .ley-badge{background:#fff;border-radius:6px;padding:3px 5px;display:flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.25)} .powered .ley-badge img{height:26px;display:block} .powered a{display:flex;align-items:center;gap:.55rem;transition:.2s} .powered a:hover{color:#fff} .powered a:hover .ley-badge{transform:translateY(-1px)} /* App-Store-Badges */ .app-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem} .store-badge{display:inline-flex;align-items:center;gap:.55rem;background:#000;border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:.5rem .9rem;transition:.2s;min-height:48px} .store-badge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.55);box-shadow:0 6px 18px rgba(0,0,0,.4)} .store-badge svg{flex:none} .store-badge .txt{display:flex;flex-direction:column;line-height:1.05;color:#fff} .store-badge .txt small{font-size:.6rem;letter-spacing:.02em;opacity:.9;text-transform:none} .store-badge .txt b{font-size:1.02rem;font-weight:600;letter-spacing:.01em} .footer-app-h{color:#fff;font-size:.95rem;font-weight:700;margin-top:1.4rem} /* responsive nav */ @media(max-width:980px){ nav.main,.nav-cta .btn{display:none}.burger{display:flex} nav.main.open{display:block;position:absolute;top:86px;left:0;right:0;background:var(--header-bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)} nav.main.open ul{flex-direction:column;gap:0;padding:.5rem 24px} nav.main.open li{border-bottom:1px solid var(--line)} nav.main.open a{display:block;padding:1rem 0} .fgrid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .fgrid{grid-template-columns:1fr} h2.sec{font-size:1.7rem}.topbar .tb-left{display:none} /* globaler Overflow-Schutz */ html,body{overflow-x:hidden} .wrap{padding:0 18px} /* Aktionsbuttons zentrieren (alle Seiten) */ .actions{justify-content:center} /* Footer zentriert + App-Badges + powered-by */ .fbar{flex-direction:column;text-align:center;gap:1rem;align-items:center} .powered{justify-content:center} .app-badges{justify-content:center} .footer-app-h{text-align:center} .fgrid>div:first-child{text-align:center} .fgrid>div:first-child .flogo{margin-left:auto;margin-right:auto} /* Page-Hero (Unterseiten) kompakter */ .page-hero{padding:2.4rem 0} .page-hero h1{font-size:1.8rem} /* Legal-Inhalte */ .legal{padding:2.6rem 0} .legal h2{font-size:1.2rem} /* Kontaktformular: volle Breite, Button zentriert */ .form-section{padding:2.6rem 0} .form-card{padding:1.4rem} .form-card .btn{width:100%;justify-content:center} } @media(max-width:380px){ .opt-grid{grid-template-columns:1fr} } /* ===== Subpage / Legal ===== */ /* shared contact-info (auch auf Unterseiten genutzt) */ .contact-info{display:grid;gap:1.4rem;align-content:start} .ci{display:flex;gap:1rem;align-items:flex-start} .ci .ic{flex:none;width:46px;height:46px;border-radius:8px;background:var(--bg-blue);display:flex;align-items:center;justify-content:center;color:var(--navy);transition:.25s} html[data-theme="dark"] .ci .ic{color:#cfe0f0} .ci:hover .ic{background:var(--red);color:#fff} .ci b{display:block;color:var(--heading);font-size:1rem;margin-bottom:.15rem} .ci span,.ci a{color:var(--muted);font-size:.96rem} .ci a:hover{color:var(--red)} .map{border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:280px} .map iframe{width:100%;height:100%;border:0;min-height:280px;display:block} .page-hero{background:linear-gradient(120deg,var(--navy),var(--navy-deep));color:#fff;padding:3.5rem 0;position:relative;overflow:hidden} .page-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(181,32,45,.4),transparent 65%)} .page-hero .wrap{position:relative;z-index:2} .page-hero h1{font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:-.5px} .breadcrumb{font-size:.85rem;color:#aab6c2;margin-bottom:.7rem} .breadcrumb a{color:#cfd8e0}.breadcrumb a:hover{color:#fff} .legal{padding:4rem 0;background:var(--bg)} .legal .wrap{max-width:880px} .legal h2{font-size:1.4rem;color:var(--heading);margin:2.2rem 0 .8rem;font-weight:700;scroll-margin-top:120px} .legal h2:first-child{margin-top:0} .legal h3{font-size:1.08rem;color:var(--heading);margin:1.5rem 0 .5rem;font-weight:700} .legal p,.legal li{color:var(--ink);font-size:.97rem;margin-bottom:.9rem;line-height:1.75} .legal ul,.legal ol{margin:0 0 1rem 1.3rem} .legal li{margin-bottom:.45rem} .legal strong{color:var(--heading)} .legal a{color:var(--red);font-weight:600} .legal .muted{color:var(--muted);font-size:.88rem} .legal hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0} .toc{background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.8rem;margin-bottom:2.5rem} .toc b{display:block;color:var(--heading);margin-bottom:.7rem} .toc ol{margin:0 0 0 1.2rem;columns:2;gap:2rem} .toc a{color:var(--ink);font-weight:500}.toc a:hover{color:var(--red)} @media(max-width:560px){.toc ol{columns:1}} /* ===== Kontaktformular ===== */ .form-section{padding:4rem 0;background:var(--bg-alt)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start} .form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:2.2rem;box-shadow:var(--shadow-sm)} .field{margin-bottom:1.1rem} .field label{display:block;font-weight:600;color:var(--heading);font-size:.9rem;margin-bottom:.4rem} .field label .req{color:var(--red)} .field input,.field select,.field textarea{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:.95rem;font-family:inherit;transition:.2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(181,32,45,.12)} .field textarea{min-height:130px;resize:vertical} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .check{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--muted)} .check input{width:auto;margin-top:.25rem;accent-color:var(--red);flex:none} .form-note{font-size:.8rem;color:var(--muted);margin-top:.8rem} .form-ok{display:none;background:rgba(40,160,90,.12);border:1px solid rgba(40,160,90,.4);color:#1c7a45;border-radius:8px;padding:1rem;margin-bottom:1.2rem;font-size:.92rem} html[data-theme="dark"] .form-ok{color:#6fd99a} .form-err{display:none;background:rgba(181,32,45,.10);border:1px solid rgba(181,32,45,.4);color:#b5202d;border-radius:8px;padding:1rem;margin-bottom:1.2rem;font-size:.92rem} html[data-theme="dark"] .form-err{color:#e8505b} .btn[aria-busy="true"]{opacity:.7;pointer-events:none;position:relative} .btn .spin{display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:btnspin .7s linear infinite} .btn[aria-busy="true"] .spin{display:inline-block} @keyframes btnspin{to{transform:rotate(360deg)}} .cfg-prefill{display:none;background:var(--bg-blue);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.4rem;font-size:.9rem} .cfg-prefill b{color:var(--heading)} .cfg-prefill .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem} .cfg-prefill .chip{background:var(--red);color:#fff;font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:30px} @media(max-width:860px){.form-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}