/* WeltGenuss Zuhause - Gradient Modern CSS */
/* Reset and Normalize (Mobile-first) */
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;
  vertical-align:baseline;
  background:transparent;
  box-sizing:border-box;
}
body {
  line-height:1.5;
  font-family:'Open Sans', Arial, Helvetica, sans-serif;
  background:linear-gradient(135deg, #ffffff 0%, #F6F4EF 100%);
  color:#1A1A1A;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight:700;
  letter-spacing:-0.5px;
  color:#246D3A;
  line-height:1.18;
}
h1 {font-size:2.2rem;margin-bottom:16px;}
h2 {font-size:1.5rem;margin-bottom:14px;}
h3 {font-size:1.18rem;margin-bottom:10px;}
h4,h5,h6 {font-size:1rem;}
p,li,ul {font-size:1rem;line-height:1.55;}
strong {font-weight:700;}
a {
  color:#246D3A;
  text-decoration:none;
  transition:color 0.1s;
}
a:hover, .main-nav a:focus, .mobile-nav a:focus, .footer-branding a:focus {
  color:#E19B19;
  text-decoration:underline;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

/* Container and Layout */
.container {
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:0;
}

main { width:100%; }

.section {
  margin-bottom:60px;
  padding:40px 20px;
  background:linear-gradient(120deg, #F6F4EF 40%, #E7B75B12 100%);
  border-radius:18px;
  box-shadow:0 2px 12px 0 rgba(36, 109, 58, 0.04);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Content Wrapper for tight content inside section */
.content-wrapper {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  width:100%;
}

.text-image-section {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:60px;
}
@media(max-width:768px) {
  .text-image-section { flex-direction:column; gap:20px; }
  .container{padding:0 8px;}
}

.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  width:100%;
}
.card {
  background: #fff;
  border-radius:16px;
  box-shadow: 0 4px 18px 0 rgba(36,109,58,.10);
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow 0.22s,transform 0.16s;
}
.card:hover {
  box-shadow:0 8px 32px 0 rgba(36,109,58,0.18);
  transform:translateY(-5px) scale(1.017);
}
.card-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 20px;
  gap:14px;
}

.content-grid {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:space-between;
}
/* Features */
.features {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 12px 0 rgba(36,109,58,0.07);
  padding:22px 18px;
  min-width:220px;
  flex:1 1 240px;
  margin-bottom:20px;
}

@media(max-width:768px) {
  .content-grid, .features, .card-container {
    flex-direction:column;
    gap:16px;
  }
  .feature-item{flex:none;width:100%;min-width:0;}
}

ul, ol {
  list-style:none;
  margin-left:0;
}

.content-wrapper ul {
  margin-left:0;
  padding-left:0;
  margin-bottom:10px;
}
.content-wrapper ul li {
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
}
.content-wrapper ul li::before {
  content:'';
  position:absolute;
  left:0; top:10px;
  width:8px; height:8px;
  border-radius:100%;
  background:linear-gradient(120deg,#246D3A 60%, #E19B19 100%);
}
address {
  font-style:normal;
  color:#1A1A1A;
  font-size:1rem;
  margin-bottom:18px;
  line-height:1.7;
}

/* Header & Nav */
header {
  width:100%;
  background:linear-gradient(90deg, #246D3A 77%, #E19B19 100%);
  box-shadow:0 2px 24px 0 rgba(36,109,58,.07);
}
header .container {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:10px;
  padding-bottom:10px;
}
header img {
  height:42px;
  width:auto;
  margin-right:24px;
}
.main-nav {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  margin-left:30px;
}
.main-nav a {
  color:#fff;
  font-weight:600;
  font-family:'Open Sans',Arial,sans-serif;
  text-decoration:none;
  font-size:1rem;
  padding:8px 8px 6px 8px;
  border-radius:8px;
  transition:background 0.18s, color 0.15s;
}
.main-nav a:hover, .main-nav a.active {
  background:#fff4;
  color:#E19B19;
}

.cta-button {
  font-family:'Open Sans',Arial,sans-serif;
  background:linear-gradient(90deg,#E19B19 72%,#246D3A 110%);
  color:#fff;
  padding:10px 28px;
  font-size:1.1rem;
  font-weight:700;
  border:none;
  border-radius:26px;
  margin-left:24px;
  box-shadow:0 2px 10px 0 rgba(225,155,25,.07);
  cursor:pointer;
  transition:background 0.23s, box-shadow 0.17s, transform 0.14s;
  outline:none;
  display:inline-block;
}
.cta-button:hover, .cta-button:focus {
  background:linear-gradient(90deg,#246D3A 62%,#E19B19 100%);
  color:#fff;
  box-shadow:0 3px 16px 0 rgba(36,109,58,.15);
  transform:translateY(-2px) scale(1.03);
}

.mobile-menu-toggle {
  display:none;
}

@media(max-width:960px){
  .main-nav{gap:10px;margin-left:0;}
  header img {margin-right:0;}
}
@media(max-width:820px){
  .main-nav{gap:4px;}
  .cta-button{margin-left:6px;}
}
@media(max-width:690px){
  .main-nav, .cta-button {
    display:none;
  }
  .mobile-menu-toggle {
    display:inline-flex;
    background:none;
    border:none;
    font-size:2.1rem;
    color:#fff;
    padding:6px 6px 4px 6px;
    cursor:pointer;
    border-radius:7px;
    transition:background 0.16s;
    z-index:103;
    align-items:center;
  }
  .mobile-menu-toggle:focus, .mobile-menu-toggle:hover{
    background:#fff3;
  }
}

/* Mobile Menu Overlay */
.mobile-menu {
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  background:rgba(36,109,58,.92);
  z-index:110;
  transform:translateX(-100%);
  transition:transform 0.35s cubic-bezier(.7,.12,.33,1.01);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  padding:0;
  pointer-events:none;
}
.mobile-menu.open {
  transform:translateX(0);
  pointer-events:auto;
}
.mobile-menu-close {
  background:none;
  border:none;
  color:#fff;
  font-size:2rem;
  margin:20px 32px 0 0;
  padding:9px 13px;
  border-radius:50%;
  cursor:pointer;
  transition:background 0.18s;
  outline:none;
  z-index:119;
}
.mobile-menu-close:focus, .mobile-menu-close:hover {
  background:#E19B19;
  color:#fff;
}
.mobile-nav {
  width:100%;
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:0 42px;
}
.mobile-nav a {
  color:#fff;
  font-size:1.37rem;
  font-weight:600;
  padding:18px 0 15px 0;
  margin-bottom:2px;
  width:100%;
  border-radius:13px;
  transition:background 0.15s, color 0.13s;
  outline:none;
  display:block;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background:#fff2;
  color:#E19B19;
}
@media(min-width:691px){
  .mobile-menu, .mobile-menu-toggle {
    display:none!important;
  }
}

/* --- Testimonial Card --- */
.testimonial-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:20px;
  margin-bottom:20px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 4px 16px 0 rgba(36,109,58,.10);
  min-width:0;
  max-width:680px;
  width:100%;
  transition:box-shadow 0.2s;
  color:#246D3A;
}
.testimonial-card p {
  font-size:1.08rem;
  font-style:italic;
  color:#1a1a1a;
  text-align:center;
}
.testimonial-card strong {
  font-weight:700;
  color:#246D3A;
}
.testimonial-card span {
  color:#E19B19;
  font-size:1.21rem;
  margin-left:4px;
}
.testimonial-card:hover {
  box-shadow:0 8px 32px 0 rgba(36,109,58,.17);
}

/* Footer */
footer {
  background:#246D3A;
  padding:32px 0 20px 0;
  color:#fff;
}
footer .container {
  flex-direction:column;
  align-items:center;
  padding-top:0;
}
footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  margin-bottom:18px;
}
footer nav a {
  font-size:1rem;
  color:#fff8;
  font-family:'Open Sans',Arial,sans-serif;
  text-decoration:none;
  transition:color 0.17s;
}
footer nav a:hover,footer nav a:focus { color:#E19B19; }
.footer-branding {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:6px;
  font-size:1rem;
  color:#fffdd4;
  font-family:'Open Sans',Arial,sans-serif;
  opacity:0.95;
}
.footer-branding img {
  height:30px;
  width:auto;
}

/* Cookie Consent Banner */
.cookie-banner {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:120;
  background:linear-gradient(90deg,#e19b19 60%, #246D3A 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:18px 12px 16px 12px;
  box-shadow:0 -2px 16px 0 rgba(36,109,58,.17);
  font-size:1rem;
  animation:cookieBannerIn 0.65s cubic-bezier(.56,.34,.22,1) 1;
}
@keyframes cookieBannerIn {
  from{transform:translateY(90px); opacity:0;} to{transform:none; opacity:1;}
}
.cookie-banner__actions {
  display:flex;
  flex-direction:row;
  gap:18px;
  margin-top:6px;
}
.cookie-btn {
  background:#fff;
  color:#246D3A;
  font-size:1rem;
  font-weight:700;
  border:none;
  border-radius:24px;
  padding:7px 24px;
  margin:0;
  margin-right:2px;
  transition:background 0.17s,color 0.13s,box-shadow 0.13s,transform 0.13s;
  cursor:pointer;
  box-shadow:0 1px 6px 0 rgba(36,109,58,0.06);
}
.cookie-btn:hover, .cookie-btn:focus{
  background:#E19B19;
  color:#fff;
  transform:translateY(-2px) scale(1.06);
}
.cookie-btn--secondary{
  background:#246D3A;
  color:#fff;
  border:1.5px solid #fff2;
}
.cookie-btn--secondary:hover,.cookie-btn--secondary:focus{
  background:#E7B75B;
  color:#246D3A;
}

/* Cookie Modal Styles */
.cookie-modal {
  position:fixed;
  z-index:150;
  left:0; right:0; top:0; bottom:0;
  background:rgba(36,109,58,0.32);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.27s;
}
.cookie-modal.open {
  opacity:1;
  pointer-events:auto;
}
.cookie-modal__content {
  background:#fff;
  padding:38px 25px 30px 25px;
  border-radius:24px;
  box-shadow:0 4px 32px 0 rgba(36,109,58,0.17);
  min-width:320px; max-width:98vw;
  display:flex;
  flex-direction:column;
  gap:16px;
  animation:cookieModalIn 0.44s cubic-bezier(.52,.14,.24,1) 1;
}
@keyframes cookieModalIn {
  from{transform:translateY(80px) scale(.98); opacity:0;} to{transform:none; opacity:1;}
}
.cookie-modal__header {
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:700;
  color:#246D3A;
  margin-bottom:10px;
}
.cookie-modal__close {
  position:absolute;
  right:18px; top:17px;
  background:transparent;
  border:none;
  font-size:2rem;
  color:#246D3A;
  cursor:pointer;
  border-radius:50%;
  padding:4px 9px;
  transition:background 0.15s;
  z-index:200;
}
.cookie-modal__close:hover,.cookie-modal__close:focus{
  background:#e19b1955;
}
.cookie-category {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:7px;
}
.cookie-category__label {
  font-weight:600;
  color:#246D3A;
  font-size:1rem;
}
.cookie-toggle {
  appearance:none;
  width:38px; height:20px;
  background:#e7b75b55;
  border-radius:12px;
  position:relative;
  transition:background 0.24s;
  outline:none;
  margin-right:2px;
  cursor:pointer;
}
.cookie-toggle:checked {
  background:#E19B19;
}
.cookie-toggle::after {
  content:'';
  position:absolute;
  top:2px; left:3px;
  width:16px; height:16px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 2px 0 rgba(36,109,58,0.2);
  transition:left 0.18s;
}
.cookie-toggle:checked::after{
  left:18px;
}
.cookie-category__desc {
  font-size:0.97rem;
  color:#666;
}
.cookie-category--essential .cookie-toggle {
  background:#246D3A88;
  pointer-events:none;
}
.cookie-category--essential .cookie-category__label::after{
  content:' (immer aktiv)';
  font-size:0.85em;
  font-weight:400;
  color:#aaa;
  margin-left:6px;
}
.cookie-modal__footer {
  display:flex;
  gap:16px;
  justify-content:flex-end;
  margin-top:14px;
}

/* Responsive Typography & Spacing */
@media (max-width:500px){
  h1{font-size:1.4rem;}
  h2{font-size:1.1rem;}
  .container{padding:0 3vw;}
  .section{padding:22px 6px;margin-bottom:30px;}
  .footer-branding img{height:19px;}
  .card-content{padding:13px 8px;}
}

/* Animations for hover/focus/micro-interaction */
button, .cta-button, .cookie-btn {
  transition:background 0.19s, color 0.13s, box-shadow 0.14s, transform 0.15s;
}

/* Misc */
::-webkit-input-placeholder { color:#888; }
::-moz-placeholder { color:#888; }
:-ms-input-placeholder { color:#888; }
::placeholder { color:#888; }

/* Utility Classes */
.d-none{display:none!important;}

/* Prevent overlaps */
.section,.card-container,.card,.feature-item,.testimonial-card,.card-content {
  margin-right:0;
  margin-left:0;
}
.section:not(:last-child), .card-container:not(:last-child), .feature-item:not(:last-child), .testimonial-card:not(:last-child), .card:not(:last-child) {
  margin-bottom:20px;
}

/* Improved vertical spacing for multiple testimonial-cards */
.content-wrapper > .testimonial-card:not(:last-child){
  margin-bottom:24px;
}

/* Add white shadow on top of first section (e.g. homepage) */
main > section:first-child {
  margin-top:30px;
  box-shadow:0 8px 54px 0 rgba(36,109,58,0.09);
}
@media(max-width:600px){
  main > section:first-child{margin-top:10px;}
}

/* Accessibility improvements */
a:focus, button:focus, .cta-button:focus, .cookie-btn:focus {
  outline:2.5px solid #E19B19aa;
  outline-offset:2.5px;
}

/* Forms (generic) */
input, textarea, select{
  font-family:inherit;
  font-size:1rem;
  border:1px solid #ddd;
  border-radius:7px;
  padding:7px 11px;
  margin-bottom:13px;
  width:100%;
  background:#faf9f7;
  transition:border 0.17s;
}
input:focus, textarea:focus, select:focus{
  border:1.5px solid #246D3A;
}

/* Remove grid/column layout */
/* (Enforced: no display:grid, columns, column-gap, etc.) */