/* ==========================================================================
   Eco-Friendly Organic UI System — Nordrhein Gebäudedienste
   ========================================================================== */

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

/* 2. Design Tokens (CSS Variables) */
:root {
  /* Color Palette — High Contrast & Accessible */
  --color-bg: #fbfcf9;                 /* Eco-linen fresh white */
  --color-fg: #1e2920;                 /* Dark loam charcoal (14.59:1 contrast) */
  
  --color-primary: #006b40;            /* Rich Forest Green (Primary Brand color) */
  --color-primary-dark: #004c2d;       /* Dark Spruce for hover/active states */
  --color-primary-fg: #f1f6f2;         /* Pale Mint (6.16:1 contrast on primary) */
  
  --color-secondary: #164e33;          /* Deep Pine Green (Complementary eco tone) */
  --color-secondary-fg: #ffffff;       /* Pure White on Secondary (9.26:1 contrast) */
  --color-secondary-text: #164e33;     /* Deep Pine Green for text on light backgrounds */
  
  --color-accent: #e2ebdf;             /* Pale Forest Green (backgrounds, shape washes) */
  --color-accent-fg: #2b3e32;          /* Deep Forest Bark */
  
  --color-muted: #f0f4f1;              /* Soft river stone gray-green */
  --color-muted-fg: #526657;           /* Dark Sage Green (6.07:1 contrast on background) */
  
  --color-border: #d2ded5;             /* Washed sand / raw spruce */
  --color-border-hover: #006b40;       /* Highlight border */
  
  --color-destructive: #b91c1c;        /* Deep red for error alerts */
  --color-destructive-fg: #ffffff;
  
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Spacing Scale (4px/8px-based grid) */
  --space-xs: 0.25rem;                 /* 4px */
  --space-sm: 0.5rem;                  /* 8px */
  --space-md: 1rem;                    /* 16px */
  --space-lg: 1.5rem;                  /* 24px */
  --space-xl: 2rem;                    /* 32px */
  --space-2xl: 3rem;                   /* 48px */
  --space-3xl: 4rem;                   /* 64px */
  --space-4xl: 6rem;                   /* 96px */
  
  /* Border Radii */
  --radius-sm: 0.25rem;                /* 4px */
  --radius-md: 0.5rem;                 /* 8px */
  --radius-lg: 1rem;                   /* 16px */
  --radius-xl: 1.5rem;                 /* 24px */
  --radius-2xl: 2rem;                  /* 32px */
  --radius-pill: 9999px;               /* Pill shape */
  
  /* Custom Asymmetric Organic Border Radii */
  --radius-organic-1: 60% 40% 30% 70% / 60% 30% 70% 40%;
  --radius-organic-2: 50% 50% 20% 80% / 40% 60% 40% 60%;
  --radius-organic-3: 30% 70% 70% 30% / 30% 30% 70% 70%;
  
  /* Shadows */
  --shadow-soft: 0 4px 20px -2px rgba(0, 107, 64, 0.12);   /* Moss-tinted shadow */
  --shadow-float: 0 10px 40px -10px rgba(22, 78, 51, 0.18); /* Secondary pine green tinted shadow */
  --shadow-lg: 0 20px 40px -10px rgba(0, 107, 64, 0.15);     /* Deepened moss shadow */
  
  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Base Styles */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global Paper Texture Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035; /* Subtle 3.5% opacity */
  mix-blend-mode: multiply;
  /* Inline Base64 SVG Noise Pattern */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-fg);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-md) 0;
}

h1 { font-size: 2.75rem; letter-spacing: -0.025em; }
h2 { font-size: 2.25rem; letter-spacing: -0.02em; }
h3 { font-size: 1.5rem; letter-spacing: -0.01em; }
h4 { font-size: 1.25rem; }

p {
  color: var(--color-muted-fg);
  margin: 0 0 var(--space-md) 0;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ==========================================================================
   4. Component Styles
   ========================================================================== */

/* --- NAVIGATION --- */
.nav-glass {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - (var(--space-lg) * 2));
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(210, 222, 213, 0.5);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-normal);
}

.nav-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform var(--transition-normal);
}

.nav-logo-link:hover {
  transform: scale(1.02);
}

.nav-logo-img {
  height: 2.25rem;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  font-weight: 600;
  text-decoration: none;
  color: var(--color-fg);
  transition: color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-primary);
  text-decoration: none;
}

/* --- HOMEPAGE HERO --- */
.home-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(-1 * (var(--space-md) + 4.25rem));
  padding: calc(var(--space-4xl) + 5rem) 0 var(--space-4xl);
  min-height: calc(100vh + var(--space-md) + 4.25rem);
  min-height: calc(100svh + var(--space-md) + 4.25rem);
  display: flex;
  align-items: center;
  background-image: url("assets/img/gebaeudereinigung-bonn-hero.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

html,
body {
  overflow-x: hidden;
}

.nav-cta {
  height: 2.5rem;
  padding: 0 var(--space-lg);
  font-size: 0.9rem;
  line-height: 2.5rem;
  text-decoration: none;
}

/* Mobile Hamburger Toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-fg);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nav-toggle:hover {
  color: var(--color-primary);
  transform: scale(1.05);
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}

@media (max-width: 992px) {
  .nav-glass {
    top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    width: calc(100% - (var(--space-sm) * 2));
    margin: 0;
  }
  
  .nav-logo-img {
    height: 1.85rem;
  }
  
  .nav-menu {
    display: none;
    flex-direction: column;
    width: calc(100% - (var(--space-md) * 2));
    position: absolute;
    top: 100%;
    left: var(--space-md);
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(210, 222, 213, 0.6);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    gap: var(--space-md);
    margin-top: var(--space-sm);
    z-index: 101;
  }
  
  .nav-menu.active {
    display: flex;
  }
  
  .nav-menu li {
    width: 100%;
  }
  
  .nav-menu a {
    display: block;
    padding: var(--space-xs) 0;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(210, 222, 213, 0.3);
  }
  
  .nav-menu li:last-child a {
    border-bottom: none;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-glass .nav-cta {
    display: none !important;
  }

  .home-hero {
    margin-top: calc(-1 * (var(--space-sm) + 3.75rem));
    padding: calc(var(--space-3xl) + 5rem) 0 var(--space-3xl);
    min-height: calc(100vh + var(--space-sm) + 3.75rem);
    min-height: calc(100svh + var(--space-sm) + 3.75rem);
    background-position: 58% center;
  }
}

/* --- BUTTONS --- */
.btn-primary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  height: 3rem; /* 48px target */
  padding: 0 var(--space-xl);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary-pill:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-primary-fg);
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.btn-primary-pill:active {
  transform: translateY(0) scale(0.97);
}

.btn-primary-pill:focus-visible {
  color: var(--color-primary-fg);
}

.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-secondary-text);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  height: 3rem; /* 48px target */
  padding: 0 var(--space-xl);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary-outline:hover {
  background-color: rgba(22, 78, 51, 0.08);
  transform: translateY(-2px);
  border-color: var(--color-secondary-text);
}

.btn-secondary-outline:active {
  transform: translateY(0) scale(0.97);
}

.btn-ghost-organic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-ghost-organic:hover {
  background-color: rgba(0, 107, 64, 0.08);
  color: var(--color-primary-dark);
}

/* --- CARDS & CONTAINERS --- */
.card-organic {
  background-color: #ffffff;
  border: 1px solid rgba(210, 222, 213, 0.6);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card-organic:hover {
  transform: translateY(-4px) rotate(0.5deg);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 107, 64, 0.3);
}

/* Asymmetric Variation Cards */
.card-asymmetric-1 { border-radius: 4rem var(--radius-2xl) var(--radius-2xl) var(--radius-2xl); }
.card-asymmetric-2 { border-radius: var(--radius-2xl) 4rem var(--radius-2xl) var(--radius-2xl); }
.card-asymmetric-3 { border-radius: var(--radius-2xl) var(--radius-2xl) 4rem var(--radius-2xl); }
.card-asymmetric-4 { border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) 4rem; }

/* Rotated Image Frame */
.rotated-image-frame {
  transform: rotate(-1.5deg);
  border: 8px solid #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  transition: transform var(--transition-slow);
}

.rotated-image-frame:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Organic Masked Image */
.organic-masked-image {
  border-radius: var(--radius-organic-3);
  transition: border-radius var(--transition-slow), transform var(--transition-slow);
}

.organic-masked-image:hover {
  border-radius: var(--radius-organic-1);
  transform: scale(1.03);
}

/* --- INPUT FIELDS --- */
.input-pill {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 3rem; /* 48px target */
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-fg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.input-pill:focus {
  border-color: var(--color-primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 107, 64, 0.15);
}

.input-pill::placeholder {
  color: var(--color-muted-fg);
  opacity: 0.7;
}

/* Form Label */
.input-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-fg);
  margin-bottom: var(--space-xs);
  padding-left: var(--space-sm);
}

/* --- ACCORDIONS (FAQ) --- */
.accordion-organic {
  border: 1px solid rgba(210, 222, 213, 0.6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition-fast);
}

.accordion-organic[open] {
  border-color: var(--color-primary);
}

.accordion-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  user-select: none;
}

/* Hide native details disclosure triangle */
.accordion-summary::-webkit-details-marker {
  display: none;
}

.accordion-icon-arrow {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  transition: transform var(--transition-normal);
}

.accordion-organic[open] .accordion-icon-arrow {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 var(--space-lg) var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(210, 222, 213, 0.3);
  color: var(--color-muted-fg);
  font-size: 0.95rem;
}

/* --- DECORATIVE BLOB BACKGROUNDS --- */
.blob-bg-wash {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: blur(50px);
  opacity: 0.25;
  background-color: var(--color-accent);
}

.blob-organic-1 {
  width: 25rem;
  height: 25rem;
  border-radius: var(--radius-organic-1);
  animation: blob-spin 15s ease-in-out infinite alternate, blob-float 10s ease-in-out infinite;
}

.blob-organic-2 {
  width: 20rem;
  height: 20rem;
  background-color: rgba(22, 78, 51, 0.15); /* Pine Green tint */
  border-radius: var(--radius-organic-2);
  animation: blob-spin 12s ease-in-out infinite alternate-reverse, blob-float 8s ease-in-out infinite;
}

/* --- ICON CONTAINERS --- */
.icon-container-pill {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  background-color: rgba(0, 107, 64, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.icon-container-pill svg {
  stroke: var(--color-primary);
  transition: stroke var(--transition-normal);
}

.icon-container-pill:hover {
  background-color: var(--color-primary);
  transform: scale(1.05) rotate(-5deg);
}

.icon-container-pill:hover svg {
  stroke: var(--color-primary-fg);
}

/* ==========================================================================
   5. Keyframe Animations
   ========================================================================== */
@keyframes blob-spin {
  0% {
    border-radius: var(--radius-organic-1);
    transform: rotate(0deg);
  }
  50% {
    border-radius: var(--radius-organic-2);
    transform: rotate(180deg);
  }
  100% {
    border-radius: var(--radius-organic-3);
    transform: rotate(360deg);
  }
}

@keyframes blob-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.04);
  }
}