/* ===============================
   Reset & Base Normalize
   =============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; line-height: 1.65; color: #142433; background-color: #F4F7FB; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: #1E3A5F; text-decoration-color: rgba(30,58,95,0.35); text-underline-offset: 3px; transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, text-decoration-color 200ms ease; }
a:hover { color: #2E7D8F; text-decoration-color: rgba(46,125,143,0.9); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #2E7D8F; outline-offset: 2px; }

/* ===============================
   Theme Variables (with fallbacks)
   =============================== */
:root {
  --primary: #1E3A5F;
  --secondary: #2E7D8F;
  --accent: #F4F7FB;
  --text: #142433;
  --muted: #5c6b7a;
  --surface: #FFFFFF;
  --surface-2: #EFF4F9;
  --shadow: 0 10px 30px rgba(20,36,51,0.08), 0 2px 10px rgba(20,36,51,0.05);
  --radius: 14px;
  --radius-sm: 10px;
}

/* ===============================
   Typography
   =============================== */
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--primary); line-height: 1.25; margin: 0 0 14px; }
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
p { margin: 0 0 14px; color: var(--text); }
ul, ol { margin: 0 0 16px 22px; padding: 0; }
strong { color: #0f2032; }
small { color: var(--muted); }

/* Responsive type scale */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
}
@media (min-width: 1100px) {
  h1 { font-size: 48px; }
}

/* ===============================
   Layout Containers (Flex-only)
   =============================== */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }

/* Mandatory spacing 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; }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Ensure spacing between sections in pages even without .section class */
main > section { padding: 40px 0; }
main > section + section { margin-top: 20px; }

/* ===============================
   Header & Navigation (Gradient Modern)
   =============================== */
header { position: relative; z-index: 20; background-color: #1E3A5F; background-image: linear-gradient(135deg, #1E3A5F 0%, #2E7D8F 100%); color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.logo img { height: 36px; width: auto; }

/* Desktop main nav (hidden on mobile) */
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: #E8F1F7; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background-color: rgba(255,255,255,0.12); color: #fff; }

/* Mobile burger */
.mobile-menu-toggle { background: #ffffff; color: var(--primary); border: 0; width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.mobile-menu-toggle:hover { transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch; background-color: rgba(0,0,0,0.35); transform: translateX(100%); transition: transform 300ms ease; z-index: 999; }
.mobile-menu[aria-hidden="false"], .mobile-menu.active { transform: translateX(0); }
.mobile-menu .mobile-menu-close { position: relative; margin: 10px 10px 0 auto; border: 0; background: transparent; color: var(--primary); font-size: 22px; width: 44px; height: 44px; border-radius: 10px; }
.mobile-menu .mobile-nav { background: #ffffff; width: 86vw; max-width: 400px; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 8px; box-shadow: -6px 0 22px rgba(0,0,0,0.12); }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border-radius: 12px; color: var(--primary); text-decoration: none; background: #F7FAFE; }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: #EAF3FB; color: #0f2032; }

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

/* ===============================
   Hero & Section Styles (Gradient Modern)
   =============================== */
/* Global subtle section background alternation */
main > section:nth-of-type(odd) { background: #FFFFFF; }
main > section:nth-of-type(even) { background: #F7FAFE; }

/* Specific hero on index */
section[aria-labelledby="hero"] { background-color: #F4F7FB; background-image: linear-gradient(180deg, rgba(46,125,143,0.10) 0%, rgba(244,247,251,0) 60%); }
section[aria-labelledby="hero"] .content-wrapper { padding: 8px 0 8px; }
section[aria-labelledby="hero"] h1 { color: var(--primary); }
section[aria-labelledby="hero"] ul { margin-left: 20px; }
section[aria-labelledby="hero"] .content-wrapper > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
section[aria-labelledby="hero"] [aria-label="Vertrauenssiegel"] { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; color: var(--muted); }
section[aria-labelledby="hero"] [aria-label="Vertrauenssiegel"] span { background: #FFFFFF; padding: 6px 10px; border-radius: 999px; border: 1px solid #E1EAF2; }

/* Text sections as modern cards */
.text-section { background: var(--surface); border: 1px solid #E6EEF6; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; flex: 1 1 280px; }
.text-section:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,36,51,0.10), 0 4px 12px rgba(20,36,51,0.06); }

/* Testimonials: light backgrounds, dark text for readability */
.testimonial-card { background: #FFFFFF; border: 1px solid #DDE7F1; border-left: 5px solid var(--secondary); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow); flex: 1 1 320px; }
.testimonial-card p { margin: 0; }

/* Ordered lists inside process sections as cards */
ol { display: flex; flex-direction: column; gap: 8px; }
ol li { background: #FFFFFF; border: 1px solid #E6EEF6; border-radius: 12px; padding: 10px 12px; }

/* Breadcrumbs */
nav[aria-label="Brotkrumen"] span, nav[aria-label="Brotkrumen"] a { color: var(--muted); font-size: 14px; }
nav[aria-label="Brotkrumen"] a:hover { color: var(--secondary); }

/* ===============================
   Buttons & CTAs
   =============================== */
.btn, .button, .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 999px; border: 1px solid transparent; background: var(--secondary); color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.btn:hover, .button:hover, .cta:hover { background: #276b7a; transform: translateY(-1px); }
.btn-outline { background: #FFFFFF; color: var(--primary); border-color: #CFE2EE; }
.btn-outline:hover { background: #EAF3FB; }

/* Turn lone links in paragraphs or CTA groups into buttons without extra classes */
.content-wrapper > p > a:only-child,
.content-wrapper > div > a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 999px; background: var(--secondary); color: #fff; text-decoration: none; border: 1px solid transparent; box-shadow: var(--shadow); }
.content-wrapper > p > a:only-child:hover,
.content-wrapper > div > a:hover { background: #276b7a; }
/* If two CTAs appear together, make the second an outline for contrast */
.content-wrapper > div > a + a { background: #FFFFFF; color: var(--primary); border-color: #CFE2EE; }
.content-wrapper > div > a + a:hover { background: #EAF3FB; }

/* Links inline within text keep default style */
.text-section p a, .content-wrapper p a:not(:only-child) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* ===============================
   Details / FAQ
   =============================== */
details { background: #FFFFFF; border: 1px solid #E1EAF2; border-radius: var(--radius); padding: 6px 10px; box-shadow: var(--shadow); }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; color: var(--primary); font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '\25BC'; color: var(--secondary); font-size: 12px; transform: rotate(0deg); transition: transform 200ms ease; }
details[open] summary::after { transform: rotate(180deg); }
details .text-section { margin: 10px; }

/* ===============================
   Footer
   =============================== */
footer { background: linear-gradient(180deg, #FFFFFF 0%, #EFF4F9 100%); border-top: 1px solid #E1EAF2; color: var(--text); }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 16px 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
footer nav a { text-decoration: none; color: var(--primary); padding: 6px 8px; border-radius: 8px; }
footer nav a:hover, footer nav a[aria-current="page"] { background: #EAF3FB; }

/* ===============================
   Responsive Flex Behaviors
   =============================== */
/* Text-image and grids */
.text-image-section { align-items: center; }
@media (max-width: 768px) { .text-image-section { flex-direction: column; } }

/* Content wrappers: arrange cards in rows on larger screens */
@media (min-width: 768px) {
  .content-wrapper { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .content-wrapper > * { flex: 1 1 320px; }
}

/* ===============================
   Cards (generic)
   =============================== */
.card { background: var(--surface); border: 1px solid #E6EEF6; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,36,51,0.10), 0 4px 12px rgba(20,36,51,0.06); }

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

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

/* ===============================
   Cookie Consent Banner & Modal
   =============================== */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; background: #FFFFFF; color: var(--text); border: 1px solid #E1EAF2; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.15); padding: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 998; transform: translateY(140%); opacity: 0; transition: transform 300ms ease, opacity 300ms ease; }
.cookie-banner.show, .cookie-banner[aria-hidden="false"] { transform: translateY(0); opacity: 1; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; border: 1px solid transparent; box-shadow: var(--shadow); }
.cookie-btn.primary { background: var(--secondary); color: #fff; }
.cookie-btn.primary:hover { background: #276b7a; }
.cookie-btn.secondary { background: #FFFFFF; color: var(--primary); border-color: #CFE2EE; }
.cookie-btn.secondary:hover { background: #EAF3FB; }
.cookie-btn.text { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }

/* Cookie preferences modal */
.cookie-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1000; }
.cookie-modal-backdrop.show { display: flex; }
.cookie-modal { width: 92vw; max-width: 640px; background: #FFFFFF; border: 1px solid #E1EAF2; border-radius: 16px; box-shadow: 0 22px 60px rgba(0,0,0,0.2); padding: 18px; display: flex; flex-direction: column; gap: 16px; transform: translateY(10px); opacity: 0; transition: transform 250ms ease, opacity 250ms ease; }
.cookie-modal-backdrop.show .cookie-modal { transform: translateY(0); opacity: 1; }
.cookie-options { display: flex; flex-direction: column; gap: 10px; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F7FAFE; border: 1px solid #E1EAF2; border-radius: 12px; padding: 10px; }

/* ===============================
   Utilities
   =============================== */
.bg-accent { background: var(--accent); }
.text-muted { color: var(--muted); }
.center { display: flex; align-items: center; justify-content: center; }

/* ===============================
   Page-specific fine-tuning
   =============================== */
/* Process sections heading spacing */
#prozess + p, #faq + p { margin-top: 10px; }

/* Contact info rows with icons */
[aria-label="Kontaktdaten"] p, .text-section p img + a { display: inline; }
.text-section p img { display: inline-block; vertical-align: middle; margin-right: 8px; }

/* Ratings/awards line */
#stimmen + p, section[aria-labelledby="stimmen"] p { color: var(--muted); }

/* ===============================
   Desktop enhancements
   =============================== */
@media (min-width: 992px) {
  .container { gap: 24px; }
  /* Section paddings */
  main > section { padding: 60px 0; }
  /* Footer layout */
  footer .content-wrapper { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  /* Align header content */
  header .container { gap: 20px; }
}

/* ===============================
   Print (basic)
   =============================== */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal-backdrop { display: none !important; }
  a { text-decoration: none; color: #000; }
}