/* =====================================================
   UGG Baufortschritt – v2.6
   Chevrons klar sichtbar: Rahmen-Stil (kein Gradient,
   kein Solid-Fill), Icon ragt oben heraus, leicht
   abgerundete Ecken, Hover-Effekte, Mobil ↓ gedreht
   ===================================================== */

.ugg-bf-wrap {
  /* ── Farben ────────────────────────────────────── */
  --ugg-green:         #40b38a;
  --ugg-green-glow:    rgba(64, 179, 138, .4);
  --ugg-orange:        #f27564;
  --ugg-orange-glow:   rgba(242, 117, 100, .45);
  --ugg-gray:          #c4d2de;
  --ugg-text:          #1c2b35;
  --ugg-text-muted:    #8f9eab;

  /* ── Geometrie ─────────────────────────────────── */
  --ugg-tip:           22px;   /* Pfeilspitze horizontal          */
  --ugg-tip-v:         20px;   /* Pfeilspitze vertikal (mobil)    */
  --ugg-chevron-h:     64px;   /* Chevron-Höhe — gut sichtbar     */
  --ugg-border-w:      5px;    /* Rahmenstärke                    */
  --ugg-icon-sz:       68px;   /* Icon-Größe                      */
  --ugg-icon-overlap:  36px;   /* Icon ragt 36 px in Chevron      */
  --ugg-icon-above: calc(var(--ugg-icon-sz) - var(--ugg-icon-overlap)); /* = 32 px */

  background:    transparent;
  border:        none;
  border-radius: 0;
  padding:       0 0 8px;
  box-sizing:    border-box;
  font-family:   inherit;
}

.ugg-bf-wrap *,
.ugg-bf-wrap *::before,
.ugg-bf-wrap *::after { box-sizing: inherit; }

/* ── Titel ──────────────────────────────────────── */
.ugg-bf-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--ugg-text);
  text-align:  center;
  margin:      0 0 20px;
  line-height: 1.4;
}

/* ── Pfeil-Leiste ───────────────────────────────── */
.ugg-bf-arrows {
  display:        flex;
  flex-direction: row;
  align-items:    flex-end;
  gap:            0;
  margin-bottom:  14px;
  padding-top:    var(--ugg-icon-above);
}

/* Z-Index: linker Pfeil über rechtem */
.ugg-bf-step:nth-child(1) { z-index: 15; }
.ugg-bf-step:nth-child(2) { z-index: 14; }
.ugg-bf-step:nth-child(3) { z-index: 13; }
.ugg-bf-step:nth-child(4) { z-index: 12; }
.ugg-bf-step:nth-child(5) { z-index: 11; }
.ugg-bf-step.is-active    { z-index: 20; }

/* ── Einzelner Schritt ──────────────────────────── */
.ugg-bf-step {
  position:        relative;
  flex:            1 1 0;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0;
  padding-top:     var(--ugg-icon-above);
  cursor:          default;
  transition:      transform .18s ease;
}

.ugg-bf-step.has-detail { cursor: pointer; }

.ugg-bf-step.has-detail:focus-visible {
  outline:        2px dashed var(--ugg-green);
  outline-offset: 4px;
  border-radius:  4px;
}

/* ── Hover: Schritt leicht anheben ──────────────── */
.ugg-bf-step.has-detail:hover {
  transform: translateY(-3px);
}

/* ── Chevron: Rahmen + leicht getöntes Inneres ─────
   Farbiger Hintergrund = sichtbarer Rahmen von 5 px.
   ::before = sehr leicht getöntes Inneres (kein Solid).
   Clip-path: leicht abgeschrägte Ecken via extra Punkte. */

/* ── Mittlerer Chevron (links Kerbe, rechts Spitze) */
.ugg-bf-chevron {
  position:   relative;
  z-index:    1;
  width:      100%;
  height:     var(--ugg-chevron-h);
  transition: background .2s ease, filter .2s ease;

  clip-path: polygon(
    0%  15%,
    2%  0%,
    calc(100% - var(--ugg-tip) - 2%) 0%,
    calc(100% - var(--ugg-tip) + 2%) 12%,
    100% 50%,
    calc(100% - var(--ugg-tip) + 2%) 88%,
    calc(100% - var(--ugg-tip) - 2%) 100%,
    2%  100%,
    0%  85%,
    calc(var(--ugg-tip) - 2%) calc(50% + 15%),
    var(--ugg-tip) 50%,
    calc(var(--ugg-tip) - 2%) calc(50% - 15%)
  );
}

/* ── Erstes Element: keine linke Kerbe ──────────── */
.ugg-bf-step:first-child .ugg-bf-chevron {
  clip-path: polygon(
    0%  0%,
    calc(100% - var(--ugg-tip) - 2%) 0%,
    calc(100% - var(--ugg-tip) + 2%) 12%,
    100% 50%,
    calc(100% - var(--ugg-tip) + 2%) 88%,
    calc(100% - var(--ugg-tip) - 2%) 100%,
    0%  100%
  );
}

/* ── Letztes Element: kein rechter Pfeil ────────── */
.ugg-bf-step:last-child .ugg-bf-chevron {
  clip-path: polygon(
    0%   15%,
    2%   0%,
    100% 0%,
    100% 100%,
    2%   100%,
    0%   85%,
    calc(var(--ugg-tip) - 2%) calc(50% + 15%),
    var(--ugg-tip) 50%,
    calc(var(--ugg-tip) - 2%) calc(50% - 15%)
  );
}

/* ── Zustandsfarben (= Rahmenfarbe) ─────────────── */
.ugg-bf-step.is-done    .ugg-bf-chevron { background: var(--ugg-green);  }
.ugg-bf-step.is-active  .ugg-bf-chevron { background: var(--ugg-orange); }
.ugg-bf-step.is-pending .ugg-bf-chevron { background: var(--ugg-gray);   }

/* ── ::before = Inneres (leicht getönt, kein Solid) */
.ugg-bf-chevron::before {
  content:    '';
  position:   absolute;
  inset:      var(--ugg-border-w);
  z-index:    0;
  transition: background .2s ease;
}

.ugg-bf-step.is-done    .ugg-bf-chevron::before { background: rgba(64,  179, 138, .08); }
.ugg-bf-step.is-active  .ugg-bf-chevron::before { background: rgba(242, 117, 100, .08); }
.ugg-bf-step.is-pending .ugg-bf-chevron::before { background: rgba(196, 210, 222, .18); }

/* Hover: Inneres etwas transparenter → Rahmen betont */
.ugg-bf-step.has-detail:hover .ugg-bf-chevron::before {
  background: rgba(255, 255, 255, .1) !important;
}

/* ── Glow-Puls für aktive Phase ─────────────────── */
@keyframes ugg-bf-pulse {
  0%,  100% { filter: drop-shadow(0 0 4px var(--ugg-orange-glow)); }
  50%        { filter: drop-shadow(0 0 18px var(--ugg-orange-glow)); }
}

.ugg-bf-step.is-active .ugg-bf-chevron {
  animation: ugg-bf-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ugg-bf-step.is-active .ugg-bf-chevron {
    animation: none;
    filter: drop-shadow(0 0 8px var(--ugg-orange-glow));
  }
}

/* Hover: Chevron aufhellen */
.ugg-bf-step.has-detail:hover .ugg-bf-chevron {
  filter: brightness(1.1);
}

/* ── Icon-Wrap: absolut über dem Chevron positioniert
   Ist GESCHWISTER des Chevrons → wird von clip-path
   des Chevrons NICHT beschnitten.                      */
.ugg-bf-icon-wrap {
  position:        absolute;
  top:             0;
  left:            50%;
  transform:       translateX(-50%);
  width:           calc(var(--ugg-icon-sz) + 8px);
  height:          var(--ugg-icon-sz);
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  z-index:         10;
  pointer-events:  none;
}

.ugg-bf-icon {
  width:      var(--ugg-icon-sz);
  height:     var(--ugg-icon-sz);
  object-fit: contain;
  display:    block;
  /* Kein drop-shadow */
  transition: opacity .25s ease, transform .18s ease;
}

/* Hover: Icon leicht skalieren */
.ugg-bf-step.has-detail:hover .ugg-bf-icon {
  transform: scale(1.06);
}

.ugg-bf-step.is-pending .ugg-bf-icon {
  opacity: .3;
  filter:  grayscale(1);
}

/* ── Label ──────────────────────────────────────── */
.ugg-bf-label {
  margin-top:    10px;
  font-size:     15px;
  font-weight:   500;
  color:         var(--ugg-text);
  text-align:    center;
  white-space:   nowrap;
  width:         100%;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.3;
  transition:    color .18s ease;
}

.ugg-bf-step.is-active  .ugg-bf-label { font-weight: 700; }
.ugg-bf-step.is-pending .ugg-bf-label { color: var(--ugg-text-muted); }

.ugg-bf-step.has-detail:hover        .ugg-bf-label { color: var(--ugg-green);  }
.ugg-bf-step.is-active.has-detail:hover .ugg-bf-label { color: var(--ugg-orange); }

/* ── Info-Icon (i) ──────────────────────────────── */
.ugg-bf-label-hint {
  margin-top:  4px;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--ugg-text-muted);
  opacity:     .55;
  pointer-events: none;
  transition:  opacity .18s;
}

.ugg-bf-step.has-detail:hover .ugg-bf-label-hint { opacity: .9; }
.ugg-bf-step.is-active        .ugg-bf-label-hint { opacity: .8; }

/* ── Detail-Panel ───────────────────────────────── */
.ugg-bf-detail-panel {
  margin-top:    10px;
  padding:       14px 18px;
  background:    #f4faf7;
  border-left:   3px solid var(--ugg-green);
  border-radius: 0 10px 10px 0;
  font-size:     15px;
  line-height:   1.65;
  color:         var(--ugg-text);
  animation:     ugg-bf-fadein .18s ease;
}

.ugg-bf-detail-panel[hidden] { display: none; }

.ugg-bf-detail-panel__phase {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--ugg-green);
  margin-bottom:  5px;
}

.ugg-bf-detail-panel__text { margin: 0; }

@keyframes ugg-bf-fadein {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   RESPONSIVE – Tablet  ≤ 800 px
   ===================================================== */
@media (max-width: 800px) {
  .ugg-bf-wrap {
    --ugg-chevron-h:    54px;
    --ugg-border-w:     4px;
    --ugg-icon-sz:      56px;
    --ugg-icon-overlap: 30px;
    --ugg-tip:          17px;
  }
  .ugg-bf-label { font-size: 13px; }
}

/* =====================================================
   RESPONSIVE – Mobil  ≤ 580 px
   Chevrons 90° gedreht (zeigen nach unten ↓)
   ===================================================== */
@media (max-width: 580px) {
  .ugg-bf-wrap {
    --ugg-chevron-h:    54px;
    --ugg-border-w:     4px;
    --ugg-icon-sz:      58px;
    --ugg-icon-overlap: 28px;
    --ugg-tip-v:        20px;
  }

  .ugg-bf-arrows {
    flex-direction: column;
    align-items:    stretch;
    padding-top:    0;
    gap:            0;
  }

  /* Überlappung für verbundenen Look */
  .ugg-bf-step:not(:first-child) {
    margin-top: calc(-1 * var(--ugg-tip-v));
  }

  .ugg-bf-step {
    width:          100%;
    flex-direction: column;
    align-items:    center;
    padding-top:    var(--ugg-icon-above);
    padding-bottom: calc(var(--ugg-tip-v) + 2px);
    transition:     none; /* kein Hover-Lift auf Touch */
  }

  /* ── Chevrons: alle nach unten zeigend ─────────── */
  .ugg-bf-chevron,
  .ugg-bf-step:first-child .ugg-bf-chevron,
  .ugg-bf-step:last-child  .ugg-bf-chevron {
    width:  100% !important;
    height: var(--ugg-chevron-h) !important;
  }

  /* Nicht-letzter: Pfeil nach unten mit abgeschrägten Ecken */
  .ugg-bf-step:not(:last-child) .ugg-bf-chevron {
    clip-path: polygon(
      0%   0%,
      100% 0%,
      100% calc(100% - var(--ugg-tip-v) - 4%),
      97%  calc(100% - var(--ugg-tip-v)),
      50%  100%,
      3%   calc(100% - var(--ugg-tip-v)),
      0%   calc(100% - var(--ugg-tip-v) - 4%)
    ) !important;
  }

  /* Letzter: flaches unteres Ende */
  .ugg-bf-step:last-child .ugg-bf-chevron {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    padding-bottom: 0;
  }

  .ugg-bf-label {
    text-align:  center;
    white-space: nowrap;
    font-size:   15px;
    margin-top:  8px;
    margin-bottom: 4px;
  }

  .ugg-bf-step.is-active .ugg-bf-label { font-size: 16px; }

  /* Touch: keine Hover-Effekte */
  .ugg-bf-step.has-detail:hover            { transform: none; }
  .ugg-bf-step.has-detail:hover .ugg-bf-icon { transform: none; }

  .ugg-bf-label-hint { margin-top: 3px; }
  .ugg-bf-detail-panel { font-size: 14px; }
}

/* ── Sehr schmale Geräte ≤ 380 px ──────────────── */
@media (max-width: 380px) {
  .ugg-bf-wrap  { --ugg-icon-sz: 50px; --ugg-chevron-h: 48px; }
  .ugg-bf-title { font-size: .9rem; }
  .ugg-bf-label { font-size: 14px; }
}