/* Dego Motors — stylesheet. Every value reads from tokens.css. */ /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} body{margin:0;background:var(--color-surface);color:var(--color-body); font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-light); line-height:var(--lh-body);-webkit-font-smoothing:antialiased} img,svg,video{max-width:100%;height:auto;display:block} /* kommt erst im Build um jedes lokale Bild (AVIF/WebP-Varianten, siehe build.mjs). display:contents nimmt es wieder aus dem Boxbaum, damit Regeln wie ".hero-media img{height:100%}" weiterhin gegen den urspruenglichen Elternteil rechnen. */ picture{display:contents} h1,h2,h3,h4{margin:0;color:var(--color-ink);font-family:var(--font-display);font-weight:var(--fw-semibold)} h1{font-size:var(--fs-h1);line-height:var(--lh-head)} h2{font-size:var(--fs-h2);line-height:var(--lh-tight)} h3{font-size:var(--fs-h3);line-height:var(--lh-head)} h4{font-size:1.0625rem;line-height:1.3} p,ul,ol{margin:0} a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px} a:hover{text-decoration-color:currentColor} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:2px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-ink);color:#fff;padding:var(--space-3) var(--space-5);border-radius:0 0 var(--radius) 0} .skip-link:focus{left:0} .ico{width:1em;height:1em;fill:currentColor;flex:none} .ionicon{overflow:visible} /* ------------------------------------------------------ scroll reveal ---- */ /* Osmo "Elements Reveal on Scroll", driven by main.js (see the note there). Nothing is hidden unless (head.html), so a failed script never leaves the page blank. [data-reveal] = hidden from the first paint until the engine takes over; the engine then puts each block through out -> in -> done. power4.inOut from the original = cubic-bezier(.77,0,.175,1). */ .reveal-on { /* Osmo's 2em, capped so an 85px hero headline doesn't travel 170px */ --reveal-distance: min(2em, 2.5rem); --reveal-ease: cubic-bezier(.77, 0, .175, 1); } .reveal-on [data-reveal]:not([data-reveal-item]), .reveal-on [data-reveal-item="out"] { opacity: 0; transform: translateY(var(--reveal-distance)); } .reveal-on [data-reveal-item="in"] { transition: opacity .8s var(--reveal-ease), transform .8s var(--reveal-ease); } @media (prefers-reduced-motion: reduce) { .reveal-on [data-reveal], .reveal-on [data-reveal-item] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- parallax on background images (ported from autowelt-bodensee.de) ---------- main.js moves each [data-parallax-layer] while its [data-parallax] section scrolls, so the photo runs at --parallax-speed (0.45 = template) of the page speed. The layer gets --parallax-overflow of extra height, kept inside the section by overflow:clip. Off below 64em (the stretched box costs sharpness). */ [data-parallax]{overflow:clip;--parallax-speed:.45; /* Denselben Ueberstand schon im ersten Frame reservieren, den main.js danach in px nachrechnet. Ohne das waechst die Bildebene erst beim Setup — der Bildausschnitt springt sichtbar (CLS ~0.3). 100% loest hier gegen die Sektionshoehe auf, genau wie in height/top weiter unten. */ --parallax-overflow:calc((1 - var(--parallax-speed)) * (100vh + 100% + 32px))} @media (max-width:63.99em){[data-parallax]{--parallax-speed:1}} [data-parallax] [data-parallax-layer]{ top:calc(var(--parallax-overflow, 0px) * -0.5);bottom:auto; height:calc(100% + var(--parallax-overflow, 0px)); transform:translate3d(0,var(--parallax-y, 0px),0);will-change:transform} @media (prefers-reduced-motion:reduce){[data-parallax] [data-parallax-layer]{top:0;height:100%;transform:none}} /* ---------- layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container-narrow{max-width:var(--container-narrow)} .section{padding-block:var(--section-y)} .section--tint{background:var(--color-surface-2)} .section--tint-2{background:var(--color-surface-3)} .section--dark{background:var(--color-surface-dark);color:var(--color-on-dark-muted)} .section--dark h1,.section--dark h2,.section--dark h3{color:var(--color-on-dark)} .stack>*+*{margin-top:var(--space-4)} .stack-lg>*+*{margin-top:var(--space-8)} /* ---------- type helpers ---------- */ .eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:var(--fw-light); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-accent-text); line-height:1.5;margin-bottom:var(--space-4)} @media (max-width:520px){.eyebrow{letter-spacing:.35rem;font-size:.8125rem}} .lead{font-size:var(--fs-lead);line-height:1.5;font-weight:var(--fw-light)} .muted{color:var(--color-body-muted)} .section-head{max-width:62ch;margin-inline:auto;text-align:center} .section-head p{margin-top:var(--space-4);margin-inline:auto} .section-head--center{text-align:center;margin-inline:auto} .section-head--center p{margin-inline:auto} .section-head--left{text-align:left;margin-inline:0} .section-head--left p{margin-inline:0} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); padding:.875rem 1.5rem;border:1px solid transparent;border-radius:var(--radius); font-family:var(--font-display);font-size:var(--fs-body);font-weight:var(--fw-medium); line-height:1.2;text-decoration:none;cursor:pointer; transition:background-color .18s ease,color .18s ease,border-color .18s ease,translate .18s ease,box-shadow .18s ease} .btn:hover{translate:0 -1px} .btn:active{translate:0 0} .btn-accent{background:var(--color-accent);color:var(--color-accent-ink)} .btn-accent:hover{background:var(--color-accent-hover);box-shadow:0 4px 14px rgba(52,211,48,.35)} .btn-ink{background:var(--color-ink);color:#fff} .btn-ink:hover{background:#524c46} .btn-outline{border-color:var(--color-line-strong);color:var(--color-ink);background:transparent} .btn-outline:hover{border-color:var(--color-ink);background:var(--color-surface-2)} .btn-ghost{background:transparent;border-color:var(--color-line);color:var(--color-ink)} .btn-ghost:hover{background:var(--color-surface-3)} .btn-on-dark{background:#fff;color:var(--color-ink)} .btn-on-dark:hover{background:var(--color-surface-warm)} .btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)} @media (max-width:480px){.btn-row>.btn{flex:1 1 100%}} /* ---------- topbar ---------- */ .topbar{background:var(--color-surface-dark);color:var(--color-on-dark-muted);font-size:var(--fs-small)} .topbar-inner{display:flex;gap:var(--space-6);justify-content:center;align-items:center;min-height:42px;flex-wrap:wrap} .topbar-link{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:inherit} .topbar-link:hover{color:#fff} @media (max-width:767px){.topbar-inner{gap:var(--space-4)}} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--color-surface); border-bottom:1px solid var(--color-line);transition:box-shadow .2s ease} .site-header.is-stuck{box-shadow:0 2px 16px rgba(25,25,25,.09)} .header-inner{display:flex;align-items:center;gap:var(--space-6);min-height:76px} .logo{flex:none;display:block} .logo img{width:170px;height:auto} .site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-8)} .nav-list{display:flex;align-items:center;gap:var(--space-6);list-style:none;padding:0;margin:0} .nav-list a{position:relative;text-decoration:none;font-weight:var(--fw-medium); color:var(--color-ink);padding-block:.4rem} .nav-list a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--color-accent);transition:right .22s ease} .nav-list a:hover::after,.nav-list a[aria-current="page"]::after{right:0} .nav-list a[aria-current="page"]{color:var(--color-ink-strong)} .nav-cta{padding:.75rem 1.25rem} .nav-toggle{display:none;margin-left:auto;background:transparent;border:0; border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;transition:background-color .18s,border-color .18s} .nav-toggle:hover{background:var(--color-surface-3)} .nav-toggle:focus:not(:focus-visible){outline:none} .nav-toggle .ico{width:24px;height:24px;color:var(--color-ink)} .nav-toggle .nav-icon-close{display:none} .nav-toggle[aria-expanded="true"] .nav-icon-open{display:none} .nav-toggle[aria-expanded="true"] .nav-icon-close{display:block} .nav-meta{display:none} /* mobile drawer — ported from neugebauergruppe.de: full-height panel under the header, warm ground, big separated links, full-width CTA, then address, hours, contact ways and social */ @media (max-width:1024px){ .nav-toggle{display:inline-flex} .site-nav{position:fixed;inset:var(--header-bottom,77px) 0 0 0;z-index:890;display:none;flex-direction:column;align-items:stretch; gap:0;margin:0;padding:var(--space-4) var(--gutter) var(--space-12);background:var(--color-surface-dark);overflow-y:auto;overscroll-behavior:contain} .site-nav.is-open{display:flex} .nav-list{flex-direction:column;align-items:stretch;gap:0} .nav-list>li{border-bottom:1px solid rgba(255,255,255,.14)} .nav-list a{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem .25rem; font-size:1.0625rem;font-weight:var(--fw-semibold);color:#fff} .nav-list a::after{display:none} .nav-list a[aria-current="page"]{color:var(--color-accent-hover)} .nav-cta{margin-top:var(--space-6);width:100%;padding:1rem} .nav-meta{display:grid;gap:var(--space-6);margin-top:var(--space-8);padding-top:var(--space-8); border-top:1px solid rgba(255,255,255,.14);font-size:var(--fs-small);color:var(--color-on-dark-muted)} .nav-meta p{margin:0} .nav-meta__brand,.nav-meta__label{font-size:.75rem;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.2em;color:#fff} .nav-meta__ort{display:grid;gap:.35rem} .nav-meta__address,.nav-meta__hours{line-height:1.55} .nav-meta__hours{margin-top:.25rem} .nav-meta__wege{display:grid;gap:.35rem;margin-top:var(--space-3)} .nav-meta__link{display:flex;align-items:center;gap:.625rem;min-height:2.5rem;color:#fff;text-decoration:none} .nav-meta__link:hover,.nav-meta__link:focus-visible{text-decoration:underline;text-underline-offset:3px} .nav-meta .nav-meta__icon{flex:none;width:1rem;height:1rem;padding:.4375rem;box-sizing:content-box;color:var(--color-accent-hover);background:rgba(255,255,255,.08);border-radius:.5rem} .nav-meta__social{display:flex;gap:var(--space-3)} .nav-meta__social a{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff} .nav-meta__social a:hover,.nav-meta__social a:focus-visible{background:#fff;color:var(--color-ink);border-color:#fff} .nav-meta__social .ico{width:1.125rem;height:1.125rem} body.nav-locked{overflow:hidden} } /* ---------- hero ---------- */ .hero{position:relative;isolation:isolate;background:var(--color-surface-dark);color:var(--color-on-dark)} .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 60%} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(25,25,25,.88) 0%,rgba(25,25,25,.72) 38%,rgba(25,25,25,.25) 70%,rgba(25,25,25,.35) 100%)} @media (max-width:1024px){ /* narrow: the 100deg wash would cover the whole photo — go vertical so the car stays visible */ .hero::before{background:linear-gradient(180deg,rgba(25,25,25,.86) 0%,rgba(25,25,25,.76) 42%,rgba(25,25,25,.6) 68%,rgba(25,25,25,.78) 100%)} .hero-media img{object-position:center 45%} } .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--space-12); align-items:center;padding-block:clamp(3.5rem,8vw,7rem);min-height:min(88vh,760px)} .hero h1{color:var(--color-on-dark);max-width:16ch} .hero .eyebrow{font-weight:var(--fw-medium);color:var(--color-accent-hover)} .hero-sub{margin-top:var(--space-5);max-width:46ch;color:var(--color-on-dark-muted);font-size:var(--fs-lead)} .hero-actions{margin-top:var(--space-8)} .hero-trust{margin-top:var(--space-8);display:flex;gap:var(--space-6);flex-wrap:wrap; color:var(--color-on-dark-muted);font-size:var(--fs-small)} .hero-trust span{display:inline-flex;align-items:center;gap:.5em} .hero-trust .ico{color:var(--color-accent)} .hero-trust__link{display:inline-flex;align-items:center;gap:.5em;color:inherit;text-decoration:underline; text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;transition:color .16s ease,text-decoration-color .16s ease} .hero-trust__link:hover{color:#fff;text-decoration-color:var(--color-accent)} @media (max-width:1024px){ .hero-trust{flex-direction:column;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-6)} .hero-trust>span,.hero-trust>a{padding:.45rem .8rem;border-radius:999px;background:rgba(20,20,20,.62); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12); color:#fff;font-size:.9375rem;font-weight:var(--fw-regular)} .hero-trust .ico{width:1.1em;height:1.1em;color:var(--color-accent-hover)} } #bewertungen{scroll-margin-top:90px} @media (max-width:1024px){.hero-inner{grid-template-columns:1fr;gap:var(--space-8);min-height:0}} /* search card */ .search-card{background:var(--color-surface);color:var(--color-body);border-radius:var(--radius-lg); padding:var(--space-6);box-shadow:var(--shadow-lift)} .search-card h2{font-size:1.125rem} .search-card .field+.field{margin-top:var(--space-3)} .search-card .btn{width:100%;margin-top:var(--space-5)} .autegro-slider{min-height:460px} .autegro-listing{min-height:640px} .autegro-types{min-height:250px;margin-top:var(--space-10)} .fin-teaser{grid-template-columns:1fr;gap:var(--space-4)} .fin-teaser .card{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-5);align-items:start} .fin-teaser .card-icon{grid-row:span 2;margin-bottom:0} .fin-teaser .card h3{margin-bottom:var(--space-2)} .section--listing{padding-top:clamp(2rem,4vw,3rem)} /* Autegro widgets paint their own card (border, radius 10px) inside a shadow root — no wrapper card here, or the widget shows up boxed twice. */ .autegro-search{min-height:300px;border-radius:10px;box-shadow:var(--shadow-lift)} .autegro-search>div{border-radius:10px;overflow:hidden} /* purchase-inquiry pads its card 32px/16px inside the shadow root; pull the host out by exactly that so the card edge lines up with the column */ .autegro-inquiry{min-height:620px;margin:-32px -16px} .search-note{margin-top:var(--space-3);font-size:var(--fs-small);color:var(--color-body-muted);text-align:center} /* ---------- forms ---------- */ .field{display:block} .field>label,.field-label{display:block;font-size:var(--fs-small);font-weight:var(--fw-medium); color:var(--color-ink);margin-bottom:var(--space-2)} .req{color:var(--color-danger)} input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{ width:100%;min-height:42px;padding:10px 16px;background:#fff; border:1px solid #E8E8E8;border-radius:8px; font-size:.875rem;line-height:20px;font-weight:var(--fw-regular);color:#111; transition:border-color .16s ease,box-shadow .16s ease} input::placeholder,textarea::placeholder{color:#8a8a8a} input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,select:hover,textarea:hover{border-color:#cfcfcf} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%233D3935' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:36px} textarea{min-height:9rem;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--color-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 22%,transparent);outline:none} input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--color-danger)} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)} .form-grid .full{grid-column:1/-1} @media (max-width:640px){.form-grid{grid-template-columns:1fr}} .check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-small);line-height:1.5} .check input{margin-top:.2rem;width:1.05rem;height:1.05rem;accent-color:var(--color-accent);flex:none} .hp{position:absolute;left:-9999px} /* ALTCHA: löst im Hintergrund, bleibt unsichtbar (visually hidden, nicht display:none) */ .altcha{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .form-status{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius); font-size:var(--fs-small);display:none} .form-status.is-visible{display:block} .form-status[data-state=ok]{background:var(--color-accent-tint);color:#1c5b19;border:1px solid #b9ecb4} .form-status[data-state=err]{background:#fdeceb;color:#8d2523;border:1px solid #f5c3c2} .form-status[data-state=info]{background:var(--color-surface-3);color:var(--color-ink);border:1px solid var(--color-line-strong)} .form-card{background:var(--color-surface);border:1px solid var(--color-line); border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow-card)} /* ---------- Autegro-style forms (.af) — mirrors the Autegro purchase-inquiry widget ---------- */ .af{background:#fff;border:1px solid #E8E8E8;border-radius:10px;padding:clamp(20px,3vw,28px); box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);color:#111;font-size:.875rem} .af-head{margin-bottom:24px} .af-title{font-size:1.125rem;line-height:28px;font-weight:var(--fw-semibold);color:#111;margin:0;outline:none} .af-bar{margin-top:12px;height:4px;border-radius:999px;background:#F5F5F5;overflow:hidden} .af-bar span{display:block;height:100%;border-radius:inherit;background:var(--color-accent);transition:width .3s ease} .af-step{border:0;padding:0;margin:0;min-width:0} .af-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px} .af-full{grid-column:1/-1} @media (max-width:560px){.af-grid{grid-template-columns:1fr}} .af-field{min-width:0} .af-label{display:block;margin-bottom:6px;font-size:.875rem;line-height:20px;font-weight:var(--fw-semibold);color:#111;padding:0} .af-seg{border:0;padding:0;margin:0} .af-seg__row{display:flex;flex-wrap:wrap;gap:8px} .af-seg__opt{position:relative;flex:1 1 0;min-width:max-content} .af-seg__opt input{position:absolute;opacity:0;inset:0;cursor:pointer} .af-seg__opt span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px; border:1px solid #E8E8E8;border-radius:8px;background:#fff;font-weight:var(--fw-semibold);color:#111; transition:border-color .16s,background-color .16s,color .16s} .af-seg__opt:hover span{border-color:#cfcfcf} .af-seg__opt input:checked+span{border-color:var(--color-accent);background:var(--color-accent-tint);color:#1c5b19} .af-seg__opt input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:2px} .af-hint{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:8px; background:var(--color-accent-tint);color:#1c5b19;font-size:.75rem;line-height:1.45} .af-hint .ico{width:15px;height:15px;flex:none;margin-top:1px} .af-check{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;line-height:1.5;color:#444;cursor:pointer} .af-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--color-accent);flex:none} .af-check a{color:#111} .af-foot{margin-top:28px;padding-top:20px;border-top:1px solid #E8E8E8;display:flex;align-items:center;justify-content:space-between;gap:12px} .af-foot--end{justify-content:flex-end} .af-foot [data-step-next],.af-foot [data-step-submit]{margin-left:auto} .af-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;min-height:42px; border:1px solid var(--color-accent);border-radius:10px;background:var(--color-accent);color:#06080C; font:inherit;font-size:.875rem;font-weight:var(--fw-semibold);white-space:nowrap;cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);transition:background-color .18s,border-color .18s,translate .18s,box-shadow .18s} .af-next:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);translate:0 -1px;box-shadow:0 4px 14px rgba(52,211,48,.35)} .af-next:disabled{opacity:.6;cursor:progress;translate:none} .af-next .ico,.af-back .ico{width:16px;height:16px} .af-next:hover .ico{transform:translateX(2px)} .af-next .ico{transition:transform .18s} .af-back{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;min-height:42px;border:0;border-radius:10px;background:transparent; font:inherit;font-size:.875rem;font-weight:var(--fw-semibold);color:#666;cursor:pointer;transition:color .16s,background-color .16s} .af-back:hover{color:#111;background:#F5F5F5} .af .form-status{margin-top:16px} .af [aria-invalid="true"]{border-color:var(--color-danger)!important} @media (max-width:560px){.af-foot{flex-direction:column-reverse;align-items:stretch}.af-next{width:100%}.af-foot [data-step-next],.af-foot [data-step-submit]{margin-left:0}} /* tabs */ .tabs{display:flex;gap:var(--space-2);background:var(--color-surface-3);padding:.3rem; border-radius:var(--radius);margin-bottom:var(--space-6)} .tab{flex:1;padding:.65rem 1rem;border:0;background:transparent;border-radius:calc(var(--radius) - 2px); font-weight:var(--fw-medium);color:var(--color-body-muted);cursor:pointer} .tab[aria-selected="true"]{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-card)} /* ---------- cards / grids ---------- */ .grid{display:grid;gap:var(--space-6)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} .card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg); padding:var(--space-6);height:100%} .card h3{margin-bottom:var(--space-3)} .card-icon{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:var(--radius); background:var(--color-accent-tint);color:var(--color-accent-deep);margin-bottom:var(--space-5)} .card-icon .ico{width:1.4rem;height:1.4rem} /* split */ .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem);align-items:center} @media (max-width:900px){.split{grid-template-columns:1fr}} /* long form on the right: the intro column rides along while the form scrolls past */ @media (min-width:901px){ .split--sticky{align-items:start} .split--sticky>:first-child{position:sticky;top:calc(77px + 2rem)} .split--sticky-end{align-items:start} .split--sticky-end>:last-child{position:sticky;top:calc(77px + 2rem)} } .split-media img{width:100%;border-radius:var(--radius-lg);object-fit:cover;aspect-ratio:4/3} /* checklist */ .ticks{list-style:none;padding:0;display:grid;gap:var(--space-3)} .ticks li{display:flex;gap:var(--space-3);align-items:flex-start} .ticks .ico{color:var(--color-accent);width:1.25rem;height:1.25rem;margin-top:.15rem} /* stats */ .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);text-align:center} @media (max-width:640px){.stats{grid-template-columns:1fr}} .stat-value{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);font-weight:var(--fw-semibold); color:var(--color-ink);line-height:1.1} .stat-label{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--color-body-muted)} /* ---------- reviews carousel (mirrors the Trustindex widget on the old site, static) ---------- */ .rv{position:relative;margin-top:var(--space-10)} .rv-track{list-style:none;margin:0;padding:.25rem 0;display:grid;grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * var(--space-4)) / 4);gap:var(--space-4); overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain} .rv-track::-webkit-scrollbar{display:none} @media (max-width:1024px){.rv-track{grid-auto-columns:calc((100% - var(--space-4)) / 2)}} @media (max-width:640px){.rv-track{grid-auto-columns:88%}} .rv-card{scroll-snap-align:start;background:#F4F4F4;border-radius:var(--radius-lg);padding:1rem 1rem 1.1rem; display:flex;flex-direction:column;gap:.55rem;min-height:182px} .rv-head{display:flex;align-items:center;gap:.7rem} .rv-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none} .rv-who{display:flex;flex-direction:column;min-width:0;flex:1} .rv-name{font-weight:var(--fw-semibold);color:var(--color-ink-strong);font-size:.9375rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rv-date{font-size:.75rem;color:#8a8a8a;line-height:1.3;min-height:1em} .rv-google{width:20px;height:20px;flex:none;align-self:flex-start} .rv-stars{display:flex;align-items:center;gap:1px;color:#F6BB06;margin:0} .rv-stars svg{width:17px;height:17px;fill:currentColor} .rv-stars svg.is-empty{fill:#DADCE0} .rv-verified-wrap{display:inline-flex;margin-left:.4rem} .rv-verified{width:15px!important;height:15px!important;color:#1A73E8} .rv-text{font-size:.875rem;line-height:1.5;color:var(--color-ink-strong);font-weight:var(--fw-regular); display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0} .rv-card.is-open .rv-text{-webkit-line-clamp:unset;display:block} .rv-more{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-size:.75rem;color:#8a8a8a;cursor:pointer} .rv-more:hover{color:var(--color-ink)} .rv-more--link{text-decoration:none} .rv-more--link:hover{text-decoration:underline} .rv-nav{position:absolute;top:50%;z-index:2;translate:0 -50%;width:44px;height:44px;border-radius:50%; border:1px solid var(--color-line);background:#fff;box-shadow:0 4px 14px rgba(25,25,25,.16); display:grid;place-items:center;cursor:pointer;color:var(--color-ink);transition:background-color .18s,color .18s,border-color .18s,opacity .18s} .rv-nav svg{width:22px;height:22px;fill:currentColor} .rv-nav:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)} .rv-nav--prev{left:-22px}.rv-nav--next{right:-22px} .rv-nav:disabled{opacity:.4;cursor:default;box-shadow:none} .rv-nav:disabled:hover{background:#fff;border-color:var(--color-line);color:var(--color-ink)} @media (max-width:1400px){.rv-nav--prev{left:-8px}.rv-nav--next{right:-8px}} @media (max-width:640px){ .rv{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-3)} .rv-track{grid-column:1/-1;grid-row:1} .rv-nav{position:static;translate:none;grid-row:2} .rv-nav--prev{justify-self:end}.rv-nav--next{justify-self:start} } .rv-summary{margin-top:var(--space-10);text-align:center;display:grid;gap:.6rem;justify-items:center} .rv-summary__score{display:inline-flex;align-items:center;gap:.5rem;margin:0} .rv-summary__score .rv-stars svg{width:18px;height:18px} .rv-summary__score strong{font-weight:var(--fw-medium);color:var(--color-ink-strong)} .rv-summary a{color:var(--color-accent-text);text-decoration:underline;font-style:italic} .rv-summary a:hover{color:var(--color-accent-deep)} /* ---------- accordion (FAQ) ---------- */ .faq{border-top:1px solid var(--color-line)} .faq details{border-bottom:1px solid var(--color-line)} .faq summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-4);align-items:flex-start; justify-content:space-between;padding:var(--space-5) 0;font-family:var(--font-display); font-weight:var(--fw-medium);color:var(--color-ink);font-size:1.0625rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem; background:currentColor;transition:transform .2s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 112v288M400 256H112'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 112v288M400 256H112'/%3E%3C/svg%3E") center/contain no-repeat; color:var(--color-accent)} .faq details[open] summary::after{transform:rotate(135deg)} .faq-body{padding:0 0 var(--space-6);max-width:72ch} .faq-body>*+*{margin-top:var(--space-3)} .faq-body ul{padding-left:1.25rem} /* ---------- page hero (inner pages) ---------- */ .page-hero{background:var(--color-surface-3);padding-block:clamp(2.75rem,6vw,4.5rem); border-bottom:1px solid var(--color-line)} .page-hero .lead{margin-top:var(--space-5);max-width:60ch;color:var(--color-body)} .crumbs{font-size:var(--fs-small);color:var(--color-body-muted);margin-bottom:var(--space-4)} .crumbs a{text-decoration:none} .crumbs .crumb-sep{display:inline-block;width:.85em;height:.85em;vertical-align:-.12em;margin:0 .25em;opacity:.7} .crumbs a:hover{text-decoration:underline} /* photo variant of the inner-page hero (all content pages; legal pages stay plain) */ .page-hero--image{position:relative;isolation:isolate;overflow:hidden;background:var(--color-surface-dark);border-bottom:0; color:var(--color-on-dark);padding-block:clamp(4rem,9vw,7.5rem)} .page-hero__media{position:absolute;inset:0;z-index:-2} .page-hero__media img{width:100%;height:100%;object-fit:cover} .page-hero--image::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(25,25,25,.86) 0%,rgba(25,25,25,.68) 45%,rgba(25,25,25,.3) 100%)} @media (max-width:1024px){.page-hero--image::before{background:linear-gradient(180deg,rgba(25,25,25,.78) 0%,rgba(25,25,25,.7) 100%)}} .page-hero--image h1{color:#fff;max-width:22ch} .page-hero--image .lead{color:var(--color-on-dark-muted)} .page-hero--image .crumbs{color:rgba(255,255,255,.7)} .page-hero--image .crumbs a:hover{color:#fff} .page-hero--image .eyebrow{font-weight:var(--fw-medium);color:var(--color-accent-hover)} .page-hero--image .btn-outline{color:#fff;border-color:rgba(255,255,255,.45)} .page-hero--image .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff} .page-hero--image .stat-value{color:#fff} .page-hero--image .stat-label{color:var(--color-on-dark-muted)} /* ---------- contact tiles ---------- */ .contact-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)} @media (max-width:900px){.contact-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.contact-tiles{grid-template-columns:1fr}} .tile{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg); padding:var(--space-5);text-decoration:none;display:block;transition:border-color .18s,translate .18s,box-shadow .18s} a.tile:hover{border-color:var(--color-accent);translate:0 -2px;box-shadow:var(--shadow-card)} .tile .ico{width:1.25rem;height:1.25rem;color:var(--color-accent);margin-bottom:var(--space-3)} .tile-label{font-size:var(--fs-small);color:var(--color-body-muted);display:block} .tile-value{font-weight:var(--fw-medium);color:var(--color-ink);margin-top:.15rem;display:block} /* ---------- map facade ---------- */ .map-facade{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-3); border:1px solid var(--color-line);aspect-ratio:16/7;display:grid;place-items:center;text-align:center;padding:var(--space-6)} @media (max-width:767px){.map-facade{aspect-ratio:4/3}} .map-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- inventory placeholder ---------- */ .inventory-slot{background:var(--color-surface);border:1px dashed var(--color-line-strong); border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.5rem);text-align:center} .inventory-slot .eyebrow{margin-inline:auto} .inventory-slot p{max-width:56ch;margin-inline:auto;margin-top:var(--space-4)} .inventory-slot .btn-row{justify-content:center;margin-top:var(--space-8)} .partner-logos{display:flex;gap:var(--space-8);align-items:center;justify-content:center; flex-wrap:wrap;margin-top:var(--space-10)} .partner-logos img{max-height:34px;width:auto;opacity:.7} /* ---------- prose (legal pages) ---------- */ .prose{max-width:var(--container-narrow)} .prose h2{margin-top:var(--space-12);margin-bottom:var(--space-4);font-size:1.5rem} .prose h3{margin-top:var(--space-8);margin-bottom:var(--space-3);font-size:1.125rem} .prose h2:first-child,.prose h3:first-child{margin-top:0} .prose p,.prose ul,.prose ol{margin-top:var(--space-4)} .prose ul,.prose ol{padding-left:1.5rem} .prose li+li{margin-top:var(--space-2)} .prose a{color:var(--color-accent-deep)} .prose address{font-style:normal} .prose table{width:100%;border-collapse:collapse;margin-top:var(--space-6);font-size:var(--fs-small)} .prose th,.prose td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--color-line);vertical-align:top} .prose th{font-weight:var(--fw-medium);color:var(--color-ink)} /* ---------- links page ---------- */ .linktree{max-width:32rem;margin-inline:auto;text-align:center} .linktree-logo{width:190px;margin:0 auto var(--space-6)} .linktree .btn{width:100%;justify-content:center;padding:1rem 1.25rem} .linktree-group{margin-top:var(--space-8);text-align:left} .linktree-group h2{font-size:.8125rem;letter-spacing:.25rem;text-transform:uppercase; color:var(--color-body-muted);font-weight:var(--fw-light);margin-bottom:var(--space-3)} .linktree-group>.btn+.btn{margin-top:var(--space-3)} /* ---------- footer (structure mirrors automot-heidenau.de) ---------- */ .site-footer{background:var(--color-surface-dark);border-top:0; padding-block:clamp(2.5rem,2rem + 2vw,4rem) 1.5rem;font-size:var(--fs-small);color:var(--color-on-dark-muted)} .site-footer__brand{text-align:center;padding-bottom:clamp(1.75rem,1rem + 2vw,2.5rem); border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:clamp(1.75rem,1rem + 2vw,2.5rem)} .site-footer__brand img{width:180px;margin-inline:auto;filter:brightness(0) invert(1)} .site-footer__brand p{max-width:560px;margin-inline:auto;margin-top:1rem} .site-footer__actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem} .site-footer__actions .btn{padding:.6rem 1.1rem;font-size:var(--fs-small)} .site-footer__actions .btn-outline{color:#fff;border-color:rgba(255,255,255,.35)} .site-footer__actions .btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff} .site-footer__grid{display:grid;grid-template-columns:1.2fr .9fr 1fr 1fr;gap:clamp(1.5rem,1rem + 2vw,3rem)} .site-footer__grid>*{min-width:0} .site-footer h2{font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-semibold); line-height:1.3;color:#fff;margin-bottom:.9rem} .site-footer__sub{margin-top:1.5rem} .site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem} .site-footer a{color:var(--color-on-dark-muted);text-decoration:none} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer a[aria-current="page"]{color:var(--color-accent)} .site-footer__linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--color-on-dark-muted);cursor:pointer;text-align:left} .site-footer__linkbtn:hover{color:#fff;text-decoration:underline} .contact-list{gap:.9rem!important} .contact-list li{display:flex;gap:.75rem;align-items:flex-start} .contact-list .ico{width:18px;height:18px;color:var(--color-accent);margin-top:.15rem} .contact-list a{color:var(--color-on-dark-muted)} .site-footer__social{display:flex!important;gap:.75rem} .site-footer__social a{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius); border:1px solid rgba(255,255,255,.2);color:#fff} .site-footer__social a:hover{background:rgba(255,255,255,.08);border-color:var(--color-accent);color:var(--color-accent)} .site-footer__social .ico{width:16px;height:16px} .site-footer__partners{gap:.9rem!important} .site-footer__partners a{display:inline-flex;align-items:center;background:#fff;border-radius:var(--radius);padding:.45rem .75rem} .site-footer__partners img{height:30px;width:auto} .site-footer__partners a:hover{box-shadow:0 0 0 2px var(--color-accent)} .site-footer__bottom{position:relative;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center; margin-top:clamp(2rem,1.5rem + 2vw,3rem);padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);color:var(--color-on-dark-muted)} .site-footer__bottom .inception{position:relative;display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .7rem;line-height:1; color:var(--color-on-dark-muted);text-decoration:none;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius); transition:color .2s ease,border-color .2s ease} .site-footer__bottom .inception:hover,.site-footer__bottom .inception:focus-visible{color:#fff;border-color:rgba(255,255,255,.45);text-decoration:none} .site-footer__bottom .inception__logo{width:auto;height:18px;flex:none;display:block;filter:brightness(0) invert(1)} .site-footer__bottom .inception__preview{position:absolute;right:0;bottom:calc(100% + .7rem);z-index:20; width:min(340px,calc(100vw - 2 * var(--gutter)));padding:6px;background:var(--color-surface);border:1px solid var(--color-line); border-radius:var(--radius);box-shadow:var(--shadow-lift);opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:none} .site-footer__bottom .inception__preview img{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - 2px)} .site-footer__bottom .inception:hover .inception__preview,.site-footer__bottom .inception:focus-visible .inception__preview{opacity:1;visibility:visible;transform:translateY(0)} @media (prefers-reduced-motion:reduce){.site-footer__bottom .inception__preview{transition:opacity .2s ease;transform:none}} @media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){ .site-footer__grid{grid-template-columns:1fr} .site-footer__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .site-footer__actions>:first-child{grid-column:1/-1} .site-footer__bottom{flex-direction:column;justify-content:center;text-align:center} } /* ---------- person photo (Kontakt) ---------- */ .person-photo{margin:0 0 var(--space-8);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--color-surface-3)} .person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%} /* ---------- hover effects (site-wide) ---------- */ @media (hover:hover){ .card{transition:translate .22s ease,box-shadow .22s ease,border-color .22s ease} .card:hover{translate:0 -3px;box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--color-accent) 45%,var(--color-line))} .card-icon{transition:background-color .22s ease,color .22s ease,transform .22s ease} .card:hover .card-icon{background:var(--color-accent);color:#fff;transform:scale(1.06)} .rv-card{transition:translate .22s ease,box-shadow .22s ease,background-color .22s ease} .rv-card:hover{translate:0 -3px;background:#fff;box-shadow:var(--shadow-lift)} .split-media,.person-photo{overflow:hidden;border-radius:var(--radius-lg)} .split-media img,.person-photo img{transition:transform .6s cubic-bezier(.2,.7,.2,1)} .split-media:hover img,.person-photo:hover img{transform:scale(1.04)} .faq summary{transition:color .18s ease} .faq summary:hover{color:var(--color-accent-deep)} .faq summary::after{transition:transform .2s ease,background-color .18s ease} .faq summary:hover::after{transform:scale(1.15)} .faq details[open] summary:hover::after{transform:rotate(135deg) scale(1.15)} .ticks li .ico{transition:transform .2s ease} .ticks li:hover .ico{transform:scale(1.18)} .topbar-link .ico,.contact-list li .ico{transition:transform .2s ease} .topbar-link:hover .ico,.contact-list li:hover .ico{transform:scale(1.15)} .tile .ico{transition:transform .22s ease} a.tile:hover .ico{transform:scale(1.15)} .logo img{transition:opacity .2s ease} .logo:hover img{opacity:.8} .btn-outline:hover,.btn-ghost:hover{translate:0 -1px} .btn-ink:hover{translate:0 -1px;box-shadow:0 4px 14px rgba(25,25,25,.25)} .crumbs a{transition:color .16s ease} .crumbs a:hover{color:var(--color-ink)} .site-footer__actions .btn{transition:translate .18s ease,background-color .18s ease,border-color .18s ease} .site-footer__partners a{transition:box-shadow .18s ease,translate .18s ease} .site-footer__partners a:hover{translate:0 -2px} .rv-summary a{transition:color .16s ease} } /* ---------- CTA band (dark photo card, as on degomotors.com) ---------- */ .cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--color-surface-dark); color:var(--color-on-dark);text-align:center;padding-block:clamp(4rem,9vw,7rem)} .cta-band__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center} .cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(25,25,25,.42)} .cta-band h2{color:#fff} .cta-band .eyebrow,.section--dark .eyebrow{color:var(--color-accent-hover)} .cta-band p{margin:var(--space-5) auto 0;max-width:78ch;color:var(--color-on-dark-muted)} .cta-band .btn-row{justify-content:center;margin-top:var(--space-8)} /* compact stat row with dividers (hero on /auto-verkaufen) */ .stats--row{display:flex;flex-wrap:wrap;gap:0;width:fit-content;max-width:100%;margin-top:var(--space-10);text-align:left} .stats--row>div{padding:.25rem clamp(1.25rem,2.5vw,2.25rem)} .stats--row>div:first-child{padding-left:0} .stats--row>div+div{border-left:1px solid rgba(255,255,255,.22)} .stats--row .stat-value{font-variant-numeric:tabular-nums} .stats--row .stat-label{max-width:24ch;margin-top:.35rem;line-height:1.35} @media (max-width:640px){ .stats--row{display:grid;grid-template-columns:repeat(3,auto);width:100%} .stats--row>div{padding:0 .75rem} .stats--row .stat-value{font-size:1.5rem} .stats--row .stat-label{font-size:.75rem} } /* ---------- /auto-verkaufen blocks ---------- */ .usp-strip{gap:var(--space-4)} .usp{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:#fff} .usp .card-icon{margin:0;flex:none} .usp h3{margin:0;font-size:1.0625rem} .promise{gap:var(--space-4)} .promise .card h3{font-size:1rem;line-height:1.4;margin:0} .expert{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-8);padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:#fff;max-width:28rem} .expert img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none} .expert__name{font-weight:var(--fw-semibold);color:var(--color-ink);margin:0} .expert__role{font-size:var(--fs-small);color:var(--color-body-muted);margin:.15rem 0 0} .facts{display:grid;gap:var(--space-4);margin-top:var(--space-8)} .fact{display:flex;gap:var(--space-4);align-items:flex-start} .fact .card-icon{margin:0;flex:none} .fact h3{font-size:1rem;margin:0 0 .15rem} .fact p{margin:0;font-size:var(--fs-small);color:var(--color-body-muted)} #bewertung,#termin{scroll-margin-top:90px} .usp-strip--hero{margin-top:var(--space-12)} .usp-strip--hero .usp{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .usp-strip--hero .usp h3{color:#fff} .usp-strip--hero .card-icon{background:rgba(52,211,48,.18);color:var(--color-accent-hover)} @media (hover:hover){ .usp{transition:translate .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease} .usp .card-icon{transition:background-color .22s ease,color .22s ease,transform .22s ease} .usp:hover{translate:0 -3px;border-color:var(--color-accent);box-shadow:var(--shadow-lift)} .usp:hover .card-icon{background:var(--color-accent);color:#fff;transform:scale(1.06)} .usp-strip--hero .usp:hover{background:rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.35)} } /* mobile: in two-column sections the call-to-action always comes after the section's other content (the text column dissolves so its button row can be ordered after cards, forms or images) */ @media (max-width:900px){ .split{display:flex;flex-direction:column;align-items:stretch;gap:0} /* text columns left-aligned on mobile */ .split>div:not(.af):not(.autegro-inquiry):not(.split-media):not(.grid){text-align:left} .split .btn-row{justify-content:flex-start} .split .ticks{justify-items:start} .split .eyebrow{margin-inline:0} .split .expert{margin-inline:0;text-align:left} .split .facts{width:100%;margin-inline:0;text-align:left} .split .af,.split .grid,.split .card,.split .fin-note{text-align:left} .split>div:has(>.btn-row){display:contents} .split>*:not(div:has(>.btn-row)){margin-top:var(--space-8)} .split>*:first-child:not(div:has(>.btn-row)){margin-top:0} .split>div:has(>.btn-row)>.btn-row{order:10;margin-top:var(--space-8)!important} /* /finanzierung: form right after the intro, the schufa note below it */ .split--sticky>div:has(>.fin-note){display:contents} .split--sticky .fin-note{order:10;margin-top:var(--space-8)!important} } /* ---------- mobile type: headlines max. two lines, one body size ---------- */ .topbar-short{display:none} @media (max-width:640px){ main h1{font-size:1.375rem;letter-spacing:-.01em;text-wrap:balance} main h2,.cta-band h2{font-size:1.3125rem;letter-spacing:-.01em;text-wrap:balance} .hide-sm{display:none} .lead,.hero-sub,.section-head p,.split p,.cta-band p{font-size:1rem;line-height:1.55} .topbar-inner{flex-wrap:nowrap;gap:var(--space-5);min-height:38px} .topbar-long{display:none} .topbar-short{display:inline} } /* ---------- mobile compaction (cards, hero stats, USPs) ---------- */ .show-sm{display:none} @media (max-width:640px){ .show-sm{display:inline} .stats--row{grid-template-columns:repeat(3,1fr);text-align:center;margin-top:var(--space-8)} .stats--row>div,.stats--row>div:first-child{padding:0 .5rem} .stats--row .stat-label{max-width:none} .usp-strip--hero{gap:var(--space-2);margin-top:var(--space-8)} .usp-strip--hero .usp{padding:.7rem .9rem;gap:.75rem} .usp-strip--hero .usp .card-icon{width:2.25rem;height:2.25rem} .usp-strip--hero .usp h3{font-size:.9375rem} /* icon cards: icon beside the text instead of above it */ .card:has(>.card-icon){display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:start;padding:1.1rem 1.1rem 1.2rem} .card:has(>.card-icon)>.card-icon{grid-row:1 / span 2;margin:0;width:2.5rem;height:2.5rem} .card:has(>.card-icon)>h3{margin:.35rem 0 .3rem;font-size:1.0625rem} .card:has(>.card-icon)>p{grid-column:2} .promise .card:has(>.card-icon)>h3{margin:.55rem 0 0;font-size:.9375rem} .grid{gap:var(--space-3)} .ticks--inline-sm{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.6rem} .ticks--inline-sm li{gap:.3rem;align-items:center;font-size:.8125rem;white-space:nowrap} .ticks--inline-sm .ico{width:1rem;height:1rem;margin-top:0} } /* ---------- 404 ---------- */ .error-page{min-height:52vh;display:grid;place-items:center;text-align:center;padding-block:var(--section-y)} .error-code{font-family:var(--font-display);font-size:clamp(3.5rem,12vw,7rem);font-weight:var(--fw-semibold); color:var(--color-accent-text);line-height:1}