/* ==========================================================
   Stufenwerk Biel-Bienne — Elegant Classic UI (Flexbox-only)
   Complete style.css for all pages
   ========================================================== */

/* ------------------------------
   CSS Reset & Base Normalization
   ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #8C5A2B; outline-offset: 2px; }

/* ------------------------------
   Design Tokens
   ------------------------------ */
:root {
  /* Brand palette */
  --color-primary: #2F3A45; /* charcoal blue-gray */
  --color-secondary: #8C5A2B; /* warm bronze */
  --color-accent: #F2F0EA; /* light parchment */
  --color-ink: #2A2E33; /* primary text */
  --color-subtle: #6B7280; /* muted text */
  --color-border: #E4E1DA; /* hairline border */
  --color-surface: #FFFFFF; /* cards */
  --color-surface-soft: #FAF9F6; /* soft background */

  /* Typography (elegant classic + brand presence) */
  --font-serif: Georgia, "Times New Roman", Times, serif; /* elegant classic headings */
  --font-sans-display: "Trebuchet MS", Arial, sans-serif;  /* brand display */
  --font-sans: Arial, Helvetica, sans-serif; /* brand body */
  --font-base: Georgia, "Times New Roman", Times, serif; /* body set to serif for classic feel */

  /* Sizing & spacing scale */
  --radius-sm: 6px; 
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-soft: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-subtle: 0 2px 8px rgba(0,0,0,0.05);

  --container-max: 1180px;
}

/* ------------------------------
   Base Typography & Body
   ------------------------------ */
body {
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-surface-soft);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { 
  font-family: var(--font-serif);
  color: var(--color-primary);
  line-height: 1.25;
  letter-spacing: 0.2px;
  margin: 0;
}

h1 { font-size: 40px; }
h2 { font-size: 28px; margin-bottom: 12px; }
h3 { font-size: 20px; }

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

p, li { font-size: 16px; color: var(--color-ink); }
.small { font-size: 14px; color: var(--color-subtle); }

/* Elegant links */
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

/* ------------------------------
   Layout Containers (Flexbox-only)
   ------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex; /* flexbox for all layout wrappers */
  flex-direction: column;
  gap: 20px;
}

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

/* Mandated patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-subtle); }
.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; border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* General section spacing for semantic <section> elements */
section { margin-bottom: 60px; }

/* ------------------------------
   Header & Navigation
   ------------------------------ */
header { position: relative; background: var(--color-surface); border-bottom: 1px solid var(--color-border); z-index: 50; }
header > .container { flex-direction: row; align-items: center; justify-content: space-between; }

.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

.main-nav { display: none; align-items: center; gap: 16px; flex-wrap: wrap; }
.main-nav a { font-family: var(--font-sans-display); font-size: 15px; color: var(--color-primary); padding: 8px 10px; border-radius: var(--radius-sm); }
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-primary); box-shadow: var(--shadow-subtle); transition: transform .2s ease; }
.mobile-menu-toggle:hover { transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: var(--color-primary); color: #fff; transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; padding: 20px; gap: 20px; z-index: 100; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav a { font-family: var(--font-sans-display); color: #fff; font-size: 18px; padding: 12px 10px; border-radius: var(--radius-sm); }
.mobile-nav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }

/* Prevent body scroll when menu open (toggle via JS) */
body.menu-open { overflow: hidden; }

@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ------------------------------
   Hero Section
   ------------------------------ */
.hero { background: var(--color-accent); border-bottom: 1px solid var(--color-border); }
.hero .container { padding-top: 32px; padding-bottom: 32px; }
.hero .content-wrapper { gap: 16px; }
.hero p { color: var(--color-primary); font-size: 18px; }

/* ------------------------------
   Buttons
   ------------------------------ */
.btn-primary, .btn-secondary { 
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 18px; border-radius: 999px; font-family: var(--font-sans-display);
  font-size: 15px; line-height: 1; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease;
  border: 1px solid transparent;
}
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: #24303A; box-shadow: 0 6px 18px rgba(47,58,69,0.25); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary { background: #fff; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-secondary:hover { background: var(--color-secondary); color: #fff; text-decoration: none; }
.btn-secondary:active { transform: translateY(1px); }

.cta-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.cta-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 8px; }

/* ------------------------------
   Lists, Points & Utilities
   ------------------------------ */
.supporting-points, .usp-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.supporting-points li, .usp-list li { position: relative; padding-left: 20px; }
.supporting-points li::before, .usp-list li::before { content: "\2022"; position: absolute; left: 0; top: 0; color: var(--color-secondary); }

.process-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; counter-reset: step; }
.process-steps li { background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 14px; position: relative; }
.process-steps li::before { counter-increment: step; content: counter(step) ". "; color: var(--color-secondary); font-family: var(--font-sans-display); margin-right: 6px; }

.metrics { display: flex; flex-wrap: wrap; gap: 12px; }
.metrics p { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow-subtle); }
.metrics strong { font-family: var(--font-serif); color: var(--color-secondary); }

.timeline { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: 16px; }

.note { color: var(--color-subtle); font-size: 15px; }
.privacy-note { color: var(--color-subtle); font-size: 14px; border-top: 1px dashed var(--color-border); padding-top: 8px; }

.lists { display: flex; flex-wrap: wrap; gap: 20px; }
.lists .text-section { flex: 1 1 240px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-subtle); }

/* ------------------------------
   Service Cards / Generic Cards
   ------------------------------ */
.service-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.service-cards .card { flex: 1 1 260px; }
.service-cards .card h3 { color: var(--color-primary); }
.service-cards .card p { color: var(--color-ink); }

/* ------------------------------
   Testimonials (Readable: dark on light)
   ------------------------------ */
.testimonial-card p { color: var(--color-ink); }
.rating-summary { font-family: var(--font-sans-display); color: var(--color-primary); background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 14px; display: inline-flex; align-items: center; }

/* ------------------------------
   Text Sections & General Blocks
   ------------------------------ */
.text-section { display: flex; flex-direction: column; gap: 10px; }
.text-section ul, .text-section ol { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; }
.text-section ul { list-style: disc; }
.text-section ol { list-style: decimal; }

/* ------------------------------
   Regional / Contact blocks
   ------------------------------ */
.text-section p img[alt] { display: inline-block; vertical-align: middle; margin-right: 8px; }
.text-section a { color: var(--color-secondary); }
.text-section a:hover { text-decoration: underline; }

/* ------------------------------
   Footer
   ------------------------------ */
footer { background: var(--color-accent); border-top: 1px solid var(--color-border); padding: 30px 0; color: var(--color-primary); }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 20px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 12px; }
footer a { color: var(--color-primary); }
footer a:hover { text-decoration: underline; }
a.btn-primary {color: white;}

/* ------------------------------
   Tables (generic) — not present but styled for consistency
   ------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }

/* ------------------------------
   Mobile-first Responsiveness
   ------------------------------ */
@media (min-width: 768px) {
  .text-image-section { flex-direction: row; }
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* ------------------------------
   Page-specific subtle accents
   ------------------------------ */
/* Hero headings get a refined underline on desktop */
@media (min-width: 992px) {
  .hero h1 { position: relative; padding-bottom: 10px; }
  .hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; background: var(--color-secondary); }
}

/* ------------------------------
   Elegant Dividers & Badges
   ------------------------------ */
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; color: var(--color-subtle); font-family: var(--font-sans-display); }
.trust-badges span { background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 10px; }

/* ------------------------------
   Guarantee / Info line
   ------------------------------ */
.guarantee { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-subtle); }
.guarantee img { width: 18px; height: 18px; }

/* ------------------------------
   Header Nav Emphasis Buttons inside .main-nav
   ------------------------------ */
.main-nav .btn-primary, .main-nav .btn-secondary { padding: 10px 14px; }

/* ------------------------------
   Cookie Consent Banner & Modal
   ------------------------------ */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; color: var(--color-ink); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(0,0,0,0.06); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; z-index: 200; transform: translateY(110%); transition: transform .35s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-buttons .btn-primary { background: var(--color-secondary); }
.cookie-buttons .btn-primary:hover { background: #724920; }
.cookie-buttons .btn-secondary { border-color: var(--color-primary); color: var(--color-primary); }

/* Preferences modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 300; }
.cookie-modal.open { display: flex; }
.cookie-modal-content { background: #fff; width: 100%; max-width: 680px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; padding: 20px; gap: 16px; }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
.cookie-row:last-child { border-bottom: 0; }
.cookie-row .label { display: flex; flex-direction: column; gap: 4px; }
.toggle { width: 44px; height: 26px; border-radius: 999px; background: #D6D3CD; position: relative; transition: background-color .2s ease; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-subtle); transition: transform .2s ease; }
.toggle.on { background: var(--color-secondary); }
.toggle.on::after { transform: translateX(18px); }
/* ------------------------------
   Micro-interactions
   ------------------------------ */
.card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.08); transform: translateY(-1px); transition: box-shadow .25s ease, transform .08s ease; }
.testimonial-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.08); }

/* ------------------------------
   Accessibility Helpers
   ------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ------------------------------
   Desktop Enhancements
   ------------------------------ */
@media (min-width: 992px) {
  .container { gap: 24px; }
  .content-wrapper { gap: 24px; }

  /* Footer distribution */
  footer .content-wrapper { align-items: flex-start; }
}

/* ------------------------------
   Page block-specific layouts via Flex
   ------------------------------ */
/* Index & other pages use these repeated blocks */

/* Ensure adequate spacing between repeated testimonial cards */
section .testimonial-card + .testimonial-card { margin-top: 10px; }

/* Headline groupings */
section h2 + .text-section { margin-top: 4px; }

/* Generic two-column text-image usage when applied */
.text-image-section .text { flex: 1 1 300px; }
.text-image-section .image { flex: 1 1 300px; }

/* ------------------------------
   Header compact spacing on scroll (optional hook)
   ------------------------------ */
header.compact .container { padding-top: 6px; padding-bottom: 6px; }

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

/* ------------------------------
   High-contrast states for interactive elements
   ------------------------------ */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible, .main-nav a:focus-visible, .mobile-nav a:focus-visible { outline: 2px solid #B07B4B; outline-offset: 2px; }

/* ------------------------------
   Header/Navigation spacing adjustments
   ------------------------------ */
header { padding: 10px 0; }

/* ------------------------------
   Additional structural helpers to avoid overlap
   ------------------------------ */
/* All flex containers use gap to guarantee at least 20px spacing where needed */
main { display: flex; flex-direction: column; gap: 20px; }

/* Ensure all sections breathe on mobile */
section .container { padding-top: 10px; padding-bottom: 10px; }

/* ------------------------------
   Classic accents for headings in content
   ------------------------------ */
.content-wrapper h2 { border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }

/* ------------------------------
   Readability tweaks for long legal pages
   ------------------------------ */
body:has(main .hero h1:contains("Datenschutz")),
body:has(main .hero h1:contains("DSGVO")),
body:has(main .hero h1:contains("Nutzungsbedingungen")) { background: #FFFFFF; }

/* Fallback for browsers without :has or :contains support – lighten default legal sections */
[lang="de"] .hero h1 { word-wrap: break-word; }

/* End of file */