@font-face {
  font-family: 'HelveticaNeue-UltraLight';
  src: url('../font/HelveticaNeue-UltraLight.eot'); /* IE9 Compat Modes */
  src: url('../font/HelveticaNeue-UltraLight.eot%3F') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/HelveticaNeue-UltraLight.woff') format('woff'), /* Modern Browsers */
       url('../font/HelveticaNeue-UltraLight.ttf.html')  format('truetype'), /* Safari, Android, iOS */
       url('../font/HelveticaNeue-UltraLight.svg') format('svg'); /* Legacy iOS */
  font-style:   normal;
  font-weight:  100;
}



@font-face {
  font-family: 'HelveticaNeue-Medium';
  src: url('../font/HelveticaNeue-Medium.eot'); /* IE9 Compat Modes */
  src: url('../font/HelveticaNeue-Medium.eot%3F') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/HelveticaNeue-Medium.woff') format('woff'), /* Modern Browsers */
       url('../font/HelveticaNeue-Medium.ttf.html')  format('truetype'), /* Safari, Android, iOS */
       url('../font/HelveticaNeue-Medium.svg') format('svg'); /* Legacy iOS */ 
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'HelveticaNeue-Light';
  src: url('../font/HelveticaNeue-Light.eot'); /* IE9 Compat Modes */
  src: url('../font/HelveticaNeue-Light.eot%3F') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */
       url('../font/HelveticaNeue-Light.ttf.html')  format('truetype'), /* Safari, Android, iOS */
       url('../font/HelveticaNeue-Light.svg') format('svg'); /* Legacy iOS */      
  font-style:   normal;
  font-weight:  200;
}

body {
	background-color:#000000;	
}

body,html {
	margin:0px;
	padding:0px;
}

img {
	border:0px;
}


#wrapper {
			
}

#weather {
	color:#ffffff;	
	display:block;
	float:right;
	margin-right:50px;
	margin-top:30px;
	width:370px;
}

.stadt {
	font-family:HelveticaNeue-Light;
	font-size:50px;	
	text-align:center;
	letter-spacing:10px;
}

.icon {
	font-size:40px;	
	float:left;
	margin-top:20px;
}

.temp {
	font-size:70px;	
	float:left;	
	margin-left:20px;
	font-family:HelveticaNeue-Light;
}

.updown {
	float:left;	
	margin-top:10px;
	margin-left:10px;
}

.up {
	font-family:HelveticaNeue-Light;
	font-size:30px;	
	padding-left:10px;
	float:left;
}

.down {
	clear:both;
	font-family:HelveticaNeue-Light;	
	font-size:30px;	
	padding-left:10px;
	float:left;
	margin-top:-15px;
}

.upvalue {
	font-family:HelveticaNeue-Light;
	font-size:25px;	
	padding-left:10px;
	float:left;	
	margin-top:4px;	
}

.downvalue {
	font-family:HelveticaNeue-Light;	
	font-size:25px;	
	padding-left:10px;
	float:left;
	margin-top:-10px;
}

.weatherfirst {
	border-bottom:1px solid #FFFFFF;	
	display:none;
	float:left;
	margin:10px;
}

.sunriseicon {
	float:left;
}

.sunrise {
	float:left;	
	margin-left:10px;
	font-family:HelveticaNeue-Light;
}

.sunseticon {
	float:left;
	margin-left:30px;
}

.sunset {
	float:left;	
	margin-left:10px;
	font-family:HelveticaNeue-Light;
}

.windspeed {
	float:left;	
	margin-left:10px;
	font-family:HelveticaNeue-Light;	
}

.windspeedicon {
	float:left;
	margin-left:30px;	
}

.weathersecond {
	clear:both;
	float:left;
	margin:10px;
	font-size:19px;
	display:none;
}

#kalender {
	width:100%;		
	position:absolute;
	bottom:0px;
	color:#FFFFFF;
	display:none;
}

#kalender h1 {
	font-family:HelveticaNeue-Light;
	margin:0px;
	padding:0px;
	text-align:center;
	font-weight:normal;
	float:left;
	margin-left:30px;
	margin-top:10px;
}

.day1 {
	width:33%;
	float:left;
	padding-bottom:30px;
}

.day2 {
	border-left:1px solid #CCCCCC;	
	width:33%;
	float:left;
	padding-bottom:30px;
}

.day3 {
	border-left:1px solid #CCCCCC;	
	width:33%;
	float:left;
	padding-bottom:30px;
}

#today {
	color:#FFFFFF;
	font-family:HelveticaNeue-Light;
	float:left;
	font-size:40px;
	margin-left:50px;
	margin-top:50px;
	display:none;
}

.eintrag {
	margin-top:20px;
	margin-left:30px;
}

.holiday {
	clear:both;
	float:left;
	background-image:url(../img/holiday.png);
	background-size:30px 30px;
	padding-left:40px;
	background-repeat:no-repeat;
	box-sizing:border-box;
	margin:0 auto;
	font-family:HelveticaNeue-Light;
	font-size:20px;
	margin-bottom:10px;
}

.birthday {
	clear:both;
	float:left;
	background-image:url(../img/birthday.png);
	background-size:30px 30px;
	padding-left:40px;
	background-repeat:no-repeat;
	box-sizing:border-box;
	margin:0 auto;
	font-family:HelveticaNeue-Light;
	font-size:20px;
	margin-bottom:10px;
}

.noentry {
	clear:both;
	float:left;
	padding-left:40px;
	background-repeat:no-repeat;
	box-sizing:border-box;
	margin:0 auto;
	font-family:HelveticaNeue-Light;
	font-size:20px;
	margin-bottom:10px;
}

.forecast {
	margin:0 auto;	
	width:120px;
	margin-top:5px;
	float:right;
	margin-right:30px;
}

.forecasticon {
	float:left;
	font-size:40px;
}

.forecasttemp {
	float:left;
	font-family:HelveticaNeue-Light;
	font-size:20px;	
	margin-left:20px;
	margin-top:1px;
}

#uhr {
	color:#FFFFFF;	
	font-family:HelveticaNeue-Light;
	font-size:90px;
}

#message {
	clear:both;
	color:#FFFFFF;
	font-family:HelveticaNeue-Light;
	font-size:50px;
	width:100%;
	float:left;
	text-align:center;
	margin-top:0px;
	min-height:300px;
}

.item {
	position:absolute;
	top:0px;
	display:none;
	text-align:center;
	left: 2.5%;
    width: 95%;
}

.bitcoin {
	float:left;
	width:100%;
	font-family:HelveticaNeue-Light;
	margin-top:50px;
	padding:10px;
	box-sizing:border-box;
	width:50%;
}

.bitcoin img {
	float:left;
	width:30px;
}

.bitcoin .bcvalue {
	float:left;
	margin-left:20px;
	font-size:24px;
}

.ethereum {
	float:left;
	width:100%;
	font-family:HelveticaNeue-Light;
	margin-top:50px;
	padding:10px;
	box-sizing:border-box;
	width:50%
}

.ethereum img {
	float:left;
	height:30px;
}

.ethereum .ethvalue {
	float:left;
	margin-left:20px;
	font-size:24px;
}

#lastgame {
	position:absolute;
	top:500px;
	width:100%;
	text-align: center;
	font-family:HelveticaNeue-Light;
	color:#FFFFFF;
	display:none;
}

#lastgame h1 {
	letter-spacing: 4px;
}

#lastgame .mannschaft1 {
	float:left;
	width:40%;
	text-align: right;
	line-height: 28px;
}

#lastgame .ergebnis {
	float:left;
	width:20%;
	font-size: 40px;
}

#lastgame .mannschaft2 {
	float:left;
	width:40%;
	text-align: left;
	line-height: 28px;
}

/* #lastgame .game_entry {
    clear:both;
} */
.cleardiv {
	clear:both;
	height:0px;
}

/* ============================================================
   Bitcoin-Block — Ausbau 28.07.2026 (Emma Stark)
   EINE Zeile: Logo, Euro-Kurs, Dollar-Kurs, und rechts aussen die
   24h-Veraenderung (gleiche Schriftgroesse, aber gruen/rot).
   Direkt darunter der 24h-Verlaufsgraph — bewusst eng angesetzt,
   damit der Block flach bleibt. Sitzt weiter oben rechts.
   Schriftgroesse 34px: gross genug fuer den Spiegel (Untergrenze
   sind die alten 24px) und schmal genug, dass die vier Elemente
   in eine Zeile passen, ohne mit Datum/Uhrzeit zu kollidieren.
   ============================================================ */

#weather {
	width: 480px;
}

.bitcoin {
	float: none;
	width: 100%;
}

.bitcoin .bcrow {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bitcoin img {
	float: none;
	width: 34px;
	flex-shrink: 0;
}

.bitcoin .bcvalue,
.bitcoin .usdvalue {
	float: none;
	margin-left: 0;
	font-size: 34px;
	line-height: 1;
	white-space: nowrap;
}

/* margin-left:auto schiebt die Veraenderung ans rechte Ende der Zeile */
.bitcoin .bcchange {
	font-size: 34px;
	line-height: 1;
	white-space: nowrap;
	margin-left: auto;
}

/* Zustandsklasse up/down haengt am HTML-Container .bitcoin, NICHT am <svg>:
   jQuery 1.10 kann addClass() auf SVG-Elementen nicht (className ist dort
   ein SVGAnimatedString) — die Klasse kaeme nie an, die Linie bliebe farblos. */
.bitcoin.up   .bcchange { color: #3ee888; }
.bitcoin.down .bcchange { color: #ff5c5c; }

.bitcoin .bcchart {
	display: block;
	width: 100%;
	height: 60px;
	margin-top: 8px;
}

.bitcoin .bcchart .line {
	fill: none;
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.bitcoin .bcchart .area { stroke: none; }

.bitcoin.up   .bcchart .line { stroke: #3ee888; }
.bitcoin.up   .bcchart .area { fill: rgba(62, 232, 136, 0.18); }
.bitcoin.down .bcchart .line { stroke: #ff5c5c; }
.bitcoin.down .bcchart .area { fill: rgba(255, 92, 92, 0.18); }