/* =========================================================
   /ankauf/ — Page-spezifische Styles
   Hero (Split-Screen, Foto+Glass-Formular) kommt jetzt komplett aus
   home.css (.hero/.hero-bg/.hero-scrim/.hero-in/.hero-usp/.hero-form inkl.
   Glass-Skin fuer .sf-*/.fl/.fs/.fi) — siehe extraHead in index.njk. Hier
   bleiben nur die Ankauf-spezifischen Feld-Typen (FIN-Hilfe, Datei-Upload,
   DSGVO-Checkbox), auf das dunkle Glas umgestellt statt wie zuvor auf Hell.
   ========================================================= */

/* ===== Hero-Subtext im linken Textblock (unter dem Textlogo-H1) ===== */
.hero-ankauf-p {
  color: rgba(255, 255, 255, .82);
  font-size: 17px; line-height: 1.6;
  margin-bottom: 26px;
  max-width: 480px;
}

/* ===== FIN-Feld: Label-Zeile mit "?"-Toggle, Hilfsgrafik, Zeichen-Zähler =====
   Auf Glas: helle Typo statt dunkel, Hilfsbox dunkel getintet statt weiss. */
.ankauf-form .fl-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.ankauf-form .fin-help-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: #fff; line-height: 1.3;
}
.ankauf-form .fin-help-toggle:hover { text-decoration: underline; }
.ankauf-form .fin-help-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.ankauf-form .fin-help {
  margin: 8px 0 4px;
  padding: 12px;
  background: rgba(10, 12, 15, .35);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
}
.ankauf-form .fin-svg {
  display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto;
}
.ankauf-form .fin-help-cap {
  margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, .7); text-align: center;
}
.ankauf-form .fin-help-cap strong { color: #fff; }
.ankauf-form .fin-counter {
  margin-top: 6px; font-size: 12px; font-weight: 600;
  color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums;
}
.ankauf-form .fin-counter.is-complete { color: #6fd68f; }

/* File-Input — eigener Style mit Browser-Button-Override */
.ankauf-form .fi--file {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.ankauf-form .fi--file::file-selector-button {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  margin-right: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.ankauf-form .fi--file::file-selector-button:hover {
  background: var(--accent-red);
}

/* Checkbox (DSGVO) */
.ankauf-form .fg--check { margin-top: 8px; }
.ankauf-form .fc-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.5;
}
.ankauf-form .fc-label a { color: #fff; text-decoration: underline; }
.ankauf-form .fc {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-red);
  cursor: pointer;
}
.ankauf-form .fc.is-invalid {
  outline: 2px solid #f87171;
  outline-offset: 2px;
}

/* Form-Hint (Subtext unter Inputs / kleine Sub-Links) */
.ankauf-form .fh {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  margin-top: 6px;
  line-height: 1.4;
}
.ankauf-form .fh a { color: #fff; text-decoration: underline; }

/* ===== FAQ (zwischen Hero und Vertrauens-Section) =====
   Eigenstaendige dunkle Sektion statt Wiederverwendung der hellen
   .fql/.fqi/.fqq-Akkordeon-Klassen aus main.css (die sind fuer weisse
   Karten auf warmem Grund gebaut, hier ist der Kontext durchgehend dunkel
   zwischen Hero und .cred). Flaechig --scrim-dark, KEIN eigener
   Ausblend-Fade an den Kanten: beide Nachbarn sind bereits dunkel
   (.hero--to-dark blendet dorthin aus, .cred startet deckend), ein
   weiterer Fade waere hier ueberfluessig und koennte den durchgehenden
   dunklen Block unnoetig aufhellen.
   Interaktion: natives <details>/<summary> (gleiches Pattern wie das
   Mobile-Nav-Dropdown) statt der globalen .fqq-JS-Delegation — die haengt
   an spezifischen Klassennamen, die hier bewusst nicht wiederverwendet
   werden, um das globale Akkordeon-System unberuehrt zu lassen. */
/* Transparent + ::before statt opaker Flaeche (User-Entscheidung: Hintergrund
   auf jeder Seite exakt wie auf der Startseite, keine Uebergaenge) -- vorher
   verdeckte die volldeckende --scrim-dark-Flaeche das globale Hintergrundfoto
   komplett, im Unterschied zu allen anderen Sektionen der Seite. */
.ankauf-faq {
  background: transparent;
  padding: var(--space-section-y) var(--space-gutter);
  position: relative;
}
.ankauf-faq::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--scrim-photo);
}
.ankauf-faq > * { position: relative; }
.ankauf-faq-in { max-width: 860px; margin: 0 auto; }
.ankauf-faq-h {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* Featured-Frage: der USP der Seite (bestes Preis-Netzwerk), deshalb keine
   gleichgrosse Akkordeon-Zeile wie die uebrigen fuenf, sondern eine breite,
   bereits aufgeklappte Karte mit rotem Rahmen-Akzent -- die Antwort ist
   sofort sichtbar statt hinter einem Klick versteckt. Icon in derselben
   duennen Outline-Sprache wie die Hero-USP-Icons (kein gefuellter
   Kreis-Container, kein Rot als Flaeche). */
.afq-feature {
  display: flex; align-items: flex-start; gap: var(--space-md);
  /* Transluzent statt deckend --anchor-card: laesst den dunklen
     Sektions-Hintergrund durchscheinen, Kontrast bleibt bei .72-Alpha auf
     --scrim-dark komfortabel ueber 4.5:1 (siehe Kommentar unten). */
  background: rgba(25, 28, 34, .72);
  border: 1px solid rgba(232, 32, 40, .35);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  margin-bottom: var(--space-md);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
}
.afq-feature-ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  color: var(--red-on-dark, #F04048);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.afq-feature-ic svg { width: 100%; height: 100%; }
.afq-feature-tx h3 {
  font-family: var(--font-heading);
  font-size: 19px; font-weight: 700; line-height: 1.3;
  color: #fff;
  margin-bottom: 8px;
}
.afq-feature-tx p {
  font-size: 15px; line-height: 1.65;
  color: rgba(255, 255, 255, .78);
}

/* Restliche Fragen: kompakte Akkordeon-Liste, <details> nativ (kein JS
   noetig, tastaturbedienbar per Definition). */
.afq-list {
  display: flex; flex-direction: column; gap: 8px;
}
.afq-item {
  background: rgba(25, 28, 34, .6);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s;
}
.afq-item[open] { border-color: rgba(255, 255, 255, .22); }
.afq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 600;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.afq-item summary::-webkit-details-marker { display: none; }
.afq-item summary:hover { color: var(--red-on-dark, #F04048); }
.afq-arrow { flex-shrink: 0; color: rgba(255, 255, 255, .5); transition: transform .3s ease, color .2s; }
.afq-item[open] .afq-arrow { transform: rotate(180deg); color: var(--red-on-dark, #F04048); }
.afq-a { padding: 0 22px 20px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.afq-a p { margin: 0; }
.afq-a ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.afq-a ol li::marker { color: var(--red-on-dark, #F04048); font-weight: 700; }

@media (max-width: 600px) {
  .afq-feature { flex-direction: column; gap: 14px; padding: 22px 20px; }
  .afq-item summary { padding: 16px 18px; font-size: 15px; }
  .afq-a { padding: 0 18px 18px; }
}