/* ===================================================== SchadenCHECK – Scoped Styling Voraussetzung: ===================================================== */ /* ---------- Landing / Intro ---------- */ body.og-step .schadencheck-intro h2 { margin-bottom: 10px; } body.og-step .sc-intro-text { max-width: 760px; color: var(--color-text-muted); } body.og-step .sc-info-grid { display: grid; gap: 24px; margin-top: 24px; } @media (min-width: 768px) { body.og-step .sc-info-grid { grid-template-columns: repeat(3, 1fr); } } body.og-step .sc-info-box { background: #fff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 20px; color: #222429; } body.og-step .sc-info-box h3 { margin-top: 0; color: #111318; } body.og-step .sc-info-box p, body.og-step .sc-info-box li { color: #222429; } body.og-step .sc-cta-row { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } body.og-step .sc-cta-hint { color: var(--color-text-muted); font-size: 0.95rem; } /* ---------- Step Wrapper ---------- */ body.og-step .sc-step-intro { max-width: 900px; } body.og-step .sc-step-explain { color: var(--color-text-muted); max-width: 720px; } /* Überschriften im Step-Bereich: Hintergrund MUSS weiß sein */ body.og-step .sc-step-intro > h2, body.og-step .sc-step-intro > h3 { background: transparent !important; padding: 0 !important; border-radius: 0 !important; display: block; } /* Fehlerbox */ body.og-step .sc-error-box { margin: 16px 0; padding: 14px; border: 1px solid #ffb4b4; border-radius: var(--radius-md); background: #fff; } /* ---------- Step 1: Schadenart ---------- */ body.og-step .sc-choice-form { margin-top: 24px; display: grid; gap: 18px; } body.og-step .sc-choice-card { display: block; cursor: pointer; } body.og-step .sc-choice-card input { display: none; } body.og-step .sc-choice-content { background: #fff; border: 2px solid var(--color-border-soft); border-radius: var(--radius-md); padding: 20px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } body.og-step .sc-choice-card:hover .sc-choice-content { border-color: #b9bcc6; } body.og-step .sc-choice-card input:checked + .sc-choice-content { border-color: var(--color-primary); border-width: 3px; box-shadow: 0 0 0 4px rgba(224, 0, 42, 0.15); background: #fff; } body.og-step .sc-choice-content h3 { margin-top: 0; color: var(--color-text-main); } body.og-step .sc-choice-card input:checked + .sc-choice-content h3 { color: var(--color-primary); } body.og-step .sc-choice-content p, body.og-step .sc-choice-content li { color: var(--color-text-main); } body.og-step .sc-step-actions { margin-top: 24px; } /* ---------- Step 2: Fahrzeugformular ---------- */ body.og-step .sc-form { margin-top: 24px; max-width: 900px; } /* IMMER untereinander */ body.og-step .sc-form-grid { display: flex !important; flex-direction: column !important; gap: 18px !important; } body.og-step .sc-form-field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--color-text-main); background: transparent !important; padding: 0 !important; border-radius: 0 !important; } body.og-step .sc-hint { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--color-text-muted); } body.og-step .sc-form-field input, body.og-step .sc-form-field textarea { background: #fff !important; background-color: #fff !important; color: #222429 !important; } body.og-step .sc-form-field input:focus, body.og-step .sc-form-field textarea:focus { outline: none !important; border-color: var(--color-primary) !important; background: #fff !important; } /* ====================================== Step 2 – saubere Pflichtfeld-Hinweise ====================================== */ /* Inputs wirklich freistellen */ body.og-step2 .sc-form-field { margin-bottom: 18px; } body.og-step2 .sc-form-field label { background: transparent !important; padding: 0 !important; margin-bottom: 6px; } /* Input bleibt weiß */ body.og-step2 .sc-form-field input, body.og-step2 .sc-form-field textarea { background: #ffffff !important; border: 1px solid var(--color-border-soft); } /* Hinweis UNTER dem Feld (standardmäßig versteckt) */ body.og-step2 .sc-field-hint { display: none; margin-top: 6px; font-size: 0.9rem; color: #c62828; /* ruhig rot, kein Alarm */ } /* Wenn Feld ungültig */ body.og-step2 .sc-form-field.is-invalid input, body.og-step2 .sc-form-field.is-invalid textarea { border-color: #c62828; } /* Hinweis einblenden */ body.og-step2 .sc-form-field.is-invalid .sc-field-hint { display: block; } /* ====================================== Step 2 – Autofill & Focus endgültig fix ====================================== */ /* Chrome / Edge Autofill überschreiben */ body.og-step2 input:-webkit-autofill, body.og-step2 input:-webkit-autofill:hover, body.og-step2 input:-webkit-autofill:focus, body.og-step2 textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #222429 !important; caret-color: #222429 !important; transition: background-color 9999s ease-in-out 0s; } /* Firefox */ body.og-step2 input:-moz-autofill, body.og-step2 textarea:-moz-autofill { box-shadow: 0 0 0 1000px #ffffff inset !important; color: #222429 !important; } /* Focus generell weiß halten */ body.og-step2 input:focus, body.og-step2 textarea:focus { background-color: #ffffff !important; } /* ====================================== Step 2 – Überschriften/Labels weiß (ohne Box) ====================================== */ body.og-step2 .sc-step-intro h2, body.og-step2 .sc-step-intro h3 { color: #ffffff !important; background: transparent !important; } body.og-step2 .sc-step-explain { color: rgba(255,255,255,0.72) !important; } body.og-step2 .sc-form-field label { color: rgba(255,255,255,0.92) !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* ====================================== Onlinegutachten INDEX – White Panels ====================================== */ body.og-index .panel, body.og-index .contact-box, body.og-index .sc-info-box { background: #ffffff !important; color: #222429 !important; } body.og-index .panel *, body.og-index .contact-box *, body.og-index .sc-info-box * { color: inherit !important; } body.og-index .panel h3, body.og-index .contact-box h3, body.og-index .sc-info-box h3 { color: #111318 !important; } /* ====================================== Onlinegutachten INDEX – Info-Listen OHNE weiße Boxen (Text auf Dark BG) ====================================== */ body.og-index .sc-info-grid { grid-template-columns: 1fr; gap: 18px; max-width: 900px; } /* Boxen transparent machen */ body.og-index .sc-info-box { background: transparent !important; border: none !important; padding: 0 !important; } /* Überschriften weiß */ body.og-index .sc-info-box h3 { color: #ffffff !important; margin-bottom: 8px; } /* Listen & Text weiß */ body.og-index .sc-info-box, body.og-index .sc-info-box p, body.og-index .sc-info-box li { color: rgba(255,255,255,0.92) !important; } /* Listen etwas luftiger */ body.og-index .sc-info-box ul { margin-left: 18px; }