/**
 * UNDERDOCK - KPI Bar Section (Unterseiten: Leistungen & Company)
 * 
 * Spezifikation:
 * - Position: Direkt nach dem Hero (der max. 80vh hat)
 * - Section-Wrapper: height: 40px, overflow: visible, z-index: 10 (identisch wie bei den Logos)
 * - Schwarzer Balken:
 *   - Höhe: Exakt 230px
 *   - Breite: 110vw (110% Screenwidth)
 *   - Rotiert: -2 Grad (rotate(-2deg))
 *   - Hintergrund: UD Black (#1F1D1E)
 *   - Textfarbe: UD White (#F8F7F5)
 *   - Schatten: Blur 25px
 * - KPI-Typografie:
 *   - Wert / Zahl: Vina Sans, 60px, Line-Height: 1
 *   - Label darunter: Inter Regular, 20px, Line-Height: 1.25
 *   - Ausrichtung: Horizontal auf 4 Spalten verteilt, zentriert
 */

.kpi-section {
  position: relative;
  height: 40px; /* Identisch zu .logo-section: 40px Section-Höhe mit overflow visible */
  z-index: 10;
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
}

.kpi-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg); /* Spezifikation: -2 Grad rotiert */
  width: 110vw; /* 110% Screenwidth */
  height: 230px; /* Spezifikation: Höhe exakt 230px */
  background-color: var(--ud-black); /* Spezifikation: UD Black */
  box-shadow: none; /* Spezifikation: Schatten auf dem schwarzen Balken entfernt */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.kpi-container {
  width: 100vw; /* Exakt auf sichtbare Viewport-Breite begrenzt (nicht 110vw des Banners!) */
  max-width: 1550px;
  margin: 0 auto;
  padding: 0 50px; /* Festes Padding links & rechts innerhalb des sichtbaren Screens */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 24px;
}

.kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px; /* Spezifikation: 30px Spacing bei allen KPIs */
}

.kpi-value {
  font-family: var(--font-heading);
  font-size: 60px; /* Spezifikation: 60px */
  line-height: 0.85em; /* 51px Textfeld-Höhe */
  height: 51px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--ud-white); /* Spezifikation: UD White */
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-transform: none;
  -webkit-text-box-trim: trim-both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Unendlich-Zeichen einzeln auf 130px: Textfeld exakt auf 51px gecroppt wie die anderen KPIs */
.kpi-value--infinity {
  font-size: 130px; /* Spezifikation: 130px */
  line-height: 0;
  height: 51px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(3px); /* Perfekter optischer Abstand zur Subline (30px wie bei den Ziffern) */
  -webkit-text-box-trim: trim-both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.kpi-label {
  font-family: var(--font-body);
  font-size: 20px; /* Spezifikation: 20px */
  font-weight: 400; /* Spezifikation: Inter Regular */
  line-height: 1.25;
  color: var(--ud-white); /* Spezifikation: UD White */
  margin: 0;
  padding: 0;
  white-space: nowrap;
  letter-spacing: normal;
}

/* Weißer Folge-Bereich für Unterseiten (damit der -2° Schnitt unten sichtbar ist) */
.subpage-content {
  position: relative;
  background-color: var(--ud-white);
  color: var(--ud-black);
  padding-top: 190px;
  padding-bottom: 120px;
  min-height: 250px;
  box-sizing: border-box;
}

/* Responsive Anpassung für kleinere Screens */
@media (max-width: 1199px) {
  .kpi-container {
    padding: 0 40px;
    gap: 20px;
  }
  .kpi-value {
    font-size: clamp(42px, 4.5vw, 60px);
    height: clamp(36px, 3.8vw, 51px);
  }
  .kpi-value--infinity {
    font-size: clamp(80px, 9vw, 130px);
    height: clamp(36px, 3.8vw, 51px);
    transform: translateY(calc(3px * clamp(36px, 3.8vw, 51px) / 51px));
  }
  .kpi-label {
    font-size: clamp(15px, 1.6vw, 20px);
    white-space: nowrap;
  }
}

@media (max-width: 799px) {
  .kpi-section {
    height: 100px;
  }
  .kpi-banner {
    height: 300px; /* Zusätzliche Höhe für 2x2 Grid auf Mobile */
  }
  .kpi-container {
    width: 100vw;
    max-width: 520px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 28px 24px;
    padding: 0 25px; /* Festes Padding links & rechts innerhalb von 100vw */
  }
  .kpi-value {
    font-size: 40px;
    height: 34px;
  }
  .kpi-value--infinity {
    font-size: 85px;
    height: 34px;
    transform: translateY(2px);
  }
  .kpi-label {
    font-size: 14px;
    white-space: normal;
  }
}