/* ===============================
   Grundwerte für Navbar + Clock-Bar
   =============================== */

:root {
  --nav-height: 5.5rem;        /* ca. Höhe deiner Navbar */
  --clockbar-height: 3.2rem;   /* Höhe der Uhr-Leiste */
}

/* Abstand für die Standardseiten:
   Navbar (fixed) */
.nav-offset {
  height: var(--nav-height);
}

/* Abstand für den Seiteninhalt: 
   Impressum und Datenschutz
   Navbar (fixed) + Clock-Bar (fixed) */
.legal-page .nav-offset {
  height: calc(var(--nav-height) + var(--clockbar-height));
}

/* ===============================
   Clock-Bar direkt unter der Navbar
   =============================== */

.clock-bar {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 1040;
  background: #1F2937;         /* GLEICHE Farbe wie Navbar im Startzustand */
  color: #FEF3C7;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  padding-bottom: 0.2rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.clock-bar-inner {
  height: var(--clockbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* Uhr-Icon */
.clock-bar-icon {
  font-size: 1.3rem;
  color: #FBBF24;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===============================
   Flip-Clock Styles (24h, kompakt)
   =============================== */

.flip-clock {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-family: "Rubik Iso", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Gruppe (Stunden / Minuten / Sekunden) */
.time-group {
  display: flex;
  gap: 0.1rem;
}

/* Einzelne Ziffer */
.digit-wrapper {
  position: relative;
  width: 24px;
  height: 34px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(145deg, #111827, #4B5563);
  box-shadow: 0 3px 7px rgba(0,0,0,0.45);
}

/* Ziffern */
.digit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  color: #FEF3C7;
}

/* Startpositionen */
.digit-current {
  transform: translateY(0%);
  opacity: 1;
}

.digit-next {
  transform: translateY(-100%);
  opacity: 0;
}

/* Flip-Animation */
.digit-animate .digit-current {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.digit-animate .digit-next {
  transform: translateY(0%);
  opacity: 1;
  transition: transform 0.7s ease, opacity 0.7s ease;
}

/* Doppelpunkte */
.colon {
  font-size: 1.3rem;
  line-height: 1;
  color: #FBBF24;
  padding: 0 0.05rem;
}

/* Mobile: alles etwas kompakter */
@media (max-width: 576px) {
  :root {
    /* Nav-Höhe kommt jetzt dynamisch aus JS, nur Clock-Bar leicht anpassen */
    --clockbar-height: 2.75rem;
  }

  .digit-wrapper {
    width: 22px;
    height: 30px;
  }

  .digit {
    font-size: 1.15rem;
  }

  .colon {
    font-size: 1.15rem;
  }

  .clock-bar-icon {
    font-size: 1.15rem;
  }
}

/* Extra-Feintuning für sehr kleine Geräte (z.B. iPhone SE) */
@media (max-width: 375px) {
  :root {
    --clockbar-height: 2.5rem;
  }

  .legal-page .nav-offset {
    height: calc(var(--nav-height) + var(--clockbar-height));
  }
}


/* ===============================
   Gemeinsamer Scroll-State für Navbar + Clock-Bar
   =============================== */

/* Standard-Hintergrund (Seite ganz oben) */
.navbar-custom {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Wenn gescrollt: body bekommt Klasse .nav-scrolled
   -> Navbar UND Clock-Bar werden dunkler */
body.nav-scrolled .navbar-custom,
body.nav-scrolled .clock-bar {
  background-color: #020617;      /* deine dunklere Scroll-Farbe */
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}