/* ==========================================================================
 * RegioCars · Kontaktleiste und Kopfzeile, einheitlich auf allen Seiten
 * --------------------------------------------------------------------------
 * Die Seiten hatten drei verschiedene Kopfzeilen (.nav, .rc-navbar, .rc-nav),
 * jede als schwebende Pille, jede mit eigenen Werten im seiteneigenen
 * <style>-Block. Diese Datei wird als letztes im Kopf geladen und zieht alle
 * drei auf dieselbe durchgehende Leiste, mit der gruenen Kontaktzeile darueber.
 *
 * Das !important ist noetig, weil die seiteneigenen Bloecke ihre Werte
 * ebenfalls so setzen und spaeter im Dokument stehen.
 * ========================================================================== */

:root {
  --au-kopf:   40px;   /* Hoehe der Kontaktleiste */
  --au-leiste: 68px;   /* Hoehe der Kopfzeile */
}

/* ---------- Kontaktleiste ---------- */
.au-kontaktleiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  height: var(--au-kopf);
  background: var(--rc-marke, #014d41);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 0 24px;
  font-size: 0.84rem;
  box-sizing: border-box;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.au-kontaktleiste a {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: .92;
}
.au-kontaktleiste a:hover { opacity: 1; }
.au-kontaktleiste svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Kopfzeile: aus der schwebenden Pille wird eine Leiste ---------- */
.nav,
.rc-navbar {
  position: fixed !important;
  top: var(--au-kopf) !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: var(--au-leiste) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(1, 77, 65, .10) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 24px !important;
  gap: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}
.nav.nav-scrolled,
.rc-navbar.rc-navbar-scrolled {
  box-shadow: 0 6px 24px rgba(1, 77, 65, .07) !important;
}
.nav.nav-hidden {
  transform: translateY(calc(-100% - var(--au-kopf))) !important;
}
body:has(.nav.nav-hidden) .au-kontaktleiste {
  transform: translateY(-100%);
}

.nav .nav-inner {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.nav-logo img,
.rc-navbar-brand img {
  height: 30px !important;
  max-height: 30px !important;
  max-width: 150px !important;
  width: auto !important;
}
.nav-links,
.rc-navbar-links {
  margin-left: auto !important;
  gap: 24px !important;
}
.nav-links a,
.rc-navbar-links a { font-size: 0.86rem !important; }

/* Der Knopf traegt die Akzentfarbe, nicht das Markengruen */
.nav-cta,
.rc-navbar-cta {
  background: var(--rc-orange, #ff5522) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 11px 18px !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.nav-cta:hover,
.rc-navbar-cta:hover {
  background: var(--rc-orange-tief, #e8461a) !important;
  transform: none !important;
}

/* ---------- Luft unter der Leiste fuer den jeweils ersten Abschnitt ---------- */
.hero,
.rechner-hero,
.case-hero,
.legal-page,
.thank-you-section {
  padding-top: calc(var(--au-kopf) + var(--au-leiste) + 64px) !important;
}

/* Sprungmarken sollen nicht unter der Leiste landen */
html { scroll-padding-top: calc(var(--au-kopf) + var(--au-leiste) + 12px); }

@media (max-width: 1100px) {
  .au-kontaktleiste {
    justify-content: center;
    gap: 18px;
    font-size: .78rem;
    padding: 0 14px;
  }
}
@media (max-width: 1024px) {
  .nav,
  .rc-navbar { padding: 0 14px !important; gap: 10px !important; }
  .nav-cta,
  .rc-navbar-cta { padding: 10px 14px !important; font-size: .8rem !important; }
  .nav-toggle {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 8px;
  }
  .nav.nav-open { height: auto !important; padding-bottom: 14px !important; }
  .rc-navbar.is-open { height: var(--au-leiste) !important; }
}
@media (max-width: 420px) {
  .nav-logo img,
  .rc-navbar-brand img { max-width: 108px !important; }
  .nav-cta,
  .rc-navbar-cta { padding: 9px 11px !important; font-size: .74rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .au-kontaktleiste { transition: none; }
}

/* ==========================================================================
 * Ein Gruen, kein zweites
 * --------------------------------------------------------------------------
 * Die Seite kannte drei Gruentoene: das Markengruen, ein dunkleres fuer
 * Kacheln und ein helles Minzgruen fuer Knoepfe und Auszeichner. Alle drei
 * zeigen jetzt auf dasselbe Markengruen.
 *
 * Was die anderen Toene geleistet haben, uebernehmen Mittel ohne Farbe:
 * Knoepfe, die eine Handlung ausloesen, tragen das Orange aus dem Markenkit,
 * Kacheln auf gruenem Grund ein durchscheinendes Weiss, Mauszeiger-Zustaende
 * eine Aufhellung statt einer zweiten Farbe.
 * ========================================================================== */

:root {
  --rc-green-dark:   #014d41;
  --rc-green-light:  #014d41;
  --rc-marke-tief:   #014d41;
  --rc-marke-akzent: #014d41;
}

/* ---------- Zustaende: aufhellen statt zweite Farbe ---------- */
.btn-primary:hover,
.nav-cta:hover,
.hero-card-cta:hover,
.rc-navbar-cta:hover {
  filter: brightness(1.22);
}

/* ---------- Kacheln auf gruenem Grund ---------- */
.footer-clients-more,
.footer-partner {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* ---------- Knoepfe, die eine Handlung ausloesen, tragen Orange ---------- */
.case-link,
.service-cta {
  background: var(--rc-orange) !important;
  color: #ffffff !important;
  border-color: var(--rc-orange) !important;
}
.case-link:hover,
.service-cta:hover {
  background: var(--rc-orange-tief) !important;
  border-color: var(--rc-orange-tief) !important;
}

/* ---------- Auszeichner auf dunklem Grund ---------- */
.case-strip .eyebrow,
.funnel-info .eyebrow,
.section-dark .eyebrow {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---------- Fortschritt und Haken tragen das Orange ---------- */
.funnel-progress-bar {
  background: var(--rc-orange) !important;
}
.lead-perks li::before {
  background: var(--rc-orange) !important;
  color: #ffffff !important;
}
.about-img-badge::before {
  background: var(--rc-orange) !important;
}