@charset "UTF-8";

/* Lokale Vergleichsentwürfe für den Startseiten-Hero. Die Hauptdatei index.html bleibt unverändert. */
.concept-switcher {
  position: relative;
  z-index: 40;
  color: #f4f3ef;
  background: #0b0c0d;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

.concept-switcher-inner {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.concept-switcher-copy span,
.concept-switcher-copy b { display: block; }
.concept-switcher-copy span { color: #777c7e; font-size: .52rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.concept-switcher-copy b { margin-top: 2px; font-size: .72rem; }
.concept-switcher-links { display: flex; align-items: center; gap: 6px; }
.concept-switcher-links a { padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #b9bcbf; font-size: .6rem; font-weight: 760; white-space: nowrap; }
.concept-switcher-links a[aria-current="page"] { color: #fff; border-color: var(--red); background: rgba(var(--red-rgb),.14); }

/* Variante 1: ruhiger Hero ohne zusätzliche Reiter oder wiederholte Inhalte. */
.hero-concept-v1 .site-header {
  border-bottom: 0;
  box-shadow: none;
}
.hero-concept-v1 .mobile-menu-backdrop { display: none; }
/* Das native hidden-Attribut bleibt auch gegen die spezifischeren mobilen
   Layoutregeln verbindlich. Andernfalls würde der Backdrop die geschlossene
   Seite weiterhin weichzeichnen und Klicks überlagern. */
body.hero-concept-v1 .mobile-menu-backdrop[hidden] { display: none !important; }
.hero-concept-v1 .site-header .header-inner,
.hero-concept-v1 .hero-inner {
  /* Kopfzeile und Hero teilen bewusst dieselbe linke Fuehrungslinie.
     So bleibt das PV-Logo auch auf sehr breiten Vollbildschirmen exakt
     ueber „Fahrzeuge präzise bewegen“ und wandert nicht zur Mitte. */
  width: min(100% - 64px,2040px);
}
.hero-concept-v1 .hero,
.hero-concept-v1 .hero-media,
.hero-concept-v1 .hero-shade {
  margin-block: 0;
  border-block: 0;
}
.hero-concept-v1 .hero-shade {
  /* Ausschliesslich horizontaler Verlauf: oben und unten bleibt das Bild kantenlos. */
  background: linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.7) 41%,rgba(5,6,7,.08) 75%);
}
.hero-concept-v1 .hero-proof {
  border-top: 0;
  border-bottom: 0;
}
.hero-concept-v1 .hero-inner {
  grid-template-columns: minmax(0,1fr);
}
.hero-concept-v1 .hero-proof {
  /* Die dreiteilige Leiste folgt wieder dem zentralen Seitenraster. */
  width: var(--shell);
  justify-self: center;
  margin-inline: auto;
}
.hero-concept-v1 .hero-copy { max-width: 960px; }
.hero-concept-v1 .hero-copy > .eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  flex: 0 0 32px;
  background: currentColor;
}
.hero-concept-v1 .hero h1 {
  width: fit-content;
  max-width: 100%;
  display: grid;
  justify-items: start;
  row-gap: 0;
  font-size: clamp(4.5rem,7.55vw,8.55rem);
  /* Enger Editorial-Look, aber mit sicherem Abstand zwischen kritischen
     Buchstabenpaaren wie r/z in „Fahrzeuge“ – auch in Safari/WebKit. */
  letter-spacing: -.035em;
  line-height: .94;
}
.hero-concept-v1 .hero-title-first,
.hero-concept-v1 .hero h1 em,
.hero-concept-v1 .hero-title-last {
  width: max-content;
  max-width: 100%;
  display: block;
}
.hero-concept-v1 .hero-title-first {
  /* „Fahrzeuge“ braucht wegen des r/z-Paares etwas mehr Laufweite. */
  letter-spacing: -.02em;
}
.hero-concept-v1 .hero h1 em {
  /* Optischer Ausgleich der unterschiedlichen Glyphenhoehen in Safari/WebKit. */
  -webkit-transform: translateY(-.055em);
  transform: translateY(-.055em);
}

/* Safari zeichnet die Inter-Glyphen vertikal anders als Chromium. */
@supports (font: -apple-system-body) {
  .hero-concept-v1 .hero h1 em {
    -webkit-transform: translateY(-.095em);
    transform: translateY(-.095em);
  }
}
.hero-concept-v1 .hero-lead {
  max-width: 760px;
  margin-top: 28px;
  line-height: 1.68;
}

/* Filmischer Bildeinstieg: ausschliesslich horizontal von links nach rechts. */
.hero-concept-v1 .hero-media::before,
.hero-concept-v1 .hero-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.hero-concept-v1 .hero-media::before {
  background: linear-gradient(90deg,rgba(var(--red-rgb),.1),transparent 24%);
}
.hero-concept-v1 .hero-media::after {
  z-index: 2;
  background: linear-gradient(90deg,rgba(5,6,7,.62) 0%,rgba(5,6,7,.26) 34%,rgba(var(--red-rgb),.13) 48%,rgba(255,255,255,.09) 52%,transparent 68%);
  -webkit-transform: translateX(-108%);
  transform: translateX(-108%);
  -webkit-animation: hero-concept-v1-reveal 1.75s cubic-bezier(.62,0,.28,1) .12s forwards;
  animation: hero-concept-v1-reveal 1.75s cubic-bezier(.62,0,.28,1) .12s forwards;
  will-change: transform;
}
@-webkit-keyframes hero-concept-v1-reveal {
  to { -webkit-transform: translateX(108%); transform: translateX(108%); }
}
@keyframes hero-concept-v1-reveal {
  to { -webkit-transform: translateX(108%); transform: translateX(108%); }
}

/* Einheitlicher Laptop-Einstieg in Chromium und Safari: von links nach rechts freilegen. */
@media (min-width: 861px) {
  .hero-concept-v1 .hero-media img {
    -webkit-transform-origin: 58% 50%;
    transform-origin: 58% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: hero-concept-v1-image-arrival 1.55s cubic-bezier(.2,.72,.24,1) both;
    animation: hero-concept-v1-image-arrival 1.55s cubic-bezier(.2,.72,.24,1) both;
    will-change: opacity,transform,filter,clip-path;
  }
}
@-webkit-keyframes hero-concept-v1-image-arrival {
  from {
    opacity: .42;
    -webkit-filter: blur(7px) brightness(.78) saturate(.82);
    filter: blur(7px) brightness(.78) saturate(.82);
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transform: translateX(-1.15%) scale(1.055);
    transform: translateX(-1.15%) scale(1.055);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0) brightness(1) saturate(1);
    filter: blur(0) brightness(1) saturate(1);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    -webkit-transform: translateX(0) scale(1.01);
    transform: translateX(0) scale(1.01);
  }
}
@keyframes hero-concept-v1-image-arrival {
  from {
    opacity: .42;
    -webkit-filter: blur(7px) brightness(.78) saturate(.82);
    filter: blur(7px) brightness(.78) saturate(.82);
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transform: translateX(-1.15%) scale(1.055);
    transform: translateX(-1.15%) scale(1.055);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0) brightness(1) saturate(1);
    filter: blur(0) brightness(1) saturate(1);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    -webkit-transform: translateX(0) scale(1.01);
    transform: translateX(0) scale(1.01);
  }
}

/* Markenfarben der Kontakt- und Social-Links im Hero. */
.hero-concept-v1 .hero-links .social-link {
  position: relative;
  border-bottom: none !important;
  text-decoration: none !important;
  font-weight: 820;
  text-shadow: 0 1px 10px rgba(0,0,0,.58);
}
.hero-concept-v1 .hero-links .social-link--phone {
  color: var(--red);
  --social-click-line: linear-gradient(90deg,transparent,var(--red) 15%,#fff 52%,var(--red) 85%,transparent);
  --social-click-glow: 0 0 15px rgba(244,67,54,.9);
}
.hero-concept-v1 .hero-links .social-link--phone:hover,
.hero-concept-v1 .hero-links .social-link--phone:focus-visible {
  color: var(--red);
  border-bottom: none !important;
}
.hero-concept-v1 .hero-links .social-link--whatsapp {
  color: #25d366;
  --social-click-line: linear-gradient(90deg,transparent,#25d366 15%,#fff 52%,#25d366 85%,transparent);
  --social-click-glow: 0 0 15px rgba(37,211,102,.9);
}
.hero-concept-v1 .hero-links .social-link--facebook {
  color: #1877f2;
  --social-click-line: linear-gradient(90deg,transparent,#1877f2 15%,#fff 52%,#1877f2 85%,transparent);
  --social-click-glow: 0 0 15px rgba(24,119,242,.9);
}
.hero-concept-v1 .hero-links .social-link--kleinanzeigen {
  color: #74d00e;
  --social-click-line: linear-gradient(90deg,transparent,#74d00e 15%,#fff 52%,#74d00e 85%,transparent);
  --social-click-glow: 0 0 15px rgba(116,208,14,.9);
}
.hero-concept-v1 .hero-links .social-link--instagram {
  position: relative;
  color: #d62976;
  --social-click-line: linear-gradient(90deg,transparent,#feda75 9%,#fa7e1e 24%,#d62976 45%,#962fbf 68%,#4f5bd5 88%,transparent);
  --social-click-glow: 0 0 15px rgba(214,41,118,.9);
  background-image: linear-gradient(90deg,#feda75 0%,#fa7e1e 24%,#d62976 48%,#962fbf 72%,#4f5bd5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-concept-v1 .hero-links .social-link--instagram::after {
  content: none;
  display: none;
}
.hero-concept-v1 .hero-links .social-link:focus-visible {
  filter: brightness(1.16);
}

/* Variante 2: kompakte, inhaltlich nutzbare Kurzanfrage. */
.hero-quick-request {
  align-self: end;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: rgba(9,10,11,.82);
  backdrop-filter: blur(16px);
}
.hero-quick-request > span { color: var(--red); font-size: .54rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.hero-quick-request h2 { max-width: 390px; margin-top: 9px; font-size: clamp(1.55rem,2.1vw,2.25rem); letter-spacing: -.035em; }
.hero-quick-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 22px; }
.hero-quick-fields div { min-height: 74px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
.hero-quick-fields small,
.hero-quick-fields b { display: block; }
.hero-quick-fields small { color: #72777a; font-size: .54rem; }
.hero-quick-fields b { margin-top: 4px; font-size: .68rem; }
.hero-quick-request .button { width: 100%; margin-top: 10px; }
.hero-quick-request > a:last-child { display: flex; justify-content: space-between; margin-top: 15px; color: #aeb2b4; font-size: .61rem; font-weight: 750; }
.hero-quick-request > a:last-child span { color: var(--red); }

/* Variante 3: Besucher entscheidet direkt nach Einsatzart. */
.hero-service-choice {
  align-self: end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  background: rgba(9,10,11,.82);
  backdrop-filter: blur(16px);
}
.hero-service-choice > p { margin: 0; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.hero-service-choice > p span,
.hero-service-choice > p b { display: block; }
.hero-service-choice > p span { color: var(--red); font-size: .54rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.hero-service-choice > p b { margin-top: 6px; font-size: .87rem; }
.hero-service-choice > a { min-height: 94px; display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); transition: background .2s; }
.hero-service-choice > a:last-child { border-bottom: 0; }
.hero-service-choice > a:hover { background: rgba(255,255,255,.055); }
.hero-service-choice i { color: var(--red); font-style: normal; font-size: .59rem; font-weight: 850; letter-spacing: .1em; }
.hero-service-choice b,
.hero-service-choice small { display: block; }
.hero-service-choice b { font-size: .78rem; }
.hero-service-choice small { margin-top: 3px; color: #777c7f; font-size: .59rem; line-height: 1.45; }
.hero-service-choice em { color: var(--red); font-style: normal; }

@media (max-width: 860px) {
  /* Der filmische Wisch bleibt der Laptopansicht vorbehalten. */
  .hero-concept-v1 .hero-media::after {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translateX(108%);
    transform: translateX(108%);
  }
  .hero-concept-v1 .hero-shade {
    background:
      linear-gradient(90deg,rgba(5,6,7,.98) 0%,rgba(5,6,7,.91) 72%,rgba(5,6,7,.78) 100%),
      linear-gradient(0deg,rgba(5,6,7,.82),rgba(5,6,7,.24) 72%);
  }
  .concept-switcher-inner { align-items: flex-start; flex-direction: column; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .concept-switcher-links { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .hero-quick-request,
  .hero-service-choice { width: min(100%,540px); }
  .hero-concept-v1 .hero h1 { line-height: .94; }

  /* Variante 1: mobiles Menü als scharfe Ebene über einem weich verschwommenen Hintergrund. */
  .hero-concept-v1 .menu-button,
  .hero-concept-v1 .menu-button span { transition: border-color .25s ease, box-shadow .25s ease, opacity .2s ease, transform .25s ease; }
  .hero-concept-v1 .menu-button[aria-expanded="true"] { border-color: var(--red); box-shadow: 0 0 0 5px rgba(var(--red-rgb),.12); }
  .hero-concept-v1 .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hero-concept-v1 .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.25); }
  .hero-concept-v1 .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .hero-concept-v1 .mobile-menu-backdrop {
    position: fixed;
    z-index: 28;
    top: calc(var(--emergency-height) + var(--header-height));
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(2,3,4,.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .hero-concept-v1 .mobile-menu {
    bottom: 0;
    height: calc(100vh - var(--emergency-height) - var(--header-height));
    height: calc(100dvh - var(--emergency-height) - var(--header-height));
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--red-rgb),.58) transparent;
    padding-bottom: max(96px,env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 92% 4%,rgba(var(--red-rgb),.11),transparent 28%),
      linear-gradient(180deg,rgba(7,8,9,.86),rgba(7,8,9,.95));
    -webkit-backdrop-filter: blur(24px) saturate(.56) brightness(.52);
    backdrop-filter: blur(24px) saturate(.56) brightness(.52);
    box-shadow: 0 24px 70px rgba(0,0,0,.58);
    transform: translateY(-16px);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.75,.25,1), visibility .28s ease;
  }
  .hero-concept-v1 .mobile-menu.is-open { transform: translateY(0); }
  .hero-concept-v1 .mobile-menu::-webkit-scrollbar { width: 4px; }
  .hero-concept-v1 .mobile-menu::-webkit-scrollbar-track { background: transparent; }
  .hero-concept-v1 .mobile-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(var(--red-rgb),.58); }
  .hero-concept-v1 .mobile-menu a { position: relative; color: rgba(255,255,255,.9); }
  .hero-concept-v1 .mobile-menu a::after { content: "↗"; position: absolute; right: 2px; color: var(--red); opacity: 0; transform: translate(-8px,8px); transition: opacity .2s ease,transform .2s ease; }
  .hero-concept-v1 .mobile-menu a:hover::after,
  .hero-concept-v1 .mobile-menu a:focus-visible::after { opacity: 1; transform: none; }
  .hero-concept-v1 .mobile-actions { transition: opacity .22s ease,transform .28s ease,visibility .22s ease; }
  .hero-concept-v1.menu-open .mobile-actions { opacity: 0; transform: translateY(100%); visibility: hidden; pointer-events: none; }
}

@media (max-width: 620px) {
  .concept-switcher-copy b { font-size: .66rem; }
  .concept-switcher-links a { padding: 7px 10px; font-size: .56rem; }
  .hero-quick-request { padding: 22px; }
  .hero-quick-fields { grid-template-columns: 1fr; }
  .hero-service-choice > a { min-height: 82px; }
  .hero-concept-v1 .hero h1 {
    font-size: clamp(3rem,14.5vw,4.5rem);
    letter-spacing: -.035em;
    line-height: .94;
  }
  .hero-concept-v1 .hero-inner,
  .hero-concept-v1 .hero-proof,
  .hero-concept-v1 .site-header .header-inner { width: calc(100% - 32px); }
  .hero-concept-v1 .mobile-menu {
    height: calc(100vh - var(--emergency-height) - var(--header-height));
    height: calc(100dvh - var(--emergency-height) - var(--header-height));
    padding-top: 22px;
    padding-bottom: max(88px,env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-concept-v1 .menu-button,
  .hero-concept-v1 .menu-button span,
  .hero-concept-v1 .mobile-menu,
  .hero-concept-v1 .mobile-menu a::after,
  .hero-concept-v1 .mobile-actions { transition: none; }
  .hero-concept-v1 .hero-media img {
    -webkit-animation: none;
    animation: none;
    -webkit-filter: none;
    filter: none;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
  }
  .hero-concept-v1 .hero-media::after {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translateX(108%);
    transform: translateX(108%);
  }
}

/* V169: kompaktes, sichtbar transparentes Handy-Menü statt schwarzer Vollbildfläche. */
@media (max-width: 860px) {
  .hero-concept-v1 .mobile-menu {
    top: calc(var(--emergency-height) + var(--header-height) + 10px);
    right: max(12px,env(safe-area-inset-right));
    bottom: auto;
    left: max(12px,env(safe-area-inset-left));
    width: auto;
    height: auto;
    max-height: calc(100vh - var(--emergency-height) - var(--header-height) - 22px);
    max-height: calc(100dvh - var(--emergency-height) - var(--header-height) - 22px);
    padding: 8px 18px max(14px,env(safe-area-inset-bottom));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    background:
      radial-gradient(circle at 88% 0,rgba(var(--red-rgb),.16),transparent 34%),
      linear-gradient(155deg,rgba(8,9,10,.54),rgba(8,9,10,.72));
    -webkit-backdrop-filter: blur(18px) saturate(.9) brightness(.78);
    backdrop-filter: blur(18px) saturate(.9) brightness(.78);
    box-shadow: 0 20px 60px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06);
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
  }
  .hero-concept-v1 .mobile-menu.is-open { transform: translateY(0) scale(1); }
  .hero-concept-v1 .mobile-menu a {
    min-height: 48px;
    padding-inline: 2px 26px;
    border-color: rgba(255,255,255,.13);
    text-shadow: 0 1px 12px rgba(0,0,0,.72);
  }
  .hero-concept-v1 .mobile-menu a:last-child { border-bottom: 0; }
  .hero-concept-v1 .mobile-menu a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(90deg,rgba(var(--red-rgb),.14),transparent 74%);
  }
}

@media (max-width: 620px) {
  .hero-concept-v1 .mobile-menu {
    height: auto;
    max-height: calc(100vh - var(--emergency-height) - var(--header-height) - 22px);
    max-height: calc(100dvh - var(--emergency-height) - var(--header-height) - 22px);
    padding-top: 7px;
    padding-bottom: max(12px,env(safe-area-inset-bottom));
  }
}

@media (max-width: 350px) {
  .hero-concept-v1 .site-header .brand > span:last-child { display: none; }
  .hero-concept-v1 .site-header .header-inner { gap: 8px; }
  .hero-concept-v1 .mobile-menu { right: 8px; left: 8px; padding-inline: 14px; }
  .hero-concept-v1 .mobile-menu a { min-height: 46px; font-size: .84rem; }
}