/* =========================================================
   Misty Vertex Rentenkompetenz — Minimalist Flexbox CSS
   Mobile-first, clean typography, generous spacing, subtle shadows
   Brand: Primary #0D2B4D, Secondary #2E7D6D, Accent #F5F7FA
   Fonts: Georgia (display), Arial (body)
   ========================================================= */

/* -----------------------------
   CSS RESET / NORMALIZE
   ----------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #0D2B4D; background-color: #FFFFFF; line-height: 1.6; }
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0 0 16px 24px; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 16px; font-family: Georgia, 'Times New Roman', serif; line-height: 1.2; color: #0D2B4D; font-weight: 700; }
p { margin: 0 0 16px; }
a { color: #0D2B4D; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: transparent; border: none; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #2E7D6D; outline-offset: 2px; }

/* -----------------------------
   CSS CUSTOM PROPERTIES (with fallbacks)
   ----------------------------- */
:root { --color-primary: #0D2B4D; --color-secondary: #2E7D6D; --color-accent: #F5F7FA; --color-muted: #8AA0B8; --color-border: #E3E8EF; --color-text: #0D2B4D; --shadow-soft: 0 2px 8px rgba(13,43,77,0.08); --shadow-medium: 0 6px 20px rgba(13,43,77,0.12); --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; }

/* -----------------------------
   TYPOGRAPHY SCALE
   ----------------------------- */
body { font-size: 16px; }
h1 { font-size: 34px; letter-spacing: -0.2px; }
h2 { font-size: 28px; letter-spacing: -0.1px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
small, .supporting-note { font-size: 14px; color: #3B556F; }

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

/* -----------------------------
   GLOBAL LAYOUT HELPERS (Flexbox-only)
   ----------------------------- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* Mandatory spacing/alignment patterns (as requested) */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-soft); padding: 20px; }
.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-m); box-shadow: var(--shadow-soft); text-align: left; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Also style semantic section for consistent spacing */
section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px; padding: 40px 0; }

/* -----------------------------
   HEADER / NAVIGATION
   ----------------------------- */
header { position: sticky; top: 0; z-index: 1000; background: #FFFFFF; border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(120%) blur(2px); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--color-primary); font-weight: 700; }
.brand img { width: 40px; height: auto; }
.tagline { display: none; font-family: Arial, Helvetica, sans-serif; font-weight: 400; color: #3B556F; font-size: 14px; }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--color-primary); padding: 8px 10px; border-radius: 6px; transition: background-color 180ms ease, color 180ms ease; }
.main-nav a:hover { background: var(--color-accent); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--color-secondary); font-weight: 700; }

.header-cta { display: none; align-items: center; gap: 12px; }
.header-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); text-decoration: none; transition: transform 150ms ease, box-shadow 200ms ease, background-color 150ms ease; box-shadow: var(--shadow-soft); }
.header-cta a:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); background: var(--color-accent); text-decoration: none; }
.header-cta a:first-child { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }
.header-cta a:first-child:hover { background: #0b2441; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); background: #FFFFFF; transition: background-color 150ms ease, transform 150ms ease; }
.mobile-menu-toggle:hover { background: var(--color-accent); transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; z-index: 1200; background: rgba(13,43,77,0.04); display: flex; align-items: flex-start; justify-content: flex-end; transform: translateX(100%); transition: transform 260ms ease; }
.mobile-menu .mobile-nav { background: #FFFFFF; height: 100%; width: 86%; max-width: 360px; padding: 20px; border-left: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; box-shadow: -8px 0 20px rgba(13,43,77,0.08); }
.mobile-menu .mobile-nav a { padding: 12px 10px; border-radius: 8px; color: var(--color-primary); font-size: 18px; }
.mobile-menu .mobile-nav a:hover { background: var(--color-accent); text-decoration: none; }
.mobile-menu .mobile-nav a[aria-current="page"] { color: var(--color-secondary); font-weight: 700; }
.mobile-menu-close { position: relative; align-self: flex-end; margin: 12px 10px 8px 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); background: #FFFFFF; box-shadow: var(--shadow-soft); }
/* Open states supported */
.mobile-menu.open, .mobile-menu.active, .mobile-menu.is-open, body.menu-open .mobile-menu { transform: translateX(0); }

@media (min-width: 768px) {
  .tagline { display: inline-flex; max-width: 520px; }
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
  .header-cta { display: flex; }
}

/* -----------------------------
   HERO SECTION
   ----------------------------- */
.hero { background: var(--color-accent); border-bottom: 1px solid var(--color-border); }
.hero .content-wrapper { padding: 24px 0; }
.hero p { color: #3B556F; }

/* CTA buttons row */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-row a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); box-shadow: var(--shadow-soft); transition: transform 150ms ease, box-shadow 200ms ease, background-color 150ms ease; }
.cta-row a:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); background: var(--color-accent); text-decoration: none; }
.cta-row a:first-child { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }
.cta-row a:first-child:hover { background: #0b2441; }

/* Trust badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trust-badges span { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); border-radius: 999px; box-shadow: var(--shadow-soft); font-size: 14px; }

.supporting-note { color: #516D89; }

/* -----------------------------
   TEXT BLOCKS / LISTS
   ----------------------------- */
.text-section { display: flex; flex-direction: column; gap: 12px; }
.text-section a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; }
.text-section a:hover { color: #256b5e; }

ul li, ol li { margin-bottom: 8px; }
ul li::marker, ol li::marker { color: var(--color-secondary); }

/* Text + image flexible layout */
.text-image-section img { border-radius: var(--radius-m); box-shadow: var(--shadow-soft); }
@media (max-width: 768px) { .text-image-section { flex-direction: column; } }

/* -----------------------------
   TESTIMONIALS (high contrast, light background)
   ----------------------------- */
.testimonial-card p { margin: 0; color: var(--color-text); }
.testimonial-card strong { color: var(--color-primary); }

/* -----------------------------
   MAP PLACEHOLDER
   ----------------------------- */
.map-placeholder { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px dashed var(--color-border); border-radius: var(--radius-m); color: #516D89; background: #FFFFFF; }

/* -----------------------------
   FOOTER
   ----------------------------- */
footer { background: #FFFFFF; border-top: 1px solid var(--color-border); }
footer .content-wrapper { padding: 24px 0; gap: 24px; }
footer .content-wrapper { flex-direction: column; }
footer .text-section { display: flex; flex-direction: column; gap: 8px; }
.brand-mini { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary); font-weight: 700; }
.brand-mini img { width: 24px; height: auto; }
footer a { color: var(--color-primary); }
@media (min-width: 900px) {
  footer .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  footer .text-section { max-width: 25%; }
}

/* -----------------------------
   GENERIC CARDS & CONTENT GROUPS (for future use)
   ----------------------------- */
.card h3 { margin-top: 0; }
.card:hover { box-shadow: var(--shadow-medium); }

/* Optional: content groups using flex only */
.card-grid, .features, .columns { display: flex; flex-wrap: wrap; gap: 20px; }
.columns > * { flex: 1 1 280px; }

/* -----------------------------
   BUTTON STYLES (utility classes)
   ----------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); box-shadow: var(--shadow-soft); transition: transform 150ms ease, box-shadow 200ms ease, background-color 150ms ease; text-decoration: none; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); background: var(--color-accent); text-decoration: none; }
.btn--primary { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }
.btn--primary:hover { background: #0b2441; }
.btn--secondary { background: var(--color-secondary); color: #FFFFFF; border-color: var(--color-secondary); }
.btn--secondary:hover { background: #256b5e; }

/* -----------------------------
   ACCESSIBILITY / MISC
   ----------------------------- */
[aria-current="page"] { position: relative; }
[aria-current="page"]::after { content: ""; display: block; height: 2px; background: var(--color-secondary); width: 100%; margin-top: 4px; border-radius: 1px; }

/* -----------------------------
   RESPONSIVE TWEAKS FOR LAYOUT
   ----------------------------- */
@media (min-width: 900px) {
  .content-grid > * { flex: 1 1 calc(50% - 10px); }
}
@media (min-width: 1100px) {
  .content-grid > * { flex: 1 1 calc(33.333% - 14px); }
}

/* -----------------------------
   PAGE-SPECIFIC LIGHT TOUCHES
   ----------------------------- */
/* Hero spacing a bit larger on top pages */
.hero .container .content-wrapper { gap: 16px; }

/* List spacing in FAQ sections */
section .text-section h3 { margin-top: 8px; }

/* Contact info lines */
.text-section p img, section p img { display: inline-block; vertical-align: middle; margin-right: 8px; }

/* -----------------------------
   COOKIE CONSENT BANNER & MODAL
   ----------------------------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(13,43,77,0.08); display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 8px; color: var(--color-text); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-primary); box-shadow: var(--shadow-soft); transition: transform 150ms ease, box-shadow 200ms ease, background-color 150ms ease; }
.cookie-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); background: var(--color-accent); text-decoration: none; }
.cookie-btn.accept { background: var(--color-secondary); color: #FFFFFF; border-color: var(--color-secondary); }
.cookie-btn.accept:hover { background: #256b5e; }
.cookie-btn.reject { background: #FFFFFF; color: var(--color-primary); }
.cookie-btn.settings { background: #FFFFFF; }

/* Cookie preferences modal */
.cookie-modal { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; background: rgba(13,43,77,0.35); padding: 20px; }
.cookie-modal.show, .cookie-modal.open, .cookie-modal.active { display: flex; }
.cookie-modal-content { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-l); box-shadow: var(--shadow-medium); max-width: 640px; width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: #FFFFFF; }
.cookie-category small { color: #516D89; }
/* Simple toggle switch */
.toggle { position: relative; width: 44px; height: 26px; background: #D6DEE6; border-radius: 999px; transition: background-color 180ms ease; display: inline-flex; align-items: center; padding: 3px; }
.toggle::after { content: ""; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; box-shadow: var(--shadow-soft); transform: translateX(0); transition: transform 180ms ease; }
.toggle.is-on { background: var(--color-secondary); }
.toggle.is-on::after { transform: translateX(18px); }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Slide/fade animations for banner and modal (reduced-motion friendly) */
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: slideUp 220ms ease; }
  .mobile-menu .mobile-nav { animation: fadeIn 240ms ease; }
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

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

/* -----------------------------
   EXTRA SAFEGUARDS / UTILITIES
   ----------------------------- */
.hidden { display: none !important; }
.muted { color: #516D89; }
.separator { width: 100%; height: 1px; background: var(--color-border); }

/* Ensure adequate spacing and no overlaps */
section > .container > .content-wrapper > * + * { margin-top: 0; }

/* End of stylesheet */