/* =========================================================
   CSS Reset & Base Normalize
========================================================= */
html,*{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}ul,ol{list-style:none}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,textarea,select{font:inherit;outline:none;background:none;border:none;padding:0;margin:0;}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'Roboto',Arial,sans-serif;
  color:#222222;
  background:#fff;
  min-height:100vh;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* =========================================================
   Brand Colors & Typography
========================================================= */
:root {
  --color-primary: #32425C;
  --color-secondary: #E8E3DF;
  --color-background: #FFFFFF;
  --color-accent: #A87842;
  --color-accent-strong: #8C5200;
  --color-shade: #F7F6F5;
  --color-border: #E0DED9;
  --color-text: #222222;
  --color-muted: #767676;

  --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-body: 'Roboto', Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color:var(--color-primary);
  letter-spacing:-0.01em;
  font-weight:600;
  line-height:1.15;
}
h1 {font-size:2.5rem;margin-bottom:16px;line-height:1.13;letter-spacing:-0.02em;}
h2 {font-size:2rem;margin-bottom:14px;}
h3 {font-size:1.375rem;margin-bottom:10px;}
h4 {font-size:1.125rem;}
p,li,blockquote {font-family: var(--font-body);font-size:1rem; margin-bottom:12px;}
blockquote {font-style:italic;color:var(--color-primary);border-left:4px solid var(--color-accent);padding-left:14px; background:var(--color-shade); margin-bottom:10px;}

strong{font-weight:600;color:var(--color-accent-strong);}
a{color:var(--color-accent);transition:color .2s;}
a:focus,a:hover{color:var(--color-primary);outline:none;}

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

body>header, body>footer {
  background: var(--color-background);
  border-bottom:1px solid var(--color-border);
}
body>footer{
  border-top:1px solid var(--color-border);
  border-bottom: none;
}
header .container, footer .container{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

main {
  flex:1 0 auto;
  background:var(--color-background);
  min-height:50vh;
}

.section, section {
  margin-bottom:60px;
  padding:40px 20px;
}

/* Wrapper for vertical stack and max-width */
.content-wrapper {
  width:100%;
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.text-section {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

/* =========================================================
   Navigation & Header
========================================================= */
header .container {
  min-height:76px;
  padding-top:10px;
  padding-bottom:10px;
}
header img[alt="GarenOrtho Möbelmanufaktur"] {
  height:38px;
  width:auto;
  margin-right:36px;
}
header nav {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  align-items:center;
}
header nav a {
  color:var(--color-text);
  font-size:1rem;
  font-weight:500;
  padding:6px 2px;
  border-radius:4px;
  transition:background .18s, color .18s;
}
header nav a:focus, header nav a:hover {
  background:var(--color-shade);
  color:var(--color-accent-strong);
}
.cta-primary {
  font-family:var(--font-display);
  background:var(--color-primary);
  color:#fff;
  padding:11px 34px;
  border-radius:24px;
  font-size:1.08rem;
  font-weight:600;
  transition:background .25s, box-shadow .18s;
  box-shadow:0 2px 12px rgba(50,58,82,0.08);
  border:none;
  cursor:pointer;
  letter-spacing:0;
  margin-left:28px;
  display:inline-block;
}
.cta-primary:hover, .cta-primary:focus {
  background:var(--color-accent-strong);
  color:#fff;
  box-shadow:0 4px 24px rgba(50,58,82,0.14);
}

/* ==========================================
   Mobile Menu Styles
========================================== */
.mobile-menu-toggle {
  display:none;
  background:none;
  border:none;
  color:var(--color-primary);
  font-size:2rem;
  cursor:pointer;
  margin-left:12px;
  z-index:1101;
}
.mobile-menu {
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100vw;
  height:100vh;
  background:rgba(255,255,255,.98);
  box-shadow:0 4px 40px rgba(50,66,92,.10);
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:34px 24px 18px 24px;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.65,.05,.36,1), opacity .25s;
  opacity:0;
  pointer-events:none;
}
/* Shown state toggled by JS: .mobile-menu.active */
.mobile-menu.active {
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.mobile-menu-close {
  background:none;
  border:none;
  color:var(--color-primary);
  font-size:2.2rem;
  align-self:flex-end;
  margin-bottom:12px;
  cursor:pointer;
  padding:6px;
  line-height:1;
  border-radius:50%;
  transition:background .18s;
}
.mobile-menu-close:focus, .mobile-menu-close:hover {
  background:var(--color-shade);
  color:var(--color-accent-strong);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:12px;
  width:100%;
}
.mobile-nav a {
  color:var(--color-text);
  font-size:1.1rem;
  padding:13px 4px;
  border-radius:6px;
  font-weight:500;
  transition:background .22s, color .22s;
  min-width:160px;
}
.mobile-nav a:focus,.mobile-nav a:hover{
  background:var(--color-shade);
  color:var(--color-accent-strong);
}
/* Hide main nav and show burger on mobile */
@media (max-width: 900px) {
  header .container {
    flex-direction:row;
    flex-wrap:wrap;
  }
  header nav, .cta-primary {
    display:none;
  }
  .mobile-menu-toggle {
    display:inline-block;
  }
}

/* ==========================================
   Footer
========================================== */
footer .container {
  flex-direction:row;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  padding-bottom:24px;
}
footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:0.92rem;
  color:var(--color-muted);
  align-items:center;
}
footer nav a {
  color:var(--color-muted);
  font-family:var(--font-body);
  font-size:1rem;
  transition:color .18s;
}
footer nav a:focus,footer nav a:hover{color:var(--color-primary);}
footer .text-section {
  font-size:0.98rem;
  color:var(--color-muted);
}
footer .social-links {
  display:flex;
  gap:10px;
}
footer .social-links a img{
  width:24px;
  height:24px;
  opacity:0.80;
  transition:opacity .18s, filter .18s;
}
footer .social-links a:focus img, footer .social-links a:hover img{
  opacity:1;filter:brightness(1.2);
}

/* =========================================================
   Feature Grid, Cards, Testimonials, Flexbox Layouts
========================================================= */
.feature-grid {
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  margin-top:12px;
  margin-bottom:0px;
}
.feature-grid>div {
  background:var(--color-background);
  border-radius:18px;
  box-shadow:0 2px 16px 0 rgba(50,66,92,0.08);
  border:1px solid var(--color-border);
  flex:1 1 210px;
  min-width:220px;
  max-width:310px;
  padding:26px 20px 20px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px;
  transition:box-shadow .22s, transform .19s;
}
.feature-grid>div:hover,
.feature-grid>div:focus-within {
  box-shadow:0 8px 32px rgba(50,66,92,0.13);
  transform:translateY(-3px) scale(1.016);
}
.feature-grid img {
  width:36px;
  height:36px;
  margin-bottom:4px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background:var(--color-background);
  border-radius:12px;
  box-shadow:0 2px 14px 0 rgba(50,66,92,.10);
  border:1px solid var(--color-border);
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  min-width:210px;
  max-width:370px;
  margin-bottom:20px;
  position:relative;
  transition:box-shadow .20s,transform .18s;
}
.card:hover,.card:focus-within{
  box-shadow:0 6px 24px rgba(50,66,92,0.13);
  transform:scale(1.014);
}

.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;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  background:var(--color-shade);
  border-radius:18px;
  box-shadow:0 2px 14px rgba(50,66,92,.08);
  border:1px solid var(--color-border);
  padding:20px 26px;
  margin-bottom:20px;
  max-width:610px;
  transition:box-shadow .20s;
}
.testimonial-card blockquote{
  color:var(--color-primary);
  font-style:italic;
  font-size:1.13rem;
}
.testimonial-card p strong {
  color:var(--color-accent-strong);
  font-size:1rem;
  font-family:var(--font-display);
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  margin-bottom:20px;
}

/* =========================================================
   Generic List Styles
========================================================= */
ul, ol {
  padding-left:23px;
  margin-bottom:10px;
}
ul li, ol li {
  margin-bottom:7px;
  position:relative;
  color:var(--color-text);
  font-size:1rem;
}
ul li::before {
  content:'\2022';
  color:var(--color-accent);
  font-weight:bold;
  display:inline-block;
  margin-right:10px;
  font-size:1em;
  position:relative;
  left:-5px;
}
ol li::before {
  content:counter(li) '.';
  color:var(--color-primary);
  margin-right:8px;
}
ol {
  counter-reset:li;
}
ol li {
  counter-increment:li;
}

/* =========================================================
   Button Styles
========================================================= */
button, .btn {
  font-family:var(--font-display);
  background:var(--color-primary);
  color:#fff;
  padding:9px 28px;
  border-radius:24px;
  font-size:1.02rem;
  font-weight:500;
  transition:background .20s, box-shadow .19s;
  border:none;
  cursor:pointer;
  box-shadow:0 1px 8px rgba(50,58,82,.06);
  letter-spacing:0;
  display:inline-block;
}
button:hover, button:focus,
.btn:hover, .btn:focus {
  background:var(--color-accent-strong);
  color:#fff;
  box-shadow:0 2px 14px rgba(50,66,92,0.15);
}

/* Secondary/ghost button */
.btn-secondary, .cookie-modal .btn-secondary {
  background:transparent;
  color:var(--color-primary);
  border: 1px solid var(--color-primary);
  font-weight:500;
  transition: background .17s, color .17s, border .17s;
}
.btn-secondary:hover,.btn-secondary:focus{
  background:var(--color-shade);
  color:var(--color-accent-strong);
  border-color:var(--color-accent-strong);
}

/* Accent button */
.btn-accent {
  background:var(--color-accent-strong);
  color:#fff;
}
.btn-accent:hover, .btn-accent:focus {
  background:var(--color-primary);
  color:#fff;
}

/* ==========================================
   Miscellaneous minimal UI
========================================== */
input, textarea {
  font-size:1rem;
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:7px;
  background:var(--color-shade);
  margin-bottom:14px;
  color:var(--color-text);
  transition:box-shadow .13s;
  width:100%;
}
input:focus,textarea:focus {
  border-color:var(--color-primary);
  box-shadow:0 2px 14px 0 rgba(50,66,92,.08);
}

/* For paragraphs inside text-section/content-wrapper */
.text-section p,
.content-wrapper p {
  color:var(--color-text);
  font-size:1rem;
  margin-bottom:10px;
}

/* ==========================================
   Responsive Media Queries (Mobile-first)
========================================== */
@media (max-width: 1024px){
  .container {
    max-width:98vw;
    padding-left:10px;
    padding-right:10px;
  }
  .feature-grid {
    gap:18px;
  }
  .feature-grid>div {
    min-width:170px;
    padding:16px 10px 14px 10px;
    font-size:0.97rem;
  }
}

@media (max-width: 768px){
  .container, 
  header .container, footer .container {
    flex-direction:column;
    gap:18px;
    align-items:flex-start;
    justify-content:flex-start;
  }
  .section, section {
    padding:30px 6vw;
    margin-bottom:34px;
  }
  h1{font-size:2rem;}
  h2{font-size:1.35rem;}
  .feature-grid, .card-container, .content-grid, .text-image-section {
    flex-direction:column;
    gap:18px;
    align-items:stretch;
  }
  .feature-grid>div, .card {
    max-width:100%;
    min-width:0;
    width:100%;
  }
  .testimonial-card{
    max-width:100%;
    min-width:0;
  }
}
@media (max-width: 480px){
  .section, section {
    padding:18px 2vw;
    margin-bottom:20px;
  }
  .content-wrapper, .text-section {
    gap:7px;
    padding:0;
  }
  h1{font-size:1.25rem;}
  h2{font-size:1.05rem;}
}

/* For text-image-section alignment on mobile */
@media (max-width: 768px) {
  .text-image-section {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
}

/* ================= Cookie Consent Banner ================ */
.cookie-banner {
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:10000;
  background:#fff;
  border-top:1px solid var(--color-border);
  box-shadow:0 -2px 18px rgba(50,66,92,0.1);
  padding:22px 20px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:24px;
  justify-content:center;
  min-height:0;
  transition:transform .38s cubic-bezier(.65,.05,.36,1), opacity .22s;
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
}
.cookie-banner.active {
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.cookie-banner-text {
  color:var(--color-text);
  font-size:1.02rem;
  max-width:480px;
  margin-right:16px;
}
.cookie-banner .cookie-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.cookie-banner button {
  padding:8px 26px;
  font-size:1rem;
  border-radius:21px;
  font-weight:500;
  min-width:120px;
}
.cookie-banner .btn-secondary {
  color:var(--color-primary);
  background:#fff;
  border:1px solid var(--color-primary);
}
.cookie-banner .btn-secondary:hover,.cookie-banner .btn-secondary:focus{border-color:var(--color-accent-strong);background:var(--color-shade);}

/* ================= Cookie Modal =================== */
.cookie-modal-overlay {
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  z-index:12010;
  background:rgba(60, 62, 75, 0.20);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s;
}
.cookie-modal-overlay.active{
  opacity:1;
  pointer-events:auto;
}
.cookie-modal {
  background:#fff;
  border-radius:22px;
  box-shadow:0 6px 36px rgba(50,66,92,0.16);
  max-width:98vw;
  min-width:320px;
  max-width:408px;
  padding:28px 28px 18px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  position:relative;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .23s, transform .24s;
}
.cookie-modal.active{
  opacity:1;
  transform:translateY(0);
}
.cookie-modal h2 {
  font-size:1.3rem;
  color:var(--color-primary);
  margin-bottom:6px;
}
.cookie-modal .cookie-category {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:13px;
  margin-bottom:11px;
}
.cookie-modal .cookie-category label{
  font-size:1rem;
  color:var(--color-primary);
  font-weight:500;
}
.cookie-modal .cookie-category input[type=checkbox], 
.cookie-modal .cookie-category input[type=radio]{
  accent-color:var(--color-primary);
  width:19px;height:19px;cursor:pointer;
}
.cookie-modal .cookie-category .cookie-essential {
  background:var(--color-shade);
  color:var(--color-accent-strong);
  border-radius:9px;
  padding:2px 10px;
  font-size:0.88rem;
  font-weight:500;
  margin-left:8px;
}
.cookie-modal .cookie-actions {
  display:flex;
  align-items:center;
  gap:14px;
}
.cookie-modal .btn, .cookie-modal .btn-secondary {
  font-size:1rem;
  min-width:110px;
  padding:8px 18px;
  margin-top:9px;
}
.cookie-modal-close {
  position:absolute;
  top:14px;right:14px;
  background:none;
  border:none;
  color:var(--color-primary);
  font-size:1.7rem;
  cursor:pointer;
  transition:background .11s;
  border-radius:50%;
  padding:6px;
}
.cookie-modal-close:focus,.cookie-modal-close:hover{background:var(--color-shade);color:var(--color-accent-strong);}

@media (max-width: 580px){
  .cookie-banner {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:20px 10px;
  }
  .cookie-banner-text {margin-right:0;}
  .cookie-modal {padding:14px 8px 12px 12px;}
}

/* ============= Animations ============= */
@keyframes fadeInUpMenu{
  0% {transform:translateY(80px);opacity:0;}
  100% {transform:translateY(0);opacity:1;}
}
.mobile-menu.active {
  animation: fadeInUpMenu .23s ease;
}

@keyframes slideDownBanner {
  0% {transform:translateY(100%);opacity:0;}
  100% {transform:translateY(0);opacity:1;}
}
.cookie-banner.active {animation:slideDownBanner .34s cubic-bezier(.59,.01,.25,1);}


/* ======= Accessibility & Selection ======= */
::selection{background:var(--color-secondary);color:var(--color-primary);}
:focus{outline:2px solid var(--color-accent-strong);outline-offset:2px;}

/* ============ Utility classes ============= */
.mb-0{margin-bottom:0!important;}
.mt-0{margin-top:0!important;}
.mt-2{margin-top:2px!important;}
.mb-2{margin-bottom:2px!important;}

/* =========== Hide elements visually ============= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ==========================================
   End of Style Definitions
========================================== */