/* MS Automotive Group GmbH, Firmenseite v3 (17.10.2026, Wunsch SW: klar getrennt von TyreX/Shopify, kein Reifen, kein TyreX-Rot).
   Farben der Dachmarke wie im MS-Logo: Schwarz #111111, Graphit #4D4D4D, Silbergrau #A6A6A6, Flächengrau #F2F2F2. Schrift Barlow (lokal). */
@font-face{font-family:"Barlow";src:url("barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("barlow-semi-condensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("barlow-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--schwarz:#111111;--graphit:#4D4D4D;--silber:#A6A6A6;--flaeche:#F2F2F2;--linie:#E0E0E0;--akzent:#111111;--akzent-2:#4D4D4D;
  --weiss:#FFFFFF;--schrift:"Barlow",Arial,sans-serif;--titel:"Barlow Semi Condensed","Barlow",Arial,sans-serif;
  --label:"Barlow Condensed","Barlow",Arial,sans-serif;--breite:1120px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--schwarz);font-family:var(--schrift);font-size:17px;line-height:1.6}
a{color:var(--schwarz);text-underline-offset:3px}a:hover{color:var(--akzent-2)}
img{max-width:100%;height:auto;display:block}
.innen{max-width:var(--breite);margin:0 auto;padding:0 16px}

/* Kopf */
header.kopf{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
header.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
header.kopf .logo img{height:36px;width:auto}
header.kopf nav{display:flex;gap:28px}
header.kopf nav a{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:15px;
  color:var(--schwarz);text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
header.kopf nav a:hover{border-bottom-color:var(--schwarz);color:var(--schwarz)}

/* Typografie */
.label{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--graphit);margin:0 0 12px}
h1,h2,h3{font-family:var(--titel);font-weight:700;line-height:1.08;margin:0 0 16px;letter-spacing:-.01em}
h1{font-size:clamp(40px,7vw,76px);max-width:14ch}
h2{font-size:clamp(30px,4.5vw,46px);max-width:20ch}
h3{font-size:24px;line-height:1.2}
.akzent{display:block;width:72px;height:4px;border-radius:999px;background:var(--schwarz);margin:24px 0}
section{padding:96px 0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--schwarz);color:var(--weiss);border:2px solid var(--schwarz);border-radius:999px;
  padding:13px 26px;font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:16px;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
.knopf:hover{background:var(--akzent-2);border-color:var(--akzent-2);color:var(--weiss)}
.knopf.hell{background:var(--weiss);border-color:var(--weiss);color:var(--schwarz)}.knopf.hell:hover{background:#E6E6E6;border-color:#E6E6E6;color:var(--schwarz)}
.knopf.rand{background:transparent;border-color:rgba(255,255,255,.55);color:var(--weiss)}
.knopf.rand:hover{border-color:var(--weiss);background:rgba(255,255,255,.08)}
.knopf .pfeil{transition:transform .15s}.knopf:hover .pfeil{transform:translateX(4px)}

/* Bühne */
.buehne{position:relative;overflow:hidden;background:var(--schwarz);color:var(--weiss);padding:136px 0 128px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px}
.buehne::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 78% 40%,rgba(17,17,17,0) 0%,rgba(17,17,17,.75) 55%,#111 85%)}
.buehne .zeichen{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(56vw,760px);opacity:.09;filter:invert(1);pointer-events:none}
.buehne .innen{position:relative}
.buehne .label{color:var(--silber)}
.buehne p.lead{max-width:52ch;font-size:20px;color:#D9D9D9;margin:0 0 36px}
.buehne .knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* Über uns */
.ueber{background:var(--weiss)}
.ueber .raster{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.ueber .raster p{color:var(--graphit);font-size:19px;margin:0 0 16px}
.punkte{display:grid;gap:16px}
.punkt{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:20px;border:1px solid var(--linie);border-radius:16px}
.punkt .zahl{width:48px;height:48px;border-radius:999px;background:var(--flaeche);display:grid;place-items:center;
  font-family:var(--titel);font-weight:700;font-size:20px;color:var(--schwarz)}
.punkt h3{font-size:21px;margin:2px 0 4px}.punkt p{margin:0;color:var(--graphit);font-size:16px}

/* Marken */
.marken{background:var(--flaeche)}
.marken-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:40px}
.marke{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:40px;display:flex;flex-direction:column;gap:16px;
  text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
a.marke:hover{border-color:var(--schwarz);box-shadow:0 16px 40px rgba(17,17,17,.10);transform:translateY(-2px);color:inherit}
.marke .marke-logo{height:44px;display:flex;align-items:center}.marke .marke-logo img{height:40px;width:auto}
.marke p{margin:0;color:var(--graphit)}
.marke .art{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--silber)}
.marke .ziel{margin-top:auto;padding-top:8px;font-family:var(--label);font-weight:600;letter-spacing:.06em;font-size:18px;color:var(--schwarz);display:flex;align-items:center;gap:8px}
a.marke:hover .ziel .pfeil{transform:translateX(4px)}.marke .pfeil{transition:transform .15s}
.marke.folgt{background:transparent;border-style:dashed;border-color:var(--silber)}
.marke.folgt .titel{font-family:var(--titel);font-weight:700;font-size:26px;color:var(--graphit)}

/* Kontakt */
.kontakt .karte{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:40px;border:1px solid var(--linie);border-radius:16px;margin-top:32px}
.kontakt .karte p{margin:0;color:var(--graphit)}
.kontakt .karte .titel{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--schwarz);margin-bottom:8px;display:block}

/* Fuss */
footer{background:var(--schwarz);color:var(--silber);padding:48px 0 32px;font-size:15px}
footer .oben{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:24px;border-bottom:1px solid #2A2A2A}
footer .oben img{height:32px;width:auto}footer img.hell{filter:invert(1) brightness(1.15)}
footer .unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px}
footer a{color:var(--silber);text-decoration:none;margin-left:24px}footer a:hover{color:var(--weiss)}
footer .unten a:first-child{margin-left:0}

/* Rechtstexte */
.text{max-width:72ch}
.text h2{margin-top:40px;font-size:28px}
.text p,.text li{color:var(--graphit)}
.text dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:0 0 16px}
.text dt{font-weight:600;color:var(--schwarz)}.text dd{margin:0;color:var(--graphit)}
.seite-titel{padding:72px 0 0}

@media (max-width:860px){
  .ueber .raster{grid-template-columns:1fr}
  .buehne .zeichen{opacity:.06;width:90vw;right:-30%}
  .kontakt .karte{grid-template-columns:1fr;gap:20px;padding:28px}
}
@media (max-width:600px){
  header.kopf nav{gap:16px}header.kopf nav a{font-size:14px}
  header.kopf nav a.nur-gross{display:none}
  header.kopf .logo img{height:28px}
  section{padding:64px 0}
  .buehne{padding:96px 0 88px}
  .marke{padding:28px}
  .text dl{grid-template-columns:1fr}.text dd{margin-bottom:8px}
  footer a{margin-left:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}