/* ==========================================================================
   APOTHEKE VERSAND - ABOUT PAGE STYLES (350px Banner Edition)
   ========================================================================== */

/* Hero Banner Section - Exactly 350px Height */
.ap-about-hero {
  height: 350px;
  background: linear-gradient(180deg, rgba(11, 25, 44, 0.9) 0%, rgba(30, 62, 98, 0.95) 100%), url('../images/hero_bg_2.png');
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Breadcrumb Styling */
.ap-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 16px;
  border-radius: var(--ap-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: #93C5FD;
  margin-bottom: 16px;
}
.ap-breadcrumb a {
  color: #FFFFFF;
}
.ap-breadcrumb a:hover {
  color: #38BDF8;
}

.ap-about-card {
  background: #FFFFFF;
  border-radius: var(--ap-radius-md);
  padding: 36px;
  border: 1px solid var(--ap-border);
  box-shadow: var(--ap-shadow-sm);
  height: 100%;
}
.ap-stat-card {
  background: #FFFFFF;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--ap-shadow-sm);
}
.ap-stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ap-blue-accent);
  line-height: 1;
  margin-bottom: 6px;
}
.ap-stat-label {
  font-size: 0.875rem;
  color: var(--ap-primary-subtle);
  font-weight: 600;
}

@media (max-width: 768px) {
  .ap-about-hero {
    height: 300px;
  }
}