/* =====================================================
   Herdstern style.css — Playful Dynamic, Flexbox-Only
   ===================================================== */
/* RESET & NORMALIZE */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding-left: 1.2rem; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #00B5E2; outline-offset: 2px; }

/* THEME TOKENS */
:root {
  /* Brand core */
  --color-primary: #1F2A2E; /* deep slate */
  --color-secondary: #2E5E4E; /* forest green */
  --color-accent: #F6F2E8; /* warm cream */
  --color-base: #FFFFFF;
  --color-muted: #6A7A80;
  --color-border: #E5E2DA;

  /* Playful dynamic support (bright, energetic) */
  --color-sun: #FFD166; /* sunny yellow */
  --color-coral: #FF6B6B; /* coral red */
  --color-aqua: #00B5E2; /* bright aqua */
  --color-violet: #7C5CFF; /* playful violet */
  --color-lime: #52D681; /* lime green */

  /* Elevation & radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(31,42,46,0.08);
  --shadow-md: 0 8px 24px rgba(31,42,46,0.12);
  --shadow-lg: 0 16px 40px rgba(31,42,46,0.16);

  /* Spacing scale */
  --space-4: 4px;
  --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-48: 48px;
  --space-60: 60px;

  /* Typography scale */
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
}

/* BASE TYPOGRAPHY */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* brand body */
  color: var(--color-primary);
  background: var(--color-accent);
  line-height: 1.6;
  font-size: var(--fs-16);
}

h1, h2, h3, h4 {
  font-family: Georgia, Cambria, "Times New Roman", serif; /* brand display */
  line-height: 1.2;
  letter-spacing: 0.2px;
}

h1 { font-size: var(--fs-32); margin-bottom: var(--space-16); }
h2 { font-size: var(--fs-24); margin-bottom: var(--space-16); }
h3 { font-size: var(--fs-18); margin-bottom: var(--space-12); }

p { margin-bottom: var(--space-16); color: var(--color-primary); }
strong { font-weight: 700; }

/* LINKS */
a { color: var(--color-secondary); transition: color .2s ease, transform .2s ease; }
a:hover { color: var(--color-aqua); }
a[aria-current="page"] { color: var(--color-aqua); font-weight: 700; }

/* LAYOUT WRAPPERS (Flexbox only) */
.container {
  display: flex; /* flex container */
  flex-direction: column; /* mobile-first */
  align-items: center;
  width: 100%;
  padding: 0 var(--space-20);
}
.content-wrapper {
  display: flex; /* flex container */
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: 1100px;
  padding: var(--space-32) 0;
}

main section { background: var(--color-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* MANDATORY SPACING & ALIGNMENT 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(--color-base); box-shadow: 0 2px 0 rgba(31,42,46,0.06); position: relative; z-index: 20; }
header .content-wrapper { padding: var(--space-16) 0; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
.logo img { height: 40px; width: auto; }

/* MAIN NAV (desktop) */
.main-nav { display: none; gap: var(--space-16); align-items: center; }
.main-nav a { padding: 10px 12px; border-radius: 999px; background: transparent; transition: background .2s ease, transform .2s ease; }
.main-nav a:hover { background: var(--color-accent); transform: translateY(-1px); }

/* MOBILE MENU TOGGLE */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--color-primary); color: #fff; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s ease, background .2s ease; }
.mobile-menu-toggle:hover { transform: scale(1.05); background: var(--color-secondary); }

/* MOBILE MENU OVERLAY */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 92%; background: var(--color-base); transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; padding: var(--space-24); gap: var(--space-20); box-shadow: -8px 0 24px rgba(0,0,0,0.12); z-index: 999; }
/* Support both .open and aria-hidden toggling */
.mobile-menu.open, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }

.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--color-coral); color: #fff; cursor: pointer; box-shadow: var(--shadow-sm); }
.mobile-nav { display: flex; flex-direction: column; gap: var(--space-12); }
.mobile-nav a { padding: 14px 16px; border-radius: 14px; background: var(--color-accent); color: var(--color-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.mobile-nav a:hover { background: var(--color-sun); }

/* BREADCRUMBS */
[aria-label="Brotkrumen"] { display: flex; flex-wrap: wrap; gap: var(--space-8); color: var(--color-muted); font-size: var(--fs-14); }
[aria-label="Brotkrumen"] a { color: var(--color-secondary); }

/* HERO & TAGLINE */
.tagline { font-size: var(--fs-14); font-weight: 700; color: var(--color-secondary); background: var(--color-sun); padding: 8px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); }

/* CTA GROUP */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

/* BUTTONS */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 14px; border: 2px solid transparent; font-weight: 700; text-align: center; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; box-shadow: var(--shadow-sm); }
.button.primary { background: var(--color-secondary); color: #fff; }
.button.primary:hover { transform: translateY(-1px); background: var(--color-aqua); }
.button.secondary { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-secondary); }
.button.secondary:hover { transform: translateY(-1px); background: var(--color-sun); border-color: var(--color-aqua); }
.button:active { transform: translateY(0); }

/* FILTER BAR & CHIPS */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; padding: var(--space-12) 0; }
.filter-bar > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.chip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: var(--fs-14); background: var(--color-accent); color: var(--color-primary); border: 2px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.chip:hover { transform: translateY(-1px); border-color: var(--color-aqua); background: #fff; }
/* playful color rotation for chips */
.filter-bar .chip:nth-child(4n+1) { background: rgba(255, 209, 102, 0.5); }
.filter-bar .chip:nth-child(4n+2) { background: rgba(255, 107, 107, 0.18); }
.filter-bar .chip:nth-child(4n+3) { background: rgba(0, 181, 226, 0.18); }
.filter-bar .chip:nth-child(4n+4) { background: rgba(124, 92, 255, 0.18); }

.assistive { font-size: var(--fs-14); color: var(--color-muted); }

/* LISTS INSIDE SECTIONS */
section ul { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding-left: 1.1rem; }
section li { margin-left: 0; }

/* ARTICLE CARDS (for text-image-section articles) */
.text-image-section article {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  box-shadow: var(--shadow-sm);
  min-width: 240px;
  flex: 1 1 260px;
}
.text-image-section article:hover { box-shadow: var(--shadow-md); }

/* TESTIMONIALS: ensure high contrast (dark text on light bg) */
.testimonial-card {
  background: #FFFDF7;
  border: 2px solid var(--color-border);
  border-left: 8px solid var(--color-sun);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: var(--color-muted); }

/* FOOTER */
footer { background: var(--color-base); border-top: 4px solid var(--color-secondary); }
footer .content-wrapper { gap: var(--space-20); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
footer nav a { padding: 8px 12px; border-radius: 999px; background: var(--color-accent); }
footer nav a:hover { background: var(--color-sun); }

/* PAGINATION NAV (uses .chip) */
[aria-label="Pagination"] { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* UTILITIES */
.hidden { display: none !important; }
.muted { color: var(--color-muted); }
.center { display: flex; align-items: center; justify-content: center; }

/* COOKIE CONSENT BANNER */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; background: #fff; border-top: 4px solid var(--color-secondary); box-shadow: 0 -10px 30px rgba(31,42,46,0.15); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); transform: translateY(110%); transition: transform .35s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-banner .btn-accept { background: var(--color-secondary); color: #fff; border: 2px solid var(--color-secondary); }
.cookie-banner .btn-reject { background: var(--color-accent); color: var(--color-primary); border: 2px solid var(--color-secondary); }
.cookie-banner .btn-settings { background: var(--color-sun); color: var(--color-primary); border: 2px solid var(--color-secondary); }
.cookie-banner .button { padding: 10px 14px; border-radius: 12px; }

/* COOKIE PREFERENCES MODAL */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; padding: var(--space-20); z-index: 1000; }
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 720px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); border: 2px solid var(--color-border); }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }
.cookie-toggle-group { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-accent); }

/* TOGGLE (simple visual) */
.switch { position: relative; width: 46px; height: 26px; background: #d6d6d6; border-radius: 999px; transition: background .2s ease; display: inline-flex; align-items: center; padding: 3px; }
.switch::after { content: ""; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s ease; box-shadow: var(--shadow-sm); }
.switch.is-on { background: var(--color-lime); }
.switch.is-on::after { transform: translateX(20px); }

/* PLAYFUL MICRO-ANIMATIONS */
@keyframes wiggle { 0% { transform: rotate(0); } 25% { transform: rotate(2deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes popIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.button:hover { animation: wiggle .3s ease; }
section { animation: popIn .25s ease; }

/* ACCESSIBILITY: FOCUS STATES */
.button:focus-visible, .chip:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible { outline: 3px solid var(--color-aqua); outline-offset: 2px; }

/* RESPONSIVE BEHAVIOR */
@media (min-width: 768px) {
  /* Header nav becomes visible */
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Content wrapper spacing */
  .content-wrapper { padding: var(--space-40) 0; }

  /* Text-image sections layout */
  .text-image-section { flex-direction: row; align-items: center; }
  .text-image-section > * { flex: 1 1 300px; }

  /* Footer layout more spacious */
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  footer .content-wrapper > * { flex: 1 1 260px; }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-48); }
  h2 { font-size: var(--fs-32); }
  .logo img { height: 48px; }
  .content-wrapper { gap: var(--space-24); }
}

/* GENERIC SECTION SPACING (in addition to mandatory .section) */
main > section { margin: var(--space-24) 0; padding: var(--space-24); }

/* NAV AREAS (Footer and header within content wrapper) */
header nav[aria-label="Hauptnavigation"] { display: none; }
@media (min-width: 768px) {
  header nav[aria-label="Hauptnavigation"] { display: flex; }
}

/* SPECIFIC PAGE POLISHING (lightweight) */
#home-hero, #rezepte-hero, #schnell-hero, #regionen-hero, #tradition-hero, #ueberuns-hero, #kontakt-hero, #ds-hero, #dsgvo-hero, #cookies-hero, #terms-hero, #danke-hero {
  background: linear-gradient(0deg, rgba(255, 209, 102, 0.25), rgba(255, 209, 102, 0.25));
  /* Using a single-color linear-gradient is still a solid color look across browsers */
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: inline-flex;
}

/* CARDS FOR FAQ & INFO BLOCKS */
main article, main .info-card {
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  box-shadow: var(--shadow-sm);
}

/* BOTTOM MARGINS & GAPS TO PREVENT OVERLAP */
section .content-wrapper > * + * { margin-top: 8px; }
.content-grid > * { margin-bottom: var(--space-20); }
.card { z-index: 0; }

/* TABLE-LESS LAYOUT ENFORCEMENT: ensure flex usage without grid/columns anywhere */
/* Already ensured: no grid or columns used in this file */

/* PRINT (basic) */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}