/* ARIA – Alltags-Widgets: animierte Wettersymbole, Bildschirmeffekte, Timer, Weltuhr. */

/* --- Wettersymbole (alle Maße in em → skaliert mit font-size) ------------- */
.wx { position: relative; flex: none; width: 1em; height: 1em; font-size: 96px; }
.wx--sm { font-size: 30px; }
.wx i, .wx span { position: absolute; display: block; }

.wx-sun { left: .18em; top: .1em; width: .62em; height: .62em; }
.wx-core {
  inset: .12em; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7e0, #f7d58a 45%, #eaa66d);
  box-shadow: 0 0 .22em rgba(247, 213, 138, .7);
  animation: wx-pulse 3.2s ease-in-out infinite;
}
.wx-rays {
  inset: -.02em; border-radius: 50%;
  background: repeating-conic-gradient(rgba(247, 213, 138, .85) 0 7deg, transparent 7deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent .2em, #000 .21em, #000 .31em, transparent .32em);
  mask: radial-gradient(circle, transparent .2em, #000 .21em, #000 .31em, transparent .32em);
  animation: wx-spin 16s linear infinite;
}
.wx--partly .wx-sun { left: .36em; top: .02em; scale: .78; }
.wx--partly .wx-moon { left: .42em; top: .06em; scale: .8; }

.wx-moon {
  left: .24em; top: .14em; width: .46em; height: .46em; border-radius: 50%;
  box-shadow: inset -.13em -.03em 0 0 #f3e3c3; rotate: -18deg;
  filter: drop-shadow(0 0 .07em rgba(243, 227, 195, .55));
  animation: wx-float 6s ease-in-out infinite;
}
.wx-star { width: .035em; height: .035em; border-radius: 50%; background: #fff; animation: wx-twinkle 2.6s ease-in-out infinite; }
.wx-star.n1 { left: .76em; top: .16em; }
.wx-star.n2 { left: .12em; top: .6em; animation-delay: -.9s; }
.wx-star.n3 { left: .8em; top: .58em; animation-delay: -1.7s; }

.wx-cloud {
  width: .62em; height: .22em; border-radius: .2em;
  background: linear-gradient(180deg, #f6f1ec, #c9bfd3);
  box-shadow: 0 .04em .12em rgba(0, 0, 0, .28);
}
.wx-cloud::before, .wx-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.wx-cloud::before { width: .26em; height: .26em; left: .08em; top: -.12em; }
.wx-cloud::after { width: .34em; height: .34em; right: .07em; top: -.18em; }
.wx-cloud.c-front { left: .2em; top: .5em; animation: wx-drift 7s ease-in-out infinite alternate; }
.wx-cloud.c-back { left: .04em; top: .34em; scale: .82; opacity: .65; animation: wx-drift 9s ease-in-out infinite alternate-reverse; }
.wx--partly .wx-cloud.c-front { left: .1em; top: .52em; }
.wx--rain .wx-cloud.c-front, .wx--drizzle .wx-cloud.c-front, .wx--snow .wx-cloud.c-front,
.wx--thunder .wx-cloud.c-front { top: .38em; left: .19em; }
.wx--rain .wx-cloud.c-back, .wx--thunder .wx-cloud.c-back { top: .24em; }
.wx--thunder .wx-cloud { background: linear-gradient(180deg, #bdb3c9, #6f6680); }

.wx-drop {
  top: .66em; width: .026em; height: .13em; border-radius: .02em;
  background: linear-gradient(transparent, #9fc3ff); animation: wx-fall 1s linear infinite;
}
.wx-drop.n1 { left: .32em; } .wx-drop.n2 { left: .46em; animation-delay: -.35s; } .wx-drop.n3 { left: .6em; animation-delay: -.7s; }
.wx-drop.n4 { left: .39em; animation-delay: -.55s; } .wx-drop.n5 { left: .68em; animation-delay: -.15s; }
.wx-flake { top: .66em; width: .055em; height: .055em; border-radius: 50%; background: #fff; animation: wx-snow 2.6s linear infinite; }
.wx-flake.n1 { left: .3em; } .wx-flake.n2 { left: .45em; animation-delay: -.9s; } .wx-flake.n3 { left: .6em; animation-delay: -1.6s; }
.wx-flake.n4 { left: .37em; animation-delay: -2.1s; } .wx-flake.n5 { left: .7em; animation-delay: -.4s; }
.wx-bolt {
  left: .43em; top: .58em; width: .16em; height: .3em; background: #f7d58a;
  clip-path: polygon(45% 0, 100% 0, 62% 42%, 95% 42%, 22% 100%, 40% 55%, 5% 55%);
  filter: drop-shadow(0 0 .06em #f7d58a); animation: wx-flash 3.4s infinite;
}
.wx-fog { left: .12em; height: .04em; width: .72em; border-radius: .04em; background: rgba(243, 239, 233, .6); animation: wx-drift 5s ease-in-out infinite alternate; }
.wx-fog.n1 { top: .62em; } .wx-fog.n2 { top: .72em; left: .22em; width: .56em; animation-delay: -1.5s; } .wx-fog.n3 { top: .82em; width: .62em; animation-delay: -3s; }

@keyframes wx-spin { to { rotate: 360deg; } }
@keyframes wx-pulse { 50% { scale: 1.06; box-shadow: 0 0 .34em rgba(247, 213, 138, .9); } }
@keyframes wx-drift { from { translate: -.04em 0; } to { translate: .05em 0; } }
@keyframes wx-fall { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: -.03em .24em; opacity: 0; } }
@keyframes wx-snow { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 50% { translate: .03em .11em; } 100% { translate: -.02em .25em; opacity: 0; } }
@keyframes wx-twinkle { 50% { opacity: .2; scale: .6; } }
@keyframes wx-float { 50% { translate: 0 -.03em; } }
@keyframes wx-flash { 0%, 84%, 100% { opacity: .2; } 86%, 91% { opacity: 1; } 88% { opacity: .35; } }

/* --- Wetterkarte ------------------------------------------------------------ */
.card[data-kind="weather"] { width: 100%; }
.wcard-now { display: flex; align-items: center; gap: 16px; }
.wcard-temp {
  margin: 0; font: 500 52px/1 var(--font-display);
  background: linear-gradient(120deg, var(--champagne), var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wcard-desc { margin: 4px 0 2px; color: var(--text); font-size: 14px; }
.wcard-meta { margin: 0; color: var(--muted); font-size: 12px; }
.wcard-today { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 12px; font-size: 12.5px; color: var(--muted); }
.wcard-hours { list-style: none; margin: 0 0 10px; padding: 10px 6px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; border-radius: 14px; background: rgba(255, 255, 255, .035); }
.wcard-hours li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.wcard-hours .h-time { color: var(--faint); font-size: 11px; }
.wcard-hours .h-rain { color: #9fc3ff; font-size: 10.5px; }
.wcard-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wcard-days li { display: grid; grid-template-columns: 44px 30px 30px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; padding: 2px 4px; }
.wcard-days .d-label { color: var(--muted); }
.wcard-days .d-min { color: var(--faint); text-align: right; }
.d-bar { position: relative; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.d-bar i { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #9b7bff, var(--rose), var(--champagne)); }

/* --- Bildschirmeffekte -------------------------------------------------------- */
.fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
.fx.is-on { opacity: 1; }
.fx i { position: absolute; display: block; }
.fx-drop { top: -14vh; width: 1px; height: 12vh; background: linear-gradient(transparent, rgba(159, 195, 255, .6)); animation: fx-rain linear infinite; }
.fx-flake { top: -4vh; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(.6px); animation: fx-snow linear infinite; }
.fx-flash { inset: 0; background: rgba(225, 215, 255, .5); opacity: 0; animation: fx-flash 7s infinite; }
.fx-glow {
  top: -32vmax; right: -24vmax; width: 84vmax; height: 84vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 213, 138, .26), rgba(227, 169, 147, .08) 40%, transparent 62%);
  animation: fx-glow 7s ease-in-out infinite;
}
.fx-star { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: fx-twinkle 3s ease-in-out infinite; }
.fx-haze { left: -20%; width: 140%; height: 32vh; background: radial-gradient(ellipse at center, rgba(220, 215, 232, .12), transparent 70%); animation: fx-haze 20s ease-in-out infinite alternate; }
@keyframes fx-rain { to { transform: translate3d(-8vh, 125vh, 0); } }
@keyframes fx-snow { 50% { transform: translate3d(3vw, 55vh, 0); } 100% { transform: translate3d(-2vw, 112vh, 0); } }
@keyframes fx-flash { 0%, 89%, 100% { opacity: 0; } 90% { opacity: .9; } 91.5% { opacity: .1; } 93% { opacity: .6; } 95% { opacity: 0; } }
@keyframes fx-glow { 50% { transform: scale(1.08); opacity: .75; } }
@keyframes fx-twinkle { 50% { opacity: .15; } }
@keyframes fx-haze { to { transform: translateX(12%); } }

/* --- Timer -------------------------------------------------------------------- */
.card[data-kind="timer"] .card-timer { display: none; }
.tcard { position: relative; display: grid; place-items: center; padding: 4px 0 6px; }
.tring { width: 168px; height: 168px; rotate: -90deg; }
.tring-bg { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 6; }
.tring-fg { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 6px rgba(227, 169, 147, .45)); }
.tcard-time { position: absolute; font: 500 38px/1 var(--font-display); color: var(--champagne); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tcard.is-done .tring { animation: t-done 1.1s ease-in-out infinite; }
.tcard.is-done .tcard-time { color: var(--rose); }
@keyframes t-done { 50% { scale: 1.06; filter: drop-shadow(0 0 18px rgba(227, 169, 147, .8)); } }

/* --- Weltuhr ------------------------------------------------------------------ */
.ccard { display: flex; align-items: center; gap: 18px; }
.cface { width: 112px; height: 112px; flex: none; }
.cface-rim { fill: rgba(0, 0, 0, .25); stroke: rgba(243, 227, 195, .25); stroke-width: 1.2; }
.ctick { stroke: rgba(243, 227, 195, .25); stroke-width: .8; }
.ctick--long { stroke: rgba(243, 227, 195, .7); stroke-width: 1.6; }
.chand { stroke-linecap: round; }
.chand--h, .chand--m { stroke: var(--champagne); }
.chand--s { stroke: var(--rose); transition: transform .2s cubic-bezier(.4, 2.2, .6, 1); }
.ccenter { fill: var(--rose); }
.ccard-time { font: 500 40px/1 var(--font-display); color: var(--champagne); font-variant-numeric: tabular-nums; }
.ccard-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
  .wx { font-size: 72px; }
  .wx--sm { font-size: 26px; }
  .wcard-temp { font-size: 42px; }
  .wcard-days li:nth-child(n+4) { display: none; }
  .tring { width: 132px; height: 132px; }
}