/* =====================================
   BauKultur Kompass – style.css
   Design: monochrome_sophisticated
   Palette: black/white/gray with subtle brand accents
   Layout: FLEXBOX ONLY (no grid/columns)
   ===================================== */

/* --------------------
   CSS RESET / BASELINE
   -------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: #0A0A0A;
  background: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #1F2A33; outline-offset: 2px; }

/* --------------------
   THEME TOKENS
   -------------------- */
:root {
  /* Monochrome core */
  --ink: #0A0A0A;
  --ink-700: #1A1A1A;
  --ink-600: #2B2B2B;
  --ink-500: #3C3C3C;
  --ink-300: #6A6A6A;
  --ink-200: #8C8C8C;
  --bg: #FFFFFF;
  --bg-soft: #F2F5F7; /* brand accent aligns with monochrome */
  --surface: #FAFAFA;
  --line: #E6E9EC;
  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);

  /* Brand accents (used subtly) */
  --brand-primary: #1F2A33; /* deep slate */
  --brand-secondary: #1E3A8A; /* restrained blue for focus/indicators */
  --brand-accent: #F2F5F7;

  /* Radius & spacing scale */
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 18px;
  --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-60: 60px; --s-72: 72px; --s-96: 96px;
}

/* --------------------
   TYPOGRAPHY
   -------------------- */
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--ink); margin: 0 0 var(--s-12); line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}
p { margin: 0 0 var(--s-12); color: var(--ink-600); }
.small, small { font-size: 14px; color: var(--ink-300); }
.subheadline { font-size: 18px; color: #FFFFFFCC; max-width: 70ch; }
.tagline { font-size: 16px; color: var(--ink-500); }
strong { color: var(--ink-600); font-weight: 700; }
em { color: var(--ink-500); }
blockquote { margin: var(--s-20) 0; padding: var(--s-16) var(--s-20); border-left: 3px solid var(--ink); background: var(--bg-soft); color: var(--ink-600); border-radius: var(--r-s); }

/* Links */
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-700); }
a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }

/* Lists */
ul, ol { margin: 0 0 var(--s-12); padding-left: 20px; }
li { margin: 6px 0; }

/* --------------------
   LAYOUT WRAPPERS (FLEX ONLY)
   -------------------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--s-16);
  display: flex; /* flex-only rule */
  flex-direction: column;
  gap: var(--s-20);
}
.content-wrapper { display: flex; flex-direction: column; gap: var(--s-16); }

/* Mandatory spacing & alignment patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-1); padding: var(--s-20); }
.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; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-1); color: var(--ink); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* General section spacing */
main section { padding: var(--s-40) 0; border-bottom: 1px solid var(--line); }
main section:last-of-type { border-bottom: none; }

/* --------------------
   HEADER & NAVIGATION
   -------------------- */
header { position: relative; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; padding-top: var(--s-12); padding-bottom: var(--s-12); gap: var(--s-16); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 34px; width: auto; }

/* Desktop nav (hidden on mobile) */
.main-nav { display: none; align-items: center; flex-wrap: wrap; gap: 6px; }
.main-nav a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--r-s); transition: background .2s ease, color .2s ease, transform .15s ease; }
.main-nav a:hover { background: var(--brand-accent); color: var(--ink-700); }
.main-nav a.cta { border: 1px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.main-nav a[aria-current="page"] { border-bottom: 2px solid var(--ink); }

/* Mobile hamburger */
.mobile-menu-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--ink);
  color: #FFFFFF;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.mobile-menu-toggle:hover { background: #000; transform: translateY(-1px); }

/* Mobile menu panel */
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 360px;
  background: #111111;
  color: #FFFFFF;
  transform: translateX(100%);
  transition: transform .35s ease;
  z-index: 120;
  padding: var(--s-20);
  display: flex; flex-direction: column; gap: var(--s-20);
  box-shadow: -8px 0 24px rgba(0,0,0,.25);
}
.mobile-menu.open, .mobile-menu.is-open, body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid #2A2A2A; background: transparent; color: #FFFFFF; cursor: pointer;
}
.mobile-nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav a { color: #EEEEEE; background: #191919; padding: 10px 12px; border-radius: var(--r-s); text-decoration: none; }
.mobile-nav a:hover { background: #202020; }
.mobile-nav a[aria-current="page"] { background: #222; border-left: 3px solid #fff; padding-left: 9px; }

/* Show desktop nav on larger screens */
@media (min-width: 960px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* --------------------
   HERO
   -------------------- */
.hero { background: #0F1113; color: #FFFFFF; }
.hero .container { padding-top: var(--s-48); padding-bottom: var(--s-48); }
.hero .content-wrapper { gap: var(--s-16); }
.hero h1 { color: #FFFFFF; }
.hero .tagline { color: #FFFFFF99; }
.hero nav[aria-label="Breadcrumb"] { font-size: 14px; color: #B5B8BC; }
.hero nav[aria-label="Breadcrumb"] a { color: #D9DDE1; text-decoration: none; }
.hero nav[aria-label="Breadcrumb"] a:hover { text-decoration: underline; }

/* Inline CTA row in heroes */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.cta-row .text-section { display: flex; flex-direction: row; gap: var(--s-8); color: #FFFFFFCC; }
.cta-row .text-section a { color: #FFFFFF; text-decoration: underline; }

/* --------------------
   BUTTONS
   -------------------- */
.button, a.button, button.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: #FFFFFF;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-1);
}
.button:hover { background: var(--brand-accent); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button.primary { background: var(--ink); color: #FFFFFF; border-color: #000000; }
.button.primary:hover { background: #000000; }

/* --------------------
   TEXT SECTIONS & UTILITIES
   -------------------- */
.text-section { display: flex; flex-direction: column; gap: var(--s-12); max-width: 78ch; }
.content-grid > * { flex: 1 1 280px; }
.text-image-section > * { flex: 1 1 300px; }

/* --------------------
   TESTIMONIALS (readable on light bg)
   -------------------- */
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: var(--ink-500); }

/* --------------------
   FOOTER
   -------------------- */
footer { background: #0F1113; color: #FFFFFF; border-top: 1px solid #15181B; }
footer .container { padding-top: var(--s-32); padding-bottom: var(--s-32); }
footer .content-wrapper { display: flex; flex-direction: column; gap: var(--s-20); }
footer .brand img { height: 30px; filter: brightness(0) invert(1); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.footer-nav a { color: #E6EAF0; text-decoration: none; padding: 6px 8px; border-radius: var(--r-s); background: transparent; }
.footer-nav a:hover { background: #13161A; }
footer .text-section p { color: #C8CDD3; }

/* --------------------
   BREADCRUMBS (outside hero)
   -------------------- */
nav[aria-label="Breadcrumb"] { font-size: 14px; color: var(--ink-300); }
nav[aria-label="Breadcrumb"] a { color: var(--ink-500); text-decoration: none; }
nav[aria-label="Breadcrumb"] a:hover { text-decoration: underline; }

/* --------------------
   CARDS (generic)
   -------------------- */
.card h3 { margin-bottom: var(--s-8); }
.card .actions { display: flex; gap: var(--s-12); flex-wrap: wrap; }

/* --------------------
   TABLES (fallback styling)
   -------------------- */
table { width: 100%; border-collapse: collapse; margin: var(--s-16) 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-family: Georgia, 'Times New Roman', serif; color: var(--ink); }

/* --------------------
   RESPONSIVE RULES
   -------------------- */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}
@media (min-width: 768px) {
  .hero .container { padding-top: var(--s-72); padding-bottom: var(--s-72); }
  .content-wrapper { gap: var(--s-20); }
}

/* --------------------
   MICRO-INTERACTIONS
   -------------------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero .content-wrapper > * { animation: fadeInUp .45s ease both; }
.hero .content-wrapper > *:nth-child(2) { animation-delay: .05s; }
.hero .content-wrapper > *:nth-child(3) { animation-delay: .1s; }

/* --------------------
   ACCESSIBILITY & STATES
   -------------------- */
a:focus-visible, .button:focus-visible, button:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; }
[disabled], .is-disabled { opacity: .6; pointer-events: none; }

/* --------------------
   PAGE-SPECIFIC REFINEMENTS
   -------------------- */
/* FAQ headings margins */
.text-section h3 { margin-top: var(--s-16); margin-bottom: var(--s-8); font-size: 18px; color: var(--ink-600); }

/* Ordered lists in ranking pages */
ol { padding-left: 22px; }
ol li { margin: 8px 0; }

/* --------------------
   MOBILE MENU BACKDROP (optional if added via HTML/JS)
   -------------------- */
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 110; }
.mobile-menu-backdrop.open, body.menu-open .mobile-menu-backdrop { opacity: 1; pointer-events: auto; }

/* --------------------
   COOKIE CONSENT – Banner & Modal
   -------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #FFFFFF; color: var(--ink);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0,0,0,.07);
  padding: var(--s-16);
  z-index: 130;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.cookie-banner.is-visible, body.cookie-banner-visible .cookie-banner { transform: translateY(0); }
.cookie-banner .container { flex-direction: column; gap: var(--s-12); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.cookie-banner .button { border-color: var(--ink); }
.cookie-banner .button.primary { background: var(--ink); color: #fff; }

/* Cookie preferences modal */
.cookie-modal {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--s-20);
  background: rgba(0,0,0,.6);
  z-index: 140;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.cookie-modal.open, body.cookie-modal-open .cookie-modal { opacity: 1; pointer-events: auto; }
.cookie-modal .modal-content {
  width: 100%; max-width: 680px;
  background: #FFFFFF; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  padding: var(--s-24);
  display: flex; flex-direction: column; gap: var(--s-16);
}
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--s-12); }
.cookie-modal .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: 10px 0; border-bottom: 1px solid var(--line); }
.cookie-modal .cookie-row:last-child { border-bottom: none; }

/* Toggle (for optional categories) */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--brand-accent); border: 1px solid var(--line); flex: 0 0 auto; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .2s ease; }
.toggle.is-on { background: #EDEFF2; }
.toggle.is-on::after { transform: translateX(20px); }

/* --------------------
   FORMS (generic, if any appear later)
   -------------------- */
.input, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: #FFFFFF; color: var(--ink);
}
.input:focus, input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand-secondary); outline-offset: 2px; }

/* --------------------
   SPACING REFINEMENTS
   -------------------- */
main h2 { margin-bottom: var(--s-8); }
main .text-section + .text-section { margin-top: var(--s-12); }

/* Ensure gaps between content blocks */
.content-wrapper > .testimonial-card, .content-wrapper > .card, .content-wrapper > .text-section, .content-wrapper > h2, .content-wrapper > h3, .content-wrapper > p, .content-wrapper > nav[aria-label="Breadcrumb"] {
  margin-top: 0;
}

/* --------------------
   PREVENT OVERLAPS / Z-INDEX LAYERS
   -------------------- */
header { z-index: 50; }
.mobile-menu { z-index: 120; }
.mobile-menu-backdrop { z-index: 110; }
.cookie-banner { z-index: 130; }
.cookie-modal { z-index: 140; }

/* --------------------
   MONOCHROME FINESSE (subtle borders & shadows)
   -------------------- */
section { background: #FFFFFF; }
section:nth-of-type(odd) { background: var(--surface); }

/* --------------------
   PRINT (basic)
   -------------------- */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: none; }
}

.hero {
   background: #0F1113 !important;
   color: #FFFFFF;
}