/* ===== CSS RESET & NORMALIZE ===== */
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%; font: inherit; vertical-align: baseline;
  box-sizing: border-box;
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { line-height: 1.5; background: #FFF9F1; color: #263238; min-height: 100vh; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
input, button, select, textarea { font-family: inherit; font-size: inherit; }

/* ===== BRAND VARIABLES & FONT IMPORT ===== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,800,900|Open+Sans:400,700&display=swap');
:root {
  --color-primary: #263238;  /* dark bluegray */
  --color-secondary: #B38F53; /* gold-bronze */
  --color-accent: #FFF9F1; /* off-white */
  --color-text: #263238;
  --color-heading: #263238;
  --color-body: #263238;
  --color-cta: #B38F53;
  --color-white: #fff;
  --color-success: #52CD99;
  --color-danger: #FF6161;
  --shadow-main: 0 6px 32px rgba(38,50,56,0.08), 0 1.5px 2.5px rgba(38,50,56,0.04);
  --radius-lg: 22px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --transition-main: 0.23s cubic-bezier(.37,.47,.42,.96);
  --transition-long: 0.33s cubic-bezier(.23,.81,.55,.94);
  --font-display: 'Montserrat', Arial, sans-serif;
  --font-body: 'Open Sans', Arial, sans-serif;
}

/* ===== TYPOGRAPHY ===== */
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-body);
  background: var(--color-accent);
  letter-spacing: 0.01em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-heading);
  letter-spacing: .01em;
  line-height: 1.13;
}
h1 { font-size: 2.7rem; margin-bottom: 20px; text-transform: uppercase; }
h2 { font-size: 2rem; margin-bottom: 18px; }
h3 { font-size: 1.3rem; margin-bottom: 10px; }
h4 { font-size: 1.1rem; margin-bottom: 7px; font-weight: 700; }
p, ul, ol { font-family: var(--font-body); font-size: 1rem; margin-bottom: 14px; color: var(--color-body); }
p.subheadline { font-size: 1.22rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 22px; text-shadow: 0 1px 0 #fff6; }
strong, b { font-weight: 800; }

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.45rem; }
  .subheadline { font-size: 1.04rem; }
}

/* ===== LAYOUT CONTAINERS ===== */
.container {
  max-width: 1170px; margin: 0 auto;
  padding: 0 18px;
}
.content-wrapper {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.text-section { width: 100%; display: flex; flex-direction: column; gap: 13px; }

.section {
  margin-bottom: 60px; padding: 40px 20px; background: transparent;
}
.section:last-child { margin-bottom: 0; }
.card-container {
  display: flex; flex-wrap: wrap; gap: 24px;
}
.card {
  background: var(--color-white); box-shadow: var(--shadow-main);
  padding: 32px 26px; border-radius: var(--radius-lg);
  margin-bottom: 20px; position: relative;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow var(--transition-main);
  min-width: 270px; max-width: 100%;
}
.card:hover {
  box-shadow: 0 8px 44px rgba(38,50,56,0.14),0 2.5px 8px rgba(38,50,56,0.09);
  transform: translateY(-2px) scale(1.01);
}
.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;
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.feature-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
}
.feature-grid {
  display: flex; flex-wrap: wrap; gap: 32px 38px; margin-top: 14px; margin-bottom: 6px;
}
.feature-grid li {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-main);
  min-width: 210px; max-width: 240px;
  flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start;
  padding: 25px 17px; gap: 14px; text-align: left;
  transition: box-shadow var(--transition-main);
}
.feature-grid li:hover {
  box-shadow: 0 8px 32px rgba(179,143,83,0.065),0 4px 13px var(--color-secondary, #B38F53);
  transform: translateY(-3px) scale(1.03);
}
.feature-grid img {
  width: 44px; height: 44px; margin-bottom: 9px; }

/* ===== HERO ===== */
.hero { padding: 58px 0 40px 0; background: var(--color-primary); }
.hero .container { max-width: 950px; }
.hero .content-wrapper {
  align-items: flex-start;
  color: var(--color-accent);
}
.hero h1, .hero h2, .hero .subheadline { color: var(--color-accent); text-shadow: 0 2px 12px rgba(38,50,56,0.13); }
.hero .cta-primary {
  margin-top: 30px;
}

/* ===== CTA BUTTONS ===== */
.cta-primary, .cta-secondary {
  display: inline-block;
  font-family: var(--font-display);
  padding: 13px 38px; margin-top: 6px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 1.13rem; font-weight: 800;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(179,143,83,0.13);
  border: none; cursor: pointer;
  letter-spacing: .04em;
  outline: none;
  transition: background var(--transition-main),color var(--transition-main),transform var(--transition-main);
}
.cta-primary:hover, .cta-primary:focus {
  background: var(--color-primary);
  color: var(--color-secondary);
  transform: translateY(-1.5px) scale(1.04);
}
.cta-secondary {
  background: var(--color-white); color: var(--color-secondary);
  border: 2.5px solid var(--color-secondary);
}
.cta-secondary:hover, .cta-secondary:focus {
  background: var(--color-secondary); color: var(--color-white);
  transform: translateY(-1.5px) scale(1.04);
}

/* ===== NAVIGATION ===== */
header { background: var(--color-white); box-shadow: 0 2px 13px rgba(38,50,56,0.05); position: relative; z-index: 101; }
header nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  justify-content: flex-start; padding: 18px 0;
}
header nav a {
  color: var(--color-primary); font-family: var(--font-display); font-weight: 700;
  letter-spacing: .03em; font-size: 1.05rem; padding: 4px 12px; border-radius: 6px; transition: background var(--transition-main),color var(--transition-main);
}
header nav a:hover:not(.cta-primary), header nav a:focus:not(.cta-primary) {
  background: var(--color-accent); color: var(--color-secondary);
}
header nav a.cta-primary {
  margin-left: 18px; margin-right: 4px; }
header nav img { width: 62px; margin-right: 14px; }

/* ===== MOBILE MENU ===== */
.mobile-menu-toggle {
  display: none; position: absolute; right: 20px; top: 18px; z-index: 110;
  width: 44px; height: 44px;
  background: var(--color-secondary); color: var(--color-white);
  border: none; border-radius: 11px;
  font-size: 2rem; font-family: var(--font-display);
  box-shadow: 0 2px 12px rgba(179,143,83,0.20);
  transition: background var(--transition-main), color var(--transition-main);
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
  background: var(--color-primary); color: var(--color-secondary);
}
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: var(--color-primary); color: var(--color-accent);
  z-index: 200;
  flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0;
  transition: transform var(--transition-long);
  transform: translateX(-100vw);
  box-shadow: 0 4px 50px rgba(38,50,56,0.19);
}
.mobile-menu.active {
  display: flex;
  transform: translateX(0);
  animation: mobileMenuIn var(--transition-long) forwards;
}
@keyframes mobileMenuIn {
  from { transform: translateX(-100vw); } to { transform: translateX(0); }
}
.mobile-menu-close {
  margin: 20px 23px 12px auto; background: none; border: none;
  color: var(--color-accent); font-size: 2.3rem; font-family: var(--font-display);
  cursor: pointer; padding: 0 8px; border-radius: 8px;
  transition: background 0.17s, color 0.17s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background: var(--color-secondary); color: var(--color-white);
}
.mobile-nav {
  width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding-left: 38px; margin-top: 4px;
}
.mobile-nav a {
  color: var(--color-accent); font-family: var(--font-display); font-weight: 800;
  font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 13px 0; line-height: 1.21;
  border-radius: 8px; transition: background var(--transition-main),color var(--transition-main);
  min-width: 180px; display: inline-block;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background: var(--color-secondary); color: var(--color-white);
}
@media (max-width: 1000px) {
  header nav { gap: 9px; }
}
@media (max-width: 900px) {
  header nav a { font-size: 0.97rem; padding: 3px 7px; }
}
@media (max-width: 768px) {
  header nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .mobile-menu { display: flex; }
}

/* Hide desktop nav, show burger on mobile */
@media (max-width: 768px) {
  header nav { display: none !important; }
  .mobile-menu { z-index: 200; }
}

/* ===== SECTIONS/GENERIC ===== */
section { margin-bottom: 60px; padding: 40px 20px; }
@media (max-width: 768px) {
  section { margin-bottom: 38px; padding: 30px 8px; }
}

/* ===== CARDS ===== */
.card, .testimonial-card {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-main);
  background: var(--color-white);
  margin-bottom: 20px; position: relative; /* per layout spec */
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 18px;
  transition: box-shadow var(--transition-main), transform var(--transition-main);
}
.card:hover, .testimonial-card:hover {
  box-shadow: 0 8px 44px rgba(38,50,56,0.12),0 2.5px 8px rgba(38,50,56,0.11);
  transform: translateY(-2.5px) scale(1.013);
}

.testimonial-card {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  border-left: 7px solid var(--color-secondary);
  background: #fff;
  max-width: 710px;
  margin-bottom: 20px;
}
.testimonial-card p {
  font-size: 1.09rem;
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: 2px;
  font-weight: 700;
}
.testimonial-card span {
  font-size: 0.97rem;
  color: var(--color-secondary);
  font-family: var(--font-display);
  font-weight: 800;
}
@media (max-width: 650px) {
  .testimonial-card {
    flex-direction: column; align-items: flex-start; padding: 17px 10px;
  }
}

/* For testimonials in dark sections */
.hero .testimonial-card, .section.dark .testimonial-card {
  background: #fff;
  color: var(--color-text);
  border-left: 7px solid var(--color-secondary);
}

/* ===== TABLES ===== */
table { width: 100%; background: #fff;
  border-radius: var(--radius-sm); overflow: hidden; margin: 10px 0 24px 0; }
td, th { text-align: left; padding: 13px 18px; font-size: 1rem; font-family: var(--font-body); }
th { background: var(--color-primary); color: var(--color-accent);
  border-bottom: 3px solid var(--color-secondary); font-family: var(--font-display); font-size: 1.06rem; }
tr:nth-child(odd) td { background: #FCF5E9; }
tr:nth-child(even) td { background: #FFF; }

/* ===== FAQ ===== */
.faq ul li { margin-bottom: 19px; line-height: 1.45; font-size: 1.01rem; }
.faq strong { font-family: var(--font-display); color: var(--color-secondary); font-size: 1.06rem; }

/* ===== FILTER BADGE ===== */
.filter {
  display: inline-block; background: var(--color-secondary);
  color: var(--color-white); font-weight: 700; font-family: var(--font-display);
  font-size: 0.96rem; padding: 0 13px; margin-right: 7px;
  border-radius: 13px; margin-bottom: 2px; letter-spacing: 0.02em;
}

/* ===== FOOTER ===== */
footer { background: var(--color-primary); color: var(--color-accent); padding: 32px 0 16px 0; }
footer .container { max-width: 970px; }
footer .content-wrapper {
  display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center;
}
footer nav {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: center;
}
footer nav a {
  font-family: var(--font-display); font-weight: 700; color: var(--color-accent);
  font-size: 0.98rem; padding: 6px 8px; border-radius: 7px;
  transition: background var(--transition-main), color var(--transition-main);
}
footer nav a:hover, footer nav a:focus {
  background: var(--color-secondary); color: var(--color-white);
}
footer p { font-size: 1rem; opacity: 0.86; }

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100vw; z-index: 9999;
  background: var(--color-white);
  border-top: 4px solid var(--color-secondary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 25px 14px 20px 14px;
  box-shadow: 0 -2px 22px rgba(38,50,56,.09);
  animation: cookieBannerIn 0.4s cubic-bezier(.56,.09,.62,1.07);
  gap: 14px;
}
@keyframes cookieBannerIn { from { transform: translateY(100%); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
.cookie-banner p { text-align: center; font-size: 0.98rem; color: var(--color-primary); margin-bottom: 5px; }
.cookie-banner .cookie-btn-group {
  display: flex; flex-direction: row; gap: 16px; justify-content: center; align-items: center;
  width: 100%; margin-top: 3px;
}
.cookie-banner button,
.cookie-banner .cookie-settings-btn {
  font-family: var(--font-display); font-size: 1.06rem;
  border: none; border-radius: 9px; padding: 10px 22px; cursor: pointer;
  font-weight: 800; letter-spacing: .03em;
  transition: background var(--transition-main), color var(--transition-main);
}
.cookie-banner .accept {
  background: var(--color-secondary); color: var(--color-white);
}
.cookie-banner .accept:hover, .cookie-banner .accept:focus {
  background: var(--color-primary); color: var(--color-secondary);
}
.cookie-banner .reject {
  background: var(--color-danger); color: var(--color-white);
}
.cookie-banner .reject:hover, .cookie-banner .reject:focus {
  background: var(--color-secondary); color: #fff;
}
.cookie-banner .cookie-settings-btn {
  background: #FCF5E1; color: var(--color-secondary);
}
.cookie-banner .cookie-settings-btn:hover, .cookie-banner .cookie-settings-btn:focus {
  background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-secondary);
}

/* ===== COOKIE SETTINGS MODAL ===== */
.cookie-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(38,50,56,.26); z-index: 10000;
  align-items: center; justify-content: center;
  animation: modalIn 0.35s cubic-bezier(.65,.09,.42,.99);
}
.cookie-modal.active {
  display: flex;
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal .cookie-modal-dialog {
  background: var(--color-white);
  color: var(--color-text); border-radius: var(--radius-lg);
  max-width: 400px; width: 92vw; padding: 30px 22px 18px 22px;
  box-shadow: 0 6px 44px rgba(38,50,56,0.16);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.cookie-modal .cookie-modal-close {
  position: absolute; right: 15px; top: 12px; background: none; border: none;
  font-size: 1.25rem; color: var(--color-secondary); cursor: pointer;
  border-radius: 10px; padding: 2px 7px; transform: scale(1);
  transition: background .18s, color .13s, transform .16s;
}
.cookie-modal .cookie-modal-close:hover { background: var(--color-secondary); color: var(--color-white); transform: scale(1.14); }
.cookie-modal h3 { font-size: 1.12rem; margin-bottom: 4px; }
.cookie-modal .cookie-category {
  display: flex; align-items: center; gap: 14px; margin: 7px 0;
}
.cookie-modal label {
  font-size: 0.98rem; color: var(--color-primary); font-family: var(--font-display); font-weight: 700;
}
.cookie-toggle {
  width: 40px; height: 22px; border-radius: 11px;
  background: var(--color-accent); border: 1.5px solid #dedede; position: relative;
  transition: background 0.23s;
  margin-right: 10px; cursor: pointer; display: inline-block;
}
.cookie-toggle input { display: none; }
.cookie-toggle .slider {
  position: absolute; left: 2px; top: 2px; background: var(--color-secondary);
  width: 18px; height: 18px; border-radius: 50%; transition: left var(--transition-main);
}
.cookie-toggle input:checked + .slider { left: 20px; background: var(--color-primary); }
/* Essential cookies - .cookie-toggle[disabled] */
.cookie-toggle[disabled] { opacity: 0.5; pointer-events: none; }

.cookie-modal .cookie-modal-btns {
  display: flex; gap: 15px; margin-top: 13px; justify-content: flex-end;
}
.cookie-modal .cookie-modal-btns button {
  padding: 10px 22px; border-radius: 8px;
  font-family: var(--font-display); letter-spacing: .02em;
  font-size: 1em; font-weight: 800;
  border: none; cursor: pointer;
  background: var(--color-secondary); color: #fff;
  box-shadow: 0 1.5px 5px rgba(38,50,56,0.06);
  transition: background var(--transition-main), color var(--transition-main);
}
.cookie-modal .cookie-modal-btns .secondary {
  background: #fff; color: var(--color-secondary); border: 2px solid var(--color-secondary);
}
.cookie-modal .cookie-modal-btns .secondary:hover, .cookie-modal .cookie-modal-btns .secondary:focus {
  background: var(--color-secondary); color: #fff; }


/* ===== UTILITY CLASSES ===== */
.hide { display: none !important; }
.center { display: flex; align-items: center; justify-content: center; }
.mb-0 { margin-bottom: 0 !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1170px) {
  .container { max-width: 98vw; }
}
@media (max-width: 900px) {
  .feature-grid { gap: 20px 12px; }
}
@media (max-width: 650px) {
  .container { padding: 0 6px; }
  .feature-grid li { min-width: 160px; max-width: 100%; }
}
@media (max-width: 600px) {
  .hero { padding: 34px 0 24px 0; }
}

/* ===== MICRO-ANIMATIONS ===== */
.card, .feature-grid li, .cta-primary, .cta-secondary, .testimonial-card, .cookie-banner, .mobile-menu {
  transition: box-shadow var(--transition-main), transform var(--transition-main), background var(--transition-main), color var(--transition-main);
}
.cta-primary, .cta-secondary {
  transition: color var(--transition-main), background var(--transition-main), transform var(--transition-main);
}

/* ===== GEOMETRIC DECORATIVE SHAPES ===== */
.section::before, .section::after {
  content: ""; display: none;
}
@media (min-width: 1025px) {
  .hero::before {
    display: block; content: ""; position: absolute; right: 7%; top: 14%;
    width: 120px; height: 120px; border-radius: 36% 64% 64% 36%/44% 36% 64% 56%;
    background: var(--color-secondary); opacity: 0.09; z-index: 0;
  }
}

/* ===== MISC ELEMENTS ===== */
a { transition: color var(--transition-main); cursor: pointer; }
a:focus { outline: 2px solid var(--color-secondary); }
ul { padding-left: 20px; }

/* ===== NEXT STEPS SECTION (THANK YOU PAGE) ===== */
.next-steps ul li { font-family: var(--font-body); margin-bottom: 11px; font-size: 1.05rem; color: var(--color-primary); }
.next-steps h2 { margin-bottom: 14px; }

/* ===== CARD LAYOUTS for REZEPTE, SERVICES etc. ===== */
.recipe-list .text-section ul li, .services .content-wrapper ul li, .benefits .content-wrapper ul li {
  background: #fff; border-radius: var(--radius-xs);
  margin-bottom: 16px; padding: 16px 15px 12px 14px;
  box-shadow: 0 1px 7px rgba(38,50,56,0.04);
  font-family: var(--font-body);
}
.services .content-wrapper ul li strong { color: var(--color-secondary); }

/* ===== ACCESSIBILITY ===== */
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 1.5px; }

/* ===== DARK SECTIONS FOR HIGH-CONTRAST ===== */
.section.dark, .hero.dark {
  background: var(--color-primary);
  color: var(--color-accent);
}
.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark h4 { color: var(--color-accent); }

/* ===== CUSTOM SCROLLBAR for MODALS ===== */
.cookie-modal .cookie-modal-dialog::-webkit-scrollbar { width: 6px; }
.cookie-modal .cookie-modal-dialog::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 9px; }

/* ===== PRINT FRIENDLY TABLES ===== */
@media print {
  body { background: #fff; color: #000; }
  header, footer, .cookie-banner, .cookie-modal { display: none !important; }
  .section, section, .container, .content-wrapper, .card, .card-container, .feature-grid, .testimonial-card { all: unset; display: block; box-shadow: none; background: none; }
  a, a:visited { color: #000; text-decoration: underline; }
}