/* KaufKompass Deutschland – Scandinavian Clean Theme */
/* CSS Reset & Base Normalize */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif; color: #1B2B3A; background-color: #F5F7FA; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1F3A5F; text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding-left: 20px; }
p { margin: 0; }
button { font-family: inherit; font-size: 16px; line-height: 1; background: none; border: none; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid #2E7D6E; outline-offset: 2px; }

/* Theme Tokens (with fallbacks) */
:root { --primary: #1F3A5F; --secondary: #2E7D6E; --accent: #F5F7FA; --ink: #1B2B3A; --muted: #5B6B7A; --line: #E3E8EE; --surface: #FFFFFF; --shadow-100: 0 2px 8px rgba(16,24,40,0.06); --radius-200: 10px; --radius-100: 8px; --radius-50: 6px; }

/* Typography Scale */
h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; color: var(--primary); margin: 0 0 10px 0; }
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 20px; line-height: 1.4; }
h4 { font-size: 18px; line-height: 1.5; }
small, .small { font-size: 14px; color: var(--muted); }

/* Containers & Layout – Mobile First (Flex Only) */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; }
section { padding: 40px 0; display: flex; flex-direction: column; }
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Header */
header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1000; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 32px; width: auto; }
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--ink); padding: 8px 10px; border-radius: 6px; transition: background-color .2s ease, color .2s ease; }
.main-nav a:hover { background: var(--accent); color: var(--primary); text-decoration: none; }
.header-ctas { display: none; align-items: center; gap: 10px; }

/* Hero */
.hero { background: var(--accent); border-bottom: 1px solid var(--line); }
.hero .container { padding-top: 24px; padding-bottom: 24px; }
.hero p { color: var(--ink); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Lists & Blocks */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.text-section { display: flex; flex-direction: column; gap: 10px; background: transparent; }
.text-section ul, .text-section ol { margin: 0; }
.step-list { display: flex; flex-direction: column; gap: 12px; padding-left: 0; list-style: decimal inside; }
.step-list li { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--secondary); border-radius: var(--radius-100); padding: 12px 14px; color: var(--ink); box-shadow: var(--shadow-100); }

.metrics-bar, .article-teasers, .article-list, .category-grid { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 0; list-style: none; }
.metrics-bar li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; color: var(--primary); box-shadow: var(--shadow-100); }
.article-teasers li, .article-list li, .category-grid li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-100); padding: 12px 14px; box-shadow: var(--shadow-100); flex: 1 1 240px; }
.article-list a, .article-teasers a { color: var(--ink); font-weight: 600; }

/* Testimonials (contrast strong) */
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-200); box-shadow: var(--shadow-100); color: #0F1B2A; }
.testimonial-card p { margin: 0; }

/* Utility Flex Patterns (required) */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-100); box-shadow: var(--shadow-100); }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; font-weight: 600; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease; border: 1px solid transparent; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 10px rgba(31,58,95,0.15); }
.btn-primary:hover { background: #1B3354; color: #fff; text-decoration: none; }
.btn-secondary { background: var(--secondary); color: #fff; box-shadow: 0 2px 10px rgba(46,125,110,0.15); }
.btn-secondary:hover { background: #286E62; color: #fff; text-decoration: none; }
.btn-link { background: transparent; color: var(--primary); padding: 8px 4px; border-radius: 6px; }
.btn-link:hover { background: var(--accent); text-decoration: none; }

/* Breadcrumb */
.breadcrumb { color: var(--muted); font-size: 14px; }

/* Trust badges & supporting points */
.trust-badges ul, .supporting-points ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding-left: 0; }
.trust-badges li, .supporting-points li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--ink); box-shadow: var(--shadow-100); }

/* Footer */
footer { background: #ffffff; border-top: 1px solid var(--line); }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: 20px; padding: 24px 0; }
.footer-brand, .footer-nav, .footer-contact, .footer-cta { display: flex; flex-direction: column; gap: 10px; flex: 1 1 240px; }
.footer-nav { gap: 8px; }
.footer-nav a { color: var(--ink); }
.footer-nav a:hover { color: var(--primary); }
.footer-brand img { height: 28px; width: auto; }

/* Header CTAs and Contact Icons */
.text-section p img { display: inline-flex; width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; }

/* Spacing between blocks inside content wrapper */
.content-wrapper > * + * { margin-top: 10px; }

/* Tables (if any) */
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: 10px; text-align: left; }

/* Mobile Navigation */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--primary); }
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.3); display: flex; justify-content: flex-end; transform: translateX(100%); transition: transform .3s ease; z-index: 1200; }
.mobile-menu .mobile-nav { background: var(--surface); width: 85%; max-width: 360px; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 20px; box-shadow: -6px 0 16px rgba(16,24,40,0.12); }
.mobile-menu-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.mobile-nav a { display: flex; align-items: center; padding: 12px 10px; border-radius: 8px; color: var(--ink); font-weight: 600; }
.mobile-nav a:hover { background: var(--accent); color: var(--primary); text-decoration: none; }
/* Slide control via aria-hidden or helper class */
.mobile-menu[aria-hidden="false"], .mobile-menu.open { transform: translateX(0); }

/* Hide desktop nav on mobile */
@media (max-width: 991px) { .main-nav, .header-ctas { display: none; } }

/* Desktop Navigation */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
  .header-ctas { display: flex; }
  header .container { padding-top: 14px; padding-bottom: 14px; }
}

/* Responsive Layout Enhancements */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .content-wrapper { gap: 24px; }
  .text-image-section { flex-direction: row; }
  .article-teasers li, .article-list li, .category-grid li { flex: 1 1 calc(50% - 12px); }
}
@media (min-width: 1200px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .feature-grid .text-section { flex: 1 1 calc(50% - 10px); }
  .article-teasers li, .article-list li, .category-grid li { flex: 1 1 calc(33.333% - 12px); }
}

/* Cookie Consent Banner */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(16,24,40,0.08); padding: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 1100; transform: translateY(110%); transition: transform .3s ease; }
.cookie-banner.active, .cookie-banner[aria-hidden="false"] { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-actions .btn { padding: 10px 14px; border-radius: 8px; }
.cookie-actions .btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }

/* Cookie Preferences Modal */
.cookie-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 1300; }
.cookie-modal-backdrop.active { display: flex; }
.cookie-modal { background: var(--surface); width: 92%; max-width: 560px; border-radius: var(--radius-200); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(16,24,40,0.18); display: flex; flex-direction: column; gap: 16px; padding: 20px; transform: translateY(20px); transition: transform .25s ease; }
.cookie-modal-backdrop.active .cookie-modal { transform: translateY(0); }
.cookie-modal-header, .cookie-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-100); background: var(--accent); }

/* Links inside content */
.content-wrapper a { transition: color .2s ease, background-color .2s ease; }

/* Cards visual style where needed */
.text-section.card-like { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-100); padding: 16px; box-shadow: var(--shadow-100); }

/* Visual hierarchy spacing utilities */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }

/* Ensure minimum spacing between content blocks */
section .text-section + .text-section, section .testimonial-card + .testimonial-card, section .feature-grid + .text-section, section .metrics-bar + *, section .article-list + *, section .article-teasers + * { margin-top: 20px; }

/* Accent separators */
hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

/* Accessibility color tweaks for links in muted text */
.small a { color: var(--secondary); }

/* Desktop multi-column like footer alignment using flex only */
footer .content-wrapper { align-items: flex-start; }

/* Prevent overflow issues */
.container, .content-wrapper, .feature-grid, .article-list, .article-teasers, .category-grid, .metrics-bar { overflow: visible; }

/* Subtle hover lift for cards */
.article-teasers li:hover, .article-list li:hover, .category-grid li:hover, .testimonial-card:hover { box-shadow: 0 6px 20px rgba(16,24,40,0.12); transform: translateY(-1px); transition: box-shadow .2s ease, transform .1s ease; }

/* Dark mode prep (optional – stays light by default) */
@media (prefers-color-scheme: dark) {
  /* Keep light scheme to preserve Scandinavian clean aesthetic and readability */
}

/* Page-specific minor tweaks */
.hero .trust-badges li, .hero .supporting-points li { background: #fff; }

/* Alignment rules for text-image sections on mobile */
@media (max-width: 768px) { .text-image-section { flex-direction: column; align-items: center; } }

/* Header simple shadow on scroll (class can be toggled by JS if needed) */
header.is-scrolled { box-shadow: 0 2px 10px rgba(16,24,40,0.08); }

/* Readable content widths */
.content-wrapper > p, .text-section > p, .text-section > ul, .text-section > ol { max-width: 70ch; }

/* Ensure all interactive elements reflect the style */
button:hover, .btn:hover { cursor: pointer; }

/* Make sure no overlapping occurs */
section, .container, .content-wrapper { gap: 20px; }

/* End of stylesheet */