/* main.css */
 /*
 Def von Farben
                   organic
 -------------------------
 Blau              #14a9ff
 Yellow            #FFFF00

 background-color: #CCCCCC;
 color:            #CCCCCC;
 Panel             #393939
 Panel schatten    #565656

  */
* {margin: 0; padding: 0;}
body {
	background-color: #CCCCCC;
	color: #CCCCCC;
	font-family: 'Oxygen', sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
    font-size: 16px;
}
a:link, a:visited, a:active, a:hover {
  color: #CCCCCC;
  text-decoration: none;
}
div:link, div:visited, div:active, div:hover {
  color: #CCCCCC;
  text-decoration: none;
}

h1::first-letter, h2::first-letter, h3::first-letter {color: #14a9ff}

h1{ font-size: 400%; padding-top: 10px }
h3{ font-size: 180%; padding-top: 5px; font-weight: 400}

small {
    font-size:x-small;
}
div{
 font-weight: 400;
}

/* ---------------------------------------------ab hier tabelle*/
.myhaupt{
    width: 100%;
}
table {
    border-collapse: collapse;
    border-top: 3px solid !important;
    width: 100%;
}

table, th, td {
    text-align: center;
}

div.table {
	display: table;
	border-collapse: collapse;
    width: 100%;

}
div.tableStd {
	display: none;
}

div.tr {
	display: table-row;
}

div.td {
    font-size:120%;
	display: table-cell;
	padding: 4px;
    width: auto;
    min-width: 40px;
    vertical-align: middle
}
.tabklein{
    font-size: 90% !important;
}
.tabunterlinie{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.28);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.28);
    box-shadow: 0 0 5px rgba(0,0,0,0.28);
}
.firstblau{
}
.firstblau::first-letter {color: #14a9ff}
.blau{
    color: #14a9ff;
}
.gelb{
    color: #FFFF00;
}
.tabright{
  text-align: right;
}
.myUno{
  min-width: 55px
}
.myDue{
  min-width: 80px;
}
.myDay{
    position: relative;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 94%;
    padding: 4px;
    background-color:#393939;
    border: 1px solid #393939;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px black;
    background: #393939; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(0deg, #393939, #565656); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(0deg, #393939, #565656); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(0deg, #393939, #565656); /* For Firefox 3.6 to 15 */
    background: linear-gradient(0deg, #393939, #565656); /* Standard syntax */
}

/* ---------------------------------------------bis hier tabelle*/

div.sektionglobal{
    position: relative;
    margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
    width: 94%;
    padding: 5px;
    background-color:#393939;
    border: 1px solid #393939;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px black;
    background: #393939; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(0deg, #393939, #565656); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(0deg, #393939, #565656); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(0deg, #393939, #565656); /* For Firefox 3.6 to 15 */
    background: linear-gradient(0deg, #393939, #565656); /* Standard syntax */
    min-height: 300px
}

div.sektionheader {
    position: relative;
    height: 300px;
    padding-left: 10px;
}
div.wetterbild {
    position: absolute;
    top:  0px;
    right: 0px;
    width: 40%;
    height: 55%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:28% auto;
}
div.wettertemp {
    position: absolute;
    display: table-cell;
    vertical-align: bottom;
    bottom: 0px;
    right: 0px;
    width: 40%;
    font-size: 500%;
    text-align: center;
}
div.wettercode {
    position: absolute;
    display: table-cell;
    vertical-align: bottom;
    bottom: 0px;
    width: 55%;
    font-size: 200%;
    text-align: left;
    padding-bottom: 10px;
    background-repeat: no-repeat;
}
div.wettercode::first-letter {color: #14a9ff}
.klein{
    text-align: center;
    font-size: 30%;
    right: 0px;
}
.sektionfooter{
    width: calc(100% - 10px);
    display: table;
    margin-top: 10px;
    padding: 5px;
    height: auto;
    font-size: 150%;
    background-repeat: no-repeat;
    background: #393939; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(0deg, #393939, #565656); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(0deg, #393939, #565656); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(0deg, #393939, #565656); /* For Firefox 3.6 to 15 */
    background: linear-gradient(0deg, #393939, #565656); /* Standard syntax */
    vertical-align: middle
}

.footer{
    float:left;
    width: auto;
    min-width: 10%;
    height: 50px !important;
    min-height: 50px !important;
    padding-left: 50px;
    background-repeat: no-repeat;
    line-height: 50px;
    margin-bottom: 5px;
    margin-right: 15px;
    background-size: 50px auto;
}
.windri{
    float:left;
    display: table-cell;
}


.w-feuch {background-image: url(../weather_img/wett_feucht.png)}
.w-turbi {background-image: url(../weather_img/wett_turbine.png)}
.w-press {background-image: url(../weather_img/wett_pressure.png)}
.w-nider {background-image: url(../weather_img/wett_precip.png)}

.w-E {background-image: url(../weather_img/wind_E.png)}
.w-S {background-image: url(../weather_img/wind_S.png)}
.w-W {background-image: url(../weather_img/wind_W.png)}
.w-N {background-image: url(../weather_img/wind_N.png)}
.w-NNE {background-image: url(../weather_img/wind_NNE.png)}
.w-NNW {background-image: url(../weather_img/wind_NNW.png)}
.w-WNW {background-image: url(../weather_img/wind_WNW.png)}
.w-NNS {background-image: url(../weather_img/wind_NNS.png)}
.w-NE {background-image: url(../weather_img/wind_NE.png)}
.w-NW {background-image: url(../weather_img/wind_NW.png)}
.w-NS {background-image: url(../weather_img/wind_NS.png)}
.w-SSE {background-image: url(../weather_img/wind_SSE.png)}
.w-SSW {background-image: url(../weather_img/wind_SSW.png)}
.w-SE {background-image: url(../weather_img/wind_SE.png)}
.w-SW {background-image: url(../weather_img/wind_SW.png)}
/* weather - icons */

/* 1282 Moderate or heavy snow in area with thunder */
.w-1282 {background-image: url(../weather_svg/wsymbol_0012_heavy_snow_showers.svg)}
/* 1279 Patchy light snow in area with thunder */
.w-1279 {background-image: url(../weather_svg/wsymbol_0016_thundery_showers.svg)}
/* 1276 Moderate or heavy rain in area with thunder */
.w-1276 {background-image: url(../weather_svg/wsymbol_0024_thunderstorms.svg)}
/* 1273Patchy light rain in area with thunder */
.w-1273 {background-image: url(../weather_svg/wsymbol_0016_thundery_showers.svg)}
/* 1264 Moderate or heavy showers of ice pellets */
.w-1264 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* 1261 Light showers of ice pellets */
.w-1261 {background-image: url(../weather_svg/wsymbol_0013_sleet_showers.svg)}
/* 1258 Moderate or heavy snow showers */
.w-1258 {background-image: url(../weather_svg/wsymbol_0012_heavy_snow_showers.svg)}
/* 1255 Light snow shower */
.w-1255 {background-image: url(../weather_svg/wsymbol_0011_light_snow_showers.svg)}
/* 1252 Moderate or heavy sleet showers */
.w-1252 {background-image: url(../weather_svg/wsymbol_0013_sleet_showers.svg)}
/* 1249 Light sleet showers */
.w-1249 {background-image: url(../weather_svg/wsymbol_0013_sleet_showers.svg)}
/* 1246 Torrential rain shower */
.w-1246 {background-image: url(../weather_svg/wsymbol_0018_cloudy_with_heavy_rain.svg)}
/* Moderate or heavy rain shower */
.w-356 {background-image: url(../weather_svg/wsymbol_0010_heavy_rain_showers.svg)}
/* Light rain shower */
.w-353 {background-image: url(../weather_svg/wsymbol_0009_light_rain_showers.svg)}
/* Ice pellets */
.w-350 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* Heavy snow */
.w-338 {background-image: url(../weather_svg/wsymbol_0020_cloudy_with_heavy_snow.svg)}
/* Patchy heavy snow */
.w-335 {background-image: url(../weather_svg/wsymbol_0012_heavy_snow_showers.svg)}
/* Moderate snow */
.w-332 {background-image: url(../weather_svg/wsymbol_0020_cloudy_with_heavy_snow.svg)}
/* Patchy moderate snow */
.w-329 {background-image: url(../weather_svg/wsymbol_0020_cloudy_with_heavy_snow.svg)}
/* Light snow */
.w-326 {background-image: url(../weather_svg/wsymbol_0011_light_snow_showers.svg)}
/* Patchy light snow */
.w-323 {background-image: url(../weather_svg/wsymbol_0011_light_snow_showers.svg)}
/* Moderate or heavy sleet */
.w-320 {background-image: url(../weather_svg/wsymbol_0019_cloudy_with_light_snow.svg)}
/* Light sleet */
.w-317 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* Moderate or Heavy freezing rain */
.w-314 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* Light freezing rain */
.w-311 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* Heavy rain */
.w-308 {background-image: url(../weather_svg/wsymbol_0018_cloudy_with_heavy_rain.svg)}
/* Heavy rain at times */
.w-305 {background-image: url(../weather_svg/wsymbol_0010_heavy_rain_showers.svg)}
/* Moderate rain */
.w-302 {background-image: url(../weather_svg/wsymbol_0018_cloudy_with_heavy_rain.svg)}
/* Moderate rain at times */
.w-299 {background-image: url(../weather_svg/wsymbol_0010_heavy_rain_showers.svg)}
/* 1183 Light rain */
.w-296 {background-image: url(../weather_svg/wsymbol_0017_cloudy_with_light_rain.svg)}
/* 1180 Patchy light rain */
.w-293 {background-image: url(../weather_svg/wsymbol_0017_cloudy_with_light_rain.svg)}
/* 1171 Heavy freezing drizzle */
.w-284 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* 1168 Freezing drizzle */
.w-281 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* 1153 Light drizzle */
.w-266 {background-image: url(../weather_svg/wsymbol_0017_cloudy_with_light_rain.svg)}
/* 1150 Patchy light drizzle */
.w-263 {background-image: url(../weather_svg/wsymbol_0009_light_rain_showers.svg)}
/* 1147 Freezing fog */
.w-260 {background-image: url(../weather_svg/wsymbol_0007_fog.svg)}
/* 1135 Fog */
.w-248 {background-image: url(../weather_svg/wsymbol_0007_fog.svg)}
/* 1117 Blizzard */
.w-230 {background-image: url(../weather_svg/wsymbol_0020_cloudy_with_heavy_snow.svg)}
/* 1114 Blowing snow */
.w-227 {background-image: url(../weather_svg/wsymbol_0019_cloudy_with_light_snow.svg)}
/* 1087 Thundery outbreaks in nearby */
.w-200 {background-image: url(../weather_svg/wsymbol_0016_thundery_showers.svg)}
/* 1072 Patchy freezing drizzle nearby */
.w-185 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* 1069 Patchy sleet nearby */
.w-182 {background-image: url(../weather_svg/wsymbol_0021_cloudy_with_sleet.svg)}
/* 1066 Patchy sleet nearby */
.w-179 {background-image: url(../weather_svg/wsymbol_0013_sleet_showers.svg)}
/* 1063 Patchy rain nearby */
.w-176 {background-image: url(../weather_svg/wsymbol_0009_light_rain_showers.svg)}
/* 1030 Mist */
.w-143 {background-image: url(../weather_svg/wsymbol_0006_mist.svg)}
/* 1009 Overcast */
.w-122 {background-image: url(../weather_svg/wsymbol_0004_black_low_cloud.svg)}
/* 1006 Cloudy */
.w-119 {background-image: url(../weather_svg/wsymbol_0003_white_cloud.svg)}
/* Partly Cloudy */
.w-116 {background-image: url(../weather_svg/wsymbol_0002_sunny_intervals.svg)}
/* Clear/Sunny */
.w-113 {background-image: url(../weather_svg/wsymbol_0001_sunny.svg)}

.tooltip {
  color: #CCCCCC; /* Diese Formatiertungen sind  nicht unbedingt nötig */
}

.tooltip::after {
  background: rgba(74, 136, 185, 0.8); /* Hintergrund schwarz leicht durchsichtig */
  border-radius: 9px 9px 9px 0px; /* Box mit Rundungen – nicht links unten */
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); /* Schatten halbtransparent */
  color: #FFF;
  content: attr(data-tooltip); /* Inhalt aus Attr. data-tooltip auslesen und als Inhalt einfügen */
  margin-top: -24px;
  opacity: 0; /* Element ist durchsichtig – sieht beim einblenden besser aus */
  padding: 3px 6px;
  position: absolute;
  visibility: hidden; /* Element verstecken */
  transition: all 0.8s ease-in-out; /* Langsames einblenden einblenden */
  font-size: smaller;
  display: none;
}

.tooltip:hover::after {
    opacity: 1; /* Transparenz ausschalten */
    visibility: visible; /* Element einblenden */
    display: block;
}


@media screen and (max-width: 1280px) {
h1{ font-size: 250%; padding-top: 10px }
h3{ font-size: 110%; padding-top: 5px; font-weight: 400}
div.wettercode {font-size: 150%}
.sektionfooter{font-size: 100%}
.klein{font-size: 28%}
div.wetterbild {background-size:45% auto;}
.windri{height: 30px }
.footer{
    background-size:40px auto;
    padding-left: 50px;
    line-height: 35px;
    height: 40px !important;
    min-height: 40px !important;
    }
}


@media screen and (max-width: 800px) {
div.wetterbild {background-size:60% auto;}
.footer{
    background-size:30px auto;
    padding-left: 36px;
    line-height: 28px;
    height: 32px !important;
    min-height: 32px !important;
    }
@media screen and (max-width: 600px) {
div.wetterbild {background-size:60% auto;}
.footer{
    background-size:15px auto;
    padding-left: 15px;
    line-height: 12px;
    margin-right: 10px;
    height: 20px !important;
    min-height: 20px !important;
    }
}