/* ── Scroll Reveal ───────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Nav hover underline ─────────────────────────────────────── */

.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}
.nav-links a.active { border-bottom: none; }

/* ── Product card hover ──────────────────────────────────────── */

.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26,22,16,0.12);
}

/* ── Strip counter ───────────────────────────────────────────── */

.strip-item .num {
  display: inline-block;
  transition: color 0.3s;
}

/* ── Strip slide-from-center ─────────────────────────────────── */

.strip-slide {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.strip-slide.visible { opacity: 1; transform: translate(0, 0); }

.strip-item:nth-child(1).strip-slide { transform: translateX(100%); }
.strip-item:nth-child(3).strip-slide { transform: translateX(-100%); }
.strip-item:nth-child(1).strip-slide.visible,
.strip-item:nth-child(3).strip-slide.visible { transform: translate(0, 0); }

@media (max-width: 900px) {
  .strip-item:nth-child(1).strip-slide { transform: translateY(100%); }
  .strip-item:nth-child(3).strip-slide { transform: translateY(-100%); }
  .strip-item:nth-child(1).strip-slide.visible,
  .strip-item:nth-child(3).strip-slide.visible { transform: translate(0, 0); }
}

/* ── Dezimaluhr ──────────────────────────────────────────────── */

.dezimaluhr {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.uhr-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.uhr-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(184,151,58,0.5);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

.uhr-group {
  display: flex;
  gap: 4px;
  align-items: center;
}

.uhr-sep {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c0392b;
  opacity: 0.8;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(192,57,43,0.6);
}

.lamp {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(184,151,58,0.12);
  border: 1px solid rgba(184,151,58,0.2);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  flex-shrink: 0;
}

.lamp.on {
  background: var(--gold);
  border-color: var(--gold-lt);
  box-shadow: 0 0 8px rgba(184,151,58,0.7), 0 0 16px rgba(184,151,58,0.3);
}

/* ── Button hover ────────────────────────────────────────────── */

.btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

/* ── Fixed Dezimaluhr (rechter Bildschirmrand, alle Seiten) ──── */

.uhr-fixed {
  /* 46 Lampen/Trenner + 45 Abstaende = 59.5 Einheiten Gesamthoehe (Faktor
     0.3 = Verhaeltnis Abstand:Punkt). min() haelt das Ganze innerhalb 85%
     des Bereichs UNTER der 68px-Navbar (nicht der vollen Viewport-Hoehe —
     sonst rutscht die Uhr bei knapper Fensterhoehe unter/ueber die Nav).
     top/transform zentrieren im selben Nav-freien Bereich. */
  --uhr-avail: calc(100vh - 68px);
  --uhr-unit: min(10px, calc(var(--uhr-avail) * 0.85 / 59.5));
  position: fixed;
  top: calc(68px + var(--uhr-avail) / 2);
  right: 29px;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--uhr-unit) * 0.3);
}
.uhr-fixed .lamp {
  width: var(--uhr-unit); height: var(--uhr-unit);
}
.uhr-fixed .lamp:not(.on) {
  background: rgba(122,110,98,0.45);
  border: 1px solid rgba(26,22,16,0.45);
}

.uhr-fixed .uhr-lamp-col {
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--uhr-unit) * 0.3);
}

.uhr-fixed .uhr-sep {
  width: var(--uhr-unit); height: var(--uhr-unit);
  background: rgba(122,110,98,0.45);
  border: 1px solid rgba(26,22,16,0.45);
  box-shadow: none;
  opacity: 1;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.uhr-fixed .uhr-sep.active {
  background: #c0392b;
  box-shadow: 0 0 6px rgba(192,57,43,0.6), 0 0 12px rgba(192,57,43,0.3);
}

@media (max-width: 1100px) {
  .uhr-fixed { right: 10px; gap: 2px; }
  .uhr-fixed .lamp,
  .uhr-fixed .uhr-sep { width: 5px; height: 5px; }
  .uhr-fixed .uhr-lamp-col { gap: 2px; }
}

/* ── Cookie-Hinweis (kein Banner, kurzer Slide-in) ─────────────── */

.cookie-hint {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 250;
  max-width: 280px;
  padding: 12px 16px;
  background: var(--dark);
  color: rgba(248,244,238,0.85);
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  pointer-events: none;
}
.cookie-hint a { color: var(--gold); }
.cookie-hint.in { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-hint.out { transform: translateX(-140%); opacity: 0; pointer-events: none; }

/* ── Process-Step Hover ──────────────────────────────────────── */

.process-step:hover {
  transform: translateY(-6px);
}
.process-step::before {
  transition: width 0.25s ease;
}
.process-step:hover::before {
  width: 64px;
}
.process-step:hover .city {
  color: var(--gold-lt);
}

/* ── Process step stagger ────────────────────────────────────── */

.process-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.process-step.visible {
  opacity: 1;
  transform: translateY(0);
}