/* ============================================================
   Seraphic Voyage Ausbau & Sanierung – Professional Corporate UI
   style.css – Mobile-first, flexbox-only, accessible, responsive
   ============================================================ */

/* -----------------------------
   CSS Reset / Normalize
------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Arial, sans-serif; line-height: 1.6; color: #1F2A37; background-color: #F7F8FA; }
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; height: auto; display: block; }
a { color: #1F2A37; text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
p { margin: 0 0 16px; }
button, input, select, textarea { font-family: inherit; font-size: 100%; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 3px solid #B65A3A; outline-offset: 2px; }

/* -----------------------------
   Root variables (with fallbacks)
------------------------------ */
:root {
  --color-primary: #1F2A37; /* blue-gray */
  --color-secondary: #B65A3A; /* earthy accent */
  --color-accent: #F5EDE3; /* light accent */
  --color-muted: #6B7280; /* gray text */
  --color-border: #E5E7EB; /* light border */
  --color-bg: #F7F8FA; /* page bg */
  --color-card: #FFFFFF; /* card */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 18px rgba(31,42,55,0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* -----------------------------
   Typography Scale
------------------------------ */
h1, h2, h3, h4, h5 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: var(--color-primary); margin: 0 0 12px; line-height: 1.25; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
small, .small { font-size: 14px; color: var(--color-muted); }

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

/* -----------------------------
   Utilities & Layout Helpers
------------------------------ */
.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: 16px; }
.centered { display: flex; align-items: center; justify-content: center; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--color-accent); border-radius: 999px; color: var(--color-primary); }
.hidden { display: none !important; }
.no-scroll { overflow: hidden; }

/* MANDATORY CSS SPACING AND ALIGNMENT 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-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.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-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

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

/* Generic section spacing for pages without .section class */
main section { padding: 40px 0; }
main section .container { gap: 24px; }

/* -----------------------------
   Header & Navigation
------------------------------ */
header { background: #FFFFFF; border-bottom: 1px solid var(--color-border); position: relative; z-index: 50; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.logo img { height: 40px; width: auto; }

.main-menu { display: none; align-items: center; gap: 16px; flex-wrap: wrap; }
.main-menu a { color: var(--color-primary); padding: 8px 10px; border-radius: 6px; transition: background-color .2s ease, color .2s ease; }
.main-menu a:hover { background: var(--color-accent); }

/* Call-to-action buttons */
.cta-primary, .cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 8px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.cta-primary { background: var(--color-secondary); color: #FFFFFF; box-shadow: var(--shadow-sm); }
.cta-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: #a24f34; }
.cta-secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.cta-secondary:hover { background: var(--color-primary); color: #FFFFFF; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 20px; border-radius: 8px; background: var(--color-primary); color: #FFFFFF; transition: background-color .2s ease, transform .2s ease; }
.mobile-menu-toggle:hover { background: #15202b; transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: rgba(31,42,55,0.96); color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; transform: translateX(100%); transition: transform .3s ease; padding: 20px; gap: 16px; z-index: 999; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; font-size: 20px; color: #FFFFFF; background: rgba(255,255,255,0.08); border-radius: 8px; }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mobile-nav a { color: #FFFFFF; padding: 14px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); }
.mobile-nav a:hover { background: rgba(255,255,255,0.14); }

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

/* -----------------------------
   Hero Section
------------------------------ */
.hero { background: #EEF2F7; border-bottom: 1px solid var(--color-border); }
.hero .container { padding-top: 24px; padding-bottom: 24px; }
.hero .content-wrapper { gap: 16px; }
.hero p { color: var(--color-muted); font-size: 16px; }
.hero .bullets, .hero .inline-benefits, .hero .benefit-bullets { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; }
.hero .secondary-cta { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary); }
.hero .secondary-cta a { color: var(--color-primary); font-weight: 700; }

/* Trust badges */
.trust-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; color: var(--color-primary); }
.trust-badges img { width: 18px; height: 18px; margin-right: 6px; filter: grayscale(20%); }

/* -----------------------------
   Lists & Content Blocks
------------------------------ */
.usp-list { display: flex; flex-wrap: wrap; gap: 20px; }
.usp-list > div { flex: 1 1 240px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.usp-list > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.usp-list img { width: 28px; height: 28px; }

.metrics { display: flex; flex-wrap: wrap; gap: 16px; }
.metrics > div { flex: 1 1 180px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.metrics span { display: inline-block; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 24px; font-weight: 700; color: var(--color-secondary); margin-bottom: 6px; }

.service-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.service-cards > a, .service-cards > div { flex: 1 1 260px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; gap: 10px; color: var(--color-primary); }
.service-cards > a:hover, .service-cards > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #CBD5E1; }
.service-cards img { width: 36px; height: 36px; }

.process-steps, .standards, .features, .faq-list { display: flex; flex-direction: column; gap: 8px; }
.process-steps { counter-reset: step; }
.process-steps li { margin-left: 0; }

.ratings { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 12px; box-shadow: var(--shadow-sm); color: var(--color-primary); }
.ratings img { width: 18px; height: 18px; }

.experience-timeline, .timeline { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; }
.brand-tagline { padding: 12px 16px; background: var(--color-accent); border-radius: var(--radius-md); color: var(--color-primary); font-weight: 700; }

.project-summary { display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }

/* Testimonial cards: high contrast, light background, dark text */
.testimonial-card p { color: var(--color-primary); margin: 0; }
.testimonial-card strong { color: var(--color-muted); font-weight: 700; }

/* Contact info and map placeholder */
.contact-info ul { display: flex; flex-direction: column; gap: 8px; list-style: none; padding-left: 0; }
.contact-info li { display: flex; align-items: center; gap: 10px; }
.contact-info img { width: 18px; height: 18px; }

.map-embed-placeholder { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border: 1px dashed #CBD5E1; border-radius: var(--radius-md); background: #FFFFFF; }
.map-embed-placeholder img { width: 24px; height: 24px; }

.privacy-disclaimer { display: flex; padding: 12px 16px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.privacy-disclaimer a { color: var(--color-secondary); font-weight: 700; }

/* -----------------------------
   Footer
------------------------------ */
footer { background: #FFFFFF; border-top: 1px solid var(--color-border); }
footer .container { align-items: center; text-align: center; padding-top: 24px; padding-bottom: 24px; gap: 12px; }
.footer-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { color: var(--color-primary); }
.contact-snippet { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; color: var(--color-muted); }
.contact-snippet img { width: 16px; height: 16px; }
.brand-logo { display: flex; align-items: center; justify-content: center; }
.brand-logo img { height: 36px; width: auto; filter: grayscale(10%); }

/* -----------------------------
   Buttons & Links – generic
------------------------------ */
.btn, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:hover, .button:hover { background: var(--color-accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* -----------------------------
   Responsive adjustments
------------------------------ */
@media (min-width: 768px) {
  .hero .container { padding-top: 40px; padding-bottom: 40px; }
}

@media (min-width: 1024px) {
  .content-wrapper { gap: 20px; }
}

/* -----------------------------
   Accessibility helpers
------------------------------ */
a:focus, button:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; border-radius: 6px; }

/* -----------------------------
   Mobile Menu Animation Keyframes
------------------------------ */
@keyframes slideInMenu { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* -----------------------------
   Tables (if any appear later)
------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border: 1px solid var(--color-border); text-align: left; }
th { background: #F3F4F6; }

/* -----------------------------
   Forms (for potential future use)
------------------------------ */
form { display: flex; flex-direction: column; gap: 12px; }
label { font-weight: 700; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select { padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: #FFFFFF; transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus, select:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(182,90,58,0.15); outline: none; }

/* -----------------------------
   Specific page element refinements
------------------------------ */
.inline-benefits, .benefit-bullets { list-style: disc; }
.features { list-style: disc; }
.faq-list { list-style: none; padding-left: 0; }
.faq-list li { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; }

/* Emphasize ordered lists on process/steps */
ol { padding-left: 20px; }
ol li { margin-bottom: 6px; }

/* -----------------------------
   Cookie Consent Banner & Modal
------------------------------ */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 18px rgba(31,42,55,0.08); padding: 16px; z-index: 1000; display: none; }
.cookie-banner.show { display: flex; }
.cookie-banner .container { flex-direction: column; gap: 12px; }
.cookie-text { color: var(--color-primary); }
.cookie-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 8px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cookie-btn-settings { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.cookie-btn-settings:hover { background: var(--color-primary); color: #FFFFFF; }
.cookie-btn-reject { background: #EEF2F7; color: var(--color-primary); }
.cookie-btn-reject:hover { background: #E5EAF1; }
.cookie-btn-accept { background: var(--color-secondary); color: #FFFFFF; box-shadow: var(--shadow-sm); }
.cookie-btn-accept:hover { background: #a24f34; box-shadow: var(--shadow-md); }

/* Cookie modal overlay */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1001; }
.cookie-modal.open { display: flex; }
.cookie-modal-content { background: #FFFFFF; border-radius: 12px; width: min(680px, 92%); padding: 20px; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 16px; animation: slideUp .25s ease; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: #FFFFFF; }
.cookie-note { color: var(--color-muted); font-size: 14px; }

/* Toggle switch */
.switch { position: relative; width: 46px; height: 26px; display: inline-flex; align-items: center; }
.switch input { display: none; }
.switch-track { width: 46px; height: 26px; background: #CBD5E1; border-radius: 999px; position: relative; transition: background-color .2s ease; }
.switch-thumb { position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; background: #FFFFFF; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.switch input:checked + .switch-track { background: var(--color-secondary); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }

/* Essential cookies – always enabled look */
.cookie-category.essential .switch-track { background: #9CA3AF; }
.cookie-category.essential .switch-thumb { transform: translateX(20px); }

/* -----------------------------
   Media Queries – layout refinements
------------------------------ */
@media (min-width: 768px) {
  .container { gap: 28px; }
  .usp-list > div, .service-cards > a, .service-cards > div { padding: 20px; }
  .testimonial-card { padding: 24px; }
  .cookie-banner .container { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 992px) {
  header .container { padding-top: 14px; padding-bottom: 14px; }
  .footer-nav { gap: 12px; }
}

/* -----------------------------
   Images inside inline text blocks
------------------------------ */
.trust-badges, .contact-snippet, .contact-info li { line-height: 1.4; }
.trust-badges img, .contact-snippet img, .contact-info img { display: inline-block; }

/* -----------------------------
   Ensure min spacing between content blocks
------------------------------ */
main .container > * { margin-bottom: 0; }
main section .content-wrapper > * + * { margin-top: 8px; }

/* -----------------------------
   Additional Flex Layout Helpers for content
------------------------------ */
.content-grid.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

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