
:root{
  --green:#67bc1f;
  --green-hi:#85e22b;
  --bg:#050505;
  --panel:#0b0b0b;
  --panel2:#101010;
  --text:#f7f7f7;
  --muted:#a9a9a9;
  --line:#222;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Arial,Helvetica,sans-serif;line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 42px));margin:auto}
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(3,3,3,.88);border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-logo img{width:150px;height:auto}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{text-decoration:none;font-size:14px;font-weight:700}
.nav-links a:hover{color:var(--green-hi)}
.phone{
  padding:11px 17px;border:1px solid var(--green);border-radius:8px;
  color:#fff;text-decoration:none;font-weight:800;
}
.hero{
  min-height:100svh;padding:130px 0 70px;display:flex;align-items:center;
  position:relative;overflow:hidden;
  background:
   radial-gradient(circle at 82% 38%,rgba(103,188,31,.17),transparent 22%),
   linear-gradient(115deg,#050505 0%,#080808 56%,#0d0d0d 100%);
}
.hero:before{
  content:"";position:absolute;right:-8vw;top:17%;width:55vw;height:55vw;
  border:1px solid rgba(103,188,31,.17);border-radius:50%;
  box-shadow:0 0 120px rgba(103,188,31,.07);
}
.hero:after{
  content:"";position:absolute;right:-10%;bottom:12%;width:58%;
  height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);
  transform:rotate(-16deg);box-shadow:0 0 22px var(--green);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;position:relative;z-index:2}
.kicker{
  color:var(--green-hi);font-size:12px;letter-spacing:.28em;font-weight:900;
  text-transform:uppercase;margin-bottom:18px;
}
h1{
  margin:0;font-size:clamp(58px,8vw,105px);line-height:.88;
  letter-spacing:-.065em;text-transform:uppercase;font-style:italic;
}
h1 span{color:var(--green)}
.hero-copy{font-size:21px;color:#c7c7c7;max-width:590px;margin:28px 0 0}
.hero-copy strong{color:#fff}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{
  min-height:54px;padding:0 24px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none;font-weight:900;
}
.btn-green{background:var(--green);color:#050505}
.btn-green:hover{background:var(--green-hi)}
.btn-dark{border:1px solid #555;background:#0a0a0a}
.btn-dark:hover{border-color:var(--green);color:var(--green-hi)}
.hero-brand{position:relative}
.hero-brand img{width:100%;filter:drop-shadow(0 25px 55px #000)}
.hero-tag{
  margin:28px auto 0;width:max-content;max-width:100%;padding:10px 16px;
  border-left:3px solid var(--green);background:rgba(0,0,0,.6);
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;
}
.section{padding:100px 0}
.section-dark{background:#080808}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px}
.section-head h2,.about h2,.contact h2{
  font-size:clamp(36px,5vw,60px);line-height:1;margin:6px 0 0;text-transform:uppercase;
  letter-spacing:-.04em;
}
.section-head h2 span,.about h2 span,.contact h2 span{color:var(--green)}
.section-head p{max-width:470px;color:var(--muted);margin:0}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service{
  min-height:190px;padding:25px;background:linear-gradient(145deg,#111,#080808);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.service:after{
  content:"";position:absolute;right:-40px;bottom:-50px;width:120px;height:120px;
  border:1px solid rgba(103,188,31,.2);border-radius:50%;
}
.service-no{color:var(--green);font-size:12px;font-weight:900;letter-spacing:.18em}
.service h3{font-size:21px;margin:48px 0 7px}
.service p{color:#929292;margin:0;font-size:14px}
.about-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.tuning-art{
  min-height:450px;border:1px solid #202020;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,transparent 48%,rgba(103,188,31,.18) 49%,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(103,188,31,.15),transparent 28%),#090909;
}
.rim{position:absolute;width:310px;height:310px;border:26px solid #171717;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #333,0 0 50px #000}
.rim:before,.rim:after{content:"";position:absolute;inset:48px;border:5px solid var(--green);border-radius:50%;opacity:.75}
.rim:after{inset:105px;background:var(--green);border:0}
.about p{color:#b5b5b5;font-size:17px;max-width:650px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.value{border-top:2px solid var(--green);padding-top:15px}
.value strong{display:block;font-size:17px}
.value small{color:#888}
.contact{background:linear-gradient(115deg,#090909,#030303);border-top:1px solid #171717}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-list{display:grid;gap:13px;margin-top:30px}
.contact-row{display:flex;gap:14px;align-items:center;color:#d5d5d5}
.dot{width:9px;height:9px;background:var(--green);box-shadow:0 0 12px var(--green);border-radius:50%}
.contact-row a{text-decoration:none}
.contact-row a:hover{color:var(--green-hi)}
.contact-panel{border:1px solid #222;background:#0b0b0b;padding:34px}
.contact-panel .big{font-size:28px;font-weight:900;text-transform:uppercase}
.contact-panel p{color:#999}
footer{padding:28px 0;border-top:1px solid #1c1c1c;background:#030303;color:#888;font-size:13px}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer img{width:110px}
.footer-links{display:flex;gap:18px}
.footer-links a{text-decoration:none}.footer-links a:hover{color:var(--green)}
.legal{padding:130px 0 80px;min-height:100vh}
.legal-box{max-width:850px;background:#0b0b0b;border:1px solid #222;padding:45px}
.legal h1{font-size:52px;line-height:1;margin-bottom:35px}
.legal h2{margin-top:30px;color:var(--green)}
.legal p,.legal li{color:#c4c4c4}
.legal a{color:var(--green-hi)}
.back{display:inline-block;margin-bottom:30px;text-decoration:none;font-weight:800}
.menu-btn{display:none}
@media(max-width:900px){
 .nav-links{display:none}.services{grid-template-columns:repeat(2,1fr)}
 .hero-grid,.about-wrap,.contact-grid{grid-template-columns:1fr}
 .hero{text-align:center}.hero-copy{margin-left:auto;margin-right:auto}.cta{justify-content:center}
 .hero-brand{max-width:560px;margin:auto}.section-head{display:block}.section-head p{margin-top:20px}
}
@media(max-width:560px){
 .container{width:min(100% - 28px,var(--max))}.nav{height:68px}.nav-logo img{width:120px}
 .phone{font-size:12px;padding:9px 10px}.hero{padding-top:105px}
 .hero-grid{gap:45px}h1{font-size:clamp(50px,18vw,75px)}
 .hero-copy{font-size:18px}.services{grid-template-columns:1fr}.section{padding:72px 0}
 .values{grid-template-columns:1fr}.tuning-art{min-height:320px}.rim{width:230px;height:230px}
 .footer{flex-direction:column;text-align:center}.legal-box{padding:25px}.legal h1{font-size:40px}
}

/* Anfrageformular */
.inquiry-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.inquiry h2{font-size:clamp(36px,5vw,60px);line-height:1;margin:6px 0 22px;text-transform:uppercase;letter-spacing:-.04em}
.inquiry h2 span{color:var(--green)}
.inquiry-intro{color:#aaa;font-size:17px;max-width:520px}
.inquiry-note{margin-top:28px;padding-left:16px;border-left:3px solid var(--green);font-weight:700}
.inquiry-note a{color:var(--green-hi);text-decoration:none}
.form-card{background:#0b0b0b;border:1px solid #242424;padding:32px}
.form-card form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-card label{display:grid;gap:8px;color:#d8d8d8;font-size:13px;font-weight:800}
.form-card input,.form-card textarea{
 width:100%;border:1px solid #303030;background:#070707;color:#fff;border-radius:5px;
 padding:14px 15px;font:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-card textarea{resize:vertical;min-height:145px}
.form-card input:focus,.form-card textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(103,188,31,.10)}
.form-card .check{display:flex;grid-template-columns:20px 1fr;align-items:start;gap:10px;font-weight:400;line-height:1.5;color:#aaa}
.form-card .check input{width:17px;height:17px;margin-top:2px;accent-color:var(--green)}
.form-card .check a{color:var(--green-hi)}
.submit{border:0;cursor:pointer;font-size:15px}
.form-message{padding:14px 16px;margin-bottom:20px;border-left:3px solid}
.form-message.success{background:rgba(103,188,31,.1);border-color:var(--green);color:#dfffc4}
.form-message.error{background:rgba(210,55,55,.1);border-color:#d23737;color:#ffd0d0}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.nav-logo img,.hero-brand img,footer img{background:transparent}
@media(max-width:900px){.inquiry-grid{grid-template-columns:1fr}.form-card{padding:25px}}
@media(max-width:560px){.form-row{grid-template-columns:1fr}.form-card{padding:20px}}

/* Formular v2 – bewusst einspaltig und übersichtlich */
.form-card{max-width:680px;margin-left:auto}
.form-card form{display:flex;flex-direction:column;gap:19px}
.form-card label:not(.check){display:flex;flex-direction:column;gap:8px}
.form-card select{
 width:100%;border:1px solid #303030;background:#070707;color:#fff;border-radius:5px;
 padding:14px 15px;font:inherit;outline:none;appearance:auto;
}
.form-card select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(103,188,31,.10)}
.form-card textarea{min-height:250px;line-height:1.55}
.form-card input::placeholder,.form-card textarea::placeholder{color:#666}
.form-card .submit{width:100%;min-height:58px}
@media(max-width:900px){.form-card{max-width:none;margin-left:0}}


/* =========================================================
   ANFRAGEFORMULAR V3
   Alle Felder garantiert untereinander
   ========================================================= */
.inquiry-grid{
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(420px,1.25fr);
  gap:80px;
  align-items:start;
}

.form-card{
  width:100%;
  max-width:720px;
  margin:0;
  padding:38px;
  background:#0b0b0b;
  border:1px solid #262626;
  border-radius:8px;
}

.form-card form{
  display:block !important;
  width:100%;
}

.form-card form > label:not(.check){
  display:block !important;
  width:100% !important;
  margin:0 0 22px 0 !important;
  color:#f0f0f0;
  font-size:14px;
  font-weight:700;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select,
.form-card textarea{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-top:8px !important;
  padding:15px 16px !important;
  border:1px solid #343434 !important;
  border-radius:6px !important;
  background:#070707 !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1.4 !important;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select{
  height:52px !important;
}

.form-card textarea{
  min-height:280px !important;
  height:280px;
  resize:vertical;
}

.form-card select{
  cursor:pointer;
}

.form-card .check{
  display:grid !important;
  grid-template-columns:20px 1fr !important;
  gap:12px !important;
  align-items:start !important;
  width:100% !important;
  margin:5px 0 24px !important;
  font-size:13px !important;
  line-height:1.55 !important;
}

.form-card .check input{
  width:18px !important;
  height:18px !important;
  margin:2px 0 0 !important;
}

.form-card .submit{
  display:flex !important;
  width:100% !important;
  height:56px !important;
  margin:0 !important;
}

@media(max-width:900px){
  .inquiry-grid{
    grid-template-columns:1fr !important;
    gap:38px !important;
  }
  .form-card{
    max-width:100% !important;
  }
}

@media(max-width:560px){
  .form-card{
    padding:22px !important;
  }
  .form-card textarea{
    min-height:230px !important;
    height:230px;
  }
}


/* ===== Update: Logo + 8 Leistungen ===== */
.header-inner { min-height: 78px; align-items: center; }
.logo { padding-top: 10px !important; padding-bottom: 8px !important; }
.logo img { display: block; margin: 0; }

.services {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.service { min-height: 190px; }

@media (max-width: 1050px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .services { grid-template-columns: 1fr !important; }
  .logo { padding-top: 8px !important; padding-bottom: 6px !important; }
}


/* ===== Einfarbige Hellmich-Icons in den Leistungskacheln ===== */
.service-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 28px;
  color: #65d400;
}

.service-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service:hover .service-icon {
  filter: drop-shadow(0 0 6px rgba(101, 212, 0, .35));
  transform: translateY(-1px);
}

.service-icon {
  transition: transform .2s ease, filter .2s ease;
}


/* ===== Final: kompakte Leistungen + Logos + Performance-Navigation ===== */
#leistungen > .container{width:min(1480px,calc(100% - 84px))!important;max-width:none!important}
#leistungen .section-head{margin-bottom:28px!important}
#leistungen .services{width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
#leistungen .service{min-height:150px!important;height:auto!important;padding:20px 22px 18px!important}
#leistungen .service-icon{width:42px!important;height:42px!important;margin:0 0 17px!important}
#leistungen .service h3{margin:0 0 6px!important;font-size:19px}
#leistungen .service p{margin:0!important;line-height:1.45}
#leistungen.section{padding-bottom:62px!important}

/* Kleines Logo tiefer */
.nav-logo img{
  width:150px;
  height:auto;
  transform:translateY(7px);
}

/* Großes Logo inkl. MEISTERBETRIEB gemeinsam nach rechts */
.hero-brand{
  position:relative;
  transform:translateX(120px)!important;
  z-index:2;
}
.hero-visual,.hero-right{overflow:visible!important}

/* Navigation wie die Hero-Typografie: fett, italic, uppercase */
.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 3px;
  color:#f4f4f4;
  font-size:13px;
  font-weight:900;
  font-style:italic;
  letter-spacing:.045em;
  text-transform:uppercase;
  transition:color .2s ease,text-shadow .2s ease,transform .2s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:2px;
  background:#65d400;
  box-shadow:0 0 10px rgba(101,212,0,.55);
  transform:translateX(-50%);
  transition:width .22s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{
  color:#65d400;
  text-shadow:0 0 12px rgba(101,212,0,.32);
  transform:translateY(-1px);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}

/* Start als aktiver Menüpunkt */
.nav-links a[href="#start"]{color:#65d400}
.nav-links a[href="#start"]::after{width:100%}

@media(max-width:1050px){
  #leistungen .services{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-brand{transform:translateX(50px)!important}
}
@media(max-width:620px){
  #leistungen>.container{width:calc(100% - 32px)!important}
  #leistungen .services{grid-template-columns:1fr!important}
  .hero-brand{transform:none!important}
}


/* ===== Navigation aktiv nach Klick + Kontakt/Route + Rechtseiten ===== */

/* START ist nicht dauerhaft grün. Aktiv wird per :target gesteuert. */
.nav-links a[href="#start"]{
  color:#f4f4f4 !important;
}
.nav-links a[href="#start"]::after{
  width:0 !important;
}

/* Nach Klick auf einen Anker: der passende Menüpunkt bleibt hervorgehoben.
   :has() wird von aktuellen Chrome/Edge/Safari/Firefox unterstützt. */
body:has(#start:target) .nav-links a[href="#start"],
body:has(#leistungen:target) .nav-links a[href="#leistungen"],
body:has(#ueber-uns:target) .nav-links a[href="#ueber-uns"],
body:has(#anfrage:target) .nav-links a[href="#anfrage"],
body:has(#kontakt:target) .nav-links a[href="#kontakt"]{
  color:#65d400 !important;
  text-shadow:0 0 12px rgba(101,212,0,.32);
}
body:has(#start:target) .nav-links a[href="#start"]::after,
body:has(#leistungen:target) .nav-links a[href="#leistungen"]::after,
body:has(#ueber-uns:target) .nav-links a[href="#ueber-uns"]::after,
body:has(#anfrage:target) .nav-links a[href="#anfrage"]::after,
body:has(#kontakt:target) .nav-links a[href="#kontakt"]::after{
  width:100% !important;
}

/* Google-Route im Kontaktbereich */
.route-link{
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  padding:11px 15px;
  border:1px solid rgba(101,212,0,.65);
  color:#65d400;
  font-size:12px;
  font-weight:900;
  font-style:italic;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:.2s ease;
}
.route-link:hover{
  background:#65d400;
  color:#050505;
  box-shadow:0 0 18px rgba(101,212,0,.22);
}

/* Header auf Impressum/Datenschutz */
.legal-header .nav-links a{
  color:#f4f4f4 !important;
}
.legal-header .nav-links a::after{
  width:0 !important;
}
\n\n/* ===== Über-uns-Bereich: dunkle Fahrzeug-Silhouette ===== */\n/* Navi-Unterstrich komplett entfernen; aktiv/hover nur noch über Farbe/Glow */\n.nav-links a::after,\n.nav-links a:hover::after,\n.nav-links a:focus-visible::after,\nbody:has(#start:target) .nav-links a[href="#start"]::after,\nbody:has(#leistungen:target) .nav-links a[href="#leistungen"]::after,\nbody:has(#ueber-uns:target) .nav-links a[href="#ueber-uns"]::after,\nbody:has(#anfrage:target) .nav-links a[href="#anfrage"]::after,\nbody:has(#kontakt:target) .nav-links a[href="#kontakt"]::after{\n  display:none!important;\n  width:0!important;\n}\n\n#ueber-uns{\n  overflow:hidden;\n  background:\n    radial-gradient(circle at 18% 52%, rgba(101,212,0,.07), transparent 31%),\n    #050505;\n}\n#ueber-uns .about-wrap{\n  grid-template-columns:1fr 1.18fr!important;\n  gap:58px!important;\n  align-items:center!important;\n}\n.about-car{\n  position:relative;\n  min-height:430px;\n  overflow:hidden;\n  background:#050505;\n}\n.about-car::after{\n  content:"";\n  position:absolute;\n  inset:0;\n  background:linear-gradient(90deg, transparent 58%, #050505 100%);\n  pointer-events:none;\n}\n.about-car img{\n  width:100%;\n  height:430px;\n  display:block;\n  object-fit:cover;\n  object-position:43% center;\n  filter:contrast(1.06) saturate(.92);\n}\n#ueber-uns .about h2{\n  font-style:italic;\n  font-weight:900;\n  line-height:.94;\n}\n#ueber-uns .about .kicker{\n  margin-bottom:16px;\n}\n#ueber-uns .values{\n  margin-top:30px;\n}\n@media(max-width:900px){\n  #ueber-uns .about-wrap{grid-template-columns:1fr!important;gap:34px!important}\n  .about-car{min-height:320px}\n  .about-car img{height:320px}\n  .about-car::after{background:linear-gradient(180deg,transparent 68%,#050505 100%)}\n}\n

/* ===== About/Mehr-als-nur-Schrauben V2: großflächig wie Entwurf ===== */

/* Keine Linie unter der Navigation – weder aktiv noch beim Hover */
.nav-links a::after {
  display: none !important;
  content: none !important;
}

/* Abschnitt deutlich breiter und großzügiger */
#ueber-uns > .container,
.about-section > .container {
  width: min(1500px, calc(100% - 64px)) !important;
  max-width: none !important;
}

/* Zwei große Flächen statt Bild-Thumbnail */
#ueber-uns .about-grid,
.about-section .about-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 500px;
}

/* Linke Bildfläche: Auto groß, angeschnitten, ohne sichtbaren Kasten */
#ueber-uns .about-visual,
.about-section .about-visual {
  position: relative;
  min-height: 500px !important;
  overflow: hidden !important;
  background: #050505 !important;
  border: 0 !important;
}

/* Das vorhandene Fahrzeugbild füllt die linke Hälfte */
#ueber-uns .about-visual img,
.about-section .about-visual img {
  position: absolute !important;
  inset: 0 !important;
  width: 112% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 42% center !important;
  display: block !important;
}

/* Schwarzer Verlauf: Bild geht nahtlos in den Textbereich über */
#ueber-uns .about-visual::after,
.about-section .about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,0) 58%,
      rgba(5,5,5,.42) 78%,
      #050505 100%);
}

/* Textblock vertikal mittig und näher ans Auto */
#ueber-uns .about-copy,
.about-section .about-copy {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 52px 18px 52px 56px !important;
  background: #050505;
}

/* Route direkt unter der Anschrift */
.route-direct,
.contact-address .route-link,
.contact-card .route-link {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 1050px) {
  #ueber-uns .about-grid,
  .about-section .about-grid {
    grid-template-columns: 1fr 1fr !important;
    min-height: 430px;
  }

  #ueber-uns .about-visual,
  .about-section .about-visual {
    min-height: 430px !important;
  }

  #ueber-uns .about-copy,
  .about-section .about-copy {
    padding-left: 36px !important;
  }
}

@media (max-width: 760px) {
  #ueber-uns > .container,
  .about-section > .container {
    width: calc(100% - 32px) !important;
  }

  #ueber-uns .about-grid,
  .about-section .about-grid {
    grid-template-columns: 1fr !important;
  }

  #ueber-uns .about-visual,
  .about-section .about-visual {
    min-height: 330px !important;
  }

  #ueber-uns .about-visual img,
  .about-section .about-visual img {
    width: 100% !important;
    object-position: center !important;
  }

  #ueber-uns .about-visual::after,
  .about-section .about-visual::after {
    background: linear-gradient(180deg,
      rgba(5,5,5,0) 45%,
      #050505 100%);
  }

  #ueber-uns .about-copy,
  .about-section .about-copy {
    padding: 18px 0 40px !important;
  }
}


/* =========================================================
   MOBILE FIX – Hellmich KFZ
   ========================================================= */
@media (max-width: 760px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  *, *::before, *::after { box-sizing: border-box; }
  img, svg { max-width: 100%; }

  /* HEADER */
  .header-inner, header .container {
    width: 100% !important;
    max-width: none !important;
    min-height: 82px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .nav-logo {
    flex: 0 1 180px;
    min-width: 0;
    padding: 0 !important;
  }

  .nav-logo img {
    width: 170px !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .nav-links { display: none !important; }

  /* HERO */
  #start, .hero {
    width: 100% !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  #start > .container, .hero > .container, .hero-inner {
    width: 100% !important;
    max-width: none !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .hero-grid {
    display: block !important;
    width: 100% !important;
  }

  .hero-copy, .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .hero h1, .hero-title, #start h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: clamp(43px, 13vw, 62px) !important;
    line-height: .90 !important;
    letter-spacing: -.04em !important;
  }

  .hero-copy p, .hero-content p, #start .lead {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .hero-actions, .hero-buttons, .cta-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .hero-actions a, .hero-buttons a, .cta-row a {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-visual, .hero-right {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-top: 38px !important;
  }

  .hero-brand {
    width: 82% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .hero-brand img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* LEISTUNGEN */
  #leistungen > .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }

  #leistungen .section-head {
    display: block !important;
  }

  #leistungen .section-head > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  #leistungen .services {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  #leistungen .service { width: 100% !important; }

  /* ÜBER UNS / AUTOBILD */
  #ueber-uns, .about-section { overflow: hidden !important; }

  #ueber-uns > .container, .about-section > .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }

  #ueber-uns .about-grid, .about-section .about-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  #ueber-uns .about-visual, .about-section .about-visual {
    width: 100% !important;
    min-height: 300px !important;
    overflow: hidden !important;
  }

  #ueber-uns .about-visual img, .about-section .about-visual img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #ueber-uns .about-copy, .about-section .about-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 0 36px !important;
  }

  #ueber-uns .about-copy h2, .about-section .about-copy h2 {
    max-width: 100% !important;
    font-size: clamp(38px, 11vw, 54px) !important;
    line-height: .95 !important;
  }

  /* ANFRAGE */
  #anfrage > .container, .inquiry-section > .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }

  .inquiry-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
  }

  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px !important;
  }

  .form-card input, .form-card select, .form-card textarea, .form-card button {
    max-width: 100% !important;
  }

  /* KONTAKT */
  #kontakt > .container, .contact-section > .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .route-link {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .header-inner, header .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-logo { flex-basis: 155px; }
  .nav-logo img { width: 150px !important; }

  .hero h1, .hero-title, #start h1 {
    font-size: clamp(40px, 12.5vw, 54px) !important;
  }

  .hero-brand { width: 80% !important; }
}
