/* ==========================================================================
   IDRIS UMZUG — ABOUT PAGE STYLES
   --------------------------------------------------------------------------
   About-specific sections. Shared components (Why-Choose, Stats, Testimonials,
   FAQ, CTA, copy, pillars) reuse the fp-* classes from front-page.css.
   Built on the design tokens in assets/css/theme.css.

   Contents:
     1. Hero
     2. Media badges (shared helper)
     3. Who We Are
     4. Mission / Vision
     5. Core Values
     6. Approach steps
     7. Berlin neighborhoods
     8. Residential / Commercial service cards
     9. Eco disposal
     10. Serving Germany
     11. Responsive
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.ab-service__tags a:hover .ab-tag{
	background-color:#fff;
	color:#4a5560;
	transition:0.3s;
}
.ab-hero {
  position: relative;
  text-align: center;
  color: var(--color-white);
  padding-top: 12.5rem;
  padding-bottom: var(--space-10);
  background: linear-gradient(#000000B2, #000000B2),
  url(/wp-content/uploads/2026/06/ueber-ban.webp) center / cover no-repeat,
  var(--color-dark);
}
.ab-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--fs-md);
    /* font-weight: var(--fw-semibold); */
    letter-spacing: var(--ls-wide);
    color: rgba(255, 255, 255, 0.85);
    width: 70%;
    margin: 0px auto;
    margin-bottom: 2rem;
}
.ab-hero h1 { color: var(--color-white); max-width: 820px; margin: 0 auto var(--space-6); }
.ab-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.ab-hero .btn--outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.ab-hero .btn--outline:hover { background: var(--color-white); color: var(--color-dark); }

/* ==========================================================================
   2. MEDIA BADGES (shared helper for image overlays)
   ========================================================================== */
    .um-ihren {
    position: relative;
    border-radius: 24px;
    /* overflow: hidden; */
    height: 600px;
}
.um-ihren img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
}
    .sind-ihr {
    position: relative;
    border-radius: 24px;
    /* overflow: hidden; */
    height: 680px;
}
.sind-ihr img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
}
    .gesamte {
    position: relative;
    border-radius: 24px;
    /* overflow: hidden; */
    height: 680px;
}
.gesamte img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
}
.ab-media { position: relative; }
.ab-media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.vision{height: 220px;}
.ab-badge-circle {
    position: absolute;
    left: -30px;
    bottom: -40px;
    width: 150px;
    height: 150px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: var(--radius-circle);
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: 2.4rem;
    /* font-weight: var(--fw-extrabold); */
    line-height: 1;
    border: 7px solid #fff;
}
.ab-badge-circle small {
    display: block;
    margin-top: var(--space-2);
    line-height: 1.3;
    font-size: var(--fs-sm);
    /* font-weight: var(--fw-semibold); */
}

/* "Who We Are" autoplaying video (uses the shared .fp-video pattern) */
.ab-who__video .fp-video__media {
  min-height: 420px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.ab-badge-card {
  position: absolute;
  left: -24px;
  bottom: -20px;
  width: 205px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 1.9rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  box-shadow: var(--shadow-lg);
}
.ab-badge-card small {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.ab-badge-card--green { background: var(--color-success); }

/* ==========================================================================
   3. WHO WE ARE
   ========================================================================== */
.ab-who .fp-split__content p { color: var(--color-body); }

/* "Why Customers Choose" on dark sections is styled globally in front-page.css. */

/* ==========================================================================
   4. MISSION / VISION
   ========================================================================== */
.ab-mv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.ab-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.ab-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.ab-card--dark {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.85);
}
.ab-card--dark h3 { color: var(--color-secondary); }
.ab-card--dark .fp-checklist { margin-bottom: 0; }
.ab-card--dark .fp-checklist li { color: rgba(255, 255, 255, 0.9); }
.ab-card--dark .fp-checklist--plain i { color: var(--color-secondary); }
.ab-card--cream {
  background: var(--color-cream);
  color: var(--color-body);
}
.ab-card--cream .ab-card__quote { font-style: italic; color: var(--color-body); }
.ab-card--cream img {
  width: 100%;
  margin-top: var(--space-6);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   5. CORE VALUES
   ========================================================================== */
.ab-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.ab-value {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.ab-value__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 16px;
  background: linear-gradient(150deg, #ffffff 0%, #fdf2dc 100%);
  color: var(--color-secondary-dark);
  font-size: 1.4rem;
  box-shadow: 0 12px 26px rgba(246, 166, 9, 0.22);
}
.ab-value h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.ab-value p { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   6. APPROACH STEPS
   ========================================================================== */
.ab-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7) var(--space-6);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
.ab-steps__num {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--color-secondary);
  line-height: 1;
}
.ab-steps strong { display: block; color: var(--color-dark); margin-bottom: var(--space-1); }
.ab-steps p { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   7. BERLIN NEIGHBORHOODS
   ========================================================================== */
.ab-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.ab-area {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.ab-area strong { display: block; color: var(--color-dark); margin-bottom: var(--space-1); }
.ab-area p { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   8. RESIDENTIAL / COMMERCIAL SERVICE CARDS
   ========================================================================== */
.ab-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.ab-service {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 395px;
}
.ab-service img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ab-service__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: var(--space-7);
  color: var(--color-white);
  background: linear-gradient(to top, rgba(12, 35, 64, 0.92) 10%, rgb(12 35 64 / 73%) 60%, rgb(12 35 64 / 44%));
}
.ab-service__overlay h3 { color: var(--color-white); margin-bottom: var(--space-2); }
.ab-service__overlay p { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

/* Small gold tag pills (Commercial Services) */
.ab-service__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.ab-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--fs-sm);
  /* font-weight: var(--fw-semibold); */
}

/* ==========================================================================
   9. ECO DISPOSAL
   ========================================================================== */
.ab-eco .fp-split__content p { color: var(--color-body); }
/* Solid gold circle icons with white glyphs (eco pillars) */
.ab-eco .fp-pillars__icon { background: var(--color-secondary); color: var(--color-white); }

/* ==========================================================================
   10. SERVING GERMANY
   ========================================================================== */
/* Faint map-pin watermark in the background */
.ab-serving { position: relative; overflow: hidden; }
.ab-serving > .container { position: relative; z-index: 1; }
.ab-serving::after {
  content: "\f5a0";                    /* map-location-dot (pin + folded map) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -30px;
  right: 60px;
  font-size: 360px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  z-index: 0;
}
.ab-serving h2 { max-width: 400px; }

.ab-serving__label {
  display: block;
  margin: var(--space-6) 0 var(--space-4);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}
.ab-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-locations li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.85);
}
.ab-locations i { color: var(--color-secondary); }
/* Enables animating to/from height:auto */
:root {
  interpolate-size: allow-keywords;
}

/* Animate the revealed content of each <details> */
.fp-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 0.35s ease,
    content-visibility 0.35s ease allow-discrete;
}
.fp-faq__item[open]::details-content {
  block-size: auto;
}

/* keep your padding — it now animates along with the height */
.fp-faq__answer {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-body);
}
.fp-faq__answer p { margin: 0; }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .ab-values { grid-template-columns: repeat(2, 1fr); }
  .ab-hero__eyebrow{width: 100% !important;}
  .vision,
.um-ihren,
.sind-ihr,
.gesamte {
  height: auto !important;
}
  /* .ab-service{ padding-top: 3rem !important;} */
  .ab-mv__grid,
  .ab-services{    grid-template-columns: 1fr;}
}

@media (max-width: 767px) {
  .ab-hero { padding-top: 10rem; }
  .ab-mv__grid,
  .ab-values,
  .ab-steps,
  .ab-areas,
  .ab-services,
  .ab-locations { grid-template-columns: 1fr; }

      .ab-badge-circle {
        left: -12px;
        bottom: -20px;
        width: 140px;
        height: 140px;
        padding: 10px;
        font-size: 1.4rem;
    }
  .ab-badge-card { left: -5px; width: 215px; }
}