/* =============================
   Fuge & Fläche – style.css
   Monochrome Sophisticated Theme
   Mobile-first, Flexbox-only layouts
   ============================= */

/* =============================
   1) Reset & Base
   ============================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding-left: 1.2rem; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }

/* =============================
   2) Theme Tokens (CSS variables with fallbacks)
   ============================= */
:root {
  /* Brand palette (used subtly to keep monochrome sophistication) */
  --brand-primary: #1E2E3A; /* deep slate blue/gray */
  --brand-secondary: #B65E34; /* terracotta accent (micro-use) */
  --brand-accent: #F2EFE9; /* warm light (used sparingly) */

  /* Monochrome core */
  --bg: #ffffff;
  --surface: #f7f7f7;
  --surface-2: #f0f0f0;
  --border: #e5e5e5;
  --text: #111111;
  --muted: #6b6b6b;
  --muted-2: #9a9a9a;
  --elevate: rgba(17,17,17,0.06);
  --elevate-2: rgba(17,17,17,0.1);
  --black: #0d0d0e;
  --white: #ffffff;

  /* Typography */
  --ff-display: "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ff-body: Verdana, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Sizing */
  --max-w: 1200px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 2px 10px var(--elevate);
  --shadow-md: 0 6px 20px var(--elevate);

  /* Spacing scale */
  --s-4: 4px;  --s-6: 6px;  --s-8: 8px;  --s-10: 10px;  --s-12: 12px;
  --s-14: 14px; --s-16: 16px; --s-18: 18px; --s-20: 20px; --s-24: 24px; --s-30: 30px; --s-32: 32px; --s-36: 36px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-60: 60px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography scale */
h1 { font-family: var(--ff-display); font-size: 32px; line-height: 1.15; letter-spacing: 0.2px; font-weight: 700; }
h2 { font-family: var(--ff-display); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: 0.2px; }
h3 { font-family: var(--ff-display); font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: 0.2px; }
p, li { font-size: 16px; }
.tagline { color: var(--muted); font-style: italic; }

/* Links & focus states */
a, .link { color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:hover { color: var(--black); text-decoration-color: var(--muted); }
:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; }

/* Lists spacing */
ul, ol { display: flex; flex-direction: column; gap: var(--s-8); }

/* =============================
   3) Core Layout Primitives (Flexbox-only)
   ============================= */
.container { width: 100%; display: flex; justify-content: center; padding: 0 var(--s-20); }
.content-wrapper { width: 100%; max-width: var(--max-w); display: flex; flex-direction: column; gap: var(--s-24); }

/* Section spacing - also provide .section utility as required */
section { margin-bottom: var(--s-60); padding: var(--s-40) var(--s-20); }
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Utility/mandatory patterns */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.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: var(--surface); border: 1px solid var(--border); border-left: 4px solid #222; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); color: var(--text); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Row utilities */
.row { display: flex; flex-wrap: wrap; gap: var(--s-20); }
.stack { display: flex; flex-direction: column; gap: var(--s-16); }

/* =============================
   4) Header & Navigation
   ============================= */
header { position: sticky; top: 0; z-index: 1000; background: var(--white); border-bottom: 1px solid var(--border); backdrop-filter: saturate(180%) blur(6px); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-16); padding-top: var(--s-12); padding-bottom: var(--s-12); }

.brand { display: flex; align-items: center; gap: var(--s-10); color: var(--text); font-family: var(--ff-display); font-weight: 700; letter-spacing: 0.3px; }
.brand img { width: 32px; height: 32px; }
.brand span { font-size: 16px; }

.main-nav { display: none; align-items: center; gap: var(--s-16); }
.main-nav a { padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--text); transition: background-color .2s ease, color .2s ease; }
.main-nav a:hover { background: var(--surface); }

.cta-nav { display: none; align-items: center; gap: var(--s-10); }
.cta-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 8px; border: 1px solid #111; background: #111; color: #fff; box-shadow: var(--shadow-sm); transition: transform .15s ease, background .2s ease, color .2s ease; }
.cta-nav a:hover { transform: translateY(-1px); background: #000; }
.cta-nav a:last-child { background: transparent; color: #111; border: 1px solid #111; }
.cta-nav a:last-child:hover { background: #111; color: #fff; }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--text); box-shadow: var(--shadow-sm); transition: background .2s ease; }
.mobile-menu-toggle:hover { background: var(--surface); }

/* Mobile menu (off-canvas) */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: 86%; max-width: 360px; height: 100vh; background: #0f0f11; color: #f3f3f3; box-shadow: -12px 0 30px rgba(0,0,0,.3); transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; padding: var(--s-20); gap: var(--s-20); z-index: 1100; }
.mobile-menu.open, .mobile-menu.active, body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); color: #f3f3f3; }
.mobile-nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav a { display: block; padding: 12px 10px; border-radius: 8px; color: #f3f3f3; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); transition: background .2s ease, color .2s ease; }
.mobile-nav a:hover { background: rgba(255,255,255,.08); }

/* Optional page overlay when menu open */
body.menu-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1050; }

/* =============================
   5) Hero & Common Sections
   ============================= */
/* Hero subtle separation for clarity */
main > section[aria-label="Hero"] { background: var(--surface); border-bottom: 1px solid var(--border); }
main > section[aria-label="Hero"] h1 { font-size: 28px; }
main > section[aria-label="Hero"] p { color: var(--muted); }

/* CTA row buttons */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; }
.cta-row a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 10px; border: 1px solid #111; background: #111; color: #fff; box-shadow: var(--shadow-sm); font-weight: 700; letter-spacing: 0.2px; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.cta-row a:hover { transform: translateY(-1px); background: #000; box-shadow: var(--shadow-md); }
.cta-row a:last-child { background: transparent; color: #111; }
.cta-row a:last-child:hover { background: #111; color: #fff; }

/* Trust badges as neat chips */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--s-10); list-style: none; padding-left: 0; }
.trust-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.trust-badges li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a9a9a9; }

/* Metrics compact cards */
.metrics { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.metrics p { padding: 12px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.metrics strong { font-family: var(--ff-display); font-size: 18px; color: var(--text); }

/* Text-image sections (text-only in current HTML, but ready for images) */
.text-image-section > * { flex: 1 1 280px; }

/* Testimonials – must be dark text on light background for readability */
.testimonial-card p { margin: 0; }
.testimonial-card p + p { color: var(--muted); }

/* Footer */
footer { background: #0f0f11; color: #e9e9e9; }
footer .content-wrapper { flex-direction: column; gap: var(--s-24); padding-top: var(--s-40); padding-bottom: var(--s-40); }
footer .brand { color: #fff; }
footer p, footer a { color: #dcdcdc; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s-12); }
footer nav a { padding: 6px 8px; border-radius: 6px; transition: background .2s ease; }
footer nav a:hover { background: rgba(255,255,255,.08); }
footer .social { display: flex; flex-wrap: wrap; gap: 8px; }

/* =============================
   6) Content Defaults
   ============================= */
main p { color: var(--text); }
main h2 { padding-top: var(--s-8); border-top: 2px solid #1a1a1a; }
main h3 { color: #1a1a1a; }

/* Lists inside content receive tidy spacing */
.content-wrapper > ul, .content-wrapper > ol { gap: var(--s-8); }
.content-wrapper > ul li, .content-wrapper > ol li { color: var(--text); }

/* Anchor accents within content paragraphs */
main p a { text-decoration: underline; text-decoration-color: var(--muted-2); }
main p a:hover { text-decoration-color: #111; }

/* =============================
   7) Buttons (generic utility if needed)
   ============================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1px solid #111; background: #111; color: #fff; font-weight: 700; box-shadow: var(--shadow-sm); transition: transform .15s ease, background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-1px); background: #000; }
.btn--ghost { background: transparent; color: #111; }
.btn--ghost:hover { background: #111; color: #fff; }

/* =============================
   8) Cookie Consent Banner & Modal
   ============================= */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: #111; color: #f5f5f5; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -8px 20px rgba(0,0,0,.25); display: flex; }
.cookie-banner .container { padding: var(--s-16) var(--s-20); }
.cookie-banner .content-wrapper { gap: var(--s-12); }
.cookie-text { display: flex; flex-direction: column; gap: var(--s-8); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--s-10); }
.cookie-actions .btn-accept { background: #fff; color: #111; border: 1px solid #fff; }
.cookie-actions .btn-accept:hover { background: #e9e9e9; }
.cookie-actions .btn-reject { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.cookie-actions .btn-settings { background: transparent; color: #fff; border-bottom: 1px dashed rgba(255,255,255,.5); padding: 10px 0; border-radius: 0; }

/* Hide utility for banner */
.cookie-hidden, .is-hidden { display: none !important; }

/* Cookie modal overlay */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; padding: var(--s-20); z-index: 1300; }
.cookie-modal.open { display: flex; }
.cookie-modal-content { width: 100%; max-width: 640px; background: #fff; color: #111; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-16) var(--s-20); border-bottom: 1px solid var(--border); }
.cookie-modal-body { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-20); }
.cookie-pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: 12px 0; border-bottom: 1px dashed var(--border); }
.cookie-modal-footer { display: flex; flex-wrap: wrap; gap: var(--s-10); justify-content: flex-end; padding: var(--s-16) var(--s-20); border-top: 1px solid var(--border); }

/* Toggle mimic (if used) */
.toggle { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #d9d9d9; transition: background .2s ease; display: inline-flex; align-items: center; padding: 3px; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translateX(0); transition: transform .2s ease; }
.toggle.on { background: #111; }
.toggle.on::after { transform: translateX(18px); }

/* =============================
   9) Forms (generic)
   ============================= */
input, select, textarea { width: 100%; padding: 12px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--text); }
label { display: block; margin-bottom: 6px; color: var(--muted); }

/* =============================
   10) Responsive (Flex behavior only)
   ============================= */
@media (min-width: 480px) {
  h1 { font-size: 36px; }
  main > section[aria-label="Hero"] h1 { font-size: 34px; }
}

@media (min-width: 768px) {
  /* Header: show desktop nav */
  .main-nav { display: flex; }
  .cta-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Arrange hero CTAs inline */
  .cta-row { flex-wrap: wrap; }

  /* Text-image side-by-side */
  .text-image-section { flex-direction: row; align-items: center; }
  .text-image-section > * { flex: 1 1 40%; }

  /* Footer columns */
  footer .content-wrapper { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  footer .content-wrapper > * { flex: 1 1 260px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }
  .content-wrapper { gap: var(--s-32); }
  section { padding: var(--s-56) var(--s-20); }
}

/* =============================
   11) Micro-interactions & Accents
   ============================= */
/* Elegant underline on headings (thin rule) */
main h2 { position: relative; padding-top: var(--s-12); }
main h2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 10px; background: #1a1a1a; }

/* Link hover underline reveal */
a { background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size .25s ease, color .2s ease; text-decoration: none; }
a:hover { background-size: 100% 1px; }

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

/* =============================
   12) Accessibility & Contrast tweaks
   ============================= */
::selection { background: #111; color: #fff; }

/* =============================
   13) Additional Layout Helpers (Flexbox-only)
   ============================= */
/* For any content lists appearing as galleries */
ul, ol { width: 100%; }
.content-grid > * { flex: 1 1 280px; }
.card-container > * { flex: 1 1 300px; }

/* Ensure minimum spacing between all content blocks */
.content-wrapper > * + * { margin-top: 0; }

/* =============================
   14) Page-specific gentle touches
   ============================= */
/* Reference lists read easier */
section[aria-label^="Projekt"] ul, section[aria-label*="Referenzen"] ul { gap: var(--s-10); }

/* Thank-you prominent CTAs */
section[aria-label="Hero"] .cta-row a:first-child { background: #111; color: #fff; }

/* =============================
   15) Print basics
   ============================= */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal, footer { display: none !important; }
  section { padding: 0; margin: 0 0 20px 0; }
}