/* ============================================================================
   OZCARS · Fahrzeugsuche – eigenständige Komponenten-Styles
   ----------------------------------------------------------------------------
   WICHTIG: Auf diesem Mac ist kein Node installiert, das Tailwind-CSS je Seite
   wird aus dem laufenden Play-CDN extrahiert (siehe Projektnotizen). Klassen,
   die es nur in neuem Markup oder nur in JS-Strings gibt, fehlen deshalb im
   kompilierten CSS. Alles hier ist darum bewusst HANDGESCHRIEBEN und hängt an
   keinem Build – die Fahrzeugsuche funktioniert auch dann, wenn das Tailwind-
   CSS nicht neu erzeugt wurde.

   Enthält:
   1. Navigations-Feinschliff (6. Menüpunkt passt sonst nicht in eine Zeile)
   2. .ozf-band   – Werbe-Banner "Wir finden jedes Auto" für alle Unterseiten
   3. .ozf-*      – der Wunschfahrzeug-Konfigurator (assets-car-request.js)
   ========================================================================== */

:root{
  --ozf-gold:#D4AF37;
  --ozf-gold-light:#E7CA77;
  --ozf-gold-dark:#9C7C2A;
  --ozf-line:rgba(255,255,255,.10);
  --ozf-bg:#0a0a0a;
  --ozf-card:rgba(23,23,23,.72);
}

/* ==========================================================================
   1. NAVIGATION
   Die Kopfzeile trug schon mit fünf Punkten knapp auf; mit "Fahrzeugsuche"
   sind es sechs. Zwischen 1024px und 1279px werden Schrift/Abstände darum
   gestrafft und die Telefonnummer auf das reine Symbol reduziert.
   ========================================================================== */
/* Das Logo darf niemals gestaucht werden – ohne das quetscht der Flexbox-
   Ausgleich bei knapper Breite zuerst die Bildmarke zusammen. */
#site-header nav a[aria-label*="Startseite"]{ flex:0 0 auto; }
#site-header nav a[aria-label*="Startseite"] img{ max-width:none; }

/* Bis 1535px bleibt im Kopf nur das Telefonsymbol – die ausgeschriebene
   Nummer steht ohnehin in der Fusszeile und auf der Kontaktseite. Bei genau
   1440px stiess sonst "Kontakt" an die Symbole. */
@media (max-width:1535px){
  .oz-navactions .oz-navtel{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .oz-navactions a[href^="tel:"]{ padding-left:.8rem !important; padding-right:.8rem !important; gap:0 !important; }
}
@media (min-width:1024px) and (max-width:1279px){
  .oz-navlinks{ gap:.72rem !important; }
  .oz-navlinks a{ font-size:.64rem !important; letter-spacing:.08em !important; }
  .oz-navactions{ gap:.6rem !important; }
}
@media (min-width:1280px) and (max-width:1439px){
  .oz-navlinks{ gap:1.15rem !important; }
  .oz-navlinks a{ font-size:.72rem !important; letter-spacing:.12em !important; }
  .oz-navactions{ gap:.85rem !important; }
}
@media (min-width:1440px) and (max-width:1535px){
  .oz-navlinks{ gap:1.45rem !important; }
}
@media (min-width:1536px){
  .oz-navlinks{ gap:1.7rem !important; }
}
/* Textlink in bestehende Absaetze (z. B. auf dienstleistungen.html) */
.ozf-inline-link{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(212,175,55,.4); padding-bottom:1px;
  transition:border-color .35s ease, color .35s ease;
}
.ozf-inline-link:hover{ border-color:var(--ozf-gold); color:var(--ozf-gold-light); }

/* Der Menüpunkt "Fahrzeugsuche" sieht aus wie alle anderen und wird erst beim
   Darüberfahren golden – dauerhaft gelb war dem Kunden zu aufdringlich. */
.oz-nav-accent:hover{ color:var(--ozf-gold-light) !important; }

/* ==========================================================================
   2. WERBEBANNER "Jedes Auto der Welt"
   ========================================================================== */
.ozf-band{
  position:relative; overflow:hidden;
  border-top:1px solid var(--ozf-line);
  border-bottom:1px solid var(--ozf-line);
  background:
    radial-gradient(75% 130% at 15% 0%, rgba(212,175,55,.16), transparent 62%),
    linear-gradient(180deg,#101010,#0a0a0a);
}
.ozf-band-inner{
  position:relative; margin:0 auto; max-width:80rem;
  padding:4.5rem 1.25rem; display:grid; gap:3rem; align-items:center;
}
@media (min-width:1024px){
  .ozf-band-inner{ grid-template-columns:1.15fr .85fr; padding:6rem 2.5rem; gap:4rem; }
}
.ozf-band-eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ozf-gold);
}
.ozf-band-eyebrow::before{ content:''; height:1px; width:2.75rem; background:var(--ozf-gold); }
.ozf-band h2{
  margin-top:1.35rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.85rem,7.4vw,3.9rem); font-weight:600; line-height:1.06; color:#fff;
}
.ozf-band h2 em{
  font-style:normal;
  background:linear-gradient(180deg,#F0D89B 0%,#D4AF37 52%,#9C7C2A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ozf-band p{ margin-top:1.35rem; max-width:34rem; color:#a3a3a3; line-height:1.75; font-size:1rem; }
.ozf-band-points{ margin-top:2rem; display:grid; gap:.85rem; padding:0; list-style:none; }
@media (min-width:640px){ .ozf-band-points{ grid-template-columns:1fr 1fr; } }
.ozf-band-points li{
  display:flex; align-items:flex-start; gap:.7rem;
  color:#d4d4d4; font-size:.92rem; line-height:1.5;
}
.ozf-band-points li::before{
  content:''; flex:0 0 auto; margin-top:.5rem;
  height:.4rem; width:.4rem; border-radius:9999px; background:var(--ozf-gold);
  box-shadow:0 0 0 4px rgba(212,175,55,.14);
}
.ozf-band-cta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; }
.ozf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:9999px; padding:1rem 2rem;
  font:600 .8rem/1 'Inter',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:box-shadow .5s ease, border-color .4s ease, color .4s ease, background-color .4s ease, transform .4s ease;
}
.ozf-btn-gold{
  color:#0a0a0a;
  background:linear-gradient(180deg,#E7CA77 0%,#D4AF37 55%,#9C7C2A 100%);
}
.ozf-btn-gold:hover{ box-shadow:0 0 40px -6px rgba(212,175,55,.72); }
.ozf-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.18); }
.ozf-btn-ghost:hover{ border-color:var(--ozf-gold); color:var(--ozf-gold); }
.ozf-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
/* Ohne das gewinnt display:inline-flex gegen das [hidden] des Browsers – die
   Schaltflaechen "Zurueck" und "Absenden" waeren dann in jedem Schritt zu sehen. */
.ozf-btn[hidden]{ display:none !important; }
.ozf-btn svg{ height:1rem; width:1rem; flex:0 0 auto; }

/* Globus-Grafik */
.ozf-globe{ position:relative; display:flex; align-items:center; justify-content:center; }
.ozf-globe svg{ width:min(100%,24rem); height:auto; overflow:visible; }
.ozf-globe::after{
  content:''; position:absolute; inset:12% 12% 12% 12%; border-radius:9999px;
  background:radial-gradient(circle at 35% 30%, rgba(212,175,55,.30), transparent 62%);
  filter:blur(38px); pointer-events:none;
}
.ozf-globe .ozf-globe-rot{ transform-origin:100px 100px; animation:ozfSpin 46s linear infinite; }
.ozf-globe .ozf-arc{ stroke-dasharray:150; stroke-dashoffset:150; animation:ozfDraw 5.5s ease-in-out infinite; }
.ozf-globe .ozf-arc:nth-of-type(2){ animation-delay:1.1s; }
.ozf-globe .ozf-arc:nth-of-type(3){ animation-delay:2.2s; }
.ozf-globe .ozf-pin{ animation:ozfPulse 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes ozfSpin{ to{ transform:rotate(360deg); } }
@keyframes ozfDraw{ 0%{stroke-dashoffset:150} 45%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes ozfPulse{ 0%,100%{ opacity:.45; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } }

/* Kompaktes Banner (für Seiten, auf denen der große Block zu viel wäre) */
.ozf-band--slim .ozf-band-inner{ grid-template-columns:1fr; padding:3.5rem 1.25rem; text-align:center; }
@media (min-width:1024px){ .ozf-band--slim .ozf-band-inner{ padding:4.5rem 2.5rem; } }
.ozf-band--slim .ozf-band-eyebrow{ justify-content:center; }
.ozf-band--slim h2{ font-size:clamp(2rem,4vw,3rem); }
.ozf-band--slim p{ margin-left:auto; margin-right:auto; }
.ozf-band--slim .ozf-band-cta{ justify-content:center; }

/* ==========================================================================
   3. WUNSCHFAHRZEUG-KONFIGURATOR
   ========================================================================== */
.ozf{
  position:relative; border:1px solid var(--ozf-line); border-radius:1.5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  padding:1.6rem;
}
@media (min-width:768px){ .ozf{ padding:2.5rem; } }
.ozf *{ box-sizing:border-box; }

/* Fortschritt */
.ozf-progress{ margin-bottom:2rem; }
.ozf-progress-bar{ height:3px; width:100%; border-radius:9999px; background:rgba(255,255,255,.10); overflow:hidden; }
.ozf-progress-bar i{
  display:block; height:100%; width:25%; border-radius:9999px;
  background:linear-gradient(90deg,var(--ozf-gold-dark),var(--ozf-gold-light));
  transition:width .55s cubic-bezier(.16,.84,.44,1);
}
.ozf-steps{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; padding:0; list-style:none; }
.ozf-steps li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:#6b6b6b; transition:color .4s ease;
}
.ozf-steps li b{
  display:inline-flex; align-items:center; justify-content:center;
  height:1.4rem; width:1.4rem; border-radius:9999px; font-size:.68rem;
  border:1px solid rgba(255,255,255,.16); color:inherit; font-weight:600;
}
.ozf-steps li[data-state="active"]{ color:var(--ozf-gold); }
.ozf-steps li[data-state="active"] b{ border-color:var(--ozf-gold); background:rgba(212,175,55,.14); }
.ozf-steps li[data-state="done"]{ color:#d4d4d4; }
.ozf-steps li[data-state="done"] b{ border-color:rgba(212,175,55,.55); color:var(--ozf-gold); }

/* Schritte */
.ozf-step{ display:none; }
.ozf-step[data-active]{ display:block; animation:ozfIn .45s cubic-bezier(.16,.84,.44,1) both; }
@keyframes ozfIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.ozf-step > h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.6rem,3vw,2.1rem); font-weight:600; color:#fff; line-height:1.15;
}
.ozf-step > p.ozf-lead{ margin-top:.6rem; color:#8f8f8f; font-size:.9rem; line-height:1.6; }

.ozf-fieldset{ border:0; margin:2rem 0 0; padding:0; }
.ozf-fieldset > legend{
  padding:0; margin-bottom:1rem;
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ozf-gold);
}
.ozf-grid{ display:grid; gap:1.1rem; }
@media (min-width:640px){ .ozf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ozf-grid .ozf-col-2{ grid-column:1/-1; }
@media (min-width:900px){
  .ozf-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.ozf-field{ display:flex; flex-direction:column; min-width:0; }
/* Wie bei .ozf-btn: display:flex schlaegt sonst das [hidden] des Browsers,
   die kaskadierend ein-/ausgeblendeten Felder waeren immer sichtbar. */
.ozf-field[hidden]{ display:none !important; }
.ozf-field > label,
.ozf-field > .ozf-label{
  margin-bottom:.5rem; font-size:.82rem; font-weight:500; color:#e5e5e5;
}
.ozf-field .ozf-req{ color:var(--ozf-gold); }
.ozf-field small{ margin-top:.4rem; font-size:.72rem; color:#7a7a7a; line-height:1.45; }

.ozf-input,.ozf-select,.ozf-textarea{
  width:100%; border-radius:.6rem; border:1px solid rgba(255,255,255,.10);
  background:#0a0a0a; padding:.8rem 1rem; color:#fff;
  font:400 .92rem/1.4 'Inter',ui-sans-serif,system-ui,sans-serif;
  transition:border-color .3s ease, box-shadow .3s ease;
  -webkit-appearance:none; appearance:none;
}
.ozf-textarea{ resize:vertical; min-height:6.5rem; line-height:1.6; }
/* Die Zahlen-Pfeilchen des Browsers legen sich sonst ueber Platzhalter wie
   "von €" und "ab PS" und machen die Felder unleserlich. */
.ozf-input[type="number"]{ -moz-appearance:textfield; }
.ozf-input[type="number"]::-webkit-outer-spin-button,
.ozf-input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ozf-input::placeholder,.ozf-textarea::placeholder{ color:#5a5a5a; }
.ozf-input:focus,.ozf-select:focus,.ozf-textarea:focus{
  outline:none; border-color:var(--ozf-gold); box-shadow:0 0 0 1px var(--ozf-gold);
}
.ozf-input:invalid:not(:placeholder-shown){ border-color:rgba(248,113,113,.55); }
.ozf-select{
  padding-right:2.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:1.05rem;
}
.ozf-select option{ background:#141414; color:#fff; }

/* Zahlen-Paare (von / bis) */
.ozf-pair{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
.ozf-pair span{ color:#6b6b6b; font-size:.8rem; }

/* Auswahl-Pillen */
.ozf-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ozf-chip{ position:relative; }
.ozf-chip input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; inset:0;
}
.ozf-chip span{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid rgba(255,255,255,.12); border-radius:9999px;
  padding:.5rem .95rem; font-size:.82rem; color:#c8c8c8; background:rgba(255,255,255,.02);
  transition:border-color .3s ease, color .3s ease, background-color .3s ease;
  user-select:none;
}
.ozf-chip input:hover + span{ border-color:rgba(212,175,55,.5); color:#fff; }
.ozf-chip input:checked + span{
  border-color:var(--ozf-gold); color:var(--ozf-gold-light);
  background:rgba(212,175,55,.13);
}
.ozf-chip input:focus-visible + span{ box-shadow:0 0 0 2px rgba(212,175,55,.6); }
.ozf-chip i.ozf-dot{
  height:.7rem; width:.7rem; border-radius:9999px; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.35);
}

/* Aufklapper für die selteneren Ausstattungspunkte */
.ozf-more{ margin-top:.9rem; }
.ozf-more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:var(--ozf-gold); padding:.35rem 0;
  transition:color .3s ease;
}
.ozf-more > summary::-webkit-details-marker{ display:none; }
.ozf-more > summary::after{
  content:''; height:.45rem; width:.45rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .3s ease;
}
.ozf-more[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.ozf-more > summary:hover{ color:var(--ozf-gold-light); }
.ozf-more-body{ margin-top:.85rem; }

/* Erklärung unter den automatisch angepassten Auswahllisten */
.ozf-microhint{
  margin:.85rem 0 0; font-size:.74rem; line-height:1.55; color:#6f6f6f; max-width:44rem;
}

/* Ausstattungs-Gruppen */
.ozf-group{ margin-top:1.4rem; }
.ozf-group > h4{
  margin:0 0 .7rem; font-size:.74rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#9a9a9a;
}

/* Kästchen mit Rahmen (Ja/Nein-Wünsche) */
.ozf-checks{ display:grid; gap:.6rem; }
@media (min-width:640px){ .ozf-checks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ozf-check{
  display:flex; align-items:flex-start; gap:.75rem;
  border:1px solid rgba(255,255,255,.10); border-radius:.75rem;
  background:rgba(255,255,255,.02); padding:.85rem 1rem;
  font-size:.86rem; color:#c8c8c8; cursor:pointer;
  transition:border-color .3s ease, background-color .3s ease;
}
.ozf-check:hover{ border-color:rgba(212,175,55,.45); }
.ozf-check input{
  margin:.15rem 0 0; height:1.05rem; width:1.05rem; flex:0 0 auto;
  accent-color:var(--ozf-gold); cursor:pointer;
}
.ozf-check:has(input:checked){ border-color:rgba(212,175,55,.6); background:rgba(212,175,55,.08); }

/* Einwilligung */
.ozf-consent{
  display:flex; align-items:flex-start; gap:.8rem;
  border:1px solid rgba(255,255,255,.10); border-radius:.85rem;
  background:rgba(10,10,10,.5); padding:1rem 1.1rem;
  font-size:.8rem; line-height:1.6; color:#9a9a9a; cursor:pointer;
}
.ozf-consent input{ margin:.2rem 0 0; height:1.15rem; width:1.15rem; flex:0 0 auto; accent-color:var(--ozf-gold); }
.ozf-consent a{ color:var(--ozf-gold); text-underline-offset:2px; }
.ozf-consent strong{ color:#d4d4d4; font-weight:600; }

/* Zusammenfassung im letzten Schritt */
.ozf-summary{
  margin-top:1.5rem; border:1px dashed rgba(212,175,55,.35); border-radius:.9rem;
  background:rgba(212,175,55,.04); padding:1.1rem 1.25rem;
}
.ozf-summary h4{
  margin:0 0 .7rem; font-size:.7rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ozf-gold);
}
.ozf-summary dl{ margin:0; display:grid; gap:.45rem .9rem; font-size:.82rem; }
@media (min-width:640px){ .ozf-summary dl{ grid-template-columns:auto 1fr; } }
.ozf-summary dt{ color:#7f7f7f; }
.ozf-summary dd{ margin:0; color:#e5e5e5; }
.ozf-summary p{ margin:0; font-size:.82rem; color:#7f7f7f; }

/* Navigation zwischen den Schritten */
.ozf-actions{
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--ozf-line);
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center;
}
.ozf-actions .ozf-spacer{ flex:1 1 auto; }
.ozf-actions .ozf-btn{ padding:.9rem 1.75rem; }
@media (max-width:520px){
  .ozf-actions{ flex-direction:column-reverse; align-items:stretch; }
  .ozf-actions .ozf-btn{ width:100%; }
  .ozf-actions .ozf-spacer{ display:none; }
}
.ozf-hint{ font-size:.74rem; color:#6b6b6b; }

/* Statusmeldung */
.ozf-note{
  margin-top:1.1rem; border-radius:.75rem; padding:.9rem 1.1rem;
  font-size:.88rem; line-height:1.55; display:none;
}
.ozf-note[data-state]{ display:block; }
.ozf-note[data-state="ok"]{ background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.4); color:var(--ozf-gold-light); }
.ozf-note[data-state="err"]{ background:rgba(248,113,113,.10); border:1px solid rgba(248,113,113,.4); color:#fca5a5; }
.ozf-note[data-state="busy"]{ background:rgba(255,255,255,.04); border:1px solid var(--ozf-line); color:#a3a3a3; }

/* Erfolgsansicht */
.ozf-done{ text-align:center; padding:1.5rem 0 .5rem; }
.ozf-done svg{ height:3.5rem; width:3.5rem; color:var(--ozf-gold); }
.ozf-done h3{
  margin-top:1.2rem; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:2rem; font-weight:600; color:#fff;
}
.ozf-done p{ margin-top:.8rem; color:#a3a3a3; font-size:.92rem; line-height:1.7; }
.ozf-done .ozf-band-cta{ justify-content:center; }

/* Honeypot – für Menschen unsichtbar, für Bots verlockend */
.ozf-honey{
  position:absolute !important; left:-9999px !important;
  opacity:0 !important; height:0 !important; width:0 !important;
  overflow:hidden !important; pointer-events:none !important;
}

/* "So läuft es ab"-Schritte auf der Fahrzeugsuche-Seite */
.ozf-flow{ display:grid; gap:1.5rem; counter-reset:ozf-flow; }
@media (min-width:768px){ .ozf-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .ozf-flow{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ozf-flow > li{
  position:relative; list-style:none; counter-increment:ozf-flow;
  border:1px solid var(--ozf-line); border-radius:1rem;
  background:rgba(255,255,255,.02); padding:1.6rem 1.5rem 1.75rem;
}
.ozf-flow > li::before{
  content:"0" counter(ozf-flow);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:2.75rem; font-weight:600;
  color:rgba(255,255,255,.09); line-height:1;
}
.ozf-flow h3{ margin:.7rem 0 0; font-size:1.05rem; font-weight:600; color:#fff; }
.ozf-flow p{ margin:.6rem 0 0; font-size:.88rem; line-height:1.65; color:#9a9a9a; }

/* FAQ */
.ozf-faq{ display:grid; gap:.75rem; }
.ozf-faq details{
  border:1px solid var(--ozf-line); border-radius:.9rem;
  background:rgba(255,255,255,.02); overflow:hidden;
}
.ozf-faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 1.4rem;
  font-size:.98rem; font-weight:500; color:#e5e5e5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.ozf-faq summary::-webkit-details-marker{ display:none; }
.ozf-faq summary::after{
  content:''; flex:0 0 auto; height:.6rem; width:.6rem;
  border-right:1.5px solid var(--ozf-gold); border-bottom:1.5px solid var(--ozf-gold);
  transform:rotate(45deg); transition:transform .35s ease;
}
.ozf-faq details[open] summary::after{ transform:rotate(-135deg); }
.ozf-faq summary:hover{ color:#fff; }
.ozf-faq .ozf-faq-body{ padding:0 1.4rem 1.3rem; color:#9a9a9a; font-size:.9rem; line-height:1.7; }

/* ==========================================================================
   4. SEITENLAYOUT fahrzeugsuche.html
   Bewusst ebenfalls handgeschrieben: Kopf- und Fusszeile kommen unveraendert
   aus kontakt.html (deren Tailwind-Klassen im kompilierten CSS stehen), alles
   dazwischen gehoert dieser Datei und braucht keinen Build.
   ========================================================================== */
.ozf-wrap{ margin:0 auto; max-width:80rem; padding:0 1.25rem; }
@media (min-width:640px){ .ozf-wrap{ padding:0 2rem; } }
@media (min-width:1024px){ .ozf-wrap{ padding:0 2.5rem; } }
.ozf-wrap--narrow{ max-width:56rem; }

.ozf-section{ padding:5rem 0; }
@media (min-width:1024px){ .ozf-section{ padding:7rem 0; } }
.ozf-section--tight{ padding:4rem 0; }
.ozf-section--line{ border-top:1px solid var(--ozf-line); }

.ozf-eyebrow{
  display:inline-flex; align-items:center; gap:.9rem;
  font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ozf-gold);
}
.ozf-eyebrow::before{ content:''; height:1px; width:3rem; background:var(--ozf-gold); }
.ozf-h2{
  margin:1.3rem 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.75rem,6.6vw,3.25rem); font-weight:600; line-height:1.1; color:#fff;
}
.ozf-h2 em{
  font-style:normal;
  background:linear-gradient(180deg,#F0D89B 0%,#D4AF37 52%,#9C7C2A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ozf-sub{ margin-top:1.2rem; max-width:44rem; color:#a3a3a3; line-height:1.8; font-size:1rem; }

/* Kopfbereich der Seite */
.ozf-hero{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:62vh; padding:10rem 0 4rem;
}
@media (min-width:1024px){ .ozf-hero{ min-height:70vh; padding:11rem 0 6rem; } }
.ozf-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 78% 22%, rgba(212,175,55,.20), transparent 60%),
    linear-gradient(180deg,#141414 0%,#0a0a0a 72%);
}
.ozf-hero-inner{ position:relative; display:grid; gap:3rem; align-items:center; width:100%; }
/* Ohne min-width:0 wachsen Grid-Spalten auf die min-content-Breite ihres
   laengsten Wortes - eine grosse Serifen-Ueberschrift sprengt so das Layout. */
.ozf-hero-inner > *, .ozf-band-inner > *{ min-width:0; }
.ozf-hero h1, .ozf-band h2, .ozf-h2{ overflow-wrap:break-word; }
@media (min-width:1024px){ .ozf-hero-inner{ grid-template-columns:1.1fr .9fr; gap:4rem; } }
.ozf-hero h1{
  margin:1.4rem 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.05rem,8.5vw,5rem); font-weight:600; line-height:1.03; color:#fff;
}
.ozf-hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg,#F0D89B 0%,#D4AF37 52%,#9C7C2A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ozf-hero p{ margin-top:1.5rem; max-width:36rem; color:#b5b5b5; font-size:1.05rem; line-height:1.75; }
.ozf-hero .ozf-band-cta{ margin-top:2.5rem; }

/* Vertrauens-Kacheln */
.ozf-usp{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .ozf-usp{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .ozf-usp{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ozf-usp > div{
  border:1px solid var(--ozf-line); border-radius:1rem;
  background:rgba(255,255,255,.02); padding:1.6rem 1.5rem;
}
.ozf-usp svg{ height:1.75rem; width:1.75rem; color:var(--ozf-gold); }
.ozf-usp h3{ margin:1rem 0 0; font-size:1rem; font-weight:600; color:#fff; }
.ozf-usp p{ margin:.55rem 0 0; font-size:.88rem; line-height:1.65; color:#9a9a9a; }

/* Zahlenleiste */
.ozf-stats{
  display:grid; gap:1.5rem; text-align:center;
  border-top:1px solid var(--ozf-line); border-bottom:1px solid var(--ozf-line);
  padding:2.75rem 0;
}
@media (min-width:640px){ .ozf-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ozf-stats b{
  display:block; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2rem,4vw,2.9rem); font-weight:600; line-height:1;
  background:linear-gradient(180deg,#F0D89B,#D4AF37 55%,#9C7C2A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ozf-stats span{ display:block; margin-top:.6rem; font-size:.82rem; color:#8f8f8f; line-height:1.55; }

/* Abschluss-Kontaktzeile */
.ozf-direct{
  margin-top:2.5rem; display:grid; gap:1rem;
}
@media (min-width:640px){ .ozf-direct{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ozf-direct a{
  display:flex; align-items:center; gap:.85rem; text-decoration:none;
  border:1px solid var(--ozf-line); border-radius:.9rem;
  background:rgba(255,255,255,.02); padding:1.1rem 1.25rem;
  transition:border-color .4s ease;
}
.ozf-direct a:hover{ border-color:rgba(212,175,55,.55); }
.ozf-direct svg{ height:1.3rem; width:1.3rem; flex:0 0 auto; color:var(--ozf-gold); }
.ozf-direct b{ display:block; color:#fff; font-size:.92rem; font-weight:600; }
.ozf-direct small{ display:block; color:#8f8f8f; font-size:.76rem; margin-top:.15rem; }

@media (prefers-reduced-motion: reduce){
  .ozf-globe .ozf-globe-rot,
  .ozf-globe .ozf-arc,
  .ozf-globe .ozf-pin{ animation:none !important; }
  .ozf-globe .ozf-arc{ stroke-dashoffset:0 !important; }
  .ozf-step[data-active]{ animation:none !important; }
  .ozf *{ transition:none !important; }
}

/* ==========================================================================
   5. VERSAND-ANIMATION (assets-oz-send-fx.js)
   Der Wagen faehrt herein, der Brief faellt hinein, dann faehrt er ab.
   ----------------------------------------------------------------------------
   Geometrie im viewBox 340x150:
     Strasse liegt auf y=126. Der Wagen ist in seiner eigenen Zeichnung
     y=1..61 hoch (Raeder cy=51, r=10 -> Unterkante 61). Damit die Raeder
     genau auf der Strasse stehen, muss er um 126-61 = 65 nach unten.
     Geparkt steht er bei x=118, seine Ladeflaeche liegt dann bei etwa x=168.
   Zeiten muessen zu DAUER in oz-send-fx.js passen (2600 ms).
   ========================================================================== */
.ozfx{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:2rem 1rem;
}
/* Ueberstehendes wird abgeschnitten - so faehrt der Wagen sichtbar
   "von draussen" herein und wieder hinaus, statt ueber den Rand zu ragen. */
.ozfx-svg{ width:min(100%,22rem); height:auto; overflow:hidden; }
.ozfx-text{
  margin:0; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ozf-gold); opacity:0; text-align:center;
}
.ozfx-los .ozfx-text{ animation:ozfxText 2.6s ease-in-out forwards; }
@keyframes ozfxText{ 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:.35} }

.ozfx-road{ stroke:rgba(255,255,255,.16); stroke-width:2; }
.ozfx-dashes line{ stroke:rgba(212,175,55,.3); stroke-width:2; stroke-linecap:round; }
.ozfx-los .ozfx-dashes{ animation:ozfxDash 1s linear infinite; }
@keyframes ozfxDash{ to{ transform:translateX(-50px); } }

/* Wagen: hereinfahren -> kurz halten -> abfahren */
.ozfx-car{ transform:translate(-130px,65px); }
.ozfx-los .ozfx-car{ animation:ozfxCar 2.6s forwards; }
@keyframes ozfxCar{
  0%   { transform:translate(-130px,65px); animation-timing-function:cubic-bezier(.2,.7,.35,1); }
  34%  { transform:translate(118px,65px); }
  60%  { transform:translate(118px,65px); animation-timing-function:cubic-bezier(.6,0,.75,.3); }
  100% { transform:translate(380px,65px); }
}
.ozfx-los .ozfx-wheel{ animation:ozfxSpin .45s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes ozfxSpin{ to{ transform:rotate(360deg); } }

/* Brief: faellt von oben auf die Ladeflaeche und verschwindet darin */
.ozfx-letter{ transform:translate(168px,-30px); opacity:0; }
.ozfx-los .ozfx-letter{ animation:ozfxLetter 2.6s forwards; }
@keyframes ozfxLetter{
  0%,34% { transform:translate(168px,-30px) rotate(-14deg); opacity:0; }
  38%    { transform:translate(168px,-20px) rotate(-10deg); opacity:1;
           animation-timing-function:cubic-bezier(.5,0,.8,.4); }
  52%    { transform:translate(168px,82px) rotate(3deg); opacity:1; }
  58%    { transform:translate(168px,88px) scale(.6); opacity:0; }
  100%   { transform:translate(168px,88px) scale(.6); opacity:0; }
}

/* Staub, wenn der Wagen anfaehrt */
.ozfx-dust{ transform:translate(118px,120px); opacity:0; }
.ozfx-los .ozfx-dust{ animation:ozfxDust 2.6s ease-out forwards; }
@keyframes ozfxDust{
  0%,60% { transform:translate(118px,120px) scale(.4); opacity:0; }
  68%    { opacity:.85; }
  100%   { transform:translate(52px,116px) scale(1.7); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .ozfx-los .ozfx-car, .ozfx-los .ozfx-letter, .ozfx-los .ozfx-dust,
  .ozfx-los .ozfx-wheel, .ozfx-los .ozfx-dashes, .ozfx-los .ozfx-text{
    animation:none !important;
  }
  .ozfx-text{ opacity:1; }
}