/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ① CLOCK – kompakt
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.widget-clock {
    grid-column:1/-1;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    background:linear-gradient(135deg, rgba(16,28,72,0.75) 0%, rgba(10,50,44,0.6) 100%);
    border-color:rgba(94,234,212,0.12);
    position:relative; overflow:hidden;
}
.widget-clock::after {
    content:''; position:absolute;
    width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle, rgba(94,234,212,0.06) 0%, transparent 70%);
    right:-60px; top:-60px; pointer-events:none;
}
.clock-time {
    font-family:'Courier New', monospace;
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    font-weight:400; letter-spacing:-0.03em;
    color:var(--text); line-height:1;
}
.clock-time .colon {
    color:var(--teal-1);
    animation:colon-blink 1s step-end infinite;
    display:inline-block; margin:0 1px;
}
@keyframes colon-blink {
    0%,100% { opacity:1; }
    50%      { opacity:0.25; }
}
.clock-date { font-size:0.82rem; color:var(--text-2); font-weight:300; margin-top:4px; }
.clock-right { text-align:right; }
.clock-loc {
    font-size:0.62rem; letter-spacing:0.11em; text-transform:uppercase;
    color:var(--teal-2); font-weight:600; margin-bottom:3px;
    display:flex; align-items:center; gap:4px; justify-content:flex-end;
}
.clock-loc .lucide { width:10px; height:10px; }
.clock-greet { font-size:1.15rem; font-weight:300; color:var(--text); line-height:1.3; }
.clock-greet strong { font-weight:600; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ② WEATHER  –  jetzt klickbar mit dynamischem BG
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.widget-weather {
    grid-column:1;
    cursor:pointer;
    background:
        linear-gradient(135deg, var(--w-bg-1) 0%, var(--w-bg-2) 100%),
        var(--glass);
    transition: background .8s ease, transform .25s ease, box-shadow .25s ease;
}
.widget-weather:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 50px rgba(0,0,0,0.6), 0 0 30px var(--w-accent);
}
.widget-weather::after {
    content:''; position:absolute;
    width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, var(--w-accent) 0%, transparent 70%);
    right:-100px; top:-100px; pointer-events:none;
    transition: background .8s ease;
}
/* Klick-Hint */
.w-expand-hint {
    position:absolute; top:14px; right:14px;
    font-size:0.58rem; color:var(--text-3); letter-spacing:0.1em;
    text-transform:uppercase; display:flex; align-items:center; gap:4px;
    opacity:0; transition:opacity .25s; z-index:2;
}
.widget-weather:hover .w-expand-hint { opacity:0.7; }
.w-expand-hint .lucide { width:10px; height:10px; }

.w-now { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; position:relative; z-index:1; }
.w-icon-big {
    width:62px; height:62px;
    color:var(--teal-2);
    flex-shrink:0;
    filter:drop-shadow(0 0 12px rgba(94,234,212,0.35));
    animation:icon-float 5s ease-in-out infinite;
}
.w-icon-big .lucide { width:62px; height:62px; }
@keyframes icon-float {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50%      { transform:translateY(-3px) rotate(-2deg); }
}

.w-temp-big {
    font-size:3rem; font-weight:200;
    letter-spacing:-0.05em; line-height:1;
    color:var(--text);
    position:relative;
    background:linear-gradient(180deg, #fff 0%, rgba(232,234,242,0.7) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.w-temp-big sup { font-size:1rem; color:var(--text-2); vertical-align:super; -webkit-text-fill-color:var(--text-2); }

.w-temp-glow {
    position:absolute; inset:-22px;
    border-radius:50%;
    opacity:0.22;
    pointer-events:none;
    transition:background .8s ease;
    z-index:-1;
}

.w-desc { font-size:0.85rem; color:var(--text-2); margin-top:4px; font-weight:400; }
.w-feels { font-size:0.7rem; color:var(--text-3); margin-top:2px; }

/* Sonnen-Bogen */
.sun-arc-wrap {
    margin-top:10px; position:relative; height:36px;
}
.sun-arc-svg { width:100%; height:100%; overflow:visible; }
.sun-arc-track { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:1.5; }
.sun-arc-active { fill:none; stroke:url(#sun-grad); stroke-width:2; stroke-linecap:round; }
.sun-dot { fill:var(--accent-amber); filter:drop-shadow(0 0 6px rgba(251,191,36,0.65)); }
.sun-arc-times {
    display:flex; justify-content:space-between; font-size:0.55rem;
    color:var(--text-3); letter-spacing:0.08em; text-transform:uppercase;
    margin-top:-2px;
}
.sun-arc-times span:first-child { color:var(--accent-amber); opacity:0.7; }
.sun-arc-times span:last-child  { color:var(--accent-rose); opacity:0.7; }

.w-stats {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:7px; margin:14px 0;
}
.w-stat {
    background:var(--glass2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:9px 10px; text-align:center;
    transition: background .2s, border-color .2s, transform .2s;
}
.w-stat:hover { background:var(--glass-hi); border-color:var(--border-h); transform:translateY(-1px); }
.w-stat .sv { font-size:0.92rem; font-weight:600; color:var(--text); display:block; }
.w-stat .sl { font-size:0.58rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }

/* 3-day forecast */
.forecast { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.fc-day {
    background:var(--glass2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 7px; text-align:center;
    transition:background .2s, border-color .2s, transform .2s;
}
.fc-day:hover { background:var(--glass-hi); border-color:var(--border-h); transform:translateY(-1px); }
.fc-day .dn { font-size:0.6rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.fc-day .fc-icon { width:28px; height:28px; color:var(--teal-2); margin:0 auto 6px; display:block; }
.fc-day .fc-icon .lucide { width:28px; height:28px; }

.temp-range-wrap { margin:6px 2px 3px; }
.temp-range-labels { display:flex; justify-content:space-between; font-size:0.68rem; margin-bottom:3px; }
.temp-range-labels .hi { font-weight:600; color:var(--text); }
.temp-range-labels .lo { color:var(--text-3); }
.temp-range-bar {
    height:4px; border-radius:2px;
    background:linear-gradient(to right, #60a5fa, #fb923c);
}
.fc-day .dr { font-size:0.6rem; color:var(--accent-blue); margin-top:4px; min-height:.9em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ③ ECOWITT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.widget-ecowitt { grid-column:2; grid-row:2/4; }

.live-dot {
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:#4ade80; flex-shrink:0;
    animation:live-pulse 2.2s ease-in-out infinite;
    box-shadow:0 0 6px rgba(74,222,128,0.6);
}
@keyframes live-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.45; transform:scale(0.75); }
}

.eco-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.eco-tile {
    background:var(--glass2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:11px 10px;
    transition:background .2s, border-color .2s;
    position:relative; overflow:hidden;
}
.eco-tile:hover { background:var(--glass-hi); border-color:var(--border-h); }
.eco-tile.wide { grid-column:1/-1; }

.eco-tile-icon {
    color:var(--teal-3); margin-bottom:5px;
    display:block;
}
.eco-tile-icon .lucide { width:14px; height:14px; }

.eco-val {
    font-size:2rem;
    font-weight:500; letter-spacing:-0.03em;
    color:var(--text); line-height:1;
}
.eco-val small { font-size:0.72rem; color:var(--text-2); font-weight:400; margin-left:2px; }
.eco-val .offline-val { font-size:0.78rem; color:var(--text-3); font-style:italic; }
.eco-lbl { font-size:0.58rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }

.wind-row { display:flex; align-items:center; gap:10px; }
.compass-svg { flex-shrink:0; }
.compass-needle-el { transition:transform .9s cubic-bezier(.34,1.56,.64,1); transform-origin:center; }

.rain-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.63rem; font-weight:600; padding:2px 7px;
    border-radius:999px; margin-top:5px;
}
.rain-badge.raining { background:rgba(96,165,250,0.16); color:var(--accent-blue); }
.rain-badge.dry     { background:rgba(94,234,212,0.1);  color:var(--teal-2); }

.rain-bars-wrap { display:flex; align-items:flex-end; gap:4px; height:48px; margin-top:6px; }
.rain-bar-col-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; height:100%; }
.rain-bar-inner { flex:1; display:flex; align-items:flex-end; width:100%; }
.rain-bar {
    width:100%; border-radius:3px 3px 0 0;
    background:linear-gradient(to top, var(--accent-blue), rgba(96,165,250,0.35));
    min-height:2px; transition:height .6s ease;
}
.rain-bar.zero { background:rgba(255,255,255,0.06); min-height:3px; }
.rain-bar.today { background:linear-gradient(to top, var(--teal-2), rgba(94,234,212,0.35)); }
.rain-val-lbl { font-size:0.5rem; color:var(--accent-blue); min-height:.75em; }
.rain-day-lbl { font-size:0.52rem; color:var(--text-3); white-space:nowrap; }
.rain-day-lbl.today { color:var(--teal-2); font-weight:600; }

.eco-status { font-size:0.63rem; color:var(--text-3); margin-top:10px; display:flex; align-items:center; gap:5px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ④ DIRECT LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.widget-links { grid-column:1; }
.links-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.lcard {
    background:var(--glass2); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:13px 8px 11px;
    text-align:center; text-decoration:none;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
}
.lcard:hover {
    background:rgba(94,234,212,0.06);
    border-color:rgba(94,234,212,0.3);
    box-shadow:0 0 20px rgba(94,234,212,0.12), var(--shadow);
    transform:translateY(-4px) scale(1.02);
}
.lcard::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
    background:var(--lc, var(--teal-2));
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
}
.lcard:hover::after { transform:scaleX(1); }

.licon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(94,234,212,0.1);
    transition:transform .25s ease;
}
.lcard:hover .licon { transform:scale(1.1) rotate(-4deg); }
.licon .lucide { width:18px; height:18px; color:var(--lc, var(--teal-2)); }

.lname { font-size:0.73rem; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.lsub  { font-size:0.58rem; color:var(--text-3); margin-top:-4px; font-weight:300; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS TICKER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#ticker {
    position:fixed; bottom:0; left:0; right:0; height:48px;
    background:rgba(7,8,12,0.92);
    backdrop-filter:blur(28px);
    border-top:1px solid rgba(255,255,255,0.06);
    display:flex; align-items:center; overflow:hidden; z-index:1100;
}
.tlabel {
    background:var(--teal-3);
    color:#03201c;
    padding:0 16px; height:100%;
    display:flex; align-items:center;
    font-weight:700; font-size:0.7rem; letter-spacing:0.13em; text-transform:uppercase;
    flex-shrink:0; gap:6px; white-space:nowrap;
    box-shadow:4px 0 12px rgba(0,0,0,0.5);
    z-index:2; position:relative;
}
.tlabel .lucide { width:13px; height:13px; }
.tcontent {
    flex:1; overflow:hidden; white-space:nowrap;
    mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    padding-left:4px;
}
.twrap { display:inline-flex; animation:ticker-scroll 130s linear infinite; }
@keyframes ticker-scroll { from{transform:translateX(100vw)} to{transform:translateX(-100%)} }
/* Pause beim Hover über den Ticker */
#ticker:hover .twrap { animation-play-state:paused; }
.titem { display:inline-flex; align-items:center; gap:9px; padding:0 30px; color:rgba(255,255,255,0.7); font-size:0.9rem; }
.tdot { width:4px; height:4px; border-radius:50%; background:var(--teal-2); flex-shrink:0; }
.titem a { color:inherit; text-decoration:none; transition:color .2s; }
.titem a:hover { color:var(--teal-1); }