/* ==========================================================================
   v3-Overrides. Wird nach site.css geladen, site.css bleibt unangetastet.
   Enthaelt nur, was aus der v2-Analyse unabhaengig von Optik und Textton
   traegt: Formularschritte, sichtbare Felder, Kleinschrift-Kontrast.
   ========================================================================== */

/* 1. Hero: dritter Weg unter den beiden Buttons -------------------------- */
.hero__alt{
  margin-top:1rem; font-size:.95rem; color:var(--fg-dim); max-width:52ch;
}

/* 2. Formular in zwei Schritte ------------------------------------------- */
.formstep{ border-top:1px solid var(--line-2); padding-top:1.6rem; margin-top:2rem; }
.formstep:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.formstep__k{
  font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim); display:block; margin-bottom:.35rem;
}
.formstep__h{ font-family:var(--ff-display); font-size:1.5rem; line-height:1.15; margin-bottom:.4rem; }
.formstep__s{ color:var(--fg-dim); font-size:.95rem; margin-bottom:1.4rem; max-width:60ch; }

.formopt{ padding-top:0; }
.formopt > summary{
  cursor:pointer; list-style:none; padding:1.1rem 0;
  font-family:var(--ff-ui); font-size:1.02rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem;
}
.formopt > summary::-webkit-details-marker{ display:none; }
.formopt > summary::after{
  content:"+"; margin-left:auto; font-family:var(--ff-mono); font-size:1.2rem;
  color:var(--amber); line-height:1;
}
.formopt[open] > summary::after{ content:"\2013"; }
.formopt > summary:hover{ color:var(--amber); }
.formopt > summary:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.formopt > summary .formstep__k{ display:inline; margin-bottom:0; }

/* 3. Sichtbare Formularfelder -------------------------------------------- */
/* rgba(255,255,255,.035) war auf dunklem Grund praktisch nicht zu sehen. */
.field input,.field textarea,.field select{
  background:rgba(255,255,255,.075);
  border:1px solid var(--line-2);
  border-bottom-width:1px;
  border-radius:3px;
}
.field input:focus,.field textarea:focus,.field select:focus{
  background:rgba(255,255,255,.11);
  border-color:var(--amber);
}
.upload__zone{ border-style:solid; }

/* 4. Kleinschrift: Mindestgroesse und hoehere Deckkraft ------------------ */
.form__note,.form__privacy,.field__err{ font-size:.85rem; }

/* 5. Fliesstext eine Stufe kraeftiger, 350 wirkte auf dunklem Grund duenn - */
body{ font-weight:400; }

/* 6. Kleinschrift: Lesetext auf 12,8 px ---------------------------------- */
.disclaimer,
.arealist li,
.faqnav a,
.gallery__cap,
.note,
.notes-wide,
.tbl thead th,
.upload__rm,
.sl-card__expand{ font-size:.8rem; }

/* 7. Mono-Label, die Information tragen, eine Stufe groesser -------------
   Sperrung dafuer von .2em auf .15em zurueck, sonst brechen die
   Versalzeilen in schmalen Spalten um. Reine Zier (.scrollcue, .brand__s,
   .marquee__i, .card__no) bleibt unveraendert. */
.stat__l,
.ftr h3,.ftr h4,
.crumb,
.hero__meta dt,
.hero__badge,
.team__r,
.tile::before,
.eyebrow{ font-size:.74rem; letter-spacing:.15em; }

/* 8. Kurzantworten unter dem Zahlenband ---------------------------------- */
.quickfaq{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.6rem; grid-template-columns:1fr;
}
@media (min-width:760px){ .quickfaq{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.quickfaq li{
  border-top:1px solid var(--line-2); padding-top:1.1rem;
}
.quickfaq h3{
  font-family:var(--ff-display); font-size:1.3rem; line-height:1.2; margin-bottom:.5rem;
}
.quickfaq p{ color:var(--fg-dim); font-size:.95rem; margin-bottom:.7rem; }
.quickfaq a{ font-size:.9rem; }

/* 9. Rechtstexte: Aufzaehlungen (ul,ol ist global list-style:none) ------- */
.legal-list{ display:grid; gap:.5rem; margin-top:.2rem; }
.legal-list li{ display:flex; gap:.65rem; color:var(--fg-dim); }
.legal-list li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:.62rem;
  border-radius:50%; background:var(--amber);
}
.legal-list li strong{ color:var(--fg); font-weight:560; }

/* 10. Cookie-Banner: beide Schaltflaechen gefuellt, neutrale in Grau ----- */
.btn--neutral{ --bg:var(--fg-dim); --fgc:var(--ink-2); box-shadow:none; }
.btn--neutral::after{ background:linear-gradient(100deg,#cdd8e0,#aab8c2); }
.btn--neutral:hover{ box-shadow:0 14px 40px -14px rgba(151,169,182,.45); }
