/* Kochfunke style.css – Monochrome Sophisticated (flex-only), mobile-first, accessible */

/* ------------------------------
   CSS Reset & Base
------------------------------ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
input, button, select, textarea { font: inherit; color: inherit; }
:root {
  --black: #0f0f0f;
  --near-black: #111111;
  --text: #121212;
  --muted: #666666;
  --border: #e6e6e6;
  --panel: #f7f7f7;
  --panel-2: #f2f2f2;
  --white: #ffffff;
  --shadow: 0 8px 20px rgba(0,0,0,0.08);
  --radius-s: 6px;  
  --radius-m: 10px;
  --radius-l: 14px;
  --brand-primary: #234E36; /* brand accent used for focus/interactive accents */
  --brand-secondary: #B54C3B; /* used sparingly */
  --brand-accent: #FAF4E6; /* very subtle highlight, sparingly */
}
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--text);
  font-family: Verdana, Geneva, sans-serif; /* brand body font */
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; /* brand display font */ }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 16px; letter-spacing: 0.2px; }
h2 { font-size: 24px; line-height: 1.3; margin: 0 0 16px; }
h3 { font-size: 18px; margin: 0 0 12px; }
p { margin: 0 0 14px; color: var(--text); }
small, .muted { color: var(--muted); font-size: 14px; }
strong { font-weight: 700; }

/* Links & buttons */
a { color: #666666; text-decoration: none; }
a:hover { color: var(--black); }

button, .btn, .cta-button, .cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 18px; border-radius: var(--radius-s);
  border: 1px solid var(--near-black); background: var(--near-black);
  color: var(--white); cursor: pointer; transition: all .25s ease; 
}
button:hover, .btn:hover, .cta-button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
button:active, .btn:active, .cta-button:active { transform: translateY(0); }
button:disabled { opacity: .5; cursor: not-allowed; }

.cta-secondary { background: transparent; color: var(--near-black); border-color: var(--near-black); }
.cta-secondary:hover { background: var(--near-black); color: var(--white); }

/* Focus styles (use brand color for accessibility while keeping monochrome aesthetic) */
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
a:focus-visible, button:focus-visible { box-shadow: 0 0 0 3px rgba(35,78,54,0.25); }

/* Lists */
ul { padding-left: 18px; }
ul li { margin-bottom: 8px; }
ol { padding-left: 18px; }

/* Tables (Cookie policy) */
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
th { background: var(--panel); font-weight: 700; }

/* Utility */
.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); width: 100%; }

/* ------------------------------
   Global layout containers (flex-only)
------------------------------ */
.container {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.content-wrapper {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px;
}
section { padding: 48px 0; }

/* Mandatory spacing and alignment patterns */
.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 & Navigation
------------------------------ */
header { position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--border); z-index: 1000; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.logo img { height: 36px; }

.main-nav { display: none; align-items: center; gap: 20px; }
.main-nav a { color: var(--near-black); padding: 10px 8px; border-radius: 6px; transition: color .2s ease, background .2s ease; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; }
.main-nav a:hover { background: var(--panel); }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--near-black); background: var(--near-black); color: var(--white); }
.mobile-menu-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 380px; 
  background: var(--near-black); color: var(--white); padding: 20px; 
  transform: translateX(100%); transition: transform .35s ease; 
  display: flex; flex-direction: column; align-items: stretch; gap: 16px; z-index: 2000;
}
.mobile-menu.open, body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #2a2a2a; background: #1a1a1a; color: var(--white); }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav a { color: var(--white); padding: 12px; border-radius: 8px; border: 1px solid #262626; background: #1a1a1a; }
.mobile-nav a:hover { background: #222; }

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

/* ------------------------------
   Hero (dark, high contrast)
------------------------------ */
.hero { background: var(--near-black); color: var(--white); }
.hero .container { align-items: stretch; }
.hero .content-wrapper { gap: 18px; }
.hero h1 { color: var(--white); font-size: 32px; }
.hero p { color: #e9e9e9; }
.hero .cta-button { background: var(--white); color: var(--near-black); border-color: var(--white); }
.hero .cta-button:hover { background: #f5f5f5; }
.hero .cta-secondary { border-color: var(--white); color: var(--white); }
.hero .cta-secondary:hover { background: var(--white); color: var(--near-black); }

/* Search bar */
.search-bar { display: flex; align-items: stretch; gap: 8px; width: 100%; max-width: 680px; }
.search-bar input[type="search"] {
  flex: 1 1 auto; padding: 12px 14px; border-radius: var(--radius-s); 
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: var(--white);
}
.search-bar input::placeholder { color: #bdbdbd; }
.hero .search-bar button { width: 44px; padding: 0; border-radius: var(--radius-s); border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); }
.search-bar button img { width: 18px; filter: invert(1); margin: 0 auto; }

/* Chips / tags */
.quick-links-chips, .diet-filter-chips, .tags-cloud, .active-filter-chips, .diet-tags {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.quick-links-chips a, .diet-filter-chips span, .tags-cloud span, .active-filter-chips span, .diet-tags span {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--panel); color: var(--near-black); font-size: 14px;
  transition: all .2s ease;
}
.quick-links-chips a:hover, .diet-filter-chips span:hover, .tags-cloud span:hover, .active-filter-chips span:hover, .diet-tags span:hover {
  background: var(--near-black); color: var(--white); border-color: var(--near-black);
}

/* ------------------------------
   Features section
------------------------------ */
.features { background: var(--panel); }
.features .content-wrapper { gap: 20px; }
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; 
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 16px; box-shadow: var(--shadow);
}
.feature-grid img { width: 28px; height: 28px; filter: grayscale(100%); opacity: .9; }

.usp-list { display: flex; flex-direction: column; gap: 6px; }
.trust-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); }
.trust-badges img { width: 22px; height: 22px; filter: grayscale(100%); }

/* ------------------------------
   Services / Cards / Collections
------------------------------ */
.services .content-wrapper { gap: 18px; }
.category-cards, .recipe-teasers, .time-filters, .view-controls, .pagination, .menu-collections, .collection-blocks {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.category-cards a, .recipe-teasers a, .howtos a, .sides-sauces a, .tradition-card, .media-kit-link {
  display: inline-flex; align-items: center; padding: 12px 14px; border-radius: 10px; 
  border: 1px solid var(--near-black); color: var(--near-black); background: var(--white); transition: all .2s ease;
}
.category-cards a:hover, .recipe-teasers a:hover, .howtos a:hover, .sides-sauces a:hover, .tradition-card:hover, .media-kit-link:hover {
  background: var(--near-black); color: var(--white); box-shadow: var(--shadow);
}

.time-filters button, .quick-filters button, .dish-types button, .regional-tabs button, .cooking-methods button,
.season-switcher button, .occasion-filters button { 
  background: var(--white); color: var(--near-black); border: 1px solid var(--near-black);
}
.time-filters button:hover, .quick-filters button:hover, .dish-types button:hover, .regional-tabs button:hover, .cooking-methods button:hover,
.season-switcher button:hover, .occasion-filters button:hover { background: var(--near-black); color: var(--white); }

.recipe-card-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.recipe-card {
  flex: 1 1 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--white); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.recipe-card a { align-self: flex-start; }
.schema-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; color: var(--near-black); }

.view-controls button, .pagination button, .shopping-list-export { background: var(--white); color: var(--near-black); border-color: var(--near-black); }
.view-controls button:hover, .pagination button:hover, .shopping-list-export:hover { background: var(--near-black); color: var(--white); }
.pagination { gap: 10px; }

.editor-choice, .meal-planner-teaser, .pantry-swaps, .batch-cook, .serve-with, .save-time-hacks, .before-after-note,
.omaskueche, .meal-planner-widget, .shopping-export, .servings-adjust, .portion-calc, .leftovers-ideas, .host-tips,
.response-time-note, .editorial-policy, .sustainability-commitment, .accessibility-statement, .styleguide-highlights,
.response-time-info, .submission-guidelines, .anti-spam-notice, .sponsored-content-guidelines, .recipe-submission,
.newsletter-signup-inline, .privacy-note-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; 
  background: var(--panel); border: 1px solid var(--border); padding: 12px 14px; border-radius: var(--radius-s);
}

.collection-blocks > div, .menu-collections > div {
  flex: 1 1 240px; display: flex; align-items: center; justify-content: center; 
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white);
}

/* ------------------------------
   Testimonials (light background, dark text for readability)
------------------------------ */
.testimonials { background: var(--panel); }
.testimonials .content-wrapper { gap: 18px; }
.testimonials-list { display: flex; flex-wrap: wrap; gap: 16px; }
.testimonial-card {
  flex: 1 1 280px; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--white); color: var(--text); box-shadow: var(--shadow);
}
.testimonial-card blockquote { margin: 0; color: var(--text); font-style: italic; }
.review-details { display: flex; align-items: center; gap: 10px; color: var(--muted); flex-wrap: wrap; }
.stars { letter-spacing: 2px; color: var(--near-black); }
.tp-badge, .avg-rating-badge, .rating-badges { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); padding: 8px 10px; border-radius: 20px; }
.tp-badge img, .avg-rating-badge img, .rating-badges img { width: 18px; height: 18px; filter: grayscale(100%); }

/* ------------------------------
   About, Newsletter, Contact blocks
------------------------------ */
.about .content-wrapper, .newsletter .content-wrapper, .contact .content-wrapper, .contact-info .content-wrapper { gap: 16px; }
.social-links { display: flex; align-items: center; gap: 12px; }
.social-links a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--white); transition: all .2s ease; }
.social-links a:hover { background: var(--near-black); }
.social-links img { width: 18px; height: 18px; filter: grayscale(100%); }

.contact-details { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.contact-details span { display: inline-flex; align-items: center; gap: 8px; }
.contact-details img { width: 16px; height: 16px; filter: grayscale(100%); }

.topic-dropdown, .map-placeholder, .privacy-consent { display: flex; align-items: center; gap: 10px; }
.map-placeholder { padding: 16px; border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-m); }
.map-placeholder img { width: 100%; max-width: 520px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-list details { border: 1px solid var(--border); background: var(--white); border-radius: var(--radius-m); padding: 12px 14px; }
.faq-list summary { cursor: pointer; font-weight: 700; }

/* Filters (Rezepte) */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filter-group { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--white); }
.sort-dropdown, .reset-filters { margin-left: auto; }
.reset-filters { background: var(--white); color: var(--near-black); border-color: var(--near-black); }
.reset-filters:hover { background: var(--near-black); color: var(--white); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; color: #bdbdbd; font-size: 14px; }
.breadcrumb a { color: #d6d6d6; text-decoration: underline; }

/* Badges */
.time-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 16px; background: var(--white); color: var(--near-black); border: 1px solid var(--near-black); }

/* ------------------------------
   Legal pages blocks
------------------------------ */
.data-request, .consent-management, .version-history, .acceptance-checkbox, .report-abuse-form, .changelog {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--border); padding: 12px 14px; border-radius: var(--radius-s);
}

/* ------------------------------
   Footer
------------------------------ */
footer { background: var(--black); color: var(--white); padding: 32px 0; }
footer .container { gap: 16px; }
footer .content-wrapper { display: flex; flex-direction: column; gap: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: #f0f0f0; padding: 8px 10px; border-radius: 6px; }
.footer-nav a:hover { background: #1a1a1a; }
.legal-links { color: #cfcfcf; }
.legal-links a { color: #cfcfcf; text-decoration: underline; }

/* ------------------------------
   Forms & Inputs
------------------------------ */
select, input[type="text"], input[type="search"], input[type="range"], textarea {
  border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 12px; background: var(--white);
}
input[type="range"] { accent-color: var(--brand-primary); }
label { font-weight: 700; }

/* ------------------------------
   Micro-interactions
------------------------------ */
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
section .content-wrapper { animation: slideUp .4s ease both; }

/* Hover lift for cards */
.feature-grid > div:hover, .recipe-card:hover, .testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.1); }

/* ------------------------------
   Mobile menu & overlay transitions
------------------------------ */
@keyframes menuIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes menuOut { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ------------------------------
   Cookie Consent Banner & Modal
------------------------------ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--near-black); color: var(--white);
  display: flex; flex-direction: column; gap: 14px; padding: 16px; z-index: 3000; 
  box-shadow: 0 -10px 24px rgba(0,0,0,0.15); transform: translateY(0); animation: slideUp .35s ease both;
}
.cookie-banner .content { display: flex; flex-direction: column; gap: 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .accept { background: var(--white); color: var(--near-black); border-color: var(--white); }
.cookie-actions .reject { background: transparent; color: var(--white); border-color: var(--white); }
.cookie-actions .settings { background: transparent; color: var(--white); border-color: #bdbdbd; }

/* Cookie modal */
.cookie-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 4000;
}
.cookie-modal.open { display: flex; }
.cookie-modal .modal-card {
  width: 100%; max-width: 720px; background: var(--white); color: var(--text); border-radius: var(--radius-l);
  border: 1px solid var(--border); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.cookie-categories { display: flex; flex-direction: column; gap: 8px; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ------------------------------
   Page-specific small elements
------------------------------ */
.editor-choice a { text-decoration: underline; }
.meal-planner-widget a, .portion-calc a { text-decoration: underline; }
.howtos a + a { margin-left: 8px; }
.avg-rating-badge span { color: var(--near-black); }
.host-tips { background: var(--white); }

/* Cookie table visuals */
.cookie-table { display: flex; flex-direction: column; gap: 10px; }

/* Thank-you */
.recommended-recipes { display: flex; flex-wrap: wrap; gap: 8px; }
.share-links { display: flex; align-items: center; gap: 10px; }
.share-links a { border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); }
.share-links a:hover { background: var(--near-black); }
.share-links img { width: 18px; height: 18px; filter: grayscale(100%); }

/* Breadcrumb in dark hero on interior pages */
.hero .breadcrumb { color: #bdbdbd; }
.hero .breadcrumb a { color: #d6d6d6; }

/* ------------------------------
   Responsive adjustments (mobile-first)
------------------------------ */
@media (min-width: 600px) {
  h1 { font-size: 36px; }
  .recipe-card { flex: 1 1 calc(50% - 10px); }
}

@media (min-width: 768px) {
  .text-image-section { flex-direction: row; }
  h1 { font-size: 40px; }
  .feature-grid > div { padding: 18px; }
}

@media (min-width: 992px) {
  .container { padding: 0 20px; }
  h1 { font-size: 48px; }
  .recipe-card { flex: 1 1 calc(33.333% - 14px); }
  .content-wrapper { gap: 20px; }
}

/* ------------------------------
   Forms: subtle brand-accented states
------------------------------ */
input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(35,78,54,0.15); }

/* ------------------------------
   Accessibility helpers
------------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------
   Prevent overlap & ensure spacing
------------------------------ */
section + section { margin-top: 10px; }
.feature-grid > div, .recipe-card, .testimonial-card, .collection-blocks > div, .menu-collections > div { margin-bottom: 0; }

/* ------------------------------
   Desktop refinements
------------------------------ */
@media (min-width: 1200px) {
  .container { max-width: 1240px; }
}

/* ------------------------------
   Page-specific minor tweaks
------------------------------ */
.press-quotes { display: flex; flex-wrap: wrap; gap: 16px; }
.press-quotes .testimonial-card { flex: 1 1 280px; }
.top-rated { display: flex; flex-wrap: wrap; gap: 16px; }
.mini-review { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); }

/* Range label proximity */
.filter-group span { color: var(--muted); }

/* Breadcrumb spacing */
.breadcrumb span { display: inline-flex; align-items: center; gap: 6px; }

/* Inputs in dark hero context */
.hero select, .hero input[type="text"], .hero textarea { background: rgba(255,255,255,0.06); color: var(--white); border-color: rgba(255,255,255,0.25); }

/* Ensure icons maintain monochrome look */
img[alt*="Trust"], img[alt*="Support"], img[alt*="Instagram"], img[alt*="Facebook"], img[alt*="E-Mail"],
img[alt*="Telefon"], img[alt*="Adresse"], img[alt*="Öffnungszeiten"], img[alt*="Durchschnitt"], img[alt*="Familie"], img[alt*="Karte"], img[alt*="Stern"], img[alt*="star"], img[alt*="trust"] {
  filter: grayscale(100%);
}

/* ------------------------------
   Ensure ALL layout containers use flex (no CSS grid used)
------------------------------ */
.hero .container, .features .container, .services .container, .testimonials .container, .about .container, .newsletter .container,
.contact .container, .contact-info .container, footer .container {
  display: flex; flex-direction: column; align-items: stretch;
}

/* ------------------------------
   Print basics (optional): keep monochrome clean
------------------------------ */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; color: #000; }
}