/* ================================================================
   FALLBACK DESIGN TOKENS
   These are overridden by Ecowitt_Design::output_css() in wp_head
   (priority 100, after this stylesheet). Do not remove.
================================================================ */
:root {
  --ecw-bg:            #0d1117;
  --ecw-surface:       #161b22;
  --ecw-surface2:      #1c2333;
  --ecw-border:        #30363d;
  --ecw-text-hi:       #f0f6fc;
  --ecw-text-mid:      #8b949e;
  --ecw-text-lo:       #484f58;
  --ecw-blue:          #38bdf8;
  --ecw-orange:        #f97316;
  --ecw-purple:        #a78bfa;
  --ecw-green:         #4ade80;
  --ecw-lcd-bg:        #060d07;
  --ecw-lcd-on:        #39ff82;
  --ecw-lcd-glow:      rgba(57,255,130,.3);
  --ecw-lcd-font:      'Share Tech Mono', monospace;
  --ecw-font:          'Barlow', sans-serif;
  --ecw-gauge-track:   #21282f;
  --ecw-gauge-lo:      #38bdf8;
  --ecw-gauge-mid:     #facc15;
  --ecw-gauge-hi:      #f43f5e;
  --ecw-needle:        #f0f6fc;
  --ecw-tick:          #3d4f63;
  --ecw-wind-arrow:    #f97316;
  --ecw-lcd-size:      38px;
  --ecw-widget-radius: 14px;
  --ecw-widget-pad:    22px;
}

/* ================================================================
   Ecowitt Wetterstation v2.0
   Design tokens set via Ecowitt_Design::output_css() in wp_head
   This file contains ONLY layout/component styles, no :root{}
   ================================================================ */

/* ---------------------------------------------------------------- Base */
.ecowitt-widget, .ecowitt-widget * { box-sizing:border-box; }
.ecowitt-widget {
  background: var(--ecw-surface);
  border: 1px solid var(--ecw-border);
  border-radius: var(--ecw-widget-radius, 14px);
  padding: var(--ecw-widget-pad, 22px);
  color: var(--ecw-text-hi);
  font-family: var(--ecw-font, 'Barlow', sans-serif);
}
.ecowitt-error {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px; padding: 14px 18px; color: #fca5a5;
  font-size: 14px; font-family: var(--ecw-font, sans-serif);
}

/* ---------------------------------------------------------------- Dashboard */
.ecowitt-dashboard { display:flex; flex-direction:column; gap:18px; }
.ecw-dash-section-title {
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ecw-text-lo); padding:8px 2px; border-bottom:1px solid var(--ecw-border);
  font-family: var(--ecw-font, sans-serif);
}
.ecw-gauge-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ecw-chart-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:900px){ .ecw-gauge-row{grid-template-columns:repeat(2,1fr)} .ecw-chart-row{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- Current card */
.ecowitt-current-card {
  background: linear-gradient(160deg, var(--ecw-bg,#0d1117) 0%, var(--ecw-surface,#161b22) 100%);
  border-color: color-mix(in srgb, var(--ecw-border,#30363d) 60%, var(--ecw-blue,#38bdf8) 40%);
}
.ecw-card-header {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--ecw-border);
}
.ecw-header-left  { display:flex; align-items:baseline; gap:10px; flex:1; min-width:0; }
.ecw-station-name { font-size:20px; font-weight:800; color:var(--ecw-blue); letter-spacing:.02em; }
.ecw-location     { font-size:13px; color:var(--ecw-text-mid); }
.ecw-timestamp    { font-size:11px; color:var(--ecw-text-lo); white-space:nowrap; }

.ecw-lcd-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px;
}
@media(max-width:720px){ .ecw-lcd-row{grid-template-columns:repeat(2,1fr)} }

.ecw-secondary-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media(max-width:720px){ .ecw-secondary-row{grid-template-columns:1fr 1fr} }
@media(max-width:440px){ .ecw-secondary-row{grid-template-columns:1fr} }

.ecw-sec-card {
  background: var(--ecw-surface2);
  border: 1px solid var(--ecw-border);
  border-radius: calc(var(--ecw-widget-radius,14px) - 4px);
  padding: 16px;
}
.ecw-sec-label {
  font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ecw-text-lo); margin-bottom:12px;
  font-family: var(--ecw-font, sans-serif);
}
.ecw-widget-title {
  font-size:14px; font-weight:700; color:var(--ecw-text-hi);
  margin-bottom:16px; letter-spacing:.02em;
}

/* ================================================================
   LCD TILE
================================================================ */
.ecw-lcd-tile {
  background: var(--ecw-lcd-bg, #060d07);
  border: 1px solid color-mix(in srgb, var(--ecw-lcd-on,#39ff82) 15%, transparent);
  border-radius: calc(var(--ecw-widget-radius,14px) - 4px);
  padding: 16px 18px 14px;
  position: relative; overflow: hidden;
  transition: box-shadow .3s;
}
.ecw-lcd-tile::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.055) 3px,rgba(0,0,0,.055) 4px);
}
.ecw-lcd-label {
  font-size:9px; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color: color-mix(in srgb, var(--ecw-lcd-on,#39ff82) 50%, transparent);
  margin-bottom:8px; position:relative;
  font-family: var(--ecw-font, sans-serif);
}
.ecw-lcd-display { display:flex; align-items:baseline; gap:5px; position:relative; }
.ecw-lcd-value {
  font-family: var(--ecw-lcd-font, 'Share Tech Mono', monospace);
  font-size: var(--ecw-lcd-size, 38px);
  line-height: 1.1;
  color: var(--ecw-lcd-on, #39ff82);
  text-shadow: 0 0 14px var(--ecw-lcd-glow, rgba(57,255,130,.3));
  animation: lcd-flicker 12s infinite;
  transition: color .5s, text-shadow .5s;
}
.ecw-lcd-unit {
  font-family: var(--ecw-lcd-font, monospace);
  font-size: calc(var(--ecw-lcd-size,38px) * .36);
  color: color-mix(in srgb, var(--ecw-lcd-on,#39ff82) 50%, transparent);
  padding-bottom: 4px;
}
.ecw-lcd-bar { height:3px; background:rgba(255,255,255,.07); border-radius:2px; margin-top:12px; overflow:hidden; }
.ecw-lcd-bar-fill {
  height:100%; border-radius:2px;
  background: var(--ecw-lcd-on, #39ff82);
  box-shadow: 0 0 8px var(--ecw-lcd-glow, rgba(57,255,130,.3));
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}

/* Type colour overrides – use the accent vars so themes work */
.ecw-lcd-temp  { border-color: color-mix(in srgb, var(--ecw-orange,#f97316) 25%, transparent); }
.ecw-lcd-temp  .ecw-lcd-value { color:var(--ecw-orange,#f97316); text-shadow:0 0 14px color-mix(in srgb,var(--ecw-orange,#f97316) 55%,transparent); }
.ecw-lcd-temp  .ecw-lcd-label,.ecw-lcd-temp .ecw-lcd-unit { color:color-mix(in srgb,var(--ecw-orange) 50%,transparent); }
.ecw-lcd-temp  .ecw-lcd-bar-fill { background:var(--ecw-orange,#f97316); }

.ecw-lcd-hum   { border-color: color-mix(in srgb, var(--ecw-blue,#38bdf8) 25%, transparent); }
.ecw-lcd-hum   .ecw-lcd-value { color:var(--ecw-blue,#38bdf8); text-shadow:0 0 14px color-mix(in srgb,var(--ecw-blue,#38bdf8) 55%,transparent); }
.ecw-lcd-hum   .ecw-lcd-label,.ecw-lcd-hum .ecw-lcd-unit { color:color-mix(in srgb,var(--ecw-blue) 50%,transparent); }
.ecw-lcd-hum   .ecw-lcd-bar-fill { background:var(--ecw-blue,#38bdf8); }

.ecw-lcd-pres  { border-color: color-mix(in srgb, var(--ecw-purple,#a78bfa) 25%, transparent); }
.ecw-lcd-pres  .ecw-lcd-value { color:var(--ecw-purple,#a78bfa); text-shadow:0 0 14px color-mix(in srgb,var(--ecw-purple,#a78bfa) 55%,transparent); }
.ecw-lcd-pres  .ecw-lcd-label,.ecw-lcd-pres .ecw-lcd-unit { color:color-mix(in srgb,var(--ecw-purple) 50%,transparent); }
.ecw-lcd-pres  .ecw-lcd-bar-fill { background:var(--ecw-purple,#a78bfa); }

.ecw-lcd-dew   .ecw-lcd-value { color:var(--ecw-green,#4ade80); text-shadow:0 0 12px color-mix(in srgb,var(--ecw-green) 50%,transparent); }
.ecw-lcd-dew   .ecw-lcd-label,.ecw-lcd-dew .ecw-lcd-unit { color:color-mix(in srgb,var(--ecw-green) 50%,transparent); }
.ecw-lcd-temp-in .ecw-lcd-value { color:var(--ecw-orange,#f97316); opacity:.8; }
.ecw-lcd-hum-in  .ecw-lcd-value { color:var(--ecw-blue,#38bdf8); opacity:.8; }

@keyframes lcd-flicker {
  0%,90%,93%,96%,100%{opacity:1} 91.5%{opacity:.84} 94.5%{opacity:.91}
}

/* ================================================================
   INLINE TEXT VALUE
================================================================ */
.ecw-text-value { display:inline-flex; align-items:baseline; gap:3px; }
.ecw-tv-num { font-weight:800; font-size:1.1em; }
.ecw-tv-unit{ font-size:.75em; opacity:.7; }
.ecw-text-temp .ecw-tv-num  { color:var(--ecw-orange); }
.ecw-text-hum  .ecw-tv-num  { color:var(--ecw-blue); }
.ecw-text-pres .ecw-tv-num  { color:var(--ecw-purple); }
.ecw-text-dew  .ecw-tv-num  { color:var(--ecw-green); }
.ecw-inline-value b   { font-weight:700; }
.ecw-inline-unit      { font-size:.9em; opacity:.75; }

/* ================================================================
   STAT CARD
================================================================ */
.ecw-stat-card { text-align:center; padding:26px 20px; }
.ecw-stat-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ecw-text-lo); margin-bottom:12px; }
.ecw-stat-val   { font-family:var(--ecw-lcd-font,monospace); font-size:56px; font-weight:bold; line-height:1; color:var(--ecw-text-hi); }
.ecw-stat-unit  { font-size:15px; color:var(--ecw-text-mid); margin-top:8px; }
.ecw-stat-bar   { height:4px; background:rgba(255,255,255,.07); border-radius:2px; margin-top:18px; overflow:hidden; }
.ecw-stat-bar-fill { height:100%; border-radius:2px; background:var(--ecw-blue); transition:width 1s ease; }
.ecw-stat-temp .ecw-stat-val { color:var(--ecw-orange); }
.ecw-stat-temp .ecw-stat-bar-fill { background:var(--ecw-orange); }
.ecw-stat-hum  .ecw-stat-val { color:var(--ecw-blue); }
.ecw-stat-pres .ecw-stat-val { color:var(--ecw-purple); }

/* ================================================================
   WIND STATS ROW (in current card + wind widget)
================================================================ */
.ecw-wind-sec-body { display:flex; align-items:center; gap:16px; }
.ecw-wr-compact    { width:95px; height:95px; flex-shrink:0; }
.ecw-compass-sm    { font-size:10px; fill:var(--ecw-text-mid); font-weight:600; }
.ecw-wind-stats, .ecw-indoor-vals { flex:1; display:flex; flex-direction:column; gap:8px; }

.ecw-ws-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--ecw-text-mid);
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.ecw-ws-row:last-child { border-bottom:none; }
.ecw-ws-row span { font-size:13px; color:var(--ecw-text-mid); }
.ecw-ws-row b    {
  font-weight:700; color:var(--ecw-text-hi);
  font-family:var(--ecw-lcd-font, monospace); font-size:14px;
  transition:color .4s; min-width:80px; text-align:right;
}

/* ================================================================
   WIND ROSE FULL (widget)
================================================================ */
.ecw-wr-full { display:flex; flex-direction:column; align-items:center; width:100%; gap:12px; }
.ecw-windrose-svg { width:100%; max-width:200px; }
/* wind arrow animated via JS setAttribute - no CSS transition */
.ecw-compass-label { font-size:15px; font-weight:700; fill:var(--ecw-text-mid); }
.ecw-compass-sm-f  { font-size:10px; fill:var(--ecw-text-lo); }
/* Speed/dir/gust BELOW the rose */
.ecw-wr-stats {
  width:100%; max-width:200px;
  display:flex; flex-direction:column; gap:6px;
}
.ecw-wr-stat-row {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ecw-lcd-font, monospace);
}
.ecw-wr-stat-val  { font-size:20px; font-weight:bold; color:var(--ecw-orange); }
.ecw-wr-stat-unit { font-size:12px; color:var(--ecw-text-mid); }
.ecw-wr-stat-dir  {
  font-size:16px; font-weight:700; color:var(--ecw-text-hi);
  background:var(--ecw-surface2); padding:2px 10px; border-radius:6px;
  margin-left:4px;
}
.ecw-wr-gust-row  { justify-content:space-between; }
.ecw-wr-gust-label { font-size:12px; color:var(--ecw-text-lo); font-family:var(--ecw-font,sans-serif); }
.ecw-gust-val     { font-size:14px; color:var(--ecw-text-mid); }
.ecowitt-wind-widget { display:flex; justify-content:center; }

/* ================================================================
   RAIN BUCKET (animated)
================================================================ */
.ecw-rain-animated { display:flex; align-items:flex-start; gap:18px; position:relative; min-height:90px; }
.ecw-rain-drops-layer {
  position:absolute; top:0; left:0; right:0; bottom:0;
  pointer-events:none; overflow:hidden; border-radius:8px;
  opacity:0; transition:opacity .6s;
}
.is-raining .ecw-rain-drops-layer { opacity:1; }
.ecw-rdrop {
  position:absolute; left:var(--x); top:-14px;
  width:2px; height:14px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ecw-blue,.75) 75%,transparent));
  border-radius:0 0 2px 2px; opacity:0;
}
.is-raining .ecw-rdrop { animation:rdrop-fall 1.2s linear infinite; animation-delay:calc(var(--i)*0.15s); }
@keyframes rdrop-fall { 0%{opacity:0;transform:translateY(0)}15%{opacity:.9}90%{opacity:.3}100%{opacity:0;transform:translateY(120px)} }
.ecw-rain-bucket { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.ecw-bucket-body {
  width:46px; height:84px;
  background:color-mix(in srgb,var(--ecw-blue,.05) 5%,transparent);
  border:1.5px solid color-mix(in srgb,var(--ecw-blue) 22%,transparent);
  border-top:none; border-radius:0 0 9px 9px;
  position:relative; overflow:hidden;
}
.ecw-bucket-fill {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ecw-blue) 22%,transparent),color-mix(in srgb,var(--ecw-blue) 50%,transparent));
  transition:height 2.5s cubic-bezier(.4,0,.2,1); min-height:4px;
}
.ecw-wave,.ecw-wave2 {
  position:absolute; top:-8px; left:50%; width:210%; height:18px;
  background:color-mix(in srgb,var(--ecw-blue) 30%,transparent);
  border-radius:50%; transform:translateX(-50%);
  animation:wave-move 2.6s ease-in-out infinite;
}
.ecw-wave2 { animation-direction:reverse; animation-delay:-.9s; }
@keyframes wave-move { 0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-38%) scaleY(1.3)} }
.ecw-bucket-label { font-family:var(--ecw-lcd-font,monospace); font-size:13px; color:var(--ecw-blue); font-weight:bold; }
.ecw-bucket-sub   { font-size:9px; color:var(--ecw-text-lo); letter-spacing:.1em; }
.ecw-rain-stats   { flex:1; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.ecw-raining-now b { color:var(--ecw-blue)!important; animation:rain-pulse .9s ease-in-out infinite alternate; }
@keyframes rain-pulse { from{text-shadow:none}to{text-shadow:0 0 12px color-mix(in srgb,var(--ecw-blue) 90%,transparent)} }

/* ================================================================
   ANALOG GAUGE
================================================================ */
.ecw-gauge { display:flex; flex-direction:column; align-items:center; }
.ecw-gauge-svg { width:100%; max-width:230px; height:auto; display:block; margin:0 auto; }
/* Needle animated via JS setAttribute */
.ecw-gauge-value { font-family:var(--ecw-lcd-font,monospace); font-size:24px; fill:var(--ecw-text-hi); font-weight:bold; }
.ecw-gauge-unit  { font-size:13px; fill:var(--ecw-text-mid); }
.ecw-gauge-label { font-size:10px; fill:var(--ecw-text-lo); letter-spacing:.14em; text-transform:uppercase; }
.ecw-gauge-range { font-size:11px; fill:var(--ecw-text-lo); font-weight:600; }
.ecowitt-gauge-widget { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0; }
.ecw-gauge { display:flex; flex-direction:column; align-items:center; width:100%; }
.ecw-gauge-label { margin-top:2px; margin-bottom:4px; }
.hue-temp  { --ecw-gauge-lo:var(--ecw-orange); --ecw-gauge-mid:var(--ecw-orange); --ecw-gauge-hi:#ef4444; }
.hue-hum   { --ecw-gauge-lo:var(--ecw-blue);   --ecw-gauge-mid:var(--ecw-blue);   --ecw-gauge-hi:#0ea5e9; }
.hue-pres  { --ecw-gauge-lo:var(--ecw-purple);  --ecw-gauge-mid:var(--ecw-purple); --ecw-gauge-hi:#7c3aed; }

/* ================================================================
   UV METER CANVAS
================================================================ */
.ecowitt-uv-widget { display:flex; flex-direction:column; gap:6px; }
.ecw-uv-meters { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; padding:8px 0; }
.ecw-uv-meter-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ecw-uv-meter-label { font-size:11px; font-weight:700; color:var(--ecw-text-mid); letter-spacing:.08em; text-transform:uppercase; }
.ecw-uv-meter-canvas { display:block; max-width:150px; }

/* UV bars fallback */
.ecw-uv-bar        { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.ecw-uv-bar:last-child { margin-bottom:0; }
.ecw-uv-bar-header { display:flex; justify-content:space-between; align-items:center; }
.ecw-label    { font-size:12px; color:var(--ecw-text-mid); letter-spacing:.06em; font-weight:500; }
.ecw-bar-label{ font-size:13px; font-weight:600; color:var(--ecw-text-hi); letter-spacing:.02em; }
.ecw-bar-val  { font-family:var(--ecw-lcd-font,monospace); font-size:18px; color:var(--ecw-text-hi); font-weight:bold; }
.ecw-uv-val   { font-family:var(--ecw-lcd-font,monospace); font-size:16px; color:var(--ecw-text-hi); font-weight:bold; }
.ecw-uv-track   { height:9px; background:var(--ecw-gauge-track,#21282f); border-radius:5px; overflow:hidden; }
.ecw-uv-fill    { height:100%; background:linear-gradient(90deg,var(--ecw-blue),var(--ecw-orange),#f43f5e); border-radius:5px; transition:width 1.3s ease; }
.ecw-solar-fill { height:100%; background:linear-gradient(90deg,#fde68a,var(--ecw-orange)); border-radius:5px; transition:width 1.3s ease; }

/* ================================================================
   CHART
================================================================ */
.ecowitt-chart-widget { padding:18px 20px 16px; }
.ecw-chart-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; gap:12px; flex-wrap:wrap;
}
.ecw-chart-title { font-size:14px; font-weight:700; color:var(--ecw-text-hi); letter-spacing:.02em; }
.ecw-chart-tabs  { display:flex; gap:4px; }
.ecw-tab {
  font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:6px; border:1px solid var(--ecw-border);
  background:transparent; color:var(--ecw-text-mid); cursor:pointer; transition:all .15s;
  font-family: var(--ecw-font, sans-serif);
}
.ecw-tab:hover  { background:var(--ecw-surface2); color:var(--ecw-text-hi); }
.ecw-tab.active { background:var(--ecw-blue); border-color:var(--ecw-blue); color:#000; font-weight:700; }
.ecw-chart-body { position:relative; height:190px; }
.ecw-chart-body canvas { width:100%!important; height:100%!important; }
.ecw-chart-loading::after {
  content:'Lade…'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ecw-text-lo); font-size:12px; background:color-mix(in srgb,var(--ecw-surface) 85%,transparent);
  border-radius:8px;
}

/* ================================================================
   DATA TABLE
================================================================ */
.ecowitt-table-widget { padding:0; overflow:hidden; }
.ecowitt-table-widget .ecw-chart-header { padding:18px 20px 0; }
.ecw-table-badge {
  font-size:10px; color:var(--ecw-text-lo); font-weight:700;
  background:var(--ecw-surface2); padding:3px 10px; border-radius:20px; border:1px solid var(--ecw-border);
}
.ecowitt-table-scroll { overflow-x:auto; margin-top:12px; }
.ecowitt-data-table { width:100%; border-collapse:collapse; font-size:13px; font-family:var(--ecw-lcd-font,monospace); }
.ecowitt-data-table thead { background:var(--ecw-surface2); position:sticky; top:0; z-index:2; }
.ecowitt-data-table th {
  padding:10px 14px; text-align:left; color:var(--ecw-text-mid);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  border-bottom:1px solid var(--ecw-border); white-space:nowrap;
  font-family: var(--ecw-font, sans-serif);
}
.ecowitt-data-table td {
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--ecw-text-hi); font-size:13px; white-space:nowrap;
}
.ecowitt-data-table tbody tr:hover { background:color-mix(in srgb,var(--ecw-blue) 5%,transparent); }
.ecw-col-temp { color:var(--ecw-orange)!important; font-weight:600; }

/* ================================================================
   MISC
================================================================ */
.ecowitt-single-tile { padding:14px; }
@keyframes ecw-val-update { 0%{opacity:.5;transform:scale(.97)}100%{opacity:1;transform:scale(1)} }
.ecw-updated { animation:ecw-val-update .35s ease-out forwards; }

/* ================================================================
   WEBCAM
================================================================ */
.ecowitt-webcam-widget { padding:0; overflow:hidden; }
.ecw-webcam-wrap { position:relative; }
.ecw-webcam-canvas { width:100%; height:auto; display:block; border-radius:calc(var(--ecw-widget-radius,14px) - 2px); }
.ecw-webcam-status {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--ecw-text-mid); font-size:14px; text-align:center; pointer-events:none;
  background:rgba(0,0,0,.6); padding:8px 16px; border-radius:6px;
}
.ecw-webcam-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; border-top:1px solid var(--ecw-border); font-size:12px;
}
.ecw-webcam-ts  { color:var(--ecw-text-lo); }
.ecw-webcam-dl  { color:var(--ecw-blue); text-decoration:none; font-weight:600; }
.ecw-webcam-dl:hover { text-decoration:underline; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:500px){
  .ecw-rain-animated { flex-direction:column; align-items:flex-start; }
  .ecw-rain-bucket   { flex-direction:row; align-items:center; gap:12px; }
  .ecw-bucket-body   { width:38px; height:64px; }
  .ecw-gauge-row { grid-template-columns:1fr 1fr; }
}
@media(max-width:380px){
  .ecw-lcd-row { grid-template-columns:1fr; }
}

/* ================================================================
   WIND ROSE v2 – clean stats below compass
   ================================================================ */
.ecw-wr-footer-stats {
  width:100%;max-width:210px;margin:10px auto 0;
  display:flex;flex-direction:column;gap:6px;
}
.ecw-wr-row {
  display:flex;gap:8px;
}
.ecw-wr-item {
  flex:1;display:flex;flex-direction:column;gap:2px;
  background:var(--ecw-surface2);border-radius:8px;padding:8px 10px;
  border:1px solid var(--ecw-border);
}
.ecw-wr-lbl {
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ecw-text-lo);font-weight:700;
}
.ecw-wr-val {
  font-family:var(--ecw-lcd-font);font-size:16px;
  color:var(--ecw-text-hi);font-weight:bold;
}
.ecw-wr-val em { font-style:normal;font-size:11px;color:var(--ecw-text-mid); }
.ecw-wr-big-dir {
  font-size:20px;color:var(--ecw-wind-arrow);
}
.ecw-compass-dir-text {
  font-size:10px;fill:var(--ecw-text-lo);font-family:var(--ecw-font);
  font-style:italic;
}

/* ================================================================
   UV NOT AVAILABLE
   ================================================================ */
.ecw-uv-na {
  font-size:11px;color:var(--ecw-text-lo);
  text-align:center;padding:12px 8px;line-height:1.5;
}
.ecw-uv-na small { opacity:.7; }

/* ================================================================
   SUNSHINE HOURS – sun arc on canvas
   ================================================================ */
.ecw-uv-meter-wrap { min-width:130px; }

/* ================================================================
   EXTRA SENSOR GRID
   ================================================================ */
.ecw-extra-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;
  margin-top:12px;
}
.ecw-extra-tile {
  background:var(--ecw-surface2);
  border:1px solid var(--ecw-border);
  border-radius:9px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.ecw-extra-label {
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ecw-text-lo);font-weight:700;
}
.ecw-extra-value {
  font-family:var(--ecw-lcd-font);font-size:22px;
  color:var(--ecw-text-hi);font-weight:bold;line-height:1;
}
.ecw-extra-unit {
  font-size:10px;color:var(--ecw-text-mid);
}

/* ================================================================
   TREND WIDGET
   ================================================================ */
.ecw-trend-row b { min-width:120px;text-align:right; }

/* ================================================================
   LIGHTNING WIDGET
   ================================================================ */
.ecowitt-lightning-widget { transition:border-color .5s; }
.ecowitt-lightning-widget.is-stormy {
  border-color:#facc15;
  box-shadow:0 0 20px rgba(250,204,21,.15);
}
.ecw-lightning-body { display:flex;align-items:center;gap:16px;margin-top:12px; }
.ecw-lightning-icon { font-size:40px;line-height:1; }
.ecw-lightning-stats { flex:1;display:flex;flex-direction:column;gap:6px; }

/* ================================================================
   FIELD GROUP in Admin
   ================================================================ */
.ecw-field-group { margin-bottom:14px; }
.ecw-field-group-title {
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#6b7280;margin-bottom:6px;padding-bottom:4px;
  border-bottom:1px solid #e5e7eb;
}
.ecw-field-cb.is-active {
  background:#eff6ff;border-color:#93c5fd;
}

.ecw-uv-meters { display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start; }
.ecw-uv-meter-wrap {
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:140px;
}
.ecw-uv-meter-label {
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ecw-text-lo);
}
.ecw-uv-meter-canvas {
  display:block;
  /* Use attribute dimensions, never let CSS collapse the canvas */
  width:  attr(width px, 160px);
  height: attr(height px, 130px);
  /* Fallback for browsers not supporting attr() in CSS */
  min-width:  120px;
  min-height: 100px;
}
.ecw-uv-val-text {
  font-family:var(--ecw-lcd-font);font-size:22px;font-weight:bold;
  color:var(--ecw-text-hi);text-align:center;line-height:1;
}
.ecw-uv-val-text em {
  font-style:normal;font-size:13px;color:var(--ecw-text-mid);margin-left:3px;
}
.ecw-bar-unit { font-size:11px;color:var(--ecw-text-mid);margin-left:4px; }
/* ================================================================
   WIND ARROW – guaranteed visibility across all themes
   ================================================================ */
:root {
  --ecw-wind-arrow: #f97316;
}
.ecw-wind-arrow polygon:first-child { fill: var(--ecw-wind-arrow, #f97316) !important; }

/* ================================================================
   TEXT COLORS – ALL widget text respects theme
   ================================================================ */
.ecw-extra-label,
.ecw-wr-lbl,
.ecw-ls-label,
.ecw-stat-big-label,
.ecw-solar-unit {
  color: var(--ecw-text-mid);
}
.ecw-extra-value,
.ecw-wr-val,
.ecw-ls-val,
.ecw-stat-big-value {
  color: var(--ecw-text-hi);
}
/* Widget title uses theme text */
.ecw-widget-title { color: var(--ecw-text-hi); }

/* ================================================================
   BIG STAT CARD (single wind value)
   ================================================================ */
.ecw-stat-big-card {
  text-align: center;
  padding: 24px 20px;
}
.ecw-stat-big-label {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 10px;
}
.ecw-stat-big-value {
  font-family: var(--ecw-lcd-font);
  font-size: 48px; line-height: 1; font-weight: bold;
}
.ecw-stat-big-sub {
  font-size: 14px; color: var(--ecw-text-mid); margin-top: 8px;
}

/* ================================================================
   SOLAR GAUGE WIDGET
   ================================================================ */
.ecw-solar-gauge-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ecw-solar-arc-canvas {
  display: block; width: 100%; max-width: 220px;
}
.ecw-solar-readout {
  display: flex; align-items: baseline; gap: 6px;
  justify-content: center;
}
.ecw-solar-val {
  font-family: var(--ecw-lcd-font);
  font-size: 32px; font-weight: bold; color: var(--ecw-text-hi);
}
.ecw-solar-unit {
  font-size: 14px;
}
.ecw-solar-zone {
  margin-top: 4px; font-weight: 700; font-size: 13px; text-align: center;
}
/* UV zone chips */
.ecw-uv-zones {
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center; margin-top: 8px;
}
.ecw-uv-zone-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 20px;
  font-weight: 600; white-space: nowrap;
}

/* ================================================================
   LIGHTNING WIDGET – animated
   ================================================================ */
.ecowitt-lightning-widget { position: relative; overflow: hidden; }
.ecowitt-lightning-widget.is-stormy {
  border-color: #facc15;
  box-shadow: 0 0 24px rgba(250,204,21,.18);
}
.ecw-lightning-display {
  display: flex; align-items: center; gap: 20px; margin-top: 14px;
}
.ecw-bolt-area {
  position: relative; width: 64px; height: 80px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ecw-bolt-icon { font-size: 40px; z-index: 1; position: relative; }
.ecw-bolt {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(250,204,21,0);
  opacity: 0;
}
.is-stormy .ecw-bolt {
  animation: bolt-pulse 1.8s ease-out infinite;
  animation-delay: calc(var(--bi) * 0.36s);
}
@keyframes bolt-pulse {
  0%   { transform: scale(0.2); opacity:.8; background:rgba(250,204,21,.4); }
  100% { transform: scale(2.5); opacity:0;  background:rgba(250,204,21,0); }
}
.ecw-lightning-stats { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ecw-ls-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ecw-ls-row:last-child { border-bottom: none; }
.ecw-ls-label { color: var(--ecw-text-mid); font-size: 12px; }
.ecw-ls-val   { font-family: var(--ecw-lcd-font); font-size: 14px; font-weight: bold; }
.ecw-ls-val em { font-style: normal; font-size: 11px; color: var(--ecw-text-mid); margin-left: 2px; }
.ecw-ls-active { color: #facc15 !important; text-shadow: 0 0 8px rgba(250,204,21,.5); }
.ecw-ls-time   { font-size: 12px; color: var(--ecw-text-mid); font-family: var(--ecw-font); }

/* ================================================================
   CLASSIC INSTRUMENTS LAYOUT
   ================================================================ */
.ecw-classic-dashboard { padding:20px; }
.ecw-classic-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:20px;
  align-items:end;
}
.ecw-classic-item {
  display:flex;
  justify-content:center;
}
.ecw-classic-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ecw-classic-wrap canvas {
  display:block;
  max-width:100%;
}
.ecw-classic-label {
  font-size:12px;
  font-weight:700;
  color:var(--ecw-text-hi);
  text-align:center;
  letter-spacing:.04em;
}
.ecw-classic-single {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px;
}

/* ================================================================
   BULB WIDGET – glow needs overflow:visible
   ================================================================ */
canvas[data-instrument="bulb"] {
  display: block;
  min-width: 100px;
  min-height: 140px;
}
.ecowitt-widget:has(canvas[data-instrument="bulb"]) {
  overflow: visible;
}
.ecw-classic-single:has(canvas[data-instrument="bulb"]) {
  overflow: visible;
  padding: 8px;
}

/* ================================================================
   LCD TILE – Clean modern design
   ================================================================ */
.ecw-lcd-tile {
  background: var(--ecw-surface2);
  border: 1px solid var(--ecw-border);
  border-radius: calc(var(--ecw-widget-radius) - 4px);
  padding: 16px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s, border-color .3s;
}
.ecw-lcd-tile:hover {
  border-color: color-mix(in srgb, var(--ecw-border) 50%, var(--ecw-blue) 50%);
}
/* Subtle top accent line */
.ecw-lcd-tile::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ecw-accent-color, var(--ecw-blue));
  opacity: .7;
  border-radius: 2px 2px 0 0;
}
.ecw-lcd-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ecw-text-lo);
  margin-bottom: 10px;
  position: relative;
}
.ecw-lcd-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
}
.ecw-lcd-value {
  font-family: var(--ecw-lcd-font);
  font-size: var(--ecw-lcd-size);
  line-height: 1.05;
  color: var(--ecw-text-hi);
  font-weight: bold;
  letter-spacing: -.01em;
  animation: lcd-flicker 12s infinite;
  transition: color .5s;
}
.ecw-lcd-unit {
  font-size: calc(var(--ecw-lcd-size) * .36);
  color: var(--ecw-text-mid);
  padding-bottom: 3px;
  font-weight: 400;
}
/* Remove the old progress bar */
.ecw-lcd-bar { display: none; }
.ecw-lcd-bar-fill { display: none; }
/* ================================================================
   PRO WIDGETS – Kompakte Dashboard-Karten
================================================================ */
.ecw-pro-dashboard { display:flex; flex-direction:column; gap:14px; }
.ecw-pro-grid      { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:700px){ .ecw-pro-grid { grid-template-columns:1fr; } }

.ecw-pro-card {
  background: var(--ecw-surface2, #1e2533);
  border: 1px solid var(--ecw-border, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 14px 16px;
}
.ecw-pro-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ecw-text-lo, #6b7280);
  margin-bottom: 8px;
}
.ecw-pro-main {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ecw-text-hi, #f0f0f0);
  line-height: 1.1;
}
.ecw-pro-unit { font-size: .9rem; font-weight: 400; opacity: .7; }
.ecw-pro-sub  { font-size: .8rem; color: var(--ecw-text-lo, #6b7280); margin-top:4px; }

/* Min/Max/Avg block */
.ecw-pro-minmax {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: .78rem;
}
.ecw-pro-max { color: #ef4444; }
.ecw-pro-avg { color: var(--ecw-text-lo, #6b7280); }
.ecw-pro-min { color: #3b82f6; }
.ecw-pro-minmax em { font-style:normal; opacity:.7; font-size:.85em; margin-left:4px; }

/* Gefühlte Temperatur standalone widget */
.ecw-pro-feelslike {
  background: var(--ecw-surface, #161b22);
  border: 1px solid var(--ecw-border, rgba(255,255,255,.08));
  border-radius: 14px;
  padding: 16px 18px;
}
.ecw-pro-info {
  display: inline-block;
  width: 16px; height: 16px;
  background: var(--ecw-blue, #38bdf8);
  color: #000;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}

/* Gradient bar */
.ecw-fl-bar-wrap { margin: 10px 0 4px; }
.ecw-fl-bar {
  position: relative;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(to right,
    #1e3a5f 0%,       /* -40 extremer Kältestress */
    #2563eb 18%,      /* 0   leichter Kältestress */
    #22c55e 33%,      /* 9   kein Stress */
    #facc15 51%,      /* 26  mäßiger Hitzestress */
    #f97316 62%,      /* 32  erheblicher Hitzestress */
    #ef4444 74%,      /* 38  starker Hitzestress */
    #7f1d1d 100%      /* 46+ extremer Hitzestress */
  );
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.ecw-fl-needle {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #111;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.ecw-fl-marker {
  position: absolute;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
}
.ecw-fl-marker-max { color: #e74c3c; }
.ecw-fl-marker-min { color: #3498db; }
.ecw-fl-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ecw-text-lo, #6b7280);
  margin-top: 4px;
  padding: 0 2px;
}
.ecw-fl-extremes {
  display: flex;
  gap: 16px;
  font-size: .78rem;
  margin: 6px 0;
}
.ecw-fl-extremes em { font-style:normal; opacity:.7; font-size:.85em; margin-left:3px; }
.ecw-fl-value {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 6px;
}

/* ================================================================
   WETTERTEXT WIDGET
================================================================ */
.ecw-wettertext {
  padding: 20px 22px;
}
.ecw-wt-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ecw-blue, #38bdf8);
  margin-bottom: 8px;
}
.ecw-wt-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ecw-text-hi, #f0f0f0);
  margin-bottom: 14px;
}
.ecw-wt-card {
  background: var(--ecw-surface2, #1e2533);
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid var(--ecw-border, rgba(255,255,255,.08));
}
.ecw-wt-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ecw-text-lo, #6b7280);
  margin-bottom: 6px;
}
.ecw-wt-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ecw-text-hi, #f0f0f0);
  margin-bottom: 6px;
}
.ecw-wt-card-text {
  font-size: .88rem;
  font-weight: 400;
  color: var(--ecw-text-mid, #9ca3af);
  line-height: 1.5;
}
.ecw-wt-extras {
  margin-top: 10px;
  font-size: .78rem;
  color: var(--ecw-text-lo, #6b7280);
  border-top: 1px solid var(--ecw-border, rgba(255,255,255,.06));
  padding-top: 8px;
}

/* ================================================================
   DWD WARNUNGEN
================================================================ */
.ecw-dwd { padding:18px 20px; }
.ecw-dwd-header { margin-bottom:12px; }
.ecw-dwd-title {
  font-size:1.1rem; font-weight:700;
  color:var(--ecw-text-hi,#f0f0f0);
}
.ecw-dwd-ort {
  font-size:.8rem; color:var(--ecw-blue,#38bdf8);
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:4px;
}
.ecw-dwd-status {
  display:inline-block; padding:5px 14px; border-radius:20px;
  border:1.5px solid; font-size:.82rem; font-weight:600;
  margin-bottom:14px;
}
.ecw-dwd-none {
  font-size:1.2rem; font-weight:700;
  text-align:center; padding:16px 0;
}
.ecw-dwd-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.ecw-dwd-warn {
  background:var(--ecw-surface2,#1e2533);
  border-radius:8px; padding:12px 14px;
}
.ecw-dwd-warn-head {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8rem; font-weight:700; margin-bottom:5px;
}
.ecw-dwd-warn-title { font-size:.9rem; font-weight:600; margin-bottom:4px; }
.ecw-dwd-warn-desc  { font-size:.82rem; color:var(--ecw-text-mid,#9ca3af); line-height:1.5; }
.ecw-dwd-warn-time  { font-size:.75rem; color:var(--ecw-text-lo,#6b7280); margin-top:6px; }

.ecw-dwd-legend {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--ecw-border,rgba(255,255,255,.08));
}
.ecw-dwd-legend-item {
  border:2px solid; border-radius:50px; padding:4px 12px;
  font-size:.75rem; display:flex; flex-direction:column; align-items:center;
  opacity:.5; transition:opacity .2s;
}
.ecw-dwd-legend-active { opacity:1 !important; }
.ecw-dwd-legend-item strong { font-size:.72rem; }

.ecw-dwd-footer {
  font-size:.72rem; color:var(--ecw-text-lo,#6b7280);
  margin-top:10px; text-align:right;
}

/* DWD Karte */
.ecw-dwd-map { padding:14px 16px; }
.ecw-dwd-map-title {
  font-size:.9rem; font-weight:600; margin-bottom:8px;
  color:var(--ecw-text-hi,#f0f0f0);
}

/* ================================================================
   DWD WARNUNGEN v2 – überarbeitetes Design
================================================================ */
.ecw-dwd { padding:18px 20px; }
.ecw-dwd-testbadge {
  background:#f97316;color:#fff;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:4px;display:inline-block;margin-bottom:8px;
}
.ecw-dwd-ort {
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ecw-blue,#38bdf8);margin-bottom:4px;
}
.ecw-dwd-title { font-size:1.4rem;font-weight:800;line-height:1.2;margin-bottom:12px; }
.ecw-dwd-status {
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:20px;border:2px solid;
  font-size:.85rem;font-weight:700;margin-bottom:16px;
  background:color-mix(in srgb,currentColor 20%,transparent);
}
.ecw-dwd-none { font-size:1.1rem;font-weight:700;text-align:center;padding:20px 0; }
.ecw-dwd-list { display:flex;flex-direction:column;gap:10px;margin-bottom:16px; }
.ecw-dwd-warn {
  background:var(--ecw-surface2,#1e2533);border-radius:8px;padding:12px 14px;
}
.ecw-dwd-warn-head { display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap; }
.ecw-dwd-badge {
  color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;
}
.ecw-dwd-warn-lvl { font-size:.8rem;font-weight:600; }
.ecw-dwd-warn-title { font-weight:600;margin-bottom:4px; }
.ecw-dwd-warn-desc  { font-size:.83rem;color:var(--ecw-text-mid,#9ca3af);line-height:1.5; }
.ecw-dwd-warn-time  { font-size:.75rem;color:var(--ecw-text-lo,#6b7280);margin-top:6px; }

/* Legende */
.ecw-dwd-legend {
  display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--ecw-border,rgba(255,255,255,.08));
}
.ecw-dwd-li {
  border:2px solid;border-radius:50px;padding:6px 14px;
  font-size:.78rem;display:flex;flex-direction:column;align-items:center;
  opacity:.7;transition:all .25s;cursor:default;min-width:80px;text-align:center;
}
.ecw-dwd-li-on {
  opacity:1;font-weight:700;
  box-shadow:0 0 10px color-mix(in srgb,currentColor 40%,transparent);
}
.ecw-dwd-li-n  { font-size:.7rem;margin-bottom:2px;opacity:.8; }
.ecw-dwd-footer { font-size:.72rem;color:var(--ecw-text-lo,#6b7280);margin-top:10px;text-align:right; }

/* ── DWD Warn-Banner (kein Plugin-Wrapper, übernimmt Seiten-Design) ── */
.ecw-dwd-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 3px solid var(--dwd-color);
  background: #ffffff;
  position: relative;
  overflow: hidden;
  animation: dwd-border-flash var(--dwd-flash, 1.8s) ease-in-out infinite;
}
@keyframes dwd-border-flash {
  0%,100% { border-color: var(--dwd-color); box-shadow: 0 0 0 0 color-mix(in srgb,var(--dwd-color) 40%,transparent); }
  50%      { border-color: var(--dwd-color); box-shadow: 0 0 18px 6px color-mix(in srgb,var(--dwd-color) 35%,transparent); }
}

/* Warnleuchte / Beacon */
.ecw-dwd-banner-light {
  flex-shrink: 0;
  width: 36px; height: 36px;
  position: relative;
}
.ecw-dwd-banner-beacon {
  width: 24px; height: 24px;
  background: var(--dwd-color);
  border-radius: 50%;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 0 var(--dwd-color);
  animation: dwd-beacon var(--dwd-flash, 1.8s) ease-out infinite;
}
.ecw-dwd-banner-beacon::before {
  content: '⚠';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  color: #fff;
}
@keyframes dwd-beacon {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb,var(--dwd-color) 70%,transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb,var(--dwd-color) 0%,transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--dwd-color) 0%,transparent); }
}

.ecw-dwd-banner-body { flex: 1; }
.ecw-dwd-banner-head { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
.ecw-dwd-banner-stufe {
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.ecw-dwd-banner-label { font-size: 1rem; font-weight: 700; }
.ecw-dwd-banner-hint  { font-size: .83rem; color: #374151; }

/* DWD Karte */
.ecw-dwd-map { padding:14px 16px; }
.ecw-dwd-map-title { font-size:.9rem;font-weight:600;margin-bottom:8px; }

/* Leaflet map container */
.ecw-dwd-map .leaflet-container { border-radius: 8px; }
.ecw-dwd-leaf-legend { pointer-events: none; }

/* DWD Bild-Shortcode mit Refresh-Anzeige */
.ecw-dwd-map-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; flex-wrap:wrap; gap:6px;
}
.ecw-dwd-refresh-info {
  display:flex; align-items:center; gap:5px;
  font-size:.75rem; color:var(--ecw-text-lo,#6b7280);
}
.ecw-dwd-refresh-dot {
  width:7px; height:7px; border-radius:50%;
  background:#22c55e;
  animation:dwd-dot-pulse 2s ease-in-out infinite;
}
@keyframes dwd-dot-pulse {
  0%,100%{opacity:1} 50%{opacity:.3}
}
.ecw-dwd-refresh-countdown { font-variant-numeric:tabular-nums; }

/* ================================================================
 * Wettervorhersage Widgets
 * ================================================================ */
.ecw-forecast-widget { padding: 14px 16px; }
.ecw-forecast-title  { font-size:.75rem;font-weight:700;letter-spacing:.06em;
                        opacity:.6;text-transform:uppercase;margin-bottom:10px; }

/* Kurztext */
.ecw-forecast-text   { font-size:.92rem;line-height:1.6;padding:6px 0; }

/* 24h Stundenband */
.ecw-forecast-24h-wrap { overflow-x:auto;padding-bottom:6px;
                          -webkit-overflow-scrolling:touch; }
.ecw-forecast-24h    { display:flex;gap:6px;min-width:max-content;padding:4px 2px; }
.ecw-fc-hour         { display:flex;flex-direction:column;align-items:center;gap:2px;
                        min-width:52px;padding:8px 6px;border-radius:10px;
                        border:1px solid transparent;
                        background:var(--ecw-card-bg,rgba(255,255,255,.06)); }
.ecw-fc-now          { border-width:2px; }
.ecw-fc-hr           { font-size:.72rem;opacity:.65;font-weight:600; }
.ecw-fc-ico          { font-size:1.4rem;line-height:1; }
.ecw-fc-tmp          { font-size:.9rem;font-weight:700; }
.ecw-fc-rain         { font-size:.68rem;opacity:.75; }
.ecw-fc-wind         { font-size:.68rem;opacity:.55; }

/* 7-Tage */
.ecw-forecast-7d     { display:grid;grid-template-columns:repeat(7,1fr);gap:6px; }
@media(max-width:600px) {
    .ecw-forecast-7d { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:400px) {
    .ecw-forecast-7d { grid-template-columns:repeat(2,1fr); }
}
.ecw-fc-day          { display:flex;flex-direction:column;align-items:center;gap:4px;
                        padding:10px 6px;border-radius:10px;
                        background:var(--ecw-card-bg,rgba(255,255,255,.06));
                        text-align:center; }
.ecw-fc-today        { outline:2px solid var(--ecw-accent,#38bdf8); }
.ecw-fc-day-dow      { font-size:.8rem;font-weight:700; }
.ecw-fc-day-date     { font-size:.68rem;opacity:.55; }
.ecw-fc-day-ico      { font-size:1.8rem;line-height:1.1; }
.ecw-fc-day-label    { font-size:.68rem;font-weight:600; }
.ecw-fc-day-temps    { display:flex;align-items:center;gap:4px;width:100%;
                        justify-content:center;font-size:.78rem; }
.ecw-fc-tmin         { opacity:.6; }
.ecw-fc-tmax         { font-weight:700; }
.ecw-fc-tbar-wrap    { flex:1;height:4px;border-radius:2px;
                        background:rgba(255,255,255,.1);overflow:hidden;max-width:30px; }
.ecw-fc-tbar         { height:100%;width:100%;border-radius:2px; }
.ecw-fc-day-rain     { font-size:.72rem;opacity:.75; }

/* Forecast long text */
.ecw-forecast-text-long   { padding:4px 0; }
.ecw-fc-text-header       { display:flex;align-items:center;gap:12px;
                             padding:10px 14px;border-radius:10px;margin-bottom:10px;
                             background:rgba(255,255,255,.05); }
.ecw-fc-text-icon         { font-size:2.5rem;line-height:1; }
.ecw-fc-text-title        { font-size:1rem;font-weight:700; }
.ecw-fc-text-temp         { font-size:1.4rem;font-weight:700;margin-top:2px; }
.ecw-fc-text-body         { font-size:.9rem;line-height:1.7;margin:8px 0;opacity:.9; }
.ecw-fc-text-night        { font-size:.82rem;padding:6px 10px;border-radius:8px;
                             background:rgba(129,140,248,.1);margin-top:8px; }
.ecw-fc-text-source       { font-size:.65rem;opacity:.4;text-align:right;margin-top:6px; }

/* Forecast long text */
.ecw-forecast-text-long   { padding:4px 0; }
.ecw-fc-text-header       { display:flex;align-items:center;gap:12px;
                             padding:10px 14px;border-radius:10px;margin-bottom:10px;
                             background:rgba(255,255,255,.05); }
.ecw-fc-text-icon         { font-size:2.5rem;line-height:1; }
.ecw-fc-text-title        { font-size:1rem;font-weight:700; }
.ecw-fc-text-temp         { font-size:1.4rem;font-weight:700;margin-top:2px; }
.ecw-fc-text-body         { font-size:.9rem;line-height:1.7;margin:8px 0;opacity:.9; }
.ecw-fc-text-night        { font-size:.82rem;padding:6px 10px;border-radius:8px;
                             background:rgba(129,140,248,.1);margin-top:8px; }
.ecw-fc-text-source       { font-size:.65rem;opacity:.4;text-align:right;margin-top:6px; }

/* 3-Day text cards */
.ecw-fc-days-wrap   { display:flex;flex-direction:column;gap:14px;margin-top:6px; }
.ecw-fc-day-card    { background:var(--ecw-card-bg,rgba(255,255,255,.06));
                       border-radius:12px;padding:14px 16px; }
.ecw-fc-dc-label    { font-weight:800;letter-spacing:.02em;margin-bottom:8px;
                       opacity:.9; }
.ecw-fc-dc-top      { display:flex;align-items:center;gap:14px;margin-bottom:8px; }
.ecw-fc-dc-ico      { font-size:2.8rem;line-height:1;flex-shrink:0; }
.ecw-fc-dc-right    { flex:1; }
.ecw-fc-dc-sky      { font-size:1rem;font-weight:700;margin-bottom:2px; }
.ecw-fc-dc-temp     { font-size:1.1rem;display:flex;align-items:baseline;gap:4px; }
.ecw-fc-dc-tmin     { opacity:.6; }
.ecw-fc-dc-tsep     { opacity:.4; }
.ecw-fc-dc-tmax     { font-weight:700; }
.ecw-fc-dc-text     { font-size:.85rem;line-height:1.7;opacity:.85;border-top:1px solid rgba(255,255,255,.08);
                       padding-top:8px;margin-top:4px; }

/* Day cards redesign */
.ecw-fc-days-wrap    { display:flex;flex-direction:column;gap:12px;margin-top:4px; }
.ecw-fc-day-card     { border-radius:12px;overflow:hidden;
                        background:var(--ecw-card-bg,rgba(255,255,255,.06));
                        border-left:4px solid transparent; }
.ecw-fc-dc-header    { padding:8px 14px;display:flex;align-items:center; }
.ecw-fc-dc-label     { font-weight:800;letter-spacing:.01em; }
.ecw-fc-dc-body      { display:grid;grid-template-columns:140px 1fr;gap:0;
                        padding:12px 14px 14px; }
@media(max-width:480px){
    .ecw-fc-dc-body  { grid-template-columns:1fr; }
}
.ecw-fc-dc-left      { display:flex;flex-direction:column;align-items:center;
                        gap:4px;padding-right:14px;
                        border-right:1px solid rgba(255,255,255,.08); }
.ecw-fc-dc-ico       { font-size:3rem;line-height:1; }
.ecw-fc-dc-sky       { font-size:.82rem;font-weight:700;text-align:center; }
.ecw-fc-dc-temp      { font-size:1.05rem;text-align:center; }
.ecw-fc-dc-tmin      { opacity:.6; }
.ecw-fc-dc-tsep      { opacity:.3; }
.ecw-fc-dc-tmax      { font-weight:700; }
.ecw-fc-dc-text      { padding-left:14px;font-size:.88rem;line-height:1.75;opacity:.88; }
@media(max-width:480px){
    .ecw-fc-dc-left  { border-right:none;border-bottom:1px solid rgba(255,255,255,.08);
                        padding-right:0;padding-bottom:10px;margin-bottom:10px;
                        flex-direction:row;gap:12px; }
    .ecw-fc-dc-text  { padding-left:0; }
}

/* Rekorde Widget */
.ecw-records-widget  { padding:14px 16px; }
.ecw-records-title   { font-size:.85rem;font-weight:700;letter-spacing:.06em;
                        text-transform:uppercase;opacity:.7;margin-bottom:4px; }
.ecw-records-period  { font-size:.72rem;opacity:.45;margin-bottom:14px; }
.ecw-records-grid    { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px; }
.ecw-rec-card        { display:flex;align-items:flex-start;gap:10px;
                        background:var(--ecw-card-bg,rgba(255,255,255,.06));
                        border-radius:10px;padding:12px 14px; }
.ecw-rec-icon        { font-size:1.6rem;line-height:1;flex-shrink:0;margin-top:2px; }
.ecw-rec-content     { flex:1;min-width:0; }
.ecw-rec-label       { font-size:.72rem;opacity:.6;margin-bottom:3px;line-height:1.3; }
.ecw-rec-value       { font-size:1.5rem;font-weight:700;line-height:1; }
.ecw-rec-unit        { font-size:.8rem;font-weight:400;opacity:.7; }
.ecw-rec-ts          { font-size:.7rem;opacity:.5;margin-top:4px; }

/* DWD Textvorhersage Widget */
.ecw-textfc-widget   { padding:14px 16px; }
.ecw-textfc-header   { display:flex;justify-content:space-between;align-items:flex-start;
                        margin-bottom:12px; }
.ecw-textfc-title    { font-size:.82rem;font-weight:700;letter-spacing:.05em;
                        text-transform:uppercase;opacity:.7; }
.ecw-textfc-updated  { font-size:.7rem;opacity:.45;margin-top:2px; }
.ecw-textfc-refresh-btn { background:transparent;border:1px solid currentColor;
                           border-radius:6px;cursor:pointer;padding:2px 8px;
                           font-size:.8rem;opacity:.5;color:inherit; }
.ecw-textfc-refresh-btn:hover { opacity:1; }
.ecw-textfc-body     { font-size:.88rem;line-height:1.75; }
.ecw-textfc-section-head { font-weight:800;font-size:.78rem;letter-spacing:.1em;
                            margin:14px 0 4px;opacity:.7;
                            padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1); }
.ecw-textfc-para     { margin:0 0 10px; }
.ecw-textfc-warn     { padding:8px 12px;border-radius:8px;
                        background:rgba(251,191,36,.08);
                        border-left:3px solid #fbbf24; }
.ecw-textfc-aussichten { font-size:.88rem;line-height:1.7;padding:10px 12px;
                          border-radius:8px;background:rgba(255,255,255,.05);
                          border-left:3px solid var(--ecw-accent,#38bdf8); }
.ecw-textfc-kurz     { font-size:.9rem;line-height:1.7;opacity:.85; }
.ecw-textfc-error    { color:#ef4444;font-size:.85rem; }
.ecw-textfc-source   { font-size:.65rem;opacity:.4;text-align:right;margin-top:10px; }

/* DWD Textvorhersage - Tages-Headlines */
.ecw-textfc-headline { font-weight:700;font-size:.85rem;margin:14px 0 6px;
                        padding:6px 10px;border-radius:6px;
                        background:rgba(56,189,248,.1);
                        border-left:3px solid var(--ecw-accent,#38bdf8); }

/* 7-Tage neues Layout */
.ecw-7d-layout       { display:flex;flex-direction:column;gap:8px; }

/* Heute-Zeile: eine große Karte */
.ecw-7d-today-row    { display:flex; }
.ecw-7d-today-row .ecw-fc-day {
    flex:1;flex-direction:row;align-items:center;
    gap:16px;padding:14px 18px;
    justify-content:flex-start; }
.ecw-7d-today-row .ecw-fc-day-ico  { font-size:2.8rem; }
.ecw-7d-today-row .ecw-fc-day-dow  { font-size:1.2rem;font-weight:800; }
.ecw-7d-today-row .ecw-fc-day-date { font-size:.8rem;opacity:.55; }
.ecw-7d-today-row .ecw-fc-day-label{ font-size:.95rem; }
.ecw-7d-today-row .ecw-fc-day-temps{ font-size:.95rem; }

/* 3er-Reihen */
.ecw-7d-row          { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.ecw-7d-row .ecw-fc-day { flex-direction:column;align-items:center;
    padding:10px 6px;text-align:center; }