/* =========================================================
   Raumglanz Express — Minimalist CSS Theme (Flexbox Only)
   Author: Senior CSS Developer & UI Designer
   Notes:
   - Mobile-first, generous whitespace, subtle shadows, clean type
   - Only Flexbox for layouts (no CSS Grid or Columns)
   - Matches exact HTML class names provided
   - Includes mobile menu + cookie consent components
   ========================================================= */

/* ---------------------------
   0) CSS RESET / NORMALIZE
   --------------------------- */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
a { background-color: transparent; text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; height: auto; }
button { background: none; border: 0; font: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #124559; outline-offset: 2px; }

/* ---------------------------
   1) ROOT TOKENS (with fallbacks)
   --------------------------- */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-muted: #F5F7FA; /* accent */
  --color-border: #E6EBEF;
  --color-text: #0F2A32; /* darkened primary family */
  --color-primary: #124559; /* brand primary */
  --color-secondary: #D9B26F; /* brand secondary */
  --color-link: #124559;
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
}

/* ---------------------------
   2) BASE TYPOGRAPHY
   --------------------------- */
html { font-size: 16px; }
body {
  font-family: Verdana, Geneva, sans-serif; /* brand body */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif; font-weight: 700; letter-spacing: 0.2px; }
h1 { font-size: 2rem; line-height: 1.2; margin-bottom: var(--space-16); }
h2 { font-size: 1.75rem; line-height: 1.25; margin-bottom: var(--space-16); }
h3 { font-size: 1.25rem; line-height: 1.35; margin-bottom: var(--space-12); }
p { font-size: 1rem; line-height: 1.7; margin-bottom: var(--space-12); color: var(--color-text); }
strong { font-weight: 700; }
small { font-size: 0.875rem; color: #4B5A62; }

/* Links */
a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

/* Lists inside .text-section retain bullets/numbers for clarity */
.text-section ul { list-style: disc; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 10px; }
.text-section ol, .steps-list { list-style: decimal; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 10px; }

/* ---------------------------
   3) LAYOUT WRAPPERS (Flexbox Only)
   --------------------------- */
header, footer, main, section { width: 100%; }

.container { /* central wrapper */
  display: flex; /* flex layout */
  flex-direction: column;
  gap: var(--space-20);
  max-width: 1120px;
  padding: 0 var(--space-20);
  margin: 0 auto;
}

.content-wrapper { /* inner layout */
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* Provide breathing space between sections (element) */
section { padding: var(--space-40) 0; border-top: 1px solid transparent; }
section + section { border-top-color: var(--color-border); }

/* MANDATORY SPACING PATTERNS (exact rules) */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.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; }

/* ---------------------------
   4) HEADER & NAVIGATION
   --------------------------- */
header { position: sticky; top: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); z-index: 1000; }
header .container { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* Header row */
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); }

.logo { display: flex; align-items: center; }
.logo img { height: 34px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--space-16); }
.main-nav a { padding: 8px 10px; border-radius: var(--radius-sm); color: #20343C; font-size: 0.95rem; }
.main-nav a:hover { background: var(--color-muted); text-decoration: none; }

.header-cta { display: none; align-items: center; gap: var(--space-12); }

/* Mobile menu toggle */
.mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--color-muted); color: var(--color-text); transition: background 200ms ease, transform 200ms ease; }
.mobile-menu-toggle:hover { background: #E9EEF4; transform: translateY(-1px); }

/* Mobile menu panel */
.mobile-menu { position: fixed; top: 0; right: 0; height: 100vh; width: 86%; max-width: 360px; background: #FFFFFF; box-shadow: var(--shadow-md); transform: translateX(100%); transition: transform 280ms ease; z-index: 1100; display: flex; flex-direction: column; padding: var(--space-20); gap: var(--space-20); }
.mobile-menu.open, .mobile-menu.active, body.menu-open .mobile-menu, .mobile-menu[data-state="open"] { transform: translateX(0); }

.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; background: var(--color-muted); color: var(--color-text); display: flex; align-items: center; justify-content: center; }

.mobile-nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-nav a { padding: 12px 10px; border-radius: 8px; background: #F8FAFC; color: #1E2E36; font-size: 1rem; }
.mobile-nav a:hover { background: #EEF3F7; }

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

/* ---------------------------
   5) HERO SECTIONS
   --------------------------- */
.hero { background: var(--color-muted); }
.hero .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.hero h1 { font-size: 2rem; }
.hero p { font-size: 1.05rem; color: #2A3D45; }

@media (min-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
}
@media (min-width: 1100px) {
  .hero h1 { font-size: 3rem; }
}

/* USP badges / service highlights / pricing usps */
.usp-badges, .service-highlights, .pricing-usps { display: flex; flex-wrap: wrap; gap: 10px; }
.usp-badges span, .service-highlights span, .pricing-usps span { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--color-border); background: #FFFFFF; border-radius: 999px; font-size: 0.9rem; color: #3A4C54; box-shadow: var(--shadow-sm); }

/* CTA group */
.cta-group, .cta-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }

/* Trust markers */
.trust-markers { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.trust-markers > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #FFFFFF; }
.trust-markers img { width: 18px; height: 18px; }

/* Contact snippet row */
.contact-snippet { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.contact-snippet > div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #FFFFFF; }
.contact-snippet img { width: 16px; height: 16px; }

/* Tagline strip */
.brand-tagline-strip { display: flex; padding: 14px 16px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

/* ---------------------------
   6) BUTTONS & INTERACTIONS
   --------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; font-weight: 700; font-family: "Trebuchet MS", Tahoma, sans-serif; letter-spacing: 0.2px; transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 180ms ease; border: 1px solid transparent; }

.btn-primary { background: var(--color-primary); color: #FFFFFF; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #0F3A49; box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.btn-primary:active { transform: translateY(0); }

.btn-secondary { background: #FFFFFF; color: var(--color-primary); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-muted); border-color: #D5DEE6; text-decoration: none; }

/* ---------------------------
   7) TEXT & CONTENT BLOCKS
   --------------------------- */
.text-section { display: flex; flex-direction: column; gap: 10px; }
.rating-summary { display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px; width: fit-content; box-shadow: var(--shadow-sm); }
.rating-summary img { width: 18px; height: 18px; }

/* Steps list spacing for clarity */
.steps-list li { padding-left: 2px; }

/* Testimonials - high contrast on light background */
.testimonial-card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.testimonial-card p { color: #1B2E36; font-size: 1rem; }
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: box-shadow 200ms ease, transform 200ms ease; }

/* Generic cards for future content */
.card { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-20); }

/* ---------------------------
   8) FOOTER
   --------------------------- */
footer { background: #FFFFFF; border-top: 1px solid var(--color-border); }
footer section { padding: var(--space-32) 0; }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: var(--space-20); }

.brand-badge { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.brand-badge img { width: 28px; height: 28px; }
.brand-badge span { font-weight: 700; color: var(--color-primary); }

.quick-links, .legal-links, .contact-info, .social-links { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 220px; }
.quick-links nav, .legal-links nav { display: flex; flex-direction: column; gap: 6px; }
.quick-links a, .legal-links a { color: #3A4C54; }
.quick-links a:hover, .legal-links a:hover { color: var(--color-primary); text-decoration: underline; }

.small-print { display: flex; width: 100%; margin-top: var(--space-12); }
.small-print p { color: #6A7C83; font-size: 0.9rem; }

/* ---------------------------
   9) RESPONSIVE UTILITIES
   --------------------------- */
/* Text-image sections switch to row on larger screens */
@media (min-width: 768px) {
  .text-image-section { flex-direction: row; }
}
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* Header wrapper to maintain spacing at desktop */
@media (min-width: 992px) {
  header .content-wrapper { gap: var(--space-20); }
}

/* ---------------------------
   10) PAGE-SPECIFIC POLISH
   --------------------------- */
/* Lists within pricing & features for readability */
section ul li, section ol li { color: #243841; }

/* Pricing emphasis via subtle surface */
section:has(h2:contains("Preis")) {}
/* Note: :has and :contains are not widely supported; intentionally left empty for compatibility */

/* ---------------------------
   11) MOBILE MENU OVERLAY (optional dim background)
   --------------------------- */
/* Use a generic body state toggled by JS for background scroll locking */
body.menu-open { overflow: hidden; }

/* ---------------------------
   12) COOKIE CONSENT COMPONENTS
   --------------------------- */
/* Banner at bottom */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(17,24,39,0.08); z-index: 1200; transform: translateY(110%); transition: transform 280ms ease; }
.cookie-banner.show, .cookie-banner.open, .cookie-banner[data-state="open"] { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 8px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { padding: 10px 14px; border-radius: 8px; font-size: 0.95rem; }
.cookie-accept { background: var(--color-primary); color: #FFFFFF; }
.cookie-accept:hover { background: #0F3A49; }
.cookie-reject { background: #FFFFFF; color: #1F2F36; border: 1px solid var(--color-border); }
.cookie-reject:hover { background: var(--color-muted); }
.cookie-settings { background: #FFFFFF; color: var(--color-primary); border: 1px solid var(--color-border); }
.cookie-settings:hover { background: var(--color-muted); }

/* Modal overlay */
.cookie-overlay { position: fixed; inset: 0; background: rgba(15, 26, 32, 0.45); display: none; align-items: center; justify-content: center; z-index: 1300; }
.cookie-overlay.open, .cookie-overlay[data-state="open"] { display: flex; }

/* Modal */
.cookie-modal { background: #FFFFFF; width: min(680px, 92vw); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-16); transform: translateY(20px); opacity: 0; transition: transform 260ms ease, opacity 260ms ease; }
.cookie-overlay.open .cookie-modal, .cookie-overlay[data-state="open"] .cookie-modal { transform: translateY(0); opacity: 1; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: #FFFFFF; }
.cookie-category .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Simple toggle visual */
.toggle { width: 44px; height: 26px; border-radius: 26px; background: #CFD8DF; position: relative; display: inline-flex; align-items: center; padding: 3px; transition: background 200ms ease; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-sm); transform: translateX(0); transition: transform 200ms ease; }
.toggle.on { background: var(--color-primary); }
.toggle.on::after { transform: translateX(18px); }

/* ---------------------------
   13) FORMS (generic future-proof styling)
   --------------------------- */
input, select, textarea { font-family: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-border); background: #FFFFFF; color: var(--color-text); width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(18,69,89,0.12); }
label { font-size: 0.95rem; color: #2F424A; margin-bottom: 6px; display: inline-flex; }

/* ---------------------------
   14) SPACING UTILITIES
   --------------------------- */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }

/* ---------------------------
   15) ACCESSIBILITY & PRINT
   --------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

@media print {
  header, .mobile-menu, .cookie-banner, .cookie-overlay { display: none !important; }
  a { text-decoration: underline; }
  body { color: #000; }
}

/* ---------------------------
   16) DESKTOP TUNING
   --------------------------- */
@media (min-width: 1024px) {
  .container { gap: var(--space-24); }
  .content-wrapper { gap: var(--space-24); }
}

/* ---------------------------
   17) ENSURE MINIMUM GAPS BETWEEN CARDS/SECTIONS
   --------------------------- */
/* All card-like elements spaced */
.card, .testimonial-card, .rating-summary, .trust-markers > div, .contact-snippet > div { margin-right: 0; }

/* Prevent overlaps via adequate spacing */
* + .card, * + .testimonial-card { margin-top: 20px; }

/* ---------------------------
   18) BRAND COLOR ACCENTS FOR HEADINGS
   --------------------------- */
h1, h2 { color: var(--color-primary); }
h3 { color: #1E3540; }

/* ---------------------------
   19) NAV FOCUS STATES
   --------------------------- */
.main-nav a:focus-visible, .mobile-nav a:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; border-radius: 8px; }

/* ---------------------------
   20) MISC CONTENT ALIGNMENT
   --------------------------- */
/* Ensure centered alignment utilities where appropriate */
.centered { display: flex; align-items: center; justify-content: center; }

/* ---------------------------
   21) PAGE-LEVEL READAILITY
   --------------------------- */
/* Make long legal pages comfortable */
main section .content-wrapper > p { max-width: 72ch; }
.text-section p, .text-section ul, .text-section ol { max-width: 72ch; }

/* ---------------------------
   22) PREVENT ABSOLUTE POSITIONING FOR CONTENT CARDS
   --------------------------- */
/* Only decorative elements can be positioned absolutely; none defined here. */