/* ============================================================
   EBERL - Firmengeschichte / History-Slider
   ============================================================ */
.ehist {
  --ehist-number-color: var(--tertiary, #d8cda6);
  --ehist-year-color: rgba(216, 205, 166, 0.85);
  --ehist-year-active: #ffffff;
  --ehist-number-size: clamp(150px, 30vw, 440px);
  --ehist-radius: var(--radius-m, 14px);
  --ehist-box-width: min(560px, 72vw);   /* Inhaltsbreite (ohne Innenabstand) */

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Buehne: grosse Zahl + Box ---------- */
.ehist-display {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 40vw, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ehist-bignumber {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}
.ehist-bignumber .ehist-counter {
  display: flex;
  overflow: hidden;
  line-height: 1;
  font-size: var(--ehist-number-size);
  font-weight: 700;
  color: var(--ehist-number-color);
  letter-spacing: -0.02em;
}
.ehist-digit {
  position: relative;
  width: 1ch;                       /* exakt eine Ziffernbreite (tabular) */
  height: var(--ehist-number-size);
  font-variant-numeric: tabular-nums;
}
.ehist-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* ---------- Glas-Box (Desktop: feste Breite via CSS, Hoehe via JS) ---------- */
.ehist-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  box-sizing: content-box;
  width: calc(var(--ehist-box-width) + 64px);   /* + 2x 32px Innenabstand */
  overflow: hidden;
  border-radius: var(--ehist-radius);
  border: 1px solid rgba(255, 255, 255, 0.40);
  background: rgba(0, 0, 0, 0.50);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  will-change: height;
}
.ehist-slide {
  position: absolute;
  top: 32px;
  left: 32px;
  width: var(--ehist-box-width);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  opacity: 0;
  will-change: opacity;
}
.ehist-slide--active { opacity: 1; }
.ehist-slide p,
.ehist-slide li { margin: 0; line-height: 1.45; font-size: clamp(15px, 1.15vw, 18px); }
.ehist-slide ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ehist-slide ul li { position: relative; padding-left: 1.1em; }
.ehist-slide ul li::before { content: '#'; font-weight: 700; position: absolute; left: 0; top: 0; }   /* Aufzaehlungszeichen: # */

/* ---------- Zeitstrahl (flach) ---------- */
.ehist-wheel {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: 8px;
  overflow: hidden;
}
.ehist-wheel-track { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ehist-year {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 24px);
  color: var(--ehist-year-color);
  cursor: pointer;
  transition: color 0.25s ease;
}
.ehist-year.is-active { color: var(--ehist-year-active); font-weight: 700; }

/* ---------- Navigation ---------- */
.ehist-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.ehist-nav button {
  background: none; border: none; padding: 0; line-height: 0; cursor: pointer;
  transition: opacity 0.2s ease;
}
.ehist-nav button:hover:not([disabled]) { opacity: 0.75; }
.ehist-nav button[disabled] { opacity: 0.3; cursor: default; }
.ehist-nav img, .ehist-nav svg { display: block; height: 32px; width: auto; }
.ehist-nav button { color: var(--ehist-year-color); }   /* Farbe der eingebauten Pfeil-SVGs */

/* ============================================================
   MOBILE: Layout im Fluss (Zahl ueber der Box) - kampfsicher
   ============================================================ */
@media (max-width: 600px) {
  .ehist { --ehist-number-size: clamp(56px, 16vw, 96px); }

  .ehist-display { display: block; min-height: 0; text-align: center; }

  .ehist-bignumber {
    position: static;
    inset: auto;
    justify-content: center;
    margin-bottom: 14px;
  }

  .ehist-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    padding: 24px;
  }
  .ehist-slide {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    display: none;
    opacity: 1;
  }
  .ehist-slide--active { display: flex; }
  .ehist-slide p, .ehist-slide li { font-size: 16px; }

  .ehist-wheel { height: 52px; margin-top: 18px; }
  .ehist-year { font-size: 18px; }
}