/* Styles des Versicherungsfinders.
   Herkunft: quelle/matthias-export/versicherungsfinder.html, <style>-Block
   (Zeilen 20-148). Uebernommen wie vorgefunden, nur die Scoping-Kennung ist
   ersetzt: Wo im Export die GHL-Seitenkennung stand, steht hier ".finder" — der
   Wrapper der Seitenquelle. Die Regeln greifen dadurch ausschliesslich im
   Rechner und koennen mit bausteine.css nicht kollidieren.

   VERTRAULICH: Code der go4vet GmbH, keine Weitergabe an Dritte.

   Zwei Regeln des Exports sind ersatzlos entfallen:
   - die Spiegelung des Telefonhoerer-Icons der Icon-Schrift — Font Awesome ist
     in diesem Repo nicht eingebunden, die Regel zielt auf ein Icon, das es hier
     nicht gibt.
   - die waagrechte Ueberlauf-Sperre an html/body im Mobil-Block. Sie haette die
     Ueberbreitenmessung von pruefung/layout-pruefung.mjs geblendet; echte
     Ueberbreite wird behoben, nicht versteckt. (Das Wort selbst fehlt hier
     bewusst — die Pruefung zaehlt es ueber die ganze Datei.)

   Angleichung an die Site (CONTEXT: der Rechner soll wie ein Teil der Website
   aussehen, Funktionsparitaet ist die Grenze): Das go4vet-Gruen ist durchgaengig
   auf die Tokens aus basis.css gezogen — der Grundton wird --primaer, der
   Hover-Ton --primaer-dunkel, der Verlauf laeuft von --primaer nach
   --flaeche-cyan, die hellen Gruenflaechen werden --flaeche-hell. Ueberschriften
   und Knoepfe tragen --schrift-headline, alles uebrige erbt --schrift-text aus
   basis.css — eine eigene font-family steht hier nur noch als "inherit".
   Warn- und Linientoene (#E2E8F0, #F59E0B, #DC2626, #FEF2F2, #991B1B) bleiben:
   Sie tragen Bedeutung (neutral / Warnung / Fehler) und kollidieren mit nichts.
   Abstaende, Rastermasse und Schriftgroessen sind unangetastet.

   Die gedaempften Grautoene des Exports sind dagegen ersetzt: #888 haelt auf dem
   weissen Seitengrund nur 3,54:1, #aaa sogar nur 2,32:1 — beide verfehlen WCAG AA
   (4,5:1) fuer Text unter 18,66px, und betroffen waren unter anderem Tarifname und
   Detailzeilen der Empfehlung, also die entscheidungsrelevanten Angaben. An ihrer
   Stelle steht --text-gedaempft (#666, 5,74:1); die Bedeutung "gedaempft" bleibt
   erhalten. Der Rest des Repos rechnet an jeder Graustelle den Kontrast aus — der
   Rechner ist damit keine Ausnahme mehr (Review WR-04). */

/* Weisser Seitengrund wie auf der Terminseite. Der Export ist auf eine weisse
   Seite gerechnet: Die Ergebniskarten tragen selbst keine Flaeche, sie leben vom
   Kontrast zum Grund. Auf dem sonst ueblichen #e6f7ff verlieren sie ihn — und
   der Primaerton haelt auf Weiss 4,87:1 statt 4,43:1, also WCAG AA auch fuer
   Kleintext. Das data-Merkmal setzt build.mjs. */
body[data-seite="versicherungsfinder"] {
  background: var(--weiss);
}

.finder * { margin: 0; padding: 0; box-sizing: border-box; }

/* Das Sicherheitsnetz "main > :not(.sektion)" in bausteine.css trifft auch diesen
   Wrapper — div.finder ist direktes Kind von <main> und traegt kein .sektion — und
   legte 20px Innenabstand je Seite darauf. Der Reset eine Zeile darueber greift nur
   auf Nachfahren, nicht auf das Element selbst. Zusammen mit .finder .main kamen so
   36px statt der im Export gerechneten 16px zusammen; bei 360px blieben der
   Fragenkarte 300px statt 340px (Review WR-10). Den Innenabstand traegt .finder .main
   allein. */
.finder {
  padding-inline: 0;
  /* goQ() springt seit Review CR-01 an den Kopf des Rechners statt an den Kopf der
     Seite. Ohne diesen Abstand landete dessen Oberkante unter dem klebenden Header —
     derselbe Grund und dasselbe Mass wie bei #inhalt in layout.css. */
  scroll-margin-top: 5rem;
}

.finder .main { max-width: 680px; margin: 0 auto; padding: 24px 16px 60px; }

.finder .hero { text-align: center; margin-bottom: 32px; }
.finder .hero-icon { font-size: 56px; margin-bottom: 12px; }
.finder .hero-title { font-family: var(--schrift-headline); font-size: 26px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; line-height: 1.2; }
.finder .hero-title span { color: var(--primaer); }
.finder .hero-desc { font-size: 15px; color: #666; line-height: 1.5; max-width: 500px; margin: 0 auto; }

.finder .progress-wrap { margin-bottom: 28px; }
.finder .progress-track { height: 6px; background: #E2E8F0; border-radius: 3px; overflow: hidden; }
.finder .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primaer), var(--flaeche-cyan)); border-radius: 3px; transition: width 0.4s ease; }
.finder .progress-text { font-size: 12px; color: var(--text-gedaempft); margin-top: 6px; text-align: right; }

.finder .card { background: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); padding: 28px; margin-bottom: 20px; }

.finder .q-step { display: none; }
.finder .q-step.active { display: block; animation: g4vFadeIn 0.3s ease; }
@keyframes g4vFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Wer Bewegung abbestellt hat, bekommt den Schrittwechsel ohne Einblendung — der
   Rechner steht seit Ticket 3f3d807d auch auf der Startseite, die das Partnerband
   unter derselben Bedingung stilllegt (Review WR-15). Den Sprung selbst schaltet
   goQ() ueber dieselbe Abfrage von "smooth" auf "auto". */
@media (prefers-reduced-motion: reduce) {
  .finder .q-step.active { animation: none; }
}

.finder .q-number { font-size: 12px; font-weight: 700; color: var(--primaer); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.finder .q-title { font-family: var(--schrift-headline); font-size: 20px; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.finder .q-desc { font-size: 13px; color: var(--text-gedaempft); margin-bottom: 20px; }

.finder .option-grid { display: grid; gap: 10px; }
.finder .option-grid.cols-2 { grid-template-columns: 1fr 1fr; }

.finder .option-card { border: 2px solid #E2E8F0; border-radius: 14px; padding: 18px 16px; cursor: pointer; transition: all 0.2s; background: white; text-align: left; font-family: inherit; }
.finder .option-card:hover { border-color: var(--primaer); background: var(--flaeche-hell); }
.finder .option-card.selected { border-color: var(--primaer); background: var(--flaeche-hell); }
.finder .option-card .opt-icon { font-size: 28px; margin-bottom: 6px; }
.finder .option-card .opt-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.finder .option-card .opt-desc { font-size: 12px; color: var(--text-gedaempft); line-height: 1.4; }

.finder .multi-select .option-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; color: var(--primaer); font-weight: 800; font-size: 16px; }
.finder .multi-select .option-card { position: relative; }

.finder .slider-wrap { margin: 16px 0; }
.finder .slider-label { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-bottom: 8px; }
.finder .slider-label strong { color: var(--primaer); font-size: 16px; }
.finder input[type="range"] { width: 100%; height: 6px; appearance: none; background: #E2E8F0; border-radius: 3px; outline: none; }
.finder input[type="range"]::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; background: var(--primaer); border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.finder .slider-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-gedaempft); margin-top: 4px; }

.finder .btn-row { display: flex; gap: 12px; margin-top: 24px; }
.finder .btn { padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; font-family: var(--schrift-headline); transition: all 0.2s; }
.finder .btn-primary { background: var(--primaer); color: white; flex: 1; }
.finder .btn-primary:hover { background: var(--primaer-dunkel); }
.finder .btn-secondary { background: #F1F5F9; color: #555; }
.finder .btn-secondary:hover { background: #E2E8F0; }

/* Results */
.finder .result-card { border: 2px solid #E2E8F0; border-radius: 16px; padding: 24px; margin-bottom: 16px; position: relative; transition: 0.2s; }
.finder .result-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.finder .result-card.best { border-color: var(--primaer); box-shadow: 0 4px 20px color-mix(in srgb, var(--primaer) 12%, transparent); }
.finder .result-rank { position: absolute; top: -1px; left: 20px; background: var(--primaer); color: white; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 0 0 8px 8px; }
.finder .result-rank.silver { background: #64748B; }
.finder .result-rank.bronze { background: #92400E; }

.finder .result-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; margin-top: 8px; }
.finder .result-logo { height: 32px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; flex-shrink: 0; }
.finder .result-name { font-family: var(--schrift-headline); font-size: 18px; font-weight: 800; }
.finder .result-tarif { font-size: 13px; color: var(--text-gedaempft); }
.finder .result-price { margin-left: auto; text-align: right; }
.finder .result-price-amount { font-size: 24px; font-weight: 800; color: var(--primaer); }
.finder .result-price-sub { font-size: 11px; color: var(--text-gedaempft); }

.finder .result-match { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.finder .match-bar { flex: 1; height: 8px; background: #E2E8F0; border-radius: 4px; overflow: hidden; }
.finder .match-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.finder .match-fill.high { background: linear-gradient(90deg, var(--primaer), var(--flaeche-cyan)); }
.finder .match-fill.medium { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.finder .match-fill.low { background: linear-gradient(90deg, #DC2626, #EF4444); }
.finder .match-pct { font-size: 14px; font-weight: 800; min-width: 40px; }
.finder .match-pct.high { color: var(--primaer); }
.finder .match-pct.medium { color: #92400E; }

.finder .result-reasons { margin-bottom: 16px; }
.finder .reason { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; }
.finder .reason-icon { flex-shrink: 0; }
.finder .reason-text { color: #555; }

.finder .result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 16px; }
.finder .detail-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px solid #F8F8F8; }
.finder .detail-key { color: var(--text-gedaempft); }
.finder .detail-val { font-weight: 700; }
/* Die Zahl der Detailzeilen schwankt je Karte: Die Deckungs-Zeile steht nur bei
   gefuehrtem Tariftyp, die GOT-Zeile nur bei einem echten Faktor (in Oesterreich
   gibt es keinen). Trifft es eine ungerade Zahl, staende die letzte Zeile allein
   in der linken Spalte und rechts bliebe eine leere Zelle mit haengender
   Trennlinie (Review-Finding 68). Sie bekommt dann die volle Breite; auf Mobil
   (eine Spalte, siehe unten) ist die Regel wirkungslos. */
.finder .result-details .detail-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.finder .result-cta { display: flex; gap: 10px; }
.finder .result-cta .btn { flex: 1; text-align: center; font-size: 14px; padding: 12px; }

/* Tarif-Hinweis: eine Leistungseinschraenkung, die nur fuer DIESE Tarifstufe gilt
   (HanseMerkur: die besonderen Diagnosen sind je Stufe ausgeschlossen, gedeckelt
   oder mit Wartezeit belegt). Steht zwischen Detailliste und dem anbieterweiten
   preisHinweis und ist gleich gesetzt wie dieser — beide sind Kleingedrucktes zur
   Karte darueber, nur mit verschiedener Reichweite. */
.finder .result-tarif-hinweis {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-gedaempft);
  margin-bottom: 8px;
}

/* Anbieter-Hinweis zur Preisbildung (z. B. balunos: altersabhaengig, Voreinstellungen,
   Rassenzuschlaege) — kleine, gedaempfte Zeile zwischen Details und Knopf. */
.finder .result-preis-hinweis {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-gedaempft);
  margin-bottom: 12px;
}

/* Leerfall der Ergebnisliste (kein Anbieter fuer die Kombination, z. B.
   Deutschland + Senior-Hund): Erklaerung + Beratungsweg statt leerer Flaeche. */
.finder .result-leer {
  background: var(--weiss);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-size: 14px;
  line-height: 1.6;
}
.finder .result-leer p { margin: 0 0 12px; }
.finder .result-leer .btn { display: inline-block; text-decoration: none; }

/* Sichtbarer Datenstand der Tarifdaten unter den Ergebniskarten (Ticket 2c2834dc). */
.finder .tarif-datenstand {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-gedaempft);
  margin-top: 16px;
}

/* Der Export brachte hier zusaetzlich .results-footer a und :hover mit. Im
   Ergebnis-Fuss stehen nur ein <p> und der Neustart-Knopf, keinerlei Link — die
   beiden Regeln sind ersatzlos entfallen (Review IN-03). */
.finder .results-footer { text-align: center; margin-top: 24px; }
.finder .results-footer p { font-size: 13px; color: var(--text-gedaempft); margin-top: 6px; }

.finder .restart-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid #ccc; border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: var(--schrift-headline); color: #666; margin-top: 16px; }
.finder .restart-btn:hover { border-color: var(--primaer); color: var(--primaer); }

/* Rueckmeldung zur Lead-Uebermittlung, ueber den Ergebniskarten.
   BEWUSST OHNE display-Angabe: Eine Klassenregel mit display schlaegt das
   hidden-Attribut im Markup, die Zeile stuende dann immer da (dieselbe Falle wie
   bei .auswahl auf der Terminseite, STACK.md). Wird hier je ein display noetig,
   muss zusaetzlich .finder .lead-status[hidden] { display: none } dazu. */
.finder .lead-status {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
/* Fehlerfall in denselben Toenen wie die bestehende Zeile #lead-error. */
.finder .lead-status--fehler {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.finder .lead-status--fehler a { color: #991B1B; font-weight: 700; }
.finder .lead-status--ok {
  background: var(--flaeche-hell);
  border: 1px solid var(--flaeche-cyan);
  color: var(--primaer-dunkel);
}

/* Trust */
.finder .trust-bar { display: flex; justify-content: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.finder .trust-item { font-size: 12px; color: var(--text-gedaempft); display: flex; align-items: center; gap: 4px; }

/* Lead form */
.finder .form-group { margin-bottom: 14px; }
.finder input:not([type="range"]):not([type="checkbox"]) { height: 50px !important; }

/* Aussehen der drei Textfelder (Rasse, E-Mail, Telefon). Im Export stand es je Feld
   im style-Attribut, samt onfocus/onblur fuer die Rahmenfarbe. Das musste hierher:
   Eine Regel aus dem Stylesheet kann eine Inline-Deklaration nicht ueberschreiben —
   das dortige "outline:none" haette jeden Fokusring geschluckt, egal was hier steht
   (Review WR-05). Nebenbei fallen sechs Inline-Handler weg (Review IN-01). */
.finder .form-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.finder .form-input:focus { border-color: var(--primaer); }

.finder .lead-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 5px; }

/* Die drei Einwilligungszeilen sind <label> statt <div onclick> — der Browser
   uebernimmt damit Umschaltung, Beschriftung und Tastaturbedienung. */
.finder .consent-zeile { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; cursor: pointer; }
.finder .consent-zeile.letzte { margin-bottom: 18px; }
.finder .consent-zeile span { font-size: 12px; color: var(--text-gedaempft); line-height: 1.4; }
.finder .consent-zeile a { color: var(--primaer); }
.finder .consent-zeile input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primaer); flex-shrink: 0; cursor: pointer; }

/* Sichtbarer Fokus fuer alles, was per Tastatur erreichbar ist. Der Export hatte
   keinen — WCAG 2.4.7 (AA). :focus-visible statt :focus, damit der Ring bei
   Mausbedienung nicht auf jeder Karte aufblitzt. */
.finder .form-input:focus-visible,
.finder .option-card:focus-visible,
.finder .btn:focus-visible,
.finder .restart-btn:focus-visible,
.finder .consent-zeile input[type="checkbox"]:focus-visible,
.finder input[type="range"]:focus-visible,
.finder a:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
}

/* Hinweis, wenn JavaScript aus ist (Review WR-11). */
.finder .noscript-hinweis {
  background: var(--flaeche-hell);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--primaer-dunkel);
}
.finder .noscript-hinweis a { color: var(--primaer-dunkel); font-weight: 700; }

@media (max-width: 640px) {
  .finder .option-grid.cols-2 { grid-template-columns: 1fr; }
  .finder .hero-title { font-size: 22px; }
  .finder .hero-desc { font-size: 14px; }
  .finder .main { padding: 16px 10px 60px; }
  .finder .card { padding: 20px 16px; box-sizing: border-box; width: 100%; }
  .finder .result-header { flex-wrap: wrap; }
  .finder .result-price { margin-left: 0; margin-top: 4px; }
  .finder .result-details { grid-template-columns: 1fr; }
  .finder .result-cta { flex-direction: column; }
  .finder .btn-row { flex-direction: column; }
  .finder .trust-bar { gap: 12px; }
  /* iOS auto-zoom fix: alle Inputs auf min. 16px */
  .finder input[type="text"],
  .finder input[type="email"],
  .finder input[type="tel"],
  .finder input[type="search"],
  .finder select { font-size: 16px !important; }
}