@media ( min-width: 1200px) {}

@media ( min-width: 992px) {}

@media ( min-width: 769px) {}

@media ( max-width: 768px) {}




body {
    --primary-color: #111;
   
}

h1 {
    color: var(--primary-color);
}


@media only screen and (min-width: 993px) {
    .container {
        width: 90%;
    }
}

* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
}

*::selection {
    background: #ccc;
    color: #fff;
}

textarea,
input[type="text"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

html,
body {
    height: 100%;
}

body {
    background: #fff;
    color: #111;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    font-size: 15px;
    -webkit-text-size-adjust: none;
    font-weight: 300;
}

.temp-scale {
  width: 300px;
  height: 40px;
  /* links kalt (blau), rechts heiß (rot) */
  background-image: linear-gradient(to right, #00f, #0ff, #0f0, #ff0, #f00);
  border-radius: 4px;
}

div {
    position: relative;
}

.tile-container{
    margin-top: 2.5em; 
    display: flex; 
    flex-wrap: wrap; 
    /* gap: 10px;  */
    justify-content: center;
}

.logo{
    position: absolute;
    left:0;
    top:0;
    z-index: 2;
    fill: #fff;
    height:14.285714285714286vw;
}

.tile{
    width: 7.142857142857143%; /* 14 tiles per row */
    border: 0px solid #fff;
    background: #eee;
    cursor: pointer;
    float: left;
}

.tile28{
    width: 3.5714285714285717%; /* 28 tiles per row */
    border: 0px solid #fff;
    background: #eee;
    cursor: pointer;
    float: left;
}

.tile img{
    width: 100%;
}

.temperature{
    position: absolute;
    top:0;
    left:0;
    bottom:10px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:2.5em;
    color:#fff;
    font-weight: bold;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    opacity: 0;
    transition: 1.2s;
}

.minmax{
    position: absolute;
    top:0;
    left:0;
    bottom:10px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom:2px;
    left:0;
    right: 0;
    font-size: 8px;
    color:#fff;
    font-weight: bold;
    opacity: 0;
    transition: 1.2s;}

.min {
    position: absolute;
    
    left: 5px;
    right: 0;
    bottom: 3px;
    font-size: 0.6em;
    color:white;
    font-weight: bold;
    opacity: 0;
    transition: 1.2s;
}

.max {
    position: absolute;
    top: 15px;
    left: 5px;
    right: 0;
    bottom: 90%;
   font-size: 0.6em;
    color:white;
    font-weight: bold;
    opacity: 0;
    transition: 1.2s;
}

.ns {
    position:absolute;
    bottom: 5px;
    
    text-align: right;
    right: 5px;
    color:white;
    font-size: 8px;
    opacity: 0;
    transition: 1.2s;
}

.tnk, .txk {
    font-size:12px;
    color: #00f;
    font-weight: bold;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    
    transition: 1.2s;
}

.niederschlag{
    color: blue;
    font-weight: bold;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    opacity: 0;
    transition: 1.2s;
}
.dateheadline{
    font-size: 0.8em;
    color:darkcyan;
    padding: 5px;
}

.date{
    position: absolute;
    bottom:2px;
    left:0;
    right: 0;
    font-size: 10px;
    
    display: flex;
    justify-content: center;
    color:#fff;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    opacity: 0;
    transition: .7s;
}


.tile:hover > .temperature, .tile:hover > .date, .tile:hover > .minmax, .tile:hover > .min, .tile:hover > .max, .tile:hover > .ns,
.tile28:hover > .temperature, .tile28:hover > .date, .tile28:hover > .minmax, .tile28:hover > .min, .tile28:hover > .max, .tile28:hover > .ns {
    opacity: 1;
    transition: .1s;
}

.neuer-monat{    
    /* border-left: #eee 3px solid !important;
    border-bottom: red 1px solid     !important; */
    box-shadow: inset 3px 0 0 0 #eee; 
     
}

.monat-name{
    position: absolute;
    top:1px;
    left:2px;
    font-size: 0.5em;
    padding: 2px;
    color:#fff;    
    z-index: 1;
}

.headline{color: darkcyan;
        font-size: 1.2em;
        padding: 5px;
        height: auto;
        
    }


@media ( max-width: 990px) {

    head{
        font-size: 1em;
        height: auto;
    }

    .logo{
        width: auto;
        height: 80px;
    }
    
    .tile{
        width:14.285714285714286%;
        background: #eee;
        cursor: pointer;
        float: left;
    }

    .temperature{
        font-size:1.5em;
        color:#fff;
        font-weight: bold;
        font-family: 'Roboto', Arial, Verdana, sans-serif;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
        opacity: 0;
        transition: 1.2s;
    }
    
    .date ,.minmax,.min,.max,.ns {        
        font-size: 0.5em;

    }
    .date {        
        position: absolute;
        bottom: 1.8em;

    }
}

.t1{background:#4af172;}
.t2{background:#49ed58;}
.t3{background:#47e939;}
.t4{background:#42db3a;}
.t5{background:#3dcc3c;}
.t6{background:#3bc357;}
.t7{background:#39ba72;}
.t8{background:#349b69;}
.t9{background:#2f7c5f;}
.t10{background:#287942;}
.t11{background:#207523;} 
.t12{background:#358d12;}
.t13{background:#4aa500;}
.t14{background:#68bb00;}
.t15{background:#84d100;}
.t16{background:#a3e900;}
.t17{background:#beff00;}
.t18{background:#ccfd49;}
.t19{background:#d9fc90;}
.t20{background:#edfb44;} 
.t21{background:#fffa00;}
.t22{background:#fffa00;}
.t23{background:#fbde00;}
.t24{background:#fbde00;}
.t25{background:#fbcc00;}
.t26{background:#fbcc00;}
.t27{background:#faa000;}
.t28{background:#faa000;}
.t29{background:#f69000;}
.t30{background:#f69000;}
.t31{background:#fa6900;}
.t32{background:#fa6900;}
.t33{background:#f75300;}
.t34{background:#f75300;}
.t35{background:#f51000;}
.t36{background:#f51000;}
.t37{background:#f02100;}
.t38{background:#f02100;}
.t39{background:#f01e67;}
.t40{background:#f01e67;}
.t41{background:#ef15ca;}
.t42{background:#ef15ca;}




.t0{background:#a8ebf7;}
.t-1{background:#9ce5f8;}
.t-2{background:#90def8;}
.t-3{background:#75d3fa;}
.t-4{background:#5dc9fb;}
.t-5{background:#5dc9fb;}
.t-6{background:#58aced;}
.t-7{background:#58aced;}
.t-8{background:#3b8af1;}
.t-9{background:#3b8af1;}
.t-10{background:#225ae6;}
.t-11{background:#225ae6;}
.t-12{background:#0e28d2;}
.t-13{background:#0e28d2;}
.t-14{background:#1500c8;}
.t-15{background:#1500c8;}
.t-16{background:#6800dc;}
.t-17{background:#6800dc;}
.t-18{background:#8400e5;}
.t-19{background:#8400e5;}
.t-20{background:#a300e4;}
.t-21{background:#a300e4;}
.t-22{background:#c100dd;}
.t-23{background:#c100dd;}
.t-24{background:#a005b0;}
.t-25{background:#a005b0;}

.footer {
    margin: 0 auto;
    width: 100%;
    padding: 30px 50px;
    transition: transform .2s;
    color: #fff;
    text-align: left;
}

.footer a {
    color: #ccc;
    font-size: 14px;
    margin-right: 10px;
}

.footer a:hover {
    opacity: .7;
}