/* ═══════════════════════════════════════════════════════════════════════════
   Obststadt Wiener Neustadt — theme.css
   Custom Properties: Farben, Fonts, Overrides
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --primary:         #5a9e1e;
  --primary-dark:    #2d5016;
  --primary-light:   #7bc043;
  --primary-rgb:     90, 158, 30;
  --secondary:       #FF9800;
  --bg:              #ffffff;
  --bg-alt:          #f8fdf5;
  --bg-dark:         #2d5016;
  --text:            #333333;
  --text-muted:      #555555;
  --text-light:      #666666;
  --text-on-primary: #ffffff;
  --heading:         #2d5016;
  --border:          #d4e8c2;
  --card-bg:         #ffffff;
  --shadow:          rgba(45, 80, 22, 0.08);
  --focus:           #5a9e1e;
  --success:         #5a9e1e;
  --font-heading:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-body:       'Open Sans', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --bg:           #0f1a0a;
  --bg-alt:       #1a2e14;
  --bg-dark:      #0a1405;
  --text:         #e0e8d8;
  --text-muted:   #a0b090;
  --text-light:   #b0c0a0;
  --heading:      #f0f5ec;
  --border:       #2a3e1e;
  --card-bg:      #1a2e14;
  --shadow:       rgba(0, 0, 0, 0.3);
}

.hero--fullscreen { min-height: 65vh; max-height: 75vh; }
@media (max-width: 48rem) { .hero--fullscreen { min-height: 60vh; max-height: 75vh; } }
.banner-strip { --banner-val-color: #ffffff; --banner-label-color: rgba(255,255,255,0.85); }
.banner-strip .banner-val { color: var(--banner-val-color); }
.banner-strip .banner-label { color: var(--banner-label-color); }
.section-dark { background: linear-gradient(135deg, var(--bg-dark) 0%, #1a3a0a 100%); }

/* ─── Hero Overlay: stärkerer Kontrast für Lesbarkeit (WCAG ≥4.5:1) ───── */
.hero--fullscreen .hero-bg::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

/* Hero CTA-Buttons besser sichtbar auf dunklem Hintergrund */
.hero--fullscreen .btn-primary {
  padding: 0.875rem 2rem;
  font-size: var(--fs-md);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: #c8610a;
  color: #fff;
}
.hero--fullscreen .btn-primary:hover {
  background: #a85009;
}
.hero--fullscreen .btn-ghost {
  padding: 1.1rem 3rem;
  font-size: var(--fs-md);
  border-color: rgba(255, 255, 255, 0.75);
}

/* ─── Sektions-Abstände vereinheitlichen ──────────────────────────────── */
.layout-modern section {
  min-height: auto;
  padding: var(--space-3xl) 0;
}
.layout-modern section.hero--fullscreen {
  min-height: 65vh;
  padding: var(--space-section) 0;
}
.layout-modern section.section-dark {
  min-height: auto;
}

/* ─── Bilder in grid-2: Mindesthöhe + object-fit ─────────────────────── */
.grid-2 .rounded img {
  width: 100%;
  min-height: 18rem;
  object-fit: cover;
}

/* ─── Formular: Labels + konsistente Abstände ────────────────────────── */
.form-group {
  margin-bottom: var(--space-xl);
}
.form-group label {
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: var(--space-sm);
}

/* ─── Fließtext: Lesbarkeit verbessern ────────────────────────────────── */
.section-lead {
  font-size: var(--fs-lg);
  color: #444;
}
[data-theme="dark"] .section-lead {
  color: var(--text-muted);
}

/* ─── Footer-Links: größer und besser lesbar ──────────────────────────── */
.footer-col a,
.footer-col p {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

/* ─── CTA-Buttons: konsistente Outline-Variante ──────────────────────── */
.btn-outline {
  padding: 0.85rem 2rem;
  font-size: var(--fs-base);
  font-weight: 600;
}

/* ─── Download-Karten: Thumbnails größer ──────────────────────────────── */
.card img[loading="lazy"] {
  min-height: 14rem;
}

/* ─── Flyer-Vorschaubild größer ───────────────────────────────────────── */
#downloads .grid-2 .rounded img {
  min-height: 22rem;
}

/* ─── Formular-Felder: deutlichere Borders ───────────────────────────── */
.form-group input,
.form-group textarea,
.form-group select {
  border: 2px solid #999;
  background: #f9f9f9;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--primary);
  background: #fff;
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
  background: var(--bg-alt);
  border-color: #555;
}

/* ─── Hero-Subtitle: extra Text-Shadow für Lesbarkeit ────────────────── */
.hero-subtitle {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.5);
  font-size: var(--fs-lg);
}
.hero-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.5);
}

/* ─── Hinweis-Box: Warnungs-Stil ─────────────────────────────────────── */
.notice-box {
  background: #f9f9e8;
  border-left: 4px solid var(--secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
}
.notice-box p {
  font-size: max(var(--fs-base), 0.875rem);
  line-height: 1.75;
  color: #333;
  margin-bottom: 0;
}
.notice-box cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--secondary);
}
[data-theme="dark"] .notice-box {
  background: rgba(255, 152, 0, 0.08);
}

/* ─── Cookie-Banner: klar vom Inhalt getrennt ────────────────────────── */
#cookie-banner {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] #cookie-banner {
  background: rgba(15, 15, 26, 0.97);
}

/* ─── Karten: gleiche Höhe + Buttons unten (Dein-Beitrag) ───────────── */
.grid-3 .card {
  height: 100%;
}
.grid-3 .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.grid-3 .card .card-body p {
  flex: 1;
  font-size: var(--fs-base);
  color: #555;
}

/* ─── Spenden-Sektion: ausgewogener 50/50 Split ──────────────────────── */
.grid-2.align-center {
  grid-template-columns: 1fr 1fr;
}
.grid-2.align-center > .rounded img {
  width: 100%;
  height: 22rem;
  object-fit: cover;
}
@media (max-width: 48rem) {
  .grid-2.align-center {
    grid-template-columns: 1fr;
  }
}

/* ─── Nav: aktiver Zustand für Parent bei aktivem Child ──────────────── */
.nav-links .nav-dropdown > a.active-parent {
  color: var(--primary);
  border-bottom: 0.125rem solid var(--primary);
  padding-bottom: 0.125rem;
}

/* ─── Download: einheitliche Bildfarben (kein S/W) ───────────────────── */
/* Leichte Warm-Tönung für konsistentes Erscheinungsbild aller Bilder */
.grid-3 .card img[loading="lazy"] {
  filter: saturate(1.15) sepia(0.05);
}

/* ─── Download: Flyer-Thumbnails einheitlich ─────────────────────────── */
#downloads .grid-2 .rounded {
  max-height: 24rem;
  overflow: hidden;
}
#downloads .grid-2 .rounded img {
  width: 100%;
  height: 24rem;
  object-fit: contain;
  background: var(--bg-alt);
}

/* ─── Fruitmap: Platzhalter-Bereich aufwerten ────────────────────────── */
.map-placeholder {
  background: #f0f4ed;
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  border: 2px dashed var(--border);
}
.map-placeholder p {
  color: var(--text);
  font-size: var(--fs-lg);
}
.map-placeholder p:last-child {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-top: var(--space-sm);
}
[data-theme="dark"] .map-placeholder {
  background: var(--bg-alt);
}

/* ─── Section-dark CTA: prominenterer Button ────────────────────────── */
.section-dark .hero-ctas .btn-primary {
  background: var(--secondary);
  color: #fff;
  padding: 0.875rem 2rem;
  font-size: var(--fs-md);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}
.section-dark .hero-ctas .btn-primary:hover {
  background: #e68a00;
}

/* ─── Download: Outline-Buttons sichtbarer ──────────────────────────── */
.card .card-body .btn-outline {
  border-color: #666;
  color: #555;
  font-weight: 600;
}
.card .card-body .btn-outline:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* ─── Hero CTA: mehr vertikaler Abstand ─────────────────────────────── */
.hero--fullscreen .hero-ctas {
  margin-top: var(--space-xl);
}