/* =====================================
   Stadtglanz Immobilienkurator — style.css
   Design style: nature_organic (earth tones, organic shapes, green accents)
   Mobile-first, flexbox-only layouts, no CSS Grid/Columns
   ===================================== */

/* =====================
   0) CSS RESET & NORMALIZE
   ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { padding-left: 1.25rem; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
:focus { outline: none; }

/* =====================
   1) THEME TOKENS (Nature Organic)
   ===================== */
:root {
  /* Brand core */
  --color-ink: #1F2A37;          /* Primary text (deep slate) */
  --color-forest: #2C7A7B;       /* Secondary / action (teal green) */
  --color-accent: #F5F7FA;       /* Accent light */
  /* Nature organic palette */
  --color-sand: #F3F0E7;         /* Warm sand background */
  --color-alabaster: #FCFBF8;    /* Very soft off-white */
  --color-leaf: #3E8467;         /* Darker green for states */
  --color-fern: #79A68A;         /* Muted green accent */
  --color-clay: #A7744A;         /* Clay accent for subtle highlights */
  --color-bark: #6B4E3D;         /* Earth/bark for accents */
  --color-stroke: #E7E1D6;       /* Card borders on light bg */
  --color-muted: #6B7280;        /* Muted text */
  --shadow-soft: 0 2px 8px rgba(31,42,55,0.06);
  --shadow-medium: 0 6px 18px rgba(31,42,55,0.10);

  /* Typography */
  --font-display: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: Verdana, Geneva, Tahoma, sans-serif;

  /* Spacing scale */
  --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-30: 30px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-60: 60px; --sp-80: 80px;

  /* Radii for organic shapes */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 9999px;
  --transition: 220ms ease;
}

/* =====================
   2) BASE
   ===================== */
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-alabaster);
  line-height: 1.6;
}

.container {
  /* Layout container uses flex (flex-only requirement) */
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-20);
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--sp-20);
}

.content-wrapper {
  display: flex; flex-direction: column; gap: var(--sp-20);
}

section { margin-bottom: var(--sp-60); }

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

/* Typography scale */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; }
h1 { font-size: 32px; letter-spacing: 0.2px; }
h2 { font-size: 24px; margin-bottom: var(--sp-12); }
h3 { font-size: 18px; margin-bottom: var(--sp-8); }
p { font-size: 16px; color: var(--color-ink); }
.subheadline { color: var(--color-muted); font-size: 16px; }

@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  p, .subheadline { font-size: 17px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 52px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
  p, .subheadline { font-size: 18px; }
}

/* Lists */
ul, ol { display: block; margin: var(--sp-12) 0 var(--sp-12) var(--sp-20); }
li { margin-bottom: var(--sp-8); }

/* Links */
a { color: var(--color-forest); text-decoration: none; transition: color var(--transition), background-color var(--transition), box-shadow var(--transition); }
a:hover { color: var(--color-leaf); }
a:focus-visible { outline: 2px solid var(--color-fern); outline-offset: 2px; border-radius: 6px; }

/* =====================
   3) HEADER & NAVIGATION
   ===================== */
.site-header { position: sticky; top: 0; z-index: 1000; background: #FFFFFF; box-shadow: 0 1px 6px rgba(31,42,55,0.06); }
.site-header .container { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.site-header .content-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); }

.logo { display: flex; align-items: center; gap: var(--sp-12); }
.logo img { height: 32px; width: auto; }

.brand-tagline { display: none; color: var(--color-muted); font-size: 14px; }

.main-nav { display: none; align-items: center; gap: var(--sp-16); }
.main-nav a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-ink); }
.main-nav a:hover { background: var(--color-accent); }

.nav-ctas { display: none; align-items: center; gap: var(--sp-12); }

.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-pill); background: var(--color-forest); color: #fff; box-shadow: var(--shadow-soft); }
.mobile-menu-toggle:hover { background: var(--color-leaf); }
.mobile-menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

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

/* =====================
   4) MOBILE MENU (Slide-in)
   ===================== */
.mobile-menu {
  position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; 
  background: rgba(31,42,55,0.65); backdrop-filter: blur(2px);
  transform: translateX(100%);
  transition: transform 280ms ease;
  z-index: 1400;
}
.mobile-menu .mobile-nav {
  display: flex; flex-direction: column; gap: 6px; 
  background: #FFFFFF; margin-left: auto; width: 84%; max-width: 420px; height: 100%; padding: var(--sp-24);
  box-shadow: var(--shadow-medium); border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg);
}
.mobile-menu-close {
  position: absolute; right: 16px; top: 12px; width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: #FFFFFF; color: var(--color-ink); box-shadow: var(--shadow-soft);
}
.mobile-nav a { display: flex; align-items: center; padding: 12px 10px; border-radius: var(--radius-sm); color: var(--color-ink); }
.mobile-nav a:hover { background: var(--color-accent); }

/* States to open menu */
.mobile-menu.open, body.menu-open .mobile-menu { transform: translateX(0); }

/* Ensure overlay covers content properly */
body.menu-open { overflow: hidden; }

/* =====================
   5) HERO SECTION (Organic look)
   ===================== */
.hero { padding-top: var(--sp-32); }
.hero .container { position: relative; }
.hero .content-wrapper { background: var(--color-sand); border: 1px solid var(--color-stroke); border-radius: 28px; padding: var(--sp-32); box-shadow: var(--shadow-soft); }
.hero h1 { color: var(--color-ink); }
.hero .subheadline { max-width: 70ch; }

/* Decorative organic blobs (decor only; not content) */
.hero .content-wrapper::before, .hero .content-wrapper::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0.4;
  width: 180px; height: 180px; border-radius: 46% 54% 62% 38% / 45% 52% 48% 55%;
}
.hero .content-wrapper::before { background: #EAF3EF; top: -30px; left: -20px; }
.hero .content-wrapper::after { background: #F8EDE4; bottom: -26px; right: -18px; }

.cta-group { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }

.quick-links { display: flex; flex-direction: column; gap: 8px; }
.quick-links ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding-left: 0; }
.quick-links li { list-style: none; }
.quick-links a { display: inline-flex; padding: 8px 12px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-stroke); color: var(--color-forest); }
.quick-links a:hover { background: #F0F7F4; }

.trust-badges ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding-left: 0; }
.trust-badges li { list-style: none; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-stroke); border-radius: var(--radius-pill); padding: 8px 12px; color: var(--color-ink); }
.trust-badges img { width: 18px; height: 18px; }

/* =====================
   6) GENERIC SECTIONS & CARDS
   ===================== */
.text-section {
  display: flex; flex-direction: column; gap: var(--sp-8);
  background: #FFFFFF; border: 1px solid var(--color-stroke); border-radius: var(--radius-lg);
  padding: var(--sp-20); box-shadow: var(--shadow-soft);
}

.card { background: #FFFFFF; border: 1px solid var(--color-stroke); border-radius: var(--radius-lg); padding: var(--sp-20); box-shadow: var(--shadow-soft); }

/* Wrapping multiple text-sections neatly */
/* Apply on containers that hold many .text-section */
section .content-wrapper { gap: var(--sp-20); }
section .content-wrapper > .text-section { flex: 1 1 280px; }
section .content-wrapper { flex-wrap: wrap; }

/* =====================
   7) BUTTONS
   ===================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: var(--radius-pill); font-weight: 600; transition: transform var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition); border: 1px solid transparent; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-fern); outline-offset: 2px; }

.btn.primary { background: var(--color-forest); color: #fff; }
.btn.primary:hover { background: var(--color-leaf); }
.btn.primary:active { background: #276163; }

.btn.secondary { background: #fff; color: var(--color-forest); border-color: var(--color-forest); }
.btn.secondary:hover { background: #EAF3EF; }
.btn.secondary:active { background: #DCECE6; }

/* Link-look button utility */
.btn.link { background: transparent; border-color: transparent; color: var(--color-forest); padding: 0; }
.btn.link:hover { text-decoration: underline; box-shadow: none; transform: none; }

/* =====================
   8) TESTIMONIALS (high contrast)
   ===================== */
.testimonial-card {
  background: #FFFFFF; border: 1px solid var(--color-stroke); border-radius: 18px; box-shadow: var(--shadow-soft);
}
.testimonial-card p { color: var(--color-ink); }
.testimonial-card strong { color: var(--color-bark); }

/* =====================
   9) LIST HIGHLIGHTS & BADGES
   ===================== */
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--radius-pill); background: #EAF3EF; color: var(--color-leaf); font-size: 12px; font-weight: 600; }

/* =====================
   10) FOOTER
   ===================== */
.site-footer { background: #FFFFFF; border-top: 1px solid var(--color-stroke); margin-top: var(--sp-60); }
.site-footer .content-wrapper { display: flex; flex-wrap: wrap; gap: var(--sp-24); padding: var(--sp-24) 0; }
.footer-brand, .footer-contact, .footer-nav, .footer-cta { background: #fff; border: 1px solid var(--color-stroke); border-radius: var(--radius-md); padding: var(--sp-20); box-shadow: var(--shadow-soft); flex: 1 1 260px; }
.footer-brand img { height: 28px; margin-bottom: var(--sp-12); }
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { color: var(--color-ink); }
.footer-nav a:hover { color: var(--color-forest); }
.footer-meta { width: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 14px; padding-top: var(--sp-8); }

/* =====================
   11) UTILITIES & LAYOUT HELPERS
   ===================== */
.hidden { display: none !important; }
.centered { display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: var(--sp-16); }
.row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-16); }

/* Text-image section behavior */
.text-image-section > * { flex: 1 1 300px; }

/* Content grids */
.content-grid > * { flex: 1 1 280px; }

/* =====================
   12) RESPONSIVE
   ===================== */
@media (min-width: 768px) {
  .hero .content-wrapper { padding: var(--sp-40); }
}

@media (min-width: 992px) {
  .content-wrapper { flex-direction: row; align-items: flex-start; }
  /* Title blocks stay full width unless grouped */
  .content-wrapper > h2, .content-wrapper > h1, .content-wrapper > p, .content-wrapper > .subheadline { flex: 1 1 100%; }
}

/* =====================
   13) ACCESSIBILITY FOCUS RINGS
   ===================== */
:focus-visible { box-shadow: 0 0 0 2px var(--color-fern) inset; border-radius: 6px; }

/* =====================
   14) PAGE-SPECIFIC TWEAKS
   ===================== */
/* Lists of steps */
ol { counter-reset: step; }
ol > li { position: relative; padding-left: 36px; }
ol > li::before { content: counter(step); counter-increment: step; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--color-forest); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: var(--shadow-soft); }

/* Contact details links */
[href^="tel:"], [href^="mailto:"] { color: var(--color-forest); }
[href^="tel:"]:hover, [href^="mailto:"]:hover { color: var(--color-leaf); }

/* Headline spacing within sections */
section h2 + .text-section { margin-top: 4px; }

/* =====================
   15) MOBILE NAV VISIBILITY RULES
   ===================== */
/* Hide desktop nav, show burger on mobile by default (already set). No changes needed here for mobile-first. */

/* =====================
   16) COOKIE CONSENT (Banner & Modal)
   ===================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; 
  display: flex; flex-direction: column; gap: var(--sp-12);
  background: #FFFFFF; border-top: 1px solid var(--color-stroke); box-shadow: 0 -4px 20px rgba(31,42,55,0.08);
  padding: var(--sp-16) var(--sp-20);
  transform: translateY(100%);
  transition: transform 300ms ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--sp-12); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.cookie-banner .btn { padding: 10px 14px; }
.cookie-banner .btn.accept { background: var(--color-forest); color: #fff; }
.cookie-banner .btn.reject { background: #fff; color: var(--color-forest); border: 1px solid var(--color-forest); }
.cookie-banner .btn.settings { background: #fff; color: var(--color-ink); border: 1px solid var(--color-stroke); }
.cookie-banner .btn.reject:hover, .cookie-banner .btn.settings:hover { background: var(--color-accent); }

/* Cookie Preferences Modal */
.cookie-modal-overlay {
  position: fixed; inset: 0; background: rgba(31,42,55,0.55); z-index: 1600; display: none; align-items: center; justify-content: center;
}
.cookie-modal-overlay.open { display: flex; }
.cookie-modal {
  display: flex; flex-direction: column; gap: var(--sp-16);
  width: 92%; max-width: 600px; background: #FFFFFF; border: 1px solid var(--color-stroke); border-radius: 20px; box-shadow: var(--shadow-medium); padding: var(--sp-20);
}
.cookie-modal .cookie-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .cookie-body { display: flex; flex-direction: column; gap: var(--sp-16); }
.cookie-modal .category { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--color-stroke); border-radius: 12px; background: var(--color-accent); }
.cookie-modal .cookie-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-12); }

/* Toggle switch (for analytics/marketing) */
.toggle { display: inline-flex; align-items: center; gap: 10px; }
.toggle input { appearance: none; width: 42px; height: 24px; border-radius: 24px; background: #D1D5DB; position: relative; transition: background var(--transition); }
.toggle input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--transition); box-shadow: var(--shadow-soft); }
.toggle input:checked { background: var(--color-forest); }
.toggle input:checked::after { transform: translateX(18px); }

/* =====================
   17) MICRO INTERACTIONS: CARDS & LINKS
   ===================== */
.text-section:hover, .card:hover, .testimonial-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-1px); transition: transform var(--transition), box-shadow var(--transition); }

/* =====================
   18) ACCESSIBLE COLOR CONTRAST IN TESTIMONIAL & REVIEW AREAS
   ===================== */
/* Ensured by light backgrounds and dark text set above */

/* =====================
   19) PRINT BASICS
   ===================== */
@media print {
  .site-header, .site-footer, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  a { text-decoration: underline; }
}

/* =====================
   20) PAGE CONTENT SPECIFIC FLEX LAYOUTS
   ===================== */
/* Navbar grouping inside header */
.site-header .content-wrapper { gap: var(--sp-16); }

/* Ensure all multi-item blocks wrap with spacing */
section .content-wrapper { display: flex; flex-wrap: wrap; }

/* CTA groups in footers and sections */
.footer-cta { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: center; }

/* Ensure minimum spacing between content cards/sections */
section .text-section, section .testimonial-card, section .card { margin-right: 0; }

/* =====================
   21) ORGANIC EDGES & DETAILS
   ===================== */
/* Subtle top border accent for headings */
h2 { position: relative; padding-top: 6px; }
h2::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 6px; border-radius: 6px; background: var(--color-fern); opacity: 0.4; }

/* Clay accent underline for h3 */
h3 { position: relative; padding-bottom: 4px; }
h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--color-clay); opacity: 0.6; }

/* =====================
   22) FORMS (if any appear later)
   ===================== */
input, select, textarea { font-family: var(--font-body); font-size: 16px; width: 100%; border: 1px solid var(--color-stroke); border-radius: 12px; padding: 10px 12px; background: #fff; color: var(--color-ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-fern); outline-offset: 2px; }

/* =====================
   23) ENSURE NO OVERLAPS
   ===================== */
/* Adequate spacing already applied. Add safe margins to images inside cards */
.text-section img, .card img { border-radius: 12px; }

/* =====================
   24) ADDITIONAL COMPONENT HOOKS (if used later)
   ===================== */
.tag { display: inline-flex; padding: 6px 10px; border: 1px solid var(--color-stroke); border-radius: var(--radius-pill); background: #fff; color: var(--color-muted); font-size: 12px; }

/* =====================
   25) DARK MODE HOOK (optional, non-intrusive)
   ===================== */
@media (prefers-color-scheme: dark) {
  /* Keep light testimonial per requirement; do not invert those cards */
  body { background: #F6F5F1; }
}