/* BloomBay Passages Renovierung - Soft Pastel UI - Mobile-first, Flexbox-only */
/* ===================== */
/* 1) Reset & Base Setup */
/* ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #1F2D3A; background-color: #FAFBFD; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1F2D3A; text-decoration: none; }
ul, ol { padding-left: 20px; }
button { font: inherit; background: none; border: none; padding: 0; cursor: pointer; color: inherit; }
:focus { outline: 2px dashed #C38E5B; outline-offset: 2px; }

/* ===================== */
/* 2) Theme Variables    */
/* ===================== */
:root {
  --primary: #1F2D3A; /* Brand primary (ink) */
  --secondary: #C38E5B; /* Warm accent */
  --accent: #F5F7FA; /* Light accent bg */
  --text: #223546; /* comfy body text */
  --muted: #5C7489; /* muted text */
  --white: #FFFFFF;
  /* Soft pastel palette */
  --pastel-sky: #EAF6FF;
  --pastel-lavender: #F3E8FF;
  --pastel-mint: #E8FAF2;
  --pastel-peach: #FFF1E6;
  --pastel-rose: #FDECF3;
  --shadow: 0 6px 18px rgba(31,45,58,0.08);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 60px;
}

/* ===================== */
/* 3) Typography Scale   */
/* ===================== */
h1, h2, h3, h4 { font-family: "Trebuchet MS", Tahoma, Geneva, Verdana, sans-serif; color: var(--primary); margin: 0 0 var(--space-3); line-height: 1.2; }
h1 { font-size: 32px; }
h2 { font-size: 24px; margin-top: var(--space-6); }
h3 { font-size: 18px; color: #981233; }
p, li { color: #8f9396; font-size: 16px; margin: 0 0 var(--space-3); }
.small { font-size: 14px; color: var(--muted); }
.eyebrow { letter-spacing: 0.08em; text-transform: uppercase; color: #6E7F91; font-size: 14px; margin-bottom: var(--space-2); }
.subheadline { font-size: 18px; color: #2A3B4A; }

/* ===================== */
/* 4) Layout Utilities   */
/* ===================== */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--space-4); }
.content-wrapper { display: flex; flex-direction: column; gap: var(--space-4); }
section { margin-bottom: var(--space-8); padding: var(--space-7) var(--space-4) var(--space-7); background: transparent; border-radius: 0; }
.section { margin-bottom: 60px; padding: 40px 20px; } /* mandatory pattern */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; } /* mandatory pattern */
.card { margin-bottom: 20px; position: relative; } /* mandatory pattern */
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } /* mandatory pattern */
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } /* mandatory pattern */
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; } /* mandatory pattern */
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } /* mandatory pattern */

/* Soft section alternation for dreamy atmosphere */
section:nth-of-type(odd) { background: var(--accent); border-radius: var(--radius-l); }
section:nth-of-type(even) { background: var(--white); border-radius: var(--radius-l); }

/* Generic card appearance for elements that act like cards */
.card, .text-section, .testimonial-card { background: var(--white); border-radius: var(--radius-m); box-shadow: var(--shadow); padding: var(--space-5); }

/* ===================== */
/* 5) Header & Navigation*/
/* ===================== */
header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid #E4ECF2; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; }
.logo img { height: 36px; width: auto; }

/* Main nav (desktop hidden by default on mobile) */
.main-nav { display: none; align-items: center; gap: var(--space-4); }
.main-nav a { color: var(--primary); padding: 8px 10px; border-radius: 8px; transition: background-color 200ms ease, color 200ms ease; }
.main-nav a:hover, .main-nav a:focus { background: var(--pastel-sky); color: var(--primary); }

/* Header CTAs */
.header-cta { display: none; align-items: center; gap: var(--space-3); }
.header-cta a { background: var(--secondary); color: var(--white); padding: 10px 14px; border-radius: 999px; box-shadow: 0 4px 10px rgba(195,142,91,0.25); transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; }
.header-cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(195,142,91,0.32); background: #B47C45; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--pastel-lavender); color: var(--primary); font-size: 20px; }
.mobile-menu-toggle:hover { background: var(--pastel-sky); }

/* Mobile slide-in menu */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: 100%; height: 100%; background: rgba(31,45,58,0.25); display: flex; justify-content: flex-end; transform: translateX(100%); transition: transform 320ms ease; z-index: 100; }
.mobile-menu .mobile-nav { background: var(--white); width: 85%; max-width: 360px; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: -8px 0 24px rgba(31,45,58,0.18); }
.mobile-menu .mobile-nav a { padding: 12px 10px; border-radius: 10px; background: var(--accent); color: var(--primary); font-size: 18px; }
.mobile-menu .mobile-nav a:hover { background: var(--pastel-peach); }
.mobile-menu .mobile-menu-close { align-self: flex-end; margin: var(--space-4); width: 36px; height: 36px; border-radius: 10px; background: var(--pastel-rose); color: var(--primary); font-size: 18px; }
/* Open state (JS toggles .is-open) */
.mobile-menu.is-open { transform: translateX(0); }

/* Show desktop nav at wider screens */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ===================== */
/* 6) Hero Section       */
/* ===================== */
.hero { background: var(--pastel-sky); border-radius: 0 0 var(--radius-l) var(--radius-l); }
.hero .content-wrapper { align-items: flex-start; }
.hero h1 { font-size: 32px; }
.hero .subheadline { max-width: 780px; }

/* CTA group */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cta-group a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease; }
.cta-group a:first-child { background: var(--secondary); color: var(--white); box-shadow: 0 8px 18px rgba(195,142,91,0.3); }
.cta-group a:first-child:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(195,142,91,0.35); }
.cta-group a:last-child { background: var(--white); color: var(--primary); border: 1px solid #E4ECF2; }
.cta-group a:last-child:hover { background: var(--pastel-mint); }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.trust-badges > div { display: flex; align-items: center; gap: var(--space-2); padding: 10px 12px; background: var(--white); border: 1px solid #EDF3F8; border-radius: 999px; box-shadow: var(--shadow); }
.trust-badges img { width: 20px; height: 20px; }
.trust-badges p { margin: 0; font-size: 14px; color: var(--primary); }

/* Contact shortlist */
.contact-shortlist { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.contact-shortlist p { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; background: var(--pastel-lavender); border-radius: 999px; color: var(--primary); }
.contact-shortlist img { width: 18px; height: 18px; }

/* ===================== */
/* 7) Features & Content */
/* ===================== */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.text-section { flex: 1 1 260px; min-width: 240px; background: var(--white); border: 1px solid #EDF3F8; }
.text-section h3 { margin-bottom: 8px; }

/* Lists spacing */
ul li + li, ol li + li { margin-top: 6px; }
ul li::marker, ol li::marker { color: #9BB6CA; }

/* Ordered lists style cozy */
ol { counter-reset: step; }
ol li { position: relative; padding-left: 6px; }

/* ===================== */
/* 8) Testimonials       */
/* ===================== */
.testimonial-card { background: #FFFFFF; border: 1px solid #E8EEF4; border-left: 6px solid #C4DDF0; border-radius: var(--radius-m); box-shadow: var(--shadow); color: var(--primary); }
.testimonial-card p { margin: 0; }
.testimonial-card p + p { margin-top: 8px; }
.testimonial-card strong { color: var(--primary); }

/* ===================== */
/* 9) Footer             */
/* ===================== */
footer { background: var(--primary); color: var(--white); padding: var(--space-7) 0; margin-top: var(--space-8); }
footer .content-wrapper { flex-direction: column; gap: var(--space-6); }
.footer-brand p, footer a { color: #EAF2F7; }
.footer-brand a img { height: 36px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-nav a { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); }
.footer-nav a:hover { background: rgba(255,255,255,0.12); }
.newsletter-optin { background: rgba(255,255,255,0.06); border-radius: var(--radius-m); padding: var(--space-4); }

@media (min-width: 992px) {
  footer .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .footer-brand, .footer-nav, .newsletter-optin { flex: 1 1 30%; }
}

/* ===================== */
/* 10) Reusable elements */
/* ===================== */
.badge { display: inline-flex; align-items: center; padding: 6px 10px; background: var(--pastel-mint); color: var(--primary); border-radius: 999px; font-size: 14px; }
.muted { color: var(--muted); }

/* Hover micro-interactions for links */
a:hover { color: #16222C; }

/* ===================== */
/* 11) Responsive Rules  */
/* ===================== */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .hero h1 { font-size: 44px; }
}
@media (min-width: 1200px) {
  h1 { font-size: 48px; }
  .hero h1 { font-size: 52px; }
}

/* ===================== */
/* 12) Mobile-first nav  */
/* ===================== */
/* On small screens main nav hidden (already default). Ensure layout */
header .container { display: flex; }

/* ===================== */
/* 13) Buttons & States  */
/* ===================== */
.button, .btn, .main-nav a.button, .header-cta a, .cta-group a { transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.button:active, .btn:active, .header-cta a:active, .cta-group a:active { transform: translateY(0); box-shadow: none; }

/* ===================== */
/* 14) Cookie Consent    */
/* ===================== */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120; background: var(--white); border: 1px solid #E7EEF5; box-shadow: 0 10px 30px rgba(31,45,58,0.18); border-radius: 16px; padding: 16px; display: none; align-items: center; gap: 16px; }
.cookie-banner.is-visible { display: flex; }
.cookie-banner .cookie-text { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn-accept { background: var(--secondary); color: var(--white); padding: 10px 14px; border-radius: 999px; }
.cookie-buttons .btn-reject { background: var(--accent); color: var(--primary); padding: 10px 14px; border-radius: 999px; border: 1px solid #E4ECF2; }
.cookie-buttons .btn-settings { background: var(--pastel-lavender); color: var(--primary); padding: 10px 14px; border-radius: 999px; }
.cookie-buttons .btn-accept:hover { background: #B47C45; }
.cookie-buttons .btn-reject:hover { background: var(--pastel-mint); }
.cookie-buttons .btn-settings:hover { background: var(--pastel-sky); }

/* Cookie modal overlay */
.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(31,45,58,0.5); display: none; align-items: center; justify-content: center; z-index: 130; }
.cookie-modal-overlay.is-visible { display: flex; }
.cookie-modal { width: min(720px, 94vw); background: var(--white); border-radius: 18px; box-shadow: 0 14px 40px rgba(31,45,58,0.25); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; background: var(--accent); padding: 12px; border-radius: 12px; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.cookie-actions .btn { background: var(--secondary); color: var(--white); padding: 10px 16px; border-radius: 999px; }
.cookie-actions .btn-outline { background: var(--white); border: 1px solid #E4ECF2; color: var(--primary); }

/* Simple toggle switch */
.toggle { display: inline-flex; align-items: center; gap: 10px; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #D6E3EC; transition: background 200ms ease; display: inline-flex; align-items: center; padding: 3px; }
.switch::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,0.15); transform: translateX(0); transition: transform 200ms ease; }
.switch.is-on { background: #A5D8C7; }
.switch.is-on::after { transform: translateX(18px); }

/* ===================== */
/* 15) Additional Layout */
/* ===================== */
/* Ensure no overlaps and consistent spacing */
.content-wrapper > * + * { margin-top: 0; }
section .content-wrapper { gap: var(--space-4); }

/* ===================== */
/* 16) Page Specific TLC  */
/* ===================== */
/* Index stats/metrics lists */
.hero + section ul, .hero + section ol { background: var(--white); border: 1px solid #EDF3F8; border-radius: var(--radius-m); box-shadow: var(--shadow); padding: var(--space-5); }

/* Case study and reference sections cards feel */
[lang="de"] .content-wrapper > .testimonial-card { background: var(--white); }

/* ===================== */
/* 17) Accessibility     */
/* ===================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===================== */
/* 18) Flex-only Guard   */
/* ===================== */
/* All layout containers use flex; no grid or columns used anywhere. */

/* ===================== */
/* 19) Desktop Enhancer  */
/* ===================== */
@media (min-width: 768px) {
  .trust-badges { gap: var(--space-5); }
  .text-section { flex: 1 1 320px; }
}
@media (min-width: 992px) {
  .content-wrapper.row { flex-direction: row; } /* optional utility if needed */
}

/* ===================== */
/* 20) Link treatments   */
/* ===================== */
main a { text-decoration: underline; text-underline-offset: 3px; }
main .cta-group a, header .main-nav a, .footer-nav a { text-decoration: none; }

/* ===================== */
/* 21) Images & Icons    */
/* ===================== */
.hero img, .feature-grid img, .text-image-section img { border-radius: var(--radius-m); }

/* End of stylesheet */