/* Page-specific styles: ueber-uns.html */

.about-hero { padding: 3.5rem 0 2.5rem; }
.about-hero h1 { font-size: 2.4rem; margin-bottom: 1rem; }
.about-hero p { max-width: 680px; font-size: 1.1rem; }

.mission-band {
  background: var(--accent);
  color: #fff;
  border-top: 3px dashed var(--ink);
  border-bottom: 3px dashed var(--ink);
}
.mission-band .inner {
  border: 3px dashed #fff;
  border-radius: var(--rough-1);
  padding: 1.8rem 1.6rem;
}
.mission-band h2 { color: #fff; }
.mission-band p { font-size: 1.05rem; margin: 0; }

.story-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .story-grid { grid-template-columns: 1.3fr 1fr; } }

.stats-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { text-align: center; padding: 1.4rem .8rem; }
.stat-card .num {
  font-family: 'Permanent Marker', cursive;
  font-size: 2.1rem;
  color: var(--accent);
  display: block;
  transform: rotate(-2deg);
}
.stat-card p { font-size: .9rem; margin: .3rem 0 0; }

.values-grid { display: grid; gap: 1.2rem; }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.values-grid .icon-lg { color: var(--accent); margin-bottom: .5rem; }
.values-grid h3 { font-size: 1.15rem; }
.values-grid p { font-size: .93rem; margin: 0; }

.steps-list { counter-reset: s; list-style: none; max-width: 680px; }
.steps-list li { counter-increment: s; position: relative; padding-left: 3.4rem; margin-bottom: 1.3rem; }
.steps-list li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Permanent Marker', cursive; font-size: 1.2rem;
  color: #fff; background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 12px 4px 14px 5px;
  transform: rotate(3deg);
}
.steps-list h3 { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.03rem; margin-bottom: .25rem; }
.steps-list p { font-size: .95rem; margin: 0; }

.about-cta { text-align: center; }
.about-cta .btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }