/* =====================================================================
   BogenWerk Ausbau – Nature Organic UI (Flexbox-only)
   - Mobile-first, earth tones, organic shapes, green accents
   - Uses brand colors & fonts
   - Includes mobile burger menu + cookie consent banner
   - Flexbox everywhere (no CSS Grid or Columns)
   ===================================================================== */

/* -------------------------
   CSS Reset & Base Normalize
   ------------------------- */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #6B8E3A; outline-offset: 2px; }

/* -------------------------
   Theme Variables & Fallbacks
   ------------------------- */
:root {
  --brand-primary: #253746; /* deep slate */
  --brand-secondary: #E07A00; /* warm amber */
  --brand-accent: #F4F6F8; /* light neutral */
  --earth-0: #FAF9F5; /* warm off-white */
  --earth-1: #EFEAE3; /* light sand */
  --earth-2: #E3DDD4; /* sand */
  --earth-3: #CFC7BC; /* stone */
  --green-1: #2E7D32; /* forest */
  --green-2: #6B8E3A; /* olive */
  --brown-1: #8D6E63; /* clay */
  --ink: #1E2A32; /* dark text */
  --muted: #5A6A73; /* secondary text */
  --card: #FFFFFF; /* card bg */
  --shadow-1: 0 2px 10px rgba(0,0,0,0.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.08);
}

/* -------------------------
   Base Typography
   ------------------------- */
html { font-size: 16px; }
body {
  font-family: Verdana, Arial, sans-serif; /* brand body */
  color: var(--ink);
  background: var(--earth-0);
  line-height: 1.6;
}
h1, h2, h3, .display { font-family: "Trebuchet MS", Tahoma, sans-serif; color: var(--brand-primary); }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: 0.2px; }
h2 { font-size: 24px; line-height: 1.25; margin-top: 8px; }
h3 { font-size: 18px; line-height: 1.3; }
p, li, span, address { font-size: 16px; color: #797f84; }
small, .fine-print { font-size: 14px; color: var(--muted); }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
}

/* -------------------------
   Global Layout Helpers (Flex-only)
   ------------------------- */
.container {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 20px;
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
}
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }
.section { margin-bottom: 60px; padding: 40px 20px; background: transparent; border-radius: 20px; }
section { margin-bottom: 60px; padding: 40px 0; }

/* Mandatory flex patterns */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--card); border: 1px solid var(--earth-2); border-radius: 18px; box-shadow: var(--shadow-1); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.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; color: var(--ink); border: 1px solid var(--earth-2); border-left: 6px solid var(--green-2); border-radius: 16px; box-shadow: var(--shadow-1); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}

/* -------------------------
   Header & Navigation
   ------------------------- */
header { background: var(--earth-0); border-bottom: 1px solid var(--earth-2); position: sticky; top: 0; z-index: 50; }
header .container { padding-top: 12px; padding-bottom: 12px; }
header .container > a img { height: 40px; }

.main-nav { display: none; align-items: center; gap: 14px; flex-wrap: wrap; }
.main-nav a { padding: 8px 12px; border-radius: 16px; color: var(--brand-primary); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.main-nav a:hover { background: var(--earth-1); transform: translateY(-1px); }

/* Header CTAs inline */
header .cta-primary, header .cta-secondary { display: none; }

/* Mobile burger */
.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 8px 20px; border-radius: 12px; background: var(--green-1); color: #fff; box-shadow: var(--shadow-1); transition: background .2s ease, transform .2s ease; }
.mobile-menu-toggle:hover { background: #246427; transform: translateY(-1px); }

/* Mobile Menu Overlay */
.mobile-menu {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; transform: translateX(-100%); transition: transform .35s ease; z-index: 100;
}
.mobile-menu .mobile-nav { background: var(--earth-0); width: 86%; max-width: 360px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-2); }
.mobile-menu .mobile-nav a { padding: 12px 14px; border-radius: 14px; color: var(--brand-primary); background: #fff; border: 1px solid var(--earth-2); }
.mobile-menu .mobile-nav a:hover { background: var(--earth-1); }
.mobile-menu-close { position: relative; align-self: flex-end; margin: 16px; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

/* Open states supported by JS (either .open or [aria-hidden="false"]) */
.mobile-menu.open, .mobile-menu[aria-hidden="false"] { transform: translateX(0); }

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

/* -------------------------
   Buttons & Links
   ------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-1); color: #fff; border: 2px solid transparent;
  padding: 12px 18px; border-radius: 999px; font-weight: 700; letter-spacing: .2px;
  box-shadow: var(--shadow-1); transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cta-primary:hover { background: #246427; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cta-primary:active { transform: translateY(0); }

.cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--brand-primary); border: 2px solid var(--green-2);
  padding: 10px 16px; border-radius: 999px; font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.cta-secondary:hover { background: var(--earth-1); color: var(--brand-primary); transform: translateY(-1px); }

/* Emphasis link style */
a { transition: color .2s ease; }
a:hover { color: var(--brand-secondary); }

/* -------------------------
   Section Elements & Organic Cards
   ------------------------- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trust-badges img { width: 36px; height: 36px; filter: saturate(.9); }

.contact-snippet, .contact-short, .phone-snippet, .opening-hours, .map-embed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted);
}
.contact-snippet img, .contact-short img, .phone-snippet img, .opening-hours img, .map-embed img { width: 20px; height: 20px; }

/* Feature grid & service cards */
.feature-grid, .service-cards, .kpi-tiles, .price-teasers, .project-list, .testimonial-list, .contact-methods, .district-list, .faq-list, .service-highlights-list, .included-services-list, .use-cases-list, .surface-types-list, .laying-patterns-list, .joint-options-list, .plaster-types-list, .surface-qualities_q2_q4, .substrate-preparation-list, .screed-types-list, .addons-list, .quality-controls-list, .system-suppliers-list, .segment-list, .team-roles-list, .qualifications-list, .certificates-list, .inspection-checkpoints, .dust-control-methods, .site-protection-measures, .supplier-list, .unit-notes, .exclusions-list, .site-protection-list, .controller-contact, .data-categories-list, .processing-purposes-list, .legal-basis-list, .recipient-categories-list, .user-rights-list, .privacy-contact-info, .cookie-categories-list {
  display: flex; flex-direction: column; gap: 12px; list-style: disc inside; padding-left: 0;
}

.feature-grid > div, .service-cards > div, .price-teasers > div, .project-list > .project-card, .kpi-tiles > div {
  background: #fff; border: 1px solid var(--earth-2); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, box-shadow .2s ease;
}
.feature-grid > div:hover, .service-cards > div:hover, .price-teasers > div:hover, .project-list > .project-card:hover, .kpi-tiles > div:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-2);
}
.feature-grid img, .service-cards img { width: 40px; height: 40px; }

/* KPI tiles emphasize */
.kpi-tiles > div { align-items: flex-start; border-left: 6px solid var(--green-2); }
.kpi-tiles strong { font-family: "Trebuchet MS", Tahoma, sans-serif; font-size: 28px; color: var(--brand-primary); }
.kpi-tiles span { color: var(--muted); }

/* Usp / inline lists visually grouped */
.usp-list, .service-highlights-list, .included-services-list, .district-list, .faq-list { background: #fff; border: 1px solid var(--earth-2); border-radius: 16px; box-shadow: var(--shadow-1); padding: 16px; }

/* Process steps ordered lists */
ol.process-steps, .gdpr-request-steps ol { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }
ol.process-steps li { padding-left: 4px; }

/* Cards & Notes */
.warranty-note, .insurance-coverage-note, .disclaimer-text, .service-radius-note, .quality-promise, .customer-focus-note, .on-time-delivery-note, .corner-profiles-note, .waterproofing-note, .drying-times-note, .silicone-works-note, .moisture-barrier-note, .soundproofing-note, .floor-leveling-note, .handover-protocol-note, .compatible-brands-note, .eco-options-note, .pricing-note, .min-charge-note, .substrate-check-note, .cleanup-disposal-note, .expedited-option-note, .material-supply-options, .result-summary, .payment-terms-note, .cancellation-policy-note, .support-contact, .third-country-transfers-note, .complaint-right-note, .data-security-measures, .cookies-note, .analytics-note, .strictly-necessary-note, .analytics-cookies-note, .marketing-cookies-note, .third-party-cookies-note, .how-to-control-cookies, .consent-withdrawal-steps, .logistics-note, .material-traceability-note, .apprenticeship-note, .application-cta, .mission-statement, .open-positions-teaser, .erasure-rectification-procedure, .data-portability-note, .objection-to-processing-note, .automated-decision-making-note, .site-visit-note, .validity-period-note, .scope-breakdown-note, .festpreis-option-note, .schedule-proposal-note, .support-hours-note, .identity-verification-note, .calendar-note, .file-upload, .gdpr-consent-checkbox, .result-metrics, .duration-and-area-info, .review-cta, .pricing-cta, .contact-form-minimal {
  background: #fff; border: 1px solid var(--earth-2); border-left: 6px solid var(--brand-secondary); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-1);
}
.mission-statement, .open-positions-teaser { border-left-color: var(--green-2); }

/* Project cards */
.project-card { border-left: 6px solid var(--green-2); }
.project-scope-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding-left: 0; }
.project-scope-tags li { background: var(--earth-1); border: 1px solid var(--earth-2); color: var(--brand-primary); padding: 4px 10px; border-radius: 999px; font-size: 14px; }
.challenge-solution-outcome { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }

/* Rating summary */
.rating-summary { display: flex; align-items: center; gap: 10px; color: var(--brand-primary); font-weight: 700; }
.rating-summary img { width: 22px; height: 22px; }

/* Contact blocks */
.contact-methods li, .contact-methods { list-style: none; }
.contact-methods li { display: flex; align-items: center; gap: 10px; }
.address-block { background: #fff; border: 1px solid var(--earth-2); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-1); line-height: 1.8; }

/* Tabs / filters */
.service-nav-tabs, .project-filters { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); }
.service-nav-tabs a, .project-filters a { padding: 8px 12px; border-radius: 14px; border: 1px solid var(--earth-2); background: #fff; color: var(--brand-primary); }
.service-nav-tabs a:hover, .project-filters a:hover { background: var(--earth-1); }

/* -------------------------
   Tables
   ------------------------- */
.pricing-tables table, .cookie-duration-table table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--earth-2); border-radius: 12px; overflow: hidden; }
.pricing-tables th, .pricing-tables td, .cookie-duration-table th, .cookie-duration-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--earth-2); }
.pricing-tables th, .cookie-duration-table th { background: var(--earth-1); font-weight: 700; color: var(--brand-primary); }
.pricing-tables tr:nth-child(even) td, .cookie-duration-table tr:nth-child(even) td { background: var(--brand-accent); }

/* -------------------------
   Testimonials (contrast safe)
   ------------------------- */
.testimonial-list { display: flex; flex-direction: column; gap: 16px; }
.testimonial-card p { color: var(--ink); }
.testimonial-card span { color: var(--brand-primary); }

@media (min-width: 768px) {
  .feature-grid, .service-cards, .kpi-tiles, .price-teasers, .project-list, .testimonial-list { flex-direction: row; flex-wrap: wrap; }
  .feature-grid > div, .service-cards > div, .price-teasers > div, .project-list > .project-card { flex: 1 1 260px; }
  .testimonial-list > .testimonial-card { flex: 1 1 320px; align-items: flex-start; }
}

/* -------------------------
   Footer
   ------------------------- */
footer { background: var(--brand-primary); color: #E9F1F2; padding: 30px 0; margin-top: 20px; }
footer .container { gap: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: #E9F1F2; opacity: 0.9; padding: 8px 10px; border-radius: 12px; transition: background .2s ease; }
.footer-nav a:hover { background: rgba(255,255,255,0.08); }
.brand-badge { display: flex; align-items: center; gap: 10px; }
.brand-badge img { width: 28px; height: 28px; filter: brightness(1.1) saturate(0.9); }

/* -------------------------
   Page-specific minor tweaks
   ------------------------- */
.timeline { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.result-metrics { font-weight: 600; }
.duration-and-area-info { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); }
.contact-channels { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-channels a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--earth-2); border-radius: 14px; background: #fff; }

/* -------------------------
   Generic images & icons
   ------------------------- */
.content-wrapper img[alt^="Icon"], .content-wrapper img[alt^="Telefon"], .content-wrapper img[alt^="E-Mail"], .content-wrapper img[alt^="Karte"], .content-wrapper img[alt^="Kalender"] { width: 20px; height: 20px; }

/* -------------------------
   Spacing utilities (8/12/16/24/32)
   ------------------------- */
.gap-8 { display: flex; gap: 8px; }
.gap-12 { display: flex; gap: 12px; }
.gap-16 { display: flex; gap: 16px; }
.gap-24 { display: flex; gap: 24px; }
.gap-32 { display: flex; gap: 32px; }

/* -------------------------
   Responsive behavior
   ------------------------- */
@media (min-width: 640px) {
  .container { gap: 24px; }
}
@media (min-width: 1024px) {
  section { padding: 56px 0; }
}

/* -------------------------
   Micro-interactions
   ------------------------- */
.card:hover a, .testimonial-card:hover a { color: var(--brand-secondary); }
.card:has(.cta-primary):hover { transform: translateY(-2px); }

/* -------------------------
   Cookie Consent Banner & Modal
   ------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #ffffff; border-top: 3px solid var(--green-2); box-shadow: 0 -6px 18px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; gap: 16px; padding: 16px 20px;
}
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--green-1); color: #fff; border: 2px solid transparent; padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.cookie-banner .btn-reject { background: transparent; color: var(--brand-primary); border: 2px solid var(--green-2); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.cookie-banner .btn-settings { background: var(--earth-1); color: var(--brand-primary); border: 2px solid var(--earth-2); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.cookie-banner.hidden { display: none; }

/* Cookie preferences modal */
.cookie-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px;
}
.cookie-modal-overlay.open { display: flex; }
.cookie-modal {
  background: #fff; width: 100%; max-width: 720px; border-radius: 18px; border: 1px solid var(--earth-2); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
}
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .cookie-category { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--earth-2); border-radius: 12px; padding: 12px; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-modal .btn-save { background: var(--green-1); color: #fff; border: 2px solid transparent; padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.cookie-modal .btn-cancel { background: transparent; color: var(--brand-primary); border: 2px solid var(--green-2); padding: 10px 16px; border-radius: 999px; font-weight: 700; }

/* -------------------------
   Accessibility & Readability helpers
   ------------------------- */
.muted { color: var(--muted); }
.bold { font-weight: 700; }

/* -------------------------
   Header hero spacing (generic)
   ------------------------- */
main > section:first-of-type { background: var(--brand-accent); border-bottom: 1px solid var(--earth-2); }

/* -------------------------
   Tables in legal pages spacing
   ------------------------- */
.request-form-link a { color: var(--green-1); font-weight: 700; }

/* -------------------------
   Ensure adequate spacing between all elements
   ------------------------- */
.content-wrapper > * + * { margin-top: 0; }
.container > * + * { margin-top: 0; }

/* -------------------------
   Desktop alignment improvements
   ------------------------- */
@media (min-width: 1024px) {
  .contact-methods { flex-direction: row; flex-wrap: wrap; }
  .contact-methods li { margin-right: 12px; }
  .service-nav-tabs, .project-filters { align-items: center; }
}

/* -------------------------
   Print basics (optional, simple)
   ------------------------- */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  a { text-decoration: underline; }
}