/* ===============================
   RentenBrücke International — style.css
   Theme: monochrome_sophisticated (black/white/gray with subtle brand accents)
   Layout: Flexbox-only (no CSS Grid or Columns)
   =============================== */

/* -------------------------------
   1) Reset & Base Normalize
-------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
input, button, textarea, select { font: inherit; }

/* -------------------------------
   2) Design Tokens (CSS Variables)
-------------------------------- */
:root {
  /* Monochrome scale */
  --mono-0: #ffffff;
  --mono-5: #f9f9f9;
  --mono-10: #f3f3f3;
  --mono-15: #eeeeee;
  --mono-20: #e6e6e6;
  --mono-30: #d6d6d6;
  --mono-40: #bfbfbf;
  --mono-60: #8c8c8c;
  --mono-70: #6f6f6f;
  --mono-80: #4d4d4d;
  --mono-90: #2e2e2e;
  --mono-95: #1a1a1a;
  --mono-100: #0f0f10;

  /* Brand (subtle accents only) */
  --brand-primary: #1E3A5F;
  --brand-secondary: #2D6A4F;
  --brand-accent: #F5F7FA;

  /* Typography */
  --font-display: Georgia, "Times New Roman", Times, serif;
  --font-body: Verdana, Tahoma, Arial, sans-serif;

  /* Elevation & Effects */
  --shadow-soft: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-medium: 0 6px 20px rgba(0,0,0,0.12);
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;

  /* Spacing scale */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
}

/* -------------------------------
   3) Base Typography & Body
-------------------------------- */
body {
  font-family: var(--font-body, Verdana), sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mono-90);
  background: var(--mono-0);
}

h1, h2, h3 {
  font-family: var(--font-display, Georgia), serif;
  color: var(--mono-100);
  letter-spacing: 0.2px;
}

h1 { font-size: 40px; line-height: 1.2; margin-bottom: var(--space-20); }
h2 { font-size: 32px; line-height: 1.25; margin-bottom: var(--space-16); }
h3 { font-size: 24px; line-height: 1.3; margin-bottom: var(--space-12); }

p { margin-bottom: var(--space-12); color: var(--mono-90); }
strong { color: var(--mono-100); }

/* Links (subtle brand accent underline on hover) */
a { color: var(--mono-100); border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
a:hover { color: var(--mono-100); border-bottom-color: var(--brand-primary); }
a[aria-current="page"] { color: var(--mono-100); border-bottom-color: var(--brand-primary); }

/* -------------------------------
   4) Layout Containers (Flexbox-only)
-------------------------------- */
.container {
  /* Centers inner max-width wrapper */
  display: flex; justify-content: center; width: 100%; padding: 0 var(--space-20);
}
.content-wrapper {
  display: flex; flex-direction: column; width: 100%; max-width: 1100px; gap: var(--space-20);
}

main { display: flex; flex-direction: column; gap: var(--space-60); }
section { padding: var(--space-40) 0; border-top: 1px solid var(--mono-15); }

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

/* -------------------------------
   5) Header & Navigation
-------------------------------- */
header { position: sticky; top: 0; z-index: 50; background: var(--mono-0); border-bottom: 1px solid var(--mono-15); backdrop-filter: saturate(110%) blur(4px); }
header .container { padding-top: var(--space-12); padding-bottom: var(--space-12); }

.logo { display: flex; align-items: center; }
.logo img { height: 34px; width: auto; }

/* Header bar */
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); }

.main-nav { display: none; }
.main-nav a { padding: 10px 12px; color: var(--mono-90); border-radius: var(--radius-s); transition: background .2s ease, color .2s ease; }
.main-nav a:hover { background: var(--mono-10); color: var(--mono-100); }
.main-nav a.btn { padding: 10px 16px; }

/* Mobile menu button */
.mobile-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--mono-10); color: var(--mono-100);
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu-toggle:hover { background: var(--mono-15); transform: translateY(-1px); }

/* Mobile menu overlay (slides from right) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  background: rgba(15,15,16,0.9); backdrop-filter: blur(6px);
  transform: translateX(100%); transition: transform .35s ease;
}
.mobile-menu.open, .mobile-menu.active { transform: translateX(0%); }

.mobile-menu .mobile-menu-close {
  align-self: flex-end; margin: var(--space-16);
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mono-0); color: var(--mono-100);
}
.mobile-nav { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--space-20) var(--space-20); }
.mobile-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-s);
  background: var(--mono-0); color: var(--mono-100);
}
.mobile-nav a:hover { background: var(--brand-accent); }

/* Desktop nav */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; align-items: center; gap: 8px; }
}

/* -------------------------------
   6) Hero Section (dramatic contrast)
-------------------------------- */
.hero { background: var(--mono-100); color: var(--mono-0); border-top: none; }
.hero .content-wrapper { gap: var(--space-16); }
.hero h1 { color: var(--mono-0); font-size: 44px; }
.hero p, .hero li { color: var(--mono-5); }
.hero ul { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-12); }
.trust-badges .badge {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.18); color: var(--mono-0);
  background: rgba(255,255,255,0.06); border-radius: 999px;
}
.trust-badges .badge img { width: 16px; height: 16px; filter: invert(1); }

/* -------------------------------
   7) Buttons & CTAs
-------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-m);
  background: var(--mono-10); color: var(--mono-100);
  border: 1px solid var(--mono-20);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); background: var(--mono-15); }

.btn-primary {
  background: var(--mono-0);
  color: var(--mono-100);
  border: 2px solid var(--brand-primary);
}
.btn-primary:hover { background: var(--brand-accent); }

/* CTA group */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Focus visibility for accessibility */
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

/* -------------------------------
   8) Feature & Services Layouts (Cards)
-------------------------------- */
.features-grid, .services-grid, .testimonials-list, .faq-list {
  display: flex; flex-wrap: wrap; gap: var(--space-20);
}

.feature, .service-card, .faq-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  flex: 1 1 260px; min-width: 260px; padding: var(--space-20);
  background: var(--mono-0);
  border: 1px solid var(--mono-15);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}
.feature:hover, .service-card:hover, .faq-item:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); border-color: var(--mono-20); }

/* Testimonials – ensure light background and dark text for readability */
.testimonials-list { gap: var(--space-20); }
.testimonial-card {
  flex: 1 1 300px; min-width: 280px;
  background: var(--mono-5); color: var(--mono-100);
  border: 1px solid var(--mono-15); border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.testimonial-card p { color: var(--mono-90); }

/* Tag list */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-8); }
.tag-list li {
  display: flex; align-items: center; padding: 6px 10px; border-radius: 999px;
  background: var(--mono-10); border: 1px solid var(--mono-20); color: var(--mono-90);
}

/* Text section with icons */
.text-section { display: flex; flex-direction: column; gap: 10px; }
.text-section p { display: flex; align-items: center; gap: 10px; }
.text-section img { width: 18px; height: 18px; filter: grayscale(1); }

/* FAQ specifics */
.faq-list .faq-item h3 { margin-bottom: 4px; }

/* -------------------------------
   9) Footer
-------------------------------- */
footer { background: var(--mono-100); color: var(--mono-0); }
footer .content-wrapper { gap: var(--space-16); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.footer-nav a {
  color: var(--mono-0); opacity: 0.9; padding: 6px 10px; border-radius: var(--radius-s);
  border: 1px solid rgba(255,255,255,0.12);
}
.footer-nav a:hover { background: rgba(255,255,255,0.08); }
footer .text-section p, footer a { color: var(--mono-0) !important; opacity: 0.9; }

/* -------------------------------
   10) Cookie Consent (banner + modal)
-------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; justify-content: center; padding: var(--space-16);
  transform: translateY(110%); transition: transform .35s ease;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner .cookie-inner {
  display: flex; flex-direction: column; gap: var(--space-12);
  width: 100%; max-width: 1100px; background: var(--mono-0);
  border: 1px solid var(--mono-20); border-radius: var(--radius-l);
  box-shadow: var(--shadow-medium); padding: var(--space-16);
}
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

.btn-accept { background: var(--mono-0); color: var(--mono-100); border: 2px solid var(--brand-secondary); border-radius: var(--radius-m); padding: 10px 16px; }
.btn-reject { background: var(--mono-10); color: var(--mono-100); border: 1px solid var(--mono-20); border-radius: var(--radius-m); padding: 10px 16px; }
.btn-settings { background: var(--mono-0); color: var(--mono-100); border: 1px solid var(--mono-20); border-radius: var(--radius-m); padding: 10px 16px; }
.btn-accept:hover, .btn-reject:hover, .btn-settings:hover { box-shadow: var(--shadow-soft); }

/* Cookie modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
}
.cookie-modal.open { display: flex; }
.cookie-backdrop { position: absolute; inset: 0; background: rgba(15,15,16,0.6); backdrop-filter: blur(4px); }
.cookie-dialog {
  position: relative; z-index: 1; width: 92%; max-width: 720px;
  background: var(--mono-0); color: var(--mono-100);
  border: 1px solid var(--mono-20); border-radius: var(--radius-l);
  box-shadow: var(--shadow-medium); padding: var(--space-20);
  display: flex; flex-direction: column; gap: var(--space-16);
}
.cookie-categories { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 10px 0; border-top: 1px solid var(--mono-15); }
.cookie-row:first-child { border-top: 0; }

/* Simple toggle */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--mono-20); border: 1px solid var(--mono-30); display: flex; align-items: center; padding: 2px; transition: background .2s ease; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--mono-0); box-shadow: var(--shadow-soft); transform: translateX(0); transition: transform .2s ease; }
.toggle.on { background: var(--brand-primary); border-color: var(--brand-primary); }
.toggle.on::after { transform: translateX(20px); }

.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* -------------------------------
   11) Utilities & Helpers
-------------------------------- */
.muted { color: var(--mono-70); }
.hr { height: 1px; background: var(--mono-15); width: 100%; }

/* Ensure minimum spacing between content cards/sections */
section .content-wrapper > * + * { margin-top: var(--space-8); }

/* -------------------------------
   12) Responsive Rules
-------------------------------- */
/* Text-image stacks become columns on mobile by default (already column via wrap) */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

@media (min-width: 768px) {
  h1 { font-size: 48px; }
  .hero h1 { font-size: 52px; }

  /* Align some sections side-by-side when space allows */
  .features-grid, .services-grid, .testimonials-list, .faq-list { justify-content: space-between; }
}

/* -------------------------------
   13) Page-specific fine-tuning
-------------------------------- */
/* Lists inside sections */
section ul, section ol { display: flex; flex-direction: column; gap: 8px; padding-left: 0; }

/* Ordered lists numbers (custom minimal style) */
section ol { counter-reset: step; }
section ol li { counter-increment: step; position: relative; padding-left: 32px; }
section ol li::before {
  content: counter(step) "."; position: absolute; left: 0; top: 0;
  color: var(--mono-80); font-family: var(--font-display, Georgia), serif;
}

/* Emphasize key blocks within monochrome palette */
section:nth-of-type(odd):not(.hero) { background: var(--mono-0); }
section:nth-of-type(even):not(.hero) { background: var(--mono-5); }

/* Cards within services/features */
.service-card h3, .feature h3 { color: var(--mono-100); }

/* Contact details links */
.text-section a { color: var(--mono-100); border-bottom: 1px solid var(--brand-primary); }
.text-section a:hover { background: var(--brand-accent); color: #0f0f10 !important; }

/* Thank-you page CTA alignment */
.cta-group .btn + .btn { margin-left: 0; }

/* -------------------------------
   14) Forms (basic inputs if present later)
-------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-m);
  border: 1px solid var(--mono-20); background: var(--mono-0); color: var(--mono-100);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(30,58,95,0.15); outline: none; }
label { color: var(--mono-90); font-weight: 600; }

/* -------------------------------
   15) Accessibility & States
-------------------------------- */
::selection { background: var(--mono-100); color: var(--mono-0); }
[hidden] { display: none !important; }

/* -------------------------------
   16) Compliance with Flexbox-only requirement
   (All layout containers use display:flex; no grid/columns used.)
-------------------------------- */
/* Additional common containers switched to flex just in case */
nav, header, footer { display: block; }
footer .footer-nav { display: flex; }

/* Ensure no element overlaps by adding sufficient spacing */
section + section { margin-top: 0; }

/* End of stylesheet */