/* css/sections.css — Page Section Layouts */
/* ── Broken-image alt-text readability ─────────────────────────────────── */
/* Dark sections (navy) → light alt text */
.werte-image img, .blog-teaser-image img {
  color: var(--color-text-light);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
}
/* Light sections (warm-light) → dark alt text */
.werte-section[style*="warm-light"] .werte-image img,
section[style*="warm-light"] img {
  color: var(--color-navy);
}
/* ──────────────────────────────────────────────────────────────────────── */
.section { padding: var(--spacing-section) 0; }
.section-dark { background: var(--color-navy); }
.section-darker { background: var(--color-navy-dark); }
.section-light { background: var(--color-warm-light); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: var(--max-width-text); margin: 0 auto; padding: 0 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* Quote sections */
.quote-section {
  background: #1a4f7d; /* lighter blue — same shade as icon nav */
  padding: 7.5rem 2rem;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.quote-section .container { position: relative; z-index: 2; }
.quote-letter {
  position: absolute;
  width: 28rem;
  height: auto;
  opacity: 0.28;
  top: 50%;
  left: calc(50% - 14rem);
  transform: translateY(-50%) translateX(-600px); /* JS drives translateX for scroll motion */
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}
.quote-text {
  font-family: var(--font-body);
  font-size: 1.95rem;
  font-weight: 200;
  color: #ffffff;
  line-height: 1.5;
  border: none;
  margin: 0;
  margin-left: 45%;
  padding: 0 3rem 0 0;
  quotes: none;
  max-width: 52%;
}
.quote-attribution {
  margin-left: 45%;
  padding: 0.6rem 3rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(236,218,171,0.9); /* gold, more prominent */
  letter-spacing: 0.06em;
  max-width: 52%;
}


/* Blog teaser — navy background with CSS variable for alternating shades */
.blog-teaser {
  --blog-bg: var(--color-navy);
  background: var(--blog-bg);
  padding: 3rem 0;
  overflow: hidden;
}
.blog-teaser-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
  min-height: 360px;
}
.blog-teaser-image {
  /* no overflow:hidden — image container can grow beyond its grid cell */
  position: relative;
  z-index: 1;
  transform-origin: left center;
}
.blog-teaser-image img,
.blog-img-zoom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transition: transform 0.08s linear;
}
.blog-teaser-content {
  position: relative;
  z-index: 2;
  margin-left: -18%;
  padding: 3rem 2rem 3rem 20%;
  background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0) 0%, rgba(10,22,40,0.82) 15%, var(--blog-bg) 30%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.blog-headline {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.3;
  margin: 0;
}
.blog-body {
  color: var(--color-text-light);
  line-height: 1.75;
  font-size: 0.9rem;
  margin: 0;
}
.blog-label { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 500; letter-spacing: 0.02em; color: var(--color-gold); }
/* Werte section — mirrors blog layout: text LEFT, image RIGHT, text overlaps image */
.werte-section {
  --werte-bg: var(--color-navy);
  background: var(--werte-bg);
  overflow: hidden;
  width: 100%;
  padding: 5rem 0;
}
.werte-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 48%;
  align-items: center;
  min-height: 360px;
}
.werte-image {
  position: relative;
  z-index: 1;
  transform-origin: right center; /* grows inward toward text on scroll */
}
.werte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.werte-content {
  position: relative;
  z-index: 2;
  margin-right: -18%; /* overlaps left edge of image */
  padding: 3rem 20% 3rem 2rem;
  /* gradient: solid navy on left → transparent on right where image shows */
  background: linear-gradient(to right, var(--werte-bg, var(--color-navy)) 65%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.werte-content .section-label {
  /* inherits small caps style from typography.css — no override needed */
}
/* Qualität section — mirrors werte: text LEFT, image RIGHT, overlap, zoom */
.qualitaet-section {
  background: var(--color-navy);
  overflow: hidden;
  width: 100%;
  padding: 5rem 0;
}
.qualitaet-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
  min-height: 360px;
}
.qualitaet-image {
  position: relative;
  z-index: 1;
  transform-origin: left center; /* grows inward toward text on scroll */
  overflow: hidden;
}
.qualitaet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qualitaet-content {
  position: relative;
  z-index: 2;
  margin-left: -18%; /* overlaps right edge of image */
  padding: 3rem 2rem 3rem 20%;
  /* gradient: transparent on left (image shows) → solid navy on right */
  background: linear-gradient(to left, var(--color-navy) 62%, rgba(0,46,84,0.92) 78%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.qualitaet-content .section-label {
  /* inherits small caps style from typography.css — no override needed */
}
/* Services grid — 4-column white-card layout on lighter blue */
.services-grid { background: #1a4f7d; padding: 4rem 0; }
.svc-heading {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
}
.svc-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.svc-card {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 1.75rem 1rem 1.25rem;
  gap: 0.6rem;
  overflow: hidden;
  transition: background 180ms ease;
  cursor: pointer;
}
.svc-card:hover,
.svc-card:hover.expertise-card { background: var(--color-gold); }
.svc-icon { width: 120px; height: 120px; object-fit: contain; flex-shrink: 0; }
.svc-title { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-navy); margin: 0.25rem 0 0; }
.svc-desc { font-size: 0.8rem; color: var(--color-navy); line-height: 1.5; margin: 0; flex: 1; }
.svc-cta-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-navy);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
  border: none;
}
.svc-card:hover .svc-cta-btn { background: var(--color-navy); color: #fff; }
/* Image cells — stretch to card height, gold overlay on hover */
.svc-img-cell { overflow: hidden; position: relative; cursor: pointer; }
.svc-img-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(236,218,171,0.35);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.svc-img-cell:hover::after { opacity: 1; }
.svc-img-cell img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 300ms ease; }
.svc-img-cell:hover img { transform: scale(1.04); }
/* Image placeholder for missing images */
.img-placeholder { background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.75rem; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; gap: 2rem; } .grid-3 { grid-template-columns: 1fr 1fr; } .blog-teaser-grid { grid-template-columns: 1fr; } .blog-teaser-image { height: 250px; } .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .container { padding: 0 1rem; } .grid-3 { grid-template-columns: 1fr; } .cards-grid { grid-template-columns: 1fr; } .quote-letter { width: 18rem; left: calc(50% - 9rem); } }

/* ── Vorsorge: CSS Classical Pillar Section ── */
.saeulen-section { background: var(--color-navy); padding: 5rem 0; width: 100%; }
.saeulen-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; padding: 0 2rem; }
.saeulen-header h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--color-gold); margin: 0.5rem 0 0.25rem; line-height: 1.2; }
.saeulen-header .saeule-h2-sub { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; color: rgba(236,218,171,0.75); margin: 0 0 1rem; font-style: italic; }
.saeulen-header .saeule-intro { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.75; opacity: 0.85; }
.saeulen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1100px; margin: 0 auto; padding: 0 2rem; align-items: start; }
.saeule-card { display: flex; flex-direction: column; background: rgba(0,15,38,0.75); border-left: 3px solid var(--color-gold); border-right: 3px solid var(--color-gold); }
.saeule-capital { background: var(--color-gold); height: 16px; margin: 0 -3px; position: relative; }
.saeule-capital::after { content: ''; position: absolute; bottom: -7px; left: 10%; right: 10%; height: 7px; background: rgba(236,218,171,0.35); }
.saeule-base { background: var(--color-gold); height: 16px; margin: 0 -3px; position: relative; }
.saeule-base::before { content: ''; position: absolute; top: -7px; left: 10%; right: 10%; height: 7px; background: rgba(236,218,171,0.35); }
.saeule-body { padding: 2.5rem 2rem; flex: 1; }
.saeule-portrait { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--color-gold); margin-bottom: 1.5rem; display: block; }
.saeule-number { display: block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; color: var(--color-gold); margin-bottom: 0.6rem; }
.saeule-body h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: #fff; margin: 0 0 1.1rem; line-height: 1.4; }
.saeule-body p { color: var(--color-text-light); font-size: 0.9rem; line-height: 1.75; margin-bottom: 1.1rem; opacity: 0.88; }
.saeule-mehr-link { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--color-gold); letter-spacing: 0.06em; text-decoration: none; margin-bottom: 1.25rem; }
.saeule-mehr-link:hover { text-decoration: underline; }
.saeule-list { list-style: none; padding: 0; margin: 0; }
.saeule-list li { color: var(--color-text-light); font-size: 0.875rem; line-height: 1.6; padding: 0.5rem 0 0.5rem 1rem; border-left: 2px solid rgba(236,218,171,0.5); margin-bottom: 0.6rem; opacity: 0.9; }
.saeule-list li strong { color: var(--color-gold); }
/* ── Vorsorge: CTA Section ── */
.cta-section { background: var(--color-navy-dark); padding: 5rem 2rem; text-align: center; width: 100%; }
.cta-section h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--color-gold); max-width: 700px; margin: 0 auto 1.25rem; }
.cta-section .cta-body { color: var(--color-text-light); font-size: 1rem; line-height: 1.75; max-width: 600px; margin: 0 auto 2rem; opacity: 0.85; }
.cta-section .cta-sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 1rem; font-style: italic; }
/* Toggle button for expandable content */
.saeule-toggle { display:flex; align-items:center; gap:0.5rem; background:none; border:none; cursor:pointer; padding:0.4rem 0; color:var(--color-gold); font-family:var(--font-heading); font-size:0.8rem; font-weight:600; letter-spacing:0.06em; margin-bottom:0.75rem; }
.saeule-toggle:hover .toggle-label { text-decoration:underline; }
.toggle-chevron { transition:transform 0.25s ease; flex-shrink:0; }
.saeule-toggle[aria-expanded="true"] .toggle-chevron { transform:rotate(180deg); }
.saeule-list[hidden] { display:none; }
@media (max-width: 768px) { .saeulen-grid { grid-template-columns: 1fr; gap: 4rem; } .saeulen-header h2 { font-size: 1.6rem; } .cta-section h2 { font-size: 1.5rem; } }



/* Services grid bullet lists */
.svc-bullets { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.55; opacity: 0.88; text-align: left; align-self: stretch; }
.svc-bullets li { padding-left: 1.1em; position: relative; margin-bottom: 0.3rem; }
.svc-bullets li::before { content: '\2022'; position: absolute; left: 0; color: var(--color-navy); }