div#tablewrapper{
position:relative;
padding:0.5em 0.8em;
max-width:56em;
margin:auto;
text-align:center;
}
table#klimatabelle{
column-gap:0px;
border-collapse:collapse;
border-spacing:0;
margin:0 auto;
font-size:1.125em;
lien-height:1.675em;
}
table#klimatabelle,table#klimatabelle > thead > th,
table#klimatabelle > tbody > tr > td{
border:0px;
border-spacing:0px;
column-gap:0;
margin:0;
padding:0;
}
table#klimatabelle > tbody > tr > td > table{
border:1px solid #ddd;
border-collapse:collapse;
border-spacing:0px;
column-gap:0px;
}
table#klimatabelle > tbody > tr > td > table > tbody > tr{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
border-collapse:collapse;
padding:0.2em;
}
table#klimatabelle table thead th{
text-align:center;
font-weight:500;
height:28px;
padding:0.1em;
background-color:#777;
color:#fff;
}
table#klimatabelle table tbody td{
text-align:center;
height:24px;
padding:0.1em;
}
table#klimatabelle td.legende table thead th{
text-align:right;
font-weight:500;
}
table#klimatabelle td.legende table tbody td{
text-align:left;
font-weight:500;
background-color:#777;
color:#fff;
}
.legende.helfer{
display:none;
}
td.mat15{
background-color:#ffbe5a;
}
td.mat20{
background-color:#ff9a00;
}
td.mat25{
background-color:#ff5900;
}
td.mat27{
background-color:#ff0034;
}
td.mat29{
background-color:#f12a55;
}
td.mit9{
background-color:#ffdd98;
}
td.mit12{
background-color:#ffc145;
}
td.mit15{
background-color:#ffb41e;
}
td.mit18{
background-color:#ff9945;
}
td.mit20{
background-color:#f06d00;
}
td.wat15{
background-color:#0d459f;
color:#fff;
}
td.wat16{
background-color:#2661be;
color:#fff;
}
td.wat17{
background-color:#6794db;
color:#fff;
}
td.wat19{
background-color:#95b6ea;
}
td.wat23{
background-color:#8be9d9;
}
td.wat25{
background-color:#36c8b0;
}
td.sst4{
background-color:#f9fe98;
}
td.sst6{
background-color:#f4fe44;
}
td.sst8{
background-color:#ffe345;
}
td.sst10{
background-color:#ffdd1e;
}
td.sst12{
background-color:#ffc545;
}
td.rt0{
background-color:#fff;
}
td.rt2{
background-color:#99a6ec4;
}
td.rt5{
background-color:#6d7edd;
}
td.rt7{
background-color:#2d44c2;
color:#fff;
}
td.rt9{
background-color:#1329a4;
color:#fff;
}

@media screen and (max-width:767px){
table#klimatabelle{
max-width:500px;
margin:auto;
}
table#klimatabelle td.legende{
display:none;
}
table#klimatabelle td{
display:block;
width:100%;
min-width:220px;
}
table#klimatabelle td table{
table-layout:fixed;
padding:0;margin:0;
margin-bottom:2.0em;
width:100%;
}
table#klimatabelle td table td{
text-align:right;
box-sizing:border-box;
padding-right:1.0em;
display:block;
width:100%;
border-top:1px solid #ddd;
}
table#klimatabelle td table td:before{
content:attr(data-label);
color:inherit;
background-color:transparent;
float:left;
padding:0;margin:0;
padding-left:0.2em;
display:block;
width:60%;
height:100%;
box-sizing:border-box;
top:0;
text-align:left;
}
table#klimatabelle:after{
content:"Erläuterungen zur Klimatabelle von Kos: Höchsttemperatur, Tiefsttemperatur und Wassertemperatur: jeweils der Durchschnittswert des Monats in Grad Celcius angegeben. Sonnenstunden: pro Tag durchschnittlich. Regentage: pro Monat.";
display:block;
width:100%;
padding:0.3em;
text-align:left;
color:#555;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
table#klimatabelle{
width:760px;
}
table#klimatabelle > thead > th,
table#klimatabelle > tbody > tr > td{
width:128px;
display:inline-block;
margin-top: 0.4em;
}
.legende{
width:128px;
display:inline-block;
}
.legende.helfer{
display:block;
}
table#klimatabelle tbody td table{
width:128px;
table-layout:fixed;
}
table#klimatabelle tbody td.legende table{
width:128px;
table-layout:fixed;
}
}
@media screen and (min-width:1024px){
table#klimatabelle table tr td:first-child{
font-size:0.888889em;
}
table#klimatabelle tbody td table td{
padding:0.4em 0.7em;
}
}