/* Übergangsschicht: gleicht Inhalte, die noch mit den alten Klassen aus style.css, inquiry.css,
   autoglas.css und vehicle-detail gebaut sind, an das Design-System an (Farben, Radien, Buttons, Schrift).
   Wird schrittweise überflüssig, sobald eine Seite vollständig auf Design-System-Klassen umgebaut ist. */

:root {
  --mcf-blue: #0092c7;
  --mcf-blue-light: var(--mcf-blue-tint);
  --mcf-black: var(--ink);
  --mcf-dark: var(--ink-2);
  --mcf-gray: var(--ink-3);
  --mcf-gray-light: var(--surface-2);
  --mcf-gray-mid: var(--line);
  --font-primary: var(--font-sans);
  --transition: all var(--dur-base) var(--ease-out);
}

body { line-height: var(--lh-normal); }
p { color: var(--ink-2); }
h1, h2 { font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); color: var(--ink); }
h1 b, h1 strong, h2 b, h2 strong { font-weight: 800; }
h3, h4 { font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--ink); }

/* Unterseiten-Kopf (alte .hero mit Hintergrundbild) */
.hero:not(.hero--slides) { margin-top: 0; height: auto; min-height: 420px; }
.hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%) !important; }
.hero-subtitle { color: var(--mcf-blue-soft) !important; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--fs-small) !important; }
.hero-title { font-weight: var(--fw-light) !important; color: var(--on-dark) !important; }
.hero-description { color: var(--on-dark) !important; opacity: .92; }
.legal-hero { margin-top: 0 !important; }

/* Abschnittsköpfe */
.section-subtitle { color: var(--mcf-blue-hover) !important; font-size: var(--fs-caption) !important; font-weight: 800 !important; letter-spacing: var(--tracking-caps) !important; }
.bg-gray { background: var(--surface-2); }

/* Buttons alter Art → Design-System */
.btn:not([class*="btn--"]) { border-radius: var(--radius-sm); text-transform: none; letter-spacing: 0; padding: 14px 24px; box-shadow: none; }
.btn-primary, .btn-blue { background: var(--mcf-blue-hover); color: #fff; border: 1px solid transparent; }
.btn-primary:hover, .btn-blue:hover { background: var(--mcf-blue-pressed); transform: none; box-shadow: none; color: #fff; }
.btn-outline { border-width: 1px; border-radius: var(--radius-sm); }
.btn-outline:hover { transform: none; }

/* Karten alter Art */
.card { border-radius: var(--radius-lg); border-color: var(--line); }
.card:hover { transform: none; box-shadow: var(--shadow-md); border-color: var(--line); }
.card-image { border-radius: 0; }
.service-icon, .feature-icon { border-radius: var(--radius-md) !important; background: var(--mcf-blue-tint) !important; color: var(--mcf-blue-pressed) !important; }
.contact-info-card, .criteria-item, .service-item, .autoglas-highlight { border-radius: var(--radius-lg) !important; }

/* Anfrage-Formulare (inquiry.css) */
.inq-input, .inq-textarea, .inq-select { border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; background: var(--surface) !important; font-family: var(--font-sans) !important; }
.inq-input:focus, .inq-textarea:focus, .inq-select:focus { border-color: var(--mcf-blue) !important; box-shadow: var(--shadow-focus) !important; }
.inq-tab.active { color: var(--ink) !important; }
.inq-tab.active::after { background: var(--mcf-blue) !important; }
.inq-time-btn { border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; }
.inq-time-btn.active { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.inq-submit { background: var(--mcf-blue-hover) !important; border-radius: var(--radius-sm) !important; transform: none !important; }
.inq-submit:hover { background: var(--mcf-blue-pressed) !important; }
.inq-privacy a { color: var(--ink) !important; }

/* style.css setzt .btn auf Versalien und lässt ihn beim Hover springen – für alle Buttons zurücknehmen */
.btn { text-transform: none; letter-spacing: 0; }
.btn:hover { transform: none; }