:root{--ink:#061319;--ink2:#0a1a21;--gold:#dfbc86;--paper:#e8e2d8;--line:rgba(255,255,255,.15)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}
.site-header{height:96px;padding:0 clamp(30px,5vw,82px);display:flex;align-items:center;justify-content:space-between;background:#061117;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:16px}.brand img{width:64px;height:64px;border-radius:50%;object-fit:cover}.brand span{display:flex;flex-direction:column}.brand strong{font-size:22px;letter-spacing:.28em}.brand small{font-size:8px;letter-spacing:.25em;margin-top:6px}nav{display:flex;align-items:center;gap:38px;font-size:14px}.nav-cta{border:1px solid var(--gold);padding:17px 25px}
.hero{height:690px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-photo{position:absolute;inset:0;background:url("meyfleet-hero.jpg") 70% center/cover no-repeat;transform:scale(1.015)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,17,.99) 0%,rgba(3,12,17,.92) 34%,rgba(3,12,17,.50) 57%,rgba(3,12,17,.06) 85%),linear-gradient(0deg,rgba(3,12,17,.4),transparent 40%)}.hero-content{position:relative;z-index:2;margin-left:clamp(36px,5vw,82px);width:min(820px,88%)}.eyebrow{font-size:11px;letter-spacing:.38em;color:var(--gold);font-weight:700;margin:0 0 28px}h1{font-size:clamp(58px,6.3vw,100px);line-height:.98;letter-spacing:-.05em;font-weight:430;margin:0}h1 em,.premium h2 em{font-style:normal;color:var(--gold)}.lead{font-size:19px;line-height:1.55;max-width:680px;margin:34px 0}.actions{display:flex;gap:18px;flex-wrap:wrap}.btn,.text-btn{display:inline-block;padding:18px 27px;font-size:15px}.primary{background:var(--gold);color:#111}.ghost,.text-btn{border:1px solid rgba(255,255,255,.65)}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);padding:32px clamp(30px,5vw,82px);background:#07151b;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.benefits article{display:flex;gap:18px;padding:8px 26px;border-right:1px solid var(--line)}.benefits article:last-child{border:0}.benefits span{font-size:25px;color:var(--gold)}.benefits h3{font-size:15px;margin:0 0 7px}.benefits p{font-size:12px;line-height:1.45;color:#b8c0c3;margin:0}
.premium{display:grid;grid-template-columns:1.22fr .78fr;min-height:620px;background:#07161d}.premium-photo{background:url("meyfleet-mercedes.jpg") center/cover no-repeat;min-height:620px}.premium-copy{padding:80px clamp(42px,5vw,86px);display:flex;justify-content:center;flex-direction:column}.premium h2,.why h2,.contact h2{font-size:clamp(42px,4vw,66px);line-height:1.04;letter-spacing:-.04em;font-weight:450;margin:0 0 28px}.premium-copy>p:not(.eyebrow){font-size:17px;line-height:1.65;color:#c7ced0;margin:0 0 16px}.text-btn{align-self:flex-start;margin-top:16px;border-color:var(--gold)}
.why{padding:95px clamp(34px,6vw,105px);background:#0c1b22}.why-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-top:1px solid var(--line)}.why-grid div{padding:30px 30px 5px 0;margin-right:30px;border-right:1px solid var(--line)}.why-grid div:last-child{border:0}.why-grid p{font-size:14px;line-height:1.55;color:#b7c0c3}
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:90px clamp(34px,6vw,105px);background:var(--paper);color:#111}.eyebrow.dark{color:#987244}.contact p:not(.eyebrow){font-size:18px;line-height:1.6;color:#454b4e;max-width:560px;margin-bottom:28px}
footer{padding:34px clamp(34px,6vw,105px);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;color:#aeb7ba;font-size:12px}.footer-brand{letter-spacing:.2em}.footer-brand span{letter-spacing:normal;margin-left:8px}
@media(max-width:900px){.site-header{height:78px}.brand img{width:48px;height:48px}.brand strong{font-size:17px}nav a:not(.nav-cta){display:none}.hero{height:650px}.hero-content{margin-left:28px}.hero-photo{background-position:60% center}.benefits{grid-template-columns:1fr 1fr}.benefits article:nth-child(2){border-right:0}.premium{grid-template-columns:1fr}.premium-photo{min-height:460px}.premium-copy{padding:65px 28px}.why{padding:70px 28px}.why-grid{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr;padding:70px 28px;gap:25px}}
@media(max-width:560px){.brand small{display:none}.nav-cta{font-size:11px;padding:12px}.hero{height:650px}.hero-content{margin:0 22px}.hero-photo{background-position:68% center}.eyebrow{font-size:9px}.lead{font-size:16px}.btn{width:100%;text-align:center}.benefits{grid-template-columns:1fr;padding:18px}.benefits article{border-right:0;border-bottom:1px solid var(--line);padding:20px 4px}.premium-photo{min-height:330px}.why-grid{grid-template-columns:1fr}.why-grid div{border-right:0;border-bottom:1px solid var(--line);margin:0}footer{flex-direction:column}}

/* V4.1 – Header dauerhaft sichtbar */
.site-header{
  position:sticky !important;
  top:0;
  width:100%;
  z-index:9999 !important;
  background:#061117 !important;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* V5 – persönliche Meyfleet-Sektion */
.hero-content{padding-top:28px}
.personal{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  min-height:700px;
  background:#07161d;
}
.personal-photo{
  min-height:700px;
  overflow:hidden;
  background:#0a151a;
}
.personal-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 30%;
}
.personal-copy{
  padding:85px clamp(45px,6vw,105px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.personal-copy h2{
  font-size:clamp(42px,4vw,68px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:450;
  margin:0 0 30px;
}
.personal-copy h2 em{font-style:normal;color:var(--gold)}
.person-name{font-size:18px;line-height:1.45;margin:0 0 28px}
.person-name span{color:#aeb8bb;font-size:14px}
.personal-copy blockquote{
  margin:0 0 28px;
  padding:0 0 0 24px;
  border-left:2px solid var(--gold);
  color:#f0f1f1;
  font-size:20px;
  line-height:1.55;
  max-width:720px;
}
.personal-copy>p:not(.eyebrow):not(.person-name){
  color:#bec7ca;
  font-size:17px;
  line-height:1.7;
  max-width:720px;
}
.personal-copy .text-btn{margin-top:18px}
@media(max-width:900px){
  .personal{grid-template-columns:1fr}
  .personal-photo{min-height:560px;max-height:720px}
  .personal-copy{padding:70px 28px}
}
@media(max-width:560px){
  .hero-content{padding-top:42px}
  .personal-photo{min-height:480px}
  .personal-copy blockquote{font-size:18px}
}

/* V6.1 – finaler Design-Feinschliff */
.site-header{gap:28px}.site-header nav{flex-shrink:0}.nav-cta{white-space:nowrap;min-width:220px;text-align:center}
.contact-lines{margin:18px 0 28px!important;line-height:1.75!important}.contact-lines strong{color:#111}.contact-lines a{color:#343a3d;border-bottom:1px solid rgba(0,0,0,.25)}
.personal-photo img{object-position:54% 30%}
/* Mercedes etwas vollständiger sichtbar */
.premium-photo{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#07161d}
.legal{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:75px clamp(34px,6vw,105px);background:#09171d;border-top:1px solid rgba(255,255,255,.10)}
.legal h2{font-size:clamp(36px,3.5vw,56px);font-weight:450;letter-spacing:-.035em;margin:0}
.legal-copy{color:#bec6c9;font-size:14px;line-height:1.7}.legal-copy p{margin:0 0 20px}.legal-copy a{border-bottom:1px solid rgba(255,255,255,.25)}
.privacy-note{padding-top:55px;padding-bottom:55px;background:#071318}
@media(max-width:1100px){nav{gap:22px}.nav-cta{min-width:auto;padding-left:20px;padding-right:20px}}
@media(max-width:900px){.legal{grid-template-columns:1fr;gap:24px;padding:60px 28px}.premium-photo{background-size:cover}}

/* V6.2 – Datenschutzerklärung */
.privacy-full{align-items:start}
.privacy-copy h3{color:#fff;font-size:18px;margin:0 0 10px;font-weight:650}
.privacy-copy p{margin:0 0 26px;max-width:780px}
@media(max-width:900px){.privacy-copy h3{font-size:17px}}

/* V6.3 – korrekte Sprungpositionen bei feststehender Navigation */
html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}
#leistungen,
#ueber-meyfleet,
#kontakt,
#impressum,
#datenschutz{
  scroll-margin-top:120px;
}

/* V6.5 – Sprungnavigation sauber korrigiert
   Nur der feste Header wird berücksichtigt; keine doppelten Abstände. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
#leistungen,
#meyfleet,
#kontakt,
#impressum,
#datenschutz{
  scroll-margin-top:0;
}

/* V6.6 – iPhone / Mobile Hero */
@media (max-width: 600px){
  .site-header{
    height:92px;
    padding:0 18px;
    gap:14px;
  }
  .brand img{
    max-width:190px;
    height:auto;
  }
  .site-header nav{display:none}
  .nav-cta{
    min-width:0;
    padding:14px 17px;
    font-size:14px;
    line-height:1.15;
  }

  .hero{
    height:auto;
    min-height:760px;
    align-items:flex-start;
  }
  .hero-photo{
    background-position:62% center;
    transform:none;
  }
  .hero-content{
    margin-left:0;
    width:100%;
    padding:190px 22px 56px;
  }
  .hero .eyebrow{
    font-size:11px;
    letter-spacing:.28em;
    margin-bottom:26px;
    white-space:nowrap;
  }
  .hero h1{
    font-size:clamp(48px,13.2vw,62px);
    line-height:.94;
    letter-spacing:-.055em;
    overflow-wrap:anywhere;
    margin-bottom:28px;
  }
  .hero h1 em{
    display:block;
  }
  .hero-content>p:not(.eyebrow){
    font-size:18px;
    line-height:1.48;
    max-width:100%;
    margin-bottom:30px;
  }
  .hero-actions{
    gap:12px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:58px;
    padding:16px 18px;
    font-size:17px;
  }

  html{scroll-padding-top:92px}
}

/* V6.7 – Mobile Hero Feinschliff */
@media (max-width:600px){
  .hero-content{padding-top:155px}
  .hero h1{
    font-size:clamp(43px,11.5vw,54px);
    line-height:.96;
    letter-spacing:-.05em;
    overflow-wrap:normal;
    word-break:normal;
  }
  .hero h1 strong,
  .hero h1 span{display:block}
}

/* V6.8 – Mobile Überschrift + Header-CTA */
.mobile-title{display:none}

@media (max-width:600px){
  .site-header nav{
    display:block;
    flex-shrink:0;
  }
  .site-header nav > a:not(.nav-cta){
    display:none;
  }
  .site-header .nav-cta{
    display:block;
    min-width:0;
    padding:13px 15px;
    font-size:13px;
    white-space:nowrap;
  }

  .desktop-title{display:none}
  .mobile-title{display:inline}
  .hero h1{
    font-size:clamp(43px,11.2vw,52px);
    line-height:.94;
    letter-spacing:-.05em;
  }
  .hero h1 em{
    display:block;
    margin-top:7px;
  }
}

/* V6.9 – doppelte Desktop-Überschrift mobil sicher ausblenden */
@media (max-width:600px){
  .hero h1 .desktop-title{
    display:none !important;
  }
  .hero h1 .mobile-title{
    display:block !important;
  }
}

/* V7.0 – eine einzige Hero-Überschrift, responsive umgebrochen */
.mobile-hyphen,
.mobile-break{display:none}

@media (max-width:600px){
  .mobile-hyphen{display:inline}
  .mobile-break{display:block}
  .hero h1{
    font-size:clamp(43px,11.2vw,52px);
    line-height:.94;
    letter-spacing:-.05em;
  }
  .hero h1 em{
    display:block;
    margin-top:7px;
  }
}

/* V7.1 – Bindestrich bleibt direkt hinter „Fuhrpark“ */
@media (max-width:600px){
  .hero h1 .mobile-hyphen{
    display:inline !important;
  }
  .hero h1 br.mobile-break{
    display:block !important;
  }
}


/* V7.2 – neues freigestelltes Meyfleet-Logo */
.brand img{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:0;
  background:transparent;
  flex:0 0 auto;
}
@media(max-width:900px){
  .brand img{
    width:54px;
    height:54px;
    max-width:none;
  }
}
@media(max-width:600px){
  .brand img{
    width:58px;
    height:58px;
    max-width:none;
  }
}/* Mobile Header kompakter */
@media (max-width:600px){

  .site-header{
    height:82px;
    padding:0 18px;
    gap:12px;
  }

  .brand img{
    width:50px;
    height:50px;
  }

  .brand strong{
    font-size:20px;
    letter-spacing:.20em;
  }

  .brand small{
    display:none;
  }

  .nav-cta{
    min-width:0;
    padding:13px 16px;
    font-size:15px;
  }

  
}  

/* Mobile Abstände optimieren */
@media (max-width:600px){

  /* Automobilkompetenz */
  .premium-copy{
    padding-top:58px;
    padding-bottom:58px;
  }

  .premium-copy h2{
    margin-bottom:24px;
  }

  .premium-copy p{
    margin-bottom:20px;
  }

  /* Kontakt */
  .contact{
    padding-top:58px;
    padding-bottom:58px;
  }

  .contact h2{
    margin-bottom:28px;
  }

  .contact-copy{
    padding-top:0;
  }
}
/* Mobile Header Feinschliff */
@media (max-width:600px){

  .site-header{
    height:74px;
    padding:0 16px;
    gap:10px;
  }

  .brand img{
    width:46px;
    height:46px;
  }

  .brand strong{
    font-size:19px;
    letter-spacing:.18em;
  }

  .nav-cta{
    padding:11px 13px;
    font-size:14px;
  }

}
/* Mobile Hero Feinschliff */
@media (max-width:600px){

  .hero{
    height:auto;
    min-height:0;
  }

  .hero-content{
    padding-top:70px;
    padding-bottom:70px;
  }

  .hero-content .lead{
    margin-top:28px;
    margin-bottom:28px;
  }

  .hero-actions{
    gap:16px;
  }

}