/* Wetterstation St. Veit im Defereggental — Aktuell-tab styles. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
/* Design tokens — light mode (default) */
:root {
/* Base */
--bg: #eef5ff;
--card: rgba(255,255,255,.80);
--bdr: rgba(30,100,220,.15);
--bhov: rgba(30,100,220,.38);
--blue: #0066cc;
--white: #0a1a2e;
--mid: #506880;
--t4: #304060;
--fnt-b: 'Inter', 'Tahoma', Arial, sans-serif;
--r: 15px;
--sh: 0 4px 20px rgba(0,50,150,.10), 0 2px 6px rgba(0,0,0,.05);
--glow: 0 0 15px rgba(0,80,200,.12);
--spd: .3s ease;
--backdrop-blur: 18px;
/* Body */
--body-bg: linear-gradient(160deg, #e8f2ff 0%, #f4f8ff 50%, #eef5ff 100%);
--body-dots: radial-gradient(circle, rgba(20,70,180,.07) 1px, transparent 1px);
--body-orb: radial-gradient(ellipse, rgba(0,50,180,.06) 0%, transparent 70%);
/* Sektions-Akzente (Tabelle 3–8) */
--t3-temp: #b85000; --t5-temp: #7a3000;
--t3-solar: #a07000; --t5-solar: #705000;
--t3-wind: #007799; --t5-wind: #005566;
--t3-nied: #2255cc; --t5-nied: #1144aa;
--t3-mond: #6644bb; --t5-mond: #4433aa;
--t3-sonne: #aa7700; --t5-sonne: #7a5500;
/* Temperatur-Spalten */
--temp-aktuell: #7a3000;
--temp-aktuell-size: 18px;
--temp-min: #003a80;
--temp-max: #7a2800;
--temp-avg: #5a4020;
/* Luftfeuchte */
--lf-aktuell: #1a4a8a;
--lf-other: #506880;
--lf-fill-bg: #cdd5dc;
--bar-gap: #eef5ff;
/* Sonstige */
--forecast-t5: #4477aa;
--live-color: #008844;
--stat-bg: linear-gradient(145deg, #4a82bb 0%, #6a55aa 50%, #aa4480 100%);
/* Forecast backgrounds (light: all with .80 alpha) */
--wg-sonnig: linear-gradient(160deg, rgba(255,251,230,.80) 0%, rgba(255,224,130,.80) 40%, rgba(135,206,235,.80) 100%);
--wg-heiter: linear-gradient(160deg, rgba(232,244,255,.80) 0%, rgba(179,217,247,.80) 50%, rgba(255,253,231,.80) 100%);
--wg-veraenderlich: linear-gradient(160deg, rgba(208,232,255,.80) 0%, rgba(176,200,232,.80) 40%, rgba(207,216,220,.80) 100%);
--wg-leicht-bewoelkt: linear-gradient(160deg, rgba(218,238,255,.80) 0%, rgba(197,221,245,.80) 50%, rgba(232,244,255,.80) 100%);
--wg-bewoelkt: linear-gradient(160deg, rgba(207,216,220,.80) 0%, rgba(176,190,197,.80) 60%, rgba(144,164,174,.80) 100%);
--wg-regen: linear-gradient(160deg, rgba( 84,110,122,.80) 0%, rgba( 55, 71, 79,.80) 50%, rgba( 38, 50, 56,.80) 100%);
--wg-schnee: linear-gradient(160deg, rgba(240,245,255,.80) 0%, rgba(221,232,245,.80) 50%, rgba(204,216,232,.80) 100%);
--wg-gewitter: linear-gradient(160deg, rgba( 55, 71, 79,.80) 0%, rgba( 74, 20,140,.80) 50%, rgba( 26, 35,126,.80) 100%);
--wg-stuermisch: linear-gradient(160deg, rgba( 69, 90,100,.80) 0%, rgba( 38, 50, 56,.80) 50%, rgba( 55, 71, 79,.80) 100%);
--wg-regen-veraenderlich: linear-gradient(160deg, rgba(120,144,156,.80) 0%, rgba( 84,110,122,.80) 40%, rgba(122,144,168,.80) 100%);
--wg-schneeregen: linear-gradient(160deg, rgba(176,190,197,.80) 0%, rgba(144,168,192,.80) 50%, rgba(168,192,216,.80) 100%);
--wg-schnee-veraenderlich: linear-gradient(160deg, rgba(224,238,248,.80) 0%, rgba(204,221,240,.80) 40%, rgba(192,208,228,.80) 100%);
--wg-schneeregen-veraenderlich: linear-gradient(160deg, rgba(168,184,204,.80) 0%, rgba(143,160,180,.80) 40%, rgba(168,184,204,.80) 100%);
/* "Veraenderlich" — Wolken-Layer */
--wg-ver-a: radial-gradient(ellipse 150px 55px, rgba(255,255,255,.82) 0%, transparent 62%),
radial-gradient(ellipse 110px 45px, rgba(255,255,255,.72) 0%, transparent 62%),
radial-gradient(ellipse 85px 38px, rgba(255,255,255,.65) 0%, transparent 62%);
--wg-ver-b: radial-gradient(ellipse 95px 40px, rgba(255,255,255,.60) 0%, transparent 62%),
radial-gradient(ellipse 130px 50px, rgba(255,255,255,.55) 0%, transparent 62%);
}
/* Dark mode — applies when system=dark and not manually overridden, or when manual="dark". */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0d1117;
--card: rgba(13, 22, 45, .20);
--bdr: rgba(40,150,255,.17);
--bhov: rgba(60,180,255,.40);
--blue: #4ea8e8;
--white: #ddeeff;
--mid: #6a8aa8;
--t4: rgba(140,180,220,.70);
--sh: 0 8px 40px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.04);
--glow: 0 0 22px rgba(56,182,255,.30), 0 0 60px rgba(56,182,255,.08);
--backdrop-blur: 12px;
--body-bg: #0d1117;
--body-orb: radial-gradient(ellipse, rgba(15,70,220,.18) 0%, transparent 70%);
--t3-temp: #ffaa44; --t5-temp: #ffd0a0;
--t3-solar: #ffcc44; --t5-solar: #ffee99;
--t3-wind: #22ccee; --t5-wind: #88eeff;
--t3-nied: #5599ff; --t5-nied: #99bbff;
--t3-mond: #aa88ff; --t5-mond: #ccbbff;
--t3-sonne: #ffbb44; --t5-sonne: #ffdd99;
--temp-aktuell: #ffe07a;
--temp-min: #88ccff;
--temp-max: #ffaa66;
--temp-avg: rgba(255,200,140,.55);
--lf-aktuell: #88ccff;
--lf-other: #6a8aa8;
--lf-fill-bg: #1a2535;
--bar-gap: #0d1629;
--forecast-t5: #88bbdd;
--live-color: #00cc77;
--stat-bg: linear-gradient(145deg, #1b3d70 0%, #282460 50%, #481e3e 100%);
--wg-sonnig: linear-gradient(160deg, rgba(26,42,16,.20) 0%, rgba(42,58,24,.20) 40%, rgba(13,30,51,.20) 100%);
--wg-heiter: linear-gradient(160deg, rgba(13,30,51,.20) 0%, rgba(22,40,64,.20) 50%, rgba(26,42,16,.20) 100%);
--wg-veraenderlich: linear-gradient(160deg, rgba(13,30,56,.20) 0%, rgba(22,37,64,.20) 40%, rgba(30,42,56,.20) 100%);
--wg-leicht-bewoelkt: linear-gradient(160deg, rgba(13,30,48,.20) 0%, rgba(18,30,44,.20) 50%, rgba(15,30,48,.20) 100%);
--wg-bewoelkt: linear-gradient(160deg, rgba(20,26,32,.20) 0%, rgba(26,32,40,.20) 60%, rgba(20,26,32,.20) 100%);
/* rain & thunderstorm: light-mode definition is already dark, no override needed */
--wg-schnee: linear-gradient(160deg, rgba(20,30,48,.20) 0%, rgba(26,40,64,.20) 50%, rgba(20,30,48,.20) 100%);
--wg-stuermisch: linear-gradient(160deg, rgba(13,19,24,.20) 0%, rgba(18,24,32,.20) 50%, rgba(15,21,32,.20) 100%);
--wg-regen-veraenderlich: linear-gradient(160deg, rgba(15,24,32,.20) 0%, rgba(20,30,40,.20) 40%, rgba(16,24,32,.20) 100%);
--wg-schneeregen: linear-gradient(160deg, rgba(20,30,40,.20) 0%, rgba(26,37,53,.20) 50%, rgba(20,30,40,.20) 100%);
--wg-schnee-veraenderlich: linear-gradient(160deg, rgba(20,30,44,.20) 0%, rgba(26,40,56,.20) 40%, rgba(30,44,64,.20) 100%);
--wg-schneeregen-veraenderlich: linear-gradient(160deg, rgba(18,24,32,.20) 0%, rgba(24,30,44,.20) 40%, rgba(18,24,32,.20) 100%);
--wg-ver-a: radial-gradient(ellipse 150px 55px, rgba(180,210,255,.18) 0%, transparent 62%),
radial-gradient(ellipse 110px 45px, rgba(180,210,255,.14) 0%, transparent 62%),
radial-gradient(ellipse 85px 38px, rgba(180,210,255,.12) 0%, transparent 62%);
--wg-ver-b: radial-gradient(ellipse 95px 40px, rgba(180,210,255,.10) 0%, transparent 62%),
radial-gradient(ellipse 130px 50px, rgba(180,210,255,.09) 0%, transparent 62%);
}
}
html[data-theme="dark"] {
--bg: #0d1117;
--card: rgba(13, 22, 45, .20);
--bdr: rgba(40,150,255,.17);
--bhov: rgba(60,180,255,.40);
--blue: #4ea8e8;
--white: #ddeeff;
--mid: #6a8aa8;
--t4: rgba(140,180,220,.70);
--sh: 0 8px 40px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.04);
--glow: 0 0 22px rgba(56,182,255,.30), 0 0 60px rgba(56,182,255,.08);
--backdrop-blur: 12px;
--body-bg: #0d1117;
--body-orb: radial-gradient(ellipse, rgba(15,70,220,.18) 0%, transparent 70%);
--t3-temp: #ffaa44; --t5-temp: #ffd0a0;
--t3-solar: #ffcc44; --t5-solar: #ffee99;
--t3-wind: #22ccee; --t5-wind: #88eeff;
--t3-nied: #5599ff; --t5-nied: #99bbff;
--t3-mond: #aa88ff; --t5-mond: #ccbbff;
--t3-sonne: #ffbb44; --t5-sonne: #ffdd99;
--temp-aktuell: #ffe07a;
--temp-min: #88ccff;
--temp-max: #ffaa66;
--temp-avg: rgba(255,200,140,.55);
--lf-aktuell: #88ccff;
--lf-other: #6a8aa8;
--lf-fill-bg: #1a2535;
--bar-gap: #0d1629;
--forecast-t5: #88bbdd;
--live-color: #00cc77;
--stat-bg: linear-gradient(145deg, #1b3d70 0%, #282460 50%, #481e3e 100%);
--wg-sonnig: linear-gradient(160deg, rgba(26,42,16,.20) 0%, rgba(42,58,24,.20) 40%, rgba(13,30,51,.20) 100%);
--wg-heiter: linear-gradient(160deg, rgba(13,30,51,.20) 0%, rgba(22,40,64,.20) 50%, rgba(26,42,16,.20) 100%);
--wg-veraenderlich: linear-gradient(160deg, rgba(13,30,56,.20) 0%, rgba(22,37,64,.20) 40%, rgba(30,42,56,.20) 100%);
--wg-leicht-bewoelkt: linear-gradient(160deg, rgba(13,30,48,.20) 0%, rgba(18,30,44,.20) 50%, rgba(15,30,48,.20) 100%);
--wg-bewoelkt: linear-gradient(160deg, rgba(20,26,32,.20) 0%, rgba(26,32,40,.20) 60%, rgba(20,26,32,.20) 100%);
--wg-schnee: linear-gradient(160deg, rgba(20,30,48,.20) 0%, rgba(26,40,64,.20) 50%, rgba(20,30,48,.20) 100%);
--wg-stuermisch: linear-gradient(160deg, rgba(13,19,24,.20) 0%, rgba(18,24,32,.20) 50%, rgba(15,21,32,.20) 100%);
--wg-regen-veraenderlich: linear-gradient(160deg, rgba(15,24,32,.20) 0%, rgba(20,30,40,.20) 40%, rgba(16,24,32,.20) 100%);
--wg-schneeregen: linear-gradient(160deg, rgba(20,30,40,.20) 0%, rgba(26,37,53,.20) 50%, rgba(20,30,40,.20) 100%);
--wg-schnee-veraenderlich: linear-gradient(160deg, rgba(20,30,44,.20) 0%, rgba(26,40,56,.20) 40%, rgba(30,44,64,.20) 100%);
--wg-schneeregen-veraenderlich: linear-gradient(160deg, rgba(18,24,32,.20) 0%, rgba(24,30,44,.20) 40%, rgba(18,24,32,.20) 100%);
--wg-ver-a: radial-gradient(ellipse 150px 55px, rgba(180,210,255,.18) 0%, transparent 62%),
radial-gradient(ellipse 110px 45px, rgba(180,210,255,.14) 0%, transparent 62%),
radial-gradient(ellipse 85px 38px, rgba(180,210,255,.12) 0%, transparent 62%);
--wg-ver-b: radial-gradient(ellipse 95px 40px, rgba(180,210,255,.10) 0%, transparent 62%),
radial-gradient(ellipse 130px 50px, rgba(180,210,255,.09) 0%, transparent 62%);
}
/* Base / body */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
padding: 7px 0 40px;
min-height: 100vh;
background: var(--body-bg);
color: var(--mid);
font-family: var(--fnt-b);
/* horizontal scrolling is allowed */
}
/* Dot grid (replaced by stars in dark mode) */
body::before {
content: '';
position: fixed; inset: 0; z-index: -1;
background-image: var(--body-dots);
background-size: 28px 28px;
pointer-events: none;
}
/* Treibender Glow-Orb */
body::after {
content: '';
position: fixed;
width: 520px; height: 520px;
top: -180px; left: -180px;
background: var(--body-orb);
border-radius: 50%;
filter: blur(55px);
z-index: -1;
animation: orbDrift 22s ease-in-out infinite alternate;
pointer-events: none;
will-change: transform;
}
@keyframes orbDrift {
0% { transform: translate( 0, 0) scale(1.00); }
33% { transform: translate(220px, 80px) scale(1.25); }
66% { transform: translate( 80px,280px) scale(0.90); }
100% { transform: translate(300px,150px) scale(1.15); }
}
hr { border: none; height: 0; margin: 1px 0; }
/* Cards */
table.table1 {
width: 75%;
margin: 5px auto;
padding: 9px 7px;
background: var(--card);
border: 1px solid var(--bdr);
border-radius: var(--r);
box-shadow: var(--sh);
backdrop-filter: blur(var(--backdrop-blur));
-webkit-backdrop-filter: blur(var(--backdrop-blur));
border-spacing: 0;
transition: border-color var(--spd), box-shadow var(--spd);
animation: fadeUp .55s ease both;
}
/* Gestaffelte Einblend-Delays */
table.table1:nth-of-type(1) { animation-delay: .04s; }
table.table1:nth-of-type(2) { animation-delay: .09s; }
table.table1:nth-of-type(3) { animation-delay: .14s; }
table.table1:nth-of-type(4) { animation-delay: .19s; }
table.table1:nth-of-type(5) { animation-delay: .24s; }
table.table1:nth-of-type(6) { animation-delay: .29s; }
table.table1:nth-of-type(7) { animation-delay: .34s; }
table.table1:nth-of-type(8) { animation-delay: .39s; }
table.table1:nth-of-type(9) { animation-delay: .44s; }
table.table1:nth-of-type(10) { animation-delay: .49s; }
table.table1:nth-of-type(11) { animation-delay: .54s; }
table.table1:nth-of-type(12) { animation-delay: .59s; }
table.table2 {
width: 75%;
margin: 5px auto;
border-radius: var(--r);
overflow: hidden;
background: var(--stat-bg);
border: 1px solid rgba(100,140,220,.28);
box-shadow: var(--sh);
border-spacing: 0;
animation: fadeUp .55s .41s ease both;
}
table.table2 T2 { color: rgba(255,255,255,.75) !important; }
table.table2 T5 { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,.35) !important; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Typography */
TR { display: table-row; vertical-align: inherit; border-color: inherit; }
TD { text-align: center; padding: 3px 5px; vertical-align: middle; }
TH { text-align: center; padding: 2px 5px; vertical-align: middle; }
T1 {
display: block;
font-family: var(--fnt-b);
font-size: 15px;
font-weight: 700;
color: var(--white) !important;
text-align: center;
line-height: 1.4;
padding: 7px 0 3px;
letter-spacing: .5px;
}
T2 {
display: block;
font-family: var(--fnt-b);
font-size: 10px;
font-weight: 600;
color: var(--mid) !important;
text-transform: uppercase;
letter-spacing: .5px;
line-height: 1.2;
}
T3 {
display: block;
font-family: var(--fnt-b);
font-size: 13px;
font-weight: 700;
color: var(--blue) !important;
text-transform: uppercase;
letter-spacing: 2.5px;
padding: 4px 0 1px;
}
T3::after {
content: '';
display: block;
height: 2px;
width: 65%;
margin-top: 3px;
background: linear-gradient(90deg, currentColor 0%, transparent 100%);
opacity: .6;
}
T4 {
display: block;
font-family: var(--fnt-b);
font-size: 11px;
font-weight: 700;
color: var(--t4) !important;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 7px 0 1px;
}
T5 {
display: block;
font-family: var(--fnt-b);
font-size: 16px;
font-weight: 600;
color: var(--white) !important;
padding: 2px 1px 3px;
letter-spacing: .3px;
}
/* Live-Indikator bei der 1. Karte */
table:nth-of-type(1) T2::before {
content: '\25CF\00A0';
color: var(--live-color);
font-size: 9px;
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%,100% { opacity: 1; }
50% { opacity: .2; }
}
/* Wettervorhersage — kursiv */
table:nth-of-type(2) T5 {
font-style: italic;
font-size: 15px;
color: var(--forecast-t5) !important;
}
/* Forecast backgrounds (second card with data-wetter attribute) */
table.table1[data-wetter] { transition: background var(--spd); }
table.table1[data-wetter="sonnig"] { background: var(--wg-sonnig); }
table.table1[data-wetter="heiter"] { background: var(--wg-heiter); }
table.table1[data-wetter="veraenderlich"] { background: var(--wg-veraenderlich); position: relative; overflow: hidden; }
table.table1[data-wetter="leicht-bewoelkt"] { background: var(--wg-leicht-bewoelkt); }
table.table1[data-wetter="bewoelkt"] { background: var(--wg-bewoelkt); }
table.table1[data-wetter="regen"] { background: var(--wg-regen); }
table.table1[data-wetter="schnee"] { background: var(--wg-schnee); }
table.table1[data-wetter="gewitter"] { background: var(--wg-gewitter); }
table.table1[data-wetter="stuermisch"] { background: var(--wg-stuermisch); }
table.table1[data-wetter="regen-veraenderlich"] { background: var(--wg-regen-veraenderlich); }
table.table1[data-wetter="schneeregen"] { background: var(--wg-schneeregen); }
table.table1[data-wetter="schnee-veraenderlich"] { background: var(--wg-schnee-veraenderlich); }
table.table1[data-wetter="schneeregen-veraenderlich"] { background: var(--wg-schneeregen-veraenderlich); }
/* Generic: weather cards need relative positioning + cells above ::before/::after */
table.table1[data-wetter] {
position: relative;
overflow: hidden;
}
table.table1[data-wetter] td,
table.table1[data-wetter] th,
table.table1[data-wetter] tr {
position: relative;
z-index: 1;
}
/* "veraenderlich" — bewegte Wolken */
table.table1[data-wetter="veraenderlich"]::before {
content: '';
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
background: var(--wg-ver-a);
background-repeat: no-repeat;
background-size: 150px 55px, 110px 45px, 85px 38px;
animation: wolken-a 22s linear infinite;
}
table.table1[data-wetter="veraenderlich"]::after {
content: '';
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
background: var(--wg-ver-b);
background-repeat: no-repeat;
background-size: 95px 40px, 130px 50px;
animation: wolken-b 13s linear infinite;
}
@keyframes wolken-a {
0% { background-position: -150px 35%, 250px 62%, 580px 18%; }
100% { background-position: 900px 35%, 1400px 62%, 1730px 18%; }
}
@keyframes wolken-b {
0% { background-position: 80px 55%, -130px 78%; }
100% { background-position: 1175px 55%, 1000px 78%; }
}
/* ─── sonnig — pulsierender warmer Sonnen-Glow ─────────────── */
table.table1[data-wetter="sonnig"]::before {
content: '';
position: absolute; inset: 0;
z-index: 0; pointer-events: none;
background: radial-gradient(circle at 82% 30%,
rgba(255,210, 90, 0.55) 0%,
rgba(255,180, 60, 0.25) 22%,
transparent 55%);
animation: sonnig-pulse 4.5s ease-in-out infinite;
will-change: opacity, transform;
}
@keyframes sonnig-pulse {
0%, 100% { opacity: 0.75; transform: scale(1.00); }
50% { opacity: 1.00; transform: scale(1.10); }
}
/* ─── bewoelkt — driftende dichte Wolken ─────────────────── */
table.table1[data-wetter="bewoelkt"]::before {
content: '';
position: absolute; inset: -20px 0;
z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 600px 100%;
background-repeat: repeat-x;
animation: wolken-drift-bewoelkt 60s linear infinite;
will-change: background-position;
}
@keyframes wolken-drift-bewoelkt {
from { background-position: 0 0; }
to { background-position: -600px 0; }
}
/* ─── leicht-bewoelkt — wenige helle Wolken ──────────────── */
table.table1[data-wetter="leicht-bewoelkt"]::before {
content: '';
position: absolute; inset: -20px 0;
z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 800px 100%;
background-repeat: repeat-x;
animation: wolken-drift-leicht 90s linear infinite;
will-change: background-position;
}
@keyframes wolken-drift-leicht {
from { background-position: 0 0; }
to { background-position: -800px 0; }
}
/* ─── schnee — fallende Schneeflocken ────────────────────── */
table.table1[data-wetter="schnee"]::before {
content: '';
position: absolute; inset: 0;
z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
animation: schnee-fall 8s linear infinite;
will-change: background-position;
}
@keyframes schnee-fall {
from { background-position: 0 0; }
to { background-position: 0 200px; }
}
/* ─── regen — fallende Tropfen (gleicher Effekt wie Niederschlag-Karte) ─── */
table.table1[data-wetter="regen"]::before {
content: '';
position: absolute; inset: 0;
z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
animation: regen-vorhersage 1.0s linear infinite;
will-change: background-position;
}
@keyframes regen-vorhersage {
from { background-position: 0 0; }
to { background-position: 0 200px; }
}
/* ─── schneeregen — Mix: Schnee (langsam) + Regen (schnell) ─── */
table.table1[data-wetter="schneeregen"]::before {
content: '';
position: absolute; inset: 0;
z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
animation: schnee-fall 9s linear infinite;
will-change: background-position;
}
table.table1[data-wetter="schneeregen"]::after {
content: '';
position: absolute; inset: 0;
z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
animation: regen-vorhersage 1.4s linear infinite;
will-change: background-position;
}
/* Light mode — white text on dark weather backgrounds */
table.table1[data-wetter="regen"] T3,
table.table1[data-wetter="regen"] T5,
table.table1[data-wetter="gewitter"] T3,
table.table1[data-wetter="gewitter"] T5,
table.table1[data-wetter="stuermisch"] T3,
table.table1[data-wetter="stuermisch"] T5,
table.table1[data-wetter="regen-veraenderlich"] T3,
table.table1[data-wetter="regen-veraenderlich"] T5 {
color: #ffffff !important;
}
table.table1[data-wetter="regen"] T2,
table.table1[data-wetter="gewitter"] T2,
table.table1[data-wetter="stuermisch"] T2,
table.table1[data-wetter="regen-veraenderlich"] T2 {
color: rgba(255,255,255,.70) !important;
}
/* Dark-Mode — helle Schrift auf allen Wetter-Karten */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) table.table1[data-wetter] T3 { color: #88ccff !important; }
:root:not([data-theme="light"]) table.table1[data-wetter] T5 { color: #ddeeff !important; }
:root:not([data-theme="light"]) table.table1[data-wetter] T2 { color: rgba(160,200,240,.70) !important; }
}
html[data-theme="dark"] table.table1[data-wetter] T3 { color: #88ccff !important; }
html[data-theme="dark"] table.table1[data-wetter] T5 { color: #ddeeff !important; }
html[data-theme="dark"] table.table1[data-wetter] T2 { color: rgba(160,200,240,.70) !important; }
/* Section accent colors (tables 3–8) */
table:nth-of-type(3) T3 { color: var(--t3-temp) !important; }
table:nth-of-type(3) T5 { color: var(--t5-temp) !important; }
table:nth-of-type(4) T3 { color: var(--t3-solar) !important; }
table:nth-of-type(4) T5 { color: var(--t5-solar) !important; }
table:nth-of-type(5) T3 { color: var(--t3-wind) !important; }
table:nth-of-type(5) T5 { color: var(--t5-wind) !important; }
table:nth-of-type(6) T3 { color: var(--t3-nied) !important; }
table:nth-of-type(6) T5 { color: var(--t5-nied) !important; }
table:nth-of-type(7) T3 { color: var(--t3-mond) !important; }
table:nth-of-type(7) T5 { color: var(--t5-mond) !important; }
table:nth-of-type(8) T3 { color: var(--t3-sonne) !important; }
table:nth-of-type(8) T5 { color: var(--t5-sonne) !important; }
/* Temperature columns (table 3, row 3) */
table:nth-of-type(3) tr:nth-child(3) { position: static; }
table:nth-of-type(3) tr:nth-child(3)::before,
table:nth-of-type(3) tr:nth-child(3)::after { display: none; }
table:nth-of-type(3) tr:nth-child(3) td {
position: relative; z-index: 1;
padding-top: 5px; padding-bottom: 5px;
}
table:nth-of-type(3) tr:nth-child(3) td:nth-child(1) T5 {
font-size: var(--temp-aktuell-size) !important;
color: var(--temp-aktuell) !important;
text-shadow: none !important;
}
table:nth-of-type(3) tr:nth-child(3) td:nth-child(2) T5 {
color: var(--temp-min) !important;
text-shadow: none !important;
}
table:nth-of-type(3) tr:nth-child(3) td:nth-child(3) T5 {
color: var(--temp-max) !important;
text-shadow: none !important;
}
table:nth-of-type(3) tr:nth-child(3) td:nth-child(4) T5 {
font-size: 13px !important;
color: var(--temp-avg) !important;
text-shadow: none !important;
}
/* Humidity */
.lf-wert-row td:nth-child(1) T5 {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--lf-aktuell) !important;
}
.lf-wert-row td:nth-child(2) T5,
.lf-wert-row td:nth-child(3) T5,
.lf-wert-row td:nth-child(4) T5 {
font-size: 12px !important;
color: var(--lf-other) !important;
}
.lf-bar-cell { padding: 2px 60px 7px !important; }
.lf-bar {
position: relative;
height: 14px;
border-radius: 7px;
overflow: hidden;
background: linear-gradient(to left,
#4499ff 0%,
#44ccbb 28%,
#66dd44 50%,
#ffdd22 68%,
#ff9922 82%,
#ff4444 100%
);
}
.lf-bar::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
left: calc(var(--hum, 0) * 1%);
background: var(--lf-fill-bg);
z-index: 1;
}
.lf-bar::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: repeating-linear-gradient(
to right,
transparent 0, transparent 7px,
var(--bar-gap) 7px, var(--bar-gap) 10px
);
}
/* Rain animation (always dark background) */
table.regen-aktiv {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #6a8ea8 0%, #3d5a72 40%, #2c4860 100%) !important;
}
table.regen-aktiv td,
table.regen-aktiv th,
table.regen-aktiv tr {
position: relative;
z-index: 1;
}
/* Rain layer 1 (front): thin streak + bright droplet at the bottom */
table.regen-aktiv::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
animation: regen-fall 0.8s linear infinite;
will-change: background-position;
}
/* Regen-Layer 2 (hinten) — kleinere, blassere Tropfen, langsamer = Tiefen-Parallax */
table.regen-aktiv::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 280px 280px;
background-repeat: repeat;
animation: regen-fall-slow 1.5s linear infinite;
will-change: background-position;
}
/* Both loops shift vertically by exactly one tile height for seamless animation */
@keyframes regen-fall { from { background-position: 0 0; } to { background-position: 0 200px; } }
@keyframes regen-fall-slow { from { background-position: 0 0; } to { background-position: 0 280px; } }
table.regen-aktiv T3 { color: #aad4ff !important; }
table.regen-aktiv T4 { color: rgba(180,215,255,.80) !important; }
table.regen-aktiv T5 { color: #e8f4ff !important; }
table.regen-aktiv T2 { color: rgba(180,215,255,.65) !important; }
/* Moon card — always night-sky background, regardless of theme */
table.mond-karte {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #090e20 0%, #0d1530 50%, #080d1e 100%) !important;
}
table.mond-karte td,
table.mond-karte th,
table.mond-karte tr {
position: relative;
z-index: 1;
}
table.mond-karte::before {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 50%;
width: calc(var(--mond-phase, 50) * 1px + 30px);
height: calc(var(--mond-phase, 50) * 1px + 30px);
left: calc(var(--mond-x, 50) * 1%);
top: 28px;
transform: translateX(-50%);
background: radial-gradient(circle,
rgba(255,255,235,.90) 0%,
rgba(240,240,210,.65) 30%,
rgba(200,200,175,.30) 60%,
rgba(150,155,170,.08) 80%,
transparent 100%);
filter: blur(14px);
opacity: calc(var(--mond-phase, 50) * 0.0038 + 0.06);
}
table.mond-karte::after {
content: '';
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 50%;
width: calc(var(--mond-phase, 50) * 0.55px + 14px);
height: calc(var(--mond-phase, 50) * 0.55px + 14px);
left: calc(var(--mond-x, 50) * 1%);
top: 28px;
transform: translateX(-50%);
background: radial-gradient(circle,
rgba(255,255,250,1.00) 0%,
rgba(250,250,235,.90) 35%,
rgba(220,220,200,.50) 65%,
transparent 100%);
filter: blur(5px);
opacity: calc(var(--mond-phase, 50) * 0.0038 + 0.06);
}
table.mond-karte T3 { color: #9977dd !important; }
table.mond-karte T4 { color: rgba(175,155,215,.75) !important; }
table.mond-karte T5 { color: #ddeeff !important; }
table.mond-karte T2 { color: rgba(155,145,195,.65) !important; }
/* Theme-toggle button */
#theme-toggle {
position: fixed;
top: 14px; right: 16px;
z-index: 9999;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--bdr);
background: var(--card);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s, border-color var(--spd);
box-shadow: var(--sh);
padding: 0;
font-size: 0;
}
#theme-toggle:hover { transform: scale(1.12); }
#theme-toggle::before {
font-size: 16px;
line-height: 1;
color: var(--mid);
content: '\263D'; /* ☽ */
}
html[data-theme="dark"] #theme-toggle::before { content: '\2600'; /* ☀ */ }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) #theme-toggle::before { content: '\2600'; }
}
/* Night sky — stars, clouds, shooting stars (dark mode only) */
#nachthimmel {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
display: none;
}
html[data-theme="dark"] #nachthimmel { display: block; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) #nachthimmel { display: block; }
/* Dot-Grid wird von Sternen ersetzt */
html:not([data-theme="light"]) body::before { display: none; }
}
html[data-theme="dark"] body::before { display: none; }
/* ─── Stern-Layer — box-shadow-Trick, in JS generiert ─── */
.sterne {
position: absolute;
top: 0; left: 0;
width: 1px; height: 1px;
background: transparent;
border-radius: 50%;
will-change: opacity;
}
.sterne-klein { animation: sterne-flimmern 5.5s ease-in-out infinite; }
.sterne-mittel { animation: sterne-flimmern 3.8s ease-in-out 1.2s infinite; }
.sterne-gross { animation: sterne-flimmern 6.5s ease-in-out 0.6s infinite; }
@keyframes sterne-flimmern {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* ─── Wolken — zwei Pseudo-Layer + translateX
GPU-beschleunigt, nahtlos durch versetzte Startpositionen ─── */
.wolken-nacht {
position: absolute;
inset: -120px 0;
opacity: 0.9;
pointer-events: none;
}
.wolken-nacht::before,
.wolken-nacht::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 100%;
filter: blur(5px);
background-repeat: no-repeat;
background-image:
/* Wolke 1 */
radial-gradient(ellipse 210px 75px at 12% 18%, rgba(55,72,105,0.72) 0%, rgba(55,72,105,0.32) 50%, transparent 78%),
radial-gradient(ellipse 150px 55px at 20% 14%, rgba(62,80,118,0.62) 0%, transparent 78%),
radial-gradient(ellipse 175px 62px at 28% 20%, rgba(48,66,100,0.58) 0%, transparent 78%),
/* Wolke 2 */
radial-gradient(ellipse 230px 80px at 80% 9%, rgba(55,70,102,0.70) 0%, transparent 78%),
radial-gradient(ellipse 165px 58px at 88% 13%, rgba(65,82,118,0.60) 0%, transparent 78%),
radial-gradient(ellipse 180px 62px at 72% 14%, rgba(48,66,100,0.55) 0%, transparent 78%),
/* Wolke 3 */
radial-gradient(ellipse 210px 72px at 95% 48%, rgba(55,72,105,0.58) 0%, transparent 78%),
radial-gradient(ellipse 145px 52px at 86% 51%, rgba(60,78,112,0.50) 0%, transparent 78%),
/* Wolke 4 */
radial-gradient(ellipse 270px 82px at 35% 88%, rgba(50,66, 98,0.58) 0%, transparent 78%),
radial-gradient(ellipse 175px 58px at 42% 84%, rgba(58,75,110,0.50) 0%, transparent 78%),
radial-gradient(ellipse 185px 62px at 52% 90%, rgba(48,64, 98,0.48) 0%, transparent 78%);
animation: wolken-nacht-drift 140s linear infinite;
will-change: transform;
}
.wolken-nacht::before { left: 0; }
.wolken-nacht::after { left: -100%; }
@keyframes wolken-nacht-drift {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
/* ─── Sternschnuppen ─── */
.sternschnuppe {
position: absolute;
width: 3px; height: 3px;
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 8px 2px rgba(255,255,255,0.95),
0 0 22px 5px rgba(200,220,255,0.55);
opacity: 0;
pointer-events: none;
animation: sternschnuppe-fall var(--dauer, 1.4s) cubic-bezier(.25,.50,.50,1) forwards;
}
.sternschnuppe::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 150px; height: 1.8px;
background: linear-gradient(to right,
rgba(255,255,255,0.95) 0%,
rgba(200,220,255,0.55) 35%,
rgba(200,220,255,0.15) 75%,
transparent 100%);
transform-origin: 0 50%;
transform: rotate(var(--trail-rot, 315deg)) translateY(-0.9px);
filter: blur(0.6px);
}
@keyframes sternschnuppe-fall {
0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
12% { opacity: 1;
transform: translate(calc(var(--dx, -30vh) * 0.08),
calc(var(--dy, 5vh) * 0.08)) scale(1); }
88% { opacity: 1; }
100% { opacity: 0;
transform: translate(var(--dx, -30vh), var(--dy, 5vh)) scale(1); }
}