/* Modern Website Redesign - GRÜNE LIGA Oberhavel */
/* Green Nature Color Scheme */

/* Schriften lokal eingebunden (statt Google Fonts) – Inter und Space Grotesk, SIL Open Font License */
/* Inter – latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter – latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter – latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter – latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter – latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter – latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter – latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter – latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter – latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter – latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk – latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk – latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk – latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk – latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk – latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk – latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk – latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk – latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========== CSS Custom Properties ========== */
:root {
  /* Color Palette - Forest Green & Gold */
  --primary: #2d6a45;
  --primary-light: #40915f;
  --primary-dark: #1b432b;
  --primary-50: #d8f3dc;
  --accent: #d4a017;
  --accent-light: #e6b422;
  --accent-dark: #b8860b;
  --gold: #d4a017;
  --teal: #527968;
  --earth: #8b7355;

  /* Neutrals */
  --white: #ffffff;
  --gray-50: #faf9f5;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  --gradient-hero: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 40px rgba(45, 106, 69, 0.3);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* Spacing */
  --container-max: 1200px;
  --section-padding: 6rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

/* ========== Reset & Base ========== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-700);
  background: var(--gray-50);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-900);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p {
  margin-bottom: 1rem;
}

/* ========== Container ========== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ========== Animations ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========== Header - Glassmorphism ========== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  text-decoration: none;
  transition: var(--transition);
}

.logo:hover {
  transform: translateY(-2px);
}

.logo img {
  height: 55px;
  width: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
  line-height: 1.2;
  max-width: 8em; /* zweizeilig: „GRÜNE LIGA“ / „Oberhavel“ */
}

.logo-text span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-500);
}

/* Navigation */
.nav {
  display: flex;
  gap: 0.5rem;
}

.nav a {
  position: relative;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--gray-600);
  border-radius: var(--radius);
  transition: color 0.3s ease, background 0.3s ease;
  overflow: hidden;
}

.nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-accent);
  transition: var(--transition);
  transform: translateX(-50%);
}

.nav a:hover {
  color: var(--primary);
  background: var(--gray-100);
}

.nav a:hover::before {
  width: 60%;
}

.nav a.active {
  color: var(--white);
  background: var(--gradient-primary);
}

.nav a.active::before {
  display: none;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  background: var(--gradient-primary);
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.menu-toggle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

/* ========== Hero Section ========== */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/header-bg.jpg') center/cover no-repeat;
  overflow: hidden;
  margin-top: 0;
  padding-top: 80px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27, 67, 43, 0.88) 0%, rgba(45, 106, 69, 0.78) 50%, rgba(82, 121, 104, 0.72) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(to top, var(--white), transparent);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
  animation: fadeInUp 1s ease-out;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.hero p {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn-outline-white:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  background: var(--gradient-accent);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: var(--transition-slow);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
  color: var(--white);
}

.btn:hover::before {
  left: 100%;
}

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

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--white);
}

.btn-primary {
  background: var(--gradient-primary);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(45, 106, 69, 0.4);
}

.btn-white {
  background: var(--white);
  color: var(--primary);
}

.btn-white:hover {
  background: var(--gray-100);
  color: var(--primary);
  box-shadow: var(--shadow-lg);
}

/* ========== Page Header ========== */
.page-header {
  background: var(--gradient-hero);
  padding: 10rem 0 8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  /* weicher Übergang: beginnt und endet sanft (S-Kurve statt gerader Linie) */
  background: linear-gradient(to top,
    var(--gray-50) 0%,
    color-mix(in srgb, var(--gray-50) 97%, transparent) 10%,
    color-mix(in srgb, var(--gray-50) 90%, transparent) 20%,
    color-mix(in srgb, var(--gray-50) 78%, transparent) 30%,
    color-mix(in srgb, var(--gray-50) 65%, transparent) 40%,
    color-mix(in srgb, var(--gray-50) 50%, transparent) 50%,
    color-mix(in srgb, var(--gray-50) 35%, transparent) 60%,
    color-mix(in srgb, var(--gray-50) 22%, transparent) 70%,
    color-mix(in srgb, var(--gray-50) 10%, transparent) 80%,
    color-mix(in srgb, var(--gray-50) 3%, transparent) 90%,
    transparent 100%);
}

.page-header h1 {
  color: var(--white);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  animation: fadeInDown 0.8s ease-out;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* ========== Sections ========== */
.section {
  padding: var(--section-padding) 0;
  overflow-x: hidden;
  max-width: 100vw;
}

.section-green {
  background: var(--gradient-primary);
  color: var(--white);
}

.section-green h2,
.section-green h3,
.section-green h4 {
  color: var(--white);
}

.section-green .content-box {
  color: var(--gray-700);
}

.section-gray {
  background: var(--gray-100);
}

.section-title {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
}

.section-title p {
  color: var(--gray-500);
  font-size: 1.125rem;
  max-width: 600px;
  margin: 1rem auto 0;
}

/* ========== Content Section ========== */
.content {
  padding: 4rem 0;
}

.content-box {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  margin-bottom: 2rem;
  animation: fadeInUp 0.6s ease-out;
  transition: var(--transition);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.content-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.content-box h2 {
  color: var(--primary);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 1rem;
}

.content-box h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
}

/* mittig gestellter Kasten: Text und Zierlinie unter der Überschrift mittig */
.content-box--center {
  text-align: center;
}

.content-box--center h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.content-box ul {
  margin: 1rem 0 1.5rem 1.5rem;
}

.content-box li {
  margin-bottom: 0.6rem;
  position: relative;
}

.content-box li::marker {
  color: var(--accent);
}

/* ========== Cards Grid ========== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Feature Cards */
.feature-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--white);
  transition: var(--transition);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
  background: var(--gradient-accent);
}

.feature-card h3 {
  margin-bottom: 1rem;
  color: var(--primary);
}

/* ========== Vorstand Grid ========== */
.vorstand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* große Bildschirme: alle fünf Vorstandsmitglieder in einer Reihe */
@media (min-width: 1025px) {
  .vorstand-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
  }

  .vorstand-card h3 {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  }
}

.vorstand-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
  animation: fadeInUp 0.6s ease-out both;
}

.vorstand-card:nth-child(1) { animation-delay: 0.1s; }
.vorstand-card:nth-child(2) { animation-delay: 0.2s; }
.vorstand-card:nth-child(3) { animation-delay: 0.3s; }
.vorstand-card:nth-child(4) { animation-delay: 0.4s; }
.vorstand-card:nth-child(5) { animation-delay: 0.5s; }

.vorstand-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.vorstand-image {
  position: relative;
  padding-top: 100%;
  background: var(--gradient-primary);
  overflow: hidden;
}

.vorstand-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.vorstand-card:hover .vorstand-image img {
  transform: scale(1.1);
}

.vorstand-card h3 {
  padding: 1.5rem 1rem 0.5rem;
  color: var(--primary);
}

.vorstand-position {
  padding: 0 1rem 1.5rem;
  color: var(--accent);
  font-weight: 500;
}

/* ========== Projekt Grid ========== */
.projekt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.projekt-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  animation: fadeInUp 0.6s ease-out both;
  display: flex;
  flex-direction: column;
}

.projekt-card:nth-child(1) { animation-delay: 0.1s; }
.projekt-card:nth-child(2) { animation-delay: 0.15s; }
.projekt-card:nth-child(3) { animation-delay: 0.2s; }
.projekt-card:nth-child(4) { animation-delay: 0.25s; }
.projekt-card:nth-child(5) { animation-delay: 0.3s; }
.projekt-card:nth-child(6) { animation-delay: 0.35s; }

.projekt-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.projekt-card > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: var(--transition-slow);
}

.projekt-card:hover > img {
  transform: scale(1.05);
}

.projekt-card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.projekt-card-content .btn {
  margin-top: auto;
  align-self: flex-start;
}

.projekt-card-content h3 {
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.projekt-card-content p {
  color: var(--gray-600);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* ========== Findling Grid ========== */
.findling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.findling-card {
  position: relative;
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-decoration: none;
  aspect-ratio: 4/3;
  animation: fadeInUp 0.6s ease-out both;
}

.findling-card:nth-child(odd) { animation-delay: 0.1s; }
.findling-card:nth-child(even) { animation-delay: 0.2s; }

.findling-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.findling-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(27, 67, 43, 0.55) 0%, transparent 35%);
  z-index: 1;
  transition: var(--transition);
}

.findling-card h3 {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  color: var(--white);
  font-size: 1.25rem;
  z-index: 2;
  transition: var(--transition);
}

.findling-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.findling-card:hover img {
  transform: scale(1.1);
}

.findling-card:hover::before {
  background: linear-gradient(to top, rgba(45, 106, 69, 0.6) 0%, transparent 45%);
}

/* ========== Geschichte Grid ========== */
.geschichte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.geschichte-card {
  position: relative;
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-decoration: none;
  aspect-ratio: 4/3;
}

.geschichte-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.geschichte-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(27, 67, 43, 0.9) 0%, transparent 60%);
  z-index: 1;
}

.geschichte-card h3 {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  color: var(--white);
  font-size: 1.1rem;
  z-index: 2;
}

.geschichte-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.geschichte-card:hover img {
  transform: scale(1.1);
}

/* ========== Aktivisten Galerie (Person Grid) ========== */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem 2rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.person-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.person-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.person-card:hover::before {
  transform: scaleX(1);
}

.person-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.5rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(45, 106, 69, 0.15);
  border: 4px solid var(--white);
  outline: 3px solid var(--primary-50);
  transition: var(--transition);
}

.person-card:hover .person-image {
  outline-color: var(--primary-light);
  box-shadow: 0 8px 30px rgba(45, 106, 69, 0.25);
  transform: scale(1.05);
}

.person-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.person-card:hover .person-image img {
  transform: scale(1.1);
}

.person-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.person-info h3 {
  color: var(--primary);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  transition: var(--transition);
}

.person-card:hover .person-info h3 {
  color: var(--primary-dark);
}

.person-info p {
  color: var(--gray-500);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

/* Biography Detail Page */
.biography-header {
  text-align: center;
  margin-bottom: 2rem;
}

.biography-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(45, 106, 69, 0.2);
  border: 5px solid var(--white);
  outline: 3px solid var(--primary-50);
}

/* ========== Detail Page Styles ========== */
.detail-content {
  max-width: 900px;
  margin: 0 auto;
}

.detail-image {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

.detail-image img {
  width: 100%;
  height: auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 2rem;
  transition: var(--transition);
}

.back-link:hover {
  color: var(--accent-dark);
  transform: translateX(-5px);
}

/* ========== Info Box ========== */
.info-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  margin: 2rem 0;
}

.info-box h3 {
  color: var(--white);
  margin-bottom: 1rem;
}

.info-box ul {
  list-style: none;
  padding: 0;
}

.info-box li {
  padding: 0.5rem 0;
  display: flex;
  gap: 1rem;
}

.info-box li strong {
  min-width: 120px;
}

/* ========== Quote Box ========== */
.quote-box {
  background: var(--gray-100);
  border-left: 4px solid var(--accent);
  padding: 2rem;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--gray-700);
}

/* ========== Timeline ========== */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
  padding-left: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.5rem;
  width: 15px;
  height: 15px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
  transform: translateX(-6px);
}

.timeline-item h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.timeline-year {
  display: inline-block;
  background: var(--gradient-primary);
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ========== Contact Form ========== */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(45, 106, 69, 0.1);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

/* ========== Contact Info Cards ========== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.contact-card {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.contact-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--white);
}

.contact-card h3 {
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* Contact Box Alternative */
.contact-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin-top: 2.5rem;
  color: var(--white);
}

.contact-box h3 {
  color: var(--white);
  margin-bottom: 1rem;
}

.contact-box p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5rem;
}

.contact-box a {
  color: var(--gold);
}

.contact-box a:hover {
  color: var(--white);
}

/* ========== Wachsender Baum in Hero + Logo-Streifen (Startseite) ========== */

/* Hero-Layout: Baum links, Text rechts */
.hero-with-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.hero-with-tree .hero-text {
  flex: 1;
}

.hero-with-tree .hero-text h1 {
  text-align: center;
}

.hero-with-tree .hero-text p {
  margin-left: auto;
  margin-right: auto;
}

.hero-with-tree .hero-buttons {
  justify-content: center;
}

.growing-tree {
  /* Höhe richtet sich nach der Fensterhöhe, damit Text, Knöpfe und der
     Logo-Streifen darunter auf den ersten Bildschirm passen.
     610px = alles außer dem Baum (Menüleiste, Text, Knöpfe, Logo-Streifen). */
  --baum-h: clamp(120px, calc(100vh - 610px), 395px);
  width: calc(var(--baum-h) * 280 / 395);
  height: var(--baum-h);
  flex-shrink: 0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.15));
  transform-origin: bottom center;
  overflow: visible;
}

/* Logo-Streifen unter der Hero-Section */
.hero-logo-strip {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  margin-top: -1rem;
  border-bottom: 2px solid var(--primary-50);
}

/* Logo ist breit und flach: Höhe aus dem Bild selbst, kein leerer Rand */
.hero-logo-strip img {
  width: 180px;
  height: auto;
}

/* === Phase 0: Samen fällt von oben (0s - 2s) === */
.seed-group {
  animation: seedFall 1.6s cubic-bezier(0.45, 0, 0.85, 0.35) 0.2s both;
}

@keyframes seedFall {
  0%   { transform: translateY(-400px); opacity: 0; }
  5%   { opacity: 1; }
  70%  { transform: translateY(0px); opacity: 1; }
  80%  { transform: translateY(-8px); opacity: 1; }
  90%  { transform: translateY(0px); opacity: 1; }
  95%  { transform: translateY(-3px); opacity: 1; }
  100% { transform: translateY(0px); opacity: 1; }
}

@keyframes shadowFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === Phase 1b: Sprössling wächst aus dem Keim (3s - 4.5s) === */
.tree-sprout {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: drawSprout 1.5s ease-out 3s forwards, sproutFade 1s ease-out 5.5s forwards;
}

.sprout-leaf-l {
  animation: drawSprout 0.8s ease-out 3.8s forwards, sproutFade 1s ease-out 5.5s forwards;
}

.sprout-leaf-r {
  animation: drawSprout 0.8s ease-out 4s forwards, sproutFade 1s ease-out 5.5s forwards;
}

@keyframes drawSprout {
  to { stroke-dashoffset: 0; }
}

@keyframes sproutFade {
  to { opacity: 0; }
}

/* === Phase 2: Stamm wächst langsam (4.5s - 8.5s), wird dicker === */
.tree-trunk-line {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: drawTrunk 4s ease-in-out 4.5s forwards, thickenTrunk 3s ease-in-out 6.5s forwards, trunkLineFade 0.5s ease-out 9s forwards;
}

@keyframes drawTrunk {
  to { stroke-dashoffset: 0; }
}

@keyframes thickenTrunk {
  to { stroke-width: 18; }
}

@keyframes trunkLineFade {
  to { opacity: 0; }
}

/* Dicker Stamm-Umriss (Trapez: unten breit, oben schmal) blendet ein (8.5s) */
.tree-trunk-thick {
  animation: trunkFill 1.5s ease-out 8.5s both;
}

@keyframes trunkFill {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Samen ausblenden wenn Stamm dick ist (8s) */
.seed-body {
  animation: seedFadeOut 1.5s ease-out 7.5s forwards;
}
.seed-highlight {
  animation: seedFadeOut 1.5s ease-out 7.5s forwards;
}
.ground-shadow {
  opacity: 0;
  animation: shadowFadeIn 0.4s ease-out 1.5s both, seedFadeOut 2s ease-out 8s forwards;
}

@keyframes seedFadeOut {
  to { opacity: 0; }
}

/* === Phase 3: Hauptäste wachsen raus (6s - 9s), Verzweigungen folgen === */
.tree-branch {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
}

/* Hauptäste — versetzt, beginnen schon während Stamm dicker wird */
.branch-1  { animation: drawBranch 1.4s ease-out 6.5s forwards; }
.branch-2  { animation: drawBranch 1.4s ease-out 6.8s forwards; }
.branch-3  { animation: drawBranch 1.3s ease-out 7.2s forwards; }
.branch-4  { animation: drawBranch 1.3s ease-out 7.5s forwards; }
.branch-5  { animation: drawBranch 1.2s ease-out 7.9s forwards; }
.branch-6  { animation: drawBranch 1.2s ease-out 8.2s forwards; }
.branch-7  { animation: drawBranch 1.1s ease-out 8.6s forwards; }
.branch-8  { animation: drawBranch 1.1s ease-out 8.9s forwards; }
.branch-9  { animation: drawBranch 1.0s ease-out 9.2s forwards; }
.branch-10 { animation: drawBranch 1.0s ease-out 9.4s forwards; }

/* Unter-Verzweigungen — folgen nach dem Hauptast */
.branch-1a  { animation: drawBranch 0.9s ease-out 7.5s forwards; }
.branch-1b  { animation: drawBranch 0.8s ease-out 7.8s forwards; }
.branch-2a  { animation: drawBranch 0.9s ease-out 7.9s forwards; }
.branch-2b  { animation: drawBranch 0.8s ease-out 8.2s forwards; }
.branch-3a  { animation: drawBranch 0.8s ease-out 8.3s forwards; }
.branch-3b  { animation: drawBranch 0.7s ease-out 8.6s forwards; }
.branch-4a  { animation: drawBranch 0.8s ease-out 8.7s forwards; }
.branch-4b  { animation: drawBranch 0.7s ease-out 9.0s forwards; }
.branch-5a  { animation: drawBranch 0.7s ease-out 9.1s forwards; }
.branch-5b  { animation: drawBranch 0.7s ease-out 9.3s forwards; }
.branch-5c  { animation: drawBranch 0.6s ease-out 9.5s forwards; }
.branch-6a  { animation: drawBranch 0.7s ease-out 9.4s forwards; }
.branch-6b  { animation: drawBranch 0.7s ease-out 9.6s forwards; }
.branch-6c  { animation: drawBranch 0.6s ease-out 9.8s forwards; }
.branch-7a  { animation: drawBranch 0.7s ease-out 9.8s forwards; }
.branch-7b  { animation: drawBranch 0.6s ease-out 10.0s forwards; }
.branch-7c  { animation: drawBranch 0.6s ease-out 10.2s forwards; }
.branch-8a  { animation: drawBranch 0.7s ease-out 10.1s forwards; }
.branch-8b  { animation: drawBranch 0.6s ease-out 10.3s forwards; }
.branch-8c  { animation: drawBranch 0.6s ease-out 10.5s forwards; }
.branch-9a  { animation: drawBranch 0.6s ease-out 10.4s forwards; }
.branch-9b  { animation: drawBranch 0.6s ease-out 10.6s forwards; }
.branch-10a { animation: drawBranch 0.6s ease-out 10.7s forwards; }
.branch-10b { animation: drawBranch 0.6s ease-out 10.9s forwards; }
/* Weitere Verzweigungen obere Äste */
.branch-7d  { animation: drawBranch 0.5s ease-out 10.8s forwards; }
.branch-7e  { animation: drawBranch 0.5s ease-out 11.0s forwards; }
.branch-8d  { animation: drawBranch 0.5s ease-out 11.1s forwards; }
.branch-8e  { animation: drawBranch 0.5s ease-out 11.2s forwards; }
.branch-9c  { animation: drawBranch 0.5s ease-out 11.0s forwards; }
.branch-9d  { animation: drawBranch 0.5s ease-out 11.3s forwards; }
.branch-10c { animation: drawBranch 0.5s ease-out 11.2s forwards; }
.branch-10d { animation: drawBranch 0.5s ease-out 11.4s forwards; }
/* Zusätzliche Verzweigungen untere/mittlere Äste */
.branch-1c  { animation: drawBranch 0.7s ease-out 8.1s forwards; }
.branch-2c  { animation: drawBranch 0.7s ease-out 8.5s forwards; }
.branch-3c  { animation: drawBranch 0.6s ease-out 8.9s forwards; }
.branch-4c  { animation: drawBranch 0.6s ease-out 9.3s forwards; }
.branch-5d  { animation: drawBranch 0.5s ease-out 9.8s forwards; }
.branch-6d  { animation: drawBranch 0.5s ease-out 10.0s forwards; }

@keyframes drawBranch {
  to { stroke-dashoffset: 0; }
}

/* === Phase 4: Lindenblätter erscheinen langsam nacheinander (8.5s - 12.5s) === */
.tree-leaf {
  opacity: 0;
}

/* Untere Äste — beginnen schon während Stamm dicker wird */
.leaf-1  { animation: leafGrow 2s ease-out 10.5s both; }
.leaf-2  { animation: leafGrow 2s ease-out 10.7s both; }
.leaf-3  { animation: leafGrow 2s ease-out 10.9s both; }
.leaf-35 { animation: leafGrow 2s ease-out 10.6s both; }
.leaf-36 { animation: leafGrow 2s ease-out 10.8s both; }
.leaf-4  { animation: leafGrow 2s ease-out 11.0s both; }
.leaf-5  { animation: leafGrow 2s ease-out 11.2s both; }
.leaf-6  { animation: leafGrow 2s ease-out 11.1s both; }
.leaf-37 { animation: leafGrow 2s ease-out 11.3s both; }
.leaf-38 { animation: leafGrow 2s ease-out 11.0s both; }
/* Mittlere Äste */
.leaf-7  { animation: leafGrow 2s ease-out 11.4s both; }
.leaf-8  { animation: leafGrow 2s ease-out 11.6s both; }
.leaf-9  { animation: leafGrow 2s ease-out 11.5s both; }
.leaf-39 { animation: leafGrow 2s ease-out 11.7s both; }
.leaf-40 { animation: leafGrow 2s ease-out 11.5s both; }
.leaf-10 { animation: leafGrow 2s ease-out 11.8s both; }
.leaf-11 { animation: leafGrow 2s ease-out 12.0s both; }
.leaf-12 { animation: leafGrow 2s ease-out 11.9s both; }
.leaf-41 { animation: leafGrow 2s ease-out 12.1s both; }
.leaf-42 { animation: leafGrow 2s ease-out 11.8s both; }
/* Obere Äste */
.leaf-13 { animation: leafGrow 2s ease-out 12.2s both; }
.leaf-14 { animation: leafGrow 2s ease-out 12.4s both; }
.leaf-15 { animation: leafGrow 2s ease-out 12.3s both; }
.leaf-16 { animation: leafGrow 2s ease-out 12.5s both; }
.leaf-43 { animation: leafGrow 2s ease-out 12.2s both; }
.leaf-44 { animation: leafGrow 2s ease-out 12.4s both; }
.leaf-17 { animation: leafGrow 2s ease-out 12.6s both; }
.leaf-18 { animation: leafGrow 2s ease-out 12.8s both; }
.leaf-19 { animation: leafGrow 2s ease-out 12.7s both; }
.leaf-20 { animation: leafGrow 2s ease-out 12.9s both; }
.leaf-45 { animation: leafGrow 2s ease-out 12.6s both; }
.leaf-46 { animation: leafGrow 2s ease-out 12.8s both; }
/* Kronen-Äste */
.leaf-21 { animation: leafGrow 2s ease-out 13.0s both; }
.leaf-22 { animation: leafGrow 2s ease-out 13.2s both; }
.leaf-23 { animation: leafGrow 2s ease-out 13.1s both; }
.leaf-29 { animation: leafGrow 2s ease-out 13.3s both; }
.leaf-47 { animation: leafGrow 2s ease-out 13.0s both; }
.leaf-48 { animation: leafGrow 2s ease-out 13.2s both; }
.leaf-24 { animation: leafGrow 2s ease-out 13.4s both; }
.leaf-25 { animation: leafGrow 2s ease-out 13.6s both; }
.leaf-26 { animation: leafGrow 2s ease-out 13.5s both; }
.leaf-30 { animation: leafGrow 2s ease-out 13.7s both; }
.leaf-49 { animation: leafGrow 2s ease-out 13.4s both; }
.leaf-50 { animation: leafGrow 2s ease-out 13.6s both; }
.leaf-55 { animation: leafGrow 2s ease-out 13.3s both; }
.leaf-56 { animation: leafGrow 2s ease-out 13.5s both; }
.leaf-57 { animation: leafGrow 2s ease-out 13.7s both; }
.leaf-58 { animation: leafGrow 2s ease-out 13.8s both; }
/* Spitze */
.leaf-27 { animation: leafGrow 2s ease-out 13.9s both; }
.leaf-28 { animation: leafGrow 2s ease-out 14.1s both; }
.leaf-31 { animation: leafGrow 2s ease-out 14.0s both; }
.leaf-32 { animation: leafGrow 2s ease-out 14.2s both; }
.leaf-33 { animation: leafGrow 2s ease-out 14.1s both; }
.leaf-34 { animation: leafGrow 2s ease-out 14.3s both; }
.leaf-51 { animation: leafGrow 2s ease-out 14.0s both; }
.leaf-52 { animation: leafGrow 2s ease-out 14.2s both; }
.leaf-53 { animation: leafGrow 2s ease-out 14.4s both; }
.leaf-54 { animation: leafGrow 2s ease-out 14.3s both; }
.leaf-59 { animation: leafGrow 2s ease-out 14.0s both; }
.leaf-60 { animation: leafGrow 2s ease-out 14.2s both; }
.leaf-61 { animation: leafGrow 2s ease-out 14.4s both; }
.leaf-62 { animation: leafGrow 2s ease-out 14.5s both; }
.leaf-63 { animation: leafGrow 2s ease-out 13.5s both; }
.leaf-64 { animation: leafGrow 2s ease-out 14.0s both; }
.leaf-65 { animation: leafGrow 2s ease-out 14.1s both; }
.leaf-66 { animation: leafGrow 2s ease-out 14.5s both; }
.leaf-67 { animation: leafGrow 2s ease-out 14.3s both; }
.leaf-68 { animation: leafGrow 2s ease-out 13.4s both; }
/* Zentrale Blätter */
.leaf-69 { animation: leafGrow 2s ease-out 12.0s both; }
.leaf-70 { animation: leafGrow 2s ease-out 12.3s both; }
.leaf-71 { animation: leafGrow 2s ease-out 12.6s both; }
.leaf-72 { animation: leafGrow 2s ease-out 12.9s both; }
.leaf-73 { animation: leafGrow 2s ease-out 13.1s both; }
.leaf-74 { animation: leafGrow 2s ease-out 13.3s both; }
.leaf-75 { animation: leafGrow 2s ease-out 13.5s both; }
.leaf-76 { animation: leafGrow 2s ease-out 13.7s both; }

@keyframes leafGrow {
  0% { opacity: 0; }
  100% { opacity: 0.92; }
}

/* === Friedenstauben (selten) === */
.dove {
  opacity: 0;
}

.dove-lr {
  animation: doveFlyLR 35s ease-in-out 24s infinite;
}

.dove-rl {
  animation: doveFlyRL 45s ease-in-out 42s infinite;
}

.dove-lr.dove-2 {
  animation: doveFlyLR 55s ease-in-out 72s infinite;
}

/* Flug dauert ~25% der Gesamtzeit, Rest ist Pause */
@keyframes doveFlyLR {
  0%   { transform: translate(-50px, 40px); opacity: 0; }
  2%   { opacity: 0.85; }
  12%  { transform: translate(110px, 15px); opacity: 0.85; }
  23%  { opacity: 0.85; }
  25%  { transform: translate(270px, 50px); opacity: 0; }
  100% { transform: translate(270px, 50px); opacity: 0; }
}

@keyframes doveFlyRL {
  0%   { transform: translate(270px, 55px); opacity: 0; }
  2%   { opacity: 0.8; }
  12%  { transform: translate(110px, 25px); opacity: 0.8; }
  23%  { opacity: 0.8; }
  25%  { transform: translate(-50px, 45px); opacity: 0; }
  100% { transform: translate(-50px, 45px); opacity: 0; }
}

/* === Kröte am Boden (selten) === */
.toad {
  opacity: 0;
}

.toad-1 {
  animation: toadHopLR 60s ease-in-out 37s infinite;
}

.toad-2 {
  animation: toadHopRL 75s ease-in-out 82s infinite;
}

/* Kröte hüpft komplett durch (~10px hoch, ~35px weit, längere Pausen) */
@keyframes toadHopLR {
  0%    { transform: translate(-40px, 328px); opacity: 0; }
  0.5%  { transform: translate(-35px, 328px); opacity: 0.9; }
  /* Sprung 1 */
  1.0%  { transform: translate(-18px, 318px); opacity: 0.9; }
  1.5%  { transform: translate(0px, 328px); opacity: 0.9; }
  /* Pause */
  3.5%  { transform: translate(0px, 328px); opacity: 0.9; }
  /* Sprung 2 */
  4.0%  { transform: translate(18px, 318px); opacity: 0.9; }
  4.5%  { transform: translate(35px, 328px); opacity: 0.9; }
  /* Pause */
  6.5%  { transform: translate(35px, 328px); opacity: 0.9; }
  /* Sprung 3 */
  7.0%  { transform: translate(53px, 318px); opacity: 0.9; }
  7.5%  { transform: translate(70px, 328px); opacity: 0.9; }
  /* Pause */
  9.5%  { transform: translate(70px, 328px); opacity: 0.9; }
  /* Sprung 4 */
  10.0% { transform: translate(88px, 318px); opacity: 0.9; }
  10.5% { transform: translate(105px, 328px); opacity: 0.9; }
  /* Pause */
  12.5% { transform: translate(105px, 328px); opacity: 0.9; }
  /* Sprung 5 */
  13.0% { transform: translate(123px, 318px); opacity: 0.9; }
  13.5% { transform: translate(140px, 328px); opacity: 0.9; }
  /* Pause */
  15.5% { transform: translate(140px, 328px); opacity: 0.9; }
  /* Sprung 6 */
  16.0% { transform: translate(158px, 318px); opacity: 0.9; }
  16.5% { transform: translate(175px, 328px); opacity: 0.9; }
  /* Pause */
  18.5% { transform: translate(175px, 328px); opacity: 0.9; }
  /* Sprung 7 */
  19.0% { transform: translate(193px, 318px); opacity: 0.9; }
  19.5% { transform: translate(210px, 328px); opacity: 0.9; }
  /* Pause */
  21.5% { transform: translate(210px, 328px); opacity: 0.9; }
  /* Sprung 8 raus */
  22.0% { transform: translate(228px, 318px); opacity: 0.9; }
  22.5% { transform: translate(245px, 328px); opacity: 0.7; }
  23.0% { transform: translate(260px, 328px); opacity: 0; }
  100%  { transform: translate(260px, 328px); opacity: 0; }
}

@keyframes toadHopRL {
  0%    { transform: translate(260px, 328px) scaleX(-1); opacity: 0; }
  0.5%  { transform: translate(255px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 1 */
  1.0%  { transform: translate(238px, 318px) scaleX(-1); opacity: 0.9; }
  1.5%  { transform: translate(220px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  3.5%  { transform: translate(220px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 2 */
  4.0%  { transform: translate(203px, 318px) scaleX(-1); opacity: 0.9; }
  4.5%  { transform: translate(185px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  6.5%  { transform: translate(185px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 3 */
  7.0%  { transform: translate(168px, 318px) scaleX(-1); opacity: 0.9; }
  7.5%  { transform: translate(150px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  9.5%  { transform: translate(150px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 4 */
  10.0% { transform: translate(133px, 318px) scaleX(-1); opacity: 0.9; }
  10.5% { transform: translate(115px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  12.5% { transform: translate(115px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 5 */
  13.0% { transform: translate(98px, 318px) scaleX(-1); opacity: 0.9; }
  13.5% { transform: translate(80px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  15.5% { transform: translate(80px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 6 */
  16.0% { transform: translate(63px, 318px) scaleX(-1); opacity: 0.9; }
  16.5% { transform: translate(45px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  18.5% { transform: translate(45px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 7 */
  19.0% { transform: translate(28px, 318px) scaleX(-1); opacity: 0.9; }
  19.5% { transform: translate(10px, 328px) scaleX(-1); opacity: 0.9; }
  /* Pause */
  21.5% { transform: translate(10px, 328px) scaleX(-1); opacity: 0.9; }
  /* Sprung 8 raus */
  22.0% { transform: translate(-8px, 318px) scaleX(-1); opacity: 0.9; }
  22.5% { transform: translate(-25px, 328px) scaleX(-1); opacity: 0.7; }
  23.0% { transform: translate(-40px, 328px) scaleX(-1); opacity: 0; }
  100%  { transform: translate(-40px, 328px) scaleX(-1); opacity: 0; }
}

/* === Fallende Blätter (selten, verschiedene Größen/Farben) === */
.falling-leaf {
  opacity: 0;
}

.falling-leaf-1 {
  animation: leafFall1 50s ease-in-out 27s infinite;
}

.falling-leaf-2 {
  animation: leafFall2 65s ease-in-out 52s infinite;
}

.falling-leaf-3 {
  animation: leafFall3 80s ease-in-out 72s infinite;
}

/* Achsrotation auf dem inneren Blatt-Pfad */
.leaf-spin {
  transform-box: fill-box;
  transform-origin: center;
}

.leaf-spin-1 {
  animation: leafSpin1 4s linear 27s infinite;
}

.leaf-spin-2 {
  animation: leafSpin2 3s linear 52s infinite;
}

.leaf-spin-3 {
  animation: leafSpin3 5s linear 72s infinite;
}

@keyframes leafSpin1 {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@keyframes leafSpin2 {
  from { transform: rotateY(0deg) rotateX(15deg); }
  to   { transform: rotateY(-360deg) rotateX(15deg); }
}

@keyframes leafSpin3 {
  from { transform: rotateY(0deg) rotateX(-10deg); }
  to   { transform: rotateY(360deg) rotateX(-10deg); }
}

/* Blatt 1: mittelgroß, hellgrün, fällt von links-oben */
@keyframes leafFall1 {
  0%    { transform: translate(40px, 80px) rotate(0deg); opacity: 0; }
  1%    { transform: translate(40px, 80px) rotate(0deg); opacity: 0.8; }
  3%    { transform: translate(55px, 130px) rotate(40deg); opacity: 0.8; }
  5%    { transform: translate(35px, 180px) rotate(-20deg); opacity: 0.8; }
  7%    { transform: translate(58px, 230px) rotate(50deg); opacity: 0.75; }
  9%    { transform: translate(38px, 280px) rotate(-10deg); opacity: 0.7; }
  11%   { transform: translate(52px, 325px) rotate(30deg); opacity: 0.5; }
  12%   { transform: translate(50px, 335px) rotate(35deg); opacity: 0; }
  100%  { transform: translate(50px, 335px) rotate(35deg); opacity: 0; }
}

/* Blatt 2: klein, dunkelgrün, fällt von rechts-mitte */
@keyframes leafFall2 {
  0%    { transform: translate(160px, 60px) rotate(0deg); opacity: 0; }
  1%    { transform: translate(160px, 60px) rotate(0deg); opacity: 0.75; }
  3%    { transform: translate(145px, 115px) rotate(-35deg); opacity: 0.75; }
  5%    { transform: translate(168px, 170px) rotate(25deg); opacity: 0.75; }
  7%    { transform: translate(142px, 225px) rotate(-40deg); opacity: 0.7; }
  9%    { transform: translate(162px, 280px) rotate(15deg); opacity: 0.65; }
  11%   { transform: translate(148px, 325px) rotate(-25deg); opacity: 0.4; }
  12%   { transform: translate(150px, 335px) rotate(-20deg); opacity: 0; }
  100%  { transform: translate(150px, 335px) rotate(-20deg); opacity: 0; }
}

/* Blatt 3: groß, gelbgrün, fällt von mitte-oben */
@keyframes leafFall3 {
  0%    { transform: translate(95px, 40px) rotate(0deg); opacity: 0; }
  1%    { transform: translate(95px, 40px) rotate(0deg); opacity: 0.7; }
  3%    { transform: translate(80px, 100px) rotate(45deg); opacity: 0.7; }
  5%    { transform: translate(105px, 160px) rotate(-30deg); opacity: 0.7; }
  7%    { transform: translate(78px, 220px) rotate(35deg); opacity: 0.65; }
  9%    { transform: translate(100px, 280px) rotate(-20deg); opacity: 0.6; }
  11%   { transform: translate(85px, 325px) rotate(40deg); opacity: 0.4; }
  12%   { transform: translate(88px, 335px) rotate(45deg); opacity: 0; }
  100%  { transform: translate(88px, 335px) rotate(45deg); opacity: 0; }
}

/* === Baumschatten am Boden === */
.tree-shadow {
  opacity: 0;
  animation: shadowGrow 3s ease-out 9s both;
}

@keyframes shadowGrow {
  from { opacity: 0; rx: 10; }
  to { opacity: 1; rx: 70; }
}

/* === Gras um den Stamm === */
.tree-grass path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: grassGrow 1.5s ease-out both;
}

.tree-grass path:nth-child(1)  { animation-delay: 9.0s; }
.tree-grass path:nth-child(2)  { animation-delay: 9.2s; }
.tree-grass path:nth-child(3)  { animation-delay: 9.4s; }
.tree-grass path:nth-child(4)  { animation-delay: 9.6s; }
.tree-grass path:nth-child(5)  { animation-delay: 9.8s; }
.tree-grass path:nth-child(6)  { animation-delay: 9.1s; }
.tree-grass path:nth-child(7)  { animation-delay: 9.3s; }
.tree-grass path:nth-child(8)  { animation-delay: 9.5s; }
.tree-grass path:nth-child(9)  { animation-delay: 9.7s; }
.tree-grass path:nth-child(10) { animation-delay: 9.9s; }
.tree-grass path:nth-child(11) { animation-delay: 9.5s; }
.tree-grass path:nth-child(12) { animation-delay: 9.6s; }

@keyframes grassGrow {
  to { stroke-dashoffset: 0; }
}

/* === Phase 5: Blüten (15s - 17s) === */
.tree-bloom {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.bloom-1  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 16.0s both; }
.bloom-2  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 16.2s both; }
.bloom-3  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 16.4s both; }
.bloom-4  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 16.6s both; }
.bloom-5  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 16.8s both; }
.bloom-6  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 17.0s both; }
.bloom-7  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 17.2s both; }
.bloom-8  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 17.4s both; }
.bloom-9  { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 17.6s both; }
.bloom-10 { animation: bloomPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 17.8s both; }

@keyframes bloomPop {
  from { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.4); }
  to { opacity: 1; transform: scale(1); }
}

/* === Phase 6: Wiegen im Wind (ab 18s) === */
.growing-tree {
  animation: treeSway 6s ease-in-out 18s infinite;
}

@keyframes treeSway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(0.6deg); }
  75% { transform: rotate(-0.6deg); }
}

/* === Winter-Modus === */
/* Klick auf den Baum -> alle Blätter fallen, Gras wird weiß (Schnee), Kröten/Tauben/Blüten verschwinden */

/* Cursor-Hinweis: Baum ist klickbar (nur wenn JS aktiv — wird per JS gesetzt) */

/* --- Blätter fallen herunter --- */
.winter-mode .tree-leaf {
  animation: winterLeafFall 2.5s ease-in forwards !important;
}

/* Versetzter Fall für natürlicheres Aussehen */
.winter-mode .leaf-1, .winter-mode .leaf-7, .winter-mode .leaf-13, .winter-mode .leaf-21, .winter-mode .leaf-27,
.winter-mode .leaf-35, .winter-mode .leaf-43, .winter-mode .leaf-51, .winter-mode .leaf-59, .winter-mode .leaf-69 {
  animation-delay: 0s !important;
}
.winter-mode .leaf-2, .winter-mode .leaf-8, .winter-mode .leaf-14, .winter-mode .leaf-22, .winter-mode .leaf-28,
.winter-mode .leaf-36, .winter-mode .leaf-44, .winter-mode .leaf-52, .winter-mode .leaf-60, .winter-mode .leaf-70 {
  animation-delay: 0.15s !important;
}
.winter-mode .leaf-3, .winter-mode .leaf-9, .winter-mode .leaf-15, .winter-mode .leaf-23, .winter-mode .leaf-29,
.winter-mode .leaf-37, .winter-mode .leaf-45, .winter-mode .leaf-53, .winter-mode .leaf-61, .winter-mode .leaf-71 {
  animation-delay: 0.3s !important;
}
.winter-mode .leaf-4, .winter-mode .leaf-10, .winter-mode .leaf-16, .winter-mode .leaf-24, .winter-mode .leaf-30,
.winter-mode .leaf-38, .winter-mode .leaf-46, .winter-mode .leaf-54, .winter-mode .leaf-62, .winter-mode .leaf-72 {
  animation-delay: 0.45s !important;
}
.winter-mode .leaf-5, .winter-mode .leaf-11, .winter-mode .leaf-17, .winter-mode .leaf-25, .winter-mode .leaf-31,
.winter-mode .leaf-39, .winter-mode .leaf-47, .winter-mode .leaf-55, .winter-mode .leaf-63, .winter-mode .leaf-73 {
  animation-delay: 0.6s !important;
}
.winter-mode .leaf-6, .winter-mode .leaf-12, .winter-mode .leaf-18, .winter-mode .leaf-26, .winter-mode .leaf-32,
.winter-mode .leaf-40, .winter-mode .leaf-48, .winter-mode .leaf-56, .winter-mode .leaf-64, .winter-mode .leaf-74 {
  animation-delay: 0.75s !important;
}
.winter-mode .leaf-19, .winter-mode .leaf-33, .winter-mode .leaf-41, .winter-mode .leaf-49, .winter-mode .leaf-57,
.winter-mode .leaf-65, .winter-mode .leaf-75 {
  animation-delay: 0.9s !important;
}
.winter-mode .leaf-20, .winter-mode .leaf-34, .winter-mode .leaf-42, .winter-mode .leaf-50, .winter-mode .leaf-58,
.winter-mode .leaf-66, .winter-mode .leaf-76 {
  animation-delay: 1.05s !important;
}
.winter-mode .leaf-67, .winter-mode .leaf-68 {
  animation-delay: 1.2s !important;
}

@keyframes winterLeafFall {
  0%   { opacity: 0.92; transform: translateY(0) rotate(0deg); }
  20%  { opacity: 0.85; transform: translateY(60px) rotate(25deg); }
  40%  { opacity: 0.7; transform: translateY(140px) rotate(-15deg); }
  60%  { opacity: 0.5; transform: translateY(220px) rotate(30deg); }
  80%  { opacity: 0.25; transform: translateY(300px) rotate(-20deg); }
  100% { opacity: 0; transform: translateY(380px) rotate(40deg); }
}

/* --- Blüten verschwinden --- */
.winter-mode .tree-bloom {
  animation: winterFadeOut 1.5s ease-out forwards !important;
}

/* --- Gras wird weiß und schrumpft (Schnee) --- */
.winter-mode .tree-grass path {
  animation: grassToSnow 2s ease-out 1s forwards !important;
}

@keyframes grassToSnow {
  to { stroke: #e0e8f0; stroke-dashoffset: 30; }
}

/* --- Kröten verschwinden --- */
.winter-mode .toad {
  animation: winterFadeOut 1s ease-out forwards !important;
}

/* --- Tauben verschwinden --- */
.winter-mode .dove {
  animation: winterFadeOut 1s ease-out forwards !important;
}

/* --- Fallende Blätter stoppen --- */
.winter-mode .falling-leaf {
  animation: winterFadeOut 0.5s ease-out forwards !important;
}
.winter-mode .leaf-spin {
  animation: none !important;
}

@keyframes winterFadeOut {
  to { opacity: 0; }
}

/* --- Baum-Sway stoppen im Winter --- */
.winter-mode.growing-tree {
  animation: none !important;
}

/* --- Schnee am Boden und auf Ästen erscheint --- */
.winter-mode .snow-ground circle,
.winter-mode .snow-ground ellipse {
  animation: snowAppear 2s ease-out 1.5s both;
}

.winter-mode .snow-branches ellipse {
  animation: snowAppear 2.5s ease-out 2s both;
}

@keyframes snowAppear {
  to { opacity: 0.9; }
}

/* --- Fallende Schneeflocken --- */
.winter-mode .sf-1  { animation: snowfall1 3.5s ease-in 0.5s both; }
.winter-mode .sf-2  { animation: snowfall2 4s ease-in 1s both; }
.winter-mode .sf-3  { animation: snowfall3 3s ease-in 0.2s both; }
.winter-mode .sf-4  { animation: snowfall4 4.5s ease-in 1.5s both; }
.winter-mode .sf-5  { animation: snowfall5 3.8s ease-in 0.8s both; }
.winter-mode .sf-6  { animation: snowfall6 4.2s ease-in 2s both; }
.winter-mode .sf-7  { animation: snowfall7 3.2s ease-in 1.2s both; }
.winter-mode .sf-8  { animation: snowfall8 3.6s ease-in 2.5s both; }
.winter-mode .sf-9  { animation: snowfall9 4s ease-in 3s both; }
.winter-mode .sf-10 { animation: snowfall10 3.4s ease-in 3.5s both; }

@keyframes snowfall1 {
  0%   { transform: translate(30px, -50px); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translate(45px, 330px); opacity: 0; }
}
@keyframes snowfall2 {
  0%   { transform: translate(80px, -40px); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translate(65px, 330px); opacity: 0; }
}
@keyframes snowfall3 {
  0%   { transform: translate(140px, -50px); opacity: 0; }
  10%  { opacity: 0.85; }
  100% { transform: translate(155px, 330px); opacity: 0; }
}
@keyframes snowfall4 {
  0%   { transform: translate(190px, -30px); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translate(175px, 330px); opacity: 0; }
}
@keyframes snowfall5 {
  0%   { transform: translate(110px, -45px); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translate(95px, 330px); opacity: 0; }
}
@keyframes snowfall6 {
  0%   { transform: translate(60px, -35px); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translate(80px, 330px); opacity: 0; }
}
@keyframes snowfall7 {
  0%   { transform: translate(160px, -50px); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translate(145px, 330px); opacity: 0; }
}
@keyframes snowfall8 {
  0%   { transform: translate(20px, -40px); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translate(10px, 330px); opacity: 0; }
}
@keyframes snowfall9 {
  0%   { transform: translate(200px, -45px); opacity: 0; }
  10%  { opacity: 0.75; }
  100% { transform: translate(210px, 330px); opacity: 0; }
}
@keyframes snowfall10 {
  0%   { transform: translate(100px, -50px); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translate(120px, 330px); opacity: 0; }
}

/* Schatten bleibt im Winter sichtbar (unter dem Schnee) */

/* === Frühling-Rückkehr === */
/* Blätter treiben wieder aus */
.spring-return .tree-leaf {
  animation: springLeafGrow 2s ease-out both !important;
}

/* Versetztes Austreiben — erst NACH dem Gras (ab 5s) */
.spring-return .leaf-1, .spring-return .leaf-7, .spring-return .leaf-13, .spring-return .leaf-21, .spring-return .leaf-27,
.spring-return .leaf-35, .spring-return .leaf-43, .spring-return .leaf-51, .spring-return .leaf-59, .spring-return .leaf-69 {
  animation-delay: 5.0s !important;
}
.spring-return .leaf-2, .spring-return .leaf-8, .spring-return .leaf-14, .spring-return .leaf-22, .spring-return .leaf-28,
.spring-return .leaf-36, .spring-return .leaf-44, .spring-return .leaf-52, .spring-return .leaf-60, .spring-return .leaf-70 {
  animation-delay: 5.2s !important;
}
.spring-return .leaf-3, .spring-return .leaf-9, .spring-return .leaf-15, .spring-return .leaf-23, .spring-return .leaf-29,
.spring-return .leaf-37, .spring-return .leaf-45, .spring-return .leaf-53, .spring-return .leaf-61, .spring-return .leaf-71 {
  animation-delay: 5.4s !important;
}
.spring-return .leaf-4, .spring-return .leaf-10, .spring-return .leaf-16, .spring-return .leaf-24, .spring-return .leaf-30,
.spring-return .leaf-38, .spring-return .leaf-46, .spring-return .leaf-54, .spring-return .leaf-62, .spring-return .leaf-72 {
  animation-delay: 5.6s !important;
}
.spring-return .leaf-5, .spring-return .leaf-11, .spring-return .leaf-17, .spring-return .leaf-25, .spring-return .leaf-31,
.spring-return .leaf-39, .spring-return .leaf-47, .spring-return .leaf-55, .spring-return .leaf-63, .spring-return .leaf-73 {
  animation-delay: 5.8s !important;
}
.spring-return .leaf-6, .spring-return .leaf-12, .spring-return .leaf-18, .spring-return .leaf-26, .spring-return .leaf-32,
.spring-return .leaf-40, .spring-return .leaf-48, .spring-return .leaf-56, .spring-return .leaf-64, .spring-return .leaf-74 {
  animation-delay: 6.0s !important;
}
.spring-return .leaf-19, .spring-return .leaf-33, .spring-return .leaf-41, .spring-return .leaf-49, .spring-return .leaf-57,
.spring-return .leaf-65, .spring-return .leaf-75 {
  animation-delay: 6.2s !important;
}
.spring-return .leaf-20, .spring-return .leaf-34, .spring-return .leaf-42, .spring-return .leaf-50, .spring-return .leaf-58,
.spring-return .leaf-66, .spring-return .leaf-76 {
  animation-delay: 6.4s !important;
}
.spring-return .leaf-67, .spring-return .leaf-68 {
  animation-delay: 6.6s !important;
}

@keyframes springLeafGrow {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 0.6; transform: scale(1.1); }
  100% { opacity: 0.92; transform: scale(1); }
}

/* Gras wächst nach Schneeschmelze (2.5s-4.5s) */
.spring-return .tree-grass path {
  animation: springGrassGrow 2s ease-out 2.5s forwards !important;
}

@keyframes springGrassGrow {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}

/* Blüten kommen zurück */
.spring-return .tree-bloom {
  animation: bloomReturn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

.spring-return .bloom-1  { animation-delay: 7.0s !important; }
.spring-return .bloom-2  { animation-delay: 7.1s !important; }
.spring-return .bloom-3  { animation-delay: 7.2s !important; }
.spring-return .bloom-4  { animation-delay: 7.3s !important; }
.spring-return .bloom-5  { animation-delay: 7.4s !important; }
.spring-return .bloom-6  { animation-delay: 7.5s !important; }
.spring-return .bloom-7  { animation-delay: 7.6s !important; }
.spring-return .bloom-8  { animation-delay: 7.7s !important; }
.spring-return .bloom-9  { animation-delay: 7.8s !important; }
.spring-return .bloom-10 { animation-delay: 7.9s !important; }

@keyframes bloomReturn {
  from { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* Schatten bleibt durchgehend sichtbar */

/* Schnee schmilzt zuerst (0s-2s) */
.spring-return .winter-snow circle,
.spring-return .winter-snow ellipse {
  animation: snowMelt 2s ease-out 0s both !important;
}
.spring-return .snowflake {
  animation: snowMelt 1s ease-out 0s both !important;
}

@keyframes snowMelt {
  from { opacity: 0.9; }
  to   { opacity: 0; }
}

/* Fallende Blätter kommen wieder (deren infinite Animations laufen nach spring-return weiter) */
/* Tauben und Kröten laufen von allein weiter, da spring-return sie nicht überschreibt */

/* Sway kommt zurück nach Frühling (nach Blüten, ab ~8.5s) */
.spring-return.growing-tree {
  animation: treeSway 6s ease-in-out 8.5s infinite !important;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-with-tree {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .hero-with-tree .hero-text h1 {
    text-align: center;
  }
  .hero-with-tree .hero-buttons {
    justify-content: center;
  }
  .growing-tree {
    width: 200px;
    height: 282px;
  }
}

@media (max-width: 480px) {
  .growing-tree {
    width: 160px;
    height: 226px;
  }
  .hero-logo-strip img {
    width: 140px;
    height: auto;
  }
}

/* ========== Footer ========== */
.footer {
  background: var(--gray-900);
  color: var(--gray-300);
  padding: 4rem 0 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--gray-700);
}

.footer h4 {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
}

.footer p {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.footer a {
  color: var(--gray-300);
  transition: var(--transition);
}

.footer a:hover {
  color: var(--accent);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a::before {
  content: '\2192';
  color: var(--accent);
  transition: var(--transition);
}

.footer-links a:hover::before {
  transform: translateX(5px);
}

.footer-bottom {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-500);
}

.footer-bottom a {
  color: var(--gray-400);
}

.footer-bottom a:hover {
  color: var(--accent);
}

/* ========== Scroll Animations ========== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Loading Spinner ========== */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

/* ========== Cards Legacy Support ========== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border-top: 4px solid var(--primary);
  position: relative;
  overflow: hidden;
}

.card:nth-child(2) {
  border-top-color: var(--accent);
}

.card:nth-child(3) {
  border-top-color: var(--teal);
}

.card:nth-child(4) {
  border-top-color: var(--gold);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.card-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}

.card:nth-child(2) .card-icon {
  background: var(--gradient-accent);
}

.card:nth-child(3) .card-icon {
  background: linear-gradient(135deg, var(--teal), #4fd1af);
}

.card h3 {
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.card p {
  color: var(--gray-600);
  margin-bottom: 0;
}

/* ========== Feature Box ========== */
.feature-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.feature-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.feature-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-accent);
}

.feature-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.feature-image:hover img {
  transform: scale(1.05);
}

.feature-content h2 {
  margin-bottom: 1.2rem;
  color: var(--primary);
}

.feature-content p {
  color: var(--gray-600);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.feature-content .btn {
  margin-top: 1.5rem;
}

/* ========== Navigation Dropdown ========== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--gray-600);
  border-radius: var(--radius);
  transition: color 0.3s ease, background 0.3s ease;
  text-decoration: none;
}

.nav-dropdown-trigger::after {
  content: '\25BE';
  font-size: 0.7em;
  opacity: 0.6;
  transition: var(--transition);
}

.nav-dropdown:hover .nav-dropdown-trigger::after {
  transform: rotate(180deg);
}

.nav-dropdown-trigger:hover {
  color: var(--primary);
  background: var(--gray-100);
}

.nav-dropdown-trigger.active {
  color: var(--white);
  background: var(--gradient-primary);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--gray-600);
  text-decoration: none;
  transition: var(--transition);
}

.nav-dropdown-menu a:hover {
  background: var(--primary-50);
  color: var(--primary);
}

.nav-dropdown-menu a::before {
  display: none;
}

/* ========== Project Carousel ========== */
.carousel {
  position: relative;
  overflow: hidden;
  padding: 2rem 0 1rem;
  perspective: 1200px;
  max-width: 100%;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: grab;
}

.carousel-track:active {
  cursor: grabbing;
}

.carousel-slide {
  flex: 0 0 auto;
  min-width: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.6s ease,
              filter 0.6s ease;
  transform-style: preserve-3d;
}

.carousel-slide.slide-active {
  transform: scale(1.05) translateZ(30px);
  opacity: 1;
  z-index: 2;
}

.carousel-slide.slide-adjacent {
  transform: scale(0.92) translateZ(-20px) rotateY(0deg);
  opacity: 0.75;
  z-index: 1;
}

.carousel-slide.slide-far {
  transform: scale(0.85) translateZ(-50px);
  opacity: 0.5;
  filter: blur(1px);
  z-index: 0;
}

.carousel-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-decoration: none;
  height: 100%;
}

.carousel-slide.slide-active .carousel-card {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(45, 106, 69, 0.15);
}

.carousel-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  color: inherit;
}

.carousel-card-image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.carousel-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.carousel-card:hover .carousel-card-image img {
  transform: scale(1.08);
}

.carousel-card-content {
  padding: 1.25rem 1.5rem 1.5rem;
}

.carousel-card-content h3 {
  color: var(--primary);
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.carousel-card-content p {
  color: var(--gray-500);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

/* === Carousel: CSS-only Fallback (ohne JS) === */
.carousel:not(.js-carousel-active) {
  overflow: visible;
}

.carousel:not(.js-carousel-active) .carousel-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 0.5rem 0 1.5rem;
  cursor: default;
}

.carousel:not(.js-carousel-active) .carousel-slide {
  scroll-snap-align: start;
  flex: 0 0 80%;
  opacity: 1;
}

.carousel:not(.js-carousel-active) .carousel-btn,
.carousel:not(.js-carousel-active) .carousel-dots {
  display: none;
}

@media (min-width: 769px) {
  .carousel:not(.js-carousel-active) .carousel-slide {
    flex: 0 0 45%;
  }
}

@media (min-width: 1025px) {
  .carousel:not(.js-carousel-active) .carousel-slide {
    flex: 0 0 31%;
  }
}

/* Carousel Arrow Buttons */
.carousel-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}

.carousel-btn:hover {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.carousel-btn-prev { left: 0.5rem; }
.carousel-btn-next { right: 0.5rem; }

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Carousel Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gray-300);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}

.carousel-dot.active {
  background: var(--primary);
  width: 28px;
  border-radius: var(--radius-full);
}

/* ========== Responsive Design ========== */
@media (max-width: 1024px) {
  :root {
    --section-padding: 4rem;
  }

  .hero {
    min-height: 80vh;
  }

  .carousel-slide {
    flex: 0 0 auto;
  }
}

/* Mittlere Breiten: Menüpunkte etwas enger, damit Logo und Menü in eine Zeile passen */
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav {
    gap: 0.25rem;
  }

  .nav a,
  .nav-dropdown-trigger {
    padding: 0.5rem 0.65rem;
  }
}

/* Ausklappbares Menü (☰) bis 1100 px – darüber passt das Menü in eine Zeile.
   Die Grenze steht auch in js/main.js (Klick auf Menüpunkte mit Pfeil). */
@media (max-width: 1100px) {
  .menu-toggle {
    display: block;
  }

  .nav {
    position: fixed;
    top: 87px; /* Höhe der Kopfzeile */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.25rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
  }

  .nav.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav a {
    padding: 0.85rem 1rem;
    text-align: center;
    border-radius: var(--radius);
  }

  /* Mobile dropdown */
  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-dropdown-trigger {
    text-align: center;
    justify-content: center;
    padding: 0.85rem 1rem;
  }

  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 0.25rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 500px;
  }

  .nav-dropdown-menu a {
    text-align: center;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 3rem;
  }

  .carousel {
    overflow: hidden;
    max-width: 100vw;
  }

  .carousel-track {
    gap: 0;
  }

  .carousel-slide {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: none;
  }

  .carousel-slide.slide-active,
  .carousel-slide.slide-adjacent,
  .carousel-slide.slide-far {
    transform: none;
    opacity: 1;
    filter: none;
  }

  .carousel-card {
    max-width: calc(100% - 2rem);
    margin: 0 auto;
  }

  .carousel-card-image img {
    max-width: 100%;
    height: auto;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .hero {
    min-height: auto;
    padding: 8rem 0 5rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .page-header {
    padding: 8rem 0 5rem;
  }

  .page-header::after {
    height: 120px;
  }

  .content-box {
    padding: 1.5rem;
  }

  .vorstand-grid,
  .projekt-grid,
  .findling-grid,
  .person-grid {
    grid-template-columns: 1fr;
  }

  .person-card {
    padding: 2rem 1.5rem 1.5rem;
  }

  .person-image {
    width: 120px;
    height: 120px;
  }

  .biography-image {
    width: 150px;
    height: 150px;
  }

  .feature-box {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .feature-image {
    order: -1;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer h4::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    align-items: center;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  .container {
    padding: 0 1rem;
  }

  .logo img {
    height: 40px;
  }

  .logo-text {
    font-size: 1rem;
  }

  .nav {
    top: 68px; /* Höhe der kleineren Kopfzeile */
  }

  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

/* ========== Print Styles ========== */
@media print {
  .header,
  .footer,
  .menu-toggle,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .page-header {
    background: none;
    color: #000;
    padding: 1rem 0;
  }

  .page-header h1,
  .page-header p {
    color: #000;
  }
}