/* =============================
   Windsong Küchenglück – style.css
   Creative Artistic theme • Mobile-first • Flexbox-only
   ============================= */

/* ---------- CSS Reset & Base Normalize ---------- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25rem; }
:focus { outline: 2px dashed #118AB2; outline-offset: 2px; }
.visually-hidden { position: absolute !important; clip: rect(1px,1px,1px,1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; }

/* ---------- Theme Variables (with fallbacks) ---------- */
:root {
  --brand-primary: #1F3A2E;  /* deep forest green */
  --brand-secondary: #8E3B1A;/* rustic copper */
  --brand-accent: #FAF5E9;   /* warm cream */
  --ink: #1F3A2E;            /* primary text */
  --ink-soft: #2B4A3C;       /* slightly lighter for long copy */
  --paper: #FFFFFF;          /* base white */
  --paper-tint: #FBF7F0;     /* extra light tint */

  /* Vibrant Creative Accents (solid, no gradients) */
  --vibrant-1: #FF6B6B; /* coral */
  --vibrant-2: #FFD166; /* sunny mustard */
  --vibrant-3: #06D6A0; /* mint/teal */
  --vibrant-4: #118AB2; /* azure */
  --vibrant-5: #EF476F; /* raspberry */

  --shadow-1: 0 1px 2px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.06);
  --shadow-2: 0 6px 16px rgba(0,0,0,0.10), 0 12px 28px rgba(0,0,0,0.08);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

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

/* ---------- Base Typography ---------- */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* brand body */
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
  background: var(--brand-accent);
}

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; color: var(--ink); line-height: 1.25; }

h1 { font-size: 32px; letter-spacing: -0.5px; margin: 0 0 12px; }
h2 { font-size: 24px; letter-spacing: -0.3px; margin: 0 0 12px; }
h3 { font-size: 18px; margin: 0 0 10px; }

p { margin: 0 0 14px; }
small { font-size: 14px; }

.subheadline { color: var(--ink-soft); font-size: 18px; }

/* Artistic headline underline (decorative) */
h1, h2 {
  position: relative;
}
h1::after, h2::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 8px; width: 96px;
  background: var(--vibrant-2);
  border-radius: 4px;
  z-index: 0;
}

/* ---------- Links & Buttons ---------- */
a { color: var(--brand-secondary); text-decoration-thickness: 2px; }
a:hover { color: var(--vibrant-4); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary);
}
.btn.primary:hover { background: #A1451F; border-color: #A1451F; }

/* ---------- Layout: Containers (flex-only) ---------- */
.container {
  display: flex; flex-direction: column; gap: var(--space-20);
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
}
.content-wrapper {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20);
}

/* 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; }

/* ---------- Header ---------- */
header { background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,0.06); position: relative; z-index: 100; }
header .container { padding-top: 12px; padding-bottom: 12px; }
header .content-wrapper { gap: var(--space-16); }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 160px; height: auto; }
.tagline { font-size: 14px; color: var(--ink-soft); background: var(--paper-tint); padding: 6px 10px; border-radius: var(--radius-sm); }

.main-nav { display: none; flex-wrap: wrap; gap: 14px; }
.main-nav a { padding: 8px 12px; border-radius: 999px; background: var(--brand-accent); color: var(--ink); border: 1px solid #E8E0D1; }
.main-nav a:hover { background: var(--vibrant-2); }

.header-cta { display: flex; gap: 10px; }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px; background: var(--ink); color: #fff;
  box-shadow: var(--shadow-1);
}
.mobile-menu-toggle:hover { background: var(--brand-secondary); }

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed; inset: 0; background: rgba(31,58,46,0.96);
  display: flex; flex-direction: column; padding: 20px; gap: 20px;
  transform: translateX(100%); transition: transform .3s ease; z-index: 9999;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ink);
}
.mobile-nav { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav a { color: #fff; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.08); }
.mobile-nav a:hover { background: rgba(255,255,255,0.18); }

/* ---------- Hero Sections ---------- */
.hero { background: var(--paper); padding: 32px 0; position: relative; }
.hero .content-wrapper { padding: 10px 0; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Decorative creative blobs (not content) */
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; opacity: .16; z-index: 0;
}
.hero::before { width: 160px; height: 160px; background: var(--vibrant-3); border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; top: 10px; left: -40px; }
.hero::after  { width: 120px; height: 120px; background: var(--vibrant-1); border-radius: 60% 40% 50% 50% / 60% 60% 50% 40%; bottom: -20px; right: -20px; }

.hero h1, .hero .subheadline, .hero .cta-row, .hero .search, .hero .usp-list { position: relative; z-index: 1; }

/* Search */
.search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search input[type="search"] {
  width: 100%; max-width: 520px; padding: 12px 14px; border-radius: 14px;
  border: 2px solid var(--ink); background: #fff; box-shadow: var(--shadow-1);
}
.search input[type="search"]:focus { border-color: var(--vibrant-4); }

/* USP list - creative bullets */
.usp-list { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 10px 0 0; list-style: none; }
.usp-list li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: var(--brand-accent); border: 1px solid #E8E0D1; color: var(--ink);
}
.usp-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vibrant-1); display: inline-block; }

/* ---------- Feature Grid & Cards ---------- */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.feature-grid article {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 260px;
  padding: 18px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-1);
  border: 2px solid var(--vibrant-2);
}
.feature-grid article:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); transition: box-shadow .2s ease, transform .15s ease; }
.feature-grid article h3 { color: var(--ink); }
.feature-grid article a { color: var(--brand-secondary); text-decoration: underline; }

/* ---------- Controls & Utility Blocks ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.filter-controls, .sort-controls, .dietary-tags, .nutrition-toggle, .portion-adjuster, .save-favorite, .shopping-list, .meal-plan, .season-picker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--paper); border: 1px solid #E8E0D1; padding: 10px 12px; border-radius: 14px; }
.filter-controls button, .sort-controls button, .dietary-tags button, .nutrition-toggle button, .save-favorite button, .season-picker button {
  padding: 8px 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--brand-accent); color: var(--ink);
}
.filter-controls button:hover, .sort-controls button:hover, .dietary-tags button:hover, .nutrition-toggle button:hover, .save-favorite button:hover, .season-picker button:hover { background: var(--vibrant-2); }

.portion-adjuster span { display: inline-flex; min-width: 28px; justify-content: center; font-weight: bold; }
.portion-adjuster button { width: 34px; height: 34px; border-radius: 50%; background: var(--vibrant-3); color: #073B3A; border: 2px solid #073B3A; }
.portion-adjuster button:hover { background: #07C995; }

/* ---------- Text Sections ---------- */
.text-section { display: flex; flex-direction: column; gap: 10px; }
.text-image-section { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 18px; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--brand-accent); color: var(--ink); border: 2px solid #E3D8C5;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.rating-summary { font-weight: bold; color: var(--ink); background: var(--paper); padding: 10px 12px; border-radius: 10px; border: 1px solid #E8E0D1; display: inline-flex; }
.social-proof { color: var(--ink-soft); }

/* ---------- Contact & Social ---------- */
.contact-block { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-1); border: 1px solid #E8E0D1; }
.contact-block p { display: flex; align-items: center; gap: 10px; margin: 0; }
.contact-block img { width: 18px; height: 18px; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; }
.social-links a { padding: 8px 12px; border-radius: 999px; background: var(--vibrant-4); color: #fff; }
.social-links a:hover { background: #0E799B; }

.map-placeholder { display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 120px; background: var(--paper-tint); border: 1px dashed var(--ink); border-radius: var(--radius-md); }

/* ---------- Footer ---------- */
footer { background: var(--brand-primary); color: #F4F0E6; padding: 24px 0; margin-top: 40px; }
footer .content-wrapper { gap: 16px; }
.footer-brand img { width: 56px; height: auto; }
.footer-nav, .footer-nav-secondary { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-nav a, .footer-nav-secondary a { color: #F4F0E6; background: rgba(255,255,255,0.08); padding: 8px 12px; border-radius: 999px; }
.footer-nav a:hover, .footer-nav-secondary a:hover { background: rgba(255,255,255,0.18); }

/* ---------- Lists styling for readability ---------- */
ul li, ol li { margin-bottom: 8px; }
ul li::marker { color: var(--vibrant-5); }

/* ---------- Cards (generic) ---------- */
.card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 18px; border: 1px solid #E8E0D1; }

/* ---------- Accessibility & States ---------- */
:focus-visible { outline: 3px solid var(--vibrant-4); outline-offset: 2px; }

/* ---------- Cookie Consent Banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  background: #fff; color: var(--ink); border-top: 3px solid var(--brand-secondary);
  display: flex; flex-direction: column; gap: 12px; padding: 16px; box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
}
.cookie-banner .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--ink); background: var(--brand-accent); color: var(--ink); }
.cookie-btn.accept { background: var(--brand-secondary); border-color: var(--brand-secondary); color: #fff; }
.cookie-btn.reject { background: var(--vibrant-1); border-color: #C64545; color: #fff; }
.cookie-btn.settings { background: var(--vibrant-2); border-color: #C9A845; color: #3A2D08; }

/* Cookie Modal */
.cookie-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 16px;
}
.cookie-modal-overlay.open { display: flex; }
.cookie-modal {
  background: #fff; color: var(--ink); border-radius: 18px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 16px; padding: 20px; width: 100%; max-width: 720px;
}
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #E8E0D1; border-radius: 12px; }
.cookie-category .note { font-size: 14px; color: var(--ink-soft); }

/* Simple toggle style */
.toggle { position: relative; width: 54px; height: 30px; border-radius: 999px; background: #D6D6D6; border: 2px solid #AFAFAF; flex: 0 0 auto; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-1); transition: left .2s ease; }
.toggle.on { background: var(--vibrant-3); border-color: #07C995; }
.toggle.on::after { left: 26px; }

.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- Mobile-first Responsive Rules ---------- */
/* All major containers already flex; enhance at wider widths */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .content-wrapper { flex-direction: column; }
  header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
  .tagline { margin-left: auto; margin-right: 12px; }
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  .hero { padding: 48px 0; }
  .text-image-section { flex-direction: row; }
}

@media (min-width: 992px) {
  .content-wrapper { flex-direction: column; }
  .feature-grid article { flex: 1 1 calc(33% - 24px); }
}

/* Mobile alignment rule required */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* ---------- Page-specific fine-tuning ---------- */
/* Index highlights */
.trust { display: flex; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #E8E0D1; box-shadow: var(--shadow-1); }

/* Rezepte list page */
.filter-toggle { display: flex; }
.filter-toggle button { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--ink); background: var(--vibrant-2); }

/* Schnellrezepte page */
.hero .usp-list li:nth-child(2)::before { background: var(--vibrant-3); }
.hero .usp-list li:nth-child(3)::before { background: var(--vibrant-4); }

/* Über uns */
.map-placeholder p { color: var(--ink); }

/* Legal pages */
main section h2 + p { max-width: 72ch; }

/* ---------- Tables (if any) ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #E8E0D1; text-align: left; }
th { background: var(--paper-tint); }

/* ---------- Forms ---------- */
input, textarea { border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; background: #fff; }
input:focus, textarea:focus { border-color: var(--vibrant-4); }
label { font-weight: bold; }

/* ---------- Spacing helpers ---------- */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }

/* ---------- Z-index layering safety ---------- */
header { z-index: 50; }
.mobile-menu { z-index: 1000; }
.cookie-modal-overlay { z-index: 1100; }
.cookie-banner { z-index: 900; }

/* ---------- Prevent overlap & ensure gaps ---------- */
section .container .content-wrapper > * { margin-bottom: 0; }
section .container .content-wrapper { gap: 20px; }

/* ---------- Artistic details for links ---------- */
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ensure all navs use flex ---------- */
nav { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Ensure no content overlaps decorative shapes ---------- */
.hero > * { position: relative; z-index: 1; }

/* End of file */