/* ==============================================================
   DEUTSCHEAUTO24 – EASY EDIT AREA
   Change colours here. Change phone/email/WhatsApp number in assets/main.js.
   ============================================================== */
:root { --black:#090909; --black-2:#151515; --gold:#f4c542; --gold-light:#ffe69a; --red:#d71920; --cream:#fff9e9; --muted:#d0c9b6; --line:rgba(244,197,66,.23); --max:1350px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:Arial,Helvetica,sans-serif; font-size:18px; line-height:1.65; color:var(--cream); background:var(--black); animation:fadein .35s ease; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
/* Native cross-page transition in browsers that support the View Transitions API (progressive enhancement, safely ignored elsewhere) */
@view-transition { navigation: auto; }

.top-stripe { height:8px; background:linear-gradient(90deg,#050505 0 33.33%,var(--gold) 33.33% 66.66%,var(--red) 66.66%); }
.shell { width:min(calc(100% - 40px),var(--max)); margin:auto; }
header { position:sticky; top:0; z-index:20; backdrop-filter:blur(16px); background:rgba(9,9,9,.92); border-bottom:1px solid var(--line); }
.nav { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:14px; }.brand { display:flex; align-items:center; width:220px; flex:0 0 220px; }.brand img { width:100%; max-height:70px; object-fit:contain; object-position:left center; }
nav { display:flex; gap:16px; align-items:center; justify-content:center; font-weight:800; font-size:1.02rem; flex:1; } nav a { padding:14px 24px; border:1px solid rgba(244,197,66,.38); border-radius:999px; background:linear-gradient(145deg,#242424,#101010); box-shadow:inset 0 1px rgba(255,255,255,.08); transition:.2s; } nav a:hover { color:#1b1300; background:linear-gradient(135deg,#fff0a3,var(--gold)); border-color:var(--gold); transform:translateY(-1px); } nav a:active { transform:scale(.95); }.nav-cta { margin-left:4px; }
.phone-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 19px; color:#181000; background:linear-gradient(135deg,#fff5b8,var(--gold) 48%,#d99509); border:1px solid #ffeaa0; border-radius:999px; font-weight:900; box-shadow:0 0 0 3px rgba(244,197,66,.15),0 8px 26px rgba(244,197,66,.35),inset 0 1px rgba(255,255,255,.8); transition:.2s; }.phone-button:hover { transform:translateY(-2px) scale(1.02); }.phone-button:active { transform:scale(.95); }
.contact-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.wa-icon { width:22px; height:22px; vertical-align:-5px; }
.hp-field { position:absolute; left:-9999px; top:-9999px; }
main { overflow:hidden; }.hero { min-height:650px; display:flex; align-items:center; position:relative; isolation:isolate; background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.78) 42%,rgba(0,0,0,.25) 100%),url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=2200&q=85') center/cover; }.hero:after { content:""; position:absolute; inset:auto 0 0; height:10px; background:linear-gradient(90deg,var(--red),var(--gold),#191919); z-index:-1; }.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; font-weight:900; }.hero h1,.page-hero h1 { font-size:clamp(2.6rem,6vw,5.5rem); line-height:.98; letter-spacing:-.065em; margin:14px 0 22px; max-width:780px; }.hero p { max-width:620px; font-size:1.17rem; color:#f6efdc; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; max-width:650px; }.button { display:inline-flex; align-items:center; justify-content:center; border:1px solid #ff5a5f; border-radius:999px; padding:15px 24px; cursor:pointer; font-weight:900; background:linear-gradient(135deg,#f22b31,#a9070e); color:#fff; box-shadow:0 7px 19px rgba(215,25,32,.25),inset 0 1px rgba(255,255,255,.27); transition:.2s; }.button:hover { transform:translateY(-2px); filter:brightness(1.12); }.button:active { transform:scale(.95); }.button.ghost { border:1px solid var(--gold); color:var(--gold-light); background:linear-gradient(135deg,#2c260c,#0c0c0c); box-shadow:inset 0 1px rgba(255,255,255,.11); }
.hero-phone { margin-top:34px; }.hero-phone .phone-button { font-size:clamp(1.15rem,2.4vw,1.6rem); padding:18px 28px; letter-spacing:.015em; animation:shine 2.7s infinite; }.hero-phone small { display:block; color:var(--muted); font-size:.8rem; margin-top:5px; } @keyframes shine { 50% { box-shadow:0 0 0 4px rgba(244,197,66,.18),0 10px 40px rgba(244,197,66,.64),inset 0 1px rgba(255,255,255,.9); } }
section { padding:88px 0; }.section-dark { background:var(--black-2); }.section-heading { max-width:740px; margin-bottom:42px; }.section-heading h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.05em; margin:8px 0; }.section-heading p { color:var(--muted); margin:0; }
.steps,.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.card { border:1px solid var(--line); background:linear-gradient(135deg,#1b1b1b,#101010); padding:29px; border-radius:10px; }.card .number { color:var(--gold); font-weight:900; font-size:2.4rem; line-height:1; }.card h3 { font-size:1.36rem; margin:12px 0 8px; }.card p { color:var(--muted); margin:0; font-size:.96rem; }
.quote { display:grid; grid-template-columns:1fr 1.1fr; gap:42px; align-items:start; background:linear-gradient(125deg,#241a04,#130f04 55%,#350306); border:1px solid rgba(244,197,66,.4); padding:48px; border-radius:12px; }.quote h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; letter-spacing:-.05em; margin:11px 0; }.quote p { color:#f5e7b7; }.quote-list { display:grid; gap:10px; margin:20px 0; }.quote-list span:before { content:'✓'; color:var(--gold); margin-right:10px; font-weight:900; }
form:not([hidden]) { display:grid; gap:13px; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; } input,select,textarea { width:100%; border:1px solid rgba(255,255,255,.19); background:#070707; color:white; padding:14px; border-radius:5px; font-size:1rem; } textarea { min-height:105px; resize:vertical; } .form-note { font-size:.78rem; color:var(--muted); margin:0; }
.form-section-title { color:var(--gold); text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; font-weight:900; margin:14px 0 2px; padding-top:14px; border-top:1px solid var(--line); }.form-section-title:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.checkbox-field { display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.19); background:#070707; color:var(--cream); padding:14px; border-radius:5px; font-size:1rem; cursor:pointer; }.checkbox-field input { width:auto; accent-color:var(--gold); }
.upload-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px; } .upload-row input[type=file] { padding:11px; font-size:.85rem; }
@media(max-width:600px){ .upload-row{grid-template-columns:1fr} }
.cities { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.city { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:96px; border:1px solid var(--line); padding:18px; background:#0e0e0e; font-weight:800; border-radius:7px; transition:.2s; }.city:hover { background:var(--red); border-color:var(--red); transform:translateY(-2px); }.city:active { transform:scale(.96); }.city small { display:block; color:var(--gold); font-weight:700; font-size:.75rem; }.city:hover small { color:white; }
.page-hero { padding:90px 0 65px; background:radial-gradient(circle at 85% 0,var(--red),transparent 33%),linear-gradient(135deg,#1b1504,#060606 65%); border-bottom:1px solid var(--line); }.page-hero h1 { max-width:900px; }.page-hero p { max-width:740px; color:var(--muted); }.location-content { display:grid; grid-template-columns:1.2fr .8fr; gap:45px; }.location-content h2 { font-size:2rem; line-height:1.15; }.location-box { padding:28px; border-left:4px solid var(--gold); background:#171717; }.location-box p { color:var(--muted); }
footer { padding:40px 0 22px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }.footer-row a:hover { color:var(--gold); }
#home,#ablauf,#standorte,#anfrage { scroll-margin-top:112px; }
@media(max-width:860px){ #home,#ablauf,#standorte,#anfrage { scroll-margin-top:86px; } }
@media(max-width:860px){ body{font-size:17px}.nav{min-height:72px}nav{display:none}.nav-cta{display:inline-flex;padding:10px 13px;font-size:.82rem}.hero{min-height:600px}.steps,.benefits{grid-template-columns:1fr}.quote,.location-content{grid-template-columns:1fr;padding:29px}.cities{grid-template-columns:repeat(2,1fr)}.field-row{grid-template-columns:1fr}section{padding:65px 0}.hero-phone .phone-button{width:100%;}.hero{background-position:60% center}}