/*
  Glimmerfield soft_pastel UI — style.css
  - Mobile-first
  - Flexbox-only layouts (no CSS Grid/Columns)
  - Pastel aesthetic with brand typography/colors
  - Includes mobile menu + cookie consent banner
*/

/* ==========================
   1) RESET & BASELINE
   ========================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(13,59,102,0.35); outline-offset: 2px; }

/* ==========================
   2) THEME TOKENS
   ========================== */
:root {
  /* Brand */
  --brand-ink: #0D3B66;       /* primary */
  --brand-accent: #F95738;    /* secondary */
  --brand-soft: #F4F7FB;      /* accent bg */

  /* Soft pastel palette */
  --pastel-sky: #E6F0FA;
  --pastel-mint: #EAF7F1;
  --pastel-blush: #FDEEF2;
  --pastel-lilac: #F1EDFA;
  --pastel-peach: #FFF1E6;

  /* Neutrals */
  --ink: #1E2A37;            /* body text */
  --ink-soft: #4B5563;       /* muted text */
  --bg: #FAFBFE;             /* app background */
  --card: #FFFFFF;           /* surfaces */
  --border: #E6EAF2;         /* dividers */

  /* Effects */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --shadow-s: 0 2px 8px rgba(13,59,102,0.06);
  --shadow-m: 0 8px 24px rgba(13,59,102,0.08);
  --transition: 200ms ease;
}

/* ==========================
   3) TYPOGRAPHY
   ========================== */
body {
  font-family: Arial, Helvetica, sans-serif; /* brand body */
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* brand display */
  color: var(--brand-ink);
  margin: 0 0 12px;
}

h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; margin-top: 8px; }
h3 { font-size: 18px; line-height: 1.35; }
p { margin: 0 0 14px; color: var(--ink); }
.eyebrow { font-size: 14px; color: var(--ink-soft); letter-spacing: .02em; margin-bottom: 8px; }
.small, small { font-size: 14px; color: var(--ink-soft); }
strong { color: var(--ink); }

/* Typography scaling */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* ==========================
   4) LAYOUT PRIMITIVES (Flexbox-only)
   ========================== */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-s); }
.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: #fff; border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-s); color: var(--ink); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Section defaults with pastel rhythm */
main > section {
  padding: 40px 0;
  display: flex;
}
main > section:nth-of-type(odd) { background: var(--brand-soft); }
main > section:nth-of-type(even) { background: #ffffff; }

/* Prevent overlapping & ensure spacing */
main > section .content-wrapper > * { margin-bottom: 10px; }
main > section .content-wrapper > *:last-child { margin-bottom: 0; }

/* ==========================
   5) HEADER & NAVIGATION
   ========================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(13,59,102,0.04);
}
header .content-wrapper {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; }
.brand img { height: 36px; width: auto; }

.main-nav { display: none; align-items: center; gap: 12px; }
.main-nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--brand-ink);
  transition: background var(--transition), color var(--transition);
}
.main-nav a:hover { background: var(--pastel-sky); }

.header-cta { display: none; align-items: center; gap: 10px; }
.header-cta a {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: bold;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.header-cta a:nth-child(1) { background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-s); }
.header-cta a:nth-child(1):hover { transform: translateY(-1px); box-shadow: var(--shadow-m); }
.header-cta a:nth-child(2) { background: var(--pastel-lilac); color: var(--brand-ink); }
.header-cta a:nth-child(2):hover { background: #E8E3F7; }

/* Mobile burger */
.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--pastel-sky);
  color: var(--brand-ink);
}
.mobile-menu-toggle:hover { background: #DCE8F7; }

/* Desktop reveal */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ==========================
   6) MOBILE MENU OVERLAY
   ========================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(13,59,102,0.12);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  transform: translateX(100%);
  transition: transform 280ms ease;
  z-index: 1200;
}
.mobile-menu .mobile-nav {
  width: 86%; max-width: 360px; min-width: 280px;
  background: #fff;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(13,59,102,0.12);
}
.mobile-menu.open, .mobile-menu.active, body.nav-open .mobile-menu { transform: translateX(0); }

.mobile-menu-close {
  position: relative;
  align-self: flex-start;
  margin: 14px;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--pastel-blush);
  color: var(--brand-ink);
}
.mobile-nav a {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  border-radius: 12px;
  color: var(--brand-ink);
  background: var(--brand-soft);
}
.mobile-nav a + a { margin-top: 6px; }
.mobile-nav a:hover { background: #E9EFF9; }

/* ==========================
   7) HERO
   ========================== */
.hero { background: var(--pastel-sky); }
.hero .content-wrapper { padding: 20px 0; }
.hero p { color: var(--ink); }
.hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hero-ctas a {
  padding: 12px 16px;
  border-radius: 999px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.hero .hero-ctas a:nth-child(1) { background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-s); }
.hero .hero-ctas a:nth-child(1):hover { transform: translateY(-1px); box-shadow: var(--shadow-m); }
.hero .hero-ctas a:nth-child(2) { background: var(--pastel-mint); color: var(--brand-ink); }
.hero .hero-ctas a:nth-child(2):hover { background: #DDF3E8; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges > div {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-s);
}
.trust-badges img { width: 18px; height: 18px; }

.phone-highlight { display: flex; align-items: center; gap: 8px; font-weight: bold; }
.phone-highlight img { width: 18px; height: 18px; }
.phone-highlight a { color: var(--brand-ink); text-decoration: underline; }

/* ==========================
   8) FEATURE / SERVICE / PACKAGES / VEHICLES
   ========================== */
.feature-grid,
.service-cards,
.package-cards,
.vehicle-list {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
}
.feature-grid > div,
.service-cards > div,
.package-cards > div,
.vehicle-list > .text-section {
  flex: 1 1 260px;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 18px;
  box-shadow: var(--shadow-s);
  display: flex; flex-direction: column; gap: 10px;
}
.service-cards > div:hover,
.package-cards > div:hover,
.vehicle-list > .text-section:hover { box-shadow: var(--shadow-m); transition: box-shadow var(--transition); }

.service-cards a,
.package-cards a,
.vehicle-list .cta-row a {
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pastel-lilac);
  color: var(--brand-ink);
}
.service-cards a:hover,
.package-cards a:hover,
.vehicle-list .cta-row a:hover { background: #E8E3F7; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

.metrics ul { display: flex; flex-wrap: wrap; gap: 12px; padding-left: 0; list-style: none; }
.metrics li { padding: 10px 12px; background: var(--pastel-peach); border-radius: 999px; border: 1px solid var(--border); }

.availability-notice { color: var(--ink-soft); font-style: italic; }

/* ==========================
   9) LISTS / CHECKLISTS / INFO BLOCKS
   ========================== */
.documents-checklist, .inclusions, .pricing-notes, .sla, .fixed-prices, .opening-hours, .map-placeholder, .brand-values, .founder-story, .service-philosophy, .milestones, .certifications, .text-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 18px;
  box-shadow: var(--shadow-s);
}
.documents-checklist ul,
.inclusions ul,
.fixed-prices ul,
.milestones ul,
.certifications ul {
  margin: 8px 0 0 0; padding-left: 18px;
}

/* ==========================
   10) TESTIMONIALS & RATINGS
   ========================== */
.rating-summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--pastel-mint); border: 1px solid var(--border); border-radius: 999px; width: fit-content; }
.rating-summary img { width: 18px; height: 18px; }

.testimonial-list { display: flex; flex-wrap: wrap; gap: 20px; }
.testimonial-card p { margin: 0; }
.testimonial-card p + p { margin-top: 6px; }
/* Contrast rule: dark text on light surface already enforced via background #fff and color var(--ink) */

/* ==========================
   11) FOOTER
   ========================== */
footer { background: #FFFFFF; border-top: 1px solid var(--border); }
footer .content-wrapper { padding: 30px 0; }
.brand-badge { display: flex; align-items: center; }
.brand-badge img { height: 42px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-nav a { padding: 8px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); }
.footer-nav a:hover { background: #E9EFF9; }
.contact-snippet p { margin: 0 0 6px; }
.social-links { display: flex; align-items: center; gap: 10px; }
.social-links a { display: inline-flex; padding: 8px; border-radius: 12px; background: var(--pastel-blush); }
.social-links img { width: 18px; height: 18px; }

/* ==========================
   12) LINKS & BUTTON INTERACTIONS
   ========================== */
a:hover { opacity: 0.95; }
button, .mobile-menu-toggle, .mobile-menu-close { transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }

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

@media (min-width: 768px) {
  .hero .content-wrapper { padding: 24px 0; }
}

@media (min-width: 1024px) {
  .content-grid { justify-content: space-between; }
}

/* ==========================
   14) ACCESSIBILITY & UTILITIES
   ========================== */
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* ==========================
   15) PAGE-SPECIFIC TWEAKS (class-safe)
   ========================== */
/* Über uns cards in calm pastel */
.brand-values { background: var(--pastel-mint); }
.service-philosophy { background: var(--pastel-lilac); }
.founder-story { background: var(--pastel-peach); }
.milestones { background: var(--pastel-sky); }
.certifications { background: var(--pastel-blush); }

/* Kontakt page */
.map-placeholder { display: flex; flex-direction: column; gap: 8px; }
.map-placeholder h3 { margin-bottom: 6px; }
.map-placeholder img { width: 18px; height: 18px; display: inline-block; }

/* Fahrzeugangebot */
.vehicle-list .text-section h3 { margin-bottom: 4px; }

/* Index metrics bar */
.metrics { display: flex; flex-direction: column; gap: 10px; }

/* ==========================
   16) CONSISTENT FLEXBOX ENFORCEMENT
   ========================== */
/* Major containers ensure flex usage */
header > .container,
main > section > .container,
footer > .container { display: flex; }

/* ==========================
   17) COOKIE CONSENT BANNER & MODAL
   ========================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(13,59,102,0.08);
  z-index: 1400;
  transform: translateY(110%);
  transition: transform 260ms ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { color: var(--ink); }
.cookie-banner .cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .cookie-buttons button { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); }
.cookie-accept { background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-s); }
.cookie-accept:hover { box-shadow: var(--shadow-m); transform: translateY(-1px); }
.cookie-reject { background: var(--pastel-blush); color: var(--brand-ink); }
.cookie-settings { background: var(--brand-soft); color: var(--brand-ink); }

/* Cookie preferences modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,59,102,0.20);
  transform: scale(1.02); opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.cookie-modal.open { opacity: 1; transform: scale(1); pointer-events: auto; }
.cookie-modal-content {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l);
  width: 92%; max-width: 640px; padding: 20px; box-shadow: var(--shadow-m);
  display: flex; flex-direction: column; gap: 14px;
}
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 10px; }
.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-toggle { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--brand-soft); border-radius: var(--radius-s); }

/* ==========================
   18) CARDS, BADGES, TAGS
   ========================== */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--pastel-sky); border: 1px solid var(--border); }

/* ==========================
   19) SOFT PASTEL ATMOSPHERE
   ========================== */
/* Gentle section accents for specific contexts (kept solid for compatibility) */
.hero { background: var(--pastel-sky); }
main > section:nth-of-type(3) { background: var(--pastel-mint); }
main > section:nth-of-type(5) { background: var(--pastel-peach); }

/* ==========================
   20) ICON SIZING HELPERS
   ========================== */
img[alt^="Telefon"], img[alt^="E-Mail"], img[alt^="Adresse"], img[alt^="Uhr"] { width: 18px; height: 18px; display: inline-block; }

/* ==========================
   21) SAFETY: ENSURE GAPS BETWEEN ELEMENTS
   ========================== */
.feature-grid, .service-cards, .package-cards, .vehicle-list, .testimonial-list, .footer-nav, .social-links { gap: 20px; }

/* ==========================
   22) PRINT BASIC (optional minimal)
   ========================== */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}