/* =============================================================
   Kante & Kelle – style.css
   Nature_Organic theme: earth tones, organic shapes, natural textures, green accents
   Mobile-first, flexbox-only layouts, high contrast for testimonials
   ============================================================= */

/* ----------------------
   0) CSS Reset / Normalize
   ---------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { margin: 0 0 16px 24px; padding: 0; }
button { font: inherit; border: 0; background: transparent; padding: 0; cursor: pointer; }
:focus { outline: 2px solid #2F6D56; outline-offset: 2px; }

/* ----------------------
   1) Theme Variables & Fallbacks
   ---------------------- */
:root {
  /* Brand */
  --kk-primary: #1F2A37; /* charcoal */
  --kk-secondary: #C76D37; /* burnt sienna */
  --kk-accent: #F4F1EA; /* warm cream */
  /* Nature Organic */
  --kk-green: #2F6D56; /* forest green */
  --kk-green-600: #275B47;
  --kk-sage: #DCE7E1; /* soft sage tint */
  --kk-earth: #8B5E3C; /* earthy brown */
  --kk-sand: #EAE3D7; /* sandy neutral */
  --kk-white: #FFFFFF;
  --kk-text: #1F2A37; /* dark text */
  --kk-muted: #5A6B74; /* muted slate */
  --kk-border: #D8D2C6; /* warm light border */
  --kk-shadow: rgba(19, 33, 24, 0.08);
}

/* Fallbacks where critical */
body { background: #F4F1EA; color: #1F2A37; }

/* ----------------------
   2) Typography
   ---------------------- */
body {
  font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

h1, h2, h3, h4 { 
  font-family: Montserrat, "Segoe UI", Roboto, Arial, sans-serif; 
  margin: 0 0 16px; 
  line-height: 1.25; 
  color: var(--kk-primary);
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

p { margin: 0 0 14px; color: var(--kk-text); }
.subheadline { color: var(--kk-muted); font-size: 18px; margin-top: 8px; }
strong { color: var(--kk-primary); }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
}

/* ----------------------
   3) Layout Primitives (Flex-only)
   ---------------------- */
.container {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding: 0 16px; 
  width: 100%;
}
.content-wrapper {
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  width: 100%; 
  max-width: 1080px; 
}
.text-section { display: flex; flex-direction: column; gap: 12px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Mandatory spacing 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; }

/* Apply section rhythm to all sections */
main > section { margin-bottom: 60px; padding: 40px 20px; }

/* Organic card look */
.card, .testimonial-card {
  background: var(--kk-white);
  border: 1px solid var(--kk-border);
  border-radius: 16px; /* organic curve */
  box-shadow: 0 8px 24px var(--kk-shadow);
}

/* Lists */
ul li, ol li { margin: 0 0 8px; }
ul li::marker { color: var(--kk-green); }
ol { padding-left: 20px; }

/* Links */
a { color: var(--kk-green); transition: color .2s ease, background-color .2s ease; }
a:hover { color: var(--kk-green-600); }

/* ----------------------
   4) Header & Navigation
   ---------------------- */
header {
  background: var(--kk-white);
  border-bottom: 1px solid var(--kk-border);
  position: sticky; top: 0; z-index: 50;
}
header .container {
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; 
  gap: 16px; 
  padding: 12px 16px;
}
.logo { display: flex; align-items: center; }
.logo img { width: 160px; height: auto; }

.main-nav { 
  display: none; 
  align-items: center; 
  gap: 16px; 
}
.main-nav a { 
  color: var(--kk-primary); 
  padding: 8px 10px; 
  border-radius: 10px; 
  transition: background-color .2s ease, color .2s ease;
}
.main-nav a:hover { background: var(--kk-accent); color: var(--kk-primary); }
.main-nav a[aria-current="page"] { color: var(--kk-secondary); font-weight: 700; }

.main-nav .cta { 
  background: var(--kk-green); 
  color: var(--kk-white); 
  padding: 10px 14px; 
  border-radius: 999px; 
}
.main-nav .cta:hover { background: var(--kk-green-600); color: white !important;}

.mobile-menu-toggle {
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 40px; height: 40px; 
  border-radius: 12px; 
  background: var(--kk-accent); 
  color: var(--kk-primary);
}
.mobile-menu-toggle:hover { background: var(--kk-sand); }

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed; inset: 0; 
  display: flex; flex-direction: column; 
  background: var(--kk-white); 
  transform: translateX(100%);
  transition: transform .35s ease; 
  z-index: 120; 
  border-left: 1px solid var(--kk-border);
}
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close {
  position: absolute; top: 12px; right: 12px; 
  width: 40px; height: 40px; 
  border-radius: 12px; 
  background: var(--kk-accent); color: var(--kk-primary);
}
.mobile-nav { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  padding: 64px 20px 24px; 
}
.mobile-nav a {
  padding: 12px 14px; 
  border-radius: 12px; 
  background: var(--kk-accent); 
  color: var(--kk-primary);
}
.mobile-nav a:hover { background: var(--kk-sand); }
.mobile-nav a[aria-current="page"] { background: var(--kk-green); color: var(--kk-white); }

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

/* ----------------------
   5) Hero & Common Sections
   ---------------------- */
/* Give first section a subtle organic background band */
main > section:first-of-type {
  background: var(--kk-sand);
  border-bottom: 1px solid var(--kk-border);
  border-top-left-radius: 0; 
  border-top-right-radius: 0; 
}

/* Trust badges */
.trust-badges { 
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; 
}
.badge {
  display: flex; align-items: center; gap: 8px; 
  padding: 8px 12px; 
  background: var(--kk-accent); 
  border: 1px solid var(--kk-border); 
  border-radius: 999px; 
}
.badge img { width: 18px; height: 18px; }
.badge span { font-size: 14px; color: var(--kk-primary); }

/* Highlight text rows with icons */
.text-section img[alt^="Telefon"],
.text-section img[alt^="E-Mail"],
.text-section img[alt^="Zertifikat"],
.text-section img[alt^="Garantie"] {
  width: 18px; height: 18px; display: inline-flex; vertical-align: text-bottom; margin: 0 6px 0 0;
}

/* Text-Image section responsive alignment rule */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: flex-start; }
}

/* ----------------------
   6) Buttons
   ---------------------- */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  padding: 12px 18px; 
  border-radius: 999px; 
  font-weight: 700; 
  transition: background-color .25s ease, color .25s ease, transform .06s ease; 
  border: 1px solid transparent; 
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--kk-green); 
  color: var(--kk-white); 
}
.btn-primary:hover { background: var(--kk-green-600); color: white !important;}

.btn-secondary {
  background: var(--kk-accent); 
  color: var(--kk-primary); 
  border-color: var(--kk-border);
}
.btn-secondary:hover { background: var(--kk-sand); }

/* Inline CTA in nav already styled via .main-nav .cta */

/* ----------------------
   7) Testimonials (High contrast on light background)
   ---------------------- */
.testimonial-card { 
  background: var(--kk-white); 
  color: var(--kk-text); 
  border: 1px solid var(--kk-border); 
  border-radius: 16px; 
  box-shadow: 0 10px 28px var(--kk-shadow);
}
.testimonial-card p { margin: 0; }
.testimonial-card + .testimonial-card { margin-top: 12px; }

/* ----------------------
   8) Footer
   ---------------------- */
footer {
  background: var(--kk-primary); 
  color: var(--kk-accent); 
  padding-top: 24px; 
  border-top: 4px solid var(--kk-green);
}
footer .container { align-items: center; }
footer .content-wrapper { 
  flex-direction: column; 
  gap: 20px; 
}
footer a { color: var(--kk-sage); }
footer a:hover { color: var(--kk-white); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.brand strong { font-size: 18px; color: var(--kk-white); }

@media (min-width: 992px) {
  footer .content-wrapper { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

/* ----------------------
   9) Forms & Inputs (generic)
   ---------------------- */
input, select, textarea {
  font: inherit; 
  background: var(--kk-white); 
  border: 1px solid var(--kk-border); 
  border-radius: 12px; 
  padding: 10px 12px; 
  color: var(--kk-text);
}
input:focus, select:focus, textarea:focus { border-color: var(--kk-green); box-shadow: 0 0 0 3px rgba(47,109,86,.15); }

/* ----------------------
   10) Utility & Content Styling
   ---------------------- */
/* Content grid helpers (flex-only) */
.content-grid > * { flex: 1 1 280px; min-width: 240px; }
.card-container > .card { flex: 1 1 300px; min-width: 260px; }

/* Organic section dividers */
main > section {
  background: var(--kk-accent);
  border: 1px solid var(--kk-border);
  border-radius: 24px; 
  box-shadow: 0 12px 32px var(--kk-shadow);
}
/* Alternate emphasis for some sections by heading keywords */
section[aria-labelledby^="stimmen"],
section[aria-labelledby^="faq"],
section[aria-labelledby^="zahlen"],
section[aria-labelledby^="cases"],
section[aria-labelledby^="typen"] {
  background: var(--kk-white);
}

/* CTA rows inside text */
.cta-row p { margin: 0; }

/* Accessibility: better focus ring for dark footer links */
footer a:focus { outline-color: #BBD0C9; }

/* ----------------------
   11) Mobile Menu & Header Spacing adjust on large screens
   ---------------------- */
@media (min-width: 768px) {
  header .container { padding: 16px 24px; }
}
@media (min-width: 1200px) {
  .content-wrapper { max-width: 1200px; }
}

/* ----------------------
   12) Cookie Consent Banner & Modal (flex-only)
   ---------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 12px; 
  background: var(--kk-white); 
  color: var(--kk-text); 
  border-top: 2px solid var(--kk-green); 
  box-shadow: 0 -10px 30px var(--kk-shadow);
  padding: 16px; 
  z-index: 140; 
  transform: translateY(100%);
  transition: transform .3s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 8px; }
.cookie-banner .cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--kk-green); color: var(--kk-white); border-radius: 999px; padding: 10px 16px; }
.cookie-banner .btn-accept:hover { background: var(--kk-green-600); }
.cookie-banner .btn-reject { background: var(--kk-accent); color: var(--kk-primary); border: 1px solid var(--kk-border); border-radius: 999px; padding: 10px 16px; }
.cookie-banner .btn-settings { background: var(--kk-white); color: var(--kk-primary); border: 1px solid var(--kk-border); border-radius: 999px; padding: 10px 16px; }

@media (min-width: 768px) {
  .cookie-banner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Cookie Modal Overlay */
.cookie-modal-overlay {
  position: fixed; inset: 0; 
  background: rgba(19, 33, 24, 0.5); 
  display: none; 
  align-items: center; justify-content: center; 
  z-index: 150; 
}
.cookie-modal-overlay.is-visible { display: flex; }

.cookie-modal {
  display: flex; flex-direction: column; gap: 16px; 
  width: 100%; max-width: 640px; 
  background: var(--kk-white); 
  border: 1px solid var(--kk-border); 
  border-radius: 20px; 
  box-shadow: 0 20px 60px var(--kk-shadow);
  padding: 20px;
}
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-modal .cookie-group { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--kk-accent); border: 1px solid var(--kk-border); border-radius: 14px; }

/* Toggle switch (checkbox) */
.cookie-toggle { display: flex; align-items: center; gap: 10px; }
.cookie-toggle input[type="checkbox"] {
  appearance: none; width: 38px; height: 22px; border-radius: 999px; 
  background: #CBD5CF; position: relative; transition: background .2s ease; border: 1px solid var(--kk-border);
}
.cookie-toggle input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--kk-white); transition: transform .2s ease;
}
.cookie-toggle input[type="checkbox"]:checked { background: var(--kk-green); border-color: var(--kk-green); }
.cookie-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); }

/* ----------------------
   13) Micro-interactions
   ---------------------- */
/* Soft hover lift for cards */
.card:hover, .testimonial-card:hover, main > section:hover { 
  box-shadow: 0 14px 40px var(--kk-shadow); 
  transition: box-shadow .25s ease; 
}

/* Subtle underline grow on links inside text sections */
.text-section a { position: relative; }
.text-section a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; right: 0; height: 2px; background: var(--kk-green); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.text-section a:hover::after { transform: scaleX(1); }

/* ----------------------
   14) Page-specific nuances
   ---------------------- */
/* Hero headings breathing room */
section[aria-labelledby^="hero"] .content-wrapper { gap: 16px; }

/* Zahlen & Fakten lists as spaced badges */
section[aria-labelledby^="zahlen"] .text-section ul { 
  display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; 
}
section[aria-labelledby^="zahlen"] .text-section li { 
  padding: 10px 14px; border: 1px solid var(--kk-border); border-radius: 999px; background: var(--kk-white); 
}

/* Footer fine spacing */
footer .text-section p { margin-bottom: 8px; }

/* ----------------------
   15) Responsive alignment rules (global)
   ---------------------- */
@media (max-width: 768px) {
  /* Already using column-first layouts; ensure text-image sections stack */
  .text-image-section { flex-direction: column; }
}

/* ----------------------
   16) Prevent overlaps & ensure gaps
   ---------------------- */
main > section + section { margin-top: 0; } /* already spaced by margin-bottom */
.content-wrapper > * + * { margin-top: 0; } /* gaps managed by flex gap */

/* Ensure adequate touch targets */
nav a, .mobile-nav a, .btn { min-height: 40px; }

/* ----------------------
   17) Organic accents (decorative, non-intrusive)
   ---------------------- */
/* Decorative corner seed for sections */
main > section { position: relative; overflow: hidden; }
main > section::before {
  content: ""; position: absolute; z-index: 0; 
  width: 180px; height: 180px; 
  right: -60px; top: -60px; 
  background: rgba(47, 109, 86, 0.06); 
  border-radius: 50%; 
}
main > section > .container, main > section > .container > .content-wrapper { position: relative; z-index: 1; }

/* ----------------------
   18) Accessibility & Print
   ---------------------- */
[aria-current="page"] { font-weight: 700; }
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  main > section { box-shadow: none; border: 0; background: #fff; }
}