/* ===============================
   KiezKompass Berlin – style.css
   Creative Artistic Theme – Vibrant, playful, brand-driven
   Mobile-first, Flexbox-only, No Grid/Columns
   =============================== */

/* -------------------------------
   RESET & BASELINE NORMALIZE
---------------------------------- */
* { 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; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.2rem; }
button { background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #D36C2D; outline-offset: 2px; }

/* -------------------------------
   THEME VARIABLES (with fallbacks)
---------------------------------- */
:root {
  --clr-primary: #1E2B3A;   /* deep urban navy */
  --clr-secondary: #D36C2D; /* warm creative orange */
  --clr-accent: #F3F6F9;    /* airy light */
  --clr-white: #FFFFFF;
  --clr-ink: #0E141B;
  --clr-muted: #6B7A8C;
  --radius-1: 8px;
  --radius-2: 14px;
  --shadow-1: 0 6px 14px rgba(30,43,58,0.12);
  --shadow-2: 0 10px 24px rgba(30,43,58,0.18);
  --space-1: 8px;  --space-2: 12px; --space-3: 16px; --space-4: 20px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 60px;
}

/* -------------------------------
   TYPOGRAPHY
---------------------------------- */
body {
  font-family: Verdana, Geneva, sans-serif; /* brand body */
  color: var(--clr-primary, #1E2B3A);
  background: var(--clr-accent, #F3F6F9);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Tahoma, sans-serif; /* brand display */
  letter-spacing: 0.3px;
  color: var(--clr-primary, #1E2B3A);
}

h1 { font-size: 32px; line-height: 1.2; margin-bottom: var(--space-5); }
h2 { font-size: 24px; line-height: 1.25; margin-bottom: var(--space-4); position: relative; }
h3 { font-size: 18px; line-height: 1.3; margin: var(--space-3) 0 var(--space-2) 0; }
p, li, address { font-size: 16px; }
small { font-size: 14px; color: var(--clr-muted); }
strong { color: var(--clr-ink); }

/* Creative underline accent on section headings */
h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 6px;
  background: var(--clr-secondary, #D36C2D);
  border-radius: 3px;
  margin-top: 10px;
}

/* -------------------------------
   GLOBAL LAYOUT WRAPPERS
   Flexbox-only
---------------------------------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Section baseline spacing – and mandatory .section class */
section { position: relative; z-index: 1; margin-bottom: var(--space-8); }
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Sub wrapper used in all pages */
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.text-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Decorative artistic corner blocks (purely decorative; won’t overlap content) */
section::before, section::after {
  content: "";
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 14px;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}
section::before { background: var(--clr-secondary, #D36C2D); top: -18px; left: -8px; transform: rotate(6deg); }
section::after  { background: var(--clr-primary, #1E2B3A); bottom: -18px; right: -8px; transform: rotate(-8deg); }

/* Ensure content stays above decorative shapes */
section > .container, section .content-wrapper { position: relative; z-index: 1; }

/* Lists - creative bullets color */
.text-section ul li::marker, .text-section ol li::marker { color: var(--clr-secondary, #D36C2D); }

/* Content grids and cards – mandatory spacing patterns */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card {
  margin-bottom: 20px;
  position: relative;
  background: var(--clr-white, #FFFFFF);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}
.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; }

/* -------------------------------
   HEADER & NAVIGATION
---------------------------------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--clr-white, #FFFFFF);
  box-shadow: 0 2px 12px rgba(30,43,58,0.06);
}
header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.logo img { height: 36px; width: auto; }

.main-nav {
  display: none; /* mobile hidden */
  gap: var(--space-4);
  align-items: center;
}
.main-nav a {
  color: var(--clr-primary, #1E2B3A);
  padding: 8px 10px;
  border-radius: 8px;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.main-nav a:hover { color: var(--clr-white, #FFFFFF); background: var(--clr-secondary, #D36C2D); transform: translateY(-1px); }

.cta-group { display: none; gap: var(--space-3); }
.cta-group a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--clr-secondary, #D36C2D);
  color: var(--clr-white, #FFFFFF);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cta-group a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); background: #c15f29; }

/* Mobile burger */
.mobile-menu-toggle {
  width: 42px; height: 42px; border-radius: 10px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clr-primary, #1E2B3A); color: var(--clr-white, #FFFFFF);
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, background-color .2s ease;
}
.mobile-menu-toggle:hover { transform: scale(1.04); background: #16202C; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--clr-white, #FFFFFF);
  transform: translateX(100%);
  transition: transform .35s ease;
  display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-4);
}
.mobile-menu.open, .mobile-menu.active { transform: translateX(0); }

.mobile-menu-close {
  align-self: flex-end; width: 42px; height: 42px; border-radius: 10px;
  background: var(--clr-accent, #F3F6F9); color: var(--clr-primary, #1E2B3A);
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-nav { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.mobile-nav a {
  padding: 14px 12px; border-radius: 12px; background: var(--clr-accent, #F3F6F9);
  color: var(--clr-primary, #1E2B3A); font-size: 18px; font-family: "Trebuchet MS", Tahoma, sans-serif;
  transition: background-color .2s ease, transform .2s ease;
}
.mobile-nav a:hover { background: #E7EDF3; transform: translateX(4px); }

/* -------------------------------
   HERO & TEXT ACTIONS
---------------------------------- */
/* Turn plain anchors in text blocks into stylized CTAs */
.text-section > a, .text-section p > a[href^="mailto"], .text-section p > a[href^="tel"], .content-wrapper > a {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin-right: 8px; margin-top: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--clr-primary, #1E2B3A);
  color: var(--clr-white, #FFFFFF);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.text-section > a:hover,
.content-wrapper > a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); background: #16202C; }

/* Inline links remain visible in paragraphs */
.text-section a:not(.main-nav a) { text-decoration: none; }
.text-section p a { color: var(--clr-secondary, #D36C2D); background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.text-section p a:hover { text-decoration: underline; }

/* Artistic callouts for the very first section on pages */
main > section:first-of-type { background: var(--clr-white, #FFFFFF); border-radius: 0 0 var(--radius-2) var(--radius-2); box-shadow: 0 8px 30px rgba(30,43,58,0.08); padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* -------------------------------
   TESTIMONIALS (contrast-safe)
---------------------------------- */
.testimonial-card {
  background: var(--clr-accent, #F3F6F9); /* light bg */
  border: 2px solid #E2E8F0;
  border-left: 8px solid var(--clr-secondary, #D36C2D);
  border-radius: var(--radius-2);
  color: var(--clr-primary, #1E2B3A); /* dark text */
  box-shadow: var(--shadow-1);
}
.testimonial-card p { margin: 0; }
.testimonial-card p + p { opacity: 0.9; }

/* -------------------------------
   FOOTER
---------------------------------- */
footer { background: var(--clr-primary, #1E2B3A); color: var(--clr-white, #FFFFFF); padding-top: var(--space-7); padding-bottom: var(--space-7); margin-top: var(--space-8); }
footer .content-wrapper { color: var(--clr-white, #FFFFFF); }
footer a { color: var(--clr-white, #FFFFFF); opacity: 0.95; }
footer a:hover { opacity: 1; text-decoration: underline; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
footer .text-section { gap: var(--space-2); }
footer .logo img { filter: brightness(0) invert(1); }

/* -------------------------------
   COOKIE CONSENT (banner + modal)
---------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--clr-white, #FFFFFF);
  color: var(--clr-primary, #1E2B3A);
  box-shadow: 0 -10px 30px rgba(30,43,58,0.12);
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  transform: translateY(110%);
  transition: transform .35s ease;
}
.cookie-banner.show, .cookie-banner.open { transform: translateY(0); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cookie-banner .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow-1); }
.cookie-banner .btn-accept { background: var(--clr-secondary, #D36C2D); color: var(--clr-white, #FFFFFF); }
.cookie-banner .btn-accept:hover { background: #c15f29; }
.cookie-banner .btn-reject { background: var(--clr-accent, #F3F6F9); color: var(--clr-primary, #1E2B3A); }
.cookie-banner .btn-reject:hover { background: #E7EDF3; }
.cookie-banner .btn-settings { background: var(--clr-primary, #1E2B3A); color: var(--clr-white, #FFFFFF); }
.cookie-banner .btn-settings:hover { background: #16202C; }

/* Cookie modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1300; display: none;
  align-items: center; justify-content: center;
  padding: var(--space-4);
}
.cookie-modal.open { display: flex; }
.cookie-modal .backdrop { position: absolute; inset: 0; background: rgba(14,20,27,0.5); }
.cookie-modal .modal {
  position: relative; z-index: 1; width: 100%; max-width: 720px;
  background: var(--clr-white, #FFFFFF); color: var(--clr-primary, #1E2B3A);
  border-radius: var(--radius-2); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  transform: translateY(14px); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.cookie-modal.open .modal { transform: translateY(0); opacity: 1; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Simple toggle style (optional for settings) */
.toggle { display: inline-flex; align-items: center; gap: 10px; }
.toggle input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #E2E8F0; position: relative; transition: background-color .2s ease; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.toggle input:checked { background: var(--clr-secondary, #D36C2D); }
.toggle input:checked::after { transform: translateX(18px); }

/* -------------------------------
   UTILITIES & MICRO-INTERACTIONS
---------------------------------- */
.hr { height: 1px; background: #E2E8F0; width: 100%; }
.muted { color: var(--clr-muted); }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--clr-accent, #F3F6F9); color: var(--clr-primary, #1E2B3A); }

/* Subtle card hover lift */
.card:hover, .testimonial-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); transition: transform .2s ease, box-shadow .2s ease; }

/* Links underline animation (artistic) */
a { position: relative; }
a:not(.mobile-nav a):not(.main-nav a):not(.cta-group a):not(.text-section > a)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: var(--clr-secondary, #D36C2D); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
a:hover::after { transform: scaleX(1); }

/* -------------------------------
   RESPONSIVE RULES
---------------------------------- */
@media (min-width: 600px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
}

@media (min-width: 768px) {
  /* Show desktop navigation and CTAs */
  .main-nav { display: flex; }
  .cta-group { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Text-image sections align row on desktop */
  .text-image-section { flex-direction: row; }

  /* Create two-column feel via flex without grid */
  .content-wrapper { flex-direction: column; }
}

@media (min-width: 1024px) {
  /* Header spacing */
  header .container { padding-top: var(--space-4); padding-bottom: var(--space-4); }

  /* Larger hero heading */
  h1 { font-size: 48px; }
}

/* -------------------------------
   ACCESSIBILITY & EDGE SPACING
---------------------------------- */
/* Ensure at least 20px gap between content elements */
.content-wrapper > * + * { margin-top: 0; }

/* Ensure lists have breathing room */
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 10px; }

/* -------------------------------
   PAGE-SPECIFIC LIGHT TOUCHES
---------------------------------- */
/* Index distinct first CTA colors */
body.index .text-section > a:first-of-type { background: var(--clr-secondary, #D36C2D); }

/* Footer address alignment */
footer .content-wrapper { display: flex; flex-direction: column; gap: var(--space-6); }

/* -------------------------------
   REQUIRED FLEX PATTERNS RE-ASSERTED
---------------------------------- */
.features, .card-grid, .footer-nav, .cta-group, .main-nav, .mobile-nav, header .container, .container, .content-wrapper, .text-section, .card-container, .content-grid, .text-image-section, .testimonial-card, .feature-item { display: flex; }
.features, .card-grid, .card-container, .content-grid { flex-wrap: wrap; gap: 20px; }
.card-grid { justify-content: space-between; }

/* -------------------------------
   CONTRAST & READABILITY OVERRIDES
---------------------------------- */
/* Ensure testimonials always dark-on-light */
.testimonial-card, .testimonial-card * { color: var(--clr-primary, #1E2B3A); }

/* -------------------------------
   PRINT BASICS (optional)
---------------------------------- */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal, footer { display: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: 12px; }
}