/* ============================================================
   Car Care Customs — KINETIC Marken-Schicht (ccc-brand.css)
   Auf jeder Unterseite einbinden, um Typografie + Brand-Elemente
   an die neue Startseite anzugleichen. Greift nur kosmetisch ein.
   Markup je Seite (direkt nach <body>):
     <div class="ccc-grain"></div>
     <div class="ccc-frame"><span class="mk tl"></span><span class="mk tr"></span>
       <span class="mk bl"></span><span class="mk br"></span>
       <span class="side">CCC · CHAM 49.21°N · LACK·FOLIE·PFLEGE</span></div>
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{ --ccc-red:#E12C20; --ccc-chrome:#B7B9BD; --ccc-dim:#76787D; --ccc-line2:rgba(183,185,189,.24); }

/* Typografie an KINETIC angleichen */
body{ font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ font-family:'Archivo',sans-serif !important; letter-spacing:-.01em; }
.kicker,.eyebrow,.label-mono,.badge,.brand .t,.pill,.mono{ font-family:'JetBrains Mono',monospace !important; }

/* Film-Grain */
.ccc-grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Eck-Registermarken + Seiten-Koordinate */
.ccc-frame{position:fixed;inset:0;z-index:7000;pointer-events:none}
.ccc-frame .mk{position:absolute;width:13px;height:13px;border:1px solid var(--ccc-line2)}
.ccc-frame .tl{top:14px;left:14px;border-right:0;border-bottom:0}
.ccc-frame .tr{top:14px;right:14px;border-left:0;border-bottom:0}
.ccc-frame .bl{bottom:14px;left:14px;border-right:0;border-top:0}
.ccc-frame .br{bottom:14px;right:14px;border-left:0;border-top:0}
.ccc-frame .side{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.34em;color:var(--ccc-dim);text-transform:uppercase;white-space:nowrap}
@media(max-width:1100px){.ccc-frame .side{display:none}.ccc-frame .mk{width:10px;height:10px}}

/* ---- Nav/Footer-Angleichung (in-place, ohne Markup/JS-Eingriff) ---- */
.navbar{border-bottom:1px solid var(--ccc-line2) !important}
.nav-logo img,.brand img{height:44px !important;width:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}
.pill{border-radius:100px !important;text-transform:uppercase !important;letter-spacing:.08em !important;font-weight:700 !important}
.pill.gold,.pill.alt{background:var(--ccc-red) !important;color:#fff !important;border-color:var(--ccc-red) !important}
.pill.gold:hover,.pill.alt:hover{filter:brightness(1.08)}
footer{border-top:1px solid var(--ccc-line2) !important}
footer a:hover{color:var(--ccc-red) !important}
/* Mono-Eyebrows/Kicker in Markenrot */
.kicker,.eyebrow{color:var(--ccc-red) !important}

@media(prefers-reduced-motion:reduce){.ccc-grain{display:none}}
