/* =============================
   KlarGlanz Reinigung – style.css
   Design: modern_bold (bold, bright, geometric, high contrast)
   Layout system: FLEXBOX ONLY (no CSS Grid/Columns)
   ============================= */

/* ========== CSS RESET & NORMALIZE ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.2rem; }
p { margin: 0; }
button { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid #0E6BA8; outline-offset: 2px; }

/* ========== THEME TOKENS ========== */
:root {
  --primary: #0E6BA8;
  --secondary: #1B3A57;
  --accent: #FFFFFF;
  --ink: #0F1A24; /* near-black for strong contrast */
  --ink-muted: #364B5A;
  --bg: #F6F9FC;
  --surface: #FFFFFF;
  --surface-strong: #E9F3FB;
  --border: #D6E2EA;
  --shadow: 0 8px 24px rgba(11, 41, 66, 0.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --speed-fast: 160ms;
  --speed: 260ms;
  --speed-slow: 420ms;
}

/* ========== TYPOGRAPHY ========== */
html { font-size: 16px; }
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; color: var(--secondary); font-weight: 800; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.6rem; line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.25; }
h4 { font-size: 1.125rem; line-height: 1.3; }

p, li { font-size: 1rem; color: var(--ink); }
small { font-size: 0.875rem; color: var(--ink-muted); }

strong { font-weight: 800; }

/* Link styling with bold-modern micro-interaction */
a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: rgba(14,107,168,0.35); transition: color var(--speed) ease, text-decoration-color var(--speed) ease; }
a:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* ========== LAYOUT PRIMITIVES (FLEX ONLY) ========== */
.container { display: flex; width: 100%; justify-content: center; padding: 0 16px; }
.content-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 1152px; gap: 16px; }

/* Spacing for sections */
section { display: flex; padding: 40px 0; }

/* MANDATORY SPACING & 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(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 20px; transition: transform var(--speed) ease, box-shadow var(--speed) ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(11,41,66,0.16); }
.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: var(--surface); border: 2px solid var(--border); border-left: 6px solid var(--primary); border-radius: var(--radius-md); box-shadow: var(--shadow); color: var(--ink); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Utility card grid alias (if used) */
.card-grid { display: flex; flex-wrap: wrap; gap: 24px; }

/* Lists inside content keep flex for consistency */
.text-section, .content-grid, .card-container, .card-grid { align-items: stretch; }
.text-section { display: flex; flex-direction: column; gap: 14px; }
.text-section ul, .text-section ol, .content-wrapper > ul, .content-wrapper > ol { display: flex; flex-direction: column; gap: 10px; }

/* ========== HEADER ========== */
header { background: var(--surface); border-bottom: 3px solid var(--secondary); position: relative; z-index: 20; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.brand img { height: 42px; width: auto; }

/* Desktop nav initially hidden on mobile */
header nav { display: none; align-items: center; gap: 16px; }
header nav a { color: var(--secondary); font-weight: 800; letter-spacing: 0.02em; padding: 10px 12px; border-radius: 10px; transition: background var(--speed) ease, color var(--speed) ease, transform var(--speed) ease; text-decoration: none; }
header nav a[aria-current="page"], header nav a:hover { background: var(--surface-strong); color: var(--primary); transform: translateY(-1px); }

.header-cta { display: none; align-items: center; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--primary); color: #fff; transition: background var(--speed) ease, transform var(--speed) ease; }
.mobile-menu-toggle:hover { background: #0c5f95; transform: translateY(-1px); }

/* ========== HERO ========== */
.hero { background: var(--primary); color: var(--accent); position: relative; overflow: hidden; }
.hero .content-wrapper { gap: 18px; }
.hero h1, .hero p, .hero a { color: var(--accent); }
.hero h1 { font-size: 2.25rem; color: #fff; }
.hero p { color: #F2FAFF; }

/* Geometric decorative shapes (decorative only) */
.hero::before, .hero::after { content: ""; position: absolute; z-index: 0; opacity: 0.1; }
.hero::before { width: 180px; height: 180px; border-radius: 18px; background: #fff; top: -40px; right: -30px; transform: rotate(25deg); }
.hero::after { width: 280px; height: 280px; border-radius: 999px; background: #fff; bottom: -100px; left: -60px; }
.hero .container, .hero .content-wrapper, .hero * { position: relative; z-index: 1; }

/* Trust badges & USPs */
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-badges span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.35); color: #fff; border-radius: 999px; font-weight: 700; }
.usp-bullets { display: flex; flex-direction: column; gap: 8px; color: #EAF7FF; }

/* CTA row */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ========== BUTTONS ========== */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: var(--radius-md); font-weight: 900; letter-spacing: 0.02em; text-transform: none; border: 3px solid transparent; transition: transform var(--speed) ease, box-shadow var(--speed) ease, background var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease; }

.btn-primary { background: var(--secondary); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); background: #142b40; }

.btn-secondary { background: #fff; color: var(--secondary); border-color: var(--secondary); }
.btn-secondary:hover { transform: translateY(-2px); background: var(--surface-strong); color: var(--secondary); }

/* In hero, secondary button stays white for contrast */
.hero .btn-secondary { background: #fff; color: var(--primary); border-color: #fff; }
.hero .btn-secondary:hover { background: #E6F2FA; color: var(--secondary); }

/* ========== GENERIC CONTENT STYLES ========== */
.content-wrapper > p, .text-section > p { color: var(--ink); }
.content-wrapper > p + .cta-row, .text-section > p + .cta-row { margin-top: 8px; }

/* Icons inside text paragraphs */
.text-section p img { width: 20px; height: 20px; margin-right: 8px; display: inline-block; vertical-align: middle; }

/* Details/summary (FAQ) */
details { border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
summary { list-style: none; padding: 14px 16px; font-weight: 800; color: var(--secondary); display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
summary::after { content: "+"; font-weight: 900; color: var(--primary); transition: transform var(--speed) ease; }
details[open] summary::after { content: "–"; transform: rotate(0deg); }
details > .text-section { padding: 0 16px 16px; }

/* Ordered/unordered list spacing */
ul, ol { display: flex; flex-direction: column; gap: 10px; }

/* Statistic-like list styling if used directly under content-wrapper */
.content-wrapper > ul { border-left: 6px solid var(--primary); padding-left: 14px; }

/* ========== TESTIMONIALS readability (light background, dark text) ========== */
.testimonial-card p { margin: 0; color: var(--ink); }
.testimonial-card p + p { color: var(--secondary); }

/* ========== FOOTER ========== */
footer { background: var(--secondary); color: #fff; padding-top: 28px; padding-bottom: 28px; }
footer .content-wrapper { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.footer-brand, footer nav, .footer-contact, .footer-legal, .footer-social, .newsletter-note { display: flex; flex-direction: column; gap: 10px; flex: 1 1 260px; }
footer a { color: #D8EEFF; text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: #fff; }
.footer-legal { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.footer-brand img { height: 40px; }

/* ========== MOBILE NAV (HAMBURGER) ========== */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background: rgba(27,58,87,0.96); transform: translateX(100%); transition: transform var(--speed-slow) cubic-bezier(.2,.8,.2,1); z-index: 999; padding: 18px; }
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 10px; background: #0E6BA8; color: #fff; display: flex; align-items: center; justify-content: center; }
.mobile-nav { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
.mobile-nav a { background: #0E6BA8; color: #fff; padding: 14px 16px; border-radius: var(--radius-md); font-weight: 900; letter-spacing: 0.02em; }
.mobile-nav a[aria-current="page"] { background: #0b5686; }

/* ========== COOKIE CONSENT ========== */
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 3px solid var(--secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow); z-index: 998; transform: translateY(140%); transition: transform var(--speed) ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { display: flex; flex-direction: column; gap: 8px; }
.cookie-banner .cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: var(--radius-md); font-weight: 800; border: 3px solid transparent; }
.cookie-accept { background: var(--secondary); color: #fff; }
.cookie-reject { background: #fff; border-color: var(--secondary); color: var(--secondary); }
.cookie-settings { background: var(--primary); color: #fff; }
.cookie-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* Cookie settings modal */
.cookie-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--speed) ease; }
.cookie-backdrop.show { opacity: 1; pointer-events: auto; }
.cookie-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); background: var(--surface); border: 3px solid var(--secondary); border-radius: var(--radius-lg); box-shadow: var(--shadow); z-index: 1001; width: min(680px, 92vw); display: flex; flex-direction: column; gap: 14px; padding: 18px; opacity: 0; pointer-events: none; transition: transform var(--speed) ease, opacity var(--speed) ease; }
.cookie-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm); }
/* Toggle switch */
.switch { position: relative; width: 48px; height: 28px; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; }
.slider { position: relative; display: inline-flex; width: 100%; height: 100%; background: #CBD9E3; border-radius: 999px; transition: background var(--speed) ease; }
.slider::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--speed) ease; }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::after { transform: translateX(20px); }

/* ========== RESPONSIVE (MOBILE-FIRST) ========== */
@media (min-width: 600px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.8rem; }
  .cta-row { gap: 14px; }
}

@media (min-width: 768px) {
  /* Text-image sections should become rows on desktop */
  .text-image-section { flex-direction: row; }
  .hero { padding-top: 10px; }
}

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

  /* Larger hero rhythm */
  .hero .content-wrapper { gap: 20px; }
  .hero h1 { font-size: 3rem; }

  /* Footer columns distribute */
  footer .content-wrapper { gap: 24px; }
}

/* ========== ACCESSIBILITY & STATES ========== */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .cookie-btn:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(14,107,168,0.6); }

/* ========== ADDITIONAL UTILITIES & SAFEGUARDS ========== */
.hr { height: 3px; background: var(--secondary); border-radius: 4px; width: 100%; display: block; }
.hidden { display: none !important; }

/* Ensure adequate spacing between stacked cards/sections */
.content-wrapper > * + * { margin-top: 10px; }

/* Prevent visual overlap with generous padding and borders on main content sections */
main > section:not(.hero) .content-wrapper { background: transparent; }

/* Numbers and data blocks styling (bold modern) */
.content-wrapper > ul li, .text-section ul li { padding-left: 0; }

/* Stats emphasis */
.content-wrapper > ul li strong, .text-section ul li strong { color: var(--secondary); }

/* ========== PAGE-SPECIFIC TOUCHES ========== */
/* Index: numbers section clarity */
main section .content-wrapper > p + .testimonial-card { margin-top: 12px; }

/* Footer social row */
#social { flex-direction: row; align-items: center; gap: 8px; }

/* ========== ENHANCED CARDS (OPTIONAL SHARED) ========== */
.card.accent { border-color: var(--primary); }
.card .card-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/* ========== ALIGNMENT RULES FROM SPEC ========== */
/* Explicitly enforce vertical alignment in common flex groups */
.align-center { display: flex; align-items: center; }
.align-start { display: flex; align-items: flex-start; }
.justify-between { display: flex; justify-content: space-between; }

/* ========== PRINT BASICS ========== */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-backdrop, .cookie-modal { display: none !important; }
  a { text-decoration: underline; color: #000; }
}