/* ═══════════════════════════════════════════════════════
   LEO-TEC — ueber-uns.css
   Nur für ueber-uns.php
   ═══════════════════════════════════════════════════════ */

/* ── About Split ──────────────────────────────────────── */
.about-intro { background: var(--clr-surface); }

.about-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-lg);
  align-items: start;
}

/* Inhaber-Karte */
.owner-card {
  background: var(--clr-navy-pale);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
}
.owner-card__avatar {
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--clr-navy); margin-inline: auto;
  margin-bottom: 1.25rem; display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.85);
  border: 3px solid #fff; box-shadow: var(--shadow-md);
}
.owner-card__name { font-size: 1.15rem; color: var(--clr-navy-dark); margin-bottom: .3rem; }
.owner-card__role {
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--clr-navy); margin-bottom: 1.5rem;
}
.owner-card__actions { display: flex; flex-direction: column; gap: .75rem; }

/* About-Text */
.about-text p.mono { margin-bottom: .5rem; }
.about-text p.text-muted { margin-top: .75rem; line-height: 1.82; }
.about-text p.text-muted + p.text-muted { margin-top: .75rem; }

/* ── Werte Grid ───────────────────────────────────────── */
.werte-section { background: var(--clr-bg); }
.werte-header  { text-align: center; margin-bottom: var(--sp-lg); }
.werte-header p.mono { margin-bottom: .5rem; }

/* Werte-Kachel: links-ausgerichtet */
.trust__item--left {
  text-align: left;
  align-items: flex-start;
  flex-direction: row;
  gap: 1.25rem;
}
.trust__item--left .trust__icon { flex-shrink: 0; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; }
  .owner-card  { max-width: 360px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .trust__item--left { flex-direction: column; align-items: center; text-align: center; }
}