/* =========================
   ÜBER MICH
========================= */

.ueber-mich-page {
  background: #ffffff;
}

/* =========================
   HERO
========================= */

.ueber-mich-page .tm-about-hero {
  padding: clamp(92px, 8vw, 132px) 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 99, 235, .24), transparent 36%),
    linear-gradient(135deg, #050816 0%, #08111f 58%, #020617 100%);
  color: #ffffff;
}

.ueber-mich-page .tm-about-hero .tm-eyebrow {
  color: #bfdbfe;
}

.ueber-mich-page .tm-about-hero .tm-page-hero-content h1 {
  color: #ffffff;
}

.ueber-mich-page .tm-about-hero .tm-page-hero-lead {
  color: rgba(255, 255, 255, .74);
}

.ueber-mich-page .tm-about-visual {
  width: 100%;
}

.ueber-mich-page .tm-about-image-wrap {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border-radius: 34px;
  background: rgba(255,255,255,.08);
  box-shadow:
    0 34px 100px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.ueber-mich-page .tm-about-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
}

.ueber-mich-page .tm-about-overlay {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(14px);
}

.ueber-mich-page .tm-about-overlay p {
  margin: 0 0 4px;
  color: #60a5fa;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ueber-mich-page .tm-about-overlay strong,
.ueber-mich-page .tm-about-overlay span {
  display: block;
  color: #ffffff;
}

.ueber-mich-page .tm-about-overlay strong {
  margin-bottom: 4px;
}

/* =========================
   SEITENVARIANTEN
========================= */

.ueber-mich-page .tm-about-intro,
.ueber-mich-page .tm-maintenance {
  background: #ffffff;
}

.ueber-mich-page .tm-problem,
.ueber-mich-page .tm-process {
  background:
    radial-gradient(circle at 82% 8%, rgba(37,99,235,.05), transparent 34%),
    #f8fafc;
}

.ueber-mich-page .tm-website-grid,
.ueber-mich-page .tm-maintenance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(48px, 7vw, 84px);
  align-items: center;
}

.ueber-mich-page .tm-maintenance .tm-feature-grid {
  max-width: 620px;
  margin-top: 34px;
}

.ueber-mich-page h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(2.7rem, 5vw, 5rem);
  line-height: .92;
  letter-spacing: -.07em;
}

.ueber-mich-page h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 1.08rem;
  line-height: 1.3;
}

.ueber-mich-page p:not(.tm-eyebrow) {
  color: #64748b;
  line-height: 1.8;
}

.ueber-mich-page .tm-about-lead {
  margin-top: 0;
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 760;
  line-height: 1.7;
}

.ueber-mich-page .tm-about-timeline,
.ueber-mich-page .tm-about-process-grid {
  margin-top: 52px;
}

.ueber-mich-page .tm-icon,
.ueber-mich-page .tm-about-process-grid span {
  display: inline-flex;
  margin-bottom: 18px;
  color: #2563eb;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.ueber-mich-page .tm-microcopy {
  margin-top: 14px;
  color: #94a3b8;
  font-size: .92rem;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px) {

  .ueber-mich-page .tm-website-grid,
  .ueber-mich-page .tm-maintenance-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {

  .ueber-mich-page .tm-about-image-wrap {
    max-width: 320px;
    margin-inline: auto;
    border-radius: 28px;
  }

  .ueber-mich-page .tm-about-overlay {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .ueber-mich-page .tm-about-timeline,
  .ueber-mich-page .tm-about-process-grid,
  .ueber-mich-page .tm-maintenance .tm-feature-grid {
    margin-top: 34px;
  }

}

/* =========================
   ICON SYSTEM ADJUSTMENTS
========================= */

.ueber-mich-page .tm-feature-icon {
  margin-bottom: 18px;
}


/* =========================
   FINAL MOBILE LAUNCH PASS: ÜBER MICH
========================= */

@media (max-width: 767px) {
  .ueber-mich-page .tm-about-hero {
    padding-top: 34px;
    padding-bottom: 52px;
  }

  .ueber-mich-page .tm-about-hero .tm-page-hero-grid {
    gap: 24px;
  }

  .ueber-mich-page .tm-about-hero .tm-page-hero-lead {
    margin-top: 14px;
    line-height: 1.6;
  }

  .ueber-mich-page .tm-about-image-wrap {
    border-radius: 24px;
  }

  .ueber-mich-page .tm-about-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .ueber-mich-page .tm-about-hero {
    padding-top: 28px;
    padding-bottom: 46px;
  }
}