/* Über uns – seitenspezifische Komponenten:
   Timeline, Werte-Karten, Team, Social-Impact, Zitat-Sektion. */

/* Timeline */
.timeline{ display: flex; flex-direction: column; gap: 0; max-width: 760px; margin: 0 auto; }
.timeline-item{ display: flex; gap: 28px; padding-bottom: 44px; position: relative; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-marker{
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-white); border: 2px solid var(--color-orange); color: var(--color-orange);
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.timeline-item:not(:last-child)::before{
  content: ""; position: absolute; left: 23px; top: 48px; bottom: 0;
  width: 2px; background: var(--color-grey-border);
}
.timeline-content h3{ font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timeline-content p{ font-size: 15px; color: var(--color-anthracite-soft); margin-bottom: 0; }
.timeline-highlight{
  display: inline-block; background: rgba(35, 124, 53, 0.1); color: var(--color-green-dark);
  font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
}

/* Werte-Karten */
.values-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card{
  text-align: center; padding: 36px 22px; background: var(--color-white);
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.value-card .icon-circle{ margin: 0 auto 18px auto; width: 56px; height: 56px; }
.value-card h3{ font-size: 17px; margin-bottom: 8px; }
.value-card p{ font-size: 14px; color: var(--color-anthracite-soft); margin-bottom: 0; }

/* Team */
.team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: stretch; }
.team-card{
  display: flex; flex-direction: column; text-align: center;
  background: var(--color-white); border-radius: var(--radius-md);
  padding: 22px 22px 26px; box-shadow: var(--shadow-soft); height: 100%;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.team-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.team-photo{
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 18px;
}
.team-photo img{ width: 100%; height: 100%; object-fit: cover; }
.team-name{ font-family: var(--font-head); font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.team-role{ font-size: 13.5px; color: var(--color-orange); font-weight: 600; }
.team-desc{ font-size: 14px; color: var(--color-anthracite-soft); margin-top: 8px; margin-bottom: 0; }

/* Social Impact */
.impact-section{ background: linear-gradient(135deg, #f1e9df 0%, #e9dcc9 100%); }
.impact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.impact-visual{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-strong); }
.impact-stats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.impact-stat{ background: rgba(255,255,255,0.6); border-radius: var(--radius-sm); padding: 18px 20px; }
.impact-stat .stat-number{ font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--color-green-dark); display: block; }
.impact-stat .stat-label{ font-size: 13px; color: var(--color-anthracite-soft); }

/* Zitat-Sektion */
.quote-section{ background: var(--color-cream); padding: 80px 0; }
.quote-block{ max-width: 760px; margin: 0 auto; text-align: center; position: relative; }
.quote-mark{ font-family: var(--font-head); font-size: 64px; color: var(--color-orange); opacity: 0.25; line-height: 1; margin-bottom: 6px; }
.quote-text{ font-family: var(--font-head); font-size: 26px; font-weight: 500; color: var(--color-anthracite); line-height: 1.5; margin-bottom: 22px; }
.quote-author{ font-size: 14px; color: var(--color-grey-text); font-weight: 600; }

@media (max-width: 980px){
  .values-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .impact-grid{ grid-template-columns: 1fr; gap: 36px; }
  .impact-visual{ order: -1; }
}
@media (max-width: 600px){
  .values-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr; }
  .impact-stats{ grid-template-columns: 1fr; }
  .timeline-item{ gap: 18px; }
  .quote-text{ font-size: 21px; }
}