/* ============================================================ KFZ Service Oberbilk — luxury minimalist system Dark sophisticated base · brass accent · editorial serif Theme / accent / display switched via [data-*] on ============================================================ */ /* ---------- tokens ---------- */ :root{ --maxw:1240px; --gut:clamp(20px,5vw,64px); --ease:cubic-bezier(.22,.61,.36,1); /* accent — brass (default) */ --accent:#C6A15B; --accent-2:#DBBA78; --accent-soft:rgba(198,161,91,.13); --accent-line:rgba(198,161,91,.34); --on-accent:#15110A; /* dark theme (default) */ --bg:#0D0E10; --bg-2:#121417; --surface:#16191D; --surface-2:#1C2026; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.15); --ink:#F2EFE8; --ink-2:rgba(242,239,232,.64); --ink-3:rgba(242,239,232,.40); --shadow:0 34px 70px -24px rgba(0,0,0,.65); --img-bg:#1a1d22; /* display type */ --font-display:"Cormorant Garamond",Georgia,serif; --font-ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif; --display-weight:600; --display-tracking:-.005em; --display-scale:1; --radius-ui:8px; --radius-img:14px; --radius-soft:16px; } [data-theme="light"]{ --bg:#FFFFFF; --bg-2:#F4F6FB; --surface:#FFFFFF; --surface-2:#F7F9FD; --line:rgba(18,30,60,.10); --line-2:rgba(18,30,60,.16); --ink:#13182A; --ink-2:rgba(19,24,42,.64); --ink-3:rgba(19,24,42,.44); --shadow:0 34px 70px -30px rgba(20,32,68,.20); --img-bg:#e8edf6; } [data-accent="steel"]{ --accent:#5E8FB8;--accent-2:#84AED2;--accent-soft:rgba(94,143,184,.14); --accent-line:rgba(94,143,184,.36);--on-accent:#081016; } [data-accent="signal"]{ --accent:#E2552B;--accent-2:#F1764F;--accent-soft:rgba(226,85,43,.14); --accent-line:rgba(226,85,43,.36);--on-accent:#1a0905; } [data-accent="logo"]{ --accent:#21458F;--accent-2:#2E5BC4;--accent-soft:rgba(33,69,143,.10); --accent-line:rgba(33,69,143,.30);--on-accent:#FFFFFF; } [data-theme="dark"][data-accent="logo"]{ --accent:#5A86D6;--accent-2:#84A6E6;--accent-soft:rgba(90,134,214,.14); --accent-line:rgba(90,134,214,.34);--on-accent:#0a1020; } [data-display="sans"]{ --font-display:"Hanken Grotesk",system-ui,sans-serif; --display-weight:700;--display-tracking:-.03em;--display-scale:.82; } /* ---------- reset ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-ui);background:var(--bg);color:var(--ink); line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased; overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease); } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ::selection{background:var(--accent);color:var(--on-accent)} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);width:100%} .sec{padding:clamp(72px,11vw,148px) 0;position:relative} .sec-tight{padding:clamp(48px,7vw,88px) 0} /* ---------- type ---------- */ .kicker{ display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui); font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);margin-bottom:22px; } .kicker::before{content:"";width:26px;height:1px;background:var(--accent-line)} .kicker.center{justify-content:center} h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight); letter-spacing:var(--display-tracking);line-height:1.04;color:var(--ink)} h1{font-size:calc(clamp(40px,5.8vw,84px)*var(--display-scale));line-height:1.02;overflow-wrap:break-word} h2{font-size:calc(clamp(33px,4.6vw,60px)*var(--display-scale));line-height:1.06} h3{font-size:calc(clamp(21px,2vw,26px)*var(--display-scale));line-height:1.15} .lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:54ch;line-height:1.62} .sec-head{max-width:780px} .sec-head.center{margin-inline:auto;text-align:center} .sec-head h2{margin-bottom:18px} .sec-head p{color:var(--ink-2);font-size:clamp(16px,1.4vw,18.5px);max-width:60ch} .sec-head.center p{margin-inline:auto} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px; border-radius:var(--radius-ui);font-family:var(--font-ui);font-weight:600;font-size:14.5px; letter-spacing:.01em;border:1px solid transparent;transition:.32s var(--ease); white-space:nowrap} .btn svg{width:17px;height:17px;transition:transform .32s var(--ease)} .btn-primary{background:var(--accent);color:var(--on-accent)} .btn-primary:hover{background:var(--accent-2)} .btn-primary:hover svg{transform:translateX(4px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)} .btn-ghost:hover svg{transform:translateX(4px)} .btn-block{width:100%;justify-content:center} /* ---------- header ---------- */ .hdr{position:fixed;inset:0 0 auto;z-index:80;transition:.4s var(--ease)} .hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px; height:84px;border-bottom:1px solid transparent;transition:.4s var(--ease)} .hdr.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)} .hdr.scrolled .hdr-in{height:70px;border-color:var(--line)} .brand{display:flex;align-items:center;gap:13px;flex-shrink:0} .brand-logo{height:36px;display:flex;align-items:center;flex-shrink:0} .brand-logo img{height:100%;width:auto;display:block} [data-theme="dark"] .brand-logo img{filter:brightness(0) invert(1)} .brand-mark{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0; border:1px solid var(--accent-line);border-radius:var(--radius-ui);color:var(--accent); position:relative} .brand-mark svg{width:21px;height:21px} .brand-txt{display:none;flex-direction:column;line-height:1.1} .brand-txt b{font-family:var(--font-ui);font-weight:700;font-size:15.5px;letter-spacing:.02em;white-space:nowrap} .brand-txt span{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap} .nav{display:flex;align-items:center;gap:34px} .nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s;position:relative} .nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px; background:var(--accent);transition:width .3s var(--ease)} .nav a:hover{color:var(--ink)} .nav a:hover::after{width:100%} .hdr-cta{display:flex;align-items:center;gap:18px;flex-shrink:0} .hdr-tel{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)} .hdr-tel svg{width:16px;height:16px;color:var(--accent)} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:var(--radius-ui);background:transparent;color:var(--ink)} .burger svg{width:20px;height:20px} /* mobile menu */ .mmenu{position:fixed;inset:0;z-index:90;background:var(--bg);padding:24px var(--gut); display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .45s var(--ease); visibility:hidden} .mmenu.open{transform:none;visibility:visible} .mm-top{display:flex;align-items:center;justify-content:space-between;height:60px} .mm-x{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2); border-radius:var(--radius-ui);background:transparent;color:var(--ink)} .mm-x svg{width:20px;height:20px} .mmenu nav{display:flex;flex-direction:column;gap:6px;margin-top:40px} .mmenu nav a{font-family:var(--font-display);font-size:34px;font-weight:600;padding:10px 0; border-bottom:1px solid var(--line)} .mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:20px} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;padding-top:clamp(118px,12vw,154px); padding-bottom:clamp(58px,8vw,96px);background:linear-gradient(180deg,#f7f9fd 0%,var(--bg) 82%)} .hero::before{content:"";position:absolute;inset:0 0 15%;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 42%,rgba(255,255,255,.44) 100%), url("assets/services/reparaturen.webp?v=1") center/cover no-repeat; opacity:.55;mask-image:linear-gradient(180deg,#000 0%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%)} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); gap:clamp(34px,5vw,76px);align-items:center} .hero-copy{max-width:760px} .hero-eyebrow{display:inline-flex;align-items:center;gap:11px;padding:9px 17px; border:1px solid rgba(33,69,143,.16);border-radius:999px;font-size:12.5px;font-weight:700; color:var(--accent);background:rgba(255,255,255,.78);box-shadow:0 16px 45px -34px rgba(20,32,68,.34); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin-bottom:30px} .hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)} .hero h1{margin-bottom:22px;font-size:calc(clamp(42px,5.6vw,78px)*var(--display-scale));line-height:.99} .hero h1 em{font-style:italic;color:var(--accent)} .hero-lead{margin-bottom:30px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px} .hero-rating{display:flex;align-items:center;gap:16px} .avatars{display:flex} .avatars .av{width:40px;height:40px;border-radius:50%;border:2px solid var(--bg); margin-left:-12px;background:var(--surface-2);display:grid;place-items:center; font-size:13px;font-weight:700;color:var(--accent);overflow:hidden} .avatars .av image-slot,.avatars .av .slot-img{width:100%;height:100%} .avatars .av img{width:100%;height:100%;object-fit:cover} .avatars .av:first-child{margin-left:0} .rating-txt{font-size:13.5px;color:var(--ink-2);line-height:1.45} .rating-txt b{color:var(--ink);font-weight:700} .rating-stars{display:inline-flex;gap:2px;color:#f6c400;vertical-align:-2px;margin-left:6px} .rating-stars svg{width:14px;height:14px} .hero-visual{position:relative} .hero-visual::before{content:"";position:absolute;inset:34px -22px -22px 48px; border:1px solid rgba(33,69,143,.16);border-radius:calc(var(--radius-img) + 12px); background:rgba(255,255,255,.45)} .hero-frame{position:relative;aspect-ratio:4/5;border-radius:calc(var(--radius-img) + 10px);overflow:visible; background:var(--img-bg);box-shadow:0 42px 90px -46px rgba(20,32,68,.58)} .hero-frame image-slot,.hero-frame > .slot-img{width:100%;height:100%;border-radius:inherit;overflow:hidden;display:block;object-fit:cover} .hero-google-rating{position:absolute;right:18px;top:-18px;z-index:2;display:flex;align-items:center;gap:11px; padding:12px 14px 12px 12px;border:1px solid rgba(255,255,255,.58);border-radius:var(--radius-ui); background:rgba(255,255,255,.86);box-shadow:0 24px 60px -42px rgba(20,32,68,.58); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--ink);transition:.3s var(--ease)} .hero-google-rating:hover{transform:translateY(-2px);background:rgba(255,255,255,.94)} .hero-google-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#fff} .hero-google-icon img{width:26px;height:26px} .hero-google-copy{display:grid;gap:2px;line-height:1} .hero-google-copy b{font-family:var(--font-ui);font-size:26px;font-weight:800;white-space:nowrap} .hero-google-copy em{font-style:normal;color:#f6c400;font-size:13px;letter-spacing:.04em;white-space:nowrap} .hero-tag{position:absolute;left:-20px;bottom:34px;display:flex;align-items:center;gap:14px; padding:16px 22px 16px 18px;background:rgba(255,255,255,.86);border:1px solid rgba(33,69,143,.14); border-radius:var(--radius-soft);box-shadow:0 28px 70px -42px rgba(20,32,68,.58); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);max-width:260px} .hero-tag .ic{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0; background:var(--accent-soft);color:var(--accent);border-radius:var(--radius-ui)} .hero-tag .ic svg{width:20px;height:20px} .hero-tag .big{font-family:var(--font-ui);font-weight:700;font-size:15px;letter-spacing:-.01em} .hero-tag .lbl{font-size:12px;color:var(--ink-3);margin-top:2px} /* ---------- marquee strip ---------- */ .strip{border-block:1px solid var(--line);overflow:hidden;background:var(--bg-2)} .strip-track{display:flex;gap:0;width:max-content;animation:marq 34s linear infinite} .strip-track .item{display:flex;align-items:center;gap:18px;padding:20px 0} .strip-track .item span{font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px); font-weight:500;color:var(--ink-2);white-space:nowrap;padding-inline:34px} .strip-track .item i{color:var(--accent);font-style:normal;font-size:9px} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- services ---------- */ .svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px; flex-wrap:wrap;margin-bottom:54px} .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:250px; grid-auto-flow:dense;gap:20px} .svc{background:var(--surface);padding:28px;display:flex;flex-direction:column;justify-content:flex-end; min-height:0;transition:transform .35s var(--ease),box-shadow .35s var(--ease); position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-img); box-shadow:0 28px 70px -50px rgba(20,32,68,.42);isolation:isolate} .svc:nth-child(1){grid-column:1;grid-row:span 2} .svc:nth-child(2){grid-column:2;grid-row:span 1} .svc:nth-child(3){grid-column:3;grid-row:span 1} .svc:nth-child(4){grid-column:2;grid-row:span 2} .svc:nth-child(5){grid-column:3;grid-row:span 1} .svc:nth-child(6){grid-column:1;grid-row:span 2} .svc:nth-child(7){grid-column:3;grid-row:span 2} .svc:nth-child(8){grid-column:2;grid-row:span 1} .svc::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,16,32,.04),rgba(10,16,32,.24) 36%,rgba(10,16,32,.84))} .svc:hover{transform:translateY(-5px);box-shadow:0 34px 80px -48px rgba(20,32,68,.56)} .svc-img{position:absolute;inset:0;z-index:-2;background:var(--img-bg);overflow:hidden;border:0; border-radius:inherit;margin:0} .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .35s var(--ease)} .svc:hover .svc-img img{transform:scale(1.07);filter:saturate(1.05) contrast(1.04)} .svc-top{position:absolute;right:20px;top:18px;z-index:2;margin:0} .svc-num{display:grid;place-items:center;min-width:48px;height:34px;padding-inline:12px; border:1px solid rgba(255,255,255,.34);border-radius:999px; background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); font-family:var(--font-display);font-size:16px;color:#fff;font-variant-numeric:tabular-nums} .svc h3{position:relative;z-index:1;margin:0 0 10px;color:#fff;overflow-wrap:anywhere; font-size:calc(clamp(25px,2.8vw,42px)*var(--display-scale));text-shadow:0 2px 18px rgba(0,0,0,.28)} .svc p{position:relative;z-index:1;font-size:15px;color:rgba(255,255,255,.78); line-height:1.55;margin:0;max-width:31ch;text-shadow:0 2px 18px rgba(0,0,0,.32); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .svc-arrow{position:absolute;left:26px;top:24px;opacity:0;transform:translate(-6px,6px); transition:.35s var(--ease);color:#fff;z-index:2} .svc-arrow svg{width:18px;height:18px} .svc:hover .svc-arrow{opacity:1;transform:none} /* ---------- service detail cards ---------- */ .service-pages{display:grid;gap:24px;margin-top:56px;padding-bottom:clamp(34px,7vw,96px)} .service-detail{scroll-margin-top:96px;display:block;padding:0;margin:0} .service-detail-inner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch; min-height:clamp(520px,72vh,760px);overflow:hidden;transform-origin:center center;border:1px solid rgba(33,69,143,.11); background:var(--surface);border-radius:calc(var(--radius-img) + 8px);box-shadow:0 1px 0 rgba(33,69,143,.08); transition:box-shadow .35s var(--ease),border-color .35s var(--ease);will-change:transform,opacity} .service-detail:hover .service-detail-inner{border-color:rgba(33,69,143,.2);box-shadow:0 1px 0 rgba(33,69,143,.1)} .service-detail:nth-child(even) .service-detail-inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)} .service-detail:nth-child(even) .service-media{order:2} .service-media{min-height:100%;overflow:hidden;border-radius:0;background:var(--img-bg);box-shadow:none} .service-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .35s var(--ease)} .service-detail:hover .service-media img{transform:scale(1.045);filter:saturate(1.04) contrast(1.03)} .service-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start; padding:clamp(34px,5vw,72px);min-width:0} .service-copy .kicker{padding:8px 13px;margin-bottom:22px;border:1px solid rgba(33,69,143,.13); border-radius:999px;background:rgba(33,69,143,.06);letter-spacing:.2em} .service-copy .kicker::before{width:22px} .service-copy h3{font-size:calc(clamp(28px,3.4vw,44px)*var(--display-scale));margin-bottom:16px} .service-copy p{color:var(--ink-2);font-size:17px;max-width:62ch;margin-bottom:22px} .service-copy ul{display:grid;gap:12px;margin:0 0 30px;padding:0;list-style:none;color:var(--ink-2)} .service-copy li{position:relative;padding-left:32px;font-size:15px;line-height:1.58} .service-copy li::before{content:"";position:absolute;left:0;top:.52em;width:16px;height:16px; border-radius:50%;background:var(--accent-soft);box-shadow:inset 0 0 0 5px var(--accent)} @supports (animation-timeline:view()){ .service-detail-inner{ animation:service-card-scroll linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; } @keyframes service-card-scroll{ from{opacity:.58;transform:scale(.94)} to{opacity:1;transform:scale(1)} } } /* ---------- standalone service pages ---------- */ .service-page-main{overflow:hidden} .service-hero{padding-top:clamp(128px,14vw,180px);padding-bottom:clamp(56px,8vw,96px); background:linear-gradient(180deg,var(--bg),var(--bg-2));border-bottom:1px solid var(--line)} .service-hero-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(34px,5vw,78px); align-items:center} .service-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px; color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .service-back::before{content:"";width:22px;height:1px;background:var(--accent-line)} .service-hero-copy h1{margin-bottom:24px} .service-hero-copy .lead{margin-bottom:36px;max-width:58ch} .service-hero-media{position:relative;aspect-ratio:16/11;overflow:hidden;border-radius:var(--radius-img); background:var(--img-bg);box-shadow:var(--shadow)} .service-hero-media::after{content:"";position:absolute;inset:0;border:1px solid var(--line); border-radius:inherit;pointer-events:none} .service-hero-media img{width:100%;height:100%;object-fit:cover} .service-stat-band{background:var(--bg);border-bottom:1px solid var(--line)} .service-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px; border-block:1px solid var(--line);padding-block:24px} .service-stat{display:flex;align-items:center;gap:16px;background:transparent;padding:0} .service-stat b{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--accent)} .service-stat span{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} .service-story{background:var(--bg)} .service-blog-wrap{max-width:980px} .service-blog{max-width:820px;margin-inline:auto} .service-blog-meta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,58px); padding-bottom:22px;border-bottom:1px solid var(--line)} .service-blog-meta span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3)} .service-blog-meta span:first-child{color:var(--accent)} .service-blog-section{padding-block:clamp(30px,5vw,58px);border-bottom:1px solid var(--line)} .service-blog-section h2{font-size:calc(clamp(31px,4vw,54px)*var(--display-scale));margin-bottom:20px} .service-blog-section p{font-size:18px;color:var(--ink-2);line-height:1.78;margin-bottom:18px} .service-blog-section p:last-child{margin-bottom:0} .service-blog-lead{font-size:clamp(20px,2.2vw,25px)!important;color:var(--ink)!important; line-height:1.58!important} .service-blog-image{margin:clamp(24px,4vw,46px) 0;overflow:hidden} .service-blog-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-img); box-shadow:var(--shadow)} .service-blog-image figcaption{margin-top:12px;font-size:13px;color:var(--ink-3); letter-spacing:.04em} .service-blog-quote{margin:clamp(34px,5vw,64px) 0;padding:0 0 0 clamp(22px,3vw,34px); border-left:3px solid var(--accent)} .service-blog-quote p{font-family:var(--font-display);font-size:clamp(28px,4vw,48px); line-height:1.12;color:var(--ink)} .service-checks{display:grid;gap:13px;margin:0;padding:0;list-style:none} .service-checks li{position:relative;padding-left:30px;color:var(--ink-2);line-height:1.55} .service-checks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px; border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)} .service-checks-blog{margin-top:26px} .service-checks-blog li{font-size:17px;line-height:1.62} .service-process{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:proc} .service-process li{counter-increment:proc;display:grid;grid-template-columns:42px 1fr;gap:14px; align-items:start;color:var(--ink-2)} .service-process li::before{content:counter(proc,decimal-leading-zero);display:grid;place-items:center; width:42px;height:42px;border-radius:50%;background:var(--bg);border:1px solid var(--accent-line); color:var(--accent);font-family:var(--font-display);font-size:18px} .service-process-blog{margin-top:28px;gap:20px} .service-process-blog li{font-size:17px;line-height:1.55} .service-link-list{display:grid;border-top:1px solid var(--line)} .service-link-row{display:grid;grid-template-columns:64px minmax(180px,.45fr) 1fr;gap:24px; align-items:center;padding:24px 0;border-bottom:1px solid var(--line); transition:color .25s var(--ease),transform .25s var(--ease)} .service-link-row:hover{color:var(--accent);transform:translateX(6px)} .service-link-row span{font-family:var(--font-display);font-size:20px;color:var(--accent)} .service-link-row strong{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px); font-weight:var(--display-weight);line-height:1.1;color:var(--ink)} .service-link-row em{font-style:normal;color:var(--ink-2);line-height:1.5} /* ---------- vorteile ---------- */ .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .benefit{padding:36px 32px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-ui);transition:.35s var(--ease)} .benefit:hover{border-color:var(--accent-line);transform:translateY(-4px)} .benefit .ic{width:52px;height:52px;display:grid;place-items:center;color:var(--accent); background:var(--accent-soft);border-radius:var(--radius-ui);margin-bottom:24px} .benefit .ic svg{width:25px;height:25px} .benefit h3{margin-bottom:10px} .benefit p{font-size:14.5px;color:var(--ink-2)} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px; counter-reset:st} .step{position:relative;padding:40px 34px;border:1px solid var(--line);border-radius:var(--radius-ui); background:linear-gradient(180deg,var(--surface),var(--bg))} .step-n{font-family:var(--font-display);font-size:clamp(54px,6vw,80px);font-weight:500; color:var(--accent);line-height:.8;margin-bottom:26px;opacity:.92} .step h3{margin-bottom:10px} .step p{font-size:14.5px;color:var(--ink-2)} /* ---------- about / cta image band ---------- */ .about{position:relative;overflow:hidden} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} .about-media{position:relative} .about-media .photo{aspect-ratio:5/6;border-radius:var(--radius-img);overflow:hidden;background:var(--img-bg); box-shadow:var(--shadow)} .about-media .photo image-slot,.about-media .photo .slot-img{width:100%;height:100%;display:block;object-fit:cover} .about-badge{position:absolute;right:-18px;top:34px;width:128px;height:128px;border-radius:50%; display:grid;place-items:center;text-align:center;gap:2px;background:var(--accent); color:var(--on-accent);box-shadow:var(--shadow);padding:14px} .about-badge b{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1} .about-badge span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .about-copy p{color:var(--ink-2);margin-bottom:18px;font-size:16.5px} .about-copy p:last-of-type{margin-bottom:0} .about-meta{display:flex;gap:40px;margin-top:38px;padding-top:34px;border-top:1px solid var(--line)} .about-meta .m b{font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--ink);display:block;line-height:1} .about-meta .m span{font-size:13px;color:var(--ink-3);margin-top:6px;display:block} /* ---------- reviews ---------- */ .reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap} .reviews-actions{display:grid;gap:14px;justify-items:stretch} .google-review-link{display:grid;grid-template-columns:1fr auto;grid-template-areas:"score brand" "stars icon"; align-items:center;gap:8px 22px;min-width:278px;padding:16px 18px;border:0;border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,253,.9));box-shadow:none;transition:.3s var(--ease)} .google-review-link:hover{transform:translateY(-2px);box-shadow:none} .rating-score{grid-area:score;font-family:var(--font-ui);font-size:54px;font-weight:800;line-height:.9;color:#4285f4} .rating-brand{grid-area:brand;display:grid;gap:3px;font-family:var(--font-ui);font-size:22px; font-weight:800;line-height:1;color:#5f6368;text-align:left} .rating-brand small{font-size:13px;font-weight:500;color:#6f7380} .google-g{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal; grid-area:icon;justify-self:center;font-family:var(--font-ui);font-size:25px;font-weight:800;color:#4285f4;background:#fff; box-shadow:none} .google-g img{width:28px;height:28px} .google-review-link em{grid-area:stars;font-style:normal;color:#f6c400;font-size:25px;letter-spacing:.02em;white-space:nowrap} .write-review-btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px 22px; border:1px solid rgba(33,69,143,.14);border-radius:var(--radius-ui);background:var(--ink);color:#fff; font-size:15px;font-weight:800;box-shadow:0 26px 70px -54px rgba(20,32,68,.46); transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)} .write-review-btn:hover{transform:translateY(-2px);background:var(--accent); box-shadow:0 34px 80px -52px rgba(20,32,68,.56)} .write-review-btn .g-mark{width:30px;height:30px;box-shadow:none} .write-review-btn .g-mark img{width:20px;height:20px} .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .reviews-cta{display:flex;justify-content:center;margin-top:34px} .review{padding:30px 28px;border:1px solid rgba(33,69,143,.11);border-radius:var(--radius-soft); background:var(--surface);display:flex;flex-direction:column;min-width:0; box-shadow:0 28px 76px -62px rgba(20,32,68,.42); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)} .review:hover{transform:translateY(-4px);border-color:rgba(33,69,143,.22); box-shadow:0 38px 90px -58px rgba(20,32,68,.52)} .review-top{display:flex;align-items:center;gap:16px;margin-bottom:20px} .review-avatar{width:58px;height:58px;border-radius:50%;display:block;flex:0 0 auto;overflow:hidden; border:2px solid rgba(33,69,143,.12);background:var(--img-bg)} .review-avatar img{width:100%;height:100%;object-fit:cover} .review-top .nm{font-size:18px;font-weight:800;line-height:1.12;color:var(--ink)} .review-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;color:var(--ink-3);font-size:13px} .stars{color:#f57c00;letter-spacing:.03em;line-height:1} .review-meta .stars{font-size:17px} .review blockquote{font-family:var(--font-ui);font-size:16px;font-weight:500;line-height:1.55; color:var(--ink);margin:0 0 28px;flex:1;display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;line-clamp:3;max-height:calc(16px * 1.55 * 3);overflow:hidden} .posted-google{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line); color:var(--ink-2);font-size:14px;font-weight:700;transition:color .25s var(--ease)} .posted-google:hover{color:var(--accent)} .g-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%; font-family:var(--font-ui);font-weight:800;font-size:22px;color:#4285f4;background:#fff; box-shadow:0 10px 28px -20px rgba(20,32,68,.45)} .g-mark img{width:22px;height:22px} /* ---------- faq ---------- */ .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start} .faq-media{aspect-ratio:4/5;border-radius:var(--radius-img);overflow:hidden;background:var(--img-bg); box-shadow:var(--shadow);position:sticky;top:100px} .faq-media image-slot,.faq-media .slot-img{width:100%;height:100%;display:block;object-fit:cover} .faq-list{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px; padding:26px 4px;background:transparent;border:0;text-align:left;color:var(--ink)} .faq-q span{font-family:var(--font-display);font-size:clamp(19px,1.8vw,24px);font-weight:600; line-height:1.2} .faq-ic{flex-shrink:0;width:30px;height:30px;display:grid;place-items:center; border:1px solid var(--line-2);border-radius:50%;color:var(--accent);transition:.3s var(--ease)} .faq-ic svg{width:15px;height:15px;transition:transform .3s var(--ease)} .faq-item.open .faq-ic{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .faq-item.open .faq-ic svg{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .faq-a p{padding:0 4px 28px;color:var(--ink-2);font-size:16px;max-width:60ch} /* ---------- standort ---------- */ .loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:54px} .loc-card{border:1px solid var(--line);border-radius:var(--radius-ui);overflow:hidden;background:var(--surface)} .loc-card .img{aspect-ratio:16/10;background:var(--img-bg);overflow:hidden;border-radius:var(--radius-img); margin:12px 12px 0} .loc-card .img image-slot,.loc-card .img .slot-img{width:100%;height:100%;display:block;object-fit:cover} .loc-card .body{padding:26px 28px;display:flex;align-items:center;gap:16px} .loc-card .ic{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0; color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-ui)} .loc-card .ic svg{width:22px;height:22px} .loc-card h3{margin-bottom:3px} .loc-card p{color:var(--ink-2);font-size:15px} /* ---------- contact / termin form ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,80px);align-items:start} .contact-info .lead{margin-bottom:40px} .crow{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line)} .crow:last-child{border-bottom:1px solid var(--line)} .crow .ic{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;color:var(--accent); border:1px solid var(--accent-line);border-radius:var(--radius-ui)} .crow .ic svg{width:21px;height:21px} .crow .l{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px} .crow .v{font-size:16px;color:var(--ink);line-height:1.5} .crow .v a:hover{color:var(--accent)} .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-ui); padding:clamp(28px,3.4vw,44px)} .form h3{margin-bottom:6px} .form .fl{color:var(--ink-2);font-size:14.5px;margin-bottom:28px} .field{margin-bottom:18px} .field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3);margin-bottom:9px} .field input,.field select,.field textarea{width:100%;background:var(--bg);color:var(--ink); border:1px solid var(--line-2);border-radius:var(--radius-ui);padding:14px 16px;font-family:inherit; font-size:15px;transition:.25s var(--ease);outline:none} .field textarea{resize:vertical;min-height:120px} .field select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 16px center} .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-note{font-size:12.5px;color:var(--ink-3);margin-top:16px;line-height:1.5} .form-ok{display:none;margin-top:18px;padding:16px 18px;border-radius:var(--radius-ui); background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink);font-size:14.5px} .form-ok.show{display:block} /* ---------- final cta ---------- */ .bigcta{position:relative;overflow:hidden;background:var(--bg-2);border-top:1px solid var(--line)} .bigcta-in{text-align:center;max-width:760px;margin-inline:auto} .bigcta h2{margin:18px 0 22px} .bigcta p{color:var(--ink-2);font-size:18px;margin-bottom:38px;max-width:54ch;margin-inline:auto} .bigcta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- footer ---------- */ .footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(56px,7vw,84px) 0 34px} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px} .footer-brand .brand{margin-bottom:20px} .footer-blurb{color:var(--ink-2);font-size:15px;max-width:32ch} .footer-socials{display:flex;gap:10px;margin-top:24px} .footer-socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line); border-radius:var(--radius-ui);color:var(--ink-2);transition:.25s var(--ease)} .footer-socials a:hover{border-color:var(--accent);color:var(--accent)} .footer-socials svg{width:17px;height:17px} .footer-col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); margin-bottom:18px;font-family:var(--font-ui);font-weight:600} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer-col a,.footer-col p{font-size:15px;color:var(--ink-2);transition:color .2s} .footer-col a:hover{color:var(--ink)} .footer-col p{line-height:1.6} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:1px solid var(--line); font-size:13px;color:var(--ink-3)} .footer-bottom .legal{display:flex;gap:22px} .footer-bottom a:hover{color:var(--ink-2)} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} @keyframes native-rise{ from{opacity:0;transform:translateY(34px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes native-media{ from{transform:scale(1.12)} to{transform:scale(1)} } @keyframes native-left{ from{opacity:0;transform:translateX(-42px) scale(.985);filter:blur(8px)} to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)} } @keyframes native-right{ from{opacity:0;transform:translateX(42px) scale(.985);filter:blur(8px)} to{opacity:1;transform:translateX(0) scale(1);filter:blur(0)} } @keyframes native-stretch{ from{opacity:.3;clip-path:inset(0 48% round var(--radius-img))} to{opacity:1;clip-path:inset(0 0 round var(--radius-img))} } @keyframes page-progress{ from{transform:scaleX(0)} to{transform:scaleX(1)} } @supports (animation-timeline:view()){ body::before{content:"";position:fixed;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:left center;transform:scaleX(0);z-index:120; animation:page-progress linear both;animation-timeline:scroll(root)} .svc,.benefit,.step,.review,.loc-card{ animation:native-rise both;animation-timeline:view();animation-range:entry 8% cover 34%; } .service-hero-copy,.service-blog-section:nth-child(odd),.service-stat:nth-child(odd){ animation:native-left both;animation-timeline:view();animation-range:entry 0% cover 38%; } .service-hero-media,.service-blog-section:nth-child(even),.service-stat:nth-child(even),.service-link-row{ animation:native-right both;animation-timeline:view();animation-range:entry 0% cover 38%; } .service-media img,.svc-img img{ animation:native-media both;animation-timeline:view();animation-range:entry 0% cover 55%; } .service-hero-media img,.service-blog-image img{ animation:native-stretch both;animation-timeline:view();animation-range:entry 0% cover 45%; } .svc.reveal,.benefit.reveal,.step.reveal,.review.reveal,.service-detail.reveal,.loc-card.reveal, .service-hero-copy.reveal,.service-hero-media.reveal,.service-blog-section.reveal,.service-stat.reveal, .service-blog-meta.reveal,.service-blog-image.reveal,.service-blog-quote.reveal,.service-link-row.reveal{ opacity:1;transform:none; } } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .strip-track,.svc,.benefit,.step,.review,.service-detail,.loc-card,.service-media img,.svc-img img, .service-hero-copy,.service-hero-media,.service-blog-section,.service-stat,.service-link-row, .service-blog-meta,.service-blog-image,.service-blog-quote, .service-hero-media img,.service-blog-image img{animation:none} body::before{display:none} html{scroll-behavior:auto} } /* ---------- responsive ---------- */ @media (max-width:1080px){ .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:230px} .footer-top{grid-template-columns:1fr 1fr;gap:36px 40px} } @media (max-width:900px){ .nav,.hdr-tel{display:none} .burger{display:flex} .hero-grid,.about-grid,.faq-grid,.contact-grid{grid-template-columns:1fr} .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px} .svc{grid-column:auto!important;grid-row:span 1!important} .service-hero-grid{grid-template-columns:1fr} .service-stat-row{grid-template-columns:1fr 1fr} .service-link-row{grid-template-columns:48px 1fr} .service-link-row em{grid-column:2} .hero-visual{max-width:480px} .hero-frame{aspect-ratio:16/11} .hero-google-rating{right:14px;top:-14px} .service-pages{display:grid;gap:24px;padding-bottom:0} .service-detail,.service-detail:nth-child(even){min-height:0;margin:0;animation:none!important;filter:none!important} .service-detail-inner,.service-detail:nth-child(even) .service-detail-inner{grid-template-columns:1fr;animation:none!important;filter:none!important} .service-detail:nth-child(even) .service-media{order:0} .service-media{min-height:300px} .service-copy{padding:34px} .benefits,.steps,.reviews{grid-template-columns:1fr 1fr} .faq-media{display:none} .loc-grid{grid-template-columns:1fr} .about-meta{gap:28px} } @media (max-width:600px){ .benefits,.steps,.reviews,.svc-grid,.field-row{grid-template-columns:1fr} .svc-grid{grid-auto-rows:260px} .svc{grid-column:auto!important;grid-row:span 1!important} .hdr-cta > .btn-primary{display:none} .hero{padding-top:108px;padding-bottom:48px} .hero-visual{display:none} .reviews-head{display:grid;gap:24px} .google-review-link{min-width:0;width:100%;gap:12px 18px} .rating-score{font-size:48px} .rating-brand{font-size:20px} .rating-brand small{font-size:12px} .google-review-link em{font-size:22px} .review-top .nm{font-size:17px} .review blockquote{font-size:16px} .service-media{min-height:240px} .service-copy{padding:28px 24px} .service-stat-row{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr} .hero-tag{left:0} .about-badge{width:104px;height:104px;right:8px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px} }