/* ============================================================
   NG MARKETING — ueber-uns.css
============================================================ */

.about-hero { padding-block: 150px 30px; text-align: center; position: relative; overflow: hidden; }
.about-hero .container { max-width: 700px; position: relative; z-index: 1; }
.about-hero p.lead { margin-top: 18px; color: rgba(26,28,30,.6); }
.about-intro { margin-top: 28px; color: rgba(26,28,30,.75); }

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.story-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 28, 30, 0.1);
  background: var(--cloud);
  padding: 26px;
}
.story-card .why-number { color: var(--lemon); font-weight: 600; margin-bottom: 10px; display: block; }
.story-card h3 { margin-bottom: 10px; }
.story-card p { font-size: 0.9rem; }

/* --- Timeline ------------------------------------------------------ */
.timeline {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(26, 28, 30, 0.15);
}
@media (min-width: 640px) {
  .timeline::before { left: 50%; margin-left: -0.5px; }
}
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 40px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--lemon);
  background: var(--cloud);
  margin-top: 4px;
}
.timeline-item p { color: rgba(26,28,30,.8); }
@media (min-width: 640px) {
  .timeline-item { justify-content: center; }
  .timeline-dot { position: absolute; left: 50%; margin-left: -8px; }
  .timeline-item p { width: calc(50% - 32px); }
  .timeline-item:nth-child(odd) p { margin-right: auto; text-align: right; }
  .timeline-item:nth-child(even) p { margin-left: auto; }
  .timeline-item:nth-child(odd) { padding-right: calc(50% + 8px); }
  .timeline-item:nth-child(even) { padding-left: calc(50% + 8px); }
}

/* --- Values grid (dark) ---------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.value-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(242, 242, 242, 0.1);
  background: rgba(242, 242, 242, 0.04);
  padding: 22px;
}
.value-card h3 { color: var(--lemon); margin-bottom: 8px; font-size: 1.05rem; }
.value-card p { font-size: 0.88rem; }

@media (max-width: 960px) {
  .story-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .story-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .timeline-item p { width: auto; }
}