/* ============================================================ Car Care Customs — Design-System · Schwarz · Weiß · Rot Eine Quelle für die ganze Seite. ============================================================ */ :root{ /* Flächen (neutral, kein Farbstich) */ --void:#0A0A0B; --booth:#101012; --panel:#141416; --panel-2:#1D1D20; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); /* Weiß / Chrom / Grau */ --white:#F4F4F5; --chrome-1:#F4F4F5; --chrome-2:#B7B9BD; --dim:#7E8082; --steel:#C9CBCE; /* Rot (Signatur) */ --red:#E12C20; --red-2:#B5160C; --accent:#E12C20; --glow:rgba(225,44,32,.42); /* Bewegung */ --ease:cubic-bezier(.22,1,.36,1); /* Fonts */ --f-display:"Archivo",system-ui,sans-serif; --f-body:"Manrope",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace; } /* Fonts in : */ body{background:var(--void);color:var(--chrome-2);font-family:var(--f-body);-webkit-font-smoothing:antialiased} /* Chrom-Text (Weiß->Grau Verlauf) */ .chrome{background:linear-gradient(176deg,#FFF,#D3D6D8 35%,#7E8284 70%,#E2E5E5 100%); -webkit-background-clip:text;background-clip:text;color:transparent} /* dezente rote Aura */ .aura{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(70% 60% at 80% 0%,rgba(225,44,32,.10),transparent 60%), radial-gradient(60% 50% at 10% 100%,rgba(255,255,255,.04),transparent 60%)} /* Typo */ .eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:.7em} .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--red),transparent)} .label-mono{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-2)} h1,h2,h3{font-family:var(--f-display);color:var(--chrome-1);letter-spacing:-.02em} /* Buttons */ .btn{font-family:var(--f-body);font-weight:700;font-size:.95rem;padding:14px 24px;border-radius:999px; cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:.18s var(--ease)} .btn-p{background:var(--red);color:#fff;box-shadow:0 10px 36px -12px var(--glow)} .btn-p:hover{transform:translateY(-2px)} .btn-p:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none} .btn-g{background:transparent;color:var(--chrome-1);border-color:var(--line-2)} .btn-g:hover{border-color:var(--red)} /* Auswahl-Optionen */ .opt{padding:11px 15px;border:1px solid var(--line-2);border-radius:10px;background:rgba(255,255,255,.02); color:var(--chrome-2);font-weight:600;font-size:.9rem;cursor:pointer;transition:.18s var(--ease)} .opt:hover{border-color:var(--red);color:#fff} .opt.sel{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 8px 26px -10px var(--glow)} /* Karten */ .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;transition:.25s var(--ease)} .card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-4px)} /* Badge / Chip */ .badge{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim); border:1px solid var(--line);padding:6px 12px;border-radius:999px} .chip{font-family:var(--f-mono);font-size:.68rem;color:#fff;background:rgba(225,44,32,.12); border:1px solid rgba(225,44,32,.30);border-radius:999px;padding:6px 11px} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001s!important}}