/* Hermes Design Polish – Klima-Zentrale – 2026-05-20
   Ziel: nachträgliche SEO/Growth-Blöcke visuell in das bestehende Designsystem integrieren,
   ohne Content oder interne Links zu entfernen. */

/* Reveal-Fallback: Inhalte dürfen nie unsichtbar bleiben, wenn JS/Consent/Observer blockiert. */
.reveal,
.reveal:not(.active) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Leere/weiße Bildcontainer abfangen und konsistenter darstellen. */
.bielefeld-image,
.city-image,
.local-image,
.showroom-card,
.gallery-item {
  background: linear-gradient(135deg, #e0f2fe 0%, #f8fafc 52%, #dbeafe 100%) !important;
  border: 1px solid rgba(14, 165, 233, .14) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
.bielefeld-image img,
.city-image img,
.local-image img,
.showroom-card img,
.gallery-item img {
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  object-fit: cover !important;
  display: block !important;
}
.bielefeld-image .distance-badge {
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16) !important;
}

/* Nachträglich eingefügte SEO-/Growth-Blöcke: einheitliche Containerlogik. */
section[class*="hermes-"],
section[class*="hermes_"],
section[data-hermes-growth],
section[data-hermes-daily-link],
section[data-hermes-indexing-refresh],
aside[class*="hermes-"],
aside[data-hermes-daily-link] {
  max-width: 1120px !important;
  margin: 36px auto !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: 0 !important;
}

section[class*="hermes-"] > .container,
section[data-hermes-growth] > .container,
section[data-hermes-daily-link] > .container,
section[data-hermes-indexing-refresh] > .container,
aside[class*="hermes-"] {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 28px 30px !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

section[class*="hermes-"] h2,
section[data-hermes-growth] h2,
section[data-hermes-daily-link] h2,
section[data-hermes-indexing-refresh] h2,
aside[class*="hermes-"] h2 {
  color: #0f172a !important;
  font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
  line-height: 1.18 !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}

section[class*="hermes-"] p,
section[data-hermes-growth] p,
section[data-hermes-daily-link] p,
section[data-hermes-indexing-refresh] p,
aside[class*="hermes-"] p {
  color: #334155 !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
  text-align: left !important;
  margin: 0 0 12px !important;
}

/* Einzelne Link-Sätze vor Footer nicht mehr wie rohe SEO-Notizen aussehen lassen. */
p.hermes-context-link,
p[data-hermes-link] {
  max-width: 1040px !important;
  margin: 24px auto !important;
  padding: 18px 22px !important;
  background: #f8fbff !important;
  border: 1px solid #dbeafe !important;
  border-left: 4px solid #0ea5e9 !important;
  border-radius: 16px !important;
  color: #334155 !important;
  line-height: 1.65 !important;
}

/* Interne Links als Nutzerführung/Pills statt Standard-Linkliste. */
section[class*="hermes-"] a,
section[data-hermes-growth] a,
section[data-hermes-daily-link] a,
section[data-hermes-indexing-refresh] a,
aside[class*="hermes-"] a,
p.hermes-context-link a {
  color: #0369a1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(3, 105, 161, .28) !important;
}
section[class*="hermes-"] a:hover,
section[data-hermes-growth] a:hover,
section[data-hermes-daily-link] a:hover,
section[data-hermes-indexing-refresh] a:hover,
aside[class*="hermes-"] a:hover,
p.hermes-context-link a:hover {
  color: #075985 !important;
  border-bottom-color: #075985 !important;
}

/* Listen in Growth-Blöcken als ruhige Grid-/Card-Elemente. */
section[class*="hermes-"] ul,
section[data-hermes-growth] ul,
section[data-hermes-daily-link] ul,
section[data-hermes-indexing-refresh] ul {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 10px !important;
}
section[class*="hermes-"] li,
section[data-hermes-growth] li,
section[data-hermes-daily-link] li,
section[data-hermes-indexing-refresh] li {
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}

/* City-/Ortsteil-Pills weniger nach Keywordliste aussehen lassen. */
.districts-grid {
  gap: 10px !important;
}
.district-tag {
  border: 1px solid #dbeafe !important;
  background: #f8fbff !important;
  color: #0f172a !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 650 !important;
}

/* Midea/Tailwind-Seite: riesige inhaltslose Flächen reduzieren, falls Animationen/Observer ausfallen. */
.hermes-growth-block {
  position: relative !important;
}
.min-h-screen {
  min-height: auto !important;
}
section.relative.overflow-hidden.flex.items-center {
  min-height: 760px !important;
}

/* Cookie-Hinweis kompakter halten; vollständige CMP bleibt bedienbar. */
.cookie-banner.show {
  padding: 1rem !important;
  border-top-width: 2px !important;
}
.cookie-inner {
  gap: 1rem !important;
}
.cookie-text {
  font-size: .86rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 768px) {
  section[class*="hermes-"],
  section[data-hermes-growth],
  section[data-hermes-daily-link],
  section[data-hermes-indexing-refresh],
  aside[class*="hermes-"] {
    margin: 24px auto !important;
    padding: 0 16px !important;
  }
  section[class*="hermes-"] > .container,
  section[data-hermes-growth] > .container,
  section[data-hermes-daily-link] > .container,
  section[data-hermes-indexing-refresh] > .container,
  aside[class*="hermes-"] {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  p.hermes-context-link,
  p[data-hermes-link] {
    margin: 18px 16px !important;
    padding: 16px !important;
  }
  .bielefeld-image img,
  .city-image img,
  .local-image img,
  .showroom-card img,
  .gallery-item img {
    min-height: 190px !important;
  }
}


/* === HERMES PREMIUM REDESIGN LAYER – KLIMA-ZENTRALE – 20260520 START ===
   Scope: visual premium layer only. Contact forms are intentionally untouched. */
:root {
  --kzp-ink: #071423;
  --kzp-ink-2: #12243a;
  --kzp-slate: #52657b;
  --kzp-sky: #00a7e8;
  --kzp-ice: #dff7ff;
  --kzp-deep: #05385a;
  --kzp-cyan: #56d7ff;
  --kzp-warm: #ff8a2a;
  --kzp-warm-2: #ffb15c;
  --kzp-paper: #ffffff;
  --kzp-soft: #f4fbff;
  --kzp-line: rgba(7,20,35,.10);
  --kzp-shadow: 0 28px 90px rgba(7,20,35,.16);
  --kzp-shadow-soft: 0 18px 52px rgba(7,20,35,.10);
  --kzp-radius-xl: 34px;
  --kzp-radius-lg: 26px;
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(86,215,255,.22), transparent 32rem),
    radial-gradient(circle at 92% 10%, rgba(255,138,42,.14), transparent 30rem),
    linear-gradient(180deg, #f7fcff 0%, #eef8fd 44%, #ffffff 100%) !important;
  color: var(--kzp-ink) !important;
}

.header-nav {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom: 1px solid rgba(7,20,35,.08) !important;
  box-shadow: 0 14px 44px rgba(7,20,35,.08) !important;
}
.nav-link {
  border-radius: 999px !important;
  font-weight: 680 !important;
  color: #19304a !important;
}
.nav-link:hover {
  background: rgba(0,167,232,.10) !important;
  color: var(--kzp-deep) !important;
}
.nav-cta {
  background: linear-gradient(135deg, var(--kzp-ink), var(--kzp-deep) 54%, var(--kzp-sky)) !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 34px rgba(0,128,184,.28) !important;
}

.hero {
  position: relative !important;
  min-height: min(820px, calc(100vh - 70px)) !important;
  background:
    linear-gradient(115deg, rgba(4,16,29,.90) 0%, rgba(5,56,90,.76) 45%, rgba(0,130,184,.42) 100%),
    url('/images/hero-daikin-wohnzimmer.jpg') center/cover no-repeat !important;
  overflow: hidden !important;
  isolation: isolate;
}
.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 22%, rgba(86,215,255,.28), transparent 24rem),
    radial-gradient(circle at 20% 85%, rgba(255,138,42,.20), transparent 22rem) !important;
  background-size: 56px 56px, 56px 56px, auto, auto !important;
  opacity: .72 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.hero::after {
  content: '';
  position: absolute;
  right: -90px;
  top: 110px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 42px rgba(255,255,255,.04), inset 0 0 0 86px rgba(86,215,255,.045);
  pointer-events: none;
}
.hero-centered {
  max-width: 1060px !important;
}
.hero h1 {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(2.75rem, 7.2vw, 6.7rem) !important;
  line-height: .90 !important;
  letter-spacing: -0.075em !important;
  font-weight: 900 !important;
  text-wrap: balance !important;
  text-shadow: 0 24px 70px rgba(0,0,0,.32) !important;
}
.hero-subtitle {
  max-width: 790px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(1.12rem, 2vw, 1.42rem) !important;
  line-height: 1.72 !important;
}
.hero-badges, .hero-usps, .hero-stats {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.hero-badges span,
.hero-usp,
.stat-item {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.095) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.16) !important;
}
.hero .btn-primary,
.process > .container > div .btn-primary {
  background: linear-gradient(135deg, var(--kzp-warm-2), var(--kzp-warm)) !important;
  color: #1c1106 !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px rgba(255,138,42,.30) !important;
}
.btn-secondary-hero {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 36px rgba(0,0,0,.16) !important;
}

.section-header h2,
.custom-solution h2,
#faq h2 {
  font-size: clamp(2.05rem, 4.4vw, 4.35rem) !important;
  line-height: .96 !important;
  letter-spacing: -0.065em !important;
  color: var(--kzp-ink) !important;
  text-wrap: balance !important;
}
.section-subtitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(0,167,232,.18) !important;
  border-radius: 999px !important;
  background: rgba(0,167,232,.08) !important;
  color: var(--kzp-deep) !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
}
.section-subtitle::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kzp-cyan), var(--kzp-warm));
  box-shadow: 0 0 0 5px rgba(86,215,255,.16);
}

.feature-card,
.testimonial-card,
.step-card,
.customer-card,
.contact-info-card,
.showroom-info,
#faq details {
  border: 1px solid rgba(7,20,35,.10) !important;
  border-radius: var(--kzp-radius-lg) !important;
  box-shadow: var(--kzp-shadow-soft) !important;
  background: rgba(255,255,255,.92) !important;
}
.feature-card:hover,
.testimonial-card:hover,
.step-card:hover,
.customer-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: var(--kzp-shadow) !important;
}
.feature-card,
.step-card,
.testimonial-card {
  position: relative !important;
  overflow: hidden !important;
}
.feature-card::before,
.step-card::before,
.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--kzp-cyan), var(--kzp-sky), var(--kzp-warm));
  opacity: .85;
}

.customer-card {
  overflow: hidden !important;
}
.customer-card img {
  min-height: 270px !important;
  object-fit: cover !important;
  filter: saturate(1.05) contrast(1.03) !important;
}
.customer-card .customer-badge {
  background: rgba(7,20,35,.84) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
}

.showroom {
  position: relative !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(86,215,255,.18), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #eef9ff 100%) !important;
}
.showroom-grid {
  gap: 18px !important;
}
.showroom-item,
.gallery-item {
  min-height: 245px !important;
  border-radius: 28px !important;
  box-shadow: var(--kzp-shadow-soft) !important;
  border: 1px solid rgba(7,20,35,.10) !important;
  background: linear-gradient(135deg, #e8f8ff, #ffffff) !important;
}
.showroom-item img,
.gallery-item img {
  width: 100% !important;
  height: 100% !important;
  min-height: 245px !important;
  object-fit: cover !important;
  transform: scale(1.01) !important;
  filter: saturate(1.06) contrast(1.04) !important;
}
.showroom-overlay {
  background: linear-gradient(180deg, transparent, rgba(7,20,35,.46)) !important;
}
.showroom-info {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,248,255,.92)) !important;
}

/* Editorially integrate SEO/growth blocks without changing their links or content targets. */
section[class*='hermes-'],
section[class*='hermes_'],
section[data-hermes-growth],
section[data-hermes-daily-link],
section[data-hermes-indexing-refresh],
p.hermes-context-link,
p[data-hermes-link] {
  max-width: 1120px !important;
  margin: 22px auto !important;
}
section[class*='hermes-'] > .container,
section[data-hermes-growth] > .container,
section[data-hermes-daily-link] > .container,
section[data-hermes-indexing-refresh] > .container,
p.hermes-context-link,
p[data-hermes-link] {
  padding: 24px 28px !important;
  border: 1px solid rgba(7,20,35,.10) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(86,215,255,.16), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,251,255,.92)) !important;
  box-shadow: 0 14px 40px rgba(7,20,35,.07) !important;
}
section[class*='hermes-'] h2,
section[data-hermes-indexing-refresh] h2 {
  letter-spacing: -0.035em !important;
  color: var(--kzp-ink) !important;
}
section[class*='hermes-'] a,
p.hermes-context-link a,
p[data-hermes-link] a {
  color: var(--kzp-deep) !important;
  font-weight: 850 !important;
  text-decoration-thickness: .08em !important;
  text-underline-offset: .18em !important;
}

.cookie-banner.show {
  border-radius: 28px 28px 0 0 !important;
  box-shadow: 0 -18px 60px rgba(7,20,35,.20) !important;
}
.cookie-actions .btn-cookie,
.btn-cookie {
  border-radius: 999px !important;
}

.unified-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(86,215,255,.15), transparent 26rem),
    linear-gradient(180deg, #081726, #030a12) !important;
}
.footer-brand p,
.footer-column a,
.footer-contact li,
.footer-legal { color: rgba(255,255,255,.70) !important; }
.footer-column h4 { color: #fff !important; }
.footer-column a:hover { color: var(--kzp-cyan) !important; }

@media (max-width: 768px) {
  .hero { min-height: auto !important; padding-top: 86px !important; padding-bottom: 64px !important; }
  .hero h1 { font-size: clamp(2.3rem, 12.5vw, 4rem) !important; }
  .hero-stats { gap: 10px !important; }
  .stat-item { min-width: 0 !important; }
  .section-header h2, .custom-solution h2, #faq h2 { font-size: clamp(2rem, 10vw, 3.1rem) !important; }
  .showroom-item, .gallery-item, .showroom-item img, .gallery-item img { min-height: 190px !important; }
  section[class*='hermes-'] > .container,
  section[data-hermes-growth] > .container,
  section[data-hermes-daily-link] > .container,
  section[data-hermes-indexing-refresh] > .container,
  p.hermes-context-link,
  p[data-hermes-link] { padding: 20px 18px !important; border-radius: 20px !important; }
}
/* === HERMES PREMIUM REDESIGN LAYER – KLIMA-ZENTRALE – 20260520 END === */

/* === CONTRAST FIX 2026-09-16 – dark sections escape Hermes ink override === */
.waermepumpen-section .section-header h2,
.custom-solution h2 {
  color: #ffffff !important;
}

.waermepumpen-section .section-subtitle {
  color: #fbbf24 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

.custom-solution {
  background: #0f1d2f !important;
  color: #ffffff !important;
}
.custom-solution .lead {
  color: #56d7ff !important;
}
.custom-solution p {
  color: #cbd5e1 !important;
}

.hero-price-box {
  background: rgba(15, 29, 47, 0.55) !important;
  border: 2px solid rgba(255, 255, 255, 0.28) !important;
}
.hero-price-box .price-label {
  color: #ffffff !important;
}
.hero-price-box .price-value {
  color: #ffd089 !important;
}
.hero-price-box .price-detail {
  color: #e2e8f0 !important;
}
/* === END CONTRAST FIX 2026-09-16 === */