/* ========================================================
   GlowWave Vitalmenü — Elegant Classic Theme (Flex-only)
   Author: Senior CSS Dev & UI Designer
   Notes:
   - Mobile-first, ONLY flexbox for layouts (no CSS Grid/Columns)
   - Brand colors & fonts applied with a timeless, elegant feel
   - Includes mobile menu & cookie consent styles
   ======================================================== */

/* ---------------------- CSS Reset / Normalize ---------------------- */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }
body { line-height: 1.5; }
ol, ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: 2px solid #7BC67A; outline-offset: 2px; }

/* ---------------------- Theme Variables ---------------------- */
:root {
  --color-primary: #0B3D2E;   /* deep classic green */
  --color-secondary: #7BC67A; /* fresh green */
  --color-accent: #F6FAF6;    /* light accent */
  --color-ink: #1F2A24;       /* body text */
  --color-muted: #6B6E6A;     /* muted text */
  --color-line: #E2E0DA;      /* divider */
  --color-paper: #FFFFFF;     /* base background */
  --color-parchment: #FAF9F5; /* subtle alt background */

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --shadow-s: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-m: 0 6px 18px rgba(11,61,46,0.12);
  --shadow-l: 0 16px 32px rgba(11,61,46,0.14);

  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
}

/* ---------------------- Base Typography ---------------------- */
body {
  font-family: Verdana, "Trebuchet MS", Arial, sans-serif; /* brand fonts */
  font-size: 16px;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif; /* brand display */
  color: var(--color-primary);
  letter-spacing: 0.3px;
}

h1 { font-size: 32px; line-height: 1.25; margin-bottom: var(--space-16); }
h2 { font-size: 24px; line-height: 1.3; margin-bottom: var(--space-16); }
h3 { font-size: 18px; line-height: 1.35; margin-bottom: var(--space-12); }

p { margin-bottom: var(--space-16); color: var(--color-ink); }
strong { font-weight: 700; }
.small, .microcopy, .privacy-note { font-size: 14px; color: var(--color-muted); }
.microcopy { margin-top: var(--space-8); }

ul, ol { padding-left: 0; margin-bottom: var(--space-16); display: flex; flex-direction: column; gap: 8px; }
ul li::marker, ol li::marker { color: var(--color-secondary); }

/* Anchor defaults */
a { color: var(--color-primary); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
a:hover { color: #094132; }
a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------- Layout Helpers ---------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;            /* flex-only requirement */
  flex-direction: column;   /* default column; override where needed */
}

.content-wrapper {
  display: flex;            /* flex-only requirement */
  flex-direction: column;
  gap: var(--space-16);
}

/* MANDATORY SPACING PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-m); padding: var(--space-20); box-shadow: var(--shadow-s); }
.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; border: 1px solid var(--color-line); background: var(--color-accent); border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Generic spacing for sections */
main section { padding: var(--space-40) 0; border-top: 1px solid var(--color-line); }
main section:first-of-type { border-top: none; }

/* Alternate subtle backgrounds to create classic rhythm */
main section:nth-of-type(odd) { background: var(--color-parchment); }
main section:nth-of-type(even) { background: var(--color-accent); }

/* ---------------------- Header & Navigation ---------------------- */
header { position: sticky; top: 0; z-index: 50; background: var(--color-paper); box-shadow: 0 1px 0 var(--color-line); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 12px 20px; }

.logo { display: flex; align-items: center; }
.logo img { height: 34px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--space-20); }
.main-nav a { padding: 8px 6px; color: var(--color-ink); border-radius: 6px; }
.main-nav a:hover { background: var(--color-accent); }

.header-cta { display: none; }
.header-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-s); border: 1px solid #0a3a2b; }
.header-cta a:hover { background: #0a3a2b; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-primary); box-shadow: var(--shadow-s); }
.mobile-menu-toggle:hover { background: var(--color-accent); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; background: var(--color-paper);
  display: flex; flex-direction: column; padding: 20px; gap: 16px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  z-index: 120;
}
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-accent); color: var(--color-primary); }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav a { padding: 12px 10px; border-bottom: 1px solid var(--color-line); color: var(--color-ink); }
.mobile-nav a:hover { background: var(--color-accent); }

/* Open state controlled via JS: add .menu-open to body */
body.menu-open .mobile-menu { transform: translateX(0); }
body.menu-open { overflow: hidden; }

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

/* ---------------------- Hero & CTA ---------------------- */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-8); }
.cta-group a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--color-primary); transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease; }
.cta-group a:first-child { background: var(--color-primary); color: #fff; }
.cta-group a:first-child:hover { background: #0a3a2b; transform: translateY(-1px); }
.cta-group a:last-child { background: transparent; color: var(--color-primary); }
.cta-group a:last-child:hover { background: var(--color-accent); transform: translateY(-1px); }

.trust-badges { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: var(--space-8); color: var(--color-muted); }
.trust-badges span { padding: 6px 10px; border: 1px solid var(--color-line); border-radius: 999px; background: #fff; }

/* ---------------------- Features / Grids ---------------------- */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div { flex: 1 1 260px; border: 1px solid var(--color-line); border-radius: var(--radius-m); background: #fff; padding: var(--space-20); box-shadow: var(--shadow-s); }

.icon-list, .usp-list, .teaser-list { display: flex; flex-direction: column; gap: 8px; }
.icon-list li, .usp-list li, .teaser-list li { padding-left: 0; color: var(--color-ink); }

.legend, .rating-summary { color: var(--color-muted); font-size: 14px; }

/* ---------------------- Process / Steps ---------------------- */
.process-steps { counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.process-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-left: 3px solid var(--color-secondary); background: #fff; border-radius: 8px; box-shadow: var(--shadow-s); }
.timeline { color: var(--color-muted); }

/* ---------------------- Plans / Pricing ---------------------- */
.plan-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.plan-cards > div { flex: 1 1 260px; border: 1px solid var(--color-line); border-radius: var(--radius-l); padding: var(--space-24); background: #fff; box-shadow: var(--shadow-m); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.plan-cards > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.savings { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------- Testimonials ---------------------- */
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: var(--color-muted); }

/* Ensure readability (dark text on light bg) */
.testimonial-card { color: var(--color-ink); background: #F9FBF9; border-color: #E5EEE5; }

/* ---------------------- Day list (Wochenmenüs) ---------------------- */
.day-list { display: flex; flex-direction: column; gap: var(--space-16); }
.day-list h3 { padding-top: var(--space-16); margin-top: var(--space-8); border-top: 1px solid var(--color-line); color: var(--color-primary); }
.day-list ul { gap: 6px; }

/* ---------------------- Footer ---------------------- */
footer { background: var(--color-paper); border-top: 1px solid var(--color-line); }
footer .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.footer-brand img { height: 32px; width: auto; }
.footer-nav, .legal-nav, .contact-block { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.footer-nav h3, .legal-nav h3, .contact-block h3 { font-size: 16px; margin-bottom: 6px; color: var(--color-primary); }
.footer-nav a, .legal-nav a { color: var(--color-ink); padding: 4px 0; }
.footer-nav a:hover, .legal-nav a:hover { text-decoration: underline; }
.newsletter-mini p { font-size: 14px; color: var(--color-muted); }

/* ---------------------- Buttons & Chips ---------------------- */
button, .btn { cursor: pointer; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; background: var(--color-primary); color: #fff; border: 1px solid #0a3a2b; border-radius: 999px; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: #0a3a2b; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 999px; }
.btn-outline:hover { background: var(--color-accent); }

/* ---------------------- Utilities ---------------------- */
.hr { height: 1px; background: var(--color-line); width: 100%; }
.muted { color: var(--color-muted); }
.lead { font-size: 18px; color: var(--color-ink); }
.center { text-align: center; }

/* ---------------------- Accessibility / Focus ---------------------- */
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* ---------------------- Responsive Rules ---------------------- */
/* Text-image section stacks on mobile, row on desktop */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}

@media (min-width: 992px) {
  h1 { font-size: 48px; }
}

/* ---------------------- Lists & Notes ---------------------- */
.privacy-note { border-left: 3px solid var(--color-line); padding-left: 12px; }

/* ---------------------- Page-specific minor tweaks ---------------------- */
/* Index */
[aria-labelledby="hero-title"] .container,
[aria-labelledby="pricing-hero"] .container,
[aria-labelledby="about-hero"] .container,
[aria-labelledby="contact-hero"] .container,
[aria-labelledby="wm-hero"] .container,
[aria-labelledby="nv-hero"] .container,
[aria-labelledby="sus-hero"] .container,
[aria-labelledby="cookie-title"] .container,
[aria-labelledby="terms-title"] .container,
[aria-labelledby="dp-title"] .container,
[aria-labelledby="gdpr-title"] .container,
[aria-labelledby="ty-title"] .container {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

/* Links inside paragraph should be clearly visible */
p a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
p a:hover { background: var(--color-accent); }

/* ---------------------- Cookie Consent ---------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 12px;
  background: #ffffff; border-top: 1px solid var(--color-line);
  padding: 16px 20px; box-shadow: 0 -8px 20px rgba(0,0,0,0.06);
  z-index: 140; transform: translateY(100%);
  transition: transform 0.35s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { display: flex; flex-direction: column; gap: 6px; color: var(--color-ink); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--color-primary); color: #fff; border: 1px solid #0a3a2b; border-radius: 999px; padding: 10px 16px; }
.cookie-banner .btn-accept:hover { background: #0a3a2b; }
.cookie-banner .btn-reject { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 999px; padding: 10px 16px; }
.cookie-banner .btn-reject:hover { background: var(--color-accent); }
.cookie-banner .btn-settings { background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--color-line); border-radius: 999px; padding: 10px 16px; }
.cookie-banner .btn-settings:hover { background: #ECF5EC; }

/* Cookie modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 150; }
.cookie-modal.open { display: flex; }
.cookie-modal .modal-dialog { width: 92%; max-width: 700px; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; box-shadow: var(--shadow-l); display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Simple toggle styles (checkbox + label) */
.cookie-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-accent); }
.switch { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #cfd7cf; transition: background 0.2s ease; display: inline-flex; align-items: center; padding: 2px; }
.switch::after { content: ""; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-s); transform: translateX(0); transition: transform 0.2s ease; }
input[type="checkbox"].switch-input { position: absolute; opacity: 0; pointer-events: none; }
input[type="checkbox"].switch-input:checked + .switch { background: var(--color-secondary); }
input[type="checkbox"].switch-input:checked + .switch::after { transform: translateX(20px); }

/* ---------------------- Tables (if any appear later) ---------------------- */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-line); }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--color-line); }
th { background: var(--color-accent); color: var(--color-primary); }

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

/* ---------------------- Additional Flex-only Layout Assurances ---------------------- */
/* Ensure key containers use flex (no grid/columns anywhere) */
main { display: flex; flex-direction: column; gap: var(--space-20); }
footer .content-wrapper, footer nav, header .container, .cta-group, .trust-badges, .feature-grid, .plan-cards, .process-steps, .day-list, .mobile-nav, .cookie-banner, .cookie-actions { display: flex; }

/* ---------------------- Visual Hierarchy Accents ---------------------- */
h2::after { content: ""; display: block; width: 56px; height: 2px; background: var(--color-secondary); margin-top: 8px; border-radius: 2px; }

/* ---------------------- Forms (for possible future inputs) ---------------------- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 8px; background: #fff; color: var(--color-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(123,198,122,0.25); }

/* ---------------------- Page Specific Enhancements ---------------------- */
/* About */
#mission ul, #team-kueche ul, #work-how ol { gap: 8px; }

/* Nachhaltigkeit */
#goals ul { gap: 8px; }

/* Kontakt */
[aria-labelledby="ways"] p { display: flex; align-items: center; gap: 8px; }

/* Legal pages spacing */
[aria-labelledby="terms-title"] .content-wrapper h2,
[aria-labelledby="dp-title"] .content-wrapper h2,
[aria-labelledby="gdpr-title"] .content-wrapper h2,
[aria-labelledby="cookie-title"] .content-wrapper h2 { margin-top: var(--space-16); }

/* ---------------------- Subtle Animations ---------------------- */
.fade-in { opacity: 0; transform: translateY(6px); animation: fadeUp 0.4s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---------------------- Safety spacing between elements ---------------------- */
.content-wrapper > * + * { margin-top: 0; }
main section + section { margin-top: 0; }

/* Ensure minimum spacing between cards/sections */
.card, .testimonial-card { margin-bottom: 20px; }

/* ---------------------- End of Styles ---------------------- */