/* HYMOTEQ Analoguhr – ausschliesslich die bestehende App-Kopfzeile.
   Optische Vorlage: freigegebener Clock-Header mit Edelstahl-Luenette und rotem Lichtbogen.
   Originales HYMOTEQ-Signet wird im dunklen Zifferblatt als Wasserzeichen verwendet. */
@media screen {
  html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-app-header {
    overflow: visible !important;
  }

  .hymoteq-header-clock {
    display: none;
    pointer-events: none;
  }
  html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-app-header .hymoteq-header-clock {
    --hymoteq-clock-size: clamp(124px, 7.7vw, 140px);
    position: absolute;
    z-index: 18;
    display: block;
    width: var(--hymoteq-clock-size);
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
    filter: none;
  }
  .hymoteq-header-clock-face {
    position: relative;
    z-index: 2;
    width: 100%;
    height: var(--hymoteq-clock-size);
    border-radius: 50%;
    filter: drop-shadow(0 6px 8px rgba(17, 19, 23, 0.20));
  }
  .hymoteq-header-clock-shoulder {
    position: absolute;
    z-index: 0;
    /* Rote Fluegellinie am tatsaechlichen unteren Header-Rand verankern.
       Bildlinie bei ca. 75,5 % der 84 %-hohen Fluegelgrafik. */
    top: calc(100% - clamp(78.7px, 4.8895vw, 88.9px) + 1px);
    left: -103%;
    width: 306%;
    height: clamp(104.16px, 6.468vw, 117.6px);
    opacity: .86;
    background: url('../images/hymoteq/hymoteq-clock-wings.png?v=clock2') center / 100% 100% no-repeat;
    border: none;
    box-shadow: none;
  }
  .hymoteq-header-clock-bezel {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    pointer-events: none;
  }
  .hymoteq-header-clock-dial {
    position: absolute;
    z-index: 1;
    inset: 10.7%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 35% 25%, #35393f 0%, #1b1e23 46%, #0e1015 82%, #08090d 100%);
    box-shadow: inset 0 0 14px rgba(0,0,0,.90), inset 0 0 4px rgba(255,255,255,.25);
  }
  .hymoteq-header-clock-dial::before {
    content:'';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(ellipse at 28% 12%, rgba(255,255,255,.17), transparent 58%);
    pointer-events:none;
  }
  .hymoteq-header-clock-signet {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 62%;
    height: 62%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    opacity: .39;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.42));
  }
  .hymoteq-clock-minutes, .hymoteq-clock-hours {
    position: absolute;
    z-index: 3;
    inset: 4.4%;
    border-radius: 50%;
    pointer-events: none;
  }
  .hymoteq-clock-minutes {
    background: repeating-conic-gradient(from 0deg, rgba(226,235,245,.64) 0deg .45deg, transparent .45deg 6deg);
    -webkit-mask: radial-gradient(circle,transparent 0 88%,#000 89% 92%,transparent 93%);
    mask: radial-gradient(circle,transparent 0 88%,#000 89% 92%,transparent 93%);
  }
  .hymoteq-clock-hours {
    inset: 6.4%;
    background: repeating-conic-gradient(from 0deg, #dfe5ec 0deg 1.8deg,transparent 1.8deg 30deg);
    -webkit-mask: radial-gradient(circle,transparent 0 83%,#000 84% 95%,transparent 96%);
    mask: radial-gradient(circle,transparent 0 83%,#000 84% 95%,transparent 96%);
    filter: drop-shadow(0 1px 1px #030508);
  }
  .hymoteq-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 5;
    display: block;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(0deg);
    border-radius: 100% 100% 2px 2px;
    box-shadow: 1px 0 2px rgba(0,0,0,.52);
    pointer-events:none;
  }
  .hymoteq-clock-hour {
    width: 4.2%;
    height: 26%;
    background: linear-gradient(90deg, #737b85, #eff5fb 42%, #d0d9e2 65%, #5d666f);
  }
  .hymoteq-clock-minute {
    width: 2.7%;
    height: 37%;
    background: linear-gradient(90deg,#606974,#f8fcff 50%,#87929d);
  }
  .hymoteq-clock-second {
    z-index: 6;
    width: 1.15%;
    height: 43%;
    background: linear-gradient(90deg,#8e091a,#f92d42 52%,#aa081d);
    box-shadow: 0 0 3px rgba(255,29,45,.48);
  }
  .hymoteq-clock-hub {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 50%;
    width: 6.7%;
    height: 6.7%;
    transform: translate(-50%,-50%);
    border: 1px solid #15161a;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 25%,#f7ffff 0%,#b7c5d0 32%,#c91c31 52%,#660a15 74%,#292c32 100%);
    box-shadow: 0 1px 3px #000, 0 0 0 1px rgba(255,255,255,.30);
  }
  .hymoteq-header-clock-reflection {
    position: absolute;
    z-index: 8;
    inset: 10.5% 11.3% 53% 11.3%;
    border-radius: 50% 50% 20% 20%;
    background: linear-gradient(157deg,rgba(255,255,255,.21),rgba(255,255,255,.06) 30%,transparent 70%);
    pointer-events: none;
  }
  /* Die echten Dropdowns, Meldungen und das Profil bleiben in ihrer Funktion. */
  html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-header-right {
    position: relative;
    z-index: 20;
  }

  /* Uhr und Fluegel bleiben an allen Desktopbreiten im selben Bezugssystem:
     Mittelpunkt der Kopfzeile und deren echte Unterkante. */
  @media (max-width: 1120px) {
    html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-app-header .hymoteq-header-clock {
      --hymoteq-clock-size: 102px;
    }
    .hymoteq-header-clock-shoulder { display: none; }
  }
  @media (max-width: 820px) {
    html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-app-header .hymoteq-header-clock { display: none; }
  }
}
@media print {
  .hymoteq-header-clock { display: none !important; }
}