/* Gemeinsame Bewegung für alle Seiten. Bei "reduzierte Bewegung" (Systemeinstellung) ist alles statisch. */

/* Einblenden: Karten/Kacheln gleiten gestaffelt von unten ein (Reihenfolge über --i) */
.reveal {
    opacity: 0;
    transform: translateY(16px) scale(.985);
    animation: reveal .65s cubic-bezier(.2, .75, .25, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* Karten und Kacheln reagieren auf den Mauszeiger */
.card, .tile { transition: transform .25s cubic-bezier(.2, .75, .25, 1), box-shadow .25s ease, border-color .25s ease; }
.card:hover, .tile:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(33, 40, 63, .12); }
.reveal:hover { transform: translateY(-3px); }

/* Seitenkopf-Icon: sanftes Schweben */
.page-header-icon svg { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Logo in der Navigation */
.navbar-brand img { transition: transform .4s cubic-bezier(.2, .75, .25, 1); }
.navbar-brand:hover img { transform: scale(1.08) rotate(-2deg); }

/* Live-Punkt pulsiert */
.live-dot.on { animation: pulse-ring 2s ease-out infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(25, 135, 84, 0); } }

/* Wertänderung blitzt kurz auf */
.value-flash { animation: value-flash .9s ease-out; }
@keyframes value-flash { 0% { text-shadow: 0 0 0 transparent; color: var(--c-pv, #eda100); } 100% { text-shadow: none; } }

/* Icon-Chip in Kartenköpfen */
.icon-chip { display: inline-flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: .6rem; margin-right: .5rem; color: #fff; background: var(--chip, #0061f2); flex: none; }
.icon-chip svg { width: 1rem; height: 1rem; }
.card:hover .icon-chip svg { animation: icon-pop .5s ease; }
@keyframes icon-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1); } }

/* ---------- Hero: animierte Szene (Sonne, Wolken, Panels, Stromleitung) ---------- */
.hero { position: relative; overflow: hidden; border-radius: .75rem; margin-bottom: 1.25rem; color: #fff;
    background: linear-gradient(135deg, var(--sky-a, #0b2a5b) 0%, var(--sky-b, #1b5fc1) 60%, var(--sky-c, #4aa3ff) 100%); min-height: 150px; transition: background 1s; }
.hero .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .hero-body { position: relative; z-index: 2; padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: space-between; min-height: 150px; }
.hero .hero-title { color: #fff; font-size: 1.35rem; font-weight: 600; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.hero .hero-sub { opacity: .85; font-size: .9rem; }
.hero .hero-stats { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.hero .hero-stat { text-align: left; background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px); border-radius: .6rem; padding: .5rem .9rem; min-width: 7.5rem; }
.hero .hero-stat .n { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero .hero-stat .n small { font-size: .8rem; font-weight: 400; opacity: .85; }
.hero .hero-stat .l { font-size: .72rem; opacity: .8; display: flex; align-items: center; gap: .3rem; }
.hero .hero-stat .l svg { width: 12px; height: 12px; }
.hero .sun-rays { transform-origin: center; transform-box: fill-box; animation: spin 40s linear infinite; }
.hero .sun-core { transform-origin: center; transform-box: fill-box; animation: sun-pulse 3.5s ease-in-out infinite; }
.hero .cloud { animation: drift linear infinite; }
.hero .cloud.c1 { animation-duration: 55s; } .hero .cloud.c2 { animation-duration: 80s; animation-delay: -30s; } .hero .cloud.c3 { animation-duration: 65s; animation-delay: -12s; }
.hero .star { animation: twinkle 3s ease-in-out infinite; }
.hero .panel-glint { animation: glint 4.5s ease-in-out infinite; }
.hero .wire { stroke-dasharray: 3 10; animation: wire-flow 1.2s linear infinite; }
.hero .night-only, .hero .day-only { transition: opacity 1s; }
.hero.is-night .day-only { opacity: 0; } .hero:not(.is-night) .night-only { opacity: 0; }
.hero.is-night { --sky-a: #060d1f; --sky-b: #10204a; --sky-c: #1d3a78; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sun-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(1000px); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes glint { 0%, 70%, 100% { opacity: 0; } 82% { opacity: .7; } }
@keyframes wire-flow { to { stroke-dashoffset: -26; } }

/* Anmeldeseite: schwebendes Logo und Karte gleitet ein */
#layoutAuthentication .auth-logo { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
body.bg-primary { background-size: 200% 200%; background-image: linear-gradient(120deg, #0061f2, #0b3d99 45%, #0061f2); animation: bg-shift 18s ease-in-out infinite; }
@keyframes bg-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Balken-/Heatmap-Zellen */
.heat-cell { transition: transform .15s ease, outline-color .15s; }
.heat-cell:hover { transform: scale(1.25); z-index: 3; position: relative; outline: 2px solid var(--ink, #1d2433); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; animation: none; }
    .card:hover, .tile:hover, .reveal:hover { transform: none; }
    .page-header-icon svg, .navbar-brand img, .live-dot.on, .value-flash, #layoutAuthentication .auth-logo, body.bg-primary,
    .hero .sun-rays, .hero .sun-core, .hero .cloud, .hero .star, .hero .panel-glint, .hero .wire { animation: none !important; }
}