modified: app.py

modified:   static/css/style.css
	modified:   static/icons/Bildnachweis.txt
	deleted:    static/icons/mond.png
	new file:   static/icons/nacht(1).png
	new file:   static/icons/nacht(2).png
	new file:   static/icons/nacht(3).png
	new file:   static/icons/nacht.png
	new file:   static/icons/nebel.png
	new file:   static/icons/nebel_wolkig.png
	new file:   static/icons/wolkig_nebel_sonne.png
	modified:   templates/weather.html

static/css/style.css

@@ -261,6 +261,7 @@ main { flex: 1; }
 .w-cloudy   { background: linear-gradient(135deg, #0e1218 0%, #1c262e 60%, #0a0c10 100%); }
 .w-rain     { background: linear-gradient(135deg, #050d18 0%, #0d2035 60%, #080c12 100%); }
 .w-snow     { background: linear-gradient(135deg, #0d1520 0%, #162035 60%, #0a0d12 100%); }
+.w-night    { background: linear-gradient(135deg, #060810 0%, #0d1028 60%, #050608 100%); }
 
 .hero::before {
   content: "";
@@ -414,10 +415,37 @@ main { flex: 1; }
 .hcard-icon img { display: block; }
 
 /* Weather icon images */
-.wx-icon { display: inline-block; flex-shrink: 0; }
+.wx-icon { display: block; flex-shrink: 0; }
 .wx-icon--hero { width: 56px; height: 56px; }
 .wx-icon--card { width: 36px; height: 36px; }
 .wx-icon--row  { width: 28px; height: 28px; }
+
+/* Coloured accent box behind each weather icon */
+.wx-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 7px;
+  flex-shrink: 0;
+  /* default fallback */
+  background: linear-gradient(135deg, #1e2a38 0%, #2a3a4e 100%);
+}
+/* Day icons */
+.wx-icon-wrap[data-icon="sonne"]       { background: linear-gradient(135deg, #e07010 0%, #f5c020 100%); }
+.wx-icon-wrap[data-icon="wolkig(2)"]   { background: linear-gradient(135deg, #3a82b0 0%, #d08030 100%); }
+.wx-icon-wrap[data-icon="wolke"]       { background: linear-gradient(135deg, #3e5a74 0%, #5a7896 100%); }
+.wx-icon-wrap[data-icon="wolkig"]      { background: linear-gradient(135deg, #303e4c 0%, #485a6c 100%); }
+.wx-icon-wrap[data-icon="wolkig(1)"]   { background: linear-gradient(135deg, #1a6090 0%, #4090c0 100%); }
+.wx-icon-wrap[data-icon="regen"]       { background: linear-gradient(135deg, #0e3050 0%, #1a5080 100%); }
+.wx-icon-wrap[data-icon="schnee"]      { background: linear-gradient(135deg, #3070a8 0%, #70b8e0 100%); }
+.wx-icon-wrap[data-icon="blitz"]       { background: linear-gradient(135deg, #1e1040 0%, #5030a0 100%); }
+.wx-icon-wrap[data-icon="wolkig_nebel_sonne"] { background: linear-gradient(135deg, #706858 0%, #a09880 100%); }
+/* Night icons */
+.wx-icon-wrap[data-icon="nacht"]       { background: linear-gradient(135deg, #080c20 0%, #141c40 100%); }
+.wx-icon-wrap[data-icon="nacht(1)"]    { background: linear-gradient(135deg, #0c1228 0%, #1e2848 100%); }
+.wx-icon-wrap[data-icon="nacht(2)"]    { background: linear-gradient(135deg, #081020 0%, #102040 100%); }
+.wx-icon-wrap[data-icon="nacht(3)"]    { background: linear-gradient(135deg, #0c1830 0%, #1e3858 100%); }
 .hcard-temp { font-size: 1rem; font-weight: 700; }
 .hcard-precip      { font-size: 0.7rem; color: var(--blue); font-weight: 500; }
 .hcard-precip--none { color: var(--muted); font-weight: 400; }

static/icons/Bildnachweis.txt

@@ -1 +1 @@
-Freepik, 
+Freepik, iconixar