/* ===============================
   SunriseGlow Trek Ernährungsreise
   style.css — Luxury Premium Theme
   Mobile-first, Flexbox-only
   =============================== */

/* ===============================
   CSS RESET & NORMALIZE
   =============================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid #C8A24A; outline-offset: 2px; }

/* ===============================
   THEME TOKENS (CSS Custom Props)
   =============================== */
:root {
  --primary: #245B43; /* deep evergreen */
  --secondary: #F39C3D; /* warm accent */
  --accent: #FAF8F3; /* ivory */
  --gold: #C8A24A; /* refined gold */
  --gold-2: #B8933F; /* darker gold */
  --bg: #0F1412; /* luxe near-black with green hue */
  --surface: #141A17; /* elevated panel */
  --muted: #96A39D; /* muted text */
  --text: #E9E6DE; /* primary text on dark */
  --black: #111; /* for light cards */
  --shadow-strong: 0 20px 40px rgba(0,0,0,0.45);
  --shadow-soft: 0 10px 24px rgba(0,0,0,0.25);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-30: 30px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-60: 60px;
  --speed-fast: 160ms; --speed-med: 240ms; --speed-slow: 360ms;
}

/* ===============================
   TYPOGRAPHY
   =============================== */
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Verdana, "Segoe UI", Tahoma, Geneva, sans-serif; /* brand body */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif; /* brand display */
  letter-spacing: 0.2px;
  color: #FFF;
}
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; margin-bottom: var(--sp-20); line-height: 1.25; }
h3 { font-size: 18px; margin-bottom: var(--sp-12); }
p { font-size: 16px; color: var(--text); }
.small, small { font-size: 14px; color: var(--muted); }
.subheadline { color: #EDEAE2; opacity: 0.95; font-size: 18px; margin-top: var(--sp-12); }
strong { color: #FFF; font-weight: 700; }

/* Premium separators for headings */
h1, h2 { position: relative; padding-top: 2px; }
h1::after, h2::after {
  content: ""; position: absolute; left: 0; bottom: -10px; height: 2px; width: 80px;
  background: var(--gold);
}

/* ===============================
   LAYOUT WRAPPERS (Flex-only)
   =============================== */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex; flex-direction: column; gap: var(--sp-24); align-items: stretch;
}
.content-wrapper {
  display: flex; flex-direction: column; gap: var(--sp-24); align-items: flex-start;
}
section { margin-bottom: var(--sp-60); padding: var(--sp-40) 0; }

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

/* Utility layout helpers */
.stack-20 { display:flex; flex-direction:column; gap:20px; }
.row { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.spacer { height: 1px; background: rgba(255,255,255,0.08); }

/* ===============================
   HEADER & NAVIGATION
   =============================== */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(15,20,18,0.7);
  border-bottom: 1px solid rgba(200,162,74,0.25);
}
header .content-wrapper {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding: 14px 20px;
}
.brand img { height: 40px; width: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2)); }

.main-nav { display: none; gap: var(--sp-16); align-items: center; }
.main-nav a {
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: #EDEAE2;
  border: 1px solid transparent;
  transition: color var(--speed-med) ease, border-color var(--speed-med) ease, background var(--speed-med) ease, transform var(--speed-fast) ease;
}
.main-nav a:hover { color: var(--gold); border-color: rgba(200,162,74,0.35); background: rgba(200,162,74,0.06); }
.main-nav a:active { transform: translateY(1px); }

.nav-cta { display: none; gap: var(--sp-12); align-items: center; }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: #FFF; font-size: 22px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(200,162,74,0.35);
  background: rgba(20,26,23,0.8);
  transition: background var(--speed-med) ease, border-color var(--speed-med) ease, transform var(--speed-fast) ease;
}
.mobile-menu-toggle:hover { background: rgba(200,162,74,0.12); border-color: var(--gold); }
.mobile-menu-toggle:active { transform: translateY(1px); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,12,11,0.65);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
  transform: translateX(100%);
  transition: transform var(--speed-slow) ease;
}
.mobile-menu.open { transform: translateX(0); }

/* Drawer */
.mobile-menu nav.mobile-nav {
  background: var(--surface);
  width: 85%; max-width: 420px; height: 100%;
   flex-direction: column; padding: var(--sp-32); gap: var(--sp-12);
  box-shadow: var(--shadow-strong);
  border-left: 1px solid rgba(200,162,74,0.25);
}
.mobile-menu-close {
  position: relative; top: 14px; right: 14px;
  align-self: flex-end; margin: var(--sp-12);
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  color: #FFF; font-size: 22px; border: 1px solid rgba(200,162,74,0.35);
}
.mobile-nav a {
  display: flex; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm);
  color: #F5F2EA; border: 1px solid transparent;
  transition: background var(--speed-med) ease, color var(--speed-med) ease;
}
.mobile-nav a:hover { background: rgba(200,162,74,0.08); color: var(--gold); }
.mobile-menu {
  display: none;
}
.mobile-menu.open.active {
  display: flex;
}
/* ===============================
   BUTTONS
   =============================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.2px; transition: all var(--speed-med) ease; border: 1px solid transparent; }
.btn.primary {
  background: var(--gold); color: #1B1D1A; border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(200,162,74,0.35);
}
.btn.primary:hover { background: var(--gold-2); border-color: var(--gold-2); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }
.btn.secondary {
  background: transparent; color: var(--gold);
  border-color: rgba(200,162,74,0.5);
}
.btn.secondary:hover { background: rgba(200,162,74,0.12); }

/* ===============================
   HERO SECTION
   =============================== */
.hero {
  background: linear-gradient(0deg, rgba(20,26,23,0.0) 0%, rgba(20,26,23,0.0) 100%), var(--bg);
  padding-top: var(--sp-48);
  position: relative;
}
.hero .container { gap: var(--sp-20); }
.hero .content-wrapper { gap: var(--sp-20); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.hero .trust-row ul { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }
.hero .trust-row li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-pill);
  background: rgba(200,162,74,0.06);
  border: 1px solid rgba(200,162,74,0.25);
  color: #EFECE4;
}
.hero .trust-row img { width: 18px; height: 18px; }
.supporting-bullets { display: flex; flex-direction: column; gap: 8px; color: #F1EEE6; opacity: 0.95; }

/* ===============================
   TEXT & CONTENT SECTIONS
   =============================== */
.text-section { display: flex; flex-direction: column; gap: 10px; }
.text-section p { color: #EDEAE2; }
.microcopy { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }

/* Numbered / steps lists */
.steps-list, .request-process-steps { counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.steps-list li, .request-process-steps li {
  display: flex; gap: 12px; align-items: flex-start; color: #F0ECE3;
}
.steps-list li::before, .request-process-steps li::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: rgba(200,162,74,0.15); color: var(--gold);
  border: 1px solid rgba(200,162,74,0.45);
  font-weight: 700; font-size: 14px;
}

/* Feature/value/badge lists */
.value-props, .nutrition-badges, .filter-chips, .category-grid, .recipe-cards-grid, .methodology-list, .top-rated-list, .principle-cards, .sources-list, .accordion-pairs, .benefits-grid, .pricing-table, .team-qualifications-list, .certifications, .memberships, .contact-options, .faq-accordion, .service-levels, .holidays-list, .data-categories-list, .security-measures-list {
  display: flex; flex-wrap: wrap; gap: var(--sp-12);
}

/* Chips */
.filter-chips li, .nutrition-badges li {
  padding: 8px 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(200,162,74,0.45);
  color: var(--gold);
  background: rgba(200,162,74,0.08);
}

/* Category & recipes as elegant cards */
.category-grid li, .recipe-cards-grid li, .principle-cards li, .benefits-grid li, .pricing-table li, .top-rated-list li {
  flex: 1 1 260px; min-width: 240px;
  background: var(--surface);
  border: 1px solid rgba(200,162,74,0.22);
  border-radius: var(--radius-md);
  padding: 16px 14px; color: #EEEBDD;
  box-shadow: var(--shadow-soft);
  transition: transform var(--speed-med) ease, box-shadow var(--speed-med) ease, border-color var(--speed-med) ease;
}
.category-grid li:hover, .recipe-cards-grid li:hover, .principle-cards li:hover, .benefits-grid li:hover, .pricing-table li:hover, .top-rated-list li:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(200,162,74,0.15);
}

/* Generic light list cards (for legal pages readability) */
.sources-list li, .methodology-list li, .accordion-pairs li, .team-qualifications-list li, .certifications li, .memberships li, .contact-options li, .faq-accordion li, .service-levels li, .holidays-list li, .data-categories-list li, .security-measures-list li {
  flex: 1 1 320px; min-width: 260px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,162,74,0.18);
  border-radius: var(--radius-md);
  padding: 14px 12px; color: #EFECE4;
}

/* Links inside text */
a { color: var(--gold); border-bottom: 1px dotted rgba(200,162,74,0.45); transition: color var(--speed-med) ease, border-color var(--speed-med) ease; }
a:hover { color: #E7C877; border-color: #E7C877; }

/* ===============================
   TESTIMONIALS (light for contrast)
   =============================== */
.testimonial-card {
  background: var(--accent); color: #1A1A1A; border-radius: var(--radius-md);
  border: 1px solid rgba(200,162,74,0.35);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.testimonial-card p { color: #1A1A1A; }
.testimonial-card strong { color: #111; }

/* ===============================
   FOOTER
   =============================== */
footer { background: #0C110F; border-top: 1px solid rgba(200,162,74,0.25); }
footer .content-wrapper { gap: var(--sp-24); padding: var(--sp-32) 0; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-20); justify-content: space-between; }
.brandmark img { height: 36px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.footer-nav a { color: #E6E2DA; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.footer-nav a:hover { color: var(--gold); border-color: rgba(200,162,74,0.35); background: rgba(200,162,74,0.06); }
.address-block p, .copy { color: #CFCAC0; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-links a { color: var(--gold); }
.copy { font-size: 14px; opacity: 0.9; }

/* ===============================
   GENERIC CARDS (optional usage)
   =============================== */
.card {
  background: var(--surface);
  border: 1px solid rgba(200,162,74,0.22);
  border-radius: var(--radius-md);
  padding: var(--sp-20);
  color: #EEEBDD;
  box-shadow: var(--shadow-soft);
}

/* ===============================
   ALIGNMENT UTILITIES FROM BRIEF
   =============================== */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-image-section { align-items: center; }
.content-grid { justify-content: space-between; }

/* ===============================
   FORMS & INPUTS (if any)
   =============================== */
input[type="text"], input[type="email"], textarea, select {
  background: #151B18; color: #F2EFE7; border: 1px solid rgba(200,162,74,0.25);
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
input::placeholder, textarea::placeholder { color: #A9B2AD; }

/* ===============================
   MOBILE NAV VISIBILITY RULES
   =============================== */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .nav-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ===============================
   RESPONSIVE TYPOGRAPHY & LAYOUT
   =============================== */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .subheadline { font-size: 20px; }
  .text-image-section { flex-direction: row; }
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}
@media (min-width: 1140px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
}

/* ===============================
   SPECIAL STYLES PER PAGE CLASSES
   =============================== */
/* Index specific supportive lists already handled by generic lists */

/* Rezepte - Explorer hints */
.recipe-cards-grid li em { color: var(--muted); font-style: normal; }

/* Menue-Abo - pricing emphasis */
.pricing-table li { position: relative; }
.pricing-table li strong { color: #FFF; }

/* Über Uns - quotes */
.founder-note { font-style: italic; color: #E7C877; border-left: 3px solid var(--gold); padding-left: 12px; }
.impact-metrics, .press-mentions { color: #EDEAE2; opacity: 0.9; }

/* Legal pages readability */
.hero + section h2::after { background: var(--gold); }

/* ===============================
   HOVER MICRO-INTERACTIONS
   =============================== */
@media (hover: hover) {
  .btn, .main-nav a, .footer-nav a, .category-grid li, .recipe-cards-grid li, .principle-cards li, .benefits-grid li, .pricing-table li, .top-rated-list li {
    will-change: transform, box-shadow;
  }
}

/* ===============================
   COOKIE CONSENT BANNER & MODAL
   =============================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; flex-direction: column; gap: 12px;
  background: #121714; color: #EFECE4;
  border-top: 1px solid rgba(200,162,74,0.35);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.35);
  padding: 16px 20px;
  transform: translateY(110%);
  transition: transform var(--speed-slow) ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-btn { padding: 10px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(200,162,74,0.45); color: var(--gold); background: rgba(200,162,74,0.08); transition: all var(--speed-med) ease; }
.cookie-btn:hover { background: rgba(200,162,74,0.16); }
.cookie-btn.accept { background: var(--gold); color: #1B1D1A; border-color: var(--gold); box-shadow: 0 6px 18px rgba(200,162,74,0.35); }
.cookie-btn.reject { background: transparent; color: #E8E5DD; border-color: rgba(200,162,74,0.45); }
.cookie-btn.settings { background: rgba(200,162,74,0.08); color: var(--gold); }

/* Cookie modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 130; display: none;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.cookie-modal.open { display: flex; }
.cookie-modal-content {
  width: 92%; max-width: 720px; background: var(--accent); color: #1A1A1A;
  border-radius: var(--radius-lg); border: 1px solid rgba(200,162,74,0.35);
  box-shadow: var(--shadow-strong);
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
}
.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; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.cookie-switch { width: 48px; height: 28px; border-radius: 28px; background: #D6D1C6; position: relative; transition: background var(--speed-med) ease; }
.cookie-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFF; transition: transform var(--speed-med) ease; }
.cookie-switch.on { background: #1F7A57; }
.cookie-switch.on::after { transform: translateX(20px); }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ===============================
   ACCESSIBILITY & MISC
   =============================== */
hr { border: none; height: 1px; background: rgba(255,255,255,0.08); margin: 20px 0; }
blockquote { border-left: 3px solid var(--gold); padding-left: 12px; color: #F3F0E8; }

/* ===============================
   DESKTOP ENHANCEMENTS
   =============================== */
@media (min-width: 1024px) {
  .container { gap: var(--sp-32); }
  header .content-wrapper { padding: 12px 20px; }
  .hero { padding-top: var(--sp-60); }
}

/* ===============================
   ENSURE NO OVERLAPS & SPACING
   =============================== */
section > .container > .content-wrapper > * + * { margin-top: 0; }
section > .container > .content-wrapper { gap: var(--sp-24); }

/* ===============================
   BRAND COLOR HIGHLIGHTS
   =============================== */
.badge, .tag { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(200,162,74,0.45); color: var(--gold); background: rgba(200,162,74,0.08); }

/* ===============================
   TABLE-LIKE LISTS (using flex only)
   =============================== */
.list-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }

/* ===============================
   HEADER BRAND & NAV SPACING ON SMALL
   =============================== */
@media (max-width: 991px) {
  header .content-wrapper { flex-wrap: wrap; }
  .brand { order: 1; }
  .mobile-menu-toggle { order: 2; }
}

/* ===============================
   CONTRAST GUARANTEE FOR TESTIMONIALS
   =============================== */
section .testimonial-card p, section .testimonial-card strong { color: #121212; }

/* ===============================
   ADDITIONAL COMPONENTS FROM MANDATE
   =============================== */
/* Content grids as flexible rows */
.content-grid > * { flex: 1 1 320px; min-width: 280px; }

/* Text-image responsive alignment (mobile column already set) */
.text-image-section > * { flex: 1 1 320px; min-width: 260px; }

/* Prevent cramped content */
.container, .content-wrapper, .card-container, .content-grid, .text-image-section, .testimonial-card { gap: 20px; }

/* ===============================
   BRAND PRIMARY EMPHASIS PANELS
   =============================== */
.panel-primary {
  display: flex; flex-direction: column; gap: 12px;
  background: #17201B; border: 1px solid rgba(200,162,74,0.25);
  border-radius: var(--radius-md); padding: 16px 14px;
}

/* ===============================
   PRINT STYLES (basic)
   =============================== */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  body { background: #FFF; color: #000; }
  a { color: #000; border: none; }
}