/* =============================
   Rentenbrücke International
   Professional Corporate Style (Flexbox-only)
   ============================= */

/* --------- CSS Reset & Base Normalize --------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Arial, sans-serif; line-height: 1.6; color: #1A2634; background-color: #FFFFFF; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: #1F3B5B; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid #2E7D86; outline-offset: 2px; }

/* --------- Design Tokens --------- */
:root {
  --color-primary: #1F3B5B;
  --color-primary-700: #173049;
  --color-secondary: #2E7D86;
  --color-secondary-700: #25626A;
  --color-accent: #F4F6FA;
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-muted: #6B7280;
  --color-border: #E2E8F0;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 16px rgba(16, 24, 40, 0.08);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* --------- Typography --------- */
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--color-primary); line-height: 1.25; margin: 0; }
h1 { font-size: 32px; }
h2 { font-size: 24px; margin-top: 8px; }
h3 { font-size: 20px; }
p { margin: 0; color: #1A2634; }
small { color: var(--color-muted); }
strong { font-weight: 700; color: #0F1726; }

/* Responsive type scale */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
}
@media (min-width: 1080px) {
  h1 { font-size: 48px; }
}

/* --------- Layout Containers (Flex-only) --------- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }
.content-wrapper { display: flex; flex-direction: column; gap: 16px; }

/* Global section spacing (mobile-first) */
section { padding: 40px 0; }
@media (min-width: 768px) { section { padding: 60px 0; } }

/* Mandatory spacing classes */
.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; gap: 12px; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, transform .25s ease; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.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; flex-direction: column; padding: 12px 0; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: #FFFFFF; color: #0F1726; border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); flex-direction: column; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

@media (min-width: 768px) {
  .text-image-section { flex-direction: row; align-items: center; }
  .testimonial-card { flex-direction: row; }
}

/* --------- Header & Navigation --------- */
.site-header { position: sticky; top: 0; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid var(--color-border); z-index: 900; box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03); }
.site-header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 42px; width: auto; }

/* Desktop main navigation */
.main-nav { display: none; align-items: center; gap: 14px; }
.main-nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: #1A2634; transition: background-color .2s ease, color .2s ease; }
.main-nav a:hover { background: var(--color-accent); color: var(--color-primary); text-decoration: none; }
.main-nav .button { margin-left: 6px; }

/* Mobile menu toggle (visible on mobile) */
.mobile-menu-toggle { position: fixed; top: 14px; right: 16px; z-index: 1001; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: #FFFFFF; box-shadow: var(--shadow-sm); transition: background-color .2s ease, transform .2s ease; }
.mobile-menu-toggle:hover { background: var(--color-primary-700); transform: scale(1.03); }

/* Mobile off-canvas menu */
.mobile-menu { position: fixed; inset: 0; display: flex; align-items: stretch; justify-content: flex-end; background: rgba(0, 0, 0, 0.4); transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease; z-index: 1000; }
.mobile-menu.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mobile-nav { background: #FFFFFF; width: 85%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-left: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.mobile-menu-close { align-self: flex-end; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); color: #0F1726; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.mobile-nav a { padding: 14px 12px; border-radius: var(--radius-sm); color: #0F1726; border: 1px solid transparent; }
.mobile-nav a:hover { background: var(--color-accent); border-color: var(--color-border); text-decoration: none; }

/* Show desktop nav on larger screens */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
}

/* --------- Hero --------- */
.hero { background: var(--color-accent); border-bottom: 1px solid var(--color-border); }
.hero .content-wrapper { gap: 18px; }
.hero p { max-width: 70ch; }

/* Breadcrumbs & language switch */
nav[aria-label="Brotkrumen"], nav[aria-label="Sprachauswahl"] { font-size: 14px; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: 8px; }
nav[aria-label="Brotkrumen"] a, nav[aria-label="Sprachauswahl"] a { color: var(--color-primary); }

/* --------- Lists & Text Blocks --------- */
ul, ol { padding-left: 20px; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; }
dt { font-weight: 700; margin-top: 10px; }
dd { margin: 0 0 8px 0; color: #1A2634; }

/* --------- Buttons --------- */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight: 600; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.button:hover { background: rgba(31, 59, 91, 0.08); text-decoration: none; box-shadow: var(--shadow-sm); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }
.button.primary:hover { background: var(--color-primary-700); color: #fff; }

/* --------- Testimonials (contrast ensured) --------- */
/* Already defined in .testimonial-card. Ensure text remains dark on light bg */
.testimonial-card p { margin: 0; }

/* --------- Footer --------- */
.site-footer { background: #0F2236; color: #E9EEF6; padding: 40px 0; margin-top: 40px; }
.site-footer .content-wrapper { gap: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.footer-nav a { color: #E9EEF6; opacity: 0.9; padding: 6px 8px; border-radius: var(--radius-sm); }
.footer-nav a:hover { background: rgba(255,255,255,0.06); opacity: 1; text-decoration: none; }
.site-footer address { font-style: normal; color: #C7D2E1; }

/* --------- Utility Backgrounds --------- */
.accent-bg { background: var(--color-accent); }
.surface { background: var(--color-surface); }
.muted { color: var(--color-muted); }
.hidden { display: none !important; }

/* --------- Content Width Helpers for Flex Rows --------- */
/* When used inside .content-grid or .card-container */
.col { display: flex; flex-direction: column; gap: 12px; flex: 1 1 260px; min-width: 240px; }

/* --------- Tables (if any appear) --------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid var(--color-border); padding: 10px 8px; }
th { color: var(--color-primary); font-weight: 700; }

/* --------- Quotes --------- */
blockquote { margin: 0; padding: 14px 18px; border-left: 4px solid var(--color-secondary); background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* --------- Forms (basic if added later) --------- */
input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #FFFFFF; transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(46, 125, 134, 0.2); outline: none; }
label { display: flex; margin-bottom: 6px; font-weight: 600; color: #0F1726; }

/* --------- Dividers between repeated sections (subtle) --------- */
.text-image-section + .text-image-section { border-top: 1px dashed var(--color-border); padding-top: 20px; }

/* --------- Accessibility helpers --------- */
::selection { background: rgba(46, 125, 134, 0.2); }

/* --------- Cookie Consent Banner --------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 16px rgba(16, 24, 40, 0.08); transform: translateY(100%); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner .inner { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; max-width: 1120px; margin: 0 auto; }
.cookie-banner .text { display: flex; flex-direction: column; gap: 8px; color: #0F1726; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .button { flex: 0 0 auto; }
.cookie-actions .accept { background: var(--color-secondary); color: #FFFFFF; border-color: var(--color-secondary); }
.cookie-actions .accept:hover { background: var(--color-secondary-700); }
.cookie-actions .reject { border-color: var(--color-primary); color: var(--color-primary); }
.cookie-actions .settings { border-color: #94A3B8; color: #0F1726; }

/* Cookie Preferences Modal */
.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1400; display: none; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal-overlay.open { display: flex; }
.cookie-modal { background: #FFFFFF; width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transform: translateY(10px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.cookie-modal-overlay.open .cookie-modal { transform: translateY(0); opacity: 1; }
.cookie-modal .header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-modal .content { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.cookie-category .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cookie-toggle { display: inline-flex; align-items: center; gap: 8px; }
.cookie-toggle input[type="checkbox"] { width: 18px; height: 18px; }
.cookie-modal .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* --------- Media Queries for Layout Enhancements --------- */
@media (min-width: 768px) {
  .cookie-banner .inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --------- Spacing utilities to avoid overlaps --------- */
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.row-16 { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------- Specific Page Nuances --------- */
/* Index page: language line and note */
.hero small { color: var(--color-muted); }

/* Ratgeber glossary spacing */
.glossar, dl { display: flex; flex-direction: column; gap: 6px; }

/* Footer spacing fix for mobile */
.site-footer .footer-nav a { line-height: 1; }

/* --------- Ensuring minimum gaps between content blocks --------- */
.content-wrapper > * + * { margin-top: 8px; }
.container > * + * { margin-top: 8px; }

/* --------- Ensure lists inside testimonial do not overflow --------- */
.testimonial-card ul, .testimonial-card ol { margin: 0; }

/* --------- Breadcrumb divider appearance --------- */
nav[aria-label="Brotkrumen"] { opacity: 0.9; }

/* --------- Address links in footer --------- */
.site-footer a { color: #E9EEF6; }
.site-footer a:hover { text-decoration: underline; }

/* --------- Prevent any accidental absolute layouts for content cards --------- */
.card[style*="position:absolute"], .testimonial-card[style*="position:absolute"], .text-image-section[style*="position:absolute"] { position: relative !important; }

/* --------- Print basics --------- */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  .site-header { position: static; box-shadow: none; }
  a { text-decoration: underline; }
}