/* ================================================================
   Auto Vision Herzberg – gemeinsame Stile für alle Seiten
   Wird von index.html und ankauf.html eingebunden.
   ================================================================ */

/* Horizontales Scrollen auf Mobilgeräten unterbinden */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  /* clip verhindert das Scrollen, ohne einen Scroll-Container zu erzeugen –
     dadurch funktioniert der sticky Header weiterhin. Browser ohne
     clip-Unterstützung greifen auf die Zeile darüber zurück. */
  overflow-x: clip;
}

/* ---------------------------------------------------------------
   Typografie
   'Outfit'            – Überschriften, Buttons und Badges: geometrisch,
                         leicht technisch, trägt den Automotive-Look.
   'Plus Jakarta Sans' – Fließtext: ruhig und gut lesbar in langen Absätzen.
   Zusätzlich stehen die Tailwind-Klassen font-display und font-sans bereit.
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
body button,
a.font-bold,
.badge-caps,
.font-display {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

/* Enger gesetzte Versalhöhen lassen große Headlines wertiger wirken.
   Tailwind-Utilities wie tracking-tight überschreiben das bei Bedarf. */
h1, h2 { letter-spacing: -0.03em; }
h3, h4 { letter-spacing: -0.015em; }

/* Badges und Kicker: Versalien mit etwas mehr Laufweite. */
.badge-caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Ankaufformular: native Dropdown-Listen an das dunkle Design anpassen
   und einen eigenen Pfeil setzen (appearance: none entfernt den Standard). */
.ankauf-select option {
  background-color: #111827;
  color: #ffffff;
}
.ankauf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem 1.1rem;
}

/* ----------------------------------------------------------------
   Mobile Navigation
   Das Aufklapp-Menü wird per script.js über die Klasse "hidden"
   ein- und ausgeblendet; der Umschalter tauscht dabei die beiden
   Icons (Burger / Kreuz) gegeneinander aus.
   ---------------------------------------------------------------- */
#mobile-nav {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}