/* =============================
   Glint Rock Immobilien - style.css
   Design: modern_bold (Bold, high-contrast, geometric)
   Layout: FLEXBOX ONLY (no grid/columns)
   ============================= */

/* ---------- CSS RESET & BASE ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #1F2A44; background-color: #FFFFFF; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1F2A44; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
button { font-family: inherit; }
input, select, textarea, button { font-size: 16px; }
:focus-visible { outline: 3px solid #4F6D7A; outline-offset: 2px; }

/* ---------- CSS VARIABLES (with fallbacks) ---------- */
:root {
  --color-primary: #1F2A44; /* dark navy */
  --color-secondary: #4F6D7A; /* blue-gray */
  --color-accent: #F4F1EA; /* soft stone */
  --color-white: #FFFFFF;
  --color-ink: #1F2A44;
  --shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.12);
  --radius-1: 8px;
  --radius-2: 14px;
  --spacing-1: 8px;
  --spacing-2: 12px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;
  --spacing-7: 60px;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; margin: 0 0 var(--spacing-3); line-height: 1.2; letter-spacing: 0.2px; }
h1 { font-size: 40px; }
h2 { font-size: 28px; text-transform: uppercase; letter-spacing: 1px; }
h3 { font-size: 20px; letter-spacing: 0.5px; }
@media (min-width: 768px) { h1 { font-size: 48px; } h2 { font-size: 32px; } h3 { font-size: 24px; } }
p { margin: 0 0 var(--spacing-3); font-size: 16px; }
.subheadline { font-size: 18px; color: var(--color-accent); opacity: 0.95; }
.hero .subheadline { color: #2f313a; opacity: 0.95; }
strong { font-weight: 700; }

/* ---------- LAYOUT UTILS (FLEXBOX ONLY) ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-4); display: flex; flex-direction: column; }
.content-wrapper { display: flex; flex-direction: column; gap: var(--spacing-4); align-items: flex-start; }
.section, section { margin-bottom: var(--spacing-7); padding: var(--spacing-6) var(--spacing-3); display: flex; }
section > .container { padding-top: 0; padding-bottom: 0; }
.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; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }

/* Ensure minimum spacing between all generic content blocks */
.content-wrapper > * + * { margin-top: 0; }

/* ---------- HEADER ---------- */
header { position: relative; background: var(--color-white); border-bottom: 4px solid var(--color-primary); }
header .container { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.logo { display: flex; align-items: center; }
.logo img { height: 40px; }

.main-nav { display: none; gap: var(--spacing-4); align-items: center; flex-wrap: wrap; }
.main-nav a { font-weight: 700; letter-spacing: 0.5px; padding: 8px 10px; border-bottom: 2px solid transparent; }
.main-nav a[aria-current="page"], .main-nav a:hover { border-color: var(--color-primary); }

.header-cta { display: none; gap: var(--spacing-3); }

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--color-primary); border-radius: 8px; background: var(--color-white); color: var(--color-primary); font-size: 22px; cursor: pointer; transition: transform 0.2s ease; }
.mobile-menu-toggle:hover { transform: translateY(-2px); }

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

/* ---------- MOBILE MENU (overlay) ---------- */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--color-primary); color: var(--color-white); display: flex; flex-direction: column; padding: var(--spacing-5); transform: translateX(100%); transition: transform 0.35s ease; z-index: 1000; pointer-events: none; }
.mobile-menu.open, .mobile-menu.active, .mobile-menu[aria-hidden="false"] { transform: translateX(0); pointer-events: auto; }
.mobile-menu-close { align-self: flex-end; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-white); color: var(--color-primary); border: none; border-radius: 8px; font-size: 22px; cursor: pointer; margin-bottom: var(--spacing-4); }
.mobile-nav { display: flex; flex-direction: column; gap: var(--spacing-3); }
.mobile-nav a { color: var(--color-white); font-size: 20px; font-weight: 700; padding: 10px 12px; border-left: 6px solid transparent; }
.mobile-nav a:hover { background: rgba(255,255,255,0.08); border-left-color: var(--color-accent); text-decoration: none; }

/* ---------- HERO ---------- */
.hero { background: var(--color-primary); color: var(--color-white); position: relative; overflow: hidden; }
.hero .content-wrapper { align-items: flex-start; gap: var(--spacing-4); }
.hero h1 { color: #2f313a }

/* Geometric accent bars (decorative) */
.hero::before, .hero::after { content: ""; position: absolute; top: -40px; right: -60px; width: 180px; height: 180px; background: var(--color-secondary); transform: rotate(45deg); opacity: 0.12; z-index: 0; }
.hero::after { top: auto; bottom: -60px; left: -80px; width: 240px; height: 240px; background: var(--color-accent); opacity: 0.35; }
.hero .container, .hero .content-wrapper, .hero * { position: relative; z-index: 1; }

/* ---------- BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; border: 2px solid transparent; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; cursor: pointer; }
.btn.primary { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.btn.primary:hover { transform: translateY(-2px); background: #EAE5DA; border-color: #EAE5DA; text-decoration: none; }
.btn.secondary { background: var(--color-white); color: var(--color-primary); border-color: var(--color-primary); }
.btn.secondary:hover { transform: translateY(-2px); background: var(--color-primary); color: var(--color-white); text-decoration: none; }

/* CTA groups */
.cta-group, .cta-buttons, .service-cta, .process-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: center; }

/* ---------- SEARCH BARS & FILTERS ---------- */
.search-bar, .search-filters { background: var(--color-white); border: 3px solid var(--color-primary); border-radius: var(--radius-2); padding: var(--spacing-4); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: var(--spacing-3); }
.filters-row { display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: flex-end; }
.filters-row label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--color-ink); min-width: 160px; flex: 1 1 160px; }
.filters-row input, .filters-row select { padding: 12px 12px; border: 2px solid var(--color-primary); border-radius: 8px; background: var(--color-white); color: var(--color-ink); }
.filters-row input::placeholder { color: #7A879B; }
.quick-links, .quick-filters { color: var(--color-ink); }
.quick-filters a, .quick-links a { font-weight: 700; }

/* ---------- LISTS & CARDS ---------- */
.text-section { background: var(--color-accent); border: 2px solid var(--color-primary); border-radius: var(--radius-1); padding: var(--spacing-4); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--spacing-2); }
.feature-grid, .service-cards, .faq-items, .team-list, .property-list, .testimonial-list { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.feature-grid .text-section, .service-cards .text-section, .faq-items .text-section, .team-list .text-section, .property-list .text-section { flex: 1 1 280px; }

.usp-list, .feature-list, .benefits, .value-list, .key-points, .channels { display: flex; flex-direction: column; gap: 10px; padding-left: 0; margin: 0 0 var(--spacing-3); }
.usp-list li, .feature-list li, .benefits li, .value-list li, .key-points li, .channels li { list-style: none; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-weight: 700; }
.usp-list li::before, .feature-list li::before, .benefits li::before, .value-list li::before, .key-points li::before, .channels li::before { content: ""; width: 12px; height: 12px; background: var(--color-primary); border-radius: 2px; margin-top: 4px; }

/* Stats */
.stat-items { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; }
.stat-items li { list-style: none; background: var(--color-white); border: 3px solid var(--color-primary); border-radius: 12px; padding: 14px 16px; font-weight: 800; }

/* Accreditations */
.accreditations { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.accreditations img { width: 28px; height: 28px; }

/* Trust badges */
.trust-badges ul { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0; }
.trust-badges li { list-style: none; display: flex; align-items: center; gap: 10px; background: #d3c7ad; border: 2px solid var(--color-primary); border-radius: 10px; padding: 10px 12px; font-weight: 700; }
.trust-badges img { width: 20px; height: 20px; }

/* Testimonials (light for readability) */
.testimonial-list { align-items: stretch; }
.testimonial-card { background: var(--color-white); border: 2px solid var(--color-primary); border-radius: 12px; box-shadow: var(--shadow-1); color: var(--color-ink); max-width: 700px; }
.testimonial-card p { margin: 0; }
.testimonial-card p + p { margin-top: 8px; }

/* Property list specifics */
.property-list .text-section h3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 8px; border-radius: 6px; background: var(--color-white); color: var(--color-primary); border: 2px solid var(--color-primary); }

.pagination { display: flex; flex-wrap: wrap; gap: 10px; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 12px; border: 2px solid var(--color-primary); border-radius: 8px; font-weight: 800; }
.pagination a:hover { background: var(--color-primary); color: var(--color-white); text-decoration: none; }

.empty-state { display: flex; padding: var(--spacing-3); background: var(--color-accent); border: 2px dashed var(--color-secondary); border-radius: 10px; }

/* Privacy notes */
.privacy-note { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.privacy-note img { width: 18px; height: 18px; }

/* Social links */
.social-links { display: flex; }
.social-links p { margin: 0; }

/* Breadcrumbs */
[aria-label="Breadcrumb"] ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; margin: 0 0 var(--spacing-3); }
[aria-label="Breadcrumb"] li { list-style: none; font-weight: 700; color: var(--color-accent); }
[aria-label="Breadcrumb"] li+li::before { content: ">"; color: var(--color-accent); margin: 0 6px; }
[aria-label="Breadcrumb"] a { color: var(--color-accent); text-decoration: underline; }

/* ---------- FOOTER ---------- */
footer { background: var(--color-primary); color: var(--color-white); }
footer a { color: var(--color-accent); font-weight: 700; }
footer .content-wrapper { flex-direction: column; gap: var(--spacing-4); }
.footer-primary, .footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.newsletter { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,0.06); border: 2px solid var(--color-accent); border-radius: 12px; padding: 16px; }
.contact-mini { display: flex; flex-direction: column; gap: 6px; opacity: 0.95; }

/* ---------- FORMS ---------- */
input, select, textarea { width: 100%; border: 2px solid var(--color-primary); border-radius: 8px; padding: 12px; background: var(--color-white); color: var(--color-ink); }
input:focus, select:focus, textarea:focus { border-color: var(--color-secondary); outline: none; box-shadow: 0 0 0 3px rgba(79,109,122,0.2); }
label { font-weight: 700; }

/* ---------- ICON BLOCKS ---------- */
.icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--color-accent); border: 3px solid var(--color-white); border-radius: 16px; box-shadow: var(--shadow-2); }

/* ---------- RESPONSIVE ---------- */
/* Mobile-first: sections already stacked. Adjust to rows on larger screens */
@media (min-width: 768px) {
  .content-wrapper { flex-direction: column; }
  .text-image-section { flex-direction: row; }
}
@media (min-width: 992px) {
  .content-wrapper { flex-direction: column; }
}

/* ---------- SPECIAL SECTION BACKGROUNDS ---------- */
/* Alternate background to create rhythm and bold contrast */
main section:nth-of-type(odd) { background: #FFFFFF; }
main section:nth-of-type(even) { background: var(--color-accent); }
/* Ensure hero stays primary */
main .hero { background: var(--color-primary); }

/* ---------- HEADER & FOOTER SPACING ---------- */
header section, footer section { padding: var(--spacing-4) 0; }

/* ---------- ACCESSIBILITY & MISC ---------- */
[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- COOKIE CONSENT ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-primary); color: var(--color-white); display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-4); box-shadow: 0 -8px 24px rgba(0,0,0,0.2); z-index: 900; transform: translateY(110%); transition: transform 0.35s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--spacing-3); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.cookie-banner .btn { border-width: 2px; }
.cookie-banner .btn.accept { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.cookie-banner .btn.reject { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); }
.cookie-banner .btn.settings { background: transparent; color: var(--color-white); border-color: var(--color-white); }

/* Cookie modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(31,42,68,0.94); display: flex; align-items: center; justify-content: center; padding: var(--spacing-4); transform: translateX(100%); transition: transform 0.35s ease; z-index: 950; }
.cookie-modal.open { transform: translateX(0); }
.cookie-modal .modal-inner { background: var(--color-white); color: var(--color-ink); border: 4px solid var(--color-primary); border-radius: 14px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-4); width: 100%; max-width: 680px; }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-header h3 { margin: 0; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--spacing-3); }
.cookie-options { display: flex; flex-direction: column; gap: 12px; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 2px solid var(--color-primary); border-radius: 10px; background: var(--color-accent); }
.cookie-option .meta { display: flex; flex-direction: column; gap: 2px; }

/* Toggle switch */
.switch { position: relative; width: 54px; height: 30px; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 100%; height: 100%; background: #cbd5e1; border-radius: 999px; border: 2px solid var(--color-primary); transition: background 0.2s ease; }
.switch .thumb { position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-primary); transition: transform 0.2s ease; }
.switch input:checked + .track { background: var(--color-secondary); }
.switch input:checked + .track + .thumb { transform: translateX(24px); }

.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); justify-content: flex-end; }

/* ---------- MISC COMPONENTS ---------- */
.badge + .badge { margin-left: 6px; }
.quick-links, .quick-filters { font-size: 14px; }
.quick-links a:hover, .quick-filters a:hover { text-decoration: none; border-bottom: 2px solid var(--color-primary); }

/* ---------- TEXT-IMAGE & MEDIA ---------- */
.text-image-section > * { flex: 1 1 280px; }

/* ---------- MAKE CARDS DISTINCTIVE ---------- */
.text-section h3 { position: relative; padding-top: 6px; }
.text-section h3::before { content: ""; display: inline-block; width: 32px; height: 6px; background: var(--color-primary); border-radius: 3px; margin-right: 10px; vertical-align: middle; }

/* ---------- ALIGNMENT & GAPS ENFORCEMENT ---------- */
/* Ensure at least 20px space between cards/sections */
.content-wrapper > * { margin-bottom: 20px; }
.content-wrapper { gap: 24px; }

/* ---------- TABLE-LIKE CONTENT (no grid) ---------- */
/* Using flex-wrap and basis to simulate columns */
.service-cards .text-section, .feature-grid .text-section, .faq-items .text-section, .team-list .text-section { min-height: 100%; }

/* ---------- CONTACT DETAILS INLINE ICONS ---------- */
main img[alt^="Adresse"], main img[alt^="Telefon"], main img[alt^="E-Mail"], main img[alt^="Öffnungszeiten"], main img[alt^="Karte"] { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 8px; }

/* ---------- PRINT ---------- */
@media print {
  .mobile-menu-toggle, .mobile-menu, .btn, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
  header, footer { border: none; }
}

/* ---------- HIGH CONTRAST IN HERO BUTTONS ---------- */
.hero .btn.secondary { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.hero .btn.secondary:hover { background: var(--color-white); color: var(--color-primary); }

/* ---------- SECTION HEADERS with geometric underline ---------- */
.content-wrapper > h2 { position: relative; padding-bottom: 8px; }
.content-wrapper > h2::after { content: ""; display: block; width: 72px; height: 6px; background: var(--color-primary); border-radius: 3px; margin-top: 10px; }

/* ---------- ACCESSIBLE COLORING FOR TEXT ON ACCENT BACKGROUND ---------- */
section { color: var(--color-ink); }

/* ---------- Z-INDEX MANAGEMENT ---------- */
header { z-index: 10; }
.cookie-banner { z-index: 900; }
.cookie-modal { z-index: 950; }
.mobile-menu { z-index: 1000; }

/* ---------- OPTIONAL GENERIC CLASSES FROM REQUIREMENTS ---------- */
/* Already defined above but reiterated to satisfy exact requirement naming */
.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; }

/* ---------- DESKTOP REFINEMENTS ---------- */
@media (min-width: 992px) {
  .content-wrapper { gap: 28px; }
  .hero .content-wrapper { flex-direction: column; }
}