/* ===================================================
   RA Digital – Über mich Stylesheet
   =================================================== */

/* ===== ABOUT HERO ===== */
.about-hero {
  padding-top:    calc(var(--nav-height) + var(--section-padding));
  padding-bottom: var(--section-padding);
  background:     var(--color-white);
}

.about-hero-inner {
  display:         flex;
  align-items:     flex-start;
  gap:             72px;
}

/* Photo column */
.about-photo-col {
  flex-shrink: 0;
  width:       340px;
}

.about-figure {
  width:         100%;
  aspect-ratio:  3 / 4;
  overflow:      hidden;
  border-radius: var(--radius-lg);
}

.about-photo {
  width:             100%;
  height:            100%;
  object-fit:        cover;
  object-position:   center center;
  display:           block;
  image-orientation: from-image;
}

/* Text column */
.about-text-col {
  flex: 1;
  padding-top: 8px;
}

.about-title {
  font-size:      48px;
  font-weight:    600;
  color:          var(--color-dark);
  letter-spacing: -0.02em;
  margin-bottom:  24px;
  line-height:    1.1;
}

.about-lead {
  font-size:     18px;
  color:         var(--color-dark);
  line-height:   1.7;
  font-weight:   400;
  margin-bottom: 20px;
}

.about-body {
  font-size:     16px;
  color:         #5a5a5a;
  line-height:   1.75;
  margin-bottom: 20px;
}

.about-cta {
  margin-top: 12px;
}

/* ===== SCHWERPUNKTE ===== */
.about-focus {
  background:     var(--color-bg);
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
}

.focus-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--color-gray);
  border:                1px solid var(--color-gray);
  border-radius:         var(--radius);
  overflow:              hidden;
}

.focus-item {
  background: var(--color-white);
  padding:    40px 36px;
}

.focus-title {
  font-size:     17px;
  font-weight:   600;
  color:         var(--color-dark);
  margin-bottom: 12px;
}

.focus-desc {
  font-size:  15px;
  color:      #5a5a5a;
  line-height: 1.7;
}

/* ===== CTA SECTION ===== */
.about-cta-section {
  background:     var(--color-blue);
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
}

.about-cta-inner {
  text-align: center;
  max-width:  640px;
  margin:     0 auto;
}

.about-cta-title {
  font-size:     36px;
  font-weight:   600;
  color:         var(--color-white);
  margin-bottom: 16px;
  line-height:   1.2;
}

.about-cta-text {
  font-size:     17px;
  color:         rgba(255, 255, 255, 0.8);
  line-height:   1.65;
  margin-bottom: 36px;
}

.about-cta-section .btn-primary {
  background:   var(--color-white);
  color:        var(--color-blue);
  border-color: var(--color-white);
}

.about-cta-section .btn-primary:hover {
  background:   rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .about-photo-col {
    width: 280px;
  }

  .about-hero-inner {
    gap: 48px;
  }

  .about-title {
    font-size: 40px;
  }

  .focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding-top: calc(var(--nav-height) + 48px);
  }

  .about-hero-inner {
    flex-direction: column;
    gap: 36px;
  }

  .about-photo-col {
    width: 100%;
    max-width: 340px;
  }

  .about-title {
    font-size: 32px;
  }

  .about-lead {
    font-size: 16px;
  }

  .about-cta-title {
    font-size: 26px;
  }
}