:root{
  --awp-watch-width:clamp(154px,11.5vw,182px);
  --awp-watch-height:clamp(180px,13.5vw,214px);
  --awp-watch-right:0px;
  --awp-watch-shift:86%;
  --awp-watch-radius:31px;
  --awp-watch-item-height:41px;
  --awp-watch-ease:cubic-bezier(.2,.78,.25,1)
}

.awp-watch-nav{
  position:fixed;
  z-index:58;
  top:36%;
  right:var(--awp-watch-right);
  width:var(--awp-watch-width);
  height:var(--awp-watch-height);
  transform:translate3d(8%,-50%,0);
  transition:transform .88s var(--awp-watch-ease),opacity .25s ease;
  user-select:none;
  -webkit-user-select:none
}
.awp-watch-nav.is-collapsed{transform:translate3d(var(--awp-watch-shift),-50%,0)}
.awp-watch-body{
  position:relative;
  width:100%;
  height:100%;
  padding:5px;
  border:1px solid #20232a;
  border-radius:38px;
  background:linear-gradient(145deg,#3b3e45 0,#0e1014 24%,#050608 57%,#252830 100%);
  box-shadow:0 22px 55px rgba(5,7,12,.38),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 0 0 3px rgba(0,0,0,.55);
  cursor:default
}
.awp-watch-display{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--awp-watch-radius);
  color:#fff;
  background:radial-gradient(circle at 27% 12%,#27384e 0,#111a28 27%,#070b12 65%,#030508 100%);
  box-shadow:inset 0 0 28px rgba(45,85,132,.14),0 0 0 2px #000;
  isolation:isolate
}
.awp-watch-display::after{
  position:absolute;
  z-index:38;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(108deg,rgba(255,255,255,.08),transparent 20%,transparent 72%,rgba(109,163,210,.035));
  content:""
}
.awp-watch-crown{
  position:absolute;
  z-index:48;
  top:34%;
  left:-10px;
  width:12px;
  height:43px;
  padding:0;
  border:1px solid #262930;
  border-right:0;
  border-radius:8px 0 0 8px;
  background:repeating-linear-gradient(0deg,#2d3037 0 2px,#090a0d 2px 4px);
  box-shadow:-3px 2px 9px rgba(0,0,0,.35);
  cursor:pointer
}
.awp-watch-crown::after{
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4a4e57;
  box-shadow:0 0 0 1px #060708;
  content:"";
  transform:translate(-50%,-50%)
}
.awp-watch-crown:focus-visible{outline:3px solid #70e8d2;outline-offset:3px}
@keyframes awp-crown-sequence{
  0%,7%,14%,21%,28%,35%,42%,49%,56%,63%,70%,77%,84%,91%,100%{transform:translateX(0);box-shadow:-3px 2px 9px rgba(0,0,0,.35)}
  3.5%,17.5%,31.5%,45.5%,59.5%,73.5%,87.5%{transform:translateX(-8px) scale(1.24);box-shadow:-10px 2px 23px rgba(79,223,192,.82),0 0 0 5px rgba(79,223,192,.23)}
}
.awp-watch-nav.is-hinting .awp-watch-crown{animation:awp-crown-sequence 15s ease-in-out 1 both}

.awp-watch-list-viewport{
  position:absolute;
  z-index:4;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:.42s opacity,.52s transform var(--awp-watch-ease)
}
.awp-watch-nav.is-ready .awp-watch-list-viewport{opacity:1;pointer-events:auto;transform:none}
.awp-watch-list{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  transform:translateY(calc(-1 * var(--awp-list-offset,0px)));
  will-change:transform
}
.awp-watch-item{
  position:absolute;
  top:0;
  left:6px;
  display:grid;
  width:calc(100% - 12px);
  height:var(--awp-watch-item-height);
  grid-template-columns:34px minmax(0,1fr);
  gap:7px;
  align-items:center;
  padding:3px 6px 3px 3px;
  border:1px solid transparent;
  border-radius:13px;
  color:#cfd7e3;
  background:transparent;
  font:700 .63rem/1.04 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:-.025em;
  text-align:left;
  opacity:var(--awp-item-opacity,.46);
  transform:translateY(var(--awp-item-y,0)) scale(var(--awp-item-scale,.78));
  transform-origin:center;
  transition:.3s background,.3s border-color,.3s color,.3s box-shadow;
  cursor:pointer;
  will-change:transform,opacity
}
.awp-watch-item:hover{color:#fff;background:rgba(255,255,255,.09)}
.awp-watch-item.is-active{
  color:#fff;
  border-color:rgba(91,214,227,.55);
  background:linear-gradient(100deg,rgba(69,103,242,.42),rgba(204,53,160,.28));
  box-shadow:0 0 0 1px rgba(82,225,213,.1),0 7px 22px rgba(46,80,174,.26)
}
.awp-watch-item.is-landing-option.is-active{animation:awp-landingpage-tap 1.35s ease-in-out infinite}
@keyframes awp-landingpage-tap{0%,100%{box-shadow:0 0 0 1px rgba(82,225,213,.1),0 7px 22px rgba(46,80,174,.26)}50%{box-shadow:0 0 0 3px rgba(125,235,215,.38),0 10px 28px rgba(126,91,235,.48);transform:translateY(var(--awp-item-y,0)) scale(calc(var(--awp-item-scale,.78) * 1.045))}}
.awp-watch-item img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 3px 12px rgba(0,0,0,.34)}
.awp-watch-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.awp-watch-notification{
  position:absolute;
  z-index:30;
  inset:0;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  justify-items:center;
  gap:8px;
  padding:20px 14px;
  border-radius:inherit;
  color:#fff;
  background:radial-gradient(circle at 50% 18%,rgba(42,62,89,.99),rgba(5,8,14,.997) 72%);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.96);
  transition:.45s opacity,.52s transform var(--awp-watch-ease),.38s filter;
  text-align:center
}
.awp-watch-nav.is-awake:not(.is-ready) .awp-watch-notification{opacity:1;transform:none}
.awp-watch-nav.is-ready .awp-watch-notification{filter:blur(5px);transform:translateY(-34%) scale(.82)}
.awp-watch-notification-check{display:grid;width:48px;height:31px;place-items:center;border:1px solid rgba(143,233,255,.75);border-radius:16px;color:#eaffff;background:linear-gradient(110deg,rgba(38,98,177,.72),rgba(80,210,196,.62));box-shadow:0 0 0 5px rgba(77,198,225,.1),0 10px 24px rgba(21,128,170,.28);font:900 1.28rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.awp-watch-notification small{display:block;color:#81e9d2;font:800 .39rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}
.awp-watch-notification strong{max-width:132px;color:#f4f7fb;font:740 .7rem/1.27 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.awp-watch-task-toast small{display:block;color:#657181;font:800 .35rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.awp-watch-task-toast strong{display:block;margin-top:2px;overflow:visible;color:#10141b;font:740 .55rem/1.12 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:normal}
.awp-watch-notification strong{animation:awp-message-enter .8s var(--awp-watch-ease) both}
@keyframes awp-message-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.awp-watch-nav.is-booting .awp-watch-list-viewport,.awp-watch-nav.is-booting .awp-watch-notification{display:none}

.awp-watch-task-toast{
  position:absolute;
  z-index:29;
  top:0;
  right:0;
  left:0;
  display:block;
  height:22%;
  min-height:42px;
  padding:0;
  overflow:hidden;
  border:0;
  border-bottom:1px solid rgba(188,201,216,.8);
  border-radius:var(--awp-watch-radius) var(--awp-watch-radius) 12px 12px;
  color:#10141b;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(239,244,249,.78));
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  backdrop-filter:blur(9px) saturate(1.15);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  transform:translateY(-125%);
  transition:.48s opacity,.58s transform var(--awp-watch-ease);
  text-align:left;
  cursor:pointer
}
.awp-watch-task-toast.is-visible{opacity:1;pointer-events:auto;transform:none}
.awp-watch-task-open{display:block;width:100%;height:100%;padding:6px 28px 5px 10px;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}
.awp-watch-task-toast span{display:none;margin-top:7px;color:#126a58;font:800 .49rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace}
.awp-watch-task-close{position:absolute;z-index:2;top:7px;right:7px;display:grid;width:18px;height:18px;place-items:center;padding:0;border:0;border-radius:50%;color:#4d5866;background:rgba(87,101,118,.13);font:700 .72rem/1 sans-serif;cursor:pointer}
.awp-watch-task-close:hover{color:#111820;background:rgba(87,101,118,.25)}
.awp-watch-task-toast.is-expanded{height:54%;min-height:92px}
.awp-watch-task-toast.is-expanded .awp-watch-task-open{padding:14px 25px 12px 12px}
.awp-watch-task-toast.is-expanded strong{font-size:.68rem;line-height:1.28}
.awp-watch-task-toast.is-expanded span{display:block}
.awp-watch-task-badge{
  position:absolute;
  z-index:28;
  top:7px;
  left:7px;
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  padding:0;
  border:2px solid #0d1724;
  border-radius:50%;
  color:#fff;
  background:#e43245;
  box-shadow:0 4px 12px rgba(228,50,69,.42);
  opacity:0;
  pointer-events:none;
  transform:scale(.5);
  transition:.28s opacity,.36s transform var(--awp-watch-ease);
  cursor:pointer
}
.awp-watch-task-badge.is-visible{opacity:1;pointer-events:auto;transform:scale(1)}
.awp-watch-task-badge span{font:800 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}

@media(max-width:1320px){
  :root{--awp-watch-width:154px;--awp-watch-height:180px;--awp-watch-right:0}
  .awp-watch-item{grid-template-columns:31px minmax(0,1fr);font-size:.58rem}
  .awp-watch-item img{width:31px;height:31px}
}
@media(max-width:700px){
  :root{--awp-watch-width:134px;--awp-watch-height:158px;--awp-watch-radius:27px;--awp-watch-item-height:34px}
  .awp-watch-nav{transform:translate3d(8%,-50%,0)}
  .awp-watch-body{padding:3px;border-radius:32px}
  .awp-watch-item{left:4px;width:calc(100% - 8px);grid-template-columns:27px minmax(0,1fr);gap:4px;padding-right:3px;font-size:.5rem}
  .awp-watch-item img{width:27px;height:27px}
  .awp-watch-notification{gap:6px;padding:14px 10px}
  .awp-watch-notification-check{width:28px;height:28px;font-size:.85rem}
  .awp-watch-notification strong{max-width:112px;font-size:.59rem}
  .awp-watch-task-toast{height:24%;min-height:38px}
  .awp-watch-task-open{padding:5px 24px 4px 8px}
  .awp-watch-task-toast strong{font-size:.49rem}
}
@media(prefers-reduced-motion:reduce){
  .awp-watch-nav,.awp-watch-list-viewport,.awp-watch-notification,.awp-watch-task-toast{transition-duration:.01ms!important}
  .awp-watch-nav.is-hinting .awp-watch-crown,.awp-watch-notification strong{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Erster Watch-Hinweis: Krone und Bestätigung sind sofort als Interaktion erkennbar. */
.awp-watch-nav.is-hinting .awp-watch-notification{
  animation:awp-onboarding-attention 2.4s ease-in-out infinite
}
.awp-watch-nav.is-hinting .awp-watch-body{
  animation:awp-watch-haptic 15s linear 1 both
}
.awp-watch-nav.is-hinting .awp-watch-notification-check{
  animation:awp-onboarding-arrow 15s ease-in-out 1 both;
  box-shadow:0 0 0 5px rgba(77,198,225,.12),0 0 28px rgba(87,223,255,.62),0 10px 24px rgba(20,135,178,.34)
}
.awp-watch-nav.is-hinting .awp-watch-notification small{
  animation:awp-onboarding-label 1.8s ease-in-out infinite
}
.awp-watch-nav.is-hinting .awp-watch-notification strong{
  text-shadow:0 0 18px rgba(255,255,255,.28)
}
@keyframes awp-onboarding-attention{
  0%,100%{background:radial-gradient(circle at 50% 18%,rgba(42,62,89,.99),rgba(5,8,14,.997) 72%)}
  50%{background:radial-gradient(circle at 50% 18%,rgba(36,91,90,.99),rgba(5,8,14,.997) 72%)}
}
@keyframes awp-onboarding-arrow{
  0%,7%,14%,21%,28%,35%,42%,49%,56%,63%,70%,77%,84%,91%,100%{transform:translateX(0) scale(1)}
  3.5%,17.5%,31.5%,45.5%,59.5%,73.5%,87.5%{transform:translateX(-10px) scale(1.13);box-shadow:0 0 0 10px rgba(87,223,255,0),0 0 36px rgba(87,223,255,.86),0 12px 28px rgba(20,135,178,.4)}
}
@keyframes awp-watch-haptic{
  0%,3.1%,4%,17.1%,18%,31.1%,32%,45.1%,46%,59.1%,60%,73.1%,74%,87.1%,88%,100%{transform:translate3d(0,0,0)}
  3.25%,17.25%,31.25%,45.25%,59.25%,73.25%,87.25%{transform:translate3d(-2px,1px,0)}
  3.4%,17.4%,31.4%,45.4%,59.4%,73.4%,87.4%{transform:translate3d(2px,-1px,0)}
  3.55%,17.55%,31.55%,45.55%,59.55%,73.55%,87.55%{transform:translate3d(-1px,0,0)}
}
@keyframes awp-onboarding-label{
  0%,100%{opacity:.65;letter-spacing:.09em}
  50%{opacity:1;letter-spacing:.14em}
}
@media(prefers-reduced-motion:reduce){
  .awp-watch-nav.is-hinting .awp-watch-notification,
  .awp-watch-nav.is-hinting .awp-watch-notification-check,
  .awp-watch-nav.is-hinting .awp-watch-notification small,
  .awp-watch-nav.is-hinting .awp-watch-body{animation:none}
}