/* ===============================
   Echo & Schatten Raumgestaltung
   Monochrome Sophisticated UI — Flexbox Only
   style.css (mobile-first)
   =============================== */

/* -------------------------------
   1) CSS Reset / Normalize
-------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding-left: 1.25rem; }
h1, h2, h3, h4, h5, h6, p { margin: 0 0 12px; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #6C7A6A; outline-offset: 2px; }

/* -------------------------------
   2) Design Tokens (with fallbacks)
-------------------------------- */
:root {
  --clr-bg: #FFFFFF;
  --clr-text: #111111;
  --clr-primary: #1F1F1F;
  --clr-secondary: #6C7A6A;
  --clr-accent: #F3F1EB;
  --clr-muted: #8C8C8C;
  --clr-border: rgba(17,17,17,0.12);
  --radius-s: 6px;
  --radius-m: 10px;
  --shadow-s: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(17,17,17,0.06);
  --shadow-m: 0 6px 18px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-60: 60px;
}

/* -------------------------------
   3) Base Typography & Body
-------------------------------- */
body {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: var(--clr-text);
  background: var(--clr-bg);
  font-size: 16px;
  letter-spacing: 0.1px;
}

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; color: var(--clr-primary); line-height: 1.25; }
h1 { font-size: 32px; letter-spacing: -0.2px; }
h2 { font-size: 24px; letter-spacing: -0.1px; margin-bottom: 8px; }
h3 { font-size: 20px; letter-spacing: 0; margin-top: 8px; }

p { color: #222; }
strong { color: #000; font-weight: 700; }
.tagline { color: #444; font-style: italic; letter-spacing: 0.5px; }

/* Links */
a { color: var(--clr-primary); text-decoration-color: rgba(31,31,31,0.2); text-underline-offset: 3px; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--clr-secondary); outline-offset: 2px; }

/* -------------------------------
   4) Layout Containers (Flex-only)
-------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Mandatory spacing pattern: apply to both .section and section element */
.section { margin-bottom: 60px; padding: 40px 20px; }
section { margin-bottom: var(--space-60); padding: var(--space-40) 0; display: flex; }
section > .container { gap: 20px; }

/* Utility layout patterns (Flex-only, mandatory) */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--clr-border); border-radius: var(--radius-m); padding: 20px; box-shadow: var(--shadow-s); }
.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: #FAFAFA; color: #111; border: 1px solid var(--clr-border); border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Ensure spacing between sequential cards */
.testimonial-card + .testimonial-card { margin-top: 16px; }

/* -------------------------------
   5) Header & Navigation
-------------------------------- */
header { border-bottom: 1px solid var(--clr-border); background: #fff; position: relative; z-index: 50; }
header .content-wrapper { padding: 16px 0; }
.logo img { height: 36px; width: auto; filter: grayscale(100%); }

.main-nav { display: none; gap: 16px; align-items: center; flex-wrap: wrap; }
.main-nav a { color: #222; padding: 8px 10px; border-radius: 6px; transition: color .2s ease, background-color .2s ease; }
.main-nav a:hover { background: var(--clr-accent); color: #000; }
.main-nav a:focus-visible { outline: 2px solid var(--clr-secondary); }

.header-ctas { display: none; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Mobile hamburger button */
.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--clr-border); background: #fff; color: #000; transition: background-color .2s ease, transform .08s ease; }
.mobile-menu-toggle:hover { background: #F5F5F5; }
.mobile-menu-toggle:active { transform: scale(0.98); }

/* Desktop header layout */
@media (min-width: 1024px) {
  header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .main-nav { display: flex; }
  .header-ctas { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* -------------------------------
   6) Buttons & Micro-interactions
-------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid #1A1A1A; background: transparent; color: #111; line-height: 1.2; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease; box-shadow: 0 0 0 rgba(0,0,0,0); }
.button:hover { background: #F6F6F6; }
.button:active { transform: translateY(1px); }

.button-primary { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); box-shadow: var(--shadow-s); }
.button-primary:hover { background: #0F0F0F; box-shadow: var(--shadow-m); }

.button-secondary { background: #fff; color: #111; border-color: #111; }
.button-secondary:hover { background: var(--clr-accent); }

/* Subtle tertiary text-underline button look if needed */
.button-ghost { border-color: transparent; background: transparent; color: #222; }
.button-ghost:hover { background: #F5F5F5; }

/* -------------------------------
   7) Section Content Styling
-------------------------------- */
.text-section { display: flex; flex-direction: column; gap: 12px; max-width: 72ch; }
.text-section > div, .text-section > p, .text-section > ul, .text-section > ol { margin-bottom: 4px; }
.text-section ul li, .text-section ol li { margin-bottom: 8px; }

/* Emphasis blocks and lists appearance */
ul li::marker { color: #444; }
ol { padding-left: 1.25rem; }

/* -------------------------------
   8) Testimonials (light background for readability)
-------------------------------- */
.testimonial-card p { margin: 0; }
.testimonial-card strong { font-weight: 700; }

/* -------------------------------
   9) Footer
-------------------------------- */
footer { background: #fff; border-top: 1px solid var(--clr-border); }
footer .content-wrapper { padding: 24px 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.footer-nav a { color: #333; padding: 6px 0; }
.footer-nav a:hover { color: #000; text-decoration: underline; }

@media (min-width: 1024px) {
  footer .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
}

/* -------------------------------
   10) Mobile Menu (overlay)
-------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0 0 0 0;
  background: #0E0E0E;
  color: #fff;
  transform: translateX(100%);
  transition: transform .35s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
}
/* Open states supported */
.mobile-menu.open, .mobile-menu.is-open, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }

.mobile-menu-close { align-self: flex-end; width: 42px; height: 42px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); color: #fff; background: transparent; transition: background-color .2s ease; }
.mobile-menu-close:hover { background: rgba(255,255,255,0.06); }

.mobile-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mobile-nav a { color: #fff; padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav a:hover { background: rgba(255,255,255,0.06); }

/* Hide main nav on mobile (shown via desktop MQ above) */
@media (max-width: 1023px) {
  .main-nav, .header-ctas { display: none; }
}

/* -------------------------------
   11) Cookie Consent Banner & Modal
-------------------------------- */
/* Banner */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #111;
  color: #F5F5F5;
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.16);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform .35s ease;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 20px;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { display: flex; flex-direction: column; gap: 8px; max-width: 80ch; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cookie-actions .btn-accept { background: #FFFFFF; color: #111; border: 1px solid #fff; border-radius: 8px; padding: 10px 14px; }
.cookie-actions .btn-accept:hover { background: #F3F3F3; }
.cookie-actions .btn-reject { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 8px; padding: 10px 14px; }
.cookie-actions .btn-reject:hover { background: rgba(255,255,255,0.06); }
.cookie-actions .btn-settings { background: var(--clr-accent); color: #111; border: 1px solid #E6E1D6; border-radius: 8px; padding: 10px 14px; }
.cookie-actions .btn-settings:hover { filter: brightness(0.96); }

/* Modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 10000; }
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content { background: #fff; color: #111; border: 1px solid var(--clr-border); border-radius: 12px; width: 100%; max-width: 640px; box-shadow: var(--shadow-m); display: flex; flex-direction: column; }
.cookie-modal .cookie-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--clr-border); }
.cookie-modal .cookie-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.cookie-modal .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--clr-border); border-radius: 10px; padding: 12px 14px; background: #FAFAFA; }
.cookie-modal .cookie-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--clr-border); }

/* Toggle switch (checkbox) */
.switch { position: relative; width: 44px; height: 26px; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.slider { position: relative; width: 44px; height: 26px; background: #D9D9D9; border-radius: 26px; transition: background-color .2s ease; border: 1px solid #CFCFCF; }
.slider::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform .2s ease; }
.switch input:checked + .slider { background: #111; border-color: #111; }
.switch input:checked + .slider::after { transform: translateX(18px); }

/* -------------------------------
   12) Cards and Surfaces (general)
-------------------------------- */
.surface { background: #fff; border: 1px solid var(--clr-border); border-radius: var(--radius-m); box-shadow: var(--shadow-s); padding: 20px; }

/* -------------------------------
   13) Imagery & Media Helpers
-------------------------------- */
figure { margin: 0; }
.img-round { border-radius: 12px; overflow: hidden; }

/* -------------------------------
   14) Responsive Rules
-------------------------------- */
/* Text-image alignment on mobile */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}

/* Larger typography on wider screens for hierarchy */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
}
@media (min-width: 1200px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
}

/* Arrange hero sections for better rhythm */
@media (min-width: 1024px) {
  main section .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  main section .text-section { max-width: 780px; }
}

/* Ensure adequate spacing between repeated elements */
.text-section .button + .button { margin-left: 6px; }

/* -------------------------------
   15) Accessibility & States
-------------------------------- */
::selection { background: #222; color: #fff; }
[hidden] { display: none !important; }

/* -------------------------------
   16) Monochrome Sophisticated details
-------------------------------- */
/* Subtle borders and dividers */
.divider { height: 1px; width: 100%; background: var(--clr-border); }

/* Quote styling if needed */
blockquote { margin: 0; padding-left: 16px; border-left: 3px solid #111; color: #222; font-style: italic; }

/* -------------------------------
   17) Page-specific fine-tuning
-------------------------------- */
/* Encourage vertical rhythm in content wrappers */
main .content-wrapper { padding: 10px 0; }

/* Project/article groupings */
.text-section article { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--clr-border); border-radius: 10px; background: #fff; box-shadow: var(--shadow-s); }
.text-section article + article { margin-top: 16px; }

/* Contact info inline icons */
.text-section img[alt="Telefon"], .text-section img[alt="E-Mail"] { display: inline-block; vertical-align: middle; margin-right: 6px; filter: grayscale(100%); }

/* Header CTA group inside hero */
.text-section > div:has(.button) { display: flex; flex-wrap: wrap; gap: 10px; }

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