/* =========================================================
   RentenKompass International – style.css
   Design System: geometric_structured (geometric shapes, structured grids, angular fonts, precise layouts)
   Layout: Mobile-first, Flexbox-only (no CSS Grid/Columns)
   ========================================================= */

/* -------------------- CSS RESET & BASELINE -------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.2rem; }
button, input, select, textarea { font: inherit; }
:focus { outline: 2px solid #215E4F; outline-offset: 2px; }

/* -------------------- THEME TOKENS -------------------- */
:root {
  --c-primary: #0F3554;
  --c-secondary: #215E4F;
  --c-accent: #F5F7FA;
  --c-bg: #FFFFFF;
  --c-text: #0F2233;
  --c-muted: #4A5A67;
  --c-border: #D7DFE7;
  --c-shadow: rgba(15, 53, 84, 0.12);

  --ff-display: "Trebuchet MS", Tahoma, Geneva, sans-serif;
  --ff-body: Verdana, Geneva, Tahoma, sans-serif;

  --radius-2: 4px; /* angular but subtle */
  --radius-3: 6px;

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

  --shadow-1: 0 2px 10px var(--c-shadow);
  --shadow-2: 0 6px 24px var(--c-shadow);

  --trans-1: 180ms cubic-bezier(.2,.6,.2,1);
  --trans-2: 300ms cubic-bezier(.2,.6,.2,1);
}

/* -------------------- BASE TYPOGRAPHY -------------------- */
body {
  font-family: var(--ff-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3 { font-family: var(--ff-display); color: var(--c-primary); letter-spacing: 0.3px; }
h1 { font-size: 32px; line-height: 1.2; margin-bottom: var(--space-16); }
h2 { font-size: 24px; line-height: 1.25; margin-bottom: var(--space-16); }
h3 { font-size: 18px; line-height: 1.3; margin-bottom: var(--space-12); }

p { margin-bottom: var(--space-16); color: var(--c-text); }
.subheadline { color: var(--c-muted); font-size: 16px; margin-bottom: var(--space-24); max-width: 70ch; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-secondary); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--c-secondary); transform: rotate(45deg); display: inline-block; }

small { color: var(--c-muted); }
strong { color: var(--c-primary); }

/* -------------------- LAYOUT WRAPPERS -------------------- */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-20); display: flex; flex-direction: column; }
.content-wrapper { display: flex; flex-direction: column; gap: var(--space-20); }

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; }
.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; }

/* General section spacing */
section { margin-bottom: var(--space-60); padding: var(--space-40) 0; display: flex; }
section > .container { gap: var(--space-20); }

/* -------------------- HEADER & NAVIGATION -------------------- */
header { border-bottom: 1px solid var(--c-border); background: var(--c-bg); position: sticky; top: 0; z-index: 50; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; padding-top: var(--space-12); padding-bottom: var(--space-12); }
.logo { display: flex; align-items: center; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.main-nav a { padding: 8px 10px; border-bottom: 2px solid transparent; color: var(--c-primary); font-weight: 600; transition: border-color var(--trans-1), color var(--trans-1); }
.main-nav a:hover { border-color: var(--c-secondary); color: var(--c-secondary); }

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

.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 2px solid var(--c-primary); background: var(--c-bg); color: var(--c-primary); border-radius: var(--radius-2); cursor: pointer; transition: background var(--trans-1), color var(--trans-1), transform var(--trans-1); }
.mobile-menu-toggle:hover { background: var(--c-primary); color: #fff; transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: rgba(15,53,84,0.06); display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch; transform: translateX(100%); transition: transform var(--trans-2); z-index: 100; }
.mobile-menu.open { transform: translateX(0%); }
.mobile-menu .mobile-nav { background: #fff; border-left: 2px solid var(--c-primary); width: 86%; max-width: 360px; display: flex; flex-direction: column; gap: 0; padding: var(--space-20); box-shadow: var(--shadow-2); }
.mobile-menu-close { align-self: flex-end; margin: var(--space-20); width: 42px; height: 42px; border: 2px solid var(--c-primary); background: #fff; color: var(--c-primary); border-radius: var(--radius-2); cursor: pointer; transition: background var(--trans-1), color var(--trans-1); }
.mobile-menu-close:hover { background: var(--c-primary); color: #fff; }
.mobile-nav a { display: flex; align-items: center; padding: 14px 10px; border-bottom: 1px solid var(--c-border); color: var(--c-primary); font-weight: 700; letter-spacing: 0.4px; }
.mobile-nav a:hover { background: var(--c-accent); }

/* -------------------- HERO -------------------- */
.hero { background: var(--c-accent); position: relative; overflow: hidden; padding-top: var(--space-48); padding-bottom: var(--space-48); border-bottom: 2px solid var(--c-border); }
.hero .container { position: relative; }
.hero .content-wrapper { max-width: 980px; }
/* geometric corner accent */
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border: 3px solid var(--c-secondary); transform: rotate(45deg); border-radius: 2px; opacity: 0.25; pointer-events: none; }

.trust-badges { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.trust-badges img { width: 36px; height: 36px; filter: grayscale(10%); opacity: 0.9; }

/* -------------------- BUTTONS -------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-2); border: 2px solid transparent; font-weight: 800; letter-spacing: 0.4px; text-transform: none; box-shadow: var(--shadow-1); transition: transform var(--trans-1), box-shadow var(--trans-1), background var(--trans-1), color var(--trans-1), border-color var(--trans-1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn.primary:hover { background: #0b2a41; }
.btn.secondary { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.btn.secondary:hover { background: var(--c-accent); }
.btn.ghost { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
.btn.ghost:hover { background: var(--c-accent); border-color: var(--c-primary); }

/* -------------------- LISTS & GRIDS (FLEX) -------------------- */
.feature-grid, .service-list, .process-steps, .icon-bullets, .case-types-grid, .institutions-list, .deliverables-list, .checklist, .available-time-slots, .preparation-checklist, .documents-to-bring, .document-requirements, .benefit-list, .cookie-categories, .next-steps-list, .service-recommendations { 
  display: flex; flex-direction: column; gap: var(--space-16); margin: 0; padding-left: 0; list-style: none;
}
/* bullets as geometric squares */
.service-list li, .icon-bullets li, .deliverables-list li, .checklist li, .available-time-slots li, .preparation-checklist li, .documents-to-bring li, .document-requirements li, .benefit-list li, .cookie-categories li, .next-steps-list li, .service-recommendations li, .case-types-grid li, .institutions-list li {
  display: flex; align-items: flex-start; gap: 12px; position: relative; padding-left: 24px; color: var(--c-text);
}
.service-list li::before, .icon-bullets li::before, .deliverables-list li::before, .checklist li::before, .available-time-slots li::before, .preparation-checklist li::before, .documents-to-bring li::before, .document-requirements li::before, .benefit-list li::before, .cookie-categories li::before, .next-steps-list li::before, .service-recommendations li::before, .case-types-grid li::before, .institutions-list li::before {
  content: ""; width: 10px; height: 10px; border: 2px solid var(--c-primary); transform: rotate(45deg); position: absolute; left: 0; top: 6px; border-radius: 2px;
}

/* Multi-column-like behavior via flex-wrap (desktop) */
.feature-grid, .case-types-grid { flex-wrap: wrap; }
.feature-grid li, .case-types-grid li { flex: 1 1 260px; }

.process-steps { counter-reset: step; }
.process-steps li { padding-left: 44px; }
.process-steps li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--c-secondary); color: var(--c-secondary); font-weight: 800; position: absolute; left: 0; transform: translateY(1px); border-radius: 2px; }

.icon-bullets img { width: 20px; height: 20px; }

/* -------------------- CARDS & TESTIMONIALS -------------------- */
.testimonial-card { background: #FFFFFF; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius-2); box-shadow: var(--shadow-1); }
.testimonial-card blockquote { color: #111; font-style: normal; }
.testimonial-card cite { color: var(--c-muted); font-style: normal; }
/* ensure readable contrast on light background (dark text) */
.rating-summary { display: flex; align-items: center; gap: 10px; color: #111; background: var(--c-accent); border: 1px solid var(--c-border); padding: 10px 14px; border-radius: var(--radius-2); width: fit-content; }
.rating-summary img { width: 18px; height: 18px; }

/* Reusable card style */
.card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-20); }

/* -------------------- CONTENT UTILITIES -------------------- */
.section-intro, .impact-explanations, .coordination-paths, .dvka-coordination-notes, .download-links, .submission-guidelines, .status-updates-info, .learning-points, .deadline-alerts, .fee-models-overview, .risk-notes, .upload-guidelines, .authorization-notes, .quality-assurance-measures, .data-security-notes, .compliance-badges, .associations, .certifications, .map-embed, .messaging-disclaimer, .open-roles-teaser, .partnering-options, .scheduler-widget, .confirmation-notes, .expected-response-time, .support-contact, .retention, .consent-management, .how-to-manage-cookies, .effective-date, .country-scope-overview, .coordination-paths, .dvka-coordination-notes { 
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-12); background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-2); padding: var(--space-16); }

.certifications img, .associations img, .compliance-badges img, .data-security-notes img, .fee-models-overview img, .scheduler-widget img, .support-contact img, .map-embed img { width: 22px; height: 22px; }

/* -------------------- FAQ ACCORDION (static styling) -------------------- */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-12); border: 1px solid var(--c-border); border-radius: var(--radius-2); padding: var(--space-16); background: var(--c-accent); }
.faq-accordion h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.faq-accordion h3::after { content: ">"; font-weight: 900; color: var(--c-secondary); transform: rotate(90deg); }
.faq-accordion p { margin: 0 0 var(--space-8) 0; color: var(--c-text); }

/* -------------------- TABLES -------------------- */
.pricing-table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-border); border-radius: var(--radius-2); overflow: hidden; display: table; }
.pricing-table th, .pricing-table td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); text-align: left; }
.pricing-table th { background: var(--c-primary); color: #fff; font-family: var(--ff-display); font-weight: 800; letter-spacing: 0.4px; }
.pricing-table tr:nth-child(even) td { background: var(--c-accent); }

/* -------------------- CONTACT BLOCKS -------------------- */
.contact-options { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.contact-options > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-2); background: #fff; }

/* -------------------- FOOTER -------------------- */
footer { border-top: 2px solid var(--c-border); background: #fff; }
footer .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }
footer .content-wrapper { display: flex; flex-direction: column; gap: var(--space-16); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.footer-nav a { padding: 6px 8px; border-bottom: 2px solid transparent; color: var(--c-primary); font-weight: 700; }
.footer-nav a:hover { border-color: var(--c-secondary); }
.contact-info { display: flex; flex-wrap: wrap; gap: 6px; color: var(--c-muted); }
.social-links { display: flex; align-items: center; gap: var(--space-12); }
.social-links img { width: 22px; height: 22px; filter: grayscale(20%); opacity: 0.9; }
.newsletter-signup { display: flex; flex-direction: column; gap: var(--space-12); border: 1px solid var(--c-border); border-radius: var(--radius-2); padding: var(--space-16); background: var(--c-accent); }

/* -------------------- MOBILE MENU RESPONSIVE BEHAVIOR -------------------- */
@media (min-width: 769px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
  .cta-buttons { display: flex; }
  header .container { gap: var(--space-16); }
}

/* -------------------- RESPONSIVE LAYOUTS -------------------- */
@media (min-width: 480px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
}

@media (min-width: 768px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }

  .text-image-section { flex-direction: row; }
}

@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: flex-start; }
}

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

/* -------------------- LINKS & INTERACTIVITY -------------------- */
a:hover { color: var(--c-secondary); }
a:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

/* -------------------- ANGULAR DIVIDERS -------------------- */
hr { border: none; height: 2px; background: var(--c-border); margin: var(--space-24) 0; }

/* -------------------- COOKIE CONSENT BANNER -------------------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 3px solid var(--c-primary); box-shadow: 0 -6px 18px var(--c-shadow); z-index: 999; display: flex; }
.cookie-banner .container { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) var(--space-20); }
.cookie-banner .cookie-text { display: flex; flex: 1; flex-wrap: wrap; gap: var(--space-12); color: var(--c-text); }
.cookie-banner .cookie-actions { display: flex; align-items: center; gap: var(--space-12); }
.cookie-banner .btn { padding: 10px 14px; }
.cookie-banner .btn.reject { background: #fff; color: var(--c-primary); border: 2px solid var(--c-primary); }
.cookie-banner .btn.settings { background: var(--c-accent); color: var(--c-primary); border: 2px solid var(--c-border); }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; padding: var(--space-20); z-index: 1000; }
.cookie-modal.open { display: flex; }
.cookie-modal .modal-panel { background: #fff; width: 100%; max-width: 620px; border: 2px solid var(--c-primary); border-radius: var(--radius-2); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20); transform: translateY(16px); animation: modalIn var(--trans-2) forwards; }
@keyframes modalIn { to { transform: translateY(0); } }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-modal .pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); border: 1px solid var(--c-border); border-radius: var(--radius-2); padding: var(--space-12); }
.cookie-modal .pref-row .label { display: flex; flex-direction: column; gap: 2px; }
.cookie-modal .toggle { width: 46px; height: 26px; border: 2px solid var(--c-primary); border-radius: 20px; position: relative; background: #fff; cursor: pointer; }
.cookie-modal .toggle::after { content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 16px; height: 16px; background: var(--c-primary); border-radius: 50%; transition: left var(--trans-1), background var(--trans-1); }
.cookie-modal .toggle.on { background: var(--c-secondary); border-color: var(--c-secondary); }
.cookie-modal .toggle.on::after { left: 24px; background: #fff; }
.cookie-modal .modal-actions { display: flex; align-items: center; gap: var(--space-12); justify-content: flex-end; }

/* -------------------- ACCESSIBILITY HELPERS -------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* -------------------- PAGE-SPECIFIC MINOR TWEAKS -------------------- */
/* Index and common sections */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Tables text sizing */
.pricing-table td, .pricing-table th { font-size: 14px; }

/* Footer line wrapping */
footer .contact-info { font-size: 14px; }

/* Newsletter in footer */
.newsletter-signup p { margin: 0; color: var(--c-text); }

/* FAQ spacing */
.faq-accordion h3 + p { margin-top: -6px; }

/* Scheduler/widget cards */
.scheduler-widget, .confirmation-notes { background: var(--c-accent); }

/* Map placeholder */
.map-embed span { color: var(--c-muted); }

/* Service recommendations link styling */
.service-recommendations a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.service-recommendations a:hover { color: var(--c-secondary); }

/* -------------------- DESKTOP ENHANCEMENTS -------------------- */
@media (min-width: 992px) {
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .footer-nav, .contact-info, .social-links, .newsletter-signup { flex: 1 1 240px; }
}

/* -------------------- PRINT STYLES (basic) -------------------- */
@media print {
  header, .mobile-menu, .cookie-banner { display: none !important; }
  a { text-decoration: underline; }
}

/* -------------------- SAFETY: NO OVERLAPS -------------------- */
/* Ensuring all content blocks have spacing */
section > .container > .content-wrapper > * + * { margin-top: 0; }

/* -------------------- MISC UTILS -------------------- */
.align-center { display: flex; align-items: center; }
.justify-between { display: flex; justify-content: space-between; }
.gap-20 { gap: 20px; }

/* -------------------- END -------------------- */