/* =============================
   AlpenQuartier Immobilien
   Vintage Retro CSS Theme (Mobile-first)
   ONLY Flexbox layouts, no CSS Grid or Columns
   ============================= */

/* ========== CSS RESET & NORMALIZE ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul, ol { margin: 0; padding-left: 1.2em; }
button { font: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ========== THEME VARIABLES ========== */
:root {
  /* Brand */
  --brand-primary: #1E2A38; /* deep ink */
  --brand-secondary: #2E7D68; /* teal */
  --brand-accent: #F4F7FA; /* light */

  /* Vintage palette */
  --retro-cream: #F5E9D4;
  --retro-tan: #E6D3B1;
  --retro-burnt: #C1613C;
  --retro-brown: #6B4F3A;
  --retro-olive: #7A8D65;

  /* Text & surfaces */
  --bg: #FBF7EF; /* paper-like */
  --surface: #FFFFFF;
  --text: #2B2B2B;
  --muted: #5E665F;

  /* Borders & shadows */
  --line: #D9C7A5;
  --ring: rgba(30, 42, 56, 0.18);
  --shadow: 0 2px 0 rgba(0,0,0,0.05), 0 8px 16px rgba(30,42,56,0.08);

  /* Spacing scale */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-20: 20px;
  --speed: 200ms;
}

/* ========== TYPOGRAPHY ========== */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* brand body */
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman', Times, serif; /* brand display */
  color: var(--brand-primary);
  margin: 0 0 var(--space-16) 0;
  letter-spacing: 0.2px;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.3; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 14px; color: var(--muted); }
p { margin: 0 0 var(--space-16) 0; }
small { font-size: 12px; color: var(--muted); }

/* Vintage link styling */
a { color: var(--brand-secondary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--retro-burnt); }

/* Lists with classic square bullets */
ul { list-style: square; }
ol { list-style: decimal; }
li { margin-bottom: 8px; }

/* Focus states */
:focus-visible { outline: 3px dotted var(--retro-burnt); outline-offset: 2px; }

/* ========== LAYOUT FOUNDATIONS (FLEX ONLY) ========== */
main, header, footer, section { display: flex; flex-direction: column; }

.container {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px;
}

.content-wrapper {
  display: flex; flex-direction: column; gap: var(--space-24);
  width: 100%;
}

section { padding: var(--space-40) 0; }

/* Mandatory spacing class (kept in addition to base section) */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* ========== HEADER & NAV ========== */
header {
  background: var(--brand-primary);
  color: #fff;
  border-bottom: 6px double var(--retro-tan); /* classic double rule */
}
header .container { padding-top: var(--space-16); padding-bottom: var(--space-16); }
header .container { gap: var(--space-16); }

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

.brand-tagline {
  color: #F4F0E6; font-size: 14px; line-height: 1.4;
  opacity: 0.95; font-style: italic; /* nostalgic touch */
}

.main-nav {
  display: none; /* hidden on mobile */
}
.main-nav a {
  color: #fff; text-decoration: none; padding: 8px 10px; border-radius: var(--radius-6);
  letter-spacing: 1px; text-transform: uppercase; font-size: 12px;
}
.main-nav a:hover { background: rgba(255,255,255,0.1); }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--retro-cream); color: var(--brand-primary);
  box-shadow: var(--shadow);
}
.mobile-menu-toggle:hover { background: var(--retro-tan); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000; background: rgba(30,42,56,0.4);
  display: flex; flex-direction: row; align-items: stretch; justify-content: flex-end;
  transform: translateX(100%); transition: transform var(--speed) ease-out, opacity var(--speed) ease-out;
  opacity: 0; pointer-events: none;
}
.mobile-menu.open { transform: translateX(0); opacity: 1; pointer-events: auto; }

.mobile-menu .mobile-nav {
  background: var(--retro-cream); color: var(--brand-primary);
  width: 84%; max-width: 360px; padding: var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-12); box-shadow: var(--shadow);
  border-left: 8px solid var(--retro-tan);
}
.mobile-menu-close {
  position: absolute; top: 14px; right: 14px; z-index: 1001;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-secondary); color: #fff;
}
.mobile-nav a {
  display: flex; align-items: center; padding: 12px 10px; border-radius: var(--radius-6);
  color: var(--brand-primary); background: #fff; border: 1px solid var(--line);
}
.mobile-nav a:hover { background: var(--retro-tan); }

/* Desktop nav */
@media (min-width: 992px) {
  header .container { flex-direction: row; align-items: center; justify-content: space-between; }
  .brand-tagline { order: 3; margin-left: auto; padding-left: var(--space-16); }
  .main-nav { display: flex; flex-direction: row; align-items: center; gap: var(--space-12); }
  .mobile-menu-toggle { display: none; }
}

/* ========== HERO ========== */
.hero { background: var(--retro-cream); border-bottom: 6px double var(--retro-tan); }
.hero .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.hero .content-wrapper {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-24); box-shadow: var(--shadow);
}
.hero h1 { font-size: 32px; }
.hero p { font-size: 16px; color: var(--brand-primary); }

/* ========== TEXT & CONTENT BLOCKS ========== */
.text-section {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
}
.text-section img { display: inline-block; vertical-align: middle; margin-right: 8px; }
.text-section h3 { margin-top: var(--space-8); }

.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; }

/* ========== CTA GROUP & BUTTONS ========== */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 999px; border: 2px solid var(--brand-primary);
  background: var(--retro-cream); color: var(--brand-primary);
  box-shadow: 0 2px 0 rgba(0,0,0,0.05);
  transition: transform var(--speed) ease, background var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
}
.button:hover { transform: translateY(-1px); }

.button.primary {
  background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary);
}
.button.primary:hover { background: #256b59; }

.button.secondary {
  background: #fff; color: var(--brand-primary); border-color: var(--brand-primary);
}
.button.secondary:hover { background: var(--retro-tan); }

/* ========== CARDS & FEATURES ========== */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: var(--space-12);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-10); padding: var(--space-20); box-shadow: var(--shadow);
}
.card-content { display: flex; flex-direction: column; justify-content: center; gap: var(--space-12); }

.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Testimonials: dark text on light background for readability */
.testimonial-card {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  background: #FFF5E6; color: var(--brand-primary);
  border: 1px solid #F0D7B5; border-radius: var(--radius-10); box-shadow: var(--shadow);
}
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--retro-brown); }

/* ========== FOOTER ========== */
footer {
  background: var(--brand-primary); color: #fff; border-top: 6px double var(--retro-tan);
}
footer .container { padding-top: var(--space-32); padding-bottom: var(--space-32); }
footer .content-wrapper { gap: var(--space-24); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
footer nav a { color: #F4F0E6; background: rgba(255,255,255,0.06); padding: 6px 10px; border-radius: var(--radius-6); }
footer nav a:hover { background: rgba(255,255,255,0.14); }
footer h3, footer h4 { color: #fff; }

/* ========== GENERIC UTILITIES & SPACING ========== */
hr { border: none; border-top: 1px solid var(--line); margin: var(--space-24) 0; }
.muted { color: var(--muted); }

/* Ensure adequate spacing between blocks */
.content-wrapper > * { margin: 0; }
.content-wrapper > * + * { margin-top: var(--space-12); }

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

@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  section { padding: var(--space-48) 0; }
  .hero .content-wrapper { padding: var(--space-32); }
}

/* ========== ACCESSIBILITY & INTERACTIONS ========== */
.button:active { transform: translateY(0); }

/* Subtle entrance effect for hero content */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero .content-wrapper { animation: fadeUp 360ms ease-out; }

/* ========== COOKIE CONSENT BANNER ========== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none; /* hidden by default; toggle with .show */
  justify-content: center; align-items: center; padding: var(--space-16);
  background: var(--retro-cream); color: var(--brand-primary);
  border-top: 4px solid var(--retro-tan); box-shadow: 0 -8px 18px rgba(0,0,0,0.08);
}
.cookie-banner.show { display: flex; }
.cookie-banner .cookie-inner {
  display: flex; flex-direction: column; gap: var(--space-12);
  width: 100%; max-width: 1100px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-14); padding: var(--space-16); box-shadow: var(--shadow);
}
.cookie-row { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-buttons .accept { background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary); }
.cookie-buttons .reject { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }
.cookie-buttons .settings { background: var(--retro-tan); color: var(--brand-primary); border-color: var(--brand-primary); }

/* ========== COOKIE SETTINGS MODAL ========== */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1100; background: rgba(30,42,56,0.6);
  display: none; align-items: center; justify-content: center; padding: var(--space-16);
}
.cookie-modal.open { display: flex; }
.cookie-modal-content, .cookie-modal .modal-content {
  display: flex; flex-direction: column; gap: var(--space-16);
  width: 100%; max-width: 700px; background: var(--retro-cream);
  border: 1px solid var(--line); border-radius: var(--radius-14); box-shadow: var(--shadow);
  padding: var(--space-24);
}
.cookie-options { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-10); padding: 12px 14px; }
.cookie-option .label { display: flex; flex-direction: column; }

/* Toggle switch (pure CSS skin) */
.toggle { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #D8D8D8; border: 1px solid #C8C8C8; display: inline-flex; align-items: center; padding: 2px; }
.toggle::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transform: translateX(0); transition: transform var(--speed) ease, background var(--speed) ease; }
.toggle[aria-checked='true'] { background: var(--brand-secondary); border-color: var(--brand-secondary); }
.toggle[aria-checked='true']::after { transform: translateX(20px); background: #fff; }
.toggle[aria-disabled='true'] { opacity: 0.6; }

.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* ========== MANDATORY FLEX SPACING CLASSES (ensured) ========== */
/* Already defined above where applicable; included here for clarity */
/* .section is above */
/* .card-container is above */
/* .card is above */
/* .content-grid is above */
/* .text-image-section is above */
/* .testimonial-card is above */
/* .feature-item is above */

/* ========== PAGE-SPECIFIC TWEAKS ========== */
/* 404 */
body:has(main .hero h1:contains('Seite nicht gefunden')) {}
/* Note: Selector above is non-standard across browsers; keeping page consistent via generic styles */

/* Footer spacing in legal pages */
footer .text-section { display: flex; flex-direction: column; gap: 8px; }

/* ========== TABLES (if any appear) ========== */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--brand-accent); color: var(--brand-primary); font-family: Georgia, 'Times New Roman', Times, serif; }

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .button { padding: 10px 14px; }
}

/* ========== PRINT FRIENDLY ========== */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  header, footer { border: none; }
}

/* ========== SAFETY: PREVENT OVERLAPS & ENSURE GAPS ========== */
.content-wrapper > .testimonial-card,
.content-wrapper > .text-section,
.content-wrapper > .cta-group,
.content-wrapper > .card,
.content-wrapper > nav,
.content-wrapper > p,
.content-wrapper > ul,
.content-wrapper > ol { margin-top: var(--space-12); }

/* ========== NAV ALIGNMENT CLEANUP FOR LARGE VIEWPORTS ========== */
@media (min-width: 1200px) {
  .main-nav a { padding: 10px 12px; font-size: 13px; }
}

/* ========== END ========== */