/* ===================================================================
   VRF-Klimaanlagen.de — modernes Design (2026)
   Engelhardt Kälte Klima GmbH
   Erweitert Tailwind CDN um Marken-Farben + VRF-Cyan-Akzent
   =================================================================== */

:root {
  /* Engelhardt-Familie (kompatibel zu kaelte-klimaservice.de) */
  --eng-primary:        #1e40af;     /* blue-800 */
  --eng-primary-dark:   #1e3a8a;     /* blue-900 */
  --eng-primary-light:  #3b82f6;     /* blue-500 */

  /* VRF-spezifischer Tech-Cyan-Akzent */
  --vrf-accent:         #0891b2;     /* cyan-600 */
  --vrf-accent-dark:    #0e7490;     /* cyan-700 */
  --vrf-accent-light:   #06b6d4;     /* cyan-500 */

  --eng-bg:             #ffffff;
  --eng-bg-alt:         #f8fafc;     /* slate-50 */
  --eng-text:           #0f172a;     /* slate-900 */
  --eng-text-muted:     #64748b;     /* slate-500 */
  --eng-border:         #e2e8f0;     /* slate-200 */
  --eng-shadow:         0 10px 30px -10px rgba(15, 23, 42, .15);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--eng-text);
  background: var(--eng-bg);
  -webkit-font-smoothing: antialiased;
}

/* ===================================================================
   Hero (mit Cyan-Akzent für VRF-Tech-Look)
   =================================================================== */

.gradient-hero,
.bg-gradient-to-br {
  position: relative;
  background-size: cover;
  background-position: center;
}

.gradient-hero {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.85) 0%, rgba(8,145,178,.55) 50%, rgba(6,182,212,.40) 100%),
    url('https://picsum.photos/seed/vrf-default/1920/800');
}

/* Spezifische Hero-BGs pro Bereich */
.hero-bg-home {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(14,116,144,.65) 50%, rgba(6,182,212,.45) 100%),
    url('https://picsum.photos/seed/vrf-home/1920/800') !important;
}
.hero-bg-panasonic {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(15,71,175,.65) 50%, rgba(6,182,212,.40) 100%),
    url('https://picsum.photos/seed/vrf-panasonic/1920/800') !important;
}
.hero-bg-daikin {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(0,51,161,.65) 50%, rgba(6,182,212,.40) 100%),
    url('https://picsum.photos/seed/vrf-daikin/1920/800') !important;
}
.hero-bg-kaysun {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(0,61,122,.65) 50%, rgba(6,182,212,.40) 100%),
    url('https://picsum.photos/seed/vrf-kaysun/1920/800') !important;
}
.hero-bg-mitsubishi {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(166,0,15,.55) 50%, rgba(6,182,212,.40) 100%),
    url('https://picsum.photos/seed/vrf-mitsubishi/1920/800') !important;
}
.hero-bg-ratgeber {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(14,116,144,.65) 50%, rgba(59,130,246,.45) 100%),
    url('https://picsum.photos/seed/vrf-ratgeber/1920/800') !important;
}
.hero-bg-einsatz {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(8,145,178,.65) 50%, rgba(6,182,212,.45) 100%),
    url('https://picsum.photos/seed/vrf-einsatz/1920/800') !important;
}
.hero-bg-anfrage {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(30,64,175,.65) 50%, rgba(6,182,212,.40) 100%),
    url('https://picsum.photos/seed/vrf-anfrage/1920/800') !important;
}
.hero-bg-standort {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,.80) 0%, rgba(8,145,178,.65) 50%, rgba(6,182,212,.45) 100%),
    url('https://picsum.photos/seed/vrf-standort/1920/800') !important;
}

/* ===================================================================
   Header / Footer
   =================================================================== */

.eng-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--eng-border);
}

.eng-footer { background: #0f172a; color: #cbd5e1; }

/* ===================================================================
   Cards
   =================================================================== */

.eng-card {
  background: #fff;
  border: 1px solid var(--eng-border);
  border-radius: 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eng-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--eng-shadow);
  border-color: var(--vrf-accent);
}

.gradient-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--eng-bg-alt) 100%);
}
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(8, 145, 178, .15), 0 10px 10px -5px rgba(0, 0, 0, .05);
}

/* Hersteller-Card (groß auf Startseite) */
.eng-hersteller-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--eng-border);
  background: #fff;
  transition: all .3s ease;
}
.eng-hersteller-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 40px -15px rgba(8, 145, 178, .25);
  border-color: var(--vrf-accent);
}

/* Hersteller-Wortmarken-Platzhalter */
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ===================================================================
   Tag-Cloud / Ort-Links
   =================================================================== */

.ort-link { transition: background-color .2s ease, color .2s ease; }
.ort-link:hover { background-color: var(--vrf-accent); color: #fff; }

.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,.18); }
.link-hover { transition: color .2s ease; }
.link-hover:hover { color: var(--vrf-accent); }

/* ===================================================================
   Mobile-Menu
   =================================================================== */

.mobile-menu { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mobile-menu.is-open { max-height: 100vh; }

/* ===================================================================
   Tech-Akzent: Cyan-Buttons
   =================================================================== */

.btn-cyan {
  background-color: var(--vrf-accent);
  color: #fff;
  font-weight: 700;
  padding: .75rem 2rem;
  border-radius: .75rem;
  transition: background-color .2s ease, transform .15s ease;
  display: inline-block;
  box-shadow: 0 4px 12px -4px rgba(8, 145, 178, .4);
}
.btn-cyan:hover {
  background-color: var(--vrf-accent-dark);
  transform: translateY(-1px);
}

/* ===================================================================
   Spec-Tabelle (für Modellreihen-Seiten)
   =================================================================== */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.spec-table tr { border-bottom: 1px solid var(--eng-border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td {
  padding: .75rem 1rem;
  vertical-align: top;
}
.spec-table td:first-child {
  font-weight: 600;
  color: var(--eng-text-muted);
  width: 35%;
}
.spec-table td:last-child {
  color: var(--eng-text);
}

/* ===================================================================
   Highlight-Pill
   =================================================================== */

.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  background: rgb(207 250 254);
  color: var(--vrf-accent-dark);
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 999px;
}