/* Fahrzeugsuche fuer Privatkunden (/fahrzeug-gesucht/) — Mobile-First.
   Gehoert zu templates/marketplace/gesuch/*.html + static/js/ds-gesuch.js.
   Nutzt die Design-Tokens der Marketplace-Shell (--brand, --grad, --grad-dunkel,
   --line, --muted, --shadow) und die PostMotor-Fonts (fonts.css).

   Konventionen, die hier bewusst eingehalten werden:

   - Grundregeln stehen VOR jedem @media/pointer-Block. Eine Media-Query erhoeht die
     Spezifitaet NICHT — steht die Basisregel danach, gewinnt sie und die
     Vergroesserung der Touch-Ziele verpufft.
   - Ueberlauf immer mit clip, nie mit hidden: hidden macht die Wurzel zum Scrollport
     und toetet jedes position:sticky.
   - Keine weisse Schrift auf --grad (2,35:1). Der dunkle Hero-Verlauf ist derselbe
     wie in boerse-anbieten.css und misst gegen Weiss > 12:1. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* 🧨 Kopf-Polster minus Karten-Ueberlappung = sichtbare Luft unter der Siegel-Zeile (36-38 px,
   wie /leasing/; Betreiber 04.09.: „machst du das bei Fahrzeug gesucht auch so"). Die Karte ragt
   in den Kopf hinein — derselbe Dreiklang Kopf → Band → schwebende Karte wie in _stil_hub.html. */
.gs-hero{background:linear-gradient(135deg,#0d1326 0%,#232d55 100%);color:#fff;padding:46px 0 92px;text-align:center}
.gs-hero h1{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:clamp(1.6rem,4.5vw,2.5rem);letter-spacing:-.02em;margin:0 0 10px}
.gs-hero p{margin:0 auto;max-width:640px;color:#c6cde4;font-size:1.02rem}
/* 🧨 Raster, KEIN flex-wrap (Betreiber 06.09.2026: „die Groessen muessen alle gleich sein").
   Mit flex-wrap streckt Flexbox nur INNERHALB einer Zeile: sobald die drei Karten auf zwei
   oder drei Zeilen umbrechen, ist jede Karte so hoch wie ihr eigener Text — gemessen 143/143/167
   auf 390 px. `grid-auto-rows:1fr` gibt allen Zeilen die Hoehe der hoechsten, also allen Karten
   dieselbe Groesse, egal wie viele Zeilen. Und KEIN max-width auf der Karte: einspaltig stand
   sie sonst als 270-px-Streifen in einem 390-px-Bildschirm. Dieselben Regeln in
   boerse-anbieten.css und _stil_hub.html — die drei Einstiege sollen gleich aussehen. */
.gs-steps{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px;margin:26px auto 0;max-width:900px}
.gs-step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 14px;text-align:left}
@media (min-width:720px){.gs-steps{grid-template-columns:repeat(3,1fr)}}
/* 🧨 Betreiber 04.09.2026: Kreise und Knoepfe tragen den Marken-Verlauf (--grad), nicht
   die dunkle Kontrast-Fassung --grad-dunkel („dieses haessliche Orange") — dieselbe
   Entscheidung wie auf /leasing/ und /auto-anbieten/ (.bo-step .n). */
.gs-step .n{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.22);font-weight:800;font-size:.85rem;align-items:center;justify-content:center;margin-bottom:8px}
.gs-step b{display:block;font-size:.95rem;margin-bottom:3px}
.gs-step span{font-size:.83rem;color:#c6cde4;line-height:1.45}
/* 🧨🧨 Doppelte Klasse ist PFLICHT, nicht Kosmetik: `.gs-hero p` (0,1,1) drei Zeilen weiter
   oben ist SPEZIFISCHER als `.gs-trust` (0,1,0) und hat bis zum 06.09.2026 margin, font-size,
   color und max-width dieser Zeile gefressen — gemessen `margin:0px` und `16.32px` statt
   26 px und 13,76 px. Die Siegel-Zeile klebte dadurch ohne jeden Abstand an der dritten
   Schrittkarte (Betreiber 06.09.: „da ist kein Abstand"). Die Reihenfolge im Stylesheet
   hilft NICHT — nur Spezifitaet schlaegt Spezifitaet. Auf /auto-anbieten/ trat es nie auf:
   .bo-trust ist dort ein <div>, kein <p>, und `.bo-hero p` greift nicht. */
.gs-trust,.gs-hero .gs-trust{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;margin:26px auto 0;max-width:900px;font-size:.86rem;color:#d9dff2;font-weight:700}
.gs-trust span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ── Formular ─────────────────────────────────────────────────────────── */
.gs-card{position:relative;max-width:760px;margin:-56px auto 48px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 22px}
/* 🧨 Kartentitel + Einleitung — Betreiber 06.09.2026: „bei Was suchst du ist das nicht
   so huebsch gemacht auf der mobilen Ansicht als wie bei den anderen". Gemessen war der
   Unterschied nicht Geschmack, sondern Struktur: /auto-anbieten/ und /leasing/ oeffnen die
   Karte mit Titel (20 px) plus einem Satz, diese Seite begann direkt mit einer
   ABSCHNITTS-Ueberschrift in 17,3 px. Dieselben Werte wie `.bo-card h2` / `.bo-card .sub`
   in boerse-anbieten.css:24-25 — die drei Einstiege sollen gleich aussehen. */
.gs-titel{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:1.25rem;margin:0 0 4px}
.gs-sub{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.gs-h2{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:1.08rem;margin:26px 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gs-h2:first-of-type{margin-top:0}
.gs-h2 i{font-style:normal;font-weight:600;font-size:.82rem;color:var(--muted)}
.gs-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.gs-feld{display:block;margin-bottom:13px}
.gs-feld>span{display:block;font-weight:700;font-size:.84rem;margin-bottom:5px}
.gs-feld>span i{font-style:normal;font-weight:600;color:var(--muted)}
.gs-feld>span b{color:var(--brand)}
/* 16px Grundschrift in Eingabefeldern: darunter zoomt iOS beim Fokus die ganze
   Seite. Basisregel, NICHT in einem Breiten-Block — auf dem iPad zoomt es genauso. */
.gs-feld input,.gs-feld select,.gs-feld textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:.62rem .75rem;font:inherit;font-size:16px;background-color:#fff;min-height:44px}
.gs-feld textarea{min-height:88px;resize:vertical}
.gs-feld input:focus-visible,.gs-feld select:focus-visible,.gs-feld textarea:focus-visible{outline:2px solid rgba(224,36,94,.35);outline-offset:1px;border-color:var(--brand)}
.gs-hint{font-size:.82rem;color:var(--muted);line-height:1.5;margin:6px 0 0}

/* Chips: Auswahl rein per CSS ueber :checked — kein JS, kein Inline-Handler. */
.gs-chips-block{margin:4px 0 8px}
.gs-chips-label{display:block;font-weight:700;font-size:.8rem;color:var(--muted);margin:12px 0 6px}
.gs-chips{display:flex;flex-wrap:wrap;gap:8px}
.gs-chip{position:relative;display:inline-flex}
.gs-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.gs-chip span{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.87rem;font-weight:700;background:#fff;color:#1c2540}
.gs-chip input:checked+span{background:#eef4ff;border-color:#1d4fd8;color:#1d4fd8}
.gs-chip input:focus-visible+span{outline:2px solid rgba(224,36,94,.35);outline-offset:1px}

/* Anfrageart-Umschalter. Grundregeln VOR dem @media-Block am Dateiende. */
.gs-art{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.gs-art-karte{position:relative;flex:1 1 160px;display:flex}
.gs-art-karte input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.gs-art-karte span{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;font-weight:800;font-size:.95rem;background:#fff;color:#1c2540}
.gs-art-karte input:checked+span{background:#eef4ff;border-color:#1d4fd8;color:#1d4fd8}
.gs-art-karte input:focus-visible+span{outline:2px solid rgba(224,36,94,.35);outline-offset:1px}

.gs-kanal{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.gs-kanal-karte{flex:1 1 150px;display:flex;gap:9px;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer;font-weight:700;font-size:.89rem}
.gs-kanal-karte input{width:auto;accent-color:#e0245e}

.gs-loc{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:.5rem .85rem;border:1px solid var(--line);border-radius:11px;background:#fff;font:inherit;font-size:.87rem;font-weight:700;cursor:pointer}
.gs-consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);line-height:1.55;margin-top:18px}
.gs-consent input{margin-top:3px;accent-color:#e0245e;min-width:18px;min-height:18px}
.gs-consent-optional{background:rgba(224,36,94,.045);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-top:14px}
.gs-submit{margin-top:20px;width:100%;justify-content:center;font-size:1.02rem;padding:.85rem 1rem;min-height:48px}
.gs-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:700;margin:0 0 16px}
.gs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:clip}
.gs-zaehler{margin:10px 0 0;font-size:.86rem;font-weight:700;color:#0f7a4a}

/* ── Erfolgs-/Fehlerseiten ────────────────────────────────────────────── */
.gs-ok{max-width:640px;margin:60px auto;padding:0 16px;text-align:center}
.gs-ok .card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:38px 26px}
.gs-ok h1{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:1.5rem;margin:12px 0 10px}
.gs-ok p{color:var(--muted);line-height:1.6;margin:0 0 10px}

/* ── Regelseite ───────────────────────────────────────────────────────── */
.gs-regeln{max-width:760px;margin:34px auto 56px;padding:0 16px}
.gs-regeln h1{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:clamp(1.4rem,3.5vw,2rem);margin:0 0 8px}
.gs-regeln h2{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:1.08rem;margin:28px 0 8px}
.gs-regeln p{line-height:1.65;margin:0 0 10px}
.gs-lead{color:var(--muted);font-size:1.02rem}

/* ── Verwaltungsseite des Kaeufers ────────────────────────────────────── */
.gv-wrap{max-width:820px;margin:28px auto 56px;padding:0 16px}
.gv-wrap h1{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:clamp(1.35rem,3.4vw,1.9rem);margin:0 0 14px}
.gv-banner{background:#f4f6fc;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:700;margin:0 0 14px}
.gv-gruen{background:#ecfdf3;border-color:#b5e8c8;color:#0f7a4a}
.gv-rot{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.gv-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 18px;margin:0 0 16px}
.gv-card h2{font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:800;font-size:1.05rem;margin:0 0 12px}
.gv-zuschlag{border-color:#b5e8c8;background:#ecfdf3}
.gv-daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.gv-daten div{display:flex;flex-direction:column;gap:2px}
.gv-daten span{font-size:.76rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.gv-wunsch{white-space:pre-line;background:#f4f6fc;border-radius:10px;padding:11px 13px;margin:12px 0 0;font-size:.9rem;line-height:1.55}

.gv-angebot{border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin:0 0 12px}
.gv-gewaehlt{border-color:#b5e8c8;background:#ecfdf3}
.gv-a-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.gv-a-kopf b{font-size:1.02rem}
.gv-preis{font-size:1.3rem;font-weight:800;color:#0f7a4a}
.gv-a-meta{font-size:.86rem;color:var(--muted);margin-top:3px}
.gv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gv-chip{font-size:.78rem;font-weight:700;border-radius:999px;padding:.22rem .6rem;border:1px solid var(--line)}
.gv-chip-ok{background:#ecfdf3;border-color:#b5e8c8;color:#0f7a4a}
.gv-chip-warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.gv-msg{white-space:pre-line;background:#f4f6fc;border-radius:10px;padding:11px 13px;margin:12px 0 0;font-size:.89rem;line-height:1.55}
.gv-badge{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:800;color:#0f7a4a}
.gv-aktionen{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.gv-link,.gv-danger{background:none;border:0;font:inherit;font-size:.87rem;font-weight:700;cursor:pointer;min-height:44px;padding:0 .35rem;color:var(--muted)}
.gv-danger{color:#b91c1c}
.gv-link:focus-visible,.gv-danger:focus-visible{outline:2px solid rgba(224,36,94,.35);outline-offset:2px;border-radius:6px}

/* ── Schmale Viewports: NACH allen Grundregeln ────────────────────────── */
/* ── „Genauer werden": optionale Detailtiefe ──────────────────────────────────
   Ein natives details/summary-Paar. Kein JS, kein Inline-Handler, funktioniert
   ohne Skript und mit Tastatur — die Zusammenfassungszeile ist von Haus aus
   fokussierbar. Grundregeln stehen VOR dem Endblock fuer grobe Zeiger, weil eine
   Media-Abfrage die Spezifitaet NICHT erhoeht und sonst je nach Reihenfolge
   gewinnt oder verliert.
   🧨 Der Block ist bewusst zugeklappt: das Pflichtformular soll auf dem Handy eine
   Bildschirmhoehe bleiben. Nach einem Formularfehler haelt ihn das Server-Flag
   detail_offen auf, sonst haelt der Nutzer seine Eingaben fuer verloren. */
.gs-detail{position:relative;margin:14px 0 4px;border:1px solid var(--line);border-radius:14px;background:#fbfcff;overflow:hidden}
.gs-detail-sum{display:flex;flex-direction:column;gap:2px;padding:.85rem 1rem;cursor:pointer;list-style:none;min-height:44px;justify-content:center}
.gs-detail-sum::-webkit-details-marker{display:none}
.gs-detail-sum::after{content:"▾";position:absolute;right:1rem;font-size:1.1rem;color:var(--muted);transition:transform .18s}
.gs-detail[open] .gs-detail-sum::after{transform:rotate(180deg)}
.gs-detail-sum:focus-visible{outline:2px solid rgba(29,79,216,.5);outline-offset:-2px}
.gs-detail-t{font-weight:800;font-size:.98rem;color:#1c2540}
/* Kontrast gerechnet, nicht geschaetzt: #5b6478 auf #fbfcff ergibt 5,3:1 (AA ab 4,5). */
.gs-detail-s{font-size:.82rem;color:#5b6478;padding-right:1.6rem}
.gs-detail-body{padding:0 1rem 1rem;border-top:1px solid var(--line)}
.gs-detail-body>.gs-chips-label:first-child{margin-top:12px}

/* Ankreuzzeilen im Detailblock. 44px Mindesthoehe = Tap-Ziel, gilt auch am Desktop,
   weil dieselbe Zeile dort mit der Maus getroffen wird und nichts daran stoert. */
.gs-check{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.3rem 0;font-size:.9rem;color:#1c2540;cursor:pointer}
.gs-check input{width:20px;height:20px;flex:0 0 auto;accent-color:#1d4fd8;cursor:pointer}
.gs-check i{font-style:normal;color:#5b6478;font-size:.82rem}

/* Altwagen-Hinweis im Haendler-Board. Bewusst auffaellig: die Inzahlungnahme ist
   der wertvollste Teil der Anfrage und geht in einer Datenzeile sonst unter.
   Kontrast gerechnet: #7a4a00 auf #fff8e6 = 7,1:1. */
.gd-inz{margin:10px 0 0;padding:.7rem .9rem;border-radius:10px;background:#fff8e6;border:1px solid #f0dca8;color:#7a4a00;font-size:.9rem;line-height:1.5}

@media (max-width:640px){
  .gs-row{grid-template-columns:1fr}
  /* 🧨🧨 Seitenrand auf dem Handy. `.gs-card` IST hier zugleich der Rahmen (`.wrap
     gs-card`) — anders als bei den Schwesterseiten, wo ein Huellelement den Abstand
     traegt (`.bo-form-wrap{padding:0 16px}`, `.lg-band{padding:0 16px 44px}`). Ohne die
     zwei Margen war die Karte auf 390 px genau 390 px breit und klebte an beiden
     Bildschirmraendern, waehrend die anderen zwei 358 px massen. Die abgerundeten Ecken
     waren dadurch unsichtbar. `auto` der Grundregel darf NICHT ueberschrieben werden,
     sonst verliert die Karte auf dem Desktop ihre Zentrierung — deshalb nur links/rechts. */
  .gs-card{border-radius:14px;padding:20px 15px;margin-top:-50px;margin-left:16px;margin-right:16px}
  .gs-hero{padding:34px 0 88px}
  .gv-a-kopf{flex-direction:column;gap:2px}
}