/* =========================================================
   NährKompass – Vibrant Energetic UI
   Author: Senior CSS Developer & UI Designer
   Notes: Mobile-first, ONLY Flexbox for layouts (no CSS Grid/Columns)
   ========================================================= */

/* =========================
   0) Reset & Base Normalize
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Arial, sans-serif; color: #0D1B1E; background: #FFFFFF; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 20px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; line-height: 1.2; }
p { margin: 0 0 16px; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #00D1FF; outline-offset: 2px; }

/* =========================
   1) Theme Tokens (CSS vars with fallbacks)
   ========================= */
:root {
  --brand-primary: #125B39; /* deep green */
  --brand-secondary: #8C3A00; /* warm spice */
  --brand-accent: #F3FBF5; /* fresh light */
  --ink: #0D1B1E;
  --ink-muted: #344B57;
  --bg: #FFFFFF;
  --surface: #FCFEFD;
  --surface-2: #F7FAF8;
  --electric-1: #00D1FF; /* electric cyan */
  --electric-2: #FF5A00; /* vivid orange */
  --electric-3: #7B61FF; /* energetic purple */
  --electric-4: #00E28C; /* neon green */
  --success: #12A657;
  --warning: #FFB703;
  --danger: #E63946;
  --shadow: rgba(15, 23, 42, 0.12);
}

/* =========================
   2) Layout Primitives
   ========================= */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.content-wrapper {
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}

/* Mandatory spacing classes */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Default section rhythm for all pages */
main section { margin-bottom: 60px; }
section .container { padding-top: 20px; padding-bottom: 20px; }

/* =========================
   3) Typography Scale (mobile-first)
   ========================= */
.h1, h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.2px; }
.h2, h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.2px; }
.h3, h3 { font-size: 20px; font-weight: 700; }
.h4, h4 { font-size: 18px; font-weight: 700; }
small, .small { font-size: 14px; color: var(--ink-muted, #344B57); }

@media (min-width: 768px) {
  .h1, h1 { font-size: 44px; }
  .h2, h2 { font-size: 32px; }
  .h3, h3 { font-size: 22px; }
}
@media (min-width: 1024px) {
  .h1, h1 { font-size: 56px; }
  .h2, h2 { font-size: 36px; }
}

/* =========================
   4) Vibrant Energetic Aesthetic
   ========================= */
.accent-chip { background: var(--brand-accent, #F3FBF5); color: var(--brand-primary, #125B39); padding: 6px 10px; border-radius: 999px; font-weight: 700; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: #E6F9F1; color: var(--brand-primary, #125B39); font-weight: 700; font-size: 14px; }
.pill { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: #F0F4F8; color: var(--ink, #0D1B1E); font-weight: 700; }
.highlight { color: var(--electric-2, #FF5A00); }

/* =========================
   5) Header & Navigation
   ========================= */
header { position: sticky; top: 0; z-index: 1000; background: #FFFFFF; box-shadow: 0 4px 14px var(--shadow); }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 0; }
.main-nav a { padding: 8px 10px; border-radius: 10px; font-weight: 700; color: var(--ink, #0D1B1E); transition: color 0.2s ease, background-color 0.2s ease, transform 0.1s ease; }
.main-nav a:hover { color: var(--brand-primary, #125B39); background: var(--brand-accent, #F3FBF5); transform: translateY(-1px); }
.main-nav img { height: 36px; width: auto; margin-right: 8px; }

/* Primary & Secondary CTAs */
.cta-primary, .cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 14px; font-weight: 800; text-transform: none; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.cta-primary { background: var(--electric-4, #00E28C); color: #083A2B; box-shadow: 0 8px 18px rgba(0, 226, 140, 0.35); border: 2px solid #0BD996; }
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 226, 140, 0.45); }
.cta-primary:active { transform: translateY(0); }
.cta-secondary { background: var(--electric-1, #00D1FF); color: #072C37; border: 2px solid #0BC8FF; box-shadow: 0 8px 18px rgba(0, 209, 255, 0.3); }
.cta-secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 209, 255, 0.45); }

/* Mobile Navigation */
.mobile-menu-toggle { position: fixed; right: 16px; top: 12px; z-index: 1100; height: 44px; width: 44px; border-radius: 10px; background: var(--electric-3, #7B61FF); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(123, 97, 255, 0.35); }
.mobile-menu-toggle:hover { background: #6A4DFF; }

.mobile-menu { position: fixed; inset: 0; background: #0C1220; color: #FFFFFF; transform: translateX(100%); transition: transform 0.35s ease; z-index: 1200; display: flex; flex-direction: column; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { position: relative; align-self: flex-end; margin: 16px; height: 44px; width: 44px; border-radius: 10px; background: #1A2240; color: #FFFFFF; }
.mobile-nav { display: flex; flex-direction: column; gap: 14px; padding: 10px 24px 40px; }
.mobile-nav a { padding: 14px 12px; border-radius: 12px; background: #121A33; color: #FFFFFF; font-weight: 800; }
.mobile-nav a:hover { background: #182349; color: #FFFFFF; }

/* Desktop nav visibility */
@media (max-width: 991px) {
  .main-nav { display: none; }
}
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
}

/* =========================
   6) Hero Sections
   ========================= */
.hero { background: var(--brand-accent, #F3FBF5); border-bottom: 4px solid var(--electric-4, #00E28C); }
.hero .content-wrapper { padding: 24px 0 8px; }
.hero p { font-size: 16px; color: var(--ink-muted, #344B57); }
.hero .cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.benefit-bullets { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-left: 18px; margin: 8px 0 0; }
.benefit-bullets li { position: relative; font-weight: 700; color: var(--ink, #0D1B1E); }
.trust-badges { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.trust-badges img { height: 28px; width: 28px; }

/* =========================
   7) Features & Services Sections
   ========================= */
.features .content-wrapper, .services .content-wrapper, .about .content-wrapper, .contact .content-wrapper { gap: 16px; }

/* Generic cards/panels */
.panel { background: var(--surface-2, #F7FAF8); border: 1px solid #E1EFE8; border-radius: 16px; padding: 18px; box-shadow: 0 10px 22px var(--shadow); }

/* Feature grid (flex only) */
.feature-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.feature-grid > div { flex: 1 1 260px; background: var(--surface, #FCFEFD); border: 1px solid #E9F3EE; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 20px var(--shadow); }
.feature-grid img { height: 36px; width: 36px; }
.supporting-stat { display: inline-flex; padding: 8px 12px; border-radius: 10px; background: #E6F9F1; color: var(--brand-primary, #125B39); font-weight: 800; }

/* Steps list */
.steps-list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; }
.steps-list li { display: flex; align-items: center; gap: 10px; background: var(--surface, #FCFEFD); border: 1px solid #E9F3EE; border-radius: 12px; padding: 10px 12px; font-weight: 700; box-shadow: 0 6px 14px var(--shadow); }
.steps-list img { height: 24px; width: 24px; }

/* Filter controls, tags, badges */
.filter-controls, .filter-tags, .nutrition-badges, .difficulty-levels, .prep-time-filter, .results-count, .sort-controls, .pagination, .benefit-icons, .case-snippets, .policy-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-controls button, .prep-time-filter button, .sort-controls button, .pagination button, .category-list li, .consent-controls button { padding: 8px 12px; border-radius: 999px; border: 2px solid #DDE7F0; background: #FFFFFF; font-weight: 800; color: #1E293B; transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease; }
.filter-controls button:hover, .prep-time-filter button:hover, .sort-controls button:hover, .pagination button:hover { background: var(--electric-1, #00D1FF); color: #072C37; border-color: #0BC8FF; transform: translateY(-1px); }
.filter-tags span, .nutrition-badges span { background: #EEF8FF; color: #0B3860; border: 1px solid #D7ECFF; border-radius: 999px; padding: 6px 10px; font-weight: 700; }

/* Search bar (Rezepte) */
.search-bar { display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 2px solid #DBE7DF; border-radius: 14px; padding: 8px; box-shadow: 0 8px 18px var(--shadow); }
.search-bar input { flex: 1 1 auto; border: none; padding: 10px 12px; border-radius: 8px; background: transparent; }
.search-bar button { height: 40px; width: 44px; border-radius: 10px; background: var(--brand-primary, #125B39); display: inline-flex; align-items: center; justify-content: center; }
.search-bar button img { filter: invert(1); width: 20px; height: 20px; }

/* Category list & recipe preview */
.category-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.recipe-list-preview { display: flex; flex-wrap: wrap; gap: 14px; }
.recipe-list-preview > div { flex: 1 1 260px; background: #FFFFFF; border: 1px solid #E9F3EE; border-radius: 14px; padding: 12px; box-shadow: 0 8px 18px var(--shadow); }
.recipe-list-preview h3 { margin-bottom: 6px; }

/* CTA banner */
.cta-banner { display: flex; justify-content: center; align-items: center; padding: 16px; background: #FFF8F2; border: 2px dashed var(--electric-2, #FF5A00); border-radius: 14px; }

/* Plan cards (Menü-Abo) */
.plan-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.plan-cards > div { flex: 1 1 260px; background: var(--surface, #FCFEFD); border: 2px solid #E8F2EC; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 22px var(--shadow); }
.plan-cards h3 { color: var(--brand-primary, #125B39); }
.plan-cards ul { padding-left: 18px; margin: 0; }
.plan-cards button { align-self: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--electric-2, #FF5A00); color: #FFFFFF; font-weight: 800; box-shadow: 0 8px 18px rgba(255, 90, 0, 0.35); }
.plan-cards button:hover { background: #FF6F21; transform: translateY(-1px); }

/* Feature comparison table */
.feature-comparison { background: #FFFFFF; border: 1px solid #E8F2EC; border-radius: 14px; padding: 12px; box-shadow: 0 8px 18px var(--shadow); }
.feature-comparison h4 { margin-bottom: 8px; }
.feature-comparison table { width: 100%; border-collapse: collapse; }
.feature-comparison th, .feature-comparison td { border: 1px solid #E5EEF0; padding: 10px; text-align: left; }
.feature-comparison th { background: #F0FBF5; color: #0F3E2A; }

/* Value and benefit lists */
.value-list, .benefit-list, .tools-list, .guidelines-list, .faq-list, .policy-list, .contact-options, .contact-details { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.value-list li, .benefit-list li, .tools-list li, .guidelines-list li, .faq-list li, .policy-list li { background: #FFFFFF; border: 1px solid #E9F3EE; border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.contact-options li, .contact-details li { display: flex; align-items: center; gap: 10px; background: var(--surface, #FCFEFD); border: 1px solid #E9F3EE; border-radius: 12px; padding: 10px 12px; }
.contact-options img, .contact-details img { height: 18px; width: 18px; }

/* Misc panels */
.quiz-teaser, .plan-preview, .mission_statement, .brand-story, .timeline-milestones, .response-times, .alternative-channels, .research-refs, .method-note, .press-mentions-text, .impact-numbers, .rating-summary, .guarantee-badge, .consent-log-info, .withdraw-instructions, .storage-duration-info, .results-count, .case-snippets, .icon-list { background: var(--surface-2, #F7FAF8); border: 1px solid #E5EEE8; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 18px var(--shadow); }
.guarantee-badge { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.guarantee-badge img { height: 20px; width: 20px; }
.icon-list { display: flex; align-items: center; gap: 14px; }
.icon-list img { height: 28px; width: 28px; }

/* =========================
   8) Testimonials – high contrast (dark text on light bg)
   ========================= */
.testimonials { background: #FFFFFF; }
.testimonials .content-wrapper { gap: 16px; }
.testimonial-card { background: #FFFFFF; border: 2px solid #E7EFF2; border-radius: 16px; box-shadow: 0 10px 22px var(--shadow); }
.testimonial-card p { color: var(--ink, #0D1B1E); font-weight: 700; }
.testimonial-card span { color: var(--ink-muted, #344B57); font-weight: 700; }
.rating-summary { color: #0F3E2A; font-weight: 800; border-left: 4px solid var(--electric-4, #00E28C); }
.social-proof { display: flex; align-items: center; gap: 10px; }
.social-proof img { height: 22px; width: 22px; }

/* =========================
   9) About / Data Sections
   ========================= */
.about section { display: flex; flex-direction: column; gap: 6px; }
.disclaimer { color: #5B6B74; font-size: 14px; }
.method-note { color: #0F3E2A; font-weight: 700; }

/* =========================
   10) Contact Sections
   ========================= */
.contact a { color: var(--brand-secondary, #8C3A00); font-weight: 800; }
.contact a:hover { color: #B04A00; }

/* =========================
   11) Footer
   ========================= */
.footer { background: #0E1E1A; color: #E8FFF3; padding: 30px 0; }
.footer .content-wrapper { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer a { color: #E8FFF3; opacity: 0.95; }
.footer a:hover { color: #FFFFFF; opacity: 1; }
.footer-brand img { height: 42px; width: auto; }
.footer-nav-main, .footer-nav-links, .legal-links { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact img { height: 16px; width: 16px; margin-right: 6px; display: inline-block; vertical-align: middle; }
.newsletter-signup form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #102B24; border: 1px solid #1A3B31; border-radius: 14px; padding: 12px; }
.newsletter-signup input[type="email"] { flex: 1 1 220px; min-width: 200px; padding: 10px 12px; border-radius: 10px; border: 1px solid #2D4A3E; background: #0F2620; color: #E8FFF3; }
.newsletter-signup button { padding: 10px 14px; border-radius: 10px; background: var(--electric-4, #00E28C); color: #083A2B; font-weight: 800; }

@media (min-width: 992px) {
  .footer .content-wrapper { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .footer-brand, .footer-nav-main, .footer-nav-links, .footer-contact, .newsletter-signup, .legal-links { flex: 1 1 280px; }
}

/* =========================
   12) Forms & Inputs
   ========================= */
label { font-weight: 800; }
input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #DFE9E4; background: #FFFFFF; }

/* =========================
   13) Utilities
   ========================= */
.hidden { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }
.space-between { display: flex; justify-content: space-between; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: center; }

/* =========================
   14) Page-specific refinements
   ========================= */
/* Index */
.index .hero, body.index .hero { background: var(--brand-accent, #F3FBF5); }

/* Rezepte */
.difficulty-levels span { color: #0B3860; }
.pagination span { padding: 6px 10px; color: #64748B; }

/* Ernährungsprinzipien */
.principle-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.principle-cards > div { flex: 1 1 260px; background: #FFFFFF; border: 1px solid #E9F3EE; border-radius: 16px; padding: 16px; box-shadow: 0 10px 22px var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.principle-cards img { height: 36px; width: 36px; }
.plan-preview ul { padding-left: 18px; margin: 0; }

/* Menü-Abo */
.benefit-icons img { height: 28px; width: 28px; }
.case-snippets span { font-weight: 800; color: var(--brand-primary, #125B39); }
.policy-list li { background: #F0FBF5; border-color: #D7F3E4; }

/* Über Uns */
.brand-story, .mission_statement { border-left: 4px solid var(--electric-1, #00D1FF); }
.impact-numbers { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 800; }

/* Kontakt */
.alternative-channels { border-left: 4px solid var(--electric-2, #FF5A00); }

/* Legal pages */
.about h3 { color: var(--brand-primary, #125B39); }

/* Thank you */
.return .content-wrapper a { font-weight: 800; color: var(--electric-2, #FF5A00); }
.return .content-wrapper a:hover { color: #FF6F21; }

/* =========================
   15) Animations & Micro-interactions
   ========================= */
@media (prefers-reduced-motion: no-preference) {
  .cta-primary, .cta-secondary, .plan-cards > div, .feature-grid > div, .recipe-list-preview > div, .testimonial-card { transition: transform 0.2s ease, box-shadow 0.25s ease; }
  .plan-cards > div:hover, .feature-grid > div:hover, .recipe-list-preview > div:hover, .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px var(--shadow); }
}

/* =========================
   16) Text-Image section alignment (if used)
   ========================= */
.text-image-section { align-items: center; }
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* =========================
   17) Header spacing for content
   ========================= */
main { display: flex; flex-direction: column; gap: 40px; }

/* =========================
   18) Cookie Consent Banner & Modal
   ========================= */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; background: #0E1116; color: #FFFFFF; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; box-shadow: 0 -8px 22px rgba(0,0,0,0.35); transform: translateY(110%); transition: transform 0.35s ease; }
.cookie-banner.show { transform: translateY(0%); }
.cookie-banner .cookie-text { font-size: 14px; opacity: 0.95; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn-accept { background: var(--electric-4, #00E28C); color: #083A2B; border-radius: 12px; padding: 10px 14px; font-weight: 800; }
.cookie-actions .btn-reject { background: #1C2333; color: #FFFFFF; border: 2px solid #2E3B55; border-radius: 12px; padding: 10px 14px; font-weight: 800; }
.cookie-actions .btn-settings { background: var(--electric-1, #00D1FF); color: #072C37; border-radius: 12px; padding: 10px 14px; font-weight: 800; }

/* Cookie Modal */
.cookie-modal { position: fixed; inset: 0; z-index: 1400; background: rgba(7,12,20,0.65); display: flex; align-items: center; justify-content: center; transform: translateY(10%); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.cookie-modal.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-modal-content { background: #FFFFFF; color: #0D1B1E; width: 92%; max-width: 560px; border-radius: 16px; box-shadow: 0 18px 40px var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #E8EFF2; border-radius: 10px; }
.cookie-switch { display: inline-flex; align-items: center; background: #EAF1F5; border-radius: 999px; padding: 4px; }
.cookie-switch button { padding: 6px 10px; border-radius: 999px; background: transparent; font-weight: 800; color: #344B57; }
.cookie-switch button.active { background: var(--electric-1, #00D1FF); color: #072C37; }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* =========================
   19) Responsive rules
   ========================= */
@media (min-width: 768px) {
  .hero .content-wrapper { flex-direction: column; gap: 16px; }
  .features .content-wrapper, .services .content-wrapper, .about .content-wrapper, .contact .content-wrapper { gap: 18px; }
}
@media (min-width: 1024px) {
  .hero .content-wrapper { flex-direction: column; gap: 18px; }
}

/* =========================
   20) Ensure adequate spacing & non-overlap
   ========================= */
section + section { margin-top: 0; }
.feature-grid > div, .principle-cards > div, .plan-cards > div, .recipe-list-preview > div, .testimonial-card { margin-bottom: 20px; }

/* =========================
   21) Link and interactive states
   ========================= */
a:hover { text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { box-shadow: 0 0 0 3px rgba(0,209,255,0.4); border-radius: 8px; }

/* =========================
   22) Tables general styling (legal pages)
   ========================= */
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #E6EEF2; padding: 10px; }
th { background: #F6FBFF; text-align: left; }

/* =========================
   23) Social proof & ratings
   ========================= */
.rating-summary strong { color: var(--brand-primary, #125B39); }

/* =========================
   24) Print basics
   ========================= */
@media print {
  header, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}