:root {
  /* Brand Colors - ALLE GRÜN FÜR EINHEITLICHKEIT */
  --primary: #00c389; /* Fresh green */
  --secondary: #23d5ab; /* Teal green (statt blau) */
  --accent: #27ae60; /* Grüner Akzent */
  --dark: #003844;
  --light: #f4f9fb;
  --white: #ffffff;

  /* Typography & Spacing */
  --font-base: 'Inter', Arial, sans-serif;

  /* Sizing / Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 25px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);

  /* Motion */
  --transition: 0.25s ease-in-out;
}

/* ===== CSS RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-base);
  color: #333;
  background: var(--light);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }

/* ===== UTILITIES ===== */
.btn-primary {
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  color: var(--white);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.section {
  padding: 2rem 1rem;
}
.container {
  width: 94%;
  max-width: 1280px;
  margin: 0 auto;
}

.shadow {
  box-shadow: var(--shadow-md);
}

.radius-md { border-radius: var(--radius-md); }

/* ==== EcoDashboard Professional Layout Overrides =====================
   Diese Styles erweitern die Basis-Theme-Variablen um ein klareres, aufgeräumtes
   Erscheinungsbild und sorgen dafür, dass Inhalte über die gesamte verfügbare
   Breite dargestellt werden. ============================================ */

/* 1) Hintergrund & Typografie */
body {
  background: var(--light) !important; /* Entfernt starke Farbverläufe */
  background-image: none !important;
  font-family: var(--font-base);
  color: #222;
}

/* 2) Breitere Layout-Elemente */
.container,
.form-section,
.scope-section,
.scope-card,
.result-section {
  width: 95% !important;            /* nutzt fast die volle Viewport-Breite */
  max-width: 1600px !important;     /* großzügiges Limit für Widescreens */
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1600px) {
  .container,
  .form-section,
  .scope-section,
  .scope-card,
  .result-section {
    max-width: 1800px !important;
  }
}

/* 3) Überschriften & Texte harmonisieren */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #003844;
}

/* ===== EINHEITLICHER HEADER NUR FÜR TOOL-SEITEN ===== */
/* AUSSCHLUSS: index.html und Registrierung.html behalten ihre originalen Farben */
body:not(.registration-page) header, 
body:not(.registration-page) .header-basic {
  /* KRITISCH: Überschreibt ALLE anderen Header-Definitionen und Farbvariationen */
  background: rgba(0, 77, 64, 0.95) !important; 
  background-image: none !important; /* Entfernt alle Gradients */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  
  /* Layout - ABSOLUT FIXIERT */
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding: 12px 40px !important;
  
  /* Flexbox - UNVERÄNDERLICH */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  
  /* Einheitliche Border */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  
  /* KRITISCHE HÖHE - NIEMALS ÄNDERN */
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
}

/* Logo - ABSOLUT FIXIERTE GRÖSSE NUR FÜR TOOL-SEITEN */
body:not(.registration-page) header img,
body:not(.registration-page) .header-basic img,
body:not(.registration-page) .logo-70,
body:not(.registration-page) .logo-40 {
  height: 50px !important;
  width: auto !important;
  max-height: 50px !important;
  min-height: 50px !important;
  transition: transform 0.3s ease !important;
  object-fit: contain !important;
}

body:not(.registration-page) header img:hover, 
body:not(.registration-page) .header-basic img:hover {
  transform: scale(1.05) !important;
}

/* Navigation Container - ABSOLUT FIXIERT NUR FÜR TOOL-SEITEN */
body:not(.registration-page) header nav, 
body:not(.registration-page) .header-basic nav {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-left: 20px !important;
  height: 52px !important; /* Fixierte Höhe für Buttons */
}

/* Navigation Links - ABSOLUT EINHEITLICH NUR FÜR TOOL-SEITEN */
body:not(.registration-page) header a, 
body:not(.registration-page) header nav a, 
body:not(.registration-page) .header-basic a, 
body:not(.registration-page) .header-basic nav a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  
  /* KRITISCHE BUTTON-DIMENSIONEN */
  padding: 10px 14px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  
  /* FESTE STYLING */
  font-size: 13px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
  
  /* Flexbox für gleichmäßige Buttons */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

/* Hover-Effekt - ABSOLUT EINHEITLICH */
header a:hover, header nav a:hover, .header-basic a:hover, 
.header-basic nav a:hover, .nav-container a:hover, .nav-links a:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Aktiver Link - ABSOLUT EINHEITLICH */
header a.active, header nav a.active, .header-basic a.active, 
.header-basic nav a.active, .nav-container a.active {
  background-color: rgba(35, 213, 171, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(35, 213, 171, 0.3) !important;
}

/* Icons in Navigation - FIXIERT */
header a i, header nav a i, .header-basic a i, .header-basic nav a i,
.nav-container a i, .nav-links a i {
  font-size: 13px !important;
  margin-right: 0 !important; /* Wird durch gap gesteuert */
  flex-shrink: 0 !important;
}

/* ===== KRITISCHE FARB-ÜBERSCHREIBUNGEN NUR FÜR TOOL-SEITEN ===== */
/* Überschreibt ALLE anderen Header-Hintergründe NUR in Tool-Seiten */
body:not(.registration-page) header, 
body:not(.registration-page) .header-basic,
body:not(.registration-page) .dashboard-header, 
body:not(.registration-page) .express-header {
  background: rgba(0, 77, 64, 0.95) !important;
  background-color: rgba(0, 77, 64, 0.95) !important;
  background-image: none !important;
}

/* Überschreibt alle Gradient-Hintergründe NUR in Tool-Seiten */
body:not(.registration-page) header[style*="background"], 
body:not(.registration-page) .header-basic[style*="background"] {
  background: rgba(0, 77, 64, 0.95) !important;
  background-image: none !important;
}

/* Text-Farben für Header-Links IMMER weiß NUR in Tool-Seiten */
body:not(.registration-page) header a, 
body:not(.registration-page) header nav a, 
body:not(.registration-page) .header-basic a, 
body:not(.registration-page) .header-basic nav a {
  color: #ffffff !important;
}

/* Mobile Responsiveness - EINHEITLICH */
@media (max-width: 768px) {
  header, .header-basic, .nav-container {
    padding: 8px 20px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }
  
  header img, .header-basic img, .nav-container img, .logo-nav img {
    height: 56px !important;
    max-height: 56px !important;
    min-height: 56px !important;
  }
  
  header nav, .header-basic nav, .nav-container nav {
    gap: 4px !important;
    margin-left: 10px !important;
    height: 44px !important;
  }
  
  header a, header nav a, .header-basic a, .header-basic nav a,
  .nav-container a, .nav-links a {
    padding: 8px 10px !important;
    font-size: 11px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  
  header a i, header nav a i, .header-basic a i, .header-basic nav a i {
    font-size: 11px !important;
  }
}

/* ===== AUTOMATIC ACTIVE LINK JAVASCRIPT ===== */
/* 
Fügen Sie dieses Script am Ende jeder HTML-Seite ein:

<script>
// Automatische Aktiv-Markierung basierend auf aktueller Seite
document.addEventListener('DOMContentLoaded', function() {
    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
    const navLinks = document.querySelectorAll('header nav a');
    
    // Entferne alle aktiven Klassen
    navLinks.forEach(link => link.classList.remove('active'));
    
    // Setze aktive Klasse basierend auf aktueller Seite
    navLinks.forEach(link => {
        const href = link.getAttribute('href');
        if (href === currentPage || 
            (currentPage === '' && href === 'index.html') ||
            (currentPage === 'index.html' && href === 'index.html')) {
            link.classList.add('active');
        }
    });
});
</script>
*/

/* 5) Buttons – dezenter Hover */
button,
.btn-primary {
  transition: background 0.25s ease-in-out, transform 0.25s ease-in-out;
}
button:hover,
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 6) Karten / Boxen */
.form-section,
.scope-section,
.scope-card,
.result-section {
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-sm);
  background: #ffffff;
}

/* ===================================================================== */ 
/* Page utilities extracted from inline styles (index.html) */
.funding-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 4rem 0;
}

.card-lg {
  background: #ffffff;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  border: 1px solid #e9ecef;
}

.btn-green {
  display: inline-block;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: #ffffff;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.hero-quote {
  font-size: 1.1rem;
  color: #5a6c7d;
  margin-bottom: 2rem;
  font-style: italic;
  border-left: 4px solid #27ae60;
  padding-left: 1rem;
}

/* Simple utilities */
.hidden { display: none; }
.ml-auto { margin-left: auto; }
.btn-white { background: #ffffff; color: #004d40; }
/* Layout utilities */
.row { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.mt-100 { margin-top: 100px; }

/* Navigation utilities */
.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 1rem 2rem;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.nav-fixed a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

/* Buttons */
.btn-primary-pill {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: #ffffff;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

/* Header basics (non-fixed) */
.header-basic {
  padding: 10px 40px;
  border-bottom: 1px solid var(--border-color);
  /* full-bleed across viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Soft card container */
.card-soft {
  padding: 2rem;
  background: var(--bg-light);
  border-radius: 8px;
}

/* Spacing utilities */
.mr-8 { margin-right: 8px; }

/* Logo utilities */
.logo-40 { height: 35px !important; }
.logo-70 { height: 50px !important; }