/* ============================== */
/* Firstwerk Bern - Soft Pastel UI */
/* style.css - Mobile-first, Flexbox only */
/* ============================== */

/* --------- CSS Reset & Normalize --------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; background-color: #FAFBFD; color: #2A2E35; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0 0 16px 24px; padding: 0; }
p { margin: 0 0 14px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid rgba(30,58,95,0.35); outline-offset: 2px; border-radius: 8px; }

/* --------- Theme Variables --------- */
:root {
  /* Brand */
  --brand-primary: #1E3A5F; /* deep steel blue */
  --brand-secondary: #A65E2E; /* copper */
  --brand-accent: #F4F6F9; /* light cool */

  /* Soft pastel palette */
  --pastel-blue: #EAF2FB;
  --pastel-peach: #FDEFE6;
  --pastel-mint: #E9F7F3;
  --pastel-lilac: #F3EDFF;
  --pastel-yellow: #FFF7E3;

  /* Neutrals */
  --surface: #FFFFFF;
  --text: #2A2E35;
  --text-muted: #5C6570;
  --border: #E2E6EE;
  --shadow-soft: 0 8px 24px rgba(30,58,95,0.08);
}

/* --------- Typography --------- */
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; }
.display, h1, h2, h3 { font-family: Montserrat, Inter, "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: 0.2px; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
small { font-size: 14px; color: var(--text-muted); }

/* --------- Layout Containers (Flex-only) --------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }
section { margin-bottom: 60px; padding: 40px 0; background-color: transparent; }
/* Alternate soft pastel section backgrounds for dreamy rhythm */
main > section:nth-of-type(2n) { background-color: var(--pastel-blue); }
main > section:nth-of-type(3n) { background-color: var(--pastel-mint); }

/* --------- Mandatory Spacing & Alignment Patterns --------- */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 12px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-soft); }
.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-color: var(--pastel-yellow); border: 1px solid #F2E6B3; border-radius: 16px; color: #1F2430; box-shadow: var(--shadow-soft); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* --------- Header & Navigation --------- */
header { position: sticky; top: 0; z-index: 1000; background-color: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(30,58,95,0.04); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.logo img { height: 40px; width: auto; }

/* Desktop nav hidden on mobile by default */
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { padding: 10px 12px; border-radius: 10px; color: var(--brand-primary); transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease; }
.main-nav a:hover { background-color: var(--pastel-blue); transform: translateY(-1px); }
.header-cta { display: none; align-items: center; gap: 12px; }

/* Mobile hamburger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px; line-height: 1; border-radius: 10px; background-color: var(--pastel-blue); color: var(--brand-primary); box-shadow: var(--shadow-soft); transition: transform 0.2s ease, background-color 0.2s ease; }
.mobile-menu-toggle:hover { transform: translateY(-1px); background-color: #dfeaf8; }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0 0 0 auto; right: 0; width: 86%; max-width: 360px; background-color: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(30,58,95,0.12); transform: translateX(100%); transition: transform 0.35s ease; z-index: 1200; display: flex; flex-direction: column; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; margin: 12px; width: 40px; height: 40px; border-radius: 10px; background-color: var(--pastel-peach); color: #8a4b24; font-size: 18px; box-shadow: var(--shadow-soft); }
.mobile-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px 24px; }
.mobile-nav a { display: block; padding: 14px 12px; border-radius: 12px; color: var(--brand-primary); background-color: var(--brand-accent); transition: background-color 0.2s ease, transform 0.2s ease; }
.mobile-nav a:hover { background-color: var(--pastel-blue); transform: translateX(2px); }

/* Backdrop for mobile menu (using body class .menu-open if added by JS) */
body.menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(30,58,95,0.35); z-index: 1100; }

/* --------- Buttons --------- */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 18px; border-radius: 14px; font-weight: 600; letter-spacing: 0.2px; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; border: 1px solid transparent; }
.btn-primary { background-color: var(--brand-primary); color: #FFFFFF; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background-color: #21446F; transform: translateY(-1px); }
.btn-secondary { background-color: var(--pastel-peach); color: #7A3F1F; border-color: #F4D6C7; }
.btn-secondary:hover { background-color: #F9E3D8; }

/* Links appearance */
a { color: var(--brand-primary); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* --------- Content Elements --------- */
.text-section { display: flex; flex-direction: column; gap: 16px; }
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 8px; }
.text-section > div { display: flex; flex-direction: column; gap: 8px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-soft); }

/* CTA row */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Badges & highlights */
.trust-badges ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges li { display: flex; align-items: center; gap: 10px; background-color: var(--pastel-lilac); color: #3A2E52; border: 1px solid #E3D7FF; border-radius: 14px; padding: 8px 12px; }
.trust-badges img { width: 18px; height: 18px; }

.contact-highlight { display: flex; align-items: center; gap: 12px; background-color: var(--pastel-mint); border: 1px solid #CFEDE6; border-radius: 14px; padding: 10px 12px; color: #1F4B42; align-self: flex-start; }
.contact-highlight img { width: 18px; height: 18px; }

/* Stats, guarantees, notice */
.guarantees, .stats, .notice { display: flex; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background-color: var(--brand-accent); color: var(--text); }
.notice { background-color: var(--pastel-yellow); border-color: #F2E6B3; color: #1F2430; }

/* Contact details */
.contact-details { display: flex; flex-direction: column; gap: 10px; }
.contact-details p { display: flex; align-items: center; gap: 10px; margin: 0; }
.contact-details img { width: 18px; height: 18px; }

/* Cards hover micro-interaction */
.card, .text-section > div, .testimonial-card { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.card:hover, .text-section > div:hover, .testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30,58,95,0.12); }

/* --------- Footer --------- */
footer { background-color: var(--pastel-blue); border-top: 1px solid var(--border); padding: 28px 0; color: var(--brand-primary); }
footer .content-wrapper { gap: 18px; }
.footer-brand { display: flex; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
footer a { color: var(--brand-primary); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }

/* --------- Testimonials (Readability) --------- */
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: #1E293B; }

/* --------- Mobile Menu Visibility Rules --------- */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle, .mobile-menu { display: none; }
}

/* --------- Responsive Typography & Layout --------- */
@media (min-width: 576px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .text-image-section { flex-direction: row; }
}

/* --------- Additional Flex Utility Layouts --------- */
/* Helpful for pages that may add these classes later */
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.col { display: flex; flex-direction: column; gap: 12px; flex: 1 1 260px; }

/* --------- Page-specific gentle structure --------- */
/* Index & internal pages: "Leistungen im Überblick" and similar grids */
.text-section > div h3 { color: var(--brand-primary); }
.text-section > p > .btn-primary, .text-section > p > .btn-secondary { align-self: flex-start; }

/* Hero tone: keep airy */
main > section:first-of-type { background-color: var(--pastel-peach); }

/* --------- Lists styling --------- */
ul li::marker, ol li::marker { color: var(--brand-secondary); }

/* --------- Tables (if added later) --------- */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
thead, tbody, tr { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }
thead { background-color: var(--brand-accent); }
tr > * { flex: 1 1 0; padding: 12px; border-bottom: 1px solid var(--border); }

/* --------- Cookie Consent Banner & Modal --------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; background-color: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(30,58,95,0.10); padding: 16px; display: flex; }
.cookie-banner .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-banner p { margin: 0; color: var(--text); }
.cookie-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn-accept { background-color: var(--brand-primary); color: #fff; border-radius: 12px; padding: 10px 14px; border: 1px solid transparent; }
.cookie-actions .btn-reject { background-color: var(--pastel-peach); color: #7A3F1F; border: 1px solid #F4D6C7; border-radius: 12px; padding: 10px 14px; }
.cookie-actions .btn-settings { background-color: var(--brand-accent); color: var(--brand-primary); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.cookie-actions button { transition: transform 0.2s ease, background-color 0.2s ease; }
.cookie-actions button:hover { transform: translateY(-1px); }

.cookie-overlay { position: fixed; inset: 0; background: rgba(30,58,95,0.35); z-index: 1600; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.cookie-overlay.open { opacity: 1; pointer-events: auto; }

.cookie-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); width: 92%; max-width: 640px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 40px rgba(30,58,95,0.22); z-index: 1700; padding: 18px; display: flex; flex-direction: column; gap: 14px; opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; }
.cookie-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.cookie-modal-header, .cookie-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background-color: var(--brand-accent); }
.cookie-category .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-switch { position: relative; width: 46px; height: 26px; background: #dfe7f1; border-radius: 999px; display: inline-flex; align-items: center; padding: 3px; transition: background-color 0.2s ease; }
.cookie-switch .knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transform: translateX(0); transition: transform 0.2s ease; }
.cookie-switch.on { background: #9BC5FF; }
.cookie-switch.on .knob { transform: translateX(20px); }

/* --------- Accessibility helpers --------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); border: 0; }

/* --------- Utilities --------- */
.muted { color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--brand-accent); color: var(--brand-primary); border: 1px solid var(--border); }

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

/* --------- Desktop refinements --------- */
@media (min-width: 992px) {
  .content-wrapper { gap: 24px; }
  .text-section { gap: 18px; }
  /* Flex-based responsive clusters of cards/items */
  .text-section.cluster { flex-direction: row; flex-wrap: wrap; }
  .text-section.cluster > div { flex: 1 1 280px; }
}

/* --------- Specific page element tweaks for consistency --------- */
/* Headers of sections */
.content-wrapper > h1, .content-wrapper > h2 { color: var(--brand-primary); }

/* Buttons inside paragraphs should keep spacing */
.text-section p .btn-primary, .text-section p .btn-secondary { margin-right: 8px; margin-top: 6px; }

/* Header call-to-action buttons layout on desktop */
@media (min-width: 992px) {
  .header-cta .btn-secondary { background-color: var(--brand-accent); color: var(--brand-primary); border-color: var(--border); }
  .header-cta .btn-secondary:hover { background-color: #e9eef6; }
}

/* --------- Prevent overlaps and ensure breathing room --------- */
main { display: flex; flex-direction: column; gap: 20px; }
header, footer, main, section, .container, .content-wrapper, .text-section { min-width: 0; }

/* --------- High-contrast in testimonials as required --------- */
/* Dark text on light pastel backgrounds is enforced above */

/* --------- End of stylesheet --------- */