/* ============================================================
   KLIMA-ZENTRALE DESIGN SYSTEM CSS
   ============================================================
   ANLEITUNG FÜR DEN AGENTEN:
   Diese Datei wird per <link> in ALLE bestehenden HTML-Seiten eingebunden.
   Sie fügt KEINE neuen Klassen hinzu und ändert KEIN HTML.
   Sie verbessert das bestehende Design über CSS Custom Properties,
   Typografie und sanfte visuelle Verbesserungen.

   WICHTIG: Diese CSS-Datei darf NIEMALS opacity:0 oder display:none
   auf bestehende Elemente setzen. Alles muss sichtbar bleiben!

   EINBINDUNG: Füge diese Zeile in den <head> ein, NACH allen
   bestehenden <style> Blöcken:
   <link rel="stylesheet" href="/css/design-system.css">
   ============================================================ */

/* ===========================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ===========================================
   Diese Variablen werden von bestehenden Inline-Styles
   NICHT überschrieben, da viele Seiten noch keine
   CSS-Variablen verwenden. Sie definieren die Markenfarben
   als zentrale Werte für zukünftige Nutzung.
*/
:root {
  /* Markenfarben */
  --kz-primary: #00a0e3;
  --kz-primary-dark: #0284c7;
  --kz-primary-light: #38bdf8;
  --kz-accent-orange: #f59e0b;
  --kz-accent-red: #ea580c;

  /* Neutrale Farben */
  --kz-dark: #0f1d2f;
  --kz-dark-secondary: #1e293b;
  --kz-text: #334155;
  --kz-text-light: #475569;
  --kz-text-lighter: #64748b;

  /* Hintergründe */
  --kz-bg-white: #ffffff;
  --kz-bg-blue: #f0f7ff;
  --kz-bg-gray: #f8fafc;

  /* Ränder & Schatten */
  --kz-border: rgba(0, 0, 0, 0.06);
  --kz-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --kz-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --kz-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Radien */
  --kz-radius: 16px;
  --kz-radius-sm: 12px;
  --kz-radius-full: 50px;

  /* Transition */
  --kz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Status-Farben */
  --kz-success: #10b981;
  --kz-whatsapp: #25D366;
}


/* ===========================================
   2. TYPOGRAFIE & BASIS
   ===========================================
   Setzt die Inter-Schriftart als Standard.
   Wird nur angewendet wenn kein stärkerer
   Inline-Style vorhanden ist.
*/
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Google Fonts Import — Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* ===========================================
   3. HEADER-VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .header (alle Seiten)
   - .header-inner (alle Seiten)
   - .logo-area, .logo-main (Startseite, Showroom)
   - .header-cta (alle Seiten)
   - .nav-desktop (alle Seiten)

   KEIN position:fixed hier, da manche Seiten
   bereits eigene Header-Positionierung haben.
*/

/* Glassmorphism-Effekt für den Header */
.header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--kz-transition);
}

/* Scrolled-State (wenn JS .scrolled hinzufügt) */
.header.scrolled {
  box-shadow: var(--kz-shadow-sm);
}

/* Navigation-Links — dezente Verbesserung */
.nav-desktop a {
  font-family: 'Inter', system-ui, sans-serif;
  transition: color 0.2s ease;
}

.nav-desktop a:hover {
  color: var(--kz-primary);
}


/* ===========================================
   4. BUTTON-VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .btn-primary (alle Seiten)
   - .btn-secondary, .btn-outline (Städte-Seiten)
   - .btn, .btn-large (Showroom)
   - .wa-btn (alle Seiten)
*/

/* Primärer CTA-Button — gradient + hover */
.btn-primary {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  border-radius: var(--kz-radius-full);
  transition: var(--kz-transition);
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* WhatsApp-Button */
.wa-btn {
  transition: var(--kz-transition);
}

.wa-btn:hover {
  transform: translateY(-1px);
}


/* ===========================================
   5. CARD-VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .feature-card (Startseite)
   - .feature-box (Städte-Seiten)
   - .vorteil-card (Showroom)
   - .price-card (Städte-Seiten)
   - .testimonial-card (Startseite, Städte-Seiten)
*/

.feature-card,
.feature-box,
.vorteil-card,
.testimonial-card {
  transition: var(--kz-transition);
}

.feature-card:hover,
.feature-box:hover,
.vorteil-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kz-shadow-lg);
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--kz-shadow);
}

/* Price-Cards — dezenter Hover */
.price-card {
  transition: var(--kz-transition);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kz-shadow-lg);
}

/* Featured-Price-Card Extra-Effekt */
.price-card.featured {
  border-color: var(--kz-primary);
}


/* ===========================================
   6. FAQ-VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .faq-item (alle Seiten)
   - .faq-question (Städte-Seiten)
   - .faq-answer (alle Seiten)
*/

.faq-item {
  transition: var(--kz-transition);
}

.faq-item summary,
.faq-question {
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-item summary:hover,
.faq-question:hover {
  color: var(--kz-primary);
}


/* ===========================================
   7. FORMULAR-VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .contact-form, .kontakt-form-card (verschiedene Seiten)
   - .form-group (alle Seiten)
   - .form-row (Template-ähnliche Seiten)
*/

.form-group input,
.form-group select,
.form-group textarea {
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--kz-primary);
  box-shadow: 0 0 0 3px rgba(0, 160, 227, 0.12);
  outline: none;
}


/* ===========================================
   8. FOOTER-VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .unified-footer (Startseite, Showroom, Daikin)
   - .footer-container (Startseite, Showroom)
   - .footer-brand (Startseite, Showroom)
   - .footer-grid (alle Seiten)
   - .footer-column (Showroom)
   - .footer-links (Städte-Seiten)
   - .footer-legal (Startseite, Showroom)
   - .footer-partners (Startseite, Showroom)
*/

.unified-footer a,
.footer-links a {
  transition: color 0.2s ease;
}

.unified-footer a:hover,
.footer-links a:hover {
  color: var(--kz-primary);
}


/* ===========================================
   9. HERO-SECTION VERBESSERUNGEN
   ===========================================
   Zielt auf bestehende Klassen:
   - .hero (alle Seiten)
   - .hero-content (alle Seiten)
   - .hero-badge (verschiedene Seiten)
   - .hero-subtitle (verschiedene Seiten)
   - .hero-bg (Startseite, Showroom)
*/

/* Sanfte Text-Shadow-Verbesserung für Hero-Headlines */
.hero h1,
.hero h2 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.hero-badge {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ===========================================
   10. TRUST-ELEMENTE
   ===========================================
   Zielt auf bestehende Klassen:
   - .trust-bar, .trust-item (Städte-Seiten)
   - .trust-icon (Städte-Seiten)
*/

.trust-item {
  transition: var(--kz-transition);
}

.trust-item:hover {
  transform: translateY(-1px);
}


/* ===========================================
   11. COOKIE-BANNER
   ===========================================
   Zielt auf bestehende Klassen:
   - .cookie-banner, .cookie-inner (Städte-Seiten)
*/

.cookie-banner {
  font-family: 'Inter', system-ui, sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ===========================================
   12. ACCESSIBILITY & PERFORMANCE
   ===========================================
*/

/* Fokus-Outline für Tastatur-Navigation */
*:focus-visible {
  outline: 2px solid var(--kz-primary);
  outline-offset: 2px;
}

/* Reduced Motion: Alle Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print-Styles: Sauberer Druck */
@media print {
  .header,
  .cookie-banner,
  .wa-btn,
  .mobile-menu-btn,
  .mobile-nav {
    display: none !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}


/* ===========================================
   13. RESPONSIVE FEINTUNING
   ===========================================
   Ergänzungen zu bestehenden Media Queries.
   Überschreibt NICHT die bestehenden Breakpoints,
   sondern fügt kleine Verbesserungen hinzu.
*/

@media (max-width: 1023px) {
  .nav-desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(1.6rem, 5vw, 2rem);
  }
}


/* ===========================================
   ENDE DESIGN SYSTEM CSS
   ===========================================
   Datei-Größe: ~8 KB
   Ziel: Visuelles Upgrade ohne HTML-Änderungen
   Strategie: Nur bestehende Klassen ansprechen
   VERBOTEN: opacity:0, display:none auf Content
   =========================================== */

/* ============================================
   VISUAL CONSISTENCY PATCH
   Angleichung aller Seiten an Daikin/Städte-Template
   ============================================ */

/* --- 1. HEADER: Blur + Background vereinheitlichen --- */
header {
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}

/* --- 1b. HEADER-INNER: Höhe vereinheitlichen --- */
.header-inner {
    height: auto !important;
    min-height: 70px !important;
    padding: 12px 24px !important;
    max-width: var(--container-wide, 1280px) !important;
    margin: 0 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* --- 2. WHATSAPP BUTTON IM HEADER: Einheitlich --- */
header .wa-btn,
header .whatsapp-btn,
header a[href*="wa.me"],
header a[href*="whatsapp"] {
    background-color: #25D366 !important;
    color: #fff !important;
    font-size: 15px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

header .wa-btn:hover,
header .whatsapp-btn:hover,
header a[href*="wa.me"]:hover,
header a[href*="whatsapp"]:hover {
    background-color: #1fb855 !important;
}

/* --- 3. DAIKIN BADGE: Einheitliche Größe --- */
header img[src*="daikin"],
header img[alt*="Daikin"],
header img[alt*="daikin"] {
    width: 100px !important;
    height: auto !important;
    max-height: 50px;
    object-fit: contain;
}

/* --- 4. FOOTER HEADINGS: Einheitlich --- */
footer h4,
footer .footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 16px;
}

/* --- 5. COOKIE BANNER: Einheitliches Styling --- */
.cookie-banner,
#cookieBanner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding: 16px 24px;
    font-size: 14px;
}

/* Cookie-Overlay (nur Startseite hat das) - einheitlich machen */
.cookie-overlay,
#cookieOverlay {
    background: rgba(15, 29, 47, 0.4) !important;
}

/* Cookie Buttons einheitlich */
.cookie-btn-accept,
.cookie-actions .btn-primary,
.cookie-actions button:last-child {
    background: var(--kz-primary, #0d7a6e) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
}

.cookie-btn-decline,
.cookie-actions .btn-secondary,
.cookie-actions button:first-child {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 500;
    cursor: pointer;
}
/* ========================================
   FOOTER STYLES (UNIFIED)
   ======================================== */

.unified-footer {
  background: var(--kz-navy, #0a1628);
  color: #fff;
  padding: 60px 0 30px;
  margin-top: 60px;
}

.unified-footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.unified-footer .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.unified-footer .footer-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 8px;
}

.unified-footer .footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}

.unified-footer .footer-description {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  max-width: 400px;
  line-height: 1.6;
}

.unified-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.unified-footer .footer-column h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.unified-footer .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.unified-footer .footer-column li {
  margin-bottom: 10px;
}

.unified-footer .footer-column a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
}

.unified-footer .footer-column a:hover {
  color: var(--kz-primary, #0066cc);
}

.unified-footer .footer-column-wide {
  grid-column: span 2;
}

.unified-footer .footer-cities {
  font-size: 14px;
  line-height: 2;
  color: rgba(255,255,255,0.7);
}

.unified-footer .footer-cities a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}

.unified-footer .footer-cities a:hover {
  color: var(--kz-primary, #0066cc);
}

.unified-footer .footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
  gap: 16px;
}

.unified-footer .footer-legal p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

.unified-footer .footer-legal-links {
  display: flex;
  gap: 24px;
}

.unified-footer .footer-legal-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}

.unified-footer .footer-legal-links a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .unified-footer .footer-grid {
    grid-template-columns: 1fr;
  }
  .unified-footer .footer-column-wide {
    grid-column: span 1;
  }
  .unified-footer .footer-legal {
    flex-direction: column;
    text-align: center;
  }
}
