/* =====================================================================
   StadtPassagen Immobilien — style.css
   Scandinavian Clean: light colors, simple typography, functional beauty
   Brand: Primary #153E66, Secondary #2D6B6F, Accent #F5F7FA; Fonts: Georgia/Verdana
   Mobile-first; Only Flexbox for layouts; No CSS Grid/Columns
   ===================================================================== */

/* ==========================
   1) Reset & Base Settings
   ========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: #253443; background-color: #FFFFFF; font-family: Verdana, Geneva, Tahoma, sans-serif; line-height: 1.6; font-size: 16px; }
img, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: #2D6B6F; text-decoration: none; }
a:hover { text-decoration: underline; }
button, a.button { cursor: pointer; }
:focus { outline: 2px solid #2D6B6F; outline-offset: 2px; }

/* CSS Custom Properties with fallbacks */
:root { --primary: #153E66; --secondary: #2D6B6F; --accent: #F5F7FA; --ink: #253443; --muted: #5C6B7A; --line: #E6EEF4; --surface: #FFFFFF; --shadow: rgba(16, 24, 40, 0.06); --radius: 10px; --radius-sm: 8px; --radius-lg: 16px; --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; --space-80: 80px; }

/* Typography Scale */
h1, h2, h3, h4 { margin: 0 0 var(--space-16, 16px) 0; color: var(--primary, #153E66); font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.4; }
h4 { font-size: 16px; line-height: 1.4; }

p { margin: 0 0 var(--space-16, 16px) 0; color: var(--ink, #253443); }
small, .small { font-size: 14px; color: var(--muted, #5C6B7A); }
strong { font-weight: 700; }
em { font-style: italic; }

ul, ol { margin: 0 0 var(--space-16, 16px) 0; padding-left: 20px; }
li { margin-bottom: 8px; }

/* Containers & Layout (Flex-only) */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: var(--space-20, 20px); }
.content-wrapper { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--space-20, 20px); }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }

/* Sections */
section { margin-bottom: var(--space-60, 60px); padding: var(--space-40, 40px) 0; background: transparent; }
/* Mandatory spacing class (even if not used in HTML) */
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Hero */
.hero { background-color: var(--accent, #F5F7FA); border-bottom: 1px solid var(--line, #E6EEF4); }
.hero .content-wrapper { padding: var(--space-32, 32px) var(--space-20, 20px); background: transparent; }
.hero h1 { color: var(--primary, #153E66); }
.hero p { color: var(--muted, #5C6B7A); }

/* Card Patterns (for reusability) */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: var(--space-12, 12px); background: var(--surface, #FFFFFF); border: 1px solid var(--line, #E6EEF4); border-radius: var(--radius, 10px); padding: var(--space-20, 20px); box-shadow: 0 2px 10px var(--shadow, rgba(16,24,40,0.06)); transition: transform 200ms ease, box-shadow 200ms ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,0.10); }

/* Text + Image sections (generic) */
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.text-image-section > * { flex: 1 1 320px; }

/* Text blocks */
.text-section { display: flex; flex-direction: column; gap: var(--space-12, 12px); padding: var(--space-20, 20px); background: var(--surface, #FFFFFF); border: 1px solid var(--line, #E6EEF4); border-radius: var(--radius, 10px); box-shadow: 0 2px 8px var(--shadow, rgba(16,24,40,0.06)); }

/* Feature item (for lists of features) */
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Testimonials */
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: #FFFFFF; border: 1px solid var(--line, #E6EEF4); border-radius: var(--radius, 10px); box-shadow: 0 2px 10px var(--shadow, rgba(16,24,40,0.06)); color: #1F2A37; }
.testimonial-card p { margin: 0; color: #1F2A37; }

/* ==========================
   2) Header & Navigation
   ========================== */
header { position: sticky; top: 0; z-index: 900; background: #FFFFFF; border-bottom: 1px solid var(--line, #E6EEF4); box-shadow: 0 2px 12px rgba(16,24,40,0.04); }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16, 16px); padding: 12px 20px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; /* hidden on mobile */ }
.main-nav a { color: var(--ink, #253443); padding: 10px 12px; border-radius: 6px; transition: background-color 200ms ease, color 200ms ease; }
.main-nav a:hover { background: var(--accent, #F5F7FA); color: var(--primary, #153E66); text-decoration: none; }

/* Call-to-action button in header */
header .button.primary { display: none; }

/* Mobile menu toggle */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line, #E6EEF4); border-radius: 8px; background: #FFFFFF; color: var(--primary, #153E66); font-size: 22px; transition: background-color 200ms ease, transform 150ms ease; }
.mobile-menu-toggle:hover { background: var(--accent, #F5F7FA); }
.mobile-menu-toggle:active { transform: scale(0.98); }

/* Mobile Menu Overlay */
.mobile-menu { position: fixed; inset: 0; background: #FFFFFF; display: flex; flex-direction: column; gap: var(--space-20, 20px); padding: 20px; transform: translateX(100%); transition: transform 320ms ease; z-index: 1100; box-shadow: -6px 0 24px rgba(16,24,40,0.12); }
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 42px; height: 42px; border: 1px solid var(--line, #E6EEF4); border-radius: 8px; background: #FFFFFF; color: var(--ink, #253443); font-size: 22px; }
.mobile-nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 12px; border-radius: 8px; color: var(--ink, #253443); border: 1px solid transparent; }
.mobile-nav a:hover { background: var(--accent, #F5F7FA); border-color: var(--line, #E6EEF4); text-decoration: none; }
.mobile-nav a[aria-current="page"] { background: #EFF4F8; color: var(--primary, #153E66); border-color: #DCE6EE; font-weight: 700; }

/* ==========================
   3) Buttons & Interactions
   ========================== */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line, #E6EEF4); background: #FFFFFF; color: var(--primary, #153E66); font-weight: 600; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 100ms ease; }
.button:hover { background: var(--accent, #F5F7FA); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--primary, #153E66); color: #FFFFFF; border-color: var(--primary, #153E66); box-shadow: 0 2px 10px rgba(21,62,102,0.20); }
.button.primary:hover { background: #11405E; box-shadow: 0 6px 16px rgba(21,62,102,0.25); }
.button.secondary { background: var(--secondary, #2D6B6F); color: #FFFFFF; border-color: var(--secondary, #2D6B6F); }
.button.secondary:hover { background: #24595D; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-12, 12px); }

/* ==========================
   4) Content Styling
   ========================== */
/* Ensure minimum spacing between content blocks */
.content-wrapper > * { margin-bottom: 0; }
.content-wrapper > * + * { margin-top: 0; }

/* Lists inside text-section */
.text-section ul, .text-section ol { margin: 0; padding-left: 18px; }

/* Icon rows in contact details */
.text-section img[alt^="Telefon"],
.text-section img[alt^="E-Mail"],
.text-section img[alt^="Adresse"],
.text-section img[alt^="Öffnungszeiten"],
section img[alt^="Telefon"],
section img[alt^="E-Mail"],
section img[alt^="Adresse"],
section img[alt^="Öffnungszeiten"],
section img[alt^="Uhr"],
section img[alt^="Clock"],
section img[alt^="icon"] { display: inline-block; vertical-align: middle; margin-right: 8px; height: 18px; width: auto; }

/* Ordered steps formatting */
ol { counter-reset: item; }

/* ==========================
   5) Footer
   ========================== */
footer { background: #FAFCFF; border-top: 1px solid var(--line, #E6EEF4); }
footer .content-wrapper { display: flex; flex-wrap: wrap; gap: var(--space-20, 20px); padding: var(--space-32, 32px) 0; }
footer nav, footer .text-section { flex: 1 1 240px; }
footer nav a { display: inline-flex; color: var(--ink, #253443); padding: 6px 0; }
footer nav a:hover { color: var(--primary, #153E66); text-decoration: none; }
footer nav h3 { font-size: 16px; margin-bottom: var(--space-12, 12px); color: var(--primary, #153E66); }
footer .text-section { background: transparent; border: none; box-shadow: none; padding: 0; }

/* ==========================
   6) Utility & Helper Classes
   ========================== */
.hide { display: none !important; }
.muted { color: var(--muted, #5C6B7A); }
.center { text-align: center; }
.max-w-narrow { max-width: 720px; }

/* ==========================
   7) Cookie Banner & Modal
   ========================== */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #FFFFFF; border-top: 1px solid var(--line, #E6EEF4); box-shadow: 0 -6px 24px rgba(16,24,40,0.10); display: flex; flex-direction: column; gap: var(--space-16, 16px); padding: var(--space-20, 20px); }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: var(--space-12, 12px); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12, 12px); }
.cookie-btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line, #E6EEF4); background: #FFFFFF; color: var(--primary, #153E66); font-weight: 600; }
.cookie-btn.primary { background: var(--primary, #153E66); color: #FFFFFF; border-color: var(--primary, #153E66); }
.cookie-btn.reject { background: #F0F4F8; color: #1F2A37; border-color: #DCE6EE; }
.cookie-btn.settings { background: #FFFFFF; color: var(--secondary, #2D6B6F); border-color: #CFE3E4; }

/* Hidden by default; add .open to show if needed */
.cookie-banner.is-hidden { display: none; }

/* Cookie Modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(18, 28, 38, 0.35); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1200; }
.cookie-modal.open { display: flex; }
.cookie-modal-content { display: flex; flex-direction: column; gap: var(--space-20, 20px); background: #FFFFFF; width: 100%; max-width: 720px; border-radius: var(--radius-lg, 16px); border: 1px solid var(--line, #E6EEF4); box-shadow: 0 20px 40px rgba(16,24,40,0.18); padding: var(--space-24, 24px); }
.cookie-options { display: flex; flex-direction: column; gap: var(--space-12, 12px); }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12, 12px); padding: 10px 0; border-bottom: 1px dashed #E7EDF3; }
.cookie-row:last-child { border-bottom: none; }
.switch { position: relative; display: inline-flex; width: 46px; height: 26px; border-radius: 26px; background: #D6DFE7; transition: background-color 180ms ease; border: 1px solid #C9D5DF; }
.switch::after { content: ""; width: 22px; height: 22px; background: #FFFFFF; border-radius: 50%; margin: 1px; transition: transform 180ms ease; box-shadow: 0 1px 3px rgba(16,24,40,0.25); }
.switch.on { background: #2D6B6F; }
.switch.on::after { transform: translateX(20px); }

/* ==========================
   8) Accessibility States
   ========================== */
a:focus, button:focus, .button:focus, .mobile-menu-toggle:focus, .mobile-menu-close:focus { outline: 2px solid #2D6B6F; outline-offset: 2px; }

/* ==========================
   9) Responsive (Mobile-first)
   ========================== */
@media (min-width: 576px) {
  h1 { font-size: 36px; }
}

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .hero .content-wrapper { padding: var(--space-48, 48px) var(--space-20, 20px); }
  .text-image-section { flex-direction: row; }
  .content-wrapper { flex-direction: row; }
  /* Make text sections flow in columns via flex-wrap */
  .content-wrapper > .text-section { flex: 1 1 300px; }
}

@media (min-width: 992px) {
  header .button.primary { display: inline-flex; }
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; align-items: center; gap: var(--space-8, 8px); }
  .hero { border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); }
  section { padding: var(--space-48, 48px) 0; }
  .actions { gap: var(--space-16, 16px); }
  footer .content-wrapper { gap: var(--space-30, 30px); }
}

@media (min-width: 1200px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
}

/* ==========================
   10) Scandinavian Clean Visuals
   ========================== */
/* Subtle separators for long text pages */
section:nth-of-type(odd) { background: transparent; }
section:nth-of-type(even) { background: #FBFDFF; }

/* Light dividers inside content blocks */
.content-wrapper > p { max-width: 70ch; }

/* ==========================
   11) Mandatory Flex Spacing Rules
   ========================== */
/* Ensure gaps and margins never collapse; prevent overlap */
.content-wrapper, .card-container, .content-grid, .text-image-section, .testimonial-card, .feature-item, .actions, header .container, footer .content-wrapper { gap: 20px; }
/* Minimum spacing between cards/sections */
.card, .text-section, .testimonial-card { margin-bottom: 20px; }

/* ==========================
   12) Nav current states & breadcrumbs (if any)
   ========================== */
.main-nav a[aria-current="page"] { color: var(--primary, #153E66); font-weight: 700; }

/* ==========================
   13) Tables & Misc (if appear later)
   ========================== */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--line, #E6EEF4); border-radius: var(--radius, 10px); overflow: hidden; display: block; }
thead, tbody, tr { display: block; }
tr { display: flex; flex-wrap: nowrap; border-bottom: 1px solid var(--line, #E6EEF4); }
th, td { padding: 12px; flex: 1 1 150px; border-right: 1px solid var(--line, #E6EEF4); }
th:last-child, td:last-child { border-right: none; }

/* ==========================
   14) Forms (if added later)
   ========================== */
input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line, #E6EEF4); background: #FFFFFF; color: var(--ink, #253443); }
input:focus, select:focus, textarea:focus { border-color: var(--secondary, #2D6B6F); outline: 2px solid rgba(45,107,111,0.25); }

/* ==========================
   15) Micro-interactions
   ========================== */
.button, .card, .text-section, .mobile-menu, .mobile-menu-toggle { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }

/* ==========================
   16) Print adjustments (optional)
   ========================== */
@media print { header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; } section { padding: 16px 0; } a { text-decoration: underline; } }