/* Montserrat vom eigenen Server, mit font-display:swap.
   Vorher lud das Theme die Schrift — und zwar erst, wenn Text in einer
   bestimmten Stärke zum ersten Mal sichtbar wurde. Beim Menü bedeutete
   das bis zu drei Sekunden leere Fläche. Lizenz: SIL OFL 1.1. */
@font-face{font-family:'AR Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'AR Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url(schriften/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'AR Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url(schriften/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'AR Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url(schriften/montserrat-latin-700-normal.woff2) format('woff2')}

/* ============================================================
   Kopf und Fuss
   ============================================================ */

.rand{max-width:1560px;margin:0 auto;padding-inline:clamp(20px,3.4vw,52px);width:100%}
.sy{width:14px;height:14px;fill:currentColor;flex:none}

.skip{position:absolute;left:-9999px;z-index:200;background:#fff;color:#16163F;
  padding:14px 22px;font-weight:600;border-radius:0 0 6px 0}
.skip:focus{left:0;top:0}

/* ---------- Kopf ---------- */
/* Der Kopf muss über allem liegen. Abschnitte mit Auftritts-Animation
   erzeugen durch transform einen eigenen Stapelkontext und würden das
   Aufklappmenü sonst verdecken. */
.kopf{position:sticky;top:0;z-index:140}
/* Der Verlauf darf nicht ueber dem Aufklappmenue liegen */
.kopf::after{content:'';position:absolute;left:0;right:0;top:100%;height:120px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom, rgba(22,22,63,.34) 0%, rgba(22,22,63,.14) 42%, rgba(22,22,63,0) 100%);
  opacity:0;transition:opacity .45s ease}
body.tesla .kopf::after{opacity:1}
body.tesla .kopf[data-ab]::after{opacity:0}

/* Dienstleiste */
.dienst{background:#101033;color:#fff}
.dienst-in{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.2vw,34px);min-height:46px;
  font-size:13.5px;font-weight:500;letter-spacing:.005em}
.dg{display:flex;align-items:center;gap:14px;white-space:nowrap}
/* Rubrik, keine Überschrift: Gewicht 500 statt 700 und gedämpfte Farbe.
   Bei 700 in Versalien mit Sperrung dominiert sie sonst über die
   Telefonnummer, um die es eigentlich geht. */
.dg b{font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.dg a{display:inline-flex;align-items:center;gap:7px;color:#fff;
  text-decoration:none;transition:color .2s ease}
.dg a:hover{color:#fff}
.dg .sy{opacity:.8}
.dsoz{position:absolute;right:clamp(20px,3.4vw,52px);display:flex;align-items:center;gap:16px}
.dienst-in{position:relative}
.dsoz a{color:rgba(255,255,255,.8);display:flex;transition:color .2s ease}
.dsoz a:hover{color:#fff}
.dsoz .sy{width:15px;height:15px}
@media (max-width:1180px){.dg a:last-child{display:none}}
@media (max-width:860px){.dienst-in .dg:nth-of-type(2){display:none}}
@media (max-width:560px){.dienst-in{min-height:38px;font-size:12px}.dg b{display:none}}

/* Hauptleiste */
.haupt{background:#fff;transition:background-color .4s ease,box-shadow .4s ease}
.haupt-in{display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);min-height:80px}
.logo{flex:none;display:block}
.logo img{height:clamp(54px,4.6vw,72px);width:auto;object-fit:contain;
  transition:filter .4s ease}
.kopf[data-ab] .haupt{box-shadow:0 1px 0 rgba(22,22,63,.10), 0 8px 30px rgba(22,22,63,.07)}

/* Menue — lesbar, ruhig, in Versalien */
.nav{margin-left:auto}
.menue{list-style:none;display:flex;align-items:center;gap:clamp(2px,.6vw,10px);margin:0;padding:0}
.mp{position:relative;z-index:1}
.mp > a{display:flex;align-items:center;gap:6px;padding:29px 11px;
  font-family:var(--s);font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#16163F;text-decoration:none;position:relative;transition:color .22s ease;
  white-space:nowrap}
.mp > a::after{content:'';position:absolute;left:11px;right:11px;bottom:22px;height:2px;
  background:#A01218;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.23,1,.32,1)}
.mp:hover > a,.mp.an > a{color:#A01218}
.mp:hover > a::after,.mp.an > a::after{transform:scaleX(1)}
.pf{width:9px;height:9px;fill:currentColor;opacity:.55;transition:transform .28s ease}
.mp:hover .pf{transform:rotate(180deg)}

/* Aufklappmenue */
.klapp{position:absolute;left:-8px;top:100%;min-width:266px;background:#fff;z-index:150;
  border-top:2px solid #A01218;box-shadow:0 20px 46px rgba(22,22,63,.15);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s}
.mp:hover > .klapp,.mp:focus-within > .klapp{opacity:1;visibility:visible;transform:translateY(0)}
.klapp ul{list-style:none;margin:0;padding:6px 0}
.klapp a{display:block;padding:12px 22px;text-decoration:none;transition:background-color .2s ease}
.klapp a:hover{background:#F5F5F7}
.dn{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;color:#16163F}
/* Kein Zusatztext im Aufklappmenue — die Namen sprechen fuer sich. */
.klapp a:hover .dn{color:#A01218}


.ruf{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:14px;font-weight:700;letter-spacing:-.01em;color:#16163F;text-decoration:none;
  padding:11px 20px;border:1.5px solid rgba(22,22,63,.16);border-radius:999px;
  transition:border-color .22s ease,background-color .22s ease,color .22s ease}
.ruf:hover{border-color:#A01218;background:#A01218;color:#fff}
.ruf .sy{width:12px;height:12px}
@media (max-width:1240px){.ruf{display:none}}
@media (max-width:1100px){.nav{display:none}}

/* Burger */
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:12px 6px;
  flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:2px;background:#16163F;border-radius:2px;
  transition:transform .32s cubic-bezier(.23,1,.32,1),opacity .2s ease,background-color .4s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){.burger{display:flex}}

.mobmenue{display:none;background:#fff;border-top:1px solid #E5E4EA;
  max-height:calc(100svh - 122px);overflow-y:auto}
.mobmenue.auf{display:block}
.mobmenue ul{list-style:none;margin:0;padding:8px clamp(20px,3.4vw,52px) 28px}
.mobmenue a{display:block;padding:17px 0;border-bottom:1px solid #EFEFF3;text-decoration:none;
  font-size:17px;font-weight:600;letter-spacing:-.02em;color:#16163F}
.mobmenue .mu a{padding-left:20px;font-size:15px;font-weight:500;color:#4A4857}
.mobmenue .mruf a{margin-top:14px;border:0;color:#A01218;font-size:15px}

/* ---------- Fuss ---------- */
.fuss{background:#101033;color:#fff;padding-block:clamp(52px,6.5vw,88px) 0}
.fuss-oben{display:grid;grid-template-columns:1.1fr .75fr .75fr 1.25fr 1.15fr;
  gap:clamp(26px,3.2vw,46px);padding-bottom:clamp(40px,5vw,64px)}
@media (max-width:1000px){.fuss-oben{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.fuss-oben{grid-template-columns:1fr}}
.fuss-marke img{width:180px;opacity:.92}
.fclaim{margin-top:18px;font-size:15px;line-height:1.68;color:#EAE9F2}
.fsoz{display:flex;gap:14px;margin-top:20px}
.fsoz a{color:rgba(255,255,255,.8);display:flex;transition:color .2s ease}
.fsoz a:hover{color:#fff}
.fsoz .sy{width:17px;height:17px}
.fuss h4{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.88);margin-bottom:18px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fuss a{color:#F2F1F8;text-decoration:none;font-size:15px;transition:color .2s ease}
.fuss a:hover{color:#fff}
.fort + .fort{margin-top:20px}
.fo-t{font-size:13px;font-weight:700;color:#fff;margin-bottom:5px}
.fuss-orte p{font-size:15px;line-height:1.7;color:#EAE9F2}
.fzeit{color:rgba(255,255,255,.86);font-size:13.5px;display:inline-block;margin-top:4px}
.fuss-unten{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;
  justify-content:center;text-align:center;
  padding-block:24px;border-top:1px solid rgba(255,255,255,.10)}
.fuss-unten p{font-size:13.5px;color:rgba(255,255,255,.84)}
.fuss-unten ul{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.fuss-unten a{font-size:13.5px;color:rgba(255,255,255,.94)}

/* ---------- Kopf ueber der ersten Tafel ---------- */
body.tesla .kopf{position:fixed;left:0;right:0;top:0}
body.tesla .dienst{background:transparent;transition:background-color .4s ease}
body.tesla .haupt{background:transparent;box-shadow:none}
body.tesla .mp > a,body.tesla .ruf{color:#fff}
body.tesla .ruf{border-color:rgba(255,255,255,.38)}
body.tesla .ruf:hover{background:#fff;color:#16163F;border-color:#fff}
body.tesla .burger span{background:#fff}
body.tesla .logo img{filter:brightness(0) invert(1)}
body.tesla .dienst-in{border-bottom:1px solid rgba(255,255,255,.18)}
body.tesla .dg a,body.tesla .dg b,body.tesla .mp > a,body.tesla .ruf{
  text-shadow:0 1px 3px rgba(8,8,20,.6)}
body.tesla .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(8,8,20,.55))}
body.tesla .kopf[data-ab] .dienst{background:#101033}
body.tesla .kopf[data-ab] .dienst-in{border-bottom-color:transparent}
body.tesla .kopf[data-ab] .haupt{background:#fff;
  box-shadow:0 1px 0 rgba(22,22,63,.10), 0 8px 30px rgba(22,22,63,.07)}
body.tesla .kopf[data-ab] .mp > a,body.tesla .kopf[data-ab] .ruf{color:#16163F}
body.tesla .kopf[data-ab] .mp:hover > a,body.tesla .kopf[data-ab] .mp.an > a{color:#A01218}
body.tesla .kopf[data-ab] .ruf{border-color:rgba(22,22,63,.16)}
body.tesla .kopf[data-ab] .ruf:hover{background:#A01218;color:#fff;border-color:#A01218}
body.tesla .kopf[data-ab] .burger span{background:#16163F}
body.tesla .kopf[data-ab] .logo img{filter:none}

@media (prefers-reduced-motion:reduce){
  .klapp,.mp > a::after,.burger span,.logo img,.haupt,.dienst{transition:none}
}

/* ---------- Kopfleiste auf Tablet und Handy ---------- */
@media (max-width:1180px){
  .dienst-in{flex-wrap:wrap;justify-content:center;row-gap:4px;padding-block:9px}
  .dg a:last-child{display:none}          /* E-Mail weg, Telefon bleibt */
  .dsoz{position:static;margin-left:14px}
}
@media (max-width:860px){
  .dienst-in{gap:0 18px}
  .dg{gap:10px}
  .dienst-in .dg:nth-of-type(2){display:flex}   /* Werkstattnummer bleibt sichtbar */
  .dg b{font-size:10px;letter-spacing:.1em}
  .haupt-in{min-height:68px}
}
@media (max-width:640px){
  .dienst-in{font-size:12.5px;min-height:0;padding-block:8px}
  .dg b{display:none}
  .dg::before{content:attr(data-kurz);font-size:10px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(255,255,255,.78)}
  .dsoz{margin-left:auto}
  .logo img{height:48px}
}
@media (max-width:400px){
  .dsoz{display:none}
  .dienst-in{justify-content:space-between}
}

/* ---------- Newsletter im Fuß ---------- */
.fnews{max-width:34ch}
.fnews-t{font-size:14px;line-height:1.6;color:rgba(255,255,255,.84);margin-top:12px}
.fnews-f{display:flex;gap:8px;margin-top:16px}
.fnews-f input[type=email]{flex:1;min-width:0;font-family:var(--s);font-size:15px;
  padding:11px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff}
.fnews-f input[type=email]::placeholder{color:rgba(255,255,255,.55)}
.fnews-f input[type=email]:focus{outline:0;border-color:#fff;background:rgba(255,255,255,.14)}
.fnews-f button{flex:none;font-family:var(--s);font-size:14px;font-weight:600;
  padding:11px 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--rot);color:#fff;white-space:nowrap;
  transition:background-color .2s ease,transform .12s ease}
.fnews-f button:hover{background:var(--rot-hell)}
.fnews-f button:active{transform:scale(.97)}
.fnews-ok{margin-top:12px;font-size:12.5px;line-height:1.55}
.fnews-ok label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  color:rgba(255,255,255,.82)}
.fnews-ok input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--rot)}
.fnews-ok a{color:#fff;text-decoration:underline}
.fnews-hinweis{margin-top:12px;font-size:13.5px;line-height:1.55;padding:10px 14px;
  border-radius:10px;background:rgba(255,255,255,.12);color:#fff}
.fnews-hinweis[hidden]{display:none}
@media (max-width:900px){.fnews{max-width:none}}
@media (max-width:560px){
  .fnews-f{flex-direction:column}
  .fnews-f button{width:100%}
}

/* ============================================================
   Handy: größere Tippflächen

   Fingerspitzen treffen ungenauer als ein Mauszeiger, und wer die Hände
   nur eingeschränkt bewegen kann, braucht mehr Fläche. Richtwert sind
   48 Pixel in jede Richtung. Das Aussehen bleibt gleich, nur der
   antippbare Bereich wächst.
   ============================================================ */
@media (max-width:900px){
  .burger{min-width:48px;min-height:48px;display:inline-flex;
    align-items:center;justify-content:center}
  .dienst a{display:inline-flex;align-items:center;min-height:44px;
    padding-inline:4px}
  .dienst .soz a{min-width:44px;min-height:44px;justify-content:center}
  .krume a{display:inline-block;padding-block:12px}
  .mobmenue a{min-height:52px;display:flex;align-items:center}
  .fuss a{display:inline-flex;align-items:center;min-height:44px}
  .fuss-unten a{padding-inline:6px}
}
@media (max-width:900px){
  /* Symbole für Instagram und Facebook: Fläche statt nur Symbolgröße */
  .dienst-soz a,.soz a,.dienst a[aria-label]{min-width:48px;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:900px){
  .dsoz{display:inline-flex;gap:4px}
  .dsoz a{min-width:48px;min-height:48px;display:inline-flex;
    align-items:center;justify-content:center}
}
@media (max-width:900px){
  .fsoz{display:flex;gap:6px}
  .fsoz a{min-width:48px;min-height:48px;display:inline-flex;
    align-items:center;justify-content:center}
}
@media (max-width:900px){
  /* Die obere Leiste darf nicht ein Fünftel des Bildschirms einnehmen.
     Die Tippflächen bleiben 44 Pixel hoch, überlappen sich aber leicht
     mit dem Zeilenabstand statt ihn zu addieren. */
  .dienst{padding-block:0}
  .dienst .in{row-gap:0;column-gap:10px}
  .dienst a{min-height:44px;padding-block:0}
  .dienst .dsoz a{min-height:44px}
  .dienst span{line-height:1}
}
@media (max-width:620px){
  /* Auf schmalen Geräten nur die Nummern, die Adressen stehen im Fuß */
  .dienst a[href^="mailto"]{display:none}
}
@media (max-width:900px){
  /* Beide Nummern in einer Zeile, Symbole daneben */
  .dienst .in{padding-block:4px;flex-wrap:wrap;align-items:center}
  .dienst .dg{flex:1 1 auto}
  .dienst .dg b,.dienst .dg strong,.dienst .dg > span:first-child{font-size:11px}
}
@media (max-width:620px){
  .dienst .dg{flex:0 0 auto}
  .dienst .dsoz{margin-left:auto}
  .dienst a{min-height:44px;font-size:14.5px}
}

/* ============================================================
   Handy: aufgeräumter Kopfbereich

   Vorher: zwei Zeilen Kontaktdaten, die Symbole schief daneben, dazu ein
   kantiger roter Block als Menüsymbol — zusammen ein Fünftel des
   Bildschirms. Jetzt eine Zeile mit der Verkaufsnummer und den Symbolen.
   Die Werkstattnummer steht im Fuß und auf der Kontaktseite.
   ============================================================ */
@media (max-width:620px){
  .dienst .in{display:flex;align-items:center;justify-content:space-between;
    flex-wrap:nowrap;padding:2px 16px;column-gap:8px}
  .dienst .dg{display:inline-flex;align-items:center;gap:7px;min-width:0}
  .dienst .dg:nth-of-type(2){display:none}        /* Werkstattzeile */
  .dienst .dg > span:first-child{font-size:10.5px;letter-spacing:.14em;opacity:.8}
  .dienst a{font-size:15px;white-space:nowrap}
  .dsoz{flex:none;margin-left:0}
  .dsoz a{min-width:44px;min-height:44px}
  /* Menüknopf: runde Form statt Block, gleiche Größe wie die übrigen Ziele */
  .burger{width:48px;height:48px;border-radius:14px}
}
@media (max-width:900px){
  .burger{border-radius:14px!important;width:48px!important;height:48px!important}
}

/* Menü ohne Skript: Das unsichtbare Kontrollkästchen öffnet es, sobald das
   Menüsymbol angetippt wird — auch dann, wenn ein Zwischenspeicher-Plugin
   alle Skripte zurückhält. */
.menue-schalter{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  margin:0;padding:0;border:0;clip:rect(0 0 0 0)}
.menue-schalter:checked ~ .mobmenue{display:block}
.burger{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.burger:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.kopf:has(.menue-schalter:checked) .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kopf:has(.menue-schalter:checked) .burger span:nth-child(2){opacity:0}
.kopf:has(.menue-schalter:checked) .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Fuß auf dem Handy: Caddy-Zeichnung, Adresse, Satz und Symbole mittig */
@media (max-width:760px){
  .fuss-marke{display:flex;flex-direction:column;align-items:center;text-align:center}
  .fuss-marke img{margin-inline:auto;max-width:min(320px,80vw);height:auto}
  .fuss-marke .fdom{text-align:center;margin-inline:auto;padding-left:0}
  .fuss-marke .fclaim{text-align:center;margin-inline:auto}
  .fuss-marke .fsoz{justify-content:center;display:flex;gap:6px}
}