/* === CSS RESET & NORMALIZE (modern_bold) === */
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,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,main,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;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{
  display:block;
}
body{
  line-height:1.5;
  background:#FFF;
  color:#222;
  font-family:'Roboto', Arial, sans-serif;
  font-size:16px;
  min-height:100vh;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
a{
  color:#255180;
  text-decoration:none;
  transition:color 0.2s cubic-bezier(.55,.01,.35,1);
  font-weight:600;
}
a:hover,a:focus{
  color:#B8250D;
  text-decoration:underline;
}
ul,ol{
  margin-left:24px;
}
button,input,select,textarea{
  font-size:16px;
  font-family:'Roboto',Arial,sans-serif;
  outline:none;
}

/* === COLOR VARIABLES === */
:root{
  --color-primary:#255180;
  --color-secondary:#FFF;
  --color-bg-secondary:#EDEDED;
  --color-accent:#B8250D;
  --color-text:#222;
  --color-white:#FFF;
  --color-shadow:rgba(37, 81, 128, 0.09);
}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--color-primary);
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.17;
  margin-bottom:20px;
}
h1{
  font-size:2.5rem;
  margin-bottom:24px;
}
h2{
  font-size:2rem;
  margin-bottom:20px;
}
h3{
  font-size:1.35rem;
  margin-bottom:16px;
}

p{
  font-size:1.125rem;
  color:var(--color-text);
  line-height:1.6;
  font-weight:400;
  margin-bottom:16px;
}
strong{
  font-weight:700;
  color:var(--color-accent);
}
em{
  font-style:italic;
}

/* === LAYOUT CONTAINERS & SPACING === */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.content-wrapper{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.section{
  margin-bottom:60px;
  padding:40px 20px;
  background:var(--color-bg-secondary);
  border-radius:18px;
  box-shadow:0 2px 12px var(--color-shadow);
}
/* Card pattern (for future use) */
.card-container{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card{
  margin-bottom:20px;
  position:relative;
  background:var(--color-white);
  border-radius:16px;
  box-shadow:0 1px 6px var(--color-shadow);
  padding:28px 24px;
}
.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;
}

/* Testimonials (review/contrast compliance) */
.testimonials{
  margin-bottom:60px;
  padding:40px 0;
}
.testimonial-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding:20px;
  margin-bottom:20px;
  background:#F8FAFC;
  border-left:6px solid var(--color-primary);
  border-radius:18px;
  color:#1A1A1A;
  font-size:1.125rem;
  box-shadow:0 1px 8px var(--color-shadow);
  transition:border-color 0.2s;
}
.testimonial-card span{
  color:var(--color-accent);
  font-weight:700;
  font-size:0.98em;
}
.testimonials h2{
  color:var(--color-accent);
  font-weight:900;
  margin-bottom:32px;
}

/* Features & Items */
.feature-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.features ul{
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* Newsletter Signup & Contact CTA */
.newsletter-signup, .contact-cta, .cta {
  background:var(--color-primary);
  color:var(--color-white);
  padding:40px 0;
  margin-bottom:60px;
  border-radius:20px;
  box-shadow:0 2px 14px var(--color-shadow);
}
.newsletter-signup h2,
.contact-cta h2,
.cta h2{
  color:var(--color-white);
}
.newsletter-signup .btn,
.contact-cta .btn,
.cta .btn{
  margin-top:10px;
}

/* === HERO SECTION === */
.hero {
  background:linear-gradient(100deg, var(--color-primary) 80%, var(--color-accent) 100%);
  color:var(--color-white);
  padding:55px 0 45px 0;
  margin-bottom:60px;
  border-radius:0 0 36px 36px;
  box-shadow:0 4px 36px var(--color-shadow);
}
.hero .container {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero h1 {
  color:#fff;
  font-weight:900;
  font-size:2.7rem;
  margin-bottom:10px;
}
.hero p {
  color:#EDEDED;
  font-size:1.3rem;
  margin-bottom:35px;
  font-weight:500;
}

/* === BUTTONS === */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 34px;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.125rem;
  font-weight:700;
  border-radius:100vw;
  border:none;
  cursor:pointer;
  background:var(--color-primary);
  color:var(--color-secondary);
  box-shadow:0 2px 16px var(--color-shadow);
  transition:background 0.2s, color 0.15s, box-shadow 0.23s;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.btn.primary {
  background:var(--color-primary);
  color:var(--color-white);
}
.btn.accent{
  background:var(--color-accent);
  color:var(--color-white);
}
.btn:hover,.btn:focus {
  background:var(--color-accent);
  color:#fff;
  box-shadow:0 4px 24px var(--color-shadow);
}

/* Main nav CTA button */
.nav-cta {
  margin-left:16px;
  padding:8px 24px;
  background:var(--color-accent);
  border-radius:100vw;
  color:#fff;
  font-weight:700;
  transition:background 0.2s, color 0.15s;
  box-shadow:0 2px 10px var(--color-shadow);
}
.nav-cta:hover,
.nav-cta:focus {
  background:var(--color-primary);
  color:#fff;
}

/* === BADGE === */
.badge{
  display:inline-block;
  background:var(--color-accent);
  color:#fff;
  font-size:0.92em;
  font-weight:700;
  border-radius:11px;
  padding:2px 12px;
  margin-left:8px;
  letter-spacing:0.03em;
  vertical-align:middle;
  box-shadow:0 1px 4px var(--color-shadow);
}

/* === NAVIGATION === */
header{
  background:#fff;
  width:100%;
  border-bottom:2.5px solid #EBEBEB;
  padding:0;
}
.main-nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.main-nav a{
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.12rem;
  font-weight:700;
  color:var(--color-primary);
  padding:7px 12px;
  border-radius:7px;
}
.main-nav a:hover,
.main-nav a:focus{
  color:var(--color-accent);
  background:var(--color-bg-secondary);
}
.main-nav img{
  height:42px;
  margin-right:10px;
}
.mobile-menu-toggle {
  display:none;
  position:absolute;
  right:24px;
  top:18px;
  background:none;
  border:none;
  font-size:2rem;
  color:var(--color-accent);
  z-index:1010;
  cursor:pointer;
  padding:10px;
  border-radius:10px;
  transition:background 0.18s;
}
.mobile-menu-toggle:active,.mobile-menu-toggle:focus{background:var(--color-bg-secondary);}

/* --- Mobile OFF-CANVAS Menu --- */
.mobile-menu {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  position:fixed;
  top:0;left:0;
  width:100vw;
  height:100vh;
  z-index:1200;
  background:var(--color-primary);
  color:#fff;
  transform:translateX(-100vw);
  transition:transform 0.34s cubic-bezier(.77,.03,.29,.91);
  padding:0;
}
.mobile-menu.active {
  transform:translateX(0);
}
.mobile-menu-close {
  background:none;
  border:none;
  color:var(--color-accent);
  font-size:2.2rem;
  position:absolute;
  top:24px;
  right:30px;
  padding:12px;
  border-radius:100vw;
  cursor:pointer;
  transition:background 0.19s;
  z-index:1300;
  background:rgba(255,255,255,0.03);
}
.mobile-menu-close:hover,
.mobile-menu-close:focus{
  background:var(--color-accent);
  color:#fff;
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:90px;
  width:100vw;
  align-items:center;
}
.mobile-nav a {
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:0.04em;
  color:#fff;
  padding:16px 0;
  border-radius:8px;
  width:100vw;
  text-align:center;
  transition:background 0.18s, color 0.13s;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  background:var(--color-accent);
  color:var(--color-white);
}

/* === SEARCH SECTION (rezepte.html) === */
.search-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
  margin-bottom:8px;
}
.search-section label{
  font-weight:700;
  font-size:1.1rem;
  color:var(--color-primary);
}
.search-section input{
  padding:10px 16px;
  border:2px solid var(--color-primary);
  border-radius:8px;
  font-size:1rem;
  margin-bottom:0;
  transition:border 0.16s, box-shadow 0.18s;
  box-shadow:0 1px 4px var(--color-shadow);
}
.search-section input:focus{
  border-color:var(--color-accent);
  box-shadow:0 1px 8px var(--color-shadow);
}

/* === CATEGORY GRID (rezepte.html) === */
.category-grid ul{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:16px;
  padding:0;
  list-style:none;
}
.category-grid ul li a{
  display:inline-flex;
  align-items:center;
  background:#F2F5FA;
  color:var(--color-primary);
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  border-radius:12px;
  padding:10px 20px;
  transition:background 0.18s;
  box-shadow:0 1px 6px var(--color-shadow);
}
.category-grid ul li a:hover,
.category-grid ul li a:focus{
  background:var(--color-accent);
  color:#fff;
}

/* --- SPECIAL --- */
.special-recipe-spotlight{
  background:var(--color-accent);
  padding:16px 24px;
  border-radius:14px;
  color:var(--color-white);
  font-size:1.08rem;
  font-weight:600;
  margin:20px 0 0 0;
  box-shadow:0 2px 10px var(--color-shadow);
}
.special-recipe-spotlight h3 {
  color:#fff;
  font-weight:800;
  margin-bottom:6px;
}
.history-snippet{
  background:#F6F7FB;
  padding:12px 19px 12px 19px;
  border-radius:12px;
  margin-top:22px;
  font-size:1.04rem;
  color:var(--color-primary);
  font-weight:600;
  box-shadow:0 1px 7px var(--color-shadow);
}

/* === FOOTER === */
footer {
  background:#fff;
  border-top:2.5px solid #EDF2F7;
  padding:35px 0 0 0;
  margin-top:60px;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  justify-content:center;
  margin-bottom:16px;
}
.footer-nav a{
  font-weight:700;
  color:var(--color-primary);
  font-size:1rem;
  transition:color 0.15s;
  padding:7px 10px;
  border-radius:6px;
}
.footer-nav a:hover,.footer-nav a:focus{
  color:var(--color-accent);
  background:var(--color-bg-secondary);
}
.brand-footer{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  justify-content:center;
  padding:18px 0 14px 0;
}
.brand-footer img{
  height:32px;
}
.brand-footer span{
  color:var(--color-primary);
  font-weight:700;
  font-size:1rem;
}

/* === LEGAL SECTIONS === */
.legal {
  margin-bottom:60px;
  padding:40px 20px;
  background:#F8FAFC;
  border-radius:20px;
  box-shadow:0 1px 8px var(--color-shadow);
}
.legal .text-section h2{
  font-size:1.18rem;
  margin:16px 0 12px 0;
  color:var(--color-accent);
  font-weight:700;
}
.legal .text-section ul{
  margin-bottom:18px;
}
.legal .text-section p{
  margin-bottom:14px;
}

/* === FORM ELEMENTS (for newsletter/signup) === */
input[type="text"],input[type="email"],textarea,select{
  padding:11px 14px;
  border:2px solid var(--color-primary);
  border-radius:8px;
  font-size:1.08rem;
  background:#F8FAFC;
  color:var(--color-primary);
  font-family:'Roboto',Arial,sans-serif;
  margin-bottom:0;
  transition:border 0.16s, box-shadow 0.16s;
  box-shadow:0 1px 4px var(--color-shadow);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--color-accent);
  box-shadow:0 1px 8px var(--color-shadow);
}

/* === TABLE (for future content) === */
table{width:100%;border-collapse:collapse;margin:24px 0;}
thead{background:var(--color-primary);color:var(--color-white);}
th,td{padding:14px 17px;text-align:left;}
tr:nth-child(even){background:var(--color-bg-secondary);}

/* === UTILITIES === */
.text-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.text-section ul{
  margin:10px 0 0 24px;
}
.text-section strong{
  margin-bottom:5px;
  display:inline-block;
}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mt-2{margin-top:8px;}
.mb-2{margin-bottom:8px;}

/* === RESPONSIVE DESIGN (Mobile-First) === */
@media (max-width: 1024px){
  .container{max-width:840px;}
  .hero h1{font-size:2.2rem;}
}
@media (max-width: 768px){
  h1{font-size:2rem;}
  h2{font-size:1.3rem;}
  .container{padding:0 10px;}
  .main-nav{
    display:none;
  }
  .mobile-menu-toggle{
    display:block;
  }
  .content-wrapper, .features ul, .feature-item{
    gap:16px;
  }
  .hero{
    padding:32px 0 32px 0;
    border-radius:0 0 25px 25px;
  }
  .section, .newsletter-signup, .contact-cta, .cta, .legal{
    padding:22px 8px;
    margin-bottom:40px;
  }
  .footer-nav{
    gap:14px;
  }
  .brand-footer{padding:10px 0 10px 0;}
  .text-image-section{
    flex-direction:column;
    gap:12px;
  }
  .testimonial-card, .card{
    padding:15px 10px;
  }
  .category-grid ul{
    flex-direction:column;
    gap:13px;
  }
}
@media (max-width:480px){
  .hero h1{font-size:1.4rem;}
}

/* === COOKIE CONSENT BANNER (and modal) === */
.cookie-banner{
  position:fixed;
  left:0;right:0;
  bottom:0;
  width:100vw;
  z-index:9999;
  background:var(--color-primary);
  color:#fff;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:20px 16px 20px 24px;
  box-shadow:0 -2px 16px 0 rgba(37,81,128,0.14);
  animation:slideUpIn 0.33s cubic-bezier(.71,.06,.47,.97);
}
@keyframes slideUpIn{
  0%{transform:translateY(140%);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
.cookie-banner__text{
  max-width:570px;
  font-size:1.1rem;
  font-family:'Roboto',Arial,sans-serif;
  color:#fff;
  font-weight:500;
}
.cookie-banner__actions{
  display:flex;
  gap:14px;
  align-items:center;
  margin-left:18px;
}
.cookie-banner__btn{
  padding:9px 20px;
  border-radius:100vw;
  border:none;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  font-size:1.06rem;
  cursor:pointer;
  color:#fff;
  background:var(--color-accent);
  transition:background 0.18s;
}
.cookie-banner__btn.settings {
  background:#fff;
  color:var(--color-primary);
  border:2px solid var(--color-primary);
}
.cookie-banner__btn:hover,
.cookie-banner__btn:focus{
  background:var(--color-primary);
  color:#fff;
}
.cookie-banner__btn.settings:hover{
  background:var(--color-accent);
  color:#fff;
}
@media (max-width:740px){
  .cookie-banner{
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:15px 8px 12px 8px;
  }
  .cookie-banner__actions{margin:0;margin-top:14px;gap:10px;}
}

/* Cookie Modal */
.cookie-modal{
  display:none;
  position:fixed;
  z-index:13000;
  top:0;left:0;right:0;bottom:0;
  justify-content:center;
  align-items:center;
  background:rgba(24,31,46,0.68);
  animation:cookieModalFade 0.34s;
}
.cookie-modal.active{
  display:flex;
}
@keyframes cookieModalFade {
  0%{opacity:0;}
  100%{opacity:1;}
}
.cookie-modal__content{
  background:#fff;
  border-radius:18px;
  min-width:320px;
  max-width:94vw;
  padding:38px 26px 30px 26px;
  box-shadow:0 8px 36px 0 rgba(37,81,128,0.18);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cookie-modal__header{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.cookie-modal__title{
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.4rem;
  font-weight:800;
  color:var(--color-primary);
}
.cookie-modal__close{
  border:none;
  background:none;
  color:var(--color-accent);
  font-size:2rem;
  border-radius:14px;
  padding:7px 11px;
  cursor:pointer;
  transition:background 0.13s;
}
.cookie-modal__close:hover{background:var(--color-bg-secondary);}
.cookie-modal__body{
  font-family:'Roboto',Arial,sans-serif;
  font-size:1.06rem;
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.cookie-category{
  padding:12px 0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  border-top:1.5px solid #E3E6EB;
  font-weight:700;
}
.cookie-category:first-child{border-top:none;}
.cookie-category__label{
  color:var(--color-primary);
  font-weight:700;
  font-size:1.07em;
  letter-spacing:0.01em;
}
.cookie-category__toggle{
  display:flex;
  align-items:center;
  gap:8px;
}
.cookie-toggle{
  width:42px;
  height:23px;
  background:#E2E9F2;
  border-radius:20px;
  position:relative;
  transition:background 0.16s;
}
.cookie-toggle input{
  opacity:0;
  width:0;height:0;
  position:absolute;
}
.cookie-toggle .slider{
  position:absolute;
  left:2px;
  top:2px;
  width:19px;height:19px;
  background:var(--color-primary);
  border-radius:50%;
  transition:left 0.2s, background 0.17s;
}
.cookie-toggle.active{background:var(--color-accent);}
.cookie-toggle.active .slider{background:var(--color-accent);left:21px;}
.cookie-category.essential .cookie-toggle {
  background:#B2C6DE;
}
.cookie-category.essential .slider{
  background:var(--color-primary);
  left:21px;
}
.cookie-category.essential .cookie-toggle,
.cookie-category.essential .slider{
  cursor:not-allowed!important;
  opacity:0.7;
}
.cookie-modal__footer{
  display:flex;
  justify-content:flex-end;
  gap:16px;
  margin-top:14px;
}
.cookie-modal__btn{
  padding:9px 26px;
  font-size:1.09rem;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  border-radius:100vw;
  border:none;
  cursor:pointer;
  color:#fff;
  background:var(--color-primary);
  transition:background 0.14s;
}
.cookie-modal__btn.accent{background:var(--color-accent);}
.cookie-modal__btn.outline{
  background:#fff;
  color:var(--color-primary);
  border:2px solid var(--color-primary);
}
.cookie-modal__btn:hover,.cookie-modal__btn:focus{background:var(--color-accent);color:#fff;}
.cookie-modal__btn.outline:hover{background:var(--color-accent);color:#fff;}

/* === SCROLLBAR === */
::-webkit-scrollbar{
  width:10px;
  background:var(--color-bg-secondary);
}
::-webkit-scrollbar-thumb{
  background:var(--color-primary);
  border-radius:12px;
}

/* === ANIMATIONS & MICRO-INTERACTIONS === */
.btn,.cookie-banner__btn,.cookie-modal__btn, .mobile-menu-toggle, .mobile-menu-close{
  transition:background 0.18s, color 0.15s, box-shadow 0.22s, transform 0.18s;
}
.btn:hover, .cookie-banner__btn:hover, .cookie-modal__btn:hover{
  transform:translateY(-2px) scale(1.035);
  box-shadow:0 6px 28px var(--color-shadow);
}
.card, .testimonial-card, .newsletter-signup, .contact-cta, .cta, .special-recipe-spotlight, .legal{
  transition:box-shadow 0.18s, border-color 0.19s;
}
.card:hover, .testimonial-card:hover{
  box-shadow:0 4px 30px var(--color-shadow);
  border-color:var(--color-accent);
}

/* END MODERN BOLD STYLES */